/* The opening on desktop windows smaller than 1920x950 (Alex 2026-10-22: "every layout needs to still look good like
   this desktop one"; "start with the first panel on the laptop, dont break the desktop view it looks good").

   Windows at or above 1920x950, which includes Alex's 2541x1267 desktop, never match this block and keep the rules they
   have. Below that, the opening keeps the desktop arrangement (text card on top with the buttons in a row and the logo
   strip, the film below it, UBi on the right) as one fluid layout. Every size is a multiple of --u, one desktop pixel
   scaled to the window: exactly 1px at 1920x950, so nothing jumps at the boundary, and smaller as the window narrows or
   shortens, set by whichever runs out first. Reading text has floors so it never gets tiny: the paragraph and buttons
   15px, the subtitle 17px, the logo label 11px, the Meet UBi button 14px. As on the desktop, the film fills the height
   left below the text; on smaller windows the empty band under it gives way first, so text that keeps its size does
   not shrink the film. The opening always fits one screen, so it needs no extra scroll stop.

   Height budget: 104px header plus 846 desktop pixels (16 above the card, 310 card, 34 gap, 396 film, 90 below).
   Width budget: the card and its glass edge are 1636 desktop pixels, within 89% of the window. */
@media (min-width: 901px) and (max-width: 1919.98px), (min-width: 901px) and (max-height: 949.98px) {
  #top { --u: min(1px, calc(100vw * 0.89 / 1636), calc((100svh - 104px) / 846)); }
  #top .hero-layout {
    --hero-character-width: calc(420 * var(--u));
    width: calc(1600 * var(--u));
    max-width: none;
    height: 100svh;
    margin: 0 auto;
    /* Below the film: the desktop's 90px, giving way to the film on smaller windows (24px at about two thirds scale), so
       the film keeps its size when the text above it keeps a readable size. */
    padding: calc(104px + 16 * var(--u)) 0 max(24px, calc(240 * var(--u) - 150px));
    display: grid;
    grid-template-columns: calc(1152 * var(--u)) calc(420 * var(--u));
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: calc(28 * var(--u));
    row-gap: calc(34 * var(--u));
  }

  /* The text card */
  #top .hero-copy {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    align-self: start;
    width: calc(1152 * var(--u));
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
  #top .hero-copy::before {
    inset: calc(-14 * var(--u)) calc(-36 * var(--u)) calc(-18 * var(--u)) calc(-36 * var(--u));
    border-radius: max(18px, calc(28 * var(--u)));
  }
  #top #hero-title {
    justify-self: start;
    grid-column: 1;
    grid-row: 1;
    max-width: calc(1080 * var(--u));
    margin: 0;
    font-size: calc(62 * var(--u));
    line-height: 1.04;
  }
  #top .hero-greeting { font-size: calc(62.7 * var(--u)); line-height: 1.02; }
  #top .hero-positioning {
    margin-top: calc(7.84 * var(--u));
    font-size: max(17px, calc(26.125 * var(--u)));
    line-height: 1.2;
  }
  #top .hero-promise {
    justify-self: start;
    grid-column: 1;
    grid-row: 2;
    margin: calc(14.82 * var(--u)) 0 0;
    max-width: 54.66em; /* the desktop's 1080px line at 19.76px, so the line breaks hold when the text keeps its size */
    font-size: max(15px, calc(19.76 * var(--u)));
    line-height: 1.45;
  }
  #top .actions {
    justify-self: start;
    grid-column: 1;
    grid-row: 3;
    width: auto;
    margin: calc(19 * var(--u)) 0 0;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: flex-start;
    gap: max(12px, calc(26 * var(--u)));
  }
  #top .actions .button {
    font-size: max(15px, calc(16.32 * var(--u)));
    line-height: 1.2;
    padding: max(10px, calc(13.87 * var(--u))) max(16px, calc(24.48 * var(--u)));
  }
  #top .hero-proof {
    justify-self: start;
    grid-column: 1;
    grid-row: 4;
    width: auto;
    margin: calc(16 * var(--u)) 0 0;
    padding: 0;
    border: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: calc(16 * var(--u));
  }
  #top .hero-proof-label { flex: none; max-width: 9em; font-size: max(11px, calc(13 * var(--u))); }
  #top .hero-proof-track { flex: 1 1 0; width: auto; min-width: 0; }
  #top .hero-proof-logos { --logo-h: max(18px, calc(24 * var(--u))); }

  /* The film: the desktop's rule sizes the frame to 16:9 plus its control bar inside this box */
  #top .hero-film {
    grid-column: 1;
    grid-row: 2;
    width: calc(1152 * var(--u));
    height: 100%;
    max-height: none;
    min-height: 0;
  }

  /* UBi and the Meet UBi button */
  #top .hero-character {
    position: absolute;
    top: calc(104px + 67 * var(--u));
    right: 0;
    bottom: auto;
    left: auto;
    width: calc(420 * var(--u));
    height: calc(690 * var(--u));
  }
  #top #ubi-seat { width: 100%; height: calc(600 * var(--u)); }
  #top .hello {
    position: absolute;
    top: calc(642 * var(--u));
    left: 50%;
    right: auto;
    width: auto;
    height: auto;
    transform: translateX(-50%);
    padding: max(9px, calc(12 * var(--u))) max(14px, calc(20 * var(--u)));
    font-size: max(14px, calc(18 * var(--u)));
  }
}

/* Panel 2 on desktop windows smaller than 1920x950: the desktop arrangement (question card on top, the three cards in a
   row with the phone, the chart and the three figures) as one fluid layout, every size a multiple of --u (1px at
   1920x950). Text floors: body text and the figure labels 15px, the small labels 12px, the chart labels 11px. Card 3 holds the
   most text, so on a laptop window the panel can run taller than the screen; its frame then grows with it (on the
   desktop it is one screen tall and clips), and the story controller gives it a stop that shows its bottom edge. The
   pinned scroll space around the panel is unchanged.
   Height budget: 104px header plus 846 desktop pixels (10 above the panel, 752 panel, 84 below). Width: 1709 (89%). */
@media (min-width: 901px) and (max-width: 1919.98px), (min-width: 901px) and (max-height: 949.98px) {
  #care-gap { --u: min(1px, calc(100vw * 0.89 / 1709), calc((100svh - 104px) / 846)); }
  #care-gap .gap-composition { height: auto; min-height: 100svh; }
  #care-gap .response-story.p2 {
    position: relative;
    inset: auto;
    width: calc(1709 * var(--u));
    margin: 0 auto;
    padding: calc(104px + 10 * var(--u)) 0 calc(84 * var(--u));
    display: flex;
    flex-direction: column;
    gap: calc(30.4 * var(--u));
  }

  /* The question card */
  #care-gap .p2-head { width: fit-content; max-width: calc(1012 * var(--u)); padding: 0 calc(36 * var(--u)); }
  #care-gap .p2-head::before { inset: calc(-18 * var(--u)) calc(-36 * var(--u)) calc(-16 * var(--u)) calc(-36 * var(--u)); border-radius: max(18px, calc(28 * var(--u))); }
  #care-gap .p2-head h2 { margin: 0 0 calc(13.3 * var(--u)); font-size: max(24px, calc(47 * var(--u))); line-height: 1.06; }
  #care-gap .p2-head > p { max-width: 38.46em; font-size: max(15px, calc(19 * var(--u))); line-height: 1.45; }
  #care-gap .p2-head .program-evidence-note {
    max-width: 41.1em;
    margin-top: calc(13.3 * var(--u));
    padding: 2px 0 2px calc(14 * var(--u));
    font-size: max(15px, calc(17.575 * var(--u)));
    line-height: 1.45;
  }
  #care-gap .p2-head .program-detail-trigger {
    min-height: 0;
    margin-top: calc(6 * var(--u));
    padding-top: calc(4 * var(--u));
    padding-bottom: calc(4 * var(--u));
    font-size: max(13px, calc(14.725 * var(--u)));
  }

  /* The three cards: the desktop's column widths, the row as tall as its tallest card */
  #care-gap .p2-stage {
    flex: none;
    grid-template-columns: calc(368.7 * var(--u)) calc(42.23 * var(--u)) calc(702.56 * var(--u)) calc(42.23 * var(--u)) calc(553.06 * var(--u));
    grid-template-rows: auto;
  }
  #care-gap .p2-card {
    min-height: calc(488.05 * var(--u));
    padding: calc(19.95 * var(--u)) calc(32.64 * var(--u));
    border-radius: max(16px, calc(22.8 * var(--u)));
  }
  #care-gap .p2-card--gi { padding-bottom: calc(14 * var(--u)); }
  #care-gap .p2-eyebrow { margin-bottom: calc(9.5 * var(--u)); gap: calc(10 * var(--u)); font-size: max(12px, calc(14.725 * var(--u))); line-height: 1.2; }
  #care-gap .p2-step { width: max(24px, calc(31.34 * var(--u))); height: max(24px, calc(31.34 * var(--u))); font-size: max(12px, calc(14.725 * var(--u))); }
  #care-gap .p2-card h3 { font-size: max(18px, calc(27.55 * var(--u))); line-height: 1.14; }
  #care-gap .p2-card p { font-size: max(15px, calc(18 * var(--u))); line-height: 1.4; }

  /* Card 1: the phone keeps its desktop size and shape */
  #care-gap .p2-card--patient figcaption { margin-bottom: calc(8 * var(--u)); }
  #care-gap .p2-phone { flex: none; height: calc(249 * var(--u)); margin-bottom: calc(10 * var(--u)); }
  #care-gap .p2-phone-frame { height: 100%; max-height: none; }
  #care-gap .p2-phone-frame img { border-width: max(3px, calc(5.7 * var(--u))); border-radius: max(12px, calc(32.3 * var(--u))); }

  /* Card 2: the chart keeps its desktop size */
  #care-gap .p2-card--plan header p { margin-top: calc(11.4 * var(--u)); }
  #care-gap .p2-plan-ui {
    flex: none;
    margin-top: calc(15.2 * var(--u));
    padding: calc(13.3 * var(--u)) calc(23.04 * var(--u));
    gap: calc(9.5 * var(--u));
    border-radius: max(12px, calc(19 * var(--u)));
  }
  #care-gap .p2-trend { min-height: 0; }
  #care-gap .p2-trend-name { margin-bottom: calc(6 * var(--u)); font-size: max(13px, calc(15.725 * var(--u))); }
  /* The chart keeps the room its readable labels need: at least 132px tall, where the labels, at their 12px floor, sit
     apart as they do on the desktop; the clinical note wraps to two lines as it does there. */
  #care-gap .p2-plot { flex: none; height: max(132px, calc(282 * var(--u))); min-height: 0; }
  #care-gap .p2-note--clinical { white-space: normal; max-width: calc(43.75% - 16px); }
  /* Chart labels: 11px floor, and "Her target range" moves to the right end of the band, so the readable labels clear
     each other on a laptop's narrower chart (measured clear from 1100 to 1919 wide). */
  #care-gap .p2-note, #care-gap .p2-target-label { font-size: max(11px, calc(14.725 * var(--u))); }
  #care-gap .p2-axis { font-size: max(12px, calc(14.725 * var(--u))); }
  #care-gap .p2-plot .p2-target-label { left: auto; right: 8px; text-align: right; }
  #care-gap .p2-axis { margin-top: calc(6 * var(--u)); }

  /* Card 3: the doctor, the sentence and the three figures */
  #care-gap .p2-gi-head { gap: calc(14 * var(--u)); margin-bottom: calc(6 * var(--u)); }
  #care-gap .p2-gi-head img { display: block; width: max(40px, calc(57 * var(--u))); height: max(40px, calc(57 * var(--u))); }
  #care-gap .p2-why { margin-top: calc(4 * var(--u)); }
  #care-gap .p2-lead-in { margin: calc(6 * var(--u)) 0 calc(2 * var(--u)); }
  #care-gap .p2-stats { column-gap: calc(18 * var(--u)); }
  #care-gap .p2-stat { padding: calc(5 * var(--u)) 0; }
  #care-gap .p2-stat strong { font-size: max(26px, calc(45.6 * var(--u))); line-height: 1; }
  #care-gap .p2-stat p { white-space: normal; font-size: max(15px, calc(19 * var(--u))); line-height: 1.25; } /* wraps in a laptop's narrower card */
  #care-gap .p2-stat p small, #care-gap .p2-cite { margin-top: calc(3 * var(--u)); font-size: max(12px, calc(14 * var(--u))); line-height: 1.3; }
  #care-gap .p2-stat small.p2-upto { font-size: max(11px, calc(14 * var(--u))); }
}
@media (min-width: 901px) and (max-width: 1100px) {
  #care-gap .p2-plot .p2-target-label { max-width: 5.5em; white-space: normal; } /* the narrowest charts: two lines */
}

/* Panel 3 (life with UBi) on desktop windows smaller than 1920x950: the desktop arrangement, the text, topic tabs and
   detail on the left and the app photo and recording on the right, as one fluid layout in --u (1px at 1920x950), with
   the paragraph under the headline that laptop windows used to hide. Text floors: 15px for the paragraph, tabs, detail
   and buttons; 18px for the detail heading. The stop sits 100px above the section, under the header.
   Height budget: 100px header plus 850 desktop pixels (40 above, 710 layout, 100 below). Width: 1640 (85.4%). */
@media (min-width: 901px) and (max-width: 1919.98px), (min-width: 901px) and (max-height: 949.98px) {
  #everyday { --u: min(1px, calc(100vw * 0.854 / 1640), calc((100svh - 100px) / 850)); }
  #everyday.care-chapter { min-height: 100svh; padding: calc(40 * var(--u)) 0 calc(100 * var(--u)); }
  #everyday .voice-layout {
    width: calc(1640 * var(--u));
    max-width: none;
    margin: 0 auto;
    display: grid;
    grid-template-columns: calc(746.9 * var(--u)) calc(809.1 * var(--u));
    grid-template-rows: auto;
    column-gap: calc(84 * var(--u));
    row-gap: 0;
    align-items: start;
  }
  #everyday .voice-copy { margin-top: calc(4 * var(--u)); }
  #everyday #everyday-title { max-width: 10.93em; font-size: max(26px, calc(53.2 * var(--u))); line-height: 1.05; }
  #everyday .voice-copy .chapter-lead {
    display: block;
    max-width: 25.64em;
    margin: calc(17.1 * var(--u)) 0 0;
    font-size: max(15px, calc(24.7 * var(--u)));
    line-height: 1.42;
  }
  #everyday .app-topics {
    margin-top: calc(22.8 * var(--u));
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: calc(18 * var(--u));
    row-gap: calc(20 * var(--u));
  }
  #everyday .app-topics button {
    font-size: max(15px, calc(19.95 * var(--u)));
    line-height: 1.3;
    padding: calc(9.975 * var(--u)) calc(4.99 * var(--u)) calc(13.97 * var(--u));
  }
  #everyday .app-detail { margin-top: calc(22.8 * var(--u)); }
  #everyday #app-topic-title { margin: 0 0 calc(9.5 * var(--u)); font-size: max(18px, calc(34.2 * var(--u))); line-height: 1.13; }
  #everyday #app-topic-copy { max-width: 26.28em; font-size: max(15px, calc(22.8 * var(--u))); line-height: 1.42; }
  #everyday .everyday-join {
    margin-top: calc(20.9 * var(--u));
    padding: max(9px, calc(12.6 * var(--u))) max(16px, calc(25.2 * var(--u)));
    font-size: max(15px, calc(18 * var(--u)));
    line-height: 1.4;
  }

  /* The app photo and recording */
  #everyday .app-reveal { width: calc(809.1 * var(--u)); height: calc(710 * var(--u)); }
  #everyday .app-surface {
    height: calc(648 * var(--u));
    padding: calc(32 * var(--u));
    grid-template-columns: calc(539.1 * var(--u)) calc(190 * var(--u));
    grid-template-rows: calc(584 * var(--u));
    gap: calc(16 * var(--u));
  }
  #everyday .app-device { width: calc(286 * var(--u)); height: calc(584 * var(--u)); justify-self: center; }
  #everyday .app-side { width: calc(190 * var(--u)); margin-bottom: calc(28.5 * var(--u)); }
  #everyday .voice-seat { width: calc(190 * var(--u)); height: calc(192 * var(--u)); }
  #everyday .app-photo { inset: 0 0 calc(62 * var(--u)) 0; }
  #everyday #reveal-app {
    inset: auto auto calc(24 * var(--u)) calc(24 * var(--u));
    padding: max(9px, calc(14 * var(--u))) max(14px, calc(22 * var(--u)));
    font-size: max(14px, calc(17 * var(--u)));
  }
  #everyday .app-media-controls { top: calc(648 * var(--u)); height: calc(62 * var(--u)); padding: calc(8 * var(--u)) calc(24 * var(--u)); }
}

/* Panel 4 (the biology behind the daily experience). Its laptop rules already keep the desktop arrangement with readable
   text; what laptops lost is each signal's source line ("Symptom burden", "Inflammation marker"...), hidden on windows
   800px tall or less because the six rows were too short for it. The rows get the height the line needs (the chart
   area is at least 346px tall instead of 260), the line shows at a 12px floor, and on a short laptop window the panel
   runs a little taller than the screen and gets a stop that shows its bottom. */
@media (min-width: 901px) and (max-height: 900px) {
  #whole-picture .biology-capture .bc-stage { height: max(346px, min(440px, calc(100svh - 500px))); }
  #whole-picture.care-chapter .biology-capture .bc-source-cadence { display: block; font-size: 12px; line-height: 1.15; }
}

/* Panel 7 (the clinical evidence) on desktop windows smaller than 1920x950: the desktop arrangement, the condition tabs
   with their names, the claim, the paragraph and the four figures beside the chart, as one fluid layout in --u (1px at
   1920x950), with the line under the headline, the condition names and the paragraph that windows under 860px tall
   used to hide. Text floors: 15px for the paragraph, line and buttons, 14px for the figure labels, 11px for the
   condition names and the footnote. A short window gets a stop at the panel's bottom.
   Height budget: 100px header plus 850 desktop pixels (23 above, 685 layout, the rest below). Width: 1728 (90%). */
@media (min-width: 901px) and (max-width: 1919.98px), (min-width: 901px) and (max-height: 949.98px) {
  #outcomes { --u: min(1px, calc(100vw * 0.9 / 1728), calc((100svh - 100px) / 850)); }
  #outcomes.evidence-chapter { min-height: 100svh; padding-top: calc(23 * var(--u)); padding-bottom: calc(40 * var(--u)); }
  #outcomes .outcomes-layout {
    width: calc(1728 * var(--u));
    max-width: none;
    margin: 0 auto;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    row-gap: calc(13.3 * var(--u));
  }
  #outcomes .outcomes-intro { padding-right: max(150px, calc(150 * var(--u))); } /* UBi draws at least this wide up there */
  #outcomes .outcomes-intro h2 { font-size: max(24px, calc(43.7 * var(--u))); line-height: 1.06; }
  #outcomes .outcomes-intro > p:not(.chapter-kicker) {
    display: block;
    max-width: 76.9em;
    margin-top: calc(6 * var(--u));
    font-size: max(15px, calc(17.1 * var(--u)));
    line-height: 1.4;
  }
  #outcomes .flow-seat { top: calc(-6 * var(--u)); right: 0; bottom: auto; left: auto; width: calc(130 * var(--u)); height: calc(124 * var(--u)); }

  /* The condition tabs, each with its name */
  #outcomes .ev-picker { margin-bottom: calc(11.4 * var(--u)); gap: calc(8 * var(--u)); }
  #outcomes .ev-tab { gap: 2px; padding: max(6px, calc(8 * var(--u))) max(10px, calc(16 * var(--u))) max(5px, calc(7 * var(--u))); }
  #outcomes .ev-tab strong { font-size: max(15px, calc(19.2 * var(--u))); line-height: 1.1; }
  #outcomes .ev-tab span { display: block; font-size: max(11px, calc(13 * var(--u))); line-height: 1.25; }

  /* The summary: claim, paragraph and figures on the left, the chart on the right */
  #outcomes .ev-pane { padding: calc(20.9 * var(--u)) calc(34 * var(--u)); border-radius: max(18px, calc(28 * var(--u))); }
  #outcomes .ev-summary--chart {
    grid-template-columns: calc(1013.5 * var(--u)) calc(608.1 * var(--u));
    column-gap: calc(38.4 * var(--u));
    row-gap: calc(14.25 * var(--u));
  }
  #outcomes .ev-sim--summary { grid-column: 2; grid-row: 1 / 5; align-self: start; padding: calc(16 * var(--u)) calc(18 * var(--u)) calc(14 * var(--u)); }
  #outcomes .ev-sim--summary figcaption strong { font-size: max(16px, calc(24.96 * var(--u))); }
  #outcomes .ev-sim--summary figcaption span, #outcomes .ev-sim-key { font-size: max(12px, calc(15 * var(--u))); }
  #outcomes .ev-claim { max-width: 26.45em; font-size: max(20px, calc(31.35 * var(--u))); line-height: 1.12; }
  #outcomes .ev-summary-main { row-gap: calc(14.25 * var(--u)); }
  #outcomes .ev-story { display: block; max-width: 44.85em; font-size: max(15px, calc(18.05 * var(--u))); line-height: 1.45; }
  #outcomes .ev-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(10 * var(--u)); }
  #outcomes .ev-tiles li { gap: 4px; padding: calc(14.25 * var(--u)) calc(16 * var(--u)); border-radius: max(10px, calc(14 * var(--u))); }
  #outcomes .ev-tiles strong { font-size: max(26px, calc(39.9 * var(--u))); }
  #outcomes .ev-pane .ev-tiles li > span { font-size: max(15px, calc(18 * var(--u))); line-height: 1.3; }
  #outcomes .ev-pane .ev-tiles .cite-tag { font-size: max(12px, calc(18 * var(--u))); } /* the source tags scale with the tiles */
  #outcomes .ev-more { font-size: max(15px, calc(18 * var(--u))); padding: max(10px, calc(14.25 * var(--u))) max(18px, calc(28 * var(--u))); }
  #outcomes .ev-note { margin-top: calc(6 * var(--u)); font-size: max(12px, calc(14 * var(--u))); }
}

/* Panel 5 (from referral to follow-up) on desktop windows smaller than 1920x950: the desktop arrangement, the five steps
   and the step's explanation on the left and the product mockup with UBi beside it on the right, as one fluid layout in
   --u (1px at 1920x950). The mockup is a picture of the app: it scales with its frame as on the desktop (1.683% of the
   frame's width, 14px at the desktop's 832px frame), with an 11px floor; UBi keeps its desktop size beside it. Text
   floors: 15px for the steps and the explanation, 18px for its heading.
   Height budget: 100px header plus 850 desktop pixels (55 above, 712 content, the rest below). Width: 1728 (90%). */
@media (min-width: 901px) and (max-width: 1919.98px), (min-width: 901px) and (max-height: 949.98px) {
  #earlier-action { --u: min(1px, calc(100vw * 0.9 / 1728), calc((100svh - 100px) / 850)); }
  #earlier-action.care-chapter { min-height: 100svh; padding-top: calc(55 * var(--u)); padding-bottom: calc(40 * var(--u)); }
  #earlier-action .page-width { width: calc(1728 * var(--u)); max-width: none; margin: 0 auto; }
  #earlier-action .chapter-heading { margin-bottom: calc(22 * var(--u)); }
  #earlier-action #action-title { font-size: max(26px, calc(56 * var(--u))); line-height: 1.07; }
  #earlier-action .workflow-scene {
    grid-template-columns: calc(390.7 * var(--u)) calc(1279.8 * var(--u));
    grid-template-rows: auto auto;
    column-gap: calc(57.6 * var(--u));
    row-gap: calc(15.2 * var(--u));
  }
  #earlier-action .workflow-rail button {
    gap: calc(14 * var(--u));
    padding: max(6px, calc(10.9 * var(--u))) 0;
    font-size: max(15px, calc(18.05 * var(--u)));
    line-height: 1.25;
  }
  #earlier-action .workflow-step-number { width: max(22px, calc(26.75 * var(--u))); height: max(22px, calc(26.75 * var(--u))); font-size: max(11px, calc(14.08 * var(--u))); }
  #earlier-action .workflow-explanation { padding-top: calc(19 * var(--u)); }
  #earlier-action .workflow-explanation h3 { max-width: 11.5em; margin: 0 0 calc(13.3 * var(--u)); font-size: max(18px, calc(30.4 * var(--u))); line-height: 1.12; }
  #earlier-action .workflow-explanation p { max-width: 23.06em; font-size: max(15px, calc(18.05 * var(--u))); line-height: 1.45; }

  /* The mockup and UBi */
  #earlier-action .p5-screen { grid-column: 2; grid-row: 1 / 3; }
  #earlier-action .p5-frame.p5-movie { width: calc(832 * var(--u)); aspect-ratio: 3 / 2; }
  #earlier-action .p5-movie .p5-scene { font-size: max(11px, 1.683cqw); }
  #earlier-action .p5-frame.p5-movie .workflow-seat { left: -21%; bottom: -4%; width: 20%; height: 40%; }
  #earlier-action .p5-movie .m-fields b { white-space: nowrap; } /* the referral's phone number stays on one line */
}