:root {
  --paper: #FFFFFF;
  --wash: #F2F5F8;
  --ink: #101720;
  --muted: #5C6673;
  --navy: #0E2A47;
  --mark: #FFD84D;
  --rule: #DCE1E7;
  --foot-ink: #8FA3BC;
  --display: "Libre Franklin", -apple-system, "Segoe UI", sans-serif;
  --body: "Source Serif 4", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --gutter: 24px;
  --measure: 980px;
  --break: 980px;
}

*,
*::before,
*::after {
  box-sizing: border-box
}

html {
  -webkit-text-size-adjust: 100%
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 22px;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}

img {
  max-width: 100%;
  display: block;
  height: auto
}

a {
  color: inherit
}

/* ---------- layout ---------- */
.wrap {
  width: 100%;
  max-width: calc(var(--measure) + var(--gutter)*2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.breakout {
  width: 100%;
  max-width: calc(var(--break) + var(--gutter)*2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sec {
  margin-block: 38px
}

.sec-tight {
  margin-block: 24px
}

/* Module interiors inherit the gutter so nothing is double-padded. */
.receipt__head,
.bands,
.receipt__out,
.data,
.gate,
.picker {
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ---------- masthead ---------- */
.flagbar {
  background: var(--navy);
  color: #fff
}

.flagbar__in {
  max-width: calc(var(--break) + var(--gutter)*2);
  margin-inline: auto;
  padding: 9px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.flag {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  background: var(--mark);
  color: var(--navy);
  padding: 3px 9px;
  border-radius: 2px;
}

.flagbar__phone {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
  text-decoration: none;
  white-space: nowrap;
}

.masthead {
  border-bottom: 1px solid var(--rule)
}

.masthead__in {
  max-width: calc(var(--break) + var(--gutter)*2);
  margin-inline: auto;
  padding: 16px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.masthead__logo {
  height: 60px;
  width: auto
}

.masthead__sec {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- article head ---------- */
.eyebrow {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--navy);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.eyebrow span {
  color: var(--muted);
  font-weight: 400
}

.eyebrow i {
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--rule);
  font-style: normal
}

h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(30px, 6.4vw, 58px);
  line-height: 1.06;
  letter-spacing: -.022em;
  margin: 0 0 18px;
  text-wrap: balance;
}

.dek {
  font-size: clamp(19px, 2.4vw, 25px);
  line-height: 1.48;
  color: var(--muted);
  margin: 0 0 26px;
}

.byline {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px 0;
  border-block: 1px solid var(--rule);
}

.byline img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  background: var(--wash)
}

.byline__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3
}

.byline__meta {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted);
  letter-spacing: .03em;
  margin-top: 2px
}

/* The hero is its own container rather than a .wrap, because
   .wrap sets width:100% and a negative margin cannot widen a
   fixed-width box -- it only shifts it, which pushed the image
   off-screen left and left a gap on the right. On phones the
   padding is simply removed instead, so the image fills the
   viewport with no negative margins and no overflow. */
.hero {
  width: 100%;
  max-width: calc(var(--measure) + var(--gutter)*2);
  margin: 26px auto;
  padding-inline: var(--gutter);
}

.hero picture {
  display: block
}

.hero img {
  width: 100%;
  border-radius: 3px
}

/* Caption sits at ~62% of body size. Mono runs visually smaller
   than the serif at the same nominal size, so it needs the extra
   over a conventional caption ratio. */
.caption {
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
  margin-top: 11px;
  padding-left: 13px;
  border-left: 3px solid var(--mark);
}

/* ---------- body copy ---------- */
p {
  margin: 0 0 20px
}

.lede {
  font-size: 24px;
  line-height: 1.52
}

.lede::first-letter {
  font-family: var(--display);
  font-weight: 800;
  font-size: 3.05em;
  float: left;
  line-height: .82;
  margin: 6px 9px 0 0;
  color: var(--navy);
}

h2 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(23px, 3.6vw, 34px);
  line-height: 1.16;
  letter-spacing: -.016em;
  margin: 40px 0 16px;
  text-wrap: balance;
}

h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.3;
  margin: 30px 0 10px;
}

strong,
b {
  font-weight: 700
}

/* Highlighter. Sits low so it runs under the letterforms rather
   than through the x-height, and is translucent so type stays
   crisp on top of it. box-decoration-break keeps it continuous
   when a highlighted phrase wraps across lines. */
.mark {
  background-color: var(--mark);
  padding: 2px 4px;
  font-weight: 600;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Yellow rule beneath a phrase. Deliberately thicker than the
   .tlink underline and left in body ink, so it doesn't read as
   something clickable. */
.uline {
  background-image: linear-gradient(180deg, transparent 82%, var(--mark) 82%, var(--mark) 97%, transparent 97%);
  font-weight: 600;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Key figures. Display face against serif body makes a number read
   as data rather than prose; nowrap stops "$1,618,786" breaking. */
.fig {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.02em;
  letter-spacing: -.012em;
  color: var(--navy);
  white-space: nowrap;
}

.fig--big {
  font-size: 1.14em;
  letter-spacing: -.02em
}

/* .fig defaults to navy, which is invisible on the navy panels.
   Recolour it wherever it sits on a dark surface. */
.gate .fig,
.receipt .fig {
  color: var(--mark)
}

/* Inline text links to the quiz. Navy with a yellow underline that
   grows into a full highlight on hover, so it reads as part of the
   article rather than a button dropped into a paragraph. */
.tlink {
  color: var(--navy);
  font-weight: 600;
  text-decoration: none;
  background-image: linear-gradient(180deg, transparent 90%, var(--mark) 90%, var(--mark) 97%, transparent 97%);
  transition: background-image .16s;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.tlink:hover,
.tlink:focus-visible {
  background-image: none;
  background-color: var(--mark);
  padding: 2px 4px;
  margin: 0 -4px;
}

.tlink:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px
}

/* ---------- signature module: the ATO receipt ---------- */
.receipt {
  background: var(--navy);
  color: #fff;
  border-radius: 4px;
  overflow: hidden
}

.receipt__head {
  padding-block: 26px 0
}

.receipt__kicker {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mark);
  margin-bottom: 9px;
}

.receipt__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(21px, 3.4vw, 26px);
  line-height: 1.16;
  letter-spacing: -.015em;
  margin: 0 0 4px;
}

.receipt__sub {
  font-family: var(--mono);
  font-size: 12px;
  color: #9FB2C8;
  line-height: 1.5;
  margin: 0 0 18px
}

.bands {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding-block: 0 22px
}

.band {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  background: transparent;
  color: #CBD8E6;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 2px;
  padding: 9px 13px;
  cursor: pointer;
  transition: background .14s, color .14s, border-color .14s;
}

.band:hover {
  border-color: var(--mark);
  color: #fff
}

.band[aria-pressed="true"] {
  background: var(--mark);
  color: var(--navy);
  border-color: var(--mark);
  font-weight: 600
}

.band:focus-visible {
  outline: 2px solid var(--mark);
  outline-offset: 2px
}

.receipt__out {
  border-top: 1px solid rgba(255, 255, 255, .14);
  padding-block: 22px 26px
}

.rows {
  display: grid;
  gap: 0;
  margin-bottom: 24px
}

.row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px dotted rgba(255, 255, 255, .2);
}

.row:last-child {
  border-bottom: 0
}

.row__k {
  font-family: var(--mono);
  font-size: 12.5px;
  color: #9FB2C8;
  letter-spacing: .02em
}

.row__v {
  font-family: var(--mono);
  font-weight: 600;
  font-size: clamp(17px, 3.4vw, 21px);
  letter-spacing: -.01em
}

.row--big .row__v {
  font-size: clamp(23px, 5vw, 32px);
  color: var(--mark)
}

.calbar__label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #9FB2C8;
  margin-bottom: 10px;
}

/* One unbroken track, split into two regions: what the ATO takes
   and what is left. Each label is centred inside its own region,
   so both move as the split changes. */
.calbar {
  display: flex;
  height: 40px;
  border-radius: 3px;
  overflow: hidden;
  background: rgba(255, 255, 255, .13);
}

.calbar__tax,
.calbar__keep {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .14em;
  white-space: nowrap;
}

.calbar__tax {
  flex: none;
  background: var(--mark);
  color: var(--navy);
  transition: width .6s cubic-bezier(.22, 1, .36, 1);
}

.calbar__keep {
  flex: 1;
  color: #CBD8E6
}

.calbar__note {
  font-family: var(--mono);
  font-size: 12px;
  color: #CBD8E6;
  margin-top: 12px;
  line-height: 1.5;
}

.calbar__note b {
  color: var(--mark);
  font-weight: 600
}

/* ---------- pull quote ---------- */
.pull {
  border-left: 4px solid var(--mark);
  padding: 4px 0 4px 22px;
  margin: 34px 0;
}

.pull p {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(20px, 3.2vw, 26px);
  line-height: 1.26;
  letter-spacing: -.014em;
  margin: 0;
}

/* ---------- data card ---------- */
.data {
  background: var(--wash);
  border-radius: 4px;
  padding-block: 26px
}

.data__kicker {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 14px;
}

.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 18px;
  margin: 0 0 4px
}

/* Single-stat variant: one number carrying one claim. */
.data--single {
  text-align: center
}

.stat__n--big {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(42px, 8vw, 66px);
  line-height: .98;
  letter-spacing: -.032em;
  color: var(--navy);
  margin-bottom: 14px;
}

.stat__lead {
  font-size: clamp(19px, 2.4vw, 23px);
  line-height: 1.42;
  max-width: 34ch;
  margin: 0 auto 4px;
}

.data--single .source {
  margin-top: 18px
}

.stat__n {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(27px, 5.4vw, 38px);
  line-height: 1;
  letter-spacing: -.026em;
  color: var(--navy);
}

.stat__l {
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--muted);
  margin-top: 7px
}

.source {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  margin: 18px 0 0;
  line-height: 1.5
}


/* ---------- qualification checklist ---------- */
.gate {
  background: var(--navy);
  color: #fff;
  border-radius: 4px;
  padding-block: 28px
}

.gate h2 {
  color: #fff;
  margin: 0 0 8px;
  font-size: clamp(22px, 3.6vw, 29px)
}

.gate__sub {
  font-family: var(--mono);
  font-size: 12.5px;
  color: #9FB2C8;
  margin: 0 0 22px;
  line-height: 1.55
}

.crit {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px
}

.crit li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 15px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .13)
}

.crit li:last-child {
  border-bottom: 0
}

.crit__n {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--navy);
  background: var(--mark);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 3px;
}

.crit__t {
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3
}

.crit__d {
  font-family: var(--mono);
  font-size: 12.5px;
  color: #9FB2C8;
  line-height: 1.5;
  margin-top: 5px
}

/* ---------- state selector ---------- */
.picker {
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding-block: 28px;
  text-align: center
}

.picker__kicker {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

.picker h2 {
  margin: 0 0 8px;
  font-size: clamp(21px, 3.4vw, 28px)
}

.picker__sub {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--muted);
  margin: 0 0 22px;
  line-height: 1.55
}

.states {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
  max-width: 460px;
  margin: 0 auto 20px;
}

.state {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .03em;
  text-decoration: none;
  color: var(--navy);
  background: var(--wash);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 15px 4px;
  transition: background .14s, color .14s, border-color .14s, transform .14s;
}

.state:hover,
.state:focus-visible {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
  transform: translateY(-1px)
}

.state:focus-visible {
  outline: 2px solid var(--mark);
  outline-offset: 2px
}

.picker__note {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted);
  margin: 0;
  line-height: 1.55
}

/* ---------- buttons ---------- */
/* The one place the flat editorial design breaks. Two-layer
   shadow: a hard 2px edge underneath reads as a physical button
   face, a soft diffuse layer lifts it off the page. Press state
   drops it so the click feels mechanical. */
.btn {
  display: inline-block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: .005em;
  text-decoration: none;
  text-align: center;
  background: var(--mark);
  color: var(--navy);
  padding: 17px 30px;
  border-radius: 4px;
  line-height: 1.25;
  box-shadow: 0 2px 0 rgba(14, 42, 71, .32), 0 6px 16px rgba(14, 42, 71, .16);
  transition: transform .13s ease, box-shadow .13s ease;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 0 rgba(14, 42, 71, .32), 0 12px 26px rgba(14, 42, 71, .22);
}

.btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 rgba(14, 42, 71, .32), 0 3px 8px rgba(14, 42, 71, .14);
}

.btn:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px
}

.btn--wide {
  display: block;
  width: 100%
}

.btn__sub {
  display: block;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 11.5px;
  letter-spacing: .03em;
  opacity: .72;
  margin-top: 5px;
}

/* ---------- FAQ ---------- */
.faq {
  border-top: 1px solid var(--rule)
}

.faq details {
  border-bottom: 1px solid var(--rule)
}

.faq summary {
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.35;
  padding: 19px 34px 19px 0;
  cursor: pointer;
  list-style: none;
  position: relative;
}

.faq summary::-webkit-details-marker {
  display: none
}

.faq summary::after {
  content: "+";
  position: absolute;
  right: 2px;
  top: 17px;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 22px;
  color: var(--navy);
  transition: transform .18s;
}

.faq details[open] summary::after {
  transform: rotate(45deg)
}

.faq summary:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px
}

.faq__a {
  padding: 0 0 20px
}

.faq__a p {
  font-size: 17.5px;
  margin-bottom: 14px
}

.faq__a p:last-child {
  margin-bottom: 0
}

/* ---------- sticky CTA ---------- */
.sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: var(--navy);
  padding: 11px 16px calc(11px + env(safe-area-inset-bottom));
  transform: translateY(105%);
  transition: transform .28s cubic-bezier(.22, 1, .36, 1);
  box-shadow: 0 -3px 22px rgba(16, 23, 32, .16);
}

.sticky.on {
  transform: translateY(0)
}

.sticky__in {
  max-width: calc(var(--break) + var(--gutter)*2);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: 14px
}

.sticky__txt {
  flex: 1;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.4;
  color: #CBD8E6;
}

.sticky__txt b {
  display: block;
  font-family: var(--display);
  font-size: 14px;
  color: #fff;
  font-weight: 700;
  margin-bottom: 2px
}

.sticky .btn {
  padding: 12px 20px;
  font-size: 15px;
  flex: none;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .28)
}

.sticky .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 0 rgba(0, 0, 0, .28)
}

/* ---------- footer ---------- */
/* Matched to the quiz footer so the click-through lands on the same
   treatment: navy panel, left aligned, 10px/1.4 fine print.
   Everything inside is therefore dark-surface coloured.

   Bottom padding is the ONE value that stays larger than the quiz's
   (30px). It clears the sticky CTA in the edge case where a tall
   viewport shows the footer before the 94% scroll threshold hides
   the bar. The quiz has no sticky bar and does not need it. */
.foot {
  background: var(--navy);
  color: var(--foot-ink);
  margin-top: 14px;
  padding: 26px 0 44px
}

/* Left aligned to the page measure, matching the quiz. This page
   carries one extra paragraph -- the credit licensee and commission
   disclosure -- which the quiz devolves to its Privacy Policy and
   Terms. It takes the same type treatment as the rest. */
.foot__in {
  max-width: calc(var(--measure) + var(--gutter)*2);
  margin-inline: auto;
  padding-inline: var(--gutter);
  text-align: left;
}

/* ONE colour for every word down here, matching the quiz. The
   brand line, the bold leads, the links and the body copy all print
   in --foot-ink. The footer is compliance text, not a destination:
   white brand, white bold leads, pale-blue links and grey-blue body
   made four tones in a block of 10px type and pulled the eye down
   off the call to action. Emphasis is carried by weight and size,
   links by their underline. Do not reintroduce a highlight colour
   here, :hover included -- and if you change this, change it in the
   quiet footer of the quiz too. */
.foot p {
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.4;
  color: var(--foot-ink);
  margin: 0 0 10px
}

.foot p strong {
  color: var(--foot-ink);
  font-weight: 600
}

.foot a {
  color: var(--foot-ink);
  text-underline-offset: 2px
}

/* Hover feedback without a colour change. */
.foot a:hover {
  text-decoration-thickness: 2px
}

.foot__brand {
  font-family: var(--display);
  font-weight: 700;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--foot-ink);
  margin-bottom: 9px
}

/* ═══════════ RESPONSIVE LADDER ═══════════
   Text runs near edge-to-edge on phones to maximise characters
   per line, then the measure takes over on tablet and desktop.
   Approx characters per line of body text:
     320px → 32   375px → 38   768px → 60   1024px+ → 62
   ═════════════════════════════════════════ */

/* ---- large tablet / small laptop ---- */
@media (max-width:900px) {
  :root {
    --gutter: 22px
  }
}

/* ---- tablet ---- */
@media (max-width:700px) {
  :root {
    --gutter: 18px
  }

  body {
    font-size: 19px
  }

  .sec {
    margin-block: 30px
  }
}

/* ---- phone: edge-to-edge ---- */
@media (max-width:560px) {
  :root {
    --gutter: 14px
  }

  body {
    font-size: 18px;
    line-height: 1.58
  }

  .lede {
    font-size: 20px
  }

  .sec {
    margin-block: 26px
  }

  p {
    margin-bottom: 17px
  }

  h2 {
    margin: 32px 0 13px
  }

  /* Modules go full-bleed — no side gutter, no rounded corners,
     no vertical borders. Mirrors how mobile news sites handle
     inline cards and buys back ~28px of internal width. */
  .breakout {
    padding-inline: 0;
    max-width: 100%
  }

  .receipt,
  .data,
  .gate,
  .picker {
    border-radius: 0
  }

  .data,
  .picker {
    border-left: 0;
    border-right: 0
  }

  .hero {
    padding-inline: 0
  }

  .hero img {
    border-radius: 0
  }

  .hero .caption {
    margin-inline: var(--gutter)
  }

  /* Mono reads smaller than the serif at the same nominal size,
     so the caption needs to go UP on phones, not down with the
     body text. Colour and the yellow rule carry the hierarchy. */
  .caption {
    font-size: 15px;
    line-height: 1.5
  }

  .states {
    grid-template-columns: repeat(4, 1fr);
    gap: 7px
  }

  .state {
    font-size: 14px;
    padding: 14px 2px
  }

  .stats {
    grid-template-columns: 1fr 1fr;
    gap: 20px 14px
  }

  .byline img {
    width: 42px;
    height: 42px
  }

  .sticky__txt {
    font-size: 0;
    line-height: 0
  }

  .sticky__txt b {
    font-size: 13px;
    line-height: 1.3
  }
}

/* ---- small phone ---- */
@media (max-width:380px) {
  :root {
    --gutter: 12px
  }

  /* "TAX MAN" overruns its fill at the lowest band on a 320px
     screen, so tighten the label rather than let it spill. */
  .calbar__tax,
  .calbar__keep {
    font-size: 9.5px;
    letter-spacing: .06em
  }

  body {
    font-size: 17.5px
  }

  .stats {
    grid-template-columns: 1fr
  }

  .state {
    font-size: 13px
  }

  .btn {
    font-size: 16px;
    padding: 16px 18px
  }
}

@media (prefers-reduced-motion:reduce) {
  * {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important
  }
}

/* ═══════════════════════════════════════════
   LEGAL PAGES — privacy.php, terms-conditions.php
   Same type stack and palette as the advertorial,
   dialled down. These are utility pages: no hero,
   no sticky CTA, no advertorial flag.
   ═══════════════════════════════════════════ */

.utilbar {
  background: var(--navy);
  color: #fff
}

.utilbar__in {
  max-width: calc(var(--break) + var(--gutter)*2);
  margin-inline: auto;
  padding: 9px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.utilbar a {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  text-decoration: none;
  color: #CBD8E6;
}

.utilbar a:hover {
  color: var(--mark)
}

.utilbar__back::before {
  content: "\2190";
  margin-right: 6px
}

.legal {
  padding-block: 40px 20px
}

.legal__kicker {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 14px;
}

.legal h1 {
  font-size: clamp(28px, 5.4vw, 42px);
  margin-bottom: 12px;
}

.legal__meta {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  padding-bottom: 22px;
  border-bottom: 1px solid var(--rule);
  line-height: 1.6;
}

/* jump-link index */
.toc {
  background: var(--wash);
  border-radius: 4px;
  padding: 22px var(--gutter);
  margin-block: 30px
}

.toc__t {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}

.toc ol {
  margin: 0;
  padding-left: 0;
  list-style: none;
  counter-reset: toc
}

.toc li {
  counter-increment: toc;
  padding: 5px 0
}

.toc a {
  font-family: var(--display);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  color: var(--navy);
}

.toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--mono);
  font-weight: 400;
  font-size: 12px;
  color: var(--muted);
  margin-right: 11px;
}

.toc a:hover {
  background: linear-gradient(180deg, transparent 60%, var(--mark) 60%)
}

/* body */
.legal__body {
  padding-bottom: 20px
}

.legal__body section {
  scroll-margin-top: 20px;
  padding-top: 34px;
}

.legal__body h2 {
  font-size: clamp(21px, 3.4vw, 27px);
  margin: 0 0 14px;
  padding-left: 14px;
  border-left: 4px solid var(--mark);
}

.legal__body h3 {
  font-size: 17.5px
}

.legal__body p,
.legal__body li {
  font-size: 17.5px;
  line-height: 1.6
}

.legal__body ul,
.legal__body ol {
  padding-left: 22px;
  margin: 0 0 20px
}

.legal__body li {
  margin-bottom: 9px
}

.legal__body a {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 2px
}

/* contact / complaints callout */
.legal__note {
  border: 1px solid var(--rule);
  border-left: 4px solid var(--navy);
  border-radius: 3px;
  padding: 22px var(--gutter);
  margin-block: 30px;
}

.legal__note p:last-child {
  margin-bottom: 0
}

.legal__note p {
  font-size: 16.5px
}

/* editor's insertion marker — DELETE once copy is in */
.todo {
  background: #FFF6D6;
  border: 1px dashed #C9A227;
  border-radius: 3px;
  padding: 16px 18px;
  margin-bottom: 20px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  color: #6B5410;
}

.todo b {
  display: block;
  font-weight: 600;
  margin-bottom: 5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 11px
}

.legalpage .foot {
  margin-top: 34px;
  padding-bottom: 34px
}
/*  */
/* ═════════════════════════════════════════════
   LEGAL / COMPLIANCE FOOTER
═════════════════════════════════════════════ */

.legal-strip {
  width: 100%;
  background: #0e2f4d;
  color: #a9cce7;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.legal-strip__inner {
  width: calc(100% - 48px);
  max-width: 1040px;
  margin: 0 auto;

  padding: 34px 0 46px;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: 12.5px;
  line-height: 1.62;
  font-weight: 400;

  letter-spacing: 0.01em;
}

.legal-strip__inner p {
  margin: 0 0 13px;
}

.legal-strip__company {
  color: #c1ddef;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 600;
}

.legal-strip__line {
  color: #a9cce7;
}

.legal-strip__line strong {
  color: #d0e5f3;
  font-weight: 600;
}

.legal-strip a {
  color: #b8d8ed;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;

  transition:
    color 0.15s ease,
    opacity 0.15s ease;
}

.legal-strip a:hover {
  color: #ffffff;
}

.legal-strip__bottom {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  margin-top: 4px !important;
  margin-bottom: 0 !important;

  color: #b1d1e7;
}

.legal-strip__sep {
  display: inline-block;
  margin: 0 9px;
  opacity: 0.55;
}


/* ══ TABLET ══ */

@media (max-width: 900px) {

  .legal-strip__inner {
    width: calc(100% - 40px);
    padding: 30px 0 38px;

    font-size: 12px;
    line-height: 1.62;
  }

  .legal-strip__company {
    font-size: 12.5px;
  }
}


/* ══ MOBILE ══ */

@media (max-width: 600px) {

  .legal-strip__inner {
    width: calc(100% - 32px);
    padding: 27px 0 32px;

    font-size: 11.5px;
    line-height: 1.68;
  }

  .legal-strip__inner p {
    margin-bottom: 14px;
  }

  .legal-strip__company {
    font-size: 12px;
    line-height: 1.55;
  }

  .legal-strip__bottom {
    display: block;
    line-height: 1.8;
  }

  .legal-strip__sep {
    margin: 0 5px;
  }
}