/* ============================ FONTS ============================ */
@font-face { font-family: "Space Grotesk"; src: url("../fonts/space-grotesk-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("../fonts/space-grotesk-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }

/* Metric-matched fallbacks, measured against Arial rather than estimated
   (scratchpad/metrics.py). These sit second in each token stack so they are
   what the browser actually uses during swap. */
@font-face { font-family: "Space Grotesk Fallback"; src: local("Arial"); size-adjust: 108.79%; ascent-override: 90.1%; descent-override: 26.7%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback"; src: local("Arial"); size-adjust: 106.24%; ascent-override: 91.3%; descent-override: 22.6%; line-gap-override: 0%; }

/* ============================ RESET ============================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-light);
  background: var(--navy-900);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; }
:target { scroll-margin-top: 0; }
/* Every destination owns the viewport behind the floating header. Content
   clears the pill; the previous section never remains visible around it. */
:is(.section, .footer):target {
  padding-top: max(var(--section-y, var(--s-12)), calc(var(--header-h) + var(--s-3)));
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}

/* ============================ A11Y ============================ */
:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--cyan-400);
  outline-offset: 3px;
  border-radius: 4px;
}
.skip {
  position: absolute; left: var(--s-2); top: -100px; z-index: 200;
  padding: var(--s-2) var(--s-3); border-radius: var(--r-control);
  background: var(--cyan-400); color: var(--ink-950); font-weight: 600;
  transition: top var(--d-1) var(--e-out);
}
.skip:focus { top: var(--s-2); }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ============================ PRIMITIVES ============================ */
.shell { width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: var(--margin); }
.section { position: relative; padding-block: var(--section-y); }
.section--dark { background: var(--field-dark); color: var(--text-light); }
.section--light { background: var(--field-light); color: var(--text-dark); }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-1);
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--cyan-400);
}
.eyebrow::before { content: ""; width: 18px; height: 1px; background: currentColor; }
.section--light .eyebrow { color: var(--blue-500); }

.h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: -0.02em; }
.h3 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: -0.01em; }
.lede { font-size: var(--fs-lede); color: var(--text-muted); max-width: var(--measure); }
.section--light .lede { color: var(--text-dim); }
.mono { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--tr-label); text-transform: uppercase; }

/* Aperture edge — the recurring handoff detail. Ticks stay sparse. */
.aperture-edge { position: relative; border-radius: var(--r-aperture) var(--r-aperture) 0 0; margin-top: calc(var(--r-aperture) * -1); }
.aperture-edge::before {
  content: ""; position: absolute; inset-inline: 12%; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, currentColor 22%, currentColor 78%, transparent);
  opacity: .16;
}
.ticks { position: absolute; top: 0; inset-inline: 12%; height: 10px; display: flex; justify-content: space-between; opacity: .28; pointer-events: none; }
.ticks i { width: 1px; height: 100%; background: currentColor; }
.ticks i:nth-child(2n) { height: 5px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-1);
  min-height: 48px; padding: 0 var(--s-4);
  border-radius: var(--r-pill); font-weight: 600; font-size: var(--fs-body);
  text-decoration: none; white-space: nowrap;
  transition: transform var(--d-1) var(--e-out), box-shadow var(--d-2) var(--e-out), background-color var(--d-1) var(--e-out);
}
.btn:hover { transform: translateY(-1px); }
.btn--primary {
  position: relative; isolation: isolate; overflow: hidden;
  border: 1px solid rgb(34 213 245 / 38%);
  background:
    linear-gradient(180deg, rgb(255 255 255 / 13%), transparent 46%),
    var(--cta-fill);
  color: var(--white-100);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 24%),
    inset 0 -1px 0 rgb(34 213 245 / 18%),
    0 9px 24px rgb(11 59 159 / 28%);
}
.btn--primary::after {
  position: absolute; z-index: -1; top: -70%; left: -42%;
  width: 28%; height: 240%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgb(234 253 255 / 62%), transparent);
  transform: rotate(14deg) translateX(-220%);
  transition: transform 560ms var(--e-out);
  content: "";
}
.btn--primary:hover, .btn--primary:focus-visible {
  transform: translateY(-2px);
  border-color: rgb(34 213 245 / 62%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 32%),
    inset 0 -1px 0 rgb(34 213 245 / 24%),
    0 0 0 1px rgb(34 213 245 / 16%),
    0 0 22px rgb(34 213 245 / 20%),
    0 14px 34px rgb(11 59 159 / 38%);
}
.btn--primary:hover::after, .btn--primary:focus-visible::after { transform: rotate(14deg) translateX(620%); }
.btn--primary:active { transform: translateY(0) scale(.99); }
.btn--ghost { box-shadow: inset 0 0 0 1px var(--line-dark); color: var(--text-light); }
.section--light .btn--ghost, .btn--ghost.on-light { box-shadow: inset 0 0 0 1px var(--line-light); color: var(--text-dark); }
.btn .arrow { transition: transform var(--d-1) var(--e-out); }
.btn:hover .arrow { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .btn--primary::after { display: none; }
}

/* ============================ SPINE RAIL (improvement 4.1) ============================ */
.spine {
  position: fixed; top: 50%; translate: 0 -50%; z-index: 40;
  /* sits just outside the content box on wide displays instead of being
     stranded at the far screen edge; pinned to 0 when there is no gutter */
  left: max(0px, calc((100% - var(--content-max)) / 2 - var(--rail-w)));
  width: var(--rail-w);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
}
.spine ol { display: grid; }
.spine a {
  display: grid; grid-template-columns: 22px 1fr; align-items: center;
  min-width: 44px; min-height: 44px; padding-left: var(--s-3); text-decoration: none;
  color: var(--text-muted); opacity: .5;
  box-shadow: inset 1px 0 currentColor;
  transition: opacity var(--d-2) var(--e-out), color var(--d-2) var(--e-out);
}
.spine a span:last-child { opacity: 0; translate: -4px 0; transition: opacity var(--d-2) var(--e-out), translate var(--d-2) var(--e-out); }
.spine:hover a span:last-child { opacity: .75; translate: 0 0; }
.spine a:hover, .spine a:focus-visible { opacity: 1; }
.spine a[aria-current] { color: var(--cyan-400); opacity: 1; box-shadow: inset 2px 0 currentColor; }
.spine a[aria-current] span:last-child { opacity: 1; translate: 0 0; }
body[data-surface="light"] .spine a { color: var(--text-dim); }
body[data-surface="light"] .spine a[aria-current] { color: var(--blue-500); }

/* Labels need real gutter. Below 1600px the rail is index-only. */
@media (max-width: 1599px) {
  .spine { width: 44px; }
  .spine a { grid-template-columns: 22px; padding-left: var(--s-2); }
  .spine a span:last-child, .spine:hover a span:last-child { display: none; }
}
/* Below 1280px there is no gutter that clears the content, and no 44px
   target that does not sit over text. The header menu carries wayfinding. */
@media (max-width: 1279px) { .spine { display: none; } }

/* ============================ HEADER ============================ */
.header { position: fixed; inset-inline: 0; top: var(--s-2); z-index: 60; padding-inline: var(--margin); }
.header__bar {
  max-width: var(--content-max); margin-inline: auto;
  display: flex; align-items: center; gap: var(--s-3);
  min-height: var(--header-h); padding: var(--s-1) var(--s-1) var(--s-1) var(--s-3);
  border-radius: var(--r-pill);
  background: rgb(6 11 20 / 88%); /* must stay legible where the pill crosses the light world */
  box-shadow: inset 0 0 0 1px var(--line-dark), var(--depth-2);
  backdrop-filter: blur(18px) saturate(140%);
}
.header__brand { display: flex; align-items: center; gap: var(--s-1); min-height: 44px; text-decoration: none; }
.header__brand img { width: 26px; height: 29px; }
.header__brand b { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; }
.header__nav { display: flex; gap: var(--s-3); margin-inline: auto; }
.header__nav a { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; font-size: var(--fs-small); text-decoration: none; color: var(--text-muted); transition: color var(--d-1) var(--e-out); }
.header__nav a:hover { color: var(--text-light); }
.header__nav a::after { content: ""; position: absolute; left: 0; bottom: 2px; width: 0; height: 1px; background: var(--cyan-400); transition: width var(--d-2) var(--e-out); }
.header__nav a:hover::after { width: 100%; }
.header__nav a[aria-current] { color: var(--text-light); }
.header__nav a[aria-current]::after { width: 100%; height: 2px; bottom: 4px; border-radius: 2px; }
.sheet a[aria-current] { color: var(--text-light); }
.footer__credit a { color: inherit; text-underline-offset: 3px; }
.footer__credit a:hover, .footer__credit a:focus-visible { color: var(--cyan-400); }
.header .btn { min-height: 44px; padding-inline: var(--s-3); font-size: var(--fs-small); }
.header__toggle { display: none; width: 44px; height: 44px; place-items: center; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--line-dark); }
.header__toggle i { position: relative; width: 17px; height: 1.5px; background: currentColor; transition: background var(--d-1) var(--e-out); }
.header__toggle i::before, .header__toggle i::after { content: ""; position: absolute; left: 0; width: 17px; height: 1.5px; background: currentColor; transition: translate var(--d-2) var(--e-out), rotate var(--d-2) var(--e-out); }
.header__toggle i::before { translate: 0 -5px; }
.header__toggle i::after { translate: 0 5px; }
[aria-expanded="true"] i { background: transparent; }
[aria-expanded="true"] i::before { translate: 0 0; rotate: 45deg; }
[aria-expanded="true"] i::after { translate: 0 0; rotate: -45deg; }

/* Mobile sheet — an explicit menu, not wrapped desktop links */
.sheet {
  position: fixed; inset: 0; z-index: 55;
  display: grid; align-content: center; gap: var(--s-2);
  padding: var(--s-16) var(--margin) var(--s-10);
  background: var(--field-dark);
}
.sheet[hidden] { display: none; }
.sheet a { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding-block: var(--s-1); font-family: var(--font-display); font-size: 1.5rem; text-decoration: none; border-bottom: 1px solid var(--line-dark); }
.sheet a span { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--cyan-400); }
.sheet .btn { margin-top: var(--s-4); }

/* ============================ HERO ============================ */
.hero { position: relative; min-height: 100svh; padding-block: calc(var(--header-h) + var(--s-10)) var(--s-10); background: var(--field-dark); overflow: hidden; display: flex; align-items: center; }
.hero__world { position: absolute; inset: 0; pointer-events: none; }
.hero__light {
  position: absolute; inset-block: 0; left: var(--seam); right: 0;
  background: var(--field-light);
  border-radius: var(--r-aperture) 0 0 var(--r-aperture);
}
/* positioned against .hero__light, so the seam rides its leading edge */
.hero__seam { position: absolute; inset-block: 6%; left: -.5px; width: 1px; background: linear-gradient(180deg, transparent, rgb(34 213 245 / 72%) 28%, rgb(221 251 255 / 86%) 50%, rgb(34 213 245 / 72%) 72%, transparent); box-shadow: 0 0 18px 1px rgb(34 213 245 / 32%); }
.hero__constellation { position: absolute; inset-block: 0; left: 0; width: var(--seam); height: 100%; opacity: .5; }
.hero__constellation.is-mobile { display: none; }

.hero__grid { position: relative; z-index: 2; display: grid; /* percentage of the grid's own content box — --seam resolves against the
     viewport and must not be reused here */
  grid-template-columns: calc(52% - var(--margin)) 1fr; gap: var(--s-8); width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: var(--margin); align-items: center; }
.hero__logo { position: relative; width: min(300px, 62%); margin-bottom: var(--s-5); }
.hero__signal { position: absolute; inset: 0; overflow: visible; }
.hero__signal path { stroke: var(--cyan-400); stroke-width: 3; fill: none; stroke-linecap: round; filter: drop-shadow(0 0 6px rgb(34 213 245 / 70%)); }
.promise { margin-top: var(--s-3); font-family: var(--font-display); font-weight: 500; font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: -0.03em; text-wrap: balance; }
.promise em { font-style: normal; color: var(--cyan-400); }
.hero__lede { margin-top: var(--s-3); max-width: 46ch; }
.hero__meta { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); margin-top: var(--s-5); }
.hero__meta li { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--text-muted); }
.hero__meta i { width: 5px; height: 5px; border-radius: 50%; background: var(--cyan-400); }

.hero__clarity { color: var(--text-dark); padding-left: var(--s-6); }
.hero__statement { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-statement); line-height: var(--lh-snug); letter-spacing: -0.02em; text-wrap: balance; }
.hero__statement em { font-style: italic; color: var(--blue-500); }
.hero__sub { margin-top: var(--s-2); max-width: 40ch; color: var(--text-dim); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); }
.hero__card { position: relative; margin-top: var(--s-6); padding: var(--s-3); border-radius: var(--r-card); background: rgb(255 255 255 / 70%); box-shadow: inset 0 0 0 1px var(--line-light), var(--depth-1); max-width: 380px; }
.hero__card header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s-2); font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); }
.hero__card b { color: var(--blue-500); }

/* ============================ WHY ============================ */
.why__top { display: grid; gap: var(--s-3); max-width: 72ch; }
.divider { display: flex; align-items: center; gap: var(--s-2); margin-block: var(--rhythm-md); color: var(--text-dim); }
.divider::before, .divider::after { content: ""; height: 1px; background: var(--line-light); }
.divider::before { width: 6px; border-radius: 50%; height: 6px; background: var(--blue-500); flex: none; }
.divider::after { flex: 1; }
.why__statement { display: grid; grid-template-columns: 3fr 9fr; gap: var(--s-8); align-items: start; }
.why__statement blockquote { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-statement); line-height: var(--lh-snug); letter-spacing: -0.02em; text-wrap: balance; }
.why__benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); margin-top: var(--rhythm-lg); }
.why__benefits li { display: grid; gap: var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--line-light); }
.why__benefits .idx { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--blue-500); letter-spacing: .1em; }
.why__benefits p { color: var(--text-dim); }

/* ============================ PROOF ============================ */
.proof__head { display: grid; gap: var(--s-3); max-width: 68ch; margin-bottom: var(--s-8); }
.proof__body { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s-8); align-items: start; }
.tabs { display: grid; gap: var(--s-1); }
.tab {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--s-2);
  min-height: 56px; padding: var(--s-2) var(--s-3); text-align: left;
  border-radius: var(--r-control); color: var(--text-muted);
  box-shadow: inset 0 0 0 1px transparent;
  transition: background var(--d-2) var(--e-out), color var(--d-2) var(--e-out), box-shadow var(--d-2) var(--e-out);
}
.tab .n { font-family: var(--font-mono); font-size: var(--fs-label); opacity: .7; }
.tab .t { font-family: var(--font-display); font-size: 1.0625rem; }
.tab:hover { color: var(--text-light); background: rgb(255 255 255 / 4%); }
.tab[aria-selected="true"] { color: var(--text-light); background: rgb(255 255 255 / 6%); box-shadow: inset 0 0 0 1px rgb(34 213 245 / 34%); }
.tab[aria-selected="true"] .n { color: var(--cyan-400); opacity: 1; }
.proof__note { margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--line-dark); font-size: var(--fs-small); color: var(--text-muted); }

.instrument { position: relative; padding: var(--s-4); border-radius: var(--r-card); background: rgb(255 255 255 / 4%); box-shadow: inset 0 0 0 1px var(--line-dark); }
.instrument__meta { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); margin-bottom: var(--s-3); font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.instrument svg { width: 100%; height: auto; }
.instrument .axis { stroke: rgb(255 255 255 / 14%); stroke-width: 1; }
.instrument .base { stroke: rgb(145 160 181 / 34%); stroke-width: 1.6; fill: none; }
.instrument .trace { stroke: var(--cyan-400); stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgb(34 213 245 / 45%)); }
.instrument .node { fill: var(--cyan-400); }
.instrument .band { fill: rgb(23 95 234 / 16%); }
.instrument [data-state] { display: none; }
.instrument [data-state].is-active { display: block; }
.instrument__caption { margin-top: var(--s-3); font-size: var(--fs-small); color: var(--text-muted); }

/* ============================ CAPABILITIES ============================ */
.cap__head { display: grid; gap: var(--s-3); max-width: 68ch; margin-bottom: var(--s-8); }
.cap__bus { position: relative; margin-bottom: var(--s-6); }
.cap__line { position: absolute; left: 0; right: 0; top: 26px; height: 1px; background: var(--line-light); }
.cap__stations { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); }
.station { position: relative; display: grid; gap: var(--s-2); justify-items: start; padding-top: var(--s-6); text-align: left; color: var(--text-dim); transition: color var(--d-2) var(--e-out); }
.station::before {
  content: ""; position: absolute; top: 20px; width: 13px; height: 13px; border-radius: 50%;
  background: var(--white-100); box-shadow: inset 0 0 0 1.5px var(--text-dim);
  transition: box-shadow var(--d-2) var(--e-out), scale var(--d-2) var(--e-out);
}
.station[aria-selected="true"] { color: var(--text-dark); }
.station[aria-selected="true"]::before { box-shadow: inset 0 0 0 4px var(--blue-500), 0 0 0 5px rgb(34 213 245 / 20%); scale: 1.15; }
.station .n { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .1em; color: var(--blue-500); }
.station .t { font-family: var(--font-display); font-size: var(--fs-h3); line-height: var(--lh-snug); }
.cap__panel { display: grid; grid-template-columns: 7fr 5fr; gap: var(--s-8); padding: var(--s-6); border-radius: var(--r-card); background: rgb(255 255 255 / 68%); box-shadow: inset 0 0 0 1px var(--line-light), var(--depth-1); }
.cap__panel[hidden] { display: none; }
.cap__panel h3 { margin-bottom: var(--s-2); }
.cap__panel p { color: var(--text-dim); max-width: var(--measure); }
.cap__list { display: grid; gap: var(--s-1); margin-top: var(--s-3); }
.cap__list li { position: relative; padding-left: var(--s-3); color: var(--text-dim); font-size: var(--fs-small); }
.cap__list li::before { content: ""; position: absolute; left: 0; top: .68em; width: 6px; height: 1px; background: var(--blue-500); }
.cap__side { display: grid; gap: var(--s-2); align-content: start; padding-left: var(--s-4); border-left: 1px solid var(--line-light); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips span { padding: 5px var(--s-1); border-radius: 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); box-shadow: inset 0 0 0 1px var(--line-light); }

/* ============================ TECHNOLOGY ============================ */
.tech__head { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: end; justify-content: space-between; margin-bottom: var(--s-8); }
.tech__flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--gutter); }
.tech__group { display: grid; gap: var(--s-2); align-content: start; padding-top: var(--s-3); border-top: 1px solid var(--line-dark); }
.tech__group h3 { display: flex; align-items: center; gap: var(--s-1); font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--tr-label); text-transform: uppercase; font-weight: 500; color: var(--cyan-400); }
.tech__group ul { display: grid; gap: 6px; }
.tech__group li { font-size: var(--fs-small); color: var(--text-muted); }
.tech__note { margin-top: var(--s-6); font-size: var(--fs-small); color: var(--text-muted); max-width: var(--measure); }

/* ============================ METHOD ============================ */
.method__head { display: grid; gap: var(--s-3); max-width: 68ch; margin-bottom: var(--rhythm-md); }
.method__path { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); }
.method__path::before { content: ""; position: absolute; left: 6%; right: 6%; top: 7px; height: 1px; background: linear-gradient(90deg, var(--blue-500), var(--cyan-400)); opacity: .45; }
.step { position: relative; display: grid; gap: var(--s-2); align-content: start; padding-top: var(--s-6); }
.step::before { content: ""; position: absolute; top: 1px; left: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--white-100); box-shadow: inset 0 0 0 3px var(--blue-500); }
.step .n { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .1em; color: var(--blue-500); }
.step p { color: var(--text-dim); font-size: var(--fs-small); }

/* ============================ CONSULT ============================ */
.consult { background: var(--field-cta); }
.consult__inner { display: grid; grid-template-columns: 7fr 5fr; gap: var(--s-10); align-items: center; }
.consult h2 { margin-block: var(--s-3) var(--s-3); }
.consult__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); }
.consult__list { display: grid; gap: var(--s-2); padding: var(--s-4); border-radius: var(--r-card); background: rgb(255 255 255 / 5%); box-shadow: inset 0 0 0 1px var(--line-dark); }
.consult__list li { display: grid; grid-template-columns: auto 1fr; gap: var(--s-2); align-items: start; font-size: var(--fs-small); color: var(--text-muted); }
.consult__list svg { width: 15px; height: 15px; margin-top: 4px; flex: none; stroke: var(--cyan-400); stroke-width: 2; fill: none; }

/* ============================ FOOTER ============================ */
.footer {
  min-height: 100svh;
  display: grid;
  align-content: center;
  background: var(--ink-950);
  padding-block: var(--s-12) var(--s-6);
}
.footer__grid { display: grid; grid-template-columns: 4fr 3fr 5fr; gap: var(--s-8); }
.footer h2 { margin-block: var(--s-3) var(--s-2); }
.footer__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-6); }
.footer__cols h3 { margin-bottom: var(--s-2); font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--tr-label); text-transform: uppercase; font-weight: 500; color: var(--text-muted); }
.footer__cols a { display: flex; align-items: center; min-height: 44px; font-size: var(--fs-small); text-decoration: none; color: var(--text-muted); transition: color var(--d-1) var(--e-out); }
.footer__cols a:hover { color: var(--cyan-400); }
.contact { display: grid; gap: var(--s-3); }
.contact dt { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.contact dd { margin: 4px 0 0; font-size: var(--fs-small); }
.verify { display: inline-block; margin-left: var(--s-1); padding: 3px 6px; border-radius: 5px; font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--signal); background: rgb(255 182 92 / 12%); box-shadow: inset 0 0 0 1px rgb(255 182 92 / 30%); }
.footer__base { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); justify-content: space-between; margin-top: var(--s-10); padding-top: var(--s-4); border-top: 1px solid var(--line-dark); font-size: var(--fs-small); color: var(--text-muted); }

/* ============================ SPINE REVEAL ============================ */
/* Scoped to .js so the page is complete when scripting is unavailable. */
.js .reveal { opacity: 0; translate: 0 14px; transition: opacity var(--d-3) var(--e-out), translate var(--d-3) var(--e-out); }
.js .reveal.is-in { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; translate: 0 0; } }

/* ============================ RESPONSIVE ============================ */
@media (max-width: 1279px) {
  .hero__grid { gap: var(--s-6); }
  .hero__clarity { padding-left: var(--s-4); }
  .cap__panel { grid-template-columns: 1fr; gap: var(--s-4); }
  .cap__side { padding-left: 0; padding-top: var(--s-3); border-left: 0; border-top: 1px solid var(--line-light); }
}

/* Short landscape viewports (1280x720, 1024x768): the hero has to hold the
   promise, the lede, the actions and the card above the fold. Compress the
   vertical rhythm and the logo — never the headline. */
@media (min-width: 901px) and (max-height: 800px) {
  .hero { padding-block: calc(var(--header-h) + var(--s-3)) var(--s-4); }
  .hero__logo { width: min(230px, 46%); margin-bottom: var(--s-2); }
  .promise { margin-top: var(--s-2); }
  .hero__lede { margin-top: var(--s-2); }
  .hero__meta { margin-top: var(--s-3); }
  .hero__sub { margin-top: var(--s-2); }
  .hero__actions { margin-top: var(--s-3); }
  .hero__card { margin-top: var(--s-3); padding: var(--s-2); }
}

/* 14-inch Windows laptops at 150% scaling commonly expose roughly 1280x586
   CSS px after browser chrome and the taskbar. */
@media (min-width: 901px) and (max-height: 640px) {
  :root {
    --header-h: 60px;
    --section-y: 56px;
    --rhythm-md: 28px;
    --rhythm-lg: 32px;
  }
  .header { top: var(--s-1); }
  .hero {
    align-items: flex-start;
    padding-block: calc(var(--header-h) + var(--s-3)) var(--s-2);
  }
  .hero__grid { align-items: start; }
  .hero__logo { width: min(170px, 38%); margin-bottom: var(--s-1); }
}

/* Owner, 21 Oct 2026: a 14-inch laptop must show the same hero as a large screen, entirely in view. Since the hero
   is no longer pinned it has to fit one screen by itself: headline and statement scale with the screen height as
   well as the width, spacing follows the height, and the bottom padding clears the next section's rounded edge
   (it overlaps the hero by --r-aperture). Screens tall enough for the full sizes are unchanged. */
@media (min-width: 901px) {
  .hero { padding-block: calc(var(--header-h) + clamp(12px, 4.5svh, 80px)) calc(var(--r-aperture) + clamp(8px, 2.5svh, 48px)); }
  .promise { font-size: clamp(2.125rem, min(4.6vw, 7.8svh), 4.25rem); }
  .hero__statement { font-size: clamp(1.25rem, min(2.4vw, 4.4svh), 2.25rem); }
}
/* Short screens: the logo artwork fills only rows 210-387 of its 1024x683 image, so the box shows rows 175-435
   (the artwork itself is never altered). The signal overlay and the loader's logo move by the same 175 rows, so
   the line still starts inside the logo and the loader hands over without a jump. */
@media (min-width: 901px) and (max-height: 800px) {
  .hero__logo { display: flow-root; }
  .hero__logo > picture { display: block; margin-block: -17.09% -24.22%; }
  .hero__signal { inset: auto; top: -67.31%; left: 0; width: 100%; height: auto; aspect-ratio: 1024 / 683; }
  .loader__logo > picture { display: block; margin-top: -17.09%; }
}
@media (min-width: 901px) and (max-height: 640px) { .cinema .hero .hero__cue { margin-top: var(--s-2); } }

@media (max-width: 1023px) {
  .header__nav { display: none; }
  .header .btn { display: none; }
  .header__toggle { display: grid; margin-left: auto; }
  .why__statement { grid-template-columns: 1fr; gap: var(--s-3); }
  .proof__body { grid-template-columns: 1fr; }
  .tabs { grid-template-columns: repeat(4, 1fr); grid-auto-flow: column; }
  .tech__flow { grid-template-columns: repeat(3, 1fr); row-gap: var(--s-6); }
  .consult__inner { grid-template-columns: 1fr; gap: var(--s-6); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .contact { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); }
}

/* Portrait: the seam turns horizontal and the light world becomes the clarity
   block itself, so reading order stays promise -> explanation -> CTA. */
@media (max-width: 900px) {
  .hero { display: block; min-height: 0; padding-block: calc(var(--header-h) + var(--s-8)) 0; }
  .hero__light { display: none; }
  .hero__constellation { display: none; }
  .hero__constellation.is-mobile { display: block; width: 100%; height: 62%; inset-block: 0 auto; }
  .hero__grid { display: block; padding-inline: 0; }
  .hero__left { padding-inline: var(--margin); }
  .hero__clarity {
    position: relative; z-index: 2;
    margin-top: var(--rhythm-lg); padding: var(--rhythm-md) var(--margin) var(--s-10);
    background: var(--field-light);
    border-radius: var(--r-aperture) var(--r-aperture) 0 0;
  }
  .hero__clarity::before {
    content: ""; position: absolute; inset: 0 12% auto; height: 2px;
    background: linear-gradient(90deg, transparent, var(--cyan-400) 30%, var(--cyan-400) 70%, transparent);
    box-shadow: 0 0 20px 1px rgb(34 213 245 / 45%);
  }
  .hero__card { max-width: none; }
  .why__benefits { grid-template-columns: 1fr; gap: var(--s-5); }
  .cap__stations { grid-template-columns: repeat(2, 1fr); row-gap: var(--s-5); }
  .cap__line { display: none; }
  .method__path { grid-template-columns: 1fr; gap: var(--s-5); }
  .method__path::before { left: 6px; right: auto; top: 6%; bottom: 6%; width: 1px; height: auto; background: linear-gradient(180deg, var(--blue-500), var(--cyan-400)); }
  .step { padding-top: 0; padding-left: var(--s-5); }
  .step::before { top: 5px; }
}

@media (max-width: 767px) {
  .tabs { grid-template-columns: 1fr; grid-auto-flow: row; }
  .tech__flow { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .contact { grid-template-columns: 1fr; }
  .btn { width: 100%; }
  .hero__actions .btn, .consult__actions .btn { width: 100%; }
}

/* ============================ GATE 3 RESPONSIVE POLISH ============================
   Fixes found by reviewing the five exported frames, not by guesswork. */

/* 1. The meta row wrapped with an orphan at 1024 and 390. Below the desktop
      nav breakpoint it becomes a clean stack instead of a ragged wrap. */
@media (max-width: 1100px) {
  .hero__meta { flex-direction: column; gap: var(--s-1); }
}

/* 2. The two hero CTAs wrapped to mismatched widths between 901 and 1279.
      When they wrap they now fill the row, so the pair reads as deliberate. */
@media (min-width: 901px) and (max-width: 1439px) {
  .hero__actions .btn { flex: 1 1 auto; padding-inline: var(--s-3); }
}

/* 3. Portrait: the constellation was crossing the headline and the lede — the
      background had become the subject. It is now confined to the field above
      the copy, faded out at its lower edge, and dropped in opacity. */
@media (max-width: 900px) {
  .hero__constellation.is-mobile {
    /* viewport-relative, not a share of the hero: the hero also contains the
       light world, so a percentage put the field straight over the copy */
    height: 40vh;
    opacity: .26;
    -webkit-mask-image: linear-gradient(to bottom, #000 0 45%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 0 45%, transparent 100%);
  }
  /* slice upscales the 390-wide artwork to ~2x at 768, which coarsens the
     links far more than the nodes; thin them back toward their drawn weight */
  .hero__constellation.is-mobile path { stroke-width: .7; }
  /* 4. The logo PNG carries its own transparent margin, which read as a hole
        between the mark and the eyebrow at portrait sizes. */
  .hero__logo { margin-bottom: var(--s-2); }
  .hero { padding-top: calc(var(--header-h) + var(--s-5)); }
}

/* 5. At 768 the logo sat small against a wide canvas; give it more presence
      without touching the phone size. */
@media (min-width: 601px) and (max-width: 900px) {
  .hero__logo { width: min(340px, 46%); }
}