/* ==========================================================================
   RunMyB -- the site stylesheet. ONE file for every page of runmyb.com.
   The accepted "story" design (operator, 2026-10-14): light first, the dark
   variant follows prefers-color-scheme -- unless the visitor picked a mode with
   the light/dark switch (data-theme on <html>). System font stacks only.
   This file references NO other file: no url() to a file, no @import, no web
   font -- so the page can make no request beyond its own origin.
   Every page links it through the shared head block, which the site's build
   derives into every page together with the header and the footer; never
   paste a copy of any rule into a page (there is no inline <style> and no
   style= attribute anywhere, so a future hash-based CSP stays possible).
   Sections: 1 tokens - 2 base - 3 shell (skip, bar, header, nav, footer)
   - 4 components - 5 the document style - 6 motion - 7 utilities.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
  color-scheme: light dark;

  --font-display: ui-rounded, "SF Pro Rounded", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-text: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-small: "Segoe UI Variable Small", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, Menlo, monospace;

  /* fluid between 390 px and 1440 px */
  --fs-h1: clamp(2.875rem, 1.993rem + 3.619vw, 5.25rem);
  --fs-h2: clamp(2.125rem, 1.614rem + 2.095vw, 3.5rem);
  --fs-h3: clamp(1.5rem, 1.361rem + .571vw, 1.875rem);
  --fs-lead: clamp(1.125rem, 1.055rem + .286vw, 1.3125rem);
  --fs-doc-h1: clamp(2.25rem, 1.71rem + 2.2vw, 3.5rem);
  --fs-doc-h2: clamp(1.5rem, 1.29rem + .86vw, 2.0625rem);
  --fs-doc-h3: clamp(1.125rem, 1.08rem + .19vw, 1.25rem);
  --fs-body: 1.0625rem;
  --fs-small: .9375rem;
  --fs-micro: .875rem;

  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.5rem;
  --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --sp-10: 8rem;
  --section-y: clamp(4.5rem, 3rem + 6vw, 8rem);
  --gutter: clamp(1rem, .4rem + 2.5vw, 3rem);
  --page-max: 1344px;
  --measure: 46rem;

  --r-chip: 10px; --r-field: 16px; --r-card: 28px; --r-door: 36px; --r-band: 52px; --r-pill: 999px;

  /* the four brand colours and the ink on them (fixed in both schemes) */
  --on-color: #16171B;
  --yellow: #FD9A00; --yellow-hover: #FFAA2B; --yellow-lip: #B35F00;
  --blue:   #00A6F4;
  --green:  #00BC7D;
  --red:    #EF4553;

  /* light ground (primary) */
  --bg: #FFF8EE;
  --surface: #FFFFFF;
  --sun-tint: #FFEDCC;
  --ink: #16171B;
  --ink-2: #4A4C55;
  --line-soft: #EADCC6;
  --line-strong: #16171B;   /* the >= 3:1 control border (a control's own edge): 16.98 on bg */
  --track: #D8C7AE;
  --card-edge: #16171B;
  --card-lip: #16171B;
  --ghost-bg: #FFFFFF;
  --focus: #16171B;
  --chip-status-bg: #D9F7EA; --chip-status-ink: #0B3D2A;
  --mark-hl: #FFC266;
  --mark-ink: #16171B;

  /* the console renditions: a fixed light product UI in both schemes */
  --ui-bg: #FFFFFF;
  --ui-2: #F6F4F0;
  --ui-line: #E2DDD3;
  --ui-line-2: #CFC9BE;
  --ui-fg: #16171B;
  --ui-muted: #565963;
  --ui-dot-off: #D6D9DF;
}

/* dark: the device's, unless the visitor chose light (every selector here is so scoped) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111217;
    --surface: #1C1E25;
    --sun-tint: #211C13;
    --ink: #F7F2EA;
    --ink-2: #BDB6AC;
    --line-soft: #2E313A;
    --line-strong: #8C8F99;   /* 5.8 on bg, 5.0 on surface (--card-edge is 1.8 here: decoration only) */
    --track: #4A4E5A;
    --card-edge: #3D414C;
    --card-lip: #07080A;
    --ghost-bg: #1C1E25;
    --focus: #FFFFFF;
    --chip-status-bg: #0F3426; --chip-status-ink: #9FF0CF;
    --mark-hl: transparent;
    --mark-ink: #FD9A00;
  }
}
/* theme:dark-chosen -- the site build's copy of the dark block(s) above; never edit it */
:root[data-theme="dark"] { --bg: #111217; --surface: #1C1E25; --sun-tint: #211C13; --ink: #F7F2EA; --ink-2: #BDB6AC; --line-soft: #2E313A; --line-strong: #8C8F99; --track: #4A4E5A; --card-edge: #3D414C; --card-lip: #07080A; --ghost-bg: #1C1E25; --focus: #FFFFFF; --chip-status-bg: #0F3426; --chip-status-ink: #9FF0CF; --mark-hl: transparent; --mark-ink: #FD9A00; }
:root[data-theme="dark"] .ts-d { display: none; }
:root[data-theme="dark"] .ts-l { display: contents; }
/* /theme:dark-chosen */
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }

/* ==========================================================================
   2. BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 var(--fs-body)/1.6 var(--font-text);
  font-family: var(--font-text);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  /* svh, never vh: a vh height clips at 200 % zoom. */
  min-height: 100svh;
  /* anywhere, not break-word: only anywhere lets a long unbreakable token (an
     address, a URL, a code run) shrink an element's min-content width, which
     is what keeps a 320 px viewport at 200 % zoom free of sideways scroll. */
  overflow-wrap: anywhere;
  overflow-x: clip;
}
img, svg, canvas { display: block; max-width: 100%; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); color: var(--ink); text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
figure { margin: 0; }
a { color: inherit; }
[hidden] { display: none !important; }
[id] { scroll-margin-top: 1.5rem; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }

/* ==========================================================================
   3. THE SHELL
   ========================================================================== */
/* The skip link: the first stop in the Tab order. Never display:none -- that
   would take it out of the Tab order, which is the one thing it is for. */
.skip {
  position: absolute; left: var(--sp-4); top: -100px; z-index: 50;
  background: var(--ink); color: var(--bg); padding: .7rem 1.1rem; border-radius: var(--r-chip);
  font: 700 var(--fs-small)/1 var(--font-text); text-decoration: none;
}
.skip:focus { top: var(--sp-4); }

/* the four colours in the mark's own side order: blue, red, yellow, green */
.brandbar { display: flex; gap: 6px; height: 8px; padding-inline: 6px; }
.brandbar i, .footrule i { flex: 1 1 0; display: block; border-radius: 0 0 6px 6px; }
.brandbar i:nth-child(1), .footrule i:nth-child(1) { background: var(--blue); }
.brandbar i:nth-child(2), .footrule i:nth-child(2) { background: var(--red); }
.brandbar i:nth-child(3), .footrule i:nth-child(3) { background: var(--yellow); }
.brandbar i:nth-child(4), .footrule i:nth-child(4) { background: var(--green); }

/* ---- the header ---- */
.site-header { position: relative; z-index: 20; }
.header-row { display: flex; align-items: center; gap: var(--sp-5); min-height: 5.5rem; }
.brand { display: inline-flex; align-items: center; gap: .6rem; flex: none; color: var(--ink); text-decoration: none; }
.brand .markslot { display: inline-flex; line-height: 0; }
.brand .markslot svg { width: 38px; height: 38px; }
/* The word and its trademark symbol are ONE flex item (the wordmark span), so
   the symbol sits against the word, never across the mark-to-word gap. */
.wordmark { font: 800 1.4rem/1 var(--font-display); letter-spacing: -.02em; }
.header-cta { flex: none; }
.burger { display: inline-grid; gap: 3px; }
.burger i { display: block; width: 16px; height: 2.5px; border-radius: 2px; background: currentColor; }
/* (the header's own selectors carry the header class, so they outrank the generic .btn rules below) */
@media (max-width: 1220px) {
  .site-header .header-cta { order: 2; }
  .site-header .brand { margin-right: auto; }
}
@media (max-width: 600px) {
  .site-header .header-cta { display: none; }
  .header-row { min-height: 4.5rem; gap: var(--sp-4); }
  .wordmark { font-size: 1.25rem; }
  .brand .markslot svg { width: 34px; height: 34px; }
}
@media (forced-colors: active) {
  .brandbar i, .footrule i { background: CanvasText; }
}

/* ---- the navigation: direction A, "Doors" (the operator's choice, 2026-10-16) ----
   Wide screens (>= 1280 px): each group is a door in the header; it opens a panel in its door colour
   with the group's pages as cards. Open/close is the HTML popover attribute (popovertarget): no
   script, one panel at a time, Escape and a click outside close it, focus is never trapped.
   Narrower screens, and every width in a browser without popover: a Menu <details> unfolds in the
   page, one <details> door per group. These rules are the accepted prototype's, as built; the
   header's own selectors carry .site-header where they must outrank the generic .btn rules below. */

.g-idea { --g: var(--yellow); --an: --na-idea; }
.g-business { --g: var(--blue); --an: --na-business; }
.g-start { --g: var(--green); --an: --na-start; }

/* ---- the wide header ---- */
.na-wide { margin-left: auto; }
.na-list { list-style: none; display: flex; align-items: center; gap: .1rem; }
.na-door, .na-link {
  position: relative; display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; padding: .45rem .6rem;
  border: 2.5px solid transparent; border-radius: var(--r-pill); background: none; color: var(--ink);
  font: 600 1rem/1.2 var(--font-text); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .15s ease;
}
.na-door::after {
  content: ""; width: .42rem; height: .42rem; margin: -.25rem .1rem 0 .05rem;
  border: solid currentColor; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); transition: transform .2s ease;
}
/* the group's door colour: a tab under the label, the header bar's own shape */
.na-sw { position: absolute; left: .6rem; right: 1.45rem; bottom: .2rem; height: 5px; border-radius: 3px; background: var(--g); }
.na-door:hover, .na-link:hover { background: var(--sun-tint); }
.na-door[aria-current], .na-link[aria-current="page"] {
  background: var(--sun-tint); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .3em;
}
.na-item:has(> :popover-open) > .na-door { background: var(--g); color: var(--on-color); border-color: var(--on-color); }
.na-item:has(> :popover-open) > .na-door::after { transform: translateY(.22rem) rotate(-135deg); }

/* ---- Company: a slim strip above the row ---- */
.na-util { display: flex; justify-content: flex-end; }
.na-util ul { list-style: none; display: flex; gap: .1rem; }
.na-util a {
  display: block; padding: .5rem .6rem .1rem; font: 600 var(--fs-micro)/1.3 var(--font-small);
  color: var(--ink-2); text-decoration: none; text-underline-offset: .25em;
}
.na-util a:hover { color: var(--ink); text-decoration: underline; }
.na-util a[aria-current="page"], .na-co-list a[aria-current="page"], .na-flat a[aria-current="page"] {
  color: var(--ink); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .3em;
}
.site-header .header-row { min-height: 4.75rem; }

/* ---- the light/dark switch: shown once the boot has run; the face that names the action shows ---- */
.theme-sw { display: none; }
.js .theme-sw {
  position: relative; display: inline-grid; place-items: center; flex: none; width: 1.75rem; height: 1.75rem; padding: 0;
  border: 2px solid var(--line-strong); border-radius: 50%; background: var(--ghost-bg); color: var(--ink); cursor: pointer;
}
.js .theme-sw:hover { background: var(--sun-tint); }
.theme-sw svg { width: 1rem; height: 1rem; }
.ts-d { display: contents; }
.ts-l { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ts-d { display: none; }
  :root:not([data-theme="light"]) .ts-l { display: contents; }
}
.na-util { align-items: center; }
.na-util .theme-sw { margin: .2rem 0 -.2rem .45rem; }
.na-co-theme { display: flex; align-items: center; margin-left: auto; }
.js .na-co-list .theme-sw { width: 2.75rem; height: 2.75rem; border-width: 2.5px; }
.na-co-list .theme-sw svg { width: 1.25rem; height: 1.25rem; }

/* ---- a group's panel ---- */
.na-panel {
  position: absolute; inset: auto; margin: 0; overflow: visible;
  top: 8.5rem; left: 50%; translate: -50% 0;          /* without anchor positioning: under the header */
  width: max-content; max-width: calc(100vw - 2 * var(--gutter));
  padding: 1.4rem 1.5rem 1.6rem; border: 2.5px solid var(--on-color); border-radius: var(--r-door);
  background: var(--g); color: var(--on-color); box-shadow: 0 8px 0 var(--on-color);
}
.na-panel:popover-open { display: grid; grid-template-columns: auto auto; column-gap: 1.4rem; align-items: start; }
@supports (position-area: block-end) {
  .na-door { anchor-name: var(--an); }
  .na-panel { position-anchor: var(--an); top: auto; left: auto; right: auto; translate: none;
              position-area: block-end span-inline-end; margin: .7rem 0 0 -.4rem; position-try-fallbacks: flip-inline; }
}
.na-panel :focus-visible { outline-color: var(--on-color); }
.na-art { grid-row: 1 / span 2; width: 6.5rem; height: auto; margin-top: .2rem; }
.na-chip {
  justify-self: start; margin-bottom: .9rem; padding: .3rem .8rem; border-radius: var(--r-pill);
  background: #FFFFFF; color: var(--on-color); border: 2px solid var(--on-color); font: 700 var(--fs-micro)/1.3 var(--font-small);
}
.na-cards { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: 14.5rem; gap: .9rem; }
.na-cards.n1 { grid-auto-columns: 17rem; }
.na-card, .na-acc a {
  position: relative; display: block; height: 100%; padding: .9rem 2.5rem 1rem 1rem;
  background: #FFFFFF; color: var(--on-color); border: 2.5px solid var(--on-color); border-radius: 20px;
  box-shadow: 0 5px 0 var(--on-color); text-decoration: none; transition: transform .14s ease, box-shadow .14s ease;
}
.na-card:hover { transform: translateY(-3px); box-shadow: 0 8px 0 var(--on-color); }
.nv-l { display: block; font: 800 1.1875rem/1.15 var(--font-display); letter-spacing: -.01em; }
.nv-s { display: block; margin-top: .4rem; font: 500 .9375rem/1.4 var(--font-text); color: #4A4C55; }
.nv-arrow { position: absolute; right: .95rem; top: .85rem; font: 800 1.125rem/1 var(--font-display); }
.na-card[aria-current="page"], .na-acc a[aria-current="page"] { background: var(--on-color); color: #FFFFFF; }
[aria-current="page"] > .nv-l { color: var(--g); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .22em; }
[aria-current="page"] > .nv-s { color: #FFFFFF; }
.na-panel [aria-current="page"]:focus-visible, .na-acc [aria-current="page"]:focus-visible { outline-color: var(--on-color); }

/* ---- the menu form: tablet and phone ---- */
.nv-menu { display: none; }
.nv-menu-btn {
  position: absolute; top: 2.75rem; translate: 0 -50%; right: calc((100% - min(100%, var(--page-max))) / 2 + var(--gutter));
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  width: 7.25rem; min-height: 2.75rem; padding: .5rem .9rem; border-radius: var(--r-pill);
  border: 2.5px solid var(--line-strong); background: var(--ghost-bg); color: var(--ink); font: 700 1rem/1 var(--font-display);
}
.nv-menu-btn::-webkit-details-marker, .na-acc > summary::-webkit-details-marker { display: none; }
.nv-menu[open] > .nv-menu-btn { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.nv-menu .burger i { transition: transform .2s ease, opacity .2s ease; }
.nv-menu[open] .burger i:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nv-menu[open] .burger i:nth-child(2) { opacity: 0; }
.nv-menu[open] .burger i:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
.na-sheet {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 1rem;
  width: min(100% - 2 * var(--gutter), var(--page-max) - 2 * var(--gutter)); margin: .25rem auto var(--sp-7);
}
.na-acc { background: var(--g); color: var(--on-color); border: 2.5px solid var(--on-color); border-radius: 24px; box-shadow: 0 6px 0 var(--on-color); }
.na-acc > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: .8rem; min-height: 4.5rem;
  padding: .55rem 1rem .55rem .65rem; border-radius: 22px; font: 800 1.25rem/1.12 var(--font-display); letter-spacing: -.01em;
}
.na-acc > summary::after {
  content: ""; flex: none; width: .55rem; height: .55rem; margin: -.3rem .3rem 0 auto;
  border: solid currentColor; border-width: 0 3px 3px 0; transform: rotate(45deg); transition: transform .2s ease;
}
.na-acc[open] > summary::after { transform: translateY(.3rem) rotate(-135deg); }
.na-acc > summary[aria-current] > span { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .22em; }
.na-acc :focus-visible { outline-color: var(--on-color); }
.na-acc-art { flex: none; width: 4.25rem; height: auto; }
.na-acc ul { list-style: none; display: grid; gap: .6rem; padding: .1rem .75rem 1rem; }
.na-acc a { border-width: 2px; border-radius: 16px; box-shadow: 0 4px 0 var(--on-color); }
.na-flat, .na-co-h, .na-co-list, .na-sheet-cta { grid-column: 1 / -1; }
.na-flat { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 1rem; margin-top: .5rem; }
.na-flat a {
  display: block; padding: .95rem .25rem; border-bottom: 2.5px solid var(--line-soft);
  font: 800 1.25rem/1.2 var(--font-display); color: var(--ink); text-decoration: none;
}
.na-co-h { margin-top: .5rem; font: 700 var(--fs-micro)/1.3 var(--font-small); color: var(--ink-2); }
.na-co-list { list-style: none; display: flex; flex-wrap: wrap; gap: 0 1.5rem; margin-top: -.6rem; }
.na-co-list a { display: inline-block; padding: .55rem 0; font: 600 1rem/1.3 var(--font-text); color: var(--ink); text-underline-offset: 3px; }
.site-header .na-sheet-cta { display: none; }

@media (max-width: 1365px) {
  /* a 1280-1365 px laptop keeps the doors in the header: a little less air between the items */
  .site-header .header-row { gap: .75rem; }
  .na-door, .na-link { padding-inline: .5rem; }
  .na-sw { left: .5rem; right: 1.35rem; }
}
@media (max-width: 1279px) {
  .site-header .na-wide, .na-util { display: none; }
  .site-header .nv-menu { display: block; }
  .site-header .header-row { padding-right: calc(var(--gutter) + 7.25rem + var(--sp-4)); }
  .site-header .header-cta { margin-left: auto; }
}
@media (max-width: 760px) {
  .na-sheet, .na-flat { grid-template-columns: minmax(0, 1fr); }
  .na-sheet { gap: .85rem; }
  .na-flat a { padding: .9rem .25rem; }
}
@media (max-width: 600px) {
  .nv-menu-btn { top: 2.25rem; }
  .site-header .na-sheet-cta { display: flex; margin-top: .5rem; }
}
/* a browser without the popover attribute would show every panel at once: it gets the menu form at every width */
@supports not selector(:popover-open) {
  .site-header .na-wide, .na-util { display: none; }
  .site-header .nv-menu { display: block; }
  .site-header .header-row { padding-right: calc(var(--gutter) + 7.25rem + var(--sp-4)); }
  .site-header .header-cta { margin-left: auto; }
}
@media (forced-colors: active) {
  .na-panel, .na-acc, .na-card, .na-acc a, .na-sw, .nv-menu-btn, .theme-sw, .to-top { border-color: CanvasText; }
}

/* ---- motion: bounded, played once per opening, none under reduced motion ---- */
@media (prefers-reduced-motion: no-preference) {
  .na-panel { transition: opacity .18s ease, transform .26s cubic-bezier(.3, 1.35, .5, 1); }
  @starting-style { .na-panel:popover-open { opacity: 0; transform: translateY(-.6rem) rotate(-.8deg); } }
  .na-panel:popover-open .na-cards > li, .na-acc[open] li { animation: na-deal .38s cubic-bezier(.3, 1.35, .5, 1) both; }
  .na-cards > li:nth-child(2), .na-acc li:nth-child(2) { animation-delay: .06s; }
  .na-cards > li:nth-child(3), .na-acc li:nth-child(3) { animation-delay: .12s; }
  .nv-menu[open] .na-sheet > * { animation: na-rise .32s ease-out both; }
  @keyframes na-deal { from { opacity: 0; transform: translateY(.8rem) rotate(2deg); } }
  @keyframes na-rise { from { opacity: 0; transform: translateY(.5rem); } }
}

/* ---- the footer: the legal footer's markup is fixed, so it is styled as it stands ---- */
body > footer {
  width: 100%; max-width: var(--page-max); margin-inline: auto;
  padding: clamp(4rem, 3rem + 3vw, 6rem) var(--gutter) clamp(2.5rem, 2rem + 2vw, 4rem);
}
.footrule { display: flex; gap: 6px; height: 8px; margin-bottom: var(--sp-6); max-width: 220px; }
.footrule i { border-radius: 4px; }
body > footer p { margin: 0; font: 400 var(--fs-small)/1.75 var(--font-small); color: var(--ink-2); }
body > footer p + p { margin-top: var(--sp-3); }
body > footer a { color: var(--ink); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
body > footer a:hover { text-decoration-thickness: 3px; }

/* ---- back to top: fades in with scroll where it can, and keeps off the waitlist form ---- */
.to-top {
  position: fixed; z-index: 30; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom));
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: var(--yellow); color: var(--on-color); border: 2.5px solid var(--on-color); box-shadow: 0 4px 0 var(--on-color);
  text-decoration: none;
}
.to-top:hover { background: var(--yellow-hover); }
.to-top svg { width: 1.25rem; height: 1.25rem; }
.to-top:focus-visible, .theme-sw:focus-visible { border-radius: 50%; }
body:has(.waitlist:focus-within) .to-top { visibility: hidden !important; }   /* !important: it outranks the fade */
@keyframes to-top-in { from { opacity: 0; visibility: hidden; } to { opacity: 1; visibility: visible; } }
@keyframes to-top-off { from, to { opacity: 0; visibility: hidden; } }
@supports (animation-timeline: scroll()) and (timeline-scope: none) {
  @media (prefers-reduced-motion: no-preference) {
    html { timeline-scope: --rmb-form; }
    .waitlist { view-timeline: --rmb-form block; }
    .to-top {
      opacity: 0; visibility: hidden;   /* a page that cannot scroll: hidden */
      animation: to-top-in linear both, to-top-off linear none;
      animation-timeline: scroll(root), --rmb-form;
      animation-range: 40svh 100svh, entry 0% entry calc(100% + 5rem);
    }
    .to-top:focus-visible { animation: none; opacity: 1; visibility: visible; }
  }
}

/* ==========================================================================
   4. COMPONENTS
   ========================================================================== */
/* ---- buttons: a yellow pill with a lip ---- */
.btn {
  --lip: 5px;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 3.25rem; padding: .8rem 1.6rem; border: 0; border-radius: var(--r-pill);
  font: 700 1.0625rem/1.15 var(--font-display); text-decoration: none; text-align: center; cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease, background-color .14s ease;
}
.btn-primary { background: var(--yellow); color: var(--on-color); box-shadow: 0 var(--lip) 0 var(--yellow-lip); }
.btn-primary:hover { background: var(--yellow-hover); transform: translateY(-2px); box-shadow: 0 calc(var(--lip) + 2px) 0 var(--yellow-lip); }
.btn-primary:active { transform: translateY(var(--lip)); box-shadow: 0 0 0 var(--yellow-lip); }
.btn-lg { --lip: 6px; min-height: 3.875rem; padding: 1rem 2.1rem; font-size: 1.1875rem; }
.btn-sm { --lip: 4px; min-height: 2.75rem; padding: .6rem 1.25rem; font-size: 1rem; }
.btn-block { width: 100%; }
@media (forced-colors: active) { .btn { border: 2px solid ButtonText; } }

/* ---- the status chip ---- */
.chip-status {
  display: inline-flex; align-items: center; gap: .6rem; padding: .5rem 1rem .5rem .7rem; border-radius: var(--r-pill);
  background: var(--chip-status-bg); color: var(--chip-status-ink); font: 650 var(--fs-small)/1.25 var(--font-small);
}
.chip-status .dot { width: 12px; height: 12px; border-radius: 50%; flex: none; background: var(--green); box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--green); }

/* ---- a card ---- */
.card {
  background: var(--surface); color: var(--ink); border: 2.5px solid var(--card-edge); border-radius: var(--r-card);
  box-shadow: 0 8px 0 var(--card-lip); padding: clamp(1.25rem, .9rem + 1.4vw, 2.25rem);
}

/* ---- the guide: a static pose with its line (pages without the runtime) ---- */
.guide {
  position: relative; display: grid; grid-template-columns: minmax(96px, 128px) minmax(0, 1fr); align-items: center; gap: var(--sp-3);
  background: var(--blue); border-radius: var(--r-card); padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-2);
}
.guide.c-yellow { background: var(--yellow); } .guide.c-green { background: var(--green); } .guide.c-red { background: var(--red); }
.guide-art { position: relative; aspect-ratio: 64 / 60; width: 100%; }
.guide-art > img, .guide-art > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.says {
  position: relative; justify-self: start;
  background: #FFFFFF; color: #16171B; border: 2.5px solid #16171B; border-radius: 20px; box-shadow: 0 4px 0 #16171B;
  padding: .7rem 1rem; font: 700 1.0625rem/1.35 var(--font-display);
}
.says::before {
  content: ""; position: absolute; left: -11px; top: 50%; width: 18px; height: 18px; margin-top: -9px;
  background: #FFFFFF; border-left: 2.5px solid #16171B; border-bottom: 2.5px solid #16171B; transform: rotate(45deg); border-radius: 0 0 0 4px;
}

/* ---- section heads ---- */
.section-title { font-size: var(--fs-h2); font-weight: 800; line-height: 1.04; letter-spacing: -.03em; }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--ink-2); max-width: 36em; }

/* ---- doors: one per audience ---- */
.door-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, .5rem + 1.6vw, 2rem); }
.door { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: clamp(1.75rem, 1.3rem + 1.4vw, 2.75rem); border-radius: var(--r-door); color: var(--on-color); transition: transform .2s cubic-bezier(.3, 1.4, .5, 1); }
.door-idea { background: var(--yellow); } .door-business { background: var(--blue); } .door-start { background: var(--green); }
.door:hover { transform: translateY(-6px) rotate(-.6deg); }
.door-art { width: 152px; height: auto; margin-bottom: var(--sp-6); }
.door-label { display: inline-block; padding: .35rem .85rem; border-radius: var(--r-pill); background: #FFFFFF; color: var(--on-color); font: 700 var(--fs-micro)/1.3 var(--font-small); }
.door-title { margin-top: var(--sp-4); color: var(--on-color); font-size: var(--fs-h3); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; }
.door-body { margin-top: var(--sp-4); margin-bottom: var(--sp-6); line-height: 1.6; color: var(--on-color); }
.door-link {
  margin-top: auto; display: inline-flex; align-items: center; gap: .5rem; min-height: 3rem; padding: .7rem 1.3rem; border-radius: var(--r-pill);
  background: #FFFFFF; color: var(--on-color); border: 2.5px solid var(--on-color); box-shadow: 0 4px 0 var(--on-color);
  font: 700 1.0625rem/1.15 var(--font-display); text-decoration: none; transition: transform .14s ease, box-shadow .14s ease;
}
.door-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-door); }
.door:hover .door-link { transform: translateY(-2px); box-shadow: 0 6px 0 var(--on-color); }
.door-link:focus-visible { outline: 3px solid var(--on-color); outline-offset: 4px; }
@media (max-width: 1080px) {
  .door-grid { grid-template-columns: minmax(0, 1fr); }
  .door { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--sp-6); align-items: start; justify-items: start; }
  .door-art { grid-row: 1 / span 4; margin-bottom: 0; width: 132px; }
  .door-link { margin-top: 0; }
}
@media (max-width: 640px) { .door { display: flex; } .door-art { width: 120px; margin-bottom: var(--sp-5); } }

/* ---- the trust strip ---- */
.trust-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--sp-4); }
.trust-list li { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5) var(--sp-4) var(--sp-4); border-radius: var(--r-card); border: 2px solid var(--line-soft); background: var(--surface); }
.trust-list p { font: 650 1.0625rem/1.4 var(--font-text); }
.trust-icon { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; border: 2.5px solid var(--on-color); }
.ti-yellow { background: var(--yellow); } .ti-blue { background: var(--blue); } .ti-green { background: var(--green); }

/* ---- the band: a full-colour closing block that carries the form ---- */
.band {
  position: relative; isolation: isolate;
  background: var(--red); color: var(--on-color); border-radius: var(--r-band);
  padding: clamp(2.5rem, 1.5rem + 4vw, 5.5rem) clamp(1.25rem, .5rem + 3.4vw, 4.5rem);
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2rem, 1rem + 3vw, 4.5rem); align-items: center;
}
.band.c-blue { background: var(--blue); } .band.c-yellow { background: var(--yellow); } .band.c-green { background: var(--green); }
.band-title { color: var(--on-color); font-size: clamp(2.25rem, 1.574rem + 2.771vw, 4.0625rem); font-weight: 800; line-height: 1.02; letter-spacing: -.035em; }
.band p { color: var(--on-color); }
@media (max-width: 960px) { .band { grid-template-columns: minmax(0, 1fr); } }

/* ---- the waitlist form (fixed light in both schemes: it sits on a colour band) ---- */
.waitlist {
  color-scheme: light; background: #FFFFFF; color: #16171B; border: 2.5px solid #16171B; border-radius: 32px; box-shadow: 0 8px 0 #16171B;
  padding: clamp(1.25rem, .9rem + 1.4vw, 2.25rem); display: grid; gap: var(--sp-5);
}
.waitlist :focus-visible { outline-color: #16171B; }
.field { display: grid; gap: var(--sp-2); }
.field label { font: 700 1rem/1.2 var(--font-display); }
.field input { width: 100%; min-height: 3.5rem; padding: .8rem 1.1rem; border: 2.5px solid #16171B; border-radius: var(--r-field); background: #FFFFFF; color: #16171B; font: 400 1.0625rem/1.3 var(--font-text); }
.field input:focus-visible { outline: 3px solid #16171B; outline-offset: 3px; }
/* the consent target: a 24 x 24 px checkbox inside a label at least 24 px tall */
.consent { display: flex; gap: .8rem; align-items: flex-start; }
.consent input[type="checkbox"] { flex: none; width: 24px; height: 24px; margin: .1rem 0 0; accent-color: #16171B; cursor: pointer; }
.consent label { min-height: 1.5rem; display: block; font: 400 .9375rem/1.55 var(--font-small); color: #33353D; }
.consent label a { color: #16171B; font-weight: 600; text-underline-offset: 3px; }
.err { display: flex; gap: .4rem; align-items: baseline; color: #A3121F; font: 600 .9375rem/1.4 var(--font-small); }
.done, .fail { background: #FFFFFF; color: #16171B; border: 2.5px solid #16171B; border-radius: 24px; padding: var(--sp-5); }
.done p + p { margin-top: var(--sp-3); }
.done:focus-visible { outline-offset: 4px; }
/* the honeypot: out of sight and out of the Tab order (the input carries tabindex="-1") */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* With JavaScript the form shows; without it, the mail-to paragraph does. The
   class that flips them is set in <head> before the body is parsed, so neither
   flashes. */
.js .no-js { display: none; }
html:not(.js) .needs-js { display: none; }

/* ---- a fold: a question with its answer ---- */
details.fold { border: 2px solid var(--line-soft); border-radius: var(--r-field); background: var(--surface); padding: 0 var(--sp-5); }
details.fold + details.fold { margin-top: var(--sp-3); }
details.fold > summary { cursor: pointer; padding: var(--sp-4) 0; font: 700 1.0625rem/1.35 var(--font-display); }
details.fold[open] > summary { border-bottom: 1px solid var(--line-soft); margin-bottom: var(--sp-4); }
details.fold > :last-child { margin-bottom: var(--sp-4); }

/* ==========================================================================
   5. THE DOCUMENT STYLE -- the legal pages and every long page of prose
   ========================================================================== */
main.doc {
  display: block; width: 100%; max-width: var(--page-max); margin-inline: auto;
  padding: clamp(1.5rem, 1rem + 2vw, 3.5rem) var(--gutter) 0;
}
main.doc > * { max-width: var(--measure); }
main.doc > .table-wrap { max-width: 64rem; }
.doc h1 { font-size: var(--fs-doc-h1); font-weight: 800; line-height: 1.04; letter-spacing: -.03em; margin: 0 0 var(--sp-5); }
.doc h2 { font-size: var(--fs-doc-h2); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; margin: var(--sp-7) 0 var(--sp-4); }
.doc h3 { font-size: var(--fs-doc-h3); font-weight: 750; line-height: 1.3; letter-spacing: -.01em; margin: var(--sp-6) 0 var(--sp-2); }
.doc p { margin: 0 0 var(--sp-4); }
.doc ul, .doc ol { margin: 0 0 var(--sp-4); padding-left: 1.4rem; }
.doc li { margin: .4rem 0; }
.doc li::marker { color: var(--ink-2); }
.doc a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--blue); text-decoration-thickness: 2px; text-underline-offset: .18em; }
.doc a:hover { text-decoration-thickness: 3px; }
.doc strong { font-weight: 700; }
.doc .lead { margin-bottom: var(--sp-5); }
.doc .muted, .doc .doc-meta { color: var(--ink-2); font: 400 var(--fs-small)/1.6 var(--font-small); }
.doc .doc-meta { margin-top: calc(var(--sp-2) * -1); }
.doc .note {
  margin: var(--sp-5) 0; padding: var(--sp-4) var(--sp-5); border-left: 4px solid var(--yellow);
  background: var(--surface); border-radius: 0 var(--r-field) var(--r-field) 0;
}
.doc .table-wrap { overflow-x: auto; margin: var(--sp-5) 0; border: 2px solid var(--line-soft); border-radius: var(--r-field); background: var(--surface); }
.doc table { border-collapse: collapse; width: 100%; font-size: .9375rem; line-height: 1.5; }
.doc th, .doc td { padding: .6rem .8rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-soft); }
/* The one place body's overflow-wrap:anywhere is wound back: a table sizes its
   columns off min-content, and anywhere would break ordinary words mid-word.
   break-word still breaks a token that cannot fit a line of its own. */
.doc th, .doc td { overflow-wrap: break-word; }
.doc th { background: var(--sun-tint); font-weight: 700; }
.doc tbody tr:last-child > * { border-bottom: 0; }
.doc code { font: .92em/1.4 var(--font-mono); background: var(--sun-tint); padding: .1em .35em; border-radius: 6px; }
.doc blockquote {
  margin: var(--sp-5) 0; padding: var(--sp-4) var(--sp-5); border-left: 4px solid var(--yellow);
  background: var(--surface); border-radius: 0 var(--r-field) var(--r-field) 0;
}
.doc blockquote p:last-child { margin-bottom: 0; }
.doc dl { margin: var(--sp-5) 0; }
.doc dt { font-weight: 700; margin-top: var(--sp-4); }
.doc dd { margin: .2rem 0 0; }
.doc details.changelog {
  margin-top: var(--sp-8); padding: var(--sp-4) var(--sp-5); border: 2px solid var(--line-soft); border-radius: var(--r-field);
  background: var(--surface); color: var(--ink-2); font: 400 var(--fs-small)/1.6 var(--font-small);
}
.doc details.changelog summary { cursor: pointer; font-weight: 700; color: var(--ink); }
.doc details.changelog p { margin: var(--sp-3) 0 0; }
@media (max-width: 26rem) {
  .doc th, .doc td { padding: .4rem .5rem; }
}

/* ==========================================================================
   6. MOTION -- every piece rests in its final state unless a script asks.
   The inline boot sets "motion" on <html> only when reduced motion is not
   asked for; a page that runs no script never moves. Nothing here loops.
   ========================================================================== */
@keyframes k-up  { from { opacity: 0; translate: 0 56px; } }
@keyframes k-pop { 0% { opacity: 0; scale: .3; } 70% { opacity: 1; scale: 1.12; } 100% { scale: 1; } }
@keyframes k-in  { from { opacity: 0; } }

/* one-shot reveals ("io"): a script adds .in to a [data-reveal] block once, when it enters view */
@media (prefers-reduced-motion: no-preference) {
  .motion.io [data-reveal]:not(.in) :is(.r, .pop) { opacity: 0; }
  .motion.io [data-reveal].in .r { animation: k-up .7s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 90ms); }
  .motion.io [data-reveal].in .pop { animation: k-pop .55s cubic-bezier(.3, 1.4, .5, 1) both; animation-delay: calc(200ms + var(--i, 0) * 90ms); }
}

/* the native scroll-driven reveal, where the browser has scroll timelines: it advances only with scroll */
@supports (animation-timeline: view()) and (timeline-scope: none) {
  @media (prefers-reduced-motion: no-preference) {
    .motion:not(.fb):not(.io) [data-reveal="view"] .r { animation: k-up linear both; animation-timeline: view(); animation-range: entry 10% entry calc(70% + var(--i, 0) * 10%); }
  }
}

/* the stagger index, as classes: no style= attribute carries it */
.i1 { --i: 1; } .i2 { --i: 2; } .i3 { --i: 3; } .i4 { --i: 4; } .i5 { --i: 5; } .i6 { --i: 6; }

/* reduced motion: nothing moves, whatever a script or a rule above asked for */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .btn:hover, .btn:active, .door:hover { transform: none; }
}

/* ==========================================================================
   6b. PAGE BLOCKS (brief 1490, 2026-10-15) -- one block per build item, so the items that build
   in parallel never edit the same lines. A rule used by more than one page moves up into the
   shared sections above, by the coordinator, never by an item.
   ========================================================================== */

/* == 1490 W2 begin == */
/* THE HOME PAGE -- the accepted "story" (operator, 2026-10-14). Every rule here is scoped to
   <main class="home">, so nothing in this block styles another page. The shared pieces it wears (the
   header, the buttons, the status chip, the guide's speech bubble, the doors, the trust strip, the
   band, the form, the footer) are the sections above; this block adds only the story.

   THREE MODES, decided before first paint by the inline boot in <head>:
     - no class / "js" only (JavaScript off, reduced motion, or the motion script failing): the
       STATIC, linear page -- every piece in its final state, nothing moves. Every other mode starts
       from it.
     - "motion" on a desktop (>= 1100 x 620): the scrollytelling -- a sticky stage (the guide, layered
       parallax, the chapter rail) beside pinned chapter frames whose console renditions assemble with
       the scroll. Native scroll-driven animations inside @supports; "fb" (set by the script) when the
       browser has none.
     - "motion" + "io" (phones, tablets, and the desktop fallback): one-shot reveals as a chapter
       enters view.
   No style= attribute carries a value: every per-element number (a chapter's colour, a piece's place
   on its chapter's timeline, a scenery shape's position) is a class or a position rule below. */

.home .i { width: 1em; height: 1em; flex: none; display: inline-block; vertical-align: -.125em; }
.home .sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* chapter 1's "Ideas" anchor: a point at the chapter's top, never sticky */
.home .anchor { display: block; height: 0; }

/* each chapter's colour (the guide panel, the chapter number, the stage panel) */
.home .c-blue { --c: var(--blue); } .home .c-yellow { --c: var(--yellow); }
.home .c-green { --c: var(--green); } .home .c-red { --c: var(--red); }

/* ==========================================================================
   W2.a THE STATIC / LINEAR LAYOUT (the base of every mode)
   ========================================================================== */
.home .stage { display: none; }

/* ---- hero ---- */
.home .hero { padding-block: clamp(1.5rem, .5rem + 3vw, 3.5rem) var(--section-y); }
.home .hero .frame {
  width: 100%; max-width: var(--page-max); margin-inline: auto; padding-inline: var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center;
}
.home .hero-copy { display: grid; justify-items: start; gap: var(--sp-5); }
.home .hero h1 { font-size: var(--fs-h1); font-weight: 800; line-height: .98; letter-spacing: -.035em; margin-block: var(--sp-2) var(--sp-1); }
.home .h1-line { display: block; }
.home .hero h1 mark {
  color: var(--mark-ink); background: none; padding: 0 .06em;
  background-image: linear-gradient(transparent 58%, var(--mark-hl) 58%, var(--mark-hl) 92%, transparent 92%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone; border-radius: .12em;
}
.home .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-6); margin-top: var(--sp-2); }
.home .link-more { display: inline-flex; align-items: center; gap: .7rem; font: 700 1.0625rem/1.2 var(--font-display); text-decoration: none; color: var(--ink); padding-block: .4rem; }
.home .link-more > span:first-child { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; text-decoration-color: var(--blue); }
.home .link-more:hover > span:first-child { text-decoration-color: currentColor; }
.home .link-more-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 2.5px solid var(--card-edge); background: var(--ghost-bg); transition: transform .15s ease; }
.home .link-more:hover .link-more-icon { transform: translateY(3px); }
.home .small-print { font: 400 var(--fs-small)/1.5 var(--font-small); color: var(--ink-2); padding-left: var(--sp-4); border-left: 4px solid var(--yellow); max-width: 34em; }
@media (max-width: 900px) { .home .hero .frame { grid-template-columns: minmax(0, 1fr); } }

/* ---- the guide (the avatar, inline per chapter in this layout) ---- */
.home .guide { background: var(--c, var(--blue)); }
.home .guide-art.has-actor > img { visibility: hidden; }
.home .guide-hero { grid-template-columns: minmax(0, 1fr); justify-items: center; padding: var(--sp-6) var(--sp-5) var(--sp-5); border-radius: var(--r-band); }
.home .guide-hero .guide-art { width: min(100%, 380px); order: 2; }
.home .guide-hero .says { justify-self: center; order: 1; text-align: center; font-size: 1.1875rem; max-width: 22em; }
.home .guide-hero .says::before { left: 50%; top: auto; bottom: -11px; margin: 0 0 0 -9px; transform: rotate(-45deg); }

/* ---- the story ---- */
.home .chapters { padding-bottom: var(--section-y); overflow-x: clip; }
.home .story-head { width: 100%; max-width: var(--page-max); margin-inline: auto; padding-inline: var(--gutter); margin-bottom: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.home .story-title { font-size: var(--fs-h2); font-weight: 800; line-height: 1.04; letter-spacing: -.03em; }
.home .story-steps { display: flex; align-items: center; gap: .75rem; margin-top: var(--sp-4); font: 800 1rem/1 var(--font-display); color: var(--ink-2); max-width: 420px; }
.home .story-steps i { flex: 1; height: 0; border-top: 4px dashed var(--track); }
.home .chapter-list { list-style: none; width: 100%; max-width: var(--page-max); margin-inline: auto; padding-inline: var(--gutter); display: grid; gap: clamp(4rem, 3rem + 4vw, 7rem); }
.home .chapter .frame { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
.home .text { display: grid; gap: var(--sp-4); max-width: 44rem; }
.home .kicker { display: inline-flex; align-items: center; gap: .7rem; justify-self: start; }
.home .kick-num {
  display: inline-grid; place-items: center; min-width: 2.75rem; height: 2.75rem; padding: 0 .5rem; border-radius: 14px;
  background: var(--c); color: var(--on-color); border: 2.5px solid #16171B; box-shadow: 0 4px 0 #16171B;
  font: 800 1.125rem/1 var(--font-display);
}
.home .kick-label { font: 700 var(--fs-small)/1.2 var(--font-small); color: var(--ink-2); letter-spacing: .02em; }
.home .ch-title { font-size: clamp(2rem, 1.443rem + 2.286vw, 3.5rem); font-weight: 800; line-height: 1.02; letter-spacing: -.03em; }
.home .ch-body { font-size: var(--fs-lead); line-height: 1.55; color: var(--ink-2); max-width: 38em; }

@media (min-width: 900px) {
  .home .chapter .frame { grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); grid-template-areas: "guide text" "guide ui"; column-gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: start; }
  .home .chapter .text { grid-area: text; }
  .home .chapter .guide { grid-area: guide; grid-template-columns: minmax(0, 1fr); padding: var(--sp-5) var(--sp-4); }
  .home .chapter .guide .says { justify-self: stretch; }
  .home .chapter .guide .says::before { left: 50%; top: -11px; margin: 0 0 0 -9px; transform: rotate(135deg); }
  .home .chapter .frame > :is(.console, .ten) { grid-area: ui; }
}

/* ==========================================================================
   W2.b THE CONSOLE RENDITIONS (a fixed light product UI in both schemes; sample content tagged
   "Example"). Inside them the body's overflow-wrap:anywhere is wound back, so a table never breaks
   an ordinary word to fit a column (the renditions carry no unbreakable token).
   ========================================================================== */
.home .console {
  position: relative; width: 100%; max-width: 680px;
  background: var(--ui-bg); color: var(--ui-fg); color-scheme: light;
  border: 2.5px solid #16171B; border-radius: 26px; box-shadow: 0 8px 0 #16171B;
  padding: clamp(1.1rem, .8rem + 1vw, 1.6rem); padding-top: 1.75rem;
  font: 400 .9375rem/1.5 var(--font-text); overflow-wrap: break-word;
  display: grid; gap: .8rem; align-content: start;
}
.home .ex {
  position: absolute; top: -15px; left: 22px; z-index: 3;
  background: var(--yellow); color: #16171B; border: 2.5px solid #16171B; border-radius: 999px;
  padding: .1rem .75rem; font: 800 .8125rem/1.5 var(--font-display); letter-spacing: .06em; text-transform: uppercase;
}
.home .ui-head { display: flex; align-items: center; gap: .6rem; }
.home .ui-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #FFF1D6; color: #6E3F00; font-size: 17px; }
.home .ui-title { font: 650 1.0625rem/1.35 var(--font-text); color: var(--ui-fg); }
.home .ui-label { display: flex; align-items: center; gap: .4rem; font: 600 .9375rem/1.3 var(--font-text); }
.home .ui-label .i { color: var(--ui-muted); }
.home .ui-hint { font-size: .8125rem; color: var(--ui-muted); margin-top: -.3rem; }
.home .ui-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.home .chip { display: inline-flex; align-items: center; padding: .2rem .75rem; border-radius: 999px; border: 1px solid var(--ui-line-2); font: 600 .8125rem/1.5 var(--font-small); color: #33363D; background: #fff; }
.home .chip.on { background: #16171B; border-color: #16171B; color: #FFFFFF; }

.home .ubtn {
  display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .7rem; border-radius: 9px;
  font: 600 .8125rem/1.3 var(--font-text); color: #26282E; white-space: nowrap;
}
.home .ubtn.outline { border: 1px solid var(--ui-line-2); background: #fff; }
.home .ubtn.ghost { color: #33363D; }
.home .ubtn.ghost.pressed { background: #EEF0F3; }
.home .ubtn.solid { background: #16171B; color: #FFFFFF; padding: .5rem 1rem; border-radius: 10px; box-shadow: 0 3px 0 #000; font-weight: 700; }
.home .ubtn.sm { padding: .3rem .7rem; }
.home .ubtn .i { font-size: 15px; }

/* idea cards (the console's idea stream card) */
.home .icard {
  position: relative; background: #FFFFFF; color: var(--ui-fg);
  border: 1px solid var(--ui-line); border-radius: 14px; padding: .95rem 1rem;
  box-shadow: 0 1px 2px rgba(22, 23, 27, .06), 0 12px 28px -16px rgba(22, 23, 27, .4);
  display: grid; gap: .4rem; align-content: start;
}
.home .icard-title { font: 650 1.0625rem/1.3 var(--font-text); }
.home .icard-line { color: var(--ui-muted); }
.home .icard .ifield { color: var(--ui-muted); font-size: .875rem; line-height: 1.45; }
.home .icard .ifield b { color: var(--ui-fg); font-weight: 600; }
.home .lane { justify-self: start; display: inline-flex; align-items: center; gap: .4rem; padding: .1rem .6rem; border-radius: 999px; font: 700 .75rem/1.6 var(--font-small); }
.home .lane::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.home .lane-fresh { background: #D6F5E8; color: #00563A; }
.home .lane-local { background: #FFE3B8; color: #6E3F00; }
.home .lane-spin { background: #ECEDEF; color: #33363D; }
.home .badges { display: flex; flex-wrap: wrap; gap: .3rem; padding-top: .15rem; }
.home .badge { display: inline-flex; padding: .05rem .55rem; border-radius: 7px; background: #EEF0F3; color: #33363D; font: 600 .75rem/1.6 var(--font-small); }
.home .badge.outline { background: #fff; border: 1px solid var(--ui-line-2); }
.home .ui-actions { display: flex; flex-wrap: wrap; gap: .25rem; padding-top: .2rem; }

.home .deck { position: relative; padding: 2.4rem 3.2rem 0 0; margin-top: .2rem; }
.home .deck .back { position: absolute; top: .3rem; right: 0; width: 70%; opacity: 1; }
.home .deck .b1 { rotate: 4deg; top: 1.1rem; right: 1.4rem; }
.home .deck .b2 { rotate: 8deg; top: 0; right: 0; }
.home .deck .front { rotate: -1.5deg; }

/* choosing (ch 2) */
.home .beat { display: grid; gap: .4rem; border: 1px solid var(--ui-line); border-radius: 12px; padding: .7rem .8rem; background: #fff; }
.home .beat-label { display: flex; align-items: center; gap: .4rem; font-weight: 600; }
.home .beat-label .i { color: var(--ui-muted); }
.home .beat-row { display: flex; gap: .5rem; align-items: center; }
.home .field-input { flex: 1; min-width: 0; border: 1px solid var(--ui-line-2); border-radius: 8px; padding: .3rem .6rem; color: var(--ui-muted); font-size: .875rem; background: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home .mini-cards { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.home .mcard { background: #fff; border: 1px solid var(--ui-line); border-radius: 12px; padding: .75rem; display: grid; gap: .35rem; align-content: start; box-shadow: 0 8px 20px -14px rgba(22, 23, 27, .45); }
.home .mcard .icard-title { font-size: .9375rem; }
.home .mcard .icard-line { font-size: .8125rem; line-height: 1.4; }
.home .sel { display: flex; align-items: center; gap: .45rem; font-size: .75rem; color: var(--ui-muted); padding-top: .2rem; }
.home .box { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--ui-line-2); background: #fff; color: #fff; font-size: 13px; }
.home .box.on { background: #16171B; border-color: #16171B; }
.home .mslot { border: 1.5px dashed var(--ui-line-2); border-radius: 12px; display: grid; }
.home .mcard.away { background: var(--ui-2); border-style: dashed; box-shadow: none; }
.home .batch-bar { display: flex; justify-content: flex-end; border-top: 1px solid var(--ui-line); padding-top: .7rem; }

/* the study + the plan (the console's best-of matrix) */
.home .field-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.home .fchip { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .45rem .15rem .7rem; border: 1px solid var(--ui-line-2); border-radius: 999px; background: #fff; font: 600 .8125rem/1.5 var(--font-small); }
.home .fchip .i { color: var(--ui-muted); font-size: 13px; }
.home .mx { position: relative; overflow: hidden; border: 1px solid var(--ui-line); border-radius: 12px; background: var(--ui-2); }
.home .mx table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .8125rem; }
.home .mx thead th { text-align: left; font: 600 .75rem/1.3 var(--font-small); color: var(--ui-muted); padding: .5rem .5rem; border-bottom: 1px solid var(--ui-line); }
.home .mx tbody th { text-align: left; font-weight: 400; padding: .55rem .5rem; border-bottom: 1px solid var(--ui-line); vertical-align: top; }
.home .mx td { padding: .55rem .5rem; border-bottom: 1px solid var(--ui-line); vertical-align: top; }
.home .mx tbody tr:last-child > * { border-bottom: 0; }
.home .feat { display: block; font: 600 .875rem/1.35 var(--font-text); color: var(--ui-fg); }
.home .sub { display: block; color: var(--ui-muted); font-size: .75rem; }
.home .pills { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .3rem; }
.home .pill { display: inline-flex; padding: 0 .5rem; border-radius: 999px; background: #EEF0F3; color: #33363D; font: 600 .6875rem/1.7 var(--font-small); white-space: nowrap; }
.home .mx-study .pill { margin-top: .25rem; }
.home .pill.v-adopt { background: #EEF0F3; color: #33363D; }
.home .pill.v-adapt { background: #D9F1FD; color: #00507A; }
.home .pill.v-ours { background: #FFE3B8; color: #6E3F00; }
.home .pill.good { background: #D6F5E8; color: #00563A; }
.home .pill.outline { background: transparent; border: 1px solid var(--ui-line-2); color: #4A4C55; }
.home .dots { position: relative; display: inline-block; width: 46px; height: 10px; vertical-align: middle; }
.home .dots::before, .home .dots::after { content: ""; position: absolute; left: 0; top: 0; height: 10px; background: radial-gradient(circle at 5px 5px, var(--dc) 4px, transparent 4.6px) 0 0 / 12px 10px repeat-x; }
.home .dots::before { --dc: var(--ui-dot-off); width: 46px; }
.home .dots::after { --dc: #16171B; width: 0; transform-origin: left center; }
.home .dots[data-s="1"]::after { width: 12px; } .home .dots[data-s="2"]::after { width: 24px; } .home .dots[data-s="3"]::after { width: 36px; } .home .dots[data-s="4"]::after { width: 46px; }
.home .mx-head { font: 650 .9375rem/1.35 var(--font-text); padding: .7rem .7rem 0; }
.home .mx-sum { color: var(--ui-muted); font-size: .8125rem; padding: .1rem .7rem .55rem; border-bottom: 1px solid var(--ui-line); }
.home .keep { float: left; display: inline-grid; place-items: center; width: 18px; height: 18px; margin: .05rem .55rem 0 0; border-radius: 5px; border: 1.5px solid var(--ui-line-2); background: #fff; color: #fff; font-size: 13px; }
.home .keep.on { background: #16171B; border-color: #16171B; }
.home .mx-plan th[scope="row"] .feat, .home .mx-plan th[scope="row"] .sub, .home .mx-plan th[scope="row"] .pills { margin-left: 1.65rem; }
.home tr.off .feat { color: var(--ui-muted); font-weight: 500; }
.home .scan { display: none; }

/* gates (the console's decision cards) */
.home .gate { display: grid; gap: .6rem; }
.home .gate-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.home .gate-kind { display: inline-flex; padding: .05rem .6rem; border-radius: 999px; background: #EEF0F3; color: #33363D; font: 700 .75rem/1.7 var(--font-small); letter-spacing: .02em; }
.home .gate-title { font: 650 1rem/1.35 var(--font-text); }
.home .gate-lead { color: var(--ui-muted); font-size: .875rem; }
.home .gate-foot { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.home .ask {
  justify-self: end; max-width: 80%;
  background: #16171B; color: #FFFFFF; border-radius: 18px 18px 4px 18px; padding: .55rem .9rem; font: 500 .9375rem/1.4 var(--font-text);
}

/* brand + prototypes */
.home .options, .home .protos { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; }
.home .opt, .home .proto {
  position: relative; background: #fff; border: 1px solid var(--ui-line); border-radius: 14px; padding: .75rem; display: grid; gap: .4rem; align-content: start;
  box-shadow: 0 10px 22px -16px rgba(22, 23, 27, .5); rotate: var(--r0, 0deg);
}
.home .opt.picked, .home .proto.picked { border: 2px solid #16171B; box-shadow: 0 5px 0 #16171B; }
.home .logo { width: 100%; height: auto; background: var(--ui-2); border-radius: 10px; padding: .55rem; }
.home .opt-name, .home .proto-name { font: 650 .9375rem/1.3 var(--font-text); }
.home .swatches { display: flex; gap: .3rem; }
.home .swatches i { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #16171B; }
.home .opt-fact { font-size: .75rem; color: var(--ui-muted); }
.home .opt-fact b { color: var(--ui-fg); font-weight: 600; }
.home .picked-badge { position: absolute; top: -10px; right: -10px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--green); color: #16171B; border: 2.5px solid #16171B; font-size: 17px; }
.home .proto-win { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 10px; border: 1.5px solid #16171B; background: #fff; overflow: hidden; }
.home .proto-win i { position: absolute; display: block; border-radius: 4px; background: #D9DCE2; }
.home .proto-win .bar { left: 0; right: 0; top: 0; height: 12%; border-radius: 0; background: #EEF0F3; border-bottom: 1.5px solid #16171B; }
.home .proto-win .hero-a { left: 8%; right: 8%; top: 20%; height: 32%; background: #FFE3B8; }
.home .proto-win .l1 { left: 8%; width: 60%; top: 58%; height: 7%; background: #16171B; }
.home .proto-win .l2 { left: 8%; width: 44%; top: 70%; height: 6%; }
.home .proto-win .btn-a { left: 8%; width: 30%; top: 82%; height: 9%; background: var(--yellow); border-radius: 99px; }
.home .proto-win .hero-b { left: 0; right: 0; top: 12%; height: 36%; border-radius: 0; background: #D9F1FD; }
.home .proto-win .cards-b { left: 8%; right: 8%; top: 56%; height: 22%; background: repeating-linear-gradient(90deg, #EEF0F3 0 30%, transparent 30% 35%); }
.home .proto-win .btn-b { left: 34%; width: 32%; top: 84%; height: 8%; background: #16171B; border-radius: 99px; }
.home .proto-win .side-c { left: 0; top: 12%; bottom: 0; width: 26%; border-radius: 0; background: #D6F5E8; }
.home .proto-win .c.l1 { left: 32%; width: 50%; top: 22%; }
.home .proto-win .c.l2 { left: 32%; width: 38%; top: 34%; }
.home .proto-win .grid-c { left: 32%; right: 6%; top: 48%; bottom: 8%; background: repeating-linear-gradient(0deg, #EEF0F3 0 40%, transparent 40% 50%); }
.home .proto-link { display: flex; align-items: center; gap: .3rem; font-size: .75rem; color: #00507A; font-weight: 600; }

/* building (the console's build stages and the private preview) */
.home .stages { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: relative; }
.home .st { display: grid; justify-items: center; gap: .3rem; position: relative; font: 600 .8125rem/1.3 var(--font-small); color: #33363D; }
.home .st:not(:last-child)::after { content: ""; position: absolute; top: 13px; left: calc(50% + 17px); right: calc(-50% + 17px); height: 3px; border-radius: 2px; background: #16171B; }
.home .st-dot { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 2.5px solid #16171B; background: #16171B; color: #fff; font-size: 15px; }
.home .st.s-pub .st-dot { background: var(--blue); }
.home .st.s-pub .st-dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #fff; }
.home .verbs { position: relative; min-height: 1.6rem; }
.home .verb { display: flex; align-items: center; gap: .5rem; color: var(--ui-muted); font-size: .875rem; }
.home .verb.v1, .home .verb.v2 { display: none; }
.home .sdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #9AA0AA; flex: none; }
.home .sdot.live { background: var(--blue); box-shadow: 0 0 0 3px #D9F1FD; }
.home .sdot.good { background: var(--green); }
.home .preview { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .65rem .75rem; border: 1px solid var(--ui-line); border-radius: 12px; background: var(--ui-2); }
.home .pv-label { display: inline-flex; align-items: center; gap: .35rem; font: 600 .8125rem/1.3 var(--font-small); color: var(--ui-muted); }
.home .pv-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .6rem; border-radius: 999px; background: #16171B; color: #fff; font: 700 .75rem/1.6 var(--font-small); }
.home .gate.accept { border-top: 1px solid var(--ui-line); padding-top: .75rem; }

/* going live (the console's publication card) */
.home .pub { display: grid; gap: .5rem; border: 1px solid var(--ui-line); border-radius: 12px; padding: .75rem; }
.home .pub-head { display: flex; align-items: center; gap: .4rem; font-weight: 600; }
.home .pub-head .i { color: #00507A; }
.home .name-field { display: flex; align-items: center; border: 1px solid var(--ui-line-2); border-radius: 8px; padding: .3rem .6rem; font: 500 1rem/1.4 var(--font-mono); }
.home .caret { display: inline-block; width: 2px; height: 1.1em; margin-left: 1px; background: #16171B; }
.home .pub-url { font-size: .8125rem; color: var(--ui-muted); }
.home .pub-url .mono { color: var(--ui-fg); }
.home .live-callout { border-left: 4px solid var(--green); background: #E9FAF2; border-radius: 10px; padding: .6rem .8rem; display: grid; gap: .2rem; }
.home .lc-head { display: flex; align-items: center; gap: .4rem; font-weight: 700; color: #00563A; }
.home .lc-url { font-size: clamp(1rem, .9rem + .5vw, 1.25rem); font-weight: 700; overflow-wrap: anywhere; }
.home .browser { display: block; border: 2px solid #16171B; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 6px 0 #16171B; }
.home .br-bar { display: flex; align-items: center; gap: .3rem; padding: .4rem .6rem; background: #F1EEE8; border-bottom: 2px solid #16171B; }
.home .br-bar > i { width: 9px; height: 9px; border-radius: 50%; background: #16171B; opacity: .5; }
.home .br-url { margin-left: .5rem; padding: .05rem .7rem; border-radius: 999px; background: #fff; font: 600 .75rem/1.6 var(--font-mono); color: #4A4C55; }
.home .br-page { position: relative; display: block; height: 120px; background: linear-gradient(#FFF1D6, #FFF1D6) 0 0 / 100% 58% no-repeat; }
.home .br-page i { position: absolute; display: block; border-radius: 6px; }
.home .bp-logo { left: 6%; top: 14%; width: 34px; height: 34px; background: var(--yellow); border: 2px solid #16171B; border-radius: 50% !important; }
.home .bp-h1 { left: 6%; top: 52%; width: 46%; height: 12px; background: #16171B; }
.home .bp-h2 { left: 6%; top: 68%; width: 34%; height: 9px; background: #C9CDD4; }
.home .bp-btn { left: 6%; top: 82%; width: 22%; height: 12px; background: var(--yellow); border-radius: 99px !important; }
.home .bp-form { right: 6%; top: 16%; width: 34%; height: 72%; background: #fff; border: 2px solid #16171B; background-image: linear-gradient(#EEF0F3, #EEF0F3), linear-gradient(#EEF0F3, #EEF0F3), linear-gradient(var(--yellow), var(--yellow)); background-size: 80% 16%, 80% 16%, 50% 16%; background-position: 50% 16%, 50% 46%, 18% 80%; background-repeat: no-repeat; }

/* making it better */
.home .release { display: grid; gap: .45rem; border-left: 4px solid var(--blue); background: #EAF7FE; border-radius: 10px; padding: .6rem .8rem; }
.home .rl-head { font-weight: 700; color: #00507A; }
.home .upgrades { border: 1px solid var(--ui-line); border-radius: 12px; padding: .7rem .8rem; }
.home .up-list { list-style: none; display: grid; gap: .35rem; font-size: .875rem; }
.home .up-list li { display: flex; align-items: center; gap: .55rem; }
.home .radio { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--ui-line-2); background: #fff; flex: none; }
.home .radio.on { border: 5px solid #16171B; }

/* the portfolio (the console's portfolio table) */
.home .strip { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .55rem .75rem; border: 1px solid var(--ui-line); border-radius: 12px; background: var(--ui-2); }
.home .strip-name { font-weight: 650; }
.home .strip-count { display: inline-grid; place-items: center; min-width: 1.5rem; padding: 0 .4rem; border-radius: 999px; background: #FFE3B8; color: #6E3F00; font: 800 .8125rem/1.6 var(--font-small); }
.home .strip-unit { color: var(--ui-muted); font-size: .8125rem; }
.home .strip-link { margin-left: auto; display: inline-flex; align-items: center; gap: .3rem; font-size: .8125rem; font-weight: 600; color: #00507A; }
.home .pf { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .875rem; }
.home .pf thead th { text-align: left; font: 600 .75rem/1.3 var(--font-small); color: var(--ui-muted); padding: .4rem .5rem; border-bottom: 1px solid var(--ui-line); }
.home .pf td, .home .pf tbody th { text-align: left; padding: .5rem .5rem; border-bottom: 1px solid var(--ui-line); vertical-align: top; font-weight: 400; }
.home .pf .g-head th { padding: .55rem .5rem .25rem; font: 700 .6875rem/1.3 var(--font-small); letter-spacing: .06em; text-transform: uppercase; color: #4A4C55; background: var(--ui-2); border-bottom: 0; }
.home .vname { display: block; font-weight: 650; }
.home .vprod { display: block; font-size: .75rem; color: var(--ui-muted); }
.home .pf .sdot { margin-right: .4rem; vertical-align: .05em; }
.home .sep { color: var(--ui-muted); }
.home .dlink { color: #33363D; white-space: nowrap; }
.home .pf .c-month { text-align: right; }
.home .icard.spin { margin-left: auto; width: min(100%, 360px); rotate: var(--r0, 0deg); }
.home .spin-from { font-size: .75rem; color: var(--ui-muted); }

/* ten tries (ch 11) */
.home .ten { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(.6rem, .4rem + .8vw, 1.1rem); max-width: 620px; padding: .5rem 0 1rem; }
.home .ten .t { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 22%; border: 3px dashed var(--track); color: #16171B; font-size: clamp(30px, 4vw, 56px); }
.home .ten .t::before { content: ""; position: absolute; inset: -3px; border-radius: inherit; background: var(--c2); border: 3px solid #16171B; opacity: 0; }
.home .ten .t.kept { border: 3px solid #16171B; box-shadow: 0 6px 0 #16171B; scale: 1.07; }
.home .ten .t.kept::before { opacity: 1; inset: 0; border: 0; }
.home .ten .t .i { position: relative; }

/* narrow screens: no sideways scroll, the matrix as stacked rows (the console's own narrow layout) */
@media (max-width: 700px) {
  .home .mini-cards, .home .options, .home .protos { grid-template-columns: minmax(0, 1fr); }
  .home .options .opt, .home .protos .proto { grid-template-columns: 96px minmax(0, 1fr); column-gap: .75rem; align-items: center; }
  .home .options .logo, .home .protos .proto-win { grid-row: 1 / span 3; }
  .home .deck { padding-right: 1.6rem; }
  .home .icard.spin { width: 100%; }
}
@media (max-width: 640px) {
  .home .mx thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .home .mx table, .home .mx tbody { display: block; }
  .home .mx tbody tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .25rem .5rem; padding: .6rem .6rem; border-bottom: 1px solid var(--ui-line); }
  .home .mx tbody tr:last-child { border-bottom: 0; }
  .home .mx tbody th, .home .mx td { border: 0; padding: 0; }
  .home .mx tbody th { grid-column: 1 / -1; }
  .home .mx td { display: grid; gap: .15rem; font-size: .6875rem; color: var(--ui-muted); }
  .home .mx td::before { content: attr(data-l); }
  .home .dots { width: 40px; }
  .home .pf .c-month { display: none; } /* the console's own rule: the month column gives way below 40rem */
  .home .stages .st { font-size: .6875rem; }
}

/* ==========================================================================
   W2.c DOORS, TRUST, THE CLOSING BAND (the shared components, plus the story's own touches)
   ========================================================================== */
.home .doors { padding-block: var(--section-y); }
.home .door-grid { margin-top: clamp(2rem, 1.4rem + 2vw, 3.5rem); }
.home .trust { padding-bottom: clamp(6rem, 4rem + 6vw, 10rem); }

.home .closing-band { --peek-w: clamp(150px, 110px + 7vw, 230px); }
.home .closing-band::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--red); z-index: -1; }
/* the guide peeks over the band's top edge: the band (its ::before) is drawn over the lower half */
.home .peek { position: absolute; right: clamp(2rem, 8vw, 9rem); top: calc(var(--peek-w) * -.68); width: var(--peek-w); aspect-ratio: 64 / 60; z-index: -2; }
.home .peek > img, .home .peek > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.home .peek.has-actor > img { visibility: hidden; }
.home .peek:not(.has-actor) > canvas, .home .stage:not(.live) .actor > canvas { display: none; }
.home .peek-says {
  position: absolute; right: calc(clamp(2rem, 8vw, 9rem) + var(--peek-w) * .86); top: calc(var(--peek-w) * -.56);
  background: #FFFFFF; color: #16171B; border: 2.5px solid #16171B; border-radius: 18px; box-shadow: 0 4px 0 #16171B;
  padding: .45rem .9rem; font: 700 1rem/1.3 var(--font-display); white-space: nowrap;
}
.home .peek-says::after { content: ""; position: absolute; right: -10px; top: 50%; width: 16px; height: 16px; margin-top: -8px; background: #fff; border-right: 2.5px solid #16171B; border-top: 2.5px solid #16171B; transform: rotate(45deg); border-radius: 0 4px 0 0; }
.home .reserve { display: grid; gap: var(--sp-4); }
.home .reserve .no-js a { color: inherit; font-weight: 700; }
.home .band-note { font: 600 var(--fs-small)/1.5 var(--font-small); }
@media (max-width: 960px) {
  .home .closing-band { padding-top: clamp(3.5rem, 2.5rem + 4vw, 5rem); }
  .home .peek { right: clamp(1.5rem, 6vw, 4rem); }
  .home .peek-says { right: calc(clamp(1.5rem, 6vw, 4rem) + var(--peek-w) * .86); }
}
@media (max-width: 480px) { .home .peek-says { right: auto; left: 1rem; top: calc(var(--peek-w) * -.42); } .home .peek-says::after { display: none; } }

/* ==========================================================================
   W2.d MOTION -- shared keyframes (each plays once: by the scroll, or once on entering view).
   k-up, k-pop and k-in are the site's (section 6).
   ========================================================================== */
@keyframes k-deal  { from { opacity: 0; translate: 180px 70px; rotate: 18deg; } }
@keyframes k-wipe  { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes k-type  { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes k-away  { from { opacity: 1; } to { opacity: 0; translate: -120% 20px; rotate: -14deg; } }
@keyframes k-press { 0%, 100% { translate: 0 0; } 50% { translate: 0 3px; box-shadow: 0 0 0 #000; } }
@keyframes k-fillx { from { scale: 0 1; } }
@keyframes k-band  { 0% { opacity: 0; } 12%, 88% { opacity: 1; } 100% { opacity: 0; } }
@keyframes k-ghost { from { opacity: 1; } to { opacity: 0; } }
@keyframes k-lift  { from { scale: 1; box-shadow: 0 0 0 #16171B; } }
@keyframes k-scan  { 0% { translate: -100% 0; opacity: 0; } 10%, 85% { opacity: 1; } 100% { translate: 460% 0; opacity: 0; } }
@keyframes k-st    { 0% { background: #FFFFFF; border-color: #C9CDD4; color: transparent; } 12%, 88% { background: var(--blue); border-color: #16171B; color: transparent; } 100% { background: #16171B; color: #FFFFFF; } }
@keyframes k-stp   { 0% { background: #FFFFFF; border-color: #C9CDD4; } 100% { background: var(--blue); border-color: #16171B; } }
@keyframes k-line  { from { scale: 0 1; } }
@keyframes k-drift { from { translate: 0 var(--from); } to { translate: 0 var(--to); } }
@keyframes k-vis   { 0% { visibility: hidden; opacity: 0; } 8% { visibility: visible; opacity: 1; } 92% { visibility: visible; opacity: 1; } 100% { visibility: hidden; opacity: 0; } }
@keyframes k-scatter { to { translate: var(--tx) var(--ty); rotate: var(--tr); opacity: 0; } }
@keyframes k-fill-y { from { scale: 1 0; } }
@keyframes k-frame-out { to { opacity: .35; scale: .97; } }
@keyframes k-hero-cast { from { scale: 1.1; } }
@keyframes k-cast-up { from { translate: 0 -96px; } }

@media (prefers-reduced-motion: no-preference) {
  /* the hero's entrance on load (every mode with motion) */
  .motion .home .hero .r { animation: k-up .75s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 90ms + 120ms); }
}

/* ---- one-shot reveals ("io": phones, tablets, and the desktop fallback): the script adds .in to a
   [data-reveal] block once, when it enters view; each piece plays once, in order ---- */
@media (prefers-reduced-motion: no-preference) {
  .motion.io .home [data-reveal]:not(.hero):not(.in) :is(.r, .deal, .pop, .rise, .wipe, .says) { opacity: 0; }
  .motion.io .home [data-reveal].in:not(.hero) .r { animation: k-up .7s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 90ms + var(--a, 0) * 22ms); }
  .motion.io .home [data-reveal].in .deal { animation: k-deal .8s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(200ms + var(--a, 0) * 22ms); }
  .motion.io .home [data-reveal].in .rise { animation: k-up .7s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(200ms + var(--a, 0) * 22ms); }
  .motion.io .home [data-reveal].in .pop { animation: k-pop .55s cubic-bezier(.3, 1.4, .5, 1) both; animation-delay: calc(200ms + var(--a, 0) * 22ms); }
  .motion.io .home [data-reveal].in .wipe { animation: k-wipe .6s ease both; animation-delay: calc(200ms + var(--a, 0) * 22ms); }
  .motion.io .home [data-reveal].in .typed { animation: k-type .9s steps(8, end) both; animation-delay: .5s; }
  .motion.io .home [data-reveal].in .says { animation: k-pop .55s cubic-bezier(.3, 1.4, .5, 1) both; animation-delay: .35s; }
  .motion.io .home [data-reveal].in .ten .t:not(.kept)::before { animation: k-ghost .6s ease both; animation-delay: calc(900ms + var(--a, 0) * 22ms); }
  .motion.io .home [data-reveal].in .dots::after { animation: k-fillx .6s ease both; animation-delay: calc(400ms + var(--a, 0) * 22ms); }
}

/* ==========================================================================
   W2.e MOTION -- THE DESKTOP SCROLLYTELLING (a sticky stage + pinned chapter frames)
   ⚠ dvh, never vh, for every height that must hold the viewport: a vh height clips at 200 % zoom.
   ========================================================================== */
@media (min-width: 1100px) and (min-height: 620px) {
  .motion .home .story {
    display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 13fr); grid-template-rows: auto auto;
  }
  .motion .home .stage {
    display: grid; grid-template-columns: minmax(0, 1fr) 76px; grid-column: 1; grid-row: 1 / 3;
    position: sticky; top: 0; height: 100dvh; align-self: start;
    padding: 20px 0 20px var(--gutter);
  }
  .motion .home .hero { grid-column: 2; grid-row: 1; padding: 0; }
  .motion .home .chapters { grid-column: 2; grid-row: 2; padding-bottom: 0; }
  .motion .home .guide { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); padding: 0; }

  /* the hero, in the content column */
  .motion .home .hero .frame { display: flex; align-items: center; min-height: calc(100dvh - 96px); max-width: none; padding: 2rem var(--gutter) 3rem clamp(1.5rem, 3vw, 3rem); }
  .motion .home .hero h1 { font-size: clamp(3.25rem, 1.2rem + 3.3vw, 5rem); }

  .motion .home .story-head { display: flex; flex-direction: column; justify-content: center; min-height: 56dvh; margin: 0; max-width: none; padding: 0 var(--gutter) 0 clamp(1.5rem, 3vw, 3rem); }
  .motion .home .chapter-list { padding: 0; max-width: none; gap: 0; }
  .motion .home .chapter { min-height: 170dvh; scroll-margin-top: -60dvh; }
  .motion .home .chapter > .anchor { scroll-margin-top: -60dvh; }
  .motion .home .chapter .frame {
    position: sticky; top: 0; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; align-items: stretch;
    gap: clamp(1.25rem, 3dvh, 2rem); padding: 56px var(--gutter) 56px clamp(1.5rem, 3vw, 3rem);
  }
  .motion .home .chapter .text { gap: clamp(.6rem, 1.6dvh, 1rem); }
  .motion .home .ch-body { font-size: clamp(1.0625rem, .9rem + .35vw, 1.25rem); }
  .motion .home .console { max-width: 700px; }

  /* short desktop viewports: a tighter frame */
  @media (max-height: 860px) {
    .motion .home .chapter .frame { padding-block: 28px; gap: 1rem; }
    .motion .home .ch-title { font-size: clamp(2rem, 1rem + 2.4vw, 2.75rem); }
    .motion .home .kick-num { height: 2.25rem; min-width: 2.25rem; font-size: 1rem; }
    .motion .home .console { padding: 1rem 1.1rem; padding-top: 1.4rem; gap: .6rem; }
    .motion .home .icard { padding: .75rem .85rem; gap: .3rem; }
  }

  /* ---- the stage ---- */
  .home .stage-panel {
    --sc: var(--blue);
    position: relative; overflow: hidden; border-radius: 46px;
    background: var(--sc); background: oklch(from var(--sc) l c h); /* oklch: the change between chapters stays vivid */
    transition: background-color .8s cubic-bezier(.4, 0, .2, 1);
  }
  .home .scenery, .home .sc, .home .sc .d { position: absolute; inset: 0; }
  .home .sc .s { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: auto; rotate: var(--r, 0deg); }
  .home .sc .far .s { opacity: .2; }
  .home .numeral { position: absolute; left: 30px; top: 24px; height: 1em; overflow: hidden; font: 800 clamp(4.5rem, 10dvh, 7.5rem)/1 var(--font-display); letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 3px rgba(22, 23, 27, .5); }
  .home .numeral-col { display: flex; flex-direction: column; transform: translateY(calc(var(--n, 0) * -1em)); transition: transform .7s cubic-bezier(.5, 1.5, .4, 1); }
  .home .numeral-col span { height: 1em; }

  .home .tiles { position: absolute; top: 30px; right: 30px; display: grid; grid-template-columns: repeat(5, 46px); gap: 10px; }
  .home .tiles i { width: 46px; height: 46px; border-radius: 14px; background: rgba(255, 255, 255, .32); }
  .home .tiles i.kept { background: var(--green); border: 3px solid #16171B; }
  .home .tiles i.kept:nth-child(5) { background: var(--red); }
  .home .tiles i.lift { background: none; border: 3px dashed #fff; }

  .home .props, .home .prop { position: absolute; inset: 0; pointer-events: none; }
  .home .prop > * { position: absolute; opacity: 0; translate: 0 40px; scale: .7; transition: opacity .45s ease, translate .7s cubic-bezier(.3, 1.5, .5, 1), scale .7s cubic-bezier(.3, 1.5, .5, 1); }
  .home .stage[data-active="ideas"] .prop-ideas > *, .home .stage[data-active="study"] .prop-study > *,
  .home .stage[data-active="live"] .prop-live > *, .home .stage[data-active="many"] .prop-many > * { opacity: 1; translate: 0 0; scale: 1; }
  .home .prop > :nth-child(2) { transition-delay: .08s; } .home .prop > :nth-child(3) { transition-delay: .16s; } .home .prop > :nth-child(4) { transition-delay: .24s; }
  .home .prop-ideas svg { width: 24%; }
  .home .prop-ideas svg:nth-child(1) { left: 3%; top: 56%; rotate: -12deg; }
  .home .prop-ideas svg:nth-child(2) { right: 3%; top: 52%; rotate: 10deg; }
  .home .prop-ideas svg:nth-child(3) { right: 6%; top: 70%; rotate: -5deg; }
  .home .prop-study span { padding: .3rem .8rem; border-radius: 999px; background: #fff; color: #16171B; border: 2.5px solid #16171B; box-shadow: 0 3px 0 #16171B; font: 800 .9375rem/1.2 var(--font-display); }
  .home .prop-study span:nth-child(1) { left: 4%; top: 55%; rotate: -6deg; } .home .prop-study span:nth-child(2) { right: 4%; top: 52%; rotate: 5deg; }
  .home .prop-study span:nth-child(3) { left: 3%; top: 72%; rotate: 4deg; } .home .prop-study span:nth-child(4) { right: 3%; top: 70%; rotate: -4deg; }
  .home .prop-live .url-pill { left: 50%; top: 19%; margin-left: -9rem; width: 18rem; justify-content: center; display: flex; align-items: center; gap: .5rem; padding: .55rem 1rem; border-radius: 999px; background: #fff; color: #16171B; border: 3px solid #16171B; box-shadow: 0 5px 0 #16171B; font: 800 1.0625rem/1.2 var(--font-mono); }
  .home .prop-many img { width: 25%; height: auto; bottom: 4.5%; }
  .home .prop-many img:nth-child(1) { left: 2%; } .home .prop-many img:nth-child(2) { right: 2%; } .home .prop-many img:nth-child(3) { left: 5%; bottom: 25%; width: 17%; }

  .home .cast { position: absolute; left: 0; right: 0; bottom: 3.5%; display: flex; flex-direction: column; align-items: center; }
  /* Sized to the room under the tiles at scroll 0, where the cast is scaled 1.1 and lifted 96px (2026-10-15;
     the derivation: tests/test_website_browser_1490.py, W2 FIX). */
  .home .actor { position: relative; width: min(100% - 40px, 480px, 93.5dvh - 375px); aspect-ratio: 64 / 60; }
  .home .actor > img, .home .actor > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
  .home .stage.live .actor > img { visibility: hidden; }
  .home .floor { position: absolute; left: 27%; right: 27%; bottom: 0; height: 7%; border-radius: 50%; background: rgba(22, 23, 27, .2); }
  /* ⭐ The bubble sits OUT of the cast's flow, anchored above the actor by a translate (production fix,
     brief 1490 W2: in flow, a line that wraps to one more or one fewer row moved the whole cast and the
     guide's canvas with it -- three such layout shifts in a scroll were 0.012 CLS, over the 0.01
     budget). It is drawn exactly where it was: centred, its foot .25rem over the actor's top. */
  .home .bubble {
    position: absolute; left: 50%; top: .25rem; translate: -50% -100%; width: max-content; max-width: min(400px, 100% - 56px);
    background: #FFFFFF; color: #16171B; border: 3px solid #16171B; border-radius: 24px; box-shadow: 0 6px 0 #16171B;
    padding: .85rem 1.2rem; font: 750 clamp(1.0625rem, .8rem + .5vw, 1.3125rem)/1.3 var(--font-display); text-align: center;
  }
  .home .bubble::after { content: ""; position: absolute; left: 50%; bottom: -12px; width: 20px; height: 20px; margin-left: -10px; background: #FFFFFF; border-right: 3px solid #16171B; border-bottom: 3px solid #16171B; transform: rotate(45deg); border-radius: 0 0 5px 0; }
  .home .bubble.say { animation: k-pop .5s cubic-bezier(.3, 1.4, .5, 1) both; }

  /* ---- the chapter rail ---- */
  .home .rail { display: flex; align-items: center; justify-content: center; }
  .home .rail ol { list-style: none; position: relative; display: flex; flex-direction: column; justify-content: space-between; height: min(74dvh, 640px); }
  .home .rail ol::before, .home .rail ol::after { content: ""; position: absolute; left: 50%; top: 16px; bottom: 16px; margin-left: -2px; }
  .home .rail ol::before { border-left: 4px dashed var(--track); }
  .home .rail ol::after { border-left: 4px solid var(--ink); transform-origin: top; scale: 1 var(--sp, 0); }
  .home .rail li { position: relative; z-index: 1; }
  .home .rail a { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--bg); color: var(--ink); border: 3px solid var(--ink); font: 800 .8125rem/1 var(--font-display); text-decoration: none; transition: scale .3s cubic-bezier(.3, 1.5, .5, 1), background-color .3s ease; }
  .home .rail li.passed a { background: var(--ink); color: var(--bg); }
  .home .rail li.now a { background: var(--now, var(--yellow)); color: #16171B; border-color: #16171B; scale: 1.35; box-shadow: 0 3px 0 #16171B; }
  .home .rail a:hover { scale: 1.2; }
}

/* ---- the native scroll-driven layer (where supported): it advances ONLY with scroll ---- */
@supports (animation-timeline: view()) and (timeline-scope: none) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 1100px) and (min-height: 620px) {
    .motion:not(.fb) .home .story { view-timeline: --story block; timeline-scope: --hero, --c1, --c2, --c3, --c4, --c5, --c6, --c7, --c8, --c9, --c10, --c11; }
    .motion:not(.fb) .home .hero { view-timeline: --hero block; }
    .motion:not(.fb) .home #ch-1 { view-timeline: --c1 block; } .motion:not(.fb) .home #ch-2 { view-timeline: --c2 block; } .motion:not(.fb) .home #ch-3 { view-timeline: --c3 block; }
    .motion:not(.fb) .home #ch-4 { view-timeline: --c4 block; } .motion:not(.fb) .home #ch-5 { view-timeline: --c5 block; } .motion:not(.fb) .home #ch-6 { view-timeline: --c6 block; }
    .motion:not(.fb) .home #ch-7 { view-timeline: --c7 block; } .motion:not(.fb) .home #ch-8 { view-timeline: --c8 block; } .motion:not(.fb) .home #ch-9 { view-timeline: --c9 block; }
    .motion:not(.fb) .home #ch-10 { view-timeline: --c10 block; } .motion:not(.fb) .home #ch-11 { view-timeline: --c11 block; }

    /* the pieces of a chapter: text rises while the frame arrives; the console assembles while it is pinned */
    .motion:not(.fb) .home li.chapter .r { animation: k-up linear both; animation-range: entry 35% entry 95%; }
    .motion:not(.fb) .home li.chapter .console .r { animation-range: contain calc(var(--a, 0) * 1%) contain calc(var(--b, 20) * 1%); }
    .motion:not(.fb) .home li.chapter .console .r:not([class*=" ra-"]) { animation-range: entry 55% contain 6%; }
    .motion:not(.fb) .home li.chapter .deal { animation: k-deal linear both; animation-range: contain calc(var(--a) * 1%) contain calc(var(--b) * 1%); }
    .motion:not(.fb) .home li.chapter .rise { animation: k-up linear both; animation-range: contain calc(var(--a) * 1%) contain calc(var(--b) * 1%); }
    .motion:not(.fb) .home li.chapter .pop { animation: k-pop linear both; animation-range: contain calc(var(--a) * 1%) contain calc(var(--b) * 1%); }
    .motion:not(.fb) .home li.chapter .wipe { animation: k-wipe linear both; animation-range: contain calc(var(--a) * 1%) contain calc(var(--b) * 1%); }
    .motion:not(.fb) .home li.chapter .typed { animation: k-type steps(8, end) both; animation-range: contain 14% contain 28%; }
    .motion:not(.fb) .home li.chapter .mcard.away { opacity: 1; animation: k-up linear both, k-away linear forwards; animation-range: contain calc(var(--a) * 1%) contain calc(var(--b) * 1%), contain calc(var(--a2) * 1%) contain calc(var(--b2) * 1%); }
    .motion:not(.fb) .home li.chapter .press { animation: k-press linear both; animation-range: contain calc(var(--a2) * 1%) contain calc(var(--b2) * 1%); }
    .motion:not(.fb) .home li.chapter .dots::after { animation: k-fillx linear both; animation-range: contain calc(var(--a, 0) * 1% + 4%) contain calc(var(--b, 20) * 1% + 8%); }
    .motion:not(.fb) .home li.chapter .frame { animation: k-frame-out linear both; animation-range: exit 15% exit 90%; }
    .motion:not(.fb) .home .ui-study .scan { display: block; position: absolute; top: 0; bottom: 0; left: 0; width: 22%; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(0, 166, 244, .22), transparent); animation: k-scan linear both; animation-range: contain 22% contain 72%; }
    /* the build stages advance: build -> verify -> awaiting decision */
    .motion:not(.fb) .home .ui-build .verbs .verb { position: absolute; left: 0; top: 0; display: flex; }
    .motion:not(.fb) .home .ui-build .v1 { animation: k-band linear both; animation-range: contain 0% contain 33%; }
    .motion:not(.fb) .home .ui-build .v2 { animation: k-band linear both; animation-range: contain 33% contain 62%; }
    .motion:not(.fb) .home .ui-build .v3 { animation: k-in linear both; animation-range: contain 62% contain 66%; }
    .motion:not(.fb) .home .ui-build .s-build .st-dot { animation: k-st linear both; animation-range: contain 0% contain 33%; }
    .motion:not(.fb) .home .ui-build .s-verify .st-dot { animation: k-st linear both; animation-range: contain 30% contain 62%; }
    .motion:not(.fb) .home .ui-build .s-pub .st-dot { animation: k-stp linear both; animation-range: contain 60% contain 64%; }
    .motion:not(.fb) .home .ui-build .s-pub .st-dot::after { animation: k-in linear both; animation-range: contain 60% contain 64%; }
    .motion:not(.fb) .home .ui-build .st:nth-child(2)::after { animation: k-line linear both; transform-origin: left; animation-range: contain 4% contain 33%; }
    .motion:not(.fb) .home .ui-build .st:nth-child(3)::after { animation: k-line linear both; transform-origin: left; animation-range: contain 34% contain 62%; }
    /* ten tries: deal in, the seven let go, the three kept lift */
    .motion:not(.fb) .home .ten .t:not(.kept)::before { animation: k-ghost linear both; animation-range: contain 52% contain 72%; }
    .motion:not(.fb) .home .ten .t.kept { animation: k-deal linear both, k-lift linear both; animation-range: contain calc(var(--a) * 1%) contain calc(var(--b) * 1%), contain 56% contain 70%; }
    .motion:not(.fb) .home li.chapter .ten .t:not(.kept) { animation: k-deal linear both; animation-range: contain calc(var(--a) * 1%) contain calc(var(--b) * 1%); }
    .motion:not(.fb) .home .ten .t:not(.kept)::before { opacity: 0; }

    /* every piece takes ITS chapter's timeline (an id beats the class rules above, whatever their order) */
    .motion:not(.fb) .home #ch-1 *, .motion:not(.fb) .home #ch-1 *::before, .motion:not(.fb) .home #ch-1 *::after { animation-timeline: --c1; }
    .motion:not(.fb) .home #ch-2 *, .motion:not(.fb) .home #ch-2 *::before, .motion:not(.fb) .home #ch-2 *::after { animation-timeline: --c2; }
    .motion:not(.fb) .home #ch-3 *, .motion:not(.fb) .home #ch-3 *::before, .motion:not(.fb) .home #ch-3 *::after { animation-timeline: --c3; }
    .motion:not(.fb) .home #ch-4 *, .motion:not(.fb) .home #ch-4 *::before, .motion:not(.fb) .home #ch-4 *::after { animation-timeline: --c4; }
    .motion:not(.fb) .home #ch-5 *, .motion:not(.fb) .home #ch-5 *::before, .motion:not(.fb) .home #ch-5 *::after { animation-timeline: --c5; }
    .motion:not(.fb) .home #ch-6 *, .motion:not(.fb) .home #ch-6 *::before, .motion:not(.fb) .home #ch-6 *::after { animation-timeline: --c6; }
    .motion:not(.fb) .home #ch-7 *, .motion:not(.fb) .home #ch-7 *::before, .motion:not(.fb) .home #ch-7 *::after { animation-timeline: --c7; }
    .motion:not(.fb) .home #ch-8 *, .motion:not(.fb) .home #ch-8 *::before, .motion:not(.fb) .home #ch-8 *::after { animation-timeline: --c8; }
    .motion:not(.fb) .home #ch-9 *, .motion:not(.fb) .home #ch-9 *::before, .motion:not(.fb) .home #ch-9 *::after { animation-timeline: --c9; }
    .motion:not(.fb) .home #ch-10 *, .motion:not(.fb) .home #ch-10 *::before, .motion:not(.fb) .home #ch-10 *::after { animation-timeline: --c10; }
    .motion:not(.fb) .home #ch-11 *, .motion:not(.fb) .home #ch-11 *::before, .motion:not(.fb) .home #ch-11 *::after { animation-timeline: --c11; }

    /* the layered parallax on the stage: each chapter's scenery rises through the panel at three depths */
    .motion:not(.fb) .home .sc { animation: k-vis linear both; animation-range: cover 0% cover 100%; }
    .motion:not(.fb) .home .sc .d { animation: k-drift linear both; animation-range: cover 0% cover 100%; }
    .motion:not(.fb) .home .sc .far { --from: 35%; --to: -35%; }
    .motion:not(.fb) .home .sc .mid { --from: 80%; --to: -80%; }
    .motion:not(.fb) .home .sc .near { --from: 150%; --to: -150%; }
    .motion:not(.fb) .home .sc[data-for="hero"], .motion:not(.fb) .home .sc[data-for="hero"] .d { animation-timeline: --hero; animation-range: exit -100% exit 100%; }
    .motion:not(.fb) .home .sc[data-for="ideas"], .motion:not(.fb) .home .sc[data-for="ideas"] .d { animation-timeline: --c1; }
    .motion:not(.fb) .home .sc[data-for="pick"], .motion:not(.fb) .home .sc[data-for="pick"] .d { animation-timeline: --c2; }
    .motion:not(.fb) .home .sc[data-for="study"], .motion:not(.fb) .home .sc[data-for="study"] .d { animation-timeline: --c3; }
    .motion:not(.fb) .home .sc[data-for="brand"], .motion:not(.fb) .home .sc[data-for="brand"] .d { animation-timeline: --c4; }
    .motion:not(.fb) .home .sc[data-for="proto"], .motion:not(.fb) .home .sc[data-for="proto"] .d { animation-timeline: --c5; }
    .motion:not(.fb) .home .sc[data-for="plan"], .motion:not(.fb) .home .sc[data-for="plan"] .d { animation-timeline: --c6; }
    .motion:not(.fb) .home .sc[data-for="build"], .motion:not(.fb) .home .sc[data-for="build"] .d { animation-timeline: --c7; }
    .motion:not(.fb) .home .sc[data-for="live"], .motion:not(.fb) .home .sc[data-for="live"] .d { animation-timeline: --c8; }
    .motion:not(.fb) .home .sc[data-for="better"], .motion:not(.fb) .home .sc[data-for="better"] .d { animation-timeline: --c9; }
    .motion:not(.fb) .home .sc[data-for="many"], .motion:not(.fb) .home .sc[data-for="many"] .d { animation-timeline: --c10; }
    .motion:not(.fb) .home .sc[data-for="keep"], .motion:not(.fb) .home .sc[data-for="keep"] .d { animation-timeline: --c11; }

    /* the hero's ten tiles scatter as the hero leaves; the rail fills with the whole story */
    .motion:not(.fb) .home .tiles i { animation: k-scatter linear both; animation-timeline: --hero; animation-range: exit 0% exit 75%; }
    .motion:not(.fb) .home .rail ol::after { scale: 1 1; animation: k-fill-y linear both; animation-timeline: --story; animation-range: contain 0% contain 100%; }
    .motion:not(.fb) .home .cast { transform-origin: 50% 100%; animation: k-hero-cast linear both, k-cast-up linear both; animation-timeline: --hero, --hero; animation-range: exit 0% exit 60%, contain 0% contain 100%; }

    /* below the story: the doors rise at three depths, the trust strip and the band follow */
    .motion:not(.fb) .home .doors .r { animation: k-up linear both; animation-timeline: view(); animation-range: entry 10% entry calc(70% + var(--i, 0) * 12%); }
    .motion:not(.fb) .home .trust .r { animation: k-up linear both; animation-timeline: view(); animation-range: entry 0% entry calc(60% + var(--i, 0) * 15%); }
    .motion:not(.fb) .home .closing-band { animation: k-up linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
  }
}

/* ---- the desktop fallback (no scroll timelines): one-shot reveals + a rAF-throttled scroll position ---- */
@media (prefers-reduced-motion: no-preference) and (min-width: 1100px) and (min-height: 620px) {
  .motion.fb .home .sc { opacity: 0; transition: opacity .8s ease; }
  .motion.fb .home .stage[data-active="hero"] .sc[data-for="hero"], .motion.fb .home .stage[data-active="ideas"] .sc[data-for="ideas"],
  .motion.fb .home .stage[data-active="pick"] .sc[data-for="pick"], .motion.fb .home .stage[data-active="study"] .sc[data-for="study"],
  .motion.fb .home .stage[data-active="brand"] .sc[data-for="brand"], .motion.fb .home .stage[data-active="proto"] .sc[data-for="proto"],
  .motion.fb .home .stage[data-active="plan"] .sc[data-for="plan"], .motion.fb .home .stage[data-active="build"] .sc[data-for="build"],
  .motion.fb .home .stage[data-active="live"] .sc[data-for="live"], .motion.fb .home .stage[data-active="better"] .sc[data-for="better"],
  .motion.fb .home .stage[data-active="many"] .sc[data-for="many"], .motion.fb .home .stage[data-active="keep"] .sc[data-for="keep"] { opacity: 1; }
  .motion.fb .home .sc .mid { translate: 0 calc(var(--sp, 0) * -60px); }
  .motion.fb .home .sc .near { translate: 0 calc(var(--sp, 0) * -140px); }
  .motion.fb .home .tiles i { transition: translate .8s cubic-bezier(.3, 1.2, .5, 1), rotate .8s ease, opacity .6s ease; }
  .motion.fb .home .stage:not([data-active="hero"]) .tiles i { translate: var(--tx) var(--ty); rotate: var(--tr); opacity: 0; }
}

/* ==========================================================================
   W2.f PER-ELEMENT VALUES (they were style= attributes in the prototype): the scenery's positions,
   the hero tiles' scatter vectors, each piece's place on its chapter's timeline (ra / rb, ra2 / rb2:
   the start and end of its range, in % of the pinned stretch), the cards' resting tilt (r0), the ten
   tries' colours (c2) and the brand options' swatches (sw).
   ========================================================================== */
.home .sc[data-for="hero"] .far > .s:nth-child(1) { --x:6%;--y:16%;--w:34%; }
.home .sc[data-for="hero"] .far > .s:nth-child(2) { --x:62%;--y:62%;--w:44%; }
.home .sc[data-for="hero"] .near > .s:nth-child(1) { --x:8%;--y:70%;--w:7%; }
.home .sc[data-for="hero"] .near > .s:nth-child(2) { --x:86%;--y:12%;--w:6%; }
.home .sc[data-for="ideas"] .far > .s:nth-child(1) { --x:-8%;--y:20%;--w:40%; }
.home .sc[data-for="ideas"] .far > .s:nth-child(2) { --x:70%;--y:70%;--w:36%; }
.home .sc[data-for="ideas"] .mid > .s:nth-child(1) { --x:6%;--y:10%;--w:24%;--r:-9deg; }
.home .sc[data-for="ideas"] .mid > .s:nth-child(2) { --x:70%;--y:30%;--w:22%;--r:8deg; }
.home .sc[data-for="ideas"] .mid > .s:nth-child(3) { --x:76%;--y:82%;--w:18%;--r:-4deg; }
.home .sc[data-for="ideas"] .near > .s:nth-child(1) { --x:4%;--y:62%;--w:7%; }
.home .sc[data-for="ideas"] .near > .s:nth-child(2) { --x:88%;--y:56%;--w:5%; }
.home .sc[data-for="ideas"] .near > .s:nth-child(3) { --x:40%;--y:6%;--w:6%; }
.home .sc[data-for="pick"] .far > .s:nth-child(1) { --x:58%;--y:8%;--w:46%; }
.home .sc[data-for="pick"] .mid > .s:nth-child(1) { --x:8%;--y:24%;--w:15%;--r:-6deg; }
.home .sc[data-for="pick"] .mid > .s:nth-child(2) { --x:78%;--y:40%;--w:14%; }
.home .sc[data-for="pick"] .mid > .s:nth-child(3) { --x:12%;--y:80%;--w:14%; }
.home .sc[data-for="pick"] .near > .s:nth-child(1) { --x:86%;--y:76%;--w:6%; }
.home .sc[data-for="pick"] .near > .s:nth-child(2) { --x:30%;--y:8%;--w:6%; }
.home .sc[data-for="study"] .far > .s:nth-child(1) { --x:-6%;--y:56%;--w:42%; }
.home .sc[data-for="study"] .mid > .s:nth-child(1) { --x:70%;--y:14%;--w:20%; }
.home .sc[data-for="study"] .mid > .s:nth-child(2) { --x:6%;--y:16%;--w:20%;--r:-5deg; }
.home .sc[data-for="study"] .mid > .s:nth-child(3) { --x:74%;--y:74%;--w:18%;--r:6deg; }
.home .sc[data-for="study"] .near > .s:nth-child(1) { --x:44%;--y:4%;--w:6%; }
.home .sc[data-for="study"] .near > .s:nth-child(2) { --x:6%;--y:78%;--w:6%; }
.home .sc[data-for="brand"] .far > .s:nth-child(1) { --x:64%;--y:52%;--w:44%; }
.home .sc[data-for="brand"] .mid > .s:nth-child(1) { --x:4%;--y:20%;--w:24%;--r:-8deg; }
.home .sc[data-for="brand"] .mid > .s:nth-child(2) { --x:72%;--y:24%;--w:22%;--r:7deg; }
.home .sc[data-for="brand"] .mid > .s:nth-child(3) { --x:10%;--y:82%;--w:13%; }
.home .sc[data-for="brand"] .near > .s:nth-child(1) { --x:88%;--y:66%;--w:7%; }
.home .sc[data-for="brand"] .near > .s:nth-child(2) { --x:36%;--y:6%;--w:6%; }
.home .sc[data-for="proto"] .far > .s:nth-child(1) { --x:-10%;--y:8%;--w:44%; }
.home .sc[data-for="proto"] .mid > .s:nth-child(1) { --x:4%;--y:22%;--w:22%;--r:-7deg; }
.home .sc[data-for="proto"] .mid > .s:nth-child(2) { --x:72%;--y:18%;--w:22%;--r:5deg; }
.home .sc[data-for="proto"] .mid > .s:nth-child(3) { --x:70%;--y:78%;--w:20%;--r:-3deg; }
.home .sc[data-for="proto"] .near > .s:nth-child(1) { --x:10%;--y:76%;--w:6%; }
.home .sc[data-for="proto"] .near > .s:nth-child(2) { --x:50%;--y:4%;--w:5%; }
.home .sc[data-for="plan"] .far > .s:nth-child(1) { --x:60%;--y:4%;--w:42%; }
.home .sc[data-for="plan"] .mid > .s:nth-child(1) { --x:4%;--y:18%;--w:25%;--r:-5deg; }
.home .sc[data-for="plan"] .mid > .s:nth-child(2) { --x:70%;--y:30%;--w:25%;--r:4deg; }
.home .sc[data-for="plan"] .mid > .s:nth-child(3) { --x:8%;--y:80%;--w:25%;--r:3deg; }
.home .sc[data-for="plan"] .near > .s:nth-child(1) { --x:88%;--y:80%;--w:7%; }
.home .sc[data-for="build"] .far > .s:nth-child(1) { --x:-8%;--y:60%;--w:40%; }
.home .sc[data-for="build"] .mid > .s:nth-child(1) { --x:6%;--y:16%;--w:17%;--r:-4deg; }
.home .sc[data-for="build"] .mid > .s:nth-child(2) { --x:76%;--y:20%;--w:17%;--r:6deg; }
.home .sc[data-for="build"] .mid > .s:nth-child(3) { --x:74%;--y:78%;--w:14%; }
.home .sc[data-for="build"] .near > .s:nth-child(1) { --x:40%;--y:5%;--w:6%; }
.home .sc[data-for="build"] .near > .s:nth-child(2) { --x:6%;--y:74%;--w:6%; }
.home .sc[data-for="live"] .far > .s:nth-child(1) { --x:56%;--y:46%;--w:50%; }
.home .sc[data-for="live"] .mid > .s:nth-child(1) { --x:72%;--y:12%;--w:19%; }
.home .sc[data-for="live"] .mid > .s:nth-child(2) { --x:6%;--y:24%;--w:21%;--r:-6deg; }
.home .sc[data-for="live"] .near > .s:nth-child(1) { --x:10%;--y:72%;--w:8%; }
.home .sc[data-for="live"] .near > .s:nth-child(2) { --x:86%;--y:64%;--w:7%; }
.home .sc[data-for="live"] .near > .s:nth-child(3) { --x:46%;--y:4%;--w:6%; }
.home .sc[data-for="better"] .far > .s:nth-child(1) { --x:-6%;--y:6%;--w:40%; }
.home .sc[data-for="better"] .mid > .s:nth-child(1) { --x:66%;--y:16%;--w:24%;--r:5deg; }
.home .sc[data-for="better"] .mid > .s:nth-child(2) { --x:6%;--y:30%;--w:22%;--r:-6deg; }
.home .sc[data-for="better"] .near > .s:nth-child(1) { --x:84%;--y:78%;--w:6%; }
.home .sc[data-for="better"] .near > .s:nth-child(2) { --x:12%;--y:80%;--w:6%; }
.home .sc[data-for="many"] .far > .s:nth-child(1) { --x:60%;--y:58%;--w:46%; }
.home .sc[data-for="many"] .mid > .s:nth-child(1) { --x:6%;--y:14%;--w:13%;--r:-8deg; }
.home .sc[data-for="many"] .mid > .s:nth-child(2) { --x:78%;--y:14%;--w:12%;--r:9deg; }
.home .sc[data-for="many"] .mid > .s:nth-child(3) { --x:44%;--y:2%;--w:10%; }
.home .sc[data-for="many"] .near > .s:nth-child(1) { --x:6%;--y:70%;--w:6%; }
.home .sc[data-for="keep"] .far > .s:nth-child(1) { --x:-8%;--y:30%;--w:46%; }
.home .sc[data-for="keep"] .mid > .s:nth-child(1) { --x:74%;--y:16%;--w:14%; }
.home .sc[data-for="keep"] .mid > .s:nth-child(2) { --x:8%;--y:12%;--w:13%; }
.home .sc[data-for="keep"] .mid > .s:nth-child(3) { --x:78%;--y:74%;--w:12%;--r:10deg; }
.home .sc[data-for="keep"] .near > .s:nth-child(1) { --x:40%;--y:6%;--w:7%; }
.home .sc[data-for="keep"] .near > .s:nth-child(2) { --x:10%;--y:76%;--w:6%; }
.home .tiles i:nth-child(1) { --tx:-160px;--ty:-90px;--tr:-40deg; }
.home .tiles i:nth-child(2) { --tx:-60px;--ty:-150px;--tr:20deg; }
.home .tiles i:nth-child(3) { --tx:30px;--ty:-170px;--tr:-25deg; }
.home .tiles i:nth-child(4) { --tx:120px;--ty:-120px;--tr:35deg; }
.home .tiles i:nth-child(5) { --tx:190px;--ty:-60px;--tr:-15deg; }
.home .tiles i:nth-child(6) { --tx:-190px;--ty:30px;--tr:30deg; }
.home .tiles i:nth-child(7) { --tx:-90px;--ty:80px;--tr:-35deg; }
.home .tiles i:nth-child(8) { --tx:10px;--ty:110px;--tr:15deg; }
.home .tiles i:nth-child(9) { --tx:110px;--ty:90px;--tr:-20deg; }
.home .tiles i:nth-child(10) { --tx:200px;--ty:40px;--tr:40deg; }
.home .ra-0 { --a:0; }
.home .ra-3 { --a:3; }
.home .ra-4 { --a:4; }
.home .ra-6 { --a:6; }
.home .ra-8 { --a:8; }
.home .ra-9 { --a:9; }
.home .ra-10 { --a:10; }
.home .ra-12 { --a:12; }
.home .ra-14 { --a:14; }
.home .ra-15 { --a:15; }
.home .ra-16 { --a:16; }
.home .ra-18 { --a:18; }
.home .ra-21 { --a:21; }
.home .ra-22 { --a:22; }
.home .ra-24 { --a:24; }
.home .ra-26 { --a:26; }
.home .ra-27 { --a:27; }
.home .ra-28 { --a:28; }
.home .ra-30 { --a:30; }
.home .ra-34 { --a:34; }
.home .ra-42 { --a:42; }
.home .ra-44 { --a:44; }
.home .ra-46 { --a:46; }
.home .ra-50 { --a:50; }
.home .ra-52 { --a:52; }
.home .ra-54 { --a:54; }
.home .ra-56 { --a:56; }
.home .ra-58 { --a:58; }
.home .ra-60 { --a:60; }
.home .ra-66 { --a:66; }
.home .ra-74 { --a:74; }
.home .rb-10 { --b:10; }
.home .rb-12 { --b:12; }
.home .rb-14 { --b:14; }
.home .rb-16 { --b:16; }
.home .rb-19 { --b:19; }
.home .rb-20 { --b:20; }
.home .rb-22 { --b:22; }
.home .rb-24 { --b:24; }
.home .rb-25 { --b:25; }
.home .rb-26 { --b:26; }
.home .rb-28 { --b:28; }
.home .rb-30 { --b:30; }
.home .rb-31 { --b:31; }
.home .rb-32 { --b:32; }
.home .rb-34 { --b:34; }
.home .rb-36 { --b:36; }
.home .rb-37 { --b:37; }
.home .rb-40 { --b:40; }
.home .rb-42 { --b:42; }
.home .rb-43 { --b:43; }
.home .rb-44 { --b:44; }
.home .rb-46 { --b:46; }
.home .rb-48 { --b:48; }
.home .rb-50 { --b:50; }
.home .rb-56 { --b:56; }
.home .rb-60 { --b:60; }
.home .rb-62 { --b:62; }
.home .rb-64 { --b:64; }
.home .rb-66 { --b:66; }
.home .rb-70 { --b:70; }
.home .rb-72 { --b:72; }
.home .rb-74 { --b:74; }
.home .rb-76 { --b:76; }
.home .rb-80 { --b:80; }
.home .rb-82 { --b:82; }
.home .ra2-30 { --a2:30; }
.home .ra2-34 { --a2:34; }
.home .ra2-80 { --a2:80; }
.home .rb2-42 { --b2:42; }
.home .rb2-46 { --b2:46; }
.home .rb2-90 { --b2:90; }
.home .r0-n6 { --r0:-6deg; }
.home .r0-n5 { --r0:-5deg; }
.home .r0-n2 { --r0:-2deg; }
.home .r0-0 { --r0:0deg; }
.home .r0-5 { --r0:5deg; }
.home .r0-6 { --r0:6deg; }
.home .c2-blue { --c2:var(--blue); }
.home .c2-green { --c2:var(--green); }
.home .c2-red { --c2:var(--red); }
.home .c2-yellow { --c2:var(--yellow); }
.home .sw-00a6f4 { background:#00A6F4; }
.home .sw-16171b { background:#16171B; }
.home .sw-2b2d33 { background:#2B2D33; }
.home .sw-e3f4fd { background:#E3F4FD; }
.home .sw-ef4553 { background:#EF4553; }
.home .sw-fd9a00 { background:#FD9A00; }
.home .sw-ffe3d6 { background:#FFE3D6; }
.home .sw-fff1d6 { background:#FFF1D6; }
.home .sw-ffffff { background:#FFFFFF; }
.home .ra-40 { --a:40; }
.home .ra2-46 { --a2:46; }
.home .rb2-50 { --b2:50; }
/* == 1490 W2 end == */

/* == 1490 W3a begin == */
/* The "I have an idea" pages (founders, experts, creators). The group's colour is its home-page
   door's: yellow. A hero with the group's colour panel, the steps, what fits, the question-headed
   answers, the across line, and the closing band that carries the form. Nothing here moves and
   nothing here needs a script. Every rule is scoped under main.grp.
   2026-10-15 (W3a2): the three group-1 heroes now carry the guide (.grp-guide) -- W2's static
   caretaker and the copy's line as text (brief 1490 R5). The drawn placeholder (.grp-art,
   .grp-bubble) is no longer on those pages, but its rules STAY: W4's /answers uses them. */
main.grp { display: block; }
.grp .qa a, .grp .across a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--blue); text-decoration-thickness: 2px; text-underline-offset: .18em; }
.grp .qa a:hover, .grp .across a:hover { text-decoration-thickness: 3px; }

/* the hero: the copy on the left, the group's colour panel on the right */
.grp-hero { padding-block: clamp(1.5rem, .5rem + 3vw, 3.5rem) var(--section-y); }
.grp-hero-row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.grp-hero-copy { display: grid; justify-items: start; gap: var(--sp-5); }
.grp-tag {
  display: inline-flex; align-items: center; padding: .45rem 1rem; border-radius: var(--r-pill);
  background: var(--yellow); color: var(--on-color); border: 2.5px solid #16171B; box-shadow: 0 4px 0 #16171B;
  font: 700 var(--fs-small)/1.25 var(--font-small);
}
.grp h1 { font-size: clamp(2.375rem, 1.66rem + 2.9vw, 4.25rem); font-weight: 800; line-height: 1; letter-spacing: -.035em; }
.grp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-6); margin-top: var(--sp-2); }
.grp .link-more { display: inline-flex; align-items: center; gap: .7rem; font: 700 1.0625rem/1.2 var(--font-display); text-decoration: none; color: var(--ink); padding-block: .4rem; }
.grp .link-more > span:first-child { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; text-decoration-color: var(--blue); }
.grp .link-more:hover > span:first-child { text-decoration-color: currentColor; }
.grp .link-more-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 2.5px solid var(--line-strong); background: var(--ghost-bg); transition: transform .15s ease; }
/* the arrow: a shaft and a head drawn by CSS (no text, nothing for a screen reader to read) */
.grp .link-more-icon::before, .grp .link-more-icon::after { content: ""; grid-area: 1 / 1; }
.grp .link-more-icon::before { width: 2.6px; height: 15px; border-radius: 2px; background: currentColor; transform: translateY(-1px); }
.grp .link-more-icon::after { width: 9px; height: 9px; border-right: 2.6px solid currentColor; border-bottom: 2.6px solid currentColor; border-radius: 0 0 2px 0; transform: translateY(2px) rotate(45deg); }
.grp .link-more:hover .link-more-icon { transform: translateY(3px); }
.grp .small-print { font: 400 var(--fs-small)/1.5 var(--font-small); color: var(--ink-2); padding-left: var(--sp-4); border-left: 4px solid var(--yellow); max-width: 34em; }
.grp-art {
  position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center;
  aspect-ratio: 6 / 5; border-radius: var(--r-band); background: var(--yellow);
}
.grp-art::before, .grp-art::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; background: rgba(255, 255, 255, .2); }
.grp-art::before { width: 46%; aspect-ratio: 1; left: -9%; top: -11%; }
.grp-art::after { width: 58%; aspect-ratio: 1; right: -14%; bottom: -18%; }
/* the door's speech bubble, drawn from empty elements: three lines of text, a tail, a spark */
.grp-bubble {
  --edge: clamp(2.5px, .3vw, 4px);
  position: relative; display: grid; align-content: center; gap: clamp(.4rem, .9vw, .8rem);
  width: 52%; aspect-ratio: 110 / 72; padding: 0 12%;
  background: #FFFFFF; border: var(--edge) solid #16171B; border-radius: 24% / 36%;
}
.grp-bubble i { display: block; height: clamp(.45rem, .9vw, .8rem); border-radius: 99px; background: #16171B; }
.grp-bubble i:nth-child(1) { width: 66%; } .grp-bubble i:nth-child(2) { width: 88%; } .grp-bubble i:nth-child(3) { width: 42%; }
.grp-bubble::after {
  content: ""; position: absolute; left: 18%; bottom: clamp(-17px, -1.2vw, -9px); width: clamp(18px, 2.4vw, 32px); aspect-ratio: 1;
  background: #FFFFFF; border-left: var(--edge) solid #16171B; border-bottom: var(--edge) solid #16171B;
  transform: rotate(-45deg); border-radius: 0 0 0 4px;
}
.grp-bubble b { position: absolute; width: var(--edge); height: clamp(10px, 1.4vw, 20px); border-radius: 99px; background: #16171B; transform-origin: 50% 100%; }
.grp-bubble b:nth-of-type(1) { right: -7%; top: -24%; transform: rotate(-12deg); }
.grp-bubble b:nth-of-type(2) { right: -16%; top: -12%; transform: rotate(48deg); }
.grp-bubble b:nth-of-type(3) { right: -18%; top: 4%; transform: rotate(80deg); }
/* the guide: the group's caretaker on a light disc in the group's colour, its line above it */
.grp-guide { display: grid; justify-items: center; gap: var(--sp-5); padding: var(--sp-6) var(--sp-5); border-radius: var(--r-band); background: var(--yellow); }
.grp-guide .says { justify-self: center; text-align: center; text-wrap: balance; font-size: 1.1875rem; }
.grp-guide .says::before { left: 50%; top: auto; bottom: -11px; margin: 0 0 0 -9px; transform: rotate(-45deg); }
.grp-guide img { width: min(100%, 300px); height: auto; border-radius: 50%; background: rgba(255, 255, 255, .3); }
@media (max-width: 900px) {
  .grp-hero-row { grid-template-columns: minmax(0, 1fr); }
  .grp-art { aspect-ratio: 2 / 1; border-radius: var(--r-door); }
  .grp-bubble { width: 40%; }
  .grp-guide img { width: min(60%, 220px); }
}

/* the steps: the heading holds its place while the numbered cards pass */
.grp-how { padding-bottom: var(--section-y); }
.grp-how-row { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: clamp(1.5rem, 1rem + 4vw, 5rem); align-items: start; }
.grp-how-title { position: sticky; top: var(--sp-6); }
.grp .steps { list-style: none; counter-reset: step; display: grid; gap: var(--sp-5); }
.grp .steps li {
  counter-increment: step; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--sp-5); row-gap: var(--sp-2);
  padding: clamp(1.25rem, .9rem + 1.2vw, 2rem); background: var(--surface); color: var(--ink);
  border: 2.5px solid var(--card-edge); border-radius: var(--r-card); box-shadow: 0 8px 0 var(--card-lip);
}
.grp .steps li::before {
  content: counter(step, decimal-leading-zero);
  content: counter(step, decimal-leading-zero) / "";
  grid-row: 1 / span 2; align-self: start; display: inline-grid; place-items: center; min-width: 2.75rem; height: 2.75rem; padding: 0 .5rem;
  border-radius: 14px; background: var(--yellow); color: var(--on-color); border: 2.5px solid #16171B; box-shadow: 0 4px 0 #16171B;
  font: 800 1.125rem/1 var(--font-display);
}
.grp .steps h3 { align-self: center; font-size: clamp(1.25rem, 1.16rem + .38vw, 1.5rem); font-weight: 800; line-height: 1.2; letter-spacing: -.015em; }
.grp .steps p { grid-column: 2; color: var(--ink-2); }
@media (max-width: 900px) {
  .grp-how-row { grid-template-columns: minmax(0, 1fr); }
  .grp-how-title { position: static; }
}
@media (max-width: 480px) {
  .grp .steps li { grid-template-columns: minmax(0, 1fr); }
  .grp .steps li::before { grid-row: auto; justify-self: start; margin-bottom: var(--sp-2); }
  .grp .steps p { grid-column: 1; }
}

/* what fits: a warm panel */
.grp-fits { padding-bottom: var(--section-y); }
.grp .fits { display: grid; gap: var(--sp-4); justify-items: start; padding: clamp(1.75rem, 1rem + 3vw, 4rem); background: var(--sun-tint); border-radius: var(--r-band); }
.grp .fits h2 { font-size: var(--fs-h2); font-weight: 800; line-height: 1.04; letter-spacing: -.03em; }
.grp .fits .lead { color: var(--ink); max-width: 44em; }
.grp-kicker { display: inline-flex; align-items: center; gap: .65rem; font: 700 var(--fs-small)/1.2 var(--font-small); color: var(--ink-2); letter-spacing: .02em; }
.grp-kicker::before { content: ""; flex: none; width: 1.75rem; height: .5rem; border-radius: 4px; background: var(--yellow); }

/* the answers: one card per question */
.grp-qa { padding-bottom: var(--section-y); }
.grp .qa-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, .5rem + 1.6vw, 2rem); margin-top: var(--sp-5); }
.grp .qa { padding: clamp(1.25rem, .9rem + 1.4vw, 2.25rem); background: var(--surface); border: 2px solid var(--line-soft); border-radius: var(--r-card); }
.grp .qa h2 { margin-bottom: var(--sp-4); font-size: clamp(1.25rem, 1.13rem + .48vw, 1.5625rem); font-weight: 800; line-height: 1.2; letter-spacing: -.015em; }
.grp .qa p { color: var(--ink-2); }
@media (max-width: 960px) { .grp .qa-grid { grid-template-columns: minmax(0, 1fr); } }

/* across: the sibling pages */
.grp-across { padding-bottom: var(--section-y); }
.grp .across { max-width: 62rem; padding: var(--sp-5) var(--sp-6); border: 2.5px dashed var(--track); border-radius: var(--r-card); font: 600 var(--fs-lead)/1.5 var(--font-text); }
@media (max-width: 480px) { .grp .across { padding: var(--sp-4) var(--sp-5); } }

/* the closing band: the title, then the form and the line under it */
.grp-close { padding-bottom: var(--sp-4); }
.grp-form { display: grid; gap: var(--sp-4); }
.grp .no-js { background: #FFFFFF; color: #16171B; border: 2.5px solid #16171B; border-radius: 24px; box-shadow: 0 8px 0 #16171B; padding: var(--sp-5); }
.grp .no-js a { color: inherit; }
.grp .band-note { font: 600 var(--fs-small)/1.5 var(--font-small); }
/* the band's farewell, where the copy has one: under the title, the pose with its line beside it */
.grp-close-head { display: grid; justify-items: start; gap: var(--sp-6); }
.grp-bye { display: flex; align-items: center; gap: var(--sp-4); }
.grp-bye img { flex: none; width: clamp(88px, 70px + 4vw, 132px); height: auto; }
/* == 1490 W3a end == */

/* == 1490 W3b begin == */
/* "I run a business" (/for-service-businesses, /for-firms): the group's colour is its door's, blue.
   Scoped under main.biz; the card, bubble, band and form are the shared components. Nothing moves. */
.biz > section { padding-bottom: var(--section-y); }
.biz-hero { padding-top: clamp(1.5rem, .5rem + 3vw, 3.5rem); }
.biz-row { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.biz-copy { display: grid; justify-items: start; gap: var(--sp-5); }
.biz-tag { padding: .45rem 1rem; border-radius: var(--r-pill); background: var(--blue); color: var(--on-color); border: 2.5px solid #16171B; box-shadow: 0 4px 0 #16171B; font: 700 var(--fs-small)/1.25 var(--font-small); }
.biz h1 { font-size: clamp(2.375rem, 1.66rem + 2.9vw, 4.25rem); font-weight: 800; line-height: 1; letter-spacing: -.035em; }
.biz-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-6); }
.biz-more { display: inline-flex; align-items: center; gap: .7rem; padding-block: .4rem; color: var(--ink); font: 700 1.0625rem/1.2 var(--font-display); text-decoration: none; }
.biz-more > span { text-decoration: underline 3px var(--blue); text-underline-offset: 6px; }
.biz-more:hover > span { text-decoration-color: currentColor; }
.biz-more svg { box-sizing: content-box; padding: 8px; border-radius: 50%; border: 2.5px solid var(--line-strong); background: var(--ghost-bg); }
.biz-d2 { max-width: 34em; padding-left: var(--sp-4); border-left: 4px solid var(--blue); color: var(--ink-2); font: 400 var(--fs-small)/1.5 var(--font-small); }
/* the guide: the caretaker on a light disc, its line above */
.biz-guide { display: grid; justify-items: center; gap: var(--sp-5); padding: var(--sp-6) var(--sp-5); border-radius: var(--r-band); background: var(--blue); }
.biz-guide .says { text-align: center; font-size: 1.1875rem; }
.biz-guide .says::before { left: 50%; top: auto; bottom: -11px; margin: 0 0 0 -9px; transform: rotate(-45deg); }
.biz-guide img { width: min(100%, 300px); height: auto; border-radius: 50%; background: rgba(255, 255, 255, .3); }
.biz-steps, .biz-cards, .biz-qa { list-style: none; display: grid; gap: var(--sp-5); margin-top: clamp(2rem, 1.4rem + 2vw, 3.5rem); }
.biz-steps { counter-reset: step; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.biz-cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.biz-cards.two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); }
.biz-qa { grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr)); align-items: start; }
.biz-steps li { counter-increment: step; display: grid; align-content: start; gap: var(--sp-3); }
.biz-steps li::before {
  content: counter(step, decimal-leading-zero); content: counter(step, decimal-leading-zero) / "";
  justify-self: start; display: inline-grid; place-items: center; min-width: 2.75rem; height: 2.75rem; border-radius: 14px;
  background: var(--blue); color: var(--on-color); border: 2.5px solid #16171B; box-shadow: 0 4px 0 #16171B; font: 800 1.125rem/1 var(--font-display);
}
.biz h3 { font-size: 1.375rem; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
.biz-steps p, .biz-q p { color: var(--ink-2); }
.biz-cards strong { display: block; margin-bottom: var(--sp-2); font: 800 1.1875rem/1.25 var(--font-display); }
.biz-q, .biz-not { border: 2px solid var(--line-soft); border-radius: var(--r-card); background: var(--surface); }
.biz-q { display: grid; gap: var(--sp-3); padding: var(--sp-5); }
.biz-not { display: grid; gap: var(--sp-3); max-width: 46rem; margin-top: var(--sp-6); padding: var(--sp-5) var(--sp-5) var(--sp-5) 2.75rem; font-size: var(--fs-lead); }
.biz-not li::marker { color: var(--blue); }
.biz-note, .biz-across { max-width: 46rem; margin-top: var(--sp-6); font-size: var(--fs-lead); }
.biz-across { padding: var(--sp-5); border-left: 6px solid var(--blue); border-radius: 0 var(--r-field) var(--r-field) 0; background: var(--surface); }
.biz-q a, .biz-across a { font-weight: 600; text-decoration-color: var(--blue); text-decoration-thickness: 2px; text-underline-offset: .18em; }
.biz-reserve { display: grid; gap: var(--sp-4); }
.biz-reserve .no-js a { font-weight: 700; }
.biz-band-note { font: 600 var(--fs-small)/1.5 var(--font-small); }
@media (max-width: 900px) {
  .biz-row { grid-template-columns: minmax(0, 1fr); }
  .biz-guide img { width: min(60%, 220px); }
}
/* == 1490 W3b end == */

/* == 1490 W3c begin == */
/* THE GROUP-3 PAGE, /starting-out ("I want to start something"; brief 1490 W3c, 2026-10-15). Every rule is
   scoped to <main class="starting">. It wears the shared pieces (the buttons, the guide's bubble, the card,
   the band, the form) and adds only its layout. Static: nothing here moves (brief 1490 R5). Its colour is
   the home page's third door: green. */
.starting { display: block; }
.starting .st-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; padding-top: clamp(1.5rem, .5rem + 3vw, 3.5rem); }
.starting .st-hero-copy { display: grid; justify-items: start; gap: var(--sp-5); }
.starting h1 { font-size: var(--fs-h1); font-weight: 800; line-height: .98; letter-spacing: -.035em; }
.starting .st-label { padding: .35rem .9rem; border-radius: var(--r-pill); background: var(--green); color: var(--on-color); font: 700 var(--fs-small)/1.3 var(--font-small); }
.starting .st-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-6); }
.starting .st-more { font: 700 1.0625rem/1.2 var(--font-display); color: var(--ink); text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--green); text-underline-offset: 6px; padding-block: .4rem; }
.starting .st-guide { grid-template-columns: minmax(0, 1fr); justify-items: center; padding: var(--sp-6) var(--sp-5) var(--sp-5); border-radius: var(--r-band); background: var(--sun-tint); }
.starting .st-guide .guide-art { width: min(100%, 260px); order: 2; }
.starting .st-guide .says { justify-self: center; text-align: center; font-size: 1.1875rem; }
.starting .st-guide .says::before { left: 50%; top: auto; bottom: -11px; margin: 0 0 0 -9px; transform: rotate(-45deg); }
.starting .st-sec { padding-top: clamp(4rem, 2.5rem + 5vw, 7rem); }
.starting .st-kicker { font: 700 var(--fs-small)/1.2 var(--font-small); color: var(--ink-2); letter-spacing: .02em; margin-bottom: var(--sp-3); }
/* the four steps */
.starting .st-steps, .starting .st-wont { list-style: none; display: grid; gap: clamp(1rem, .5rem + 1.6vw, 2rem); margin-top: clamp(1.75rem, 1rem + 2vw, 3rem); }
.starting .st-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.starting .st-step { display: grid; align-content: start; gap: var(--sp-3); }
.starting .st-pic { position: relative; display: grid; place-items: center; background: var(--green); border-radius: 20px; padding: var(--sp-4); margin-bottom: var(--sp-2); }
.starting .st-pic img { width: min(100%, 150px); height: auto; }
.starting .st-num { position: absolute; top: .75rem; left: .75rem; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 14px; background: #FFFFFF; color: #16171B; border: 2.5px solid #16171B; box-shadow: 0 4px 0 #16171B; font: 800 1.125rem/1 var(--font-display); }
.starting :is(.st-step, .st-wont) h3 { font-size: 1.375rem; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
/* what a try costs */
.starting .st-cost { background: var(--sun-tint); border-radius: var(--r-band); padding: clamp(2rem, 1rem + 4vw, 4.5rem); }
.starting .st-cost .lead { margin-top: var(--sp-4); max-width: 40em; }
/* what it will not do */
.starting .st-wont { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.starting .st-wont li { display: grid; align-content: start; gap: var(--sp-2); padding: var(--sp-5) var(--sp-6); border: 2px solid var(--line-soft); border-radius: var(--r-card); background: var(--surface); }
/* the questions */
.starting .st-q { max-width: 48rem; padding-block: var(--sp-6); border-top: 2px solid var(--line-soft); }
.starting .st-q h2 { font-size: var(--fs-h3); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; margin-bottom: var(--sp-3); }
/* the closing band */
.starting .st-close-copy, .starting .st-reserve { display: grid; gap: var(--sp-5); }
.starting .st-bye { display: flex; align-items: center; gap: var(--sp-5); }
.starting .st-bye img { flex: none; width: clamp(96px, 70px + 6vw, 160px); height: auto; }
.starting .st-reserve .no-js a { font-weight: 700; }
.starting .st-note { font: 600 var(--fs-small)/1.5 var(--font-small); }
@media (max-width: 1080px) { .starting .st-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .starting .st-hero, .starting .st-wont { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .starting .st-steps { grid-template-columns: minmax(0, 1fr); } }
/* == 1490 W3c end == */

/* == 1490 W4 begin == */
/* The other marketing pages. /what-it-costs and /answers wear the group pages' layout (main.grp and
   the W3a block above: the hero row, the answer cards, the closing band) in their own colours -- green
   for the cost page, blue for the answers. /access carries the compact form inside its document
   page. Nothing here moves and nothing here needs a script. */
.grp-art.w4-art { grid-template-columns: minmax(0, 1fr); aspect-ratio: auto; min-height: clamp(14rem, 9rem + 14vw, 25rem); padding: var(--sp-5); }
.w4-art.c-green { background: var(--green); } .w4-art.c-blue { background: var(--blue); }
.w4-art .guide { background: none; padding: 0; width: min(100%, 34rem); grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--sp-5); }
/* on a phone the line needs the room: a word never breaks inside the bubble at 320 px */
@media (max-width: 480px) { .w4-art .guide { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--sp-4); } }
/* a band that carries the form alone: one column, the form at a reading width */
.band.w4-solo { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.w4-solo .grp-form { width: min(100%, 36rem); }
/* the form inside a document page (/access) */
.doc .w4-form { margin: var(--sp-6) 0 var(--sp-7); }
.w4-form .band { border-radius: var(--r-door); padding: clamp(1.25rem, .6rem + 3vw, 2.75rem); }
.w4-form p { margin: 0; }
.w4-form a { color: inherit; }
/* == 1490 W4 end == */

/* ==========================================================================
   7. UTILITIES
   ========================================================================== */
.wrap { width: 100%; max-width: var(--page-max); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.mono { font-family: var(--font-mono); }
.nobr { white-space: nowrap; }