/* The State of Virtual Care 2026 report page. Shares only fonts, images and data with the PDF edition. */
@font-face{font-family:Geist;src:url('./assets/geist.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Geist Mono';src:url('./assets/geist-mono.woff2') format('woff2');font-weight:100 900;font-display:swap}

:root{
  --wrap:1216px;--gutter:24px;--header:108px;
  --ink:#fff;--muted:#b8c1cf;--soft:#8592a6;--line:#ffffff1a;--line-strong:#ffffff2e;
  --violet:#823ffe;--lavender:#9b65fe;--lilac:#b493ff;
  --ease:cubic-bezier(.2,.75,.25,1);
  /* Chart motion. Every chart builds the same way: after a short lead, each mark grows
     for --build-dur, one --build-step after the mark before it; its value fades in halfway through.
     Later changes (tabs, selections) use --select-dur. --pace scales every one of them: 1.18 plays
     the motion at about 85% of its original speed, so readers don't miss a build. */
  --pace:1.18;
  --build-dur:calc(.8s*var(--pace));--build-step:calc(70ms*var(--pace));--build-lead:calc(.15s*var(--pace));--select-dur:calc(.5s*var(--pace));
}
/* Chapter themes measured from the Figma frame. */
[data-theme=navy]{--line:#1d3b63;--line-strong:#1d3b63;--bg:#001a32;--card:#0e2442;--card-2:#0a1f3b;--track:#16305200;--track-solid:#1a3356;--accent:#9b65fe;--accent-strong:#823ffe;--accent-soft:#b493ff;--accent-dim:#3b2f7a;--fill-a:#5b2bd0;--fill-b:#b493ff;--quote-tint:#202364;--muted:#b8c1cf;--soft:#8592a6}
[data-theme=teal]{--line:#004148;--line-strong:#004148;--bg:#0b2226;--card:#0f2b30;--card-2:#0d272b;--track-solid:#16363b;--accent:#3fd0d4;--accent-strong:#22b3bb;--accent-soft:#8fe6e8;--accent-dim:#1a4a50;--fill-a:#0f6f78;--fill-b:#8fe6e8;--quote-tint:#0f3e44;--muted:#b3c6c7;--soft:#7f9597}
[data-theme=red]{--line:#5c2d28;--line-strong:#5c2d28;--bg:#2a1312;--card:#341b19;--card-2:#2f1816;--track-solid:#46231f;--accent:#e2574f;--accent-strong:#c9453f;--accent-soft:#e48f89;--accent-dim:#5a302c;--fill-a:#c9453f;--fill-b:#e48f89;--quote-tint:#4a2522;--muted:#c7bcba;--soft:#978a88}
/* Chapters 04–05 are not drawn in the Figma page; these extend its pattern of one hue per chapter. */
[data-theme=amber]{--bg:#201c14;--card:#29241a;--card-2:#252017;--track-solid:#363024;--accent:#f0b955;--accent-strong:#d99a2b;--accent-soft:#f6d48f;--accent-dim:#56462a;--fill-a:#a5741f;--fill-b:#f6d48f;--quote-tint:#4a3a17;--muted:#c9c1b1;--soft:#978f80}
[data-theme=blue]{--line:#1f3c5a;--line-strong:#1f3c5a;--bg:#071a2e;--card:#0e2440;--card-2:#0b2039;--track-solid:#12305a;--accent:#62b5f2;--accent-strong:#3c94d6;--accent-soft:#a5d4f7;--accent-dim:#244a66;--fill-a:#2f78b3;--fill-b:#a5d4f7;--quote-tint:#163a57;--muted:#b6c3cc;--soft:#84929d}
[data-theme=plum]{--line:#512f4c;--line-strong:#512f4c;--bg:#221726;--card:#2c1f31;--card-2:#271b2c;--track-solid:#38293e;--accent:#f08bd8;--accent-strong:#d65fbd;--accent-soft:#f6bde8;--accent-dim:#5a3157;--fill-a:#a8439a;--fill-b:#f6bde8;--quote-tint:#47203f;--muted:#c9bcc9;--soft:#988a98}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header) + 16px)}
body.v3{margin:0;background:#001a32;color:var(--ink);font-family:Geist,Arial,sans-serif;font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p,dl,dd,figure,blockquote{margin:0}
h1,h2,h3{font-weight:500}
/* Text treatment: headings, copy and labels wrap with text-wrap:pretty (no orphans, no rebalanced measures). */
h1,h2,h3,h4,p,li,dt,figcaption,summary,cite{text-wrap:pretty}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
img{max-width:100%}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--lilac);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:fixed;left:16px;top:-80px;z-index:100;background:#fff;color:#001a32;padding:10px 14px;border-radius:8px}
.skip-link:focus{top:12px}
.wrap{width:min(var(--wrap),calc(100% - var(--gutter)*2));margin-inline:auto}
[data-theme]{background:var(--bg);color:var(--ink)}
.eyebrow{font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--soft);margin-bottom:14px}
.mono{font-family:'Geist Mono',monospace}

/* Buttons and pills */
.btn{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:9px 18px;border-radius:999px;font-size:13px;font-weight:500;white-space:nowrap;transition:transform .2s var(--ease),background .2s}
.btn:hover{transform:translateY(-1px)}
.btn-sm{min-height:32px;padding:6px 14px;font-size:12px}
.btn-violet{background:var(--lavender);color:#fff}
.btn-light{background:#fff;color:#001a32}
.text-btn{font-size:12px;color:var(--soft);text-decoration:underline;text-underline-offset:3px}
.pills{display:flex;flex-wrap:wrap;gap:6px}
.pills button,.tabs button{min-height:28px;padding:5px 12px;border-radius:999px;border:1px solid var(--line-strong);font-size:11px;color:var(--muted);transition:background .2s,color .2s,border-color .2s}
.pills button:hover,.tabs button:hover{color:#fff;border-color:#ffffff55}
.pills button[aria-pressed=true],.tabs button[aria-selected=true]{background:var(--accent-strong,var(--violet));border-color:transparent;color:#fff}
[data-theme=teal] .tabs button[aria-selected=true]{color:#06282b;background:var(--accent)}
.tabs{display:flex;gap:4px;flex-wrap:wrap}
.tabs button{border-color:transparent}
/* Sliding selection: one pill (.glider, added by wireGliders in report.js) glides to the chosen button in
   every pill, tab and persona group, instead of each button switching its own background. */
.has-glider{position:relative;isolation:isolate}
.glider{position:absolute;left:0;top:0;z-index:-1;border-radius:999px;pointer-events:none;background:var(--accent-strong,var(--violet));transition:transform .5s var(--ease),width .5s var(--ease),height .5s var(--ease),opacity .25s}
[data-theme=teal] .tabs .glider{background:var(--accent)}
.p-tabs .glider{background:var(--accent-soft)}
.has-glider.has-glider button[aria-pressed=true],.has-glider.has-glider button[aria-selected=true]{background:transparent;border-color:transparent}
.has-glider button{transition:color .3s var(--ease),border-color .3s}

/* Header (Figma "Navigation Bar" + "Nav — Report sections"): a 64px brand row and a 44px chapter row, each with a hairline under it */
.site-header{position:sticky;top:0;z-index:40;background:#1e2261f2;backdrop-filter:blur(14px);border-bottom:1px solid #b8c4d61a;transition:background .4s}
.site-header.scrolled{background:color-mix(in srgb,var(--header-bg,#001a32) 92%,transparent)}
.header-top{border-bottom:1px solid #b8c4d61a}
.header-row{display:flex;align-items:center;justify-content:space-between;height:63px}
.brand img{display:block;height:20px;width:auto}
.header-actions{display:flex;align-items:center;gap:4px}
.header-actions .btn-sm{min-height:32px;padding:6px 14px;font-size:14px;line-height:20px;gap:4px;border:1px solid transparent}
/* Login's border is its own white, so its pill reads the same height as Get started's. */
.header-actions .btn-light{border-color:#fff}
.header-actions .btn-violet{background:#823ffe;border-color:#001a3214}
/* Bridge site arrow (usebridge.com nav): the shaft draws in toward the head on hover. */
.btn-arrow{width:16px;height:16px;flex:none}
.btn-arrow .shaft{transform-origin:12px 8px;transition:transform .3s var(--ease)}
.btn:hover .btn-arrow .shaft{transform:scaleX(.6)}
.chapter-nav{display:flex;gap:0;height:43px;align-items:stretch;overflow-x:auto;scrollbar-width:none}
.chapter-nav::-webkit-scrollbar{display:none}
.chapter-nav a{position:relative;display:flex;align-items:center;gap:8px;padding:0 12px;font-size:14px;line-height:20px;color:#b8c4d6;white-space:nowrap;transition:color .2s}
.chapter-nav a small{font-family:'Geist Mono',monospace;font-size:11px;color:#b8c4d6}
.chapter-nav a::after{content:"";position:absolute;left:9px;right:9px;bottom:0;height:2px;border-radius:1px;background:#9b65fe;opacity:0;transition:opacity .2s}
.chapter-nav a:hover{color:#ededed}
.chapter-nav a[aria-current]{color:#ededed}
.chapter-nav a[aria-current]::after{opacity:1}
.nav-toggle{display:none}
/* usebridge.com main navigation, as on the live site; a menu button below 900px (site-chrome.js). */
.header-row{gap:24px}
.site-links{display:none;align-items:center;gap:4px;margin:0 auto}
.site-links a{display:flex;align-items:center;min-height:36px;padding:6px 12px;border-radius:8px;font-size:13px;font-weight:500;color:#e6eaf2;white-space:nowrap;transition:background .18s,color .18s}
.site-links a:hover{background:#ffffff14;color:#fff}
.site-links a.site-links-login{display:none}
.site-menu-toggle{display:none;flex-direction:column;justify-content:center;gap:4px;width:36px;height:36px;padding:0 9px;border-radius:8px}
.site-menu-toggle span{display:block;height:1.5px;background:#fff;border-radius:2px;transition:transform .2s,opacity .2s}
.site-menu-toggle[aria-expanded=true] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.site-menu-toggle[aria-expanded=true] span:nth-child(2){opacity:0}
.site-menu-toggle[aria-expanded=true] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
@media (max-width:1040px){.site-links a{padding-inline:9px}}
@media (max-width:900px){
  .site-links{display:none;position:absolute;top:100%;left:calc(-1 * var(--gutter));right:calc(-1 * var(--gutter));z-index:5;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:8px var(--gutter) 16px;background:#0b1730;border-bottom:1px solid var(--line);box-shadow:0 16px 24px #0006;max-height:calc(100dvh - 56px);overflow:auto}
  .site-links.open{display:flex}
  .site-links a{min-height:48px;padding:12px 0;border-radius:0;font-size:15px;border-bottom:1px solid var(--line)}
  .site-links a:last-child{border-bottom:0}
  .site-links a.site-links-login{display:flex}
  .site-menu-toggle{display:flex}
  .header-row{position:relative}
}
@media (max-width:420px){.header-actions .header-login{display:none}}
/* Bridge homepage dot grid under the pointer (site-chrome.js). Replaces the static dot texture
   wherever it mounts; the mask keeps the left-hand copy quiet. */
[data-hero-grid]{isolation:isolate}
.hero-grid{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,#0000004d 8%,#000 62%);mask-image:linear-gradient(90deg,#0000004d 8%,#000 62%)}
.hero-grid canvas{display:block;width:100%;height:100%}
.hero.has-hero-grid::before,.landing.has-hero-grid .landing-bg::before{display:none}
@media print{.hero-grid{display:none!important}}
/* The dot grid fades out toward the bottom of the hero instead of stopping at its edge. */
.hero .hero-grid{-webkit-mask-image:linear-gradient(90deg,#0000004d 8%,#000 62%),linear-gradient(180deg,#000 62%,#0000 100%);mask-image:linear-gradient(90deg,#0000004d 8%,#000 62%),linear-gradient(180deg,#000 62%,#0000 100%);-webkit-mask-composite:source-in;mask-composite:intersect}

/* Hero */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#1f2363 0%,#0b1e44 45%,#001a32 100%)}
.hero::before,.quote-panel::before{content:"";position:absolute;inset:0;background-image:radial-gradient(#ffffff1f 1px,transparent 1.2px);background-size:14px 14px;-webkit-mask-image:radial-gradient(ellipse 60% 70% at 70% 30%,#000 10%,transparent 75%);mask-image:radial-gradient(ellipse 60% 70% at 70% 30%,#000 10%,transparent 75%);pointer-events:none}
.hero-inner{position:relative;padding:112px 0 96px}
.hero h1{font-size:clamp(56px,8.2vw,118px);line-height:.98;letter-spacing:-.045em;max-width:12ch}
.hero h1 span{color:var(--lavender);font-variant-numeric:lining-nums tabular-nums}
.hero-intro{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:112px;font-size:16px;line-height:1.5;color:#fff}
.hero-intro p+p{margin-top:18px}
.hero-intro .hero-lead{font-weight:500}
.hero-actions{display:flex;gap:8px;margin-top:28px}
/* Overview stat tiles: one quiet panel, inset hairline dividers, a short violet tick
   over each number and a fixed gap between number and label. */
.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:56px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,#ffffff0d,#ffffff03);overflow:hidden}
.hero-stats>div{position:relative;padding:30px 28px 28px;display:flex;flex-direction:column;justify-content:flex-start;gap:16px}
.hero-stats>div::before{content:"";width:20px;height:2px;border-radius:2px;background:var(--lavender);margin-bottom:6px}
.hero-stats>div+div::after{content:"";position:absolute;left:0;top:28px;bottom:28px;width:1px;background:var(--line-strong)}
.hero-stats dt{font-size:12px;line-height:1.45;color:#c9d2df;max-width:24ch}
.hero-stats dt sup,.hero-footnote sup{color:var(--lilac)}
.hero-stats dd{font-size:clamp(34px,3.6vw,52px);letter-spacing:-.035em;font-weight:500;line-height:1}
.hero-stats dd i{font-style:normal;color:var(--soft)}
.hero-footnote{margin-top:10px;font-size:11px;color:var(--soft)}

/* Table of contents (Figma 1:4211) */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.toc{padding:112px 0 120px}
.toc h2{font-size:clamp(40px,4.6vw,64px);letter-spacing:-.035em;line-height:1.05;margin-top:12px}
.toc-filter{margin:56px 0 32px}
.toc-filter-title{font-size:14px;margin-bottom:12px}
.toc-filter .pills button{min-height:32px;padding:6px 14px;font-size:12px}
.toc-filter-status{display:grid;grid-template-rows:0fr;max-width:640px;margin-top:0;font-size:13px;line-height:1.5;color:var(--muted);opacity:0;filter:blur(6px);transition:grid-template-rows .45s var(--ease),margin .45s var(--ease),opacity .35s var(--ease),filter .35s var(--ease)}
.toc-filter-status>span{overflow:hidden;min-height:0}
.toc-filter-status.on{grid-template-rows:1fr;margin-top:12px;opacity:1;filter:none}
.toc-list{border-top:1px solid var(--line)}
.toc-chapter{border-bottom:1px solid var(--line)}
.toc-chapter h3{font:inherit}
.toc-head{display:grid;grid-template-columns:112px 1fr auto 32px;align-items:center;gap:20px;width:100%;min-height:88px;padding:0 16px;text-align:left;color:#fff}
.toc-num{font-family:'Geist Mono',monospace;font-size:11px;color:var(--tone)}
.toc-name{font-size:clamp(22px,2.2vw,30px);letter-spacing:-.025em;font-weight:500}
.toc-count{font-size:11px;color:var(--muted)}
.toc-icon{position:relative;width:32px;height:32px;border-radius:50%;border:1px solid var(--line-strong);transition:background .25s,transform .35s var(--ease)}
.toc-icon::before,.toc-icon::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.5px;background:currentColor;transform:translate(-50%,-50%)}
.toc-icon::after{transform:translate(-50%,-50%) rotate(90deg)}
.toc-head[aria-expanded=true] .toc-icon{transform:rotate(45deg);background:#ffffff14}
.toc-head:hover .toc-icon,.toc-head:focus-visible .toc-icon{background:#ffffff1f}
.toc-rows{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s var(--ease)}
.toc-rows.open{grid-template-rows:1fr}
.toc-rows>div{overflow:hidden;min-height:0}
.toc-rows.open>div{padding-bottom:20px}
/* The fid column matches .toc-head's number column, so each pill starts under its chapter name. */
.toc-finding{display:grid;grid-template-columns:112px 150px 150px 1fr 32px;align-items:center;gap:20px;padding:16px;min-height:80px;border-radius:12px;transition:background .2s,opacity .5s var(--ease) var(--d,0s),filter .5s var(--ease) var(--d,0s),transform .5s var(--ease) var(--d,0s)}
/* Filtered out: fade, soften and settle back slightly. --d staggers the rows (applyFilters). */
.toc-finding.dimmed{filter:blur(1.5px) saturate(.35);transform:scale(.985)}
.toc-finding:hover,.toc-finding:focus-visible{background:#ffffff0d}
.toc-finding .chip{border-radius:999px;border-color:transparent;padding:4px 10px;white-space:nowrap}
.toc-finding .fid{font-family:'Geist Mono',monospace;font-size:10px;color:var(--soft)}
.toc-finding .sig{position:relative;font-size:32px;letter-spacing:-.03em;font-weight:500}
/* Hang a leading minus by its own width so the digits share the column's left edge. */
.toc-finding .sig-sign{position:absolute;inset-inline-end:100%;top:0}
.toc-finding .txt{font-size:14px;line-height:1.45;color:#dfe5ee;max-width:62ch}
.toc-finding .go{color:var(--soft);text-align:right}
.chip{display:inline-flex;align-items:center;justify-self:start;padding:3px 8px;border-radius:5px;font-family:'Geist Mono',monospace;font-size:9px;letter-spacing:.06em;text-transform:uppercase;border:1px solid}
.tone-navy{--tone:#b493ff;--tone-bg:#823ffe33}
.tone-teal{--tone:#3fd0d4;--tone-bg:#22b3bb26}
.tone-red{--tone:#e48f89;--tone-bg:#c9453f2e}
.tone-amber{--tone:#f0b955;--tone-bg:#d99a2b26}
.tone-blue{--tone:#7cc0f2;--tone-bg:#3c94d626}
.tone-plum{--tone:#f08bd8;--tone-bg:#d65fbd26}
.chip{color:var(--tone);background:var(--tone-bg);border-color:color-mix(in srgb,var(--tone) 45%,transparent)}
.sig{color:var(--tone)}
.dimmed{opacity:.28}

/* Chapters and stories */
.chapter{position:relative}
.story{padding:112px 0 96px}
/* A filtered-out finding fades its content but not the note that says why (applyFilters in report.js). The fade
   uses filter, so it doesn't fight the .rv reveal's opacity. */
.story .wrap>*{transition:opacity .7s var(--ease),transform .7s var(--ease),filter .5s var(--ease)}
.story.dimmed{opacity:1}
.story.dimmed .wrap>*:not(.aud-note){filter:opacity(.28) saturate(.4)}
.aud-note{position:sticky;top:calc(var(--header) + 12px);z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;width:fit-content;max-width:100%;margin:0 0 28px;padding:10px 10px 10px 16px;border:1px solid var(--line-strong);border-radius:14px;background:#0a1a33e6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:13px;line-height:1.4;color:var(--muted);box-shadow:0 12px 30px -16px #000c}
.aud-note[hidden]{display:none}
.aud-note b{color:#fff;font-weight:500}
.aud-note button{min-height:32px;padding:6px 14px;border-radius:999px;background:#fff;color:#001a32;font-size:12px;font-weight:500;white-space:nowrap}
.aud-note button:hover{background:#e7e9ee}
.aud-note.show{animation:aud-in .45s var(--ease)}
@keyframes aud-in{from{opacity:0;transform:translateY(-6px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
.story+.story>.wrap{border-top:1px solid var(--line);padding-top:96px}
.story+.story{padding-top:0}
.story-title{font-size:clamp(34px,4.4vw,64px);line-height:1.04;letter-spacing:-.035em;max-width:900px;margin-bottom:36px}
.story-title.long{max-width:1000px}
.story-body{display:grid;grid-template-columns:1fr 1fr;gap:24px 32px;align-items:start}
.story-copy p{font-size:14px;color:var(--muted);margin-bottom:14px}
.story-copy p.lead{color:#fff}
.story-copy p strong{color:#fff;font-weight:500}
.story-copy h3{font-size:12px;font-family:'Geist Mono',monospace;text-transform:uppercase;letter-spacing:.06em;color:var(--soft);margin:22px 0 10px;font-weight:400}
.why{border:1px dashed var(--line-strong);border-radius:12px;padding:16px 18px;font-size:13px;color:#dfe5ee}
.why .eyebrow{color:var(--accent);margin-bottom:8px;font-size:10px}
.why p+p{margin-top:10px}
.why [data-for]{transition:opacity .45s var(--ease),filter .45s var(--ease)}
.why [data-for].faded{opacity:.35;filter:blur(.6px)}
.figs{display:grid;gap:16px;margin-top:40px}
.figs.pair{grid-template-columns:1fr 1fr}

/* Figure card */
.fig{position:relative;border:1px solid var(--line-strong);border-radius:14px;background:var(--card);overflow:hidden}
.fig-head{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:44px;padding:8px 12px 8px 14px;border-bottom:1px solid var(--line)}
.fig-label{font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.fig-body{position:relative;padding:28px 32px}
.fig-q{font-size:17px;line-height:1.35;max-width:30ch;color:#dfe5ee}
.fig-q b{color:#fff;font-weight:500}
.eyebrow-num{color:var(--accent)}
.fig-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:44px;padding:8px 12px 8px 14px;border-top:1px solid var(--line);font-size:10.5px;line-height:1.5;color:var(--soft)}
.fig-src{flex:1;min-width:0}
.fig-src>summary{list-style:none;display:inline-flex;align-items:center;gap:8px;min-height:32px;font-size:12px;color:var(--muted)}
.fig-src>summary::-webkit-details-marker{display:none}
.fig-src>summary::before{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .25s}
.fig-src[open]>summary::before{transform:translateY(1px) rotate(225deg)}
.fig-src>summary:hover{color:#fff}
.fig-src-body{padding-top:6px}
.fig-share:empty{display:none}
.share-pill{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:6px 14px;border-radius:999px;border:1px solid transparent;background:color-mix(in srgb,var(--accent) 16%,transparent);font-size:12px;color:#fff;white-space:nowrap;transition:background .2s,border-color .2s}
.share-pill:hover,.share-pill:focus-visible{background:#ffffff14;border-color:#ffffff55}
.fig-foot p+p{margin-top:4px}
.fig-foot details{margin-top:0}
.fig-foot:has(details[open]){align-items:flex-start}
.fig-foot .share-pill{min-height:28px;padding:4px 14px}
.fig-foot .fig-src>summary{min-height:28px}
.fig-foot summary{cursor:pointer;color:var(--muted);font-size:11px;width:max-content}
.fig-foot table{margin-top:8px;border-collapse:collapse;width:100%;font-size:11px;color:var(--muted)}
.fig-foot th,.fig-foot td{text-align:left;padding:5px 8px;border-bottom:1px solid var(--line);font-weight:400}
.fig-foot td:not(:first-child),.fig-foot th:not(:first-child){text-align:right;font-variant-numeric:tabular-nums}
.big-num{font-size:clamp(44px,5vw,72px);line-height:1;letter-spacing:-.04em;font-weight:500;color:var(--accent)}
.notice{margin:0 0 20px;padding:12px 14px;border-radius:10px;border:1px solid #f0b95566;background:#f0b95514;font-size:12px;color:#f6d48f}
.notice strong{display:block;font-weight:500;margin-bottom:2px}

/* Tooltip */
.tip{position:absolute;z-index:5;pointer-events:none;padding:8px 10px;border-radius:8px;background:#0b0f16f2;border:1px solid var(--line-strong);box-shadow:0 10px 30px #0006;font-size:10.5px;color:var(--muted);white-space:nowrap;opacity:0;transform:translateY(4px);transition:opacity .15s,transform .15s}
.tip b{display:block;font-size:15px;color:#fff;font-weight:500}
.tip.on{opacity:1;transform:none}

/* Pill bars */
.pbars{display:grid;gap:12px;margin-top:30px}
.pbar{display:grid;grid-template-columns:1fr 64px;align-items:center;gap:16px;width:100%;text-align:left;border-radius:999px}
.pbar .track{position:relative;height:36px;border-radius:999px;background:var(--track-solid);overflow:hidden}
.pbar .fill{position:absolute;inset:0 auto 0 0;width:calc(var(--v)*1%);border-radius:999px;background:color-mix(in srgb,var(--accent) 22%,var(--track-solid));transition:width var(--select-dur) var(--ease),background .3s}
.pbar .lab{position:relative;display:flex;align-items:center;height:100%;padding:0 14px;font-size:12px;color:#e8ecef;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pbar .val{font-size:30px;letter-spacing:-.03em;text-align:right;color:#fff}
.pbar.on .fill{background:linear-gradient(90deg,var(--fill-a),var(--fill-b))}
/* Dark copy of the label clipped to the bright fill, so text stays readable on both sides of the bar end. */
.pbar .fill{overflow:hidden}
[data-theme=teal] .pbar.on .fill,[data-theme=amber] .pbar.on .fill{z-index:1}
.pbar .lab.inv{position:absolute;left:0;top:0;width:calc(100% * 100 / max(var(--v),1));display:none;color:#10170f}
[data-theme=teal] .pbar.on .lab.inv,[data-theme=amber] .pbar.on .lab.inv{display:flex}
.pbar .lab:not(.inv){z-index:0}
[data-theme=red] .pbar .fill{background:color-mix(in srgb,var(--accent) 30%,var(--track-solid))}
[data-theme=red] .pbar.on .fill{background:var(--accent-strong)}
.pbar:hover .fill{filter:brightness(1.15)}
.pgroup-label{font-family:'Geist Mono',monospace;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:8px 0 -2px}

/* Bubble chart */
.bubbles-grid{display:grid;grid-template-columns:minmax(290px,30%) 1fr;margin:-28px -32px;min-height:460px}
.bubbles-side{padding:28px 20px 24px 20px;border-right:1px solid var(--line);display:flex;flex-direction:column}
.bubbles-side .fig-q{font-size:16px;margin-bottom:40px}
.answers-title{font-size:11px;color:var(--soft);margin:0 0 8px 6px}
.answer{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;padding:7px 8px;border-radius:7px;font-size:12px;color:var(--muted);text-align:left}
.answer{transition:background .2s,color .2s,opacity .25s}
.answer>span:first-child{white-space:nowrap}
.answer i{display:inline-block;width:8px;height:8px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--b1),var(--b2));margin-right:8px}
.answer.on{background:#ffffff0d;color:#fff}
.bubbles-side:has(.answer.on) .answer:not(.on){opacity:.5}
.bubbles-note{margin-top:auto;font-family:'Geist Mono',monospace;font-size:9px;letter-spacing:.06em;color:var(--soft);text-transform:uppercase}
.bubble-stage{position:relative;min-height:460px;overflow:hidden}
.bubble-stage .ring{position:absolute;aspect-ratio:1;transform:translate(-50%,-50%);border:1px solid var(--line);border-radius:50%;pointer-events:none;transition:left .6s var(--ease),top .6s var(--ease),width .6s var(--ease)}
/* Textured bubbles, as in the Figma (node 1:4397): each is a dark base with blurred colour blobs
   (a mesh gradient) and a fine grain (SVG noise). --mesh holds the blobs for each colour. */
.bt-violet{--b1:#9b5cf5;--b2:#5b2bd0;--base:#2a2a6a;--mesh:radial-gradient(60% 55% at 28% 18%,#a066ff 0,#a066ff00 100%),radial-gradient(75% 70% at 18% 70%,#7444cc 0,#7444cc00 100%),radial-gradient(60% 50% at 42% 98%,#5e3aa6 0,#5e3aa600 100%),radial-gradient(50% 55% at 84% 36%,#0f2a40 0,#0f2a4000 100%),radial-gradient(55% 50% at 80% 86%,#3d5f86 0,#3d5f8600 100%)}
.bt-coral{--b1:#f2645a;--b2:#a8322a;--base:#2d100e;--mesh:radial-gradient(55% 50% at 50% 8%,#3e0e0a 0,#3e0e0a00 100%),radial-gradient(60% 65% at 10% 50%,#b8382e 0,#b8382e00 100%),radial-gradient(55% 55% at 80% 85%,#ff6a5c 0,#ff6a5c00 100%),radial-gradient(40% 40% at 88% 30%,#7a2a22 0,#7a2a2200 100%)}
.bt-plum{--b1:#e08ad6;--b2:#7a3a78;--base:#271124;--mesh:radial-gradient(45% 45% at 10% 30%,#e391d8 0,#e391d800 100%),radial-gradient(60% 55% at 70% 25%,#4a2148 0,#4a214800 100%),radial-gradient(70% 55% at 45% 95%,#9a3f8c 0,#9a3f8c00 100%)}
.bt-teal{--b1:#5ed3d6;--b2:#1d6b70;--base:#001d20;--mesh:radial-gradient(55% 55% at 12% 30%,#5fd0d8 0,#5fd0d800 100%),radial-gradient(60% 60% at 80% 35%,#1d6f74 0,#1d6f7400 100%),radial-gradient(60% 45% at 50% 100%,#0b2f30 0,#0b2f3000 100%)}
.bt-green{--b1:#4fc46a;--b2:#1d5a2a;--base:#001f07;--mesh:radial-gradient(55% 55% at 20% 25%,#5fd07a 0,#5fd07a00 100%),radial-gradient(60% 60% at 60% 70%,#13511f 0,#13511f00 100%)}
.bt-slate{--b1:#8ea3c4;--b2:#34496b;--base:#101d33;--mesh:radial-gradient(55% 55% at 25% 25%,#8ea3c4 0,#8ea3c400 100%),radial-gradient(60% 60% at 75% 80%,#34496b 0,#34496b00 100%)}
.bubble{position:absolute;display:grid;place-items:center;border-radius:50%;transform:translate(-50%,-50%);color:#ededed;font-size:clamp(14px,calc(22px + var(--r)*0.32px),88px);font-weight:600;letter-spacing:-.04em;line-height:1.04;width:calc(var(--r)*2px);height:calc(var(--r)*2px);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .3 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),var(--mesh),var(--base);
  background-blend-mode:soft-light,normal;transition:left .6s var(--ease),top .6s var(--ease),width .6s var(--ease),height .6s var(--ease),opacity .3s,transform .3s var(--ease)}
.bubble-stage:not(.placed) .bubble{transition:none}
.bubble-stage.has-hot .bubble:not(.on){opacity:.35}
.bubble.on{z-index:2;transform:translate(-50%,-50%) scale(1.04)}
.bubble-stage .tip{z-index:3}

/* Wait columns */
.wait-top{display:flex;justify-content:space-between;gap:24px;align-items:flex-start}
.wait-top .big-num{text-align:right}
.wait-top small{display:block;font-size:11px;color:var(--muted);letter-spacing:0;font-weight:400;margin-top:6px}
.wait-brackets{display:grid;grid-template-columns:2fr 4fr;gap:16px;margin-top:36px;font-size:12px;color:var(--muted)}
.wait-brackets span{padding-bottom:10px;border-bottom:2px solid}
.wait-brackets b{color:#fff;font-weight:500;margin-right:6px}
.wb-in{border-color:var(--accent)!important}.wb-out{border-color:#2fc6cf!important}
.wait-cols{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;height:300px;margin:28px 0 0;border-bottom:1px solid var(--line);padding-bottom:0;position:relative}
.wait-col{position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch}
.wait-col .wv{text-align:center;font-size:14px;color:#fff;margin-bottom:12px}
.wait-col .wbar{display:block;height:calc(var(--h)*220px + 14px);border-radius:12px 12px 0 0;background:linear-gradient(180deg,#2fc6cf,#0d5f6b);transition:height var(--select-dur) var(--ease)}
.wait-col.in .wbar{background:linear-gradient(180deg,#a978ff,#5a17c9)}
.wait-col .wl{position:absolute;top:100%;left:0;right:0;padding-top:14px;text-align:center;font-size:11px;color:var(--muted)}
.wait-cols{margin-bottom:40px}
.fig-table table{width:100%;border-collapse:collapse;font-size:13px;color:var(--muted);margin-top:8px}
.fig-table th,.fig-table td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line);font-weight:400}
.fig-table td:not(:first-child),.fig-table th:not(:first-child){text-align:right;font-variant-numeric:tabular-nums}
.lbars{display:grid;gap:14px;margin-top:28px}
.dots-grid{grid-template-columns:280px 1fr}
.lbar{display:grid;grid-template-columns:1fr 88px;column-gap:20px;align-items:end}
.lbar .ll{grid-column:1/-1;font-size:12px;color:#dfe5ee;margin-bottom:6px}
.lbar .lt{height:18px;border-radius:999px;background:var(--track-solid);overflow:hidden}
.lbar .lf{display:block;height:100%;width:calc(var(--v)*1%);border-radius:999px;background:linear-gradient(90deg,#0c6670,#3fd0d4);transition:width var(--select-dur) var(--ease)}
.lbar:nth-of-type(even) .lf{background:linear-gradient(90deg,#123f8a,#4b9bff)}
.lbar .lv{font-size:clamp(22px,2.4vw,32px);letter-spacing:-.03em;text-align:right;line-height:.8;font-weight:500}
.sa-top{display:grid;grid-template-columns:260px 1fr;margin:-28px -32px 0;border-bottom:1px solid var(--line)}
.sa-side{display:flex;flex-direction:column;justify-content:space-between;padding:28px 24px;border-right:1px solid var(--line)}
.sa-side .big-num small{display:block;font-size:11px;color:var(--muted);letter-spacing:0;font-weight:400;margin-top:8px}
.sa-bars{padding:28px 32px;display:grid;gap:16px;align-content:start}
.sa-key{display:flex;gap:18px;font-size:12px;color:var(--muted)}
.sa-key i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px}
.k-ins,.s-ins{background:linear-gradient(90deg,#0c6670,#3fd0d4)}.k-cash,.s-cash{background:linear-gradient(90deg,#5a17c9,#a978ff)}.k-other,.s-other{background:linear-gradient(90deg,#5d6670,#9aa3ad)}
.sa-name{display:block;font-size:12px;color:#dfe5ee;margin-bottom:6px}.sa-name small{color:var(--soft);font-family:'Geist Mono',monospace;font-size:9.5px;margin-left:6px}
.sa-stack{display:flex;gap:3px;height:30px}
.sa-stack>span{flex:0 0 calc(var(--w)*1% - 2px);border-radius:8px;display:flex;align-items:center;padding-left:10px;font-size:11px;color:#fff;min-width:0;overflow:hidden;transition:flex-basis var(--select-dur) var(--ease)}
.sa-stack>span[style="--w:0"]{display:none}
.sa-diff{padding:24px 0 4px}
.sa-diff .table-scroll{border:0;border-radius:0}
.sa-diff-title{font-size:16px;margin-bottom:12px}
.sa-diff table{width:100%;border-collapse:collapse;font-size:12px;color:var(--muted)}
.sa-diff th{font-weight:400;text-align:left;padding:8px 10px 8px 0}
.sa-diff thead th{font-family:'Geist Mono',monospace;font-size:10px;color:var(--soft)}
.sa-diff td{padding:8px 10px}
.mini{display:flex;align-items:center;gap:10px;min-width:120px}
.mini b{font-weight:400;color:#fff;width:32px}
.mini i{flex:1;height:8px;border-radius:999px;background:linear-gradient(90deg,#0c6670 calc(var(--w)*1%),var(--track-solid) 0)}
.gb-group{font-size:12px;color:#dfe5ee;margin:10px 0 -4px}
.gbar{display:grid;grid-template-columns:1fr 88px;column-gap:20px;align-items:center}
.gbar .lt{height:30px;border-radius:999px;background:var(--track-solid);overflow:hidden}
.gbar .lf{height:100%;width:calc(var(--v)*1%);border-radius:999px;background:linear-gradient(90deg,#0c6670,#3fd0d4);transition:width var(--select-dur) var(--ease)}
.gbar .lv{font-size:clamp(22px,2.4vw,32px);letter-spacing:-.03em;text-align:right;font-weight:500}
.gbar .lf{display:flex;align-items:center;min-width:fit-content;padding:0 12px;font-size:11.5px;color:#fff;white-space:nowrap}
.gbar.gb-violet .lf{background:linear-gradient(90deg,#5a17c9,#a978ff)}
.gbar.gb-grey .lf{background:linear-gradient(90deg,#4b5560,#8f99a3)}
.gbar .lv{line-height:1}
.stat-wide{display:flex;gap:32px;align-items:center}.stat-wide b{white-space:nowrap;font-size:clamp(40px,4.4vw,64px)}.stat-wide span{max-width:56ch;font-size:13px}
[data-theme=red] .lbar .lf,[data-theme=red] .lbar:nth-of-type(even) .lf{background:linear-gradient(90deg,#ff5a4f,#ffc0b5)}
[data-theme=plum] .lbar .lf,[data-theme=plum] .lbar:nth-of-type(even) .lf{background:linear-gradient(90deg,#a8439a,#f6bde8)}
.pbars2 .gbar{grid-template-columns:1fr}.pbars2 .gbar+.gbar{margin-top:-6px}
.pb-0 .lf{background:linear-gradient(90deg,#ff5a4f,#ffc0b5)!important;color:#3a0f0c!important}.pb-1 .lf{background:linear-gradient(90deg,#5a17c9,#a978ff)!important}
.k-u65{background:#ff7a6e}.k-65{background:#8b4cf0}.pair-key{margin-top:14px}
.soft{color:var(--soft)}
.see-all{display:flex;align-items:center;gap:8px;margin:18px auto 0;font-size:12px;color:var(--muted)}
.see-all span{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#ffffff14;color:#fff}
.lbars+.lbars{margin-top:14px}
.two-col-bars{grid-template-columns:1fr 1fr;column-gap:48px;grid-auto-flow:column;grid-template-rows:repeat(var(--rows,6),auto)}
[data-theme=blue] .lbar .lf{background:linear-gradient(90deg,#1d5bb8,#a5d4f7)}
[data-theme=blue] .lbar:nth-of-type(even) .lf{background:linear-gradient(90deg,#5a17c9,#b493ff)}
.pair .lbar .lv{font-size:clamp(20px,2vw,28px)}
.spec-grid{display:grid;grid-template-columns:1.35fr 1fr;margin:-28px -32px}
.spec-list{padding:28px 24px 24px 32px;border-right:1px solid var(--line)}
.spec-key{display:flex;flex-wrap:wrap;gap:16px;font-size:12px;color:var(--muted);margin:16px 0 18px}
.spec-key i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;vertical-align:-1px}
.d-aw{background:#4b9bff}.d-co{background:radial-gradient(circle at 35% 30%,#d3b6ff,#7c3be6)}.d-us{background:radial-gradient(circle at 35% 30%,#8fe6e8,#1d7e86)}
.spec-axis,.spec-row{display:grid;grid-template-columns:150px 1fr;align-items:center;gap:12px}
.spec-axis div{position:relative;height:16px;font-family:'Geist Mono',monospace;font-size:9.5px;color:var(--soft)}
.spec-axis{padding:0 10px}.spec-axis div span{position:absolute;transform:translateX(-50%)}
.spec-row{width:100%;min-height:38px;padding:0 10px;border-radius:10px;text-align:left;font-size:12px;color:#dfe5ee}
.spec-row.on{background:#ffffff10}
.spec-row:hover{background:#ffffff0a}
.spec-track{position:relative;height:16px}
.spec-track::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:#4b9bff44}
.spec-track .link{position:absolute;top:50%;height:2px;margin-top:-1px;background:linear-gradient(90deg,#7c3be6,#3fd0d4);opacity:.7}
.spec-track i{position:absolute;top:50%;width:14px;height:14px;border-radius:50%;transform:translate(-50%,-50%);transition:left var(--select-dur) var(--ease)}
.spec-track i.d-aw{width:7px;height:7px}
.spec-side{padding:28px 32px}
.spec-side h3{font-size:20px;font-weight:500;margin-bottom:10px}
.spec-side p{font-size:13px;color:var(--muted)}
.spec-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:22px 0;padding-bottom:18px;border-bottom:1px solid var(--line)}
.spec-nums b{display:block;font-size:22px;font-weight:500;color:#fff}
.spec-nums span{font-size:11px;color:var(--muted)}
.spec-side svg{width:100%;height:auto;overflow:visible;margin-top:10px}
.spec-side svg .g line{stroke:#ffffff14}.spec-side svg text{fill:var(--soft);font-size:10px;font-family:Geist,Arial,sans-serif}
.spec-side svg path{fill:none;stroke:#9b65fe;stroke-width:2}.spec-side svg circle{fill:#b493ff}.spec-side svg .v{fill:#fff;font-weight:500}
.hms{--hm-all:color-mix(in srgb,#c04fae 55%,transparent)}
.hm-key{margin:14px 0 8px}
.hm .table-scroll{border:0;border-radius:0}.hm table{table-layout:fixed;min-width:680px}.hm tbody th{width:22%}
.hm{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.hm-title{font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--soft);margin-bottom:12px}
.hm table{width:100%;border-collapse:separate;border-spacing:4px;font-size:12px}
.hm thead th{font-weight:500;font-size:11.5px;text-align:center;vertical-align:bottom;padding:6px 4px;color:#fff}
.hm thead th small{display:block;font-family:'Geist Mono',monospace;font-size:9px;color:var(--soft);font-weight:400}
.hm thead th em{display:block;font-style:normal;font-family:'Geist Mono',monospace;font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:2px}
.hm thead th.hm-all{background:var(--hm-all);border-radius:8px 8px 0 0}
.hm tbody th{font-weight:400;text-align:left;color:#dfe5ee;max-width:150px;padding-right:8px;font-size:11.5px}
.hm td{text-align:center;padding:10px 4px;border-radius:6px;font-family:'Geist Mono',monospace;color:#fff;min-width:64px}
.pb-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.pb-card{border:1px solid var(--line-strong);border-radius:14px;background:var(--card);overflow:hidden}
.pb-head{padding:14px 18px;border-bottom:1px solid var(--line);font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pb-card ol{list-style:none;margin:0;padding:0}
.pb-card li{display:grid;grid-template-columns:32px 1fr auto;gap:12px;padding:18px;border-bottom:1px solid var(--line)}
.pb-card li:last-child{border-bottom:0}
.pb-n{font-family:'Geist Mono',monospace;font-size:10px;color:var(--soft);padding-top:3px}
.pb-card strong{display:block;font-weight:500;font-size:14px;margin-bottom:4px}
.pb-card li p{font-size:12px;color:var(--muted);max-width:46ch}
.pb-card li>b{font-size:clamp(24px,2.4vw,32px);font-weight:500;letter-spacing:-.03em;color:var(--accent);white-space:nowrap}
.pb-card li>b.warm{color:#f6b06b}
.stat-row{display:grid;grid-template-columns:repeat(var(--n,2),1fr);gap:12px;margin-top:12px}
.stat{border:1px solid var(--line-strong);border-radius:12px;background:var(--card);padding:18px 18px 16px}
.stat b{display:block;font-size:clamp(30px,3vw,44px);font-weight:500;letter-spacing:-.035em;line-height:1.05}
.stat span{display:block;margin-top:8px;font-size:11.5px;color:var(--muted);max-width:40ch}
.stat small{display:block;margin-top:10px;font-family:'Geist Mono',monospace;font-size:9.5px;color:var(--soft)}

/* Dot grid */
.dots-stage{display:grid;place-items:center;padding:32px}
.dots{display:grid;grid-template-columns:repeat(10,1fr);gap:clamp(8px,1.6vw,18px);width:min(100%,500px)}
.dots i{aspect-ratio:1;border-radius:50%;background:#ffffff14;transition:opacity .3s,transform .3s}
.dots i,.answer.dc0 i,.answer.dc1 i,.answer.dc2 i,.answer.dc3 i,.answer.dc4 i{background:radial-gradient(circle at 35% 30%,var(--d1),var(--d2))}
.c0,.dc0{--d1:#ddc6ff;--d2:#b892ff}.c1,.dc1{--d1:#a774ff;--d2:#7c3be6}.c2,.dc2{--d1:#8fe6e8;--d2:#4fc3c8}.c3,.dc3{--d1:#3fb0b6;--d2:#1d7e86}.c4,.dc4{--d1:#16656d;--d2:#0c454c}
.dots i:not([class]){--d1:#ffffff14;--d2:#ffffff0a}
.dots.focus i:not(.hl){opacity:.2}
.dots.focus i.hl{transform:scale(1.08)}
.legend{display:flex;flex-wrap:wrap;gap:6px;margin-top:22px}
.legend button{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border-radius:999px;font-size:11px;color:var(--muted);border:1px solid transparent}
.legend button[aria-pressed=true]{border-color:var(--line-strong);color:#fff;background:#ffffff08}
.legend i{width:8px;height:8px;border-radius:50%}
.legend b{font-weight:500;color:#fff}
.callout-line{margin-top:18px;font-size:12px;color:var(--muted)}
.callout-line b{color:var(--accent);font-weight:500}

/* Dot strip (standalone, provisional) */
.strip{display:grid;grid-template-columns:150px 1fr 90px;align-items:center;gap:16px;min-height:54px;border-bottom:1px solid var(--line)}
.strip:last-of-type{border-bottom:0}
.strip .name{font-size:14px}
.strip .axis{position:relative;height:40px;background:linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 50%/25% 1px repeat-x}
.strip .axis::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px solid var(--line)}
.strip .pt{position:absolute;top:50%;width:10px;height:10px;border-radius:50%;transform:translate(-50%,-50%);background:#7d8a96;transition:left .6s var(--ease)}
.strip .pt.main{width:16px;height:16px;background:var(--accent);box-shadow:0 0 0 6px #86e09a22}
.strip .pt.main::after{content:attr(data-v);position:absolute;bottom:18px;left:50%;transform:translateX(-50%);font-size:9px;color:var(--accent)}
.strip .rng{font-size:12px;text-align:right;color:var(--muted)}
.strip-scale{display:grid;grid-template-columns:150px 1fr 90px;gap:16px;font-size:9px;color:var(--soft)}
.strip-scale div{display:flex;justify-content:space-between}

/* Columns (age) */
.cols-top{display:flex;justify-content:space-between;align-items:center;gap:20px}
.cols-top .big{display:flex;align-items:center;gap:10px}
.cols-top .big small{font-size:11px;color:var(--muted);max-width:9ch;line-height:1.3}
.cols{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(6px,1.4vw,20px);margin-top:26px}
.col{display:flex;flex-direction:column;gap:6px;text-align:left}
.col .cl{font-size:12px;color:#e8ecef}
.col .cv{font-size:11px;color:var(--muted)}
.col .bar{position:relative;height:320px;border-radius:14px;background:var(--track-solid);overflow:hidden}
.col .bar i{position:absolute;left:0;right:0;bottom:0;height:calc(var(--v)/16*100%);min-height:2px;background:linear-gradient(180deg,#3fd0d4,#0c6670);border-radius:14px 14px 0 0;transition:height var(--select-dur) var(--ease),opacity .3s}
.col:nth-child(even) .bar i{background:linear-gradient(180deg,#4b9bff,#123f8a)}
.cols:hover .col:not(.on) .bar i{opacity:.45}
.cols-top .big-num{background:linear-gradient(90deg,#0c8f99,#3fd0d4);-webkit-background-clip:text;background-clip:text;color:transparent}
.col.on .cv{color:var(--accent)}

/* Line chart */
.line-grid{display:grid;grid-template-columns:260px 1fr;margin:-28px -32px;min-height:420px}
.line-side{padding:28px 22px;border-right:1px solid var(--line)}
.line-side .fig-q{font-size:16px;margin-bottom:22px}
.series-group{font-family:'Geist Mono',monospace;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:10px 0 2px;padding-top:12px;border-top:1px solid var(--line)}
.fig-q+.series-group{border-top:0;padding-top:0;margin-top:0}
.series-val{padding:6px 0 14px}
.series-val span{display:flex;align-items:center;gap:8px;font-size:12px;color:#dfe5ee}
.series-val span i{width:8px;height:8px;border-radius:50%;background:var(--c)}
.series-val b{display:block;font-size:clamp(40px,4vw,56px);line-height:1.05;letter-spacing:-.04em;color:var(--c);font-weight:500;margin-top:4px}
.line-plot .cross line{stroke:#fff;stroke-dasharray:3 4;opacity:.7}
.line-plot .cross rect{fill:var(--card);stroke:#fff;stroke-width:1.5}
.line-plot .cross text{fill:#fff;font-size:10px;font-family:'Geist Mono',monospace;letter-spacing:.06em;text-transform:uppercase}
.series-btn{display:block;width:100%;text-align:left;padding:8px 8px 10px;border-radius:8px;margin-bottom:4px}
.series-btn span{display:flex;align-items:flex-start;gap:8px;font-size:11.5px;color:var(--muted);line-height:1.35}
.series-btn span i{flex:none;width:8px;height:8px;border-radius:50%;margin-top:4px;background:var(--c)}
.series-btn b{display:block;font-size:34px;line-height:1.05;letter-spacing:-.035em;color:var(--c);font-weight:500;margin:4px 0 0 16px}
.series-btn[aria-pressed=true]{background:#ffffff0a}
.series-btn[aria-pressed=true] span{color:#fff}
.line-plot{position:relative;padding:20px 24px 8px 8px}
.line-plot svg{display:block;width:100%;height:auto;overflow:visible}
.line-plot .grid line{stroke:#ffffff14}
.line-plot .grid text,.line-plot .xl text{fill:var(--soft);font-size:10px;font-family:Geist,Arial,sans-serif}
.line-plot .s path{fill:none;stroke:var(--c);stroke-width:1.5;opacity:.45;transition:opacity .3s,stroke-width .3s}
.line-plot .s circle{fill:var(--c);opacity:.5;transition:opacity .3s}
.line-plot .s.on path{opacity:1;stroke-width:2.2}
.line-plot .s.on circle{opacity:1}
.line-plot .s text{fill:var(--c);font-size:10px;opacity:0;font-family:Geist,Arial,sans-serif}
.line-plot .s.on text{opacity:1}
.line-plot .band{fill:color-mix(in srgb,var(--accent) 16%,transparent);stroke:color-mix(in srgb,var(--accent) 50%,transparent);transition:x .3s var(--ease)}
.line-plot .s text{font-weight:500}
.line-plot .xl text.sel{fill:#fff}
.line-plot .hit{fill:transparent;cursor:pointer}
.line-plot.sm .grid text,.line-plot.sm .xl text{font-size:11px}
.line-plot.sm .s text{font-size:13px}
.line-plot.sm .cross text{font-size:10px}
.line-plot.sm .s path,.line-plot.sm .s.on path{stroke-width:2.5}
.multiples-title{font-size:15px;margin:40px 0 14px}
.multiples{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.mult{border:1px solid var(--line-strong);border-radius:12px;background:var(--card);padding:14px 14px 10px}
.mult h4{font-size:11.5px;font-weight:400;color:#e8ecef;min-height:46px;line-height:1.35}
.mult .mbars{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.mult .mb{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:10px;color:var(--muted)}
.mult .mb .t{position:relative;width:100%;height:150px;border-radius:6px;background:#ffffff0a;overflow:hidden}
.mult .mb .t i{position:absolute;left:0;right:0;bottom:0;height:calc(var(--v)*1%);background:linear-gradient(0deg,var(--accent-strong),var(--accent-soft));border-radius:6px 6px 0 0;transition:height var(--select-dur) var(--ease)}

/* Diverging */
.div-head,.div-row{display:grid;grid-template-columns:minmax(150px,1.1fr) 2fr;align-items:center;gap:16px}
.div-head{font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--soft);padding:16px 0 10px;border-bottom:1px solid var(--line);margin-top:18px}
.div-row{min-height:72px;border-bottom:1px solid var(--line);font-size:15px}
.div-row:last-child{border-bottom:0}
.div-track{position:relative;height:32px}
.div-track::before{content:"";position:absolute;left:50%;top:-14px;bottom:-14px;border-left:1px solid var(--line-strong)}
.div-bar{position:absolute;top:0;height:32px;border-radius:8px;transition:left var(--select-dur) var(--ease),width var(--select-dur) var(--ease)}
.div-bar.neg{background:var(--accent-strong)}
.div-bar.pos{background:#5fc275}
.div-v{position:absolute;top:50%;transform:translateY(-50%);font-size:12px;transition:left .6s var(--ease)}
.div-v.neg{color:var(--accent)}
.div-v.pos{color:#86e09a}
.div-na{position:absolute;left:calc(50% + 12px);top:50%;transform:translateY(-50%);font-size:11px;color:var(--soft)}

/* Grouped comparison bars */
.cmp-group{margin-top:18px}
.cmp-group .pgroup-label{margin-bottom:8px}
.cmp{display:grid;grid-template-columns:1fr 64px;gap:16px;align-items:center;margin-bottom:8px}
.cmp .track{position:relative;height:34px;border-radius:999px;background:var(--track-solid);overflow:hidden}
.cmp .fill{position:absolute;inset:0 auto 0 0;width:calc(var(--v)*1%);border-radius:999px;transition:width .8s var(--ease)}
.cmp .fill.s0{background:var(--accent-strong)}
.cmp .fill.s1{background:var(--accent-soft)}
.cmp .lab{position:relative;display:flex;align-items:center;height:100%;padding:0 12px;font-size:11.5px;color:#fff}
.cmp .fill.s1+.lab{color:#2a1513}
.cmp .val{font-size:22px;text-align:right;letter-spacing:-.03em}
.key{display:flex;gap:16px;flex-wrap:wrap;margin-top:18px;font-size:11px;color:var(--muted)}
.key i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}

/* Specialty rows */
.spec{display:grid;grid-template-columns:180px 1fr;gap:16px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.spec:last-child{border-bottom:0}
.spec .nm{font-size:13px}
.spec .bars3{display:grid;gap:3px}
.spec .b3{position:relative;height:9px;border-radius:9px;background:#ffffff0a}
.spec .b3 i{position:absolute;inset:0 auto 0 0;width:calc(var(--v)*1%);border-radius:9px;transition:width .7s var(--ease),opacity .3s}
.spec .b3 span{position:absolute;left:calc(var(--v)*1% + 6px);top:50%;transform:translateY(-50%);font-size:9.5px;color:var(--muted);transition:left .7s var(--ease)}
.spec .b3.k0 i{background:var(--accent-soft)}
.spec .b3.k1 i{background:#8b8578}
.spec .b3.k2 i{background:var(--accent-strong)}
.specs.only-0 .b3:not(.k0),.specs.only-1 .b3:not(.k1),.specs.only-2 .b3:not(.k2){opacity:.25}

/* Personas */
.persona-strip{display:flex;height:44px;border-radius:10px;overflow:hidden;margin:26px 0 18px;gap:2px}
.persona-strip button{flex:var(--v) 1 0;min-width:0;background:var(--c);transition:filter .2s,opacity .3s;font-size:11px;color:#0b1520;font-weight:500}
.persona-strip.focus button:not([aria-pressed=true]){opacity:.35}
.personas{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.persona{border:1px solid var(--line-strong);border-radius:12px;background:var(--card);padding:18px;transition:border-color .3s,opacity .3s}
.persona b{display:block;font-size:40px;letter-spacing:-.035em;font-weight:500;line-height:1;color:var(--c)}
.persona h4{font-size:15px;font-weight:500;margin:10px 0 6px}
.persona p{font-size:12px;color:var(--muted)}
.persona.on{border-color:var(--c)}

/* Quote panels */
.quote-panel{position:relative;overflow:hidden;padding:128px 0 136px;text-align:center;background:linear-gradient(180deg,var(--quote-tint) 0%,var(--bg) 70%)}
[data-theme=navy] .quote-panel{background:linear-gradient(0deg,var(--quote-tint) 0%,var(--bg) 85%)}
/* Smooth chapter colours: with JS running, chapter sections drop their own background and the
   body colour (set from the section at mid-viewport) fades between chapter tones. Quote bands
   fade their tint into that shared colour instead of a fixed one. */
body.v3{transition:background-color .9s cubic-bezier(.4,0,.2,1)}
.blend main [data-theme]:not(.hero){background:transparent}
.blend .quote-panel{background:linear-gradient(180deg,var(--quote-tint) 0%,transparent 70%)}
.blend [data-theme=navy] .quote-panel{background:linear-gradient(0deg,var(--quote-tint) 0%,transparent 85%)}
.quote-panel::before{-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 20%,#000 15%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 50% 20%,#000 15%,transparent 75%)}
.quote-panel .wrap{position:relative}
.quote-panel img{width:80px;height:80px;border-radius:50%;object-fit:cover;border:2px solid #ffffff22}
.quote-panel .q-initials{display:inline-grid;place-items:center;width:80px;height:80px;border-radius:50%;border:2px solid #ffffff22;background:var(--accent-dim);color:#fff;font-size:24px;font-weight:500;letter-spacing:.02em}
/* A second quote on the same finding reads as a continuation of the first: no new tint, less space above. */
.quote-panel.quote-follow,.blend .quote-panel.quote-follow{padding-top:16px;background:none}
.quote-panel blockquote{max-width:1040px;margin:32px auto 0;font-size:clamp(26px,3.4vw,48px);line-height:1.15;letter-spacing:-.025em;font-weight:500}
.quote-panel blockquote .q-tail{color:#ffffff66}
/* With the scroll highlight on, the tail lights fully like the rest of the quote (its words carry the dimming). */
.quote-panel blockquote .q-tail .w{color:#fff}
.quote-panel cite{display:block;margin-top:36px;font-style:normal;font-family:'Geist Mono',monospace;font-size:12px;color:var(--muted)}
.quote-panel cite strong{display:block;color:#fff;font-weight:500;margin-bottom:4px}

/* Review notes */
.review{margin-top:16px;font-size:12px;color:var(--muted)}
.review summary{cursor:pointer;width:max-content;max-width:100%;padding:6px 10px;border-radius:999px;border:1px solid #f0b95555;color:#f6d48f;font-size:11px}
.review p{margin-top:10px;padding-left:12px;border-left:2px solid #f0b95566;max-width:80ch}
.review p strong{display:block;color:#fff;font-weight:500}

/* Methodology */
.methodology{padding:112px 0;border-top:1px solid var(--line)}
.methodology h2{font-size:clamp(36px,4.4vw,64px);line-height:1.04;letter-spacing:-.035em;margin-bottom:36px}
.methodology h3{font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--soft);font-weight:400;margin:24px 0 10px}
.methodology p{font-size:14px;color:var(--muted);margin-bottom:12px}
.comp{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:6px}
.comp th,.comp td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top;font-weight:400}
.comp thead th{font-family:'Geist Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--soft)}
.comp tbody th{color:#fff}
.comp td{color:var(--muted)}
.table-scroll{overflow-x:auto;border:1px solid var(--line-strong);border-radius:12px;background:var(--card)}

/* Footer */
.site-footer{padding:96px 0 40px;border-top:1px solid var(--line)}
.footer-cta{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding-bottom:56px;border-bottom:1px solid var(--line)}
.footer-cta h2{font-size:clamp(34px,4vw,56px);letter-spacing:-.035em;line-height:1.05}
.footer-grid{display:grid;grid-template-columns:2fr repeat(4,1fr);gap:24px;padding:48px 0}
.footer-grid h3{font-size:12px;color:var(--soft);font-weight:400;margin-bottom:12px}
.footer-grid a{display:block;font-size:13px;color:var(--muted);margin-bottom:8px}
.footer-grid a:hover{color:#fff}
.footer-brand{height:28px;width:auto}
.footer-bottom{display:flex;gap:20px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--soft)}
.footer-bottom p{margin-right:auto}

/* Share dock and toast */
.share-dock{position:fixed;left:50%;bottom:20px;z-index:30;display:flex;align-items:center;gap:4px;padding:4px 4px 4px 14px;border-radius:999px;background:#0e2442ee;border:1px solid var(--line-strong);backdrop-filter:blur(10px);transform:translateX(-50%);transition:opacity .3s,transform .3s}
.share-dock button{font-size:12px;min-height:32px}
.share-dock #dismiss-share{width:32px;border-radius:50%;color:var(--muted)}
.share-dock.away{opacity:0;pointer-events:none;transform:translate(-50%,20px)}
.story-share{margin-top:20px}
.toast{position:fixed;left:50%;bottom:72px;transform:translateX(-50%);z-index:31;padding:8px 14px;border-radius:999px;background:#fff;color:#001a32;font-size:12px}

/* Reveal motion */
.rv{opacity:0;transform:translateY(18px);transition:opacity calc(.7s*var(--pace)) var(--ease),transform calc(.7s*var(--pace)) var(--ease)}
.rv.in{opacity:1;transform:none}
.loading{padding:80px 0;color:var(--muted)}

@media (max-width:1000px){
  .multiples{grid-template-columns:1fr 1fr}
  .personas{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  :root{--gutter:20px;--header:100px}
  body.v3{font-size:14px}
  .header-row{height:52px}
  .chapter-nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;height:auto;padding:6px 20px 14px;background:#0b1730f7;border-bottom:1px solid var(--line)}
  .chapter-nav.open{display:flex}
  .chapter-nav a{min-height:44px;padding:0;border-bottom:1px solid var(--line)}
  .chapter-nav a::after{display:none}
  .chapter-nav a[aria-current]{border-bottom-color:var(--line);color:var(--lilac)}
  .nav-toggle{display:flex;justify-content:space-between;align-items:center;width:100%;height:44px;font-size:13px}
  .hero-inner{padding:64px 0 56px}
  .hero-stats{grid-template-columns:1fr 1fr;margin-top:48px}
  .hero-stats>div{padding:22px 18px;gap:12px}
  .hero-stats>div+div::after{display:none}
  .hero-stats>div:nth-child(n+3){border-top:1px solid var(--line)}
  .hero-stats>div:nth-child(2n){border-left:1px solid var(--line)}
  .hero-intro{grid-template-columns:1fr;gap:18px;margin-top:64px;font-size:15px}
  .toc{padding:72px 0 88px}
  .toc-head{grid-template-columns:40px 1fr 32px;gap:12px;min-height:72px;padding:0 4px}
  .toc-count{display:none}
  .toc-finding{grid-template-columns:40px 1fr auto;grid-template-areas:"id chip sig" "txt txt txt";row-gap:6px;gap:12px;padding:14px 4px}
  .toc-finding .fid{grid-area:id}.toc-finding .chip{grid-area:chip}.toc-finding .sig{grid-area:sig;font-size:26px}.toc-finding .txt{grid-area:txt}.toc-finding .go{display:none}
  .fig-foot{flex-direction:column}
  .two-col,.story-body,.figs.pair{grid-template-columns:1fr}
  .story{padding:72px 0 64px}
  .story+.story>.wrap{padding-top:64px}
  .fig-head{flex-wrap:wrap;padding:10px 12px}
  .fig-body{padding:22px 18px}
  .fig-foot{padding:10px 12px;align-items:flex-start}
  .bubbles-grid,.line-grid,.sa-top{grid-template-columns:1fr;margin:-22px -18px 0}
  .two-col-bars{grid-template-columns:1fr;grid-auto-flow:row}
  .pb-grid{grid-template-columns:1fr}
  .spec-grid{grid-template-columns:1fr;margin:-22px -18px}.spec-list{border-right:0;border-bottom:1px solid var(--line);padding:22px 12px}.spec-axis,.spec-row{grid-template-columns:110px 1fr}.spec-side{padding:22px 18px}
  .sa-side{border-right:0;border-bottom:1px solid var(--line);padding:22px 18px;gap:18px}.sa-bars{padding:22px 18px}
  .bubbles-side,.line-side{border-right:0;border-bottom:1px solid var(--line);padding:22px 18px}
  .line-plot{padding:16px 6px 6px 2px}
  .bubbles-side .fig-q{margin-bottom:16px}
  .bubble-stage{min-height:340px}
  .wait-cols{gap:6px;height:220px}.wait-col .wbar{height:calc(var(--h)*150px + 10px);border-radius:8px 8px 0 0}.wait-col .wv{font-size:11px}.wait-col .wl{font-size:9px}.wait-brackets{font-size:10.5px;grid-template-columns:1fr 2fr}

  .wait-top{flex-direction:column}
  .wait-top .big-num{text-align:left}
  .pbar{grid-template-columns:1fr 48px;gap:10px}
  .pbar .val{font-size:20px}
  .pbar .lab{font-size:11px}
  .stat-row{grid-template-columns:1fr!important}
  .strip,.strip-scale{grid-template-columns:96px 1fr 64px;gap:10px}
  .strip .name{font-size:12px}
  .cols .col .bar{height:180px}
  .col .cl{font-size:10.5px}
  .cols-top{flex-direction:column;align-items:flex-start}
  .multiples,.personas{grid-template-columns:1fr}
  .div-head,.div-row{grid-template-columns:110px 1fr;font-size:12px}
  .spec{grid-template-columns:1fr;gap:6px}
  .quote-panel{padding:88px 0 96px}
  .footer-cta{flex-direction:column;align-items:flex-start}
  .share-dock{bottom:14px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .rv{opacity:1;transform:none}
}
@media print{
  .site-header,.share-dock,.toc-filter,.tabs,.pills,.toast,.story-share,.fig-share,.footer-utilities{display:none!important}
  .rv{opacity:1;transform:none}
  body.v3,[data-theme]{background:#fff!important;color:#001a32!important}
}
/* Original Bridge site footer (./bridge-footer.css) aligned to the page wrap. */
body .bridge-footer{--page-inset:max(var(--gutter),calc((100% - var(--wrap)) / 2))}
.footer-utilities{display:flex;justify-content:flex-end;padding-block:24px}
body .bridge-footer{padding-bottom:max(112px,calc(96px + env(safe-area-inset-bottom)))}

/* Load-in. The report stays hidden until its data, layout and fonts are
   ready (no placeholder copy, font swap or chapter-colour fade on arrival), then fades in once.
   The hero builds in reading order and its figures count up. If the script never runs, the
   failsafe animation shows the static page after 4s. */
body.v3[data-load=loading] :is(main,.footer-utilities,.share-dock){visibility:hidden;opacity:0;animation:v3-failsafe 0s 4s forwards}
body.v3[data-load=loading],body.v3[data-load=loading] .site-header{transition:none}
body.v3[data-load=ready] main{transition:opacity .32s ease}
body.v3[data-load=ready] .hero-inner>*{animation:v3-rise .7s var(--ease) backwards;animation-delay:calc(var(--i,0)*80ms)}
.hero-inner>:nth-child(2){--i:1}.hero-inner>:nth-child(3){--i:2}.hero-inner>:nth-child(4){--i:3}.hero-inner>:nth-child(5){--i:4}.hero-inner>:nth-child(6){--i:5}.hero-inner>:nth-child(7){--i:6}
body.v3[data-load=ready] .share-dock:not(.away){animation:v3-dock .5s .6s var(--ease) backwards}
@keyframes v3-failsafe{to{visibility:visible;opacity:1}}
@keyframes v3-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes v3-dock{from{opacity:0;transform:translate(-50%,16px)}to{opacity:1;transform:translateX(-50%)}}
/* Counting figures hold their final width so neighbouring text never moves or rewraps. */
.hero-stats .count{display:inline-block;white-space:nowrap}
/* Count-in figures (countIn() in report.js): fixed-width digits so a counting number doesn't jitter. */
/* The selector is doubled to beat caption rules such as .stat span, which would otherwise shrink the figure. */
.count[data-final].count[data-final]{display:inline-block;margin:0;max-width:none;flex:none;font:inherit;color:inherit;letter-spacing:inherit;white-space:pre;font-variant-numeric:tabular-nums}
/* Quote words brighten as they are read (opacity set from report.js). */
.quote-panel .w{transition:opacity .3s}
@media (prefers-reduced-motion:reduce){
  body.v3 :is(main,.footer-utilities,.share-dock){transition:none}
  body.v3[data-load=loading] :is(main,.footer-utilities,.share-dock){animation:v3-failsafe 0s 4s forwards!important}
  .quote-panel .w{opacity:1!important}
}
@media print{
  body.v3 :is(main,.footer-utilities){visibility:visible!important;opacity:1!important;animation:none!important}
  .quote-panel .w{opacity:1!important}
}
.pair .fig{display:flex;flex-direction:column}.pair .fig-body{flex:1}

/* Review flags (REVIEW_FLAGS in report.js): one yellow tag per element that waits on input. */
.needs-input{display:grid;gap:4px;margin:16px 0;padding:12px 14px;border-radius:10px;background:#ffe45c;color:#1d1a00;font:13px/1.4 inherit;text-align:left;max-width:640px;box-shadow:0 0 0 2px #1d1a00 inset;scroll-margin-top:120px}
.needs-input b{font:600 10px/1 "Geist Mono",monospace;letter-spacing:.08em;text-transform:uppercase}
.needs-input strong{font-weight:600;color:#1d1a00}
.needs-input span{color:#3b3500}
.flag-slot{margin:0}
.flag-story{padding-block:24px}
.footer-flag{padding:0 24px}
.stat .needs-input{font-size:12px}
.flag-list{position:fixed;right:16px;bottom:16px;z-index:60;max-width:min(340px,calc(100vw - 32px));background:#ffe45c;color:#1d1a00;border-radius:12px;box-shadow:0 6px 24px #0006;font-size:13px}
.flag-list summary{cursor:pointer;padding:10px 14px;font-weight:600}
.flag-list ol{margin:0;padding:0 14px 4px 34px;max-height:50vh;overflow:auto}
.flag-list li{margin:4px 0}
.flag-list a{color:#1d1a00}
.flag-list p{padding:4px 14px 10px;font-size:11px;opacity:.7}
@media print{.flag-list{display:none}}
.quote-panel .needs-input{margin:28px auto 0}
@media (max-width:720px){.flag-list{bottom:84px}}

/* Share dialog (Figma 136:17069): a format switch (Square / Link preview / Story) over a preview of
   that share image, then Download image + Copy link and the LinkedIn, X and email buttons. On phones it
   is a bottom sheet: a short switch, a format note under the preview, Download image + Share… (the
   device share sheet) and a quiet Copy link row. Navy in every chapter, as in the Figma. */
.share-dialog{--sd-line:#1d3b63;--sd-tab:#1c2e5d;--sd-muted:#b8c4d6;--sd-text:#ededed;--sd-accent:#9b65fe;
  width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:24px;display:none;flex-direction:column;gap:20px;
  border:1px solid var(--sd-line);border-radius:16px;background:#0e2442;color:var(--sd-text);box-shadow:0 24px 64px #0000008c}
.share-dialog[open]{display:flex}
.share-dialog::backdrop{background:#000b17cc;backdrop-filter:blur(6px)}
.share-dialog[open]{animation:sd-in .32s var(--ease)}
@keyframes sd-in{from{opacity:0;transform:translateY(10px) scale(.985)}}
.sd-grab{display:none}
.sd-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.share-dialog h2{margin:0;font-size:16px;font-weight:500;line-height:1.3;letter-spacing:0}
.sd-close{display:grid;place-items:center;flex:none;width:32px;height:32px;border:1px solid var(--sd-line);border-radius:50%;color:var(--sd-text);transition:background .2s}
.sd-close:hover{background:#ffffff12}
.sd-close svg{width:12px;height:12px}
.sd-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:4px;border:1px solid var(--sd-line);border-radius:12px}
.sd-tabs button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;border-radius:9px;color:var(--sd-muted);transition:background .25s var(--ease),color .25s}
.sd-tabs button b{font-size:12px;font-weight:500}
.sd-tabs button small{font-size:10px;line-height:1.3}
.sd-tabs button:hover{color:var(--sd-text)}
.sd-tabs button[aria-selected=true]{background:var(--sd-tab);color:var(--sd-text)}
.sd-tabs button[aria-selected=true] small{color:var(--sd-muted)}
.sd-tabs .sd-short{display:none}
.sd-preview{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;height:400px;padding:20px;border-radius:12px;background:#001a32}
.sd-frame{position:relative;display:flex;align-items:center;justify-content:center;flex:1;min-height:0;width:100%}
.sd-frame img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;border-radius:6px;border:1px solid var(--sd-line);box-shadow:0 12px 32px #0007;
  background:linear-gradient(100deg,#ffffff08 30%,#ffffff14 50%,#ffffff08 70%) 0 0/300% 100%,#0e2442;animation:sd-wait 1.2s linear infinite;transition:opacity .25s var(--ease)}
.sd-frame img[data-format=landscape]{width:100%;aspect-ratio:1200/630}
.sd-frame img[data-format=square]{height:100%;aspect-ratio:1}
.sd-frame img[data-format=story]{height:100%;aspect-ratio:1080/1920}
.sd-frame img.sd-ready{animation:none;background:none}
.sd-frame img.sd-swap{opacity:0}
@keyframes sd-wait{to{background-position:-150% 0}}
.sd-note{display:none;margin:0;font-size:11.5px;color:var(--sd-muted);text-align:center}
.sd-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.sd-main,.sd-social{display:flex;gap:8px}
.sd-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border:1px solid var(--sd-line);border-radius:40px;font-size:14px;font-weight:500;color:var(--sd-text);text-decoration:none;white-space:nowrap;transition:background .2s,border-color .2s}
.sd-btn:hover{background:#ffffff12}
.sd-btn svg{width:14px;height:14px;flex:none}
.sd-dl{background:var(--sd-accent);border-color:var(--sd-accent)}
.sd-dl:hover{background:#8a4ff5}
.sd-social .sd-btn{width:40px;padding:0;font-size:13px;font-weight:600}
.sd-social .sd-btn svg{width:16px;height:16px}
.sd-more,.sd-copy-row{display:none}
.sd-copied{color:#bfa0ff}
@media (max-width:560px){
  .share-dialog{width:100vw;max-width:100vw;max-height:94dvh;margin:auto 0 0;gap:16px;padding:10px 20px calc(28px + env(safe-area-inset-bottom));border-radius:20px 20px 0 0;border-bottom:0}
  .share-dialog[open]{animation:sd-up .38s var(--ease)}
  @keyframes sd-up{from{transform:translateY(40px);opacity:0}}
  .sd-grab{display:block;width:36px;height:4px;margin:0 auto;border-radius:2px;background:var(--sd-tab)}
  .sd-close{width:40px;height:40px}.sd-close svg{width:16px;height:16px}
  .sd-tabs{padding:3px}
  .sd-tabs button{padding:11px 4px}
  .sd-tabs button b{font-size:14px}
  .sd-tabs .sd-long,.sd-tabs small{display:none}
  .sd-tabs .sd-short{display:inline}
  .sd-preview{height:min(356px,44dvh);padding:15px 15px 12px}
  .sd-note{display:block}
  .sd-social,.sd-main .sd-copy{display:none}
  .sd-actions{display:block}
  .sd-main{display:grid;grid-auto-flow:column;grid-auto-columns:1fr}
  .sd-main .sd-btn{height:48px}
  .sd-more:not([hidden]){display:inline-flex}
  .sd-copy-row{display:flex;align-self:center;height:44px;padding:0 16px;border:0;font-size:12px;color:var(--sd-muted)}
  .sd-copy-row:hover{background:none;color:var(--sd-text)}
}
@media (prefers-reduced-motion:reduce){.share-dialog[open]{animation:none}.sd-frame img{animation:none;transition:none}}

/* ---------- Tablet and phone pass (2026-11-02) ---------- */
.toc-name{min-width:0;overflow-wrap:anywhere}
.bubble{font-size:clamp(10px,min(calc(22px + var(--r)*.32px),calc(var(--r)*.78px)),88px)}
.sa-stack{overflow:hidden}
.fig-head .tabs{flex-wrap:nowrap}
.hm tbody th{position:sticky;left:0;z-index:1;background:var(--card)}
@media (max-width:1000px){
  .figs.pair{grid-template-columns:1fr}
  .toc-head{grid-template-columns:56px 1fr auto 32px}
  .toc-finding{grid-template-columns:56px 150px 96px 1fr 24px}
  .toc-finding .sig{font-size:28px}
}
@media (max-width:760px){
  .toc-head{grid-template-columns:40px 1fr 32px}
  .toc-finding{grid-template-columns:40px 1fr auto}
  .stat-wide{flex-direction:column;align-items:flex-start;gap:8px}
  .cl-unit{display:none}
  .fig-head{flex-wrap:nowrap}
  .fig-label{min-width:0;overflow-wrap:anywhere}
  .flag-list{left:12px;right:auto;bottom:64px;font-size:12px}
  .flag-list summary{padding:8px 12px}
  .quote-panel blockquote{font-size:24px}
}

/* No orphaned last words: paragraphs and labels wrap "pretty", headings balance their lines. */
body.v3 :is(p,li,dd,dt,td,th,figcaption,blockquote,cite,label,small,span,a,button,summary){text-wrap:pretty}
body.v3 :is(h1,h2,h3,h4,.story-title,.toc-name){text-wrap:balance}

/* Complaints (Figma 3.3): label, mentioned share, diverging bar around a centre line */
.div-chart .div-head,.div-chart .div-row{grid-template-columns:minmax(150px,1fr) 72px 2.4fr;gap:16px}
.div-chart .div-head{margin-top:26px}
.div-chart .div-row{min-height:50px}
.div-chart .div-m{color:var(--muted);font-variant-numeric:tabular-nums}
.div-chart .div-track{height:28px}
.div-chart .div-track::before{top:-11px;bottom:-11px;border-left-color:#ffffff40}
.div-chart .div-bar{left:var(--l);width:var(--w);height:28px;border-radius:999px}
.div-chart .div-bar.pos{background:linear-gradient(90deg,#0f6b2a,#6cc16f);border-radius:0 999px 999px 0}
.div-chart .div-bar.neg{background:linear-gradient(90deg,#ffc0b5,#ff5a4f);border-radius:999px 0 0 999px}
.div-chart .div-v{font-size:14px}
.div-chart .div-v.neg{transform:translate(-100%,-50%);color:#ff8a80}
.div-chart .div-v.pos{color:#f4ebee}

/* Provider split (Figma 4.2, second card) */
.split-top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.split-key{display:flex;gap:18px;font-size:12px;color:var(--muted);margin-top:8px}
.split-key i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px}
.split-key .k-a,.split-bar .sa{background:linear-gradient(90deg,#1d4f9a,#62b5f2)}
.split-key .k-b,.split-bar .sb{background:linear-gradient(90deg,#5a17c9,#b493ff)}
.split-big{display:flex;align-items:center;gap:14px;margin:0}
.split-big b{font-size:clamp(48px,6vw,80px);font-weight:500;letter-spacing:-.04em;line-height:1;background:linear-gradient(90deg,#3c94d6,#a5d4f7);-webkit-background-clip:text;background-clip:text;color:transparent}
.split-big span{max-width:190px;font-size:13px;color:var(--muted)}
.split-bar{display:flex;gap:6px;margin-top:24px;height:72px}
.split-bar span{flex:var(--v) 1 0;border-radius:12px;display:flex;align-items:center;padding-left:18px;font-size:clamp(18px,2vw,24px);color:#fff;transition:flex-grow .8s var(--ease)}
.split.anim .split-bar span{flex-grow:.01}

/* Persona explorer (Figma 5.2) */
.p-tabs{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:28px;border-bottom:1px solid var(--line);margin:0 -2px}
.p-tabs button{height:44px;padding:0 16px;border:1px solid var(--line-strong);border-radius:999px;font-size:14px;font-weight:500;color:var(--muted);display:flex;gap:8px;align-items:center;transition:background .2s,color .2s}
.p-tabs button span{font-family:'Geist Mono',monospace;font-size:12px}
.p-tabs button:hover{color:#fff}
.p-tabs button[aria-selected=true]{background:var(--accent-soft);border-color:var(--accent-soft);color:#551251}
.p-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:0}
.p-grid.solo{grid-template-columns:1fr}
.p-bars{padding:22px 40px 10px 0}
.p-col-head{font-size:15px;font-weight:500;color:#fff;margin:0 0 6px}
.p-bar{padding:10px 0 11px;border-bottom:1px solid var(--line)}
.p-bar:last-child{border-bottom:0}
.p-bl{display:flex;justify-content:space-between;gap:12px;font-size:13.5px}
.p-bl b{font-family:'Geist Mono',monospace;font-weight:600;white-space:nowrap}
.p-bl small{font-weight:400;font-size:11.5px;color:var(--muted);margin-left:8px}
.p-bt{position:relative;height:14px;margin-top:7px}
.p-bt::before{content:"";position:absolute;inset:0 0 6px;border-radius:4px;background:var(--track-solid)}
.p-bt .me{position:absolute;left:0;top:0;height:8px;width:calc(var(--v)*1%);border-radius:4px;background:linear-gradient(90deg,#551251,#ffabf0);transition:width .5s var(--ease)}
.p-bt .all{position:absolute;left:0;top:11px;height:3px;width:calc(var(--v)*1%);border-radius:2px;background:#ffd7f4}
.p-card{border-left:1px solid var(--line);padding:42px 0 26px 24px;color:var(--muted);font-size:14px}
.p-grid.solo .p-card{border-left:0;padding-left:0;max-width:640px}
.p-card h3{display:flex;align-items:flex-end;gap:14px;margin:0;color:#fff;font-size:22px;font-weight:600;letter-spacing:-.025em;line-height:1.2}
.p-card h3 b{font-size:48px;letter-spacing:-.05em;line-height:1}
.p-card .p-label,.p-bars .p-label{font-family:'Geist Mono',monospace;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:22px 0 8px}
.p-card ul{margin:0;padding-left:20px}
.p-card li{margin:0 0 2px}
.p-card p{margin:0}
.p-pay{display:flex;gap:2px;height:12px;border-radius:3px;overflow:hidden}
.p-pay i{flex:var(--v) 1 0}
.pay0{background:#ffabf0}.pay1{background:#9b65fe}.pay2{background:#ffb783}.pay3{background:#2e5080}
.p-pay-key{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:12px;margin-top:10px}
.p-pay-key i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.p-card .p-note{font-family:'Geist Mono',monospace;font-size:11px;margin-top:8px}
.p-move{border-left:2px solid #ffabf0;padding-left:20px;margin-top:24px}
.p-card .p-move .p-label{margin-top:0}
.p-move p:last-child{color:#fff;font-size:16px;font-weight:500;line-height:1.5}
@media (max-width:1000px){
  .p-grid{grid-template-columns:1fr}
  .p-bars{padding-right:0}
  .p-card{border-left:0;border-top:1px solid var(--line);padding-left:0}
}
@media (max-width:760px){
  .div-chart .div-head,.div-chart .div-row{grid-template-columns:minmax(0,1fr) 44px 1.3fr;gap:8px;font-size:12px}
  .div-chart .div-v{font-size:11px}
  .split-bar{height:52px}
  .p-tabs button{height:38px;font-size:13px;padding:0 12px}
}

/* ---------- Section-aware share dock (share-dock.js) ----------
   Names the finding you'd share in its chapter's accent. Sized and contrasted to read at a glance:
   the label is a 15px title on a near-opaque panel, with the accent kept for the small kicker line,
   lightened toward white so it stays legible on the dark dock. */
.share-dock.x-share{--xs-accent:var(--lilac);--xs-ink:color-mix(in srgb,var(--xs-accent) 55%,#fff);gap:6px;padding:5px;max-width:min(580px,calc(100% - var(--gutter) * 2));
  background:#08182ff7;border-color:color-mix(in srgb,var(--xs-accent) 50%,transparent);box-shadow:0 14px 34px #000a,0 0 0 1px #ffffff0d inset;transition:opacity .3s,transform .3s,border-color .5s}
.x-share #share-report{display:flex;align-items:center;gap:14px;min-width:0;flex:1;min-height:54px;padding:6px 18px;border-radius:999px;text-align:left;
  background:color-mix(in srgb,var(--xs-accent) 16%,#0e2442);transition:background .5s}
.x-share #share-report:hover{background:color-mix(in srgb,var(--xs-accent) 28%,#0e2442)}
.x-share #share-report:focus-visible{outline:2px solid var(--xs-ink);outline-offset:2px}
.x-share .xs-text{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1;transition:opacity .18s,transform .18s}
.x-share .xs-text.xs-out{opacity:0;transform:translateY(4px)}
.x-share .xs-kind{font:600 11px/1.2 'Geist Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--xs-ink);transition:color .5s}
.x-share .xs-title{font-size:15px;font-weight:500;line-height:1.3;letter-spacing:-.005em;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.x-share .xs-icon{width:18px;height:18px;flex:none;color:var(--xs-ink);transition:color .5s}
.x-share #dismiss-share{width:40px;height:40px;min-height:40px;flex:none;font-size:18px;color:#c9d2e0}
.x-share #dismiss-share:hover{color:#fff;background:#ffffff14}
@media (min-width:761px){.share-dock.x-share{width:auto;min-width:340px}}
/* Phones: the dock spans the page container, like the content above it. */
@media (max-width:760px){.share-dock.x-share{width:calc(100% - var(--gutter) * 2);max-width:none;border-radius:22px}.x-share #share-report{border-radius:18px}.x-share .xs-title{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:14.5px}}
@media (prefers-reduced-motion:reduce){.x-share .xs-text{transition:none}}

/* ==========================================================================
   Team review, 2026-11-03 (Figma comments): type to Figma, mobile fixes and the
   exploration copy's chapter nav.
   ========================================================================== */

/* Type, matched to Figma. */
.story .wrap>.eyebrow{font-size:13px}
.story-title{font-weight:600}
.story-copy p{font-size:16px}
.fig-label{font-size:12px}
.p-card h3 b{font-weight:600}

/* Chapter nav, desktop: a pill glides to the current chapter, tinted with that chapter's highlight
   (report.js wireNav sets --nav-accent from its eyebrow number). It stays left-aligned with the page. */
.site-header{--nav-accent:#b493ff}
.nav-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;transform-origin:left;transform:scaleX(var(--read,0));background:linear-gradient(90deg,transparent,var(--nav-accent) 30%,#fff);opacity:.8;pointer-events:none;transition:background .4s}
@media (min-width:761px){
  .chapter-nav{position:relative;gap:2px;align-items:center;margin-left:-12px}
  .chapter-nav a{z-index:1;height:30px;padding:0 12px;border-radius:999px;font-size:13px}
  .chapter-nav a::after{display:none}
  .chapter-nav a[aria-current]{color:#fff}
  .chapter-nav a[aria-current] small{color:var(--nav-accent)}
  .chapter-nav::before{content:"";position:absolute;z-index:0;top:50%;left:0;height:30px;width:var(--pill-w,0);border-radius:999px;transform:translate(var(--pill-x,0),-50%);background:color-mix(in srgb,var(--nav-accent) 20%,#ffffff08);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--nav-accent) 45%,transparent);opacity:var(--pill-o,0);pointer-events:none;transition:transform .45s var(--ease),width .45s var(--ease),opacity .3s,background .4s,box-shadow .4s}
  .chapter-nav a:not([aria-current]):hover{background:#ffffff0f;transition:background .2s,color .2s}
  .chapter-nav.no-glide::before{transition:none}
}

/* Header on phones: the usebridge.com button and menu icon. */
@media (max-width:900px){
  .header-actions{gap:10px}
  .header-actions .btn-violet,.header-actions .header-login{min-height:30px;height:30px;padding:0 12px;font-size:14px;font-weight:600;gap:6px}
  /* usebridge.com's menu icon: three left-aligned lines, the last one shorter. */
  .site-menu-toggle{align-items:flex-start;gap:6px;width:40px;height:40px;padding:0 9px}
  .site-menu-toggle span{width:22px;height:2px;border-radius:1px;transform-origin:center}
  .site-menu-toggle span:nth-child(3){width:12px}
  .site-menu-toggle[aria-expanded=true] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .site-menu-toggle[aria-expanded=true] span:nth-child(3){width:22px;transform:translateY(-8px) rotate(-45deg)}
}

/* Chapter nav, phones: the exploration copy's "Reading" bar and its unfolding menu, left-aligned. */
.nav-reading{display:none}
@media (max-width:760px){
  .nav-toggle{justify-content:flex-start;gap:10px;font-size:14px}
  .nav-reading{display:inline;font:500 11px/1 'Geist Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--nav-accent);transition:color .4s}
  .nav-chev{width:12px;height:12px;flex:none;margin-left:auto;color:#dfe5ee;transition:transform .35s var(--ease)}
  .nav-toggle[aria-expanded=true] .nav-chev{transform:rotate(180deg)}
  .chapter-nav{display:flex;visibility:hidden;opacity:0;background:color-mix(in srgb,var(--header-bg,#0b1730) 55%,#0b1730);clip-path:inset(0 0 100% 0 round 0 0 16px 16px);transform:translateY(-4px);box-shadow:0 18px 30px #0007;
    transition:clip-path .38s var(--ease),opacity .25s,transform .38s var(--ease),visibility 0s .38s}
  .chapter-nav.open{visibility:visible;opacity:1;clip-path:inset(0 0 0 0 round 0 0 16px 16px);transform:none;transition:clip-path .45s var(--ease),opacity .2s,transform .45s var(--ease),visibility 0s}
  .chapter-nav a{opacity:0;transform:translateY(-6px);transition:opacity .2s,transform .3s var(--ease),color .2s}
  .chapter-nav.open a{opacity:1;transform:none;transition:opacity .3s calc(60ms + var(--i,0) * 35ms),transform .45s var(--ease) calc(60ms + var(--i,0) * 35ms),color .2s}
  .chapter-nav a[aria-current]{color:var(--nav-accent)}
}
@media (max-width:760px) and (prefers-reduced-motion:reduce){
  .chapter-nav,.chapter-nav.open,.chapter-nav a,.chapter-nav.open a{transition:none;transform:none;clip-path:none}
}

/* Bar labels that don't fit their bar end in an ellipsis; tap a bar for the full answer (groupBars). */
.gbars{position:relative}
.gbar{cursor:default;outline:none}
.gbar:focus-visible .lt{box-shadow:0 0 0 2px var(--lilac)}
/* The bar is at least as wide as its label (estimated from its length in characters, --ch) but
   never wider than the track, so a long label is cut with an ellipsis instead of overflowing. */
.gbar .lf{min-width:0;width:max(calc(var(--v)*1%),min(100%,calc(var(--ch,0)*.78ch + 26px)))}
.pbars2 .gbar .lf{min-width:max-content}
.gbar .lf>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tip .tip-wrap{display:block;max-width:240px;white-space:normal;line-height:1.4}

@media (max-width:760px){
  /* Headlines use the full measure on phones rather than balanced, narrower lines. */
  body.v3 .story-title{text-wrap:pretty;max-width:none}
  /* Figure heads with three or more tabs (F 1.1): the label gets its own line, so switching tabs
     never re-breaks it. */
  .fig-head:has(.tabs button:nth-child(3)){flex-direction:column;align-items:flex-start;gap:10px}
  .fig-head:has(.tabs button:nth-child(3)) .tabs{margin-left:-4px}
  /* Diverging chart (F 3.3): column heads sit in their own columns, bottom-aligned. */
  .div-chart .div-head,.div-chart .div-row{grid-template-columns:minmax(0,1fr) 62px 1.25fr;gap:10px}
  .div-chart .div-head{align-items:end;font-size:9.5px;letter-spacing:.04em;line-height:1.35}
  .div-chart .div-head>span{min-width:0;overflow-wrap:break-word}
  /* Split legend (F 4.2): one key per line; a wrapped key keeps its indent past the dot. */
  .split-key{flex-direction:column;gap:6px}
  .split-key span{display:grid;grid-template-columns:auto 1fr;align-items:baseline}
  .split-key i{transform:translateY(-1px)}
  /* Tables with three or more columns scroll sideways instead of squeezing every line. */
  .fig-table{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-inline:-18px;padding-inline:18px}
  /* Wide tables scroll sideways; each column is as wide as its header or values and the row
     labels stay pinned on the left, so nothing overlaps or gets cut off. */
  .fig-table table:has(tr>:nth-child(3)){width:max-content;min-width:calc(100% + 18px);margin-left:-18px;table-layout:auto}
  .fig-table table:has(tr>:nth-child(3)) tr>:not(:first-child){min-width:52px;padding-inline:10px}
  .fig-table table:has(tr>:nth-child(3)) tr>:first-child{position:sticky;left:-18px;z-index:1;width:150px;min-width:150px;max-width:150px;padding-left:18px;padding-right:12px;background:var(--card);box-shadow:8px 0 8px -8px #0008}
  .fig-table td,.fig-table thead th:not(:first-child){white-space:nowrap}
  .fig-table table:has(tr>:nth-child(3)) thead th:not(:first-child){white-space:normal;max-width:112px;vertical-align:bottom}
  .table-scroll table.comp{min-width:620px}
  .table-scroll table.comp th[scope=row]{min-width:120px}
}

/* Footer headline at 30px on phones (Figma). */
@media screen and (max-width:767px){body .bridge-footer-cta h2{font-size:30px}}

/* ---- Figma type audit (R3 "Ready for review", 3 Nov). Sizes, weights, line heights and tracking taken
   from every text layer in the R3 frame. Desktop only: the R3 file has no phone frames, so phone sizes
   keep the mobile rules above. ---- */
.toc-finding .fid{color:#b8c4d6}
.toc-finding .txt{color:#ededed}
.p-label,.p-bars .p-label{font-weight:500}
.why .eyebrow{font-weight:500}
.hm thead th em{font-weight:500}
@media (min-width:761px){
  /* Overview */
  .hero h1{font-weight:600;letter-spacing:-.048em;line-height:1}
  .hero .eyebrow{font-size:13px;letter-spacing:.8px}
  .hero .btn{font-size:14px;line-height:1.4}
  .hero-intro p{font-size:18px;line-height:1.5}
  .hero-stats dd{font-size:clamp(34px,3.4vw,48px);font-weight:500;letter-spacing:-.04em;line-height:1}
  .hero-stats dt{font-size:14px;line-height:1.4}
  /* Table of contents */
  .toc .wrap>.eyebrow{font-size:12px;line-height:16px;font-weight:500;letter-spacing:1.2px}
  .toc h2{font-weight:600;letter-spacing:-.039em;line-height:1.04}
  .toc-filter-title{font-size:16px;line-height:1.5;font-weight:500}
  .toc-filter .pills button{font-size:12px;font-weight:500}
  .toc-num{font-size:13px;line-height:18px;font-weight:500}
  .toc-name{font-size:clamp(24px,2.2vw,32px);line-height:1.25;letter-spacing:-1.1px}
  .toc-count{font-size:12px;line-height:24px}
  .toc-finding .fid{font-size:12px;line-height:16px}
  .toc-finding .chip{font-size:11px;line-height:1;letter-spacing:.4px}
  .toc-finding .sig{font-size:36px;line-height:1.04;letter-spacing:-1.8px}
  .toc-finding .txt{font-size:16px;line-height:25px;font-weight:500}
  .toc-finding .go{font-size:16px;line-height:25px}
  /* Chapter openers */
  .story .wrap>.eyebrow,.methodology .wrap>.eyebrow{font-size:13px;letter-spacing:.8px}
  .story-title,.methodology h2{font-weight:600;letter-spacing:-.047em;line-height:1.04}
  .story-copy p{line-height:25.9px}
  .why .eyebrow{font-size:12px;letter-spacing:1px}
  .why p{font-size:14px;line-height:1.5}
  /* Figures */
  .fig-q,.bubbles-side .fig-q,.line-side .fig-q{font-size:24px;line-height:1.32;letter-spacing:-.5px;font-weight:500;max-width:36ch}
  .figs.pair .fig-q{font-size:20px}
  .fig-src>summary{font-family:'Geist Mono',monospace;font-size:12px;line-height:1.5}
  .answers-title{font-size:14px;font-weight:500;line-height:1.5}
  .bubbles-note{font-size:11px;line-height:1.5;letter-spacing:1px}
  .lf span,.lbar .ll{font-size:14px;font-weight:500}
  .gb-group{font-size:14px;font-weight:500}
  .lbar .lv,.gbar .lv{font-size:clamp(28px,2.8vw,40px);letter-spacing:-.5px}
  .pair .lbar .lv{font-size:clamp(24px,2.4vw,36px)}
  .div-head{font-size:14px;letter-spacing:1px}
  .div-chart .div-head,.div-chart .div-row{grid-template-columns:minmax(200px,1fr) 120px 2.2fr;gap:20px}
  .answer{font-size:16px;line-height:1.5}
  .div-row,.div-chart .div-row{font-size:20px;font-weight:500;line-height:1.5}
  .wait-col .wv{font-size:20px;font-weight:500}
  .wait-col .wl{font-size:12px;letter-spacing:.54px}
  .big-num{font-size:clamp(56px,6.4vw,96px);font-weight:600;line-height:.96;letter-spacing:-3px}
  .big-num small{font-size:16px;font-weight:500;line-height:1.32;letter-spacing:-.5px}
  .series-val b{font-size:clamp(48px,5vw,72px);font-weight:600;line-height:.96;letter-spacing:-3px}
  .stat b{font-size:clamp(34px,3.4vw,48px);font-weight:600;line-height:.96;letter-spacing:-2px}
  .stat span{font-size:16px;line-height:1.5}
  .stat small{font-size:12px;line-height:1.5}
  .sa-diff-title{font-size:24px;font-weight:500}
  .multiples-title{font-size:22px;line-height:1.32;letter-spacing:-.5px;font-weight:500}
  .mult .mb{font-size:12px;letter-spacing:.54px}
  .mult h4{font-size:14px;font-weight:500;line-height:1.32;letter-spacing:-.27px}
  .spec-side h3{font-size:24px;font-weight:600;letter-spacing:-.55px}
  .hm thead th{font-size:12.5px;font-weight:600}
  .hm thead th small{font-size:10.5px}
  .hm thead th em{font-size:9.5px;letter-spacing:.47px}
  .hm tbody th{font-size:13px;line-height:1.3}
  .hm td{font-size:15px;font-weight:600;letter-spacing:-.3px}
  /* Playbook */
  .pb-head{font-size:12px;font-weight:500;letter-spacing:.72px}
  .pb-card strong{font-size:16px;font-weight:600;letter-spacing:-.16px}
  .pb-card li p{font-size:13.5px;line-height:20.3px}
  .pb-card li>b{font-size:32px;font-weight:600;line-height:1;letter-spacing:-1.44px}
  /* Expert quotes */
  .quote-panel blockquote{font-size:clamp(32px,3.4vw,48px);font-weight:600;line-height:1.04;letter-spacing:-2px}
  .quote-panel cite{font-size:16px;line-height:1.5;font-weight:500}
  .quote-panel cite strong{font-size:16px}
  /* Methodology */
  .comp th,.comp td{font-size:16px;line-height:1.5}
  .comp th[scope=row],.comp tbody th{font-weight:500}
  .comp thead th{font-size:14px;letter-spacing:1px}
  /* Chapter nav and footer */
  body .bridge-footer-cta h2{letter-spacing:-1.2px}
}
@media (min-width:1100px){.chapter-nav a{font-size:14px;line-height:1.4}}

/* ---- Layout refinements ---- */
/* Headlines run across both columns (left-aligned) instead of stacking in the left one, as in Figma. */
@media (min-width:761px){
  body.v3 .story-title,body.v3 .story-title.long{max-width:min(100%,1180px);text-wrap:pretty}
}
/* One body-text color: no more alternating white and gray paragraphs. */
.story-copy p,.story-copy p.lead{color:#eef2f8}
/* Subheads inside a finding ("Among people who…") lead the text under them rather than recede. */
.story-copy h3{color:#fff;font-size:13px;font-weight:500;letter-spacing:.07em;margin:26px 0 10px}
.story-copy h3:first-child{margin-top:0}
/* Long copy flows across two columns with "Why it matters" at the end of the second. The copy and the
   box share one column flow, and paragraphs may continue into the next column, so both columns end
   level (#42). */
@media (min-width:761px){
  .story-body.flow{display:block;columns:2;column-gap:32px}
  .story-body.flow .story-copy>*{orphans:3;widows:3}
  .story-body.flow .story-copy h3{break-inside:avoid;break-after:avoid}
  .story-body.flow .why{break-inside:avoid;margin-top:24px}
}
/* Wide stat callouts (F. 3.2 deep dive) use the width of their box. */
.stat-wide span{max-width:none;flex:1}
/* The dot grid fades out behind the hero introduction so the text reads cleanly. */
.hero-intro{position:relative}
.hero-intro::before{content:"";position:absolute;inset:-56px -72px;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,#0b1d45f2 55%,#0b1d4500 100%)}
.hero-stats{background:linear-gradient(180deg,#0c2147f2,#001228f0)}
/* #29: insurance answers stay inside the side panel at mid widths; long labels wrap, % stays right. */
.answer>span:first-child{white-space:normal;display:flex;align-items:baseline;min-width:0}
.answer>span:first-child i{flex:none;transform:translateY(-1px)}
.answer>span:last-child{flex:none;font-variant-numeric:tabular-nums}
/* #23: a one-line reading guide above the heatmaps, and a label in the empty corner cell. */
.hms .hm-howto{max-width:760px;margin:12px 0 16px;font-size:13px;line-height:1.5;color:var(--muted)}
.hm-howto strong{color:#fff;font-weight:500}
.hm th.hm-corner{font-size:11px;font-weight:400;color:var(--soft);text-align:left;vertical-align:bottom;white-space:normal}
/* #19: table polish. Stronger header, soft row striping, row hover, numbers aligned in tabular figures. */
.fig-table thead th{color:#fff;font-weight:500;font-size:12px;letter-spacing:.01em;border-bottom:1px solid var(--line-strong);padding-top:12px;padding-bottom:12px;vertical-align:bottom}
.fig-table tbody tr:nth-child(even)>*{background:#ffffff06}
.fig-table tbody tr:hover>*{background:#ffffff0d}
.fig-table tbody th,.fig-table tbody td:first-child{color:#dfe5ee}
.fig-table td{color:#fff;font-variant-numeric:tabular-nums;padding-top:11px;padding-bottom:11px}
.fig-table tbody tr:last-child>*{border-bottom:0}

/* F. 5.1 age and coverage explorer: lens switch, group pills,
   headline stats vs. all users, coverage friction, visits by group (stacked) and top specialties. */
.seg-lens{display:inline-flex;gap:4px;padding:4px;margin:18px 0 14px;border:1px solid var(--line-strong);border-radius:999px;position:relative}
/* The thumb slides under the chosen lens; placed by segmentExplorer(). */
.seg-thumb{position:absolute;top:4px;bottom:4px;left:4px;width:0;border-radius:999px;background:#ffffff1f;pointer-events:none;transition:transform var(--select-dur) var(--ease),width var(--select-dur) var(--ease)}
.seg-lens button{position:relative}
.seg-lens button{height:34px;padding:0 16px;border-radius:999px;font-size:13px;font-weight:500;color:var(--muted);transition:background .2s,color .2s}
.seg-lens button:hover{color:#fff}
.seg-lens button[aria-pressed=true]{color:#fff}
.seg-pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.seg-pills button{height:40px;padding:0 16px;border:1px solid var(--line-strong);border-radius:999px;font-size:14px;font-weight:500;color:var(--muted);transition:background .2s,color .2s,border-color .2s}
.seg-pills button:hover{color:#fff}
.seg-pills button[aria-pressed=true]{background:var(--accent-soft);border-color:var(--accent-soft);color:#551251}
.seg-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;margin-bottom:16px}
.seg-st b{display:block;font-variant-numeric:tabular-nums;font-size:44px;font-weight:600;letter-spacing:-.04em;line-height:1.05;color:#ffabf0}
.seg-stats.thin .seg-st b{color:#ffd7f4b3}
.seg-st span{display:block;font-size:13.5px;color:#dfe5ee;margin-top:6px;max-width:24ch}
.seg-st i{display:block;font-style:normal;font-family:'Geist Mono',monospace;font-size:11px;color:var(--muted);margin-top:6px}
.seg-warn{font-size:12.5px;color:#ffe2a8;background:#ffcf6a1f;border-radius:8px;padding:8px 12px;margin:-4px 0 16px}
.seg-fric{display:flex;flex-wrap:wrap;gap:8px 24px;font-size:13.5px;color:#dfe5ee;margin-bottom:28px}
.seg-fric b{color:#fff;font-weight:600}
.seg-fric em{font-style:normal;color:var(--muted)}
.seg-fric .seg-k{font-family:'Geist Mono',monospace;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);align-self:center}
.seg-h{font-size:15px;font-weight:500;color:#fff;margin:0 0 12px}
.seg-vis{display:flex;flex-direction:column;gap:6px}
.seg-vr{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;align-items:center;width:100%;text-align:left;font-size:12.5px;color:var(--muted);opacity:.5;transition:opacity .25s}
.seg-vr:hover{opacity:.8}
.seg-vr.on{opacity:1;color:#fff;font-weight:500}
.seg-sb{display:flex;height:24px;gap:2px;border-radius:4px;overflow:hidden}
.seg-sb i{display:flex;align-items:center;justify-content:center;font-style:normal;font-family:'Geist Mono',monospace;font-size:10.5px;white-space:nowrap;overflow:hidden;font-weight:500}
.seg-x .v0{background:#ffd7f4;color:#551251}
.seg-x .v1{background:#ff8fe6;color:#3d0b39}
.seg-x .v2{background:#c04fae;color:#fff}
.seg-x .v3{background:#7a2a6e;color:#fff}
.seg-x .v4{background:#4a5670;color:#fff}
.seg-x .v5{background:#2c364b;color:#c9d1de}
.seg-lg{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--muted);margin:12px 0 28px}
.seg-lg i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.seg-spec{display:flex;flex-direction:column;gap:10px;max-width:640px}
.seg-sp{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr) 44px;gap:12px;align-items:center;font-size:13.5px;color:#dfe5ee}
.seg-sp b{font-family:'Geist Mono',monospace;font-weight:600;text-align:right;color:#fff}
.seg-t{height:12px;background:var(--track-solid);border-radius:4px;overflow:hidden}
.seg-t i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#551251,#ffabf0)}
.seg-note{font-size:12px;color:var(--muted);margin:14px 0 0}
@media (max-width:760px){
  .seg-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 16px}
  .seg-st b{font-size:36px}
  .seg-pills button{height:36px;font-size:13px;padding:0 12px}
  .seg-vr{grid-template-columns:96px minmax(0,1fr);font-size:11.5px}
  .seg-sb i{font-size:9.5px}
  .seg-sp{grid-template-columns:minmax(0,1fr) 90px 40px}
}

/* F. 5.1 option B: the original Figma design (node 128:12841). Personas cards and heatmap share the
   By age / By coverage switch; colours are the Figma tokens. */
.segb-top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:24px}
.segb-q{font-size:24px;font-weight:500;line-height:1.32;letter-spacing:-.5px;color:#f4ebee;max-width:460px;margin:0}
.segb-lens{display:inline-flex;gap:2px;padding:3px;border:1px solid #512f4c;border-radius:58px;flex:none}
.segb-lens button{padding:6px 12px;border-radius:58px;font-size:12px;font-weight:500;line-height:1.2;color:#d3bdcc;transition:background .2s,color .2s}
.segb-lens button:hover{color:#f4ebee}
.segb-lens button[aria-pressed=true]{background:#4b2046;color:#f4ebee}
.segb-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.segb-card{display:flex;flex-direction:column;gap:16px;padding:22px;background:#271124;border:1px solid #512f4c;border-radius:16px}
.segb-card header{display:flex;align-items:center;gap:14px}
.segb-card h3{font-size:20px;font-weight:500;line-height:1.2;letter-spacing:-.3px;color:#f4ebee;margin:0 0 4px}
.segb-tag{font-family:'Geist Mono',monospace;font-size:11px;line-height:1.3;letter-spacing:.8px;text-transform:uppercase;color:#ffabf0;margin:0}
.segb-sum{font-size:14px;line-height:1.5;color:#f4ebee;margin:0;min-height:63px}
.segb-m{list-style:none;margin:auto 0 0;padding:0;border-top:1px solid #512f4c}
.segb-m li{display:flex;align-items:center;gap:10px;height:36px;border-bottom:1px solid #33202f}
.segb-m span{flex:1;font-size:12px;color:#d3bdcc}
.segb-m b{font-family:'Geist Mono',monospace;font-size:14px;font-weight:500;color:#f4ebee}
.segb-m i{font-style:normal;font-family:'Geist Mono',monospace;font-size:11px;line-height:1.2;color:#f4ebee;padding:3px 7px;border-radius:20px;background:#341b31;min-width:54px;text-align:center}
.segb-m i.up{background:#4b2f8c}
.segb-m i.down{background:#3f6272}
.segb-link{align-self:flex-start;padding:8px 12px;border:1px solid #512f4c;border-radius:40px;font-size:12px;font-weight:500;line-height:1.2;color:#f4ebee;transition:background .2s,border-color .2s}
.segb-link:hover{background:#4b2046;border-color:#4b2046}
.segb-key{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.segb-k{font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:.8px;text-transform:uppercase;color:#b9a9b8;width:166px;padding-top:2px}
.segb-scale{display:flex;gap:4px}
.segb-scale span{display:flex;flex-direction:column;align-items:center;gap:6px;font-family:'Geist Mono',monospace;font-size:10.5px;letter-spacing:.8px;color:#b9a9b8;white-space:nowrap}
.segb-scale i{display:block;width:56px;height:18px;border-radius:4px}
.segb-scale i.zero{border:1px solid #3e2a3d}
.segb-ends{font-size:12px;line-height:1.4;color:#b9a9b8}
.segb-scroll{overflow-x:auto;margin:0 -4px;padding:0 4px}
.segb-heat{width:100%;min-width:720px;border-collapse:separate;border-spacing:4px;table-layout:fixed}
.segb-heat td:first-child,.segb-heat th[scope=row]{width:166px}
.segb-heat th[scope=col]{padding:8px 4px;border-radius:6px;font-size:12px;font-weight:500;line-height:1.2;color:#f1ecf0;text-align:center;vertical-align:bottom}
.segb-heat th[scope=col] small{display:block;margin-top:3px;font-family:'Geist Mono',monospace;font-size:11px;font-weight:400;line-height:1.3;letter-spacing:.8px;text-transform:uppercase;color:#e9a2dd}
.segb-heat th.all small{color:#b9a9b8;text-transform:none}
.segb-heat th button{display:block;width:100%;padding:8px 4px;border-radius:6px;font:inherit;color:inherit;transition:background .2s}
.segb-heat th[scope=col]:has(button){padding:0}
.segb-heat th button:hover{background:#ffffff0f}
.segb-heat th.on button{box-shadow:inset 0 0 0 2px #ffabf0}
.segb-hint{font-size:12px;color:#b9a9b8;margin:0 0 8px}
.segb-hint span{display:none}
.segb-heat th[scope=row]{padding-right:12px;font-size:12px;font-weight:500;line-height:1.4;color:#f1ecf0;text-align:left}
.segb-heat td{height:44px;border-radius:6px;font-family:'Geist Mono',monospace;font-size:14px;font-weight:500;color:#f1ecf0;text-align:center;transition:box-shadow .2s,opacity .2s}
.segb-heat .all{background:#6a2c66}
.segb-heat td.on{box-shadow:inset 0 0 0 2px #ffabf0}
.segb-heat:has(.on) td:not(.on):not(.all):not(.segb-corner){opacity:.55}
.segb-note{font-size:12px;color:#b9a9b8;margin:16px 0 0}
@media (max-width:1000px){.segb-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  .segb-top{flex-direction:column;align-items:flex-start;gap:16px}
  .segb-q{font-size:20px}
  .segb-grid{grid-template-columns:1fr}
  .segb-sum{min-height:0}
  .segb-k{width:auto}
  .segb-scale i{width:36px}
  .segb-heat{min-width:640px}
  .segb-heat td:first-child,.segb-heat th[scope=row]{width:120px}
  .segb-hint span{display:inline}
  .segb-heat th[scope=row],.segb-heat td.segb-corner{position:sticky;left:0;z-index:2;background:var(--card,#2a1a28);box-shadow:-4px 0 0 var(--card,#2a1a28),4px 0 0 var(--card,#2a1a28);border-radius:0}
}

/* Playbook audience cards (Figma 130:12846): coloured header with "For" + audience, numbered moves. */
.pb-grid{gap:40px;align-items:stretch}
.pb-card{background:#2b1929;border:1px solid #3e2a3d;border-radius:16px}
.pb-card .pb-head{display:flex;flex-direction:column;gap:10px;padding:28px 28px 26px;border:0;text-transform:none;letter-spacing:0}
.pb-card .pb-head span{font-family:'Geist Mono',monospace;font-size:11px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;opacity:.7}
.pb-card .pb-head strong{font-family:Geist,Arial,sans-serif;font-size:34px;font-weight:600;line-height:1.04;letter-spacing:-1.2px;margin:0}
.pb-ops .pb-head{background:#f4b4ea;color:#551251}
.pb-plans .pb-head{background:#ffb783;color:#4f2500}
.pb-card li{grid-template-columns:auto 1fr auto;gap:16px;padding:20px 28px;border-bottom:1px solid #512f4c}
.pb-card .pb-n{font-size:11px;color:#d3bdcc;padding-top:3px}
.pb-card li strong{font-size:16px;font-weight:500;letter-spacing:0;margin-bottom:6px;color:#f4ebee}
.pb-card li p{font-size:14px;line-height:1.5;color:#d3bdcc}
.pb-card li>b{font-size:32px;font-weight:500;line-height:1;letter-spacing:-1px;color:#ffabf0}
.pb-card li>b.warm{color:#f5b07a}
#playbook .story-body.flow .story-copy>p:last-child{break-before:column}
@media (max-width:760px){
  .pb-grid{gap:20px}
  .pb-card .pb-head{padding:22px 20px 20px}
  .pb-card .pb-head strong{font-size:28px}
  .pb-card li{padding:18px 20px;gap:12px}
  .pb-card li>b{font-size:26px}
}

/* Download the report (Figma 130:12923): navy card, tilted PDF cover on the left, copy and two buttons. */
.dl-card{display:grid;grid-template-columns:170px 1fr;align-items:center;gap:56px;margin-top:48px;padding:41px 40px 41px 68px;background:#0e2442;border:1px solid #1d3b63;border-radius:16px;overflow:hidden}
.dl-cover{display:block;width:170px;rotate:-3deg;transition:rotate .5s var(--ease),translate .5s var(--ease)}
.dl-cover:hover{rotate:-1deg;translate:0 -4px}
.dl-pdf{position:relative;display:flex;flex-direction:column;aspect-ratio:170/221;padding:17px;border-radius:6px;overflow:hidden;color:#ededed;
  background:radial-gradient(70% 55% at 75% 100%,#0000 0,#000f1f 100%),radial-gradient(circle,#c0acff40 .6px,#0000 1px) 0 0/6px 6px,#000f1f;
  box-shadow:0 16px 36px -9px #00000080}
.dl-pdf img{width:44px;height:auto;margin-bottom:9px}
.dl-pdf b{font-size:18px;font-weight:600;line-height:1.12;letter-spacing:-.45px}
.dl-bars{display:flex;align-items:flex-end;gap:6px;height:75px;margin-top:auto}
.dl-bars i{flex:1;height:calc(var(--k)*20%);transform-origin:bottom;background:#1f204c}
.dl-bars i:nth-child(2){background:#3e3178}.dl-bars i:nth-child(3){background:#5d43a5}.dl-bars i:nth-child(4){background:#7c54d1}.dl-bars i:nth-child(5){background:#9b65fe}
.dl-pdf small{margin-top:9px;white-space:nowrap;font-family:'Geist Mono',monospace;font-size:7px;letter-spacing:.9px;color:#b8c4d6}
.dl-copy{display:flex;flex-direction:column;gap:14px}
.dl-card .dl-eyebrow{margin:0;font-family:'Geist Mono',monospace;font-size:12px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;color:#9b65fe}
.dl-copy h3{margin:0;font-family:Geist,Arial,sans-serif;text-transform:none;font-size:40px;font-weight:500;line-height:1.06;letter-spacing:-1.2px;color:#ededed}
.dl-card .dl-copy>p:not(.dl-eyebrow){margin:0;font-size:16px;line-height:1.5;color:#b8c4d6}
.dl-actions{display:flex;flex-wrap:wrap;gap:8px;padding-top:8px}
.dl-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border:1px solid #1d3b63;border-radius:40px;font-size:14px;font-weight:500;color:#ededed;text-decoration:none;transition:background .2s,border-color .2s,transform .2s var(--ease)}
.dl-btn:not(.ghost){padding-right:18px;background:#9b65fe;border-color:#9b65fe}
.dl-btn:not(.ghost):hover{background:#8a4ff5}
.dl-btn.ghost:hover{border-color:#3a5f8f;background:#ffffff08}
.dl-btn:hover svg{animation:dl-nudge .6s var(--ease)}
@keyframes dl-nudge{40%{transform:translateY(2px)}}
@media (max-width:760px){
  .dl-card{grid-template-columns:1fr;gap:28px;padding:32px 22px 26px;justify-items:start}
  .dl-cover{width:132px;margin-left:8px}
  .dl-pdf{padding:13px}.dl-pdf b{font-size:14px}.dl-pdf small{font-size:5.5px;letter-spacing:.7px}.dl-bars{height:58px;gap:5px}
  .dl-copy h3{font-size:30px}
  .dl-btn{flex:1 1 auto;justify-content:center}
}
@media print{.dl-card{display:none!important}}

/* Progressive scale on scroll. Figure cards (and the stat cards and download card beside them) grow from 94%
   to full size as they travel from the bottom of the screen to about a third of the way up. Browsers without
   scroll-driven animations show them at full size; reduced motion turns all animation off (above). */
@keyframes scroll-scale{from{scale:.94}to{scale:1}}
@supports (animation-timeline:view()){
  .figs>.fig,.figs>.pair>.fig,.figs>.stat-row .stat,.figs>.rv:not(.stat-row),.dl-card{animation:scroll-scale linear both;animation-timeline:view();animation-range:entry 0% cover 35%}
}
@media print{.fig,.stat,.dl-card,.figs>*{animation:none!important;scale:none!important}}

/* Chart builds on scroll (build() in report.js). A chart starts in its .build state (bars at zero, cards
   lowered, dots hidden) and settles once it reaches the viewport. .building carries the staggered
   transitions and comes off once the chart has settled. Each mark's --k is its place in reading order;
   --bd is its delay. Timing comes from the motion tokens in :root, so every chart moves alike. */
.building *{--bd:calc(var(--build-lead) + var(--k,0)*var(--build-step))}
:is(.pbar .val,.lv,.wv,.cv,.div-v,.mb>span:first-child,.sa-stack>span,.seg-sb i,.seg-sp b,.p-bl b,.gbar .lf>span){font-variant-numeric:tabular-nums}
/* Bars grow from zero to their value. The value is on screen throughout and counts up with its bar
   (countValues() in report.js), so figures inside a bar are clipped by it rather than hidden. */
.pbars.build .fill,.lbars.build .lf{width:0}
.lbars.build .gbar .lf{width:0;padding:0;min-width:0}
.lbars:not(.pbars2).build .gbar .lf{color:transparent}
.pbars2.building .gbar .lf{overflow:hidden}
.wait-cols.build .wbar,.cols.build .bar i,.multiples.build .t i{height:0}
.div-chart.build .div-bar{width:0;left:50%}
.sa-bars.build .sa-stack>span{flex-basis:0;padding-left:0}
.seg-x.build .seg-sb i,.seg-x.build .seg-t i{width:0!important}
.p-grid.build .p-bt i{width:0}
.pbars.building .fill,.lbars.building .lf,.seg-x.building .seg-sb i,.p-grid.building .p-bt i{transition:width var(--build-dur) var(--ease) var(--bd),padding var(--build-dur) var(--ease) var(--bd),min-width var(--build-dur) var(--ease) var(--bd),color .3s var(--ease) calc(var(--bd) + var(--build-dur)/2)}
.seg-x.building .seg-t i{transition:width var(--build-dur) var(--ease) calc(var(--build-lead) + .3s*var(--pace))}
.wait-cols.building .wbar,.cols.building .bar i,.multiples.building .t i{transition:height var(--build-dur) var(--ease) var(--bd)}
.div-chart.building .div-bar{transition:width var(--build-dur) var(--ease) var(--bd),left var(--build-dur) var(--ease) var(--bd)}
.sa-bars.building .sa-stack>span{transition:flex-basis var(--build-dur) var(--ease) var(--bd),padding var(--build-dur) var(--ease) var(--bd),color .3s var(--ease) calc(var(--bd) + var(--build-dur)/2)}
/* Bubbles, dots and markers grow in place. The 100 payment dots step 7ms apart so the grid fills in about the time of one bar. */
.bubble-stage.build .bubble{opacity:0;scale:.55}
.bubble-stage.build .ring{opacity:0}
.bubble-stage.building .bubble{transition:left .6s var(--ease),top .6s var(--ease),width .6s var(--ease),height .6s var(--ease),opacity calc(.5s*var(--pace)) var(--ease) var(--bd),scale var(--build-dur) var(--ease) var(--bd)}
.bubble-stage.building .ring{transition:opacity var(--build-dur) var(--ease)}
.dots.build i{opacity:0;scale:.4}
.dots.building i{transition:opacity calc(.5s*var(--pace)) var(--ease) calc(var(--build-lead) + var(--k)*7ms*var(--pace)),scale calc(.5s*var(--pace)) var(--ease) calc(var(--build-lead) + var(--k)*7ms*var(--pace))}
.spec-list.build .spec-track i{left:0!important;opacity:0}
.spec-list.build .spec-track .link{left:0!important;width:0!important}
.spec-list.building .spec-track i{transition:left var(--build-dur) var(--ease) var(--bd),opacity .4s var(--ease) var(--bd)}
.spec-list.building .spec-track .link{transition:width var(--build-dur) var(--ease) var(--bd),left var(--build-dur) var(--ease) var(--bd)}
/* Lines draw across, then their points and labels appear. */
.line-plot.build .s path{stroke-dasharray:1;stroke-dashoffset:1}
.line-plot.build .s circle,.line-plot.build .s text,.line-plot.build .cross{opacity:0}
.line-plot.building .s path{stroke-dasharray:1;transition:stroke-dashoffset calc(1.1s*var(--pace)) var(--ease) var(--build-lead),opacity .3s}
.line-plot.building .s circle,.line-plot.building .s text,.line-plot.building .cross{transition:opacity calc(.4s*var(--pace)) var(--ease) calc(var(--build-lead) + .7s*var(--pace))}
/* Cards rise 16px and fade in. */
.segb.build .segb-card,.pb-grid.build li{opacity:0;translate:0 16px}
.segb.building .segb-card,.pb-grid.building li{transition:opacity var(--build-dur) var(--ease) var(--bd),translate var(--build-dur) var(--ease) var(--bd)}
/* Download card: the cover settles, then its bars rise. */
.build .dl-cover{rotate:-12deg;translate:-14px 22px;opacity:0}
.building .dl-cover{transition:rotate .9s var(--ease) var(--build-lead),translate .9s var(--ease) var(--build-lead),opacity .6s var(--ease) var(--build-lead)}
.build .dl-bars i{scale:1 0}
.building .dl-bars i{transition:scale .7s var(--ease) calc(var(--bd) + .3s)}

/* F. 5.1 shows the age and coverage explorer only. The group comparison below it (.fig-alt: personas and
   heatmap) is still built but hidden, in case it is wanted later; delete this rule to show it again. */
.fig-alt{display:none!important}

@media (prefers-reduced-motion:reduce){.seg-thumb{transition:none}}

/* F. 5.1 shows the age and coverage explorer only. The group comparison below it (.fig-alt: personas and
   heatmap) is still built but hidden, in case it is wanted later; delete this rule to show it again. */
.fig-alt{display:none!important}