/* Continuous native wall, small numbered dots, captions only on demand. */
:root { --maxw:calc(var(--pw) - 2 * var(--gutter)); }
.wrap { max-width:none; }
.room .wrap { width:100%; }
.prose { max-width:68ch; }
.split { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.split>h2 { max-width:18ch; }
.wl-detail { border:0; padding-top:0; }
.hero h1 { font-size:clamp(38px,4vw,60px); }
.mobile-install-info { display:none; }
html[data-device="mac"] .device-download-info,
html[data-device="windows"] .device-download-info,
html[data-device="unknown"] .hero [data-installer],
html[data-device="mobile"] [data-installer],
html[data-device="mobile"] .desktop-install-info,
html[data-device="mobile"] .desk-cards,
html[data-device="mobile"] .desk-after,
html[data-device="mobile"] .head-right>.menu-btn { display:none; }
html[data-device="mobile"] .mobile-install-info { display:block; }
@media(max-width:899px){
 .head-right>.menu-btn { display:none; }
 /* The figure's center is the page's center, independent of either caption. */
 .hero {
  --fig-h:clamp(380px,53svh,510px);
  --mobile-spec-top:calc(var(--head-h) + 32px);
  display:grid; grid-template-columns:minmax(0,1fr);
  grid-template-areas:"spec" "copy";
  grid-template-rows:minmax(var(--hero-visual-height,var(--fig-h)),auto) auto;
  column-gap:0; align-items:start;
  padding-top:calc(var(--head-h) + 24px);
 }
 .hero>.hero-spec { grid-area:spec; justify-self:center; left:auto; top:auto; bottom:auto; transform:none; margin:8px 0 0; }
 .hero-spec .peel-stage { -webkit-mask-image:none; mask-image:none; }
 .hero-copy { grid-area:copy; margin-top:24px; padding-top:0; }
 .hero-label { grid-area:auto; position:absolute; width:clamp(132px,32vw,144px); max-width:none; height:auto; margin:0; overflow:visible; clip:auto; white-space:normal; }
 .hero-label .wl-title { font-size:11.5px; line-height:1.2; font-weight:400; margin:0 0 3px; }
 .hero-label .wl-latin { font-size:10.5px; line-height:1.35; margin-bottom:7px; }
 .hero-label .wl-detail { font-size:10.5px; line-height:1.4; margin-bottom:5px; }
 .hero-label .hero-facts { font-size:10px; line-height:1.4; margin:7px 0; }
 .hero-label .hero-facts div { grid-template-columns:32px minmax(0,1fr); gap:5px; margin:2px 0; }
 .hero-label .wl-acc { font-size:9.5px; line-height:1.4; }
 /* Same gauge arrangement as desktop: all stop names left, percentage right. */
 .gauge {
  --gx:0px; position:absolute; grid-area:auto; width:0; margin:0; right:auto;
  left:min(calc(100% - 32px),calc(50% + .2074 * var(--fig-h) + 124px));
  top:calc(var(--mobile-spec-top) + .02 * var(--fig-h)); bottom:auto;
  height:calc(.96 * var(--fig-h));
 }
 .g-track { min-height:0; margin:0 0 0 var(--sx,0px); }
 .g-stop { gap:4px; }
 .g-stop i { width:14px; }
 .g-stop span,.g-stop.cur span {
  display:block; width:clamp(48px,calc(48px + (100vw - 320px) * .22),88px);
  white-space:normal; text-align:right; font-size:9.5px; line-height:10.5px;
  font-variation-settings:"opsz" 9.5;
 }
 .g-stop.cur span { font-weight:500; }
 .g-stop:first-child span { width:max-content; white-space:nowrap; }
 .g-end { left:.5px; transform:translateX(-50%); font-size:8px; line-height:11px; letter-spacing:.06em; }
 .g-end.top { top:-20px; }
 .g-end.bot { top:calc(100% + 10px); }
 .g-pct { left:7px; transform:translateY(-50%); font-size:9.5px; line-height:14px; }
 .g-ride { display:none; }
 #hero-leaders .hero-caption-number { font-size:8px; }
}
@media(max-width:359px){
 /* Give the hand clear space without shrinking or shifting the specimen. */
 .gauge { left:calc(100% - 28px); }
 .g-stop { gap:2px; }
 .g-stop span,.g-stop.cur span { font-size:9px; font-variation-settings:"opsz" 9; }
 .g-pct { left:4.5px; font-size:9px; }
}
/* Keep the controls beside the specimen at every desktop width. */
@media(min-width:1100px){
 .hero {
  --spec-max:clamp(600px, calc(1.7 * var(--pw) - 1440px), 1600px);
  --spec-h:min(calc(max(100svh, 720px) - var(--head-h) - 32px), var(--spec-max));
  --spec-top:calc(var(--head-h) + 6px + (max(100svh, 720px) - var(--head-h) - 32px - var(--spec-h)) / 2);
  --hero-axis:55.5%;
  --hero-controls:min(calc(100% - var(--gutter) - 300px), calc(var(--hero-axis) + .2074 * var(--spec-h) + 28px));
 }
 .hero>.hero-spec { left:var(--hero-axis); }
 .hero-copy { position:absolute; top:calc(var(--spec-top) + .06 * var(--spec-h)); left:var(--gutter); }
 .hero-label { right:auto; width:270px; top:calc(var(--spec-top) + .57 * var(--spec-h) + 24px); bottom:auto; }
 .hero-label .wl-title { font-weight:400; font-size:22px; }
 .gauge { --gx:254px; left:var(--hero-controls); right:auto; width:310px; top:calc(var(--head-h) + .12 * (max(100svh,720px) - var(--head-h))); bottom:auto; height:calc(.76 * (max(100svh,720px) - var(--head-h))); }
 .g-track { margin:30px 0 40px calc(var(--gx) + var(--sx,0px)); }
 .g-stop span,.g-stop.cur span { font-size:16px; line-height:22px; font-variation-settings:"opsz" 16; }
 .g-stop.cur span { font-weight:500; }
}
@media(min-width:1100px) and (max-width:1279px) and (max-height:799px){
 .hero-copy { top:calc(var(--head-h) + 20px); width:420px; }
 .hero h1 { font-size:48px; }
 .hero .lede { font-size:16px; line-height:1.5; margin-bottom:24px; }
 .hero .actions { gap:8px; }
 .hero .actions .btn { font-size:14px; padding-inline:14px; }
 .hero-label .hero-facts,.hero-label .wl-acc { display:none; }
}
@media(min-width:1280px){
 .hero-copy { width:clamp(500px,39vw,1320px); }
 .hero h1 { font-size:clamp(48px,3.8vw,96px); }
 .hero .lede { font-size:clamp(18px,1.1vw,22px); }
}
/* Continue the compact specimen-and-gauge layout through tablet widths. */
@media(min-width:900px) and (max-width:1099px) and (min-height:501px){
 .hero { --fig-h:clamp(400px,54svh,520px); grid-template-columns:auto minmax(0,1fr); grid-template-areas:"spec gauge" "copy copy"; column-gap:14px; align-items:start; }
 .hero-spec { margin:8px 0 0; --pool-w:190%; }
 .hero-spec .peel-stage { mask-image:linear-gradient(180deg,#000 60%,transparent 84%); }
 .hero-copy { padding-top:0; margin-top:calc(var(--fig-h) * -.22); }
 .hero-label { grid-area:auto; position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
 .gauge { width:340px; --gx:200px; margin:calc(var(--fig-h) * .035) 0 0; height:calc(var(--fig-h) * .67); }
 .g-track { min-height:0; margin:0 0 0 calc(var(--gx) + var(--sx,0px)); }
 .g-ride { max-width:180px; }
 .gauge.is-sel .g-sel { display:block; }
 .g-sel { font:400 13px/18px var(--sans); color:var(--text-2); }
}
@media(min-width:900px) and (max-width:1099px) and (min-height:912px){
 .hero { grid-template-columns:minmax(0,1fr) auto auto minmax(0,1fr); grid-template-areas:". spec gauge ." "copy copy copy copy"; }
}
@media(min-width:900px) and (max-width:1099px) and (min-height:501px) and (max-height:911px){
 .gauge { width:auto; justify-self:stretch; --gx:18px; }
 .g-stop span { display:none; }
 .g-now { display:block; font:italic 400 15px/20px var(--serif); color:var(--text); }
}
.anatomy-demo,.lesson-demo { margin-top:48px; }
.anatomy-demo,.case-example,.lesson-demo { scroll-margin-top:96px; }
.demo-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:16px; margin:24px 0 12px; }
.demo-toolbar p { margin:0; font-size:15px; color:var(--text-2); }
.demo-button { background:transparent; border:1px solid var(--line-2); border-radius:2px; color:var(--text); min-height:44px; padding:9px 16px; font:500 14px/1.4 var(--sans); cursor:pointer; }
.demo-button:hover { border-color:var(--accent); background:var(--accent-soft); }
.demo-button:disabled { opacity:.45; cursor:default; }
.demo-range { display:grid; grid-template-columns:auto minmax(160px,1fr) auto; align-items:center; gap:8px 24px; max-width:900px; margin:20px auto; }
.demo-range label { font-size:15px; }
.demo-range input { width:100%; min-height:44px; accent-color:var(--accent); cursor:ew-resize; }
.demo-range output { min-width:45px; color:var(--accent-2); font-variant-numeric:tabular-nums; text-align:right; }
.range-endpoints { grid-column:2; display:flex; justify-content:space-between; font-size:13px; margin-top:-12px; }
.demo-stage { position:relative; width:100%; isolation:isolate; }
.anatomy-scene { display:block; width:100%; height:100%; overflow:hidden; }
.anatomy-image { pointer-events:none; }
.section-demo-stage { height:clamp(560px,72vh,1400px); }
.anatomy-contour { fill:transparent; stroke:transparent; pointer-events:none; }
.anatomy-label.is-active .anatomy-contour { fill:color-mix(in srgb,var(--accent) 28%,transparent); stroke:var(--accent-2); stroke-width:1; }
.anatomy-leader { fill:none; stroke:var(--accent); stroke-width:1.25; pointer-events:none; }
.anatomy-overlay { position:absolute; inset:0; pointer-events:none; }
.demo-pin { position:absolute; display:grid; place-items:center; width:19px; height:19px; padding:0; transform:translate(-50%,-50%); border:1.2px solid var(--accent); border-radius:50%; background:var(--stage-bottom); color:var(--accent-2); font:500 11px/1 var(--sans); cursor:pointer; pointer-events:auto; }
.demo-pin::after { content:''; position:absolute; inset:-7px; border-radius:50%; }
.demo-pin.is-active { background:var(--accent); color:var(--on-accent); z-index:2; }
.demo-pin:focus-visible { outline:2px solid var(--text); outline-offset:4px; }
.anatomy-caption { position:absolute; color:var(--text); font:500 15px/1.35 var(--sans); padding:3px 5px; background:transparent; pointer-events:none; text-wrap:balance; }
.anatomy-caption[hidden] { display:none; }
.anatomy-caption.is-left { text-align:right; }
.anatomy-key { list-style:none; display:flex; flex-wrap:wrap; gap:4px 28px; padding:16px 0 0; margin:0; }
.anatomy-key li { margin:0; }
.anatomy-key button { display:flex; gap:9px; align-items:center; min-height:44px; padding:7px 0; background:none; border:0; color:var(--text-2); font:400 15px/1.3 var(--sans); cursor:pointer; text-align:left; }
.anatomy-key button:hover,.anatomy-key button.is-active { color:var(--accent-2); }
.key-n { flex:none; width:20px; height:20px; display:grid; place-items:center; border:1px solid var(--accent); border-radius:50%; font:500 11px/1 var(--sans); }
.anatomy-key button.is-active .key-n { color:var(--on-accent); background:var(--accent); }
.demo-note { color:var(--text-3); font:400 13px/1.6 var(--sans); margin:16px 0 0; }
.section-empty { text-align:center; font-size:15px; }
.case-example { margin-top:var(--room-gap); }
#films>.case-example:first-of-type { margin-top:32px; }
.case-intro { max-width:65ch; margin:16px 0 24px; }
.radiology-pair { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,4vw,80px); margin:0; }
.radiology-pair figure { margin:0; min-width:0; }
.radiology-stage { height:auto; max-height:min(74svh,1100px); }
#case-kidney .radiology-stage { aspect-ratio:1.48; }
#case-cervical .radiology-stage { aspect-ratio:.87; }
.case-caption { max-width:690px; margin:28px 0 0; }
.case-caption .wl-detail { padding-top:0; border:0; }
.radiology-pair figcaption { color:var(--text-2); font-size:14px; padding:12px 0; }
.image-credit { font-size:13px; line-height:1.7; color:var(--text-3); margin:20px 0 0; max-width:100ch; }
.lesson-layout { display:grid; grid-template-columns:minmax(280px,360px) minmax(0,1fr); gap:clamp(32px,5vw,150px); align-items:start; }
.lesson-reading { padding:24px 0; }
.lesson-context { display:flex; gap:12px; align-items:center; justify-content:space-between; margin:0 0 14px; font-size:14px; }
.lesson-level { color:var(--accent-2); }
.lesson-title { font:600 18px/1.4 var(--sans); color:var(--text); margin:0 0 20px; }
.lesson-step-select { width:100%; min-height:44px; color:var(--text); background:var(--stage-bottom); border:1px solid var(--line-2); border-radius:2px; font:400 14px/1.4 var(--sans); padding:8px; }
.lesson-step-count { font-size:13px; color:var(--accent-2); margin:8px 0 20px; }
.lesson-reading h3 { font:600 17px/1.4 var(--sans); margin:0 0 12px; }
.lesson-body p,.lesson-objectives { color:var(--text-2); font-size:15px; line-height:1.6; }
.lesson-objectives ul { padding-left:20px; }
.lesson-objectives p { color:var(--accent-2); font-weight:500; }
.lesson-recall { margin-top:24px; }
.lesson-recall>p:first-child { font:500 14px/1.4 var(--sans); color:var(--accent-2); }
.lesson-question,.lesson-answer { font-size:15px; line-height:1.6; }
.lesson-recall summary { cursor:pointer; color:var(--accent-2); padding:10px 0; min-height:44px; }
.lesson-stage { height:clamp(570px,72vh,1400px); }
.lesson-nav { display:flex; gap:12px; margin-top:20px; }
.lesson-nav button { flex:1; }
.lesson-visual { min-width:0; }
.demo-error { padding:28px 0; color:var(--text-2); }
.faq details { border:0; padding-bottom:12px; }
.faq code { overflow-wrap:anywhere; font-size:.88em; }
@media(max-width:899px){ .split { grid-template-columns:1fr; } .lesson-layout { grid-template-columns:minmax(220px,1fr) minmax(0,1.4fr); gap:24px; } }
@media(max-width:649px){
 .demo-range { grid-template-columns:1fr auto; gap:4px 16px; }
 .demo-range input { grid-column:1/-1; grid-row:2; }
 .demo-range output { grid-column:2; grid-row:1; }
 .range-endpoints { grid-column:1/-1; margin-top:0; }
 .section-demo-stage { height:490px; }
 .anatomy-caption { font-size:14px; max-width:110px!important; }
 .anatomy-key { gap:0 20px; }
 .anatomy-key button { font-size:14px; }
 .radiology-pair { grid-template-columns:1fr; gap:24px; }
 .radiology-stage { height:auto; max-height:none; }
 #case-kidney .radiology-stage { aspect-ratio:1.08; }
 #case-cervical .radiology-stage { aspect-ratio:.62; }
 .lesson-layout { display:flex; flex-direction:column; gap:12px; }
 .lesson-reading,.lesson-visual { width:100%; }
 .lesson-stage { height:460px; }
}

.hero-facts { font:400 13px/1.5 var(--sans); margin:12px 0; }
.hero-facts div { display:grid; grid-template-columns:65px 1fr; gap:12px; margin:3px 0; }
.hero-facts dt { color:var(--text-3); }
.hero-facts dd { margin:0; color:var(--text-2); }
.leaders .hero-caption-pin { fill:var(--accent); stroke:var(--stage-bottom); stroke-width:1.2; }
.leaders .hero-caption-number { fill:var(--on-accent); font:500 11px var(--sans); text-anchor:middle; dominant-baseline:central; }

@media(max-width:649px){.scan-stage .anatomy-caption{color:#fff;text-shadow:0 1px 3px #17131a,0 -1px 2px #17131a,1px 0 2px #17131a,-1px 0 2px #17131a;}}


/* The approved slide-to-model interval sets the page rhythm. */
:root { --room-gap:clamp(72px,8vw,120px); }
.room { padding-block:calc(var(--room-gap) / 2); }
.room-head { margin-bottom:clamp(28px,3vw,48px); }
.center-head { margin-bottom:28px; }
#section-demo { margin-top:0; }
.micro-models { margin-top:var(--room-gap); }
.otc { align-items:start; grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr); gap:32px clamp(32px,5vw,72px); }
.otc-label { max-width:68ch; margin:28px 0 0; }
.otc-copy h2 { margin-top:0; }
@media(max-width:899px) { .otc { grid-template-columns:minmax(0,1fr); } }