/* ============================================================
   quittingmyjob.com — main.css
   Single-file stylesheet. All tokens defined in :root.
   ============================================================ */

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }

/* ── Tokens ── */
:root {
  --color-primary:      #0668E1;
  --color-accent:       #0082FB;
  --color-gradient:     linear-gradient(135deg, #0668E1 0%, #0082FB 100%);

  --color-bg:           #F9F8F6;
  --color-surface:      #FFFFFF;
  --color-surface-alt:  #F0EEE9;

  --color-text:         #1C2B33;
  --color-text-muted:   #5C6B75;
  --color-text-inverse: #FFFFFF;

  --color-success:      #15803D;
  --color-success-bg:   #DCFCE7;
  --color-warning:      #B45309;
  --color-warning-bg:   #FEF3C7;
  --color-danger:       #B91C1C;
  --color-danger-bg:    #FEE2E2;

  --color-border:       #E2DED7;
  --color-border-focus: #0668E1;

  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;
  --space-4: 16px;  --space-5: 20px;  --space-6: 24px;
  --space-8: 32px;  --space-10: 40px; --space-12: 48px;
  --space-16: 64px; --space-20: 80px; --space-24: 96px;

  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  --shadow-sm:    0 1px 2px rgba(0,0,0,.06);
  --shadow-md:    0 4px 12px rgba(0,0,0,.08);
  --shadow-lg:    0 8px 32px rgba(0,0,0,.10);
  --shadow-focus: 0 0 0 3px rgba(6,104,225,.25);

  --transition-fast: .15s ease;
  --transition-base: .2s ease;
  --transition-slow: .35s ease;

  --max-w: 900px;
  --max-w-blog: 720px;
  --pad: clamp(1.5rem, 5vw, 2rem);
}

/* ── Base ── */
body {
  font-family: 'Noto Sans', system-ui, sans-serif;
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--color-text);
  background: var(--color-bg);
}

h1, h2, h3, h4 {
  font-family: 'Noto Sans', system-ui, sans-serif;
  font-weight: 800;
}
h1 { font-size: clamp(2rem, 5vw, 3.5rem);  line-height: 1.1; }
h2 { font-size: clamp(1.5rem, 4vw, 2.75rem); line-height: 1.15; }
h3 { font-size: clamp(1.25rem, 3vw, 2rem);  line-height: 1.2; }
h4 { font-size: 1.5rem; line-height: 1.3; }

p { max-width: 65ch; }
a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }
a:hover { opacity: .8; }

/* ── Layout ── */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.container--blog { max-width: var(--max-w-blog); }

/* ── Nav ── */
.site-nav {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 100;
}
.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-4);
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.site-nav__logo {
  font-family: 'Noto Serif', serif;
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--color-text);
  text-decoration: none;
}
.site-nav__logo span {
  background: var(--color-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.site-nav__links {
  display: flex;
  gap: var(--space-6);
  list-style: none;
}
.site-nav__links a {
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 600;
  transition: color var(--transition-fast);
}
.site-nav__links a:hover { color: var(--color-primary); }
.site-nav__links [aria-current="page"] {
  color: var(--color-primary);
  position: relative;
}
.site-nav__links [aria-current="page"]::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-gradient);
  border-radius: 9999px;
}

/* ── Hero ── */
.hero {
  padding-block: var(--space-16) var(--space-10);
  text-align: center;
}
/* .hero__eyebrow → unified into .section-eyebrow */
.hero__title {
  margin-bottom: var(--space-3);
  max-width: 16ch;
  margin-inline: auto;
}
.hero__h2 {
  font-family: 'Noto Sans', sans-serif;
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
  letter-spacing: .01em;
}
.hero__subtitle-h2 {
  font-family: 'Noto Serif', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 3.5vw, 1.875rem);
  color: var(--color-text);
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  margin-bottom: var(--space-4);
  line-height: 1.35;
}
.hero__subtitle--desc {
  font-family: 'Noto Sans', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  color: var(--color-text-muted);
  width: 100%;
  max-width: 100%;
  text-align: center;
  margin-inline: auto;
  margin-bottom: var(--space-8);
  line-height: 1.65;
  padding-inline: 0;
}
.hero__welcome {
  font-size: 1.0625rem;
  color: var(--color-text-muted);
  max-width: 58ch;
  margin-inline: auto;
  margin-bottom: var(--space-5);
  line-height: 1.7;
}
.hero__subtitle {
  font-size: 1.125rem;
  color: var(--color-text-muted);
  max-width: 52ch;
  margin-inline: auto;
  margin-bottom: var(--space-8);
}
.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  padding: 14px 32px;
  border-radius: var(--radius-full);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: opacity var(--transition-base), transform var(--transition-fast);
}
.btn:hover { opacity: .9; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--color-gradient);
  color: var(--color-text-inverse);
}
.btn--outline {
  background: transparent;
  border: 2px solid var(--color-border);
  color: var(--color-text);
}
.btn--outline:hover { border-color: var(--color-primary); color: var(--color-primary); opacity: 1; }
.btn--lg { font-size: 1.125rem; padding: 18px 40px; }
.btn--full { width: 100%; }

/* ── Calculator Card ── */
.calc-card {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-10);
  box-shadow: var(--shadow-lg);
  margin-block: var(--space-10);
}
@media (max-width: 600px) {
  .calc-card { padding: var(--space-6); border-radius: var(--radius-lg); }
}

.calc-card__header {
  margin-bottom: var(--space-8);
  text-align: center;
}
/* .calc-card__eyebrow → unified into .section-eyebrow */
.calc-card__title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  margin-bottom: var(--space-3);
  line-height: 1.1;
}
.calc-card__desc {
  color: var(--color-text-muted);
  font-size: .9375rem;
  margin-bottom: 0;
}

/* Expense Groups */
.expense-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}
@media (max-width: 600px) {
  .expense-grid { grid-template-columns: 1fr; }
}

.field-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.field-group--full { grid-column: 1 / -1; }

.field-label {
  font-size: .875rem;
  font-weight: 600;
  color: var(--color-text);
}
.field-hint {
  font-size: .75rem;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.field-input {
  width: 100%;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  color: var(--color-text);
  font-size: 1rem;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  appearance: none;
}
.field-input:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: var(--shadow-focus);
}
.field-input--money {
  padding-left: 2.25rem;
}
.field-input-wrap {
  position: relative;
}
.field-input-wrap::before {
  content: '$';
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  font-size: .9375rem;
  pointer-events: none;
}

/* Section Divider */
.calc-section {
  margin-bottom: var(--space-8);
}
.calc-section__label {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

/* Toggle (COBRA) */
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
}
.toggle-row__label { font-size: .9375rem; font-weight: 600; }
.toggle-row__sublabel { font-size: .8125rem; color: var(--color-text-muted); }
.toggle {
  position: relative;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle__track {
  position: absolute;
  inset: 0;
  background: var(--color-border);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--transition-base);
}
.toggle__track::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform var(--transition-base);
  box-shadow: var(--shadow-sm);
}
.toggle input:checked + .toggle__track { background: var(--color-primary); }
.toggle input:checked + .toggle__track::after { transform: translateX(20px); }

/* ── Results Panel ── */
.results {
  display: none;
  animation: resultsReveal .3s ease forwards;
}
.results.is-visible { display: block; }

@keyframes resultsReveal {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.results__verdict {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-6);
  font-weight: 700;
  font-size: 1.0625rem;
}
.results__verdict--green {
  background: var(--color-success-bg);
  color: var(--color-success);
  border: 1.5px solid #86EFAC;
}
.results__verdict--amber {
  background: var(--color-warning-bg);
  color: var(--color-warning);
  border: 1.5px solid #FCD34D;
}
.results__verdict--red {
  background: var(--color-danger-bg);
  color: var(--color-danger);
  border: 1.5px solid #FCA5A5;
}
.results__verdict-icon { font-size: 1.5rem; flex-shrink: 0; }
.results__verdict-text { flex: 1; }
.results__verdict-text strong { display: block; font-size: 1.25rem; margin-bottom: 2px; }

.results-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
@media (max-width: 600px) {
  .results-grid { grid-template-columns: 1fr 1fr; }
}

.stat-card {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  text-align: center;
}
.stat-card__value {
  font-family: 'Noto Serif', serif;
  font-weight: 700;
  font-size: 1.625rem;
  color: var(--color-text);
  margin-bottom: 4px;
}
.stat-card__label {
  font-size: .75rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.stat-card--highlight .stat-card__value { color: var(--color-primary); }

.results__quit-date {
  text-align: center;
  padding: var(--space-8);
  background: var(--color-gradient);
  border-radius: var(--radius-lg);
  color: #fff;
  margin-bottom: var(--space-6);
}
.results__quit-date__label {
  font-size: .875rem;
  font-weight: 600;
  opacity: .85;
  margin-bottom: var(--space-2);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.results__quit-date__date {
  font-family: 'Noto Serif', serif;
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  font-weight: 700;
}
.results__quit-date__sub {
  font-size: .9rem;
  opacity: .8;
  margin-top: var(--space-2);
}

.results__reset {
  text-align: center;
  margin-top: var(--space-5);
}

/* ── Trust Bar ── */
.trust-bar {
  text-align: center;
  padding-block: var(--space-10);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  margin-block: var(--space-10);
}
.trust-bar__headline {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: var(--space-8);
  text-align: center;
}
.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
@media (max-width: 700px) {
  .stats-row {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}
/* .trust-bar__title → unified into .section-eyebrow */
.trust-bar__items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-8);
}
.trust-bar__item {
  font-size: .9375rem;
  font-weight: 700;
  color: var(--color-text-muted);
}
.trust-bar__item--link {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.trust-bar__item--link:hover {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* Trust stat — animated counter, white card */
.trust-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: var(--space-8) var(--space-6);
  width: 100%;
}
.trust-stat__flag {
  font-size: 2rem;
  line-height: 1;
  margin-bottom: var(--space-3);
}
.trust-stat__number {
  font-family: 'Noto Sans', system-ui, sans-serif;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: var(--space-3);
}
.trust-stat__label {
  font-size: .9375rem;
  color: var(--color-text-muted);
  font-weight: 500;
  text-align: center;
  max-width: 22ch;
  margin-bottom: var(--space-3);
}
.trust-stat__source {
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
  letter-spacing: .02em;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: rgba(6,104,225,.08);
  transition: background var(--transition-fast), color var(--transition-fast);
}
a.trust-stat__source:hover {
  background: var(--color-primary);
  color: #fff;
  opacity: 1;
}

/* Blue pill data source links */
.trust-pill {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  background: rgba(6,104,225,.08);
  color: var(--color-primary);
  border-radius: var(--radius-full);
  font-size: .8125rem;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: .02em;
  transition: background var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
}
.trust-pill:hover {
  background: var(--color-primary);
  color: #fff;
}
.trust-bar__items--centered {
  justify-content: center;
}

/* ── Feature Section ── */
.features {
  padding-block: var(--space-16);
}
.features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  margin-top: var(--space-10);
}
@media (max-width: 700px) {
  .features__grid { grid-template-columns: 1fr; }
}
.feature-card {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base), transform var(--transition-fast);
}
.feature-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.feature-card__icon {
  width: 44px;
  height: 44px;
  background: rgba(6,104,225,.08);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.375rem;
  margin-bottom: var(--space-4);
}
.feature-card__title {
  font-size: 1.0625rem;
  font-weight: 700;
  margin-bottom: var(--space-2);
}
.feature-card__desc {
  font-size: .9375rem;
  color: var(--color-text-muted);
}

/* ── Blog Listing ── */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  margin-top: var(--space-10);
}
.blog-card {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base), transform var(--transition-fast);
}
.blog-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.blog-card__tag {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}
.blog-card__title {
  font-size: 1.0625rem;
  margin-bottom: var(--space-3);
}
.blog-card__title a { color: inherit; text-decoration: none; }
.blog-card__title a:hover { color: var(--color-primary); }
.blog-card__meta {
  font-size: .8125rem;
  color: var(--color-text-muted);
}

/* ── Footer ── */
.site-footer {
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-10);
  margin-top: var(--space-16);
  color: var(--color-text-muted);
  font-size: .875rem;
}
.site-footer__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--pad);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.site-footer__links {
  display: flex;
  gap: var(--space-6);
  list-style: none;
}
.site-footer__links a { color: var(--color-text-muted); text-decoration: none; }
.site-footer__links a:hover { color: var(--color-text); }

/* ── Utility ── */
.text-center { text-align: center; }
.section-eyebrow {
  display: block;
  width: fit-content;
  margin-inline: auto;
  background: rgba(6,104,225,.08);
  color: var(--color-primary);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-5);
}
.divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin-block: var(--space-8);
}

/* ── Print ── */
@media print {
  .site-nav, .site-footer, .btn { display: none; }
}

/* ── field-input-wrap plain (no dollar sign) ── */
.field-input-wrap--plain::before { content: none; }
.field-input-wrap--plain .field-input { padding-left: 16px; }

/* ── Spending Slider ── */
.spend-row {
  padding: var(--space-4) 0 var(--space-2);
}
.spend-row__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-3);
}
.spend-value-label {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--color-primary);
}
.spend-slider-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.spend-tick {
  font-size: .75rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.spend-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 9999px;
  background: var(--color-border);
  outline: none;
  cursor: pointer;
}
.spend-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 3px solid #fff;
  box-shadow: 0 0 0 1.5px var(--color-border), var(--shadow-sm);
  cursor: pointer;
  transition: box-shadow var(--transition-fast);
}
.spend-slider::-webkit-slider-thumb:hover {
  box-shadow: 0 0 0 1.5px var(--color-primary), var(--shadow-md);
}
.spend-slider::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 3px solid #fff;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

/* ── Savings Rate Card ── */
.sr-card {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-4);
}
.sr-card__label {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.sr-card__value {
  font-family: 'Noto Serif', serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-3);
}
.sr-track {
  height: 6px;
  background: var(--color-surface-alt);
  border-radius: 9999px;
  margin-bottom: var(--space-3);
  overflow: hidden;
}
.sr-fill {
  height: 100%;
  background: var(--color-gradient);
  border-radius: 9999px;
  transition: width .5s ease;
}
.sr-card__tier {
  font-size: .875rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--space-1);
}
.sr-card__hint {
  font-size: .75rem;
  color: var(--color-text-muted);
}

/* ── Monte Carlo Card ── */
.mc-card {
  background: var(--color-surface-alt);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-4);
}
.mc-card__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
}
.mc-card__label {
  font-size: .9375rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 2px;
}
.mc-card__sub {
  font-size: .75rem;
  color: var(--color-text-muted);
}
.mc-card__tier {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}
.mc-number {
  font-family: 'Noto Serif', serif;
  font-size: 2rem;
  font-weight: 700;
  white-space: nowrap;
}
.mc--green { color: var(--color-success); }
.mc--amber { color: var(--color-warning); }
.mc--red   { color: var(--color-danger);  }

/* ── Projection Chart ── */
.chart-wrap {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-4);
}
.chart-wrap__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-4);
}
.chart-wrap__title {
  font-size: .9375rem;
  font-weight: 700;
  color: var(--color-text);
}
.chart-wrap__sub {
  font-size: .75rem;
  color: var(--color-text-muted);
}

/* ── Info Notes ── */
.info-note {
  font-size: .875rem;
  line-height: 1.6;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  border-left: 3px solid;
}
.info-note--blue {
  background: rgba(6,104,225,.06);
  border-color: var(--color-primary);
  color: var(--color-text);
}
.info-note--green {
  background: var(--color-success-bg);
  border-color: var(--color-success);
  color: var(--color-text);
}

/* ── Resource Links ── */
.resource-links {
  margin-bottom: var(--space-6);
}
.resource-links__label {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}
.resource-links__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
@media (max-width: 600px) {
  .resource-links__grid { grid-template-columns: 1fr; }
}
.resource-card {
  display: block;
  background: var(--color-surface-alt);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  text-decoration: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.resource-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
  opacity: 1;
}
.resource-card__name {
  font-size: .875rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 4px;
}
.resource-card__desc {
  font-size: .8rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  max-width: none;
}

/* ════════════════════════════════════════════════════════════
   CSV Download / Action Row
   ════════════════════════════════════════════════════════════ */
.action-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.action-row__hint {
  font-size: .8125rem;
  color: var(--color-text-muted);
}
.btn--sm {
  font-size: .875rem;
  padding: 10px 20px;
}

/* ════════════════════════════════════════════════════════════
   Next Steps: Job Platforms
   ════════════════════════════════════════════════════════════ */
.platforms-section {
  margin-bottom: var(--space-6);
}
.platforms-section__label {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}
.platforms-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
@media (max-width: 600px) {
  .platforms-grid { grid-template-columns: 1fr; }
}
.platform-card {
  display: block;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  text-decoration: none;
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.platform-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-1px);
  opacity: 1;
}
.platform-card__name {
  font-size: .9375rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 4px;
}
.platform-card__desc {
  font-size: .8125rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  max-width: none;
}

/* ════════════════════════════════════════════════════════════
   State Resources
   ════════════════════════════════════════════════════════════ */
.state-section {
  background: var(--color-surface-alt);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-4);
}
.state-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.state-section__label {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--color-text-muted);
}
.state-select {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  font-size: .875rem;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  transition: border-color var(--transition-fast);
  max-width: 220px;
}
.state-select:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: var(--shadow-focus);
}
.state-info {
  margin-top: var(--space-4);
}
.state-info__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
@media (max-width: 600px) {
  .state-info__grid { grid-template-columns: 1fr; }
}
.state-link-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  text-decoration: none;
  transition: border-color var(--transition-fast);
}
.state-link-card:hover {
  border-color: var(--color-primary);
  opacity: 1;
}
.state-link-card--static {
  cursor: default;
}
.state-link-card--static:hover {
  border-color: var(--color-border);
}
.state-link-card__icon {
  font-size: 1.25rem;
  flex-shrink: 0;
}
.state-link-card__label {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--color-text);
}
.state-link-card__sub {
  font-size: .75rem;
  color: var(--color-primary);
  margin-top: 2px;
}
.state-link-card__wage {
  font-size: .875rem;
  font-weight: 700;
  color: var(--color-success);
}

/* ════════════════════════════════════════════════════════════
   Live Remote Jobs
   ════════════════════════════════════════════════════════════ */
.live-jobs-section {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-6);
}
.live-jobs-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.live-jobs-title {
  font-size: .9375rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 2px;
}
.live-jobs-sub {
  font-size: .75rem;
  color: var(--color-text-muted);
}
.jobs-loading {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: .875rem;
  color: var(--color-text-muted);
  padding: var(--space-4) 0;
}
.jobs-loading__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
  animation: dotPulse 1s infinite;
}
@keyframes dotPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .2; }
}
.jobs-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.job-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  background: var(--color-surface-alt);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  text-decoration: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.job-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
  opacity: 1;
}
.job-card__co {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-text-muted);
  grid-column: 1;
  grid-row: 1;
  white-space: nowrap;
}
.job-card__title {
  font-size: .9375rem;
  font-weight: 600;
  color: var(--color-text);
  grid-column: 1 / -1;
  grid-row: 2;
}
.job-card__meta {
  font-size: .75rem;
  color: var(--color-primary);
  grid-column: 1 / -1;
  grid-row: 3;
}
.jobs-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-3);
  margin-top: var(--space-2);
  border-top: 1px solid var(--color-border);
  font-size: .8125rem;
}
.jobs-via {
  color: var(--color-text-muted);
  font-size: .75rem;
}
.jobs-empty {
  font-size: .875rem;
  color: var(--color-text-muted);
  padding: var(--space-3) 0;
}

/* ════════════════════════════════════════════════════════════
   Mobile Nav
   ════════════════════════════════════════════════════════════ */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-2);
  color: var(--color-text);
  flex-direction: column;
  gap: 5px;
}
.nav-toggle__bar {
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 9999px;
  display: block;
  transition: transform var(--transition-base), opacity var(--transition-fast);
  transform-origin: center;
}
.nav-toggle.is-open .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle.is-open .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 540px) {
  .nav-toggle { display: flex; }
  .site-nav__links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    flex-direction: column;
    gap: 0;
    padding: var(--space-2) 0;
    box-shadow: var(--shadow-md);
    z-index: 99;
  }
  .site-nav__links.is-open { display: flex; }
  .site-nav__links li { width: 100%; }
  .site-nav__links a {
    display: block;
    padding: var(--space-4) var(--pad);
    font-size: 1rem;
    border-bottom: 1px solid var(--color-border);
  }
  .site-nav__links li:last-child a { border-bottom: none; }
  .site-nav { position: relative; }
}

/* ════════════════════════════════════════════════════════════
   Unsplash Hero Image
   ════════════════════════════════════════════════════════════ */
.article-hero {
  position: relative;
  width: 100%;
  height: clamp(220px, 38vw, 480px);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
.article-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.08) 0%,
    rgba(0,0,0,0.55) 100%
  );
}
.article-hero__credit {
  position: absolute;
  bottom: 10px;
  right: 14px;
  font-size: .6875rem;
  color: rgba(255,255,255,0.65);
  margin: 0;
}
.article-hero__credit a {
  color: rgba(255,255,255,0.8);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.article-hero__credit a:hover { color: #fff; }

/* ── Blog card thumbnails ── */
.blog-card__img-link {
  display: block;
  margin-bottom: var(--space-5);
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16/9;
}
.blog-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.blog-card:hover .blog-card__img { transform: scale(1.04); }

/* ════════════════════════════════════════════════════════════
   Blog Article Styles
   ════════════════════════════════════════════════════════════ */
.article-wrap {
  max-width: 68ch;
  margin: 0 auto;
  padding-block: 4rem 6rem;
}
.article-back {
  font-size: .875rem;
  color: var(--color-text-muted);
  margin-bottom: 2rem;
  display: inline-block;
  text-decoration: none;
  transition: color var(--transition-fast);
}
.article-back:hover { color: var(--color-text); }
.article-tag {
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-accent);
  margin-bottom: 1rem;
}
.article-title {
  font-family: 'Noto Serif', serif;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.2;
  margin-bottom: 1rem;
}
.article-meta {
  font-size: .875rem;
  color: var(--color-text-muted);
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--color-border);
}
.article-body h2 {
  font-family: 'Noto Serif', serif;
  font-size: 1.375rem;
  margin-top: 2.5rem;
  margin-bottom: .75rem;
}
.article-body h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  margin-top: 2rem;
  margin-bottom: .5rem;
}
.article-body p {
  margin-bottom: 1.25rem;
  line-height: 1.75;
}
.article-body ul,
.article-body ol {
  margin-bottom: 1.25rem;
  padding-left: 1.5rem;
}
.article-body li {
  margin-bottom: .5rem;
  line-height: 1.75;
}
.article-body strong { font-weight: 700; }
.data-callout {
  background: var(--color-surface);
  border-left: 3px solid var(--color-accent);
  padding: 1rem 1.25rem;
  margin: 2rem 0;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.data-callout p { margin: 0; font-size: .9375rem; }
.article-cta {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  margin-top: 3rem;
  text-align: center;
}
.article-cta h3 { margin-top: 0; margin-bottom: .5rem; }
.article-cta p { color: var(--color-text-muted); margin-bottom: 1.5rem; }
.citation {
  font-size: .8125rem;
  color: var(--color-text-muted);
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}
.citation p { margin-bottom: .25rem; }

/* ════════════════════════════════════════════════════════════
   RESPONSIVE SYSTEM
   6 breakpoints: 320 · 480 · 600 · 768 · 1200 · 1440

   Strategy: mobile-first additions layered on top of the
   existing base styles. Existing max-width: 540/600/700px
   rules stay — this layer handles everything they miss.
   ════════════════════════════════════════════════════════════ */

/* ── Token overrides by viewport ── */
:root {
  --bp-xs:  320px;
  --bp-sm:  480px;
  --bp-md:  600px;
  --bp-tab: 768px;
  --bp-lg:  1200px;
  --bp-xl:  1440px;
}


/* ════════════════════════════════════════════════════════════
   XL — 1440px+
   Loosen max-width, increase spacing, bump base font
   ════════════════════════════════════════════════════════════ */
@media (min-width: 1440px) {
  :root {
    --max-w: 1100px;
    --pad: 2.5rem;
  }

  body { font-size: 1.125rem; }

  h1 { font-size: 4rem; }
  h2 { font-size: 3rem; }

  .hero { padding-block: 7rem 5rem; }
  .hero__welcome { font-size: 1.125rem; }
  .hero__subtitle { font-size: 1.25rem; }

  .calc-card { padding: 3.5rem; }

  .blog-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
  }

  .features__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
  }

  .trust-stat { padding: 3rem 4rem; }
  .trust-stat__number { font-size: 4.5rem; }

  .results-grid { grid-template-columns: repeat(3, 1fr); }

  .site-footer { padding-block: 3.5rem; }

  .article-wrap { max-width: 72ch; }
}


/* ════════════════════════════════════════════════════════════
   LARGE — 1200px–1439px
   Widen container slightly, enforce 3-col grids
   ════════════════════════════════════════════════════════════ */
@media (min-width: 1200px) and (max-width: 1439px) {
  :root {
    --max-w: 1000px;
    --pad: 2rem;
  }

  .blog-grid { grid-template-columns: repeat(3, 1fr); }
  .features__grid { grid-template-columns: repeat(3, 1fr); }

  .hero { padding-block: 6rem 4rem; }

  .results-grid { grid-template-columns: repeat(3, 1fr); }
}


/* ════════════════════════════════════════════════════════════
   SMALL LAPTOP — 900px–1199px
   Container capped, grids at 3 cols, article wider
   ════════════════════════════════════════════════════════════ */
@media (min-width: 900px) and (max-width: 1199px) {
  :root { --pad: clamp(1.25rem, 3vw, 2rem); }

  .blog-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
  .features__grid { grid-template-columns: repeat(3, 1fr); }

  .results-grid { grid-template-columns: repeat(3, 1fr); }

  .resource-links__grid { grid-template-columns: repeat(3, 1fr); }
  .platforms-grid { grid-template-columns: repeat(3, 1fr); }
}


/* ════════════════════════════════════════════════════════════
   TABLET — 768px–899px
   2-col blog grid, 2-col feature grid, full nav visible
   ════════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 899px) {
  :root { --pad: 1.5rem; }

  /* Nav: always show links, hide hamburger */
  .nav-toggle { display: none !important; }
  .site-nav__links {
    display: flex !important;
    position: static;
    flex-direction: row;
    gap: var(--space-5);
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
  }
  .site-nav__links li { width: auto; }
  .site-nav__links a {
    padding: 0;
    font-size: .9rem;
    border-bottom: none;
  }

  /* Grids */
  .blog-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
  .features__grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
  .expense-grid { grid-template-columns: repeat(2, 1fr); }
  .results-grid { grid-template-columns: repeat(3, 1fr); }
  .resource-links__grid { grid-template-columns: repeat(2, 1fr); }
  .platforms-grid { grid-template-columns: repeat(2, 1fr); }

  /* Hero */
  .hero { padding-block: 4rem 3rem; }

  /* Calculator */
  .calc-card { padding: 2rem; }
}


/* ════════════════════════════════════════════════════════════
   MOBILE — 600px–767px
   1-col grids begin, blog stays 2-col while it fits
   ════════════════════════════════════════════════════════════ */
@media (min-width: 600px) and (max-width: 767px) {
  :root { --pad: 1.25rem; }

  .blog-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
  .features__grid { grid-template-columns: 1fr; }
  .expense-grid { grid-template-columns: repeat(2, 1fr); }
  .results-grid { grid-template-columns: repeat(2, 1fr); }
  .resource-links__grid { grid-template-columns: repeat(2, 1fr); }
  .platforms-grid { grid-template-columns: repeat(2, 1fr); }

  .hero { padding-block: 3.5rem 2.5rem; }
  .calc-card { padding: 1.75rem; }
}


/* ════════════════════════════════════════════════════════════
   SMALL MOBILE — max 480px
   Single column everything, generous touch targets,
   tighter spacing throughout
   ════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  :root { --pad: 1rem; }

  /* Typography scale down */
  body { font-size: 1rem; }
  h1 { font-size: clamp(1.625rem, 7vw, 2rem); }
  h2 { font-size: clamp(1.25rem, 6vw, 1.625rem); }
  h3 { font-size: clamp(1.1rem, 5vw, 1.375rem); }

  /* Nav */
  .site-nav__logo { font-size: 1rem; }

  /* Hero */
  .hero {
    padding-block: 2.5rem 2rem;
    text-align: center;
  }
  .hero__title { margin-inline: auto; text-align: center; }
  .hero__welcome { margin-inline: auto; text-align: center; font-size: .9375rem; }
  .hero__subtitle { margin-inline: auto; text-align: center; font-size: 1rem; }
  .section-eyebrow { margin-inline: auto; }
  .hero .section-eyebrow { margin-inline: auto; }
  .hero .btn { display: block; width: fit-content; margin-inline: auto; }

  /* Buttons — comfortable tap targets */
  .btn { padding: 13px 24px; font-size: .9375rem; }
  .btn--lg { font-size: 1rem; padding: 15px 28px; }

  /* Calculator */
  .calc-card { padding: 1.25rem; border-radius: var(--radius-lg); }
  .calc-card__header { margin-bottom: 1.5rem; }

  /* Results */
  .results-grid { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
  .stat-card { padding: var(--space-4); }
  .stat-card__value { font-size: 1.375rem; }
  .results__verdict { font-size: .9375rem; padding: var(--space-4); }
  .results__verdict-text strong { font-size: 1.0625rem; }

  /* Blog grid */
  .blog-grid { grid-template-columns: 1fr; gap: 1.25rem; margin-top: 1.5rem; }

  /* Blog cards */
  .blog-card { padding: var(--space-5); }
  .blog-card__title { font-size: 1rem; }

  /* Features */
  .features__grid { grid-template-columns: 1fr; gap: 1rem; }
  .features { padding-block: 2.5rem; }

  /* Trust bar */
  .trust-bar { padding-block: var(--space-6); }
  .trust-bar__items { gap: var(--space-5); }
  .trust-stat { padding: var(--space-6) var(--space-8); }
  .trust-stat__number { font-size: 2.5rem; }

  /* Footer */
  .site-footer { padding-block: var(--space-8); }
  .site-footer__inner { flex-direction: column; align-items: flex-start; gap: var(--space-5); }
  .site-footer__links { flex-wrap: wrap; gap: var(--space-4); }

  /* Article */
  .article-wrap { padding-block: 2.5rem 4rem; }
  .article-title { font-size: clamp(1.5rem, 6vw, 2rem); }
  .article-body p { font-size: .9375rem; }
  .article-body h2 { font-size: 1.25rem; }
  .article-cta { padding: 1.5rem; }

  /* Tables — horizontal scroll on narrow screens */
  .savings-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    font-size: .8125rem;
  }

  /* Action row stacks */
  .action-row { flex-direction: column; align-items: flex-start; gap: var(--space-3); }

  /* MC card stacks */
  .mc-card__inner { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .mc-number { font-size: 1.625rem; }

  /* Chart header stacks */
  .chart-wrap__header { flex-direction: column; align-items: flex-start; gap: var(--space-1); }

  /* Jobs footer stacks */
  .jobs-footer { flex-direction: column; align-items: flex-start; gap: var(--space-2); }

  /* Resource/platform grids: 1 col (override base) */
  .resource-links__grid { grid-template-columns: 1fr; }
  .platforms-grid { grid-template-columns: 1fr; }
  .state-info__grid { grid-template-columns: 1fr; }

  /* Quit date */
  .results__quit-date { padding: var(--space-6); }
  .results__quit-date__date { font-size: 1.625rem; }

  /* Toggle row wrap */
  .toggle-row { flex-wrap: wrap; }
}


/* ════════════════════════════════════════════════════════════
   TINY — max 320px
   Aggressive size reduction for very small screens (SE, etc.)
   ════════════════════════════════════════════════════════════ */
@media (max-width: 320px) {
  :root { --pad: .75rem; }

  body { font-size: .9375rem; }
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.25rem; }

  /* Nav */
  .site-nav__logo { font-size: .9375rem; }
  .site-nav__inner { padding-block: var(--space-3); }

  /* Hero */
  .hero { padding-block: 2rem 1.5rem; }

  /* Calculator */
  .calc-card { padding: 1rem; }
  .calc-card__title { font-size: 1.25rem; }

  /* Buttons */
  .btn { padding: 12px 18px; font-size: .875rem; }
  .btn--lg { font-size: .9375rem; padding: 13px 22px; }

  /* Results */
  .results-grid { grid-template-columns: 1fr; gap: var(--space-3); }
  .stat-card__value { font-size: 1.25rem; }

  /* Blog */
  .blog-card { padding: var(--space-4); }
  .blog-card__title { font-size: .9375rem; }

  /* Trust */
  .trust-stat { padding: var(--space-5) var(--space-6); width: 100%; box-sizing: border-box; }
  .trust-stat__number { font-size: 2rem; }
  .trust-stat__label { font-size: .875rem; }

  /* Article */
  .article-title { font-size: 1.375rem; }
  .article-body p { font-size: .875rem; }
  .article-cta { padding: 1rem; }
  .article-cta h3 { font-size: 1rem; }

  /* Footer */
  .site-footer__links { gap: var(--space-3); font-size: .8125rem; }

  /* Verdict */
  .results__verdict { padding: var(--space-3); gap: var(--space-3); }
  .results__quit-date { padding: var(--space-5); }
  .results__quit-date__date { font-size: 1.375rem; }

  /* Sections */
  .section-eyebrow { font-size: .75rem; padding: 5px 10px; }
}


/* ════════════════════════════════════════════════════════════
   UTILITY: safe overflow on all viewports
   ════════════════════════════════════════════════════════════ */
html, body { overflow-x: hidden; }

/* Tables always scrollable */
.savings-table {
  width: 100%;
  border-collapse: collapse;
}
.savings-table td {
  padding: .625rem .75rem;
  border: 1px solid var(--color-border);
  font-size: .9rem;
  vertical-align: top;
}
.savings-table tr:first-child td {
  font-weight: 700;
  background: var(--color-surface-alt);
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-text-muted);
}

/* Ensure images never overflow */
img { max-width: 100%; height: auto; }

/* Touch target minimum */
@media (max-width: 768px) {
  .btn, .topic-pill, .page-btn {
    min-height: 44px;
    min-width: 44px;
  }
  .page-btn { min-height: 44px; height: 44px; min-width: 44px; }
  .topic-pill { min-height: 40px; padding-block: .5rem; }
}

/* Nav: ensure hamburger shows correctly up to 768px */
@media (max-width: 767px) {
  .nav-toggle { display: flex; }
}
@media (min-width: 768px) {
  .nav-toggle { display: none !important; }
  .site-nav__links {
    display: flex !important;
    position: static;
    flex-direction: row;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
  }
  .site-nav__links li { width: auto; }
  .site-nav__links a {
    padding: 0;
    border-bottom: none;
  }
}


/* ════════════════════════════════════════════════════════════
   12-COLUMN GRID SYSTEM
   Use .grid-12 on a container, .col-N on children.
   Collapses to full-width at ≤767px.
   ════════════════════════════════════════════════════════════ */
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(1rem, 2vw, 1.5rem);
}
.col-1  { grid-column: span 1;  }
.col-2  { grid-column: span 2;  }
.col-3  { grid-column: span 3;  }
.col-4  { grid-column: span 4;  }
.col-5  { grid-column: span 5;  }
.col-6  { grid-column: span 6;  }
.col-7  { grid-column: span 7;  }
.col-8  { grid-column: span 8;  }
.col-9  { grid-column: span 9;  }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }
.col-start-2  { grid-column-start: 2; }
.col-start-3  { grid-column-start: 3; }
@media (max-width: 767px) {
  [class*=" col-"],
  [class^="col-"] { grid-column: span 12 !important; }
}

/* ── Stats row (3 stats, each equal width) ── */
.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 2.5rem;
}
.stats-row .trust-stat {
  background: var(--color-surface);
  border: none;
  border-radius: 0;
  padding: 2rem 2.5rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.375rem;
}
.trust-stat__source {
  font-size: .75rem;
  color: var(--color-text-muted);
  font-weight: 400;
  margin-top: 0.25rem;
  opacity: .7;
}
@media (max-width: 599px) {
  .stats-row {
    grid-template-columns: 1fr;
  }
}

/* ── Hero H3 (18px sub-headline under h1) ── */
.hero__h3 {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text);
  margin-top: 1.25rem;
  margin-bottom: 0.75rem;
  max-width: 58ch;
}
.hero__subtitle--desc {
  font-size: 1rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: 1.75rem;
  max-width: 58ch;
}

/* ── Data sources block ── */
.data-sources-block {
  text-align: center;
  padding-top: 0.5rem;
}
.data-sources-block__label {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-text-muted);
  margin-bottom: 1rem;
}
.data-sources-block__items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  justify-content: center;
}
.source-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.125rem;
  font: 600 .8125rem 'Noto Sans', sans-serif;
  color: var(--color-primary);
  background: rgba(6,104,225,.07);
  border: 1.5px solid rgba(6,104,225,.25);
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
.source-btn:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* ── Blog home section — left-aligned ── */
.blog-home-section h2 { text-align: left; }
.blog-home-section .blog-sub {
  text-align: left;
  font-size: 1.125rem;
  color: var(--color-text-muted);
  margin-top: 0.75rem;
  margin-bottom: 2rem;
  max-width: 56ch;
  line-height: 1.65;
}

/* ═══════════════════════════════════════════════════════════════════════
   SITE-WIDE FIXES — April 2026
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Calculator header: left-aligned ── */
.calc-card__header {
  text-align: left;
  margin-bottom: var(--space-8);
}
.calc-card__header .section-eyebrow {
  margin-inline: 0;
}
.calc-card__title {
  text-align: left;
}
.calc-card__desc {
  text-align: left;
}

/* ── Stats row: 3-col desktop, 1-col mobile with even padding ── */
.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  background: var(--color-border);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-bottom: 2.5rem;
}
.stats-row .trust-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--color-surface);
  border: none;
  border-radius: 0;
  padding: 2rem 2.25rem;
  gap: 0.375rem;
  box-shadow: none;
  margin-bottom: 0;
}
@media (max-width: 768px) {
  .stats-row {
    grid-template-columns: 1fr;
  }
  .stats-row .trust-stat {
    border-bottom: 1px solid var(--color-border);
    align-items: center;
    text-align: center;
    padding: 1.75rem 1.5rem;
  }
  .stats-row .trust-stat:last-child {
    border-bottom: none;
  }
}

/* ── Trust bar — centred content ── */
.trust-bar {
  padding-block: var(--space-10);
}
.trust-bar .container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* ── Blog home section — consistent spacing ── */
.blog-home-section .section-eyebrow {
  margin-inline: 0;
}
.blog-home-section h2 {
  text-align: left;
  margin-top: var(--space-3);
  margin-bottom: 0;
}
.blog-home-section .blog-sub {
  text-align: left;
  font-size: 1.0625rem;
  color: var(--color-text-muted);
  margin-top: 1rem;
  margin-bottom: 2.5rem;
  max-width: 56ch;
  line-height: 1.65;
}

/* ── Resources page blog grid: fill container ── */
.blog-grid {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 899px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }
}
@media (max-width: 599px) {
  .blog-grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}

/* ── Job board: centered heading ── */
.job-leads {
  text-align: left;
}
.job-leads h2,
.job-leads .section-eyebrow {
  text-align: center;
}
.job-leads__subtitle {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.job-leads__controls {
  justify-content: center;
}

/* ── About page: consistent heading spacing ── */
.about-content h1 {
  margin-top: var(--space-5);
  margin-bottom: var(--space-6);
}
.about-content h2 {
  margin-top: 0;
  margin-bottom: var(--space-4);
}
.about-content p + p {
  margin-top: var(--space-4);
}
.about-content .features__grid {
  margin-top: var(--space-8);
}

/* ── Feature cards: equal height columns ── */
.features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  align-items: start;
}
@media (max-width: 768px) {
  .features__grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}