@import url('/assets/fonts.css');

/* ============================================================================
   Cover Check NZ — "Deep ink & butter light"
   Palette lifted from bufferinsurance.co.nz so the two sites read as family:
     ink   #1B222B   butter #F7D775   lilac #D6C6F4   pale #F0E8FF   plum #8261BF
   Type: Poppins (Buffer's face) for UI + body, Fraunces for editorial display.
   ========================================================================== */

:root {
  /* --- brand ------------------------------------------------------------ */
  --ink:        #1B222B;
  --ink-deep:   #141920;
  --ink-soft:   #2A333F;
  --butter:     #F7D775;
  --butter-lo:  #F3C64B;
  --butter-hi:  #FCEDBB;
  --lilac:      #D6C6F4;
  --lilac-pale: #F0E8FF;
  --plum:       #8261BF;
  --plum-deep:  #6B4BA6;

  /* --- surfaces --------------------------------------------------------- */
  --paper:      #FBFAF7;   /* the reading surface: warm, never clinical white */
  --paper-2:    #F4F2EC;
  --white:      #FFFFFF;
  --rule:       #E4E0D6;   /* hairlines on paper */
  --rule-dark:  rgba(255, 255, 255, .14);

  /* --- text ------------------------------------------------------------- */
  --text:       #1B222B;
  --text-mid:   #4E5866;
  --text-dim:   #737D8B;
  --on-dark:    #F2F1EC;
  --on-dark-mid:#B4BCC6;

  /* --- semantic --------------------------------------------------------- */
  --good:       #2E7D62;
  --warn:       #B4761C;
  --gap:        #C0563E;   /* used for "this is the gap" moments */

  /* --- type scale (fluid, 8pt-anchored) --------------------------------- */
  --f-display: clamp(2.75rem, 1.4rem + 5.4vw, 5.25rem);
  --f-h1:      clamp(2.15rem, 1.3rem + 3.3vw, 3.5rem);
  --f-h2:      clamp(1.65rem, 1.2rem + 1.7vw, 2.35rem);
  --f-h3:      clamp(1.2rem, 1.05rem + .6vw, 1.5rem);
  --f-lead:    clamp(1.075rem, 1rem + .45vw, 1.3rem);
  --f-body:    1.0625rem;
  --f-sm:      .9375rem;
  --f-xs:      .8125rem;
  --f-micro:   .6875rem;

  /* --- rhythm ----------------------------------------------------------- */
  --s1: .5rem;  --s2: 1rem;   --s3: 1.5rem; --s4: 2rem;
  --s5: 3rem;   --s6: 4rem;   --s7: 6rem;   --s8: 8rem;
  --measure: 68ch;
  --wide: 1200px;
  --full: 1440px;
  --radius: 6px;
  --radius-lg: 12px;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: var(--f-body);
  line-height: 1.68;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; display: block; }
img { height: auto; object-fit: cover; background: var(--paper-2); }

h1, h2, h3, h4 { margin: 0; line-height: 1.14; letter-spacing: -.018em; font-weight: 600; }
p { margin: 0 0 var(--s3); }
p:last-child { margin-bottom: 0; }

a { color: var(--plum-deep); text-decoration: none; }
a:not(.btn):not(.plain) {
  background-image: linear-gradient(var(--plum) 0 0);
  background-size: 100% 1px;
  background-position: 0 calc(100% - .05em);
  background-repeat: no-repeat;
  transition: background-size .28s var(--ease), color .2s;
}
a:not(.btn):not(.plain):hover { color: var(--ink); background-size: 100% 2px; }

:focus-visible {
  outline: 3px solid var(--plum);
  outline-offset: 3px;
  border-radius: 2px;
}

hr { border: 0; border-top: 1px solid var(--rule); margin: var(--s5) 0; }

/* --------------------------------------------------------------- layout -- */
.wrap  { width: min(100% - 2.5rem, var(--wide)); margin-inline: auto; }
.wrap-full { width: min(100% - 2.5rem, var(--full)); margin-inline: auto; }
.prose { width: min(100%, var(--measure)); }
.section { padding-block: clamp(3.5rem, 7vw, var(--s7)); }
.section-lg { padding-block: clamp(4.5rem, 9vw, var(--s8)); }
.stack > * + * { margin-top: var(--s3); }

/* Dark punctuation bands. The site alternates paper → ink → paper so it never
   reads as one long scroll of the same surface. */
.band-ink {
  background: var(--ink);
  color: var(--on-dark);
  position: relative;
}
.band-ink h1, .band-ink h2, .band-ink h3 { color: var(--white); }
.band-ink a:not(.btn) { color: var(--butter); background-image: linear-gradient(var(--butter) 0 0); }
.band-ink a:not(.btn):hover { color: var(--butter-hi); }
.band-pale { background: var(--paper-2); }
.band-lilac { background: var(--lilac-pale); }

/* A whisper of film grain over dark bands and photos — stops large flat areas
   from banding on cheap panels and reads as "printed", not "rendered". */
.grain::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------- eyebrows -- */
.eyebrow {
  font-size: var(--f-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-dim);
  margin: 0 0 var(--s2);
  display: flex; align-items: center; gap: .6rem;
}
.eyebrow::before {
  content: ''; width: 1.75rem; height: 2px; background: var(--butter-lo); flex: none;
}
.band-ink .eyebrow { color: var(--butter); }
.band-ink .eyebrow::before { background: var(--butter); }

/* ---------------------------------------------------------------- type --- */
.display {
  font-family: 'Fraunces', Georgia, serif;
  font-optical-sizing: auto;
  font-variation-settings: 'SOFT' 0, 'WONK' 0;
  font-weight: 400;
  font-size: var(--f-display);
  line-height: 1.02;
  letter-spacing: -.028em;
}
.serif { font-family: 'Fraunces', Georgia, serif; font-optical-sizing: auto; }
/* Type system: Fraunces carries the STATEMENTS (page titles, big figures, pull
   quotes), Poppins carries the STRUCTURE (section headings, UI, body). Without
   this rule article titles fell back to Poppins while the home hero was serif,
   which read as two different sites. */
h1 {
  font-size: var(--f-h1);
  font-family: 'Fraunces', Georgia, serif;
  font-optical-sizing: auto;
  font-variation-settings: 'SOFT' 0, 'WONK' 0;
  font-weight: 400;
  letter-spacing: -.024em;
  line-height: 1.06;
}
h2 { font-size: var(--f-h2); }
h3 { font-size: var(--f-h3); }
.lead {
  font-size: var(--f-lead);
  line-height: 1.55;
  color: var(--text-mid);
  font-weight: 400;
}
.band-ink .lead { color: var(--on-dark-mid); }
.small { font-size: var(--f-sm); }
.dim { color: var(--text-dim); }
.band-ink .dim { color: var(--on-dark-mid); }
.num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

/* Butter underline used to mark the one important phrase in a headline. */
.mark {
  background: linear-gradient(transparent 62%, var(--butter) 62%, var(--butter) 92%, transparent 92%);
  padding-inline: .06em;
}

/* -------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .85rem 1.6rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: var(--f-sm);
  font-weight: 600;
  letter-spacing: .005em;
  cursor: pointer;
  transition: transform .18s var(--ease), background-color .18s, color .18s, border-color .18s, box-shadow .18s;
  text-align: center;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--butter); color: var(--ink); }
.btn-primary:hover { background: var(--butter-hi); box-shadow: 0 8px 24px -10px rgba(243, 198, 75, .9); }

.btn-ink { background: var(--ink); color: var(--white); }
.btn-ink:hover { background: var(--ink-soft); }

.btn-ghost { border-color: var(--rule); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--ink); background: var(--white); }
.band-ink .btn-ghost { border-color: var(--rule-dark); color: var(--on-dark); }
.band-ink .btn-ghost:hover { border-color: var(--butter); color: var(--butter); background: transparent; }

.btn-lg { padding: 1.05rem 2.1rem; font-size: 1rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

/* ---------------------------------------------------------------- cards -- */
.card {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--s4);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
a.card, .card-link { display: block; color: inherit; background-image: none !important; }
a.card:hover, .card-link:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 45px -28px rgba(27, 34, 43, .45);
  border-color: var(--ink);
}
.band-ink .card {
  background: rgba(255, 255, 255, .045);
  border-color: var(--rule-dark);
}
.band-ink a.card:hover { border-color: var(--butter); box-shadow: none; background: rgba(255, 255, 255, .08); }

.grid { display: grid; gap: var(--s3); }
.g2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

/* --------------------------------------------------------------- header -- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(251, 250, 247, .82);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background-color .3s;
}
.site-header[data-scrolled] { border-bottom-color: var(--rule); }
.header-in {
  display: flex; align-items: center; gap: var(--s3);
  min-height: 4.5rem;
}
.brand {
  display: inline-flex; align-items: center; gap: .6rem;
  font-weight: 600; font-size: 1.0625rem; letter-spacing: -.02em;
  color: var(--ink); background-image: none !important; margin-right: auto;
}
.brand-mark { width: 1.9rem; height: 1.9rem; flex: none; }
.brand-mark rect { fill: var(--ink); }
.brand-mark path { fill: var(--butter); }

.nav { display: flex; align-items: center; gap: var(--s1); }
.nav a {
  padding: .5rem .85rem; border-radius: 999px;
  font-size: var(--f-sm); font-weight: 500; color: var(--text-mid);
  background-image: none !important;
  transition: color .2s, background-color .2s;
}
.nav a:hover { color: var(--ink); background: var(--paper-2); }
.nav a[aria-current] { color: var(--ink); font-weight: 600; }
.nav .btn { margin-left: .35rem; }

.nav-toggle { display: none; background: none; border: 0; padding: .5rem; cursor: pointer; color: var(--ink); }

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav {
    position: fixed; inset: 4.5rem 0 auto;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--rule);
    padding: var(--s2) 1.25rem var(--s4);
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: opacity .22s var(--ease), transform .22s var(--ease);
    max-height: calc(100dvh - 4.5rem); overflow-y: auto;
  }
  .nav[data-open] { opacity: 1; transform: none; pointer-events: auto; }
  .nav a { padding: .85rem .25rem; border-bottom: 1px solid var(--rule); border-radius: 0; font-size: 1.05rem; }
  .nav .btn { margin: var(--s2) 0 0; border-bottom: 0; }
}

/* ----------------------------------------------------------------- hero -- */
.hero { position: relative; isolation: isolate; background: var(--ink); }
.hero-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(20, 25, 32, .82) 0%, rgba(20, 25, 32, .55) 42%, rgba(20, 25, 32, .93) 100%),
    linear-gradient(96deg, rgba(20, 25, 32, .8) 0%, rgba(20, 25, 32, .1) 72%);
}
.hero-in {
  padding-block: clamp(5rem, 13vw, 9.5rem);
  color: var(--on-dark);
  max-width: 46rem;
}
.hero-in h1 { color: var(--white); }
.hero-in .lead { color: #D9DDE3; margin-top: var(--s3); max-width: 34rem; }
.hero-credit {
  position: absolute; right: 1rem; bottom: .6rem;
  font-size: var(--f-micro); color: rgba(255, 255, 255, .38); letter-spacing: .04em;
}

/* Trust strip directly under the hero — the "who says so" answer, immediately. */
.trust {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5);
  padding-block: var(--s3);
  border-top: 1px solid var(--rule-dark);
  margin-top: var(--s5);
}
.trust div { font-size: var(--f-sm); color: var(--on-dark-mid); display: flex; gap: .55rem; align-items: baseline; }
.trust strong { color: var(--butter); font-weight: 600; }

/* --------------------------------------------------------- answer block -- */
/* Every question page opens with the answer. Good for readers, and it is what
   gets pulled into a featured snippet. */
.answer {
  border-left: 3px solid var(--butter);
  background: var(--white);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: var(--s4);
  box-shadow: 0 1px 0 var(--rule), 0 18px 40px -34px rgba(27, 34, 43, .5);
}
.answer > p:first-of-type { font-size: var(--f-lead); line-height: 1.55; }
.answer .eyebrow { margin-bottom: var(--s2); }

/* ------------------------------------------------------------- figures --- */
.figures { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.figure { border-top: 2px solid var(--butter); padding-top: var(--s2); }
.figure b {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3rem);
  font-weight: 400; line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.figure span { display: block; font-size: var(--f-sm); color: var(--text-mid); margin-top: .5rem; }
.band-ink .figure span { color: var(--on-dark-mid); }
.band-ink .figure b { color: var(--butter); }

/* --------------------------------------------------------------- tables -- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-block: var(--s3); }
table {
  border-collapse: collapse; width: 100%; min-width: 34rem;
  font-size: var(--f-sm); font-variant-numeric: tabular-nums;
}
caption { text-align: left; font-size: var(--f-sm); color: var(--text-dim); padding-bottom: .75rem; }
th, td { text-align: left; padding: .8rem 1rem; border-bottom: 1px solid var(--rule); }
thead th {
  font-size: var(--f-micro); letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-dim); font-weight: 600; border-bottom: 1px solid var(--ink);
}
tbody tr:hover { background: var(--paper-2); }
td.n, th.n { text-align: right; }
.src-line { font-size: var(--f-xs); color: var(--text-dim); margin-top: .5rem; }

/* ------------------------------------------------------------------ FAQ -- */
details.faq {
  border-bottom: 1px solid var(--rule);
  padding: var(--s2) 0;
}
details.faq summary {
  cursor: pointer; list-style: none;
  font-weight: 500; font-size: 1.0625rem;
  display: flex; justify-content: space-between; gap: var(--s2); align-items: flex-start;
  padding: .4rem 0;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: '+'; font-size: 1.4rem; line-height: 1; color: var(--plum);
  flex: none; transition: transform .25s var(--ease);
}
details.faq[open] summary::after { transform: rotate(45deg); }
details.faq .faq-body { padding-top: var(--s2); color: var(--text-mid); max-width: var(--measure); }

/* ------------------------------------------------------------ callouts --- */
.note, .gap-note, .good-note {
  border-radius: var(--radius-lg);
  padding: var(--s3) var(--s4);
  font-size: var(--f-sm);
  border: 1px solid var(--rule);
  background: var(--white);
}
.note { border-left: 3px solid var(--plum); }
.gap-note { border-left: 3px solid var(--gap); background: #FDF6F4; border-color: #F0DAD3; }
.good-note { border-left: 3px solid var(--good); background: #F3F9F6; border-color: #D7E9E1; }
.note b, .gap-note b, .good-note b { display: block; margin-bottom: .35rem; font-weight: 600; }

/* The compliance line that sits on every page. Quiet, never hidden. */
.disclaimer {
  font-size: var(--f-xs);
  color: var(--text-dim);
  border-top: 1px solid var(--rule);
  padding-top: var(--s2);
  margin-top: var(--s5);
  max-width: var(--measure);
}

/* ------------------------------------------------------------- adviser --- */
/* The conversion unit. Appears mid-article and again at the end. */
.adviser-card {
  background: var(--ink);
  color: var(--on-dark);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 4vw, var(--s5));
  position: relative; overflow: hidden;
  display: grid; gap: var(--s3);
}
.adviser-card::before {
  content: ''; position: absolute; right: -18%; top: -60%;
  width: 26rem; height: 26rem; border-radius: 50%;
  background: radial-gradient(circle, rgba(247, 215, 117, .22) 0%, transparent 68%);
  pointer-events: none;
}
.adviser-card h3 { color: var(--white); font-size: var(--f-h3); position: relative; }
.adviser-card p { color: var(--on-dark-mid); font-size: var(--f-sm); position: relative; max-width: 42ch; }
.adviser-card .btn-row { position: relative; }
.adviser-who {
  display: flex; align-items: center; gap: .75rem;
  font-size: var(--f-xs); color: var(--on-dark-mid); position: relative;
}
.adviser-who .dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--butter); flex: none; }

/* Sticky rail on long pages (desktop only — on mobile it would eat the screen) */
.with-rail { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); align-items: start; }
/* Grid items default to min-width:auto, i.e. min-content. The wide tables inside
   .article-body would therefore force the column to ~34rem and scroll the whole
   page sideways on a phone. min-width:0 lets the column shrink and hands the
   overflow back to .table-scroll, which is what should scroll. */
.with-rail > * { min-width: 0; }
@media (min-width: 1060px) {
  .with-rail { grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--s6); }
  .rail { position: sticky; top: 6.5rem; }
}
.rail .adviser-card { padding: var(--s4); }
.rail .adviser-card h3 { font-size: 1.15rem; }

/* --------------------------------------------------------------- steps --- */
.steps { counter-reset: step; display: grid; gap: var(--s4); }
.step { display: grid; grid-template-columns: 3rem 1fr; gap: var(--s3); align-items: start; }
.step::before {
  counter-increment: step; content: counter(step);
  font-family: 'Fraunces', Georgia, serif; font-size: 1.5rem;
  width: 3rem; height: 3rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--butter); color: var(--ink);
}
.band-ink .step::before { background: var(--butter); color: var(--ink); }
.step h3 { margin-bottom: .35rem; }

/* ---------------------------------------------------------- media block -- */
.split { display: grid; gap: var(--s5); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--s6); }
  .split.rev > figure { order: 2; }
}
.split figure { margin: 0; position: relative; }
.split figure img { border-radius: var(--radius-lg); aspect-ratio: 3 / 2; width: 100%; }
.split figcaption {
  font-size: var(--f-micro); color: var(--text-dim); margin-top: .6rem; letter-spacing: .04em;
}
.band-ink .split figcaption { color: rgba(255, 255, 255, .38); }

/* Full-bleed photo strip used to break long pages */
.strip { position: relative; height: clamp(16rem, 34vw, 26rem); overflow: hidden; }
.strip img { width: 100%; height: 100%; }
.strip-quote {
  position: absolute; inset: 0; display: grid; place-items: center; padding: var(--s4);
  background: linear-gradient(180deg, rgba(20,25,32,.35), rgba(20,25,32,.72));
}
.strip-quote p {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.4rem, .9rem + 2.2vw, 2.4rem);
  line-height: 1.24; color: #fff; text-align: center; max-width: 24ch; margin: 0;
  text-wrap: balance;
}

/* ----------------------------------------------------------- calculator -- */
.calc {
  background: var(--white); border: 1px solid var(--rule);
  border-radius: var(--radius-lg); padding: clamp(1.5rem, 3.5vw, var(--s5));
}
.calc-grid { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.field { display: grid; gap: .4rem; }
.field label { font-size: var(--f-sm); font-weight: 500; }
.field .hint { font-size: var(--f-xs); color: var(--text-dim); }
.field input, .field select {
  font: inherit; font-size: var(--f-body);
  padding: .7rem .9rem;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--paper); color: var(--text);
  font-variant-numeric: tabular-nums;
  width: 100%;
  transition: border-color .2s, background-color .2s;
}
.field input:focus, .field select:focus { border-color: var(--plum); background: var(--white); }
.calc-out {
  margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--rule);
}
.calc-headline {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(2.25rem, 1.4rem + 3.2vw, 3.5rem);
  line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.calc-rows { display: grid; gap: .35rem; margin-top: var(--s3); font-size: var(--f-sm); }
.calc-rows div { display: flex; justify-content: space-between; gap: var(--s2); padding: .45rem 0; border-bottom: 1px dashed var(--rule); }
.calc-rows div span:last-child { font-variant-numeric: tabular-nums; font-weight: 500; }
.calc-rows div.total { border-bottom: 0; border-top: 1px solid var(--ink); font-weight: 600; margin-top: .35rem; padding-top: .7rem; }

/* -------------------------------------------------------------- related -- */
.related-list { display: grid; gap: 0; }
.related-list a {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2);
  padding: var(--s2) 0; border-bottom: 1px solid var(--rule);
  background-image: none !important; color: var(--ink); font-weight: 500;
  transition: padding-left .25s var(--ease), color .2s;
}
.related-list a:hover { padding-left: .5rem; color: var(--plum-deep); }
.related-list a span { font-size: var(--f-xs); color: var(--text-dim); font-weight: 400; text-align: right; flex: none; }

/* ------------------------------------------------------------ breadcrumb -- */
.crumbs { font-size: var(--f-xs); color: var(--text-dim); padding-top: var(--s4); }
.crumbs a { color: var(--text-dim); background-image: none !important; }
.crumbs a:hover { color: var(--ink); }
.crumbs span { padding: 0 .45rem; opacity: .5; }

/* ---------------------------------------------------------------- footer -- */
.site-footer { background: var(--ink-deep); color: var(--on-dark-mid); padding-block: var(--s6) var(--s4); position: relative; }
.site-footer h4 {
  font-size: var(--f-micro); letter-spacing: .14em; text-transform: uppercase;
  color: var(--butter); margin-bottom: var(--s2); font-weight: 600;
}
.site-footer a { color: var(--on-dark-mid); background-image: none !important; font-size: var(--f-sm); }
.site-footer a:hover { color: var(--white); }
.footer-cols { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.footer-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.footer-base {
  margin-top: var(--s5); padding-top: var(--s3);
  border-top: 1px solid var(--rule-dark);
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); justify-content: space-between;
  font-size: var(--f-xs);
}
.footer-legal { max-width: 62ch; font-size: var(--f-xs); line-height: 1.6; color: #8A929C; }

/* --------------------------------------------------------------- reveal -- */
/* Progressive enhancement: content is visible by default and only starts hidden
   once the <head> script has confirmed JS is running to reveal it again. Without
   the .js gate, a JS failure would leave half the page permanently invisible. */
.js [data-reveal] {
  opacity: 0; transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js [data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; }
  .btn:hover, a.card:hover { transform: none; }
}

/* --------------------------------------------------------------- utils --- */
.center { text-align: center; }
.balance { text-wrap: balance; }
.mt0 { margin-top: 0; } .mt2 { margin-top: var(--s2); } .mt3 { margin-top: var(--s3); }
.mt4 { margin-top: var(--s4); } .mt5 { margin-top: var(--s5); }
.mx-auto { margin-inline: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 99;
  background: var(--ink); color: #fff; padding: .75rem 1.25rem; border-radius: var(--radius);
  transition: top .2s;
}
.skip:focus { top: 1rem; }

.article-body h2 { margin-top: var(--s5); margin-bottom: var(--s2); }
.article-body h3 { margin-top: var(--s4); margin-bottom: var(--s1); }
.article-body ul, .article-body ol { margin: 0 0 var(--s3); padding-left: 1.35rem; }
.article-body li { margin-bottom: .5rem; }
.article-body li::marker { color: var(--plum); }
.article-body > * { max-width: var(--measure); }
.article-body > .table-scroll, .article-body > .adviser-card, .article-body > .calc { max-width: none; }