/* Selected editorial redesigns: answer spread + split-state comparison. */
:root {
  --home-content:83.9375rem;
  --home-inset:max(var(--gutter),calc((100vw - var(--home-content))/2));
  --section-pad:clamp(1.5rem,3vw,3rem);
  --section-gap:clamp(4.5rem,6vw,6.5rem);
  --responsive-card-width:min(100%,calc(100vw - 2.5rem));
  --responsive-card-radius:1.625rem;
  --responsive-card-border:1px solid var(--border-subtle);
  --responsive-card-shadow:0 24px 58px rgba(var(--cast-rgb),.14),0 7px 18px rgba(var(--cast-rgb),.07);
  /* --cta-* now live in app.css, which every page loads. */
  --cta-secondary-height:48px;
}
.main.main--body { width:100%; max-width:none; padding-inline:0; }
#home > .trust,#home > .calculators,#home > .paths,#home > .keep,#home > .problem,#home > .next { padding:6rem var(--home-inset); }
#home > .trust,#home > .calculators,#home > .paths,#home > .keep,#home > .problem,#home > .next { width:100%; }
#home .section-head { margin-bottom:2.125rem; }

/* Early proof: a single audit docket, not a row of generic marketing cards. */
.proof-docket {
  position:relative;
  width:min(calc(100% - (2 * var(--gutter))),var(--home-content));
  margin:0 auto;
  padding:clamp(4rem,6.6vw,6rem) 0;
  display:grid;
  grid-template-columns:minmax(18.75rem,.82fr) minmax(0,1.55fr);
  gap:clamp(2.75rem,6vw,5.5rem);
  align-items:end;
  /* Open, not a card. A section that is itself a rounded rectangle turns the
     page into a stack of boxes containing boxes — whitespace separates
     sections, cards are reserved for discrete objects. */
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.proof-docket::before { content:none; }
.proof-docket__copy { max-width:28.125rem; }
.proof-docket__status { display:inline-flex; align-items:center; gap:0.5rem; margin-bottom:1.625rem; font:500 0.625rem/1 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; }
.proof-docket__status span { width:0.5rem; height:0.5rem; border-radius:50%; background:var(--status-live); box-shadow:0 0 0 4px color-mix(in srgb,var(--surface-accent) 56%,transparent); }
.proof-docket__copy h2 { max-width:26.875rem; margin:var(--opener-heading-gap) 0 0; font:500 clamp(2.375rem,3.7vw,3.5rem)/1.02 var(--font-display); letter-spacing:-.045em; text-wrap:balance; }
.proof-docket__copy > p:last-of-type { margin:var(--opener-lede-gap) 0 0; max-width:26.875rem; color:var(--text-secondary); font:var(--type-body-sm); line-height:1.6; }
.proof-docket__copy a { display:inline-block; margin-top:1.5rem; color:var(--raw-ink); font:500 0.8125rem/1.2 var(--font-display); text-underline-offset:5px; }
.proof-docket__ledger { position:relative; z-index:1; margin:0; padding:1.25rem; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; border-radius:1.5rem; background:rgba(var(--paper-rgb),.44); box-shadow:inset 0 0 0 1px rgba(var(--paper-rgb),.72); backdrop-filter:blur(10px); }
.proof-docket__fact { position:relative; min-height:10.875rem; padding:1.5625rem 1.5rem 1.375rem; border-radius:1.0625rem; background:rgba(var(--paper-rgb),.78); box-shadow:0 9px 26px rgba(var(--cast-deep-rgb),.045); }
/* The one figure this section is built to make: how many records were read at
   the office that publishes them. It keeps lime — it is the page's claim, and
   the fill ladder puts emphasis on hue. */
.proof-docket__fact--primary { background:linear-gradient(145deg,var(--surface-accent),var(--surface-accent-deep)); }
.proof-docket__fact dt { display:flex; align-items:flex-start; gap:0.9375rem; margin:0; }
.proof-docket__fact dt strong { color:var(--text-primary); font:500 clamp(2rem,3vw,3rem)/.9 var(--font-mono); letter-spacing:-.07em; white-space:nowrap; }
.proof-docket__fact dt > span { padding-top:2px; color:var(--text-secondary); font:500 0.625rem/1.35 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; }
.proof-docket__fact dd { max-width:15.625rem; margin:1.75rem 0 0; color:var(--text-secondary); font:var(--type-caption); line-height:1.5; }
/* On the lime card the text stops following the theme's ink: the card is the
   same lime in both, so its ink is the same in both. */
.proof-docket__fact--primary dt strong { color:var(--text-on-accent); }
.proof-docket__fact--primary dt > span,
.proof-docket__fact--primary dd { color:var(--text-on-accent-soft); }
@media (max-width:900px) {
  /* No background here either. It asked for a gradient ending in
     `--surface-page`, a token nobody defines, so the declaration has always
     been dropped — and the section above says in as many words that this is
     open rather than a card. The rule was contradicting its own comment and
     losing. */
  .proof-docket { grid-template-columns:1fr; align-items:start; }
  .proof-docket__copy { max-width:40.625rem; text-align:center; margin-inline:auto; }
  .proof-docket__copy h2,.proof-docket__copy > p:last-of-type { margin-left:auto; margin-right:auto; }
  .proof-docket__ledger { width:100%; }
}
@media (max-width:560px) {
  .proof-docket { width:100%; padding:3.5rem var(--gutter); gap:2rem; border-radius:0; }
  .proof-docket__copy { padding-inline:0.375rem; }
  .proof-docket__copy h2 { font-size:2.375rem; }
  .proof-docket__ledger { grid-template-columns:repeat(2,minmax(0,1fr)); padding:0.875rem; gap:0.875rem; border-radius:1.25rem; }
  .proof-docket__fact { min-height:10.875rem; padding:1.1875rem 0.875rem; border-radius:0.875rem; }
  .proof-docket__fact dt { display:block; }
  .proof-docket__fact dt strong { display:block; font-size:1.9375rem; }
  .proof-docket__fact dt > span { display:block; margin-top:0.5rem; }
  .proof-docket__fact dd { margin-top:0.875rem; font-size:0.6875rem; }
}

/* Calculator library: the same soft, contained language as early proof. */
#home > .calculators {
  position:relative;
  width:min(calc(100% - (2 * var(--gutter))),var(--home-content));
  margin-left:auto;
  margin-right:auto;
  padding:clamp(4rem,6.6vw,6rem) 0;
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  clip-path:none;
}
#home > .calculators::before { content:none; }
.calculators .section-head {
  position:relative;
  z-index:1;
  max-width:45rem;
  margin:0 auto clamp(2.25rem,4vw,3.25rem);
  text-align:center;
}
.calculators .section-head h2 {
  margin-top:0.875rem;
  font:500 clamp(2.5rem,4vw,3.625rem)/1.02 var(--font-display);
  letter-spacing:-.045em;
  text-wrap:balance;
}
.calculators .section-head p { max-width:40.625rem; margin-left:auto; margin-right:auto; }
/* The directory of five, in the docket's language.

   It used to be five posters: a 340px floor under cards holding six short
   lines, and a different pastel wash on each. Both were doing the same job
   badly. The floor produced the dead space -- a card that is mostly empty
   reads as unfinished, not as generous -- and the washes spent five hues on
   findability that the country label and the calculator's name already
   provide. Colour that means nothing is the thing this page can least afford;
   see "the lime is rationed".

   So: one tray, five paper cards, sized by what is in them. The two with real
   money attached take the wide row -- that asymmetry is the section's one
   piece of emphasis, and it is structural rather than coloured. */
.calculators .tiles {
  position:relative;
  z-index:1;
  gap:2rem;
  padding:1.25rem;
  border-radius:1.5rem;
  background:rgba(var(--paper-rgb),.44);
  box-shadow:inset 0 0 0 1px rgba(var(--paper-rgb),.72);
  backdrop-filter:blur(10px);
}
.calculators .tile {
  padding:1.5625rem 1.5rem 1.375rem;
  border:0;
  border-radius:1.0625rem;
  background:rgba(var(--paper-rgb),.78);
  box-shadow:0 9px 26px rgba(var(--cast-deep-rgb),.045);
}
.calculators .tile:hover {
  transform:translateY(-2px);
  box-shadow:0 14px 34px rgba(var(--cast-deep-rgb),.10);
}

/* =========================================================================
   THE FIVE, AS A SEQUENCE — the stack is gone

   It was built twice: sticky with staggered tops, then CodyHouse's one-top-
   plus-translate arrangement. The second is the correct construction and the
   pile did finally form, but a stack is a lot of machinery to keep balanced --
   pin ranges, container padding, a dwell per card, a last card that has
   nothing after it -- and every adjustment to one of those moved another.

   The five are peers in a directory. They read perfectly well as a grid that
   arrives one card at a time, which is what the reveal in `home-motion.js`
   does, and nothing about that can come unstuck.
========================================================================= */





/* Country and calculator, over a hairline. The label carries the uppercase
   mono treatment the docket uses for the same job. */
.calculators .tile__top {
  padding-bottom:0.8125rem;
  border-bottom:1px solid var(--border-hairline);
}
.calculators .tile__country {
  font:500 0.625rem/1.35 var(--font-mono);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-tertiary);
}
.calculators .tile__name { font:500 0.875rem/1.25 var(--font-display); text-align:right; }
/* Smaller than it was. It is the question the card answers, not the section's
   heading -- and the figure under it is what the reader is here for. */
.calculators .tile__q {
  margin-top:1.125rem;
  max-width:26ch;
  font:500 1.0625rem/1.38 var(--font-display);
  letter-spacing:-.01em;
}
.calculators .tile__figure { margin-top:1.5rem; gap:0.5625rem; }
.calculators .tile__value {
  font:500 clamp(1.875rem,2.4vw,2.5rem)/.9 var(--font-mono);
  letter-spacing:-.06em;
}
.calculators .tile__unit { font:var(--type-caption); color:var(--text-secondary); }
/* The worked case, as a stamp rather than a pill. Same device as the four
   figures below: a rule, then the assumption in mono, pinned to the floor so
   the row of them lines up. The pill needed its own ground to survive the
   tint; there is no tint now, and the ground was the only thing it was for. */
.calculators .tile__case {
  margin-top:auto;
  padding:1.125rem 0 0;
  align-self:stretch;
  border-top:1px solid var(--border-hairline);
  border-radius:0;
  background:none;
  font:var(--type-mono-sm);
  color:var(--text-tertiary);
  text-wrap:pretty;
}
.calculators .tile__go {
  margin-top:0.875rem;
  padding-top:0;
  font:500 0.8125rem/1.2 var(--font-display);
  text-decoration:none;
}
.calculators .tile__go span { display:inline-block; transition:transform var(--dur-micro) var(--ease-out); }
.calculators .tile:hover .tile__go span { transform:translateX(4px); }
@media (max-width:1000px) {
  #home > .calculators { padding:4rem 0; }
}
@media (max-width:640px) {
  #home > .calculators { width:100%; padding:3.5rem var(--gutter); border-radius:0; }
  .calculators .section-head { padding-inline:0.375rem; margin-bottom:2rem; }
  .calculators .section-head h2 { font-size:2.375rem; }
  .calculators .tiles { padding:0.875rem; gap:0.875rem; border-radius:1.25rem; }
  .calculators .tile { padding:1.375rem 1.25rem 1.25rem; border-radius:0.875rem; }
  /* Country and calculator stop sharing a line. "Visa tax & Medicare
     exemption" against "AUSTRALIA" leaves about a character of air at 375px,
     and the pair reads better stacked anyway. */
  .calculators .tile__top { flex-direction:column; align-items:flex-start; gap:0.375rem; }
  .calculators .tile__name { text-align:left; }
}

/* The section is a plain flow container. Its children used to be absolutely
   placed at fixed pixel offsets inside a 1058px shell; that layout is gone, and
   with it the reason for a reserved height. */
.answer-spread { position:relative; width:min(calc(100% - (2 * var(--gutter))),var(--home-content)); margin:1.5rem auto 0; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }

.state-compare { position:relative; width:min(calc(100% - (2 * var(--gutter))),var(--home-content)); margin:1.5rem auto 0; padding:4rem 0 0; border:0; border-radius:0; background:transparent; box-shadow:none; }
.state-note { position:absolute; z-index:8; top:11.875rem; right:0; left:auto; bottom:auto; width:20.625rem; padding:0.8125rem 1rem; border:0; border-radius:var(--radius-sm); background:var(--surface-tint-sage); font:var(--type-caption); line-height:1.45; }

/* Two rows of unequal cards rather than five identical ones. The five
   calculators do not carry equal consequence: stamp duty and the visa
   exemption are the two with real money attached, so they get the wide row.
   The previous rule made all five `span 2` and centred the orphan, which is
   what produced five identical 402px rectangles. */
/* ONE CARD PER ROW, at every width. The six-column grid with two wide rows is
   gone: each of these five asks a different question of a different person,
   and full width gives every one of them the same room and a place for the
   illustration that will sit beside it. */
/* The spans belong to the six-column grid and nowhere else. Below it the grid
   is two columns or one, and a child still asking for `span 3` opened a third
   implicit track -- so the first two tiles hung off the row they were in and
   the two-column layout was never really two columns. */
@media (max-width:1000px) {
  .calculators .tile,
  .calculators .tile:nth-child(1),
  .calculators .tile:nth-child(2) { grid-column:auto; }
}
@media (max-width:800px) { .answer-spread { display:block; padding:5rem var(--gutter); }.state-compare { padding:4.375rem var(--gutter); width:100%; }.state-note { position:relative; inset:auto; width:auto; margin:0.75rem 0 1.5rem; } }

@media (max-width:1000px) {
  #home > .trust,#home > .calculators,#home > .paths,#home > .keep,#home > .problem,#home > .next { padding-top:4.75rem; padding-bottom:4.75rem; }
}
@media (max-width:640px) {
  #home > .trust,#home > .calculators,#home > .paths,#home > .keep,#home > .problem,#home > .next { padding-top:3.75rem; padding-bottom:3.75rem; }
}

/* Shared page frame corrections. */
#home > .next { padding-bottom:4rem; }
/* `#home` is an id, so this already outranks anything a class can say — the
   `!important` was never doing anything. */
#home > section + section { margin-top:var(--section-gap); }
.herowrap { margin-bottom:var(--section-gap); }
@media (max-width:800px) {
  .answer-spread,
  .state-compare {
    width:100%;
    border-right:0;
    border-left:0;
    border-radius:0;
  }
  :root { --section-gap:3.5rem; }
  .herowrap { margin-bottom:var(--section-gap); }
}
@media (max-width:640px) {
  #home > .next { padding-bottom:3rem; }
}

/* Portrait comparison: preserve the complete story, compress only its scale. */
@media (max-width:1100px) and (orientation:portrait) {
  .state-compare { padding:2.125rem var(--gutter) 1.875rem; }
  .state-note { order:2; display:block; width:auto; margin:0 0.875rem 0.875rem; padding:0.75rem 0.875rem; box-shadow:none; }
}

@media (max-width:430px) and (orientation:portrait) {
  .state-compare { padding-inline:var(--gutter); }
}

@media (min-width:600px) and (max-width:1100px) {
  .state-compare { padding:3.5rem var(--gutter) 3rem; }
  .state-note { position:relative; inset:auto; order:4; width:auto; margin:0; padding:0 2rem 0.5rem; border:0; background:transparent; color:var(--text-secondary); text-align:center; font-size:0.75rem; box-shadow:none; }
}

/* Shared landing-page action system. The primary button itself is defined once
   in app.css; only placement is section-specific. */
:where(.hero-new__all,.cmp__go,.next__cta.btn-quiet) {
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:var(--cta-secondary-height);
  padding:0 1.25rem;
  border-radius:var(--radius-pill);
  font:500 0.875rem/1 var(--font-display);
}

@media (max-width:599px) {
  :where(.next__cta.btn-vanilla) {
    width:min(100%,20.625rem);
  }
}

@media (max-width:599px) and (orientation:portrait) {
  .state-note { order:4; margin:0; padding:0 1.25rem 0.5rem; border:0; background:transparent; color:var(--text-secondary); text-align:center; box-shadow:none; }
}

/* Removed: a two-column grid on the SECTION, left over from the absolutely
   positioned layout. `.spread2` inside it is already a two-column grid, so
   between 1000 and 1100 the section split the width, then the content split
   the remainder — leaving a 141px column and a heading broken over eight
   lines. The section is a container; the content lays itself out.

   `@media (min-width:600px) and (max-width:1100px) { .answer-spread { … } }` */
@media (min-width:600px) and (max-width:1100px) {
  .answer-spread { padding:4rem var(--gutter); }
}

/* Local section rules must not restyle primary actions. There is nothing to
   guard against here any more: the button is declared once, in app.css. */
@media (max-width:599px) {
  :where(.next__cta.btn-vanilla) {
    width:min(100%,20.625rem);
    margin-left:auto;
    margin-right:auto;
    align-self:center;
    justify-self:center;
  }
  :where(.hero-new__all,.cmp__go,.next__cta.btn-quiet) {
    width:max-content;
    margin-left:auto;
    margin-right:auto;
    align-self:center;
    justify-self:center;
  }
}

/* =========================================================================
   ONE CONTENT LINE

   Three sections inset their own box by the gutter and then added padding on
   top of it, so their content sat a gutter further in than every other
   section. Above the stacking breakpoint the box is already inset, so the
   padding is zero; below it the box is full-width and the padding does the
   insetting. Asserted last because the breakpoint rules above set it several
   different ways.
========================================================================= */

@media (min-width: 801px) {
  .hero-new,
  #home > .answer-spread,
  #home > .state-compare { padding-inline: 0; }
  .hero-new__copy { margin-left: 0; }
}

/* =========================================================================
   COMPARISON + VISA — rebuilt in the hero's language

   Both sections used to be fixed-height canvases with every child pinned at an
   absolute pixel offset, which is why they ran to 1230px and 1058px and could
   not be added to or re-spaced. They are now two flow layouts sharing the
   hero's grammar: copy on the left, one white card on the right, mono figures,
   an acid strip, a dotted ledger. Both fit inside a viewport.
========================================================================= */

#home > .state-compare,
#home > .answer-spread {
  min-height: 0; height: auto; overflow: visible;
  padding-block: clamp(4rem, 6.6vw, 6rem);
}

.cmp2, .spread2 {
  display: grid; grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
  gap: clamp(2rem, 4vw, 4rem); align-items: center;
}

/* --- left column --------------------------------------------------------- */

.cmp2__copy, .spread2__copy { min-width: 0; }
.cmp2__copy h2, .spread2__copy h2 {
  margin: var(--opener-heading-gap) 0 0; font: 500 clamp(1.875rem, 3.2vw, 2.875rem)/1.04 var(--font-display);
  letter-spacing: -0.04em; text-wrap: pretty;
}
.cmp2__lede, .spread2__lede {
  margin: var(--opener-lede-gap) 0 0; max-width: 42ch;
  font: 400 0.9375rem/1.5 var(--font-sans); color: var(--text-secondary);
}
.cmp2__note {
  margin: 1.125rem 0 0; max-width: 40ch;
  font: 400 0.75rem/1.5 var(--font-sans); color: var(--text-tertiary);
}
.spread2__inputs { margin: 1.375rem 0 0; max-width: 21.25rem; }
.spread2__inputs > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.875rem;
  padding: 0.5625rem 0; border-bottom: 1px dotted var(--raw-ink-12);
}
.spread2__inputs dt { font: 400 0.8125rem/1.3 var(--font-sans); color: var(--text-secondary); }
.spread2__inputs dd { margin: 0; font: 400 0.8125rem/1.3 var(--font-mono); font-variant-numeric: tabular-nums; }

.cmp2__go, .spread2__go {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; margin-top: 1.375rem;
  font: 500 0.875rem/1 var(--font-display); color: var(--raw-ink);
  text-decoration: underline; text-decoration-color: var(--raw-ink-40); text-underline-offset: 5px;
}
.cmp2__go:hover, .spread2__go:hover { text-decoration-color: currentColor; }

/* --- the card, same construction as the hero's ---------------------------- */

.cmp2__card, .spread2__card {
  min-width: 0; padding: 1.625rem 1.75rem 1.5rem;
  background: var(--surface-card); border-radius: 1.25rem;
  box-shadow: 0 1px 2px rgba(var(--cast-rgb),.04), 0 32px 76px -34px rgba(var(--cast-rgb),.24);
}

/* --- comparison control --------------------------------------------------- */

.cmp2__control { padding-bottom: 1.25rem; border-bottom: 1px solid var(--border-hairline); }
.cmp2__price { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.cmp2__price label {
  font: var(--type-label); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--text-tertiary);
}
.cmp2__price output { font: 500 1.375rem/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.cmp2__control .rangex { margin: 0.5rem 0 0; }
.cmp2__buyer { display: flex; gap: 0.5rem; margin: 0.25rem 0 0; padding: 0; border: 0; }
.cmp2__buyer label {
  display: inline-flex; align-items: center; gap: 0.4375rem; min-height: 2.75rem;
  padding: 0 0.75rem; border-radius: var(--radius-pill); cursor: pointer;
  font: 500 0.8125rem/1 var(--font-display); color: var(--text-secondary);
}
.cmp2__buyer label:has(input:checked) { background: var(--surface-sunken); color: var(--text-primary); }
.cmp2__buyer input { accent-color: var(--raw-ink); }

/* --- the two states ------------------------------------------------------- */

.cmp2__panels { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.75rem; padding: 1.25rem 0 0; }
.cmp2__panel { min-width: 0; }
.cmp2__panel + .cmp2__panel { padding-left: 1.75rem; border-left: 1px solid var(--border-hairline); }
.cmp2__panel h3 { margin: 0; font: 500 1.0625rem/1.2 var(--font-display); }
.cmp2__kind, .spread2__kind {
  margin: 0.5rem 0 0; font: var(--type-label); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--text-tertiary);
}
.cmp2__total {
  margin-top: 0.5rem; font: 500 clamp(1.875rem, 2.8vw, 2.5rem)/0.98 var(--font-mono);
  font-variant-numeric: tabular-nums; letter-spacing: -0.05em;
}
.cmp2__rate { margin: 0.4375rem 0 0; font: 400 0.6875rem/1.3 var(--font-mono); color: var(--text-tertiary); }
.cmp2__rows { margin: 1rem 0 0; }
.cmp2__rows > div,
.spread2__rows > div {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 0.875rem;
  padding: 0.5rem 0; border-bottom: 1px dotted var(--raw-ink-12);
}
.cmp2__rows dt, .spread2__rows dt { font: 400 0.75rem/1.35 var(--font-sans); color: var(--text-secondary); }
.cmp2__rows dd, .spread2__rows dd {
  margin: 0; font: 400 0.8125rem/1.3 var(--font-mono);
  font-variant-numeric: tabular-nums; text-align: right;
}
.cmp2__rows dl > div.cmp2__rows-tot, .spread2__rows dl > div.spread2__rows-tot,
.cmp2__rows-tot, .spread2__rows-tot { border-bottom: 0; border-top: 1.5px solid var(--raw-ink); margin-top: 0.25rem; padding-top: 0.625rem; }
.cmp2__rows-tot dt, .spread2__rows-tot dt { color: var(--text-primary); font-weight: 500; }
.cmp2__rows-tot dd, .spread2__rows-tot dd { font-weight: 500; }

/* --- the difference, the section's one accent ----------------------------- */

.cmp2__diff {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
  gap: 0.25rem 1.25rem; margin-top: 1.375rem; padding: 1rem 1.25rem;
  /* Iris. A figure being explained is information, not a decision. */
  border-radius: var(--radius-sm); background: var(--iris-wash); border: 1px solid var(--iris-line);
}
.cmp2__diffnum { font: 500 1.875rem/1 var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.04em; }
.cmp2__difflab { font: 500 0.6875rem/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: .07em; }
.cmp2__diff p { grid-column: 2; margin: 0; font: 400 0.75rem/1.45 var(--font-sans); }

/* --- visa card ------------------------------------------------------------ */

.spread2__top { display: flex; align-items: center; justify-content: space-between; gap: 0.875rem; }
.spread2__pill {
  display: inline-flex; align-items: center; gap: 0.4375rem; padding: 0.375rem 0.75rem;
  border-radius: var(--radius-pill); border: 1px solid var(--border-hairline);
  font: 500 0.625rem/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-secondary); white-space: nowrap;
}
.spread2__dot { width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--raw-ink); }
.spread2__kind { margin: 0; }
.spread2__fig {
  margin-top: 0.875rem; font: 500 clamp(2.75rem, 4.4vw, 4rem)/0.95 var(--font-mono);
  font-variant-numeric: tabular-nums; letter-spacing: -0.055em;
}
.spread2__unit { margin-top: 0.5rem; font: 500 0.6875rem/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--text-secondary); }
.spread2__strip {
  margin: 1.125rem 0 0; padding: 0.6875rem 0.875rem; border-radius: var(--radius-xs);
  /* Sprout: this strip reports a verified state, the same as the hero card. */
  background: var(--sprout-wash); border: 1px solid var(--sprout-line);
  font: 500 0.75rem/1.3 var(--font-display);
}
.spread2__sub {
  margin: 1.125rem 0 0; padding-top: 0.75rem; border-top: 1px solid var(--border-hairline);
  font: var(--type-label); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--text-tertiary);
}
.spread2__rows { margin: 0.25rem 0 0; }
.spread2__note { margin: 0.875rem 0 0; font: 400 0.6875rem/1.5 var(--font-sans); color: var(--text-tertiary); }

/* --- stacked ------------------------------------------------------------- */

/* Two columns need room for both. At 1024 — an iPad in landscape, and the most
   common tablet width there is — the copy column was 354px against a 577px
   card, which reads as a squeezed desktop rather than a tablet layout. These
   stack until 1100 and are comfortable above it. */
@media (max-width: 1100px) {
  .cmp2, .spread2 { grid-template-columns: 1fr; gap: 1.75rem; }
  .cmp2__panels { gap: 0; }
  .cmp2__panel + .cmp2__panel { margin-top: 1.125rem; padding: 1.125rem 0 0; border-left: 0; border-top: 1px solid var(--border-hairline); }
  .cmp2__panels { grid-template-columns: 1fr; }
  .cmp2__card, .spread2__card { padding: 1.375rem 1.25rem 1.25rem; }
  .cmp2__diff { grid-template-columns: 1fr; gap: 0.375rem; }
  .cmp2__diff p { grid-column: 1; }
  /* Once the copy sits above the card rather than beside it, it is a section
     opener, not a column — same treatment as .proof-docket__copy: centred, and
     held to a reading measure so the line length does not follow the viewport. */
  .cmp2__copy { max-width: 40.625rem; margin-inline: auto; text-align: center; }
  .cmp2__copy h2 { max-width: 26.875rem; margin-inline: auto; text-wrap: balance; }
  .cmp2__lede, .cmp2__note { margin-inline: auto; }
  .spread2__copy { max-width: 40.625rem; margin-inline: auto; text-align: center; }
  .spread2__copy h2 { max-width: 26.875rem; margin-inline: auto; text-wrap: balance; }
  .spread2__lede, .spread2__inputs { margin-inline: auto; }
}

/* Tablet: the heading and copy stack on top, but the two states stay side by
   side. Stacking those as well puts most of a viewport between the two numbers
   the section exists to compare, and a comparison you cannot see at once is not
   a comparison. Below 600px there is no honest way to set two of these columns,
   so there they do stack. */
@media (min-width:600px) and (max-width:1100px) {
  /* The heading opens the section across the full width; below it the scenario
     that produced the figure sits beside the figure. `display:contents` lets the
     copy block's children join the section grid directly — the alternative was
     splitting one authored block into two in the markup, which would make the
     desktop layout read worse to serve the tablet one. */
  .spread2 {
    grid-template-columns: minmax(0,0.85fr) minmax(0,1.15fr);
    /* Seven rows: the eyebrow, the heading, then an elastic spacer, the three
       rows of the left column, then a second elastic spacer. The card spans
       everything from the third row down, so the two equal spacers centre the
       left column against it however tall the card happens to be — no fixed
       offset to keep in step. Sizing the left rows to content is what stops the
       browser sharing the card's height across them and floating the link 200px
       below the list it belongs to. */
    grid-template-rows: auto auto 1fr min-content min-content min-content 1fr;
    column-gap: 1.75rem; row-gap: 0; align-items: start;
  }
  .spread2__copy { display: contents; }
  .spread2__copy .eyebrow, .spread2__copy h2 { grid-column: 1 / -1; }
  /* Centred by PLACEMENT, not by text-align. `display: contents` promotes the
     eyebrow to a grid item, which blockifies its `inline-flex` to `flex`: the
     box then stretches the full column and packs its own content at the start,
     so it sat hard left under a centred heading while still computing
     `text-align: center`. `justify-self` shrinks the item back to its content
     and centres the item itself, which is the thing that actually needs to
     move. The heading is a block and centres from the inherited text-align. */
  .spread2__copy .eyebrow { justify-self: center; }
  /* The lede heads the left column rather than the section: it is what the
     scenario below it is explaining, and spanning it left that column three
     short rows against a 630px card. */
  .spread2__lede { grid-column: 1; grid-row: 4; margin: 0; max-width: none; text-align: left; }
  .spread2__inputs { grid-column: 1; grid-row: 5; margin: 1.375rem 0 0; max-width: none; }
  .spread2__go { grid-column: 1; grid-row: 6; margin-top: 1.125rem; justify-self: start; align-self: start; }
  /* The gap under the heading belongs to the HEADING here, not to the card: a
     top margin on the card pushed its box below the rows the spacers centre
     against, so the left column came out 33px low. */
  .spread2__copy h2 { margin-bottom: var(--opener-lede-gap); }
  .spread2__card { grid-column: 2; grid-row: 3 / -1; margin-top: 0; }

  .cmp2__panels { grid-template-columns: 1fr 1fr; gap: 0 1.5rem; }
  .cmp2__panel + .cmp2__panel {
    margin-top: 0; padding: 0 0 0 1.5rem;
    border-top: 0; border-left: 1px solid var(--border-hairline);
  }
}

@media (max-width: 560px) {
  /* The label is context, the button is the job — the label goes first, and
     the pill stays a pill rather than stretching edge to edge. */
  .ctabar__label { display: none; }
  .ctabar__inner { justify-content: center; padding: 0.5rem; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .ctabar { transition: visibility 0s; }
  .ctabar.is-up { transition: visibility 0s; }
}

/* --- Four things people leave behind -------------------------------------
   Built in the proof docket's language, because the docket is the section on
   this page that works and these four facts are the same KIND of thing: a
   figure, a label, and one sentence of condition.

   What the docket does and this did not:

     A tray. The cards sit in a padded, softly-framed box rather than floating
     loose on the section, so four things read as one object.
     Two by two, not four across. Four columns at 240px each is a newspaper
     column width for a claim that runs three lines; two columns give the
     sentences a measure.
     Room inside. 25px of padding, and 28px between the figure and the copy
     under it.
     Small copy. The condition and the assumption are the smallest type on the
     card, which is what lets the figure carry it.

   A figure, what it is, who it applies to, and the assumption it was worked
   out on. The fourth line is not decoration: every one of these is
   conditional, and a figure without its condition is a claim we cannot
   support. */
.leftbehind {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem; margin-top: 2.75rem; padding: 1.25rem;
  border-radius: 1.5rem; background: rgba(var(--paper-rgb), .44);
  box-shadow: inset 0 0 0 1px rgba(var(--paper-rgb), .72);
  backdrop-filter: blur(10px);
  text-align: left;
}
.leftbehind__item {
  display: flex; flex-direction: column; align-items: start;
  padding: 1.5625rem 1.5rem 1.375rem; border-radius: 1.0625rem;
  background: rgba(var(--paper-rgb), .78);
  box-shadow: 0 9px 26px rgba(var(--cast-deep-rgb), .045);
  text-decoration: none; color: inherit;
  transition: transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out);
}
.leftbehind__item:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(var(--cast-deep-rgb), .10);
}
/* No lime here, deliberately. The docket above already spends it on this
   page's own claim, and lime means "the figure the page exists to produce" —
   these four are illustrations of what the calculators find, not the homepage's
   product. Two lime cards in one view is no accent at all, and the larger of
   the two wins, which put the emphasis on the wrong one.

   A 2x2 grid gets its entry point from reading order instead: top-left, which
   is where a reader starts anyway. These four are peers and the section says
   so. */
.leftbehind__n {
  color: var(--raw-ink);
  font: 500 clamp(2rem, 3vw, 2.875rem)/.9 var(--font-mono);
  letter-spacing: -.07em; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.leftbehind__what {
  /* The figure above is set on a 0.9 line box, which crops tight to the
     glyphs -- so the optical gap runs about 4px shy of whatever is declared
     here. Set for what it looks like, not what it measures. */
  margin-top: 1.375rem; max-width: 24ch;
  font: 500 0.9375rem/1.45 var(--font-display); text-wrap: pretty;
}
.leftbehind__who {
  margin-top: 0.75rem; max-width: 30ch;
  /* A floor under the stamp. `margin-top: auto` on the stamp fills whatever is
     left, which on the tallest card is plenty and on the shortest is nothing —
     so the rule crowded the condition on one card and not on its neighbour. */
  margin-bottom: 1.5rem;
  font: var(--type-caption); color: var(--text-secondary); text-wrap: pretty;
}
/* The assumption. Pinned so the four line up across the tray — a row of
   stamps, which is the use the pin is for. */
.leftbehind__on {
  margin-top: auto; padding-top: 1.125rem; align-self: stretch;
  border-top: 1px solid var(--border-hairline);
  font: var(--type-mono-sm); color: var(--text-tertiary); text-wrap: pretty;
}

@media (max-width: 40rem) {
  .leftbehind { grid-template-columns: 1fr; padding: 0.875rem; gap: 0.875rem; border-radius: 1.25rem; }
  .leftbehind__item { padding: 1.25rem 1.125rem 1.125rem; border-radius: 0.875rem; }
}

@media (max-width: 900px) {
  .indictment { margin-top: 1.5rem; padding: 1.25rem 1.375rem; }
}

/* The floating bar is fixed, so whatever is under it at rest is not merely
   below the fold — it is hidden. Measured, it covered the hero calculator's
   last two ledger rows by 51–70px at every viewport. Reserving its own height
   under the page means a reader can always scroll the thing it overlaps into
   the clear. */
body:has(.ctabar.is-up) .page { padding-bottom: 6.5rem; }
@media (max-width: 560px) {
  body:has(.ctabar.is-up) .page { padding-bottom: 5.5rem; }
}

/* --- Phone: the two states, side by side in the fold -----------------------
   Stacked, each panel carried a four-row derivation under its total, and the
   two totals ended up a screen apart — which defeats a section whose whole job
   is letting you see them at once. The rows go on a phone. Nothing is lost that
   is not one tap away: the totals, the percentages and the difference with its
   reason all stay, and the full working is on the stamp-duty page the section
   sends you to. */
@media (max-width: 599px) {
  .cmp2__rows { display: none; }
  .cmp2__panel + .cmp2__panel { margin-top: 0.875rem; padding-top: 0.875rem; }
  .cmp2__rate { margin-top: 0.375rem; }
}

/* A date is not a metric. Set at the metric size with `white-space: nowrap`,
   "23 Aug 2026" is eleven characters in a cell drawn for "27 / 29" — it pushed
   the page 3px wider than the phone and put a horizontal scrollbar on the whole
   document, which in turn stretched the fixed action bar to match. */
.proof-docket__fact--date dt strong {
  font-size: clamp(1.125rem, 2.4vw, 1.5rem);
  letter-spacing: -.03em;
  white-space: normal;
}