/* feruzbuilds.com — the page tells the videos' colour story —
   blue (the idea) → graphite (the agent) → white set (the output) → blue (the human). Geist + Geist Mono, ink-in type,
   smooth S-curves only (no overshoot, no bounce), the dot dive between the first two sections. */
:root {
  --blue: #2441ee;
  --graphite: #17181b;
  --panel: #1e1f23;
  --sheet: #f7f7f8;
  --ink: #0e0f12;
  --grey: #6b6f78;
  --rule: #e1e3e8;
  --pending: #c9ccd3;
  --white: #ffffff;
  --terminal: #f2f2f0;
  --tint: #96a5ff; /* the blue, lit — checks and the playhead on graphite */
  --smooth: cubic-bezier(0.65, 0, 0.35, 1);
  --out: cubic-bezier(0.25, 1, 0.5, 1);
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --gutter: clamp(20px, 5vw, 56px);
  --section: clamp(96px, 12vw, 168px);
  --shadow: 0 1px 2px rgba(14, 18, 40, 0.06), 0 14px 40px rgba(14, 18, 40, 0.09);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--sheet); color: var(--ink); font-family: var(--sans); font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: var(--blue); color: var(--white); }
a { color: inherit; }
img, video { display: block; max-width: 100%; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 500; }
.wrap { width: min(1200px, 100%); margin: 0 auto; padding: 0 var(--gutter); }
.mono { font-family: var(--mono); letter-spacing: -0.05em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* a small mono label above a heading: a real file or system string */
.label { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 28px; font-family: var(--mono); font-size: 14px; letter-spacing: -0.01em; color: var(--grey); }
.label::before { content: ""; width: 8px; height: 8px; background: currentColor; }

/* section headings ink in word by word, like the videos */
.proof h2, .how h2, .list h2 { font-size: clamp(40px, 5.4vw, 76px); line-height: 1; letter-spacing: -0.04em; }
[data-ink] .w { transition: color 0.45s var(--out); }
[data-ink]:not(.in) .w { color: var(--ghost, var(--pending)); }

/* things that settle into place once they're on screen */
.js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--out), transform 0.9s var(--out); transition-delay: var(--d, 0s); }
.js [data-reveal].in { opacity: 1; transform: none; }

/* ── nav: clear over the hero, a graphite pill after it ── */
.nav { position: fixed; z-index: 50; top: 0; left: 0; right: 0; padding: 14px var(--gutter) 0; pointer-events: none; }
.nav__inner { pointer-events: auto; display: flex; align-items: center; justify-content: space-between; max-width: calc(1200px - 2 * var(--gutter) + 24px); margin: 0 auto; padding: 10px 12px; border-radius: 18px; color: var(--white); background: rgba(23, 24, 27, 0); transition: background 0.5s var(--smooth), box-shadow 0.5s var(--smooth), backdrop-filter 0.5s var(--smooth); }
.nav.solid .nav__inner { background: rgba(23, 24, 27, 0.78); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 10px 30px rgba(6, 10, 30, 0.18); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); }
.wordmark { display: inline-flex; align-items: flex-end; font-weight: 600; font-size: 20px; letter-spacing: -0.02em; text-decoration: none; }
.wordmark__dot { width: 5px; height: 5px; margin: 0 0 5px 2px; background: currentColor; }
.nav__links { display: flex; align-items: center; gap: 22px; }
.nav__link { font-size: 15px; opacity: 0.82; text-decoration: none; transition: opacity 0.2s var(--smooth); }
.nav__link:hover { opacity: 1; }
.nav__cta { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 11px; background: var(--white); color: var(--ink); font-size: 15px; font-weight: 500; text-decoration: none; opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity 0.4s var(--smooth), transform 0.4s var(--smooth), background 0.2s var(--smooth); }
.nav.solid .nav__cta { opacity: 1; transform: none; pointer-events: auto; }
.nav__cta:hover { background: #e9ebff; }

/* ── 1 · hero: the type poster on blue ── */
.hero-pin { position: relative; background: var(--graphite); }
.hero-pin.pinned { height: calc(var(--hero-h) + var(--dive)); }
.hero-pin.pinned .hero { position: sticky; top: var(--pin-top, 0px); }
.hero { --ghost: rgba(255, 255, 255, 0.22); position: relative; overflow: hidden; display: flex; flex-direction: column; background: var(--blue); color: var(--white); min-height: min(100svh, 1000px); }
.hero__stage { position: relative; z-index: 2; flex: 1; padding-bottom: clamp(48px, 7vw, 88px); }
.hero__light, .end__light { position: absolute; inset: 0; pointer-events: none; }
.hero__light::before, .end__light::before { content: ""; position: absolute; left: -10%; top: -20%; width: 1100px; height: 1100px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.15), transparent); animation: drift 22s var(--smooth) infinite alternate; }
.hero__light::after, .end__light::after { content: ""; position: absolute; inset: 0; background: radial-gradient(130% 90% at 50% 45%, transparent 55%, rgba(6, 10, 50, 0.26) 100%); }
@keyframes drift { to { transform: translate(28vw, 30vh); } }
.hero__body { position: relative; z-index: 2; padding-top: clamp(132px, 19vh, 210px); }
.poster { font-size: clamp(56px, 11.5vw, 152px); line-height: 0.96; letter-spacing: -0.045em; }
.poster .line { display: block; white-space: nowrap; }
.poster .w { display: inline-block; color: rgba(255, 255, 255, 0.22); transform: translateY(0.04em); animation: ink 0.35s var(--out) forwards; }
.poster .line:first-child .w:nth-child(1) { animation-delay: 0.15s; }
.poster .line:first-child .w:nth-child(2) { animation-delay: 0.3s; }
.poster .line:first-child .w:nth-child(3) { animation-delay: 0.45s; }
.poster .mono .w:nth-child(1) { animation-delay: 0.65s; }
.poster .mono .w:nth-child(2) { animation-delay: 0.8s; }
.dot { display: inline-block; width: 0.155em; height: 0.155em; margin-left: 0.05em; background: var(--graphite); }
.poster .dot { transform: scale(0); animation: pop 0.3s var(--out) 1.05s forwards; }
@keyframes ink { to { color: var(--white); transform: translateY(0); } }
@keyframes pop { to { transform: scale(1); } }
.lede { max-width: 30ch; margin-top: clamp(24px, 3vw, 36px); font-size: clamp(19px, 2vw, 23px); line-height: 1.4; letter-spacing: -0.01em; color: rgba(255, 255, 255, 0.86); }
.hero .lede { opacity: 0; animation: fade 0.8s var(--out) 1.1s forwards; }
.lede a { text-decoration: none; color: var(--white); }
@keyframes fade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* the mascot: rises once, then a slow sway + breathing */
.actor { position: absolute; z-index: 1; pointer-events: none; }
.actor--hero { right: max(-40px, calc(50% - 700px)); bottom: -6%; height: min(80vh, 780px); opacity: 0; animation: rise 1s var(--out) 0.4s forwards; }
.actor__sway { height: 100%; transform-origin: 50% 100%; animation: sway 7s var(--smooth) infinite alternate; }
.actor__img { height: 100%; width: auto; transform-origin: 50% 100%; animation: breathe 4.2s var(--smooth) infinite alternate; }
@keyframes rise { from { opacity: 0; transform: translateY(90px); } to { opacity: 1; transform: none; } }
@keyframes sway { from { transform: rotate(-0.7deg); } to { transform: rotate(0.7deg); } }
@keyframes breathe { to { transform: scale(1.008, 1.012); } }

/* the dot dive: the poster's full stop grows into the graphite section as you scroll (app.js) */
.dive { position: absolute; z-index: 4; left: 0; top: 0; width: 0; height: 0; background: var(--graphite); visibility: hidden; transform-origin: 50% 50%; will-change: transform; pointer-events: none; }

/* ── forms ── */
.join { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; max-width: 560px; margin-top: clamp(28px, 4vw, 40px); }
.hero .join { opacity: 0; animation: fade 0.8s var(--out) 1.25s forwards; }
.join input[type="email"] { min-width: 0; height: 60px; padding: 0 20px; border: 0; border-radius: 14px; background: var(--white); color: var(--ink); font: 500 18px/1 var(--sans); letter-spacing: -0.01em; outline: none; transition: box-shadow 0.2s var(--smooth); }
.join input[type="email"]::placeholder { color: #9a9ea8; }
.join input[type="email"]:focus-visible { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.4); }
.join button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 60px; padding: 0 24px; border: 0; border-radius: 14px; background: var(--graphite); color: var(--white); font: 500 18px/1 var(--sans); letter-spacing: -0.01em; cursor: pointer; transition: background 0.2s var(--smooth); }
.join button:hover { background: #26282e; }
.join button:disabled { opacity: 0.6; cursor: default; }
.arrow { display: inline-block; transition: transform 0.35s var(--smooth); }
.join button:hover .arrow { transform: translateX(4px); }
.join__note { grid-column: 1 / -1; margin-top: 6px; font-size: 14px; color: rgba(255, 255, 255, 0.72); }
.join__msg { grid-column: 1 / -1; min-height: 1.2em; font-size: 15px; font-weight: 500; }
.join.done input, .join.done button, .join.done .join__note { display: none; }
.join.done .join__msg { display: flex; align-items: center; gap: 12px; min-height: 60px; font-size: 20px; letter-spacing: -0.01em; animation: fade 0.6s var(--out); }
.join.done .join__msg::before { content: "✓"; display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--white); color: var(--blue); font-size: 18px; }

/* ── 2 · proof: the film in a phone, what went into it beside it, on graphite ── */
.proof { --ghost: rgba(242, 242, 240, 0.2); position: relative; background: var(--graphite); color: var(--terminal); padding: var(--section) 0; overflow: hidden; }
.proof__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(48px, 7vw, 110px); align-items: center; }
.proof .label { color: rgba(242, 242, 240, 0.5); }
.proof h2 { color: var(--white); }
.proof__text { max-width: 36ch; margin-top: 28px; font-size: clamp(18px, 1.7vw, 21px); line-height: 1.5; color: rgba(242, 242, 240, 0.62); }
.term { margin-top: 44px; max-width: 520px; border-radius: 18px; background: var(--panel); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 30px 60px rgba(0, 0, 0, 0.3); overflow: hidden; }
.term__bar { display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.term__bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); }
.term__bar span { margin-left: auto; font-family: var(--mono); font-size: 12px; color: rgba(242, 242, 240, 0.4); }
.term__body { padding: 16px 20px 20px; font-family: var(--mono); font-size: 14px; line-height: 1.5; letter-spacing: -0.01em; }
.t-row { display: grid; grid-template-columns: 2.4ch 11ch minmax(0, 1fr); padding: 5px 0; }
.t-row b { font-weight: 500; color: var(--tint); }
.t-k { color: rgba(242, 242, 240, 0.45); }
.t-v { color: var(--white); }
.t-total { display: flex; justify-content: space-between; gap: 16px; margin-top: 10px; padding-top: 14px; border-top: 1px dashed rgba(255, 255, 255, 0.12); }
.t-total .t-v { font-size: 20px; letter-spacing: -0.02em; }
.term__body p { transition: opacity 0.45s var(--out), transform 0.5s var(--out); }
.js .term:not(.in) .term__body p { opacity: 0.18; transform: translateY(4px); }
.term.in p:nth-child(1) { transition-delay: 0.3s; } .term.in p:nth-child(2) { transition-delay: 0.55s; }
.term.in p:nth-child(3) { transition-delay: 0.8s; } .term.in p:nth-child(4) { transition-delay: 1.05s; }
.term.in p:nth-child(5) { transition-delay: 1.3s; } .term.in p:nth-child(6) { transition-delay: 1.7s; }
.caret { display: inline-block; width: 0.55em; height: 1.1em; margin-left: 4px; vertical-align: -0.2em; background: var(--tint); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* the phone: an iPhone 15 Pro at true proportions (70.6 × 146.6 mm, 393 × 852 pt screen). The reel plays whole
   at full width, centred on the black screen, the way the Photos app shows a 9:16 video — nothing is cropped. */
.phone { --w: min(320px, 72vw); position: relative; margin: 0; justify-self: center; width: var(--w); }
.phone__pool { position: absolute; left: 50%; top: 45%; width: 980px; height: 980px; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(150, 165, 255, 0.17), transparent); pointer-events: none; }
.iphone { position: relative; width: var(--w); height: calc(var(--w) * 2.0765); padding: calc(var(--w) * 0.013); border-radius: calc(var(--w) * 0.17);
  background: linear-gradient(135deg, #55565b 0%, #2c2d31 16%, #1c1d20 50%, #2c2d31 84%, #55565b 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 0 2px 2px rgba(0, 0, 0, 0.55), 0 50px 110px rgba(0, 0, 0, 0.55), 0 12px 30px rgba(0, 0, 0, 0.35); }
.iphone__btn { position: absolute; width: 3px; border-radius: 2px; background: linear-gradient(90deg, #1b1c1f, #3d3e43 60%, #2a2b2f); }
.iphone__btn--action { left: -2.5px; top: 17.5%; height: 4.4%; }
.iphone__btn--up { left: -2.5px; top: 25.5%; height: 7.6%; }
.iphone__btn--down { left: -2.5px; top: 35%; height: 7.6%; }
.iphone__btn--power { right: -2.5px; top: 28.5%; height: 12%; }
.iphone__bezel { height: 100%; padding: calc(var(--w) * 0.0295); border-radius: calc(var(--w) * 0.157); background: #030303; }
.iphone__screen { position: relative; height: 100%; border-radius: calc(var(--w) * 0.1275); overflow: hidden; background: #000; container-type: inline-size; transform: translateZ(0); }
.phone__video { position: absolute; left: 0; top: 50%; width: 100%; aspect-ratio: 9 / 16; transform: translateY(-50%); background: var(--blue); }
/* status bar, island and home indicator in iOS points: 1 pt = 100/393 cqw */
.iphone__status { position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 13.7cqw; display: flex; align-items: center; color: #fff; }
.iphone__time { width: 34cqw; text-align: center; padding-left: 2cqw; font: 600 4.35cqw/1 -apple-system, system-ui, "SF Pro Text", sans-serif; letter-spacing: -0.01em; }
.iphone__icons { display: flex; align-items: center; justify-content: center; gap: 1.5cqw; width: 34cqw; margin-left: auto; padding-right: 2cqw; }
.iphone__icons svg { height: 3.1cqw; width: auto; fill: currentColor; }
.iphone__icons svg:last-child { height: 3.3cqw; }
.iphone__island { position: absolute; z-index: 3; top: 2.8cqw; left: 50%; width: 32cqw; height: 9.5cqw; transform: translateX(-50%); border-radius: 5cqw; background: #000; }
.iphone__home { position: absolute; z-index: 2; bottom: 2.1cqw; left: 50%; width: 34cqw; height: 1.3cqw; transform: translateX(-50%); border-radius: 1cqw; background: rgba(255, 255, 255, 0.9); }
.phone__bar { position: relative; display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 26px; }
.sound { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 16px 0 14px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, 0.09); color: var(--white); font: 500 15px/1 var(--sans); cursor: pointer; transition: background 0.2s var(--smooth); }
.sound:hover { background: rgba(255, 255, 255, 0.16); }
.sound__icon { display: flex; align-items: center; gap: 2px; height: 14px; }
.sound__icon::before, .sound__icon::after { content: ""; width: 3px; height: 6px; background: currentColor; }
.sound__icon::after { height: 12px; box-shadow: 5px 3px 0 -0px currentColor; }
.sound[aria-pressed="true"] .sound__icon::before, .sound[aria-pressed="true"] .sound__icon::after { animation: eq 0.9s var(--smooth) infinite alternate; }
.sound[aria-pressed="true"] .sound__icon::after { animation-delay: -0.45s; }
@keyframes eq { from { transform: scaleY(0.5); } to { transform: scaleY(1); } }
.timecode { font-family: var(--mono); font-size: 14px; color: rgba(242, 242, 240, 0.45); font-variant-numeric: tabular-nums; }
.tc-now { color: var(--terminal); }

/* ── 3 · how: the pipeline on the white set ── */
.how, .list { position: relative; background: radial-gradient(1400px 1000px at 50% 30%, #ffffff, transparent 70%), var(--sheet); }
.list { background: radial-gradient(1400px 1000px at 50% 62%, #ffffff, transparent 70%), var(--sheet); }
.how { padding: var(--section) 0 clamp(24px, 3vw, 48px); }
.how__head { max-width: 760px; }
.how__sub { max-width: 46ch; margin-top: 26px; font-size: clamp(18px, 1.7vw, 21px); line-height: 1.5; color: var(--grey); }
.stations { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); margin: clamp(56px, 7vw, 88px) 0 0; padding: 0; list-style: none; }
.st { --f: 0; }
.st__rail { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.st__n { font-family: var(--mono); font-size: 15px; color: var(--grey); transition: color 0.4s var(--smooth); }
.st.on .st__n { color: var(--blue); }
.st__line { position: relative; flex: 1; height: 2px; background: var(--rule); }
.st__line i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--f) * 100%); background: var(--blue); }
.st__line i::after { content: ""; position: absolute; right: -4px; top: -3px; width: 8px; height: 8px; background: var(--blue); opacity: min(1, calc(var(--f) * 40)); }
.st__card { position: relative; height: 230px; padding: 18px 20px 20px; border-radius: 22px; background: var(--white); box-shadow: var(--shadow); overflow: hidden; transition: opacity 0.7s var(--out), transform 0.8s var(--out); }
.js .st:not(.on) .st__card { opacity: 0.55; transform: translateY(10px); }
.st.on .st__card { opacity: 1; transform: none; }
.st__file { display: block; font-family: var(--mono); font-size: 12px; color: var(--grey); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st h3 { margin-top: 22px; font-size: clamp(22px, 2vw, 26px); letter-spacing: -0.025em; }
.st > p { margin-top: 8px; max-width: 30ch; font-size: 16px; line-height: 1.5; color: var(--grey); }

/* 01 · the script inks in */
.script { margin-top: 20px; font-family: var(--mono); font-size: 15px; line-height: 1.6; letter-spacing: -0.02em; color: var(--ink); }
.script .w { color: var(--pending); transition: color 0.35s var(--out); }
.st.on .script .w { color: var(--ink); }
.script .caret { background: var(--blue); }

/* 02 · a voice waveform with a playhead */
.wave { position: absolute; left: 20px; right: 20px; top: 62px; bottom: 26px; }
.wave__bars { position: absolute; inset: 0; display: flex; align-items: center; gap: 2px; }
.wave__bars i { flex: 1; border-radius: 1px; background: var(--pending); }
.wave__bars--done i { background: var(--ink); }
.wave__bars--done { clip-path: inset(0 calc(100% - var(--head, 0) * 100%) 0 0); }
.wave__head { position: absolute; top: -8px; bottom: -8px; left: calc(var(--head, 0) * 100%); width: 2px; margin-left: -1px; background: var(--blue); }
.wave__head::before { content: ""; position: absolute; top: -3px; left: -3px; width: 8px; height: 8px; background: var(--blue); }

/* 03 · a curve, traced: x runs at constant speed, y eases — the dot draws the S */
.curve { position: absolute; left: 28px; right: 28px; top: 66px; bottom: 34px; }
.curve svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.curve__grid { fill: none; stroke: var(--rule); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 3 5; }
.curve__path { fill: none; stroke: var(--ink); stroke-width: 2; vector-effect: non-scaling-stroke; }
.curve__x, .curve__y { position: absolute; inset: 0; }
.curve__dot { position: absolute; left: -6px; bottom: -6px; width: 12px; height: 12px; background: var(--blue); }
.st.on .curve__x { animation: trace-x 2.6s linear infinite alternate; }
.st.on .curve__y { animation: trace-y 2.6s infinite alternate; }
@keyframes trace-x { 0%, 18% { transform: translateX(0); } 82%, 100% { transform: translateX(100%); } }
@keyframes trace-y { 0%, 18% { transform: translateY(0); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); } 82%, 100% { transform: translateY(-100%); } }

/* 04 · frames roll like an odometer to 864, then the checks pass */
.frames { display: flex; align-items: baseline; gap: 10px; margin-top: 28px; font-family: var(--mono); }
.odo { flex: none; display: inline-flex; height: 1em; overflow: hidden; font-size: 56px; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.odo span { display: flex; flex-direction: column; will-change: transform; }
.frames__of { font-size: 14px; color: var(--grey); }
.bar { position: relative; height: 4px; margin-top: 22px; border-radius: 2px; background: var(--rule); overflow: hidden; }
.bar i { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--r, 0)); background: var(--blue); }
.frames__ok { display: block; margin-top: 18px; font-family: var(--mono); font-size: 14px; color: var(--blue); opacity: 0; transform: translateY(6px); transition: opacity 0.4s var(--out), transform 0.5s var(--out); }
.st__card--render.done .frames__ok { opacity: 1; transform: none; }

.how__for { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 10px; margin-top: clamp(48px, 6vw, 72px); font-size: 17px; color: var(--grey); }
.how__for b { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 10px; background: var(--white); box-shadow: var(--shadow); font-weight: 500; color: var(--ink); }

/* ── 3b · the list, as a receipt ── */
.list { padding: clamp(40px, 5vw, 72px) 0 var(--section); }
.list__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(48px, 7vw, 110px); align-items: center; }
.list__text { max-width: 34ch; margin-top: 26px; font-size: clamp(18px, 1.7vw, 21px); line-height: 1.5; color: var(--grey); }
.receipt-wrap { justify-self: center; width: min(470px, 100%); filter: drop-shadow(0 1px 1px rgba(14, 18, 40, 0.06)) drop-shadow(0 18px 30px rgba(14, 18, 40, 0.1)); }
.receipt { --z: 9px; padding: 34px 30px 30px; background: var(--white); font-family: var(--mono); font-size: 14px; letter-spacing: -0.01em; color: var(--ink);
  -webkit-mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 18px 51% repeat-x, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 18px 51% repeat-x;
  mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 18px 51% repeat-x, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 18px 51% repeat-x; }
.receipt__head { display: flex; justify-content: space-between; padding: 6px 0 18px; border-bottom: 1.5px dashed var(--pending); text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; color: var(--grey); }
.receipt__rows { margin: 0; padding: 0; list-style: none; }
.receipt__rows li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.r-n { color: var(--grey); }
.r-what b { display: block; font-family: var(--sans); font-size: 18px; font-weight: 500; letter-spacing: -0.02em; }
.r-what small { display: block; margin-top: 4px; font-family: var(--sans); font-size: 15px; line-height: 1.45; letter-spacing: -0.005em; color: var(--grey); }
.r-p { padding-top: 2px; }
.receipt__total { display: flex; justify-content: space-between; align-items: baseline; padding: 20px 0 6px; border-top: 1.5px dashed var(--pending); margin-top: -1px; font-size: 15px; text-transform: uppercase; letter-spacing: 0.06em; }
.receipt__total span:last-child { font-size: 30px; letter-spacing: -0.03em; color: var(--blue); }
.receipt__foot { margin-top: 14px; font-size: 12px; color: var(--grey); text-align: center; }
.receipt__rows li, .receipt__total, .receipt__foot { transition: opacity 0.5s var(--out), transform 0.6s var(--out); }
.js .receipt-wrap:not(.in) :is(li, .receipt__total, .receipt__foot) { opacity: 0; transform: translateY(8px); }
.receipt-wrap.in li, .receipt-wrap.in .receipt__total, .receipt-wrap.in .receipt__foot { opacity: 1; transform: none; }
.receipt-wrap.in li:nth-child(1) { transition-delay: 0.35s; } .receipt-wrap.in li:nth-child(2) { transition-delay: 0.55s; }
.receipt-wrap.in li:nth-child(3) { transition-delay: 0.75s; } .receipt-wrap.in .receipt__total { transition-delay: 1.05s; }
.receipt-wrap.in .receipt__foot { transition-delay: 1.25s; }

/* ── 4 · end card: back to blue, the mascot points at you ── */
.end { --ghost: rgba(255, 255, 255, 0.22); position: relative; overflow: hidden; background: var(--blue); color: var(--white); padding-top: var(--section); }
.end__body { position: relative; z-index: 2; padding-bottom: clamp(140px, 16vw, 220px); }
.end__poster { font-size: clamp(56px, 10vw, 136px); line-height: 0.96; letter-spacing: -0.045em; }
.lede--end { max-width: 32ch; }
.join--end button { background: var(--graphite); }
.join--end .join__msg { color: var(--white); }
.actor--end { right: max(-120px, calc(50% - 780px)); bottom: -34%; height: min(124vh, 1120px); }
.js .actor.rise { transform: translateY(90px); transition-duration: 1s; }
.js .actor.rise.in { transform: none; }
.js .end__poster .dot { transform: scale(0); transition: transform 0.3s var(--out) 0.75s; }
.js .end__poster.in .dot { transform: none; }
/* the credits: a graphite strip after the end card */
.foot { background: var(--graphite); color: rgba(242, 242, 240, 0.6); font-size: 14px; }
.foot__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; padding-top: 28px; padding-bottom: 32px; }
.foot .wordmark { color: var(--white); font-size: 18px; }
.foot__links { display: flex; flex-wrap: wrap; gap: 24px; }
.foot a { text-decoration: none; }
.foot__links a:hover { color: var(--white); }

/* ── tablet ── */
@media (max-width: 1080px) {
  .stations { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
  .nav__link--how { display: none; }
}
/* ── phone ── */
@media (max-width: 760px) {
  .nav { padding-top: 10px; }
  .nav__inner { padding: 8px 8px 8px 14px; }
  .nav__link--ig { display: none; }
  .nav:not(.solid) .nav__link--ig { display: inline; }
  .nav:not(.solid) .nav__cta { display: none; }
  .hero { min-height: 0; }
  .hero__stage { padding-bottom: 0; }
  .hero__body { padding-top: 104px; }
  .join { grid-template-columns: 1fr; }
  .actor--hero { position: relative; right: auto; bottom: auto; height: auto; width: min(80vw, 400px); margin: -16px auto -36px; }
  .actor--hero .actor__sway, .actor--hero .actor__img { height: auto; width: 100%; }
  .proof__grid, .list__grid { grid-template-columns: minmax(0, 1fr); }
  .term__body { font-size: 12.5px; padding: 16px 16px 18px; }
  .t-row { grid-template-columns: 2.4ch 11ch minmax(0, 1fr); }
  .st__card { height: 210px; }
  .st__card--script { height: auto; padding-bottom: 26px; }
  .foot__inner { flex-direction: column; align-items: flex-start; }
  .phone { margin-top: 8px; }
  .stations { grid-template-columns: minmax(0, 1fr); row-gap: 44px; }
  .receipt { padding: 30px 22px 26px; }
  .end__body { padding-bottom: 0; }
  .actor--end { position: relative; right: auto; bottom: auto; height: auto; width: min(92vw, 440px); margin: -56px auto -64px; }
  .actor--end .actor__sway, .actor--end .actor__img { height: auto; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .poster .w { animation: none; color: var(--white); transform: none; }
  .poster .dot { animation: none; transform: none; }
  .hero .lede, .hero .join, .actor--hero { animation: none; opacity: 1; }
  .actor__sway, .actor__img, .hero__light::before, .end__light::before, .caret { animation: none; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  [data-ink]:not(.in) .w { color: inherit; }
  .term__body p, .script .w { transition: none; }
  .js .term:not(.in) .term__body p { opacity: 1; transform: none; }
  .st.on .curve__x, .st.on .curve__y { animation: none; }
}