/* Phone layout (Alex 2026-10-23, after Ramp's phone page: "let's try it, while still keeping UBi involved"). One action
   at the top, and one idea at a time down the page: sections that hid their content behind tabs, steps or a question
   picker show it stacked instead, each block with a spot for UBi (homepage-mobile-ui.js adds the spots and the order).
   Words are unchanged. Loaded after the phone stylesheets; applies at 900px and narrower only. */
@media (max-width: 900px) {
  /* The opening (Alex 2026-10-23: "too many buttons doing different things, the movie is buried, ubi is small"): UBi
     large beside her name with her welcome button under her, the film itself playing in place of the kitchen photo, then
     the two actions, the practice button and the patient link. */
  /* The opening now (Alex 2026-10-23, after several rounds, and after Astra's review "no i agree with you, go ahead"):
     "Meet UBi," on one line with the sub header under it in a column on the left, UBi on the right drawn large in her
     spot ("[  ] [  ubi  ] so she is bigger"), then the sentence (a shorter version on phones), the practice button and
     the patient link, and the film high enough that most of it, and its controls, show on the first screen. Our page
     color behind it, no photo (the film shows the patient); not Ramp's dot grid ("dont copy their background"). */
  .hero-layout {
    grid-template-columns: minmax(0, 1fr) 156px; grid-template-rows: none;
    grid-template-areas: "title ubi" "hello ubi" "promise promise" "actions actions" "film film" "proof proof";
    column-gap: 12px; row-gap: 12px; min-height: 0; padding-bottom: 24px;
  }
  .hero-copy { display: contents; }
  #top.hero { background: #eff4ff; }
  #top .hero-wash { background: none; }
  #bgreel { display: none; }
  /* panel 2 sits on the page color, so nothing behind the opening shows as a strip at its top */
  #care-gap { background: #eff4ff; }
  #hero-title { grid-area: title; align-self: end; padding-top: 0; }
  .hero-greeting { font-size: 32px; line-height: 36px; letter-spacing: -0.01em; white-space: nowrap; } /* "smaller meet ubi" */
  .hero-positioning { display: block; margin-top: 8px; font-size: 20px; line-height: 24px; }
  /* the shorter sentence for phones */
  .hero-promise .promise-full { display: none; }
  .hero-promise .promise-phone[hidden] { display: inline; }
  .hero-promise { grid-area: promise; margin: 0; font-size: 16px; line-height: 22px; color: #2b4651; }
  /* the sentence's two payoffs as drawn tiles in its place (Alex 2026-10-24: "break this down into just the lower admin
     and improved outcomes at scale, but graphically instead of just text") */
  .hero-promise { display: none; }
  .hero-outcomes[hidden] { grid-area: promise; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; padding: 0; list-style: none; }
  .hero-outcomes li { position: relative; display: flex; align-items: flex-end; height: 124px; overflow: hidden; border-radius: 16px; background: #0e3b47; }
  .hero-outcomes img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .hero-outcomes .lower-admin img { object-position: 46% 38%; }
  .hero-outcomes .outcomes img { object-position: 50% 26%; }
  .hero-outcomes li::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #0e3b4700 38%, #0e3b47d9 100%); }
  .hero-outcomes span { position: relative; z-index: 1; padding: 0 12px 11px; font-size: 15px; font-weight: 600; line-height: 1.22; color: #fff; text-shadow: 0 1px 8px #0e3b4799; }
  .hero-proof { grid-area: proof; margin: 8px 0 0; }
  .hero-film { grid-area: film; height: auto; aspect-ratio: 637 / 396; min-height: 0; margin: 0; background: none; box-shadow: none; }
  .hero-film iframe { display: block; width: 100%; height: 100%; border: 0; border-radius: 16px; }
  .hero-film .mobile-film-play { display: none; }
  /* Balance (Alex 2026-10-23: "this does not look good, why is it so unbalanced", and "where is the meet ubi button"):
     the left column is the headline with her "Meet UBi" button under it, about as tall as UBi beside it, so the two
     columns end together; tapping UBi also plays her welcome (homepage-mobile-ui.js). */
  .hero-character { display: contents; }
  #ubi-seat { grid-area: ubi; justify-self: end; align-self: center; position: relative; z-index: 2; width: 156px; height: 200px; cursor: pointer; }
  .hero-character .hello { grid-area: hello; justify-self: start; align-self: start; position: static; transform: none; margin: 0; min-height: 40px; padding: 0 16px; }
  .hero .actions { grid-area: actions; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; }
  .hero .actions .button:not(.button-alt) { flex: 1 1 100%; justify-content: center; }
  .hero .actions .patient-link { font-size: 14px; } /* the button's size, so the button leads */
  .hero .actions .button-alt {
    min-height: 40px; padding: 0; border: 0; background: none; box-shadow: none; width: auto;
    color: var(--rd-teal, #087d96); font-weight: 600; text-decoration: underline; text-underline-offset: 4px;
  }

  /* The patient action reads the same way wherever it appears: a teal link; the practice action is the dark button */
  #everyday .everyday-join { min-height: 40px; padding: 0; border: 0; background: none; box-shadow: none; color: #087d96; font: 600 15px var(--text); text-decoration: underline; text-underline-offset: 4px; }
  /* Learn-more controls are quiet links, so only the two actions look like buttons */
  #earlier-action .workflow-deck + .mobile-detail-trigger, .practice-chapter .revenue-calculator .mobile-detail-trigger, #outcomes .ev-more {
    min-height: 40px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; width: auto;
    color: #087d96; font: 600 15px var(--text); text-align: left; text-decoration: underline; text-underline-offset: 4px;
  }

  /* Panel 2: the three cards, one after another; UBi rides along on card 1's phone, card 2's corner and card 3's head */
  #care-gap .p2-stage > .p2-card--patient, #care-gap .p2-stage > .p2-card--plan, #care-gap .p2-stage > .p2-card--gi { display: flex; }
  #care-gap:has(.p2-stage[data-mobile-view]) .p2-head { display: block; }
  #care-gap .p2-stage { gap: 14px; margin-top: 18px; }
  #care-gap .p2-card--gi .p2-gi-head { position: relative; padding-right: 84px; }
  #care-gap .mobile-gi-seat { position: absolute; right: -10px; top: -14px; width: 86px; height: 118px; }
  #care-gap .p2-card--plan header { padding-right: 84px; }
  #care-gap .p2-card--plan .mobile-plan-seat { right: -10px; top: -14px; width: 86px; height: 118px; }
  /* the chart's labels at phone width: "Her target range" moves to the band's right end, as on laptops */
  #care-gap .p2-plot .p2-target-label { left: auto; right: 6px; max-width: 5.5em; white-space: normal; text-align: right; font-size: 11px; line-height: 1.15; }
  #care-gap .p2-note { font-size: 11px; }

  /* Panel 3: the app picture, then each topic in place of the tabs */
  #everyday .app-topics, #everyday .app-detail { display: none; }
  /* each topic one compact row under the app movie (Alex 2026-10-23); the part the movie is playing is lit */
  #everyday .mobile-topic-list { order: 4; display: grid; gap: 10px; margin-top: 16px; }
  /* the movie fills its frame; its controls bar (hidden controls) no longer leaves an empty strip under it */
  #everyday .app-surface { height: 100%; }
  #everyday .app-media-controls { position: absolute; left: 0; right: 0; bottom: 0; height: 0; min-height: 0; padding: 0; overflow: visible; }
  .mobile-topic {
    display: block; width: 100%; padding: 14px 16px 15px 18px; border: 0; border-left: 4px solid #c9dbe3; border-radius: 16px;
    background: #ffffff8c; text-align: left; color: inherit; font: inherit; cursor: pointer; transition: background .3s, border-color .3s;
  }
  .mobile-topic[aria-current="true"] { border-left-color: #087d96; background: #fff; box-shadow: 0 12px 28px -22px #0e3b4799; }
  .mobile-topic:not([aria-current="true"]) h3, .mobile-topic:not([aria-current="true"]) p { opacity: .72; }
  .mobile-topic-label { display: block; font: 700 11px/1.3 var(--text); letter-spacing: .07em; text-transform: uppercase; color: #087d96; }
  .mobile-topic h3 { margin: 4px 0 0; font: 500 17px/1.2 var(--display); letter-spacing: -.015em; color: var(--rd-ink, #0e3b47); }
  .mobile-topic p { margin: 6px 0 0; font: 400 14px/1.4 var(--text); color: var(--rd-ink-2, #31545e); }

  /* Panel 5: the five steps, each with its picture, number and words; UBi beside each step's heading */
  #earlier-action .workflow-rail, #earlier-action .mobile-workflow-navigation { display: none; }
  #earlier-action .workflow-deck { display: flex; flex-direction: column; gap: 30px; }
  #earlier-action .workflow-deck > .workflow-card, #earlier-action .workflow-deck > .workflow-card[hidden] { display: block !important; visibility: visible !important; }
  #earlier-action .workflow-artifact { height: 200px; min-height: 0; margin: 0 0 14px; }
  #earlier-action .workflow-artifact:has(> img) { padding: 0; overflow: hidden; }
  #earlier-action .workflow-artifact > img { width: 100%; height: 100%; object-fit: cover; }
  #earlier-action .workflow-explanation { display: block; position: relative; padding: 0 92px 0 0; } /* holds its UBi spot */
  #earlier-action .workflow-card::before {
    content: attr(data-phone-step); display: inline-grid; place-items: center; width: 30px; height: 30px; margin-bottom: 10px;
    border-radius: 50%; background: #087d96; color: #fff; font: 700 13px/1 var(--text);
  }
  #earlier-action .workflow-explanation h3 { margin: 0 0 8px; font-size: 20px; line-height: 1.2; }
  #earlier-action .workflow-explanation p { margin: 0; max-width: none; font-size: 15px; line-height: 1.45; }
  #earlier-action .mobile-step-seat { position: absolute; right: -4px; top: -10px; width: 86px; height: 118px; }
  #earlier-action .workflow-deck + .mobile-detail-trigger { display: block; margin-top: 18px; }

  /* Panel 7: each figure as one compact row, the number beside its words */
  #outcomes .ev-tiles { grid-template-columns: 1fr; gap: 8px; }
  #outcomes .ev-tiles li { grid-template-columns: 92px minmax(0, 1fr); align-items: start; column-gap: 12px; padding: 14px 16px; }
  #outcomes .ev-tiles strong { grid-row: 1 / span 2; font-size: 30px; }
  #outcomes .ev-pane .ev-tiles li > span { font-size: 14px; line-height: 1.35; }
  #outcomes .ev-summary { position: relative; }
  #outcomes .mobile-evidence-seat { position: absolute; right: 0; bottom: -6px; width: 86px; height: 118px; }
  #outcomes .ev-sim--summary figcaption { position: relative; padding-right: 84px; }
  #outcomes .mobile-chart-seat { position: absolute; right: -10px; top: -12px; width: 80px; height: 110px; }

  /* Practices: staff capacity, then the reimbursement estimate, no tabs and no empty band */
  .practice-chapter .practice-layout > div:first-child { min-height: 0; }
  .practice-chapter .mobile-cta-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
  .practice-chapter .mobile-cta-row > .button { margin: 0; white-space: nowrap; font-size: 15px; padding: 12px 18px; }
  .practice-chapter .mobile-cta-seat { flex: none; width: 86px; height: 118px; }
  .practice-capacity { padding-right: 96px; }
  .practice-chapter .mobile-practice-capacity .flow-seat { width: 86px; height: 120px; top: 6px; }
  .practice-chapter #revenue-total { padding-right: 76px; }
  .practice-chapter .revenue-calculator p { padding-right: 76px; }
  .mobile-calculator-seat { width: 68px; height: 94px; top: -10px; }
  .practice-points { margin-top: 18px; }

  /* Questions: the pathways, then every question, each opening in place */
  .faq-layout > div:first-child { min-height: 0; }
  .questions { margin-top: 22px; }
  .questions details { padding: 14px 0; border-top: 1px solid #c9dbe3; }
  .questions summary { pointer-events: auto; cursor: pointer; display: flex; justify-content: space-between; gap: 14px; font-size: 17px; line-height: 1.3; }
  .questions summary::after { content: "+"; display: block; flex: none; color: #087d96; font-size: 22px; line-height: 1; }
  .questions details[open] summary::after { content: "–"; }
  .questions details p { font-size: 15px; padding-top: 10px; }
}
/* Narrow phones (iPhone SE): UBi's column narrows so her name and sentence keep their room */
/* Narrow phones (iPhone SE, 320px): their own sizes, not the 390px layout squeezed */
@media (max-width: 360px) {
  .hero-layout { grid-template-columns: minmax(0, 1fr) 124px; }
  #ubi-seat { width: 124px; height: 172px; }
  .hero-greeting { font-size: 27px; line-height: 32px; }
  .hero-outcomes li { height: 112px; }
  .hero-outcomes span { padding: 0 10px 10px; font-size: 13.5px; }
  .hero-positioning { font-size: 18px; line-height: 22px; }
}

/* Phone clean-up (Alex 2026-10-23, on the phone page: "it looks like a mess"). Layout only, no words changed. */
@media (max-width: 900px) {
  /* Panel 2, card 3: the head is tall enough for UBi's spot, so she no longer covers the sentence under it */
  #care-gap .p2-card--gi .p2-gi-head { min-height: 104px; }
  #care-gap .mobile-gi-seat { top: -10px; width: 80px; height: 110px; }

  /* Panel 4: the six signals wrap onto two rows instead of running off both edges; the chart's labels are readable; the
     section is as tall as its content, so no blank band follows it */
  #whole-picture.care-chapter { min-height: 0; }
  .biology-capture .bc-mobile-source-nav { flex-wrap: wrap; overflow: visible; gap: 6px; margin: 0 0 12px; padding: 0; }
  .biology-capture .bc-mobile-source { flex: 0 0 auto; }
  .biology-capture .bc-time-axis, .biology-capture .bc-time-axis span, .biology-capture .bc-score-axis, .biology-capture .bc-score-label { font-size: 12px; }

  /* Then (Alex 2026-10-24: "i dont think the various type of biomakrers need as much space as they are getting ... lets
     try it vertical and see how it works"): the desktop picture top to bottom. All six signals at once as small tiles in
     place of the one-at-a-time chips, their tubes running down into the top of UBi's head, the intervention tag on her
     left and her state on her right, and one tube out at her feet into the score card, which keeps its evidence rows.
     The six months play on their own clock as on desktop. homepage-mobile-ui.js moves the tag and the score's port. */
  #whole-picture .biology-capture .bc-mobile-source-nav { display: none; }
  /* (Alex: "the data streams going to ubi is happening too quick, they should be slower and less frequent"): the tubes
     here are short, so the light moves at 90px a second (desktop 260) and waits 2.4s between passes (desktop 0.7s) */
  #whole-picture .biology-capture { --bc-flow-speed: 90; --bc-flow-gap: 2400; }
  #whole-picture .biology-capture .bc-stage { display: block; height: auto; }
  #whole-picture .biology-capture .bc-inputs { padding-top: 0; }
  #whole-picture .biology-capture .bc-intervention-marker, #whole-picture .biology-capture .bc-time-axis { display: none; }
  #whole-picture .biology-capture .bc-source-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; gap: 6px; height: auto; }
  #whole-picture .biology-capture .bc-source { display: grid; position: relative; z-index: 3; grid-template-columns: 18px minmax(0, 1fr); grid-template-rows: auto auto 22px; gap: 3px 5px; align-items: center; padding: 6px 7px 5px; border: 1px solid #d3e2ea; border-radius: 12px; background: #fff; }
  #whole-picture .biology-capture .bc-source.is-selected { border-color: var(--source-color); }
  #whole-picture .biology-capture .bc-source-art { grid-column: 1; grid-row: 1; width: 18px; height: 18px; }
  #whole-picture .biology-capture .bc-source-heading { display: contents; }
  #whole-picture .biology-capture .bc-source-name { grid-column: 2; grid-row: 1; min-width: 0; font: 600 12px/1.15 var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #whole-picture .biology-capture .bc-source-cadence { display: none; }
  #whole-picture .biology-capture .bc-signal-reading { position: static; grid-column: 1 / -1; grid-row: 2; flex-direction: row; align-items: baseline; gap: 3px; font-size: 19px; }
  #whole-picture .biology-capture .bc-signal-reading small { font-size: 10px; white-space: nowrap; }
  #whole-picture .biology-capture .bc-signal-plot { grid-column: 1 / -1; grid-row: 3; width: 100%; height: 22px; }
  #whole-picture .biology-capture .bc-route { display: inline; }
  #whole-picture .biology-capture .bc-source-outlet { left: calc(var(--bc-outlet, 50%) - 2px); right: auto; top: auto; bottom: -2px; }
  /* (Alex 2026-10-24: "we just show Symptoms, Wearables, Inflammation Markers as three across, showing all 6 makes it too
     tall"): one row of three on phones; Medication, Stool and Weight, and their tubes, stay on desktop only */
  #whole-picture .biology-capture :is(.bc-source, .bc-route):is([data-source="3"], [data-source="1"], [data-source="5"]) { display: none; }
  #whole-picture .biology-capture .bc-hub { display: grid; grid-template-columns: minmax(0, 1fr) 92px minmax(0, 1fr); align-items: center; gap: 10px; margin-top: 24px; text-align: left; }
  #whole-picture .biology-capture .bc-ubi-seat { grid-column: 2; grid-row: 1; width: 92px; height: 120px; --bc-intake-x: .5; --bc-intake-y: .02; --bc-outtake-x: .5; --bc-outtake-y: .98; }
  #whole-picture .biology-capture .bc-hub .bc-treatment { position: relative; grid-column: 1; grid-row: 1; left: auto !important; top: auto; justify-self: end; transform: none; flex-direction: column; align-items: flex-start; max-width: 100%; padding: 6px 8px; }
  #whole-picture .biology-capture .bc-hub .bc-treatment::after { display: none; }
  #whole-picture .biology-capture .bc-hub .bc-treatment-label { font-size: 12px; line-height: 1.2; }
  #whole-picture .biology-capture .bc-hub-caption { grid-column: 3; grid-row: 1; margin: 0; text-align: left; }
  #whole-picture .biology-capture .bc-hub-caption strong { font-size: 20px; }
  #whole-picture .biology-capture .bc-clinical-state { min-height: 0; margin: 0; max-width: none; font-size: 12px; }
  #whole-picture .biology-capture .bc-score { display: grid; grid-template-columns: 112px minmax(0, 1fr); grid-template-areas: "title title" "gauge status" "label status" "history history" "evidence evidence"; column-gap: 12px; align-items: center; margin-top: 20px; padding: 10px 16px 12px; text-align: left; }
  #whole-picture .biology-capture .bc-score h3 { grid-area: title; margin-bottom: 2px; font-size: 18px; text-align: center; }
  #whole-picture .biology-capture .bc-score-current { grid-area: gauge; width: 112px; height: 72px; margin: 0; }
  #whole-picture .biology-capture .bc-score-number { top: 25px; }
  #whole-picture .biology-capture .bc-score-value { font-size: 30px; }
  #whole-picture .biology-capture .bc-score-label { grid-area: label; margin: -6px 0 0; text-align: center; }
  #whole-picture .biology-capture .bc-score-status { grid-area: status; margin: 0; min-height: 0; }
  #whole-picture .biology-capture .bc-score-update-line { justify-content: flex-start; }
  #whole-picture .biology-capture .bc-score-update { font-size: 13px; }
  #whole-picture .biology-capture .bc-updated-source { font-size: 12px; }
  #whole-picture .biology-capture .bc-score-history { grid-area: history; margin-top: 2px; }
  #whole-picture .biology-capture .bc-score-axis { margin-top: 2px; }
  #whole-picture .biology-capture .bc-score-plot { height: 60px; } /* (Alex: "a bit taller so its easier to see the changes") */
  #whole-picture .biology-capture .bc-remission-evidence { grid-area: evidence; gap: 2px; margin-top: 6px; padding-top: 6px; }
  #whole-picture .biology-capture .bc-remission-evidence > div { grid-template-columns: 16px minmax(0, 1fr) auto; gap: 6px; font-size: 13px; line-height: 1.3; }
  #whole-picture .biology-capture .bc-evidence-icon { line-height: 1; }
  #whole-picture .biology-capture .bc-remission-evidence small { font-size: 11px; }
  #whole-picture .biology-capture .bc-score > .bc-score-port { left: 50%; top: 0; }

  /* Panel 5: each step's number sits on its picture's corner, and each mockup is as tall as what it shows */
  #earlier-action .workflow-card { position: relative; }
  #earlier-action .workflow-card::before { position: absolute; top: 10px; left: 10px; z-index: 2; margin: 0; box-shadow: 0 4px 10px -4px #0e3b4780; }
  #earlier-action .workflow-artifact:not(:has(> img)) { height: auto; min-height: 0; padding: 44px 16px 16px; }
  #earlier-action .workflow-artifact .ui-chart svg { height: 110px; }

  /* Panel 7: the source numbers in the figures sit on the text's line instead of pushing a line of their own */
  #outcomes .ev-tiles .cite-tag { font-size: 10px; min-width: 1.6em; height: 1.6em; margin-left: .3em; vertical-align: .1em; }

  /* The closing is as tall as its content, so no empty band sits between the buttons and the photo */
  #lets-meet, .closing-layout { min-height: 0; }
}

/* Phone spacing system (Alex 2026-10-23: "this margins and layout is god awful"). The old phone stylesheet squeezed every
   panel into one screen on phones under 700px tall: a 6px spacing unit, sections 6px apart, side margins of 16 or 20 or
   32px. The content now stacks, so the squeeze goes and one rhythm replaces it: a 20px side margin for every section,
   48px between sections, 12px from a heading to its text, 24px from text to the block it introduces, 16px between stacked
   cards, 20px inside cards. */
@media (max-width: 900px) {
  :root { --phone-gap: 16px; }
  .page-width, .care-chapter .page-width, .closing .page-width, .funnel-chapter .page-width, .response-story, .hero-layout {
    width: calc(100% - 40px); max-width: 620px; margin-left: auto; margin-right: auto;
  }
  main > section[data-story]:not(.hero) { min-height: 0; padding: 48px 0; }
  main > section[data-story]:not(.hero) h2 { margin: 0 0 12px; }
  .care-chapter .chapter-heading, .chapter-heading { margin-bottom: 24px; }
  .chapter-heading .chapter-lead, .voice-layout > .chapter-lead, .practice-chapter .section-description, .closing-copy { margin-top: 0; }

  /* Panel 2 */
  #care-gap .p2-head > p { margin-bottom: 4px; }
  #care-gap .p2-stage { gap: 16px; margin-top: 24px; }
  #care-gap .p2-stage > .p2-card { padding: 20px; }

  /* Panel 3: the movie sits clear of the text above it */
  #everyday .app-reveal { margin-top: 24px; }
  #everyday .mobile-topic-list { gap: 12px; margin-top: 24px; }
  /* Panel 3 is one pinned scene (Alex 2026-10-24: "we kind need it to keep the header and the movie visible with the card
     text below, as you scroll that card text gets replaced, as i could never get the closed loop stool tracking to show
     the full card not covered"): the title holds under the page header while the lead scrolls away beneath it, then the
     movie and one card hold under the title and the cards swap in place, 300px of scrolling each (homepage-mobile-ui.js
     picks the card), before the scene lets go. Replaces the stacking rows of d5dd5b9. */
  #everyday .p3-track { position: relative; }
  #everyday .p3-hold { height: 900px; } /* the scroll the scene holds for (a pinned element only travels in its container's content, not its padding) */
  /* Then ("for each of these the app is too small ... im thinking that it eats up the space of the subheader on scroll so
     its just header video sub card wiht sub card being the same size"): the title holds, the lead scrolls away beneath
     it, and the movie takes its room, as tall as the screen allows above the card (homepage-mobile-ui.js sets
     --p3-movie-h: about 320px on an iPhone 14, was 236), with the app's phone sized from the movie's height so it grows
     with it. The card keeps its size. */
  #everyday .p3-track > h2 { position: sticky; top: 72px; z-index: 5; margin: 0; padding: 6px 0 12px; background: #fff; }
  #everyday .p3-pin { position: sticky; top: var(--p3-pin-top, 140px); z-index: 4; background: #fff; }
  #everyday .p3-pin .app-reveal { height: var(--p3-movie-h, 236px); }
  /* Then (Alex 2026-10-24: "sub header needs margins, and its not obvious that there is more scroll content to find, and
     the phone should be larger in the images they are in"): the lead gets room above and below; the phone fills the
     movie's height, whole ("the phone should sitll be fully visible"); and three bars between the movie
     and the card, one per card, fill as the reader scrolls through each, so there is plainly more to come. */
  #everyday .p3-track > .chapter-lead { margin: 6px 0 18px; }
  #everyday .p3-pin .app-reveal { overflow: hidden; }
  #everyday .p3-pin .app-device { height: calc(100% - 16px); min-height: 0; max-height: none; align-self: center; } /* whole, 8px clear of the frame top and bottom ("the phone should still be fully visible") */
  #everyday .p3-progress { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0 0; }
  #everyday .p3-progress span { height: 4px; border-radius: 2px; background: #d6e3ec; overflow: hidden; }
  #everyday .p3-progress i { display: block; height: 100%; background: #087d96; transform-origin: left; transform: scaleX(var(--fill, 0)); }
  #everyday .p3-pin .mobile-topic-list { margin-top: 10px; }
  #everyday .p3-pin .app-reveal { margin-top: 0; }
  #everyday .p3-pin .mobile-topic-list { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 14px; }
  #everyday .p3-pin .mobile-topic { grid-area: 1 / 1; background: #fff; box-shadow: 0 10px 26px -18px #0e3b4766; transition: opacity .35s ease, transform .35s ease; }
  #everyday .p3-pin .mobile-topic:not([aria-current="true"]) { opacity: 0; transform: translateY(8px); pointer-events: none; }
  .mobile-topic { padding: 16px 20px 18px 18px; }
  #everyday .everyday-join { margin-top: 20px; }

  /* Panel 4 */
  .biology-capture .bc-mobile-source-nav { margin: 0 0 16px; }

  /* Panel 5 */
  #earlier-action .workflow-deck { gap: 32px; }
  #earlier-action .workflow-deck + .mobile-detail-trigger { margin-top: 24px; }

  /* Panel 7 */
  .evidence-chapter .outcomes-layout { gap: 0; }
  .evidence-chapter .outcomes-intro { margin-bottom: 24px; }
  .evidence-chapter .ev-picker { margin-bottom: 16px; }
  .evidence-chapter .ev-pane { padding: 20px; }

  /* Practices */
  .practice-chapter .practice-layout > div:first-child { gap: 16px; }
  .practice-points { margin-top: 24px; }
  .practice-voices, .practice-chapter .practice-voices { margin-top: 32px; gap: 16px; }

  /* Questions: the photo sits clear of the heading */
  .faq-portrait { margin-top: 8px; }
  .condition-scope { margin-top: 20px; }
  .questions { margin-top: 24px; }

  /* Closing: the photo lines up with the page's margins */
  .closing-layout { padding-bottom: 0; }
  .closing-photo { position: relative; inset: auto; right: auto; bottom: auto; width: 100%; height: 170px; margin-top: 28px; opacity: .6; }
  .closing-layout .flow-seat { bottom: 0; left: 6px; }
  .closing-actions { margin-top: 20px; gap: 10px; }
}
@media (max-width: 900px) {
  /* The opening's blocks sit 12px apart, tighter than the page's 20px step, so the film comes up onto the first screen
     (Alex 2026-10-23, after Astra's review) */
  .hero-layout { row-gap: 12px; }

  /* Panel 5's heading sits 24px above its first step, like every other section */
  #earlier-action .chapter-heading { margin-bottom: 24px; }

  /* Panel 7: UBi stands beside the heading and its line instead of on a row of her own; the heading matches the others */
  .evidence-chapter .outcomes-intro { display: grid; grid-template-columns: minmax(0, 1fr) 76px; column-gap: 12px; align-items: start; }
  .evidence-chapter .outcomes-intro h2 { grid-column: 1; grid-row: 1; font-size: var(--phone-title, 26px); line-height: 1.08; }
  .evidence-chapter .outcomes-intro > p:not(.chapter-kicker) { grid-column: 1 / -1; grid-row: 2; margin: 0; }
  .evidence-chapter .outcomes-intro .flow-seat { grid-column: 2; grid-row: 1; position: relative; width: 76px; height: 106px; margin: -8px 0 0; }

  /* Practices: one spacing source (margins), so the steps are 12 after the heading and 24 between blocks */
  .practice-chapter .practice-layout > div:first-child { gap: 0; }
  .practice-chapter .mobile-practice-capacity { margin-top: 24px; }
  .practice-chapter .practice-start { margin-top: 12px; }
  .practice-points { margin-top: 24px; }
  .practice-chapter .mobile-cta-row { margin-top: 24px; }
  .practice-voices, .practice-chapter .practice-voices { margin-top: 40px; }

  /* Closing: the photo closes the section, under the buttons */
  .closing-layout { display: flex; flex-direction: column; position: relative; }
  .closing-layout > .closing-photo { order: 2; }
  .closing-layout > .flow-seat { order: 3; position: absolute; bottom: 0; left: 6px; }
}
@media (max-width: 900px) {
  /* Panel 7's condition tabs wrap like panel 4's signals instead of running off the edge */
  .evidence-chapter .ev-picker, #outcomes .ev-picker { flex-wrap: wrap; overflow: visible; gap: 8px; padding-bottom: 0; }
  #outcomes .ev-tab { flex: 0 0 auto; }
}
@media (max-width: 900px) {
  /* The practices button and UBi's spot beside it share the row; the button gives way so she stays on screen */
  .practice-chapter .mobile-cta-row > .button { flex: 1 1 auto; min-width: 0; justify-content: center; }
  .practice-chapter .mobile-cta-seat { flex: 0 0 72px; width: 72px; height: 100px; }
}
@media (max-width: 360px) {
  .practice-chapter .mobile-cta-row > .button { white-space: normal; font-size: 14px; padding: 12px 14px; }
}
@media (max-width: 900px) {
  /* Panel 3: the app movie keeps its frame and pins with the card under it as one scene (.p3-pin above), so the movie is
     always in view with the card it plays (Alex 2026-10-23: "you cant see the movie when you are looking at the
     chicklets"). And ("when the first image of the app on the stand loads, its not the same size as the reel that it
     replaces") the photo fills the movie's whole frame, as the reel does, instead of stopping 48px short where the old
     controls strip was */
  #everyday .app-reveal { position: relative; z-index: 3; height: 236px; min-height: 0; }
  #everyday .app-photo { bottom: 0; border-radius: 20px; }
  /* "Back to preview" sat half cut off at the reel's bottom edge; on phones the scroll picks the part, so it goes */
  #everyday #replay-reveal { display: none; }
}

/* Panel 4 on narrow phones (an SE, a Galaxy S24): the signal tiles drop their icons, so each signal's name shows whole */
@media (max-width: 380px) {
  #whole-picture .biology-capture .bc-source-art { display: none; }
  #whole-picture .biology-capture .bc-source-name { grid-column: 1 / -1; font-size: 11.5px; }
  #whole-picture .biology-capture .bc-signal-reading { font-size: 17px; }
  #whole-picture .biology-capture .bc-signal-reading small { font-size: 9px; }
}

/* Panel 5 as one pinned scene, like panel 3 (Alex 2026-10-24: "yea do it like panel 3"): desktop's five films in place
   of the older pictures, which no longer matched the words. The title scrolls away (four lines on a phone; held, it would
   leave the film about 190px tall); then the film, five bars and one step's card hold under the page header, and the
   reader's scroll picks the step, 300px of scrolling each (homepage-mobile-ui.js). Each film's parts are placed here for
   the taller phone frame; their timelines are desktop's (homepage-redesign.css). UBi rides in the film's lower right. */
@media (max-width: 900px) {
  #earlier-action .p5-track { position: relative; }
  #earlier-action .p5-hold { height: 1500px; }
  #earlier-action .p5-pin { position: sticky; top: var(--p5-pin-top, 80px); z-index: 4; padding-top: 4px; background: #fff; }
  #earlier-action .p5-pin .p5-screen { display: block; }
  #earlier-action .p5-pin .p5-frame { position: relative; width: 100%; height: var(--p5-movie-h, 320px); aspect-ratio: auto; border-radius: 20px; border: 1px solid #d8e6ee; container-type: inline-size; }
  #earlier-action .p5-pin .p5-scene { position: absolute; inset: 0; font-size: clamp(9.5px, 3cqw, 11.5px); color: var(--rd-ink); opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s linear .45s; }
  #earlier-action .workflow-scene[data-step="0"] .p5-pin .p5-scene--0, #earlier-action .workflow-scene[data-step="1"] .p5-pin .p5-scene--1,
  #earlier-action .workflow-scene[data-step="2"] .p5-pin .p5-scene--2, #earlier-action .workflow-scene[data-step="3"] .p5-pin .p5-scene--3,
  #earlier-action .workflow-scene[data-step="4"] .p5-pin .p5-scene--4 { opacity: 1; visibility: visible; transition: opacity .45s ease; }
  #earlier-action .p5-pin .workflow-seat { position: absolute; z-index: 6; inset: auto 2px 2px auto; width: 70px; height: 96px; }
  #earlier-action .p5-pin :is(.m-cursor, .m0-flow, .m2-flow, .m1-ubi) { display: none; }

  /* 1 enrollment: the referral top left, the phone on the right, the checklist under the referral */
  #earlier-action .p5-pin .m0-referral { left: 4%; top: 5%; width: 56%; }
  #earlier-action .p5-pin :is(.m0-phone, .m4-phone) { position: absolute; } /* desktop's phone frames are relative, placed from the corner */
  #earlier-action .p5-pin .m0-phone { left: auto; right: 4%; top: 4%; height: 64%; }
  #earlier-action .p5-pin .m0-steps { left: 4%; top: auto; bottom: 4%; width: 66%; }
  /* 2 questions: the week's inbox on top, James K.'s review card under it */
  #earlier-action .p5-pin .m1-inbox { left: 4%; top: 4%; width: 92%; height: auto; }
  #earlier-action .p5-pin .m-msgs li:is(:nth-child(1), :nth-child(4), :nth-child(5)) { display: none; }
  #earlier-action .p5-pin :is(.m-desk, .m1-flag .m-alert, .m1-link) { display: none; } /* room for the flagged message above James K.'s card */
  #earlier-action .p5-pin .m1-flag { left: 4%; top: auto; bottom: 4%; width: 74%; }
  /* 3 structured data: the chart's flowsheet, today's check-in beside it */
  #earlier-action .p5-pin .m2-emr { left: 4%; top: 4%; width: 74%; height: 92%; }
  #earlier-action .p5-pin .m-emr { grid-template-columns: minmax(0, 1fr); }
  #earlier-action .p5-pin .m-emr nav { display: none; }
  #earlier-action .p5-pin .m-emr table { margin: .6em .8em 0; }
  #earlier-action .p5-pin .m-note { margin: .7em .8em .8em; }
  #earlier-action .p5-pin .m-source { left: auto; right: 3%; top: 6%; width: 19%; padding: .7em .3em; font-size: .8em; }
  #earlier-action .p5-pin .m-source img { width: 3em; height: 3em; }
  /* 4 prior authorization: the support packet, the hand-off note under it */
  #earlier-action .p5-pin .m3-packet { left: 4%; top: 4%; width: 92%; height: 82%; }
  #earlier-action .p5-pin .m-ring { display: flex; align-items: center; gap: .4em; }
  #earlier-action .p5-pin .m-ring b { font-size: .8em; white-space: nowrap; }
  #earlier-action .p5-pin .m3-packet .m-title { font-size: 1.25em; }
  #earlier-action .p5-pin .m-sections ul { gap: .2em; font-size: .8em; }
  #earlier-action .p5-pin .m-toast { left: 4%; right: auto; bottom: 2.5%; max-width: 70%; }
  /* 5 colonoscopy prep: the patient's phone on the left, the ready stamp and the calendar on the right */
  #earlier-action .p5-pin .m4-phone { left: 4%; top: 4%; height: 92%; }
  #earlier-action .p5-pin .m-chat p { font-size: inherit; line-height: inherit; } /* the page's phone paragraph size reached into the mockup */
  #earlier-action .p5-pin .m4-ready { left: 47%; top: 6%; width: 49%; padding: 1em; }
  #earlier-action .p5-pin .m-stamp { gap: .6em; }
  #earlier-action .p5-pin .m-stamp b { font-size: 1.3em; }
  #earlier-action .p5-pin .m4-cal { left: 47%; top: 44%; width: 49%; }
  #earlier-action .p5-pin .m-slot { grid-template-columns: 3.4em 1fr; gap: .2em .6em; }
  #earlier-action .p5-pin .m-slot small { grid-column: 2; }

  /* a short film (an SE, about 220px): the flagged message alone above James K.'s card, and two of the packet's four parts */
  #earlier-action .p5-short .m-msgs li:nth-child(2), #earlier-action .p5-short .m1-flag .m-metric + .m-metric, #earlier-action .p5-short .m-sections section:is(.m3-c, .m3-d) { display: none; }
  #earlier-action .p5-short .m-sections { grid-template-rows: 1fr; }

  /* the bars and the step's card, as panel 3's */
  #earlier-action .p5-progress { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 12px 0 0; }
  #earlier-action .p5-progress span { height: 4px; border-radius: 2px; background: #d6e3ec; overflow: hidden; }
  #earlier-action .p5-progress i { display: block; height: 100%; background: #087d96; transform-origin: left; transform: scaleX(var(--fill, 0)); }
  #earlier-action .p5-pin .workflow-deck { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 10px; }
  #earlier-action .p5-pin .workflow-deck > .workflow-card { grid-area: 1 / 1; min-height: 0; padding: 14px 16px 16px; border-left: 4px solid #087d96; border-radius: 16px; background: #fff; box-shadow: 0 10px 26px -18px #0e3b4766; transition: opacity .35s ease, transform .35s ease; }
  #earlier-action .p5-pin .workflow-deck > .workflow-card[hidden] { opacity: 0; transform: translateY(8px); pointer-events: none; }
  #earlier-action .p5-pin :is(.workflow-artifact, .mobile-step-seat, .shared-benefit:empty), #earlier-action .p5-pin .workflow-card::before { display: none; }
  #earlier-action .p5-pin .workflow-explanation { padding: 0; }
  #earlier-action .p5-pin .workflow-explanation h3 { margin: 0 0 6px; font-size: 19px; line-height: 1.2; }
  #earlier-action .p5-pin .workflow-explanation p { font-size: 15px; line-height: 1.4; }
}

/* Panel 6, the evidence (Alex 2026-10-24, "thoughts on making that one more mobile friendly", then "ok try it"): the five
   conditions in one row, with the chosen one's full name under them, holding under the page header while its condition
   is read (homepage-mobile-ui.js brings a newly picked condition up under it); the claim at a card heading's size
   instead of a second title; the four numbers as a 2x2 grid of light tiles instead of four dark slabs; UBi beside "See
   the evidence" instead of over the last number. No words change. */
@media (max-width: 900px) {
  #outcomes .ev-picker { position: sticky; top: 72px; z-index: 5; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; margin: 0 0 12px; padding: 8px 62px 28px 0; background: #0e3b47; }
  #outcomes .mobile-picker-seat { position: absolute; right: 0; top: 2px; width: 56px; height: 76px; }
  #outcomes .ev-tab { min-width: 0; justify-items: center; padding: 9px 2px; border-radius: 12px; text-align: center; }
  #outcomes .ev-tab strong { font-size: 14px; white-space: nowrap; }
  #outcomes .ev-tab span { display: none; }
  #outcomes .ev-tab[aria-selected="true"] span { display: block; position: absolute; left: 0; right: 62px; bottom: 6px; overflow: hidden; color: #b7cbd6; font-size: 13px; text-align: left; white-space: nowrap; text-overflow: ellipsis; }
  #outcomes .ev-pane .ev-claim { font-size: 21px; line-height: 1.2; max-width: none; }
  #outcomes .ev-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  #outcomes .ev-tiles li { display: block; padding: 12px 12px 13px; border: 1px solid #dbe7ee; background: #fff; }
  #outcomes .ev-tiles strong { display: block; margin-bottom: 4px; font-size: 26px; color: #087d96; }
  #outcomes .ev-pane .ev-tiles li > span { display: block; font-size: 13.5px; font-weight: 500; line-height: 1.35; color: var(--ink, #0e3b47); }
  #outcomes .ev-tiles .ev-ref a { color: #087d96; }
  #outcomes .mobile-evidence-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  #outcomes .mobile-evidence-row .mobile-evidence-seat { position: relative; inset: auto; flex: none; width: 70px; height: 96px; }
}

/* Panel 6 on the narrowest phones (an SE 1st gen, 320px): the five conditions still fit one row beside UBi */
@media (max-width: 340px) {
  #outcomes .ev-picker { gap: 4px; padding-right: 50px; }
  #outcomes .mobile-picker-seat { width: 46px; height: 64px; top: 6px; }
  #outcomes .ev-tab strong { font-size: 12px; }
  #outcomes .ev-tab[aria-selected="true"] span { right: 50px; }
}