/* ═══════════════ TOKENS · Presence v4 (docs/DESIGN_SYSTEM.md is the contract)
   Palette and type are switched by attributes on <html> (the E editor sets them).
   Every size, gap and colour on a slide must come from here. */

:root, :root[data-palette="dawn"]{
  --bg:#FAF1E7; --raised:#FFF9F2; --ink:#2A1F1A; --ink-2:#5E4F46; --ink-3:#786B62;
  --accent:#D9694A; --accent-ink:#B84E33; --accent-2:#56679E; --accent-2-ink:#56679E;
}
:root[data-palette="clay"]{
  --bg:#F1EBE1; --raised:#F9F5EE; --ink:#2A231C; --ink-2:#5B5047; --ink-3:#71685F;
  --accent:#B35C38; --accent-ink:#A4502F; --accent-2:#6F7E44; --accent-2-ink:#5F6E3A;
}
:root[data-palette="linen"]{
  --bg:#F4EFE8; --raised:#FBF8F3; --ink:#1B1816; --ink-2:#554D47; --ink-3:#726A64;
  --accent:#B8625C; --accent-ink:#AB514A; --accent-2:#2E6E76; --accent-2-ink:#2E6E76;
}

/* type pairings: --dw display roles, --hw the h1 headline only */
:root, :root[data-type="sg"]{
  --f-display:'Bricolage Grotesque', system-ui, sans-serif; --f-body:'Geist', system-ui, sans-serif; --f-mono:'Geist Mono', ui-monospace, monospace;
  --dw:460; --hw:460; --dt:-0.035em; --em-style:normal;
}
:root[data-type="calm"]{
  --f-display:'Source Serif 4', Georgia, serif; --f-body:'Source Sans 3', system-ui, sans-serif; --f-mono:'Source Code Pro', ui-monospace, monospace;
  --dw:340; --hw:600; --dt:-0.015em; --em-style:italic;
}
:root[data-type="gentle"]{
  --f-display:'Plus Jakarta Sans', system-ui, sans-serif; --f-body:'Plus Jakarta Sans', system-ui, sans-serif; --f-mono:'JetBrains Mono', ui-monospace, monospace;
  --dw:480; --hw:480; --dt:-0.035em; --em-style:italic;
}

:root{
  --wash:color-mix(in oklab, var(--accent) 9%, var(--bg));
  --wash-2:color-mix(in oklab, var(--accent-2) 9%, var(--bg));
  /* working-assumption marks only (DESIGN_SYSTEM §2): the wash behind an assumed figure, and its tag text (≥ 4.5:1 on the wash) */
  --assume:color-mix(in oklab, #C9962B 22%, var(--bg)); --assume-ink:#7A5A12;
  --line:color-mix(in oklab, var(--ink) 16%, transparent);
  --line-2:color-mix(in oklab, var(--ink) 9%, transparent);
  /* φ type scale: 16 × φⁿ */
  --t-mega:178px; --t-display:110px; --t-h1:68px; --t-h2:42px; --t-lead:33px; --t-body:26px; --t-meta:16px; --t-fine:13px; --t-table:20px;
  /* φ space scale */
  --s1:6px; --s2:10px; --s3:16px; --s4:26px; --s5:42px; --s6:68px; --s7:110px; --s8:178px;
  --ease-out:cubic-bezier(.22,1,.36,1);
  color-scheme:light;
}

/* ═══════════════ BASE · stage, world, slide primitives (shared by every slide) */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);overscroll-behavior:none}   /* no pull-to-refresh, no bounce */
body{color:var(--ink);font-family:var(--f-body);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;
  transition:background .618s var(--ease-out)}
button{font:inherit;color:inherit}

/* the stage is a fixed 1920×1080 canvas, scaled to fit the window (contain) */
/* the stage handles every touch itself (swipes in engine.js): no browser panning, so a swipe can never become
   pull-to-refresh, which reloaded the deck on phones (DA, 2026-10-22). Text on the slides can still be selected and
   copied (DA, 2026-10-16): long press on touch, drag with a mouse. */
.viewport{position:fixed;inset:0;overflow:hidden;touch-action:none}
.hud,.ui button,.slide button,.slide [role="button"],.slide [role="link"] svg{user-select:none;-webkit-user-select:none}   /* controls stay unselectable */
/* full-stage drawing layers (svg.abs, 1920×1080) sit over the text: their empty area lets the mouse through to the
   words underneath (so text can be selected); the shapes they draw keep their own hover and click */
.slide svg.abs{pointer-events:none}
.slide svg.abs *{pointer-events:visiblePainted}
.stage{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;overflow:hidden;background:var(--bg)}
.atmo{position:absolute;left:0;top:0;width:1920px;height:1080px;pointer-events:none}
.grain{position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:multiply;z-index:40;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.world{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0}
.world.flying{will-change:transform}
.overlay{position:absolute;inset:0;pointer-events:none;z-index:30}
.overlay .slide{pointer-events:auto}

/* the golden-spiral thread that links every slide in the world */
.thread{position:absolute;left:0;top:0;width:1px;height:1px;overflow:visible;pointer-events:none}
.thread path{fill:none;stroke:var(--ink-3);stroke-width:1.5;vector-effect:non-scaling-stroke;opacity:.55;stroke-dasharray:2 8}
.thread path.done{stroke:var(--accent);opacity:.85;stroke-dasharray:none}
.thread circle{fill:var(--bg);stroke:var(--ink-3);stroke-width:1.5;vector-effect:non-scaling-stroke}
.thread circle.done{stroke:var(--accent)}
/* the overview: the spiral drawn whole through every slide (the walked part in the accent), the short links between
   neighbours step aside, and each slide sits on the line as a card */
/* (its width is set in world units for the overview's zoom, --ov-sw, and it appears once the zoom-out is nearly done) */
.thread path.spine{stroke:var(--ink-3);stroke-width:var(--ov-sw,60px);vector-effect:none;stroke-linecap:round;stroke-dasharray:none;opacity:0;transition:opacity .236s}
.thread path.spine.done{stroke:var(--accent)}
.overview .thread path.spine{opacity:.55;transition:opacity .618s var(--ease-out) .9s}
.overview .thread path.spine.done{opacity:1}
.overview .thread path:not(.spine),.overview .thread circle{opacity:0;transition:opacity .382s}

/* slides live in the world; only the current one and its neighbours are painted */
.slide{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:50% 50%;color:var(--ink);
  visibility:hidden;opacity:.18;transition:opacity 1s var(--ease-out)}
.slide.near{visibility:visible}
.slide.on{visibility:visible;opacity:1}
.overview .slide{visibility:visible;opacity:1;cursor:pointer;transition:opacity .382s;background:var(--bg);border-radius:42px;
  box-shadow:0 0 0 3px var(--line-2),0 60px 160px -60px color-mix(in oklab,var(--ink) 45%,transparent)}
.overview .slide.on{box-shadow:0 0 0 var(--ov-sw,60px) var(--accent),0 60px 160px -60px color-mix(in oklab,var(--ink) 45%,transparent)}   /* you are here */
.overview .slide:hover{outline:3px solid color-mix(in oklab,var(--accent) 60%,transparent);outline-offset:42px;border-radius:42px}
.slide.loomin{background:var(--bg)}

/* ── slide primitives: every value is a token ── */
.abs{position:absolute}
.top{position:absolute;left:110px;right:110px;top:68px;height:16px;display:flex;justify-content:space-between;align-items:center;
  font-family:var(--f-mono);font-size:var(--t-meta);line-height:1;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.top .sec{display:flex;align-items:center;gap:var(--s3)}
.top .sec::before{content:"";width:10px;height:10px;border-radius:50%;border:1.5px solid var(--accent)}
.hd{font-family:var(--f-display);font-weight:var(--dw);letter-spacing:var(--dt);margin:0;color:var(--ink);text-wrap:balance}
.h-mega{font-size:var(--t-mega);line-height:1}
.h-display{font-size:var(--t-display);line-height:1.02}
.h1{font-size:var(--t-h1);line-height:1.1;font-weight:var(--hw)}
.h2{font-size:var(--t-h2);line-height:1.15}
.ln{display:block;overflow:hidden;padding:.06em 0 .14em;margin:-.06em 0 -.14em}
.ln>span{display:block}
em.hl{font-style:var(--em-style);color:var(--accent-ink)}
.body{font-size:var(--t-body);line-height:1.5;color:var(--ink-2);text-wrap:pretty}
.meta{font-family:var(--f-mono);font-size:var(--t-meta);letter-spacing:.03em;color:var(--ink-3);line-height:1.45}
.meta-u{font-family:var(--f-mono);font-size:var(--t-meta);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);line-height:1.45}
.num{font-family:var(--f-display);font-weight:var(--dw);letter-spacing:var(--dt);font-variant-numeric:tabular-nums lining-nums}
.src-row{position:absolute;left:110px;right:110px;top:968px;line-height:1.4}
.ringphoto{position:absolute;border-radius:50%;overflow:hidden;background:#0b0b0b;isolation:isolate;
  box-shadow:0 42px 110px -42px color-mix(in oklab,var(--ink) 55%,transparent)}
.ringphoto img{width:100%;height:100%;object-fit:cover;display:block}
.orbitline{position:absolute;border-radius:50%;border:1.5px solid var(--line);pointer-events:none}
.orbitline.faint{border-color:var(--line-2)}
svg.abs{overflow:visible}
.ring-base{fill:none;stroke:var(--line);stroke-width:1.5}
.ring-wash{fill:var(--wash)}
.arc{fill:none;stroke:var(--accent);stroke-width:5;stroke-linecap:round;stroke-dasharray:0 1}
.hair{fill:none;stroke:var(--line);stroke-width:1.5}
.draw{stroke-dasharray:1;stroke-dashoffset:0}
.slide-pending{position:absolute;left:110px;top:152px;width:1400px;display:grid;gap:26px}

/* HUD: the progress thread (chrome, not content) */
.hud{position:absolute;left:110px;right:110px;bottom:28px;height:26px;z-index:35}
.hud .base{position:absolute;left:0;right:0;top:12px;height:1.5px;background:var(--line-2)}
.hud .prog{position:absolute;left:0;top:12px;height:1.5px;background:var(--accent);width:0;transition:width .618s var(--ease-out)}
.hud button{position:absolute;top:13px;width:26px;height:26px;margin:-13px 0 0 -13px;border:0;background:transparent;cursor:pointer;padding:0}
.hud button::after{content:"";position:absolute;left:8px;top:8px;width:10px;height:10px;border-radius:50%;background:var(--bg);border:1.5px solid var(--ink-3);transition:all .382s}
.hud button.sec::after{width:14px;height:14px;left:6px;top:6px}
.hud button.done::after{border-color:var(--accent)}
.hud button.cur::after{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 6px color-mix(in oklab,var(--accent) 18%,transparent)}

@media (prefers-reduced-motion: reduce){ .slide{transition:none} }
.static .slide{transition:none}   /* ?static (QA screenshots) */
/* phones and tablets: the 5% paper grain is blended over the whole stage, which forces every frame of a camera move to be
   re-composited; it is invisible at phone size, so it goes */
@media (pointer:coarse){ .grain{display:none} }
/* phones and tablets: memory. The spiral thread is one drawing across the whole world (≈22,000 px square): whenever a
   slide faded in over it, the browser gave it its own layer, which at phone pixel density broke Safari's memory limit
   and the page was killed and reloaded (DA's iPhone, slides 9 and 16–17, 2026-10-26). Phones never see it outside the
   overview, and they never fly between slides, so the thread and the neighbouring slides are not drawn at all. */
@media (pointer:coarse){
  .thread{display:none}
  .overview .thread{display:block}
  .slide.near:not(.on){visibility:hidden}
  .overview .slide{visibility:visible}
}
/* phones and tablets: taps and swipes navigate, so no text selection, magnifier or callout can pop up (DA, 2026-10-26) */
@media (pointer:coarse){ .viewport,.viewport *{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none} }

/* ── scroll view (?read): stacked slides, native page scroll */
html.read, html.read body{height:auto;overflow-x:hidden;overflow-y:auto}
.read .viewport{position:static;overflow:visible;touch-action:auto;user-select:auto;-webkit-user-select:auto}
.read .stage{position:static;transform:none !important;width:auto;height:auto;overflow:visible;background:none}
.read .world{position:static;transform:none !important;width:auto;height:auto}
.read .thread,.read .atmo,.read .hud,.read .grain,.read .overlay{display:none}
.read .frame{position:relative;width:100%;overflow:hidden;border-bottom:1px solid var(--line-2)}
.read .slide{visibility:visible;opacity:1;transform-origin:0 0;transition:none}

/* ═══════════════ CHROME · UI that sits outside the stage (page coordinates, responsive) */
.ui{position:fixed;inset:0;pointer-events:none;z-index:50;font-family:var(--f-body);color:var(--ink)}
.ui > *{pointer-events:auto}

/* auto-hiding control cluster (mouse move / touch shows it). Top centre: clear of the slide-hop thread along the
   bottom, the kicker (top left), the slide number (top right) and the panels (top right) */
.ctl{position:fixed;left:50%;top:16px;display:flex;gap:6px;padding:6px;border-radius:999px;
  background:color-mix(in oklab,var(--raised) 88%,transparent);box-shadow:0 0 0 1px var(--line-2),0 16px 42px -26px color-mix(in oklab,var(--ink) 50%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;transform:translate(-50%,-10px);transition:opacity .382s,transform .382s var(--ease-out)}
.ctl.show{opacity:1;transform:translate(-50%,0)}
.ui .ctl:not(.show){pointer-events:none}   /* hidden, it never blocks what is under it */
.ctl button{appearance:none;border:0;background:transparent;width:42px;height:42px;border-radius:50%;cursor:pointer;font-size:17px;color:var(--ink-2);
  display:grid;place-items:center;transition:background .236s,color .236s}
.ctl button:hover{background:var(--wash);color:var(--ink)}
.ctl .count{font:500 12px var(--f-mono);letter-spacing:.12em;color:var(--ink-3);display:grid;place-items:center;padding:0 10px}

/* panels: help + style editor */
.panel{position:fixed;right:16px;top:16px;width:min(380px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto;border-radius:18px;padding:26px;
  background:var(--raised);box-shadow:0 0 0 1px var(--line-2),0 26px 68px -26px color-mix(in oklab,var(--ink) 55%,transparent);
  opacity:0;transform:translateY(-10px) scale(.98);pointer-events:none;transition:opacity .382s,transform .382s var(--ease-out)}
.panel.show{opacity:1;transform:none;pointer-events:auto}
.panel h3{font-family:var(--f-display);font-weight:var(--dw);letter-spacing:var(--dt);font-size:24px;margin:0 0 4px}
.panel p{margin:0 0 16px;color:var(--ink-2);font-size:14px;line-height:1.55}
.panel .lbl{font:500 11px var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin:16px 0 8px}
.panel .chips{display:flex;flex-wrap:wrap;gap:6px}
.panel .chip{appearance:none;border:1px solid var(--line);background:transparent;border-radius:999px;padding:8px 14px;font-size:13px;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;color:var(--ink-2);transition:all .236s}
.panel .chip:hover{border-color:color-mix(in oklab,var(--ink) 40%,transparent);color:var(--ink)}
.panel .chip[aria-pressed="true"]{border-color:var(--accent);color:var(--ink);background:var(--wash)}
.panel .sw{display:inline-flex}
.panel .sw i{width:13px;height:13px;border-radius:50%;margin-left:-4px;box-shadow:0 0 0 1.5px var(--raised),inset 0 0 0 1px rgba(0,0,0,.08)}
.panel .sw i:first-child{margin-left:0}
.panel .x{position:absolute;right:14px;top:14px;appearance:none;border:0;background:transparent;width:32px;height:32px;border-radius:50%;cursor:pointer;color:var(--ink-3);font-size:18px}
.panel .x:hover{background:var(--wash);color:var(--ink)}
.keys{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:14px;color:var(--ink-2);align-items:baseline}
.keys kbd{font:500 12px var(--f-mono);border:1px solid var(--line);border-radius:6px;padding:2px 7px;color:var(--ink);white-space:nowrap}

/* portrait-phone hint (phones held upright): the stage still works, the hint suggests rotating */
.rotate{position:fixed;left:16px;right:16px;bottom:16px;border-radius:18px;padding:16px 16px 16px 20px;display:flex;gap:16px;align-items:center;
  background:var(--raised);box-shadow:0 0 0 1px var(--line-2),0 16px 42px -26px color-mix(in oklab,var(--ink) 50%,transparent);
  font-size:14px;line-height:1.45;color:var(--ink-2);opacity:0;transform:translateY(16px);pointer-events:none;transition:all .382s var(--ease-out)}
.rotate.show{opacity:1;transform:none;pointer-events:auto}
.rotate b{color:var(--ink);font-weight:600}
.rotate .ic{font-size:26px;color:var(--accent-ink);flex:none;animation:tilt 2.6s var(--ease-out) infinite}
.rotate button{margin-left:auto;appearance:none;border:1px solid var(--line);background:transparent;border-radius:999px;padding:8px 14px;font-size:13px;cursor:pointer;flex:none}
@keyframes tilt{0%,40%{transform:rotate(0)}60%,100%{transform:rotate(-90deg)}}

.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);background:var(--ink);color:var(--bg);padding:12px 18px;border-radius:14px;
  font-size:13px;line-height:1.5;opacity:0;pointer-events:none;transition:all .382s var(--ease-out);max-width:min(560px,90vw)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* the phone/tablet first-visit hint (chrome.js): one quiet line just above the timeline */
.hint{position:absolute;left:50%;bottom:calc(14% + env(safe-area-inset-bottom));transform:translate(-50%,8px);padding:9px 16px;border-radius:999px;
  background:color-mix(in oklab,var(--raised) 92%,transparent);box-shadow:0 0 0 1px var(--line-2),0 10px 30px -18px color-mix(in oklab,var(--ink) 45%,transparent);
  font-size:13px;line-height:1.3;color:var(--ink-2);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .618s var(--ease-out),transform .618s var(--ease-out)}
.hint.show{opacity:1;transform:translate(-50%,0)}
.hint b{color:var(--ink);font-weight:600}
.hint span{color:var(--ink-3);margin:0 4px}
/* the by-hand turn button (chrome.js), top left of the turned deck: only when the deck was turned sideways by hand */
.turn{position:fixed;left:12px;top:12px;width:36px;height:36px;padding:0;border-radius:50%;appearance:none;border:1px solid var(--line-2);
  background:color-mix(in oklab,var(--raised) 85%,transparent);color:var(--ink-2);display:none;place-items:center}
.turn.show{display:grid}
.turn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion: reduce){ .rotate .ic{animation:none} }
/* phones and tablets: no overview button. The overview draws the whole spiral world at once (≈22,000 px square); it is
   safe on a laptop, but one world-sized layer is what was killing iPhone Safari (2026-10-26). The dots still jump. */
@media (pointer:coarse){ .ctl [data-a="ov"]{display:none} }

/* ── 01-statement ── */
#s-statement .field{left:0;top:0;width:1920px;height:1080px;pointer-events:none}
#s-statement .nucleus{left:960px;top:470px;width:754px;height:754px;margin:-377px 0 0 -377px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in oklab,var(--accent) 14%,transparent) 0,color-mix(in oklab,var(--accent) 5%,transparent) 46%,transparent 100%)}
#s-statement .cc{left:727px;top:237px;pointer-events:none;width:466px;height:466px;display:grid;place-items:center}
/* option B: the real CC (transparent cut-out) in place of the line drawing, with a soft contact shadow */
#s-statement .photo{height:380px;width:auto;display:block;filter:drop-shadow(0 26px 26px color-mix(in oklab,var(--ink) 18%,transparent))}
#s-statement .grp{left:0;top:0;width:0;height:0}
#s-statement .word{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;letter-spacing:.04em;animation:s01bfloat 7s ease-in-out infinite alternate}
#s-statement .word:nth-child(odd){animation-duration:8.5s;animation-delay:-3s}
#s-statement .grp.l .word{color:var(--accent-2-ink)}
#s-statement .grp.r .word{color:var(--accent-ink)}
#s-statement .name{position:absolute;transform:translate(-50%,-50%);white-space:nowrap}
#s-statement .grp.l .name{color:var(--accent-2-ink)}
#s-statement .grp.r .name{color:var(--accent-ink)}
#s-statement .stmt,#s-statement .byline,#s-statement .foot{text-align:center}
#s-statement .byline{color:var(--ink-2);font-style:var(--em-style)}
@keyframes s01bfloat{from{margin-top:-5px}to{margin-top:5px}}
@media (prefers-reduced-motion: reduce){ #s-statement .word{animation:none} }
#s-statement .mark{display:flex;justify-content:center}
#s-statement .mark span{display:inline-flex;align-items:center;letter-spacing:.32em;color:var(--ink-2);padding-left:.32em}

/* ── 02-cc-intro-stack ── */
/* CC introduced. Right: CC large (700 tall, centred x 1548, y 560) on a soft accent glow; left (110–1250): the name (two lines) at h1 68
   and what it is (26), centred together on CC's centre line.
   Under them, CARA's card, quieter than CC: two columns like the business-model card (CARA in pink 42 over its full
   name 16 | a two-line description 20).
   Beneath it, three fainter cards stacked narrower and lower: CARA is the first of several applications.
   φ type: 68 name · 42 CARA · 26 subhead · 20 description · 16 full name. */
#s-cc-intro-stack .glow{left:1548px;top:560px;width:900px;height:900px;margin:-450px 0 0 -450px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in oklab,var(--accent) 16%,transparent) 0,color-mix(in oklab,var(--accent) 5%,transparent) 50%,transparent 100%)}
#s-cc-intro-stack .ccimg{left:1285px;top:210px;height:700px;width:auto;transform-origin:50% 50%;filter:drop-shadow(0 34px 34px color-mix(in oklab,var(--ink) 18%,transparent))}
#s-cc-intro-stack .nm{left:110px;width:1140px;white-space:nowrap;font-size:var(--t-h1);line-height:1.1;font-weight:var(--hw);letter-spacing:var(--dt);color:var(--ink)}   /* h1 68 for this slide (the two-line name at 110 crowded the day row and card) */
#s-cc-intro-stack .nm.fit{font-size:var(--t-h1)}   /* a pairing too wide for one line at 110 steps down the φ scale */
#s-cc-intro-stack .sub{left:110px;width:1140px;color:var(--ink-2);text-wrap:pretty}
#s-cc-intro-stack .cara{z-index:2;left:110px;width:1140px;box-sizing:border-box;padding:var(--s4) var(--s5);background:var(--raised);border-radius:26px;
  display:grid;grid-template-columns:auto 1fr;column-gap:var(--s5);align-items:center;
  box-shadow:0 1px 0 var(--line-2),0 42px 68px -42px color-mix(in oklab,var(--ink) 30%,transparent)}
#s-cc-intro-stack .cara .cnm{font-size:var(--t-h2);line-height:1;color:var(--accent-ink)}   /* pink, like CC */
#s-cc-intro-stack .cara .cfull{margin-top:var(--s2);font-family:var(--f-body);font-size:var(--t-meta);font-weight:600;line-height:1.4;color:var(--ink);white-space:nowrap}
#s-cc-intro-stack .cara .cd{padding-left:var(--s5);border-left:1.5px solid var(--line-2);font-family:var(--f-body);font-size:var(--t-table);line-height:1.5;color:var(--ink-2);text-wrap:pretty}
/* the stack under CARA: same card, each one 22 lower, 42 narrower a side and fainter, so CARA reads as the first of several */
#s-cc-intro-stack .ghost{z-index:1;box-sizing:border-box;border-radius:26px;border:1.5px solid var(--line-2);
  background:color-mix(in oklab,var(--raised) 70%,var(--bg));box-shadow:0 18px 30px -24px color-mix(in oklab,var(--ink) 32%,transparent)}
#s-cc-intro-stack .cara .cl{margin-top:var(--s2);color:var(--ink-3)}   /* the second line in the source (mono) face */
/* a day with CC: four moments in a row, each a small accent label over a line or two (20) */
#s-cc-intro-stack .day{left:110px;width:1140px;display:grid;grid-template-columns:252fr 248fr 249fr 273fr;column-gap:var(--s3)}   /* columns sized to their text, so each sits on two lines in every pairing */
#s-cc-intro-stack .dy{padding-left:var(--s2);border-left:1.5px solid color-mix(in oklab,var(--accent) 45%,transparent)}
#s-cc-intro-stack .dw{color:var(--accent-ink)}
#s-cc-intro-stack .dt{margin-top:var(--s2);font-family:var(--f-body);font-size:var(--t-table);line-height:1.4;color:var(--ink-2);text-wrap:pretty}

/* ── 03-fact-frame-c ── */
/* Fact frame, building-list version. The credits list (labels 16 right of a spine, facts 42, sources 13) builds in
   place; the newest fact shows at 1.15× (from its top-left, into the empty space below), the earlier ones settle
   to size and dim. The label column is 330 so the enlarged fact (1100 × 1.15) stays inside the safe area. */
#s-fact-frame-c .ledger{left:110px;top:0;width:1498px;height:1080px;padding-bottom:42px;display:flex;flex-direction:column;justify-content:center;
  gap:var(--s6);pointer-events:none}
#s-fact-frame-c .row{position:relative;display:grid;grid-template-columns:330px 1100px;column-gap:68px;align-items:start}
#s-fact-frame-c .lk{color:var(--accent-ink);text-align:right;padding-top:14px}
#s-fact-frame-c .spine{position:absolute;left:363px;width:1.5px;top:0;height:0;background:var(--line)}
#s-fact-frame-c .nd{transition:background .382s;position:absolute;left:357px;top:17px;width:13px;height:13px;border-radius:50%;box-sizing:border-box;background:var(--bg);border:1.5px solid var(--accent)}
#s-fact-frame-c .it+.it{margin-top:var(--s5)}
#s-fact-frame-c .tx{font-family:var(--f-display);font-weight:var(--dw);letter-spacing:var(--dt);font-size:var(--t-h2);line-height:1.15;color:var(--ink);text-wrap:pretty}
#s-fact-frame-c .sr{margin-top:var(--s2);font-family:var(--f-mono);font-size:var(--t-fine);letter-spacing:.02em;line-height:1.45;color:var(--ink-3)}
#s-fact-frame-c .it{visibility:hidden;transform-origin:0 0;pointer-events:auto}
#s-fact-frame-c .it.past{cursor:pointer;transition:opacity .25s}
#s-fact-frame-c .it.past:hover{opacity:.62 !important}
#s-fact-frame-c .lk{visibility:hidden}
#s-fact-frame-c .nd.on{background:var(--accent)}
#s-fact-frame-c .md{position:absolute;left:359px;width:10px;height:10px;border-radius:50%;box-sizing:border-box;background:var(--bg);border:1.5px solid var(--accent);transition:background .382s}
#s-fact-frame-c .md.on{background:var(--accent)}

/* ── 04-problem-both-c ── */
/* The problem, and both halves of the answer (loop version, with section boxes). φ type: 68 headline · 42 the highlight · 33 the two
   card headings (Lead) · 16 card lines, visit and signal labels · 13 silence. Grey for the unseen, rose for a
   visit, green (accent-2) for CC's continuous monitoring. Centred on the slide's axis (x 960). */
#s-problem-both-c{--cc:var(--accent-2)}
#s-problem-both-c .quote .ln:first-child>span::before{content:"\201C"}
#s-problem-both-c .quote .ln:last-child>span::after{content:"\201D"}
#s-problem-both-c svg.tl,#s-problem-both-c svg.links{left:0;top:0;width:1920px;height:1080px;overflow:visible}
#s-problem-both-c .base{fill:none;stroke:var(--ink-3);stroke-width:2;stroke-dasharray:2 10;stroke-linecap:round;opacity:.7}
#s-problem-both-c .wave{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
#s-problem-both-c .wave.grey{stroke:var(--ink-3);opacity:.45}
#s-problem-both-c .wave.visit{stroke:var(--accent);opacity:0}
#s-problem-both-c .wave.cc{stroke:var(--cc);opacity:0}
#s-problem-both-c .bx{opacity:0}
#s-problem-both-c .bx.vis{fill:color-mix(in oklab,var(--accent) 12%,var(--bg))}
#s-problem-both-c .bx.sil{fill:color-mix(in oklab,var(--ink) 5%,var(--bg))}
#s-problem-both-c .bx.mon{fill:color-mix(in oklab,var(--cc) 11%,var(--bg))}
/* section labels: the body face, bold, inside the top of each box */
#s-problem-both-c .lb{top:350px;transform:translateX(-50%);font:600 var(--t-meta)/1 var(--f-body);white-space:nowrap;opacity:0}
#s-problem-both-c .vl{color:var(--accent-ink)}
#s-problem-both-c .sl{color:var(--ink-3)}
#s-problem-both-c .cont{left:960px;color:var(--cc)}
#s-problem-both-c .both{left:110px;right:110px;top:552px;text-align:center;color:var(--ink)}
#s-problem-both-c .ccimg{left:880px;top:622px;height:290px;width:auto;filter:drop-shadow(0 22px 24px color-mix(in oklab,var(--ink) 20%,transparent))}
#s-problem-both-c .lk{fill:none;stroke:var(--line);stroke-width:1.5;stroke-dasharray:2 6;stroke-linecap:round}
#s-problem-both-c .side{top:690px;width:520px;height:140px;box-sizing:border-box;padding:0 var(--s4);display:flex;align-items:center;gap:var(--s4);
  border-radius:26px;background:var(--raised);box-shadow:0 1px 0 var(--line-2),0 26px 42px -32px color-mix(in oklab,var(--ink) 30%,transparent);transition:box-shadow .8s}
#s-problem-both-c .side.left{left:270px;--k:var(--accent)}
#s-problem-both-c .side.right{left:1130px;--k:var(--cc)}
#s-problem-both-c .h{white-space:nowrap}
#s-problem-both-c .ic{flex:none;width:68px;height:68px;border-radius:50%;display:grid;place-items:center;color:var(--k);
  background:color-mix(in oklab,var(--k) 12%,var(--raised))}
#s-problem-both-c .ic svg{width:32px;height:32px}
#s-problem-both-c .h{font-family:var(--f-body);font-size:var(--t-lead);font-weight:600;line-height:1.15;color:var(--ink)}
#s-problem-both-c .s{margin-top:var(--s1);font-family:var(--f-body);font-size:var(--t-meta);color:var(--ink-3)}
/* each card outlined in its own colour, steady */
#s-problem-both-c .side{border:1.5px solid color-mix(in oklab,var(--k) 55%,transparent)}

/* ── 05-aivita ── */
/* AIVITA. The deck's own grammar: kicker, headline (68), subhead (26). Below, a φ split of the safe area: the two
   cancers (110 → 1100) as two aligned rows under a hairline split, name (42) + what it is (20) |
   figure (68, rose, its box trimmed to the digits) + its line (20) + a white tag, the two stacks centred on each other, a rose rule between; the one raised card (1182 → 1810, as Business architecture's) for
   what slows their trials, closing on the partnership.
   φ type: 68 headline, figures · 42 cancer names · 33 card title · 26 subhead · 20 lines · 16 labels, tags. */
#s-aivita .sub{left:110px;top:253px;width:1500px;color:var(--ink-2);text-wrap:balance}
#s-aivita .pf{left:110px;width:990px;display:grid;grid-template-columns:510px 1fr;column-gap:var(--s5);align-items:center}   /* cancer | its figure, two stacks centred on each other (DA) */
#s-aivita .sx{padding-left:var(--s5);border-left:2px solid color-mix(in oklab,var(--accent) 45%,transparent)}   /* the figure tied to its cancer: a rose rule between them (DA) */
#s-aivita .wh{margin-top:var(--s3);font-family:var(--f-body);font-size:var(--t-table);line-height:1.45;color:var(--ink)}
#s-aivita .mr{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s3)}
#s-aivita .sep{fill:none;stroke:var(--line);stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:0}
#s-aivita .fg{font-size:var(--t-h1);line-height:.8;color:var(--accent-ink)}
#s-aivita .pn{font-family:var(--f-display);font-weight:var(--dw);letter-spacing:var(--dt);font-size:var(--t-h2);line-height:1.1;color:var(--ink)}
#s-aivita .ps2{color:var(--ink-3)}   /* the programme, under its cancer (DA) */
#s-aivita .tg{display:inline-block;margin-top:var(--s3);padding:3px var(--s3);border-radius:20px;color:var(--accent-ink);background:var(--raised);
  box-shadow:0 0 0 1.5px color-mix(in oklab,var(--accent) 55%,transparent),0 10px 26px -18px color-mix(in oklab,var(--ink) 30%,transparent)}   /* white pill, rose text (DA) */
#s-aivita .pt{margin-top:var(--s3);max-width:380px;font-family:var(--f-body);font-size:var(--t-table);line-height:1.45;color:var(--ink-2);text-wrap:balance}
#s-aivita .card{left:1182px;width:628px;box-sizing:border-box;padding:var(--s5);background:var(--raised);border-radius:26px;
  display:flex;flex-direction:column;
  box-shadow:0 1px 0 var(--line-2),0 42px 68px -42px color-mix(in oklab,var(--ink) 38%,transparent)}
#s-aivita .cl{color:var(--ink-3)}
#s-aivita .ct{margin-top:var(--s3);font-family:var(--f-display);font-weight:var(--dw);letter-spacing:var(--dt);font-size:var(--t-lead);line-height:1.2;color:var(--ink);text-wrap:balance}
#s-aivita .ps{margin-top:var(--s4)}
#s-aivita .p{position:relative;padding-left:var(--s4);margin-top:var(--s2);font-family:var(--f-body);font-size:var(--t-table);line-height:1.45;color:var(--ink)}
#s-aivita .p i{position:absolute;left:0;top:.55em;width:9px;height:9px;border-radius:50%;border:1.5px solid var(--ink-3);box-sizing:border-box}
#s-aivita .dl{margin-top:auto;padding-top:var(--s4);border-top:1.5px solid var(--line-2)}
#s-aivita .dlb{color:var(--accent-ink)}   /* the source-row style: mono caps, rose (DA) */
#s-aivita .dv{margin-top:var(--s2);font-family:var(--f-body);font-size:var(--t-table);font-weight:400;text-wrap:pretty;line-height:1.45;color:var(--ink)}

/* ── 06-why-now-watch ── */
/* Why now, copy C (DA review of slide 6): the original headline over one matrix, no subhead, no source row, no atmosphere.
   Columns: the index (x 110, 220 wide) names each row in Fine 13 capitals; the three phases (x 372 / 865 / 1358, 451
   wide, 42 apart) carry everything else. Rows, top-down from 68 under the headline:
   the phase names (Lead 33 on one baseline; CARA's warms to the accent) with their line 10 under (meta 16)
   → 42 → the curve band (its index: how closely the patient is watched), sized so the content ends at 926
   → the approval milestone: the dashed line between the first two phases ends in a pin, its label 16 under it, centred
   → 42 → the ledger: three rows on hairlines (110–1810), 16 inside each, 26 between them; index left, cells (Table 20).
   φ type: 68 headline · 33 phase names · 20 cells · 16 phase lines, approval · 13 index. */
#s-why-now-watch svg.dg{left:0;top:0;width:1920px;height:1080px;overflow:visible}
#s-why-now-watch .ph{width:451px}
#s-why-now-watch .pn{font-family:var(--f-body);font-size:var(--t-lead);line-height:1.2;color:var(--ink);white-space:nowrap}
#s-why-now-watch .pl{margin-top:var(--s2);color:var(--ink-2)}
/* the index: one quiet voice for every row name, so it never competes with the cells */
#s-why-now-watch .ix{width:220px;font-family:var(--f-mono);font-size:var(--t-fine);letter-spacing:.16em;text-transform:uppercase;
  line-height:1.6;color:var(--ink-2)}
#s-why-now-watch .axl{left:110px}
#s-why-now-watch .c0,#s-why-now-watch .c1,#s-why-now-watch .c2{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
#s-why-now-watch .c0{stroke:var(--accent-2)}
#s-why-now-watch .c1{stroke:var(--ink-3)}
#s-why-now-watch .c2{stroke:var(--accent);stroke-width:5}
#s-why-now-watch .apl{fill:none;stroke:var(--ink-3);stroke-width:1.5;stroke-dasharray:6 6}
#s-why-now-watch .pin{fill:var(--bg);stroke:var(--ink-2);stroke-width:2}
#s-why-now-watch .apt{white-space:nowrap;color:var(--ink-2);transform:translateX(-50%)}
#s-why-now-watch .rules line{stroke:var(--line);stroke-width:1.5}
#s-why-now-watch .rw{left:110px;width:1700px;display:grid;grid-template-columns:220px repeat(3,451px);column-gap:var(--s5);align-items:start}
#s-why-now-watch .rt{padding-top:3px}   /* the index's capitals sit on the cells' first line */
#s-why-now-watch .cel{font-size:var(--t-table);line-height:1.4;color:var(--ink-2);text-wrap:pretty}
#s-why-now-watch .rw .cel:last-child{color:var(--ink)}
/* build start states (LEARNINGS 12) */
#s-why-now-watch .ph,#s-why-now-watch .axl,#s-why-now-watch .apl,#s-why-now-watch .pin,#s-why-now-watch .apt,
#s-why-now-watch .rules,#s-why-now-watch .rt,#s-why-now-watch .cel{opacity:0}
#s-why-now-watch .c0,#s-why-now-watch .c1,#s-why-now-watch .c2{stroke-dashoffset:1}

/* ── 07-solution ── */
/* The solution. Option B: a larger 570 photo ring (cx 960, cy 710) as the hero, reaching into the empty source-row zone (no pull
   line, no source on this slide); the three heads sit 68 under the headline, the ring 26 under them; the companion's qualities fan out
   on the left (accent), the intelligence's on the right (accent-2), each tied to the ring by a radial tick + dot.
   Type on the φ scale: 26 mono small-caps heads (the meta voice, one φ step under the 42/68 headline scale) · 26 quality names · 16 descriptors. */
#s-solution .ph{left:675px;top:425px;width:570px;height:570px}
/* the whole square photo sits in the ring (zoomed out), so both faces and all of CC are visible */
#s-solution .ph img{width:100%;height:100%;max-width:none;margin:0;object-fit:cover;object-position:50% 50%}
#s-solution .arcl,#s-solution .arcr{fill:none;stroke-width:5;stroke-linecap:butt;stroke-dasharray:1;stroke-dashoffset:0}
#s-solution .arcl{stroke:var(--accent)} #s-solution .arcr{stroke:var(--accent-2)}
#s-solution .tick{stroke:var(--line);stroke-width:1.5}
#s-solution .dot.l{fill:var(--accent)} #s-solution .dot.r{fill:var(--accent-2)}
#s-solution .head{top:368px;font-family:var(--f-mono);font-size:var(--t-body);letter-spacing:.08em;text-transform:uppercase;line-height:1.2;white-space:nowrap}
#s-solution .core{left:735px;width:450px;text-align:center;color:var(--ink);padding-left:.08em}
#s-solution .ttl.l{left:110px;width:585px;text-align:right;color:var(--accent-ink)}
#s-solution .ttl.r{left:1225px;width:585px;color:var(--accent-2-ink)}
#s-solution .it{transform:translateY(-50%)}
#s-solution .it.l{text-align:right}
#s-solution .nm{line-height:1.2;white-space:nowrap}
#s-solution .it.l .nm,#s-solution .it.r .nm{color:var(--ink-2)}   /* the points in the description tone, so the two titles lead */
#s-solution .ln2{font-family:var(--f-body);font-size:var(--t-meta);color:var(--ink-2);margin-top:var(--s1)}

/* ── 08-signals ── */
/* What it senses (from Aswin page 09, rebuilt in Presence v4). A rail of six signal families (A–F), the selected
   family's illustrative chart in a card on the left, what it measures and its CC / CARA indications on the right.
   φ type: 68 headline · 26 subhead, rail letters · 20 indication points (Table half-step) · 16 family names,
   labels, footnote · 13 sensor tags, chart labels.
   Colour: the signal line accent-2 with its personal-baseline band; deviations from baseline accent; secondary
   series ink-3. CC = accent, CARA = accent-2, as everywhere in the deck. */
#s-signals .sub{left:110px;top:253px;width:1400px;color:var(--ink-2)}
#s-signals .rail{left:110px;top:334px;width:1700px;display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s3)}
#s-signals .fc{appearance:none;font:inherit;color:inherit;cursor:pointer;text-align:left;position:relative;height:76px;box-sizing:border-box;
  display:flex;align-items:center;gap:var(--s3);padding:0 var(--s3);border:0;border-radius:16px;background:var(--raised);
  box-shadow:0 1px 0 var(--line-2);opacity:.55;transition:opacity .382s,box-shadow .382s}
#s-signals .fc::after{content:"";position:absolute;left:var(--s3);right:var(--s3);bottom:0;height:3px;border-radius:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
#s-signals .fc.on{opacity:1;box-shadow:0 1px 0 var(--line-2),0 26px 42px -26px color-mix(in oklab,var(--ink) 34%,transparent)}
#s-signals .fc.on::after{transform:scaleX(1)}
#s-signals .lt{font-family:var(--f-display);font-weight:var(--dw);font-size:var(--t-body);line-height:1;color:var(--accent-ink);flex:none;width:20px}
#s-signals .fx{display:flex;flex-direction:column;gap:var(--s1);min-width:0}
#s-signals .fn{font-family:var(--f-body);font-weight:500;font-size:var(--t-meta);line-height:1.2;color:var(--ink);white-space:nowrap}
#s-signals .fm{display:flex;align-items:center;gap:var(--s1);white-space:nowrap}
#s-signals .ft{font-family:var(--f-mono);font-size:var(--t-fine);letter-spacing:.02em;color:var(--ink-3);margin-right:var(--s1)}
#s-signals .tr{display:inline-block;width:10px;height:10px;border-radius:50%;box-sizing:border-box;flex:none}
#s-signals .tr.shipped{background:var(--accent)}
#s-signals .tr.build{border:2px solid var(--accent)}
#s-signals .tr.gated{border:1.5px dashed var(--ink-3)}
#s-signals .vc{left:110px;top:452px;width:980px;height:458px;box-sizing:border-box;padding:var(--s5);background:var(--raised);border-radius:26px;
  box-shadow:0 1px 0 var(--line-2),0 42px 68px -42px color-mix(in oklab,var(--ink) 38%,transparent);display:flex;flex-direction:column}
#s-signals .vh{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4)}
#s-signals .vl,#s-signals .cl{font-family:var(--f-mono);font-size:var(--t-fine);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
#s-signals .il{font-size:var(--t-fine);color:var(--ink-3);flex:none}
#s-signals .vz{position:relative;flex:1;margin-top:var(--s4);min-height:0;display:flex;flex-direction:column;gap:var(--s3)}
#s-signals .vz svg{display:block;width:100%;flex:1;min-height:0;overflow:visible}
#s-signals .vz .note{font-family:var(--f-body);font-size:var(--t-meta);color:var(--ink-2)}
#s-signals .vz .band{fill:var(--accent-2);opacity:.1}
#s-signals .vz .mean{stroke:var(--accent-2);stroke-width:1;stroke-dasharray:4 4;opacity:.5;fill:none}
#s-signals .vz .ln{fill:none;stroke:var(--accent-2);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
#s-signals .vz .ln.b{stroke:var(--ink-3)}
#s-signals .vz .dev{fill:var(--accent)}
#s-signals .vz .grid{stroke:var(--line-2);stroke-width:1}
#s-signals .vz .ax{font-family:var(--f-mono);font-size:13px;fill:var(--ink-3)}
#s-signals .vz .cl2{margin-top:var(--s2)}
#s-signals .vz .bars{flex:1;display:flex;flex-direction:column;justify-content:center;gap:var(--s5)}
#s-signals .vz .br{display:flex;align-items:center;gap:var(--s4)}
#s-signals .vz .bl{flex:0 0 240px;text-align:right;font-family:var(--f-mono);font-size:var(--t-fine);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
#s-signals .vz .tk{display:block;flex:1;height:16px;border-radius:8px;background:var(--line-2);overflow:hidden}
#s-signals .vz .bf{display:block;height:100%;width:0;border-radius:8px;background:var(--accent-2)}
#s-signals .vz .bf.b{background:var(--ink-3)}
#s-signals .vz .bv{flex:0 0 56px;font-family:var(--f-mono);font-size:var(--t-meta);color:var(--accent-2-ink);font-variant-numeric:tabular-nums}
#s-signals .vz .keys{display:flex;gap:var(--s5);font-family:var(--f-mono);font-size:var(--t-fine);color:var(--ink-3)}
#s-signals .vz .keys i{display:inline-block;vertical-align:middle;margin-right:var(--s2)}
#s-signals .vz .keys i.l{width:22px;height:3px;border-radius:2px;background:var(--accent-2)}
#s-signals .vz .keys i.r{width:10px;height:10px;border-radius:50%;border:2px solid var(--ink)}
#s-signals .vz .cdot{fill:var(--raised);stroke:var(--ink);stroke-width:2}
#s-signals .ind{left:1148px;top:452px;width:662px}
#s-signals .blk+.blk{margin-top:var(--s4)}
#s-signals .k{line-height:1}
#s-signals .blk.m .k{color:var(--ink)} #s-signals .blk.e .k{color:var(--accent-ink)} #s-signals .blk.o .k{color:var(--accent-2-ink)}
#s-signals .blk ul{list-style:none;margin:var(--s3) 0 0;padding:0}
#s-signals .blk li{position:relative;padding-left:var(--s4);font-family:var(--f-body);font-size:var(--t-table);line-height:1.4;color:var(--ink-2)}
#s-signals .blk li+li{margin-top:var(--s1)}
#s-signals .blk.m li{color:var(--ink)}
#s-signals .blk li::before{content:"";position:absolute;left:2px;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--ink-3)}
/* every section uses the same bullet as "what it measures" */
#s-signals .foot{display:flex;justify-content:space-between;gap:var(--s5);color:var(--ink-3)}
#s-signals .lgd{display:flex;gap:var(--s4);flex:none}
#s-signals .lgd span{display:inline-flex;align-items:center;gap:var(--s2)}

/* ── 09-platform-b ── */
/* SONA, the intelligence layer (ported from lab/platform-b/v21.html; the lab stays the place to experiment).
   φ type: 68 headline · 42 SONA · 26 subhead, surface names, sheet name · 20 point titles · 16 chips, stage pills,
   point lines, unlock line · 13 tags.
   Rose for what SONA does and learns (arcs, lit stages, ripples, sparks). Every line solid, rounded corners. */
#s-platform-b{--care:var(--accent);--fam:var(--accent-2);--adm:var(--ink-3);--wire:color-mix(in oklab,var(--ink) 22%,transparent);
    --arc:color-mix(in oklab,var(--accent) 62%,var(--bg));
    --t0:color-mix(in oklab,var(--accent) 55%,var(--ink));--t1:color-mix(in oklab,var(--accent) 78%,var(--ink));--t2:var(--accent);
    --t3:color-mix(in oklab,var(--accent) 78%,var(--bg));--t4:color-mix(in oklab,var(--accent) 60%,var(--bg));--t5:color-mix(in oklab,var(--accent) 45%,var(--bg))}
  #s-platform-b .sub{left:110px;top:253px;width:1400px;color:var(--ink-2)}
  #s-platform-b svg.dg{left:0;top:0;width:1920px;height:1080px;overflow:visible}
  #s-platform-b .wire{fill:none;stroke:var(--wire);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  #s-platform-b .ghost{fill:none;stroke:none}
  #s-platform-b .outer{fill:var(--raised);stroke:color-mix(in oklab,var(--accent) 18%,transparent);stroke-width:1.5}
  #s-platform-b .core{fill:var(--wash);stroke:color-mix(in oklab,var(--accent) 40%,transparent);stroke-width:2;
    filter:drop-shadow(0 22px 26px color-mix(in oklab,var(--ink) 20%,transparent)) drop-shadow(0 4px 6px color-mix(in oklab,var(--ink) 10%,transparent))}
  /* the three arcs: a faint track, and the fill (butt caps: an empty fill draws nothing at all) */
  #s-platform-b .track{fill:none;stroke:color-mix(in oklab,var(--accent) 12%,transparent);stroke-width:10;stroke-linecap:round}
  #s-platform-b .arcf{fill:none;stroke:var(--arc);stroke-width:10;stroke-linecap:round;visibility:hidden}
  #s-platform-b .lead{fill:none;stroke:var(--wire);stroke-width:1.5;transition:stroke .5s}
  #s-platform-b .lead.lit{stroke:var(--arc)}
  #s-platform-b .ripple{fill:none;stroke:var(--accent);opacity:0}
  #s-platform-b .sona{left:830px;top:490px;width:340px;height:340px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none}
  #s-platform-b .sona .brain{width:30px;height:30px;margin-bottom:var(--s2);color:color-mix(in oklab,var(--accent) 45%,var(--bg))}
  #s-platform-b .sona .nm{font:var(--dw) var(--t-h2)/1 var(--f-display);letter-spacing:var(--dt);color:var(--ink)}
  #s-platform-b .sona .rl{margin-top:var(--s2);color:var(--accent-ink)}
  /* chips: the six signals and the three stages share one style; a stage's dot is its bulb, rose when live */
  #s-platform-b .chip,#s-platform-b .pill{height:40px;box-sizing:border-box;padding:0 var(--s3) 0 38px;border-radius:20px;background:var(--raised);
    box-shadow:0 1px 0 var(--line-2),0 10px 26px -18px color-mix(in oklab,var(--ink) 30%,transparent);display:flex;align-items:center;
    font:600 var(--t-meta)/1 var(--f-body);color:var(--ink);white-space:nowrap;transition:box-shadow .5s,color .5s}
  #s-platform-b .chip{left:110px;width:168px;padding-right:0}
  #s-platform-b .chip i,#s-platform-b .pill i{position:absolute;left:16px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;box-sizing:border-box;background:var(--c)}
  #s-platform-b .chip.on{box-shadow:0 0 0 1.5px var(--c),0 10px 26px -14px var(--c)}
  #s-platform-b .pill{position:absolute;min-width:300px;color:var(--ink-3)}
  #s-platform-b .pill i{background:transparent;border:1.5px solid var(--wire);transition:background .5s,border-color .5s,box-shadow .5s}
  #s-platform-b .pill.lit{color:var(--ink)}
  #s-platform-b .pill.lit i{background:var(--arc);border-color:var(--arc);animation:sona-bulb 2.4s ease-in-out infinite}
  @keyframes sona-bulb{0%,100%{box-shadow:0 0 0 2.5px color-mix(in oklab,var(--accent) 10%,transparent),0 0 4px 0 color-mix(in oklab,var(--accent) 25%,transparent)}
    50%{box-shadow:0 0 0 4px color-mix(in oklab,var(--accent) 8%,transparent),0 0 10px 2.5px color-mix(in oklab,var(--accent) 35%,transparent)}}
  #s-platform-b .res{left:330px;top:510px;width:300px;height:300px}
  #s-platform-b .lbl{position:absolute;font:600 var(--t-meta)/1.3 var(--f-body);color:var(--ink-3);white-space:nowrap}
  #s-platform-b .sf{left:1450px;width:360px;height:120px;box-sizing:border-box;padding:0 46px 0 var(--s4);border-radius:16px;background:var(--raised);cursor:pointer;
    box-shadow:0 1px 0 var(--line-2),0 26px 42px -32px color-mix(in oklab,var(--ink) 30%,transparent);display:grid;grid-template-columns:40px 1fr;grid-template-rows:auto auto;
    align-content:center;column-gap:14px;row-gap:var(--s1);transition:box-shadow .6s,background .45s}
  #s-platform-b .sf .nm{grid-column:2;font:600 var(--t-body)/1.2 var(--f-body);color:var(--ink);transition:color .45s}
  #s-platform-b .sf .fr{grid-column:2;color:var(--ink-3);transition:color .45s}
  #s-platform-b .sf .ic{grid-column:1;grid-row:1/3;align-self:center;width:40px;height:40px;color:var(--c);transition:color .45s}   /* the big icon first */
  /* the cue: a plain arrow, grey; the card's colour on hover; it nudges twice once the cards are in */
  #s-platform-b .chev{position:absolute;right:18px;top:50%;width:20px;height:20px;margin-top:-10px;color:var(--ink-3);transition:color .3s}
  #s-platform-b .chev svg{width:20px;height:20px;display:block}
  #s-platform-b .chev.ping svg{animation:sona-nudge .9s var(--ease-out) 2}
  @keyframes sona-nudge{0%,100%{transform:translateX(0)}40%{transform:translateX(6px)}}
  #s-platform-b .sf:hover .chev,#s-platform-b .sf:focus-visible .chev{color:var(--c)}
  #s-platform-b .sf:focus-visible{outline:2px solid color-mix(in oklab,var(--c) 60%,transparent);outline-offset:4px}
  /* the open card fills solid in its colour; its text, icon and arrow flip to the background */
  #s-platform-b .sf.on{background:var(--c);box-shadow:0 26px 42px -24px color-mix(in oklab,var(--c) 60%,transparent)}
  #s-platform-b .sf.on .nm,#s-platform-b .sf.on .fr,#s-platform-b .sf.on .ic,#s-platform-b .sf.on .chev{color:var(--bg)}
  #s-platform-b .sf.hit{box-shadow:0 0 0 1.5px var(--c),0 26px 42px -28px color-mix(in oklab,var(--c) 45%,transparent)}
  #s-platform-b .tag{font-size:var(--t-fine);letter-spacing:.16em;color:var(--ink-3)}
  #s-platform-b .rt{position:absolute;left:0;top:0;width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;display:grid;place-items:center;
    font:700 25px/1 var(--f-body);background:#fff;box-shadow:0 6px 14px -6px color-mix(in oklab,var(--ink) 45%,transparent);pointer-events:none}
  #s-platform-b .rt.care{color:#D83A2E}
  #s-platform-b .rt.fam{color:#D83A2E;font-size:26px}
  #s-platform-b .rt svg{width:24px;height:24px}
  #s-platform-b .rt.pillc{color:var(--accent-2)}
  #s-platform-b .rt.chair{color:var(--ink-2)}
  /* the restart control: an icon-only outlined round button inside SONA, under its role line */
  #s-platform-b .again{margin-top:var(--s3);pointer-events:auto;width:34px;height:34px;padding:0;border-radius:50%;border:1.5px solid color-mix(in oklab,var(--ink) 32%,transparent);background:color-mix(in oklab,var(--raised) 60%,transparent);
    color:var(--ink-2);display:grid;place-items:center;cursor:pointer;transition:color .3s,border-color .3s}
  #s-platform-b .again:hover{color:var(--accent-ink);border-color:var(--accent)}
  #s-platform-b .again svg{width:15px;height:15px;transition:transform .6s var(--ease-out)}
  #s-platform-b .again.spin svg{transform:rotate(-360deg)}
/* ── the side sheet (v21). Open: the diagram (.dia) scales to 0.72 about (110, 660); the sheet sits at x 1400–1810,
   one height for all three (the tallest), centred on y 660; a link draws from the open card into it. */
#s-platform-b .dia{left:0;top:0;width:1920px;height:1080px;transform-origin:110px 660px}
#s-platform-b svg.ov{left:0;top:0;width:1920px;height:1080px;overflow:visible;pointer-events:none;z-index:4}
#s-platform-b .link{fill:none;stroke-width:2;stroke-linecap:round;opacity:0}
#s-platform-b .sheet{left:1400px;top:372px;width:410px;box-sizing:border-box;padding:34px 34px 38px;border-radius:20px;z-index:5;
  background:var(--raised);box-shadow:0 1px 0 var(--line-2),0 42px 68px -38px color-mix(in oklab,var(--ink) 40%,transparent);visibility:hidden;--c:var(--accent)}
#s-platform-b .sheet .nm{font:600 var(--t-body)/1.15 var(--f-body);color:var(--ink)}
#s-platform-b .sheet .sic{position:absolute;right:34px;top:34px;width:36px;height:36px;color:var(--c)}
#s-platform-b .sheet .fr{margin-top:6px;color:var(--ink-3)}
#s-platform-b .sheet .un{margin-top:var(--s3);font:600 var(--t-meta)/1.4 var(--f-body);color:var(--cl)}
#s-platform-b .sheet .pts{position:relative;margin-top:var(--s5);padding-left:30px;display:flex;flex-direction:column;gap:var(--s5)}
#s-platform-b .sheet .rail{position:absolute;left:5px;top:0;height:0;width:1.5px;background:color-mix(in oklab,var(--c) 45%,transparent);transform-origin:50% 0}
#s-platform-b .sheet .pt{position:relative}
#s-platform-b .sheet .nd{position:absolute;left:-30px;top:6px;width:12px;height:12px;border-radius:50%;box-sizing:border-box;background:var(--raised);border:2px solid var(--c)}
#s-platform-b .sheet .t{font:600 var(--t-table)/1.3 var(--f-body);color:var(--ink)}
#s-platform-b .sheet .d{margin-top:6px;font:400 var(--t-meta)/1.45 var(--f-body);color:var(--ink-2)}
/* text selection: the diagram's full-stage wrapper lets the mouse through to the headline and subhead; its own
   content (chips, pills, photo, shapes) stays interactive; SONA's core disc is decorative, so its label is selectable */
#s-platform-b .dia{pointer-events:none}
#s-platform-b .dia *:not(svg){pointer-events:auto}
#s-platform-b .core{pointer-events:none}

/* ── 10-four-measures ── */
/* AIVITA's advantage, made measurable (DA, 2026-10-29). The four questions each sit in a
   white card (the CC premium card: raised, r 26, the same soft shadow), so each measure reads as its own unit:
   cards 405 wide, 26 apart (x 110 / 541 / 972 / 1403), 42 padding, all as tall as the tallest. Inside: the cadence
   ring (68) with its cadence beside it (Table 20, ink-2), the question 26 below (Lead 33, display face, ink), the
   metric (meta-u, accent-ink, one line) 26 below, its instrument (meta, ink-3). Under the cards, open on the page, the "What it brings out" row: label in
   the first card's column, the line (body 26) across the other three. Accent on the rings, the metric heads and the headline.
   φ type: 68 · 33 · 26 · 16. φ space: 68 headline→cards, 42 padding, 42 cards→row. */
#s-four-measures .qc{width:405px;box-sizing:border-box;padding:var(--s5);background:var(--raised);border-radius:26px;
  box-shadow:0 1px 0 var(--line-2),0 42px 68px -42px color-mix(in oklab,var(--ink) 38%,transparent)}
#s-four-measures .ar{display:flex;align-items:center;gap:var(--s3)}
#s-four-measures .cad{display:block;flex:none;width:68px;height:68px;overflow:visible}
#s-four-measures .cb{fill:none;stroke:var(--line);stroke-width:2.2}
#s-four-measures .ca{fill:none;stroke:var(--accent);stroke-width:5.5;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50px 50px;stroke-dasharray:0 1}
#s-four-measures .cd{font-size:var(--t-table);line-height:1;color:var(--ink-2)}   /* a step under the question (20 vs 33) */
#s-four-measures .q{margin-top:var(--s4);font-size:var(--t-lead);line-height:1.2;color:var(--ink)}
#s-four-measures .mt{margin-top:var(--s4);color:var(--accent-ink);letter-spacing:.1em;white-space:nowrap}   /* pink as on the original 10; one line each */
#s-four-measures .ins{margin-top:var(--s1)}
#s-four-measures .oc{left:110px;width:1700px;display:grid;grid-template-columns:405px 1269px;column-gap:var(--s4);align-items:baseline;
  border-top:1.5px solid var(--line);padding-top:var(--s4)}   /* a hairline separates the cards from what they bring out (DA, 2026-11-02) */
#s-four-measures .ol{padding-left:var(--s5)}
#s-four-measures .ot{line-height:1.45;color:var(--ink-2);text-wrap:pretty}
/* build start states (LEARNINGS 12) */
#s-four-measures .qc,#s-four-measures .cd,#s-four-measures .q,#s-four-measures .mt,#s-four-measures .ins,#s-four-measures .oc{opacity:0}

/* ── 11-one-patient ── */
/* One patient, two weeks. Two lane cards across the safe area (x 110–1810, r 26, 42
   padding): today (`kind: old`) outlined and flat, so it recedes; CARA (`kind: new`) white and raised, so it leads.
   Inside each: the lane name (meta-u) at x 152, then a line through four stations (x 410 / 755 / 1100 / 1445, events
   320 wide, 26 under the line). Today: a broken line (2px ink-3 dashes) that fades at the empty station (visible
   silence), each event a hollow 34 ring with an ink-3 icon. CARA: a solid 3px accent line with a dot for every day,
   each event a filled accent ring with a white icon; event text in ink. Events hang 42 under the line. Above the cards one
   quiet row: the days over their stations. The closing (Body 26, ink-2, its
   emphasis in accent) ends on the content line.
   φ type: 68 headline · 26 subhead, closing · 20 events (Table) · 16 days, lane names. */
#s-one-patient .sub{left:110px;width:1600px;color:var(--ink-2)}
#s-one-patient svg.dg{left:0;top:0;width:1920px;height:1080px}
#s-one-patient .lc{left:110px;width:1700px;box-sizing:border-box;border-radius:26px}
#s-one-patient .lc.k-old{border:1.5px solid var(--line)}
#s-one-patient .lc.k-new{background:var(--raised);box-shadow:0 1px 0 var(--line-2),0 26px 42px -26px color-mix(in oklab,var(--ink) 34%,transparent)}
#s-one-patient .l0{fill:none;stroke:url(#op-fade);stroke-width:2;stroke-linecap:round;stroke-dasharray:2 9}
#s-one-patient .l1{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round}
#s-one-patient .tk circle{fill:var(--accent);stroke:var(--raised);stroke-width:1.5}
#s-one-patient .st0 circle{fill:var(--bg);stroke:var(--ink-3);stroke-width:1.5}
#s-one-patient .st0 path{fill:none;stroke:var(--ink-3);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#s-one-patient .st1 circle{fill:var(--accent)}
#s-one-patient .st1 path{fill:none;stroke:var(--raised);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#s-one-patient .dy{color:var(--ink-2);white-space:nowrap}
#s-one-patient .ln-name{left:152px;width:232px;white-space:nowrap;line-height:1.3;color:var(--ink-3)}
#s-one-patient .ln-name.k-new{color:var(--accent-ink)}
#s-one-patient .ev{width:320px;font-size:var(--t-table);line-height:1.4;text-wrap:pretty}
#s-one-patient .k-old .ev{color:var(--ink-2)}
#s-one-patient .k-new .ev{color:var(--ink)}
#s-one-patient .cl{left:110px;width:1700px;font-size:var(--t-body);line-height:1.45;color:var(--ink-2);text-wrap:pretty}
#s-one-patient .cl em.hl{color:var(--accent-ink)}
/* build start states (LEARNINGS 12): the beats reveal these after t 0 */
#s-one-patient .sub,#s-one-patient .dy,#s-one-patient .lc,#s-one-patient .ln-name,
#s-one-patient .ev,#s-one-patient .cl,#s-one-patient .st0 g,#s-one-patient .st1 g,#s-one-patient .tk{opacity:0}
#s-one-patient .l1{stroke-dasharray:1;stroke-dashoffset:1}

/* ── 12-staircase-b ── */
/* The evidence staircase. A stair line showing progress (solid accent up to Next, accent dots to Later, grey dots along Later) rising left → right over a broad SONA base band (label + legend inside); each
   step's status, name and buyers stand on its tread, its unlock at the foot of the riser up to it. Buyers carry a dot for who they
   serve: CARA (accent-2), CC (accent), new markets (hollow), every setting (ink).
   φ type, one size per role: 68 headline · 42 step names · 26 subhead · 20 buyers (Table, one line each, shared with Traction) · 16 labels · 13 unlocks, proofs. */
#s-staircase-b .sub{left:110px;top:253px;width:1400px;color:var(--ink-2)}
#s-staircase-b .seg{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
#s-staircase-b .seg.done{stroke:var(--accent);stroke-dasharray:1;stroke-dashoffset:0}
#s-staircase-b .seg.next{stroke:var(--accent);stroke-width:3;stroke-dasharray:0 10}
#s-staircase-b .seg.later{stroke:var(--ink-3);stroke-width:3;stroke-dasharray:0 10}
#s-staircase-b .rv{fill:none;stroke:#fff;stroke-width:14;stroke-dasharray:1;stroke-dashoffset:0}
#s-staircase-b .rings circle{stroke-width:2.5}
#s-staircase-b .step{width:373px}   /* four columns 425 apart; text stops 26 short of the next riser (1411 + 373 = 1784 < 1810) */
#s-staircase-b .st{color:var(--accent-ink)}   /* every stage label in the accent (DA, 2026-11-02) */
#s-staircase-b .rev{margin-top:var(--s3);padding-top:var(--s2);border-top:1.5px solid var(--line-2);color:var(--ink-3);white-space:nowrap}
#s-staircase-b .nm{margin-top:var(--s1);line-height:1.15;color:var(--ink)}
#s-staircase-b .buyers{margin-top:var(--s4);display:flex;flex-direction:column;gap:var(--s2)}
#s-staircase-b .b{display:flex;align-items:baseline;gap:var(--s3);font-family:var(--f-body);font-size:var(--t-table);line-height:1.4;color:var(--ink-2);white-space:nowrap}
#s-staircase-b .b i{width:10px;height:10px;border-radius:50%;flex:none;transform:translateY(-2px);display:inline-block}
#s-staircase-b .legend i{width:8px;height:8px;border-radius:50%;flex:none;transform:translateY(-1px);display:inline-block}
#s-staircase-b [data-of="cara"] i{background:var(--accent-2)}
#s-staircase-b [data-of="cc"] i{background:var(--accent)}
#s-staircase-b [data-of="new"] i{border:1.5px solid var(--ink-3)}
#s-staircase-b [data-of="all"] i{background:var(--ink-3)}
#s-staircase-b .pf{font-style:normal;font-family:var(--f-mono);font-size:var(--t-fine);letter-spacing:.03em;color:var(--accent-ink);margin-left:var(--s2);white-space:nowrap}
#s-staircase-b .un{font-size:var(--t-fine);letter-spacing:.04em;color:var(--ink-3)}
#s-staircase-b .base{left:110px;width:1700px;height:52px;box-sizing:border-box;border-radius:26px;padding:0 var(--s4);
  display:flex;align-items:center;justify-content:space-between;background:color-mix(in oklab,var(--accent) 18%,var(--bg))}
#s-staircase-b .plat{color:var(--accent-ink);line-height:1}
#s-staircase-b .legend{display:flex;gap:var(--s4);color:var(--ink-2);line-height:1}
#s-staircase-b .legend span{display:inline-flex;align-items:center;gap:var(--s2)}

/* ── 13-competition ── */
/* Competition: six alternatives against nine claims, CC last in its own wash band. Full width (110–1810): an 872
   label column and six 138 dot columns. φ type: 68 headline · 26 row labels (one line each: the longest claim is
   ≤ 843 in every pairing) · 16 column heads (two lines at most, tight tracking to fit 138), legend and note. Heads close under the headline (y 272); the fork's eight
   claims as 72 rows end on the content line (y 910), inside the CARA band (262–924). */
#s-competition .cols{position:absolute;left:982px;top:272px;width:828px;height:52px;display:grid;grid-template-columns:repeat(6,138px);align-items:end}
#s-competition .cols .c{text-align:center;line-height:1.3;padding:0 2px;letter-spacing:.04em}
#s-competition .cols .c[data-i="5"]{color:var(--accent-ink)}
#s-competition .band{position:absolute;left:1672px;top:262px;width:138px;height:662px;border-radius:69px;background:var(--wash)}
#s-competition .mx{position:absolute;left:110px;top:334px;width:1700px}
#s-competition .r{display:grid;grid-template-columns:872px repeat(6,138px);align-items:center;height:72px;border-top:1.5px solid var(--line-2);transition:background .382s}
#s-competition .r:last-child{border-bottom:1.5px solid var(--line-2)}
#s-competition .r:hover{background:linear-gradient(90deg,var(--wash),transparent 70%)}
#s-competition .lbl{font-family:var(--f-body);font-size:var(--t-body);line-height:1.3;color:var(--ink);white-space:nowrap}
#s-competition i{justify-self:center;display:block;width:22px;height:22px;border-radius:50%;box-sizing:border-box}
#s-competition i[data-v="y"]{background:var(--ink-3)}
#s-competition i[data-v="n"]{border:2px solid var(--line)}
#s-competition i[data-v="p"]{border:2px solid var(--ink-3);background:linear-gradient(90deg,var(--ink-3) 50%,transparent 50%)}
#s-competition i.us[data-v="y"]{background:var(--accent);box-shadow:0 0 0 6px color-mix(in oklab,var(--accent) 16%,transparent)}
#s-competition .src-row{display:flex;align-items:center;gap:var(--s5);white-space:nowrap}
#s-competition .lg{display:inline-flex;align-items:center;gap:var(--s2)}
#s-competition .lg i{width:14px;height:14px}
#s-competition .note{margin-left:auto;color:var(--ink-3)}

/* ── 14-moat-time ── */
/* The moat compounds over time (four stages, a one-line subhead, no footnote, no axis label, no terrain). Stacked strata, not a line: a time axis (hairline, y 880; `times` on the label
   columns) and four layers stacked bottom-up, each from its time to the right edge (1810), thicknesses 16 / 26 /
   42 / 68 (φ ratio, scaled to the free height), fills accent at 30 / 42 / 56 / 74% (parts of a whole, §7), no outlines, r 16 step corners. The labels
   sit on a 4-column grid (x 110 / 529 / 948 / 1367, 377 wide, 42 gutters; on the headline's left edge), each column holding the time its layer begins, and
   step up with the silhouette (each 42 above its layer); a hairline drop joins each to its layer. The stage lines are accent-ink;
   every title is ink, the deepest stratum (74%) carries the weight.
   φ type: 68 headline · 42 titles · 26 subhead · 20 texts · 16 stages, times. */
#s-moat-time .sub{left:110px;width:1400px;color:var(--ink-2)}
#s-moat-time svg.dg{left:0;top:0;width:1920px;height:1080px}
#s-moat-time .sr{stroke:none}
#s-moat-time .sr:nth-child(1){fill:color-mix(in oklab,var(--accent) 30%,var(--bg))}
#s-moat-time .sr:nth-child(2){fill:color-mix(in oklab,var(--accent) 42%,var(--bg))}
#s-moat-time .sr:nth-child(3){fill:color-mix(in oklab,var(--accent) 56%,var(--bg))}
#s-moat-time .sr:nth-child(4){fill:color-mix(in oklab,var(--accent) 74%,var(--bg))}
#s-moat-time .dr{fill:none;stroke:var(--line);stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:0}
#s-moat-time .ax{fill:none;stroke:var(--line);stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:0}
#s-moat-time .tks line{stroke:var(--line);stroke-width:1.5}
#s-moat-time .tm{white-space:nowrap;color:var(--ink-2)}
#s-moat-time .ly{width:377px}
#s-moat-time .stg{color:var(--accent-ink)}
#s-moat-time .tt{margin-top:var(--s1);line-height:1.15}
#s-moat-time .tx{margin-top:var(--s2);font-size:var(--t-table);line-height:1.4;color:var(--ink-2);text-wrap:pretty}
/* build start states (LEARNINGS 12) */
#s-moat-time .sub,#s-moat-time .ly,#s-moat-time .tm,#s-moat-time .tks{opacity:0}
#s-moat-time .ax,#s-moat-time .dr{stroke-dashoffset:1}

/* ── 15-engineering-ria-c ── */
/* Engineering depth · RIA (C). Headline, then the subhead naming RIA; right: RIA with residents in a framed photo
   card (820×525, 16 white border, 16:10 so the wide photos keep their people) gliding through four photos (3 s each,
   dots on its lower edge); left (110–950): her specs as one row of figures, the paid
   pilot (20, on an accent rule) 42 under them, then the voices in a card that fills the rest of the band; the closing line on the source row.
   φ type: 68 headline · 42 spec figures · 26 subhead, quote, 20 pilot · 16 spec labels, attribution, toggle, closing. */
#s-engineering-ria-c .sub{left:110px;top:253px;width:1400px;color:var(--ink-2)}
#s-engineering-ria-c .specs{left:110px;width:840px;display:grid;grid-template-columns:repeat(4,1fr);padding:var(--s4) 0;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
#s-engineering-ria-c .sp+.sp{padding-left:var(--s4);border-left:1px solid var(--line-2)}
#s-engineering-ria-c .sv{line-height:1.05;color:var(--ink);white-space:nowrap}
#s-engineering-ria-c .sp[data-i="0"] .sv,#s-engineering-ria-c .sp[data-i="1"] .sv{color:var(--accent-ink)}
#s-engineering-ria-c .sl{margin-top:var(--s2);color:var(--ink-2)}
#s-engineering-ria-c .proof{left:110px;width:840px;box-sizing:border-box;padding-left:var(--s4);border-left:3px solid var(--accent);font-family:var(--f-body);font-size:var(--t-table);line-height:1.45;color:var(--ink);text-wrap:pretty}
#s-engineering-ria-c .voice{left:110px;width:840px;box-sizing:border-box;padding:var(--s4) var(--s5);display:flex;flex-direction:column;justify-content:center;
  background:var(--raised);border-radius:26px;box-shadow:0 1px 0 var(--line-2),0 42px 68px -42px color-mix(in oklab,var(--ink) 38%,transparent)}
#s-engineering-ria-c .qm{position:absolute;left:var(--s4);top:var(--s3);font-family:var(--f-display);font-size:var(--t-display);line-height:1;color:color-mix(in oklab,var(--accent) 45%,transparent)}
#s-engineering-ria-c .qs{position:relative;padding-left:var(--s5)}
#s-engineering-ria-c .q{margin:0;position:absolute;inset:0 0 auto var(--s5);opacity:0}
#s-engineering-ria-c .q:first-child{position:relative;inset:auto}
#s-engineering-ria-c .qt{margin:0;font-family:var(--f-body);font-size:var(--t-body);line-height:1.4;color:var(--ink);text-wrap:pretty}
#s-engineering-ria-c figcaption{margin-top:var(--s3);display:flex;gap:var(--s3);align-items:baseline}
#s-engineering-ria-c .who{font-family:var(--f-body);font-size:var(--t-meta);color:var(--ink-2)}
#s-engineering-ria-c .org{color:var(--accent-ink)}
#s-engineering-ria-c .tog{margin:var(--s3) 0 0 var(--s5);align-self:flex-start;display:inline-flex;gap:4px;padding:4px;border-radius:20px;background:var(--raised);
  box-shadow:0 1px 0 var(--line-2),0 10px 26px -10px color-mix(in oklab,var(--ink) 40%,transparent)}
#s-engineering-ria-c .tb{appearance:none;border:0;background:transparent;cursor:pointer;padding:var(--s2) var(--s4);border-radius:16px;color:var(--ink-3);
  font-size:var(--t-fine);letter-spacing:.14em;transition:background .3s,color .3s}
#s-engineering-ria-c .tb.on{background:var(--accent);color:var(--bg)}
#s-engineering-ria-c .pic{left:990px;width:820px;height:525px;box-sizing:border-box;border-radius:26px;overflow:hidden;background:#fff;
  box-shadow:0 1px 0 var(--line-2),0 42px 68px -42px color-mix(in oklab,var(--ink) 38%,transparent)}
#s-engineering-ria-c .fr{position:absolute;inset:var(--s3);border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px var(--line-2)}
#s-engineering-ria-c .fr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.04);transform-origin:50% 50%}
#s-engineering-ria-c .fr img+img{visibility:hidden}   /* until init parks the waiting photos off to the right (xPercent, JS) */
/* the photo dots: centred on the card's lower edge, half in, half out; filled = showing, hollow = the rest */
#s-engineering-ria-c .ptog{z-index:3;display:inline-flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3);border-radius:20px;background:var(--raised);
  box-shadow:0 1px 0 var(--line-2),0 10px 26px -12px color-mix(in oklab,var(--ink) 45%,transparent)}
#s-engineering-ria-c .pb{appearance:none;cursor:pointer;width:10px;height:10px;padding:0;border-radius:50%;border:1.5px solid var(--accent);background:transparent;transition:background .3s}
#s-engineering-ria-c .pb.on{background:var(--accent)}
#s-engineering-ria-c .foot{color:var(--ink-3)}

/* ── 16-added-benefit ── */
/* Added benefit. CARA (the cut-out, on the wash) in a 466 ring with one hairline orbit, its
   orbit's right edge on the safe line (centre x 1551). The four items as a 2 × 2 of white cards (the CC premium card:
   raised, r 26, 42 padding) in x 110–1250, 26 apart (42 short of the orbit): tag (meta-u, accent-ink), title (h2 42; one line in the top row,
   two below), text (Table 20, ink-2); all four cards share one size, each card's content centred in
   it, so the spare height in the top row splits evenly above and below.
   The grid and the ring share one horizontal centre line; no source row.
   φ type: 68 headline · 42 titles · 20 texts · 16 tags. */
#s-added-benefit .rp{width:466px;height:466px;background:var(--wash)}
#s-added-benefit .rp img{object-fit:contain;padding:var(--s5) 0 0;object-position:50% 100%}
#s-added-benefit .orb{width:518px;height:518px}
#s-added-benefit .it{box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;padding:var(--s5);background:var(--raised);border-radius:26px;
  box-shadow:0 1px 0 var(--line-2),0 26px 42px -26px color-mix(in oklab,var(--ink) 34%,transparent)}
#s-added-benefit .tg{color:var(--accent-ink)}
#s-added-benefit .tt{margin-top:var(--s3);font-size:var(--t-h2);line-height:1.15;color:var(--ink)}
#s-added-benefit .tx{margin-top:var(--s2);font-size:var(--t-table);line-height:1.4;color:var(--ink-2);text-wrap:pretty}
/* build start states (LEARNINGS 12) */
#s-added-benefit .it[data-i="0"] .tt,#s-added-benefit .it[data-i="1"] .tt{white-space:nowrap}   /* the top row's titles hold one line */
#s-added-benefit .it{opacity:0}

/* ── 17-team ── */
/* Team (six). φ type: 68 headline · 42 selected name · 26 names, bio points · 16 roles.
   Six people in a 3 × 2 grid on the left (178 rings, name and role centred under each; columns 308 wide, 42 apart; rows
   42 apart: 558 tall, 312–870), the bio card on the right on the same band (312–870). */
#s-team .people{position:absolute;left:110px;top:312px;width:1009px;display:grid;grid-template-columns:repeat(3,1fr);column-gap:var(--s5);row-gap:var(--s5)}
#s-team .pp{appearance:none;background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:var(--s3);text-align:center;transition:opacity .382s}
#s-team .face{position:relative;flex:none;width:178px;height:178px;border-radius:50%;overflow:hidden;background:var(--wash);display:grid;place-items:center;
  box-shadow:0 0 0 1.5px var(--line);transition:box-shadow .382s}
#s-team .face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
#s-team .ini{color:var(--accent-ink)}
#s-team .pp:not(.pending) .ini{display:none}
#s-team .pp.pending img{display:none}
#s-team .who{display:flex;flex-direction:column;align-items:center}
#s-team .nm{color:var(--ink);line-height:1.3;max-width:308px;text-wrap:balance}   /* a long name wraps onto a balanced second line */
#s-team .rl{margin-top:var(--s1);max-width:308px;line-height:1.5}
#s-team .pp.on .face{box-shadow:0 0 0 4px var(--accent),0 0 0 14px color-mix(in oklab,var(--accent) 16%,transparent)}
#s-team .dr{margin-top:var(--s2);color:var(--accent-ink)}
#s-team .dps{margin-top:var(--s4)}
#s-team .dps .body{position:relative;padding-left:var(--s4);font-size:var(--t-body);color:var(--ink);line-height:1.4;margin-bottom:var(--s3)}
#s-team .dps .body:last-child{margin-bottom:0}
#s-team .dps .body::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--accent)}
#s-team .card{left:1145px;top:312px;width:665px;height:558px;box-sizing:border-box;padding:var(--s5);background:var(--raised);border-radius:26px;
  box-shadow:0 1px 0 var(--line-2),0 42px 68px -42px color-mix(in oklab,var(--ink) 38%,transparent)}
#s-team .dr{padding-bottom:var(--s4);border-bottom:1px solid var(--line-2)}

/* ── 18-business-model ── */
/* Business architecture. Three tiers in the φ columns (538 wide, 43 apart), each opened by a margin bar
   2 → 6 → 16 px thick, ink-3 → accent: the headline drawn. CARA is the one floating card below, one row: its
   tag (the tier-tag style, accent-2, two lines) | the figure (68, accent-2) | a hairline, then unit line + detail
   right beside the figure, all centred.
   Every tier reads figure (68) → unit line (20, weight 500, ink, one line). The CARA card sits one φ step up:
   figure (68) → unit line (26) → detail (16, ink-2), as CC premium's card.
   φ type: 68 headline and figures · 26 CARA unit line · 20 unit lines · 16 CARA detail, tags, footnote. */
#s-business-model .bar{fill:none;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
#s-business-model .bar[data-i="0"]{stroke:var(--ink-3);stroke-width:2}
#s-business-model .bar[data-i="1"]{stroke:color-mix(in oklab,var(--accent) 55%,var(--ink-3));stroke-width:6}
#s-business-model .bar[data-i="2"]{stroke:var(--accent);stroke-width:16}
#s-business-model .tier{width:538px}
#s-business-model .tier[data-i="0"]{left:110px} #s-business-model .tier[data-i="1"]{left:691px} #s-business-model .tier[data-i="2"]{left:1272px}
#s-business-model .tag{color:var(--ink-3)}
#s-business-model .val{font-size:var(--t-h1);line-height:1;margin-top:var(--s4);white-space:nowrap;color:var(--ink)}
#s-business-model .un{margin-top:var(--s4);font-family:var(--f-body);font-size:var(--t-table);font-weight:500;line-height:1.3;color:var(--ink);white-space:nowrap}   /* 20, one line each (DA, 2026-11-02) */
#s-business-model .tx{margin-top:var(--s2);font-family:var(--f-body);font-size:var(--t-meta);line-height:1.6;color:var(--ink-2);text-wrap:pretty;max-width:480px}
#s-business-model .card{left:110px;width:1700px;box-sizing:border-box;padding:0 var(--s5) 0 var(--s6);background:var(--raised);border-radius:26px;
  display:grid;grid-template-columns:auto auto 1fr;column-gap:var(--s7);   /* 68 in, 110 between: spread a little, still left-aligned (DA, 2026-11-02) */align-items:center;align-content:center;
  box-shadow:0 1px 0 var(--line-2),0 42px 68px -42px color-mix(in oklab,var(--ink) 38%,transparent)}
#s-business-model .ct{color:var(--accent-2-ink);line-height:1.6;white-space:nowrap}   /* two lines, broken where deck.md breaks them */
#s-business-model .cv{color:var(--accent-2-ink);font-weight:600;margin-top:0}
#s-business-model .cr .un{margin-top:0;font-size:var(--t-body)}   /* CARA, the featured card, one φ step above the tiers: 26 */
#s-business-model .cr{padding-left:var(--s5);border-left:1px solid var(--line-2)}
#s-business-model .cr .tx{max-width:none}   /* 16, as CC premium's card (DA, 2026-11-02) */
#s-business-model .foot{color:var(--ink-3)}

/* ── 19-financials ── */
/* Financials, option B. The chart and its legend sit in a card (110–890 × 295–892) beside the ledger (958–1810), both
   spanning the same band; eight 70 rows end where the card ends. In the card (42 padding): $-labelled light grid
   every $50M (labels at the card's left edge, lines from 210), bars on a 770 baseline, years under it, the legend
   on the card's foot. φ type: 68 headline · 26 hover values · 20 table cells · 16 heads, totals, years, legend ·
   13 grid labels. */
#s-financials .ccard{left:110px;top:295px;width:780px;height:597px;background:var(--raised);border-radius:26px;
  box-shadow:0 1px 0 var(--line-2),0 42px 68px -42px color-mix(in oklab,var(--ink) 38%,transparent)}
/* Financials. Table cells use the Table half-step (20 = 26 ÷ √φ): clearly legible, lighter than body. Column
   heads 16 meta. The table opens under the headline; rows (66) carry it down level with the chart's year labels. */
#s-financials .bar-cc{fill:var(--accent)}
#s-financials .bar-cara{fill:var(--accent-2)}
#s-financials .bars g{transition:opacity .382s}
#s-financials .ebitda{fill:none;stroke:var(--ink);stroke-width:2;stroke-dasharray:6 6}
#s-financials .edots circle{fill:var(--bg);stroke:var(--ink);stroke-width:2}
#s-financials .yl,#s-financials .tot{position:absolute;width:120px;margin-left:-60px;text-align:center}
#s-financials .yl{top:782px}
#s-financials .tot{font-family:var(--f-mono);font-size:var(--t-meta);color:var(--ink);letter-spacing:.03em}
#s-financials .tbl{left:958px;top:295px;width:852px;border-collapse:collapse;table-layout:fixed}
#s-financials .tbl th{text-align:right;font-weight:400;padding:0 0 12px;height:37px;transition:color .382s}
#s-financials .tbl th:first-child{text-align:left;width:272px}
#s-financials .tbl td{height:70px;padding:0;font-size:var(--t-table);border-top:1.5px solid var(--line-2);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;transition:background .382s,color .382s}
#s-financials .tbl td.lbl{text-align:left;color:var(--ink-2)}
#s-financials .tbl td.v{color:var(--ink-2)}
#s-financials .tbl tr.hi td{color:var(--ink);background:var(--wash)}
#s-financials .tbl tr:last-child td{border-bottom:1.5px solid var(--line-2)}
#s-financials .tbl .on{color:var(--ink) !important}
#s-financials .tbl th.on{color:var(--accent-ink)}
#s-financials.hov .bars g:not(.on){opacity:.3}
#s-financials .lgd{left:152px;top:834px;display:flex;gap:var(--s5);align-items:center;color:var(--ink-2)}
#s-financials .lgd span{display:inline-flex;align-items:center;gap:var(--s2)}
#s-financials .k{display:inline-block;width:14px;height:14px;border-radius:50%}
#s-financials .k.a{background:var(--accent)} #s-financials .k.b{background:var(--accent-2)}
#s-financials .k.e{position:relative;width:34px;height:0;border-radius:0;border-top:2px solid var(--ink)}
#s-financials .k.e::after{content:"";position:absolute;left:11px;top:-5px;width:8px;height:8px;border-radius:50%;border:2px solid var(--ink);background:var(--bg)}
/* a very light horizontal grid every $50M (no verticals: they would cut between the bars), labelled at the left */
#s-financials .grid text{text-anchor:start}
#s-financials .grid line{stroke:var(--line-2);stroke-width:1;opacity:.6}
#s-financials .grid text{font-family:var(--f-mono);font-size:13px;fill:var(--ink-3);opacity:.8}
/* hover a block or an EBITDA point: its own value */
#s-financials .bars rect,#s-financials .edots circle{cursor:default}
#s-financials .bars rect:hover{filter:brightness(1.08)}
#s-financials .tip{left:0;top:0;transform:translate(-50%,-50%);box-shadow:0 10px 26px -10px color-mix(in oklab,var(--ink) 50%,transparent);padding:var(--s2) var(--s3);border-radius:10px;background:var(--ink);color:var(--bg);
  display:flex;flex-direction:column;align-items:center;gap:2px;pointer-events:none;opacity:0;transition:opacity .2s;white-space:nowrap;z-index:5}
#s-financials .tip.on{opacity:1}
#s-financials .tip.up{transform:translate(-50%,-100%);margin-top:-14px}   /* EBITDA points: above the point */
#s-financials .tip .tn{font-family:var(--f-mono);font-size:var(--t-fine);letter-spacing:.06em;opacity:.75}
#s-financials .tip .tv{font-family:var(--f-display);font-weight:var(--dw);font-size:var(--t-body);line-height:1.1}

/* ── 20-ask ── */
/* The ask. Type by priority (φ): 68 headline · 42 the total in the ring centre · 26 fund rows, the ledger total (accent),
   their amounts and the objectives · 16 labels. Ring (centre y 491) and ledger (60 rows) share the band 307–675 (68 under the one-line headline); the target
   objectives sit in a card 717–926 (label, timeline, five points at 20, two lines each); the target
   objectives sit 86 under the ledger total. */
#s-ask .seg{fill:none;stroke-width:42;stroke-dasharray:0 1;transition:opacity .382s}
#s-ask .center{text-align:center}
#s-ask .tv{font-size:var(--t-h2);line-height:1}
#s-ask .center .meta-u{margin-top:var(--s2)}
#s-ask .funds{position:absolute;left:620px;top:307px;width:1190px}
#s-ask .fund{display:flex;align-items:center;gap:var(--s4);height:60px;border-top:1.5px solid var(--line-2)}
#s-ask.hov .fund{transition:opacity .382s}   /* only once hovered, so it never fights the build fades */
#s-ask .fund i{width:16px;height:16px;border-radius:50%;flex:none}
#s-ask .fund .n{flex:1;color:var(--ink-2)}
#s-ask .fund .v{font-size:var(--t-body);color:var(--ink);font-variant-numeric:tabular-nums}
#s-ask .fund.tot{height:68px}
#s-ask .fund.tot .v{color:var(--accent-ink)}
#s-ask .fund.tot i{background:transparent}
#s-ask.dim .fund[data-i]:not(.on),#s-ask.dim .seg:not(.on){opacity:.22}
#s-ask .ot{color:var(--accent-ink)}
#s-ask .objc{left:110px;top:717px;width:1700px;height:209px;box-sizing:border-box;padding:var(--s4);background:var(--raised);border-radius:26px;
  box-shadow:0 1px 0 var(--line-2),0 42px 68px -42px color-mix(in oklab,var(--ink) 38%,transparent)}
#s-ask .objs{position:relative;margin-top:var(--s3);display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s4)}
#s-ask .ol{position:absolute;left:12px;right:0;top:11px;height:2px;background:var(--accent);border-radius:1px}
#s-ask .ob{position:relative}
#s-ask .ob b{display:block;width:24px;height:24px;border-radius:50%;background:var(--raised);border:3px solid var(--accent);box-sizing:border-box;margin-bottom:var(--s3)}
/* 20 (DA, 2026-11-02): each objective in two balanced lines, at most 230 wide */
#s-ask .ob .body{display:block;max-width:230px;font-size:var(--t-table);color:var(--ink);line-height:1.4;text-wrap:balance}

/* ── 21-fact-frame-cc ── */
/* Fact frame (CC): slide 2's composition. Right: CC large (700 tall, centred x 1548, y 560) on a soft accent glow,
   blinking on cue. Left (110–1250): Text A and Text B, left-aligned, one line each, centred as a block on CC's centre
   line; Text A turns green and moves up, Text B is typed under it.
   φ type: 68 Text A and Text B, both in the headline weight. */
#s-fact-frame-cc .glow{left:1548px;top:560px;width:900px;height:900px;margin:-450px 0 0 -450px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in oklab,var(--accent) 16%,transparent) 0,color-mix(in oklab,var(--accent) 5%,transparent) 50%,transparent 100%)}
#s-fact-frame-cc .ccw{left:1285px;top:210px;width:525px;height:700px;filter:drop-shadow(0 34px 34px color-mix(in oklab,var(--ink) 18%,transparent))}
#s-fact-frame-cc .ccimg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
#s-fact-frame-cc .eyes{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#s-fact-frame-cc .lid{fill:#DDF1FA}   /* the pale halo around CARA's eyes, sampled from the photo (cara-premium) */
#s-fact-frame-cc .shut{fill:none;stroke:#141522;stroke-width:8;stroke-linecap:round;opacity:0}
#s-fact-frame-cc .fx{left:0;top:0;width:1920px;height:1080px}
#s-fact-frame-cc .ta,#s-fact-frame-cc .tb{position:absolute;left:110px;width:1140px;margin:0;text-align:left;white-space:nowrap}
#s-fact-frame-cc .ta{font-size:var(--t-h1);line-height:1.12;color:var(--ink)}
#s-fact-frame-cc .tb{font-size:var(--t-h1);line-height:1.12;font-weight:var(--hw);color:var(--accent-ink)}
#s-fact-frame-cc .tb .w{display:inline-block;white-space:nowrap}
#s-fact-frame-cc .tb .c{display:inline-block}
#s-fact-frame-cc .caret{position:absolute;left:0;top:.14em;width:5px;height:.84em;border-radius:2px;background:var(--accent);pointer-events:none}
#s-fact-frame-cc .caret i{position:absolute;inset:0;border-radius:inherit;background:inherit}
/* the sign-off under the two lines, in the body face, no colour: the wordmark in spaced capitals, dark and heavier (20, ink,
   600), then the call to action (26, ink-2); 68 under the two lines */
#s-fact-frame-cc .cta{position:absolute;left:110px;width:1140px;white-space:nowrap;font-family:var(--f-body)}
#s-fact-frame-cc .cta .wm{font-size:var(--t-table);letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--ink)}
#s-fact-frame-cc .cta .ct{margin-top:var(--s2);font-size:var(--t-body);line-height:1.4;color:var(--ink-2)}
/* the address is a real mailto link */
#s-fact-frame-cc .cta .em{color:inherit;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px;
  text-decoration-thickness:1.5px;transition:color .236s,text-decoration-color .236s;cursor:pointer}
#s-fact-frame-cc .cta .em:hover{color:var(--ink);text-decoration-color:var(--accent)}