/*
 * Pacewise static site.
 *
 * Colour tokens are copied by value from apps/web/src/app/globals.css (the "Signal"
 * design language, docs/design-system.md). This file imports nothing from apps/web:
 * keep the two in step by hand.
 *
 * Only the homepage animates, in CSS, and every animation stops under
 * prefers-reduced-motion. check-site.mjs requires a reduce block that sets `animation: none`;
 * it checks that the block exists, not what it covers, so keep its selectors broad.
 *
 * The homepage rules use `lp-` classes and `body.landing`, so the legal pages and the 404
 * page render as before. Never name a class those pages use in a rule that hides something:
 * check-site.mjs reads this file for hiding classes when it accepts a labelled draft.
 */

@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-latin-wght-normal.woff2') format('woff2');
  font-display: swap;
  font-weight: 100 900;
  font-style: normal;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Metric-matched stand-in while Inter loads, as in the app: it keeps the layout from
   shifting when the web font swaps in. */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  ascent-override: 90.44%;
  descent-override: 22.52%;
  line-gap-override: 0%;
  size-adjust: 107.12%;
}

:root {
  color-scheme: light dark;
  --background: 120 14% 97%;
  --foreground: 148 32% 8%;
  --card: 0 0% 100%;
  --muted-foreground: 135 7% 39%;
  --primary: 158 83% 23%;
  --primary-foreground: 120 14% 97%;
  --electric: 245 77% 61%;
  --warning: 36 85% 32%;
  --border: 129 11% 88%;
  --ring: 245 77% 61%;
  --secondary-foreground: 147 15% 24%;
  --success: 152 55% 28%;
  --shadow-ambient:
    inset 0 1px 0 hsl(0 0% 100% / 0.65), 0 1px 2px hsl(var(--foreground) / 0.06),
    0 22px 36px -20px hsl(var(--primary) / 0.42);
  --shadow-ambient-hover:
    inset 0 1px 0 hsl(0 0% 100% / 0.65), 0 1px 2px hsl(var(--foreground) / 0.07),
    0 30px 48px -18px hsl(var(--electric) / 0.45);
  --shadow-ambient-sm:
    inset 0 1px 0 hsl(0 0% 100% / 0.65), 0 1px 2px hsl(var(--foreground) / 0.06),
    0 6px 14px -6px hsl(var(--primary) / 0.42);
  --shadow-ambient-sm-hover:
    inset 0 1px 0 hsl(0 0% 100% / 0.65), 0 1px 2px hsl(var(--foreground) / 0.07),
    0 10px 20px -6px hsl(var(--electric) / 0.45);
  --shadow-ai-glow:
    var(--shadow-ambient-hover), 0 0 20px -2px hsl(var(--primary) / 0.45),
    0 0 34px -6px hsl(var(--electric) / 0.45);
  --ghost-stroke-alpha: 0.18;
  --ghost-fill-alpha: 0.4;
  --electric-ink: 245 62% 52%;
  --radius: 2px;
  --font-sans: 'Inter', 'Inter Fallback', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Roboto Mono', Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: 164 41% 5%;
    --foreground: 133 27% 94%;
    --card: 152 30% 8%;
    --muted-foreground: 146 11% 59%;
    --primary: 158 64% 52%;
    --primary-foreground: 157 69% 5%;
    --electric: 245 100% 76%;
    --warning: 40 80% 60%;
    --border: 146 21% 15%;
    --ring: 245 100% 76%;
    --secondary-foreground: 145 15% 78%;
    --success: 152 45% 55%;
    --shadow-ambient:
      inset 0 1px 0 hsl(0 0% 100% / 0.06), 0 1px 2px hsl(0 0% 0% / 0.5),
      0 20px 36px -20px hsl(0 0% 0% / 0.6);
    --shadow-ambient-hover:
      inset 0 1px 0 hsl(0 0% 100% / 0.06), 0 1px 2px hsl(0 0% 0% / 0.5),
      0 32px 50px -16px hsl(var(--electric) / 0.4);
    --shadow-ambient-sm:
      inset 0 1px 0 hsl(0 0% 100% / 0.06), 0 1px 2px hsl(0 0% 0% / 0.5),
      0 6px 14px -6px hsl(0 0% 0% / 0.6);
    --shadow-ambient-sm-hover:
      inset 0 1px 0 hsl(0 0% 100% / 0.06), 0 1px 2px hsl(0 0% 0% / 0.5),
      0 10px 20px -6px hsl(var(--electric) / 0.4);
    --ghost-stroke-alpha: 0.13;
    --ghost-fill-alpha: 0.3;
    --electric-ink: 245 100% 76%;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  overflow-wrap: break-word;
}

h1,
h2,
h3 {
  line-height: 1.2;
  letter-spacing: -0.01em;
}

a {
  color: hsl(var(--primary));
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
  border-radius: var(--radius);
}

.container {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: 1rem;
}

.narrow {
  max-width: 48rem;
}

@media (min-width: 48rem) {
  .container {
    padding-inline: 2rem;
  }
}

.skip-link {
  position: absolute;
  top: 0.75rem;
  left: 1rem;
  z-index: 10;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

/* <main> takes focus from the skip link (tabindex="-1", for Safari); it is a landmark,
   not a control, so it gets no focus ring of its own. */
main:focus {
  outline: none;
}

/* Header and footer */

.site-header {
  border-bottom: 1px solid hsl(var(--border));
}

.site-header .container {
  display: flex;
  align-items: center;
  min-height: 4rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding-block: 0.5rem;
  color: hsl(var(--foreground));
  font-family: var(--font-mono);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-decoration: none;
}

.brand-dot {
  display: inline-block;
  flex: none;
  width: 0.45em;
  height: 0.45em;
  border-radius: 50%;
  background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--electric)));
}

.site-footer {
  border-top: 1px solid hsl(var(--border));
  padding-block: 2rem 2.5rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.875rem;
}

.site-footer p {
  margin: 0.5rem 0 0;
}

.footer-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.footer-nav a {
  display: inline-block;
  padding-block: 0.25rem;
}

/* Landing: index.html only, scoped by `body.landing` and `lp-` classes. */

/* A control outline at 3:1 or more against the page in both schemes (WCAG 1.4.11). */
.landing {
  --lp-control-border: hsl(var(--muted-foreground));
}

.landing .container {
  max-width: 87.5rem;
}

@media (min-width: 40rem) {
  .landing .container {
    padding-inline: 1.5rem;
  }
}

@media (min-width: 64rem) {
  .landing {
    padding-left: 88px;
  }

  .landing .container {
    padding-inline: 2rem;
  }
}

.landing [id] {
  scroll-margin-top: 5rem;
}

.landing .skip-link {
  z-index: 60;
}

@media (min-width: 64rem) {
  .landing .skip-link {
    left: calc(88px + 1rem);
  }
}

/* Text for screen readers only, beside a glyph they would read by its name. */
.lp-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.landing .site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: hsl(var(--background) / 0.8);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.landing .site-header::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--electric)));
  background-size: 200% 100%;
  animation: lp-drift 6s ease-in-out infinite;
}

.landing .brand-dot,
.lp-dot {
  animation: lp-dot-pulse 2.6s ease-out infinite;
}

.lp-dot {
  display: inline-block;
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--electric)));
}

@keyframes lp-dot-pulse {
  0% {
    box-shadow: 0 0 0 0 hsl(var(--electric) / 0.45);
  }

  70% {
    box-shadow: 0 0 0 8px hsl(var(--electric) / 0);
  }

  100% {
    box-shadow: 0 0 0 0 hsl(var(--electric) / 0);
  }
}

@keyframes lp-drift {
  0%,
  100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}

/* Ambient brand colour behind the page */

.lp-ambient {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.lp-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  animation: lp-blob 26s ease-in-out infinite;
}

.lp-blob-a {
  top: -12vw;
  left: -10vw;
  width: 46vw;
  height: 46vw;
  background: hsl(var(--primary) / 0.4);
  opacity: 0.3;
}

.lp-blob-b {
  top: 30vh;
  right: -14vw;
  width: 38vw;
  height: 38vw;
  background: hsl(var(--electric) / 0.4);
  opacity: 0.25;
  animation-duration: 32s;
  animation-delay: -6s;
}

.lp-blob-c {
  bottom: -10vw;
  left: 20vw;
  width: 30vw;
  height: 30vw;
  background: hsl(var(--primary) / 0.35);
  opacity: 0.2;
  animation-duration: 38s;
  animation-delay: -14s;
}

@keyframes lp-blob {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  33% {
    transform: translate(4%, 6%) scale(1.08);
  }

  66% {
    transform: translate(-5%, -3%) scale(0.96);
  }
}

/* Section rail, wide screens only */

.lp-rail {
  display: none;
}

@media (min-width: 64rem) {
  .lp-rail {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 88px;
    padding-block: 1.25rem;
    background: hsl(var(--background) / 0.85);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }
}

.lp-rail-edge {
  position: absolute;
  inset: 0 0 0 auto;
  width: 2px;
  background: linear-gradient(
    180deg,
    hsl(var(--primary)),
    hsl(var(--electric)),
    hsl(var(--primary))
  );
  background-size: 100% 300%;
  animation: lp-shimmer 9s ease-in-out infinite;
}

@keyframes lp-shimmer {
  0%,
  100% {
    background-position: 50% 0%;
  }

  50% {
    background-position: 50% 100%;
  }
}

.lp-monogram {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 46px;
  height: 46px;
  border: 1px solid hsl(var(--border));
  border-radius: 12px;
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.lp-monogram .lp-dot {
  width: 5px;
  height: 5px;
}

.lp-monogram:hover,
.lp-monogram:focus-visible {
  transform: translateY(-2px);
  border-color: hsl(var(--electric));
  box-shadow: 0 8px 22px -8px hsl(var(--electric) / 0.45);
}

.lp-rail-nav {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding-block: 6px;
}

.lp-rail-track {
  position: absolute;
  top: 26px;
  left: 50%;
  width: 2px;
  height: 198px;
  border-radius: 999px;
  background: hsl(var(--muted-foreground) / 0.35);
  translate: -50% 0;
}

.lp-rail-nav a {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid hsl(var(--muted-foreground) / 0.8);
  border-radius: 50%;
  background: hsl(var(--background));
  color: hsl(var(--muted-foreground));
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  text-decoration: none;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.lp-rail-nav a:hover,
.lp-rail-nav a:focus-visible {
  transform: scale(1.1);
  border-color: hsl(var(--electric));
  color: hsl(var(--foreground));
}

.lp-rail-label {
  position: absolute;
  left: 54px;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius);
  background: hsl(var(--foreground));
  color: hsl(var(--background));
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.lp-rail-nav a:hover .lp-rail-label,
.lp-rail-nav a:focus-visible .lp-rail-label {
  opacity: 1;
}

.lp-rail-tagline {
  color: hsl(var(--muted-foreground));
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  rotate: 180deg;
}

/* Shared pieces */

.lp-eyebrow,
.lp-kicker,
.lp-mono-label,
.lp-sample,
.lp-badge,
.lp-hint,
.lp-pill,
.lp-delta,
.lp-chip,
.lp-caption,
.lp-coach,
.lp-step-code,
.lp-boundary-chip,
.lp-boundary-label,
.lp-footnote,
.lp-chart-unit {
  font-family: var(--font-mono);
}

.lp-eyebrow {
  margin: 0 0 0.75rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lp-sample {
  display: inline-block;
  padding: 0 0.5rem;
  border: 1px dashed hsl(var(--muted-foreground) / 0.7);
  border-radius: 999px;
  color: hsl(var(--muted-foreground));
  font-size: 10.5px;
  line-height: 1.6;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.lp-icon {
  flex: none;
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lp-ai {
  color: hsl(var(--electric));
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .lp-ai {
    background: linear-gradient(
      100deg,
      hsl(var(--primary)),
      hsl(var(--electric)),
      hsl(var(--primary))
    );
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: lp-drift 5s ease-in-out infinite;
  }
}

@media (forced-colors: active) {
  .lp-ai {
    background: none;
    color: CanvasText;
  }
}

.lp-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.625rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: hsl(var(--primary));
  box-shadow: var(--shadow-ambient-sm);
  color: hsl(var(--primary-foreground));
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition:
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.lp-button:hover {
  box-shadow: var(--shadow-ambient-sm-hover);
  transform: translateY(-1px);
}

.lp-button .lp-icon {
  transition: transform 0.2s ease;
}

.lp-button:hover .lp-icon {
  transform: translateX(2px);
}

.lp-button-outline {
  border-color: var(--lp-control-border);
  background: hsl(var(--background));
  color: hsl(var(--foreground));
}

@media (min-width: 40rem) {
  .lp-button {
    width: auto;
  }
}

.lp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.lp-hint {
  margin: 0;
  color: hsl(var(--muted-foreground));
  font-size: 0.8125rem;
}

.lp-card {
  position: relative;
  overflow: hidden;
  margin: 0;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--card));
  box-shadow: var(--shadow-ambient);
  transition: box-shadow 0.3s ease;
}

.lp-card:hover {
  box-shadow: var(--shadow-ambient-hover);
}

/* Hero */

/* The bottom padding is the ghost wordmark's height less 1rem, so the wordmark starts below
   the hero text (its own top space adds to the gap). Keep it in step with .lp-ghost. */
.lp-hero {
  position: relative;
  overflow: hidden;
  padding-block: 3.5rem calc(clamp(90px, 15vw, 200px) - 1rem);
}

.lp-wash {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 50% at 15% 0%, hsl(var(--primary) / 0.09), transparent 60%),
    radial-gradient(50% 45% at 85% 18%, hsl(var(--electric) / 0.1), transparent 65%);
  pointer-events: none;
}

.lp-ghost {
  position: absolute;
  inset: auto 0 0;
  color: transparent;
  font-family: var(--font-mono);
  font-size: clamp(90px, 15vw, 200px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.04em;
  text-align: center;
  white-space: nowrap;
  -webkit-text-stroke: 1px hsl(var(--foreground) / var(--ghost-stroke-alpha));
  pointer-events: none;
  user-select: none;
}

.lp-ghost b {
  background: linear-gradient(
    120deg,
    hsl(var(--primary) / var(--ghost-fill-alpha)),
    hsl(var(--electric) / var(--ghost-fill-alpha))
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 0;
}

.lp-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  align-items: center;
  column-gap: 2.5rem;
}

.lp-hero-copy {
  padding-top: 1.5rem;
}

.lp-kicker {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1.5rem;
  color: hsl(var(--electric-ink));
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lp-hero h1 {
  margin: 0 0 1.75rem;
  font-size: clamp(2.8rem, 5.6vw, 4.6rem);
  font-weight: 800;
  line-height: 0.96;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.lp-tight {
  display: inline-block;
  transform: scaleX(0.93);
  transform-origin: left;
}

.lp-hero h1 em {
  color: hsl(var(--muted-foreground));
  font-style: normal;
  font-weight: 400;
}

.lp-lead {
  max-width: 42ch;
  margin: 0 0 2rem;
  color: hsl(var(--secondary-foreground));
  font-size: 1.125rem;
  line-height: 1.625;
}

.lp-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.875rem;
  margin: 0 0 2.5rem;
}

.lp-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.125rem 0.625rem;
  border: 1px solid hsl(var(--electric) / 0.35);
  border-radius: 999px;
  background:
    linear-gradient(hsl(var(--electric) / 0.1), hsl(var(--electric) / 0.1)), hsl(var(--background));
  color: hsl(var(--electric-ink));
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

/* Hero instrument card (sample values) */

.lp-stage {
  position: relative;
  margin: 0 0 2.5rem;
}

.lp-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
  pointer-events: none;
  transition:
    transform 0.5s ease,
    opacity 0.5s ease;
}

.lp-glow-a {
  top: -1.25rem;
  left: 0;
  width: 15rem;
  height: 15rem;
  background: hsl(var(--primary) / 0.55);
  opacity: 0.35;
}

.lp-glow-b {
  right: 0;
  bottom: -0.625rem;
  width: 13rem;
  height: 13rem;
  background: hsl(var(--electric) / 0.55);
  opacity: 0.3;
}

.lp-stage:hover .lp-glow {
  transform: scale(1.1);
}

.lp-stage:hover .lp-glow-a {
  opacity: 0.55;
}

.lp-stage:hover .lp-glow-b {
  opacity: 0.5;
}

.lp-float {
  position: relative;
  animation: lp-float 6.5s ease-in-out infinite;
}

@keyframes lp-float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-9px);
  }
}

.lp-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.125rem;
  border-bottom: 1px solid hsl(var(--border));
}

.lp-mono-label {
  color: hsl(var(--muted-foreground));
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lp-pill {
  margin-left: auto;
  padding: 0.125rem 0.625rem;
  border: 1px solid hsl(var(--success) / 0.35);
  border-radius: 999px;
  background: hsl(var(--success) / 0.15);
  color: hsl(var(--success));
  font-size: 11px;
  letter-spacing: 0.04em;
}

.lp-gauge-area {
  position: relative;
  container-type: inline-size;
}

/* In flow above the gauge on a narrow card, where it would cover the ring; pinned to the
   corner once the card is 28rem wide. The card is narrow on phones and in the two-column
   hero below about 1250px, so this asks the card, not the viewport. */
.lp-delta {
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  width: max-content;
  margin: 0.75rem 0.75rem 0 auto;
  padding: 0.25rem 0.625rem;
  border: 1px solid hsl(var(--border));
  border-radius: 999px;
  background: hsl(var(--card));
  box-shadow: var(--shadow-ambient);
  color: hsl(var(--success));
  font-size: 11.5px;
}

.lp-gauge {
  position: relative;
  width: 180px;
  height: 180px;
  margin: 0.75rem auto 0.375rem;
}

@container (min-width: 28rem) {
  .lp-delta {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    margin: 0;
  }

  .lp-gauge {
    margin-top: 1.5rem;
  }
}

.lp-gauge svg {
  display: block;
  width: 100%;
  height: 100%;
}

.lp-stop-a {
  stop-color: hsl(var(--primary));
}

.lp-stop-b {
  stop-color: hsl(var(--electric));
}

.lp-ring-track {
  fill: none;
  stroke: hsl(var(--border));
  stroke-width: 11;
}

.lp-ring-fill {
  fill: none;
  stroke-width: 11;
  stroke-linecap: round;
  stroke-dasharray: 540.35;
  stroke-dashoffset: 102.67;
  transition: filter 0.3s ease;
  animation: lp-ring 1.3s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s both;
}

.lp-card:hover .lp-ring-fill {
  filter: drop-shadow(0 0 7px hsl(var(--electric) / 0.6));
}

@keyframes lp-ring {
  from {
    stroke-dashoffset: 540.35;
  }
}

.lp-gauge-value {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.lp-gauge-num {
  font-family: var(--font-mono);
  font-size: 38px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}

.lp-gauge-num small {
  color: hsl(var(--muted-foreground));
  font-size: 17px;
}

.lp-gauge-label {
  margin-top: 0.125rem;
  color: hsl(var(--muted-foreground));
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lp-chip-row {
  display: flex;
  justify-content: center;
  margin: 0;
  padding-bottom: 0.875rem;
}

.lp-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.125rem 0.625rem 0.125rem 0.5rem;
  border: 1px solid hsl(var(--electric) / 0.3);
  border-radius: 999px;
  background: hsl(var(--electric) / 0.1);
  color: hsl(var(--electric-ink));
  font-size: 11px;
}

.lp-readouts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid hsl(var(--border));
}

.lp-recovery {
  container-type: inline-size;
}

/* Sized to the card, so the longest value ("Moderate") fits a narrow card at the same
   style as the others. */
.lp-readouts div {
  padding: 0.75rem clamp(0.625rem, 3.5cqi, 1rem);
  transition:
    transform 0.2s ease,
    background-color 0.2s ease;
}

.lp-readouts div + div {
  border-left: 1px solid hsl(var(--border));
}

.lp-readouts div:hover {
  background: hsl(var(--electric) / 0.05);
  transform: translateY(-2px);
}

.lp-readouts dt,
.lp-metrics dt {
  color: hsl(var(--muted-foreground));
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lp-readouts dt {
  margin-bottom: 0.375rem;
}

.lp-readouts dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(0.9375rem, 5.2cqi, 1.125rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}

.lp-unit {
  margin-left: 0.125rem;
  color: hsl(var(--muted-foreground));
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
}

.lp-caption {
  margin: 0;
  padding: 0.5rem 1rem;
  border-top: 1px solid hsl(var(--border));
  color: hsl(var(--muted-foreground));
  font-size: 0.75rem;
  text-align: center;
}

@media (min-width: 64rem) {
  .lp-hero-grid {
    grid-template-columns: 7fr 5fr;
  }

  .lp-stage {
    margin-bottom: 0;
  }
}

/* Sample metrics strip */

.lp-strip {
  position: relative;
  border-block: 1px solid hsl(var(--border));
  background: hsl(var(--card));
}

.lp-strip-label {
  margin: 0;
  padding-top: 1rem;
}

.lp-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.875rem 2rem;
  margin: 0;
  padding-block: 0.875rem 1.25rem;
}

.lp-metrics div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.625rem;
}

.lp-metrics dd {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.05em;
}

.lp-metrics b {
  font-weight: 600;
}

.lp-up {
  color: hsl(var(--success));
  font-size: 11px;
}

@media (min-width: 40rem) {
  .lp-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .lp-metrics {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.lp-coach {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin: 0;
  padding-block: 0.875rem;
  border-top: 1px solid hsl(var(--border));
}

.lp-coach-label {
  color: hsl(var(--electric-ink));
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lp-coach-text {
  color: hsl(var(--secondary-foreground));
  font-size: 12.5px;
  letter-spacing: 0.05em;
}

/* Sections */

.lp-section {
  padding-block: 5rem;
}

.lp-rule {
  border-top: 1px solid hsl(var(--border));
}

.lp-head {
  max-width: 62ch;
  margin-bottom: 3rem;
}

.lp-h2 {
  margin: 0;
  font-size: clamp(1.8rem, 3.4vw, 2.5rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

/* Privacy pipeline */

.lp-pipeline {
  position: relative;
}

.lp-boundary-line,
.lp-boundary-label,
.lp-pulse {
  display: none;
}

.lp-stages {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-boundary-inline {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.lp-dash {
  flex: 1;
  height: 1px;
  background: repeating-linear-gradient(
    90deg,
    hsl(var(--muted-foreground)) 0 4px,
    transparent 4px 8px
  );
}

.lp-boundary-chip,
.lp-boundary-label {
  padding: 0.25rem 0.625rem;
  border: 1px solid hsl(var(--electric) / 0.4);
  border-radius: 999px;
  background: hsl(var(--background));
  color: hsl(var(--electric-ink));
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.lp-step {
  position: relative;
  padding: 1.5rem 1.25rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--card));
  box-shadow: var(--shadow-ambient);
  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.lp-step::before {
  content: '';
  position: absolute;
  inset: -1px -1px auto;
  height: 2px;
  background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--electric)));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.lp-step:hover {
  border-color: hsl(var(--electric) / 0.4);
  box-shadow: var(--shadow-ambient-hover);
  transform: translateY(-4px);
}

.lp-step-ai:hover {
  box-shadow: var(--shadow-ai-glow);
}

.lp-step:hover::before {
  transform: scaleX(1);
}

.lp-step-code {
  display: flex;
  gap: 0.5rem;
  margin: 0 0 0.875rem;
  color: hsl(var(--muted-foreground));
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: letter-spacing 0.25s ease;
}

.lp-step:hover .lp-step-code {
  letter-spacing: 0.16em;
}

.lp-step-code span {
  color: hsl(var(--electric-ink));
}

.lp-step-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: 0.875rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}

.lp-step-icon .lp-icon {
  width: 22px;
  height: 22px;
  stroke-width: 1.6;
}

.lp-step-ai .lp-step-icon,
.lp-step:hover .lp-step-icon {
  color: hsl(var(--electric));
}

.lp-step:hover .lp-step-icon {
  border-color: hsl(var(--electric) / 0.4);
  animation: lp-pop 0.45s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

@keyframes lp-pop {
  0% {
    transform: scale(1) rotate(0deg);
  }

  45% {
    transform: scale(1.22) rotate(-10deg);
  }

  70% {
    transform: scale(1.06) rotate(4deg);
  }

  100% {
    transform: scale(1.12) rotate(-3deg);
  }
}

.lp-step h3 {
  margin: 0 0 0.5rem;
  font-size: 1.03rem;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.lp-step-text {
  margin: 0;
  color: hsl(var(--muted-foreground));
  font-size: 13.5px;
  line-height: 1.625;
}

.lp-footnote {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 2.75rem 0 0;
  color: hsl(var(--muted-foreground));
  font-size: 13.5px;
}

.lp-footnote::before {
  content: '';
  flex: none;
  width: 22px;
  height: 1px;
  background: hsl(var(--electric));
}

@media (min-width: 64rem) {
  .lp-stages {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 26px;
  }

  .lp-boundary-inline {
    display: none;
  }

  .lp-boundary-line {
    position: absolute;
    top: -1.5rem;
    bottom: -1.5rem;
    left: 50%;
    display: block;
    border-left: 2px dashed hsl(var(--electric) / 0.55);
    translate: -50% 0;
  }

  /* Lit while the pulse holds on the boundary (40%–54% of the same 8s cycle). */
  .lp-boundary-label {
    position: absolute;
    top: -25px;
    left: 50%;
    z-index: 2;
    display: block;
    isolation: isolate;
    translate: -50% 0;
    animation: lp-lit 8s linear infinite;
  }

  .lp-boundary-label::before {
    content: '';
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--electric)));
    opacity: 0;
    animation: lp-lit-fill 8s linear infinite;
  }

  .lp-pulse {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 4;
    display: block;
    width: 9px;
    height: 9px;
    margin-top: -4.5px;
    border-radius: 50%;
    background: hsl(var(--primary));
    box-shadow: 0 0 8px hsl(var(--primary) / 0.7);
    pointer-events: none;
    transform: translateX(-50%);
    animation: lp-travel 8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  }

  .lp-step-next::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -26px;
    width: 26px;
    height: 1px;
    background: repeating-linear-gradient(
      90deg,
      hsl(var(--muted-foreground)) 0 4px,
      transparent 4px 8px
    );
  }
}

@keyframes lp-lit {
  0%,
  38.5%,
  59%,
  100% {
    border-color: hsl(var(--electric) / 0.4);
    box-shadow: none;
    color: hsl(var(--electric-ink));
    scale: 1;
  }

  40%,
  54% {
    border-color: transparent;
    box-shadow:
      0 0 0 4px hsl(var(--electric) / 0.18),
      0 0 22px hsl(var(--electric) / 0.55);
    color: hsl(var(--primary-foreground));
    scale: 1.08;
  }
}

@keyframes lp-lit-fill {
  0%,
  38.5%,
  59%,
  100% {
    opacity: 0;
  }

  40%,
  54% {
    opacity: 1;
  }
}

/* A raw record (circle) travels in, stops on the boundary, spins into a minimised record
   (diamond, electric), and travels on. */
@keyframes lp-travel {
  0% {
    left: 2%;
    border-radius: 50%;
    background: hsl(var(--primary));
    opacity: 0;
    transform: translateX(-50%) rotate(0deg) scale(1);
  }

  4% {
    opacity: 1;
  }

  40% {
    left: 50%;
    border-radius: 50%;
    background: hsl(var(--primary));
    transform: translateX(-50%) rotate(0deg) scale(1);
  }

  48% {
    left: 50%;
    border-radius: 35%;
    background: hsl(var(--primary));
    transform: translateX(-50%) rotate(220deg) scale(1.7);
  }

  54% {
    left: 50%;
    border-radius: 20%;
    background: hsl(var(--electric));
    box-shadow: 0 0 10px hsl(var(--electric) / 0.8);
    transform: translateX(-50%) rotate(405deg) scale(1);
  }

  90%,
  96% {
    left: 97%;
    border-radius: 20%;
    background: hsl(var(--electric));
    opacity: 1;
    transform: translateX(-50%) rotate(405deg) scale(1);
  }

  100% {
    left: 97%;
    border-radius: 20%;
    background: hsl(var(--electric));
    opacity: 0;
    transform: translateX(-50%) rotate(405deg) scale(1);
  }
}

/* Evidence */

.lp-evidence {
  display: grid;
  align-items: center;
  gap: 2.5rem;
}

.lp-h2-sm {
  margin-bottom: 1rem;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
}

.lp-body {
  max-width: 44ch;
  margin: 0 0 0.875rem;
  color: hsl(var(--secondary-foreground));
  font-size: 15.5px;
  line-height: 1.625;
}

.lp-quote {
  margin: 1.25rem 0 0;
  padding: 0.875rem 1rem;
  border-left: 2px solid hsl(var(--electric));
  background: hsl(var(--electric) / 0.05);
}

.lp-quote blockquote {
  margin: 0;
}

.lp-quote p {
  margin: 0;
  color: hsl(var(--secondary-foreground));
  font-size: 0.875rem;
  font-style: italic;
  line-height: 1.625;
}

.lp-quote figcaption {
  margin-top: 0.5rem;
  color: hsl(var(--electric-ink));
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lp-chart-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  padding: 1.125rem 1.375rem 0.25rem;
}

.lp-chart-title {
  font-size: 14.5px;
  font-weight: 700;
}

.lp-chart-unit {
  margin-left: auto;
  color: hsl(var(--muted-foreground));
  font-size: 11.5px;
}

.lp-chart-body {
  padding: 0.5rem 1.375rem 1.125rem;
}

.lp-chart svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.lp-grid line {
  stroke: hsl(var(--border));
  stroke-width: 1;
}

.lp-area-a {
  stop-color: hsl(var(--primary));
  stop-opacity: 0.18;
}

.lp-area-b {
  stop-color: hsl(var(--primary));
  stop-opacity: 0;
}

.lp-line {
  fill: none;
  stroke: hsl(var(--primary));
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lp-point {
  fill: hsl(var(--primary));
  stroke: hsl(var(--card));
  stroke-width: 2;
}

.lp-point-last {
  fill: hsl(var(--electric));
}

/* Chart text is sized in viewBox units: larger on narrow screens, where the chart shrinks. */
.lp-chart text {
  fill: hsl(var(--muted-foreground));
  font-family: var(--font-mono);
  font-size: 18px;
}

.lp-chart .lp-day {
  font-size: 20px;
}

.lp-chart .lp-end {
  fill: hsl(var(--foreground));
  font-size: 22px;
  font-weight: 700;
}

@media (min-width: 40rem) {
  .lp-chart text {
    font-size: 11px;
  }

  .lp-chart .lp-day {
    font-size: 13px;
  }

  .lp-chart .lp-end {
    font-size: 14px;
  }
}

@media (min-width: 64rem) {
  .lp-evidence {
    grid-template-columns: 5fr 7fr;
    gap: 4rem;
  }

  .lp-chart text {
    font-size: 10px;
  }

  .lp-chart .lp-day {
    font-size: 11px;
  }

  .lp-chart .lp-end {
    font-size: 12px;
  }
}

/* Closing call to action and the medical note */

.lp-start {
  padding-block: 6rem 7rem;
}

.lp-h2-xl {
  max-width: 22ch;
  margin: 0 0 2.25rem;
  font-size: clamp(2.4rem, 5.4vw, 4.2rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.lp-start .lp-actions {
  margin-bottom: 1rem;
}

.lp-disclaimer {
  padding-block: 0 3rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.875rem;
}

.lp-disclaimer h2 {
  margin: 0;
  color: hsl(var(--foreground));
  font-size: 1rem;
}

.lp-disclaimer p {
  max-width: 48rem;
  margin: 0.5rem 0 0;
}

@media (prefers-color-scheme: dark) {
  .lp-blob-a {
    opacity: 0.15;
  }

  .lp-blob-b {
    opacity: 0.14;
  }

  .lp-blob-c {
    opacity: 0.1;
  }

  .lp-wash {
    background: none;
  }
}

/* Reduced motion: every animation and transition stops; the travelling pulse goes. The
   static state is the finished one (ring filled, boundary label at rest). */
@media (prefers-reduced-motion: reduce) {
  .landing *,
  .landing *::before,
  .landing *::after {
    animation: none !important;
    transition: none !important;
  }

  .lp-pulse {
    display: none !important;
  }
}

.not-found {
  padding-block: 4rem;
}

/* Legal pages, rendered from Markdown by scripts/build-legal.mjs */

.legal {
  padding-block: 2.5rem 3.5rem;
}

.legal .container {
  max-width: 50rem;
}

.legal-document {
  overflow-wrap: anywhere;
}

.legal-document h1 {
  margin: 0 0 1.5rem;
  font-size: clamp(1.875rem, 1.5rem + 1.5vw, 2.5rem);
}

.legal-document h2 {
  margin: 2.5rem 0 0.75rem;
  font-size: 1.5rem;
}

.legal-document h3 {
  margin: 2rem 0 0.5rem;
  font-size: 1.1875rem;
}

.legal-document h4,
.legal-document h5,
.legal-document h6 {
  margin: 1.5rem 0 0.5rem;
  font-size: 1rem;
}

.legal-document li + li {
  margin-top: 0.375rem;
}

.legal-document hr {
  margin: 2.5rem 0;
  border: 0;
  border-top: 1px solid hsl(var(--border));
}

.legal-document blockquote {
  margin: 1.5rem 0;
  padding: 0.25rem 1.25rem;
  border-left: 3px solid hsl(var(--electric));
  background: hsl(var(--card));
}

.legal-document table {
  width: 100%;
  margin: 1.5rem 0;
  border-collapse: collapse;
}

.legal-document th,
.legal-document td {
  padding: 0.5rem 0.75rem;
  border: 1px solid hsl(var(--border));
  text-align: left;
  vertical-align: top;
}

.legal-document thead th {
  background: hsl(var(--card));
}

.legal-document .align-center {
  text-align: center;
}

.legal-document .align-right {
  text-align: right;
}

.legal-document code {
  font-family: var(--font-mono);
  font-size: 0.875em;
}

.toc {
  margin: 2rem 0;
  padding: 1rem 1.25rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--card));
}

.toc-title {
  margin: 0 0 0.5rem;
  font-weight: 600;
}

.toc ul {
  margin: 0;
  padding-left: 1.25rem;
}

.toc li + li,
.toc ul ul {
  margin-top: 0.25rem;
}

.draft-banner {
  margin: 0 0 2rem;
  padding: 0.75rem 1rem;
  border: 1px solid hsl(var(--warning) / 0.35);
  border-radius: var(--radius);
  background: hsl(var(--warning) / 0.1);
}