/* Homepage responsive adapt, lane opus: s0-s4 on phones and flow-mode tablets
   (HOME-O2..O6). Loaded after the inline <style> in landing.html, so equal-specificity
   rules here win; !important only where the inline sheet or an inline style attribute
   uses it. Nothing here applies at 1280px and up: every rule sits under max-width:1279px
   (flow mode, html.hs-flow, set by the deck script below 1280px) or max-width:767px. */

/* =====================================================================
   Phones and flow-mode tablets: s1-s4 copy and the condensed stills.
   The desktop app windows only animate in deck mode; in flow mode the
   static .m-widget stills stand in for them.
   ===================================================================== */
@media (max-width: 1279px) {

  /* ---------- HOME-O3 · copy ---------- */
  html.hs-flow #s1 .fc-desc, html.hs-flow #s2 .fc-desc,
  html.hs-flow #s3 .fc-desc, html.hs-flow #s4 .fc-desc { font-size: 16px; line-height: 1.6; margin-bottom: 20px; }
  html.hs-flow #s1 .fc-bullets, html.hs-flow #s2 .fc-bullets, html.hs-flow #s3 .fc-bullets { gap: 12px; }
  html.hs-flow #s1 .fc-bullet, html.hs-flow #s2 .fc-bullet, html.hs-flow #s3 .fc-bullet { font-size: 16px !important; line-height: 1.4; }
  html.hs-flow #s1 .fc-bullet .fc-dot, html.hs-flow #s2 .fc-bullet .fc-dot, html.hs-flow #s3 .fc-bullet .fc-dot { margin-top: 2px; }

  /* Title accent words hold still on the first synonym (no 2.7s cross-fade) */
  html.hs-flow #s1 .fc-title .cyc, html.hs-flow #s2 .fc-title .cyc,
  html.hs-flow #s3 .fc-title .cyc, html.hs-flow #s4 .fc-title .cyc { display: inline; }
  html.hs-flow #s1 .fc-title .cyc .cyc-opt, html.hs-flow #s2 .fc-title .cyc .cyc-opt,
  html.hs-flow #s3 .fc-title .cyc .cyc-opt, html.hs-flow #s4 .fc-title .cyc .cyc-opt { display: none; transition: none !important; }
  html.hs-flow #s1 .fc-title .cyc .cyc-opt:first-child, html.hs-flow #s2 .fc-title .cyc .cyc-opt:first-child,
  html.hs-flow #s3 .fc-title .cyc .cyc-opt:first-child, html.hs-flow #s4 .fc-title .cyc .cyc-opt:first-child {
    display: inline; opacity: 1; visibility: visible;
  }

  /* Stills in place of the desktop windows */
  html.hs-flow #s2 .m-widget, html.hs-flow #s3 .m-widget,
  html.hs-flow #s4 .m-widget { display: flex; justify-content: center; width: 100%; }
  html.hs-flow #s1 .fc-right .app-win, html.hs-flow #s1 .fc-right .win-stage,
  html.hs-flow #s2 .fc-right .app-win, html.hs-flow #s2 .fc-right .win-stage,
  html.hs-flow #s3 .fc-right .app-win, html.hs-flow #s3 .fc-right .win-stage,
  html.hs-flow #s4 .fc-right .app-win, html.hs-flow #s4 .fc-right .win-stage,
  html.hs-flow #s1 .chips-layer, html.hs-flow #s2 .chips-layer,
  html.hs-flow #s3 .chips-layer, html.hs-flow #s4 .chips-layer { display: none; }

  /* r3 O2: s1 Post Jobs: the dashboard cropped to the one thing it proves, two posted
     jobs and their resume counts. .mw-body children: 1 stats strip, 2 section header,
     3-5 job rows (Sr. UX Designer, Ops Coordinator, Growth Lead); rows 3-4 stay. */
  html.hs-flow #s1 .m-widget { display: flex; justify-content: center; width: 100%; }
  html.hs-flow #s1 .mw-chrome, html.hs-flow #s1 .mw-stats-strip,
  html.hs-flow #s1 .mw-section-hdr, html.hs-flow #s1 .mw-job-row:nth-child(n+5) { display: none; }
  html.hs-flow #s1 .mw-body { padding: 12px; }
  html.hs-flow #s1 .mw-job-row { gap: 12px; padding: 10px 12px; margin-bottom: 8px; }
  html.hs-flow #s1 .mw-job-row:nth-child(4) { margin-bottom: 0; }
  html.hs-flow #s1 .mw-avatar { width: 36px; height: 36px; font-size: 15px; }
  html.hs-flow #s1 .mw-job-name { font-size: 16px; line-height: 1.3; }
  html.hs-flow #s1 .mw-job-meta { font-size: 14px; line-height: 1.35; margin-top: 2px; }
  html.hs-flow #s1 .mw-progress-track { height: 4px; margin-top: 8px; }
  html.hs-flow #s1 .mw-progress-bar { transition: none; transform: scaleX(var(--pg)); }
  html.hs-flow #s1 .mw-badge { font-family: 'Space Mono','Space Mono Fallback', monospace; font-size: 13px; letter-spacing: .06em; padding: 4px 9px; border-radius: 6px; }
  html.hs-flow #s1 .fc-step, html.hs-flow #s2 .fc-step,
  html.hs-flow #s3 .fc-step, html.hs-flow #s4 .fc-step { font-size: 12px; }

  /* s2 Scoring criteria: the weight rows only, as a still */
  html.hs-flow #s2 .mw-chrome, html.hs-flow #s2 .mw-preset-bar,
  html.hs-flow #s2 .mw-tabs, html.hs-flow #s2 .mw-title { display: none; }
  html.hs-flow #s2 .mw-body { padding: 18px 16px 20px; }
  html.hs-flow #s2 .mw-bar-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 8px;
    align-items: baseline; margin-bottom: 16px;
  }
  html.hs-flow #s2 .mw-bar-row:last-child { margin-bottom: 0; }
  html.hs-flow #s2 .mw-bar-label {
    grid-column: 1; grid-row: 1; width: auto;
    flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 8px;
    font-size: 15px; line-height: 1.3;
  }
  html.hs-flow #s2 .mw-bar-label > span + span { font-size: 14px !important; padding: 1px 8px !important; border-radius: 10px !important; }
  html.hs-flow #s2 .mw-bar-val {
    grid-column: 2; grid-row: 1; width: auto;
    font-family: 'Space Grotesk','Space Grotesk Fallback', sans-serif; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums;
  }
  html.hs-flow #s2 .mw-bar-track { grid-column: 1 / -1; grid-row: 2; height: 8px; border-radius: 4px; }
  html.hs-flow #s2 .mw-bar-fill { transition: none; transform: scaleX(calc(var(--w) * 2)); }

  /* s3 AI scoring: the top three ranked rows, as a still */
  html.hs-flow #s3 .mw-chrome, html.hs-flow #s3 .mw-section-hdr,
  html.hs-flow #s3 .mw-cand-meta, html.hs-flow #s3 .mw-cand-tags { display: none; }
  html.hs-flow #s3 .mw-body { padding: 12px; }
  html.hs-flow #s3 .mw-cand-row { gap: 12px; padding: 10px 12px; margin-bottom: 8px; }
  html.hs-flow #s3 .mw-cand-row:last-child { margin-bottom: 0; }
  html.hs-flow #s3 .mw-rank { font-size: 14px; width: 24px; }
  html.hs-flow #s3 .mw-cand-row svg { width: 48px; height: 48px; }
  html.hs-flow #s3 .mw-cand-row svg text { font-size: 14px; transform: translateY(1px); }
  html.hs-flow #s3 .mw-cand-name { font-size: 16px; line-height: 1.3; }
  html.hs-flow #s3 .mw-grade { font-size: 14px; padding: 4px 9px; border-radius: 6px; }
  html.hs-flow #s3 .mw-ring { transition: none !important; stroke-dashoffset: var(--off); }
  html.hs-flow #s3 .mw-cand-row .mw-grade { transition: none !important; opacity: 1; }

  /* ---------- HOME-O4 (r3 O4) · s4 insights: the "Your bar" chart cropped to the
     first nine of fourteen rows (the eight who clear 64, then the first below it),
     with "Your bar decides 4" as its caption and the flag note under it ---------- */
  html.hs-flow #s4 .s4x.s4x-mw {
    --x-rh: 22px; --x-gut: 12px;
    width: calc(100% - 32px); max-width: 480px; margin: 0 16px;
    font-size: 16px;
  }
  html.hs-flow #s4 .s4x.s4x-mw .mw-chrome,
  html.hs-flow #s4 .s4x.s4x-mw .s4x-tabs,
  html.hs-flow #s4 .s4x.s4x-mw .s4x-h,
  html.hs-flow #s4 .s4x.s4x-mw .s4x-sec + .s4x-sec { display: none; }
  html.hs-flow #s4 .s4x.s4x-mw .s4x-sec:first-child { visibility: visible; opacity: 1; }
  html.hs-flow #s4 .s4x.s4x-mw .s4x-body { padding: 4px 16px 12px; }

  /* The crop. .s4x-fig children 14-27 are the fourteen rows; 23-27 (rows 10-14) go,
     and their grid rows collapse to 0 so the "Your bar" label row still closes the rail. */
  html.hs-flow #s4 .s4x.s4x-mw .s4x-fig {
    margin-top: 12px;
    grid-template-columns: 22px minmax(0, 1fr) 28px 14px minmax(0, 1.1fr) var(--x-gut) 0;
    grid-template-rows: 20px 22px repeat(9, var(--x-rh)) repeat(5, 0px) 20px;
  }
  html.hs-flow #s4 .s4x.s4x-mw .s4x-fig > .s4x-r:nth-child(n+23) { display: none; }
  html.hs-flow #s4 .s4x.s4x-mw .s4x-fig > .s4x-r:nth-child(22) > * { opacity: .5; }
  html.hs-flow #s4 .s4x.s4x-mw .s4x-nm,
  html.hs-flow #s4 .s4x.s4x-mw .s4x-sc,
  html.hs-flow #s4 .s4x.s4x-mw .s4x-rk { font-size: 14px; }
  html.hs-flow #s4 .s4x.s4x-mw .s4x-hd,
  html.hs-flow #s4 .s4x.s4x-mw .s4x-cap { font-size: 14px; line-height: 18px; }
  html.hs-flow #s4 .s4x.s4x-mw .s4x-ct,
  html.hs-flow #s4 .s4x.s4x-mw .s4x-live { font-size: 14px; height: 20px; line-height: 20px; }
  html.hs-flow #s4 .s4x.s4x-mw .s4x-od,
  html.hs-flow #s4 .s4x.s4x-mw .s4x-od > span { height: 20px; }
  html.hs-flow #s4 .s4x.s4x-mw .s4x-ticks span { font-size: 13px; }
  html.hs-flow #s4 .s4x.s4x-mw .s4x-yb { font-family: 'Space Mono','Space Mono Fallback', monospace; font-size: 13px; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; }
  html.hs-flow #s4 .s4x.s4x-mw .s4x-rule { bottom: 16px; }
  html.hs-flow #s4 .s4x.s4x-mw .s4x-dot { width: 8px; height: 8px; transition: none; }
  html.hs-flow #s4 .s4x.s4x-mw .s4x-ct:not(.is-cov) { opacity: 1; }

  /* Notes: "Your bar decides 4" sits directly under the chart as its caption */
  html.hs-flow #s4 .s4x.s4x-mw .s4x-notes { display: flex; flex-direction: column; align-items: stretch; margin-top: 12px; }
  html.hs-flow #s4 .s4x.s4x-mw .s4x-notes > .s4x-note:nth-child(2) { order: -1; }
  html.hs-flow #s4 .s4x.s4x-mw .s4x-note { padding: 12px 0 14px; }
  html.hs-flow #s4 .s4x.s4x-mw .s4x-note:last-child { border-bottom: 0; padding-bottom: 4px; }
  html.hs-flow #s4 .s4x.s4x-mw .s4x-note > b { font-size: 16px; line-height: 1.35; }
  html.hs-flow #s4 .s4x.s4x-mw .s4x-note > span { font-size: 14px; line-height: 1.45; margin-top: 4px; }
  html.hs-flow #s4 .s4x.s4x-mw .s4x-note--a > span { margin-top: 6px; padding-left: 10px; }
  html.hs-flow #s4 .s4x.s4x-mw .s4x-note--a > .s4x-set { margin-top: 6px; padding-left: 0; }

  /* ---------- HOME-O5 · motion off for s1-s4 ---------- */
  html.hs-flow #s1 .mm-reveal, html.hs-flow #s1 .mm-reveal em,
  html.hs-flow #s2 .mm-reveal, html.hs-flow #s2 .mm-reveal em,
  html.hs-flow #s3 .mm-reveal, html.hs-flow #s3 .mm-reveal em,
  html.hs-flow #s4 .mm-reveal, html.hs-flow #s4 .mm-reveal em { background-position: 0% 0 !important; animation: none !important; }
  html.hs-flow #s1 .m-widget *, html.hs-flow #s2 .m-widget *,
  html.hs-flow #s3 .m-widget *, html.hs-flow #s4 .m-widget *,
  html.hs-flow #s4 .m-widget *::after { transition: none !important; animation: none !important; }

  /* ---------- r2 · vertical edge marks are deck furniture; in flow they clip at section edges ---------- */
  html.hs-flow .vert-mark { display: none !important; }

  /* ---------- r2 · hero: one dossier, scored once. The deal cycle is paused in flow mode
     (window._hsFlowMode), so slot A is always the front card; slot B, rotated -1.5deg, would
     only peek out from under it as a dark slab. ---------- */
  html.hs-flow #s0 .ed-flip-slot--b { visibility: hidden; }
  html.hs-flow #s0 .ed-flip-slot.ed-in,
  html.hs-flow #s0 .ed-flip-slot.ed-out { animation: none !important; }

  /* Dossier type in flow mode (phones and tablets): eyebrows 13px, role 15px, values 14px+,
     name unchanged. Was phone-only; tablets showed 9-11.5px. */
  html.hs-flow #s0 .ed-dossier-role { font-size: 15px; line-height: 1.35; white-space: normal; overflow: visible; text-overflow: clip; }
  html.hs-flow #s0 .ed-dossier-ex { font-size: 15px; }
  html.hs-flow #s0 .ed-ex-eye { font-size: 13px; letter-spacing: .1em; }
  html.hs-flow #s0 .ed-score-eye { font-size: 13px; letter-spacing: .1em; }
  html.hs-flow #s0 .ed-score-grade { font-size: 14px; letter-spacing: .04em; padding: 3px 9px; white-space: nowrap; }
  html.hs-flow #s0 .ed-criteria-eye { font-size: 13px; letter-spacing: .1em; }
  html.hs-flow #s0 .ed-criteria-n { font-size: 15px; }
  html.hs-flow #s0 .ed-foot-pill { font-size: 14px; letter-spacing: .06em; padding: 5px 12px; }
  html.hs-flow #s0 .ed-foot-stamp { font-size: 14px; letter-spacing: .08em; }

  /* r3 O6 · tablet dossier: the meta row and tags go (as on phones); what stays is
     readable. On phones .ed-why and the legend are already hidden by the inline sheet. */
  html.hs-flow #s0 .ed-dossier-meta-row,
  html.hs-flow #s0 .ed-tags { display: none; }
  html.hs-flow #s0 .ed-dossier-legend span { font-size: 14px; }
  html.hs-flow #s0 .ed-dossier-legend em { font-size: 14px; }
  html.hs-flow #s0 .ed-why-eye { font-size: 13px; letter-spacing: .12em; }
  html.hs-flow #s0 .ed-why-meta { font-size: 14px; }
  /* the 9px "Scroll" cue is deck furniture; flow pages scroll natively */
  html.hs-flow #s0 .hero-hint { display: none; }
  html.hs-flow #s0 .ed-why-list li { font-size: 14px; line-height: 1.45; }
  html.hs-flow #s0 .ed-tab-mono { font-size: 13px; letter-spacing: .14em; }

  /* r3 O1 · JOB 248 tally: one quiet static line under the card on phones and
     flow tablets (was an absolute pill that covered the role line at 768/1024).
     Every bucket reads the same; the per-card highlight is off. */
  html.hs-flow #s0 .ed-side-pill {
    position: static; inset: auto;
    display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline;
    gap: 4px 16px; width: 100%; margin: 20px auto 0; padding: 0;
    background: none; box-shadow: none; border-radius: 0; transform: none; min-width: 0;
  }
  html.hs-flow #s0 .ed-side-pill-eye,
  html.hs-flow #s0 .ed-side-pill .ed-meter { display: none; }
  html.hs-flow #s0 .ed-side-pill-line,
  html.hs-flow #s0 .ed-side-pill-line--sub {
    display: inline-flex; flex-direction: row; align-items: baseline; gap: 5px;
    margin: 0; padding: 0; text-align: left;
  }
  html.hs-flow #s0 .ed-side-pill-line::before { display: none; }
  html.hs-flow #s0 .ed-side-pill-n,
  html.hs-flow #s0 .ed-side-pill-line--sub .ed-side-pill-n,
  html.hs-flow #s0 .ed-side-pill-line.is-hit .ed-side-pill-n {
    font-size: 16px; min-width: 0; color: var(--on); transition: none;
  }
  html.hs-flow #s0 .ed-side-pill-line em,
  html.hs-flow #s0 .ed-side-pill-line.is-hit em { font-size: 14px; color: var(--on-2); transition: none; }

  /* r4 · the CTA row under s1-s4: main's pills keep their padding and look; one row
     where both fit, else they wrap with a 10px gap. Each pill is a 44px target with
     16px / 14px type; a long label wraps inside its pill instead of overflowing. */
  html.hs-flow .fc-cta { align-items: center; gap: 10px; margin-top: 12px; }
  html.hs-flow .fc-desc + .fc-cta { margin-top: 0; }
  html.hs-flow .fc-cta-main,
  html.hs-flow a.fc-cta-aside { min-height: 44px; max-width: 100%; justify-content: center; text-align: center; }
  html.hs-flow .fc-cta-main { font-size: 16px; }
  html.hs-flow .fc-cta-aside { font-size: 14px; letter-spacing: .02em; }
  /* an aside that is a note, not a link, stays plain text with no target height */
  html.hs-flow span.fc-cta-aside { padding-bottom: 8px; }

  /* r4 O-F · the translucent background patches read as render glitches in flow mode
     (phones and tablets alike); one rule for every section */
  html.hs-flow .bg-patches { display: none !important; }
}

/* =====================================================================
   HOME-O6 · flow-mode tablets (768-1279): s2/s3 as two-column rows
   (copy left, still right); s1/s4 as one column.
   ===================================================================== */
@media (min-width: 768px) and (max-width: 1279px) {
  html.hs-flow #s1 .feat-slide, html.hs-flow #s2 .feat-slide,
  html.hs-flow #s3 .feat-slide, html.hs-flow #s4 .feat-slide {
    max-width: 960px; margin: 0 auto; padding: 16px 40px 8px; gap: 48px;
  }
  html.hs-flow #s2 .feat-slide, html.hs-flow #s3 .feat-slide { flex-direction: row; align-items: center; }
  html.hs-flow #s2 .fc-copy, html.hs-flow #s3 .fc-copy { flex: 1 1 0; width: auto; min-width: 0; }
  html.hs-flow #s2 .fc-right, html.hs-flow #s3 .fc-right {
    flex: 1 1 0; min-width: 0; padding-left: 0; align-items: stretch;
  }
  html.hs-flow #s2 .fc-desc, html.hs-flow #s3 .fc-desc { max-width: none; }

  /* s1 (r3 O2): copy and bullets left, the cropped job list right, like s2/s3 */
  html.hs-flow #s1 .feat-slide { flex-direction: row; align-items: center; }
  html.hs-flow #s1 .fc-copy { flex: 1 1 0; width: auto; min-width: 0; }
  html.hs-flow #s1 .fc-desc { max-width: none; }
  html.hs-flow #s1 .fc-right { flex: 1 1 0; min-width: 0; padding-left: 0; align-items: stretch; }
  html.hs-flow #s1 .m-widget-inner { width: 100%; }

  /* s4: copy left, the cropped chart and its notes right. The card is ~430px tall, so
     the copy starts at its top edge (r4 O-D) instead of floating mid-card */
  html.hs-flow #s4 .feat-slide { flex-direction: row; align-items: flex-start; }
  html.hs-flow #s4 .fc-copy { flex: 1 1 0; width: auto; min-width: 0; padding-top: 12px; }
  html.hs-flow #s4 .fc-desc { max-width: none; }
  html.hs-flow #s4 .fc-right { flex: 1 1 0; min-width: 0; padding-left: 0; align-items: stretch; }
  html.hs-flow #s4 .s4x.s4x-mw { width: 100%; max-width: none; margin: 0; }

  html.hs-flow #s2 .m-widget-inner, html.hs-flow #s3 .m-widget-inner { width: 100%; }

  /* Hero step row on one line in the 1024 two-column hero (it wrapped "03" under "01") */
  html.hs-flow #s0 .hero-steps { flex-wrap: nowrap; }
  html.hs-flow #s0 .hero-steps li + li::before { width: 16px; margin: 0 4px; }
  html.hs-flow #s0 .hero-steps button { letter-spacing: .1em; white-space: nowrap; }
  /* r3 O7 / r4 O-E · the step row is three buttons, not an eyebrow: 16px, 44px tall, 768-1279 */
  html.hs-flow #s0 .hero-steps button { font-size: 16px; letter-spacing: .04em; min-height: 44px; }

  /* r3 O1 on tablets: the stage is a fixed-height flex box that scales the card to fit,
     so the tally hangs under it (out of flow) instead of joining the flex row */
  html.hs-flow #s0 .ed-side-pill { position: absolute; top: 100%; left: -40px; right: -40px; width: auto; margin: 20px 0 0; }
  html.hs-flow #s0 .ed-stage { margin-bottom: 44px; }
}
/* 768-980 one-column flow hero: give the stage the card's natural size (460 x 563 +
   the tab) so the fit script settles at scale 1 and the 13-15px type reads at its size,
   instead of 0.79 (11px on screen). Tablets are not height-gated. */
@media (min-width: 768px) and (max-width: 980px) {
  html.hs-flow #s0 .ed-stage { max-width: 470px; height: 600px; }
  html.hs-flow #s0 .ed-flip-stage { width: 100%; }
  /* s3's link is the longest of the four; in the 320px copy column at 768 its 22px side
     padding pushed "free" to a second line. 16px keeps it on one line, still 44px tall. */
  html.hs-flow #s3 .fc-cta-main { padding-inline: 16px; }
}
/* 981-1279 two-column flow hero (touch tablets in landscape): the step row must not
   set the left column's min-content width (it pushed the card column to 296px and the
   card down to 0.58 scale). Equal columns; the steps are the ordered list they are,
   one 44px button per line, with no connector rules (r4 O-E: no orphaned "03"). */
@media (min-width: 981px) and (max-width: 1279px) {
  html.hs-flow #s0 .hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  html.hs-flow #s0 .hero-steps { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; row-gap: 0; }
  html.hs-flow #s0 .hero-steps li + li::before { display: none; }
  html.hs-flow #s0 .hero-steps button { padding-left: 0; }
}

/* =====================================================================
   Phones only (<768).
   ===================================================================== */
@media (max-width: 767px) {

  /* ---------- HOME-O2 · s0 hero ---------- */
  #s0.m-flow, #s0 { padding-top: 80px; }  /* clear the 56px phone nav */
  #s0 .hero-sub { font-size: 16px; line-height: 1.6; }
  #s0 .hero-acts .btn-p,
  #s0 .hero-acts .btn-ghost { font-size: 16px; min-height: 48px; }
  #s0 .hero-acts { margin-bottom: 0; }
  /* r3 O5 · hero 1013 -> ~960: four headline lines at 40px, tighter kicker, 20px less air
     above the card than r2's 36px (the dossier tab, 14px above the card, still clears) */
  #s0 .hero-kicker { margin-bottom: 8px; }
  #s0 .hero-h1 { font-size: 40px; line-height: 1.08; }
  #s0 .hero-right { margin-top: 16px; }

  /* One dossier on screen. Both slots stay stacked in one grid cell (the cycle
     script needs the hidden one), but nothing slides: a swap is an instant
     z-index change, not a deal. */
  #s0 .ed-flip-slot.ed-in,
  #s0 .ed-flip-slot.ed-out { animation: none !important; }

  /* PERF-4 reserve, re-measured for the larger phone type below (dossier 381px) */
  #s0 .ed-flip-stage { min-height: 372px; }

  /* Dossier type sizes: see the html.hs-flow #s0 block above (phones and tablets).
     The tab eyebrow grows on phones only; on the tablet card it would clip the date. */
  #s0 .ed-tab-mono { font-size: 13px; letter-spacing: .14em; }

  /* JOB 248 tally line: see the html.hs-flow #s0 block above (r3 O1). On phones it
     borrows the card's 12px side air so the three counts fit one line from 390 up. */
  html.hs-flow #s0 .ed-side-pill { gap: 4px 10px; width: calc(100% + 24px); margin: 16px -12px 0; }

  /* ---------- HOME-O3 · phones ---------- */
  #s1 .fc-step, #s2 .fc-step, #s3 .fc-step, #s4 .fc-step { font-size: 12px; }

  html.hs-flow #s1 .m-widget-inner,
  html.hs-flow #s2 .m-widget-inner, html.hs-flow #s3 .m-widget-inner { margin: 0 16px; width: calc(100% - 32px); }

  /* ---------- HOME-O5 · hero motion off ---------- */
  #s0 .mm-reveal, #s0 .mm-reveal em { background-position: 0% 0 !important; animation: none !important; }

  /* ---------- r2 · one alignment axis below the hero: s1-s4 copy reads left,
     like the s4 notes, s5 reasons and s7 rows that follow ---------- */
  #s1 .fc-copy, #s2 .fc-copy, #s3 .fc-copy, #s4 .fc-copy { text-align: left; }
  #s1 .fc-step, #s1 .fc-title, #s2 .fc-step, #s2 .fc-title,
  #s3 .fc-step, #s3 .fc-title, #s4 .fc-step, #s4 .fc-title { text-align: left; }
  #s1 .fc-desc, #s2 .fc-desc, #s3 .fc-desc, #s4 .fc-desc { text-align: left !important; }
  #s1 .fc-bullets, #s2 .fc-bullets, #s3 .fc-bullets { align-self: flex-start; }
  /* r3 O8 · with a still in every section the air comes down (was 40/24) */
  #s1 .feat-slide, #s2 .feat-slide, #s3 .feat-slide, #s4 .feat-slide { padding-top: 32px; padding-bottom: 16px; }

  /* ---------- phone height: s3 tighter rows. s2 keeps all five weight rows (r4 O-B:
     four of them summed to 90%, which contradicts "You set the bar") ---------- */
  html.hs-flow #s3 .mw-cand-row { padding: 8px 12px; }
  html.hs-flow #s3 .mw-cand-row svg { width: 44px; height: 44px; }
  /* s1 on phones: the Done / Live badge already says how far each job got */
  html.hs-flow #s1 .mw-progress-track { display: none; }

  /* r3 O4 / r4 O-C · s4 on phones: notes 2 and 3 show their bold line only (note 3,
     "Lower it to 54: 4 more", explains the counts row over the ticks); note 3 closes the
     list, so the :last-child rule above drops its rule line */
  html.hs-flow #s4 .s4x.s4x-mw .s4x-notes > .s4x-note:nth-child(2) > span,
  html.hs-flow #s4 .s4x.s4x-mw .s4x-notes > .s4x-note:nth-child(3) > span { display: none; }

  /* the link row sits on the copy's left axis (the inline phone sheet centres it) */
  html.hs-flow .fc-cta { justify-content: flex-start; }
}