/* 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).
     ≤ 780px, portrait     the lede and the CTA row each sit wholly above the fold or wholly below it (9).
     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) */
}

/* The second CTA is a 44px target at every width (the legacy rule made it one at 900px and under only: it was 35px
   tall on a desktop, 40px in Japanese). The target is the link's ::after, 44px tall and centred on it, so the link's
   own box stays as approved and its underline (the box's bottom border) stays 9px under the label: as a min-height
   the box grew round the centred label and the rule dropped 4px away from it. At 900px and under the box is 44px
   already and the two coincide. The row is as tall as the button beside it, so the target overlaps nothing. */
.lux-hero .lux-link {
  position: relative;
}

:where(.lux-hero) .lux-link::after {
  position: absolute;
  top: calc(50% - var(--rn-target) / 2);
  right: 0;
  left: 0;
  height: var(--rn-target);
  content: "";
}

/* 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 lede and the CTA row follow the same rule as the caption row: never across the fold. Where the frame stops at
   4:5 (tall phones) they come up onto the first screen, and on some the lede's last line sat flush on the screen's
   edge or was cut by it (English at 375x812, 384x832, 390x844, 393x852) or the "Brief an audit" pill sat on the fold, a
   bright sliver at the edge (412x915, 440x956; in Japanese also 430x932). Each one's top is computed like the frame's
   (--hh-lede: the frame, the caption row, the stage's margin; --hh-cta: the lede's measured line count after it, which
   the lede reserves as the eyebrow does). Where the lede would end less than 12px above the fold it starts 4px below
   it instead, where it sits on the shorter phones (--hh-lede-push); where the pill would, it starts 8px below
   (--hh-cta-push).
   The same two rules hold on wider portrait screens up to 780px (big phones, foldables, small tablets: the frame is
   section 5's there, the H1 on the line counts measured below). From 473px the dock no longer covers the foot of the
   first screen (the tuck, at the end of this section), and the pill showed sliced by the fold at most heights
   (540x720, 600x880, 673x841: the frame leaves 88px for a dock that is no longer there).
   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 lede's push is its own top margin, set with its reserve below (no other rule
   gives the lede one in portrait).
   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) or in
   landscape. From 473 to 900px it is tucked for the whole hero (see the tuck, at the end of this section). */
.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-h1-max: 6.4em; /* always "Know what / your ads are / really doing.", the three lines --hh-above counts */
    --hh-lede-lines: 3;

    /* 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 rows under the frame can read its
       height (--hh-above, the frame's top, is set with them, below). */
    --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: 4;
  }
}

@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);
    }
  }
}

/* Wider portrait screens up to 780px: the copy above the frame on its measured lines (at 1px steps, web fonts: the
   eyebrow on one; the English H1 on three to 501px, then two; the Japanese H1 on two, one from 736px; the lede on two
   in both), and the frame's height as section 5 sets it there, restated for the rows under it (--hh-flow: keep the two
   in step; cta-fold.mjs fails if they drift). */
@media (min-width: 473px) and (max-width: 780px) and (orientation: portrait) {
  .lux-home .lux-hero {
    --hh-lh: 0.9;
    --hh-lines: 2;
    --hh-eb-lines: 1;
    --hh-lede-lines: 2;
    --hh-flow: clamp(160px, min(54svh, 100svh - 402px - max(12px, env(safe-area-inset-bottom))), 480px);
  }

  .lux-hero:lang(ja) {
    --hh-fs: clamp(2.2rem, 9.9vw, 2.88rem); /* ja.css 5's size, held here for --hh-above */
    --hh-lh: 1.16;
  }
}

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

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

/* The rows under the frame, on every portrait screen up to 780px. --hh-above is the frame's top: the header, the
   eyebrow and the H1 on their line counts. --hh-lede is the lede's top: the frame, 8px, the 44px caption row, the
   stage's 20px margin. --hh-cta is the pill's top: the lede (and its push), then the row's own 24px. Each must end
   12px or more above the fold or start at or under it (the pill is --rn-btn-h tall: 46px to 640px wide, 52px above).
   In between, the push takes the lede 4px under the fold and the pill 8px under it, in the same one-sided step as
   the frame's: each term is 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 row on the fold). A pushed lede takes the CTA row down with it, so the pill's own push is then 0. 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). */
@media (max-width: 780px) and (orientation: portrait) {
  .lux-home .lux-hero {
    --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);
  }

  .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);
    margin-top: var(--hh-lede-push, 0px);
  }

  :where(html.js:not(.ran-morph-failed)) .lux-hero {
    --hh-fold: calc(100svh - env(safe-area-inset-bottom, 0px));
    --hh-lede-h: calc(var(--hh-lede-lines) * 1.6 * var(--rn-fs-body));
    --hh-lede: calc(var(--hh-above) + var(--hh-frame, var(--hh-flow)) + 72px);
    --hh-lede-push: max(0px, min(var(--hh-fold) + 4px - var(--hh-lede), (var(--hh-lede) + var(--hh-lede-h) + 12px - var(--hh-fold)) * 10000, (var(--hh-fold) - var(--hh-lede)) * 10000));
    --hh-cta: calc(var(--hh-lede) + var(--hh-lede-push) + var(--hh-lede-h) + 24px);
    --hh-cta-push: max(0px, min(var(--hh-fold) + 8px - var(--hh-cta), (var(--hh-cta) + var(--rn-btn-h) + 12px - var(--hh-fold)) * 10000, (var(--hh-fold) - var(--hh-cta)) * 10000));
  }
}

@media (forced-colors: active) {
  .lux-hero {
    --hh-lede-push: 0px;
    --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 3 lines to 371px, then 2; Japanese, phrase breaks,
   4 to 382px, 3 to 447px, then 2). Re-measure if the lede changes (overhaul/work/hero-mobile-merge/lede-lines.mjs). */
@media (min-width: 372px) and (max-width: 472px) and (orientation: portrait) {
  .lux-hero:not(:lang(ja)) {
    --hh-lede-lines: 2;
  }
}

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

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

/* 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.
   It applies wherever the dock shows in portrait (900px and narrower), not only on phones: on big phones and tablets
   the first screen ends on the lede, the CTA row or the proof strip, and the dock sat on them (the figures' labels
   and the privacy line at 820x1180). There home.js 3 keeps it away until the whole hero has cleared it. */
@media (max-width: 900px) 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: 900px) 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);
  }
}