/* sg-mono.css
   HAND-WRITTEN SOURCE. Not generated; edit this file directly.
   The 2 Oct 2026 black-and-white Social Generation design (Geist only, one black,
   four greys, the only colour on any page is the real footage).
   Used by the Social Generation preview pages (home and outcome pages).
   sg.css in this folder is the OLD GENERATED theme (built from the LP kit by
   scripts/build_sg_css.py) and is still used by the live root page
   sites/socialgeneration/index.html; do not merge the two.

   Layout of this file:
     1. Round-1 home CSS, moved out of the page verbatim (fonts re-rooted to ../fonts/).
        Some of its blocks are no longer on the home but stay for the pages that reuse
        them: .once/.shelf (a "what's in the way" band), .svc/.facts (service rows),
        .how/.stories/.seq/.gap/.next (stories with a missing shot).
     2. Shared additions (2026-10-03): the smaller headline line, outcome rows,
        footage diagrams for tiles, the engine band, "ways to start" rows,
        and the inner-page sections (hero, blocks, ticks, steps, questions, first step).
     3. Round-3 additions (2026-10-04): variants of shared components that the six
        product pages brought in (the story map's "worth filming next" cell, stories
        inside a block, a "?" outline on a shelf), plus the one-line links on the home
        bands. No product page carries its own <style> block.
     4. Round-4 additions (2026-10-04): the home's "hamster wheel vs content engine"
        comparison (.vs), proof chips under an outcome (.proofs), the
        ad-to-landing-page footage diagram (.lp), and its opposite, many ads landing
        on one store page (.lp-many, moved out of the matching-landing-pages page).
        Still true after round 4: no product page carries its own <style> block.
     5. Round-4 fixes (2026-10-04, after review): tablet sizing for footage tiles and story
        rows, the phone and desktop layout of the comparison's column heads, and the two
        browser defaults that brought colour back in (text selection, autofill).
*/

/* ===================================================================
   1. ROUND-1 CSS (verbatim)
   =================================================================== */
@font-face{font-family:'Geist';src:url('../fonts/Geist-Regular-BF6569491e3eff1.otf') format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:'Geist';src:url('../fonts/Geist-Medium-BF6569491e1c281.otf') format('opentype');font-weight:500;font-display:swap}
@font-face{font-family:'Geist';src:url('../fonts/Geist-Bold-BF6569491da5a14.otf') format('opentype');font-weight:700;font-display:swap}

/* Black and white. The only colour on this page is the footage. */
:root{
  --ink:#0A0A0A;
  --paper:#FFFFFF;
  --g1:#2E2E2E;   /* rules on black */
  --g2:#5C5C5C;   /* secondary text on white (6.7:1) */
  --g3:#A3A3A3;   /* secondary text + empty frames on black (7.8:1) */
  --g4:#DADADA;   /* rules on white, bar track */
  --gut:16px;
  --max:1200px;
  --nav:60px;
}
@media (min-width:768px){:root{--gut:32px;--nav:68px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav) + 8px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
@media (min-width:768px){body{font-size:18px}}
h1,h2,h3,p,figure,ul,ol,dl,dd{margin:0;padding:0}
ul,ol{list-style:none}
img,video{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.dark :focus-visible{outline-color:var(--paper)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wrap{width:100%;max-width:calc(var(--max) + 2*var(--gut));margin:0 auto;padding:0 var(--gut)}
.dark{background:var(--ink);color:var(--paper)}

.skip{position:absolute;left:var(--gut);top:-80px;z-index:30;background:var(--ink);color:var(--paper);padding:12px 16px;font-weight:500;text-decoration:none}
.skip:focus{top:8px}

/* ---------- type ---------- */
h1{font-weight:700;font-size:clamp(34px,10.6vw,56px);line-height:.98;letter-spacing:-.045em}
.h2 .l{display:block}
.h2{font-weight:700;font-size:clamp(34px,6vw,64px);line-height:1;letter-spacing:-.04em}
.lead{font-weight:500;font-size:clamp(19px,1.9vw,23px);line-height:1.4;letter-spacing:-.012em}
.quiet{color:var(--g2)}
.dark .quiet{color:var(--g3)}
.note{font-size:13px;line-height:1.45;color:var(--g2)}
.dark .note{color:var(--g3)}

/* ---------- buttons + links ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 22px;background:var(--ink);color:var(--paper);border:2px solid var(--ink);font-weight:500;font-size:16px;line-height:1.2;text-decoration:none;cursor:pointer;transition:background .2s ease,color .2s ease}
.btn:hover{background:var(--paper);color:var(--ink)}
.btn svg{width:16px;height:16px;flex:none}
.tlink{display:inline-flex;align-items:center;min-height:44px;font-weight:500;font-size:16px;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px}
.tlink:hover{text-decoration-thickness:2.5px}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:1px solid transparent;transition:border-color .2s ease}
.nav.scrolled{border-bottom-color:var(--g4)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:var(--nav)}
.wordmark{display:inline-flex;align-items:center;min-height:44px;font-weight:700;font-size:17px;letter-spacing:-.02em;text-decoration:none;white-space:nowrap}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a{font-size:15px;font-weight:500;text-decoration:none}
.nav-links a:not(.nav-cta){display:none;align-items:center;min-height:44px}
.nav-links a:not(.nav-cta):hover{text-decoration:underline;text-underline-offset:5px}
.nav-cta{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;background:var(--ink);color:var(--paper);border:2px solid var(--ink);white-space:nowrap;transition:background .2s ease,color .2s ease}
.nav-cta:hover{background:var(--paper);color:var(--ink)}
@media (min-width:768px){.nav-links a:not(.nav-cta){display:inline-flex}}

/* ---------- a scene: the colour ---------- */
.scene{position:relative;display:block;width:100%;aspect-ratio:9/16;padding:0;margin:0;border:0;background:var(--ink);overflow:hidden;cursor:pointer}
.scene:focus-visible{z-index:3}
.scene img,.scene video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scene video{z-index:1}
.mark{position:absolute;left:0;bottom:0;z-index:2;width:32px;height:32px;background:var(--ink);display:grid;place-items:center;transition:background .2s ease}
.mark svg{width:12px;height:12px;fill:var(--paper)}
.mark .i-pause{display:none}
.scene.playing .mark .i-play{display:none}
.scene.playing .mark .i-pause{display:block}
.scene:hover .mark,.scene.playing .mark{background:var(--paper)}
.scene:hover .mark svg,.scene.playing .mark svg{fill:var(--ink)}
.said{font-weight:500;font-size:15px;line-height:1.4;min-height:4.2em}
@media (min-width:600px){.said{min-height:2.8em}}

/* ---------- hero ---------- */
.hero{padding:28px 0 56px}
.hero-grid{display:grid;grid-template-areas:"copy" "reel" "defs";gap:32px}
.hero-copy{grid-area:copy}
.hero-sub{margin-top:20px;max-width:30em}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;margin-top:28px}
.reel{grid-area:reel}
.reel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 3px}
.reel-grid li{min-width:0}
.scene-cap{display:flex;flex-wrap:wrap;column-gap:6px;margin-top:6px;font-size:12px;line-height:1.3;font-weight:500}
.scene-cap span{color:var(--g2);font-weight:400;white-space:nowrap}
.reel figcaption{display:grid;gap:6px;margin-top:16px}
.defs{grid-area:defs;display:grid;gap:20px}
.defs p{border-top:2px solid var(--ink);padding-top:12px;font-size:16px;line-height:1.45}
.defs b{font-weight:700}
@media (min-width:600px){
  .reel-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .defs{grid-template-columns:1fr 1fr;gap:28px}
}
@media (min-width:960px){
  .hero{padding:40px 0 88px}
  .hero-grid{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);grid-template-areas:"copy reel" "defs reel";grid-template-rows:auto 1fr;column-gap:64px;row-gap:40px;align-items:start}
  .hero-copy{container-type:inline-size}
  h1{font-size:clamp(48px,12.6cqi,80px)}
  .reel-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 3px}
  .defs{align-self:start}
}

/* ---------- the problem (black) ---------- */
.once{padding:56px 0 60px}
.once-grid{display:grid;gap:36px}
.once .h2{max-width:11em}
.once-copy p{margin-top:20px;max-width:30em}
.shelf{max-width:240px}
.shelf-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.shelf img{width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;filter:grayscale(1) contrast(.9);opacity:.5}
.shelf figcaption{margin-top:12px}
@media (min-width:960px){
  .once{padding:112px 0}
  .once-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:end}
  .shelf{max-width:none}
}

/* ---------- three services ---------- */
.sec{padding:72px 0}
@media (min-width:960px){.sec{padding:120px 0}}
.sec-head{display:grid;gap:16px}
@media (min-width:960px){.sec-head{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:end}}
.svcs{margin-top:40px;border-top:2px solid var(--ink)}
.svc{display:grid;grid-template-areas:"title" "body" "tile" "facts";gap:22px;padding:32px 0 40px;border-bottom:1px solid var(--g4)}
.svc:last-child{border-bottom:2px solid var(--ink)}
.svc-title{grid-area:title}
.svc h3{font-weight:700;font-size:clamp(28px,3.3vw,42px);line-height:1.04;letter-spacing:-.035em;max-width:12em}
.svc-tag{display:inline-block;margin-top:12px;font-size:15px;font-weight:500;border-bottom:1.5px solid var(--ink);padding-bottom:2px}
.svc-body{grid-area:body;max-width:34em}
.facts{grid-area:facts;display:grid;gap:14px;border-top:1px solid var(--g4);padding-top:16px}
.facts dt{font-size:14px;color:var(--g2)}
.facts dd{margin-top:2px;font-size:16px;font-weight:500;line-height:1.45}
.tile{grid-area:tile;align-self:start;background:var(--ink);color:var(--paper);padding:18px;display:grid;gap:12px}
@media (min-width:960px){
  .svc{grid-template-columns:minmax(0,4fr) minmax(0,4.4fr) minmax(0,5fr);grid-template-areas:"title body tile" "title facts tile";grid-template-rows:auto 1fr;column-gap:40px;row-gap:24px;padding:48px 0 56px;align-items:start}
  .tile{padding:22px}
}

/* service pictures: real footage inside black tiles */
.tk{font-size:13px;line-height:1.3;color:var(--g3)}
.trow{display:flex;align-items:center;gap:10px}
.trow .tk{flex:none;width:4.6rem}
.ms{flex:1;min-width:0;max-width:279px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:3px}
.ms.joined{gap:0}
.ms img,.hole{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover}
.ms.grey img{filter:grayscale(1) contrast(.9);opacity:.5}
.hole{border:1.5px dashed var(--g3)}
.down{width:16px;height:16px;margin-left:calc(4.6rem + 10px);color:var(--g3)}
.map{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px}
.map img,.map .hole{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover}
/* empty cells use the same g3 dashed outline as their legend swatch (g1 on black was 1.5:1, too faint) */
.legend{display:flex;flex-wrap:wrap;gap:6px 18px}
.legend span{display:inline-flex;align-items:center;gap:8px}
.legend img{width:9px;height:16px;object-fit:cover}
.legend i{display:inline-block;width:9px;height:16px;border:1.5px dashed var(--g3)}
.tile .ill{border-top:1px solid var(--g1);padding-top:10px;font-size:12px;color:var(--g3)}

/* ---------- how it works (black) ---------- */
.how{padding:72px 0}
@media (min-width:960px){.how{padding:120px 0}}
.src{display:grid;gap:14px;margin-top:44px;padding-bottom:28px;border-bottom:1px solid var(--g1)}
.src-strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));max-width:330px}
.src-strip img{width:100%;height:auto;aspect-ratio:9/16;object-fit:cover}
.lbl{font-weight:500;font-size:17px;line-height:1.3}
.lbl + .tk{margin-top:4px;font-size:14px}
.stories-k{margin-top:28px}
.stories{display:grid;gap:28px;margin-top:20px}
.story-s{display:flex;align-items:center;gap:8px;margin-top:4px;font-size:14px;color:var(--g3)}
.story-s i{display:inline-block;width:10px;height:10px;border:1.5px solid var(--g3)}
.story-s.full{color:var(--paper)}
.story-s.full i{background:var(--paper);border-color:var(--paper)}
.seq{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:12px}
.seq img{width:100%;height:auto;aspect-ratio:9/16;object-fit:cover}
.seq .gap{aspect-ratio:9/16;border:1.5px dashed var(--g3);display:flex;flex-direction:column;justify-content:center;gap:5px;padding:6px;text-align:center;overflow:hidden}
.gap small{font-size:11px;line-height:1.2;color:var(--g3)}
.gap b{font-size:12px;line-height:1.2;font-weight:500;color:var(--paper)}
.next{display:flex;gap:18px;align-items:center;margin-top:36px;padding-top:28px;border-top:1px solid var(--g1)}
.next-gap{flex:none;width:44px;aspect-ratio:9/16;border:1.5px dashed var(--paper)}
.next .lead{margin-top:4px;max-width:26em}
.how .note.end{margin-top:24px}
@media (min-width:960px){
  .stories{grid-template-columns:1fr 1fr;column-gap:64px;row-gap:40px}
  .seq{grid-template-columns:repeat(4,minmax(0,112px));gap:8px}
  .gap b{font-size:13px}
  .next{margin-top:48px}
}

/* ---------- not artificial ---------- */
.real-grid{display:grid;gap:36px}
.real h2{font-weight:700;font-size:clamp(44px,9vw,104px);line-height:.95;letter-spacing:-.045em}
.real-copy .lead{margin-top:20px;max-width:22em}
.real-copy p.quiet{margin-top:16px;max-width:30em}
.faces{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px}
.faces .scene{aspect-ratio:4/5}
.faces .f1 img,.faces .f1 video{object-position:50% 22%}
.faces .f2 img,.faces .f2 video{object-position:50% 40%}
.faces .f3 img,.faces .f3 video{object-position:50% 6%}
.real figcaption{display:grid;gap:6px;margin-top:14px}
@media (min-width:960px){.real-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:end}}

/* ---------- the one early read ---------- */
.read{padding:0 0 72px}
.read-grid{display:grid;gap:28px;border-top:2px solid var(--ink);padding-top:32px}
.read h2{font-weight:700;font-size:clamp(26px,3vw,36px);line-height:1.1;letter-spacing:-.03em}
.read-grid p.quiet{margin-top:14px;max-width:32em}
.bars{display:grid;gap:18px}
.bar-k{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:8px;font-size:15px}
.bar-k b{font-weight:700;font-size:20px;letter-spacing:-.02em;white-space:nowrap}
.bar{height:12px;background:var(--g4)}
.bar i{display:block;height:100%;background:var(--ink)}
.bar.rest i{background:var(--g2)}
.read .note{margin-top:16px}
@media (min-width:960px){.read{padding:0 0 120px}.read-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;padding-top:44px}}

/* ---------- the one form (black) ---------- */
.start{padding:72px 0 80px}
@media (min-width:960px){.start{padding:120px 0 128px}}
.start-grid{display:grid;gap:32px}
.start .h2{max-width:11em}
.start-copy p{margin-top:18px;max-width:28em}
@media (min-width:960px){.start-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:end}}
form[data-magnet]{display:grid;gap:12px;max-width:560px}
.form-row{min-width:0}
.form-row label{display:block;margin-bottom:8px;font-size:14px;line-height:20px;font-weight:500;color:var(--g3)}
.form-row input{display:block;width:100%;min-width:0;min-height:54px;padding:0 16px;border:2px solid var(--paper);border-radius:0;background:var(--paper);color:var(--ink);font:400 17px/1.2 'Geist',system-ui,sans-serif;-webkit-appearance:none;appearance:none}
.form-row input::placeholder{color:var(--g2)}
.form-row input:focus-visible{outline:2px solid var(--paper);outline-offset:3px}
.field-err{display:none;margin-top:8px;font-size:14px;color:var(--paper)}
.form-row.invalid input{outline:2px dashed var(--paper);outline-offset:3px}
.form-row.invalid .field-err{display:block}
form[data-magnet] button[type=submit]{min-height:54px;padding:0 26px;background:var(--paper);color:var(--ink);border:2px solid var(--paper);border-radius:0;font-weight:500;font-size:16px;cursor:pointer;transition:background .2s ease,color .2s ease}
form[data-magnet] button[type=submit]:hover{background:var(--ink);color:var(--paper)}
form[data-magnet] button[type=submit]:disabled{cursor:progress;opacity:.7}
.consent{font-size:13px;line-height:1.45;color:var(--g3)}
.msg{display:none}
.msg-ok:focus{outline:none}
.msg-ok{font-weight:500;font-size:clamp(22px,2.4vw,28px);line-height:1.25;letter-spacing:-.015em}
.msg-err{font-size:16px;border-left:2px solid var(--paper);padding-left:12px}
form[data-magnet].esp-error .msg-err{display:block}
form[data-magnet].done .msg-ok{display:block}
form[data-magnet].done .form-row,
form[data-magnet].done button[type=submit],
form[data-magnet].done .consent,
form[data-magnet].done .msg-err,
form[data-magnet].done.esp-error .msg-err{display:none}
@media (min-width:560px){
  form[data-magnet]{grid-template-columns:minmax(0,1fr) auto;column-gap:10px}
  form[data-magnet] > *{grid-column:1 / -1}
  form[data-magnet] .form-row{grid-column:1;grid-row:1}
  form[data-magnet] button[type=submit]{grid-column:2;grid-row:1;align-self:start;margin-top:28px}
}

/* ---------- footer ---------- */
.foot{padding:28px 0 40px;font-size:14px;color:var(--g2)}
.foot .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px}
.foot strong{color:var(--ink);font-weight:500}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* ===================================================================
   2. SHARED ADDITIONS (2026-10-03)
   =================================================================== */

/* ---------- a smaller second line inside a heading ----------
   <h1>Main line. <span class="h1-small">smaller line.</span></h1>
   One heading, so a screen reader hears one sentence. */
.h1-small,.h-small{display:block;font-weight:700}
/* floors keep the small line clearly bigger than the text under it on phones */
.h1-small{margin-top:.4em;font-size:max(.52em,24px);line-height:1.08;letter-spacing:-.03em}
.h-small{margin-top:.45em;font-size:max(.6em,20px);line-height:1.15;letter-spacing:-.025em}

/* ---------- home hero, round 2 ----------
   Round 1's definitions block under the copy is gone, so its grid slot goes too
   (an empty slot still costs one 32px gap). The round-2 headline is longer, so
   from 960px it is set a little smaller to keep it to four lines and the button
   above the fold on a laptop. */
.hero-grid{grid-template-areas:"copy" "reel"}
/* phones + tablets: the reel's caption already reserves room for the spoken line,
   so the section after the hero starts closer (the white run was 200px) */
@media (max-width:959.98px){.hero + .sec{padding-top:32px}}
@media (min-width:960px){
  .hero-grid{grid-template-areas:"copy reel";grid-template-rows:auto}
  .hero h1{font-size:clamp(48px,10.5cqi,68px)}
}

/* ---------- kicker: a small line above a heading ---------- */
.kicker{font-size:15px;line-height:1.4;font-weight:500;color:var(--g2)}
.dark .kicker{color:var(--g3)}

/* ---------- rows of tiles (shared by outcome rows and service rows) ---------- */
.trow + .trow{margin-top:8px}
.rows{margin-top:40px;border-top:2px solid var(--ink)}

/* ---------- an outcome: title · how · footage tile ---------- */
.outcome{display:grid;grid-template-areas:"title" "body" "tile";gap:22px;padding:32px 0 40px;border-bottom:1px solid var(--g4)}
.outcome:last-child{border-bottom:2px solid var(--ink)}
.outcome-title{grid-area:title}
.outcome h3{font-weight:700;font-size:clamp(28px,3.3vw,42px);line-height:1.04;letter-spacing:-.035em;max-width:13em}
.outcome-body{grid-area:body;max-width:30em}
.outcome-body .tlink{margin-top:12px}
.bridge{margin-top:40px;font-weight:700;font-size:clamp(24px,2.8vw,34px);line-height:1.12;letter-spacing:-.03em;max-width:20em}
@media (min-width:960px){
  .outcome{grid-template-columns:minmax(0,4.6fr) minmax(0,3.8fr) minmax(0,5fr);grid-template-areas:"title body tile";column-gap:40px;padding:48px 0 56px;align-items:start}
  .bridge{margin-top:56px}
}

/* ---------- footage diagrams inside a black .tile ---------- */
/* three ads, each opening on a different scene */
.opens{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:360px}
.open{display:grid;gap:4px;align-content:start;min-width:0}
.open > img{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover}
.ms.trio{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none}
.open .tk{margin-top:4px}
/* ads over time: worn out (grey) · running · ready next */
.flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:360px}
.flow-g{display:grid;gap:8px;align-content:start;min-width:0;border-top:1px solid var(--g1);padding-top:8px}
.flow-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px}
.flow-row img{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover}
.flow-row.grey img{filter:grayscale(1) contrast(.9);opacity:.5}
/* the one shot worth filming next */
.want{display:flex;align-items:center;gap:14px;padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--g1)}
.want-gap{flex:none;width:30px;aspect-ratio:9/16;border:1.5px dashed var(--paper)}
.want-k{margin-top:2px;font-weight:500;font-size:16px;line-height:1.3;color:var(--paper)}

/* ---------- the engine band (black) ---------- */
.engine{padding:56px 0 60px}
.engine-grid{display:grid;gap:32px}
.engine .kicker{margin-bottom:14px}
.engine .h2{max-width:12em}
.engine-copy .lead{margin-top:18px;max-width:30em}
.modules{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;max-width:420px}
.modules img,.modules .hole{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover}
.engine figcaption{margin-top:12px}
@media (min-width:960px){
  .engine{padding:96px 0}
  .engine-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:end}
  .modules{max-width:none}
}

/* ---------- ways to start: compact rows, no tiles ---------- */
.ways{padding:0 0 72px}
.ways-head{display:grid;gap:14px;border-top:2px solid var(--ink);padding-top:32px}
.ways-head h2{font-weight:700;font-size:clamp(26px,3vw,36px);line-height:1.1;letter-spacing:-.03em}
.ways-list{margin-top:28px}
.way{display:grid;gap:10px;padding:22px 0 24px;border-top:1px solid var(--g4)}
.way:last-child{border-bottom:1px solid var(--g4)}
.way h3{font-weight:700;font-size:clamp(22px,2.2vw,28px);line-height:1.1;letter-spacing:-.03em}
.way-tag{display:inline-block;margin-top:8px;font-size:15px;font-weight:500;border-bottom:1.5px solid var(--ink);padding-bottom:2px}
.way-body{max-width:34em}
.way-start{margin-top:10px;font-size:16px;font-weight:500;line-height:1.45}
.way-start span{display:block;font-size:14px;font-weight:400;color:var(--g2)}
@media (min-width:960px){
  .ways{padding:0 0 120px}
  .ways-head{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;padding-top:44px;align-items:end}
  .way{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:64px;padding:28px 0 30px}
}

/* ---------- inner pages (outcome / differentiator pages) ----------
   page-hero: kicker + h1 + lead + one footage tile
   block:     one section = a label (h2) on the left, its body on the right
              (markup: <section class="block"><div class="wrap"><div class="block-grid">;
              .block-grid sits INSIDE .wrap so its top rule lines up with the text,
              not the gutter)
   ticks:     short ruled lines (what good looks like, what you get, when it fits, not the right fit)
   steps:     numbered steps (how we make it happen)
   qa:        visible questions and answers
   first:     the matching way to start, above the form */
.page-hero{padding:28px 0 56px}
.page-hero-grid{display:grid;gap:32px}
.page-hero .kicker{margin-bottom:16px;max-width:34em}
.page-hero h1{font-size:clamp(34px,9vw,48px);line-height:1.02;letter-spacing:-.04em;max-width:14em}
.page-hero .lead{margin-top:20px;max-width:30em}
.page-hero .tile{grid-area:auto}
@media (min-width:960px){
  .page-hero{padding:48px 0 96px}
  .page-hero-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:center}
  .page-hero h1{font-size:clamp(44px,4.6vw,64px)}
}
.block{padding:0 0 56px}
.block-grid{display:grid;gap:20px;border-top:2px solid var(--ink);padding-top:28px}
.block h2{font-weight:700;font-size:clamp(26px,3vw,36px);line-height:1.1;letter-spacing:-.03em}
.block-body{min-width:0}
.block-body > p{max-width:36em}   /* cap line length for prose; lists and figures run to the rule's edge */
.block-body > * + *{margin-top:16px}
.block-body .lead + *{margin-top:20px}
.said-k{font-weight:700}
@media (min-width:960px){
  .block{padding:0 0 88px}
  .block-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;padding-top:40px}
}
.ticks li{padding:12px 0;border-top:1px solid var(--g4);font-weight:500;line-height:1.45}
.ticks li:last-child{border-bottom:1px solid var(--g4)}
.dark .ticks li{border-color:var(--g1)}
.steps{counter-reset:step}
.steps li{counter-increment:step;display:grid;grid-template-columns:2.4em minmax(0,1fr);gap:8px;padding:14px 0;border-top:1px solid var(--g4);line-height:1.45}
.steps li:last-child{border-bottom:1px solid var(--g4)}
.steps li::before{content:counter(step,decimal-leading-zero);font-weight:700;font-size:15px;line-height:1.75}
.steps b{font-weight:700}
.qa > div{padding:16px 0;border-top:1px solid var(--g4)}
.qa > div:last-child{border-bottom:1px solid var(--g4)}
.qa dt{font-weight:700;line-height:1.35}
.qa dd{margin-top:6px;color:var(--g2);line-height:1.5}
.first{margin-top:24px;padding-top:18px;border-top:1px solid var(--g1)}
.first-k{font-size:14px;color:var(--g3)}
.first-name{margin-top:4px;font-weight:700;font-size:clamp(22px,2.2vw,28px);line-height:1.1;letter-spacing:-.03em}
.first p + p{margin-top:8px}

/* ---------- inner pages: black bands between blocks (2026-10-03, outcome page) ----------
   The outcome page keeps round 1's rhythm: white, black ("what's in the way"),
   white, black ("how we make it happen"), white, black (the form).
   block.dark: a block on black, no top rule (the band edge is the rule)
   strip:      six tap-to-play scenes in one row, each with its label (.scene-cap) */
.dark + .block{padding-top:56px}
.block.dark{padding:72px 0}
.block.dark .block-grid{border-top:0;padding-top:0}
.dark .steps li{border-color:var(--g1)}
.dark .scene-cap span{color:var(--g3)}
.once-copy .kicker,.start-copy .kicker{margin:0 0 14px}
.once-copy .ticks{margin-top:24px;max-width:30em}
.strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 3px}
.strip li{min-width:0}
.block-body .strip-fig{margin-top:32px}
.strip-fig figcaption{display:grid;gap:6px;margin-top:16px}
@media (min-width:600px){.strip{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (min-width:960px){
  .dark + .block{padding-top:88px}
  .block.dark{padding:120px 0}
}

/* ===================================================================
   3. ROUND-3 ADDITIONS (2026-10-04)
   Moved out of the what-to-film-next page's <style> block (they are variants
   of the shared .map / .legend / .stories / .shelf / .hole components, not
   page content), plus the short links on the home page's black bands.
   =================================================================== */

/* the story map: the one empty cell worth filming next, and its legend swatch.
   White AND solid AND thicker, so it differs from "still to film" (g3 dashed) by more than brightness */
.map .hole.pick,.legend i.pick{border:2px solid var(--paper)}

/* stories inside an inner-page block: the right-hand column is narrower than the
   full-width "how" band, so on desktop they stay one per row. Two-up, each cell shrank
   to 49-63px between 960 and 1200px and cut off its own "Not filmed yet" label. */
@media (min-width:960px){.block-body .stories{grid-template-columns:1fr}}

/* an empty outline on a "what's in the way" shelf carries a "?", so it reads as an
   unknown, not as a picture that failed to load */
.shelf .hole{display:grid;place-items:center;font-style:normal;font-weight:500;font-size:clamp(22px,3vw,40px);line-height:1;color:var(--g3)}

/* home: one short link under the copy of the engine band and of "Not artificial"
   (same spacing as the link under an outcome) */
.engine-copy .tlink,.real-copy .tlink{margin-top:12px}

/* the smallest phones (under 360px): "Start with 5 to 10 of your videos" needs 289px and
   288 is free, so it wrapped onto two lines. Slightly less padding keeps it on one. */
@media (max-width:359.98px){.btn{padding:0 18px}}

/* ===================================================================
   4. ROUND-4 ADDITIONS (2026-10-04)
   =================================================================== */

/* ---------- the hamster wheel vs the content engine (black band) ----------
   The founder's black-and-white idea: grey footage = used once, colour = alive.
   markup: section.vs.dark > .wrap > h2.vs-h (two .l lines, the first muted)
           .vs-heads   two column heads (.vs-a hamster wheel, .vs-b engine), each a name + a footage strip,
                       plus the illustration caption (.vs-cap)
           dl.vs-rows  one .vs-row per question: dt, then dd.vs-a and dd.vs-b
   Phones: each row stacks its pair (hamster wheel above, engine below), and a tiny
   footage chip in front of each answer (grey or colour, the same chip as its column head)
   keeps A and B apart. From 960px: three columns, question · hamster wheel · engine,
   and the chips go (the columns line up under their heads). */
.vs{padding:64px 0 72px}
.vs-h{font-size:clamp(30px,4.6vw,56px);line-height:1.02;max-width:20em}
.vs-them{color:var(--g3)}
.vs-heads{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px 12px;margin-top:40px}
.vs-head h3{display:flex;align-items:flex-start;gap:8px;font-weight:700;font-size:clamp(17px,1.9vw,24px);line-height:1.12;letter-spacing:-.025em}
.vs-head .ms{margin-top:12px}
/* the joined (one-video) strip is 15px narrower than the split one (5 gaps × 3px), so both rows of frames are the same height */
.vs-head.vs-a .ms{max-width:min(264px,calc(100% - 15px))}
.vs-head.vs-a h3{color:var(--g3)}
.vs-cap{grid-column:1 / -1}
.vs-chip{flex:none;display:block;width:10px;height:auto;aspect-ratio:9/16;object-fit:cover}
.vs-a .vs-chip{filter:grayscale(1) contrast(.9);opacity:.5}
.vs-head .vs-chip{margin-top:.1em}
.vs-rows{margin-top:28px;border-top:2px solid var(--paper)}
.vs-row{display:grid;gap:8px;padding:16px 0 18px;border-bottom:1px solid var(--g1)}
.vs-row dt{font-size:14px;line-height:1.35;font-weight:500;color:var(--g3)}
.vs-row dd{display:grid;grid-template-columns:10px minmax(0,1fr);column-gap:12px;align-items:start;font-size:17px;line-height:1.35;text-wrap:pretty}
.vs-row dd .vs-chip{margin-top:.12em}
.vs-row dd.vs-a{color:var(--g3)}
.vs-row dd.vs-b{color:var(--paper);font-weight:500}
@media (min-width:960px){
  .vs{padding:120px 0}
  .vs-heads,.vs-row{grid-template-columns:minmax(0,3fr) minmax(0,4.5fr) minmax(0,4.5fr);column-gap:40px}
  .vs-heads{margin-top:64px;align-items:end}
  .vs-heads .vs-a{grid-column:2;grid-row:1}
  .vs-heads .vs-b{grid-column:3;grid-row:1}
  .vs-cap{grid-column:2 / -1;grid-row:2}
  .vs-head .ms{margin-top:16px}
  .vs-rows{margin-top:28px}
  .vs-row{padding:20px 0 22px;align-items:baseline}
  .vs-row dt{font-size:15px}
  .vs-row dd{display:block;font-size:18px}
  .vs-chip{display:none}
}

/* ---------- proof chips under an outcome's headline ----------
   <ul class="proofs"><li><b>Up to 4×</b> the conversion rate of a store page</li>…</ul>
   They sit in .outcome-title (the widest text column on desktop), so the promise and its proof read together. */
.proofs{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.outcome-title .proofs{margin-top:20px}
.proofs li{border:1.5px solid var(--ink);padding:7px 12px;font-size:15px;line-height:1.3;font-weight:500;text-wrap:balance}
.proofs b{font-weight:700}
.dark .proofs li{border-color:var(--paper)}

/* ---------- an ad and its own landing page (inside a black .tile) ----------
   The ad is a colour scene; the page is a black-and-white mock whose top picture is the
   SAME scene in colour, so the eye follows the ad onto the page. The page column is
   5/4 the ad's width and stretches to the ad's height (contain:size keeps the page from
   setting the row's height); its top picture takes whatever height the text leaves. */
.lp{display:grid;grid-template-columns:minmax(0,4fr) 16px minmax(0,5fr);grid-template-rows:auto auto;column-gap:10px;row-gap:6px;max-width:360px}
.lp-ad{grid-column:1;grid-row:1;display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover}
.lp-arrow{grid-column:2;grid-row:1;align-self:center;width:16px;height:16px;color:var(--g3)}
.lp-page{grid-column:3;grid-row:1;min-width:0;contain:size;display:flex;flex-direction:column;gap:5px;padding:7px;background:var(--paper);color:var(--ink);overflow:hidden}
.lp-logo{display:block;flex:none;width:32%;height:3px;background:var(--ink);margin-bottom:2px}
.lp-hero{display:block;flex:1 1 0;min-height:0;width:100%;height:auto;object-fit:cover;object-position:50% 40%}
.lp-h{flex:none;margin-top:3px;font-weight:700;font-size:11px;line-height:1.1;letter-spacing:-.02em}
.lp-t{display:block;flex:none;height:3px;background:var(--g4)}
.lp-t.short{width:68%}
.lp-btn{display:block;flex:none;margin-top:2px;height:12px;background:var(--ink)}
.lp-k1{grid-column:1;grid-row:2}
.lp-k2{grid-column:3;grid-row:2}
@media (min-width:960px){.lp-h{font-size:12px}}

/* ---------- many ads, one store page (a "what's in the way" figure: the opposite of .lp) ----------
   Moved out of the matching-landing-pages page's <style> block (round-4 integration), where it
   was .mlp-*. Three ads in colour, lines converging on ONE store page. The store page is drawn
   with the same parts as the .lp page mock (.lp-logo, .lp-t, .lp-t.short, .lp-btn) but has a
   grey block (.lp-blank) where the matched page shows the ad's scene, so it reads as the
   opposite of .lp. It has its own page box (.lp-store) because .lp-page is placed by the .lp
   grid and sized with contain:size, and collapses to ~14px outside that grid.
   markup: figure.lp-many > div[role=img] > .lp-many-ads (three img) + svg.lp-many-lines
           + .lp-store (i.lp-logo, i.lp-blank, i.lp-t ×3 with the last .short, i.lp-btn)
           + p.tk.lp-many-k; then figcaption.note */
.lp-many{max-width:300px}
.lp-many-ads{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.lp-many-ads img{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover}
.lp-many-lines{display:block;width:100%;height:36px;color:var(--g3)}
.lp-store{display:flex;flex-direction:column;gap:5px;width:46%;margin:0 auto;padding:7px;background:var(--paper)}
.lp-blank{display:block;flex:none;aspect-ratio:5/4;background:var(--g4)}
.lp-many-k{margin-top:8px;text-align:center}
.lp-many figcaption{margin-top:14px}
@media (min-width:960px){.lp-many{max-width:360px}}

/* "Ads aimed at the right buyer.": the heading now carries its proof line, so balance it
   (no one-word "buyer." line) and keep the sentence under it from ending on one word */
.read h2{text-wrap:balance}
.read-grid p.quiet{text-wrap:pretty}

/* ===================================================================
   5. ROUND-4 FIXES (2026-10-04, after review)
   =================================================================== */

/* tablets (600-959px): a black footage tile stretched to the full column (704px at 768)
   while the diagram inside stops at about 380px, leaving half the tile empty. Keep the tile
   about as wide as it is on a laptop (the page-hero tile column is ~470px at 1280). */
@media (min-width:600px) and (max-width:959.98px){
  .outcome .tile,.page-hero .tile{justify-self:start;width:100%;max-width:420px}
}
/* tablets: story rows went 172x305 a frame (4 rows = 1220px tall at 768, against 796px at
   1280). Use the laptop's 112px frames from 600px up. */
@media (min-width:600px) and (max-width:959.98px){
  .seq{grid-template-columns:repeat(4,minmax(0,112px));gap:8px}
}

/* phones (under 600px): side by side, each comparison strip got ~123px at 320 and its frames
   were 36px tall. Stack the two column heads so each strip uses its own max-width
   (264/279px, the same ~78px frames as on a tablet). */
@media (max-width:599.98px){
  .vs-heads{grid-template-columns:minmax(0,1fr);row-gap:24px}
  .vs-cap{margin-top:-10px}
}

/* colour only in the footage: the browser's own selection highlight and autofill tint
   are colour too, so both are set in black and white */
::selection{background:var(--ink);color:var(--paper)}
.dark ::selection,.tile ::selection{background:var(--paper);color:var(--ink)}
.form-row input::selection,.lp-page ::selection{background:var(--ink);color:var(--paper)}
.form-row input:-webkit-autofill,
.form-row input:-webkit-autofill:hover,
.form-row input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 40px var(--paper) inset;box-shadow:0 0 0 40px var(--paper) inset;-webkit-text-fill-color:var(--ink);caret-color:var(--ink)}
.form-row input:autofill{box-shadow:0 0 0 40px var(--paper) inset}