/* Breathing space under the floating nav pill. It goes on the wrapper, not on
   `.hero-new`: the hero's art layer is absolutely positioned inside it, so
   padding on the section itself would move the copy and leave the calculator
   card behind. The hero is max-height capped, so this eats slack rather than
   pushing content past the fold. */
/* `overflow: clip` on both axes was cutting the calculator card's shadow at the
   hero's bottom edge. The horizontal clip still has a job — the art layer
   bleeds sideways — so only that axis is clipped; `visible clip` is a legal
   pair and does not create a scroll container. */
.herowrap { overflow-y: visible; overflow-x: clip; padding-top: clamp(1.625rem, 3.2vw, 3rem); margin-bottom:-1.5rem; }
/* The homepage used to inset its nav here, because the nav was a pill floating
   in a margin and the full-bleed hero underneath it needed the pill to keep the
   shell's gutter. The nav is a bar that meets both edges on every page now, so
   this rule did one thing: make the homepage's header 97px against 57px
   everywhere else, and `--nav-offset` 40px larger with it.

   Nothing about a hero justifies a taller header. The header is chrome; it is
   the same object on every page, and a page-scoped override of it is drift by
   another name. `.nav` in `app.css` is the only place its geometry is set. */
/* The hero is a grid, not a stack of absolutely-placed pieces. It used to fix
   its own height and hang the art layer off the corner at a hardcoded offset,
   with the card absolutely placed inside that at a fifth set of numbers — so
   every content change was a new set of magic numbers, and content that grew
   past the fixed height was simply cut off. The COPY and the CARD are grid
   children now. Only the decorations — the vanilla panel, the climb
   illustration, the receipt and the verified card — stay absolute, positioned
   against the art column, which is what decoration is for.
   The old fixed height survives as a MINIMUM, so the hero still fills the
   first screen and still stops growing at 820px worth of viewport; the
   difference is that content taller than that now pushes the section down
   instead of overflowing it. */
.hero-new { position:relative; display:grid; grid-template-columns:31.875rem minmax(0,1fr); column-gap:0.625rem; align-items:start; width:min(calc(100% - (2 * var(--gutter))),83.9375rem); min-height:min(calc(100svh - 6.5rem),51.25rem); margin:0 auto; padding:2.125rem 1.25rem 1.75rem 0; overflow:visible; border:0; border-radius:0; background:transparent; }
.hero-new__copy { position:relative; z-index:10; grid-column:1; width:100%; margin-left:0; }
.hero-new__eyebrow { margin: 0; font: var(--type-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-tertiary); }
.hero-new h1 { margin:1rem 0 0; font:500 4rem/.96 var(--font-display); letter-spacing:-.055em; text-wrap:balance; }
.hero-new__lede { margin:1rem 0 0; width:26.875rem; max-width:none; font:400 0.9375rem/1.42 var(--font-sans); color:var(--text-secondary); }
.hero-new__starter,.hero-questions,.hero-new__privacy { width:26.875rem; }
.hero-new__starter { margin: 0.875rem 0 0.375rem; font: 500 0.75rem/1.35 var(--font-display); }
.hero-questions { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--border-hairline); }
.hero-questions li[hidden] { display:none; }
/* 34px tall and 12px of type made this a link list you had to aim at. 44px is
   the floor for a touch target, and it costs a desktop column nothing. */
.hero-questions a { min-height: 2.75rem; padding: 0.4375rem 0; display: flex; justify-content: space-between; gap: 1.25rem; align-items: center; border-bottom: 1px solid var(--border-subtle); color: var(--text-primary); text-decoration: none; font: 400 0.875rem/1.3 var(--font-sans); }
.hero-questions a span:last-child { flex: none; font: var(--type-caption); color: var(--text-tertiary); }
.hero-new__all { display: inline-flex; margin-top: 0.5625rem; padding: 0.5rem 0.875rem; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); color: var(--text-primary); text-decoration: none; font: 500 0.6875rem/1 var(--font-display); }
.hero-new__privacy { margin: 0.5rem 0 0; font: 400 0.625rem/1.3 var(--font-sans); color: var(--text-tertiary); }

/* The layered hero — the calculator card with the receipt and the verification
   card overlapping it — needs about 1280px to lay out without collisions. It
   used to start at 1101px, and between 1101 and 1280 the card was clipped by up
   to 54px on the right and the receipt covered 58% of the headline figure: the
   single most important number on the page, sitting under a decoration. The
   stacked layout below already handles that band cleanly. */
@media (min-width:1281px) {
  .hero-new { padding-bottom:3.625rem; }
}

/* A grid child in normal flow. `min-height` reserves the room the decorations
   need; the card can make it taller and nothing clips. */
.hero-art { position:relative; z-index:2; grid-column:2; inset:auto; height:auto; min-height:43.75rem; margin-top:0.625rem; }
.hero-magnetic { --mag-x:0px; --mag-y:0px; transition:transform var(--dur-reveal) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); will-change:transform; }
/* The card and its action are one stack, so the action always sits under the
   card whatever the card's height. Placing it against the section bottom
   instead was a guess about that height, and the card outgrew it. */
/* The card sizes its own type from ITS OWN width, not the window's. This one
   declaration replaced four viewport-keyed font-size overrides that each
   guessed how wide the card would be at that window size — and it is correct
   in a column no media query knows about, which is how the card ended up
   clipped inside a section grid twice. */
.hero-stack { container-type:inline-size; position:relative; z-index:5; width:28.75rem; margin-top:0.5rem; }
.hero-answer { position:relative; width:100%; min-height:0; padding:1.5rem 1.75rem 1.5rem; background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); transform:translate3d(var(--mag-x),var(--mag-y),0) rotate(1deg); box-shadow:0 32px 76px rgba(var(--cast-rgb),.16),0 9px 26px rgba(var(--cast-rgb),.08); }
/* Underlined text tabs rather than pills in a tray. The tray added a heavy
   band to a card that already stacks nine of them, and `overflow-x:auto` with
   a hidden scrollbar dropped the fifth tab at narrow widths with no
   affordance. `flex-wrap` fails visibly instead. */
.hero-calculator-tabs { display:flex; flex-wrap:wrap; gap:0 0.6875rem; margin:0 0 1.25rem; padding:0; border-bottom:1px solid var(--border-hairline); }
/* Outfit, not mono: these are controls. Mono is reserved for figures. */
.hero-calculator-tabs button { flex:0 0 auto; min-height:2.75rem; padding:0; border:0; border-bottom:2px solid transparent; margin-bottom:-1px; border-radius:0; background:transparent; color:var(--text-tertiary); cursor:pointer; white-space:nowrap; font:500 0.75rem/1 var(--font-display); transition:color var(--dur-micro) var(--ease-out),border-color var(--dur-micro) var(--ease-out); }
/* The tabs carry the calculators' real names — "Medicare surcharge", not
   "Surcharge" — so five of them need the type and the gap to give a little.
   The alternative was a shorter label invented for this one strip, which is
   exactly the drift the registry exists to stop. */
.hero-calculator-tabs button[aria-pressed="true"] { color:var(--text-primary); border-bottom-color:var(--raw-vanilla-deep); }
.hero-calculator-tabs button:hover { color:var(--text-primary); border-bottom-color:var(--raw-ink-40); }
.hero-answer__top { display:flex; justify-content:space-between; gap:1rem; font:500 0.6875rem/1.3 var(--font-mono); text-transform:uppercase; letter-spacing:.06em; color:var(--text-secondary); }
/* ONE YEAR PICKER, not two that look nearly the same. This carried its own
   copy of the pill strip -- same idea, no border, and buttons in a different
   font -- so the control in the hero and the control on every calculator page
   were visibly different objects doing the same job. It is `.fy` now, with only
   the things that are genuinely about its position here left behind. */
.hero-answer__years { width:max-content; max-width:100%; margin-top:0.625rem; }
/* Thresholds moved on 1 July 2026, so someone lodging a prior year and
   someone planning the current one need different numbers. The control that
   switches between them was 27px tall and read as a caption. */
/* Button styling comes from `.fy` as well. */
/* The pressed state comes from `.fy` too, and the slider switches it off. */
/* Every animated figure is tabular. This file was the only stylesheet in the
   build without it, which is why the numbers shifted while counting. */
/* Two declarations on purpose. The second uses `cqi`, and a browser that does
   not know container query units throws the WHOLE `font` shorthand away — face,
   weight and line-height with it — so the headline figure would fall back to
   inherited body text, not merely to a different size. The first declaration is
   the floor that survives that. */
.hero-answer strong { display:block; margin-top:1rem; font:500 clamp(3.25rem, 6vw, 4.25rem)/.9 var(--font-mono); font-variant-numeric:tabular-nums; letter-spacing:-.06em; }
.hero-answer strong { font-size:clamp(3.25rem, 13cqi, 4.75rem); }
.hero-answer small { display:block; margin-top:0.625rem; font:500 0.8125rem/1 var(--font-mono); text-transform:uppercase; letter-spacing:.1em; }
/* Calculators return three or four ledger rows, so switching tabs resized the
   card by 47px and shifted everything below it. Reserve the tallest. */
/* The withheld strip used to be the gap between the headline figure and the
   slider. Removing it left the two touching — the figure's descenders sat on
   the salary label. The gap was never the strip's job to provide. */
.hero-answer__lines { margin:1.25rem 0 0; }
[data-hero-rows] { min-height:12.375rem; }
.hero-answer__salary { padding:0 0 0.875rem; border-bottom:1px solid var(--border-hairline); }
.hero-answer__salary-head { display:flex; align-items:baseline; justify-content:space-between; gap:1.25rem; font:var(--type-body-sm); }
.hero-answer__salary output { font:400 0.8125rem/1.3 var(--font-mono); font-variant-numeric:tabular-nums; }
/* The card is styled like paper, so the one control that moves has to look
     grabbable. Larger thumb, a ring on hover, and a pressed state. */
.hero-presets { display:flex; flex-wrap:wrap; gap:0.375rem; margin:0.625rem 0 0; }
.hero-presets button {
  min-height:2.75rem; padding:0 0.8125rem; cursor:pointer;
  border:1px solid var(--border-hairline); border-radius:var(--radius-pill);
  background:var(--surface-card); color:var(--text-secondary);
  font:500 0.75rem/1 var(--font-mono); font-variant-numeric:tabular-nums;
  transition:background var(--dur-micro) var(--ease-out),border-color var(--dur-micro),color var(--dur-micro);
}
.hero-presets button:hover { border-color:var(--border-strong); color:var(--text-primary); }
.hero-presets button[aria-pressed="true"] { background:var(--surface-accent); border-color:transparent; color:var(--text-on-accent); }
.hero-answer__salary p { margin:0.5rem 0 0; color:var(--text-tertiary); font:400 0.625rem/1.35 var(--font-mono); }
.hero-answer__line { border-bottom:1px solid var(--border-hairline); }
/* 1fr pushes the value and the marker to the right edge, so every value's
   right edge lands in the same place regardless of label length. */
.hero-answer__line > button { width:100%; display:grid; grid-template-columns:1fr auto 0.75rem; align-items:baseline; gap:1rem; padding:0.75rem 0; border:0; background:transparent; color:var(--text-primary); cursor:pointer; text-align:left; font:var(--type-body-sm); }
.hero-answer__line > button span:last-child { font:400 0.8125rem/1.3 var(--font-mono); font-variant-numeric:tabular-nums; text-align:right; }
.hero-answer__line > button::after { content:"+"; width:0.75rem; text-align:right; color:var(--text-tertiary); font:500 0.8125rem/1 var(--font-mono); }
.hero-answer__line > button[aria-expanded="true"]::after { content:"−"; }
.hero-answer__line p { margin:0 1.125rem 0.8125rem 0; color:var(--text-secondary); font:400 0.6875rem/1.5 var(--font-mono); }
.hero-answer__share { margin-top:1.25rem; padding:0.5rem 0 0.25rem; border:0; border-bottom:1px solid var(--raw-ink-40); background:transparent; color:var(--text-primary); cursor:pointer; font:500 0.75rem/1 var(--font-display); }
/* Sprout, not lime. This card reports a verified state, and HATCH's accent
   family has a hue for exactly that — `--ok` is sprout. Lime is rationed to the
   one thing a screen is asking the reader to do, and on this page that is the
   calculator button. */
.hero-verified-card { position:absolute; z-index:7; left:30rem; top:21.875rem; width:11.875rem; min-height:7rem; padding:1.125rem 1.375rem; border:1px solid var(--sprout-line); border-radius:var(--radius-md); background:var(--sprout-wash); transform:translate3d(var(--mag-x),var(--mag-y),0) rotate(-3deg); box-shadow:0 18px 46px rgba(var(--cast-rgb),.12); font:500 0.6875rem/1.45 var(--font-mono); }
.hero-verified-card b { display:block; margin-bottom:0.4375rem; font-size:1.5rem; line-height:1; letter-spacing:-.05em; }
.hero-receipt { position:absolute; z-index:6; left:29.375rem; right:auto; top:4.625rem; width:13.75rem; min-height:14.25rem; padding:1.25rem 1.25rem 1.125rem; background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:1rem; transform:translate3d(var(--mag-x),var(--mag-y),0) rotate(3deg); display:grid; align-content:start; gap:0; font:400 0.625rem/1.3 var(--font-mono); box-shadow:0 26px 68px rgba(var(--cast-rgb),.16),0 7px 20px rgba(var(--cast-rgb),.08); }
.hero-receipt__head { display:flex; align-items:center; justify-content:space-between; gap:0.75rem; padding-bottom:0.875rem; border-bottom:1px dashed var(--raw-ink-40); }
.hero-receipt__head b { font-size:0.875rem; text-transform:uppercase; letter-spacing:.08em; }
.hero-receipt__head span { padding:0.3125rem 0.4375rem; border:1px solid var(--border-subtle); border-radius:var(--radius-pill); font-size:0.5625rem; text-transform:uppercase; }
.hero-receipt__brand { padding:0.9375rem 0 0.8125rem; color:var(--text-secondary); text-transform:uppercase; letter-spacing:.05em; }
.hero-receipt__row,.hero-receipt__total { display:flex; justify-content:space-between; gap:0.75rem; padding:0.6875rem 0; border-top:1px dotted var(--border-subtle); }
.hero-receipt__row strong,.hero-receipt__total strong { text-align:right; font-weight:500; }
.hero-receipt__total { margin-top:0.25rem; padding-top:0.875rem; border-top:1px dashed var(--raw-ink-40); }

/* Removed: a squeeze for the layered hero when it ran down to 1101px —
   scaling the art to 0.9 and pinning the card to the right edge. With the
   composition now starting at 1281px it has room, and the squeeze was
   clipping the card by 54px and dropping the receipt over the headline
   figure in the 1300–1400 band instead. */
/* --- Below the layered composition: answer first, then the calculator -----
   Stacked, the old order asked the reader to walk past five starter questions
   before reaching the thing that answers them. The heading poses the question,
   the calculator answers it, and the starter list — which is for people the
   heading did not catch — comes after.

   `display:contents` on the copy wrapper lifts its children into the section's
   own flex flow, so the card can be ordered between them without moving
   anything in the DOM. */
@media (max-width:1280px) {
  .hero-new { display:flex; flex-direction:column; }
  .hero-new__copy { display:contents; }
  .hero-new__eyebrow { order:1; }
  .hero-new h1 { order:2; }
  .hero-new__lede { order:3; }
  .hero-art { order:4; }
  .hero-new__starter { order:5; font-size:0.875rem; }
  .hero-questions { order:6; }
  .hero-questions a { min-height:3rem; font-size:0.9375rem; }
  .hero-new__all { order:7; }
  .hero-new__privacy { order:8; }

}

@media (min-width:900px) and (max-width:1280px) {
  .hero-new { width:min(calc(100% - (2 * var(--gutter))),83.9375rem); height:auto; min-height:0; max-height:none; padding:6rem var(--gutter) 3.375rem; overflow:hidden; }
  .hero-new__copy { width:auto; max-width:47.5rem; margin:0 auto; text-align:center; }
  .hero-new h1 { max-width:47.5rem; margin-inline:auto; text-align:center; }
  .hero-new__lede { width:min(35.625rem,100%); margin-inline:auto; }
  .hero-new__starter { display:block; width:100%; margin-top:4rem; }
  .hero-questions { width:min(38.75rem,100%); margin-inline:auto; text-align:left; }
  .hero-new__all,.hero-new__privacy { display:none; }
  .hero-art { position:relative; inset:auto; width:min(48.75rem,100%); height:43.75rem; margin:2.875rem auto 0; transform:none; }
.hero-verified-card, .hero-receipt { display:none; }
  .hero-stack { left:auto; right:0; top:3.25rem; width:48%; }
  .hero-answer { min-height:32.5rem; padding:1.875rem 1.75rem; transform:rotate(1.5deg); }
}
@media (max-width: 899px) {
  .hero-new { width:100%; height:auto; min-height:0; max-height:none; padding:4rem var(--gutter) 3.25rem; overflow:hidden; border-right:0; border-left:0; border-radius:0; }
  .hero-new__copy { width:auto; max-width:42.5rem; margin:0 auto; text-align:center; }
  .hero-new h1 { max-width:42.5rem; margin-inline:auto; text-align:center; }
  .hero-new__lede { width:min(35rem,100%); margin-inline:auto; }
  .hero-new__starter { display:block; width:100%; margin-top:4rem; }
  .hero-questions { width:min(32.5rem,100%); margin-inline:auto; text-align:left; }
  .hero-new__all,.hero-new__privacy { display:none; }
  .hero-art { position:relative; inset:auto; width:min(45rem,100%); height:45.625rem; min-height:0; margin:2.875rem auto 0; transform:none; }
.hero-verified-card, .hero-receipt { display:none; }
  .hero-stack { left:auto; right:0; top:3.875rem; width:49%; }
  .hero-answer { min-height:31.25rem; padding:1.75rem 1.625rem; transform:rotate(1.5deg); }
  .herowrap { margin-bottom:0; }
}
@media (max-width: 599px) {
  .hero-new { padding:3rem var(--gutter) 3.25rem; }
  .hero-new__eyebrow { text-align:center; }
  .hero-new h1 { max-width:8.5ch; font-size:3rem; }
  .hero-new__lede { max-width:32ch; }
  .hero-art { width:100%; height:63.125rem; margin-top:1.625rem; }
  .hero-stack { box-sizing:border-box; left:50%; right:auto; top:22.125rem; width:var(--responsive-card-width); transform:translateX(-50%); }
  .hero-answer { box-sizing:border-box; min-height:26.25rem; padding:1.625rem 1.5rem; border:var(--responsive-card-border); border-radius:var(--responsive-card-radius); transform:none; box-shadow:var(--responsive-card-shadow); }
  .hero-calculator-tabs { margin:0 0 1.125rem; }
  .hero-answer__salary p { display:none; }
}
@media (prefers-reduced-motion: reduce) { .hero-art * { transition:none!important; animation:none!important; } }

/* --- Stacked hero: the card in normal flow -------------------------------
   Last in the file on purpose. The 899px and 599px blocks above re-apply the
   two-up composition — a 730px or 1010px art canvas with the card absolutely
   placed at 49% and rotated — which is right when the card sits beside an
   illustration and wrong when it is the only thing in the column. Below the
   layered breakpoint the card is simply the content: in flow, centred, upright.
   Type sizes stay with their own breakpoints; this rule only undoes the
   positioning. */
@media (max-width:1280px) {
  /* The stacked hero is a flex column with `align-items: start`, so a child
     shrinks to its content and sits left unless something centres it. The
     heading and the lede centre themselves with `margin-inline: auto`; the
     eyebrow has neither a margin nor a width, so it alone drifted to the left
     edge while its own `text-align: center` centred the text inside its 260px.

     This sits in the ≤1280px block, not the ≤899px one where it was first
     written: the 900-to-1280 band centres the heading too, so fixing only the
     narrow band left the same bug alive across 380px of widths.

     `align-self` is the mechanism that does not need to know the width. */
  .hero-new__eyebrow { align-self:center; }
  .hero-art {
    position:static; inset:auto; width:min(38.75rem,100%);
    height:auto; min-height:0; margin:2.125rem auto 0; transform:none;
  }
  .hero-verified-card, .hero-receipt { display:none; }
  .hero-stack {
    position:static; inset:auto; width:100%; margin:0 auto; transform:none;
  }
  .hero-answer { position:relative; width:100%; min-height:0; margin:0; transform:none; }
}

/* The stacked homepage hero, on a screen that is short rather than narrow. The
   calculator is the page's one interactive object; it should not open below
   the fold on a laptop. */
@media (max-width:1280px) and (max-height:1120px) {
  .hero-new { padding-top:3.5rem; }
  .hero-new h1 { font-size:clamp(2.125rem,4.4vw,3.25rem); }
  .hero-new__lede { margin-top:0.75rem; }
  .hero-art { margin-top:1.375rem; }
}
@media (max-width:1280px) and (max-height:960px) {
  .hero-new { padding-top:1.75rem; }
  .hero-new h1 { font-size:clamp(1.75rem,3.6vw,2.5rem); }
  .hero-new__eyebrow { margin-bottom:0.375rem; }
  .hero-new__lede { margin-top:0.5rem; font-size:0.9375rem; }
  .hero-art { margin-top:0.875rem; }
}

/* --- The card on a short screen ------------------------------------------
   830px of card under a heading does not fit a 768px fold, and the parts that
   fall off the bottom are the working — the rows that make the figure
   checkable. Trimming the headline, the row rhythm and the padding buys back
   around 180px, which is the difference between seeing two ledger rows and
   seeing all five. */
/* Short SCREENS, not small ones. Every phone is under 960px tall — that is its
   whole display, not a cramped one — so this rule was shrinking the hero figure
   to 36px on a phone while the mobile layout asked for 56px, and hiding the
   quick-amount chips that are easiest to hit on a phone. It exists for a short
   LAPTOP, where the card has to share the fold with a heading. `min-width` says
   so. The 60rem block that used to sit below this was the same 960px
   breakpoint written a second way; it is merged in here. */
@media (max-height: 960px) and (min-width: 601px) {
  .hero-answer { padding:1.375rem 1.25rem; }
  .hero-answer strong { margin-top:0.5rem; }
  .hero-answer small { margin-top:0.375rem; }
  .hero-answer__years { margin-top:0.5rem; }
  .hero-answer__years button { min-height:2rem; }
  .hero-calculator-tabs { margin:0 0 0.875rem; }
  .hero-answer__line > button { min-height:2.5rem; }
  .hero-answer__share { margin-top:0.75rem; }
  /* The card cannot carry the working AND the quick-amount chips AND its
     action inside a short fold. The chips go: the slider sets the same value,
     so nothing becomes unreachable. Ledger rows stay — they are the working. */
  .hero-presets { display:none; }
  .hero-answer__salary p { display:none; }
  .hero-answer__salary { padding-bottom:0.5rem; }
}

/* Card-width rules, not window-width rules. A narrow card is narrow whether
   that is a phone or a column inside a wide page. */
@container (max-width: 27rem) {
  .hero-answer__top { font-size:0.5625rem; }
  .hero-calculator-tabs { gap:0 0.5625rem; }
  .hero-answer__salary p { display:none; }
}

/* --- Tablet: the composition survives, the card stops sprawling -------------
   Below 1280px everything above collapses to one centred card, which let it
   run to 620px on a 768px screen — wider than it ever is on a desktop, and
   with the receipt and the verified card dropped for a layout that had room
   for them. Here the art column is a two-up grid instead: the card capped at
   its desktop width, the receipt and the verification card stacked beside it.
   They are grid children in this band, not absolute — so nothing needs a
   hardcoded offset and the pair simply falls away below 768px. */
@media (min-width:48rem) and (max-width:1280px) {
  .hero-art {
    display:grid; grid-template-columns:minmax(0,28.75rem) 15.5rem;
    /* Four rows, two of them elastic. The card spans all of them; the receipt
       and the verification card sit in the two middle rows, so the equal 1fr
       spacers above and below centre the pair against the card instead of
       pinning it to the top and leaving the slack in one lump at the bottom.
       (Sizing the rows to content alone let the browser share the card's
       height across them and drift the two apart by 195px.) */
    grid-template-rows:1fr min-content min-content 1fr;
    justify-content:center; align-items:start;
    column-gap:1.25rem; row-gap:0;
    /* The two-up composition is taller than the single card it replaced, which
       pushed the first control to exactly the 45% fold limit at 1024 and 1280.
       The margin is the cheapest thing in the band to give back. */
    width:100%; margin:1.25rem auto 0;
  }
  .hero-stack { grid-column:1; grid-row:1 / -1; width:100%; }
  .hero-receipt {
    display:grid; position:static; inset:auto; grid-column:2; grid-row:2;
    width:100%; min-height:0; transform:rotate(2deg);
  }
  .hero-verified-card {
    display:block; position:static; inset:auto; grid-column:2; grid-row:3;
    align-self:start; width:100%; margin-top:1rem; min-height:0; transform:rotate(-2deg);
  }
}

/* The first control sat at 44.6% of the fold on a 390x844 phone — inside the 45%
   ceiling by four tenths of a percent, which is not a margin. The hero already
   clears a 95px nav, so 12px off its own top padding is the cheapest thing to
   give back — it is neither type nor a tap target. Last in the file because the
   short-viewport block above also sets this padding and would otherwise win. */
@media (max-width:599px) {
  .hero-new { padding-top:1rem; }
}

/* The receipt and the verified count carry no arrival of their own. They are
   revealed with the rest of the hero, in place, by `home-motion.js` -- so
   there is no hidden start state here to get stuck in if script never runs. */