@font-face{font-family:'Atkinson Hyperlegible';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/atkinson-hyperlegible-400-italic.woff2) format('woff2');}
@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/atkinson-hyperlegible-400.woff2) format('woff2');}
@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/atkinson-hyperlegible-700.woff2) format('woff2');}
/* Atkinson's slashed zero reads as a typo in a page full of figures, so digits use the heading face. */
@font-face{font-family:'Scanvero Digits';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/schibsted-grotesk.woff2) format('woff2');unicode-range:U+0030-0039;}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:500 700;font-display:swap;src:url(fonts/schibsted-grotesk.woff2) format('woff2');}

/* Colour carries the product's meaning: teal = confirmed by a radiologist, amber = withheld. */
:root {
  --paper: #eef3f4;
  --white: #ffffff;
  --ink: #13293d;
  --ink-2: #4a6072;
  --ink-3: #6f8392;
  --rule: #ccd9de;
  --room: #0f2230;
  --room-2: #17324a;
  --room-text: #c7d6df;
  --confirm: #2bb39a;
  --confirm-deep: #12705f;
  --confirm-tint: #dcf1ec;
  --withheld: #c9821e;
  --withheld-deep: #8a5508;
  --withheld-tint: #fbefd9;
  --head: 'Schibsted Grotesk', 'Segoe UI', Arial, sans-serif;
  --body: 'Scanvero Digits', 'Atkinson Hyperlegible', 'Segoe UI', Arial, sans-serif;
  --measure: 66ch;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 18px/1.6 var(--body); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--confirm-deep); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--withheld); outline-offset: 3px; border-radius: 3px; }
h1, h2, h3 { font-family: var(--head); line-height: 1.12; margin: 0; }
h1 { font-size: clamp(38px, 5.6vw, 68px); font-weight: 700; letter-spacing: -0.025em; }
h2 { font-size: clamp(28px, 3.4vw, 42px); font-weight: 700; letter-spacing: -0.02em; }
h3 { font-size: 21px; font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
.wrap { width: min(1160px, 100% - 48px); margin-inline: auto; }
.prose { max-width: var(--measure); }
.prose p, .lede { color: var(--ink-2); }
.lede { font-size: clamp(19px, 2vw, 22px); line-height: 1.5; max-width: 34em; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--white); padding: 8px 12px; z-index: 50; }
.skip:focus { left: 8px; }

/* Header */
.site-head { position: sticky; top: 0; z-index: 20; background: rgba(238, 243, 244, 0.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule); }
.site-head.on-room { background: rgba(15, 34, 48, 0.86); border-bottom-color: #22405a; }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 68px; gap: 16px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font: 700 21px/1 var(--head); color: var(--ink); text-decoration: none; letter-spacing: -0.01em; }
.on-room .logo { color: var(--white); }
.logo svg { width: 30px; height: 30px; flex: none; }
.menu { display: flex; align-items: center; gap: 6px; }
.menu a { font: 500 16px/1 var(--head); color: var(--ink-2); text-decoration: none; padding: 10px 12px; border-radius: 6px; }
.on-room .menu a { color: var(--room-text); }
.menu a:hover, .menu a[aria-current="page"] { color: var(--ink); background: rgba(19, 41, 61, 0.06); }
.on-room .menu a:hover, .on-room .menu a[aria-current="page"] { color: var(--white); background: rgba(255, 255, 255, 0.08); }
.menu a.menu-cta { background: var(--confirm-deep); color: var(--white); margin-left: 8px; }
.menu a.menu-cta:hover { background: var(--ink); color: var(--white); }
.on-room .menu a.menu-cta { background: var(--confirm); color: var(--room); }
.menu-toggle { display: none; background: none; border: 1px solid var(--rule); border-radius: 6px; padding: 8px 12px; font: 500 15px/1 var(--head); color: inherit; cursor: pointer; }
.on-room .menu-toggle { color: var(--white); border-color: #2d4d66; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; font: 600 17px/1 var(--head); text-decoration: none; padding: 15px 22px; border-radius: 8px; border: 1px solid transparent; cursor: pointer; transition: background 0.15s, color 0.15s; }
.btn-primary { background: var(--confirm); color: var(--room); }
.btn-primary:hover { background: var(--white); color: var(--room); }
.btn-dark { background: var(--ink); color: var(--white); }
.btn-dark:hover { background: var(--confirm-deep); color: var(--white); }
.btn-line { border-color: currentColor; color: inherit; background: transparent; }
.btn-line:hover { color: var(--confirm); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* Reading-room hero with the 3D slice stack */
.room { background: radial-gradient(1200px 600px at 75% 40%, var(--room-2), var(--room) 70%); color: var(--white); overflow: hidden; }
.hero { display: grid; grid-template-columns: 1fr 1.05fr; gap: 24px; align-items: center; min-height: min(720px, 88vh); padding: 40px 0 24px; }
.hero h1 { max-width: 11em; }
.hero .lede { color: var(--room-text); margin-top: 24px; }
.hero-note { margin-top: 28px; font-size: 15px; color: #8fa7b6; }
.stage { position: relative; height: 560px; perspective: 1500px; }
.stack { position: absolute; left: 50%; top: 64%; width: 380px; height: 380px; margin: -190px 0 0 -190px; transform-style: preserve-3d;
  transform: rotateX(var(--rx, 57deg)) rotateZ(calc(var(--rz, -38deg) + var(--sp, 0) * 18deg)); transition: transform 0.6s cubic-bezier(.2,.7,.2,1); }
.slice { position: absolute; inset: 0; border-radius: 14px; transform: translateZ(calc(var(--i) * var(--gap, 34px) * (1 + var(--sp, 0) * 0.9)));
  background: #000 url(reader.png) no-repeat; background-size: 257.14% auto; background-position: 35.9% 47.7%;
  box-shadow: 0 0 0 1px rgba(120, 170, 200, 0.22), 0 30px 60px rgba(0, 0, 0, 0.45);
  opacity: var(--o, 0.35); filter: saturate(var(--s, 0.4)) brightness(var(--b, 0.7));
  transition: transform 1.4s cubic-bezier(.16,.84,.24,1) calc(var(--i) * 60ms + 200ms); }
.slice.current { --o: 1; --s: 1; --b: 1; box-shadow: 0 0 0 1px rgba(43, 179, 154, 0.75), 0 0 46px rgba(43, 179, 154, 0.28), 0 40px 70px rgba(0, 0, 0, 0.55); }
.stack.collapsed .slice { transform: translateZ(calc(var(--i) * 3px)); }
.stack.settled .slice { transition: transform 0.15s linear; }
/* One orchestrated moment on load: a scan plane sweeps up through the study. */
.scanplane { position: absolute; inset: -8px; border-radius: 16px; pointer-events: none; opacity: 0;
  background: linear-gradient(135deg, rgba(43,179,154,0) 20%, rgba(43,179,154,.35) 50%, rgba(43,179,154,0) 80%);
  box-shadow: 0 0 0 1px rgba(43,179,154,.9), 0 0 40px rgba(43,179,154,.5); }
.stack.sweep .scanplane { animation: sweep 1.9s cubic-bezier(.45,.05,.3,1) 0.9s 1 both; }
@keyframes sweep {
  0% { transform: translateZ(0); opacity: 0; }
  12% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translateZ(calc(6 * var(--gap, 34px) + 4px)); opacity: 0; }
}
.tagline { position: absolute; font: 500 14px/1.3 var(--head); color: var(--room-text); display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.tagline::before { content: ""; width: 40px; height: 1px; background: currentColor; opacity: 0.6; }
.tagline b { color: var(--confirm); font-weight: 600; }
.tag-a { right: 0; bottom: 4%; }
.tag-b { left: 0; top: 2%; }
.stage-caption { position: absolute; left: 0; right: 0; bottom: -8px; text-align: center; font-size: 13.5px; color: #7f98a8; }

/* Why it matters */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid var(--ink); }
.fact { padding: 26px 24px 6px 0; display: flex; flex-direction: column; }
.fact + .fact { padding-left: 24px; border-left: 1px solid var(--rule); }
.fact .value { font: 700 clamp(38px, 4vw, 52px)/1 var(--head); letter-spacing: -0.03em; }
.fact p { margin: 14px 0 16px; color: var(--ink-2); font-size: 16.5px; }
.fact .src { margin-top: auto; font-size: 14px; color: var(--ink-3); }
.fact .src:hover { color: var(--confirm-deep); }

/* Exploded layers (How it works) */
.layers-band { padding: 96px 0 0; }
.layers-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: center; }
.layer-list { list-style: none; margin: 32px 0 0; padding: 0; }
.layer-list li { padding: 14px 0 14px 20px; border-top: 1px solid #23415a; color: #8fa7b6; font-size: 16px; border-left: 3px solid transparent; transition: color .3s, border-color .3s; }
.layer-list li b { display: block; font: 600 17px/1.3 var(--head); color: var(--room-text); }
.layer-list li.on { border-left-color: var(--confirm); color: var(--room-text); }
.layer-list li.on b { color: var(--white); }
.layers-stage { position: relative; height: 560px; perspective: 1600px; }
.layers { position: absolute; left: 50%; top: 58%; width: 340px; height: 340px; margin: -170px 0 0 -170px; transform-style: preserve-3d; transform: rotateX(58deg) rotateZ(-36deg); }
.layer { position: absolute; inset: 0; border-radius: 14px; transform: translateZ(calc(var(--i) * (14px + var(--sep, 0) * 62px)));
  background: rgba(23, 50, 74, 0.38); box-shadow: 0 0 0 1px rgba(120, 170, 200, 0.35), 0 24px 50px rgba(0,0,0,.35); backdrop-filter: blur(1px); transition: box-shadow .3s; }
.layer svg { width: 100%; height: 100%; display: block; }
.layer.l-ct { background: #000 url(reader.png) no-repeat; background-size: 257.14% auto; background-position: 35.9% 47.7%; }
.layer.on { box-shadow: 0 0 0 1px rgba(43,179,154,.85), 0 0 36px rgba(43,179,154,.25), 0 24px 50px rgba(0,0,0,.35); }

/* Screenshot cropped below the reader's title bar */
.crop { aspect-ratio: 1440 / 905; overflow: hidden; }
.crop img { margin-top: -6.6%; }

/* Cycle lights up once, in order, when it scrolls into view */
.visit .dot { transition: border-color .4s, color .4s, box-shadow .4s; }
.cycle.lit .visit.scan .dot { border-color: var(--confirm-deep); color: var(--confirm-deep); box-shadow: 0 0 0 6px var(--confirm-tint); }
.cycle.lit .visit:nth-child(3) .dot { transition-delay: .5s; }
.cycle.lit .visit:nth-child(5) .dot { transition-delay: 1s; }
.cycle.lit .visit:nth-child(4) .dot { border-color: var(--withheld); color: var(--withheld-deep); transition-delay: .75s; }

/* Sections */
.band { padding: 104px 0; }
.band.white { background: var(--white); }
.band.room { padding: 104px 0; }
.band-head { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: end; margin-bottom: 56px; }
.band-head p { margin: 0; color: var(--ink-2); }
.room .band-head p { color: var(--room-text); }

/* Follow-up cycle */
.cycle { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; position: relative; margin-top: 8px; }
.cycle::before { content: ""; position: absolute; left: 6%; right: 6%; top: 27px; height: 2px; background: repeating-linear-gradient(90deg, var(--rule) 0 10px, transparent 10px 18px); }
.visit { position: relative; text-align: center; padding: 0 10px; }
.visit .dot { width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%; background: var(--white); border: 2px solid var(--rule); display: grid; place-items: center; font: 600 14px/1 var(--head); color: var(--ink-2); position: relative; }
.visit.scan .dot { border-color: var(--ink); color: var(--ink); }
.visit strong { display: block; font: 600 16px/1.3 var(--head); }
.visit span { font-size: 15px; color: var(--ink-3); }
.cycle-foot { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; border-top: 1px solid var(--rule); padding-top: 32px; }
.cycle-foot p { margin: 0; color: var(--ink-2); font-size: 16.5px; }
.cycle-foot strong { display: block; color: var(--ink); font: 600 18px/1.3 var(--head); margin-bottom: 6px; }

/* Confirm demo */
.demo { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: center; }
.panel { background: var(--room); color: var(--room-text); border-radius: 18px; padding: 28px; box-shadow: 0 50px 80px -40px rgba(15, 34, 48, 0.6);
  transform: perspective(1400px) rotateY(-9deg) rotateX(4deg); transform-origin: left center; }
.panel-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid #23415a; }
.panel-top h3 { color: var(--white); font-size: 19px; }
.panel-top span { font-size: 13px; color: #7f98a8; }
.pair { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; padding: 22px 0; border-bottom: 1px solid #23415a; }
.study { background: #0a1a26; border: 1px solid #23415a; border-radius: 10px; padding: 14px; }
.study small { display: block; font-size: 12.5px; color: #7f98a8; }
.study b { display: block; color: var(--white); font: 600 22px/1.2 var(--head); margin-top: 4px; }
.link-mark { width: 46px; height: 2px; position: relative; background: repeating-linear-gradient(90deg, var(--withheld) 0 6px, transparent 6px 11px); }
.is-confirmed .link-mark { background: var(--confirm); }
.result { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0 6px; }
.result small { display: block; font-size: 13px; color: #7f98a8; }
.status { font: 600 18px/1.3 var(--head); color: var(--withheld); }
.status span { display: block; font: 400 14px/1.4 var(--body); color: #b9a07a; }
.is-confirmed .status { color: var(--confirm); }
.is-confirmed .status span { color: #8cc9bb; }
.confirm-btn { font: 600 15px/1 var(--head); background: var(--withheld); color: var(--room); border: 0; border-radius: 8px; padding: 12px 16px; cursor: pointer; flex: none; }
.is-confirmed .confirm-btn { background: transparent; color: var(--room-text); border: 1px solid #2d4d66; }
.audit { margin-top: 16px; font-size: 13.5px; color: #7f98a8; min-height: 1.4em; }
.demo-note { margin-top: 16px; font-size: 14px; color: var(--ink-3); }
.rules { list-style: none; margin: 28px 0 0; padding: 0; }
.rules li { padding: 14px 0 14px 34px; border-top: 1px solid var(--rule); position: relative; color: var(--ink-2); }
.rules li::before { content: ""; position: absolute; left: 4px; top: 22px; width: 14px; height: 14px; border-radius: 3px; border: 2px solid var(--withheld); }

/* Figures */
.figures { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid var(--ink); }
.figure { padding: 28px 28px 8px 0; }
.figure + .figure { padding-left: 28px; border-left: 1px solid var(--rule); }
.figure .value { font: 700 clamp(44px, 5vw, 64px)/1 var(--head); letter-spacing: -0.03em; }
.figure h3 { margin: 14px 0 8px; }
.figure p { color: var(--ink-2); font-size: 16px; margin: 0; }
.caveat { margin-top: 40px; padding: 16px 20px; border-left: 4px solid var(--withheld); background: var(--withheld-tint); color: var(--withheld-deep); font-size: 16px; max-width: var(--measure); }

/* Steps (a real sequence) */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: 0; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 80px 1fr 1.2fr; gap: 24px; padding: 30px 0; border-top: 1px solid var(--rule); align-items: start; }
.steps li::before { content: counter(step); font: 700 40px/1 var(--head); color: var(--confirm-deep); }
.steps p { margin: 0; color: var(--ink-2); }
.steps .who { display: inline-block; margin-top: 10px; font-size: 14px; padding: 3px 9px; border-radius: 4px; background: var(--confirm-tint); color: var(--confirm-deep); }
.steps .who.ai { background: #e4ebf1; color: var(--ink-2); }

/* Screenshot in a tilted frame */
.screen { perspective: 2000px; margin-top: 64px; }
.screen-frame { border-radius: 14px; overflow: hidden; border: 1px solid #23415a; transform: rotateX(10deg) scale(0.96); transform-origin: center bottom; box-shadow: 0 60px 100px -40px rgba(0, 0, 0, 0.7); transition: transform 0.8s cubic-bezier(.2,.7,.2,1); }
.screen:hover .screen-frame { transform: rotateX(0) scale(1); }
.screen-caption { text-align: center; color: #7f98a8; font-size: 14px; margin-top: 18px; }

/* Tables */
.table-wrap { overflow-x: auto; margin-top: 8px; }
table { width: 100%; border-collapse: collapse; font-size: 16px; min-width: 720px; }
th { text-align: left; font: 600 14.5px/1.3 var(--head); color: var(--ink-3); padding: 12px 16px 12px 0; border-bottom: 2px solid var(--ink); }
td { padding: 18px 16px 18px 0; border-bottom: 1px solid var(--rule); vertical-align: top; color: var(--ink-2); }
td:first-child { color: var(--ink); font-weight: 700; }
td .num { font: 700 22px/1.2 var(--head); color: var(--ink); white-space: nowrap; }

/* Two columns, lists */
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li { padding: 12px 0 12px 32px; border-top: 1px solid var(--rule); position: relative; color: var(--ink-2); }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 20px; width: 12px; height: 7px; border-left: 2px solid var(--confirm-deep); border-bottom: 2px solid var(--confirm-deep); transform: rotate(-45deg); }
.ticks.open li::before { border: 2px solid var(--withheld); width: 12px; height: 12px; border-radius: 50%; transform: none; top: 18px; }
.room .ticks li { color: var(--room-text); border-top-color: #23415a; }
.room .ticks li::before { border-color: var(--confirm); }

/* Page header for inner pages */
.page-head { padding: 88px 0 72px; }
.page-head .lede { margin-top: 22px; }

/* Contact band */
.cta-band { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: center; }
.cta-band .mail { font: 600 clamp(22px, 2.6vw, 30px)/1.2 var(--head); color: var(--confirm); text-decoration: none; word-break: break-word; }
.cta-band .mail:hover { color: var(--white); }
.dl { display: grid; grid-template-columns: max-content 1fr; gap: 10px 28px; margin: 0; }
.dl dt { color: var(--ink-3); font-size: 15.5px; }
.dl dd { margin: 0; }

/* Footer */
.site-foot { background: var(--room); color: #8fa7b6; padding: 64px 0 48px; font-size: 15px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-bottom: 36px; border-bottom: 1px solid #23415a; }
.site-foot .logo { color: var(--white); margin-bottom: 14px; }
.site-foot h3 { color: var(--white); font-size: 15px; margin-bottom: 12px; }
.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot li { margin: 6px 0; }
.site-foot a { color: var(--room-text); text-decoration: none; }
.site-foot a:hover { color: var(--confirm); }
.legal { padding-top: 24px; display: grid; gap: 6px; }
.legal p { margin: 0; }
.ruo { color: #d9b27a; }

@media (max-width: 980px) {
  .hero, .demo, .band-head, .cta-band, .cols { grid-template-columns: 1fr; }
  .hero { min-height: 0; padding-top: 48px; }
  .stage { height: 460px; }
  .stack { width: 300px; height: 300px; margin: -150px 0 0 -150px; }
  .panel { transform: none; }
  .layers-grid { grid-template-columns: 1fr; }
  .layers-stage { height: 460px; }
  .facts { grid-template-columns: 1fr 1fr; }
  .fact:nth-child(3) { padding-left: 0; border-left: 0; }
  .fact:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .steps li { grid-template-columns: 56px 1fr; }
  .steps li > p { grid-column: 2; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  body { font-size: 17px; }
  .wrap { width: calc(100% - 32px); }
  .menu-toggle { display: inline-block; }
  .menu { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; background: var(--paper); border-bottom: 1px solid var(--rule); padding: 8px 16px 16px; }
  .on-room .menu { background: var(--room); border-bottom-color: #23415a; }
  .menu.open { display: flex; }
  .menu a.menu-cta { margin: 8px 0 0; text-align: center; }
  .band, .band.room { padding: 72px 0; }
  .stage { height: 380px; }
  .stack { width: 230px; height: 230px; margin: -115px 0 0 -115px; --gap: 24px; }
  .tagline { font-size: 12.5px; }
  .tagline::before { width: 20px; }
  .cycle { grid-template-columns: 1fr; gap: 18px; }
  .cycle::before { left: 27px; right: auto; top: 20px; bottom: 20px; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--rule) 0 10px, transparent 10px 18px); }
  .visit { display: grid; grid-template-columns: 56px 1fr; gap: 16px; text-align: left; align-items: center; padding: 0; }
  .visit .dot { margin: 0; }
  .cycle-foot, .figures { grid-template-columns: 1fr; }
  .figure, .figure + .figure { padding: 24px 0; border-left: 0; border-bottom: 1px solid var(--rule); }
  .pair { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr; }
  .fact, .fact + .fact { padding: 22px 0; border-left: 0; border-bottom: 1px solid var(--rule); border-top: 0; }
  .layers-stage { height: 380px; }
  .layers { width: 220px; height: 220px; margin: -110px 0 0 -110px; }
  .layer { transform: translateZ(calc(var(--i) * (10px + var(--sep, 0) * 40px))); }
  .link-mark { width: 2px; height: 26px; margin: 0 auto; background: repeating-linear-gradient(180deg, var(--withheld) 0 6px, transparent 6px 11px); }
  .result { flex-direction: column; align-items: flex-start; }
  .steps li { grid-template-columns: 1fr; gap: 10px; }
  .steps li > p { grid-column: 1; }
  .foot-grid { grid-template-columns: 1fr; }
  .page-head { padding: 56px 0 48px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Charts ---------- */
.chart-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 56px; align-items: center; }
.chart-card { margin: 0; background: var(--white); border: 1px solid var(--rule); border-radius: 16px; padding: 24px 24px 18px; box-shadow: 0 30px 60px -40px rgba(19,41,61,.35); }
.band.white .chart-card { background: var(--paper); }
.chart-card figcaption { margin-bottom: 14px; }
.chart-card figcaption b { display: block; font: 600 18px/1.3 var(--head); }
.chart-card figcaption span { font-size: 14.5px; color: var(--ink-3); }
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart .grid { stroke: #dbe4e8; stroke-width: 1; }
.chart .axis { stroke: #9fb1bc; stroke-width: 1; }
.chart .ref { stroke: var(--ink-2); stroke-width: 1.5; stroke-dasharray: 4 4; }
.chart .tick { font: 400 13px var(--body); fill: var(--ink-3); }
.chart .ref-label { font: 600 12.5px var(--head); fill: var(--ink-2); }
.chart .row-label { font: 600 14px var(--head); fill: var(--ink); }
.chart .val { font: 600 13.5px var(--head); fill: var(--ink-2); }
.chart .val.big { font-size: 17px; fill: var(--ink); }
.chart .hit { fill: transparent; }
.chart .mark { cursor: default; outline: none; }
.chart .mark:hover path, .chart .mark:hover rect:not(.hit), .chart .mark:focus-visible path, .chart .mark:focus-visible rect:not(.hit) { filter: brightness(1.15); }
.chart .mark:focus-visible .hit { stroke: var(--withheld); stroke-width: 2; }
.chart-card .src { display: block; margin-top: 12px; font-size: 13.5px; color: var(--ink-3); }
.chart-table { margin-top: 10px; font-size: 14.5px; }
.chart-table summary { cursor: pointer; color: var(--confirm-deep); font: 600 14px var(--head); }
table.mini { min-width: 0; margin-top: 10px; font-size: 14.5px; }
table.mini caption { text-align: left; color: var(--ink-3); font-size: 13.5px; padding-bottom: 6px; }
table.mini td, table.mini th { padding: 8px 12px 8px 0; }
.tip { position: fixed; z-index: 60; pointer-events: none; background: var(--ink); color: var(--white); font: 500 14px/1.35 var(--head); padding: 8px 11px; border-radius: 7px; max-width: 280px; box-shadow: 0 10px 24px rgba(0,0,0,.25); opacity: 0; transition: opacity .12s; }
.tip.show { opacity: 1; }

/* ---------- Problem page ---------- */
.funnel { display: grid; grid-template-columns: 1fr 48px 1fr 48px 1fr; align-items: stretch; }
.funnel-step { background: var(--paper); border-radius: 14px; padding: 26px; display: flex; flex-direction: column; }
.funnel-step .value { font: 700 clamp(36px, 4vw, 52px)/1 var(--head); letter-spacing: -.03em; }
.funnel-step p { color: var(--ink-2); margin: 14px 0 16px; font-size: 16.5px; }
.funnel-step .src { margin-top: auto; font-size: 13.5px; color: var(--ink-3); }
.funnel-step.est { background: var(--room); color: var(--white); }
.funnel-step.est p { color: var(--room-text); }
.funnel-step.est .src { color: #8fa7b6; }
.funnel-arrow { position: relative; }
.funnel-arrow::after { content: ""; position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; border-top: 2px solid var(--ink-3); border-right: 2px solid var(--ink-3); transform: translateY(-50%) rotate(45deg); }
.tasks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 2px solid var(--ink); }
.tasks > div { padding: 24px 24px 8px 0; }
.tasks > div + div { padding-left: 24px; border-left: 1px solid var(--rule); }
.tasks p { color: var(--ink-2); font-size: 16px; margin-top: 8px; }

/* ---------- Approach page ---------- */
.principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.principle { padding: 32px 32px 32px 0; border-top: 1px solid var(--rule); }
.principle:nth-child(3n+2), .principle:nth-child(3n) { padding-left: 32px; border-left: 1px solid var(--rule); }
.principle h3 { font-size: 22px; }
.principle p { margin: 10px 0 0; color: var(--ink-2); }
.principle::before { content: ""; display: block; width: 28px; height: 4px; border-radius: 2px; background: var(--confirm); margin-bottom: 18px; }
.principle:nth-child(2)::before { background: var(--withheld); }
table.compare td:nth-child(3) { color: var(--ink); }
table.compare th:nth-child(3) { color: var(--confirm-deep); }

/* ---------- Partners ---------- */
.partner-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.partner-types > div { background: var(--paper); border-radius: 14px; padding: 28px; }
.partner-types p { color: var(--ink-2); margin: 10px 0 0; font-size: 16.5px; }

/* ---------- Roadmap ---------- */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; max-width: 860px; }
.timeline::before { content: ""; position: absolute; left: 150px; top: 8px; bottom: 8px; width: 2px; background: var(--rule); }
.timeline li { display: grid; grid-template-columns: 150px 1fr; gap: 0 40px; padding: 0 0 36px; position: relative; }
.timeline li::before { content: ""; position: absolute; left: 144px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--white); border: 2px solid var(--ink-3); }
.timeline li.done::before { background: var(--confirm-deep); border-color: var(--confirm-deep); }
.timeline li.now::before { background: var(--withheld); border-color: var(--withheld); box-shadow: 0 0 0 6px var(--withheld-tint); }
.timeline .when { grid-row: span 2; font: 600 15px/1.4 var(--head); color: var(--ink-3); padding-right: 24px; text-align: right; }
.timeline .now .when { color: var(--withheld-deep); }
.timeline h3, .timeline p { grid-column: 2; padding-left: 8px; }
.timeline p { color: var(--ink-2); margin: 6px 0 0; }

/* ---------- Trust ---------- */
.trust-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.trust-card { background: var(--white); border: 1px solid var(--rule); border-radius: 16px; padding: 30px; }
.trust-card h3 { margin-bottom: 14px; }
.never { background: var(--room); color: var(--room-text); border-radius: 18px; padding: 40px; }
.never h2 { color: var(--white); margin-bottom: 20px; }
.faq { max-width: 860px; }
.faq details { border-top: 1px solid var(--rule); padding: 20px 0; }
.faq details:last-child { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; font: 600 19px/1.35 var(--head); list-style: none; display: flex; justify-content: space-between; gap: 20px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 500; color: var(--confirm-deep); font-size: 24px; line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 12px 0 0; color: var(--ink-2); max-width: var(--measure); }

/* ---------- Home: follow one lesion (scroll story) ---------- */
.story { display: grid; grid-template-columns: 1fr 1.05fr; gap: 72px; }
.story-steps { padding: 10vh 0 20vh; }
.story-step { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; opacity: .35; transition: opacity .35s; }
.story-step.active { opacity: 1; }
.story-step .n { font: 600 14px var(--head); color: var(--confirm-deep); margin-bottom: 10px; }
.story-step h3 { font-size: clamp(24px, 2.6vw, 32px); }
.story-step p { color: var(--ink-2); margin-top: 12px; max-width: 30em; }
.story-sticky { position: sticky; top: 14vh; height: 72vh; display: flex; align-items: center; }
.story-sticky .panel { width: 100%; }
.story-panel .study.empty b { color: #3d5a70; }
.story-panel .study { transition: border-color .4s, opacity .4s; }
.story-panel[data-state="1"] .study.fu { opacity: .35; }
.story-panel[data-state="1"] .link-mark, .story-panel[data-state="2"] .link-mark { opacity: 0; }
.story-panel .link-mark { transition: opacity .4s; }
.story-panel[data-state="2"] .study.fu, .story-panel[data-state="1"] .study.bl { border-color: var(--confirm); }
.story-panel .result, .story-panel .audit { transition: opacity .4s; }
.story-panel[data-state="1"] .result, .story-panel[data-state="2"] .result { opacity: .25; }

@media (max-width: 980px) {
  .chart-grid, .story { grid-template-columns: 1fr; gap: 32px; }
  .funnel { grid-template-columns: 1fr; gap: 0; }
  .funnel-arrow { height: 40px; }
  .funnel-arrow::after { left: 50%; top: 10px; transform: translateX(-50%) rotate(135deg); }
  .tasks, .principles { grid-template-columns: 1fr 1fr; }
  .tasks > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .principle, .principle:nth-child(3n+2), .principle:nth-child(3n) { padding: 28px 24px 28px 0; border-left: 0; }
  .principle:nth-child(2n) { padding-left: 24px; border-left: 1px solid var(--rule); }
  .partner-types, .trust-grid { grid-template-columns: 1fr; }
  .story-sticky { position: sticky; top: 76px; height: auto; z-index: 2; padding: 10px 0; background: var(--white); }
  .story-steps { padding: 0 0 10vh; }
  .story-step { min-height: 46vh; }
}
@media (max-width: 760px) {
  .tasks, .principles { grid-template-columns: 1fr; }
  .tasks > div, .tasks > div + div { padding: 20px 0; border-left: 0; border-bottom: 1px solid var(--rule); }
  .principle:nth-child(2n) { padding-left: 0; border-left: 0; }
  .timeline::before { left: 6px; }
  .timeline li { grid-template-columns: 1fr; padding-left: 32px; }
  .timeline li::before { left: 0; }
  .timeline .when { text-align: left; grid-row: auto; padding: 0 0 4px 8px; }
  .never { padding: 28px 22px; }
  .story-sticky .panel { padding: 18px; }
}

/* Seven nav items: collapse to the menu button below 1100px. */
@media (max-width: 1100px) {
  .menu-toggle { display: inline-block; }
  .menu { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; background: var(--paper); border-bottom: 1px solid var(--rule); padding: 8px 16px 16px; }
  .on-room .menu { background: var(--room); border-bottom-color: #23415a; }
  .menu.open { display: flex; }
  .menu a.menu-cta { margin: 8px 0 0; text-align: center; }
}

/* Inner page heads: the reading room, with a small static slice stack. */
.room.page-head { padding: 72px 0 64px; }
.room.page-head h1 { color: var(--white); }
.room.page-head .lede { color: var(--room-text); }
.room.page-head .lede a { color: var(--confirm); }
.page-hero { display: grid; grid-template-columns: 1.4fr 0.6fr; gap: 32px; align-items: center; }
.mini-stage { height: 260px; perspective: 1200px; position: relative; }
.mini-stack { position: absolute; left: 50%; top: 58%; width: 190px; height: 190px; margin: -95px 0 0 -95px; transform-style: preserve-3d; transform: rotateX(57deg) rotateZ(-38deg); --gap: 22px; }
.mini-stack .slice { transition: none; }
@media (max-width: 760px) { .mini-stage { display: none; } .page-hero { grid-template-columns: 1fr; } .room.page-head { padding: 48px 0 40px; } }
/* Phone layout: grid and flex children may shrink below their content, so nothing widens the page. */
.chart-grid > *, .story > *, .cols > *, .demo > *, .hero > *, .layers-grid > *, .cta-band > *, .band-head > *, .page-hero > * { min-width: 0; }
html, body { overflow-x: clip; }
.chart-m { display: none; }
@media (max-width: 600px) {
  .chart-d { display: none; }
  .chart-m { display: block; }
  .chart-card { padding: 18px 14px 14px; }
  .chart .tick { font-size: 12.5px; }
  .chart .row-label { font-size: 13.5px; }
}
/* Phones: wide tables become one card per row, each cell labelled with its column. */
@media (max-width: 760px) {
  .table-wrap { overflow: visible; }
  .table-wrap table { min-width: 0; }
  .table-wrap thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table-wrap tr { display: block; border-top: 2px solid var(--ink); padding: 14px 0 6px; }
  .table-wrap td { display: block; border: 0; padding: 6px 0; }
  .table-wrap td[data-label]::before { content: attr(data-label); display: block; font: 600 13px/1.3 var(--head); color: var(--ink-3); margin-bottom: 2px; }
  .table-wrap td:first-child { font: 700 19px/1.3 var(--head); }
  .table-wrap td:first-child::before { display: none; }
}