/* Vision page. Design tokens only, no inline styles (the site's content security policy forbids them).
   vision.js gives each [data-scene] a progress number --p from 0 to 1; the rules below turn it into motion.
   Motion tiers follow the header: html[data-motion] is full, lite (no parallax or drifting) or static (everything shown at rest). */

body[data-page="vision"] main { max-width: none; padding: 0; }
.w { --par: 1; --w-dark: var(--surface-header); --w-dark-ink: var(--text-on-header); overflow-x: clip; }
html[data-motion="lite"] .w, html[data-motion="static"] .w { --par: 0; }
.w *, .w *::before, .w *::after { box-sizing: border-box; }
.w p { margin: 0 0 var(--space-4); }

/* progress: at rest (no script, or Off) every scene is complete; with script it starts at 0 */
.w [data-scene] { --p: 1; }
html.w-js:not([data-motion="static"]) .w [data-scene] { --p: 0; }

/* ---------- layout and type ---------- */
.w-in { max-width: 1160px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 32px); position: relative; }
.w-narrow { max-width: 780px; }
.w-sec { position: relative; padding: clamp(72px, 10vw, 136px) 0; }
.w-k { margin: 0 0 var(--space-3); font: var(--type-label); letter-spacing: var(--type-label-tracking); text-transform: uppercase; color: var(--text-secondary); }
.w-h2, .w-xl, .w-xl2 { margin: 0 0 var(--space-4); font-family: var(--font-display); font-weight: 600; letter-spacing: -0.015em; line-height: 1.08; text-wrap: balance; }
.w-h2 { font-size: clamp(1.9rem, 4.4vw, 3.3rem); }
.w-xl { font-size: clamp(2.3rem, 6.4vw, 4.8rem); line-height: 1.04; }
.w-xl2 { font-size: clamp(1.7rem, 3.6vw, 2.7rem); margin-top: clamp(48px, 7vw, 88px); }
.w-lead { max-width: 64ch; font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.6; color: var(--text-secondary); text-wrap: pretty; }
.w-fine { font: var(--type-small); color: var(--text-secondary); }
.w p, .w li { text-wrap: pretty; }
.w a:focus-visible, .w summary:focus-visible, .w button:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }

/* ---------- reveal on scroll ---------- */
html.w-js:not([data-motion="static"]) .w .w-rv { opacity: 0; transform: translateY(22px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
html.w-js:not([data-motion="static"]) .w .w-rv.w-on { opacity: 1; transform: none; }
html[data-motion="lite"].w-js .w .w-rv { transform: none; }
.w-stats > :nth-child(3n+2), .w-tiles > :nth-child(4n+2), .w-award-grid > :nth-child(4n+2), .w-hopes > :nth-child(2n) { transition-delay: 90ms !important; }
.w-stats > :nth-child(3n), .w-tiles > :nth-child(4n+3), .w-award-grid > :nth-child(4n+3) { transition-delay: 180ms !important; }
.w-tiles > :nth-child(4n), .w-award-grid > :nth-child(4n) { transition-delay: 270ms !important; }

/* ---------- hero ---------- */
.w-hero { --pg: var(--chart-white); position: relative; min-height: min(100svh, 60rem); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: center; gap: var(--space-8); padding: clamp(72px, 12vh, 128px) clamp(16px, 5vw, 72px) clamp(72px, 10vh, 112px); overflow: hidden; color: var(--w-dark-ink);
  background: radial-gradient(60% 80% at 82% 30%, color-mix(in srgb, var(--orchid) 46%, transparent), transparent 70%), radial-gradient(50% 60% at 8% 95%, color-mix(in srgb, var(--ember) 32%, transparent), transparent 70%), var(--w-dark); }
.w-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, var(--w-dark) 0%, color-mix(in srgb, var(--w-dark) 78%, transparent) 38%, transparent 72%); }
.w-pages { position: absolute; inset: 0; opacity: calc(1 - var(--p) * 0.85); }
.w-layer { position: absolute; inset: -8% -4%; transform: translate3d(0, calc(var(--p) * var(--par) * var(--sp) * -1px), 0); will-change: transform; }
.w-l1 { --sp: 70; --o: .16; } .w-l2 { --sp: 150; --o: .26; } .w-l3 { --sp: 270; --o: .4; }
.pg { position: absolute; aspect-ratio: .77; border-radius: 3px; opacity: var(--o); rotate: var(--r, 0deg); padding: 14px;
  background: repeating-linear-gradient(to bottom, transparent 0 9px, color-mix(in srgb, var(--midnight) 26%, transparent) 9px 11px) content-box, var(--pg); background-clip: content-box, border-box; background-origin: content-box, border-box; }
.w-l1 .pg { width: clamp(84px, 10vw, 140px); } .w-l2 .pg { width: clamp(104px, 13vw, 180px); } .w-l3 .pg { width: clamp(128px, 16vw, 224px); }
.w-l1 .pg:nth-child(1) { left: 2%; top: 6%; --r: -9deg; } .w-l1 .pg:nth-child(2) { left: 14%; top: 52%; --r: 6deg; } .w-l1 .pg:nth-child(3) { left: 26%; top: 14%; --r: -4deg; } .w-l1 .pg:nth-child(4) { left: 40%; top: 70%; --r: 8deg; } .w-l1 .pg:nth-child(5) { left: 58%; top: 8%; --r: 5deg; } .w-l1 .pg:nth-child(6) { left: 72%; top: 46%; --r: -7deg; } .w-l1 .pg:nth-child(7) { left: 88%; top: 18%; --r: 10deg; }
.w-l2 .pg:nth-child(1) { left: 6%; top: 30%; --r: 7deg; } .w-l2 .pg:nth-child(2) { left: 20%; top: 72%; --r: -6deg; } .w-l2 .pg:nth-child(3) { left: 38%; top: 36%; --r: -3deg; } .w-l2 .pg:nth-child(4) { left: 56%; top: 76%; --r: 9deg; } .w-l2 .pg:nth-child(5) { left: 76%; top: 12%; --r: -8deg; } .w-l2 .pg:nth-child(6) { left: 90%; top: 58%; --r: 4deg; }
.w-l3 .pg:nth-child(1) { left: 0; top: 62%; --r: -12deg; } .w-l3 .pg:nth-child(2) { left: 30%; top: -6%; --r: 8deg; } .w-l3 .pg:nth-child(3) { left: 62%; top: 40%; --r: -5deg; } .w-l3 .pg:nth-child(4) { left: 84%; top: -4%; --r: 12deg; } .w-l3 .pg:nth-child(5) { left: 94%; top: 74%; --r: 6deg; }

.w-hero-in { position: relative; z-index: 2; max-width: 40rem; }
.w-eyebrow { margin: 0 0 var(--space-4); font: var(--type-label); letter-spacing: var(--type-label-tracking); text-transform: uppercase; color: color-mix(in srgb, var(--w-dark-ink) 72%, transparent); }
.w-hero h1 { margin: 0 0 var(--space-5); font: 600 clamp(3rem, 9vw, 7rem)/0.98 var(--font-display); letter-spacing: -0.025em; text-wrap: balance; }
.w-sub { max-width: 34ch; margin: 0 0 var(--space-8); font-size: clamp(1.1rem, 2vw, 1.5rem); line-height: 1.45; color: color-mix(in srgb, var(--w-dark-ink) 88%, transparent); }
.w-cue { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-4); border: 1px solid color-mix(in srgb, var(--w-dark-ink) 40%, transparent); border-radius: var(--radius-ui); color: var(--w-dark-ink); text-decoration: none; font-weight: 600; transition: background var(--duration-fast) var(--ease); }
.w-cue:hover { background: color-mix(in srgb, var(--w-dark-ink) 12%, transparent); }
.w-cue svg { animation: w-bob 2.2s var(--ease) infinite; }
html:not([data-motion="full"]) .w-cue svg { animation: none; }
@keyframes w-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

.w-rec { position: relative; z-index: 2; justify-self: center; width: min(340px, 100%); padding: var(--space-5); border: 1px solid color-mix(in srgb, #fff 60%, transparent); border-radius: var(--radius-ui); background: var(--chart-white); color: var(--midnight);
  transform: translateY(calc(var(--p) * var(--par) * -48px)) scale(calc(1 + var(--p) * var(--par) * 0.07)); }
.w-rec::before { content: ""; position: absolute; inset: -40%; z-index: -1; background: radial-gradient(closest-side, color-mix(in srgb, var(--amber) 50%, transparent), transparent); opacity: calc(.5 + var(--p) * .5); }
.w-rec-top { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); }
.w-rec-src { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-4); padding: 4px 8px; border: 1px solid color-mix(in srgb, var(--midnight) 25%, transparent); border-radius: var(--radius-ui); font: 600 12px/16px var(--font-ui); color: var(--slate); }
.w-chip { display: inline-block; padding: 2px 8px; border-radius: var(--radius-ui); background: color-mix(in srgb, currentColor 14%, transparent); font: 700 12px/16px var(--font-ui); letter-spacing: .04em; }
.w-chip-cor { background: var(--cor-1); color: var(--cor-1-ink); }
.w-bar { display: block; height: 10px; margin-top: 10px; border-radius: 2px; background: color-mix(in srgb, currentColor 16%, transparent); }
.w-b1 { width: 100%; } .w-b2 { width: 84%; } .w-b3 { width: 58%; }

/* ---------- opening ---------- */
.w-open { padding-block: clamp(96px, 16vw, 200px); background: color-mix(in srgb, var(--amber) 10%, var(--surface-page)); }
.w-open .w-in::before { content: ""; display: block; width: 64px; height: 6px; margin-bottom: var(--space-6); background: var(--amber); border-radius: 2px; }
.w-open .w-xl { max-width: 14ch; }

/* ---------- the gap ---------- */
.w-gap { background: color-mix(in srgb, var(--ember) 11%, var(--surface-page)); }
.w-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: var(--space-4); margin: clamp(32px, 5vw, 56px) 0; }
.w-stat { display: flex; flex-direction: column; padding: var(--space-6); border: var(--stroke-hairline) solid var(--border-subtle); border-top: 3px solid var(--ember); border-radius: var(--radius-ui); background: var(--surface-card); }
.w-stat-n { margin: 0 0 var(--space-3); font: 600 clamp(2.6rem, 5vw, 3.7rem)/1.02 var(--font-display); letter-spacing: -0.02em; font-variant-numeric: lining-nums; }
.w-pre { display: block; margin-bottom: 4px; font: var(--type-label); letter-spacing: var(--type-label-tracking); text-transform: uppercase; color: var(--text-secondary); }
.w-stat-t { flex: 1; color: var(--text-primary); }
.w-viz { margin: var(--space-3) 0 var(--space-2); }
.w-viz figcaption { margin-top: 6px; font: var(--type-small); color: var(--text-secondary); }
.w-waffle { display: grid; gap: 3px; max-width: 300px; }
.w-cols-10 { grid-template-columns: repeat(10, 1fr); } .w-cols-25 { grid-template-columns: repeat(25, 1fr); }
.w-waffle i { aspect-ratio: 1; border-radius: 1px; background: color-mix(in srgb, var(--text-secondary) 20%, transparent); transition: background 420ms var(--ease) var(--d, 0ms); }
.w-waffle i.on { background: var(--ember); }
html.w-js:not([data-motion="static"]) .w-stat:not(.w-on) .w-waffle i.on { background: color-mix(in srgb, var(--text-secondary) 20%, transparent); }
.w-range { display: block; width: 100%; max-width: 360px; height: auto; overflow: visible; }
.rg-axis { stroke: var(--border-strong); stroke-width: 1.5; }
.rg-range { fill: color-mix(in srgb, var(--ember) 34%, transparent); }
.rg-iqr { fill: var(--ember); }
.rg-med { stroke: var(--text-primary); stroke-width: 2; }
.rg-t { fill: var(--text-primary); font: 600 10px var(--font-ui); }
.rg-dim { fill: var(--text-secondary); font-weight: 400; }
.rg-range, .rg-iqr { transform-box: fill-box; transform-origin: left center; transition: transform 900ms var(--ease) 200ms; }
html.w-js:not([data-motion="static"]) .w-stat:not(.w-on) :is(.rg-range, .rg-iqr) { transform: scaleX(0); }
.w-stat-meta { margin: var(--space-2) 0 var(--space-3); font: var(--type-small); color: var(--text-secondary); }
.w-gap-notes { max-width: 70ch; }
.w-close { margin: clamp(32px, 5vw, 56px) 0 0; font: 600 clamp(1.5rem, 3.4vw, 2.5rem)/1.15 var(--font-display); letter-spacing: -0.01em; text-wrap: balance; }

/* source buttons */
.w-src { display: inline-block; vertical-align: middle; }
.w-src summary { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; list-style: none; cursor: pointer; border: 1px solid var(--border-strong); border-radius: var(--radius-ui); font: 600 13px/20px var(--font-ui); color: var(--text-primary); user-select: none; }
.w-src summary::-webkit-details-marker { display: none; }
.w-src summary:hover { background: var(--surface-raised); }
.w-src summary span { display: inline-grid; place-items: center; min-width: 20px; height: 20px; border-radius: var(--radius-ui); background: var(--surface-raised); font-size: 12px; }
.w-gap .w-src summary span { background: var(--surface-card); }
.w-ref { margin-top: var(--space-2); padding: var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-ui); background: var(--surface-card); font: var(--type-small); }
.w-ref p { margin: 0 0 var(--space-2); }
.w-ref a { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.w-ref-find { color: var(--text-secondary); }

/* ---------- the idea (pinned scene) ---------- */
.w-pin { height: 320vh; padding: 0; }
.w-idea { background: color-mix(in srgb, var(--verde) 12%, var(--surface-page)); }
.w-pin-in { position: sticky; top: 0; min-height: 100svh; display: flex; align-items: center; padding: clamp(32px, 6vh, 72px) 0; }
html:not(.w-js) .w-pin, html[data-motion="static"] .w-pin { height: auto; }
html:not(.w-js) .w-pin-in, html[data-motion="static"] .w-pin-in { position: static; min-height: 0; padding: clamp(72px, 10vw, 136px) 0; }
.w-demo { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: var(--space-4); align-items: start; margin-top: var(--space-6); }
.w-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.w-step { --a: 0; --on: clamp(0, calc((var(--p) - var(--a)) * 20), 1); display: flex; gap: var(--space-3); padding: var(--space-3); border-left: 3px solid color-mix(in srgb, var(--verde) calc(var(--on) * 100%), var(--border-strong)); opacity: calc(.4 + var(--on) * .6); }
.w-step b { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-ui); background: var(--verde); color: var(--ink-0); font: 700 14px/1 var(--font-ui); }
.w-s2 { --a: .36; } .w-s3 { --a: .62; }
.w-patient, .w-recs { padding: var(--space-5); border: var(--stroke-hairline) solid var(--border-subtle); border-radius: var(--radius-ui); background: var(--surface-card); }
.w-card-h { margin: 0 0 var(--space-3); font: var(--type-label); letter-spacing: var(--type-label-tracking); text-transform: uppercase; color: var(--text-secondary); }
.w-patient dl { margin: 0; display: grid; gap: var(--space-3); }
.w-f { --a: .08; --k: clamp(0, calc((var(--p) - var(--a)) * 10), 1); opacity: var(--k); transform: translateY(calc((1 - var(--k)) * 10px)); }
.w-f1 { --a: .1; } .w-f2 { --a: .19; } .w-f3 { --a: .28; } .w-f4 { --a: .37; }
.w-f dt { font: var(--type-small); color: var(--text-secondary); }
.w-f dd { margin: 0; font-weight: 600; }
.w-f dd span { display: inline-block; clip-path: inset(0 calc((1 - var(--k)) * 100%) 0 0); }
.w-recs { display: grid; gap: var(--space-3); }
.w-recs .w-card-h { margin: 0; }
.w-r { --a: .5; --k: clamp(0, calc((var(--p) - var(--a)) * 10), 1); --k2: clamp(0, calc((var(--p) - var(--a) - .07) * 10), 1); display: grid; gap: var(--space-2); padding: var(--space-3); border-left: 3px solid var(--cor-1); background: var(--surface-raised); border-radius: var(--radius-ui); opacity: var(--k); transform: translateX(calc((1 - var(--k)) * 28px)); }
.w-r1 { --a: .44; } .w-r2 { --a: .56; } .w-r3 { --a: .68; }
.w-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; opacity: var(--k2); }
.w-tag { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border: 1px solid var(--border-strong); border-radius: var(--radius-ui); font: 600 12px/16px var(--font-ui); color: var(--text-secondary); }
.w-chip-cor, .w-tags .w-chip { color: var(--cor-1-ink); }
.w-pin .w-fine { margin: var(--space-3) 0 0; }

/* ---------- faithful to the source ---------- */
.w-faith { background: color-mix(in srgb, var(--cobalt) 11%, var(--surface-page)); }
.w-two { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.w-invite { padding-left: var(--space-4); border-left: 3px solid var(--cobalt); font-style: italic; }
.w-trows { display: grid; gap: var(--space-4); }
.w-trow { --a: .3; --k: clamp(0, calc((var(--p) - var(--a)) * 10), 1); display: grid; gap: 0; padding: var(--space-5); border: var(--stroke-hairline) solid var(--border-subtle); border-radius: var(--radius-ui); background: var(--surface-card); color: var(--text-primary); }
.w-t2 { --a: .4; } .w-t3 { --a: .5; }
.w-tag2 { justify-self: start; margin-top: var(--space-4); padding: 4px 10px; border-radius: var(--radius-ui); font: 700 13px/18px var(--font-ui); opacity: var(--k); transform: translateX(calc((1 - var(--k)) * 36px)); }
.w-ok { background: var(--cor-1); color: var(--cor-1-ink); }
.w-inf { background: var(--cor-2a); color: var(--cor-2a-ink); }
.w-none { background: var(--surface-raised); color: var(--text-secondary); border: 1px solid var(--border-strong); }

/* ---------- the tools ---------- */
.w-tools { background: var(--surface-raised); overflow: hidden; }
.w-ghosts { position: absolute; inset: 0; pointer-events: none; --f: clamp(0, calc((var(--p) - .12) * 3), 1); }
.w-ghosts i { position: absolute; width: clamp(120px, 16vw, 210px); height: clamp(140px, 18vw, 240px); border: 1px solid var(--border-strong); border-radius: var(--radius-ui); background: color-mix(in srgb, var(--surface-card) 60%, transparent); opacity: calc(.1 + var(--f) * .5); filter: blur(calc((1 - var(--f)) * 6px)); translate: 0 calc(var(--p) * var(--par) * -36px); }
.w-ghosts i:nth-child(1) { left: -4%; top: 6%; } .w-ghosts i:nth-child(2) { left: 8%; top: 38%; } .w-ghosts i:nth-child(3) { left: -2%; top: 70%; } .w-ghosts i:nth-child(4) { left: 20%; top: 88%; } .w-ghosts i:nth-child(5) { left: 40%; top: -6%; } .w-ghosts i:nth-child(6) { left: 56%; top: 92%; }
.w-ghosts i:nth-child(7) { left: 70%; top: -4%; } .w-ghosts i:nth-child(8) { left: 84%; top: 18%; } .w-ghosts i:nth-child(9) { left: 94%; top: 48%; } .w-ghosts i:nth-child(10) { left: 86%; top: 80%; } .w-ghosts i:nth-child(11) { left: 30%; top: 58%; opacity: .0; } .w-ghosts i:nth-child(12) { left: 62%; top: 62%; opacity: .0; }
.w-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--space-4); margin: clamp(32px, 5vw, 56px) 0; position: relative; }
.w-tile { --edge: var(--cobalt); display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); border: var(--stroke-hairline) solid var(--border-subtle); border-top: 3px solid var(--edge); border-radius: var(--radius-ui); background: var(--surface-card); color: var(--text-primary); text-decoration: none; transition: background var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease); }
.w-tile[data-accent="sky"] { --edge: var(--sky); } .w-tile[data-accent="amber"] { --edge: var(--amber); } .w-tile[data-accent="verde"] { --edge: var(--verde); } .w-tile[data-accent="rose"] { --edge: var(--rose); } .w-tile[data-accent="orchid"] { --edge: var(--orchid); }
:root[data-theme="dark"] .w-tile[data-accent="orchid"] { --edge: var(--orchid-lift); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .w-tile[data-accent="orchid"] { --edge: var(--orchid-lift); } }
.w-tile:hover { background: var(--surface-raised); border-color: var(--border-strong); border-top-color: var(--edge); }
.w-tile-top { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.w-tile-top img { flex: none; width: 56px; height: 56px; border-radius: var(--radius-ui); background: var(--surface-logo); }
.w-tile-id { display: flex; flex-direction: column; min-width: 0; }
.w-tile-id b { font: 700 18px/24px var(--font-ui); }
.w-tile-id span { font: 400 12px/18px var(--font-code); color: var(--text-secondary); overflow-wrap: anywhere; }
.w-tile-q { font: 600 17px/24px var(--font-display); text-wrap: balance; }
.w-tile-d { font: var(--type-body); color: var(--text-secondary); }
.w-more { max-width: 62ch; }
.w-more h3 { margin: 0 0 var(--space-3); font: 600 clamp(1.5rem, 3vw, 2.2rem)/1.15 var(--font-display); letter-spacing: -0.01em; }

/* ---------- languages ---------- */
.w-words { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.w-words span { position: absolute; font: 600 clamp(2.4rem, 6vw, 5.5rem)/1 var(--font-display); color: color-mix(in srgb, var(--rose) 14%, transparent); white-space: nowrap; translate: 0 calc(var(--p) * var(--par) * var(--sp, -60) * 1px); }
.w-words span:nth-child(3n+1) { --sp: -120; } .w-words span:nth-child(3n+2) { --sp: -50; } .w-words span:nth-child(3n) { --sp: -190; }
.w-words span:nth-child(1) { left: 4%; top: 6%; } .w-words span:nth-child(2) { left: 56%; top: 12%; } .w-words span:nth-child(3) { left: 24%; top: 30%; } .w-words span:nth-child(4) { left: 74%; top: 38%; } .w-words span:nth-child(5) { left: 8%; top: 52%; } .w-words span:nth-child(6) { left: 48%; top: 60%; } .w-words span:nth-child(7) { left: 78%; top: 78%; }
.w-words span:nth-child(8) { left: 40%; top: 84%; } .w-words span:nth-child(9) { left: 12%; top: 74%; } .w-words span:nth-child(10) { left: 66%; top: 2%; } .w-words span:nth-child(11) { left: 30%; top: 8%; } .w-words span:nth-child(12) { left: 82%; top: 58%; } .w-words span:nth-child(13) { left: 2%; top: 92%; } .w-words span:nth-child(14) { left: 60%; top: 40%; }
html[data-motion="full"] .w-words span { animation: w-drift 38s ease-in-out infinite alternate; }
html[data-motion="full"] .w-words span:nth-child(2n) { animation-duration: 52s; animation-direction: alternate-reverse; }
html[data-motion="full"] .w-words span:nth-child(3n) { animation-duration: 66s; }
@keyframes w-drift { from { transform: translateX(-3vw); } to { transform: translateX(5vw); } }
.w-langs { list-style: none; margin: var(--space-6) 0; padding: 0; display: grid; gap: var(--space-3); max-width: 780px; }
.w-langs li { display: grid; gap: 2px; padding: var(--space-4); border: var(--stroke-hairline) solid var(--border-subtle); border-left: var(--stroke-indicator) solid var(--rose); border-radius: var(--radius-ui); background: var(--surface-card); }
.w-langs b { font: 700 16px/24px var(--font-ui); } .w-langs i { font-style: normal; font-weight: 400; color: var(--text-secondary); }
.w-langs span { color: var(--text-secondary); }
.w-lang { overflow: hidden; background: color-mix(in srgb, var(--rose) 9%, var(--surface-page)); }

/* ---------- the people ---------- */
.w-people { background: var(--orchid); color: var(--chart-white); overflow: hidden; }
.w-people .w-k { color: color-mix(in srgb, var(--chart-white) 82%, transparent); }
.w-people .w-lead { color: color-mix(in srgb, var(--chart-white) 92%, transparent); }
.w-ring-c, .w-roles li span { color: var(--text-primary); }
.w-ring { position: relative; width: min(92vw, 660px); aspect-ratio: 1; margin: clamp(32px, 6vw, 64px) auto 0; }
.w-ring-c { position: absolute; inset: 28%; display: grid; place-content: center; gap: 4px; text-align: center; border: 1px solid var(--border-strong); border-radius: 50%; background: var(--surface-card); padding: var(--space-4); }
.w-ring-c b { font: 600 clamp(1rem, 2.4vw, 1.4rem)/1.2 var(--font-display); }
.w-ring-c span { font: var(--type-small); color: var(--text-secondary); }
.w-roles { list-style: none; margin: 0; padding: 0; position: absolute; inset: 3%; }
html[data-motion="full"] .w-roles { animation: w-spin 120s linear infinite; }
.w-roles li { position: absolute; inset: 0; rotate: var(--a); }
.w-roles li span { position: absolute; top: 0; left: 50%; translate: -50% -50%; rotate: calc(-1 * var(--a)); display: inline-block; padding: 6px 12px; border: 1px solid var(--border-strong); border-top: 3px solid var(--edge, var(--cobalt)); border-radius: var(--radius-ui); background: var(--surface-card); font: 600 14px/20px var(--font-ui); white-space: nowrap; }
html[data-motion="full"] .w-roles li span { animation: w-unspin 120s linear infinite; }
.w-roles li:nth-child(1) { --a: 0deg; } .w-roles li:nth-child(2) { --a: 36deg; --edge: var(--rose); } .w-roles li:nth-child(3) { --a: 72deg; --edge: var(--verde); } .w-roles li:nth-child(4) { --a: 108deg; --edge: var(--orchid); } .w-roles li:nth-child(5) { --a: 144deg; --edge: var(--amber); }
.w-roles li:nth-child(6) { --a: 180deg; --edge: var(--sky); } .w-roles li:nth-child(7) { --a: 216deg; --edge: var(--rose); } .w-roles li:nth-child(8) { --a: 252deg; --edge: var(--verde); } .w-roles li:nth-child(9) { --a: 288deg; --edge: var(--orchid); } .w-roles li:nth-child(10) { --a: 324deg; --edge: var(--amber); }
@keyframes w-spin { to { transform: rotate(360deg); } }
@keyframes w-unspin { to { transform: rotate(-360deg); } }
@media (max-width: 760px) {
  .w-ring { width: auto; aspect-ratio: auto; }
  .w-ring-c { position: static; border-radius: var(--radius-ui); margin-bottom: var(--space-4); }
  .w-roles { position: static; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); animation: none !important; }
  .w-roles li { position: static; rotate: none; }
  .w-roles li span { position: static; translate: none; rotate: none; animation: none !important; }
}

/* ---------- recognition ---------- */
.w-awards { background: var(--amber); color: var(--midnight); }
.w-awards .w-k { color: color-mix(in srgb, var(--midnight) 80%, transparent); }
.w-awards .w-award { color: var(--text-primary); }
.w-award-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: var(--space-4); margin-top: clamp(24px, 4vw, 48px); }
.w-award { --edge: var(--cobalt); display: flex; flex-direction: column; padding: var(--space-5); border: var(--stroke-hairline) solid var(--border-subtle); border-top: 3px solid var(--edge); border-radius: var(--radius-ui); background: var(--surface-card); }
.w-award[data-accent="sky"] { --edge: var(--sky); } .w-award[data-accent="amber"] { --edge: var(--amber); } .w-award[data-accent="verde"] { --edge: var(--verde); } .w-award[data-accent="rose"] { --edge: var(--rose); } .w-award[data-accent="orchid"] { --edge: var(--orchid); }
:root[data-theme="dark"] .w-award[data-accent="orchid"] { --edge: var(--orchid-lift); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .w-award[data-accent="orchid"] { --edge: var(--orchid-lift); } }
.w-award-year { margin: 0 0 var(--space-3); font: 600 2.4rem/1 var(--font-display); letter-spacing: -0.02em; }
.w-award-logo { display: grid; place-items: center; height: 92px; margin-bottom: var(--space-4); padding: var(--space-3); border-radius: var(--radius-ui); background: var(--chart-white); border: var(--stroke-hairline) solid var(--border-subtle); }
.w-award-logo img { width: auto; height: auto; max-width: 100%; max-height: 64px; object-fit: contain; }
.w-award h3 { margin: 0 0 var(--space-1); font: 700 18px/24px var(--font-ui); }
.w-award-from { margin: 0 0 var(--space-3); color: var(--text-secondary); font: var(--type-small); }
.w-award-work { flex: 1; margin: 0 0 var(--space-4); }
.w-award-tool { display: flex; align-items: center; gap: var(--space-2); margin: 0; padding-top: var(--space-3); border-top: var(--stroke-hairline) solid var(--border-subtle); font: 600 14px/20px var(--font-ui); }
.w-award-tool img { width: 28px; height: 28px; border-radius: var(--radius-ui); background: var(--surface-logo); }

/* ---------- where this goes ---------- */
.w-next { background: linear-gradient(135deg, color-mix(in srgb, var(--verde) 15%, var(--surface-page)), color-mix(in srgb, var(--sky) 17%, var(--surface-page))); }
.w-hopes { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
@media (max-width: 760px) { .w-hopes { grid-template-columns: 1fr; } }
.w-hopes li { padding: var(--space-4) var(--space-5); border-left: var(--stroke-indicator) solid var(--cobalt); background: var(--surface-raised); border-radius: var(--radius-ui); }
.w-hopes li:nth-child(2) { border-left-color: var(--verde); } .w-hopes li:nth-child(3) { border-left-color: var(--rose); } .w-hopes li:nth-child(4) { border-left-color: var(--amber); }
.w-hopes b { display: block; margin-bottom: 2px; font: 600 1.25rem/1.3 var(--font-display); }
.w-map { list-style: none; margin: var(--space-8) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.w-map li { --t: .3; --dx: 0px; --dy: 0px; --k: clamp(0, calc((var(--p) - var(--t)) * 8), 1); translate: calc((1 - var(--k)) * var(--dx)) calc((1 - var(--k)) * var(--dy)); }
.w-map li span { display: inline-block; padding: 12px 20px; border: 1px solid var(--border-strong); border-radius: var(--radius-ui); background: var(--surface-card); font: 600 17px/24px var(--font-ui); transform: scale(calc(.3 + var(--k) * .7)); opacity: calc(.15 + var(--k) * .85); }
.w-map li:nth-child(1) { --t: .22; --dx: 90px; --dy: -40px; } .w-map li:nth-child(2) { --t: .26; --dx: -60px; --dy: 50px; } .w-map li:nth-child(3) { --t: .3; --dx: 40px; --dy: 70px; } .w-map li:nth-child(4) { --t: .34; --dx: -90px; --dy: -30px; } .w-map li:nth-child(5) { --t: .38; --dx: 70px; --dy: 40px; }
.w-map li:nth-child(6) { --t: .42; --dx: -40px; --dy: -60px; } .w-map li:nth-child(7) { --t: .46; --dx: 100px; --dy: 20px; } .w-map li:nth-child(8) { --t: .5; --dx: -70px; --dy: 60px; } .w-map li:nth-child(9) { --t: .54; --dx: 30px; --dy: -50px; }

/* ---------- join ---------- */
.w-join { color: var(--w-dark-ink); background: radial-gradient(50% 70% at 20% 0%, color-mix(in srgb, var(--rose) 32%, transparent), transparent 70%), radial-gradient(50% 70% at 90% 100%, color-mix(in srgb, var(--orchid) 34%, transparent), transparent 70%), var(--w-dark); }
.w-join .w-lead { color: color-mix(in srgb, var(--w-dark-ink) 82%, transparent); }
.w-join a:focus-visible { outline-color: var(--w-dark-ink); }

/* ---------- disclaimer panel ---------- */
.w-disc { padding: var(--space-10) 0; background: color-mix(in srgb, var(--text-secondary) 14%, var(--surface-page)); border-top: var(--stroke-hairline) solid var(--border-subtle); color: var(--text-secondary); font: var(--type-small); }
.w-disc p { margin: 0 0 var(--space-2); max-width: 90ch; }

/* ---------- source popup ---------- */
.w-dlg { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 0; border: 1px solid var(--border-strong); border-radius: var(--radius-ui); background: var(--surface-card); color: var(--text-primary); }
.w-dlg::backdrop { background: color-mix(in srgb, #000 55%, transparent); }
.w-dlg[open] { animation: hu-in 220ms var(--ease) both; }
.w-dlg-h { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-subtle); }
.w-dlg-h h2 { margin: 0; font: 700 16px/24px var(--font-ui); }
.w-dlg-x { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--border-strong); border-radius: var(--radius-ui); background: transparent; color: var(--text-primary); cursor: pointer; }
.w-dlg-x:hover { background: var(--surface-raised); }
.w-dlg-b { padding: var(--space-4); overflow: auto; }
.w-dlg-b p { margin: 0 0 var(--space-3); }
.w-dlg-b .w-ref-find { color: var(--text-secondary); }
.w-dlg-b a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }

/* ---------- narrow screens ---------- */
@media (max-width: 900px) {
  .w-hero { grid-template-columns: 1fr; padding-top: 64px; }
  .w-hero::after { background: linear-gradient(180deg, var(--w-dark) 0%, color-mix(in srgb, var(--w-dark) 70%, transparent) 55%, transparent 100%); }
  .w-rec { justify-self: start; width: min(300px, 100%); margin-top: var(--space-4); }
  .w-demo { grid-template-columns: 1fr 1fr; }
  .w-steps { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); }
  .w-recs { grid-column: 1 / -1; }
  .w-two { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .w-pin-in .w-lead, .w-steps { display: none; }
  .w-demo { grid-template-columns: 1fr; margin-top: var(--space-3); }
  .w-patient, .w-recs { padding: var(--space-3); }
  .w-patient dl { grid-template-columns: 1fr 1fr; gap: var(--space-2); }
  .w-r b { font-size: 14px; line-height: 20px; }
  .w-h2 { font-size: 1.7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .w *, .w *::before, .w *::after { animation: none !important; transition: none !important; }
}
@media print { .w-pin { height: auto; } .w-pin-in { position: static; } .w .w-rv { opacity: 1 !important; transform: none !important; } .w-ghosts, .w-words, .w-pages { display: none; } }