/* ---------------------------------------------------------------------------
   Homepage — decision playground.

   Same tokens as every other page: FLYING palette, Outfit for display, Poppins
   for prose, JetBrains Mono for figures. The spec proposed a different palette
   and typeface; the implemented system wins (user decision, 23 Aug 2026).

   No semantic colour on a verdict. The one accent (Vanilla) marks *change*,
   not *good* — which is the only use DESIGN-PRD §2.2 leaves open.
--------------------------------------------------------------------------- */

.main { padding-bottom: 0; }

/* --- Shared section furniture -------------------------------------------- */

.section-head { max-width: 62ch; margin-bottom: 2.5rem; }
.section-head h2 { margin: 0.875rem 0 0; font: 500 2.25rem/1.12 var(--font-display); letter-spacing: -0.025em; text-wrap: pretty; }
.section-head p { margin: 1rem 0 0; font: var(--type-body); line-height: 1.6; color: var(--text-secondary); text-wrap: pretty; }

.stage, .change, .trust, .calculators, .paths, .keep, .problem, .next { padding: var(--section-gap) 0; }

.assump { margin: 1.75rem 0 0; padding: 0; border-top: 1px solid var(--border-hairline); }
.assump dt { font: var(--type-body-sm); color: var(--text-secondary); }
.assump dd { margin: 0; font: 500 0.875rem/1.3 var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }

.steps2 { margin: 0; padding: 0; list-style: none; display: grid; gap: 1.25rem; }
.stp {
  padding: 1.875rem; border-radius: var(--radius-lg); background: var(--surface-card);
  border: 1px solid var(--border-subtle); box-shadow: var(--shadow-1);
}
/* The hidden start state is applied by script, and only once the observer that
   can undo it is actually attached. A step must never be able to sit at
   opacity 0 with nothing left to reveal it. */
.steps2--anim .stp {
  opacity: 0; transform: translateY(18px);
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
}
.steps2--anim .stp.is-in { opacity: 1; transform: none; }

/* =========================================================================
   SCENE 3 — CHANGE
========================================================================= */

.cmp { display: grid; grid-template-columns: minmax(0, 18.75rem) minmax(0, 1fr); gap: 2.5rem; align-items: stretch; }
.rad { display: flex; align-items: center; gap: 0.5625rem; min-height: 2.75rem; cursor: pointer; font: var(--type-body-sm); }
.rad input { accent-color: var(--raw-ink); width: 1.0625rem; height: 1.0625rem; }
.roll {
  margin-top: 1rem; font: 500 2.5rem/1.05 var(--font-mono);
  font-variant-numeric: tabular-nums; letter-spacing: -0.04em;
}

/* Rolling digits — one clipped row, characters upright (spec §9). */
.rollc { display: inline-block; overflow: hidden; vertical-align: bottom; height: 1.05em; }
.rollc__in { display: block; transform: translateY(100%); transition: transform var(--dur-reveal) var(--ease-out); }
.rollc__in.is-set { transform: none; }
.is-changed { animation: flash var(--dur-travel) var(--ease-out); }
@keyframes flash { 0%, 40% { background: var(--raw-vanilla-wash); } 100% { background: transparent; } }
.trust h2 { margin: 0.875rem 0 0; font: 500 2.25rem/1.12 var(--font-display); letter-spacing: -0.025em; text-wrap: pretty; }
.trust p { margin: 1.25rem 0 0; font: var(--type-body); line-height: 1.65; color: var(--text-secondary); max-width: 58ch; text-wrap: pretty; }
.trust strong { color: var(--text-primary); font-weight: 500; }

.withheld {
  padding: 1.5rem 1.625rem; border-radius: var(--radius-lg);
  border: 1px dashed var(--raw-ink-40); background: var(--surface-card);
}

/* =========================================================================
   CALCULATOR TILES
========================================================================= */

/* Six tracks so the five calculators can take different widths. They do not
   carry equal consequence — stamp duty and the visa exemption are the two
   with real money attached — so they are not given equal room. */
/* One full-width card per calculator, stacked. Not a grid of five any more:
   each of these asks a different question of a different person, and a row of
   thirds gave the two at the top twice the room of the three below them for no
   reason a reader could see.

   The gap is the doubled one the rules require around cards -- 2rem was the
   grid's gap and these are much larger objects. */
.tiles { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
.tile {
  display: flex; flex-direction: column; padding: 1.875rem; text-decoration: none;
  /* No border: separation is shadow and whitespace. The page carried fifteen
     outlined boxes nested inside outlined sections, which is what made it
     read as a grid of rectangles rather than a composition. */
  border: 0; border-radius: 1.625rem;
  background: var(--surface-card); color: var(--text-primary);
  box-shadow: 0 1px 2px rgba(var(--cast-rgb),.04), 0 26px 60px -28px rgba(var(--cast-rgb),.22);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.tile:hover { transform: translateY(-3px); box-shadow: 0 2px 6px rgba(var(--cast-rgb),.05), 0 32px 64px -18px rgba(var(--cast-rgb),.26); }

/* Two columns from 50rem, the width where a reading measure and a picture can
   both have room on one full-width card. Below it the art slot is not shown at
   all -- a half-width illustration beside a two-line question is worse than no
   illustration, and an empty box on a phone is just a hole. */
@media (min-width: 50rem) {
  .tile {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(14rem, 0.62fr);
    gap: 2.5rem;
    align-items: stretch;
    padding: 2.25rem;
  }
  .tile__q { font-size: 1.5rem; }
  .tile__value { font-size: 2.5rem; }
}
@media (max-width: 49.99rem) {
  .tile__art { display: none; }
}
/* Content left, artwork right. The copy column is held to a reading measure
   rather than a fraction of the card, so the sentence does not get longer just
   because the viewport did -- the art column absorbs the extra width. */
.tile__body { display: flex; flex-direction: column; min-width: 0; }
.tile__art { min-height: 100%; border-radius: 1.25rem; background: var(--surface-sunken); }
.tile__top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.tile__country { font: var(--type-mono-sm); color: var(--text-tertiary); }
.tile__name { font: 500 0.9375rem/1.2 var(--font-display); }
/* WHO THIS ONE IS FOR, above the question it answers. Two of the five are
   Medicare calculators and their names say so, which made them read as the
   same product twice on a card list. This is the line that separates them --
   in the reader's terms, not the scheme's. */
.tile__who { margin: 0.875rem 0 0; font: var(--type-mono-sm); color: var(--text-tertiary); }
.tile__q { margin: 0.5rem 0 0; font: 500 1.25rem/1.3 var(--font-display); letter-spacing: -0.015em; text-wrap: pretty; }
.tile__figure { display: flex; align-items: baseline; gap: 0.5rem; margin-top: 1.375rem; }
.tile__value { font: 500 2.125rem/1 var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.tile__unit { font: var(--type-caption); color: var(--text-secondary); }
.tile__case {
  margin-top: 0.625rem; align-self: flex-start; padding: 0.3125rem 0.6875rem;
  border-radius: var(--radius-pill); background: var(--sec-surface, var(--surface-sunken));
  font: 500 0.75rem/1.2 var(--font-mono); font-variant-numeric: tabular-nums;
}
.tile__go {
  margin-top: auto; padding-top: 1.25rem; font: 500 0.8125rem/1 var(--font-display);
  color: var(--text-primary); text-decoration: underline;
  text-decoration-color: var(--raw-ink-40); text-underline-offset: 4px;
}
.tile:hover .tile__go { text-decoration-color: currentColor; }
.path {
  padding: 0; border: 0; border-radius: 1.625rem;
  background: var(--surface-card); overflow: hidden;
  box-shadow: 0 1px 2px rgba(var(--cast-rgb),.04), 0 22px 50px -26px rgba(var(--cast-rgb),.18);
  transition: box-shadow var(--dur-base) var(--ease-out);
}
.path[open] { box-shadow: 0 2px 6px rgba(var(--cast-rgb),.05), 0 30px 70px -28px rgba(var(--cast-rgb),.26); }
.keep h2 { margin: 0.875rem 0 0; font: 500 2.25rem/1.12 var(--font-display); letter-spacing: -0.025em; text-wrap: pretty; }
.keep p { margin: 1.25rem 0 0; font: var(--type-body); line-height: 1.65; color: var(--text-secondary); max-width: 58ch; text-wrap: pretty; }
.keep em { font-style: normal; color: var(--text-primary); font-weight: 500; }
.problem h2 { margin: 0.875rem 0 0; font: 500 2.25rem/1.12 var(--font-display); letter-spacing: -0.025em; text-wrap: pretty; }
.problem p { margin: 1.25rem 0 0; font: var(--type-body); line-height: 1.65; color: var(--text-secondary); max-width: 60ch; text-wrap: pretty; }
.proof { margin: 1rem 0 0; padding: 0; list-style: none; }
.proof li {
  position: relative; padding: 1rem 0 1rem 1.625rem;
  border-top: 1px solid var(--border-hairline);
  font: var(--type-body-sm); line-height: 1.6; color: var(--text-secondary); text-wrap: pretty;
}
.proof li::before {
  content: ""; position: absolute; left: 2px; top: 1.5rem;
  width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: var(--raw-vanilla-deep);
}
.proof strong { color: var(--text-primary); font-weight: 500; }

/* =========================================================================
   SCENE 7 — CONTINUE
========================================================================= */

.next { text-align: center; }
.next .eyebrow { justify-content: center; }
.next h2 { margin: 0.875rem 0 0; font: 500 clamp(1.75rem, 4vw, 2.75rem)/1.1 var(--font-display); letter-spacing: -0.03em; text-wrap: balance; }
.next__body { margin: 1.125rem auto 0; max-width: 56ch; font: var(--type-body); line-height: 1.6; color: var(--text-secondary); text-wrap: pretty; }
/* Clear of the strip above it. At 1.875rem the buttons sat directly under the
   four assumption stamps and read as a fifth column. */
/* Twice the tray's own approach (2.75rem above it), because the thing above
   these buttons is a CARD GRID and "a grid of cards gets twice the spacing a
   grid of anything else would -- both between the cards and AROUND them".
   3.5rem was a number picked by eye, and by eye is how it ended up reading as
   the buttons belonging to the last card rather than to the section. */
.next__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 5.5rem; }
.next__cta { display: inline-flex; align-items: center; height: 3rem; text-decoration: none; }

/* =========================================================================
   RESPONSIVE
========================================================================= */

@media (max-width: 1000px) {
  .stage__grid, .cmp { grid-template-columns: 1fr; gap: 2rem; }
}

@media (max-width: 900px) {
  .section-head h2, .trust h2, .problem h2, .keep h2 { font-size: 1.75rem; }
}

@media (max-width: 640px) {
  .stp, .scn, .tile, .path__sum, .cmp__control { padding: 1.25rem; }
  .tile__value, .cmp__price { font-size: 1.75rem; }
  .roll { font-size: 2rem; }
  .next__actions > * { width: 100%; justify-content: center; }
}

/* A tap target is at least 44px on a phone. */
.trust__all { display: inline-flex; align-items: center; min-height: 2.75rem; }

/* =========================================================================
   ARRIVAL — now owned by GSAP, not by CSS

   This block held a set of scroll-driven CSS animations on `view()` timelines.
   They have been replaced by `home-motion.js`, and the whole block is gone
   rather than kept as a fallback, because two systems animating the same
   property is worse than one system doing nothing: with both live, the CSS
   start state applies immediately and GSAP's tween then fights it.

   What is left is the rule that made those animations safe, and it still
   holds: NOTHING here hides content waiting to be revealed. The start state
   lives in the script, set in the same breath as the tween that undoes it, so
   a page whose JavaScript never arrives is complete rather than blank.
========================================================================= */

/* A counting number is a piece of the figure it sits in, not a thing of its
   own. Wrapping the numerator in a bare <span> to give it a hook put it inside
   `.proof-docket__fact dt span` -- a 10px uppercase LABEL rule -- so "31"
   rendered at ten pixels beside a forty-eight pixel "33".

   TWICE. The first fix keyed on `[data-count-to]`; the attribute was then
   renamed to `data-flap` for the split-flap board and the rule silently
   stopped matching anything. Both spellings are listed now.

   Fixed at the source rather than by out-shouting it. The label is a DIRECT
   child of the `dt`; the number is nested inside the `strong` beside it. So
   the label rule now says `dt > span` and no longer reaches the number at all
   -- no specificity contest, no `!important`, and the rule below is a
   safety net rather than a counterweight. */
[data-flap], [data-count-to] { font: inherit; letter-spacing: inherit; color: inherit; text-transform: inherit; padding: 0; }

/* =========================================================================
   SECTIONS THAT SETTLE

   Scroll snapping at `proximity`, kept as the no-JavaScript behaviour only.
   `scroll.js` turns it off the moment Lenis takes the scroll, because snapping
   re-targets a scroll that Lenis is already animating toward its own target
   and the page tugs between the two. The guard class is `smooth-scroll` and
   not `has-lenis`: Lenis edits the root class attribute by string replacement,
   so any class of ours containing its name gets mangled by it.

   It is removed by script rather than deleted here so that a reader on reduced
   motion -- who never gets Lenis -- still has sections that settle.
========================================================================= */

@media (prefers-reduced-motion: no-preference) and (min-width: 48rem) {
  html:not(.smooth-scroll) { scroll-snap-type: y proximity; }
  html:not(.smooth-scroll) [data-section]:not(.calculators) {
    scroll-snap-align: start;
    scroll-margin-top: var(--nav-offset);
  }
}