/* Launchly v2 — one stylesheet, two presentations.
   html.no-webgl : chapters flow as an ordinary document (the fallback page).
   html.webgl    : chapters become fixed overlays driven by --ch-opacity / --ch-shift. */

:root{
  --bg:#080A12; --surface:#10121C; --card:#12141E;
  --border:#1E2030; --border-hi:#2A2D42;
  --text:#FFFFFF; --text-2:#8A8EA8; --text-3:#50536A;
  /* --text-3 is the app's dimmest grey and scores only 2.62:1 on --bg, below AA.
     It stays for decoration (rules, inactive dots), but anything carrying words
     uses --text-muted, which is the same family at 4.81:1. */
  --text-muted:#787C94;
  --red:#E8192C; --red-hi:#FF3B4A; --green:#00E676; --cream:#EEF0F6;
  --grad:linear-gradient(100deg,#FF2E3A 0%,#C20D1B 100%);
  --maxw:1180px;
  --ease:cubic-bezier(.2,.6,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
/* Only the fallback page uses the browser's own smooth scrolling. In 3D mode the
   snap container arrests it partway, so main.js animates header navigation itself
   and needs the browser to stay out of the way. */
html.no-webgl{scroll-behavior:smooth}
/* Held while main.js is animating a jump to a section. */
html.no-snap{scroll-snap-type:none !important;scroll-behavior:auto !important}
body{
  background:var(--bg);color:var(--text);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;cursor:pointer}

/* ── Typography ───────────────────────────────────────────── */
h1,h2{font-family:'Archivo',sans-serif;font-weight:900;letter-spacing:-.035em;line-height:.98}
h1{font-size:clamp(42px,6vw,78px)}
h2{font-size:clamp(32px,5.2vw,62px)}
.accent{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.eyebrow{font-weight:600;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--red-hi);margin-bottom:20px}
.lead{color:var(--text-2);font-size:clamp(16px,1.5vw,18.5px);max-width:56ch;margin-top:22px}
.note{color:var(--text-muted);font-size:14px;margin-top:22px}
.note b{color:var(--text-2);font-weight:600}
/* 900, not 800: the only italic Archivo loaded is 900, so 800 was already being
   matched to it. Asking for what is actually there keeps the match unambiguous. */
.sig{font-family:'Archivo',sans-serif;font-weight:900;font-style:italic;font-size:clamp(15px,1.6vw,19px);
     letter-spacing:.02em;color:var(--text-2);margin-top:18px}
.sig span{color:var(--red-hi)}

.tag{display:inline-flex;align-items:center;gap:9px;font-family:'Rajdhani',sans-serif;font-weight:700;
     font-size:14px;letter-spacing:.10em;text-transform:uppercase;color:var(--text-2);
     border:1px solid var(--border-hi);border-radius:100px;padding:6px 16px;margin-bottom:26px}
.tag .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)}

/* ── Focus & skip link ────────────────────────────────────── */
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:100;background:var(--cream);color:#0A0B12;padding:10px 18px;border-radius:8px;font-weight:600}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--red-hi);outline-offset:3px;border-radius:6px}

/* ── Backdrop layers ──────────────────────────────────────── */
#bg-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;opacity:0;
           transition:opacity .9s var(--ease);pointer-events:none}
/* The carousels can be dragged, so the canvas has to receive pointer events. The
   copy sits above it and keeps its own, so links and buttons are unaffected.
   touch-action leaves vertical panning to the browser and gives us only the
   horizontal component -- scrolling the page is never stolen by a carousel. */
html.webgl #bg-canvas{pointer-events:auto;touch-action:pan-y}
html.webgl #bg-canvas{opacity:1}

/* Ambient glows for the fallback page — the 3D layer replaces these. */
html.no-webgl body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(900px 700px at 50% -12%, rgba(232,25,44,.15), transparent 70%),
    radial-gradient(620px 620px at -8% 78%, rgba(232,25,44,.10), transparent 70%),
    radial-gradient(540px 540px at 108% 38%, rgba(232,25,44,.07), transparent 70%);
}

/* Fine grain keeps the large dark fields from banding. */
.grain{
  position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Header ───────────────────────────────────────────────── */
.site-head{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  height:76px;padding:0 clamp(20px,4vw,40px);
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease),backdrop-filter .4s var(--ease),border-color .4s var(--ease);
}
.site-head.scrolled{background:rgba(8,10,18,.72);backdrop-filter:blur(18px);border-bottom-color:var(--border)}
.brand{display:flex;align-items:center;gap:11px;font-family:'Archivo',sans-serif;font-weight:900;
       font-style:italic;font-size:21px;letter-spacing:-.03em}
.brand img{width:32px;height:32px;border-radius:9px}
.brand .wm span{color:var(--red)}
.site-head nav{display:flex;gap:32px}
.site-head nav a{color:var(--text-2);font-weight:500;font-size:15px;transition:color .2s}
.site-head nav a:hover{color:var(--text)}

.pill{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:100px;
      font-weight:600;border:0;white-space:nowrap;
      transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s}
.pill-cream{background:var(--cream);color:#0A0B12;padding:11px 22px;font-size:14.5px}
.pill-cream:hover{transform:translateY(-2px);box-shadow:0 12px 30px -10px rgba(238,240,246,.4)}
.pill-ghost{background:rgba(255,255,255,.04);color:#fff;border:1px solid var(--border-hi);padding:14px 26px;font-size:15px}
.pill-ghost:hover{transform:translateY(-2px);border-color:var(--text-3)}

/* ── Store badges ─────────────────────────────────────────── */
.stores{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.badge-store{
  display:inline-flex;align-items:center;gap:12px;
  background:#000;border:1px solid var(--border-hi);border-radius:14px;
  padding:10px 20px 10px 17px;
  transition:transform .22s var(--ease),border-color .22s,box-shadow .22s var(--ease);
}
.badge-store:hover{transform:translateY(-2px);border-color:var(--text-3);box-shadow:0 16px 34px -18px rgba(0,0,0,.9)}
.bs-txt{line-height:1.15}
.bs-txt .l1{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
.bs-txt .l2{font-size:18px;font-weight:600;letter-spacing:-.01em}

/* ── Chapters: fallback presentation (ordinary document flow) ─ */
.chapter{position:relative;z-index:1;padding:clamp(96px,14vh,168px) clamp(20px,5vw,40px)}
.chapter[data-chapter="0"]{padding-top:clamp(140px,20vh,220px)}
.ch-inner{max-width:var(--maxw);margin:0 auto}

/* ── Feature lists ────────────────────────────────────────── */
.feats{list-style:none;margin-top:34px;display:grid;gap:14px;max-width:52ch}
.feats li{position:relative;padding-left:32px;color:var(--text-2);font-size:16px}
.feats li::before{
  content:'';position:absolute;left:0;top:.55em;width:16px;height:9px;
  border-left:2.5px solid var(--red-hi);border-bottom:2.5px solid var(--red-hi);
  transform:rotate(-45deg);border-radius:1px;
}

/* ── Hero gauge (fallback only) ───────────────────────────── */
#hero-gauge{width:min(420px,72vw);height:auto;margin:48px auto 0;
            filter:drop-shadow(0 26px 70px rgba(232,25,44,.22))}
.scroll-cue{display:flex;align-items:center;gap:12px;margin-top:44px;
            font-family:'Rajdhani',sans-serif;font-weight:600;font-size:13px;
            letter-spacing:.20em;text-transform:uppercase;color:var(--text-muted)}
.scroll-cue span{display:block;width:34px;height:1px;background:linear-gradient(90deg,var(--red-hi),transparent)}

/* ── Gauge switcher ───────────────────────────────────────── */
.gauge-switch{display:flex;flex-wrap:wrap;gap:9px;margin-top:34px}
.gauge-switch button{
  background:rgba(255,255,255,.03);border:1px solid var(--border-hi);color:var(--text-2);
  border-radius:100px;padding:10px 20px;font-size:14px;font-weight:600;
  transition:color .2s,border-color .2s,background .2s,transform .2s var(--ease);
}
.gauge-switch button:hover{color:var(--text);border-color:var(--text-3);transform:translateY(-1px)}
.gauge-switch button[aria-pressed="true"]{background:var(--grad);border-color:transparent;color:#fff}

/* ── Pricing ──────────────────────────────────────────────── */
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:40px;max-width:820px}
.plan{position:relative;background:var(--card);border:1px solid var(--border);border-radius:20px;padding:30px 26px}
.plan-pro{border-color:rgba(232,25,44,.45);
          background:linear-gradient(180deg,rgba(232,25,44,.10),var(--card) 62%)}
.plan .badge{position:absolute;top:-11px;left:26px;background:var(--grad);color:#fff;
             font-size:11px;font-weight:800;letter-spacing:.14em;padding:4px 12px;border-radius:100px}
.plan .pt{font-size:14px;font-weight:600;letter-spacing:.10em;text-transform:uppercase;color:var(--text-2)}
.plan .pr{font-family:'Archivo',sans-serif;font-weight:900;font-size:42px;letter-spacing:-.04em;margin-top:8px}
.plan .pr small{font-family:'Inter',sans-serif;font-weight:500;font-size:15px;color:var(--text-muted);letter-spacing:0}
.plan ul{list-style:none;margin-top:22px;display:grid;gap:12px}
.plan li{position:relative;padding-left:28px;font-size:15px;color:var(--text-2)}
.plan li::before{position:absolute;left:0;top:0;font-weight:700}
.plan li.yes::before{content:'✓';color:var(--green)}
.plan li.no{color:var(--text-muted)}
.plan li.no::before{content:'✕';color:var(--text-3)}

/* ── Screenshot gallery ───────────────────────────────────── */
.shots{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(210px,1fr);gap:18px;
       margin-top:44px;overflow-x:auto;padding-bottom:14px;scroll-snap-type:x mandatory}
.shots img{width:100%;height:auto;border-radius:22px;border:1px solid var(--border-hi);
           scroll-snap-align:center;background:var(--surface)}
.shots{scrollbar-width:thin;scrollbar-color:var(--border-hi) transparent}
.shots::-webkit-scrollbar{height:6px}
.shots::-webkit-scrollbar-track{background:transparent}
.shots::-webkit-scrollbar-thumb{background:var(--border-hi);border-radius:100px}
.shots::-webkit-scrollbar-thumb:hover{background:var(--text-3)}

/* ── FAQ ──────────────────────────────────────────────────── */
.faq{margin-top:52px;max-width:760px;border-top:1px solid var(--border)}
.qa{border-bottom:1px solid var(--border)}
.qa summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;position:relative;
            font-weight:600;font-size:17px;transition:color .2s}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:'+';position:absolute;right:8px;top:50%;transform:translateY(-50%);
                   font-size:22px;font-weight:400;color:var(--red-hi);transition:transform .25s var(--ease)}
.qa[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.qa summary:hover{color:var(--red-hi)}
.qa p{color:var(--text-2);font-size:16px;padding:0 20px 22px 0;max-width:62ch}

/* ── Footer ───────────────────────────────────────────────── */
.site-foot{position:relative;z-index:1;border-top:1px solid var(--border);
           padding:44px clamp(20px,5vw,40px);text-align:center}
.foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:26px;font-size:15px;color:var(--text-2)}
.foot-links a{transition:color .2s}
.foot-links a:hover{color:var(--text)}
.site-foot .copy{margin-top:18px;font-size:13px;color:var(--text-muted)}

/* ── 3D mode: chapters become fixed overlays ──────────────── */
html.webgl #scroll-track{height:var(--track-h,800vh)}
html.webgl .chapter{
  position:fixed;inset:0;display:grid;align-content:center;
  padding:0 clamp(24px,6vw,90px);pointer-events:none;
  opacity:var(--ch-opacity,0);
  transform:translate3d(0,var(--ch-shift,0px),0);
  /* will-change is set per panel by main.js, on the one or two that are actually
     crossing over. Declared here it promoted all ten chapters to their own
     full-viewport composited layer for the whole visit. */
}
/* Until the first frame runs, the opening chapter is the page. Left at the default 0
   the whole document goes blank between the moment WebGL is confirmed and the moment
   the loop starts -- which on the top tier is four more dynamic imports away. */
html.webgl .chapter[data-chapter="0"]{--ch-opacity:1}
html.webgl .chapter a,html.webgl .chapter button,
html.webgl .chapter summary,html.webgl .chapter details{pointer-events:auto}
html.webgl .ch-inner{max-width:min(640px,48vw);margin:0}
/* The overlay shares its width with the phone, so the display sizes step down a
   notch: at the document scale the hero headline wraps to four lines and the tag
   pill collides with the fixed header. */
html.webgl h1{font-size:clamp(38px,4.5vw,64px)}
html.webgl h2{font-size:clamp(30px,4.0vw,54px)}
html.webgl .lead{font-size:clamp(15px,1.15vw,17px);margin-top:18px}
html.webgl .feats{margin-top:24px;gap:11px}
html.webgl .feats li{font-size:15px}
html.webgl .sig{margin-top:14px}
html.webgl .stores{margin-top:26px}
html.webgl .note{margin-top:16px}
html.webgl #hero-gauge{display:none}   /* the 3D layer shows this instead */
/* The screenshots are shown by the 3D carousel instead -- but display:none takes
   them out of the accessibility tree too, and the carousel has no alt text of its
   own, so the one chapter whose argument IS its pictures said nothing at all to a
   screen reader. Clipped rather than removed: the descriptions stay, and the images
   themselves are the same files the carousel loads as textures, so nothing extra is
   fetched. */
html.webgl .shots{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;padding:0;margin:0;
}
html.webgl .faq{max-width:min(640px,48vw);margin-top:28px}
html.webgl .qa summary{padding:15px 40px 15px 0;font-size:15.5px}
html.webgl .qa p{font-size:15px;padding-bottom:16px}
html.webgl .plans{grid-template-columns:1fr;max-width:min(640px,48vw);gap:14px;margin-top:26px}
html.webgl .plan{padding:22px 22px}
html.webgl .plan ul{gap:9px}
html.webgl .plan li{font-size:14px}
html.webgl .site-foot{position:relative;z-index:3;background:var(--bg)}


/* ── Scroll snapping ──────────────────────────────────────── */
/* One viewport of scroll per chapter, snapped by the browser rather than by
   JavaScript. Native snapping keeps momentum, trackpad, touch, keyboard and the
   scrollbar behaving exactly as the OS intends, so it still feels like the
   visitor is scrolling -- a script that moves the page for them never does.
   Every pixel of scroll still drives the scene; snapping only decides where it
   comes to rest, so there is no dead scroll. */
.step{display:none}
html.webgl #scroll-track{height:auto}

/* One model, every device.
   Mandatory advances at the halfway point of a step, so a full-viewport step puts
   that threshold around 500-640px -- well past a normal wheel flick or a thumb swipe,
   which is why sections used to be hard to leave and kept hauling you back. The step
   is only a scroll distance (the chapters are fixed overlays and never move with it),
   so it is free to shorten until half of it is one comfortable gesture.
   scroll-snap-stop forbids the scroll passing OVER a section, and js/stepper.js
   governs the rest: a gesture is worth exactly one section, never three and never
   none. STEP HEIGHT IS THE KNOB -- raise it for a longer tour, lower it for a
   lighter one. */
html.webgl{scroll-snap-type:y mandatory}
html.webgl .step{
  display:block;height:clamp(300px,50vh,560px);
  scroll-snap-align:start;scroll-snap-stop:always;
}
/* The last step is not a transition to anything -- the FAQ and the footer follow it
   in normal flow, and the gap after it is the only thing keeping them off the
   download panel. Shortened along with the rest, they began climbing over it the
   moment it was snapped to. It stays a full viewport, so the outro starts exactly at
   the bottom edge and the panel gets a screen of its own. */
html.webgl .step:last-of-type{height:100vh}
/* The outro is the ninth snap position. With its answers closed it fits a
   viewport, so nothing is trapped; opening one makes it taller than the screen,
   and main.js releases the snapping at that point. */
html.webgl .outro{scroll-snap-align:start}
html.webgl.free-scroll{scroll-snap-type:none}

/* ── Outro: FAQ and footer, in normal flow ────────────────── */
.outro{position:relative;z-index:3;background:var(--bg);
       padding:clamp(72px,10vh,120px) clamp(20px,5vw,40px) clamp(40px,6vh,72px)}
.outro::before{content:'';position:absolute;left:0;right:0;top:-140px;height:140px;
               background:linear-gradient(to bottom,transparent,var(--bg));pointer-events:none}
.outro-inner{max-width:820px;margin:0 auto}
html.webgl .outro .faq{max-width:none;margin-top:34px}
html.webgl .outro .qa summary{padding:20px 40px 20px 0;font-size:17px}
html.webgl .outro .qa p{font-size:16px;padding-bottom:22px}

/* ── Reduced motion: always the document presentation ─────── */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  html.webgl{scroll-snap-type:none}
  html.webgl .step{display:none}
  html.webgl #scroll-track{height:auto}
  html.webgl .chapter{position:relative;opacity:1;transform:none;
                      padding:clamp(96px,14vh,168px) clamp(20px,5vw,40px);pointer-events:auto}
  html.webgl .ch-inner{max-width:var(--maxw);margin:0 auto}
  html.webgl .shots{display:grid;position:static;width:auto;height:auto;
                    overflow-x:auto;clip-path:none;white-space:normal}
  html.webgl .plans{grid-template-columns:repeat(2,minmax(0,1fr));max-width:820px}
  html.webgl .faq{max-width:760px}
  html.webgl .site-foot{position:relative;opacity:1;border-top:1px solid var(--border);padding:44px 40px}
  html.webgl #bg-canvas{opacity:.35}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width:940px){
  .site-head nav{display:none}
  .plans{grid-template-columns:1fr;max-width:520px}
  html.webgl .ch-inner,html.webgl .faq,html.webgl .plans{max-width:none}
  /* A backdrop blur is not a one-off cost: what is behind this bar is the WebGL
     canvas, which changes every frame, so the compositor re-blurs the full width of
     the header sixty times a second for as long as the visitor is on the page. It
     buys nothing here -- the bar is over the road, not over the copy -- so a phone
     gets an opaque one instead. */
  .site-head.scrolled{background:rgba(8,10,18,.94);backdrop-filter:none}
}
/* ── Narrow screens: split top to bottom, not left to right ─ */
/* On a phone there is no room beside the copy, so the scene and the text were
   simply drawn on top of each other. The visual now takes the upper part of the
   viewport and the copy sits underneath it, over a scrim that keeps the text
   legible whatever is moving behind it. */
@media (max-width:940px){
  html.webgl .chapter{align-content:end;padding:0}
  /* The copy sits on a fade, and the fade belongs to the copy.
     A panel was wrong twice over: it has an edge, which reads as a card pasted onto
     the scene rather than as part of it, and it casts a shadow across the visual
     above. A gradient has no edge -- the tunnel simply darkens into the words, so the
     visualisation appears to come out from behind them.
     Putting it on .ch-inner rather than on the chapter is what makes it work on every
     chapter at once: the element is exactly as tall as its own copy, so the fade
     covers the two pricing cards and the hero's one line equally well, and never
     dulls a pixel more of the scene than the words actually need. */
  html.webgl .ch-inner{
    max-width:none;
    padding:78px 22px calc(30px + env(safe-area-inset-bottom));
    background:linear-gradient(to top,
      rgba(8,10,18,.97) 0%, rgba(8,10,18,.95) 42%, rgba(8,10,18,.86) 62%,
      rgba(8,10,18,.60) 78%, rgba(8,10,18,.26) 91%, transparent 100%);
  }
  html.webgl .lead{line-height:1.5}
  html.webgl .feats li{line-height:1.4}
  html.webgl h1{font-size:clamp(34px,8.6vw,46px)}
  html.webgl h2{font-size:clamp(28px,7.4vw,40px)}
  html.webgl .lead{font-size:15.5px;margin-top:14px;max-width:none}
  html.webgl .eyebrow{margin-bottom:12px;font-size:12px}
  html.webgl .sig{font-size:15px;margin-top:10px}
  html.webgl .feats{margin-top:18px;gap:8px}
  html.webgl .feats li{font-size:14.5px;padding-left:26px}
  html.webgl .tag{margin-bottom:16px;font-size:12.5px;padding:5px 13px}
  /* The store badges are the only thing on the page anyone has to actually press, so
     they are sized as buttons rather than as footnotes. */
  html.webgl .stores{margin-top:18px;gap:10px;flex-wrap:nowrap}
  html.webgl .badge-store{
    padding:11px 14px 11px 12px;gap:10px;flex:1 1 0;min-width:0;
    border-color:var(--text-3);box-shadow:0 12px 28px -14px rgba(0,0,0,.95);
  }
  html.webgl .badge-store svg{flex:none}
  html.webgl .bs-txt .l1{font-size:9.5px}
  html.webgl .bs-txt .l2{font-size:15.5px;white-space:nowrap}
  /* The closing chapter has nothing to compete with, so they take the full width and
     become the loudest thing on the screen -- which is the entire job of that panel. */
  html.webgl #download .stores{flex-wrap:wrap;gap:11px;margin-top:22px}
  html.webgl #download .badge-store{flex:1 1 100%;justify-content:center;padding:15px 20px}
  html.webgl #download .bs-txt .l1{font-size:10.5px}
  html.webgl #download .bs-txt .l2{font-size:17.5px}
  html.webgl .note{margin-top:12px;font-size:12.5px}
  html.webgl .scroll-cue{margin-top:18px}
  html.webgl .gauge-switch{margin-top:18px;gap:7px}
  html.webgl .gauge-switch button{padding:8px 15px;font-size:13px}
  /* The only chapter whose copy does not fit a phone viewport is pricing: stacked
     full-size cards ran 932px tall in an 844px screen. Side by side and compact,
     both plans still show every line. */
  html.webgl .plans{grid-template-columns:1fr 1fr;margin-top:16px;gap:8px;max-width:none}
  html.webgl .plan{padding:13px 11px;border-radius:15px}
  html.webgl .plan .badge{top:-9px;left:11px;font-size:9px;padding:3px 8px;letter-spacing:.10em}
  html.webgl .plan .pt{font-size:10.5px;letter-spacing:.08em}
  html.webgl .plan .pr{font-size:25px;margin-top:4px}
  html.webgl .plan .pr small{font-size:10.5px}
  html.webgl .plan ul{gap:6px;margin-top:11px}
  html.webgl .plan li{font-size:11.5px;padding-left:17px;line-height:1.3}
  html.webgl .plan li::before{font-size:11px}

  /* "The real thing" is the one chapter whose visual IS the argument -- the whole
     claim is that these are untouched screenshots, which is worth nothing if they
     are too small to read. So this chapter alone gives its space to the carousel:
     the lead line goes, and the scrim shrinks to just what the headline needs. */
  html.webgl #real .lead{display:none}
  html.webgl #real .eyebrow{margin-bottom:8px}
  /* Short copy, so the fade can start much closer to it and give the screenshots
     the rest of the screen. */
  html.webgl #real .ch-inner{padding-top:44px}
}

@media (max-width:640px){
  .shots{grid-auto-columns:minmax(168px,1fr);gap:12px}
  .badge-store{padding:9px 16px 9px 14px}
  .bs-txt .l2{font-size:16px}
}