/* =========================================================================
   Canadian Money Help — Design Tokens + homepage redesign styles
   Loaded before main.css so the existing theme-v2 rules can layer on top.
   ========================================================================= */

:root {
  /* ===== COLOR — Trust anchors ===== */
  --navy-900: #0F2A44;
  --navy-800: #132F4D;
  --navy-700: #1B3A5C;
  --navy-500: #2E5A85;
  --navy-300: #8AA3BF;
  --navy-100: #DDE5EE;

  /* ===== COLOR — Warm neutrals ===== */
  --paper:    #FBFAF7;
  --paper-2:  #F5F3EE;
  --paper-3:  #ECE8DF;
  --ink-900:  #111827;
  --ink-700:  #33415C;
  --ink-500:  #5C6B85;
  --ink-300:  #9AA6BC;
  --hairline: #E3E0D7;

  /* ===== COLOR — Amber (two legal placements site-wide) ===== */
  --amber-700: #8C5E10;
  --amber-600: #B8860B;
  --amber-500: #D4A23E;
  --amber-300: #E8C989;
  --amber-100: #F5E8C9;

  /* ===== COLOR — Hero tint ===== */
  --mist:   #EEF1F7;
  --mist-2: #E4E9F2;

  /* ===== Semantic ===== */
  --bg:            var(--paper);
  --bg-elev:       #FFFFFF;
  --bg-subtle:     var(--paper-2);
  --bg-hero:       var(--mist);
  --bg-inverse:    var(--navy-900);
  --fg:            var(--ink-900);
  --fg-muted:      var(--ink-700);
  --fg-subtle:     var(--ink-500);
  --fg-on-inverse: #FBFAF7;
  --border:        var(--hairline);
  --accent:        var(--amber-500);
  --link:          var(--navy-700);

  /* Back-compat shim: legacy `--cw-brand` used across main.css */
  --cw-brand: var(--navy-900);

  /* ===== TYPE ===== */
  --font-display: 'Source Serif 4', 'Iowan Old Style', 'Charter', Georgia, 'Times New Roman', serif;
  --font-sans:    'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Radii */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-xs: 0 1px 0 rgba(15, 42, 68, 0.04);
  --shadow-sm: 0 1px 2px rgba(15, 42, 68, 0.06), 0 1px 0 rgba(15, 42, 68, 0.03);
  --shadow-md: 0 2px 6px rgba(15, 42, 68, 0.06), 0 1px 2px rgba(15, 42, 68, 0.04);
  --shadow-lg: 0 12px 32px -12px rgba(15, 42, 68, 0.18), 0 4px 10px -4px rgba(15, 42, 68, 0.06);

  /* Motion */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
}

/* =========================================================================
   Body + display type defaults
   ========================================================================= */

/* Defensive horizontal-overflow guard. `clip` (vs hidden) does not create a
   stacking context, so position:sticky and shadows that bleed outside their
   element keep working. Applied to both html and body so neither element
   ever becomes the sticky scroll container — without this, mobile WebKit
   can promote body to a scroll context and break the sticky header.
   Components that intentionally scroll horizontally
   (.cw-stat-strip__inner, .cw-trust-strip__inner, .cw-archive-filter) still
   work because they set their own overflow-x: auto on themselves. */
html, body { max-width: 100%; }
html, body { overflow-x: clip; }

body {
  background: var(--paper);
  color: var(--ink-700);
  font-family: var(--font-sans);
  letter-spacing: -0.005em;
}

.cw-hero__title,
.cw-section-head__title,
h1.cw-page-title,
.cmh-display,
.cw-how__title,
.cw-journeys-full__group-title,
.cw-popular-tile__title {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

.cw-hero__title { line-height: 1.08; color: var(--ink-900); }
.cw-section-head__title { color: var(--ink-900); letter-spacing: -0.02em; }

/* Tabular numerals */
.cmh-mono,
.cw-stat__value,
.cw-num-display {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* =========================================================================
   Header — masthead with amber dot
   ========================================================================= */

.cw-site-header {
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
  position: sticky;
  top: 0;
  z-index: 50;
  /* Own stacking + paint context so the sticky header is not visually
     clipped by the hero gradient / backdrop-filter under it during scroll. */
  isolation: isolate;
  will-change: transform;
}
.cw-site-header__inner { min-height: 64px; }

/* Desktop header tightening — at 1024–1099 the logo + 5 nav items + search
   ran out of room and the right edge clipped. Shrink the search input and
   tighten the nav gap until ~1100. Above 1100 the header has plenty of
   room and reverts to the comfortable defaults set in main.css. */
@media (min-width: 900px) and (max-width: 1099px) {
  .cw-site-header__right { gap: 1rem; }
  .cw-primary-nav__list  { gap: 1rem; }
  .cw-search             { flex: 0 1 auto; min-width: 0; }
  .cw-search__input      { width: 160px; }
}
/* Blurred-glass header is desktop-only. On mobile, backdrop-filter creates
   a containing block that traps the position:fixed menu drawer inside the
   header's bounds, breaking the hamburger menu. */
@media (min-width: 900px) {
  .cw-site-header {
    background: rgba(251, 250, 247, 0.92);
    backdrop-filter: blur(12px) saturate(110%);
    -webkit-backdrop-filter: blur(12px) saturate(110%);
  }
}
.cw-logo {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.015em;
  color: var(--navy-900);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.cw-logo__mark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  color: var(--navy-900);
}
.cw-logo__mark svg {
  width: 36px;
  height: 36px;
  display: block;
}
.cw-logo__mark rect {
  fill: var(--navy-900);
}
.cw-logo__mark path {
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cw-logo__mark circle {
  fill: var(--amber-500);
}
.cw-logo__mark--footer {
  color: var(--paper);
}
.cw-logo__mark--footer rect {
  fill: rgba(255, 255, 255, 0.12);
  stroke: rgba(255, 255, 255, 0.2);
  stroke-width: 1;
}
.cw-logo__word {
  display: inline-block;
}
.cw-logo__dot {
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: var(--amber-500);
  margin-left: 4px;
  margin-top: 6px;
  display: inline-block;
}

.cw-primary-nav__sep {
  width: 1px;
  height: 14px;
  background: var(--hairline);
  list-style: none;
}
.cw-primary-nav__lang a { color: var(--ink-500); font-weight: 500; }
.cw-primary-nav__lang a:hover { color: var(--navy-700); }

/* =========================================================================
   Hero — gradient mist, eyebrow pill, featured 2x2 grid
   ========================================================================= */

.cw-hero,
.cw-hero--stage {
  background: linear-gradient(180deg, var(--mist) 0%, var(--mist-2) 100%);
  padding: 64px 0 80px;
}
.cw-hero__body { max-width: 560px; }
.cw-hero__stages {
  display: block;
  padding-top: 32px;
  max-width: 560px;
  justify-self: end;
  width: 100%;
}
.cw-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.cw-hero__eyebrow {
  display: inline-block;
  background: #FFFFFF;
  border: 1px solid var(--hairline);
  padding: 8px 14px;
  border-radius: 999px;
  font: 600 12px/1 var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-700);
  margin-bottom: 28px;
}
.cw-hero__title {
  font-family: var(--font-display);
  font-size: clamp(38px, 5vw, 60px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--ink-900);
  margin: 0 0 24px;
  max-width: 560px;
}
.cw-hero__lede {
  font: 400 17px/1.55 var(--font-sans);
  color: var(--ink-700);
  max-width: 480px;
  margin: 0 0 28px;
}
.cw-hero__browse-link {
  display: inline-block;
  margin-top: 18px;
  font: 500 14px var(--font-sans);
  color: var(--navy-700);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--navy-300);
}

/* Assistant card — elevated, shadow-lg (the one elevated surface per screen) */
.cw-assistant {
  background: #FFFFFF;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  box-shadow: var(--shadow-lg);
  max-width: 560px;
}
.cw-assistant__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.cw-assistant__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 11px/1 var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber-600);
}
.cw-assistant__dot {
  width: 5px;
  height: 5px;
  border-radius: 99px;
  background: var(--amber-500);
  display: inline-block;
}
.cw-assistant__label {
  font: 600 15px/1 var(--font-sans);
  color: var(--ink-900);
}
.cw-assistant__row {
  display: flex;
  gap: 8px;
}
.cw-assistant__input {
  flex: 1;
  min-width: 0;
  font: 400 14px/1.4 var(--font-sans);
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--hairline);
  background: var(--paper);
  color: var(--ink-900);
}
.cw-assistant__input:focus {
  outline: none;
  border-color: var(--navy-500);
  box-shadow: 0 0 0 2px rgba(46, 90, 133, 0.2);
}
.cw-assistant__submit {
  background: var(--navy-900);
  color: var(--paper);
  border: 0;
  border-radius: 6px;
  padding: 10px 18px;
  font: 500 14px var(--font-sans);
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background var(--dur-1) var(--ease);
}
.cw-assistant__submit:hover { background: var(--navy-800); }
.cw-assistant__examples {
  display: flex;
  gap: 6px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.cw-assistant__example {
  font: 500 12px var(--font-sans);
  color: var(--ink-700);
  background: var(--paper);
  border: 1px solid var(--hairline);
  padding: 6px 11px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease);
}
.cw-assistant__example:hover { border-color: var(--navy-300); }
.cw-assistant__disclaimer {
  font: 400 11.5px/1.5 var(--font-sans);
  color: var(--ink-500);
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--paper-3);
}

/* Assistant results panel — tools + verbatim official-source quotes */
.cw-assistant-results {
  margin-top: 28px;
  background: #FFFFFF;
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--amber-500);
  border-radius: var(--radius-lg);
  padding: 24px 26px;
  box-shadow: var(--shadow-sm);
  max-width: 560px;
}
.cw-assistant-results__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.cw-assistant-results__eyebrow {
  font: 600 12px/1 var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.cw-assistant-results__close {
  background: transparent;
  border: 0;
  font: 400 22px/1 var(--font-sans);
  color: var(--ink-500);
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.cw-assistant-results__close:hover { color: var(--navy-900); }
.cw-assistant-results__title {
  font: 500 18px/1.2 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--ink-900);
  margin: 16px 0 10px;
}
.cw-assistant-results__note {
  font: 400 12px/1.5 var(--font-sans);
  color: var(--ink-500);
  margin: 0 0 12px;
}
.cw-assistant-results__loading {
  font: 400 14px var(--font-sans);
  color: var(--ink-500);
  padding: 8px 0;
}
.cw-assistant-results__empty {
  font: 400 14px/1.6 var(--font-sans);
  color: var(--ink-700);
}
.cw-assistant-results__empty p { margin: 0 0 8px; }
.cw-assistant-results__empty a { color: var(--navy-700); text-decoration: underline; }

/* Tool hits — match journey-card visual language */
.cw-assistant-results__tools {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 4px;
}
.cw-assistant-hit {
  display: block;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur-1) var(--ease);
}
.cw-assistant-hit:hover { border-color: var(--navy-300); }
.cw-assistant-hit__kind {
  display: block;
  font: 600 11px/1 var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: 6px;
}
.cw-assistant-hit__title {
  display: block;
  font: 500 15px/1.3 var(--font-display);
  color: var(--ink-900);
  margin-bottom: 4px;
}
.cw-assistant-hit__desc {
  display: block;
  font: 400 13px/1.5 var(--font-sans);
  color: var(--ink-700);
  margin-bottom: 6px;
}
.cw-assistant-hit__cta {
  display: inline-block;
  font: 500 13px var(--font-sans);
  color: var(--navy-700);
}

/* Quote cards — verbatim passages from official docs */
.cw-assistant-results__quotes {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cw-assistant-quote {
  background: var(--paper-2);
  border-left: 3px solid var(--navy-900);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 14px 16px;
}
.cw-assistant-quote__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.cw-assistant-quote__badge {
  font: 600 10px/1 var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--navy-900);
  padding: 5px 9px;
  border-radius: 4px;
}
.cw-assistant-quote__section {
  font: 400 12px/1.4 var(--font-sans);
  color: var(--ink-500);
}
.cw-assistant-quote__text {
  font: 400 14px/1.6 var(--font-display);
  color: var(--ink-900);
  margin: 0 0 8px;
}
.cw-assistant-quote__text p { margin: 0 0 10px; }
.cw-assistant-quote__text p:last-child { margin-bottom: 0; }
.cw-assistant-quote__text strong { font-weight: 600; }
.cw-assistant-quote__text em { font-style: italic; }
.cw-assistant-quote__text code {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--paper-3);
  padding: 1px 5px;
  border-radius: 3px;
}
.cw-assistant-quote__text ul {
  margin: 6px 0 10px;
  padding-left: 20px;
  list-style-type: disc;
}
.cw-assistant-quote__text li { margin: 4px 0; font-family: var(--font-sans); font-size: 14px; line-height: 1.55; }
.cw-assistant-quote__text a {
  color: var(--navy-700);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--navy-300);
  word-break: break-word;
}
.cw-assistant-quote__text a:hover { text-decoration-color: var(--navy-700); }
.cw-assistant-quote__source {
  font: 500 13px var(--font-sans);
  color: var(--navy-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Hero featured journeys (right column) */
.cw-hero__stages-eyebrow {
  font: 600 12px/1 var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: 14px;
}
.cw-hero__featured-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 14px;
  align-items: stretch;
}
.cw-hero__featured-grid .cw-stage {
  padding: 18px 18px 20px;
  height: 100%;
  flex-direction: column;
  gap: 12px;
}
.cw-hero__featured-grid .cw-stage__icon {
  width: 34px;
  height: 34px;
  margin-bottom: 2px;
}
.cw-hero__featured-grid .cw-stage__body {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.cw-hero__featured-grid .cw-stage__name {
  font-size: 16px;
  margin-bottom: 8px;
}
.cw-hero__featured-grid .cw-stage__promise {
  font-size: 13px;
  line-height: 1.5;
}
.cw-hero__featured-grid .cw-stage__acronyms {
  font-size: 12px;
  margin-top: auto;
  padding-top: 12px;
}
.cw-hero__see-all {
  display: inline-block;
  margin-top: 16px;
  font: 500 14px var(--font-sans);
  color: var(--navy-700);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--navy-300);
}

/* =========================================================================
   Journey tile — shared between hero and full journeys grid
   ========================================================================= */

.cw-stage {
  background: #FFFFFF;
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--amber-500);
  border-radius: var(--radius-md);
  padding: 20px 22px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.cw-stage:hover {
  border-color: var(--navy-300);
  border-left-color: var(--amber-500);
  box-shadow: var(--shadow-md);
}
.cw-stage--featured { border-left-color: var(--amber-500); }
.cw-stage--compact { padding: 16px 18px; }
.cw-stage--soon { opacity: 0.65; pointer-events: none; }
.cw-stage__icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--navy-900);
  color: var(--paper);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cw-stage__icon svg {
  width: 19px;
  height: 19px;
}
.cw-stage__body {
  flex: 1;
  min-width: 0;
  display: block;
}
.cw-stage__name {
  display: block;
  font: 500 17px/1.25 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--ink-900);
  margin-bottom: 8px;
}
.cw-stage__promise {
  display: block;
  font: 400 13px/1.5 var(--font-sans);
  color: var(--ink-700);
}
.cw-stage__acronyms {
  display: block;
  font: 400 12px/1.45 var(--font-sans);
  color: var(--ink-500);
  margin-top: 10px;
}

/* =========================================================================
   Stat strip (trust bar) — now 5 stats
   ========================================================================= */

.cw-stat-strip { background: var(--navy-900); color: var(--paper); }
.cw-stat-strip__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 28px 0;
}
.cw-stat-strip--five { grid-template-columns: repeat(5, 1fr); }
.cw-stat-strip__inner .cw-stat {
  padding-left: 22px;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}
.cw-stat-strip__inner .cw-stat:first-child {
  padding-left: 0;
  border-left: 0;
}
.cw-stat-strip__inner .cw-stat__value {
  font: 500 32px/1 var(--font-display);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--paper);
}
.cw-stat-strip__inner .cw-stat__label {
  font: 400 13px/1.3 var(--font-sans);
  color: #B8C6D9;
  margin-top: 6px;
  display: block;
}

/* "Sourced from" chip row, right below trust bar */
.cw-trust-strip {
  background: #FFFFFF;
  border-bottom: 1px solid var(--hairline);
  padding: 16px 0;
}
.cw-trust-strip__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.cw-trust-strip__label {
  font: 600 12px/1 var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.cw-trust-strip__item {
  font: 500 13px var(--font-sans);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 8px 12px;
  color: var(--ink-900);
}

/* =========================================================================
   Full Journeys grid (two life-stage groups)
   ========================================================================= */

.cw-journeys-full { background: var(--paper); padding: 96px 0 72px; }
.cw-journeys-full .cw-section-head { max-width: 680px; margin: 0 0 48px; }
.cw-section-head__eyebrow {
  display: block;
  font: 600 12px/1 var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: 14px;
}
.cw-section-head__title { font-size: 40px; letter-spacing: -0.02em; margin: 0; }
.cw-section-head__dek { font: 400 17px/1.55 var(--font-sans); color: var(--ink-700); margin: 14px 0 0; }

.cw-journeys-full__group { margin-bottom: 56px; }
.cw-journeys-full__group:last-child { margin-bottom: 0; }
.cw-journeys-full__group-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 18px;
}
.cw-journeys-full__group-num {
  font: 600 12px/1 var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber-600);
}
.cw-journeys-full__group-title {
  font: 500 22px/1.2 var(--font-display);
  letter-spacing: -0.015em;
  color: var(--ink-900);
  margin: 0;
}
.cw-journeys-full__group-rule {
  flex: 1;
  height: 1px;
  background: var(--hairline);
}
.cw-journeys-full__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

/* =========================================================================
   How It Works — three-step explainer
   ========================================================================= */

.cw-how {
  background: var(--paper-2);
  padding: 96px 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.cw-how .cw-section-head { max-width: 680px; margin: 0 0 56px; }
.cw-how__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
}
.cw-how__card {
  background: #FFFFFF;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 28px 28px 32px;
}
.cw-how__num {
  font: 500 40px/1 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--amber-500);
  margin-bottom: 18px;
}
.cw-how__title {
  font: 500 22px/1.25 var(--font-display);
  letter-spacing: -0.015em;
  color: var(--ink-900);
  margin: 0 0 10px;
}
.cw-how__body {
  font: 400 15px/1.6 var(--font-sans);
  color: var(--ink-700);
  margin: 0;
}

/* =========================================================================
   Source Proof — cited quotes
   ========================================================================= */

.cw-proof { background: var(--paper); padding: 96px 0; }
.cw-proof__grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 64px;
  align-items: start;
}
.cw-proof__lede .cw-section-head__title {
  font-size: 40px;
  letter-spacing: -0.02em;
  margin: 0;
}
.cw-proof__copy {
  font: 400 16px/1.6 var(--font-sans);
  color: var(--ink-700);
  margin: 18px 0 0;
  max-width: 420px;
}
.cw-proof__link {
  display: inline-block;
  margin-top: 20px;
  font: 500 14px var(--font-sans);
  color: var(--navy-700);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--navy-300);
}
.cw-proof__quotes {
  display: grid;
  gap: 16px;
}
.cw-proof__card {
  background: #FFFFFF;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 22px 24px;
  display: flex;
  gap: 20px;
  box-shadow: var(--shadow-sm);
}
.cw-proof__badge {
  flex-shrink: 0;
  font: 600 11px/1 var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--navy-900);
  padding: 6px 10px;
  border-radius: 4px;
  height: fit-content;
}
.cw-proof__quote {
  font: italic 400 16px/1.6 var(--font-display);
  color: var(--ink-900);
  margin: 0;
}
.cw-proof__meta {
  font: 400 13px var(--font-sans);
  color: var(--ink-500);
  margin-top: 10px;
}
.cw-proof__meta a { color: var(--navy-700); text-decoration: underline; text-underline-offset: 3px; }

/* =========================================================================
   Popular calculators (demoted row, 3 cols)
   ========================================================================= */

.cw-popular { background: var(--paper); padding: 72px 0 96px; }
.cw-popular .cw-section-head__title { font-size: 32px; }
.cw-popular-grid--three { grid-template-columns: repeat(3, 1fr) !important; }
.cw-popular-tile__inside {
  font: 400 12px var(--font-sans);
  color: var(--ink-500);
}

/* Homepage popular calculator tiles — restructured hierarchy:
   small eyebrow (which guide it lives inside) → short plain title
   → smaller descriptor → run CTA. Scoped to .cw-popular--front so
   archive layouts (.cw-archive-section--grouped) are untouched. */
.cw-popular--front .cw-popular-tile { gap: 6px; }
.cw-popular--front .cw-popular-tile__eyebrow {
  font: 600 11px/1 var(--font-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.cw-popular--front .cw-popular-tile__title {
  font: 600 17px/1.3 var(--font-display);
  letter-spacing: -0.015em;
  color: var(--ink-900);
}
.cw-popular--front .cw-popular-tile__sub {
  font: 400 13px/1.5 var(--font-sans);
  color: var(--ink-700);
}
.cw-popular--front .cw-popular-tile__meta {
  margin-top: auto;
  padding-top: 6px;
  justify-content: flex-end;
}

/* =========================================================================
   Site footer — rich 4-column dark
   ========================================================================= */

.cw-site-footer {
  background: var(--navy-900);
  color: var(--paper);
  padding: 72px 0 40px;
  margin-top: 0;
}
.cw-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1.3fr 1.3fr 1.3fr 1.3fr;
  gap: 40px;
  margin-bottom: 56px;
}
.cw-footer__brand-name {
  font: 600 20px/1 var(--font-display);
  letter-spacing: -0.015em;
  color: var(--paper);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.cw-footer__brand-dot {
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: var(--amber-500);
  margin-top: 6px;
  display: inline-block;
}
.cw-footer__tagline {
  font: 400 14px/1.6 var(--font-sans);
  color: #B8C6D9;
  margin: 14px 0 0;
  max-width: 320px;
}
.cw-footer__lang {
  margin-top: 22px;
  display: flex;
  gap: 14px;
  font: 500 13px var(--font-sans);
  color: #B8C6D9;
}
.cw-footer__lang a { color: inherit; text-decoration: none; }
.cw-footer__lang--active { color: var(--paper) !important; }
.cw-footer__lang-sep { color: rgba(255, 255, 255, 0.2); }

.cw-footer__col-title {
  font: 600 12px/1 var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber-500);
  margin: 0 0 18px;
  list-style: none;
  cursor: default;
}
.cw-footer__col-title::-webkit-details-marker,
.cw-footer__col-title::marker { display: none; content: ''; }

/* Keep the content block visible on desktop even if `open` attribute
   happens to be absent (e.g. right before JS syncs). */
@media (min-width: 641px) {
  .cw-footer__col > .cw-footer__list { display: flex; }
}
.cw-footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cw-footer__list a {
  font: 400 14px var(--font-sans);
  color: #DDE5EE;
  text-decoration: none;
  transition: color var(--dur-1) var(--ease);
}
.cw-footer__list a:hover { color: var(--paper); }
.cw-footer__list-meta {
  font: 400 13px var(--font-sans);
  color: #8AA3BF;
  margin-top: 6px;
}

.cw-footer__bottom {
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font: 400 12px var(--font-sans);
  color: #8AA3BF;
  flex-wrap: wrap;
  gap: 12px;
}
.cw-footer__bottom a { color: #DDE5EE; text-decoration: underline; text-underline-offset: 3px; }

/* =========================================================================
   Interior pages — unified hero, byline, breadcrumbs, filters, cards
   (applies to single calculator, archive, journey, page, search, 404)
   ========================================================================= */

.cw-page-hero {
  background: linear-gradient(180deg, var(--mist) 0%, var(--mist-2) 100%);
  padding: 56px 0 48px;
  border-bottom: 1px solid var(--hairline);
}
.cw-page-hero--404 { padding: 96px 0 80px; }
.cw-page-hero__eyebrow {
  display: inline-block;
  background: #FFFFFF;
  border: 1px solid var(--hairline);
  padding: 8px 14px;
  border-radius: 999px;
  font: 600 12px/1 var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-700);
  margin-bottom: 22px;
}
.cw-page-hero__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  margin: 0 0 16px;
  max-width: 820px;
}
.cw-page-hero__dek {
  font: 400 17px/1.55 var(--font-sans);
  color: var(--ink-700);
  max-width: 720px;
  margin: 0;
}

.cw-article-head__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  margin: 0 0 14px;
}
.cw-article-head__dek {
  font: 400 17px/1.55 var(--font-sans);
  color: var(--ink-700);
  margin: 0 0 20px;
  max-width: 680px;
}

/* Byline — editorial provenance */
.cw-byline {
  font: 400 13px/1.5 var(--font-sans);
  color: var(--ink-500);
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 16px;
}
.cw-byline__label { color: var(--ink-500); }
.cw-byline__value { color: var(--ink-900); }
.cw-byline__value a { color: var(--navy-700); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--navy-300); }
.cw-byline__sep { color: var(--ink-300); }
.cw-byline__live-dot {
  width: 7px;
  height: 7px;
  border-radius: 99px;
  background: var(--success-700, #2F6B4F);
  display: inline-block;
  margin-right: 4px;
}

/* Breadcrumbs */
.cw-crumbs,
.cw-breadcrumbs {
  font: 400 13px/1.4 var(--font-sans);
  color: var(--ink-500);
  margin-bottom: 20px;
}
.cw-crumbs ol,
.cw-breadcrumbs ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.cw-crumbs a,
.cw-breadcrumbs a { color: var(--navy-700); text-decoration: none; }
.cw-crumbs a:hover,
.cw-breadcrumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Archive meta strip */
.cw-archive-meta {
  margin-top: 18px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  font: 400 13px var(--font-sans);
  color: var(--ink-500);
}
.cw-archive-meta__stat { display: inline-flex; gap: 6px; align-items: baseline; }
.cw-archive-meta__stat strong { font-weight: 600; color: var(--ink-900); }
.cw-archive-meta__sep { color: var(--ink-300); }

/* Archive filter chips */
.cw-archive-filter {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 32px 0 40px;
}
.cw-archive-filter__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 500 13px var(--font-sans);
  color: var(--ink-700);
  background: #FFFFFF;
  border: 1px solid var(--hairline);
  padding: 8px 14px;
  border-radius: 999px;
  text-decoration: none;
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.cw-archive-filter__chip:hover { border-color: var(--navy-300); }
.cw-archive-filter__chip.is-active {
  background: var(--navy-900);
  color: var(--paper);
  border-color: var(--navy-900);
}
.cw-archive-filter__count {
  font: 500 11px var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink-500);
}
.cw-archive-filter__chip.is-active .cw-archive-filter__count { color: #B8C6D9; }

/* Archive body wrapper */
.cw-archive-body { padding: 48px 0 96px; }
.cw-archive-section { margin-bottom: 72px; }
.cw-archive-section:last-child { margin-bottom: 0; }

/* Category group — <details> so mobile users get accordion behavior.
   Desktop: always open (JS + open attr), no toggle affordance.
   Mobile: closed by default, tap to expand. */
.cw-archive-section--grouped { margin-bottom: 56px; scroll-margin-top: 88px; }
.cw-archive-group__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 18px;
  list-style: none;
  cursor: default;
}
.cw-archive-group__head::-webkit-details-marker,
.cw-archive-group__head::marker { display: none; content: ''; }
.cw-archive-group__num {
  font: 600 12px/1 var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber-600);
}
.cw-archive-group__title {
  font: 500 22px/1.2 var(--font-display);
  letter-spacing: -0.015em;
  color: var(--ink-900);
  margin: 0;
}
.cw-archive-group__count {
  font: 400 13px var(--font-sans);
  color: var(--ink-500);
}
.cw-archive-group__rule {
  flex: 1;
  height: 1px;
  background: var(--hairline);
}
.cw-archive-group__link {
  font: 500 13px var(--font-sans);
  color: var(--navy-700);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--navy-300);
  white-space: nowrap;
}

/* Category cards (pillar /tools/ page) */
.cw-category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 20px;
}
.cw-category-card {
  background: #FFFFFF;
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--amber-500);
  border-radius: var(--radius-md);
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.cw-category-card:hover { border-color: var(--navy-300); border-left-color: var(--amber-500); box-shadow: var(--shadow-md); }
.cw-category-card__mark {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--navy-900);
  color: var(--paper);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 600 14px var(--font-display);
  letter-spacing: -0.01em;
  flex-shrink: 0;
}
.cw-category-card__name {
  font: 500 17px/1.3 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--ink-900);
}
.cw-category-card__meta {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font: 400 13px var(--font-sans);
  color: var(--ink-500);
}
.cw-category-card__arrow { color: var(--navy-700); font-weight: 500; }

/* Calculator tiles on archive pages — 3-col, no "Updated" per tile */
.cw-popular-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.cw-popular-tile {
  background: #FFFFFF;
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--amber-500);
  border-radius: var(--radius-md);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.cw-popular-tile:hover { border-color: var(--navy-300); border-left-color: var(--amber-500); box-shadow: var(--shadow-md); }
.cw-popular-tile__title {
  font: 600 15px/1.35 var(--font-sans);
  color: var(--ink-900);
}
.cw-popular-tile__excerpt {
  font: 400 13px/1.55 var(--font-sans);
  color: var(--ink-700);
  flex: 1;
}
.cw-popular-tile__meta {
  margin-top: auto;
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  font: 500 13px var(--font-sans);
}
.cw-popular-tile__cta { color: var(--navy-700); }

/* Calculator single layout */
.cw-calc-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 56px;
  padding: 48px 0 96px;
  align-items: start;
}
.cw-calc-layout__sidebar {
  position: sticky;
  top: 88px;
}
.cw-article-body {
  font: 400 16px/1.7 var(--font-sans);
  color: var(--ink-700);
  max-width: 720px;
}
.cw-article-body h2 {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink-900);
  margin: 48px 0 14px;
}
.cw-article-body h3 {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink-900);
  margin: 32px 0 10px;
}
.cw-article-body p { margin: 0 0 16px; }
.cw-article-body ul,
.cw-article-body ol { margin: 0 0 20px; padding-left: 24px; }
.cw-article-body li { margin: 8px 0; }
.cw-article-body code {
  font-family: var(--font-mono);
  font-size: 14px;
  background: var(--paper-2);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--ink-900);
}
.cw-article-body blockquote {
  margin: 24px 0;
  padding: 16px 20px;
  background: var(--paper-2);
  border-left: 3px solid var(--amber-500);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-style: italic;
  color: var(--ink-900);
}
.cw-article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.cw-article-body th,
.cw-article-body td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--hairline);
  text-align: left;
}
.cw-article-body th {
  background: var(--paper-2);
  font-weight: 600;
  color: var(--ink-900);
}
.cw-article-body a {
  color: var(--navy-700);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--navy-300);
}

.cw-methodology {
  margin: 48px 0;
  padding: 28px 32px;
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
}
.cw-methodology h2 {
  font: 500 22px/1.2 var(--font-display);
  letter-spacing: -0.015em;
  color: var(--ink-900);
  margin: 0 0 14px;
}

/* Buttons */
.cw-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 6px;
  font: 500 14px var(--font-sans);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.cw-btn--primary {
  background: var(--navy-900);
  color: var(--paper);
  border: 1px solid var(--navy-900);
}
.cw-btn--primary:hover { background: var(--navy-800); }
.cw-btn--ghost {
  background: transparent;
  color: var(--navy-900);
  border: 1px solid var(--navy-900);
}
.cw-btn--ghost:hover { background: rgba(15, 42, 68, 0.04); }

/* 404 actions */
.cw-404-actions {
  margin-top: 28px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Journey hero — bring current marker classes into the system */
.cw-journey-hero { padding: 56px 0 32px; }
.cw-journey-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.5vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  margin: 14px 0 16px;
  max-width: 840px;
}
.cw-eyebrow {
  font: 600 12px/1 var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin: 0;
}
.cw-dek {
  font: 400 17px/1.55 var(--font-sans);
  color: var(--ink-700);
  max-width: 720px;
  margin: 0 0 24px;
}

/* Province card (journey index) */
.cw-province-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.cw-province-card {
  background: #FFFFFF;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.cw-province-card:hover { border-color: var(--navy-300); box-shadow: var(--shadow-md); }
.cw-province-card strong {
  font: 500 17px/1.25 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--ink-900);
}
.cw-province-card span {
  font: 400 13px/1.5 var(--font-sans);
  color: var(--ink-700);
}

/* Generic page layout + TOC */
.cw-page-layout {
  padding: 48px 0 96px;
}
.cw-page-layout--with-toc {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.cw-page-toc {
  position: sticky;
  top: 88px;
  background: #FFFFFF;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 20px 22px;
}
.cw-page-toc__title {
  font: 600 12px/1 var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin: 0 0 14px;
  list-style: none;
  cursor: default;
}
.cw-page-toc__title::-webkit-details-marker,
.cw-page-toc__title::marker { display: none; content: ''; }
.cw-page-toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
  font: 400 14px/1.5 var(--font-sans);
}
.cw-page-toc__list li { margin: 8px 0; }
.cw-page-toc__list a {
  color: var(--ink-700);
  text-decoration: none;
}
.cw-page-toc__list a:hover { color: var(--navy-700); }
.cw-page-article { max-width: 760px; }

/* Search page */
.cw-search-results { padding: 48px 0 96px; }

/* =========================================================================
   Responsive — collapse multi-column grids below 1000px
   ========================================================================= */

@media (max-width: 1024px) {
  .cw-hero { padding: 56px 0 72px; }
  .cw-hero__grid { grid-template-columns: 1fr; gap: 48px; }
  .cw-hero__stages { max-width: none; justify-self: stretch; padding-top: 0; }
  .cw-hero__featured-grid { grid-template-columns: 1fr 1fr; }
  .cw-journeys-full__grid { grid-template-columns: 1fr 1fr; }
  .cw-how__grid { grid-template-columns: 1fr; gap: 16px; }
  .cw-proof__grid { grid-template-columns: 1fr; gap: 40px; }
  .cw-popular-grid,
  .cw-popular-grid--three { grid-template-columns: 1fr 1fr !important; }
  .cw-category-grid { grid-template-columns: 1fr 1fr; }
  .cw-province-grid { grid-template-columns: 1fr 1fr; }
  .cw-stat-strip__inner,
  .cw-stat-strip--five { grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 22px 0; }
  .cw-stat-strip__inner .cw-stat:nth-child(4),
  .cw-stat-strip__inner .cw-stat:nth-child(5) { padding-left: 0; border-left: 0; }
  .cw-footer__grid { grid-template-columns: 1fr 1fr; }
  .cw-calc-layout { grid-template-columns: 1fr; gap: 32px; }
  .cw-calc-layout__sidebar { position: static; }
  .cw-page-layout--with-toc { grid-template-columns: 1fr; }
  .cw-page-toc { position: static; }
}

@media (max-width: 640px) {
  /* Section padding — reduce the 96px desktop rhythm to something readable on phones */
  .cw-hero,
  .cw-hero--stage { padding: 40px 0 48px; }
  .cw-journeys-full { padding: 56px 0 40px; }
  .cw-journeys-full__group { margin-bottom: 40px; }
  .cw-how { padding: 56px 0; }
  .cw-proof { padding: 56px 0; }
  .cw-popular { padding: 48px 0 64px; }
  .cw-page-hero { padding: 40px 0 32px; }
  .cw-archive-body { padding: 32px 0 64px; }
  .cw-archive-section { margin-bottom: 48px; }
  .cw-calc-layout { padding: 32px 0 64px; }

  /* Grids → 1 col */
  .cw-hero__featured-grid { grid-template-columns: 1fr; }
  .cw-journeys-full__grid { grid-template-columns: 1fr; }
  .cw-popular-grid,
  .cw-popular-grid--three { grid-template-columns: 1fr !important; }
  .cw-category-grid { grid-template-columns: 1fr; }
  .cw-province-grid { grid-template-columns: 1fr; }
  .cw-footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .cw-footer { padding: 48px 0 32px; }

  /* Stat strip — horizontal scroll, generous per-stat padding */
  .cw-stat-strip__inner,
  .cw-stat-strip--five {
    grid-template-columns: none;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0;
    padding: 18px 20px;
  }
  .cw-stat-strip__inner::-webkit-scrollbar { display: none; }
  .cw-stat-strip__inner .cw-stat {
    flex: 0 0 auto;
    padding: 0 20px;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    border-bottom: 0;
    min-width: 130px;
  }
  .cw-stat-strip__inner .cw-stat:first-child {
    padding-left: 0;
    border-left: 0;
  }
  .cw-stat-strip__inner .cw-stat__value {
    font-size: 20px;
    font-family: var(--font-display);
    line-height: 1;
  }
  .cw-stat-strip__inner .cw-stat__label {
    font-size: 11px;
    line-height: 1.3;
    margin-top: 4px;
  }

  /* Trust-strip chips — horizontal scroll, bigger chip padding for tap comfort */
  .cw-trust-strip { padding: 14px 0; }
  .cw-trust-strip__inner {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
    padding: 0 20px;
    gap: 10px;
    scrollbar-width: none;
  }
  .cw-trust-strip__inner::-webkit-scrollbar { display: none; }
  .cw-trust-strip__label { flex-shrink: 0; font-size: 12px; }
  .cw-trust-strip__item {
    flex-shrink: 0;
    font-size: 13px;
    padding: 8px 14px;
    white-space: nowrap;
  }

  /* Container side padding — more breathing room against screen edges */
  .cw-container { padding: 0 20px; }

  /* Page hero — balanced padding, readable but not wasteful */
  .cw-page-hero { padding: 32px 0 26px; }
  .cw-page-hero__dek { font-size: 15px; line-height: 1.55; max-width: none; margin-bottom: 4px; }
  .cw-page-hero__eyebrow { margin-bottom: 14px; }
  .cw-page-hero__title { font-size: 28px; margin-bottom: 12px; line-height: 1.15; }

  /* Byline under article titles — compact row instead of multi-line card */
  .cw-byline,
  .cw-byline--page {
    margin-top: 12px;
    gap: 4px 10px;
    font-size: 11.5px;
    line-height: 1.4;
    padding: 10px 14px;
    background: transparent;
    border: 0;
  }
  .cw-byline__item { display: inline-flex; gap: 5px; align-items: baseline; }
  .cw-byline__label { color: var(--ink-500); font-size: 11px; }
  .cw-byline__value { font-size: 12px; }
  .cw-byline__live-dot { width: 6px; height: 6px; }

  /* Article body kickoff — more breathing room before the first H2 so
     the page-hero→body transition doesn't feel crammed. */
  .cw-article-body > h2:first-child,
  .cw-article-body > :first-child + h2 { margin-top: 12px; }

  /* Typography — tame the big serif headings */
  .cw-section-head__title { font-size: 28px; }
  .cw-page-hero__title,
  .cw-article-head__title { font-size: 28px; }
  .cw-hero__title { font-size: 36px; line-height: 1.1; }

  /* Section heads — tighter top margin, reduced dek */
  .cw-journeys-full .cw-section-head,
  .cw-how .cw-section-head,
  .cw-proof .cw-section-head { margin-bottom: 32px; }
  .cw-section-head__dek { font-size: 15px; }
  .cw-hero__lede { font-size: 16px; }

  /* Assistant form → inputs stack, submit full width */
  .cw-assistant { padding: 18px 18px; }
  .cw-assistant__row { flex-direction: column; }
  .cw-assistant__submit { width: 100%; justify-content: center; }
  .cw-assistant__examples { gap: 6px; }

  /* 404 actions stack */
  .cw-404-actions { flex-direction: column; align-items: stretch; }
  .cw-404-actions .cw-btn { justify-content: center; }

  /* Eyebrow pill tighter */
  .cw-page-hero__eyebrow { font-size: 11px; padding: 6px 12px; }
  .cw-hero__eyebrow { font-size: 11px; padding: 7px 12px; }

  /* How-cards + Proof cards pad less */
  .cw-how__card { padding: 24px 22px 26px; }
  .cw-how__num { font-size: 34px; margin-bottom: 14px; }
  .cw-how__title { font-size: 20px; }
  .cw-proof__card { padding: 18px 20px; gap: 14px; flex-direction: column; }
  .cw-proof__badge { align-self: flex-start; }
  .cw-proof__quote { font-size: 15px; }

  /* Journeys full-group head — keep the amber 01/02 but tighter layout */
  .cw-journeys-full__group-head { gap: 10px; margin-bottom: 14px; }
  .cw-journeys-full__group-title { font-size: 20px; }

  /* Category cards on archive — ensure they render nicely */
  .cw-category-card { padding: 18px 20px; gap: 12px; }
  .cw-category-card__name { font-size: 16px; }

  /* Byline wraps to column on narrow widths */
  .cw-byline { flex-direction: row; flex-wrap: wrap; gap: 6px 10px; font-size: 12px; }
  .cw-byline__sep { display: none; }

  /* Archive filter chips — horizontal scroll, bigger tap targets */
  .cw-archive-filter {
    margin: 28px -20px 32px;
    padding: 4px 20px 10px;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .cw-archive-filter::-webkit-scrollbar { display: none; }
  .cw-archive-filter__chip {
    font-size: 13px;
    padding: 8px 14px;
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* Footer columns as accordions */
  .cw-footer__col {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding: 14px 0;
  }
  .cw-footer__col:last-of-type { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
  .cw-footer__col-title {
    margin: 0;
    padding: 4px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .cw-footer__col-title::after {
    content: '+';
    font: 400 20px/1 var(--font-sans);
    color: var(--amber-500);
    letter-spacing: 0;
    transition: transform var(--dur-1) var(--ease);
  }
  .cw-footer__col[open] > .cw-footer__col-title::after {
    content: '–';
  }
  .cw-footer__col > .cw-footer__list {
    padding-top: 14px;
  }
  .cw-footer__grid { margin-bottom: 28px; }

  /* On-this-page TOC on long pages — accordion + tighter padding on mobile */
  .cw-page-toc {
    margin-bottom: 24px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
  }
  .cw-page-toc__title {
    margin: 0;
    padding: 4px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .cw-page-toc__title::after {
    content: '+';
    font: 400 20px/1 var(--font-sans);
    color: var(--amber-500);
  }
  .cw-page-toc[open] > .cw-page-toc__title::after { content: '–'; }
  .cw-page-toc__list { margin-top: 12px; padding-left: 20px; font-size: 14px; }
  .cw-page-toc__list li { margin: 6px 0; }

  /* Generic page body — tighten vertical rhythm on mobile */
  .cw-page-layout { padding: 24px 0 56px; }
  .cw-page-article { max-width: none; }
  .cw-article-body {
    font-size: 15px;
    line-height: 1.65;
  }
  .cw-article-body h2 {
    font-size: 22px;
    line-height: 1.25;
    margin: 28px 0 10px;
  }
  .cw-article-body h3 {
    font-size: 18px;
    margin: 20px 0 8px;
  }
  .cw-article-body p { margin: 0 0 12px; }
  .cw-article-body ul,
  .cw-article-body ol { margin: 0 0 14px; padding-left: 22px; }
  .cw-article-body li { margin: 6px 0; }
  .cw-article-body blockquote {
    margin: 16px 0;
    padding: 12px 16px;
  }

  /* Wide tables get horizontal scroll so they never break viewport */
  .cw-article-body table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 13px;
    max-width: 100%;
  }
  .cw-article-body th,
  .cw-article-body td {
    padding: 7px 10px;
    white-space: nowrap;
  }

  /* Single calc page — hero + methodology + related, tighter rhythm */
  .cw-article-head__title { font-size: 26px; line-height: 1.15; margin: 0 0 10px; }
  .cw-article-head__dek { font-size: 15px; line-height: 1.55; margin-bottom: 14px; }
  .cw-methodology {
    margin: 32px 0;
    padding: 18px 18px 20px;
  }
  .cw-methodology h2 { font-size: 18px; margin-bottom: 10px; }
  .cw-methodology p { font-size: 14px; line-height: 1.6; }

  /* FAQ — tighten question-row spacing */
  .cw-faq-item {
    padding: 12px 14px;
  }
  .cw-faq-item summary,
  .cw-faq-item [itemprop="name"] {
    font-size: 15px;
  }

  /* Related calcs / sidebar flows below; tighten card padding on mobile */
  .cw-calc-layout__sidebar .cw-related,
  .cw-related {
    margin-top: 24px;
  }
  .cw-related h2,
  .cw-side-rail__title {
    font-size: 16px;
    margin-bottom: 12px;
  }

  /* Sources list compact */
  .cw-sources,
  .cw-sources__group {
    font-size: 14px;
  }
  .cw-sources ul { padding-left: 20px; margin: 8px 0 16px; }
  .cw-sources li { margin: 4px 0; }

  /* Grouped archive: tap-to-expand accordions with generous row padding */
  .cw-archive-section--grouped {
    margin-bottom: 0;
    border-top: 1px solid var(--hairline);
    padding: 20px 0;
  }
  .cw-archive-section--grouped:last-of-type {
    border-bottom: 1px solid var(--hairline);
  }
  .cw-archive-group__head {
    flex-wrap: nowrap;
    gap: 12px;
    margin-bottom: 0;
    padding: 6px 0;
    cursor: pointer;
    align-items: center;
  }
  .cw-archive-group__head::after {
    content: '+';
    font: 400 24px/1 var(--font-sans);
    color: var(--amber-500);
    margin-left: auto;
    padding: 0 4px;
  }
  .cw-archive-section--grouped[open] > .cw-archive-group__head::after {
    content: '–';
  }
  .cw-archive-group__rule,
  .cw-archive-group__link { display: none; }
  .cw-archive-group__title { font-size: 18px; flex: 1; min-width: 0; }
  .cw-archive-group__count { white-space: nowrap; }

  /* Expanded tile list: compact rows with touch-friendly height */
  .cw-archive-section--grouped .cw-popular-grid,
  .cw-archive-section--grouped .cw-popular-grid--three {
    grid-template-columns: 1fr !important;
    gap: 4px;
    padding: 16px 0 10px;
  }
  .cw-archive-section--grouped .cw-popular-tile {
    border: 0;
    border-left: 3px solid var(--amber-500);
    border-radius: 0;
    box-shadow: none;
    padding: 14px 16px;
    gap: 4px;
    background: transparent;
    min-height: 44px;
  }
  .cw-archive-section--grouped .cw-popular-tile__excerpt { display: none; }
  .cw-archive-section--grouped .cw-popular-tile__title { font-size: 15px; line-height: 1.4; }
  .cw-archive-section--grouped .cw-popular-tile__meta { margin-top: 4px; }
  .cw-archive-section--grouped .cw-popular-tile__cta { font-size: 13px; }
}

/* =========================================================================
   Launch hardening — mobile overflow fixes (last-loaded, wins cascade)

   Specific symptoms addressed:
   - Hero / assistant card pushed past the right viewport edge at 390-430px
   - Assistant CTA collapsed to a bare unlabeled arrow (label was hidden)
   - Stage tiles, popular tiles overflowing flex/grid parents (min-width:0)
   - Calc page byline + breadcrumb forcing horizontal scroll on long values
   No body { overflow-x: hidden } band-aid: each rule targets its own issue.
   ========================================================================= */

@media (max-width: 640px) {
  /* Keep CTA labelled. Earlier mobile rule hid the label and left only the
     arrow, which is not an accessible mobile button. The submit row already
     stacks to its own line via .cw-assistant__row { flex-direction: column }
     in the existing 640px block, so the full label fits. */
  .cw-assistant__submit-label { display: inline; }
  .cw-assistant__submit       { white-space: normal; line-height: 1.25; }
  .cw-assistant__submit-arrow { margin-left: 0.25rem; }

  /* Defensive min-width:0 on text-bearing flex/grid items so long words
     (provincial calculator titles, breadcrumb terms, etc.) wrap instead of
     pushing their parent past the viewport. */
  .cw-hero__body,
  .cw-hero__stages,
  .cw-popular-tile,
  .cw-stage,
  .cw-stage__body,
  .cw-archive-group__head,
  .cw-archive-group__title,
  .cw-byline__item,
  .cw-byline__value,
  .cw-breadcrumb ol,
  .cw-breadcrumb li {
    min-width: 0;
  }

  /* Long words / unbroken URLs in tiles + crumbs wrap rather than overflow. */
  .cw-popular-tile__title,
  .cw-stage__name,
  .cw-byline__value,
  .cw-breadcrumb li {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Breadcrumb on calc pages: stop horizontal overflow when the calc title
     is long. Wrap items, give them tap-friendly spacing. */
  .cw-breadcrumb ol {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  /* Calc pages: results value column was tabular-num + nowrap, which pushed
     long currency strings past the panel on small screens. Allow wrap. */
  .cw-calc__result-value { word-break: break-word; }
}

/* Assistant submit must stay readable at the very narrow widths too.
   Earlier `@media (max-width: 500px) { .cw-assistant__submit-label { display:none } }`
   in main.css is now neutralized so the button never collapses to a bare
   arrow on iPhone-class viewports. */
@media (max-width: 500px) {
  .cw-assistant__submit-label { display: inline !important; }
}

/* ──────────────────────────────────────────────────────────────────────
 * Homepage above-the-fold "ask" hero — replaces the assistant-led
 * variant with a clearer task grid that answers
 * "What are you trying to figure out?"
 * ────────────────────────────────────────────────────────────────────── */
.cw-hero--ask {
    padding: 32px 0 28px;
    background: #fafbfd;
    border-bottom: 1px solid #e4e7ec;
}
.cw-hero-ask__head {
    max-width: 760px;
    margin: 0 0 22px;
}
.cw-hero-ask__title {
    margin: 8px 0 12px;
    font-size: clamp(1.7rem, 3.6vw, 2.4rem);
    font-weight: 700;
    color: #0a2540;
    letter-spacing: -0.015em;
    line-height: 1.15;
}
.cw-hero-ask__lede {
    margin: 0;
    color: #2b2f36;
    font-size: 1.05rem;
    line-height: 1.55;
}

.cw-hero-ask__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin: 0 0 18px;
}
@media (min-width: 560px) {
    .cw-hero-ask__grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
    .cw-hero-ask__grid { grid-template-columns: 1fr 1fr 1fr 1fr; }
}

.cw-hero-ask__card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid #e4e7ec;
    border-left: 4px solid #0a2540;
    border-radius: 8px;
    padding: 14px 14px;
    text-decoration: none;
    color: #0a2540;
    transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
    min-height: 64px;
}
.cw-hero-ask__card:hover,
.cw-hero-ask__card:focus-visible {
    border-left-color: #c99a3b;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(10,37,64,0.07);
    outline: none;
}
.cw-hero-ask__card-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    color: #c99a3b;
}
.cw-hero-ask__card-icon svg {
    width: 28px;
    height: 28px;
    display: block;
}
.cw-hero-ask__card-task {
    flex: 1 1 auto;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.2;
    color: #0a2540;
}
.cw-hero-ask__card-cta {
    flex-shrink: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: #52607a;
    transition: color 0.15s;
}
.cw-hero-ask__card:hover .cw-hero-ask__card-cta,
.cw-hero-ask__card:focus-visible .cw-hero-ask__card-cta {
    color: #c99a3b;
}

.cw-hero-ask__alt {
    margin: 6px 0 0;
    font-size: 0.92rem;
    color: #52607a;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
}
.cw-hero-ask__alt-link {
    color: #0a2540;
    text-decoration: none;
    font-weight: 600;
}
.cw-hero-ask__alt-link:hover,
.cw-hero-ask__alt-link:focus-visible {
    color: #c99a3b;
    text-decoration: underline;
}
.cw-hero-ask__alt-sep { color: #c2c8d2; }

@media (max-width: 640px) {
    .cw-hero--ask { padding: 22px 0 20px; }
    .cw-hero-ask__head { margin-bottom: 16px; }
    .cw-hero-ask__title { font-size: 1.55rem; }
    .cw-hero-ask__lede { font-size: 0.98rem; }
    .cw-hero-ask__card { padding: 12px 12px; min-height: 56px; }
    .cw-hero-ask__card-task { font-size: 0.95rem; }
    .cw-hero-ask__alt { font-size: 0.88rem; }
}

/* Mobile nav safety: removed overflow-x:hidden + .cw-container width
 * override after measurement confirmed scrollWidth=innerWidth at 375px
 * on /, /start-here/, and /guides/cpp/. Keeping overflow-x:hidden on
 * html/body is known to break position:sticky descendants in WebKit,
 * which this site uses for headers and sidebars. */