@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);

  /* --- AAA+++ STUDIO PREMIUM additions (2026-08-04) ----------------------
     Ported BY HAND from _shared/datasite.css §20. This site is `SL` — no
     propagation reaches it — so the mechanics live here, in this site's own
     palette. Names match the shared layer where the concept is the same so a
     reader of both files recognises them; VALUES are the shared spec's.
     Nothing below renames or removes an existing token. */
  --mono: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, Menlo, monospace;
  --f-mono: .8125rem;
  --track-label: .11em;
  --t-fast: 140ms;
  --t-med: 220ms;
  --t-slow: 420ms;
  --ease-out: cubic-bezier(.25, 1, .4, 1);
  /* The ONE elevating shadow in the system. Reserved for the single object
     that asks the reader to act (§3.2). Everything else is flat or a surface
     step, so elevation stays a pointer instead of decoration. */
  --shadow-lift: 0 1px 0 rgba(27, 34, 43, .05), 0 24px 48px -32px rgba(27, 34, 43, .28);
}

/* ---------------------------------------------------------------- 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; }

/* ============================================================================
   AAA+++ STUDIO PREMIUM — the mechanics layer, in Cover Check's register
   Spec: _plans/AAA-PLUS-STUDIO-PREMIUM.md §3, §4, §5 (row: insurance).
   Reference implementation read from _shared/datasite.css §20 and ported by
   hand — this site is SL, nothing propagates to it.

   The register here is CALM CLINICAL. Insurance readers arrive worried and are
   about to hand a stranger their details. So: no countdowns, no scarcity, no
   pulsing, no "act now", no hover bounce. Everything below either states a
   fact more plainly or gets out of the way. Anything that reads as pressure is
   wrong on this site even where it would convert.
   ========================================================================== */

/* ---- 1. the mono "spec" voice (§3.4) ----------------------------------- */
/* Provenance, dates, vintages and the breadcrumb trail set as specification
   rather than prose. This is the third voice — Fraunces states, Poppins
   structures, mono measures — and it is the cheapest signal that a real
   figure was checked on a real date. No font file: system stack only. */
.spec,
.srcline,
.srcline-k,
.crumbs,
.vintage,
.eyebrow,
.hero-credit,
.split figcaption {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums lining-nums;
}
.spec { font-size: var(--f-mono); letter-spacing: .06em; color: var(--text-dim); }
.eyebrow { letter-spacing: var(--track-label); }

/* ---- 2. hairline discipline: the keel (§3.3) --------------------------- */
/* A 2px x 44px accent rule above every section head. Borrowed from the trades
   pair, which is where this portfolio's high-water mark set it. It gives a
   long page a datum line, which is what stops it reading as stacked boxes. */
.article-body h2::before,
.keel::before {
  content: '';
  display: block;
  width: 44px;
  height: 2px;
  background: var(--butter-lo);
  margin-bottom: .875rem;
}
.band-ink .keel::before { background: var(--butter); }
/* The FAQ/related/method heads already sit under their own rule work. */
.article-body h2.no-keel::before { display: none; }

/* ---- 3. tabular numerals with intent (§3.4) ---------------------------- */
/* Anything a reader compares or copies is tabular so columns cannot jiggle.
   The hero display numeral stays proportional — that one is typography. */
.num, td.n, th.n, table, .calc-rows, .calc-headline,
.figure b, .trust strong, .method .formula {
  font-variant-numeric: tabular-nums lining-nums;
}

/* ---- 4. focus & hover with intent (§3.6) ------------------------------- */
/* The underline DRAWS on hover rather than swapping colour; cards darken a
   hairline and never move. Motion on hover costs nothing visually and reads
   as a template; on an insurance site it also reads as eagerness. */
a:not(.btn):not(.plain) {
  background-size: 0 1px;
  background-position: 0 calc(100% - .05em);
  transition: background-size var(--t-med) var(--ease-out), color var(--t-fast);
}
a:not(.btn):not(.plain):hover,
a:not(.btn):not(.plain):focus-visible { background-size: 100% 1px; }

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

.btn:hover, .btn:active { transform: none; }
a.card:hover, .card-link:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--ink);
}
.related-list a:hover { padding-left: 0; }
.related-list a { transition: color var(--t-fast) var(--ease-out); }

/* ---- 5. elevation: exactly one shadow (§3.2) --------------------------- */
/* The adviser card is the one object on this site that asks the reader to
   act — it is therefore the only thing that floats. The answer block loses
   its shadow and its Bootstrap-alert border and becomes open typography. */
.card, .answer, .calc, .note, .gap-note, .good-note, .table-scroll { box-shadow: none; }
.adviser-card { box-shadow: var(--shadow-lift); }
/* The answer block was a bordered card with a 3px left accent — the shape of a
   Bootstrap alert. It is the reason the page exists, so it becomes open
   typography on paper with one hairline under it, keeled by its own h2. */
.answer {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  padding: 0 0 var(--s3);
}
.answer > h2 { font-size: var(--f-h3); margin: 0 0 var(--s2); }
.answer > h2 + p { font-size: var(--f-lead); line-height: 1.55; }

/* ---- 6. entrance choreography (§3.7) ---------------------------------- */
/* Above the fold, once, on load. Gated behind no-preference so reduced-motion
   and no-JS readers get the finished page rather than content stranded at
   opacity 0 — the failure mode every reveal-on-scroll library ships with. */
@media (prefers-reduced-motion: no-preference) {
  .reveal { animation: cc-rise var(--t-slow) var(--ease-out) both; }
  .reveal-2 { animation-delay: 60ms; }
  .reveal-3 { animation-delay: 120ms; }
  @keyframes cc-rise { from { opacity: 0; transform: translateY(12px); } }
}
/* animation-fill-mode:both applies the backwards fill even in print, where the
   animation never runs — which would print the kicker, h1 and answer blank.
   Neutralised explicitly rather than by dropping `both`, which is what stops
   the pre-animation flash on screen. (Lesson inherited from the ring.) */
@media print {
  .reveal, .reveal-2, .reveal-3 { animation: none !important; opacity: 1 !important; transform: none !important; }
  .grain::after, .hero-scrim { display: none; }
}

/* ---- 7. the promoted source line (§4, §6.4) --------------------------- */
/* Doctrine: no figure without a source line, no source line without a date.
   On an insurance site that doctrine is not decoration — an undated statement
   about what a policy covers is a statement about a product that may no
   longer exist. Same position under every figure, table and stat row. */
.srcline {
  display: block;
  border-top: 1px solid var(--rule);
  padding-top: .5rem;
  margin-top: .75rem;
  font-size: var(--f-xs);
  line-height: 1.55;
  color: var(--text-dim);
  max-width: var(--measure);
}
.srcline-k {
  display: inline-block;
  font-size: var(--f-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-mid);
  margin-right: .5rem;
}
.srcline-k .sep { color: var(--rule); margin: 0 .4em; }
.band-ink .srcline { border-top-color: var(--rule-dark); color: var(--on-dark-mid); }
.band-ink .srcline-k { color: var(--butter); }
/* .src-line is the pre-AAA class name, kept so nothing hand-written in a page
   loses its styling; it renders identically to .srcline. */
.src-line { font-size: var(--f-xs); color: var(--text-dim); }

/* ---- 8. the method mini-spec (§4) ------------------------------------- */
/* "How we work this out" as a prose paragraph is skipped by every reader.
   Numbered, hairline-ruled, in the mono voice, it gets read — and on a site
   whose whole product is trust it is the visible half of the E-E-A-T claim. */
.method { margin: var(--s5) 0; max-width: var(--measure); }
.method ol { list-style: none; margin: 0; padding: 0; counter-reset: mstep; }
.method li {
  counter-increment: mstep;
  border-top: 1px solid var(--rule);
  padding: .875rem 0 .875rem 2.75rem;
  position: relative;
  font-size: var(--f-sm);
  color: var(--text-mid);
  margin: 0;
}
.method li:last-child { border-bottom: 1px solid var(--rule); }
.method li::before {
  content: counter(mstep, decimal-leading-zero);
  position: absolute; left: 0; top: .875rem;
  font-family: var(--mono);
  font-size: var(--f-mono);
  letter-spacing: .06em;
  color: var(--plum-deep);
}
.method li b, .method li strong { color: var(--text); font-weight: 600; }
.method .formula {
  font-family: var(--mono);
  font-size: var(--f-xs);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: .75rem .875rem;
  margin: .625rem 0 0;
  overflow-x: auto;
}

/* ---- 9. confident emptiness (§9.1) ------------------------------------ */
/* Cheap sites fill; expensive sites breathe. One full-width near-empty band
   per page, before the closing ask, so the ask does not arrive shouting. */
.breathe { min-height: 18vh; }
@media (max-width: 640px) { .breathe { min-height: 10vh; } }

/* ---- 10. the handover statement --------------------------------------- */
/* The reader is entitled to know, BEFORE they act, where their details go and
   who will contact them. It is rendered by adviserCard() so it can never
   drift away from the button it belongs to. */
.handover {
  border-top: 1px solid var(--rule-dark);
  padding-top: var(--s2);
  margin: 0;
  font-size: var(--f-xs);
  line-height: 1.6;
  color: var(--on-dark-mid);
  position: relative;
  max-width: 52ch;
}
.handover b {
  display: block;
  font-family: var(--mono);
  font-size: var(--f-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--butter);
  margin-bottom: .35rem;
}
.handover a { color: var(--on-dark) !important; }

/* ---- 11. table caption vintage chip (§4) ------------------------------ */
.vintage {
  display: inline-block;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: .1rem .45rem;
  margin-left: .6rem;
  font-size: var(--f-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-mid);
}