/* Homepage redesign layer, loaded last. Started 2026-10-14: hero proof line, panel 2 card system. */
:root {
  --rd-ink: #0e3b47;
  --rd-ink-2: #2c5562;
  --rd-muted: #557580;
  --rd-teal: #087d96;
  --rd-cyan: #29cdde;
  --rd-line: #d6e4ec;
  --rd-card: #ffffffdb;
  --rd-card-border: #ffffffe6;
  --rd-card-shadow: 0 28px 56px -30px #0e3b4766, 0 2px 8px #0e3b470d;
  --rd-radius: 24px;
}

/* Panel 2: shared card system */
#care-gap .p2-card { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; margin: 0; padding: clamp(16px, 2.1svh, 26px) clamp(18px, 1.6vw, 26px); border-radius: var(--rd-radius); background: var(--rd-card); border: 1px solid var(--rd-card-border); box-shadow: var(--rd-card-shadow); -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15); color: var(--rd-ink); }
#care-gap .p2-eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font: 600 14px/1.2 var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--rd-teal); }
#care-gap .p2-step { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: #e2f3f7; font: 600 14px/1 var(--text); letter-spacing: 0; }
#care-gap .p2-card h3 { margin: 0; font: 500 clamp(19px, min(1.72vw, 2.9svh), 26px)/1.14 var(--display); letter-spacing: -.022em; color: var(--rd-ink); text-wrap: balance; }
#care-gap .p2-card p { margin: 0; font: 400 clamp(15px, min(1.12vw, 1.95svh), 17px)/1.45 var(--text); color: var(--rd-ink-2); }

/* Card 1: the patient and the real app, with live UBi landing over the phone */
#care-gap .p2-card--patient figcaption { margin-bottom: 12px; }
#care-gap .p2-phone { flex: 1; min-height: 0; display: flex; justify-content: center; align-items: center; margin: 0 0 14px; }
#care-gap .p2-phone-frame { position: relative; height: 100%; max-height: 400px; aspect-ratio: 9 / 20; }
#care-gap .p2-phone-frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; border: 5px solid #173f4b; border-radius: clamp(20px, 2.4svh, 30px); box-shadow: 0 18px 34px -16px #0e3b4766; }
#care-gap .p2-seat { position: absolute; left: -17%; top: 19%; width: 134%; height: 65%; }

/* Card 2: the care plan, shown as product UI */
#care-gap .p2-card--plan header p { margin-top: 10px; }
#care-gap .p2-plan-ui { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: clamp(6px, 1svh, 10px); margin-top: clamp(10px, 1.6svh, 16px); padding: clamp(10px, 1.4svh, 14px) 16px; border-radius: 18px; background: linear-gradient(180deg, #f6fafd, #edf4f9); border: 1px solid #dbe8f0; }
#care-gap .p2-chips { display: flex; flex-wrap: wrap; gap: 6px; }
#care-gap .p2-chips span { padding: 6px 10px; border-radius: 999px; background: #fff; border: 1px solid #d3e3ec; font: 500 14px/1.1 var(--text); color: var(--rd-ink); }
#care-gap .p2-trend { position: relative; flex: 1; min-height: 96px; display: flex; flex-direction: column; }
#care-gap .p2-trend svg { flex: 1; min-height: 70px; width: 100%; overflow: visible; }
#care-gap .p2-trend-name, #care-gap .p2-trend-note { position: absolute; top: 0; z-index: 1; font: 600 15px/1.2 var(--text); color: var(--rd-ink); }
#care-gap .p2-trend-name { left: 0; }
#care-gap .p2-trend-note { right: 0; font-weight: 500; font-size: 14px; color: var(--rd-muted); }
#care-gap .p2-target-label { position: absolute; left: 4px; bottom: 27px; z-index: 1; font: 500 14px/1.2 var(--text); color: #0a6f84; }
#care-gap .p2-target { fill: #29cdde26; }
#care-gap .p2-intervention { stroke: var(--rd-teal); stroke-width: 1.4; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
#care-gap .p2-area { fill: #0c93b014; }
#care-gap .p2-line { fill: none; stroke: #0c93b0; stroke-width: 2.6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
#care-gap .p2-intervention-label { position: absolute; left: calc(40.6% + 6px); bottom: 27px; z-index: 1; padding: 2px 8px; border-radius: 999px; background: #fff; border: 1px solid #cfe2ea; font: 500 14px/1.3 var(--text); color: var(--rd-teal); white-space: nowrap; }
#care-gap .p2-axis { display: flex; justify-content: space-between; margin-top: 6px; height: 17px; font: 500 14px/1.2 var(--text); color: var(--rd-muted); }
#care-gap .p2-status { display: flex; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid #dbe8f0; font: 500 15px/1.3 var(--text); color: var(--rd-ink-2); }
#care-gap .p2-status strong { font-weight: 600; color: var(--rd-ink); }
#care-gap .p2-status svg { flex: none; width: 20px; height: 20px; }
#care-gap .p2-status circle { fill: #0c93b0; }
#care-gap .p2-status path { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Card 3: the GI and the evidence, one aligned number column */
#care-gap .p2-gi-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 6px; }
#care-gap .p2-gi-head img { flex: none; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: 0 4px 12px #0e3b4726; }
#care-gap .p2-stats { flex: 1; min-height: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); align-content: safe center; column-gap: 18px; }
#care-gap .p2-stat { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; padding: clamp(8px, 1.3svh, 16px) 0; border-top: 1px solid var(--rd-line); }
#care-gap .p2-stat:first-child { border-top: 0; }
#care-gap .p2-stat strong { justify-self: end; font: 500 clamp(32px, min(3.1vw, 5.4svh), 52px)/1 var(--display); letter-spacing: -.04em; color: var(--rd-teal); font-variant-numeric: tabular-nums; white-space: nowrap; }
#care-gap .p2-stat strong span { margin-left: 2px; font-size: .52em; letter-spacing: 0; }
#care-gap .p2-stat p { font: 500 clamp(16px, 1.2vw, 18px)/1.28 var(--display); color: var(--rd-ink); }
#care-gap .p2-stat p small { display: block; margin-top: 4px; font: 400 14px/1.35 var(--text); color: var(--rd-muted); }
#care-gap .p2-stat--staff { border-top: 2px solid #0e3b4730; }
#care-gap .p2-stat--staff strong { color: var(--rd-ink); }
#care-gap .p2-cite { margin-left: 3px; font: 600 14px/1 var(--text); vertical-align: super; color: var(--rd-teal); text-decoration: none; }
#care-gap .p2-cite:hover, #care-gap .p2-cite:focus-visible { text-decoration: underline; }

/* Connectors between the cards */
#care-gap .p2-link { grid-row: 1; align-self: center; position: relative; height: 2px; margin: 0 -2px; border-radius: 2px; background: linear-gradient(90deg, #29cdde26, #29cdde99, #29cdde26); }
#care-gap .p2-link::after { content: ""; position: absolute; right: 0; top: 50%; width: 8px; height: 8px; border-top: 2px solid var(--rd-cyan); border-right: 2px solid var(--rd-cyan); transform: translateY(-50%) rotate(45deg); }
#care-gap .p2-link i { position: absolute; top: 50%; left: 0; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--rd-cyan); box-shadow: 0 0 12px 3px #29cdde99; opacity: 0; }
#care-gap .p2-stage[data-active="true"] .p2-link i { animation: p2-flow 2.6s ease-in-out infinite; }
#care-gap .p2-stage[data-active="true"] .p2-card--plan + .p2-link i { animation-delay: 1.3s; }
#care-gap .p2-stage[data-active="true"] .p2-trend svg { animation: p2-reveal 1.6s cubic-bezier(.4, 0, .2, 1) both; }
@keyframes p2-flow { 0% { left: -4px; opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { left: calc(100% - 6px); opacity: 0; } }
@keyframes p2-reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
#care-gap .p2-stage[data-reduced-motion="true"] .p2-link i, #care-gap .p2-stage[data-reduced-motion="true"] .p2-trend svg { animation: none; }
@media (max-width: 0px) {
  #care-gap .p2-link i, #care-gap .p2-trend svg { animation: none !important; }
}

/* The AGA evidence line and the details link sit under UBi's answer, above the cards */
#care-gap .p2-head .program-evidence-note { display: block; position: static; max-width: 64ch; margin: clamp(10px, 1.4svh, 20px) 0 0; padding: 2px 0 2px 14px; border-left: 3px solid var(--rd-cyan); font: 500 var(--p2-body, 16px)/1.45 var(--text); color: var(--rd-ink); }
#care-gap .p2-head .program-detail-trigger { display: inline-flex; position: static; transform: none; min-height: 32px; margin: 6px 0 0 17px; padding: 4px 0; border: 0; background: none; font: 600 var(--p2-small, 15px)/1.3 var(--text); color: var(--rd-teal); white-space: nowrap; cursor: pointer; }

/* Panel 2 on desktop and laptop: the panel fills the screen height, and type and visuals grow with it */
@media (min-width: 901px) {
  #care-gap {
    --p2-h2: clamp(30px, min(3vw, 5.2svh), 47px);
    --p2-lead: clamp(16px, min(1.5vw, 2.25svh), 25px);
    --p2-h3: clamp(19px, min(2.1vw, 2.9svh), 36px);
    --p2-body: clamp(15px, min(1.35vw, 1.85svh), 22px);
    --p2-small: clamp(14px, min(1.05vw, 1.55svh), 19px);
    --p2-num: clamp(32px, min(4vw, 5.4svh), 84px);
    --p2-label: clamp(16px, min(1.45vw, 2.05svh), 25px);
  }
  #care-gap .gap-composition { height: 100svh; min-height: 660px; }
  #care-gap .response-wash { background: linear-gradient(90deg, #eff4fff2 0%, #eff4ffd9 34%, #eff4ff66 56%, #eff4ff00 70%); }
  #care-gap .response-story.p2 { position: absolute; inset: max(104px, 8svh) 5.5% 88px; display: flex; flex-direction: column; gap: clamp(12px, 2svh, 40px); }
  #care-gap .p2-head { position: relative; width: auto; max-width: min(66%, 940px); margin: 0; padding: 0; background: none; }
  #care-gap .p2-head h2 { max-width: none; margin: 0 0 clamp(10px, 1.4svh, 22px); font: 500 var(--p2-h2)/1.06 var(--display); letter-spacing: -.035em; color: var(--rd-ink); }
  #care-gap .p2-head h2 span { color: var(--rd-teal); }
  #care-gap .p2-head > p { max-width: 60ch; margin: 0; font: 400 var(--p2-lead)/1.45 var(--text); color: var(--rd-ink-2); }
  #care-gap .p2-stage { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, .88fr) clamp(34px, 2.4vw, 48px) minmax(0, 1.12fr) clamp(34px, 2.4vw, 48px) minmax(0, 1.04fr); grid-template-rows: minmax(0, 1fr); }
  #care-gap .p2-card { grid-row: 1; padding: clamp(16px, 2.1svh, 40px) clamp(18px, 1.7vw, 40px); border-radius: clamp(20px, 2.4svh, 32px); }
  #care-gap .p2-eyebrow { margin-bottom: clamp(6px, 1svh, 16px); font-size: var(--p2-small); }
  #care-gap .p2-step { width: clamp(28px, 3.3svh, 42px); height: clamp(28px, 3.3svh, 42px); font-size: var(--p2-small); }
  #care-gap .p2-card h3 { font-size: var(--p2-h3); }
  #care-gap .p2-card p { font-size: var(--p2-body); }
  #care-gap .p2-card--patient figcaption { margin-bottom: clamp(10px, 1.6svh, 24px); }
  #care-gap .p2-phone { margin-bottom: clamp(12px, 1.8svh, 28px); }
  #care-gap .p2-phone-frame { max-height: none; }
  #care-gap .p2-phone-frame img { border-width: clamp(5px, .6svh, 9px); border-radius: clamp(20px, 3.4svh, 48px); }
  #care-gap .p2-card--plan header p { margin-top: clamp(8px, 1.2svh, 18px); }
  #care-gap .p2-plan-ui { padding: clamp(10px, 1.4svh, 22px) clamp(14px, 1.2vw, 24px); border-radius: clamp(16px, 2svh, 26px); }
  #care-gap .p2-chips span, #care-gap .p2-trend-note, #care-gap .p2-target-label, #care-gap .p2-intervention-label, #care-gap .p2-axis { font-size: var(--p2-small); }
  #care-gap .p2-trend-name, #care-gap .p2-status { font-size: calc(var(--p2-small) + 1px); }
  #care-gap .p2-chips span { padding: .45em .75em; }
  #care-gap .p2-axis { height: auto; }
  #care-gap .p2-target-label, #care-gap .p2-intervention-label { bottom: calc(var(--p2-small) * 1.2 + 10px); }
  #care-gap .p2-status { padding-top: clamp(8px, 1.2svh, 16px); }
  #care-gap .p2-status svg { width: clamp(20px, 2.4svh, 28px); height: clamp(20px, 2.4svh, 28px); }
  #care-gap .p2-gi-head img { width: clamp(48px, 6svh, 84px); height: clamp(48px, 6svh, 84px); }
  #care-gap .p2-stats { align-content: space-evenly; }
  #care-gap .p2-stat { padding: clamp(8px, 1.6svh, 26px) 0; }
  #care-gap .p2-stat strong { font-size: var(--p2-num); }
  #care-gap .p2-stat p { font-size: var(--p2-label); }
  #care-gap .p2-stat p small, #care-gap .p2-cite { font-size: var(--p2-small); }
}
@media (min-width: 901px) and (max-height: 900px) {
  #care-gap .p2-chips { display: none; }
}
@media (min-width: 901px) and (max-height: 820px) {
  #care-gap .response-story.p2 { inset: 100px 5% 84px; gap: 10px; }
  #care-gap .p2-head h2 { margin-bottom: 8px; font-size: clamp(28px, 2.6vw, 36px); }
  #care-gap .p2-head > p { font-size: 16px; line-height: 1.38; }
  #care-gap .p2-card { padding: 16px 18px; border-radius: 20px; }
  #care-gap .p2-eyebrow { margin-bottom: 6px; }
  #care-gap .p2-card h3 { font-size: clamp(19px, 1.55vw, 21px); }
  #care-gap .p2-trend { min-height: 84px; }
  #care-gap .p2-trend svg { min-height: 60px; }
  #care-gap .p2-card p { font-size: 15px; line-height: 1.4; }
  #care-gap .p2-plan-ui { margin-top: 10px; padding: 10px 12px; gap: 8px; }
  #care-gap .p2-stat strong { font-size: clamp(30px, 2.6vw, 36px); }
  #care-gap .p2-gi-head img { width: 44px; height: 44px; }
  #care-gap .p2-stat { padding: 6px 0; }
  #care-gap .p2-head .program-evidence-note { margin-top: 8px; font-size: 15px; line-height: 1.38; }
  #care-gap .p2-head .program-detail-trigger { margin-top: 2px; min-height: 28px; }
}

@media (min-width: 901px) and (max-height: 760px) {
  #care-gap .p2-trend { min-height: 70px; }
  #care-gap .p2-trend svg { min-height: 46px; }
  #care-gap .p2-status { padding-top: 6px; }
  #care-gap .p2-card--plan header p { margin-top: 6px; }
}

/* Panel 2 on phones: Codex's three tabs, one card at a time */
@media (max-width: 900px) {
  #care-gap .p2-head { width: 100%; }
  #care-gap .p2-head h2 { margin: 0 0 var(--phone-gap, 12px); font: 500 var(--phone-title, 30px)/1.08 var(--display); letter-spacing: -.03em; color: var(--rd-ink); }
  #care-gap .p2-head h2 span { color: var(--rd-teal); }
  #care-gap .p2-head > p { font: 400 var(--phone-body, 16px)/1.42 var(--text); color: var(--rd-ink-2); }
  #care-gap:has(.p2-stage[data-mobile-view="1"]) .p2-head, #care-gap:has(.p2-stage[data-mobile-view="2"]) .p2-head { display: none; }
  #care-gap .p2-stage { display: flex; flex-direction: column; gap: 12px; }
  #care-gap .p2-link { display: none; }
  #care-gap .p2-stage > .p2-card { display: none; padding: 18px; border-radius: 20px; background: #ffffffeb; }
  #care-gap .p2-stage[data-mobile-view="0"] .p2-card--patient, #care-gap .p2-stage[data-mobile-view="1"] .p2-card--plan, #care-gap .p2-stage[data-mobile-view="2"] .p2-card--gi { display: flex; }
  #care-gap .p2-phone { flex: none; }
  #care-gap .p2-phone-frame { height: clamp(200px, 32svh, 320px); }
  #care-gap .p2-card--plan header { position: relative; padding-right: 58px; }
  #care-gap .p2-card--plan .mobile-plan-seat { left: auto; right: -8px; top: -8px; width: 60px; height: 82px; }
  #care-gap .p2-plan-ui { flex: none; min-height: 220px; }
  #care-gap .p2-trend svg { min-height: 70px; }
  #care-gap .p2-stats { margin-top: 6px; }
  #care-gap .p2-head .program-evidence-note { font-size: 15px; }
  #care-gap .p2-head .program-detail-trigger { margin-left: 0; }
}
@media (max-width: 900px) and (max-height: 700px) {
  #care-gap .p2-chips { display: none; }
  #care-gap .p2-phone-frame { height: clamp(170px, 30svh, 240px); }
  #care-gap .p2-plan-ui { min-height: 170px; }
  #care-gap .p2-eyebrow { letter-spacing: .03em; }
}

/* Hero subheader keeps hyphenated words whole */
.hero-positioning .nowrap { white-space: nowrap; }

/* Panel 3: four tabs on one row; the stool tab shows the toilet sensor photo, mirrored so the sensor sits clear of the phone */
#everyday .app-topics { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 18px; }
#everyday .app-topics button { text-wrap: balance; }
#everyday #app-topic-title { text-wrap: balance; }
.app-reveal[data-topic="stool"] .app-photo > img { object-position: 100% 50%; }
.app-reveal[data-topic="stool"] .app-surface::before { background-image: linear-gradient(90deg, #eff4ffdb, #eff4ff55 30%, transparent 68%), url('/v34-assets/stool-sensor-bathroom-crop.jpg'); background-position: center, center; }
@media (max-width: 900px) {
  #everyday .app-topics { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 6px; }
  #everyday .app-topics button { font-size: 12.5px; line-height: 1.2; }
}


/* Panel 5: the clinical steps on the left; on the right, a scene for each step showing it happen, filling the screen height */
#earlier-action .p5-screen { display: none; }
@media (min-width: 901px) {
  #earlier-action {
    --p5-step: clamp(16px, min(1.2vw, 1.9svh), 21px);
    --p5-title: clamp(22px, min(2.1vw, 3.2svh), 40px);
    --p5-body: clamp(15px, min(1.25vw, 1.9svh), 21px);
  }
  #earlier-action .workflow-scene { display: grid; grid-template-columns: minmax(300px, .78fr) minmax(0, 1.7fr); grid-template-rows: auto minmax(0, 1fr) auto; column-gap: clamp(28px, 3vw, 64px); row-gap: clamp(10px, 1.6svh, 24px); height: clamp(440px, calc(100svh - 380px), 1100px); }
  #earlier-action .workflow-rail { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; border: 0; }
  #earlier-action .workflow-rail [data-scene-step] { display: flex; align-items: center; gap: 14px; width: 100%; margin: 0; padding: clamp(7px, 1.15svh, 14px) 0; border: 0; border-bottom: 1px solid var(--rd-line); background: none; text-align: left; font: 500 var(--p5-step)/1.25 var(--text); color: var(--rd-muted); cursor: pointer; position: relative; }
  #earlier-action .workflow-rail [data-scene-step][aria-pressed="true"] { color: var(--rd-ink); }
  #earlier-action .workflow-rail [data-scene-step][aria-pressed="true"]::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--rd-teal); transform-origin: left; animation: p5-progress 7s linear both; }
  #earlier-action .workflow-scene.scene-paused .workflow-rail [data-scene-step]::after, #earlier-action .workflow-scene:not(.scene-playing) .workflow-rail [data-scene-step]::after { animation: none; }
  @keyframes p5-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  #earlier-action .workflow-step-number { display: grid; place-items: center; flex: none; width: 1.9em; height: 1.9em; border-radius: 50%; background: #e2f3f7; color: var(--rd-teal); font-size: .78em; font-weight: 600; }
  #earlier-action .workflow-rail [aria-pressed="true"] .workflow-step-number { background: var(--rd-teal); color: #fff; }
  #earlier-action .workflow-deck { grid-column: 1; grid-row: 2; position: relative; min-height: 0; display: grid; align-items: start; }
  #earlier-action .workflow-card, #earlier-action .workflow-card[hidden] { display: block; grid-area: 1 / 1; min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; }
  #earlier-action .workflow-card .workflow-artifact { display: none; }
  #earlier-action .workflow-explanation { max-width: none; padding-top: clamp(12px, 2svh, 28px); }
  #earlier-action .workflow-explanation h3 { max-width: 20ch; margin: 0 0 clamp(8px, 1.4svh, 18px); font: 500 var(--p5-title)/1.12 var(--display); letter-spacing: -.025em; color: var(--rd-ink); }
  #earlier-action .workflow-explanation > p { max-width: 36ch; margin: 0; font: 400 var(--p5-body)/1.45 var(--text); color: var(--rd-ink-2); }
  #earlier-action .workflow-scene .scene-controls { grid-column: 2; grid-row: 3; margin: 0; padding: 0; border: 0; text-align: right; }
  #earlier-action .workflow-scene .scene-controls { display: none; }

  /* The scene frame */
  #earlier-action .p5-screen { display: grid; place-items: center; grid-column: 2; grid-row: 1 / 3; min-width: 0; min-height: 0; container-type: size; }
  #earlier-action .p5-frame { position: relative; width: min(100cqw, calc(100cqh * 16 / 9)); aspect-ratio: 16 / 9; container-type: inline-size; border-radius: clamp(18px, 2.2svh, 30px); background: linear-gradient(160deg, #f4f9fc, #e6f1f7); border: 1px solid #d8e6ee; box-shadow: 0 30px 70px -36px #0e3b4766; }
  #earlier-action .p5-frame .workflow-seat { position: absolute; z-index: 6; left: -6%; bottom: -8%; top: auto; right: auto; width: 14%; height: 27%; }
  #earlier-action .s-illustrative { position: absolute; z-index: 5; right: 2%; bottom: 2.2%; font: 500 1.05cqw/1 var(--text); color: #7a949e; }
  #earlier-action .p5-scene { position: absolute; inset: 0; font-size: max(12.5px, 1.72cqw); color: var(--rd-ink); opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s linear .45s; }
  #earlier-action .workflow-scene[data-step="0"] .p5-scene--0, #earlier-action .workflow-scene[data-step="1"] .p5-scene--1, #earlier-action .workflow-scene[data-step="2"] .p5-scene--2,
  #earlier-action .workflow-scene[data-step="3"] .p5-scene--3, #earlier-action .workflow-scene[data-step="4"] .p5-scene--4, #earlier-action .workflow-scene[data-step="5"] .p5-scene--5 { opacity: 1; visibility: visible; transition: opacity .45s ease; }

  /* Shared scene parts */
  #earlier-action .p5-scene > * { position: absolute; }
  #earlier-action .s-card { padding: 1.3em 1.5em; border-radius: 1.1em; background: #fff; border: 1px solid #e0ebef; box-shadow: 0 1.4em 3em -1.6em #0e3b4759; }
  #earlier-action .s-photo { overflow: hidden; border-radius: 1.2em; box-shadow: 0 1.4em 3em -1.6em #0e3b4766; }
  #earlier-action .s-photo img, #earlier-action .s-phone img { display: block; width: 100%; height: 100%; object-fit: cover; }
  #earlier-action .s-phone { aspect-ratio: 495 / 1071; overflow: hidden; border: .42em solid #173f4b; border-radius: 1.9em; background: #173f4b; box-shadow: 0 1.6em 3.2em -1.6em #0e3b4780; }
  #earlier-action .s-phone img { object-position: top; border-radius: 1.45em; }
  #earlier-action .s-eyebrow { display: block; font: 600 .78em/1.25 var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--rd-teal); }
  #earlier-action .s-title { display: block; margin-top: .3em; font: 500 1.45em/1.15 var(--display); letter-spacing: -.02em; color: var(--rd-ink); }
  #earlier-action .s-sub { display: block; margin-top: .35em; font: 400 .88em/1.35 var(--text); color: #5d7884; }
  #earlier-action .s-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; }
  #earlier-action .s-flag { flex: none; padding: .3em .7em; border-radius: 99em; background: #fbebe6; color: #a5503b; font: 600 .78em/1.2 var(--text); }
  #earlier-action .s-flag--good { background: #e0f3ef; color: #0f706c; }
  #earlier-action .s-big { font: 500 3em/1 var(--display); letter-spacing: -.04em; color: #b8574a; margin-top: .2em; }
  #earlier-action .s-big small { font-size: .38em; letter-spacing: 0; color: #5d7884; }
  #earlier-action .s-big--sm { font-size: 2em; color: #8c5ab8; margin: 0; }
  #earlier-action .s-chart { display: block; width: 100%; height: 5em; margin-top: .6em; overflow: visible; }
  #earlier-action .s-target { fill: #29cdde26; }
  #earlier-action .s-area { fill: #b8574a12; }
  #earlier-action .s-line { fill: none; stroke: #b8574a; stroke-width: 2.6; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 100; stroke-dashoffset: 0; }
  #earlier-action .s-dot { fill: #b8574a; stroke: #fff; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
  #earlier-action .s-dot--good { fill: #0f8b7f; }
  #earlier-action .s-marker { stroke: var(--rd-teal); stroke-width: 1.4; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
  #earlier-action .s-axis { display: flex; justify-content: space-between; margin-top: .45em; font: 500 .78em/1 var(--text); color: #7a949e; }
  #earlier-action .s-chartbox { position: relative; flex: 1; min-height: 5em; margin-top: .8em; }
  #earlier-action .s-chartbox .s-chart { height: 100%; margin: 0; }
  #earlier-action .s-target-label, #earlier-action .s-marker-label { position: absolute; font: 500 .78em/1 var(--text); color: #0a6f84; }
  #earlier-action .s-target-label { left: .6em; bottom: .6em; }
  #earlier-action .s-marker-label { left: calc(17.5% + .5em); top: 0; padding: .25em .6em; border-radius: 99em; background: #fff; border: 1px solid #cfe2ea; }
  #earlier-action .s-bubble { max-width: 13.5em; padding: .8em 1.05em; border-radius: 1.1em; background: #fff; box-shadow: 0 1.2em 2.4em -1.2em #0e3b4766; font: 500 1.02em/1.35 var(--text); color: var(--rd-ink); }
  #earlier-action .s-bubble b { display: block; margin-bottom: .2em; font: 700 .72em/1 var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--rd-teal); }
  #earlier-action .s-bubble--ubi { border-bottom-left-radius: .3em; }
  #earlier-action .s-bubble--patient { background: #0e3b47; color: #fff; border-bottom-right-radius: .3em; }
  #earlier-action .s-head { display: flex; align-items: center; gap: .7em; margin-bottom: .6em; }
  #earlier-action .s-head b { font: 600 1.05em/1.2 var(--text); }
  #earlier-action .s-head .s-flag { margin-left: auto; }
  #earlier-action .s-badge { display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; background: #0e3b47; color: #fff; font: 700 .72em/1 var(--text); }
  #earlier-action .s-badge--rn { background: #0f8b7f; }
  #earlier-action .s-track { display: grid; gap: .65em; margin: 1em 0 0; padding: 0; list-style: none; }
  #earlier-action .s-track li { display: grid; grid-template-columns: 1.4em 1fr auto; align-items: center; gap: .7em; font: 500 .95em/1.2 var(--text); color: #9bb2bb; }
  #earlier-action .s-track i { width: 1.4em; height: 1.4em; border-radius: 50%; border: .18em solid #cfe0e7; box-sizing: border-box; }
  #earlier-action .s-track small { font-size: .82em; color: #9bb2bb; }
  #earlier-action .s-checks { display: grid; gap: .7em; margin: .4em 0 0; padding: 0; list-style: none; }
  #earlier-action .s-checks li { display: flex; align-items: center; gap: .65em; font: 500 .95em/1.25 var(--text); color: #9bb2bb; }
  #earlier-action .s-checks li::before { content: ""; flex: none; width: 1.3em; height: 1.3em; border-radius: 50%; border: .16em solid #cfe0e7; box-sizing: border-box; }
  #earlier-action .s-ready { display: flex; align-items: center; gap: .6em; margin-top: 1.1em; padding-top: .9em; border-top: 1px solid #e0ebef; font: 600 .9em/1.2 var(--text); color: #0f706c; opacity: 0; }
  #earlier-action .s-ready i { width: 1.3em; height: 1.3em; border-radius: 50%; background: #0f8b7f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.3l2.4 2.4L12 5.2' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 70% no-repeat; }

  /* 01 Arrange the test */
  #earlier-action .s1-photo { left: 3%; top: 6%; width: 50%; height: 88%; }
  #earlier-action .s1-bubble { left: 34%; top: 9%; }
  #earlier-action .s1-order { right: 4%; top: 9%; width: 36%; }
  #earlier-action .s1-kit { right: 7%; bottom: 8%; width: 18%; aspect-ratio: 1; border: .3em solid #fff; }
  /* 02 Understand the result */
  #earlier-action .s2-phone { left: 4%; top: 6%; height: 88%; }
  #earlier-action .s2-result { left: 26%; top: 7%; width: 42%; bottom: 7%; }
  #earlier-action .s2-result, #earlier-action .s6-response { display: flex; flex-direction: column; }
  #earlier-action .s2-pro { right: 3.5%; top: 7%; width: 25%; }
  #earlier-action .s2-wear { right: 3.5%; top: 42%; width: 25%; }
  /* 03 Nursing review */
  #earlier-action .s3-brief { left: 4%; top: 12%; width: 50%; }
  #earlier-action .s3-review { right: 4%; top: 15%; width: 37%; }
  #earlier-action .s-facts { display: grid; gap: 0; margin: 1em 0 0; }
  #earlier-action .s-facts > div { display: flex; justify-content: space-between; gap: 1em; padding: .7em 0; border-top: 1px solid #e8f0f4; font-size: .95em; }
  #earlier-action .s-facts dt { color: #5d7884; }
  #earlier-action .s-facts dd { margin: 0; font-weight: 600; text-align: right; }
  #earlier-action .s-facts em { display: block; font-style: normal; font-weight: 500; font-size: .82em; color: #a5503b; }
  /* 04 Doctor's decision */
  #earlier-action .s-emr { inset: 5% 4%; display: flex; flex-direction: column; overflow: hidden; border-radius: 1em; background: #fff; box-shadow: 0 1.6em 3.2em -1.8em #0e3b4766; }
  #earlier-action .s-emr-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 24% 1fr; }
  #earlier-action .s-emr-body section { display: flex; flex-direction: column; gap: 1.1em; padding: 1.4em 1.8em; }
  #earlier-action .s4-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; }
  #earlier-action .s-mini { padding: 1em 1.1em; border-radius: .9em; background: #f3f8fb; border: 1px solid #e0ebef; font: 400 .92em/1.4 var(--text); color: var(--rd-ink-2); }
  #earlier-action .s-mini .s-chart { height: 4.2em; margin: .5em 0 .2em; }
  #earlier-action .s4-rec span:last-child { display: block; margin-top: .4em; }
  #earlier-action .s4-decision { display: flex; align-items: center; gap: 1.1em; padding: 1em 1.2em; border-radius: .9em; background: #0e3b47; color: #fff; }
  #earlier-action .s4-decision img { width: 3.6em; height: 3.6em; border-radius: 50%; object-fit: cover; border: .15em solid #fff; }
  #earlier-action .s4-decision .s-eyebrow { color: #9fe4ec; }
  #earlier-action .s4-choices { display: flex; gap: .6em; margin-top: .55em; }
  #earlier-action .s4-choices span { padding: .45em .9em; border-radius: 99em; border: 1px solid #6c8f99; font: 500 .9em/1 var(--text); color: #fff; }
  /* EMR chrome, shared by steps 4 and 5 */
  #earlier-action .p5-emr-bar { display: flex; align-items: center; gap: 1.2em; padding: .85em 1.5em; background: #0e3b47; color: #fff; font: 500 .9em/1 var(--text); }
  #earlier-action .p5-emr-bar b { font: 500 1.15em/1 var(--display); }
  #earlier-action .p5-emr-bar > span:last-child { margin-left: auto; opacity: .85; }
  #earlier-action .p5-dots { display: flex; gap: .4em; }
  #earlier-action .p5-dots i { width: .55em; height: .55em; border-radius: 50%; background: #29cdde; opacity: .8; }
  #earlier-action .p5-dots i + i { opacity: .45; }
  #earlier-action .s-emr-body nav, #earlier-action .p5-emr-body nav { display: flex; flex-direction: column; gap: .5em; padding: 1.2em 1em; background: #f3f8fb; border-right: 1px solid #e0ebef; font: 500 .88em/1.2 var(--text); color: #64808c; }
  #earlier-action .s-emr-body nav > span, #earlier-action .p5-emr-body nav > span { padding: .55em .8em; border-radius: .6em; }
  #earlier-action nav .is-on { background: #dff2f6; color: #087f91; font-weight: 600; }
  #earlier-action nav .p5-patient { display: flex; align-items: center; gap: .6em; margin-bottom: .5em; padding: 0 0 .9em; border-bottom: 1px solid #e0ebef; border-radius: 0; color: var(--rd-ink); }
  #earlier-action .p5-patient i { display: grid; place-items: center; flex: none; width: 2.2em; height: 2.2em; border-radius: 50%; background: #e2f0f5; font-style: normal; font-weight: 600; color: #087f91; }
  #earlier-action .p5-patient small { display: block; margin-top: .15em; font: 400 .85em/1.2 var(--text); color: #64808c; }
  /* 05 Move the plan forward */
  #earlier-action .p5-auth { inset: 5% 4%; display: flex; flex-direction: column; overflow: hidden; border-radius: 1em; background: #fff; box-shadow: 0 1.6em 3.2em -1.8em #0e3b4766; }
  #earlier-action .p5-emr-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 24% 1fr; }
  #earlier-action .p5-emr-body section { display: flex; flex-direction: column; gap: 1.6em; padding: 1.6em 2em; }
  #earlier-action .p5-emr-body header b { display: block; font: 500 1.6em/1.15 var(--display); color: var(--rd-ink); }
  #earlier-action .p5-emr-body header small { display: block; margin-top: .4em; font: 400 .9em/1.35 var(--text); color: #64808c; }
  #earlier-action .p5-track { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 0; list-style: none; }
  #earlier-action .p5-track li { position: relative; padding-top: 2em; font: 500 1em/1.2 var(--text); color: #9bb2bb; }
  #earlier-action .p5-track li::before { content: ""; position: absolute; left: 0; right: 0; top: .6em; height: .28em; border-radius: .3em; background: linear-gradient(90deg, #0c93b0 0 100%) left / 0 100% no-repeat, #e0ebef; }
  #earlier-action .p5-track li::after { content: ""; position: absolute; left: 0; top: .12em; width: 1.25em; height: 1.25em; border-radius: 50%; background: #fff; border: .2em solid #cfe0e7; box-sizing: border-box; }
  #earlier-action .p5-track li span { color: #0f706c; }
  #earlier-action .p5-attached { padding: 1.2em 1.4em; border-radius: .9em; background: #f3f8fb; border: 1px solid #e0ebef; }
  #earlier-action .p5-attached b { display: block; margin-bottom: .8em; font: 600 .95em/1.2 var(--text); color: var(--rd-ink); }
  #earlier-action .p5-attached ul { display: grid; grid-template-columns: 1fr 1fr; gap: .7em 1.2em; margin: 0; padding: 0; list-style: none; }
  #earlier-action .p5-attached li { display: flex; align-items: center; gap: .55em; font: 400 .9em/1.3 var(--text); color: var(--rd-ink-2); }
  #earlier-action .p5-attached li::before { content: ""; flex: none; width: 1.1em; height: 1.1em; border-radius: .25em; background: #0c93b0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.3l2.4 2.4L12 5.2' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 75% no-repeat; }
  /* 06 Support and reassess */
  #earlier-action .s6-phone { left: 4%; top: 6%; height: 88%; }
  #earlier-action .s6-ask { left: 25%; top: 10%; }
  #earlier-action .s6-reply { left: 27%; top: 30%; }
  #earlier-action .s6-response { right: 4%; top: 7%; width: 44%; bottom: 7%; }
  #earlier-action .s6-response .s-line { stroke: #0f8b7f; }
  #earlier-action .s6-response .s-area { fill: #0f8b7f12; }
  #earlier-action .s6-numbers { margin-top: 1em; font: 400 .95em/1.2 var(--text); color: #5d7884; }
  #earlier-action .s6-numbers b { font: 500 1.5em/1 var(--display); color: #0f706c; }
  #earlier-action .p5-visit { left: 25%; top: 50%; display: flex; align-items: center; gap: .9em; padding: .8em 1em; border-radius: 1em; background: #fff; box-shadow: 0 1.2em 2.4em -1.2em #0e3b4766; border: 1px solid #e0ebef; font: 400 .88em/1.3 var(--text); color: #64808c; }
  #earlier-action .p5-visit b { display: block; font: 600 1em/1.2 var(--text); color: var(--rd-ink); }
  #earlier-action .p5-visit span:not(.p5-cal) > small { display: block; margin-top: .15em; font: 400 .9em/1.3 var(--text); color: #64808c; }
  #earlier-action .p5-visit em { padding: .3em .7em; border-radius: 99em; background: #e0f3ef; color: #0f706c; font-style: normal; font-weight: 600; }
  #earlier-action .p5-cal { display: grid; place-items: center; width: 3.6em; overflow: hidden; border-radius: .6em; border: 1px solid #d6e4ec; text-align: center; }
  #earlier-action .p5-cal small { display: block; width: 100%; padding: .25em 0; background: #087f91; color: #fff; font: 600 .7em/1 var(--text); letter-spacing: .06em; text-transform: uppercase; }
  #earlier-action .p5-cal b { display: block; padding: .25em 0 .35em; font: 600 1.35em/1 var(--display); color: var(--rd-ink); }

  /* Each scene plays when its step comes up */
  @keyframes s-in { from { opacity: 0; transform: translateY(1.2em) scale(.98); } to { opacity: 1; transform: none; } }
  @keyframes s-pop { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
  @keyframes s-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
  @keyframes s-tick { to { color: var(--rd-ink); } }
  @keyframes s-tick-dot { to { background: #0c93b0; border-color: #0c93b0; } }
  @keyframes s-check { to { background: #0f8b7f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.3l2.4 2.4L12 5.2' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 75% no-repeat; border-color: #0f8b7f; } }
  @keyframes s-fade { to { opacity: 1; } }
  @keyframes s-choose { 0%, 60% { background: transparent; border-color: #6c8f99; } 100% { background: #29cdde; border-color: #29cdde; color: #0e3b47; } }
  @keyframes p5-fill { to { background-size: 100% 100%, auto; } }
  #earlier-action [data-step="0"] .p5-scene--0 > *, #earlier-action [data-step="1"] .p5-scene--1 > *, #earlier-action [data-step="2"] .p5-scene--2 > *,
  #earlier-action [data-step="3"] .p5-scene--3 > *, #earlier-action [data-step="4"] .p5-scene--4 > *, #earlier-action [data-step="5"] .p5-scene--5 > * { animation: s-in .7s cubic-bezier(.2, .8, .3, 1) both; }
  #earlier-action .p5-scene > :nth-child(2) { animation-delay: .25s !important; }
  #earlier-action .p5-scene > :nth-child(3) { animation-delay: .5s !important; }
  #earlier-action .p5-scene > :nth-child(4) { animation-delay: .75s !important; }
  #earlier-action .p5-scene > :nth-child(5) { animation-delay: 1s !important; }
  #earlier-action [data-step="0"] .s-track li { animation: s-tick .3s ease forwards; }
  #earlier-action [data-step="0"] .s-track li i { animation: s-check .3s ease forwards; }
  #earlier-action [data-step="0"] .s-track li:nth-child(1), #earlier-action [data-step="0"] .s-track li:nth-child(1) i { animation-delay: 1.2s; }
  #earlier-action [data-step="0"] .s-track li:nth-child(2), #earlier-action [data-step="0"] .s-track li:nth-child(2) i { animation-delay: 2.2s; }
  #earlier-action [data-step="0"] .s-track li:nth-child(3), #earlier-action [data-step="0"] .s-track li:nth-child(3) i { animation-delay: 3.2s; }
  #earlier-action [data-step="1"] .s2-result .s-line, #earlier-action [data-step="3"] .s-mini .s-line, #earlier-action [data-step="5"] .s6-response .s-line { animation: s-draw 1.6s ease .5s both; }
  #earlier-action [data-step="1"] .s2-result .s-dot, #earlier-action [data-step="5"] .s6-response .s-dot { animation: s-pop .4s ease 2s both; }
  #earlier-action [data-step="2"] .s-checks li { animation: s-tick .3s ease forwards; }
  #earlier-action [data-step="2"] .s-checks li::before { animation: s-check .3s ease forwards; }
  #earlier-action [data-step="2"] .s-checks li:nth-child(1), #earlier-action [data-step="2"] .s-checks li:nth-child(1)::before { animation-delay: 1s; }
  #earlier-action [data-step="2"] .s-checks li:nth-child(2), #earlier-action [data-step="2"] .s-checks li:nth-child(2)::before { animation-delay: 1.8s; }
  #earlier-action [data-step="2"] .s-checks li:nth-child(3), #earlier-action [data-step="2"] .s-checks li:nth-child(3)::before { animation-delay: 2.6s; }
  #earlier-action [data-step="2"] .s-checks li:nth-child(4), #earlier-action [data-step="2"] .s-checks li:nth-child(4)::before { animation-delay: 3.4s; }
  #earlier-action [data-step="2"] .s-ready { animation: s-fade .4s ease 4.1s forwards; }
  #earlier-action [data-step="3"] .s4-choices .is-chosen { animation: s-choose 3.2s ease forwards; }
  #earlier-action [data-step="4"] .p5-track li { animation: s-tick .3s ease forwards; }
  #earlier-action [data-step="4"] .p5-track li::before { animation: p5-fill .9s ease forwards; }
  #earlier-action [data-step="4"] .p5-track li::after { animation: s-tick-dot .3s ease forwards; }
  #earlier-action [data-step="4"] .p5-track li:nth-child(2), #earlier-action [data-step="4"] .p5-track li:nth-child(2)::before, #earlier-action [data-step="4"] .p5-track li:nth-child(2)::after { animation-delay: 1.2s; }
  #earlier-action [data-step="4"] .p5-track li:nth-child(3), #earlier-action [data-step="4"] .p5-track li:nth-child(3)::before, #earlier-action [data-step="4"] .p5-track li:nth-child(3)::after { animation-delay: 2.4s; }
}

/* Panel 5 on tall windows: steps in a row, the scene full width, the step's explanation beneath */
@media (min-width: 901px) and (max-aspect-ratio: 4/3) {
  #earlier-action .workflow-scene { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto; height: auto; row-gap: clamp(18px, 2.4svh, 36px); }
  #earlier-action .workflow-rail { grid-column: 1 / -1; grid-row: 1; flex-direction: row; gap: 18px; }
  #earlier-action .workflow-rail [data-scene-step] { flex: 1; border-bottom-width: 2px; }
  #earlier-action .p5-screen { grid-column: 1 / -1; grid-row: 2; container-type: inline-size; }
  #earlier-action .p5-frame { width: 100%; }
  #earlier-action .workflow-deck { grid-column: 1; grid-row: 3; }
  #earlier-action .workflow-explanation { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: 32px; align-items: start; padding-top: 0; }
  #earlier-action .workflow-explanation h3 { margin: 0; }
  #earlier-action .workflow-scene .scene-controls { grid-column: 2; grid-row: 3; align-self: end; max-width: 30ch; }
}
@media (min-width: 901px) and (max-height: 820px) {
  #earlier-action { --p5-step: 15px; --p5-title: 22px; --p5-body: 15px; }
  #earlier-action .workflow-scene { height: clamp(380px, calc(100svh - 330px), 600px); }
  #earlier-action .workflow-rail [data-scene-step] { padding: 6px 0; }
}
@media (max-width: 0px) {
  #earlier-action .p5-scene *, #earlier-action .p5-scene *::before, #earlier-action .p5-scene *::after { animation-duration: 0s !important; animation-delay: 0s !important; }
}
/* Panel 4 on tall screens: the graphic grows to fill the height instead of stopping at 720px; the middle stays tight around UBi */
@media (min-width: 901px) and (min-height: 1150px) {
  #whole-picture .biology-capture .bc-stage { height: clamp(720px, calc(100svh - 560px), 1100px); grid-template-columns: minmax(420px, 1.25fr) minmax(200px, .55fr) minmax(340px, 1fr); gap: clamp(20px, 2vw, 40px); }
  #whole-picture .biology-capture .bc-source-name { font-size: 18px; }
  #whole-picture .biology-capture .bc-signal-reading { font-size: 24px; }
  #whole-picture .biology-capture .bc-ubi-seat { width: min(100%, 320px); height: 360px; }
  #whole-picture .biology-capture .bc-hub::after { top: 360px; }
  #whole-picture .biology-capture .bc-score { max-width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-evenly; padding: 32px; }
  #whole-picture .biology-capture .bc-score h3 { font-size: 28px; }
  #whole-picture .biology-capture .bc-score-current { width: 260px; height: 168px; }
  #whole-picture .biology-capture .bc-score-number { inset: 62px 0 auto; }
  #whole-picture .biology-capture .bc-score-value { font-size: 64px; }
  #whole-picture .biology-capture .bc-score-port { left: 26px; top: 131px; }
  #whole-picture .biology-capture .bc-score-plot { height: clamp(110px, 16svh, 240px); }
  #whole-picture .biology-capture .bc-remission-evidence > div { font-size: 15px; }
}

/* Panel 3: every phone screen gets the same iPhone status bar and notch (the call recording has none, the stool screen is from Android) */
#everyday .app-device { position: relative; overflow: hidden; }
#everyday .app-reveal[data-topic="health"] .app-device::after, #everyday .app-reveal[data-topic="stool"] .app-device::after { content: ""; position: absolute; z-index: 3; left: 0; right: 0; top: 0; padding-top: 11%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 44'%3E%3Ctext x='44' y='29' font-family='-apple-system,Segoe UI,Figtree,sans-serif' font-size='15' font-weight='600' fill='%23000'%3E9:41%3C/text%3E%3Cg fill='%23000'%3E%3Crect x='296' y='22' width='3' height='6' rx='1'/%3E%3Crect x='301' y='19' width='3' height='9' rx='1'/%3E%3Crect x='306' y='16' width='3' height='12' rx='1'/%3E%3Crect x='311' y='13' width='3' height='15' rx='1'/%3E%3Cpath d='M326 18.5a10 10 0 0 1 14 0l-1.6 1.7a7.6 7.6 0 0 0-10.8 0zM329.2 21.8a5.6 5.6 0 0 1 7.6 0L333 26z'/%3E%3Crect x='348' y='14' width='24' height='13' rx='3.5' fill='none' stroke='%23000' stroke-width='1.3' opacity='.5'/%3E%3Crect x='350' y='16' width='18' height='9' rx='2'/%3E%3Crect x='373.5' y='18.5' width='1.8' height='4' rx='.9' opacity='.5'/%3E%3C/g%3E%3C/svg%3E") top center / 100% auto no-repeat; pointer-events: none; }
#everyday .app-reveal[data-topic="stool"] .app-device::after { padding-top: 11.5%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 44'%3E%3Ctext x='44' y='29' font-family='-apple-system,Segoe UI,Figtree,sans-serif' font-size='15' font-weight='600' fill='%23000'%3E9:41%3C/text%3E%3Cg fill='%23000'%3E%3Crect x='296' y='22' width='3' height='6' rx='1'/%3E%3Crect x='301' y='19' width='3' height='9' rx='1'/%3E%3Crect x='306' y='16' width='3' height='12' rx='1'/%3E%3Crect x='311' y='13' width='3' height='15' rx='1'/%3E%3Cpath d='M326 18.5a10 10 0 0 1 14 0l-1.6 1.7a7.6 7.6 0 0 0-10.8 0zM329.2 21.8a5.6 5.6 0 0 1 7.6 0L333 26z'/%3E%3Crect x='348' y='14' width='24' height='13' rx='3.5' fill='none' stroke='%23000' stroke-width='1.3' opacity='.5'/%3E%3Crect x='350' y='16' width='18' height='9' rx='2'/%3E%3Crect x='373.5' y='18.5' width='1.8' height='4' rx='.9' opacity='.5'/%3E%3C/g%3E%3C/svg%3E") top center / 100% auto no-repeat, linear-gradient(180deg, #86cff1, #9ad6f4) top center / 100% 100% no-repeat; }

/* No dev-style controls on the page: playback and motion controls stay reachable by keyboard and appear only when focused */
.motion-toggle:not(:focus-visible), #everyday #replay-reveal:not(:focus-visible), #everyday #app-play:not(:focus-visible),
#whole-picture .bc-controls button:not(:focus-visible), .scene-play:not(:focus-visible) {
  position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important;
}
#everyday .app-media-controls:not(:focus-within) { min-height: 0; }
#earlier-action .s-big--wear { color: #3f6fb0; }
#earlier-action .s6-response .s-target-label { left: auto; right: .6em; }

/* Panel 6: the tab row only repeated the list above it; the list still highlights each role in turn */
@media (min-width: 901px) {
  #care-team .oversight-scene .scene-controls { display: none; }
}
@media (min-width: 901px) and (max-height: 960px) {
  #care-team .care-portrait > img { height: clamp(170px, calc(100svh - 640px), 270px); aspect-ratio: auto; object-fit: cover; object-position: center 35%; }
  #care-team .voice-logos { margin-top: 6px; }
  #care-team .voice-quotes blockquote { font-size: 18px; }
}
@media (min-width: 901px) and (min-height: 1150px) {
  #care-team .team-story { row-gap: clamp(20px, 2.6svh, 44px); }
  #care-team .care-portrait > img { height: clamp(420px, 40svh, 760px); aspect-ratio: auto; object-fit: cover; }
  #care-team .portrait-note { font-size: 20px; }
  #care-team .voice-quotes blockquote { font-size: clamp(22px, 1.9svh, 30px); line-height: 1.35; }
  #care-team .voice-quotes p { font-size: 18px; }
  #care-team .team-narrative > p { font-size: clamp(20px, 1.6svh, 24px); }
  #care-team .responsibility-track { gap: clamp(22px, 2.6svh, 40px); }
  #care-team .responsibility-track h3 { font-size: clamp(24px, 2svh, 32px); }
  #care-team .responsibility-track p { font-size: clamp(17px, 1.4svh, 21px); }
  #care-team .voice-logos { margin-top: clamp(24px, 4svh, 64px); }
  #care-team .voice-logos img { transform: scale(1.25); }
}
@media (min-width: 901px) and (max-height: 760px) {
  #care-team .team-narrative > p { font-size: 16px; line-height: 1.4; }
  #care-team h2 { font-size: 34px; }
  #care-team .responsibility-track { gap: 6px; }
  #care-team .responsibility-track h3 { font-size: 18px; margin-bottom: 2px; }
  #care-team .responsibility-track p { font-size: 15px; margin-top: 0; }
  #care-team .care-portrait > img { height: 160px; }
}

/* Panels 8-10 on tall windows: the same layouts, larger, centred in the screen height */
@media (min-width: 901px) and (min-height: 1150px) {
  #practices, #questions, #lets-meet { display: flex; flex-direction: column; justify-content: center; min-height: 100svh; box-sizing: border-box; }
  #practices > .page-width, #questions > .page-width, #lets-meet > .page-width { zoom: 1.35; }
  #lets-meet { padding-bottom: 0; }
  #lets-meet .site-footer, #lets-meet ~ .site-footer { zoom: 1; }
}

/* The page ends on the footer; the scroll photograph never shows below it */

/* The page ends on the footer: the 70px kept below it for the page dots is filled with the footer colour, not the scroll photograph */
.site-footer { box-shadow: 0 70px 0 var(--ink, #0e3b47); }

/* Hero, Alex 10-14: Codex's e8e80ab hero is the layout ("overall the best"); it only needed better text styling and the
   doctors' institutions. Layout, film and UBi are Codex's; this block styles the type and adds the logo row. */
.hero .hero-callout { color: #087d96; font-weight: 700; }
.hero-promise strong { font-weight: 650; color: #082e39; }
.hero-proof { display: flex; flex-direction: column; gap: 8px; min-width: 0; max-width: 100%; }
.hero-proof-label { font: 700 13px/1.2 var(--text); letter-spacing: .08em; text-transform: uppercase; color: #557580; }
.hero-proof-track { display: flex; overflow: hidden; min-width: 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.hero-proof-logos { --logo-h: 28px; flex: none; display: flex; align-items: center; gap: calc(var(--logo-h) * 1.3); margin: 0; padding: 0 calc(var(--logo-h) * 1.3) 0 0; list-style: none; animation: hero-proof-slide 34s linear infinite; }
.hero-proof:hover .hero-proof-logos { animation-play-state: paused; }
@keyframes hero-proof-slide { to { transform: translateX(-100%); } }
@media (max-width: 0px) {
  .hero-proof-logos { animation: none; flex-wrap: wrap; }
  .hero-proof-logos[aria-hidden] { display: none; }
  .hero-proof-track { -webkit-mask-image: none; mask-image: none; }
}
.hero-proof-logos li { display: flex; flex: none; align-items: center; }
.hero-proof-logos img { display: block; width: auto; height: var(--logo-h); }
.hero-proof-logos .lg-harvard { height: calc(var(--logo-h) * 1.07); }
.hero-proof-logos .lg-stanford { height: calc(var(--logo-h) * .96); }
.hero-proof-logos .lg-mgh-lockup { gap: calc(var(--logo-h) * .28); }
.hero-proof-logos .lg-mgh-lockup img { height: calc(var(--logo-h) * 1.2); }
.hero-proof-logos .lg-mgh-lockup span { font: 600 calc(var(--logo-h) * .43)/1.12 Georgia, 'Times New Roman', serif; letter-spacing: .06em; text-transform: uppercase; color: #0b5c8f; white-space: nowrap; }
@media (min-width: 901px) {
  .hero .hero-callout { white-space: nowrap; }
  .hero-copy { max-width: none; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; }
  #hero-title, .hero-promise { grid-column: 1 / -1; }
  #hero-title { max-width: min(100%, 1080px); }
  .hero-greeting { font: 700 clamp(56px, min(3.9vw, 6.6svh), 84px)/1.02 var(--display); letter-spacing: -.045em; color: #082e39; }
  .hero-positioning { margin-top: .3em; font: 500 clamp(24px, min(1.6vw, 2.75svh), 36px)/1.2 var(--display); letter-spacing: -.022em; color: #082e39; }
  .hero-promise { margin-top: .75em; max-width: 60ch; font: 400 clamp(17px, min(.95vw, 1.66svh), 22px)/1.45 var(--text); color: #34515c; }
  .hero .actions { grid-column: 1; margin-top: clamp(16px, 2svh, 26px); flex-wrap: nowrap; gap: 26px; }
  .hero .actions .button { font: 600 clamp(15px, .85vw, 18px)/1.2 var(--text); padding: .85em 1.5em; white-space: nowrap; }
  .hero .actions #watch-intro { font: 500 clamp(15px, .85vw, 18px)/1.3 var(--text); white-space: nowrap; }
  .hero-proof { grid-column: 2; justify-self: start; width: clamp(400px, 27vw, 700px); margin: clamp(16px, 2svh, 26px) 0 0 clamp(18px, 1.6vw, 40px); padding-left: clamp(18px, 1.6vw, 34px); border-left: 1px solid #0e3b4726; }
  .hero-proof-logos { --logo-h: clamp(24px, 1.2vw, 30px); }
}
@media (min-width: 901px) and (max-height: 900px) {
  /* Codex's laptop layout puts the buttons beside the copy in UBi's column; the logos go under the description instead */
  .hero-copy { grid-template-columns: minmax(0, 1fr) var(--hero-character-width); align-items: start; }
  #hero-title { grid-column: 1; grid-row: 1; }
  .hero-greeting { font-size: 46px; }
  .hero-positioning { font-size: 21px; margin-top: 8px; }
  .hero-promise { font-size: 16px; line-height: 1.4; margin-top: 10px; }
  .hero-promise { grid-column: 1; grid-row: 2; }
  .hero .actions { grid-column: 2; grid-row: 1 / 4; margin-top: 12px; }
  .hero-proof { grid-column: 1; grid-row: 3; flex-direction: row; align-items: center; gap: 16px; margin: 10px 0 0; padding: 0; border: 0; }
  .hero-proof-label { flex: none; max-width: 9em; }
  .hero-proof { width: min(100%, 620px); }
  .hero-proof-logos { --logo-h: 22px; }
}
@media (max-width: 900px) {
  .hero-copy { min-width: 0; }
  .hero-proof { margin-top: 18px; width: 100%; }
  .hero-proof-track { width: 100%; }
  .hero-proof-label { font-size: 12px; }
  .hero-proof-logos { --logo-h: 22px; }
}

/* Panel 2, Alex 10-14 ("crowded to the margins, too close to the top and edges"): a 1760px frame centred on wide
   screens (real side margins), clear room under the nav and above the page dots */
@media (min-width: 901px) and (min-height: 821px) {
  #care-gap .response-story.p2 { inset: clamp(104px, 12svh, 160px) max(5.5%, calc((100% - 1760px) / 2)) clamp(88px, 9.5svh, 130px); }
}
@media (min-width: 1700px) and (min-height: 821px) {
  /* the care-plan card keeps its three chips on one row */
  #care-gap .p2-stage { grid-template-columns: minmax(0, .82fr) clamp(34px, 2.4vw, 48px) minmax(0, 1.2fr) clamp(34px, 2.4vw, 48px) minmax(0, 1fr); }
  #care-gap .p2-chips span { padding: .45em .65em; }
}
@media (min-width: 901px) and (max-height: 900px) {
  /* laptop heights: the three evidence rows fit inside card 3 */
  #care-gap .p2-stat { padding: 5px 0; }
  #care-gap .p2-gi-head { margin-bottom: 2px; }
  #care-gap .p2-stat strong { font-size: min(var(--p2-num), 42px); }
  #care-gap .p2-stat p small { margin-top: 2px; }
}

/* Backgrounds, Alex 10-14: the whole photograph shows (no zoom, no broad fades); the text sits on one frosted panel
   per text group, opaque behind the letters, the same glass as panel 2's cards. */
@media (min-width: 901px) {
  .hero .hero-wash { background: linear-gradient(180deg, #ffffff8c 0, #ffffff00 11%); }
  .hero-copy, #care-gap .p2-head { position: relative; isolation: isolate; }
  .hero-copy { justify-self: start; width: var(--hero-film-w, 100%); }
  .hero-proof { width: auto; min-width: 0; justify-self: stretch; }
  .hero-copy::before, #care-gap .p2-head::before {
    content: ""; position: absolute; z-index: -1; inset: -14px -36px -18px -36px; border-radius: 28px;
    background: #fffffff0; border: 1px solid #ffffff; box-shadow: 0 24px 60px -34px #0e3b4766; pointer-events: none;
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  }
  #care-gap .p2-head { width: fit-content; }
  #care-gap .p2-head::before { inset: -18px -36px -16px -36px; background: #f6f9fff2; }
  #care-gap .response-story.p2 { gap: clamp(30px, 3.2svh, 48px); }
  #care-gap .response-wash { background: linear-gradient(90deg, #eff4ff8c 0%, #eff4ff40 30%, #eff4ff00 48%); }
}
@media (min-width: 901px) and (min-height: 901px) {
  .hero-layout { row-gap: 34px; }
}
@media (min-width: 901px) and (max-height: 900px) {
  /* laptop: Codex puts the buttons in UBi's column; the panel covers the text column only */
  .hero-copy { width: auto; }
  .hero-copy::before { right: calc(var(--hero-character-width) + 12px); }
}

/* Panel 2 card 3, Alex 10-14 ("not obvious where that data is coming from, what is causing those improvements, not covering
   the drop in cost of care per patient"): one line on what drives the results, each figure with its cause and source,
   and the per-patient cost of care */
#care-gap .p2-why { margin: clamp(6px, 1svh, 14px) 0 0; font: 500 var(--p2-body, 16px)/1.4 var(--text); color: var(--rd-ink-2); }
#care-gap .p2-stat p small { display: block; margin-top: 4px; font: 500 var(--p2-small, 15px)/1.3 var(--text); color: var(--rd-muted); }
#care-gap .p2-stat p small a { color: var(--rd-teal); text-decoration: underline; text-underline-offset: 3px; }
#care-gap .p2-stat--cost { border-top: 2px solid #0e3b4730; }
#care-gap .p2-stat--cost strong { color: var(--rd-ink); }
#care-gap .p2-upto { display: block; margin-bottom: .12em; font: 700 max(14px, .24em)/1 var(--text); letter-spacing: .08em; text-transform: uppercase; text-align: right; color: var(--rd-muted); }
#care-gap .p2-stat p { font-size: min(var(--p2-label, 18px), 20px); line-height: 1.22; }
#care-gap .p2-stat p small { margin-top: 3px; }
@media (min-width: 901px) and (max-height: 900px) {
  #care-gap .p2-stat p { font-size: 16px; }
  #care-gap .p2-stat p small { font-size: 14px; margin-top: 2px; }
  #care-gap .p2-stat strong { font-size: 34px; }
  #care-gap .p2-upto { font-size: 12px; }
}
@media (min-width: 901px) and (min-height: 901px) and (max-height: 1050px) {
  #care-gap .p2-stat { padding: 6px 0; }
  #care-gap .p2-stat p { font-size: 17px; }
  #care-gap .p2-stat p small { font-size: 15px; }
  #care-gap .p2-stat strong { font-size: min(var(--p2-num), 44px); }
}
@media (min-width: 901px) and (max-width: 1699px) and (min-height: 901px) {
  #care-gap .p2-chips span { font-size: 14px; padding: .4em .6em; }
}
@media (min-width: 901px) and (max-height: 820px) {
  /* short laptops: the compact panel 2 spacing, and card 3's three rows sized to fit */
  #care-gap .response-story.p2 { gap: 22px; }
  #care-gap .p2-stat { padding: 3px 0; }
  #care-gap .p2-stat p { font-size: 15px; line-height: 1.18; }
  #care-gap .p2-stat p small { font-size: 14px; margin-top: 1px; }
  #care-gap .p2-stat strong { font-size: 30px; }
  #care-gap .p2-gi-head img { width: 44px; height: 44px; }
}
@media (min-width: 901px) and (max-height: 1050px) {
  #care-gap .p2-trend { min-height: 72px; }
  #care-gap .p2-trend svg { min-height: 52px; }
}
@media (min-width: 901px) and (max-height: 760px) {
  #care-gap .p2-trend { min-height: 58px; }
  #care-gap .p2-trend svg { min-height: 40px; }
}
@media (min-width: 901px) and (min-height: 1051px) and (max-height: 1250px) {
  #care-gap .p2-stat { padding-block: clamp(8px, 1.2svh, 14px); }
}

/* Panel 4, Alex 10-14 ("everything is too separated out ... it used to be more centralized and looked better, no tiny
   text"): the component's own demo keeps the signals, UBi and the remission card in one centred column; the homepage
   now does the same on wide screens, and no label is smaller than 14px on desktop (13px on short laptops). */
@media (min-width: 1700px) {
  #whole-picture > .page-width { width: min(1600px, 88vw); margin-inline: auto; }
}
@media (min-width: 901px) {
  #whole-picture .biology-capture .bc-source { grid-template-columns: clamp(32px, 4.5svh, 56px) 150px minmax(0, 1fr); }
  #whole-picture .biology-capture .bc-source-cadence,
  #whole-picture .biology-capture .bc-reading-before,
  #whole-picture .biology-capture .bc-signal-reading small,
  #whole-picture .biology-capture .bc-selected-timing,
  #whole-picture .biology-capture .bc-score-label,
  #whole-picture .biology-capture .bc-updated-source,
  #whole-picture .biology-capture .bc-remission-evidence small,
  #whole-picture .biology-capture .bc-control-area small,
  #whole-picture .biology-capture .bc-treatment-month,
  #whole-picture .biology-capture .bc-time-axis,
  #whole-picture .biology-capture .bc-score-axis { font-size: 14px; line-height: 1.3; }
  #whole-picture .biology-capture .bc-time-axis { bottom: -20px; }
  #whole-picture .biology-capture .bc-selected-method, #whole-picture .biology-capture .bc-score-number > span { font-size: 15px; }
  #whole-picture .biology-capture .bc-treatment-label, #whole-picture .biology-capture .bc-score-update, #whole-picture .biology-capture .bc-remission-evidence > div { font-size: 16px; }
  #whole-picture .biology-capture .bc-clinical-state { font-size: 16px; max-width: 28ch; }
  #whole-picture .biology-capture .bc-copy p { font-size: 18px; }
  #whole-picture .chapter-heading .chapter-lead { font-size: clamp(17px, 1vw, 21px); }
}
@media (min-width: 901px) and (max-height: 900px) {
  #whole-picture .biology-capture .bc-source { grid-template-columns: 32px 130px minmax(0, 1fr); }
  #whole-picture .biology-capture .bc-source-cadence,
  #whole-picture .biology-capture .bc-reading-before,
  #whole-picture .biology-capture .bc-signal-reading small,
  #whole-picture .biology-capture .bc-selected-timing,
  #whole-picture .biology-capture .bc-score-label,
  #whole-picture .biology-capture .bc-updated-source,
  #whole-picture .biology-capture .bc-remission-evidence small,
  #whole-picture .biology-capture .bc-control-area small,
  #whole-picture .biology-capture .bc-treatment-month,
  #whole-picture .biology-capture .bc-time-axis,
  #whole-picture .biology-capture .bc-score-axis,
  #whole-picture .biology-capture .bc-score h4 { font-size: 13px; }
  #whole-picture .biology-capture .bc-selected-method, #whole-picture .biology-capture .bc-treatment-label,
  #whole-picture .biology-capture .bc-clinical-state, #whole-picture .biology-capture .bc-remission-evidence > div { font-size: 14px; }
  #whole-picture .biology-capture .bc-signal-reading { font-size: 20px; }
}
@media (min-width: 901px) {
  /* the month labels under the chart keep clear of the selected-signal line below them */
  #whole-picture .biology-capture .bc-copy { margin-top: 12px; }
}
@media (min-width: 901px) and (max-height: 900px) {
  #whole-picture .biology-capture .bc-time-axis { bottom: -17px; }
  #whole-picture .biology-capture .bc-copy { margin-top: 10px; }
}
@media (min-width: 901px) and (min-height: 901px) and (max-height: 1149px) {
  #whole-picture .biology-capture .bc-stage { height: calc(100svh - 545px); }
}
@media (min-width: 901px) and (min-height: 1150px) {
  #whole-picture .biology-capture .bc-stage { height: clamp(640px, calc(100svh - 570px), 1100px); }
}
@media (min-width: 901px) and (max-height: 900px) {
  #whole-picture .biology-capture .bc-stage { height: clamp(260px, calc(100svh - 500px), 440px); }
}
@media (min-width: 901px) and (min-height: 1150px) {
  /* the remission card's chart gives up height first so its closing line stays inside the card */
  #whole-picture .biology-capture .bc-score-plot { height: clamp(110px, calc(100svh - 1080px), 240px); }
}
@media (min-width: 901px) {
  /* card 3 carries the evidence and how UBi gets there, so it takes the widest share of the row */
  #care-gap .p2-stage { grid-template-columns: minmax(0, .74fr) clamp(30px, 2.2vw, 44px) minmax(0, 1.08fr) clamp(30px, 2.2vw, 44px) minmax(0, 1.32fr); }
  #care-gap .p2-why { font-size: min(var(--p2-body, 16px), 19px); }
}
@media (min-width: 901px) {
  #care-gap .p2-stat p { font-size: min(var(--p2-label, 18px), 18px); }
  #care-gap .p2-stat p small { font-size: min(var(--p2-small, 15px), 16px); }
  #care-gap .p2-stat { padding-block: clamp(5px, .9svh, 12px); }
}
@media (min-width: 901px) and (max-width: 2199px) and (min-height: 901px) {
  #care-gap .p2-chips span { font-size: 14px; padding: .4em .6em; }
}
@media (min-width: 901px) and (min-height: 901px) and (max-height: 1100px) {
  #care-gap .p2-why { font-size: 16px; line-height: 1.35; margin-top: 6px; }
  #care-gap .p2-stat p { font-size: 16px; }
  #care-gap .p2-stat p small { font-size: 14px; }
  #care-gap .p2-stat strong { font-size: min(var(--p2-num), 40px); }
  #care-gap .p2-stat { padding-block: 5px; }
}
@media (min-width: 901px) and (max-height: 900px) {
  #care-gap .p2-why { font-size: 15px; line-height: 1.32; margin-top: 4px; }
  #care-gap .p2-stat p { font-size: 15px; line-height: 1.2; }
  #care-gap .p2-stat p small { font-size: 14px; margin-top: 1px; }
  #care-gap .p2-stat strong { font-size: 30px; }
  #care-gap .p2-upto { font-size: 11px; }
  #care-gap .p2-stat { padding-block: 3px; }
  #care-gap .p2-gi-head img { width: 44px; height: 44px; }
  #care-gap .p2-card--gi h3 { font-size: min(var(--p2-h3, 20px), 20px); }
}
@media (min-width: 901px) and (max-width: 1699px) and (min-height: 901px) and (max-height: 1050px) {
  #care-gap .p2-trend { min-height: 56px; }
  #care-gap .p2-trend svg { min-height: 38px; }
}
@media (min-width: 901px) and (max-height: 760px) {
  #care-gap .p2-why { font-size: 14px; line-height: 1.28; margin-top: 2px; }
  #care-gap .p2-stat p { font-size: 14px; line-height: 1.16; }
  #care-gap .p2-stat strong { font-size: 26px; }
  #care-gap .p2-card--gi h3 { font-size: 18px; }
  #care-gap .p2-card--gi .p2-eyebrow { margin-bottom: 2px; }
  #care-gap .p2-card { padding-block: 12px; }
}
@media (min-width: 901px) and (max-height: 760px) {
  #care-gap .p2-gi-head img { display: none; }
  #care-gap .p2-status { padding-top: 6px; }
  #care-gap .p2-plan-ui { gap: 4px; padding-block: 8px; }
}
@media (min-width: 901px) and (max-height: 760px) {
  #care-gap .p2-stage { grid-template-columns: minmax(0, .66fr) 26px minmax(0, 1fr) 26px minmax(0, 1.42fr); }
}

/* Panel 2, Alex 10-15 ("crunched the middle stuff too much, you have more length to use"): a 2000px frame on wide screens
   (still ~280px margins at 2560) and the care-plan card back to a full share of the row */
@media (min-width: 901px) and (min-height: 821px) {
  #care-gap .response-story.p2 { inset: clamp(104px, 12svh, 160px) max(5.5%, calc((100% - 2000px) / 2)) clamp(88px, 9.5svh, 130px); }
}
@media (min-width: 901px) and (min-height: 761px) {
  #care-gap .p2-stage { grid-template-columns: minmax(0, .74fr) clamp(30px, 2.2vw, 44px) minmax(0, 1.22fr) clamp(30px, 2.2vw, 44px) minmax(0, 1.3fr); }
}
@media (min-width: 2200px) and (min-height: 901px) {
  #care-gap .p2-chips span { font-size: var(--p2-small); padding: .45em .7em; }
}
@media (min-width: 2200px) and (min-height: 1150px) {
  #care-gap .p2-stat p { font-size: 20px; }
  #care-gap .p2-stat p small { font-size: 17px; }
  #care-gap .p2-why { font-size: 20px; }
}
#everyday .app-topics .nowrap { white-space: nowrap; }

/* Panel 2, Alex 10-15: the intro paragraph a step smaller so the three cards get more height; the "Nurse reviewed" row is gone
   and the calprotectin chart takes the room */
@media (min-width: 901px) {
  #care-gap { --p2-lead: clamp(15px, min(1.1vw, 1.7svh), 21px); }
  #care-gap .p2-head > p { font-size: var(--p2-lead); }
  #care-gap .p2-trend { min-height: clamp(110px, 16svh, 260px); }
}
@media (min-width: 901px) and (max-height: 900px) {
  #care-gap .p2-trend { min-height: clamp(80px, 12svh, 120px); }
}

/* Panel 2 card 2, Alex 10-15: after the intervention the chart calls out clinical remission (symptoms resolve) and then
   objective remission (calprotectin back inside her target); the middle card is bigger */
#care-gap .p2-remission { stroke-width: 1.4; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
#care-gap .p2-remission--clinical { stroke: #c48a2a; }
#care-gap .p2-remission--objective { stroke: #19a57a; }
#care-gap .p2-remission-label { position: absolute; z-index: 1; transform: translateX(-50%); padding: 2px 8px; border-radius: 999px; background: #fff; white-space: nowrap; font: 500 var(--p2-small, 14px)/1.3 var(--text); }
#care-gap .p2-remission-label--clinical { left: 56.25%; top: calc(var(--p2-small, 14px) * 1.5 + 4px); border: 1px solid #ecd3a6; color: #8a5e12; }
#care-gap .p2-remission-label--objective { left: 78.1%; top: calc(var(--p2-small, 14px) * 3.2 + 8px); border: 1px solid #b5e2cf; color: #0b6e50; }
@media (min-width: 901px) and (min-height: 761px) {
  #care-gap .p2-stage { grid-template-columns: minmax(0, .66fr) clamp(30px, 2.2vw, 44px) minmax(0, 1.42fr) clamp(30px, 2.2vw, 44px) minmax(0, 1.2fr); }
}
@media (min-width: 901px) and (max-width: 1399px) and (min-height: 761px) {
  #care-gap .p2-stage { grid-template-columns: minmax(0, .6fr) clamp(26px, 2vw, 36px) minmax(0, 1.3fr) clamp(26px, 2vw, 36px) minmax(0, 1.3fr); }
}
#care-gap .p2-remission-label--clinical { top: 0; }
#care-gap .p2-remission-label--objective { top: calc(var(--p2-small, 14px) * 1.5 + 8px); }
@media (min-width: 901px) and (max-height: 760px) {
  #care-gap .p2-stage { grid-template-columns: minmax(0, .52fr) 20px minmax(0, 1.2fr) 20px minmax(0, 1.48fr); }
}
#care-gap .p2-card p.p2-lead-in { margin: clamp(8px, 1.2svh, 14px) 0 2px; font: 650 var(--p2-body, 16px)/1.3 var(--text); color: var(--rd-teal); }
@media (min-width: 901px) and (max-height: 760px) {
  #care-gap .p2-why { line-height: 1.24; }
  #care-gap .p2-stat p { line-height: 1.15; }
  #care-gap .p2-stat p small { margin-top: 0; }
}
#care-gap .p2-stat--cost p small { white-space: nowrap; }
@media (min-width: 901px) and (max-width: 1799px) {
  #care-gap .p2-stat--cost p small { white-space: normal; }
}
@media (min-width: 901px) {
  #care-gap .p2-stat--cost { padding-bottom: 0; }
  #care-gap .p2-card--gi .p2-why { margin-top: 4px; }
  #care-gap .p2-card p.p2-lead-in { margin-top: 6px; }
}
@media (min-width: 901px) and (max-height: 1250px) {
  #care-gap .p2-card--gi { padding-bottom: 14px; }
}
@media (min-width: 901px) and (max-width: 1699px) {
  #care-gap .p2-card--gi .p2-why { font-size: 15px; line-height: 1.32; }
  #care-gap .p2-stat p small { font-size: 14px; }
  #care-gap .p2-stat { padding-block: 3px; }
}

/* Panel 2, Alex 10-15: card 1 and its phone back to their size before 0e8346d; the middle card keeps its new size; card 3 gives up the room */
@media (min-width: 901px) {
  #care-gap .p2-stage { grid-template-columns: minmax(0, .74fr) clamp(30px, 2.2vw, 44px) minmax(0, 1.41fr) clamp(30px, 2.2vw, 44px) minmax(0, 1.11fr) !important; }
}
@media (min-width: 901px) and (max-height: 800px) {
  #care-gap .p2-stage { grid-template-columns: minmax(0, .74fr) clamp(26px, 2vw, 36px) minmax(0, 1.26fr) clamp(26px, 2vw, 36px) minmax(0, 1.26fr) !important; }
}

/* Panel 2 card 2 chart, Alex 10-15 ("make it visually make sense"): same line and target band; each moment is a dot on the
   line with its label beside it, at the point it describes; no chips, no floating pills, no vertical rules */
#care-gap .p2-trend { display: flex; flex-direction: column; }
#care-gap .p2-trend .p2-trend-name { position: static; display: block; margin-bottom: 6px; }
#care-gap .p2-trend-name em { font-style: normal; font-weight: 500; color: var(--rd-muted); }
#care-gap .p2-plot { position: relative; flex: 1; min-height: 80px; }
#care-gap .p2-trend .p2-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; }
#care-gap .p2-plot .p2-target-label { position: absolute; left: 8px; right: auto; bottom: 6px; }
#care-gap .p2-pt { position: absolute; z-index: 2; left: var(--x); top: var(--y); width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; border: 3.5px solid #4d56a3; }
#care-gap .p2-pt--clinical { border-color: #c48a2a; }
#care-gap .p2-pt--objective { border-color: #19a57a; }
#care-gap .p2-note { position: absolute; z-index: 2; white-space: nowrap; font: 500 var(--p2-small, 15px)/1.25 var(--text); color: var(--rd-ink-2); }
#care-gap .p2-note strong { display: block; font-weight: 700; }
#care-gap .p2-note--adjust { right: calc(100% - var(--x) + 14px); top: var(--y); transform: translateY(-50%); }
#care-gap .p2-note--adjust strong { color: #4d56a3; }
#care-gap .p2-note--clinical { left: calc(var(--x) + 12px); bottom: calc(100% - var(--y) + 4px); }
#care-gap .p2-note--clinical strong { color: #8a5e12; }
#care-gap .p2-note--objective { left: calc(var(--x) + 12px); top: calc(var(--y) + 6px); }
#care-gap .p2-note--objective strong { color: #0b6e50; }
@media (min-width: 901px) and (max-height: 900px) {
  #care-gap .p2-note { font-size: 14px; line-height: 1.15; }
  #care-gap .p2-plot { min-height: 64px; }
}
#care-gap .p2-note--objective { left: auto; right: calc(100% - var(--x) + 12px); top: calc(var(--y) + 8px); text-align: right; }
#care-gap .p2-note--clinical { white-space: normal; width: max-content; max-width: calc(100% - var(--x) - 16px); }
@media (min-width: 901px) and (max-height: 800px) {
  #care-gap .p2-note { font-size: 13.5px; }
  #care-gap .p2-note--objective { white-space: nowrap; }
  #care-gap .p2-note--objective strong ~ * , #care-gap .p2-note--objective { font-size: 13.5px; }
}
@media (min-width: 901px) and (max-height: 760px) {
  #care-gap .p2-note--objective .p2-note-sub { display: none; }
}
/* positions are fractions of the drawing, which starts below a strip (--pad) kept free for the labels above the line */
#care-gap .p2-plot { --pad: 0px; }
#care-gap .p2-trend .p2-plot svg { top: var(--pad); }
#care-gap .p2-pt { top: calc(var(--pad) + (100% - var(--pad)) * var(--yf)); }
#care-gap .p2-note--adjust { top: calc(var(--pad) + (100% - var(--pad)) * var(--yf)); }
#care-gap .p2-note--clinical { bottom: calc((100% - var(--pad)) * (1 - var(--yf)) + 4px); }
#care-gap .p2-note--objective { top: calc(var(--pad) + (100% - var(--pad)) * var(--yf) + 8px); }
@media (min-width: 901px) and (max-width: 2199px) { #care-gap .p2-plot { --pad: 22px; } }
@media (min-width: 901px) and (max-width: 1799px) { #care-gap .p2-plot { --pad: 34px; } }
@media (min-width: 901px) and (max-height: 760px) { #care-gap .p2-plot { --pad: 20px; } #care-gap .p2-note--clinical { white-space: nowrap; max-width: none; } #care-gap .p2-note--clinical strong { display: inline; margin-right: 4px; } }
#care-gap .p2-trend .p2-plot svg { top: var(--pad); bottom: 0; height: auto; }
#care-gap .p2-trend .p2-plot svg { height: calc(100% - var(--pad)); }
@media (min-width: 901px) and (max-width: 1799px), (min-width: 901px) and (max-height: 900px) {
  /* short drawings: the target band is too thin for two lines, so the objective label is its name only */
  #care-gap .p2-note--objective .p2-note-sub { display: none; }
  #care-gap .p2-note--objective { top: calc(var(--pad) + (100% - var(--pad)) * var(--yf) + 5px); }
}
#care-gap .p2-note-sub { display: block; }
@media (min-width: 901px) and (max-height: 760px) {
  #care-gap .p2-note--clinical .p2-note-sub { display: none; }
}
#care-gap .p2-note { text-shadow: 0 0 3px #f6fafc, 0 0 3px #f6fafc, 0 0 6px #f6fafc; }

/* Panel 2 card 1, Alex 10-15 ("a phone that still doesn't look like a phone"; 9a4bbea had the right size): a real iPhone body
   (black bezel, metal edge, Dynamic Island, side buttons) around the cleaned call screen, as large as the card allows */
#care-gap .p2-card--patient figcaption { margin-bottom: 8px !important; }
#care-gap .p2-phone { margin-bottom: 10px !important; }
#care-gap .p2-phone-frame { position: relative; aspect-ratio: 9 / 19.4; padding: 3.4%; border-radius: 16% / 7.4%; background: linear-gradient(145deg, #2b2f35, #0b0c0e 22%, #0b0c0e 78%, #2b2f35); box-shadow: inset 0 0 0 1.5px #5b616a, inset 0 0 0 3px #15171a, 0 26px 48px -20px #0e3b4799, 0 6px 14px -6px #0e3b4766; }
#care-gap .p2-phone-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center; border: 0 !important; border-radius: 12.6% / 5.9% !important; box-shadow: none !important; }
#care-gap .p2-island { position: absolute; z-index: 2; top: 3.4%; left: 50%; width: 30%; height: 3.1%; transform: translateX(-50%); border-radius: 999px; background: #000; }
#care-gap .p2-btn { position: absolute; width: 3px; border-radius: 2px; background: linear-gradient(90deg, #3c4148, #1d2024); }
#care-gap .p2-btn--action { left: -2.5px; top: 16%; height: 4.5%; }
#care-gap .p2-btn--up { left: -2.5px; top: 23.5%; height: 7.5%; }
#care-gap .p2-btn--down { left: -2.5px; top: 32.5%; height: 7.5%; }
#care-gap .p2-btn--power { right: -2.5px; top: 25%; height: 11%; }

/* Panel 2, Alex 10-15: the cards take the height down to the page dots; card 1 lines up with the heading box's left edge;
   the row reaches further right on wide screens and card 3 takes that room; key phrases in bold ink for hierarchy */
@media (min-width: 901px) and (min-height: 821px) {
  #care-gap .response-story.p2 { bottom: clamp(84px, 7svh, 96px); }
}
@media (min-width: 901px) {
  /* text 36px inside the box; the box's left edge is the cards' left edge; the box's top and bottom stay outside the layout */
  #care-gap .p2-head { padding: 0 36px; }
  #care-gap .p2-head::before { inset: -18px 0 -16px 0 !important; }
}
@media (min-width: 2200px) and (min-height: 821px) {
  #care-gap .response-story.p2 { right: max(5.5%, calc((100% - 2000px) / 2 - 160px)); }
  #care-gap .p2-stage { grid-template-columns: minmax(0, .74fr) clamp(30px, 2.2vw, 44px) minmax(0, 1.41fr) clamp(30px, 2.2vw, 44px) minmax(0, 1.383fr) !important; }
}
#care-gap .p2-head p strong, #care-gap .p2-card p strong { font-weight: 650; color: var(--rd-ink); }
@media (min-width: 901px) {
  #care-gap .p2-head { max-width: calc(min(66%, 940px) + 72px); }
}

/* Panel 2, Alex 10-15: the three cards more opaque so their text reads easily over the photo */
#care-gap .p2-card { background: #fffffff5; }

/* Panel 4, Alex 10-15: a minimum text size. Wide screens: nothing under 17px, main labels 18px. Laptops: nothing under 15px, main labels 16px. */
@media (min-width: 1700px) and (min-height: 901px) {
  #whole-picture .biology-capture :is(.bc-source-cadence, .bc-reading-before, .bc-signal-reading small, .bc-selected-timing, .bc-selected-method, .bc-score-label, .bc-updated-source, .bc-remission-evidence small, .bc-control-area small, .bc-treatment-month, .bc-time-axis, .bc-score-axis, .bc-score-number > span, .bc-score h4) { font-size: 17px; }
  #whole-picture .biology-capture :is(.bc-treatment-label, .bc-clinical-state, .bc-score-update, .bc-remission-evidence > div, .bc-source-name) { font-size: 18px; }
}
@media (min-width: 901px) and (max-width: 1699px), (min-width: 901px) and (max-height: 900px) {
  #whole-picture .biology-capture :is(.bc-source-cadence, .bc-reading-before, .bc-signal-reading small, .bc-selected-timing, .bc-selected-method, .bc-score-label, .bc-updated-source, .bc-remission-evidence small, .bc-control-area small, .bc-treatment-month, .bc-time-axis, .bc-score-axis, .bc-score-number > span, .bc-score h4) { font-size: 15px; }
  #whole-picture .biology-capture :is(.bc-treatment-label, .bc-clinical-state, .bc-score-update, .bc-remission-evidence > div, .bc-source-name) { font-size: 16px; }
}

/* Panel 4, Alex 10-15 ("text still seems tiny, no visual hierarchy across the text"): four levels.
   1 the signal names, card title and UBi in bold ink; 2 the readings and score as large coloured numbers;
   3 status lines in semibold colour; 4 sub-labels, units and axes in quieter grey. */
@media (min-width: 1700px) and (min-height: 901px) {
  #whole-picture.care-chapter .biology-capture .bc-source { grid-template-columns: clamp(40px, 4.5svh, 56px) 200px minmax(0, 1fr); }
  #whole-picture.care-chapter .biology-capture .bc-source-heading { gap: 3px; }
  #whole-picture.care-chapter .biology-capture .bc-source-name { font: 700 22px/1.15 var(--display); letter-spacing: -.01em; color: var(--rd-ink); }
  #whole-picture.care-chapter .biology-capture .bc-source-cadence { font-size: 17px; color: #5d7681; }
  #whole-picture.care-chapter .biology-capture .bc-signal-reading { font-size: 34px; font-weight: 600; }
  #whole-picture.care-chapter .biology-capture .bc-signal-reading small, #whole-picture.care-chapter .biology-capture .bc-reading-before { font-size: 17px; font-weight: 500; }
  #whole-picture.care-chapter .biology-capture .bc-treatment-label { font-size: 18px; font-weight: 650; color: var(--rd-ink); }
  #whole-picture.care-chapter .biology-capture .bc-hub-caption strong { font: 700 32px/1.1 var(--display); color: var(--rd-ink); }
  #whole-picture.care-chapter .biology-capture .bc-clinical-state { font-size: 19px; font-weight: 500; color: #2c5562; }
  #whole-picture.care-chapter .biology-capture .bc-score h3 { font: 700 34px/1.15 var(--display); letter-spacing: -.02em; color: var(--rd-ink); }
  #whole-picture.care-chapter .biology-capture .bc-score-value { font-size: 76px; }
  #whole-picture.care-chapter .biology-capture .bc-score-update { font-size: 21px; font-weight: 650; }
  #whole-picture.care-chapter .biology-capture .bc-updated-source { font-size: 17px; color: #5d7681; }
  #whole-picture.care-chapter .biology-capture .bc-remission-evidence > div { font-size: 19px; font-weight: 500; color: var(--rd-ink); }
  #whole-picture.care-chapter .biology-capture .bc-remission-evidence small { font-size: 17px; color: #5d7681; font-weight: 500; }
  #whole-picture.care-chapter .biology-capture .bc-score h4 { font: 650 21px/1.3 var(--display); color: var(--rd-ink); }
  #whole-picture.care-chapter .biology-capture .bc-selected-method { font: 700 18px/1.3 var(--text); color: var(--rd-teal); text-transform: uppercase; letter-spacing: .05em; }
  #whole-picture.care-chapter .biology-capture .bc-copy p { font-size: 21px; line-height: 1.45; color: var(--rd-ink); }
}
@media (min-width: 901px) and (max-width: 1699px), (min-width: 901px) and (max-height: 900px) {
  #whole-picture.care-chapter .biology-capture .bc-source { grid-template-columns: 34px 150px minmax(0, 1fr); }
  #whole-picture.care-chapter .biology-capture .bc-source-heading { gap: 1px; }
  #whole-picture.care-chapter .biology-capture .bc-source-name { font: 700 17px/1.1 var(--display); color: var(--rd-ink); }
  #whole-picture.care-chapter .biology-capture .bc-source-cadence { color: #5d7681; }
  #whole-picture.care-chapter .biology-capture .bc-signal-reading { font-size: 22px; font-weight: 600; }
  #whole-picture.care-chapter .biology-capture .bc-treatment-label { font-weight: 650; color: var(--rd-ink); }
  #whole-picture.care-chapter .biology-capture .bc-hub-caption strong { font: 700 24px/1.1 var(--display); color: var(--rd-ink); }
  #whole-picture.care-chapter .biology-capture .bc-score h3 { font: 700 24px/1.15 var(--display); color: var(--rd-ink); }
  #whole-picture.care-chapter .biology-capture .bc-score-update { font-size: 17px; font-weight: 650; }
  #whole-picture.care-chapter .biology-capture .bc-remission-evidence > div { color: var(--rd-ink); }
  #whole-picture.care-chapter .biology-capture .bc-score h4 { font: 650 17px/1.3 var(--display); color: var(--rd-ink); }
  #whole-picture.care-chapter .biology-capture .bc-selected-method { font: 700 15px/1.3 var(--text); color: var(--rd-teal); text-transform: uppercase; letter-spacing: .05em; }
  #whole-picture.care-chapter .biology-capture .bc-copy p { font-size: 17px; color: var(--rd-ink); }
}
@media (min-width: 1700px) and (min-height: 901px) {
  #whole-picture.care-chapter .biology-capture .bc-source-name { font-size: clamp(19px, 2svh, 26px); }
  #whole-picture.care-chapter .biology-capture .bc-source-cadence { font-size: clamp(15px, 1.35svh, 17px); }
  #whole-picture.care-chapter .biology-capture .bc-signal-reading { font-size: clamp(24px, 2.7svh, 36px); }
  #whole-picture.care-chapter .biology-capture .bc-signal-reading small { font-size: clamp(15px, 1.35svh, 17px); }
}
@media (min-width: 901px) and (max-height: 760px) {
  #whole-picture.care-chapter .biology-capture .bc-source-cadence { display: none; }
}
@media (min-width: 1700px) and (min-height: 901px) {
  #whole-picture.care-chapter .biology-capture .bc-signal-reading { font-size: clamp(22px, 2.55svh, 36px); line-height: 1; }
  #whole-picture.care-chapter .biology-capture .bc-source-heading { gap: 1px; }
}
@media (min-width: 901px) and (max-width: 1699px), (min-width: 901px) and (max-height: 900px) {
  #whole-picture.care-chapter .biology-capture .bc-signal-reading { font-size: 20px; line-height: 1; }
  #whole-picture.care-chapter .biology-capture .bc-source-name { line-height: 1.05; }
  #whole-picture.care-chapter .biology-capture .bc-source-cadence { line-height: 1.15; }
}
@media (min-width: 901px) and (max-height: 800px) {
  #whole-picture.care-chapter .biology-capture .bc-source-cadence { display: none; }
}

/* ===== Panel 5 movies, Alex 10-15: five product-interface films (enrollment, questions and silent non-responders,
   structured EMR data, prior authorization support, follow-ups and colonoscopy prep). Each plays an 11-second timeline
   when its step is active; the frame fills the column's height. Source: work/panel5-movies.css ===== */
@property --m-count { syntax: "<integer>"; inherits: false; initial-value: 0; }
@media (min-width: 901px) {
  #earlier-action .p5-movie { width: min(100cqw, calc(100cqh * 1.5)); aspect-ratio: 3 / 2; container-type: inline-size; overflow: hidden; background: radial-gradient(120% 90% at 30% 20%, #f8fcfe, #e3eff6); }
  #earlier-action .p5-movie .p5-scene { font-size: max(14px, 1.32cqw); }
  #earlier-action .p5-movie .m-stage { position: absolute; inset: 0; }
  #earlier-action .p5-movie .m-stage > * { position: absolute; }

  /* shared parts */
  #earlier-action .p5-movie .m-window { border-radius: 1em; background: #fff; border: 1px solid #dbe7ee; box-shadow: 0 2.2em 4.5em -2em #0e3b4773, 0 .3em .8em #0e3b470f; overflow: hidden; }
  #earlier-action .p5-movie .m-chrome { display: flex; align-items: center; gap: .45em; padding: .65em .9em; background: #f3f7fa; border-bottom: 1px solid #e3edf2; }
  #earlier-action .p5-movie .m-chrome i { width: .62em; height: .62em; border-radius: 50%; background: #d6e1e7; }
  #earlier-action .p5-movie .m-chrome span { margin-left: .6em; font: 600 .82em/1 var(--text); color: #5d7884; }
  #earlier-action .p5-movie .m-body { padding: 1.1em 1.3em 1.3em; }
  #earlier-action .p5-movie .m-card { padding: 1.1em 1.3em; border-radius: 1em; background: #fff; border: 1px solid #dbe7ee; box-shadow: 0 2em 4em -2em #0e3b4766, 0 .3em .8em #0e3b470d; }
  #earlier-action .p5-movie .m-eyebrow { display: block; font: 700 .78em/1.2 var(--text); letter-spacing: .07em; text-transform: uppercase; color: var(--rd-teal); }
  #earlier-action .p5-movie .m-title { display: block; margin-top: .25em; font: 600 1.45em/1.15 var(--display); letter-spacing: -.02em; color: var(--rd-ink); }
  #earlier-action .p5-movie .m-sub { display: block; margin-top: .2em; font: 500 .9em/1.35 var(--text); color: #5d7884; }
  #earlier-action .p5-movie .m-row { display: flex; align-items: center; justify-content: space-between; gap: 1em; }
  #earlier-action .p5-movie .m-button { display: inline-block; margin-top: 1em; padding: .65em 1.2em; border-radius: 99em; background: var(--rd-teal); color: #fff; font: 650 .95em/1 var(--text); box-shadow: 0 .6em 1.2em -.6em #087d96aa; }
  #earlier-action .p5-movie .m-pill { padding: .3em .75em; border-radius: 99em; font: 700 .78em/1.2 var(--text); }
  #earlier-action .p5-movie .m-pill--alert { background: #fbe9e4; color: #a5503b; }
  #earlier-action .p5-movie .m-cursor { z-index: 9; width: 1.7em; height: 1.7em; fill: #0e3b47; stroke: #fff; stroke-width: 1.4; filter: drop-shadow(0 .2em .3em #0006); opacity: 0; }
  #earlier-action .p5-movie .m-flow { overflow: visible; }
  #earlier-action .p5-movie .m-flow path { fill: none; stroke: #29cdde; stroke-width: 2.5; stroke-dasharray: 4 6; vector-effect: non-scaling-stroke; }
  #earlier-action .p5-movie .m-iphone { aspect-ratio: 9 / 19.4; padding: 2.4%; box-sizing: border-box; border-radius: 14% / 6.6%; background: linear-gradient(145deg, #2b2f35, #0b0c0e 22%, #0b0c0e 78%, #2b2f35); box-shadow: inset 0 0 0 1.5px #5b616a, inset 0 0 0 3px #15171a, 0 2.4em 4.4em -1.6em #0e3b4799; }
  #earlier-action .p5-movie .m-iphone > img, #earlier-action .p5-movie .m-app { display: block; width: 100%; height: 100%; border-radius: 11.5% / 5.4%; object-fit: cover; }
  #earlier-action .p5-movie .m-island { position: absolute; top: 3.6%; left: 50%; width: 30%; height: 3%; transform: translateX(-50%); border-radius: 99em; background: #000; }
  #earlier-action .p5-movie .m-checks { display: grid; gap: .75em; margin: .9em 0 0; padding: 0; list-style: none; }
  #earlier-action .p5-movie .m-checks li { display: grid; grid-template-columns: 1.35em 1fr auto; align-items: center; gap: .65em; font: 600 .95em/1.25 var(--text); color: #9bb2bb; }
  #earlier-action .p5-movie :is(.m-checks i, .m-prep i, .m-done i, .m-toast i, .m-stamp > i) { display: block; width: 1.35em; height: 1.35em; border-radius: 50%; border: .16em solid #cfe0e7; box-sizing: border-box; background: #fff center / 70% no-repeat; }
  #earlier-action .p5-movie .m-checks small { font: 600 .82em/1 var(--text); color: #9bb2bb; }
  #earlier-action .p5-movie .m-done { display: flex; align-items: center; gap: .6em; margin-top: 1em; padding-top: .9em; border-top: 1px solid #e3edf2; font: 650 .9em/1.3 var(--text); color: #0b6e50; opacity: 0; }
  #earlier-action .p5-movie .m-done i { flex: none; }
  #earlier-action .p5-movie .m-fields { display: grid; grid-template-columns: auto 1fr; gap: .35em 1em; margin-top: .9em; font: 500 .88em/1.3 var(--text); color: #5d7884; }
  #earlier-action .p5-movie .m-fields b { font-weight: 650; color: var(--rd-ink); }

  /* scene 1: enrollment */
  #earlier-action .p5-movie .m0-referral { left: 3%; top: 16%; width: 32%; }
  #earlier-action .p5-movie .m0-flow { left: 35.5%; top: 44%; width: 8%; height: 5%; }
  #earlier-action .p5-movie .m0-phone { left: 44%; top: 9%; height: 82%; }
  #earlier-action .p5-movie .m0-steps { left: 71%; top: 22%; width: 26%; box-sizing: border-box; }

  /* scene 2: questions and the silent non-responder */
  #earlier-action .p5-movie .m1-inbox { left: 3.5%; top: 7%; width: 49%; height: 86%; box-sizing: border-box; display: flex; flex-direction: column; }
  #earlier-action .p5-movie .m-count { font: 600 .9em/1 var(--text); color: #5d7884; white-space: nowrap; }
  #earlier-action .p5-movie .m-count b { --m-count: 47; counter-reset: q var(--m-count); font: 700 1.5em/1 var(--display); color: var(--rd-ink); }
  #earlier-action .p5-movie .m-count b::after { content: counter(q); }
  #earlier-action .p5-movie .m-msgs { display: grid; gap: .8em; margin: 1em 0 0; padding: 0; list-style: none; }
  #earlier-action .p5-movie .m-msgs li { display: grid; grid-template-columns: 1fr auto; gap: .35em 1em; padding: .85em 1em; border-radius: .8em; background: #f4f8fa; border: 1px solid #e3edf2; }
  #earlier-action .p5-movie .m-msgs p { margin: 0; font: 600 1em/1.3 var(--text); color: var(--rd-ink); }
  #earlier-action .p5-movie .m-msgs small { font: 600 .8em/1.3 var(--text); color: #7a949e; white-space: nowrap; }
  #earlier-action .p5-movie .m-msgs em { grid-column: 1 / -1; justify-self: start; padding: .25em .7em; border-radius: 99em; background: #e0f3ef; color: #0f706c; font: 700 .78em/1.2 var(--text); font-style: normal; }
  #earlier-action .p5-movie .m-desk { display: flex; align-items: baseline; justify-content: space-between; margin-top: auto; padding-top: .9em; border-top: 1px solid #e3edf2; font: 600 .95em/1 var(--text); color: #5d7884; }
  #earlier-action .p5-movie .m-desk b { font: 700 2em/1 var(--display); color: #0b6e50; }
  #earlier-action .p5-movie .m1-flag { left: 56%; top: 12%; width: 40.5%; box-sizing: border-box; }
  #earlier-action .p5-movie .m-metric { display: grid; grid-template-columns: 7.5em 1fr 4em; align-items: center; gap: .8em; margin-top: 1em; font: 600 .86em/1.2 var(--text); color: #5d7884; }
  #earlier-action .p5-movie .m-metric svg { width: 100%; height: 2.2em; overflow: visible; }
  #earlier-action .p5-movie .m-metric b { justify-self: end; color: #a5503b; font-weight: 700; }
  #earlier-action .p5-movie .m-spark { fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 100; }
  #earlier-action .p5-movie .m-spark--bad { stroke: #c0614f; }
  #earlier-action .p5-movie .m-bars { display: flex; align-items: flex-end; gap: .3em; height: 2.2em; }
  #earlier-action .p5-movie .m-bars i { flex: 1; height: calc(var(--h) * 100%); border-radius: .2em .2em 0 0; background: #8fb7c6; transform-origin: bottom; }
  #earlier-action .p5-movie .m-alert { display: flex; align-items: center; gap: .8em; margin-top: 1.2em; padding: .85em 1em; border-radius: .8em; background: #fff4f0; border: 1px solid #f3d3c8; font: 650 .92em/1.35 var(--text); color: #7d3a2b; }
  #earlier-action .p5-movie .m-alert img { flex: none; width: 2.4em; height: 2.4em; object-fit: contain; }

  /* scene 3: structured EMR data */
  #earlier-action .p5-movie .m-source { left: 3%; top: 36%; width: 13%; box-sizing: border-box; display: grid; justify-items: center; gap: .5em; padding: 1em .6em; border-radius: 1em; background: #fff; border: 1px solid #dbe7ee; box-shadow: 0 1.6em 3em -1.6em #0e3b4766; text-align: center; font: 650 .85em/1.25 var(--text); color: var(--rd-ink); }
  #earlier-action .p5-movie .m-source img { width: 4em; height: 4em; object-fit: contain; }
  #earlier-action .p5-movie .m2-flow { left: 16.5%; top: 47%; width: 8%; height: 5%; }
  #earlier-action .p5-movie .m2-emr { left: 25%; top: 6%; width: 72%; height: 88%; display: flex; flex-direction: column; }
  #earlier-action .p5-movie .m-emr { flex: 1; display: grid; grid-template-columns: 9em 1fr; grid-template-rows: auto 1fr; min-height: 0; }
  #earlier-action .p5-movie .m-emr nav { grid-row: 1 / 3; display: grid; align-content: start; gap: .2em; padding: 1em .6em; background: #f6f9fb; border-right: 1px solid #e3edf2; }
  #earlier-action .p5-movie .m-emr nav span { padding: .55em .7em; border-radius: .5em; font: 600 .88em/1 var(--text); color: #5d7884; }
  #earlier-action .p5-movie .m-emr nav .is-on { background: #e2f3f7; color: var(--rd-teal); }
  #earlier-action .p5-movie .m-emr table { margin: .8em 1.2em 0; border-collapse: collapse; font: 500 .95em/1.2 var(--text); color: var(--rd-ink); }
  #earlier-action .p5-movie .m-emr th { padding: .5em .4em; text-align: left; font: 700 .76em/1 var(--text); letter-spacing: .06em; text-transform: uppercase; color: #7a949e; border-bottom: 1px solid #e3edf2; }
  #earlier-action .p5-movie .m-emr td { padding: .62em .4em; border-bottom: 1px solid #eef3f6; }
  #earlier-action .p5-movie .m-emr td:nth-child(2) { font-weight: 700; }
  #earlier-action .p5-movie .m-emr em { padding: .2em .55em; border-radius: 99em; background: #e2f3f7; color: var(--rd-teal); font: 700 .8em/1.2 var(--text); font-style: normal; white-space: nowrap; }
  #earlier-action .p5-movie .m-note { align-self: start; margin: .9em 1.2em 1.1em; padding: .8em 1em; border-radius: .7em; background: #f6f9fb; border: 1px solid #e3edf2; display: grid; gap: .45em; }
  #earlier-action .p5-movie .m-note b { font: 700 .82em/1 var(--text); color: var(--rd-ink-2); }
  #earlier-action .p5-movie .m-note span { display: block; height: .5em; border-radius: 99em; background: #d6e3ea; width: var(--w, 80%); }
  #earlier-action .p5-movie .m-note span:nth-of-type(1) { --w: 92%; } #earlier-action .p5-movie .m-note span:nth-of-type(2) { --w: 78%; } #earlier-action .p5-movie .m-note span:nth-of-type(3) { --w: 54%; }

  /* scene 4: prior authorization support */
  #earlier-action .p5-movie .m3-packet { left: 6%; top: 5%; width: 72%; height: 86%; display: flex; flex-direction: column; }
  #earlier-action .p5-movie .m3-packet .m-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  #earlier-action .p5-movie .m-ring svg { display: block; width: 2.6em; height: 2.6em; transform: rotate(-90deg); }
  #earlier-action .p5-movie .m-ring circle { fill: none; stroke: #e3edf2; stroke-width: 4; }
  #earlier-action .p5-movie .m-ring .m-ring-fill { stroke: #0f8b7f; stroke-dasharray: 100; stroke-dashoffset: 0; stroke-linecap: round; }
  #earlier-action .p5-movie .m-sections { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: .8em; margin-top: .9em; }
  #earlier-action .p5-movie .m-sections section { min-height: 0; padding: .85em 1em; border-radius: .8em; background: #f6f9fb; border: 1px solid #e3edf2; display: flex; flex-direction: column; gap: .5em; }
  #earlier-action .p5-movie .m-sections svg { width: 100%; flex: 1; min-height: 2.5em; overflow: visible; }
  #earlier-action .p5-movie .m-sections svg circle { fill: #c0614f; }
  #earlier-action .p5-movie .m-band { fill: #29cdde2e; }
  #earlier-action .p5-movie .m-sections small { font: 650 .86em/1.2 var(--text); color: #a5503b; }
  #earlier-action .p5-movie .m-sections ul { margin: 0; padding: 0 0 0 1.1em; display: grid; gap: .4em; font: 550 .9em/1.3 var(--text); color: var(--rd-ink); }
  #earlier-action .p5-movie .m-heat { display: grid; grid-template-columns: repeat(15, 1fr); gap: .22em; }
  #earlier-action .p5-movie .m-heat i { aspect-ratio: 1; border-radius: .2em; background: #e8c9a0; }
  #earlier-action .p5-movie .m-heat i:nth-child(3n) { background: #d9926f; }
  #earlier-action .p5-movie .m-heat i:nth-child(n+19) { background: #c0614f; }
  #earlier-action .p5-movie .m-heat i:nth-child(-n+8) { background: #cfe5dc; }
  #earlier-action .p5-movie .m-lines { display: grid; gap: .45em; }
  #earlier-action .p5-movie .m-lines i { display: block; height: .5em; border-radius: 99em; background: #d6e3ea; }
  #earlier-action .p5-movie .m-lines i:nth-child(2) { width: 85%; }
  #earlier-action .p5-movie .m-lines i:nth-child(3) { width: 60%; }
  #earlier-action .p5-movie .m3-foot { margin-top: .9em; }
  #earlier-action .p5-movie .m3-foot .m-button { margin: 0; white-space: nowrap; }
  #earlier-action .p5-movie .m-toast { right: 3%; bottom: 5%; max-width: 30%; display: flex; align-items: center; gap: .7em; padding: .9em 1.1em; border-radius: .9em; background: #0e3b47; color: #fff; font: 650 .92em/1.3 var(--text); box-shadow: 0 1.6em 3em -1.4em #0e3b47aa; }
  #earlier-action .p5-movie .m-toast i { flex: none; border-color: #19a57a; background-color: #19a57a; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

  /* scene 5: colonoscopy prep and follow-ups */
  #earlier-action .p5-movie .m4-phone { left: 5%; top: 4%; height: 92%; }
  #earlier-action .p5-movie .m-app { box-sizing: border-box; display: flex; flex-direction: column; padding: 14% 7% 8%; background: linear-gradient(180deg, #eaf2ff, #f6f9fd 40%); overflow: hidden; font-size: 1.12em; }
  #earlier-action .p5-movie .m-app-top { position: absolute; top: 3.4%; left: 14%; font: 700 .7em/1 var(--text); color: #111; }
  #earlier-action .p5-movie .m-app .m-eyebrow { font-size: .62em; }
  #earlier-action .p5-movie .m-app-title { margin-top: .2em; font: 700 .9em/1.2 var(--display); color: var(--rd-ink); }
  #earlier-action .p5-movie .m-prep { display: grid; gap: .5em; margin: .8em 0 0; padding: 0; list-style: none; }
  #earlier-action .p5-movie .m-prep li { display: grid; grid-template-columns: 1.6em 1fr; gap: .5em; align-items: start; padding: .55em .6em; border-radius: .6em; background: #fff; box-shadow: 0 .3em .8em -.4em #0e3b4740; font: 500 .64em/1.3 var(--text); color: #5d7884; }
  #earlier-action .p5-movie .m-prep li i { width: 1.6em; height: 1.6em; }
  #earlier-action .p5-movie .m-prep b { display: block; font-weight: 700; color: var(--rd-ink); }
  #earlier-action .p5-movie .m-chat { display: grid; gap: .45em; margin-top: auto; font: 500 .62em/1.3 var(--text); }
  #earlier-action .p5-movie .m-chat p { margin: 0; padding: .55em .75em; border-radius: .8em; }
  #earlier-action .p5-movie .m-ubi { justify-self: start; max-width: 85%; background: #fff; color: var(--rd-ink); border-bottom-left-radius: .2em; box-shadow: 0 .3em .8em -.4em #0e3b4740; }
  #earlier-action .p5-movie .m-me { justify-self: end; background: #0e3b47; color: #fff; border-bottom-right-radius: .2em; }
  #earlier-action .p5-movie .m4-ready { left: 38%; top: 12%; width: 56%; padding: 1.4em 1.6em; box-sizing: border-box; }
  #earlier-action .p5-movie .m-stamp { display: flex; align-items: center; gap: 1em; }
  #earlier-action .p5-movie .m-stamp > i { flex: none; width: 3.4em; height: 3.4em; border: 0; background-color: #e0f3ef; }
  #earlier-action .p5-movie .m-stamp b { display: block; font: 700 1.9em/1.1 var(--display); letter-spacing: -.02em; color: #0b6e50; }
  #earlier-action .p5-movie .m-stamp span { display: block; margin-top: .3em; font: 600 .95em/1.3 var(--text); color: #5d7884; }
  #earlier-action .p5-movie .m4-cal { left: 38%; top: 48%; width: 44%; box-sizing: border-box; }
  #earlier-action .p5-movie .m-slot { display: grid; grid-template-columns: 4.2em 1fr auto; align-items: center; gap: .9em; margin-top: .8em; padding: .8em 1em; border-radius: .8em; background: #f6f9fb; border: 1px solid #e3edf2; font: 650 1em/1.2 var(--text); color: var(--rd-ink); }
  #earlier-action .p5-movie .m-slot b { font: 700 .9em/1 var(--text); color: var(--rd-teal); }
  #earlier-action .p5-movie .m-slot small { font: 600 .85em/1 var(--text); color: #5d7884; }
  #earlier-action .p5-movie .m-slot--new { border-color: #29cdde; background: #effafc; }

  /* finished state (what a still frame or reduced motion shows): every row checked */
  #earlier-action .p5-movie :is(.m-checks li, .m-prep li) { color: var(--rd-ink); }
  #earlier-action .p5-movie :is(.m-checks i, .m-prep i, .m-done i, .m-stamp > i) { border-color: #0f8b7f; background-color: #0f8b7f; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
  #earlier-action .p5-movie .m-stamp > i { background-color: #19a57a; }

  /* ---- timelines: each runs when its step becomes active (animation fill "both" holds the start state until its delay) ---- */
  #earlier-action .workflow-scene .p5-movie .m-stage > * { animation: m-rise 0.4s cubic-bezier(.2, .8, .25, 1) both; }
  #earlier-action .workflow-scene:not([data-step="0"]) .p5-scene--0 *, #earlier-action .workflow-scene:not([data-step="1"]) .p5-scene--1 *,
  #earlier-action .workflow-scene:not([data-step="2"]) .p5-scene--2 *, #earlier-action .workflow-scene:not([data-step="3"]) .p5-scene--3 *,
  #earlier-action .workflow-scene:not([data-step="4"]) .p5-scene--4 * { animation: none !important; }
  /* 1 enrollment */
  #earlier-action .p5-scene--0 .m0-flow { animation-delay: 1.05s !important; }
  #earlier-action .p5-scene--0 .m0-flow path { animation: m-dash 0.5s linear 1.05s infinite; }
  #earlier-action .p5-scene--0 .m0-phone { animation: m-phone-in 0.5s cubic-bezier(.2, .8, .25, 1) 1.3s both !important; }
  #earlier-action .p5-scene--0 .m0-steps { animation-delay: 1.6s !important; }
  #earlier-action .p5-scene--0 .m-cursor { animation: m0-cursor 1.2s cubic-bezier(.45, 0, .2, 1) 0.2s both !important; }
  #earlier-action .p5-scene--0 .m0-refer { animation: m-press 0.25s ease 0.88s both; }
  #earlier-action .p5-scene--0 .m-checks li { animation: m-check-row 0.17s ease both; }
  #earlier-action .p5-scene--0 .m-checks i { animation: m-check 0.17s ease both; }
  #earlier-action .p5-scene--0 .m-checks li:nth-child(1), #earlier-action .p5-scene--0 .m-checks li:nth-child(1) i { animation-delay: 2.1s; }
  #earlier-action .p5-scene--0 .m-checks li:nth-child(2), #earlier-action .p5-scene--0 .m-checks li:nth-child(2) i { animation-delay: 2.7s; }
  #earlier-action .p5-scene--0 .m-checks li:nth-child(3), #earlier-action .p5-scene--0 .m-checks li:nth-child(3) i { animation-delay: 3.3s; }
  #earlier-action .p5-scene--0 .m-done { animation: m-fade 0.25s ease 3.8s both; }
  #earlier-action .p5-scene--0 .m-done i { animation: m-check 0.17s ease 3.8s both; }
  /* 2 questions and the silent non-responder */
  #earlier-action .p5-scene--1 .m-msgs li { animation: m-rise 0.3s cubic-bezier(.2, .8, .25, 1) both; }
  #earlier-action .p5-scene--1 .m-msgs li:nth-child(1) { animation-delay: 0.4s; }
  #earlier-action .p5-scene--1 .m-msgs li:nth-child(2) { animation-delay: 0.95s; }
  #earlier-action .p5-scene--1 .m-msgs li:nth-child(3) { animation-delay: 1.5s; }
  #earlier-action .p5-scene--1 .m-msgs em { animation: m-pop 0.2s ease both; }
  #earlier-action .p5-scene--1 .m-msgs li:nth-child(1) em { animation-delay: 0.7s; }
  #earlier-action .p5-scene--1 .m-msgs li:nth-child(2) em { animation-delay: 1.25s; }
  #earlier-action .p5-scene--1 .m-msgs li:nth-child(3) em { animation-delay: 1.8s; }
  #earlier-action .p5-scene--1 .m1-n { animation: m-count 1.8s cubic-bezier(.3, 0, .2, 1) 0.4s both; }
  #earlier-action .p5-scene--1 .m1-flag { animation-delay: 2.3s !important; }
  #earlier-action .p5-scene--1 .m-spark { animation: m-draw 0.7s ease 2.65s both; }
  #earlier-action .p5-scene--1 .m-bars i { animation: m-shrink 0.7s cubic-bezier(.4, 0, .2, 1) 2.8s both; }
  #earlier-action .p5-scene--1 .m-pill--alert { animation: m-pop 0.2s ease 3.6s both; }
  #earlier-action .p5-scene--1 .m-alert { animation: m-rise 0.3s cubic-bezier(.2, .8, .25, 1) 3.8s both; }
  /* 3 structured EMR data */
  #earlier-action .p5-scene--2 .m2-emr { animation-delay: 0.15s !important; }
  #earlier-action .p5-scene--2 .m2-flow { animation-delay: 0.5s !important; }
  #earlier-action .p5-scene--2 .m2-flow path { animation: m-dash 0.5s linear 0.5s infinite; }
  #earlier-action .p5-scene--2 .m-emr td:nth-child(2), #earlier-action .p5-scene--2 .m-emr td:nth-child(3) { animation: m-fill 0.35s ease both; }
  #earlier-action .p5-scene--2 .m-emr tr:nth-child(2) td { animation-delay: 0.8s; }
  #earlier-action .p5-scene--2 .m-emr tr:nth-child(3) td { animation-delay: 1.15s; }
  #earlier-action .p5-scene--2 .m-emr tr:nth-child(4) td { animation-delay: 1.5s; }
  #earlier-action .p5-scene--2 .m-emr tr:nth-child(5) td { animation-delay: 1.85s; }
  #earlier-action .p5-scene--2 .m-emr tr:nth-child(6) td { animation-delay: 2.2s; }
  #earlier-action .p5-scene--2 .m-emr tr:nth-child(7) td { animation-delay: 2.55s; }
  #earlier-action .p5-scene--2 .m-note { animation: m-rise 0.3s cubic-bezier(.2, .8, .25, 1) 3s both; }
  #earlier-action .p5-scene--2 .m-note span { animation: m-type 0.5s ease both; }
  #earlier-action .p5-scene--2 .m-note span:nth-of-type(1) { animation-delay: 3.3s; }
  #earlier-action .p5-scene--2 .m-note span:nth-of-type(2) { animation-delay: 3.7s; }
  #earlier-action .p5-scene--2 .m-note span:nth-of-type(3) { animation-delay: 4.1s; }
  /* 4 prior authorization support */
  #earlier-action .p5-scene--3 .m-sections section { animation: m-rise 0.3s cubic-bezier(.2, .8, .25, 1) both; }
  #earlier-action .p5-scene--3 .m3-a { animation-delay: 0.45s; }
  #earlier-action .p5-scene--3 .m3-b { animation-delay: 0.95s; }
  #earlier-action .p5-scene--3 .m3-c { animation-delay: 1.45s; }
  #earlier-action .p5-scene--3 .m3-d { animation-delay: 1.95s; }
  #earlier-action .p5-scene--3 .m3-a .m-spark { animation: m-draw 0.6s ease 0.65s both; }
  #earlier-action .p5-scene--3 .m-ring-fill { animation: m-ring 1.8s ease 0.45s both; }
  #earlier-action .p5-scene--3 .m-cursor { animation: m3-cursor 0.9s cubic-bezier(.45, 0, .2, 1) 2.5s both !important; }
  #earlier-action .p5-scene--3 .m3-send { animation: m-press 0.25s ease 3.23s both; }
  #earlier-action .p5-scene--3 .m3-toast { animation-delay: 3.45s !important; }
  /* 5 colonoscopy prep and follow-ups */
  #earlier-action .p5-scene--4 .m-prep li { animation: m-check-row 0.17s ease both; }
  #earlier-action .p5-scene--4 .m-prep i { animation: m-check 0.17s ease both; }
  #earlier-action .p5-scene--4 .m-prep li:nth-child(1), #earlier-action .p5-scene--4 .m-prep li:nth-child(1) i { animation-delay: 0.5s; }
  #earlier-action .p5-scene--4 .m-prep li:nth-child(2), #earlier-action .p5-scene--4 .m-prep li:nth-child(2) i { animation-delay: 0.95s; }
  #earlier-action .p5-scene--4 .m-prep li:nth-child(3), #earlier-action .p5-scene--4 .m-prep li:nth-child(3) i { animation-delay: 1.4s; }
  #earlier-action .p5-scene--4 .m-prep li:nth-child(4), #earlier-action .p5-scene--4 .m-prep li:nth-child(4) i { animation-delay: 1.85s; }
  #earlier-action .p5-scene--4 .m-ubi { animation: m-rise 0.25s ease 2.25s both; }
  #earlier-action .p5-scene--4 .m-me { animation: m-rise 0.25s ease 2.75s both; }
  #earlier-action .p5-scene--4 .m4-ready { animation: m-stamp 0.35s cubic-bezier(.2, 1.4, .4, 1) 3.2s both !important; }
  #earlier-action .p5-scene--4 .m-stamp > i { animation: m-check 0.2s ease 3.45s both; }
  #earlier-action .p5-scene--4 .m4-cal { animation-delay: 0.3s !important; }
  #earlier-action .p5-scene--4 .m-slot--new { animation: m-rise 0.3s cubic-bezier(.2, .8, .25, 1) 3.9s both; }
}
@keyframes m-rise { from { opacity: 0; transform: translateY(1.4em) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes m-phone-in { from { opacity: 0; transform: translateY(2em) rotate(-2deg) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes m-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes m-pop { 0% { opacity: 0; transform: scale(.7); } 70% { opacity: 1; transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } }
@keyframes m-stamp { 0% { opacity: 0; transform: scale(1.12); } 100% { opacity: 1; transform: scale(1); } }
@keyframes m-press { 0%, 100% { transform: scale(1); } 40% { transform: scale(.92); background: #0b6377; } }
@keyframes m-check-row { from { color: #9bb2bb; } to { color: var(--rd-ink); } }
@keyframes m-check { from { border-color: #cfe0e7; background-color: #fff; background-image: none; } to { border-color: #0f8b7f; background-color: #0f8b7f; } }
@keyframes m-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes m-dash { to { stroke-dashoffset: -20; } }
@keyframes m-shrink { from { height: 90%; } }
@keyframes m-count { from { --m-count: 0; } to { --m-count: 47; } }
@keyframes m-fill { 0% { opacity: 0; background: #e2f3f7; } 40% { opacity: 1; background: #e2f3f7; } 100% { opacity: 1; background: transparent; } }
@keyframes m-type { from { width: 0; } }
@keyframes m-ring { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes m0-cursor { 0% { opacity: 0; left: 60%; top: 85%; } 15% { opacity: 1; } 60% { left: 15%; top: 72%; } 78% { opacity: 1; left: 15%; top: 72%; } 100% { opacity: 0; left: 18%; top: 75%; } }
@keyframes m3-cursor { 0% { opacity: 0; left: 40%; top: 97%; } 20% { opacity: 1; } 78% { opacity: 1; left: 69%; top: 84%; } 100% { opacity: 0; left: 71%; top: 86%; } }
/* Panel 5 movies fill the height: a wider panel on big screens, the movie column takes most of it, larger scene type */
@media (min-width: 1500px) {
  #earlier-action > .page-width { width: min(2000px, 90vw); }
  #earlier-action .workflow-scene { grid-template-columns: minmax(340px, .58fr) minmax(0, 1.9fr); }
}
@media (min-width: 901px) {
  #earlier-action .p5-movie .p5-scene { font-size: max(14px, 1.42cqw); }
}
@media (min-width: 901px) {
  /* the live UBi sits outside the frame's lower-left corner again (the frame no longer clips) */
  #earlier-action .p5-movie { overflow: visible; }
  #earlier-action .p5-movie .p5-scene { overflow: hidden; border-radius: inherit; }
  /* lines reveal left to right (dash drawing breaks on stretched charts) */
  #earlier-action .p5-movie .m-spark { stroke-dasharray: none; }
  #earlier-action .p5-scene--1 .m-metric svg, #earlier-action .p5-scene--3 .m3-a svg { clip-path: inset(0 0 0 0); }
  #earlier-action .p5-scene--1 .m-metric svg { animation: m-wipe 0.7s ease 2.65s both; }
  #earlier-action .p5-scene--3 .m3-a svg { animation: m-wipe 0.7s ease 0.65s both; }
  /* scene 2: five questions fill the inbox */
  #earlier-action .p5-movie .m1-inbox { left: 6%; top: 6%; height: 88%; }
  #earlier-action .p5-movie .m1-flag { left: 58%; top: 18%; width: 38%; }
  #earlier-action .p5-scene--1 .m-msgs li:nth-child(4) { animation-delay: 1.9s; }
  #earlier-action .p5-scene--1 .m-msgs li:nth-child(5) { animation-delay: 2.2s; }
  #earlier-action .p5-scene--1 .m-msgs li:nth-child(4) em { animation-delay: 2.1s; }
  #earlier-action .p5-scene--1 .m-msgs li:nth-child(5) em { animation-delay: 2.4s; }
  #earlier-action .p5-scene--1 .m1-flag { animation-delay: 2.5s !important; }
  #earlier-action .p5-scene--1 .m-metric svg { animation-delay: 2.8s; }
  #earlier-action .p5-scene--1 .m-bars i { animation-delay: 2.95s; }
  /* scene 3: the chart sized to its content, centred */
  #earlier-action .p5-movie .m2-emr { top: 50%; height: auto; transform: translateY(-50%); }
  #earlier-action .p5-scene--2 .m2-emr { animation-name: m-rise-mid !important; }
  #earlier-action .p5-movie .m-emr { grid-template-rows: auto auto; }
  #earlier-action .p5-movie .m-emr table { font-size: 1.05em; }
  #earlier-action .p5-movie .m-emr td { padding: .75em .4em; }
  /* scene 4: the packet, the hand-off button and the toast never overlap */
  #earlier-action .p5-movie .m3-packet { left: 4%; top: 4%; width: 70%; height: 92%; }
  #earlier-action .p5-movie .m-toast { left: 76%; right: auto; top: 40%; bottom: auto; max-width: 22%; }
  #earlier-action .p5-movie .m-ring { display: flex; align-items: center; gap: .6em; font: 700 .85em/1 var(--text); color: #0f8b7f; white-space: nowrap; }
  #earlier-action .p5-movie .m-ring b { opacity: 1; }
  #earlier-action .p5-scene--3 .m-ring b { animation: m-fade 0.2s ease 2.25s both; }
  #earlier-action .p5-movie .m-sections ul { font-size: 1em; gap: .6em; }
  #earlier-action .p5-movie .m-sections small { font-size: .95em; }
  #earlier-action .p5-movie .m-lines { gap: .7em; margin-top: .3em; }
  #earlier-action .p5-movie .m-lines i { height: .62em; }
  #earlier-action .p5-movie .m-heat { gap: .3em; }
  /* scene 5: the conversation follows the checklist; the cards fill the right side */
  #earlier-action .p5-movie .m-chat { margin-top: 1.1em; font-size: .7em; }
  #earlier-action .p5-movie .m-prep li { font-size: .7em; }
  #earlier-action .p5-movie .m4-ready { left: 40%; top: 14%; width: 55%; }
  #earlier-action .p5-movie .m4-cal { left: 40%; top: 44%; width: 55%; }
  #earlier-action .p5-movie .m-slot { padding: 1em 1.2em; font-size: 1.1em; }
}
@keyframes m-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes m-rise-mid { from { opacity: 0; transform: translateY(calc(-50% + 1.4em)) scale(.985); } to { opacity: 1; transform: translateY(-50%); } }
@media (min-width: 901px) {
  /* the live UBi stands just outside the movie's lower-left corner */
  #earlier-action .p5-frame.p5-movie .workflow-seat { left: -13%; bottom: -6%; width: 13%; height: 25%; }
  /* prior authorization packet sized to its content */
  #earlier-action .p5-movie .m3-packet { height: auto; top: 50%; transform: translateY(-50%); }
  #earlier-action .p5-scene--3 .m3-packet { animation-name: m-rise-mid !important; }
  #earlier-action .p5-movie .m-sections { grid-template-rows: auto auto; }
  #earlier-action .p5-movie .m-sections svg { flex: none; height: 7em; }
  #earlier-action .p5-movie .m-toast { top: 50%; transform: translateY(-50%); }
  #earlier-action .p5-scene--3 .m3-toast { animation-name: m-rise-mid !important; }
  /* prep phone clock clear of the island */
  #earlier-action .p5-movie .m-app-top { left: 11%; top: 3.3%; }
}
@media (min-width: 901px) {
  #earlier-action .p5-movie .m-chat p, #earlier-action .p5-movie .m-msgs p { font-size: inherit; }
  #earlier-action .p5-movie .m-msgs { font-size: 1em; }
}
/* smaller movie frames (laptops): three questions, and the enrollment card a little wider */
@container (max-width: 1000px) {
  #earlier-action .p5-movie .m-msgs li:nth-child(n+4) { display: none; }
  #earlier-action .p5-movie .m0-steps { left: 68%; width: 30%; }
  #earlier-action .p5-movie .m0-phone { left: 42%; }
}
@media (min-width: 901px) {
  #earlier-action .p5-movie .m-chat { margin-top: auto; }
  #earlier-action .p5-movie .m-app-top { left: 13%; top: 4.6%; }
  #earlier-action .p5-scene--4 .m-ubi--2 { animation: m-rise 0.25s ease 3.05s both !important; }
}
@container (max-width: 1000px) {
  #earlier-action .p5-movie .m-ubi--2 { display: none; }
}


/* Real phones, Alex 10-15 ("don't make a phone, use a real looking phone"): every phone on the page is Apple's
   iPhone 17 Pro product bezel (Silver, from Apple Design Resources) with our screen in its cut-out.
   Cut-out in the 1350x2760 frame: x 72..1277, y 69..2690, so the screen inset is 5.333% of the width on each side and
   69/1350 = 5.111% of the width top and bottom (padding percentages resolve against width). */
.p2-phone-frame, #everyday .app-device, #earlier-action .p5-movie .m-iphone {
  position: relative; box-sizing: border-box; aspect-ratio: 1350 / 2760; padding: 5.111% 5.333% !important;
  border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; overflow: visible !important;
  filter: drop-shadow(0 22px 26px #0e3b4738) drop-shadow(0 4px 6px #0e3b4722);
}
.p2-phone-frame::before, #everyday .app-device::before, #earlier-action .p5-movie .m-iphone::before {
  content: ""; position: absolute; inset: 0; z-index: 4; background: url("/v34-assets/iphone-17-pro-silver.webp") center / 100% 100% no-repeat; pointer-events: none;
}
.p2-phone-frame > img, #everyday .app-device > video, #everyday .app-device > img, #earlier-action .p5-movie .m-iphone > img, #earlier-action .p5-movie .m-app {
  display: block; width: 100% !important; height: 100% !important; object-fit: cover; object-position: top; border: 0 !important; border-radius: 13.2% / 6.1% !important; box-shadow: none !important; background: #fff;
}
.p2-island, .p2-btn, #earlier-action .p5-movie .m-island { display: none !important; }
#everyday .app-reveal[data-topic="health"] .app-device::after, #everyday .app-reveal[data-topic="stool"] .app-device::after { left: 5.333%; right: 5.333%; top: 2.5%; z-index: 3; border-radius: 13.2% 13.2% 0 0 / 60% 60% 0 0; }
.p2-phone-frame .p2-seat { z-index: 5; }
#earlier-action .p5-movie .m-app-top { left: 14%; top: 3.6%; z-index: 5; }
/* the screen is pinned to the frame's cut-out (insets in % of the phone itself, not of its container) */
.p2-phone-frame, #everyday .app-device, #earlier-action .p5-movie .m-iphone { padding: 0 !important; }
.p2-phone-frame > img, #everyday .app-device > video, #everyday .app-device > img, #earlier-action .p5-movie .m-iphone > img, #earlier-action .p5-movie .m-app {
  position: absolute !important; left: 5.333% !important; right: 5.333% !important; top: 2.5% !important; bottom: 2.5% !important; width: auto !important; height: auto !important;
}
#everyday .app-device > [hidden] { display: none !important; }
.p2-phone-frame > img, #everyday .app-device > video, #everyday .app-device > img, #earlier-action .p5-movie .m-iphone > img, #earlier-action .p5-movie .m-app {
  right: auto !important; bottom: auto !important; width: 89.333% !important; height: 95% !important; max-width: none !important; max-height: none !important;
}
@media (min-width: 901px) {
  /* scene 2: one message is flagged in the list; a line draws from it to the escalation card */
  #earlier-action .p5-movie .m1-inbox { left: 3%; top: 6%; width: 48%; height: 88%; }
  #earlier-action .p5-movie .m-msg-flag { background: #fff4f0; border-color: #e9a493; box-shadow: 0 0 0 .18em #e9a49355; }
  #earlier-action .p5-movie .m-em-flag { background: #fbe0d8 !important; color: #a5503b !important; }
  #earlier-action .p5-movie .m1-link { left: 51%; top: 30%; width: 9%; height: 18%; overflow: visible; z-index: 2; }
  #earlier-action .p5-movie .m1-link path { fill: none; stroke: #d0705c; stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 100; }
  #earlier-action .p5-movie .m1-flag { left: 60%; top: 10%; width: 37%; border-color: #e9a493; box-shadow: 0 2em 4em -2em #a5503b55, 0 0 0 .2em #e9a49340; }
  #earlier-action .p5-movie .m1-flag .m-pill { white-space: nowrap; }
  #earlier-action .p5-movie .m-alert { padding: .9em 1.1em; }
  /* UBi at a real size beside the escalation */
  #earlier-action .p5-movie .m1-ubi { left: 66%; top: 62%; width: 24%; height: auto; filter: drop-shadow(0 1.2em 1.6em #0e3b4740); }
  #earlier-action .p5-movie .m-source { left: 2%; top: 26%; width: 18%; padding: 1.2em .8em; }
  #earlier-action .p5-movie .m-source img { width: 100%; height: auto; max-width: 9em; }
  #earlier-action .p5-movie .m2-flow { left: 20.5%; top: 47%; width: 4%; }

  /* timeline (fast): messages land, the flagged one lights up, the line draws, the card pops, UBi follows */
  #earlier-action .p5-scene--1 .m-msgs li { animation: m-rise .3s cubic-bezier(.2, .8, .25, 1) both; }
  #earlier-action .p5-scene--1 .m-msgs li:nth-child(1) { animation-delay: .3s; }
  #earlier-action .p5-scene--1 .m-msgs li:nth-child(2) { animation-delay: .6s; }
  #earlier-action .p5-scene--1 .m-msgs li:nth-child(3) { animation: m-rise .3s cubic-bezier(.2, .8, .25, 1) .9s both, m-flag-pulse .9s ease 1.6s 2 both; }
  #earlier-action .p5-scene--1 .m-msgs li:nth-child(4) { animation-delay: 1.2s; }
  #earlier-action .p5-scene--1 .m-msgs li:nth-child(5) { animation-delay: 1.5s; }
  #earlier-action .p5-scene--1 .m-msgs em { animation: m-pop .25s ease both; }
  #earlier-action .p5-scene--1 .m-msgs li:nth-child(1) em { animation-delay: .5s; }
  #earlier-action .p5-scene--1 .m-msgs li:nth-child(2) em { animation-delay: .8s; }
  #earlier-action .p5-scene--1 .m-msgs li:nth-child(3) em { animation-delay: 1.5s; }
  #earlier-action .p5-scene--1 .m-msgs li:nth-child(4) em { animation-delay: 1.4s; }
  #earlier-action .p5-scene--1 .m-msgs li:nth-child(5) em { animation-delay: 1.7s; }
  #earlier-action .p5-scene--1 .m1-n { animation: m-count 1.6s cubic-bezier(.3, 0, .2, 1) .3s both; }
  #earlier-action .p5-scene--1 .m1-link { animation: m-fade .1s linear 1.9s both !important; }
  #earlier-action .p5-scene--1 .m1-link path { animation: m-draw .5s ease 1.9s both; }
  #earlier-action .p5-scene--1 .m1-flag { animation: m-rise .35s cubic-bezier(.2, .8, .25, 1) 2.35s both !important; }
  #earlier-action .p5-scene--1 .m-metric svg { animation: m-wipe .6s ease 2.6s both; }
  #earlier-action .p5-scene--1 .m-bars i { animation: m-shrink .6s cubic-bezier(.4, 0, .2, 1) 2.7s both; }
  #earlier-action .p5-scene--1 .m-pill--alert { animation: m-pop .25s ease 2.5s both; }
  #earlier-action .p5-scene--1 .m-alert { animation: m-rise .3s cubic-bezier(.2, .8, .25, 1) 3.2s both; }
  #earlier-action .p5-scene--1 .m1-ubi { animation: m-rise .4s cubic-bezier(.2, .8, .25, 1) 3.4s both !important; }
}
@keyframes m-flag-pulse { 50% { box-shadow: 0 0 0 .5em #e9a49366; } }
@container (max-width: 1000px) {
  #earlier-action .p5-movie .m-msgs li:nth-child(n+4) { display: none; }
  #earlier-action .p5-movie .m1-ubi { width: 20%; left: 70%; top: 66%; }
}
@media (min-width: 901px) { #earlier-action .p5-movie .m1-link { left: 49.1%; top: 27.9%; width: 10.9%; height: 18.6%; } }
@container (max-width: 1000px) { #earlier-action .p5-movie .m1-link { left: 48.5%; top: 36.1%; width: 11.5%; height: 26.6%; } }
@media (min-width: 901px) { #earlier-action .p5-movie .m1-link { width: 11.6%; } #earlier-action .p5-movie .m1-flag { left: 59.6%; } }
@container (max-width: 1000px) { #earlier-action .p5-movie .m1-link { width: 12.2%; } }
@media (min-width: 901px) {
  /* scene 3: the check-in card and the chart share one centre line, and the data stream runs edge to edge between them */
  #earlier-action .p5-movie .m-source { top: 50%; transform: translateY(-50%); }
  #earlier-action .p5-scene--2 .m-source { animation-name: m-rise-mid !important; }
  #earlier-action .p5-movie .m2-flow { left: 20%; width: 5%; top: calc(50% - 2.5%); height: 5%; z-index: 3; }
  #earlier-action .p5-movie .m2-flow path { stroke-width: 3.5; stroke-dasharray: 6 5; }
  #earlier-action .p5-movie .m2-arrow { left: calc(25% - .55em); top: 50%; width: 0; height: 0; margin-top: -.45em; border-left: .6em solid #29cdde; border-top: .45em solid transparent; border-bottom: .45em solid transparent; z-index: 3; }
  #earlier-action .p5-scene--2 .m2-arrow { animation: m-fade .2s ease .5s both !important; }
}
@media (min-width: 901px) {
  /* the escalation line reveals left to right (a dash-length draw cuts it short on wide screens) */
  #earlier-action .p5-movie .m1-link path { stroke-dasharray: none; }
  #earlier-action .p5-scene--1 .m1-link path { animation: none !important; }
  #earlier-action .p5-scene--1 .m1-link { animation: m-wipe .45s ease 1.9s both !important; }
}
@media (min-width: 901px) { #earlier-action .p5-movie .m1-link { width: 10.6%; z-index: 0; } }
/* Panel 5, Alex 10-15: the live UBi beside the films at a real size on desktop */
@media (min-width: 1500px) {
  #earlier-action .p5-frame.p5-movie .workflow-seat { left: -21%; bottom: -4%; width: 20%; height: 40%; }
}

/* ===== Panel 7, the evidence panel (Alex 10-15): a condition picker, then each condition laid out like a pharma HCP
   efficacy page: claim, endpoint ladder, the problem, evidence cards with paired-bar charts, cost of care, references.
   Dark ink chapter; the data sits on a light sheet. Nothing under 15px on desktop. Source: work/panel7-evidence.css ===== */
.evidence-chapter .outcomes-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(22px, 2.6svh, 36px); width: min(2000px, 90vw); }
.evidence-chapter .outcomes-intro { display: grid; grid-template-columns: minmax(0, 1fr) clamp(120px, 10vw, 190px); column-gap: 32px; align-items: end; }
.evidence-chapter .outcomes-intro h2 { grid-column: 1; font-size: clamp(38px, 3vw, 58px); line-height: 1.05; color: #fff; }
.evidence-chapter .outcomes-intro > p { grid-column: 1; max-width: 70ch; margin: 12px 0 0; font: 400 clamp(17px, 1.05vw, 22px)/1.45 var(--text); color: #c9dbe4; }
.evidence-chapter .outcomes-intro .flow-seat { grid-column: 2; grid-row: 1 / 3; position: static; width: 100%; height: clamp(150px, 13vw, 250px); margin: 0; }
.evidence-chapter .outcomes-evidence { padding: 0; background: none; border-radius: 0; }

/* picker */
.ev-picker { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; }
.ev-tab { display: grid; gap: 2px; min-width: 150px; padding: 12px 20px 11px; border: 1.5px solid #ffffff3d; border-radius: 16px; background: #ffffff10; color: #fff; text-align: left; cursor: pointer; transition: background .2s, border-color .2s; }
.ev-tab strong { font: 700 clamp(19px, 1.2vw, 24px)/1.1 var(--display); letter-spacing: -.01em; }
.ev-tab span { font: 500 15px/1.25 var(--text); color: #b7cbd6; }
.ev-tab:hover { background: #ffffff1f; border-color: #ffffff66; }
.ev-tab[aria-selected="true"] { background: #fff; border-color: #fff; color: var(--ink); }
.ev-tab[aria-selected="true"] span { color: #4e6b77; }
.ev-tab[data-pending] { opacity: .55; }
.ev-tab:focus-visible { outline: 3px solid var(--cyan, #29cdde); outline-offset: 2px; }

/* pane */
.ev-pane { padding: clamp(24px, 2.4vw, 40px) clamp(24px, 2.6vw, 44px) clamp(20px, 2vw, 32px); border-radius: 28px; background: #f5f9fc; color: var(--ink); }
.ev-pane--pending { padding: 28px 36px; }
.ev-pending { margin: 0; font: 500 clamp(17px, 1.1vw, 21px)/1.4 var(--text); color: #4e6b77; }
.ev-claim { margin: 0 0 clamp(18px, 2svh, 28px); max-width: 30ch; font: 600 clamp(26px, 2.1vw, 40px)/1.12 var(--display); letter-spacing: -.025em; color: var(--ink); text-wrap: balance; }

/* ladder */
.ev-ladder { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0 0 clamp(18px, 2svh, 28px); padding: 0; list-style: none; counter-reset: none; }
.ev-ladder li { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 12px; row-gap: 4px; padding: 16px 28px 16px 18px; background: #fff; border: 1px solid #d9e6ee; }
.ev-ladder li:first-child { border-radius: 18px 0 0 18px; }
.ev-ladder li:last-child { border-radius: 0 18px 18px 0; }
.ev-ladder li + li { border-left: 0; }
.ev-ladder li:not(:last-child)::after { content: ""; position: absolute; right: -11px; top: 50%; z-index: 1; width: 20px; height: 20px; transform: translateY(-50%) rotate(45deg); background: #fff; border-top: 1px solid #d9e6ee; border-right: 1px solid #d9e6ee; }
.ev-ladder li:last-child { background: #e3f4f7; border-color: #bfe4ea; }
.ev-step-n { grid-row: 1 / 4; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #fff; font: 700 15px/1 var(--text); }
.ev-ladder strong { font: 700 clamp(17px, 1.15vw, 22px)/1.15 var(--display); color: var(--ink); }
.ev-step-target { font: 500 15px/1.3 var(--text); color: #4e6b77; }
.ev-step-ubi { font: 500 15px/1.35 var(--text); color: var(--ink); }
.ev-step-ubi b, .ev-ubi b { display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 99px; background: #087d96; color: #fff; font: 700 12.5px/1.4 var(--text); letter-spacing: .04em; vertical-align: 1px; }

/* the problem */
.ev-problem { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0 0 clamp(18px, 2svh, 28px); padding: 0; list-style: none; }
.ev-problem li { display: grid; gap: 4px; padding: 14px 18px; border-radius: 14px; background: #fff; border: 1px solid #d9e6ee; }
.ev-problem strong { font: 700 clamp(28px, 2vw, 40px)/1 var(--display); letter-spacing: -.03em; color: #b8574a; }
.ev-problem span { font: 500 15.5px/1.35 var(--text); color: #34515c; }

/* evidence cards and economics */
.ev-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0 0 clamp(16px, 2svh, 24px); }
.ev-card, .ev-econ { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 20px; border-radius: 20px; background: #fff; border: 1px solid #d9e6ee; box-shadow: 0 18px 40px -30px #0e3b4766; }
.ev-chip { align-self: start; padding: 4px 10px; border-radius: 99px; background: #e3f4f7; color: #0a6f84; font: 700 13px/1.3 var(--text); letter-spacing: .05em; text-transform: uppercase; }
.ev-chip--econ { background: #ffffff22; color: #fff; }
.ev-card h4 { margin: 0; font: 600 clamp(19px, 1.3vw, 25px)/1.2 var(--display); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.ev-big { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ev-big strong { font: 600 clamp(52px, 4vw, 82px)/1 var(--display); letter-spacing: -.045em; color: #087d96; font-variant-numeric: tabular-nums; }
.ev-big strong span { font-size: .5em; letter-spacing: 0; }
.ev-big em { max-width: 16ch; font: 600 clamp(15px, 1vw, 19px)/1.25 var(--text); font-style: normal; color: var(--ink); }
.ev-chart { margin: 4px 0 2px; padding: 12px 14px; border-radius: 12px; background: #f5f9fc; }
.ev-chart figcaption { margin-bottom: 8px; font: 600 15px/1.3 var(--text); color: #4e6b77; }
.ev-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 10px; row-gap: 4px; align-items: center; padding: 4px 0; font: 500 15px/1.3 var(--text); color: var(--ink); }
.ev-row span { grid-column: 1; grid-row: 1; }
.ev-row b { grid-column: 2; grid-row: 1 / 3; font: 700 clamp(18px, 1.2vw, 23px)/1 var(--display); color: #087d96; }
.ev-row--b b { color: #6c8794; }
.ev-row i { grid-column: 1; grid-row: 2; display: block; height: 10px; width: var(--v); border-radius: 99px; background: #0c93b0; }
.ev-row--b i { background: #9fb6c0; }
.ev-card > p { margin: 0; font: 400 clamp(15px, 1vw, 18px)/1.45 var(--text); color: #34515c; }
.ev-ubi { margin-top: auto !important; padding-top: 10px; border-top: 1px solid #e3edf2; color: var(--ink) !important; font-weight: 500 !important; }
.ev-ref { font-size: .7em; line-height: 0; }
.ev-ref a { color: #087d96; text-decoration: none; }
.ev-econ { background: var(--ink); border-color: var(--ink); color: #fff; }
.ev-econ .ev-big strong { color: #7fe3ee; font-size: clamp(42px, 2.9vw, 60px); }
.ev-econ .ev-big em { color: #fff; max-width: 22ch; }
.ev-econ > p { margin: 0; font: 400 clamp(15px, 1vw, 18px)/1.45 var(--text); color: #d5e5ec; }
.ev-econ ul { margin: auto 0 0; padding: 10px 0 0 18px; border-top: 1px solid #ffffff2b; display: grid; gap: 6px; font: 500 15px/1.35 var(--text); color: #fff; }
.ev-econ .ev-ref a { color: #7fe3ee; }

/* references and the note */
.ev-refs { columns: 2; column-gap: 32px; margin: 0; padding: 14px 0 0; border-top: 1px solid #d9e6ee; list-style: none; }
.ev-refs li { display: grid; grid-template-columns: 22px 1fr; gap: 6px; break-inside: avoid; margin: 0 0 6px; font: 400 15px/1.35 var(--text); color: #4e6b77; }
.ev-refs li span { font-weight: 700; color: var(--ink); }
.ev-refs a { color: inherit; text-decoration: none; }
.ev-refs a:hover { color: #087d96; text-decoration: underline; }
.ev-note { margin: 14px 0 0; font: 400 15px/1.45 var(--text); color: #b7cbd6; max-width: 90ch; }

@media (max-width: 1499px) and (min-width: 901px) {
  .ev-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ev-econ { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
  .ev-econ > p { flex: 1 1 320px; }
  .ev-econ ul { flex: 1 1 100%; margin: 0; }
  .ev-ladder li { grid-template-columns: auto 1fr; padding: 14px 24px 14px 14px; }
  .ev-step-ubi { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .evidence-chapter .outcomes-intro { grid-template-columns: minmax(0, 1fr) 82px; }
  .ev-picker { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
  .ev-tab { flex: none; min-width: 0; padding: 10px 14px; }
  .ev-tab span { display: none; }
  .ev-pane { padding: 18px 16px; border-radius: 20px; }
  .ev-claim { font-size: 24px; }
  .ev-ladder { grid-template-columns: 1fr; }
  .ev-ladder li, .ev-ladder li:first-child, .ev-ladder li:last-child { border-radius: 14px; border-left: 1px solid #d9e6ee; margin-bottom: 8px; padding: 12px 14px; }
  .ev-ladder li::after { display: none; }
  .ev-problem, .ev-grid { grid-template-columns: 1fr; }
  .ev-refs { columns: 1; }
}

/* Panel 8: the three quotes that moved from panel 6 */
.practice-voices { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: clamp(10px, 2svh, 24px) 0 0; }
.practice-voices figure { margin: 0; padding: 20px 22px; border-radius: 18px; background: #ffffffd9; border: 1px solid #ffffff; }
.practice-voices blockquote { margin: 0 0 10px; font: 500 clamp(16px, 1.05vw, 20px)/1.4 var(--display); color: var(--ink); }
.practice-voices p { margin: 0; font: 600 15px/1.3 var(--text); color: #4e6b77; }
@media (max-width: 900px) { .practice-voices { grid-template-columns: 1fr; } }

/* Panel 7 fixes after the first build: the old evidence box was a two-column grid (it stretched the picker into columns);
   the UBi seat sits beside the intro instead of forcing its row heights; the UBi chip is 14px; four cards + economics */
.evidence-chapter .outcomes-evidence { display: block; }
.evidence-chapter .outcomes-intro { display: block; position: relative; padding-right: clamp(160px, 11vw, 230px); min-height: clamp(150px, 12vw, 230px); }
.evidence-chapter .outcomes-intro h2 { margin: 0; }
.evidence-chapter .outcomes-intro .flow-seat { position: absolute; right: 0; top: -10px; width: clamp(140px, 10vw, 200px); height: clamp(170px, 12vw, 240px); }
.ev-step-ubi b, .ev-ubi b { font-size: 14px; }
.ev-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ev-grid .ev-econ { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 32px; }
.ev-grid .ev-econ .ev-chip { flex: 0 0 100%; }
.ev-grid .ev-econ .ev-big { flex: 0 0 auto; max-width: 34%; }
.ev-grid .ev-econ > p { flex: 1 1 320px; }
.ev-grid .ev-econ ul { flex: 1 1 100%; margin: 0; }
.ev-card { padding: 20px 20px 18px; }
.ev-big strong { font-size: clamp(44px, 3vw, 64px); }
.ev-card h4 { font-size: clamp(18px, 1.15vw, 22px); }
@media (max-width: 1699px) and (min-width: 901px) {
  .ev-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .evidence-chapter .outcomes-intro { padding-right: 0; min-height: 0; }
  .evidence-chapter .outcomes-intro .flow-seat { position: static; width: 82px; height: 115px; margin: 8px 0 0; }
  .ev-grid { grid-template-columns: 1fr; }
  .ev-grid .ev-econ { flex-direction: column; align-items: stretch; }
  .ev-grid .ev-econ .ev-big { max-width: none; }
}

/* Panel 7, second pass: the chip at 14px; the claim at display size (the chapter's base paragraph rule had won);
   the cost band laid out as a grid so the chip stops stretching across it; shorter big-number labels get room */
.ev-chip { font-size: 14px; }
.evidence-chapter .outcomes-evidence .ev-claim { font: 600 clamp(26px, 2.1vw, 40px)/1.12 var(--display); letter-spacing: -.025em; color: var(--ink); max-width: 34ch; margin: 0 0 clamp(18px, 2svh, 28px); }
.ev-grid .ev-econ { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 40px; row-gap: 12px; align-items: center; }
.ev-grid .ev-econ .ev-chip { grid-column: 1; grid-row: 1; justify-self: start; width: auto; flex: none; max-width: none; }
.ev-grid .ev-econ .ev-big { grid-column: 1; grid-row: 2; max-width: 460px; }
.ev-grid .ev-econ > p { grid-column: 2; grid-row: 1 / 3; align-self: center; margin: 0; }
.ev-grid .ev-econ ul { grid-column: 1 / -1; grid-row: 3; margin: 0; padding-top: 12px; }
.ev-big em { max-width: 20ch; }
@media (max-width: 900px) {
  .ev-grid .ev-econ { grid-template-columns: 1fr; }
  .ev-grid .ev-econ .ev-chip, .ev-grid .ev-econ .ev-big, .ev-grid .ev-econ > p, .ev-grid .ev-econ ul { grid-column: 1; grid-row: auto; }
}

/* Panel 7, the IBD study stack (Alex 10-15: "a ton more evidence for the IBD beyond CALM"): two sections under the cards,
   the programs that measured this kind of care, and the cost-of-care levers with their evidence and modeled values */
.ev-sect { margin: 0 0 clamp(18px, 2svh, 28px); padding: clamp(20px, 1.8vw, 30px) clamp(22px, 2vw, 32px); border-radius: 20px; background: #fff; border: 1px solid #d9e6ee; }
.ev-sect h3 { margin: 0 0 6px; font: 600 clamp(22px, 1.6vw, 32px)/1.15 var(--display); letter-spacing: -.02em; color: var(--ink); }
.ev-sect-lead { margin: 0 0 18px; max-width: 110ch; font: 400 clamp(15px, 1vw, 18px)/1.45 var(--text); color: #34515c; }
.ev-programs ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.ev-programs li { display: grid; gap: 6px; align-content: start; padding: 16px 18px; border-radius: 14px; background: #f5f9fc; border: 1px solid #d9e6ee; }
.ev-programs li > strong { font: 700 clamp(17px, 1.15vw, 22px)/1.15 var(--display); color: var(--ink); }
.ev-prog-design { font: 500 15px/1.3 var(--text); color: #4e6b77; }
.ev-programs .ev-big { margin-top: 6px; }
.ev-programs .ev-big strong { font-size: clamp(34px, 2.5vw, 50px); }
.ev-programs .ev-big em { max-width: 18ch; }
.ev-programs li p { margin: 0; font: 400 15px/1.42 var(--text); color: #34515c; }
.ev-lever { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 2fr) 120px 120px; column-gap: 24px; align-items: center; padding: 12px 0; border-top: 1px solid #e3edf2; }
.ev-lever--head { padding: 0 0 8px; border-top: 0; }
.ev-lever--head b, .ev-lever--head i { font: 700 13px/1.3 var(--text); letter-spacing: .05em; text-transform: uppercase; color: #4e6b77; }
.ev-lever strong { font: 700 clamp(16px, 1.05vw, 20px)/1.2 var(--display); color: var(--ink); }
.ev-lever p { margin: 0; font: 400 15px/1.42 var(--text); color: #34515c; }
.ev-lever b { font: 700 clamp(22px, 1.5vw, 30px)/1 var(--display); letter-spacing: -.03em; color: #087d96; font-variant-numeric: tabular-nums; text-align: right; }
.ev-lever i { font: 600 clamp(17px, 1.1vw, 21px)/1 var(--display); font-style: normal; color: #6c8794; font-variant-numeric: tabular-nums; text-align: right; }
.ev-lever--total { margin-top: 4px; padding: 16px 18px; border-radius: 14px; border-top: 0; background: var(--ink); color: #fff; }
.ev-lever--total strong { color: #fff; }
.ev-lever--total p { color: #d5e5ec; }
.ev-lever--total b { color: #7fe3ee; font-size: clamp(30px, 2.2vw, 44px); }
.ev-lever--total i { color: #b7cbd6; }
.ev-lever--total .ev-ref a { color: #7fe3ee; }
.ev-conventional { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid #e3edf2; font: 400 clamp(15px, 1vw, 18px)/1.45 var(--text); color: #34515c; }
@media (max-width: 1499px) and (min-width: 901px) {
  .ev-programs ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ev-lever { grid-template-columns: minmax(0, 1fr) 110px 110px; }
  .ev-lever strong { grid-column: 1 / -1; }
  .ev-lever--head strong, .ev-lever--head p { display: none; }
}
@media (max-width: 900px) {
  .ev-programs ul { grid-template-columns: 1fr; }
  .ev-lever { grid-template-columns: 1fr 1fr; row-gap: 6px; }
  .ev-lever strong, .ev-lever p { grid-column: 1 / -1; }
  .ev-lever b, .ev-lever i { text-align: left; }
  .ev-lever--head { display: none; }
}

/* Panel 7, the in-silico projection (Alex 10-15: "our simulated in silico results ... as the primary data point over time"):
   four small-multiple SVG charts, usual care vs UBi central with the optimistic band, 36 months */
.ev-sim-key { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 16px; padding: 0; list-style: none; font: 600 15px/1.3 var(--text); color: #34515c; }
.ev-sim-key li { display: flex; align-items: center; gap: 8px; }
.ev-sim-key li::before { content: ""; width: 26px; height: 4px; border-radius: 99px; background: #9fb6c0; }
.ev-sim-key--ubi::before { background: #0c93b0; }
.ev-sim-key--band::before { height: 12px; background: #0c93b02e; border: 1px solid #0c93b066; }
.ev-sim-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ev-sim { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 16px 18px 14px; border-radius: 14px; background: #f5f9fc; border: 1px solid #d9e6ee; }
.ev-sim figcaption { display: grid; gap: 2px; }
.ev-sim figcaption strong { font: 700 clamp(17px, 1.15vw, 22px)/1.15 var(--display); color: var(--ink); }
.ev-sim figcaption span { font: 500 15px/1.3 var(--text); color: #4e6b77; }
.ev-sim svg { width: 100%; height: auto; display: block; overflow: visible; }
.ev-sim svg text { font-family: var(--text); fill: #4e6b77; }
.ev-sim svg .axis { stroke: #d9e6ee; stroke-width: 1; }
.ev-sim svg .grid { stroke: #e3edf2; stroke-width: 1; stroke-dasharray: 3 4; }
.ev-sim svg .usual { fill: none; stroke: #9fb6c0; stroke-width: 3.5; stroke-linecap: round; }
.ev-sim svg .ubi { fill: none; stroke: #0c93b0; stroke-width: 4; stroke-linecap: round; }
.ev-sim svg .band { fill: #0c93b02e; stroke: none; }
.ev-sim svg .end { font-weight: 700; fill: var(--ink); }
.ev-sim svg .end.u { fill: #0c93b0; }
.ev-sim svg .end.c { fill: #6c8794; }
.ev-sim p { margin: auto 0 0; font: 400 15px/1.42 var(--text); color: #34515c; }
.ev-sim-foot { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid #e3edf2; font: 400 15px/1.45 var(--text); color: #4e6b77; max-width: 120ch; }
@media (max-width: 1499px) and (min-width: 901px) { .ev-sim-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .ev-sim-grid { grid-template-columns: 1fr; } }

/* Panel 7, in-silico pass 2 (Alex 10-15: sustained deep remission, compounding adverse outcomes, NNT, cost per remission):
   the NNT strip above the charts, and the REACT marker dots */
.ev-nnt { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0 0 18px; padding: 0; list-style: none; }
.ev-nnt li { display: grid; gap: 4px; align-content: start; padding: 16px 18px; border-radius: 14px; background: var(--ink); color: #fff; }
.ev-nnt strong { font: 600 clamp(40px, 3vw, 60px)/1 var(--display); letter-spacing: -.04em; color: #7fe3ee; font-variant-numeric: tabular-nums; }
.ev-nnt span { font: 600 clamp(15px, 1.05vw, 19px)/1.25 var(--text); color: #fff; }
.ev-nnt em { font: 400 15px/1.35 var(--text); font-style: normal; color: #b7cbd6; }
.ev-nnt .ev-ref a { color: #7fe3ee; }
.ev-sim-key--mark::before { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid #0c93b0; }
.ev-sim svg .mark { stroke-width: 3; fill: #fff; }
.ev-sim svg .mark.u { stroke: #0c93b0; }
.ev-sim svg .mark.c { stroke: #6c8794; }
.ev-sim svg .mark-label { fill: #4e6b77; font-weight: 600; }
@media (max-width: 1499px) and (min-width: 901px) { .ev-nnt { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .ev-nnt { grid-template-columns: 1fr; } }

/* Panel 7, the simple panel (Alex 10-15: "sell that narrative simply, then behind it a detailed screen you can click into"):
   claim, the story, four numbers, one chart, a door; the full dossier opens as an overlay */
.ev-summary { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(16px, 1.8svh, 24px); }
.ev-summary--chart { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); column-gap: clamp(24px, 2.2vw, 44px); }
.ev-summary .ev-claim { grid-column: 1 / -1; margin-bottom: 0; max-width: 40ch; }
.ev-summary-main { display: grid; gap: 18px; align-content: start; }
.ev-story { margin: 0; max-width: 72ch; font: 400 clamp(17px, 1.15vw, 22px)/1.5 var(--text); color: #34515c; }
.ev-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.ev-tiles li { display: grid; gap: 4px; align-content: start; padding: 16px 18px; border-radius: 14px; background: var(--ink); color: #fff; }
.ev-tiles strong { font: 600 clamp(38px, 2.8vw, 56px)/1 var(--display); letter-spacing: -.04em; color: #7fe3ee; font-variant-numeric: tabular-nums; }
.ev-tiles span { font: 600 clamp(15px, 1.05vw, 19px)/1.25 var(--text); color: #fff; }
.ev-tiles em { font: 400 15px/1.35 var(--text); font-style: normal; color: #b7cbd6; }
.ev-tiles .ev-ref a { color: #7fe3ee; }
.ev-sim--summary { grid-column: 2; grid-row: 2; align-self: start; background: #fff; }
.ev-sim--summary .ev-sim-key { margin: 0; }
.ev-more { grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border: 0; border-radius: 99px; background: #087d96; color: #fff; font: 700 clamp(15px, 1.05vw, 18px)/1 var(--text); cursor: pointer; transition: background .2s; }
.ev-more:hover { background: #0a6f84; }
.ev-more:focus-visible { outline: 3px solid var(--cyan, #29cdde); outline-offset: 2px; }
.ev-more span { font-size: 1.2em; line-height: 0; }
/* the detail overlay */
.ev-detail { position: fixed; inset: 0; z-index: 60; overflow-y: auto; padding: clamp(16px, 3svh, 40px) clamp(16px, 3vw, 48px); background: #06202acc; backdrop-filter: blur(6px); }
.ev-detail-sheet { width: min(2000px, 100%); margin: 0 auto; padding: clamp(20px, 2vw, 36px) clamp(22px, 2.4vw, 44px) clamp(20px, 2vw, 32px); border-radius: 28px; background: #f5f9fc; color: var(--ink); box-shadow: 0 40px 100px -40px #000c; }
.ev-detail-head { position: sticky; top: calc(-1 * clamp(20px, 2vw, 36px)); z-index: 2; display: flex; align-items: baseline; gap: 12px; margin: calc(-1 * clamp(20px, 2vw, 36px)) calc(-1 * clamp(22px, 2.4vw, 44px)) 18px; padding: 16px clamp(22px, 2.4vw, 44px); background: #f5f9fcf2; border-bottom: 1px solid #d9e6ee; border-radius: 28px 28px 0 0; }
.ev-detail-head strong { font: 700 clamp(22px, 1.6vw, 30px)/1.1 var(--display); color: var(--ink); }
.ev-detail-head span { font: 500 clamp(15px, 1.05vw, 19px)/1.3 var(--text); color: #4e6b77; }
.ev-close { margin-left: auto; width: 44px; height: 44px; border: 1.5px solid #d9e6ee; border-radius: 50%; background: #fff; color: var(--ink); font: 400 28px/1 var(--display); cursor: pointer; }
.ev-close:hover { background: #e3f4f7; }
html.ev-lock, html.ev-lock body { overflow: hidden; }
@media (max-width: 1499px) and (min-width: 901px) {
  .ev-summary--chart { grid-template-columns: 1fr; }
  .ev-sim--summary { grid-column: 1; grid-row: auto; }
}
@media (max-width: 900px) {
  .ev-summary--chart { grid-template-columns: 1fr; }
  .ev-sim--summary { grid-column: 1; grid-row: auto; }
  .ev-tiles { grid-template-columns: 1fr; }
  .ev-detail { padding: 10px; }
  .ev-detail-sheet { padding: 16px; border-radius: 20px; }
  .ev-detail-head { margin: -16px -16px 14px; padding: 12px 16px; border-radius: 20px 20px 0 0; top: -16px; }
}

/* Panel 7 snapshot, pass 2 (Alex 10-15: "less text on the initial snapshot views, and a click here to learn more spot") */
.ev-story { font-size: clamp(18px, 1.25vw, 24px); max-width: 60ch; }
.ev-tiles li { gap: 6px; padding: 18px 20px; }
.ev-tiles strong { font-size: clamp(44px, 3.2vw, 64px); }
.ev-tiles span { font-size: clamp(16px, 1.1vw, 20px); }
.ev-more { padding: 18px 30px; font-size: clamp(17px, 1.15vw, 21px); box-shadow: 0 14px 30px -16px #087d96; }
.ev-sim--summary figcaption strong { font-size: clamp(19px, 1.3vw, 25px); }

/* the evidence overlay sits above the fixed site nav (z 90) and the mobile sheets */
.ev-detail { z-index: 400; }

/* UBi's voice control, bottom right (Alex 10-14: "need a mute or pause button on the bottom right"); shown while she speaks */
.ubi-voice-control { position: fixed; right: clamp(14px, 1.6vw, 28px); bottom: clamp(14px, 2svh, 28px); z-index: 70; display: flex; gap: 8px; padding: 6px; border-radius: 99px; background: #0f3a47eb; box-shadow: 0 16px 36px -18px #000a; backdrop-filter: blur(8px); }
.ubi-voice-control[hidden] { display: none; }
.ubi-voice-control button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 99px; background: transparent; color: #fff; font: 700 15px/1 var(--text); cursor: pointer; }
.ubi-voice-control button:hover { background: #ffffff1f; }
.ubi-voice-control button:focus-visible { outline: 3px solid var(--cyan, #29cdde); outline-offset: 1px; }
.ubi-voice-control button span { font-size: 14px; line-height: 1; }
@media (max-width: 900px) { .ubi-voice-control { bottom: calc(env(safe-area-inset-bottom, 0px) + 74px); } .ubi-voice-control button b { display: none; } }

/* Hero calls to action (Alex 10-16): the practice demo first, the patient GI check beside it as the outlined second button */
.hero .actions .button-alt { background: #ffffffd9; color: var(--ink); box-shadow: inset 0 0 0 1.5px #0e3b4759; }
.hero .actions .button-alt:hover { background: #fff; box-shadow: inset 0 0 0 1.5px #0e3b47; }
@media (min-width: 901px) and (max-height: 900px) {
  .hero .actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero .actions #watch-intro { align-self: center; margin-top: 4px; }
}
@media (max-width: 900px) {
  html .hero .actions { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; gap: 10px; }
  html .hero .actions .button { width: 100%; white-space: normal; text-align: center; }
  html .hero .actions .text-link { justify-self: start; }
}

/* Window sizes, Alex 2026-10-17 ("on my laptop that looks completely wrong"): the hero and the phone layout measured at
   real laptop, desktop and half-screen windows; each block below changes only the window shape where the page broke. */
/* A: tall desktop windows. The text panel takes its column, not the film's width (the film is height-limited and
   narrow on 16:9 windows, which crushed the buttons and the doctors' logos); the logos drop under the buttons when the
   panel can't hold both on one row. */
@media (min-width: 901px) and (min-height: 901px) {
  .hero-copy { width: auto; justify-self: stretch; container: hero-copy / inline-size; }
}
@container hero-copy (max-width: 1399px) {
  .hero-proof { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 16px; margin: 16px 0 0; padding-left: 0; border-left: 0; }
  .hero-proof-label { flex: none; max-width: 9em; }
}
/* B: short laptop windows. Below the text there is no height left for the film, so it sits beside the text. */
@media (min-width: 1200px) and (max-height: 680px) {
  .hero-layout { --hero-character-width: clamp(260px, 21vw, 360px); --hero-film-col: minmax(0, 1fr); grid-template-columns: minmax(420px, 1fr) var(--hero-film-col) var(--hero-character-width); grid-template-rows: minmax(0, 1fr); column-gap: 28px; }
  .hero-copy { grid-column: 1 / -1; grid-row: 1; grid-template-columns: minmax(420px, 1fr) var(--hero-film-col) var(--hero-character-width); column-gap: 28px; align-self: start; }
  #hero-title, .hero-promise, .hero-proof { grid-column: 1; }
  .hero .actions { grid-column: 3; }
  .hero-copy::before { right: calc(50% - 14px + var(--hero-character-width) / 2 + 12px); }
  .hero-film { grid-column: 2; grid-row: 1; align-self: start; height: calc(100svh - 110px - 82px); max-height: none; }
  .hero-proof { flex-wrap: wrap; }
}
/* C: windows 600 to 900 wide (a laptop window snapped to half the screen, a tablet) use the phone layout, which gives
   every section one full screen. A phone's content fills that; a taller, wider window was left half empty. Here each
   section is as tall as what it holds. */
@media (min-width: 600px) and (max-width: 900px) {
  main > section[data-story]:not(.hero),
  #practices, #questions, #lets-meet { min-height: 0; }
  .voice-gap .gap-composition, .response-story, .voice-layout, .team-story, .evidence-chapter .outcomes-layout,
  .practice-chapter .practice-layout > div:first-child, .faq-layout > div:first-child, .closing-layout { min-height: 0; }
  main > section[data-story]:not(.hero) { padding: clamp(28px, 4svh, 56px) 0; }
  /* the footer spans the window, as on a phone, with its content kept to the page column */
  .site-footer.page-width { width: 100%; max-width: none; padding-inline: max(20px, calc((100% - 620px) / 2)); }
}

/* Panel 7 on one screen (Alex 2026-10-17: "the clinical evidence slide isnt fitting on one screen"). Desktop windows: the
   title on one line beside a smaller UBi, slimmer condition tabs, the four results in one row beside the cost chart, the
   footnote small. Short windows keep the headline, the four results, the chart and the button; the intro line and the
   paragraph wait behind "Click here to learn more". */
@media (min-width: 901px) {
  #outcomes.evidence-chapter { padding-top: clamp(16px, 2.4svh, 34px); padding-bottom: 82px; }
  .evidence-chapter .outcomes-layout { gap: clamp(10px, 1.4svh, 18px); }
  .evidence-chapter .outcomes-intro { min-height: 0; padding-right: clamp(110px, 8vw, 150px); }
  .evidence-chapter .outcomes-intro h2 { font-size: clamp(30px, min(2.5vw, 4.6svh), 50px); line-height: 1.06; }
  .evidence-chapter .outcomes-intro > p:not(.chapter-kicker) { max-width: 120ch; margin-top: 6px; font-size: clamp(15px, min(.95vw, 1.8svh), 19px); line-height: 1.4; }
  .evidence-chapter .outcomes-intro .flow-seat { top: -6px; width: clamp(90px, 7vw, 130px); height: clamp(100px, min(8vw, 13svh), 150px); }
  #outcomes .ev-picker { gap: 8px; margin: 0 0 clamp(8px, 1.2svh, 14px); }
  #outcomes .ev-tab { min-width: 0; padding: 8px 16px 7px; border-radius: 13px; }
  #outcomes .ev-tab strong { font-size: clamp(17px, 1vw, 21px); }
  #outcomes .ev-tab span { font-size: 13px; }
  #outcomes .ev-pane { padding: clamp(16px, 2.2svh, 28px) clamp(20px, 2vw, 34px); border-radius: 22px; }
  #outcomes .ev-summary--chart { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); grid-template-rows: auto auto auto 1fr; column-gap: clamp(20px, 2vw, 40px); row-gap: clamp(10px, 1.5svh, 18px); align-items: start; }
  #outcomes .ev-summary .ev-claim, .evidence-chapter .outcomes-evidence .ev-claim { grid-column: 1; grid-row: 1; max-width: 46ch; margin: 0; font-size: clamp(21px, min(1.7vw, 3.3svh), 34px); }
  #outcomes .ev-summary-main { grid-column: 1; grid-row: 2; gap: clamp(10px, 1.5svh, 16px); }
  #outcomes .ev-story { max-width: 70ch; font-size: clamp(15px, min(1vw, 1.9svh), 19px); line-height: 1.45; }
  #outcomes .ev-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  #outcomes .ev-tiles li { gap: 4px; padding: clamp(10px, 1.5svh, 16px) clamp(12px, 1vw, 16px); border-radius: 12px; }
  #outcomes .ev-tiles strong { font-size: clamp(28px, min(2.2vw, 4.2svh), 46px); }
  #outcomes .ev-tiles span { font-size: clamp(13px, min(.82vw, 1.6svh), 16px); line-height: 1.3; }
  #outcomes .ev-sim--summary { grid-column: 2; grid-row: 1 / 5; align-self: start; }
  #outcomes .ev-sim--summary svg { display: block; width: 100%; max-height: clamp(170px, 32svh, 400px); }
  #outcomes .ev-more { grid-column: 1; grid-row: 3; padding: clamp(11px, 1.5svh, 16px) clamp(20px, 1.6vw, 28px); font-size: clamp(15px, .95vw, 18px); }
  #outcomes .ev-note { margin-top: 6px; max-width: none; font-size: 13px; line-height: 1.4; }
}
@media (min-width: 901px) and (max-width: 1099px) {
  #outcomes .ev-summary--chart { grid-template-columns: minmax(0, 1fr); }
  #outcomes .ev-sim--summary { grid-column: 1; grid-row: auto; }
}
@media (min-width: 901px) and (max-height: 860px) {
  .evidence-chapter .outcomes-intro > p:not(.chapter-kicker), #outcomes .ev-story { display: none; }
  #outcomes .ev-note { font-size: 12px; }
  #outcomes .ev-tab span { display: none; }
  #outcomes .ev-tab { padding: 7px 14px; }
}
@media (min-width: 901px) and (max-height: 680px) {
  #outcomes.evidence-chapter { padding-top: 10px; }
  .evidence-chapter .outcomes-intro h2 { font-size: clamp(24px, 4.2svh, 30px); }
  #outcomes .ev-tab { padding: 5px 12px; }
  #outcomes .ev-tab strong { font-size: 16px; }
  #outcomes .ev-pane { padding: 12px 18px; }
  #outcomes .ev-summary--chart { row-gap: 8px; }
  #outcomes .ev-summary .ev-claim, .evidence-chapter .outcomes-evidence .ev-claim { font-size: 19px; }
  #outcomes .ev-tiles li { padding: 8px 10px; }
  #outcomes .ev-tiles strong { font-size: 24px; }
  #outcomes .ev-tiles span { font-size: 12px; }
  #outcomes .ev-more { padding: 9px 18px; font-size: 14px; box-shadow: none; }
  #outcomes .ev-sim--summary svg { max-height: 26svh; }
}
@media (min-width: 901px) and (max-height: 620px) {
  #outcomes.evidence-chapter { padding-top: 6px; }
  #outcomes .ev-picker { margin-bottom: 6px; }
  #outcomes .ev-sim--summary svg { max-height: 21svh; }
  #outcomes .ev-sim--summary figcaption span { display: none; }
  #outcomes .ev-note { margin-top: 4px; font-size: 11px; line-height: 1.35; }
}

/* A reference number's source, just opened from the evidence summary or a sentence in it (2026-10-17) */
.ev-refs li { transition: background-color .5s ease; border-radius: 8px; }
.ev-refs li.ev-ref-hit { background-color: #fff1bf; }

/* Patient path to the D2C waitlist (2026-10-17, the waitlist team's homepage note): outlined pills beside the practice
   buttons, so practices (filled: Meet us, Bring UBi to your practice) and patients (outlined) read as two paths. */
.site-nav > nav { margin-inline: auto; }
.site-nav > .nav-join { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px #0e3b4759; }
.site-nav > .nav-join:hover { background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink); }
.site-nav > .nav-join + .button { margin-left: -13px; }
.menu-join { display: none; }
@media (max-width: 900px) {
  /* Phones: the header holds the logo, Meet us and the menu; the waitlist heads the menu instead. */
  .site-nav > .nav-join { display: none; }
  .mobile-menu-content .menu-join { display: flex; width: 100%; margin: 0 0 16px; justify-content: center; background: #fff;
    color: var(--ink); box-shadow: inset 0 0 0 1.5px #0e3b4759; }
  .mobile-menu-content .menu-join:hover { background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink); }
}