/* Vous scroll story v2 (Claude build).
   Tokens: vous/context/design-system/color.md, type-system.md v2, shape-and-squircle.md.
   Serif speaks (STIX Two Text), sans labels (Inter), mono counts (JetBrains Mono), Fraunces = wordmark only.
   Squircles for rectangles, pills for controls. Glass only on floating chrome (nav). */

:root{
  --paper:#FCFCFA; --surface:#F4F4F1; --surface-2:#EAEAE5; --hairline:#DEDED8;
  --slate-400:#8A909E; --slate-600:#5A6170; --ink:#16181D;
  --indigo:#3A41C2; --indigo-tint:#E7E8FB; --copper:#A65A2A; --copper-wash:#F6E9DF;
  --d-text:#ECEDF0; --d-text-2:#A2A9B8; --d-indigo:#9CA2F2; --d-surface:#191C22; --d-hairline:#2C313B;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Helvetica,Arial,sans-serif; --serif:var(--sans); /* Klaus 2026-11-11: sans for the site */
  --mono:"JetBrains Mono", ui-monospace, monospace; --wordmark:"Fraunces", Georgia, serif;
  /* --vis: the height of the screen a phone always shows (its browser bars in view). The stage stays 100vh tall, so
     it always fills the screen, but every scene is centred inside --vis, so nothing sits under the bars. On desktop
     the two are the same. */
  --vis:100vh;
}
@supports (height:100svh){:root{--vis:100svh}}
*{box-sizing:border-box;margin:0;padding:0}
body{background:#090A0D;color:var(--d-text);font-family:var(--serif);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
.sq{corner-shape:squircle}
.wm{font-family:var(--wordmark);font-weight:700;font-variation-settings:"opsz" 72,"SOFT" 0,"WONK" 0;letter-spacing:-.02em;line-height:1}
.kicker{font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.mono{font-family:var(--mono)}

/* ---------- NAV: frosted glass, re-tunes for dark and light ----------
   Klaus 2026-11-13: frosted glass. A shinier "liquid glass" attempt (rim, sheen, glint) was tried the same day and
   rejected ("it seems bad, better frosted glass"); do not bring it back.
   The recipe is surface-and-material.md section 7: a strong, even blur of what is behind the bar, a milky film
   over it, one hairline. Nothing else. The low-alpha film sits inside @supports, so a browser without
   backdrop-filter gets a near-opaque bar, not an accidental see-through one; Reduce Transparency gets a solid. */
.nav{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:50;width:min(1120px,calc(100% - 32px));
  display:flex;align-items:center;justify-content:space-between;padding:8px 8px 8px 20px;border-radius:999px;
  background:rgba(21,23,28,.94);color:var(--d-text);border:1px solid rgba(255,255,255,.10);
  transition:background .5s,color .5s,border-color .5s,opacity .45s ease,transform .45s ease}
.nav.light{background:rgba(252,252,250,.94);color:var(--ink);border-color:rgba(222,222,216,.9)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav{background:rgba(21,23,28,.55);-webkit-backdrop-filter:blur(18px) saturate(1.1);backdrop-filter:blur(18px) saturate(1.1)}
  .nav.light{background:rgba(252,252,250,.62)}
}
.nav.gone{opacity:0;transform:translate(-50%,-24px);pointer-events:none}
@media (prefers-reduced-transparency:reduce){
  .nav{background:#15171c;-webkit-backdrop-filter:none;backdrop-filter:none}
  .nav.light{background:var(--paper)}
}
/* The wordmark is lowercase only, so its letters sit in the lower part of its text box: measured 2.8 px below the
   bar's centre line at 26 px (Klaus 2026-11-13). Lifted by that amount so the letters, not the box, are centred. */
.nav-wm{font-size:26px;text-decoration:none;position:relative;top:-.108em}
.nav-links{display:flex;gap:26px;font-family:var(--sans);font-size:14px;opacity:.75}
.nav-links a{text-decoration:none}
.nav-links .skip{opacity:.7}
.nav-cta{border-radius:999px;padding:10px 20px;font-family:var(--sans);font-size:14px;font-weight:500;background:#fff;color:#000;text-decoration:none;transition:background .5s,color .5s}
.nav.light .nav-cta{background:var(--indigo);color:#fff}

/* ---------- STAGE ---------- */
.story{height:2600vh;position:relative}
.stage{position:sticky;top:0;height:100vh;overflow:hidden;background:#090A0D}
#canvas{position:absolute;inset:0;width:100%;height:100%}
/* darkening layer so the hook reads clearly over the universe */
.vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 45% at 50% 50%,rgba(5,6,8,.42),transparent 70%),radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,.45) 100%)}
.layer{position:absolute;pointer-events:none;will-change:opacity}
.js .layer{opacity:0}
.layer h2{font-weight:600;letter-spacing:-.025em;line-height:1.08}

.hook{left:50%;top:calc(var(--vis) / 2 + 36px);transform:translate(-50%,-50%);width:min(90vw,1240px);text-align:center}
.hook h1{font-weight:600;font-size:clamp(34px,4.4vw,74px);line-height:1.06;letter-spacing:-.035em}
.verb{display:inline-block;white-space:nowrap;padding:0 .02em .1em;background:linear-gradient(90deg,#FF7A1A,#FF2E93);-webkit-background-clip:text;background-clip:text;color:transparent;transition:opacity .35s ease,transform .35s ease}
.verb.out{opacity:0;transform:translateY(8px)}
.hook-sub{margin-top:22px;font-family:var(--sans);font-size:15px;color:var(--d-text-2)}

/* GROUP: a visual and its caption, centred together below the nav with one gap (platforms, bridge, features, more) */
.grp{position:absolute;left:0;right:0;top:72px;height:calc(var(--vis) - 72px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(28px,5.5vh,56px);padding:0 4vw}
.cap{width:min(90vw,900px);text-align:center}
.cap .kicker{color:var(--d-text-2);margin-bottom:12px}
.cap h2{font-size:clamp(28px,3.4vw,52px)}
.cap p{margin:12px auto 0;max-width:52ch;font-size:16px;line-height:1.5;color:var(--d-text-2)}
.platforms{display:flex;align-items:center;justify-content:center;gap:clamp(36px,6.5vw,110px)}
.platforms .glyph{display:block;width:clamp(48px,4.8vw,76px);height:clamp(48px,4.8vw,76px);fill:var(--d-text)}
.sphere-slot{flex:none}

.question{left:50%;top:calc(var(--vis) / 2 + 36px);transform:translate(-50%,-50%);width:min(86vw,1120px);text-align:center}
.q{font-weight:600;font-size:clamp(34px,5vw,82px);line-height:1.06;letter-spacing:-.035em}

.wall{inset:0}
.wl{position:absolute;color:rgba(236,237,240,.55);font-family:var(--sans);max-width:44vw;line-height:1.25}
.wall-center{position:absolute;left:50%;top:calc(var(--vis) / 2 + 36px);transform:translate(-50%,-50%);width:min(84vw,900px);text-align:center;font-size:clamp(28px,3.4vw,52px);color:var(--d-text)}


/* ---------- PREVIEW PAGES (deck look, 1200 x 720, scaled by JS through --s) ---------- */
.page{left:50%;top:53%;width:1200px;height:720px;transform:translate(-50%,-50%) scale(var(--s,1));
  background:var(--paper);color:var(--ink);border-radius:28px;padding:34px 44px 36px;display:flex;flex-direction:column;gap:16px;
  box-shadow:0 30px 80px rgba(0,0,0,.45)}
.pg-head{display:flex;justify-content:space-between;align-items:center}
.pg-head .kicker{color:var(--slate-600)}
.pg-wm{display:flex;align-items:baseline;gap:12px}.pg-wm .wm{font-size:20px}.pg-wm .mono{font-size:12px;color:var(--slate-400)}
.pg-title{font-size:34px;font-weight:500;line-height:1.15;letter-spacing:-.01em;max-width:960px}
.pg-grid{flex:1;display:grid;gap:14px;min-height:0}
.g-sl{grid-template-columns:1.15fr 1fr}
.g-ads{grid-template-columns:1.1fr 1fr .8fr}
.g-ai{grid-template-columns:1.25fr 1fr}
.panel{background:var(--surface);border-radius:20px;padding:20px 22px;display:flex;flex-direction:column;gap:12px;min-height:0}
.panel .kicker{color:var(--slate-600);font-size:11px}
.pg-base{margin-top:auto;font-size:10px;letter-spacing:.06em;color:var(--slate-400)}
/* dotted bars echo the particles */
.dots,.hb i,.vb i{background:radial-gradient(circle,var(--slate-600) 1.3px,transparent 1.8px) 0 0/6px 6px}
.hbars{display:flex;flex-direction:column;gap:11px;margin-top:4px}
.hb{display:grid;grid-template-columns:92px 1fr 44px;align-items:center;gap:10px;font-family:var(--sans);font-size:13px;color:var(--slate-600)}
.hb i{display:block;height:16px;border-radius:6px}
.hb b{font-weight:500;font-size:13px;color:var(--ink);text-align:right}
.hb.hi span,.hb.hi b{color:var(--indigo);font-weight:600}
.hb.hi i,.vb.hi i{background:radial-gradient(circle,var(--indigo) 1.4px,transparent 1.9px) 0 0/6px 6px}
.vbars{flex:1;display:flex;gap:14px;align-items:stretch;padding-top:6px;min-height:0}
.vb{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;font-family:var(--sans);font-size:11px;color:var(--slate-600);text-align:center}
.vb i{display:block;width:100%;border-radius:8px;max-height:72%}
.vb b{font-weight:500;font-size:13px;color:var(--ink)}
.vb.hi b,.vb.hi span{color:var(--indigo);font-weight:600}
.quotes{display:flex;flex-direction:column;gap:10px}
.quote{background:#fff;border:1px solid var(--hairline);border-radius:18px;padding:14px 18px;flex:1}
.qh{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.qh svg{width:14px;height:14px;fill:var(--ink)}
.qh .mono{font-size:11px;color:var(--slate-400)}
.quote p{font-size:16px;line-height:1.4}
.thumbs{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:10px;min-height:0}
.thumb{border-radius:16px;position:relative;overflow:hidden}
.t1{background:radial-gradient(circle at 35% 40%,#E9D7C3,#B88C6A 60%,#6E4B35)}
.t2{background:radial-gradient(circle at 60% 55%,#DCE3EE,#8C9BB4 60%,#454F63)}
.t3{background:linear-gradient(160deg,#C9B8A8,#7A6A60)}
.t4{background:linear-gradient(160deg,#2A2E35,#16181D)}
.chip{position:absolute;left:8px;bottom:8px;font-family:var(--mono);font-size:9.5px;padding:3px 8px;border-radius:999px;background:rgba(252,252,250,.88);color:var(--ink)}
.stats{display:flex;flex-direction:column;gap:10px}
.stat{background:var(--surface);border-radius:18px;padding:16px 18px;flex:1;display:flex;flex-direction:column;justify-content:center}
.stat .big{font-size:44px;font-weight:500;line-height:1}
.stat .big.ind{color:var(--indigo)}
.stat .cap{font-family:var(--sans);font-size:12px;color:var(--slate-600);margin-top:8px;line-height:1.4}
.islands{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.island{border-radius:20px;padding:16px 22px}
.island .kicker{font-size:10.5px;margin-bottom:6px}
.island p{font-size:17px;line-height:1.35}
.island.ink{background:var(--ink);color:#fff}.island.ink .kicker{color:rgba(255,255,255,.6)}
.island.act{background:var(--indigo-tint)}.island.act .kicker{color:var(--indigo)}
.chat{gap:14px}
.bubble{border-radius:18px;padding:12px 16px;font-size:16px;line-height:1.45;max-width:88%}
.bubble.user{align-self:flex-end;background:var(--ink);color:#fff;font-family:var(--sans);font-size:14px}
.bubble.ai{background:#fff;border:1px solid var(--hairline)}
mark{background:var(--indigo-tint);color:var(--indigo);padding:0 4px;border-radius:5px;font-weight:600}
mark.you{background:var(--copper-wash);color:var(--copper)}

/* ---------- ENGINE PAGE RENDERS ---------- */
.shot{left:50%;top:calc(var(--vis) / 2 + 36px);transform:translate(-50%,-50%);margin:0}
.shot img{display:block;width:100%;height:auto;border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
/* The title under each report page (Klaus 2026-11-13): says what kind of report the page is from. */
.shot-cap{margin-top:16px;text-align:center;font-family:var(--sans);font-weight:400;/* regular, not bold (Klaus 2026-11-13) */font-size:clamp(17px,1.5vw,22px);letter-spacing:-.01em;color:var(--d-text)}
html.crop .shot-cap{display:none}

/* ---------- REPORT PAGES ARRANGED FOR PHONE (shown under 760 px, see the PHONE block) ----------
   The same page content as the landscape render (same words, numbers and colours, read from the render), set in one
   column so it reads on a phone. "View full page" opens the real render. Colours: boxes #F4F4F1 and #DEDED8, bars
   #2E3237 and #737885, watchout #FFD9D5, aqua #73FDE9, action #87FA4E (sampled from assets/pages/*.png). */
.ppage{display:none;transform-origin:50% 0;background:#fff;color:var(--ink);border-radius:22px;padding:15px 14px 0;text-align:left;font-family:var(--sans);box-shadow:0 24px 60px rgba(0,0,0,.45)}
.ppage > * + *{margin-top:8px}
.pp-label{font-size:9.5px;letter-spacing:.14em;font-weight:500;text-transform:uppercase}
.pp-find{font-size:19px;line-height:1.14;font-weight:600;letter-spacing:-.02em;margin-top:3px!important}
.pp-box{background:#F4F4F1;border-radius:14px;padding:10px 12px}
.pp-ct{font-size:11.5px;font-weight:600;margin-bottom:6px}
.pp-row{display:grid;grid-template-columns:98px 1fr;align-items:center;gap:8px;font-size:11px;margin-top:4px}
.pp-row > span{text-align:right;white-space:nowrap}
.pp-row i{position:relative;display:block;height:13px;background:#fff;border:1px solid var(--hairline)}
.pp-row b{position:absolute;left:0;top:0;bottom:0;width:var(--w);background:#737885}
.pp-row b.hi{background:#2E3237}
.pp-row em{position:absolute;left:calc(var(--w) + 5px);top:50%;transform:translateY(-50%);font-style:normal;font-family:var(--mono);font-size:9.5px}
.pp-note{font-family:var(--mono);font-size:8.5px;color:var(--slate-600);margin-top:7px}
.pp-card{background:#fff;border:1px solid var(--hairline);border-radius:12px;padding:9px 11px}
.pp-ad{display:grid;grid-template-columns:70px 1fr;gap:10px;align-items:start}
.pp-ad img{width:70px;height:88px;object-fit:cover;border-radius:8px;box-shadow:none;display:block}
.pp-meta{font-size:10px;color:var(--slate-600);font-weight:500;line-height:1.25}
.pp-quote{font-size:13px;line-height:1.3;font-weight:600;margin-top:4px}
.pp-quote.small{font-size:11.5px}
.pp-read{font-size:10.5px;font-style:italic;color:var(--slate-600);margin-top:4px;line-height:1.3}
.pp-pills{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.pp-pills span{font-size:9.5px;font-weight:600;background:#E4E4DF;border-radius:999px;padding:2px 8px}
.pp-two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pp-isl{border-radius:12px;padding:9px 11px}
.pp-isl b{display:block;font-size:8.5px;letter-spacing:.12em;font-weight:700;margin-bottom:4px}
.pp-isl p{font-size:11.5px;line-height:1.28;font-weight:600}
.pp-isl.watch{background:#FFD9D5;color:#E4220C}
.pp-isl.aqua{background:#73FDE9}
.pp-isl.act{background:#87FA4E}
.pp-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:10px -14px 0!important;padding:8px 14px;background:#16181D;color:#C9CDD6;border-radius:0 0 22px 22px;font-family:var(--mono);font-size:8.5px;letter-spacing:.04em}
.pp-foot .shot-open{display:inline-block;position:static;transform:none;flex:none;padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.4);background:transparent;color:#fff;font-family:var(--sans);font-size:11px;font-weight:500;box-shadow:none}

/* ---------- WHAT WE DO: one feature per scene, crisp visual above the label (light chapter) ---------- */
.fvis{width:min(780px,88vw);flex:none;transform-origin:50% 0}   /* story.js scales it down when the scene is taller than the screen */
.chipd{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;border:1px solid var(--hairline);font-size:13px;color:var(--ink);background:#fff}
.chipd.ghost{color:var(--slate-400);font-size:10px;letter-spacing:.08em}
/* f1 chat */
.chatv{background:#fff;border:1px solid var(--hairline);border-radius:26px;padding:20px 26px 22px;box-shadow:0 24px 60px rgba(22,24,29,.10)}
.cv-top{display:flex;align-items:center;gap:7px;margin-bottom:18px}
.cv-top i{width:9px;height:9px;border-radius:50%;background:#DEDED8}
.cv-top span{margin-left:10px;font-size:11px;letter-spacing:.08em;color:var(--slate-400);text-transform:uppercase}
.cv-user{margin-left:auto;width:fit-content;max-width:72%;background:var(--ink);color:#fff;border-radius:18px 18px 6px 18px;padding:12px 16px;font-size:15px;font-weight:500}
.cv-ai{margin-top:18px;font-size:18px;line-height:1.6;color:var(--ink)}
.cv-ai mark{background:var(--indigo-tint);color:var(--indigo);padding:1px 6px;border-radius:6px;font-weight:600}
.cv-ai mark.c{background:rgba(255,46,147,.12);color:#C2186B}
.cv-meta{display:flex;gap:10px;align-items:center;margin-top:20px;flex-wrap:wrap}
.cv-meta .chipd b{color:#C2186B}
/* f2 phones */
.phones{display:flex;justify-content:center;align-items:center;gap:clamp(12px,2.4vw,28px)}
.phone{width:min(200px,26vw);background:#fff;border:6px solid #E7E7E2;border-radius:30px;overflow:hidden;display:flex;flex-direction:column;padding-bottom:14px;box-shadow:0 20px 50px rgba(22,24,29,.12)}
.phone.mid{transform:translateY(-14px)}
.phone img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.phone b{margin:12px 14px 2px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#C2186B;font-weight:600}
.phone span{margin:0 14px;font-size:15px;font-weight:600;color:var(--ink);line-height:1.25}
/* f3 bubbles */
.bubbles{display:flex;flex-direction:column;gap:12px}
.bub{max-width:62%;background:#fff;border:1px solid var(--hairline);border-radius:22px;padding:12px 18px 14px;box-shadow:0 10px 30px rgba(22,24,29,.06)}
.bub.l{align-self:flex-start;border-bottom-left-radius:6px}.bub.r{align-self:flex-end;border-bottom-right-radius:6px}
.bh{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.bh svg{width:14px;height:14px;fill:var(--ink)}
.bh span{font-size:11px;color:var(--slate-400)}
.bub p{font-size:16px;line-height:1.4;color:var(--ink)}
.sent{display:inline-block;margin-top:8px;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.sent.neg{background:#FFE4E1;color:#B42318}.sent.pos{background:#D9F7E7;color:#0F7A45}   /* tinted pills: bright, still readable */
/* Sentiment summary on its own dark card, so bright green and red read on the dimmed stage */
.scard{background:#16181D;border-radius:18px;padding:14px 18px 12px;margin-top:6px;box-shadow:0 12px 30px rgba(0,0,0,.2)}
.sbar{display:flex;height:10px;border-radius:999px;overflow:hidden;gap:3px}
.sbar i{display:block;height:100%;border-radius:999px}.sbar .p{background:#3DDC84}.sbar .n{background:#5A6170}.sbar .g{background:#FF5A52}
.slegend{display:flex;gap:18px;flex-wrap:wrap;margin-top:10px;font-size:11px;color:#C9CDD6;letter-spacing:.04em}
.slegend b{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle}
.dp{background:#3DDC84}.dn{background:#5A6170}.dg{background:#FF5A52}
/* f4 competitive */
.compv{background:#fff;border:1px solid var(--hairline);border-radius:26px;padding:24px 28px 18px;box-shadow:0 24px 60px rgba(22,24,29,.10)}
.compv .kicker{color:var(--slate-600)}
.cbars{display:flex;gap:clamp(14px,3vw,36px);height:min(240px,30vh);margin-top:18px;align-items:stretch}
.cb{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px}
.cb i{display:block;width:100%;max-height:78%;border-radius:12px;background:linear-gradient(180deg,#D9DAD5,#B9BBB6)}
.cb.hi i{background:linear-gradient(180deg,#FF7A1A,#FF2E93)}
.cb b{font-size:15px;font-weight:500;color:var(--ink)}
.cb span{font-size:13px;color:var(--slate-600)}
.cb.hi b,.cb.hi span{color:#C2186B}
.cfoot{margin-top:14px;font-size:10px;letter-spacing:.06em;color:var(--slate-400)}
/* f5 creators */
.creators{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.cr{background:#fff;border:1px solid var(--hairline);border-radius:22px;padding:18px 16px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;box-shadow:0 12px 34px rgba(22,24,29,.06)}
.av{width:64px;height:64px;border-radius:50%;margin-bottom:8px}
.a1{background:radial-gradient(circle at 30% 30%,#FFB86B,#FF2E93)}.a2{background:radial-gradient(circle at 30% 30%,#9CA2F2,#3A41C2)}
.a3{background:radial-gradient(circle at 30% 30%,#7FE0C1,#1F7A4D)}.a4{background:radial-gradient(circle at 30% 30%,#F6E9DF,#A65A2A)}
.cr b{font-size:12px;color:var(--ink)}
.cr span{font-size:12px;color:var(--slate-600)}
.fit{width:100%;height:6px;border-radius:999px;background:#EDEDE8;margin-top:10px;overflow:hidden}
.fit i{display:block;height:100%;background:linear-gradient(90deg,#FF7A1A,#FF2E93)}
.cr small{font-size:11px;color:var(--slate-600);margin-top:4px}
.cr small b{font-size:11px;color:#C2186B}
/* more */
.more-h{font-size:clamp(40px,6vw,96px);font-weight:600;letter-spacing:-.04em;text-align:center}
.more ul{width:min(90vw,900px);list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 0}
.more li{font-size:17px;font-weight:500;color:inherit}
.more li:not(:last-child)::after{content:"\00b7";margin:0 14px;opacity:.5}   /* a plain list, not pills: pills mean buttons */
/* light chapters: stage text and captions switch to ink */
.stage.lm{color:var(--ink)}
.stage.lm .cap .kicker{color:#40464F}
.stage.lm .cap p{color:#40464F}   /* 6:1 on the light grey stage, more on paper */
.stage.lm .shot img{box-shadow:0 30px 70px rgba(22,24,29,.18)}
.stage.mid .cap .kicker,.stage.mid .cap p{color:var(--ink)}
.stage.dmid .cap .kicker,.stage.dmid .cap p{color:#fff;font-weight:600}
.stage.dmid .cap p{font-size:19px}   /* large-bold text: 3:1 is enough on the mid greys */

/* ---------- FINALE ---------- */
#logo{position:absolute;opacity:0;pointer-events:none}
#wm{position:absolute;opacity:0;color:var(--ink)}
/* The ending line inside the story: the same element style as .cta-line below, so the two read as one line */
.stage-line{position:absolute;top:0;left:50%;width:2px;height:0;background:var(--ink);opacity:0;pointer-events:none;border-radius:2px 2px 0 0}
html:not(.js) .stage-line{display:none}
.flip{display:inline-block;position:relative}
.flip .n,.flip .v{display:inline-block}
.flip .v{position:absolute;left:0;top:0;opacity:0;transform:translateY(40%)}
.played .flip .n{animation:flip-out .7s forwards cubic-bezier(.6,0,.2,1)}
.played .flip .v{animation:flip-in .7s .15s forwards cubic-bezier(.2,.8,.2,1)}
@keyframes flip-out{to{opacity:0;transform:translateY(-40%)}}
@keyframes flip-in{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.flip .n{display:none}.flip .v{position:static;opacity:1;transform:none}.played .flip .n,.played .flip .v{animation:none}}
#tag{position:absolute;left:0;right:0;text-align:center;opacity:0;color:var(--ink)}
#tag h2{font-size:clamp(28px,3.2vw,48px);font-weight:500}

.rail{position:absolute;right:20px;top:35vh;height:30vh;width:2px;border-radius:2px;background:rgba(162,169,184,.18);overflow:hidden}
.rail i{position:absolute;left:0;top:0;width:100%;height:0;background:var(--d-text-2)}
.hint{position:absolute;left:50%;top:calc(var(--vis) - 40px);transform:translateX(-50%);font-size:11px;letter-spacing:.2em;color:var(--d-text-2)}

/* ---------- AFTER THE STORY ---------- */
.cta{position:relative;margin-top:-1px;/* overlaps the story by one pixel so the dark page colour never shows through the join */min-height:var(--vis);background:var(--paper);color:var(--ink);text-align:center;display:grid;grid-template-rows:minmax(0,1fr) auto minmax(0,1fr) auto;justify-items:center;padding:0 24px}
.cta-line{width:2px;background:var(--ink);align-self:stretch;margin-bottom:32px;border-radius:0 0 2px 2px}   /* story.js fades it from the top down */
.cta-block{display:flex;flex-direction:column;align-items:center}
.cta .kicker{color:var(--slate-600)}
.cta h2{font-size:clamp(40px,5vw,72px);font-weight:600;letter-spacing:-.03em;line-height:1.05;margin:14px 0 34px}
.talk{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:18px 44px;background:var(--indigo);color:#fff;font-family:var(--sans);font-size:17px;font-weight:500;text-decoration:none;transition:background .2s}
.talk:hover{background:#2E34A0}
.ig{display:inline-flex;align-items:center;justify-content:center;gap:10px;margin-top:26px;font-family:var(--sans);font-size:15px;color:var(--slate-600);text-decoration:none}
.ig svg{width:20px;height:20px;fill:var(--ink)}
.totop{align-self:center;font-family:var(--sans);font-size:14px;font-weight:500;color:var(--slate-600);text-decoration:none}
.totop:hover{color:var(--ink)}
.cta footer{width:min(1120px,100%);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:20px 0 26px;border-top:1px solid var(--hairline);font-family:var(--sans);font-size:13px;color:var(--slate-600)}
.cta footer > :first-child{justify-self:start}.cta footer > :last-child{justify-self:end}
.flock{display:inline-flex;align-items:center;gap:6px}
.flock .wm{font-size:22px;color:var(--ink)}
/* Back to top: fade out, jump, fade in (story.js) instead of replaying the story at speed */
body{transition:opacity .32s ease}
body.fading{opacity:0}
/* Keyboard focus */
a:focus-visible,button:focus-visible{outline:2px solid #6F76E8;outline-offset:3px;border-radius:999px}
/* "Talk to us" also copies the address: a small status note */
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,16px);opacity:0;z-index:80;padding:12px 20px;border-radius:999px;background:var(--ink);color:#fff;font-family:var(--sans);font-size:14px;transition:opacity .25s,transform .25s;pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}
/* Report pages: full-page button (phone) and viewer */
.shot-open{display:none}
.lightbox{position:fixed;inset:0;z-index:90;background:rgba(9,10,13,.94);display:flex;flex-direction:column}
.lightbox[hidden]{display:none}
.lb-close{align-self:flex-end;margin:16px;padding:10px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:transparent;color:#fff;font-family:var(--sans);font-size:14px}
.lb-scroll{flex:1;overflow:auto;display:flex;align-items:center;padding:0 16px 24px}
.lb-scroll img{height:min(78vh,620px);width:auto;max-width:none;border-radius:12px}

/* ---------- NO JAVASCRIPT: plain reading order ---------- */
html:not(.js) .story{height:auto}
html:not(.js) .stage{position:relative;height:auto;padding:120px 6vw 80px;display:flex;flex-direction:column;gap:56px}
html:not(.js) .grp{position:relative;top:auto;height:auto}
html:not(.js) .layer{position:relative;inset:auto;left:auto;top:auto;bottom:auto;transform:none;width:auto}
html:not(.js) .shot{width:auto!important}
html:not(.js) #canvas,html:not(.js) .vignette,html:not(.js) .rail,html:not(.js) .hint,html:not(.js) #logo,html:not(.js) #wm,html:not(.js) .wl{display:none}
html:not(.js) #tag{position:relative;opacity:1;color:var(--d-text)}
html:not(.js) .shot-open{pointer-events:auto}
html:not(.js) .layer{pointer-events:auto}

/* ---------- PHONE ---------- */
@media (max-width:760px){
  /* Ending section on phone (Klaus 2026-11-13): the block sat in the middle of the space above the footer, but the
     lower half also holds "Back to top", so the top looked empty. The free space is now shared in three near-equal
     parts: above the block, between the block and "Back to top", between "Back to top" and the footer. */
  .cta{grid-template-rows:minmax(0,.5fr) auto minmax(0,1fr) auto}
  .nav-links{display:none}
  .wl{display:none}
  .cap p{font-size:14px}
  .platforms{display:grid;grid-template-columns:repeat(3,auto);gap:28px 48px}
  .creators{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bub{max-width:86%}
  .cv-ai{font-size:15px}
  .rail{display:none}
  .hook h1{font-size:30px}
  .phone{width:40vw}.phone:nth-child(3){display:none}.phone b{font-size:10px}.phone span{font-size:14px}
  /* Report pages on phone: the phone arrangement (.ppage) replaces the landscape picture. With ?pages=crop
     (class "crop" on html, set by story.js) the earlier cropped picture shows instead, for comparison. */
  html:not(.crop) .shot > img, html:not(.crop) .shot > .shot-open{display:none}
  html:not(.crop) .ppage{display:block}
  html.crop .shot{overflow:hidden;border-radius:16px}
  html.crop .shot img{max-width:none;border-radius:0}
  .shot > .shot-open{display:block;position:absolute;left:50%;bottom:12px;transform:translateX(-50%);padding:10px 18px;border-radius:999px;border:0;background:var(--ink);color:#fff;font-family:var(--sans);font-size:13px;font-weight:500;box-shadow:0 6px 20px rgba(0,0,0,.3)}
  .layer.live .shot-open{pointer-events:auto}
}