/* Version 1, "Cinema": video-first and immersive. Same TLA colours and fonts, layered over tla.css.
   Dark is the default. body.light swaps the surfaces so Dylan can compare both. The red guarantee stays red in both. */
.cinema{--bg:#161616;--band:#331F1F;--tile:rgba(255,255,255,.07);--tile-band:#161616;--text:#FFFFFF;--muted:rgba(255,255,255,.72);--line:rgba(255,255,255,.18);--glow:rgba(153,31,31,.5);--glass:rgba(22,22,22,.88);background:var(--bg);color:var(--text)}
.cinema.light{--bg:#FFFFFF;--band:#F5F4EF;--tile:#F5F4EF;--tile-band:#FFFFFF;--text:#1A190F;--muted:#662929;--line:rgba(26,25,15,.16);--glow:rgba(204,0,0,.1);--glass:rgba(255,255,255,.92)}
.cinema section{padding-block:120px;scroll-margin-top:60px}
.cinema .band{background:var(--band)}
.cinema :focus-visible{outline-color:var(--text)}
.cinema details[open]>summary{color:var(--text)}
.cinema .plain{background:transparent;color:var(--text);border-color:var(--line)}
.cinema .plain:hover{background:var(--text);color:var(--bg)}
.cinema dialog{--muted:#662929}
.cinema dialog .plain{background:#fff;color:#1A190F;border-color:#1A190F}
.cinema dialog .plain:hover{background:#1A190F;color:#fff}
.cinema footer.site{background:var(--bg)}
.cinema p{color:inherit}
.cinema .sub-text{color:var(--muted)}

.ico{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* Header: stays with you, gets out of the way when the video plays */
.bar{position:sticky;top:0;z-index:30;background:var(--glass);backdrop-filter:blur(10px);transition:opacity 400ms ease,transform 400ms var(--ease)}
.bar .wrap{display:flex;align-items:center;gap:12px;padding-block:14px}
.bar .wordmark{margin-right:auto}
.cinema .bar .cta{min-height:44px;padding:8px 22px;font-size:15px;width:auto}
.mode{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 16px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--text);font-weight:600;font-size:14px}
.mode:hover{background:var(--text);color:var(--bg)}
.mode svg{width:18px;height:18px}
.playing .bar{opacity:0;transform:translateY(-100%);pointer-events:none}

/* Hero: headline, video, one button. Nothing else. */
.cinema .hero{padding-top:56px;padding-bottom:104px;background:radial-gradient(900px 560px at 50% 70%,var(--glow),transparent 65%),var(--bg)}
.cinema .hero h1{font-size:clamp(36px,5.2vw,68px);max-width:1040px}
.cinema .hero .lead{max-width:720px;color:var(--muted)}
.cinema .hero-copy{transition:opacity 600ms ease}
.playing .hero-copy{opacity:.22}
.cinema .video-shell{max-width:1040px;margin-top:48px}
.cinema .video{border-radius:20px;box-shadow:0 0 0 1px var(--line),0 40px 120px rgba(204,0,0,.22);transition:box-shadow 600ms ease}
.playing .video{box-shadow:0 0 0 1px var(--line),0 50px 160px rgba(204,0,0,.4)}
.cinema .hero .action{margin-top:44px}
.cinema .cta{min-height:64px;padding:18px 44px;font-size:20px}

/* The scene: his Saturday night, told with two text messages */
.scene{display:grid;grid-template-columns:1.1fr .9fr;gap:80px;align-items:center}
.scene h2{font-size:clamp(44px,6.4vw,92px);line-height:.98}
.scene p{font-size:20px;line-height:1.6;color:var(--muted)}
.phone{display:grid;gap:16px;font-size:17px;line-height:1.4}
.thread{display:grid;gap:8px;padding:20px 20px 24px;border-radius:28px;background:var(--tile)}
.thread .who{font:700 12px/1.4 'DM Sans',Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 8px;padding-bottom:12px;box-shadow:inset 0 -1px 0 var(--line)}
.bubble{max-width:82%;margin:0;padding:12px 16px;border-radius:20px 20px 20px 6px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);justify-self:start}
.bubble.out{border-radius:20px 20px 6px 20px;background:var(--red);color:#fff;box-shadow:none;justify-self:end}
.phone{font-size:19px}
.typing{display:inline-flex;gap:6px;padding:16px 18px}
.typing i{width:8px;height:8px;border-radius:50%;background:#fff;animation:blink 1.3s ease-in-out infinite}
.typing i:nth-child(2){animation-delay:.18s}
.typing i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,60%,100%{opacity:.3}30%{opacity:1}}
.thread .me{justify-self:end;margin:0 6px -2px 0;font-size:13px;font-weight:700;color:var(--muted)}
.thread .seen{justify-self:center;margin:8px 0 0;font-size:13px;color:var(--muted)}
.cause{max-width:860px;margin:120px auto 0;text-align:center}
.cause h3{font:400 clamp(30px,3.6vw,46px)/1.12 'DM Serif Display',Georgia,serif;letter-spacing:-.02em;margin-bottom:24px}
.cause p{margin-inline:auto;font-size:20px;line-height:1.6;color:var(--muted)}
.cause .bigline{font:400 clamp(64px,11vw,160px)/.92 'DM Serif Display',Georgia,serif;letter-spacing:-.04em;margin:48px 0 0;color:var(--red);-webkit-text-stroke:.8px currentColor}
.cinema .quote footer{color:var(--muted)}

/* Five phases: cards that stack as you scroll */
.stack{list-style:none;margin:0;padding:0;display:grid;gap:28px;counter-reset:k}
.stack li{counter-increment:k;position:sticky;top:calc(88px + var(--i)*18px);display:grid;grid-template-columns:auto 1fr;gap:12px 40px;align-items:center;min-height:230px;padding:44px 48px;border-radius:28px;background:var(--tile-band);box-shadow:0 -1px 0 var(--line),0 -24px 60px rgba(0,0,0,.28)}
.light .stack li{box-shadow:0 0 0 1px var(--line),0 -18px 40px rgba(26,25,15,.08)}
.stack li{grid-template-columns:auto 1fr auto}
.stack li::before{content:"0" counter(k);font:400 clamp(72px,9vw,132px)/.9 'DM Serif Display',Georgia,serif;letter-spacing:-.04em;color:var(--red);grid-row:1 / span 3}
.stack em,.stack b,.stack p{grid-column:2}
.stack em{align-self:end;font:700 13px/1.4 'DM Sans',Arial,sans-serif;font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.stack .ico{grid-column:3;grid-row:1 / span 3;width:clamp(80px,9vw,124px);height:auto;color:var(--text);opacity:.22;stroke-width:1}
.stack b{font:400 clamp(34px,4vw,52px)/1 'DM Serif Display',Georgia,serif;align-self:center}
.stack p{align-self:start;color:var(--muted);font-size:18px;max-width:52ch}

/* The 12 playbooks: four featured, eight as a clean list. No numbered grid. */
.shelf-head{margin:120px 0 32px}
.shelf-head h3{font:400 clamp(30px,3.6vw,46px)/1.1 'DM Serif Display',Georgia,serif;letter-spacing:-.02em;margin-bottom:8px}
.featured{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.featured li{display:flex;flex-direction:column;gap:8px;min-height:250px;padding:28px;border-radius:24px;background:var(--tile-band);box-shadow:inset 0 0 0 1px var(--line);transition:transform 220ms var(--ease)}
.featured .ico,.featured .glyph{margin-bottom:auto}
.featured .ico{width:56px;height:56px;color:var(--red)}
.featured .glyph{font:400 76px/.9 'DM Serif Display',Georgia,serif;letter-spacing:-.04em}
.featured b{font:400 26px/1.12 'DM Serif Display',Georgia,serif}
.featured li>span:last-child{font-size:15px;line-height:1.45;color:var(--muted)}
@media(hover:hover){.featured li:hover{transform:translateY(-6px)}}
.more-books{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 32px}
.more-books li{display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:start}
.more-books .ico{width:32px;height:32px;color:var(--red)}
.more-books .glyph{font:400 34px/1 'DM Serif Display',Georgia,serif;color:var(--red);text-align:center}
.more-books b{display:block;font-weight:700;line-height:1.3}
.more-books span{display:block;font-size:14px;line-height:1.45;color:var(--muted)}

/* Proof: three plain numbers, the two videos side by side, a tight strip of messages */
.facts{list-style:none;margin:0 0 64px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px}
.facts b{display:block;font:400 clamp(56px,6.4vw,88px)/1 'DM Serif Display',Georgia,serif;letter-spacing:-.03em;margin-bottom:10px}
.facts span{display:block;font-size:16px;line-height:1.5;color:var(--muted)}
.cinema .videos iframe{box-shadow:0 0 0 1px var(--line)}
.cinema .marquee{mask-image:none;margin-top:72px}
.cinema .marquee-track{animation-duration:150s}
.cinema .marquee-group{gap:10px;padding:4px 10px 4px 0}
.cinema .marquee-group button{flex:0 0 210px;width:210px;border-radius:16px;overflow:hidden}
.cinema .marquee-group img{aspect-ratio:1;object-fit:cover;object-position:50% 0;border-radius:0}

.cinema #proof{padding-bottom:64px}

/* Dylan: the quote is the headline */
.story{display:grid;grid-template-columns:380px 1fr;gap:80px;align-items:center}
.arch{border-radius:999px 999px 28px 28px;background:var(--paper);overflow:hidden;padding:48px 28px 0;aspect-ratio:4/5;display:flex;align-items:flex-end}
.arch img{display:block;width:100%;height:auto;mix-blend-mode:multiply}
.bigquote{margin:0;font:400 clamp(30px,3.8vw,54px)/1.1 'DM Serif Display',Georgia,serif;letter-spacing:-.025em}
.bigquote em{font-style:normal;color:var(--red)}
.sig{margin:24px 0 0;font-weight:700}
.sig span{display:block;font-weight:500;color:var(--muted)}
.story-text{margin-top:28px;max-width:60ch}
.story-text p{color:var(--muted)}

/* Guarantee: the one loud moment, kept simple */
.cinema .loud{background:var(--deep);color:#fff;text-align:center}
.cinema .loud :focus-visible{outline-color:#fff}
.shield{display:block;width:112px;height:112px;margin:0 auto 28px}
.cinema .loud h2{font-size:clamp(52px,10vw,148px);line-height:.92;letter-spacing:-.04em;margin-bottom:28px;-webkit-text-stroke:.8px currentColor}
.cinema .loud .lead{margin-inline:auto;max-width:640px}
.either{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:72px;max-width:1080px;margin:64px auto 0}
.either label{position:relative;display:grid;align-content:start;justify-items:center;gap:20px;padding:56px 40px;border-radius:28px;background:rgba(26,25,15,.3);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);cursor:pointer;transition:transform 240ms var(--ease),background-color 200ms,color 200ms,box-shadow 240ms}
.either label:hover{transform:translateY(-8px);box-shadow:inset 0 0 0 2px #fff}
.either svg{width:64px;height:64px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.either b{font:400 clamp(26px,2.8vw,38px)/1.15 'DM Serif Display',Georgia,serif;letter-spacing:-.02em;max-width:17ch}
.either label span{max-width:28ch;opacity:.85}
.either .tag{display:none;position:absolute;top:-14px;left:50%;transform:translateX(-50%);padding:6px 16px;border-radius:999px;background:var(--ink);color:#fff;font:700 12px/1.3 'DM Sans',Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;font-style:normal;white-space:nowrap}
.either input:checked+label{background:#fff;color:var(--deep);transform:translateY(-8px);box-shadow:0 28px 64px rgba(26,25,15,.4)}
.either input:checked+label .tag{display:block}
.either input:focus-visible+label{outline:3px solid #fff;outline-offset:4px}
.either .or{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--deep);box-shadow:inset 0 0 0 2px rgba(255,255,255,.6);font:700 13px/1 'DM Sans',Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;z-index:1}
.pick-hint{margin:28px auto 0;font-size:15px;opacity:.85}

/* Is this you: he ticks it himself */
.check{display:grid;grid-template-columns:1.4fr 1fr;gap:20px;align-items:start}
.yes{display:grid;gap:12px;counter-reset:n}
.yes input:checked{counter-increment:n}
.yes label{display:grid;grid-template-columns:36px 1fr;gap:16px;align-items:center;min-height:76px;padding:18px 24px;border-radius:20px;background:var(--tile-band);box-shadow:inset 0 0 0 1px var(--line);font-size:19px;font-weight:600;cursor:pointer;transition:box-shadow 150ms,transform 150ms var(--ease)}
.yes label::before{content:"";width:32px;height:32px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--line);display:grid;place-items:center;font-weight:700;transition:background-color 150ms}
.yes label:hover{transform:translateX(4px)}
.yes input:checked+label{box-shadow:inset 0 0 0 2px var(--red)}
.yes input:checked+label::before{content:"✓";background:var(--red);color:#fff;box-shadow:none}
.yes input:focus-visible+label{outline:3px solid var(--text);outline-offset:3px}
.verdict{margin-top:12px;padding:28px;border-radius:20px;background:var(--tile-band);box-shadow:inset 0 0 0 1px var(--line)}
.verdict .wait{margin:0;color:var(--muted)}
.verdict .wait::before{content:counter(n) " of 4. ";font-weight:700;color:var(--text)}
.verdict .pass{display:none}
.verdict .pass b{display:block;font:400 32px/1.1 'DM Serif Display',Georgia,serif;margin-bottom:16px}
.yes:has(#q1:checked):has(#q2:checked):has(#q3:checked):has(#q4:checked) .verdict{background:var(--deep);color:#fff;box-shadow:none}
.yes:has(#q1:checked):has(#q2:checked):has(#q3:checked):has(#q4:checked) .pass{display:block}
.yes:has(#q1:checked):has(#q2:checked):has(#q3:checked):has(#q4:checked) .wait{display:none}
.nope{border-radius:20px;padding:32px;background:transparent;box-shadow:inset 0 0 0 1px var(--line)}
.nope h3{font:400 28px/1.15 'DM Serif Display',Georgia,serif;margin-bottom:20px}
.nope ul{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.nope li{display:grid;grid-template-columns:24px 1fr;gap:10px;color:var(--muted)}
.nope li::before{content:"✕";color:var(--red);font-weight:700}

.cinema .faq{max-width:none;grid-template-columns:1fr 1fr;gap:4px 64px;align-items:start}
.cinema .faq details p{color:var(--muted)}

/* Final: he answers the question himself */
.cinema #final{text-align:center;background:radial-gradient(900px 520px at 50% 110%,var(--glow),transparent 65%),var(--band)}
.cinema #final h2{font-size:clamp(40px,6.4vw,88px);max-width:1000px;margin-inline:auto}
.howlong{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:16px 0 0}
.howlong label{display:inline-flex;align-items:center;min-height:52px;padding:10px 26px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);font-weight:700;font-size:17px;cursor:pointer;transition:background-color 150ms,color 150ms}
.howlong label:hover{background:var(--tile-band)}
.howlong input:checked+label{background:var(--text);color:var(--bg);box-shadow:none}
.howlong input:focus-visible+label{outline:3px solid var(--text);outline-offset:3px}
.sat{display:none;margin:40px auto 0;font:400 clamp(30px,4.4vw,60px)/1.05 'DM Serif Display',Georgia,serif;letter-spacing:-.025em;animation:open 300ms var(--ease)}
.sat b{font-weight:400;color:var(--red)}
#final:has(#l1:checked) [data-l="1"],#final:has(#l2:checked) [data-l="2"],#final:has(#l3:checked) [data-l="3"],#final:has(#l4:checked) [data-l="4"]{display:block}
.cinema #final .lead{margin:32px auto 0;color:var(--muted)}
.cinema #final .apply-steps{margin:56px auto 0;text-align:left;max-width:760px}
.cinema #final .apply-steps li::before{color:var(--red);opacity:1}
.cinema #final .apply-steps p{color:var(--muted)}

/* Dock: on every screen size */
.cinema .sticky{display:block;background:var(--glass);backdrop-filter:blur(10px);box-shadow:0 -1px 0 var(--line)}
.cinema .sticky .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.cinema .sticky span{font-weight:600;font-size:15px}
.cinema .sticky .cta{width:auto;min-height:48px;padding:10px 28px;font-size:16px}
.playing .sticky{transform:translateY(110%)!important}

@media(max-width:1000px){
  .scene,.story,.check{grid-template-columns:1fr;gap:40px}
  .check{gap:16px}
  .arch{max-width:320px}
  .featured,.more-books{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .cinema section{padding-block:80px}
  .cinema .hero{padding-top:32px;padding-bottom:72px}
  .cinema .video-shell{margin-top:28px}
  .cinema .video{border-radius:14px}
  .cinema .hero .action{margin-top:32px}
  .cinema .cta{min-height:60px;padding:16px 28px;font-size:19px}
  .cinema .bar .cta{min-height:40px;padding:6px 18px;font-size:15px}
  .mode{padding:8px 12px}
  .mode span{display:none}
  .scene p,.cause p{font-size:18px}
  .thread{padding:16px 16px 20px;border-radius:22px}
  .cause{margin-top:80px}
  .stack li{grid-template-columns:1fr auto;gap:8px;padding:28px;min-height:200px;top:calc(72px + var(--i)*12px);border-radius:22px}
  .stack li::before{grid-column:1;grid-row:1}
  .stack .ico{grid-column:2;grid-row:1;width:56px;align-self:start}
  .stack em,.stack b,.stack p{grid-column:1 / -1}
  .phone{font-size:17px}
  .shelf-head{margin-top:80px}
  .featured{gap:10px}
  .featured li{min-height:190px;padding:20px;border-radius:20px}
  .featured .glyph{font-size:56px}
  .featured .ico{width:44px;height:44px}
  .featured b{font-size:21px}
  .more-books{grid-template-columns:1fr;gap:20px;margin-top:32px}
  .cinema .marquee{margin-top:48px}
  .facts{grid-template-columns:1fr;gap:28px;margin-bottom:48px}
  .facts li{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:center}
  .facts b{font-size:48px;margin:0}
  .cinema .marquee-group button{flex-basis:170px;width:170px}
  .shield{width:92px;height:92px}
  .either{grid-template-columns:1fr;gap:56px;margin-top:48px}
  .either label{padding:44px 24px}
  .yes label{font-size:17px;padding:16px 18px;grid-template-columns:32px 1fr;gap:12px}
  .cinema .faq{grid-template-columns:1fr}
  .howlong label{min-height:48px;padding:8px 18px;font-size:16px}
  .cinema .sticky span{display:none}
  .cinema .sticky .cta{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .bar,.cinema .hero-copy,.cinema .video,.featured li,.yes label,.either label{transition:none}
  .typing i{animation:none;opacity:.7}
  .stack li{position:static}
  .sat{animation:none}
}

/* Legibility pass (17 Sep 2026): the smallest copy on the page was hard to read.
   Everything below is a size bump only. No colours, spacing or layout changed. */
.cinema .eyebrow,.cinema .stack em{font-size:15px;letter-spacing:.11em}
.cinema .facts span{font-size:18px;line-height:1.5}
.cinema .featured li>span:last-child{font-size:17px}
.cinema .more-books span{font-size:16px;line-height:1.5}
.cinema .quote footer{font-size:16px}
.cinema .pick-hint{font-size:16px}
.cinema .sticky span{font-size:16px}
.cinema footer.site{font-size:15px}
@media (max-width:760px){
  .cinema .facts span{font-size:17px}
  .cinema .more-books span{font-size:15px}
  .cinema .featured li>span:last-child{font-size:16px}
  .cinema .eyebrow,.cinema .stack em{font-size:14px}
}

.after-cta{margin:20px auto 0;text-align:center}

/* The program as a scoreboard (17 Sep, sample A chosen). Rows light up and count up as they arrive. */
.score{list-style:none;margin:0;padding:0;display:grid}
.score li{display:grid;grid-template-columns:minmax(200px,280px) 1fr;gap:8px 56px;align-items:center;padding:40px 0;box-shadow:inset 0 1px 0 var(--line);opacity:.3;transform:translateY(14px);transition:opacity 600ms ease,transform 600ms var(--ease)}
.score li.in{opacity:1;transform:none}
.score li:first-child{box-shadow:none;padding-top:8px}
.score li[data-group]::before{content:attr(data-group);grid-column:1 / -1;font:700 15px/1.4 'DM Sans',Arial,sans-serif;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.score b{font:400 clamp(88px,11vw,168px)/.86 'DM Serif Display',Georgia,serif;letter-spacing:-.05em;color:var(--red);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.score b small{font-size:.3em;letter-spacing:0;margin-left:.06em}
.score h3{font:400 clamp(26px,3vw,40px)/1.1 'DM Serif Display',Georgia,serif;letter-spacing:-.02em;margin-bottom:10px}
.score p{color:var(--muted);font-size:19px;max-width:52ch}
.cinema .featured,.cinema .more-books{grid-template-columns:repeat(3,minmax(0,1fr))}
.cinema .more-books{margin-top:20px}
@media(max-width:760px){
  .score li{grid-template-columns:1fr;gap:6px;padding:28px 0}
  .score b{text-align:left;font-size:80px}
  .score p{font-size:17px}
  .cinema .featured,.cinema .more-books{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.score li{transition:none}}
.score b.word{font-size:clamp(56px,6.4vw,100px);letter-spacing:-.03em}
@media(max-width:760px){.score b.word{font-size:56px}}

/* Pass 8 (17 Sep): red highlights, foundation card pictures, Saturday-night line, nested shield. */
.hi,.cinema .stack p .hi{font:inherit;font-style:normal;font-weight:600;letter-spacing:inherit;text-transform:none;color:var(--red)}
.cinema .loud .hi{color:inherit;text-decoration:underline;text-underline-offset:.18em}
.sat span{display:block;margin:14px auto 0;max-width:34ch;font:400 clamp(18px,1.6vw,22px)/1.5 'DM Sans',Arial,sans-serif;letter-spacing:0;color:var(--muted)}
.days,.bars,.say{margin-bottom:auto;display:flex}
.days{gap:6px}
.days i{width:30px;height:38px;border-radius:8px;box-shadow:inset 0 0 0 1px var(--line);font:700 13px/38px 'DM Sans',Arial,sans-serif;font-style:normal;text-align:center;color:var(--muted)}
.days i:first-child{background:var(--red);color:#fff;box-shadow:none}
.bars{align-items:flex-end;gap:7px;height:56px}
.bars i{width:22px;height:var(--h);border-radius:5px 5px 2px 2px;background:var(--line)}
.bars i:last-child{background:var(--red)}
.say{position:relative;align-self:flex-start;padding:8px 16px;border-radius:16px 16px 16px 4px;background:var(--red);color:#fff;font:400 40px/1 'DM Serif Display',Georgia,serif;letter-spacing:-.04em}
@media(max-width:760px){
  .days i{width:26px;height:34px;line-height:34px;font-size:12px}
  .bars{height:48px}
  .say{font-size:32px}
}

/* Pass 9 (17 Sep): names-first proof, strip heading, coin spin, guarantee spacing, 90-day reveal. */
.cinema .facts b{font-size:clamp(30px,3vw,40px);letter-spacing:-.02em;margin-bottom:12px}
.cinema .facts span strong{color:var(--text);font-weight:600}
.cinema .strip-head{margin-top:72px;text-align:center}
.cinema .marquee{margin-top:24px}
.story{perspective:1400px}
.story .arch{opacity:0;transform:rotateY(90deg)}
.story.in .arch{animation:coin 1500ms cubic-bezier(.15,.7,.2,1) forwards}
@keyframes coin{from{opacity:0;transform:rotateY(540deg)}25%{opacity:1}to{opacity:1;transform:rotateY(0)}}
.either{gap:120px}
.either label{min-height:260px}
.conditions{margin:10px auto 0;text-align:center;font-size:14px;opacity:.75}
.sat b{color:var(--red)}
@media(max-width:1000px){.either{gap:56px}}
@media(max-width:760px){.cinema .facts b{font-size:28px;margin:0}.cinema .facts li{grid-template-columns:110px 1fr}.cinema .strip-head{margin-top:48px}}
@media(prefers-reduced-motion:reduce){.story .arch{opacity:1;transform:none;animation:none}}
.cinema #final .setup{margin:0 auto 28px;max-width:560px}
.ask{margin:56px auto 0;max-width:22ch;font:400 clamp(30px,4vw,52px)/1.1 'DM Serif Display',Georgia,serif;letter-spacing:-.025em}
.cinema #final .paint{max-width:600px;color:var(--text)}

/* The crowd: one small figure for every woman he walked past. Fills in when he taps a length of time. */
.crowd{display:grid;grid-template-columns:repeat(auto-fill,minmax(22px,1fr));gap:6px 4px;max-width:720px;margin:36px auto 0;min-height:0}
.crowd i{display:block;background:var(--red);transition:opacity 400ms ease,transform 500ms var(--ease);transition-delay:calc(var(--i) * 4ms);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 48'%3E%3Ccircle cx='12' cy='6' r='5.5'/%3E%3Cpath d='M6 15h12l4 18h-5l-1 15H8L7 33H2z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 48'%3E%3Ccircle cx='12' cy='6' r='5.5'/%3E%3Cpath d='M6 15h12l4 18h-5l-1 15H8L7 33H2z'/%3E%3C/svg%3E") center / contain no-repeat}
.crowd i.on{opacity:.85;transform:none}
.crowd.more{-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
.cinema #final .setup{margin-bottom:8px}
.tap-hint{margin:12px auto 0;font-size:15px;color:var(--muted)}
@media(max-width:760px){.crowd{grid-template-columns:repeat(auto-fill,minmax(16px,1fr));gap:4px 3px}}
@media(prefers-reduced-motion:reduce){.crowd i{transition:none}}

/* Crowd, second take: a scattered background layer behind the final section, no space of its own. */
#final{position:relative;overflow:hidden}
#final>.wrap{position:relative;z-index:1}
.crowd{position:absolute;inset:0;z-index:0;display:block;max-width:none;margin:0;pointer-events:none}
.crowd i{position:absolute;width:var(--s);aspect-ratio:1/2;left:var(--x);top:var(--y);transform:translate(-50%,-50%) scale(.3) rotate(var(--r));opacity:0;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 48'%3E%3Ccircle cx='12' cy='6.5' r='6'/%3E%3Cpath d='M12 14c-4.5 0-6.5 3-7.2 7L2 33c-.3 1.2.5 2 1.6 2H7l.8 11c.1 1.1.9 2 2 2h4.4c1.1 0 1.9-.9 2-2L17 35h3.4c1.1 0 1.9-.8 1.6-2l-2.8-12c-.7-4-2.7-7-7.2-7z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 48'%3E%3Ccircle cx='12' cy='6.5' r='6'/%3E%3Cpath d='M12 14c-4.5 0-6.5 3-7.2 7L2 33c-.3 1.2.5 2 1.6 2H7l.8 11c.1 1.1.9 2 2 2h4.4c1.1 0 1.9-.9 2-2L17 35h3.4c1.1 0 1.9-.8 1.6-2l-2.8-12c-.7-4-2.7-7-7.2-7z'/%3E%3C/svg%3E") center / contain no-repeat}
.crowd i.on{opacity:var(--o);transform:translate(-50%,-50%) rotate(var(--r))}
.crowd.more{-webkit-mask-image:none;mask-image:none}

/* Apply: its own section on the charcoal, three plain steps. */
#next{background:var(--bg);text-align:center}
#next .apply-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin:48px auto 0;max-width:1000px;text-align:left}
#next .apply-steps li::before{color:var(--red);opacity:1}
#next .apply-steps h3{font:700 20px/1.3 'DM Sans',Arial,sans-serif;margin-bottom:8px}
#next .apply-steps p{color:var(--muted);font-size:17px}
#next .head{margin-inline:auto}
@media(max-width:760px){#next .apply-steps{grid-template-columns:1fr;gap:28px}}

/* Subhead: bigger and white, it earns the read. */
.cinema .hero .lead{color:var(--text);font-size:clamp(20px,2.1vw,27px);line-height:1.45;max-width:800px}