/* ==========================================================================
   KnowMotors, "Instrument / Spec-sheet" design system.
   Cool concrete paper, near-black ink, hard 2px borders, one signal orange.
   Saira Condensed display, IBM Plex Sans body, IBM Plex Mono for all data.
   Motorsport-telemetry authority: borders over shadows, cockpit bands,
   dashboard readouts, mono numbers, numbered channels. No pills, no lift,
   no gradient blobs.
   ========================================================================== */
:root {
    /* Ink ramp */
    --ink: #0B0E14;
    --ink-2: #3A404C;
    --ink-3: #6A7180;
    --ink-soft: #3A404C;   /* legacy alias */
    --ink-faint: #6A7180;  /* legacy alias */

    /* Surfaces */
    --paper: #ECEEF1;      /* cool concrete page */
    --surface: #FFFFFF;
    --surface-2: #F4F6F8;
    --cockpit: #0B0E14;    /* dark header/footer band */
    --cockpit-2: #141A24;

    /* Legacy surface aliases (kept so nothing breaks) */
    --cream: #ECEEF1;
    --cream-2: #F4F6F8;
    --paper-edge: #F4F6F8;
    --white: #FFFFFF;
    --graphite: #0B0E14;
    --graphite-2: #141A24;

    /* Lines + borders */
    --line: rgba(11,14,20,.14);
    --line-strong: rgba(11,14,20,.30);
    --border: #0B0E14;     /* hard structural border */

    /* Signal accent (the one brand color) */
    --accent: #FF4A17;
    --accent-press: #E23A0C;
    --accent-dark: #E23A0C; /* legacy alias */
    --accent-soft: #FF7A52; /* lighter orange on dark surfaces */
    --accent-dust: #FCE6DE;
    --on-accent: #0B0E14;

    --ok: #1F8A4C;
    --warning: #C1121F;
    --warning-bg: #FBE9EA;

    /* Powertrain (semantic, matches data/taxonomy.php, do not rebrand) */
    --pt-electric: #1F8A4C;
    --pt-phev: #2E9E8F;
    --pt-hybrid: #3FB0A0;
    --pt-gas: #6B7280;
    --pt-diesel: #C99700;

    --r: 2px;              /* hard technical radius */
    --radius: 2px;         /* legacy alias */
    --radius-sm: 2px;      /* legacy alias */
    --shadow: 0 12px 30px -22px rgba(11,14,20,.55); /* single restrained token */
    --shadow-sm: none;
    --maxw: 1200px;
    --measure: 66ch;
    --w-read: 920px;       /* legacy alias, superseded by --content */
    --w-wide: 1080px;      /* legacy alias, superseded by --content */
    --content: 720px;      /* THE single article-column width owner (centered); ~66-70ch reading */
    --space-sec: 5rem;     /* section vertical rhythm */
    --band: #E2E5EA;       /* recessed concrete band, darker than paper */

    --font-display: 'Saira Condensed', sans-serif;
    --font-body: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    --font-mono: 'IBM Plex Mono', 'SFMono-Regular', ui-monospace, monospace;
    /* legacy aliases */
    --font-head: 'Saira Condensed', sans-serif;

    /* Type scale */
    --fs-xs: .72rem;
    --fs-sm: .85rem;
    --fs-base: 1.02rem;
    --fs-md: 1.18rem;
    --fs-lg: 1.42rem;
    --fs-xl: 1.85rem;
    --fs-2xl: 1.9rem;
    --fs-3xl: clamp(2.6rem, 6vw, 4.6rem);
    --lh-tight: .98;
    --lh-snug: 1.12;
    --lh-body: 1.6;         /* tuned down for the 19px base so lines do not float apart */
    --tracking-caps: .14em;
}

*, *::before, *::after { box-sizing: border-box; }
/* Base 19px: 1rem = 19px, so body and the whole rem-based type + spacing scale follow. */
html { font-size: 118.75%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--ink);
    background-color: var(--paper);
    background-image:
        linear-gradient(rgba(11,14,20,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(11,14,20,.025) 1px, transparent 1px);
    background-size: 34px 34px;
    background-position: -1px -1px;
    line-height: var(--lh-body);
    font-size: var(--fs-base);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-press); text-decoration: underline; text-underline-offset: 2px; }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    color: var(--ink);
    font-weight: 700;
    line-height: var(--lh-snug);
    letter-spacing: -.005em;
    text-wrap: balance;
    margin: 0 0 .6rem;
}
h1 { font-size: var(--fs-3xl); font-weight: 700; line-height: var(--lh-tight); text-transform: uppercase; letter-spacing: -.01em; }
h2 { font-size: var(--fs-2xl); font-weight: 600; text-transform: uppercase; }
h3 { font-size: var(--fs-lg); font-weight: 600; }
h4 { font-size: var(--fs-md); font-weight: 600; }
p { margin: 0 0 1rem; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 1.75rem; }
.skip-link { position: absolute; left: -999px; }
.skip-link:focus { left: 1rem; top: 1rem; background: var(--ink); color: #fff; padding: .6rem 1rem; z-index: 100; border: 2px solid var(--accent); font-family: var(--font-mono); }
/* Emphasis system: bold (<strong>) for key terms, highlight (<mark class="highlight">)
   for the single decision-driving takeaway. See AGENTS.md section 2. */
strong { font-weight: 600; color: inherit; }
mark { background: transparent; color: inherit; }
.highlight { background: linear-gradient(transparent 58%, rgba(255,74,23,.32) 58%); font-weight: 600; color: inherit; padding: 0 .05em; border-radius: 1px; }

/* Visible focus */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Mono kicker / eyebrow with a short orange rule */
.eyebrow {
    display: inline-flex; align-items: center; gap: .55rem;
    font-family: var(--font-mono);
    font-size: var(--fs-xs); font-weight: 600;
    letter-spacing: var(--tracking-caps); text-transform: uppercase;
    color: var(--accent); margin-bottom: 1rem;
}
.eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--accent); }

/* ======================= Cockpit masthead ======================= */
.site-header {
    background: var(--cockpit); color: rgba(255,255,255,.86);
    border-bottom: 2px solid var(--accent);
    position: sticky; top: 0; z-index: 50;
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 74px; gap: 1.5rem; }
.site-logo { display: inline-flex; align-items: center; }
.site-logo img { height: 40px; width: auto; }
.site-logo:hover { text-decoration: none; }
.logo-text {
    font-family: var(--font-display); font-weight: 700; font-size: 1.55rem;
    text-transform: uppercase; letter-spacing: .01em; color: #fff; line-height: 1;
}
.logo-accent { color: var(--accent); position: relative; padding: 0 .12em; }
.logo-accent::before { content: "/"; color: var(--accent); margin-right: .04em; font-weight: 600; }
.logo-mark { display: none; }

.site-nav { display: flex; align-items: center; gap: 1.5rem; }
.nav-link {
    color: rgba(255,255,255,.78); font-family: var(--font-mono);
    font-size: .78rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
    background: none; border: 0; padding: .4rem 0; cursor: pointer; position: relative;
    display: inline-flex; align-items: center; gap: .35rem;
}
.nav-link::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px; background: var(--accent); transition: right .2s ease; }
.nav-link:hover, .nav-link.active { color: #fff; text-decoration: none; }
.nav-link:hover::after, .nav-link.active::after { right: 0; }
.caret { font-size: .7rem; opacity: .6; }
.nav-dropdown { position: relative; }
.nav-dropdown-menu {
    position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(6px);
    min-width: 256px; background: var(--cockpit-2); border: 1px solid rgba(255,255,255,.14);
    box-shadow: var(--shadow); padding: .4rem; opacity: 0; visibility: hidden; transition: .16s ease; z-index: 60;
    border-top: 2px solid var(--accent);
}
.nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown.open .nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.dropdown-item { display: flex; flex-direction: column; padding: .55rem .7rem; color: rgba(255,255,255,.86); border-bottom: 1px solid rgba(255,255,255,.08); }
.dropdown-item:last-child { border-bottom: 0; }
.dropdown-item:hover { background: rgba(255,255,255,.06); text-decoration: none; color: #fff; }
.dropdown-item strong { font-weight: 600; font-family: var(--font-body); font-size: .96rem; }
.dropdown-item small { color: rgba(255,255,255,.55); font-size: var(--fs-xs); font-family: var(--font-mono); text-transform: none; letter-spacing: 0; margin-top: .15rem; }
.nav-toggle { display: none; background: none; border: 0; color: #fff; font-size: 1.7rem; cursor: pointer; }
.nav-cta {
    color: var(--on-accent); background: var(--accent); border: 2px solid var(--accent);
    padding: .5rem 1rem; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase; border-radius: var(--r);
}
.nav-cta:hover { background: var(--accent-press); border-color: var(--accent-press); color: var(--on-accent); text-decoration: none; }

/* ======================= Buttons ======================= */
.btn {
    display: inline-flex; align-items: center; gap: .5rem;
    background: var(--accent); color: var(--on-accent);
    padding: .72rem 1.35rem; border-radius: var(--r);
    font-family: var(--font-mono); font-weight: 600; font-size: var(--fs-sm);
    letter-spacing: .06em; text-transform: uppercase; border: 2px solid var(--accent);
    cursor: pointer; transition: background .16s ease, border-color .16s ease;
}
.btn:hover { background: var(--accent-press); border-color: var(--accent-press); color: var(--on-accent); text-decoration: none; }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

/* Read-more link with orange arrow */
.section-link {
    display: inline-flex; align-items: center; gap: .45rem;
    font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
    white-space: nowrap; padding-bottom: 2px; border-bottom: 2px solid transparent;
}
.section-link:hover { text-decoration: none; border-bottom-color: var(--accent); color: var(--ink); }
.section-link i { color: var(--accent); transition: transform .18s ease; }
.section-link:hover i { transform: translateX(3px); }

/* ======================= Powertrain chip ======================= */
.powertrain-chip {
    display: inline-flex; align-items: center; gap: .4rem; position: relative;
    font-family: var(--font-mono); font-weight: 600; font-size: var(--fs-xs);
    letter-spacing: .06em; text-transform: uppercase; color: var(--ink);
    background: color-mix(in srgb, var(--_c, var(--pt-gas)) 10%, #fff);
    border: 1px solid var(--line); border-left: 3px solid var(--_c, var(--pt-gas));
    border-radius: var(--r); padding: .2rem .55rem; line-height: 1.35;
}
.powertrain-chip i { font-size: .95rem; color: var(--_c, var(--pt-gas)); }
.pt-electric { --_c: var(--pt-electric); }
.pt-phev { --_c: var(--pt-phev); }
.pt-hybrid { --_c: var(--pt-hybrid); }
.pt-gas { --_c: var(--pt-gas); }
.pt-diesel { --_c: var(--pt-diesel); }
.section-dark .powertrain-chip, .spotlight .powertrain-chip {
    background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2);
    border-left-color: var(--_c, var(--pt-gas)); color: #fff;
}
.section-dark .powertrain-chip i, .spotlight .powertrain-chip i { color: #fff; }

/* ======================= Body-type badge ======================= */
.bodytype-badge {
    display: inline-flex; align-items: center; gap: .4rem;
    font-family: var(--font-mono); font-weight: 600; font-size: var(--fs-xs);
    letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2);
    background: var(--surface); border: 1px solid var(--ink-2);
    border-radius: var(--r); padding: .2rem .55rem; line-height: 1.35;
}
.bodytype-badge i { font-size: .95rem; color: var(--ink-3); }
.section-dark .bodytype-badge, .spotlight .bodytype-badge { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.35); color: #fff; }
.section-dark .bodytype-badge i, .spotlight .bodytype-badge i { color: rgba(255,255,255,.8); }

/* ======================= Spec banner (instrument strip) ======================= */
.spec-banner {
    display: flex; flex-wrap: wrap; align-items: stretch; gap: 0;
    margin: 1.4rem 0; background: var(--surface);
    border: 1.5px solid var(--ink); border-radius: var(--r);
    overflow: hidden;
}
.spec-banner .sb-tags { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; padding: 1rem 1.2rem; border-right: 1px solid var(--line); }
.spec-banner .sb-spec { display: flex; flex-direction: column; justify-content: center; gap: .1rem; padding: 1rem 1.3rem; border-left: 1px solid var(--line); }
.spec-banner .sb-spec b { font-family: var(--font-mono); font-weight: 600; font-size: 1.15rem; color: var(--ink); line-height: 1.05; letter-spacing: -.01em; }
.spec-banner .sb-spec span { font-family: var(--font-mono); font-size: .64rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3); }
@media (max-width: 620px) { .spec-banner { flex-direction: column; } .spec-banner .sb-tags { border-right: 0; border-bottom: 1px solid var(--line); } .spec-banner .sb-spec { border-left: 0; border-bottom: 1px solid var(--line); } }

/* ======================= Key facts (spec readout) ======================= */
.key-facts { border: 1.5px solid var(--ink); border-radius: var(--r); background: var(--surface); padding: 0; margin: 1.8rem 0; max-width: 640px; }
.key-facts h2 {
    font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600;
    text-transform: uppercase; letter-spacing: var(--tracking-caps); color: #fff;
    margin: 0; padding: .7rem 1.3rem; background: var(--cockpit); border-bottom: 2px solid var(--accent);
}
.key-facts dl { display: grid; grid-template-columns: 11rem 1fr; gap: 0; margin: 0; padding: .4rem 1.3rem 1rem; }
.key-facts dt { font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); padding: .55rem 0; border-top: 1px solid var(--line); }
.key-facts dd { margin: 0; font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--ink); padding: .55rem 0; border-top: 1px solid var(--line); }
.key-facts dl > dt:first-of-type, .key-facts dl > dt:first-of-type + dd { border-top: 0; }
@media (max-width: 560px) { .key-facts dl { grid-template-columns: 1fr; } .key-facts dd { padding-top: 0; border-top: 0; padding-bottom: .7rem; } }

/* ======================= Sections ======================= */
.section { padding: var(--space-sec) 0; border-top: 1px solid var(--line); }
.section:first-of-type { border-top: 0; }
.section--lg { padding: 6.5rem 0; }
.section-alt { background: var(--band); border-top: 1px solid var(--line-strong); }
.section-dark { background: var(--cockpit); color: rgba(255,255,255,.8); border-top: 2px solid var(--accent); }
.section-dark h2, .section-dark h3, .section-dark h4 { color: #fff; }
.section-dark .eyebrow { color: var(--accent-soft); }
.section-dark .eyebrow::before { background: var(--accent-soft); }

.section-head { max-width: 42rem; margin: 0 auto 3rem; text-align: center; counter-increment: sec; }
.section-head .eyebrow { justify-content: center; }
.section-head h2 { margin: 0 0 .7rem; position: relative; padding-bottom: .9rem; }
.section-head h2::before { content: counter(sec, decimal-leading-zero) " /"; font-family: var(--font-mono); font-size: .62em; font-weight: 600; color: var(--accent); margin-right: .5em; vertical-align: middle; }
.section-head h2::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%) skewX(-12deg); width: 64px; height: 3px; background: var(--accent); }
.section-head p { color: var(--ink-2); font-size: var(--fs-md); margin: 0; }
.section-head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 2.6rem; padding-bottom: 1.2rem; border-bottom: 1.5px solid var(--ink); flex-wrap: wrap; counter-increment: sec; }
.section-head--row .sh-text { max-width: 48rem; }
.section-head--row h2 { margin: 0 0 .5rem; position: relative; padding-bottom: .7rem; }
.section-head--row h2::before { content: counter(sec, decimal-leading-zero) " /"; font-family: var(--font-mono); font-size: .6em; font-weight: 600; color: var(--accent); margin-right: .5em; vertical-align: middle; }
.section-head--row h2::after { content: ""; position: absolute; left: 0; bottom: 0; transform: skewX(-12deg); width: 56px; height: 3px; background: var(--accent); }
.section-head--row p { color: var(--ink-2); margin: 0; }
body { counter-reset: sec; }

/* ======================= Cards ======================= */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.6rem; }
.card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.card-grid > .card:only-child { max-width: 380px; }   /* a lone card stays card-sized, never balloons full-width */
@media (max-width: 900px) { .card-grid.cols-3, .card-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .card-grid, .card-grid.cols-2, .card-grid.cols-3, .card-grid.cols-4 { grid-template-columns: 1fr; } }

.card { display: flex; flex-direction: column; background: var(--surface); border: 1.5px solid var(--ink); border-radius: var(--r); transition: border-color .16s ease; }
.card:hover { text-decoration: none; border-color: var(--accent); }
.card-media { aspect-ratio: 16/10; overflow: hidden; background: var(--surface-2); border-bottom: 1.5px solid var(--ink); display: flex; align-items: center; justify-content: center; color: var(--ink-3); font-size: 2.4rem; position: relative; }
.card-media::after { content: ""; position: absolute; inset: 8px; border: 1px solid var(--line); pointer-events: none; }
.card-media.has-img::after { display: none; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.card:hover .card-media img { transform: scale(1.04); }
.card-body { display: flex; flex-direction: column; gap: .45rem; padding: 1rem 1.15rem 1.15rem; }
.card h3 { margin: 0; font-size: 1.18rem; font-weight: 600; transition: color .15s ease; }
.card:hover h3 { color: var(--accent); }
.card .card-sci { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .04em; color: var(--ink-3); text-transform: uppercase; }
.card p { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.55; }
.card .card-meta { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .3rem; }
.card-arrow { display: none; }
.chip { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }

/* ======================= Breadcrumb ======================= */
.breadcrumb { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding: 1.6rem 0 0; display: flex; gap: .55rem; flex-wrap: wrap; }
/* Breadcrumb shares the content column width so its right edge lines up with the article. */
.container:has(> .article-col) > .breadcrumb { max-width: var(--content); margin: 0 auto; }
.breadcrumb a { color: var(--ink-2); }
.breadcrumb a:hover { color: var(--accent); text-decoration: none; }
.breadcrumb .sep { color: var(--accent); }

/* ======================= Article / profile ======================= */
/* THE single content-column owner for every article/content page (see AGENTS.md section 6).
   The column owns the width and is centered; children fill it, so text, tables, and media can
   never diverge. Do not reintroduce a second width or a left-aligned (margin: 0) wrapper. */
.article-col { max-width: var(--content); margin-inline: auto; padding: 1.5rem 0 4.5rem; }
.article-col > * { max-width: none; }
.article-col .prose, .article-col .article-body p, .article-col .article-body ul,
.article-col .article-body ol { max-width: var(--measure); }
.article-header h1 { margin-bottom: .5rem; position: relative; padding-bottom: 1rem; }
.article-header h1::after { content: ""; position: absolute; left: 0; bottom: 0; transform: skewX(-12deg); width: 64px; height: 3px; background: var(--accent); }
.article-sci { font-family: var(--font-mono); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin-bottom: 1.4rem; }
.article-body { counter-reset: h2c; }
.article-body > h2 { margin: 2.8rem 0 1rem; padding-bottom: .5rem; border-bottom: 1.5px solid var(--ink); }
.article-body > h2::before { counter-increment: h2c; content: counter(h2c, decimal-leading-zero) " /"; font-family: var(--font-mono); font-size: .58em; font-weight: 600; color: var(--accent); margin-right: .55em; vertical-align: middle; }
.article-body h3 { margin: 1.8rem 0 .5rem; }
.article-body ul, .article-body ol { padding-left: 1.3rem; }
.article-body li { margin-bottom: .45rem; }
.prose { max-width: var(--measure); }
.prose p { margin-bottom: 1.15rem; }
/* Prose bullet lists (from paragraphs(): "- item" lines) with a spec-sheet dash marker */
.prose ul { list-style: none; padding-left: 0; margin: 0 0 1.3rem; }
.prose ul li { position: relative; padding-left: 1.5rem; margin-bottom: .55rem; color: var(--ink-2); }
.prose ul li::before { content: ""; position: absolute; left: 0; top: .62em; width: 9px; height: 2px; background: var(--accent); }
.prose ul li strong { color: var(--ink); }
.lead, .prose > p:first-child { font-size: 1.16rem; color: var(--ink); }
.profile-hero, .article-hero { margin: 0 0 1.6rem; border: 1.5px solid var(--ink); border-radius: var(--r); overflow: hidden; background: var(--surface); }
.profile-hero { aspect-ratio: 16/9; }
.profile-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.article-hero img { width: 100%; aspect-ratio: 16/9; height: auto; object-fit: cover; display: block; }
.article-hero figcaption { margin: 0; padding: .75rem 1rem; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: var(--fs-xs); line-height: 1.5; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }

/* ID / spec feature grid */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.2rem; margin: 1.4rem 0; }
.feature-grid > .feature-card:only-child { max-width: 320px; }   /* lone feature card stays sized, not full-width */
.feature-card { border: 1.5px solid var(--ink); border-radius: var(--r); border-top: 3px solid var(--accent); padding: .9rem 1rem; background: var(--surface); }
.feature-card .fc-label { display: flex; align-items: center; gap: .4rem; font-family: var(--font-mono); font-weight: 600; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--accent); margin-bottom: .35rem; }
.feature-card p { margin: 0; font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--ink); }

/* Pros / cons */
.proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1.5px solid var(--ink); border-radius: var(--r); margin: 1.6rem 0; overflow: hidden; }
.proscons > div { padding: 1.4rem 1.6rem; }
.proscons > div:first-child { border-right: 1px solid var(--line); }
.proscons h3 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .6rem; font-size: 1.15rem; }
.proscons .pc-pros h3 i { color: var(--ok); }
.proscons .pc-cons h3 i { color: var(--warning); }
.proscons ul { list-style: none; padding: 0; margin: 0; }
.proscons li { position: relative; padding: .4rem 0 .4rem 1.5rem; font-size: var(--fs-sm); color: var(--ink-2); }
.proscons .pc-pros li::before { content: "\2713"; color: var(--ok); position: absolute; left: 0; font-weight: 700; }
.proscons .pc-cons li::before { content: "\2715"; color: var(--warning); position: absolute; left: 0; font-weight: 700; }
@media (max-width: 620px) { .proscons { grid-template-columns: 1fr; } .proscons > div:first-child { border-right: 0; border-bottom: 1px solid var(--line); } }

/* Author / reviewer */
.author-box { display: flex; gap: 1rem; align-items: flex-start; border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); padding: 1.2rem 0; margin: 2rem 0; }
.author-avatar { width: 50px; height: 50px; border-radius: var(--r); background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; flex-shrink: 0; }
.author-box .ab-name { font-weight: 600; }
.author-box .ab-cred { font-size: var(--fs-sm); color: var(--ink-2); font-family: var(--font-mono); line-height: 1.5; }
/* Reviewer line is inline text, NOT a flex container: a flex box splits the icon,
   "Reviewed by", the name, and the credentials into separate items that each wrap
   independently (the jagged multi-column bug). Keep it flowing as one sentence. */
.reviewer-badge { color: var(--ok); font-weight: 600; }
.reviewer-badge i { color: var(--ok); margin-right: .3rem; vertical-align: -0.08em; }

/* FAQ */
.faq { margin: 2.4rem 0; }
.faq h2 { border-bottom: 2px solid var(--ink); padding-bottom: .5rem; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: 1rem 0; font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; text-transform: uppercase; letter-spacing: -.005em; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "\002B"; color: var(--accent); font-family: var(--font-mono); font-size: 1.4rem; }
.faq details[open] summary::after { content: "\2212"; }
.faq .faq-answer { padding: 0 0 1.1rem; color: var(--ink-2); font-size: var(--fs-sm); }

/* Cross-link panel */
.cross-links { border-top: 2px solid var(--ink); padding-top: 1.4rem; margin: 2.6rem 0; }
.cross-links h2 { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--ink-3); margin: 0 0 1rem; }
/* Two even columns so links never leave a floating empty track; a lone trailing
   (odd) item spans full width instead of half-floating. Uniform row height keeps the
   bottom rules aligned even when one link wraps. */
.link-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.5rem; }
.link-grid a { display: flex; align-items: center; gap: .6rem; min-height: 2.9rem; padding: .7rem 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); color: var(--ink); }
.link-grid a:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 520px) { .link-grid { grid-template-columns: 1fr; } }
.link-grid a:hover { color: var(--accent); text-decoration: none; }
.link-grid i { color: var(--accent); }

/* Comparison table */
.compare-table { width: 100%; max-width: var(--measure); border-collapse: collapse; margin: 1.8rem 0; border: 1.5px solid var(--ink); border-radius: var(--r); overflow: hidden; }
.compare-table th, .compare-table td { padding: .75rem 1rem; text-align: left; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); vertical-align: top; }
.compare-table thead th { background: var(--cockpit); color: #fff; font-family: var(--font-display); font-weight: 600; text-transform: uppercase; border-bottom: 2px solid var(--accent); }
.compare-table th:not(:first-child), .compare-table td:not(:first-child) { font-family: var(--font-mono); }
.compare-table tbody tr:nth-child(even) td { background: var(--surface-2); }
.compare-table td:first-child { font-family: var(--font-mono); font-weight: 600; color: var(--ink-3); text-transform: uppercase; font-size: var(--fs-xs); letter-spacing: .06em; }
.compare-table td:not(:first-child) .powertrain-chip, .compare-table td:not(:first-child) .bodytype-badge { display: inline-flex; }
.compare-header { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: center; margin: 1.4rem 0; max-width: var(--measure); }
.compare-col { text-align: center; }
.compare-vs { display: inline-flex; flex-direction: column; align-items: center; gap: .2rem; font-family: var(--font-mono); font-weight: 600; color: var(--accent); font-size: 1rem; }
.compare-vs i { font-size: 1.3rem; }

/* Recipe / how-to layout */
.recipe-meta { display: flex; gap: 0; flex-wrap: wrap; border: 1.5px solid var(--ink); border-radius: var(--r); margin: 1.4rem 0; overflow: hidden; }
.recipe-meta .rm { padding: 1rem 1.4rem; border-left: 1px solid var(--line); flex: 1 1 auto; }
.recipe-meta .rm:first-child { border-left: 0; }
.recipe-meta .rm b { display: block; font-family: var(--font-mono); font-weight: 600; font-size: 1.3rem; color: var(--ink); }
.recipe-meta .rm span { font-family: var(--font-mono); font-size: .64rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: .12em; }
.recipe-cols { display: grid; grid-template-columns: 1fr 1.7fr; gap: 3rem; margin: 1.8rem 0; }
@media (max-width: 720px) { .recipe-cols { grid-template-columns: 1fr; gap: 1.5rem; } }
.steps-col { min-width: 0; }
.ingredients { border-top: 3px solid var(--accent); padding-top: 1rem; }
.ingredients h2 { margin-top: 0; font-size: var(--fs-lg); }
.ingredients ul { list-style: none; padding: 0; margin: 0 0 1.6rem; }
.ingredients li { padding: .5rem 0; border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: var(--fs-sm); }
.steps { counter-reset: step; list-style: none; padding: 0; }
.steps li { position: relative; padding-left: 3rem; margin-bottom: 1.4rem; }
.steps li::before { counter-increment: step; content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: -2px; font-family: var(--font-mono); font-size: 1.1rem; font-weight: 600; color: var(--accent); border: 1.5px solid var(--accent); border-radius: var(--r); width: 2.1rem; height: 2.1rem; display: flex; align-items: center; justify-content: center; }
.steps li strong { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: -.005em; display: block; margin-bottom: .1rem; }
.recipe-meta-row { display: flex; gap: 1rem; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; margin-top: .3rem; flex-wrap: wrap; }
.recipe-meta-row span { display: inline-flex; align-items: center; gap: .3rem; }
.recipe-meta-row i { color: var(--accent); }

/* Ranked roundup list */
.rank-list { list-style: none; padding: 0; margin: 2rem 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.rank-item { display: grid; grid-template-columns: 3.4rem 200px 1fr; gap: 1.4rem; align-items: start; padding: 1.6rem 0; border-bottom: 1px solid var(--line); }
.rank-item .rank-num { font-family: var(--font-display); font-size: 2.8rem; font-weight: 700; color: var(--ink); line-height: .9; }
.rank-item .rank-num::before { content: "#"; font-family: var(--font-mono); font-size: .9rem; color: var(--accent); vertical-align: super; margin-right: .1rem; }
.rank-item .rank-media { aspect-ratio: 16/10; border: 1.5px solid var(--ink); border-radius: var(--r); overflow: hidden; background: var(--surface-2); display: flex; align-items: center; justify-content: center; color: var(--ink-3); font-size: 2rem; }
.rank-item .rank-media img { width: 100%; height: 100%; object-fit: cover; }
.rank-item h3 { margin: 0 0 .3rem; }
.rank-item .rank-meta { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: .3rem 0 .6rem; }
.rank-item p { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); }
@media (max-width: 680px) { .rank-item { grid-template-columns: 2.6rem 1fr; } .rank-item .rank-media { display: none; } }

/* ======================= Hub heroes ======================= */
.hub-hero { background: var(--surface-2); border-bottom: 1.5px solid var(--ink); padding: 3.2rem 0 2.8rem; }
.hub-hero h1 { margin: 0 0 .6rem; }
.hub-hero .lead { font-size: var(--fs-md); color: var(--ink-2); max-width: var(--measure); margin: 0; }
/* Photo hero variant (cockpit band with a category banner behind a dark scrim) */
.hub-hero.has-hero { position: relative; background: var(--cockpit); border-bottom: 2px solid var(--accent); color: #fff; overflow: hidden; padding: 4rem 0 3.4rem; }
.hub-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; z-index: 0; }
.hub-hero.has-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(11,14,20,.94), rgba(11,14,20,.48)); }
.hub-hero.has-hero > .container { position: relative; z-index: 2; }
.hub-hero.has-hero h1 { color: #fff; }
.hub-hero.has-hero .lead { color: rgba(255,255,255,.82); }
.hub-hero.has-hero .eyebrow { color: var(--accent-soft); }
.hub-hero.has-hero .breadcrumb, .hub-hero.has-hero .breadcrumb a { color: rgba(255,255,255,.75); }
.hub-hero.has-hero .breadcrumb .sep { color: var(--accent-soft); }
.hub-hero.has-hero .bodytype-badge, .hub-hero.has-hero .powertrain-chip { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.28); color: #fff; }

.hub-filter { position: sticky; top: 74px; z-index: 20; background: rgba(236,238,241,.94); backdrop-filter: blur(6px); padding: .9rem 0; border-bottom: 1px solid var(--line); margin-bottom: 2.5rem; }
.hub-filter .container { display: flex; gap: 1.2rem; flex-wrap: wrap; align-items: center; }
.hub-filter .hf-label { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); }

.hub-search { position: relative; max-width: 460px; margin-bottom: 2.5rem; border: 1.5px solid var(--ink); border-radius: var(--r); background: var(--surface); }
.hub-search i { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--ink-3); font-size: 1.1rem; }
.hub-search input { width: 100%; padding: .7rem .8rem .7rem 2.4rem; border: 0; background: none; font-size: 1rem; font-family: var(--font-mono); color: var(--ink); }
.hub-search input:focus { outline: none; }
.hub-search:focus-within { border-color: var(--accent); }
.hub-search input::placeholder { color: var(--ink-3); }

/* Grouped tier header */
.tier-head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; padding-bottom: .8rem; margin: 0 0 1.6rem; border-bottom: 2px solid var(--ink); }
.tier-head h2 { margin: 0; font-size: var(--fs-xl); }
.tier-head .th-count { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.tier-head .th-desc { flex-basis: 100%; margin: .2rem 0 0; font-size: var(--fs-sm); color: var(--ink-2); font-family: var(--font-body); font-weight: 400; }

.tier-block { padding: 0 0 2.4rem; margin-bottom: 2.4rem; border-bottom: 1px solid var(--line); }
.tier-block .tb-head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: .3rem; padding-left: 1rem; border-left: 4px solid var(--_c, var(--accent)); }
.tier-block .tb-head h2 { margin: 0; font-size: var(--fs-xl); }
.tier-block .tb-count { margin-left: auto; color: var(--ink-3); font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; }
.tier-block .tb-desc { color: var(--ink-2); font-size: var(--fs-sm); margin: 0 0 1.3rem; padding-left: 1rem; }

/* ======================= Simple pages ======================= */
.page-body { max-width: 780px; margin: 0 auto; padding: 2.5rem 0 4rem; }
.page-body h1 { margin-bottom: 1.2rem; }
.page-body h2 { margin: 2rem 0 .8rem; }
.callout { border-left: 3px solid var(--accent); background: var(--surface-2); border-top: 1px solid var(--line); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1rem 1.3rem; margin: 1.4rem 0; }
.callout.warn { border-left-color: var(--warning); background: var(--warning-bg); }
.notfound { text-align: center; padding: 5rem 0; }
.notfound i { font-size: 3rem; color: var(--accent); }

/* External source link */
.ext-link { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--ink); border-bottom: 1px solid var(--line); }
.ext-link i { color: var(--accent); }
.ext-link:hover { color: var(--accent); border-bottom-color: var(--accent); text-decoration: none; }

/* ==========================================================================
   Article block library. Embedded in DB prose via ":::name" fences and
   emitted by Template::renderBlock(). Canonical tokens only: hard borders,
   2px radius, mono labels, one signal orange. No pills, shadows, or inline
   styles. Catalogue + syntax: article-production/references/component-contract.md.
   ========================================================================== */

/* Callout family: base .callout above; variants set the left rule + label color */
.callout-label { display: flex; align-items: center; gap: .45rem; margin: 0 0 .5rem; font-family: var(--font-mono); font-weight: 600; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--accent); }
.callout-label i { font-size: 1rem; }
.callout-body p { margin-bottom: .7rem; }
.callout-body > :last-child { margin-bottom: 0; }
.callout-tip { border-left-color: var(--ok); }
.callout-tip .callout-label { color: var(--ok); }
.callout-note { border-left-color: var(--ink-3); }
.callout-note .callout-label { color: var(--ink-3); }
.callout-warning { border-left-color: var(--warning); background: var(--warning-bg); }
.callout-warning .callout-label { color: var(--warning); }
.callout-verdict { border-left-color: var(--accent); background: var(--accent-dust); }
.callout-verdict .callout-label { color: var(--accent-press); }

/* Editorial pull-quote */
.pullquote { margin: 2rem 0; padding-left: 1.4rem; border-left: 3px solid var(--accent); }
.pullquote blockquote { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; line-height: 1.22; color: var(--ink); }
.pullquote figcaption { margin-top: .7rem; font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--ink-3); }

/* TL;DR / at-a-glance box */
.tldr { border: 1.5px solid var(--ink); border-top: 3px solid var(--accent); border-radius: var(--r); background: var(--surface); padding: 1.2rem 1.4rem; margin: 1.6rem 0; }
.tldr-label { margin: 0 0 .6rem; font-family: var(--font-mono); font-weight: 600; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--accent); }
.tldr ul { list-style: none; padding: 0; margin: 0; }
.tldr li { position: relative; padding-left: 1.5rem; margin-bottom: .5rem; font-size: var(--fs-sm); color: var(--ink-2); }
.tldr li:last-child { margin-bottom: 0; }
.tldr li::before { content: ""; position: absolute; left: 0; top: .55em; width: 9px; height: 2px; background: var(--accent); }

/* Instrument stat tiles (gap-hairline grid) */
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1px; margin: 1.6rem 0; border: 1.5px solid var(--ink); border-radius: var(--r); background: var(--line-strong); overflow: hidden; }
.stat-tiles:has(> .stat-tile:only-child) { max-width: 260px; }   /* a single stat tile does not stretch the whole row */
.stat-tile { background: var(--surface); padding: 1rem 1.1rem; }
.st-value { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.8rem; line-height: 1; color: var(--ink); }
.st-label { display: block; margin-top: .35rem; font-family: var(--font-mono); font-size: .64rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); }

/* Segmented score gauge */
.score-gauge { border: 1.5px solid var(--ink); border-radius: var(--r); background: var(--surface); padding: .2rem 1.1rem; margin: 1.6rem 0; }
.score-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.score-row:last-child { border-bottom: 0; }
.sc-label { font-family: var(--font-mono); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); }
.sc-track { display: inline-flex; gap: 3px; }
.sc-track .seg { width: 12px; height: 14px; background: var(--band); border: 1px solid var(--line-strong); border-radius: 1px; }
.sc-track .seg.on { background: var(--accent); border-color: var(--accent-press); }
.sc-num { font-family: var(--font-mono); font-weight: 600; font-size: var(--fs-sm); color: var(--ink); min-width: 3.4ch; text-align: right; }
.sc-num small { color: var(--ink-3); font-weight: 400; }
@media (max-width: 520px) { .sc-track .seg { width: 9px; } }

/* Key-value spec strip */
.kv-list { border: 1.5px solid var(--ink); border-radius: var(--r); background: var(--surface); padding: .3rem 1.2rem; margin: 1.6rem 0; }
.kv-label { margin: .8rem 0 .2rem; font-family: var(--font-mono); font-weight: 600; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--accent); }
.kv-list dl { margin: 0; }
.kv-row { display: grid; grid-template-columns: 40% 1fr; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--line); }
.kv-row:last-child { border-bottom: 0; }
.kv-row dt { margin: 0; font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.kv-row dd { margin: 0; font-size: var(--fs-sm); color: var(--ink); }
@media (max-width: 480px) { .kv-row { grid-template-columns: 1fr; gap: .1rem; } }

/* Generic in-prose data table (values left-aligned; scrolls on mobile) */
.data-table-wrap { margin: 1.6rem 0; overflow-x: auto; border: 1.5px solid var(--ink); border-radius: var(--r); }
.data-table { width: 100%; border-collapse: collapse; }
.data-table caption { text-align: left; font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--ink-3); padding: .7rem 1rem; border-bottom: 1px solid var(--line); }
.data-table th, .data-table td { padding: .65rem 1rem; text-align: left; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); vertical-align: top; }
.data-table thead th { background: var(--cockpit); color: #fff; font-family: var(--font-mono); font-weight: 600; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:nth-child(even) td { background: var(--surface-2); }
.data-table td:first-child { font-weight: 600; color: var(--ink); }

/* Model-year / recall timeline */
.timeline { list-style: none; margin: 1.8rem 0; padding: 0; border-left: 2px solid var(--line-strong); }
.tl-item { position: relative; padding: 0 0 1.2rem 1.4rem; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before { content: ""; position: absolute; left: -5px; top: .3em; width: 8px; height: 8px; background: var(--accent); border-radius: var(--r); }
.tl-time { display: block; font-family: var(--font-mono); font-weight: 600; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }
.tl-event { display: block; margin-top: .15rem; font-size: var(--fs-sm); color: var(--ink-2); }

/* In-content editorial image */
.article-image { margin: 2rem 0; border: 1.5px solid var(--ink); border-radius: var(--r); background: var(--surface); overflow: hidden; }
.article-image img { display: block; width: 100%; height: auto; }
.article-image figcaption { margin: 0; padding: .75rem 1rem; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: var(--fs-xs); line-height: 1.5; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }

/* Buyer decision box */
.decision { border: 1.5px solid var(--ink); border-top: 3px solid var(--accent); border-radius: var(--r); background: var(--surface); padding: 1.3rem 1.5rem; margin: 1.8rem 0; }
.decision-label { display: flex; align-items: center; gap: .5rem; margin: 0 0 .9rem; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; text-transform: uppercase; letter-spacing: -.005em; color: var(--ink); }
.decision-label i { color: var(--accent); font-size: 1.2rem; }
.dec-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.dec-h { margin: 0 0 .4rem; font-family: var(--font-mono); font-weight: 600; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.dec-buy .dec-h { color: var(--ok); }
.dec-skip .dec-h { color: var(--warning); }
.decision ul { list-style: none; padding: 0; margin: 0; }
.decision li { position: relative; padding: .3rem 0 .3rem 1.5rem; font-size: var(--fs-sm); color: var(--ink-2); }
.dec-buy li::before { content: "\2713"; position: absolute; left: 0; color: var(--ok); font-weight: 700; }
.dec-skip li::before { content: "\2715"; position: absolute; left: 0; color: var(--warning); font-weight: 700; }
@media (max-width: 560px) { .dec-cols { grid-template-columns: 1fr; gap: 1rem; } }

/* Inline call-to-action button */
.cta-inline { margin: 1.6rem 0; }
.cta-inline-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.2rem; background: var(--accent); color: var(--on-accent); border: 1.5px solid var(--accent-press); border-radius: var(--r); font-family: var(--font-mono); font-weight: 600; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .04em; }
.cta-inline-btn:hover { background: var(--accent-press); color: var(--on-accent); text-decoration: none; }

/* ======================= Cockpit footer ======================= */
.site-footer { background: var(--cockpit); color: rgba(255,255,255,.72); border-top: 2px solid var(--accent); margin-top: 4rem; padding: 3rem 0 2rem; }
.site-footer a { color: rgba(255,255,255,.78); }
.site-footer a:hover { color: #fff; }
.advice-banner { display: flex; gap: .9rem; align-items: flex-start; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.14); border-left: 3px solid var(--accent); border-radius: var(--r); padding: 1rem 1.2rem; margin-bottom: 1.6rem; }
.advice-banner i { color: var(--accent-soft); font-size: 1.3rem; }
.advice-banner p { margin: 0; font-size: var(--fs-sm); color: rgba(255,255,255,.82); }
.trust-bar { display: flex; gap: 2rem; flex-wrap: wrap; justify-content: center; padding: 1.1rem 0; margin-bottom: 2rem; border-top: 1px solid rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.14); font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; }
.trust-bar span { display: inline-flex; align-items: center; gap: .5rem; }
.trust-bar i { color: var(--accent-soft); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 3rem 2.2rem; margin-bottom: 2.5rem; align-items: start; }
.footer-brand .logo-text { color: #fff; }
.footer-brand .logo-accent { color: var(--accent); }
.footer-brand p { font-size: var(--fs-sm); max-width: 34ch; margin-top: .7rem; color: rgba(255,255,255,.7); }
.footer-logo { display: inline-flex; align-items: center; }
.footer-col h4 { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: var(--tracking-caps); font-size: var(--fs-xs); font-weight: 600; color: var(--accent-soft); margin: 0 0 1rem; }
.footer-col a { display: block; padding: .3rem 0; font-size: var(--fs-sm); }
.footer-legal { border-top: 1px solid rgba(255,255,255,.14); padding-top: 1.3rem; font-family: var(--font-mono); font-size: var(--fs-xs); color: rgba(255,255,255,.55); letter-spacing: .03em; }
.footer-legal a { color: rgba(255,255,255,.72); }
.footer-legal i { color: var(--accent-soft); }
.footer-legal p { margin: .25rem 0; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }

/* ======================= Homepage hero ======================= */
.hero { background: var(--paper); border-bottom: 1.5px solid var(--ink); padding: var(--space-sec) 0; }
.hero .container { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3.5rem; align-items: center; }
@media (max-width: 880px) { .hero .container { grid-template-columns: 1fr; gap: 2rem; } }
.hero-text { min-width: 0; }
.hero h1 { color: var(--ink); font-size: var(--fs-3xl); max-width: 14ch; margin-bottom: 1.2rem; position: relative; padding-bottom: 1.1rem; }
.hero h1::after { content: ""; position: absolute; left: 0; bottom: 0; transform: skewX(-12deg); width: 72px; height: 3px; background: var(--accent); }
.hero p { color: var(--ink-2); font-size: var(--fs-md); max-width: 46ch; }
.hero .hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.8rem; }
.hero-visual { position: relative; aspect-ratio: 4/5; border: 1.5px solid var(--ink); border-radius: var(--r); overflow: hidden; background: var(--surface-2); }
.hero-visual img { width: 100%; height: 100%; object-fit: cover; }

/* Instrument cluster */
.hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 2.4rem; border: 1.5px solid var(--ink); border-radius: var(--r); overflow: hidden; background: var(--surface); }
.hero-stats .stat { padding: 1rem 1.1rem; border-left: 1px solid var(--line); }
.hero-stats .stat:first-child { border-left: 0; }
.hero-stats .stat b { display: block; font-family: var(--font-mono); font-weight: 600; font-size: 1.75rem; color: var(--ink); line-height: 1; letter-spacing: -.02em; }
.hero-stats .stat span { font-family: var(--font-mono); font-size: .62rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: .1em; }
@media (max-width: 560px) { .hero-stats { grid-template-columns: repeat(2, 1fr); } .hero-stats .stat:nth-child(3) { border-left: 0; } .hero-stats .stat:nth-child(n+3) { border-top: 1px solid var(--line); } }
.hero-trust { display: flex; gap: 1.8rem; flex-wrap: wrap; margin-top: 1.8rem; padding-top: 1.5rem; border-top: 1.5px solid var(--ink); }
.hero-trust .ht { display: flex; align-items: flex-start; gap: .65rem; flex: 1 1 13rem; }
.hero-trust .ht i { color: var(--accent); font-size: 1.4rem; line-height: 1; margin-top: .1rem; }
.hero-trust .ht b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; line-height: 1.1; text-transform: uppercase; letter-spacing: -.005em; }
.hero-trust .ht span { font-size: var(--fs-xs); color: var(--ink-2); }
.hero-legend { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.4rem 1.2rem 1rem; background: linear-gradient(transparent, rgba(11,14,20,.92)); color: #fff; }
.hero-legend .hl-title { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: rgba(255,255,255,.75); margin-bottom: .55rem; }
.hero-legend .hl-scale { display: flex; gap: 3px; margin-bottom: .7rem; }
.hero-legend .hl-seg { flex: 1; height: 7px; border-radius: 0; }
.hero-legend .hl-keys { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.hero-legend .hl-key { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500; letter-spacing: .03em; }
.hero-legend .hl-key i { font-size: 1rem; }
@media (max-width: 880px) { .hero-legend { position: static; background: var(--cockpit); } }

/* ======================= Intent grid ======================= */
.intent-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1.5px solid var(--ink); border-radius: var(--r); overflow: hidden; }
@media (max-width: 860px) { .intent-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .intent-grid { grid-template-columns: 1fr; } }
.intent-card { display: flex; flex-direction: column; gap: .5rem; padding: 1.8rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background .15s ease; }
.intent-card:hover { background: var(--surface-2); text-decoration: none; }
.intent-card .ic-icon { color: var(--accent); font-size: 1.7rem; }
.intent-card h3 { margin: .2rem 0 0; }
.intent-card p { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); flex: 1; }
.intent-card .ic-link { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); display: inline-flex; align-items: center; gap: .4rem; }
.intent-card .ic-link i { transition: transform .18s ease; }
.intent-card:hover .ic-link i { transform: translateX(3px); }

/* ======================= Body-type ladder ======================= */
.ladder { display: grid; grid-template-columns: repeat(8, 1fr); gap: 0; border: 1.5px solid var(--ink); border-radius: var(--r); overflow: hidden; }
@media (max-width: 860px) { .ladder { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 480px) { .ladder { grid-template-columns: repeat(2, 1fr); } }
.ladder-item { display: flex; flex-direction: column; gap: .3rem; padding: 1.3rem 1.1rem; border-right: 1px solid var(--line); border-top: 3px solid var(--_c, var(--accent)); transition: background .15s ease; }
.ladder-item:last-child { border-right: 0; }
.ladder-item:hover { background: var(--surface-2); text-decoration: none; }
.ladder-item .l-ico { color: var(--_c, var(--accent)); font-size: 1.4rem; }
.ladder-item .l-name { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; text-transform: uppercase; letter-spacing: -.005em; color: var(--ink); }
.ladder-item .l-count { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }

/* ======================= Spotlight ======================= */
.spotlight-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.5rem; }
@media (max-width: 860px) { .spotlight-grid { grid-template-columns: 1fr; } }
.spotlight { position: relative; overflow: hidden; min-height: 440px; display: flex; border: 1.5px solid var(--ink); border-radius: var(--r); background: var(--cockpit-2); transition: border-color .16s ease; }
.spotlight:hover { border-color: var(--accent); }
.spotlight img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.spotlight:hover img { transform: scale(1.04); }
.spotlight::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(11,14,20,.94) 6%, rgba(11,14,20,.35) 55%, transparent 100%); }
.spotlight .sp-body { position: relative; z-index: 2; margin-top: auto; padding: 2.2rem; color: #fff; }
.spotlight .sp-body h3 { color: #fff; font-size: clamp(1.7rem, 3vw, 2.6rem); text-transform: uppercase; margin: .5rem 0; }
.spotlight .sp-tag { display: inline-block; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--accent-soft); }
.spotlight .sp-body p { color: rgba(255,255,255,.85); max-width: 44ch; font-size: var(--fs-sm); }
.spotlight--sm { min-height: 208px; }
.spotlight--sm .sp-body { padding: 1.5rem; }
.spotlight--sm .sp-body h3 { font-size: 1.5rem; }
.spotlight-side { display: grid; grid-template-rows: 1fr 1fr; gap: 1.5rem; }

/* ======================= VS comparison card ======================= */
.vs-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1.8rem 1.4rem; border: 1.5px solid var(--ink); border-radius: var(--r); background: var(--surface); transition: border-color .16s ease; }
.vs-card:hover { border-color: var(--accent); text-decoration: none; }
.vs-thumbs { position: relative; display: flex; align-items: center; justify-content: center; margin-bottom: 1.2rem; }
.vs-thumbs img { width: 92px; height: 92px; border-radius: var(--r); object-fit: cover; border: 1.5px solid var(--ink); background: var(--surface-2); }
.vs-thumbs img:first-child { margin-right: -14px; }
.vs-thumbs img:last-child { margin-left: -14px; }
.vs-badge { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 3; width: 34px; height: 34px; border-radius: var(--r); background: var(--accent); border: 2px solid var(--surface); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 600; font-size: .78rem; text-transform: uppercase; color: var(--on-accent); }
.vs-card h3 { margin: 0 0 .7rem; font-size: 1.22rem; }
.vs-card:hover h3 { color: var(--accent); }
.vs-card .vs-meta { display: flex; gap: .5rem; align-items: center; margin-bottom: .7rem; flex-wrap: wrap; justify-content: center; }
.vs-card p { color: var(--ink-2); font-size: var(--fs-sm); margin: 0; }

/* ======================= Guide banner / list ======================= */
.guide-banner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; background: var(--cockpit); color: #fff; border: 1.5px solid var(--ink); border-left: 4px solid var(--accent); border-radius: var(--r); padding: 2.2rem 2.4rem; transition: background .16s ease; }
.guide-banner:hover { background: var(--cockpit-2); text-decoration: none; }
.guide-banner .gb-icon { flex-shrink: 0; font-size: 2.4rem; color: var(--accent); }
.guide-banner h3 { color: #fff; font-size: clamp(1.5rem, 2.6vw, 2.1rem); text-transform: uppercase; margin: .4rem 0; }
.guide-banner p { color: rgba(255,255,255,.78); margin: 0; }
.guide-banner .gb-tag { display: inline-block; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--accent-soft); }
.guide-banner .gb-arrow { font-size: 1.6rem; color: var(--accent); flex-shrink: 0; }
.guide-list-item { display: flex; gap: 1.1rem; align-items: flex-start; padding: 1.3rem 0; border-bottom: 1px solid var(--line); }
.guide-list-item:hover { text-decoration: none; }
.guide-list-item:hover h4 { color: var(--accent); }
.guide-list-item .gli-icon, .guide-icon { flex-shrink: 0; font-size: 1.5rem; color: var(--accent); }
.guide-list-item h4 { margin: 0 0 .2rem; font-size: 1.2rem; transition: color .15s ease; }
.guide-list-item p { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); }

/* ======================= Trust split ======================= */
.trust-split { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: start; }
@media (max-width: 860px) { .trust-split { grid-template-columns: 1fr; gap: 2rem; } }
.trust-split h2 { margin: .4rem 0 1rem; }
.trust-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1.5px solid var(--ink); border-radius: var(--r); overflow: hidden; }
@media (max-width: 480px) { .trust-cards { grid-template-columns: 1fr; } }
.trust-cards .tc { padding: 1.4rem; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
.trust-cards .tc i { font-size: 1.6rem; color: var(--accent); margin-bottom: .6rem; display: block; }
.trust-cards .tc h4 { margin: 0 0 .3rem; font-size: 1.1rem; }
.trust-cards .tc p { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); }

/* ======================= Experts band ======================= */
.expert-band .eyebrow { color: var(--accent-soft); }
.expert-card { display: flex; gap: 1.2rem; align-items: flex-start; padding: 1.6rem; border: 1px solid rgba(255,255,255,.16); border-radius: var(--r); transition: border-color .16s ease, background .16s ease; }
.expert-card:hover { background: rgba(255,255,255,.04); border-color: var(--accent); text-decoration: none; }
.expert-card .ec-avatar { flex-shrink: 0; width: 56px; height: 56px; border-radius: var(--r); background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; }
.expert-card h3 { color: #fff; margin: 0 0 .15rem; font-size: 1.2rem; }
.expert-card .ec-role { color: var(--accent-soft); font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .5rem; }
.expert-card p { color: rgba(255,255,255,.68); font-size: var(--fs-sm); margin: 0; }

/* ======================= CTA band ======================= */
.cta-band { background: var(--cockpit); color: #fff; border: 1px solid rgba(255,255,255,.12); border-top: 3px solid var(--accent); border-radius: var(--r); padding: 3.4rem 2.5rem; text-align: center; }
.cta-band h2 { color: #fff; margin: 0 0 .7rem; }
.cta-band p { color: rgba(255,255,255,.74); max-width: 50ch; margin: 0 auto 1.8rem; }
.cta-band .btn, .cta-band .nav-cta { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.cta-band .btn:hover, .cta-band .nav-cta:hover { background: var(--accent-press); border-color: var(--accent-press); color: var(--on-accent); }

/* ======================= Brand / editorial pages ======================= */
.brand-hero { background: var(--surface-2); border-bottom: 1.5px solid var(--ink); padding: 3.4rem 0 2.8rem; text-align: center; }
.brand-hero .eyebrow { justify-content: center; }
.brand-hero h1 { margin: 0 0 .8rem; }
.brand-hero p { color: var(--ink-2); font-size: var(--fs-md); max-width: 60ch; margin: 0 auto; }
.prose-narrow { max-width: 66ch; }
.prose-narrow p { margin-bottom: 1.15rem; }

/* Numbered process steps */
.process { list-style: none; counter-reset: pstep; padding: 0; margin: 0; display: grid; gap: 1.6rem; }
.process.two { grid-template-columns: 1fr 1fr; gap: 2rem; }
@media (max-width: 680px) { .process.two { grid-template-columns: 1fr; } }
.process li { position: relative; padding-left: 3.6rem; }
.process li::before { counter-increment: pstep; content: counter(pstep, decimal-leading-zero); position: absolute; left: 0; top: -.2rem; font-family: var(--font-mono); font-size: 1.1rem; font-weight: 600; color: var(--accent); border: 1.5px solid var(--accent); border-radius: var(--r); width: 2.4rem; height: 2.4rem; display: flex; align-items: center; justify-content: center; }
.process li h3 { margin: 0 0 .3rem; font-size: 1.2rem; }
.process li p { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); }

/* Big stat row */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1.5px solid var(--ink); border-radius: var(--r); overflow: hidden; }
@media (max-width: 620px) { .stat-row { grid-template-columns: repeat(2, 1fr); } }
.stat-row .sr { padding: 1.4rem 1.3rem; border-left: 1px solid var(--line); }
.stat-row .sr:first-child { border-left: 0; }
.stat-row .sr b { display: block; font-family: var(--font-mono); font-weight: 600; font-size: 2.2rem; line-height: 1; color: var(--ink); letter-spacing: -.02em; }
.stat-row .sr span { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }

/* Source cards */
.source-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1.5px solid var(--ink); border-radius: var(--r); overflow: hidden; }
@media (max-width: 760px) { .source-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .source-grid { grid-template-columns: 1fr; } }
.source-grid a { display: flex; align-items: flex-start; gap: .7rem; padding: 1.2rem; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
.source-grid a:hover { background: var(--surface-2); text-decoration: none; }
.source-grid i { color: var(--accent); font-size: 1.3rem; }
.source-grid b { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; text-transform: uppercase; letter-spacing: -.005em; display: block; }
.source-grid span { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-3); }

/* Principle list */
.principles { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.1rem; }
.principles li { display: flex; gap: .8rem; align-items: flex-start; }
.principles li i { color: var(--ok); font-size: 1.3rem; margin-top: .1rem; flex-shrink: 0; }
.principles li b { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: -.005em; }

/* Two-panel ledger */
.ledger { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1.5px solid var(--ink); border-radius: var(--r); margin: 1.6rem 0; overflow: hidden; }
.ledger > div { padding: 1.4rem 1.6rem; }
.ledger > div:first-child { border-right: 1px solid var(--line); }
.ledger h4 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .3rem; font-size: 1.1rem; }
.ledger .yes h4 i { color: var(--ok); }
.ledger .no h4 i { color: var(--warning); }
.ledger ul { list-style: none; padding: 0; margin: .5rem 0 0; }
.ledger li { position: relative; padding: .4rem 0 .4rem 1.5rem; font-size: var(--fs-sm); color: var(--ink-2); }
.ledger .yes li::before { content: "\2713"; color: var(--ok); position: absolute; left: 0; font-weight: 700; }
.ledger .no li::before { content: "\2715"; color: var(--warning); position: absolute; left: 0; font-weight: 700; }
@media (max-width: 620px) { .ledger { grid-template-columns: 1fr; } .ledger > div:first-child { border-right: 0; border-bottom: 1px solid var(--line); } }

/* Checklist */
.checklist { list-style: none; padding: 0; margin: 1.3rem 0; }
.checklist li { position: relative; padding: .6rem 0 .6rem 2rem; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.checklist li::before { content: "\2713"; position: absolute; left: 0; top: .55rem; color: var(--accent); font-weight: 700; }
.checklist.warn li::before { content: "!"; color: #fff; background: var(--warning); width: 1.2rem; height: 1.2rem; border-radius: var(--r); display: flex; align-items: center; justify-content: center; top: .5rem; font-size: .8rem; font-family: var(--font-mono); }
.checklist.warn li { padding-left: 2.2rem; }

/* ======================= Responsive nav ======================= */
@media (max-width: 900px) {
    .nav-toggle { display: block; }
    .site-nav { position: fixed; inset: 74px 0 auto 0; background: var(--cockpit); border-bottom: 2px solid var(--accent); flex-direction: column; align-items: stretch; padding: 1rem 1.75rem 1.5rem; gap: .2rem; display: none; max-height: calc(100vh - 74px); overflow-y: auto; }
    body.nav-open .site-nav { display: flex; }
    .nav-link { padding: .8rem 0; border-bottom: 1px solid rgba(255,255,255,.1); }
    .nav-link::after { display: none; }
    .nav-dropdown-menu { position: static; opacity: 1; visibility: visible; transform: none; border: 0; border-top: 0; box-shadow: none; padding: 0 0 .5rem 1rem; display: none; background: transparent; }
    .nav-dropdown.open .nav-dropdown-menu { display: block; }
    .nav-cta { text-align: center; justify-content: center; margin-top: .8rem; }
    .recipe-cols { grid-template-columns: 1fr; }
    .compare-table thead th { position: static; }
}

/* ======================= Homepage / hub authority additions ======================= */
/* Consistent hub content rhythm (replaces ad-hoc inline paddings) */
.hub-body { padding: 2.6rem 0 4.5rem; }

/* Proof / stat band on the dark cockpit */
.stat-row--5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 820px) { .stat-row--5 { grid-template-columns: repeat(2, 1fr); } .stat-row--5 .sr { border-top: 1px solid var(--line); } }
.section-dark .stat-row { border-color: rgba(255,255,255,.22); background: transparent; }
.section-dark .stat-row .sr { border-left-color: rgba(255,255,255,.14); }
.section-dark .stat-row--5 .sr { border-top-color: rgba(255,255,255,.14); }
.section-dark .stat-row .sr b { color: #fff; }
.section-dark .stat-row .sr span { color: rgba(255,255,255,.6); }

/* Methodology process reads on the dark band */
.section-dark .process li h3 { color: #fff; }
.section-dark .process li p { color: rgba(255,255,255,.68); }

/* Powertrain browse grid (reuses ladder-item styling, 5 up) */
.ladder--pt { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 780px) { .ladder--pt { grid-template-columns: repeat(2, 1fr); } }

/* ======================= Editorial / static content ======================= */
/* Canonical utilities so static pages never need ad-hoc inline styles. */
.editorial { max-width: 760px; margin: 0 auto; }
.editorial-wide { max-width: 900px; margin: 0 auto; }
.editorial > h2, .editorial-wide > h2 { margin: 2.4rem 0 .8rem; }
.editorial > h2:first-child, .editorial-wide > h2:first-child { margin-top: 0; }
.editorial > p, .editorial-wide > p { color: var(--ink-2); }
.editorial > ul, .editorial > ol, .editorial-wide > ul, .editorial-wide > ol { color: var(--ink-2); padding-left: 1.3rem; }
.editorial li, .editorial-wide li { margin-bottom: .5rem; }
.center { text-align: center; }
.muted { color: var(--ink-2); }
/* Oversized lead paragraph (display face, not uppercase) */
.lead-xl {
    font-family: var(--font-display); font-weight: 600;
    font-size: clamp(1.3rem, 2.4vw, 1.72rem); line-height: 1.32;
    text-transform: none; letter-spacing: 0; color: var(--ink); margin: 0 0 1.4rem;
}

/* Editorial image figure (photo when present, framed placeholder when not) */
.editorial-figure { margin: 2.2rem 0; border: 1.5px solid var(--ink); border-radius: var(--r); overflow: hidden; background: var(--surface); }
.editorial-figure img { width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; object-fit: cover; }
.editorial-figure .ef-ph { aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--ink-3); font-size: 3rem; position: relative; }
.editorial-figure .ef-ph::after { content: ""; position: absolute; inset: 10px; border: 1px solid var(--line); pointer-events: none; }
.editorial-figure figcaption { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); padding: .7rem 1rem; border-top: 1.5px solid var(--ink); }
.editorial-figure.is-portrait img { aspect-ratio: 3 / 4; }
/* Faq on static pages reuses the .faq component; give it a lighter top rule here */
.editorial .faq h2, .editorial-wide .faq h2 { border-bottom: 2px solid var(--ink); }

/* ---- Content-flow rhythm: a text block and a component never abut ---- */
:is(.card-grid, .intent-grid, .ladder, .stat-row, .compare-table, .source-grid, .proscons, .ledger, .process, .trust-cards, .trust-split, .spotlight-grid, .rank-list, .feature-grid, .editorial-figure, .callout, .tldr, .stat-tiles, .score-gauge, .kv-list, .data-table-wrap, .pullquote, .timeline, .decision) + :is(.editorial, .editorial-wide, p),
:is(.editorial, .editorial-wide, p) + :is(.card-grid, .intent-grid, .ladder, .stat-row, .compare-table, .source-grid, .proscons, .ledger, .process, .trust-cards, .trust-split, .spotlight-grid, .rank-list, .feature-grid, .callout, .tldr, .stat-tiles, .score-gauge, .kv-list, .data-table-wrap, .pullquote, .timeline, .decision) {
    margin-top: 2.4rem;
}