/* Arc Lab waitlist site, v5 "cinematic launch" (founder, 26 Oct): one full-screen opening shot, a few very large
   statements, the series in a device, the skill running as the product shot, what's in the box, and an offer
   block that says exactly what joining gets you. Black, white and one gold. Satoshi throughout. Tokens in DESIGN.md. */
@font-face { font-family: "Satoshi"; src: url("fonts/Satoshi-Variable.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/JetBrainsMono-500.ttf") format("truetype"); font-weight: 500; font-display: swap; }

:root {
  --bg: #050506;
  --panel: #0B0C10;
  --hair: rgba(255, 255, 255, .09);
  --hair-2: rgba(255, 255, 255, .18);
  --text: #F5F5F7;
  --soft: #B3B5BD;
  --dim: #6F717B;
  --gold: #FFD84A;
  --red: #FF3B2F;
  --sans: "Satoshi", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --ease: cubic-bezier(.32, .72, 0, 1);
  --gutter: clamp(18px, 4vw, 44px);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 1.0625rem/1.6 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
/* behind the whole page: three faint light leaks that drift very slowly, and a fine film grain, so the dark isn't flat */
body::before { content: ""; position: fixed; inset: -25%; z-index: -1; pointer-events: none;
  background: radial-gradient(32% 28% at 18% 22%, rgba(255, 216, 74, .12), transparent 70%),
              radial-gradient(36% 30% at 82% 70%, rgba(255, 128, 64, .1), transparent 70%),
              radial-gradient(30% 26% at 68% 8%, rgba(96, 124, 255, .085), transparent 70%); }
body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .07;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 180px; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--gold); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: #fff; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3, p { margin: 0; }
b { font-weight: 700; }
.fine { font-size: .875rem; color: var(--dim); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 40; background: var(--gold); color: #111; padding: 10px 14px; border-radius: 10px; }
.skip:focus { top: 12px; }

/* the bar: nearly invisible over the opening, a dark glass once you scroll */
.bar { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: 16px var(--gutter); transition: background .6s var(--ease), box-shadow .6s var(--ease); }
.bar.solid { background: rgba(5, 5, 6, .9); box-shadow: 0 1px 0 var(--hair); }
.mark { display: inline-flex; align-items: center; gap: 9px; color: #fff; text-decoration: none; font: 700 1.0625rem/1 var(--sans); letter-spacing: -.01em; }
.mark svg { color: var(--gold); }
.mark-dot { fill: var(--red); }
.bar-cta { padding: 9px 18px; border-radius: 999px; color: #fff; text-decoration: none; font-weight: 600; font-size: .9375rem; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); transition: background .5s var(--ease), color .5s var(--ease), box-shadow .5s var(--ease); }
.bar-cta:hover { background: var(--gold); color: #111; box-shadow: none; }
.bar { padding-left: max(var(--gutter), calc((100vw - 1560px) / 2)); padding-right: max(var(--gutter), calc((100vw - 1560px) / 2)); }
.bar-nav { display: flex; gap: clamp(18px, 2.2vw, 34px); margin: 0 auto; }
.bar-nav a { position: relative; padding: 8px 0; color: rgba(255, 255, 255, .66); text-decoration: none; font-size: .9375rem; font-weight: 500; transition: color .4s var(--ease); }
.bar-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1.5px; border-radius: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.bar-nav a:hover, .bar-nav a.on { color: #fff; }
.bar-nav a:hover::after, .bar-nav a.on::after { transform: none; }
@media (max-width: 980px) { .bar-nav { display: none; } }

/* pills */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 54px; padding: 0 26px; border-radius: 999px; background: var(--gold); color: #111; text-decoration: none; font: 700 1.0625rem/1 var(--sans); white-space: nowrap; transition: transform .5s var(--ease), background .5s var(--ease); }
.pill:hover { background: #FFE47A; color: #111; }
.pill:active { transform: scale(.98); }
.pill:has(.pill-ic) { padding-right: 8px; }
.pill-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(0, 0, 0, .12); transition: transform .6s var(--ease); }
.pill:hover .pill-ic { transform: translate(2px, -2px) scale(1.05); }
.pill-line { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px var(--hair-2); }
.pill-line:hover { background: rgba(255, 255, 255, .06); color: #fff; box-shadow: inset 0 0 0 1px var(--gold); }
.pill-xl { min-height: 64px; font-size: 1.1875rem; padding-left: 32px; }

/* 1. the opening */
.open { position: relative; min-height: 100svh; display: grid; place-items: center; text-align: center; overflow: hidden; isolation: isolate; }
/* behind the line: a slow, tilted wall of real episode covers, columns drifting in turn up and down. site.js draws
   each column once into a tall strip and the browser slides the strips (no per-frame drawing, nothing blurred);
   the whole back fades out toward the bottom so the opening melts into the page */
.open-back { position: absolute; inset: 0; z-index: -1; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 50%, rgba(0, 0, 0, .55) 74%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 50%, rgba(0, 0, 0, .55) 74%, transparent 100%); }
.open-wall { position: absolute; inset: 0; opacity: 0; animation: wall-in 2.2s var(--ease) .15s forwards; }
@keyframes wall-in { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: none; } }
.ow-tilt { position: absolute; inset: 0; transform: rotate(-8deg); }
.ow-strip { position: absolute; display: block; }
.open-back::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(62% 56% at 50% 50%, rgba(5, 5, 6, .9) 0%, rgba(5, 5, 6, .72) 55%, rgba(5, 5, 6, .5) 100%),
              linear-gradient(180deg, rgba(5, 5, 6, .7) 0%, transparent 22%); }
.open-in { max-width: 1040px; padding: 120px var(--gutter) 140px; }
.kicker { font-size: .9375rem; font-weight: 500; color: rgba(255, 255, 255, .78); letter-spacing: .01em; text-wrap: balance; }
.open h1 { margin-top: 22px; font-weight: 800; font-size: clamp(3rem, 8.4vw, 7.75rem); line-height: .96; letter-spacing: -.045em; text-wrap: balance; }
/* the line arrives one row at a time, rising out of its own edge */
.hl { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.hl > span { display: inline-block; animation: line-up 1.1s var(--ease) both; }
.hl + .hl > span { animation-delay: .14s; }
@keyframes line-up { from { transform: translateY(105%); } }
.open-sub { margin: 28px auto 0; max-width: 40ch; font-size: clamp(1.125rem, 1.7vw, 1.375rem); line-height: 1.5; color: rgba(255, 255, 255, .8); }
.open-cta { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 28px; }
.link-play { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 600; }
.link-play::before { content: ""; width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 4.5v7l5.5-3.5z' fill='white'/%3E%3C/svg%3E") center / 14px no-repeat; transition: background-color .5s var(--ease); }
.link-play:hover { color: var(--gold); }
.link-play:hover::before { background-color: rgba(255, 255, 255, .12); }
.open-perk { display: inline-block; margin-top: 26px; padding: 9px 18px; border-radius: 999px; background: rgba(255, 216, 74, .12); box-shadow: inset 0 0 0 1px rgba(255, 216, 74, .32); color: #FFE58A; font-size: .9375rem; font-weight: 500; }
/* the waitlist count, with a live dot */
.live { margin-top: 20px; text-align: center; color: var(--soft); font-size: .9375rem; font-weight: 500; }
.live[hidden] { display: none; }
.live b { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.live-more { white-space: nowrap; }
.live-more::before { content: "· "; color: var(--dim); }
.live i { position: relative; display: inline-block; vertical-align: middle; width: 8px; height: 8px; margin: -2px 10px 0 0; border-radius: 50%; background: var(--red); }
.live i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--red); animation: ping 2.2s var(--ease) infinite; }
@keyframes ping { 75%, 100% { transform: scale(2.8); opacity: 0; } }
.cue { position: absolute; bottom: 26px; left: 50%; width: 1px; height: 54px; margin-left: -.5px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.cue span { position: absolute; left: 0; top: 0; width: 1px; height: 18px; background: #fff; animation: cue 2.2s var(--ease) infinite; }
@keyframes cue { from { transform: translateY(-18px); } to { transform: translateY(54px); } }
.open-in > * { animation: rise 1.1s var(--ease) both; }
.open-in > h1 { animation: none; }
.open-in > :nth-child(2) { animation-delay: .1s; }
.open-in > :nth-child(3) { animation-delay: .22s; }
.open-in > :nth-child(4) { animation-delay: .32s; }
.open-in > :nth-child(5) { animation-delay: .4s; }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } }

/* the join box at the top: email, then an optional "series you'd make" */
.hero-join { margin: 36px auto 0; max-width: 560px; text-align: left; }
.hj-row { display: flex; gap: 8px; padding: 6px; border-radius: 999px; background: rgba(8, 8, 12, .86); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); transition: box-shadow .4s var(--ease); }
.hj-row:focus-within { box-shadow: inset 0 0 0 1px var(--gold); }
.hj-row.err { box-shadow: inset 0 0 0 1px var(--red); }
.hj-row input { flex: 1; min-width: 0; border: 0; padding: 0 18px; background: transparent; color: #fff; font: 500 1.0625rem var(--sans); outline: 0; }
.hj-row input::placeholder, .hj-idea-in::placeholder { color: rgba(255, 255, 255, .45); }
.hj-row .pill { flex: none; border: 0; cursor: pointer; }
.hj-idea { display: block; margin: 16px 0 8px 20px; color: rgba(255, 255, 255, .72); font-size: .8125rem; font-weight: 600; }
.hj-idea span { color: rgba(255, 255, 255, .45); font-weight: 500; }
.hj-idea-in { width: 100%; min-height: 50px; padding: 0 20px; border: 0; border-radius: 16px; background: rgba(8, 8, 12, .5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); color: #fff; font: 500 1rem var(--sans); outline: 0; }
.hj-idea-in:focus { box-shadow: inset 0 0 0 1px rgba(255, 216, 74, .6); }
.hj-err { margin: 8px 0 0 20px; color: #FF8A80; font-size: .875rem; }
.hj-err:empty { display: none; }
.hero-vote { margin-top: 22px; }

/* shared: large centred statements */
.statement { font-weight: 800; font-size: clamp(2.6rem, 6.6vw, 6.25rem); line-height: 1.02; letter-spacing: -.045em; text-wrap: balance; }
.statement span { display: block; }
.dim { color: var(--dim); }
.statement-sm { font-weight: 800; font-size: clamp(2.2rem, 5vw, 4.5rem); line-height: 1.04; letter-spacing: -.04em; text-wrap: balance; }
.lead { margin: 20px auto 0; max-width: 44ch; font-size: clamp(1.0625rem, 1.5vw, 1.3125rem); line-height: 1.5; color: var(--soft); }
main > section { padding-left: var(--gutter); padding-right: var(--gutter); }
.proof, .watch, .run, .box, .tiers-sec, .honest, .faq-sec, .close { text-align: center; }

/* gentle rise as things arrive */
.js .rv { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.js .rv.in { opacity: 1; transform: none; }

/* 2. the proof */
.proof { padding-top: clamp(110px, 14vw, 180px); padding-bottom: clamp(60px, 8vw, 100px); }
.proof .statement { max-width: 15ch; margin: 0 auto; }
.proof-note { margin-top: 26px; color: var(--soft); font-size: 1rem; }
.figures { list-style: none; margin: clamp(56px, 7vw, 88px) auto 0; padding: 0; max-width: 1240px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border-top: 1px solid var(--hair); }
.figures li { padding: 30px 14px 8px; }
.figures li + li { border-left: 1px solid var(--hair); }
.figures b { display: block; font-weight: 800; font-size: clamp(2rem, 3vw, 3rem); white-space: nowrap; line-height: 1; letter-spacing: -.035em; }
.figures span { display: block; margin-top: 10px; color: var(--soft); font-size: .9375rem; line-height: 1.45; }
.receipts { max-width: 1240px; margin: clamp(80px, 10vw, 128px) auto 0; }
.receipts-h { font-weight: 800; font-size: clamp(1.75rem, 3.2vw, 2.75rem); line-height: 1.1; letter-spacing: -.035em; text-wrap: balance; }
.wall { list-style: none; margin: clamp(36px, 5vw, 56px) 0 0; padding: 0; columns: 4; column-gap: 14px; text-align: left; }
.wall li { break-inside: avoid; margin-bottom: 22px; }
.wall a { display: block; border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 1px var(--hair); transition: box-shadow .6s var(--ease); }
.wall a:hover { box-shadow: 0 0 0 1px var(--gold); }
.wall img { display: block; width: 100%; height: auto; }
.wall p { margin: 10px 2px 0; color: var(--soft); font-size: .875rem; line-height: 1.4; }
.wall b { color: #fff; font-weight: 700; }
.wall.short > li:nth-child(n + 7) { display: none; }
.wall-more { display: block; margin: 8px auto 0; min-height: 48px; padding: 0 24px; border: 0; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1px var(--hair-2); color: #fff; font: 600 .9375rem var(--sans); cursor: pointer; transition: box-shadow .4s var(--ease), background-color .4s var(--ease); }
.wall-more:hover { background-color: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--gold); }
.wall-more[hidden] { display: none; }
.receipts > .fine { margin-top: 8px; }

/* 3. the series */
.watch { padding-top: clamp(90px, 11vw, 150px); }
.device { margin: clamp(48px, 6vw, 72px) auto 0; width: min(360px, 80vw); }
.device-frame { padding: 10px; border-radius: 54px; background: linear-gradient(150deg, #2B2D35, #0C0D10 55%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 0 0 1px rgba(255, 255, 255, .06); }
.device-screen { aspect-ratio: 9 / 16; border-radius: 44px; overflow: hidden; background: #000; }
.device video { width: 100%; height: 100%; object-fit: cover; }
.device figcaption { margin-top: 18px; font-size: .875rem; color: var(--dim); }
.reel-row { list-style: none; margin: clamp(56px, 7vw, 88px) auto 0; padding: 0; max-width: 1200px; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 14px; }
.reel-row a { position: relative; display: block; border-radius: 18px; overflow: hidden; box-shadow: 0 0 0 1px var(--hair); transition: transform .8s var(--ease), box-shadow .8s var(--ease); }
.reel-row a:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px var(--hair-2), 0 30px 60px -30px rgba(0, 0, 0, .9); }
.reel-row span { position: absolute; left: 10px; bottom: 10px; padding: 5px 10px; border-radius: 999px; background: rgba(5, 5, 6, .78); color: var(--soft); font-size: .75rem; line-height: 1.2; }
.reel-row span b { color: #fff; font-size: .875rem; }
.reel-row .new { background: var(--red); color: #fff; font-weight: 700; }

/* 3b. you vote: the real end of Part 1 */
.vote-demo { padding-top: clamp(110px, 14vw, 180px); text-align: center; }
.vd { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: center; max-width: 980px; margin: clamp(40px, 5vw, 64px) auto 0; text-align: left; }
.vd > * { min-width: 0; }
.vd-shot { margin: 0; border-radius: 22px; overflow: hidden; box-shadow: 0 0 0 1px var(--hair), 0 40px 80px -40px rgba(0, 0, 0, .9); }
.vd-shot img { display: block; width: 100%; height: auto; }
.vd-panel { padding: clamp(22px, 4vw, 40px); border-radius: 28px; background: #0B0C10; box-shadow: 0 0 0 1px var(--hair); }
.vd-tag { color: var(--gold); font-size: .875rem; font-weight: 600; }
.vd-scene { margin-top: 10px; font-size: clamp(1.25rem, 2vw, 1.625rem); font-weight: 700; line-height: 1.3; letter-spacing: -.02em; }
.vd-opts { display: grid; gap: 10px; margin-top: 26px; }
.vd-opt { position: relative; display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 0 20px; border: 0; border-radius: 16px; overflow: hidden; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--hair-2); color: #fff; font: 700 1.125rem var(--sans); text-align: left; cursor: pointer; transition: box-shadow .4s var(--ease), background-color .4s var(--ease); }
.vd-opt:hover { background-color: rgba(255, 216, 74, .06); box-shadow: inset 0 0 0 1px var(--gold); }
.vd-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: rgba(255, 255, 255, .08); transition: width 1.1s var(--ease); }
.vd-n, .vd-l, .vd-p { position: relative; }
.vd-n { display: grid; flex: none; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .1); font-size: .9375rem; }
.vd-l { flex: 1; }
.vd-p { color: var(--soft); font-variant-numeric: tabular-nums; opacity: 0; transition: opacity .5s var(--ease) .35s; }
.vd.voted .vd-opt { cursor: default; }
.vd.voted .vd-opt:hover { background-color: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--hair-2); }
.vd.voted .vd-p { opacity: 1; }
.vd .vd-opt.mine, .vd.voted .vd-opt.mine:hover { box-shadow: inset 0 0 0 1.5px var(--gold); }
.vd-opt.mine .vd-n { background: var(--gold); color: #111; }
.vd-opt.mine .vd-fill { background: rgba(255, 216, 74, .18); }
.vd-verdict { margin-top: 16px; color: var(--soft); }
.vd-verdict:empty { display: none; }
.vd-verdict b { color: #fff; }
.vd-next { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px 18px; align-items: center; margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--hair); animation: rise .8s var(--ease) both; }
.vd-next[hidden] { display: none; }
.vd-next img { display: block; width: 96px; height: auto; border-radius: 12px; box-shadow: 0 0 0 1px var(--hair); }
.vd-title { margin-top: 6px; font-size: 1.375rem; font-weight: 800; letter-spacing: -.02em; }
.vd-meta { margin-top: 4px; color: var(--soft); font-size: .9375rem; }
.vd-next .pill { grid-column: 1 / -1; justify-self: start; }
.vote-demo > .fine { margin-top: 18px; }

/* 4. the skill running */
.run { padding-top: clamp(110px, 14vw, 180px); }
.term { margin: clamp(48px, 6vw, 72px) auto 0; max-width: 960px; text-align: left; border-radius: 18px; background: #0A0B0E; box-shadow: 0 0 0 1px var(--hair); overflow: hidden; }
.term-bar { position: relative; display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1px solid var(--hair); background: #0E0F13; }
.term-bar i { width: 11px; height: 11px; border-radius: 50%; background: #3A3C44; }
.term-bar span { position: absolute; left: 0; right: 0; text-align: center; font: 500 .75rem/1 var(--mono); color: var(--dim); pointer-events: none; }
.term-body { padding: 26px 30px 28px; font: 500 .9375rem/1.8 var(--mono); color: #D6D8DF; }
.t-cmd { color: #fff; margin-bottom: 14px; }
.t-p { color: var(--gold); }
.t-typed::after { content: ""; display: inline-block; width: .55em; height: 1.1em; margin-left: 2px; vertical-align: -.18em; background: var(--gold); opacity: 0; }
.term.typing .t-typed::after { opacity: 1; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.t-ok { display: inline-block; width: 1.4em; color: #3DD68C; }
.t-ln em { font-style: normal; color: #767A86; margin-left: .6em; }
.t-ln b { margin-left: .7em; padding: 1px 8px; border-radius: 6px; background: rgba(255, 216, 74, .12); color: var(--gold); font-weight: 500; font-size: .8125rem; white-space: nowrap; }
.t-done { margin-top: 12px; color: #fff; }
.t-done .t-ok { color: var(--gold); }
.js .term .t-ln { opacity: 0; transform: translateY(4px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.js .term .t-ln.on { opacity: 1; transform: none; }
.term figcaption { padding: 14px 30px; border-top: 1px solid var(--hair); font-size: .8125rem; color: var(--dim); }

/* 5. what's in the box */
.box { padding-top: clamp(110px, 14vw, 180px); }
.box-grid { list-style: none; margin: clamp(48px, 6vw, 72px) auto 0; padding: 0; max-width: 1100px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--hair); text-align: left; }
.box-grid li { padding: 38px 32px 40px; border-bottom: 1px solid var(--hair); }
.box-grid li:not(:nth-child(3n)) { border-right: 1px solid var(--hair); }
.box-grid svg { width: 28px; height: 28px; fill: none; stroke: var(--gold); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.box-grid h3 { margin-top: 22px; font-size: 1.25rem; font-weight: 700; letter-spacing: -.015em; }
.box-grid p { margin-top: 8px; color: var(--soft); font-size: 1rem; }

/* 6. the offer */
.offer { padding-top: clamp(110px, 14vw, 180px); }
.offer-card { max-width: 1120px; margin: 0 auto; padding: clamp(32px, 6vw, 72px) clamp(20px, 5vw, 64px); border-radius: 34px; text-align: center; background: radial-gradient(80% 70% at 50% 0%, rgba(255, 216, 74, .13), transparent 70%), #0B0C10; box-shadow: 0 0 0 1px rgba(255, 216, 74, .24); }
.offer-card h2 { font-weight: 800; font-size: clamp(2.2rem, 5vw, 4.25rem); line-height: 1.04; letter-spacing: -.04em; }
.offer-card h2 span { color: var(--dim); }
.gets { list-style: none; margin: clamp(40px, 5vw, 64px) 0 clamp(36px, 5vw, 56px); padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gets li { padding: 8px clamp(14px, 2.4vw, 32px); }
.gets li + li { border-left: 1px solid var(--hair); }
.when { color: var(--gold); font-size: .875rem; font-weight: 600; }
.what { margin-top: 12px; font-size: 1.5rem; font-weight: 800; letter-spacing: -.025em; line-height: 1.15; }
.huge { display: block; font-size: clamp(3.5rem, 7vw, 5.5rem); line-height: .95; letter-spacing: -.05em; color: var(--gold); }
.how { margin: 12px auto 0; max-width: 32ch; color: var(--soft); font-size: .9375rem; }
.offer-form { max-width: 560px; margin: 0 auto; }
.form-slot { border-radius: 18px; background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px var(--hair); padding: 14px; text-align: left; }
/* color-scheme: normal matches the light-scheme form page, or Chrome paints a white box behind the see-through form */
.form-slot iframe { display: block; width: 100%; min-height: 520px; border: 0; color-scheme: normal; }
.form-wait { border: 1.5px dashed var(--hair-2); border-radius: 12px; padding: 48px 20px; text-align: center; color: var(--dim); }
.form-wait a { color: var(--gold); }
.joined { padding: clamp(24px, 5vw, 40px) clamp(10px, 3vw, 24px); text-align: center; outline: 0; animation: pop .5s var(--ease); }
.joined h3 { margin: 0; font-weight: 800; font-size: clamp(1.75rem, 3.4vw, 2.25rem); line-height: 1.1; letter-spacing: -.03em; }
.joined > p { margin: 10px 0 0; color: var(--soft); }
.joined-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 24px 0 18px; }
.joined .fine { max-width: 40ch; margin: 0 auto; }
.offer-form .fine { margin-top: 14px; }
.offer-form .live { margin: 0 0 16px; }
/* founding spots, counted down from the live waitlist */
.founding { max-width: 560px; margin: 0 auto 28px; padding: 20px 22px; border-radius: 18px; background: rgba(255, 216, 74, .06); box-shadow: inset 0 0 0 1px rgba(255, 216, 74, .28); text-align: left; }
.founding[hidden] { display: none; }
.fd-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; }
.fd-h { font-weight: 700; }
.fd-h b { color: var(--gold); }
.fd-left { color: var(--soft); font-size: .9375rem; }
.fd-left b { color: #fff; font-variant-numeric: tabular-nums; }
.fd-bar { height: 10px; margin-top: 12px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, .08); }
.fd-bar i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #FFD84A, #FF9F43); transition: width 1.4s var(--ease); }
.fd-perk { margin-top: 12px; color: var(--soft); font-size: .9375rem; }

/* 7. tiers */
.tiers-sec { padding-top: clamp(110px, 14vw, 180px); }
.tiers { max-width: 1120px; margin: clamp(48px, 6vw, 72px) auto 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; text-align: left; }
.tier { display: flex; flex-direction: column; padding: 32px; border-radius: 26px; background: var(--panel); box-shadow: 0 0 0 1px var(--hair); }
.tier h3 { font-size: 1.75rem; font-weight: 800; letter-spacing: -.03em; }
.tier-for { margin-top: 8px; color: var(--soft); min-height: 3.2em; }
.tier ul { list-style: none; margin: 22px 0 30px; padding: 0; flex: 1; }
.tier li { position: relative; padding: 11px 0 11px 28px; border-top: 1px solid var(--hair); color: var(--soft); font-size: .9688rem; }
.tier li::before { content: ""; position: absolute; left: 0; top: 15px; width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l2.8 2.8 6.2-6.4' fill='none' stroke='%23FFD84A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.tier .pill { width: 100%; }
.tier-main { background: linear-gradient(180deg, rgba(255, 216, 74, .09), var(--panel) 45%); box-shadow: 0 0 0 1px rgba(255, 216, 74, .45); }
.tier-tag { align-self: flex-start; margin-bottom: 14px; padding: 4px 12px; border-radius: 999px; background: var(--gold); color: #111; font-weight: 700; font-size: .75rem; }

/* 8. the honest part */
.honest { padding-top: clamp(110px, 14vw, 180px); }
.honest-grid { margin: clamp(44px, 5vw, 64px) auto 0; max-width: 1040px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--hair); border-radius: 22px; overflow: hidden; text-align: left; box-shadow: 0 0 0 1px var(--hair); }
.honest-grid div { padding: clamp(24px, 3vw, 36px); background: var(--panel); }
.honest-grid dt { font-weight: 700; font-size: 1.125rem; }
.honest-grid dd { margin: 8px 0 0; color: var(--soft); }

/* 9. questions */
.faq-sec { padding-top: clamp(110px, 14vw, 180px); }
.faq { max-width: 780px; margin: clamp(36px, 5vw, 56px) auto 0; text-align: left; border-top: 1px solid var(--hair); }
.faq details { border-bottom: 1px solid var(--hair); }
.faq summary { cursor: pointer; list-style: none; position: relative; padding: 22px 52px 22px 0; font-weight: 600; font-size: 1.125rem; letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 2px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--hair-2); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.5v9M3.5 8h9' stroke='white' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 13px no-repeat; transition: transform .6s var(--ease); }
.faq details[open] summary::after { transform: rotate(135deg); }
.faq details p { padding: 0 52px 24px 0; color: var(--soft); }

/* 10. the close */
.close { padding-top: clamp(130px, 16vw, 200px); padding-bottom: clamp(120px, 14vw, 180px); }
.close .pill { margin-top: 40px; }
.close .fine { margin-top: 18px; }

/* footer */
.foot { max-width: 1200px; margin: 0 auto; padding: 36px var(--gutter) 56px; }
.foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding-top: 28px; border-top: 1px solid var(--hair); }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot nav a { color: var(--soft); text-decoration: none; font-size: .9375rem; }
.foot nav a:hover { color: #fff; }
.legal { margin-top: 18px; font-size: .8125rem; color: var(--dim); max-width: 100ch; }

/* phones: the join bar; everywhere: the pop-up form */
.sticky-cta { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 20; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 22px; border-radius: 999px; background: var(--gold); color: #111; text-decoration: none; font: 700 1.0625rem/1 var(--sans); box-shadow: 0 18px 40px -10px rgba(0, 0, 0, .8); transform: translateY(160%); transition: transform .6s var(--ease); }
.sticky-cta span { font-weight: 500; font-size: .8125rem; opacity: .7; }
.sticky-cta.show { transform: none; }
@media (min-width: 861px) { .sticky-cta { display: none; } }
.join-dialog { width: min(600px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 24px clamp(18px, 4vw, 32px) 26px; border: 0; border-radius: 28px; background: #0D0E12; color: var(--text); box-shadow: 0 0 0 1px rgba(255, 216, 74, .25), 0 60px 140px -30px rgba(0, 0, 0, .95); }
.join-dialog[open] { animation: pop .5s var(--ease); }
@keyframes pop { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.join-dialog::backdrop { background: rgba(2, 2, 3, .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.jd-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.jd-head h2 { font-weight: 800; font-size: 1.75rem; letter-spacing: -.03em; }
.jd-close { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .07); color: #fff; cursor: pointer; transition: background .4s var(--ease); }
.jd-close:hover { background: rgba(255, 255, 255, .14); }
.jd-gets { list-style: none; margin: 16px 0 18px; padding: 0; display: grid; gap: 8px; }
.jd-gets li { position: relative; padding-left: 26px; color: var(--soft); }
.jd-gets li::before { content: ""; position: absolute; left: 0; top: .35em; width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l2.8 2.8 6.2-6.4' fill='none' stroke='%23FFD84A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.jd-gets b { color: #fff; }
.join-dialog .fine { margin-top: 12px; }
.join-dialog .live { text-align: left; margin: 0 0 14px; }

/* privacy page */
.doc { max-width: 760px; margin: 0 auto; padding: 130px var(--gutter) 64px; }
.doc h1 { font-weight: 800; font-size: clamp(2.5rem, 6vw, 4rem); letter-spacing: -.04em; }
.doc .lede { margin-top: 18px; margin-bottom: 8px; font-size: 1.1875rem; color: var(--soft); }
.doc h2 { font-weight: 700; font-size: 1.375rem; margin-top: 40px; letter-spacing: -.02em; }
.doc p, .doc li { max-width: 64ch; color: var(--soft); }
.doc p { margin-top: 12px; }
.doc ul { padding-left: 1.2em; }
.doc li { margin: 8px 0; }
.doc b { color: #fff; }
.doc-foot { max-width: calc(760px + 2 * var(--gutter)); margin: 0 auto; }
.todo { background: rgba(255, 59, 47, .18); color: #FF8A80; padding: 0 5px; border-radius: 4px; }

@media (max-width: 980px) {
  .figures { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wall { columns: 2; column-gap: 10px; }
  .figures li:nth-child(odd) { border-left: 0; }
  .figures li:nth-child(n + 3) { border-top: 1px solid var(--hair); }
  .figures li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .reel-row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); padding: 4px var(--gutter) 12px; scroll-padding: 0 var(--gutter); scrollbar-width: none; }
  .reel-row::-webkit-scrollbar { display: none; }
  .reel-row li { flex: 0 0 40%; scroll-snap-align: start; }
  .box-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .box-grid li:not(:nth-child(3n)) { border-right: 0; }
  .box-grid li:nth-child(odd) { border-right: 1px solid var(--hair); }
  .tiers { grid-template-columns: 1fr; max-width: 560px; }
  .tier-for { min-height: 0; }
  .foot { padding-bottom: 104px; }
}
@media (max-width: 760px) {
  .vd { grid-template-columns: 1fr; }
  .vd-shot { width: 60%; max-width: 240px; margin: 0 auto; }
  .vd-next { grid-template-columns: 72px minmax(0, 1fr); }
  .vd-next img { width: 72px; }
  .vd-next .pill { justify-self: stretch; }
}
@media (max-width: 680px) {
  .open h1 { font-size: clamp(2.5rem, 11.5vw, 3.25rem); line-height: 1; }
  .open-in { padding-bottom: 120px; }
  .open-cta .pill { width: 100%; max-width: 340px; }
  .hj-row { flex-direction: column; padding: 8px; border-radius: 24px; }
  .hj-row input { min-height: 50px; text-align: center; }
  .hj-row .pill { width: 100%; }
  .hj-idea, .hj-err { margin-left: 0; text-align: center; }
  .hj-idea-in { text-align: center; }
  .live-more { display: block; margin-top: 2px; }
  .live-more::before { content: none; }
  .gets { grid-template-columns: 1fr; }
  .gets li + li { border-left: 0; border-top: 1px solid var(--hair); padding-top: 26px; margin-top: 18px; }
  .box-grid { grid-template-columns: 1fr; }
  .box-grid li:nth-child(odd) { border-right: 0; }
  .box-grid li { padding: 30px 6px; }
  .honest-grid { grid-template-columns: 1fr; }
  .term-body { padding: 20px 18px 22px; font-size: .78rem; line-height: 1.7; }
  .t-ln em { display: block; margin-left: 1.4em; }
  .t-ln b { margin-left: 1.4em; }
  .term figcaption { padding: 12px 18px; }
  .faq summary { padding-right: 46px; }
  .faq details p { padding-right: 0; }
}

/* phones on their side and other short screens: the opening fits without a long scroll */
@media (max-height: 540px) and (orientation: landscape) {
  .open { min-height: 0; }
  .open-in { padding: 92px var(--gutter) 64px; }
  .open h1 { font-size: clamp(2.4rem, 6.4vw, 3.6rem); }
  .open-sub { margin-top: 16px; }
  .hero-join { margin-top: 22px; }
  .cue { display: none; }
}
/* very wide screens: the opening grows with the screen instead of floating small in the middle */
@media (min-width: 1800px) {
  .open-in { max-width: 1280px; }
  .open h1 { font-size: clamp(7.75rem, 6.2vw, 10rem); }
  .open-sub { font-size: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .open-wall, .hl > span, .open-in > *, .cue span, .join-dialog[open], .joined, .term.typing .t-typed::after, .live i::after { animation: none; }
  .open-wall { opacity: 1; }
  .js .rv, .js .term .t-ln { opacity: 1; transform: none; transition: none; }
  .pill, .pill-ic, .reel-row a, .wall a, .sticky-cta, .faq summary::after, .bar, .vd-fill, .vd-p, .fd-bar i { transition: none; }
  .vd-next { animation: none; }
}

/* ---- the shop (29 Oct): the page switches by itself from waitlist to early access to buy buttons (site.js) ---- */
[hidden] { display: none !important; }

/* from Sunday: the opening's buy button, with the price under it */
.hero-buy { margin-top: 40px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.hb-note { color: rgba(255, 255, 255, .8); font-size: 1rem; }
.hb-note b { color: #fff; }

/* 7. pricing */
.price { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.price b { font-size: clamp(2.6rem, 4.4vw, 3.4rem); font-weight: 800; letter-spacing: -.045em; line-height: 1; color: #fff; }
.price span { color: var(--soft); font-size: .9375rem; }
.price-note { margin-top: 10px; color: #FFE58A; font-size: .9375rem; font-weight: 500; }
.tier-tag.soon { background: rgba(255, 255, 255, .1); color: #fff; }
.tier-fine { margin-top: 12px; color: var(--dim); font-size: .8125rem; text-align: center; }
.trust { list-style: none; max-width: 1120px; margin: 20px auto 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; text-align: left; }
.trust li { display: flex; gap: 14px; align-items: flex-start; padding: 20px 22px; border-radius: 20px; box-shadow: inset 0 0 0 1px var(--hair); color: var(--soft); font-size: .9375rem; }
.trust svg { flex: none; width: 24px; height: 24px; fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.trust b { display: block; margin-bottom: 2px; color: #fff; font-size: 1rem; }
.reviews-note { margin: 26px auto 0; max-width: 62ch; }
@media (max-width: 980px) { .trust { grid-template-columns: 1fr; max-width: 560px; } }

/* the offer once the shop is open, and the 40% link after joining during early access */
.offer-sub { margin: 18px auto 32px; max-width: 46ch; color: var(--soft); font-size: 1.0625rem; }
.joined-buy { margin: 4px auto 18px; max-width: 440px; padding: 18px; border-radius: 18px; background: rgba(255, 216, 74, .08); box-shadow: inset 0 0 0 1px rgba(255, 216, 74, .3); }
.joined-buy p { color: var(--soft); }
.joined-buy b { color: #fff; }
.joined-buy .pill { margin-top: 14px; }

/* the setup guide and the thank-you page */
.doc h3 { margin-top: 26px; font-weight: 700; font-size: 1.125rem; color: #fff; }
.doc pre { max-width: 100%; margin: 14px 0 0; padding: 14px 16px; border-radius: 14px; background: #0B0C10; box-shadow: inset 0 0 0 1px var(--hair); overflow-x: auto; font: 500 .875rem/1.65 var(--mono); color: #E8E9EE; }
.doc code { padding: 1px 6px; border-radius: 6px; background: rgba(255, 255, 255, .07); color: #fff; font: 500 .875em var(--mono); }
.doc pre code { padding: 0; background: none; font-size: inherit; }
.doc strong, .doc b { color: #fff; }
.steps { list-style: none; counter-reset: step; margin: 30px 0 0; padding: 0 !important; display: grid; gap: 14px; }
.steps > li { min-width: 0; counter-increment: step; position: relative; margin: 0; padding: 22px 22px 24px 72px; max-width: none; border-radius: 22px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--hair); }
.steps > li::before { content: counter(step); position: absolute; left: 20px; top: 20px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--gold); color: #111; font-weight: 800; }
.steps > li > h2, .steps > li > h3 { margin-top: 4px; }
.steps > li > p:first-of-type { margin-top: 8px; }
@media (max-width: 560px) { .steps > li { padding: 64px 18px 22px; } .steps > li::before { top: 18px; left: 18px; } }
.callout { margin-top: 26px; padding: 18px 20px; border-radius: 18px; background: rgba(255, 216, 74, .07); box-shadow: inset 0 0 0 1px rgba(255, 216, 74, .28); }
.callout p:first-child { margin-top: 0; }
.doc .pill { margin-top: 18px; }
.doc .tbl { margin-top: 16px; overflow-x: auto; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--hair); }
.doc table { width: 100%; min-width: 0; border-collapse: collapse; font-size: .9375rem; }
.doc th, .doc td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hair); color: var(--soft); }
.doc th { color: #fff; font-weight: 600; background: rgba(255, 255, 255, .03); }
.doc tr:last-child td { border-bottom: 0; }
.toc { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.toc a { padding: 7px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--hair-2); color: var(--soft); text-decoration: none; font-size: .875rem; }
.toc a:hover { color: #fff; box-shadow: inset 0 0 0 1px var(--gold); }
.offer-card h2 .ph { color: inherit; }
.offer-card h2 .ph span { color: var(--dim); }