/* Trial look for desktop and laptop windows (Alex 2026-10-24: "lets see if we can emulate the visual hierarchy of Oshis
   home page, but still have our critical elements visible"). On only when the address carries ?look=oshi (the build adds
   the class), so the approved layout stays what everyone sees. Oshi's opening, measured at 1366x657 and 2541x1267: a
   70px headline that takes the left half, a two-line subtitle with one highlighted phrase, one large button, one large
   picture on the right, the logo strip below, no box behind the text, and type that keeps its size on a laptop. Ours here
   keeps every critical element: "Meet UBi," at that scale, the subtitle, the sentence with its two payoffs highlighted,
   the practice button and the patient link, the film as the large picture, UBi at the film's corner, the doctors' logos
   as the strip. No words change. */
@media (min-width: 901px) {
  /* the kitchen stays behind, washed pale so the text sits on a calm ground, as Oshi's softened photo does */
  html.look-oshi #top .hero-wash { background: linear-gradient(90deg, #f4f8fdf7 0%, #f4f8fdeb 34%, #f4f8fd8c 50%, #f4f8fd33 68%, #f4f8fd14 100%); } /* the kitchen shows behind UBi and the film (Alex: keep the warmth) */

  html.look-oshi #top .hero-layout {
    position: relative;
    width: min(2240px, 90vw);
    max-width: none;
    height: 100svh;
    margin: 0 auto;
    padding: 104px 0 0;
    display: grid;
    /* Then (Alex: "UBi's positioning is still kinda small, and not featured"): three columns, the text, UBi as large as the
       room allows, and the film beside her */
    grid-template-columns: minmax(0, 37fr) minmax(0, 21fr) minmax(0, 42fr);
    grid-template-rows: minmax(0, 1fr) auto auto auto minmax(0, 1fr) auto;
    grid-template-areas: ". ubi film" "title ubi film" "promise ubi film" "actions ubi film" ". ubi film" "proof proof proof";
    column-gap: clamp(16px, 1.6vw, 40px);
    row-gap: 0;
    align-items: start;
  }
  html.look-oshi #top .hero-copy { display: contents; }
  html.look-oshi #top .hero-copy::before { display: none; }

  html.look-oshi #top #hero-title { grid-area: title; justify-self: start; max-width: none; margin: 0; font-size: inherit; line-height: 1; }
  /* sizes follow the width, or the height on a tall window, so a square window fills its height with larger type */
  html.look-oshi #top .hero-greeting { display: block; font-size: clamp(64px, min(7.2vw, 14svh), 200px); line-height: .98; letter-spacing: -.03em; }
  html.look-oshi #top .hero-positioning { display: block; max-width: 19em; margin-top: clamp(14px, 2.2svh, 34px); font-size: clamp(22px, min(2.4vw, 4.2svh), 58px); font-weight: 400; line-height: 1.22; }
  html.look-oshi #top .hero-promise { grid-area: promise; justify-self: start; max-width: 33em; margin: clamp(14px, 2.4svh, 40px) 0 0; font-size: clamp(16px, min(1.3vw, 2.3svh), 30px); line-height: 1.55; color: #3d5862; }
  /* Oshi's one highlighted phrase: here the sentence's two payoffs, which were already set in bold */
  html.look-oshi #top .hero-promise strong { font-weight: 600; color: #0e3b47; background: #d2f0f3; padding: .02em .2em; border-radius: 5px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

  html.look-oshi #top .actions { grid-area: actions; justify-self: start; width: auto; margin: clamp(22px, 4svh, 64px) 0 0; display: flex; flex-flow: row wrap; align-items: center; gap: 14px 28px; }
  html.look-oshi #top .actions .button { display: inline-flex; align-items: center; min-height: clamp(52px, min(4.4vw, 7.4svh), 96px); padding: 0 clamp(26px, 2.2vw, 56px); border-radius: 999px; font-size: clamp(16px, min(1.3vw, 2.3svh), 30px); }
  html.look-oshi #top .actions .patient-link { font-size: clamp(15px, min(1.15vw, 2svh), 26px); }

  /* the doctors' logos as the strip along the bottom, as Oshi's "in-network with" row */
  html.look-oshi #top .hero-proof { grid-area: proof; justify-self: stretch; width: auto; max-width: none; margin: 0; padding: clamp(12px, 1.6svh, 22px) 0 clamp(14px, 2svh, 28px); border: 0; border-top: 1px solid #0e3b4714; display: flex; flex-direction: row; align-items: center; gap: clamp(16px, 1.6vw, 32px); }
  html.look-oshi #top .hero-proof-label { flex: none; max-width: none; }
  html.look-oshi #top .hero-proof-track { flex: 1 1 0; width: auto; min-width: 0; }
  html.look-oshi #top .hero-proof-logos { --logo-h: clamp(22px, max(1.3vw, 2.2svh), 36px); }

  /* the film as the one large picture; as wide as its column allows and never taller than the room */
  html.look-oshi #top .hero-film {
    grid-area: film;
    align-self: center;
    justify-self: end;
    position: relative;
    width: min(100%, calc((100svh - 104px - 120px) * 637 / 396));
    height: auto;
    max-height: none;
    min-height: 0;
    aspect-ratio: 637 / 396;
    margin: 0;
  }
  html.look-oshi #top .hero-film iframe { width: 100%; height: 100%; }

  /* UBi in her own column, as tall as the room allows: the page draws her at 70% of her spot (heroBox), so the spot is the
     column's width / 0.7 and spills evenly into the gaps while she herself stays inside the column */
  html.look-oshi #top .hero-character {
    grid-area: ubi;
    align-self: center;
    justify-self: center;
    position: relative;
    inset: auto;
    z-index: 4;
    width: min(calc(100% / .7), calc(100svh - 200px)); /* drawn at 70%: never taller than the room under the header */
    height: auto;
    transform: translateX(16%); /* onto the film's left edge: UBi presenting her screen */
    pointer-events: none; /* her spot spills over the film's edge; the film's controls stay clickable */
  }
  html.look-oshi #top #ubi-seat { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 420 / 600; transform: none; }
  html.look-oshi #top .hello { position: absolute; top: auto; bottom: 6%; left: 50%; right: auto; width: auto; height: auto; transform: translateX(-50%); pointer-events: auto; }
}

/* Tall and square windows (half a monitor, a portrait laptop window): there is room for everything at once, so the film
   moves under the text and UBi stands large beside the text, instead of all three squeezed into one row */
@media (min-width: 901px) and (max-aspect-ratio: 5/4) {
  html.look-oshi #top .hero-layout {
    grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
    grid-template-rows: minmax(0, 1fr) auto auto auto auto minmax(0, 1fr) auto;
    grid-template-areas: ". ubi" "title ubi" "promise ubi" "actions ubi" "film film" ". ." "proof proof";
    column-gap: clamp(24px, 3vw, 64px);
  }
  html.look-oshi #top .hero-film { justify-self: center; align-self: start; margin-top: clamp(40px, 6svh, 96px); width: min(100%, calc((100svh - 104px) * .42 * 637 / 396)); }
  html.look-oshi #top .hero-character { width: min(calc(100% / .7), calc((100svh - 104px) * .37)); transform: none; }
  html.look-oshi #top .hello { bottom: 2%; z-index: 6; }
}

/* Panel 2 in the trial, default (?look=oshi): the approved layout, phone > chart > early > outcomes, with Alex's headline and
   the sentence under it (in the page for every look since 2026-10-25) and no box behind them, as the opening has none; a
   soft fade on the photo's left keeps the text readable without the box (Alex 2026-10-25: "so thats why we had the phone >
   chart > early > outcomes"). */
@media (min-width: 901px) {
  html.look-oshi:not(.p2-figure) #care-gap .p2-head::before { display: none; }
  html.look-oshi:not(.p2-figure) #care-gap .p2-head { padding-left: 0; padding-right: 0; }
  html.look-oshi:not(.p2-figure) #care-gap .p2-head .program-detail-trigger { margin-left: 0; }
  /* Version B 10-25: the subheader moves into the cards (homepage-look-oshi.js swaps the words), so the header is the
     short line and the details link only */
  /* the header as Oshi sets a section: the headline, then one short paragraph in plain body type; the details link is cut */
  /* the paragraph is the second level, always larger than the card headings and in a darker ink (Alex 10-25: "you see
     how small the subheader looks"): 38px on the large desktop */
  html.look-oshi:not([class*="p2-"]) #care-gap .p2-head > p:not(.lo-para) { max-width: min(30em, 43vw); margin: 0; font-size: clamp(16px, min(1.55vw, 3svh), 38px); line-height: 1.35; font-weight: 400; color: #1f4550; text-wrap: pretty; }
  html.look-oshi:not([class*="p2-"]) #care-gap .p2-head .program-detail-trigger { display: none; }
  /* the title at Oshi scale (Alex 10-25: "why is the title text so small ... we have way more vertical space"): sized to the
     window height, about Oshi's 52px on a laptop and up to 64px on a large screen, three lines inside the light side */
  html.look-oshi:not([class*="p2-"]) #care-gap .p2-head h2 { margin-bottom: clamp(10px, 1.8svh, 24px); font-size: clamp(30px, min(3.4vw, 9.7svh - 25px, 6.3svh), 64px); line-height: 1.06; }
  /* card 3's sentence runs into the numbers and carries the "similarly designed IBD programs" credit, so the old
     lead-in line is not shown */
  html.look-oshi:not([class*="p2-"]) #care-gap .p2-lead-in { display: none; }
  /* Version B 10-25 (Alex: the labels by 01-03 "too much text", card 3's evidence "awkward and sparse"): each card
     keeps only its step number from the small label. Card 3's numbers are its picture: about twice the size, one
     left-aligned column with "up to" above $22K, a rule under the sentence so the sentence runs into the table, and
     rows of equal height filling the card down to the chart's bottom edge. */
  html.look-oshi:not([class*="p2-"]) #care-gap .p2-eyebrow { font-size: 0; gap: 0; }
  html.look-oshi:not([class*="p2-"]) #care-gap .p2-eyebrow .p2-step { font-size: var(--b-h3); font-weight: 600; }
  html.look-oshi:not([class*="p2-"]) #care-gap .p2-stats { margin-top: clamp(10px, min(.8vw, 1.6svh), 20px); border-top: 1px solid var(--rd-line); grid-auto-rows: minmax(min-content, 1fr); align-content: stretch; }
  html.look-oshi:not([class*="p2-"]) #care-gap .p2-stat { padding: clamp(6px, min(.6vw, 1.1svh), 16px) 0; column-gap: clamp(14px, 1.1vw, 26px); }
  html.look-oshi:not([class*="p2-"]) #care-gap .p2-stat strong { position: relative; justify-self: center; text-align: center; font-size: clamp(30px, min(3.9vw, 6.3svh, 10svh - 45px), 120px); }
  html.look-oshi:not([class*="p2-"]) #care-gap .p2-stat p { font-size: clamp(15px, min(1.15vw, 2.25svh), 30px); line-height: 1.25; text-wrap: balance; }
  html.look-oshi:not([class*="p2-"]) #care-gap .p2-upto { position: absolute; left: 50%; bottom: calc(100% - .1em); transform: translateX(-50%); margin: 0; white-space: nowrap; font-size: max(13px, .2em); text-align: center; }
  html.look-oshi:not([class*="p2-"]) #care-gap .p2-stat .cite-tag { font-size: max(12px, .55em); }
  /* Version B 10-25 (Alex: "make the card sub header just the headers for each ... then make it fit"): each card's
     sentence is its heading, a step smaller than the old headings since it runs longer, and the separate sentences are
     not shown. Card 3's GI photo sits beside its 03 at the same size, so its heading spans the card and starts on the
     same line as the others. */
  html.look-oshi:not([class*="p2-"]) #care-gap :is(.p2-card--patient > p, .p2-card--plan header p, .p2-why) { display: none; }
  html.look-oshi:not([class*="p2-"]) #care-gap .p2-card h3 { font-size: clamp(17px, min(1.4vw, 2.7svh), 34px); line-height: 1.2; }
  /* each card's key phrase in the opening's highlight (Alex 10-25: "what about the colored highlight like we did in the
     first panel"): the heading in regular weight, the phrase set like #top .hero-promise strong */
  html.look-oshi:not([class*="p2-"]) #care-gap .p2-card h3 { font-weight: 400; }
  html.look-oshi:not([class*="p2-"]) #care-gap .p2-card h3 strong { font-weight: 600; color: #0e3b47; background: #d2f0f3; padding: .02em .14em; margin: 0 -.06em; border-radius: 5px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  /* card 3's evidence label (Alex 10-25, "Similar designed programs") as the first row of the numbers, under the rule:
     a small header, so the numbers read as what similarly designed IBD programs produced */
  html.look-oshi:not([class*="p2-"]) #care-gap .p2-stats { grid-template-rows: auto; }
  html.look-oshi:not([class*="p2-"]) #care-gap .p2-stats > .p2-lead-in { display: block; grid-column: 1 / -1; margin: 0; padding: clamp(8px, 1.4svh, 18px) 0 0; font: 700 clamp(14px, min(.8vw, 1.6svh), 20px)/1.3 var(--text); letter-spacing: .08em; text-transform: uppercase; color: #557580; }
  html.look-oshi:not([class*="p2-"]) #care-gap .p2-stats > .p2-lead-in + .p2-stat { border-top: 0; }
  html.look-oshi:not([class*="p2-"]) #care-gap :is(.p2-step, .p2-gi-head img) { width: var(--b-chip); height: var(--b-chip); }
  /* each card's number sits beside its heading's first line, as Oshi sets an icon beside each line; card 3's GI photo
     is cut (Alex 10-25: "the random small doctor head is bad"), so every card is its number and its heading */
  html.look-oshi:not([class*="p2-"]) #care-gap { --b-h3: clamp(17px, min(1.4vw, 2.7svh), 34px); --b-chip: calc(var(--b-h3) * 2.4); }
  html.look-oshi:not([class*="p2-"]) #care-gap :is(.p2-card--patient figcaption, .p2-card--plan header, .p2-gi-head) { display: grid !important; grid-template-columns: var(--b-chip) minmax(0, 1fr); column-gap: clamp(10px, .85vw, 18px); row-gap: clamp(6px, 1svh, 12px); align-items: start; margin: 0 !important; }
  html.look-oshi:not([class*="p2-"]) #care-gap .p2-gi-head > div { display: contents; }
  html.look-oshi:not([class*="p2-"]) #care-gap .p2-card .p2-eyebrow { grid-column: 1; grid-row: 1; align-self: center; margin: 0; }
  /* the three circles on one midline (Alex 10-25: "the 1 2 3 buttons should always be at the same midline"): each
     card's heading block fills the shared heading row, and the circle and the heading centre on the row's middle */
  html.look-oshi:not([class*="p2-"]) #care-gap :is(.p2-card--patient figcaption, .p2-card--plan header, .p2-gi-head) { align-content: stretch; }
  html.look-oshi:not([class*="p2-"]) #care-gap .p2-card h3 { align-self: center; }
  html.look-oshi:not([class*="p2-"]) #care-gap .p2-card h3 { grid-column: 2; grid-row: 1; }
  html.look-oshi:not([class*="p2-"]) #care-gap .p2-gi-head img { display: none; }
  /* card 1 wider so its heading wraps like the others */
  html.look-oshi:not([class*="p2-"]) #care-gap .p2-stage { grid-template-columns: minmax(0, 1.12fr) clamp(27px, 1.75vw, 44px) minmax(0, 1.34fr) clamp(27px, 1.75vw, 44px) minmax(0, 1.2fr) !important; grid-template-rows: auto minmax(0, 1fr); }
  /* two shared rows, the headings then the pictures, so the phone, the chart and the numbers start on one line */
  html.look-oshi:not([class*="p2-"]) #care-gap .p2-link { grid-row: 1 / span 2; align-self: center; }
  html.look-oshi:not([class*="p2-"]) #care-gap .p2-card { grid-row: 1 / span 2; display: grid; grid-template-rows: subgrid; row-gap: clamp(10px, 1.6svh, 20px); align-content: stretch; }
  html.look-oshi:not([class*="p2-"]) #care-gap :is(.p2-plan-ui, .p2-stats) { margin-top: 0; }
  /* the phone fills what card 1 has left under its heading, never wider than the card */
  html.look-oshi:not([class*="p2-"]) #care-gap .p2-phone { flex: 1 1 0; min-height: 0; height: auto; margin: 0 !important; display: flex; align-items: center; justify-content: center; container-type: size; }
  html.look-oshi:not([class*="p2-"]) #care-gap .p2-phone-frame { height: min(100cqh, 100cqw * 20 / 9); max-height: none; }
  html.look-oshi:not(.p2-figure) #care-gap .response-wash { background: linear-gradient(90deg, #eff4fff2 0%, #eff4ffe6 44%, #eff4ffb3 53%, #eff4ff40 58%, #eff4ff00 63%); }
}

/* Panel 2, figure version (?look=oshi&p2=figure), Oshi's structure (Alex 2026-10-25: "try again, try to keep oshi level density at each level, while
   still through the thing conveying the full point", then "i liked the header from the past too with this"). Left: his
   headline, one paragraph, three one-line points with icons, one button. Right: one figure, the chart's card holding the
   chart and, under it, the programs' three numbers; UBi at its corner. The cards, the phone and the card sentences are not
   shown in this look. homepage-look-oshi.js moves the numbers into the figure and UBi's spot to the panel's start. */
#care-gap .lo-copy[hidden] { display: none; }
@media (min-width: 901px) {
  html.look-oshi.p2-figure #care-gap .response-wash { background: linear-gradient(90deg, #eff4fff5 0%, #eff4ffeb 40%, #eff4ffbf 52%, #eff4ff8c 70%, #eff4ff66 100%); }
  html.look-oshi.p2-figure #care-gap .scene-layout, html.look-oshi.p2-figure #care-gap .gap-composition { display: block; width: 100%; max-width: none; height: auto; min-height: 100svh; margin: 0; padding: 0; }
  html.look-oshi.p2-figure #care-gap .response-story.p2 {
    position: relative;
    inset: auto;
    width: min(2000px, 88vw);
    max-width: none;
    height: auto;
    min-height: 100svh;
    margin: 0 auto;
    padding: 104px 0 clamp(16px, 3svh, 40px);
    display: grid;
    grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
    grid-template-rows: minmax(0, 1fr) repeat(4, max-content) minmax(0, 1fr);
    grid-template-areas: ". fig" "head fig" "para fig" "list fig" "btn fig" ". fig";
    column-gap: clamp(40px, 5vw, 120px);
    row-gap: 0;
    align-items: start;
  }
  html.look-oshi.p2-figure #care-gap :is(.p2-head, .p2-stage, .p2-card, .p2-card header, .lo-copy) { display: contents; }
  html.look-oshi.p2-figure #care-gap :is(.p2-head, .p2-stage, .p2-card)::before,
  html.look-oshi.p2-figure #care-gap :is(.p2-head, .p2-stage, .p2-card)::after { display: none; }
  html.look-oshi.p2-figure #care-gap :is(.p2-head > p:not(.lo-para), .p2-link, .p2-card figcaption, .p2-phone, .p2-card--patient > p, .p2-card header > :not(.mobile-plan-seat), .p2-gi-head, .p2-why, .p2-note-sub) { display: none; }

  /* left */
  html.look-oshi.p2-figure #care-gap .p2-head h2 { grid-area: head; justify-self: start; max-width: 17em; margin: 0; font-size: clamp(30px, min(2.9vw, 5.6svh), 70px); line-height: 1.06; letter-spacing: -.03em; }
  html.look-oshi.p2-figure #care-gap .lo-para { grid-area: para; justify-self: start; max-width: 32em; margin: clamp(14px, 2.4svh, 36px) 0 0; font: 400 clamp(16px, min(1.15vw, 2.2svh), 26px)/1.5 var(--text); color: #3d5862; }
  html.look-oshi.p2-figure #care-gap .lo-points { grid-area: list; display: grid; gap: clamp(10px, 1.8svh, 26px); margin: clamp(18px, 3.2svh, 48px) 0 0; padding: 0; list-style: none; }
  html.look-oshi.p2-figure #care-gap .lo-points li { display: flex; align-items: center; gap: clamp(12px, 1vw, 22px); font: 500 clamp(16px, min(1.1vw, 2.1svh), 25px)/1.3 var(--text); color: var(--rd-ink); }
  html.look-oshi.p2-figure #care-gap .lo-points svg { flex: none; width: clamp(36px, min(2.5vw, 4.8svh), 58px); height: clamp(36px, min(2.5vw, 4.8svh), 58px); padding: clamp(8px, .6vw, 13px); border-radius: 50%; background: #dff3f6; fill: none; stroke: #087d96; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; box-sizing: border-box; }
  html.look-oshi.p2-figure #care-gap .program-detail-trigger { grid-area: btn; justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: clamp(48px, min(3.4vw, 6.4svh), 76px); margin: clamp(22px, 4svh, 56px) 0 0; padding: 0 clamp(22px, 1.8vw, 40px); border-radius: 999px; background: #0e3b47; color: #fff; text-decoration: none; font: 600 clamp(15px, min(1vw, 2svh), 21px)/1 var(--text); }
  html.look-oshi.p2-figure #care-gap .program-detail-trigger span { color: #7fe3ee; }

  /* right: the figure */
  html.look-oshi.p2-figure #care-gap .p2-plan-ui {
    grid-area: fig;
    align-self: center;
    justify-self: stretch;
    display: flex;
    flex-direction: column;
    flex: none;
    margin: 0;
    padding: clamp(18px, 1.8vw, 40px) clamp(20px, 2vw, 44px);
    border-radius: clamp(20px, 2.2svh, 32px);
    background: #ffffff;
    border: 1px solid #ffffff;
    box-shadow: 0 2em 4em -2.2em #0e3b4780, 0 2px 8px #0e3b470d;
  }
  html.look-oshi.p2-figure #care-gap .p2-trend { flex: none; min-height: 0; }
  html.look-oshi.p2-figure #care-gap .p2-trend-name { font-size: clamp(14px, min(1vw, 2svh), 21px); }
  html.look-oshi.p2-figure #care-gap .p2-plot { flex: none; height: clamp(160px, min(16vw, 32svh), 420px); }
  html.look-oshi.p2-figure #care-gap .p2-note, html.look-oshi.p2-figure #care-gap .p2-target-label, html.look-oshi.p2-figure #care-gap .p2-axis { font-size: clamp(12px, min(.9vw, 1.8svh), 19px); }
  html.look-oshi.p2-figure #care-gap .lo-fig-evidence { margin-top: clamp(14px, 2.4svh, 34px); padding-top: clamp(14px, 2.4svh, 34px); border-top: 1px solid #e0eaf0; }
  html.look-oshi.p2-figure #care-gap .p2-lead-in { margin: 0 0 clamp(8px, 1.4svh, 18px); font: 600 clamp(13px, min(.9vw, 1.8svh), 19px)/1.3 var(--text); letter-spacing: .02em; color: #087d96; }
  html.look-oshi.p2-figure #care-gap .p2-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); flex: none; min-height: 0; margin: 0; column-gap: clamp(14px, 1.6vw, 36px); }
  html.look-oshi.p2-figure #care-gap .p2-stat { display: block; grid-column: auto; padding: 0; border: 0; }
  html.look-oshi.p2-figure #care-gap .p2-stat strong { display: block; justify-self: auto; font-size: clamp(30px, min(2.9vw, 5.6svh), 76px); line-height: 1; color: #087d96; }
  html.look-oshi.p2-figure #care-gap .p2-stat p { max-width: none; white-space: normal; margin: 6px 0 0; font-size: clamp(13px, min(.95vw, 1.85svh), 20px); line-height: 1.3; color: var(--rd-ink); }
  html.look-oshi.p2-figure #care-gap .p2-stat .p2-upto { display: block; margin: 0 0 2px; text-align: left; font-size: .3em; }

  /* UBi at the figure's lower left corner, half outside it */
  /* UBi stands in the figure's lower left corner, about a third outside it, as its presenter; the evidence row starts
     after her so she covers nothing */
  html.look-oshi.p2-figure #care-gap .response-story.p2 { --lo-ubi: clamp(110px, 8vw, 210px); }
  html.look-oshi.p2-figure #care-gap .response-story.p2 > .p2-seat { grid-area: fig; position: relative; inset: auto; align-self: end; justify-self: start; z-index: 5; width: var(--lo-ubi); height: auto; aspect-ratio: 420 / 600; margin: 0; transform: translateX(-35%); }
  html.look-oshi.p2-figure #care-gap .lo-fig-evidence { padding-left: calc(var(--lo-ubi) * .65 - clamp(20px, 2vw, 44px) + 14px); }
}
/* tall and square windows: the figure moves under the text */
@media (min-width: 901px) and (max-aspect-ratio: 5/4) {
  html.look-oshi.p2-figure #care-gap .response-story.p2 {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, .6fr) repeat(4, max-content) clamp(24px, 4svh, 56px) max-content minmax(0, .6fr);
    grid-template-areas: "." "head" "para" "list" "btn" "." "fig" ".";
  }
  html.look-oshi.p2-figure #care-gap .p2-plan-ui { align-self: start; }
  html.look-oshi.p2-figure #care-gap .p2-plot { height: clamp(160px, 22svh, 320px); }
}

/* Panel 2, astra option (?look=oshi&p2=astra; Astra's review 2026-10-25 of B, built on Alex's "ok try it"): the approved
   sequence phone > chart > early > outcomes with its internal hierarchy cut down. One unboxed introduction on a stronger
   wash; three cards at about 20 / 43 / 37 with clear arrows; the phone card keeps only the phone (UBi lands in it) and its
   line; the chart card is only the chart, with "Flagged by UBi and our nurses" then "You adjust treatment" at the treatment
   point; the evidence card opens with the early line, then the programs' three numbers, then the details link. */
#care-gap :is(.lo-a-early, .lo-a-flag, .lo-a-adjust)[hidden] { display: none; }
@media (min-width: 901px) {
  html.look-oshi.p2-astra #care-gap .response-wash { background: linear-gradient(90deg, #eff4fff2 0%, #eff4ffe6 45%, #eff4ffcc 70%, #eff4ffb3 100%); }
  html.look-oshi.p2-astra #care-gap .scene-layout, html.look-oshi.p2-astra #care-gap .gap-composition { height: auto; min-height: 100svh; }
  html.look-oshi.p2-astra #care-gap .response-story.p2 {
    position: relative; inset: auto; width: min(2000px, 88vw); max-width: none; height: 100svh; min-height: 0; margin: 0 auto;
    padding: calc(104px + 1.5svh) 0 clamp(16px, 3svh, 44px); display: flex; flex-direction: column; justify-content: center; gap: clamp(16px, 3.2svh, 48px);
  }
  /* the introduction */
  html.look-oshi.p2-astra #care-gap .p2-head { flex: none; width: auto; max-width: none; padding: 0; }
  html.look-oshi.p2-astra #care-gap .p2-head::before { display: none; }
  html.look-oshi.p2-astra #care-gap .p2-head h2 { max-width: 24em; margin: 0; font-size: clamp(34px, min(2.55vw, 5.2svh), 64px); font-weight: 400; line-height: 1.08; letter-spacing: -.03em; }
  html.look-oshi.p2-astra #care-gap .p2-head > p { max-width: 62em; margin: clamp(8px, 1.4svh, 20px) 0 0; font-size: clamp(15px, min(1.05vw, 2.05svh), 22px); line-height: 1.45; color: #3d5862; }

  /* the row */
  html.look-oshi.p2-astra #care-gap .p2-stage { flex: 1 1 auto; min-height: 0; max-height: max(420px, 40vw); /* a square window's row stays card-shaped */ display: grid; grid-template-columns: minmax(0, 20fr) clamp(40px, 3.2vw, 72px) minmax(0, 43fr) clamp(40px, 3.2vw, 72px) minmax(0, 37fr) !important; grid-template-rows: minmax(0, 1fr); }
  html.look-oshi.p2-astra #care-gap .p2-card { min-height: 0; display: flex; flex-direction: column; padding: clamp(16px, 2.4svh, 40px) clamp(16px, 1.5vw, 36px); }
  html.look-oshi.p2-astra #care-gap .p2-link { align-self: center; justify-self: stretch; height: 3px; margin: 0 6px; background: linear-gradient(90deg, #087d9600, #087d96); }
  html.look-oshi.p2-astra #care-gap .p2-link::after { width: 12px; height: 12px; border-top-width: 3px; border-right-width: 3px; border-color: #087d96; }

  /* card 1: the phone and its line */
  html.look-oshi.p2-astra #care-gap .p2-card--patient figcaption { display: none; }
  html.look-oshi.p2-astra #care-gap .p2-phone { flex: 1 1 auto; height: auto; min-height: 0; margin: 0 0 clamp(10px, 1.8svh, 24px); }
  html.look-oshi.p2-astra #care-gap .p2-phone { container-type: size; }
  html.look-oshi.p2-astra #care-gap .p2-phone-frame { height: min(100cqh, 100cqw * 20 / 9); max-height: none; } /* never wider than its card on a tall window */
  html.look-oshi.p2-astra #care-gap .p2-card--patient > p { flex: none; font-size: clamp(14px, min(.98vw, 1.9svh), 20px); line-height: 1.4; }

  /* card 2: only the chart */
  html.look-oshi.p2-astra #care-gap .p2-card--plan header { display: none; }
  html.look-oshi.p2-astra #care-gap .p2-plan-ui { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
  html.look-oshi.p2-astra #care-gap .p2-trend { flex: 1 1 auto; min-height: 0; }
  html.look-oshi.p2-astra #care-gap .p2-trend-name { font-size: clamp(14px, min(1vw, 2svh), 21px); }
  html.look-oshi.p2-astra #care-gap .p2-plot { flex: 1 1 auto; height: auto; min-height: 120px; }
  html.look-oshi.p2-astra #care-gap .p2-note, html.look-oshi.p2-astra #care-gap .p2-target-label, html.look-oshi.p2-astra #care-gap .p2-axis { font-size: clamp(13px, min(.9vw, 1.8svh), 19px); }
  html.look-oshi.p2-astra #care-gap .p2-note--adjust > strong, html.look-oshi.p2-astra #care-gap .p2-note--adjust > .p2-note-sub { display: none; }
  html.look-oshi.p2-astra #care-gap .p2-note--adjust { white-space: normal; width: max-content; max-width: calc(var(--x) - 20px); text-align: right; }
  html.look-oshi.p2-astra #care-gap .p2-note--adjust .lo-a-flag[hidden] { display: block; font-weight: 500; color: #087d96; text-wrap: balance; }
  html.look-oshi.p2-astra #care-gap .p2-note--adjust .lo-a-adjust[hidden] { display: block; margin-top: 2px; font-weight: 700; color: #4d56a3; }
  html.look-oshi.p2-astra #care-gap .p2-note--adjust .lo-a-adjust[hidden]::before { content: "\2193  "; color: #087d96; }

  /* card 3: the early line, then the outcomes, then the link */
  html.look-oshi.p2-astra #care-gap .p2-card--gi :is(.p2-gi-head, .p2-why) { display: none; }
  html.look-oshi.p2-astra #care-gap .p2-card--gi .lo-a-early[hidden] { display: block; margin: 0 0 clamp(12px, 2.4svh, 32px); font: 500 clamp(18px, min(1.4vw, 2.8svh), 32px)/1.22 var(--display); letter-spacing: -.015em; color: var(--rd-ink); }
  html.look-oshi.p2-astra #care-gap .p2-lead-in { margin: 0 0 clamp(4px, 1svh, 12px); font-size: clamp(13px, min(.9vw, 1.8svh), 19px); }
  html.look-oshi.p2-astra #care-gap .p2-stats { flex: 1 1 auto; min-height: 0; align-content: space-evenly; }
  html.look-oshi.p2-astra #care-gap .p2-stat { padding: clamp(4px, 1svh, 14px) 0; }
  html.look-oshi.p2-astra #care-gap .p2-stat strong { font-size: clamp(32px, min(2.9vw, 5.6svh), 76px); }
  html.look-oshi.p2-astra #care-gap .p2-stat p { font-size: clamp(14px, min(1vw, 1.95svh), 21px); }
  html.look-oshi.p2-astra #care-gap .p2-stat small.p2-upto { display: inline; margin: 0 .35em 0 0; font-size: .3em; letter-spacing: .06em; vertical-align: .9em; text-align: left; }
  html.look-oshi.p2-astra #care-gap .p2-card--gi .program-detail-trigger { flex: none; align-self: flex-start; margin: clamp(8px, 1.6svh, 20px) 0 0; padding: 4px 0; }
}

/* Panel 2, headings option (?look=oshi&p2=headings; Alex 2026-10-25 "try a version with just the heading capturing the key
   points", then on its first build "messing up the visual hierarchy for the outcomes ... awkwardly positioning at each
   panel", then "try it" on one shared template). The approved layout with his headline and no box. Every card is the
   same template: its step number and a two-line heading in a band of equal height across the row (subgrid), then its
   picture in the same pale inset panel, starting on the same line and filling the same height. The outcomes are one
   aligned table, numbers right-aligned in one column ("up to" a small prefix on its line), labels in the next, thin
   rules between rows, centred in the panel. Card 1 is wider so its heading fits two lines. Nothing is cut. */
@media (min-width: 901px) {
  /* only the number from each small label */
  html.look-oshi.p2-headings #care-gap .p2-eyebrow { margin: 0 0 clamp(8px, 1.4svh, 18px); font-size: 0; gap: 0; }
  html.look-oshi.p2-headings #care-gap .p2-eyebrow .p2-step { font-size: clamp(12px, min(.95vw, 1.85svh), 19px); }
  html.look-oshi.p2-headings #care-gap :is(.p2-card--patient > p, .p2-card--plan header p, .p2-gi-head img, .p2-why, .p2-lead-in) { display: none; }

  /* the row: card 1 wider; two shared rows, the heading band and the picture */
  html.look-oshi.p2-headings #care-gap .p2-stage { grid-template-columns: minmax(0, .98fr) clamp(30px, 2.2vw, 44px) minmax(0, 1.32fr) clamp(30px, 2.2vw, 44px) minmax(0, 1.16fr) !important; grid-template-rows: auto minmax(0, 1fr); }
  html.look-oshi.p2-headings #care-gap .p2-link { grid-row: 1 / span 2; align-self: center; }
  html.look-oshi.p2-headings #care-gap .p2-card { grid-row: 1 / span 2; display: grid; grid-template-rows: subgrid; row-gap: clamp(12px, 2svh, 28px); align-content: stretch; padding: clamp(16px, 2.2svh, 36px) clamp(16px, 1.6vw, 36px); } /* the same padding on every card, so the panels end on one line */
  html.look-oshi.p2-headings #care-gap .p2-card :is(figcaption, header, .p2-gi-head) { display: block; margin: 0; }
  html.look-oshi.p2-headings #care-gap .p2-card--patient figcaption, html.look-oshi.p2-headings #care-gap .p2-phone { margin-bottom: 0 !important; } /* the base sheet sets these with !important */
  html.look-oshi.p2-headings #care-gap .p2-card h3 { margin: 0; }

  /* one panel treatment for all three pictures */
  html.look-oshi.p2-headings #care-gap :is(.p2-phone, .p2-plan-ui, .p2-stats) {
    min-height: 0; margin: 0; padding: clamp(12px, 1.6svh, 26px) clamp(14px, 1.2vw, 26px);
    border: 1px solid #e0ebf1; border-radius: clamp(14px, 1.8svh, 24px); background: #f4f8fbf2; box-shadow: none;
  }
  /* card 1: the phone, as tall as the panel allows and never wider */
  html.look-oshi.p2-headings #care-gap .p2-phone { display: flex; align-items: center; justify-content: center; height: auto; container-type: size; }
  html.look-oshi.p2-headings #care-gap .p2-phone-frame { height: min(100cqh, 100cqw * 20 / 9); max-height: none; }
  /* card 2: the chart fills its panel */
  html.look-oshi.p2-headings #care-gap .p2-plan-ui { display: flex; flex-direction: column; }
  html.look-oshi.p2-headings #care-gap .p2-trend { flex: 1 1 auto; min-height: 0; }
  html.look-oshi.p2-headings #care-gap .p2-plot { flex: 1 1 auto; height: auto; min-height: 90px; }
  /* card 3: the outcomes as one aligned table */
  html.look-oshi.p2-headings #care-gap .p2-stats { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-content: center; column-gap: clamp(14px, 1.2vw, 26px); }
  html.look-oshi.p2-headings #care-gap .p2-stat { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; padding: clamp(10px, 1.8svh, 24px) 0; border: 0; border-top: 1px solid #dbe7ee; }
  html.look-oshi.p2-headings #care-gap .p2-stat:first-child { border-top: 0; }
  html.look-oshi.p2-headings #care-gap .p2-stat strong { justify-self: end; font-size: clamp(30px, min(2.7vw, 5.2svh), 68px); color: var(--rd-teal); }
  html.look-oshi.p2-headings #care-gap .p2-stat p { font-size: clamp(14px, min(1vw, 1.95svh), 21px); line-height: 1.3; white-space: normal; }
  html.look-oshi.p2-headings #care-gap .p2-stat small.p2-upto { display: inline; margin: 0 .3em 0 0; font-size: .3em; letter-spacing: .06em; vertical-align: .95em; text-align: left; color: #557580; }
}

/* Version B on laptops (the scaled layout under 1920x950): the panel is never taller than the window. The bigger title
   takes its room from the chart, which flexes down to the 132px its labels need, and from the empty margin under the
   cards; the cards' row shrinks with it, so the phone, the chart and the numbers still start and end on one line. */
@media (min-width: 901px) and (max-width: 1919.98px), (min-width: 901px) and (max-height: 949.98px) {
  html.look-oshi:not([class*="p2-"]) #care-gap .response-story.p2 { height: min(100svh, calc(104px + 1150 * var(--u))); box-sizing: border-box; padding-bottom: calc(40 * var(--u)); }
  html.look-oshi:not([class*="p2-"]) #care-gap .p2-stage { flex: 1 1 auto; min-height: 0; }
  html.look-oshi:not([class*="p2-"]) #care-gap .p2-plan-ui { min-height: 0; }
  html.look-oshi:not([class*="p2-"]) #care-gap .p2-trend { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
  html.look-oshi:not([class*="p2-"]) #care-gap .p2-plot { flex: 1 1 0; height: auto; min-height: 132px; }
  /* room to breathe (Alex 10-25: on a laptop "it looks crowded and the sub header text is too small"): more space under
     the menu, between the title and the paragraph and above the cards; the paragraph at about Oshi's 20px and a little
     wider, still clear of her face; the title a few pixels smaller and the evidence numbers smaller to pay for it */
  html.look-oshi:not([class*="p2-"]) #care-gap .response-story.p2 { padding-top: calc(104px + 24 * var(--u)); gap: calc(40 * var(--u)); }
  html.look-oshi:not([class*="p2-"]) #care-gap .p2-head h2 { max-width: 44vw; font-size: clamp(30px, min(3.2vw, 8.6svh - 22px), 52px); margin-bottom: calc(18 * var(--u)); }
  html.look-oshi:not([class*="p2-"]) #care-gap .p2-head > p:not(.lo-para) { max-width: 44vw; font-size: clamp(16px, min(1.5vw, 3.2svh - 4px), 22px); line-height: 1.4; }
  html.look-oshi:not([class*="p2-"]) #care-gap .p2-stat strong { font-size: clamp(30px, min(3.2vw, 9.5svh - 28px), 60px); }

  /* Astra's laptop review (2026-10-25, Alex "so can you fix it"), its first four changes; the desktop is unchanged.
     1. One width at every laptop height (the scaled layout narrowed the panel as the window got shorter, so it wrapped
        more exactly where height was scarce), and an explicit vertical budget: 112px to the title, the title at 48px on
        a 760px-tall window and 44px on a 657px one, three lines, the paragraph at 21px and 20px, two lines. */
  html.look-oshi:not([class*="p2-"]) #care-gap .response-story.p2 { width: min(1709px, 89vw); padding-top: 112px; padding-bottom: clamp(20px, 3.7svh, 32px); gap: clamp(16px, 2.6svh, 24px); }
  /* the header gives room back to the cards on short laptop windows (Alex 10-25: "why is the header and subheader not
     adjusting to make space for the rest of the content"): the title about 44px and the paragraph 24px on two lines on a
     760px-tall window, both larger as the window grows */
  html.look-oshi:not([class*="p2-"]) #care-gap .p2-head h2 { max-width: 680px; font-size: clamp(30px, min(3.3vw, 3.9svh + 14.5px), 50px); line-height: 1.08; margin-bottom: clamp(8px, 1.6svh, 12px); }
  html.look-oshi:not([class*="p2-"]) #care-gap .p2-head > p:not(.lo-para) { max-width: 700px; font-size: clamp(19px, min(1.76vw, 3.6svh - 3.4px), 26px); line-height: 1.3; }
  /* the wash solid under the whole title and paragraph, then a short fade before her face (Alex 10-25: "on the laptop
     view the gradient needs to go farther so the text behind it is easy to read") */
  html.look-oshi:not([class*="p2-"]) #care-gap .response-wash { background: linear-gradient(90deg, #eff4fff2 0px, #eff4ffeb calc(5.5vw + 640px), #eff4ffb3 calc(5.5vw + 680px), #eff4ff40 calc(5.5vw + 720px), #eff4ff00 calc(5.5vw + 760px)); }
  /* 2. the cards at 364 / 416 / 388 with 24px between; each heading fills its card's width (balanced wrapping had left
        card 2 four lines with room to spare), 17px on 21px */
  html.look-oshi:not([class*="p2-"]) #care-gap .p2-stage { grid-template-columns: minmax(0, 404fr) 24px minmax(0, 376fr) 24px minmax(0, 388fr) !important; }
  html.look-oshi:not([class*="p2-"]) #care-gap .p2-card { padding: clamp(14px, 2.6svh, 20px) 17px; row-gap: clamp(12px, 2.1svh, 16px); }
  html.look-oshi:not([class*="p2-"]) #care-gap { --b-h3: clamp(20px, 2.9svh, 22px); }
  html.look-oshi:not([class*="p2-"]) #care-gap .p2-card h3 { font-size: var(--b-h3); line-height: 1.2; text-wrap: pretty; }
  /* 3. the chart's key fact readable: its title at 14px, every label at least 12px, "Her target range" back at the left
        inside the band at 13px semibold; the evidence numbers at 44px (38px on the shorter window), labels 16px */
  html.look-oshi:not([class*="p2-"]) #care-gap .p2-trend-name { font-size: 16px; }
  html.look-oshi:not([class*="p2-"]) #care-gap :is(.p2-note, .p2-axis) { font-size: max(14px, calc(14.725 * var(--u))); }
  html.look-oshi:not([class*="p2-"]) #care-gap .p2-plot .p2-target-label { left: 8px; right: auto; text-align: left; font-size: 15px; font-weight: 600; }
  html.look-oshi:not([class*="p2-"]) #care-gap .p2-stat strong { font-size: clamp(30px, min(3vw, 5.3svh, 9svh - 25px), 60px); }
  html.look-oshi:not([class*="p2-"]) #care-gap .p2-stat { padding: clamp(3px, min(.45vw, 1.6svh - 6px), 16px) 0; }
  html.look-oshi:not([class*="p2-"]) #care-gap .p2-stat--cost { padding-top: calc(clamp(3px, min(.45vw, 1.6svh - 6px), 16px) + 12px); }
  html.look-oshi:not([class*="p2-"]) #care-gap .p2-stat p { font-size: clamp(16px, 2.3svh, 17px); line-height: 1.25; }
  /* 4. the connectors between the cards as thin muted arrows, without the glowing dot */
  html.look-oshi:not([class*="p2-"]) #care-gap .p2-link { height: 1px; margin: 0 4px; background: #0c93b059; }
  html.look-oshi:not([class*="p2-"]) #care-gap .p2-link::after { width: 6px; height: 6px; border-width: 1px; border-color: #0c93b0a6; }
  html.look-oshi:not([class*="p2-"]) #care-gap .p2-link i { display: none; }
}

/* Version B on the large desktop (1920x950 and up; Alex 10-25 "text too small in many places"): the chart's title and
   labels, its target band and its axis a step larger, read at the same distance as the card headings */
@media (min-width: 1920px) and (min-height: 950px) {
  html.look-oshi:not([class*="p2-"]) #care-gap .p2-trend-name { font-size: clamp(20px, 1.9svh, 26px); }
  html.look-oshi:not([class*="p2-"]) #care-gap .p2-note { font-size: clamp(19px, 1.75svh, 24px); }
  html.look-oshi:not([class*="p2-"]) #care-gap .p2-plot .p2-target-label { font-size: clamp(19px, 1.75svh, 24px); font-weight: 600; }
  html.look-oshi:not([class*="p2-"]) #care-gap .p2-axis { font-size: clamp(19px, 1.65svh, 22px); }
  /* the $22K row keeps room above its number for "up to" */
  html.look-oshi:not([class*="p2-"]) #care-gap .p2-stat--cost { padding-top: calc(clamp(6px, min(.6vw, 1.1svh), 16px) + .22 * clamp(30px, min(3.9vw, 6.3svh, 10svh - 45px), 120px)); }
  /* card 3 keeps the same bottom padding as the other cards (the approved layout trims it under 2200px wide), so the
     numbers end on the same line as the phone and the chart */
  html.look-oshi:not([class*="p2-"]) #care-gap .p2-card--gi { padding-bottom: clamp(16px, 2.1svh, 40px); }
}

/* narrow laptop charts (under 1300px wide): "Her target range" on two lines at the right end of the band, clear of "Back in range" */
@media (min-width: 901px) and (max-width: 1300px) {
  html.look-oshi:not([class*="p2-"]) #care-gap .p2-plot .p2-target-label { left: auto; right: 8px; max-width: 5.5em; white-space: normal; text-align: right; font-size: 13px; }
}

/* narrow windows (901 to 1199px wide: small laptops, a tablet on its side): the card headings and circles a size down,
   the chart's labels at 12px, "Treatment adjusted" wrapping inside the chart, "Her target range" on one line at the
   bottom left of the band (below "Back in range"), and the evidence a size down, so nothing crowds or spills */
@media (min-width: 901px) and (max-width: 1199.98px) {
  html.look-oshi:not([class*="p2-"]) #care-gap { --b-h3: 18px; }
  html.look-oshi:not([class*="p2-"]) #care-gap .p2-card { padding: 14px; }
  html.look-oshi:not([class*="p2-"]) #care-gap .p2-card h3 { font-size: 18px; }
  html.look-oshi:not([class*="p2-"]) #care-gap :is(.p2-card--patient figcaption, .p2-card--plan header, .p2-gi-head) { column-gap: 10px; }
  html.look-oshi:not([class*="p2-"]) #care-gap .p2-trend-name { font-size: 14px; }
  html.look-oshi:not([class*="p2-"]) #care-gap :is(.p2-note, .p2-axis) { font-size: 12px; }
  html.look-oshi:not([class*="p2-"]) #care-gap .p2-note--adjust { white-space: normal; width: max-content; max-width: calc(var(--x) - 18px); text-align: right; }
  html.look-oshi:not([class*="p2-"]) #care-gap .p2-plot .p2-target-label { left: 8px; right: auto; max-width: none; white-space: nowrap; text-align: left; font-size: 12px; }
  html.look-oshi:not([class*="p2-"]) #care-gap .p2-stat strong { font-size: clamp(26px, min(3vw, 5.3svh), 40px); }
  html.look-oshi:not([class*="p2-"]) #care-gap .p2-stat p { font-size: 14px; }
  html.look-oshi:not([class*="p2-"]) #care-gap .p2-stats > .p2-lead-in { font-size: 12px; }
  html.look-oshi:not([class*="p2-"]) #care-gap .p2-head { max-width: none; }
}

/* Panel 3 trial (?look=oshi; Alex 10-25 "any way we could oshi it up a bit ... i do like the scrolling to reveal the next
   part like we have on mobile"; labels keep "AI-powered closed-loop", his "dont cut those"). Left: the title and lead at
   panel 2's type scale, the three topics as a numbered list (the current one's circle filled and its label highlighted as
   in the opening), then the current topic's heading and its short phone sentence, then the button. Right: the photo and
   app film fill their card, the media controls laid over its foot. homepage-look-oshi.js steps the topics on scroll. */
@media (min-width: 901px) {
  html.look-oshi:not([class*="p2-"]) #everyday { --s3-label: clamp(17px, min(1.1vw, 2.2svh), 28px); --s3-chip: calc(var(--s3-label) * 2); --s3-dt: clamp(19px, min(1.4vw, 2.7svh), 34px); --s3-dc: clamp(16px, min(1.05vw, 2.1svh), 26px); }
  /* one page stop for the panel: a full-height section under the menu got a second reading stop 180px lower, which
     would cost the reader an extra scroll after the third topic */
  html.look-oshi:not([class*="p2-"]) #everyday { min-height: calc(100svh - 40px) !important; }
  html.look-oshi:not([class*="p2-"]) #everyday .voice-layout { height: calc(100svh - clamp(150px, 15svh, 200px)); align-items: stretch; }
  html.look-oshi:not([class*="p2-"]) #everyday .voice-copy { display: flex; flex-direction: column; justify-content: center; min-height: 0; }
  html.look-oshi:not([class*="p2-"]) #everyday .voice-copy > * { flex-shrink: 0; }
  html.look-oshi:not([class*="p2-"]) #everyday .app-topics button { min-height: 0 !important; height: auto !important; }
  html.look-oshi:not([class*="p2-"]) #everyday #everyday-title { max-width: none; font-size: clamp(30px, min(3.4vw, 9.7svh - 25px, 6.3svh), 64px); line-height: 1.06; }
  html.look-oshi:not([class*="p2-"]) #everyday .chapter-lead { max-width: none; margin-top: clamp(8px, 1.6svh, 20px); font-size: clamp(16px, min(1.55vw, 3svh), 34px); line-height: 1.35; color: #1f4550; }
  html.look-oshi:not([class*="p2-"]) #everyday .app-topics { display: flex; flex-direction: column; gap: clamp(6px, 1.1svh, 16px); margin-top: clamp(14px, 2.6svh, 40px); padding-bottom: 0; border-bottom: 0 !important; counter-reset: s3; }
  /* the three bars that fill as the reader scrolls (as on the phone), between the list and the topic's words */
  html.look-oshi:not([class*="p2-"]) #everyday .lo-p3-progress { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: clamp(12px, 2svh, 28px); }
  html.look-oshi:not([class*="p2-"]) #everyday .lo-p3-progress span { height: 4px; border-radius: 2px; background: #d6e3ec; overflow: hidden; }
  html.look-oshi:not([class*="p2-"]) #everyday .lo-p3-progress i { display: block; height: 100%; background: #087d96; transform-origin: left; transform: scaleX(var(--fill, 0)); transition: transform .12s linear; }
  html.look-oshi:not([class*="p2-"]) #everyday .app-topics button { counter-increment: s3; display: grid !important; grid-template-columns: var(--s3-chip) minmax(0, 1fr); align-items: center; column-gap: clamp(10px, .85vw, 18px); margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; font: 400 var(--s3-label)/1.2 var(--display) !important; color: #3d5862 !important; text-align: left; white-space: normal; }
  html.look-oshi:not([class*="p2-"]) #everyday .app-topics button::before { content: counter(s3, decimal-leading-zero); display: grid; place-items: center; width: var(--s3-chip); height: var(--s3-chip); border-radius: 50%; background: #e2f3f7; color: #0c7f96; font: 600 calc(var(--s3-label) * .85)/1 var(--display); }
  html.look-oshi:not([class*="p2-"]) #everyday .app-topics button::after { display: none !important; }
  html.look-oshi:not([class*="p2-"]) #everyday .app-topics button[aria-selected="true"] { color: #0e3b47 !important; }
  html.look-oshi:not([class*="p2-"]) #everyday .app-topics button[aria-selected="true"]::before { background: #0c93b0; color: #fff; }
  html.look-oshi:not([class*="p2-"]) #everyday .app-topics button .nowrap { white-space: normal; }
  html.look-oshi:not([class*="p2-"]) #everyday .app-topics button .lo-label { justify-self: start; }
  html.look-oshi:not([class*="p2-"]) #everyday .app-topics button[aria-selected="true"] .lo-label { font-weight: 600; background: #d2f0f3; padding: .02em .14em; margin: 0 -.06em; border-radius: 5px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  /* room for the longest topic (a two-line heading and a three-line sentence), so the column does not shift between steps */
  html.look-oshi:not([class*="p2-"]) #everyday .app-detail { min-height: calc(var(--s3-dt) * 2.4 + clamp(6px, 1svh, 14px) + var(--s3-dc) * 4.2); margin-top: clamp(12px, 2.2svh, 32px); }
  html.look-oshi:not([class*="p2-"]) #everyday #app-topic-title { max-width: none; font-size: var(--s3-dt); line-height: 1.2; font-weight: 500; }
  html.look-oshi:not([class*="p2-"]) #everyday #app-topic-copy { max-width: none; margin-top: clamp(6px, 1svh, 14px); font-size: var(--s3-dc); line-height: 1.4; }
  html.look-oshi:not([class*="p2-"]) #everyday .everyday-join { display: none; }
  html.look-oshi:not([class*="p2-"]) #everyday .app-reveal { height: auto !important; align-self: stretch; }
  html.look-oshi:not([class*="p2-"]) #everyday .app-photo { inset: 0 !important; height: auto !important; }
  html.look-oshi:not([class*="p2-"]) #everyday .app-surface { height: 100% !important; grid-template-rows: minmax(0, 1fr) !important; }
  /* the phone as tall as the picture allows and at its left, so the photo beside it (the toilet sensor) shows (Alex
     10-25: "the phone could be larger and more to the left on its panel as its covering the toilet sensor") */
  html.look-oshi:not([class*="p2-"]) #everyday .app-device { justify-self: start !important; align-self: center; height: 100% !important; width: auto !important; max-width: 100%; aspect-ratio: 286 / 584; }
  html.look-oshi:not([class*="p2-"]) #everyday .app-media-controls { background: transparent; }
  /* the bathroom photo framed so the toilet and its lid sensor sit to the right of the phone at every size */
  html.look-oshi:not([class*="p2-"]) #everyday .app-reveal[data-topic="stool"] .app-surface::before { background-position: center, 28% center; }
}
@media (min-width: 901px) and (max-width: 1919.98px), (min-width: 901px) and (max-height: 949.98px) {
  html.look-oshi:not([class*="p2-"]) #everyday #everyday-title { font-size: clamp(30px, min(3.3vw, 3.9svh + 14.5px), 50px); }
  html.look-oshi:not([class*="p2-"]) #everyday .chapter-lead { font-size: clamp(16px, min(1.5vw, 2.9svh - 2px), 22px); }
  /* the topics, their heading and sentence at panel 2's laptop sizes (labels about 20px, heading 22px, sentence 17px on a
     760px-tall window), a step smaller on the shortest windows */
  html.look-oshi:not([class*="p2-"]) #everyday { --s3-label: clamp(16px, 2.6svh, 20px); --s3-dt: clamp(18px, 2.9svh, 22px); --s3-dc: clamp(15px, 2.25svh, 17px); }
}
/* panel 3 on narrow windows (under 1200px wide): its sentences run to four lines, so the topic area keeps room for four */
@media (min-width: 901px) and (max-width: 1199.98px) {
  html.look-oshi:not([class*="p2-"]) #everyday .app-detail { min-height: calc(var(--s3-dt) * 2.4 + clamp(6px, 1svh, 14px) + var(--s3-dc) * 5.6); }
}

/* Panel 7 trial (?look=oshi; Alex 10-25 "on evidence slide remove this: Results come from published studies of the care
   approach UBi runs, not from UBi trials. Costs are modeled." and "try to space things out more vertically on desktop") */
@media (min-width: 901px) {
  html.look-oshi:not([class*="p2-"]) #outcomes .ev-note { display: none; }
}
@media (min-width: 1920px) and (min-height: 950px) {
  html.look-oshi:not([class*="p2-"]) #outcomes .outcomes-layout { row-gap: clamp(24px, 3svh, 48px); }
  html.look-oshi:not([class*="p2-"]) #outcomes .ev-picker { margin-bottom: clamp(16px, 2.2svh, 32px); }
  /* the card fills the screen's height with its content at a larger scale (claim, paragraph, numbers and their text),
     spaced evenly; the chart keeps its shape and sits centred beside them */
  html.look-oshi:not([class*="p2-"]) #outcomes .ev-pane:not([hidden]) { display: grid; grid-template-rows: minmax(0, 1fr); min-height: calc(100svh - 430px); padding: clamp(32px, 3.4svh, 52px) clamp(34px, 2.4vw, 56px); }
  html.look-oshi:not([class*="p2-"]) #outcomes .ev-summary { height: 100%; grid-template-rows: auto auto auto auto; align-content: center; row-gap: clamp(18px, 2.4svh, 36px); }
  html.look-oshi:not([class*="p2-"]) #outcomes .ev-summary-main { row-gap: clamp(18px, 2.4svh, 36px); }
  html.look-oshi:not([class*="p2-"]) #outcomes .ev-claim { font-size: clamp(34px, min(1.75vw, 3.5svh), 44px); line-height: 1.15; }
  html.look-oshi:not([class*="p2-"]) #outcomes .ev-summary-main > p { font-size: clamp(19px, min(.92vw, 1.85svh), 23px); line-height: 1.5; max-width: 46em; }
  html.look-oshi:not([class*="p2-"]) #outcomes .ev-tiles li { gap: 10px; padding: clamp(20px, 2.2svh, 30px) clamp(20px, 1.2vw, 28px); }
  html.look-oshi:not([class*="p2-"]) #outcomes .ev-tiles strong { font-size: clamp(46px, min(2.4vw, 4.8svh), 60px); }
  html.look-oshi:not([class*="p2-"]) #outcomes .ev-tiles span { font-size: clamp(18px, min(.8vw, 1.6svh), 20px); line-height: 1.3; }
  html.look-oshi:not([class*="p2-"]) #outcomes .ev-sim { align-self: center; }
}

/* Panel 5 trial (?look=oshi; Alex 10-25: "UBi covers the text on the bottom as the slide progresses, and the timings keep
   being off, should we do a similar thing where as you scroll it progresses from one rung to the next autoplaying the movie
   on that section" + "should we mention the 6000 hours saved in total admin burden on this panel instead of burying it").
   Header: the title, and beside it the ~6,000 staff hours (the program details sheet's own words). The five steps as a
   clean numbered list (the current label highlighted as in the opening), five bars under it that fill as the reader
   scrolls (homepage-look-oshi.js; the 5-second timer is off), the step's words under them, the film beside. UBi sits
   inside the film's frame, clear of the words. */
@media (min-width: 901px) {
  html.look-oshi:not([class*="p2-"]) #earlier-action { min-height: calc(100svh - 40px) !important; }
  html.look-oshi:not([class*="p2-"]) #earlier-action .chapter-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: clamp(28px, 3vw, 80px); }
  html.look-oshi:not([class*="p2-"]) #earlier-action #action-title { max-width: 24em; font-size: clamp(28px, min(2.6vw, 5svh), 60px); line-height: 1.08; }
  html.look-oshi:not([class*="p2-"]) #earlier-action .lo-p5-hours { display: grid; justify-items: start; row-gap: 2px; margin: 0; padding-left: clamp(18px, 1.6vw, 36px); border-left: 2px solid #d2f0f3; }
  html.look-oshi:not([class*="p2-"]) #earlier-action .lo-p5-hours strong { font: 600 clamp(36px, min(2.9vw, 5.8svh), 74px)/1 var(--display); letter-spacing: -.04em; color: var(--rd-teal); }
  html.look-oshi:not([class*="p2-"]) #earlier-action .lo-p5-hours span { font: 600 clamp(15px, min(1.05vw, 2.1svh), 24px)/1.25 var(--text); color: #0e3b47; }
  html.look-oshi:not([class*="p2-"]) #earlier-action .lo-p5-hours small { font: 400 clamp(12px, min(.8vw, 1.6svh), 17px)/1.3 var(--text); color: #557580; }
  html.look-oshi:not([class*="p2-"]) #earlier-action .workflow-rail [data-scene-step] { border-bottom: 0 !important; }
  html.look-oshi:not([class*="p2-"]) #earlier-action .workflow-rail [data-scene-step]::after { display: none !important; }
  html.look-oshi:not([class*="p2-"]) #earlier-action .workflow-rail [aria-pressed="true"] .lo-label { font-weight: 600; color: #0e3b47; background: #d2f0f3; padding: .02em .14em; margin: 0 -.06em; border-radius: 5px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  html.look-oshi:not([class*="p2-"]) #earlier-action .lo-p5-progress { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: clamp(8px, 1.4svh, 18px); }
  /* the film at the right of its column, and UBi standing in the space between the step's words and the film, so she
     covers neither (inside the frame she sat on the films' own text) */
  html.look-oshi:not([class*="p2-"]) #earlier-action .p5-screen { justify-items: end; }
  html.look-oshi:not([class*="p2-"]) #earlier-action .p5-frame .workflow-seat { left: auto !important; right: calc(100% + clamp(10px, 1vw, 28px)) !important; top: auto !important; bottom: 0 !important; }
  html.look-oshi:not([class*="p2-"]) #earlier-action .p5-frame .workflow-seat { width: min(20%, 190px) !important; height: auto !important; aspect-ratio: 118 / 157; }
  html.look-oshi:not([class*="p2-"]) #earlier-action .lo-p5-progress span { height: 4px; border-radius: 2px; background: #d6e3ec; overflow: hidden; }
  html.look-oshi:not([class*="p2-"]) #earlier-action .lo-p5-progress i { display: block; height: 100%; background: #087d96; transform-origin: left; transform: scaleX(var(--fill, 0)); transition: transform .12s linear; }
}

/* Opening trial sentence (?look=oshi; Alex 10-25): his picked sentence, payoffs highlighted. The text column wider, to
   breathe ("the left panel should probably be wider"), taken from UBi's column, not the film's ("i dont like that the movie
   got smaller"); UBi is drawn at her old size. The sentence stops short of UBi, who is drawn wider than her column. */
@media (min-width: 901px) {
  /* UBi stands in the gap between the text and the film rather than in a column of her own, so the film can be bigger
     (Alex 10-25: "ubi should be in between the header column and the movie, so the movie can be bigger") */
  html.look-oshi.lo-hero-new #top .hero-layout { grid-template-columns: minmax(0, 41fr) minmax(0, var(--lo-ubi-col, 10fr)) minmax(0, 49fr); }
  html.look-oshi.lo-hero-new #top .hero-character { width: min(calc(100% * 21 / 10 / .7), calc(100svh - 200px)); transform: translateX(4%); }
  html.look-oshi.lo-hero-new #top .hero-positioning { max-width: min(19em, 84%); }
  html.look-oshi.lo-hero-new #top .hero-promise { max-width: min(33em, 84%); }
  /* the photo tiles under the sentence, only when the content asks for them */
  html.look-oshi.lo-hero-tiles #top .hero-layout {
    grid-template-rows: minmax(0, 1fr) auto auto auto auto minmax(0, 1fr) auto;
    grid-template-areas: ". ubi film" "title ubi film" "promise ubi film" "outcomes ubi film" "actions ubi film" ". ubi film" "proof proof proof";
  }
  html.look-oshi.lo-hero-tiles #top .hero-outcomes[hidden] { grid-area: outcomes; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, .8vw, 18px); width: min(84%, clamp(420px, 30vw, 860px)); margin: clamp(16px, 2.6svh, 40px) 0 0; padding: 0; list-style: none; }
  html.look-oshi.lo-hero-tiles #top .hero-outcomes li { position: relative; display: flex; align-items: flex-end; height: clamp(104px, min(9.5vw, 15svh), 260px); overflow: hidden; border-radius: clamp(14px, 1.2vw, 24px); background: #0e3b47; }
  html.look-oshi.lo-hero-tiles #top .hero-outcomes img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  html.look-oshi.lo-hero-tiles #top .hero-outcomes .lower-admin img { object-position: 46% 38%; }
  html.look-oshi.lo-hero-tiles #top .hero-outcomes .outcomes img { object-position: 50% 26%; }
  html.look-oshi.lo-hero-tiles #top .hero-outcomes li::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #0e3b4700 38%, #0e3b47d9 100%); }
  html.look-oshi.lo-hero-tiles #top .hero-outcomes span { position: relative; z-index: 1; padding: 0 clamp(12px, 1vw, 22px) clamp(10px, 1.2svh, 20px); font: 600 clamp(15px, min(1.15vw, 2.1svh), 28px)/1.22 var(--text); color: #fff; text-shadow: 0 1px 8px #0e3b4799; }
  html.look-oshi.lo-hero-tiles #top .actions { margin-top: clamp(18px, 3svh, 48px); }
}
/* shorter windows (under 950px tall) with the tiles: the logo strip stays on screen, paid for from the header type (Alex
   10-25: "if you need space you can borrow some from the header font size"), shorter tiles and tighter gaps */
@media (min-width: 901px) and (max-height: 949.98px) {
  html.look-oshi.lo-hero-tiles #top .hero-greeting { font-size: clamp(56px, min(7.2vw, 13.6svh - 20px), 200px); }
  html.look-oshi.lo-hero-tiles #top .hero-positioning { margin-top: clamp(8px, 1.6svh, 34px); font-size: clamp(20px, min(2.4vw, 4.4svh - 4px), 58px); }
  html.look-oshi.lo-hero-tiles #top .hero-promise { margin-top: clamp(8px, 1.8svh, 40px); }
  html.look-oshi.lo-hero-tiles #top .hero-outcomes[hidden] { margin-top: clamp(10px, 1.8svh, 40px); }
  html.look-oshi.lo-hero-tiles #top .hero-outcomes li { height: clamp(72px, min(9.5vw, 17svh - 40px), 260px); }
  html.look-oshi.lo-hero-tiles #top .actions { margin-top: clamp(12px, 2.2svh, 48px); row-gap: 8px; }
}
/* tall and square windows keep their own layout (the film under the text, two columns) */
@media (min-width: 901px) and (max-aspect-ratio: 5/4) {
  html.look-oshi.lo-hero-new #top .hero-layout { grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); }
  html.look-oshi.lo-hero-new #top .hero-promise { max-width: 33em; }
  html.look-oshi.lo-hero-new #top .hero-character { width: min(calc(100% / .7), calc((100svh - 104px) * .37)); }
  html.look-oshi.lo-hero-tiles #top .hero-layout {
    grid-template-rows: minmax(0, 1fr) auto auto auto auto auto minmax(0, 1fr) auto;
    grid-template-areas: ". ubi" "title ubi" "promise ubi" "outcomes ubi" "actions ubi" "film film" ". ." "proof proof";
  }
  html.look-oshi.lo-hero-tiles #top .hero-film { margin-top: clamp(28px, 3.6svh, 64px); width: min(100%, calc((100svh - 104px) * .36 * 637 / 396)); }
  html.look-oshi.lo-hero-tiles #top .hero-outcomes[hidden] { width: min(100%, clamp(420px, 30vw, 860px)); }
}