/* ============================================================================
   NotchUp Calculators
   Design tokens ported from offer.notchup.app so the three surfaces read as
   one brand. Mobile-first: every base rule targets 375px, and the media
   queries only ever add. One stylesheet, no framework, no build step.
   ========================================================================= */

/* ── Fonts (self-hosted, no external requests) ───────────────────────────────
   Montserrat is the NotchUp brand face — it is what www.notchup.app and the
   /learn blog both render in. JetBrains Mono is the mono the blog theme
   declares, used here for money figures and labels where tabular digits earn
   their place.

   Both are VARIABLE fonts, so one file covers every weight: two requests
   instead of the ten static faces this replaced. The mono is subsetted to the
   characters the calculator actually renders (digits, currency, arrows, day
   abbreviations), taking it from 31KB to 8.9KB. */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/montserrat-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/montserrat-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../assets/fonts/jetbrains-mono-latin.woff2") format('woff2');
}

/* Fallback metrics tuned to Montserrat so `swap` does not re-wrap the LCP
   paragraph when the real font arrives. Montserrat is wider than Arial, so
   without size-adjust the answer-first block reflows when it loads — invisible
   on localhost, a real CLS contributor on 4G. */
@font-face {
  font-family: 'Montserrat Fallback';
  src: local('Arial');
  size-adjust: 111%;
  ascent-override: 86%;
  descent-override: 22%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Mono Fallback';
  src: local('Courier New');
  size-adjust: 100%;
  ascent-override: 95%;
  descent-override: 26%;
  line-gap-override: 0%;
}

/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root {
  --bg: #E4E2FA;
  --ink: #17163A;
  --ink-soft: rgba(23, 22, 58, 0.72);
  --ink-faint: rgba(23, 22, 58, 0.68); /* 5.6:1 on white, 5.2:1 on --bg */
  --purple: #4F4EA5;
  --purple-light: #615FBE; /* a:hover — #6F6CCB was 4.48:1, just under AA */
  --lavender: #B9B6F4;
  --navy: #1E1D45;
  --accent: #E8684A;
  --white: #FFFFFF;
  --rule: rgba(23, 22, 58, 0.12);
  --radius: 16px;
  --shell: 44rem;
  --sans: Montserrat, 'Montserrat Fallback', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', 'Mono Fallback', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ── Base ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
h1, h2, h3 { line-height: 1.2; letter-spacing: -0.02em; text-wrap: pretty; margin: 0; }
h1 { font-size: clamp(28px, 7.4vw, 42px); font-weight: 700; }
h2 { font-size: clamp(21px, 5.2vw, 28px); font-weight: 600; }
h3 { font-size: 18px; font-weight: 600; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
a { color: var(--purple); text-underline-offset: 2px; }
ul, ol { margin: 0 0 1em; padding-left: 1.15em; }
li { margin-bottom: 0.5em; }
li:last-child { margin-bottom: 0; }
strong { font-weight: 600; }
img { max-width: 100%; height: auto; }
input { font-family: inherit; font-size: 16px; } /* 16px stops iOS zooming on focus */

:focus { outline: 3px solid var(--purple); outline-offset: 2px; border-radius: 4px; }
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; border-radius: 4px; }

.skip {
  position: fixed; left: -9999px; top: 0; z-index: 200;
  background: var(--navy); color: var(--white); padding: 12px 18px; border-radius: 0 0 10px 0;
}
.skip:focus { left: 0; }

/* ── Nav ─────────────────────────────────────────────────────────────────── */
/* Header — the /learn template's values, not an approximation of them:
   sticky, white, 1px #e5e7eb rule, 64px min-height, and an active link marked
   by a 2px underline inset to the link's own padding. */
.site-nav { position: sticky; top: 0; z-index: 100; background: #fff; border-bottom: 1px solid #e5e7eb; padding: 0 1.5rem; }
.nav-inner { display: flex; align-items: center; gap: 2rem; min-height: 64px; max-width: var(--shell); margin: 0 auto; }
.nav-logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.nav-logo img { width: 130px; height: 56px; object-fit: contain; display: block; }
.nav-links { display: flex; align-items: center; gap: 0.25rem; flex: 1; }
.nav-link { display: inline-block; white-space: nowrap; padding: 0.5rem 0.875rem; font-size: 0.9375rem; font-weight: 500; color: #333; text-decoration: none; border-radius: 0.5rem; transition: color 150ms ease, background 150ms ease; }
.nav-link:hover { color: var(--purple); background: #f4f3ff; }
.nav-link--active { color: var(--purple); font-weight: 600; position: relative; }
.nav-link--active::after { content: ''; position: absolute; bottom: -0.5rem; left: 0.875rem; right: 0.875rem; height: 2px; background: var(--purple); border-radius: 1px; }
.nav-right { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.nav-apply { display: inline-block; padding: 0.5rem 1.25rem; font-size: 0.875rem; font-weight: 600; color: #fff; background: var(--purple); border-radius: 9999px; text-decoration: none; white-space: nowrap; }
.nav-apply:hover { background: #6b69cf; color: #fff; }

@media (max-width: 767px) {
  /* One row still: the logo shrinks, the links scroll sideways, and Apply Now
     steps aside — the footer carries a far more prominent version of it. The
     bar stays 64px rather than growing to two rows and eating a sticky slice
     of a 812px screen. */
  .site-nav { padding: 0 0 0 1rem; }
  .nav-inner { gap: 0.5rem; }
  .nav-logo img { width: 104px; height: 45px; }
  .nav-links { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-right: 1rem; }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-link { white-space: nowrap; padding: 0.5rem 0.625rem; }
  .nav-link--active::after { left: 0.625rem; right: 0.625rem; }
  .nav-apply { display: none; }
}

/* ── Layout ──────────────────────────────────────────────────────────────── */
main { max-width: var(--shell); margin: 0 auto; padding: 0 14px 56px; }

.breadcrumbs { padding: 2px 0 0; }
.breadcrumbs { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.breadcrumbs::-webkit-scrollbar { display: none; }
.breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; align-items: center; gap: 2px 6px; font-size: 13px; white-space: nowrap; }
.breadcrumbs a, .breadcrumbs li[aria-current] { display: inline-flex; align-items: center; min-height: 44px; }
.breadcrumbs li { margin: 0; color: var(--ink-faint); flex-shrink: 0; }
.breadcrumbs li + li::before { content: '/'; margin-right: 6px; opacity: 0.5; }
.breadcrumbs a { color: var(--ink-faint); text-decoration: none; }

.page-head { padding: 6px 0 14px; }

/* Quick facts — three chips under the H1 */
.quick-facts { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 7px; margin: 0 0 18px; padding: 0; }
.quick-facts li {
  margin: 0; min-width: 0;
  background: var(--white); border: 1px solid var(--lavender); border-radius: 12px; padding: 8px 10px;
}
.qf-value { display: block; font-family: var(--mono); font-weight: 600; font-size: 19px; color: var(--purple); line-height: 1.2; }
.qf-label { display: block; font-size: 11.5px; color: var(--ink-faint); line-height: 1.3; margin-top: 1px; }

/* ── The answer-first paragraph ──────────────────────────────────────────
   The most important element on the page: what an AI assistant extracts and
   what a reader in a hurry actually needs. Styled to be unmissable. */
.answer-first {
  background: var(--white); border-left: 5px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 16px 16px 16px 14px; margin: 0 0 18px;
  font-size: 16.5px; line-height: 1.55;
}
.answer-first strong { color: var(--purple); font-weight: 600; }

/* ── Wizard ──────────────────────────────────────────────────────────────
   Steps are only separated once JS sets data-wizard="on". Without it every
   step stacks and the calculator behaves exactly as a plain form. */
.wiz-progress {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0 0 10px; font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint);
}
.wiz-dots { display: flex; gap: 6px; }
.wiz-dots i { width: 26px; height: 4px; border-radius: 2px; background: var(--lavender); transition: background 200ms ease; }
.wiz-dots i.is-on { background: var(--purple); }

.wiz-step { border: 0; margin: 0; padding: 0; }
.wiz-step[hidden] { display: none; }
.wiz-q {
  margin: 0 0 16px; font-weight: 600; font-size: clamp(19px, 4.8vw, 23px);
  line-height: 1.25; letter-spacing: -0.02em; color: var(--navy); text-wrap: pretty;
}
.calc[data-wizard="on"] .calc-form { background: transparent; padding: 0; }
.calc[data-wizard="on"] .wiz-step:not(.wiz-step--result) {
  background: var(--white); border-radius: var(--radius); padding: 20px 16px;
}
.wiz-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; min-height: 52px; margin-top: 18px; padding: 0 22px;
  border: 0; border-radius: 999px; background: var(--purple); color: var(--white);
  font-family: var(--sans); font-size: 16px; font-weight: 600; cursor: pointer;
}
.wiz-btn--ghost { background: transparent; color: var(--purple); border: 1.5px solid var(--lavender); }
.wiz-nav { display: flex; gap: 10px; }
.wiz-nav .wiz-btn { flex: 1 1 auto; }
.wiz-nav .wiz-btn--ghost { flex: 0 0 33%; }
.wiz-restart { margin-top: 10px; }
/* Only the wizard hides steps; without JS this rule never applies. */
.calc:not([data-wizard="on"]) .wiz-step[hidden] { display: block; }

/* ── Calculator ──────────────────────────────────────────────────────────── */
.calc { margin: 0 0 24px; }
.calc-form { background: var(--white); border-radius: var(--radius); padding: 18px 16px; }
.calc[data-wizard="on"] .rate-input { font-size: 26px; min-height: 60px; }
.calc[data-wizard="on"] .field-prefix { font-size: 20px; }

.field { border: 0; margin: 0 0 18px; padding: 0; }
.field:last-child { margin-bottom: 0; }
.field-label {
  display: block; font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--ink-soft); margin-bottom: 7px; padding: 0;
}
.field-wrap { display: flex; align-items: stretch; border: 1.5px solid var(--lavender); border-radius: 12px; overflow: hidden; background: var(--white); }
.field-wrap:focus-within { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(79, 78, 165, 0.85); }
.field-prefix {
  display: flex; align-items: center; padding: 0 12px; background: var(--bg);
  font-family: var(--mono); font-weight: 600; color: var(--purple); border-right: 1.5px solid var(--lavender);
}
.rate-input {
  flex: 1; min-width: 0; min-height: 52px; padding: 0 14px;
  border: 0; background: transparent; font-family: var(--mono); font-size: 20px; font-weight: 600; color: var(--ink);
}
.rate-input:focus { outline: none; } /* ring lives on .field-wrap, which clips overflow */
.field-hint { margin: 7px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-faint); }

/* Quick fill -- one tap for the ordinary Monday-to-Friday week. */
.quickfill { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.quickfill[hidden] { display: none; }
.quickfill-label {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-faint);
}
.quickfill-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  min-height: 36px; padding: 0 14px; border: 1.5px solid var(--lavender); border-radius: 999px;
  background: var(--white); color: var(--purple);
  font-family: var(--mono); font-size: 13px; font-weight: 600; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
  transition: background 140ms ease, border-color 140ms ease, transform 90ms ease;
}
.chip:active { transform: scale(0.94); background: var(--bg); }
.chip--ghost { color: var(--ink-faint); }

/* Days stack full width on a phone, where a 4-up grid left every control
   under the 44px tap minimum. The compact 7-across grid returns on screens
   that have the room for it. */
.days-grid { display: grid; grid-template-columns: 1fr; gap: 6px; }
.day { display: grid; grid-template-columns: 40px 48px 1fr 48px; align-items: center; gap: 6px; min-width: 0; }
.day-name {
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  text-align: left; color: var(--ink-faint); text-transform: uppercase;
}
.day-field { display: block; min-width: 0; }
.day-step {
  display: flex; align-items: center; justify-content: center;
  min-height: 48px; width: 100%; padding: 0;
  border: 1.5px solid var(--lavender); border-radius: 10px;
  background: var(--white); color: var(--purple);
  font-family: var(--mono); font-size: 20px; font-weight: 600; line-height: 1; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
  transition: background 140ms ease, transform 90ms ease;
}
.day-step[hidden] { display: none; }
.day-step:active { transform: scale(0.93); background: var(--bg); }

@media (min-width: 30rem) {
  .days-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .day { grid-template-columns: 1fr; gap: 3px; }
  .day-name { text-align: center; font-size: 10px; }
  /* A pointer and a keyboard do not need the steppers. */
  .day-step { display: none; }
}
.day-input {
  width: 100%; min-width: 0; min-height: 48px; padding: 0 2px; text-align: center;
  border: 1.5px solid var(--lavender); border-radius: 10px; background: var(--white);
  font-family: var(--mono); font-size: 16px; font-weight: 600; color: var(--ink);
}
.day-input:focus-visible { outline: 3px solid var(--purple); outline-offset: 1px; border-color: var(--purple); }
.day-input:focus { border-color: var(--purple); }
.days-total { margin: 10px 0 0; font-size: 13.5px; color: var(--ink-faint); }
.days-total strong { font-family: var(--mono); color: var(--purple); }

/* ── Results ─────────────────────────────────────────────────────────────── */
.calc-results { margin-top: 10px; display: grid; gap: 10px; }
.result { background: var(--navy); color: var(--white); border-radius: var(--radius); padding: 20px 16px; }
.result-jur {
  margin: 0 0 6px; font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--lavender);
}
.result-total {
  margin: 0; font-family: var(--mono); font-weight: 600; letter-spacing: -0.03em;
  font-size: clamp(34px, 10.5vw, 50px); line-height: 1.05; color: var(--white);
}
.result-sub { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.72); }
.result-sub span { color: var(--lavender); font-weight: 600; }

.result-lines { margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.result-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 5px 0; }
.result-line dt { min-width: 0; }
.result-line dd { margin: 0; font-family: var(--mono); font-weight: 600; font-size: 15px; white-space: nowrap; }
.result-line-label { display: block; font-size: 14px; font-weight: 500; }
.result-line-sub { display: block; font-family: var(--mono); font-size: 11.5px; color: rgba(255, 255, 255, 0.55); }
.result-line--ot .result-line-label, .result-line--ot dd { color: var(--lavender); }
.result-line--dbl .result-line-label, .result-line--dbl dd { color: #F2A48F; }
/* Nothing owed on this tier. The row holds its space so the card height never
   moves, but it stops competing for attention with the tiers that did pay. */
.result-line.is-zero .result-line-label,
.result-line.is-zero dd { color: rgba(255, 255, 255, 0.38); }
.result-line.is-zero .result-line-sub { color: rgba(255, 255, 255, 0.28); }

/* The total briefly lifts when it changes, so an edit visibly lands. */
@keyframes result-fresh {
  0%   { color: var(--lavender); }
  100% { color: var(--white); }
}
.result-total.is-fresh { animation: result-fresh 420ms ease-out; }

/* Show the working — always visible, never behind a disclosure. It is the
   thing that makes the number trustworthy. */
.working { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.working-title {
  margin: 0 0 9px; font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55);
}
.working-steps { margin: 0; padding-left: 26px; }
.working-steps li { margin-bottom: 9px; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, 0.86); }
.working-steps li::marker { color: var(--lavender); font-family: var(--mono); }
.working-label { display: block; font-weight: 600; }
.working-detail { display: block; font-family: var(--mono); font-size: 12px; color: rgba(255, 255, 255, 0.62); }

.rank-list {
  list-style: none; margin: 10px 0 0; padding: 0;
  background: var(--navy); border-radius: var(--radius); overflow: hidden;
}
.rank-list li {
  display: grid; grid-template-columns: 1.6rem 1fr auto; align-items: center; gap: 10px;
  margin: 0; padding: 11px 14px; border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.rank-list li:first-child { border-top: 0; }
.rank-list li.is-best { background: rgba(185, 182, 244, 0.14); }
.rank-pos {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  color: rgba(255, 255, 255, 0.45); text-align: right;
}
.rank-name { font-size: 14px; font-weight: 500; color: var(--white); min-width: 0; }
.rank-figures { text-align: right; }
.rank-total {
  display: block; font-family: var(--mono); font-weight: 600; font-size: 15px;
  color: var(--white); letter-spacing: -0.02em;
}
.rank-delta {
  display: block; font-family: var(--mono); font-size: 10.5px; color: var(--lavender); margin-top: 1px;
}
.rank-list li.is-best .rank-delta { color: #9BE8B4; }

/* Ten items need a grid, not a pill row. */
.jur-switch ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.jur-switch a, .jur-current { justify-content: center; padding: 0 10px; font-size: 13.5px; text-align: center; }
@media (min-width: 30rem) { .jur-switch ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 48rem) { .jur-switch ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ── CTA — inline, never blocking, never sticky ──────────────────────────── */
.cta { margin-top: 10px; background: var(--white); border: 1px solid var(--lavender); border-radius: var(--radius); padding: 16px; }
.cta[data-variant="advance"] { border-color: var(--accent); }
.cta-text { margin: 0 0 12px; font-size: 14.5px; line-height: 1.55; }
.cta-link {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
  padding: 0 22px; border-radius: 999px; background: var(--purple); color: var(--white);
  font-size: 15px; font-weight: 600; text-decoration: none;
}
.cta[data-variant="info"] .cta-link { visibility: hidden; position: absolute; }
.cta { min-height: 128px; }
.cta-fine { margin: 10px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--ink-faint); }

/* ── Jurisdiction switcher (sibling cross-links) ─────────────────────────── */
.jur-switch { background: var(--white); border-radius: var(--radius); padding: 15px 16px; margin: 0 0 26px; }
.jur-switch-label { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.jur-switch ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.jur-switch li { margin: 0; }
.jur-switch a, .jur-current {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 15px;
  border-radius: 999px; font-size: 14px; font-weight: 500; text-decoration: none;
  border: 1.5px solid var(--lavender); color: var(--purple);
}
.jur-current { background: var(--purple); border-color: var(--purple); color: var(--white); font-weight: 600; }

/* ── Prose ───────────────────────────────────────────────────────────────── */
.prose { background: var(--white); border-radius: var(--radius); padding: 6px 16px 24px; }
.prose-section { padding: 22px 0 0; content-visibility: auto; contain-intrinsic-size: auto 700px; }
.prose-section + .prose-section { border-top: 1px solid var(--rule); margin-top: 8px; }
.prose-section h2 { margin-bottom: 14px; }
.prose-section h3 { margin: 22px 0 9px; color: var(--purple); }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li { line-height: 1.6; }
.prose ol.numbered, ol.numbered { padding-left: 26px; }
ol.numbered li { padding-left: 3px; }
ol.numbered li::marker { font-weight: 600; color: var(--purple); }

.callout {
  background: var(--bg); border-left: 4px solid var(--purple);
  border-radius: 0 12px 12px 0; padding: 15px 15px 15px 14px; margin: 18px 0;
}
.callout-title { margin: 0 0 7px; font-weight: 600; font-size: 15px; color: var(--navy); }
.callout-body { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }
.callout-body strong { color: var(--ink); }

/* Worked examples */
.worked { margin: 18px 0; padding: 0; border: 1.5px solid var(--lavender); border-radius: 12px; overflow: hidden; }
.worked-title { padding: 12px 14px; background: var(--bg); font-weight: 600; font-size: 14.5px; color: var(--navy); }
.worked-givens { margin: 0; padding: 12px 14px 0; }
.worked-given { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-bottom: 6px; font-size: 13.5px; }
.worked-given dt { font-weight: 600; color: var(--ink-soft); }
.worked-given dt::after { content: ':'; }
.worked-given dd { margin: 0; font-family: var(--mono); font-size: 12.5px; color: var(--ink); }
.prose .worked-steps, .worked-steps { margin: 8px 0 0; padding: 0 14px 0 40px; }
.worked-steps li { margin-bottom: 9px; font-size: 13.5px; line-height: 1.5; }
.worked-steps li::marker { color: var(--purple); font-family: var(--mono); font-weight: 600; }
.worked-step-label { display: block; font-weight: 600; }
.worked-step-detail { display: block; font-family: var(--mono); font-size: 12.5px; color: var(--ink-faint); }
.worked-answer {
  margin: 4px 0 0; padding: 12px 14px; background: var(--navy); color: var(--white);
  font-family: var(--mono); font-weight: 600; font-size: 15px;
}
.worked-answer-label {
  display: block; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--lavender); font-weight: 600; margin-bottom: 2px;
}

/* Tables scroll inside themselves — the page body never scrolls sideways. */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 18px 0; border: 1px solid var(--rule); border-radius: 12px; }
table { border-collapse: collapse; width: 100%; min-width: 30rem; font-size: 13.5px; }
caption { text-align: left; padding: 11px 13px; font-size: 12.5px; font-weight: 600; color: var(--ink-faint); background: var(--bg); }
th, td { padding: 9px 13px; text-align: left; border-top: 1px solid var(--rule); vertical-align: top; }
thead th { font-size: 12px; font-weight: 600; color: var(--purple); white-space: nowrap; }
tbody th { font-weight: 500; }

/* FAQ */
.faq-item { padding: 15px 0; border-top: 1px solid var(--rule); }
.faq-item:first-of-type { border-top: 0; }
.faq-q { margin: 0 0 7px; font-size: 16.5px; }
.faq-a { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }

/* Sources + related */
.source-list, .related-list { list-style: none; padding: 0; margin: 0; }
.source-list li, .related-list li { border-top: 1px solid var(--rule); font-size: 14px; }
.source-list a, .related-list a { display: block; padding: 14px 0 8px; }
.related-list li { padding-bottom: 9px; }
.source-list li { padding-bottom: 4px; }
.source-list li:first-child, .related-list li:first-child { border-top: 0; }
.related-blurb { display: block; font-size: 13px; color: var(--ink-faint); margin-top: 1px; }

.hub-lede {
  margin: 0 0 20px; font-size: 16px; line-height: 1.6; color: var(--ink-soft);
  max-width: 46ch;
}

/* ── Hub ─────────────────────────────────────────────────────────────────── */
.tool-grid { display: grid; gap: 14px; margin-bottom: 24px; }
.tool-card { background: var(--white); border-radius: var(--radius); padding: 20px 16px; }

.tool-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.tool-icon {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 13px;
  background: var(--bg); color: var(--purple);
}
.tool-icon svg { width: 24px; height: 24px; display: block; }
.tool-card h2 { font-size: clamp(19px, 4.6vw, 22px); margin: 0; }
.tool-card h2 a { text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.tool-blurb { margin: 0 0 16px; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }

.tool-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 52px; padding: 0 20px;
  border-radius: 999px; background: var(--purple); color: var(--white);
  font-size: 15.5px; font-weight: 600; text-decoration: none;
}
.tool-cta .arrow { width: 18px; height: 18px; flex: 0 0 auto; }

.tool-jump {
  margin: 20px 0 10px; font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint);
}

/* Ten provinces as a grid rather than ten stacked rows with dividers — the
   list was the tallest thing on the page and the least scannable. */
.prov-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.prov-grid li { margin: 0; }
.prov-grid a {
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  min-height: 60px; padding: 9px 11px;
  border: 1.5px solid var(--lavender); border-radius: 12px;
  text-decoration: none; height: 100%;
}
.prov-name { font-size: 13.5px; font-weight: 600; color: var(--purple); line-height: 1.25; }
.prov-note { font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint); line-height: 1.3; }

/* ── Trust block/* ── Trust block (YMYL requirement) ──────────────────────────────────────── */
.trust { background: var(--white); border-radius: var(--radius); padding: 18px 16px; margin-top: 20px; }
.trust-heading { font-size: 13px; font-family: var(--mono); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 12px; }
.trust-meta { margin: 0 0 14px; display: grid; gap: 6px; }
.trust-meta > div { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 13.5px; }
.trust-meta dt { color: var(--ink-faint); }
.trust-meta dt::after { content: ':'; }
.trust-meta dd { margin: 0; font-weight: 600; }
.trust-meta a { display: inline-flex; align-items: center; min-height: 44px; }
.trust-disclaimer { margin: 0 0 10px; font-size: 13px; line-height: 1.55; color: var(--ink-soft); }
.trust-licence { margin: 0; font-size: 12px; line-height: 1.5; color: var(--ink-faint); }

/* ── Footer ──────────────────────────────────────────────────────────────── */
/* Footer — the /learn template: #111827 ground, a CTA banner, two hairline
   rules at 30% opacity, #9ca3af links that go white on hover, and the licence
   disclaimer centred under 600px. */
.site-footer { background: #111827; color: #E5E5F0; margin-top: 4rem; padding: 3rem 1.5rem 2rem; }
.footer-inner { max-width: var(--shell); margin: 0 auto; }
.footer-cta { text-align: center; margin-bottom: 3rem; }
.footer-cta-head { margin: 0 0 0.5rem; color: #fff; font-size: 1.75rem; line-height: 1.2; }
.footer-cta-sub { margin: 0 0 1.25rem; color: #9ca3af; font-size: 1rem; }
.footer-cta-btn { display: inline-block; padding: 0.875rem 2rem; background: var(--purple); color: #fff; font-weight: 600; border-radius: 9999px; text-decoration: none; }
.footer-cta-btn:hover { background: #6b69cf; color: #fff; }
.footer-cta-fine { margin: 0.75rem 0 0; color: #9ca3af; font-size: 0.8125rem; }
.footer-rule { border: 0; border-top: 1px solid #2A2A40; opacity: 0.3; margin: 0; }
/* /learn uses repeat(4, 1fr). Five columns here, because this section has a
   Tools column the blog does not — dropping it would cost the internal links
   assertion 1e exists to protect, and dropping Learn or Resources would cost
   the cross-links or the legal pages. auto-fit keeps it tidy at every width. */
.footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 2rem; padding: 2rem 0; }
.footer-heading { color: #fff; font-size: 1rem; font-weight: 600; margin: 0 0 1rem; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 0.625rem; }
.footer-links a { color: #9ca3af; text-decoration: none; font-size: 0.875rem; transition: color 150ms ease; }
.footer-links a:hover { color: #fff; }
.footer-legal { text-align: center; padding-top: 1rem; }
.footer-copyright { color: #6B7280; font-size: 0.875rem; margin: 0 0 0.5rem; }
.footer-disclaimer { color: #4B5563; font-size: 0.75rem; margin: 0 auto; max-width: 600px; line-height: 1.5; }

@media (max-width: 767px) {
  .site-footer { padding: 2.5rem 1rem 1.5rem; }
  .footer-cta-head { font-size: 1.375rem; }
  .footer-cols { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
  /* Tap targets. Inline links inherited from the /learn template are an
     18px text line with margin around it — it looks spaced, but the touch
     area is the text. Most traffic is mobile. Under 768px each link becomes
     a 44px row and the li margin comes off so the rhythm is the row, not
     the gap; desktop keeps the tighter mouse-target layout. */
  .footer-links li { margin-bottom: 0; }
  .footer-links a { display: flex; align-items: center; min-height: 44px; }
  /* The rest of the under-44 list the probe surfaced: the header links were
     copied from /learn's CSS at 41px, the sticky Share button sat at 40px,
     and the calculator's quick-fill chips are JS-revealed so they were never
     in a screenshot. Mobile-scoped so desktop stays pixel-identical to /learn. */
  .nav-link { display: inline-flex; align-items: center; min-height: 44px; }
  /* Doubled specificity: the base .stickybar-share rule fixes its height and
     is declared later in the file, so a single-class min-height lost on
     cascade order — the first run of the new assertion said so (Share@40px). */
  .stickybar .stickybar-share { min-height: 44px; height: auto; }
  [data-fill], [data-nudge] { min-height: 44px; min-width: 44px; }
}




/* -- Vacation calculator ----------------------------------------------------
   Reuses the overtime widget's field, wizard and result classes. Only what is
   genuinely new to this tool lives here. */
.field-set { border: 0; margin: 0; padding: 0; min-width: 0; }
.rate-input--sm { font-size: 17px; min-height: 48px; }
.calc[data-wizard="on"] .rate-input--sm { font-size: 18px; min-height: 50px; }
.field-suffix {
  display: flex; align-items: center; padding: 0 14px; background: var(--bg);
  font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--purple);
  border-left: 1.5px solid var(--lavender);
}
.field-group-head {
  margin: 22px 0 2px; font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint);
}
.field-group-note { margin: 0 0 14px; font-size: 12.5px; line-height: 1.45; color: var(--ink-faint); }

/* Vacation time sits beside the money, because they are separate entitlements
   on separate clocks and presenting the pay alone is how people get caught. */
.vac-time {
  display: flex; align-items: baseline; gap: 10px;
  margin: 14px 0 0; padding: 12px 14px;
  background: rgba(255, 255, 255, 0.07); border-radius: 12px;
}
.vac-time-value {
  font-family: var(--mono); font-size: 26px; font-weight: 600; line-height: 1;
  color: var(--lavender); flex: 0 0 auto;
}
.vac-time-label { font-size: 12.5px; line-height: 1.45; color: rgba(255, 255, 255, 0.78); }
.vac-time-label em { font-style: italic; color: var(--white); }
.result-nowrap { white-space: nowrap; }

/* An earnings component this province does not count. It keeps its row so the
   card never changes height, and says so rather than vanishing. */
.result-line--out .result-line-label,
.result-line--out dd { color: rgba(255, 255, 255, 0.42); text-decoration: line-through; }
.result-line--out .result-line-sub { color: #F2A48F; text-decoration: none; }

/* Fields that only matter in one province. Saying so beats a footnote. */
.field-only {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  background: var(--bg); color: var(--purple);
  font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; vertical-align: middle;
}
.check {
  display: flex; align-items: flex-start; gap: 10px; margin: 16px 0 0;
  font-size: 14px; line-height: 1.45; color: var(--ink); cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.check input { flex: 0 0 auto; width: 22px; height: 22px; margin: 0; accent-color: var(--purple); }


/* -- Take-home pay ----------------------------------------------------------
   The headline carries the whole product: two cheque figures rather than one.
   Everything else on the card is support. */
.th-headline { margin: 0 0 18px; }
.th-headline .result-total { font-size: clamp(32px, 9.5vw, 46px); }
.th-headline--cliff { display: grid; gap: 10px; }
.th-cheque { min-width: 0; }
.th-cheque--after .result-total { color: var(--lavender); }
.th-arrow {
  display: flex; align-items: center; gap: 8px;
  color: rgba(255, 255, 255, 0.45);
}
.th-arrow svg { width: 20px; height: 20px; flex: 0 0 auto; }
.th-arrow::after {
  content: ""; flex: 1 1 auto; height: 1px;
  background: rgba(255, 255, 255, 0.18);
}
.th-why {
  margin: 4px 0 0; font-size: 12.5px; line-height: 1.5;
  color: rgba(255, 255, 255, 0.62);
}
/* Without a cliff there is only one cheque to show, so the rest stands down
   rather than rendering an arrow that points at nothing. */
.th-headline:not(.th-headline--cliff) .th-arrow,
.th-headline:not(.th-headline--cliff) .th-cheque--after,
.th-headline:not(.th-headline--cliff) .th-why { display: none; }

/* Deduction rows -- icon, label, amount. */
.th-breakdown {
  margin: 16px 0 0; padding: 14px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.th-row {
  display: grid; grid-template-columns: 22px 1fr auto;
  align-items: center; gap: 10px; padding: 6px 0;
  font-size: 14px;
}
.th-icon { display: flex; color: var(--lavender); }
.th-icon svg { width: 18px; height: 18px; }
.th-amount { font-family: var(--mono); font-weight: 600; white-space: nowrap; }
.th-row.is-zero { color: rgba(255, 255, 255, 0.38); }
.th-row.is-zero .th-icon { color: rgba(255, 255, 255, 0.28); }
.th-row--gross { font-weight: 600; }
.th-row--net {
  margin-top: 6px; padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 16px; font-weight: 600;
}
.th-row--net .th-icon { color: var(--white); }

/* Every cheque of the year. Visible rather than hidden -- a crawler
   discounts collapsed content, and this table is the differentiator. */
.th-year { margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.th-year-head {
  margin: 0 0 10px; font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55);
}
.th-year-note {
  display: block; margin-top: 3px;
  letter-spacing: 0.02em; text-transform: none; font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
}
/* A grid item defaults to min-width:auto, so it sizes to its widest content
   — which here is a six-column table, dragging the whole card past the
   viewport and taking the headline with it. overflow-x cannot engage until
   the track is allowed to be narrower than the table. */
.calc-results > *, .result { min-width: 0; }
.th-year, .th-year-scroll { min-width: 0; max-width: 100%; }
.th-year-scroll { max-height: 320px; overflow-y: auto; overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Gross is identical on every row, so on a phone it is the column worth
   losing — dropping it lets Net, the one people are reading for, fit
   without a sideways scroll. */
.th-table { min-width: 0; }
.th-table th:nth-child(2), .th-table td:nth-child(2) { display: none; }
@media (min-width: 26rem) {
  .th-table th:nth-child(2), .th-table td:nth-child(2) { display: table-cell; }
}
.th-table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 12px; }
.th-table th {
  position: sticky; top: 0; z-index: 1;
  padding: 6px 8px 6px 0; text-align: right;
  background: var(--navy); color: rgba(255, 255, 255, 0.55);
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
}
.th-table th:first-child, .th-table td:first-child { text-align: left; padding-left: 0; }
.th-table td { padding: 5px 8px 5px 0; text-align: right; color: rgba(255, 255, 255, 0.75); }
.th-table tbody tr.is-changed td { color: var(--white); }
.th-table tbody tr.is-changed .th-net-cell { color: var(--lavender); font-weight: 600; }
.th-net-cell { font-weight: 600; }

/* Pay frequency -- tappable cards, not a select. */
.th-freqs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 4px; }
.th-freq {
  position: relative; display: flex; flex-direction: column; gap: 2px;
  min-height: 60px; padding: 11px 12px; border: 1.5px solid var(--lavender);
  border-radius: 12px; background: var(--white); cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
  transition: border-color 140ms ease, background 140ms ease, transform 90ms ease;
}
.th-freq:active { transform: scale(0.97); }
.th-freq input { position: absolute; opacity: 0; width: 0; height: 0; }
.th-freq input:focus-visible + .th-freq-label { outline: 3px solid var(--purple); outline-offset: 3px; border-radius: 4px; }
.th-freq-label { font-size: 14px; font-weight: 600; color: var(--ink); }
.th-freq-count { font-family: var(--mono); font-size: 11.5px; color: var(--ink-faint); }
.th-freq.is-on { border-color: var(--purple); background: var(--bg); }
.th-freq.is-on .th-freq-label { color: var(--purple); }

@media (min-width: 30rem) {
  .th-freqs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .th-headline--cliff { grid-template-columns: 1fr auto 1fr; align-items: center; }
  .th-headline--cliff .th-why { grid-column: 1 / -1; }
  .th-arrow { flex-direction: column; }
  .th-arrow::after { width: 1px; height: 28px; flex: 0 0 auto; }
}


/* -- EI benefits ------------------------------------------------------------
   Two supporting figures beside the weekly amount, and a live block for the
   temporary measures — the most time-sensitive content on the site. */
.ei-figures {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
  margin: 16px 0 0; padding: 14px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.ei-figure {
  display: grid; grid-template-columns: 20px 1fr; grid-template-rows: auto auto;
  column-gap: 8px; align-items: center; min-width: 0;
}
.ei-icon { grid-row: 1 / 3; display: flex; color: var(--lavender); }
.ei-icon svg { width: 18px; height: 18px; }
.ei-figure-value {
  font-family: var(--mono); font-size: 20px; font-weight: 600;
  line-height: 1.1; color: var(--white); overflow-wrap: anywhere;
}
.ei-figure-label { font-size: 11.5px; line-height: 1.35; color: rgba(255, 255, 255, 0.62); }

.ei-qualify {
  margin: 14px 0 0; padding: 10px 12px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.07);
  font-size: 13px; line-height: 1.45; color: rgba(255, 255, 255, 0.85);
}
.ei-qualify.is-short { background: rgba(232, 104, 74, 0.18); color: #FFD9CF; }

.ei-measures {
  margin: 14px 0 0; padding: 12px 14px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
  border-left: 3px solid var(--accent, #E8684A);
}
.ei-measures-head {
  display: flex; align-items: center; gap: 7px; margin: 0 0 8px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--white);
}
.ei-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
  background: #E8684A;
}
.ei-measure-list { margin: 0; padding: 0; list-style: none; }
.ei-measure-list li { margin: 0 0 8px; }
.ei-measure-label { display: block; font-size: 13.5px; font-weight: 600; color: var(--white); }
.ei-measure-detail { display: block; font-size: 12.5px; line-height: 1.45; color: rgba(255, 255, 255, 0.68); }
.ei-measures-note { margin: 8px 0 0; font-size: 12px; line-height: 1.45; color: rgba(255, 255, 255, 0.55); }
.ei-measures--off { border-left-color: rgba(255, 255, 255, 0.3); }

@media (min-width: 26rem) {
  .ei-figure-value { font-size: 22px; }
}




/* -- Hub tiles --------------------------------------------------------------
   Two columns on a phone so all six tools are visible at once. The old
   layout was one full-height card per tool and you could see exactly one. */
.tile-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px; margin: 0 0 22px;
}
.tile {
  display: flex; flex-direction: column; gap: 4px;
  min-height: 152px; padding: 15px 14px;
  border: 1.5px solid transparent; border-radius: var(--radius);
  background: var(--white); text-decoration: none;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: border-color 140ms ease, transform 90ms ease, box-shadow 140ms ease;
}
.tile:active { transform: scale(0.975); }
@media (hover: hover) and (pointer: fine) {
  .tile:hover { border-color: var(--purple); box-shadow: 0 6px 20px rgba(23, 22, 58, 0.08); }
}
.tile-icon {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; margin-bottom: 5px;
  border-radius: 11px; background: var(--bg); color: var(--purple);
}
.tile-icon svg { width: 21px; height: 21px; }
.tile-name {
  font-size: 16px; font-weight: 700; line-height: 1.2;
  color: var(--navy); letter-spacing: -0.01em;
}
.tile-hook {
  font-size: 12.5px; line-height: 1.4; color: var(--ink-faint);
  flex: 1 1 auto;
}
.tile-stat {
  align-self: flex-start; padding: 3px 9px; border-radius: 999px;
  background: var(--bg); color: var(--purple);
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.hub-h2 {
  margin: 0 0 12px; font-size: 15px; font-weight: 600;
  letter-spacing: 0.01em; color: var(--ink-soft);
}
.hub-note {
  margin: 0 0 26px; font-size: 13.5px; line-height: 1.55; color: var(--ink-faint);
}

@media (min-width: 34rem) {
  .tile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tile { min-height: 168px; }
}

/* -- On-page contents -------------------------------------------------------
   One line of height instead of ten. The row scrolls inside itself so the
   page body never moves sideways. */
.toc { margin: 0 0 26px; }
.toc-label {
  margin: 0 0 8px; font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint);
}
.toc-list {
  display: flex; gap: 7px; margin: 0; padding: 0 0 4px; list-style: none;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.toc-list::-webkit-scrollbar { display: none; }
.toc-list li { flex: 0 0 auto; }
.toc-list a {
  /* min-height, not padding alone — 7px padding gave a 37px target, under
     the 44px minimum every other control on the site meets. */
  display: flex; align-items: center; min-height: 44px;
  padding: 0 15px; border-radius: 999px;
  border: 1.5px solid var(--lavender); background: var(--white);
  color: var(--purple); font-size: 13px; font-weight: 600;
  text-decoration: none; white-space: nowrap;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: background 140ms ease, border-color 140ms ease, transform 90ms ease;
}
.toc-list a:active { transform: scale(0.95); background: var(--bg); }
@media (hover: hover) and (pointer: fine) {
  .toc-list a:hover { background: var(--bg); border-color: var(--purple); }
}
/* Anchored headings must clear the sticky nav when jumped to. */
.prose-section { scroll-margin-top: 16px; }

@media (min-width: 40rem) {
  .toc-list { flex-wrap: wrap; overflow-x: visible; }
}

/* -- Rent affordability -----------------------------------------------------
   Three bands rather than one number, because presenting a single figure as a
   pass mark is the mistake every other rent calculator makes. */
.rent-bands {
  display: grid; gap: 10px; margin: 16px 0 0; padding: 14px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.rent-band {
  display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start;
  padding: 11px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.06);
}
.rent-band--typical { background: rgba(185, 182, 244, 0.16); }
.rent-band--stretch { background: rgba(232, 104, 74, 0.14); }
.rent-band-icon { display: flex; color: var(--lavender); }
.rent-band-icon svg { width: 18px; height: 18px; }
.rent-band--stretch .rent-band-icon { color: #F2A48F; }
.rent-band-main { min-width: 0; }
.rent-band-amount {
  margin: 0; font-family: var(--mono); font-size: 21px; font-weight: 600;
  line-height: 1.1; color: var(--white);
}
.rent-band-per {
  margin-left: 3px; font-size: 12px; font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
}
/* The band the headline is really about. Marked rather than repeated. */
.rent-band.is-headline { box-shadow: inset 0 0 0 1.5px var(--lavender); }
.rent-band.is-headline .rent-band-amount { color: var(--lavender); }
.rent-to {
  display: inline-block; margin: 0 10px;
  font-family: var(--sans); font-size: 0.45em; font-weight: 500;
  vertical-align: middle; color: rgba(255, 255, 255, 0.5);
}
.rent-band-label {
  margin: 2px 0 0; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.9);
}
.rent-band-share {
  display: inline-block; margin-left: 5px; padding: 1px 7px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  font-family: var(--mono); font-size: 11px; font-weight: 600;
}
.rent-band-note {
  margin: 4px 0 0; font-size: 12px; line-height: 1.45; color: rgba(255, 255, 255, 0.6);
}

.rent-left {
  display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start;
  margin: 12px 0 0; padding: 12px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
}
.rent-left-text { margin: 0; font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.85); }
.rent-left.is-short { background: rgba(232, 104, 74, 0.18); }
.rent-left.is-short .rent-band-icon { color: #F2A48F; }
.rent-left.is-short .rent-left-text { color: #FFD9CF; }
.rent-left-text strong { font-family: var(--mono); color: var(--white); }

.rent-note {
  margin: 12px 0 0; padding: 12px 14px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
  border-left: 3px solid var(--accent, #E8684A);
}
.rent-note[hidden] { display: none; }
.rent-note-head { margin: 0 0 5px; font-size: 13.5px; font-weight: 600; color: var(--white); }
.rent-note-body { margin: 0; font-size: 12.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.68); }


/* Market comparison — two rents, because "average rent" has two answers. */
.rent-market {
  margin: 12px 0 0; padding: 13px 14px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
}
.rent-market[hidden] { display: none; }
.rent-market-head {
  margin: 0 0 9px; font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55);
}
.rent-market-rows { display: grid; gap: 6px; margin: 0 0 10px; }
.rent-market-row {
  display: grid; grid-template-columns: 52px auto 1fr; gap: 10px; align-items: baseline;
  padding: 7px 10px; border-radius: 9px; background: rgba(255, 255, 255, 0.05);
}
.rent-market-beds {
  font-family: var(--mono); font-size: 11.5px; font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
}
.rent-market-asking {
  font-family: var(--mono); font-size: 17px; font-weight: 600; color: var(--white);
}
.rent-market-verdict { font-size: 12px; color: #F2A48F; text-align: right; }
.rent-market-row.is-reach { background: rgba(185, 182, 244, 0.16); }
.rent-market-row.is-reach .rent-market-verdict { color: var(--lavender); }
.rent-market-gap { margin: 0 0 6px; font-size: 12.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.72); }
.rent-market-gap strong { color: var(--white); font-family: var(--mono); }
.rent-market-verdict-line { margin: 0; font-size: 13px; font-weight: 600; color: var(--white); }

.rent-select {
  flex: 1; min-width: 0; min-height: 52px; padding: 0 14px;
  border: 0; background: transparent; color: var(--ink);
  font-family: var(--sans); font-size: 16px; font-weight: 600;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F4EA5' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 18px;
}
.rent-select:focus { outline: none; }

/* -- Sticky result bar ------------------------------------------------------
   Shows once the total has scrolled away, so the number they came for is
   never more than a glance off. Result only: the spec bars a sticky CTA and
   this is not a place to put one. */
.stickybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--navy); color: var(--white);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -6px 24px rgba(23, 22, 58, 0.22);
  transform: translateY(100%); transition: transform 220ms ease;
}
.stickybar[hidden] { display: none; }
/* Reserve the bar's own height so it never covers the footer or the button
   directly beneath the result. */
body.has-stickybar { padding-bottom: 74px; }
.stickybar.is-on { transform: translateY(0); }
.stickybar-inner { display: flex; align-items: center; gap: 12px; max-width: var(--measure); margin: 0 auto; }
.stickybar-where {
  flex: 1 1 auto; min-width: 0; font-size: 12.5px; color: rgba(255, 255, 255, 0.7);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stickybar-total {
  font-family: var(--mono); font-size: 19px; font-weight: 600; letter-spacing: -0.02em; white-space: nowrap;
}
.stickybar-share {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, 0.14); color: var(--white);
  font-family: var(--sans); font-size: 13.5px; font-weight: 600; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
  transition: background 140ms ease, transform 90ms ease;
}
.stickybar-share:active { transform: scale(0.94); background: rgba(255, 255, 255, 0.26); }
.stickybar-share.is-done { background: var(--purple); }

/* -- Touch feedback ---------------------------------------------------------
   90%+ of this section's traffic is a thumb, and a thumb never fires :hover.
   Every hover rule therefore lives behind (hover: hover) -- on a touchscreen a
   tap latches :hover and it stays latched until you tap elsewhere, which left
   pressed buttons stuck in their dark state.

   :active is what a phone actually gets, so it carries the real feedback. */
.wiz-btn, .cta-link, .tool-cta, .nav-links a, .jur-switch a, .prov-grid a, .day-input {
  -webkit-tap-highlight-color: transparent; /* the default is an Android blue flash */
  touch-action: manipulation;               /* no 300ms wait, no double-tap zoom */
}
.wiz-btn, .cta-link, .tool-cta {
  -webkit-user-select: none; user-select: none; /* long-press was selecting "Continue" */
  transition: background 140ms ease, transform 90ms ease, box-shadow 140ms ease;
}
.wiz-btn:active, .cta-link:active, .tool-cta:active {
  transform: scale(0.975);
  background: var(--navy); color: var(--white);
}
.wiz-btn--ghost:active { background: var(--bg); color: var(--purple); }
.jur-switch a, .prov-grid a, .tool-card { transition: background 140ms ease, border-color 140ms ease, transform 90ms ease; }
.jur-switch a:active, .prov-grid a:active { background: var(--bg); transform: scale(0.985); }
.day-input, .field-wrap { transition: border-color 120ms ease, box-shadow 120ms ease; }

@media (hover: hover) and (pointer: fine) {
  a:hover { color: var(--purple-light); }
  .nav-links a:hover { color: var(--purple); background: var(--bg); }
  .breadcrumbs a:hover { color: var(--purple); text-decoration: underline; }
  .wiz-btn:hover { background: var(--navy); }
  .wiz-btn--ghost:hover { background: var(--bg); color: var(--purple); }
  .cta-link:hover { background: var(--navy); color: var(--white); }
  .jur-switch a:hover { background: var(--bg); }
  .tool-card h2 a:hover { text-decoration: underline; }
  .tool-cta:hover { background: var(--navy); color: var(--white); }
  .prov-grid a:hover { background: var(--bg); border-color: var(--purple); }
  .footer-col a:hover { color: var(--white); text-decoration: underline; }
  .tool-card:hover { border-color: var(--purple); }
}

/* ── Wider screens: the adaptation, not the design ───────────────────────── */
@media (min-width: 34rem) {
  .calc-results--compare { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
  .calc-results--compare .result { padding: 16px 14px; }
  .calc-results--compare .result-total { font-size: clamp(20px, 4.2vw, 30px); }
  .calc-results--compare .result-sub, .calc-results--compare .working { display: none; }
  .calc-results--compare .result-line-label { font-size: 12px; }
  .calc-results--compare .result-line-sub { font-size: 10.5px; }
  .calc-results--compare .result-line dd { font-size: 12.5px; }
  main { padding-left: 20px; padding-right: 20px; }
  .nav-inner, .footer-inner { padding-left: 20px; padding-right: 20px; }
  .calc-form, .prose, .trust, .tool-card, .jur-switch, .cta, .result { padding-left: 22px; padding-right: 22px; }
  .answer-first { padding: 22px 22px 22px 20px; font-size: 17.5px; }
  .days-grid { gap: 7px; }
  .field-hint, .days-total { font-size: 13px; }
  .footer-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 48rem) {
  :root { --shell: 48rem; }
  body { font-size: 17px; }
  main { padding-bottom: 72px; }
  .page-head { padding: 22px 0 26px; }
  .quick-facts li { min-width: 120px; }
  .qf-value { font-size: 22px; }
  .calc-results--compare { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
  .calc-results--compare .result { padding: 20px 18px; }
  .calc-results--compare .result-total { font-size: 27px; }
  .calc-results--compare .result-sub, .calc-results--compare .working { display: block; }
  .calc-results--compare .result-line dd { font-size: 13px; }
  .calc-results--compare .result-line-label { font-size: 12.5px; }
  .footer-cols { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .cta { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 20px; }
  .cta-text { margin: 0; }
  .cta-fine { grid-column: 1 / -1; margin-top: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Visually hidden, still announced. Used for the live results summary. */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── Hourly wage calculator ──────────────────────────────────────────────
   The card is the shared .result (navy, white type), so only the pieces
   specific to an hourly answer are defined here. The headline reuses
   .result-total for its size and mono face; hw-total only adds the colour
   shift that marks it as the kept figure rather than the quoted one. */
.hw-headline { margin: 0 0 14px; }
.hw-lead {
  margin: 0 0 2px; font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--lavender);
}
.hw-unit { margin: 2px 0 0; font-size: 14px; color: rgba(255, 255, 255, 0.78); }
.hw-versus {
  margin: 10px 0 0; font-size: 12.5px; line-height: 1.5;
  color: rgba(255, 255, 255, 0.62);
}
.hw-versus span { font-family: var(--mono); color: rgba(255, 255, 255, 0.86); }
.hw-cheque {
  margin: 0 0 14px; padding: 10px 12px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.07); font-size: 14px; line-height: 1.5;
}
.hw-cheque strong, .hw-cheque span { font-family: var(--mono); }
.hw-rows-head {
  margin: 0 0 4px; font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--lavender);
}
.hw-rows { list-style: none; margin: 0; padding: 0; }
.hw-row {
  display: grid; grid-template-columns: 22px 1fr auto;
  align-items: center; gap: 10px; padding: 6px 0; font-size: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.hw-row:last-child { border-bottom: 0; }
.hw-row-icon { display: flex; color: var(--lavender); }
.hw-row-icon svg { width: 18px; height: 18px; }
.hw-row-value { font-family: var(--mono); font-weight: 600; white-space: nowrap; }
/* The last three rows are the annual summary, set apart from the per-cheque
   deductions above them. */
.hw-row[data-row="annualGross"] { margin-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.16); padding-top: 10px; }
.hw-row[data-row="annualNet"] { font-weight: 600; }
.hw-cliff, .hw-minwage {
  margin: 12px 0 0; font-size: 13px; line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
}
.hw-cliff strong, .hw-minwage strong { font-family: var(--mono); color: var(--white); }

/* ── Credit card payoff ──────────────────────────────────────────────────
   Shares the navy .result card. The utilisation bar is deliberately drawn
   WITHOUT a marker at 30%: there is no threshold in the scoring model, and a
   line on the chart would assert one. */
.cc-headline { margin: 0 0 14px; }
.cc-lead {
  margin: 0 0 2px; font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--lavender);
}
.cc-total { word-break: break-word; }
.cc-unit { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, 0.78); }
.cc-first {
  margin: 0 0 14px; padding: 10px 12px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.07); font-size: 14px; line-height: 1.5;
}
.cc-first strong { font-family: var(--mono); }
.cc-rows-head, .cc-util-head {
  margin: 0 0 4px; font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--lavender);
}
.cc-rows { list-style: none; margin: 0 0 16px; padding: 0; }
.cc-row {
  display: grid; grid-template-columns: 22px 1fr auto;
  align-items: center; gap: 10px; padding: 7px 0; font-size: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.cc-row:last-child { border-bottom: 0; }
.cc-row-icon { display: flex; color: var(--lavender); }
.cc-row-icon svg { width: 18px; height: 18px; }
.cc-row-value { font-family: var(--mono); font-weight: 600; white-space: nowrap; }

.cc-util { margin: 0 0 12px; }
.cc-util-pct { float: right; font-size: 13px; color: var(--white); }
.cc-bar {
  height: 10px; border-radius: 999px; overflow: hidden;
  background: rgba(255, 255, 255, 0.14); margin: 6px 0 8px;
}
.cc-bar-fill { display: block; height: 100%; background: var(--lavender); border-radius: 999px; transition: width 220ms ease; }
.cc-bar-fill.is-over { background: var(--accent, #E8684A); }
.cc-util-read, .cc-rule {
  margin: 0; font-size: 13px; line-height: 1.55; color: rgba(255, 255, 255, 0.72);
}
.cc-rule { margin-top: 12px; }

.cc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.cc-chip {
  min-height: 44px; padding: 8px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--rule); background: var(--white); color: var(--purple);
  font: inherit; font-size: 12.5px; font-weight: 600;
}
.cc-chip:hover { background: var(--tint, #F4F3FF); }
.field-suffix { padding: 0 12px 0 4px; color: var(--muted, #6F6CCB); font-family: var(--mono); }

/* ── Credit: strategies ──────────────────────────────────────────────────
   Cards rather than a table. The cheapest is marked, but the size of the gap
   is given equal weight — on realistic balances it is usually small, and a
   reader who leaves thinking "avalanche or nothing" has been served worse
   than one who leaves thinking "pick either, but pick one". */
.cc-strats { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.cc-strat {
  display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 10px;
  padding: 11px 12px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid transparent;
}
.cc-strat.is-best { background: rgba(185, 244, 208, 0.12); border-color: rgba(185, 244, 208, 0.4); }
.cc-strat.is-baseline { opacity: 0.72; }
.cc-strat-icon { display: flex; color: var(--lavender); }
.cc-strat.is-best .cc-strat-icon { color: #b9f4d0; }
.cc-strat-icon svg { width: 22px; height: 22px; }
.cc-strat-name {
  margin: 0; font-size: 14.5px; font-weight: 600;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.cc-strat-flag {
  display: inline-flex; align-items: center; gap: 3px;
  font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: #b9f4d0;
}
.cc-strat-flag svg { width: 11px; height: 11px; }
.cc-strat-tag { margin: 1px 0 0; font-size: 12.5px; color: rgba(255, 255, 255, 0.62); }
.cc-strat-figs { text-align: right; display: grid; gap: 1px; }
.cc-strat-time { font-family: var(--mono); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.cc-strat-cost { font-size: 11.5px; color: rgba(255, 255, 255, 0.66); white-space: nowrap; }
.cc-strat-delta { font-family: var(--mono); font-size: 11px; color: #ffd9a8; white-space: nowrap; }

.cc-flag, .cc-close {
  display: flex; gap: 8px; align-items: flex-start;
  margin: 0 0 12px; padding: 10px 12px; border-radius: 10px;
  font-size: 13px; line-height: 1.55;
}
.cc-flag { background: rgba(232, 104, 74, 0.16); color: #ffd2c6; }
/* `display: flex` above beats the hidden attribute's UA `display: none`, so a
   hidden flag rendered as an empty coloured bar. Any element given a display
   value needs this or `hidden` silently stops working. */
.cc-flag[hidden], .cc-close[hidden], .cc-order[hidden] { display: none; }
.cc-close { background: rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.82); }
.cc-flag svg, .cc-close svg { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 2px; }
.cc-close strong { font-family: var(--mono); color: var(--white); }

.cc-order { margin: 0 0 14px; }
.cc-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cc-step {
  display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 9px;
  font-size: 13.5px; padding: 4px 0;
}
.cc-step-n {
  display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.14); font-family: var(--mono); font-size: 11px; font-weight: 600;
}
.cc-step-when { font-family: var(--mono); font-size: 12px; color: rgba(255, 255, 255, 0.62); }

/* ── Credit: the debt rows ── */
.cc-debts { display: grid; gap: 10px; margin: 0 0 10px; }
.cc-debt { border: 1px solid var(--rule); border-radius: 12px; padding: 10px 12px 12px; margin: 0; }
.cc-debt-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cc-debt-name {
  flex: 1; min-width: 0; border: 0; border-bottom: 1px dashed var(--rule);
  background: none; font: inherit; font-weight: 600; font-size: 14px;
  color: var(--ink); padding: 4px 0;
}
.cc-debt-name:focus { outline: none; border-bottom-color: var(--purple); }
.cc-debt-remove {
  flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px;
  border: 0; border-radius: 8px; background: none; color: var(--muted, #6F6CCB); cursor: pointer;
}
.cc-debt-remove:hover { background: var(--tint, #F4F3FF); color: var(--accent, #E8684A); }
.cc-debt-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cc-mini { display: grid; gap: 3px; min-width: 0; }
.cc-mini > span:first-child {
  font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted, #6F6CCB);
}
.cc-mini-wrap {
  display: flex; align-items: center; min-height: 44px;
  border: 1px solid var(--rule); border-radius: 9px; background: var(--white);
}
.cc-mini-wrap:focus-within { border-color: var(--purple); }
.cc-mini-wrap i { padding: 0 2px 0 9px; font-style: normal; font-family: var(--mono); font-size: 12.5px; color: var(--muted, #6F6CCB); }
.cc-mini-wrap input {
  width: 100%; min-width: 0; border: 0; background: none; font: inherit;
  font-family: var(--mono); font-size: 14px; padding: 8px 9px 8px 3px; color: var(--ink);
}
.cc-mini-wrap input:focus { outline: none; }
.cc-add {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  padding: 8px 14px; border-radius: 999px; cursor: pointer;
  border: 1px dashed var(--rule); background: none; color: var(--purple);
  font: inherit; font-size: 13.5px; font-weight: 600;
}
.cc-add:hover { background: var(--tint, #F4F3FF); border-style: solid; }
.cc-chips-label {
  font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted, #6F6CCB); align-self: center; margin-right: 2px;
}

/* ── Credit: the strategy guide, on the light page rather than in the card ── */
.cc-guides { margin: 22px 0 4px; }
.cc-guides-h { margin: 0 0 10px; font-size: 17px; }
.cc-guide-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cc-guide {
  background: var(--white); border: 1px solid var(--rule); border-radius: 14px;
  padding: 14px 15px;
}
.cc-guide-icon { display: flex; color: var(--purple); margin-bottom: 6px; }
.cc-guide-icon svg { width: 24px; height: 24px; }
.cc-guide-name { margin: 0; font-size: 15px; font-weight: 700; }
.cc-guide-tag {
  margin: 1px 0 7px; font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--purple);
}
.cc-guide-detail { margin: 0 0 8px; font-size: 13.5px; line-height: 1.6; }
.cc-guide-watch {
  display: flex; gap: 7px; align-items: flex-start; margin: 0;
  font-size: 12.5px; line-height: 1.55; color: var(--muted, #6F6CCB);
}
.cc-guide-watch svg { width: 15px; height: 15px; flex: 0 0 15px; margin-top: 2px; }

@media (min-width: 34rem) {
  .cc-guide-list { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 26rem) {
  .cc-debt-fields { grid-template-columns: 1fr 1fr; }
  .cc-mini:last-child { grid-column: 1 / -1; }
  .cc-strat { grid-template-columns: 26px 1fr; }
  .cc-strat-figs { grid-column: 2; text-align: left; margin-top: 4px; }
}

/* ── Data breach risk checker ────────────────────────────────────────────
   Read by somebody already worried, so the interface stays calm. No score out
   of a hundred — a number implies precision this does not have and invites
   "is 62 bad?". Four named bands, and the colour only escalates when the tier
   actually does: a leaked email address does not get an alarm. */
.bx-hint { margin: -4px 0 14px; font-size: 13.5px; line-height: 1.55; color: var(--muted, #6F6CCB); }
.bx-picker { display: grid; gap: 14px; }
.bx-group { border: 0; padding: 0; margin: 0; }
.bx-group-head {
  display: flex; align-items: center; gap: 7px; padding: 0 0 7px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted, #6F6CCB);
}
.bx-group-icon { display: flex; color: var(--purple); }
.bx-group-icon svg { width: 16px; height: 16px; }
.bx-chks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 7px; }
.bx-chk {
  display: flex; align-items: center; gap: 9px; min-height: 44px;
  padding: 9px 11px; border: 1px solid var(--rule); border-radius: 11px;
  background: var(--white); cursor: pointer; font-size: 13.5px; line-height: 1.3;
  transition: border-color 140ms ease, background 140ms ease;
}
.bx-chk:hover { border-color: var(--purple); }
.bx-chk input { position: absolute; opacity: 0; width: 0; height: 0; }
.bx-chk-box {
  flex: 0 0 20px; width: 20px; height: 20px; border-radius: 6px;
  border: 1.5px solid var(--rule); display: grid; place-items: center;
  color: transparent; transition: background 140ms ease, border-color 140ms ease;
}
.bx-chk-box svg { width: 13px; height: 13px; }
.bx-chk.is-on { border-color: var(--purple); background: var(--tint, #F4F3FF); }
.bx-chk.is-on .bx-chk-box { background: var(--purple); border-color: var(--purple); color: #fff; }
.bx-chk input:focus-visible + .bx-chk-box { outline: 2px solid var(--purple); outline-offset: 2px; }
.bx-clear {
  margin-top: 12px; min-height: 44px; padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--rule); background: none; color: var(--purple);
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.bx-clear:hover { background: var(--tint, #F4F3FF); }

/* The band. Colour is earned, not default. */
.bx-result { border-left: 4px solid rgba(255,255,255,0.2); }
.bx-result.is-nuisance { border-left-color: #7fd1a8; }
.bx-result.is-targeted { border-left-color: #ffd9a8; }
.bx-result.is-account  { border-left-color: #ffb27a; }
.bx-result.is-identity { border-left-color: #ff8b6b; }
.bx-total { font-size: clamp(26px, 7.5vw, 36px); }
.bx-band-line { margin: 6px 0 0; font-size: 14px; line-height: 1.55; color: rgba(255,255,255,0.82); }
.bx-context {
  margin: 14px 0 0; padding: 10px 12px; border-radius: 10px;
  background: rgba(255,255,255,0.07);
}
.bx-context p { margin: 0; font-size: 12.5px; line-height: 1.6; color: rgba(255,255,255,0.72); }
.bx-context strong { font-family: var(--mono); color: var(--white); }
.bx-context[hidden] { display: none; }
.bx-sub {
  margin: 18px 0 8px; font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--lavender);
}
.bx-combos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bx-combo { padding: 11px 12px; border-radius: 11px; background: rgba(255,255,255,0.06); }
.bx-combo-title { margin: 0 0 3px; font-size: 14.5px; font-weight: 600; }
.bx-combo-body { margin: 0; font-size: 13px; line-height: 1.6; color: rgba(255,255,255,0.74); }
.bx-actions { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: bx; }
.bx-action { display: grid; grid-template-columns: 24px 1fr; gap: 11px; align-items: start; }
.bx-action-n {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: rgba(255,255,255,0.14); font-family: var(--mono); font-size: 11.5px; font-weight: 600;
}
.bx-action-title { margin: 2px 0 3px; font-size: 14px; font-weight: 600; }
.bx-action-body { margin: 0; font-size: 12.5px; line-height: 1.6; color: rgba(255,255,255,0.7); }

/* The Shield handoff. Last, and quiet — the reader has just been given the
   whole answer free, so this is an offer rather than a scare. */
.bx-shield {
  display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start;
  padding: 16px; border-radius: 14px; border: 1px solid var(--rule);
  background: var(--white);
}
.bx-shield-icon { display: flex; color: var(--purple); }
.bx-shield-icon svg { width: 30px; height: 30px; }
.bx-shield-title { margin: 2px 0 5px; font-size: 15.5px; font-weight: 700; }
.bx-shield-body { margin: 0 0 12px; font-size: 13.5px; line-height: 1.6; color: var(--muted, #6F6CCB); }
.bx-shield-link {
  display: inline-block; padding: 11px 22px; border-radius: 999px;
  background: var(--purple); color: #fff; font-weight: 600; font-size: 14px;
  text-decoration: none;
}
.bx-shield-link:hover { background: #6b69cf; color: #fff; }

@media (max-width: 26rem) {
  .bx-chks { grid-template-columns: 1fr 1fr; }
  .bx-shield { grid-template-columns: 1fr; }
}

/* Preset breaches — the fastest path to an answer, so they sit above the
   picker. Canadian ones carry a maple marker because that is who this is for
   and it is the reason to use this rather than an American guide. */
.bx-presets { margin: 0 0 16px; }
.bx-presets-head {
  margin: 0 0 8px; font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted, #6F6CCB);
}
.bx-preset-row { display: flex; flex-wrap: wrap; gap: 7px; }
.bx-preset {
  display: grid; gap: 1px; text-align: left; cursor: pointer;
  min-height: 44px; padding: 7px 13px; border-radius: 11px;
  border: 1px solid var(--rule); background: var(--white); font: inherit;
  transition: border-color 140ms ease, background 140ms ease;
}
.bx-preset:hover { border-color: var(--purple); background: var(--tint, #F4F3FF); }
.bx-preset.is-on { border-color: var(--purple); background: var(--purple); }
.bx-preset.is-on .bx-preset-name, .bx-preset.is-on .bx-preset-meta { color: #fff; }
.bx-preset-name { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.bx-preset-meta { font-family: var(--mono); font-size: 10.5px; color: var(--muted, #6F6CCB); }
.bx-preset.is-ca .bx-preset-name::after {
  content: '\1F1E8\1F1E6'; margin-left: 5px; font-size: 10px; vertical-align: 1px;
}
.bx-presets-note { margin: 8px 0 0; font-size: 12px; line-height: 1.55; color: var(--muted, #6F6CCB); }
.bx-presets-note a { color: var(--purple); }

/* The citable line. Deliberately prominent — it is the number a journalist
   would quote, and a quoted number is a link. */
.bx-stat {
  margin: 16px 0 0; padding: 11px 13px; border-radius: 11px;
  background: rgba(255,255,255,0.07); font-size: 12.5px; line-height: 1.65;
  color: rgba(255,255,255,0.78);
}
.bx-stat strong { font-family: var(--mono); color: var(--white); }
.bx-stat[hidden] { display: none; }