/* =============================================================
   1. Tokens
   ============================================================= */
:root {
  --blue: #2563EB;
  --blue-dark: #1D4ED8;
  --blue-50: #EFF6FF;
  --emerald: #10B981;
  --emerald-dark: #059669;
  /* The only green safe to put white or small bold text on. White on --emerald is
     2.54:1 and on --emerald-dark 3.77:1, both under AA; this is 5.48:1. Use it for
     any surface that carries text, and keep --emerald for fills and decoration. */
  --emerald-deep: #047857;
  --ink: #0F172A;
  --body: #334155;
  --muted: #64748B;
  --line: #E2E8F0;
  --bg: #FFFFFF;
  --bg-alt: #F8FAFC;
  --card: #FFFFFF;
  --radius: 16px;
  --radius-sm: 10px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.08);
  --shadow-md: 0 4px 12px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.06);
  --shadow-lg: 0 12px 32px rgba(15,23,42,.12), 0 4px 8px rgba(15,23,42,.06);
  --serif: "Source Serif 4", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* =============================================================
   2. Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; tab-size: 2; scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  background: var(--bg);
  color: var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
/* WCAG 1.4.1: a link inside a paragraph or list item must be distinguishable
   without colour. Blue #2563EB against body #334155 is only 2:1 and against muted
   #64748B just 1.09:1, so colour alone cannot carry it — these links stay
   underlined at rest. Navigation, cards and buttons are not text blocks and keep
   the hover-only treatment. */
p a, li a, dd a, figcaption a, caption a { text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: from-font; }
.card a, .cat-card, .related-grid a, .share-btn, .btn { text-decoration: none; }
p { text-wrap: pretty; }
h1, h2, h3, h4 { color: var(--ink); text-wrap: balance; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; }
ul, ol { padding-left: 1.25rem; }
table { border-collapse: collapse; width: 100%; }
::selection { background: var(--blue); color: #fff; }

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

/* =============================================================
   3. Utilities
   ============================================================= */
.container { max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); }
/* 720px is ~71 characters per line at the 16px body size — inside the 65-75 that
   reads comfortably. At the previous 820px it was 81. Narrowing the container
   rather than capping each prose element keeps the centred layouts (404, section
   heads) intact and still leaves the price-index table room. */
.container-narrow { max-width: 720px; margin-inline: auto; padding-inline: var(--gutter); }

.skip-link {
  position: fixed; top: -100px; left: 1rem;
  padding: .6rem 1rem; background: var(--ink); color: #fff;
  z-index: 9999; border-radius: 8px; font-weight: 600;
}
.skip-link:focus { top: 1rem; }

.eyebrow {
  display: inline-block;
  text-transform: uppercase; letter-spacing: .1em; font-size: .72rem;
  color: var(--blue); font-weight: 700; margin-bottom: .6rem;
}
.section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.section-head { max-width: 640px; margin-bottom: 2rem; }
.section-head p { color: var(--muted); margin-top: .5rem; }
.bg-alt { background: var(--bg-alt); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* =============================================================
   4. Buttons & badges
   ============================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.5rem; border-radius: 999px; font-weight: 600; font-size: .95rem;
  transition: transform .2s var(--ease-out), background .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.btn-primary { background: var(--blue); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--blue-dark); transform: translateY(-1px); text-decoration: none; box-shadow: var(--shadow-md); }
.btn-accent { background: var(--emerald-deep); color: #fff; }
.btn-accent:hover { background: var(--emerald-dark); text-decoration: none; }
.btn-outline { border: 1.5px solid var(--line); color: var(--ink); }
.btn-outline:hover { border-color: var(--blue); color: var(--blue); text-decoration: none; }
.btn-block { width: 100%; }

.badge {
  display: inline-flex; align-items: center; padding: .25rem .65rem;
  border-radius: 999px; font-size: .72rem; font-weight: 700;
  background: var(--blue-50); color: var(--blue);
}
/* Not --emerald-dark (#059669): at 11.5px bold on #ECFDF5 that is 3.58:1, under
   the 4.5:1 AA floor. #047857 is 5.21:1 and reads as the same green. */
.badge-emerald { background: #ECFDF5; color: var(--emerald-deep); }

/* =============================================================
   5. Header & nav
   ============================================================= */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1rem; }
.logo { display: flex; align-items: center; gap: .5rem; font-weight: 800; font-size: 1.2rem; color: var(--ink); }
.logo:hover { text-decoration: none; }
.logo-mark {
  width: 34px; height: 34px; border-radius: 9px;
  background: linear-gradient(135deg, var(--blue), var(--emerald-deep));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 1.05rem; flex: none;
}
.main-nav { display: none; align-items: center; gap: 1.75rem; }
.main-nav a { color: var(--body); font-weight: 600; font-size: .93rem; }
.main-nav a:hover { color: var(--blue); text-decoration: none; }
.header-actions { display: flex; align-items: center; gap: .75rem; }
.nav-toggle { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: .4rem; }
/* flex: none is load-bearing. The global `svg { max-width: 100% }` reset resolves
   against this shrink-to-fit flex parent, whose own width depends on the icon —
   the circular constraint collapsed the icon to 0px wide, leaving the mobile menu
   button as an empty 13px sliver on every page. */
.nav-toggle svg { flex: none; width: 24px; height: 24px; }

.mobile-nav {
  display: none;
  border-top: 1px solid var(--line);
  padding-block: 1rem;
}
.mobile-nav.is-open { display: block; }
.mobile-nav a { display: block; padding: .6rem 0; font-weight: 600; color: var(--ink); }

.has-dropdown { position: relative; }
.dropdown {
  display: none;
  position: absolute; top: 100%; left: 0; margin-top: .75rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: .75rem; width: 300px;
  grid-template-columns: 1fr 1fr; gap: .25rem;
}
.has-dropdown:hover .dropdown { display: grid; }
.dropdown a { padding: .5rem .6rem; border-radius: 8px; font-size: .85rem; font-weight: 500; color: var(--body); }
.dropdown a:hover { background: var(--bg-alt); color: var(--blue); text-decoration: none; }

/* =============================================================
   6. Hero
   ============================================================= */
.hero {
  position: relative;
  padding-block: clamp(3rem, 8vw, 5.5rem);
  background: radial-gradient(1200px 500px at 15% -10%, var(--blue-50), transparent 60%), var(--bg);
  overflow: clip;
}
.hero-grid { display: grid; gap: 2.5rem; align-items: center; }
.hero h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
.hero-sub { color: var(--muted); font-size: 1.1rem; margin-top: 1rem; max-width: 42ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.75rem; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 2rem; color: var(--muted); font-size: .85rem; }
.hero-trust strong { color: var(--ink); }
.hero-art {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
}

/* =============================================================
   7. Cards
   ============================================================= */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.card-img { aspect-ratio: 16/10; width: 100%; object-fit: cover; background: var(--bg-alt); }
.card-body { padding: 1.35rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.card-body h3 { font-size: 1.05rem; }
.card-body h3 a { color: var(--ink); }
.card-body h3 a:hover { color: var(--blue); text-decoration: none; }
.card-meta { display: flex; align-items: center; gap: .6rem; font-size: .78rem; color: var(--muted); }
.card-excerpt { color: var(--muted); font-size: .9rem; }

.grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }

.cat-card {
  display: flex; align-items: center; gap: .9rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card);
  transition: border-color .2s, transform .2s var(--ease-out);
}
.cat-card:hover { border-color: var(--blue); transform: translateY(-2px); text-decoration: none; }
.cat-icon {
  width: 44px; height: 44px; border-radius: 12px; flex: none;
  background: var(--blue-50); color: var(--blue);
  display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
}
.cat-card span { font-weight: 700; color: var(--ink); font-size: .93rem; }

.company-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card);
}
.company-name { font-weight: 700; color: var(--ink); }
.stars { color: #F59E0B; font-weight: 700; font-size: .85rem; }

/* =============================================================
   8. Forms
   ============================================================= */
.form-field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem; }
.form-field label { font-weight: 600; font-size: .88rem; color: var(--ink); }
.form-field input, .form-field select, .form-field textarea {
  padding: .75rem .9rem; border-radius: 10px; border: 1.5px solid var(--line);
  font: inherit; font-size: .95rem; color: var(--ink); background: #fff;
  transition: border-color .2s;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none; border-color: var(--blue);
}
.form-hint { font-size: .78rem; color: var(--muted); }
.form-success {
  display: none; padding: .9rem 1.1rem; border-radius: 10px;
  background: #ECFDF5; color: var(--emerald-dark); font-weight: 600; font-size: .9rem;
}
.form-success.is-visible { display: block; }

.newsletter-box {
  background: linear-gradient(135deg, var(--blue), #1E40AF);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 4vw, 3rem);
  color: #fff;
  display: grid; gap: 1.5rem;
}
.newsletter-box h2 { color: #fff; }
.newsletter-box p { color: rgba(255,255,255,.85); }
.newsletter-form { display: flex; flex-wrap: wrap; gap: .75rem; }
.newsletter-form input {
  flex: 1; min-width: 200px; padding: .85rem 1.1rem; border-radius: 999px; border: 0;
  font: inherit;
}
.newsletter-form .btn { flex: none; }

/* =============================================================
   9. FAQ / accordion
   ============================================================= */
.accordion-item { border-bottom: 1px solid var(--line); }
.accordion-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 0; font-weight: 700; color: var(--ink); text-align: left; gap: 1rem;
}
.accordion-trigger .chev { transition: transform .25s var(--ease-out); flex: none; }
.accordion-item.is-open .accordion-trigger .chev { transform: rotate(180deg); }
/* grid-template-rows 0fr -> 1fr rather than max-height. The old rule needed a
   magic `max-height: 600px` to open with, which silently clipped any answer taller
   than that — a real risk on a 320px screen with long FAQ copy. This measures the
   content instead of guessing at it. */
.accordion-panel {
  display: grid; grid-template-rows: 0fr; overflow: hidden;
  transition: grid-template-rows .3s var(--ease-out);
  color: var(--muted); font-size: .93rem;
}
.accordion-item.is-open .accordion-panel { grid-template-rows: 1fr; }
/* The padding only exists while open. A 0fr row zeroes the content box but not
   the padding, so leaving it on unconditionally left every closed panel 18px tall. */
.accordion-panel-inner { min-height: 0; }
.accordion-item.is-open .accordion-panel-inner { padding-bottom: 1.1rem; }

/* =============================================================
   10. Testimonials
   ============================================================= */
.testimonial {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem; display: flex; flex-direction: column; gap: .9rem;
}
.testimonial p { font-style: italic; color: var(--body); }
.testimonial-author { display: flex; align-items: center; gap: .7rem; font-size: .85rem; }
.avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, var(--emerald-deep), var(--blue));
  display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: .8rem;
}

/* =============================================================
   11. Article layout
   ============================================================= */
.breadcrumb { font-size: .82rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.breadcrumb a { color: var(--muted); font-weight: 500; }
.breadcrumb a:hover { color: var(--blue); }
.breadcrumb .sep { color: var(--line); }
.breadcrumb .current { color: var(--ink); font-weight: 600; }

.article-header { padding-block: 2rem 1.5rem; border-bottom: 1px solid var(--line); }
.article-header h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-top: .75rem; }
.article-meta { display: flex; flex-wrap: wrap; gap: 1.1rem; margin-top: 1.1rem; font-size: .85rem; color: var(--muted); align-items: center; }
.article-meta strong { color: var(--ink); }

.article-layout { display: grid; gap: 2.5rem; padding-block: 2.5rem; }
/* Cap the measure on prose only. Without this the body column runs the full
   940px of the two-column grid, which is ~93 characters per line — well past the
   65-75 that long-form text reads comfortably at. Capping the individual prose
   elements rather than .article-body itself leaves tables, the related-reading
   grid and the author box free to use the whole column. */
.article-body > p,
.article-body > ul,
.article-body > ol,
.article-body > h2,
.article-body > h3,
.article-body > .summary-box,
.article-body > .sources-list { max-width: 68ch; }
.article-body h2 { font-size: 1.5rem; margin-top: 2.2rem; margin-bottom: .8rem; scroll-margin-top: 90px; }
.article-body h3 { font-size: 1.2rem; margin-top: 1.6rem; margin-bottom: .6rem; scroll-margin-top: 90px; }
.article-body p { margin-bottom: 1rem; }
.article-body ul, .article-body ol { margin-bottom: 1rem; }
.article-body li { margin-bottom: .4rem; }
.article-body img { border-radius: var(--radius-sm); margin-block: 1.25rem; }

.summary-box {
  background: var(--blue-50); border: 1px solid #DBEAFE; border-radius: var(--radius-sm);
  padding: 1.25rem 1.4rem; margin-bottom: 1.5rem;
}
.summary-box h2 { font-size: 1rem; margin: 0 0 .5rem; color: var(--blue); }

.pros-cons { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-block: 1.5rem; }
.pros-cons > div { border-radius: var(--radius-sm); padding: 1.1rem 1.25rem; border: 1px solid var(--line); }
.pros-cons .pros { background: #ECFDF5; border-color: #A7F3D0; }
.pros-cons .cons { background: #FEF2F2; border-color: #FECACA; }
.pros-cons h3 { font-size: .95rem; margin: 0 0 .6rem; }
.pros-cons .pros h3 { color: var(--emerald-dark); }
.pros-cons .cons h3 { color: #B91C1C; }
.pros-cons ul { padding-left: 1.1rem; font-size: .9rem; }
.pros-cons li { margin-bottom: .35rem; }

.compare-table-wrap { overflow-x: auto; margin-block: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.compare-table { font-size: .88rem; min-width: 480px; }
.compare-table th, .compare-table td { padding: .8rem 1rem; text-align: left; border-bottom: 1px solid var(--line); }
.compare-table thead th { background: var(--bg-alt); color: var(--ink); font-weight: 700; }
.compare-table tr:last-child td { border-bottom: 0; }

.toc {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 1.1rem 1.25rem; background: var(--bg-alt);
}
.toc h2 { font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 .7rem; color: var(--muted); }
.toc ol { list-style: decimal; padding-left: 1.1rem; font-size: .87rem; }
.toc li { margin-bottom: .5rem; }
.toc a { color: var(--body); font-weight: 500; }
.toc a:hover { color: var(--blue); }

.share-row { display: flex; align-items: center; gap: .6rem; margin-block: 1.5rem; flex-wrap: wrap; }
.share-row span { font-size: .82rem; color: var(--muted); font-weight: 600; }
.share-btn {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; color: var(--body);
}
.share-btn:hover { border-color: var(--blue); color: var(--blue); text-decoration: none; }

.author-box {
  display: flex; gap: 1rem; align-items: flex-start;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem;
  margin-top: 2rem; background: var(--bg-alt);
}
.author-box .avatar { width: 52px; height: 52px; font-size: 1rem; }
.author-box h3 { font-size: .95rem; margin-bottom: .2rem; }
.author-box p { font-size: .84rem; color: var(--muted); margin: 0; }

.sources-list { font-size: .85rem; color: var(--muted); margin-top: 2rem; }
.sources-list li { margin-bottom: .3rem; }

.related-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; margin-top: 1rem; }

.ad-slot {
  display: flex; align-items: center; justify-content: center;
  min-height: 100px; border: 1px dashed var(--line); border-radius: var(--radius-sm);
  background: var(--bg-alt); color: var(--muted); font-size: .78rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; margin-block: 1.75rem;
}
.ad-slot[data-size="leaderboard"] { min-height: 90px; }
.ad-slot[data-size="rectangle"] { min-height: 250px; max-width: 336px; margin-inline: auto; }
.ad-slot[data-size="in-article"] { min-height: 120px; }

/* Live in-feed unit. Deliberately not .ad-slot: that carries a dashed
   placeholder border, which around a real ad reads as a broken element. An
   in-feed unit sizes itself to the surrounding cards, so its height cannot be
   known up front — the min-height reserves enough that the grid does not jump
   when the ad resolves, and overflow:clip stops a tall creative from stretching
   the row it shares with real cards. */
.ad-infeed { min-height: 250px; overflow: clip; }
.ad-infeed ins { display: block; width: 100%; }

/* =============================================================
   12. Calculators
   ============================================================= */
.calc-box {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.5rem, 4vw, 2.25rem); background: var(--card); box-shadow: var(--shadow-sm);
}
.calc-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
.calc-result {
  margin-top: 1.5rem; padding: 1.5rem; border-radius: var(--radius-sm);
  background: var(--blue-50); border: 1px solid #DBEAFE;
}
.calc-result .amount { font-size: 2.2rem; font-weight: 800; color: var(--blue); }
.calc-result .label { font-size: .82rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.calc-disclaimer { font-size: .78rem; color: var(--muted); margin-top: 1rem; }

/* =============================================================
   13. Footer
   ============================================================= */
.site-footer { background: var(--ink); color: #CBD5E1; padding-block: 3.5rem 2rem; margin-top: 3rem; }
.footer-grid { display: grid; gap: 2.25rem; grid-template-columns: 1fr; }
.footer-brand .logo { color: #fff; }
.footer-brand p { color: #94A3B8; font-size: .88rem; margin-top: .9rem; max-width: 32ch; }
.footer-col h2 { color: #fff; font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .9rem; }
.footer-col ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.footer-col a { color: #94A3B8; font-size: .88rem; }
.footer-col a:hover { color: #fff; text-decoration: none; }
.footer-bottom {
  border-top: 1px solid #1E293B; margin-top: 2.5rem; padding-top: 1.5rem;
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center;
  font-size: .8rem; color: #94A3B8;
}
.footer-disclaimer { font-size: .78rem; color: #94A3B8; margin-top: 1.5rem; line-height: 1.6; max-width: 90ch; }

/* =============================================================
   14. Reading progress + back to top
   ============================================================= */
/* scaleX, not width. main.js writes this on every scroll event; animating width
   there forced layout and paint on the whole document on the hottest path in the
   page. A transform on a fixed element stays on the compositor. */
.reading-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%; will-change: transform;
  background: linear-gradient(90deg, var(--blue), var(--emerald)); z-index: 50;
  transition: transform .1s linear;
}
.back-to-top {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 40;
  width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: #fff;
  display: none; align-items: center; justify-content: center; box-shadow: var(--shadow-md);
}
.back-to-top.is-visible { display: flex; }

/* =============================================================
   15. Responsive (mobile-first)
   ============================================================= */
@media (min-width: 540px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .pros-cons { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 720px) {
  .hero-grid { grid-template-columns: 1.1fr .9fr; }
  .related-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
}
@media (min-width: 960px) {
  .main-nav { display: flex; }
  .nav-toggle { display: none; }
  .mobile-nav { display: none !important; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  .article-layout { grid-template-columns: 220px 1fr; align-items: start; }
  .toc { position: sticky; top: 90px; }
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
  .compare-table { min-width: 100%; }
}
@media (min-width: 1280px) {
  .container, .container-narrow { padding-inline: 0; }
}

/* =============================================================
   16. Reduced motion (only intrusive)
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reading-progress { transition: none; }
}

/* ---------- BLS price index table ---------- */
.compare-table caption { caption-side: top; text-align: left; padding: .8rem 1rem; font-size: .8rem; color: var(--muted); border-bottom: 1px solid var(--line); }
.compare-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.compare-table th[scope="row"] { font-weight: 600; color: var(--ink); }
.series-id { font-weight: 400; font-size: .75rem; color: var(--muted); }
.delta { font-weight: 700; }
.delta.up { color: #b42318; }
.delta.down { color: #067647; }
.delta.flat { color: var(--muted); }