/* =========================================================================
   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-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
   ========================================================================= */

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;
}
/* 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: 6px;
}
.cw-logo__dot {
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: var(--amber-500);
  margin-left: 4px;
  margin-top: 6px;
  display: inline-block;
}
/* Preserve legacy `.cw-logo__mark` text dot if still in markup elsewhere */
.cw-logo__mark { color: var(--amber-500); font-weight: 700; }

.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);
}

/* =========================================================================
   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: 6px;
}
.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; }
}