/* ==========================================================================
   AK練肖威｜SEO 共研社
   Design system — signal arcade
   1. Tokens          6. Hero            11. Threshold      16. Apply page
   2. Reset / base    7. Premise         12. Application    17. Privacy page
   3. Primitives      8. Origin          13. Data room      18. Motion
   4. Chrome          9. Broadcast       14. FAQ            19. Responsive
   5. Section shell  10. Gains / Relay   15. Closing        20. Reduced motion
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  /* surface */
  --ink-900: #04080b;
  --ink-800: #070f15;
  --ink-700: #0a1620;
  --ink-600: #10222f;
  --ink-500: #16303f;

  /* paper */
  --paper-100: #f0e4c6;
  --paper-200: #e6d7b3;
  --paper-300: #d9c79e;
  --paper-400: #c2b088;
  --paper-ink: #17180f;
  --paper-ink-soft: #453f2f;

  /* accent */
  --signal: #b8ff58;
  --signal-deep: #5d8f37;
  --signal-ink: #0d1a08;
  --amber: #d68b43;
  --danger: #ef8067;

  /* text */
  --text: #f4efe3;
  --text-soft: #c3c8c2;
  --text-mute: #8a938e;
  --text-faint: #5d6763;

  /* lines */
  --line: rgba(238, 232, 216, .14);
  --line-mid: rgba(238, 232, 216, .26);
  --line-strong: rgba(238, 232, 216, .42);
  --line-paper: rgba(23, 24, 15, .26);

  /* type */
  --mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --sans: "Noto Sans TC", Inter, "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;

  --t--1: clamp(11px, .18vw + 10.4px, 12.5px);
  --t-0:  clamp(14.5px, .22vw + 13.8px, 16.5px);
  --t-1:  clamp(16px, .38vw + 14.8px, 19px);
  --t-2:  clamp(19px, .7vw + 17px, 24px);
  --t-3:  clamp(23px, 1.5vw + 19px, 34px);
  --t-4:  clamp(29px, 2.8vw + 21px, 48px);
  --t-5:  clamp(35px, 4.4vw + 22px, 68px);
  --t-6:  clamp(42px, 6.4vw + 20px, 96px);

  /* space */
  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px;  --sp-7: 44px;  --sp-8: 60px;
  --sp-9: 80px; --sp-10: 110px;
  --band: clamp(88px, 11vw, 168px);
  --gutter: clamp(20px, 3.2vw, 56px);
  --shell: 1320px;

  /* motion */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --nav-h: 62px;

  color-scheme: dark;
}

/* 2. Reset / base ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--ink-900);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--ink-900);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--t-0);
  line-height: 1.8;
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Film grain + faint CRT raster over the whole document. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: .07;
  mix-blend-mode: soft-light;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 2px, #fff 2px 3px),
    repeating-linear-gradient(90deg, rgba(217, 199, 158, .32) 0 1px, transparent 1px 4px);
}
/* Tube vignette: the page reads as something being displayed, not printed. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 89;
  pointer-events: none;
  background: radial-gradient(ellipse 130% 110% at 50% 50%, transparent 52%, rgba(0, 0, 0, .5) 100%);
}

img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 900; letter-spacing: -.045em; line-height: 1.08; text-wrap: balance; }

/* Misconverged tube: the red and blue guns land a hair off the green one. */
.band-dark h2, .band-deep h2, .band-slate h2, .band-black h2, .closing h2, .privacy-hero h1, .apply-heading h1 {
  text-shadow: 2px 0 rgba(255, 86, 86, .26), -2px 0 rgba(86, 196, 255, .2);
}
.band-paper h2 { text-shadow: 1.5px 0 rgba(196, 62, 40, .18), -1.5px 0 rgba(40, 110, 160, .14); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--signal); color: var(--signal-ink); }

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
  border-radius: 1px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; z-index: 100; top: 8px; left: 8px;
  padding: 12px 18px;
  background: var(--signal); color: var(--signal-ink);
  font: 800 13px/1 var(--sans);
  transform: translateY(-200%);
  transition: transform .2s var(--ease);
}
.skip-link:focus-visible { transform: translateY(0); }

/* 3. Primitives ------------------------------------------------------------ */
.shell {
  width: min(var(--shell), 100% - var(--gutter) * 2);
  margin-inline: auto;
}
.shell-narrow { width: min(880px, 100% - var(--gutter) * 2); margin-inline: auto; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 var(--sp-5);
  color: var(--signal);
  font: 700 var(--t--1)/1.4 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.eyebrow::before {
  content: "▸";
  font: 800 12px/1 var(--mono);
  color: currentColor;
}
.eyebrow::after {
  content: "";
  width: 8px; height: 12px;
  background: currentColor;
  opacity: .85;
  animation: caret 1.1s steps(2, end) infinite;
}
@keyframes caret { 50% { opacity: 0; } }
.eyebrow-ink { color: var(--signal-deep); }
.eyebrow-ink::before { box-shadow: 3px 3px 0 rgba(93, 143, 55, .22); }

.lede {
  max-width: 36em;
  color: var(--text-soft);
  font-size: var(--t-1);
  line-height: 1.85;
}
.lede-ink { color: var(--paper-ink-soft); }

.hairline { height: 1px; background: var(--line); border: 0; margin: 0; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 26px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: inherit;
  font-weight: 800;
  letter-spacing: -.01em;
  cursor: pointer;
  transition: transform .2s var(--ease), background-color .2s, color .2s, border-color .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--signal);
  border-color: var(--signal);
  color: var(--signal-ink);
  box-shadow: 6px 6px 0 #14300a, 6px 6px 0 1px rgba(0, 0, 0, .55);
  clip-path: none;
}
.btn-primary::after { content: "▸"; font: 800 17px/1 var(--mono); }
.btn-primary:hover { background: #cfff86; }
.btn-primary:active { transform: translate(3px, 3px); box-shadow: 3px 3px 0 #14300a; }

.btn-ghost { border-color: var(--line-mid); color: var(--text-soft); }
.btn-ghost:hover { border-color: var(--signal); color: var(--text); }

.btn-ink {
  background: var(--paper-ink);
  border-color: var(--paper-ink);
  color: var(--paper-200);
  box-shadow: 6px 6px 0 rgba(23, 24, 16, .32);
  clip-path: none;
}
.btn-ink::after { content: "▸"; font: 800 17px/1 var(--mono); color: var(--signal); }
.btn-ink:active { transform: translate(3px, 3px); box-shadow: 3px 3px 0 rgba(23, 24, 16, .32); }

.btn-sm { min-height: 44px; padding: 0 18px; font-size: 13px; }

.textlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  color: var(--text-soft);
  border-bottom: 1px solid var(--line-mid);
  font-size: 13.5px;
  transition: color .18s, border-color .18s;
}
.textlink:hover { color: var(--signal); border-color: var(--signal); }

/* Inline link inside running copy — visible without shouting. */
.inline-link {
  color: var(--signal);
  border-bottom: 1px solid rgba(184, 255, 88, .42);
  transition: border-color .18s;
}
.inline-link:hover { border-bottom-color: var(--signal); }
.door-no .inline-link { color: var(--amber); border-bottom-color: rgba(214, 139, 67, .45); }
.door-no .inline-link:hover { border-bottom-color: var(--amber); }
.lede-ink .inline-link, .steps .inline-link { color: #35591f; border-bottom-color: rgba(53, 89, 31, .4); }

.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  color: var(--text-mute);
  font: 650 var(--t--1)/1.6 var(--mono);
  letter-spacing: .04em;
}
.meta-row > * { display: flex; align-items: center; gap: 8px; }
.meta-row > *::before { content: "■"; font-size: 6px; color: var(--signal); }

.tag {
  display: inline-block;
  padding: 6px 10px;
  border: 1px solid var(--line-mid);
  color: var(--text-soft);
  font: 700 10.5px/1 var(--mono);
  letter-spacing: .1em;
}
.tag-signal { border-color: rgba(184, 255, 88, .5); color: var(--signal); }

/* 4. Chrome: top bar, spine, mobile HUD, boot ------------------------------ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 45;
  background: rgba(4, 8, 11, .82);
  backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: var(--nav-h);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-weight: 850;
  font-size: 15px;
  letter-spacing: -.03em;
  white-space: nowrap;
}
.brand-logo { display: block; width: 122px; height: 32px; object-fit: contain; flex: 0 0 auto; }
.brand-divider { width: 1px; height: 24px; background: var(--line-mid); flex: 0 0 auto; }
.brand-community { color: var(--text); font-size: 12.5px; font-weight: 750; letter-spacing: -.02em; }
.success-brand { display: inline-flex; align-items: center; gap: 12px; margin-bottom: var(--sp-7); color: var(--text-mute); font: 750 11px/1.4 var(--mono); }
.success-brand img { width: 122px; height: 32px; }
.brand-mark {
  width: 10px; height: 10px;
  background: var(--signal);
  box-shadow: 4px 4px 0 rgba(184, 255, 88, .22);
  animation: blink 2.6s steps(2, end) infinite;
}
.topnav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 30px);
}
.topnav a {
  position: relative;
  color: var(--text-mute);
  font-size: 13px;
  font-weight: 650;
  transition: color .18s;
}
.topnav a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: -6px;
  height: 1px;
  background: var(--signal);
  transition: right .25s var(--ease);
}
.topnav a:hover { color: var(--text); }
.topnav a:hover::after { right: 0; }
.topnav a.is-current { color: var(--text); }
.topnav a.is-current::after { right: 0; }

.topbar-progress {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--signal);
  box-shadow: 0 0 14px rgba(184, 255, 88, .6);
  transform: scaleX(var(--read-progress, 0));
  transform-origin: left;
}

/* Desktop chapter spine */
.spine {
  position: fixed;
  z-index: 30;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 12px;
  width: 24px;
}
.spine li {
  position: relative;
  height: 2px;
  color: var(--text-faint);
  transition: color .25s;
}
.spine li b {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--line-mid);
  transition: background-color .25s, transform .25s var(--ease);
}
/* The label is taken out of flow: while it participated in layout it grew the
   rail leftwards over the page whenever a chapter became active. */
.spine li span {
  position: absolute;
  right: calc(100% + 12px);
  top: -4px;
  white-space: nowrap;
  font: 700 9px/1 var(--mono);
  letter-spacing: .1em;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity .22s, transform .22s var(--ease);
  pointer-events: none;
}
.spine li.is-active { color: var(--signal); }
.spine li.is-active b { background: var(--signal); box-shadow: 0 0 10px rgba(184, 255, 88, .6); transform: scaleX(1.35); transform-origin: right; }
.spine:hover li span { opacity: 1; transform: none; }
.spine:hover li.is-active span { color: var(--signal); }

/* Mobile chapter HUD */
.hud { display: none; }

/* Boot sequence — CSS only, so a JS failure can never trap the page. */
.boot {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-content: center;
  gap: 18px;
  justify-items: center;
  background: var(--ink-900);
  pointer-events: none;
  animation: bootOut .7s var(--ease) 1.05s forwards;
}
.boot-label { color: var(--signal); font: 700 10px/1 var(--mono); letter-spacing: .3em; }
.boot-bar { width: min(220px, 50vw); height: 3px; background: rgba(184, 255, 88, .16); overflow: hidden; }
.boot-bar i { display: block; height: 100%; background: var(--signal); box-shadow: 0 0 12px var(--signal); transform-origin: left; animation: bootFill 1.05s steps(12, end) forwards; }

@keyframes bootFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes bootOut { to { opacity: 0; visibility: hidden; } }
@keyframes blink { 50% { opacity: .3; } }

/* 5. Section shell --------------------------------------------------------- */
.chapter { position: relative; isolation: isolate; scroll-margin-top: calc(var(--nav-h) + 12px); }
.band { padding-block: var(--band); }

.band-dark { background: var(--ink-900); }
.band-deep { background: var(--ink-800); }
.band-slate { background: var(--ink-700); }
.band-black { background: #020506; }
.band-paper {
  background: var(--paper-300);
  color: var(--paper-ink);
  background-image: radial-gradient(rgba(23, 24, 15, .1) 1px, transparent 1.4px);
  background-size: 5px 5px;
}

/* Sprocket edges on the paper bands. */
.band-paper::before,
.band-paper::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 13px;
  opacity: .42;
  background: radial-gradient(circle, #4c493c 2px, transparent 2.7px) 50% 12px / 11px 25px repeat-y;
}
.band-paper::before { left: clamp(6px, 1.2vw, 18px); }
.band-paper::after { right: clamp(6px, 1.2vw, 18px); }

.section-head { max-width: 1000px; }
.section-head h2 { font-size: var(--t-5); }
.section-head .lede { margin-top: var(--sp-5); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}

/* Ambient generated props sit behind their section's content, never over it. */
.chapter > .shell,
.chapter > .relay-frame { position: relative; z-index: 2; }
.props { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.props img {
  position: absolute;
  width: clamp(78px, 9vw, 138px);
  height: auto;
  opacity: 0;
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .4));
  transform: translateY(16px);
  transition: opacity .6s var(--ease), transform .8s var(--ease);
}
.is-in .props img { opacity: .82; transform: none; }
.is-in .props img:nth-child(1) { transition-delay: .05s; }
.is-in .props img:nth-child(2) { transition-delay: .15s; }
.is-in .props img:nth-child(3) { transition-delay: .25s; }

/* 6. Hero — the roster wall -------------------------------------------------
   The offer is "30 seats". So the hero is 30 seats: a monitor wall where three
   are already tuned in and twenty-seven are dark, with the headline burned
   across it. Scarcity is shown, never claimed. */
.hero {
  position: relative;
  min-height: 720px;
  height: calc(100dvh - var(--nav-h));
  max-height: 1000px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: clip;
  background: #030608;
}
.hero-tune {
  position: absolute;
  z-index: 4;
  top: 0; left: 0;
  width: 460px; height: 460px;
  pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(184, 255, 88, .14), rgba(184, 255, 88, .03) 40%, transparent 70%);
  transform: translate3d(calc(var(--tune-x, 50vw) - 230px), calc(var(--tune-y, 50vh) - 230px), 0);
}

/* Roster readout */
.roster-head {
  position: relative;
  z-index: 6;
  display: grid;
  grid-template-columns: auto minmax(48px, 200px) auto;
  align-items: center;
  gap: 16px;
  width: min(var(--shell), 100% - var(--gutter) * 2);
  margin-inline: auto;
  padding-block: 15px;
  color: var(--text-faint);
  font: 750 10px/1 var(--mono);
  letter-spacing: .16em;
}
.roster-head > span b { color: var(--signal); }
.roster-bar { position: relative; height: 3px; background: rgba(184, 255, 88, .14); }
.roster-bar b {
  position: absolute;
  inset: 0;
  background: var(--signal);
  box-shadow: 0 0 12px var(--signal);
  transform-origin: left;
  transform: scaleX(.1);
}

/* The wall */
.hero-wall {
  grid-area: 2 / 1;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  gap: 1px;
  background: rgba(184, 255, 88, .08);
  border-block: 1px solid rgba(184, 255, 88, .16);
  transform: translate3d(0, calc(var(--hero-p, 0) * -26px), 0) scale(calc(1 + var(--hero-p, 0) * .03));
}
.seat {
  position: relative;
  overflow: hidden;
  background: #050b0e;
  transition: background-color .3s, box-shadow .3s;
  animation: seatOn .55s var(--ease) backwards;
  animation-delay: calc(var(--i) * 26ms + .45s);
}
.seat::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0, 0, 0, .5) 2px 3px);
}
.seat b {
  position: absolute;
  top: 9px; left: 10px;
  color: rgba(238, 232, 216, .3);
  font: 750 9.5px/1 var(--mono);
  letter-spacing: .06em;
}
.seat em {
  position: absolute;
  bottom: 9px; left: 10px;
  color: rgba(238, 232, 216, .2);
  font: 750 8px/1 var(--mono);
  font-style: normal;
  letter-spacing: .14em;
}
.seat:hover { background: #0a1a13; box-shadow: inset 0 0 0 1px rgba(184, 255, 88, .45); }
.seat:hover b { color: var(--signal); }
.seat:hover em::after { content: " ?"; }

.seat.is-taken {
  background: radial-gradient(ellipse 120% 80% at 50% 100%, rgba(184, 255, 88, .14), #061410 62%);
  box-shadow: inset 0 0 0 1px rgba(184, 255, 88, .55), 0 0 26px rgba(184, 255, 88, .12);
}
.seat.is-taken b { color: var(--signal); }
.seat.is-taken em { color: var(--signal); animation: blink 2.2s steps(2, end) infinite; }
@keyframes seatOn { from { opacity: 0; transform: scale(.86); } }

/* Walkers: the sprites are single stills, so movement is stepped like an
   arcade sprite rather than interpolated. A two-frame hop stands in for a
   walk cycle; the girder grid is the level. */
.hero-walkers {
  position: relative;
  grid-area: 2 / 1;
  z-index: 2;
  pointer-events: none;
}
.walker {
  position: absolute;
  top: 0; left: 0;
  width: calc(100% / var(--cols, 10));
  height: calc(100% / var(--rows, 3));
  transform: translate3d(calc(var(--c, 0) * 100%), calc(var(--r, 0) * 100%), 0);
  transition: transform 1.05s steps(7, end);
}
.walker .flip { position: absolute; inset: 0; transition: transform .12s steps(2, end); }
.walker.is-flipped .flip { transform: scaleX(-1); }
.walker .hop { position: absolute; inset: 0; }
.walker.is-moving .hop { animation: hop .3s steps(2, end) infinite; }
.walker .hop img {
  position: absolute;
  left: 50%; bottom: 8%;
  width: 76%;
  height: 80%;
  object-fit: contain;
  object-position: bottom center;
  transform: translateX(-50%);
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .75));
}
@keyframes hop { 50% { transform: translateY(-5px); } }

/* Procedural walk rig.
   The sprite is one still, so the legs are cut out of it with clip-path and
   swung around the hip line. The rig box carries the sprite's exact aspect
   ratio, otherwise the percentage cuts would not land on the drawing.
   Only the standing sprite is rigged; the other two are seated and kneeling,
   and a leg swing on those would read as broken, not animated. */
.walker .rig {
  --hip: 46%;
  --split: 55%;
  position: absolute;
  left: 50%;
  bottom: 8%;
  height: 82%;
  aspect-ratio: 1024 / 1536;
  transform: translateX(-50%);
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .75));
}
.walker .part {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
}
.torso { clip-path: inset(0 0 calc(100% - var(--hip)) 0); }
.leg-l { clip-path: inset(var(--hip) calc(100% - var(--split)) 0 0); }
.leg-r { clip-path: inset(var(--hip) 0 0 var(--split)); }

/* Front-view march, not a side-view stride.
   Swinging the legs fore/aft only reads as walking on a side-view sprite. This
   one faces the viewer, so rotation made the feet slide apart sideways and the
   whole thing looked like moonwalking. A front-facing figure steps by lifting
   each leg alternately, the way down-facing sprites walk in 2D RPGs. */
.walker.is-moving .leg-l { animation: stepA .32s steps(1, end) infinite; }
.walker.is-moving .leg-r { animation: stepB .32s steps(1, end) infinite; }
.walker.is-moving .torso { animation: torsoLean .32s steps(1, end) infinite; }
@keyframes stepA { 0% { transform: translateY(-3.2%); } 50% { transform: translateY(0); } }
@keyframes stepB { 0% { transform: translateY(0); } 50% { transform: translateY(-3.2%); } }
@keyframes torsoLean { 0% { transform: translate(-.8%, -1.4%); } 50% { transform: translate(.8%, 0); } }

/* Darkening under the type so the wall never fights the headline */
.hero-veil {
  grid-area: 2 / 1;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(100deg, rgba(3, 6, 8, .95) 0%, rgba(3, 6, 8, .82) 32%, rgba(3, 6, 8, .3) 60%, transparent 76%),
    linear-gradient(180deg, rgba(3, 6, 8, .4), transparent 20%, rgba(3, 6, 8, .55));
}

/* Type burned across the wall */
.hero-stage {
  position: relative;
  grid-area: 2 / 1;
  z-index: 5;
  align-self: center;
  width: min(var(--shell), 100% - var(--gutter) * 2);
  margin-inline: auto;
  padding-block: clamp(16px, 3vh, 40px);
}
.hero-slug {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: var(--sp-5);
  color: var(--text-mute);
  font: 700 11.5px/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.hero-slug b { color: var(--signal); }
.hero-slug .rule { flex: 1; max-width: 110px; height: 1px; background: var(--line-mid); }

.hero-title {
  font-size: clamp(42px, 7.4vw, 124px);
  line-height: .9;
  letter-spacing: -.07em;
  text-wrap: nowrap;
  text-shadow: 0 6px 44px rgba(3, 6, 8, .96), 0 2px 12px rgba(3, 6, 8, .9);
}
.hero-title .line { display: block; }
.hero-title .num {
  font-style: normal;
  font-family: var(--mono);
  font-size: 1.34em;
  font-weight: 800;
  letter-spacing: -.07em;
  color: var(--signal);
  text-shadow: 8px 8px 0 rgba(184, 255, 88, .14);
}
.hero-title mark {
  display: inline-block;
  margin-inline: .04em;
  padding: .1em .2em .18em;
  background: var(--signal);
  color: var(--signal-ink);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}

.hero-copy {
  max-width: 26em;
  margin-top: var(--sp-6);
  padding-left: var(--sp-5);
  border-left: 2px solid rgba(184, 255, 88, .4);
  color: var(--text-soft);
  font-size: var(--t-1);
  line-height: 1.85;
  text-shadow: 0 2px 18px rgba(3, 6, 8, .95);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-5);
  margin-top: var(--sp-7);
}

/* The session ticket, pinned to the wall */
.hero-ticket {
  position: absolute;
  z-index: 6;
  right: 0;
  bottom: 4%;
  width: min(360px, 42%);
  display: grid;
  gap: 6px;
  padding: 16px 20px;
  background: rgba(5, 12, 10, .92);
  border: 1px solid rgba(184, 255, 88, .38);
  backdrop-filter: blur(8px);
  box-shadow: 10px 10px 0 rgba(0, 0, 0, .5);
  clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 13px 100%, 0 calc(100% - 13px));
}
.hero-ticket small { color: var(--signal); font: 750 9px/1 var(--mono); letter-spacing: .16em; }
.hero-ticket strong { font-size: 15.5px; line-height: 1.5; letter-spacing: -.03em; }
.hero-ticket span { color: var(--text-mute); font: 650 11.5px/1.7 var(--mono); }

/* Bottom ticker band */
.hero-ticker {
  position: relative;
  z-index: 6;
  display: flex;
  border-top: 0;
  background: var(--signal);
  overflow: hidden;
}
.hero-ticker ul {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  padding: 15px 0;
  animation: ticker 34s linear infinite;
}
.hero-ticker li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-inline: 26px;
  white-space: nowrap;
  color: var(--signal-ink);
  font: 750 12px/1 var(--mono);
  letter-spacing: .06em;
}
.hero-ticker li::before { content: "\25C6"; color: rgba(13, 26, 8, .45); font-size: 7px; }
.hero-ticker li b { color: var(--signal-ink); font-weight: 800; box-shadow: inset 0 -3px rgba(13, 26, 8, .28); }
@keyframes ticker { to { transform: translateX(-100%); } }

/* 7. Premise --------------------------------------------------------------- */
.premise { border-top: 1px solid var(--line); }
.premise-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(44px, 6vw, 96px);
  align-items: start;
}
.premise h2 { font-size: var(--t-5); max-width: 13em; }
.premise h2 em { font-style: normal; color: var(--signal); }
.premise-body { display: grid; gap: var(--sp-5); max-width: 35em; }
.premise-body p { color: var(--text-soft); line-height: 1.95; }
.premise-body .accent { color: var(--text); font-weight: 700; }

.premise-pull {
  margin-top: var(--sp-7);
  padding: var(--sp-6) 0 0;
  border-top: 1px solid var(--line-mid);
  font-size: var(--t-3);
  font-weight: 850;
  line-height: 1.4;
  letter-spacing: -.04em;
  color: var(--text);
}
.premise-pull b { color: var(--signal); }

/* The gap board: cheap vs scarce */
.gap-board { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.gap-board article { padding: var(--sp-6); background: var(--ink-800); }
.gap-board small {
  display: block;
  margin-bottom: var(--sp-4);
  font: 700 10px/1 var(--mono);
  letter-spacing: .14em;
  color: var(--text-faint);
}
.gap-board h3 { font-size: var(--t-2); margin-bottom: var(--sp-3); }
.gap-board p { color: var(--text-mute); font-size: 14px; line-height: 1.8; }
.gap-cheap small { color: var(--text-faint); }
.gap-cheap h3 { color: var(--text-mute); }
.gap-scarce { border-left: 2px solid var(--signal); }
.gap-scarce small { color: var(--signal); }

/* 8. Origin (paper) -------------------------------------------------------- */
.origin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(290px, .55fr);
  gap: clamp(48px, 7vw, 120px);
  align-items: start;
}
.origin h2 { font-size: var(--t-5); max-width: 12em; }
.origin-body { display: grid; gap: var(--sp-5); max-width: 36em; margin-top: var(--sp-7); }
.origin-body p { color: var(--paper-ink-soft); line-height: 1.95; }
.origin-body .accent { color: var(--paper-ink); font-weight: 750; }

.origin-quote {
  margin-top: var(--sp-6);
  padding: var(--sp-5) 0 0;
  border-top: 1px solid var(--line-paper);
  color: var(--paper-ink);
  font-size: var(--t-2);
  font-weight: 800;
  line-height: 1.55;
  letter-spacing: -.03em;
}

.cost-ticket {
  position: relative;
  padding: var(--sp-6);
  background: #191b16;
  color: var(--paper-200);
  box-shadow: 11px 11px 0 rgba(23, 24, 16, .2);
  transform: rotate(1.1deg);
}
.cost-ticket::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px dashed rgba(238, 229, 208, .34);
  pointer-events: none;
}
.cost-ticket small { display: block; color: var(--signal); font: 700 9.5px/1 var(--mono); letter-spacing: .14em; }
.cost-ticket strong { display: block; margin: var(--sp-8) 0 var(--sp-5); font-size: var(--t-3); line-height: 1.35; letter-spacing: -.035em; }
.cost-ticket p { color: #c2bcac; font-size: 14px; line-height: 1.8; }
.cost-ticket dl { display: grid; gap: 10px; margin: var(--sp-5) 0 0; padding-top: var(--sp-5); border-top: 1px dashed rgba(238, 229, 208, .28); }
.cost-ticket dl > div { display: grid; grid-template-columns: 62px 1fr; gap: 12px; }
.cost-ticket dt { color: var(--signal); font: 700 9.5px/1.7 var(--mono); }
.cost-ticket dd { margin: 0; font-size: 13px; line-height: 1.7; color: #cdc7b6; }

/* 9. Broadcast — the first session ---------------------------------------- */
.broadcast { overflow: clip; }
.broadcast-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  gap: clamp(36px, 5vw, 80px);
  align-items: end;
  padding-bottom: var(--sp-8);
  border-bottom: 1px solid var(--line-mid);
}
.session-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--sp-5);
  padding: 8px 12px;
  border: 1px solid rgba(184, 255, 88, .4);
  color: var(--signal);
  font: 700 12px/1.2 var(--mono);
  letter-spacing: .1em;
}
.session-kicker i { width: 6px; height: 6px; background: var(--signal); animation: blink 1.4s steps(2, end) infinite; }
.broadcast h2 { font-size: var(--t-5); max-width: 12em; }
.broadcast h2 em { font-style: normal; color: var(--signal); }
.broadcast-sub { max-width: 32em; margin-top: var(--sp-5); color: var(--text-soft); font-size: var(--t-1); line-height: 1.85; }

.session-facts { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.session-facts > div { display: grid; grid-template-columns: 78px 1fr; gap: 14px; padding: 14px 16px; background: var(--ink-800); }
.session-facts dt { color: var(--text-faint); font: 700 10px/1.7 var(--mono); letter-spacing: .08em; }
.session-facts dd { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--text-soft); }
.session-facts dd b { color: var(--signal); font-weight: 800; }

.rundown { display: grid; gap: 1px; margin-top: var(--sp-8); background: var(--line); border-block: 1px solid var(--line); }
.rundown > li {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(20px, 3vw, 52px);
  align-items: start;
  padding: clamp(26px, 3vw, 42px) 0;
  background: var(--ink-900);
  transition: background-color .25s;
}
.rundown > li:hover { background: var(--ink-800); }
.rundown-no { color: var(--signal); font: 800 var(--t-2)/1 var(--mono); letter-spacing: -.02em; }
.rundown h3 { font-size: var(--t-2); line-height: 1.35; }
.rundown h3 span { display: block; margin-top: 10px; color: var(--text-faint); font: 650 11px/1.6 var(--mono); letter-spacing: .06em; }
.rundown p { color: var(--text-mute); line-height: 1.9; font-size: 15px; }

.session-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: center;
  margin-top: var(--sp-8);
  padding: var(--sp-6);
  border: 1px solid rgba(214, 139, 67, .35);
  background: rgba(214, 139, 67, .07);
}
.session-note b { color: var(--amber); font: 800 10px/1 var(--mono); letter-spacing: .14em; white-space: nowrap; }
.session-note p { color: var(--text-soft); line-height: 1.85; font-size: 15px; }
.session-note p em { font-style: normal; color: var(--text); font-weight: 750; }

/* CRT console */
.crt-layout {
  display: grid;
  grid-template-columns: minmax(340px, .85fr) minmax(0, 1.15fr);
  gap: clamp(44px, 7vw, 110px);
  align-items: center;
  margin-top: var(--sp-9);
}
.crt-console { position: relative; z-index: 2; }
.crt-shell {
  position: relative;
  padding: 8% 9% 14%;
  aspect-ratio: 1.25;
  background: linear-gradient(145deg, #4d4a40, #171914 64%, #090a08);
  clip-path: polygon(4% 0, 96% 0, 100% 8%, 100% 90%, 94% 100%, 6% 100%, 0 92%, 0 8%);
  box-shadow: 24px 28px 0 #000;
}
.crt-screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  cursor: pointer;
  isolation: isolate;
  border: 9px solid #11130f;
  border-radius: 14% / 10%;
  background: #030b05;
  box-shadow: inset 0 0 70px #000;
}
.crt-screen canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%; height: 100%;
  image-rendering: pixelated;
  opacity: calc(.96 - var(--tune, .18) * .76);
  mix-blend-mode: screen;
}
.crt-caption {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  place-content: center;
  text-align: center;
  padding: 8%;
  opacity: calc(.18 + var(--tune, .18) * .82);
  transform: scale(calc(.94 + var(--tune, .18) * .06));
  filter: blur(calc((1 - var(--tune, .18)) * 2px));
}
.crt-caption small { display: block; margin-bottom: 12px; color: var(--signal-deep); font: 700 8px/1 var(--mono); letter-spacing: .16em; }
.crt-caption span { color: var(--signal); font: 850 clamp(20px, 2.6vw, 40px)/1.2 var(--mono); text-shadow: 0 0 20px rgba(184, 255, 88, .5); }
.crt-caption b { display: inline-block; margin-top: 16px; padding: 5px 9px; background: var(--signal); color: var(--signal-ink); font: 850 8px/1 var(--mono); letter-spacing: .1em; opacity: 0; }
.is-locked .crt-caption b { opacity: 1; animation: blink 1s steps(2, end) infinite; }
.crt-scan {
  position: absolute;
  z-index: 3;
  left: 0; right: 0; top: 0;
  height: 13%;
  pointer-events: none;
  background: linear-gradient(transparent, rgba(184, 255, 88, .16), transparent);
  animation: crtScan 3.8s linear infinite;
}
@keyframes crtScan { from { transform: translateY(-120%); } to { transform: translateY(780%); } }
.crt-knobs { position: absolute; left: 12%; right: 12%; bottom: 7%; display: flex; justify-content: flex-end; gap: 10px; }
.crt-knobs b { width: 14px; height: 14px; border: 1px solid #8d8b7e; }
.crt-knobs b:first-child { background: var(--signal); }

.tuner { display: grid; grid-template-columns: auto 1fr 50px; align-items: center; gap: 14px; margin: var(--sp-6) 7% 0; color: var(--text-soft); font: 700 10px/1 var(--mono); }
.tuner input { width: 100%; height: 30px; accent-color: var(--signal); cursor: ew-resize; }
.tuner output { color: var(--signal); text-align: right; }
.tuner-help { margin: 8px 7% 0; color: var(--text-faint); font: 650 9.5px/1.6 var(--mono); }

.crt-copy h3 { font-size: var(--t-4); max-width: 12em; }
.crt-copy .lede { margin-top: var(--sp-5); }
.takeaways { margin-top: var(--sp-7); border-top: 1px solid var(--line); }
.takeaways li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  color: var(--text-soft);
  line-height: 1.7;
}
.takeaways li::before { content: "→"; color: var(--signal); font: 800 14px/1.6 var(--mono); }

/* 10. Gains + Relay -------------------------------------------------------- */
.gains-groups { display: grid; gap: var(--sp-9); margin-top: var(--sp-9); }
.gain-group {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 70px);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line-mid);
}
.gain-group > header h3 { font-size: var(--t-2); letter-spacing: -.035em; }
.gain-group > header p { margin-top: 12px; color: var(--text-faint); font-size: 13.5px; line-height: 1.75; }
.gain-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.gain-list li {
  padding: var(--sp-6);
  background: var(--ink-800);
  box-shadow: inset 1px 1px 0 rgba(238, 232, 216, .07), inset -1px -1px 0 rgba(0, 0, 0, .5);
  transition: background-color .25s, transform .25s var(--ease);
}
.gain-list li:hover { background: var(--ink-700); transform: translate(-2px, -3px); }
.gain-list b { display: block; margin-bottom: 10px; color: var(--signal); font: 750 10px/1 var(--mono); letter-spacing: .1em; }
.gain-list h4 { font-size: var(--t-1); margin-bottom: 10px; letter-spacing: -.03em; }
.gain-list p { color: var(--text-mute); font-size: 14px; line-height: 1.85; }

.not-included { margin-top: var(--sp-9); padding: var(--sp-7); border: 1px solid var(--line-mid); background: var(--ink-900); }
.not-included h3 { font-size: var(--t-2); margin-bottom: var(--sp-3); }
.not-included > p { color: var(--text-mute); font-size: 14.5px; max-width: 35em; }
.not-included ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px 32px; margin-top: var(--sp-6); }
.not-included li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 12px;
  color: var(--text-soft);
  font-size: 14.5px;
  line-height: 1.75;
}
.not-included li::before { content: "×"; color: var(--amber); font: 800 14px/1.7 var(--mono); }

/* Relay */
.relay { height: 150dvh; background: var(--ink-900); }
.relay-frame {
  position: sticky;
  top: var(--nav-h);
  height: calc(100dvh - var(--nav-h));
  min-height: 520px;
  max-height: none;
  display: grid;
  align-items: center;
  overflow: clip;
  background:
    radial-gradient(circle at 68% 54%, rgba(50, 91, 62, .18), transparent 42%),
    linear-gradient(180deg, var(--ink-800), var(--ink-900));
}
.relay-shell { display: grid; grid-template-columns: minmax(280px, .6fr) minmax(600px, 1.4fr); gap: var(--sp-8); align-items: center; }
.relay-copy h2 { font-size: var(--t-4); }
.relay-copy .lede { margin-top: var(--sp-5); max-width: 24em; }
.relay-readout { margin-top: var(--sp-6); padding: 16px 0; border-block: 1px solid var(--line); font: 650 10px/1.6 var(--mono); }
.relay-readout span { display: block; color: var(--text-faint); }
.relay-readout strong { display: block; margin-top: 7px; color: var(--signal); font-size: 12.5px; }

.relay-stage {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(6px, 1.2vw, 24px);
  align-items: end;
}
.relay-line { position: absolute; z-index: 1; left: 7%; right: 6%; bottom: 168px; height: 3px; background: rgba(184, 255, 88, .12); }
.relay-line i { display: block; width: 100%; height: 100%; background: var(--signal); box-shadow: 0 0 18px rgba(184, 255, 88, .55); transform-origin: left; transform: scaleX(var(--relay-p, .02)); }
.relay-packet { position: absolute; top: -6px; left: 0; width: 14px; height: 14px; background: var(--signal); box-shadow: 0 0 24px var(--signal); transform: translate3d(var(--relay-x, 0px), 0, 0); }

.relay-node {
  position: relative;
  text-align: center;
  opacity: .3;
  transform: translate3d(0, 22px, 0) scale(.9);
  transition: transform .55s var(--ease), opacity .35s;
}
/* Stagger by baseline, not by absolute offsets, so the row hugs its content. */
.relay-node:nth-of-type(2) { margin-bottom: 52px; }
.relay-node:nth-of-type(3) { margin-bottom: 22px; }
.relay-node.is-active { opacity: 1; transform: none; }
.relay-node.is-past { opacity: .68; transform: scale(.96); }
.relay-node img { width: auto; height: clamp(190px, 40dvh, 420px); margin: 0 auto -20px; object-fit: contain; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .6)); }
.relay-node > div { position: relative; z-index: 2; min-height: 142px; padding: 18px 20px; background: rgba(4, 8, 11, .88); border-top: 1px solid var(--line-mid); }
.relay-node small { color: var(--signal); font: 700 9px/1 var(--mono); letter-spacing: .12em; }
.relay-node h3 { margin: 10px 0 8px; font-size: var(--t-1); }
.relay-node p { color: var(--text-mute); font-size: 13px; line-height: 1.7; }

/* 11. Threshold ------------------------------------------------------------ */
.threshold h2 { font-size: var(--t-5); max-width: 12em; }
.door { display: grid; grid-template-columns: 1fr 108px 1fr; margin-top: var(--sp-9); border-block: 1px solid var(--line-strong); }
.door-side { padding: var(--sp-8) var(--sp-6); }
.door-side > b { display: block; margin-bottom: var(--sp-5); color: var(--signal); font: 750 11px/1 var(--mono); letter-spacing: .1em; }
.door-no > b { color: var(--amber); }
.door-side li { position: relative; padding: 13px 0 13px 28px; color: var(--text-soft); line-height: 1.7; }
.door-side li::before { content: "□"; position: absolute; left: 0; color: var(--signal); font-family: var(--mono); }
.door-no li::before { content: "×"; color: var(--amber); }
.door-seam {
  position: relative;
  display: grid;
  place-items: center;
  border-inline: 1px solid var(--line);
  background: linear-gradient(90deg, transparent, rgba(184, 255, 88, .05), transparent);
}
.door-seam i { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--signal); box-shadow: 0 0 18px rgba(184, 255, 88, .4); }
.door-seam b { position: relative; padding: 8px; background: var(--ink-700); color: var(--signal); font: 700 9px/1 var(--mono); letter-spacing: .1em; transform: rotate(90deg); }

.entry-rule { margin-top: var(--sp-7); color: var(--text-mute); font-size: 14.5px; line-height: 1.9; max-width: 36em; }
.entry-rule b { color: var(--text); }
.culture-prime { max-width: 760px; margin: var(--sp-7) 0; padding: clamp(22px, 4vw, 38px); border: 1px solid rgba(255, 213, 79, .5); background: linear-gradient(135deg, rgba(255, 213, 79, .1), rgba(255, 255, 255, .025)); box-shadow: 10px 10px 0 rgba(0, 0, 0, .18); }
.culture-prime h3 { margin: 10px 0 14px; color: var(--text); font-size: clamp(22px, 3vw, 36px); line-height: 1.2; }
.culture-prime > p:last-child { color: var(--text-soft); font-size: clamp(15px, 1.4vw, 17px); line-height: 1.9; }

/* 11a. Who is AK — a personnel file, not a bio ---------------------------- */
.whois { border-top: 1px solid var(--line); }
.whois-inner { width: min(1080px, 100% - var(--gutter) * 2); margin-inline: auto; }
.whois h2 { max-width: 17em; font-size: var(--t-4); letter-spacing: -.045em; line-height: 1.22; }

.dossier {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1px;
  margin-top: var(--sp-8);
  background: var(--line);
  border: 1px solid var(--line);
}
.dossier > div {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 16px;
  padding: 18px 20px;
  background: var(--ink-800);
}
.dossier dt { color: var(--text-faint); font: 750 10px/1.8 var(--mono); letter-spacing: .1em; }
.dossier dd { margin: 0; color: var(--text-soft); font-size: 14.5px; line-height: 1.8; }

.whois-body { display: grid; gap: var(--sp-5); max-width: 32em; margin-top: var(--sp-8); }
.whois-body p { color: var(--text-soft); line-height: 1.95; }
.whois-body strong { color: var(--text); }

/* 11b. Motive — a signed note, deliberately low-density ------------------- */
.motive { border-top: 1px solid var(--line); }
.motive-inner { width: min(1000px, 100% - var(--gutter) * 2); margin-inline: auto; }
.motive-open {
  max-width: 15em;
  font-size: var(--t-4);
  font-weight: 900;
  line-height: 1.22;
  letter-spacing: -.045em;
}
.motive-open b { color: var(--signal); }
.motive-body { display: grid; gap: var(--sp-6); max-width: 27em; margin-top: var(--sp-8); }
.motive-body p { color: var(--text-soft); line-height: 2; }
.motive-body .ask {
  color: var(--text);
  font-size: var(--t-2);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.5;
}
.motive-sign {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  max-width: 27em;
  color: var(--text-faint);
  font: 650 11px/1.6 var(--mono);
}
.motive-sign b { color: var(--signal); font-size: 13px; letter-spacing: .04em; }

/* A single hard clarification, given its own air. */
.not-that {
  margin-top: var(--sp-9);
  padding: var(--sp-7) var(--sp-7) var(--sp-7) calc(var(--sp-7) + 6px);
  border-left: 6px solid var(--amber);
  background: linear-gradient(90deg, rgba(214, 139, 67, .09), transparent 70%);
}
.not-that h3 { font-size: var(--t-3); letter-spacing: -.04em; }
.not-that p { max-width: 30em; margin-top: var(--sp-4); color: var(--text-soft); line-height: 1.95; }

/* Compact cost note — replaced the full-height paper band it used to live in. */
.cost-note {
  display: grid;
  gap: 10px;
  max-width: 34em;
  margin-top: var(--sp-7);
  padding: var(--sp-6);
  border-left: 3px solid var(--signal-deep);
  background: rgba(184, 255, 88, .04);
}
.cost-note b { color: var(--signal); font-size: var(--t-1); letter-spacing: -.02em; }
.cost-note span { color: var(--text-mute); font-size: 14.5px; line-height: 1.9; }

/* One-line replacement for the six-item "what this is not" box. */
.boundary-line {
  max-width: 46em;
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line-mid);
  color: var(--text-mute);
  font-size: 15px;
  line-height: 1.95;
}
.boundary-line b { color: var(--text); }

/* 11c. House rules ------------------------------------------------------- */
.rules { margin-top: var(--sp-9); padding-top: var(--sp-8); border-top: 1px solid var(--line-mid); }
.rules > h3 { font-size: var(--t-3); letter-spacing: -.04em; }
.rules > p { max-width: 30em; margin-top: var(--sp-4); color: var(--text-mute); line-height: 1.9; }
.rules-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 80px); margin-top: var(--sp-7); }
.rules-keep li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.rules-keep b { color: var(--signal); font: 800 12px/1.9 var(--mono); }
.rules-keep strong { display: block; font-size: 16px; letter-spacing: -.02em; }
.rules-keep span { display: block; margin-top: 6px; color: var(--text-mute); font-size: 14px; line-height: 1.8; }
.rules-out { align-self: start; padding: var(--sp-6); border: 1px solid rgba(214, 139, 67, .34); background: rgba(214, 139, 67, .05); }
.rules-out h4 { color: var(--amber); font: 800 11px/1 var(--mono); letter-spacing: .12em; }
.rules-out ul { margin-top: var(--sp-5); }
.rules-out li { position: relative; padding: 9px 0 9px 30px; color: var(--text-soft); font-size: 14.5px; line-height: 1.75; }
.rules-out li::before { content: "×"; position: absolute; left: 0; top: 9px; color: var(--amber); font: 800 14px/1.75 var(--mono); }
.rules-out p { margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px dashed rgba(214, 139, 67, .3); color: var(--text-mute); font-size: 13.5px; line-height: 1.85; }

/* 11d. Experiment disclosure --------------------------------------------- */
.experiment { text-align: left; }
.experiment-inner { width: min(920px, 100% - var(--gutter) * 2); margin-inline: auto; }
.experiment h2 { font-size: var(--t-4); max-width: 14em; }
.experiment h2 em { font-style: normal; color: var(--amber); }
.experiment-body { display: grid; gap: var(--sp-5); max-width: 28em; margin-top: var(--sp-7); }
.experiment-body p { color: var(--text-soft); line-height: 2; }
.signals { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; margin-top: var(--sp-8); background: var(--line); border: 1px solid var(--line); }
.signals div { padding: var(--sp-5); background: var(--ink-800); }
.signals dt { color: var(--signal); font: 750 10px/1 var(--mono); letter-spacing: .1em; }
.signals dd { margin: 12px 0 0; font-size: 15px; font-weight: 700; line-height: 1.55; letter-spacing: -.02em; }
.experiment-close {
  margin-top: var(--sp-8);
  padding: var(--sp-6);
  border: 1px solid rgba(214, 139, 67, .38);
  background: rgba(214, 139, 67, .07);
  max-width: 35em;
}
.experiment-close p { color: var(--text-soft); line-height: 1.95; }
.experiment-close p + p { margin-top: var(--sp-4); }
.experiment-close b { color: var(--amber); }

/* 12. Application ---------------------------------------------------------- */
.application-grid {
  display: grid;
  grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr);
  gap: clamp(46px, 7vw, 100px);
  align-items: center;
}
.application h2 { font-size: var(--t-5); }
.application-grid .lede { margin-top: var(--sp-5); }
.steps { display: grid; gap: 0; margin-top: var(--sp-7); border-top: 1px solid var(--line-paper); }
.steps li { display: grid; grid-template-columns: 34px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line-paper); }
.steps b { color: var(--signal-deep); font: 800 12px/1.7 var(--mono); }
.steps span { color: var(--paper-ink-soft); font-size: 14.5px; line-height: 1.75; }
.steps strong { display: block; color: var(--paper-ink); font-size: 15.5px; font-weight: 800; margin-bottom: 4px; }
.application .btn-ink { margin-top: var(--sp-7); }

.paper-form {
  position: relative;
  padding: clamp(26px, 3vw, 44px) clamp(20px, 2.6vw, 40px) var(--sp-6);
  background: var(--paper-100);
  border: 1px solid var(--line-paper);
  box-shadow: 13px 14px 0 rgba(23, 24, 16, .16);
  transform: rotate(-.35deg);
}
.paper-feed { position: absolute; left: 20px; top: 0; bottom: 0; width: 7px; opacity: .42; background: radial-gradient(circle, #6b6450 1.7px, transparent 2.3px) 50% 6px / 7px 18px repeat-y; }
.save-rail { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; margin-bottom: var(--sp-7); }
.save-rail span { position: relative; padding-top: 26px; color: #77715e; font: 650 9px/1.4 var(--mono); text-align: center; }
.save-rail span::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: #8e856d; }
.save-rail span::after { content: ""; position: absolute; left: 50%; top: 1px; width: 13px; height: 13px; background: var(--paper-100); border: 1px solid #7d765f; transform: translateX(-50%); }
.save-rail .done::after { background: var(--signal-deep); border-color: var(--signal-deep); }
.save-rail .now { color: var(--paper-ink); }
.save-rail .now::after { background: var(--signal); border-color: #31581f; box-shadow: 0 0 0 5px rgba(93, 143, 55, .16); }
.save-rail b { display: block; font-size: 11px; }
.paper-form > label { display: block; margin-bottom: 12px; color: var(--paper-ink); font-weight: 800; line-height: 1.6; }
.fake-input { min-height: 160px; padding: 18px; background: #f7edd4; border: 1px solid #807761; color: #837c67; line-height: 1.75; }
.fake-input i { display: block; margin-top: 64px; color: #55772f; font: 650 9.5px/1 var(--mono); font-style: normal; }
.fake-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.fake-actions span { padding: 10px 15px; border: 1px solid #5d5747; color: #302e25; font-size: 13px; }
.fake-actions span:last-child { background: #7ea34e; border-color: #587335; color: #10170b; font-weight: 700; }

/* 13. Data room ------------------------------------------------------------ */
.dataroom h2 { font-size: var(--t-4); max-width: 12em; }
.dataroom .lede { margin-top: var(--sp-5); }
.ai-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: var(--sp-7); background: var(--line); border: 1px solid var(--line); }
.ai-split > div { padding: var(--sp-6); background: var(--ink-700); }
.ai-split h3 { font-size: var(--t-1); margin-bottom: var(--sp-4); }
.ai-split .yes h3 { color: var(--signal); }
.ai-split .no h3 { color: var(--amber); }
.ai-split li { position: relative; padding: 8px 0 8px 29px; color: var(--text-soft); font-size: 14px; line-height: 1.75; }
.ai-split li::before { position: absolute; left: 0; top: 8px; font: 700 13px/1.75 var(--mono); }
.ai-split .yes li::before { content: "✓"; color: var(--signal); }
.ai-split .no li::before { content: "×"; color: var(--amber); }

.file-link { display: block; color: inherit; transition: transform .22s var(--ease); }
.file-link:hover { transform: translateY(-5px); }
.file-cover {
  min-height: 330px;
  display: flex;
  flex-direction: column;
  padding: var(--sp-6);
  background: var(--paper-400);
  color: var(--paper-ink);
  border: 1px solid #0c0d0b;
  box-shadow: 16px 18px 0 rgba(0, 0, 0, .5);
}
.file-cover small { color: #635d4c; font: 750 9.5px/1 var(--mono); letter-spacing: .14em; }
.file-cover strong { margin: var(--sp-7) 0 var(--sp-5); font-size: var(--t-4); line-height: 1.05; letter-spacing: -.05em; }
.file-cover span { max-width: 23em; color: #544f41; font-size: 14px; line-height: 1.7; }
.file-cover b { margin-top: auto; padding-top: var(--sp-5); color: #35591f; font: 800 11px/1 var(--mono); letter-spacing: .1em; }

/* 14. FAQ ------------------------------------------------------------------ */
.faq-layout { display: grid; grid-template-columns: minmax(0, .5fr) minmax(0, 1.5fr); gap: clamp(44px, 7vw, 110px); }
.faq-layout h2 { font-size: var(--t-4); }
.faq-list { border-top: 1px solid var(--line-strong); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary {
  position: relative;
  display: block;
  padding: 24px 48px 24px 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--t-1);
  font-weight: 750;
  letter-spacing: -.02em;
  transition: color .18s;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover { color: var(--signal); }
.faq-list summary::after { content: "+"; position: absolute; right: 8px; top: 24px; color: var(--signal); font: 800 20px/1.3 var(--mono); }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details > p { max-width: 42em; margin: -4px 0 26px; color: var(--text-mute); line-height: 1.9; }

/* 15. Closing + footer ----------------------------------------------------- */
.closing {
  position: relative;
  min-height: 700px;
  height: 84dvh;
  max-height: 900px;
  display: grid;
  align-items: center;
  overflow: clip;
}
.closing > img { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; object-position: center 48%; filter: saturate(.72) sepia(.08); }
.closing-shade {
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(94deg, rgba(3, 7, 9, .95), rgba(3, 7, 9, .74) 48%, rgba(3, 7, 9, .2)),
    linear-gradient(0deg, rgba(209, 119, 49, .15), transparent 55%);
}
.closing h2 { max-width: 12em; font-size: var(--t-6); line-height: 1; letter-spacing: -.06em; }
.closing .lede { margin-top: var(--sp-6); max-width: 27em; }
.closing .hero-actions { margin-top: var(--sp-7); }
.closing-cable { position: absolute; left: 0; right: 0; bottom: 12%; height: 3px; background: var(--signal); box-shadow: 0 0 24px rgba(184, 255, 88, .5); transform: scaleX(var(--closing-p, 0)); transform-origin: left; }

.site-footer { padding: var(--sp-6) 0; border-top: 1px solid var(--line); background: #020506; color: var(--text-faint); font: 650 10.5px/1.7 var(--mono); }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 24px; }
.footer-inner a:hover { color: var(--signal); }

/* 16. Apply page ----------------------------------------------------------- */
.apply-body { background: var(--ink-800); }
.demo-notice { padding: 10px 20px; background: var(--paper-300); color: #24241e; text-align: center; font: 750 11px/1.6 var(--mono); }
.apply-shell { width: min(1160px, 100% - var(--gutter) * 2); margin-inline: auto; }
.apply-nav .topnav { font-family: var(--sans); }
.linkbtn { padding: 0; border: 0; background: none; color: var(--text-mute); font-size: 13px; font-weight: 650; cursor: pointer; }
.linkbtn:hover { color: var(--signal); }

.stage-rail-wrap { position: relative; margin-top: var(--sp-5); padding: 12px 20px 18px; background: var(--paper-300); color: var(--paper-ink); box-shadow: 7px 8px 0 rgba(0, 0, 0, .3); }
.stage-rail-wrap::before { content: "APPLICATION ROUTE / 草稿只保存在這台裝置"; display: block; margin-bottom: 5px; color: #655f4e; font: 700 9px/1 var(--mono); letter-spacing: .08em; }
.stage-rail { display: flex; overflow-x: auto; scrollbar-width: thin; }
.stage-rail-wrap[data-mode="track"] { padding-block: 16px; }
.stage-rail-wrap[data-mode="track"]::before { display: none; }
.track-rail-label { color: #3f4633; font: 800 11px/1.5 var(--mono); letter-spacing: .08em; }
.track-back { flex: 0 0 164px; display: grid; align-content: center; min-height: 58px; margin-right: 22px; padding: 8px 14px; border: 1px solid #7b7460; background: #dfdccb; color: #24341d; text-align: left; cursor: pointer; }
.track-back span { font: 800 12px/1.35 var(--sans); }
.track-back small { margin-top: 3px; color: #655f4e; font: 700 9px/1.2 var(--mono); }
.stage-node { position: relative; min-width: 148px; padding: 29px 12px 0 0; border: 0; background: none; color: #6c6756; font: 700 10px/1.5 var(--mono); text-align: left; cursor: pointer; }
.stage-node::before { content: ""; position: absolute; z-index: 2; top: 5px; left: 0; width: 14px; height: 14px; background: var(--paper-300); border: 1px solid #5c5748; }
.stage-node::after { content: ""; position: absolute; top: 12px; left: 14px; right: 0; height: 1px; background: #7b7460; }
.stage-node:last-child::after { display: none; }
.stage-node.is-active { color: #203116; }
.stage-node.is-active::before { background: var(--signal); border-color: #46642d; box-shadow: 0 0 0 5px rgba(93, 143, 55, .16); }
.stage-node.is-complete { color: #315326; }
.stage-node.is-complete::before { content: "✓"; display: grid; place-items: center; background: var(--signal-deep); border-color: var(--signal-deep); color: #fff; font-size: 10px; }
.stage-node.is-complete::after { background: var(--signal-deep); }
.stage-node:disabled { cursor: not-allowed; opacity: .5; }

.apply-workbench { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: var(--sp-7); align-items: start; }
.apply-main { min-width: 0; padding: var(--sp-8) 0 var(--sp-10); }
.apply-companion { position: sticky; top: 138px; padding-top: var(--sp-8); text-align: center; }
.apply-companion img { width: 190px; height: auto; margin-inline: auto; opacity: .78; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .55)); }
.apply-companion p { color: var(--text-faint); font: 650 9.5px/1.8 var(--mono); }
.apply-companion strong { display: block; color: var(--signal); font-size: 11px; }

.apply-heading { margin-bottom: var(--sp-7); }
.apply-heading h1 { font-size: var(--t-5); }
.apply-heading > p:last-of-type { max-width: 38em; margin-top: var(--sp-4); color: var(--text-mute); line-height: 1.8; }
.track-heading { max-width: 760px; }
.track-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
.track-card { position: relative; display: grid; min-height: 330px; padding: clamp(24px, 4vw, 42px); overflow: hidden; border: 1px solid var(--line-strong); background: linear-gradient(145deg, rgba(184,255,88,.08), transparent 45%), var(--ink-700); color: var(--text); text-align: left; cursor: pointer; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.track-card::after { content: ""; position: absolute; right: -38px; bottom: -52px; width: 160px; height: 160px; border: 1px solid rgba(184,255,88,.16); border-radius: 50%; box-shadow: 0 0 0 24px rgba(184,255,88,.035), 0 0 0 48px rgba(184,255,88,.025); }
.track-card:hover, .track-card:focus-visible { transform: translateY(-5px); border-color: var(--signal); outline: 0; box-shadow: 0 20px 50px rgba(0,0,0,.3); }
.track-card-no { color: var(--signal); font: 800 11px/1 var(--mono); }
.track-card strong { align-self: end; margin-top: var(--sp-8); font-size: clamp(25px, 3vw, 36px); line-height: 1.15; }
.track-card em { margin-top: 10px; color: var(--signal); font: 800 16px/1.6 var(--sans); font-style: normal; }
.track-card > span:last-of-type { max-width: 34em; margin-top: var(--sp-4); color: var(--text-mute); font-size: 14px; line-height: 1.8; }
.track-card b { align-self: end; width: max-content; margin-top: var(--sp-6); padding-bottom: 5px; border-bottom: 1px solid var(--signal); color: var(--signal); font: 800 11px/1.4 var(--mono); }
.track-note { margin-top: var(--sp-5); color: var(--text-faint); font: 650 11px/1.7 var(--mono); }
.stage-objective { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: var(--sp-5); padding: 14px 0; border-block: 1px solid var(--line); color: var(--text-mute); font: 650 10px/1.6 var(--mono); }
.stage-objective b { color: var(--signal); }

.profile-intro { display: flex; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-5); padding: 14px 16px; border-left: 3px solid var(--signal); background: rgba(184,255,88,.055); color: var(--text-mute); font-size: 13px; line-height: 1.6; }
.profile-intro strong { color: var(--text); }
.optional { color: var(--text-faint); font: 650 10px/1 var(--mono); }
.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); margin-bottom: var(--sp-7); padding-bottom: var(--sp-7); border-bottom: 1px solid var(--line); }
.field { position: relative; margin-bottom: var(--sp-6); }
.field label, .field legend { display: flex; gap: 12px; align-items: baseline; margin-bottom: 10px; font-size: 16px; font-weight: 750; line-height: 1.6; }
.field-id { flex: 0 0 auto; color: var(--signal); font: 750 12px/1.6 var(--mono); }
.field input, .field textarea, .field select {
  width: 100%;
  padding: 15px 16px;
  border: 1px solid #3b494c;
  border-radius: 2px;
  background: #0c161a;
  color: var(--text);
  font-size: 17px;
  line-height: 1.75;
  transition: box-shadow .18s, border-color .18s;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--signal); outline: 0; box-shadow: 0 0 0 1px var(--signal), inset 4px 0 0 rgba(184, 255, 88, .1); }
.field-help { display: flex; justify-content: space-between; gap: 18px; margin-top: 8px; color: var(--text-faint); font: 650 10px/1.7 var(--mono); }
.field-error { display: none; margin-top: 8px; color: var(--danger); font-size: 13px; }
.field.has-error input, .field.has-error textarea { border-color: var(--danger); }
.field.has-error .field-error { display: block; }
.screenshot-field { grid-column: 1 / -1; }
.screenshot-field input[type="file"] { padding: 12px; color: var(--text-mute); }
.screenshot-field input[type="file"]::file-selector-button { margin-right: 16px; padding: 10px 14px; border: 1px solid var(--line-strong); background: var(--paper-300); color: #20211b; font-weight: 750; cursor: pointer; }
.upload-preview { display: flex; align-items: center; gap: 16px; min-height: 76px; margin-top: 10px; padding: 12px; border: 1px dashed var(--line-strong); color: var(--text-mute); }
.upload-thumb { flex: 0 0 72px; height: 52px; overflow: hidden; }
.upload-thumb img { width: 100%; height: 100%; object-fit: cover; }
.upload-preview strong { display: block; color: var(--text); font-size: 14px; }
.upload-preview small { display: block; margin-top: 6px; font: 650 10px/1.5 var(--mono); }
.required { color: var(--amber); font-family: var(--mono); }

.apply-status { display: flex; justify-content: space-between; gap: var(--sp-5); padding: var(--sp-5) 0; border-top: 1px solid var(--line); color: var(--text-mute); font: 650 11px/1.6 var(--mono); }
.save-state { color: var(--signal); }
.save-state::before { content: "■"; display: inline-block; margin-right: 9px; font-size: 8px; }
.save-state.is-saving::before { animation: blink .7s steps(2, end) infinite; }
.apply-actions { position: sticky; bottom: 0; z-index: 10; display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12px; padding: 18px 0; background: linear-gradient(transparent, var(--ink-800) 18%, var(--ink-800)); }
.apply-actions .btn { min-width: 140px; }

.preview-panel { padding: var(--sp-5) 0; border-top: 1px solid var(--line-strong); }
.preview-panel h2 { margin-bottom: var(--sp-5); font-size: var(--t-3); }
.preview-stage { padding: var(--sp-5) 0; border-top: 1px solid var(--line); }
.preview-stage h3 { margin-bottom: var(--sp-4); color: var(--signal); font: 750 12px/1 var(--mono); }
.preview-answer { display: grid; grid-template-columns: 180px 1fr; gap: 16px; margin: 12px 0; color: var(--text-soft); line-height: 1.7; }
.preview-answer strong { color: var(--text-faint); font: 700 11px/1.7 var(--mono); }
.consent-box { margin-top: var(--sp-7); padding: var(--sp-6); border: 1px solid var(--line-strong); background: var(--ink-700); }
.check-row { display: flex; align-items: flex-start; gap: 13px; margin: 14px 0; color: var(--text-soft); line-height: 1.7; }
.check-row input { width: 18px; height: 18px; margin-top: 5px; accent-color: var(--signal); }
.submit-message { margin-top: 18px; padding: 14px 16px; border-left: 2px solid var(--amber); background: rgba(214, 139, 67, .08); color: #c8c0aa; line-height: 1.7; }
.turnstile-wrap { min-height: 70px; margin-top: var(--sp-6); display: flex; align-items: center; }

/* 17. Privacy page --------------------------------------------------------- */
.privacy-body { background: var(--ink-800); }
.privacy-page { padding-bottom: var(--sp-10); }
.privacy-hero { position: relative; min-height: 560px; padding-top: clamp(80px, 11vw, 150px); padding-bottom: var(--sp-9); border-bottom: 1px solid var(--line); }
.privacy-hero h1 { max-width: 7em; font-size: var(--t-6); line-height: .92; letter-spacing: -.07em; }
.privacy-hero .lede { margin-top: var(--sp-6); max-width: 34em; }
.privacy-stamp { position: absolute; right: 0; bottom: var(--sp-8); width: 230px; padding: var(--sp-5); border: 1px solid var(--line-strong); background: var(--ink-700); box-shadow: 8px 8px 0 #020607; }
.privacy-stamp span, .privacy-stamp small { display: block; color: var(--text-faint); font: 650 9.5px/1.6 var(--mono); }
.privacy-stamp strong { display: block; margin: 8px 0 12px; color: var(--signal); font: 800 19px/1 var(--mono); }
.privacy-ledger { display: grid; grid-template-columns: 240px minmax(0, 850px); gap: clamp(44px, 7vw, 110px); padding-top: var(--sp-9); }
.privacy-index { position: sticky; top: 100px; align-self: start; display: grid; border-top: 1px solid var(--line); }
.privacy-index span, .privacy-index a { padding: 14px 0; border-bottom: 1px solid var(--line); font: 700 10px/1.5 var(--mono); }
.privacy-index span { color: var(--signal); }
.privacy-index a { color: var(--text-mute); transition: color .18s; }
.privacy-index a:hover, .privacy-index a.is-current { color: var(--text); }
.privacy-document section { scroll-margin-top: 96px; padding-bottom: var(--sp-9); margin-bottom: var(--sp-9); border-bottom: 1px solid var(--line); }
.privacy-document section > small { color: var(--signal); font: 750 9.5px/1 var(--mono); letter-spacing: .14em; }
.privacy-document h2 { margin: 15px 0 var(--sp-5); font-size: var(--t-3); }
.privacy-document p, .privacy-document li, .privacy-document dd { color: var(--text-soft); line-height: 1.9; }
.privacy-document p + p { margin-top: var(--sp-4); }
.privacy-document ul { display: grid; gap: 8px; margin-top: var(--sp-4); }
.privacy-document ul li { display: grid; grid-template-columns: 16px 1fr; gap: 12px; }
.privacy-document ul li::before { content: "▸"; color: var(--signal-deep); font-family: var(--mono); }
.privacy-note { margin-top: var(--sp-5); padding: 18px 20px; border-left: 2px solid var(--amber); background: rgba(214, 139, 67, .07); }
.purpose-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: var(--sp-6) 0; background: var(--line); }
.purpose-grid > div { padding: var(--sp-5); background: var(--ink-700); }
.purpose-grid dt { color: var(--signal); font-weight: 800; }
.purpose-grid dd { margin: 8px 0 0; font-size: 14px; }
.retention-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: var(--sp-6) 0; }
.retention-grid > div { padding: var(--sp-5); border: 1px solid var(--line); background: var(--ink-700); }
.retention-grid span { display: block; color: var(--text-faint); font: 700 9.5px/1 var(--mono); }
.retention-grid strong { display: block; margin: 14px 0 8px; color: var(--text); font-size: var(--t-2); }
.retention-grid p { font-size: 14px; }

/* 18. Motion --------------------------------------------------------------- */
[data-reveal] { opacity: 0; transform: translate3d(0, 26px, 0); transition: opacity .7s var(--ease-io), transform .9s var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal="left"] { transform: translate3d(-30px, 0, 0); }
[data-reveal="right"] { transform: translate3d(30px, 0, 0); }
[data-reveal="scale"] { transform: scale(.96); }
[data-reveal-delay="1"] { transition-delay: .08s; }
[data-reveal-delay="2"] { transition-delay: .16s; }
[data-reveal-delay="3"] { transition-delay: .24s; }
[data-reveal-delay="4"] { transition-delay: .32s; }

.pixel-burst { position: absolute; z-index: 30; left: 50%; top: 50%; width: 1px; height: 1px; pointer-events: none; }
.pixel-burst i { position: absolute; width: 6px; height: 6px; background: var(--signal); box-shadow: 0 0 8px rgba(184, 255, 88, .45); animation: burst .46s steps(5, end) forwards; }
.pixel-burst i:nth-child(2n) { background: var(--amber); }
@keyframes burst { to { opacity: 0; transform: translate3d(var(--bx), var(--by), 0) rotate(90deg); } }

.btn.is-transmitting { transform: translateY(1px) scale(.985); box-shadow: 0 0 0 5px rgba(184, 255, 88, .14); }

/* NOTE: content-visibility:auto was dropped. On a long page with
   scroll-behavior:smooth, its size placeholders resize mid-animation and move
   the anchor target underneath the scroll. This page is text-driven and its
   images are already lazy, so the paint saving did not justify the risk. */

/* 19. Responsive ----------------------------------------------------------- */
@media (max-width: 1180px) {
  .spine { display: none; }
  .premise-grid,
  .crt-layout,
  .application-grid,
  .faq-layout { grid-template-columns: minmax(0, 1fr); }
  .broadcast-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .rundown > li { grid-template-columns: 64px minmax(0, 1fr); }
  .rundown > li > p { grid-column: 2; }
  .gain-group { grid-template-columns: minmax(0, 1fr); }
  .crt-shell { width: min(600px, 100%); margin-inline: auto; }
  /* Below this width the sticky relay cannot hold three nodes and its copy in
     one viewport, so it becomes a static vertical list. */
  .relay { height: auto; }
  .relay-frame { position: relative; top: 0; height: auto; min-height: 0; max-height: none; padding-block: var(--band); }
  .relay-shell { grid-template-columns: minmax(0, 1fr); }
  .relay-readout { display: none; }
  .relay-stage { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); padding-left: 30px; align-items: stretch; }
  .relay-line { left: 8px; right: auto; top: 2%; bottom: 2%; width: 2px; height: auto; }
  .relay-line i { width: 100%; height: 100%; transform: scaleY(1); transform-origin: top; }
  .relay-packet { display: none; }
  .relay-node,
  .relay-node:nth-of-type(1),
  .relay-node:nth-of-type(2),
  .relay-node:nth-of-type(3) {
    position: relative;
    inset: auto;
    width: 100%;
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    align-items: center;
    gap: var(--sp-5);
    margin-bottom: 0;
    text-align: left;
    opacity: 1;
    transform: none;
  }
  .relay-node img { width: 150px; height: 200px; margin: 0; }
  .relay-node > div { min-height: 0; padding: 16px 18px; border-top: 0; border-left: 1px solid var(--line-mid); }
}

@media (max-width: 1000px) {
  .topnav a:not(.btn) { display: none; }
  .origin-grid { grid-template-columns: minmax(0, 1fr); }
  .cost-ticket { max-width: 460px; }
  .apply-workbench { grid-template-columns: minmax(0, 1fr); }
  .apply-companion { display: none; }
  .hero-wall { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .hero-ticket { position: relative; right: auto; bottom: auto; width: min(400px, 100%); margin-top: var(--sp-7); }
  .hero-veil { background: radial-gradient(ellipse 90% 76% at 30% 50%, rgba(3, 6, 8, .97) 0%, rgba(3, 6, 8, .9) 46%, rgba(3, 6, 8, .5) 80%), linear-gradient(180deg, rgba(3, 6, 8, .5), transparent 24%, rgba(3, 6, 8, .78)); }
  .privacy-ledger { grid-template-columns: minmax(0, 1fr); }
  .privacy-index { position: static; }
}

@media (max-width: 760px) {
  :root { --nav-h: 56px; --shell: 640px; }
  .brand { gap: 0; }
  .brand-logo { width: 108px; height: auto; }
  .brand-divider, .brand-community { display: none; }

  .hud {
    position: fixed;
    z-index: 39;
    top: var(--nav-h);
    left: 0; right: 0;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    height: 26px;
    padding: 0 14px;
    background: rgba(3, 7, 9, .92);
    border-bottom: 1px solid rgba(184, 255, 88, .18);
    backdrop-filter: blur(8px);
    pointer-events: none;
    color: var(--text-faint);
    font: 750 8px/1 var(--mono);
    letter-spacing: .08em;
  }
  .hud b { color: var(--signal); white-space: nowrap; }
  .hud i { position: relative; height: 3px; background: #26302d; overflow: hidden; }
  .hud i em { position: absolute; inset: 0; background: var(--signal); box-shadow: 0 0 12px var(--signal); transform: scaleX(var(--read-progress, 0)); transform-origin: left; }
  .hud > span { font-style: normal; }

  /* Stacked, not layered: behind the type the wall was invisible, which threw
     away the one thing that makes this hero the offer. */
  .hero { min-height: 0; height: auto; max-height: none; grid-template-rows: auto auto auto auto; }
  .roster-head { grid-template-columns: auto minmax(30px, 1fr) auto; gap: 10px; font-size: 8.5px; letter-spacing: .1em; }
  .hero-wall {
    grid-area: auto;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    height: min(64vw, 420px);
    transform: none;
  }
  .hero-veil { display: none; }
  .hero-walkers { grid-area: auto; height: min(64vw, 420px); margin-top: calc(min(64vw, 420px) * -1); }
  .seat em { display: none; }
  .seat b { top: 6px; left: 7px; font-size: 8px; }
  .hero-stage { grid-area: auto; padding-block: 46px 56px; }
  .hero-title { font-size: clamp(40px, 12.6vw, 64px); letter-spacing: -.055em; text-wrap: balance; }
  .hero-title .num { font-size: 1.18em; }
  .hero-copy { margin-top: var(--sp-5); }
  .hero-actions .btn { width: 100%; }
  .hero-veil { background: linear-gradient(180deg, rgba(3, 6, 8, .82) 0%, rgba(3, 6, 8, .93) 22%, rgba(3, 6, 8, .93) 74%, rgba(3, 6, 8, .8) 100%); }
  /* Reset the tablet placement: on one explicit column, `grid-column: 2`
     would open an implicit second track and crush the headline. */
  .hero-ticket { width: 100%; margin-top: var(--sp-7); }
  .hero-ticker li { padding-inline: 18px; font-size: 10px; }

  .split, .ai-split, .purpose-grid, .retention-grid, .profile-grid { grid-template-columns: minmax(0, 1fr); }
  .gap-board { margin-top: var(--sp-7); }
  .broadcast-head { padding-bottom: var(--sp-7); }
  .rundown > li { grid-template-columns: 46px minmax(0, 1fr); gap: 14px; padding: 26px 0; }
  .rundown-no { font-size: var(--t-1); }
  .session-note { grid-template-columns: minmax(0, 1fr); }
  .gain-list { grid-template-columns: minmax(0, 1fr); }
  .not-included { padding: var(--sp-6); }
  .dossier { grid-template-columns: minmax(0, 1fr); }
  .dossier > div { grid-template-columns: 80px minmax(0, 1fr); gap: 12px; }
  .whois-body { max-width: none; }
  .motive-open { max-width: none; }
  .motive-body, .motive-sign { max-width: none; margin-top: var(--sp-7); }
  .not-that { padding: var(--sp-6) var(--sp-5); }
  .rules-grid { grid-template-columns: minmax(0, 1fr); }
  .signals { grid-template-columns: minmax(0, 1fr); }
  .experiment-body { max-width: none; }

  .relay-node,
  .relay-node:nth-of-type(1),
  .relay-node:nth-of-type(2),
  .relay-node:nth-of-type(3) { grid-template-columns: 108px minmax(0, 1fr); gap: var(--sp-4); }
  .relay-node img { width: 108px; height: 148px; }
  .relay-node > div { padding: 14px 0 14px 16px; }

  .door { grid-template-columns: minmax(0, 1fr); margin-top: var(--sp-7); }
  .door-side { padding: var(--sp-6) 0; }
  .door-seam { height: 56px; border: 0; border-block: 1px solid var(--line); }
  .door-seam i { left: 0; right: 0; top: 50%; bottom: auto; width: auto; height: 2px; }
  .door-seam b { transform: none; background: var(--ink-700); }

  .paper-form { padding: 28px 18px; }
  .save-rail { grid-template-columns: repeat(6, 96px); overflow-x: auto; scrollbar-width: none; }
  .save-rail::-webkit-scrollbar { display: none; }
  .file-cover { min-height: 280px; }
  .band-paper::before, .band-paper::after { display: none; }

  .closing { min-height: 720px; height: auto; padding-block: var(--band); }
  .closing > img { object-position: 66% center; }
  .footer-inner { flex-direction: column; }

  .stage-rail-wrap { padding-inline: 14px; }
  .stage-node { min-width: 124px; }
  .track-back { flex-basis: 138px; margin-right: 14px; }
  .track-grid { grid-template-columns: minmax(0, 1fr); }
  .track-card { min-height: 280px; }
  .profile-intro { display: grid; }
  .apply-main { padding-top: var(--sp-6); }
  .apply-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .apply-actions .btn { min-width: 0; padding-inline: 10px; }
  .apply-actions .btn-primary { grid-column: 1 / -1; }
  .preview-answer { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .privacy-stamp { position: static; width: 100%; max-width: 300px; margin-top: var(--sp-7); }
  .privacy-hero { min-height: 0; }

  .props img { width: 74px !important; }
  .is-in .props img { opacity: .55; }
}

@media (hover: none), (pointer: coarse) {
  .hero-tune { display: none; }
  .gain-list li:hover { transform: none; }
}

/* 20. Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .boot { display: none; }
  .eyebrow::after { animation: none; opacity: .5; }
  .hero-tune, .crt-scan, .pixel-burst { display: none; }
  .hero-wall { transform: none !important; }
  .seat, .seat.is-taken em { animation: none; }
  .walker { transition: none !important; }
  .walker.is-moving .hop,
  .walker.is-moving .leg-l,
  .walker.is-moving .leg-r,
  .walker.is-moving .torso { animation: none; }
  .hero-ticker ul { animation: none; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .relay-node { opacity: 1 !important; transform: none !important; }
  .relay-line i { transform: scaleX(1) !important; }
  .closing-cable { transform: none !important; }
  .props img { opacity: .7; transform: none; }
}

/* 21. Sub-pages -------------------------------------------------------------
   The landing page carries one decision. Depth lives on /about/, /session/ and
   /rules/, each opened from the moment the question arises. */
.subpage-body { background: var(--ink-900); }
.subpage { padding-bottom: 0; }
.subpage-head {
  padding-block: clamp(70px, 10vw, 130px) clamp(48px, 6vw, 80px);
  border-bottom: 1px solid var(--line);
}
.subpage-head h1 { max-width: 15em; font-size: var(--t-5); letter-spacing: -.055em; line-height: 1.08; }
.subpage-head .lede { margin-top: var(--sp-6); }
.subpage-back { margin-top: var(--sp-6); }

/* Sections were authored for the landing page; on a sub-page the first one
   must not repeat the band padding that the page header already provides. */
.subpage .chapter:first-of-type { padding-top: clamp(60px, 7vw, 100px); }
.subpage .chapter { border-top: 0; }

.subpage-cta {
  padding-block: clamp(70px, 9vw, 120px);
  border-top: 1px solid var(--line-mid);
  background: var(--ink-800);
}
.subpage-cta h2 { font-size: var(--t-4); max-width: 16em; }
.subpage-cta .lede { margin-top: var(--sp-5); }
.subpage-cta .hero-actions { margin-top: var(--sp-6); }

/* Condensed session brief on the landing page. */
.session-brief { margin-top: var(--sp-8); border-top: 1px solid var(--line); }
.session-brief li {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  color: var(--text-soft);
  font-size: var(--t-1);
  line-height: 1.6;
  letter-spacing: -.02em;
}
.session-brief b { color: var(--signal); font: 800 15px/1.6 var(--mono); }

@media (max-width: 760px) {
  .subpage-head h1 { max-width: none; }
  .session-brief li { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; font-size: 15.5px; }
}

/* 22. Selling a free offer ---------------------------------------------------
   The price here is 60 minutes plus 90 days plus exposing a real site. The page
   has to sell against that cost, not against zero. */

/* Repeated conversion strip. Reference sales pages run 7-8 CTAs; this page had
   3, which was the single largest gap. */
.cta-strip {
  display: grid;
  justify-items: start;
  gap: 14px;
  margin-top: var(--sp-8);
  padding: var(--sp-6) var(--sp-7);
  border: 1px solid rgba(184, 255, 88, .3);
  background: linear-gradient(100deg, rgba(184, 255, 88, .07), transparent 62%);
}
.cta-strip p { font-size: var(--t-2); font-weight: 800; letter-spacing: -.03em; line-height: 1.5; }
.cta-strip span { color: var(--text-faint); font: 650 11.5px/1.6 var(--mono); }
.band-paper .cta-strip { border-color: rgba(23, 24, 15, .3); background: linear-gradient(100deg, rgba(23, 24, 15, .07), transparent 62%); }
.band-paper .cta-strip span { color: var(--paper-ink-soft); }

/* Pain recognition list */
.pain-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 1px;
  margin-top: var(--sp-8);
  background: var(--line);
  border: 1px solid var(--line);
}
.pain-list li { background: var(--ink-800); transition: background-color .2s; }
.pain-list li:hover { background: var(--ink-700); }
.pain-list label {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 14px;
  padding: var(--sp-6);
  cursor: pointer;
  color: var(--text-soft);
  font-size: 15.5px;
  line-height: 1.85;
}
.pain-list input {
  width: 18px; height: 18px;
  margin: 5px 0 0;
  accent-color: var(--signal);
  cursor: pointer;
}
.pain-list li.is-hit { background: rgba(184, 255, 88, .08); box-shadow: inset 2px 0 0 var(--signal); }
.pain-list li.is-hit span { color: var(--text); }

.pain-score {
  margin-top: var(--sp-5);
  color: var(--text-mute);
  font: 700 var(--t-1)/1.6 var(--sans);
  letter-spacing: -.02em;
}
.pain-score b { color: var(--signal); font-family: var(--mono); font-size: 1.15em; }
.pain-score.is-hit { color: var(--text); }

/* Outcome ledger */
.outcome-list { display: grid; gap: 1px; margin-top: var(--sp-8); background: var(--line); border-block: 1px solid var(--line); }
.outcome-list li {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) minmax(0, 1.35fr);
  gap: clamp(18px, 3vw, 46px);
  align-items: start;
  padding: clamp(22px, 2.6vw, 34px) 0;
  background: #030607;
}
.outcome-list b { color: var(--signal); font: 800 var(--t-2)/1 var(--mono); }
.outcome-list h3 { font-size: var(--t-1); line-height: 1.45; }
.outcome-list p { color: var(--text-mute); font-size: 14.5px; line-height: 1.9; }

/* The exchange, in place of a pricing table */
.deal { margin-top: var(--sp-9); border: 1px solid var(--line-mid); background: var(--ink-800); }
.deal-head { padding: var(--sp-6); border-bottom: 1px solid var(--line-mid); font-size: var(--t-2); font-weight: 800; letter-spacing: -.03em; }
.deal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-mid); }
.deal-grid > div { padding: var(--sp-6); background: var(--ink-800); }
.deal-grid b { display: block; margin-bottom: var(--sp-4); font: 800 11px/1 var(--mono); letter-spacing: .14em; }
.deal-give b { color: var(--amber); }
.deal-get b { color: var(--signal); }
/* NOT grid: these items contain inline <strong>, and a grid container turns
   every child element and every text run into its own track item, which shreds
   the sentence into one character per line. */
.deal-grid li {
  position: relative;
  padding: 9px 0 9px 30px;
  color: var(--text-soft);
  font-size: 14.5px;
  line-height: 1.8;
}
.deal-grid li::before { position: absolute; left: 0; top: 9px; font: 800 14px/1.8 var(--mono); }
.deal-give li::before { content: "−"; color: var(--amber); }
.deal-get li::before { content: "+"; color: var(--signal); }
.deal-grid strong { color: var(--text); }

/* Verifiable artifacts standing in for testimonials this cohort cannot have */
.proof-strip { margin-top: var(--sp-8); padding-top: var(--sp-6); border-top: 1px solid var(--line-mid); }
.proof-head { color: var(--text-mute); font-size: 14.5px; line-height: 1.8; }
.proof-strip ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; margin-top: var(--sp-5); background: var(--line); border: 1px solid var(--line); }
.proof-strip a { display: grid; gap: 7px; padding: 18px 20px; background: var(--ink-700); transition: background-color .2s; }
.proof-strip a:hover { background: var(--ink-600); }
.proof-strip b { color: var(--signal); font: 750 12px/1 var(--mono); letter-spacing: .06em; }
.proof-strip span { color: var(--text-mute); font-size: 13px; line-height: 1.6; }

@media (max-width: 900px) {
  .outcome-list li { grid-template-columns: 46px minmax(0, 1fr); gap: 14px; }
  .outcome-list li > p { grid-column: 2; }
  .deal-grid { grid-template-columns: minmax(0, 1fr); }
  .cta-strip { padding: var(--sp-6) var(--sp-5); }
  .cta-strip .btn { width: 100%; }
  .pain-list { grid-template-columns: minmax(0, 1fr); }
}