:root {
  --bg-primary:#F0EFE9;
  --bg-section:#F9F9F7;
  --bg-dark:#091524;
  --bg-card:#ECEAE4;
  --bg-muted:rgba(9,21,36,.055);
  --text-primary:#1A1B17;
  --text-body:rgba(9,21,36,.64);
  --text-muted:rgba(9,21,36,.60);
  --text-light:#F9F9F7;
  --accent-teal:#2A528E;
  --accent-lime:#38B6FF;
  --border:rgba(9,21,36,.11);
  --border-med:rgba(9,21,36,.2);
  --serif:"Geist",system-ui,-apple-system,sans-serif;
  --sans:"Geist",system-ui,-apple-system,sans-serif;
  --mono:"Sometype Mono",ui-monospace,monospace;
  --brand:"Geist",system-ui,-apple-system,sans-serif;
  --v9-shell:1200px;
  --v9-reading:720px;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg-primary); color:var(--text-primary); font-family:var(--sans); font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
h1,h2,h3,p,figure { margin:0; }
h1,h2,h3 { font-family:var(--sans); }
a { color:inherit; text-decoration:none; }
button,input,textarea { font:inherit; }
button { color:inherit; }
/* The page gutter, matching .v9-benefits and .v9-expression. This used to be a
   1200px centred box, which put every section using it 68px right of the
   left-aligned sections around it — the one thing on the homepage that was
   visibly out of line. Sections that want a narrower, centred measure now say
   so explicitly below, rather than inheriting it by default. */
.v9-shell { width:calc(100% - 2 * clamp(26px,3.6vw,70px)); margin-inline:auto; }
/* .v9-worlds is genuinely centred — symmetric, text-align:center — so a narrower
   centred measure is right for it. Declared, not inherited. */
.v9-worlds .v9-shell {
  /* narrower than the page when there is room, never wider than it when there is
     not — calc(100% - 48px) let it out past the gutter below ~1250px, so the one
     centred section became the widest thing on the page at laptop sizes. */
  width:min(var(--v9-shell), calc(100% - 2 * clamp(26px,3.6vw,70px)));
}
.v9-kicker { font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-teal); }
.v9-button { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:48px; padding:0 22px; border-radius:999px; font-size:15px; font-weight:600; border:0; cursor:pointer; transition:transform .2s ease, background .2s ease, color .2s ease; }
.v9-button svg,.v9-text-action svg,.v9-start-arrow svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s ease; }
.v9-button:hover { transform:translateY(-1px); }
.v9-button:hover svg,.v9-text-action:hover svg { transform:translateX(3px); }
.v9-button-primary { background:var(--bg-dark); color:var(--text-light); }
.v9-button-primary:hover { background:var(--accent-teal); }
.v9-text-action { display:inline-flex; align-items:center; gap:7px; min-height:48px; padding:0 6px; font-size:15px; font-weight:600; }
.v9-text-action:hover { color:var(--accent-teal); }

/* Hero — centered, modest headline, two media cards at the fold. */
.v9-hero { padding:clamp(56px,9vh,96px) 0 clamp(18px,3vh,34px); }
.v9-hero-copy { width:min(1140px,calc(100% - 48px)); margin-inline:auto; text-align:center; }
.v9-hero-products { font-family:var(--sans); font-size:clamp(13px,1.15vw,15px); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-teal); }
/* wide enough to hold the whole line at full size; below that it balances and
   breaks at the full stop rather than mid-sentence */
.v9-hero h1 { margin:20px auto 0; max-width:1080px; font-size:clamp(36px,4.4vw,58px); line-height:1.08; letter-spacing:-.028em; font-weight:650; text-wrap:balance; }
.v9-hero-actions { display:flex; align-items:center; justify-content:center; gap:20px; margin-top:32px; }

/* Temporary scrubber component. */
.v9-scrub { scroll-margin-top:90px; padding:24px 0 0; background:var(--bg-section); }
.v9-scrub-intro { max-width:760px; margin-bottom:48px; }
.v9-scrub-intro h2 { margin-top:16px; font-size:clamp(34px,4.2vw,52px); line-height:1.08; letter-spacing:-.026em; text-wrap:balance; }
.v9-scrub-runway { position:relative; height:240vh; }
.v9-scrub-sticky { position:sticky; top:94px; height:calc(100svh - 116px); min-height:560px; padding:0 24px 24px; z-index:2; }
.v9-stage { position:relative; height:100%; max-width:1420px; margin:0 auto; overflow:hidden; background:#E6E3DB; border:1px solid rgba(9,21,36,.08); border-radius:24px; box-shadow:0 28px 80px -60px rgba(9,21,36,.6); isolation:isolate; }
.v9-stage::before { content:''; position:absolute; inset:0; z-index:0; background:linear-gradient(90deg,rgba(240,239,233,.75),transparent 35%,transparent 65%,rgba(240,239,233,.7)); pointer-events:none; }
.v9-stage-photo { position:absolute; inset:0; z-index:-1; transition:width .8s cubic-bezier(.22,.8,.3,1), filter .8s ease, transform .8s cubic-bezier(.22,.8,.3,1); }
.v9-stage-photo img { width:100%; height:100%; display:block; object-fit:cover; object-position:center 48%; }
.v9-photo-caption { position:absolute; left:20px; bottom:18px; display:flex; gap:28px; color:rgba(255,255,255,.82); font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; text-shadow:0 1px 8px rgba(0,0,0,.45); }
.v9-responsibilities { position:absolute; inset:0; z-index:2; transition:opacity .65s ease, transform .7s cubic-bezier(.22,.8,.3,1); }
.v9-responsibility { position:absolute; display:grid; grid-template-columns:24px auto; align-items:start; gap:10px; min-width:170px; padding:12px 0; border-top:1px solid rgba(255,255,255,.44); color:#fff; text-shadow:0 1px 10px rgba(0,0,0,.38); }
.v9-resp-index { font-family:var(--mono); font-size:9px; letter-spacing:.1em; opacity:.66; padding-top:3px; }
.v9-responsibility b { display:block; font-size:14px; font-weight:600; }
.v9-responsibility small { display:block; margin-top:2px; font-size:11.5px; opacity:.72; }
.v9-responsibility-1 { top:10%; left:4%; }
.v9-responsibility-2 { top:29%; left:3%; }
.v9-responsibility-3 { bottom:25%; left:5%; }
.v9-responsibility-4 { bottom:7%; left:9%; }
.v9-responsibility-5 { top:8%; right:5%; }
.v9-responsibility-6 { top:28%; right:3%; }
.v9-responsibility-7 { bottom:25%; right:5%; }
.v9-responsibility-8 { bottom:7%; right:9%; }
.v9-decision { position:absolute; z-index:4; left:50%; top:52%; transform:translate(-50%,-42%) scale(.94); width:min(420px,calc(100% - 48px)); padding:24px 26px 22px; background:rgba(249,249,247,.96); border-radius:14px; overflow:hidden; box-shadow:0 26px 60px -28px rgba(9,21,36,.58); opacity:0; transition:opacity .55s ease, transform .7s cubic-bezier(.22,.8,.3,1), left .7s cubic-bezier(.22,.8,.3,1), top .7s cubic-bezier(.22,.8,.3,1); }
.v9-decision::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--accent-teal); }
.v9-decision-label,.v9-decision-time { display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); }
.v9-decision strong { display:block; margin:13px 0 17px; font-family:var(--brand); font-size:clamp(28px,3.3vw,40px); line-height:1.04; letter-spacing:-.025em; color:var(--bg-dark); }
.v9-consequences { position:absolute; z-index:3; top:50%; right:clamp(28px,5vw,76px); transform:translateY(-45%) translateX(42px); width:min(520px,42%); padding:10px 30px 16px; background:rgba(249,249,247,.97); border-radius:14px; opacity:0; box-shadow:0 28px 70px -40px rgba(9,21,36,.52); transition:opacity .6s ease, transform .8s cubic-bezier(.22,.8,.3,1); }
.v9-consequence-head { display:flex; justify-content:space-between; gap:20px; align-items:center; min-height:58px; border-bottom:1px solid var(--border); font-size:14px; font-weight:600; }
.v9-live { display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:#0F7D5D; }
.v9-live i { width:7px; height:7px; border-radius:50%; background:#0F7D5D; box-shadow:0 0 0 4px rgba(15,125,93,.1); }
.v9-consequence { display:grid; grid-template-columns:24px 1fr auto; gap:10px; align-items:center; min-height:67px; border-bottom:1px solid var(--border); opacity:0; transform:translateY(8px); transition:opacity .45s ease calc(var(--sequence) * 100ms + 260ms),transform .45s ease calc(var(--sequence) * 100ms + 260ms); }
.v9-check { width:20px; height:20px; display:grid; place-items:center; color:var(--accent-teal); }
.v9-check svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.v9-consequence-surface { font-size:13.5px; color:var(--text-body); }
.v9-consequence strong { font-size:13.5px; font-weight:600; text-align:right; }
.v9-authored { padding-top:15px; font-size:12px; color:var(--text-muted); }
.v9-stage-progress { position:absolute; z-index:6; left:50%; bottom:18px; transform:translateX(-50%); display:flex; gap:20px; padding:8px 14px; background:rgba(9,21,36,.62); border-radius:999px; backdrop-filter:blur(12px); color:rgba(255,255,255,.5); font-family:var(--mono); font-size:9px; letter-spacing:.11em; text-transform:uppercase; }
.v9-stage-progress span { display:flex; align-items:center; gap:7px; }
.v9-stage-progress span::before { content:''; width:5px; height:5px; border-radius:50%; background:currentColor; }
.v9-stage-progress .is-current { color:#fff; }
.v9-scrub-markers { position:absolute; inset:0; display:grid; grid-template-rows:repeat(3,1fr); z-index:1; pointer-events:none; }
.v9-stage[data-stage-state="2"] .v9-responsibilities { opacity:.28; transform:scale(.985); }
.v9-stage[data-stage-state="2"] .v9-decision { opacity:1; transform:translate(-50%,-50%) scale(1); }
.v9-stage[data-stage-state="3"] .v9-stage-photo { width:47%; filter:saturate(.72) brightness(.77); transform:scale(1.01); }
.v9-stage[data-stage-state="3"]::before { background:linear-gradient(90deg,rgba(9,21,36,.12),rgba(9,21,36,.04) 47%,#E6E3DB 47%,#E6E3DB); }
.v9-stage[data-stage-state="3"] .v9-responsibilities { opacity:0; transform:translateX(-20px); }
.v9-stage[data-stage-state="3"] .v9-decision { left:23.5%; top:28%; width:min(350px,38%); opacity:1; transform:translate(-50%,-50%) scale(.86); }
.v9-stage[data-stage-state="3"] .v9-consequences { opacity:1; transform:translateY(-50%) translateX(0); }
.v9-stage[data-stage-state="3"] .v9-consequence { opacity:1; transform:none; }

/* Product introduction — layered hero: background, monitor, copy. */
/* Glass tokens measured off assets/poster-hero.webp: the card interior lifts
   the background by +49/+36/+24 (~14% white) and the status dot samples at
   rgb(149,191,116) — desaturated by the glass and the warm room light. A
   saturated UI green reads as pasted-on. */
.gd{--glass-fill:rgba(255,255,255,.13);--glass-line:rgba(255,255,255,.30);
  --glass-lit:rgba(255,255,255,.52);--dot-ok:#95BF74;--dot-changed:#E8B563;
  --sh-radius:12px}
/* ── the section ─────────────────────────────────────────────────────────── */
.gd{position:relative;overflow:hidden;height:clamp(620px,94vh,900px);background:#0B0F14}
.gd-bg{position:absolute;inset:0;z-index:0}
.gd-bg img{width:100%;height:100%;object-fit:cover;object-position:center 42%;display:block}
.gd-bg::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(6,10,16,.72) 0%,rgba(6,10,16,.35) 42%,rgba(6,10,16,.12) 70%)}

/* Monitor sits between the two card layers: cards behind it get occluded by
   the bezel, which is the single strongest depth cue in the whole composition. */
.gd-monitor{position:absolute;right:-2%;bottom:0;z-index:20;
  width:min(1400px,calc(102% - clamp(26px,3.6vw,70px) - min(370px,26vw) - 44px),calc((94vh - 40px) * 1.747));
  filter:drop-shadow(0 40px 90px rgba(0,0,0,.55))}
.gd-monitor > img{width:100%;height:auto;display:block}

.gd-cards{position:absolute;inset:0;pointer-events:none}
.gd-cards-back{z-index:10}
.gd-cards-front{z-index:30}

/* ── a glass card ────────────────────────────────────────────────────────── */
.gc{position:absolute;display:grid;grid-template-columns:auto 1fr;align-items:center;
  column-gap:16px;padding:18px 26px 18px 20px;border-radius:18px;
  background:var(--glass-fill);
  border:1px solid var(--glass-line);
  border-top-color:var(--glass-lit);border-left-color:var(--glass-lit);
  box-shadow:0 18px 40px -28px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.14);
  color:#fff;white-space:nowrap;
  text-shadow:0 1px 6px rgba(0,0,0,.5);
  transform-origin:0 0;
  /* transform is layout, not animation — transitioning it makes the measured
     scale lag behind the real one on resize */
  transition:opacity .5s ease, border-color .85s ease, background-color .85s ease;
  opacity:0}
@supports (backdrop-filter: blur(6px)){
  .gc{backdrop-filter:blur(7px) saturate(118%);-webkit-backdrop-filter:blur(7px) saturate(118%)}
}
.gc.is-on{opacity:1}
.gc-ic{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;opacity:.94}
.gc-txt{display:block;min-width:0}
.gc-label{display:block;font-size:17.5px;font-weight:500;letter-spacing:-.005em;line-height:1.1}
.gc-state{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:14px;
  color:rgba(255,255,255,.88);line-height:1.1}
.gc-dot{width:8px;height:8px;border-radius:50%;background:var(--dot-ok);flex:0 0 7px;
  transition:background .45s ease, box-shadow .45s ease}
.gc-state span{display:block}

/* Activating: the glass itself takes the state's colour. Nothing crosses it and
   nothing moves — the fill and the lit edges warm toward the dot over most of a
   second, so the change reads as the surface having taken on a new state rather
   than as an effect played over it. */
.gc.is-changed{background:rgba(255,226,178,.15);border-color:rgba(255,224,170,.32);
  border-top-color:rgba(255,234,196,.56);border-left-color:rgba(255,234,196,.56)}
.gc.is-changed .gc-dot{background:var(--dot-changed);box-shadow:0 0 10px rgba(232,181,99,.5)}
.gc-state span{animation:none}
.gc.is-swap .gc-state span{animation:gc-swap .5s cubic-bezier(.2,.75,.3,1) both}
@keyframes gc-swap{
  0%{opacity:0;transform:translateY(7px)}
  100%{opacity:1;transform:none}
}

/* Flat, crisp, one size. The row mirrors the editor's row of nodes, so any
   variation in scale or angle would break the register between them. */
.gc{min-width:252px}

/* ── copy ────────────────────────────────────────────────────────────────── */
.gd-copy{position:absolute;left:clamp(26px,3.6vw,70px);bottom:clamp(28px,5vh,56px);
  z-index:40;width:min(370px,26vw)}
.gd-copy h2{margin:0;font-size:clamp(38px,4.5vw,54px);line-height:1.06;letter-spacing:-.03em;color:#F9F9F7}
.gd-copy p{margin-top:15px;font-size:clamp(15.5px,1.35vw,17.5px);line-height:1.6;color:rgba(249,249,247,.72)}

/* ── on-screen Action Editor (mirrors the live .ds-* system) ─────────────── */
.ds-screen{position:absolute;left:4.09%;top:8.63%;width:89.78%;height:82.74%;overflow:hidden}
.ds-stage{position:absolute;left:0;top:0;width:1600px;height:845px;transform-origin:0 0;display:flex;background:var(--bg-primary)}
.ds-rail{width:120px;flex:0 0 120px;display:flex;flex-direction:column;align-items:center;gap:16px;padding:22px 0 20px;background:linear-gradient(180deg,#091524,#0A1B2E)}
.ds-rail > img{width:44px;height:52px;filter:brightness(0) invert(1);opacity:.92;margin-bottom:14px}
.ds-ric{width:56px;height:56px;display:grid;place-items:center;border-radius:12px;color:rgba(255,255,255,.55)}
.ds-ric.is-active{background:rgba(255,255,255,.12);color:#fff}
.ds-ric svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ds-spacer{flex:1}
.ds-avatar{width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:var(--accent-teal);color:#fff;font-size:15px;font-weight:600}
.ds-main{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--bg-section)}
.ds-top{height:84px;flex:0 0 84px;display:flex;align-items:center;gap:20px;padding:0 30px;background:var(--bg-section);border-bottom:1px solid var(--border)}
.ds-back{width:24px;height:24px;fill:none;stroke:rgba(9,21,36,.5);stroke-width:2}
.ds-title{font-size:21px;font-weight:600;color:#091524}
/* .ds-ctx retired Aug 8: the frame title now carries the action's name, so
   "Action Editor | Office closed" no longer says the same thing twice. */
.ds-tools{margin-left:auto;display:flex;align-items:center;gap:28px;font-size:17px;color:rgba(9,21,36,.7)}
.ds-live{background:var(--accent-teal);color:#fff;padding:10px 24px;border-radius:999px;font-weight:600;transition:background .3s ease}
.ds-live.is-live{background:#0F7D5D}
.ds-canvas{position:relative;flex:1;overflow:hidden;background-color:var(--bg-primary);background-image:radial-gradient(circle,rgba(9,21,36,.105) 1px,transparent 1px);background-size:30px 30px}
.ds-prompt{position:absolute;left:50%;top:56px;transform:translateX(-50%);width:min(1080px,88%);background:#fff;border:1px solid var(--border);border-radius:18px;padding:30px 40px 34px;box-shadow:0 22px 56px -32px rgba(9,21,36,.5)}
.ds-plbl{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(9,21,36,.45)}
.ds-plbl i{width:8px;height:8px;border-radius:50%;background:var(--accent-teal)}
.ds-ptxt{display:block;min-height:52px;margin-top:16px;font-size:38px;line-height:1.15;letter-spacing:-.02em;color:#091524}
.ds-caret{display:inline-block;width:2px;height:1em;background:var(--bg-dark);vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.ds-wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ds-wires path{fill:none;stroke:#4E77AC;stroke-width:3;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:0;transition:opacity .3s ease}
.ds-wires path.in{opacity:1}
.ds-wires path.is-pulse{stroke:#2A528E;stroke-width:5;filter:drop-shadow(0 0 6px rgba(42,82,142,.55));transition:stroke .18s ease,stroke-width .18s ease}
.ds-node{position:absolute;top:440px;width:250px;background:#fff;border:1px solid rgba(9,21,36,.09);border-radius:12px;padding:16px 18px 18px;box-shadow:0 6px 16px -14px rgba(9,21,36,.26);opacity:0;transform:translateY(8px) scale(.97);transition:opacity .3s ease, transform .34s cubic-bezier(.2,.75,.3,1)}
.ds-node.in{opacity:1;transform:none}
.ds-node.is-firing{border-color:#4E77AC;box-shadow:0 0 0 3px rgba(78,119,172,.20), 0 12px 28px -22px rgba(9,21,36,.38)}
.ds-node span{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(9,21,36,.42)}
.ds-node h3{margin:8px 0 0;font-size:18px;line-height:1.18;letter-spacing:-.012em;color:#091524}
.ds-node p{margin:8px 0 0;font-size:13px;line-height:1.42;color:rgba(9,21,36,.6)}

.gd-ctl{position:absolute;right:18px;bottom:18px;z-index:50;width:34px;height:34px;display:grid;place-items:center;
  background:#fff;border:1px solid var(--border);border-radius:50%;cursor:pointer;color:rgba(9,21,36,.7)}
.gd-ctl svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.gd-ctl .ic-play{display:none;fill:currentColor;stroke:none}
.gd-ctl.is-paused .ic-pause{display:none}
.gd-ctl.is-paused .ic-play{display:block}

/* the mobile prompt is desktop-hidden; the monitor carries it there */
.gd-m{display:none}
.gd-m-prompt{position:relative;background:#fff;border-radius:16px;padding:20px 22px 22px;
  box-shadow:0 20px 44px -34px rgba(0,0,0,.8)}
.gd-m-lbl{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:10.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(9,21,36,.45)}
.gd-m-lbl i{width:7px;height:7px;border-radius:50%;background:var(--accent-teal)}
.gd-m-txt{display:block;min-height:30px;margin-top:12px;font-size:22px;line-height:1.2;
  letter-spacing:-.015em;color:#091524}
.gd-m-live{position:absolute;right:16px;bottom:-14px;padding:7px 16px;font-size:12px}

@media (max-width:840px){
  /* Phones lose the monitor and the node row entirely. What is left is the
     argument itself: a sentence, then the surfaces that change because of it. */
  .gd{height:auto;padding:64px 0 72px;background:linear-gradient(180deg,#091524,#0B1B30);
    display:flex;flex-direction:column;gap:0}
  .gd-bg,.gd-monitor,.gd-cards-back{display:none}
  .gd-copy{position:relative;left:auto;bottom:auto;width:auto;padding:0 clamp(26px,3.6vw,70px);order:1}
  .gd-m{display:block;order:2;margin:34px 24px 0}
  .gd-cards-front{display:flex;flex-direction:column;gap:10px;position:relative;inset:auto;
    order:3;margin:34px 24px 0;transform:none!important}
  .gc{position:relative;left:auto!important;top:auto!important;width:100%;min-width:0;
    transform:none!important;white-space:normal;padding:16px 18px}
  .gc-label{font-size:16.5px}
  .gc-state{font-size:13.5px}
  .gd-ctl{position:relative;right:auto;bottom:auto;order:4;margin:26px auto 0}
}

/* Action Editor is the field, not a browser mockup. */
.v9-editor-section { padding:108px 0 120px; background:var(--bg-section); }
.v9-editor-heading { max-width:820px; text-align:center; }
.v9-editor-heading h2 { margin-top:16px; font-size:clamp(36px,4.4vw,52px); line-height:1.08; letter-spacing:-.03em; }
.v9-editor-field { width:min(1280px,calc(100% - 32px)); margin:48px auto 0; }
.v9-editor-chrome { display:flex; min-height:570px; overflow:hidden; background:#F9F9F7; border-radius:20px; box-shadow:0 38px 90px -62px rgba(9,21,36,.7); }
.v9-editor-rail { width:70px; flex:0 0 70px; padding:16px 0 14px; display:flex; flex-direction:column; align-items:center; gap:8px; background:linear-gradient(180deg,#091524,#0A1B2E); color:rgba(255,255,255,.55); }
.v9-editor-rail > img { width:30px; height:35px; object-fit:contain; filter:brightness(0) invert(1); opacity:.92; margin-bottom:14px; }
.v9-rail-icon { width:40px; height:40px; display:grid; place-items:center; border-radius:9px; }
.v9-rail-icon.is-active { background:rgba(255,255,255,.12); color:#fff; }
.v9-rail-icon svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.v9-rail-spacer { flex:1; }
.v9-rail-avatar { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:var(--accent-teal); color:#fff; font-size:10px; font-weight:600; }
.v9-editor-main { flex:1; min-width:0; display:flex; flex-direction:column; }
.v9-editor-topbar { height:64px; flex:0 0 64px; display:flex; align-items:center; gap:14px; padding:0 22px; background:rgba(249,249,247,.97); border-bottom:1px solid var(--border); }
.v9-editor-back { width:28px; height:28px; display:grid; place-items:center; color:var(--text-muted); }
.v9-editor-back svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; }
.v9-editor-title { font-size:14px; font-weight:600; }
.v9-editor-context { padding-left:14px; border-left:1px solid var(--border); font-family:var(--mono); font-size:11px; color:var(--text-muted); }
.v9-editor-tools { margin-left:auto; display:flex; align-items:center; gap:24px; color:var(--text-body); font-size:12px; }
.v9-editor-tools .v9-save { background:var(--accent-teal); color:#fff; padding:8px 17px; border-radius:999px; font-weight:600; }
.v9-editor-canvas { position:relative; flex:1; overflow:hidden; background-color:#F0EFE9; background-image:radial-gradient(circle,rgba(9,21,36,.105) 1px,transparent 1px); background-size:26px 26px; }
.v9-editor-prompt { position:absolute; z-index:4; left:50%; top:38px; transform:translateX(-50%); width:min(570px,80%); background:#fff; border:1px solid var(--border); border-radius:12px; padding:15px 18px 16px; box-shadow:0 18px 48px -30px rgba(9,21,36,.5); }
.v9-prompt-label { display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--text-muted); }
.v9-prompt-label i { width:7px; height:7px; border-radius:50%; background:var(--accent-teal); }
.v9-prompt-text { display:block; min-height:27px; margin-top:8px; font-size:17px; letter-spacing:-.01em; }
.v9-prompt-text b { display:inline-block; width:2px; height:1.05em; margin-left:2px; background:var(--accent-teal); transform:translateY(3px); animation:v9-blink 1s steps(1) infinite; }
@keyframes v9-blink { 50% { opacity:0; } }
.v9-editor-wires { position:absolute; z-index:1; inset:0; width:100%; height:100%; pointer-events:none; }
.v9-editor-wires path { fill:none; stroke:var(--accent-teal); stroke-width:2; vector-effect:non-scaling-stroke; stroke-linecap:round; }
.v9-flow { position:absolute; z-index:2; left:5%; right:5%; top:42%; display:grid; grid-template-columns:repeat(4,1fr); gap:7.5%; align-items:center; }
.v9-flow-node { position:relative; min-height:154px; padding:17px 17px 35px; background:#fff; border:1px solid rgba(9,21,36,.12); border-radius:12px; box-shadow:0 12px 28px -22px rgba(9,21,36,.38); transition:opacity .3s ease, transform .35s ease; }
.v9-flow-node > span { font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--text-muted); }
.v9-flow-node h3 { margin-top:9px; font-size:16px; line-height:1.15; letter-spacing:-.015em; }
.v9-flow-node p { margin-top:12px; color:var(--text-body); font-size:12.5px; line-height:1.45; }
.v9-flow-node small { position:absolute; left:20px; right:20px; bottom:0; padding:9px 0 10px; border-top:1px solid var(--border); font-size:9.5px; color:var(--text-muted); }
.v9-editor-section.is-changing .v9-flow-node { opacity:.16; transform:translateY(6px); }
.v9-editor-scenarios { display:grid; grid-template-columns:repeat(3,1fr); margin-top:1px; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.v9-editor-scenarios button { display:flex; align-items:baseline; gap:13px; min-height:66px; padding:0 20px; border:0; border-right:1px solid var(--border); background:transparent; text-align:left; font-size:13.5px; color:var(--text-body); cursor:pointer; transition:background .2s ease,color .2s ease; }
.v9-editor-scenarios button:last-child { border-right:0; }
.v9-editor-scenarios button span { font-family:var(--mono); font-size:9px; letter-spacing:.12em; }
.v9-editor-scenarios button:hover,.v9-editor-scenarios button.is-active { background:#fff; color:var(--text-primary); }
.v9-editor-scenarios button.is-active { box-shadow:inset 0 2px 0 var(--accent-teal); }
.v9-editor-coda { margin-top:28px; text-align:center; font-family:var(--brand); font-size:clamp(20px,2vw,27px); font-weight:600; letter-spacing:-.018em; }

/* Four expressions, one destination — North-style stacking cards. */
.v9-stackwrap { padding:112px 0; }
/* Aligned to the same left gutter as the Desk headline above it, not to the
   centred shell — the two headlines share one rail. */
.v9-stack-head { margin-bottom:44px; padding-inline:clamp(26px,3.6vw,70px); }
.v9-stack-head h2 { margin-top:16px; max-width:24ch; font-size:clamp(34px,4vw,48px); line-height:1.1; letter-spacing:-.027em; text-wrap:balance; }
.v9-stack { width:min(1420px,calc(100% - 24px)); margin-inline:auto; display:flex; flex-direction:column; gap:24px; }
.v9-card { position:sticky; top:calc(76px + var(--i) * 64px); min-height:calc(100vh - (76px + var(--i) * 64px) - 92px); display:flex; flex-direction:column; padding:clamp(22px,3vw,40px) clamp(28px,4vw,56px) clamp(28px,4vw,56px); background:linear-gradient(145deg,#091524,#0B1B30); border-radius:26px; border-top:1px solid rgba(56,182,255,.28); color:var(--text-light); box-shadow:0 -18px 50px -34px rgba(9,21,36,.55); }
.v9-card > .v9-card-kicker { margin-bottom:clamp(14px,2.5vh,30px); }
.v9-card-inner { flex:1; display:grid; grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr); gap:clamp(36px,5vw,72px); align-items:center; width:100%; }
.v9-card-kicker { font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-lime); }
.v9-card-copy h3 { margin-top:0; font-size:clamp(34px,4.2vw,54px); line-height:1.05; letter-spacing:-.03em; font-weight:650; color:var(--text-light); text-wrap:balance; }
.v9-card-body { margin-top:18px; max-width:420px; font-size:clamp(15.5px,1.4vw,17.5px); line-height:1.55; color:rgba(249,249,247,.66); }
.v9-card-detail { margin-top:14px; max-width:420px; font-size:clamp(13px,1.1vw,14.5px); line-height:1.6; color:rgba(249,249,247,.44); }
.v9-card-demo { min-width:0; }
.v9-card .v9-demo { margin-top:0; }
.v9-card .v9-demo-ctl { position:absolute; right:18px; bottom:18px; }
.v9-frame { background:#F9F9F7; border-radius:16px; overflow:hidden; border:1px solid var(--border); }
.v9-frame-top { display:flex; align-items:center; gap:12px; height:46px; padding:0 16px; background:#fff; border-bottom:1px solid var(--border); }
.v9-frame-dots { display:flex; gap:5px; }
.v9-frame-dots i { width:9px; height:9px; border-radius:50%; background:var(--border-med); }
.v9-frame-title { font-size:13px; font-weight:600; color:#091524; }
.v9-frame-ctx { padding-left:12px; border-left:1px solid var(--border); font-family:var(--mono); font-size:11px; color:rgba(9,21,36,.6); }
.v9-frame-live { margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:rgba(9,21,36,.5); transition:color .3s ease; }
.v9-frame-live i { width:6px; height:6px; border-radius:50%; background:currentColor; }
.v9-frame-live.is-live { color:#0F7D5D; }
.v9-frame-body { padding:clamp(16px,2vw,24px); }
.v9-frame-body .v9-photo-wrap, .v9-frame-body .v9-photo-tree { margin-top:0; }
.v9-frame-body .v9-upload-desk { background:transparent; padding:0; }

.v9-card .v9-demo-write p { color:var(--text-primary); }
.v9-card .v9-upload-desk { color:var(--text-primary); }
.v9-card .v9-upload-or { color:rgba(249,249,247,.5); }
@media (max-width:840px) {
  .v9-card { position:static; min-height:0; }
  .v9-card-inner { grid-template-columns:1fr; gap:28px; }
}

/* legacy tab styles below are unused by the stack */
/* Four expressions, one destination. */
.v9-expression { padding:112px clamp(26px,3.6vw,70px); }
/* Headline sits above the whole thing, at the size and rail of the headlines
   before it; the grid below starts at the buttons so the canvas lines up. */
.v9-expression-head { margin-bottom:clamp(38px,4vw,56px); }
.v9-expression-head h2 { margin-top:16px; max-width:24ch; font-size:clamp(34px,4vw,48px); line-height:1.1; letter-spacing:-.027em; text-wrap:balance; }
.v9-expression-grid { display:grid; grid-template-columns:minmax(300px,.72fr) minmax(0,1.28fr); gap:clamp(36px,4vw,64px); align-items:start; }
.v9-mode-list { display:flex; flex-direction:column; gap:10px; }
/* Child combinator, not descendant, and it is load-bearing. In accordion mode
   the script moves each pane INSIDE .v9-mode-list (insertAdjacentElement after
   its button), so a descendant selector also caught every decorative <button>
   inside the demos — the three items in Map it's dropdown were being given
   min-height:58px, 17px padding, a white fill and a 14px radius as if they were
   mode buttons. That was the real reason Map it would not shrink on a phone. */
.v9-mode-list > button { width:100%; display:block; min-height:58px; padding:17px 20px; background:#fff; border:1px solid var(--border); border-radius:14px; text-align:left; font-size:16px; cursor:pointer; color:var(--text-body); transition:border-color .18s ease, transform .18s ease, color .18s ease, box-shadow .18s ease; }
.v9-mode-text { display:block; min-width:0; }
.v9-mode-text b { display:block; font-weight:600; font-size:16px; color:inherit; }
.v9-mode-text small { display:grid; grid-template-rows:0fr; overflow:hidden; font-size:13.5px; line-height:1.5; color:var(--text-muted); transition:grid-template-rows .28s ease, opacity .2s ease; opacity:0; }
.v9-mode-text small > span { min-height:0; }
.v9-mode-list > button.is-active .v9-mode-text small { grid-template-rows:1fr; opacity:1; padding-top:6px; }
.v9-mode-list > button:hover { border-color:var(--accent-teal); color:var(--text-primary); transform:translateY(-1px); }
.v9-mode-list > button.is-active { border-color:var(--accent-teal); color:var(--text-primary); box-shadow:0 10px 24px -18px rgba(9,21,36,.35); }
/* no panel around the window, and no sticky — the window is the object */
.v9-mode-surface { position:relative; padding:0; background:transparent; border:0; border-radius:0; }
.v9-mode-pane[hidden] { display:none; }
.v9-mode-pane { animation:v9-mode-settle .4s ease both; }
/* the copy column sets the left rail; nothing in it is centred */
/* The copy column is narrow in this layout, so the section headline runs at a
   smaller size here than it does over a full-width stack. */

.v9-demo-ctl { position:absolute; right:14px; bottom:14px; z-index:5; width:34px; height:34px; display:grid; place-items:center; background:#fff; border:1px solid var(--border); border-radius:50%; cursor:pointer; color:var(--text-body); transition:border-color .18s ease, color .18s ease; }
.v9-demo-ctl:hover { border-color:var(--accent-teal); color:var(--text-primary); }
.v9-demo-ctl svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.v9-demo-ctl .ic-play { display:none; fill:currentColor; stroke:none; }
.v9-demo-ctl.is-paused .ic-pause { display:none; }
.v9-demo-ctl.is-paused .ic-play { display:block; }
@media (prefers-reduced-motion:reduce) { .v9-demo-ctl { display:none; } }
.v9-mode-source { min-height:0; padding:0; background:transparent; border:0; border-radius:0; box-shadow:none; }
.v9-mode-source > span::before { content:''; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--accent-teal); margin-right:8px; vertical-align:1px; }
.v9-mode-photo { width:100%; height:auto; max-height:440px; object-fit:cover; object-position:center 42%; display:block; margin-top:20px; border-radius:12px; }
.v9-mode-photo[hidden], [data-mode-source][hidden], .v9-demo[hidden] { display:none; }
.v9-demo { margin-top:20px; }
.v9-demo-write { background:#fff; border:1px solid var(--border); border-radius:12px; padding:20px 22px; min-height:110px; }
.v9-demo-write p { font-size:clamp(17px,1.7vw,21px); line-height:1.5; letter-spacing:-.01em; }
.v9-caret { display:inline-block; width:2px; height:1.05em; margin-left:2px; background:var(--accent-teal); transform:translateY(3px); animation:v9-blink 1s steps(1) infinite; }
.v9-demo-import { position:relative; }
.v9-upload-desk { background:var(--bg-card); border-radius:14px; padding:14px; }
.v9-upload-head { display:flex; align-items:center; gap:9px; padding:2px 4px 12px; font-size:14px; font-weight:600; }
.v9-upload-head img { height:20px; width:auto; }
.v9-upload-status { margin-left:auto; font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); }
.v9-upload-status.is-ready { color:#0F7D5D; }
.v9-upload-drop { position:relative; min-height:96px; background:#fff; border:1.5px dashed var(--border-med); border-radius:10px; padding:10px 12px; }
.v9-upload-hint { position:absolute; inset:0; display:grid; place-items:center; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); }
.v9-upload-drop ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; }
.v9-upload-drop li { display:flex; align-items:center; gap:9px; font-family:var(--mono); font-size:12.5px; color:var(--text-body); opacity:0; transform:translateY(5px); transition:opacity .3s ease, transform .3s ease; }
.v9-upload-drop li::before { content:'\2713'; color:#0F7D5D; font-weight:700; }
.v9-upload-drop li.in { opacity:1; transform:none; }
.v9-tree { display:none; width:100%; aspect-ratio:640/320; position:relative; }
.v9-upload-drop.is-building { border-style:solid; background-color:#F0EFE9; background-image:radial-gradient(circle, rgba(9,21,36,.105) 1px, transparent 1px); background-size:18px 18px; }
.v9-upload-drop.is-building ul, .v9-upload-drop.is-building .v9-upload-hint { display:none; }
.v9-upload-drop.is-building .v9-tree { display:block; }
.v9-demo-import.is-building .v9-upload-files, .v9-demo-import.is-building .v9-upload-or { display:none; }
.v9-tree-stage { position:absolute; left:0; top:0; width:640px; height:320px; transform-origin:0 0; }
.v9-tree-wires { position:absolute; inset:0; width:640px; height:320px; overflow:visible; }
.v9-tree-wires path { fill:none; stroke:#4E77AC; stroke-width:2.5; stroke-linecap:round; vector-effect:non-scaling-stroke; opacity:0; transition:opacity .28s ease; }
.v9-tree-wires path.in { opacity:1; }
.v9-tree-node { position:absolute; width:130px; padding:9px 12px 10px; background:#fff; border:1px solid rgba(9,21,36,.12); border-radius:9px; box-shadow:0 1px 2px rgba(9,21,36,.05); font-size:13.5px; font-weight:600; color:#091524; letter-spacing:-.01em; opacity:0; transform:scale(.94); transition:opacity .26s ease, transform .3s cubic-bezier(.2,.75,.3,1); }
.v9-tree-node span { display:block; font-family:var(--mono); font-size:8.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:rgba(9,21,36,.45); margin-bottom:3px; }
.v9-tree-node.in { opacity:1; transform:none; }
.v9-action-chip { position:absolute; left:20px; top:16px; font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:rgba(9,21,36,.55); background:#fff; border:1px solid var(--border); border-radius:999px; padding:5px 11px; }
@media (max-width:620px){ .v9-tree-node { width:104px; font-size:12px; padding:7px 9px 8px; } }
.v9-photo-demo { position:relative; }
.v9-photo-wrap { position:relative; overflow:hidden; border-radius:12px; margin-top:14px; }
.v9-photo-wrap .v9-mode-photo { margin-top:0; }
.v9-scan-zone { position:absolute; left:38%; right:2.5%; top:9%; bottom:13%; overflow:hidden; pointer-events:none; }
.v9-read { position:absolute; border-radius:6px; background:rgba(42,82,142,.14); box-shadow:0 0 0 1.5px rgba(42,82,142,.10); opacity:0; transform:scaleX(.6); transform-origin:left center; transition:opacity .3s ease, transform .34s cubic-bezier(.2,.75,.3,1); transition-delay:calc(var(--i) * 85ms); }
.v9-photo-demo.is-reading .v9-read { opacity:1; transform:none; }
.v9-photo-tree { display:none; width:100%; aspect-ratio:640/320; position:relative; margin-top:14px;
  background-color:#F0EFE9; background-image:radial-gradient(circle, rgba(9,21,36,.105) 1px, transparent 1px);
  background-size:18px 18px; border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.v9-photo-demo.is-built .v9-photo-wrap { display:none; }
.v9-photo-demo.is-built .v9-photo-tree { display:block; }
.v9-write-demo { position:relative; }
.v9-write-tree { display:block; width:100%; aspect-ratio:640/320; position:relative; margin-top:0;
  background-color:#F0EFE9; background-image:radial-gradient(circle, rgba(9,21,36,.105) 1px, transparent 1px);
  background-size:18px 18px; border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.v9-write-demo .v9-demo-write { position:absolute; left:50%; top:44%; transform:translate(-50%,-50%);
  width:min(560px,86%); z-index:2; margin:0; box-shadow:0 22px 60px -30px rgba(9,21,36,.5);
  transition:opacity .4s ease, transform .45s cubic-bezier(.3,.7,.3,1); }
.v9-write-demo.is-built .v9-demo-write { opacity:0; transform:translate(-50%,-64%) scale(.97); pointer-events:none; }
.v9-upload-files { display:flex; flex-direction:column; gap:7px; margin-top:14px; }
.v9-upload-or { font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); padding-left:17px; }
.v9-upload-files .file.is-hover { border-color:var(--accent-teal); }
.v9-upload-files .file { display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--border); border-radius:10px; padding:13px 16px; font-family:var(--mono); font-size:13px; color:var(--text-body); transition:border-color .2s ease, transform .15s ease, opacity .25s ease; }
.v9-upload-files .file::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--accent-teal); flex-shrink:0; }
.v9-upload-files .file.is-pressed { border-color:var(--accent-teal); transform:translateY(1px) scale(.995); }
.v9-upload-files .file.is-done { opacity:.45; }
.v9-upload-files .file.is-done::before { content:'\2713'; width:auto; height:auto; border-radius:0; background:none; color:#0F7D5D; font-weight:700; font-size:12px; }
.v9-cursor { position:absolute; left:12px; top:12px; width:40px; height:40px; z-index:3; pointer-events:none; fill:var(--accent-teal); stroke:#fff; stroke-width:1.4; filter:drop-shadow(0 2px 5px rgba(9,21,36,.3)); transition:left .55s cubic-bezier(.3,.7,.3,1), top .55s cubic-bezier(.3,.7,.3,1), transform .16s ease; }
.v9-cursor.is-click { transform:scale(.82); }

/* ── Map-it stage (Gregory's proto-explainer, scoped) ── */
.v9-mapit-field { width:100%; aspect-ratio:1200/560; position:relative; overflow:hidden; background:#fff; border:1px solid var(--border); border-radius:12px; }
.v9-mapit-stage { position:absolute; top:0; left:0; width:1200px; height:560px; transform-origin:0 0; }
.v9-mapit .cap { position:absolute; left:140px; top:150px; font-family:var(--mono); font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:rgba(9,21,36,.45); }
.v9-mapit .wires { position:absolute; inset:0; width:1200px; height:560px; overflow:visible; pointer-events:none; }
.v9-mapit .wires path { fill:none; stroke:#4E77AC; stroke-width:3.5; stroke-linecap:round; }
.v9-mapit .node { position:absolute; z-index:3; width:300px; background:#fff; border:1px solid rgba(9,21,36,.12); border-radius:12px; padding:22px 24px 24px; box-shadow:0 1px 2px rgba(9,21,36,.04); }
.v9-mapit .node .eye { font-family:var(--mono); font-size:12px; letter-spacing:.10em; text-transform:uppercase; color:rgba(9,21,36,.45); display:block; margin-bottom:10px; }
.v9-mapit .node h3 { margin:0; font-size:26px; line-height:1.18; font-weight:500; color:#091524; letter-spacing:-.015em; }
.v9-mapit .port { position:absolute; z-index:2; width:26px; height:26px; border-radius:50%; background:linear-gradient(145deg,#3E6BA8 0%,#2A528E 45%,#1E3F6E 100%); box-shadow:0 1px 3px rgba(9,21,36,.28); transform:translate(-50%,-50%); transition:transform .24s cubic-bezier(.3,.75,.3,1); }
.v9-mapit .port.held { transform:translate(-15%,-50%) scale(1.12); }
.v9-mapit .port .ring { position:absolute; inset:-7px; border-radius:50%; border:2px solid var(--accent-teal); opacity:0; transform:scale(.6); }
.v9-mapit .port.pulse .ring { animation:v9-mapit-ring .5s cubic-bezier(.2,.7,.3,1); }
@keyframes v9-mapit-ring { from { opacity:.5; transform:scale(.6); } to { opacity:0; transform:scale(1.7); } }
.v9-mapit .node.arrive { opacity:0; transform:scale(.96); }
.v9-mapit .node.arrive.in { opacity:1; transform:none; transition:opacity .30s ease, transform .34s cubic-bezier(.2,.75,.3,1); }
.v9-mapit .menu { position:absolute; width:330px; background:#fff; border:1px solid rgba(9,21,36,.12); border-radius:12px; padding:8px; box-shadow:0 12px 28px rgba(9,21,36,.10), 0 2px 6px rgba(9,21,36,.05); opacity:0; transform:scale(.94); transform-origin:0 40px; pointer-events:none; }
.v9-mapit .menu.in { opacity:1; transform:none; transition:opacity .18s ease, transform .26s cubic-bezier(.2,.9,.3,1); }
.v9-mapit .menu.out { opacity:0; transform:scale(.97); transition:opacity .18s ease, transform .18s ease; }
.v9-mapit .menu .lbl { font-family:var(--mono); font-size:11.5px; letter-spacing:.10em; text-transform:uppercase; color:rgba(9,21,36,.45); padding:10px 14px 12px; display:block; }
.v9-mapit .menu button { display:block; width:100%; text-align:left; border:0; background:none; font-family:var(--sans); font-size:20px; font-weight:400; color:#091524; padding:15px 14px; border-radius:8px; letter-spacing:-.01em; transition:background .16s ease; cursor:default; }
.v9-mapit .menu button.hot { background:rgba(9,21,36,.08); }
.v9-mapit .menu button.chosen { background:var(--accent-teal); color:#fff; }
.v9-mapit .mcursor { position:absolute; left:0; top:0; z-index:20; pointer-events:none; width:40px; height:40px; transform-origin:0 0; opacity:0; filter:drop-shadow(0 3px 7px rgba(9,21,36,.30)); transition:opacity .3s ease; }
.v9-mapit .mcursor.show { opacity:1; }
.v9-mapit .mcursor svg { display:block; width:100%; height:100%; transform-origin:6px 4px; transition:transform .12s cubic-bezier(.3,.7,.3,1); }
.v9-mapit .mcursor.press svg { transform:scale(.86); }
.v9-mapit .mcursor path { fill:var(--accent-teal); stroke:#fff; stroke-width:1.4; }
@media (prefers-reduced-motion:reduce) { .v9-mapit .mcursor { display:none; } }

.v9-mode-source > span,.v9-mode-result-body > span { font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:rgba(249,249,247,.6); }
.v9-mode-source p { margin-top:16px; max-width:620px; font-size:clamp(17px,1.7vw,22px); line-height:1.5; letter-spacing:-.01em; }
.v9-mode-arrow { height:82px; display:flex; justify-content:center; }
.v9-mode-arrow svg { width:36px; height:100px; }
.v9-mode-arrow path { fill:none; stroke:var(--accent-teal); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.v9-mode-result { max-width:520px; margin:0 auto; background:var(--bg-card); padding:16px; border-radius:14px; }
.v9-mode-result-head { display:flex; align-items:center; gap:10px; padding:2px 4px 14px; border-bottom:1px solid var(--border); font-size:14px; font-weight:600; }
.v9-mode-result-head img { width:23px; height:27px; object-fit:contain; }
.v9-mode-result-head > span { margin-left:auto; display:flex; align-items:center; gap:7px; font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:#0F7D5D; }
.v9-mode-result-head i { width:6px; height:6px; border-radius:50%; background:#0F7D5D; }
.v9-mode-result-body { padding:24px; background:#fff; margin-top:14px; border-radius:8px; }
.v9-mode-result-body strong { display:block; margin-top:9px; font-size:22px; letter-spacing:-.018em; }
.v9-mode-result-body small { display:block; margin-top:18px; color:var(--text-muted); font-size:12px; }
.v9-expression-line { margin-top:30px; text-align:center; color:var(--text-body); }
.v9-mode-changed .v9-mode-source,.v9-mode-changed .v9-mode-result { animation:v9-mode-settle .48s ease both; }
@keyframes v9-mode-settle { from { opacity:.2; transform:translateY(7px); } }

/* Scrub hero (V9ScrubHero.astro). Kept here rather than in the component's own
   <style> block: scoped component CSS builds to /_astro/*.css, which the deploy
   step never copies to the repo root, so the section would ship unstyled. */
/* The shared mask keeps the panel's bottom-right corner, which is the one dark
   corner of the plunge art — so this layer gets its own mask, aimed at where
   its light actually is (lower left), and sits below the headline. */
#sh-artZ { -webkit-mask-image:radial-gradient(ellipse 130% 108% at 38% 74%, #000 34%, transparent 92%); mask-image:radial-gradient(ellipse 130% 108% at 38% 74%, #000 34%, transparent 92%); }
.sh-art-plunge { background-image:url(../assets/vector-art/vector-plunge.svg); background-position:center 65%; animation-duration:24s; }
.sh-art-fissure { background-image:url(../assets/vector-art/vector-fissure.svg); }
.sh-art-merge { background-image:url(../assets/vector-art/vector-merge.svg); }
.sh {
  --sh-radius:12px;
  --sh-line:rgba(9,21,36,.12);
  --sh-gradient-navy:
    radial-gradient(ellipse 90% 70% at 35% 25%, rgba(14,28,50,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 75% 70%, rgba(8,18,35,0.06) 0%, transparent 50%),
    linear-gradient(155deg,#0A1726 0%,#091524 35%,#0A1826 58%,#091524 80%,#081422 100%);
  --sh-col-small:0.342fr;
  --sh-col-large:0.658fr;
  background:var(--bg-primary,#F0EFE9);
}

.sh-wrap { width:100%; padding:0 clamp(18px,2.75vw,56px); }
.sh-runway { position:relative; height:370vh; }
.sh-sticky { position:sticky; top:0; height:100svh; display:flex; align-items:center; }

.sh-duo {
  display:grid; grid-template-columns:var(--sh-col-small) var(--sh-col-large);
  gap:clamp(14px,1.3vw,26px); align-items:stretch; width:100%; margin:0 auto;
  max-width:calc((100svh - 92px) * 2.31);
}

/* left: the copy */
.sh-say {
  position:relative; border-radius:var(--sh-radius); overflow:hidden;
  background:var(--sh-gradient-navy);
  box-shadow:0 1px 2px rgba(9,21,36,.10),0 8px 18px rgba(9,21,36,.07),0 28px 60px rgba(9,21,36,.10);
  container-type:inline-size;
  display:flex; flex-direction:column; justify-content:flex-start;
  padding:clamp(24px,6.4cqi,52px);
}

/* Vector art as atmosphere, one layer per act. Screen blend means it reads as
   light on the surface rather than as a picture. */
.sh-artwrap {
  position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(ellipse 96% 82% at 74% 86%, #000 10%, transparent 74%);
  mask-image:radial-gradient(ellipse 96% 82% at 74% 86%, #000 10%, transparent 74%);
}
.sh-artmove { position:absolute; inset:-26%; will-change:transform; }
.sh-art {
  position:absolute; inset:0; background-position:center; background-size:cover;
  background-repeat:no-repeat; will-change:transform;
  animation:sh-drift 27s ease-in-out infinite alternate;
}
/* background-image for both art layers lives in styles/home-v10.css so the
   paths stay stylesheet-relative like every other asset on the site */
.sh-art-merge { animation-duration:31s; animation-direction:alternate-reverse; }
@keyframes sh-drift {
  from { transform:translate3d(-1.5%,1%,0) scale(1.04) rotate(-1.2deg); }
  to { transform:translate3d(2%,-1.5%,0) scale(1.10) rotate(1.4deg); }
}
.sh-say > *:not(.sh-artwrap) { position:relative; z-index:1; }

/* the two beats occupy the same place; the first holds the height */
.sh-stack { position:relative; margin:auto 0; width:100%; }
.sh-beat { will-change:opacity,transform; }
.sh-beat + .sh-beat { position:absolute; left:0; top:0; width:100%; }

.sh-beat h2 {
  margin:0; color:#fff; font-weight:600;
  font-size:clamp(26px,12.2cqi,66px); line-height:1.02; letter-spacing:-.034em; text-wrap:balance;
  transform-origin:left top; will-change:transform;
}
.sh-beat .sh-accent {
  margin:clamp(18px,5.4cqi,34px) 0 0; color:#fff; opacity:.94; font-weight:400;
  font-size:clamp(16px,5.6cqi,30px); letter-spacing:-.014em;
  transform-origin:left top; will-change:opacity,transform;
}
/* A beat with no paragraph has nothing to make room for, so it never shrinks. */
.sh-beat.sh-big h2 { font-size:clamp(32px,15.4cqi,83px); }
.sh-beat.sh-big .sh-accent { font-size:clamp(20px,7.05cqi,38px); }

/* right: the scrub */
.sh-card {
  position:relative; border-radius:var(--sh-radius); overflow:hidden; background:#1a1712;
  border:1px solid var(--sh-line);
  box-shadow:0 1px 2px rgba(9,21,36,.10),0 8px 18px rgba(9,21,36,.07),0 28px 60px rgba(9,21,36,.10);
  aspect-ratio:1168/768; width:100%; will-change:transform;
  max-width:calc((100svh - 88px) * 1.5208); justify-self:end;
}
.sh-card canvas { display:block; width:100%; height:100%; }
.sh-poster { display:none; position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.sh-card::after {
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:
    radial-gradient(ellipse 82% 88% at 50% 48%, transparent 55%, rgba(10,8,6,.28) 100%),
    linear-gradient(to right, rgba(10,8,6,.34) 0%, transparent 9%),
    linear-gradient(to left, rgba(10,8,6,.22) 0%, transparent 7%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
.sh-bar { position:absolute; left:0; bottom:0; height:1px; width:100%; background:rgba(255,255,255,.10); z-index:3; }
.sh-bar i { display:block; height:100%; width:0; background:rgba(255,255,255,.62); }
.sh-load {
  position:absolute; inset:0; z-index:4; display:grid; place-items:center; background:#1a1712;
  color:rgba(255,255,255,.5); font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; transition:opacity .45s ease;
}
.sh-load.sh-gone { opacity:0; pointer-events:none; }

/* No scrub below 900px: no frames fetched, poster stands in, both beats read
   as plain stacked text. */
@media (max-width:900px) {
  .sh-duo { grid-template-columns:1fr; max-width:none; gap:16px; }
  .sh-runway { height:auto; }
  .sh-sticky { position:static; height:auto; display:block; padding:7vh 0; }
  .sh-say { padding:30px 26px; }
  .sh-beat h2,.sh-beat.sh-big h2 { font-size:clamp(28px,7.4vw,42px); }
  .sh-beat .sh-accent,.sh-beat.sh-big .sh-accent { font-size:clamp(17px,3.6vw,21px); }
  .sh-beat + .sh-beat { position:relative; margin-top:34px; }
  .sh-card canvas,.sh-bar,.sh-load { display:none; }
  .sh-poster { display:block; }
}
@media (prefers-reduced-motion:reduce) {
  .sh-runway { height:auto; }
  .sh-sticky { position:static; height:auto; padding:7vh 0; }
  .sh-beat + .sh-beat { position:relative; margin-top:34px; }
  .sh-art { animation:none; }
  .sh-card canvas,.sh-bar,.sh-load { display:none; }
  .sh-poster { display:block; }
}

/* Your building — the same Desk, switched by organization. Chrome mirrors the product. */
.v9-worlds { padding:clamp(80px,9vw,124px) 0 clamp(72px,8vw,108px); background:var(--bg-primary); overflow:hidden; }
.v9-worlds-head { text-align:center; }
.v9-worlds-head .v9-kicker { display:block; }
.v9-worlds-head h2 { margin-top:16px; font-size:clamp(34px,4.2vw,52px); line-height:1.06; letter-spacing:-.03em; text-wrap:balance; }

.v9-worlds-tabs { display:flex; flex-wrap:wrap; justify-content:center; gap:4px; width:max-content; max-width:100%; margin:clamp(38px,4.5vw,54px) auto 0; padding:4px; background:var(--bg-card); border:1px solid var(--border); border-radius:14px; }
.v9-worlds-tabs button { display:inline-flex; align-items:center; min-height:44px; padding:0 20px; border:1px solid transparent; border-radius:10px; background:transparent; font-size:15px; font-weight:600; color:var(--text-muted); cursor:pointer; transition:background .2s ease,color .2s ease,border-color .2s ease; }
.v9-worlds-tabs button:hover { color:var(--text-primary); }
.v9-worlds-tabs button.is-active { background:#fff; border-color:var(--border); color:var(--text-primary); box-shadow:0 1px 2px rgba(9,21,36,.06); }
.v9-worlds-tabs button:focus-visible { outline:2px solid var(--accent-teal); outline-offset:2px; }

.v9-worlds-stage { margin-top:clamp(40px,4.6vw,58px); }
.v9-world[hidden] { display:none; }
/* The copy only fills about 500px, so a 1560px panel left a canyon between the
   two columns. Narrower panel, both halves pulled toward the middle. */
/* Columns sized to their content and the pair centred, so a portrait photo
   that does not fill its column cannot drag the composition off-centre. */
.v9-world { display:grid; grid-template-columns:minmax(0,560px) auto; justify-content:center; align-items:start; gap:clamp(28px,3.4vw,54px); width:min(1240px,calc(100% - 7vw)); margin-inline:auto; animation:v9-world-in .5s ease both; }
@keyframes v9-world-in { from { opacity:0; transform:translateY(10px); } }
.v9-world-copy h3 { margin-top:0; font-size:clamp(24px,2.5vw,34px); line-height:1.12; letter-spacing:-.026em; text-wrap:balance; }
.v9-world-body { margin-top:18px; max-width:46ch; font-size:16.5px; line-height:1.6; color:var(--text-body); }
.v9-world-figure { margin:0; min-width:0; }
.v9-visually-hidden { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
.v9-open-contact { display:flex; flex-direction:column; align-items:flex-start; gap:6px; margin-top:28px; font-size:16.5px; }
.v9-open-contact a { font-weight:600; color:var(--accent-teal); border-bottom:1px solid transparent; transition:border-color .2s ease; }
.v9-open-contact a:hover { border-bottom-color:currentColor; }
/* Portrait shots would tower over the landscape ones at full column width, so
   cap the height instead of cropping — nothing is cut, they just sit smaller. */
.v9-world-figure img { width:auto; height:auto; max-width:min(100%,620px); max-height:clamp(360px,42vw,540px); border-radius:18px; display:block; }

/* Beats use the site's accordion component verbatim. */
/* a compact footnote under the copy, never a second column */
.v9-world-beats { min-width:0; max-width:420px; margin-top:clamp(24px,2.4vw,32px); }
.v9-world-beats .faq-list { max-width:none; margin-top:0; border-bottom:1px solid rgba(9,21,36,.10); }
.v9-world-beats .faq-a a { margin-top:2px; margin-left:-6px; color:var(--accent-teal); }

.v9-world-beats .faq-item:last-child .faq-a { padding-bottom:6px; }
.v9-world-more { display:inline-flex; align-items:center; gap:8px; min-height:40px; margin-top:16px; font-size:14px; font-weight:600; color:var(--accent-teal); }
.v9-world-more svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s ease; }
.v9-world-more:hover svg { transform:translateX(3px); }

/* Accordion — copied from the product pages so the component stays identical. */
.v9-worlds .faq-list { max-width:820px; margin-top:36px; }
.v9-worlds .faq-item { position:relative; }
.v9-worlds .faq-item::before { content:''; position:absolute; left:0; right:0; top:0; height:1px; background:rgba(9,21,36,0.10); opacity:1; transition:opacity .35s cubic-bezier(0.4,0,0.2,1); }
.v9-worlds .faq-item::after { content:''; position:absolute; left:0; right:0; top:0; height:2px; background:linear-gradient(90deg,#2A528E 0%,#091524 100%); opacity:0; transition:opacity .35s cubic-bezier(0.4,0,0.2,1); }
.v9-worlds .faq-item:first-child::before { opacity:0; }
.v9-worlds .faq-item.open::before { opacity:0; }
.v9-worlds .faq-item.open::after { opacity:1; }
.v9-worlds .faq-q { width:100%; text-align:left; padding:22px 0; display:flex; align-items:center; justify-content:space-between; gap:20px; border:0; background:transparent; font-size:17px; font-weight:600; color:var(--text-primary); font-family:var(--sans); cursor:pointer; transition:color .35s ease; }
.v9-worlds .faq-q .sign { font-size:22px; font-weight:400; color:var(--text-muted); transition:transform .35s cubic-bezier(0.4,0,0.2,1),color .35s ease; flex-shrink:0; line-height:1; }
.v9-worlds .faq-item.open .faq-q { color:var(--accent-teal); }
.v9-worlds .faq-item.open .faq-q .sign { transform:rotate(45deg); color:var(--accent-teal); }
.v9-worlds .faq-a { max-height:0; overflow:hidden; transition:max-height .35s cubic-bezier(0.4,0,0.2,1); }
.v9-worlds .faq-a p { max-width:76ch; font-size:15px; color:var(--text-body); line-height:1.7; padding-bottom:22px; }

/* Inside a world panel the beats are a footnote under the copy, not a column:
   smaller, tighter, out of the way until someone wants them. */
.v9-world-beats .faq-q { padding:13px 0; font-size:14.5px; font-weight:600; gap:16px; }
.v9-world-beats .faq-q .sign { font-size:17px; }
.v9-world-beats .faq-a p { font-size:13.8px; line-height:1.62; padding-bottom:14px; }
.v9-world-beats .faq-a .v9-text-action { min-height:38px; font-size:13.5px; }
.v9-world-desk { min-width:0; }

/* Product doors as an editorial index, not a card grid. */
.v9-start { padding:120px 0 128px; background:var(--bg-dark); color:var(--text-light); }
/* was min(1400px, 100% - 7vw), which landed 2px off the page gutter for no
   reason; the default now covers it */
.v9-start-heading { padding-bottom:64px; }
.v9-start-heading .v9-kicker { color:var(--accent-lime); }
.v9-start-heading h2 { font-size:clamp(36px,4.8vw,58px); line-height:1.04; letter-spacing:-.032em; max-width:26ch; text-wrap:balance; }
.v9-start-heading > p:last-child { font-size:16px; line-height:1.55; color:rgba(249,249,247,.62); max-width:46ch; margin-top:18px; }
/* a grid of cards, not a list of rows */
.v9-start-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.v9-start-list a { display:grid; grid-template-columns:minmax(0,1fr) 42px; grid-template-rows:auto auto; column-gap:20px; align-items:start; min-height:0; padding:clamp(22px,1.9vw,28px); background:rgba(249,249,247,.04); border:1px solid rgba(249,249,247,.14); border-radius:18px; transition:background .22s ease,border-color .22s ease,transform .22s ease; }
.v9-start-list a:hover { background:rgba(249,249,247,.08); border-color:rgba(249,249,247,.34); transform:translateY(-1px); }
.v9-start-list strong { font-family:var(--brand); font-size:clamp(21px,1.9vw,27px); font-weight:600; letter-spacing:-.022em; line-height:1.15; text-wrap:balance; }
.v9-start-list strong { grid-column:1; grid-row:1; }
.v9-start-description { grid-column:1; grid-row:2; margin-top:9px; max-width:32ch; color:rgba(249,249,247,.6); font-size:15px; line-height:1.55; }
.v9-start-arrow { grid-column:2; grid-row:1 / span 2; align-self:center; width:42px; height:42px; display:grid; place-items:center; border:1px solid rgba(249,249,247,.2); border-radius:50%; transition:background .2s ease,color .2s ease,border-color .2s ease; }
.v9-start-list a:hover .v9-start-arrow { background:var(--text-light); border-color:var(--text-light); color:var(--bg-dark); }
.v9-start-list a:hover .v9-start-arrow svg { transform:translateX(2px); }

/* The visitor starts the same act the product enables. */
.v9-open { padding:112px 0 56px; }
.v9-open-grid { display:grid; grid-template-columns:minmax(340px,.78fr) minmax(0,1.22fr); gap:clamp(44px,5vw,80px); align-items:start; }
.v9-open-heading { position:sticky; top:120px; }
.v9-open-heading h2 { margin:0; max-width:15ch; font-size:clamp(32px,3.5vw,44px); line-height:1.1; letter-spacing:-.028em; text-wrap:balance; }
/* target the lead by class: the contact line is the last child now, and was
   picking up the lead's styling instead of its own */
.v9-open-lead { margin-top:20px; max-width:36ch; color:var(--text-body); font-size:16.5px; line-height:1.6; }
.v9-situation { background:#fff; padding:10px; border-radius:18px; }
.v9-situation-canvas { padding:28px; border-radius:10px; background-color:#F9F9F7; background-image:radial-gradient(circle,rgba(9,21,36,.105) 1px,transparent 1px); background-size:18px 18px; }
.v9-situation-canvas > label { display:flex; align-items:center; gap:9px; font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-teal); }
.v9-situation-canvas > label i { width:7px; height:7px; border-radius:50%; background:var(--accent-teal); }
.v9-situation-field { position:relative; margin-top:17px; }
.v9-situation-field textarea { width:100%; min-height:185px; resize:vertical; display:block; padding:21px 22px; border:1px solid var(--border); border-radius:8px; background:#fff; color:var(--text-primary); font-size:clamp(17px,1.7vw,21px); line-height:1.5; letter-spacing:-.01em; }
.v9-situation-field textarea:focus { outline:2px solid var(--accent-teal); outline-offset:2px; }
.v9-cycling-example { position:absolute; left:22px; top:20px; right:22px; pointer-events:none; color:rgba(9,21,36,.35); font-size:clamp(17px,1.7vw,21px); line-height:1.5; letter-spacing:-.01em; opacity:1; transition:opacity .22s ease,transform .22s ease; }
.v9-cycling-example.is-changing { opacity:0; transform:translateY(4px); }
.v9-situation-secondary { display:grid; grid-template-columns:1.1fr .9fr .9fr; gap:12px; margin-top:14px; }
/* one line per field: the placeholder is the label */
.v9-secondary-field { display:block; }
.v9-secondary-field input { width:100%; min-height:54px; padding:0 16px; background:#fff; border:1px solid var(--border); border-radius:10px; color:var(--text-primary); font-size:16px; transition:border-color .18s ease, box-shadow .18s ease; }
.v9-secondary-field input:focus { outline:none; border-color:var(--accent-teal); box-shadow:0 0 0 3px rgba(42,82,142,.12); }
.v9-secondary-field input::placeholder { color:rgba(9,21,36,.42); }
.v9-situation-submit { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:20px; }
.v9-situation-submit p { color:var(--text-muted); font-size:12.5px; }
.v9-situation-submit p.is-error { color:#A33A32; font-weight:600; }
.v9-honeypot { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* A specific signature: full-bleed hillside band, copy set in the sky. */
/* Cut-out hillside on the site's cream. The picture keeps going past the bottom
   of its section by exactly the footer's height, so the trees show in the 12px
   strip and the rounded corners around the (fully opaque) footer. The sky is
   transparent — that is the cream the headline sits in. */
.v9-washougal { position:relative; height:clamp(380px,48vh,580px); background:var(--bg-primary); z-index:0; }
.v9-wash-scene { position:absolute; left:0; right:0; top:0; height:calc(100% + var(--wash-bleed, 0px)); margin:0; overflow:hidden; }
/* No vertical crop: the ragged treetop line against the cream is the whole
   effect. The negative margin pulls up the empty transparent sky instead,
   and the scene's overflow clips the bottom, which the footer covers. */
/* No crop at all. The tallest trees begin 4% into the file — about 37px at
   desktop — so any upward pull cuts the silhouette, which is the effect. */
.v9-wash-scene img { width:100%; height:auto; display:block; }

/* The picture is positioned and the footer is not, so without this the trees
   paint straight over the footer. Opaque navy, just lifted above the bleed. */
footer.site.site { position:relative; z-index:1; }

/* Final action. */
.v9-button-light { margin-top:30px; background:var(--text-light); color:var(--bg-dark); }
.v9-button-light:hover { background:#fff; }

@media (max-width:1050px) {
  .v9-world { grid-template-columns:1fr; justify-content:stretch; gap:30px; width:min(100% - 7vw,900px); }
  .v9-world-figure { order:-1; }
  .v9-world-copy p { max-width:60ch; }
  .v9-hero h1 { font-size:clamp(36px,5.4vw,52px); }
  .v9-flow { left:3%; right:3%; gap:4%; }
  .v9-flow-node { padding-inline:14px; }
  .v9-expression-grid,.v9-open-grid { gap:64px; }
}

@media (max-width:840px) {
  .v9-shell { width:min(100% - 36px,var(--v9-shell)); }
  .v9-desk-intro-grid,.v9-expression-grid,.v9-open-grid,.v9-washougal-grid { grid-template-columns:1fr; }
  .v9-desk-intro { padding-block:92px; }
  .v9-desk-intro-grid { gap:50px; }
  .v9-desk-surface img { width:112%; }
  .v9-editor-chrome { min-height:560px; }
  .v9-flow { grid-template-columns:1fr 1fr; top:39%; gap:18px; }
  .v9-flow-node { min-height:150px; }
  .v9-editor-wires { display:none; }
  .v9-expression { padding-block:92px; }
  .v9-mode-surface,.v9-open-heading { position:static; }
  .v9-mode-surface { min-height:0; }
  .v9-start { padding-block:92px; }
  .v9-start .v9-shell { width:min(100% - 36px,var(--v9-shell)); }
  .v9-start-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .v9-open { padding-block:92px; }
  .v9-open-grid { gap:46px; }
  }

@media (max-width:760px) {
  .v9-scrub { padding-top:76px; }
  .v9-scrub-intro { margin-bottom:36px; }
  .v9-scrub-runway { height:auto; padding-bottom:68px; }
  .v9-scrub-sticky { position:static; height:auto; min-height:0; padding:0 18px; }
  .v9-stage { display:flex; flex-direction:column; height:auto; overflow:visible; background:transparent; border:0; box-shadow:none; }
  .v9-stage::before,.v9-stage-progress,.v9-scrub-markers { display:none; }
  .v9-stage-photo { position:relative; inset:auto; width:100% !important; height:460px; z-index:0; filter:none !important; transform:none !important; }
  .v9-responsibilities { position:relative; inset:auto; display:grid; grid-template-columns:1fr 1fr; opacity:1 !important; transform:none !important; padding:18px 0 34px; background:var(--bg-section); }
  .v9-responsibility { position:static; min-width:0; color:var(--text-primary); text-shadow:none; border-color:var(--border); }
  .v9-responsibility small { color:var(--text-body); }
  .v9-decision { position:relative; left:auto !important; top:auto !important; transform:none !important; width:100% !important; opacity:1; margin-top:0; box-shadow:none; border:1px solid var(--border); }
  .v9-consequences { position:relative; right:auto; top:auto; transform:none !important; width:100%; opacity:1; margin-top:18px; box-shadow:none; border:1px solid var(--border); }
  .v9-consequence { opacity:1; transform:none; }
}

@media (max-width:620px) {
  .v9-worlds-tabs { width:100%; gap:2px; padding:3px; border-radius:12px; }
  .v9-worlds-tabs button { flex:1 1 auto; justify-content:center; min-height:40px; padding:0 13px; font-size:13.5px; }
  .v9-shell { width:calc(100% - 32px); }
  .v9-kicker { font-size:10px; }
  .v9-hero-products { font-size:12.5px; letter-spacing:.05em; }
  .v9-hero h1 { font-size:clamp(32px,9vw,42px); letter-spacing:-.03em; }
  .v9-hero-actions { gap:14px; }

  .v9-scrub-intro h2 { font-size:32px; }
  .v9-stage-photo { height:400px; }
  .v9-responsibilities { grid-template-columns:1fr; }
  .v9-decision strong { font-size:31px; }
  .v9-consequences { padding-inline:18px; }
  .v9-consequence { grid-template-columns:24px 1fr; gap:8px; padding-block:12px; }
  .v9-consequence strong { grid-column:2; text-align:left; margin-top:-8px; }
  .v9-desk-surface img { width:115%; }
  .v9-editor-section { padding-block:82px; }
  .v9-editor-field { width:100%; }
  .v9-editor-chrome { min-height:580px; }
  .v9-editor-rail { width:48px; flex-basis:48px; }
  .v9-editor-rail > img { width:24px; }
  .v9-rail-icon { width:34px; height:34px; }
  .v9-editor-topbar { padding-inline:12px; }
  .v9-editor-context,.v9-editor-tools > span:not(.v9-save),.v9-editor-back { display:none; }
  .v9-editor-tools { margin-left:auto; }
  .v9-editor-prompt { top:26px; width:calc(100% - 26px); padding:14px; }
  .v9-prompt-text { font-size:16px; }
  .v9-flow { top:28%; bottom:22px; overflow-y:auto; display:flex; flex-direction:column; align-items:stretch; }
  .v9-flow-node { min-height:132px; flex:0 0 auto; }
  .v9-editor-scenarios { grid-template-columns:1fr; }
  .v9-editor-scenarios button { min-height:58px; border-right:0; border-bottom:1px solid var(--border); }
  .v9-mode-surface { padding:0; }
  .v9-mode-source { min-height:150px; padding:22px; }
  .v9-mode-result { padding:12px; }
  .v9-start .v9-shell { width:calc(100% - 32px); }
  .v9-start-heading { padding-bottom:40px; }
  .v9-start-list { grid-template-columns:1fr; }
  .v9-start-list strong { font-size:22px; }
  .v9-start-description { font-size:13.5px; }
  .v9-start-arrow { width:36px; height:36px; }
  .v9-situation-canvas { padding:22px; }
  .v9-situation-field textarea { min-height:205px; padding:20px; }
  .v9-cycling-example { left:20px; right:20px; top:19px; }
  .v9-situation-secondary { grid-template-columns:1fr; }
  .v9-situation-submit { align-items:stretch; flex-direction:column; }
  .v9-situation-submit .v9-button { width:100%; }
    }

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .v9-prompt-text b { opacity:1; }
}

/* ── Washougal section, phones ──────────────────────────────────────────────
   The section is clamp(380px,48vh,580px) tall and holds a width:100%/height:auto
   image. On a phone the picture renders ~255px inside a ≥380px box, so the
   difference is dead cream between the trees and the footer — it reads as a
   broken layout, which is exactly how it was reported. Height comes from the
   picture instead. Mobile only; the desktop composition is untouched. */
@media (max-width:840px) {
  /* .v9-wash-scene is absolutely positioned, so height:auto alone collapses the
     section to nothing. Putting the picture back in flow is what makes the
     section as tall as the picture. The bleed it gives up only ever existed so
     the trees showed in the strip around the inset footer card — and the footer
     runs edge to edge on a phone now, so there is no strip to fill. */
  .v9-washougal { height:auto; min-height:0; }
  .v9-wash-scene { position:static; height:auto; }
}


/* ══════════════════════════════════════════════════════════════════════════
   Folded in from styles/home-v11.css on promotion, Aug 8 2026.
   These were scoped under .is-v11 while the homepage was a draft. The class is
   gone, so they sit at the end of this file on purpose: several tie on
   specificity with the base rules above and rely on source order to win, which
   is exactly the relationship .is-v11 used to provide. Do not hoist this block.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══ Hero, video edition ═════════════════════════════════════════════════ */

.shv {
  /* One spacing scale for the whole hero. Every gap in here used to be its own
     clamp with no relationship to the others, which is what made the rhythm
     read as arbitrary. */
  --shv-gap-s:clamp(8px,0.9vw,14px);
  --shv-gap-m:clamp(22px,2.4vw,34px);
  --shv-gap-l:clamp(44px,5vw,72px);
  --shv-radius:12px;
  --shv-line:rgba(9,21,36,.12);
  --shv-navy:
    radial-gradient(ellipse 90% 70% at 35% 25%, rgba(14,28,50,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 75% 70%, rgba(8,18,35,0.06) 0%, transparent 50%),
    linear-gradient(155deg,#0A1726 0%,#091524 35%,#0A1826 58%,#091524 80%,#081422 100%);
  background:var(--bg-primary);
  /* No runway and no sticky wrapper. The old hero reserved 370vh of scroll to
     drive the canvas; this one is just a section you scroll past. */
  padding:clamp(14px,2vh,26px) 0 clamp(40px,5vh,72px);
  /* The hero owns the first screen. Without this the next section crested into
     view underneath it, so the page opened as two things at once — the exact
     crowding this layout was meant to solve. svh, not vh, so a phone's
     collapsing URL bar does not leave a gap. */
  /* 72px is the measured nav height, not a guess — the hero starts directly
     under it, so this is exactly the rest of the first screen. */
  min-height:calc(100svh - 72px);
  display:flex; flex-direction:column; justify-content:center;
}
/* same gutter as every other section — was clamp(18px,2.75vw,56px), which sat
   12px left of the rest */
.shv-wrap { width:100%; padding:0 clamp(26px,3.6vw,70px); }
/* One column, not two. The navy panel and the video used to arrive side by side
   at equal weight, both starting the instant the nav ended, so nothing said where
   to begin — which is what read as "blocks crammed". Words first, then the
   picture. The calm comes from sequence, not from padding. */
/* Copy block, then a two-up band. Both panels sit BELOW the headline, so unlike
   the old side-by-side they are not competing with the arrival — which is the
   whole difference between this and what read as blocks crammed together. */
.shv-band { width:100%; }
/* One visual, inset, and a long way below the words. Ruul leaves roughly a third
   of the first screen empty between the buttons and the picture; that gap is
   doing as much work as anything on the page. */
.shv-band { display:block; }

/* ── the sentence: the cause ─────────────────────────────────────────────── */
.shv-sentence {
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-section); border:1px solid var(--border);
  border-radius:var(--shv-radius); padding:clamp(22px,2.4vw,40px);
  container-type:inline-size;
}
.shv-sentence-card { width:100%; }
.shv-sentence-label {
  display:block; font-family:var(--mono); font-size:clamp(9.5px,1.6cqi,11px);
  font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted);
}
.shv-sentence-line {
  margin:clamp(12px,2.4cqi,20px) 0 0; color:var(--text-primary);
  font-size:clamp(17px,4.4cqi,27px); line-height:1.28; letter-spacing:-.018em;
  min-height:2.6em;   /* holds its height while the line retypes */
}
.shv-caret {
  display:inline-block; width:2px; height:.98em; margin-left:2px;
  background:var(--accent-teal); vertical-align:-.12em;
  animation:shv-blink 1.05s steps(1,end) infinite;
}
@keyframes shv-blink { 0%,49% { opacity:1 } 50%,100% { opacity:0 } }

/* ── the panel ───────────────────────────────────────────────────────────── */
/* The navy panel existed only to hold the headline. Once the headline is not
   competing with anything it does not need a container, and a box around the
   first words a reader sees is exactly what stops a page feeling open. */
/* Two columns: the words carry the wider one because they are what has to be
   read, and the video sits smaller beside them rather than under them. */
.shv-duo {
  display:grid;
  /* The copy column is capped near the headline's natural measure instead of
     taking a share of the viewport. A fractional column kept growing while the
     type stopped at its max size, so the wider the display the more empty
     column sat between the words and the video — 313px of it at 1920. The
     video takes whatever is left, which also means it grows on big screens
     instead of the gap growing. */
  grid-template-columns:minmax(0, clamp(320px, 33vw, 580px)) minmax(0, 1fr);
  gap:var(--shv-gap-l); align-items:stretch;
  /* No horizontal padding and no 1240 cap: .shv-wrap already pads the section,
     and the pair was costing ~95px a side to double padding plus another 100 to
     the cap. The split stays 57/43 — the row just stops throwing away the room
     the video needed. */
  width:100%; max-width:none; margin:0 auto;
  padding:clamp(40px,7vh,92px) 0 0;
}
/* The column stretches to the video's height and the copy stays optically
   centred in it. The foot used to reserve a fixed height for the trust row that
   was pinned there; the row is its own band under the pair now, so the reserve
   came out and the headline centres against the whole video instead of against
   the video minus a logo strip. */
.shv-say {
  position:relative; display:flex; flex-direction:column; align-items:flex-start;
  justify-content:center; text-align:left; background:none; box-shadow:none;
  border-radius:0; container-type:inline-size;
  padding:0;
}
.shv-say > *:not(.shv-artwrap) { position:relative; z-index:1; }

.shv-products {
  margin:0; font-family:var(--sans); font-weight:600;
  /* Same face and nearly the same size as the headline, separated by tone, not
     by scale. That tonal step is the whole difference between "headline plus
     caption" and one sentence that carries on. */
  font-size:clamp(15px,1.32vw,19px); line-height:1.35; letter-spacing:-.008em;
  font-weight:500; color:var(--text-muted); text-wrap:pretty; max-width:34ch;
}

/* One headline, centred in the panel, never moving. */
/* The headline used to flex to fill the panel, which is what held the product
   line at the very top. That line is a subtitle now, so the two are wrapped and
   centred together and the CTAs keep the bottom. */
.shv-mid { display:flex; flex-direction:column; align-items:flex-start; gap:var(--shv-gap-s); }
.shv-say h1 {
  margin:0; color:var(--text-primary); font-weight:600; max-width:none;
  font-size:clamp(29px,3.6vw,54px); line-height:1.08; letter-spacing:-.026em; text-wrap:balance;
}

.shv-actions { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:var(--shv-gap-m); }
.shv-actions .v9-button-primary { background:var(--bg-dark); color:var(--text-light); }
.shv-actions .v9-button-primary:hover { background:var(--accent-teal); }
.shv-actions .v9-text-action { color:var(--text-primary); }
.shv-actions .v9-text-action:hover { color:var(--accent-teal); }

/* ── vector art behind the panel ─────────────────────────────────────────── */
/* The plunge artwork, always on — the background this panel has always had.
   An earlier pass stacked fissure and merge on top of it and the three
   composited into a hard diamond instead of atmosphere. */
.shv-artwrap {
  display:none;
  position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  /* screen blend brightens whatever is under it, which is why this read as a
     bright blue panel rather than a navy one with texture in it. Pulled well
     down and then covered by the scrim below. */
  mix-blend-mode:screen; opacity:.30;
  -webkit-mask-image:radial-gradient(ellipse 130% 108% at 38% 74%, #000 34%, transparent 92%);
  mask-image:radial-gradient(ellipse 130% 108% at 38% 74%, #000 34%, transparent 92%);
}
/* Navy over the art, under the words. Sits at z-index 0 like .shv-artwrap but
   paints after it, because a pseudo-element comes last in paint order among
   equals — the copy is at z-index 1 and stays clear of both.
   Weighted: heaviest top-right where the artwork was brightest and the eye has
   no reason to go, lightest at the lower left so the plunge shape still shows. */
.shv-say::after { content:none; }
.shv-say--legacy::after {
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 120% 100% at 22% 88%, rgba(9,21,36,.04) 0%, rgba(9,21,36,.40) 62%, rgba(9,21,36,.58) 100%),
    linear-gradient(148deg, rgba(9,21,36,.46) 0%, rgba(9,21,36,.26) 46%, rgba(9,21,36,.50) 100%);
}
.shv-artmove { position:absolute; inset:-26%; will-change:transform; }
.shv-art {
  position:absolute; inset:0; background-position:center; background-size:cover;
  background-repeat:no-repeat; animation:shv-drift 27s ease-in-out infinite alternate;
}
.shv-art-plunge { background-image:url(../assets/vector-art/vector-plunge.svg); background-position:center 65%; animation-duration:24s; }
@keyframes shv-drift {
  from { transform:translate3d(-1.5%,1%,0) scale(1.04) rotate(-1.2deg); }
  to { transform:translate3d(2%,-1.5%,0) scale(1.10) rotate(1.4deg); }
}

/* ── the video ───────────────────────────────────────────────────────────── */
/* Left edge, not centre. A centred strip under a split, left-aligned hero was a
   third alignment system on one screen — the thing that read as amateur. */
/* A band of its own under the pair, not a tenant of the copy column. It is
   centred because it is now the full width of the section and a left-aligned
   row of four would drift away from the axis the video sits on. */
.shv-logos { margin:clamp(46px,5vw,78px) 0 0; padding:0; }
.shv-logos-head {
  margin:0; font-family:var(--mono); font-size:11px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted); text-align:center;
}
/* Explicit track counts at each width rather than flex-wrap. Wrapping by fit
   put three marks on the first line and one orphan on the second, because the
   four are 266/180/243/127 wide — a grid drops cleanly 4 → 2 → 1 instead. */
.shv-logos-row {
  list-style:none; margin:clamp(18px,2vw,28px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(5, auto); justify-content:center;
  column-gap:clamp(34px,4.2vw,84px); row-gap:clamp(22px,2.6vw,38px);
  align-items:center; justify-items:center;
}
.shv-logos-row li { display:flex; align-items:center; min-width:0; }

/* ONE knob for the whole wall. Every logo is a multiple of this, so the row
   scales as a unit and the optical balance survives a resize.

   The 32px floor this carried was set by Eastern Oregon University's original
   lockup, whose light letterspaced "UNIVERSITY" dissolved below ~40px. EOU is
   out of the row now, so that constraint left with it and the whole wall came
   down a size. What remains is a deliberate trade: at 26–31px the subordinate
   lines inside Grant County and Beaverton ("Oregon", "OREGON") are texture
   rather than reading matter. That is the intent — this row is a credential,
   not a paragraph, and it was reading too loud. */
.shv-logos-row { --lg-u:clamp(26px, 1.8vw, 31px); }

/* Logos, not buttons: no pill, no fill, no common height. Sizing four marks to
   one height is the usual mistake — at 8.3:1, iHeartMedia would run three times
   the width of Beaverton's 2.2:1 stack and read as the only real customer. The
   multipliers below equalise optical mass instead, part-way between equal-height
   and equal-area, which is what a hand-built logo wall does.

   object-fit keeps the ratio honest if max-width ever bites in a narrow column;
   without it a capped width against a fixed height would squash the mark. */
.shv-logos-row img {
  display:block; width:auto; max-width:100%; object-fit:contain;
  /* Black artwork on a light ground — opacity IS the grey, and it leaves
     Pick-n-Pull's knocked-out white lettering reading against its own bar.

     This only works because every mark is genuinely the same black. Pick-n-Pull
     shipped as #231f20, a warm near-black, which at .72 rendered it ~25 levels
     lighter than the rest and made the row look like mixed greys; its artwork
     was normalised to #000 on 2026-08-09. All five now land on the same ink
     level, so this one number governs the whole wall.

     Note the residual: identical colour does not mean identical apparent
     weight. Beaverton is fine line art and reads lighter than solid marks like
     ICANN no matter what this is set to. That is the artwork, not the CSS.

     Landed by walking a measured ladder rather than guessing, over three passes:
     .58 was too loud, .24 (matched to Ruul, the reference Gregory kept pointing
     at, whose marks bottom out near 190/255 on a similar ground) came back as
     slightly too faint, .30 was still short, .38 was close and settled at .40.
     Ladder for the next adjustment: .46→129, .38→148, .32→162, .26→177, .20→191.
     Do not go under .24 chasing "fainter" — Beaverton's grass and the ICANN
     globe stop being faint and start being absent around .20. */
  opacity:.40;
}
/* The first pass at these came off aspect ratio alone, which balances the area
   each mark occupies but not how much of that area is ink. iHeartMedia is heavy
   bold type against a solid heart, and Pick-n-Pull is white knocked out of a
   filled black bar — both near-total coverage. Eastern Oregon University is a
   fine serif and Beaverton is line art, both mostly air. Matched on area, the
   two dense marks read a size larger than they are, so they are knocked back
   ~14% against the light two.

   The multipliers below are NOT re-derived when a mark joins or leaves. The
   formula normalises against the set's mean, so adding Grant County and ICANN
   would have quietly rescaled the three Gregory already signed off on. Those
   three are pinned to his values and the newcomers were fitted onto that scale
   instead (measured ink coverage, calibrated against the approved three — the
   fit reproduces Pick-n-Pull at 1.03 against his 1.16, close enough to trust it
   for a mark nobody has eyed yet, not close enough to overrule one he has). */
.shv-logos-row .lg-iheart { height:calc(var(--lg-u) * 0.86); } /* 8.31:1, dense  — approved */
.shv-logos-row .lg-pnp    { height:calc(var(--lg-u) * 1.16); } /* 4.17:1, dense  — approved */
.shv-logos-row .lg-beav   { height:calc(var(--lg-u) * 1.82); } /* 2.19:1, light  — approved */
.shv-logos-row .lg-grant  { height:calc(var(--lg-u) * 1.39); } /* 3.95:1, light  — fitted */
.shv-logos-row .lg-icann  { height:calc(var(--lg-u) * 1.37); } /* 4.11:1, airy — fitted */
/* Eastern Oregon University is out until next year; the rule stays so putting
   the <li> back is the whole restore. */
.shv-logos-row .lg-eou    { height:calc(var(--lg-u) * 1.14); } /* 6.27:1, light */

/* Beaverton is the only mark whose artwork is not beside its wordmark but above
   it — the grass rises off the top of the box, so centring on the box drops the
   lettering below everyone else's. Measured on rendered ink: its wordmark centre
   sits +24.4% of the logo height below its box centre, where iHeartMedia is
   +3.9%, Pick-n-Pull +0.2% and Eastern Oregon University +0.0%. Lifting it 23%
   puts its lettering on the same line as the mean of the other three.

   A percentage translate rather than a pixel nudge, so it holds at every size
   the unit produces, and a transform rather than a margin so the row's own
   height is unaffected. */
.shv-logos-row .lg-beav { transform:translateY(-23%); }

/* 5 across needs ~860px of content at the smaller unit, so the break comes back
   down to 940 — it was 1100 while the marks were a size larger. Below that it
   goes two-up. It never goes one-up: a single
   column hands each mark the full width of the screen, which on a phone made
   iHeartMedia run edge to edge and read as a banner ad rather than a footnote.
   Two columns at a smaller unit is the phone answer, and the unit drops in the
   840 block below. */
/* Three-up then two-up, never three rows. Two columns put five marks on three
   rows and left the fifth stranded on a row of its own, which read as a mistake
   rather than a layout.

   Six equal tracks with every mark spanning two is what makes the bottom row
   centre: items 4 and 5 start at tracks 2 and 4, so the pair sits half a cell in
   from each edge and lands under the gaps in the row above. Equal tracks also do
   the spreading — the marks distribute across the full width instead of bunching
   around whatever the widest one happens to be. */
@media (max-width:940px) {
  .shv-logos-row { grid-template-columns:repeat(6, 1fr); column-gap:clamp(10px,2vw,20px); }
  .shv-logos-row li { grid-column:span 2; justify-self:center; }
  .shv-logos-row li:nth-child(4) { grid-column:2 / span 2; }
  .shv-logos-row li:nth-child(5) { grid-column:4 / span 2; }
}

.shv-card {
  position:relative; border-radius:var(--shv-radius); overflow:hidden; background:#1a1712;
  border:1px solid var(--shv-line);
  box-shadow:0 1px 2px rgba(9,21,36,.10),0 8px 18px rgba(9,21,36,.07),0 28px 60px rgba(9,21,36,.10);
  aspect-ratio:1168/768; width:100%; container-type:inline-size;
  max-width:none;
}
/* The video is an illustration, not the page. At full container width it claimed
   more confidence than the footage earns, so it sits well inside the measure the
   words use — closer to Ruul, where the visual is clearly a supporting artifact. */
/* the file is 1168px wide; past that it is just upscaling */
.shv-card { max-width:1120px; }
.shv-card video { width:100%; height:100%; display:block; object-fit:cover; }
/* ── captions on the picture ─────────────────────────────────────────────── */
.shv-cap {
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:flex; flex-direction:column; align-items:flex-end; text-align:right;
  padding:clamp(46px,7cqi,84px) clamp(20px,3.4cqi,38px) clamp(18px,2.8cqi,30px);
  /* the frame is dense with glass labels, so the text needs its own ground */
  background:linear-gradient(180deg, rgba(8,12,18,0) 0%, rgba(8,12,18,.62) 46%, rgba(8,12,18,.86) 100%);
  opacity:0; transform:translateY(10px);
  transition:opacity .7s ease, transform .8s cubic-bezier(.22,.8,.3,1);
  pointer-events:none;
}
.shv-cap.is-on { opacity:1; transform:none; }
.shv-cap p {
  margin:0; max-width:min(62%, 46ch); color:rgba(255,255,255,.9); font-size:clamp(13px,2.5cqi,19px);
  line-height:1.32; letter-spacing:-.012em; text-wrap:balance;
  text-shadow:0 1px 12px rgba(0,0,0,.6);
}
.shv-cap b {
  display:block; margin-top:.28em; color:#fff; font-weight:600;
  font-size:clamp(15px,3.1cqi,24px); letter-spacing:-.018em;
  text-shadow:0 1px 12px rgba(0,0,0,.6);
}

.shv-card::after {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:
    radial-gradient(ellipse 82% 88% at 50% 48%, transparent 55%, rgba(10,8,6,.28) 100%),
    linear-gradient(to right, rgba(10,8,6,.34) 0%, transparent 9%),
    linear-gradient(to left, rgba(10,8,6,.22) 0%, transparent 7%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}

@media (max-width:840px) {
  /* Phones get a substituted composition, not a shrunken one. The video runs
     edge to edge — it is the section, and inset it was spending ~48px of a
     390px screen on margins that made an already-dense frame harder to read. */
  .shv { padding:0 0 40px; }
  .shv-wrap { padding:0; }
  .shv-duo { grid-template-columns:1fr; max-width:none; gap:0; }
  .shv-card { max-width:none; border-radius:0; border-left:0; border-right:0; box-shadow:none; }
  /* Words, then the video, then who trusts it — the same order as desktop.
     .shv-say carried order:1 while .shv-band kept the default 0, which put the
     video FIRST and read as the opposite of the comment sitting above it. Both
     ends of the pair are stated now so neither can drift again. The trust row
     is outside .shv-duo entirely, so it follows the video on its own. */
  .shv-say  { order:1; }
  .shv-band { order:2; }
  /* on a phone the hero is taller than a screen anyway; let it size to content
     so it does not stretch and leave a hole under the logos */
  .shv { min-height:0; display:block; }
  .shv-duo { grid-template-columns:1fr; gap:0; padding:10px 0 0; }
  .shv-band { margin-top:26px; }
  .shv-say { padding-bottom:0; justify-content:flex-start; }
  /* the video runs edge to edge on a phone, so the trust row takes the page
     gutter back rather than inheriting the video's zero inset */
  .shv-logos { margin-top:38px; padding:0 clamp(26px,3.6vw,70px); }
  /* The unit stops tracking the desktop legibility floor here, and deliberately
     lands well under it. This row is a footnote on a phone, not a section — at
     31% of screen width per mark it read as something you were meant to stop and
     study. The unit is set so the widest mark holds ~24% of the screen at any
     phone size, which is quiet enough to scroll past.

     The trade is real and accepted: at this size the fine print inside Eastern
     Oregon University and Beaverton is texture, not reading matter. Desktop is
     where those resolve. */
  /* column-gap is left to the six-track rule above — setting it here (this block
     is later in the file, so it wins) narrowed every track and clamped the widest
     mark below its siblings. */
  .shv-logos-row { --lg-u:clamp(13px, 3.4vw, 17px); row-gap:clamp(20px,5vw,26px); }
  /* the caption is unreadable over this frame at phone width, and the headline
     right beneath it already carries the page */
  .shv-cap { display:none; }
  /* Words first on a phone: the reader needs to know what this is before the
     spectacle, and both David Hicks and James arrived not knowing. No card
     either — a navy panel wedged under the nav reads as a widget on the page.
     The copy sits on the page itself and the video is the only object. */
  .shv-say {
    order:1; padding:10px clamp(26px,3.6vw,70px) 30px;
    background:none; border-radius:0; box-shadow:none; overflow:visible;
  }
  .shv-artwrap { display:none; }
  .shv-say h1 { margin:18px 0 26px; font-size:clamp(32px,8.6vw,46px); color:var(--text-primary); }
  /* a subtitle now, not an uppercase kicker — it takes the prose floor */
  .shv-products { font-size:clamp(17px,4.4vw,21px); letter-spacing:-.012em; color:var(--text-muted); }
  .shv-actions { gap:12px; }
  /* back to the page's own button treatment now the ground is cream */
  .shv-actions .v9-button-primary { background:var(--bg-dark); color:var(--text-light); }
  .shv-actions .v9-button-primary:hover { background:var(--accent-teal); }
  .shv-actions .v9-text-action { color:var(--text-primary); }

  /* 38px text links and 34px controls are under the 44px guideline */
  .shv-actions .v9-text-action,
  .v9-world-beats .faq-a .v9-text-action,
  .v9-world-more { min-height:44px; }
  .gd-ctl { width:44px; height:44px; }
  /* three masked, screen-blended layers compositing behind everything is a
     real cost on a phone for an effect nobody can see at this size */
  .shv-art { animation:none; }
  .shv-artwrap { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  .shv-art { animation:none; }
}
@media (max-width:420px) {
  .shv-actions { flex-direction:column; align-items:stretch; }
  .shv-actions .v9-button, .shv-actions .v9-text-action { justify-content:center; }
}
/* ══ Desk section — the label leads ══════════════════════════════════════ */
/* James, cold: "this is noctel desk — I'd move this up here, that would
   probably help clarify it a lot." David Hicks hit the same wall. The copy sat
   bottom-left under the monitor and was being missed entirely. */
/* The copy and the monitor both drop into normal flow, so the section's height
   comes from its content and the label physically cannot be overlapped. The
   background and the glass cards stay absolute against .gd, which is what the
   card-placement script already measures against. */
.gd { height:auto; padding:clamp(46px,6vw,80px) 0 0; }
.gd-copy {
  /* Out of flow above 1100px so it can be placed without moving the monitor —
     and therefore without moving the card row, which is positioned off the
     monitor. In flow below that, where the gutter is too narrow to hold it. */
  position:relative; left:auto; bottom:auto; z-index:3;
  width:min(760px,calc(100% - 2 * clamp(26px,3.6vw,70px)));
  margin:0 clamp(26px,3.6vw,70px) clamp(30px,3.6vw,52px);
}
/* Above 1101px the copy leaves the flow and drops into the band left of the
   monitor, top edge on the monitor's top edge — so the section reads on two
   horizontals (card row, then monitor + copy) and two verticals (page margin,
   then monitor left = card row left). Its flow block used to be the only thing
   holding the band open above the monitor, so the monitor reserves that itself
   now; without this it rises to the top of the section and the row lands on it.
   Below 1101px the band is too narrow to hold the copy and it stays in flow. */
@media (min-width:1101px) {
  /* left/top are a floor, not the final answer — the script measures the monitor
     and overwrites both. They exist so the section is never rendered with the
     copy at the padding-box origin, which is where an absolute element with no
     coordinates lands: top-left, half off the page, until the script runs. */
  .gd-copy {
    position:absolute; margin:0;
    left:clamp(26px,3.6vw,70px); top:clamp(120px,10vw,180px);
    width:min(480px, 34vw);
  }
  .gd-monitor { margin-top:clamp(120px,10vw,180px); }
}
.gd-copy h2 { max-width:18ch; }
.gd-copy p { max-width:52ch; }
.gd-monitor { position:relative; right:auto; bottom:auto; margin-left:auto; margin-right:-2%; }

@media (max-width:840px) {
  .gd { padding-top:44px; }
  /* margin was 24px on top of the rule above's 24px padding, so this sat at a
     48px inset — double every other section's gutter on a phone */
  .gd-copy { width:auto; margin:0 0 26px; }
  .gd-monitor { margin-right:0; }
}

/* ══ Sections the live page never styled for phones ══════════════════════ */

@media (max-width:840px) {
  /* the hillside reserved 380px minimum while the image rendered ~255px tall,
     leaving a dead cream band above the footer */
  .v9-washougal { height:auto; min-height:0; }
  .v9-wash-scene { position:relative; height:auto; }

  /* the demo window chrome never shed anything at any width */
  .v9-frame-top { height:40px; padding:0 12px; gap:8px; }
  .v9-frame-ctx { display:none; }
  .v9-frame-title { font-size:12px; }
  .v9-frame-body { padding:12px; }
}

@media (max-width:620px) {
  .v9-hero-actions { flex-direction:column; align-items:stretch; gap:12px; }
  .v9-frame-live { display:none; }
}

/* ══ Phones: fewer, larger, taller ═══════════════════════════════════════ */
@media (max-width:840px) {
  /* the live page's mobile type is a faithful scale-down of the desktop ramp,
     which reads small in the hand — these lift the blocks a phone reader
     actually stops on */
  .gd-copy h2 { font-size:clamp(30px,8vw,42px); }
  .gd-copy p { font-size:16.5px; line-height:1.6; }
  .v9-stack-head h2,
  .v9-worlds-head h2,
  .v9-open-heading h2,
  .v9-start-heading h2 { font-size:clamp(28px,7.4vw,38px); }
  .v9-world-copy h3 { font-size:clamp(23px,6vw,30px); }
  .v9-world-body,
  .v9-open-lead { font-size:16.5px; }

}

/* ══ Desk on a phone ═════════════════════════════════════════════════════ */
/* The monitor is gone at this width, so the prompt has to carry "this is a
   product" on its own — the same window chrome the desktop version wears
   inside the monitor, at a size that stays legible. */
.gd-m-win {
  background:#F9F9F7; border:1px solid rgba(9,21,36,.10); border-radius:14px; overflow:hidden;
  box-shadow:0 20px 44px -30px rgba(0,0,0,.7);
}
.gd-m-bar {
  display:flex; align-items:center; gap:11px; height:42px; padding:0 14px;
  background:#fff; border-bottom:1px solid var(--border);
}
.gd-m-dots { display:flex; gap:5px; }
.gd-m-dots i { width:8px; height:8px; border-radius:50%; background:var(--border-med); }
.gd-m-title { font-size:12.5px; font-weight:600; color:#091524; }
.gd-m-bar .gd-m-live {
  position:static; margin-left:auto; padding:5px 13px; border-radius:999px;
  font-size:11px; font-weight:600; background:var(--accent-teal); color:#fff;
}
.gd-m-bar .gd-m-live.is-live { background:#0F7D5D; }
.gd-m-body {
  padding:18px 16px 20px;
  background-color:var(--bg-primary);
  background-image:radial-gradient(circle, rgba(9,21,36,.105) 1px, transparent 1px);
  background-size:18px 18px;
}
.gd-m-body .gd-m-lbl {
  display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:9.5px;
  font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:rgba(9,21,36,.45);
}
.gd-m-body .gd-m-lbl i { width:6px; height:6px; border-radius:50%; background:var(--accent-teal); }
.gd-m-body .gd-m-txt {
  display:block; min-height:26px; margin-top:10px; font-size:17px; line-height:1.3;
  letter-spacing:-.01em; color:#091524;
}
/* the decision above, the building below — the arrow is the causality the
   desktop version gets from the cards sitting over the monitor */
.gd-m-arrow { display:none; }
@media (max-width:840px) {
  .gd-m-arrow { display:grid; place-items:center; padding:14px 0 2px; }
  .gd-m-arrow svg {
    width:18px; height:30px; fill:none; stroke:rgba(249,249,247,.34);
    stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
  }
}

/* ══ Something behind the glass on mobile ════════════════════════════════ */
/* The monitor and its blurred office are gone at this width, so the cards were
   sitting on flat navy — which makes a glass treatment pointless, since glass
   only reads as glass when there is a room behind it. The office plate comes
   back, scoped to just the card stack rather than the whole section, so the
   copy above it stays on plain ground. */
@media (max-width:840px) {
  .gd-cards-front {
    position:relative; isolation:isolate;
    padding:18px 16px 20px; border-radius:18px; overflow:hidden;
    background-image:url(../assets/Photography/desk-intro-bg.jpg);
    background-size:cover; background-position:center 38%;
  }
  /* the plate is a lit office; without this the white card text loses contrast */
  .gd-cards-front::before {
    content:''; position:absolute; inset:0; z-index:-1;
    background:linear-gradient(180deg, rgba(9,17,28,.30), rgba(9,17,28,.52));
  }
  /* now that there is a real room behind them, let the blur do its job */
  .gd-cards-front .gc { backdrop-filter:blur(9px) saturate(120%); -webkit-backdrop-filter:blur(9px) saturate(120%); }
}

/* ══ The trigger card — MOBILE ONLY ══════════════════════════════════════ */
/* Not a surface: the event. Stacked on a phone there is no step row under the
   cards, so nothing else says which one is the cause — the card has to carry
   that itself. On desktop the steps are right there beneath the row, card over
   node, and marking one card up only broke the register: the trigger sits in
   line with the other three and is styled like them. */
@media (max-width:840px) {
  .gc-trigger {
    padding-top:26px;
    margin-bottom:6px;   /* it leads the list and the arrow above points at it */
    border-color:rgba(255,224,170,.42);
    border-top-color:rgba(255,238,205,.72); border-left-color:rgba(255,238,205,.72);
    box-shadow:0 18px 40px -26px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.2);
  }
  .gc-when {
    position:absolute; top:9px; left:20px;
    font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:.18em;
    text-transform:uppercase; color:rgba(255,224,170,.8);
  }
  /* the event has fired: the card warms harder than a surface ever does */
  .gc-trigger.is-fired {
    background:rgba(255,214,150,.22);
    border-color:rgba(255,214,150,.55);
    border-top-color:rgba(255,236,200,.9); border-left-color:rgba(255,236,200,.9);
  }
  .gc-trigger.is-fired .gc-when { color:rgba(255,236,200,.95); }
}
/* the label is markup on every breakpoint so the script needs no branch — above
   840px it simply is not drawn */
@media (min-width:841px) { .gc-when { display:none; } }

/* ══ How it works — accordion on a phone ═════════════════════════════════ */
/* As a tab strip the demo surface sat below all four buttons. On a phone that
   put the thing a press changed off screen entirely, so the demonstration was
   invisible to the reader it exists for. Below 840px the script moves each pane
   to sit directly under its own button (see applyPattern in home-v11.astro) and
   these rules join the two into one card. */
@media (max-width:840px) {
  .v9-expression-grid { display:block; }
  .v9-mode-surface { display:none; }   /* the script empties it */

  /* gap:0 because the open pane has to meet its button with no seam; the space
     between modes is carried by the button that follows a pane instead */
  .v9-mode-list { gap:0; }
  .v9-mode-pane + button { margin-top:12px; }

  .v9-mode-list > button.is-active {
    border-bottom-color:transparent;
    border-bottom-left-radius:0; border-bottom-right-radius:0;
    box-shadow:none;
  }
  .v9-mode-pane {
    background:#fff;
    border:1px solid var(--accent-teal); border-top:0;
    border-radius:0 0 14px 14px;
    padding:2px 14px 16px;
  }
  .v9-mode-pane .v9-frame { border-radius:10px; }

  /* No pause control on a phone — the demos just run. It lived in the surface
     the accordion hides, and floated loose at the bottom of the list when moved
     there. Readers who need the motion stopped are already served: under
     prefers-reduced-motion every demo skips its choreography and paints its end
     state, so this button is not the only way to a still page. */
  .v9-demo-ctl { display:none; }

  /* ── the action tree, stacked ──────────────────────────────────────────
     The tree is drawn as a 640px horizontal chain and scaled to its column. In
     a phone column that is a scale of ~0.62, which put the node text at about
     8px — legible to nobody. Stacked, the nodes keep their real size and the
     chain still reads as a chain, just top to bottom. */
  .v9-tree { aspect-ratio:auto; height:auto; }
  .v9-tree-stage {
    position:relative; width:auto; height:auto; transform:none;
    display:flex; flex-direction:column; gap:24px;
    padding:46px 0 2px;                       /* clears the action chip */
  }
  .v9-tree-node {
    position:relative; left:auto !important; top:auto !important;
    width:auto; font-size:14px; padding:11px 14px 12px;
  }
  .v9-tree-node span { font-size:9.5px; }
  /* the wires are two horizontal paths on a 640×320 viewBox — meaningless once
     the nodes are in a column, and replaced by the connector below */
  .v9-tree-wires { display:none; }
  .v9-tree-node + .v9-tree-node::before {
    content:''; position:absolute; left:26px; top:-24px;
    width:2px; height:24px; background:#4E77AC;
  }

  /* ── Map it, stacked ───────────────────────────────────────────────────
     A 1200px field at phone width is a scale of ~0.325, which puts the 26px
     node headings at 8px. The pointer goes too: a drag-from-port demonstrates
     an interaction the reader cannot perform on the device they are holding.
     What is left is the part that matters — a line to the menu, a selection,
     a card — see the playSmall branch in home-v11.astro.

     The menu and the card that replaces it share one grid cell, so the row is
     as tall as the menu and the card lands exactly where the menu was. No
     measuring, and the panel never changes height mid-sequence. */
  /* the field is a fixed 1200/560 box with overflow:hidden — stacked, its
     height has to come from its content or the menu is simply cut off */
  .v9-mapit-field { aspect-ratio:auto; height:auto; overflow:visible; padding:14px; }
  .v9-mapit-stage {
    position:relative; width:auto; height:auto; transform:none;
    display:grid; grid-template-columns:minmax(0,1fr);
    grid-template-areas:"cap" "a" "slot";
    row-gap:26px; padding:4px 0 2px;
  }
  .v9-mapit .cap {
    grid-area:cap; position:static; justify-self:start;
  }
  .v9-mapit [data-mapit-nodea] { grid-area:a; }
  .v9-mapit .menu,
  .v9-mapit [data-mapit-nodeb] { grid-area:slot; align-self:start; }
  .v9-mapit .node,
  .v9-mapit .menu {
    position:relative; left:auto !important; top:auto !important; width:auto;
  }
  .v9-mapit .node h3 { font-size:19px; }
  .v9-mapit .node .eye { font-size:10px; }
  /* the pointer, its port, and the curved wire it dragged are all desktop */
  .v9-mapit .mcursor,
  .v9-mapit .port,
  .v9-mapit .wires { display:none; }

  /* the line: straight, drawn downward into the row gap, nothing fancy */
  .v9-mapit [data-mapit-nodea]::after {
    content:''; position:absolute; left:26px; top:100%;
    width:2px; height:0; background:#4E77AC;
    transition:height .52s cubic-bezier(.3,.7,.3,1);
  }
  .v9-mapit-stage.is-linked [data-mapit-nodea]::after { height:26px; }

  /* ── size the demos down to a glance ───────────────────────────────────
     Measured on a 500×813 phone before this: the four panes ran 393, 545, 399
     and 416px, so the shortest took 48% of the screen and Map it took 67%.
     At that size you cannot see the button you pressed and the animation it
     opened at the same time, which is the whole point of the accordion. These
     are all gap, padding and type reductions — nothing is scaled, so the text
     inside keeps the size it was tuned to. Target is roughly a third of the
     screen per pane. */
  .v9-frame-body { padding:12px; }
  .v9-demo { margin-top:14px; }

  .v9-tree-stage { gap:14px; padding:34px 0 0; }
  .v9-tree-node { font-size:13px; padding:8px 11px 9px; }
  .v9-tree-node + .v9-tree-node::before { top:-14px; height:14px; }

  .v9-mapit-field { padding:10px; }
  .v9-mapit-stage { row-gap:16px; padding:2px 0 0; }
  .v9-mapit .node h3 { font-size:16px; }
  .v9-mapit .node { padding:10px 12px; }
  .v9-mapit-stage.is-linked [data-mapit-nodea]::after { height:16px; }

  .v9-demo-write { min-height:0; padding:14px 16px; }
  .v9-demo-write p { font-size:16px; }
  .v9-upload-drop { min-height:72px; padding:8px 10px; }

  /* Map it's dead space, specifically.

     The menu and the card that replaces it deliberately share one grid cell so
     the panel never changes height mid-sequence. That means the row is as tall
     as the MENU for the whole sequence — 223px reserved to eventually show a
     63px card, i.e. about 160px of nothing once the card lands. It read as a
     bug in the screenshot even though it is the anti-jump mechanism working.

     The fix is not to give up the shared cell, it is to stop sizing the menu
     for a mouse: 20px items with 15px padding are desktop numbers. Shrinking
     the menu shrinks the reservation, and the card was never the tall one. */
  .v9-mapit .menu { padding:6px; }
  /* line-height matters more than font-size here: the base rule sets neither,
     so each item inherited the body's 1.6 and stayed 55px tall even at 15px
     type. Setting it explicitly is what actually shortens the reservation. */
  .v9-mapit .menu button { font-size:15px; line-height:1.3; padding:9px 12px; }
  .v9-mapit .menu .lbl { font-size:10.5px; line-height:1.2; padding:6px 12px 8px; }
}

/* ══ Mobile type scale ═══════════════════════════════════════════════════
   Measured at 500px before this block: headlines 34–43px, but kickers at 10px,
   body copy at 13.8px and supporting copy at 13.5px. Confident headlines over
   undersized everything-else is what makes a page read as amateur — the fault
   was never the headings.

   Best practice and what Cohere does agree here: fewer sizes, a much higher
   floor, and hierarchy carried by weight, colour and space rather than by
   shrinking text. 16px is the floor for anything meant to be read as prose;
   labels may go smaller because they are scanned, not read. */
@media (max-width:840px) {
  /* eyebrows are labels — small is fine, 10px is not */
  .v9-kicker { font-size:12px; letter-spacing:.11em; }

  /* prose floor.
     .v9-world-beats .faq-a p is listed explicitly because line 672 above sets it
     to 13.8px at (0,3,1). While this block was scoped under .is-v11 it matched
     that specificity and won on source order; unscoping dropped it to (0,2,1) and
     it silently lost. Matching the selector is the fix — raising it any further
     would just move the same trap somewhere else. */
  .v9-world-beats p,
  .v9-world-beats .faq-a p,
  .v9-world-beats li,
  .v9-start p,
  .gd-copy p,
  .v9-open-lead { font-size:16.5px; line-height:1.62; }

  /* supporting copy under a control still has to be readable */
  .v9-mode-list > button small span { font-size:15px; line-height:1.55; }
  .v9-mode-list > button b { font-size:17px; }

  /* The base rule already asks for 44px targets; home-v10.css:792 drops these
     to 40 with 13.5px labels on mobile, which is the wrong direction on the one
     device where the target matters most. */
  .v9-worlds-tabs button { min-height:44px; font-size:15px; padding:0 15px; }

  /* the mailto: and tel: links under the contact headline are the two things on
     this page most likely to be tapped on a phone, and they were the smallest */
  .v9-open-contact a { display:inline-block; padding:10px 0; font-size:16.5px; }
}

/* ══ Benefits ════════════════════════════════════════════════════════════
   Three columns between the Desk demonstration and How it works. The icons are
   the supplied brand marks, used as-is: they are drawn on a 320x240 canvas with
   stroke="currentColor", so they inherit text colour and stay crisp at any size.
   Loaded as <img> rather than inlined so all three are cached once and the page
   markup stays readable. */
.v9-benefits {
  padding:clamp(88px,11vw,150px) clamp(26px,3.6vw,70px) clamp(20px,3vw,44px);
  background:var(--bg-primary);
}
/* No kicker. Every other section carries one, but this is the quiet beat between
   two loud ones, and a label above a four-word headline would be more furniture
   than signal. The three items below are the answer to the question it asks. */
.ben-head {
  /* No cap: .v9-expression below uses the page gutter with no max-width, so a
     centred 1240 container put this section's left edge 48px right of every
     other section's. Sections that do not share a left edge is the thing that
     reads as amateur spacing. */
  max-width:none; margin:0 0 clamp(44px,5vw,76px);
  font-size:clamp(28px,3.1vw,44px); font-weight:600; line-height:1.1;
  letter-spacing:-.026em; color:var(--text-primary);
}
.ben-grid {
  max-width:none; margin:0;
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(34px,4.4vw,80px);
}
.ben-item { display:flex; flex-direction:column; align-items:flex-start; }
/* the mark sits quiet and large, the way Cohere's do — it is not a bullet */
.ben-ic {
  width:clamp(96px,9vw,132px); height:auto; display:block;
  color:var(--text-primary); opacity:.9; margin-bottom:clamp(22px,2.6vw,38px);
}
.ben-item h3 {
  margin:0; font-size:clamp(20px,1.85vw,26px); font-weight:600;
  line-height:1.18; letter-spacing:-.018em; color:var(--text-primary);
}
.ben-item p {
  margin:clamp(10px,1vw,14px) 0 0; font-size:clamp(15.5px,1.15vw,17px);
  line-height:1.58; color:var(--text-body); max-width:38ch;
}

@media (max-width:900px) {
  .ben-grid { grid-template-columns:1fr; gap:clamp(40px,7vw,56px); }
  /* same gutter expression as .v9-expression, so the two stay aligned below
     900 as well — a hardcoded 24px here drifted 8px off it. */
  .v9-benefits { padding:clamp(64px,10vw,96px) clamp(26px,3.6vw,70px) clamp(16px,4vw,32px); }
  .ben-head { font-size:clamp(26px,6.6vw,34px); margin-bottom:34px; }
  .ben-ic { width:88px; margin-bottom:20px; }
  .ben-item p { font-size:16.5px; line-height:1.6; max-width:none; }
}