/* ============================================================================
   KEN SMITH ADVISORY — "CONVERGENCE"
   A scroll-directed film. static/css/cinema.css
   ----------------------------------------------------------------------------
   The whole site is one idea, staged as cinema: many lines going in, one line
   coming out. That is Ken's mark and it is also the sales argument, so the
   motion is not decoration, it IS the pitch.

   Structure of this file
     00  tokens + grade
     01  reset / page shell
     02  film furniture  (letterbox, grain, vignette, grade, title card)
     03  director's rail (nav + timecode + progress)
     04  type system + reveal primitives
     05  buttons
     06  SHOT 01  hero
     07  SHOT 02  the collapse   (pinned)
     08  SHOT 03  the flow       (pinned, lateral dolly)
     09  SHOT 04  the suite      (rack focus)
     10  SHOT 05  the process
     11  SHOT 06  price
     12  SHOT 07  founding rate
     13  SHOT 08  add-ons
     14  SHOT 09  the interview  (Ken)
     15  SHOT 10  method
     16  SHOT 11  contact
     17  end card
     18  motion contract (reduced motion + no-JS)

   Rules obeyed from the brand guidelines:
     Deep Teal #0D7377 dominates. Warm Amber #D4820A accents only, never in
     equal proportion, never beside teal on a dark surface as a pair of equals.
     Contrast is checked against WCAG AA on every surface, including the dark
     acts, which the old palette never had to survive.
   ========================================================================== */

/* ---------------------------------------------------------------- 00 tokens */
:root {
  /* brand, unchanged */
  --teal:          #0D7377;
  --teal-deep:     #0A5A5D;
  --teal-light:    #16A0A5;
  --teal-glow:     #1FC7CD;
  --ink:           #1A2E2E;
  --amber:         #D4820A;
  --amber-lit:     #F2A83B;

  /* the dark acts. graded, not just "dark grey" */
  --night:         #061312;
  --night-2:       #0A1B1A;
  --slate:         #0E1517;   /* cold, act 2 */
  --deep:          #072A2C;   /* teal-black, act 3 */

  /* light acts */
  --paper:         #FFFFFF;
  --paper-2:       #F4F6F6;

  /* ink on light */
  --t-hi:          #12211F;
  --t-mid:         #43514F;
  --t-lo:          #6B7676;

  /* ink on dark — all AA or better on --night / --slate / --deep */
  --d-hi:          #F2F7F6;
  --d-mid:         rgba(233, 243, 242, .74);
  --d-lo:          rgba(233, 243, 242, .50);
  --d-rule:        rgba(233, 243, 242, .14);

  --rule:          #E1E8E8;
  --rule-soft:     #EDF2F2;

  --font:      "Inter", Arial, Helvetica, sans-serif;
  --mono:      "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --wrap:      1180px;
  --gut:       clamp(20px, 4.6vw, 46px);

  /* the house easing. slow out, no bounce — a camera on a fluid head */
  --ease:      cubic-bezier(.22, 1, .36, 1);
  --ease-io:   cubic-bezier(.65, 0, .35, 1);

  --r:         12px;
  --r-lg:      20px;
}

/* --------------------------------------------------------- 01 page shell */
*, *::before, *::after { box-sizing: border-box; }

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

html.cine, html.cine body { background: var(--night); }

body.film {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.62;
  color: var(--t-mid);
  background: var(--paper);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
}

/* the intro locks the page. released by cinema.js the moment the card clears */
body.film.is-locked { overflow: hidden; height: 100vh; }

.film img { max-width: 100%; height: auto; display: block; }
/* :where() again: a plain `.film a` is (0,1,1) and out-ranks every .btn-*
   colour rule, which silently rendered every button's label in body grey. */
.film :where(a) { color: inherit; }
/* :where() carries zero specificity, so these resets never out-rank a plain
   single-class rule like `.end-say { margin: 0 auto }`. Writing them as
   `.film p { margin: 0 }` silently kills every one of those. */
.film :where(h1, h2, h3, h4) { margin: 0; font-weight: 700; letter-spacing: -.028em; line-height: 1.06; color: var(--t-hi); }
.film :where(p) { margin: 0; }
.film :where(ul) { margin: 0; padding: 0; list-style: none; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.wrap-wide { max-width: 1400px; }

/* grid children refuse to shrink without this; it is the whole reason a page
   passes at 1440 and overflows at 1100 */
.film [class*="grid"] > * { min-width: 0; }

/* Every dark act carries its own inverted ink so nothing inherits a light
   colour onto a black plate. Deliberately sets no background: each dark shot
   is graded differently and owns its own ground. */
.act-dark { color: var(--d-mid); }
.act-dark :where(h1, h2, h3, h4) { color: var(--d-hi); }

/* ------------------------------------------------- 02 film furniture */
/* Everything in here is fixed, pointer-transparent, and exists only to make
   the browser feel like a projector. */

.furniture { position: fixed; inset: 0; pointer-events: none; z-index: 90; }

/* --- letterbox. the single strongest "this is a film" signal we have --- */
.bar {
  position: fixed; left: 0; right: 0; height: 0;
  background: #000; z-index: 95; pointer-events: none;
  will-change: height;
}
.bar-t { top: 0; }
.bar-b { bottom: 0; }

/* --- grain. a real animated plate, not a static png --- */
.grain {
  position: fixed; inset: -60px; z-index: 92; pointer-events: none;
  opacity: .05; mix-blend-mode: overlay;
  will-change: transform;
}
.grain canvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; }

/* --- vignette + the colour grade plate --- */
.vignette {
  position: fixed; inset: 0; z-index: 91; pointer-events: none;
  background: radial-gradient(ellipse 120% 105% at 50% 45%,
              rgba(0,0,0,0) 42%, rgba(0,0,0,.10) 74%, rgba(0,0,0,.34) 100%);
  opacity: 0; transition: opacity .8s var(--ease);
}
.vignette.on { opacity: 1; }

.grade {
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  opacity: 0; mix-blend-mode: soft-light;
  background: linear-gradient(180deg, rgba(13,115,119,.9), rgba(6,19,18,.9));
}

/* --- the cold open --- */
.titlecard {
  position: fixed; inset: 0; z-index: 200;
  background: var(--night);
  display: grid; place-items: center;
  will-change: transform, opacity;
}
.titlecard::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 90% 70% at 50% 50%, rgba(13,115,119,.16), transparent 70%);
}
.tc-in { position: relative; z-index: 1; text-align: center; padding: 0 24px; }
.tc-mark { width: min(360px, 68vw); height: auto; margin: 0 auto 40px; overflow: visible; }
.tc-mark path, .tc-mark line { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.tc-line {
  font-family: var(--mono);
  font-size: clamp(11px, 1.5vw, 13px);
  letter-spacing: .34em; text-transform: uppercase;
  color: rgba(233,243,242,.42);
  opacity: 0;
}
.tc-say {
  margin-top: 18px;
  font-size: clamp(19px, 3vw, 30px);
  font-weight: 600; letter-spacing: -.02em; line-height: 1.32;
  color: var(--d-hi);
  max-width: 20ch; margin-left: auto; margin-right: auto;
  opacity: 0;
}
.tc-skip {
  position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; color: rgba(233,243,242,.3);
  background: none; border: 0; cursor: pointer; padding: 10px 16px;
  opacity: 0; transition: color .3s, opacity .6s .9s;
  pointer-events: auto;
}
.tc-skip:hover { color: rgba(233,243,242,.75); }
.titlecard.lit .tc-skip { opacity: 1; }

/* ------------------------------------------- 03 the director's rail (nav) */
.rail {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background .5s var(--ease), border-color .5s var(--ease), backdrop-filter .5s;
  border-bottom: 1px solid transparent;
}
.rail-in {
  display: flex; align-items: center; gap: 28px; height: 76px;
  max-width: 1400px; margin: 0 auto; padding: 0 var(--gut);
}
.rail-mark { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.rail-mark svg { width: 40px; height: 26px; overflow: visible; }
.rail-mark b {
  font-size: 15.5px; font-weight: 700; letter-spacing: -.018em; white-space: nowrap;
  color: var(--d-hi); transition: color .4s var(--ease);
}
.rail-mark i {
  font-style: normal; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .18em; text-transform: uppercase; display: block;
  color: rgba(233,243,242,.45); transition: color .4s var(--ease);
  margin-top: 2px;
}

.rail-nav { display: flex; gap: 26px; margin-left: auto; align-items: center; }
.rail-nav .btn { flex: none; white-space: nowrap; }
/* :not(.btn) on every one of these. `.rail-nav a` is (0,1,1) and quietly
   out-ranks the whole .btn-* system: it was overriding the CTA's padding down
   to `6px 0`, which crushed the button narrower than its own label. */
.rail-nav a:not(.btn) {
  position: relative; text-decoration: none; font-size: 14px; font-weight: 500;
  color: rgba(233,243,242,.62); transition: color .3s;
  padding: 6px 0;
}
.rail-nav a:not(.btn)::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease);
}
.rail-nav a:not(.btn):hover { color: var(--d-hi); }
.rail-nav a:not(.btn):hover::after { transform: scaleX(1); transform-origin: left; }

/* light acts flip the rail to ink */
.rail.on-light { background: rgba(255,255,255,.86); backdrop-filter: saturate(160%) blur(14px); border-bottom-color: var(--rule); }
.rail.on-light .rail-mark b { color: var(--t-hi); }
.rail.on-light .rail-mark i { color: var(--t-lo); }
.rail.on-light .rail-nav a:not(.btn) { color: var(--t-mid); }
.rail.on-light .rail-nav a:not(.btn):hover { color: var(--teal); }
.rail.on-dark.scrolled { background: rgba(6,19,18,.72); backdrop-filter: saturate(150%) blur(14px); border-bottom-color: var(--d-rule); }

/* the timecode. reads as a film scrubber, works as a section indicator */
.timecode {
  position: fixed; right: var(--gut); bottom: 26px; z-index: 99;
  font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; display: flex; align-items: center; gap: 12px;
  color: rgba(233,243,242,.44);
  transition: color .5s var(--ease), opacity .5s var(--ease);
  pointer-events: none; opacity: 0;
}
.timecode.lit { opacity: 1; }
.timecode.on-light { color: var(--t-lo); }
.timecode .tc-n { color: var(--amber-lit); }
.timecode.on-light .tc-n { color: var(--amber); }
.timecode .tc-name { transition: opacity .3s; }
@media (max-width: 900px) { .timecode { display: none; } }

/* the progress hairline, top of frame */
.progress {
  position: fixed; top: 0; left: 0; height: 2px; z-index: 101;
  width: 100%; transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, var(--teal), var(--teal-glow) 62%, var(--amber));
  will-change: transform;
}

/* ------------------------------------------ 04 type + reveal primitives */
.kicker {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--amber); margin-bottom: 22px;
}
.act-dark .kicker { color: var(--amber-lit); }
.kicker::before {
  content: ""; width: 26px; height: 1px; background: currentColor; opacity: .55;
  transform: scaleX(0); transform-origin: left;
  transition: transform .9s .1s var(--ease);
}
.in .kicker::before, .kicker.in::before { transform: scaleX(1); }

h1.mega  { font-size: clamp(37px, 5.5vw, 76px);  letter-spacing: -.04em;  line-height: 1.0; }
h2.big   { font-size: clamp(31px, 4.6vw, 60px);  letter-spacing: -.034em; line-height: 1.04; }
h2.mid   { font-size: clamp(26px, 3.4vw, 42px);  letter-spacing: -.03em;  line-height: 1.1; }
h3.small { font-size: clamp(18px, 1.5vw, 21px);  letter-spacing: -.018em; line-height: 1.25; }

.lede {
  font-size: clamp(17.5px, 1.55vw, 20.5px); line-height: 1.6;
  max-width: 56ch; color: var(--t-mid);
}
.act-dark .lede { color: var(--d-mid); }
.note { font-size: 14.5px; line-height: 1.6; color: var(--t-lo); }
.act-dark .note { color: var(--d-lo); }

/* --- the reveal primitives. all gated on .cine so no-JS shows everything --- */
.cine .r-up   { opacity: 0; transform: translate3d(0, 34px, 0); }
.cine .r-fade { opacity: 0; }
.cine .r-in   { opacity: 0; transform: translate3d(0, 18px, 0) scale(.985); }
.cine .r-up, .cine .r-fade, .cine .r-in {
  transition: opacity 1s var(--ease), transform 1.15s var(--ease);
  will-change: opacity, transform;
}
.cine .r-up.in, .cine .r-fade.in, .cine .r-in.in { opacity: 1; transform: none; }

/* the stagger. set --i on the child, the delay follows */
.cine [style*="--i"] { transition-delay: calc(var(--i) * 78ms); }

/* masked line reveal — the headline device. each .ln is a clipping window and
   its child slides up out of it, which is why the text appears to be pushed
   into frame rather than faded in. */
.lines { display: block; }
.ln { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.02em; }
.ln > span { display: block; will-change: transform; }
.cine .ln > span { transform: translate3d(0, 108%, 0); transition: transform 1.25s var(--ease); }
.cine .in .ln > span, .cine .ln.in > span { transform: none; }
.cine .in .ln:nth-child(2) > span { transition-delay: .085s; }
.cine .in .ln:nth-child(3) > span { transition-delay: .17s; }
.cine .in .ln:nth-child(4) > span { transition-delay: .255s; }
.cine .in .ln:nth-child(5) > span { transition-delay: .34s; }

/* the amber underscore, drawn not painted */
.mark-u { position: relative; display: inline-block; font-style: normal; white-space: nowrap; }
.mark-u::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .04em; height: .085em;
  background: var(--amber); border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.1s .55s var(--ease);
}
.act-dark .mark-u::after { background: var(--amber-lit); }
.cine .in .mark-u::after, .cine .mark-u.in::after { transform: scaleX(1); }
html:not(.cine) .mark-u::after { transform: none; }

/* a hairline that draws itself across a section break */
.hairline { height: 1px; background: var(--rule); transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease); }
.act-dark .hairline { background: var(--d-rule); }
.hairline.in { transform: scaleX(1); }

/* ------------------------------------------------------------ 05 buttons */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; padding: 16px 30px; border-radius: 999px; border: 1px solid transparent;
  font-family: var(--font); font-size: 15.5px; font-weight: 600; letter-spacing: -.005em;
  text-decoration: none; cursor: pointer; overflow: hidden; isolation: isolate;
  transition: color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.btn > span { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 10px; }
/* the fill wipes up from the floor of the button rather than cross-fading */
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit;
  transform: translateY(101%); transition: transform .55s var(--ease);
}
.btn:hover::before { transform: translateY(0); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 15px; height: 15px; flex: none; transition: transform .5s var(--ease); }
.btn:hover svg { transform: translateX(4px); }

.btn-fill   { background: var(--teal); color: #fff; }
.btn-fill::before { background: var(--ink); }
.btn-fill:hover { color: #fff; }

.btn-amber  { background: var(--amber); color: #1A1206; }
.btn-amber::before { background: #1A2E2E; }
.btn-amber:hover { color: #fff; }

.btn-line   { background: transparent; color: var(--teal); border-color: rgba(13,115,119,.4); }
.btn-line::before { background: var(--teal); }
.btn-line:hover { color: #fff; border-color: var(--teal); }

.act-dark .btn-line { color: var(--d-hi); border-color: rgba(233,243,242,.28); }
.act-dark .btn-line::before { background: var(--d-hi); }
.act-dark .btn-line:hover { color: var(--night); border-color: var(--d-hi); }

.btn-sm { padding: 11px 20px; font-size: 14px; }

/* ------------------------------------------------------- 06 SHOT 01 hero */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: center;
  background: var(--night); overflow: hidden;
  padding: 132px 0 108px;
}
.hero-canvas { position: absolute; inset: 0; z-index: 0; }
.hero-canvas canvas { width: 100%; height: 100%; display: block; }
/* the plate under the type. keeps the headline at AAA over the artwork no
   matter how bright the lines behind it get */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(6,19,18,.95) 0%, rgba(6,19,18,.9) 34%, rgba(6,19,18,.55) 58%, rgba(6,19,18,.2) 82%, rgba(6,19,18,.45) 100%),
    linear-gradient(180deg, rgba(6,19,18,.7) 0%, transparent 26%, transparent 70%, rgba(6,19,18,.85) 100%);
}
.hero-in { position: relative; z-index: 2; width: 100%; }
.hero-copy { max-width: min(730px, 58%); }
.hero h1 { color: var(--d-hi); }
.hero h1 .thin { font-weight: 300; color: rgba(233,243,242,.62); }
.hero .lede { margin-top: 30px; max-width: 50ch; color: var(--d-mid); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 42px; }
.hero-note { margin-top: 22px; font-family: var(--mono); font-size: 12.5px; letter-spacing: .05em; color: var(--d-lo); }
/* the copy gives the artwork the right half of the frame, until there is no
   right half left to give */
@media (max-width: 1080px) { .hero-copy { max-width: min(660px, 76%); } }
@media (max-width: 860px)  { .hero-copy { max-width: 100%; } .hero { padding: 112px 0 84px; min-height: 0; } }

/* the scroll cue. a film-strip perforation that runs downward on a loop */
.cue {
  position: absolute; left: var(--gut); bottom: 30px; z-index: 3;
  display: flex; align-items: center; gap: 14px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .26em;
  text-transform: uppercase; color: rgba(233,243,242,.4);
}
.cue-track { position: relative; width: 1px; height: 54px; background: rgba(233,243,242,.16); overflow: hidden; }
.cue-track::after {
  content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 18px;
  background: var(--amber-lit); animation: cue 2.4s var(--ease-io) infinite;
}
@keyframes cue { 0% { transform: translateY(-20px); opacity: 0 } 25% { opacity: 1 } 75% { opacity: 1 } 100% { transform: translateY(56px); opacity: 0 } }
@media (max-width: 900px) { .cue { display: none; } }

/* the four proof figures, sitting on the hero floor */
.proof {
  position: relative; z-index: 2; background: var(--night-2);
  border-top: 1px solid var(--d-rule); border-bottom: 1px solid var(--d-rule);
}
.proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.proof-cell { padding: 30px 0 32px; position: relative; }
.proof-cell + .proof-cell { padding-left: 34px; }
.proof-cell + .proof-cell::before {
  content: ""; position: absolute; left: 0; top: 26px; bottom: 26px; width: 1px; background: var(--d-rule);
}
.proof-cell b {
  display: block; font-size: clamp(21px, 2.3vw, 29px); font-weight: 700;
  letter-spacing: -.03em; color: var(--d-hi); line-height: 1.1;
}
.proof-cell span { display: block; margin-top: 8px; font-size: 13.5px; line-height: 1.5; color: var(--d-lo); }
@media (max-width: 780px) {
  .proof-grid { grid-template-columns: repeat(2, 1fr); }
  .proof-cell:nth-child(odd) { padding-left: 0; }
  .proof-cell:nth-child(odd)::before { display: none; }
  .proof-cell:nth-child(n+3) { border-top: 1px solid var(--d-rule); }
}

/* ------------------------------------------- 07 SHOT 02 the collapse */
/* THE DECK.
   One object, not five. A stack of five subscriptions seen in perspective,
   lit from the upper left, sitting on its own cast shadow. Scroll fans it into
   a cascade, each card carrying its own monthly cost, and a numeral on the
   right counts to five. It holds. Then the deck slams shut and turns to face
   you as one system, and the numeral falls to one.

   Five going in, one coming out. The mark, as a camera move.

   Everything that makes it read as an object rather than as five stickers is
   lighting discipline: ONE key, upper left, and every surface in the frame
   agrees about where it is. The deck carries the camera angle, the cards only
   translate underneath it, so there is exactly one perspective in the shot. */

.collapse { position: relative; background: var(--slate); }
.collapse-rail { height: 460vh; position: relative; }
.stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }

/* the room: a pool of light on the left where the object sits */
.stage-grade {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 55% 60% at 30% 46%, #1B2A31 0%, transparent 70%),
    radial-gradient(ellipse 100% 100% at 50% 50%, #0C1417 0%, #06090B 100%);
}
.stage-warm {
  position: absolute; inset: 0; z-index: 1; opacity: 0;
  background:
    radial-gradient(ellipse 55% 60% at 30% 46%, rgba(22,160,165,.42) 0%, transparent 70%),
    radial-gradient(ellipse 100% 100% at 50% 50%, #06282A 0%, #03181A 100%);
  will-change: opacity;
}

/* ---- the frame: object left, type right ---- */
.stage-in {
  position: relative; z-index: 3; height: 100%;
  max-width: 1400px; margin: 0 auto; padding: 0 var(--gut);
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  align-items: center; gap: clamp(24px, 4vw, 72px);
}

/* ---- the object ---- */
.deck-frame {
  position: relative;
  perspective: 1500px; perspective-origin: 46% 42%;
  display: grid; place-items: center;
  height: 100%;
}
.deck {
  position: relative; width: 320px; height: 546px;
  transform-style: preserve-3d;
  will-change: transform;
}
/* the ground it sits on. Without a cast shadow nothing is an object. */
.deck-shadow {
  position: absolute; left: 50%; top: 62%; width: 420px; height: 150px;
  margin-left: -210px; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.72) 0%, rgba(0,0,0,.34) 45%, transparent 72%);
  filter: blur(18px); transform: translateZ(-120px);
  will-change: transform, opacity;
}

.card {
  position: absolute; top: 50%; left: 50%; width: 320px; height: 210px;
  margin: -105px 0 0 -160px;
  border-radius: 14px; padding: 0; overflow: hidden;
  /* the key: light from the upper left, falling off to the lower right */
  background: linear-gradient(146deg, #2A3A41 0%, #1B262B 42%, #121A1E 100%);
  border: 1px solid rgba(233,243,242,.10);
  border-top-color: rgba(255,255,255,.20);
  border-left-color: rgba(255,255,255,.11);
  box-shadow: 0 26px 44px -14px rgba(0,0,0,.85), 0 2px 10px rgba(0,0,0,.5);
  will-change: transform, opacity, filter;
}
/* the specular: a single soft band where the key hits the top left corner */
.card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(146deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.02) 26%, transparent 52%);
}
/* every card behind the front one is in the deck's own shadow. Set per card
   by cinema.js so the falloff is exact rather than guessed. */
.card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: #04090B; opacity: var(--shade, 0);
}

/* The header band is exactly the height of one fan step, so a card stacked
   behind another is cut on a rule rather than through the middle of a
   sentence. That is the difference between deliberate occlusion and a bug. */
.card-head {
  position: relative; z-index: 1; height: 82px;
  padding: 15px 18px 0; border-bottom: 1px solid rgba(255,255,255,.08);
}
.card-strip { display: flex; align-items: center; gap: 9px; }
.card-strip i { width: 7px; height: 7px; border-radius: 50%; background: rgba(233,243,242,.24); }
.card-kind {
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(233,243,242,.42); margin-left: 4px;
}
.card-cost {
  margin-left: auto; font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em;
  color: var(--amber-lit); border: 1px solid rgba(242,168,59,.34);
  border-radius: 6px; padding: 3px 9px; white-space: nowrap;
}
.card h4 {
  margin: 12px 0 0; font-size: 17px; letter-spacing: -.018em; color: var(--d-hi);
}
.card p {
  position: relative; z-index: 1;
  margin: 14px 18px 0; font-size: 13px; line-height: 1.45; color: rgba(233,243,242,.6);
}
.card-rows { position: relative; z-index: 1; margin: 13px 18px 0; display: grid; gap: 6px; }
.card-rows i { display: block; height: 4px; border-radius: 2px; background: rgba(233,243,242,.13); }
.card-rows i:nth-child(2) { width: 74%; }
.card-rows i:nth-child(3) { width: 48%; }

/* the payoff: the same object, face on, lit teal, one login */
.unified {
  /* taller than a card by exactly the second row of cells: the resolved object
     is allowed to be bigger than the thing it replaced */
  position: absolute; top: 50%; left: 50%; width: 320px; height: 232px;
  margin: -116px 0 0 -160px;
  border-radius: 14px; overflow: hidden; opacity: 0;
  background: linear-gradient(146deg, #0F4548 0%, #093034 44%, #05201F 100%);
  border: 1px solid rgba(31,199,205,.42);
  border-top-color: rgba(120,240,240,.42);
  box-shadow: 0 30px 60px -16px rgba(0,0,0,.85), 0 0 70px rgba(13,115,119,.34);
  will-change: transform, opacity;
}
.unified::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(146deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.02) 28%, transparent 54%);
}
.unified-top {
  position: relative; z-index: 1; height: 82px;
  display: flex; align-items: center; gap: 8px; padding: 0 18px;
  border-bottom: 1px solid rgba(120,240,240,.14);
}
.unified-top i { width: 7px; height: 7px; border-radius: 50%; background: rgba(233,243,242,.24); }
.unified-top i:first-child { background: var(--teal-glow); }
.unified-top em {
  font-style: normal; margin-left: auto; font-family: var(--mono); font-size: 10px;
  letter-spacing: .18em; text-transform: uppercase; color: rgba(31,199,205,.9);
}
.unified-body {
  position: relative; z-index: 1; margin: 13px 18px 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px;
}
.unified-cell {
  border: 1px solid rgba(233,243,242,.12); border-radius: 8px; padding: 8px 9px 9px;
  background: rgba(255,255,255,.04);
}
.unified-cell b { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: -.005em; color: var(--d-hi); }
.unified-cell span { display: block; margin-top: 6px; height: 3px; border-radius: 2px; background: rgba(31,199,205,.45); }
.unified-cell span + span { width: 58%; background: rgba(233,243,242,.15); }

/* ---- the type ---- */
.say { position: relative; }
.say-block {
  position: absolute; top: 50%; left: 0; right: 0;
  transform: translateY(-50%); opacity: 0;
  will-change: opacity, transform;
}
.say-block h2 {
  color: var(--d-hi); font-size: clamp(28px, 3.7vw, 50px);
  letter-spacing: -.032em; line-height: 1.06;
}
/* the numeral. The only thing in frame at this size, so it is the focal point
   and the whole argument at once: five becomes one. */
.tally { margin-top: clamp(24px, 3.4vh, 44px); display: flex; align-items: baseline; gap: 16px; }
.tally b {
  font-size: clamp(66px, 9vw, 136px); font-weight: 700; line-height: .82;
  letter-spacing: -.06em; color: var(--d-hi); font-variant-numeric: tabular-nums;
}
.tally-of { display: block; }
.tally-of span {
  display: block; font-size: clamp(15px, 1.5vw, 19px); font-weight: 600;
  letter-spacing: -.01em; color: var(--d-hi);
}
.tally-of em {
  display: block; margin-top: 5px; font-style: normal;
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em;
  color: rgba(233,243,242,.56);
}
.say-b .tally b { color: var(--teal-glow); }
.say-b .tally-of em { color: rgba(31,199,205,.85); }

/* ---- the four lines, full frame, while the deck is racked out ---- */
.beat {
  position: absolute; inset: 0; z-index: 5; display: grid; place-items: center;
  padding: 0 var(--gut); text-align: center; pointer-events: none;
  opacity: 0; will-change: opacity, transform;
}
.familiar { display: grid; gap: 14px; max-width: 660px; margin: 0 auto; text-align: left; }
.familiar li {
  display: flex; gap: 15px; align-items: flex-start;
  font-size: clamp(15px, 1.55vw, 19px); line-height: 1.5; color: var(--d-hi);
  opacity: 0; transform: translateY(12px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  text-shadow: 0 2px 22px rgba(4,10,11,.9);
}
.familiar.lit li { opacity: 1; transform: none; }
.familiar.lit li:nth-child(2) { transition-delay: .1s }
.familiar.lit li:nth-child(3) { transition-delay: .2s }
.familiar.lit li:nth-child(4) { transition-delay: .3s }
.familiar li em {
  font-style: normal; flex: none; font-family: var(--mono); font-size: 11.5px;
  letter-spacing: .1em; color: var(--amber-lit); padding-top: 5px;
}

/* ---- narrow: the object goes below the type and loses its swagger ---- */
@media (max-width: 900px) {
  .collapse-rail { height: 400vh; }
  .stage-in {
    grid-template-columns: 1fr; align-content: center;
    gap: clamp(18px, 3vh, 34px); padding-top: 88px; padding-bottom: 40px;
  }
  .stage-grade, .stage-warm { background-position: 50% 62%; }
  .deck-frame { order: 2; height: auto; perspective: 1100px; }
  .say { order: 1; height: clamp(180px, 25vh, 236px); }
  .say-block { text-align: left; }
  .tally { margin-top: 18px; }
}
@media (max-width: 560px) {
  .unified-body { grid-template-columns: repeat(2, 1fr); }
}

/* ------------------------------------- 08 SHOT 03 the flow (lateral dolly) */
.flow { position: relative; background: var(--deep); }
.flow-rail { height: 360vh; position: relative; }
.flow-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.flow-stage::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 70% at 30% 50%, rgba(13,115,119,.34), transparent 68%);
}
.flow-head { position: relative; z-index: 3; padding: 0 var(--gut); max-width: 1400px; margin: 0 auto 46px; width: 100%; }
.flow-head h2 { color: var(--d-hi); max-width: min(680px, 90%); font-size: clamp(28px, 3.6vw, 46px); }
.flow-head p { margin-top: 16px; font-size: 17px; color: var(--d-mid); max-width: 50ch; }

.flow-view { position: relative; z-index: 2; padding-bottom: 58px; }
.flow-track {
  /* stretch, so every card is the same height and every dot lands on the rail */
  display: flex; align-items: stretch; gap: clamp(40px, 7vw, 96px);
  padding: 0 max(var(--gut), calc(50vw - 620px)) 0 var(--gut);
  will-change: transform;
}
/* the rail the packet rides */
.flow-line {
  position: absolute; left: 0; right: 0; top: auto; bottom: 30px; height: 1px;
  background: rgba(233,243,242,.14); z-index: 1;
}
.flow-line-fill {
  position: absolute; left: 0; top: 0; height: 1px; width: 100%;
  background: linear-gradient(90deg, var(--teal-glow), var(--amber-lit));
  transform-origin: left; transform: scaleX(0); will-change: transform;
}
.node {
  position: relative; flex: none; width: clamp(230px, 24vw, 288px);
  display: flex; flex-direction: column; padding: 26px 24px 28px;
  border: 1px solid rgba(233,243,242,.13); border-radius: 16px;
  background: rgba(6,26,27,.72); backdrop-filter: blur(4px);
  transition: border-color .6s var(--ease), background .6s var(--ease), transform .7s var(--ease), box-shadow .7s var(--ease);
  will-change: transform;
}
.node.lit {
  border-color: rgba(31,199,205,.5); background: rgba(11,52,54,.85);
  transform: translateY(-10px);
  box-shadow: 0 30px 70px rgba(0,0,0,.42), 0 0 60px rgba(13,115,119,.28);
}
.node-n {
  font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(233,243,242,.36); transition: color .6s var(--ease);
}
.node.lit .node-n { color: var(--amber-lit); }
.node h3 { margin-top: 12px; font-size: clamp(18px, 1.7vw, 22px); color: var(--d-hi); }
.node p { margin-top: 11px; font-size: 14.5px; line-height: 1.55; color: var(--d-mid); }
.node h3 + p { flex: 1; }
.node-dot {
  position: absolute; left: 50%; bottom: -32px; width: 11px; height: 11px; margin-left: -5.5px;
  border-radius: 50%; background: #0A2224; border: 1px solid rgba(233,243,242,.28);
  transition: background .5s, border-color .5s, box-shadow .5s, transform .5s var(--ease);
}
.node.lit .node-dot { background: var(--amber-lit); border-color: var(--amber-lit); transform: scale(1.35); box-shadow: 0 0 22px rgba(242,168,59,.75); }
.flow-foot {
  position: relative; z-index: 3; padding: 0 var(--gut); max-width: 1400px;
  margin: 54px auto 0; width: 100%;
  font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(233,243,242,.4); display: flex; gap: 16px; align-items: center;
}
.flow-foot .bar-mini { flex: 1; max-width: 240px; height: 1px; background: rgba(233,243,242,.15); position: relative; overflow: hidden; }
.flow-foot .bar-mini i { position: absolute; inset: 0; background: var(--amber-lit); transform-origin: left; transform: scaleX(0); will-change: transform; }
@media (max-width: 760px) {
  .flow-foot { flex-wrap: wrap; font-size: 10.5px; letter-spacing: .12em; }
  .flow-foot .bar-mini { min-width: 70px; }
  .flow-foot > span:last-child { flex-basis: 100%; margin: 8px 0 0 !important; }
  .flow-rail { height: 300vh; }
  .flow-head { margin-bottom: 32px; }
  .flow-foot { margin-top: 34px; }
}

/* -------------------------------------- 09 SHOT 04 the suite (rack focus) */
.suite { background: var(--paper); padding: clamp(96px, 13vh, 160px) 0; position: relative; }
.sec-head { max-width: min(920px, 100%); margin-bottom: clamp(44px, 6vw, 70px); }
.sec-head .lede { margin-top: 20px; max-width: 58ch; }

.suite-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden; }
.tile {
  position: relative; background: var(--paper); padding: 38px 32px 40px;
  transition: background .5s var(--ease);
  will-change: filter, opacity, transform;
}
.tile::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--teal); transform: scaleX(0); transform-origin: left;
  transition: transform .7s var(--ease);
}
.tile:hover { background: #FBFDFD; }
.tile:hover::after { transform: scaleX(1); }
.tile-n { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; color: var(--t-lo); }
.tile-icon { margin: 22px 0 20px; width: 34px; height: 34px; }
.tile-icon svg { width: 34px; height: 34px; stroke: var(--teal); fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.tile h3 { font-size: 19px; }
.tile p { margin-top: 11px; font-size: 15.5px; line-height: 1.62; color: var(--t-mid); }
@media (max-width: 980px) { .suite-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .suite-grid { grid-template-columns: 1fr; } }

.aside {
  margin-top: 34px; padding: 28px 32px; border-radius: var(--r-lg);
  background: linear-gradient(100deg, rgba(13,115,119,.07), rgba(13,115,119,.02));
  border-left: 3px solid var(--teal);
  font-size: 16.5px; line-height: 1.66; color: var(--t-mid);
}
.aside b { color: var(--t-hi); }

/* ------------------------------------------- 10 SHOT 05 the process */
.process { background: var(--paper-2); padding: clamp(96px, 13vh, 160px) 0; }
.steps { position: relative; display: grid; gap: 0; }
/* the spine draws itself as you pass */
.steps-spine { position: absolute; left: 27px; top: 20px; bottom: 40px; width: 1px; background: var(--rule); overflow: hidden; }
.steps-spine i { position: absolute; inset: 0; background: linear-gradient(180deg, var(--teal), var(--amber)); transform-origin: top; transform: scaleY(0); will-change: transform; }
.step { position: relative; padding: 0 0 clamp(44px, 6vw, 72px) 78px; }
.step:last-child { padding-bottom: 0; }
.step-n {
  position: absolute; left: 0; top: -4px; width: 55px; height: 55px; border-radius: 50%;
  display: grid; place-items: center; background: var(--paper); border: 1px solid var(--rule);
  font-family: var(--mono); font-size: 14px; font-weight: 500; color: var(--t-lo);
  transition: background .6s var(--ease), color .6s var(--ease), border-color .6s var(--ease), box-shadow .6s var(--ease);
}
.step.lit .step-n { background: var(--teal); border-color: var(--teal); color: #fff; box-shadow: 0 10px 28px rgba(13,115,119,.28); }
.step h3 { font-size: clamp(21px, 2.2vw, 27px); }
.step p { margin-top: 13px; font-size: 16.5px; line-height: 1.66; max-width: 58ch; }
.step-tag { display: inline-block; margin-top: 16px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--amber); }
@media (max-width: 620px) {
  .step { padding-left: 60px; }
  .step-n { width: 44px; height: 44px; font-size: 12.5px; }
  .steps-spine { left: 22px; }
}

/* ------------------------------------------------ 11 SHOT 06 the price */
.price { background: var(--night); padding: clamp(96px, 13vh, 160px) 0 clamp(80px, 10vh, 120px); position: relative; overflow: hidden; }
.price::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(13,115,119,.28), transparent 62%);
}
.price .wrap { position: relative; z-index: 1; }
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.tier {
  position: relative; display: flex; flex-direction: column;
  padding: 34px 30px 32px; border-radius: var(--r-lg);
  background: rgba(255,255,255,.035); border: 1px solid rgba(233,243,242,.13);
  transition: transform .8s var(--ease), border-color .6s var(--ease), background .6s var(--ease), box-shadow .8s var(--ease);
  will-change: transform;
}
.tier:hover { border-color: rgba(31,199,205,.42); background: rgba(255,255,255,.055); }
.tier.feat {
  border-color: rgba(31,199,205,.5);
  background: linear-gradient(180deg, rgba(13,115,119,.19), rgba(255,255,255,.03));
  box-shadow: 0 32px 90px rgba(0,0,0,.45), 0 0 70px rgba(13,115,119,.2);
}
.tier-tag {
  position: absolute; top: -12px; left: 30px;
  background: var(--amber); color: #17110A;
  font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; padding: 6px 13px; border-radius: 999px; white-space: nowrap;
}
.tier h3 { font-size: 24px; color: var(--d-hi); }
.tier-line { margin-top: 9px; font-size: 15px; line-height: 1.55; color: var(--d-mid); min-height: 46px; }
.tier-nums { margin: 24px 0; padding: 22px 0; border-top: 1px solid var(--d-rule); border-bottom: 1px solid var(--d-rule); }
.tier-build { display: flex; align-items: baseline; gap: 9px; }
.tier-build b { font-size: 42px; font-weight: 700; letter-spacing: -.04em; line-height: 1; color: var(--d-hi); font-variant-numeric: tabular-nums; }
.tier-build span { font-size: 14px; color: var(--d-lo); }
.tier-mo { margin-top: 12px; font-size: 15px; color: var(--d-mid); }
.tier-mo b { color: var(--d-hi); font-weight: 600; }
.tier-who { font-size: 14.5px; line-height: 1.55; color: var(--d-lo); font-style: italic; }
.tier-feats { margin: 22px 0 26px; display: grid; gap: 11px; flex: 1; }
.tier-feats li { display: flex; gap: 11px; font-size: 14.5px; line-height: 1.5; color: var(--d-mid); }
.tier-feats svg { flex: none; width: 15px; height: 15px; margin-top: 3px; stroke: var(--teal-glow); fill: none; stroke-width: 2.2; }
.tier .btn { width: 100%; }
@media (max-width: 980px) { .tiers { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; } }

/* ------------------------------------------ 12 SHOT 07 the founding rate */
.founding { position: relative; z-index: 1; margin-top: 46px; padding: 40px clamp(26px, 4vw, 48px); border-radius: var(--r-lg); border: 1px dashed rgba(242,168,59,.42); background: rgba(242,168,59,.055); }
.founding h3 { font-size: clamp(22px, 2.4vw, 30px); color: var(--d-hi); }
.founding > p { margin-top: 14px; font-size: 16.5px; line-height: 1.65; color: var(--d-mid); max-width: 62ch; }
.found-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 30px 0 24px; }
.found-cell { padding: 20px 22px; border-radius: var(--r); background: rgba(6,19,18,.42); border: 1px solid rgba(233,243,242,.1); }
.found-cell b { display: block; font-size: 15.5px; color: var(--d-hi); margin-bottom: 10px; }
.found-cell p { font-size: 14.5px; line-height: 1.6; color: var(--d-mid); }
.found-cell s { color: var(--d-lo); text-decoration-thickness: 1px; }
.found-cell em { font-style: normal; color: var(--amber-lit); font-weight: 600; }
@media (max-width: 860px) { .found-grid { grid-template-columns: 1fr; } }

.terms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 46px; position: relative; z-index: 1; }
.term { padding-top: 20px; border-top: 1px solid var(--d-rule); }
.term b { display: block; font-size: 15.5px; color: var(--d-hi); margin-bottom: 9px; }
.term p { font-size: 14.5px; line-height: 1.62; color: var(--d-mid); }
@media (max-width: 860px) { .terms { grid-template-columns: 1fr; gap: 16px; } }

/* ---------------------------------------------- 13 SHOT 08 the add-ons */
.addons { background: var(--paper); padding: clamp(96px, 13vh, 160px) 0; }
.addon-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.addon {
  position: relative; padding: 34px 32px 32px; border-radius: var(--r-lg);
  border: 1px solid var(--rule); background: var(--paper); overflow: hidden;
  transition: border-color .5s var(--ease), box-shadow .6s var(--ease), transform .6s var(--ease);
}
.addon::before {
  content: ""; position: absolute; inset: 0; opacity: 0;
  background: linear-gradient(140deg, rgba(13,115,119,.06), transparent 60%);
  transition: opacity .6s var(--ease);
}
.addon:hover { border-color: rgba(13,115,119,.4); box-shadow: 0 26px 60px rgba(26,46,46,.1); transform: translateY(-3px); }
.addon:hover::before { opacity: 1; }
.addon > * { position: relative; }
.addon-top { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.addon h3 { font-size: 22px; }
.addon-price { font-family: var(--mono); font-size: 13px; letter-spacing: .04em; color: var(--teal); white-space: nowrap; }
.addon p { margin-top: 14px; font-size: 15.5px; line-height: 1.64; }
.addon-for { margin-top: 16px; font-size: 14.5px; color: var(--t-lo); font-style: italic; }
.addon-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font-size: 14.5px; font-weight: 600; color: var(--teal); text-decoration: none; }
.addon-link svg { width: 14px; height: 14px; transition: transform .45s var(--ease); }
.addon:hover .addon-link svg { transform: translateX(5px); }
@media (max-width: 860px) { .addon-grid { grid-template-columns: 1fr; } }

/* -------------------------------------- 14 SHOT 09 the interview (Ken) */
.interview { position: relative; background: var(--night); overflow: hidden; padding: clamp(100px, 14vh, 170px) 0; }
.interview::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 70% at 22% 46%, rgba(13,115,119,.24), transparent 66%);
}
.interview .wrap { position: relative; z-index: 2; }
.iv-grid { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: clamp(40px, 6vw, 84px); align-items: start; }
.iv-frame { position: sticky; top: 108px; border-radius: var(--r-lg); overflow: hidden; background: #0A1514; }
.iv-frame img {
  width: 100%; display: block;
  filter: grayscale(.35) contrast(1.06) brightness(.92);
  transform: scale(1.06); will-change: transform;
  transition: filter 1.2s var(--ease);
}
.iv-frame:hover img { filter: grayscale(0) contrast(1.04) brightness(.98); }
.iv-frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, transparent 45%, rgba(6,19,18,.72) 100%),
    radial-gradient(ellipse 90% 80% at 50% 40%, transparent 45%, rgba(6,19,18,.55) 100%);
}
.iv-plate {
  position: absolute; left: 22px; right: 22px; bottom: 20px; z-index: 2;
  font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(233,243,242,.72); display: flex; justify-content: space-between; gap: 12px;
}
.iv-plate span:last-child { color: var(--amber-lit); }
.iv-copy h2 { color: var(--d-hi); }
.iv-copy p { margin-top: 22px; font-size: 17px; line-height: 1.72; color: var(--d-mid); max-width: 58ch; }
.iv-pull {
  margin-top: 34px; padding-left: 26px; border-left: 2px solid var(--amber);
  font-size: clamp(19px, 2.1vw, 25px); line-height: 1.42; font-weight: 600;
  letter-spacing: -.022em; color: var(--d-hi);
}
@media (max-width: 900px) { .iv-grid { grid-template-columns: 1fr; } .iv-frame { max-width: 340px; } }

/* --------------------------------------------- 15 SHOT 10 the method */
.method { background: var(--paper); padding: clamp(96px, 13vh, 160px) 0; }
.method-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(28px, 4vw, 56px); margin-top: 8px; }
.method-col h3 { font-size: clamp(21px, 2.1vw, 26px); margin-bottom: 16px; }
.method-col p + p { margin-top: 15px; }
.method-col p { font-size: 16px; line-height: 1.7; }
.method-note {
  margin-top: 26px; padding: 20px 24px; border-radius: var(--r);
  background: var(--paper-2); border: 1px solid var(--rule);
  font-size: 15px; line-height: 1.65; color: var(--t-mid);
}
@media (max-width: 860px) { .method-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------- 16 SHOT 11 the contact */
.contact { position: relative; background: var(--deep); padding: clamp(96px, 13vh, 160px) 0 clamp(80px, 10vh, 130px); overflow: hidden; }
.contact::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 70% at 70% 40%, rgba(31,199,205,.2), transparent 62%);
}
.contact .wrap { position: relative; z-index: 1; }
.ct-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); gap: clamp(38px, 6vw, 78px); align-items: start; }
.ct-copy h2 { color: var(--d-hi); }
.ct-copy p { margin-top: 20px; font-size: 17px; line-height: 1.7; color: var(--d-mid); max-width: 44ch; }
.ct-copy a { color: var(--teal-glow); text-decoration: none; border-bottom: 1px solid rgba(31,199,205,.35); }
.ct-copy a:hover { border-bottom-color: var(--teal-glow); }
.ct-meta { margin-top: 34px; display: grid; gap: 14px; }
.ct-meta div { display: flex; gap: 13px; align-items: flex-start; font-size: 14.5px; color: var(--d-mid); }
.ct-meta em { font-style: normal; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--amber-lit); padding-top: 3px; flex: none; }

.form { display: grid; gap: 18px; }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { position: relative; display: block; }
.field > span {
  display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(233,243,242,.5); margin-bottom: 9px;
}
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--font); font-size: 16px; color: var(--d-hi);
  background: rgba(255,255,255,.045); border: 1px solid rgba(233,243,242,.16);
  border-radius: var(--r); padding: 14px 16px; outline: none;
  transition: border-color .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
}
.field textarea { min-height: 132px; resize: vertical; line-height: 1.6; }
.field select { appearance: none; cursor: pointer; padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23E9F3F2' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 12px 8px;
}
.field select option { background: #0B2224; color: #F2F7F6; }
.field input::placeholder, .field textarea::placeholder { color: rgba(233,243,242,.34); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--teal-glow); background: rgba(255,255,255,.075);
  box-shadow: 0 0 0 3px rgba(31,199,205,.16);
}
.field.flash select { box-shadow: 0 0 0 3px rgba(242,168,59,.4); border-color: var(--amber-lit); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-foot { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 4px; }
.form-foot .note { color: var(--d-lo); }
@media (max-width: 900px) { .ct-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .f-row { grid-template-columns: 1fr; } }

.flashes { display: grid; gap: 10px; margin-bottom: 6px; }
.flashes p { padding: 13px 16px; border-radius: var(--r); font-size: 14.5px; background: rgba(242,168,59,.14); border: 1px solid rgba(242,168,59,.36); color: #FBE4C0; }

/* ------------------------------------------------------- 17 the end card */
.endcard { background: var(--night); padding: clamp(72px, 9vh, 110px) 0 44px; position: relative; overflow: hidden; }
.end-mark { display: block; width: min(300px, 60vw); height: auto; margin: 0 auto clamp(38px, 6vh, 64px); overflow: visible; }
.end-mark path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.end-say { text-align: center; font-size: clamp(19px, 2.4vw, 27px); font-weight: 600; letter-spacing: -.026em; color: var(--d-hi); max-width: 22ch; margin: 0 auto; line-height: 1.34; }
.end-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 30px; margin: clamp(38px, 6vh, 60px) 0 40px; }
.end-nav a { font-size: 14px; color: var(--d-mid); text-decoration: none; transition: color .3s; }
.end-nav a:hover { color: var(--teal-glow); }
.end-rule { height: 1px; background: var(--d-rule); }
.end-foot { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 26px; font-size: 13px; color: var(--d-lo); }
.end-foot a { color: var(--d-mid); text-decoration: none; }
.end-foot a:hover { color: var(--teal-glow); }
.end-credit { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }

/* ------------------------------------------------ 18 the motion contract */
/* Two audiences never see the film: people who asked their OS not to move
   things, and people whose JavaScript did not arrive. Both get the same page
   fully readable, fully usable, everything at its final state. */

html:not(.cine) .titlecard,
html:not(.cine) .bar,
html:not(.cine) .grain,
html:not(.cine) .timecode { display: none !important; }

/* the rail's tone classes are set by the film; without it, the bar needs a
   ground of its own or it floats transparently over the page */
html:not(.cine) .rail {
  background: rgba(6,19,18,.95); backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--d-rule);
}
html:not(.cine) .card,
html:not(.cine) .unified,
html:not(.cine) .beat,
html:not(.cine) .say-block { position: static; opacity: 1; transform: none; margin: 0 0 16px; }
html:not(.cine) .deck { width: auto; height: auto; transform: none; }
html:not(.cine) .deck-frame { perspective: none; display: block; }
html:not(.cine) .deck-shadow { display: none; }
html:not(.cine) .stage-in { grid-template-columns: 1fr; height: auto; padding: 60px var(--gut); }
html:not(.cine) .say { height: auto; }
html:not(.cine) .card, html:not(.cine) .unified { width: 100%; max-width: 420px; height: auto; padding-bottom: 18px; }
html:not(.cine) .collapse-rail,
html:not(.cine) .flow-rail { height: auto; }
html:not(.cine) .stage,
html:not(.cine) .flow-stage { position: static; height: auto; padding: 80px 0; display: block; }
html:not(.cine) .flow-track { flex-wrap: wrap; transform: none !important; }
html:not(.cine) .familiar li { opacity: 1; transform: none; }
html:not(.cine) .stage-warm { display: none; }


@media (prefers-reduced-motion: reduce) {
  .cine .r-up, .cine .r-fade, .cine .r-in { opacity: 1 !important; transform: none !important; transition: none !important; }
  .cine .ln > span { transform: none !important; transition: none !important; }
  .cine .mark-u::after { transform: none !important; transition: none !important; }
  .hairline { transform: scaleX(1) !important; }
  .cue-track::after { animation: none; }
  .titlecard { display: none !important; }
  .grain { display: none !important; }
  .btn::before { transition: none; }
  .familiar li { opacity: 1 !important; transform: none !important; }
  * { scroll-behavior: auto !important; }
}

/* focus states survive everything */
.film a:focus-visible, .film button:focus-visible,
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 4px;
}

/* mobile: the rail's inner links collapse, the CTA survives */
@media (max-width: 940px) {
  .rail-nav a:not(.btn) { display: none; }
  .rail-in { height: 66px; }
}
@media (max-width: 520px) {
  .rail-mark b { font-size: 14px; }
  .rail-mark i { display: none; }
}

/* skip link, for keyboards */
.skip-to {
  position: absolute; left: -9999px; top: 12px; z-index: 300;
  background: var(--amber); color: #17110A; padding: 12px 20px; border-radius: 8px;
  font-weight: 600; text-decoration: none;
}
.skip-to:focus { left: 16px; }