/* assets/rn/pages/home-hero.css — the home hero with "The Audit" as its centrepiece (hero-centrepiece).
   Linked last on index.html only. Unlayered, so it beats the legacy layer (lux.css) at any specificity. Every rule is
   scoped to the hero (.lux-hero; most still carry the older .lux-home prefix, recorded as stylelint debt, and a rule
   brought under the 0,2,0 cap drops it), except section 9's first-screen dock rules.

   The stage is an in-flow window (ran-morph flow layout, data-layout="flow"): the page sizes the host, ran-morph.css
   frames it (ink-soft, 1px ring, 20px radius, the 88px grid) and the script fills it and places the pause toggle:
   inside the frame, 12px from its top-right corner, or under the frame at the right end of the caption row, where the
   animation never runs under it: on every phone in portrait (section 9: the frame gets ran-morph's fill composition,
   whose cards reach the frame's corners), and elsewhere in frames 350px wide or narrower and in short frames (under
   about 361px tall). The figure is a two-column grid for that row.

     ≥ 1024px              split: copy ~40% beside a tall stage ~57%, the proof strip full width under both.
     781-1023px            stacked: copy, then the stage full width, then the proof.
     ≤ 780px               eyebrow and H1, then the stage straight under the H1 (large, above the fold and clear of the
                           dock), then the lede, the CTAs and the proof.
     ≤ 472px, portrait     phones (9): the same order, the frame sized to the first screen (4:5 at the most, 0.8 of its
                           width at the least, so ran-morph composes it for the phone), its caption row above the fold
                           wherever the screen allows, and the dock tucked away on the first screen (home.js 3).
     landscape phones      split, beside the copy (8).

   The figure follows the H1 in the markup, so reading and focus order match the phone layout (the pause toggle comes
   before the lede and CTAs, as it sits above them) and the desktop one (the toggle, in the window's top-right corner,
   sits above the copy's CTAs). Stacked tablets put the stage back after the CTAs with order (see 6).

   FROZEN: the real "Brief an audit" button (.lux-hero-copy .lux-button). The stage's pill copies its width, size,
   weight, gap and padding (base.css 5), so nothing here touches the button itself.
   Sizes use svh/px, never dvh: every stage size change rebuilds and re-samples the loop (about 1s of idle time). */

/* 1. The section ───────────────────────────────────────────────────────────────────────────────────────────────── */
.lux-home .lux-hero {
  height: auto;
  min-height: 0;
  max-height: none;
}

.lux-home .lux-hero .lux-hero-content {
  height: auto;
  padding-top: calc(var(--rn-header-top) + var(--rn-header-h) + 16px);
  padding-bottom: 40px;
}

.lux-home .lux-hero .lux-hero-copy {
  position: relative;
  top: auto;
  left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: auto;
  max-width: none;
  transform: none;
}

/* 2. Copy ──────────────────────────────────────────────────────────────────────────────────────────────────────
   Eyebrow as every rn-eyebrow: Plex Mono 11px in the muted colour after a 6px dot in the text colour (audit family:
   no red, no glow). The one red mark in the copy is the H1's emphasis, as before. */
.lux-home .lux-hero .lux-eyebrow {
  align-items: flex-start;
  gap: 10px;
  color: var(--rn-muted-on-ink);
  font: 500 var(--rn-fs-label)/1.4 var(--rn-font-mono);
  letter-spacing: var(--rn-track-label);
}

.lux-home .lux-hero .lux-eyebrow > span {
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  margin-top: calc(0.7em - 3px); /* centred on the first line when the eyebrow wraps */
  background: var(--rn-text-on-ink);
  box-shadow: none;
}

/* The H1's size below 781px, held once: the H1 reads it, and section 9 computes the phone frame's top from it, so the
   two never drift apart. (The Japanese H1 sets its own size in ja.css 5, and section 9 its phone value.) */
.lux-hero:not(:lang(ja)) {
  --hh-fs: clamp(2.5rem, 11.4vw, 3.2rem);
}

.lux-hero-copy h1 {
  max-width: var(--hh-h1-max, none); /* three lines on phones in portrait (9) */
  margin: 12px 0 16px;
  font-size: var(--hh-fs);
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.lux-home .lux-hero .lux-hero-lede {
  max-width: 34rem;
  color: rgba(241, 242, 239, 0.78);
  font-size: var(--rn-fs-body);
  line-height: 1.6;
  text-wrap: pretty;
}

.lux-home .lux-hero .lux-actions {
  flex-wrap: wrap;
  gap: 14px 24px;
  margin-top: calc(24px + var(--hh-cta-push, 0px)); /* phones in portrait: never across the fold (9) */
}

/* 3. The stage ─────────────────────────────────────────────────────────────────────────────────────────────────
   The figure is the window; the caption names it as an example. Its height is the only size the page sets. The figure
   is a grid: the window across the top, then the caption row (the caption, and the pause toggle at its right end when
   the script moves it out of the frame). */
.lux-home .lux-hero .lux-hero-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: start;
  align-items: center;
  gap: 12px;
  align-self: stretch;
  min-width: 0;
  margin: 0;
}

.lux-home .lux-hero .ran-morph {
  grid-column: 1 / -1;
  width: 100%;
}

.lux-home .lux-hero .ran-morph-caption {
  grid-column: 1;
  margin: 0 2px;
  color: rgba(241, 242, 239, 0.56);
  font-size: var(--rn-fs-label);
  letter-spacing: var(--rn-track-label);
}

.lux-home .lux-hero .lux-hero-stage > .ran-morph-toggle {
  grid-area: 2 / 2;
  margin: 0;
}

/* The window paints with the page (ring, fill, the 88px grid, the caption), keyed on the <head> JS flag, so a slow phone
   never shows a blank reserved box while the deferred hero script loads. The script finds the frame already painted
   and only fades the stage in, showing the loop's first frame as soon as it is built. */
html.js .lux-home .lux-hero .ran-morph[data-layout="flow"] {
  border-color: var(--rn-ring);
  background: var(--rn-ink-soft);
}

html.js .lux-home .lux-hero .ran-morph[data-layout="flow"]::before {
  content: "";
}

html.js .lux-home .lux-hero .ran-morph-caption {
  visibility: visible;
}

/* On touch screens the window is a picture, not a link. With no pointer to show it is one, a tap meant to look closer
   (or to stop it: on phones the pause toggle sits under the window) opened the brief. The real CTA follows the lede.
   Where a pointer can hover, the whole window still opens the brief, as the pill inside it invites. */
@media (hover: none) {
  .lux-hero .rm-stage {
    pointer-events: none;
  }
}

/* Without JavaScript, or when ran-morph.min.js fails to load (home.js listens for its error event), there is no
   window: the figure goes instead of leaving a blank box, and the copy takes the full width. */
html:not(.js) .lux-home .lux-hero .lux-hero-stage,
html.ran-morph-failed .lux-home .lux-hero .lux-hero-stage {
  display: none;
}

/* 4. Proof ─────────────────────────────────────────────────────────────────────────────────────────────────────
   An open, ruled row under the hero (the window is the one framed object): a hairline on top, 1px dividers, the
   figure in Bricolage 700 above a Plex Mono label. Then the privacy note, ruled in the line colour (red is for
   findings). Two across on phones. */
.lux-home .lux-hero .lux-proof {
  position: static;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  max-width: none;
  margin-top: 32px;
  border: 0;
  border-top: 1px solid var(--rn-line-on-ink);
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.lux-home .lux-hero .lux-proof div {
  padding: 18px 20px 4px;
  border: 0;
  border-left: 1px solid var(--rn-line-on-ink);
}

.lux-home .lux-hero .lux-proof div:first-child {
  padding-left: 0;
  border-left: 0;
}

.lux-home .lux-hero .lux-proof strong {
  margin-bottom: 8px;
  color: var(--rn-text-on-ink);
  font: 700 clamp(1.45rem, 1.2rem + 0.7vw, 1.9rem)/1 var(--rn-font-display);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.lux-home .lux-hero .lux-proof span {
  color: var(--rn-muted-on-ink);
  font: 500 var(--rn-fs-label)/1.35 var(--rn-font-mono);
  letter-spacing: var(--rn-track-label);
  text-transform: uppercase;
}

.lux-home .lux-hero .home-audit-privacy {
  position: static;
  width: auto;
  max-width: 44rem;
  margin: 18px 0 0;
  padding-left: 12px;
  border-left: 1px solid var(--rn-ring);
  color: rgba(241, 242, 239, 0.64);
  font-size: 0.75rem;
  line-height: 1.5;
}

/* 5. Phones (≤ 780px): the stage straight under the H1 ──────────────────────────────────────────────────────────
   Markup order (eyebrow, H1, stage, lede, CTAs) is the visual order. The frame starts 259-271px down (header 76,
   eyebrow, H1). Under it the caption row always keeps 44px for the pause toggle (8px gap, 44px row: 52px), since
   the script moves the toggle there on most phones once playback starts, and the row must not grow then. The fixed
   dock takes the bottom 64px plus max(12px, safe area), so a cap of 100svh - 402px - that gap keeps the row at least
   12px above the dock; on short phones the frame shrinks (160px at the least; the piece's strip framing starts under
   150px) rather than go under it. Taller phones get 54svh. */
@media (max-width: 780px) {
  .lux-home .lux-hero .lux-hero-stage {
    grid-template-rows: auto minmax(44px, auto);
    row-gap: 8px;
    margin-bottom: 20px;
  }

  .lux-hero .ran-morph {
    height: var(--hh-frame, clamp(160px, min(54svh, 100svh - 402px - max(12px, env(safe-area-inset-bottom))), 480px));
  }

  .lux-home .lux-hero .lux-proof {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 32px;
  }

  .lux-home .lux-hero .lux-proof div:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }

  .lux-home .lux-hero .lux-proof div:nth-child(n + 3) {
    margin-top: 14px;
    border-top: 1px solid var(--rn-line-on-ink);
  }
}

/* 6. Tablets (781-1023px): copy, then the stage full width ─────────────────────────────────────────────────────── */
@media (min-width: 781px) {
  .lux-home .lux-hero .lux-hero-content {
    padding-top: calc(var(--rn-header-top) + var(--rn-header-h) + 28px);
    padding-bottom: 48px;
  }

  .lux-home .lux-hero .lux-hero-copy h1 {
    margin: 20px 0 22px;
    font-size: clamp(3.4rem, 7.2vw, 4.8rem);
    line-height: 0.88;
  }

  .lux-home .lux-hero .lux-hero-lede {
    font-size: 1.06rem;
  }

  .lux-home .lux-hero .lux-actions {
    margin-top: 30px;
  }

  .lux-home .lux-hero .lux-hero-stage {
    margin-top: 40px;
  }

  /* min(62svh, 560px), and short of the dock: the frame starts up to 452px down (header, eyebrow, H1, lede, CTAs,
     40px), the caption takes 28px, then 12px of air above the dock (64px plus max(12px, safe area)). 400px at least. */
  .lux-home .lux-hero .ran-morph {
    height: clamp(400px, min(62svh, 100svh - 556px - max(12px, env(safe-area-inset-bottom))), 560px);
  }

  .lux-home .lux-hero .lux-proof {
    margin-top: 36px;
  }
}

/* Stacked tablets: the stage after the CTAs, as TOM.md sets it. The markup keeps the figure after the H1 (the phone
   order), so here the pause toggle takes focus just before the lede's CTAs, one step early but on the same screen.
   (CSS reading-flow would fix that in Chrome, but Chrome drops the visual order again as soon as anything inside the
   playing stage changes style, so it is not used.) */
@media (min-width: 781px) and (max-width: 1023px) {
  .lux-home .lux-hero .lux-hero-stage {
    order: 1;
  }
}

/* 7. Desktop (≥ 1024px): split ──────────────────────────────────────────────────────────────────────────────────
   Copy ~40% (the H1 scaled to its column: three lines), stage ~57%, tall: from 24px under the header to the proof
   strip, which with its note closes the first screen (about 67% of the height at 1440x900). The copy is centred
   against the stage. */
@media (min-width: 1024px) {
  .lux-home .lux-hero .lux-hero-content {
    container-type: inline-size;
    padding-top: calc(var(--rn-header-top) + var(--rn-header-h) + 24px);
    padding-bottom: 36px;
  }

  .lux-home .lux-hero .lux-hero-copy {
    display: grid;
    grid-template-columns: minmax(0, 40fr) minmax(0, 57fr);
    grid-template-rows: 1fr repeat(4, auto) 1fr;
    column-gap: 3%;
    align-items: start;
  }

  .lux-home .lux-hero .lux-eyebrow { grid-area: 2 / 1; }
  .lux-home .lux-hero .lux-hero-copy h1 { grid-area: 3 / 1; }
  .lux-home .lux-hero .lux-hero-lede { grid-area: 4 / 1; }
  .lux-home .lux-hero .lux-actions { grid-area: 5 / 1; }

  .lux-home .lux-hero .lux-hero-copy h1 {
    margin: 22px 0 24px;
    font-size: clamp(3.2rem, 5.3vw, 4.8rem);
    font-size: clamp(3.2rem, 6cqi, 4.8rem);
    line-height: 0.88;
  }

  .lux-home .lux-hero .lux-hero-stage {
    grid-area: 1 / 2 / 7 / 3;
    margin: 0;
  }

  .lux-home .lux-hero .ran-morph {
    height: clamp(440px, calc(100svh - 296px), 680px);
  }

  .lux-home .lux-hero .lux-proof {
    margin-top: 28px;
  }

  .lux-home .lux-hero .home-audit-privacy {
    margin-top: 14px;
  }

  /* No window (no JavaScript, or the script failed): one column. */
  html:not(.js) .lux-home .lux-hero .lux-hero-copy,
  html.ran-morph-failed .lux-home .lux-hero .lux-hero-copy {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 8. Landscape phones and short tablets (600-1023px wide, 560px tall or less): split ─────────────────────────────
   Stacked, the window would start below the fold (y 445 at 844x390) and the dock would sit on the CTA. Split as on
   desktop instead: the window beside the copy, from 16px under the header to 12px above the dock (24px above the
   bottom over 900px, where there is no dock). The copy column reads eyebrow, H1, actions, then the lede, so the CTA
   row sits above the dock at first paint (the lede, the one long block, follows on scroll; the header keeps its own
   "Brief an audit"). Copy ~40% and window ~57% from 800px, ~46% / 51% below (the CTA and its link stay on one row).
   The caption goes here: the window's own labels ("Example account", "· Example") say it is an example, and the
   caption would take 28px of a 210px frame. With no caption row, the pause toggle stays inside the frame (its
   bottom-right corner in these short frames), ink-soft with a paper ring when pressed. */
@media (min-width: 600px) and (max-width: 1023px) and (max-height: 560px) and (orientation: landscape) {
  .lux-home .lux-hero .lux-hero-content {
    --home-hero-floor: 24px;
    container-type: inline-size;
    padding-top: calc(var(--rn-header-top) + var(--rn-header-h) + 16px);
    padding-bottom: 32px;
  }

  .lux-home .lux-hero .lux-hero-copy {
    display: grid;
    grid-template-columns: minmax(0, 40fr) minmax(0, 57fr);
    grid-template-rows: repeat(4, auto) 1fr;
    column-gap: 3%;
    align-items: start;
  }

  .lux-home .lux-hero .lux-eyebrow { grid-area: 1 / 1; }
  .lux-home .lux-hero .lux-hero-copy h1 { grid-area: 2 / 1; }
  .lux-home .lux-hero .lux-actions { grid-area: 3 / 1; }
  .lux-home .lux-hero .lux-hero-lede { grid-area: 4 / 1; }

  .lux-home .lux-hero .lux-hero-copy h1 {
    margin: 10px 0 0;
    font-size: clamp(1.75rem, 4.2cqi, 2.6rem);
    line-height: 0.9;
  }

  .lux-home .lux-hero .lux-actions {
    flex-wrap: nowrap;
    gap: 18px;
    margin-top: 14px;
  }

  .lux-home .lux-hero .lux-hero-lede {
    margin-top: 20px;
    font-size: 0.95rem;
    line-height: 1.55;
  }

  .lux-home .lux-hero .lux-hero-stage {
    grid-area: 1 / 2 / 6 / 3;
    grid-template-rows: auto;
    margin: 0;
  }

  .lux-home .lux-hero .ran-morph {
    height: max(180px, calc(100svh - var(--rn-header-top) - var(--rn-header-h) - 16px - var(--home-hero-floor)));
  }

  .lux-home .lux-hero .ran-morph-caption {
    display: none;
  }

  .lux-home .lux-hero .lux-proof {
    margin-top: 28px;
  }

  html:not(.js) .lux-home .lux-hero .lux-hero-copy,
  html.ran-morph-failed .lux-home .lux-hero .lux-hero-copy {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 600px) and (max-width: 799px) and (max-height: 560px) and (orientation: landscape) {
  .lux-home .lux-hero .lux-hero-copy {
    grid-template-columns: minmax(0, 46fr) minmax(0, 51fr);
  }
}

@media (min-width: 600px) and (max-width: 900px) and (max-height: 560px) and (orientation: landscape) {
  .lux-home .lux-hero .lux-hero-content {
    --home-hero-floor: calc(var(--rn-dock-h) + var(--rn-dock-gap) + 12px);
  }
}

/* 9. Phones in portrait (≤ 472px, so the frame is ≤ 440px wide and ran-morph's fill composition runs) ─────────────
   The first screen is composed for the phone: header, eyebrow, the H1 on its three lines, then the window, sized to
   what is left of the screen above its caption row. The window is 4:5 at the most (every card at 1:1 on a full-height
   phone) and 0.8 of its width at the least (296px or more; the shortest screens, below, go to 272px), so it always
   takes ran-morph's fill composition: the paper card on an even 14px inset, a bezel inside the frame. Where the
   screen allows (every phone from 360x640 up, a 390x844 iPhone with its toolbars showing included), the caption row
   sits above the fold with 16px of air under it: 68px = the row's 8px gap, 44px row, 16px. On the shortest screens
   the row never straddles the fold: where even the floor would leave it less than 4px of air, it goes wholly under
   the fold and the frame ends 7-8px above it (320x568; 375x548, a 375x667 with its toolbars showing, where that takes
   the frame under the floor, to 274px: never under 272px or 0.76 of its width, which ran-morph still composes as
   fill).
   The frame's top is computed from the header tokens and the copy above it (--hh-above), not measured, so the height is
   final at first paint (no layout shift). The eyebrow's line count comes from its measured one-line widths (below),
   and the eyebrow reserves that many lines, so a fallback font that sets it on fewer lines moves nothing.
   The pause toggle always sits in the caption row here (ran-morph seat()).
   The CTA row follows the same rule as the caption row: never across the fold. Where the frame stops at 4:5 (tall
   phones) the lede and the CTA row come up onto the first screen, and on some (412x915, 440x956; in Japanese also
   430x932) the "Brief an audit" pill sat on the fold, a bright sliver at the screen's edge. Its top is computed like the
   frame's (--hh-cta: the frame, the caption row, the lede's measured line count, which the lede reserves as the eyebrow
   does), and where the pill would end less than 12px above the fold it starts 8px below it instead (--hh-cta-push).
   The rules that own a property read this section's values where they are written, so nothing here overrides them:
   the H1's max-width (2: --hh-h1-max), the CTA row's margin (2: --hh-cta-push), the frame's height (5: --hh-frame) and
   the Japanese H1's size (ja.css 5, which keeps to the column on the narrowest phones). The English H1's size is held
   once, in section 2 (--hh-fs).
   The dock (fixed, over the bottom 64px + gap) would sit on the window's lower half at first paint, so on these screens
   it is tucked while the page is at its top or while it would cover the figure (html.rn-dock-tuck: set by the page's
   second <head> script on every screen, since a phone reports a 980px viewport until the viewport meta is read, and
   kept by home.js 3 only where it applies). Keyboard focus in it or an open Menu brings it back at once. It never
   leaves the accessibility tree, and nothing tucks without JavaScript, when the hero failed to load, under forced
   colours (ran-morph.css hides the window, so there is nothing to clear; neither script sets the class then), in
   landscape or wider than 472px. */
.rn-top-sentinel {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 24px;
  pointer-events: none;
  visibility: hidden;
}

@media (max-width: 472px) and (orientation: portrait) {
  .lux-home .lux-hero {
    --hh-w: calc(100vw - 32px);
    --hh-lh: 0.9; /* the H1's size is --hh-fs (section 2) */
    --hh-lines: 3;
    --hh-eb-lines: 2;
    --hh-above: calc(var(--rn-header-top) + var(--rn-header-h) + 16px
                + var(--hh-eb-lines) * 1.4 * var(--rn-fs-label) + 12px
                + var(--hh-lines) * var(--hh-lh) * var(--hh-fs) + 16px);
    --hh-h1-max: 6.4em; /* always "Know what / your ads are / really doing.", the three lines --hh-above counts */
    --hh-lede-lines: 4;

    /* The frame. Where the floor (--hh-floor) leaves the caption row 4px of air or more (floor <= fit + 12px), it is
       what is left above the row and its 16px of air (--hh-fit), between the floor and 4:5 (--hh-a). Where it would
       not, the frame ends 7-8px above the fold instead, so even rounded down the row starts at the fold, never above
       it: fit + 61px (--hh-b), and never under a lower floor, 272px or 0.76 of its width (every ratio ran-morph composes
       as fill), so on the shortest screens the whole window, bezel and all, is on the first screen (375x548, a 375x667
       with its toolbars showing: 343x274). The two terms are a step: each is capped by the other plus a large multiple
       of how far past the switch-over the screen is, so one drops out and, within the switch-over's half pixel, the
       height stays between them. Section 5 sets the height from --hh-frame: rounded down to the pixel where round() is
       supported (below), unrounded before that. Declared on the section, so the CTA row can read the frame's height. */
    --hh-floor: max(296px, 0.8 * var(--hh-w));
    --hh-fit: calc(100svh - var(--hh-above) - 68px - env(safe-area-inset-bottom, 0px));
    --hh-a: clamp(var(--hh-floor), var(--hh-fit), 1.25 * var(--hh-w));
    --hh-b: max(272px, 0.76 * var(--hh-w), var(--hh-fit) + 61px);
    --hh-frame-raw: max(min(var(--hh-a), var(--hh-b) + (var(--hh-fit) + 12px - var(--hh-floor)) * 1000), min(var(--hh-b), var(--hh-a) + (var(--hh-floor) - var(--hh-fit) - 12px) * 1000));
    --hh-frame: var(--hh-frame-raw);
  }

  /* Japanese: the H1's size and leading from ja.css 5 (nine characters and tracking to the column), two lines. */
  .lux-hero:lang(ja) {
    --hh-fs: min(clamp(2.2rem, 9.9vw, 2.88rem), (100vw - 32px) / 9.2);
    --hh-lh: 1.16;
    --hh-lines: 2;
    --hh-h1-max: none;
    --hh-lede-lines: 5;
  }

  .lux-hero .lux-eyebrow {
    min-height: calc(var(--hh-eb-lines) * 1.4 * var(--rn-fs-label));
  }

  .lux-hero .lux-hero-lede {
    min-height: calc(var(--hh-lede-lines) * 1.6em);
  }

  /* The CTA row. --hh-cta is the pill's top: the frame, 8px, the 44px caption row, the stage's 20px margin, the lede,
     then the row's own 24px. It must end 12px or more above the fold or start at or under it (the pill is 46px): in
     between, the push takes it 8px under the fold, in the same one-sided step as the frame's (each term capped by a
     large multiple of how far inside the band it is, so it is 0 outside; 10000 times, so even the layout's smallest
     step, 1/64px, inside the band gives the whole push, never a part that would leave the pill on the fold). Only
     where the window is there to measure: with JavaScript and the hero loaded, and not under forced colours, where
     ran-morph.css hides it (just below). */
  :where(html.js:not(.ran-morph-failed)) .lux-hero {
    --hh-cta: calc(var(--hh-above) + var(--hh-frame) + 96px + var(--hh-lede-lines) * 1.6 * var(--rn-fs-body));
    --hh-fold: calc(100svh - env(safe-area-inset-bottom, 0px));
    --hh-cta-push: max(0px, min(var(--hh-fold) + 8px - var(--hh-cta), (var(--hh-cta) + 58px - var(--hh-fold)) * 10000, (var(--hh-fold) - var(--hh-cta)) * 10000));
  }
}

@supports (height: round(down, 1.5px, 1px)) {
  @media (max-width: 472px) and (orientation: portrait) {
    .lux-home .lux-hero {
      --hh-frame: round(down, var(--hh-frame-raw), 1px);
    }
  }
}

@media (forced-colors: active) {
  .lux-hero {
    --hh-cta-push: 0px;
  }
}

/* The eyebrow fits one line from these widths (measured at 1px steps, 320-472px). */
@media (min-width: 410px) and (max-width: 472px) and (orientation: portrait) {
  .lux-hero:not(:lang(ja)) {
    --hh-eb-lines: 1;
  }
}

@media (min-width: 367px) and (max-width: 472px) and (orientation: portrait) {
  .lux-hero:lang(ja) {
    --hh-eb-lines: 1;
  }
}

/* The lede's line count, measured the same way (web fonts; English 4 lines to 370px, then 3; Japanese, phrase breaks,
   5 to 382px, 4 to 415px, then 3). Re-measure if the lede changes (overhaul/work/hero-mobile-merge/lede-lines.mjs). */
@media (min-width: 371px) and (max-width: 472px) and (orientation: portrait) {
  .lux-hero:not(:lang(ja)) {
    --hh-lede-lines: 3;
  }
}

@media (min-width: 383px) and (max-width: 472px) and (orientation: portrait) {
  .lux-hero:lang(ja) {
    --hh-lede-lines: 4;
  }
}

@media (min-width: 416px) and (max-width: 472px) and (orientation: portrait) {
  .lux-hero:lang(ja) {
    --hh-lede-lines: 3;
  }
}

/* The tuck. The dock slides only once home.js has resolved it (html.rn-dock-live): a first paint that is already
   tucked, or a reload restored mid-page, never animates, and keyboard focus or the Menu brings it back at once (the
   slide is set only outside those two states); it slides away again when they leave. Under reduced motion or the
   site's pause it changes at once. Forced colours never get the class (the <head> script and home.js 3 check), so the
   query needs no forced-colors term, which browsers that predate the feature (Safari 15) would read as false. */
@media (max-width: 472px) and (orientation: portrait) {
  .rn-dock-tuck:where(:not(.ran-morph-failed)) .mobile-bottom-nav:where(:not(:focus-within):not(.is-more-open)) {
    translate: 0 calc(100% + var(--rn-dock-gap) + 12px);
    opacity: 0;
    pointer-events: none;
  }
}

@media (max-width: 472px) and (orientation: portrait) and (prefers-reduced-motion: no-preference) {
  .rn-dock-live:where(:not([data-motion="paused"])) .mobile-bottom-nav:where(:not(:focus-within):not(.is-more-open)) {
    transition: translate var(--rn-dur-trail) var(--rn-ease-trail), opacity var(--rn-dur-fade) var(--rn-ease-critical);
  }
}