/* ================================================================
   THE FIX CAR v7.11.4  |  Clean, single source of truth
   ================================================================ */

/* ── Tokens ───────────────────────────────────────────────────── */
:root {
  --white:   #ffffff;
  --off:     #f8f7f4;
  --off-2:   #f1f0eb;
  --ink:     #111118;
  --ink-2:   #2a2a35;
  --muted:   #6b6b7a;
  --line:    rgba(17,17,24,0.08);
  --line-s:  rgba(17,17,24,0.14);

  --brand:   #E8441A;
  --brand-l: #fff0ec;
  --brand-xl:rgba(232,68,26,0.10);
  --brand-d: #b83310;
  --amber-l: #fffbeb;
  --teal-l:  #f0fdf9;
  --blue-l:  #eff6ff;

  --font-h: 'Outfit', sans-serif;
  --font-b: 'Instrument Sans', sans-serif;

  --t-xs:  clamp(0.75rem,  0.70rem + 0.15vw, 0.82rem);
  --t-sm:  clamp(0.90rem,  0.86rem + 0.18vw, 1.00rem);
  --t-md:  clamp(1.00rem,  0.97rem + 0.15vw, 1.10rem);
  --t-lg:  clamp(1.15rem,  1.05rem + 0.40vw, 1.40rem);
  --t-xl:  clamp(1.40rem,  1.20rem + 0.90vw, 2.10rem);
  --t-2xl: clamp(2.00rem,  1.50rem + 2.20vw, 3.60rem);
  --t-3xl: clamp(2.40rem,  1.80rem + 3.00vw, 4.80rem);

  --s-2:0.5rem; --s-3:0.75rem; --s-4:1rem;   --s-5:1.25rem;
  --s-6:1.5rem; --s-8:2rem;    --s-10:2.5rem; --s-12:3rem;
  --s-16:4rem;  --s-20:5rem;   --s-24:6rem;

  --container: 1200px;
  --content:   700px;
  --hdr-h:     70px;

  --r-sm:   10px;
  --r-md:   16px;
  --r-lg:   24px;
  --r-xl:   32px;
  --r-pill: 999px;

  --sh-sm: 0 2px 12px rgba(17,17,24,0.07);
  --sh-md: 0 6px 28px rgba(17,17,24,0.11);
  --sh-lg: 0 16px 48px rgba(17,17,24,0.13);

  --tr: 0.20s cubic-bezier(0.4,0,0.2,1);
}

/* ── Reset ────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink-2);
  font-family: var(--font-b);
  font-size: var(--t-md);
  line-height: 1.70;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip; /* clip: does NOT break position:sticky */
}
img { display: block; max-width: 100%; height: auto; }
svg { display: block; }
a   { color: var(--brand); text-decoration: none; transition: color var(--tr); }
a:hover { color: var(--brand-d); }
p   { margin: 0 0 1.2rem; }
ul,ol { margin: 0 0 1.2rem; padding-left: 1.3rem; }
h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-h); font-weight: 700; line-height: 1.08;
  letter-spacing: -0.025em; color: var(--ink); margin: 0 0 0.75rem;
}
h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-xl);  }
h4 { font-size: var(--t-lg);  }

/* ── Utilities ────────────────────────────────────────────────── */
.container { width: min(calc(100% - 2.5rem), var(--container)); margin-inline: auto; }
.narrow    { max-width: var(--content); margin-inline: auto; }
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.breadcrumbs { margin: 0 0 1rem; }
.breadcrumbs__list {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 0.7rem;
  margin: 0; padding: 0; list-style: none;
  font-family: var(--font-h); font-size: var(--t-xs); font-weight: 600; color: var(--muted);
}
.breadcrumbs__item { display: inline-flex; align-items: center; gap: 0.7rem; }
.breadcrumbs__item:not(:last-child)::after {
  content: '/'; color: rgba(17,17,24,0.32);
}
.breadcrumbs a { color: var(--muted); }
.breadcrumbs a:hover { color: var(--ink); }
.breadcrumbs [aria-current="page"] { color: var(--ink); }

/* ── Tag pill — refined, no background fill ───────────────────── */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-h);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--brand-d);
  background: transparent;
  border: 1.5px solid rgba(232,68,26,0.28);
  border-radius: var(--r-pill);
  padding: 0.26rem 0.78rem;
  white-space: nowrap;
  vertical-align: middle;
}
.tag::before {
  content: '';
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--brand);
  flex-shrink: 0;
}
.tag.cat--symptoms    { color:#92400e; border-color:rgba(245,158,11,.35); }
.tag.cat--symptoms::before    { background:#f59e0b; }
.tag.cat--maintenance { color:#1e40af; border-color:rgba(37,99,235,.30); }
.tag.cat--maintenance::before { background:#2563eb; }
.tag.cat--specs       { color:#065f46; border-color:rgba(13,148,136,.30); }
.tag.cat--specs::before       { background:#0d9488; }
.tag.cat--tools       { color:#9a3412; border-color:rgba(232,68,26,.28); }
.tag.cat--safety      { color:#881337; border-color:rgba(190,18,60,.30); }
.tag.cat--safety::before      { background:#be123c; }

/* ── Buttons ──────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 0.80rem 1.70rem;
  border-radius: var(--r-pill);
  font-family: var(--font-h); font-size: var(--t-sm); font-weight: 700;
  border: none; cursor: pointer; white-space: nowrap;
  text-decoration: none; transition: all var(--tr);
}
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover {
  background: var(--brand-d); color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(232,68,26,0.28);
}
.btn--ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line-s); }
.btn--ghost:hover { border-color: var(--brand); color: var(--brand); }

/* ── Header ───────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 100;
  height: var(--hdr-h);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex; align-items: center;
  justify-content: space-between; gap: var(--s-6); height: 100%;
}
.site-branding {
  display: flex; align-items: center; gap: var(--s-3);
  flex-shrink: 0; text-decoration: none;
}
.site-logo img { max-height: 36px; width: auto; display: block; }
.site-tagline  { display: none; }

/* Logo: inline SVG mark + HTML wordmark */
.logo-mark { display: flex; align-items: center; flex-shrink: 0; }
.logo-mark svg { display: block; }
.logo-wordmark {
  font-family: var(--font-h);
  font-size: 1.10rem; font-weight: 800;
  letter-spacing: -0.04em; color: var(--ink); line-height: 1;
}
.logo-tld { color: var(--brand); }

.site-nav { display: flex; align-items: center; }
.site-nav ul { display: flex; align-items: center; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.site-nav a {
  display: inline-flex; align-items: center; min-height: 38px;
  padding: 0.38rem 0.85rem; border-radius: var(--r-md);
  font-family: var(--font-h); font-size: var(--t-sm); font-weight: 600;
  color: var(--muted); transition: all var(--tr);
}
.site-nav a:hover,
.site-nav .current-menu-item > a { color: var(--ink); background: var(--off); }
.site-nav .current-menu-item > a { color: var(--brand); }
.site-nav li:last-child a {
  background: var(--brand); color: #fff;
  padding: 0.38rem 1.1rem; border-radius: var(--r-pill);
}
.site-nav li:last-child a:hover { background: var(--brand-d); color: #fff; }

.menu-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 42px; height: 42px; padding: 0.5rem;
  background: var(--off); border: 1px solid var(--line-s);
  border-radius: var(--r-sm); cursor: pointer; flex-shrink: 0;
}
.menu-toggle span { display: block; width: 100%; height: 2px; background: var(--ink); border-radius: 2px; transition: all 0.22s ease; }

/* ── Hero ─────────────────────────────────────────────────────── */
.hero {
  position: relative;
  padding: var(--s-20) 0 var(--s-16);
  background: var(--white);
  overflow: visible;
}
.hero::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 65% 55% at 70% 0%,  rgba(232,68,26,0.07) 0%, transparent 60%),
    radial-gradient(ellipse 45% 40% at 100% 80%, rgba(245,158,11,0.05) 0%, transparent 55%),
    radial-gradient(ellipse 35% 30% at 0%  60%,  rgba(37,99,235,0.04)  0%, transparent 55%);
}
.hero__inner {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-12);
  align-items: center;
}
.hero__copy { max-width: 560px; }
.hero__eyebrow {
  display: flex; align-items: center;
  gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-5);
}
.hero__eyebrow .tag { margin-bottom: 0; }
.hero__badge-live {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-h); font-size: 0.68rem; font-weight: 600;
  color: #15803d; background: #f0fdf4;
  border: 1.5px solid #86efac; border-radius: var(--r-pill);
  padding: 0.26rem 0.78rem; white-space: nowrap; vertical-align: middle;
}
@keyframes pulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:.5; transform:scale(0.78); }
}
.hero__badge-live::before {
  content: ''; width: 4px; height: 4px; border-radius: 50%;
  background: #16a34a; animation: pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
.hero h1 { font-size: var(--t-3xl); line-height: 1.04; margin-bottom: var(--s-5); }
.hero h1 em { font-style: normal; color: var(--brand); }
.hero__lead {
  font-size: var(--t-lg); color: var(--muted); line-height: 1.6;
  max-width: 460px; margin-bottom: var(--s-8);
}
.hero__cta { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-10); }
.hero__stats {
  display: flex; gap: var(--s-8);
  padding-top: var(--s-5); border-top: 1px solid var(--line);
}
.hero__stat-value { font-family: var(--font-h); font-size: var(--t-xl); font-weight: 800; color: var(--ink); line-height: 1; }
.hero__stat-label { font-size: var(--t-xs); color: var(--muted); text-transform: uppercase; letter-spacing: 0.07em; margin-top: 3px; }

/* Hero visual column (desktop right) */
.hero__visual {
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.hero__illu {
  width: 100%; max-width: 520px;
  margin: 32px 36px 44px;
}
.hero__illu img { width: 100%; height: auto; display: block; }

/* Floating diagnostic cards */
@keyframes floatY-l {
  0%,100% { transform: translateY(calc(-50% + 0px)); }
  50%      { transform: translateY(calc(-50% - 9px)); }
}
@keyframes floatY-r {
  0%,100% { transform: translateY(calc(-50% + 0px)); }
  50%      { transform: translateY(calc(-50% - 9px)); }
}
@keyframes floatY-b {
  0%,100% { transform: translateX(-50%) translateY(0px); }
  50%      { transform: translateX(-50%) translateY(-9px); }
}
.hero-float {
  position: absolute;
  background: #fff; border: 1px solid var(--line-s);
  border-radius: var(--r-lg); padding: var(--s-3) var(--s-4);
  display: flex; align-items: center; gap: var(--s-3);
  box-shadow: var(--sh-md); min-width: 164px; z-index: 2;
}
.hero-float--l { left: -32px; top: 50%; animation: floatY-l 3.8s ease-in-out infinite 0s; }
.hero-float--r { right: -32px; top: 50%; animation: floatY-r 3.8s ease-in-out infinite 1.4s; }
.hero-float--b { left: 50%; bottom: -28px; min-width: auto; animation: floatY-b 3.8s ease-in-out infinite 0.7s; }
.hero-float__icon {
  width: 36px; height: 36px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.hero-float__icon--brand { background: var(--brand-l); }
.hero-float__icon--amber { background: var(--amber-l); }
.hero-float__icon--green { background: #f0fdf4; }
.hero-float__text strong {
  display: block; font-family: var(--font-h); font-size: var(--t-sm);
  font-weight: 700; color: var(--ink); line-height: 1.25;
}
.hero-float__text span { font-size: var(--t-xs); color: var(--muted); display: block; margin-top: 2px; }

/* Mobile car strip — hidden on desktop */
.hero__mob-car { display: none; background: var(--off); border-top: 1px solid var(--line); overflow: hidden; }
.hero__mob-car img { display: block; width: 100%; max-width: 480px; margin: 0 auto; }

/* ── Trust strip ──────────────────────────────────────────────── */
.trust-strip {
  background: var(--off); padding: var(--s-6) 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.trust-strip__inner { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--s-5); }
.trust-item { display: flex; align-items: center; gap: var(--s-3); }
.trust-item__icon {
  width: 42px; height: 42px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; flex-shrink: 0;
}
.trust-item__icon--brand { background: var(--brand-l); }
.trust-item__icon--blue  { background: var(--blue-l);  }
.trust-item__icon--amber { background: var(--amber-l); }
.trust-item__icon--teal  { background: var(--teal-l);  }
.trust-item strong { display: block; font-family: var(--font-h); font-size: var(--t-sm); font-weight: 700; color: var(--ink); }
.trust-item span { font-size: var(--t-xs); color: var(--muted); }

/* ── Section scaffold ─────────────────────────────────────────── */
.section        { padding: var(--s-20) 0; }
.section--tight { padding: var(--s-12) 0; }
.section--off   { background: var(--off); }

/* Centred heading (pillars, clusters) */
.section-head--center {
  text-align: center; max-width: 580px; margin: 0 auto var(--s-10);
}
.section-head--center .tag { display: inline-flex; margin-bottom: var(--s-4); }
.section-head--center h2   { margin-bottom: var(--s-3); }
.section-head--center p    { color: var(--muted); font-size: var(--t-md); line-height: 1.65; max-width: 460px; margin: 0 auto; }

/* Row heading: tag+title left, "View all" right */
.section-head--row {
  display: flex; align-items: flex-end;
  justify-content: space-between; gap: var(--s-6); margin-bottom: var(--s-8);
}
.section-head--row .tag { display: inline-flex; margin-bottom: var(--s-2); }
.section-head--row h2   { margin-bottom: 0; }

.view-all {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-h); font-size: var(--t-sm); font-weight: 700;
  color: var(--muted); flex-shrink: 0; transition: color var(--tr);
  padding-bottom: 2px; border-bottom: 1px solid var(--line-s);
}
.view-all::after { content: '→'; transition: transform var(--tr); }
.view-all:hover  { color: var(--brand); border-color: var(--brand); }
.view-all:hover::after { transform: translateX(3px); }

/* ── Pillars ──────────────────────────────────────────────────── */
.pillars-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: var(--s-4); }
.pillar-card {
  position: relative; background: var(--white);
  border: 1px solid var(--line-s); border-radius: var(--r-xl);
  padding: var(--s-6); overflow: hidden; transition: all var(--tr);
}
.pillar-card::after {
  content: ''; position: absolute; inset: 0; opacity: 0;
  background: var(--hover-bg, transparent);
  transition: opacity 0.35s ease; pointer-events: none;
}
.pillar-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); border-color: var(--hover-border, var(--line-s)); }
.pillar-card:hover::after { opacity: 1; }
.pillar-card--s  { --hover-border:#fcd34d; --hover-bg:linear-gradient(160deg,rgba(245,158,11,.04),transparent); }
.pillar-card--m  { --hover-border:#93c5fd; --hover-bg:linear-gradient(160deg,rgba(37,99,235,.04),transparent);  }
.pillar-card--sp { --hover-border:#6ee7b7; --hover-bg:linear-gradient(160deg,rgba(13,148,136,.04),transparent); }
.pillar-card--t  { --hover-border:#fca5a5; --hover-bg:linear-gradient(160deg,rgba(232,68,26,.04),transparent);  }
.pillar-card--sf { --hover-border:#fda4af; --hover-bg:linear-gradient(160deg,rgba(244,63,94,.04),transparent);  }
.pillar-card--sf .pillar-card__icon { background: #fff1f2; }
.pillar-card--s  .pillar-card__icon { background: var(--amber-l); }
.pillar-card--m  .pillar-card__icon { background: var(--blue-l);  }
.pillar-card--sp .pillar-card__icon { background: var(--teal-l);  }
.pillar-card--t  .pillar-card__icon { background: var(--brand-l); }
.pillar-card__n { font-family: var(--font-h); font-size: 0.70rem; font-weight: 700; color: var(--muted); letter-spacing: 0.10em; text-transform: uppercase; margin-bottom: var(--s-4); }
.pillar-card__icon { width: 50px; height: 50px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; margin-bottom: var(--s-5); }
.pillar-card__icon img { width: 28px; height: 28px; }
.pillar-card h3 { font-size: var(--t-lg); margin-bottom: var(--s-2); }
.pillar-card p  { font-size: var(--t-sm); color: var(--muted); line-height: 1.6; margin: 0; }

/* ── Article cards ────────────────────────────────────────────── */
.post-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--s-5); }
.card-article {
  display: flex; flex-direction: column; background: var(--white);
  border: 1px solid var(--line-s); border-radius: var(--r-lg);
  overflow: hidden; text-decoration: none; transition: all var(--tr);
}


/* ── SVG card thumbnail backgrounds per category ────────────── */
.card-svg-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  padding: 1.5rem;
}
.card-svg-thumb--symptoms    { background: #1e2433; }
.card-svg-thumb--maintenance { background: #1a1e2e; }
.card-svg-thumb--specs       { background: #0f1e1a; }
.card-svg-thumb--calculators { background: #1e1410; }
.card-svg-thumb--general     { background: #1c1f2e; }
.card-svg-thumb--safety      { background: #1f1217; }

/* ── SVG used as card thumbnail ─────────────────────────────── */
.card-article__thumb svg:not([class]) {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: contain;
}

.card-article:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); border-color: rgba(232,68,26,0.20); }
.card-article__thumb {
  aspect-ratio: 16/9; background: var(--off-2);
  overflow: hidden; position: relative; flex-shrink: 0;
}
.card-article__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s ease; }
.card-article__thumb svg { width: 100%; height: 100%; display: block; }
.card-article:hover .card-article__thumb img { transform: scale(1.05); }
.card-article__cat {
  position: absolute; top: var(--s-3); left: var(--s-3);
  font-family: var(--font-h); font-size: 0.70rem; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: #fff; background: var(--brand); border-radius: var(--r-pill); padding: 0.22rem 0.65rem;
}
.card-article__body { display: flex; flex-direction: column; flex: 1; padding: var(--s-5); }
.card-article__title {
  font-family: var(--font-h); font-size: var(--t-md); font-weight: 700;
  color: var(--ink); line-height: 1.30; letter-spacing: -0.018em;
  margin: 0 0 var(--s-3); transition: color var(--tr);
}
.card-article:hover .card-article__title { color: var(--brand); }
.card-article__exc {
  font-size: var(--t-sm); color: var(--muted); line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; margin: 0 0 var(--s-4);
}
.card-article__foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: auto; padding-top: var(--s-3); border-top: 1px solid var(--line);
}
.card-article__meta { font-family: var(--font-h); font-size: var(--t-xs); color: var(--muted); }
.card-article__arr {
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  background: var(--off); border-radius: 50%; color: var(--muted); font-size: 0.85rem;
  flex-shrink: 0; transition: all var(--tr);
}
.card-article:hover .card-article__arr { background: var(--brand); color: #fff; }

/* ── Topic clusters ───────────────────────────────────────────── */
.clusters-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--s-4); }
.topic-cluster {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-5) var(--s-6); background: var(--white);
  border: 1.5px solid var(--line); border-radius: var(--r-xl);
  text-decoration: none; transition: all var(--tr);
}
.topic-cluster:hover { border-color: var(--cc, var(--brand)); box-shadow: var(--sh-sm); transform: translateY(-2px); }
.topic-cluster:nth-child(1) { --cc: var(--brand); }
.topic-cluster:nth-child(2) { --cc: #2563eb;      }
.topic-cluster:nth-child(3) { --cc: #0d9488;      }
.topic-cluster:nth-child(4) { --cc: #d97706;      }
.topic-cluster__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--cc, var(--brand)); flex-shrink: 0; }
.topic-cluster__text { flex: 1; }
.topic-cluster__text strong { display: block; font-family: var(--font-h); font-weight: 700; font-size: var(--t-md); color: var(--ink); margin-bottom: 2px; }
.topic-cluster__text span   { font-size: var(--t-xs); color: var(--muted); }
.topic-cluster__arr { font-size: 1.1rem; color: var(--muted); flex-shrink: 0; transition: all var(--tr); }
.topic-cluster:hover .topic-cluster__arr { color: var(--cc, var(--brand)); transform: translate(4px,-1px); }

/* ── Single article ───────────────────────────────────────────── */
.page-hero { padding: var(--s-12) 0 var(--s-10); background: var(--off); border-bottom: 1px solid var(--line); }
.entry-meta { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-4); font-family: var(--font-h); font-size: var(--t-xs); color: var(--muted); }
.entry-meta a { color: var(--brand); }
.entry-lead { font-size: clamp(1.08rem, 1.02rem + 0.42vw, 1.32rem); color: var(--muted); line-height: 1.68; margin-top: var(--s-4); margin-bottom: 0; max-width: 44rem; }
.layout-grid { display: grid; grid-template-columns: 1fr 280px; gap: var(--s-12); padding: var(--s-12) 0 var(--s-20); align-items: start; }
.single-shell { width: min(calc(100% - 2.5rem), 980px); margin-inline: auto; }
.single-layout { display: block; padding-top: var(--s-8); padding-bottom: var(--s-20); }
.content-area--single { width: 100%; }
.entry-content { color: var(--ink-2); line-height: 1.8; }
.entry-content h2,.entry-content h3 { margin-top: var(--s-10); margin-bottom: var(--s-4); padding-top: var(--s-6); border-top: 1px solid var(--line); }
.entry-content h2:first-child,.entry-content h3:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.entry-content a { color: var(--brand); border-bottom: 1px solid rgba(232,68,26,0.25); }
.entry-content a:hover { color: var(--brand-d); border-color: transparent; }
.entry-content ul li,.entry-content ol li { margin-bottom: 0.4rem; }
.entry-content blockquote { margin: var(--s-8) 0; padding: var(--s-5) var(--s-6); background: var(--off); border-left: 3px solid var(--brand); font-style: italic; color: var(--muted); }
.entry-content table { width: 100%; border-collapse: collapse; margin: var(--s-6) 0; font-size: var(--t-sm); }
.entry-content th { background: var(--off-2); font-family: var(--font-h); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); padding: var(--s-3) var(--s-4); border: 1px solid var(--line-s); text-align: left; }
.entry-content td { padding: var(--s-3) var(--s-4); border: 1px solid var(--line); vertical-align: top; }
.entry-thumbnail { margin: 0 0 var(--s-8); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); }
.entry-thumbnail img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.entry-content pre { background: var(--ink); color: #e5e7eb; border-radius: var(--r-md); padding: var(--s-5); overflow-x: auto; font-size: 0.875em; line-height: 1.6; margin: var(--s-6) 0; }
.entry-content code { font-size: 0.88em; background: var(--off-2); padding: 0.12em 0.4em; border-radius: 4px; color: var(--brand-d); }
.entry-content pre code { background: none; padding: 0; color: inherit; }

/* ── Sidebar ──────────────────────────────────────────────────── */
.widget-area { position: sticky; top: calc(var(--hdr-h) + var(--s-5)); }
.widget { background: var(--off); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-5); margin-bottom: var(--s-4); }
.widget-title { font-family: var(--font-h); font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.10em; color: var(--muted); margin-bottom: var(--s-4); padding-bottom: var(--s-3); border-bottom: 1px solid var(--line); }
.widget ul { list-style: none; padding: 0; margin: 0; }
.widget ul li { padding: 0.45rem 0; border-bottom: 1px solid var(--line); }
.widget ul li:last-child { border-bottom: none; }
.widget ul li a { font-size: var(--t-sm); color: var(--ink-2); transition: color var(--tr); }
.widget ul li a:hover { color: var(--brand); }
.search-form { display: flex; gap: var(--s-2); }
.search-form input[type="search"] { flex: 1; background: var(--white); border: 1px solid var(--line-s); border-radius: var(--r-md); padding: 0.6rem 0.9rem; font-family: var(--font-b); font-size: var(--t-sm); color: var(--ink); outline: none; transition: border-color var(--tr); }
.search-form input[type="search"]:focus { border-color: var(--brand); }
.search-form button { background: var(--brand); border: none; border-radius: var(--r-md); padding: 0.6rem 0.9rem; color: #fff; cursor: pointer; font-family: var(--font-h); font-size: var(--t-sm); font-weight: 700; transition: background var(--tr); }
.search-form button:hover { background: var(--brand-d); }

/* ── Archive / Category ───────────────────────────────────────── */
.archive-hero { padding: var(--s-12) 0; background: var(--off); border-bottom: 1px solid var(--line); }
.archive-hero h1 { font-size: var(--t-2xl); margin-bottom: var(--s-2); }
.archive-hero p  { color: var(--muted); margin: 0; }
.archive-layout  { display: grid; grid-template-columns: 1fr 280px; gap: var(--s-10); padding: var(--s-12) 0 var(--s-20); align-items: start; }
.search-hero     { padding: var(--s-10) 0; border-bottom: 1px solid var(--line); }
.search-count    { font-family: var(--font-h); font-size: var(--t-sm); color: var(--muted); margin-top: var(--s-2); }


/* ── Section variants (archive + single) ─────────────────────── */
.section-theme--symptoms,
.archive-hero--symptoms,
.single-entry--symptoms { --section-accent:#d97706; --section-soft:#fff7ed; --section-soft-2:#fffbeb; --section-line:#f5d0a8; --section-glow:rgba(245,158,11,.18); }
.section-theme--maintenance,
.archive-hero--maintenance,
.single-entry--maintenance { --section-accent:#2563eb; --section-soft:#eff6ff; --section-soft-2:#f8fbff; --section-line:#bfdbfe; --section-glow:rgba(37,99,235,.16); }
.section-theme--specs,
.archive-hero--specs,
.single-entry--specs { --section-accent:#0f766e; --section-soft:#f0fdfa; --section-soft-2:#f7fffd; --section-line:#99f6e4; --section-glow:rgba(15,118,110,.15); }
.section-theme--calculators,
.archive-hero--calculators,
.single-entry--calculators { --section-accent:var(--brand); --section-soft:var(--brand-l); --section-soft-2:#fff8f6; --section-line:#f7b39f; --section-glow:rgba(232,68,26,.15); }
.section-theme--safety,
.archive-hero--safety,
.single-entry--safety { --section-accent:#be123c; --section-soft:#fff1f2; --section-soft-2:#fff8f9; --section-line:#fecdd3; --section-glow:rgba(190,18,60,.14); }
.archive-hero--section,
.single-entry__hero[class*="--"] { position: relative; overflow: hidden; }
.archive-hero--section::before,
.single-entry__hero[class*="--"]::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 8% 18%, var(--section-glow, rgba(232,68,26,.12)) 0, transparent 26%),
    radial-gradient(circle at 90% 0%, rgba(17,17,24,.035) 0, transparent 32%),
    linear-gradient(180deg, var(--section-soft-2, #fff), var(--section-soft, #f8f7f4));
  pointer-events: none;
}
.archive-hero__inner,
.single-entry__hero .container { position: relative; z-index: 1; }
.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .5rem .9rem;
  border-radius: var(--r-pill);
  margin-bottom: var(--s-5);
  background: rgba(255,255,255,.8);
  border: 1px solid var(--section-line, var(--line));
  color: var(--section-accent, var(--brand));
  font-family: var(--font-h);
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 10px 24px rgba(17,17,24,.04);
}
.section-kicker__icon {
  width: 1.7rem;
  height: 1.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--section-soft, var(--off));
  color: var(--section-accent, var(--brand));
}
.section-kicker__icon svg { width: 16px; height: 16px; }
.archive-hero__lead { max-width: 45rem; margin-inline: auto; }
.archive-hero--section .archive-hero__inner { text-align: center; }
.archive-hero--section .breadcrumbs__list,
.archive-hero--section .archive-signal { justify-content: center; }
.archive-signal {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: var(--s-6);
}
.archive-signal__item {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .72rem 1rem;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.78);
  border: 1px solid var(--section-line, var(--line));
  font-family: var(--font-h);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--ink);
}
.archive-signal__item::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--section-accent, var(--brand));
}
.single-entry__hero { border-bottom: 1px solid var(--section-line, var(--line)); }
.single-hero__frame {
  width: min(100%, 920px);
  margin-inline: auto;
}
.single-entry__hero .breadcrumbs { margin-bottom: var(--s-5); }
.single-entry__hero .breadcrumbs__list {
  gap: .55rem;
  font-size: .77rem;
}
.single-entry__hero .breadcrumbs__item { gap: .5rem; }
.single-entry__hero .breadcrumbs__item:not(:last-child) {
  padding: .42rem .78rem;
  background: rgba(255,255,255,.74);
  border: 1px solid var(--section-line, var(--line));
  border-radius: var(--r-pill);
  box-shadow: 0 10px 24px rgba(17,17,24,.04);
}
.single-entry__hero .breadcrumbs__item:not(:last-child)::after {
  content: '›';
  color: rgba(17,17,24,.32);
  margin-left: .1rem;
}
.single-entry__hero .breadcrumbs__item:last-child {
  max-width: 34ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.single-entry__hero .breadcrumbs__item:last-child::after { display: none; }
.single-hero__metahead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  flex-wrap: wrap;
  margin-bottom: var(--s-5);
}
.single-entry__hero .section-kicker {
  margin-bottom: 0;
  box-shadow: 0 14px 26px rgba(17,17,24,.05);
}
.single-entry__hero .entry-meta {
  gap: .55rem;
  margin-bottom: 0;
}
.single-entry__hero .entry-meta > span,
.single-entry__hero .entry-meta .cat-links,
.single-entry__hero .entry-meta .posted-on,
.single-entry__hero .entry-meta .reading-time {
  display: inline-flex;
  align-items: center;
  min-height: 2.35rem;
  padding: .46rem .78rem;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.72);
  border: 1px solid var(--section-line, var(--line));
  box-shadow: 0 10px 24px rgba(17,17,24,.04);
}
.single-entry__hero .entry-meta .sep { display: none; }
.single-entry__hero .entry-meta a,
.single-entry__hero .cat-links a { color: var(--section-accent, var(--brand)); }
.single-entry__hero h1 {
  max-width: 12ch;
  margin-bottom: var(--s-4);
}
.entry-guide {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, .92fr);
  gap: var(--s-5);
  margin-bottom: var(--s-10);
  padding: var(--s-6);
  border-radius: calc(var(--r-xl) + 2px);
  border: 1px solid var(--section-line, var(--line));
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.88)),
    linear-gradient(135deg, var(--section-soft-2, #fff), var(--section-soft, var(--off)));
  box-shadow: 0 22px 54px rgba(17,17,24,.06);
}
.entry-guide__intro {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: var(--s-5);
  align-items: end;
}
.entry-guide__title {
  font-size: clamp(1.35rem, 1.14rem + .85vw, 1.9rem);
  margin: 0;
}
.entry-guide__copy {
  margin: 0;
  color: var(--muted);
  max-width: 36rem;
}
.entry-guide__card {
  position: relative;
  border: 1px solid rgba(17,17,24,.07);
  background: rgba(255,255,255,.84);
  border-radius: calc(var(--r-lg) - 2px);
  padding: var(--s-5);
  box-shadow: 0 14px 34px rgba(17,17,24,.04);
}
.entry-guide__card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--section-accent, var(--brand)), transparent 80%);
}
.entry-guide__eyebrow {
  font-family: var(--font-h);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--section-accent, var(--brand));
  margin: 0 0 var(--s-4);
}
.entry-guide__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3);
}
.entry-guide__item {
  min-height: 112px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,247,244,.72));
  border: 1px solid rgba(17,17,24,.06);
  border-radius: 18px;
  padding: 1rem 1rem 1.05rem;
}
.entry-guide__label {
  display: block;
  font-family: var(--font-h);
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .11em;
  color: var(--muted);
  margin-bottom: .6rem;
}
.entry-guide__item strong {
  font-family: var(--font-h);
  font-size: 1rem;
  line-height: 1.45;
  color: var(--ink);
}
.toc-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .7rem;
  counter-reset: toc;
}
.toc-card__item a {
  display: flex;
  align-items: center;
  gap: .8rem;
  min-height: 3.35rem;
  padding: .7rem .9rem;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(248,247,244,.78));
  border: 1px solid rgba(17,17,24,.06);
  font-family: var(--font-h);
  font-size: .96rem;
  font-weight: 650;
  color: var(--ink-2);
}
.toc-card__item a::before {
  counter-increment: toc;
  content: counter(toc, decimal-leading-zero);
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--section-soft, var(--off));
  color: var(--section-accent, var(--brand));
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  flex-shrink: 0;
}
.toc-card__item a:hover {
  border-color: var(--section-line, var(--line));
  color: var(--section-accent, var(--brand));
  transform: translateX(2px);
}
.toc-card__item--level-3 a {
  padding-left: 1rem;
  font-size: var(--t-xs);
  color: var(--muted);
  min-height: 2.8rem;
}
.toc-card__item--level-3 a::before {
  width: 1.7rem;
  height: 1.7rem;
  font-size: .64rem;
}
.entry-content--symptoms h2,
.entry-content--symptoms h3 { border-top-color: rgba(217,119,6,.16); }
.entry-content--maintenance h2,
.entry-content--maintenance h3 { border-top-color: rgba(37,99,235,.14); }
.entry-content--specs h2,
.entry-content--specs h3 { border-top-color: rgba(15,118,110,.18); }
.entry-content--symptoms blockquote { background: #fffaf0; border-left-color: #d97706; }
.entry-content--maintenance blockquote { background: #f7fbff; border-left-color: #2563eb; }
.entry-content--specs blockquote { background: #f4fffc; border-left-color: #0f766e; }
.entry-content--symptoms table th { background: #fff5df; }
.entry-content--maintenance table th { background: #edf5ff; }
.entry-content--specs table th { background: #ebfffb; }
.card-article--symptoms .card-article__cat { background: #d97706; }
.card-article--maintenance .card-article__cat { background: #2563eb; }
.card-article--specs .card-article__cat { background: #0f766e; }
.card-article--symptoms:hover { border-color: rgba(217,119,6,.24); }
.card-article--maintenance:hover { border-color: rgba(37,99,235,.20); }
.card-article--specs:hover { border-color: rgba(15,118,110,.24); }
.section--related-symptoms,
.section--related-maintenance,
.section--related-specs { border-top: 1px solid var(--line); }
.section--related-symptoms .section-head__kicker h2 { color: #9a5d00; }
.section--related-maintenance .section-head__kicker h2 { color: #1d4ed8; }
.section--related-specs .section-head__kicker h2 { color: #0f766e; }



.single-entry .widget-area { display: none; }
.single-entry .entry-content {
  max-width: 780px;
}
.single-entry .entry-content > * {
  max-width: 100%;
}


@media (max-width: 860px) {
  .single-hero__metahead { align-items: flex-start; }
  .single-entry__hero h1 { max-width: 100%; }
}

@media (max-width: 640px) {
  /* Header fixed on mobile — overflow-x:clip on body won't break it */
  .site-header { position: fixed; top: 0; left: 0; right: 0; }
  .site-main    { padding-top: var(--hdr-h); }
  .page-hero { padding: var(--s-8) 0 var(--s-7); }
  .single-shell { width: min(calc(100% - 4rem), 980px); }
  .single-entry__hero .breadcrumbs__list { gap: .45rem; }
  .single-entry__hero .breadcrumbs__item:not(:last-child) { padding: .36rem .66rem; }
  .single-entry__hero .entry-meta > span,
  .single-entry__hero .entry-meta .cat-links,
  .single-entry__hero .entry-meta .posted-on,
  .single-entry__hero .entry-meta .reading-time { min-height: 2.1rem; }
  .entry-guide { padding: var(--s-4); gap: var(--s-4); }
  .entry-guide__card { padding: var(--s-4); }
  .entry-guide__item { min-height: auto; }
  .toc-card__item a { min-height: 3rem; font-size: .92rem; }
}

/* ── 404 ──────────────────────────────────────────────────────── */
.error-404 { min-height: 70vh; display: flex; align-items: center; padding: var(--s-20) 0; }
.error-404__code { font-family: var(--font-h); font-size: clamp(5rem,18vw,12rem); font-weight: 800; line-height: 0.85; color: var(--line-s); letter-spacing: -0.06em; margin-bottom: var(--s-4); }
.error-404 h1 { font-size: var(--t-2xl); }
.error-404 p  { color: var(--muted); margin-bottom: var(--s-8); }
.error-404__cta { display: flex; gap: var(--s-3); flex-wrap: wrap; }

/* ── Page ─────────────────────────────────────────────────────── */
.page-content { padding: var(--s-12) 0 var(--s-20); }

/* Prevent horizontal scroll from absolutely/fixed positioned children */
.site-main { overflow-x: clip; }

/* ── Footer ───────────────────────────────────────────────────── */
.site-footer { background: var(--ink); color: rgba(255,255,255,0.55); }
.footer-top { padding: var(--s-16) 0 var(--s-12); }
.footer-grid { display: grid; grid-template-columns: 2.2fr 1fr 1fr 1fr; gap: var(--s-10); }

/* Brand column */
.footer-brand-col {}

/* Cols wrapper — on desktop it's a grid child spanning 3 columns */
.footer-cols-wrap {
  display: contents; /* makes children act as direct grid items */
}
.footer-brand-link { display: inline-flex; align-items: center; gap: var(--s-3); text-decoration: none; margin-bottom: var(--s-4); }
.footer-logo-mark { display: flex; align-items: center; flex-shrink: 0; }
.footer-logo-mark svg { display: block; }
.footer-wordmark { font-family: var(--font-h); font-size: 1.15rem; font-weight: 800; letter-spacing: -0.04em; color: #fff; line-height: 1; }
.footer-tld { color: var(--brand); }
.footer-desc { font-size: var(--t-sm); color: rgba(255,255,255,0.40); line-height: 1.65; max-width: 240px; margin-bottom: var(--s-5); }
.footer-social { display: flex; gap: var(--s-2); }
.footer-social a {
  width: 36px; height: 36px; border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.40); font-size: 0.88rem; transition: all var(--tr);
}
.footer-social a:hover { border-color: var(--brand); color: var(--brand); }
.footer-social__icon { display: block; width: 18px; height: 18px; }
.footer-social__icon--youtube { width: 19px; height: 19px; }

/* Nav columns */
.footer-col-title { font-family: var(--font-h); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.11em; color: rgba(255,255,255,0.28); margin-bottom: var(--s-5); }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col ul li { margin-bottom: var(--s-3); }
.footer-col ul li a { font-size: var(--t-sm); color: rgba(255,255,255,0.50); transition: color var(--tr); }
.footer-col ul li a:hover { color: #fff; }

/* Bottom bar */
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-5) 0; border-top: 1px solid rgba(255,255,255,0.08); flex-wrap: wrap; }
.footer-bottom p { font-family: var(--font-h); font-size: var(--t-xs); color: rgba(255,255,255,0.28); margin: 0; }
.footer-bottom nav ul { display: flex; gap: var(--s-5); margin: 0; padding: 0; list-style: none; }
.footer-bottom nav a { font-family: var(--font-h); font-size: var(--t-xs); color: rgba(255,255,255,0.28); }
.footer-bottom nav a:hover { color: rgba(255,255,255,0.65); }


/* ── Hero illustration (right rail in single post hero) ────────── */
.post-hero__illustration {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 0;
}
.hero-illu {
  width: 100%;
  max-width: 260px;
  height: auto;
  filter: drop-shadow(0 20px 40px rgba(17,17,24,.10));
}

/* ── Scroll reveal ────────────────────────────────────────────── */
[data-reveal] { opacity:0; transform:translateY(20px); transition:opacity 0.65s cubic-bezier(0.2,0,0,1),transform 0.65s cubic-bezier(0.2,0,0,1); }
[data-reveal].is-visible { opacity:1; transform:none; }
[data-reveal-delay="1"] { transition-delay:0.10s; }
[data-reveal-delay="2"] { transition-delay:0.20s; }
[data-reveal-delay="3"] { transition-delay:0.30s; }
[data-reveal-delay="4"] { transition-delay:0.40s; }

/* ── Pagination ───────────────────────────────────────────────── */
.pagination { display:flex; align-items:center; justify-content:center; gap:var(--s-2); padding:var(--s-10) 0; }
.pagination .page-numbers { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:var(--r-sm); font-family:var(--font-h); font-size:var(--t-sm); font-weight:700; color:var(--muted); border:1px solid var(--line-s); background:var(--white); transition:all var(--tr); }
.pagination .page-numbers:hover,.pagination .page-numbers.current { background:var(--brand); border-color:var(--brand); color:#fff; }
.pagination .page-numbers.dots { border:none; background:none; }


/* Mobile nav overlay (scrim behind menu) */
.nav-overlay {
  display: none;
  position: fixed;
  inset: var(--hdr-h) 0 0 0;
  background: rgba(17,17,24,0.40);
  z-index: 97;
}
.nav-overlay.is-visible { display: block; }

/* No body scroll lock — it breaks position:sticky on iOS Safari.
   The menu is a fixed overlay; background scroll is acceptable. */

/* Hamburger → X animation when open */
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ================================================================
   RESPONSIVE
   3 breakpoints — tablet 1020, sidebar 860, mobile 640
   ================================================================ */

/* ── Tablet (≤1020px) ─────────────────────────────────────────── */
@media (max-width: 1020px) {
  /* Hero: single column, centred copy, show car strip */
  .hero               { padding: var(--s-16) 0 var(--s-12); overflow: hidden; }
  .hero__inner        { grid-template-columns: 1fr; gap: 0; }
  .hero__visual       { display: none; }
  .hero-float         { display: none; }
  .hero__mob-car      { display: block; }
  .hero__copy         { max-width: 600px; margin-inline: auto; text-align: center; }
  .hero__eyebrow      { justify-content: center; }
  .hero__lead         { margin-inline: auto; }
  .hero__cta          { justify-content: center; }
  .hero__stats        { justify-content: center; gap: var(--s-8); }

  .pillars-grid       { grid-template-columns: repeat(3,1fr); }
  .trust-strip__inner { grid-template-columns: repeat(2,1fr); }
  .footer-grid        { grid-template-columns: 1fr 1fr; gap: var(--s-8); }
}

/* ── Sidebar collapse (≤860px) ────────────────────────────────── */
@media (max-width: 860px) {
  .layout-grid, .archive-layout { grid-template-columns: 1fr; }
  .entry-guide,
  .entry-guide__intro { grid-template-columns: 1fr; }
  .entry-guide__list { grid-template-columns: 1fr; }
  .widget-area     { position: static; }
  .post-grid       { grid-template-columns: repeat(2,1fr); }
  .section-head--row { flex-direction: column; align-items: flex-start; gap: var(--s-2); }
}

/* ── Mobile (≤640px) ──────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Header: fixed on mobile so overflow-x:hidden on body doesn't break it */
  .site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
  }
  /* Compensate for fixed header height */
  .site-main { padding-top: var(--hdr-h); }

  /* Nav */
  .menu-toggle { display: flex; }

  /* Desktop nav hidden — mobile gets full-screen slide-in panel */
  .site-nav {
    position: fixed !important;
    inset: var(--hdr-h) 0 0 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: calc(100dvh - var(--hdr-h));
    background: #ffffff !important;
    padding: 1.5rem 1.25rem calc(2rem + env(safe-area-inset-bottom)) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    z-index: 99 !important;
    transform: translateX(100%);
    transition: transform 0.26s ease;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    pointer-events: none;
    visibility: hidden;
    box-shadow: none;
    contain: layout style; /* prevents this element contributing to document overflow */
  }
  .site-nav.is-open {
    transform: translateX(0) !important;
    pointer-events: auto !important;
    visibility: visible !important;
  }
  /* Reset ul/li for mobile column layout */
  .site-nav ul {
    flex-direction: column;
    width: 100%;
    gap: var(--s-2);
    align-items: stretch;
  }
  .site-nav li { width: 100%; }
  .site-nav a {
    font-size: var(--t-lg);
    font-weight: 700;
    padding: var(--s-4) var(--s-4);
    width: 100%;
    border-radius: var(--r-md);
    display: flex;
    color: var(--ink);
    background: transparent;
    min-height: 52px;
  }
  .site-nav a:hover { background: var(--off); color: var(--brand); }
  /* CTA button in mobile menu */
  .site-nav li:last-child a {
    background: var(--brand);
    color: #fff;
    border-radius: var(--r-pill);
    justify-content: center;
    margin-top: var(--s-3);
  }

  /* Hero */
  .hero    { padding: var(--s-12) 0 var(--s-10); }
  .hero h1 { font-size: clamp(1.9rem, 8vw, 2.6rem); }
  .hero__cta   { flex-direction: column; align-items: center; }
  .hero__stats { gap: var(--s-6); flex-wrap: wrap; justify-content: center; }

  /* Grids */
  .trust-strip__inner { grid-template-columns: 1fr 1fr; gap: var(--s-4); }
  .pillars-grid       { grid-template-columns: 1fr; }
  .post-grid          { grid-template-columns: 1fr; }
  .clusters-grid      { grid-template-columns: 1fr; }

  /* Footer — compact mobile layout */
  .footer-top         { padding: var(--s-8) 0 var(--s-6); }
  .archive-signal { gap: .65rem; }
  .archive-signal__item { width: 100%; justify-content: flex-start; }
  .footer-grid        { grid-template-columns: 1fr; gap: 0; }
  .footer-brand-col   { text-align: center; padding-bottom: var(--s-5); border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: var(--s-5); text-align: center; }
  .footer-brand-link  { justify-content: center; }
  .footer-social      { justify-content: center; }
  .footer-desc        { display: none; }
  .footer-cols-wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-3) var(--s-5);
  }
  .footer-col-title   { margin-bottom: var(--s-3); }
  .footer-col ul li   { margin-bottom: var(--s-2); }
  .footer-col ul li a { font-size: 0.85rem; }

  /* Bottom bar */
  .footer-bottom      { flex-direction: column; align-items: center; gap: var(--s-3); padding: var(--s-4) 0; text-align: center; }
  .footer-bottom nav ul { gap: var(--s-4); flex-wrap: wrap; justify-content: center; }

  /* Other */
  .error-404__cta     { flex-direction: column; }
}


/* [removed: dead single-article v7.8.2 system] */

/* ── Single article alignment pass v7.10.2 ───────────────────── */
.single-post {
  --article-main: 720px;
  --article-side: 280px;
  --article-gap: clamp(2rem, 4.5vw, 4rem);
  --article-shell: calc(var(--article-main) + var(--article-side) + var(--article-gap));
}
.single-post > .post-hero .container,
.single-post > .post-media-band .container,
.single-post > .post-body {
  width: min(calc(100% - 2.5rem), var(--article-shell));
  margin-inline: auto;
}
.single-post > .post-hero .container,
.single-post > .post-media-band .container {
  padding-inline: 0;
}
.post-hero__inner {
  max-width: var(--article-shell);
}
.post-hero__inner > .breadcrumbs,
.post-hero__inner > .post-kicker,
.post-hero__inner > .post-hero__title,
.post-hero__inner > .post-meta {
  max-width: var(--article-main);
}
.post-media {
  width: 100%;
}
.post-media:not(.post-media--split) {
  width: min(100%, var(--article-main));
  margin-inline: 0 auto;
}
.post-media--split {
  grid-template-columns: minmax(0, var(--article-main)) minmax(0, 1fr);
  gap: var(--article-gap);
}
.post-body {
  grid-template-columns: minmax(0, var(--article-main)) minmax(250px, 1fr);
  gap: var(--article-gap);
  align-items: start;
}
.post-content,
.single-entry .entry-content {
  width: 100%;
  max-width: none;
  margin: 0;
}
.post-toc {
  width: 100%;
}
.post-toc__inner {
  width: 100%;
}
@media (max-width: 1160px) {
  .single-post {
    --article-main: 680px;
    --article-side: 240px;
    --article-gap: clamp(1.5rem, 3vw, 2.75rem);
    --article-shell: calc(var(--article-main) + var(--article-side) + var(--article-gap));
  }
  .post-body {
    grid-template-columns: minmax(0, 1fr) minmax(220px, var(--article-side));
  }
  .post-media--split {
    grid-template-columns: minmax(0, 1fr) minmax(220px, var(--article-side));
  }
  .post-media:not(.post-media--split) {
    width: min(100%, var(--article-main));
  }
}
@media (max-width: 980px) {
  .single-post > .post-hero .container,
  .single-post > .post-media-band .container,
  .single-post > .post-body {
    width: min(calc(100% - 2rem), 760px);
  }
  .post-body,
  .post-media--split {
    grid-template-columns: 1fr;
    gap: var(--s-6);
  }
}
@media (max-width: 640px) {
  /* Force 32px side margins on all single post sections */
  .single-post > .post-hero .container,
  .single-post > .post-media-band .container,
  .single-post > .post-body,
  .single-post .container {
    width: min(calc(100% - 4rem), 760px) !important; /* 2rem = 32px each side */
    padding-inline: 0;
  }
}


/* ================================================================
   SINGLE ARTICLE SYSTEM v7.11.2
   Clean diagnostic structure with right-side sticky TOC
   ================================================================ */
.post-layout {
  display: grid;
  grid-template-columns: minmax(0, 720px) minmax(240px, 280px);
  gap: clamp(1.75rem, 1.2rem + 1.5vw, 3.5rem);
  align-items: start;
}
.post-layout.no-rail,
.post-layout:not(.has-rail) {
  grid-template-columns: minmax(0, 720px);
}
.post-main { min-width: 0; }
.post-rail--ghost { min-height: 1px; }

.post-hero {
  padding: clamp(2.75rem, 2.2rem + 1.4vw, 4.25rem) 0 clamp(2rem, 1.7rem + .9vw, 3rem);
}
.post-hero__inner,
.post-layout--hero {
  width: min(100%, 1080px);
  margin-inline: auto;
}
.post-layout--body {
  width: min(100%, 1080px);
  margin-inline: auto;
  padding-top: clamp(2rem, 1.5rem + 1.5vw, 3.5rem);
  padding-bottom: clamp(3rem, 2rem + 3vw, 6rem);
}
.post-main--hero {
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.post-hero__title {
  font-size: clamp(1.9rem, 2.4vw + 1rem, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
  margin: .75rem 0 .9rem;
  text-wrap: balance;
}
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem .6rem;
  margin-top: .35rem;
}
.post-meta > * {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-h);
  font-size: .78rem;
  color: var(--muted);
}
.post-meta__date { color: var(--muted); }

.breadcrumbs--editorial {
  margin: 0 0 .85rem;
  align-self: flex-start;
}
.breadcrumbs--editorial .breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  padding: 0;
  margin: 0;
  list-style: none;
}
.breadcrumbs--editorial .breadcrumbs__item {
  margin: 0;
  padding: 0;
}
.breadcrumbs--editorial .breadcrumbs__item::after {
  display: none !important;
}
.breadcrumbs--editorial a,
.breadcrumbs--editorial [aria-current="page"] {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: .38rem .75rem;
  border-radius: 999px;
  background: rgba(255,255,255,.8);
  border: 1px solid rgba(17,17,24,.08);
  box-shadow: 0 8px 24px rgba(17,17,24,.04);
  font-family: var(--font-h);
  font-size: .79rem;
  font-weight: 650;
  color: var(--muted);
  text-decoration: none;
}
.breadcrumbs--editorial a:hover {
  color: var(--ink);
  border-color: var(--section-line, var(--line));
}
.breadcrumbs--editorial .breadcrumbs__item:last-child [aria-current="page"] {
  color: var(--section-accent, var(--brand));
}

/* [removed: stale post-body nullifier v3] */
.post-main--article,
.post-content {
  max-width: 100%;
}
.post-content {
  font-size: clamp(1rem, .96rem + .18vw, 1.06rem);
  line-height: 1.84;
}
.post-content > *:first-child {
  margin-top: 0;
}

.article-media {
  margin: 0 0 clamp(1.4rem, 1.15rem + .7vw, 2rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
.article-media--split {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.article-media__panel {
  border: 1px solid rgba(17,17,24,.09);
  border-radius: 16px;
  background: var(--off-2);
  overflow: hidden;
}
.article-media__eyebrow {
  display: inline-flex;
  margin: 1rem 1rem .75rem;
  padding: .32rem .62rem;
  border-radius: 999px;
  background: var(--section-soft, var(--off));
  color: var(--section-accent, var(--brand));
  font-family: var(--font-h);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.article-media__frame {
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  background: var(--off-2);
}
.article-media__frame--video {
  aspect-ratio: 16 / 9;
}
.article-media__frame--video iframe,
.article-media__frame--video embed,
.article-media__frame--video object,
.article-media__frame--video video,
.article-media__frame--video .wp-video {
  width: 100%;
  height: 100%;
}
.article-media__image {
  display: block;
  width: 100%;
  max-height: 480px;
  object-fit: cover;
  object-position: center top;
}
.article-media__caption {
  margin: -.2rem 1rem 1rem;
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.6;
}

.article-intro {
  margin: 0 0 1.35rem;
}
.article-intro > *:last-child {
  margin-bottom: 0;
}
.article-intro p {
  font-size: clamp(1.08rem, 1.02rem + .28vw, 1.22rem);
  line-height: 1.84;
  color: var(--ink);
}

.article-section {
  margin: 0 0 2rem;
}
.article-section > *:last-child {
  margin-bottom: 0;
}
.article-section h2 {
  margin: 0 0 .95rem;
  padding-top: 0;
  border-top: 0;
  font-size: clamp(1.45rem, 1.25rem + .75vw, 1.95rem);
  line-height: 1.14;
  letter-spacing: -0.03em;
  scroll-margin-top: calc(var(--hdr-h) + 2rem);
}
.article-section h2::before {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  margin: 0 0 .85rem;
  border-radius: 999px;
  background: var(--section-accent, var(--brand));
}
.article-section h3 {
  margin-top: 1.4rem;
  padding-top: 0;
  border-top: 0;
  scroll-margin-top: calc(var(--hdr-h) + 2rem);
}
.article-section h3::before {
  display: none;
}
.article-section ul,
.article-section ol {
  margin: 0;
}

.article-section--answer {
  padding: 1.25rem 1.35rem;
  border: 1px solid var(--section-line, var(--line));
  border-radius: 24px;
  background: linear-gradient(180deg, #fff, var(--section-soft, var(--off)));
  box-shadow: 0 18px 40px rgba(17,17,24,.04);
}
.article-section--answer h2 {
  margin-bottom: .7rem;
}
.article-section--answer p {
  font-size: clamp(1.08rem, 1.03rem + .24vw, 1.18rem);
  line-height: 1.82;
  color: var(--ink);
}

.article-section--causes .wp-block-group,
.article-section--causes > ul,
.article-section--causes > ol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem;
  padding-left: 0;
  list-style: none;
}
.article-section--causes > ul li,
.article-section--causes > ol li {
  margin: 0;
  padding: 1rem 1rem 1.05rem;
  border: 1px solid rgba(17,17,24,.08);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 8px 26px rgba(17,17,24,.03);
}
.article-section--checks {
  padding: 1.15rem 1.25rem;
  border-radius: 24px;
  background: var(--white, #fff);
  border: 1px solid var(--section-line, rgba(17,17,24,.08));
}
.article-section--checks > ul,
.article-section--checks > ol {
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: .75rem;
}
.article-section--checks li {
  margin: 0;
  padding: .78rem 1rem .78rem 2.15rem;
  border-radius: 18px;
  background: var(--section-soft-2, var(--off));
  position: relative;
  line-height: 1.65;
}
.article-section--checks li::before {
  content: '';
  position: absolute;
  left: .95rem;
  /* Align to cap-height of FIRST line only, not centre of whole block.
     top = padding-top(.78rem) + half-of-line-height(1.65/2 = .825rem) - half-dot(4px)
     = 1.355rem ≈ 1.32rem (slightly tight is better than floating high) */
  top: 1.32rem;
  transform: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--section-accent, var(--brand));
}
.article-section--safety {
  padding: 1.2rem 1.25rem;
  border-radius: 24px;
  border: 1px solid var(--section-line, #f2d08f);
  background: linear-gradient(180deg, var(--section-soft-2, #fffaf0), var(--section-soft, #fff4d8));
}
.article-section--safety h2::before { background: var(--section-accent, #d97706); }
.article-section--urgent {
  padding: 1.15rem 1.25rem;
  border-radius: 24px;
  border: 1px solid #fecaca;
  background: linear-gradient(180deg, #fff7f7, #fff1f1);
}
.article-section--urgent h2::before { background: var(--section-accent, #dc2626); }
.article-section--urgent > ul,
.article-section--urgent > ol {
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: .7rem;
}
.article-section--urgent li {
  margin: 0;
  padding: .9rem 1rem;
  border-radius: 18px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(220,38,38,.12);
}
.article-section--cost {
  padding: 1.15rem 1.25rem;
  border-radius: 24px;
  background: var(--section-soft-2, var(--white, #fff));
  border: 1px solid var(--section-line, rgba(17,17,24,.08));
}
.article-section--cost table {
  margin: .25rem 0 0;
}
.article-section--related > ul,
.article-section--related > ol {
  padding-left: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
}
.article-section--related li {
  margin: 0;
}
.article-section--related li a,
.article-section--related > p a {
  display: flex;
  align-items: flex-start;
  min-height: 3.25rem;
  padding: .85rem 1rem;
  border: 1px solid rgba(17,17,24,.08);
  border-radius: 18px;
  background: #fff;
  text-decoration: none;
  color: var(--ink);
  line-height: 1.5;
}
.article-section--related li a:hover,
.article-section--related > p a:hover {
  border-color: var(--section-line, var(--line));
  background: var(--section-soft, var(--off));
}

.post-toc {
  position: sticky;
  top: calc(var(--hdr-h) + 1.25rem);
  align-self: start;
}
.post-toc__inner {
  background: var(--white);
  border: 1px solid var(--line-s);
  border-radius: 16px;
  padding: 1.1rem 1.1rem 1.1rem;
  max-height: calc(100dvh - var(--hdr-h) - 2rem);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line-s) transparent;
}
.post-toc__inner::-webkit-scrollbar { width: 3px; }
.post-toc__inner::-webkit-scrollbar-thumb { background: var(--line-s); border-radius: 3px; }
.post-toc__title {
  font-family: var(--font-h);
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .10em;
  color: var(--muted);
  margin: 0 0 .75rem;
  padding-bottom: .65rem;
  border-bottom: 1px solid var(--line);
}
.post-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.post-toc__item--h2 { padding-left: 0; }
.post-toc__item--h3 { padding-left: .9rem; }
.post-toc__link {
  display: block;
  font-family: var(--font-h);
  font-size: .83rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  padding: .38rem .5rem;
  border-radius: 8px;
  border-left: 2px solid transparent;
  line-height: 1.35;
  transition: all .15s ease;
}
.post-toc__link:hover {
  color: var(--ink);
  background: var(--off);
  border-left-color: var(--line-s);
}
.post-toc__link.is-active {
  color: var(--section-accent, var(--brand));
  border-left-color: var(--section-accent, var(--brand));
  background: var(--section-soft, var(--off));
  font-weight: 700;
}

/* ── TOC: Quick answer item — visually elevated ─────────────── */
/* Quick answer: bold only — no color/background/border
   so it never conflicts with the scroll-active highlight state */
.post-toc__link[href="#quick-answer"] {
  font-weight: 700;
  color: var(--ink);
}


@media (max-width: 1024px) {
  .post-layout,
  .post-layout.has-rail {
    grid-template-columns: minmax(0, 1fr) 250px;
  }
}

@media (max-width: 860px) {
  .post-layout,
  .post-layout.has-rail,
  .post-layout.no-rail {
    grid-template-columns: 1fr;
  }
  .post-layout--hero .post-rail--ghost {
    display: none;
  }
  .post-body {
    padding-top: 1.6rem;
  }
  .post-toc {
    position: static;
    order: -1;
    margin-bottom: 1.2rem;
  }
  .post-toc__inner {
    max-height: none;
  }
  .article-media--split,
  .article-section--causes > ul,
  .article-section--causes > ol,
  .article-section--related > ul,
  .article-section--related > ol {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {

  /* ── CONTAINER: wider side margins on mobile ─────────────────
     Default container uses 2.5rem (40px total). On mobile we want
     at least 20px each side = 1.25rem each, so 2.5rem total min.
     Increase to give breathing room.                            */
  .single-post > .post-hero .container,
  .single-post > .post-body {
    width: min(calc(100% - 4rem), 760px); /* 2rem each side = 32px */
  }

  /* ── HERO: centred layout ────────────────────────────────────*/
  .post-hero {
    padding: 2rem 0 1.5rem;
  }
  .post-main--hero {
    align-items: center;
    text-align: center;
  }
  .post-hero__illustration {
    display: none;
  }
  .post-hero__title {
    font-size: clamp(1.6rem, 7vw, 2rem);
    line-height: 1.1;
    margin: .5rem 0 .6rem;
  }
  .post-meta {
    justify-content: center;
  }

  /* ── BREADCRUMBS: centred ────────────────────────────────────*/
  .breadcrumbs--editorial {
    margin-bottom: .65rem;
    align-self: center;
  }
  .breadcrumbs--editorial .breadcrumbs__list {
    justify-content: center;
  }
  .breadcrumbs--editorial a,
  .breadcrumbs--editorial [aria-current="page"] {
    min-height: 1.7rem;
    padding: .26rem .52rem;
    font-size: .71rem;
  }

  /* ── TOC: larger on mobile ── */
  .post-toc {
    order: -1;
    margin-bottom: 1.25rem;
  }
  .post-toc__inner {
    background: var(--white);
    border: 1px solid var(--line-s);
    border-radius: 16px;
    padding: 1rem 1.1rem;
    box-shadow: none;
    max-height: none;
  }
  .post-toc__title {
    font-size: .72rem;
    letter-spacing: .09em;
    margin-bottom: .65rem;
    padding-bottom: .55rem;
  }
  .post-toc__list {
    flex-direction: column;
    gap: 2px;
  }
  .post-toc__item--h2 { padding-left: 0; }
  .post-toc__item--h3 { padding-left: .85rem; }
  .post-toc__link {
    font-size: .88rem;
    padding: .42rem .5rem;
    border-radius: 8px;
    border-left-width: 2px;
    line-height: 1.4;
  }

  /* ── BODY padding ────────────────────────────────────────────*/
  .post-layout--body {
    padding-top: 1.5rem;
    padding-bottom: 3.5rem;
  }

  /* ── CONTENT typography ──────────────────────────────────────*/
  .post-content {
    font-size: 1.03rem;
    line-height: 1.78;
  }
  .article-intro p {
    font-size: 1.06rem;
  }

  /* ── SECTION spacing ─────────────────────────────────────────*/
  .article-section {
    margin-bottom: 1.25rem;
  }
  .article-section h2 {
    font-size: 1.2rem;
    margin-bottom: .65rem;
  }
  .article-section h2::before {
    width: 28px;
    height: 2px;
    margin-bottom: .55rem;
  }

  /* ── SECTION CARDS ───────────────────────────────────────────*/
  .article-section--answer {
    padding: 1rem 1.1rem;
    border-radius: 16px;
  }
  .article-section--answer p {
    font-size: 1.04rem;
    line-height: 1.72;
  }
  .article-section--checks,
  .article-section--safety,
  .article-section--urgent,
  .article-section--cost {
    padding: .85rem .95rem;
    border-radius: 14px;
  }

  /* ── CAUSES: 1 column ────────────────────────────────────────*/
  .article-section--causes > ul,
  .article-section--causes > ol {
    grid-template-columns: 1fr;
    gap: .55rem;
  }
  .article-section--causes > ul li,
  .article-section--causes > ol li {
    padding: .8rem .95rem;
    border-radius: 12px;
    font-size: 1rem;
    line-height: 1.6;
  }

  /* ── CHECKS list ─────────────────────────────────────────────*/
  .article-section--checks > ul,
  .article-section--checks > ol { gap: .5rem; }
  .article-section--checks li {
    padding: .65rem .85rem .65rem 1.9rem;
    border-radius: 12px;
    font-size: .92rem;
    line-height: 1.55;
  }
  .article-section--checks li::before {
    left: .75rem;
    /* top = padding-top(.65) + half-line-height(.5*1.55*font) - half-dot
       .65rem + .5*(1.55*.92rem) - .25rem ≈ .65 + .713 - .25 = 1.11rem */
    top: 1.11rem;
  }

  /* ── URGENT list ─────────────────────────────────────────────*/
  .article-section--urgent li {
    padding: .65rem .85rem;
    border-radius: 12px;
  }

  /* ── RELATED grid ────────────────────────────────────────────*/
  .article-section--related > ul,
  .article-section--related > ol {
    grid-template-columns: 1fr;
    gap: .5rem;
  }
  .article-section--related li a {
    min-height: 2.6rem;
    padding: .65rem .85rem;
    border-radius: 12px;
  }

  /* ── MEDIA / featured image ──────────────────────────────────*/
  .article-media { margin-bottom: 1.25rem; }
  .article-media__panel { border-radius: 12px; }
  .article-media__image { max-height: 200px; }

  /* ── POST FOOTER ─────────────────────────────────────────────*/
  .post-related {
    padding: .9rem 1rem;
    border-radius: 14px;
    margin-top: 1.5rem;
  }
  .post-related__links a {
    font-size: .8rem;
    padding: .4rem .75rem;
  }
  .post-footer {
    margin-top: 1.25rem;
    padding-top: 1.1rem;
    padding-bottom: 3rem;
  }
}


/* v7.11.4 live fixes: visible hero + robust symptom parsing */
.post-hero .post-main--hero,
.post-hero .post-main--hero * {
  visibility: visible;
  opacity: 1;
}
.post-hero .post-main--hero {
  position: relative;
  z-index: 4;
}
.post-hero .post-kicker,
.post-hero .post-meta,
.post-hero .post-hero__title,
.post-hero .breadcrumbs--editorial {
  color: var(--ink);
}
.post-hero .post-meta__cat {
  color: var(--section-accent, var(--brand));
}
.article-media__caption { display:none !important; }
.article-media__eyebrow { display:none !important; }

/* ── Post hero kicker pill (no icon) ─────────────────────────── */
.post-kicker {
  display: inline-flex;
  align-items: center;
  padding: .38rem .88rem;
  border-radius: 999px;
  background: rgba(255,255,255,.85);
  border: 1px solid var(--section-line, var(--line));
  color: var(--section-accent, var(--brand));
  font-family: var(--font-h);
  font-size: .70rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  margin: 0 0 .65rem;
  align-self: flex-start;
}


/* ── Article SVG illustration (via [thefixcar_svg] shortcode) ── */
.article-svg-wrap {
  margin: 0 0 clamp(1.2rem, 1rem + 1vw, 2rem);
  border-radius: 20px;
  overflow: hidden;
  background: var(--off);
  border: 1px solid var(--line-s);
}
.article-svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 400px;
}
@media (max-width: 640px) {
  .article-svg {
    max-height: 56vw;
  }
  .article-svg-wrap {
    border-radius: 14px;
  }
}

/* ── Step by step — numbered sequential list ────────────────── */
.article-section--steps {
  padding: 1.15rem 1.25rem;
  border-radius: 24px;
  background: var(--white, #fff);
  border: 1px solid var(--section-line, rgba(17,17,24,.08));
}
.article-section--steps > ol {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: step-counter;
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
.article-section--steps > ol li {
  counter-increment: step-counter;
  display: block;
  position: relative;
  padding: .95rem 1.1rem .95rem calc(1.1rem + 28px + 1rem);
  background: var(--white);
  border: 1px solid var(--section-line, rgba(17,17,24,.07));
  border-radius: 18px;
  box-shadow: 0 4px 14px rgba(17,17,24,.03);
  margin: 0;
  line-height: 1.65;
}
.article-section--steps > ol li::before {
  content: counter(step-counter);
  position: absolute;
  left: 1.1rem;
  top: .95rem;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--section-accent, var(--brand));
  color: #fff;
  font-family: var(--font-h);
  font-size: .78rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Connector line between steps */
.article-section--steps > ol li + li {
  position: relative;
}

@media (max-width: 640px) {
  .article-section--steps > ol li {
    padding: .8rem .9rem .8rem calc(.9rem + 24px + .8rem);
    border-radius: 14px;
    font-size: .93rem;
  }
  .article-section--steps > ol li::before {
    left: .9rem;
    top: .8rem;
    width: 24px;
    height: 24px;
    font-size: .72rem;
  }
}

/* ── Specs: data table section ──────────────────────────────── */
.article-section--specs-table table,
.article-section--make-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
  border: 1px solid var(--section-line, var(--line-s));
  border-radius: 16px;
  overflow: hidden;
  margin: 0;
}
.article-section--specs-table th,
.article-section--make-table th {
  background: var(--section-soft, var(--off));
  font-family: var(--font-h);
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  padding: .65rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--section-line, var(--line-s));
}
.article-section--specs-table td,
.article-section--make-table td {
  padding: .65rem 1rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  line-height: 1.5;
}
.article-section--specs-table tr:last-child td,
.article-section--make-table tr:last-child td { border-bottom: none; }
.article-section--specs-table tr:nth-child(even) td,
.article-section--make-table tr:nth-child(even) td {
  background: rgba(17,17,24,.018);
}
/* First column = label */
.article-section--specs-table td:first-child,
.article-section--make-table td:first-child {
  font-family: var(--font-h);
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
/* Value column — accent color for key data */
.article-section--specs-table td:nth-child(2) strong,
.article-section--make-table td:nth-child(2) strong {
  color: var(--section-accent, var(--brand));
}

/* Make/model table — first col is brand */
.article-section--make-table td:first-child {
  color: var(--section-accent, var(--brand));
}

@media (max-width: 640px) {
  .article-section--specs-table table,
  .article-section--make-table table {
    font-size: .84rem;
    border-radius: 12px;
  }
  .article-section--specs-table th,
  .article-section--make-table th { padding: .5rem .75rem; font-size: .64rem; }
  .article-section--specs-table td,
  .article-section--make-table td { padding: .55rem .75rem; }
  /* Stack on very narrow screens */
  .article-section--make-table td:first-child { white-space: normal; }
}

/* ── Calculator page layout ──────────────────────────────────── */
.calc-page {
  min-height: calc(100vh - var(--hdr-h) - 180px);
  padding: clamp(2rem, 3vw, 4rem) 0 clamp(5rem, 7vw, 8rem);
  background: var(--off, #faf9f7);
}

/* Extra breathing room above footer on calculator pages */
.calc-page .tfc,
.calc-page .tfq {
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

/* ── Calculators index hero ──────────────────────────────────── */
.calc-index-hero {
  background: linear-gradient(180deg, var(--off, #faf9f7) 0%, var(--white, #fff) 100%);
  border-bottom: 1px solid var(--line, #e5e4e0);
  padding: clamp(2rem, 3vw, 3.5rem) 0 clamp(1.5rem, 2vw, 2.5rem);
}
.calc-index-hero__inner { max-width: 640px; }
.calc-index-hero h1 {
  font-size: clamp(2rem, 4vw + .5rem, 3.2rem);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1.05;
  margin: .6rem 0 .8rem;
}
.calc-index-hero__lead {
  font-size: clamp(.95rem, 1vw + .5rem, 1.08rem);
  color: var(--muted, #6b7280);
  line-height: 1.75;
  margin: 0;
  max-width: 52ch;
}
.calc-index-extra {
  max-width: 860px;
  margin: 3rem auto 0;
  padding-top: 2.5rem;
  border-top: 1px solid var(--line, #e5e4e0);
}
.calc-index-body {
  padding-top: 2.5rem;
  padding-bottom: 4rem;
}

/* ── Blog section theme — editorial, warm slate ─────────────── */
.section-theme--blog,
.archive-hero--blog,
.single-entry--blog {
  --section-accent:  #0f172a;
  --section-soft:    #f8fafc;
  --section-soft-2:  #f1f5f9;
  --section-line:    #cbd5e1;
  --section-glow:    rgba(15,23,42,.08);
}

/* ── Blog post typography ────────────────────────────────────── */
.blog-content {
  font-size: clamp(1rem, .96rem + .2vw, 1.08rem);
  line-height: 1.85;
  color: var(--ink-2);
}
.blog-content > p {
  margin: 0 0 1.45rem;
}
.blog-content > p:first-of-type {
  font-size: clamp(1.06rem, 1rem + .3vw, 1.16rem);
  color: var(--ink);
}

/* ── Blog headings ────────────────────────────────────────────── */
.blog-content h2 {
  font-size: clamp(1.3rem, 1.15rem + .55vw, 1.7rem);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.2;
  color: var(--ink);
  margin: 2.5rem 0 .85rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}
.blog-content h2:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.blog-content h3 {
  font-size: clamp(1.1rem, 1rem + .35vw, 1.3rem);
  font-weight: 700;
  color: var(--ink);
  margin: 1.75rem 0 .65rem;
}

/* ── Blog blockquote — pull quote style ──────────────────────── */
.blog-content blockquote {
  margin: 1.75rem 0;
  padding: 1.1rem 1.35rem;
  border-left: 3px solid var(--section-accent, var(--ink));
  background: var(--section-soft, var(--off));
  border-radius: 0 14px 14px 0;
  font-style: normal;
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1.7;
}
.blog-content blockquote p { margin: 0; }

/* ── Blog ul — clean with custom markers ─────────────────────── */
.blog-content ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.blog-content ul li {
  padding: .65rem .9rem .65rem 2rem;
  position: relative;
  background: var(--section-soft-2, var(--off));
  border-radius: 10px;
  border: 1px solid var(--section-line, var(--line-s));
  line-height: 1.6;
}
.blog-content ul li::before {
  content: '';
  position: absolute;
  left: .8rem;
  top: 1.05rem;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--section-accent, var(--brand));
}

/* ── Blog ol — numbered editorial list ───────────────────────── */
.blog-content ol {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  counter-reset: blog-counter;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.blog-content ol li {
  counter-increment: blog-counter;
  padding: .7rem .9rem .7rem 2.75rem;
  position: relative;
  background: var(--white);
  border-radius: 12px;
  border: 1px solid var(--section-line, var(--line-s));
  line-height: 1.6;
}
.blog-content ol li::before {
  content: counter(blog-counter);
  position: absolute;
  left: .7rem;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--section-accent, var(--ink));
  color: #fff;
  font-family: var(--font-h);
  font-size: .7rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Blog strong / em ────────────────────────────────────────── */
.blog-content strong { color: var(--ink); font-weight: 700; }
.blog-content em     { color: var(--muted); font-style: italic; }

/* ── Blog table ──────────────────────────────────────────────── */
.blog-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
  margin: 0 0 1.5rem;
  border: 1px solid var(--line-s);
  border-radius: 14px;
  overflow: hidden;
}
.blog-content th {
  background: var(--section-soft, var(--off-2));
  font-family: var(--font-h);
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  padding: .6rem .9rem;
  text-align: left;
  border-bottom: 1px solid var(--line-s);
}
.blog-content td {
  padding: .6rem .9rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.blog-content tr:last-child td { border-bottom: none; }
.blog-content tr:nth-child(even) { background: rgba(17,17,24,.02); }

/* ── Blog hr ──────────────────────────────────────────────────── */
.blog-content hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 2rem 0;
}

/* ── Blog featured image ─────────────────────────────────────── */
.blog-hero-image {
  margin: 0 0 clamp(1.5rem, 1.2rem + 1vw, 2.5rem);
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--line-s);
}
.blog-hero-image img {
  display: block;
  width: 100%;
  height: auto;       /* natural height — no crop */
  max-width: 100%;
}

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .blog-content ul li,
  .blog-content ol li {
    padding-left: 2.25rem;
    font-size: .95rem;
    border-radius: 10px;
  }
  .blog-content ul li::before { top: .92rem; }
  .blog-content h2 { margin-top: 2rem; padding-top: 1.5rem; }
}

/* ── Pillar card: CTA label ──────────────────────────────────── */
a.pillar-card { text-decoration: none; cursor: pointer; display: flex; flex-direction: column; }
a.pillar-card:hover { transform: translateY(-3px); }
a.pillar-card:hover .pillar-card__cta { opacity: 1; }
.pillar-card__cta {
  margin-top: auto;
  padding-top: 1rem;
  font-family: var(--font-h);
  font-size: .82rem;
  font-weight: 700;
  color: var(--brand);
  opacity: .7;
  transition: opacity .18s;
}

/* ── Home: Calculators feature section ───────────────────────── */
.fp-calc-section { background: var(--white); }
.fp-calc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1.15rem;
}
.fp-calc-card {
  display: flex;
  flex-direction: column;
  border: 1.5px solid var(--line-s);
  border-radius: 22px;
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  background: var(--white);
  transition: transform .18s, box-shadow .18s, border-color .18s;
  box-shadow: 0 2px 8px rgba(15,23,42,.05);
}
.fp-calc-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(15,23,42,.09);
  border-color: var(--cc, var(--brand));
}
.fp-calc-card__top {
  position: relative;
  padding: 1.5rem 1.35rem 1.25rem;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.fp-calc-card__top::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: var(--cc, var(--brand));
}
.fp-calc-card__icon { font-size: 2.2rem; line-height: 1; }
.fp-calc-card__badge {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: .28rem .7rem;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.82);
  white-space: nowrap;
}
.fp-calc-card__body { flex: 1; padding: 1.15rem 1.35rem .9rem; }
.fp-calc-card__title {
  font-family: var(--font-h);
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.25;
  margin-bottom: .5rem;
  color: var(--ink);
}
.fp-calc-card__desc {
  font-size: .87rem;
  line-height: 1.65;
  color: var(--muted);
  margin-bottom: .85rem;
}
.fp-calc-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  padding: 0; margin: 0;
  list-style: none;
}
.fp-calc-card__tags li {
  font-size: .7rem;
  font-weight: 700;
  padding: .22rem .6rem;
  border-radius: 999px;
  background: var(--off);
  color: var(--muted);
}
.fp-calc-card__cta {
  padding: .8rem 1.35rem;
  border-top: 1px solid var(--line);
  font-family: var(--font-h);
  font-size: .84rem;
  font-weight: 700;
  color: var(--cc, var(--brand));
  transition: padding-left .15s;
}
.fp-calc-card:hover .fp-calc-card__cta { padding-left: 1.6rem; }

@media (max-width: 600px) {
  .fp-calc-grid { grid-template-columns: 1fr; }
}

/* ── Single post: related + footer ────────────────────────────── */
.post-related {
  margin-top: 2.5rem;
  padding: 1.25rem 1.35rem;
  background: var(--off);
  border: 1px solid var(--line-s);
  border-radius: 24px;
}
.post-related__title {
  font-family: var(--font-h);
  font-size: .70rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--muted);
  margin: 0 0 .9rem;
}
.post-related__links {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.post-related__links a {
  display: inline-flex;
  align-items: center;
  padding: .55rem 1rem;
  background: var(--white);
  border: 1px solid var(--line-s);
  border-radius: 999px;
  font-family: var(--font-h);
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink-2);
  text-decoration: none;
  transition: all var(--tr);
}
.post-related__links a:hover {
  border-color: var(--section-accent, var(--brand));
  color: var(--section-accent, var(--brand));
}

.post-footer {
  margin-top: 2rem;
  padding-top: 1.5rem;
  padding-bottom: clamp(2rem, 1.5rem + 2vw, 4rem);
  border-top: 1px solid var(--line);
}
.post-footer__more {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .72rem 1.4rem;
  border: 1.5px solid var(--section-line, var(--line-s));
  border-radius: 999px;
  font-family: var(--font-h);
  font-size: .88rem;
  font-weight: 700;
  color: var(--section-accent, var(--brand));
  text-decoration: none;
  transition: all var(--tr);
}
.post-footer__more:hover {
  background: var(--section-soft, var(--off));
  border-color: var(--section-accent, var(--brand));
}

@media (max-width: 640px) {
  .post-related__links { flex-direction: column; }
  .post-related__links a { justify-content: center; }
}


/* Archive hub cleanup v7.12.5 */
.archive-layout--hub {
  display: block;
  padding: var(--s-10) 0 var(--s-20);
}
.archive-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr);
  gap: var(--s-5);
  align-items: end;
  margin: 0 0 var(--s-8);
  padding: var(--s-5) var(--s-6);
  border: 1px solid rgba(17,17,24,.07);
  border-radius: calc(var(--r-xl) - 2px);
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,247,244,.78));
  box-shadow: 0 20px 48px rgba(17,17,24,.04);
}
.archive-toolbar__meta {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.archive-toolbar__label,
.archive-toolbar__count,
.archive-toolbar__suffix {
  font-family: var(--font-h);
}
.archive-toolbar__label {
  display: inline-flex;
  min-height: 2.35rem;
  align-items: center;
  padding: .45rem .85rem;
  border-radius: var(--r-pill);
  background: var(--section-soft, var(--off));
  color: var(--section-accent, var(--brand));
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 800;
}
.archive-toolbar__count {
  font-size: clamp(1.4rem, 1.1rem + .5vw, 1.85rem);
  line-height: 1;
  color: var(--ink);
}
.archive-toolbar__suffix {
  font-size: .92rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .09em;
}
.archive-toolbar__text {
  margin: 0;
  max-width: 34rem;
  justify-self: end;
  text-align: right;
  color: var(--muted);
}
.post-grid--hub {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-6);
}
.post-grid--hub .card-article {
  min-height: 100%;
}
.post-grid--hub .card-article__thumb {
  aspect-ratio: 16 / 9;
}
.post-grid--hub .card-article__body {
  padding: clamp(1.1rem, .95rem + .25vw, 1.35rem);
}
.post-grid--hub .card-article__title {
  font-size: clamp(1.18rem, 1.05rem + .35vw, 1.42rem);
}
.post-grid--hub .card-article__exc {
  font-size: 1rem;
  line-height: 1.72;
}
@media (min-width: 1280px) {
  .post-grid--hub {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 860px) {
  .archive-toolbar {
    grid-template-columns: 1fr;
  }
  .archive-toolbar__text {
    justify-self: start;
    text-align: left;
  }
}
@media (max-width: 640px) {
  .archive-layout--hub {
    padding-top: var(--s-8);
  }
  .archive-toolbar {
    padding: var(--s-4);
  }
  .post-grid--hub {
    grid-template-columns: 1fr;
    gap: var(--s-5);
  }
}


/* ── Cookie controls ─────────────────────────────────────────── */
.footer-cookie-btn {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}
.footer-cookie-btn:hover { color: var(--brand); }


.footer-cookie-link{
  appearance:none;
  -webkit-appearance:none;
  background:none;
  border:none;
  padding:0;
  margin:0;
  color:inherit;
  font:inherit;
  cursor:pointer;
}
.footer-cookie-link:hover{color:var(--brand)}


/* ── Post sources block ────────────────────────────────────────── */
.post-sources {
  margin-top: var(--s-10);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
}
.post-sources__heading {
  font-family: var(--font-h);
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0 0 var(--s-3);
}
.post-sources__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.post-sources__item a {
  font-size: var(--t-sm);
  color: var(--muted);
  border-bottom: 1px solid transparent;
  transition: color var(--tr), border-color var(--tr);
}
.post-sources__item a:hover {
  color: var(--brand);
  border-bottom-color: rgba(232,68,26,0.25);
}