/* ==========================================================================
   AmanERP · Concept 01 · Quiet — site styles
   Patterns: Statement, Split, Index. Stage = where the product runs.
   ========================================================================== */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + var(--s-6)); }
html:not(.lenis) { scroll-behavior: smooth; }
html.reduced { scroll-behavior: auto; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-weight: 400;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
button, input, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }
dialog { color: inherit; }
::selection { background: var(--ink); color: var(--paper); }

[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip {
  position: fixed; left: var(--s-4); top: var(--s-4); z-index: 100;
  padding: var(--s-2) var(--s-4); border-radius: var(--r-1);
  background: var(--ink); color: var(--paper); font-weight: 600;
  transform: translateY(-200%);
}
.skip:focus-visible { transform: none; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 2px; }
.stage :focus-visible, .sterile-bar :focus-visible { outline-color: var(--stage-ink); }

.ico { width: 1.125rem; height: 1.125rem; flex: none; }
.cli { width: 0.875rem; height: 0.875rem; flex: none; }
.num { font-variant-numeric: tabular-nums lining-nums; }
.nowrap { white-space: nowrap; }
/* Odometer digits: one strip of 0–9 per digit, clipped to a single figure */
.odo { display: inline-flex; font-variant-numeric: tabular-nums; }
.odo__vis { display: inline-flex; }
.odo__col { display: inline-block; height: 1em; line-height: 1; overflow: hidden; vertical-align: -0.06em; }
.odo__strip { display: flex; flex-direction: column; }
.odo__strip > span { display: block; height: 1em; line-height: 1; }
.deva { font-family: var(--font-deva); letter-spacing: 0 !important; font-stretch: 100%; }
.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  line-height: 1.35;
  font-weight: 450;
  font-stretch: 87.5%;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
em { font-style: normal; font-weight: 600; }

/* ---------- Layout ---------- */
.wrap { width: min(100% - 2 * var(--margin), var(--container)); margin-inline: auto; }
/* One section token between sections (128 / 96 / 64): half above the divider, half below. */
.section { padding-block: calc(var(--section) / 2); position: relative; }
.section + .section::before {
  /* instrument ruler between sections: a hairline with ticks */
  content: ""; position: absolute; top: 0;
  left: max(var(--margin), calc((100% - var(--container)) / 2));
  right: max(var(--margin), calc((100% - var(--container)) / 2));
  height: 10px;
  background: var(--hairline);
  -webkit-mask: url(../assets/tex-ruler-x.svg) 0 0 / 80px 12px repeat-x;
          mask: url(../assets/tex-ruler-x.svg) 0 0 / 80px 12px repeat-x;
}
.grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }

/* ---------- Type ---------- */
.eyebrow {
  display: flex; align-items: center; gap: var(--s-3);
  margin-bottom: var(--s-5);
  font-family: var(--font-mono); font-size: var(--fs-label); line-height: 1.35;
  font-stretch: 87.5%; font-weight: 450; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--graphite);
}
.cl { width: 10px; height: 10px; border: 1.5px solid currentColor; border-radius: 2px; flex: none; }
.h2 {
  font-size: var(--fs-h2); line-height: 1.08; font-weight: 560; font-stretch: 112%;
  letter-spacing: -0.012em; text-wrap: balance;
}
.h3 { font-size: var(--fs-h3); line-height: 1.25; font-weight: 600; font-stretch: 100%; text-wrap: balance; }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--graphite); max-width: 46ch; text-wrap: pretty; }
p { text-wrap: pretty; }
.footnote { margin-top: var(--s-6); font-size: var(--fs-small); color: var(--graphite); max-width: var(--measure); }

.link {
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(var(--hairline), var(--hairline));
  background-size: 0% 1px, 100% 1px;
  background-position: 0 100%, 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 2px;
  transition: background-size var(--dur-2) var(--ease);
}
.link:hover, .link:focus-visible { background-size: 100% 1px, 100% 1px; }
.nav__links .link, .footer__col .link { background-size: 0% 1px, 0% 1px; }
.nav__links .link:hover, .footer__col .link:hover, .nav__links .link:focus-visible, .footer__col .link:focus-visible { background-size: 100% 1px, 0% 1px; }
.link--arrow { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 560; }
.link--arrow .ico { transition: transform var(--dur-1) var(--ease); }
.link--arrow:hover .ico { transform: translateX(3px); }

/* ---------- Controls ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  height: 2.5rem; padding: 0 var(--s-4);
  border-radius: var(--r-1); border: 1px solid transparent;
  font-size: var(--fs-small); font-weight: 560; line-height: 1; white-space: nowrap;
  transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.btn--lg { height: 3.25rem; padding: 0 var(--s-5); font-size: var(--fs-body); }
.btn--sm { height: 2rem; padding: 0 var(--s-3); font-size: var(--fs-data); }
.btn--primary { background: var(--ink); color: var(--paper); }
.btn--primary:hover { background: #262B33; }
.btn--ghost { border-color: var(--line); background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--mist); }
.btn--ghost[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--quiet { color: var(--ink); }
.btn--quiet:hover { background: var(--mist); }
.btn--stage { background: var(--stage-3); border-color: var(--stage-line); color: var(--stage-ink); }
.btn--stage:hover { background: #20252C; border-color: #353B44; }
.btn--stage .ico { width: 1rem; height: 1rem; }

/* The magnetic CTA: its caption light turns on when you are about to act. */
.magnetic { position: relative; will-change: transform; }
.magnetic::after { content: ""; position: absolute; inset: -14px -18px; }
.btn__dot {
  width: 8px; height: 8px; border-radius: 2px; flex: none;
  background: #3A414B;
  transition: background-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.btn__label { display: inline-block; will-change: transform; }
/* Director rule: the CTA dot lights Paper, never Signal. Amber only ever means "needs you". */
.magnetic:hover .btn__dot, .magnetic:focus-visible .btn__dot { background: var(--paper); box-shadow: 0 0 0 3px rgb(252 252 253 / 0.14); }

.kbd {
  display: inline-flex; align-items: center; height: 1.375rem; padding: 0 6px;
  border: 1px solid var(--hairline); border-bottom-color: #C9CED5; border-radius: 4px;
  background: var(--paper);
  font-family: var(--font-mono); font-size: var(--fs-label); font-stretch: 87.5%; font-weight: 500; letter-spacing: 0.02em;
  color: var(--graphite); white-space: nowrap;
}
.kbd--stage { background: var(--stage-3); border-color: var(--stage-line); color: var(--stage-muted); }
.kbd--pc { display: none; }
.not-mac .kbd--pc { display: inline; }
.not-mac .kbd--mac { display: none; }

.tag {
  display: inline-flex; align-items: center; gap: 6px; height: 1.375rem; padding: 0 var(--s-2);
  border: 1px solid var(--line); border-radius: var(--r-full);
  font-family: var(--font-mono); font-size: var(--fs-label); font-stretch: 87.5%; font-weight: 500;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink); white-space: nowrap;
}
.tag--quiet { border-color: var(--hairline); color: var(--graphite); }
.tag--stage { border-color: var(--stage-line); color: var(--stage-muted); }
.tag--stage .ico { width: 0.875rem; height: 0.875rem; }
.tag--need { border-color: #4A515C; color: var(--stage-ink); }

/* ---------- Nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 30; height: var(--nav-h);
  background: rgb(252 252 253 / 0.9);
  -webkit-backdrop-filter: saturate(1.2) blur(12px); backdrop-filter: saturate(1.2) blur(12px);
  border-bottom: 1px solid transparent;
  transition: transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.nav.is-scrolled { border-bottom-color: var(--hairline); }
.nav__inner { height: 100%; display: flex; align-items: center; gap: var(--s-6); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); }
.brand__mark { width: 24px; height: 24px; color: var(--ink); --mark-cut: var(--paper); }
.brand__word { font-size: 1.1875rem; font-weight: 640; font-stretch: 118%; letter-spacing: -0.01em; line-height: 1; }
.brand__word span { font-weight: 380; }
.nav__links { display: flex; gap: var(--s-6); margin-left: var(--s-5); font-size: var(--fs-small); font-weight: 500; }
.nav__actions { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); }
.nav__search { gap: var(--s-2); padding: 0 var(--s-2) 0 var(--s-3); border: 1px solid var(--hairline); }
.nav__search .ico { width: 1rem; height: 1rem; color: var(--graphite); }
.nav__search-label { color: var(--graphite); font-weight: 450; margin-right: var(--s-4); }
.nav__menu { display: none; width: 2.5rem; padding: 0; }
/* Instrument scroll ruler along the nav's bottom edge (hidden below 48rem) */
.scrollrule {
  position: absolute; bottom: 0; height: 8px; pointer-events: none;
  left: max(var(--margin), calc((100% - var(--container)) / 2)); right: max(var(--margin), calc((100% - var(--container)) / 2));
  opacity: 0; transition: opacity var(--dur-2) var(--ease);
}
.scrollrule::before {
  content: ""; position: absolute; inset: 0; background: var(--line); opacity: 0.55;
  -webkit-mask: url(../assets/tex-ruler-x.svg) 0 100% / 80px 12px repeat-x; mask: url(../assets/tex-ruler-x.svg) 0 100% / 80px 12px repeat-x;
  transform: scaleY(-1);
}
.nav.is-scrolled .scrollrule { opacity: 1; }
.scrollrule__marks i { position: absolute; bottom: 0; width: 1px; height: 8px; background: var(--ink); }
.scrollrule__head { position: absolute; left: -1px; bottom: 0; width: 3px; height: 14px; background: var(--ink); border-radius: 1px 1px 0 0; }
.nav__chapter { margin-right: var(--s-4); color: var(--graphite); white-space: nowrap; opacity: 0; transition: opacity var(--dur-2) var(--ease); }
.nav.is-scrolled .nav__chapter { opacity: 1; }
@media (min-width: 1100px) and (max-width: 1279px) { .nav__chapter { display: none; } }
@media (max-width: 47.99rem) { .nav__chapter { display: none; } }
.menu { border-top: 1px solid var(--hairline); background: var(--paper); height: calc(100svh - var(--nav-h)); overflow-y: auto; overscroll-behavior: contain; }
.menu__inner { display: grid; padding-block: var(--s-4) var(--s-6); }
.menu__inner a:not(.btn) { padding: var(--s-3) 0; border-bottom: 1px solid var(--hairline); font-size: var(--fs-lead); font-weight: 500; }
.menu__inner .btn { margin-top: var(--s-5); height: 3.25rem; font-size: var(--fs-body); }

/* ---------- Hero ---------- */
.hero { padding-top: calc(var(--nav-h) + var(--s-5)); overflow-x: clip; }
.hero__grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter);
  align-items: center;
  min-height: clamp(36rem, calc(100svh - var(--nav-h) - var(--s-10)), 48rem);
}
.hero__copy { grid-column: 1 / span 6; padding-block: var(--s-8); position: relative; z-index: 1; }
.hero__title {
  font-size: var(--fs-display); line-height: 0.98; font-weight: 560; font-stretch: 110%;
  letter-spacing: -0.024em;
  margin-bottom: var(--s-6);
}
.hero__title .line { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
/* The headline breathes with the stage: held tight during the noise, it exhales to its full width on calm. */
.js:not(.reduced) .hero__title { transition: font-stretch 1400ms var(--ease), letter-spacing 1400ms var(--ease); }
.js:not(.reduced) .hero[data-mood="noise"] .hero__title { font-stretch: 96%; letter-spacing: -0.034em; }
.hero__title .line > span { display: inline-block; }
.hero__lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--graphite); max-width: 40ch; margin-bottom: var(--s-7); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-5); }
.hero__hint { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-small); color: var(--graphite); }
.hero__note { margin-top: var(--s-4); color: var(--graphite); text-align: right; }

.hero__stage {
  grid-column: 7 / -1;   /* contained: right edge aligns with the nav CTA */
  height: clamp(35rem, calc(100svh - var(--nav-h) - var(--s-9)), 46rem);
  display: grid; grid-template-rows: auto 1fr auto;
}

/* ---------- Stage (shared) ---------- */
.stage {
  position: relative;
  background: var(--stage);
  color: var(--stage-ink);
  border-radius: var(--r-2);
  overflow: hidden;
}
.stage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--stage-dots);
  -webkit-mask: url(../assets/tex-dots.svg) 8px 8px / 16px 16px repeat;
          mask: url(../assets/tex-dots.svg) 8px 8px / 16px 16px repeat;
  transition: opacity 900ms var(--ease);
}
.stage__ruler { position: absolute; pointer-events: none; background: var(--stage-off); }
.stage__ruler--x {
  left: 0; right: 0; top: 0; height: 12px;
  -webkit-mask: url(../assets/tex-ruler-x.svg) 16px 0 / 80px 12px repeat-x;
          mask: url(../assets/tex-ruler-x.svg) 16px 0 / 80px 12px repeat-x;
}
.stage__ruler--y {
  top: 0; bottom: 0; left: 0; width: 12px;
  -webkit-mask: url(../assets/tex-ruler-y.svg) 0 16px / 12px 80px repeat-y;
          mask: url(../assets/tex-ruler-y.svg) 0 16px / 12px 80px repeat-y;
}
.stage__cross {
  position: absolute; width: 11px; height: 11px; pointer-events: none; background: #3A414B;
  -webkit-mask: url(../assets/tex-cross.svg) center / 11px 11px no-repeat;
          mask: url(../assets/tex-cross.svg) center / 11px 11px no-repeat;
}
.stage__cross--a { right: var(--s-5); top: 4.5rem; }
.stage__cross--b { left: var(--s-6); bottom: 4.5rem; }

.stage__bar {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-5) var(--s-6) var(--s-4) var(--s-7);
}
.stage__title { display: flex; align-items: center; gap: var(--s-3); color: var(--stage-muted); }
.stage__foot {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-4) var(--s-6) var(--s-5) var(--s-7);
  border-top: 1px solid var(--stage-line);
}
.stage__readout { color: var(--stage-muted); }

/* Noise ⇄ Calm switch */
.switch { display: inline-flex; align-items: center; gap: var(--s-3); height: 2rem; padding: 0 var(--s-2); border-radius: var(--r-1); }
.switch__label { font-family: var(--font-mono); font-size: var(--fs-label); font-stretch: 87.5%; letter-spacing: 0.05em; text-transform: uppercase; color: var(--stage-muted); transition: color var(--dur-2) var(--ease); }
.switch__track {
  position: relative; width: 2.5rem; height: 1.375rem; border-radius: var(--r-full);
  background: var(--stage-3); border: 1px solid #353B44;
}
.switch__thumb {
  position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--stage-ink);
  transition: transform var(--dur-2) var(--ease);
}
.switch[aria-checked="true"] .switch__thumb { transform: translateX(18px); }
.switch[aria-checked="true"] .switch__label:last-child,
.switch[aria-checked="false"] .switch__label:first-child { color: var(--stage-ink); }
.stage__controls { display: flex; align-items: center; gap: var(--s-2); }
.stage__pause {
  height: 2rem; padding: 0 var(--s-3); border: 1px solid var(--stage-line); border-radius: var(--r-1);
  font-family: var(--font-mono); font-size: var(--fs-label); font-stretch: 87.5%; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--stage-muted);
}
.stage__pause:hover, .stage__pause[aria-pressed="true"] { color: var(--stage-ink); border-color: #4A515C; }
.hero__stage:not([data-state="noise"]) .stage__pause, .reduced .stage__pause { display: none; }
html:not(.js) .switch, html:not(.js) [data-sterile-toggle], html:not(.js) [data-compass-open], html:not(.js) .hero__hint, html:not(.js) .footer__base .mono, html:not(.js) .fdesc__try,
html:not(.js) [data-menu-toggle], html:not(.js) [data-pulse-toggle], html:not(.js) [data-lights-test], html:not(.js) .stage__pause, html:not(.js) .mtabs, html:not(.js) .ftabs { display: none; }

/* Annunciator strip in the stage foot */
.strip { display: flex; gap: var(--s-4); }
.strip li {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: var(--fs-label); font-stretch: 87.5%; letter-spacing: 0.06em; color: var(--stage-muted);
}
.strip__light {
  width: 10px; height: 10px; border-radius: 2px; background: var(--stage-off);
  transition: background-color 120ms linear, box-shadow 240ms var(--ease);
}


/* Power-on: until JS opens it, the stage is a 1 px line (only when JS runs and motion is allowed) */
.js:not(.reduced) .hero__stage:not(.is-powered) { clip-path: inset(calc(50% - 0.5px) 100% calc(50% - 0.5px) 0%); }
.js:not(.reduced) .hero__stage:not(.is-powered) .stage__ruler--x { clip-path: inset(0 100% 0 0); }

/* Contextual cursor label: fine pointers only, noise state only; the native cursor stays. */
.stage__cursor {
  position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none;
  padding: 3px 6px; border-radius: 4px; background: var(--stage-2); border: 1px solid var(--stage-line);
  color: var(--stage-muted); white-space: nowrap;
  opacity: 0; transition: opacity var(--dur-2) var(--ease);
}
.stage__cursor.is-on { opacity: 1; }

/* Engineering callouts */
svg.callouts { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; overflow: visible; }
svg.callouts path { fill: none; stroke: #4A515C; stroke-width: 1; vector-effect: non-scaling-stroke; }
svg.callouts circle { fill: var(--stage-muted); }
svg.callouts text {
  fill: var(--stage-muted); font-family: var(--font-mono); font-size: var(--fs-label); font-stretch: 87.5%;
  letter-spacing: 0.05em; font-variant-numeric: tabular-nums;
}

/* The chip swarm */
.hero-field { position: relative; z-index: 3; min-height: 0; pointer-events: none; }
.chip {
  position: absolute; left: 0; top: 0;
  display: inline-flex; align-items: center; gap: var(--s-2);
  height: 2rem; padding: 0 var(--s-3) 0 10px;
  background: var(--stage-3); border: 1px solid var(--stage-line); border-radius: var(--r-1);
  box-shadow: 0 10px 20px -10px rgb(0 0 0 / 0.7);
  font-size: var(--fs-data); line-height: 1; white-space: nowrap; color: var(--stage-ink);
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.chip__light { width: 8px; height: 8px; border-radius: 2px; background: var(--stage-off); flex: none; transition: background-color 90ms linear, box-shadow 160ms linear; }
.chip.is-lit .chip__light { background: var(--stage-ink); }
.chip.is-lit { border-color: #353B44; }
.chip__type {
  font-family: var(--font-mono); font-size: var(--fs-label); font-stretch: 75%; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--stage-muted);
}
.chip__text { font-variant-numeric: tabular-nums; }

/* The Stack card: the calm end state (visible without JS) */
.stack-card {
  position: absolute; z-index: 2;
  /* centred in the field between bar and foot; offsets stay transform-free for the fold targets */
  inset: 4.5rem 0 3.75rem; margin: auto; height: fit-content;
  width: min(28rem, calc(100% - 2 * var(--s-9)));
  padding: var(--s-4);
  background: var(--stage-2); border: 1px solid var(--stage-line); border-radius: var(--r-2);
  box-shadow: 0 32px 64px -24px rgb(0 0 0 / 0.8);
  transition: opacity 500ms var(--ease), transform 700ms var(--ease);
}
.stack-card__head { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-1) var(--s-4); border-bottom: 1px solid var(--stage-line); margin-bottom: var(--s-4); }
.stack-card__head .ico { color: var(--stage-muted); }
.stack-card__name { font-weight: 600; font-size: var(--fs-small); margin-right: auto; }
.stack-card__label { display: flex; justify-content: space-between; color: var(--stage-muted); margin: 0 var(--s-1) var(--s-2); }
.stack-card__label .num { color: var(--stage-ink); }
.stack-card__foot { margin: var(--s-3) var(--s-1) 0; font-size: var(--fs-data); color: var(--stage-muted); }

.need {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-3);
  padding: var(--s-4); margin-bottom: var(--s-5);
  background: var(--stage-3); border: 1px solid var(--stage-line); border-radius: var(--r-1);
  transition: border-color 600ms var(--ease);
}
.need > .btn { grid-column: 2; justify-self: start; }
.need__light {
  width: 12px; height: 12px; border-radius: 3px; margin-top: 4px;
  background: var(--signal-lit);
  box-shadow: 0 0 0 3px rgb(242 169 0 / 0.14), 0 0 18px 2px var(--signal-glow);
  transition: background-color 200ms linear, box-shadow 700ms var(--ease);
}
.need__light--sm { width: 10px; height: 10px; margin-top: 0; box-shadow: 0 0 10px 1px var(--signal-glow); }
.need.is-off .need__light { background: var(--stage-off); box-shadow: none; transition: none; }
.js .hero__stage[data-state="calm"] .need__light { transition: box-shadow 700ms var(--ease); }
.need__title { font-weight: 600; font-size: var(--fs-body); line-height: 1.3; }
.need__meta { font-size: var(--fs-data); color: var(--stage-ink); margin-top: 2px; }
.need__why { font-size: var(--fs-data); line-height: 1.5; color: var(--stage-muted); margin-top: var(--s-2); max-width: 40ch; }

.deck { position: relative; height: 3rem; }
.deck__layer {
  position: absolute; left: 6px; right: 6px; top: 7px; height: 2rem;
  background: #14171B; border: 1px solid #2C3139; border-radius: var(--r-1);
}
.deck__layer + .deck__layer { left: 12px; right: 12px; top: 14px; background: #121418; border-color: #23272E; }
.deck__layer:first-child { z-index: 0; }
.deck__tally {
  position: relative; z-index: 1; display: flex; align-items: center; gap: var(--s-2);
  height: 2rem; padding: 0 var(--s-3);
  background: var(--stage-3); border: 1px solid var(--stage-line); border-radius: var(--r-1);
  font-size: var(--fs-data); color: var(--stage-muted);
}
.deck__tally .cli { color: var(--stage-muted); }
.deck__tally .num { color: var(--stage-ink); }
.deck__when { margin-left: auto; color: var(--stage-muted); }

/* JS-driven states. Without JS the calm state above simply shows. */
.js .hero__stage[data-state="noise"] .stack-card { opacity: 0; transform: translateY(12px) scale(0.985); pointer-events: none; }
.hero__stage::before { opacity: 0.7; }
.js .hero__stage[data-state="noise"]::before { opacity: 1; }
.js .hero__stage[data-state="noise"] .need__light,
.js .hero__stage[data-state="folding"] .need__light { background: var(--stage-off); box-shadow: none; }
/* While folding, the card materialises in step with the chips landing in it. */
.js .hero__stage[data-state="folding"] .stack-card { opacity: calc(0.18 + var(--fold-p, 0) * 0.82); transition: opacity 180ms linear, transform 900ms var(--ease); }
.strip li.is-flash .strip__light { background: var(--stage-ink); }
.strip li.is-flash { color: var(--stage-ink); }

/* ---------- Why ---------- */
.statement {
  font-size: var(--fs-h1); line-height: 1.06; font-weight: 500; font-stretch: 108%;
  letter-spacing: -0.018em; max-width: 21em; text-wrap: balance;
}
.statement .deva { font-weight: 500; }
.tone { color: var(--graphite); }
.why__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); margin-top: var(--s-7); }
.why__item { border-top: 1px solid var(--ink); padding-top: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); }
.why__item p { color: var(--graphite); max-width: 36ch; }
.legend { display: flex; gap: var(--s-5); margin-top: var(--s-2); }
.legend__row { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--graphite); }
.caption-light { width: 12px; height: 12px; border-radius: 3px; flex: none; background: #E4E7EB; box-shadow: inset 0 0 0 1px #CDD2D8; }
.caption-light.is-lit { background: var(--signal); box-shadow: 0 0 8px rgb(184 123 0 / 0.45); }

/* ---------- Product ---------- */
.product__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.product__copy { grid-column: 1 / span 5; padding-right: var(--s-6); }
.product__copy .lead { margin-top: var(--s-4); }
.product__stage { grid-column: 6 / -1; padding: var(--s-7) var(--s-6) var(--s-6) var(--s-7); }
/* Sticky index: the grid pins while the track scrolls through the five features. */
.product__track.is-sticky .product__grid { position: sticky; top: calc(var(--nav-h) + var(--s-5)); }

.ftabs { margin-top: var(--s-6); border-top: 1px solid var(--hairline); }
.ftab {
  display: grid; grid-template-columns: 1fr; row-gap: 2px; align-items: center;
  width: 100%; text-align: left; padding: var(--s-3) 0; border-bottom: 1px solid var(--hairline);
  color: var(--graphite);
  transition: color var(--dur-1) var(--ease);
}
.ftab .cli { color: var(--line); }
.ftab__t { font-weight: 600; font-size: var(--fs-body); line-height: 1.3; }
.ftab:hover { color: var(--ink); }
.ftab[aria-selected="true"] { color: var(--ink); }
.ftab[aria-selected="true"] .cli { color: var(--ink); }
.ftab[aria-selected="true"] .cli use { fill: none; }
.ftab[aria-selected="true"] { box-shadow: inset 2px 0 0 var(--ink); padding-left: var(--s-4); }
.ftab { transition: color var(--dur-1) var(--ease), padding-left var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); }
.fdesc { margin-top: var(--s-5); min-height: 6rem; }
.fdesc__item p { color: var(--graphite); max-width: 42ch; }
.fdesc__t { font-size: var(--fs-h3); font-weight: 560; margin-bottom: var(--s-2); }
html:not(.js) .fdesc { display: grid; gap: var(--s-6); }
.js .fdesc__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.fdesc__item .btn { margin-top: var(--s-4); }
.fdesc__try { margin-top: var(--s-3); color: var(--graphite) !important; }

/* The rebuilt product (dark UI) */
.app {
  position: relative; z-index: 1;
  background: var(--stage-2); border: 1px solid var(--stage-line); border-radius: var(--r-2);
  box-shadow: 0 40px 80px -32px rgb(0 0 0 / 0.9);
  font-size: var(--fs-small); line-height: 1.45;
  overflow: hidden;
}
.app__bar { display: flex; align-items: center; gap: var(--s-3); height: 3rem; padding: 0 var(--s-3); border-bottom: 1px solid var(--stage-line); }
.app__brand { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.app__mark { width: 20px; height: 20px; color: var(--stage-ink); --mark-cut: var(--stage-2); }
.app__org { display: grid; font-weight: 600; font-size: var(--fs-data); line-height: 1.2; white-space: nowrap; }
.app__crumb { font-weight: 400; color: var(--stage-muted); font-size: var(--fs-label); }
.app__search {
  flex: 1; display: flex; align-items: center; gap: var(--s-2); min-width: 0;
  height: 2rem; padding: 0 6px 0 var(--s-3); margin-left: var(--s-2);
  background: var(--stage-3); border: 1px solid var(--stage-line); border-radius: var(--r-1);
  color: var(--stage-muted); font-size: var(--fs-data);
}
.app__search span:first-of-type { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app__search .ico { width: 0.9375rem; height: 0.9375rem; }
.app__search:hover { border-color: #353B44; color: var(--stage-ink); }
.app__clock { color: var(--stage-muted); white-space: nowrap; }
.app__sterile {
  display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--stage-line); background: #14171C;
  font-size: var(--fs-data); color: var(--stage-ink);
}
.app__sterile .tag { margin-left: auto; }
.app__body { display: grid; grid-template-columns: 11.5rem minmax(0, 1fr); min-height: 31rem; }
.app__side { border-right: 1px solid var(--stage-line); padding: var(--s-3); display: flex; flex-direction: column; }
.app__sect { color: var(--stage-muted); margin: var(--s-1) var(--s-1) var(--s-2); }
.app__role { margin-top: auto; padding: var(--s-2) var(--s-1) 0; color: var(--stage-muted); }
.caps { display: grid; gap: var(--s-1); margin-bottom: var(--s-5); }
.cap {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-2); align-items: center;
  text-align: left; padding: var(--s-2); border-radius: var(--r-1); border: 1px solid transparent;
  color: var(--stage-muted);
}
.cap .ico { width: 1rem; height: 1rem; grid-row: span 2; }
.cap__t { font-size: var(--fs-data); font-weight: 560; color: var(--stage-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cap__m { font-size: var(--fs-label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cap:hover { background: var(--stage-3); }
.cap[aria-selected="true"] { background: var(--stage-3); border-color: var(--stage-line); box-shadow: inset 2px 0 0 var(--stage-ink); }
.cap.is-dirty .cap__m::after { content: " · edited"; color: var(--stage-ink); }
.mini-stack { display: grid; gap: var(--s-1); font-size: var(--fs-data); }
.mini-stack li { display: flex; align-items: center; gap: var(--s-2); padding: 6px var(--s-2); border-radius: var(--r-1); color: var(--stage-muted); }
.mini-stack li.is-need { color: var(--stage-ink); background: var(--stage-3); }
.mini-stack__light { width: 8px; height: 8px; border-radius: 2px; background: var(--signal-lit); box-shadow: 0 0 8px 1px var(--signal-glow); margin-inline: 3px; }
.app__main { padding: var(--s-5); min-width: 0; }
.scene__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-5); }
.scene__title { font-size: var(--fs-body); font-weight: 600; line-height: 1.3; }
.scene__sub { font-size: var(--fs-data); color: var(--stage-muted); margin-top: 2px; }
.scene__foot { display: flex; align-items: center; justify-content: space-between; margin-top: var(--s-5); }
.scene__step { color: var(--stage-muted); }
.saved { display: inline-flex; align-items: center; gap: 6px; height: 1.5rem; padding: 0 var(--s-2); border: 1px solid var(--stage-line); border-radius: var(--r-full); font-size: var(--fs-label); color: var(--stage-muted); white-space: nowrap; }
.saved .ico { width: 0.8125rem; height: 0.8125rem; }
.saved.is-saving { color: var(--stage-ink); }
.saved.is-saved { color: var(--stage-ink); border-color: #3A414B; }

.form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.field { display: grid; gap: 6px; font-size: var(--fs-label); color: var(--stage-muted); }
.field input, .field textarea {
  width: 100%; height: 2.25rem; padding: 0 var(--s-3);
  background: var(--stage-3); border: 1px solid #353B44; border-radius: var(--r-1);
  color: var(--stage-ink); font-size: var(--fs-data); font-variant-numeric: tabular-nums;
}
.field textarea { height: auto; padding: var(--s-2) var(--s-3); resize: none; line-height: 1.45; }
.field input::placeholder, .field textarea::placeholder { color: #7C8491; }   /* 4.6:1 on the input */
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--stage-ink); outline-offset: 1px; }
.field--area { margin-top: var(--s-4); }
.form .field--area { margin-top: 0; }
.field--wide { grid-column: 1 / -1; }

.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); margin-bottom: var(--s-4); }
.kpi { display: grid; gap: 2px; padding: var(--s-3); background: var(--stage-3); border: 1px solid var(--stage-line); border-radius: var(--r-1); }
.kpi__l { font-size: var(--fs-label); color: var(--stage-muted); }
.kpi__v { font-size: var(--fs-lead); font-weight: 600; }
.rows li { display: grid; grid-template-columns: 1fr auto 3.5rem; gap: var(--s-3); padding: var(--s-2) 0; border-bottom: 1px solid var(--stage-line); font-size: var(--fs-data); }
.rows li span:nth-child(2) { color: var(--stage-muted); }
.rows__d { text-align: right; }

.count th, .count td, .pay th, .pay td { padding: 7px var(--s-2); border-bottom: 1px solid var(--stage-line); font-size: var(--fs-data); text-align: left; font-weight: 400; }
.count thead th, .pay thead th { font-size: var(--fs-label); color: var(--stage-muted); font-weight: 500; }
.count th .mono { font-size: var(--fs-label); color: var(--stage-muted); display: block; }
.count td input { width: 5rem; height: 1.875rem; padding: 0 var(--s-2); text-align: right; background: var(--stage-3); border: 1px solid #353B44; border-radius: var(--r-1); color: var(--stage-ink); font-size: var(--fs-data); font-variant-numeric: tabular-nums; }
.count td input:focus-visible { outline: 2px solid var(--stage-ink); outline-offset: 1px; }
.count .num, .pay .num { text-align: right; }
.count td[data-var] { color: var(--stage-muted); min-width: 4rem; }
.count td[data-var].is-off { color: var(--stage-ink); }
.pay th small { display: block; font-size: var(--fs-label); color: var(--stage-muted); }
.pay tfoot th, .pay tfoot td { font-weight: 600; border-bottom: 0; padding-top: var(--s-3); }

.pal-mock { background: var(--stage-3); border: 1px solid #353B44; border-radius: var(--r-2); padding: var(--s-2); }
.pal-mock__input { display: flex; align-items: center; gap: var(--s-2); height: 2.5rem; padding: 0 var(--s-2); border-bottom: 1px solid var(--stage-line); margin-bottom: var(--s-2); font-size: var(--fs-small); }
.pal-mock__q { color: var(--stage-ink); }
.pal-mock__caret { width: 1px; height: 1.1em; background: var(--stage-ink); margin-left: -6px; animation: caret 1.1s steps(1) 3; }
@keyframes caret { 50% { opacity: 0; } }
.pal-mock__esc { margin-left: auto; color: var(--stage-muted); }
.pal-mock__group { color: var(--stage-muted); padding: var(--s-2) var(--s-2) var(--s-1); }
.pal-mock__row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-3); padding: var(--s-2); border-radius: var(--r-1); font-size: var(--fs-data); }
.pal-mock__row small { display: block; color: var(--stage-muted); font-size: var(--fs-label); }
.pal-mock__row b { font-weight: 700; color: var(--stage-ink); text-decoration: underline; text-decoration-color: #4A515C; text-underline-offset: 3px; }
.pal-mock__row.is-active { background: #20252C; }
.pal-mock__row .ico { color: var(--stage-muted); width: 1rem; height: 1rem; }
.pal-mock__foot { color: var(--stage-muted); padding: var(--s-3) var(--s-2) var(--s-1); border-top: 1px solid var(--stage-line); margin-top: var(--s-2); }

.budget { margin-bottom: var(--s-5); }
.budget__bar { position: relative; height: 8px; border-radius: 2px; background: var(--stage-3); border: 1px solid var(--stage-line); overflow: hidden; margin-bottom: var(--s-2); }
.budget__fill { position: absolute; inset: 0 15.6% 0 0; background: #5B626D; }
.budget__over { position: absolute; top: 0; bottom: 0; right: 0; width: 15.6%; background: repeating-linear-gradient(135deg, var(--stage-ink) 0 2px, transparent 2px 5px); }
.budget__txt { font-size: var(--fs-data); color: var(--stage-muted); }
.chain { display: grid; gap: var(--s-1); margin-bottom: var(--s-4); }
.chain li { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3); background: var(--stage-3); border: 1px solid var(--stage-line); border-radius: var(--r-1); font-size: var(--fs-data); }
.chain li .mono { margin-left: auto; color: var(--stage-muted); }
.chain li .cli { color: var(--stage-muted); }
.chain li.is-need { color: var(--stage-ink); border-color: #4A515C; background: #1C2026; }
.chain li.is-need .mono { color: var(--stage-ink); }
.policy { font-size: var(--fs-data); color: var(--stage-muted); padding: var(--s-3); border: 1px dashed var(--stage-line); border-radius: var(--r-1); }

.seg { display: flex; flex-wrap: wrap; gap: 2px; padding: 2px; background: var(--stage-3); border: 1px solid var(--stage-line); border-radius: var(--r-1); margin-bottom: var(--s-4); }
.seg button { flex: 1; height: 2rem; padding: 0 var(--s-2); border-radius: 4px; font-size: var(--fs-data); color: var(--stage-muted); white-space: nowrap; }
.seg button[aria-checked="true"] { background: var(--stage-ink); color: var(--stage); font-weight: 600; }
.seg button:not([aria-checked="true"]):hover { color: var(--stage-ink); }
.doors { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); margin-bottom: var(--s-4); }
.doors li {
  display: flex; align-items: flex-end; height: 3.5rem; padding: var(--s-2);
  transition-property: color, border-color, background-color;
  border: 1px solid #353B44; border-radius: var(--r-1); background: var(--stage-3);
  font-size: var(--fs-data); font-weight: 560; color: var(--stage-ink);
  transition: opacity var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease);
}
.doors li.is-closed { color: var(--stage-muted); background: transparent; border-style: dashed; border-color: var(--stage-line); font-weight: 400; }

/* ---------- One system ---------- */
.system__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.system__copy { grid-column: 1 / span 5; padding-right: var(--s-6); }
.system__copy .lead { margin-top: var(--s-4); }
.index { margin-top: var(--s-7); border-top: 1px solid var(--hairline); }
.index__row { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--s-4); padding: var(--s-2) 0; border-bottom: 1px solid var(--hairline); font-size: var(--fs-small); }
.index__row dt { font-weight: 600; }
.index__row dd { color: var(--graphite); }
.index--tight .index__row { grid-template-columns: 6.5rem 1fr; }

.system__panel { grid-column: 6 / -1; padding: var(--s-7) var(--s-6) var(--s-5) var(--s-7); }
.panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-7); }
.panel__title { color: var(--stage-muted); }
.panel__foot { color: var(--stage-muted); margin-top: var(--s-5); font-size: var(--fs-label); }
.test-btn {
  display: inline-flex; align-items: center; gap: var(--s-2); height: 2rem; padding: 0 var(--s-3);
  border: 1px solid #353B44; border-radius: var(--r-1); background: var(--stage-3);
  font-family: var(--font-mono); font-size: var(--fs-label); font-stretch: 87.5%; letter-spacing: 0.06em; text-transform: uppercase; color: var(--stage-ink);
  box-shadow: inset 0 -2px 0 rgb(0 0 0 / 0.4);
}
.test-btn:hover { background: #20252C; }
.test-btn:active { transform: translateY(1px); box-shadow: none; }
.test-btn__cap { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--stage-muted); }
.ann { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2); }
.ann__light {
  position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; padding: var(--s-2);
  background: linear-gradient(#15181D, #111418);
  border: 1px solid var(--stage-line); border-radius: var(--r-1);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.03), inset 0 -10px 20px rgb(0 0 0 / 0.35);
  font-family: var(--font-mono); font-size: var(--fs-label); font-stretch: 75%; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--stage-muted); text-align: center;
  transition: background 90ms linear, color 90ms linear, box-shadow 200ms var(--ease), border-color var(--dur-1) var(--ease);
}
.ann__light:hover, .ann__light:focus-visible { border-color: #4A515C; color: var(--stage-ink); }
.ann__light.is-lit {
  background: var(--signal-lit); color: var(--ink); border-color: #FFC53D; font-weight: 650;
  box-shadow: 0 0 28px -2px rgb(242 169 0 / 0.45), inset 0 1px 0 rgb(255 255 255 / 0.35), inset 0 -8px 16px rgb(122 82 0 / 0.25);
}
.panel__btns { display: flex; gap: var(--s-2); }
.test-btn--quiet { box-shadow: none; background: transparent; color: var(--stage-muted); }
.test-btn--quiet[aria-pressed="true"] { color: var(--stage-ink); border-color: #4A515C; }
.bus { position: relative; height: 2.75rem; }
.bus svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bus__wire { fill: none; stroke: #2A2F37; stroke-width: 1; }
.bus__pulse { fill: none; stroke: var(--stage-ink); stroke-width: 1.5; stroke-linecap: round; }
.bus__node {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  padding: 3px 8px; background: var(--stage); border: 1px solid #353B44; border-radius: var(--r-full);
  color: var(--stage-ink); white-space: nowrap;
}
.ann__readout {
  margin-top: 0; padding: var(--s-3) var(--s-4);
  background: #07080A; border: 1px solid var(--stage-line); border-radius: var(--r-1);
  color: var(--stage-ink); min-height: 2.75rem; display: flex; align-items: center;
  box-shadow: inset 0 2px 8px rgb(0 0 0 / 0.6);
}
.engines { display: grid; grid-template-columns: repeat(33, minmax(0, 1fr)); gap: 3px; margin-top: var(--s-4); }
.engines span { aspect-ratio: 1; border-radius: 1px; background: #1A1E24; transition: background-color 80ms linear, box-shadow 160ms linear; }
.engines span.is-lit { background: var(--signal-lit); box-shadow: 0 0 6px var(--signal-glow); }

/* ---------- Global ---------- */
.global__head, .security__head, .pricing__head {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end;
  margin-bottom: var(--s-7);
}
.global__head > div, .security__head > div, .pricing__head > div { grid-column: 1 / span 7; }
.global__head > .lead, .security__head > .lead, .pricing__head > .lead { grid-column: 9 / -1; }

.clocks { position: relative; border-top: 1px solid var(--ink); }
.clock {
  display: grid; align-items: center;
  grid-template-columns: 11rem 6.5rem minmax(0, 1fr) 6rem 3.5rem;
  column-gap: var(--s-5);
  height: 3rem; border-bottom: 1px solid var(--hairline);
}
.clock--scale { height: 2.5rem; color: var(--graphite); }
.clock__city { font-weight: 600; white-space: nowrap; }
.clock__city .deva { font-weight: 400; color: var(--graphite); margin-left: var(--s-1); }
.clock--scale .clock__city { font-weight: 450; }
.clock__scale { position: relative; height: 100%; }
.clock__scale span { position: absolute; top: 50%; transform: translate(-50%, -50%); }
.clock__scale span:nth-child(1) { left: 0; transform: translate(0, -50%); }
.clock__scale span:nth-child(2) { left: 25%; }
.clock__scale span:nth-child(3) { left: 50%; }
.clock__scale span:nth-child(4) { left: 75%; }
.clock__scale span:nth-child(5) { left: 100%; transform: translate(-100%, -50%); }
.clock__ruler { position: relative; align-self: stretch; }
.clock__ruler::before {
  /* one tick per hour */
  content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 6px); height: 12px;
  background: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px calc(100% / 24));
  opacity: 0.55;
}
.clock__ruler::after { content: ""; position: absolute; right: 0; top: calc(50% - 6px); width: 1px; height: 12px; background: var(--line); opacity: 0.55; }
.clock__band { position: absolute; top: calc(50% - 5px); height: 10px; background: var(--ink); border-radius: 1px; left: calc(var(--o, 0.15) * 100%); width: calc(var(--w, 0.375) * 100%); }
.clock__band--wrap { display: none; left: 0; width: calc(var(--w2, 0) * 100%); }
.clock.has-wrap .clock__band--wrap { display: block; }
.clock.is-planned .clock__band { background: var(--line); opacity: 0.55; }
.clock__now { position: absolute; top: 0; bottom: -1px; left: calc(var(--now, 0.5) * 100%); width: 1px; background: var(--ink); display: none; }
.clock__now::after { content: ""; position: absolute; left: -3px; top: calc(50% - 3px); width: 7px; height: 7px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--ink); }
.js .clock__now { display: block; }
.clock--scale .clock__time { font-size: var(--fs-label); font-weight: 450; }
.clock__time { font-size: var(--fs-lead); font-weight: 560; font-stretch: 108%; text-align: right; }
.clock__zone { color: var(--graphite); }
.clock.is-planned .clock__city, .clock.is-planned .clock__time { color: var(--graphite); font-weight: 450; }
.clocks__legend { margin-top: var(--s-3); color: var(--graphite); }

.fmt {
  margin-top: var(--s-7);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-5);
  padding: var(--s-6) var(--s-6) var(--s-5); background: var(--mist); border-radius: var(--r-2);
}
.fmt__input { grid-column: 1 / span 3; display: grid; align-content: start; gap: var(--s-2); }
.fmt__input label { color: var(--graphite); }
.fmt__input input {
  height: 3rem; padding: 0 var(--s-3); border: 1px solid var(--line); border-radius: var(--r-1); background: var(--paper);
  font-size: var(--fs-lead); font-variant-numeric: tabular-nums; width: 100%;
}
.fmt__out { grid-column: 4 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.fmt__cell { display: grid; align-content: start; gap: var(--s-2); padding-left: var(--s-5); border-left: 1px solid var(--hairline); min-width: 0; }
.fmt__v { font-size: var(--fs-h2); line-height: 1.1; font-weight: 560; font-stretch: 108%; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fmt__cell.is-planned .fmt__v { color: var(--graphite); }
.fmt__l { color: var(--graphite); }
.fmt__note { grid-column: 4 / -1; font-size: var(--fs-small); color: var(--graphite); padding-left: var(--s-5); }

/* ---------- Markets ---------- */
.markets__title { max-width: 22em; margin-bottom: var(--s-7); }
.markets__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) calc(var(--gutter) * 3); }
.market__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); padding-bottom: var(--s-4); border-bottom: 1px solid var(--ink); }
.market__head .h3 { font-size: var(--fs-h2); font-weight: 560; font-stretch: 112%; letter-spacing: -0.01em; }
.market__head .deva { font-size: var(--fs-h3); font-weight: 400; color: var(--graphite); margin-left: var(--s-2); }
.market__meta { color: var(--graphite); }
.market__list li { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--hairline); }
.market__f { display: grid; font-weight: 600; }
.market__f small { font-weight: 400; font-size: var(--fs-small); color: var(--graphite); }
.status {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  font-family: var(--font-mono); font-size: var(--fs-label); font-stretch: 87.5%; letter-spacing: 0.05em; text-transform: uppercase; color: var(--graphite);
}
.status::before { content: ""; width: 9px; height: 9px; border-radius: 2px; border: 1.5px solid var(--ink); }
.status--available { color: var(--ink); }
.status--available::before { background: var(--ink); }
.status--beta::before { background: linear-gradient(90deg, var(--ink) 50%, transparent 50%); }
.status--planned::before { border-color: var(--line); }
.market__fact { margin-top: var(--s-5); font-size: var(--fs-small); color: var(--graphite); }
.reform { margin-top: var(--s-6); }
.reform__title { color: var(--graphite); margin-bottom: var(--s-3); }
.reform__track { position: relative; height: 14px; }
.reform__track::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: var(--hairline); }
.reform__track::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14px; background: linear-gradient(var(--ink), var(--ink)) left / 1px 100% no-repeat, linear-gradient(var(--ink), var(--ink)) right / 1px 100% no-repeat; }
.reform__fill { position: absolute; left: 0; top: 6px; height: 2px; width: calc(var(--p, 0.06) * 100%); background: var(--ink); }
.reform__now { position: absolute; top: 2px; left: calc(var(--p, 0.06) * 100%); width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--ink); }
.reform__ends { display: flex; justify-content: space-between; gap: var(--s-5); margin-top: var(--s-3); font-size: var(--fs-small); color: var(--graphite); }
.reform__ends p { max-width: 24ch; }
.reform__ends p:last-child { text-align: right; }
.reform__ends .num { display: block; font-weight: 600; color: var(--ink); }
.reform__count { display: block; color: var(--ink); }
.reform__count .num { display: inline; }

/* ---------- Why: the live lamp strip ---------- */
.lampstrip { margin-top: var(--s-8); padding: var(--s-5) var(--s-5) var(--s-4); }
.lampstrip__row { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 6px; }
.lamp {
  display: grid; place-items: center; height: 2.5rem; border-radius: 4px;
  background: linear-gradient(#15181D, #111418); border: 1px solid var(--stage-line);
  box-shadow: inset 0 -6px 12px rgb(0 0 0 / 0.35);
  font-family: var(--font-mono); font-size: var(--fs-label); font-stretch: 75%; letter-spacing: 0.04em; color: var(--stage-muted);
  transition: background-color 90ms linear, color 90ms linear, border-color 120ms linear, box-shadow 240ms var(--ease);
}
.lamp.is-scan { border-color: var(--stage-muted); color: var(--stage-ink); }
.lamp.is-lit {
  background: var(--signal-lit); color: var(--ink); border-color: #FFC53D; font-weight: 650;
  box-shadow: 0 0 22px -2px rgb(242 169 0 / 0.45), inset 0 1px 0 rgb(255 255 255 / 0.35);
}
.lampstrip__foot { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-4); }
.lampstrip__readout { color: var(--stage-ink); }
.lampstrip__note { color: var(--stage-muted); }
/* Below 1024px twenty-four labelled lamps don't fit on one row: two rows of twelve. */
@media (max-width: 1023px) { .lampstrip__row { grid-template-columns: repeat(12, minmax(0, 1fr)); } }

/* ---------- Security: the request path ---------- */
.reqpath { margin-bottom: var(--s-7); }
.reqpath__track { position: relative; height: 2.75rem; }
.reqpath__line { position: absolute; left: 0; right: 0; top: 5px; height: 1px; background: var(--line); }
.reqpath__pulse { position: absolute; left: 0; top: 4px; width: 40px; height: 3px; border-radius: 2px; background: var(--ink); opacity: 0; }
.reqpath__node { position: absolute; top: 0; left: calc(var(--x, 0) * 1px); display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); color: var(--graphite); white-space: nowrap; }
.reqpath__node i { width: 11px; height: 11px; border-radius: 2px; background: var(--paper); border: 1.5px solid var(--line); flex: none; transition: background-color 160ms linear, border-color 160ms linear; }
.reqpath__node.is-on { color: var(--ink); }
.reqpath__node.is-on i { background: var(--ink); border-color: var(--ink); }
.reqpath__node--end { align-items: flex-end; transform: translateX(-100%); }
.reqpath__foot { display: flex; align-items: center; gap: var(--s-4); }
.reqpath__readout { color: var(--ink); min-width: 0; }
.reqpath__note { color: var(--graphite); margin-left: auto; }
.reqpath__pause { height: 1.75rem; padding: 0 var(--s-2); border: 1px solid var(--hairline); border-radius: var(--r-1); color: var(--graphite); }
.reqpath__pause:hover, .reqpath__pause[aria-pressed="true"] { color: var(--ink); border-color: var(--line); }
.reduced .reqpath__pause, html:not(.js) .reqpath__pause { display: none; }

/* ---------- Markets: tabs on phones only ---------- */
.mtabs { display: none; }

/* ---------- Security ---------- */
.brains { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.brain { border-top: 1px solid var(--ink); padding-top: var(--s-5); display: grid; align-content: start; gap: var(--s-2); }
.brain__k { color: var(--graphite); }
.brain .h3 { font-size: var(--fs-h2); font-weight: 560; font-stretch: 112%; letter-spacing: -0.01em; margin-bottom: var(--s-2); }
.brain p:last-child { color: var(--graphite); max-width: 34ch; }
.security__lower { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); margin-top: var(--s-8); align-items: start; }
.audit { grid-column: 1 / span 6; background: var(--mist); border-radius: var(--r-2); padding: var(--s-5); }
.audit__title { color: var(--graphite); margin-bottom: var(--s-3); }
.audit__log li { display: grid; grid-template-columns: 3rem 9rem 1fr; gap: var(--s-3); padding: var(--s-2) 0; border-top: 1px solid var(--hairline); font-size: var(--fs-data); align-items: baseline; }
.audit__t { color: var(--graphite); }
.audit__a { text-transform: none; letter-spacing: 0; font-size: var(--fs-label); color: var(--ink); }
.promises { grid-column: 8 / -1; }
.promises .h3 { margin-bottom: var(--s-5); }
.promises__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); }
.promises__k { color: var(--graphite); padding-bottom: var(--s-2); border-bottom: 1px solid var(--ink); margin-bottom: var(--s-2); }
.promises li { padding: var(--s-2) 0; border-bottom: 1px solid var(--hairline); font-size: var(--fs-small); line-height: 1.5; }
.promises__note { margin-top: var(--s-4); font-size: var(--fs-small); color: var(--graphite); }

/* ---------- Founder ---------- */
.founder { background: var(--mist); padding-block: calc(var(--section) / 2); }
.section.founder + .section::before, .founder::before { display: none; }
.founder__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.founder__photo { grid-column: 1 / span 4; }
.founder__photo img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-2); filter: grayscale(1) contrast(1.04); }
.founder__photo figcaption { margin-top: var(--s-3); color: var(--graphite); }
.founder__copy { grid-column: 6 / -1; }
.founder__quote p { font-size: var(--fs-h2); line-height: 1.12; font-weight: 520; font-stretch: 108%; letter-spacing: -0.012em; text-wrap: balance; text-indent: -0.4em; }
.founder__body { margin-top: var(--s-5); color: var(--graphite); max-width: 56ch; font-size: var(--fs-lead); line-height: 1.55; }
.founder .index { margin-top: var(--s-5); border-top-color: #CDD2D8; }
.founder .index__row { border-bottom-color: #CDD2D8; }
.founder .link--arrow { margin-top: var(--s-5); }

/* ---------- Pricing ---------- */
.founding {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center;
  padding: var(--s-6) 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--hairline);
}
.founding__fig { grid-column: 1 / span 3; display: grid; gap: var(--s-1); }
.founding__pre { color: var(--graphite); }
.founding__v { font-size: var(--fs-display); line-height: 0.95; font-weight: 560; font-stretch: 116%; letter-spacing: -0.03em; }
.founding__l { color: var(--graphite); font-size: var(--fs-small); max-width: 24ch; }
.founding__facts { grid-column: 4 / span 5; display: grid; gap: var(--s-2); }
.founding__facts li { display: flex; align-items: center; gap: var(--s-3); }
.founding__facts li::before { content: ""; width: 6px; height: 6px; background: var(--ink); border-radius: 1px; flex: none; }
.seats { grid-column: 9 / -1; justify-self: end; display: grid; gap: var(--s-2); }
.seats__grid { display: grid; grid-template-columns: repeat(10, 12px); gap: 5px; }
.seats__grid span { width: 12px; height: 12px; border-radius: 2px; background: #E4E7EB; box-shadow: inset 0 0 0 1px #D3D8DE; }
.seats__l { color: var(--graphite); }
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); margin-top: var(--s-7); }
.tier { display: grid; align-content: start; gap: var(--s-3); padding: var(--s-5); border: 1px solid var(--hairline); border-radius: var(--r-2); }
.tier .h3 { font-size: var(--fs-h3); font-weight: 600; font-stretch: 112%; letter-spacing: -0.005em; }
.tier__for { color: var(--graphite); }
.tier > p:not(.tier__for) { color: var(--graphite); }
.tier ul { margin-top: var(--s-2); border-top: 1px solid var(--hairline); }
.tier li { padding: 6px 0; border-bottom: 1px solid var(--hairline); font-size: var(--fs-small); }
.tier li:last-child { border-bottom: 0; }

/* ---------- FAQ ---------- */
.faq__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.faq__grid > div:first-child { grid-column: 1 / span 4; }
.faq__list { grid-column: 6 / -1; border-top: 1px solid var(--ink); }
.qa { border-bottom: 1px solid var(--hairline); }
.qa summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-4) 0; cursor: pointer; list-style: none; font-size: var(--fs-lead); font-weight: 560; line-height: 1.35;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary .ico { color: var(--graphite); transition: transform var(--dur-2) var(--ease); }
.qa[open] summary .ico { transform: rotate(90deg); }
.qa summary:hover .ico { color: var(--ink); }
.qa p { padding: 0 0 var(--s-5); color: var(--graphite); max-width: 60ch; margin-top: calc(-1 * var(--s-2)); }

/* ---------- Apply ---------- */
.apply { padding-block: calc(var(--section) * 0.75); border-top: 1px solid var(--hairline); text-align: center; }
.apply__inner { display: grid; justify-items: center; gap: var(--s-5); }
.apply__title { font-size: var(--fs-display); line-height: 0.98; font-weight: 560; font-stretch: 116%; letter-spacing: -0.022em; text-wrap: balance; max-width: 14em; }
.apply__lead { font-size: var(--fs-lead); color: var(--graphite); max-width: 40ch; }
.apply__sub { color: var(--graphite); }

/* ---------- Footer ---------- */
.footer { background: var(--mist); padding-block: var(--s-9) var(--s-6); }
.footer__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-6); }
.footer__brand { grid-column: 1 / span 5; display: grid; align-content: start; gap: var(--s-3); }
.footer__brand p { color: var(--graphite); font-size: var(--fs-small); }
.footer__col { grid-column: span 2; display: grid; align-content: start; gap: var(--s-2); font-size: var(--fs-small); }
.footer__col:nth-of-type(1) { grid-column: 7 / span 2; }
.footer__col p { color: var(--graphite); margin-bottom: var(--s-1); }
.footer__col a { justify-self: start; line-height: 1.5; }
.footer__col .deva { line-height: 1.5; }
.footer__base { display: flex; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-9); padding-top: var(--s-5); border-top: 1px solid #CDD2D8; font-size: var(--fs-small); color: var(--graphite); }
.footer__base .mono { display: inline-flex; align-items: center; gap: var(--s-2); }

/* ---------- Sterile Cockpit (page-wide) ---------- */
.sterile-scrim {
  position: fixed; inset: 0; z-index: 40;
  background: rgb(11 13 16 / 0.42);
  -webkit-backdrop-filter: grayscale(1) brightness(0.62); backdrop-filter: grayscale(1) brightness(0.62);
  opacity: 0; visibility: hidden;
  transition: opacity 500ms var(--ease), visibility 0s 500ms;
}
.sterile-frame { position: fixed; inset: 0; z-index: 46; pointer-events: none; visibility: hidden; }
.sterile-frame i { position: absolute; background: var(--signal-lit); }
.sterile-frame i:nth-child(1) { top: 0; left: 0; right: 0; height: 2px; transform-origin: 0 50%; }
.sterile-frame i:nth-child(2) { top: 0; right: 0; bottom: 0; width: 2px; transform-origin: 50% 0; }
.sterile-frame i:nth-child(3) { bottom: 0; left: 0; right: 0; height: 2px; transform-origin: 100% 50%; }
.sterile-frame i:nth-child(4) { top: 0; left: 0; bottom: 0; width: 2px; transform-origin: 50% 100%; }

/* View Transition for the mode switch: the page crossfades, the nav slides away as its own group. */
.nav { view-transition-name: site-nav; }
.has-vt .nav { transition: border-color var(--dur-2) var(--ease); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 420ms; animation-timing-function: cubic-bezier(0.2, 0, 0, 1); }
::view-transition-group(site-nav) { animation-duration: 420ms; animation-timing-function: cubic-bezier(0.2, 0, 0, 1); }
.sterile-bar {
  position: fixed; left: 50%; bottom: var(--s-5); z-index: 47;
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4);
  background: var(--stage); color: var(--stage-ink); border: 1px solid var(--stage-line); border-radius: var(--r-2);
  box-shadow: 0 24px 48px -16px rgb(0 0 0 / 0.6);
  font-family: var(--font-mono); font-size: var(--fs-label); font-stretch: 87.5%; letter-spacing: 0.04em; text-transform: uppercase;
  transform: translate(-50%, 0); white-space: nowrap;
}
.sterile-bar[hidden] { display: none; }
.sterile-bar .cli { color: var(--stage-muted); }
.sterile-bar .btn { font-family: var(--font-sans); text-transform: none; letter-spacing: 0; font-stretch: 100%; }
html.sterile .sterile-scrim { opacity: 1; visibility: visible; transition: opacity 500ms var(--ease); }
html.sterile .sterile-frame { visibility: visible; }
html.sterile .nav { transform: translateY(-100%); }
html.sterile .product__stage { position: relative; z-index: 45; box-shadow: 0 0 0 1px #353B44, 0 40px 120px -20px rgb(0 0 0 / 0.9); }
/* A sticky grid is its own stacking context: lift the whole grid, and dim its text column to match the scrim. */
html.sterile .product__track.is-sticky .product__grid { z-index: 45; }
html.sterile .product__track.is-sticky .product__copy > :not(.fdesc),
html.sterile .product__track.is-sticky .fdesc__item > :not([data-sterile-toggle]) { filter: grayscale(1) brightness(0.6); }
/* The copy column's own toggle stays live above the scrim as a second way out. */
html.sterile .fdesc [data-sterile-toggle] { position: relative; z-index: 45; }

/* ---------- Compass (⌘K) ---------- */
.compass {
  padding: 0; border: 0; background: transparent;
  width: 100%; max-width: 100%; height: 100%; max-height: 100%;
  overflow: hidden;
}
.compass::backdrop { background: rgb(15 18 22 / 0.32); transition: opacity 180ms var(--ease); }
/* Entry without JS animation: the box rises 8 px and fades in */
.compass .compass__box { transition: opacity 180ms var(--ease), translate 180ms var(--ease); }
@starting-style {
  .compass[open] .compass__box { opacity: 0; translate: 0 8px; }
  .compass[open]::backdrop { opacity: 0; }
}
.pv { animation: pv-in 160ms var(--ease); }
@keyframes pv-in { from { opacity: 0; } }
.compass[open] { display: grid; place-items: start center; }
.compass__box {
  width: min(47.5rem, 100% - 2 * var(--s-4)); margin-top: min(14vh, 8rem);
  max-height: min(34rem, 100% - 16vh);
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--paper); border-radius: var(--r-2); box-shadow: var(--e-2), 0 0 0 1px var(--hairline);
  overflow: hidden;
}
.compass__top { display: flex; align-items: center; gap: var(--s-3); padding: 0 var(--s-3) 0 var(--s-5); height: 3.75rem; border-bottom: 1px solid var(--hairline); }
.compass__top > .ico { color: var(--graphite); }
.compass__input { flex: 1; height: 100%; border: 0; background: transparent; font-size: var(--fs-lead); outline: none; min-width: 0; }
.compass__input::placeholder { color: #626A76; }   /* 5.2:1 on Paper */
.compass__esc { height: 1.75rem; padding: 0 var(--s-2); border: 1px solid var(--hairline); border-radius: 4px; color: var(--graphite); }
.compass__body { display: grid; grid-template-columns: minmax(0, 1fr) 17.5rem; min-height: 0; }
.compass__list { overflow-y: auto; padding: var(--s-2); overscroll-behavior: contain; }
.compass__group { padding: var(--s-3) var(--s-3) var(--s-1); color: var(--graphite); }
.compass__opt {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-3); border-radius: var(--r-1); cursor: pointer; font-size: var(--fs-small);
}
.compass__opt .ico { width: 1rem; height: 1rem; color: var(--graphite); }
.compass__opt small { display: block; color: var(--graphite); font-size: var(--fs-data); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.compass__opt-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.compass__opt mark { background: none; color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.compass__opt-k { font-family: var(--font-mono); font-size: var(--fs-label); font-stretch: 87.5%; letter-spacing: 0.05em; text-transform: uppercase; color: var(--graphite); }
.compass__opt[aria-selected="true"] { background: var(--mist); box-shadow: inset 2px 0 0 var(--ink); }
.compass__empty { padding: var(--s-6) var(--s-4); color: var(--graphite); font-size: var(--fs-small); }
.compass__preview { border-left: 1px solid var(--hairline); padding: var(--s-5); overflow-y: auto; background: #FAFAFB; }
.compass__detail { padding: var(--s-5); overflow-y: auto; }
.compass__detail[hidden] { display: none; }
.compass.is-detail .compass__body { display: none; }
.pv__k { color: var(--graphite); margin-bottom: var(--s-2); }
.pv__t { font-size: var(--fs-h3); font-weight: 600; line-height: 1.25; margin-bottom: var(--s-1); }
.pv__s { color: var(--graphite); font-size: var(--fs-small); margin-bottom: var(--s-4); }
.pv__status { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-small); margin-bottom: var(--s-4); }
.pv__status .caption-light.is-lit { box-shadow: 0 0 8px rgb(184 123 0 / 0.5); }
.pv__dl { display: grid; border-top: 1px solid var(--hairline); }
.pv__dl div { display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--s-2); padding: var(--s-2) 0; border-bottom: 1px solid var(--hairline); font-size: var(--fs-data); }
.pv__dl dt { color: var(--graphite); }
.pv__dl dd { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pv__hint { margin-top: var(--s-4); color: var(--graphite); }
.pv__actions { display: flex; gap: var(--s-2); margin-top: var(--s-5); flex-wrap: wrap; }
.compass__foot { display: flex; align-items: center; gap: var(--s-5); padding: var(--s-3) var(--s-5); border-top: 1px solid var(--hairline); color: var(--graphite); }
.compass__foot kbd { font-family: inherit; display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding: 0 4px; margin-right: 2px; border: 1px solid var(--hairline); border-radius: 4px; background: var(--paper); }
.compass__demo { margin-left: auto; }

/* ---------- Swiss hairlines that draw on entry (JS + motion only) ---------- */
.js:not(.reduced) [data-rule] { position: relative; border-top-color: transparent !important; }
.js:not(.reduced) [data-rule]::after {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--ink);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform 900ms var(--ease);
}
.js:not(.reduced) [data-rule].is-drawn::after { transform: scaleX(1); }
.js:not(.reduced) .section + .section::before { transform: scaleX(0); transform-origin: 0 50%; transition: transform 1100ms var(--ease); }
.js:not(.reduced) .section.is-drawn::before { transform: scaleX(1); }

/* ---------- Reveal gate (JS only, never under reduced motion) ---------- */
.js:not(.reduced) [data-reveal] { opacity: 0; transform: translateY(16px); }
.js:not(.reduced) [data-reveal].is-in { opacity: 1; transform: none; }
.js:not(.reduced) .hero__title .line > span { transform: translateY(105%); }
.js:not(.reduced) .hero__lead, .js:not(.reduced) .hero__actions, .js:not(.reduced) .hero__hint { opacity: 0; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 47.99rem) { .scrollrule { display: none; } }
@media (max-width: 1180px) {
  .nav__links { gap: var(--s-5); margin-left: var(--s-2); }
  .nav__search-label { display: none; }
}
@media (max-width: 1099px) {
  .nav__links { display: none; }
  .nav__menu { display: inline-flex; }
  .hero__grid { min-height: 0; }
  .hero__copy { grid-column: 1 / -1; padding-block: var(--s-8) var(--s-7); }
  .hero__stage { grid-column: 1 / -1; height: 40rem; }
  .hero__note { text-align: left; }
  .product__copy, .system__copy { grid-column: 1 / -1; padding-right: 0; margin-bottom: var(--s-7); }
  .product__stage, .system__panel { grid-column: 1 / -1; }
  .ftabs { display: flex; overflow-x: auto; border-top: 0; gap: var(--s-2); margin-inline: calc(-1 * var(--margin)); padding-inline: var(--margin); scrollbar-width: none; }
  .ftabs::-webkit-scrollbar { display: none; }
  .ftab { display: inline-flex; width: auto; flex: none; padding: 0 var(--s-4); height: 2.5rem; border: 1px solid var(--hairline); border-radius: var(--r-full); }
  .ftab[aria-selected="true"] { box-shadow: none; padding-left: var(--s-4); background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .ftab__t { font-size: var(--fs-small); }
  .fdesc { min-height: 0; }
  .global__head > div, .security__head > div, .pricing__head > div, .global__head > .lead, .security__head > .lead, .pricing__head > .lead { grid-column: 1 / -1; }
  .global__head .lead, .security__head .lead, .pricing__head .lead { margin-top: var(--s-4); }
  .fmt__input { grid-column: 1 / -1; max-width: 22rem; }
  .fmt__out, .fmt__note { grid-column: 1 / -1; }
  .fmt__note { padding-left: 0; }
  .audit { grid-column: 1 / -1; margin-bottom: var(--s-8); }
  .promises { grid-column: 1 / -1; }
  .founder__photo { grid-column: 1 / span 5; }
  .founder__copy { grid-column: 7 / -1; }
  .founding__fig { grid-column: 1 / span 4; }
  .founding__facts { grid-column: 5 / -1; }
  .seats { grid-column: 1 / -1; justify-self: start; margin-top: var(--s-6); }
  .faq__grid > div:first-child, .faq__list { grid-column: 1 / -1; }
  .faq__grid > div:first-child { margin-bottom: var(--s-6); }
}
@media (max-width: 859px) {
  .why__grid, .brains, .tiers { grid-template-columns: 1fr; gap: var(--s-7); }
  .why__grid { margin-top: var(--s-8); }
  .markets__grid { grid-template-columns: 1fr; gap: var(--s-9); }
  .clock { grid-template-columns: 8.5rem 5.5rem minmax(0, 1fr) 4.5rem 3rem; column-gap: var(--s-3); }
  .founder__photo { grid-column: 1 / span 6; margin-bottom: var(--s-7); }
  .founder__copy { grid-column: 1 / -1; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__col, .footer__col:nth-of-type(1) { grid-column: span 4; }
}
@media (max-width: 719px) {
  :root { --nav-h: 3.5rem; }
  .nav__inner { gap: var(--s-3); }
  .nav__cta { display: none; }
  .nav__search { width: 2.5rem; padding: 0; justify-content: center; }
  .nav__search .kbd { display: none; }
  .nav__search .ico { width: 1.125rem; height: 1.125rem; color: var(--ink); }
  .brand__word { font-size: 1.0625rem; }
  .hero__title { font-stretch: 106%; letter-spacing: -0.02em; margin-bottom: var(--s-5); }
  .hero__lead { margin-bottom: var(--s-6); }
  .hero__copy { padding-block: var(--s-7) var(--s-6); }
  .hero__actions { display: grid; grid-template-columns: 1fr; }
  .hero__actions .btn { width: 100%; }
  .hero__hint { display: none; }
  .hero__stage { height: 33rem; margin-inline: calc(-1 * var(--margin) + var(--s-2)); }
  .stage__bar { padding: var(--s-4) var(--s-4) var(--s-3) var(--s-5); }
  .stage__title { display: none; }
  .stage__bar { justify-content: flex-end; }
  .stage__foot { padding: var(--s-3) var(--s-4) var(--s-4) var(--s-5); }
  .stage__readout { display: none; }
  .strip { gap: var(--s-3); }
  .stage__cross { display: none; }
  .stack-card { left: var(--s-4); right: var(--s-4); width: auto; top: 4.25rem; padding: var(--s-3); }
  .need { padding: var(--s-3); margin-bottom: var(--s-4); }
  .need__why { display: none; }
  .chip { height: 1.75rem; padding: 0 var(--s-2); gap: 6px; font-size: var(--fs-label); }
  .hero__note { font-size: var(--fs-label); }

  .why__item p, .fdesc__item p { max-width: none; }
  .product__stage { padding: var(--s-5) var(--s-3) var(--s-3) var(--s-5); margin-inline: calc(-1 * var(--margin) + var(--s-2)); }
  .app__bar { gap: var(--s-2); }
  .app__org, .app__clock { display: none; }
  .app__search { margin-left: 0; }
  .app__body { grid-template-columns: 1fr; min-height: 25rem; }
  .app__side { border-right: 0; border-bottom: 1px solid var(--stage-line); padding: var(--s-2); }
  .app__side .app__sect, .mini-stack, .app__role { display: none; }
  .caps { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 0; }
  .cap { grid-template-columns: 1fr; padding: 6px var(--s-2); }
  .cap .ico, .cap__m { display: none; }
  .cap__t { font-size: var(--fs-label); }
  .app__main { padding: var(--s-4); }
  .form { grid-template-columns: 1fr; }
  .field--extra, .audit__more { display: none; }

  /* Designed-for-phone patterns: swipe rows, tabs, compact instruments.
     Secondary detail steps aside on phones; the primary content never does. */
  .clock--minor, .index__row--minor, .audit, .engines, .panel__foot, .seats, .fmt__note,
  .system__copy .index, .security__head .lead, .pricing__head .lead, .global__head .lead { display: none; }
  .ann__light { aspect-ratio: auto; height: 2.75rem; }
  .founder__photo { grid-column: 1 / -1; width: 7.5rem; margin-bottom: var(--s-5); }
  .founder__photo figcaption { display: none; }
  .founding { padding-block: var(--s-5); }
  .footer__col, .footer__col:nth-of-type(1), .footer__col:last-of-type { grid-column: span 4; display: grid; }
  .footer__col:last-of-type p { flex-basis: auto; }
  .hero__stage { height: 30rem; }
  .why__grid, .brains, .promises__cols {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--s-3);
    margin-inline: calc(-1 * var(--margin)); padding: var(--s-1) var(--margin) var(--s-2); scroll-padding-inline: var(--margin); scrollbar-width: none;
  }
  .why__grid:focus-visible, .brains:focus-visible, .promises__cols:focus-visible, .tiers:focus-visible { outline-offset: -3px; }
  .why__grid::-webkit-scrollbar, .brains::-webkit-scrollbar, .promises__cols::-webkit-scrollbar { display: none; }
  .why__item, .brain, .promises__cols > div { flex: 0 0 84%; scroll-snap-align: start; }
  .why__grid { margin-top: var(--s-5); }
  .lampstrip { padding: var(--s-4); margin-inline: calc(-1 * var(--margin) + var(--s-2)); margin-top: var(--s-6); }
  .lampstrip__row { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 5px; }
  .lamp { height: 1.375rem; font-size: 0; }
  .lampstrip__foot { flex-direction: column; gap: var(--s-1); }
  .reqpath { display: none; }
  .mtabs {
    display: flex; gap: 2px; padding: 2px; margin-bottom: var(--s-5);
    border: 1px solid var(--hairline); border-radius: var(--r-1); background: var(--mist);
  }
  .mtabs button { flex: 1; height: 2.5rem; border-radius: 4px; font-weight: 560; color: var(--graphite); }
  .mtabs button[aria-selected="true"] { background: var(--paper); color: var(--ink); box-shadow: var(--e-1); }
  .markets__grid { gap: 0; }
  .market__head .h3 { font-size: var(--fs-h3); }
  .fmt__out { gap: var(--s-2); }
  .fmt__cell { grid-template-columns: max-content 1fr; align-items: baseline; column-gap: var(--s-3); }
  .fmt__l { text-align: right; }
  .fmt__v { overflow: visible; }
  .fmt__v { font-size: var(--fs-h3); }
  .fmt__lx { display: none; }
  .security__lower { margin-top: var(--s-7); }
  .footer { padding-block: var(--s-7) var(--s-5); }
  .footer__grid { row-gap: var(--s-5); }
  .footer__col:last-of-type { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
  .footer__col:last-of-type p { flex-basis: 100%; }
  .footer__base { margin-top: var(--s-6); }
  .tiers { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--s-3); margin-inline: calc(-1 * var(--margin)); padding: var(--s-1) var(--margin) var(--s-2); scroll-padding-inline: var(--margin); scrollbar-width: none; }
  .tiers::-webkit-scrollbar { display: none; }
  .tier { flex: 0 0 84%; scroll-snap-align: start; }
  .kpis { grid-template-columns: 1fr 1fr 1fr; }
  .kpi { padding: var(--s-2); }
  .kpi__v { font-size: var(--fs-small); }
  .rows li { grid-template-columns: 1fr 3rem; }
  .rows li span:nth-child(2) { display: none; }
  .count th, .count td, .pay th, .pay td { padding: 6px 4px; }
  .count thead th:nth-child(2), .count tbody td:nth-child(2) { display: none; }
  .count td input { width: 4.25rem; }
  .pay thead th:nth-child(2), .pay tbody td:nth-child(2), .pay tfoot td:nth-child(2) { display: none; }
  .doors { grid-template-columns: repeat(2, 1fr); }
  .doors li { height: 2.75rem; }
  .seg button { flex: 1 1 40%; }

  .system__panel { padding: var(--s-5) var(--s-4) var(--s-4) var(--s-5); margin-inline: calc(-1 * var(--margin) + var(--s-2)); }
  .ann { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ann__light { font-size: var(--fs-label); letter-spacing: 0.04em; aspect-ratio: 4 / 3; }
  .engines { grid-template-columns: repeat(22, minmax(0, 1fr)); }
  .panel__head { flex-wrap: wrap; }

  .clock { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-rows: auto auto; column-gap: var(--s-3); row-gap: 6px; height: auto; padding: var(--s-3) 0; }
  .clock__city { grid-column: 1; grid-row: 1; }
  .clock__tagcol { grid-column: 2; grid-row: 1; }
  .clock__time { grid-column: 3; grid-row: 1; font-size: var(--fs-body); }
  .clock__zone { display: none; }
  .clock__ruler { grid-column: 1 / -1; grid-row: 2; height: 18px; }
  .clock--scale { display: grid; padding: var(--s-2) 0; }
  .clock--scale .clock__city, .clock--scale .clock__tagcol, .clock--scale .clock__time { display: none; }
  .clock--scale .clock__scale { grid-column: 1 / -1; grid-row: 1; height: 1rem; }
  .clock__now { bottom: 0; }

  .fmt { padding: var(--s-5) var(--s-4); margin-inline: calc(-1 * var(--margin) + var(--s-2)); }
  .fmt__out { grid-template-columns: 1fr; gap: var(--s-4); }
  .fmt__cell { padding-left: 0; border-left: 0; border-top: 1px solid var(--hairline); padding-top: var(--s-3); }
  .fmt__v { font-size: var(--fs-h2); }

  .market__head { flex-wrap: wrap; }
  .reform__ends p { max-width: 16ch; }
  .audit { padding: var(--s-4); margin-inline: calc(-1 * var(--margin) + var(--s-2)); }
  .audit__log li { grid-template-columns: 2.75rem 1fr; }
  .audit__log li > span:last-child { grid-column: 2; }
  .promises__cols { grid-template-columns: 1fr; gap: var(--s-6); }
  .founder__photo { grid-column: 1 / span 9; }
  .index__row, .index--tight .index__row { grid-template-columns: 5.5rem 1fr; gap: var(--s-3); }
  .founding { row-gap: var(--s-5); }
  .founding__fig, .founding__facts { grid-column: 1 / -1; }
  .apply { padding-block: var(--s-10); }
  .footer__col, .footer__col:nth-of-type(1) { grid-column: span 6; }
  .footer__col:last-of-type { grid-column: 1 / -1; }
  .footer__base { flex-direction: column; }
  .sterile-bar { left: var(--s-3); right: var(--s-3); transform: none; white-space: normal; font-size: var(--fs-label); }
  .sterile-bar span { flex: 1; }
  .compass__box { width: 100%; margin-top: 0; max-height: 100%; height: 100%; border-radius: 0; }
  .compass__body { grid-template-columns: 1fr; }
  .compass__preview { display: none; }
  .compass__foot > span:not(.compass__demo) { display: none; }
}
@media (hover: none) {
  .hero__hint { display: none; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .pal-mock__caret { display: none; }
}