/* ==== 00-tokens.css ==== */
/* 00-tokens.css — every color, font, size, space, radius, easing and duration on the page.
   No literal color or font name anywhere else. Source: Diiiploy brand kit (dark look) + draft-ux §7.3.
   Contrast on --bg (#030303): --text 18.9:1 · --text-mid 12.0:1 · --text-muted 6.9:1 · --accent 6.6:1.
   --text-dim is 2.9:1 and is for decoration only, never for words.
   Button label --on-accent on --accent is 6.6:1 (white on coral is 3.1:1 and fails). */

@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("ArialMT"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 107.12%;
  ascent-override: 90.44%;
  descent-override: 22.52%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "JetBrains Mono Fallback";
  src: local("Menlo"), local("Courier New"), local("Courier");
  size-adjust: 100%;
  ascent-override: 102%;
  descent-override: 30%;
  line-gap-override: 0%;
}

:root {
  color-scheme: dark;

  /* ---- color: ground and surfaces ---- */
  --bg: #030303;
  --bg-soft: #070A10;
  --card: #0A0D14;
  --card-2: #10141D;
  --border: #1A1F2A;
  --border-strong: #262C3A;
  --hairline: rgb(245 245 246 / .14);   /* divider bands */

  /* ---- color: text ---- */
  --text: #F5F5F6;
  --text-warm: #F7E4E6;        /* white with a coral tint: hero line one, big numerals */
  --text-mid: #C9C4C7;         /* body copy, sub-headlines */
  --text-muted: #9A9398;       /* small lines, captions, source lines */
  --text-dim: #5E575B;         /* decoration only */

  /* ---- color: Diiiploy coral ---- */
  --accent: #E86B6B;           /* the coral the live site shows; buttons, dots, lines */
  --accent-red: #D46168;       /* the kit's dark-look red */
  --accent-2: #E289A0;
  --accent-3: #F0ACB8;         /* focus ring, highlights */
  --accent-deep: #8F4651;
  --accent-soft: #2A1517;      /* tinted fills */
  --accent-line: #4A2428;      /* tinted borders */
  --on-accent: #080304;        /* text on coral */
  --green: #34D399;            /* "after" states, sparingly */

  /* channels, for rgb(var(--x-rgb) / alpha) */
  --accent-rgb: 232 107 107;
  --red-rgb: 212 97 104;
  --deep-rgb: 143 70 81;
  --text-rgb: 245 245 246;
  --bg-rgb: 3 3 3;
  --card-rgb: 10 13 20;
  --shadow-rgb: 0 0 0;

  /* ---- gradients and glow ---- */
  --grad: linear-gradient(135deg, #E86B6B 0%, #E289A0 55%, #F0ACB8 100%);
  --grad-h: linear-gradient(90deg, #E86B6B 0%, #E289A0 70%, #F0ACB8 100%);
  --grad-btn: linear-gradient(135deg, #E86B6B 0%, #EA7882 45%, #E289A0 100%);
  --grad-text-warm: linear-gradient(180deg, #FFFFFF 20%, #F7E4E6 100%);
  --grad-text-accent: linear-gradient(180deg, #F6B4BC 0%, #EE8686 42%, #E86B6B 70%, #D9606A 100%);
  --glow-tr: radial-gradient(1100px 600px at 80% -10%, rgb(212 97 104 / .16), transparent 60%);
  --glow-bl: radial-gradient(1000px 500px at 0% 110%, rgb(143 70 81 / .12), transparent 60%);
  --glow-center: radial-gradient(closest-side, rgb(232 107 107 / .22), rgb(232 107 107 / .06) 55%, transparent 100%);
  --dot-grid: radial-gradient(rgb(245 245 246 / .07) 1px, transparent 1.2px);
  --mask-fade-bottom: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
  --mask-hero: radial-gradient(75% 65% at 72% 26%, #000 0%, rgb(0 0 0 / .5) 45%, transparent 78%);

  /* ---- shadows ---- */
  --shadow-card: inset 0 1px 0 rgb(245 245 246 / .035), 0 18px 40px -24px rgb(0 0 0 / .85);
  --shadow-glow: 0 24px 60px -24px rgb(232 107 107 / .45);
  --shadow-btn: 0 10px 30px -6px rgb(232 107 107 / .38), inset 0 1px 0 rgb(255 255 255 / .28);

  /* ---- type ---- */
  --font-sans: "Inter", "Inter Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-h1: clamp(34px, min(11.8vw, 7svh), 56px);   /* 46px at 390x664 */
  --fs-h2: 32px;
  --fs-h3: 20px;
  --fs-lead: 18px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-micro: 13px;
  --fs-eyebrow: 12px;
  --fs-chip: 13px;
  --fs-tag: 11px;
  --fs-btn: 18px;
  --fs-stat: clamp(44px, 14vw, 64px);
  --fs-ghost: clamp(150px, 46vw, 230px);

  --lh-h1: 1.02;
  --lh-h2: 1.08;
  --lh-h3: 1.25;
  --lh-snug: 1.45;
  --lh-body: 1.6;

  --track-h1: -0.035em;
  --track-h2: -0.03em;
  --track-h3: -0.01em;
  --track-eyebrow: 0.2em;
  --track-tag: 0.16em;

  --w-body: 400;
  --w-mid: 500;
  --w-semi: 600;
  --w-bold: 700;
  --w-head: 800;

  /* ---- space (4px base) ---- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 110px;

  --gutter: 24px;              /* side padding; 342px column on a 390 phone */
  --sec-pad: 32px;             /* top and bottom padding of a section: one rhythm for every phone section (integrator, pass 2) */
  --wrap: 1240px;              /* page width */
  --wrap-narrow: 760px;        /* text-led sections */
  --measure: 62ch;             /* longest comfortable line */
  --card-pad: 24px;
  --card-pad-lg: 28px;
  --gap: 12px;                 /* between cards */
  --bar-h: 56px;               /* top bar */
  --cta-h: 60px;               /* main button */
  --tap: 44px;                 /* smallest tap target */

  /* ---- radius ---- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r: 14px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* ---- motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);      /* entrances, reveals, anything arriving */
  --ease-in: cubic-bezier(0.6, 0, 0.9, 0.35);     /* exits: leave fast */
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);   /* a move between two states */
  --ease-land: cubic-bezier(0.55, 0, 0.2, 1.12);  /* a value that lands (bars) */
  --dur-press: .1s;
  --dur-hover: .14s;
  --dur-card: .16s;
  --dur-exit: .3s;
  --dur-move: .45s;
  --dur-reveal: .6s;
  --dur-line: .8s;
  --dur-count: 1.2s;
  --rise: 16px;                /* reveal travel; 24px from 768 */
  --stagger: .08s;

  /* ---- the page's one marker and one travelling dot (Chase, message 9: one design, used the same way) ----
     Marker: a ring with a dot in it, drawn in currentColor, so a state only sets `color`:
       lit = --mk-on (white) · not reached yet = --mk-off (the same marker, dim) · where a path ends = --mk-hot (coral, glows).
     Use: border: var(--mk-ring) solid currentColor; background: var(--mk-fill) <the surface it sits on>; color: var(--mk-on);
     (the surface colour fills the gap between ring and dot, so a line under the marker stops at the ring).
     One size per section. Its small diagrams pop in at --stagger, .4s each.
     Travelling dot: --tdot wide, white, white glow; it rides a scroll-driven reading line at 60% of the screen
     (05, 08, 09), and a rail it fills uses --rail-fill. */
  --mk-ring: 1.5px;
  --mk-on: var(--text);
  --mk-off: var(--border-strong);
  --mk-hot: var(--accent);
  --mk-fill: radial-gradient(circle, currentColor 0 27%, transparent 33%);
  --mk-hot-glow: 0 0 10px rgb(var(--accent-rgb) / .7);
  --tdot: 10px;
  --tdot-glow: 0 0 12px 2px rgb(var(--text-rgb) / .55);
  --rail-fill: linear-gradient(180deg, rgb(var(--text-rgb) / .85), rgb(var(--text-rgb) / .85) 78%, var(--accent));

  /* ---- icons (used as masks: only their shape matters) ---- */
  --icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10h11m-4.5-4.5L15 10l-4.5 4.5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 10.5l3.5 3.5 7.5-8' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* ---- layers ---- */
  --z-under: -1;
  --z-base: 1;
  --z-raised: 2;
  --z-bar: 50;
}

@media (min-width: 768px) {
  :root {
    --fs-h1: clamp(56px, 8.4vw, 76px);
    --fs-h2: clamp(36px, 4.8vw, 46px);
    --fs-h3: 21px;
    --fs-lead: 20px;
    --fs-body: 17px;
    --fs-small: 15px;
    --fs-stat: clamp(56px, 8vw, 80px);
    --fs-ghost: clamp(220px, 30vw, 300px);
    --sec-pad: 88px;
    --gutter: 40px;
    --card-pad: 26px;
    --gap: 16px;
    --bar-h: 68px;
    --rise: 24px;
  }
}

@media (min-width: 1024px) {
  :root {
    --fs-h1: clamp(64px, 6.4vw, 96px);
    --fs-h2: clamp(40px, 4vw, 60px);
    --fs-h3: 22px;
    --fs-lead: 22px;
    --fs-stat: clamp(64px, 6vw, 96px);
    --fs-ghost: clamp(260px, 24vw, 380px);
    --sec-pad: 110px;
    --gutter: 48px;
    --card-pad: 28px;
    --card-pad-lg: 40px;
    --gap: 20px;
    --bar-h: 80px;
  }
}

/* ==== 00-topbar.css ==== */
/* 00-topbar.css — logo only. Not sticky: it scrolls away and gives the reader its 56px back. */
.topbar { position: relative; z-index: var(--z-bar); }
.topbar-in { display: flex; align-items: center; height: var(--bar-h); }
.topbar-logo { display: inline-flex; align-items: center; min-height: var(--tap); border-radius: var(--r-xs); }
.topbar-logo img { width: auto; height: 22px; }
@media (min-width: 1024px) { .topbar-logo img { height: 26px; } }

/* ==== 01-base.css ==== */
/* 01-base.css — reset, type, layout primitives, the reveal start states. */

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg);
  color: var(--text);
  scroll-behavior: smooth;
  scroll-padding-top: 16px;
  interpolate-size: allow-keywords;
}
html.reduced { scroll-behavior: auto; }
/* Reduced motion: nothing transitions. Without this, a style pass that runs before styles.css lands lets every
   coloured switch and chip "transition" from the browser default to its colour (seen in 01, 04, 06; pass C). */
html.reduced *, html.reduced *::before, html.reduced *::after { transition-duration: 0s !important; transition-delay: 0s !important; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media (max-width: 767px) { html { scroll-padding-bottom: 96px; } }

html, body { overflow-x: clip; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--w-body);
  line-height: var(--lh-body);
  font-feature-settings: "cv11", "ss01", "ss03";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
strong, b { font-weight: var(--w-bold); color: var(--text); }
::selection { background: rgb(var(--accent-rgb) / .35); color: var(--text); }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent-3);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- type ---- */
h1 {
  font-size: var(--fs-h1);
  font-weight: var(--w-head);
  line-height: var(--lh-h1);
  letter-spacing: var(--track-h1);
}
h2 {
  font-size: var(--fs-h2);
  font-weight: var(--w-head);
  line-height: var(--lh-h2);
  letter-spacing: var(--track-h2);
  color: var(--text);
  text-wrap: balance;
}
h3 {
  font-size: var(--fs-h3);
  font-weight: var(--w-bold);
  line-height: var(--lh-h3);
  letter-spacing: var(--track-h3);
  color: var(--text);
  text-wrap: balance;
}
p { text-wrap: pretty; }
.lead {
  font-size: var(--fs-lead);
  font-weight: var(--w-mid);
  line-height: var(--lh-snug);
  color: var(--text-mid);
  max-width: var(--measure);
}
.body { color: var(--text-mid); max-width: var(--measure); }
.mono { font-family: var(--font-mono); }
.t-white { color: var(--text); }
.t-mid { color: var(--text-mid); }
.t-muted { color: var(--text-muted); }
.t-accent { color: var(--accent); }
.grad-text {
  background: var(--grad-text-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.nums { font-variant-numeric: tabular-nums; }

/* ---- layout ---- */
.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
  position: relative;
  z-index: var(--z-base);
}
.wrap--narrow { max-width: calc(var(--wrap-narrow) + 2 * var(--gutter)); }

.sec {
  position: relative;
  padding-block: var(--sec-pad);
  overflow-x: clip;
  isolation: isolate;
}
.sec--soft { background-color: var(--bg-soft); }
.sec--glow { background-image: var(--glow-tr), var(--glow-bl); }

/* The hairline divider with a red dot, drawn automatically at the top of every section after the first.
   Opt out with .sec--nodiv. The core adds .is-seen when the section arrives, which unfolds the line. */
main > .sec + .sec::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--gutter);
  right: var(--gutter);
  height: 11px;
  margin-top: -5px;
  max-width: var(--wrap);
  margin-inline: auto;
  pointer-events: none;
  z-index: var(--z-raised);
  background:
    radial-gradient(circle, var(--accent) 0 3px, rgb(var(--accent-rgb) / .35) 3.5px, transparent 9px) center / 22px 11px no-repeat,
    linear-gradient(90deg, transparent, var(--hairline) 16%, var(--hairline) 84%, transparent) center / 100% 1px no-repeat;
  transition: transform var(--dur-line) var(--ease-inout), opacity var(--dur-reveal) var(--ease-out);
}
main > .sec.sec--nodiv::before { content: none; }
html.js:not(.reduced) main > .sec + .sec:not(.is-seen)::before { transform: scaleX(.04); opacity: .6; }

.stack > * + * { margin-top: var(--stack, var(--s-4)); }
.grid { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); align-items: center; }
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.only-phone { display: revert; }
.only-desk { display: none; }
@media (min-width: 768px) {
  .only-phone { display: none; }
  .only-desk { display: revert; }
}

/* ---- reveal start states ----
   Content is visible by default. These start states apply ONLY while the script runs (html.js) and motion is allowed
   (not html.reduced). The core adds .is-in to every [data-reveal] when it arrives, and its safety net adds it anyway
   if anything goes wrong, so nothing can stay hidden. Delay comes from --d (set by data-delay or a data-stagger parent). */
html.js:not(.reduced) [data-reveal] {
  transition:
    opacity var(--dur-reveal) var(--ease-out) var(--d, 0s),
    transform var(--dur-reveal) var(--ease-out) var(--d, 0s),
    clip-path var(--dur-line) var(--ease-out) var(--d, 0s),
    stroke-dashoffset var(--dur-line) var(--ease-out) var(--d, 0s);
}
html.js:not(.reduced) [data-reveal]:not(.is-in) { opacity: 0; transform: translate3d(0, var(--rise), 0); }
html.js:not(.reduced) [data-reveal="fade"]:not(.is-in) { transform: none; }
html.js:not(.reduced) [data-reveal="scale"]:not(.is-in) { transform: scale(.96); }
html.js:not(.reduced) [data-reveal="left"]:not(.is-in) { transform: translate3d(calc(-1 * var(--rise)), 0, 0); }
html.js:not(.reduced) [data-reveal="right"]:not(.is-in) { transform: translate3d(var(--rise), 0, 0); }
html.js:not(.reduced) [data-reveal="mask"]:not(.is-in) { opacity: 1; clip-path: inset(0 0 100% 0); transform: translate3d(0, .35em, 0); }
html.js:not(.reduced) [data-reveal="mask"].is-in { clip-path: inset(-20% -5% -20% -5%); }
html.js:not(.reduced) [data-reveal="grow-x"]:not(.is-in) { opacity: 1; transform: scaleX(0); transform-origin: left center; }
html.js:not(.reduced) [data-reveal="grow-y"]:not(.is-in) { opacity: 1; transform: scaleY(0); transform-origin: center top; }
html.js:not(.reduced) [data-reveal="draw"] { stroke-dasharray: 1; }
html.js:not(.reduced) [data-reveal="draw"]:not(.is-in) { opacity: 1; transform: none; stroke-dashoffset: 1; }
html.js:not(.reduced) [data-reveal="none"]:not(.is-in) { opacity: 1; transform: none; }
html.js:not(.reduced) [data-reveal].is-instant { transition: none !important; }

@media print {
  [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}

/* ==== 01-hero.css ==== */
/* 01-hero.css — the first screen.
   Phone budget at 390x664 (PLAN §5): bar 56 + pad 20 + small line 17 + 10 + headline 3 x 46 x 1.02 + 14
   + sub 3 lines + 20 + slot 342x192 + 16 + button 60  =>  button bottom about 624, limit 640. */

.sec--hero {
  padding-top: 20px;
  padding-bottom: var(--s-8);
}
.hero-bg {
  position: absolute;
  inset: calc(-1 * var(--bar-h)) 0 0 0;
  z-index: var(--z-under);
  pointer-events: none;
  -webkit-mask-image: var(--mask-fade-bottom);
  mask-image: var(--mask-fade-bottom);
  background:
    radial-gradient(70% 42% at 92% 14%, rgb(var(--accent-rgb) / .2), transparent 70%),
    radial-gradient(60% 40% at -10% 62%, rgb(var(--deep-rgb) / .2), transparent 70%);
}
.hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--dot-grid) 0 0 / 22px 22px;
  -webkit-mask-image: var(--mask-hero);
  mask-image: var(--mask-hero);
}

.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "sub" "media" "cta"; }

/* ---- small line + headline ---- */
.hero-head { grid-area: head; }
.sec--hero .hero-eyebrow { display: flex; }
.hero-h1 {
  margin-top: 10px;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--track-h1);
  font-weight: var(--w-head);
}
.hero-line {
  display: block;
  /* Room for descenders inside the clipped gradient, without moving the layout. Bottom only:
     equal negative bottom margins collapse to one, so each line still advances exactly one line-height. */
  padding-bottom: .14em;
  margin-bottom: -.14em;
  transform-origin: 0 100%;
}
.hero-l1 {
  color: var(--text);
  background: var(--grad-text-warm);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-accent {
  display: block;
  filter: drop-shadow(0 0 24px rgb(var(--accent-rgb) / .36));
}
.hero-accent .hero-line {
  color: var(--accent);
  background: var(--grad-text-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---- sub-headline ---- */
.hero-sub {
  grid-area: sub;
  margin-top: 14px;
  max-width: 36ch;
  font-size: var(--fs-lead);
  font-weight: var(--w-mid);
  line-height: var(--lh-snug);
  color: var(--text-mid);
}
/* The standing tagline, one clause to a line; the last line is the bright one. */
.hero-sub-l { display: block; }
.hero-sub-key { color: var(--text); font-weight: var(--w-semi); }

/* ---- video slot ---- */
.hero-media { grid-area: media; position: relative; margin-top: 24px; }
.hero-media::after {
  content: "";
  position: absolute;
  left: 12%; right: 12%; bottom: -18px;
  height: 46px;
  z-index: var(--z-under);
  background: var(--glow-center);
  filter: blur(12px);
  pointer-events: none;
}
.hero-cta { grid-area: cta; margin-top: 24px; }

/* ================= the 16-second loop: "It drafts. You approve.", then a plain-words ask =================
   Static markup (no script, reduced motion, before the loop starts) is the finished frame:
   every row drafted and approved, caption showing. The loop-only parts are display:none until .hv--live. */
.hv {
  display: flex;
  flex-direction: column;
  padding: 3.2% 3.8%;   /* % of the slot width: cqw on the container itself would resolve against the viewport */
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}
.hv-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: max(18px, 5.6cqw); }
/* The assistant's name in the slot's title bar (row 01-hero-004), where the Example tag was: a live coral dot and
   the name in the page's own type, the way an app names itself. One line at every width; the switch stays right. */
.hv-title {
  display: flex;
  align-items: center;
  gap: max(6px, 1.6cqw);
  min-width: 0;
  font-size: max(12.5px, 3.3cqw);
  font-weight: var(--w-bold);
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--text);
  white-space: nowrap;
}
/* The agent avatar (DESIGN.md part 3): a rounded square holding the brand's pill-and-knob, knob on (right).
   Sized by its own font-size, so every inner size is in em and scales with the slot. */
.hv-av {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 1em;
  height: 1em;
  font-size: max(18px, 5.3cqw);
  border-radius: .3em;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
}
.hv-av-pill { position: relative; width: .64em; height: .36em; border-radius: var(--r-pill); background: var(--accent); box-shadow: 0 0 .5em rgb(var(--accent-rgb) / .45); }
.hv-av-knob { position: absolute; top: .05em; right: .05em; width: .26em; height: .26em; border-radius: 50%; background: var(--on-accent); }
.hv-av-live { position: absolute; right: -.12em; bottom: -.12em; display: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px rgb(var(--accent-rgb) / .8); }
.hv-title-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hv .hv-switch { --sw-w: max(26px, 7.4cqw); --sw-h: max(15px, 4.2cqw); }
.hv-body { position: relative; flex: 1; display: flex; flex-direction: column; min-height: 0; margin-top: 1.4cqw; }
.hv-rows { display: flex; flex-direction: column; gap: .6cqw; }
.hv-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2.2cqw;
  min-height: max(19px, 5.8cqw);
  padding-bottom: .5cqw;
  border-bottom: 1px solid rgb(var(--text-rgb) / .06);
}
.hv-dot { position: relative; flex: none; width: max(6px, 1.9cqw); height: max(6px, 1.9cqw); border-radius: 50%; background: var(--border-strong); }
.hv-dot-on { position: absolute; inset: 0; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px rgb(var(--accent-rgb) / .8); }
.hv-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: max(12px, 4.3cqw);
  font-weight: var(--w-bold);
  line-height: 1.25;
  color: var(--text);
}
.hv-sep { color: var(--text-muted); font-weight: var(--w-body); }
.hv-status { position: relative; display: inline-block; font-family: var(--font-mono); font-size: max(10.5px, 3.4cqw); font-weight: var(--w-mid); color: var(--text-muted); }
.hv-typing { position: absolute; left: 0; top: 50%; display: none; gap: max(3px, .8cqw); transform: translateY(-50%); }
.hv-typing i { display: block; width: max(4px, 1.2cqw); height: max(4px, 1.2cqw); border-radius: 50%; background: var(--text-muted); }
.hv-chip { position: relative; flex: none; display: inline-grid; place-items: center; font-family: var(--font-mono); font-size: max(10px, 3.1cqw); font-weight: var(--w-bold); line-height: 1.2; }
.hv-approved {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: max(3px, .8cqw);
  padding: max(2px, .5cqw) max(7px, 1.9cqw) max(2px, .5cqw) max(5px, 1.4cqw);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent-3);
}
.hv-approved::before {
  content: "";
  width: max(9px, 2.6cqw);
  height: max(9px, 2.6cqw);
  background: var(--accent);
  -webkit-mask: var(--icon-check) center / contain no-repeat;
  mask: var(--icon-check) center / contain no-repeat;
}
/* Approve and the ripple sit over the Approved pill's own box, so a live row is exactly as tall as a still row. */
.hv-approve {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--grad-btn);
  color: var(--on-accent);
}
.hv-ripple {
  position: absolute;
  left: 50%;
  top: 50%;
  display: none;
  width: 3.2em;
  height: 3.2em;
  translate: -50% -50%;
  border-radius: 50%;
  border: 2px solid var(--accent);
  pointer-events: none;
}
.hv-bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; display: none; background: var(--grad-h); transform-origin: left center; }
.hv-caption {
  margin-top: auto;
  padding-top: 1.6cqw;
  font-size: max(11.5px, 3.7cqw);
  font-weight: var(--w-mid);
  line-height: 1.32;
  color: var(--text-muted);
}
.hv-caption-key { color: var(--text); }
.hv-end {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  padding: 6cqw;
  text-align: center;
  pointer-events: none;
}
.hv-end p { font-weight: var(--w-head); letter-spacing: -0.03em; line-height: 1.12; }
.hv-end-a { display: block; font-size: 7.4cqw; color: var(--text); }
.hv-end-b {
  display: block;
  margin-top: .6cqw;
  font-size: 5.4cqw;
  color: var(--accent);
  background: var(--grad-text-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 14px rgb(var(--accent-rgb) / .4));
}

/* ---- second beat: you ask in plain words, it acts, and it still asks before anything goes out ----
   Loop-only, like the end card: display:none outside .hv--live. While live every piece holds its final layout
   space from the first frame (at opacity 0), so nothing moves while it is being read. It sits over the rows'
   place inside .hv-body; the rows and caption have left by the time it shows. The bubbles copy the shared
   chat-bubble values (DESIGN.md part 3) at the slot's scale: 14px on phones, growing with the slot. */
.hv-chat {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  gap: max(8px, 2.3cqw);
  padding-top: max(4px, 1.2cqw);
  pointer-events: none;
}
.hv-you { display: flex; justify-content: flex-end; }
.hv-bub {
  display: inline-block;
  max-width: 100%;
  padding: max(5px, 1.46cqw) max(10px, 2.9cqw);
  border-radius: max(12px, 3.5cqw);
  font-size: max(14px, 4.1cqw);
  font-weight: var(--w-mid);
  line-height: 1.29;
  color: var(--text);
}
.hv-bub--you {
  max-width: 82%;
  border-bottom-right-radius: max(4px, 1.2cqw);
  border: 1px solid var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent-3);
  transform-origin: 100% 100%;
}
/* avatar beside the reply, aligned to the reply's bottom; Send sits under the reply, left (clear of the pause button) */
.hv-ai {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "av msg" ". act";
  column-gap: max(8px, 2.3cqw);
  row-gap: max(6px, 1.75cqw);
  justify-items: start;
}
.hv-ai-av { grid-area: av; align-self: end; }
.hv-ai-slot { grid-area: msg; position: relative; max-width: 92%; }
.hv-send { grid-area: act; }
.hv-bub--ai {
  border-bottom-left-radius: max(4px, 1.2cqw);
  border: 1px solid var(--accent-line);
  background: var(--card-2);
  transform-origin: 0 100%;
}
/* the assistant's typing bubble, in the slot its reply lands in */
.hv-typ {
  position: absolute;
  left: 0;
  bottom: 0;
  display: none;
  align-items: center;
  justify-content: center;
  gap: max(4px, 1.1cqw);
  width: max(44px, 12.9cqw);
  height: max(28px, 8.2cqw);
  border-radius: max(12px, 3.5cqw);
  border-bottom-left-radius: max(4px, 1.2cqw);
  border: 1px solid var(--accent-line);
  background: var(--card-2);
  transform-origin: 0 100%;
}
.hv-typ i { display: block; width: max(5px, 1.45cqw); height: max(5px, 1.45cqw); border-radius: 50%; background: var(--text-muted); }
/* Send -> Sent: the Approve chip's look, both words in one grid cell so the swap never moves anything */
.hv-send { position: relative; display: inline-grid; place-items: center; font-family: var(--font-mono); font-size: max(12px, 3.1cqw); font-weight: var(--w-bold); line-height: 1; transform-origin: 0 50%; }
.hv-sent {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: max(4px, 1cqw);
  min-height: max(24px, 7cqw);
  padding: 0 max(10px, 2.9cqw) 0 max(8px, 2.3cqw);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent-3);
}
.hv-sent::before {
  content: "";
  width: max(10px, 2.8cqw);
  height: max(10px, 2.8cqw);
  background: var(--accent);
  -webkit-mask: var(--icon-check) center / contain no-repeat;
  mask: var(--icon-check) center / contain no-repeat;
}
.hv-send-a {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--grad-btn);
  color: var(--on-accent);
}

/* live: the script runs the loop (never under reduced motion) */
.hv--live .hv-chat { display: flex; opacity: 0; }
.hv--live .hv-av-live { display: block; opacity: 0; }
.hv--live .hv-typ { display: flex; opacity: 0; }
html.js:not(.reduced) .hv--live .hv-typ i { animation: hv-type 1s var(--ease-inout) infinite; }
html.js:not(.reduced) .hv--live .hv-typ i:nth-child(2) { animation-delay: .15s; }
html.js:not(.reduced) .hv--live .hv-typ i:nth-child(3) { animation-delay: .3s; }
.hv--paused .hv-typ i { animation-play-state: paused !important; }
.hv--live .hv-typing { display: flex; opacity: 0; }
.hv--live .hv-approve { display: grid; opacity: 0; }
.hv--live .hv-ripple { display: block; opacity: 0; }
.hv--live .hv-bar { display: block; transform: scaleX(0); }
.hv--live .hv-end { display: grid; opacity: 0; }
html.js:not(.reduced) .hv--live .hv-typing i { animation: hv-type 1s var(--ease-inout) infinite; }
html.js:not(.reduced) .hv--live .hv-typing i:nth-child(2) { animation-delay: .15s; }
html.js:not(.reduced) .hv--live .hv-typing i:nth-child(3) { animation-delay: .3s; }
.hv--paused .hv-typing i { animation-play-state: paused !important; }
@keyframes hv-type { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-35%); opacity: 1; } }

/* ================= entrance at first paint (CSS only, so it never waits on the script) ================= */
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.reduced) .hero-eyebrow { animation: hero-fade .6s var(--ease-out) .05s both; }
  html.js:not(.reduced) .hero-line { animation: hero-line .9s var(--ease-out) both; }
  html.js:not(.reduced) .hero-l1 { animation-delay: .08s; }
  html.js:not(.reduced) .hero-l2 { animation-delay: .2s; }
  html.js:not(.reduced) .hero-l3 { animation-delay: .32s; }
  html.js:not(.reduced) .hero-sub { animation: hero-rise .7s var(--ease-out) .5s both; }
  html.js:not(.reduced) .hero-media { animation: hero-media .8s var(--ease-out) .62s both; }
  html.js:not(.reduced) .hero-cta { animation: hero-rise .6s var(--ease-out) .78s both; }
}
@keyframes hero-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hero-line { from { opacity: 0; transform: translate3d(0, .45em, 0) rotate(2deg); } to { opacity: 1; transform: none; } }
@keyframes hero-rise { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }
@keyframes hero-media { from { opacity: 0; transform: translate3d(0, 12px, 0) scale(.985); } to { opacity: 1; transform: none; } }

/* ================= phone: keep the button on the first screen ================= */
@media (max-width: 767px) {
  /* Air (Chase, 2026-11-13: "too bunched up at the top"). The two-line sub-headline frees a line; it goes to the gaps.
     On a taller phone the extra height becomes more air in the same three gaps, never a taller panel. */
  .sec--hero { --hero-air: clamp(0px, calc((100svh - 664px) * .1), 18px); }
  .hero-sub {
    margin-top: calc(24px + var(--hero-air));
    max-width: none;
    font-size: clamp(19px, 5.4vw, 22px);
    font-weight: var(--w-semi);
    line-height: 1.24;
    letter-spacing: -0.012em;
    color: var(--text-mid);
  }
  .hero-sub-key { font-weight: var(--w-head); }
  .hero-media { margin-top: calc(30px + var(--hero-air)); }
  .hero-cta { margin-top: calc(30px + var(--hero-air)); }
  /* The slot gives way before the button does: it narrows (keeping 16:9) only when the screen is too short. */
  .hero-media .hv { width: min(100%, max(200px, calc((100svh - 330px - 3.06 * var(--fs-h1)) * 16 / 9))); }
  /* Type floors inside the slot (integrator, findings 01.1 and 01.2). The slot keeps its size and the button
     its place: the row states go to 12px, the key line "It drafts. You approve." to 14px on a line of its own;
     tighter line boxes hold every row and the title bar at the height they had. */
  .hv-title { font-size: 13px; line-height: 1.05; }
  .hv-title-mark { font-size: 18px; }
  .hv-status { font-size: max(12px, 3.4cqw); }
  .hv-chip { font-size: max(12px, 3.1cqw); line-height: 1; }
  .hv-caption { padding-top: 1cqw; line-height: 1.25; }
  .hv-caption-key { display: block; font-size: max(14px, 3.7cqw); font-weight: var(--w-semi); }
}
@media (max-width: 767px) and (max-height: 600px) {
  .sec--hero { padding-top: 12px; }
  .hero-sub { font-size: 16px; margin-top: 10px; }
  .hero-media { margin-top: 14px; }
  .hero-cta { margin-top: 12px; }
}

/* ================= tablet ================= */
@media (min-width: 768px) {
  .sec--hero { padding-top: 32px; padding-bottom: var(--s-9); }
  .hero-accent .hero-line { display: inline-block; }
  .hero-sub { margin-top: 20px; max-width: 34ch; }
  .hero-media { margin-top: 32px; max-width: 680px; }
  .hero-cta { margin-top: 28px; }
}

/* ================= desktop: headline across, then copy left and the slot right ================= */
@media (min-width: 1024px) {
  .sec--hero { padding-top: 48px; padding-bottom: 104px; }
  .hero-bg {
    background:
      radial-gradient(48% 52% at 78% 34%, rgb(var(--accent-rgb) / .17), transparent 70%),
      radial-gradient(40% 40% at 4% 92%, rgb(var(--deep-rgb) / .2), transparent 70%);
  }
  .hero-grid {
    grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas:
      "head head"
      "sub  media"
      "cta  media"
      ".    media";
    column-gap: clamp(40px, 5vw, 80px);
  }
  .hero-head { margin-bottom: 40px; }
  .sec--hero .hero-eyebrow { font-size: 13px; }
  .hero-h1 { margin-top: 16px; }
  .hero-sub {
    margin-top: 0;
    padding-top: 22px;
    max-width: 26ch;
    font-size: clamp(22px, 1.9vw, 27px);
    line-height: 1.38;
    border-top: 1px solid var(--border);
  }
  .hero-media { margin-top: 0; max-width: none; }
  .hero-media::after { bottom: -26px; height: 70px; }
  .hero-cta { margin-top: 36px; }
}

/* ================= pause control (WCAG 2.2.2): icon only, keyboard reachable, 44px hit area =================
   Absolutely placed in the slot's bottom-right corner, so it never moves the first-screen layout.
   Shown only while the loop is live (no script and reduced motion have no loop, so no button). */
.hv-pause {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: var(--z-raised);
  display: none;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hv--live .hv-pause { display: grid; }
.hv--live .hv-caption { padding-right: 30px; }
.hv-pause-ic {
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgb(var(--bg-rgb) / .72);
  border: 1px solid var(--border-strong);
  transition: border-color var(--dur-hover) var(--ease-out), background var(--dur-hover) var(--ease-out);
}
.hv-pause-ic::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 8px; height: 9px;
  transform: translate(-50%, -50%);
  background: linear-gradient(90deg, var(--text-mid) 0 3px, transparent 3px 5px, var(--text-mid) 5px 8px);
}
.hv--held .hv-pause-ic::before {
  width: 8px; height: 10px;
  margin-left: 1px;
  background: var(--accent);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.hv-pause:hover .hv-pause-ic { border-color: var(--accent-line); }
/* the focus ring goes round the whole 44px control, not only the 26px icon (finding 01.4) */
.hv-pause:focus-visible { outline: 2px solid var(--accent-3); outline-offset: -3px; border-radius: 50%; }

/* ==== 02-components.css ==== */
/* 02-components.css — shared components. Every section builds from these.
   Copy-paste examples for each live in CONTRACT.md "As built". */

/* ================= Eyebrow: mono, coral, uppercase, with the 24px red line ================= */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: var(--w-mid);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--accent);
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-h);
  transform-origin: left center;
  transition: transform .4s var(--ease-out) var(--d, 0s);
}
html.js:not(.reduced) [data-reveal]:not(.is-in) .eyebrow::before,
html.js:not(.reduced) .eyebrow[data-reveal]:not(.is-in)::before { transform: scaleX(0); }

/* ================= Section head: eyebrow + h2 + lead ================= */
.sec-head { max-width: 860px; position: relative; z-index: var(--z-base); }
.sec-head > .eyebrow + h2 { margin-top: var(--s-3); }
/* Phones: most section eyebrows print at 768 and up only (copy.json phone:false). The gap belongs to the eyebrow, so a
   hidden eyebrow leaves no 12px hole above the h2, and .only-desk wins over the eyebrow's own display. */
@media (max-width: 767px) {
  /* one class of weight, so a section's own ".x-eyebrow { display: none }" still wins */
  :where(.sec-head) > .eyebrow { display: flex; width: fit-content; margin-bottom: var(--s-3); }
  :where(.sec-head--center) > .eyebrow { margin-inline: auto; }
  .sec-head > .eyebrow + h2 { margin-top: 0; }
  .eyebrow.only-desk { display: none; }
}
.sec-head > h2 + .lead,
.sec-head > h2 + p { margin-top: var(--s-4); }
.sec-head + * { margin-top: var(--s-6); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head--center .eyebrow { justify-content: center; }
.sec-head--center .lead { margin-inline: auto; }
@media (min-width: 1024px) { .sec-head + * { margin-top: var(--s-7); } }

/* ================= Ghost numeral: huge, faint, behind the section ================= */
.ghost {
  position: absolute;
  top: calc(var(--sec-pad) * .25);
  right: calc(var(--gutter) * .5 - .06em);
  z-index: 0;
  font-family: var(--font-sans);
  font-weight: var(--w-head);
  font-size: var(--fs-ghost);
  line-height: .8;
  letter-spacing: -0.06em;
  color: transparent;
  background: linear-gradient(180deg, rgb(var(--text-rgb) / .075), rgb(var(--text-rgb) / 0) 85%);
  -webkit-background-clip: text;
  background-clip: text;
  user-select: none;
  pointer-events: none;
}
.ghost--left { right: auto; left: calc(var(--gutter) * .5 - .04em); }

/* ================= Divider band (inside a section; between sections it is automatic) ================= */
.divider {
  position: relative;
  height: 11px;
  margin-block: var(--s-7);
  background:
    radial-gradient(circle, var(--accent) 0 3px, rgb(var(--accent-rgb) / .35) 3.5px, transparent 9px) center / 22px 11px no-repeat,
    linear-gradient(90deg, transparent, var(--hairline) 16%, var(--hairline) 84%, transparent) center / 100% 1px no-repeat;
}

/* ================= Cards ================= */
.card {
  position: relative;
  background: linear-gradient(180deg, var(--card-2), var(--card));
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: var(--card-pad);
  box-shadow: var(--shadow-card);
  color: var(--text-mid);
}
.card > * + * { margin-top: var(--s-3); }
.card h3 { color: var(--text); }
.card--big { border-radius: var(--r-lg); padding: var(--card-pad-lg); }
.card--glow {
  border-color: rgb(var(--accent-rgb) / .42);
  background:
    radial-gradient(120% 90% at 100% 0%, rgb(var(--accent-rgb) / .16), transparent 62%),
    linear-gradient(180deg, var(--card-2), var(--card));
  box-shadow: var(--shadow-card), var(--shadow-glow);
}
.card--muted {
  background: var(--card);
  border-color: var(--border);
  box-shadow: none;
  color: var(--text-muted);
}
.card--muted h3 { color: var(--text-mid); }
@media (hover: hover) {
  .card--lift { transition: transform var(--dur-card) var(--ease-out), border-color var(--dur-card) var(--ease-out); }
  .card--lift:hover { transform: translateY(-2px); border-color: rgb(var(--accent-rgb) / .5); }
}

/* ================= Stat card: loud number, label, source line, 3px red top border ================= */
.stat {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--card-2), var(--card));
  border: 1px solid var(--border);
  border-top-color: transparent;
  border-radius: var(--r);
  padding: calc(var(--card-pad) + 3px) var(--card-pad) var(--card-pad);
  box-shadow: var(--shadow-card);
}
.stat::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad-h);
  transform-origin: left center;
  transition: transform .5s var(--ease-out) calc(var(--d, 0s) + .1s);
}
html.js:not(.reduced) .stat[data-reveal]:not(.is-in)::before { transform: scaleX(0); }
.stat-num {
  font-family: var(--font-mono);
  font-weight: var(--w-bold);
  font-size: var(--fs-stat);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 28px rgb(var(--accent-rgb) / .35);
}
.stat-num + .stat-num { margin-top: var(--s-2); }
.stat-label {
  margin-top: var(--s-3);
  color: var(--text-mid);
  font-size: var(--fs-body);
  line-height: var(--lh-snug);
}
.stat-label strong { color: var(--text); }
.stat-src {
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--border);
  font-size: var(--fs-micro);
  line-height: 1.45;
  color: var(--text-muted);
}

/* ================= Chip and chip row ================= */
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 5px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  background: rgb(var(--text-rgb) / .025);
  font-family: var(--font-mono);
  font-size: var(--fs-chip);
  font-weight: var(--w-mid);
  line-height: 1.3;
  color: var(--text-mid);
  white-space: nowrap;
}
.chip--accent { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-3); }
.chip--dot::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px rgb(var(--accent-rgb) / .8);
}

/* ================= Small line: the quiet line under a button, a card set, a stat ================= */
.small {
  font-size: var(--fs-small);
  line-height: var(--lh-snug);
  color: var(--text-muted);
}
.small--center { text-align: center; margin-inline: auto; }

/* ================= Tag: "Example" / "Sample business" ================= */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-xs);
  background: rgb(var(--bg-rgb) / .72);
  font-family: var(--font-mono);
  font-size: var(--fs-tag);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-tag);
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--accent-3);
}
.tag::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
}
.tag--corner { position: absolute; top: 10px; right: 10px; z-index: var(--z-raised); }

/* ================= Quote card ================= */
.quote {
  position: relative;
  padding: calc(var(--card-pad) + 18px) var(--card-pad) var(--card-pad);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--card-2), var(--card));
  box-shadow: var(--shadow-card);
}
.quote::before {
  content: "\201C" / "";
  position: absolute;
  top: 6px;
  left: calc(var(--card-pad) - 4px);
  font-family: var(--font-sans);
  font-weight: var(--w-head);
  font-size: 88px;
  line-height: 1;
  color: var(--accent);
  opacity: .32;
}
.quote blockquote p {
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
  font-weight: var(--w-mid);
  color: var(--text);
}
.quote-by {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-5);
  font-size: var(--fs-small);
  line-height: 1.35;
  color: var(--text-muted);
}
.quote-name { display: block; color: var(--text); font-weight: var(--w-bold); }

/* ================= Avatar: a real photo with a coral ring ================= */
.avatar {
  width: 72px;
  height: 72px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 4px rgb(var(--accent-rgb) / .14), 0 10px 30px -8px rgb(var(--accent-rgb) / .5);
  background: var(--card);
}
.avatar--sm { width: 48px; height: 48px; }
.avatar--lg { width: 120px; height: 120px; border-width: 3px; }

/* ================= Switch: the pill-and-circle shape of the mark, as a UI switch ================= */
.switch {
  --sw-w: 44px;
  --sw-h: 26px;
  position: relative;
  display: inline-block;
  flex: none;
  width: var(--sw-w);
  height: var(--sw-h);
  border-radius: var(--r-pill);
  background: var(--border-strong);
  box-shadow: inset 0 0 0 1px rgb(var(--text-rgb) / .06);
  transition: background-color var(--dur-move) var(--ease-inout), box-shadow var(--dur-move) var(--ease-inout);
}
.switch::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: calc(var(--sw-h) - 6px);
  height: calc(var(--sw-h) - 6px);
  border-radius: 50%;
  background: var(--text-muted);
  transition: transform var(--dur-move) var(--ease-land), background-color var(--dur-move) var(--ease-inout);
}
.switch.is-on { background: var(--accent); box-shadow: 0 0 16px -2px rgb(var(--accent-rgb) / .7); }
.switch.is-on::after { transform: translateX(calc(var(--sw-w) - var(--sw-h))); background: var(--on-accent); }

/* ================= Phone-frame shell ================= */
.phone {
  position: relative;
  width: min(100%, 272px);
  aspect-ratio: 9 / 19;
  margin-inline: auto;
  padding: 10px;
  border-radius: 44px;
  background: linear-gradient(160deg, var(--card-2), var(--bg) 70%);
  border: 1px solid var(--border-strong);
  box-shadow:
    inset 0 0 0 1px rgb(var(--text-rgb) / .05),
    0 40px 80px -30px rgb(var(--shadow-rgb) / .9),
    0 30px 90px -40px rgb(var(--accent-rgb) / .5);
}
.phone::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 50%;
  width: 84px;
  height: 22px;
  translate: -50% 0;
  border-radius: var(--r-pill);
  background: var(--bg);
  z-index: var(--z-raised);
}
.phone-screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 34px;
  background: var(--bg-soft);
  padding: 44px 14px 16px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-mid);
}
@media (min-width: 1024px) { .phone { width: min(100%, 300px); } }

/* ================= Accordion row (<details>) ================= */
.acc {
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--card-2), var(--card));
  transition: border-color var(--dur-card) var(--ease-out);
}
.acc + .acc { margin-top: var(--s-3); }
.acc[open] { border-color: var(--accent-line); }
.acc > summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 14px 56px 14px var(--card-pad);
  list-style: none;
  cursor: pointer;
  font-size: var(--fs-body);
  font-weight: var(--w-bold);
  line-height: 1.35;
  color: var(--text);
  border-radius: var(--r);
}
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background:
    linear-gradient(var(--accent), var(--accent)) center / 10px 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) center / 2px 10px no-repeat;
  transition: transform var(--dur-move) var(--ease-inout);
}
.acc[open] > summary::after { transform: rotate(45deg); }
.acc-a { padding: 0 var(--card-pad) var(--card-pad); color: var(--text-mid); }
.acc-a > * + * { margin-top: var(--s-3); }
.acc::details-content {
  block-size: 0;
  overflow-y: clip;
  transition: block-size var(--dur-move) var(--ease-inout), content-visibility var(--dur-move) allow-discrete;
}
.acc[open]::details-content { block-size: auto; }

/* ================= Fold: the page's one disclosure (phones only) =================
   <details class="fold" data-fold open>
     <summary class="fold-sum"><span class="fold-label">Label from copy.json</span><span class="fold-icon" aria-hidden="true"></span></summary>
     <div class="fold-body">…</div>
   </details>
   Open in the markup, so with no script nothing is lost and the checks find every word. Under 768px the core closes
   it on boot (00-core.js); a tap grows it open and fades the body in. At 768 and up nothing folds: the label is hidden
   and the body simply shows. One look everywhere: a 52px card row, 15px semibold label, a chevron in a ring that
   turns over when open. Section 11 draws the same row as the last row of its question panel. */
.fold { display: block; }
.fold-sum {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: 52px;
  padding: 6px 12px 6px var(--s-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--card-2), var(--card));
  box-shadow: inset 0 1px 0 rgb(var(--text-rgb) / .05);
  list-style: none;
  cursor: pointer;
  font-size: 15px;
  font-weight: var(--w-semi);
  line-height: 1.3;
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
}
.fold-sum::-webkit-details-marker { display: none; }
.fold-sum::marker { content: ""; }
.fold-sum:focus-visible { outline: 2px solid var(--accent-3); outline-offset: 2px; }
.fold-label { flex: 1; min-width: 0; }
.fold-icon {
  position: relative;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: rgb(var(--text-rgb) / .04);
}
.fold-icon::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  margin: -5.5px 0 0 -3.5px;
  border-right: 2px solid var(--text-mid);
  border-bottom: 2px solid var(--text-mid);
  transform: rotate(45deg);
}
html:not(.reduced) .fold-icon { transition: transform var(--dur-move) var(--ease-inout); }
html:not(.reduced) .fold-sum { transition: border-color var(--dur-hover) var(--ease-out), background-color var(--dur-hover) var(--ease-out); }
@media (hover: hover) { .fold-sum:hover { border-color: rgb(var(--text-rgb) / .22); } }
.fold[open] > .fold-sum .fold-icon { transform: rotate(180deg); }
.fold-body { margin-top: var(--s-3); }
@media (min-width: 768px) {
  .fold > .fold-sum { display: none; }
  .fold-body { margin-top: 0; }
}

/* ================= Main button (comes only from partials/cta.html) ================= */
.cta {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: 100%;
}
.btn-cta {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--cta-h);
  padding: 0 calc(var(--cta-h) + 4px) 0 28px;
  border-radius: var(--r-pill);
  background: var(--grad-btn);
  box-shadow: var(--shadow-btn);
  color: var(--on-accent);
  font-family: var(--font-sans);
  font-size: var(--fs-btn);
  font-weight: var(--w-head);
  letter-spacing: -0.01em;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out);
}
/* the knob: a dark circle at the right, like the mark's switch in the ON position */
.btn-cta::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 8px;
  width: calc(var(--cta-h) - 16px);
  height: calc(var(--cta-h) - 16px);
  margin-top: calc((var(--cta-h) - 16px) / -2);
  border-radius: 50%;
  background: var(--on-accent);
  box-shadow: inset 0 0 0 1px rgb(var(--text-rgb) / .06);
  transition: transform var(--dur-move) var(--ease-out);
  z-index: -1;
}
/* the arrow inside the knob */
.btn-cta::before {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(8px + (var(--cta-h) - 16px) / 2 - 10px);
  width: 20px;
  height: 20px;
  margin-top: -10px;
  background: var(--accent);
  -webkit-mask: var(--icon-arrow) center / contain no-repeat;
  mask: var(--icon-arrow) center / contain no-repeat;
  transition: transform var(--dur-move) var(--ease-out);
  z-index: 1;
}
@media (hover: hover) {
  .btn-cta:hover { transform: translateY(-1px); box-shadow: var(--shadow-btn), 0 0 0 4px rgb(var(--accent-rgb) / .14); }
  .btn-cta:hover::after, .btn-cta:hover::before { transform: translateX(4px); }
}
.btn-cta:active { transform: scale(.98); transition-duration: var(--dur-press); }
.btn-cta:focus-visible { outline: 2px solid var(--accent-3); outline-offset: 3px; border-radius: var(--r-pill); }

/* Breathing glow ring. Wrap the include in <div class="cta-breathe" data-loop> (the hero does).
   The core adds .is-playing only while it is on screen, so it pauses off screen and never runs under reduced motion. */
.cta-breathe .btn-cta { overflow: visible; }
.cta-breathe .cta::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--cta-h);
  border-radius: var(--r-pill);
  box-shadow: 0 0 0 6px rgb(var(--accent-rgb) / .16), 0 0 36px 6px rgb(var(--accent-rgb) / .32);
  opacity: 0;
  pointer-events: none;
}
/* four breaths, then still (finding page.8: a glow that never stops); it breathes again each time it comes back on screen */
html.js:not(.reduced) .cta-breathe[data-loop].is-playing .cta::before { animation: dh-breathe 3.2s var(--ease-inout) 4; }
@keyframes dh-breathe { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }

.cta-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: var(--fs-small);
  line-height: 1.35;
  color: var(--text-muted);
  text-align: center;
}
.cta-note svg { flex: none; width: 15px; height: 15px; color: var(--accent); }
/* "Or talk to Chase first": under every main button on tablet and desktop. On phones the bottom bar carries it. */
.cta-talk { display: none; }
@media (min-width: 768px) {
  .cta-talk {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    min-height: var(--tap);
    margin-top: -6px;
    font-size: var(--fs-small);
    font-weight: var(--w-semi);
    color: var(--text);
    text-decoration: underline;
    text-decoration-color: rgb(var(--accent-rgb) / .7);
    text-underline-offset: 4px;
  }
  .band .cta-talk { align-self: center; }
}

@media (min-width: 768px) {
  .cta { width: fit-content; max-width: 100%; align-items: stretch; }
  .btn-cta { width: auto; min-width: 300px; }
  .cta-note { justify-content: flex-start; }
}

/* Ghost button for "Talk to Chase" (a data-book link) */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 0 18px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  background: rgb(var(--text-rgb) / .03);
  color: var(--text);
  font-size: var(--fs-small);
  font-weight: var(--w-semi);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--dur-hover) var(--ease-out), background-color var(--dur-hover) var(--ease-out);
}
@media (hover: hover) { .btn-ghost:hover { border-color: var(--accent-line); background: var(--accent-soft); } }
.link {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: rgb(var(--accent-rgb) / .7);
  text-underline-offset: 4px;
}

/* ================= Button band: one framing line, the button, the small line ================= */
.band {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-5);
  padding: var(--s-7) var(--card-pad);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background:
    radial-gradient(70% 120% at 50% 0%, rgb(var(--accent-rgb) / .16), transparent 70%),
    linear-gradient(180deg, var(--card-2), var(--bg));
  text-align: center;
  overflow: hidden;
}
.band-lead {
  font-size: clamp(22px, 6vw, 32px);
  font-weight: var(--w-head);
  letter-spacing: var(--track-h2);
  line-height: 1.12;
  color: var(--text);
  text-wrap: balance;
  max-width: 22ch;
}
.band .cta { align-items: center; width: 100%; max-width: 420px; }
.band .cta-note { justify-content: center; }
.band-alt { font-size: var(--fs-small); color: var(--text-muted); }
@media (min-width: 768px) { .band .btn-cta { width: 100%; } }

/* ================= Video slot frame (16:9, never empty) ================= */
.frame169 {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--r);
  border: 1px solid var(--border-strong);
  background:
    var(--dot-grid) 0 0 / 14px 14px,
    radial-gradient(90% 70% at 85% 0%, rgb(var(--accent-rgb) / .12), transparent 60%),
    linear-gradient(180deg, var(--card-2), var(--bg-soft));
  box-shadow: inset 0 1px 0 rgb(var(--text-rgb) / .05), 0 30px 60px -30px rgb(var(--accent-rgb) / .45);
  overflow: hidden;
  container-type: inline-size;
}

/* ==== 02-where.css ==== */
/* 02-where.css — "You got good. Then you got buried."
   A note from Chase (his face, his own words, a pull quote), then the old week struck through line by line,
   then the burnout stat. The coral strike is the section's one coral movement the eye follows.
   Finished state is the markup; every start state is keyed to an element carrying data-reveal. */

.where-bg {
  position: absolute;
  inset: 0;
  z-index: var(--z-under);
  pointer-events: none;
  background:
    radial-gradient(60% 28% at 0% 12%, rgb(var(--accent-rgb) / .1), transparent 70%),
    radial-gradient(50% 22% at 100% 64%, rgb(var(--deep-rgb) / .14), transparent 72%);
}

/* ================= the note ================= */
.where-intro { position: relative; z-index: var(--z-base); }

.where-from {
  display: flex;
  align-items: flex-end;
  gap: var(--s-4);
  margin-top: var(--s-5);
}
/* Chase is the shared circle avatar here (the page has one portrait, in section 08) */
.where-from-text { padding-bottom: var(--s-2); min-width: 0; }
/* Row 02-where-003, set as a signed line: who he is on top in quiet type, his name under it in the headline weight,
   and the drawn swoosh under the name only. Two deliberate lines at every width, never a long tracked caps bar. */
.where-label { color: var(--text); }
.where-label-a {
  display: block;
  font-size: var(--fs-micro);
  font-weight: var(--w-semi);
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--text-mid);
  white-space: nowrap;
}
.where-label-name {
  display: block;
  margin-top: 2px;
  font-size: 26px;
  font-weight: var(--w-head);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--text);
}
.where-sign { display: block; width: 92px; height: 10px; margin-top: 4px; overflow: visible; }
.where-sign path { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.where-sign path { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset .9s var(--ease-inout) .35s; }
.where-avatar { transition: transform var(--dur-reveal) var(--ease-out), opacity var(--dur-reveal) var(--ease-out); }
html.js:not(.reduced) .where-from:not(.is-in) .where-sign path { stroke-dashoffset: 1; }
html.js:not(.reduced) .where-from:not(.is-in) .where-avatar { opacity: 0; transform: scale(.94); }

.sec--where .where-h2 { margin-top: var(--s-5); max-width: 15ch; }
.where-h2-b { display: block; }
.where-h2-b {
  color: var(--accent);
  background: var(--grad-text-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.where-letter {
  position: relative;
  margin-top: var(--s-6);
  padding-left: var(--s-5);
  max-width: 36em;
}
.where-margin {
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 2px;
  border-radius: 2px;
  background: var(--border);
}
.where-margin-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, var(--accent), var(--accent-2) 70%, rgb(var(--accent-rgb) / 0));
  transform-origin: 50% 0;
  transform: scaleY(var(--where-p, 1));
}
.where-margin::before {           /* the page's marker (00-tokens.css), where the margin line starts */
  content: "";
  position: absolute;
  left: -5px; top: -9px;
  width: 12px; height: 12px;
  border-radius: 50%;
  color: var(--mk-on);
  border: var(--mk-ring) solid currentColor;
  background: var(--mk-fill) var(--bg);
}
.sec--where .where-p {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--text-mid);
}
.sec--where .where-p + .where-p { margin-top: var(--s-4); }
.sec--where .where-p--key {
  margin-block: var(--s-6);
  font-size: 23px;
  line-height: 1.25;
  font-weight: var(--w-head);
  letter-spacing: -0.02em;
  color: var(--text);
}
.sec--where .where-p--turn { color: var(--text); font-weight: var(--w-semi); }

/* the pull quote: set apart, larger, his caption under it */
.where-pull {
  position: relative;
  margin-top: var(--s-7);
  padding-top: var(--s-6);
  border-top: 1px solid var(--border);
}
.where-pull-mark { width: 38px; height: 29px; fill: var(--accent); opacity: .9; filter: drop-shadow(0 0 14px rgb(var(--accent-rgb) / .45)); }
.sec--where .where-pull-q p {
  margin-top: var(--s-4);
  font-size: 26px;
  line-height: 1.22;
  font-weight: var(--w-bold);
  letter-spacing: -0.02em;
  color: var(--text);
  text-wrap: balance;
}
.where-pull-key {
  color: var(--accent);
  background: var(--grad-text-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.where-by {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-5);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: var(--w-mid);
  letter-spacing: .06em;
  color: var(--text-muted);
}
.where-by::before { content: ""; flex: none; width: 24px; height: 2px; border-radius: 2px; background: var(--grad-h); }

/* ================= today, and with your AIOS ================= */
.where-week {
  position: relative;
  z-index: var(--z-base);
  margin-top: var(--s-8);
  padding: var(--s-5) var(--s-5) var(--s-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background:
    radial-gradient(90% 40% at 100% 0%, rgb(var(--accent-rgb) / .09), transparent 70%),
    linear-gradient(180deg, var(--card-2), var(--card));
  box-shadow: var(--shadow-card);
}
.where-keys {
  display: grid;
  gap: var(--s-2);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--border-strong);
}
.where-key {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-tag);
  font-weight: var(--w-bold);
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.4;
}
.where-key--today { color: var(--text-muted); }
.where-key--after { color: var(--accent); }
.where-key-mark { flex: none; border-radius: 2px; }
.where-key--today .where-key-mark {
  width: 22px; height: 8px;
  background: linear-gradient(var(--accent), var(--accent)) center / 100% 2px no-repeat, var(--border-strong);
}
.where-key--after .where-key-mark {
  width: 8px; height: 8px; margin-inline: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px rgb(var(--accent-rgb) / .8);
}

.where-rows { margin: 0; }
.where-row {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  column-gap: var(--s-2);
  padding-block: var(--s-5);
}
.where-row + .where-row { border-top: 1px solid var(--border); }
/* the cue sits about a third of a screen below the row's top, so the strike fires when the row is
   near the reader's eye line (about 62% down the screen), not when it first peeks in */
.where-cue {
  position: absolute;
  top: min(24vh, 200px);
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.sec--where { --where-ink: color-mix(in srgb, var(--accent-deep) 80%, var(--card)); }
.where-today {
  grid-column: 1 / -1;
  font-size: 19px;
  line-height: 1.38;
  font-weight: var(--w-semi);
  letter-spacing: -0.01em;
  color: var(--text-mid);
  transition: color .5s var(--ease-out) 1.1s;
}
/* The finished strike (no script, reduced motion) is a coral line-through. With script the line-through is
   handed to drawn pen lines (02-where.js), one per wrapped line, that sweep left to right in turn. */
.where-strike {
  text-decoration: line-through;
  text-decoration-color: var(--where-ink);
  text-decoration-thickness: 2px;
  text-decoration-skip-ink: none;
}
.where--pen .where-strike { text-decoration-color: transparent; }
.where-pen {
  position: absolute;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 8px rgb(var(--accent-rgb) / .55);
  transform-origin: left center;
  transform: scaleX(0);
  pointer-events: none;
}
/* the pen strikes in bright coral, then the ink settles to a darker coral so the struck words stay readable (4.5:1) */
.where-pen.is-drawn {
  transform: scaleX(1);
  background: var(--where-ink);
  box-shadow: none;
  transition: transform .34s var(--ease-inout) var(--pd, 0s),
    background-color .7s var(--ease-out) calc(var(--pd, 0s) + 1.1s),
    box-shadow .7s var(--ease-out) calc(var(--pd, 0s) + 1.1s);
}
.where-pen.is-now { transition: none; }
.where-link {
  grid-column: 1;
  align-self: start;
  margin-top: calc(var(--s-3) + 4px);
  width: 16px;
  height: 16px;
  background: var(--accent);
  -webkit-mask: var(--icon-arrow) center / contain no-repeat;
  mask: var(--icon-arrow) center / contain no-repeat;
  transition: opacity .3s var(--ease-out) .4s, transform .45s var(--ease-out) .4s;
}
.where-after {
  grid-column: 2;
  margin-top: var(--s-3);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--text);
  transition: opacity var(--dur-reveal) var(--ease-out) .42s, transform var(--dur-reveal) var(--ease-out) .42s;
}
html.js:not(.reduced) .where-cue:not(.is-in) ~ .where-today { color: var(--text); }
html.js:not(.reduced) .where-cue:not(.is-in) ~ .where-link { opacity: 0; transform: translateX(-8px); }
/* the answer waits in plain sight, dimmed, so a row never shows an empty stretch under its quote; it brightens as the strike lands */
html.js:not(.reduced) .where-cue:not(.is-in) ~ .where-after { opacity: .34; transform: translateY(4px); }

.where-small { margin-top: var(--s-5); max-width: 34ch; position: relative; z-index: var(--z-base); }

/* ================= the stat ================= */
.where-stat { margin-top: var(--s-7); z-index: var(--z-base); }
.where-stat-pair { display: grid; gap: var(--s-6); }
.where-meter {
  display: block;
  height: 6px;
  margin-top: var(--s-4);
  border-radius: var(--r-pill);
  background: var(--border);
  overflow: hidden;
}
.where-meter i {
  display: block;
  width: calc(var(--v) * 100%);
  height: 100%;
  border-radius: inherit;
  background: var(--grad-h);
  box-shadow: 0 0 12px rgb(var(--accent-rgb) / .6);
  transform-origin: left center;
  transition: transform var(--dur-count) var(--ease-out) .25s;
}
.where-stat-part + .where-stat-part .where-meter i { transition-delay: .55s; }
html.js:not(.reduced) .where-stat:not(.is-in) .where-meter i { transform: scaleX(0); }
.where-stat .stat-label { margin-top: var(--s-4); }

/* ================= tablet ================= */
@media (min-width: 768px) {
  .sec--where .where-p--key { font-size: 28px; }
  .sec--where .where-pull-q p { font-size: 32px; }
  .where-week { padding: var(--s-6) var(--s-6) var(--s-3); }
  .where-today { font-size: 22px; }
  .where-stat-pair { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s-7); }
}

/* ================= desktop: the portrait holds on the left while the letter is read ================= */
@media (min-width: 1024px) {
  .where-intro {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    column-gap: 80px;
    grid-template-areas: "from eyebrow" "from h2" "from letter";
    grid-template-rows: auto auto 1fr;
  }
  .where-eyebrow { grid-area: eyebrow; justify-self: start; }
  .where-from {
    grid-area: from;
    align-self: start;
    position: sticky;
    top: var(--s-7);
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-4);
    margin-top: 0;
  }
  /* the shared avatar at its large size (.avatar--lg values), held in the sticky column */
  .where-avatar { width: 120px; height: 120px; border-width: 3px; }
  .where-from-text { padding-bottom: 0; }
  .where-label-a { font-size: 14px; }
  .where-label-name { font-size: 30px; }
  .where-sign { width: 108px; }
  .sec--where .where-h2 { grid-area: h2; max-width: 16ch; }
  .where-letter { grid-area: letter; padding-left: var(--s-6); max-width: 760px; }
  .sec--where .where-letter > .where-p { max-width: 34em; }
  .sec--where .where-p--key { font-size: 32px; }
  .sec--where .where-pull-q p { font-size: 38px; line-height: 1.16; }

  .where-week { margin-top: var(--s-9); padding: var(--s-6) var(--s-7) var(--s-3); }
  .where-keys, .where-row {
    grid-template-columns: minmax(0, 1fr) 88px minmax(0, 1fr);
    column-gap: var(--s-5);
    align-items: center;
  }
  .where-key--after { grid-column: 3; }
  .where-row { padding-block: var(--s-5); }
  .where-today { grid-column: 1; font-size: 23px; }
  .where-link {
    grid-column: 2;
    align-self: center;
    margin-top: 0;
    width: 100%;
    height: 14px;
    -webkit-mask: none;
    mask: none;
    background:
      linear-gradient(90deg, rgb(var(--accent-rgb) / .15), var(--accent)) 0 50% / calc(100% - 10px) 2px no-repeat;
    transform-origin: left center;
    position: relative;
  }
  .where-link::after {
    content: "";
    position: absolute;
    right: 0; top: 0;
    width: 14px; height: 14px;
    background: var(--accent);
    -webkit-mask: var(--icon-arrow) center / contain no-repeat;
    mask: var(--icon-arrow) center / contain no-repeat;
  }
  html.js:not(.reduced) .where-cue:not(.is-in) ~ .where-link { transform: scaleX(0); }
  .where-after { grid-column: 3; margin-top: 0; font-size: 18px; }

  .where-small { margin-top: var(--s-6); }
  .where-stat { max-width: 1040px; margin-inline: auto; margin-top: var(--s-8); padding: calc(var(--card-pad-lg) + 3px) var(--card-pad-lg) var(--card-pad-lg); }
}

/* ================= phones (under 768): Chase's note, the struck week, then the stat =================
   One source of truth for the phone layout (it replaces last night's "integration: phone rhythm" overrides).
   Rows 4 and 6 (and 7, 8) print at 768 and up only (copy.json phone:false). Nothing here reaches 768 and up. */
@media (max-width: 767.98px) {
  /* phone rhythm: the section padding is the shared --sec-pad (32px on phones, 00-tokens.css) */
  .where-row.only-desk { display: none; }

  /* the note: avatar beside "A note from Chase"; the sign is drawn in quiet grey, the h2's coral line is this screen's accent */
  .where-from { align-items: center; gap: var(--s-4); margin-top: var(--s-3); }
  .where-from-text { padding-bottom: 0; }
  .where-sign path { stroke: var(--text-muted); }
  .sec--where .where-h2 { margin-top: var(--s-3); }

  .where-letter { margin-top: var(--s-3); padding-left: 14px; }
  .where-margin-fill { background: linear-gradient(180deg, rgb(var(--text-rgb) / .7), rgb(var(--text-rgb) / .25) 70%, rgb(var(--text-rgb) / 0)); }
  .sec--where .where-p { font-size: 15.5px; line-height: 1.5; }
  .sec--where .where-p + .where-p { margin-top: var(--s-2); }
  .sec--where .where-p--key { margin-block: 10px; font-size: 20px; line-height: 1.25; }
  .where-pull { margin-top: var(--s-4); padding-top: var(--s-3); }
  /* the quote mark hangs in the top corner instead of taking its own line */
  .where-pull-mark { position: absolute; top: var(--s-3); right: 0; width: 30px; height: 23px; fill: rgb(var(--text-rgb) / .3); filter: none; }
  .sec--where .where-pull-q p { margin-top: 0; padding-right: 34px; font-size: 20px; line-height: 1.28; }
  .where-by { margin-top: var(--s-2); }
  .where-by::before { background: var(--border-strong); }

  /* the struck week: one card, no coral besides the strike */
  .where-week {
    margin-top: var(--s-4);
    padding: var(--s-4) 14px var(--s-1);
    background: linear-gradient(180deg, var(--card-2), var(--card));
  }
  .where-keys { gap: var(--s-1); padding-bottom: 10px; }
  .where-key { font-size: clamp(13px, 3.6vw, 14px); letter-spacing: .06em; gap: var(--s-2); }
  .where-key--after { color: var(--text); }
  .where-key--after .where-key-mark { margin-inline: 7px; background: var(--text); box-shadow: none; }
  .where-row { padding-block: 10px; grid-template-columns: 16px minmax(0, 1fr); column-gap: 6px; }
  .where-today { font-size: 16px; line-height: 1.4; }
  .where-link { margin-top: calc(var(--s-2) + 3px); width: 14px; height: 14px; background: var(--text-muted); }
  .where-after { margin-top: var(--s-2); font-size: 14.5px; line-height: 1.45; }
  /* the last phone row is the punch line: bigger, and its answer reads as the payoff */
  .where-row--kicker .where-today { font-weight: var(--w-bold); letter-spacing: -0.015em; }
  .where-row--kicker .where-after { font-size: 15.5px; font-weight: var(--w-semi); }

  .where-small { margin-top: 10px; }

  /* the stat: numerals left of their labels, meter under the label */
  .where-stat { margin-top: var(--s-3); padding: 18px 16px 16px; }
  .where-stat-pair { gap: 14px; }
  .where-stat-part { display: grid; grid-template-columns: 80px minmax(0, 1fr); column-gap: var(--s-3); align-items: start; }
  .where-stat-part .stat-num { grid-row: 1 / span 2; font-size: 38px; }
  .where-stat .stat-label { grid-column: 2; grid-row: 1; margin-top: 0; font-size: 14px; line-height: 1.45; }
  .where-stat-part .where-meter { grid-column: 2; margin-top: var(--s-2); }
  .where-stat .stat-src { margin-top: var(--s-3); padding-top: var(--s-2); font-size: 12px; line-height: 1.4; }
}

/* ==== 02a-chat.css ==== */
/* ================= Chat pieces: the page's group-chat look, specified once (docs/next/DESIGN.md part 3) =================
   Used by 05b-multiplayer (three scenes) and open to any section that shows a chat: the hero's demo box, 09b.
   Loads after 02-components.css and before 03 to 15 (CSS joins in name order). Every class starts with `chat-`.

   Rules that keep it from looking like any chat product: no channel names with a hash sign, no channel sidebar,
   no reaction rows, no read ticks, no "is typing" words, no unread badges, no blue or green bubbles, no photos.
   People are role glyphs, agents wear the brand's pill-and-circle mark, colours are the page's own.

   Markup (a scene):
   <figure class="chat-win [chat-win--phone|chat-win--shared] chat-scene" data-reveal="none" aria-labelledby="ID">
     <div class="chat-scr">
       <div class="chat-head">
         <p class="chat-cap" id="ID">Caption</p>
         <span class="chat-stack" aria-hidden="true"><span class="chat-av chat-av--person" data-who="x"></span>…</span>
         <button type="button" class="chat-ctl" hidden aria-label="…"><span class="chat-ctl-ic"></span></button>
       </div>
       <ol class="chat-thread">
         <li class="chat-msg"><span class="chat-av chat-av--person" aria-hidden="true"></span>
           <div class="chat-main"><p class="chat-name">Role</p>
             <div class="chat-slot"><p class="chat-bubble">Words <span class="chat-mention" data-to="x">@Role</span></p>
               <span class="chat-typing" aria-hidden="true"><i></i><i></i><i></i></span></div></div></li>
         <li class="chat-msg chat-msg--out"><span class="sr-only">You:</span>
           <div class="chat-slot"><p class="chat-bubble chat-bubble--out">…</p></div></li>
       </ol>
     </div>
   </figure>
   Agent avatar: <span class="chat-av chat-av--agent" aria-hidden="true"><i class="chat-knob"></i></span>
   Still state (no script, reduced motion): the finished thread, knobs on, no typing bubbles, no control. */

/* ---------- avatar ---------- */
.chat-av {
  --av: 22px;
  position: relative;
  flex: none;
  display: block;
  width: var(--av);
  height: var(--av);
  border-radius: 50%;
  background: var(--card-2);
  box-shadow: inset 0 0 0 1px var(--border-strong);
  color: var(--text-muted);
}
/* the person glyph: head and shoulders, drawn as a mask so it takes the avatar's colour */
.chat-av--person::before,
.chat-av--you::before,
.chat-av--guest::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='8.6' r='3.6' fill='black'/%3E%3Cpath d='M4.2 19.6c.9-3.9 3.6-5.9 6.8-5.9s5.9 2 6.8 5.9z' fill='black'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='8.6' r='3.6' fill='black'/%3E%3Cpath d='M4.2 19.6c.9-3.9 3.6-5.9 6.8-5.9s5.9 2 6.8 5.9z' fill='black'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.chat-av--you { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--accent-3); }
/* someone from outside the company: a dashed ring */
.chat-av--guest { box-shadow: none; outline: 1px dashed var(--text-muted); outline-offset: -1px; color: var(--text-mid); }
/* an agent: the brand mark, a coral pill with its knob on the right (on) */
.chat-av--agent {
  border-radius: var(--r-xs);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent-line);
}
.chat-av--agent::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 8px;
  margin: -4px 0 0 -7px;
  border-radius: var(--r-pill);
  background: var(--accent);
}
.chat-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 0;
  border-radius: 50%;
  background: var(--on-accent);
}
/* the live dot: only while that participant is typing */
.chat-av::after {
  content: "";
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px rgb(var(--accent-rgb) / .8);
  display: none;
}
.chat-msg.is-typing .chat-av::after { display: block; }

/* header stack: overlapping 20px avatars, separated by a ring of the card colour */
.chat-stack { display: flex; align-items: center; flex: none; }
.chat-stack .chat-av { --av: 20px; }
.chat-stack .chat-av + .chat-av { margin-left: -6px; }
.chat-stack .chat-av { outline: 2px solid var(--card); outline-offset: 0; }
.chat-stack .chat-av--guest { outline: 1px dashed var(--text-muted); outline-offset: -1px; box-shadow: 0 0 0 2px var(--card); }
/* tagged pulse: one coral ring, once per mention (the ring rides ::after, which a stack avatar never uses as a live dot) */
.chat-stack .chat-av::after {
  display: block;
  inset: 0;
  right: auto;
  bottom: auto;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: none;
  box-shadow: none;
}
.chat-stack .chat-av.is-ping::after { animation: chat-ping .6s var(--ease-out) both; }
@keyframes chat-ping {
  from { box-shadow: 0 0 0 0 rgb(var(--accent-rgb) / .6); }
  to   { box-shadow: 0 0 0 6px rgb(var(--accent-rgb) / 0); }
}

/* ---------- window frame ---------- */
.chat-win { position: relative; margin: 0; min-width: 0; }
.chat-scr { position: relative; isolation: isolate; display: flex; flex-direction: column; height: 100%; }
.chat-scr::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  background:
    var(--dot-grid) 0 0 / 12px 12px,
    radial-gradient(120% 70% at 100% 0%, rgb(var(--accent-rgb) / .08), transparent 60%),
    linear-gradient(180deg, var(--card-2), var(--bg-soft));
  box-shadow: inset 0 1px 0 rgb(var(--text-rgb) / .05), var(--shadow-card);
}
.chat-head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: 0 4px 0 12px;
  border-bottom: 1px solid rgb(var(--text-rgb) / .07);
}
.chat-cap {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: var(--w-semi);
  line-height: 16px;
  color: var(--text);
}
ol.chat-thread { display: grid; gap: 6px; align-content: start; padding: 8px 10px; list-style: none; margin: 0; }

/* phone variant: a bezel cropped at the bottom; the bezel and the screen fade out there, never the words */
.chat-win--phone { width: min(100%, 320px); margin-inline: auto; padding: 14px 6px 0; }
.chat-win--phone::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--border-strong);
  border-bottom: 0;
  border-radius: 30px 30px 0 0;
  background: var(--bg);
  -webkit-mask-image: linear-gradient(180deg, var(--bg) calc(100% - 20px), transparent);
          mask-image: linear-gradient(180deg, var(--bg) calc(100% - 20px), transparent);
}
.chat-win--phone::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 5px;
  width: 36px;
  height: 5px;
  margin-left: -18px;
  border-radius: var(--r-pill);
  background: var(--border-strong);
}
.chat-win--phone .chat-scr::before {
  border-bottom: 0;
  border-radius: 24px 24px 0 0;
  box-shadow: inset 0 1px 0 rgb(var(--text-rgb) / .05);
  -webkit-mask-image: linear-gradient(180deg, var(--bg) calc(100% - 20px), transparent);
          mask-image: linear-gradient(180deg, var(--bg) calc(100% - 20px), transparent);
}
.chat-win--phone .chat-head { padding-left: 14px; }
.chat-win--phone .chat-thread { padding-bottom: 12px; }
/* shared room: someone from outside is in it */
.chat-win--shared .chat-scr::before { border: 1px dashed var(--accent-line); }

/* ---------- message row and bubble ---------- */
.chat-msg { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: end; }
.chat-msg--out { grid-template-columns: minmax(0, 1fr); justify-items: end; }
.chat-main { min-width: 0; }
.chat-name {
  margin-bottom: 2px;
  font-size: 12px;
  font-weight: var(--w-semi);
  line-height: 14px;
  color: var(--text-muted);
}
.chat-msg--agent .chat-name { color: var(--accent-3); }
.chat-slot { position: relative; display: flex; }
.chat-msg--out .chat-slot { justify-content: flex-end; }
.chat-bubble {
  display: inline-block;
  max-width: 100%;
  padding: 5px 10px;
  border-radius: 4px 12px 12px 12px;
  background: var(--border-strong);
  font-size: 14px;
  line-height: 18px;
  color: var(--text);
  transform-origin: 0 100%;
  overflow-wrap: anywhere;
}
.chat-msg--agent .chat-bubble { background: var(--card-2); box-shadow: inset 0 0 0 1px var(--accent-line); }
.chat-bubble--out {
  border-radius: 12px 12px 4px 12px;
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent-line);
  color: var(--accent-3);
  transform-origin: 100% 100%;
}

/* typing bubble: the bubble's shape holding three dots, placed in the bubble's slot; only while a scene is live */
.chat-typing {
  position: absolute;
  left: 0;
  bottom: 0;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 44px;
  height: 28px;
  border-radius: 4px 12px 12px 12px;
  background: var(--border-strong);
  transform-origin: 0 100%;
  pointer-events: none;
}
.chat-msg--agent .chat-typing { background: var(--card-2); box-shadow: inset 0 0 0 1px var(--accent-line); }
.chat-typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--text-muted); }
html.js:not(.reduced) .chat-scene.is-live .chat-typing { display: flex; opacity: 0; }
html.js:not(.reduced) .chat-typing.is-on i { animation: chat-type 1s var(--ease-inout) infinite; }
.chat-typing.is-on i:nth-child(2) { animation-delay: .15s; }
.chat-typing.is-on i:nth-child(3) { animation-delay: .3s; }
@keyframes chat-type { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-35%); opacity: 1; } }

/* file chip, inside a bubble */
.chat-file { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--w-semi); vertical-align: top; }
.chat-file::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background: var(--accent-3);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 1.8h5.2L12.6 5.2v8.2a.8.8 0 0 1-.8.8H4a.8.8 0 0 1-.8-.8V2.6a.8.8 0 0 1 .8-.8zM9 1.8v3.6h3.6M5.6 8.6h4.8M5.6 11h3.4' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 1.8h5.2L12.6 5.2v8.2a.8.8 0 0 1-.8.8H4a.8.8 0 0 1-.8-.8V2.6a.8.8 0 0 1 .8-.8zM9 1.8v3.6h3.6M5.6 8.6h4.8M5.6 11h3.4' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* code block, inside an agent bubble: a file label, a removed line, an added line in green */
.chat-bubble--code { padding: 6px 6px 6px; }
.chat-code {
  display: grid;
  margin-top: 4px;
  padding: 4px 8px;
  border-radius: var(--r-xs);
  background: var(--bg-soft);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 18px;
  white-space: pre;
  overflow: hidden;
}
.chat-code-file { padding-left: 2px; font-family: var(--font-mono); font-size: 12px; line-height: 16px; color: var(--text-muted); }
.chat-ln { display: block; }
.chat-ln--del { color: var(--text-muted); }
.chat-ln--add { color: var(--green); }

/* action chip: the hero's Approve chip; both words share one cell so the swap moves nothing */
.chat-act { position: relative; display: inline-grid; vertical-align: top; margin-left: 8px; font-family: var(--font-mono); font-size: 12px; font-weight: var(--w-bold); line-height: 1; }
.chat-act > span {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 20px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
}
.chat-act-a { background: var(--accent); color: var(--on-accent); }
.chat-act-b { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); color: var(--accent-3); }
.chat-act-b::before {
  content: "";
  width: 11px;
  height: 11px;
  background: currentColor;
  -webkit-mask: var(--icon-check) center / 100% 100% no-repeat;
          mask: var(--icon-check) center / 100% 100% no-repeat;
}
/* "Approve" is a playback word: gone with no script or reduced motion; in layout at opacity 0 otherwise */
html:not(.js) .chat-act-a, html.reduced .chat-act-a { display: none; }
html.js:not(.reduced) .chat-act-a { opacity: 0; }
/* the founder's tap */
.chat-tap {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--accent);
  opacity: 0;
  pointer-events: none;
  display: none;
}
html.js:not(.reduced) .chat-scene.is-live .chat-tap { display: block; }

/* mention chip: a person or an agent being tagged */
.chat-mention {
  padding: 0 2px;
  border-radius: var(--r-xs);
  background: var(--accent-soft);
  color: var(--accent-3);
  font-weight: var(--w-semi);
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}
.chat-bubble--out .chat-mention { background: rgb(var(--accent-rgb) / .2); }
.chat-mention.is-flash { animation: chat-flash .6s var(--ease-out) both; }
@keyframes chat-flash { from { background-color: rgb(var(--accent-rgb) / .35); } to { background-color: var(--accent-soft); } }

/* ---------- scene control: pause while playing, play while held, replay when done ---------- */
.chat-ctl {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-mid);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.chat-ctl[hidden] { display: none; }
.chat-ctl-ic {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: rgb(var(--bg-rgb) / .5);
  transition: border-color var(--dur-hover) var(--ease-out);
}
.chat-ctl-ic::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 10px;
  transform: translate(-50%, -50%);
  background: linear-gradient(90deg, var(--text-mid) 0 3px, transparent 3px 5px, var(--text-mid) 5px 8px);
}
.chat-ctl[data-state="held"] .chat-ctl-ic::before {
  margin-left: 1px;
  background: var(--accent);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.chat-ctl[data-state="done"] .chat-ctl-ic::before {
  width: 12px;
  height: 12px;
  background: var(--text-mid);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13 8a5 5 0 1 1-1.6-3.7M13 2.2v3h-3' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13 8a5 5 0 1 1-1.6-3.7M13 2.2v3h-3' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
@media (hover: hover) { .chat-ctl:hover .chat-ctl-ic { border-color: var(--accent-line); } }
.chat-ctl:focus-visible { outline: 2px solid var(--accent-3); outline-offset: -3px; }

/* ---------- start state and hold ----------
   Before the scene's reveal, every row waits at opacity 0 (keyed to .chat-scene, which carries data-reveal="none").
   After it, the script owns the rows with inline styles; it never applies under reduced motion or without script. */
html.js:not(.reduced) .chat-scene:not(.is-in) .chat-msg { opacity: 0; }
.chat-scene.is-held *, .chat-scene.is-held *::before, .chat-scene.is-held *::after { animation-play-state: paused !important; }

/* ---------- desktop sizes ---------- */
@media (min-width: 1024px) {
  .chat-msg { grid-template-columns: 26px minmax(0, 1fr); }
  .chat-msg--out { grid-template-columns: minmax(0, 1fr); }
  .chat-thread .chat-av { --av: 26px; }
  .chat-bubble { font-size: 15px; line-height: 20px; }
  .chat-typing { height: 30px; }
}

/* ==== 03-options.css ==== */
/* 03-options.css — "You have two options this year."
   Two paired cards share one picture: a node, its ring, and six slots that could fill.
   Option one: the ring is broken, dots leak out past empty slots and are gone (money and effort leaving, every month).
   Option two: the ring is closed, dots circle back, and the slots fill in rising steps (what you own compounds).
   The same picture returns small in section 12, so the .options-viz / .options-svg rules below serve both sections.
   Option one's slots are all one height (the same bill every month, nothing kept); option two's rise.
   The cards wear the shared .card--muted / .card--glow looks; this file only sets their layout.
   Markup is the finished state; start states are keyed to cards that carry data-reveal. */

.sec--options { overflow: clip; }
.options-glow {
  position: absolute;
  z-index: -1;
  right: -30%;
  bottom: 18%;
  width: 120%;
  aspect-ratio: 1;
  background: var(--glow-center);
  opacity: .55;
  pointer-events: none;
}

/* ---------- the pair ---------- */
.options-pair {
  display: grid;
  gap: var(--s-4);
  position: relative;
  z-index: var(--z-base);
}
.options-card {
  overflow: hidden;
  border-radius: var(--r-lg);
  padding: var(--card-pad);
}
.options-card > * { margin-top: 0; }

/* the picture sits in a panel across the top of each card */
.options-card .options-viz {
  margin: calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) var(--s-5);
  padding: var(--s-4) var(--s-4) 0;
  border-bottom: 1px solid var(--border);
  background: var(--dot-grid) 0 0 / 14px 14px;
}
/* Integrator (finding page.9): the page's one loud coral moment. The winning option's picture panel is solid coral,
   the way the live site's red card is, with its picture drawn in the ink colour; the card keeps the shared
   .card--glow look. Section 12 reuses the picture small and is not affected (this is scoped to the 03 card). */
.options-card.options-card--own .options-viz {
  border-bottom-color: transparent;
  background: var(--accent);
  background-size: auto;
}
.options-card--own .options-viz .options-base,
.options-card--own .options-viz .options-slot { stroke: rgb(var(--bg-rgb) / .32); }
.options-card--own .options-viz .options-bar { fill: var(--on-accent); }
.options-card--own .options-viz .options-ring { stroke: var(--on-accent); }
.options-card--own .options-viz .options-node,
.options-card--own .options-viz .options-orb circle { fill: var(--on-accent); }
.options-card--own .options-viz .options-halo { fill: rgb(var(--bg-rgb) / .22); }

/* ---------- the shared picture (also used small in section 12) ---------- */
.options-svg { display: block; width: 100%; height: auto; overflow: visible; }
.options-base { stroke: var(--border-strong); stroke-width: 1; }
.options-slot { fill: none; stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 3 3; }
.options-ring { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.options-node { fill: var(--accent); }
.options-halo { fill: rgb(var(--accent-rgb) / .2); transform-box: fill-box; transform-origin: center; }
.options-orb circle { fill: var(--accent-3); }
.options-orb {
  transform-box: view-box;
  transform-origin: 52px 60px;
  transform: rotate(calc(var(--i) * 72deg));
}
.options-bar {
  fill: var(--accent);
  fill-opacity: calc(.42 + var(--k) * .11);
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: transform var(--dur-reveal) var(--ease-out) calc(.75s + var(--k) * .12s);
}

/* option one: broken ring, grey node, dots on their way out, slots drained */
.options-viz--leak .options-ring--broken {
  stroke: var(--text-dim);
  stroke-dasharray: 150 38.5;
  stroke-dashoffset: 169.25;
}
.options-viz--leak .options-node { fill: var(--border-strong); stroke: var(--text-dim); stroke-width: 1; }
.options-drop circle { fill: var(--text-muted); }
.options-drop {
  transform: translate(calc(var(--i) * 46px), calc(var(--i) * 5px));
  opacity: calc(.9 - var(--i) * .17);
}
.options-fill {
  fill: rgb(var(--text-rgb) / .16);
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: scaleY(.04);
  transition: transform 1.3s var(--ease-inout) calc(.5s + var(--k) * .09s);
}

/* start states: option one's slots start full and drain; option two's bars start empty and fill */
html.js:not(.reduced) .options-card--rent[data-reveal]:not(.is-in) .options-fill { transform: scaleY(1); transition: none; }
html.js:not(.reduced) .options-card--own[data-reveal]:not(.is-in) .options-bar { transform: scaleY(0); transition: none; }

/* the loops: only while on screen (core adds .is-playing), never under reduced motion */
html.js:not(.reduced) .options-viz--leak[data-loop].is-playing .options-drop {
  animation: options-leak 3.5s linear infinite;
  animation-delay: calc(var(--i) * -0.7s);
}
html.js:not(.reduced) .options-viz--own[data-loop].is-playing .options-orb {
  animation: options-orbit 6s linear infinite;
  animation-delay: calc(var(--i) * -1.2s);
}
html.js:not(.reduced) .options-viz--own[data-loop].is-playing .options-halo {
  animation: options-halo 3s var(--ease-inout) infinite;
}
@keyframes options-leak {
  0%   { transform: translate(0, 0); opacity: 0; }
  10%  { opacity: .95; }
  70%  { opacity: .5; }
  100% { transform: translate(240px, 28px); opacity: 0; }
}
@keyframes options-orbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes options-halo { 0%, 100% { transform: scale(1); opacity: .7; } 50% { transform: scale(1.35); opacity: 1; } }

/* ---------- the words in each card ---------- */
/* "Option one:" and the rest of the heading read as one sentence; only the colour marks the label */
.options-title {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  color: var(--text);
}
.options-kicker { color: var(--accent); }
.options-card--rent .options-title { color: var(--text-mid); }
.options-card--rent .options-kicker { color: var(--text-muted); }

.options-punch {
  margin-top: var(--s-4);
  font-size: var(--fs-lead);
  font-weight: var(--w-bold);
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.options-card--rent .options-punch { color: var(--text-mid); }
.options-card--own .options-punch { color: var(--accent); font-size: clamp(22px, 6vw, 26px); font-weight: var(--w-head); }

/* a rail of markers: broken and grey in option one, solid and coral in option two */
.options-lines {
  position: relative;
  display: grid;
  gap: var(--s-3);
  margin-top: var(--s-4);
  padding-left: 24px;
  font-size: var(--fs-body);
  line-height: var(--lh-snug);
}
.options-lines::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: var(--accent-line);
}
.options-card--rent .options-lines::before {
  background: repeating-linear-gradient(180deg, var(--text-dim) 0 4px, transparent 4px 9px);
}
.options-line { position: relative; }
.options-line::before {
  content: "";
  position: absolute;
  left: -24px;
  top: .42em;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px rgb(var(--accent-rgb) / .7);
  transition: background-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.options-card--own .options-line:nth-child(1)::before { transition-delay: .9s; }
.options-card--own .options-line:nth-child(2)::before { transition-delay: 1.05s; }
.options-card--own .options-line:nth-child(3)::before { transition-delay: 1.2s; }
.options-card--own .options-line:nth-child(4)::before { transition-delay: 1.35s; }
html.js:not(.reduced) .options-card--own[data-reveal]:not(.is-in) .options-line::before { background: var(--border-strong); box-shadow: none; transition: none; }
.options-card--rent .options-line::before {
  background: var(--card);
  border: 1.5px solid var(--text-dim);
  box-shadow: none;
}
.options-card--rent .options-line { color: var(--text-muted); }


/* ---------- the line under both cards ---------- */
.options-idea {
  margin-top: var(--s-7);
  max-width: 24ch;
  font-size: clamp(24px, 6.4vw, 30px);
  font-weight: var(--w-head);
  letter-spacing: var(--track-h2);
  line-height: 1.15;
  color: var(--text);
  text-wrap: balance;
}
.options-idea-key { color: var(--accent); }

/* ---------- the stat: one hundred firms as dots ---------- */
.options-proof { margin-top: var(--s-6); }
.options-proof-fig { display: flow-root; }
.options-grid {
  float: right;
  width: 108px;
  height: 108px;
  margin: 4px 0 var(--s-3) var(--s-4);
}
.options-cell--on { fill: var(--accent); }
.options-cell--plan { fill: none; stroke: var(--accent-2); stroke-width: 1.8; }
.options-cell--off { fill: rgb(var(--text-rgb) / .09); }
/* the core reserves the count width with an inline display; keep the number on its own line */
.options-big {
  display: block !important;
  width: fit-content;
  margin-bottom: var(--s-3);
  font-family: var(--font-mono);
  font-weight: var(--w-bold);
  font-size: var(--fs-stat);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 28px rgb(var(--accent-rgb) / .35);
}
.options-stat {
  font-size: var(--fs-body);
  line-height: var(--lh-snug);
  color: var(--text-mid);
}
.options-big2 {
  font-family: var(--font-mono);
  font-weight: var(--w-bold);
  font-size: 1.3em;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--accent-2);
}

.options-bet {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-5);
  padding: var(--s-4);
  border: 1px solid var(--accent-line);
  border-radius: var(--r);
  background: var(--accent-soft);
}
.options-bet-line {
  font-size: var(--fs-lead);
  font-weight: var(--w-bold);
  line-height: 1.3;
  color: var(--text);
}
.options-bet-key { color: var(--accent-3); }

/* ---------- tablet and desktop: side by side, using the width ---------- */
@media (min-width: 768px) {
  .options-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); align-items: stretch; }
  .options-card { display: flex; flex-direction: column; }
  .options-idea { margin-inline: auto; text-align: center; max-width: 30ch; }
  .options-grid { width: 150px; height: 150px; }
  .options-glow { right: -10%; bottom: 10%; width: 70%; }
}
@media (min-width: 1024px) {
  .options-card { padding: var(--card-pad-lg) calc(var(--card-pad-lg) + 8px); }
  .options-card .options-viz { margin: calc(var(--card-pad-lg) * -1) calc((var(--card-pad-lg) + 8px) * -1) var(--s-6); padding: var(--s-5) var(--s-6) 0; }
  .options-card--rent { margin-top: var(--s-5); margin-bottom: calc(var(--s-5) * -1); }
  .options-title { font-size: 24px; }
  .options-card--own .options-punch { font-size: 30px; }
  .options-idea { font-size: 40px; margin-top: var(--s-8); }
  .options-proof {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    column-gap: var(--s-7);
    align-items: center;
    padding: var(--s-7) var(--s-7) var(--s-6);
    max-width: 1100px;
    margin-inline: auto;
    margin-top: var(--s-7);
  }
  .options-proof .options-src { grid-column: 1 / -1; }
  .options-bet { margin-top: 0; flex-direction: column; align-items: flex-start; padding: var(--s-6); }
  .options-bet-line { font-size: 26px; letter-spacing: -0.015em; }
  .options-stat { font-size: var(--fs-lead); }
  .options-grid { width: 170px; height: 170px; }
}

/* ---------- phones: the two options side by side, one calm screen for the stat ----------
   The pair steps 8px past the text column on each side (16px from the screen edge at 360) so each card gets
   a readable 14px column. Every line a founder reads is 14px or larger; the source line is 12px. */
@media (max-width: 767px) {
  /* phone rhythm: the section padding is the shared --sec-pad (32px on phones, 00-tokens.css) */
  .sec-head + .options-pair { margin-top: var(--s-5); }
  .options-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-2);
    margin-inline: calc(var(--s-2) * -1);
    align-items: stretch;
  }
  .options-card { display: flex; flex-direction: column; padding: var(--s-3) 10px var(--s-4); border-radius: var(--r); }
  .options-card .options-viz { margin: calc(var(--s-3) * -1) -10px var(--s-3); padding: 6px 6px 2px; background-size: 10px 10px; }
  .options-card .options-svg { height: 48px; }
  .options-viz--leak .options-slot { stroke: var(--text-dim); }
  .options-title { font-size: 15px; line-height: 1.3; }
  .options-punch { margin-top: var(--s-2); font-size: 15px; line-height: 1.3; }
  .options-card--own .options-punch { font-size: 19px; line-height: 1.2; }
  .options-lines { margin: var(--s-3) 0 0; gap: var(--s-2); padding-left: 14px; font-size: var(--fs-small); line-height: 1.42; }
  .options-lines::before { left: 3px; top: 7px; bottom: 7px; }
  .options-line::before { left: -14px; top: 6.5px; width: 7px; height: 7px; box-shadow: 0 0 6px rgb(var(--accent-rgb) / .7); }
  .options-card--rent .options-line::before { border-width: 1px; box-shadow: none; }

  /* calm: the line under the cards is white on white-grey, so the stat's 48% is this screen's one coral */
  .options-idea { margin-top: var(--s-5); max-width: none; font-size: 21px; color: var(--text-mid); }
  .options-idea-key { color: var(--text); }

  .options-proof { margin-top: var(--s-4); padding: 20px var(--s-4) var(--s-4); }
  .options-grid { width: 80px; height: 80px; margin: 2px 0 var(--s-2) var(--s-3); }
  .options-big { font-size: 44px; margin-bottom: var(--s-2); }
  .options-stat { font-size: 14.5px; line-height: 1.45; }
  .options-bet { margin-top: var(--s-3); padding: var(--s-3); background: rgb(var(--text-rgb) / .03); border-color: var(--border); }
  .options-bet-line { font-size: 15.5px; line-height: 1.35; color: var(--text-mid); }
  .options-bet-key { color: var(--text); }
  .options-src { margin-top: var(--s-3); padding-top: var(--s-2); font-size: var(--fs-eyebrow); line-height: 1.4; }
}

/* ==== 04-week.css ==== */
/* 04-week.css — "Same business. A different week."
   One sample week on a phone. The screen follows the line being read (04-week.js).
   Static markup (no script, reduced motion) is the finished state: the morning brief on screen, every line readable.
   Script adds .is-js to .week-story (sticky phone, one frame at a time, swaps happen instantly under reduced motion)
   and .is-live when motion is allowed (frames cross-fade and their insides play).
   Below 1024 the phone sits in a narrow left column beside the lines, so a line never slides under it.
   Every word on the phone is a short sample line (a made-up consulting business). No placeholder bars. */

.sec--week { background: var(--bg); }
.week-h-accent {
  color: var(--accent);
  background: var(--grad-text-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.week-lead { font-weight: var(--w-semi); color: var(--text); }

/* ================= the story: stage (phone) + beats (lines) ================= */
.week-story {
  --wp: 136px;
  position: relative;
  display: grid;
  grid-template-columns: var(--wp) minmax(0, 1fr);
  column-gap: 14px;
  align-items: start;
  margin-top: var(--s-5);
}

.week-stage { position: relative; z-index: var(--z-raised); }
.week-stage-in { position: relative; display: flex; flex-direction: column; align-items: center; }
.week-stage-in::before {           /* the glow behind the phone */
  content: "";
  position: absolute;
  left: 50%; top: 42%;
  width: 150%; max-width: 560px;
  aspect-ratio: 1;
  translate: -50% -50%;
  z-index: -1;
  background: radial-gradient(closest-side, rgb(var(--accent-rgb) / .16), rgb(var(--deep-rgb) / .06) 55%, transparent 75%);
  pointer-events: none;
}

/* The phone: the foundation's shell, sized for the stage. Inside sizes are container units with a legible floor. */
.week-phone {
  width: var(--wp);
  aspect-ratio: 9 / 16.4;
  padding: 5px;
  border-radius: 24px;
  box-shadow: inset 0 0 0 1px rgb(var(--text-rgb) / .05), 0 18px 44px -24px rgb(var(--accent-rgb) / .5);
}
.week-phone::before { top: 9px; width: 30%; height: 10px; }
.week-screen {
  display: flex;
  flex-direction: column;
  container-type: inline-size;
  padding: 24px 7px 8px;
  border-radius: 19px;
  background:
    radial-gradient(120% 60% at 100% 0%, rgb(var(--accent-rgb) / .08), transparent 60%),
    var(--bg-soft);
}
.week-mocklabel {
  margin-top: var(--s-3);
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-muted);
  text-align: center;
}

/* ---- app bar: weekday + the mark's switch ---- */
.week-appbar { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; }
.week-day {
  font-family: var(--font-mono);
  font-size: max(11px, 4.4cqw);
  font-weight: var(--w-bold);
  letter-spacing: .06em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--text-muted);
}
.week-day:not(.is-on) { display: none; }
.week-switch { --sw-w: max(22px, 12cqw); --sw-h: max(13px, 7cqw); margin-left: auto; }
.week-switch::after { top: 2px; left: 2px; width: calc(var(--sw-h) - 4px); height: calc(var(--sw-h) - 4px); }
.week-switch.is-on::after { transform: translateX(calc(var(--sw-w) - var(--sw-h))); }

/* ---- frames ---- */
.week-frames { position: relative; flex: 1; min-height: 0; margin-top: max(6px, 4cqw); }
.week-frame:not(.is-on) { display: none; }
.week-ftitle {
  margin-bottom: max(4px, 3cqw);
  font-size: max(14px, 8.4cqw);
  font-weight: var(--w-head);
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text);
}

/* frame 0: morning brief — the three groups from the line, each with one short sample item */
.week-group {
  display: flex;
  flex-direction: column;
  gap: max(1px, .6cqw);
  margin-top: max(5px, 3cqw);
  padding: max(5px, 3.2cqw) max(6px, 4cqw);
  border: 1px solid var(--border);
  border-radius: max(8px, 4cqw);
  background: linear-gradient(180deg, var(--card-2), var(--card));
}
.week-glabel {
  font-family: var(--font-mono);
  font-size: max(11px, 4.2cqw);
  font-weight: var(--w-bold);
  line-height: 1.25;
  color: var(--text-muted);
}
.week-gline {
  font-size: max(12px, 5.4cqw);
  font-weight: var(--w-semi);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text);
}
.week-group--you { border-color: var(--accent-line); background: linear-gradient(180deg, rgb(var(--accent-rgb) / .12), var(--card)); }
.week-group--you .week-glabel { color: var(--accent-3); }
.week-group--wait { background: transparent; border-style: dashed; }
.week-group--wait .week-gline { color: var(--text-mid); }

/* frame 1: promised this week — one list, held together by one line */
.week-plist { position: relative; padding-left: max(7px, 4.4cqw); }
.week-pline {
  position: absolute;
  left: 0; top: max(6px, 3cqw); bottom: max(6px, 3cqw);
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--accent), rgb(var(--accent-rgb) / .2));
  transform-origin: 50% 0;
}
.week-prom {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "name name" "box day";
  align-items: center;
  column-gap: max(4px, 2.4cqw);
  row-gap: max(2px, 1cqw);
  margin-top: max(5px, 3cqw);
  padding: max(5px, 3cqw) max(6px, 3.6cqw);
  border: 1px solid var(--border);
  border-radius: max(8px, 4cqw);
  background: var(--card);
}
.week-prom:first-of-type { margin-top: 0; }
.week-box { grid-area: box; width: max(9px, 4.4cqw); height: max(9px, 4.4cqw); border: 1.5px solid var(--accent-line); border-radius: 50%; }
.week-pname { grid-area: name; font-size: max(12px, 5.4cqw); font-weight: var(--w-semi); line-height: 1.25; color: var(--text); }
.week-pday { grid-area: day; font-family: var(--font-mono); font-size: max(11px, 4.2cqw); font-weight: var(--w-mid); line-height: 1.2; color: var(--text-muted); }

/* frame 2: Friday numbers (no values; the shape says it) */
.week-chart {
  position: relative;
  height: max(96px, 62cqw);
  padding: max(5px, 3cqw) max(6px, 3.6cqw);
  border: 1px solid var(--border);
  border-radius: max(8px, 4cqw);
  background: linear-gradient(180deg, var(--card-2), var(--card));
}
.week-clabel { display: block; font-family: var(--font-mono); font-size: max(11px, 4.2cqw); font-weight: var(--w-bold); line-height: 1.25; color: var(--text-muted); }
.week-bars {
  position: absolute;
  left: max(6px, 3.6cqw); right: max(6px, 3.6cqw); top: max(24px, 13cqw); bottom: max(5px, 3cqw);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: max(4px, 3cqw);
  align-items: end;
}
.week-bar { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.week-bar i {
  display: block;
  width: 100%;
  height: var(--h);
  border-radius: 3px 3px 1px 1px;
  background: linear-gradient(180deg, rgb(var(--text-rgb) / .34), rgb(var(--text-rgb) / .14));
  transform-origin: 50% 100%;
}
.week-bar--hi i { background: var(--grad); }
.week-bar b { margin-top: 2px; font-family: var(--font-mono); font-size: max(11px, 4.2cqw); font-weight: var(--w-mid); line-height: 1.1; color: var(--text-muted); }
.week-bar--hi b { color: var(--text); }
.week-up {
  display: inline-block;
  margin-top: max(6px, 3.4cqw);
  padding: 2px max(7px, 3.4cqw);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  font-size: max(12px, 5cqw);
  font-weight: var(--w-semi);
  line-height: 1.3;
  white-space: nowrap;
  color: var(--text);
}

/* frame 3: you closed the laptop; the week is wrapped */
.week-f-rest {
  height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: max(4px, 3cqw);
  text-align: center;
  background: radial-gradient(60% 40% at 50% 40%, rgb(var(--accent-rgb) / .12), transparent 70%);
  border-radius: 6cqw;
}
.week-f-rest:not(.is-on) { display: none; }
.week-rest-ring { width: 34cqw; aspect-ratio: 1; margin-bottom: max(2px, 1cqw); }
.week-rest-ring svg { width: 100%; height: 100%; overflow: visible; }
.week-rest-ring circle, .week-rest-ring path { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.week-rest-ring circle { stroke: rgb(var(--accent-rgb) / .5); }
.week-rest-day { font-size: max(18px, 11cqw); font-weight: var(--w-head); letter-spacing: -0.03em; line-height: 1; color: var(--text); }
.week-rest-note { font-size: max(12px, 5cqw); font-weight: var(--w-mid); line-height: 1.3; color: var(--text-mid); }
.week-done {
  display: flex; flex-direction: column; align-items: flex-start; gap: max(2px, 1.4cqw);
  margin-top: max(6px, 4cqw);
  padding: max(5px, 3cqw) max(8px, 4.4cqw);
  border: 1px solid var(--border);
  border-radius: max(8px, 4cqw);
  background: var(--card);
}
.week-done > span {
  display: inline-flex; align-items: center; gap: max(4px, 2cqw);
  font-family: var(--font-mono); font-size: max(11px, 4.2cqw); font-weight: var(--w-mid); line-height: 1.3;
  color: var(--text-mid); white-space: nowrap;
}
.week-done > span::before {
  content: ""; flex: none;
  width: max(9px, 3.8cqw); height: max(9px, 3.8cqw);
  background: var(--accent-3);
  -webkit-mask: var(--icon-check) center / contain no-repeat;
  mask: var(--icon-check) center / contain no-repeat;
}

/* ================= the lines + the day rail ================= */
.week-beats { --bf: 17px; position: relative; }
.week-beat { position: relative; padding-left: 22px; padding-bottom: 22px; }
.week-beat:last-child { padding-bottom: 0; }
.week-beat p {
  font-size: var(--bf);
  font-weight: var(--w-semi);
  line-height: 1.38;
  letter-spacing: -0.01em;
  color: var(--text-mid);
  max-width: 26ch;
  text-wrap: pretty;
}
.week-key { color: var(--text); }
.week-beat::before {               /* the node: the page's marker (00-tokens.css), lit; dim until the story reaches it */
  content: "";
  position: absolute;
  left: 0; top: .36em;
  width: 11px; height: 11px;
  border-radius: 50%;
  color: var(--mk-on);
  border: var(--mk-ring) solid currentColor;
  background: var(--mk-fill) var(--bg);
  font-size: var(--bf);
}
.week-beat::after {                /* the rail to the next node */
  content: "";
  position: absolute;
  left: 4.5px; top: calc(.36em + 16px); bottom: 3px;
  width: 2px;
  border-radius: 2px;
  background: rgb(var(--accent-rgb) / .4);
  font-size: var(--bf);
  transform-origin: 50% 0;
}
.week-beat:last-child::after { display: none; }

/* ================= the close ================= */
.week-close { position: relative; margin-top: var(--s-5); }
.week-nod { font-size: 17px; font-weight: var(--w-mid); line-height: var(--lh-snug); color: var(--text-mid); max-width: 34ch; }
.week-payoff {
  margin-top: var(--s-3);
  font-size: 42px;
  font-weight: var(--w-head);
  line-height: 1;
  letter-spacing: var(--track-h1);
  position: relative;
}
.week-payoff::before {
  content: "";
  position: absolute;
  inset: 0 30% 0 -4%;
  z-index: -1;
  background: radial-gradient(closest-side, rgb(var(--accent-rgb) / .14), transparent);
  pointer-events: none;
}
.week-nw { white-space: nowrap; }
.week-payoff-text {
  display: inline-block;
  padding-bottom: .1em;
  color: var(--text);
  background: var(--grad-text-warm);   /* calm on a phone: the button just below is this screen's one coral */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-wrap: balance;
}

/* Button band: on a phone it keeps the line, the button and the note, without the card around them. */
.week-band { margin-top: var(--s-5); padding: 0; gap: var(--s-3); border: 0; background: none; box-shadow: none; overflow: visible; }
.week-band .band-lead { font-size: 20px; }

/* ---- phone only ---- */
@media (max-width: 767.98px) {
  /* phone rhythm: the section padding is the shared --sec-pad (32px on phones, 00-tokens.css) */
  .week-eyebrow { display: none; }            /* 04-week-001 is desktop only */
  .week-head > h2 + .lead { margin-top: var(--s-3); }
}

/* ---- tablet: same side-by-side layout, bigger phone and lines ---- */
@media (min-width: 768px) {
  .week-story { --wp: 200px; column-gap: var(--s-7); margin-top: var(--s-6); }
  .week-phone { padding: 7px; border-radius: 32px; }
  .week-phone::before { top: 13px; height: 14px; }
  .week-screen { padding: 30px 9px 10px; border-radius: 25px; }
  .week-beats { --bf: 22px; }
  .week-beat { padding-left: 32px; padding-bottom: var(--s-6); }
  .week-beat::before { width: 13px; height: 13px; }
  .week-beat::after { left: 5.5px; top: calc(.36em + 19px); }
  .week-close { margin-top: var(--s-7); }
  .week-nod { font-size: var(--fs-lead); }
  .week-payoff { margin-top: var(--s-5); font-size: clamp(46px, 13.4vw, 112px); }
  .week-payoff::before { background: radial-gradient(closest-side, rgb(var(--accent-rgb) / .2), transparent); }
  .week-payoff-text { color: var(--accent); background: var(--grad-text-accent); -webkit-background-clip: text; background-clip: text; }
  .week-band { margin-top: var(--s-8); padding: var(--s-7) var(--card-pad); gap: var(--s-5); border: 1px solid var(--border); overflow: hidden;
    background: radial-gradient(70% 120% at 50% 0%, rgb(var(--accent-rgb) / .16), transparent 70%), linear-gradient(180deg, var(--card-2), var(--bg)); }
  .week-band .band-lead { font-size: clamp(22px, 6vw, 32px); }
}

/* ================= with script: sticky phone, one frame, one active line ================= */
@media (max-width: 1023.98px) {
  .week-story.is-js .week-stage { position: sticky; top: var(--s-5); }
}

.week-story.is-js .week-beat::before { color: var(--mk-off); }
.week-story.is-js .week-beat::after { background: var(--border); }
.week-story.is-js .week-beat.is-past::before { color: var(--mk-on); }
.week-story.is-js .week-beat.is-past::after { background: rgb(var(--accent-rgb) / .4); }
.week-story.is-js .week-beat.is-on::before { color: var(--mk-on); }
.week-story.is-js .week-beat:not(.is-on) p,
.week-story.is-js .week-beat:not(.is-on) .week-key { color: var(--text-muted); }

/* live motion only: frames stack and cross-fade; nodes and lines ease between states */
html.js:not(.reduced) .week-story.is-live .week-frame { display: block; position: absolute; inset: 0; visibility: hidden; }
html.js:not(.reduced) .week-story.is-live .week-f-rest { display: flex; }
html.js:not(.reduced) .week-story.is-live .week-frame.is-on,
html.js:not(.reduced) .week-story.is-live .week-frame.is-leaving { visibility: visible; }
html.js:not(.reduced) .week-story.is-live .week-beat p,
html.js:not(.reduced) .week-story.is-live .week-key { transition: color var(--dur-move) var(--ease-inout); }
html.js:not(.reduced) .week-story.is-live .week-beat::before { transition: color var(--dur-move) var(--ease-inout); }
html.js:not(.reduced) .week-story.is-live .week-beat::after { transition: background-color var(--dur-line) var(--ease-inout); }

/* ================= desktop: lines on the left, the phone holds still on the right ================= */
@media (min-width: 1024px) {
  .week-story {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 540px);
    grid-template-areas: "beats stage";
    column-gap: var(--s-9);
    margin-top: var(--s-7);
  }
  .week-stage { grid-area: stage; align-self: start; }
  .week-story.is-js .week-stage { position: sticky; top: max(var(--s-6), calc(50vh - (var(--wp) * 1.822 + 40px) / 2)); }
  .week-story { --wp: clamp(250px, calc((100vh - 210px) * .5), 344px); }
  .week-phone { padding: 10px; border-radius: 46px; }
  .week-phone::before { top: 20px; height: 20px; }
  .week-screen { padding: 46px 14px 16px; border-radius: 36px; }
  .week-stage-in::before { width: 170%; }
  .week-mocklabel { font-size: var(--fs-micro); }
  /* the tall desktop screen: roomier items so a frame fills it */
  .week-ftitle { font-size: 10cqw; margin-bottom: 5cqw; }
  .week-group, .week-prom { margin-top: 5cqw; padding: 5.4cqw 6cqw; gap: 1.6cqw; border-radius: 5cqw; }
  .week-glabel, .week-pday, .week-clabel, .week-bar b, .week-done > span { font-size: 4.8cqw; }
  .week-gline, .week-pname { font-size: 6.6cqw; }
  .week-chart { height: 100cqw; padding: 5cqw 5.4cqw; }
  .week-bars { top: 17cqw; bottom: 5cqw; left: 5.4cqw; right: 5.4cqw; }
  .week-up { font-size: 6cqw; margin-top: 5cqw; padding: 1.4cqw 4.4cqw; }
  .week-rest-note { font-size: 6cqw; }
  .week-done { padding: 4.4cqw 6cqw; gap: 2.4cqw; }
  .week-beats { --bf: clamp(28px, 2.5vw, 36px); grid-area: beats; margin-top: 0; padding-block: 6vh 20vh; }
  .week-beat { min-height: 52vh; padding-left: 44px; padding-bottom: var(--s-8); }
  .week-beat:last-child { min-height: 40vh; padding-bottom: var(--s-8); }
  .week-beat p { line-height: 1.22; letter-spacing: -0.02em; max-width: 21ch; }
  .week-beat::before { width: 16px; height: 16px; }
  .week-beat::after { left: 7px; top: calc(.36em + 24px); }
  .week-close { margin-top: var(--s-6); max-width: 1000px; }
}

/* ==== 05-steps.css ==== */
/* 05-steps.css — "More people won't fix this." The spine of the offer.
   A rail runs down the section and fills as the reader scrolls (05-steps.js), lighting the three step nodes in turn.
   Each step has one picture: 01 the radar, 02 the ranked grid, 03 the AIOS switching on along its first 30 days.
   The four day markers live inside step 03's picture, as a timeline, so nobody reads them as the order of the steps.
   Markup is the finished state: rail full, everything lit, every switch on. Unlit states need .is-scrub (script only)
   or html.js:not(.reduced) with :not(.is-in) on a data-reveal element, so a failed script leaves the section finished.
   Phone first; this file is the one source of truth for the phone rhythm (the old integration block is folded in). */

.sec--steps {
  --steps-x: 30px;          /* content offset from the rail */
  --steps-rx: 7px;          /* rail centre from the content edge */
  --steps-node: var(--steps-mk);   /* the section's one marker size: rail nodes and timeline markers alike */
  --steps-gap: 10px;        /* between blocks inside a step */
  --steps-p: 15px;          /* body size on phones */
}
@media (min-width: 768px) {
  .sec--steps { --steps-x: 64px; --steps-rx: 12px; --steps-gap: var(--s-5); --steps-p: var(--fs-body); padding-block: var(--sec-pad); }
}
@media (min-width: 1024px) { .sec--steps { --steps-x: 96px; --steps-rx: 20px; } }

/* rows marked phone:false in copy.json: in the DOM, hidden on phones */
@media (max-width: 767px) { .sec--steps .steps-desk { display: none; } }

.steps-glow {
  position: absolute;
  inset: 0;
  z-index: var(--z-under);
  background:
    radial-gradient(60% 40% at 0% 30%, rgb(var(--accent-rgb) / .07), transparent 70%),
    radial-gradient(50% 30% at 100% 70%, rgb(var(--deep-rgb) / .12), transparent 70%);
  pointer-events: none;
}

/* ---------------- opening ---------------- */
.steps-head .lead { font-size: var(--fs-body); line-height: 1.5; }
.steps-thesis { margin-top: var(--s-3); max-width: 760px; }
.steps-fix { color: var(--text-mid); font-size: var(--steps-p); line-height: 1.5; max-width: var(--measure); }
.steps-earn {
  margin-top: var(--steps-gap);
  padding-left: var(--s-4);
  border-left: 2px solid var(--border-strong);
  font-size: calc(var(--fs-body) + 1px);
  font-weight: var(--w-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-h3);
  color: var(--text);
}
.steps-earn-b { display: block; color: var(--accent); }

/* ---------------- the track and its rail ---------------- */
.steps-track {
  position: relative;
  margin-top: var(--s-5);
  padding-left: var(--steps-x);
}
.steps-rail {
  position: absolute;
  top: 10px;
  bottom: 16px;
  left: calc(var(--steps-rx) - 1px);
  width: 2px;
  border-radius: 2px;
  background: var(--border-strong);
}
.steps-rail-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--rail-fill);      /* the page's rail fill, the same as 09's */
  transform-origin: center top;
}
.steps-rail-tip {                     /* the page's travelling dot, riding the scroll (05-steps.js moves it) */
  position: absolute;
  left: 50%;
  top: calc(var(--tdot) / -2);
  width: var(--tdot);
  height: var(--tdot);
  margin-left: calc(var(--tdot) / -2);
  border-radius: 50%;
  background: var(--text);
  box-shadow: var(--tdot-glow);
  opacity: 0;
  transition: opacity .3s var(--ease-out);
}
.steps-track.is-scrub .steps-rail-fill { transform: scaleY(0); }
.steps-track.is-scrub .steps-rail-tip { opacity: 1; }
.steps-track.is-scrub.is-done .steps-rail-tip { opacity: 0; }

/* ---------------- one step ---------------- */
.steps-step { position: relative; }
.steps-step + .steps-step { margin-top: var(--s-6); }

.steps-ghost {
  top: calc(-1 * var(--s-5));
  right: calc(-1 * var(--s-2));
  font-size: calc(var(--fs-ghost) * .82);
  background: linear-gradient(180deg, rgb(var(--accent-rgb) / .16), rgb(var(--accent-rgb) / 0) 85%);
  -webkit-background-clip: text;
  background-clip: text;
  transition: opacity var(--dur-reveal) var(--ease-out);
}
.steps-track.is-scrub .steps-step:not(.is-lit) .steps-ghost { opacity: .35; }

.steps-node {                         /* the page's marker (00-tokens.css): white ring with a dot, dim until the rail reaches it */
  position: absolute;
  top: calc(10px - var(--steps-node) / 2);
  left: calc(var(--steps-rx) - var(--steps-x) - var(--steps-node) / 2);
  width: var(--steps-node);
  height: var(--steps-node);
  border-radius: 50%;
  color: var(--mk-on);
  border: var(--mk-ring) solid currentColor;
  background: var(--mk-fill) var(--bg);
  box-shadow: 0 0 0 3px var(--bg);
  z-index: var(--z-raised);
  transition: color .3s var(--ease-out);
}
.steps-track.is-scrub .steps-node:not(.is-lit) { color: var(--mk-off); }

.steps-label {
  position: relative;
  z-index: var(--z-base);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-eyebrow);
  line-height: 1.6;
  color: var(--text-mid);
  transition: color var(--dur-move) var(--ease-out);
}
.steps-track.is-scrub .steps-step:not(.is-lit) .steps-label { color: var(--text-muted); }

.steps-title {
  position: relative;
  z-index: var(--z-base);
  margin-top: var(--s-1);
  font-size: calc(var(--fs-h3) + 3px);
  font-weight: var(--w-head);
  line-height: 1.12;
  letter-spacing: var(--track-h2);
  max-width: 20ch;
}
.steps-body { position: relative; z-index: var(--z-base); margin-top: var(--s-3); }
.steps-body > * + * { margin-top: var(--steps-gap); }
.steps-p { color: var(--text-mid); font-size: var(--steps-p); line-height: 1.5; max-width: var(--measure); }
.steps-p--strong { color: var(--text); font-weight: var(--w-semi); }
.steps-em { color: var(--text); font-weight: var(--w-semi); }

/* the three pictures share one frame */
.steps-vis {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--card-2), var(--card));
  box-shadow: var(--shadow-card);
}

/* ---------------- 01: the radar ---------------- */
.steps-radar {
  padding: 34px 10px 10px;
  background:
    radial-gradient(60% 60% at 50% 55%, rgb(var(--accent-rgb) / .1), transparent 70%),
    linear-gradient(180deg, var(--card-2), var(--card));
}
.steps-radar-tag { font-size: var(--fs-eyebrow); top: 8px; right: 8px; }
.steps-radar-plot { position: relative; width: 100%; aspect-ratio: 16 / 8.4; }
.steps-radar-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.steps-rings polygon { fill: none; stroke: var(--border-strong); stroke-width: 1; }
.steps-spokes path { fill: none; stroke: rgb(var(--accent-rgb) / .55); stroke-width: 1.2; stroke-linecap: round; }
.steps-shape polygon { fill: rgb(var(--accent-rgb) / .22); stroke: var(--accent); stroke-width: 1.6; stroke-linejoin: round; }
.steps-shape circle { fill: var(--accent-3); }
.steps-shape { transform-box: view-box; transform-origin: 160px 100px; }
.steps-sweep {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 82%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgb(var(--accent-rgb) / 0) 0deg, rgb(var(--accent-rgb) / 0) 300deg, rgb(var(--accent-rgb) / .28) 358deg, rgb(var(--accent-rgb) / 0) 360deg);
  pointer-events: none;
}
.steps-axes { position: absolute; inset: 0; }
.steps-ax {
  position: absolute;
  font-size: var(--fs-micro);
  font-weight: var(--w-semi);
  line-height: 1.2;
  color: var(--text);
  white-space: nowrap;
}
.steps-ax--0 { left: 50%;     top: 14%;   transform: translate(-50%, -100%); }
.steps-ax--1 { left: 64.5%;   top: 26.5%; transform: translate(0, -100%); }
.steps-ax--2 { left: 71%;     top: 50%;   transform: translate(0, -50%); }
.steps-ax--3 { left: 64.5%;   top: 73.5%; }
.steps-ax--4 { left: 50%;     top: 86%;   transform: translate(-50%, 0); }
.steps-ax--5 { left: 35.5%;   top: 73.5%; transform: translate(-100%, 0); }
.steps-ax--6 { left: 29%;     top: 50%;   transform: translate(-100%, -50%); }
.steps-ax--7 { left: 35.5%;   top: 26.5%; transform: translate(-100%, -100%); white-space: normal; width: 5.4em; text-align: right; }

/* ---------------- 01: the questions, one paragraph, lit in turn ---------------- */
.steps-qs {
  font-size: var(--steps-p);
  font-weight: var(--w-mid);
  line-height: 1.72;
  color: var(--text);
}
.steps-q {
  padding: 2px 5px;
  margin-left: -3px;
  border-radius: var(--r-xs);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: color .45s var(--ease-out), background-color .45s var(--ease-out);
}
.steps-q--last { font-weight: var(--w-bold); }
/* not asked yet: quieter, never greyed out (text-muted is 6.9:1); the one being asked gets a soft highlight */
.steps-ask.is-scrub .steps-q:not(.is-asked) { color: var(--text-muted); }
.steps-ask.is-scrub .steps-q.is-asked { color: var(--text); }
.steps-q.is-now { background: rgb(var(--text-rgb) / .1); }

.steps-callout {
  padding: var(--s-2) 0 var(--s-2) var(--s-4);
  border-left: 3px solid var(--border-strong);
  font-size: var(--fs-lead);
  font-weight: var(--w-bold);
  line-height: var(--lh-snug);
  color: var(--text);
}
.steps-takes {
  padding: var(--s-3) 14px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r);
  font-size: var(--steps-p);
  line-height: 1.5;
  color: var(--text-mid);
}
.steps-takes-k {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: var(--w-bold);
  letter-spacing: .04em;
  color: var(--text);
}

/* ---------------- 02: the ranked grid ---------------- */
.steps-matrix { padding: 10px; }
.steps-cells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.steps-cell {
  position: relative;
  height: 52px;
  padding: 8px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: rgb(var(--text-rgb) / .02);
  overflow: hidden;
}
.steps-cell-t {
  position: relative;
  z-index: var(--z-raised);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: var(--w-bold);
  letter-spacing: .04em;
  color: var(--text);
}
.steps-cell--now {
  border-color: rgb(var(--accent-rgb) / .6);
  background: radial-gradient(120% 120% at 0% 0%, rgb(var(--accent-rgb) / .2), transparent 70%), var(--card-2);
  box-shadow: 0 0 26px -6px rgb(var(--accent-rgb) / .55);
}
.steps-cell--now .steps-cell-t { color: var(--accent-3); }
.steps-cell--later .steps-cell-t { color: var(--text-mid); }
.steps-cell--skip { border-style: dashed; background: none; }
.steps-cell--skip .steps-cell-t { color: var(--text-muted); }
.steps-dot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px rgb(var(--accent-rgb) / .7);
}
.steps-dot--lg { width: 22px; height: 22px; margin: -11px 0 0 -11px; }
.steps-dot--sm { width: 12px; height: 12px; margin: -6px 0 0 -6px; background: var(--accent-deep); box-shadow: none; }
.steps-dot--off { width: 12px; height: 12px; margin: -6px 0 0 -6px; background: none; border: 2px solid var(--text-dim); box-shadow: none; }
.steps-chips { margin-top: var(--s-2); justify-content: center; flex-wrap: nowrap; gap: 6px; }
.steps-chips .chip { padding: 5px 9px; gap: 6px; }
@media (max-width: 374px) { .steps-chips .chip { padding: 4px 7px; } }

/* ---------------- 02: two numbers, never added ---------------- */
.steps-pair {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-3);
  align-items: stretch;
}
.steps-num {
  position: relative;
  padding: var(--s-3) 10px;
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--card-2), var(--card));
  box-shadow: var(--shadow-card);
  min-width: 0;
}
.steps-num--growth { border-top-color: var(--border-strong); }
.steps-num-h {
  font-family: var(--font-mono);
  font-size: var(--fs-tag);
  font-weight: var(--w-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--text-mid);
  text-wrap: balance;
}
.steps-num--growth .steps-num-h { color: var(--text); }
.steps-num-b { margin-top: var(--s-2); font-size: var(--fs-small); line-height: 1.4; color: var(--text-mid); }
/* the formula: each × in coral so the factors read apart at a glance; from 768 one factor a line, like a sum on paper */
.steps-f { display: block; color: var(--text); font-weight: var(--w-semi); }
.steps-op { color: var(--accent); font-weight: var(--w-bold); }
/* the worked example reads as a stacked pair: "Example: 10 × 52 × $500 =" then "$260,000 a year." */
.steps-ex { display: block; margin-top: var(--s-2); color: var(--text-muted); }
.steps-ex-n { display: block; white-space: nowrap; color: var(--text-mid); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.steps-ex--fill { color: var(--text-mid); }
/* the growth card's answer line sits where the time card's big number sits */
.steps-tail { display: block; margin-top: var(--s-2); }
.steps-sum { display: block; color: var(--text); font-weight: var(--w-bold); }
@media (max-width: 767px) {
  /* phones: the growth card carries more words, so it takes a little more of the row */
  .steps-pair { grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); gap: 10px; }
  .steps-pair .steps-notplus { left: calc((100% - 10px) * .43 + 5px); }
  /* the answer and the note run on as one short paragraph */
  .steps-num--growth .steps-tail { margin-top: 6px; }
  .steps-sum { display: inline; }
  .steps-num--growth .steps-ex--fill { display: inline; margin-top: 0; }
}
@media (max-width: 374px) {
  /* the narrowest phones: the worked example needs its full half of the row */
  .steps-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .steps-pair .steps-notplus { left: 50%; }
}
@media (min-width: 768px) { .steps-fx { display: block; } .steps-fx + .steps-fx { margin-top: 2px; } }
.steps-big {
  display: block;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-weight: var(--w-bold);
  font-size: clamp(19px, 5.6vw, 34px);
  letter-spacing: -0.04em;
  line-height: 1.1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 22px rgb(var(--accent-rgb) / .4);
  white-space: nowrap;
}
.steps-yr { display: block; color: var(--text-muted); }
/* a plus sign, struck through: the two numbers are never added */
.steps-notplus {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: var(--z-raised);
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background:
    linear-gradient(var(--text-muted), var(--text-muted)) center / 12px 2px no-repeat,
    linear-gradient(var(--text-muted), var(--text-muted)) center / 2px 12px no-repeat,
    var(--bg);
}
.steps-notplus::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
  background: var(--text);
  transform: rotate(-45deg);
  transition: transform .5s var(--ease-out) .55s;
}
html.js:not(.reduced) .steps-pair:not(.is-in) .steps-notplus::after { transform: rotate(-45deg) scaleX(0); }

.steps-goal {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  padding: var(--s-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  background: radial-gradient(100% 120% at 0% 0%, rgb(var(--text-rgb) / .05), transparent 65%), var(--card);
}
.steps-goal-ring {
  flex: none;
  width: 30px;
  height: 30px;
  margin-top: 2px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--text) 0 3px, transparent 4px 7px, rgb(var(--text-rgb) / .7) 7.5px 9px, transparent 9.5px 12px, rgb(var(--text-rgb) / .35) 12.5px 14px, transparent 14.5px);
}
.steps-goal-t { font-size: var(--steps-p); font-weight: var(--w-bold); line-height: 1.4; color: var(--text); }
.steps-goal-s { margin-top: var(--s-1); }
.steps-foot { font-size: var(--fs-micro); line-height: var(--lh-snug); color: var(--text-muted); }

/* ---------------- 03: the AIOS switching on, along its first 30 days ---------------- */
.steps-os {
  padding: 14px 14px 12px;
  background:
    radial-gradient(80% 70% at 15% 100%, rgb(var(--accent-rgb) / .12), transparent 70%),
    linear-gradient(180deg, var(--card-2), var(--card));
  overflow: hidden;
}
.steps-os-t {
  font-size: var(--fs-h3);
  font-weight: var(--w-head);
  line-height: 1.2;
  letter-spacing: var(--track-h2);
  color: var(--text);
  text-wrap: balance;
}
/* the timeline: four milestones, evenly spaced, one marker look and one size.
   Kickoff is the start: a solid coral marker the line grows out of. Day 7, About day 14 and Day 30 are ring markers
   that light as the line reaches them. Between them, two AI employees (switches, one size) come on: after Day 7
   and after the Blueprint. Labels: Kickoff above-left, About day 14 above its marker, Day 7 below its marker,
   Day 30 below-right. Six equal columns put each label's centre (or end) on its marker. */
.sec--steps { --steps-mk: 14px; }
.steps-time {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: auto 34px auto;
  row-gap: 2px;
  margin-top: var(--s-3);
  padding-inline: 8px;
}
.steps-when { display: contents; list-style: none; }
.steps-when-i {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: var(--w-mid);
  line-height: 1.35;
  color: var(--text-mid);
  min-width: 0;
  text-wrap: balance;
}
.steps-when-i b { color: var(--text); font-weight: var(--w-bold); }
.steps-when-i--k  { grid-row: 1; grid-column: 1 / 3; align-self: end; margin-left: -8px; color: var(--text); font-weight: var(--w-bold); }
.steps-when-i--14 { grid-row: 1; grid-column: 3 / 7; align-self: end; text-align: center; }
.steps-when-i--7  { grid-row: 3; grid-column: 1 / 5; text-align: center; }
.steps-when-i--30 { grid-row: 3; grid-column: 5 / 7; text-align: right; margin-right: -8px; }
.steps-when-i--7 b { color: var(--accent-3); }

.steps-line { grid-row: 2; grid-column: 1 / -1; position: relative; }
.steps-line::before,
.steps-line-fill {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
  background: var(--border-strong);
}
.steps-line-fill {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 10px rgb(var(--accent-rgb) / .5);
  transform-origin: left center;
  transition: transform 2.4s linear .3s;
}
.steps-at-0 { left: 0; }
.steps-at-1 { left: 33.333%; }
.steps-at-2 { left: 66.667%; }
.steps-at-3 { left: 100%; }
/* the marker: the rail node's look, which is the page's marker (white ring with a dot), one size.
   Kickoff is the same marker, lit from the start; the line grows out of it and lights the others as it reaches them. */
.steps-mk {
  position: absolute;
  top: 50%;
  z-index: var(--z-raised);
  width: var(--steps-mk);
  height: var(--steps-mk);
  margin: calc(var(--steps-mk) / -2) 0 0 calc(var(--steps-mk) / -2);
  border-radius: 50%;
  color: var(--mk-on);
  border: var(--mk-ring) solid currentColor;
  background: var(--mk-fill) var(--card);
  box-shadow: 0 0 0 3px var(--card);
  transition: color .3s var(--ease-out) var(--d, 0s);
}
/* the AI employees: two switches, one size, centred between the milestones */
.steps-sw { position: absolute; top: 50%; z-index: var(--z-raised); --sw-w: 30px; --sw-h: 18px; margin: -9px 0 0 -15px; }
.steps-sw--1 { left: 50%; }
.steps-sw--2 { left: 83.333%; }
.steps-ping {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  opacity: 0;
  pointer-events: none;
}
/* each thing lights as the fill (2.4s from .3s) reaches it: Day 7 at 1.1s, the first switch 1.5s,
   the Blueprint 1.9s, the next switch 2.3s, Day 30 2.7s */
.steps-os .steps-sw, .steps-os .steps-sw::after { transition-duration: .35s; }
.steps-os .steps-at-1 { --d: 1.1s; }
.steps-os .steps-sw--1, .steps-os .steps-sw--1::after { transition-delay: 1.5s; }
.steps-os .steps-at-2 { --d: 1.9s; }
.steps-os .steps-sw--2, .steps-os .steps-sw--2::after { transition-delay: 2.3s; }
.steps-os .steps-at-3 { --d: 2.7s; }

/* start state (script on, motion allowed, before the picture arrives): line empty, milestones unlit, switches off */
html.js:not(.reduced) .steps-os:not(.is-in) .steps-line-fill { transform: scaleX(0); transition-duration: 0s; transition-delay: 0s; }
html.js:not(.reduced) .steps-os:not(.is-in) .steps-sw { background: var(--border-strong); box-shadow: none; transition-delay: 0s; }
html.js:not(.reduced) .steps-os:not(.is-in) .steps-sw::after { transform: none; background: var(--text-muted); transition-delay: 0s; }
html.js:not(.reduced) .steps-os:not(.is-in) .steps-mk { --d: 0s; }
html.js:not(.reduced) .steps-os:not(.is-in) .steps-mk:not(.steps-mk--start) { color: var(--mk-off); }

.steps-own {
  font-size: calc(var(--fs-body) + 1px);
  font-weight: var(--w-semi);
  line-height: var(--lh-snug);
  color: var(--text-mid);
}
.steps-own-a { color: var(--text); font-weight: var(--w-head); }

/* ---------------- the button ---------------- */
.steps-cta { margin-top: var(--s-5); display: flex; justify-content: center; }
.steps-cta .cta { max-width: 420px; }
.steps-cta .cta-note { justify-content: center; text-align: center; }

/* ---------------- desktop: use the width ---------------- */
@media (min-width: 768px) {
  .steps-head .lead { font-size: var(--fs-lead); line-height: var(--lh-snug); }
  .steps-thesis { margin-top: var(--s-7); }
  .steps-fix { line-height: var(--lh-body); }
  .steps-earn { margin-top: var(--s-5); font-size: calc(var(--fs-lead) * 1.15); }
  .steps-track { margin-top: var(--s-7); }
  .steps-step + .steps-step { margin-top: var(--s-9); }
  .steps-title { font-size: calc(var(--fs-h3) * 1.4); max-width: 24ch; margin-top: var(--s-2); }
  .steps-body { margin-top: var(--s-5); }
  .steps-p { line-height: var(--lh-body); }
  .steps-radar { padding: var(--s-7) var(--s-3) var(--s-4); }
  .steps-radar-plot { aspect-ratio: 16 / 10; }
  .steps-qs { font-size: var(--fs-lead); line-height: 1.75; }
  .steps-takes { padding: var(--s-4) var(--s-5); }
  .steps-matrix { padding: var(--s-4); }
  .steps-cells { gap: var(--s-2); }
  .steps-cell { height: 132px; padding: var(--s-3); }
  .steps-dot { width: 16px; height: 16px; margin: -8px 0 0 -8px; }
  .steps-dot--lg { width: 24px; height: 24px; margin: -12px 0 0 -12px; }
  .steps-chips { margin-top: var(--s-3); }
  .steps-num { padding: var(--s-5); }
  .steps-num-h { font-size: var(--fs-micro); letter-spacing: var(--track-tag); }
  .steps-num-b { font-size: var(--fs-body); }
  .steps-notplus { width: 36px; height: 36px; margin: -18px 0 0 -18px; }
  .steps-pair { gap: var(--s-7); }
  .steps-goal { padding: var(--s-5); gap: var(--s-4); }
  .steps-goal-t { font-size: var(--fs-lead); line-height: var(--lh-snug); }
  .steps-os { padding: var(--s-6) var(--s-5) var(--s-5); }
  .steps-os-t { font-size: calc(var(--fs-h3) * 1.3); line-height: 1.15; }
  .steps-time { margin-top: var(--s-6); grid-template-rows: auto 44px auto; }
  .sec--steps { --steps-mk: 16px; }
  .steps-sw { --sw-w: 34px; --sw-h: 20px; margin: -10px 0 0 -17px; }
  .steps-when-i { font-size: var(--fs-micro); }
  .steps-own { font-size: var(--fs-lead); }
  .steps-cta { margin-top: var(--s-8); }
}
@media (min-width: 1024px) {
  .steps-thesis { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); max-width: none; align-items: end; }
  .steps-earn { margin-top: 0; font-size: calc(var(--fs-lead) * 1.3); }
  .steps-title { font-size: calc(var(--fs-h2) * .74); }
  .steps-step + .steps-step { margin-top: var(--s-10); }
  .steps-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
    column-gap: var(--s-8);
    align-items: start;
    margin-top: var(--s-6);
  }
  .steps-body > * { grid-column: 1; }
  .steps-body > * + * { margin-top: var(--s-5); }
  .steps-body > .steps-vis {
    grid-column: 2;
    grid-row: 1 / span 12;
    margin-top: 0;
    position: sticky;
    top: 96px;
  }
  .steps-ghost { right: auto; left: calc(50% + var(--s-4)); top: calc(-1 * var(--s-7)); font-size: var(--fs-ghost); }
  .steps-os-t { font-size: calc(var(--fs-h2) * .62); }
  .steps-cta { justify-content: flex-start; padding-left: var(--steps-x); }
  .steps-cta .cta-note { justify-content: flex-start; text-align: left; }
}

/* ==== 05b-multiplayer.css ==== */
/* 05b Make AI a multiplayer game (Austin's section, PHASE-B item 1), with Chase's question and his three team scenes inside.
   Order: head, chips (who gets an AIOS), the rollout in four steps on the page's rail and marker, Chase's question,
   three chat scenes built from the shared chat pieces (02a-chat.css), the payoff.
   The payoff is an aim, never a promise: it takes the left-rule look of an answer, not a glow card, and no number,
   guarantee or result sits next to it. */

.sec--multiplayer { position: relative; }
.mp-glow {
  position: absolute;
  inset: 0;
  z-index: var(--z-under);
  background: var(--glow-tr);
  opacity: .7;
  pointer-events: none;
}

/* ---------- who gets one ---------- */
.mp-chips { position: relative; z-index: var(--z-base); margin-top: var(--s-4); gap: 6px; }

/* ---------- the rollout: four steps on one rail, the page's marker at each ----------
   Each step is the page's fold (02-components.css .fold): open in the markup, so with no script every word shows;
   on phones the core closes it on boot and the step reads as its label and head, a tap opens the body.
   At 768 and up nothing folds and the row loses its card look. */
.sec--multiplayer .mp-steps {
  --mp-mk: 14px;
  position: relative;
  z-index: var(--z-base);
  display: grid;
  gap: var(--s-2);
  margin-top: 20px;
  padding-left: 26px;
}
.mp-steps::before {
  content: "";
  position: absolute;
  left: calc(var(--mp-mk) / 2 - .5px);
  top: 26px;
  bottom: 26px;
  width: 1px;
  background: var(--border-strong);
}
.mp-step { position: relative; }
.mp-mk {
  position: absolute;
  left: -26px;
  top: 19px;
  z-index: var(--z-raised);
  width: var(--mp-mk);
  height: var(--mp-mk);
  border-radius: 50%;
  color: var(--mk-on);
  border: var(--mk-ring) solid currentColor;
  background: var(--mk-fill) var(--bg);
  box-shadow: 0 0 0 3px var(--bg);
}
/* the founder's step is where it starts: the coral marker, matching the coral "You" chip above */
.mp-step:first-child .mp-mk { color: var(--mk-hot); box-shadow: 0 0 0 3px var(--bg), var(--mk-hot-glow); }
html.js:not(.reduced) .mp-step .mp-mk { transition: transform .4s var(--ease-out) .15s, opacity .4s var(--ease-out) .15s; }
html.js:not(.reduced) .mp-step:not(.is-in) .mp-mk { transform: scale(.4); opacity: 0; }
.mp-sum { min-height: 48px; padding-top: 6px; padding-bottom: 6px; }
.mp-sum-t { display: block; flex: 1; min-width: 0; }
.mp-k {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--w-bold);
  letter-spacing: var(--track-tag);
  line-height: 14px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.mp-h {
  margin-top: 2px;
  hyphens: manual;
  text-wrap: pretty;
  font-size: 16px;
  font-weight: var(--w-bold);
  line-height: 20px;
  letter-spacing: -0.01em;
  color: var(--text);
}
.mp-fold .fold-body { margin-top: var(--s-2); padding: 0 var(--s-4) var(--s-2); }
.mp-p {
  font-size: var(--fs-small);
  line-height: 20px;
  color: var(--text-mid);
  max-width: 46ch;
  text-wrap: pretty;
}
@media (min-width: 768px) {
  /* nothing folds: the summary is a plain label and head, not a card row, and never toggles (05b-multiplayer.js) */
  .sec--multiplayer .mp-step > .mp-fold > .mp-sum {
    display: block;
    min-height: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    cursor: default;
  }
  .mp-sum .fold-icon { display: none; }
  .mp-fold .fold-body { margin-top: var(--s-2); padding: 0; }
  .mp-mk { top: 1px; }
}

/* ---------- Chase's question and the three scenes ---------- */
.mp-crew { position: relative; z-index: var(--z-base); margin-top: var(--s-6); }
.mp-q {
  font-size: 21px;
  font-weight: var(--w-head);
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: var(--text);
  max-width: 24ch;
  text-wrap: balance;
}
.mp-scenes { display: grid; gap: var(--s-3); margin-top: 22px; }
.mp-col { position: relative; min-width: 0; }
.mp-scene { height: 100%; }
/* one "Sample business" tag for all three scenes, pinned on the first frame's top edge (adds no height) */
.mp-tag { position: absolute; top: -11px; left: max(10px, calc(50% - 142px)); z-index: var(--z-raised); }

/* ---------- the payoff: an aim, in the left-rule look ---------- */
.mp-payoff {
  position: relative;
  z-index: var(--z-base);
  margin-top: var(--s-5);
  padding-left: var(--s-3);
  border-left: 2px solid var(--accent);
  font-size: 18px;
  font-weight: var(--w-bold);
  line-height: 1.38;
  color: var(--text);
  max-width: 40ch;
  text-wrap: pretty;
}
.mp-payoff-b { color: var(--accent-3); }

/* ---------- tablets: scenes in one centred column ---------- */
@media (min-width: 768px) {
  .mp-chips { margin-top: var(--s-5); gap: var(--s-2); }
  .sec--multiplayer .mp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-6); row-gap: var(--s-5); }
  .mp-steps::before { display: none; }
  .mp-q { font-size: 26px; max-width: 30ch; }
  .mp-scenes { max-width: 520px; margin-inline: auto; margin-top: 28px; }
  .mp-payoff { font-size: 22px; }
}

/* ---------- desktop: four steps across one rail, three scenes across ---------- */
@media (min-width: 1024px) {
  .sec--multiplayer .mp-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--s-6);
    margin-top: var(--s-7);
    padding-left: 0;
    padding-top: 30px;
  }
  .mp-steps::before {
    display: block;
    left: 7px;
    right: 0;
    top: 6.5px;
    bottom: auto;
    width: auto;
    height: 1px;
    background: linear-gradient(90deg, var(--border-strong), var(--border-strong) 85%, transparent);
  }
  .mp-mk { left: 0; top: -30px; }
  .mp-h { font-size: 19px; line-height: 24px; margin-top: 6px; }
  .mp-p { font-size: 15px; line-height: 23px; }
  .mp-crew { margin-top: var(--s-8); }
  .mp-q { font-size: 30px; max-width: none; }
  .mp-scenes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); max-width: none; margin-top: 34px; align-items: stretch; }
  .mp-tag { left: 18px; }
  .mp-col--phone .mp-tag { left: max(10px, calc(50% - 142px)); }
  .mp-payoff { margin: var(--s-7) auto 0; max-width: 34ch; padding-left: var(--s-4); font-size: 28px; line-height: 1.3; letter-spacing: -0.015em; }
}

/* ---------- phone rhythm: the chips in two rows, a little less air between blocks ---------- */
@media (max-width: 767px) {
  .mp-chips { margin-top: 14px; }
  .mp-chips .chip { min-height: 28px; padding: 4px 10px; gap: 6px; font-size: 12px; }
  .mp-crew { margin-top: 24px; }
  .sec--multiplayer .mp-steps { gap: 6px; }
  .mp-scenes { margin-top: 20px; gap: 10px; }
  .mp-payoff { margin-top: 20px; }
}

/* ==== 06-aios.css ==== */
/* 06-aios.css: "A chatbot is a smart stranger. Yours knows your business."
   The Collapse: six scattered chips pull into one hub (your company brain, shaped like a phone), lines connect them,
   the hub lands with the page's only bounce. Markup is the finished diagram; start states are keyed to .aios-trig
   (data-reveal="none"), so the core always releases them. DOM order follows copy.json; the grid places the map. */

.sec--aios { background-image: radial-gradient(700px 520px at 50% 46%, rgb(var(--accent-rgb) / .07), transparent 70%); }

/* ---------- layout: phone = head, map, statements, foot. Desktop = head across, statements left, map right ---------- */
.aios-grid {
  position: relative;
  z-index: var(--z-base);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "map" "does" "foot";
  row-gap: var(--s-6);
}
.aios-grid > * { margin: 0; min-width: 0; }
.aios-head { grid-area: head; }
.aios-does { grid-area: does; }
.aios-foot { grid-area: foot; }
.aios-map  { grid-area: map; }

@media (min-width: 1024px) {
  .aios-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "head head" "does map" "foot map";
    grid-template-rows: auto auto 1fr;
    column-gap: var(--s-9);
    row-gap: var(--s-7);
  }
  .aios-head { max-width: 900px; }
  .aios-map { align-self: start; }
}

/* ---------- the four statements: branches off the brain, on one spine ---------- */
.aios-does {
  position: relative;
  display: grid;
  gap: var(--s-5);
  list-style: none;
  padding: 0;
}
.aios-does::before {              /* the spine */
  content: "";
  position: absolute;
  left: 21px;
  top: 22px;
  bottom: 22px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--accent), rgb(var(--accent-rgb) / .15));
  transform-origin: center top;
  transition: transform 1.1s var(--ease-out) .1s;
}
html.js:not(.reduced) .aios-does:not(.is-in)::before { transform: scaleY(0); }

.aios-do {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--s-4);
  align-items: start;
}
.aios-do > p {
  padding: var(--s-4) var(--s-5) var(--s-4) var(--s-5);
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--card-2), var(--card));
  box-shadow: var(--shadow-card);
  font-size: var(--fs-body);
  line-height: var(--lh-snug);
  color: var(--text-mid);
}
.aios-do-h {
  display: block;
  margin-bottom: var(--s-1);
  font-size: var(--fs-h3);
  font-weight: var(--w-head);
  letter-spacing: var(--track-h3);
  line-height: 1.2;
  color: var(--text);
}
.aios-do-node {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-top: var(--s-3);
  border-radius: 50%;
  border: 1px solid var(--accent-line);
  background: radial-gradient(circle at 50% 35%, var(--accent-soft), var(--bg) 75%);
  box-shadow: 0 0 0 4px var(--bg), 0 0 18px rgb(var(--accent-rgb) / .28);
  transition: box-shadow .5s var(--ease-out) .35s, border-color .5s var(--ease-out) .35s;
}
html.js:not(.reduced) .aios-do[data-reveal]:not(.is-in) .aios-do-node { box-shadow: 0 0 0 4px var(--bg); border-color: var(--border-strong); }

/* small line icons, drawn with CSS only (no words, no digits) */
.aios-ico { position: relative; display: block; width: 18px; height: 18px; color: var(--accent); }
.aios-ico::before, .aios-ico::after { content: ""; position: absolute; box-sizing: border-box; }
.aios-ico--you::before { left: 5px; top: 1px; width: 8px; height: 8px; border: 2px solid currentColor; border-radius: 50%; }
.aios-ico--you::after { left: 1px; bottom: 1px; width: 16px; height: 7px; border: 2px solid currentColor; border-bottom: 0; border-radius: 8px 8px 0 0; }
.aios-ico--nums::before { left: 1px; bottom: 1px; width: 16px; height: 16px;
  background: linear-gradient(currentColor, currentColor) 1px 100% / 3px 7px no-repeat,
              linear-gradient(currentColor, currentColor) 6.5px 100% / 3px 12px no-repeat,
              linear-gradient(currentColor, currentColor) 12px 100% / 3px 16px no-repeat; }
.aios-ico--brief::before { left: 1px; top: 2px; width: 16px; height: 14px; border: 2px solid currentColor; border-radius: 3px; }
.aios-ico--brief::after { left: 5px; top: 6px; width: 8px; height: 6px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; }
.aios-ico--work::before { left: 2px; top: 3px; width: 14px; height: 8px; border-left: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(-45deg); }

/* ---------- the control line and the team line ---------- */
.aios-foot { display: grid; gap: var(--s-4); }
.aios-control {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--accent-soft), rgb(var(--card-rgb) / .6));
  font-size: var(--fs-body);
  line-height: var(--lh-snug);
  color: var(--text-mid);
}
.aios-control strong { color: var(--text); font-weight: var(--w-bold); }
.aios-switch { flex: none; }
html.js:not(.reduced) .aios-control[data-reveal]:not(.is-in) .aios-switch { background: var(--border-strong); box-shadow: none; }
html.js:not(.reduced) .aios-control[data-reveal]:not(.is-in) .aios-switch::after { transform: none; background: var(--text-muted); }
.aios-control .aios-switch, .aios-control .aios-switch::after { transition-delay: .55s; }
.aios-team {
  padding-left: var(--s-5);
  font-size: var(--fs-body);
  line-height: var(--lh-snug);
  color: var(--text-muted);
}
.aios-team strong { color: var(--text-warm); font-weight: var(--w-semi); }

/* ---------- the map: one stage in 340 x 440 units, positions in those units ---------- */
.aios-map {
  width: 100%;
  max-width: 460px;
  margin-inline: auto;
}
@media (min-width: 1024px) { .aios-map { max-width: 520px; position: sticky; top: var(--s-7); } }

.aios-stage {
  --u: calc(100cqw / 340);
  --H: 440;                         /* stage height in units: 440 desktop, 230 phone */
  position: relative;
  width: 100%;
  aspect-ratio: 340 / var(--H);
  container-type: inline-size;
  border-radius: var(--r-lg);
  background:
    var(--dot-grid) 0 0 / 14px 14px,
    radial-gradient(closest-side at 50% 50%, rgb(var(--accent-rgb) / .10), transparent 100%);
}
/* The trigger sits near the stage's foot, so the Collapse starts only once the whole stage is on screen. On phones it
   sits 64px under the stage (see the phone block): the stage is then above the bottom bar when it fires (reveal at
   90% of the screen, safety net at 92%: stage bottom lands at 534 to 547 on a 664 screen). */
.aios-trig { position: absolute; left: 50%; top: calc(100% - 40px); width: 1px; height: 1px; pointer-events: none; }

/* lines */
.aios-lines--p { display: none; }
.aios-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; color: var(--accent); }
.aios-edges path { fill: none; stroke: currentColor; stroke-opacity: .8; stroke-width: 1.6; stroke-linecap: butt; stroke-dasharray: 1; stroke-dashoffset: 0; }
.aios-flow path { fill: none; stroke: var(--accent-3); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: .07 1.93; stroke-dashoffset: .07; opacity: 0; }
.aios-ports circle { fill: var(--accent); transform-box: fill-box; transform-origin: center; }

/* chips: an li per chip, centred on its point; the inner chip moves */
.aios-chips { position: absolute; inset: 0; list-style: none; padding: 0; margin: 0; }
.aios-node {
  --x: var(--dx); --y: var(--dy); --sx: var(--dsx); --sy: var(--dsy);
  position: absolute;
  left: calc(var(--x) * 100% / 340);
  top: calc(var(--y) * 100% / var(--H));
  transform: translate(-50%, -50%);
  z-index: 2;
}
.aios-chip {
  --sx-px: calc(var(--sx) * var(--u));
  --sy-px: calc(var(--sy) * var(--u));
  font-size: max(var(--fs-chip), calc(13 * var(--u)));
  min-height: max(32px, calc(32 * var(--u)));
  padding-inline: max(12px, calc(12 * var(--u)));
  border-color: var(--accent-line);
  background: linear-gradient(180deg, var(--card-2), var(--card));
  color: var(--text);
  box-shadow: 0 6px 18px -8px rgb(var(--shadow-rgb) / .9), 0 0 0 1px rgb(var(--accent-rgb) / .06);
  transition: border-color .5s var(--ease-out) calc(1.1s + var(--i) * .08s), color .5s var(--ease-out) calc(1.1s + var(--i) * .08s);
}

/* hub: the brain, shaped like a phone */
.aios-hub {
  --hx: 102; --hy: 136; --hw: 136; --hh: 168;
  position: absolute;
  left: calc(var(--hx) * 100% / 340);
  top: calc(var(--hy) * 100% / var(--H));
  width: calc(var(--hw) * 100% / 340);
  height: calc(var(--hh) * 100% / var(--H));
  z-index: 1;
}
.aios-hub-glow {
  position: absolute;
  inset: -45%;
  background: var(--glow-center);
  border-radius: 50%;
  pointer-events: none;
}
/* the shell (the phone-shaped frame) takes the spring; the words never scale, so they stay readable */
.aios-hub-shell {
  --hub-from: .8;                   /* where the spring starts; the words inside the hub still fit the shell at this size */
  position: absolute;
  inset: 0;
  border-radius: calc(26 * var(--u));
  border: 1.5px solid rgb(var(--accent-rgb) / .75);
  background: radial-gradient(120% 80% at 50% 0%, rgb(var(--accent-rgb) / .22), transparent 60%), linear-gradient(180deg, var(--card-2), var(--bg));
  box-shadow: inset 0 1px 0 rgb(var(--text-rgb) / .08), 0 0 0 calc(5 * var(--u)) rgb(var(--accent-rgb) / .08), 0 24px 60px -18px rgb(var(--accent-rgb) / .55);
}
.aios-hub-core {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(6 * var(--u));
  padding: calc(18 * var(--u)) calc(8 * var(--u)) calc(12 * var(--u));
  text-align: center;
}
.aios-hub-notch {
  position: absolute;
  top: calc(9 * var(--u));
  left: 50%;
  width: calc(34 * var(--u));
  height: calc(5 * var(--u));
  border-radius: 99px;
  transform: translateX(-50%);
  background: rgb(var(--text-rgb) / .14);
}
.aios-hub-switch { --sw-w: max(34px, calc(34 * var(--u))); --sw-h: max(20px, calc(20 * var(--u))); margin-bottom: calc(2 * var(--u)); }
.aios-hub-switch, .aios-hub-switch::after { transition-delay: 1.45s; }
html.js:not(.reduced) .aios-trig:not(.is-in) ~ .aios-hub .aios-hub-switch { background: var(--border-strong); box-shadow: none; }
html.js:not(.reduced) .aios-trig:not(.is-in) ~ .aios-hub .aios-hub-switch::after { transform: none; background: var(--text-muted); }
.aios-hub-label {
  font-size: max(20px, calc(21 * var(--u)));
  font-weight: var(--w-head);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--text);
}
.aios-hub-sub {
  font-family: var(--font-mono);
  font-size: max(12px, calc(11.5 * var(--u)));
  line-height: 1.3;
  color: var(--accent-3);
}

/* caption */
.aios-cap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  margin-top: var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: var(--w-mid);
  letter-spacing: .02em;
  color: var(--text-warm);
}
.aios-cap-phone {
  flex: none;
  position: relative;
  width: 14px;
  height: 22px;
  border: 2px solid var(--accent);
  border-radius: 4px;
}
.aios-cap-phone::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 4px; height: 2px; border-radius: 2px; background: var(--accent); transform: translateX(-50%); }

/* ---------- start states (JS on, motion allowed, before the trigger arrives): the business in pieces ---------- */
html.js:not(.reduced) .aios-trig:not(.is-in) ~ .aios-chips .aios-chip {
  transform: translate(var(--sx-px), var(--sy-px)) rotate(calc(var(--sr) * 1deg));
  border-color: var(--border-strong);
  color: var(--text-mid);
}
html.js:not(.reduced) .aios-trig:not(.is-in) ~ .aios-lines .aios-edges path { stroke-dashoffset: 1; }
html.js:not(.reduced) .aios-trig:not(.is-in) ~ .aios-lines .aios-ports circle { opacity: 0; }
html.js:not(.reduced) .aios-trig:not(.is-in) ~ .aios-hub .aios-hub-shell { transform: scale(var(--hub-from)); opacity: .35; }
html.js:not(.reduced) .aios-trig:not(.is-in) ~ .aios-hub .aios-hub-core { opacity: .45; }
html.js:not(.reduced) .aios-trig:not(.is-in) ~ .aios-hub .aios-hub-sub { opacity: 0; }   /* it would spill past the small shell */
html.js:not(.reduced) .aios-trig:not(.is-in) ~ .aios-hub .aios-hub-glow { opacity: 0; }

/* drifting while scattered: CSS loop, on screen only (data-loop), never under reduced motion */
@keyframes aios-drift {
  0%   { translate: 0 0; }
  50%  { translate: calc(4px * var(--dd, 1)) -3px; }
  100% { translate: calc(-3px * var(--dd, 1)) 2px; }
}
html.js:not(.reduced) .aios-stage[data-loop].is-playing .aios-trig:not(.is-in) ~ .aios-chips .aios-chip {
  animation: aios-drift calc(3.2s + var(--i) * .45s) var(--ease-inout) calc(var(--i) * -.7s) infinite alternate;
}
.aios-node:nth-child(even) .aios-chip { --dd: -1; }

/* ---------- live: after the Collapse, data flows into the brain and the hub breathes ---------- */
@keyframes aios-flow { 0% { stroke-dashoffset: .07; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { stroke-dashoffset: -1; opacity: 0; } }
@keyframes aios-breathe { 0%, 100% { scale: 1; } 50% { scale: .97; } }
@keyframes aios-glow { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
html.js:not(.reduced) .aios-stage.is-live[data-loop].is-playing .aios-flow path {
  animation: aios-flow 2.6s cubic-bezier(.45, 0, .55, 1) calc(var(--i) * .43s) infinite;
}
html.js:not(.reduced) .aios-stage.is-live[data-loop].is-playing .aios-hub-shell { animation: aios-breathe 4s var(--ease-inout) infinite; }
html.js:not(.reduced) .aios-stage.is-live[data-loop].is-playing .aios-hub-glow { animation: aios-glow 4s var(--ease-inout) infinite; }
.aios-hub-core { transition: opacity .5s var(--ease-out) 1.15s; }
.aios-hub-sub { transition: opacity .45s var(--ease-out) 1.4s; }

/* ---------- phone (under 768): one picture, one 2x2 panel, one control line ----------
   The single source of truth for phone spacing in this section (it replaces the old "integration: phone rhythm").
   Map: a 340 x 230 stage, chips in a row of three above and below the hub, so the whole Collapse fits on one screen.
   The four statements: one panel split in four by a cross, a quiet hub dot at the crossing. */
@media (max-width: 767px) {
  /* phone rhythm: the section padding is the shared --sec-pad (32px on phones, 00-tokens.css) */
  .aios-grid { row-gap: 0; }
  .aios-head .aios-eyebrow { display: none; }
  .aios-head > h2 + .lead { margin-top: var(--s-3); font-size: 16px; line-height: 1.5; }
  .aios-team { display: none; }

  .aios-map { margin-top: var(--s-4); }
  .aios-stage { --H: 230; }
  .aios-trig { top: calc(100% + 64px); }
  .aios-node { --x: var(--px); --y: var(--py); --sx: var(--psx); --sy: var(--psy); }
  .aios-lines--p { display: block; }
  .aios-lines--d { display: none; }
  .aios-hub { --hx: 85; --hy: 66; --hw: 170; --hh: 98; }
  .aios-hub-shell { border-radius: calc(20 * var(--u)); }
  .aios-hub-notch { top: calc(7 * var(--u)); }
  .aios-hub-core { gap: 4px; padding: calc(14 * var(--u)) var(--s-2) calc(6 * var(--u)); }
  .aios-hub-switch { --sw-w: 32px; --sw-h: 18px; margin-bottom: 2px; }
  .aios-hub-label { font-size: 20px; }
  .aios-hub-sub { font-size: 12.5px; white-space: nowrap; }
  .aios-cap { margin-top: var(--s-3); }

  /* the 2x2 panel */
  .aios-does {
    margin-top: var(--s-5);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: linear-gradient(180deg, var(--card-2), var(--card));
    box-shadow: var(--shadow-card);
  }
  .aios-does::before { display: none; }
  .aios-do { display: block; padding: var(--s-4) var(--s-3) var(--s-4) var(--s-4); }
  .aios-do:nth-child(even) { padding-left: var(--s-4); }
  /* the cross: each line grows out from the crossing */
  .aios-do:nth-child(-n+2)::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-strong) 70%, var(--text-muted));
    transform-origin: right center;
    transition: transform .7s var(--ease-out) .15s;
  }
  .aios-do:nth-child(2)::after { background: linear-gradient(270deg, transparent, var(--border-strong) 70%, var(--text-muted)); transform-origin: left center; }
  .aios-do:nth-child(odd)::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0; right: 0;
    width: 1px;
    background: linear-gradient(180deg, transparent, var(--border-strong) 70%, var(--text-muted));
    transform-origin: center bottom;
    transition: transform .7s var(--ease-out) .15s;
  }
  .aios-do:nth-child(3)::before { background: linear-gradient(0deg, transparent, var(--border-strong) 70%, var(--text-muted)); transform-origin: center top; }
  html.js:not(.reduced) .aios-does:not(.is-in) .aios-do::before { transform: scaleY(0); }
  html.js:not(.reduced) .aios-does:not(.is-in) .aios-do::after { transform: scaleX(0); }
  .aios-does-core {
    position: absolute;
    right: -5px; bottom: -5px;
    z-index: 2;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--text-warm);
    box-shadow: 0 0 0 4px var(--card), 0 0 14px rgb(var(--text-rgb) / .45);
    transition: transform .5s var(--ease-out), opacity .5s var(--ease-out);
  }
  html.js:not(.reduced) .aios-does:not(.is-in) .aios-does-core { transform: scale(0); opacity: 0; }

  .aios-do-node {
    float: left;
    width: 26px; height: 26px;
    margin: 0 var(--s-2) 0 0;
    border-color: var(--border-strong);
    background: radial-gradient(circle at 50% 35%, var(--card-2), var(--bg) 80%);
    box-shadow: none;
  }
  html.js:not(.reduced) .aios-do[data-reveal]:not(.is-in) .aios-do-node { box-shadow: none; }
  .aios-ico { transform: scale(.78); color: var(--text-warm); }
  .aios-do > p {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    font-size: var(--fs-small);
    line-height: 1.45;
  }
  .aios-do-h { display: block; overflow: hidden; min-height: 26px; padding-top: 3px; margin-bottom: var(--s-2); font-size: 16px; line-height: 1.2; letter-spacing: -0.01em; }

  /* the control line */
  .aios-foot { margin-top: var(--s-4); }
  .aios-control {
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    border-color: var(--border-strong);
    background: rgb(var(--card-rgb) / .7);
    font-size: 15px;
  }
}

/* ==== 07-team.css ==== */
/* 07-team.css: "Meet your AI team." Six role cards, each with its own small screen of the work it does
   (the page's sample-screen look: dark panel, dot grid, mono labels, coral for what the agent just did).
   One card per agent: name, screen beside the job, then the seat's pay with the figure printed whole.
   Finished state is the markup. Start states live only under html.js:not(.reduced), keyed to .team-card
   (it carries data-reveal), and each screen plays toward its finished frame when its card arrives. No loops. */

/* ---------- the roster: six cards ---------- */
.team-roster {
  position: relative;
  z-index: var(--z-base);
  display: grid;
  gap: 12px;
  margin-top: var(--s-6);
}
.team-card {
  position: relative;
  padding: 14px 14px 13px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--card-2), var(--card));
  box-shadow: var(--shadow-card);
}
.team-name {
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text);
}
.team-mid {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
  margin-top: 10px;
}
.team-job {
  font-size: 14px;
  line-height: 1.43;
  color: var(--text-mid);
}

/* the seat's pay: a quiet line under a dashed rule, the figure loud and whole */
.team-pay {
  margin-top: 11px;
  padding-top: 9px;
  border-top: 1px dashed var(--border-strong);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
}
.team-wage {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: var(--w-bold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  color: var(--text);
  white-space: nowrap;
}

/* ---------- the small screen each agent works in ---------- */
.team-pic {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 104px;
  padding: 6px 8px 8px;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background:
    var(--dot-grid) 0 0 / 12px 12px,
    radial-gradient(120% 80% at 100% 0%, rgb(var(--accent-rgb) / .1), transparent 62%),
    linear-gradient(180deg, var(--card-2), var(--bg-soft));
  box-shadow: inset 0 1px 0 rgb(var(--text-rgb) / .05);
  font-size: 12px;
  line-height: 1.25;
  color: var(--text-mid);
}
.tp-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgb(var(--text-rgb) / .07);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--w-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.tp-live {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px rgb(var(--accent-rgb) / .8);
}
.tp-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding-top: 7px;
}
.tp-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  padding: 2px 6px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  background: var(--card);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--w-bold);
  line-height: 1.2;
  color: var(--text-muted);
  white-space: nowrap;
}
.tp-chip--on { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-3); }

/* Executive Assistant: the inbox, sorted, the first reply drafted */
.tp-mail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}
.tp-from {
  min-width: 0;
  font-weight: var(--w-semi);
  color: var(--text);
  white-space: nowrap;
}
.tp-mail--low .tp-from { color: var(--text-muted); }

/* Content Agent: three posts from the week, fanned, waiting for your yes */
.tp-posts .tp-body { align-items: center; gap: 7px; }
.tp-fan {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 50px;
}
.tp-post {
  --r: 0deg;
  --y: 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 34px;
  height: 46px;
  margin: 0 -2px;
  padding: 6px 0 4px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--card-2);
  box-shadow: 0 6px 14px -6px rgb(var(--shadow-rgb) / .9);
  transform: translateY(var(--y)) rotate(var(--r));
}
.tp-post:nth-child(1) { --r: -9deg; --y: 3px; }
.tp-post:nth-child(2) { --y: -3px; position: relative; z-index: 1; border-color: var(--accent-line); }
.tp-post:nth-child(3) { --r: 9deg; --y: 3px; }
.tp-face {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--accent);
}
.tp-post b {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--w-bold);
  color: var(--text-mid);
}

/* Sales Wingman: a new lead, a drafted reply, the call-back as a task */
.tp-lead .tp-body { gap: 4px; }
.tp-msg {
  position: relative;
  max-width: 100%;
  padding: 3px 7px;
  border-radius: 9px;
  line-height: 1.25;
  white-space: nowrap;
}
.tp-msg--in {
  align-self: flex-start;
  border-bottom-left-radius: 3px;
  background: var(--border-strong);
  color: var(--text);
}
.tp-msg--out {
  align-self: flex-end;
  border: 1px solid var(--accent-line);
  border-bottom-right-radius: 3px;
  background: var(--accent-soft);
  color: var(--accent-3);
}
.tp-typing {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  opacity: 0;
}
.tp-typing i { width: 4px; height: 4px; border-radius: 50%; background: var(--accent-3); }
.tp-task {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-weight: var(--w-semi);
  color: var(--text);
}
.tp-box {
  position: relative;
  flex: none;
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--accent);
  border-radius: 3px;
}
.tp-box::after {
  content: "";
  position: absolute;
  inset: 1px;
  background: var(--accent);
  -webkit-mask: var(--icon-check) center / contain no-repeat;
  mask: var(--icon-check) center / contain no-repeat;
}

/* Operations Agent: a call turns into notes, decisions and to-dos */
.tp-call {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px 2px 6px;
  border-radius: var(--r-pill);
  background: var(--border-strong);
  font-weight: var(--w-semi);
  color: var(--text);
}
.tp-wave { display: inline-flex; align-items: center; gap: 2px; height: 12px; }
.tp-wave i { width: 2px; height: var(--h, 60%); border-radius: 1px; background: var(--accent); transform-origin: center; }
.tp-wave i:nth-child(1) { --h: 40%; }
.tp-wave i:nth-child(2) { --h: 100%; }
.tp-wave i:nth-child(3) { --h: 60%; }
.tp-wave i:nth-child(4) { --h: 85%; }
.tp-wave i:nth-child(5) { --h: 35%; }
.tp-out {
  position: relative;
  display: grid;
  gap: 3px;
  margin-left: 9px;
  padding-left: 10px;
}
.tp-out::before {
  content: "";
  position: absolute;
  left: 0;
  top: -4px;
  bottom: 7px;
  width: 1px;
  background: var(--border-strong);
  transform-origin: top;
}
.tp-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: var(--w-semi);
  color: var(--text);
  white-space: nowrap;
}
.tp-tick {
  flex: none;
  width: 10px;
  height: 10px;
  background: var(--accent);
  -webkit-mask: var(--icon-check) center / contain no-repeat;
  mask: var(--icon-check) center / contain no-repeat;
}

/* Marketing Agent: Monday's pipeline, one deal moved to won */
.tp-pipe .tp-body { gap: 6px; }
.tp-lanes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}
.tp-lane {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-height: 52px;
  padding: 4px 0 6px;
  border-radius: 6px;
  background: rgb(var(--text-rgb) / .045);
}
.tp-lane b {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--w-bold);
  color: var(--text-muted);
}
.tp-lane i { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); }
.tp-lane i.tp-gone { background: transparent; box-shadow: inset 0 0 0 1px var(--text-muted); opacity: .6; }
.tp-lane i.tp-moved { background: var(--accent); box-shadow: 0 0 8px rgb(var(--accent-rgb) / .8); }
.tp-movedtag { align-self: flex-end; }

/* Finance Agent: Friday's numbers, cash in drawn, money owed flagged */
.tp-money .tp-body { gap: 4px; }
.tp-glabel {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--w-bold);
  color: var(--text-muted);
}
.tp-spark { display: block; width: 100%; height: 28px; overflow: visible; }
.tp-line { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tp-area { fill: rgb(var(--accent-rgb) / .14); stroke: none; }
.tp-flags { display: flex; justify-content: flex-end; }
.tp-owed::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

/* ---------- the screens come alive as each card arrives (never under reduced motion) ---------- */
html.js:not(.reduced) .team-card .tp-mail,
html.js:not(.reduced) .team-card .tp-msg,
html.js:not(.reduced) .team-card .tp-task,
html.js:not(.reduced) .team-card .tp-call,
html.js:not(.reduced) .team-card .tp-item,
html.js:not(.reduced) .team-card .tp-movedtag,
html.js:not(.reduced) .team-card .tp-approve,
html.js:not(.reduced) .team-card .tp-flags,
html.js:not(.reduced) .team-card .tp-area,
html.js:not(.reduced) .team-card .tp-gone {
  transition: opacity .45s var(--ease-out) var(--d, 0s), transform .55s var(--ease-out) var(--d, 0s);
}
html.js:not(.reduced) .team-card .tp-mail .tp-chip { transition: clip-path .5s var(--ease-out) var(--dc, 0s), opacity .3s var(--ease-out) var(--dc, 0s); }
html.js:not(.reduced) .team-card .tp-post { transition: transform .6s var(--ease-out) var(--d, 0s), opacity .4s var(--ease-out) var(--d, 0s); }
html.js:not(.reduced) .team-card .tp-reply { transition: opacity .3s var(--ease-out) 1.35s; }
html.js:not(.reduced) .team-card .tp-typing { transition: opacity .2s var(--ease-out) 1.3s; }
html.js:not(.reduced) .team-card .tp-box::after { transition: transform .35s var(--ease-out) 1.95s; }
html.js:not(.reduced) .team-card .tp-tick { transition: transform .35s var(--ease-out) var(--dt, 0s); }
html.js:not(.reduced) .team-card .tp-out::before { transition: transform .5s var(--ease-out) .6s; }
html.js:not(.reduced) .team-card .tp-line { stroke-dasharray: 1; transition: stroke-dashoffset 1s var(--ease-out) .35s; }

/* timing, card by card */
.tp-mail:nth-child(1) { --d: .25s; --dc: .95s; }
.tp-mail:nth-child(2) { --d: .38s; --dc: 1.25s; }
.tp-mail:nth-child(3) { --d: .51s; --dc: 1.4s; }
.tp-post:nth-child(1) { --d: .3s; }
.tp-post:nth-child(2) { --d: .48s; }
.tp-post:nth-child(3) { --d: .66s; }
.tp-approve { --d: 1.15s; }
.tp-msg--in { --d: .25s; }
.tp-msg--out { --d: .7s; }
.tp-task { --d: 1.65s; }
.tp-call { --d: .25s; }
.tp-item:nth-child(1) { --d: .85s; }
.tp-item:nth-child(2) { --d: 1.1s; }
.tp-item:nth-child(3) { --d: 1.35s; }
.tp-item:nth-child(1) .tp-tick { --dt: 1s; }
.tp-item:nth-child(2) .tp-tick { --dt: 1.25s; }
.tp-item:nth-child(3) .tp-tick { --dt: 1.5s; }
.tp-gone { --d: .9s; }
.tp-movedtag { --d: 1.55s; }
.tp-area { --d: .9s; }
.tp-flags { --d: 1.3s; }

/* start states: the card has not arrived yet */
html.js:not(.reduced) .team-card:not(.is-in) .tp-mail,
html.js:not(.reduced) .team-card:not(.is-in) .tp-msg,
html.js:not(.reduced) .team-card:not(.is-in) .tp-task,
html.js:not(.reduced) .team-card:not(.is-in) .tp-call { opacity: 0; transform: translateY(6px); }
html.js:not(.reduced) .team-card:not(.is-in) .tp-item { opacity: 0; transform: translateX(-6px); }
html.js:not(.reduced) .team-card:not(.is-in) .tp-mail .tp-chip { clip-path: inset(0 100% 0 0 round 99px); opacity: .4; }
html.js:not(.reduced) .team-card:not(.is-in) .tp-post { opacity: 0; transform: translateY(16px) rotate(0deg) scale(.92); }
html.js:not(.reduced) .team-card:not(.is-in) .tp-approve,
html.js:not(.reduced) .team-card:not(.is-in) .tp-movedtag,
html.js:not(.reduced) .team-card:not(.is-in) .tp-flags { opacity: 0; transform: scale(.9); }
html.js:not(.reduced) .team-card:not(.is-in) .tp-reply { opacity: 0; }
html.js:not(.reduced) .team-card:not(.is-in) .tp-typing { opacity: 1; }
html.js:not(.reduced) .team-card:not(.is-in) .tp-box::after,
html.js:not(.reduced) .team-card:not(.is-in) .tp-tick { transform: scale(0); }
html.js:not(.reduced) .team-card:not(.is-in) .tp-out::before { transform: scaleY(0); }
html.js:not(.reduced) .team-card:not(.is-in) .tp-line { stroke-dashoffset: 1; }
html.js:not(.reduced) .team-card:not(.is-in) .tp-area,
html.js:not(.reduced) .team-card:not(.is-in) .tp-gone { opacity: 0; }

/* the reply is typed: three dots blink three times while it is drafted, then the words land (finite, not a loop) */
html.js:not(.reduced) .team-card.is-in:not(.is-instant) .tp-typing i { animation: team-dot .45s var(--ease-inout) 3 both; }
html.js:not(.reduced) .team-card.is-in:not(.is-instant) .tp-typing i:nth-child(2) { animation-delay: .1s; }
html.js:not(.reduced) .team-card.is-in:not(.is-instant) .tp-typing i:nth-child(3) { animation-delay: .2s; }
@keyframes team-dot { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
/* the call is live for a moment: its wave moves, then rests */
html.js:not(.reduced) .team-card.is-in:not(.is-instant) .tp-wave i { animation: team-wave .5s var(--ease-inout) 3 both; }
html.js:not(.reduced) .team-card.is-in:not(.is-instant) .tp-wave i:nth-child(even) { animation-delay: .12s; }
@keyframes team-wave { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.45); } }

/* a card the core reveals instantly (scrolled past) lands with no transition on its parts either */
html.js:not(.reduced) .team-card.is-instant *,
html.js:not(.reduced) .team-card.is-instant *::before,
html.js:not(.reduced) .team-card.is-instant *::after { transition: none !important; }

/* ---------- under the cards: the caveat and the wage source ---------- */
.team-notes {
  position: relative;
  z-index: var(--z-base);
  margin-top: var(--s-4);
}
/* how pricing works: story size, full text colour, a coral rule at its left so it reads as an answer */
.team-price {
  margin-top: var(--s-3);
  padding-left: var(--s-3);
  border-left: 2px solid var(--accent);
  font-size: var(--fs-body);
  font-weight: var(--w-semi);
  line-height: 1.45;
  color: var(--text);
  max-width: 52ch;
  text-wrap: pretty;
}
.team-grow {
  margin-top: var(--s-4);
  font-size: 34px;
  font-weight: var(--w-head);
  line-height: 1.12;
  letter-spacing: var(--track-h2);
  color: var(--text);
  text-wrap: balance;
}
.team-src {
  margin-top: var(--s-3);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 68ch;
}

/* ---------- the payoff: what the team takes off your plate ---------- */
.team-payoff {
  position: relative;
  z-index: var(--z-base);
  margin-top: var(--s-5);
  font-size: 24px;
  font-weight: var(--w-head);
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--text);
  text-wrap: balance;
  max-width: 24ch;
}

/* ---------- the fold: the Fed stat, behind one tap on phones (the shared .fold in 02-components.css) ---------- */
.team-fold {
  position: relative;
  z-index: var(--z-base);
  margin-top: var(--s-4);
}
.team-fold .team-stat { padding: 18px var(--s-4) var(--s-4); }
.team-stat-intro {
  font-size: 15px;
  line-height: var(--lh-snug);
  color: var(--text-mid);
}
.team-stat-pair {
  display: grid;
  gap: var(--s-3);
  margin-top: var(--s-3);
}
.team-stat-cell {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  column-gap: var(--s-3);
  align-items: start;
}
.team-stat-cell .stat-num { font-size: 36px; }
.team-stat-cell .stat-label { margin-top: 0; font-size: 15px; line-height: 1.45; }
.team-stat-cell + .team-stat-cell {
  padding-top: var(--s-3);
  border-top: 1px dashed var(--border-strong);
}
.team-stat .stat-src { margin-top: var(--s-3); font-size: 12px; line-height: 1.5; }

/* ---------- button (desktop and tablet only: on phones the bottom bar carries it here) ---------- */
.team-cta {
  position: relative;
  z-index: var(--z-base);
  margin-top: var(--s-6);
}

/* ---------- phones: one source of truth for the phone rhythm ---------- */
@media (max-width: 767px) {
  /* phone rhythm: the section padding is the shared --sec-pad (32px on phones, 00-tokens.css) */
  .team-head .lead { font-size: 16.5px; }
  .team-head + .team-roster { margin-top: 16px; }
  .team-roster { gap: 6px; }
  .team-card { padding: 10px 12px 8px; }
  .team-mid { margin-top: 8px; }
  .team-pay { margin-top: 9px; padding-top: 7px; line-height: 1.45; }
  .team-pic { min-height: 100px; padding: 5px 7px 7px; }
  .tp-bar { padding-bottom: 4px; }
  .tp-body { padding-top: 5px; gap: 4px; }
  .tp-lead .tp-body { gap: 3px; }
  .tp-fan { height: 46px; }
  .tp-post { height: 42px; padding-top: 5px; }
  .tp-lane { min-height: 46px; padding: 3px 0 5px; gap: 3px; }
  .tp-spark { height: 24px; }
  .team-notes { margin-top: 12px; }
  .team-price { margin-top: 8px; font-size: 15px; line-height: 1.4; }
  .team-payoff { font-size: 22px; margin-top: var(--s-3); }
  .team-fold { margin-top: var(--s-3); }
  .team-eyebrow,
  .team-grow,
  .team-cta { display: none; }
}
@media (max-width: 374px) {
  .team-mid { grid-template-columns: 116px minmax(0, 1fr); column-gap: 10px; }
  .team-card { padding-inline: 12px; }
}

/* ---------- tablet up: two cards a row, nothing folds ---------- */
@media (min-width: 768px) {
  .team-roster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-7); }
  .team-card { display: flex; flex-direction: column; padding: 20px 20px 18px; }
  .team-name { font-size: 21px; }
  .team-mid { grid-template-columns: 148px minmax(0, 1fr); column-gap: 16px; margin-top: 14px; }
  .team-pic { min-height: 118px; padding: 8px 10px 10px; }
  .team-job { font-size: 15px; line-height: var(--lh-snug); }
  .team-mid { flex: 1 0 auto; }
  .team-pay { margin-top: 16px; padding-top: 12px; font-size: 14px; }
  .team-wage { font-size: 20px; }
  .tp-post { width: 40px; height: 52px; }
  .tp-fan { height: 56px; }
  .team-notes { margin-top: var(--s-6); }
  .team-src { font-size: var(--fs-micro); }
  .team-payoff { font-size: var(--fs-h3); font-weight: var(--w-bold); line-height: var(--lh-snug); letter-spacing: -0.01em; max-width: 30ch; }

  /* the fold is open and invisible as a fold: its label never prints here (the shared .fold hides it) */
  .team-fold { margin-top: var(--s-6); }
  .team-fold .team-stat { padding: calc(var(--card-pad) + 3px) var(--card-pad) var(--card-pad); }
  .team-stat-intro { font-size: var(--fs-body); }
  .team-stat-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-6); margin-top: var(--s-3); }
  .team-stat-cell { display: block; }
  .team-stat-cell .stat-num { font-size: var(--fs-stat); }
  .team-stat-cell .stat-label { margin-top: var(--s-3); font-size: var(--fs-body); }
  .team-stat-cell + .team-stat-cell { padding-top: 0; border-top: 0; padding-left: var(--s-6); border-left: 1px dashed var(--border-strong); }
  .team-stat .stat-src { font-size: var(--fs-micro); }
}

/* ---------- desktop: heading with the payoff beside it, then the team three across ---------- */
@media (min-width: 1024px) {
  .team-layout {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas:
      "head payoff"
      "roster roster"
      "notes notes"
      "fold fold"
      "cta cta";
    column-gap: var(--s-8);
  }
  .team-head { grid-area: head; }
  .team-payoff { grid-area: payoff; align-self: end; justify-self: end; margin-top: 0; padding-bottom: 6px; font-size: 24px; font-weight: var(--w-head); line-height: 1.25; letter-spacing: -0.02em; max-width: 22ch; }
  .team-roster { grid-area: roster; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
  .team-card { padding: 22px 22px 20px; }
  /* three across, each screen gets the card's full width above the job it shows */
  .team-mid { display: flex; flex-direction: column; align-items: stretch; gap: 16px; margin-top: 16px; }
  .team-pic { min-height: 168px; padding: 10px 14px 14px; font-size: 13px; }
  .tp-bar { padding-bottom: 8px; }
  .tp-body { gap: 7px; padding-top: 10px; }
  .tp-chip { padding: 3px 8px; font-size: 12px; }
  .tp-mail + .tp-mail { padding-top: 7px; border-top: 1px solid rgb(var(--text-rgb) / .06); }
  .tp-fan { height: 72px; }
  .tp-post { width: 48px; height: 64px; margin: 0 -1px; padding: 9px 0 6px; }
  .tp-face { width: 16px; height: 16px; }
  .tp-msg { padding: 5px 10px; border-radius: 11px; }
  .tp-meeting .tp-body { flex-direction: row; align-items: center; justify-content: center; gap: 22px; }
  .tp-meeting .tp-call { align-self: center; }
  .tp-meeting .tp-out { margin-left: 0; padding-left: 16px; gap: 6px; }
  .tp-meeting .tp-out::before { top: 2px; bottom: 2px; }
  .tp-lane { min-height: 74px; gap: 6px; padding: 6px 0 8px; }
  .tp-lane i { width: 10px; height: 10px; }
  .tp-spark { height: 52px; }
  .team-notes {
    grid-area: notes;
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--s-8);
    align-items: end;
    margin-top: var(--s-7);
  }
  .team-small { grid-column: 1; }
  .team-price { grid-column: 1; font-size: var(--fs-lead); }
  .team-grow { grid-column: 1; }
  .team-src { grid-column: 2; grid-row: 1 / span 3; justify-self: end; margin-top: 0; }
  .team-fold { grid-area: fold; margin-top: var(--s-8); }
  .team-cta { grid-area: cta; justify-self: center; }
  .team-cta .cta { align-items: center; }
  .team-cta .cta-note, .team-cta .cta-talk { justify-content: center; align-self: center; }
  .team-fold .team-stat { padding: calc(var(--card-pad-lg) + 3px) var(--card-pad-lg) var(--card-pad-lg); }
}

/* ==== 08-who.css ==== */
/* 08-who.css — "You work with the people who build it."
   Head: the intro, then the section's argument (the muted claim, then the answer in white), then the Claude partner
   credential: the brand-kit badge mounted on a dark plate with the partner line as its caption.

   The map: Chase (the only portrait) -> one line -> the team card. Inside the card the four disciplines sit in one
   column and the line runs straight down through their icons, so the figure is a single path:
   Chase -> engineering -> consultants -> big-company lessons -> no handoff.
   Phones and 768-1023: the line drops from Chase into the card's top edge. 1024 and up: Chase left, the line runs
   across into icon one (the card sits lower so icon one is level with the middle of his photo), then down.
   08-js runs one white dot along that path; each icon answers as the dot reaches it. Finished state is the markup:
   with no script or reduced motion every line is drawn, every icon is lit, and there is no dot.

   Shared measures, set per width on .who-map: --ico (icon box), --team-px / --team-pt (card padding),
   --tile-py (tile padding top and bottom). Every line position is computed from these. */

.sec--who { overflow: clip; }
.who-glow {
  position: absolute;
  top: 18%;
  left: -30%;
  width: 120%;
  height: 520px;
  background: radial-gradient(closest-side, rgb(var(--accent-rgb) / .12), rgb(var(--deep-rgb) / .06) 55%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}
.sec--who .wrap { position: relative; z-index: var(--z-base); }

/* ---------------- head: the argument ---------------- */
.who-head .lead { text-wrap: pretty; }
.who-case {
  position: relative;
  margin-top: var(--s-5);
  padding-left: 18px;
}
.who-case::before {                                    /* a short coral rule, the section's one accent in the head */
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--accent), rgb(var(--accent-rgb) / .15));
}
.who-case-a {
  font-size: 19px;
  font-weight: var(--w-semi);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text-muted);
  text-wrap: balance;
}
.who-case-b {
  margin-top: var(--s-2);
  font-size: 22px;
  font-weight: var(--w-head);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text);
  text-wrap: pretty;
}
.who-case-key { color: var(--accent); }

/* ---------------- head: the credential ---------------- */
.who-cred {
  display: flex;
  align-items: center;
  gap: 14px;
  width: fit-content;
  max-width: 100%;
  margin-top: var(--s-5);
  padding: 8px 18px 8px 8px;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--card-2), var(--card));
  box-shadow: var(--shadow-card), 0 0 28px -12px rgb(var(--accent-rgb) / .45);
}
.who-badge-frame {                                     /* the badge sits in a mount: rounded corners, a hairline */
  flex: 0 0 auto;
  display: block;
  width: 156px;
  border-radius: 7px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgb(var(--text-rgb) / .14), 0 8px 18px -10px rgb(var(--shadow-rgb) / .9);
}
.who-badge { display: block; width: 100%; height: auto; }
.who-partner {
  max-width: 15ch;
  text-wrap: balance;
  font-size: 14px;
  font-weight: var(--w-semi);
  line-height: 1.35;
  color: var(--text-mid);
}

/* ---------------- the map: Chase, the line, the team ---------------- */
.who-map {
  --ico: 40px;
  --team-px: var(--card-pad);
  --team-pt: var(--s-2);
  --tile-py: var(--s-4);
  --wire-x: calc(1px + var(--team-px) + var(--ico) / 2);   /* the icons' centre line */
  position: relative;
  margin-top: var(--s-7);
}

/* Chase */
.who-chase {
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr);
  column-gap: 18px;
  row-gap: var(--s-4);
  align-items: center;
}
.who-photo-col { grid-column: 1; grid-row: 1; position: relative; }
.who-photo {
  position: relative;
  border-radius: var(--r-lg);
  padding: 3px;
  background: var(--grad);
  box-shadow: 0 0 0 5px rgb(var(--accent-rgb) / .1), 0 24px 50px -20px rgb(var(--accent-rgb) / .55);
}
.who-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: calc(var(--r-lg) - 3px);
  background: var(--card);
}
.who-drop { display: none; }                 /* the phone line; drawn under 768 only */
.who-story { grid-column: 2; grid-row: 1; min-width: 0; }
.who-id { margin-bottom: var(--s-3); }
.who-name {
  display: block;
  font-size: 18px;
  font-weight: var(--w-bold);
  line-height: 1.25;
  color: var(--text);
}
.who-role {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-micro);
  line-height: 1.4;
  color: var(--text-muted);
}
/* His headline pair: the muted line, then the emphasised line, each on its own line. */
.who-story-a {
  font-size: 24px;
  font-weight: var(--w-head);
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--text-muted);
}
.who-turn {
  display: block;
  margin-top: 2px;
  color: var(--text);
}
/* The proof: the line a founder skimming the section stops on; the two figures carry the coral and print whole. */
.who-proof {
  margin-top: var(--s-4);
  font-size: 30px;
  font-weight: var(--w-head);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--text);
  text-wrap: balance;
}
.who-num {
  white-space: nowrap;
  background: var(--grad-text-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.who-story-b {
  margin-top: var(--s-4);
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
  color: var(--text-mid);
  max-width: 34ch;
}

/* The line from Chase to the card (768 and up) */
.who-link {
  position: relative;
  height: 72px;
  margin-top: 2px;
}
.who-wire {
  position: absolute;
  top: 0;
  bottom: 6px;
  left: calc(var(--wire-x) - 1px);
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 100%);
  box-shadow: 0 0 12px rgb(var(--accent-rgb) / .55);
  transform-origin: center top;
  transition: transform var(--dur-line) var(--ease-inout);
}
/* The section's markers: the page's marker (00-tokens.css), one size (--who-mk), where the line leaves Chase and where it
   lands on the card's edge. */
.sec--who { --who-mk: 12px; }
.who-node {
  position: absolute; border-radius: 50%;
  width: var(--who-mk); height: var(--who-mk);
  color: var(--mk-on); border: var(--mk-ring) solid currentColor; background: var(--mk-fill) var(--bg);
  box-shadow: 0 0 0 3px var(--bg);
}
.who-node--a {                                           /* where the line starts */
  top: calc(var(--who-mk) / -2);
  left: calc(var(--wire-x) - var(--who-mk) / 2);
  z-index: var(--z-raised);
}
.who-node--b {                                           /* lands on the card's edge */
  left: calc(var(--wire-x) - var(--who-mk) / 2);
  bottom: calc(var(--who-mk) / -2);
  z-index: var(--z-raised);
  transition: transform .4s var(--ease-land) calc(var(--dur-line) - .05s), opacity .2s linear calc(var(--dur-line) - .05s);
}
html.js:not(.reduced) .who-link:not(.is-in) .who-wire { transform: scaleY(0); }
html.js:not(.reduced) .who-link:not(.is-in) .who-node--b { transform: scale(0); opacity: 0; }

/* The team card: the shared .card .card--big look; this only sets its padding */
.who-team { padding: var(--team-pt) var(--team-px) var(--team-px); }

/* The four disciplines: one column, icon left, words right. No gap between tiles, so each tile's line piece
   (from its icon centre, one tile tall) lands exactly on the next icon's centre. */
.who-tiles { display: grid; }
.who-tile {
  position: relative;
  display: grid;
  grid-template-columns: var(--ico) minmax(0, 1fr);
  column-gap: var(--s-4);
  align-items: start;
  padding-block: var(--tile-py);
}
.who-tile:not(:last-child)::before,                    /* this icon down to the next */
.who-tile:first-child::after {                         /* into icon one from the card's edge */
  content: "";
  position: absolute;
  border-radius: 2px;
  box-shadow: 0 0 8px rgb(var(--accent-rgb) / .4);
}
.who-tile:not(:last-child)::before {
  left: calc(var(--ico) / 2 - 1px);
  top: calc(var(--tile-py) + var(--ico) / 2);
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  transform-origin: center top;
  transition: transform .3s linear calc(var(--d, 0s) + .05s);
}
.who-tile:first-child::after {                         /* under 1024: down from the card's top edge */
  left: calc(var(--ico) / 2 - 1px);
  top: calc(-1 * (var(--team-pt) + 1px));
  width: 2px;
  height: calc(var(--team-pt) + 1px + var(--tile-py));
  background: var(--accent);
  transform-origin: center top;
  transition: transform .2s linear calc(var(--d, 0s) - .25s);
}
html.js:not(.reduced) .who-tile:not(.is-in)::before,
html.js:not(.reduced) .who-tile:first-child:not(.is-in)::after { transform: scaleY(0); }

.who-ico {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--ico);
  height: var(--ico);
  border-radius: var(--r-sm);
  border: 1px solid var(--accent-line);
  background-color: var(--card-2);
  background-image: linear-gradient(var(--accent-soft), var(--accent-soft));
  color: var(--accent);
  box-shadow: 0 0 18px -4px rgb(var(--accent-rgb) / .55);
  transition: color .35s var(--ease-out) calc(var(--d, 0s) + .2s), border-color .35s var(--ease-out) calc(var(--d, 0s) + .2s), background-color .35s var(--ease-out) calc(var(--d, 0s) + .2s), box-shadow .35s var(--ease-out) calc(var(--d, 0s) + .2s);
}
.who-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: color .25s var(--ease-out); }
html.js:not(.reduced) .who-tile:not(.is-in) .who-ico { color: var(--text-dim); border-color: var(--border); background-image: none; box-shadow: none; }
/* The answer: as the dot arrives the icon's mark turns white and a ring pings out of it once. */
.who-ico::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 2px solid var(--accent);
  opacity: 0;
  pointer-events: none;
}
html.js:not(.reduced) .who-tile.is-hit .who-ico svg { color: var(--text); }
html.js:not(.reduced) .who-tile.is-hit .who-ico::after { animation: who-ping .7s var(--ease-out) both; }
@keyframes who-ping { 0% { opacity: .95; transform: scale(1); } 100% { opacity: 0; transform: scale(1.55); } }

.who-tile-t h3 {
  font-size: 18px;
  line-height: var(--lh-h3);
  letter-spacing: var(--track-h3);
  color: var(--text);
  transition: color .25s var(--ease-out);
}
.who-tile-t p {
  margin-top: 4px;
  font-size: var(--fs-body);
  line-height: var(--lh-snug);
  color: var(--text-mid);
}

/* The dot: one white point that travels the whole line. Only 08-who.js shows it (never without script or under
   reduced motion); it is positioned by transform from the map's top left. */
.who-dot {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: var(--tdot);                 /* the page's travelling dot: the same as 05's and 09's */
  height: var(--tdot);
  margin: calc(var(--tdot) / -2) 0 0 calc(var(--tdot) / -2);
  border-radius: 50%;
  background: var(--text);
  box-shadow: var(--tdot-glow);
  opacity: 0;
  transition: none;                   /* it goes out at once, so it never sits over an icon while fading */
  pointer-events: none;
  will-change: transform, opacity;
}
.who-dot.is-on { opacity: 1; transition: opacity .2s var(--ease-out); }   /* and fades back in, clear of the icon */
html.js:not(.reduced) .who-map.is-dotting .who-dot { display: block; }

/* ---------------- the people: the six of us, three across in two rows at every width ----------------
   One face size per width (--face), the same for all six. Three photos are 240px, so --face stays at or under
   120px (sharp at 2x); the rest are larger files scaled down. */
.who-people {
  --face: 60px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--s-4);
  row-gap: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--border);
}
.card > .who-people { margin-top: var(--s-3); }
.who-person {
  display: grid;
  justify-items: center;
  align-content: start;
  row-gap: 10px;
  text-align: center;
  min-width: 0;
}
.who-face { width: var(--face); height: var(--face); }
.who-person-t { min-width: 0; }
.who-person-name {
  display: block;
  font-size: var(--fs-body);
  font-weight: var(--w-bold);
  line-height: 1.3;
  color: var(--text);
}
.who-person-role {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-micro);
  line-height: 1.35;
  color: var(--text-muted);
  text-wrap: balance;
}

/* ---------------- quotes ---------------- */
.who-quotes {
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-8);
}
.who-quote { display: flex; flex-direction: column; }
.who-quote.quote { padding-top: var(--card-pad); }
.who-quote.quote::before { content: none; }           /* the marks print as literal characters instead */
.who-quote blockquote { padding-left: .6em; margin-bottom: var(--s-4); }
.who-quote blockquote p {
  font-size: 17px;
  line-height: 1.5;
}
.who-qm { color: var(--accent); font-weight: var(--w-head); }
.who-quote blockquote p > .who-qm:first-child { margin-left: -.6em; display: inline-block; width: .6em; }
.who-by { position: relative; padding-top: var(--s-4); margin-top: auto; }
.who-by::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-h);
  transform-origin: left center;
  transition: transform .5s var(--ease-out) calc(var(--d, 0s) + .35s);
}
html.js:not(.reduced) .who-quote:not(.is-in) .who-by::before { transform: scaleX(0); }
.who-by .quote-name { display: inline; }
.who-note { margin-top: var(--s-4); }

/* ================= phones (under 768): Chase beside his story, one straight line down through the team ================= */
@media (max-width: 767px) {
  .who-head .eyebrow { display: none; }                 /* 08-who-001 is desktop only */
  .who-head .lead { font-size: 16.5px; }
  .who-case { margin-top: var(--s-4); padding-left: 14px; }
  .who-case-a { font-size: 17px; }
  .who-case-b { margin-top: 6px; font-size: 20px; line-height: 1.2; }
  .who-cred { margin-top: var(--s-4); gap: 12px; padding: 7px 14px 7px 7px; }
  .who-badge-frame { width: 148px; border-radius: 6px; }
  .who-partner { font-size: 13px; text-wrap: balance; }

  .who-map {
    --team-px: 20px;
    --team-pt: 6px;
    --ico: 32px;
    --tile-py: 10px;
    --photo-w: calc(var(--wire-x) * 2);                /* so the line leaves the photo's centre straight down the icons */
    --link-gap: 20px;                                  /* the open stretch of line between Chase and the card */
    margin-top: 18px;
  }

  /* Chase */
  .who-chase { grid-template-columns: var(--photo-w) minmax(0, 1fr); column-gap: 14px; align-items: start; }
  .who-photo-col { align-self: stretch; display: flex; flex-direction: column; align-items: center; }
  .who-photo {
    width: var(--photo-w);
    padding: 2px;
    border-radius: 16px;
    background: var(--border-strong);
    box-shadow: 0 18px 36px -18px rgb(var(--shadow-rgb) / .9);
  }
  .who-photo img { border-radius: 14px; }
  .who-story { display: block; grid-column: 2; grid-row: 1; }
  .who-id { margin-bottom: 6px; }
  .who-name { font-size: 16px; }
  .who-role { margin-top: 1px; font-size: 12px; line-height: 1.35; }
  .who-story-a { font-size: 21px; line-height: 1.12; }
  .who-proof { margin-top: 8px; font-size: 23px; line-height: 1.1; }
  .who-num { background: none; color: var(--accent); }   /* calm coral: solid, no gradient */
  .who-story-b { margin-top: var(--s-2); font-size: 15px; line-height: 1.45; max-width: none; }

  /* the line: from under the photo, down to the card's top edge */
  .who-drop {
    display: block;
    position: relative;
    flex: 1 0 auto;
    width: 2px;
    min-height: 16px;
    margin-bottom: calc(-1 * var(--link-gap));
    border-radius: 2px;
    background: linear-gradient(180deg, var(--accent-2), var(--accent));
    box-shadow: 0 0 10px rgb(var(--accent-rgb) / .5);
    transform-origin: center top;
    transition: transform .5s var(--ease-inout) .35s;
  }
  .who-drop::before {                                  /* where it leaves the photo: the section's marker */
    content: "";
    position: absolute;
    top: calc(var(--who-mk) / -2);
    left: calc(1px - var(--who-mk) / 2);
    width: var(--who-mk);
    height: var(--who-mk);
    border-radius: 50%;
    color: var(--mk-on);
    border: var(--mk-ring) solid currentColor;
    background: var(--mk-fill) var(--bg);
  }
  html.js:not(.reduced) .who-chase:not(.is-in) .who-drop { transform: scaleY(0); }

  .who-link { display: none; }

  .who-team { margin-top: var(--link-gap); }
  .who-tile { column-gap: 14px; }
  .who-ico { border-radius: 9px; box-shadow: none; }
  .who-ico svg { width: 18px; height: 18px; }
  .who-tile-t { padding-top: 6px; }
  .who-tile-t h3 { font-size: 15.5px; line-height: 1.25; }
  .who-tile-t p { margin-top: 3px; font-size: 14px; line-height: 1.38; }

  /* the people: three across, face above name and title. The roster reaches 10px into the card's side padding and the
     columns sit 4px apart, so every name holds one line from 380 up ("Taylor Bremner" is the longest). */
  .who-people { column-gap: 4px; padding-top: 16px; }
  .card > .who-people { margin: 8px -10px 0; padding-inline: 0; }
  .who-person { row-gap: 8px; }
  .who-person-name { font-size: 14px; font-weight: var(--w-semi); letter-spacing: -0.01em; white-space: nowrap; }
  .who-person-role { font-size: 12px; }

  /* quotes */
  .who-quotes { margin-top: 14px; gap: 12px; }
  .who-quote.quote { padding: 15px 16px 13px; }
  .who-quote blockquote { margin-bottom: var(--s-3); }
  .who-quote blockquote p { font-size: 15px; line-height: 1.42; }
  .who-qm { color: var(--text-muted); }
  .who-by { padding-top: 8px; }
  .who-note { margin-top: var(--s-3); }
}

@media (max-width: 379px) {                             /* the narrowest phones: a long name may take two lines */
  .who-person-name { white-space: normal; text-wrap: balance; }
}

/* ---------------- 768+ ---------------- */
@media (min-width: 768px) {
  .who-case-a { font-size: 22px; }
  .who-case-b { font-size: 30px; line-height: 1.15; max-width: 26ch; }
  .who-badge-frame { width: 188px; }
  .who-partner { font-size: 15px; }
  .who-chase { grid-template-columns: 168px minmax(0, 1fr); column-gap: var(--s-6); }
  .who-story-a { font-size: 30px; }
  .who-proof { font-size: 34px; }
  .who-quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
  .who-note { text-align: left; }
}

/* ---------------- 1024+: Chase left, the line across into icon one, the team right ---------------- */
@media (min-width: 1024px) {
  .who-map {
    --photo-w: 240px;
    --photo-h: 300px;
    --chase-w: 380px;
    --team-px: var(--card-pad-lg);
    --team-pt: var(--s-3);
    --tile-py: 22px;
    --wire-y: calc(var(--photo-h) / 2 + 4px);         /* the middle of his photo, from the map's top */
    display: grid;
    grid-template-columns: var(--chase-w) minmax(72px, 1fr) minmax(0, 680px);
    align-items: start;
    margin-top: var(--s-8);
  }
  .who-chase { grid-template-columns: 1fr; row-gap: var(--s-4); align-items: start; }
  .who-photo { width: var(--photo-w); }
  .who-story { grid-column: 1; grid-row: 2; }
  .who-story-a { margin-top: var(--s-3); font-size: 32px; }
  .who-proof { font-size: 40px; }
  /* the card sits lower, so icon one is level with the middle of Chase's photo and the line runs straight in */
  .who-team { margin-top: calc(var(--wire-y) - (1px + var(--team-pt) + var(--tile-py) + var(--ico) / 2)); }
  .who-link { height: auto; align-self: stretch; margin: 0; }
  .who-wire {
    top: calc(var(--wire-y) - 1px);
    bottom: auto;
    left: calc(var(--photo-w) - var(--chase-w) + 10px);
    right: 0;
    width: auto;
    height: 2px;
    background: var(--grad-h);
    transform-origin: left center;
  }
  html.js:not(.reduced) .who-link:not(.is-in) .who-wire { transform: scaleX(0); }
  .who-node--a {
    top: calc(var(--wire-y) - var(--who-mk) / 2);
    left: calc(var(--photo-w) - var(--chase-w) + 4px);
  }
  .who-node--b { top: calc(var(--wire-y) - var(--who-mk) / 2); bottom: auto; left: auto; right: calc(var(--who-mk) / -2); }
  /* into icon one from the card's left edge */
  .who-tile:first-child::after {
    left: calc(-1 * (var(--team-px) + 1px));
    top: calc(var(--tile-py) + var(--ico) / 2 - 1px);
    width: calc(var(--team-px) + 1px);
    height: 2px;
    background: var(--accent);
    transform-origin: left center;
  }
  html.js:not(.reduced) .who-tile:first-child:not(.is-in)::after { transform: scaleX(0); }
  .who-tile { column-gap: var(--s-5); }
  .who-tile-t { padding-top: 7px; }
  .who-tile-t h3 { font-size: var(--fs-h3); }
  .who-tile-t p { margin-top: 6px; }
  .who-people { column-gap: var(--s-5); padding-top: var(--s-6); }
  .card > .who-people { margin-top: var(--s-3); }
  .who-quotes { margin-top: var(--s-9); }
  .who-quote blockquote p { font-size: var(--fs-lead); }
}
@media (min-width: 768px) {
  .who-people { --face: 88px; }
}

/* ==== 09-inside.css ==== */
/* ================= 09 What's inside: the nested offer =================
   From 768 up: real nested frames, outside to inside.
   Under 768: the same markup draws one card (the OS) with a path down its left edge. Each stop on the path
   is one thing you get, in order. Every stop wears the same marker (a ring with a dot in it, the page's marker);
   the Circle's is coral because the path ends in that card, the one glowing card. One fill runs down the path with
   the scroll and lights each marker as it reaches it (09-inside.js). Two border levels at most. See the phone block at the end of this file. */

.inside-grid { display: grid; gap: var(--s-6); position: relative; z-index: var(--z-base); }
.sec-head + .inside-grid { margin-top: var(--s-6); }

/* ---- The nest: real nested frames. Each frame's outline layer (::before) carries its look,
        so it can close in from its parent's edge without moving the words inside. ---- */
.inside-nest { --nest-pad: 10px; position: relative; }
.inside-nest::after { /* soft glow under the core of the nest */
  content: ""; position: absolute; inset: 30% 10% 0; z-index: -1; pointer-events: none;
  background: var(--glow-center); opacity: .7;
}
.inside-frame {
  --edge: rgb(var(--accent-rgb) / .16);
  --fill: rgb(var(--card-rgb) / .55);
  position: relative;
  isolation: isolate;
  padding: var(--s-3) var(--nest-pad) var(--nest-pad);
  border-radius: calc(var(--r-lg) - var(--lvl, 0) * 2px);
}
.inside-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  border: 1px solid var(--edge);
  background: var(--fill);
  transition:
    inset var(--dur-line) var(--ease-out) var(--fd, 0s),
    opacity var(--dur-reveal) var(--ease-out) var(--fd, 0s),
    border-color 1.2s var(--ease-out) calc(var(--fd, 0s) + .2s),
    box-shadow 1.2s var(--ease-out) calc(var(--fd, 0s) + .2s);
}
.inside-frame + .inside-frame,
.inside-tiles + .inside-frame,
.inside-label + .inside-frame { margin-top: var(--s-3); }

.inside-f1 { --lvl: 0; --edge: var(--border-strong); --fill: linear-gradient(180deg, var(--card-2), var(--card)); }
.inside-f1::before { box-shadow: var(--shadow-card); }
.inside-f2 { --lvl: 1; --edge: rgb(var(--accent-rgb) / .2);  --fill: rgb(var(--accent-rgb) / .025); }
.inside-f3 { --lvl: 2; --edge: rgb(var(--accent-rgb) / .3);  --fill: rgb(var(--accent-rgb) / .04); }
.inside-f4 { --lvl: 3; --edge: rgb(var(--accent-rgb) / .42); --fill: rgb(var(--accent-rgb) / .06); }
/* The core is "the good one": it wears the shared .card--glow look as it is (border, fill, glow).
   Only its padding is set here, so it sits in the nest like the other frames. */
.inside-frame.inside-f5 { --lvl: 4; padding: var(--s-3) var(--nest-pad) var(--nest-pad); }
.inside-f5::before { content: none; }

/* Frame label: mono, small, a pip that warms toward the core */
.inside-label {
  display: flex; align-items: center; gap: var(--s-2);
  min-height: 24px;
  font-family: var(--font-mono);
  font-size: var(--fs-tag);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-tag);
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--text-mid);
  transition: opacity var(--dur-reveal) var(--ease-out) calc(var(--fd, 0s) + .18s), transform var(--dur-reveal) var(--ease-out) calc(var(--fd, 0s) + .18s);
}
/* The marker: one design on every stop and every small diagram in this section. A ring with a dot in it.
   The Circle's is coral, because the offer ends in that card. */
.sec--inside { --in-mk: 14px; }   /* the section's one marker size */
.inside-pip {
  flex: none; width: var(--in-mk); height: var(--in-mk); border-radius: 50%;
  color: var(--mk-on); border: var(--mk-ring) solid currentColor; background: var(--mk-fill);
}
.inside-f1 > .inside-label { color: var(--text); font-size: var(--fs-micro); }
.inside-f4 > .inside-label { color: var(--accent); }
.inside-f5 > .inside-label { color: var(--accent-3); }
.inside-f5 > .inside-label .inside-pip { color: var(--mk-hot); box-shadow: var(--mk-hot-glow); }
.inside-rail { display: none; }

/* Tiles: what sits in each frame */
.inside-tiles { display: grid; gap: var(--s-2); margin-top: var(--s-2); }
.inside-tile {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--s-3); align-items: start;
  padding: 10px var(--s-3);
  border-radius: var(--r-sm);
  background: rgb(var(--bg-rgb) / .55);
  border: 1px solid var(--hairline);
  color: var(--text);
  font-size: var(--fs-small);
  font-weight: var(--w-mid);
  line-height: var(--lh-snug);
  transition: opacity var(--dur-reveal) var(--ease-out) var(--td, .3s), transform var(--dur-reveal) var(--ease-out) var(--td, .3s);
}
.inside-tile > span:last-child { padding-top: 1px; }
.inside-tick {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  position: relative;
}
.inside-tick::after {
  content: ""; position: absolute; inset: 4px;
  background: var(--accent);
  -webkit-mask: var(--icon-check) center / contain no-repeat;
  mask: var(--icon-check) center / contain no-repeat;
}
.inside-tile--core { background: rgb(var(--bg-rgb) / .7); border-color: var(--accent-line); font-weight: var(--w-semi); }
.inside-tile--core .inside-tick { background: var(--grad-btn); border-color: transparent; }
.inside-tile--core .inside-tick::after { background: var(--on-accent); }
.inside-tiles--circle .inside-tile--core { color: var(--text); font-size: var(--fs-body); font-weight: var(--w-bold); }
.inside-tiles--grid .inside-tile:nth-child(2) { --td: .38s; }
.inside-tiles--grid .inside-tile:nth-child(3) { --td: .46s; }
.inside-tiles--grid .inside-tile:nth-child(4) { --td: .54s; }

/* Motion: each frame closes in from its parent's edge when its top reaches the screen,
   then its label slides in and its tiles rise. Finished state is the markup. */
html.js:not(.reduced) .inside-frame:not(.is-in)::before { inset: calc(-1.6 * var(--nest-pad)); opacity: 0; border-color: var(--accent); }
html.js:not(.reduced) .inside-f1:not(.is-in)::before { inset: 0; }
html.js:not(.reduced) .inside-frame:not(.is-in) > .inside-label { opacity: 0; transform: translate3d(-10px, 0, 0); }
html.js:not(.reduced) .inside-frame:not(.is-in) > .inside-tiles > .inside-tile { opacity: 0; transform: translate3d(0, 12px, 0); }
/* the glowing core has no outline layer to close in, so it rises and settles instead */
.inside-frame.inside-f5 { transition: opacity var(--dur-reveal) var(--ease-out) var(--fd, 0s), transform var(--dur-reveal) var(--ease-out) var(--fd, 0s); }
html.js:not(.reduced) .inside-f5:not(.is-in) { opacity: 0; transform: translate3d(0, 10px, 0) scale(.98); }

/* ---- The Circle card ---- */
.inside-circle { display: flex; flex-direction: column; }
.inside-circle > * + * { margin-top: var(--s-5); }
.inside-circle > .inside-job { margin-top: var(--s-3); }
.inside-circle h3 { font-size: var(--fs-h3); }
.inside-job {
  color: var(--text);
  font-size: var(--fs-lead);
  font-weight: var(--w-bold);
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.inside-calls p, .inside-peers p, .inside-term p { color: var(--text-mid); font-size: var(--fs-body); line-height: var(--lh-body); }
.inside-calls, .inside-peers, .inside-term { display: grid; gap: var(--s-3); }

/* One month as a line: one mark per call, the last and brightest is the CEO call. Comes right after its sentence. */
.inside-month { position: relative; display: flex; justify-content: space-around; align-items: center; height: 16px; }
.inside-month::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; margin-top: -.5px;
  background: linear-gradient(90deg, transparent, var(--border-strong) 8%, var(--border-strong) 92%, transparent);
  transform-origin: left center; transition: transform var(--dur-line) var(--ease-out) .1s;
}
.inside-month i,
.inside-seats i {
  position: relative; flex: none; width: var(--in-mk); height: var(--in-mk); border-radius: 50%;
  color: var(--mk-off); border: var(--mk-ring) solid currentColor; background: var(--mk-fill) var(--card);
  transition: opacity .4s var(--ease-out) var(--mk-d, 0s), transform .4s var(--ease-out) var(--mk-d, 0s), color .4s var(--ease-out) var(--mk-d, 0s);
}
.inside-month i.is-ceo, .inside-seats i.is-you { color: var(--mk-on); }
/* one step for every small diagram: the marks pop in turn at --stagger, the lit one last */
.inside-month i:nth-child(2), .inside-seats i:nth-child(2) { --mk-d: calc(1 * var(--stagger)); }
.inside-month i:nth-child(3), .inside-seats i:nth-child(3) { --mk-d: calc(2 * var(--stagger)); }
.inside-month i:nth-child(4), .inside-seats i:nth-child(4) { --mk-d: calc(3 * var(--stagger)); }
.inside-seats i:nth-child(5) { --mk-d: calc(4 * var(--stagger)); }
.inside-seats i:nth-child(6) { --mk-d: calc(5 * var(--stagger)); }
.inside-seats i:nth-child(7) { --mk-d: calc(6 * var(--stagger)); }
.inside-seats i.is-you { --mk-d: calc(7 * var(--stagger)); }
html.js:not(.reduced) .inside-calls:not(.is-in) .inside-month::before { transform: scaleX(0); }
html.js:not(.reduced) .inside-calls:not(.is-in) .inside-month i { opacity: 0; transform: scale(.3); }
html.js:not(.reduced) .inside-calls:not(.is-in) .inside-month i.is-ceo { color: var(--mk-off); }

/* Seats on a call: you, filled, among other founders. Comes right after its sentence. */
.inside-seats { display: flex; gap: 6px; }
html.js:not(.reduced) .inside-peers:not(.is-in) .inside-seats i { opacity: 0; transform: scale(.3); }
html.js:not(.reduced) .inside-peers:not(.is-in) .inside-seats i.is-you { color: var(--mk-off); }

/* The Circle's terms: one plain note at body size, never fine print. */
.inside-term { padding: var(--s-4); border-radius: var(--r); border: 1px solid var(--border-strong); background: rgb(var(--bg-rgb) / .5); }
.inside-term p { color: var(--text); }

/* Bigger projects: one pointer line */
.inside-more { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--s-3); align-items: center; padding-top: var(--s-4); border-top: 1px solid var(--border); color: var(--text-mid); font-size: var(--fs-small); line-height: var(--lh-snug); }
.inside-more-icon { width: 22px; height: 22px; background: var(--text-muted); -webkit-mask: var(--icon-arrow) center / 18px no-repeat; mask: var(--icon-arrow) center / 18px no-repeat; }
.inside-book { position: relative; color: var(--text); font-weight: var(--w-semi); white-space: nowrap; }
.inside-book::after { content: ""; position: absolute; left: -6px; right: -6px; top: 50%; height: var(--tap); transform: translateY(-50%); }

/* ---- Opinion beside the stat ---- */
.inside-proof { display: grid; gap: var(--s-5); margin-top: var(--s-6); position: relative; z-index: var(--z-base); }
.inside-opinion { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--s-4); align-items: start; padding-left: var(--s-4); border-left: 3px solid var(--accent); }
.inside-opinion-text { color: var(--text); font-size: var(--fs-lead); font-weight: var(--w-semi); line-height: 1.4; letter-spacing: -0.01em; text-wrap: pretty; }
.inside-colon { color: var(--accent); margin-left: -.06em; font-size: .8em; }

/* The stat's fold is the page's shared fold (.fold in 02-components.css): open in the markup, closed by the core
   under 768 on boot. From 768 up it never folds, so its label (a phone-only line) does not print there. */

/* ---- Wider screens ---- */
@media (min-width: 768px) {
  .inside-nest { --nest-pad: 16px; }
  .inside-frame { padding-top: var(--s-4); }
  .inside-frame.inside-f5 { padding-top: var(--s-4); }
  .inside-tiles--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inside-tile { padding: var(--s-4); font-size: var(--fs-body); }
  .inside-proof { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--s-7); }
}
@media (min-width: 1024px) {
  .inside-nest { --nest-pad: 20px; }
  .inside-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-7); align-items: start; }
  .inside-label { font-size: var(--fs-micro); }
  /* When the whole nest arrives at once, the frames still close in one after another */
  .inside-f2 { --fd: .2s; } .inside-f3 { --fd: .4s; } .inside-f4 { --fd: .6s; } .inside-f5 { --fd: .8s; }
  .inside-f4 .inside-tile { --td: calc(.8s); }
  .inside-f4 .inside-tile:nth-child(2) { --td: .88s; }
  .inside-f4 .inside-tile:nth-child(3) { --td: .96s; }
  .inside-f4 .inside-tile:nth-child(4) { --td: 1.04s; }
  .inside-f5 .inside-tile { --td: 1.1s; }
  .inside-f5 .inside-tile:nth-child(2) { --td: 1.16s; }
  .inside-f5 .inside-tile:nth-child(3) { --td: 1.22s; }
  .inside-f5 .inside-tile:nth-child(4) { --td: 1.28s; }
  .inside-f5 .inside-tile:nth-child(5) { --td: 1.34s; }
  .inside-circle { position: sticky; top: var(--s-6); }
  .inside-proof { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); margin-top: var(--s-8); }
  .inside-opinion { grid-template-columns: 64px minmax(0, 1fr); padding-left: var(--s-5); }
  .inside-opinion .avatar { width: 64px; height: 64px; }
  .inside-opinion-text { font-size: clamp(24px, 2.2vw, 30px); line-height: 1.3; }
}

/* ================= Phones (under 768): one card, one path, one glowing end =================
   This block is the section's whole phone layout (it replaces last night's "phone rhythm" overrides).
   Geometry: --col is the path column; --rail is the path's centre inside it; --step is the space between stops. */
@media (max-width: 767px) {
  /* phone rhythm: the section padding is the shared --sec-pad (32px on phones, 00-tokens.css) */
  .sec--inside .sec-head .eyebrow { display: none; }           /* 09-inside-001 prints from 768 up only */
  .sec--inside .sec-head + .inside-grid { margin-top: 20px; }
  .inside-grid { gap: var(--s-3); }

  .inside-nest { --col: 36px; --rail: 11px; --step: 16px; --f5-out: 8px; }
  .inside-nest::after { inset: auto 6% -4% 30%; height: 40%; }

  /* level 1: the OS is one card */
  .inside-frame { padding: 0; border-radius: 0; }
  .inside-frame::before { content: none; }
  .inside-f1 {
    padding: 12px 16px 14px 14px;
    border-radius: var(--r-lg);
    border: 1px solid var(--border-strong);
    background: linear-gradient(180deg, var(--card-2), var(--card));
    box-shadow: var(--shadow-card);
  }
  .inside-f2 { padding-left: var(--col); }
  .inside-frame + .inside-frame,
  .inside-tiles + .inside-frame,
  .inside-label + .inside-frame { margin-top: var(--step); }

  /* each stop's name is the thing you get: readable, white, in order */
  .inside-label {
    position: relative; display: block; min-height: 22px;
    font-family: var(--font-sans); font-size: 15px; font-weight: var(--w-bold);
    letter-spacing: -0.005em; text-transform: none; line-height: 22px;
    color: var(--text);
    transition: opacity var(--dur-reveal) var(--ease-out) .05s;
  }
  .inside-f1 > .inside-label {
    padding-left: var(--col);
    font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--track-tag); text-transform: uppercase;
    color: var(--text-mid);
  }
  .inside-f4 > .inside-label { color: var(--text); }
  .inside-f5 > .inside-label { color: var(--text); }

  /* the markers sit on the path: the page's marker at the section's one size; the Circle's is coral */
  .inside-pip {
    position: absolute; top: calc((22px - var(--in-mk)) / 2); left: calc(var(--rail) - var(--col) - var(--in-mk) / 2);
    z-index: 1;
    background: var(--mk-fill) var(--bg);
    box-shadow: 0 0 0 3px var(--card);
    transition: color .3s var(--ease-out), box-shadow .3s var(--ease-out);
  }
  .inside-f1 > .inside-label .inside-pip { left: calc(var(--rail) - var(--in-mk) / 2); }
  .inside-f5 > .inside-label .inside-pip {
    left: calc(var(--rail) - var(--col) + var(--f5-out) - 1px - 12px - var(--in-mk) / 2);
    box-shadow: 0 0 0 3px var(--card), var(--mk-hot-glow);
  }

  /* the path itself, one piece per stop, each drawn when its stop arrives */
  .inside-f1 > .inside-label::before,
  .inside-f2 > .inside-tiles::before,
  .inside-f3 > .inside-label::before,
  .inside-f4 > .inside-tiles::before {
    content: ""; position: absolute; width: 2px; border-radius: 2px;
    background: rgb(var(--text-rgb) / .2);
  }
  .inside-f1 > .inside-label::before { left: calc(var(--rail) - 1px); top: 11px; bottom: calc(-1 * (var(--step) + 11px)); }
  .inside-f2 > .inside-tiles::before { left: calc(var(--rail) - var(--col) - 1px); top: -6px; bottom: calc(-1 * (var(--step) + 11px)); }
  .inside-f3 > .inside-label::before { left: calc(var(--rail) - var(--col) - 1px); top: 11px; bottom: calc(-1 * (var(--step) + 11px)); }
  .inside-f4 > .inside-tiles::before {
    left: calc(var(--rail) - var(--col) - 1px); top: -6px; bottom: calc(-1 * (var(--step) + 1px + 10px + 11px));
    background: linear-gradient(180deg, rgb(var(--text-rgb) / .2), rgb(var(--accent-rgb) / .8));
  }
  .inside-tiles { position: relative; margin-top: 6px; gap: 6px; }

  /* one fill down the whole path, scrubbed by the scroll; its tip is the page's travelling dot */
  /* With the script on, one track replaces the pieces (it is first in the card, so every marker sits on top of it) */
  .inside-rail {
    display: block; position: absolute; left: calc(14px + var(--rail) - 1px); top: 0; width: 2px; height: 0;
    border-radius: 2px; background: rgb(var(--text-rgb) / .2);
  }
  .inside-nest.is-scrub .inside-f1 > .inside-label::before,
  .inside-nest.is-scrub .inside-f2 > .inside-tiles::before,
  .inside-nest.is-scrub .inside-f3 > .inside-label::before,
  .inside-nest.is-scrub .inside-f4 > .inside-tiles::before { content: none; }
  .inside-rail-fill {
    position: absolute; inset: 0; border-radius: inherit;
    background: var(--rail-fill);
    transform-origin: center top; transform: scaleY(0);
  }
  .inside-rail-tip {
    position: absolute; left: 50%; top: calc(var(--tdot) / -2); width: var(--tdot); height: var(--tdot); margin-left: calc(var(--tdot) / -2);
    border-radius: 50%; background: var(--text); box-shadow: var(--tdot-glow);
    opacity: 0; transition: opacity .3s var(--ease-out);
  }
  .inside-nest.is-scrub .inside-rail-tip { opacity: 1; }
  .inside-nest.is-scrub.is-done .inside-rail-tip { opacity: 0; }
  .inside-nest.is-scrub .inside-pip:not(.is-lit) { color: var(--mk-off); box-shadow: 0 0 0 3px var(--card); }

  /* the items: plain lines with a quiet tick, no boxes */
  .inside-tile {
    grid-template-columns: 18px minmax(0, 1fr); gap: 10px;
    padding: 0; border: 0; border-radius: 0; background: none;
    color: var(--text-mid); font-size: 14px; font-weight: var(--w-mid); line-height: 1.4;
  }
  .inside-tile > span:last-child { padding-top: 0; }
  .inside-tick { width: 18px; height: 18px; margin-top: 1px; background: none; border: 1px solid var(--border-strong); }
  .inside-tick::after { inset: 3.5px; background: var(--text-mid); }

  /* level 2: the Circle, the one glowing card at the end of the path */
  /* the Circle card reaches a little wider than the column above it, so its five rows wrap less */
  .inside-frame.inside-f5 { padding: 10px 12px 12px; margin-left: calc(-1 * var(--f5-out)); margin-right: -10px; border-radius: var(--r); }
  .inside-f5 .inside-tile { gap: 8px; line-height: 1.35; }
  .inside-f5 > .inside-tiles { margin-top: 6px; gap: 6px; }
  .inside-tiles--circle .inside-tile--core { font-size: 15px; }
  .inside-tile--core { color: var(--text); font-weight: var(--w-semi); }
  .inside-tile--core .inside-tick { background: var(--grad-btn); border-color: transparent; }
  .inside-tile--core .inside-tick::after { background: var(--on-accent); }

  /* motion on phones: each stop's name fades in and its items rise; the path itself moves once, as one fill (09-inside.js) */
  html.js:not(.reduced) .inside-frame:not(.is-in) > .inside-label { transform: none; }
  html.js:not(.reduced) .inside-frame:not(.is-in) > .inside-tiles > .inside-tile { transform: translate3d(0, 8px, 0); }
  .inside-tiles--grid .inside-tile:nth-child(1) { --td: .22s; }
  .inside-tiles--grid .inside-tile:nth-child(2) { --td: .3s; }
  .inside-tiles--grid .inside-tile:nth-child(3) { --td: .38s; }
  .inside-tiles--grid .inside-tile:nth-child(4) { --td: .46s; }

  /* the Circle card, tighter */
  .inside-circle { padding: 16px; }
  .inside-circle > * + * { margin-top: 10px; }
  .inside-circle > .inside-job { margin-top: 8px; }
  .inside-job { font-size: 17px; }
  .inside-calls, .inside-peers, .inside-term { gap: 10px; }
  .inside-calls p, .inside-peers p, .inside-term p { font-size: 14.5px; line-height: 1.5; }
  .inside-term { padding: 10px 14px; }
  .inside-more { padding-top: 10px; }

  /* opinion, then the one fold */
  .inside-proof { margin-top: 14px; gap: 12px; }
  .inside-opinion { gap: 14px; padding-left: 14px; border-left-color: var(--border-strong); }
  .inside-opinion-text { font-size: 17px; line-height: 1.4; }

  /* the fold row itself is the shared .fold-sum */
}

/* ==== 09b-connect.css ==== */
/* 09b-connect.css: "Connect the tools you already use." Nine kinds of tool as switch tiles, and the page's one
   click-to-connect moment in the CRM panel. Phone order: head, tiles, panel, closing line. From 1024: words and
   panel on the left, tiles on the right. The markup is the finished frame (everything connected); 09b-connect.js
   sets the start state at boot and adds .connect--live, which is what makes the "Connect" pill exist at all. */

.connect-layout { display: grid; grid-template-columns: minmax(0, 1fr); }
.connect-eyebrow { display: none; }            /* 09b-connect-001 prints from 768 up */
.connect-lead { margin-top: var(--s-3); }
.sec-head > h2 + .connect-lead { margin-top: var(--s-3); }

/* ---------------- the tiles ---------------- */
.connect-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-2);
  margin-top: 20px;
}
.connect-li { display: flex; min-width: 0; }
.connect-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  min-width: 0;
  min-height: 74px;
  padding: 10px;
  border-radius: var(--r);
  border: 1px solid var(--border-strong);
  background: linear-gradient(180deg, var(--card-2), var(--card));
  -webkit-tap-highlight-color: transparent;
  transition: border-color var(--dur-move) var(--ease-inout), box-shadow var(--dur-move) var(--ease-inout);
}
.connect-tile.is-on { border-color: var(--accent-line); }
.connect-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-1); }
.connect-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--card-2);
  color: var(--text-muted);
  transition: color var(--dur-move) var(--ease-inout), background-color var(--dur-move) var(--ease-inout), border-color var(--dur-move) var(--ease-inout);
}
.connect-tile.is-on .connect-ico { color: var(--accent-3); background: var(--accent-soft); border-color: var(--accent-line); }
.connect-ico svg,
.connect-pico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.connect-sw { --sw-w: 28px; --sw-h: 16px; margin-top: 2px; }
.connect-lbl {
  font-size: 13px;
  font-weight: var(--w-semi);
  line-height: 16px;
  color: var(--text-mid);
  white-space: nowrap;
  letter-spacing: -0.01em;
}
.connect-tile.is-on .connect-lbl { color: var(--text); }

/* the answer: one ring pings out of a tile (and the panel) the moment it connects; the page's ping, as 08 draws it */
.connect-tile::after,
.connect-pring {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 2px solid var(--accent);
  opacity: 0;
  pointer-events: none;
}
html.js:not(.reduced) .connect-tile.is-ping::after,
html.js:not(.reduced) .connect-panel.is-ping .connect-pring { animation: connect-ping .7s var(--ease-out) both; }
/* the ring grows by a fixed 8px rather than by scale, so the wide panel's ring never reaches the screen edge */
@keyframes connect-ping { 0% { opacity: .95; inset: -1px; } 100% { opacity: 0; inset: -9px; } }

/* with script the tiles are switches the visitor can press */
.connect--live .connect-tile { cursor: pointer; }
.connect-tile:focus-visible { outline: 2px solid var(--accent-3); outline-offset: 3px; }
@media (hover: hover) {
  .connect--live .connect-tile:hover { border-color: rgb(var(--accent-rgb) / .55); }
}
.connect--live .connect-tile:active { box-shadow: inset 0 0 0 1px var(--accent-line); }

/* ---------------- the panel: "Connect your CRM" ---------------- */
.connect-panel {
  margin-top: var(--s-4);
  padding: 14px 16px;
  border-color: var(--border-strong);
  transition: border-color var(--dur-move) var(--ease-inout);
}
.connect-panel.is-on { border-color: var(--accent-line); }
.connect-panel > * + * { margin-top: 0; }
.connect-pring { border-radius: var(--r); }
.connect-ptop { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 28px; }
.connect-pico {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--r-xs);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent-3);
}
.connect-pico svg { width: 18px; height: 18px; }
.connect-ptitle { font-size: 15px; line-height: 20px; font-weight: var(--w-bold); letter-spacing: -0.01em; color: var(--text); }

/* one cell holds both the pill and the switch-plus-word, so the swap moves nothing */
.connect-state { display: inline-grid; justify-items: end; align-items: center; }
.connect-state > * { grid-area: 1 / 1; }
.connect-pill {
  position: relative;
  display: none;                                  /* playback only: it exists only once the script is live */
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: var(--w-bold);
  line-height: 1;
  opacity: 0;
  transition: opacity .12s var(--ease-out);
}
/* in layout (at opacity 0 once connected) while motion runs; under reduced motion only while it is the thing to press */
html.js:not(.reduced) .connect--live .connect-pill,
html.reduced .connect--live .connect-panel:not(.is-on) .connect-pill { display: inline-flex; }
.connect--live .connect-panel:not(.is-on) .connect-pill { opacity: 1; cursor: pointer; }
.connect-tap {
  position: absolute;
  top: 50%; left: 50%;
  width: 28px; height: 28px;
  margin: -14px 0 0 -14px;
  border-radius: 50%;
  border: 2px solid var(--accent-3);
  opacity: 0;
  pointer-events: none;
}
.connect-on { display: inline-flex; align-items: center; gap: 6px; transition: opacity .2s var(--ease-out); }
.connect-panel:not(.is-on) .connect-on { opacity: 0; }
.connect-psw { --sw-w: 28px; --sw-h: 16px; }
.connect-word {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: var(--w-semi);
  line-height: 16px;
  color: var(--accent-3);
}
.connect-word::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px rgb(var(--accent-rgb) / .8);
}

.connect-pline { margin-top: 10px; font-size: var(--fs-small); line-height: 20px; color: var(--text-mid); }

/* the agent's line: the brand mark as its avatar (the knob slides on), then its bubble lands */
.connect-agent {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: end;
  gap: var(--s-2);
  margin-top: 10px;
  transition: opacity .2s var(--ease-out);
}
.connect-panel:not(.is-told) .connect-agent { opacity: 0; }
.connect-av {
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: var(--r-xs);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
}
.connect-av i { position: relative; display: block; width: 14px; height: 8px; border-radius: var(--r-pill); background: var(--accent); }
.connect-av i::after {
  content: "";
  position: absolute;
  top: 1px; left: 1px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--on-accent);
  transform: translateX(6px);
  transition: transform var(--dur-move) var(--ease-land);
}
.connect-panel:not(.is-told) .connect-av i::after { transform: none; }
.connect-msg { min-width: 0; }
.connect-name { font-size: 12px; font-weight: var(--w-semi); line-height: 14px; margin-bottom: 2px; color: var(--accent-3); }
.connect-bubble {
  display: inline-block;
  max-width: 100%;
  padding: 5px 10px;
  border-radius: 4px 12px 12px 12px;
  border: 1px solid var(--accent-line);
  background: var(--card-2);
  font-size: var(--fs-small);
  line-height: 18px;
  color: var(--text);
  transform-origin: 0 100%;
}

.connect-end { margin-top: var(--s-4); }
.connect-end strong { color: var(--text); font-weight: var(--w-semi); }

/* under reduced motion a press still switches a tile, at once */
html.reduced .sec--connect *,
html.reduced .sec--connect *::before,
html.reduced .sec--connect *::after { transition: none !important; animation: none !important; }

@media (min-width: 768px) {
  .connect-eyebrow { display: flex; }
  .connect-grid { gap: var(--s-3); margin-top: var(--s-6); }
  .connect-tile { min-height: 96px; padding: 14px; }
  .connect-lbl { font-size: 15px; line-height: 18px; }
  .connect-panel { max-width: 560px; }
}

@media (min-width: 1024px) {
  .connect-layout {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas: "head grid" "panel grid" "end grid";
    grid-template-rows: auto auto 1fr;
    column-gap: var(--s-8);
    align-items: start;
  }
  .connect-head { grid-area: head; }
  .connect-grid { grid-area: grid; align-self: center; margin-top: 0; gap: var(--s-4); }
  .connect-panel { grid-area: panel; margin-top: var(--s-6); max-width: none; }
  .connect-end { grid-area: end; }
  .connect-tile { min-height: 110px; padding: 16px; }
  .connect-ico { width: 44px; height: 44px; }
  .connect-ico svg { width: 24px; height: 24px; }
  .connect-sw { --sw-w: 32px; --sw-h: 18px; }
  .connect-bubble { font-size: 15px; line-height: 20px; }
}

/* ==== 09c-company.css ==== */
/* 09c Company-wide agents (DESIGN.md part 6; PHASE-B.md rulings 3 and 6).
   The diagram: a dashed "Your cloud" frame, the agent mark as a hub, four department chips, one line from the hub
   to each chip. Finished state is the markup (lines coral, hub on, chips lit). The start state is keyed to the
   frame (it carries data-reveal), and the motion plays once in under 2 seconds:
     .15  lines draw from the hub (.08s apart, --dur-line)
     .40  the hub's switch turns on
     .70  09c-company.js sends one travelling dot (the page's --tdot) down each line, in under each chip
    1.30  each chip lights (its coral dot pops) and answers with one ring pulse; the lines turn coral */

.sec--company { --cc-h: 180px; }

/* ---------------- layout ---------------- */
.company-top { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "cloud" "body" "apps"; }
.company-head { grid-area: head; }
.company-cloud { grid-area: cloud; }
.company-body { grid-area: body; }
.company-apps { grid-area: apps; }
.company-top > .company-head + * { margin-top: var(--s-4); }   /* the shared .sec-head + * gap is too big here */
.company-body { margin-top: var(--s-4); }
.company-apps { margin-top: var(--s-5); }

/* ---------------- the cloud diagram ---------------- */
.company-cloud {
  position: relative;
  height: var(--cc-h);
  margin: 0;
  overflow: hidden;
  border: 1px dashed var(--accent-line);
  border-radius: var(--r-lg);
  background:
    var(--dot-grid) 0 0 / 14px 14px,
    radial-gradient(120% 80% at 100% 0%, rgb(var(--accent-rgb) / .1), transparent 62%),
    linear-gradient(180deg, var(--card-2), var(--bg-soft));
}
.company-label { position: absolute; top: 12px; left: 12px; z-index: var(--z-raised); }

.company-lines { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.company-line { fill: none; stroke: rgb(var(--accent-rgb) / .55); stroke-width: 1; }

/* the hub: the agent mark (DESIGN.md part 3) at 40px, the page's switch inside it */
.company-hub {
  position: absolute;
  left: 50%;
  top: 60%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-sm);
  background-color: var(--card-2);
  background-image: linear-gradient(var(--accent-soft), var(--accent-soft));
  box-shadow: 0 0 18px -4px rgb(var(--accent-rgb) / .55);
}
.company-sw { --sw-w: 26px; --sw-h: 14px; }
.company-sw::after { top: 2px; left: 2px; width: 10px; height: 10px; }
.company-sw.is-on::after { transform: translateX(12px); }

/* the four departments sit on the line ends; each is opaque, so a line (and the dot) goes in under it */
.company-chips { position: absolute; inset: 0; z-index: 3; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.company-chip {
  position: absolute;
  transform: translate(-50%, -50%);
  background: var(--card-2);
  color: var(--text-mid);
}
.company-chip--1 { left: 24%; top: 36%; }
.company-chip--2 { left: 76%; top: 36%; }
.company-chip--3 { left: 24%; top: 84%; }
.company-chip--4 { left: 76%; top: 84%; }

/* the travelling dot: the page's one (--tdot, white, --tdot-glow); only the script shows it */
.company-dot {
  display: none;
  position: absolute;
  left: 50%;
  top: 60%;
  z-index: 2;
  width: var(--tdot);
  height: var(--tdot);
  margin: calc(var(--tdot) / -2) 0 0 calc(var(--tdot) / -2);
  border-radius: 50%;
  background: var(--text);
  box-shadow: var(--tdot-glow);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}
html.js:not(.reduced) .company-cloud.is-live .company-dot { display: block; }

/* ---------------- motion: start states (script on, motion allowed, before the frame arrives) ---------------- */
html.js:not(.reduced) .company-line { stroke-dasharray: 1; }
html.js:not(.reduced) .company-cloud:not(.is-in) .company-line { stroke-dashoffset: 1; stroke: var(--border-strong); }
html.js:not(.reduced) .company-cloud:not(.is-in) .company-sw { background: var(--border-strong); box-shadow: none; }
html.js:not(.reduced) .company-cloud:not(.is-in) .company-sw::after { transform: none; background: var(--text-muted); }
html.js:not(.reduced) .company-cloud:not(.is-in) .company-chip::before { opacity: 0; transform: scale(0); }

.company-line {
  transition: stroke-dashoffset var(--dur-line) var(--ease-out) var(--ld, .15s), stroke .3s var(--ease-out) 1.3s;
}
.company-line--2 { --ld: .23s; }
.company-line--3 { --ld: .31s; }
.company-line--4 { --ld: .39s; }
.company-sw, .company-sw::after { transition-duration: .35s; transition-delay: .4s; }
.company-chip::before { transition: opacity .2s var(--ease-out) 1.3s, transform .4s var(--ease-land) 1.3s; }

/* the answer: one ring pulse out of each chip as its dot arrives (only when the script played the dots) */
html.js:not(.reduced) .company-cloud.is-live .company-chip { animation: company-ping .6s var(--ease-out) 1.3s 1 both; }
@keyframes company-ping {
  0% { box-shadow: 0 0 0 0 rgb(var(--accent-rgb) / .6); }
  100% { box-shadow: 0 0 0 6px rgb(var(--accent-rgb) / 0); }
}

/* flicked past: no motion at all */
html.js:not(.reduced) .company-cloud.is-instant .company-line,
html.js:not(.reduced) .company-cloud.is-instant .company-sw,
html.js:not(.reduced) .company-cloud.is-instant .company-sw::after,
html.js:not(.reduced) .company-cloud.is-instant .company-chip::before { transition: none !important; }

/* ---------------- the custom apps row ---------------- */
.company-apps { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s-3); align-items: start; }
.company-ico {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-sm);
  background-color: var(--card-2);
  background-image: linear-gradient(var(--accent-soft), var(--accent-soft));
  color: var(--accent-3);
  box-shadow: 0 0 18px -4px rgb(var(--accent-rgb) / .55);
}
.company-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.company-apps-t h3 { font-size: 16px; line-height: 20px; }
.company-apps-t p { margin-top: 4px; font-size: var(--fs-small); line-height: var(--lh-snug); color: var(--text-mid); max-width: 52ch; }

/* ---------------- the aim and the closing thought ---------------- */
.company-aim {
  position: relative;
  z-index: var(--z-base);
  margin-top: var(--s-5);
  padding-left: var(--s-3);
  border-left: 2px solid var(--accent);
  font-size: 18px;
  font-weight: var(--w-bold);
  line-height: 1.35;
  color: var(--text);
  max-width: 40ch;
  text-wrap: pretty;
}
.company-aim strong { color: var(--accent); font-weight: var(--w-head); }
.company-close {
  position: relative;
  z-index: var(--z-base);
  margin-top: var(--s-4);
  font-size: var(--fs-body);
  line-height: var(--lh-snug);
  color: var(--text-mid);
  max-width: 52ch;
  text-wrap: pretty;
}
.company-close strong { color: var(--text); font-weight: var(--w-semi); }

/* ---------------- phones: the eyebrow prints on desktop only ---------------- */
@media (max-width: 767px) {
  .company-head .company-eyebrow { display: none; }
}

@media (min-width: 768px) {
  .sec--company { --cc-h: 240px; }
  .company-aim { font-size: 24px; }
}

/* ---------------- desktop: words left, the diagram right; the aim centred under both ---------------- */
@media (min-width: 1024px) {
  .sec--company { --cc-h: 300px; }
  .company-top {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas: "head cloud" "body cloud" "apps cloud";
    grid-template-rows: auto auto 1fr;
    column-gap: var(--s-8);
    align-items: start;
  }
  .company-top > .company-head + * { margin-top: 0; }
  .company-cloud { align-self: center; width: 100%; max-width: 520px; justify-self: end; }
  .company-body { margin-top: var(--s-5); font-size: var(--fs-lead); line-height: var(--lh-snug); }
  .company-apps { margin-top: var(--s-6); }
  .company-apps-t h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
  .company-apps-t p { font-size: var(--fs-body); }

  .company-aim {
    margin: var(--s-8) auto 0;
    padding-left: 0;
    border-left: 0;
    font-size: 32px;
    line-height: 1.2;
    letter-spacing: var(--track-h3);
    text-align: center;
    max-width: 26ch;
    text-wrap: balance;
  }
  .company-close { margin: var(--s-4) auto 0; font-size: var(--fs-lead); text-align: center; max-width: 46ch; text-wrap: balance; }
}

/* ==== 10-promise.css ==== */
/* 10-promise.css — "What I'll put in writing."
   The seal: a ring draws once around the shield, the thirty day marks light as it passes, it locks shut, a check draws.
   Then each condition chip ticks. Markup is the finished state (ring closed, marks lit, check drawn);
   every start state below sits under html.js:not(.reduced) and is keyed to an element carrying data-reveal. */

.promise-bg {
  position: absolute;
  inset: 0;
  z-index: var(--z-under);
  pointer-events: none;
  background:
    radial-gradient(60% 34% at 50% 34%, rgb(var(--accent-rgb) / .12), transparent 70%),
    radial-gradient(50% 30% at 100% 100%, rgb(var(--deep-rgb) / .16), transparent 70%);
}
.promise-head .lead { max-width: 30ch; }
@media (min-width: 768px) { .promise-head .lead { max-width: 44ch; } }

.promise-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }

/* ---------- the promise card ---------- */
.promise-card {
  text-align: center;
  padding: var(--s-6) 20px var(--s-5);
  overflow: hidden;
}
.promise-card > * + * { margin-top: 0; }

.promise-seal {
  position: relative;
  width: 176px;
  margin: 0 auto;
}
.promise-seal::before {   /* the glow under the seal */
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: var(--glow-center);
  filter: blur(18px);
  transform: scale(1.5);
  z-index: -1;
}
.promise-seal-svg { display: block; width: 100%; height: auto; overflow: visible; }

.promise-stop-a { stop-color: var(--accent-3); }
.promise-stop-b { stop-color: var(--accent); }
.promise-stop-c { stop-color: var(--accent-red); }
.promise-stop-d { stop-color: var(--accent); }
.promise-stop-e { stop-color: var(--accent-3); }

.promise-track { fill: none; stroke: var(--border-strong); stroke-width: 1.5; }
.promise-arc {
  fill: none;
  stroke: url(#promise-arc);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  filter: drop-shadow(0 0 6px rgb(var(--accent-rgb) / .7));
  transition: stroke-dashoffset 1.6s var(--ease-inout);
}
.promise-tick {
  fill: var(--accent);
  transform-box: fill-box;
  transform-origin: center;
  transition: fill .3s var(--ease-out), transform .3s var(--ease-out);
  transition-delay: calc(.15s + var(--i) * .05s);
}
.promise-spark-orbit { transform-box: view-box; transform-origin: 100px 100px; }
.promise-spark { fill: var(--text); opacity: 0; filter: drop-shadow(0 0 6px rgb(var(--accent-rgb) / 1)); }
.promise-lock {
  fill: none;
  stroke: rgb(var(--accent-rgb) / .55);
  stroke-width: 1.5;
  transform-box: view-box;
  transform-origin: 100px 100px;
  transition: opacity .45s var(--ease-out) 1.55s, transform .6s var(--ease-out) 1.55s;
}
.promise-core { transform-box: view-box; transform-origin: 100px 100px; transition: transform .6s var(--ease-out) 1.5s, opacity .6s var(--ease-out) 1.5s; }
.promise-disc { fill: url(#promise-disc); filter: drop-shadow(0 8px 24px rgb(var(--accent-rgb) / .5)); }
.promise-shield { fill: none; stroke: var(--text); stroke-width: 5; stroke-linejoin: round; }
.promise-check {
  fill: none;
  stroke: var(--text);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset .35s var(--ease-out) 1.8s;
}

/* start state: ring open, marks dark, lock ring loose, check undrawn */
html.js:not(.reduced) .promise-seal:not(.is-in) .promise-arc { stroke-dashoffset: 1; }
html.js:not(.reduced) .promise-seal:not(.is-in) .promise-tick { fill: var(--border-strong); transform: scale(.7); }
html.js:not(.reduced) .promise-seal:not(.is-in) .promise-lock { opacity: 0; transform: scale(1.09); }
html.js:not(.reduced) .promise-seal:not(.is-in) .promise-core { transform: scale(.9); opacity: .55; }
html.js:not(.reduced) .promise-seal:not(.is-in) .promise-check { stroke-dashoffset: 1; }
/* the spark rides the tip of the ring while it draws, then goes out */
html.js:not(.reduced) .promise-seal.is-in .promise-spark-orbit { animation: promise-orbit 1.6s var(--ease-inout) both; }
html.js:not(.reduced) .promise-seal.is-in .promise-spark { animation: promise-spark 1.75s linear both; }
/* the lock: one soft flash of the whole seal when the ring closes */
html.js:not(.reduced) .promise-seal.is-in::before { animation: promise-flash 1.2s var(--ease-out) 1.5s both; }
@keyframes promise-orbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes promise-spark { 0% { opacity: 0; } 8% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; } }
@keyframes promise-flash { 0% { opacity: 1; transform: scale(1.5); } 30% { opacity: 1; transform: scale(1.9); } 100% { opacity: 1; transform: scale(1.5); } }

/* ---------- the promise itself: the loudest line on the screen ---------- */
.promise-line {
  margin-top: var(--s-5);
  font-size: clamp(31px, 9.5vw, 40px);
  font-weight: var(--w-head);
  line-height: 1.06;
  letter-spacing: var(--track-h2);
  text-wrap: balance;
}
.promise-line-a {
  color: var(--text);
  background: var(--grad-text-warm);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.promise-nb { white-space: nowrap; }
/* the money-back half stays on one line, so "or" never hangs at the end of a line */
.promise-line-b {
  white-space: nowrap;
  color: var(--accent);
  background: var(--grad-text-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.promise-measure {
  margin: var(--s-4) auto 0;
  max-width: 34ch;
  font-size: var(--fs-body);
  line-height: var(--lh-snug);
  color: var(--text-mid);
}
/* the bridge: the line that ties the hours promise to step 02's money. Headline weight, right under the promise. */
.promise-bridge {
  margin: var(--s-5) auto 0;
  max-width: 24ch;
  font-size: clamp(22px, 6.2vw, 28px);
  font-weight: var(--w-head);
  line-height: 1.16;
  letter-spacing: var(--track-h2);
  color: var(--text);
  text-wrap: balance;
}
.promise-bridge-b {
  background: var(--grad-text-warm);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.promise-honest {
  margin: var(--s-3) auto 0;
  max-width: 40ch;
  font-size: var(--fs-body);
  line-height: var(--lh-snug);
  color: var(--text-mid);
}

/* ---------- the five conditions: all printed, all readable ---------- */
.promise-holds {
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--border);
}
.promise-holds-label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: var(--w-mid);
  letter-spacing: .04em;
  color: var(--text-muted);
}
.promise-conds {
  margin-top: var(--s-3);
  justify-content: center;
}
/* inline-block, not the chip's inline-flex: the check rides on the first word (.promise-cond-k),
   so a condition that wraps never leaves its check alone at the end of a line */
.promise-cond {
  display: inline-block;
  white-space: normal;
  text-align: left;
  max-width: 100%;
  min-height: 34px;
  padding: 7px 13px 7px 9px;
  border-color: var(--accent-line);
  background: rgb(var(--accent-rgb) / .06);
  color: var(--text);
}
.promise-cond-k { white-space: nowrap; }
.promise-cond-k::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  vertical-align: -3px;
  background: var(--accent);
  -webkit-mask: var(--icon-check) center / contain no-repeat;
  mask: var(--icon-check) center / contain no-repeat;
  transition: transform .35s var(--ease-land), opacity .2s var(--ease-out);
  transition-delay: calc(.1s + var(--i) * .14s);
}
html.js:not(.reduced) .promise-conds:not(.is-in) .promise-cond-k::before { transform: scale(0); opacity: 0; }

/* ---------- the team card: the two-halves terms, words only ---------- */
.promise-side { display: grid; gap: var(--s-6); align-content: start; }
.promise-team { padding: var(--s-5); }
.promise-team > * + * { margin-top: var(--s-3); }
.promise-team-h { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--track-h3); }
.promise-team p { font-size: var(--fs-body); line-height: var(--lh-snug); }

.promise-cta { display: flex; justify-content: center; }

/* ---------- tablet ---------- */
@media (min-width: 768px) {
  .promise-card { padding: var(--s-7) var(--s-7) var(--s-6); }
  .promise-seal { width: 200px; }
  .promise-line { font-size: clamp(36px, 5.2vw, 48px); max-width: 20ch; margin-inline: auto; }
  .promise-bridge { font-size: 30px; max-width: 26ch; }
  .promise-side { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; }
}

/* ---------- desktop: the promise card on the left, the team terms and the button on the right ---------- */
@media (min-width: 1024px) {
  .promise-grid { gap: var(--s-6); }
  .promise-card {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    column-gap: var(--s-8);
    align-items: start;
    text-align: left;
    padding: var(--s-8) var(--s-8) var(--s-7);
  }
  .promise-seal { grid-row: 1 / span 5; width: 280px; margin: var(--s-2) 0 0 var(--s-2); }
  .promise-line { margin-top: 0; max-width: 21ch; margin-inline: 0; font-size: clamp(44px, 4vw, 58px); }
  .promise-measure { margin-inline: 0; max-width: 52ch; font-size: var(--fs-lead); }
  .promise-bridge { margin-inline: 0; max-width: 30ch; font-size: clamp(28px, 2.4vw, 34px); }
  .promise-honest { margin-inline: 0; max-width: 60ch; }
  .promise-holds { grid-column: 2; }
  .promise-holds-label { text-align: left; }
  .promise-conds { justify-content: flex-start; }
  .promise-side { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; gap: var(--s-7); }
  .promise-team { padding: var(--card-pad-lg) var(--card-pad); }
  .promise-cta { justify-content: flex-start; }
}

/* ================= phones: one card, one strong line, the terms in plain sight ================= */
/* Page-length pass: every word stays; the seal shrinks to a badge, the five conditions run as one
   checked sentence instead of a stack of chips, and the side card goes quiet so the promise card is
   the screen's one coral moment (the button is coral on the next screen). Desktop is unchanged. */
@media (max-width: 767px) {
  /* phone rhythm: the section padding is the shared --sec-pad (32px on phones, 00-tokens.css) */
  .promise-eyebrow { display: none; }   /* 10-promise-001 prints from 768 up */
  .promise-head > h2 + .lead { margin-top: var(--s-3); }
  .promise-head + * { margin-top: 16px; }
  .promise-grid { gap: 12px; }

  .promise-card { padding: 16px; }
  .promise-seal { width: 64px; }
  .promise-seal::before { filter: blur(12px); }
  /* thicker strokes so the drawing still reads at badge size */
  .promise-track { stroke-width: 3; }
  .promise-arc { stroke-width: 8; }
  .promise-ticks { display: none; }
  .promise-spark { r: 9px; }
  .promise-lock { stroke-width: 3; }
  .promise-shield { stroke-width: 9; }
  .promise-check { stroke-width: 10; }

  .promise-line { margin-top: 12px; font-size: 26px; line-height: 1.12; }
  .promise-measure { margin-top: 10px; font-size: 15px; line-height: 1.45; }
  .promise-bridge { margin-top: 14px; font-size: 22px; line-height: 1.18; }
  .promise-honest { margin-top: 8px; font-size: 15px; line-height: 1.45; }

  .promise-holds { margin-top: 12px; padding-top: 12px; }
  .promise-conds {
    display: block;
    margin-top: 6px;
    font-size: var(--fs-small);
    line-height: 1.95;
    text-align: center;
    text-wrap: pretty;
  }
  .promise-cond {
    display: inline;
    min-height: 0;
    padding: 2px 7px 3px 5px;
    margin: 0 2px;
    border: 0;
    background: rgb(var(--text-rgb) / .055);
    border-radius: var(--r-xs);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    font-family: var(--font-sans);
    font-size: var(--fs-small);
    font-weight: var(--w-mid);
    color: var(--text);
    white-space: normal;
  }
  .promise-cond-k::before { width: 14px; height: 14px; margin-right: 5px; vertical-align: -2px; background: var(--text-mid); }

  .promise-side { gap: 12px; }
  .promise-team { padding: 14px 16px; }
  .promise-team > * + * { margin-top: var(--s-2); }
  .promise-team-h { font-size: 18px; line-height: 1.25; }
  .promise-team p { font-size: 15px; line-height: 1.45; }
}

/* ==== 11-questions.css ==== */
/* 11-questions.css — "What founders ask us first."
   One panel, eleven rows split by hairlines; the open row lights a coral rail on its left edge.
   Every <details> ships open, so with no script every answer shows. 11-questions.js closes all but the first.
   Phones: questions 4 to 11 sit in one "More questions" fold (.questions-more), the page's disclosure pattern:
   a native <details> that is open in the markup and closed by script on boot under 768px. Inside it the
   answers print open. At 768 and up nothing folds: the fold's label is hidden and the rows read as one list. */

.questions-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.questions-head + * { margin-top: var(--s-6); }

.questions-panel {
  position: relative;
  z-index: var(--z-base);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--card-2), var(--card));
  box-shadow: var(--shadow-card), 0 30px 70px -40px rgb(var(--accent-rgb) / .35);
  overflow: hidden;
}

/* rows: the shared .acc component, flattened into the panel */
.questions-item.acc {
  position: relative;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition: background-color var(--dur-move) var(--ease-inout);
}
.questions-item.acc + .questions-item.acc { margin-top: 0; border-top: 1px solid var(--border); }
.questions-item::details-content { transition: none; }

/* the coral rail on the open row */
.questions-item::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 14px rgb(var(--accent-rgb) / .6);
  transform: scaleY(0);
  transform-origin: center top;
  transition: transform var(--dur-move) var(--ease-inout);
  pointer-events: none;
}
.questions-item[open]::before { transform: scaleY(1); }
.questions-item[open] { background: rgb(var(--accent-rgb) / .045); }
.questions--live .questions-item[open]:not(.is-open)::before { transform: scaleY(0); }
.questions--live .questions-item[open]:not(.is-open) { background: transparent; }

.questions-item > summary {
  min-height: 64px;
  padding: 16px 60px 16px var(--s-5);
  font-size: var(--fs-body);
  line-height: 1.35;
  transition: color var(--dur-hover) var(--ease-out);
}
.questions-item > summary:focus-visible { outline: 2px solid var(--accent-3); outline-offset: -3px; border-radius: var(--r-sm); }
@media (hover: hover) { .questions-item > summary:hover { color: var(--accent-3); } }
.questions-item > summary::after { right: 20px; }
.questions--live .questions-item:not(.is-open) > summary::after { transform: none; }
.questions--live .questions-item.is-open > summary::after { transform: rotate(45deg); background-color: var(--accent-soft); border-color: var(--accent-line); }

.questions-item .acc-a {
  padding: 0 var(--s-5) var(--s-5);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-mid);
  max-width: 64ch;
}

/* the tools: a grouped list, text only, never logos. Group names are mono labels, items are plain text, one row
   per group split by hairlines (the footer prints the same list with the same look, 14-footer.css). */
.questions-tools {
  margin-top: var(--s-4);
  padding: var(--s-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  background: rgb(var(--bg-rgb) / .35);
}
.questions-tools-label {
  font-size: var(--fs-small);
  font-weight: var(--w-semi);
  color: var(--text);
}
.questions-tgs { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: var(--s-5); margin-top: var(--s-2); }
.questions-tg {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 5.6rem minmax(0, 1fr);
  grid-template-columns: subgrid;
  align-items: baseline;
  padding-block: 7px;
  border-top: 1px solid var(--border);
}
.questions-tg:first-child { border-top: 0; }
.questions-tg-k {
  font-family: var(--font-mono);
  font-size: var(--fs-tag);
  font-weight: var(--w-bold);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}
.questions-tg-v {
  margin: 0;
  font-size: var(--fs-small);
  font-weight: var(--w-mid);
  line-height: 1.5;
  color: var(--text-mid);
}
.questions-tg-sep { color: var(--text-muted); }
.questions-tools-end {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--s-2);
  padding-top: var(--s-3);
  border-top: 1px solid var(--border);
  font-size: var(--fs-small);
  font-weight: var(--w-semi);
  color: var(--text);
}
.questions-tools-end::before {
  content: "";
  flex: none;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px rgb(var(--accent-rgb) / .8);
}

/* ---------- the fold: "More questions" (phones only) ---------- */
.questions-more { position: relative; border-top: 1px solid var(--border); }
.questions-more > summary { list-style: none; }
.questions-more > summary::-webkit-details-marker { display: none; }
.questions-more::details-content { transition: none; }
/* The row is the shared .fold-sum (02-components.css): same height, type, background and chevron ring as every
   fold on the page. Here it is the panel's last row, so the panel draws its frame and the row draws none. */
.questions-more > .questions-more-sum { border: 0; border-radius: 0; box-shadow: none; }
.questions-more-sum:focus-visible { outline-offset: -3px; border-radius: var(--r-sm); }
.questions-more[open] .fold-icon { transform: rotate(180deg); }
.questions-list--more { border-top: 1px solid var(--border); }
/* while shut, two card edges peek out under the panel: there is more behind this */
.questions-panel-stack { position: relative; isolation: isolate; }
.questions-panel-stack::before,
.questions-panel-stack::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -6px;
  height: 20px;
  border: 1px solid var(--border-strong);
  border-top: 0;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  background: var(--card-2);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity var(--dur-move) var(--ease-out), transform var(--dur-move) var(--ease-out);
  pointer-events: none;
  z-index: -1;
}
.questions-panel-stack::after { left: 28px; right: 28px; bottom: -11px; opacity: 0; }
.questions-panel-stack.is-shut::before { opacity: 1; transform: none; }
.questions-panel-stack.is-shut::after { opacity: .6; transform: none; transition-delay: .06s; }

/* reduced motion: the accordion still works, every change is instant */
html.reduced .questions-item,
html.reduced .questions-item::before,
html.reduced .questions-item > summary,
html.reduced .questions-item > summary::after,
html.reduced .questions-panel-stack::before,
html.reduced .questions-panel-stack::after { transition: none; }

/* ---------- phones: one screen holds the heading, three questions and the fold ---------- */
@media (max-width: 767px) {
  /* phone rhythm: the section padding is the shared --sec-pad (32px on phones, 00-tokens.css) */
  .questions-eyebrow { display: none; }   /* 11-questions-001 prints from 768 up */
  .questions-head + * { margin-top: 16px; }
  .questions-item > summary {
    min-height: 46px;
    padding: 10px 54px 10px var(--s-4);
    font-size: 15.5px;
    line-height: 1.3;
  }
  .questions-item > summary::after { right: 16px; }
  .questions-item .acc-a { padding: 0 var(--s-4) var(--s-4); font-size: 15px; line-height: 1.45; }
  /* inside the fold every answer prints open: the question reads as a heading, not a control */
  .questions--live .questions-item--more > summary { cursor: default; min-height: var(--tap); padding: var(--s-4) var(--s-4) 4px; align-items: flex-end; }
  .questions--live .questions-item--more > summary::after { content: none; }
  .questions--live .questions-item--more,
  .questions--live .questions-item--more[open] { background: transparent; }
  .questions--live .questions-item--more::before { transform: scaleY(0); }
  .questions-tools { margin-top: var(--s-3); padding: var(--s-3) var(--s-3) var(--s-3) 14px; }
  .questions-tgs { column-gap: var(--s-4); }
  .questions-tg-v { font-size: 13.5px; }
}

@media (min-width: 768px) {
  .questions-more > .questions-more-sum { display: none; }   /* 11-questions-008a is phones only; nothing folds here */
  .questions-item > summary { min-height: 72px; padding-left: var(--s-6); font-size: 18px; }
  .questions-item .acc-a { padding: 0 var(--s-6) var(--s-6); }
}

/* desktop: the heading holds still on the left while the questions scroll on the right */
@media (min-width: 1024px) {
  .questions-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s-8); align-items: start; }
  .questions-head { position: sticky; top: var(--s-9); }
  .questions-head + * { margin-top: 0; }
  .sec--questions .ghost--left { top: auto; bottom: calc(var(--sec-pad) * .3); }
}

/* ==== 12-final.css ==== */
/* 12-final.css — "Two options. Which founder will you be?"
   Section 03's two cards come back small and fold into one: the grey one slides behind and fades, the coral one
   settles over a stem that runs into the main button, and the glow behind the button warms.
   One custom property drives it: --p, 0 (apart) to 1 (folded). The stylesheet's value is 1, so with no script,
   or under reduced motion, the section shows the folded, finished state. 12-final.js scrubs --p with the scroll.
   The tiles wear the shared .card--muted / .card--glow looks; this file only sizes and moves them. */

.sec--final { overflow: clip; }
.final-wrap { position: relative; z-index: var(--z-base); text-align: center; }
.final-head { max-width: 640px; }
.final-head h2 { text-wrap: balance; }
.final-lead { color: var(--text-mid); }

/* the two options named again, right under the question: a reminder, not a new argument. The marks are the two
   tiles below in miniature: a grey broken ring for the bottleneck, a coral filled dot for the Agentic Founder. */
.final-recap {
  display: grid;
  justify-items: center;
  gap: 6px;
  margin-top: var(--s-4);
}
.final-head > .final-recap + .final-lead { margin-top: var(--s-4); }
.final-opt {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: var(--fs-small);
  font-weight: var(--w-semi);
  line-height: 1.35;
  letter-spacing: -0.005em;
}
.final-opt--rent { color: var(--text-muted); }
.final-opt--own { color: var(--text); }
.final-opt-mark { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.final-opt--rent .final-opt-mark { border: 1.5px dashed var(--text-muted); }
.final-opt--own .final-opt-mark { background: var(--accent); box-shadow: 0 0 10px rgb(var(--accent-rgb) / .8); }
.final-lift {
  margin-top: var(--s-4);
  font-size: var(--fs-lead);
  font-weight: var(--w-bold);
  line-height: 1.35;
  color: var(--text);
}

.final-stage {
  --p: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: var(--s-6);
  padding-bottom: var(--s-2);
}

/* the two cards, small */
.final-fold {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: var(--s-3);
  width: 100%;
}
.final-tile {
  width: min(150px, 40vw);
  padding: 8px 8px 2px;
  will-change: transform, opacity;
}
.final-tile--rent {
  z-index: 0;
  opacity: calc(1 - var(--p) * .8);
  transform: translateX(calc(var(--p) * 48%)) scale(calc(1 - var(--p) * .14));
}
.final-tile--own {
  z-index: 1;
  transform: translateX(calc(var(--p) * -54%));
}
.final-tile .options-viz { border: 0; margin: 0; padding: 0; background: none; }

/* the stem from the folded card into the button */
.final-stem {
  display: block;
  width: 2px;
  height: 34px;
  margin: 6px 0 10px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--accent), rgb(var(--accent-rgb) / .2));
  transform-origin: 50% 0;
  transform: scaleY(var(--p));
}

/* the glow behind the button: cool while apart, warm once folded */
.final-glow {
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: -40px;
  width: 100%;
  max-width: 640px;
  height: 320px;
  translate: -50% 0;
  border-radius: 50%;
  pointer-events: none;
}
.final-glow--cool {
  background: radial-gradient(closest-side, rgb(var(--text-rgb) / .07), transparent);
  opacity: calc(1 - var(--p));
}
.final-glow--warm {
  background: var(--glow-center);
  opacity: calc(.15 + var(--p) * .85);
  transform: scale(calc(.7 + var(--p) * .4));
}

.final-cta { position: relative; z-index: 1; width: 100%; max-width: 420px; }
.final-cta .cta { align-items: stretch; }
/* the warm glow sits behind this line, so it steps up from --text-muted to keep 4.5:1 */
.final-cta .cta-note { color: var(--text-mid); }
@media (min-width: 768px) {
  /* the two names sit on one line; the gap is --s-5 so both fit the 640px head without wrapping */
  .final-recap { grid-auto-flow: column; justify-content: center; column-gap: var(--s-5); margin-top: var(--s-5); }
  .final-opt { font-size: var(--fs-body); white-space: nowrap; }
  .final-cta { display: flex; justify-content: center; max-width: none; }
  .final-cta .cta { align-items: center; }
  .final-cta .cta-note { justify-content: center; }
  .final-cta .cta-talk { align-self: center; }
  .final-tile { width: 190px; padding: 10px 10px 4px; }
  .final-stem { height: 44px; }
}
@media (min-width: 1024px) {
  .final-tile { width: 220px; }
}

/* ---------- phones: the eyebrow is desktop only (copy.json phone:false); the fold picture shrinks, never drops ---------- */
@media (max-width: 767px) {
  /* phone rhythm: the section padding is the shared --sec-pad (32px on phones, 00-tokens.css) */
  .final-eyebrow { display: none; }
  .final-head > .final-eyebrow + h2 { margin-top: 0; }
  .final-head > h2 + .final-lead { margin-top: var(--s-3); }
  .final-recap { margin-top: 10px; gap: 4px; }
  .final-head > .final-recap + .final-lead { margin-top: 10px; }
  .final-lead { font-size: 17px; line-height: 1.5; }
  .final-lift { margin-top: 10px; }
  .final-stage { margin-top: var(--s-3); padding-bottom: 0; }
  .final-tile { width: 104px; padding: 5px 5px 2px; border-radius: var(--r-sm); }
  .final-stem { height: 14px; margin: 3px 0 6px; }
}

/* ==== 13-calendar.css ==== */
/* 13-calendar.css — "Rather talk first? Pick a time with me."
   The booking widget is open at every width, in a dark frame, and loads when the section nears the screen.
   The widget is another site's white page: the dark frame around it makes it look chosen. */

.sec--calendar {
  --cal-h: 532px;
  --cal-pad: 8px;
}
#calendar { scroll-margin-top: calc(var(--s-5) * -1); }

.cal-glow {
  position: absolute;
  inset: 0;
  z-index: var(--z-under);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgb(var(--text-rgb)) 22%, rgb(var(--text-rgb)) 100%);
  mask-image: linear-gradient(180deg, transparent 0%, rgb(var(--text-rgb)) 22%, rgb(var(--text-rgb)) 100%);
  background:
    radial-gradient(80% 46% at 50% 62%, rgb(var(--accent-rgb) / .14), transparent 72%),
    radial-gradient(60% 40% at 105% 100%, rgb(var(--deep-rgb) / .22), transparent 70%);
}

.cal-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
.cal-head { display: grid; justify-items: start; row-gap: var(--s-3); max-width: 640px; }
.cal-grid > .cal-stage { margin-top: 0; }
.cal-who { display: flex; align-items: center; gap: var(--s-3); }
.cal-line { color: var(--text-mid); margin: 0; font-size: var(--fs-body); }

.cal-stage { position: relative; min-width: 0; }

/* With script off the scripted iframe has no address: only the <noscript> one shows. */
html:not(.js) .cal-iframe:not([src]) { display: none; }

/* ---------------- the frame ---------------- */
.cal-frame {
  position: relative;
  margin-top: var(--s-3);
  padding: var(--cal-pad);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  background:
    var(--dot-grid) 0 0 / 14px 14px,
    linear-gradient(180deg, var(--card-2), var(--bg-soft));
  box-shadow: inset 0 1px 0 rgb(var(--text-rgb) / .05), var(--shadow-card);
}
html:not(.reduced) .cal-frame { transition: border-color var(--dur-reveal) var(--ease-out), box-shadow var(--dur-reveal) var(--ease-out); }
.cal-frame.is-ready { border-color: var(--accent-line); box-shadow: inset 0 1px 0 rgb(var(--text-rgb) / .05), var(--shadow-glow); }
.cal-rim {
  position: absolute; top: -1px; left: 14%; right: 14%; height: 2px; border-radius: 2px;
  background: var(--grad-h); box-shadow: 0 0 18px rgb(var(--accent-rgb) / .6); pointer-events: none;
}
.cal-embed { position: relative; min-height: var(--cal-h); border-radius: var(--r); overflow: hidden; background: transparent; }
.cal-iframe { display: block; width: 100%; height: var(--cal-h); border: 0; background: var(--text); }
.cal-still, .cal-still img { display: block; width: 100%; height: auto; }

html.js .cal-frame:not(.is-ready) .cal-embed { opacity: 0; }
html.js:not(.reduced) .cal-embed { transition: opacity var(--dur-move) var(--ease-inout); }

/* loading: a plain ring, never a calendar shape. Only shown with script, only until the widget is drawn. */
.cal-wait { display: none; }
html.js .cal-wait {
  position: absolute; inset: var(--cal-pad); z-index: var(--z-raised);
  display: grid; place-items: center; pointer-events: none;
}
.cal-frame.is-ready .cal-wait { display: none; }
.cal-ring { width: 36px; height: 36px; border-radius: 50%; border: 3px solid rgb(var(--text-rgb) / .12); border-top-color: var(--text-mid); }
html.js:not(.reduced) .cal-ring.is-playing { animation: cal-spin .9s linear infinite; }
@keyframes cal-spin { to { transform: rotate(360deg); } }
.cal-frame.is-late .cal-ring { animation: none; }

/* ---------------- the fallback link ----------------
   Only the way through when the calendar is not on screen: script off, the widget late or failed (.is-late), or the
   artifact build's still picture (.is-still). With script, while the widget loads or once it has drawn, it is not shown. */
html.js .cal-stage:not(.is-late):not(.is-still) .cal-open { display: none; }
.cal-open {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: var(--tap);
  margin-top: var(--s-2);
  padding-inline: var(--s-1);
  font-size: var(--fs-small);
  font-weight: var(--w-semi);
}
.cal-open::after {
  content: ""; flex: none; width: 14px; height: 14px;
  background: var(--text-mid);
  -webkit-mask: var(--icon-arrow) center / contain no-repeat;
  mask: var(--icon-arrow) center / contain no-repeat;
  transform: rotate(-45deg);
}
html:not(.js) .cal-open,
.cal-stage.is-late .cal-open,
.cal-stage.is-still .cal-open {
  padding-inline: var(--s-5);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  text-decoration: none;
}
html:not(.reduced) .cal-open { transition: background-color var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out); }

/* ---------------- phones: the heading, frame and link sit a little closer ---------------- */
@media (max-width: 767.98px) {
  .cal-grid { gap: 20px; }
  .cal-head { row-gap: 8px; }
  .cal-frame { margin-top: 4px; }
  .cal-open { margin-top: 2px; }
}

/* ---------------- tablet and up ---------------- */
@media (min-width: 600px) { .sec--calendar { --cal-h: 590px; } }
@media (min-width: 768px) {
  .sec--calendar { --cal-pad: 12px; padding-top: var(--sec-pad); padding-bottom: calc(var(--sec-pad) * .9); }
  .cal-grid { gap: var(--s-6); }
  .cal-frame { margin-top: 0; }
  .cal-open { margin-top: var(--s-3); }
  .cal-head { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--s-5); }
  .cal-who { display: contents; }
  .cal-head .avatar { order: -1; grid-row: 1 / span 2; grid-column: 1; width: 96px; height: 96px; }
  .cal-head h2 { grid-column: 2; align-self: end; }
  .cal-head .cal-line { grid-column: 2; align-self: start; font-size: var(--fs-lead); }
  .cal-stage { max-width: 820px; }
}
@media (min-width: 1024px) {
  .cal-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: var(--s-8); align-items: center; }
  .cal-head { grid-template-columns: minmax(0, 1fr); justify-items: start; row-gap: var(--s-4); }
  .cal-head .avatar { order: -1; grid-row: auto; grid-column: auto; width: 120px; height: 120px; margin-bottom: var(--s-4); }
  .cal-head h2 { grid-column: auto; font-size: calc(var(--fs-h2) * .8); align-self: auto; }
  .cal-head .cal-line { grid-column: auto; align-self: auto; }
  .cal-stage { max-width: none; }
  .sec--calendar .ghost { right: auto; left: calc(var(--gutter) * .5 - .04em); }
}

/* ==== 14-footer.css ==== */
/* 14-footer.css — who made it. Quiet, static, no motion. */
.footer {
  position: relative;
  padding-block: var(--s-8) calc(var(--s-7) + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, var(--bg), var(--bg-soft));
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-snug);
}
.footer::before {
  content: "";
  position: absolute;
  top: -5px;
  left: var(--gutter);
  right: var(--gutter);
  height: 11px;
  max-width: var(--wrap);
  margin-inline: auto;
  background:
    radial-gradient(circle, var(--accent) 0 3px, rgb(var(--accent-rgb) / .35) 3.5px, transparent 9px) center / 22px 11px no-repeat,
    linear-gradient(90deg, transparent, var(--hairline) 16%, var(--hairline) 84%, transparent) center / 100% 1px no-repeat;
}
.footer-in { display: grid; gap: var(--s-6); }
.footer-logo { display: inline-flex; align-items: center; min-height: var(--tap); border-radius: var(--r-xs); }
.footer-logo img { width: auto; height: 20px; }
.footer-mission {
  margin-top: var(--s-3);
  max-width: 30ch;
  font-size: var(--fs-lead);
  font-weight: var(--w-semi);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--text);
}
.footer-meta { display: grid; gap: var(--s-4); }
/* Partners: the one partnership on record, under the same coral mono key as the tool groups (14-footer-002a). */
.footer-partners { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--s-4); row-gap: var(--s-1); }
.footer-partner { display: inline-flex; align-items: center; gap: 10px; color: var(--text-mid); font-weight: var(--w-mid); }
.footer-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px rgb(var(--accent-rgb) / .8); }
/* the tools: a grouped list, text only, never logos. Group names are mono labels, items are plain text, one row per
   group split by hairlines, closing on the one line that matters (11-questions.css prints the same list). */
.footer-tools { max-width: 62ch; }
.footer-label { font-size: var(--fs-small); font-weight: var(--w-semi); color: var(--text-mid); }
.footer-tgs { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: var(--s-5); margin-top: var(--s-2); border-block: 1px solid var(--border); }
.footer-tg {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 5.6rem minmax(0, 1fr);
  grid-template-columns: subgrid;
  align-items: baseline;
  padding-block: 7px;
}
.footer-tg + .footer-tg { border-top: 1px solid var(--hairline); }
.footer-tg-k {
  font-family: var(--font-mono);
  font-size: var(--fs-tag);
  font-weight: var(--w-bold);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}
.footer-tg-v { margin: 0; font-size: var(--fs-small); font-weight: var(--w-mid); line-height: 1.5; color: var(--text-mid); }
.footer-tg-sep { color: var(--text-muted); }
.footer-tools-end { display: flex; align-items: center; gap: 10px; margin-top: var(--s-3); font-weight: var(--w-semi); color: var(--text); }
.footer-tools-end::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px rgb(var(--accent-rgb) / .8); }
.footer-copy { padding-top: var(--s-5); border-top: 1px solid var(--border); font-size: var(--fs-micro); color: var(--text-muted); }
@media (min-width: 1024px) {
  .footer { padding-block: var(--s-9) var(--s-7); }
  .footer-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s-9); row-gap: var(--s-7); align-items: start; }
  .footer-copy { grid-column: 1 / -1; }
}
/* phones: the same three rows, closer together, so the page keeps to its length */
@media (max-width: 767.98px) {
  .footer { padding-block: 40px calc(28px + env(safe-area-inset-bottom)); }
  .footer-in { gap: 20px; }
  .footer-mission { margin-top: 4px; }
  .footer-meta { gap: 16px; }
  .footer-tgs { column-gap: var(--s-4); }
  .footer-tg { padding-block: 6px; }
  .footer-tg-v { font-size: 13.5px; }
  .footer-copy { padding-top: 14px; }
}

/* ==== 15-bottombar.css ==== */
/* 15-bottombar.css — phones only. Appears after the hero button scrolls away; hides while any other main button,
   the calendar or the footer is on screen; sits above the phone's bottom safe area. Hidden without script. */
.bbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-bar);
  padding: 10px 8px calc(10px + env(safe-area-inset-bottom));
  background: rgb(var(--bg-rgb) / .86);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-top: 1px solid var(--border);
  transform: translate3d(0, 110%, 0);
  visibility: hidden;
  transition: transform .35s var(--ease-in), visibility 0s linear .35s;
}
.bbar.is-shown {
  transform: none;
  visibility: visible;
  transition: transform .45s var(--ease-out), visibility 0s;
}
.bbar-in { display: flex; align-items: center; gap: 6px; max-width: 560px; margin-inline: auto; }
.bbar .cta { flex: 1 1 auto; min-width: 0; width: auto; }
.bbar .cta-note, .bbar .cta-talk { display: none; }
.bbar .btn-cta { --cta-h: 50px; width: 100%; min-width: 0; padding: 0 10px; font-size: 16px; letter-spacing: -0.01em; }
.bbar .btn-cta::before, .bbar .btn-cta::after { display: none; }
.bbar-talk { flex: none; min-height: 50px; padding: 0 10px; font-size: 14px; }
html.reduced .bbar, html.reduced .bbar.is-shown { transition: none; }
@media (min-width: 768px) { .bbar { display: none; } }

/* ==== 90-confirm.css ==== */
/* 90-confirm.css — /confirmation, the page people land on right after booking a call (dist/confirmation/index.html).
   Its own page, sharing this stylesheet, the tokens and the components. Every class starts with "confirm-".
   Nothing here touches the homepage: no bare element is styled outside a .confirm-* class. */

/* ---- top: pill, headline, video, the SMS warning ---- */
.confirm-top { padding-top: var(--s-5); }
.confirm-head { text-align: center; }
.confirm-pill {
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  font-size: var(--fs-eyebrow);
  font-weight: var(--w-bold);
}
.confirm-h1 {
  margin-top: var(--s-4);
  font-size: calc(var(--fs-h2) * 1.25);
  line-height: var(--lh-h2);
  color: var(--text);
  text-wrap: balance;
}
.confirm-lead { margin: var(--s-4) auto 0; }
.confirm-media { margin-top: var(--s-6); }
.confirm-video iframe,
.confirm-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.confirm-warn {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-4);
  align-items: start;
  margin-top: var(--s-5);
}
.card.confirm-warn > * + * { margin-top: 0; }
.confirm-warn-ic {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent);
}
.confirm-warn-text { color: var(--text-mid); }

/* ---- prep: the labelled rule, the three steps ---- */
.confirm-rule {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-bottom: var(--s-7);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: var(--w-mid);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.confirm-rule::before,
.confirm-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hairline));
}
.confirm-rule::after { background: linear-gradient(90deg, var(--hairline), transparent); }

.confirm-step { display: flex; flex-direction: column; }
.confirm-step-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.confirm-step-num {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  font-family: var(--font-mono);
  text-transform: uppercase;
  color: var(--accent);
}
.confirm-step-word { font-size: var(--fs-eyebrow); font-weight: var(--w-mid); letter-spacing: var(--track-eyebrow); }
.confirm-step-n { font-size: var(--fs-h2); font-weight: var(--w-bold); line-height: 1; letter-spacing: -0.04em; }
.confirm-step-ic {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent);
}
.card.confirm-step .confirm-tip { margin-top: auto; }
.confirm-step > p:not(.confirm-tip) { margin-bottom: var(--s-4); }
.confirm-tip {
  padding: var(--s-3) var(--s-4);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--r-xs) var(--r-xs) 0;
  background: rgb(var(--accent-rgb) / .06);
  font-size: var(--fs-small);
  line-height: var(--lh-snug);
  color: var(--text-mid);
}
.confirm-tip-label { font-weight: var(--w-bold); color: var(--text); }

/* ---- the flow at a glance: four stops on one line that draws through them ----
   Phones: a column, the line runs down the middle. From 768: a row, the line runs across. */
.confirm-flow { margin-top: var(--s-7); text-align: center; }
.confirm-flow-label {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: var(--w-mid);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}
.confirm-flow-track { position: relative; max-width: 320px; margin: var(--s-4) auto 0; }
.confirm-flow-line {
  position: absolute;
  top: 22px;
  bottom: 22px;
  left: calc(50% - 1px);
  width: 2px;
  background: linear-gradient(180deg, var(--accent-line), var(--accent));
  transform-origin: center top;
  transition: transform var(--dur-line) var(--ease-inout) .15s;
}
.confirm-flow-list { position: relative; display: grid; gap: var(--s-4); }
.confirm-flow-step {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--tap);
  padding: 8px 18px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  background: var(--card);
  font-family: var(--font-mono);
  font-size: var(--fs-chip);
  font-weight: var(--w-mid);
  color: var(--text-mid);
}
.confirm-flow-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px rgb(var(--accent-rgb) / .8);
}
.confirm-flow-step--last {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: var(--w-bold);
  box-shadow: var(--shadow-glow);
}
.confirm-flow-step--last .confirm-flow-dot { background: var(--on-accent); box-shadow: none; }
html.js:not(.reduced) .confirm-flow:not(.is-in) .confirm-flow-line { transform: scaleY(0); }

@media (min-width: 768px) {
  .confirm-flow-track { max-width: none; }
  .confirm-flow-line {
    top: calc(50% - 1px);
    bottom: auto;
    left: 12.5%;
    right: 12.5%;
    width: auto;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-line), var(--accent));
    transform-origin: left center;
  }
  .confirm-flow-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); }
  html.js:not(.reduced) .confirm-flow:not(.is-in) .confirm-flow-line { transform: scaleX(0); }
}

/* ---- close: the promise ---- */
.confirm-band { gap: var(--s-4); }
.confirm-promise {
  max-width: 26ch;
  font-size: var(--fs-lead);
  font-weight: var(--w-bold);
  line-height: var(--lh-snug);
  color: var(--accent);
  text-wrap: balance;
}

@media (min-width: 1024px) {
  .confirm-top { padding-top: var(--s-7); }
  .confirm-warn { padding: var(--card-pad-lg); }
}