/* =====================================================================
   FIRST HOLD — v2 "LIGHT + LENS"
   The page is a dark set, lit like a film. Light is the material; lens
   behaviour is the motion. No hairlines, no hard edges, no mono.
   HTML renders every final state; site.js adds the motion.
   ===================================================================== */

/* ---------- Type (self-hosted) ----------
   Big Shoulders Display: every First Hold headline and display figure (condensed caps).
   Archivo: body and UI. Zodiak: no longer used (the folder mock is a DP's site in condensed caps + mono). */
@font-face {
  font-family: 'Big Shoulders Display';
  src: url('assets/fonts/big-shoulders-display-latin-wght-normal.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Zodiak';
  src: url('assets/fonts/Zodiak-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('assets/fonts/archivo-latin-wdth-normal.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --ink: #0B0C10;
  --blue: #172230;
  --bone: #ECE7DF;
  --grey: #8A8E97;
  --first: #F3D9B1;
  --sodium: #E38B3F;
  --dawn: #2B2333;
  --ember: #3E2D30;
  --paper: #EEEAE3;

  --bone-90: rgba(236, 231, 223, .9);
  --bone-80: rgba(236, 231, 223, .8);
  --bone-70: rgba(236, 231, 223, .7);
  --bone-60: rgba(236, 231, 223, .6);
  --bone-50: rgba(236, 231, 223, .5);
  --tone-1: rgba(236, 231, 223, .035);
  --tone-2: rgba(236, 231, 223, .06);

  --silk: cubic-bezier(.22, 1, .36, 1);
  --cut: cubic-bezier(.7, 0, .2, 1);

  --r1: 10px; --r2: 16px; --r3: 24px; --r4: 32px; --pill: 999px;
  --r-media: 24px;
  --shadow-long: 0 40px 120px -30px rgba(0, 0, 0, .65);
  --shadow-near: 0 24px 60px -28px rgba(0, 0, 0, .7);

  --margin: max(clamp(20px, 8.34vw, 160px), calc((100vw - 1760px) / 2));
  --gutter: clamp(14px, 1.4vw, 24px);
  --edge: clamp(16px, 2vw, 30px);

  --display: 'Big Shoulders Display', 'Arial Narrow', 'Roboto Condensed', 'Helvetica Neue', sans-serif;
  --sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* the sample client's own face (the "Your Name" paper site in the folder mock): not First Hold's type */
  --mock-serif: 'Zodiak', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--ink);
  color: var(--bone);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }

body {
  margin: 0;
  min-height: 100vh;
  background: transparent;   /* html carries the ink; the fixed .set layer must show through */
  font-family: var(--sans);
  font-size: 19px;
  font-weight: 400;
  font-stretch: 100%;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  overflow-x: clip;
}
img, video, canvas, iframe { display: block; max-width: 100%; }
[hidden] { display: none !important; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
p, h1, h2, h3, h4, figure, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; }
em { font-style: normal; font-weight: inherit; }
::selection { background: rgba(243, 217, 177, .9); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--first);
  outline-offset: 3px;
  border-radius: 6px;
}
.final :focus-visible, .nav.is-ink :focus-visible, .hud.is-ink :focus-visible { outline-color: var(--ink); }

.vh {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: 16px; top: 16px; z-index: 200;
  padding: 12px 18px; border-radius: var(--pill);
  background: var(--first); color: var(--ink); text-decoration: none; font-weight: 500;
  transform: translateY(-160%); transition: transform .4s var(--silk);
}
.skip:focus { transform: none; }

.wrap { padding-left: var(--margin); padding-right: var(--margin); }

/* ---------- Type scale ----------
   Display = Big Shoulders Display, condensed caps, the film-poster billing block.
   Set in sentence case in the HTML (for screen readers); uppercased here.
   Caps have no descenders, so the leading runs tight (.88–.92). */
.display, .h2, .h3,
.step__h, .specimen__name, .tier__price, .band__name, .band__price,
.guarantee__h, .guarantee__name, .final__h, .credit dd, .end__label {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .008em;
  font-variant-numeric: lining-nums tabular-nums;   /* the face ships proportional figures only; this engages if it ever gains tnum */
  font-synthesis: none;
}
.display {
  font-size: clamp(64px, min(10vw, 16.4vh), 168px);
  line-height: .89;
  text-wrap: balance;
}
.h2 {
  font-size: clamp(44px, 6vw, 104px);
  line-height: .9;
  text-wrap: balance;
}
.h3 {
  font-size: clamp(32px, 3.1vw, 52px);
  line-height: .92;
  letter-spacing: .012em;
  text-wrap: balance;
}
/* emphasis: colour, never italics (the face has none). First Light on the dark chapters. */
em.lit { color: var(--first); }
.tone-quiet { color: var(--grey); }
/* a two-sentence headline breaks at the sentence, each half balanced on its own */
.h-next { display: block; }
.body {
  font-size: clamp(17px, 1.32vw, 20px);
  line-height: 1.56;
  color: var(--bone-80);
  max-width: 33em;
  text-wrap: pretty;
}
.body--quiet { color: var(--bone-60); }
.small { font-size: 15px; line-height: 1.5; color: var(--bone-60); }
.kicker {
  margin-bottom: 26px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(243, 217, 177, .88);
}
.caption { margin-top: 24px; font-size: 15px; line-height: 1.5; color: var(--bone-60); max-width: 40em; }
.footnote { margin-top: 40px; font-size: 15px; color: var(--bone-60); }

/* SplitText lines get a feathered wipe while they rack into focus */
.line { display: block; }
.is-wiping {
  --wipe: 135;
  -webkit-mask-image: linear-gradient(100deg, #000 calc(var(--wipe) * 1% - 32%), rgba(0, 0, 0, 0) calc(var(--wipe) * 1%));
  mask-image: linear-gradient(100deg, #000 calc(var(--wipe) * 1% - 32%), rgba(0, 0, 0, 0) calc(var(--wipe) * 1%));
  will-change: transform, filter, opacity;
}

/* =====================================================================
   FIXED LAYERS
   ===================================================================== */
.set { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--ink); }
.set__layer { position: absolute; inset: 0; opacity: 0; }
.set__layer--blue { background: var(--blue); }
.set__layer--dawn { background: var(--dawn); }
.set__layer--ember { background: var(--ember); }
.set__layer--first { background: var(--first); }

/* no-JS / failed JS: every chapter carries its own light, feathered at the top */
.chapter { position: relative; overflow-x: clip; }
.chapter[data-bg="blue"] { background: var(--blue); }
.chapter[data-bg="dawn"] { background: linear-gradient(var(--blue), var(--dawn) 34vh); }
.chapter[data-bg="ember"] { background: linear-gradient(var(--dawn), var(--ember) 34vh); }
.chapter[data-bg="first"] { background: linear-gradient(var(--ember), var(--first) 40vh); }
#screening { background: linear-gradient(var(--ink), var(--blue) 40vh); }
.has-set .chapter, .has-set #screening { background: transparent; }

.leak { position: fixed; inset: 0; z-index: 40; pointer-events: none; overflow: hidden; }
.leak__band {
  position: absolute; left: 50%; top: 50%;
  width: 150vmax; height: 46vmax; margin: -23vmax 0 0 -75vmax;
  background:
    radial-gradient(50% 50% at 50% 50%, rgba(255, 214, 160, .55), rgba(243, 160, 90, .28) 38%, rgba(227, 139, 63, .08) 62%, rgba(227, 139, 63, 0) 76%);
  mix-blend-mode: screen;
  opacity: 0;
  transform: rotate(-32deg) translate3d(-90vmax, 0, 0);
  will-change: transform, opacity;
}

.grain {
  position: fixed; inset: 0; z-index: 45; pointer-events: none;
  opacity: .55;
  background-size: 180px 180px;
}

.lamp {
  position: fixed; inset: 0; z-index: 100;
  width: 100vw; height: 100vh; max-width: none;
  pointer-events: none;
  display: none;
}
.is-opening .lamp { display: block; background: var(--ink); }
.lamp.is-on { display: block; }

/* =====================================================================
   NAV
   ===================================================================== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 70;
  display: flex; align-items: center; gap: clamp(20px, 2.6vw, 44px);
  padding: 22px var(--margin);
  color: var(--bone);
  transition: transform .9s var(--silk), color .7s var(--silk);
}
.nav::before {
  content: ''; position: absolute; inset: 0 0 -70px; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(11, 12, 16, .9), rgba(11, 12, 16, .58) 50%, rgba(11, 12, 16, 0));
  opacity: 0; transition: opacity .7s var(--silk), background .7s;
}
.nav.is-scrolled::before { opacity: 1; }
.nav.is-hidden { transform: translate3d(0, -130%, 0); }
.nav.is-ink { color: var(--ink); }
.nav.is-ink::before { background: linear-gradient(to bottom, rgba(243, 217, 177, .9), rgba(243, 217, 177, .5) 52%, rgba(243, 217, 177, 0)); }

.brand {
  margin-right: auto;
  display: inline-flex; align-items: center; min-height: 44px;
  text-decoration: none; color: inherit;
}
.brand__word {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 700;
  font-stretch: 125%;
  font-size: 17px;
  line-height: 1;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  transform-origin: 0 50%;
}
.is-opening .brand__word { opacity: 0; }
.brand.is-staged {
  position: fixed; left: 0; top: 0; z-index: 101; margin: 0;
  width: 100vw; height: 100vh; justify-content: center; pointer-events: none;
}
.brand.is-staged .brand__word { font-size: clamp(54px, 11vw, 190px); letter-spacing: .04em; color: var(--bone); }

.nav__links { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 36px); transition: opacity 1.4s var(--silk) .2s; }
.nav .cta--nav { transition: box-shadow .8s var(--silk), opacity 1.4s var(--silk) .35s; }
.is-loading .nav__links, .is-loading .nav .cta--nav, .is-loading .hud { opacity: 0; transition-delay: 0s; }
.nav__links a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 15px; font-weight: 450; text-decoration: none;
  opacity: .7; transition: opacity .5s var(--silk);
}
.nav__links a:hover { opacity: 1; }

/* =====================================================================
   HUD — timecode + motion
   ===================================================================== */
.hud {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; justify-content: space-between; align-items: flex-end;
  padding: 0 var(--edge) 14px;
  color: var(--bone);
  pointer-events: none;
  transition: color .7s var(--silk), opacity .7s var(--silk);
}
.hud.is-ink { color: var(--ink); }
.hud.is-gone { opacity: 0; }
.hud__tc {
  padding-bottom: 12px;
  font-size: 13px; line-height: 1; letter-spacing: .03em;
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
  opacity: .5;
}
.hud__motion {
  pointer-events: auto;
  min-height: 44px; padding: 12px 2px 12px 16px;
  background: none; border: 0; cursor: pointer;
  font-size: 13px; line-height: 1; letter-spacing: .01em;
  opacity: .55; transition: opacity .4s;
}
.hud__motion:hover { opacity: 1; }

/* =====================================================================
   CTA — a lit object, not a UI chip
   ===================================================================== */
.ctas { display: flex; align-items: center; flex-wrap: wrap; gap: 18px 34px; }
.cta {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 18px 30px;
  border-radius: var(--pill);
  color: var(--ink); text-decoration: none; white-space: nowrap;
  font-family: var(--sans); font-size: 17px; font-weight: 500; line-height: 1; letter-spacing: -.002em;
  background: radial-gradient(140% 170% at 50% 0%, #FDEDD3 0%, #F3D9B1 46%, #E9C597 100%);
  box-shadow:
    0 0 60px -10px rgba(243, 217, 177, .45),
    0 18px 40px -20px rgba(227, 139, 63, .6),
    inset 0 9px 14px -9px rgba(255, 255, 255, .75),
    inset 0 -10px 18px -12px rgba(166, 104, 44, .4);
  transition: box-shadow .8s var(--silk);
  will-change: transform;
}
.cta:hover {
  box-shadow:
    0 0 84px -6px rgba(243, 217, 177, .62),
    0 22px 48px -20px rgba(227, 139, 63, .7),
    inset 0 9px 14px -9px rgba(255, 255, 255, .85),
    inset 0 -10px 18px -12px rgba(166, 104, 44, .38);
}
.cta__light {
  position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(84px circle at var(--lx, 50%) var(--ly, 0%), rgba(255, 255, 255, .95), rgba(255, 249, 238, .4) 42%, rgba(255, 255, 255, 0) 72%);
  opacity: 0; transition: opacity .8s var(--silk);
}
.cta:hover .cta__light, .cta:focus-visible .cta__light { opacity: 1; }
.cta__label { position: relative; display: inline-block; }
.cta--nav { min-height: 44px; padding: 14px 22px; font-size: 15px; }
.cta--ink {
  color: var(--first);
  background: radial-gradient(140% 170% at 50% 0%, #2B2620 0%, #17140F 48%, #0B0C10 100%);
  box-shadow:
    0 0 64px -14px rgba(160, 96, 40, .45),
    0 26px 50px -26px rgba(48, 28, 8, .6),
    inset 0 9px 14px -9px rgba(255, 236, 206, .2),
    inset 0 -10px 18px -12px rgba(0, 0, 0, .5);
}
.cta--ink:hover {
  box-shadow:
    0 0 84px -10px rgba(190, 112, 44, .55),
    0 30px 56px -26px rgba(48, 28, 8, .7),
    inset 0 9px 14px -9px rgba(255, 236, 206, .26),
    inset 0 -10px 18px -12px rgba(0, 0, 0, .5);
}
.cta--ink .cta__light {
  background: radial-gradient(90px circle at var(--lx, 50%) var(--ly, 0%), rgba(243, 217, 177, .42), rgba(227, 139, 63, .14) 46%, rgba(227, 139, 63, 0) 74%);
}

/* the secondary: text + an arrow that travels */
.go {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px;
  color: inherit; text-decoration: none;
  font-size: 17px; font-weight: 450;
  opacity: .74; transition: opacity .6s var(--silk);
}
.go:hover, .go:focus-visible { opacity: 1; }
.go__arrow {
  width: 22px; height: 12px; flex: none; overflow: visible;
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .7s var(--silk);
}
.go:hover .go__arrow, .go:focus-visible .go__arrow { transform: translateX(6px); }

/* =====================================================================
   01 · HERO + S2 KEY LIGHT
   ===================================================================== */
.hero {
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: flex-end;
  overflow: clip;
}
.keylight { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.keylight__rig {
  position: absolute; left: 0; top: 0; width: 0; height: 0;
  transform: translate(78vw, -16vh) rotate(39deg);
  will-change: transform;
}
.keylight__beam, .keylight__rays {
  position: absolute; left: 0; top: 0;
  width: 170vmax; height: 170vmax; margin-left: -85vmax;
  -webkit-mask-image: var(--cone);
  mask-image: var(--cone);
}
.keylight__beam--halo {
  --cone: conic-gradient(from 0deg at 50% 0%, transparent 0deg 143deg, #000 167deg 193deg, transparent 217deg 360deg);
  background: radial-gradient(42% 58% at 50% 0%, rgba(243, 217, 177, .17), rgba(243, 200, 150, .07) 46%, rgba(243, 217, 177, 0) 78%);
}
.keylight__beam--core {
  --cone: conic-gradient(from 0deg at 50% 0%, transparent 0deg 160deg, #000 173deg 187deg, transparent 200deg 360deg);
  background: radial-gradient(30% 52% at 50% 0%, rgba(255, 238, 212, .2), rgba(243, 217, 177, .07) 50%, rgba(243, 217, 177, 0) 80%);
}
.keylight__rays {
  --cone: conic-gradient(from 0deg at 50% 0%, transparent 0deg 150deg, #000 168deg 192deg, transparent 210deg 360deg);
  background:
    radial-gradient(40% 56% at 50% 0%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, .0) 30%, rgba(11, 12, 16, 1) 80%),
    repeating-conic-gradient(from 0deg at 50% 0%, rgba(255, 238, 212, .06) 0deg .7deg, rgba(255, 238, 212, 0) 1.4deg 2.6deg, rgba(255, 238, 212, .035) 3.1deg 3.6deg, rgba(255, 238, 212, 0) 4.2deg 5.4deg);
  mix-blend-mode: screen;
  filter: blur(5px);
  opacity: .9;
}
.keylight__pool {
  position: absolute; left: 0; top: 0;
  width: 74vw; height: 50vw; margin: -25vw 0 0 -37vw;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(243, 217, 177, .13), rgba(227, 139, 63, .045) 56%, rgba(227, 139, 63, 0));
  transform: translate(38vw, 64vh);
  will-change: transform;
}
.keylight__dust { position: absolute; inset: 0; width: 100%; height: 100%; }
.keylight__glow {
  position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none;
  width: 54vw; height: 40vw; margin: -20vw 0 0 -27vw;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 228, 192, .15), rgba(243, 170, 110, .05) 58%, rgba(243, 170, 110, 0));
  mix-blend-mode: screen;
  transform: translate(38vw, 64vh);
  will-change: transform;
}

/* =====================================================================
   MODULE SLOTS — 02 #pain and 09 #compare
   Each section's content and styling come from its module (modules/pain/,
   modules/compare/). These rules only style the plain static fallback
   (.slot-fb) that stands in until the module markup is integrated.
   Modules can use the shared tokens (--display, --sans, palette, radii)
   and classes (.h2, .h3, .kicker, .body, em.lit, .h-next, .cta, .go).
   ===================================================================== */
.slot-fb { padding-top: clamp(120px, 17vh, 210px); padding-bottom: clamp(120px, 17vh, 210px); }
.slot-fb__h { max-width: 12.5em; }
.slot-fb__list {
  list-style: none;
  margin-top: clamp(48px, 7vh, 80px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(24px, 3vw, 56px); row-gap: 28px;
}
.slot-fb__list li { max-width: 18em; font-size: clamp(18px, 1.4vw, 21px); font-weight: 500; line-height: 1.4; color: var(--bone-80); text-wrap: balance; }

/* =====================================================================
   03 · THE DETAILS NOBODY TEMPLATES
   ===================================================================== */
.craft { padding: clamp(130px, 19vh, 230px) 0 clamp(110px, 15vh, 190px); }
.craft__head {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter); row-gap: clamp(36px, 5vh, 56px);
}
.craft__h { grid-column: 1 / span 7; }
.craft__copy { grid-column: 8 / span 5; align-self: end; display: grid; gap: 18px; }

.specimens { margin-top: clamp(64px, 9vh, 110px); }
.specimens__note { font-size: 15px; color: var(--bone-50); }
.specimens__list {
  list-style: none;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(24px, 3.2vw, 60px); row-gap: clamp(56px, 8vh, 100px);
  align-items: start;
}
.specimen:nth-child(even) { margin-top: clamp(60px, 13vh, 150px); }
.specimen__fig figcaption { margin-top: 22px; max-width: 30em; font-size: 16px; line-height: 1.5; color: var(--bone-60); }
.specimen__name { display: block; margin-bottom: 8px; font-size: clamp(26px, 2vw, 32px); line-height: .92; letter-spacing: .02em; color: var(--bone); }

/* URL pill */
.url {
  display: inline-flex; align-items: center; gap: 9px; max-width: 100%;
  margin: 0 0 14px 8px; padding: 9px 15px;
  border-radius: var(--pill);
  background: var(--tone-2);
  font-size: 13px; line-height: 1; letter-spacing: .005em;
  color: var(--bone-60);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.url__tag { color: rgba(243, 217, 177, .9); font-weight: 500; }
.url__tag::after { content: '·'; margin-left: 9px; color: var(--bone-50); font-weight: 400; }
.url__addr { overflow: hidden; text-overflow: ellipsis; }

/* Screens (samples): soft, rounded, lit from behind */
.screen { position: relative; aspect-ratio: 16 / 10; }
.screen__spill, .shot__spill, .dip__spill {
  position: absolute; left: 7%; top: 9%; z-index: 0;
  width: 86%; height: 96%;
  object-fit: cover; border-radius: 40px;
  filter: blur(46px) saturate(1.55);
  opacity: .3;
  pointer-events: none;
}
.screen__glass {
  position: relative; z-index: 1;
  height: 100%;
  border-radius: var(--r-media);
  overflow: hidden; isolation: isolate;
  background: #10131A;
  box-shadow: var(--shadow-long);
  transform: translateZ(0);
}
.screen__poster, .screen__video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.screen__frame {
  position: absolute; left: 0; top: 0;
  width: 1440px; height: 900px; max-width: none;
  border: 0; background: #10131A;
  transform-origin: 0 0;
  opacity: 0; transition: opacity 1s var(--silk);
}
.screen__frame.is-ready { opacity: 1; }
.screen__ph {
  position: absolute; inset: 0;
  display: grid; place-items: center; text-align: center;
  padding: 24px;
  border-radius: inherit;
  background:
    radial-gradient(60% 70% at 70% 20%, rgba(243, 217, 177, .1), rgba(243, 217, 177, 0) 70%),
    radial-gradient(80% 80% at 20% 100%, rgba(23, 34, 48, .9), rgba(23, 34, 48, 0) 70%),
    #11141B;
  color: var(--bone-50);
  font-size: 14px; letter-spacing: .01em;
}
.screen__ph > span::after { content: ' · sample pending'; color: rgba(236, 231, 223, .32); }
.screen.is-missing .screen__spill { display: none; }

.screen__try {
  position: absolute; left: 50%; bottom: 22px; z-index: 4;
  min-height: 44px; padding: 12px 20px;
  border: 0; border-radius: var(--pill); cursor: pointer;
  background: rgba(11, 12, 16, .72); color: var(--bone);
  font-size: 14px; font-weight: 500;
  box-shadow: 0 14px 36px -16px rgba(0, 0, 0, .8);
  transform: translate3d(-50%, 8px, 0); opacity: 0;
  transition: opacity .6s var(--silk), transform .8s var(--silk), background .4s;
}
.screen__shield {
  position: absolute; inset: 0; z-index: 3; cursor: pointer;
  border-radius: inherit;
}
.screen:hover .screen__try, .screen__try:focus-visible { opacity: 1; transform: translate3d(-50%, 0, 0); }
.screen__try:hover { background: rgba(11, 12, 16, .9); }
.screen.is-live .screen__try, .screen.is-live .screen__shield { display: none; }
.screen__play {
  position: absolute; left: 50%; top: 50%; z-index: 4;
  min-height: 44px; padding: 12px 22px;
  border: 0; border-radius: var(--pill); cursor: pointer;
  background: rgba(11, 12, 16, .7); color: var(--bone); font-size: 14px; font-weight: 500;
  transform: translate(-50%, -50%);
}

/* =====================================================================
   04 · SEND THE FOLDER — S5
   ===================================================================== */
.folder { padding-top: clamp(130px, 18vh, 220px); }
.folder__head {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter); row-gap: 32px;
  margin-bottom: clamp(30px, 5vh, 64px);
}
.folder__h { grid-column: 1 / span 7; }
.folder__body { grid-column: 8 / span 5; align-self: end; }

.folder__stage {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 92px var(--margin) 26px;
}
.folder__set {
  position: relative;
  width: min(980px, 68vw, calc((100svh - 300px) * 1.6));
  display: flex; flex-direction: column; align-items: center;
}
.folder__url { margin: 0 0 16px; transition: opacity .8s var(--silk); }
/* the frame is the size reference for the grid itself (cq units on .fsite resolve against it) */
.folder__frame { position: relative; width: 100%; aspect-ratio: 16 / 10; container-type: inline-size; }
.folder__spill {
  position: absolute; inset: -6% -8% -16%; z-index: 0; pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(238, 234, 227, .16), rgba(243, 217, 177, .06) 55%, rgba(243, 217, 177, 0));
}

/* the finished site: a DP's homepage in his own brand (illustration).
   Taylor James Randall's tokens: near-black, warm white, oxblood, condensed caps + mono. */
.fsite {
  --tj-bg: #0A0A0A;
  --tj-fg: #F2EFEA;
  --tj-mute: rgba(242, 239, 234, .5);
  --tj-line: rgba(242, 239, 234, .12);
  --tj-red: #962E2E;
  --tj-red-t: #D65A4E;
  --tj-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  position: absolute; inset: 0; z-index: 1;
  container-type: inline-size;
  display: grid;
  grid-template-columns: 1cqw repeat(12, minmax(0, 1fr)) 1cqw;
  grid-template-rows: 38.5cqw 3.4cqw 9.5cqw 3.3cqw minmax(0, 1fr) 2.7cqw 2.1cqw;
  column-gap: 1.4cqw;
  color: var(--tj-fg);
}
.fsite__paper {
  position: absolute; inset: 0; z-index: -1;
  border-radius: var(--r-media);
  background: var(--tj-bg);
  box-shadow: var(--shadow-long), 0 0 0 1px rgba(242, 239, 234, .09), 0 0 110px -24px rgba(238, 234, 227, .22);
}
.fsite__nav, .fsite__id, .fsite__label { position: relative; z-index: 3; min-width: 0; }
.fsite__nav {
  grid-row: 1; grid-column: 2 / 14; align-self: start;
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 2.1cqw;
}
.fsite__mark { font-family: var(--display); font-weight: 800; font-size: 2.5cqw; line-height: .8; letter-spacing: .01em; }
.fsite__links {
  display: flex; gap: 2.3cqw;
  font-family: var(--tj-mono); font-size: .72cqw; line-height: 1; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(242, 239, 234, .82);
}
.fsite__id {
  grid-row: 1; grid-column: 2 / 10; align-self: end;
  display: flex; flex-direction: column; align-items: flex-start;
  padding-bottom: 2.5cqw;
}
.fsite__role {
  font-family: var(--tj-mono); font-size: .76cqw; line-height: 1; letter-spacing: .2em; text-transform: uppercase;
  color: var(--tj-red-t);
  text-shadow: 0 0 1.2cqw rgba(0, 0, 0, .7), 0 1px 2px rgba(0, 0, 0, .6);
}
.fsite__role i { font-style: normal; color: var(--tj-mute); }
.fsite__name {
  display: flex; flex-direction: column;
  margin: .9cqw 0 1.7cqw;
  font-family: var(--display); font-weight: 800; font-size: 6.7cqw; line-height: .84; letter-spacing: .004em; text-transform: uppercase;
}
.fsite__mask { display: block; overflow: hidden; padding-top: .3cqw; margin-top: -.3cqw; }
.fsite__mask > span { display: block; }
.fsite__cta { display: flex; align-items: center; gap: 1.8cqw; font-family: var(--tj-mono); font-size: .72cqw; line-height: 1; letter-spacing: .16em; text-transform: uppercase; }
.fsite__play { padding: .8cqw 1.15cqw; box-shadow: inset 0 0 0 1px rgba(242, 239, 234, .38); white-space: nowrap; }
.fsite__play i { font-style: normal; color: var(--tj-red-t); }
.fsite__rec { color: var(--tj-fg); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fsite__rec b { font-weight: 400; color: var(--tj-red-t); }
.fsite__rec b::after { content: ' \25CF'; }
.is-built .fsite__rec b::after { animation: tjRec 1.6s steps(1, end) infinite; }
@keyframes tjRec { 50% { opacity: 0; } }
.fsite__label {
  grid-row: 2; grid-column: 2 / 14; align-self: center;
  display: flex; justify-content: space-between;
  font-family: var(--tj-mono); font-size: .68cqw; line-height: 1; letter-spacing: .2em; text-transform: uppercase;
  color: var(--tj-mute);
}

.fslot { position: relative; min-width: 0; min-height: 0; }
.fslot--hero { grid-row: 1; grid-column: 1 / -1; }
.fslot--t1 { grid-row: 3; grid-column: 2 / span 3; }
.fslot--t2 { grid-row: 3; grid-column: 5 / span 3; }
.fslot--t3 { grid-row: 3; grid-column: 8 / span 3; }
.fslot--shot { grid-row: 3; grid-column: 11 / span 1; }
.fslot--memo { grid-row: 3 / span 2; grid-column: 12 / span 2; padding-left: .2cqw; }
.fslot--credits { grid-row: 6; grid-column: 2 / 14; }
.fslot--index { grid-row: 1; grid-column: 10 / 14; align-self: end; height: 12.2cqw; margin-bottom: 2.5cqw; }

.fi {
  position: relative; z-index: 1;
  width: 100%; height: 100%;
  border-radius: .3cqw;
  filter: blur(0px) brightness(1);
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0), 0 0 0 0 rgba(0, 0, 0, 0);
}
.fi--reel { border-radius: var(--r-media) var(--r-media) 0 0; }
.fi__p { position: absolute; inset: 0; border-radius: inherit; }
.fi__media {
  position: absolute; inset: 0; z-index: 1;
  border-radius: inherit; overflow: hidden;
  background: #16171A;
}
.fi__media img { width: 100%; height: 100%; object-fit: cover; }
.fi__reel {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0; transition: opacity .6s var(--silk);
}
.fi__reel.is-live { opacity: 1; }
.fi--shot .fi__media img { object-position: 50% 30%; }

/* raw (pile) chrome vs done (site) chrome */
.fi__raw { opacity: 0; }
.fi__done { opacity: 1; }
.fi__label {
  position: absolute; left: 0; top: calc(100% + 1.1cqw); z-index: 2;
  max-width: 110%;
  font-size: max(13px, 1.3cqw); line-height: 1.2; white-space: nowrap;
  color: var(--bone-80);
}
.fi__dur {
  position: absolute; right: 1cqw; top: 1cqw; z-index: 3;
  padding: .45cqw .75cqw; border-radius: var(--pill);
  background: rgba(11, 12, 16, .6); color: var(--bone);
  font-size: max(12px, 1.05cqw); line-height: 1; font-variant-numeric: tabular-nums;
}

/* the reel's grade: nav legible at the top, the bottom melts into the page */
.fs-scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(10, 10, 10, .62) 0%, rgba(10, 10, 10, 0) 24%),
    linear-gradient(0deg, #0A0A0A 0%, rgba(10, 10, 10, .78) 20%, rgba(10, 10, 10, .18) 52%, rgba(10, 10, 10, 0) 70%),
    linear-gradient(90deg, rgba(10, 10, 10, .45) 0%, rgba(10, 10, 10, 0) 45%);
}

/* work tiles: the caption sits under the frame */
.fs-cap {
  position: absolute; left: 0; right: 0; top: calc(100% + .95cqw); z-index: 2;
  display: flex; flex-direction: column; gap: .5cqw;
}
.fs-cap b {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1cqw;
  font-family: var(--display); font-weight: 700; font-size: 1.32cqw; line-height: .9; letter-spacing: .02em; text-transform: uppercase;
  color: var(--tj-fg); white-space: nowrap;
}
.fs-cap b i { font-family: var(--tj-mono); font-style: normal; font-weight: 400; font-size: .66cqw; letter-spacing: .14em; color: var(--tj-red-t); }
.fs-cap > span { font-family: var(--tj-mono); font-size: .62cqw; line-height: 1; letter-spacing: .12em; text-transform: uppercase; color: var(--tj-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* about */
.fs-bio { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; gap: .9cqw; }
.fs-bio b { font-family: var(--tj-mono); font-weight: 400; font-size: .66cqw; line-height: 1; letter-spacing: .2em; text-transform: uppercase; color: var(--tj-red-t); }
.fs-bio span { font-size: .96cqw; line-height: 1.42; color: rgba(242, 239, 234, .78); text-wrap: pretty; }

/* selected credits */
.fs-credits {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; gap: 1.8cqw;
  box-shadow: inset 0 1px 0 var(--tj-line);
}
.fs-credits b { flex: none; font-family: var(--tj-mono); font-weight: 400; font-size: .66cqw; line-height: 1; letter-spacing: .2em; text-transform: uppercase; color: var(--tj-red-t); }
.fs-credits__run {
  flex: 1; min-width: 0; display: flex; gap: 1.5cqw; overflow: hidden; white-space: nowrap;
  -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent);
  font-family: var(--display); font-weight: 600; font-size: 1.2cqw; line-height: 1; letter-spacing: .04em; text-transform: uppercase;
  color: rgba(242, 239, 234, .6);
}
.fs-credits__run span + span::before { content: '/'; margin-right: 1.5cqw; color: var(--tj-line); }

/* the reel's running order: the row on screen lights up */
.fs-index {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: flex-end; gap: .5cqw;
  font-family: var(--tj-mono); font-size: .66cqw; line-height: 1; letter-spacing: .1em; text-transform: uppercase;
}
.fs-index b { margin-bottom: .35cqw; font-weight: 400; letter-spacing: .2em; color: var(--tj-red-t); text-shadow: 0 0 1.2cqw rgba(0, 0, 0, .7); }
.fs-index span {
  display: grid; grid-template-columns: 2.2cqw minmax(0, 1fr) auto; align-items: baseline;
  padding-top: .5cqw; box-shadow: inset 0 1px 0 var(--tj-line);
  color: rgba(242, 239, 234, .42); white-space: nowrap;
  transition: color .35s var(--silk);
}
.fs-index span i, .fs-index span em { font-style: normal; }
.fs-index span em { padding-left: 1cqw; }
.fs-index span.is-on { color: var(--tj-fg); }
.fs-index span.is-on i { color: var(--tj-red-t); }

/* stills fan */
.fi__fan {
  position: absolute; inset: 0; z-index: 0;
  border-radius: inherit; overflow: hidden;
  box-shadow: 0 16px 40px -18px rgba(0, 0, 0, .8);
}
.fi__fan img { width: 100%; height: 100%; object-fit: cover; }
.fi__fan--a { transform: rotate(-9deg) translate(-9%, -10%); }
.fi__fan--b { transform: rotate(7deg) translate(8%, -14%); }

/* lookbook pdf page */
.fi__page {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; gap: .9cqw;
  padding: 1.2cqw;
  border-radius: inherit;
  background: #F4F1EC;
}
.fi__page-img { display: block; height: 46%; border-radius: .35cqw; overflow: hidden; }
.fi__page-img img { width: 100%; height: 100%; object-fit: cover; }
.fi__page-t { font-family: var(--display); font-weight: 700; font-size: 1.5cqw; line-height: 1; color: #1A1A1A; letter-spacing: .02em; text-transform: uppercase; }
.fi__bars { display: grid; gap: .55cqw; }
.fi__bars i { display: block; height: .45cqw; border-radius: 1cqw; background: rgba(26, 26, 26, .16); }
.fi__bars i:nth-child(3) { width: 82%; }
.fi__bars i:nth-child(5) { width: 64%; }

/* voice memo */
.fi__memo {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; gap: 1.2cqw;
  padding: 0 2cqw 0 1.1cqw;
  border-radius: var(--pill);
  background: #1C1E25;
  color: var(--bone);
}
.fi__memo-play {
  flex: none; width: 3.4cqw; height: 3.4cqw; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #FBE7C6, #F3D9B1 55%, #E2B988);
  position: relative;
}
.fi__memo-play::after {
  content: ''; position: absolute; left: 40%; top: 32%;
  border-style: solid; border-width: .65cqw 0 .65cqw 1.05cqw;
  border-color: transparent transparent transparent #1C1E25;
}
.fi__wave { flex: 1; display: flex; align-items: center; gap: .32cqw; height: 3cqw; min-width: 0; }
.fi__wave i { flex: 1; height: calc(var(--h) * 100%); border-radius: 1cqw; background: rgba(243, 217, 177, .7); }
.fi__memo-t { flex: none; font-size: max(12px, 1.15cqw); color: var(--bone-80); white-space: nowrap; }

/* credits spreadsheet */
.fi__sheet {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column;
  border-radius: inherit; overflow: hidden;
  background: #FBFAF7; color: #2A2A2A;
  font-size: .98cqw; line-height: 1;
}
.fi__row { flex: 1; display: grid; grid-template-columns: 1.3fr 1fr .8fr; align-items: center; gap: .8cqw; padding: 0 1cqw; white-space: nowrap; }
.fi__row:nth-child(odd) { background: #F1F0EC; }
.fi__row--h { background: #DCEADF !important; font-weight: 600; color: #1F3A27; }
.fi__row span { overflow: hidden; text-overflow: ellipsis; }

/* vimeo links note */
.fi__note {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: center; gap: .75cqw;
  padding: 1.3cqw 1.5cqw;
  border-radius: inherit;
  background: #E7E3DB; color: #33312D;
  font-size: 1.02cqw; line-height: 1.2; white-space: nowrap;
}
.fi__note span { overflow: hidden; text-overflow: ellipsis; }

/* PILE STATE (motion only; JS adds .is-pile to measure, then sorts it into the site) */
.is-pile .fslot { position: static; }
.is-pile .fi {
  position: absolute;
  left: var(--px); top: var(--py); width: var(--pw); height: auto;
  aspect-ratio: var(--par);
  transform: rotate(var(--pr));
  z-index: var(--pz);
  border-radius: .8cqw;
  box-shadow: 0 3cqw 6cqw -2.2cqw rgba(0, 0, 0, .78), 0 .3cqw .8cqw rgba(0, 0, 0, .25);
}
.is-pile .fi--reel   { --px: -21%; --py: -13%; --pw: 41%; --par: 2.4;  --pr: -5deg;   --pz: 8; }
.is-pile .fi--spec   { --px: 71%;  --py: -18%; --pw: 31%; --par: 2.43; --pr: 4deg;    --pz: 3; }
.is-pile .fi--stills { --px: 87%;  --py: 31%;  --pw: 22%; --par: 2.4;  --pr: 6deg;    --pz: 2; filter: blur(2.4px) brightness(.78); }
.is-pile .fi--pdf    { --px: 45%;  --py: 34%;  --pw: 15%; --par: .74;  --pr: -7deg;   --pz: 6; }
.is-pile .fi--shot   { --px: 21%;  --py: 47%;  --pw: 11.5%; --par: .8; --pr: 9deg;    --pz: 7; border-radius: .4cqw; }
.is-pile .fi--memo   { --px: 31%;  --py: 3%;   --pw: 33%; --par: 5.4;  --pr: -2.5deg; --pz: 5; border-radius: 99cqw; }
.is-pile .fi--xlsx   { --px: -17%; --py: 55%;  --pw: 33%; --par: 1.85; --pr: 3.5deg;  --pz: 9; filter: blur(1.6px) brightness(.95); }
.is-pile .fi--txt    { --px: 61%;  --py: 63%;  --pw: 27%; --par: 1.75; --pr: -4deg;   --pz: 4; filter: blur(2px) brightness(.8); }
.is-pile .fi__raw { opacity: 1; }
.is-pile .fi__done { opacity: 0; }
.is-pile .fsite__paper, .is-pile .fsite__nav, .is-pile .fsite__id, .is-pile .fsite__label, .is-pile .folder__spill, .is-pile .folder__url { opacity: 0; }

.steps {
  list-style: none;
  width: min(980px, 100%);
  margin-top: clamp(22px, 3.4vh, 40px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(20px, 3vw, 48px);
}
.step { transition: opacity .9s var(--silk); }

/* 05b · the booth: the Screening Room's second beat (it plays) */
.booth { margin-top: clamp(96px, 14vh, 160px); padding-top: clamp(40px, 6vh, 64px); border-top: 1px solid var(--tone-2); }
.booth__h { max-width: 14em; }
.booth__lede { margin-top: 24px; }
.booth__list {
  list-style: none;
  margin-top: clamp(36px, 5.5vh, 60px);
  max-width: 1080px;
  border-bottom: 1px solid var(--tone-2);
}
.booth__item {
  display: grid; grid-template-columns: 240px minmax(0, 4fr) minmax(0, 6fr);
  align-items: center;
  column-gap: clamp(28px, 4vw, 64px);
  padding: clamp(22px, 3.2vh, 32px) 0;
  border-top: 1px solid var(--tone-2);
}
.booth__fig { margin: 0; }
.booth__fig svg { display: block; width: 100%; height: auto; overflow: visible; }
/* the booth diagrams: hairlines in bone, the good path in First Light */
.booth__fig text { font-family: var(--sans); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; fill: var(--bone-50); }
.booth__fig .g-url { font-size: 14px; letter-spacing: .02em; text-transform: none; fill: var(--bone-60); }
.booth__fig .g-lit, .booth__fig .g-label--lit { fill: var(--first); }
.booth__fig .g-tile, .booth__fig .g-wall rect { fill: var(--tone-1); stroke: rgba(236, 231, 223, .28); stroke-width: 1; }
.booth__fig .g-tile--lit, .booth__fig .g-wall rect { fill: rgba(243, 217, 177, .1); stroke: rgba(243, 217, 177, .7); }
.booth__fig .g-play { fill: var(--first); }
.booth__fig .g-wire, .booth__fig .g-arc { fill: none; stroke: rgba(243, 217, 177, .55); stroke-width: 1.2; stroke-dasharray: 3 4; }
.booth__fig .g-pill { fill: var(--tone-2); stroke: rgba(236, 231, 223, .3); stroke-width: 1; }
.booth__fig .g-lock { fill: none; stroke: var(--first); stroke-width: 1.4; stroke-linejoin: round; }
.booth__fig .g-node, .booth__fig .g-dot { fill: var(--first); }
.booth__fig .g-halo { fill: none; stroke: rgba(243, 217, 177, .35); stroke-width: 1; }
.booth__fig .g-band { fill: rgba(227, 139, 63, .08); }
.booth__fig .g-axis { stroke: rgba(236, 231, 223, .35); stroke-width: 1; }
.booth__fig .g-grid { stroke: var(--tone-2); stroke-width: 1; }
.booth__fig .g-step { fill: none; stroke: var(--first); stroke-width: 2; stroke-linejoin: round; }
.booth__fig .g-stall { stroke: rgba(227, 139, 63, .6); stroke-width: 1; stroke-dasharray: 2 3; }
.booth__fig .g-bar { fill: rgba(236, 231, 223, .22); }
.booth__fig .g-bar--lit { fill: var(--first); }
.booth__fig .g-frame { fill: none; stroke: rgba(236, 231, 223, .35); stroke-width: 1; }
.booth__fig .g-frame--lit { fill: rgba(243, 217, 177, .1); stroke: var(--first); }
.booth__item .step__h { margin: 0; }
.booth__item p { max-width: 34em; font-size: 16px; line-height: 1.55; color: var(--bone-70); text-wrap: pretty; }
.booth__item p b { font-weight: 500; color: var(--bone); }
.booth__spec {
  margin-top: clamp(48px, 7vh, 72px);
  font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; line-height: 1.9;
  color: rgba(243, 217, 177, .72);
}
.step__h { margin-bottom: 8px; font-size: clamp(24px, 1.9vw, 30px); line-height: .92; letter-spacing: .02em; }
.step p { font-size: 15px; line-height: 1.48; color: var(--bone-70); text-wrap: pretty; }
.is-sorting .step { opacity: .34; }
.is-sorting .step.is-on { opacity: 1; }

/* =====================================================================
   05 · THE SCREENING ROOM — the diptych
   ===================================================================== */
.screening { padding: clamp(150px, 21vh, 250px) 0 clamp(110px, 15vh, 180px); }
.screening__head { margin-bottom: clamp(56px, 9vh, 100px); }
.screening__head .h2 { max-width: 11em; }
.diptych {
  position: relative;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(20px, 2.6vw, 44px); row-gap: 48px;
  align-items: start;
}
.diptych__light {
  position: absolute; z-index: 0; pointer-events: none;
  left: 0; top: -30%; width: 64%; height: 150%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(243, 217, 177, .12), rgba(227, 139, 63, .04) 56%, rgba(227, 139, 63, 0));
  transform: translate3d(58%, 0, 0);
  transition: transform 1.6s var(--silk), opacity 1.2s var(--silk);
}
.diptych[data-lean="embed"] .diptych__light { transform: translate3d(-4%, 0, 0); }
.dip { position: relative; z-index: 1; cursor: default; border-radius: var(--r-media); outline-offset: 8px; }
.dip__screen { position: relative; aspect-ratio: 16 / 10; }
.dip__img, .dip__screen .screen__ph {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--r-media);
  box-shadow: var(--shadow-long);
  transition: filter 1.4s var(--silk), opacity 1.4s var(--silk), transform 1.8s var(--silk);
}
.dip--embed .dip__img { filter: blur(1.6px) brightness(.55) saturate(.7); transform: scale(.985); }
.dip--room .dip__img { filter: brightness(.98) saturate(1.02); }
.diptych[data-lean="embed"] .dip--embed .dip__img { filter: blur(1.1px) brightness(.84) saturate(.82); transform: scale(1); }
.diptych[data-lean="embed"] .dip--room .dip__img { filter: brightness(.66) saturate(.9); transform: scale(.99); }
.diptych[data-lean="room"] .dip--room .dip__img { filter: brightness(1.05) saturate(1.06); transform: scale(1.006); }
.dip__spill { transition: opacity 1.4s var(--silk); }
.diptych[data-lean="embed"] .dip__spill { opacity: .14; }
.dip figcaption { margin-top: 24px; max-width: 30em; font-size: 16px; line-height: 1.55; color: var(--bone-60); transition: color 1s var(--silk); }
.dip figcaption b { display: block; margin-bottom: 4px; font-size: 17px; font-weight: 500; color: var(--bone); }
.diptych[data-lean="embed"] .dip--embed figcaption,
.diptych[data-lean="room"] .dip--room figcaption { color: var(--bone-80); }

/* =====================================================================
   06 + 07 · SELECTS / THE TREATMENT ROOM
   ===================================================================== */
.feature { padding: clamp(120px, 17vh, 210px) 0; }
.feature__grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter); row-gap: 56px;
  align-items: center;
}
.feature__copy { display: grid; gap: 24px; align-content: center; }
.feature__copy .kicker { margin-bottom: 0; }
.feature__copy .h2 { font-size: clamp(40px, 4.4vw, 76px); }
.feature--selects .feature__copy { grid-column: 1 / span 4; }
.feature--selects .feature__sample { grid-column: 5 / span 8; }
.feature--treatment .feature__sample { grid-column: 1 / span 8; }
.feature--treatment .feature__copy { grid-column: 9 / span 4; padding-left: clamp(0px, 1.4vw, 24px); }
.feature__sample { position: relative; }
.feature__sample .caption .code { font-weight: 500; color: var(--first); letter-spacing: .04em; font-variant-numeric: tabular-nums; }

.ping {
  position: absolute; z-index: 5;
  display: flex; align-items: flex-start; gap: 14px;
  width: max-content; max-width: 320px;
  padding: 15px 20px 15px 15px;
  border-radius: 18px;
  background: #F1ECE4;
  color: #121317;
  box-shadow: 0 34px 80px -26px rgba(0, 0, 0, .78), 0 8px 20px -12px rgba(0, 0, 0, .4);
  font-size: 14px; line-height: 1.38;
}
.ping--left { right: -28px; top: 18px; }
.ping--right { right: 28px; top: 18px; }
.ping__icon {
  flex: none; display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 11px;
  background: radial-gradient(120% 120% at 50% 0%, #22201C, #0B0C10);
  color: var(--first);
  font-size: 13px; font-weight: 700; font-stretch: 125%; letter-spacing: .03em; line-height: 1;
}
.ping__text { display: grid; gap: 1px; }
.ping__text b { font-weight: 600; color: #121317; }
.ping__text span { color: rgba(18, 19, 23, .64); }

/* =====================================================================
   08 · RECENT BUILDS
   ===================================================================== */
.builds { padding: clamp(120px, 17vh, 210px) 0 clamp(120px, 16vh, 200px); }
.builds__head {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter); row-gap: 24px;
  margin-bottom: clamp(60px, 9vh, 110px);
}
.builds__head .h2 { grid-column: 1 / span 6; }
.builds__head .body { grid-column: 8 / span 5; align-self: end; }
.builds__list {
  list-style: none;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter); row-gap: clamp(70px, 11vh, 130px);
  align-items: start;
}
.build--a { grid-column: 1 / span 7; }
.build--b { grid-column: 8 / span 5; margin-top: clamp(80px, 22vh, 240px); padding-left: clamp(0px, 2vw, 32px); }
.build--c { grid-column: 1 / span 5; margin-top: clamp(0px, 4vh, 60px); padding-right: clamp(0px, 2vw, 32px); }
.build--d { grid-column: 6 / span 7; margin-top: clamp(60px, 14vh, 170px); }
.shot { position: relative; }
.shot__glass {
  position: relative; z-index: 1;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-media); overflow: hidden; isolation: isolate;
  background: #0E1117;
  box-shadow: var(--shadow-long);
}
.shot__still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.shot__page {
  position: absolute; left: 0; top: 0; width: 100%; height: auto; max-width: none;
  opacity: 0; transition: opacity 1s var(--silk);
  will-change: transform;
}
.shot.has-page .shot__page { opacity: 1; }
.build__cap { margin-top: 22px; font-size: 16px; line-height: 1.5; color: var(--bone-60); }
.build__cap b { display: block; margin-bottom: 2px; font-size: 17px; font-weight: 500; color: var(--bone); }

/* =====================================================================
   10 · WHAT IT COSTS
   ===================================================================== */
.pricing { padding: clamp(120px, 17vh, 210px) 0 clamp(120px, 17vh, 210px); }
.pricing__head {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter); row-gap: 24px;
  margin-bottom: clamp(56px, 8vh, 96px);
}
.pricing__head .h2 { grid-column: 1 / span 6; }
.pricing__head .body { grid-column: 8 / span 5; align-self: end; }

/* tiers: an editorial rate card in rows, not three SaaS boxes */
.tiers { display: grid; gap: 8px; }
.tier {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter); row-gap: 14px;
  padding: clamp(30px, 4vh, 44px) clamp(22px, 2.4vw, 40px);
  border-radius: var(--r4);
  background: var(--tone-1);
}
.tier__name { grid-column: 1 / span 3; grid-row: 1; align-self: start; font-size: 19px; font-weight: 500; line-height: 1.25; }
.tier__flag { grid-column: 1 / span 3; grid-row: 2; align-self: start; font-size: 14px; font-weight: 450; color: var(--first); }
.tier__price {
  grid-column: 4 / span 4; grid-row: 1 / span 3;
  font-size: clamp(64px, 6.9vw, 116px); line-height: .84; letter-spacing: .004em;
  white-space: nowrap;
}
.tier__from { margin-right: .3em; font-family: var(--sans); font-size: 16px; font-weight: 450; letter-spacing: 0; text-transform: none; color: var(--bone-70); vertical-align: .32em; }
.tier__price .tier__from { position: absolute; right: 100%; top: .14em; margin-right: 12px; vertical-align: 0; }
.tier__price { position: relative; }
.tier__plan { grid-column: 1 / span 3; grid-row: 3; align-self: end; font-size: 15px; color: var(--bone-60); }
.tier__for { grid-column: 8 / span 5; grid-row: 1; font-size: 18px; line-height: 1.4; color: var(--bone); text-wrap: pretty; }
.tier__inc { grid-column: 8 / span 5; grid-row: 2 / span 2; font-size: 15px; line-height: 1.55; color: var(--bone-60); text-wrap: pretty; }
.tier:not(.tier--lit) .tier__plan { grid-row: 2 / span 2; }
/* monthly rates inside a rate card (2026-10-20) */
.rates { list-style: none; margin-top: 20px; border-top: 1px solid var(--tone-2); }
.rate { display: grid; grid-template-columns: 5.2em minmax(0, 1fr); column-gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--tone-2); }
.rate__price { font-family: var(--display); font-weight: 800; font-size: 28px; line-height: 1; letter-spacing: .01em; color: var(--bone); white-space: nowrap; }
.rate__per { margin-left: 2px; font-family: var(--sans); font-size: 13px; font-weight: 450; letter-spacing: 0; color: var(--bone-60); }
.rate__what { font-size: 15px; line-height: 1.5; color: var(--bone-60); text-wrap: pretty; }
.rate__what b { font-weight: 500; color: var(--bone); }
.rates__note { margin-top: 14px; font-size: 14px; line-height: 1.55; color: var(--bone-60); text-wrap: pretty; }
.rates__note b { font-weight: 500; color: var(--bone); }
.tier--lit { overflow: hidden; background: rgba(243, 217, 177, .055); box-shadow: 0 40px 100px -50px rgba(227, 139, 63, .35); }
.tier__lamp {
  position: absolute; z-index: -1; pointer-events: none;
  left: 18%; top: -70%; width: 60%; height: 220%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(243, 217, 177, .14), rgba(227, 139, 63, .04) 55%, rgba(227, 139, 63, 0));
}

/* the receipt */
.receipt {
  margin-top: clamp(40px, 6vh, 64px);
  max-width: 820px;
  border-radius: var(--r3);
  background: var(--tone-1);
  transition: background .6s var(--silk);
}
.receipt[open], .receipt:hover { background: var(--tone-2); }
.receipt__sum {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 20px 28px; flex-wrap: wrap;
  min-height: 44px; padding: 22px 26px;
  font-size: 17px; line-height: 1.45; color: var(--bone-80);
}
.receipt__sum::-webkit-details-marker { display: none; }
.receipt__sum b { font-weight: 500; color: var(--bone); font-variant-numeric: tabular-nums; }
.receipt__toggle { display: inline-flex; align-items: center; gap: 12px; font-size: 15px; color: var(--bone-60); }
.receipt__hide, .receipt[open] .receipt__show { display: none; }
.receipt[open] .receipt__hide { display: inline; }
.receipt__body { padding: 0 26px 24px; }
.receipt__table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.receipt__table th { padding: 9px 24px 9px 0; text-align: left; font-weight: 400; color: var(--bone-70); vertical-align: top; }
.receipt__table td { padding: 9px 0; text-align: right; white-space: nowrap; color: var(--bone-80); font-variant-numeric: tabular-nums; vertical-align: top; }
.receipt__table .rc-group th { padding-top: 22px; font-size: 13px; font-weight: 500; color: rgba(243, 217, 177, .8); }
.receipt__table tbody tr:first-child th { padding-top: 6px; }
.receipt__table tfoot th, .receipt__table tfoot td { padding-top: 14px; color: var(--bone); font-weight: 500; }
.receipt__table .rc-total th, .receipt__table .rc-total td { padding-top: 26px; }
.receipt__table .rc-ours th, .receipt__table .rc-ours td { color: var(--first); }

.commit { margin-top: 36px; max-width: 46em; font-size: 17px; line-height: 1.55; color: var(--bone-80); }
.commit b { font-weight: 500; color: var(--bone); }

/* plus icon (soft) */
.plus {
  position: relative; flex: none;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--tone-2);
  transition: background .5s var(--silk), transform .7s var(--silk);
}
.plus::before, .plus::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px;
  background: currentColor;
  transition: transform .7s var(--silk);
}
.plus::after { transform: rotate(90deg); }
details[open] > summary .plus { transform: rotate(180deg); }
details[open] > summary .plus::after { transform: rotate(0deg); }

/* the ladder: five bands that warm as they climb */
.ladder { margin-top: clamp(110px, 16vh, 190px); }
.ladder__head {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter); row-gap: 18px;
  margin-bottom: clamp(36px, 5vh, 56px);
}
.ladder__h { grid-column: 1 / span 7; }
.ladder__lead { grid-column: 9 / span 4; align-self: end; font-size: 17px; color: var(--bone-70); }
.bands { list-style: none; position: relative; }
.band {
  --ov: 30px;
  position: relative;
  z-index: calc(10 + var(--k));
  margin-bottom: calc(var(--ov) * -1);
  padding: calc(30px + var(--ov)) clamp(22px, 2.6vw, 44px) 30px;
  border-radius: var(--r4);
  background: var(--band-bg);
  color: var(--band-fg);
  box-shadow: 0 34px 60px -30px rgba(0, 0, 0, .62), 0 2px 0 0 rgba(255, 255, 255, 0);
}
.band:first-child { padding-top: 32px; }
.band:last-child { margin-bottom: 0; }
.band[data-k="0"] { --band-bg: #10121A; --band-fg: #ECE7DF; }
.band[data-k="1"] { --band-bg: #222433; --band-fg: #ECE7DF; }
.band[data-k="2"] { --band-bg: #463944; --band-fg: #ECE7DF; }
.band[data-k="3"] { --band-bg: #B58A72; --band-fg: #16120E; }
.band[data-k="4"] { --band-bg: #F3D9B1; --band-fg: #16120E; box-shadow: 0 34px 70px -30px rgba(0, 0, 0, .55), 0 0 90px -30px rgba(243, 217, 177, .55); }
.band__body {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr);
  column-gap: clamp(20px, 2.4vw, 40px);
  align-items: start;
}
.band__name { font-size: clamp(30px, 2.8vw, 46px); line-height: .9; letter-spacing: .015em; }
.band__line { margin-top: 8px; font-size: 16px; line-height: 1.45; opacity: .8; text-wrap: pretty; }
.band__inc { list-style: none; padding-top: 6px; font-size: 15px; line-height: 1.6; text-wrap: pretty; }
.band__inc li { display: inline; opacity: .74; }
.band__inc li.nb { white-space: nowrap; }
.band__inc li:not(:last-child):not(.band__carry)::after { content: '·'; margin: 0 .2em 0 .5em; opacity: .55; }
.band__inc .band__carry { opacity: 1; font-weight: 500; }
.band__inc strong { font-weight: 600; }
.band__price {
  text-align: right; white-space: nowrap;
  font-size: clamp(44px, 4.3vw, 72px); line-height: .86; letter-spacing: .004em;
}
.band__from, .band__per { font-family: var(--sans); font-size: 15px; font-weight: 450; letter-spacing: 0; text-transform: none; opacity: .68; }
.band__from { margin-right: 6px; }
.band__per { margin-left: 3px; }
.ladder__small { margin-top: 30px; max-width: 46em; font-size: 15px; line-height: 1.55; color: var(--bone-60); }

.founding {
  position: relative; isolation: isolate;
  margin-top: clamp(80px, 12vh, 140px);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter); row-gap: 32px;
  align-items: end;
}
.founding::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: -6%; top: -60%; width: 70%; height: 220%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(243, 217, 177, .08), rgba(243, 217, 177, 0));
}
.founding__text { grid-column: 1 / span 8; font-size: clamp(18px, 1.45vw, 22px); line-height: 1.55; color: var(--bone-80); max-width: 36em; text-wrap: pretty; }
.founding__text b { font-weight: 500; color: var(--bone); }
.founding__label { display: block; margin-bottom: 14px; font-size: 15px; font-weight: 500; letter-spacing: .01em; color: var(--first); }
.founding__open { color: var(--first); }
.founding .ctas { grid-column: 10 / span 3; justify-content: flex-end; }

/* =====================================================================
   11 · THE GUARANTEE
   ===================================================================== */
.guarantee { padding: clamp(150px, 23vh, 270px) 0 clamp(130px, 19vh, 230px); text-align: center; }
.guarantee::before {
  content: ''; position: absolute; left: 50%; top: -25vh; z-index: 0; pointer-events: none;
  width: 100vw; height: 90vh; margin-left: -50vw;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(243, 190, 140, .09), rgba(243, 190, 140, .03) 55%, rgba(243, 190, 140, 0));
}
.guarantee__inner { position: relative; z-index: 1; max-width: calc(1100px + var(--margin) * 2); margin: 0 auto; }
.guarantee__h {
  max-width: 12em; margin: 0 auto;
  font-size: clamp(52px, 6.6vw, 120px); line-height: .9;
  text-wrap: balance;
}
.guarantee__lines { list-style: none; margin-top: 52px; display: grid; gap: 8px; font-size: clamp(17px, 1.4vw, 21px); color: var(--bone-90); }
.guarantee__honest { max-width: 35em; margin: 44px auto 0; font-size: 17px; line-height: 1.62; color: var(--bone-60); text-wrap: pretty; }
.guarantee__sign { margin-top: 40px; font-size: 15px; color: var(--bone-60); }
.guarantee__name { font-weight: 700; font-size: 25px; line-height: 1; letter-spacing: .05em; color: var(--bone); }

/* =====================================================================
   12 · QUESTIONS
   ===================================================================== */
.faq { padding: clamp(120px, 17vh, 210px) 0 clamp(130px, 19vh, 230px); }
.faq__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 40px; }
.faq__head { grid-column: 1 / span 4; align-self: start; position: sticky; top: 130px; display: grid; gap: 18px; }
.faq__list { grid-column: 5 / span 8; display: grid; gap: 8px; }
.qa { border-radius: 22px; background: var(--tone-1); transition: background .6s var(--silk); }
.qa:hover, .qa[open] { background: var(--tone-2); }
.qa summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 44px; padding: 20px 22px 20px 28px;
}
.qa summary::-webkit-details-marker { display: none; }
.qa__q { font-weight: 500; font-size: clamp(18px, 1.4vw, 21px); line-height: 1.35; letter-spacing: -.003em; text-wrap: pretty; }
.qa__a { padding: 0 28px 26px; }
.qa__a p { max-width: 40em; font-size: 17px; line-height: 1.62; color: var(--bone-80); text-wrap: pretty; }
@supports selector(::details-content) {
  :root { interpolate-size: allow-keywords; }
  .qa::details-content, .receipt::details-content {
    block-size: 0; overflow: clip;
    transition: block-size .7s var(--silk), content-visibility .7s allow-discrete;
  }
  .qa[open]::details-content, .receipt[open]::details-content { block-size: auto; }
}

/* =====================================================================
   13 · LET'S MAKE YOURS — First Light
   ===================================================================== */
.final { padding-top: clamp(140px, 22vh, 260px); color: var(--ink); }
.final__inner { display: grid; justify-items: start; }
.final__h {
  font-size: clamp(76px, 13vw, 236px); line-height: .86; letter-spacing: .004em;
  color: rgba(11, 12, 16, .5);               /* the set-up line sits back; "yours" is ink at full strength */
  text-wrap: balance;
}
.final__h em.lit { color: var(--ink); }
.final__ctas { margin-top: clamp(40px, 6vh, 64px); display: flex; flex-wrap: wrap; align-items: center; gap: 22px 44px; }
.write {
  display: inline-flex; align-items: center; gap: 18px; min-height: 44px;
  color: var(--ink); text-decoration: none;
  font-size: 18px; font-weight: 450;
}
.write__face {
  width: 76px; height: 76px; flex: none;
  border-radius: 50%; object-fit: cover;
  box-shadow: 0 18px 40px -18px rgba(70, 40, 10, .6), 0 0 0 6px rgba(255, 246, 232, .45);
  transition: transform .9s var(--silk);
}
.write__text { display: inline-flex; align-items: center; gap: 10px; opacity: .78; transition: opacity .6s var(--silk); }
.write:hover .write__text, .write:focus-visible .write__text { opacity: 1; }
.write:hover .write__face { transform: scale(1.04) rotate(-2deg); }
.write:hover .go__arrow, .write:focus-visible .go__arrow { transform: translateX(6px); }

.credits {
  position: relative;
  margin-top: clamp(130px, 20vh, 240px);
  padding: 0 var(--margin) clamp(140px, 24vh, 280px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 80%, transparent 100%);
}
.credits__roll { display: grid; gap: 30px; width: min(660px, 100%); margin: 0 auto; }
.credit { display: grid; grid-template-columns: 1fr 1fr; column-gap: 30px; align-items: baseline; }
.credit dt { text-align: right; font-size: 14px; color: rgba(11, 12, 16, .56); }
.credit dd { font-size: clamp(26px, 2.2vw, 34px); font-weight: 700; line-height: 1; letter-spacing: .04em; }
.credit--title, .credit--note { grid-template-columns: 1fr; text-align: center; }
.credit--title { margin-bottom: 18px; }
.credit--title dd { font-family: var(--sans); font-weight: 700; font-stretch: 125%; font-size: clamp(22px, 2vw, 30px); line-height: 1.2; letter-spacing: .06em; text-transform: uppercase; }
.credit--note { margin-top: 18px; }
.credit--note dd { font-family: var(--sans); font-size: 15px; font-weight: 400; line-height: 1.5; letter-spacing: 0; text-transform: none; color: rgba(11, 12, 16, .62); }

/* =====================================================================
   END — S7
   ===================================================================== */
.end {
  position: relative; z-index: 105;
  min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-rows: 1fr auto;
  background: var(--ink); color: var(--bone);
}
.end__frame { display: grid; place-items: center; padding: 80px 20px; }
.end__tc { display: grid; justify-items: center; gap: 12px; text-align: center; }
.end__time { font-size: 14px; letter-spacing: .04em; color: var(--bone-50); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
.end__label { font-weight: 800; font-size: clamp(34px, 3.6vw, 58px); line-height: .9; letter-spacing: .03em; }
.end__legal { padding: 24px var(--margin) 34px; text-align: center; font-size: 13px; line-height: 1.6; color: var(--bone-50); }
.end__motion {
  min-height: 44px; padding: 12px 6px;
  background: none; border: 0; cursor: pointer;
  font-size: inherit; color: inherit; transition: color .4s;
}
.end__motion:hover { color: var(--bone); }

/* motion: the end frame is transparent so the iris can close over First Light */
.has-motion .end { background: transparent; min-height: 170vh; }
.has-motion .end__frame { position: sticky; top: 0; height: 100vh; height: 100svh; }
.has-motion .end__tc, .has-motion .end__legal { opacity: 0; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1199px) {
  .craft__copy { grid-column: 6 / span 7; }
  .feature--selects .feature__copy { grid-column: 1 / span 5; }
  .feature--selects .feature__sample { grid-column: 6 / span 7; }
  .feature--treatment .feature__sample { grid-column: 1 / span 7; }
  .feature--treatment .feature__copy { grid-column: 8 / span 5; }
  .ping--left { right: -18px; }
  .ping--right { right: 22px; }
  .tier__name, .tier__flag, .tier__plan { grid-column: 1 / span 4; }
  .tier__price { grid-column: 5 / span 4; font-size: clamp(60px, 6.6vw, 92px); }
  .tier__for, .tier__inc { grid-column: 9 / span 4; }
  .founding__text { grid-column: 1 / span 9; }
  .founding .ctas { grid-column: 10 / span 3; }
}

@media (max-width: 899px) {
  :root { --margin: 20px; --r-media: 16px; --gutter: 14px; --edge: 14px; }
  body { font-size: 17px; }
  .body { font-size: 17px; }

  .nav { padding: 12px var(--margin); gap: 16px; }
  .nav__links { display: none; }
  .brand__word { font-size: 15px; }

  .hud { padding-bottom: 6px; }
  .hud__tc { padding-bottom: 14px; font-size: 13px; }

  .keylight__beam, .keylight__rays { width: 220vmax; height: 220vmax; margin-left: -110vmax; }

  .craft__h, .craft__copy { grid-column: 1 / -1; }
  .specimens__list { grid-template-columns: minmax(0, 1fr); row-gap: 56px; }
  .specimen:nth-child(even) { margin-top: 0; }

  .folder__h, .folder__body { grid-column: 1 / -1; }
  .folder__stage { min-height: 0; padding: 40px var(--margin) 0; }
  .folder__set { width: min(100%, 420px); }
  .folder__frame { aspect-ratio: 10 / 15; }
  .fsite {
    grid-template-columns: 1cqw repeat(6, minmax(0, 1fr)) 1cqw;
    grid-template-rows: 58cqw 7cqw 12cqw 7.5cqw 3cqw 23cqw 4cqw 23cqw 2.5cqw 7cqw 2cqw;
    column-gap: 3cqw;
  }
  .fsite__nav { grid-column: 2 / 8; padding-top: 4.4cqw; }
  .fsite__mark { font-size: 6cqw; }
  .fsite__links { gap: 2.6cqw; font-size: 1.7cqw; letter-spacing: .14em; }
  .fsite__links span:nth-child(n+3) { display: none; }
  .fsite__id { grid-column: 2 / 8; padding-bottom: 4cqw; }
  .fsite__role { font-size: 2cqw; }
  .fsite__name { font-size: 11.5cqw; margin: 2cqw 0 3.4cqw; }
  .fsite__cta { gap: 3cqw; font-size: 1.8cqw; }
  .fsite__play { padding: 1.8cqw 2.4cqw; }
  .fsite__label { grid-column: 2 / 8; font-size: 1.8cqw; }
  .fslot--t1 { grid-row: 3; grid-column: 2 / span 2; }
  .fslot--t2 { grid-row: 3; grid-column: 4 / span 2; }
  .fslot--t3 { grid-row: 3; grid-column: 6 / span 2; }
  .fslot--shot { grid-row: 6; grid-column: 2 / span 2; }
  .fslot--memo { grid-row: 6; grid-column: 4 / span 4; }
  .fslot--index { grid-row: 8; grid-column: 2 / 8; align-self: stretch; height: auto; margin: 0; }
  .fslot--credits { grid-row: 10; grid-column: 2 / 8; }
  .fi { border-radius: .8cqw; }
  .fi--reel { border-radius: var(--r-media) var(--r-media) 0 0; }
  .fi__label { top: calc(100% + 2cqw); font-size: 13px; }
  .fi__dur { font-size: 12px; right: 2cqw; top: 2cqw; padding: 1cqw 1.8cqw; }
  .fs-cap { top: calc(100% + 2cqw); gap: 1.2cqw; }
  .fs-cap b { font-size: 2.6cqw; }
  .fs-cap b i { display: none; }
  .fs-cap > span { font-size: 1.5cqw; letter-spacing: .06em; }
  .fs-bio { gap: 2.2cqw; }
  .fs-bio b { font-size: 1.8cqw; }
  .fs-bio span { font-size: 3.1cqw; line-height: 1.38; }
  .fs-index { gap: .6cqw; font-size: 1.85cqw; letter-spacing: .06em; justify-content: flex-start; }
  .fs-index b { margin-bottom: .6cqw; font-size: 1.8cqw; }
  .fs-index span { grid-template-columns: 5cqw minmax(0, 1fr) auto; padding-top: .95cqw; }
  .fs-credits { gap: 3cqw; }
  .fs-credits b { font-size: 1.7cqw; }
  .fs-credits__run { gap: 2.6cqw; font-size: 2.8cqw; }
  .fs-credits__run span + span::before { margin-right: 2.6cqw; }
  .fi__sheet { font-size: 2.2cqw; }
  .fi__note { font-size: 2.3cqw; gap: 1.6cqw; padding: 3cqw; }
  .fi__memo { gap: 2.4cqw; padding: 0 4cqw 0 2.4cqw; }
  .fi__memo-play { width: 7cqw; height: 7cqw; }
  .fi__memo-play::after { border-width: 1.3cqw 0 1.3cqw 2.1cqw; }
  .fi__memo-t { font-size: 13px; }
  .fi__wave { height: 6cqw; gap: .7cqw; }
  .fi__page { gap: 2cqw; padding: 2.6cqw; }
  .fi__page-t { font-size: 3.4cqw; }
  .fi__bars { gap: 1.2cqw; }
  .fi__bars i { height: 1cqw; }
  .is-pile .fi { border-radius: 2cqw; }
  .is-pile .fi--reel   { --px: -4%;  --py: 2%;  --pw: 76%; --pr: -4deg; }
  .is-pile .fi--spec   { --px: 40%;  --py: 15%; --pw: 64%; --pr: 5deg; }
  .is-pile .fi--stills { --px: 54%;  --py: 44%; --pw: 46%; --pr: 7deg; }
  .is-pile .fi--pdf    { --px: 6%;   --py: 40%; --pw: 34%; --pr: -6deg; }
  .is-pile .fi--shot   { --px: 36%;  --py: 54%; --pw: 26%; --pr: 8deg; }
  .is-pile .fi--memo   { --px: 18%;  --py: 31%; --pw: 72%; --pr: -2deg; }
  .is-pile .fi--xlsx   { --px: -6%;  --py: 68%; --pw: 66%; --pr: 3deg; }
  .is-pile .fi--txt    { --px: 46%;  --py: 82%; --pw: 56%; --pr: -4deg; }
  .steps { grid-template-columns: minmax(0, 1fr); row-gap: 22px; margin-top: 48px; }

  .screening__head { margin-bottom: 48px; }
  .diptych { grid-template-columns: minmax(0, 1fr); row-gap: 44px; }
  .diptych__light { left: -20%; width: 140%; height: 70%; top: auto; bottom: 0; transform: none !important; }
  .booth__item { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
  .booth__fig { width: min(220px, 70%); margin-bottom: 6px; }

  .feature__grid { row-gap: 40px; }
  .feature--selects .feature__copy, .feature--selects .feature__sample,
  .feature--treatment .feature__copy, .feature--treatment .feature__sample { grid-column: 1 / -1; padding: 0; }
  .feature--treatment .feature__copy { grid-row: 1; }
  .ping { position: relative; inset: auto !important; margin: -34px 0 0 14px; max-width: calc(100% - 28px); }
  .ping--right { margin-left: auto; margin-right: 14px; }
  .url { margin-left: 4px; }

  .builds__head .h2, .builds__head .body { grid-column: 1 / -1; }
  .builds__list { row-gap: 56px; }
  .build--a, .build--b, .build--c, .build--d { grid-column: 1 / -1; margin-top: 0; padding: 0; }

  .pricing__head .h2, .pricing__head .body { grid-column: 1 / -1; }
  .tier { grid-template-columns: minmax(0, 1fr); row-gap: 10px; padding: 28px 22px; border-radius: var(--r3); }
  .tier__name, .tier__flag, .tier__price, .tier__plan, .tier__for, .tier__inc { grid-column: 1; grid-row: auto !important; }
  .tier__price { margin: 8px 0 2px; font-size: clamp(60px, 18vw, 84px); }
  .tier__price .tier__from { position: static; margin-right: .3em; vertical-align: .32em; }
  .tier__for { margin-top: 10px; font-size: 17px; }
  .receipt__sum { padding: 20px; }
  .receipt__body { padding: 0 20px 20px; }
  .receipt__table th { padding-right: 14px; }
  .ladder__h, .ladder__lead { grid-column: 1 / -1; }
  .band { --ov: 24px; padding: calc(24px + var(--ov)) 22px 24px; border-radius: var(--r3); }
  .band:first-child { padding-top: 24px; }
  .band__body { grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; row-gap: 0; align-items: baseline; }
  .band__id { display: contents; }
  .band__name { grid-column: 1; grid-row: 1; font-size: 28px; }
  .band__price { grid-column: 2; grid-row: 1; font-size: clamp(32px, 9.6vw, 40px); }
  .band__line { grid-column: 1 / -1; grid-row: 2; margin-top: 6px; }
  .band__inc { grid-column: 1 / -1; grid-row: 3; padding-top: 12px; }
  .founding__text, .founding .ctas { grid-column: 1 / -1; justify-content: flex-start; }

  .slot-fb__list { grid-template-columns: minmax(0, 1fr); row-gap: 14px; margin-top: 40px; }

  .guarantee__lines { margin-top: 36px; }

  .faq__head, .faq__list { grid-column: 1 / -1; position: static; }
  .qa summary { padding: 18px 16px 18px 20px; }
  .qa__a { padding: 0 20px 22px; }

  .final__ctas { flex-direction: column; align-items: flex-start; }
  .write__face { width: 64px; height: 64px; }
  .credit { column-gap: 18px; }
  .credit dd { font-size: 21px; }
  .end__legal { padding-bottom: 54px; }
}

@media (max-width: 420px) {
  .ping { font-size: 13px; }
}

/* =====================================================================
   REDUCED MOTION / MOTION OFF — final states, no travel
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
.motion-off .go__arrow, .motion-off .write__face, .motion-off .screen__try { transition: none !important; }
.motion-off .go:hover .go__arrow, .motion-off .write:hover .go__arrow, .motion-off .write:hover .write__face { transform: none; }
.motion-off .nav.is-hidden { transform: none; }

/* =====================================================================
   07b · THE SMALL STUFF — quiet, secondary (GATE-CHECK.md)
   ===================================================================== */
.small { padding-top: clamp(80px, 12vh, 140px); padding-bottom: clamp(80px, 12vh, 140px); }
.small__grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter); row-gap: clamp(36px, 5vh, 56px); align-items: start;
}
.small__head { grid-column: 1 / span 4; display: grid; gap: 18px; align-content: start; }
.small__h { margin: 0; color: var(--bone); }
.small__lead { margin: 0; max-width: 34ch; }
.small__list {
  grid-column: 6 / span 7; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.4vw, 20px);
}
.small__list li {
  display: grid; gap: 8px; align-content: start;
  padding: clamp(18px, 1.8vw, 26px);
  border-radius: var(--r3);
  background: var(--tone-1);
}
.small__list b {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(22px, 1.7vw, 28px); line-height: .95; letter-spacing: .01em; color: var(--bone);
}
.small__list span { font-size: clamp(15px, 1.05vw, 16.5px); line-height: 1.5; color: var(--bone-60); text-wrap: pretty; }
.small__note { grid-column: 6 / span 7; margin: 0; color: var(--bone-50); }
@media (max-width: 1099px) {
  .small__head { grid-column: 1 / -1; }
  .small__lead { max-width: 52ch; }
  .small__list, .small__note { grid-column: 1 / -1; }
}
@media (max-width: 639px) {
  .small__list { grid-template-columns: 1fr; }
}

/* =====================================================================
   02b · WHAT WE FOUND — the audit numbers
   ===================================================================== */
.found { padding-top: clamp(90px, 14vh, 160px); padding-bottom: clamp(90px, 14vh, 160px); }
.found__grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter); row-gap: clamp(40px, 6vh, 64px); align-items: start;
}
.found__head { grid-column: 1 / span 6; display: grid; gap: 22px; }
.found__head .kicker { margin-bottom: 0; }
.found__h { margin: 0; }
.found__list {
  grid-column: 1 / -1; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gutter);
}
.found__list li { display: grid; gap: 12px; align-content: start; padding-top: 18px; border-top: 1px solid rgba(243, 217, 177, .22); }
.found__list b {
  font-family: var(--display); font-weight: 800; line-height: .92; letter-spacing: .01em; text-transform: uppercase;
  font-size: clamp(28px, 2.3vw, 42px); color: var(--first); text-wrap: balance;
}
.found__list span { font-size: clamp(15px, 1.05vw, 17px); line-height: 1.45; color: var(--bone-70); text-wrap: pretty; }
.found__close { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px 34px; }
.found__close .body { margin: 0; color: var(--bone-90); }
@media (max-width: 1099px) {
  .found__head { grid-column: 1 / -1; }
  .found__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 34px; }
}
@media (max-width: 599px) {
  .found__list { grid-template-columns: 1fr; }
  .found__list b { font-size: 34px; }
}

/* =====================================================================
   07c · THE FREE CHECK — request form + what it looks at
   ===================================================================== */
.check { padding-top: clamp(90px, 14vh, 160px); padding-bottom: clamp(90px, 14vh, 160px); }
.check__grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter); row-gap: clamp(40px, 6vh, 64px); align-items: start;
}
.check__head { grid-column: 1 / span 6; display: grid; gap: 22px; }
.check__head .kicker { margin-bottom: 0; }
.check__h { margin: 0; font-size: clamp(40px, 4.6vw, 84px); }
.check__form {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
  margin-top: 8px; padding: clamp(18px, 1.8vw, 26px); border-radius: var(--r3); background: var(--tone-1);
}
.check__field { display: grid; gap: 7px; font-size: 13px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--bone-60); }
.check__field--wide { grid-column: 1 / -1; }
.check__field input, .check__field select {
  width: 100%; min-height: 50px; padding: 0 16px;
  border: 1px solid rgba(236, 231, 223, .16); border-radius: var(--r1);
  background: rgba(11, 12, 16, .45); color: var(--bone);
  font: 400 16px/1.2 var(--sans); letter-spacing: 0; text-transform: none;
  -webkit-appearance: none; appearance: none;
}
.check__field select { background-image: linear-gradient(45deg, transparent 50%, var(--bone-60) 50%), linear-gradient(135deg, var(--bone-60) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.check__field input::placeholder { color: var(--bone-50); }
.check__field input:focus-visible, .check__field select:focus-visible { outline: 2px solid var(--first); outline-offset: 2px; }
.check__send { grid-column: 1 / -1; justify-self: start; border: 0; cursor: pointer; font: inherit; }
.check__fine { grid-column: 1 / -1; margin: 0; font-size: 14px; line-height: 1.5; color: var(--bone-50); }
.check__list { grid-column: 8 / span 5; display: grid; gap: 22px; padding-top: 8px; }
.check__lh { margin: 0; font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(26px, 2vw, 34px); line-height: .95; color: var(--bone); }
.check__areas { margin: 0; display: grid; gap: 20px; }
.check__areas div { display: grid; gap: 6px; padding-top: 14px; border-top: 1px solid rgba(236, 231, 223, .12); }
.check__areas dt { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(243, 217, 177, .88); }
.check__areas dd { margin: 0; font-size: clamp(15px, 1.05vw, 16.5px); line-height: 1.55; color: var(--bone-70); text-wrap: pretty; }
@media (max-width: 1099px) {
  .check__head, .check__list { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
  .check__form { grid-template-columns: 1fr; }
}

/* =====================================================================
   09b · WHAT HAPPENS WHEN YOU BOOK · founding headline · receipt note
   ===================================================================== */
.book { padding-top: clamp(80px, 12vh, 140px); padding-bottom: clamp(40px, 6vh, 70px); }
.book__grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter); row-gap: clamp(32px, 5vh, 52px); align-items: start;
}
.book__head { grid-column: 1 / span 4; display: grid; gap: 18px; }
.book__head .kicker { margin-bottom: 0; }
.book__h { margin: 0; }
.book__steps {
  grid-column: 6 / span 7; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.4vw, 20px);
  counter-reset: step;
}
.book__steps li {
  display: grid; gap: 10px; align-content: start;
  padding: clamp(18px, 1.8vw, 26px); border-radius: var(--r3); background: var(--tone-1);
  counter-increment: step;
}
.book__steps li::before { content: '0' counter(step); font-size: 13px; font-weight: 600; letter-spacing: .08em; color: rgba(243, 217, 177, .88); }
.book__steps b { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(22px, 1.7vw, 28px); line-height: .95; color: var(--bone); }
.book__steps span { font-size: clamp(15px, 1.05vw, 16.5px); line-height: 1.5; color: var(--bone-70); text-wrap: pretty; }
@media (max-width: 1099px) {
  .book__head, .book__steps { grid-column: 1 / -1; }
}
@media (max-width: 799px) {
  .book__steps { grid-template-columns: 1fr; }
}
.founding__h { display: block; margin-bottom: 10px; font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(28px, 2.4vw, 42px); line-height: .95; letter-spacing: .01em; color: var(--bone); }
.receipt__note { margin: 18px 0 0; font-size: 14px; line-height: 1.5; color: var(--bone-50); }
.go--ink { color: var(--ink); }

/* =====================================================================
   FOOTER without the S7 iris close (2026-10-13): a plain ink strip
   ===================================================================== */
.end, .has-motion .end { min-height: 0; background: var(--ink); grid-template-rows: auto; }
.final { padding-bottom: clamp(120px, 18vh, 220px); }

/* =====================================================================
   01 · HERO, "ONE FRAME" (2026-10-20, from _review/hero-v3/a/)
   One still, full bleed: the Red room (boohooMAN x Swae Lee). It pushes in
   very slowly and holds, the way a film's first shot does. The copy sits in
   the dark left third; the figure stands in the light on the right.
   The lamp-strike open is its fade from black. site.js (heroFrame) adds the
   scroll drift and dim, and fades the plate up when the open doesn't run.
   ===================================================================== */
.of {
  position: relative; isolation: isolate;
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: flex-end;
  overflow: clip;
  background: var(--ink);
}

/* the plate: scroll drift lives here, the push-in lives on the image */
.of__plate { position: absolute; inset: 0; z-index: 0; overflow: hidden; will-change: transform; }
.of__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 0% 50%;
  transform-origin: 0% 50%;
  --k: 1.08;   /* base zoom: keeps the figure clear of the headline */
  transform: scale(var(--k));
}

/* the scrim: dark where the type sits (left, bottom), untouched where the light falls */
.of__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(0deg, #0B0C10 0%, rgba(11, 12, 16, .9) 14%, rgba(11, 12, 16, .45) 36%, rgba(11, 12, 16, 0) 58%),
    linear-gradient(90deg, rgba(11, 12, 16, .8) 0%, rgba(11, 12, 16, .52) 32%, rgba(11, 12, 16, 0) 62%),
    linear-gradient(180deg, rgba(11, 12, 16, .6) 0%, rgba(11, 12, 16, 0) 22%),
    radial-gradient(120% 90% at 62% 40%, rgba(11, 12, 16, 0) 55%, rgba(11, 12, 16, .5) 100%);
}
/* scroll darkens the frame as the next chapter comes up (site.js sets --dim, 0 → 1) */
.of__dim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: #0B0C10; opacity: calc(var(--dim, 0) * .7); }

.of__inner {
  position: relative; z-index: 2;
  width: 100%;
  padding-top: 140px;
  padding-bottom: clamp(64px, 11vh, 120px);
}
.of__cred {
  max-width: 30em; margin-bottom: 26px;
  font-size: clamp(15px, 1.1vw, 17px); line-height: 1.45;
  color: var(--bone-70);
  text-wrap: pretty;
}
.of .of__h {
  font-size: clamp(60px, min(8.2vw, 14vh), 150px);
  max-width: 6.4em;
  text-shadow: 0 2px 40px rgba(0, 0, 0, .35);
}
.of__ctas { margin-top: clamp(34px, 5vh, 48px); }

/* motion: the copy waits for heroIn (site.js); the plate waits too unless the open is running,
   since the lamp's iris opens onto it. The push-in is the one CSS animation here. */
.is-loading .of__inner { opacity: 0; }
.is-loading:not(.is-opening) .of__plate { opacity: 0; }
.motion-on .of__img { animation: of-push 34s cubic-bezier(.25, .1, .2, 1) both; }
@keyframes of-push { from { transform: scale(var(--k)); } to { transform: scale(calc(var(--k) * 1.04)); } }
.motion-off .of__img { animation: none !important; }

@media (max-width: 899px) {
  /* portrait: the frame becomes the top of the screen, the copy sits on the floor below it */
  .of__plate { bottom: auto; height: 64%; }
  .of__img {
    object-position: 48% 50%; transform-origin: 50% 45%; --k: 1;
    -webkit-mask-image: linear-gradient(#000 76%, transparent);
    mask-image: linear-gradient(#000 76%, transparent);
  }
  .of__scrim {
    bottom: auto; height: calc(64% + 2px);   /* overlaps the plate's edge so no seam shows */
    background:
      linear-gradient(0deg, #0B0C10 0%, rgba(11, 12, 16, .82) 22%, rgba(11, 12, 16, .2) 48%, rgba(11, 12, 16, 0) 64%),
      linear-gradient(180deg, rgba(11, 12, 16, .7) 0%, rgba(11, 12, 16, 0) 26%);
  }
  .of__inner { padding-top: 0; padding-bottom: 72px; }
  .of__cred { margin-bottom: 18px; font-size: 14px; max-width: 26em; }
  .of .of__h { font-size: clamp(50px, 15vw, 76px); max-width: none; }
  .of__ctas { margin-top: 28px; gap: 10px 26px; }
}
@media (max-width: 899px) and (max-height: 700px) {
  .of__plate { height: 56%; }
  .of__scrim { height: calc(56% + 2px); }
  .of .of__h { font-size: clamp(44px, 13vw, 64px); }
}

/* =====================================================================
   CTA · CALL SHEET (Colin, 2026-10-13). Replaces the lit pill above.
   A matte two-cell button, like a row on a call sheet: the action in
   First Light, the fact beside it ("20 min · Free"). No glow, no gradient,
   no magnetic pull. Review: _review/cta-callout-options.html, option 3.
   ===================================================================== */
.cta {
  isolation: auto; will-change: auto;
  align-items: stretch; justify-content: flex-start;
  min-height: 58px; padding: 0;
  border: 0; border-radius: 4px; overflow: hidden;
  background: none; color: var(--ink);
  box-shadow: 0 0 0 1px rgba(243, 217, 177, .9);
  font-size: 16px; font-weight: 600; line-height: 1; letter-spacing: 0;
  cursor: pointer;
  transition: box-shadow .4s var(--silk);
}
.cta:hover { box-shadow: 0 0 0 1px rgba(243, 217, 177, .9); }
.cta__light { display: none; }
.cta__label {
  display: flex; align-items: center; gap: 12px;
  padding: 0 24px;
  background: var(--first); color: var(--ink);
  transition: background .4s var(--silk);
}
.cta:hover .cta__label, .cta:focus-visible .cta__label { background: #FBE9CC; }
.cta__arrow {
  width: 22px; height: 12px; flex: none; overflow: visible;
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .6s var(--silk);
}
.cta:hover .cta__arrow, .cta:focus-visible .cta__arrow { transform: translateX(5px); }
.cta__fact {
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  padding: 0 18px;
  color: var(--first);
  font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; line-height: 1.15;
  white-space: nowrap;
}
.cta--nav { min-height: 42px; font-size: 14.5px; }
.cta--nav .cta__label { padding: 0 18px; }
.nav.is-ink .cta--nav { box-shadow: 0 0 0 1px var(--ink); }
.nav.is-ink .cta--nav .cta__label { background: var(--ink); color: var(--first); }
.cta--ink, .cta--ink:hover { box-shadow: 0 0 0 1px var(--ink); }
.cta--ink .cta__label { background: var(--ink); color: var(--first); }
.cta--ink:hover .cta__label, .cta--ink:focus-visible .cta__label { background: #1C1E24; }
.cta--ink .cta__fact { color: var(--ink); }

/* the secondary, call-sheet style: "Not ready? Start with a free screen test" */
.go--sheet { gap: 8px; font-size: 15px; opacity: 1; color: var(--bone-60); }
.go--sheet em { font-style: normal; color: var(--bone); border-bottom: 1px solid rgba(236, 231, 223, .35); padding-bottom: 2px; transition: border-color .4s var(--silk); }
.go--sheet:hover em, .go--sheet:focus-visible em { border-color: var(--first); }
.go--ink.go--sheet { color: rgba(11, 12, 16, .6); }
.go--ink.go--sheet em { color: var(--ink); border-color: rgba(11, 12, 16, .35); }
.go--ink.go--sheet:hover em { border-color: var(--ink); }

@media (max-width: 899px) {
  .cta:not(.cta--nav) { min-height: 56px; }
  .vsl__cta .cta__label, .check__send .cta__label { flex: 1; justify-content: center; }
  .check__send { width: 100%; justify-self: stretch; }
}
@media (max-width: 479px) {
  .cta:not(.cta--nav) .cta__label { padding: 0 16px; gap: 10px; }
  .cta__fact { padding: 0 12px; }
  .check__send .cta__arrow { display: none; }
}