/* ============================================================================
   Dinamo Link — the routed board.
   Theme layer on top of scrollcraft.css. The engine owns [data-sc-*]; this file
   owns the world (one continuous circuit board), the route spine, and the page's
   own markup. Locked tokens: canvas #030305 (near-OLED black), crimson #f0384f, Anybody 400
   display, IBM Plex Sans body, IBM Plex Mono labels, PCB trace-and-via motif.
   ========================================================================== */

@property --power { syntax: "<number>"; inherits: true; initial-value: 0; }

:root {
  --sc-canvas:     #030305;
  --sc-surface:    #0a0d13;
  --sc-ink:        #efe9dd;
  --sc-ink-soft:   #c9c1b2;
  --sc-accent:     #f0384f;
  --sc-accent-ink: #030305;

  --sc-font-display: "Anybody", system-ui, sans-serif;
  --sc-font-text:    "IBM Plex Sans", system-ui, sans-serif;
  --sc-font-mono:    "IBM Plex Mono", ui-monospace, monospace;

  --sc-hairline:        rgb(176 168 152 / 0.13);
  --sc-hairline-strong: rgb(176 168 152 / 0.24);
  --ghost:  #1a2231;               /* an unpowered trace                       */
  --copper: rgb(140 170 215 / 0.5);/* board silkscreen, never text             */

  --sc-r-sm: 3px; --sc-r-md: 5px; --sc-r-lg: 8px; --sc-r-pill: 999px;
  --sc-measure: 60ch;

  --bar: 60px;
  --spine-w: clamp(24px, 4.6vw, 62px);
  --gut: clamp(1.25rem, 3.4vw, 3.25rem);
  --maxw: 1140px;
}

html { scroll-padding-top: calc(var(--bar) + 16px); }

body {
  font-weight: 400;
  letter-spacing: 0.002em;      /* light-on-dark compensation                  */
  padding-left: var(--spine-w);
  background: var(--sc-canvas);
}

/* Grain, carried over from the previous build: the locked treatment. */
.sc-grain { opacity: 0.16; z-index: 3; }
.sc-grain::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------- the world --
   One board, fixed, never cut. It arrives unpowered and energises as the
   signal travels: --power is written by site.js from page progress. */
.board {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: var(--sc-canvas); overflow: hidden;
}
.board__grid, .board__vias, .board__diag {
  position: absolute; inset: -14vh -14vw;
  transform: translate3d(0, var(--bpy, 0px), 0);
  will-change: transform;
}
.board__grid {
  background-image:
    linear-gradient(90deg, rgb(126 160 210 / calc(0.022 + 0.055 * var(--power))) 1px, transparent 1px),
    linear-gradient(0deg,  rgb(126 160 210 / calc(0.018 + 0.042 * var(--power))) 1px, transparent 1px);
  background-size: 104px 104px;
}
.board__diag {
  background-image: repeating-linear-gradient(
    45deg,
    rgb(126 160 210 / calc(0.010 + 0.030 * var(--power))) 0 1px,
    transparent 1px 88px);
}
.board__vias {
  background-image: radial-gradient(
    circle 2.5px at 52px 52px,
    rgb(150 180 230 / calc(0.05 + 0.16 * var(--power))) 58%, transparent 60%);
  background-size: 104px 104px;
}
/* The powered board carries a faint crimson bloom; at rest there is none. */
.board__heat {
  position: absolute; inset: 0;
  background: radial-gradient(80vw 60vh at 8vw 40vh,
    rgb(240 56 79 / calc(0.055 * var(--power))), transparent 68%);
}

.board__photo { display: none; }
.board__opt {
  position: absolute; inset: -12vh -10vw;
  /* Deliberately larger than cover. At cover a 16:9 frame in a 16:9 box has no
     slack, so background-position cannot move anything and the ground cannot be
     composed. The overscale buys room to keep the lit structure off the copy. */
  background-size: auto 132%; background-repeat: no-repeat;
  transform: translate3d(0, var(--bpy, 0px), 0);
  /* Light adds; it does not fade. The frames are true black at their edges,
     so screen makes those pixels vanish and only the lit structure survives.
     This is what lets the ground run full-bleed with no mask over the copy. */
  mix-blend-mode: screen;
  opacity: 0; transition: opacity 620ms var(--sc-ease-out);
  will-change: opacity;
}
.board__opt[data-on] { opacity: calc(var(--o, 1) * (0.4 + 0.6 * var(--power))); }

/* The close screen's circuit panel is a photograph of the world we just left.
   It goes; the crossing-trails ground fills that space instead. */
.close__feed { display: none; }
.close__grid { grid-template-columns: minmax(0, 1fr); }

/* hero - the lens rim held to the right edge, clear of the headline */
.board__opt--hero {
  background-image: url("assets/optics/o4.webp"); background-position: 120% 60%; --o: 1;
}
/* who - a flare streak sitting under the matrix, echoing its rules */
.board__opt--who {
  background-image: url("assets/optics/o6.webp"); background-position: 58% 90%; --o: 0.85;
}
/* how - aperture blades, right of the route and deliberately quiet */
.board__opt--how {
  background-image: url("assets/optics/o5.webp"); background-position: 86% 64%; --o: 0.9;
}
/* nudge + operator - one trail running low, below the terminal */
.board__opt--op {
  background-image: url("assets/optics/o1.webp"); background-position: 54% 0%; --o: 0.8;
}
/* faq - a trail receding to the upper right, away from the question columns */
.board__opt--faq {
  background-image: url("assets/optics/o2.webp"); background-position: 40% 0%; --o: 0.85;
}
/* close - two trails crossing and blooming at the join */
.board__opt--close {
  background-image: url("assets/optics/o3.webp"); background-position: 170% 100%; --o: 0.7;
}

@media (max-width: 860px) {
  .board__opt--hero  { background-image: url("assets/optics/o4-m.webp"); background-position: 76% 50%; }
  .board__opt--who   { background-image: url("assets/optics/o6-m.webp"); }
  .board__opt--how   { background-image: url("assets/optics/o5-m.webp"); }
  .board__opt--op    { background-image: url("assets/optics/o1-m.webp"); }
  .board__opt--faq   { background-image: url("assets/optics/o2-m.webp"); }
  .board__opt--close { background-image: url("assets/optics/o3-m.webp"); }
}

@media (prefers-reduced-motion: reduce) {
  .board__opt { transition: none; transform: none; }
}

/* With the panel gone the close copy has the full stage, so it needs its own
   measure back - a 72ch line is not a paragraph, it is a banner. */
.close__body { max-width: 54ch; }

/* ------------------------------------------------------------------- bar -- */
.bar {
  position: fixed; inset: 0 0 auto 0; height: var(--bar); z-index: 60;
  display: flex; align-items: center; gap: var(--gut);
  padding-inline: clamp(0.9rem, 2.2vw, 1.75rem);
  /* Bar and spine are one material, and both fade to nothing at the edge that
     meets the page. A flat tint dimmed the ground behind them by 8-9 luminance
     points and by different amounts each, which is what made them read as two
     panels laid on top. A scrim that reaches zero AT the boundary leaves no
     step to see, while still protecting the nav from a lit frame passing under
     it. Measured: edge step 8.4 -> 1.5, nav worst contrast 4.93:1. */
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--sc-canvas) 95%, transparent),
    color-mix(in oklab, var(--sc-canvas) 55%, transparent) 58%,
    transparent);
  backdrop-filter: blur(18px) saturate(1.05);
  border-bottom: 1px solid var(--sc-hairline);
}
.bar__mark { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; flex: none; }
.bar__mark .mk { width: 26px; height: 26px; color: var(--sc-accent); flex: none; }
.bar__mark .wordmark { height: 15px; width: auto; color: var(--sc-ink); }
.bar__mark:hover .mk, .bar__mark:focus-visible .mk { color: color-mix(in oklab, var(--sc-accent) 84%, white); }

.bar__nav { display: flex; gap: clamp(1rem, 2.4vw, 2.25rem); margin-inline: auto; }
.bar__nav a {
  font-family: var(--sc-font-mono); font-size: 0.8rem; letter-spacing: 0.03em;
  /* Full ink, not the muted tone. The bar is translucent so the ground runs
     behind these links, and the muted tone could not survive a lit frame
     passing under it. The references all reserve their muted tone for
     metadata and set nav in the full ink for exactly this reason. */
  color: var(--sc-ink); text-decoration: none; padding: 6px 2px;
  border-bottom: 1px solid transparent;
  transition: color 140ms var(--sc-ease-out), border-color 140ms var(--sc-ease-out);
}
.bar__nav a:hover, .bar__nav a:focus-visible { color: var(--sc-ink); border-bottom-color: var(--sc-accent); }
.bar__nav a:active { transform: translateY(1px); }

/* ---------------------------------------------------------------- button -- */
.btn {
  display: inline-flex; align-items: center; gap: 0.55em;
  font-family: var(--sc-font-mono); font-weight: 500; font-size: 0.85rem;
  letter-spacing: 0.02em; white-space: nowrap; text-decoration: none;
  padding: 0.62em 1.1em; border-radius: var(--sc-r-md); border: 1px solid transparent;
  transition: background-color 140ms var(--sc-ease-out), color 140ms var(--sc-ease-out),
              border-color 140ms var(--sc-ease-out);
}
.btn--solid {
  background: var(--sc-accent); color: var(--sc-accent-ink); font-weight: 500;
  border-color: var(--sc-accent);
}
.btn--solid:hover, .btn--solid:focus-visible { background: color-mix(in oklab, var(--sc-accent) 86%, white); }
.btn--solid:active { transform: translateY(1px); }
.btn--lg { font-size: 0.95rem; padding: 0.8em 1.45em; }
.btn::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: currentColor; opacity: 0.55;
}

/* ------------------------------------------------------- the route spine --
   The signature move. One PCB trace, the page's only route readout: the
   crimson grows to the scroll position, the head rides the dog-legs, and a via
   latches on the moment you pass it and never goes dark again. */
.spine {
  position: fixed; left: 0; top: var(--bar); width: var(--spine-w);
  height: calc(100svh - var(--bar)); z-index: 40;
  border-right: 1px solid var(--sc-hairline);
  /* same material as the bar, deliberately: see the note there */
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--sc-canvas) 95%, transparent),
    color-mix(in oklab, var(--sc-canvas) 55%, transparent) 58%,
    transparent);
  backdrop-filter: blur(18px) saturate(1.05);
}
.spine__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.spine__ghost { fill: none; stroke: var(--ghost); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.spine__live  { fill: none; stroke: var(--sc-accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.spine__head  { fill: var(--sc-accent); }
.spine__vias { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.spine__vias li { position: absolute; }
.spine__via {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
  width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 50%; text-decoration: none;
}
.spine__via::after {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--sc-canvas); border: 2px solid var(--ghost);
  transition: background-color 260ms var(--sc-ease-out), border-color 260ms var(--sc-ease-out);
}
.spine__via.on::after {
  border-color: var(--sc-accent); background: var(--sc-accent);
}
.spine__via:hover::after { border-color: var(--sc-accent); }
.spine__label {
  position: absolute; left: calc(100% + 4px); top: 50%; translate: 0 -50%;
  font-family: var(--sc-font-mono); font-size: 0.72rem; letter-spacing: 0.02em;
  color: var(--sc-ink); white-space: nowrap; pointer-events: none;
  padding: 3px 8px; border-radius: var(--sc-r-sm);
  background: color-mix(in oklab, var(--sc-canvas) 90%, transparent);
  border: 1px solid var(--sc-hairline-strong);
  opacity: 0; transition: opacity 140ms var(--sc-ease-out);
}
.spine__via:hover .spine__label, .spine__via:focus-visible .spine__label { opacity: 1; }

/* ---------------------------------------------------------------- layout -- */
main { position: relative; z-index: 1; }
.pad { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
section { scroll-margin-top: calc(var(--bar) + 12px); }

h1, h2, h3 { margin: 0; font-family: var(--sc-font-display); font-weight: 400; }
p { margin: 0; }

/* mono section heading, trace rule, terminal via */
.kick {
  font-family: var(--sc-font-mono); font-weight: 500; font-size: 0.85rem;
  letter-spacing: 0.06em; color: var(--sc-ink); text-transform: none;
  display: flex; align-items: center; gap: 14px;
}
.kick::after {
  content: ""; flex: 1 1 auto; height: 1px; max-width: 320px;
  background: linear-gradient(90deg, var(--sc-hairline-strong), transparent);
}
.kick b { color: var(--sc-accent); font-weight: 500; }

.h-display { font-size: clamp(2.1rem, 1.3rem + 2.8vw, 3.8rem); line-height: 1.0; letter-spacing: -0.026em; }

/* ----------------------------------------------------------------- hero -- */
.hero {
  min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
  position: relative; padding-block: calc(var(--bar) + 3rem) 3rem;
}
.heromark {
  position: absolute; top: 50%; right: max(-150px, -13vw);
  width: clamp(320px, 42vw, 560px); height: auto;
  margin-top: calc(clamp(320px, 42vw, 560px) / -2);
  color: var(--sc-accent); opacity: calc(0.05 + 0.045 * var(--power));
  z-index: 0; pointer-events: none; will-change: transform;
}
.hero__inner { position: relative; z-index: 1; }
.hero h1 {
  font-size: clamp(2.6rem, 1.1rem + 6vw, 6.6rem);
  line-height: 0.98; letter-spacing: -0.03em; max-width: 15ch; text-wrap: balance;
}
.caret {
  display: inline-block; width: 0.46ch; height: 0.82em; vertical-align: -0.06em;
  background: var(--sc-accent); margin-left: 0.2ch; translate: 0 0;
}
.hero__sub {
  font-family: var(--sc-font-mono); font-size: clamp(0.95rem, 0.86rem + 0.4vw, 1.1rem);
  color: var(--sc-ink-soft); margin-top: clamp(1.4rem, 2.6vh, 2.2rem); max-width: 46ch;
}
.hero__sub::before { content: "> "; color: var(--sc-accent); }
.hero__cta { margin-top: clamp(1.8rem, 3.4vh, 2.9rem); }

/* Hero boot: the headline assembles word by word, then one crimson trace
   draws in from the left edge, dog-legs up, and lands a via beside the CTA.
   site.js writes the path and length; motion lives here. Under reduced
   motion the trace is set fully drawn and none of this animates. */
.hero__trace {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; overflow: visible;
}
.hero__trace-path {
  fill: none; stroke: var(--sc-accent); stroke-width: 2;
}
.hero__trace-via {
  fill: var(--sc-accent); transform-box: fill-box; transform-origin: center;
  transform: scale(0);
}
.hero.hero--assemble h1 { animation: none; }
.hero--assemble h1 .w {
  display: inline-block; opacity: 0;
  transform: translate3d(0, 0.5em, 0);
  animation: dl-word 520ms var(--sc-ease-out) forwards;
  animation-delay: calc(var(--i) * 34ms);
}
.hero--traced .hero__trace-path { animation: dl-draw 720ms cubic-bezier(0.6, 0, 0.3, 1) 420ms forwards; }
.hero--traced .hero__trace-via {
  animation: dl-via-pop 380ms var(--sc-ease-out) 1040ms forwards,
             dl-via-pulse 3s ease-in-out 1700ms infinite;
}
@keyframes dl-word { to { opacity: 1; transform: none; } }
@keyframes dl-draw { to { stroke-dashoffset: 0; } }
@keyframes dl-via-pop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes dl-via-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* ------------------------------------------------- who this is for: matrix -
   A fit matrix, not a card grid: one via, one category, one line, per row. */
.who { padding-block: clamp(5rem, 12vh, 9rem) clamp(4rem, 10vh, 7.5rem); }
.who__line {
  font-family: var(--sc-font-mono); font-size: 0.95rem; color: var(--sc-ink-soft);
  margin-top: 0.9rem; max-width: 54ch;
}
.matrix { margin-top: clamp(1.4rem, 3vh, 2.2rem); border-top: 1px solid var(--sc-hairline); }
.matrix__row {
  display: grid; grid-template-columns: 30px minmax(190px, 0.85fr) 1.6fr;
  gap: 0 clamp(14px, 2.2vw, 36px); align-items: baseline;
  padding-block: clamp(0.85rem, 1.8vh, 1.3rem);
  border-bottom: 1px solid var(--sc-hairline);
}
.matrix__via {
  grid-row: 1 / span 1; align-self: center; justify-self: start;
  width: 10px; height: 10px; border-radius: 50%; margin-top: 0.15em;
  background: var(--sc-canvas); border: 2px solid var(--ghost);
  transition: background-color 300ms var(--sc-ease-out), border-color 300ms var(--sc-ease-out);
}
.matrix__row.on .matrix__via {
  background: var(--sc-accent); border-color: var(--sc-accent);
}
.matrix__row h3 {
  font-family: var(--sc-font-mono); font-weight: 500; font-size: 0.95rem;
  letter-spacing: 0.01em; color: var(--sc-ink); line-height: 1.45;
}
.matrix__row p { color: var(--sc-ink-soft); font-size: 1rem; line-height: 1.55; max-width: 54ch; }

/* --------------------------------------------------------- how: the route --
   The peak. Four numbered phases wired along one trace; the signal travels it
   under the hand and each via latches as it passes. */
.how__stage { display: flex; flex-direction: column; justify-content: center; padding-block: calc(var(--bar) + 1.5rem) 2rem; }
.how__head { margin-bottom: clamp(1.6rem, 4vh, 3rem); }
.how h2 { margin-top: 0.9rem; }
.route { position: relative; }
.route__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.route__ghost { fill: none; stroke: var(--ghost); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.route__live  { fill: none; stroke: var(--sc-accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.route__pkt   { fill: var(--sc-accent); }

.route__grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 30px); align-items: start; }
.step { position: relative; padding-top: 26px; }
.route__grid > .step:nth-child(1) { margin-top: clamp(48px, 9vh, 104px); }
.route__grid > .step:nth-child(3) { margin-top: clamp(48px, 9vh, 104px); }
.step__via {
  position: absolute; top: 0; left: 0; width: 13px; height: 13px; border-radius: 50%;
  background: var(--sc-canvas); border: 2px solid var(--ghost);
  transition: background-color 300ms var(--sc-ease-out), border-color 300ms var(--sc-ease-out);
}
.step.on .step__via {
  background: var(--sc-accent); border-color: var(--sc-accent);
}
.step__n {
  display: block; font-family: var(--sc-font-mono); font-size: 0.78rem;
  letter-spacing: 0.1em; color: var(--sc-ink-soft); margin-bottom: 0.55rem;
  font-variant-numeric: tabular-nums;
  transition: color 300ms var(--sc-ease-out);
}
.step.on .step__n { color: var(--sc-accent); }
.step p { font-size: clamp(0.98rem, 0.92rem + 0.3vw, 1.15rem); line-height: 1.5; color: var(--sc-ink); text-wrap: pretty; }

/* --------------------------------------------------------------- nudge -- */
.nudge { padding-block: clamp(3rem, 7vh, 5rem); }
.nudge__inner {
  border-top: 1px solid var(--sc-hairline); border-bottom: 1px solid var(--sc-hairline);
}
.nudge__line {
  font-family: var(--sc-font-mono); font-size: clamp(0.9rem, 0.85rem + 0.3vw, 1.05rem);
  color: var(--sc-ink); padding-block: clamp(1rem, 2.4vh, 1.6rem);
}
.nudge__line::before { content: "// "; color: var(--sc-accent); }
.nudge__line a { color: var(--sc-accent); text-decoration: underline; text-underline-offset: 0.24em; }
.nudge__line a:hover { color: color-mix(in oklab, var(--sc-accent) 84%, white); }

/* ------------------------------------------------------- operator: term --
   A terminal surface that is actually running: the note types itself when the
   act arrives (site.js), over scanlines and one slow sweep. No baked media. */
.op { padding-block: clamp(5rem, 11vh, 8rem); }
.term { position: relative; }
.term__bar {
  display: flex; align-items: center; gap: 14px;
  padding: 0.85rem clamp(1rem, 2.4vw, 1.8rem);
  position: relative; z-index: 3;
}
.term__body { padding: clamp(1.2rem, 3vh, 2rem) clamp(1rem, 2.4vw, 1.8rem); position: relative; z-index: 3; }
.term__body p { color: var(--sc-ink-soft); max-width: var(--sc-measure); line-height: 1.72; text-wrap: pretty; }
.term__body p + p { margin-top: 1.05rem; }
.term__body p::before { content: "> "; color: var(--sc-accent); font-family: var(--sc-font-mono); }

/* ----------------------------------------------------------------- faq -- */
.faq { padding-block: clamp(4.5rem, 10vh, 7.5rem); }
.faq__grid {
  margin-top: clamp(1.2rem, 3vh, 2rem);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(20px, 3.4vw, 56px);
  border-top: 1px solid var(--sc-hairline);
}
.faq details { border-bottom: 1px solid var(--sc-hairline); }
.faq summary {
  list-style: none; cursor: pointer; position: relative;
  padding: clamp(0.9rem, 2vh, 1.15rem) 1.6rem clamp(0.9rem, 2vh, 1.15rem) 26px;
  font-family: var(--sc-font-mono); font-size: 0.92rem; color: var(--sc-ink);
  transition: color 140ms var(--sc-ease-out);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: ""; position: absolute; left: 0; top: 50%; translate: 0 -50%;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--sc-canvas); border: 2px solid var(--ghost);
  transition: background-color 180ms var(--sc-ease-out), border-color 180ms var(--sc-ease-out);
}
.faq summary::after {
  content: ""; position: absolute; right: 4px; top: 50%; translate: 0 -50%;
  width: 11px; height: 11px;
  background:
    linear-gradient(var(--sc-ink-soft), var(--sc-ink-soft)) 50% 50% / 11px 1px no-repeat,
    linear-gradient(var(--sc-ink-soft), var(--sc-ink-soft)) 50% 50% / 1px 11px no-repeat;
}
.faq details[open] summary::after {
  background: linear-gradient(var(--sc-accent), var(--sc-accent)) 50% 50% / 11px 1px no-repeat;
}
.faq details[open] summary::before, .faq summary:hover::before { background: var(--sc-accent); border-color: var(--sc-accent); }
.faq summary:hover { color: var(--sc-accent); }
.faq details[open] summary { color: var(--sc-ink); }
.faq details p {
  color: var(--sc-ink-soft); padding: 0 1.6rem clamp(1rem, 2.2vh, 1.35rem) 26px;
  max-width: 52ch; line-height: 1.65;
}

/* ------------------------------------------------------ close: for brands --
   The route terminates here, and the page stops with content on the screen. */
.close__stage { display: flex; flex-direction: column; justify-content: space-between; padding-top: calc(var(--bar) + 2rem); }
.close__inner { padding-bottom: clamp(2rem, 5vh, 3.5rem); flex: 1; display: flex; align-items: center; }
.close__grid {
  display: grid;
  gap: clamp(24px, 4vw, 64px); align-items: center; width: 100%;
}
.close__feed {
  position: relative; margin: 0; overflow: hidden; aspect-ratio: 16 / 9;
  border: 1px solid var(--sc-hairline); border-radius: var(--sc-r-lg);
  background: var(--sc-surface);
}
.close__feed video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) {
  .close__grid { grid-template-columns: minmax(0, 1fr); }
  .close__feed { display: none; }
}
.close__inner h2 { margin-bottom: 1.1rem; }
.close__body { color: var(--sc-ink-soft); font-size: clamp(1rem, 0.94rem + 0.35vw, 1.18rem); line-height: 1.62; text-wrap: pretty; }
.close__cta { margin-top: clamp(1.6rem, 3.4vh, 2.4rem); display: inline-flex; }

.foot { border-top: 1px solid var(--sc-hairline); padding-block: clamp(1.2rem, 3vh, 1.9rem); }
.foot__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.lockup { display: inline-flex; align-items: center; gap: 12px; }
.lockup .mk { width: 30px; height: 30px; color: var(--sc-accent); flex: none; }
.lockup .wordmark { height: 17px; width: auto; color: var(--sc-ink); }
.foot__sep { color: var(--ghost); }
.foot span, .foot a { font-family: var(--sc-font-mono); font-size: 0.85rem; color: var(--sc-ink-soft); }
.foot a { color: var(--sc-ink); text-decoration: none; border-bottom: 1px solid var(--sc-hairline-strong); }
.foot a:hover, .foot a:focus-visible { color: var(--sc-accent); border-color: var(--sc-accent); }
.foot__line { margin-top: 0.95rem; font-family: var(--sc-font-mono); font-size: 0.85rem; color: var(--sc-ink-soft); }
.foot__note { margin-top: 0.4rem; font-family: var(--sc-font-mono); font-size: 0.78rem; color: var(--sc-ink-soft); opacity: 0.82; }

/* --------------------------------------------------------------- motion -- */
@media (prefers-reduced-motion: no-preference) {
  .caret { animation: dl-blink 1.15s steps(1) infinite; }
  .hero h1 { animation: dl-rise 760ms var(--sc-ease-out) both; }
  .hero__sub { animation: dl-rise 700ms var(--sc-ease-out) 260ms both; }
  .hero__cta { animation: dl-rise 700ms var(--sc-ease-out) 420ms both; }
}
@keyframes dl-blink { 50% { opacity: 0; } }
@keyframes dl-rise { from { opacity: 0; transform: translate3d(0, 16px, 0); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  /* Every latch is already open, the trace is already drawn, the packet is
     gone. Nothing on the page depends on movement to be read. */
  .route__pkt, .spine__head { display: none; }
  .board__grid, .board__vias, .board__diag { transform: none !important; }
  .heromark { transform: none !important; }
}

/* --------------------------------------------------------------- narrow -- */
@media (max-width: 900px) {
  :root { --bar: 54px; }
  .bar__nav { gap: 0.9rem; margin-inline: 0 auto; }
  .bar__nav a { font-size: 0.74rem; }
  .btn { font-size: 0.78rem; padding: 0.55em 0.85em; }
  .btn--lg { font-size: 0.9rem; padding: 0.75em 1.25em; }
  .faq__grid { grid-template-columns: minmax(0, 1fr); }
  .route__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(14px, 2.4vh, 22px); }
  .route__grid > .step:nth-child(1),
  .route__grid > .step:nth-child(3) { margin-top: 0; }
  .route__grid > .step:nth-child(even) { margin-left: 18px; }
  .step { padding-top: 0; padding-left: 26px; }
  .step__via { top: 0.45em; }
  .step p { font-size: 0.98rem; }
  .step__n { margin-bottom: 0.2rem; }
  .matrix__row { grid-template-columns: 24px minmax(0, 1fr); }
  .matrix__row p { grid-column: 2; margin-top: 0.3rem; }
  .heromark { width: 300px; margin-top: -150px; right: -110px; }
}
@media (max-width: 560px) {
  .bar__nav { gap: 0.7rem; }
  .bar__mark .wordmark { display: none; }
  .bar { gap: 0.8rem; }
}
/* A short viewport cannot hold a pinned close: let it flow instead. */
@media (max-height: 760px) {
  .close { height: auto !important; }
  .close .sc-stage { position: static; height: auto; overflow: visible; }
}
/* Same escape for the pinned peak on very short viewports. */
@media (max-height: 620px) {
  .how { height: auto !important; }
  .how .sc-stage { position: static; height: auto; overflow: visible; }
}