:root {
    --ifmg-blue: #1B75BC;          /* canonical logo blue (locked 2026-06-08, was #1F8FCB) */
    --ifmg-blue-dark: #155E96;
    --ifmg-blue-logo: #3FA9DC;
    --ifmg-orange: #F58220;        /* brand accent (was lime #C5D639) */
    --ifmg-orange-dark: #D96E12;
    --ifmg-orange-text: #9C4F0E;   /* darkened for WCAG AA text on tints */
    --ifmg-ink: #0F1720;
    --ifmg-ink-soft: #3A4A5A;
    --ifmg-muted: #5A6675;   /* darkened from #6B7785 so secondary text clears WCAG AA on the tinted band */
    --ifmg-surface: #ffffff;
    --ifmg-bg: #EBEFF5;
    --ifmg-border: #E5E9EF;
    --ifmg-radius-sm: 8px;
    --ifmg-radius: 14px;
    --ifmg-radius-lg: 20px;
    --ifmg-radius-full: 999px;   /* fully-round — pills, badges (Contract 14 radius family) */
    --ifmg-shadow-sm: 0 1px 2px rgba(15,23,32,.04), 0 1px 3px rgba(15,23,32,.06);
    --ifmg-shadow:    0 4px 12px rgba(15,23,32,.06), 0 2px 4px rgba(15,23,32,.04);
    --ifmg-shadow-lg: 0 12px 40px rgba(15,23,32,.10), 0 4px 10px rgba(15,23,32,.06);

    /* Semantic tokens (themeable; defaults preserve current trim-page appearance). */
    --ifmg-success: #1FA363;       /* buy / positive — trim "Buy this if" */
    --ifmg-danger: #D0021B;        /* skip / caution — trim "Skip this if" */
    --ifmg-hero-scrim: #07111F;    /* dark photographic-hero scrim base — trim editorial hero */

    /* Compare V6 two-brand system: the SUBJECT (page's own vehicle) wins in the brand primary; the RIVAL
       wins in a distinct deep navy; ties/categorical splits are neutral gray. The reader can read the
       winner by colour alone (text labels are always kept too). Navy is deliberately distinct from the
       ink CTA band (#07111F) so a rival win never reads as "neutral chrome". */
    --cmpv6-rival: #0B2545;        /* Camry / rival navy — winner colour for the rival side */
    --cmpv6-rival-soft: #1B3A5C;   /* lighter navy for hovers / soft accents */
    --cmpv6-tie: var(--ifmg-muted);/* tie / "different setups" / non-comparable */

    --bs-primary: var(--ifmg-blue);
    --bs-primary-rgb: 27,117,188;
    --bs-body-bg: var(--ifmg-bg);
    --bs-body-color: var(--ifmg-ink);
    --bs-border-color: var(--ifmg-border);
    --bs-border-radius: var(--ifmg-radius-sm);
    --bs-border-radius-lg: var(--ifmg-radius);
}

/* ============================================================================
   Automotive Design System v1 — semantic layer over the IFMG theme tokens.
   ADDITIVE: --auto-* / --space-* / --type-* alias and build on --ifmg-* (which
   still carries per-site Theme overrides) and never replace it. Components opt
   in to these; nothing here changes rendering until a component consumes them.
   The --auto-primary/accent/etc. fall back to the locked brand values when a
   site hasn't set its theme vars, so the layer is safe to load standalone.
   ============================================================================ */
:root {
    /* Semantic automotive colour aliases (flow from per-site theme; brand fallbacks). */
    --auto-bg: var(--ifmg-bg);
    --auto-surface: var(--ifmg-surface);
    --auto-surface-raised: var(--ifmg-surface);
    --auto-ink: var(--ifmg-ink);
    --auto-ink-soft: var(--ifmg-ink-soft);
    --auto-muted: var(--ifmg-muted);
    --auto-border: var(--ifmg-border);

    --auto-primary: var(--ifmg-primary, var(--ifmg-blue));
    --auto-secondary: var(--ifmg-secondary, var(--ifmg-ink-soft));
    --auto-accent: var(--ifmg-accent, var(--ifmg-orange));
    --auto-accent-text: var(--ifmg-accent-text, var(--ifmg-orange-text));
    /* Verdict V2 (Contract 14): editorial positive/negative semantic scale (exact current verdict hex →
       zero visual change). Reusable by pros/cons + Compare in their own passes; defined here, consumed only
       by the Review verdict for now. */
    --auto-positive: #2e9e5b;
    --auto-negative: #cc4b37;
    --auto-tint: var(--ifmg-tint, var(--ifmg-bg));

    --auto-hero-overlay: rgba(15, 23, 32, 0.48);
    --auto-card-hover-bg: color-mix(in srgb, var(--auto-tint) 18%, white);

    /* Formal spacing scale (supersedes ad-hoc rem; adopted incrementally). */
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* Section-rhythm scale (Contract 14 R8): editorial pacing for sections. `default` is the steady
       baseline (= a section's context padding; emitted as NO class → zero regression). The variants
       modulate around it: tight compresses supporting blocks, emphasized lets a major moment breathe,
       rest is a quiet transition. Token-driven + blueprint-selectable (LayoutJson "rhythm"). */
    --section-rhythm-tight: 1rem;
    --section-rhythm-default: 4rem;   /* = base .ifmg-section padding; documentation/reuse only */
    --section-rhythm-emphasized: 5rem;
    --section-rhythm-rest: 2.5rem;

    /* Type scale (fluid; weight 800 premium headings — extends existing clamp direction). */
    --type-display: clamp(2.5rem, 5vw, 4.75rem);
    --type-display-line: 1.02;
    --type-display-weight: 800;

    --type-article-h1: clamp(2rem, 4vw, 3.5rem);
    --type-article-h1-line: 1.08;
    --type-article-h1-weight: 800;

    --type-section: clamp(1.75rem, 2.8vw, 2.75rem);
    --type-section-line: 1.12;
    --type-section-weight: 800;

    --type-card-title: clamp(1.125rem, 1.6vw, 1.375rem);
    --type-card-title-line: 1.25;
    --type-card-title-weight: 700;

    --type-body: clamp(1rem, 1vw, 1.0625rem);
    --type-body-line: 1.7;

    --type-meta: .875rem;
    --type-meta-line: 1.4;
    --type-meta-weight: 600;

    /* ----- Contract 14 Layer-1 token completion (additive; zero visual change) ---------------------
       The families above (colour roles, spacing, type, radius, elevation) already existed. The four
       below complete the token contract every Component V2 consumes. Adding them changes nothing until
       a component adopts them; values match current usage so adoption stays pixel-identical. Canonical
       naming: brand values live in --ifmg-* (per-site Theme overrides flow here) → semantic roles in
       --auto-* → scales in --space-*/--type-* → the families below. Components consume tokens, never
       raw constants. Constant→token adoption + any spacing/type normalisation happens per component
       during its V2 (where refinement is intentional), never as a blind global rewrite. */

    /* Motion — durations + easings. --motion-fast matches the prevailing .15s transitions. */
    --motion-fast: .15s;
    --motion: .2s;
    --motion-slow: .3s;
    --ease-standard: cubic-bezier(.2, 0, 0, 1);
    --ease-out: ease;

    /* Z-index — consolidates ad-hoc stacking. --z-sticky matches the existing in-page TOC (z-index:400). */
    --z-base: 1;
    --z-raised: 10;
    --z-sticky: 400;
    --z-header: 500;
    --z-overlay: 1000;
    --z-modal: 1100;

    /* Opacity — --opacity-scrim matches the current hero overlay alpha (.48). */
    --opacity-muted: .64;
    --opacity-disabled: .45;
    --opacity-scrim: .48;

    /* Breakpoints — documentation + container-query/JS use (CSS @media cannot read var()). Match the
       breakpoints already used across the stylesheet (768 / 900 / 1200). */
    --bp-sm: 600px;
    --bp-md: 768px;
    --bp-lg: 900px;
    --bp-xl: 1200px;

    /* Focus ring — accessibility contract for interactive primitives (Contract 14 §4 / Contract 07).
       Uses the per-site PRIMARY (a real brand colour); the themed accent can be low-contrast (e.g. a
       grey), so primary is the reliable, always-saturated ring. Sites may override --focus-ring. */
    --focus-ring: var(--ifmg-primary, var(--ifmg-blue));
    --focus-ring-offset: 2px;
}

html, body {
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--ifmg-bg);
    color: var(--ifmg-ink);
}
/* Smooth jump-to for in-page TOC anchors (respecting reduced-motion). */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Contract 14 · Layer 2 — shared focus-visible (accessibility contract for every interactive primitive).
   Keyboard-focus ONLY (:focus-visible) — mouse users see no change. `outline` (not box-shadow) so there is
   no layout shift, with an offset so the ring clears filled controls. Written with :where() = ZERO
   specificity, so any component-specific focus style (e.g. the hero controls' accent ring) still wins and
   this only replaces the browser default elsewhere — one consistent, branded, accessible ring across
   buttons, links, pills/chips, form controls, and disclosure summaries. */
:where(a[href], button, [role="button"], .ifmg-btn, .ifmg-pill, .ifmg-chip, summary,
       input, select, textarea):focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

.ifmg-container { max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; }

.ifmg-section { padding: 4rem 0; }
.ifmg-section + .ifmg-section { border-top: 1px solid var(--ifmg-border); }

h1, h2, h3, h4 { line-height: 1.1; letter-spacing: -.01em; color: var(--ifmg-ink); }
h1 { font-size: clamp(2.25rem, 4vw, 3.5rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 2.5vw, 2.25rem); font-weight: 700; }
.ifmg-eyebrow {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .8rem;
    font-weight: 700;
    /* D3: eyebrows use the PRIMARY brand colour, not the raw accent. The accent is the light
       highlight reserved for actions/badges and was both low-contrast as small text on white
       (sub-WCAG-AA) and over-used; primary matches the card meta/links and reads cleanly. Dark
       bands (hero/financing) override this with a lightened accent below. */
    color: var(--ifmg-primary);
    margin-bottom: .5rem;
}

/* .ifmg-hero (dark banner) + its h1/eyebrow/subtitle/btn are defined ONCE in the v3
   "premium branded banner" block far below. The earlier base + v2 copies that used to sit
   here/there were fully superseded property-for-property and have been removed. */

/* Button primitive (Contract 14 · Layer 2). Token-driven; the semantic --ifmg-primary token carries the
   per-site themed colour (the theme injects --ifmg-primary AND --ifmg-blue = Theme.ColorPrimary, so this is
   identical to the prior --ifmg-blue and stays brand-agnostic). Motion uses the Layer-1 motion tokens. Phase-1
   token-adoption: zero visual change. */
.ifmg-btn {
    display: inline-block;
    background: var(--ifmg-primary, var(--ifmg-blue));
    color: #fff;
    padding: .85rem 1.4rem;
    border-radius: var(--ifmg-radius-sm);
    text-decoration: none;
    font-weight: 600;
    border: 1px solid transparent;
    transition: background var(--motion-fast) var(--ease-out);
}
.ifmg-btn:hover { background: var(--ifmg-blue-dark); color: #fff; }
.ifmg-btn--ghost { background: transparent; color: var(--ifmg-primary, var(--ifmg-blue)); border-color: var(--ifmg-primary, var(--ifmg-blue)); }
.ifmg-btn--ghost:hover { background: var(--ifmg-primary, var(--ifmg-blue)); color: #fff; }

/* Feature Breakdown V2 — interactive buyer-education accordion */
.ifmg-fbreak__intro { max-width: 760px; margin: -.25rem auto 1.5rem; text-align: center; color: var(--ifmg-muted, #5a6472); font-size: 1.05rem; }
.ifmg-fbreak__list { display: flex; flex-direction: column; gap: .75rem; max-width: 900px; margin: 0 auto; }
.ifmg-fbreak__item { border: 1px solid var(--ifmg-border, #e3e7ee); border-radius: var(--ifmg-radius, 12px); background: var(--ifmg-surface, #fff); overflow: hidden; }
.ifmg-fbreak__item.is-open { border-color: var(--ifmg-blue); box-shadow: 0 2px 14px rgba(0,0,0,.06); }
.ifmg-fbreak__head { width: 100%; display: flex; align-items: center; gap: .9rem; padding: 1.05rem 1.2rem; background: none; border: 0; cursor: pointer; text-align: left; font: inherit; color: var(--ifmg-ink, #11151c); }
.ifmg-fbreak__icon { display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border-radius: 8px; background: var(--ifmg-blue-tint, #eef4fb); color: var(--ifmg-blue); flex: 0 0 auto; }
.ifmg-fbreak__name { font-weight: 700; font-size: 1.15rem; flex: 1 1 auto; }
.ifmg-fbreak__chev { transition: transform .18s ease; color: var(--ifmg-muted, #5a6472); }
.ifmg-fbreak__item.is-open .ifmg-fbreak__chev { transform: rotate(180deg); }
.ifmg-fbreak__panel { padding: 0 1.2rem 1.3rem; }
.ifmg-fbreak__panel[hidden] { display: none; }
.ifmg-fbreak__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .5rem .9rem; margin: .2rem 0 1.1rem; }
.ifmg-fbreak__fact { display: flex; flex-direction: column; gap: .1rem; padding: .55rem .7rem; background: var(--ifmg-surface-2, #f6f8fb); border-radius: 8px; }
.ifmg-fbreak__fact dt { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--ifmg-muted, #5a6472); margin: 0; }
.ifmg-fbreak__fact dd { margin: 0; font-weight: 700; }
.ifmg-fbreak__para { margin: 0 0 .8rem; line-height: 1.55; }
.ifmg-fbreak__lbl { display: block; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ifmg-blue); margin-bottom: .15rem; }
.ifmg-fbreak__bottom { margin: .2rem 0 0; padding-top: .8rem; border-top: 1px solid var(--ifmg-border, #e3e7ee); line-height: 1.5; }

/* Next-step action band (comparison routing / commerce / discovery) — centered heading + button row */
.ifmg-actionband { text-align: center; }
.ifmg-actionband__sub { max-width: 640px; margin: -.25rem auto var(--space-5); color: var(--ifmg-muted, #5a6472); font-size: 1.05rem; } /* CTA V2: 1.25rem→token (exact) */
.ifmg-actionband__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; } /* CTA V2: .75rem→token (exact) */
/* CR1 R6 — compact ActionBand: a light "next step" handoff (smaller heading, tighter), not a large promo band. */
.ifmg-actionband--compact .ifmg-section-head { margin-bottom: var(--space-3); }
.ifmg-actionband--compact .ifmg-section-head h2 { font-size: 1.35rem; }
.ifmg-actionband--compact .ifmg-actionband__sub { margin-bottom: var(--space-3); font-size: .95rem; }
@media (max-width: 640px) {
    .ifmg-actionband__actions { flex-direction: column; }
    .ifmg-actionband__actions .ifmg-btn { width: 100%; text-align: center; }
}

.ifmg-card {
    background: var(--ifmg-surface);
    border: 1px solid var(--ifmg-border);
    border-radius: var(--ifmg-radius);
    box-shadow: var(--ifmg-shadow-sm);
    padding: 1.5rem;
}

.ifmg-feature-card {
    background: var(--ifmg-surface);
    border: 1px solid var(--ifmg-border);
    border-radius: var(--ifmg-radius-sm);
    padding: 1.25rem 1.25rem 1.25rem 1.5rem;
    border-left: 3px solid transparent;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ifmg-feature-card:hover {
    border-left-color: var(--ifmg-orange);
    box-shadow: var(--ifmg-shadow);
}

.ifmg-grid { display: grid; gap: 1.25rem; }
.ifmg-grid-2 { grid-template-columns: 1fr; }
.ifmg-grid-3 { grid-template-columns: 1fr; }
@media (min-width: 768px) {
    .ifmg-grid-2 { grid-template-columns: 1fr 1fr; }
    .ifmg-grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 992px) {
    .ifmg-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
}

.ifmg-struggles-list { list-style: none; padding: 0; margin: 0; }
.ifmg-struggles-list li {
    padding: 1rem 1.25rem;
    border-left: 3px solid var(--ifmg-muted);
    background: var(--ifmg-surface);
    border-radius: var(--ifmg-radius-sm);
    margin-bottom: .75rem;
    box-shadow: var(--ifmg-shadow-sm);
}

.ifmg-cta-band {
    background: var(--ifmg-blue);
    color: #fff;
    text-align: center;
    padding: var(--space-16) var(--space-5); /* CTA V2: tokens = 4rem 1.25rem (exact; zero visual change) */
}
.ifmg-cta-band h2 { color: #fff; }
.ifmg-cta-band .ifmg-btn { background: var(--ifmg-orange); color: var(--ifmg-ink); }
.ifmg-cta-band .ifmg-btn:hover { background: var(--ifmg-orange-dark); }

.ifmg-image-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 600px) { .ifmg-image-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 992px) { .ifmg-image-grid { grid-template-columns: 1fr 1fr 1fr; } }
.ifmg-image-grid figure { margin: 0; }
.ifmg-image-grid img { width: 100%; height: auto; border-radius: var(--ifmg-radius-sm); display: block; }
.ifmg-image-grid figcaption { color: var(--ifmg-muted); font-size: .9rem; margin-top: .4rem; }

.ifmg-debug section { outline: 1px dashed #C76; outline-offset: 2px; }

.accordion-button:not(.collapsed) {
    color: var(--ifmg-orange-text);
    background-color: #FFF4E9;
    box-shadow: inset 0 -1px 0 var(--ifmg-orange);
}

/* Container width helpers */
.ifmg-container { max-width: 800px; margin: 0 auto; padding: 0 1.25rem; }
.ifmg-container--wide { max-width: 1200px; }
.ifmg-container--narrow { max-width: 640px; }

/* Hero variants (light). The dark .ifmg-hero base + its h1/subtitle live in the v3 banner block below. */
.ifmg-hero--centered { background: var(--ifmg-bg); padding: 6rem 1.25rem; text-align: center; }
.ifmg-hero--centered h1 { color: var(--ifmg-ink); }
.ifmg-hero--centered .ifmg-subtitle { color: var(--ifmg-ink-soft); }
.ifmg-hero--dark { background: var(--ifmg-ink); color: #fff; }
.ifmg-hero--dark h1 { color: #fff; }
.ifmg-hero--dark .ifmg-subtitle { color: rgba(255,255,255,.85); }
.ifmg-hero--dark .ifmg-btn { background: var(--ifmg-orange); color: var(--ifmg-ink); border-color: var(--ifmg-orange); }
.ifmg-hero--dark .ifmg-btn:hover { background: var(--ifmg-orange-dark); border-color: var(--ifmg-orange-dark); }
.ifmg-hero--image-left { background: var(--ifmg-bg); padding: 4rem 1.25rem; }
.ifmg-hero--image-left h1 { color: var(--ifmg-ink); }
.ifmg-hero--image-left .ifmg-subtitle { color: var(--ifmg-ink-soft); }
.ifmg-hero__split { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 768px) { .ifmg-hero__split { grid-template-columns: 1fr 1fr; } }
.ifmg-hero__media img { width: 100%; height: auto; border-radius: var(--ifmg-radius); display: block; }

/* CTA tones. Canonical set (CTA V2): surface / ink / accent. blue/orange/lime kept as legacy aliases. */
.ifmg-cta { padding: var(--space-16) var(--space-5); text-align: center; } /* tokens = 4rem 1.25rem (exact) */
/* Closing-CTA body copy — was an inline style on the <p>/<div>; now a tokenized component class (= .75rem auto 1.25rem). */
.ifmg-cta__body { max-width: 680px; margin: var(--space-3) auto var(--space-5); font-size: 1.1rem; }
.ifmg-cta--ink { background: var(--ifmg-ink); color: #fff; }
.ifmg-cta--ink h2 { color: #fff; }
.ifmg-cta--ink .ifmg-btn { background: var(--ifmg-orange); color: var(--ifmg-ink); border-color: var(--ifmg-orange); }
.ifmg-cta--blue { background: var(--ifmg-blue); color: #fff; }
.ifmg-cta--blue h2 { color: #fff; }
.ifmg-cta--blue .ifmg-btn { background: var(--ifmg-orange); color: var(--ifmg-ink); border-color: var(--ifmg-orange); }
/* Accent CTA band. `.ifmg-cta--accent` is the CANONICAL name (CTA V2); `.ifmg-cta--orange` and
   `.ifmg-cta--lime` are kept as backward-compat aliases so legacy section payloads carrying
   backgroundColor:"orange"/"lime" render the accent treatment rather than dropping to no background
   — the lime *colour* is fully retired; this is only a data shim. */
.ifmg-cta--accent, .ifmg-cta--orange, .ifmg-cta--lime { background: var(--ifmg-orange); color: var(--ifmg-ink); }
.ifmg-cta--accent h2, .ifmg-cta--orange h2, .ifmg-cta--lime h2 { color: var(--ifmg-ink); }
.ifmg-cta--accent .ifmg-btn, .ifmg-cta--orange .ifmg-btn, .ifmg-cta--lime .ifmg-btn { background: var(--ifmg-ink); color: #fff; border-color: var(--ifmg-ink); }
.ifmg-cta--surface { background: var(--ifmg-bg); color: var(--ifmg-ink); }
.ifmg-cta--surface h2 { color: var(--ifmg-ink); }
.ifmg-cta--surface .ifmg-btn { background: var(--ifmg-blue); color: #fff; border-color: var(--ifmg-blue); }

/* Comparison table variant */
.ifmg-compare { width: 100%; border-collapse: collapse; background: var(--ifmg-surface); border: 1px solid var(--ifmg-border); border-radius: var(--ifmg-radius-sm); overflow: hidden; }
.ifmg-compare th, .ifmg-compare td { padding: .85rem 1rem; text-align: left; border-bottom: 1px solid var(--ifmg-border); vertical-align: top; }
.ifmg-compare thead th { background: var(--ifmg-bg); color: var(--ifmg-ink); font-weight: 600; border-bottom: 2px solid var(--ifmg-blue); }
.ifmg-compare tbody tr:last-child td { border-bottom: 0; }
.ifmg-compare tbody tr:hover { background: #FFF4E9; }

/* Comparison matrix (dimension rows × subject+rival columns). The subject column is tinted so the
   reader's vehicle stands out; the table scrolls horizontally on narrow screens. */
.ifmg-compare-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ifmg-compare--matrix th[scope="row"] { font-weight: 600; color: var(--ifmg-ink); background: var(--ifmg-bg); white-space: nowrap; }
.ifmg-compare--matrix td, .ifmg-compare--matrix thead th { min-width: 8.5rem; }
.ifmg-compare--matrix .ifmg-compare__subject {
    background: color-mix(in srgb, var(--ifmg-primary) 8%, var(--ifmg-surface));
    font-weight: 600;
}
.ifmg-compare--matrix thead th.ifmg-compare__subject {
    background: var(--ifmg-primary); color: var(--ifmg-accent-text, #fff);
    border-bottom-color: var(--ifmg-primary);
}

/* =====================================================================
   v2 automotive template polish — hero, vehicle cards, graceful image
   fallback, icon features, section heads. Appended so it wins by cascade.
   ===================================================================== */

/* ---- Layout rhythm ---- */
.ifmg-section-head { max-width: 720px; margin: 0 auto 2.25rem; text-align: center; }
.ifmg-section-head .ifmg-eyebrow { margin-bottom: .4rem; }
.ifmg-section-head h2, .ifmg-section-head h3 { margin: 0; }
/* Section Header V2 (Contract 14): optional subtitle slot + opt-in start (left) alignment variant.
   Token-driven; centre stays the default. Additive — no existing head sets a subtitle or align. */
.ifmg-section-head__subtitle { max-width: 60ch; margin: var(--space-2) auto 0; color: var(--ifmg-muted); font-size: var(--type-body); line-height: var(--type-body-line); }
.ifmg-section-head--start { max-width: none; margin-left: 0; margin-right: 0; text-align: left; }
.ifmg-section-head--start .ifmg-section-head__subtitle { margin-left: 0; margin-right: 0; }

/* Header / footer should breathe across the full width. */
.site-header > .ifmg-container,
.site-footer > .ifmg-container { max-width: 1200px; }
.site-header { box-shadow: var(--ifmg-shadow-sm); position: sticky; top: 0; z-index: 500; }

/* ---- Top bar: brand left, nav right. The nav is a "priority-plus" menu — JS keeps it to a
        single row, collapsing whatever doesn't fit into a "More" button (which reads "Menu" on
        small screens once everything collapses). Without JS it degrades to a clean wrap. ---- */
.ifmg-topbar { display: flex; align-items: center; gap: 1.5rem; padding: .9rem 1.25rem; }
.ifmg-topbar .brand { white-space: nowrap; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ifmg-topnav {
    margin-left: auto; display: flex; flex-wrap: wrap; align-items: center;
    gap: .35rem 1.4rem; font-weight: 500; position: relative;
}
.ifmg-topnav > a { position: relative; padding: .25rem 0; white-space: nowrap; }
.ifmg-topnav > a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
    background: currentColor; opacity: 0; transform: scaleX(.4); transform-origin: left;
    transition: opacity .15s ease, transform .15s ease;
}
.ifmg-topnav > a:hover::after { opacity: .9; transform: scaleX(1); }

/* Overflow ("More" / "Menu") trigger + dropdown panel. The panel uses surface/ink so it stays
   readable regardless of the header's themed background. */
.ifmg-topnav__more { position: relative; flex: 0 0 auto; }
.ifmg-topnav__more[hidden] { display: none; }
.ifmg-topnav__more-btn {
    background: transparent; border: 0; color: inherit; font: inherit; font-weight: 500;
    cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; padding: .25rem 0;
}
.ifmg-topnav__more-btn i { transition: transform .15s ease; font-size: .9em; }
.ifmg-topnav__more[data-open] .ifmg-topnav__more-btn i { transform: rotate(180deg); }
.ifmg-topnav__menu {
    position: absolute; top: 100%; right: 0; margin-top: .6rem;
    background: var(--ifmg-surface); color: var(--ifmg-ink);
    border: 1px solid var(--ifmg-border); border-radius: var(--ifmg-radius-sm);
    box-shadow: var(--ifmg-shadow-lg); padding: .4rem; min-width: 210px;
    display: none; flex-direction: column; gap: .1rem; z-index: 600;
}
.ifmg-topnav__more[data-open] .ifmg-topnav__menu { display: flex; }
/* Extra class prefix raises specificity above the page's inline ".site-header a { color: <headerText> }"
   rule (which would otherwise paint these links white-on-white inside the light dropdown panel). */
.ifmg-topnav .ifmg-topnav__menu a {
    color: var(--ifmg-ink); opacity: .92; padding: .55rem .7rem; border-radius: 7px;
    white-space: nowrap; text-decoration: none; display: block;
}
.ifmg-topnav .ifmg-topnav__menu a:hover { background: var(--ifmg-bg); opacity: 1; color: var(--ifmg-ink); }

/* ====================================================================
   ModelWide Global Navigation Standard — the locked, platform-owned
   primary nav. Three header regions: brand (left), the DOMINANT
   centered primary links, and a utility area (single Inventory CTA +
   the fixed FAQ/Recalls "More" menu). No width-based overflow; on
   mobile it collapses to a hamburger that opens the same locked order.
   ==================================================================== */
.ifmg-topbar--standard { display: flex; align-items: center; gap: 1.9rem; }
.ifmg-topbar--standard .brand { flex: 0 0 auto; }
/* Brand Block — the site identity. Clean + timeless; a touch more emphasis and breathing room. */
.ifmg-topbar--standard .ifmg-brandblock { display: inline-flex; align-items: center; gap: .6rem; padding: .1rem .4rem .1rem 0; }
.site-header .ifmg-brandblock__model { font-weight: 700; font-size: 1.22rem; letter-spacing: -.01em; opacity: 1; }
.ifmg-brandblock__oem { height: 30px; width: auto; display: block; }
/* OEM monogram — neutral brand mark shown until an official OEM logo asset is installed. Inherits header ink. */
.ifmg-brandblock__monogram {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 34px; height: 34px; border-radius: 9px; border: 2px solid currentColor;
    font-weight: 800; font-size: 1.05rem; line-height: 1;
}
.ifmg-topnav--standard { flex: 1 1 auto; min-width: 0; margin-left: 0; position: relative; display: flex; align-items: center; }
/* Panel gap = the deliberate space BEFORE the Inventory CTA (research group → utility group). */
.ifmg-topnav--standard .ifmg-topnav__panel { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 2.4rem; }

/* Region 2 — the dominant primary links, centered between the brand and the utility area. */
.ifmg-topnav__primary {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: .4rem 1.9rem; font-weight: 500; margin: 0 auto;
}
.ifmg-topnav__primary > a { position: relative; padding: .25rem 0; white-space: nowrap; }
.ifmg-topnav__primary > a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
    background: currentColor; opacity: 0; transform: scaleX(.4); transform-origin: left;
    transition: opacity .15s ease, transform .15s ease;
}
.ifmg-topnav__primary > a:hover::after { opacity: .9; transform: scaleX(1); }
/* Active page: persistent accent underline + heavier weight (platform wayfinding). */
.ifmg-topnav__primary > a.is-active::after { opacity: .9; transform: scaleX(1); }
.ifmg-topnav__primary > a.is-active { opacity: 1; font-weight: 700; }

/* Region 3 — utility area: the single CTA + the fixed More menu, pinned right. The gap is the deliberate
   space BEFORE "More" (wider than the research-group gap, so More reads as its own group — spacing only). */
.ifmg-topnav__utility { flex: 0 0 auto; display: flex; align-items: center; gap: 2.4rem; }

/* Inventory — the single primary-action CTA. A branded pill in the FIXED brand orange (this nav is a platform
   standard, so the CTA colour is consistent across every ModelWide site rather than following the per-site
   accent). Orange contrasts on both the primary-coloured header bar and the light mobile panel; dark ink text
   keeps it WCAG-AA readable. Two-class scope so its colour beats the themed ".site-header a { color:… }". */
.ifmg-topnav--standard .ifmg-topnav__cta {
    display: inline-flex; align-items: center; justify-content: center;
    height: 38px; padding: 0 1.15rem; border-radius: 999px;
    background: var(--ifmg-orange); color: var(--ifmg-ink); opacity: 1;
    font-weight: 700; white-space: nowrap; text-decoration: none; border: 1px solid transparent;
    transition: background .15s ease, box-shadow .15s ease;
}
.ifmg-topnav--standard .ifmg-topnav__cta:hover {
    background: var(--ifmg-orange-dark); color: var(--ifmg-ink); opacity: 1; box-shadow: var(--ifmg-shadow-sm);
}
.ifmg-topnav--standard .ifmg-topnav__cta::after { display: none; }

/* Hamburger toggle — hidden on desktop, shown on mobile. */
.ifmg-topnav__toggle {
    display: none; background: transparent; border: 0; color: inherit; cursor: pointer;
    font-size: 1.5rem; line-height: 1; padding: .1rem .3rem; margin-left: auto;
}

/* Subtle elevation when the sticky header is pinned (no shrink, no animated collapse — just a shadow). */
.site-header { transition: box-shadow .18s ease; }

/* Tablet: keep the locked order on one row, just tighten spacing. */
@media (min-width: 861px) and (max-width: 1100px) {
    .ifmg-topbar--standard { gap: 1.3rem; }
    .ifmg-topnav--standard .ifmg-topnav__panel { gap: 1.6rem; }
    .ifmg-topnav__primary { gap: .3rem 1.2rem; }
    .ifmg-topnav__utility { gap: 1.6rem; }
    .ifmg-topnav__cta { padding: 0 .9rem; }
}

/* Mobile: collapse into a hamburger panel — same locked order (primary links, then CTA, then More). */
@media (max-width: 860px) {
    .ifmg-topnav__toggle { display: inline-flex; }
    .ifmg-topnav--standard { flex: 0 0 auto; margin-left: auto; }
    .ifmg-topnav--standard .ifmg-topnav__panel {
        display: none; position: absolute; top: calc(100% + .55rem); right: 0;
        min-width: 240px; flex-direction: column; align-items: stretch; gap: .1rem;
        background: var(--ifmg-surface); color: var(--ifmg-ink);
        border: 1px solid var(--ifmg-border); border-radius: var(--ifmg-radius-sm);
        box-shadow: var(--ifmg-shadow-lg); padding: .4rem; z-index: 600;
    }
    .ifmg-topnav--standard[data-open] .ifmg-topnav__panel { display: flex; }
    .ifmg-topnav--standard .ifmg-topnav__primary,
    .ifmg-topnav--standard .ifmg-topnav__utility { flex-direction: column; align-items: stretch; gap: .1rem; margin: 0; }
    /* Two-class selectors so links beat the per-site themed ".site-header a { color:<headerText> }" rule —
       otherwise they paint header-white on the light dropdown panel and vanish. */
    .ifmg-topnav--standard .ifmg-topnav__primary > a,
    .ifmg-topnav--standard .ifmg-topnav__menu a {
        color: var(--ifmg-ink); opacity: 1; padding: .55rem .7rem; border-radius: 7px;
    }
    .ifmg-topnav--standard .ifmg-topnav__primary > a::after { display: none; }
    .ifmg-topnav--standard .ifmg-topnav__primary > a:hover,
    .ifmg-topnav--standard .ifmg-topnav__menu a:hover { background: var(--ifmg-bg); color: var(--ifmg-ink); }
    .ifmg-topnav--standard .ifmg-topnav__primary > a.is-active { background: var(--ifmg-bg); color: var(--ifmg-ink); font-weight: 700; }
    /* "More" flattens to inline items in the panel — the dropdown chrome is unnecessary on mobile. */
    .ifmg-topnav--standard .ifmg-topnav__more { width: 100%; }
    .ifmg-topnav--standard .ifmg-topnav__more-btn { display: none; }
    .ifmg-topnav--standard .ifmg-topnav__menu {
        position: static; display: flex; margin: 0; padding: 0; border: 0;
        box-shadow: none; min-width: 0; background: transparent;
    }
    .ifmg-topnav--standard .ifmg-topnav__cta { margin: .25rem 0; width: 100%; }
}

/* ---- Hero ---- The full-bleed branded banner that used to be defined here was an
        intermediate ("v2") pass, since fully superseded by the premium banner in the v3
        section below; removed to keep one source of truth for the hero. ---- */

/* ---- Vehicle card (model / trim) ---- */
.ifmg-vehicle-card {
    display: flex; flex-direction: column;
    background: var(--ifmg-surface);
    border: 1px solid var(--ifmg-border);
    border-radius: var(--ifmg-radius);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--ifmg-shadow-sm);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ifmg-vehicle-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ifmg-shadow-lg);
    border-color: transparent;
    color: inherit;
}
.ifmg-vehicle-card__media {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--ifmg-bg);
    overflow: hidden;
}
.ifmg-vehicle-card__media img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform .35s ease;
}
.ifmg-vehicle-card:hover .ifmg-vehicle-card__media img { transform: scale(1.04); }
.ifmg-vehicle-card__body { padding: 1.15rem 1.25rem 1.35rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.ifmg-vehicle-card__title { font-size: 1.2rem; font-weight: 700; margin: 0; }
.ifmg-vehicle-card__meta { font-weight: 600; color: var(--ifmg-blue); font-size: .95rem; }
.ifmg-vehicle-card__blurb { margin: .15rem 0 .25rem; color: var(--ifmg-ink-soft); font-size: .95rem; line-height: 1.5; }
.ifmg-vehicle-card__cta {
    margin-top: auto; padding-top: .5rem;
    font-weight: 600; color: var(--ifmg-blue);
    display: inline-flex; align-items: center; gap: .4rem;
}
.ifmg-vehicle-card:hover .ifmg-vehicle-card__cta i { transform: translateX(3px); }
.ifmg-vehicle-card__cta i { transition: transform .18s ease; }
.ifmg-badge {
    display: inline-block;
    background: var(--ifmg-orange); color: var(--ifmg-ink);
    font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    padding: .3rem .6rem; border-radius: var(--ifmg-radius-full);
}
/* Overlay variant: when the badge sits on a vehicle-card image it floats top-left.
   Scoped to the card media so admin status/slug pills (which reuse .ifmg-badge inline)
   are not yanked to the document corner. */
.ifmg-vehicle-card__media .ifmg-badge {
    position: absolute; top: .75rem; left: .75rem;
}

/* ---- Graceful image fallback (no photo yet) ---- */
.ifmg-media-fallback {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem;
    background:
        radial-gradient(120% 120% at 20% 0%, color-mix(in srgb, var(--ifmg-blue) 22%, transparent), transparent 55%),
        linear-gradient(135deg, var(--ifmg-bg) 0%, color-mix(in srgb, var(--ifmg-ink) 8%, var(--ifmg-bg)) 100%);
    color: var(--ifmg-muted);
    text-align: center; padding: var(--space-4);
}
.ifmg-media-fallback i { font-size: 2.6rem; color: color-mix(in srgb, var(--ifmg-blue) 65%, var(--ifmg-ink)); opacity: .9; }
.ifmg-media-fallback__name { font-weight: 700; color: var(--ifmg-ink); font-size: 1rem; }
.ifmg-media-fallback__note { font-size: .78rem; letter-spacing: .03em; text-transform: uppercase; opacity: .75; }
.ifmg-image-fallback-tile { position: relative; aspect-ratio: 16 / 10; border-radius: var(--ifmg-radius-sm); overflow: hidden; margin: 0; }
.ifmg-image-fallback-tile .ifmg-media-fallback { border-radius: var(--ifmg-radius-sm); }

/* ---- Feature icon cards ---- */
.ifmg-feature-card--icon {
    border-left: none;
    padding: 1.5rem;
    border-radius: var(--ifmg-radius);
    background: var(--ifmg-surface);
    display: flex; flex-direction: column; gap: .6rem;
}
.ifmg-feature-card--icon:hover { border-left: none; transform: translateY(-3px); box-shadow: var(--ifmg-shadow); }
.ifmg-feature-icon {
    width: 52px; height: 52px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--ifmg-blue) 12%, transparent);
    color: var(--ifmg-blue);
    font-size: 1.5rem;
}
.ifmg-feature-card__title { font-size: 1.1rem; font-weight: 700; margin: 0; }
.ifmg-feature-card__desc { margin: 0; color: var(--ifmg-ink-soft); line-height: 1.55; }

/* ---- Grid: 4-up + wider gap for cards ---- */
.ifmg-grid-4 { grid-template-columns: 1fr; }
@media (min-width: 600px) { .ifmg-grid-4 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 992px) { .ifmg-grid-4 { grid-template-columns: repeat(4, 1fr); } }
.ifmg-container--wide { max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; }

/* ---- Shop by body style ---- */
.ifmg-bodystyle-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 600px) { .ifmg-bodystyle-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px) { .ifmg-bodystyle-grid { grid-template-columns: repeat(6, 1fr); } }
.ifmg-bodystyle-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem;
    padding: 1.5rem 1rem; text-decoration: none; color: var(--ifmg-ink);
    background: var(--ifmg-surface); border: 1px solid var(--ifmg-border); border-radius: var(--ifmg-radius);
    box-shadow: var(--ifmg-shadow-sm); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.ifmg-bodystyle-tile:hover { transform: translateY(-3px); box-shadow: var(--ifmg-shadow); border-color: color-mix(in srgb, var(--ifmg-blue) 40%, transparent); color: var(--ifmg-ink); }
.ifmg-bodystyle-tile__icon { font-size: 2rem; color: var(--ifmg-blue); line-height: 1; }
.ifmg-bodystyle-tile__label { font-weight: 600; font-size: .95rem; }

/* ---- Make strip ---- */
.ifmg-makestrip-section { background: var(--ifmg-surface); }
.ifmg-make-strip { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
.ifmg-make-chip {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .6rem 1.1rem; border-radius: 999px; text-decoration: none;
    background: var(--ifmg-bg); border: 1px solid var(--ifmg-border); color: var(--ifmg-ink); font-weight: 600;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.ifmg-make-chip:hover { background: #fff; border-color: var(--ifmg-blue); color: var(--ifmg-blue); transform: translateY(-2px); }
.ifmg-make-chip--logo { padding: .5rem .9rem; }
.ifmg-make-chip--logo img { height: 28px; width: auto; display: block; filter: grayscale(1); opacity: .8; transition: filter .15s, opacity .15s; }
.ifmg-make-chip--logo:hover img { filter: none; opacity: 1; }

/* ---- Vehicle search bar ---- */
.ifmg-search-section { background: var(--ifmg-bg); }
.ifmg-vehicle-search {
    background: var(--ifmg-surface); border: 1px solid var(--ifmg-border);
    border-radius: var(--ifmg-radius); box-shadow: var(--ifmg-shadow); padding: 1.5rem; max-width: 960px; margin: 0 auto;
}
.ifmg-vehicle-search__title { font-weight: 700; font-size: 1.25rem; margin-bottom: 1rem; text-align: center; }
.ifmg-vehicle-search__row { display: grid; grid-template-columns: 1fr; gap: .75rem; }
@media (min-width: 768px) { .ifmg-vehicle-search__row { grid-template-columns: 1fr 1fr .7fr auto; align-items: center; } }
.ifmg-vehicle-search__field {
    padding: .8rem 1rem; border: 1px solid var(--ifmg-border); border-radius: var(--ifmg-radius-sm);
    font-size: 1rem; background: var(--ifmg-bg); color: var(--ifmg-ink); width: 100%;
}
.ifmg-vehicle-search__field:focus { outline: none; border-color: var(--ifmg-blue); background: #fff; }
.ifmg-vehicle-search__make { font-weight: 700; display: flex; align-items: center; padding: .8rem 1rem; }
.ifmg-vehicle-search__go { border: 0; cursor: pointer; white-space: nowrap; }

/* ---- Editorial Card V2 (Contract 14): ONE editorial-card system, Story + News variants ----
   The shared base chrome is below; each variant adds only its deltas. Legacy `.ifmg-article-card`
   and `.ifmg-news-card` are retained as compatibility aliases of the base + their variant (zero
   visual change). The News variant's own block lives with the NewsFeed CSS further down. */
/* Article Grid V2 (Contract 14): ONE editorial-grid system arranging editorial cards (Story or News).
   Responsive 1 → 2 (--bp-sm 600) → 3 (--bp-lg 900) on a --space-* gap. Legacy `.ifmg-article-grid` and
   `.ifmg-news__list` are retained as compatibility aliases; the list-reset keeps the base safe on a <ul>. */
.ifmg-editorial-grid,
.ifmg-article-grid,
.ifmg-news__list {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: var(--space-6); grid-template-columns: 1fr; /* gap token = 1.5rem */
}
@media (min-width: 600px) { /* --bp-sm */
    .ifmg-editorial-grid, .ifmg-article-grid, .ifmg-news__list { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) { /* --bp-lg */
    .ifmg-editorial-grid, .ifmg-article-grid, .ifmg-news__list { grid-template-columns: repeat(3, 1fr); }
}
.ifmg-editorial-card,
.ifmg-article-card,
.ifmg-news-card {
    display: flex; flex-direction: column; background: var(--ifmg-surface);
    border: 1px solid var(--ifmg-border); border-radius: var(--ifmg-radius);
    box-shadow: var(--ifmg-shadow-sm); text-decoration: none; color: inherit;
    transition: transform .18s ease, box-shadow .18s ease;
}
/* Story variant — image-led teaser (clips media; larger hover lift). */
.ifmg-editorial-card--story, .ifmg-article-card { overflow: hidden; }
.ifmg-editorial-card--story:hover, .ifmg-article-card:hover { transform: translateY(-4px); box-shadow: var(--ifmg-shadow-lg); color: inherit; }
.ifmg-article-card__media { position: relative; aspect-ratio: 16 / 9; background: var(--ifmg-bg); overflow: hidden; }
.ifmg-article-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.ifmg-article-card:hover .ifmg-article-card__media img { transform: scale(1.04); }
.ifmg-article-card__body { padding: 1.1rem 1.25rem 1.35rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.ifmg-article-card__cat { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ifmg-primary); }
.ifmg-article-card__title { font-size: 1.15rem; font-weight: 700; margin: 0; line-height: 1.25; }
.ifmg-article-card__dek { margin: 0; color: var(--ifmg-ink-soft); font-size: .92rem; line-height: 1.5; }
.ifmg-article-card__byline { margin-top: auto; padding-top: .4rem; font-size: .82rem; color: var(--ifmg-muted); }

/* Rating badge + scorecard */
.ifmg-rating-badge { display: inline-flex; align-items: baseline; gap: .15rem; background: var(--ifmg-blue); color: #fff; border-radius: 999px; padding: .25rem .7rem; font-weight: 700; }
.ifmg-rating-badge .num { font-size: 1.05rem; } .ifmg-rating-badge .den { font-size: .75rem; opacity: .85; }
.ifmg-scorecard { display: grid; gap: .85rem; grid-template-columns: 1fr; max-width: 720px; }
@media (min-width: 600px) { .ifmg-scorecard { grid-template-columns: 1fr 1fr; } }
.ifmg-score-row { background: var(--ifmg-surface); border: 1px solid var(--ifmg-border); border-radius: var(--ifmg-radius-sm); padding: .85rem 1rem; }
.ifmg-score-row__head { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; margin-bottom: .4rem; }
.ifmg-score-row__score { color: var(--ifmg-blue); font-weight: 700; }
.ifmg-score-bar { height: 6px; border-radius: 3px; background: var(--ifmg-border); overflow: hidden; }
.ifmg-score-bar > span { display: block; height: 100%; background: var(--ifmg-blue); }

/* Highs / Lows / Verdict callout */
.ifmg-verdict { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .ifmg-verdict { grid-template-columns: 1fr 1fr; } }
.ifmg-verdict__col { background: var(--ifmg-surface); border: 1px solid var(--ifmg-border); border-radius: var(--ifmg-radius); padding: 1.25rem 1.5rem; }
/* Verdict V2: positive/negative via the semantic tokens (exact prior hex → zero visual change). */
.ifmg-verdict__col--highs { border-top: 4px solid var(--auto-positive); }
.ifmg-verdict__col--lows { border-top: 4px solid var(--auto-negative); }
/* Verdict V2: heading styled by CLASS (not tag) so the configurable heading level keeps its look at any level. */
.ifmg-verdict__col-title { display: flex; align-items: center; gap: .5rem; margin: 0 0 .75rem; font-size: 1.1rem; }
.ifmg-verdict__col--highs .ifmg-verdict__col-title { color: var(--auto-positive); } .ifmg-verdict__col--lows .ifmg-verdict__col-title { color: var(--auto-negative); }
.ifmg-verdict ul { margin: 0; padding-left: 1.1rem; } .ifmg-verdict li { margin-bottom: .4rem; color: var(--ifmg-ink-soft); }
.ifmg-verdict__summary { grid-column: 1 / -1; background: var(--ifmg-ink); color: #fff; border-radius: var(--ifmg-radius); padding: 1.5rem 1.75rem; }
.ifmg-verdict__summary-title { color: #fff; margin: 0 0 .5rem; }

/* Pros/cons verdict — the IdealBuyer + WhereItStruggles slices merged into one scannable two-column
   block (who it's for | where it struggles). Mirrors the highs/lows verdict visual language. */
.ifmg-proscons { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .ifmg-proscons { grid-template-columns: 1fr 1fr; } }
.ifmg-proscons__col { background: var(--ifmg-surface); border: 1px solid var(--ifmg-border); border-radius: var(--ifmg-radius); padding: 1.25rem 1.5rem; }
.ifmg-proscons__col--for { border-top: 4px solid #2e9e5b; }
.ifmg-proscons__col--against { border-top: 4px solid #cc4b37; }
.ifmg-proscons__col h3 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .75rem; font-size: 1.1rem; }
.ifmg-proscons__col--for h3 { color: #2e9e5b; }
.ifmg-proscons__col--against h3 { color: #cc4b37; }
.ifmg-proscons__lead { font-weight: 700; color: var(--ifmg-ink); margin: 0 0 .5rem; }
.ifmg-proscons__body { color: var(--ifmg-ink-soft); }
.ifmg-proscons__body p { margin: 0 0 .6rem; }
.ifmg-proscons__list { margin: 0; padding: 0; list-style: none; }
.ifmg-proscons__list li { margin-bottom: .7rem; }
.ifmg-proscons__list li:last-child { margin-bottom: 0; }
.ifmg-proscons__list strong { display: block; color: var(--ifmg-ink); }
.ifmg-proscons__list span { display: block; color: var(--ifmg-ink-soft); margin-top: .15rem; font-size: .95rem; }

/* =====================================================================
   Operator-arranged layout: responsive 12-column rows + width/bg/padding.
   Adjacent sections sharing a rowKey are wrapped by PageLayoutAssembler in
   .ifmg-row > .ifmg-col[--span]; full-width bands may get .ifmg-secwrap.
   ===================================================================== */
.ifmg-row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2.5rem 1.25rem;
    align-items: stretch;
}
.ifmg-col { grid-column: span var(--span, 12); min-width: 0; }
@media (max-width: 768px) { .ifmg-col { grid-column: 1 / -1; } }

/* Inside a column, drop the full-width band chrome so each section sits as a grid cell. */
.ifmg-col section.ifmg-section { padding-top: 0; padding-bottom: 0; border-top: 0; }
.ifmg-col .ifmg-container,
.ifmg-col .ifmg-container--wide,
.ifmg-col .ifmg-container--narrow { max-width: none; padding-left: 0; padding-right: 0; margin: 0; }
.ifmg-col .ifmg-hero { min-height: 0; padding: 2.5rem; border-radius: var(--ifmg-radius); }

/* Width presets (full-width bands) */
.ifmg-w-narrow .ifmg-container { max-width: 640px; }
.ifmg-w-wide .ifmg-container { max-width: 1100px; }
.ifmg-w-full .ifmg-container { max-width: none; }

/* Background presets — applied to a column cell or a band wrapper */
.ifmg-bg-surface { background: var(--ifmg-surface); }
.ifmg-bg-muted { background: var(--ifmg-bg); }
.ifmg-bg-ink { background: var(--ifmg-ink); }
.ifmg-bg-ink, .ifmg-bg-ink h1, .ifmg-bg-ink h2, .ifmg-bg-ink h3, .ifmg-bg-ink p, .ifmg-bg-ink li { color: #fff; }
.ifmg-bg-surface > section.ifmg-section,
.ifmg-bg-muted > section.ifmg-section,
.ifmg-bg-ink > section.ifmg-section { background: transparent; }
.ifmg-col.ifmg-bg-surface, .ifmg-col.ifmg-bg-muted, .ifmg-col.ifmg-bg-ink { border-radius: var(--ifmg-radius); padding: 1.75rem; }

/* Padding presets (full-width bands) */
.ifmg-pad-none > section.ifmg-section { padding-top: 0; padding-bottom: 0; }
.ifmg-pad-sm > section.ifmg-section { padding-top: 1.75rem; padding-bottom: 1.75rem; }
.ifmg-pad-lg > section.ifmg-section { padding-top: 7rem; padding-bottom: 7rem; }

/* =====================================================================
   v3 design pass — premium hero, accent CTAs, sharper type + rhythm.
   Roles come from the theme map: --ifmg-primary / --ifmg-secondary /
   --ifmg-accent (+ --ifmg-accent-text). Appended last so it wins.
   ===================================================================== */

/* ---- Type + rhythm ---- */
h1, h2 { font-weight: 800; letter-spacing: -.02em; }
.ifmg-section-head { margin-bottom: 2.75rem; }
.ifmg-section-head h2 { font-size: clamp(1.85rem, 2.8vw, 2.6rem); }
.ifmg-eyebrow { font-size: .82rem; letter-spacing: .12em; }

/* ---- Hero: premium branded banner ---- */
.ifmg-hero {
    position: relative;
    min-height: 50vh;
    padding: var(--space-16) var(--space-5); /* Hero V2: tokens = 4rem 1.25rem (exact; zero visual change) */
    display: flex; align-items: center;
    color: #fff;
    background: linear-gradient(115deg,
        color-mix(in srgb, var(--ifmg-primary) 94%, #000) 0%,
        color-mix(in srgb, var(--ifmg-secondary) 70%, #000) 100%);
    overflow: hidden;
    isolation: isolate;
}
.ifmg-hero::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    /* Brand accent glow only — no left dark wash. */
    background:
        radial-gradient(70% 110% at 100% 0%, color-mix(in srgb, var(--ifmg-accent) 26%, transparent), transparent 55%);
}
.ifmg-hero::after {
    content: ""; position: absolute; inset: 0; z-index: -1; opacity: .55;
    background: repeating-linear-gradient(115deg, rgba(255,255,255,.045) 0 2px, transparent 2px 10px);
    pointer-events: none;
}
.ifmg-hero > .ifmg-container { position: relative; z-index: 1; max-width: 1100px; width: 100%; }
.ifmg-hero .ifmg-eyebrow {
    /* Lighten off the raw accent so the eyebrow reads on ANY hero — some makes (e.g. Kia) resolve an
       accent equal to their secondary, which is the hero scrim colour, making a raw-accent eyebrow
       vanish. The saturated accent stays on the leading bar below for brand pop. */
    color: color-mix(in srgb, var(--ifmg-accent) 58%, #fff);
    text-shadow: 0 1px 2px rgba(0,0,0,.45);
    display: inline-flex; align-items: center; gap: .6rem; margin-bottom: var(--space-3); /* =.75rem */
}
.ifmg-hero .ifmg-eyebrow::before { content: ""; width: 30px; height: 2px; background: var(--ifmg-accent); }
/* Hero V2 — Support / Ownership variant: DEFINED now, consumed once the Ownership blueprint exists (WS5).
   Calmer than the flagship — shorter, softened accent glow. Inert today (no blueprint emits "Support"). */
.ifmg-hero--support { min-height: 34vh; }
.ifmg-hero--support::before { opacity: .5; }
.ifmg-hero h1,
.ifmg-hero .ifmg-hero__heading {
    color: #fff; font-weight: 800; letter-spacing: -.025em;
    font-size: clamp(2.6rem, 5.2vw, 4.25rem); line-height: 1.03;
    margin: 0 0 1.1rem; max-width: 18ch;
    text-shadow: 0 2px 30px rgba(0,0,0,.22);
}
.ifmg-hero .ifmg-subtitle {
    color: rgba(255,255,255,.9); font-size: clamp(1.05rem, 1.5vw, 1.3rem);
    max-width: 50ch; margin: 0; line-height: 1.55;
}
.ifmg-hero .ifmg-btn {
    margin-top: 2.25rem;
    background: var(--ifmg-accent); color: var(--ifmg-accent-text); border-color: var(--ifmg-accent);
    padding: 1rem 1.9rem; font-size: 1.02rem; font-weight: 700; border-radius: var(--ifmg-radius-sm);
    box-shadow: 0 12px 30px -10px color-mix(in srgb, var(--ifmg-accent) 65%, transparent);
}
.ifmg-hero .ifmg-btn:hover {
    background: var(--ifmg-orange-dark); border-color: var(--ifmg-orange-dark);
    color: var(--ifmg-accent-text); transform: translateY(-2px);
}

/* ---- Hero photo: the full vehicle parked in the right zone, copy over a clean left zone ---- */
.ifmg-hero--has-photo .ifmg-hero__photo {
    position: absolute; inset: 0; z-index: 0;
    /* Full-bleed lifestyle photo — the image IS the hero (no panel/box, no split). A soft integrated
       scrim (below) keeps the copy readable while the photo stays immersive edge to edge. */
    background-size: cover;
    background-position: 60% center;
    background-repeat: no-repeat;
}
/* Scrim ABOVE the photo. A left→right wash darkens the copy side (text-safe zone) enough for AA
   white-text contrast on BRIGHT Hybrid-Hero imagery, fading to transparent before the vehicle on the
   right; plus a subtle bottom grade to ground the image. (Hero Media Contract §5: text-safe zone.) */
.ifmg-hero--has-photo::after {
    background:
        linear-gradient(to right, rgba(0,0,0,.58) 0%, rgba(0,0,0,.36) 28%, rgba(0,0,0,.12) 50%, transparent 68%),
        repeating-linear-gradient(115deg, rgba(255,255,255,.04) 0 2px, transparent 2px 10px),
        linear-gradient(to bottom, rgba(0,0,0,.16) 0%, transparent 26%, transparent 58%, rgba(0,0,0,.42) 100%);
    opacity: 1; z-index: 0;
}
@media (max-width: 767px) {
    /* Shorter hero so the fact bar starts sooner; copy in the top band, vehicle in the lower band.
       Tighter padding + slightly trimmed headline/subtitle/CTA spacing pull the fact bar up another
       ~15% without changing the copy hierarchy. */
    /* Same overall height, but redistribute: trim outer padding and give the stack room to breathe. */
    /* Nudge the copy up (smaller top pad) and left (smaller left pad). No bottom margin — the dark
       stats block butts directly against the hero (no light spacer). CTA only moves up, never down. */
    .ifmg-hero { min-height: 0 !important; padding: .6rem 1.25rem 2.5rem .4rem !important; margin-bottom: 0; }
    .ifmg-hero h1, .ifmg-hero .ifmg-hero__heading { font-size: 1.5rem !important; line-height: 1.05 !important; margin-bottom: .6rem; text-shadow: 0 1px 12px rgba(0,0,0,.55); }
    .ifmg-hero .ifmg-eyebrow { font-size: .68rem; margin-bottom: .5rem; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
    .ifmg-hero .ifmg-subtitle { font-size: .82rem; line-height: 1.45; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
    .ifmg-hero .ifmg-btn { margin-top: .9rem; padding: .65rem 1.25rem; font-size: .88rem; }
    .ifmg-hero__dots { margin-top: .5rem; }
    /* Fact bar (only the section holding .auto-specs — other sections untouched): collapse the 4rem
       section padding so more stats sit above the fold. (Grid gap/icon tightening lives after the
       base .auto-specs rule below, so it wins on source order.) */
    section.ifmg-section:has(.auto-specs) { padding-top: .6rem; padding-bottom: .6rem; }
    /* Pull the ad up: collapse the ad section's 4rem padding (the blank space before it). */
    section.ifmg-section:has(.auto-ad) { padding-top: .15rem; padding-bottom: .1rem; }
    /* Pull the Explore (trims) section up toward the ad (the gap is the .ifmg-row's 2.5rem top
       padding) and tighten the title->first-card gap (~half). */
    .ifmg-row:has(.ifmg-trimgrid) { padding-top: 0; }
    section.ifmg-section:has(.ifmg-trimgrid) .ifmg-section-head { margin-bottom: .15rem; }
    /* Explore reads as a section H2, not a second H1 — clearly subordinate to the hero headline. */
    section.ifmg-section:has(.ifmg-trimgrid) .ifmg-section-head h2 { font-size: 1.3rem; }
    /* Pull the wide car image up inside the card (inline style letterboxes it 16/9 contain): shorten
       the media box and top-align the image so the vehicle sits right under the heading. */
    section.ifmg-section:has(.ifmg-trimgrid) .ifmg-trimcard__media { aspect-ratio: 16 / 7; }
    section.ifmg-section:has(.ifmg-trimgrid) .ifmg-trimcard__media img { object-fit: cover; object-position: center; }
    /* On phones the copy stacks over the full width, so the photo can't live on one side —
       cover the frame but anchor LOW so the grille/front fascia sits below the copy, not under it. */
    .ifmg-hero--has-photo .ifmg-hero__photo {
        -webkit-mask-image: none;
                mask-image: none;
        background-size: cover;
        background-position: center 78%;
        opacity: .8;
    }
    .ifmg-hero--has-photo::after {
        /* Light, short scrim confined to the top text zone — no colored fog; the photo carries the
           visual weight and the vehicle stays clearly visible below. Text contrast via text-shadow. */
        background: linear-gradient(to bottom,
            rgba(0,0,0,.52) 0%, rgba(0,0,0,.3) 24%, rgba(0,0,0,.08) 46%, transparent 60%);
    }
}

/* Rotating hero: stacked photo layers that crossfade. site.js moves the .is-active class on a
   timer; CSS does the fade. Each layer inherits cover/position from the base photo rule above. */
.ifmg-hero--has-photo .ifmg-hero__photos { position: absolute; inset: 0; z-index: 0; }
.ifmg-hero--has-photo .ifmg-hero__photos .ifmg-hero__photo {
    opacity: 0;
    transition: opacity .9s ease-in-out;
}
.ifmg-hero--has-photo .ifmg-hero__photos .ifmg-hero__photo.is-active { opacity: 1; }
@media (max-width: 767px) {
    /* Full-strength photo on mobile so the vehicle reads first; the light scrim above handles text. */
    .ifmg-hero--has-photo .ifmg-hero__photos .ifmg-hero__photo { opacity: 0; }
    .ifmg-hero--has-photo .ifmg-hero__photos .ifmg-hero__photo.is-active { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    /* No fade animation; site.js also leaves rotation off, so the first image stays put. */
    .ifmg-hero--has-photo .ifmg-hero__photos .ifmg-hero__photo { transition: none; }
}

/* Per-slide hero captions: stacked in one grid cell so the container sizes to the tallest slide;
   each crossfades with its photo (site.js toggles .is-active on both in lockstep). */
.ifmg-hero__slides { display: grid; }
.ifmg-hero__slides > .ifmg-hero__slide {
    grid-area: 1 / 1;
    opacity: 0;
    pointer-events: none;          /* stacked inactive slides must not intercept hover/click on the active slide's CTAs */
    transition: opacity .9s ease-in-out;
}
.ifmg-hero__slides > .ifmg-hero__slide.is-active { opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
    .ifmg-hero__slides > .ifmg-hero__slide { transition: none; }
}

/* ---- Rotating hero: UX + a11y controls (prev/next, dot pager, pause, mobile crop) ---- */
.ifmg-hero { position: relative; }
.ifmg-hero__nav {
    position: absolute; inset: 0; z-index: 2; pointer-events: none;
    display: flex; align-items: center; justify-content: space-between; padding: 0 .75rem;
}
.ifmg-hero__arrow {
    pointer-events: auto; width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; line-height: 1; font-size: 1.25rem;
    background: rgba(0,0,0,.4); color: #fff; transition: background .15s ease;
}
.ifmg-hero__arrow:hover { background: rgba(0,0,0,.65); }
.ifmg-hero__dots {
    position: absolute; left: 0; right: 0; bottom: 1rem; z-index: 2;
    display: flex; gap: .5rem; justify-content: center;
}
.ifmg-hero__dot {
    width: 10px; height: 10px; padding: 0; border-radius: 50%; cursor: pointer;
    border: 1px solid rgba(255,255,255,.85); background: rgba(255,255,255,.35);
    transition: background .15s ease, transform .15s ease;
}
.ifmg-hero__dot.is-active { background: #fff; transform: scale(1.15); }
.ifmg-hero__pause {
    position: absolute; right: 1rem; bottom: 1rem; z-index: 2; width: 34px; height: 34px;
    border: 0; border-radius: 50%; cursor: pointer; background: rgba(0,0,0,.4); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
}
.ifmg-hero__pause:hover { background: rgba(0,0,0,.65); }
.ifmg-hero__arrow:focus-visible,
.ifmg-hero__dot:focus-visible,
.ifmg-hero__pause:focus-visible { outline: 3px solid var(--ifmg-accent); outline-offset: 2px; }
.ifmg-visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (max-width: 767px) {
    /* Art-directed mobile crop: layers that carry a --hero-mobile swap to it below the breakpoint. */
    .ifmg-hero--has-photo .ifmg-hero__photos .ifmg-hero__photo[data-mobile] {
        background-image: var(--hero-mobile) !important;
    }
    .ifmg-hero__arrow { width: 38px; height: 38px; font-size: 1.1rem; }
    .ifmg-hero__pause { display: none; } /* dots + swipe are enough on touch */
    /* Drop the dot pager toward the bottom edge so it clears the CTA (after the base rule, wins). */
    .ifmg-hero__dots { bottom: .4rem; }
}

/* Re-assert the light hero variants so the dark base above doesn't bleed into them. */
.ifmg-hero--centered, .ifmg-hero--image-left {
    background: var(--ifmg-bg); color: var(--ifmg-ink); min-height: auto;
}
.ifmg-hero--centered::before, .ifmg-hero--centered::after,
.ifmg-hero--image-left::before, .ifmg-hero--image-left::after { display: none; }
.ifmg-hero--centered h1, .ifmg-hero--image-left h1 { color: var(--ifmg-ink); text-shadow: none; }
.ifmg-hero--centered .ifmg-subtitle, .ifmg-hero--image-left .ifmg-subtitle { color: var(--ifmg-ink-soft); }
.ifmg-hero--centered .ifmg-eyebrow, .ifmg-hero--image-left .ifmg-eyebrow { color: var(--ifmg-primary); }
.ifmg-hero--centered .ifmg-eyebrow::before, .ifmg-hero--image-left .ifmg-eyebrow::before { background: var(--ifmg-primary); }

/* ---- Buttons: primary action ---- */
.ifmg-btn { font-weight: 700; padding: .9rem 1.5rem; }

/* ---- Search bar: lift it over the hero seam, accent submit ---- */
.ifmg-search-section { background: var(--ifmg-bg); }
.ifmg-vehicle-search {
    border: 0; box-shadow: var(--ifmg-shadow-lg); padding: 1.75rem; border-radius: var(--ifmg-radius-lg);
    margin-top: -4rem; position: relative; z-index: 3;
}
.ifmg-vehicle-search__title { font-size: 1.3rem; margin-bottom: 1.1rem; }
.ifmg-vehicle-search__field { padding: .95rem 1.05rem; font-size: 1rem; }
.ifmg-vehicle-search__go {
    background: var(--ifmg-accent); color: var(--ifmg-accent-text); border-color: var(--ifmg-accent);
    padding: .95rem 1.75rem; font-weight: 700;
}
.ifmg-vehicle-search__go:hover { background: var(--ifmg-orange-dark); color: var(--ifmg-accent-text); }

/* ---- Cards: keep mismatched source photos reading as a set ---- */
.ifmg-vehicle-card__media, .ifmg-article-card__media {
    background: #fff;
}
.ifmg-vehicle-card__media img, .ifmg-article-card__media img { object-fit: cover; }
.ifmg-vehicle-card__title { font-size: 1.25rem; }
.ifmg-vehicle-card__meta { color: var(--ifmg-primary); }

/* ---- Body-style tiles: accent on hover, crisper ---- */
.ifmg-bodystyle-tile { padding: 1.6rem 1rem; }
.ifmg-bodystyle-tile__icon { color: var(--ifmg-primary); }
.ifmg-bodystyle-tile:hover {
    border-color: color-mix(in srgb, var(--ifmg-accent) 55%, transparent);
}
.ifmg-bodystyle-tile:hover .ifmg-bodystyle-tile__icon { color: var(--ifmg-accent); }

/* ---- Vertical rhythm: tighter, band-separated sections ---- */
/* Section padding (4rem 0) is set once near the top of this file; this pass only adjusts the
   band-separator rule below. Bands + spacing separate sections now, so drop the hairline dividers. */
.ifmg-section + .ifmg-section { border-top: 0; }
/* The search card is pulled up over the hero seam (-4rem); trim the surrounding padding so the
   overlap doesn't open a tall void before the first content section. */
.ifmg-search-section { padding-bottom: 2.25rem; }
.ifmg-search-section + .ifmg-section { padding-top: 2.5rem; }

/* ---- Editorial intro / rich text: a deliberate lead block, not floating body copy ---- */
.ifmg-richtext { max-width: 720px; margin-inline: auto; color: var(--ifmg-ink-soft); }
.ifmg-richtext > :first-child { margin-top: 0; }
.ifmg-richtext > :last-child { margin-bottom: 0; }
.ifmg-richtext p { font-size: 1.07rem; line-height: 1.7; margin: 0 0 1.1rem; }
.ifmg-richtext > p:first-of-type {
    font-size: clamp(1.2rem, 1.7vw, 1.45rem); line-height: 1.55;
    color: var(--ifmg-ink); font-weight: 500;
}
/* A standalone rich-text block reads as a clean white editorial band between the tinted card
   bands above and below it — the alternation gives the page rhythm instead of one flat field. */
.ifmg-section:has(> .ifmg-container > .ifmg-richtext) { background: var(--ifmg-surface); }

/* ---- Pull-quotes & spec callouts: branded emphasis inside prose. A <blockquote> in any generated
        body (overview, rich text, FAQ answer) renders as a left-accent pull-quote; an explicit
        .ifmg-callout makes a tinted spec/info box. Render-time styling, so any template's prose can
        use them with no generation change — this is the "allow pull-quotes/spec callouts" remainder. */
.ifmg-section blockquote, .ifmg-pullquote {
    margin: 1.75rem 0; padding: .1rem 0 .1rem 1.4rem;
    border-left: 4px solid var(--ifmg-accent);
    font-size: clamp(1.2rem, 1.8vw, 1.5rem); line-height: 1.5;
    font-weight: 600; font-style: normal; color: var(--ifmg-ink);
}
.ifmg-section blockquote > :first-child, .ifmg-pullquote > :first-child { margin-top: 0; }
.ifmg-section blockquote > :last-child, .ifmg-pullquote > :last-child { margin-bottom: 0; }
.ifmg-section blockquote cite, .ifmg-pullquote cite {
    display: block; margin-top: .55rem;
    font-size: .9rem; font-weight: 600; font-style: normal; color: var(--ifmg-muted);
}
.ifmg-callout {
    margin: 1.5rem 0; padding: 1.05rem 1.3rem;
    border-radius: var(--ifmg-radius); background: var(--ifmg-bg);
    border: 1px solid var(--ifmg-border); border-left: 4px solid var(--ifmg-primary);
    color: var(--ifmg-ink-soft);
}
.ifmg-callout > :first-child { margin-top: 0; }
.ifmg-callout > :last-child { margin-bottom: 0; }
.ifmg-callout strong, .ifmg-callout b { color: var(--ifmg-ink); }

/* ---- "Keep exploring" internal link list (generated guides / research next-steps). Golden
        primary-coloured links; existing platform URLs only (dangling ones are suppressed upstream). ---- */
.ifmg-link-list { list-style: none; margin: 0 auto; padding: 0; max-width: 720px; display: grid; gap: .55rem; }
.ifmg-link-list li { margin: 0; }
.ifmg-link-list a {
    display: inline-flex; align-items: baseline; gap: .5rem;
    font-weight: 600; color: var(--ifmg-primary); text-decoration: none;
}
.ifmg-link-list a::before { content: "\2192"; color: var(--ifmg-accent); font-weight: 700; }
.ifmg-link-list a:hover { text-decoration: underline; }

/* ---- Body-style grid: center tiles so a short lineup (2–3) fills the row gracefully instead
        of stranding a couple of tiles against the left edge ---- */
.ifmg-bodystyle-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.ifmg-bodystyle-tile { flex: 1 1 150px; max-width: 220px; }

/* ---- Featured-model spotlight: one flagship vehicle, large photo + pitch + CTA ---- */
.ifmg-spotlight-section { background: var(--ifmg-surface); }
.ifmg-spotlight { display: grid; gap: 2.5rem; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 860px) { .ifmg-spotlight { grid-template-columns: 1.12fr .88fr; } }
.ifmg-spotlight__media {
    border-radius: var(--ifmg-radius-lg); overflow: hidden; background: #fff; box-shadow: var(--ifmg-shadow-lg);
}
.ifmg-spotlight__media img { width: 100%; height: 100%; display: block; object-fit: cover; aspect-ratio: 16 / 10; }
.ifmg-spotlight__title { font-size: clamp(2rem, 3.4vw, 3rem); margin: .25rem 0 .4rem; }
.ifmg-spotlight__meta { color: var(--ifmg-primary); font-weight: 600; margin-bottom: .8rem; }
.ifmg-spotlight__lead {
    color: var(--ifmg-ink-soft); font-size: 1.1rem; line-height: 1.6; max-width: 46ch; margin: 0 0 1.75rem;
}

/* ---- Article card: branded fallback when a story has no hero photo (no "Photo coming soon") ---- */
.ifmg-article-fallback {
    width: 100%; height: 100%; min-height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
    color: #fff; text-align: center; padding: 1rem;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--ifmg-primary) 92%, #000) 0%,
        color-mix(in srgb, var(--ifmg-secondary) 65%, #000) 100%);
}
.ifmg-article-fallback i { font-size: 1.9rem; opacity: .85; }
.ifmg-article-fallback__cat {
    font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
    color: var(--ifmg-accent);
}

/* ---- Stats band: catalog "by the numbers" credibility strip ---- */
.ifmg-statsband-section { background: var(--ifmg-surface); }
.ifmg-statsband {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch;
    gap: 1rem 0;
}
.ifmg-stat {
    flex: 1 1 160px; min-width: 140px; max-width: 260px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: .5rem 1.5rem;
}
.ifmg-stat + .ifmg-stat { border-left: 1px solid var(--ifmg-border); }
.ifmg-stat__num {
    font-weight: 800; letter-spacing: -.02em; line-height: 1;
    font-size: clamp(2.2rem, 4vw, 3.25rem); color: var(--ifmg-primary);
}
.ifmg-stat__label {
    margin-top: .5rem; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
    font-weight: 700; color: var(--ifmg-muted);
}
@media (max-width: 560px) { .ifmg-stat + .ifmg-stat { border-left: 0; } }

/* ---- Trust bar: social proof + reassurance (rating + trust points) ---- */
.ifmg-trustbar-section { background: var(--ifmg-surface); }
.ifmg-trustbar__heading {
    text-align: center; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase;
    font-weight: 700; color: var(--ifmg-muted); margin-bottom: 1.5rem;
}
.ifmg-trustbar {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: 1.25rem 2.5rem;
}
.ifmg-trust-rating { display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.ifmg-trust-rating__stars { color: var(--ifmg-accent); font-size: 1.15rem; letter-spacing: .1rem; }
.ifmg-trust-rating__meta { font-weight: 700; color: var(--ifmg-ink); font-size: .95rem; }
.ifmg-trust-item {
    display: inline-flex; align-items: center; gap: .6rem;
    color: var(--ifmg-ink); font-weight: 600; font-size: .98rem;
}
.ifmg-trust-item i { color: var(--ifmg-primary); font-size: 1.25rem; }
@media (min-width: 768px) {
    .ifmg-trust-item + .ifmg-trust-item,
    .ifmg-trust-rating + .ifmg-trust-item { position: relative; }
}

/* ---- Financing trust: the fintech reassurance band (dark, accent CTA) ---- */
.ifmg-financing-section {
    background: linear-gradient(115deg,
        color-mix(in srgb, var(--ifmg-primary) 94%, #000) 0%,
        color-mix(in srgb, var(--ifmg-secondary) 70%, #000) 100%);
    color: #fff;
}
.ifmg-financing { display: grid; gap: 2.5rem; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 860px) { .ifmg-financing { grid-template-columns: 1.1fr .9fr; } }
.ifmg-financing__copy .ifmg-eyebrow { color: color-mix(in srgb, var(--ifmg-accent) 60%, #fff); }
.ifmg-financing__copy h2 { color: #fff; }
.ifmg-financing__body { color: rgba(255,255,255,.88); font-size: 1.08rem; line-height: 1.6; max-width: 48ch; }
.ifmg-financing__cta {
    margin-top: 1.5rem; background: var(--ifmg-accent); color: var(--ifmg-accent-text);
    border-color: var(--ifmg-accent); padding: 1rem 1.9rem; font-weight: 700;
}
.ifmg-financing__cta:hover { background: var(--ifmg-orange-dark); color: var(--ifmg-accent-text); transform: translateY(-1px); }
.ifmg-financing__points { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.ifmg-financing__points li { display: flex; align-items: center; gap: .75rem; font-weight: 600; }
.ifmg-financing__points i { color: var(--ifmg-accent); font-size: 1.25rem; flex: none; }

/* ---- Dealer credibility: real-business presence (about + facts) ---- */
.ifmg-dealer-section { background: var(--ifmg-surface); }
.ifmg-dealer { display: grid; gap: 2rem; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 860px) { .ifmg-dealer { grid-template-columns: 1.2fr .8fr; } }
.ifmg-dealer__body { color: var(--ifmg-ink-soft); font-size: 1.07rem; line-height: 1.7; max-width: 52ch; margin: .5rem 0 0; }
.ifmg-dealer__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.ifmg-dealer__facts li { display: flex; align-items: center; gap: .85rem; color: var(--ifmg-ink); font-weight: 600; }
.ifmg-dealer__facts i { color: var(--ifmg-primary); font-size: 1.35rem; flex: none; }

/* =====================================================================
   Footer: structured, multi-column site footer. An accent top-border gives
   a crisp seam so the footer never merges into a dark CTA band above it
   (both can resolve to the same ink), and the layout breaks into a brand +
   contact column and a links column instead of one cramped left-aligned row.
   Colors come from the page's inline theme (footerBg / footerText), so this
   stays palette-agnostic — borders use currentColor mixes, not fixed values.
   ===================================================================== */
.site-footer { margin-top: 0; }
.ifmg-footer {
    display: grid; gap: 2.5rem 3.5rem; grid-template-columns: 1fr;
    padding: 3.75rem 1.25rem 2.75rem;
    border-top: 3px solid var(--ifmg-accent);
}
@media (min-width: 768px) { .ifmg-footer { grid-template-columns: 1.6fr 1fr; } }
.ifmg-footer__name { font-weight: 800; font-size: 1.3rem; letter-spacing: -.01em; display: inline-block; }
.ifmg-footer__brand img { height: 42px; width: auto; display: block; }
.ifmg-footer__about { margin: 1rem 0 0; max-width: 44ch; opacity: .82; font-size: .94rem; line-height: 1.65; }
.ifmg-footer__contact { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: .6rem; font-size: .92rem; }
.ifmg-footer__contact li { display: flex; align-items: flex-start; gap: .65rem; opacity: .85; }
.ifmg-footer__contact i { opacity: .85; margin-top: .12rem; flex: none; }
.ifmg-footer__contact a { opacity: 1; }
.ifmg-footer__col-title {
    font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
    font-weight: 700; opacity: .6; margin-bottom: 1.1rem;
}
.ifmg-footer__links { display: flex; flex-direction: column; gap: .75rem; align-items: flex-start; }
.ifmg-footer__links a { font-size: .98rem; opacity: .85; }
.ifmg-footer__links a:hover { opacity: 1; }
.ifmg-footer__bar { border-top: 1px solid color-mix(in srgb, currentColor 16%, transparent); }
.ifmg-footer__bar > div {
    display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between; align-items: center;
    padding: 1.4rem 1.25rem; font-size: .85rem; opacity: .72;
}
.ifmg-footer__powered { display: inline-flex; align-items: center; gap: .4rem; }

/* =====================================================================
   D2 — band rhythm. Mid-page, consecutive same-coloured bands (e.g.
   statsband + spotlight, both surface) merged into one flat field. Two fixes:
   (1) the editorial rich-text band drops to the muted tint so it actively
   alternates with the surface bands around it; (2) every surface band carries
   a hairline top edge so a RUN of surface bands still reads as distinct bands
   instead of one block — the line is invisible against a dark/tinted neighbour,
   so it only does work where two light bands meet.
   ===================================================================== */
.ifmg-section:has(> .ifmg-container > .ifmg-richtext) { background: var(--ifmg-bg); }
/* A faint hairline between every pair of adjacent bands. Declared after the v3
   ".ifmg-section + .ifmg-section { border-top: 0 }" (same specificity) so it wins. It only does
   visible work where two same-coloured bands meet (white↔white, tint↔tint); across a colour change
   or against a dark band it's imperceptible. The column-layout reset (.ifmg-col section) is more
   specific, so grid cells keep their seamless edges. */
.ifmg-section + .ifmg-section {
    border-top: 1px solid color-mix(in srgb, var(--ifmg-border) 65%, transparent);
}

/* =====================================================================
   D4 — wayfinding: active-page nav state + a persistent search affordance.
   ===================================================================== */
/* Current page: keep the hover underline permanently on and brighten the label. */
.ifmg-topnav > a.is-active::after { opacity: .9; transform: scaleX(1); }
.ifmg-topnav > a.is-active { opacity: 1; }
/* Active item when collapsed into the overflow menu. */
.ifmg-topnav .ifmg-topnav__menu a.is-active { background: var(--ifmg-bg); font-weight: 600; }

/* Search button — a persistent, explicitly-labelled entry to the inventory/search page. Styled as a
   pill button (not a bare magnifier, which would imply a text field) and inheriting the header text
   colour so it reads on any themed header bar. The label hides on narrow headers, leaving the icon. */
.ifmg-topbar__search {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    height: 38px; padding: 0 .85rem; border-radius: 999px; flex: 0 0 auto;
    border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
    color: inherit; opacity: .9; text-decoration: none;
    font-size: .85rem; font-weight: 600; white-space: nowrap;
    transition: background .15s ease, opacity .15s ease, border-color .15s ease;
}
.ifmg-topbar__search i { font-size: 1rem; }
.ifmg-topbar__search:hover {
    opacity: 1;
    background: color-mix(in srgb, currentColor 14%, transparent);
    border-color: color-mix(in srgb, currentColor 55%, transparent);
}
/* Below the priority-plus breakpoint, collapse to an icon-only round button to save the row. */
@media (max-width: 575.98px) {
    .ifmg-topbar__search { width: 38px; padding: 0; gap: 0; }
    .ifmg-topbar__search-label { display: none; }
}

/* =====================================================================
   E-E-A-T — visible author bio on editorial/vehicle pages. Authorship was
   only in JSON-LD; this surfaces it for readers (and reinforces the schema).
   ===================================================================== */
.ifmg-authorbio-section { background: var(--ifmg-surface); }
.ifmg-author {
    display: flex; align-items: center; gap: 1.1rem;
    max-width: 720px; margin: 0 auto;
    background: var(--ifmg-bg); border: 1px solid var(--ifmg-border);
    border-radius: var(--ifmg-radius); padding: 1.25rem 1.4rem;
}
.ifmg-author__photo { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.ifmg-author__eyebrow {
    font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
    font-weight: 700; color: var(--ifmg-muted); margin-bottom: .15rem;
}
.ifmg-author__name { font-weight: 800; font-size: 1.1rem; color: var(--ifmg-ink); }
.ifmg-author__title { color: var(--ifmg-ink-soft); font-size: .92rem; margin-top: .1rem; }
.ifmg-author__link { display: inline-block; margin-top: .5rem; font-weight: 600; font-size: .9rem; color: var(--ifmg-primary); }

/* Compact author byline under the H1 on review/editorial pages (the full bio still sits at the foot).
   Sits tight to the headline above it; small photo + "By {name}" + credentials + recency date. */
.ifmg-byline-section { padding-top: .35rem; padding-bottom: 0; }
.ifmg-byline { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.ifmg-byline__photo { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.ifmg-byline__text { font-size: .95rem; color: var(--ifmg-ink-soft); display: inline-flex; flex-wrap: wrap; align-items: center; gap: .15rem .55rem; }
.ifmg-byline__by { color: var(--ifmg-muted); }
.ifmg-byline__name { font-weight: 700; color: var(--ifmg-ink); text-decoration: none; }
a.ifmg-byline__name:hover { color: var(--ifmg-primary); text-decoration: underline; }
/* Credentials and date are secondary; separate them from the name with a dot leader. */
.ifmg-byline__title::before,
.ifmg-byline__date::before { content: "·"; color: var(--ifmg-muted); margin-right: .5rem; }
.ifmg-byline__title, .ifmg-byline__date { color: var(--ifmg-muted); }

/* AX-D3: standalone "Updated {date}" freshness stamp under the H1 on content pages without a byline. */
.ifmg-updated-section { padding-top: .35rem; padding-bottom: 0; }
.ifmg-updated { margin: 0; font-size: .9rem; color: var(--ifmg-muted); }

/* AX-D5: public author profile page (/authors/{slug}). */
.ifmg-authorprofile__head { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.ifmg-authorprofile__photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.ifmg-authorprofile__name { margin: .1rem 0 .2rem; }
.ifmg-authorprofile__title { color: var(--ifmg-muted); font-weight: 600; }
.ifmg-authorprofile__social { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: .5rem; }
.ifmg-authorprofile__social a { color: var(--ifmg-primary); font-weight: 600; font-size: .9rem; text-decoration: none; }
.ifmg-authorprofile__social a:hover { text-decoration: underline; }
.ifmg-authorprofile__bio { max-width: 70ch; color: var(--ifmg-ink-soft); }
.ifmg-authorprofile__articles { margin-top: 1.75rem; }
.ifmg-authorprofile__articles h2 { font-size: 1.15rem; margin-bottom: .6rem; }
.ifmg-authorprofile__articles ul { padding-left: 1.1rem; }
.ifmg-authorprofile__articles li { margin-bottom: .35rem; }

/* =====================================================================
   Answer-engine TL;DR — a concise "short answer" block under the hero, marked
   .aeo-tldr/.aeo-answer (the SpeakableSpecification's selectors) so assistants
   and featured snippets can lift a clean answer. A left accent bar ties it to
   the brand without competing with the H1.
   ===================================================================== */
.ifmg-tldr-section { background: var(--ifmg-surface); }
.ifmg-tldr {
    max-width: 760px; margin: 0 auto;
    border-left: 4px solid var(--ifmg-accent);
    background: var(--ifmg-bg); border-radius: 0 var(--ifmg-radius) var(--ifmg-radius) 0;
    padding: 1.1rem 1.4rem;
}
.ifmg-tldr__label {
    display: block; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
    font-weight: 700; color: var(--ifmg-muted); margin-bottom: .35rem;
}
.ifmg-tldr .aeo-answer { margin: 0; font-size: 1.1rem; line-height: 1.55; color: var(--ifmg-ink); font-weight: 500; }

/* Model "Starting at $X" band — shown when no synthesized hero carried the price, so the marked-up
   Offer price is always visible to the reader. */
.ifmg-startprice-section { padding-top: .75rem; padding-bottom: 0; }
.ifmg-startprice { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--ifmg-ink); }

/* "Specs at a glance" grid on trim pages — scannable key/value tiles from the trim's spec sheet. */
/* Feature Breakdown — six category navigation cards (3×2) + a JS-free "See all specifications"
   disclosure holding the full spec table. Matches the mockup. */
.ifmg-speccards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.ifmg-speccard {
    display: flex; align-items: center; gap: .85rem; text-decoration: none;
    background: #fff; border: 1px solid var(--ifmg-border, #e4e8ee); border-radius: 12px;
    padding: 1rem 1.1rem; color: var(--ifmg-ink, #07111f);
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.ifmg-speccard:hover { box-shadow: 0 10px 24px rgba(7,17,31,.10); transform: translateY(-2px); border-color: var(--ifmg-primary); }
.ifmg-speccard__icon {
    flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--ifmg-primary) 12%, #fff); color: var(--ifmg-primary); font-size: 1.15rem;
}
.ifmg-speccard__text { display: flex; flex-direction: column; flex: 1 1 auto; }
.ifmg-speccard__name { font-weight: 700; font-size: 1.02rem; }
.ifmg-speccard__sub { font-size: .82rem; color: var(--ifmg-muted, #5a6573); }
.ifmg-speccard__chev { color: var(--ifmg-muted, #9aa6b2); font-size: .9rem; }
.ifmg-specdetails { margin-top: 1.25rem; }
.ifmg-specdetails > summary {
    cursor: pointer; display: inline-flex; align-items: center; gap: .4rem;
    font-weight: 700; color: var(--ifmg-primary); list-style: none; padding: .5rem 0;
}
.ifmg-specdetails > summary::-webkit-details-marker { display: none; }
.ifmg-specdetails > summary::after { content: "\F282"; font-family: "bootstrap-icons"; font-size: .8rem; }
.ifmg-specdetails[open] > summary::after { content: "\F286"; }
.ifmg-specdetails > .ifmg-specgrid { margin-top: .75rem; }
@media (max-width: 860px) { .ifmg-speccards { grid-template-columns: 1fr; } }

.ifmg-specgrid {
    display: grid; gap: 1px; margin: 0;
    grid-template-columns: 1fr; background: var(--ifmg-border);
    border: 1px solid var(--ifmg-border); border-radius: var(--ifmg-radius); overflow: hidden;
}
@media (min-width: 600px) { .ifmg-specgrid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 992px) { .ifmg-specgrid { grid-template-columns: 1fr 1fr 1fr; } }
.ifmg-spec { background: var(--ifmg-surface); padding: .9rem 1.1rem; }
.ifmg-spec dt { font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ifmg-muted); margin: 0 0 .25rem; }
.ifmg-spec dd { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--ifmg-ink); }

/* Breadcrumb trail: a slim wayfinding strip under the header (Home › Model › Trim). Sits on the
   page background above the hero/content; the current page is non-linked. */
.ifmg-breadcrumbs { background: var(--ifmg-bg); border-bottom: 1px solid var(--ifmg-border); }
.ifmg-breadcrumbs ol {
    list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .55rem;
    margin: 0; padding: .6rem 0; font-size: .85rem;
}
.ifmg-breadcrumbs li { display: inline-flex; align-items: center; gap: .55rem; color: var(--ifmg-muted); }
.ifmg-breadcrumbs li:not(:first-child)::before { content: "\203A"; color: var(--ifmg-muted); }
.ifmg-breadcrumbs a { color: var(--ifmg-ink-soft); text-decoration: none; }
.ifmg-breadcrumbs a:hover { color: var(--ifmg-primary); text-decoration: underline; }
.ifmg-breadcrumbs [aria-current="page"] { color: var(--ifmg-ink); font-weight: 600; }

/* In-page table of contents: a sticky sub-nav of the page's long-form sections. Sticks just under
   the (also-sticky) site header via --ifmg-header-h, set by JS. Horizontal-scrolls on narrow widths.
   The active link is highlighted by the scrollspy. */
.ifmg-toc {
    position: sticky; top: var(--ifmg-header-h, 56px); z-index: 400;
    background: color-mix(in srgb, var(--ifmg-bg) 92%, transparent);
    backdrop-filter: saturate(140%) blur(6px);
    border-bottom: 1px solid var(--ifmg-border);
}
.ifmg-toc__inner {
    display: flex; gap: .35rem; align-items: center;
    overflow-x: auto; padding: .4rem 0; scrollbar-width: none;
}
.ifmg-toc__inner::-webkit-scrollbar { display: none; }
.ifmg-toc__link {
    white-space: nowrap; padding: .4rem .85rem; border-radius: 999px;
    font-size: .9rem; font-weight: 600; color: var(--ifmg-ink-soft); text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
.ifmg-toc__link:hover { background: var(--ifmg-surface); color: var(--ifmg-primary); }
.ifmg-toc__link.is-active { background: var(--ifmg-primary); color: var(--ifmg-accent-text, #fff); }
/* Clear the sticky header + TOC bar when an anchor is jumped to. */
section[id^="toc-"] { scroll-margin-top: calc(var(--ifmg-header-h, 56px) + 60px); }

/* ============================================================================
   TRIM PAGE V2 — EDITORIAL (scoped to body.cms-trim)
   A premium buying-guide experience. Section 1 = light editorial hero (copy-left,
   trim name as H1, model+year eyebrow, inventory-first CTAs, NO MSRP). Section 2 =
   white "Quick Facts" band that overlaps the hero's lower edge.
   ============================================================================ */

/* #1 Editorial hero — full-bleed photographic hero (the mockup standard). A lifestyle photo
   covers the whole band; a left-heavy dark scrim keeps the white copy legible. Copy sits
   top-left: theme-coloured eyebrow → large white trim name → subtitle → solid + outline CTAs.
   Generous bottom padding reserves room for the Quick Facts band to float up into. */
.cms-trim .ifmg-trimhero {
    position: relative; overflow: hidden; background: var(--ifmg-hero-scrim);
    padding: 0; min-height: 560px; display: flex; align-items: stretch;
}
.cms-trim .ifmg-trimhero__media {
    position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1;
    margin: 0; border-radius: 0; box-shadow: none; overflow: hidden;
}
.cms-trim .ifmg-trimhero__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 50%; }
/* Dark scrim: heavier on the left (copy legibility) + a soft floor for the facts overlap. */
.cms-trim .ifmg-trimhero__media::before {
    content: ""; position: absolute; inset: 0; z-index: 2;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--ifmg-hero-scrim) 70%, transparent) 0%, color-mix(in srgb, var(--ifmg-hero-scrim) 50%, transparent) 28%, color-mix(in srgb, var(--ifmg-hero-scrim) 20%, transparent) 50%, color-mix(in srgb, var(--ifmg-hero-scrim) 3%, transparent) 72%, transparent 100%),
        linear-gradient(0deg, color-mix(in srgb, var(--ifmg-hero-scrim) 30%, transparent) 0%, transparent 30%);
}
.cms-trim .ifmg-trimhero__inner {
    position: relative; z-index: 3; width: 100%;
    max-width: 1180px; margin: 0 auto; padding: 3.5rem 24px 5.25rem;
    display: flex; align-items: flex-start;
}
/* Copy is a sibling of __media inside __inner; the media is absolute (z-index 1), so the copy
   must sit above it. */
.cms-trim .ifmg-trimhero__copy { position: relative; z-index: 2; max-width: 33rem; }
.cms-trim .ifmg-trimhero__eyebrow {
    text-transform: uppercase; letter-spacing: .14em; font-weight: 700;
    font-size: .85rem; color: var(--ifmg-primary); margin-bottom: .7rem;
    text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.cms-trim .ifmg-trimhero__title {
    font-size: clamp(3.5rem, 7vw, 5.5rem); line-height: .96; font-weight: 800;
    letter-spacing: -.025em; color: #fff; margin: 0 0 1rem;
    text-shadow: 0 2px 14px rgba(0,0,0,.4);
}
.cms-trim .ifmg-trimhero__subtitle {
    font-size: clamp(1.05rem, 1.4vw, 1.3rem); line-height: 1.5;
    color: rgba(255,255,255,.92); margin: 0 0 1.9rem; font-weight: 400;
    text-shadow: 0 1px 6px rgba(0,0,0,.4); max-width: 26rem;
}
.cms-trim .ifmg-trimhero .ifmg-hero__ctas { display: flex; flex-wrap: wrap; gap: .85rem; margin: 0; }
/* Secondary CTA reads as a white outline button on the dark hero. */
.cms-trim .ifmg-trimhero .ifmg-hero__ctas .ifmg-btn--ghost {
    border-color: #fff; color: #fff; background: rgba(255,255,255,.06);
}
.cms-trim .ifmg-trimhero .ifmg-hero__ctas .ifmg-btn--ghost:hover {
    background: #fff; color: var(--ifmg-ink, #07111f);
}

/* #2 Quick Facts band — a single premium horizontal strip floating over the hero's lower
   edge. There is exactly one QuickSpecs (.auto-specs) on a trim page, so styling it directly
   is safe. Compact, icon-led, strong values, restrained labels. */
.cms-trim .ifmg-trimhero + section.ifmg-section { padding-top: 0; padding-bottom: 0; position: relative; z-index: 6; }
.cms-trim .ifmg-trimhero + section.ifmg-section .auto-specs {
    position: relative; z-index: 6; margin: -3.5rem auto 0; max-width: 1080px;
    background: #fff; border: 1px solid var(--ifmg-border, #e4e8ee);
    border-radius: 14px; box-shadow: 0 24px 60px rgba(7, 17, 31, .16);
    display: flex; align-items: stretch; padding: 0; gap: 0;
}
.cms-trim .ifmg-trimhero + section.ifmg-section .auto-specs__item {
    flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 1rem .75rem; gap: .15rem;
}
.cms-trim .ifmg-trimhero + section.ifmg-section .auto-specs__item + .auto-specs__item {
    border-left: 1px solid var(--ifmg-border, #eef0f4);
}
.cms-trim .ifmg-trimhero + section.ifmg-section .auto-specs__item > .bi {
    color: var(--ifmg-primary); font-size: 1.1rem; margin-bottom: .15rem;
}
.cms-trim .ifmg-trimhero + section.ifmg-section .auto-specs__value {
    font-size: 1.4rem; font-weight: 800; color: var(--ifmg-ink, #07111f); line-height: 1.1;
}
.cms-trim .ifmg-trimhero + section.ifmg-section .auto-specs__unit { font-size: .8rem; font-weight: 600; color: var(--ifmg-muted, #5a6573); margin-left: .15rem; }
.cms-trim .ifmg-trimhero + section.ifmg-section .auto-specs__label {
    font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ifmg-muted, #5a6573);
}

@media (max-width: 860px) {
    /* Stay full-bleed photographic, just shorter; heavier bottom scrim so white copy holds. */
    .cms-trim .ifmg-trimhero { min-height: 460px; }
    .cms-trim .ifmg-trimhero__media img { object-position: center 50%; }
    /* Mobile copy sits at the top, facts overlap the bottom — darken both ends. */
    .cms-trim .ifmg-trimhero__media::before {
        background: linear-gradient(180deg, color-mix(in srgb, var(--ifmg-hero-scrim) 60%, transparent) 0%, color-mix(in srgb, var(--ifmg-hero-scrim) 25%, transparent) 38%, color-mix(in srgb, var(--ifmg-hero-scrim) 15%, transparent) 60%, color-mix(in srgb, var(--ifmg-hero-scrim) 50%, transparent) 100%);
    }
    .cms-trim .ifmg-trimhero__inner { padding: 2.25rem 20px 4.5rem; }
    .cms-trim .ifmg-trimhero__copy { max-width: none; }
    .cms-trim .ifmg-trimhero__title { font-size: clamp(2.75rem, 13vw, 3.5rem); }
    .cms-trim .ifmg-trimhero__subtitle { margin-bottom: 1.35rem; }
    .cms-trim .ifmg-trimhero .ifmg-hero__ctas .ifmg-btn { flex: 1 1 auto; text-align: center; }

    /* P2: true mobile facts layout — 2 columns × 3 rows, no clipping/scroll. */
    .cms-trim .ifmg-trimhero + section.ifmg-section .auto-specs {
        margin: -2.75rem 16px 0; display: grid; grid-template-columns: 1fr 1fr; padding: .25rem;
    }
    .cms-trim .ifmg-trimhero + section.ifmg-section .auto-specs__item {
        flex: none; padding: .8rem .6rem; border: 0;
    }
    .cms-trim .ifmg-trimhero + section.ifmg-section .auto-specs__item + .auto-specs__item { border-left: 0; }
    .cms-trim .ifmg-trimhero + section.ifmg-section .auto-specs__item:nth-child(odd) { border-right: 1px solid var(--ifmg-border, #eef0f4); }
    .cms-trim .ifmg-trimhero + section.ifmg-section .auto-specs__item:nth-child(n+3) { border-top: 1px solid var(--ifmg-border, #eef0f4); }
    .cms-trim .ifmg-trimhero + section.ifmg-section .auto-specs__value { font-size: 1.2rem; }
}

/* ===== TRIM MOBILE PASS (P3/P7 apply at all widths — they also tidy desktop) ===== */
/* P3: Available Colors — drop explanatory copy + per-swatch text/premium tags so the section is
   image → swatch dots → selected name, matching the neighbouring galleries' height. */
.cms-trim .ifmg-gallery__intro { display: none; }
.cms-trim .ifmg-swatch__premium { display: none; }
.cms-trim .ifmg-swatch__label { display: none; }
.cms-trim .ifmg-swatch.is-active .ifmg-swatch__label { display: inline; margin-left: .4rem; }
/* P7: Other Trims — clamp the descriptor to 2 lines so cards are uniform/compact. */
.cms-trim .ifmg-vehicle-card__blurb {
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

@media (max-width: 860px) {
    /* P1: "Why this trim exists" — image is SUPPORTING (after copy) and ~half height, not a 2nd hero. */
    .cms-trim .ifmg-trimwhy__media { order: 2; border-radius: 12px; overflow: hidden; }
    .cms-trim .ifmg-trimwhy__media img { height: 190px; object-fit: cover; }
    .cms-trim .ifmg-trimwhy h2 { margin-top: 0; }

    /* P4: Best Things — tighter cards + spacing, still three. */
    .cms-trim .ifmg-grid-3 { gap: .7rem; }
    .cms-trim .ifmg-feature-card--icon { padding: 1rem 1.1rem; }
    .cms-trim .ifmg-feature-card__desc { font-size: .92rem; line-height: 1.45; }
    .cms-trim .ifmg-feature-icon { margin-bottom: .4rem; }

    /* P5: Trim ladder — horizontal swipe (scroll-snap), compact cards, selected state preserved.
       Scoped to .cms-trim to outrank the base .ifmg-trimladder__grid (declared later in the file). */
    .cms-trim .ifmg-trimladder__grid {
        display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch; padding: 0 16px .5rem; margin-inline: -16px;
        scrollbar-width: none;
    }
    .cms-trim .ifmg-trimladder__grid::-webkit-scrollbar { display: none; }
    /* One primary card visible with a peek of the next; LX (selected) is first in the list. */
    .cms-trim .ifmg-trimladder__card { flex: 0 0 72%; max-width: 280px; scroll-snap-align: start; }
    /* The ladder row scrolls horizontally on its own; guard against any page-level sideways scroll. */
    body.cms-trim { overflow-x: hidden; }

    /* P6: Galleries — STACK the three modules vertically, full width (no group-level horizontal
       scroll). Each module keeps its own internal image carousel/thumbnails. The galleries row is a
       12-col grid; forcing each col to span the full row gives a clean single-column stack in the
       approved order (See It → Colors → Inside The Cabin). The FAQ/Other-Trims row stacks the same way. */
    .cms-trim .ifmg-row { display: grid; grid-template-columns: 1fr; }
    .cms-trim .ifmg-row > .ifmg-col { grid-column: 1 / -1; width: 100%; }
}

/* ============================================================================
   TRIM PAGE — STEP 8 FINAL POLISH (typography / spacing / eyebrow consistency)
   ============================================================================ */
/* #6 Eyebrow consistency — one treatment across every section eyebrow (all widths). Scoped to the
   section heads + Why block so the editorial hero's own eyebrow is untouched. */
.cms-trim .ifmg-section-head .ifmg-eyebrow,
.cms-trim .ifmg-trimwhy .ifmg-eyebrow {
    color: var(--ifmg-primary); text-transform: uppercase; letter-spacing: .12em;
    font-weight: 700; font-size: .78rem; margin-bottom: .55rem;
}

@media (max-width: 860px) {
    /* #1 Vertical spacing — tighter but still breathable. */
    .cms-trim .ifmg-section { padding-top: 1.1rem; padding-bottom: 1.1rem; }
    .cms-trim .ifmg-section-head { margin-bottom: 1.1rem; }

    /* #2 Heading scale — strong, not billboard; no clipping/overflow. */
    .cms-trim .ifmg-section-head h2,
    .cms-trim .ifmg-trimwhy h2 { font-size: 1.5rem; line-height: 1.2; }

    /* #5 Card padding normalization — Buyer Fit / Best Things / Feature Breakdown read as one system. */
    .cms-trim .ifmg-buyfit__card { padding: 1.15rem 1.2rem; }
    .cms-trim .ifmg-feature-card--icon { padding: 1.1rem 1.15rem; }
    .cms-trim .ifmg-speccard { padding: .95rem 1.05rem; }

    /* #4 More Trims — compact, uniform cards: cap the image height so images don't dominate. */
    .cms-trim .ifmg-vehicle-card__media { height: 150px; }
    .cms-trim .ifmg-vehicle-card__media img { height: 150px; object-fit: cover; }

    /* #3 Exterior colors — compact dot swatches, readable (not oversized) selected label, small note. */
    .cms-trim .ifmg-swatch__dot { width: 22px; height: 22px; }
    .cms-trim .ifmg-swatch.is-active .ifmg-swatch__label { font-size: .9rem; font-weight: 600; }
    .cms-trim .ifmg-gallery__note { font-size: .72rem; color: var(--ifmg-muted, #5a6573); margin-top: .5rem; }
}

/* Trim-page layout experiment (scoped to body.cms-trim): tighten the vertical rhythm so sections
   feel connected — the default 4rem band left too much dead gray space. Homepage and other page
   types are untouched. */
.cms-trim .ifmg-section { padding-top: 1.5rem; padding-bottom: 1.5rem; }

/* The mini-nav reads as a proper trim-page subnav: a full-width white band with thin top/bottom
   borders, compact height, and minimal spacing — connected to the page architecture rather than a
   floating set of pills. The active item stays red (the .is-active rule above). */
.cms-trim .ifmg-toc {
    background: #fff;
    border-top: 1px solid var(--ifmg-border);
    border-bottom: 1px solid var(--ifmg-border);
    backdrop-filter: none;
}
.cms-trim .ifmg-toc__inner { padding: .35rem 0; gap: .25rem; }

/* #5 "Best Things About This Trim": the mockup shows exactly THREE highlight cards — one tidy row
   on desktop, a single-column stack of the same three on mobile. Hide the 4th+ card. */
.cms-trim .ifmg-feature-card:nth-child(n+4) { display: none; }

/* #3 Buyer-fit ("Who it's for"): frame each side as a card so it reads as a standardized decision
   module rather than loose columns. (Full 6-question structure pending content — see notes.) */
.cms-trim .ifmg-proscons__col {
    background: #fff; border: 1px solid var(--ifmg-border);
    border-radius: var(--ifmg-radius, 12px); padding: 1.15rem 1.3rem;
}

/* #4 FAQ: present as an intentional decision-support section, not a bare accordion — card each
   item, give it breathing room, and highlight the open row. */
.cms-trim #faqAccordion .accordion-item {
    border: 1px solid var(--ifmg-border); border-radius: var(--ifmg-radius, 10px);
    margin-bottom: .6rem; overflow: hidden; background: #fff;
}
.cms-trim #faqAccordion .accordion-button { font-weight: 600; }
.cms-trim #faqAccordion .accordion-button:not(.collapsed) { background: var(--ifmg-surface); color: var(--ifmg-ink); box-shadow: none; }

/* Sticky mobile CTA bar — the dealer convention that converts. Fixed to the bottom of the viewport
   on phones only; on a vehicle page it carries the vehicle name + the site's primary actions (call /
   check availability). Desktop hides it (the hero/contextual CTAs serve there). The body gets matching
   bottom padding so the bar never covers the footer. */
.ifmg-stickycta { display: none; }
@media (max-width: 767.98px) {
    .ifmg-stickycta {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 600;
        display: flex; align-items: center; gap: .5rem;
        padding: .6rem .9rem calc(.6rem + env(safe-area-inset-bottom, 0px));
        background: color-mix(in srgb, var(--ifmg-bg) 96%, transparent);
        backdrop-filter: saturate(140%) blur(8px);
        border-top: 1px solid var(--ifmg-border);
        box-shadow: 0 -6px 20px -8px rgba(0, 0, 0, .22);
    }
    body.has-stickycta { padding-bottom: 76px; }
}
.ifmg-stickycta__label {
    flex: 1 1 auto; min-width: 0;
    font-weight: 700; font-size: .95rem; color: var(--ifmg-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ifmg-stickycta__btn {
    flex: 0 0 auto; white-space: nowrap;
    padding: .6rem 1rem; border-radius: 8px; font-weight: 700; font-size: .9rem; text-decoration: none;
    background: var(--ifmg-accent); color: var(--ifmg-accent-text, #111); border: 1px solid var(--ifmg-accent);
}
.ifmg-stickycta__btn--call {
    background: transparent; color: var(--ifmg-primary); border-color: var(--ifmg-primary);
}

/* Topic-cluster "keep exploring" nav: contextual links from a vehicle page back to the model hub,
   its reviews, the comparison hub, and the lineup. A wrap of pill links above the footer. */
.ifmg-cluster-section { background: var(--ifmg-surface); }
.ifmg-cluster { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.ifmg-cluster__label {
    font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
    font-weight: 700; color: var(--ifmg-muted); margin-right: .25rem;
}
.ifmg-cluster__link {
    display: inline-block; padding: .45rem .9rem; border: 1px solid var(--ifmg-border);
    border-radius: 999px; background: var(--ifmg-bg); color: var(--ifmg-ink);
    font-weight: 600; font-size: .92rem; text-decoration: none; transition: border-color .15s, color .15s;
}
.ifmg-cluster__link:hover { border-color: var(--ifmg-accent); color: var(--ifmg-primary); }

/* =====================================================================
   Page header — injected H1 for non-hero page types (comparison/FAQ/about/
   inventory) that would otherwise have no H1. A clean title band, not a hero.
   ===================================================================== */
/* Editorial / non-hero page header band (comparison, FAQ, about, glossary): a branded eyebrow + H1
   on a tinted band so these pages lead with brand identity instead of a bare H1 on white. */
.ifmg-pagehead-section {
    background: linear-gradient(180deg, var(--ifmg-surface) 0%, var(--ifmg-bg) 100%);
    border-bottom: 1px solid var(--ifmg-border);
    padding: 2.5rem 0 2rem;
}
.ifmg-pagehead__eyebrow { margin-bottom: .4rem; }
.ifmg-pagehead__title { margin: 0; }

/* ============================================================================
   Automotive Design System v1 — component layer (additive, Phase 1 / alias-first).
   New classes for the new automotive blocks. Existing .ifmg-vehicle-card /
   .ifmg-article-card markup is intentionally NOT rewritten here (biggest blast
   radius) — these .auto-* classes match the existing card conventions so new
   blocks (QuickAnswer, ComparisonCards, ColorGallery, link-cards) ship
   consistent, and renderers migrate to them when blocks are built/touched
   (Phase 2). All values use the --auto-/--space-/--type- token layer.
   ============================================================================ */

/* ---- Unified card base + variants ---------------------------------------- */
/* Markup contract:
     <a class="auto-card auto-card--{vehicle|article|comparison|color}">
       <div class="auto-card__media"><img …></div>
       <div class="auto-card__body"> … <span class="auto-card__cta">…</span></div>
     </a>                                                                      */
.auto-card {
    display: flex; flex-direction: column;
    background: var(--auto-surface);
    border: 1px solid var(--auto-border);
    border-radius: var(--ifmg-radius-lg);          /* 20px, per design system */
    box-shadow: var(--ifmg-shadow-sm);
    overflow: hidden;
    text-decoration: none; color: inherit;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.auto-card__media {
    position: relative;
    aspect-ratio: 16 / 10;                          /* default; variants override */
    background: var(--auto-bg);
    overflow: hidden;
}
.auto-card__media img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform .35s ease;
}
.auto-card__body {
    padding: var(--space-5) var(--space-5) var(--space-6);
    display: flex; flex-direction: column; gap: var(--space-2);
    flex: 1;
}
.auto-card__title { font-size: var(--type-card-title); line-height: var(--type-card-title-line); font-weight: var(--type-card-title-weight); margin: 0; }
.auto-card__meta  { font-weight: 600; color: var(--auto-primary); font-size: var(--type-meta); }
.auto-card__blurb { margin: 0; color: var(--auto-ink-soft); font-size: .95rem; line-height: 1.5; }
.auto-card__cta {
    margin-top: auto; padding-top: var(--space-2);
    font-weight: 600; color: var(--auto-primary);
    display: inline-flex; align-items: center; gap: .4rem;
}
/* Aspect-ratio variants (within the existing 16:10 / 16:9 image constraints). */
.auto-card--vehicle    .auto-card__media { aspect-ratio: 16 / 10; }
.auto-card--article    .auto-card__media { aspect-ratio: 16 / 9; }
.auto-card--comparison .auto-card__media { aspect-ratio: 16 / 9; background: #fff; }
.auto-card--comparison .auto-card__media img { object-fit: contain; }
.auto-card--color      .auto-card__media { aspect-ratio: 16 / 10; }
/* No real photo yet → shrink the placeholder media into a compact band so the card doesn't
   read as empty space (until OEM/scraped vehicle photography is wired in). */
.auto-card__media:has(.ifmg-media-fallback) { aspect-ratio: 5 / 2; }
/* Hover is a desktop-only enhancement (no hover dependency on touch). */
@media (hover: hover) and (pointer: fine) {
    .auto-card:hover { transform: translateY(-4px); box-shadow: var(--ifmg-shadow-lg); border-color: transparent; }
    .auto-card:hover .auto-card__media img { transform: scale(1.04); }
    .auto-card:hover .auto-card__cta i { transform: translateX(3px); }
}
.auto-card__cta i { transition: transform .18s ease; }
/* Responsive grid for unified cards — 2–4 across, collapses cleanly on mobile. */
.auto-card-grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
/* Optional "winner" badge on a comparison card. */
.auto-card__winner {
    display: inline-flex; align-items: center; gap: .35rem; align-self: flex-start;
    /* Solid brand blue + white for legibility — the prior pale accent tint washed out the label. */
    background: var(--ifmg-blue);
    color: #fff;
    font-size: var(--type-meta); font-weight: 700;
    padding: .2rem .55rem; border-radius: 999px; margin-bottom: var(--space-2);
}

/* ---- Hero: ModelYear flagship variant (Auto DS v1) ------------------------ */
.ifmg-hero--modelyear {
    min-height: 44vh;                       /* ~30% shorter than the 64vh default */
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
}
/* Display-scale H1 (the display-vs-article H1 split: ModelYear uses --type-display; research/
   trim/article heroes use --type-article-h1). Inherits the existing premium gradient + scrim. */
.ifmg-hero--modelyear h1 {
    font-size: var(--type-display);
    line-height: var(--type-display-line);
    font-weight: var(--type-display-weight);
}
.ifmg-hero--modelyear .ifmg-subtitle { max-width: 46ch; }
/* Automotive no-photo state: a faint blueprint grid + diagonal motion lines so the empty hero
   reads automotive (spec-sheet) rather than SaaS. Only when there's no background photo. */
.ifmg-hero--modelyear:not(.ifmg-hero--has-photo)::after {
    opacity: .6;
    background-image:
        /* Wheel geometry: faint concentric rings emerging from the lower-right corner. */
        radial-gradient(circle at 88% 122%,
            transparent 0 25%,
            rgba(255,255,255,.07) 25% 26%,
            transparent 26% 39%,
            rgba(255,255,255,.05) 39% 40%,
            transparent 40% 54%,
            rgba(255,255,255,.04) 54% 55%,
            transparent 55%),
        /* Blueprint grid. */
        repeating-linear-gradient(0deg,   rgba(255,255,255,.05) 0 1px, transparent 1px 44px),
        repeating-linear-gradient(90deg,  rgba(255,255,255,.05) 0 1px, transparent 1px 44px),
        /* Diagonal motion / road lines. */
        repeating-linear-gradient(115deg, rgba(255,255,255,.06) 0 2px, transparent 2px 16px);
}
/* Trust/meta row (reviewed-by · updated · authority signal). */
.ifmg-hero__meta {
    display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5);
    margin-top: var(--space-4);
    font-size: var(--type-meta); color: rgba(255,255,255,.85);
}
.ifmg-hero__meta span { display: inline-flex; align-items: center; gap: .4rem; }
.ifmg-hero__meta i { opacity: .85; }
/* Compress the trust/meta row on phones so it consumes less vertical space. */
@media (max-width: 575.98px) {
    .ifmg-hero__meta { gap: .2rem .9rem; margin-top: .75rem; font-size: .78rem; }
}
/* CTA hierarchy row: primary (filled) · secondary (ghost) · tertiary (link). */
.ifmg-hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-top: var(--space-6); }
.ifmg-btn--ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.55); }
.ifmg-btn--ghost:hover { background: rgba(255,255,255,.14); color: #fff; }
.ifmg-btn--link { background: transparent; border: none; color: #fff; padding: .85rem .4rem; text-decoration: underline; text-underline-offset: 3px; opacity: .9; }
.ifmg-btn--link:hover { background: transparent; color: #fff; opacity: 1; }
/* Primary CTA on the (blue) ModelYear gradient: white-filled so it clearly dominates the
   hierarchy and stays high-contrast — premium, not dealership-orange. Scoped to the hero row. */
.ifmg-hero--modelyear .ifmg-hero__ctas .ifmg-btn:not(.ifmg-btn--ghost):not(.ifmg-btn--link) {
    background: #fff; color: var(--ifmg-primary, var(--ifmg-blue)); border-color: #fff;
}
.ifmg-hero--modelyear .ifmg-hero__ctas .ifmg-btn:not(.ifmg-btn--ghost):not(.ifmg-btn--link):hover {
    background: rgba(255,255,255,.9); color: var(--ifmg-primary, var(--ifmg-blue));
}

/* ---- Hero: Research variant (compact, light, editorial) ------------------- */
.ifmg-hero--research {
    background: var(--auto-surface);
    color: var(--auto-ink);
    min-height: 0;
    padding: var(--space-12) var(--space-5);
    border-bottom: 1px solid var(--auto-border);
}
.ifmg-hero--research::before, .ifmg-hero--research::after { display: none; }  /* no dark glow/texture */
.ifmg-hero--research .ifmg-container { max-width: 880px; }  /* align with article reading width */
.ifmg-hero--research h1 {
    font-size: var(--type-article-h1);          /* article H1 (the other half of the display split) */
    line-height: var(--type-article-h1-line);
    font-weight: var(--type-article-h1-weight);
    color: var(--auto-ink);
}
.ifmg-hero--research .ifmg-subtitle { color: var(--auto-ink-soft); }
.ifmg-hero--research .ifmg-eyebrow { color: var(--auto-primary); }
.ifmg-hero--research .ifmg-hero__meta { color: var(--auto-muted); margin-top: var(--space-3); }
/* Copy first (left/top), featured image second (right on desktop, below on mobile). */
.ifmg-hero--research .ifmg-hero__copy { order: 1; }
.ifmg-hero--research .ifmg-hero__media { order: 2; }

/* ---- Hero: Comparison variant (decision-oriented dual-vehicle) ------------ */
.ifmg-hero--comparison { min-height: 0; padding: var(--space-12) var(--space-5); text-align: center; }
.ifmg-hero--comparison .ifmg-container { display: block; }
.ifmg-hero--comparison .ifmg-hero__copy { max-width: 720px; margin: 0 auto; }
.ifmg-hero--comparison h1 {
    font-size: var(--type-article-h1);
    line-height: var(--type-article-h1-line);
    font-weight: var(--type-article-h1-weight);
}
.ifmg-hero--comparison .ifmg-subtitle { margin: 0 auto; max-width: 56ch; }
/* "Our pick" verdict badge — the decision signal. */
.ifmg-hero__pick {
    display: inline-flex; align-items: center; gap: .45rem; margin-bottom: var(--space-4);
    background: var(--auto-accent); color: var(--auto-accent-text);
    border: 0; border-radius: 999px; padding: .4rem 1.05rem;
    font-size: .85rem; font-weight: 800; letter-spacing: .03em;
    box-shadow: var(--ifmg-shadow-sm);
}
/* Matchup row of compact comparison cards (not a photo gallery). */
.ifmg-hero__versus { display: flex; align-items: stretch; justify-content: center; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
.ifmg-hero__veh {
    flex: 1; min-width: 210px; max-width: 320px; text-align: left;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
    border-radius: var(--ifmg-radius); padding: var(--space-4) var(--space-5);
    display: flex; flex-direction: column; gap: var(--space-3);
}
.ifmg-hero__veh--pick { border-color: color-mix(in srgb, var(--auto-accent) 60%, transparent); background: rgba(255,255,255,.09); }
.ifmg-hero__veh-head { display: flex; align-items: center; gap: var(--space-3); }
.ifmg-hero__veh-thumb { width: 52px; height: 52px; border-radius: var(--ifmg-radius-sm); object-fit: cover; flex: 0 0 auto; }
.ifmg-hero__veh-thumb--empty { display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.10); color: rgba(255,255,255,.65); }
.ifmg-hero__veh-thumb--empty svg { width: 70%; height: auto; }
.ifmg-hero__veh-name { font-weight: 800; font-size: 1.1rem; }
.ifmg-hero__veh-flag { margin-left: auto; color: var(--auto-accent); }
.ifmg-hero__veh-stats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.ifmg-hero__veh-stats li { font-size: .8rem; background: rgba(255,255,255,.1); border-radius: 999px; padding: .15rem .55rem; }
.ifmg-hero__vs {
    flex: 0 0 auto; align-self: center; width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.45); display: flex; align-items: center; justify-content: center;
    font-weight: 800; text-transform: uppercase; opacity: .9;
}
/* One-line decision teaser below the matchup. */
.ifmg-hero__verdict { max-width: 720px; margin: var(--space-6) auto 0; font-size: 1.08rem; font-weight: 500; line-height: 1.5; opacity: .95; }

/* ---- QuickSpecs — data-driven fast-facts strip ---------------------------- */
.auto-specs {
    display: grid; gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    background: var(--auto-surface);
    border: 1px solid var(--auto-border);
    border-radius: var(--ifmg-radius);
    box-shadow: var(--ifmg-shadow-sm);
    padding: var(--space-5) var(--space-6);
}
.auto-specs__item { display: flex; flex-direction: column; gap: .15rem; text-align: center; }
.auto-specs__item > i { font-size: 1.5rem; color: var(--auto-primary); margin-bottom: .25rem; }
.auto-specs__value { font-size: clamp(1.25rem, 1.8vw, 1.6rem); font-weight: 800; color: var(--auto-ink); line-height: 1.1; }
.auto-specs__unit { font-size: .8rem; font-weight: 600; color: var(--auto-muted); margin-left: .2rem; }
.auto-specs__label { font-size: var(--type-meta); color: var(--auto-muted); font-weight: 600; }
/* QuickFacts V2 — CARD variant: a portable boxed fact strip (white card, dividers between facts). The LOCKED
   trim fact-card keeps its own page-positioned treatment (.cms-trim … .auto-specs, untouched) as the
   compatibility alias; this is the reusable boxed variant for other consumers. */
.auto-specs--card { display: flex; align-items: stretch; gap: 0; padding: 0; background: #fff; border: 1px solid var(--auto-border); border-radius: var(--ifmg-radius); box-shadow: var(--ifmg-shadow); }
.auto-specs--card .auto-specs__item { flex: 1 1 0; justify-content: center; padding: var(--space-4) var(--space-3); }
.auto-specs--card .auto-specs__item + .auto-specs__item { border-left: 1px solid var(--auto-border); }
/* QuickFacts V2 — EDITORIAL variant: compact inline fact strip for use inside editorial content (no card
   chrome; lighter rhythm than the boxed/hero treatments). */
.auto-specs--editorial { background: transparent; border: 0; box-shadow: none; padding: var(--space-2) 0; gap: var(--space-3) var(--space-5); }
.auto-specs--editorial .auto-specs__value { font-size: 1.15rem; }
@media (max-width: 767px) {
    /* Mobile fact bar: tighter row gap + icon spacing so more stats sit above the fold. Placed after
       the base .auto-specs rules so it wins on source order. Section padding is collapsed in the
       hero mobile block via :has(.auto-specs). */
    .auto-specs { gap: .25rem .75rem; }
    .auto-specs__item { gap: 0; }
    /* Mobile shows a compact 4-stat strip; hide the 5th (Seating) so it reads as a 2x2 summary. */
    .auto-specs__item:nth-child(5) { display: none; }
    .auto-specs__item > i { font-size: .85rem; margin-bottom: 0; }
    .auto-specs__value { font-size: 1rem; }
    .auto-specs__label { font-size: .66rem; }
    .auto-specs__unit { font-size: .66rem; }
}

/* ---- Quick Answer (AEO) — extends the existing .ifmg-tldr answer-box idea -- */
/* Design treatment: reading width, surface, PRIMARY left accent rule, soft
   shadow, "Quick Answer" label, slightly larger body. Distinct from .ifmg-tldr
   (which uses the accent colour) so existing TL;DR rendering is untouched. */
.auto-quick-answer {
    max-width: 760px; margin: 0 auto;
    background: var(--auto-surface);
    border: 1px solid var(--auto-border);
    border-left: 4px solid var(--auto-primary);
    border-radius: 0 var(--ifmg-radius) var(--ifmg-radius) 0;
    box-shadow: var(--ifmg-shadow-sm);
    padding: var(--space-5) var(--space-6);
}
.auto-quick-answer__label {
    display: block; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
    font-weight: 700; color: var(--auto-primary); margin-bottom: var(--space-2);
}
.auto-quick-answer__body { margin: 0; font-size: 1.2rem; line-height: 1.6; color: var(--auto-ink); font-weight: 500; }
.auto-quick-answer__bullets { margin: var(--space-3) 0 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: var(--space-1); }
.auto-quick-answer__bullets li { color: var(--auto-ink-soft); font-size: .98rem; line-height: 1.5; }
.auto-quick-answer__meta { margin: var(--space-3) 0 0; font-size: var(--type-meta); color: var(--auto-muted); }

/* ---- Ad container — labeled, centered, never competes with CTAs ----------- */
.auto-ad {
    display: flex; flex-direction: column; align-items: center;
    gap: var(--space-2);
    margin: var(--space-8) auto;
    padding: var(--space-3);
    border: 1px solid var(--auto-border);
    border-radius: var(--ifmg-radius-sm);
    background: var(--auto-bg);
}
.auto-ad__label {
    font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--auto-muted); font-weight: 600;
}
.auto-ad__slot { display: block; max-width: 100%; }
.auto-ad__slot--placeholder {
    display: flex; align-items: center; justify-content: center;
    border: 1px dashed var(--auto-border);
    border-radius: var(--ifmg-radius-sm);
    background: var(--auto-surface);
    color: var(--auto-muted);
    font-size: var(--type-meta); font-weight: 600; letter-spacing: .06em;
}
@media (max-width: 767px) {
    /* Ad appears sooner + smaller on phones: collapse the 2rem margin and cap the placeholder to the
       intended mobile slot (~50px) instead of the desktop 728x90 inline height. */
    .auto-ad { margin: .15rem auto; padding: .12rem; gap: .12rem; }
    .auto-ad__slot--placeholder { height: 28px !important; }
}

/* ---- Link card — related-pages internal linking --------------------------- */
.auto-linkcard {
    display: flex; flex-direction: column; gap: var(--space-1);
    padding: var(--space-4) var(--space-5);
    background: var(--auto-surface);
    border: 1px solid var(--auto-border);
    border-radius: var(--ifmg-radius);
    text-decoration: none; color: inherit;
    transition: background .15s ease, border-color .15s ease, transform .18s ease;
}
.auto-linkcard__title { font-weight: 700; color: var(--auto-ink); display: inline-flex; align-items: center; gap: .4rem; }
.auto-linkcard__note  { font-size: var(--type-meta); color: var(--auto-muted); }
@media (hover: hover) and (pointer: fine) {
    .auto-linkcard:hover { background: var(--auto-card-hover-bg); border-color: color-mix(in srgb, var(--auto-primary) 40%, transparent); transform: translateY(-2px); }
}

@media (max-width: 767px) {
    /* Final mobile fact-bar trim — placed after the hero variant so it wins on source order. */
    .ifmg-bg-ink .auto-specs, .auto-specs--hero { padding: .15rem 0 !important; }
}

/* ============================================================
   Phase 1 homepage proof (hand-tuned; honda-accord showcase).
   Only two presentational hooks: QuickSpecs on a dark band, and
   the WhyChoose featured-card approximation rendered via CustomHtml.
   ============================================================ */

/* QuickFacts V2 — HERO variant. The explicit `.auto-specs--hero` class is the canonical name; the legacy
   ambient `.ifmg-bg-ink .auto-specs` (LayoutJson background:ink) is kept GROUPED as a compatibility alias so
   existing pages render identically. Drop the strip's white card so the chips sit on the dark band. */
.ifmg-bg-ink .auto-specs, .auto-specs--hero { background: transparent; border: 0; box-shadow: none; padding: .5rem 0; }
.ifmg-bg-ink .auto-specs__value, .auto-specs--hero .auto-specs__value { color: #fff; }
.ifmg-bg-ink .auto-specs__item > i, .auto-specs--hero .auto-specs__item > i { color: var(--ifmg-orange); }
.ifmg-bg-ink .auto-specs__label, .ifmg-bg-ink .auto-specs__unit,
.auto-specs--hero .auto-specs__label, .auto-specs--hero .auto-specs__unit { color: rgba(255, 255, 255, .68); }

/* WhyChoose — featured "sales argument" card beside the trim explorer.
   Existing-block approximation: a CustomHtml block styled as a card. */
.ifmg-whychoose {
    background: var(--ifmg-surface);
    border: 1px solid var(--ifmg-border);
    border-top: 3px solid var(--ifmg-orange);
    border-radius: var(--ifmg-radius);
    padding: 1.75rem;
    height: 100%;
    box-shadow: var(--ifmg-shadow);
}
.ifmg-whychoose__title { margin: .35rem 0 .75rem; font-size: 1.5rem; line-height: 1.2; }
.ifmg-whychoose__pitch { color: var(--ifmg-ink-soft); margin: 0 0 1.1rem; }
.ifmg-whychoose__points { list-style: none; padding: 0; margin: 0 0 1.4rem; display: grid; gap: .6rem; }
.ifmg-whychoose__points li { display: flex; gap: .55rem; align-items: flex-start; line-height: 1.4; }
.ifmg-whychoose__points i { color: var(--ifmg-orange); margin-top: .12rem; flex: none; }

/* Trim Explorer — hand-authored structured cards (Option A proof; real catalog/spec data,
   no AI prose). Fixed structure + equal height so it reads as a shopping tool. */
/* True 3x2 grid so the trim explorer visually dominates its half of the split row
   (a primary shopping activity, per the mockup); collapses on narrower viewports. */
.ifmg-trimgrid { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 992px) { .ifmg-trimgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ifmg-trimgrid { grid-template-columns: 1fr; } }
.ifmg-trimcard {
    display: flex; flex-direction: column;
    background: var(--ifmg-surface); border: 1px solid var(--ifmg-border);
    border-radius: var(--ifmg-radius); padding: 0; overflow: hidden;
    text-decoration: none; color: inherit; height: 100%;
    transition: border-color .15s ease, transform .18s ease, box-shadow .18s ease;
}
/* Visual-proof: editorial image at the top of each trim card (mockup density). */
/* Trim-card media: cutout vehicles shown whole on white (16:9, contain) — promoted from the
   Accord homepage's page-scoped CSS so the data-driven detailed TrimGrid matches ModelWide. */
.ifmg-trimcard__media { aspect-ratio: 16 / 9; background: #fff; overflow: hidden; }
.ifmg-trimcard__media img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .18s ease; }
/* Explore (TrimGrid) cards: the canonical card assets are rendered on a 16/9 canvas with the vehicle
   ~86% of the width (matte-derived, centred, pure white) — matching the 16/9 media box. So object-fit:
   contain shows the FULL vehicle large with no side-cropping (cover cropped the front/rear off a square
   asset in the wide box). Vehicle dominant, fully visible, no clipping. */
section.ifmg-section:has(.ifmg-trimgrid) .ifmg-trimcard__media img { object-fit: contain; object-position: center; }
.ifmg-trimcard__body { display: flex; flex-direction: column; gap: .35rem; padding: .9rem 1.05rem 1rem; flex: 1; }
@media (hover: hover) and (pointer: fine) { .ifmg-trimcard:hover .ifmg-trimcard__media img { transform: scale(1.04); } }
.ifmg-trimcard__badge {
    align-self: flex-start; font-size: .68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; padding: .12rem .5rem; border-radius: 999px; margin-bottom: .15rem;
}
.ifmg-trimcard__badge--gas    { background: #eef1f4; color: var(--ifmg-ink-soft); }
.ifmg-trimcard__badge--hybrid { background: #e4f4ea; color: #1c7a3e; }
.ifmg-trimcard__name  { font-size: 1.2rem; font-weight: 800; margin: 0; line-height: 1.1; }
.ifmg-trimcard__price { font-weight: 700; color: var(--ifmg-ink); }
.ifmg-trimcard__mpg   { font-size: .95rem; color: var(--ifmg-ink-soft); }
.ifmg-trimcard__mpg strong { font-size: 1.15rem; color: var(--ifmg-ink); }
.ifmg-trimcard__spec  { font-size: .82rem; color: var(--ifmg-muted); }
.ifmg-trimcard__cta   { margin-top: auto; padding-top: .6rem; font-weight: 700; color: var(--ifmg-orange-text); display: inline-flex; align-items: center; gap: .35rem; }
@media (hover: hover) and (pointer: fine) {
    .ifmg-trimcard:hover { border-color: transparent; transform: translateY(-3px); box-shadow: var(--ifmg-shadow-lg); }
    .ifmg-trimcard:hover .ifmg-trimcard__cta i { transform: translateX(3px); }
}
.ifmg-trimcard__cta i { transition: transform .18s ease; }

/* =====================================================================
   Desktop density pass (mirrors the mobile above-the-fold tightening,
   scoped to >=768px so mobile rules are untouched). Goal: ~25-35% shorter
   homepage by removing dead vertical space — NOT by shrinking content or
   type. Touches only shared spacing primitives + the stats/ad bands.
   ===================================================================== */
@media (min-width: 768px) {
    /* Full-width band rhythm: 4rem -> 2.5rem top/bottom (~37% tighter). */
    .ifmg-section { padding: 2.5rem 0; }

    /* Grid-row rhythm (Explore / multi-column bands): 2.5rem -> 1.5rem vertical. */
    .ifmg-row { padding: 1.5rem 1.25rem; }

    /* Heading -> content gap (e.g. Explore heading to trim grid): 2.75rem -> 1.5rem. */
    .ifmg-section-head { margin-bottom: 1.5rem; }

    /* Hero: ~12% shorter. Keep headline/CTA scale — only trim height + padding. */
    .ifmg-hero { min-height: 44vh; padding: 3rem 1.25rem; }
    .ifmg-hero .ifmg-btn { margin-top: 1.75rem; }

    /* Stats / fact bar: ~20% shorter and visually attached to the hero by
       collapsing its band padding (the generic 2.5rem -> 1.5rem here). */
    section.ifmg-section:has(.auto-specs) { padding: 1.5rem 0; }

    /* Ad bands behave like utility elements, not content sections:
       ~50% smaller footprint via band padding + container margin. */
    section.ifmg-section:has(.auto-ad) { padding: .5rem 0; }
    .auto-ad { margin: .75rem auto; }
}

/* ============================================================================
   Data-driven media galleries (ExteriorColorGallery / InteriorGallery /
   LifestyleGallery). Crossfading photo stage + colour/config swatches +
   thumbnail strip. Driven by gallery-swatch.js. Self-hiding sections never
   render here, so there is no empty-state styling.
   ============================================================================ */
.ifmg-gallery__stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: var(--ifmg-surface, #F3F5F8);
    border: 1px solid var(--ifmg-border);
    border-radius: var(--ifmg-radius, 14px);
    overflow: hidden;
}
.ifmg-gallery__photos { position: absolute; inset: 0; }
.ifmg-gallery__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity .35s ease;
}
.ifmg-gallery--lifestyle .ifmg-gallery__photo { object-fit: cover; }
.ifmg-gallery__photo.is-active { opacity: 1; }

.ifmg-gallery__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.75rem;
    height: 2.75rem;
    border: none;
    border-radius: 50%;
    background: rgba(15, 23, 32, .55);
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease;
}
.ifmg-gallery__nav:hover { background: rgba(15, 23, 32, .8); }
.ifmg-gallery__nav--prev { left: .75rem; }
.ifmg-gallery__nav--next { right: .75rem; }

.ifmg-gallery__live {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Colour / config swatches — only render for galleries with >1 entry. */
.ifmg-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1rem;
}
.ifmg-swatch {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .8rem .4rem .5rem;
    background: #fff;
    border: 1px solid var(--ifmg-border);
    border-radius: 999px;
    cursor: pointer;
    font-size: .9rem;
    color: var(--ifmg-ink);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ifmg-swatch:hover { border-color: var(--ifmg-blue); }
.ifmg-swatch.is-active {
    border-color: var(--ifmg-blue);
    box-shadow: 0 0 0 1px var(--ifmg-blue);
}
.ifmg-swatch__dot {
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    background: var(--swatch, #ccc);
    border: 1px solid rgba(15, 23, 32, .18);
    flex: 0 0 auto;
}

/* Thumbnail strip — detail shots (wheel/cabin) fold in here. */
.ifmg-gallery__thumbs {
    display: flex;
    gap: .5rem;
    margin-top: 1rem;
    overflow-x: auto;
    padding-bottom: .25rem;
}
.ifmg-gallery__thumb {
    flex: 0 0 auto;
    width: 5.5rem;
    height: 3.75rem;
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--ifmg-radius-sm, 8px);
    background: var(--ifmg-surface, #F3F5F8);
    cursor: pointer;
    overflow: hidden;
}
.ifmg-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ifmg-gallery__thumb.is-active { border-color: var(--ifmg-blue); }
.ifmg-gallery__thumb--detail { box-shadow: inset 0 -3px 0 var(--ifmg-blue-logo, #3FA9DC); }

@media (prefers-reduced-motion: reduce) {
    .ifmg-gallery__photo { transition: none; }
}

/* Editorial gallery copy: supporting paragraph under the heading + honest disclaimer note. */
.ifmg-gallery__intro {
    max-width: 60ch;
    margin: -0.25rem 0 1.25rem;
    color: var(--ifmg-ink-soft, #3A4A5A);
    font-size: 1.05rem;
    line-height: 1.55;
}
.ifmg-gallery__note {
    margin: 1rem 0 0;
    color: var(--ifmg-muted, #5A6675);
    font-size: .8rem;
    font-style: italic;
}

/* ============================================================================
   Buyer-Fit decision framework + Trim-ladder comparison (payload-driven,
   standardized across trims).
   ============================================================================ */
/* Buyer Fit — two scannable cards (Buy this if / Skip this if) with short bullets. Matches mockup. */
.ifmg-buyfit__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 1.5rem; }
.ifmg-buyfit__card {
    background: #fff; border: 1px solid var(--ifmg-border, #e4e8ee); border-radius: 14px;
    padding: 1.4rem 1.5rem; border-top: 4px solid var(--ifmg-border, #e4e8ee);
}
.ifmg-buyfit__card--buy { border-top-color: var(--ifmg-success); }
.ifmg-buyfit__card--skip { border-top-color: var(--ifmg-danger); }
.ifmg-buyfit__head { display: flex; align-items: center; gap: .55rem; font-size: 1.15rem; font-weight: 800; color: var(--ifmg-ink, #07111f); margin-bottom: 1rem; }
.ifmg-buyfit__badge { font-size: 1.3rem; line-height: 1; display: inline-flex; }
.ifmg-buyfit__card--buy .ifmg-buyfit__badge { color: var(--ifmg-success); }
.ifmg-buyfit__card--skip .ifmg-buyfit__badge { color: var(--ifmg-danger); }
.ifmg-buyfit__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.ifmg-buyfit__list li { display: flex; align-items: flex-start; gap: .6rem; font-size: 1.02rem; color: var(--ifmg-ink, #2a3340); line-height: 1.4; }
.ifmg-buyfit__list li > .bi { margin-top: .15rem; font-size: .95rem; flex: 0 0 auto; }
.ifmg-buyfit__card--buy .ifmg-buyfit__list li > .bi { color: var(--ifmg-success); }
.ifmg-buyfit__card--skip .ifmg-buyfit__list li > .bi { color: var(--ifmg-danger); }
@media (max-width: 860px) { .ifmg-buyfit__grid { grid-template-columns: 1fr; gap: 1rem; } }

/* "Why this trim exists" — two-column editorial (copy left, supporting image right). */
.ifmg-trimwhy__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 2.75rem; align-items: center; }
.ifmg-trimwhy .ifmg-eyebrow { color: var(--ifmg-primary); }
.ifmg-trimwhy h2 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); font-weight: 800; letter-spacing: -.01em; margin: .35rem 0 1rem; }
.ifmg-trimwhy__body { color: var(--ifmg-ink-soft, #3a4a5a); line-height: 1.65; font-size: 1.06rem; }
.ifmg-trimwhy__body p { margin: 0 0 .85rem; }
.ifmg-trimwhy__media img { display: block; width: 100%; border-radius: 16px; box-shadow: 0 20px 48px rgba(7,17,31,.14); }
@media (max-width: 860px) {
    .ifmg-trimwhy__grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .ifmg-trimwhy__media { order: -1; }
}

.ifmg-buyerfit__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1.25rem;
}
.ifmg-buyerfit__block {
    background: #fff;
    border: 1px solid var(--ifmg-border);
    border-left: 4px solid var(--ifmg-border);
    border-radius: var(--ifmg-radius-sm, 8px);
    padding: 1rem 1.25rem;
}
.ifmg-buyerfit__label {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ifmg-muted, #5A6675);
    margin-bottom: .35rem;
}
.ifmg-buyerfit__block p { margin: 0; color: var(--ifmg-ink); }
.ifmg-buyerfit__block--best     { border-left-color: #2E9E5B; }
.ifmg-buyerfit__block--skip     { border-left-color: var(--ifmg-muted, #5A6675); }
.ifmg-buyerfit__block--advantage{ border-left-color: var(--ifmg-blue); }
.ifmg-buyerfit__block--compromise{ border-left-color: var(--ifmg-orange, #F58220); }
.ifmg-buyerfit__block--gain     { border-left-color: #2E9E5B; }
.ifmg-buyerfit__block--giveup   { border-left-color: var(--ifmg-orange, #F58220); }
.ifmg-buyerfit__value {
    margin-top: 1rem;
    background: var(--ifmg-surface, #F3F5F8);
    border-radius: var(--ifmg-radius-sm, 8px);
    padding: 1rem 1.25rem;
}
.ifmg-buyerfit__value p { margin: 0; }
.ifmg-buyerfit__rec {
    margin-top: 1rem;
    background: var(--ifmg-blue);
    color: #fff;
    border-radius: var(--ifmg-radius-sm, 8px);
    padding: 1rem 1.25rem;
    font-size: 1.1rem;
    line-height: 1.5;
}
.ifmg-buyerfit__rec-label { display: block; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; opacity: .85; margin-bottom: .25rem; }

/* Trim ladder ("How it fits in the lineup") — every trim as a compact card, current highlighted.
   Mockup: name → tier label → studio cutout → starting price; selected card is red-outlined. */
.ifmg-trimladder__grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 1rem; align-items: stretch;
}
.ifmg-trimladder__card {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    background: #fff; border: 1px solid var(--ifmg-border, #e4e8ee); border-radius: 14px;
    padding: 1.15rem 1rem 1.25rem; text-decoration: none; color: var(--ifmg-ink, #07111f);
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.ifmg-trimladder__card:hover { box-shadow: 0 14px 32px rgba(7,17,31,.12); transform: translateY(-3px); }
.ifmg-trimladder__card.is-current {
    border-color: var(--ifmg-primary); border-width: 2px; padding: calc(1.15rem - 1px) calc(1rem - 1px) calc(1.25rem - 1px);
    box-shadow: 0 10px 26px rgba(7,17,31,.10);
}
.ifmg-trimladder__name { font-size: 1.3rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.1; }
.ifmg-trimladder__tier {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 700;
    color: var(--ifmg-muted, #5a6573); margin-top: .15rem;
}
.ifmg-trimladder__media {
    width: 100%; height: 104px; display: flex; align-items: center; justify-content: center;
    margin: .7rem 0 .6rem;
}
.ifmg-trimladder__media img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.ifmg-trimladder__price { font-size: .92rem; color: var(--ifmg-ink-soft, #3a4a5a); font-weight: 600; margin-top: auto; }
.ifmg-trimladder__card.is-current .ifmg-trimladder__name,
.ifmg-trimladder__card.is-current .ifmg-trimladder__tier,
.ifmg-trimladder__card.is-current .ifmg-trimladder__price { color: var(--ifmg-primary); }
@media (max-width: 860px) {
    .ifmg-trimladder__grid { grid-template-columns: repeat(2, 1fr); }
    .ifmg-trimladder__media { height: 84px; }
}

.ifmg-trimcompare__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1.25rem;
}
.ifmg-trimcompare__card {
    background: #fff;
    border: 1px solid var(--ifmg-border);
    border-radius: var(--ifmg-radius, 14px);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}
.ifmg-trimcompare__head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.ifmg-trimcompare__trim { font-weight: 700; font-size: 1.15rem; color: var(--ifmg-ink); }
.ifmg-trimcompare__delta {
    font-weight: 700;
    color: var(--ifmg-blue);
    background: var(--ifmg-surface, #F3F5F8);
    border-radius: 999px;
    padding: .15rem .6rem;
    font-size: .9rem;
    white-space: nowrap;
}
.ifmg-trimcompare__gain, .ifmg-trimcompare__giveup { margin: 0; font-size: .95rem; line-height: 1.45; }
.ifmg-trimcompare__gain i   { color: #2E9E5B; }
.ifmg-trimcompare__giveup   { color: var(--ifmg-ink-soft, #3A4A5A); }
.ifmg-trimcompare__giveup i { color: var(--ifmg-muted, #5A6675); }
.ifmg-trimcompare__link { margin-top: auto; font-weight: 600; color: var(--ifmg-blue); text-decoration: none; }
.ifmg-trimcompare__link:hover { text-decoration: underline; }

@media (max-width: 768px) {
    .ifmg-buyerfit__grid { grid-template-columns: 1fr; }
    .ifmg-trimcompare__grid { grid-template-columns: 1fr; }
}

/* TrimCompare buying-guide enhancements: lead, best-value highlight, per-trim verdict, recommendation. */
.ifmg-trimcompare__lead {
    max-width: 70ch;
    margin: -0.25rem 0 1.25rem;
    color: var(--ifmg-ink-soft, #3A4A5A);
    font-size: 1.05rem;
    line-height: 1.55;
}
.ifmg-trimcompare__card { position: relative; }
.ifmg-trimcompare__card--best {
    border-color: var(--ifmg-blue);
    box-shadow: 0 0 0 1px var(--ifmg-blue), var(--ifmg-shadow, 0 6px 24px rgba(15,23,32,.08));
}
.ifmg-trimcompare__badge {
    position: absolute;
    top: -0.7rem;
    left: 1.25rem;
    background: var(--ifmg-blue);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .2rem .6rem;
    border-radius: 999px;
}
.ifmg-trimcompare__verdict {
    margin: 0;
    padding-top: .5rem;
    border-top: 1px dashed var(--ifmg-border);
    font-size: .9rem;
    font-style: italic;
    color: var(--ifmg-ink-soft, #3A4A5A);
}
.ifmg-trimcompare__rec {
    margin-top: 1.25rem;
    background: var(--ifmg-blue);
    color: #fff;
    border-radius: var(--ifmg-radius-sm, 8px);
    padding: 1rem 1.25rem;
    font-size: 1.1rem;
    line-height: 1.5;
}
.ifmg-trimcompare__rec-label { display: block; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; opacity: .85; margin-bottom: .25rem; }

/* Trim-page gallery footprint reduction (~30%): galleries should support the page, not dominate it.
   Scoped to .cms-trim so model/other pages keep the full-size gallery. */
.cms-trim .ifmg-gallery__stage {
    aspect-ratio: auto;
    height: clamp(300px, 42vw, 515px);   /* ~30% shorter than the 16/10 full-bleed stage */
}
.cms-trim .ifmg-gallery__thumb {
    width: 4.25rem;
    height: 2.85rem;
}
.cms-trim .ifmg-gallery__thumbs { gap: .4rem; margin-top: .65rem; }
.cms-trim .ifmg-swatches { margin-top: .65rem; }
.cms-trim section.ifmg-gallery { padding-top: 1rem; padding-bottom: 1rem; }
.cms-trim .ifmg-gallery__intro { margin-bottom: .85rem; font-size: 1rem; }
/* Three-up gallery row alignment: when See It In The Real World / Available Exterior Colors /
   Inside the Cabin sit side-by-side, their headings wrap to a different number of lines
   ("Inside the Cabin" = 1 line, the others = 2), which made the interior stage start higher.
   Reserve a consistent 2-line heading height and bottom-align the text so all three image
   stages begin at the same top edge. Only applies in the side-by-side (desktop) layout. */
@media (min-width: 769px) {
    .cms-trim .ifmg-gallery .ifmg-section-head { margin-bottom: 1.25rem; }
    .cms-trim .ifmg-gallery .ifmg-section-head h2 {
        min-height: 2.4em;
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }
}
@media (max-width: 768px) {
    .cms-trim .ifmg-gallery__stage { height: clamp(210px, 60vw, 340px); }
}

/* Premium-paint marker on colour swatches (data-driven from VehicleColor.IsPremium). */
.ifmg-swatch__premium {
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--ifmg-blue);
    background: var(--ifmg-surface, #F3F5F8);
    border-radius: 999px;
    padding: .05rem .4rem;
    margin-left: .15rem;
}

/* Color-selector (configurator) readout: selected colour name + premium badge, updated by gallery-swatch.js */
.ifmg-colorpick {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: .75rem 0 .25rem;
}
.ifmg-colorpick__name {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--ifmg-ink, #1a1a1a);
}
.ifmg-colorpick__premium {
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--ifmg-blue);
    background: var(--ifmg-surface, #F3F5F8);
    border: 1px solid color-mix(in srgb, var(--ifmg-blue) 30%, transparent);
    border-radius: 999px;
    padding: .1rem .5rem;
}
.ifmg-colorpick__premium[hidden] { display: none; }

/* Overview split (text + lifestyle image): the image is a supporting visual, height-matched to the
   copy and cropped tighter (cover), with the row tightened so it flows into Features without dead space. */
.cms-trim .ifmg-row { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.cms-trim .ifmg-row .ifmg-image { height: 100%; margin: 0; display: flex; }
.cms-trim .ifmg-row .ifmg-image > .ifmg-container { height: 100%; width: 100%; display: flex; }
.cms-trim .ifmg-row .ifmg-image img {
    width: 100%;
    height: 100% !important;          /* override the inline height:auto so it fills the column */
    object-fit: cover;                 /* crop tighter on the vehicle, no studio dead space */
    max-height: 360px;                 /* keep it a supporting visual, not a hero */
    border-radius: var(--ifmg-radius, 14px);
}
@media (max-width: 768px) {
    .cms-trim .ifmg-row .ifmg-image img { height: auto !important; max-height: 240px; }
}

/* ============================================================================
   Monetization — editorial "Sponsored" placement (never a banner) + floating
   inventory CTA. The sponsored card reads as premium editorial; the disclosure
   label keeps it honest.
   ============================================================================ */
.ifmg-sponsored__card {
    position: relative;
    border: 1px solid var(--ifmg-border);
    border-radius: var(--ifmg-radius, 14px);
    background: linear-gradient(180deg, var(--ifmg-surface, #F3F5F8), #fff);
    padding: 1.5rem 1.75rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
}
.ifmg-sponsored__label {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ifmg-muted, #5A6675);
    background: #fff;
    border: 1px solid var(--ifmg-border);
    border-radius: 999px;
    padding: .1rem .55rem;
}
.ifmg-sponsored__headline { margin: .15rem 0 0; font-size: 1.25rem; font-weight: 700; color: var(--ifmg-ink); }
.ifmg-sponsored__body { margin: 0; color: var(--ifmg-ink-soft, #3A4A5A); line-height: 1.55; }
.ifmg-sponsored__cta { margin-top: .5rem; }
.cms-trim section.ifmg-sponsored { padding-top: 1rem; padding-bottom: 1rem; }

/* Floating inventory CTA (desktop): persistent, dismissible, appears after hero. */
.ifmg-floatcta {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1050;
    width: 270px;
    max-width: calc(100vw - 2.5rem);
    background: #fff;
    border: 1px solid var(--ifmg-border);
    border-radius: var(--ifmg-radius, 14px);
    box-shadow: 0 10px 30px rgba(15, 23, 32, .18);
    padding: 1rem 1.1rem;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .25s ease, transform .25s ease;
    pointer-events: none;
}
.ifmg-floatcta.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.ifmg-floatcta__eyebrow { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ifmg-muted, #5A6675); }
.ifmg-floatcta__title { font-weight: 700; color: var(--ifmg-ink); margin: .1rem 0 .6rem; }
.ifmg-floatcta__btn { display: block; text-align: center; }
.ifmg-floatcta__close {
    position: absolute; top: .35rem; right: .5rem;
    border: none; background: transparent; color: var(--ifmg-muted, #5A6675);
    font-size: 1.1rem; line-height: 1; cursor: pointer; padding: .2rem;
}
/* Desktop only — on mobile the sticky bottom bar already covers inventory access. */
@media (max-width: 768px) { .ifmg-floatcta { display: none; } }

/* ===== Phase 2.8 — Comparison Verdict Card V2 (faceoff · scorecards · verdict · specs) ===== */
.ifmg-verdict { padding-top: 1.25rem; }
/* Row 1 — strict 3-col faceoff: [vehicle] [VS + tally] [vehicle]. Equal media containers, aligned names. */
.ifmg-verdict__faceoff { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 1.25rem; margin-bottom: 1.1rem; }
.ifmg-verdict__veh { text-align: center; min-width: 0; }
/* Equal, fixed media box both sides so image + silhouette + names line up exactly */
.ifmg-verdict__media { width: 100%; max-width: 260px; aspect-ratio: 16 / 10; margin: 0 auto; display: flex; align-items: center; justify-content: center; background: var(--ifmg-bg); border: 1px solid var(--ifmg-border); border-radius: var(--ifmg-radius); overflow: hidden; }
.ifmg-verdict__media--empty { color: var(--ifmg-muted); }
.ifmg-verdict__photo { width: 100%; height: 100%; object-fit: contain; display: block; }
.ifmg-verdict__silhouette { width: 62%; height: auto; }
.ifmg-verdict__veh-name { font-weight: 700; font-size: 1.05rem; margin-top: .5rem; color: var(--ifmg-ink); }
.ifmg-verdict__center { display: flex; flex-direction: column; align-items: center; justify-content: center; align-self: center; gap: .35rem; }
.ifmg-verdict__vs { font-weight: 800; font-size: 1.25rem; color: var(--ifmg-muted); letter-spacing: .06em; }
.ifmg-verdict__tally { display: flex; flex-direction: column; align-items: center; gap: .1rem; font-size: .8rem; color: var(--ifmg-muted); white-space: nowrap; }
.ifmg-verdict__tally-item b { color: var(--ifmg-ink); font-size: 1rem; margin-left: .15rem; }
/* Row 2 — scorecard winner blocks (most prominent element after the vehicles) */
.ifmg-verdict__scores { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; margin-bottom: 1.1rem; }
.ifmg-verdict__score { border: 1px solid var(--ifmg-border); border-top: 3px solid var(--ifmg-border); border-radius: var(--ifmg-radius); padding: .8rem .85rem; text-align: center; }
.ifmg-verdict__score.is-subject, .ifmg-verdict__score.is-rival { border-top-color: var(--ifmg-primary); background: var(--ifmg-bg); }
.ifmg-verdict__score-cat { font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ifmg-muted); }
.ifmg-verdict__score-winner { font-weight: 800; font-size: 1.2rem; line-height: 1.15; color: var(--ifmg-primary); margin: .2rem 0; text-transform: uppercase; }
.ifmg-verdict__score-winner--even { color: var(--ifmg-muted); }
.ifmg-verdict__score-metric { font-size: .82rem; color: var(--ifmg-ink-soft, var(--ifmg-ink)); }
.ifmg-verdict__score-metric span { color: var(--ifmg-muted); }
/* Row 3 — verdict panel = focal point. High contrast: near-white text on brand red, readable pills. */
.ifmg-verdict__editorial { background: var(--ifmg-primary); color: #fff; border-radius: var(--ifmg-radius-lg, var(--ifmg-radius)); padding: 1.25rem 1.5rem; margin-bottom: 1.1rem; }
.ifmg-verdict__editorial-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: #fff; opacity: .9; }
.ifmg-verdict__editorial-winner { margin: .1rem 0 .65rem; font-size: 1.8rem; line-height: 1.1; color: #fff; text-transform: uppercase; letter-spacing: .01em; }
.ifmg-verdict__editorial-points { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; margin: 0 0 .7rem; padding: 0; }
.ifmg-verdict__editorial-points li { font-size: .85rem; font-weight: 700; color: #fff; background: rgba(255,255,255,.24); border: 1px solid rgba(255,255,255,.35); border-radius: 999px; padding: .2rem .8rem; }
.ifmg-verdict__editorial-rec { margin: 0; font-size: 1rem; line-height: 1.5; color: #fff; }
/* Row 4 — compact key-spec grid (4×2 desktop) */
.ifmg-verdict__metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: .55rem; }
.ifmg-verdict__metric { padding: .65rem .8rem; border: 1px solid var(--ifmg-border); border-radius: var(--ifmg-radius); }
.ifmg-verdict__metric-name { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ifmg-muted); margin-bottom: .3rem; }
.ifmg-verdict__metric-row { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; padding: .08rem 0; }
.ifmg-verdict__metric-veh { font-size: .78rem; color: var(--ifmg-muted); }
.ifmg-verdict__metric-val { font-weight: 700; font-size: .9rem; color: var(--ifmg-ink); }
.ifmg-verdict__metric-val.is-win { color: var(--ifmg-primary); }
.ifmg-verdict .ifmg-unverified { color: #b54708; font-style: italic; font-weight: 600; }
@media (max-width: 768px) {
  .ifmg-verdict__faceoff { grid-template-columns: 1fr 1fr; gap: .75rem 1rem; }
  .ifmg-verdict__center { grid-column: 1 / -1; order: 3; flex-direction: row; gap: .9rem; }
  .ifmg-verdict__tally { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: .15rem .7rem; }
  .ifmg-verdict__scores { grid-template-columns: repeat(2, 1fr); }
  .ifmg-verdict__metrics { grid-template-columns: repeat(2, 1fr); }
}

/* ===== Phase 2.9 (CS2) — editorial comparison sections (Decision / Reasoning) ===== */
.ifmg-cmp { padding: 2.5rem 0; border-top: 1px solid var(--ifmg-border); }
.ifmg-cmp__head { margin-bottom: .9rem; }
.ifmg-cmp__confidence { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ifmg-muted); margin-bottom: .4rem; }
.ifmg-cmp__headline { font-size: 1.7rem; line-height: 1.2; font-weight: 800; color: var(--ifmg-ink); margin: 0; }
.ifmg-cmp--verdict .ifmg-cmp__headline { font-size: 2rem; }
.ifmg-cmp__intro { font-size: 1.05rem; line-height: 1.65; color: var(--ifmg-ink-soft, var(--ifmg-ink)); max-width: 64ch; margin: .25rem 0 1.1rem; }
.ifmg-cmp__lines { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.ifmg-cmp__line { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .75rem; padding: .55rem 0; border-bottom: 1px solid var(--ifmg-border); }
.ifmg-cmp__line:last-child { border-bottom: 0; }
.ifmg-cmp__lead { font-weight: 700; color: var(--ifmg-ink); }
.ifmg-cmp__detail { color: var(--ifmg-ink-soft, var(--ifmg-ink)); }
.ifmg-cmp__evidence { margin-left: auto; font-size: .9rem; font-weight: 600; color: var(--ifmg-muted); white-space: nowrap; }
.ifmg-cmp--whichbuy .ifmg-cmp__lead { color: var(--ifmg-primary); }
@media (max-width: 768px) {
  .ifmg-cmp__headline { font-size: 1.4rem; }
  .ifmg-cmp--verdict .ifmg-cmp__headline { font-size: 1.6rem; }
  .ifmg-cmp__evidence { margin-left: 0; }
}

/* ===== Phase 2.9 (CS2.5) — Compare decision dashboard (presentation of CS2 outputs) ===== */
.ifmg-dash { padding: 1.75rem 0; border-top: 1px solid var(--ifmg-border); }
.ifmg-dash__label { font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ifmg-primary); margin-bottom: .75rem; }
/* Verdict decision panel — dominant */
.ifmg-dash--verdict { background: var(--ifmg-bg); border-radius: var(--ifmg-radius-lg, 16px); padding: 1.75rem; border-top: 0; }
.ifmg-dash__grid { display: grid; grid-template-columns: 1.2fr .9fr; gap: 1.5rem; align-items: stretch; }
.ifmg-dash__headline { font-size: 1.9rem; line-height: 1.15; font-weight: 800; color: var(--ifmg-ink); margin: 0 0 .6rem; }
.ifmg-dash__explain { font-size: 1rem; line-height: 1.6; color: var(--ifmg-ink-soft, var(--ifmg-ink)); margin: 0; max-width: 60ch; }
.ifmg-dash__score { background: var(--ifmg-surface); border: 1px solid var(--ifmg-border); border-radius: var(--ifmg-radius); padding: 1.1rem 1.25rem; display: flex; flex-direction: column; gap: .8rem; }
.ifmg-dash__tally { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .75rem; text-align: center; }
.ifmg-dash__side { display: flex; flex-direction: column; gap: .1rem; }
.ifmg-dash__veh { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ifmg-muted); }
.ifmg-dash__wins { font-size: 2.1rem; font-weight: 800; color: var(--ifmg-primary); line-height: 1; }
.ifmg-dash__wlabel { font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ifmg-muted); }
.ifmg-dash__vs { display: flex; flex-direction: column; }
.ifmg-dash__vs span { font-weight: 800; color: var(--ifmg-ink); }
.ifmg-dash__vs small { font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ifmg-muted); }
.ifmg-dash__close { text-align: center; font-size: .82rem; color: var(--ifmg-muted); }
.ifmg-dash__conf { border-top: 1px solid var(--ifmg-border); padding-top: .7rem; text-align: center; }
.ifmg-dash__conf-main { display: block; font-weight: 800; color: var(--ifmg-ink); }
.ifmg-dash__conf-sub { display: block; font-size: .82rem; color: var(--ifmg-muted); }
/* Key Differences split: cards + closely-matched aside */
.ifmg-dash__split { display: grid; grid-template-columns: 1fr 280px; gap: 1.25rem; }
.ifmg-dash__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .75rem; }
.ifmg-dcard { border: 1px solid var(--ifmg-border); border-top: 3px solid var(--ifmg-primary); border-radius: var(--ifmg-radius); padding: .9rem 1rem; position: relative; }
.ifmg-dcard__rank { position: absolute; top: .6rem; right: .8rem; font-size: .72rem; font-weight: 800; color: var(--ifmg-muted); }
.ifmg-dcard__name { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ifmg-muted); }
.ifmg-dcard__winner { font-size: 1.15rem; font-weight: 800; color: var(--ifmg-primary); margin: .1rem 0 .25rem; }
.ifmg-dcard__mat { display: inline-block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ifmg-ink-soft, var(--ifmg-ink)); background: var(--ifmg-bg); border-radius: 999px; padding: .1rem .55rem; margin-bottom: .5rem; }
.ifmg-dcard__vals { display: flex; gap: .5rem; align-items: baseline; font-weight: 700; color: var(--ifmg-ink); }
.ifmg-dcard__vs { color: var(--ifmg-muted); font-weight: 400; font-size: .85rem; }
.ifmg-dcard__why { margin-top: .4rem; font-size: .85rem; color: var(--ifmg-ink-soft, var(--ifmg-ink)); }
.ifmg-dash__closebox { background: var(--ifmg-bg); border-radius: var(--ifmg-radius); padding: 1rem 1.1rem; align-self: start; }
.ifmg-dash__closebox-head { font-weight: 700; color: var(--ifmg-ink); margin-bottom: .6rem; }
.ifmg-dash__closelist { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.ifmg-dash__closelist li { display: flex; justify-content: space-between; gap: .75rem; font-size: .85rem; border-bottom: 1px solid var(--ifmg-border); padding-bottom: .45rem; }
.ifmg-dash__cl-label { color: var(--ifmg-muted); } .ifmg-dash__cl-vals { font-weight: 600; color: var(--ifmg-ink); text-align: right; }
/* Which should you buy — buyer cards */
.ifmg-dash__buyers { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .9rem; }
.ifmg-bcard { border: 1px solid var(--ifmg-border); border-radius: var(--ifmg-radius); padding: 1.1rem 1.2rem; }
.ifmg-bcard--tiebreak { border-style: dashed; background: var(--ifmg-bg); }
.ifmg-bcard__title { font-weight: 800; font-size: 1.05rem; color: var(--ifmg-primary); margin-bottom: .35rem; }
.ifmg-bcard__body { font-size: .9rem; line-height: 1.5; color: var(--ifmg-ink-soft, var(--ifmg-ink)); margin: 0 0 .55rem; }
.ifmg-bcard__ev { font-size: .82rem; font-weight: 700; color: var(--ifmg-muted); }
/* Compact insight panels (driving / interior / fuel) */
.ifmg-insight { border: 1px solid var(--ifmg-border); border-radius: var(--ifmg-radius); padding: 1rem 1.2rem; }
.ifmg-insight__head { display: flex; align-items: center; gap: .75rem; }
.ifmg-insight__title { font-size: 1.15rem; font-weight: 700; color: var(--ifmg-ink); margin: 0; }
.ifmg-insight__winner { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #fff; background: var(--ifmg-primary); border-radius: 999px; padding: .15rem .7rem; }
.ifmg-insight__implication { font-size: .95rem; line-height: 1.55; color: var(--ifmg-ink-soft, var(--ifmg-ink)); margin: .4rem 0 .6rem; max-width: 62ch; }
.ifmg-insight__vals { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem .9rem; }
.ifmg-insight__vals li { font-size: .85rem; } .ifmg-insight__vlabel { color: var(--ifmg-muted); } .ifmg-insight__vval { font-weight: 700; color: var(--ifmg-ink); margin-left: .3rem; }
@media (max-width: 768px) {
  .ifmg-dash__grid, .ifmg-dash__split { grid-template-columns: 1fr; }
  .ifmg-dash__headline { font-size: 1.5rem; }
}


/* ===== Compare Experience V2 — one continuous canvas: Desire → Confidence → Trust ==========
   Zone 1 (cinematic, dark): Showdown hero + The Verdict.   Lift band: dark → daylight, once.
   Zone 3 (daylight): Why the Winner Wins / Which One Is Right For You / A Closer Look / What Doesn't
   Separate Them.   Zone 4 (floor): the matrix.   No section seams; each conclusion appears exactly once. */

/* --- Zone 1: Showdown hero (dark cinematic) --- */
.ifmg-cmphero {
    position: relative; min-height: 0; padding: 0; display: block; color: #fff;
    background: var(--ifmg-ink); overflow: hidden; isolation: isolate; text-align: center;
}
.ifmg-cmphero::before, .ifmg-cmphero::after { content: none; }
.ifmg-cmphero__bar { position: relative; z-index: 1; padding: var(--space-4) var(--space-5) var(--space-3); }
.ifmg-cmphero__eyebrow { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: color-mix(in srgb, var(--ifmg-primary) 62%, #fff); margin-bottom: .35rem; }
.ifmg-cmphero .ifmg-cmphero__title {
    margin: 0; font-weight: 800; line-height: 1.06; color: #fff;
    font-size: clamp(1.5rem, 3vw, 2.55rem); letter-spacing: -.015em;
    display: inline-flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: .2rem .6rem;
}
.ifmg-cmphero__t-veh { white-space: nowrap; }
.ifmg-cmphero__t-vs { color: color-mix(in srgb, var(--ifmg-primary) 68%, #fff); font-weight: 800; font-style: italic; }
/* Generated banner; its lower edge fades into the dark verdict surface so there is NO hero→verdict seam. */
.ifmg-cmphero__banner { position: relative; width: 100%; line-height: 0; background: var(--ifmg-ink); }
.ifmg-cmphero__bannerimg { display: block; width: 100%; height: clamp(210px, 26vw, 360px); object-fit: cover; object-position: center 44%; }
.ifmg-cmphero__banner::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 34%; background: linear-gradient(180deg, transparent, var(--ifmg-ink)); pointer-events: none; }
.ifmg-cmphero__pending { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; height: clamp(220px, 28vw, 360px); background: var(--ifmg-ink); color: rgba(255,255,255,.6); }
.ifmg-cmphero__pending-mark { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: color-mix(in srgb, var(--ifmg-primary) 24%, transparent); color: #fff; font-weight: 800; font-style: italic; font-size: 1.05rem; }
.ifmg-cmphero__pending-text { font-size: .9rem; font-weight: 600; letter-spacing: .02em; }

/* --- Zone 1: The Verdict — emerges from the hero on the same dark surface, flush, no seam. The page's
   emotional centerpiece: the winner commands the frame with real breathing room. --- */
.ifmg-section.ifmg-cx--verdict { background: var(--ifmg-ink); color: #fff; margin: 0; border: 0; padding: var(--space-6) 0 var(--space-12); text-align: center; }
.ifmg-cv__eyebrow { display: block; font-size: .74rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: color-mix(in srgb, var(--ifmg-primary) 62%, #fff); margin-bottom: .7rem; }
/* TL4 — verdict context bar: which exact trims produced this verdict (transparent, before the winner). */
.ifmg-cv__compared { margin: 0 auto .9rem; font-size: .92rem; color: color-mix(in srgb, #fff 72%, transparent); }
.ifmg-cv__compared b { color: #fff; font-weight: 700; }
.ifmg-cv__winrow { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .9rem; }
.ifmg-cv__winner { font-size: clamp(2.9rem, 6vw, 4.4rem); font-weight: 800; line-height: 1; color: #fff; letter-spacing: -.025em; }
.ifmg-cv__state { font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #fff; background: var(--ifmg-primary); border-radius: 999px; padding: .28rem .85rem; }
.ifmg-cv__conf { display: flex; align-items: center; justify-content: center; gap: .45rem; margin-top: .7rem; color: rgba(255,255,255,.85); }
.ifmg-cv__conf b { color: #fff; } .ifmg-cv__confsub { color: rgba(255,255,255,.6); font-size: .9rem; }
.ifmg-cv__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ifmg-primary); }
.ifmg-cv__why { max-width: 62ch; margin: .9rem auto 0; font-size: 1rem; line-height: 1.55; color: rgba(255,255,255,.82); }
.ifmg-cv__why b { color: #fff; }
.ifmg-cv__tally { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .35rem .8rem; margin-top: 1.1rem; font-size: .85rem; color: rgba(255,255,255,.6); }
.ifmg-cv__side { color: rgba(255,255,255,.7); } .ifmg-cv__side b { font-size: 1.5rem; color: #fff; margin-right: .25rem; }
.ifmg-cv__side.is-win b { color: color-mix(in srgb, var(--ifmg-primary) 68%, #fff); }
.ifmg-cv__vs { opacity: .5; text-transform: uppercase; font-size: .7rem; }
.ifmg-cv__close { opacity: .6; }

/* --- Lift band: a deliberate, felt dark → daylight transition (once), at the top of "Why the Winner
   Wins". The ink holds briefly, eases through a warm mid-tone, then opens into daylight — emotion → reason.
   Generous top padding lets the first reasoning land clearly in the light. --- */
.ifmg-section.ifmg-cx--why {
    background: linear-gradient(180deg,
        var(--ifmg-ink) 0%,
        color-mix(in srgb, var(--ifmg-ink) 55%, var(--ifmg-bg)) 7%,
        color-mix(in srgb, var(--ifmg-ink) 12%, var(--ifmg-bg)) 16%,
        var(--ifmg-bg) 26%, var(--ifmg-bg) 100%);
    border: 0; padding-top: var(--space-16);
}

/* --- Zone 3: daylight trust sections (continuous, no seams) --- */
.ifmg-section.ifmg-cx--which, .ifmg-section.ifmg-cx--closer, .ifmg-section.ifmg-cx--even { background: var(--ifmg-bg); border: 0; }
.ifmg-cx + .ifmg-cx { border-top: 0; }
.ifmg-cx--why, .ifmg-cx--which, .ifmg-cx--even { padding-bottom: var(--space-8); }
.ifmg-cx > .ifmg-container { max-width: 1100px; }
.ifmg-cx__eyebrow { display: block; font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ifmg-muted); margin-bottom: .6rem; }
.ifmg-cx__title { margin: 0 0 1.2rem; font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 800; color: var(--ifmg-ink); letter-spacing: -.01em; }
.ifmg-cx__sub { margin: -.8rem 0 1.2rem; color: var(--ifmg-muted); font-size: .95rem; }
.ifmg-cx__none { color: var(--ifmg-muted); }

/* Why-the-winner-wins difference cards */
.ifmg-cx__cards { display: grid; gap: .7rem; }
.ifmg-dcard { display: grid; grid-template-columns: auto 1fr auto; gap: .25rem 1rem; align-items: center; background: var(--ifmg-surface); border: 1px solid var(--ifmg-border); border-radius: var(--ifmg-radius); padding: 1rem 1.25rem; }
.ifmg-dcard__rank { grid-row: 1 / 3; align-self: start; font-size: 1.5rem; font-weight: 800; color: color-mix(in srgb, var(--ifmg-primary) 45%, var(--ifmg-muted)); }
.ifmg-dcard__name { font-weight: 800; color: var(--ifmg-ink); font-size: 1.05rem; }
.ifmg-dcard__winner { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: #fff; background: var(--ifmg-primary); border-radius: 999px; padding: .12rem .55rem; justify-self: end; }
.ifmg-dcard__mat { grid-column: 2; font-size: .72rem; color: var(--ifmg-muted); text-transform: uppercase; letter-spacing: .04em; }
.ifmg-dcard__vals { grid-column: 3; grid-row: 2; font-size: .85rem; color: var(--ifmg-muted); white-space: nowrap; }
.ifmg-dcard__vs { opacity: .5; margin: 0 .3rem; }
.ifmg-dcard__why { grid-column: 1 / 4; grid-row: 3; font-size: .9rem; line-height: 1.5; color: var(--ifmg-ink-soft, var(--ifmg-ink)); margin-top: .4rem; }

/* Which-one-is-right-for-you buyer cards */
.ifmg-cx__buyers { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .8rem; }
.ifmg-bcard { background: var(--ifmg-surface); border: 1px solid var(--ifmg-border); border-radius: var(--ifmg-radius); padding: 1rem 1.1rem; }
.ifmg-bcard__title { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--ifmg-ink); }
.ifmg-bcard__pick { font-weight: 800; color: var(--ifmg-primary); margin-top: .2rem; font-size: 1.05rem; }
.ifmg-bcard__body { margin: .35rem 0 0; font-size: .9rem; line-height: 1.5; color: var(--ifmg-muted); }
.ifmg-bcard__ev { margin-top: .4rem; font-size: .78rem; color: var(--ifmg-muted); }

/* A Closer Look — supporting depth, lighter weight, tighter rhythm */
.ifmg-cx--closer { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.ifmg-closer { background: var(--ifmg-surface); border: 1px solid var(--ifmg-border); border-radius: var(--ifmg-radius); padding: .9rem 1.2rem; }
.ifmg-closer__head { display: flex; align-items: baseline; gap: .6rem; }
.ifmg-closer__title { margin: 0; font-size: 1.02rem; font-weight: 800; color: var(--ifmg-ink); }
.ifmg-closer__winner { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--ifmg-primary); }
.ifmg-closer__implication { margin: .35rem 0 0; font-size: .9rem; line-height: 1.5; color: var(--ifmg-muted); }
.ifmg-closer__vals { list-style: none; margin: .6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.ifmg-closer__vals li { font-size: .78rem; background: var(--ifmg-bg); border-radius: 999px; padding: .2rem .6rem; color: var(--ifmg-ink); }
.ifmg-closer__vlabel { color: var(--ifmg-muted); margin-right: .3rem; }

/* What Doesn't Separate Them — neutral honesty band (no winner/advantage styling) */
.ifmg-even__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .6rem; }
.ifmg-even__list li { background: var(--ifmg-surface); border: 1px solid var(--ifmg-border); border-radius: var(--ifmg-radius); padding: .7rem .9rem; display: flex; flex-direction: column; }
.ifmg-even__label { font-weight: 700; color: var(--ifmg-ink); font-size: .9rem; }
.ifmg-even__vals { font-size: .82rem; color: var(--ifmg-ink-soft, var(--ifmg-ink)); }
.ifmg-even__note { font-size: .72rem; color: var(--ifmg-muted); margin-top: .15rem; }

@media (max-width: 640px) {
    .ifmg-cmphero__bar { padding: var(--space-5) var(--space-4) var(--space-3); }
    .ifmg-cmphero__bannerimg { height: clamp(190px, 52vw, 300px); }
    .ifmg-cv__winner { font-size: 2.2rem; }
    .ifmg-dcard { grid-template-columns: auto 1fr; }
    .ifmg-dcard__vals { grid-column: 1 / 3; grid-row: auto; white-space: normal; }
}

/* ===== Compare Experience V2.1 — premium finish (daylight continuity + descending hierarchy) =====
   The daylight trust zone flows as ONE continuous argument, with a clear descent of emphasis:
   Why (strongest) → Which (secondary) → A Closer Look (supporting) → What Doesn't Separate Them (quiet)
   → Matrix (quietest proof floor). Visual finish only — no structure, ownership, or logic changes. */

/* Continuity: tighten the daylight bands so they read as one column, not isolated modules. */
.ifmg-section.ifmg-cx--which { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.ifmg-section.ifmg-cx--even  { padding-top: var(--space-6); padding-bottom: var(--space-7); }
.ifmg-section.ifmg-cx--closer { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.ifmg-cx > .ifmg-container { max-width: 1040px; }

/* Descent of heading weight. */
.ifmg-cx--why  .ifmg-cx__title { font-size: clamp(1.6rem, 2.8vw, 2.2rem); margin-bottom: 1.3rem; }
.ifmg-cx--which .ifmg-cx__title { font-size: clamp(1.25rem, 2vw, 1.6rem); color: var(--ifmg-ink); }
.ifmg-cx--even .ifmg-cx__title { font-size: clamp(1rem, 1.5vw, 1.2rem); color: var(--ifmg-muted); font-weight: 700; margin-bottom: .5rem; }
.ifmg-cx--even .ifmg-cx__sub { display: none; }   /* quiet band — title alone carries it */
.ifmg-cx--closer .ifmg-cx__eyebrow { color: var(--ifmg-muted); }

/* "Why" cards stay the strongest (subtle lift). "Which" cards present but flatter. */
.ifmg-cx--why .ifmg-dcard { box-shadow: 0 1px 3px rgba(15,23,42,.06); }

/* A Closer Look → supporting depth: borderless hairline rows, not cards; lighter, tighter. */
.ifmg-cx--closer .ifmg-closer { background: transparent; border: 0; border-top: 1px solid var(--ifmg-border); border-radius: 0; padding: .7rem 0 .55rem; }
.ifmg-cx--closer .ifmg-closer__title { font-size: .95rem; }
.ifmg-cx--closer .ifmg-closer__implication { font-size: .85rem; }
.ifmg-cx--closer .ifmg-closer__vals li { background: transparent; padding: .1rem 0; color: var(--ifmg-muted); }
.ifmg-cx--closer .ifmg-closer__vals { gap: .15rem 1rem; }

/* What Doesn't Separate Them → quiet honesty: borderless muted rows, no card energy. */
.ifmg-even__list { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 1.5rem; }
.ifmg-even__list li { background: transparent; border: 0; border-top: 1px solid var(--ifmg-border); border-radius: 0; padding: .5rem 0; }
.ifmg-even__label { font-weight: 600; color: var(--ifmg-ink-soft, var(--ifmg-ink)); }
.ifmg-even__vals { color: var(--ifmg-muted); }

/* Matrix → quietest proof floor: drop the loud solid-primary subject header to a calm tint; smaller heading. */
.ifmg-compare--matrix thead th.ifmg-compare__subject {
    background: color-mix(in srgb, var(--ifmg-primary) 10%, var(--ifmg-bg)); color: var(--ifmg-ink);
    border-bottom: 2px solid color-mix(in srgb, var(--ifmg-primary) 45%, var(--ifmg-border));
}
.ifmg-compare--matrix .ifmg-compare__subject { background: color-mix(in srgb, var(--ifmg-primary) 5%, var(--ifmg-surface)); }
.ifmg-compare--matrix tbody tr:hover { background: var(--ifmg-bg); }

/* Mobile finish: compress supporting + neutral; keep the matrix contained as quiet receipts. */
@media (max-width: 640px) {
    .ifmg-section.ifmg-cx--which { padding-top: var(--space-5); padding-bottom: var(--space-5); }
    .ifmg-section.ifmg-cx--even { padding-top: var(--space-4); padding-bottom: var(--space-5); }
    .ifmg-cx--closer .ifmg-closer__vals { display: none; }   /* keep depth, drop the chip clutter on phones */
    .ifmg-even__list { grid-template-columns: 1fr; }
    .ifmg-compare--matrix td, .ifmg-compare--matrix thead th { min-width: 7rem; font-size: .85rem; }
}

/* ===== Compare Experience V2.3 — Final finish pass (Golden Reference) ==============================
   Visual + experiential only; no structure / ownership / logic changes. Four goals:
   (1) The verdict is the centerpiece — the hero hands the user the answer.
   (2) The daylight zone reads as ONE continuous argument, not a stack of modules.
   (3) Each level visibly surrenders importance (certainty → explanation → personalization → support → neutral → proof).
   (4) The matrix is a quiet reference floor, not a competing experience. */

/* (1) VERDICT CENTERPIECE. Shrink the Showdown banner so the winner enters the first viewport, and give
   the winner real scale + breathing room so the eye transfers from the image to the decision. */
.ifmg-cmphero__bar { padding: var(--space-3) var(--space-5) var(--space-2); }
.ifmg-cmphero__bannerimg { height: clamp(165px, 18vw, 264px); object-position: center 46%; }
.ifmg-section.ifmg-cx--verdict { padding-top: var(--space-6); padding-bottom: var(--space-12); }
.ifmg-cv__winner { font-size: clamp(3.2rem, 6.6vw, 5rem); letter-spacing: -.03em; }
.ifmg-cv__winrow { gap: 1rem; margin-top: .15rem; }
.ifmg-cv__state { align-self: center; }
.ifmg-cv__why { margin-top: 1.15rem; }
.ifmg-cv__tally { margin-top: 1.45rem; }

/* (2)+(3) ONE DESCENDING ARGUMENT. Pull the daylight bands together so they read as a single column,
   and stage the emphasis. "Why" keeps elevated cards (strongest); "Which" steps down to flat tint cards;
   "Closer" + "Even" are quiet hairline rows (handled in V2.1). No band restarts the card rhythm. */
.ifmg-section.ifmg-cx--why { padding-top: var(--space-12); padding-bottom: var(--space-6); }
.ifmg-section.ifmg-cx--which { padding-top: var(--space-5); padding-bottom: var(--space-5); }
.ifmg-section.ifmg-cx--closer { padding-top: 0; }
/* "Which" surrenders the card energy of "Why": flat, borderless, gently tinted — present but secondary. */
.ifmg-cx--which .ifmg-bcard {
    background: color-mix(in srgb, var(--ifmg-primary) 4%, var(--ifmg-surface));
    border-color: transparent; box-shadow: none;
}
/* The only structural marker left in the daylight column is the single "A closer look" lead-in — quiet it
   so it reads as a turn in the same argument, not a new section. */
.ifmg-cx--closer .ifmg-cx__eyebrow { font-size: .66rem; letter-spacing: .16em; opacity: .8; }

/* (4) MATRIX = QUIET PROOF FLOOR. Mute the heading to a label, calm the subject highlight to a barely-there
   tint, and quiet the winners receipt — it validates, it does not persuade. */
.ifmg-section.ifmg-cx--matrix { background: var(--ifmg-bg); border: 0; padding-top: var(--space-10); padding-bottom: var(--space-12); }
.ifmg-cx--matrix .ifmg-eyebrow { color: var(--ifmg-muted); font-size: .66rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.ifmg-cx--matrix h2 { font-size: clamp(1.05rem, 1.6vw, 1.3rem); font-weight: 700; color: var(--ifmg-ink-soft, var(--ifmg-ink)); margin: .15rem 0 1rem; letter-spacing: 0; }
.ifmg-cx--matrix .ifmg-compare { border-color: var(--ifmg-border); }
.ifmg-cx--matrix .ifmg-compare--matrix thead th.ifmg-compare__subject {
    background: color-mix(in srgb, var(--ifmg-primary) 7%, var(--ifmg-bg)); color: var(--ifmg-ink);
    border-bottom: 2px solid color-mix(in srgb, var(--ifmg-primary) 38%, var(--ifmg-border));
}
.ifmg-cx--matrix .ifmg-compare--matrix .ifmg-compare__subject { background: color-mix(in srgb, var(--ifmg-primary) 3.5%, var(--ifmg-surface)); }
.ifmg-cx--matrix .ifmg-compare__winners { color: var(--ifmg-muted); }

/* (5) MOBILE finish. Keep the verdict commanding and the matrix contained; trim length. */
@media (max-width: 640px) {
    .ifmg-cmphero__bannerimg { height: clamp(150px, 40vw, 220px); }
    .ifmg-section.ifmg-cx--verdict { padding-top: var(--space-5); padding-bottom: var(--space-8); }
    /* Keep the winner commanding but fully on-screen: allow it to wrap, never clip (long model names too). */
    .ifmg-cv__winner { font-size: clamp(1.75rem, 7.6vw, 2.2rem); max-width: 100%; overflow-wrap: anywhere; }
    .ifmg-cv__winrow { width: 100%; gap: .7rem; }
    .ifmg-section.ifmg-cx--why { padding-top: var(--space-8); padding-bottom: var(--space-5); }
    .ifmg-section.ifmg-cx--matrix { padding-top: var(--space-6); padding-bottom: var(--space-8); }
    .ifmg-cx--matrix h2 { font-size: 1.05rem; }
}

/* ===== Compare Experience V4 — EXACT MOCKUP ========================================================
   Hero (image + centered title) → overlapping trim-selector card → navy Verdict card → Who should buy
   which → The real differences → Full specifications → FAQ + Related (two-column). Self-contained
   cmpv4-* system on the comparison page (body.cmp-v4); does not touch other page types. */
body.cmp-v4 { background: #F5F6F8; overflow-x: hidden; }
.cmpv4-wrap { max-width: 1180px; margin: 0 auto; padding: 0 40px; }
.cmpv4-h2 { font-size: 28px; font-weight: 800; color: #07111F; line-height: 1.15; margin: 32px 0 16px; }
/* Let grid/flex children shrink below content width so nothing widens the page on small screens. */
.cmpv4-verdict, .cmpv4-buy, .cmpv4-diffs, .cmpv4-selector, .cmpv4-support { min-width: 0; }
.cmpv4-verdict > *, .cmpv4-selector > *, .cmpv4-support__col, .cmpv4-field, .cmpv4-buycard, .cmpv4-diff { min-width: 0; }
.cmpv4-verdict__text, .cmpv4-diff__body, .cmpv4-diff__title, .cmpv4-buycard__list li { overflow-wrap: anywhere; }
/* Related-comparison cards sit in a narrower support column — keep them single-column there. */
.cmpv4-support .auto-card-grid { grid-template-columns: 1fr; gap: 16px; }

/* Hero — full-width image with a centered title overlay (no verdict/score/badges in the hero). */
/* Full-bleed hero on the approved compare-hero/vNext image (golden-hour, cars middle/lower, clean sky for
   the title and clean foreground pavement for the overlapping selector). cover + center center; subtle
   gradient only (never a dark block). */
/* Premium full-bleed hero with a STABLE composition box. The image box is a FIXED 1920px-wide composition
   (not viewport-width), centered and clipped by the hero — so the cover crop is computed once against a
   constant box. The car composition is identical at every desktop width (1024–1920); resizing only reveals
   more/less of the side margins (overflow), never recomposing the cars or shifting them vertically. Full-bleed,
   no contain, no backdrop, no letterbox. Beyond 1920 min-width keeps it full-bleed (more side crop only). */
.cmpv4-hero { position: relative; height: 560px; overflow: hidden; background: #07111F; }
/* Box stays exactly hero-sized and centered (translate -50% = full coverage, never exposes background).
   The vehicles are lifted by PANNING the cover crop downward via object-position-Y (stays full-bleed; the
   fixed 1920px box keeps it stable across widths). Higher % = cars sit higher in the frame. */
.cmpv4-hero__img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 1920px; min-width: 100%; max-width: none; height: 100%; object-fit: cover; object-position: center 82%; display: block; z-index: 1; }
.cmpv4-hero__img--pending { background: linear-gradient(120deg, #0d1b2e, #20405f); }
/* Subtle title-legibility gradient: a gentle top band + a soft pool behind the centered title. No dark band. */
.cmpv4-hero__scrim { position: absolute; inset: 0; z-index: 2; background:
    linear-gradient(180deg, rgba(7,17,31,.34) 0%, rgba(7,17,31,.08) 32%, rgba(7,17,31,0) 58%),
    radial-gradient(64% 50% at 50% 42%, rgba(7,17,31,.38), rgba(7,17,31,0) 72%); }
/* Title anchored to a fixed point in the hero (top 40%, horizontally centered) so its position is stable
   across all widths and never tied to the image crop. (top % is relative to hero height.) */
.cmpv4-hero__title { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); z-index: 3; margin: 0; width: max-content; max-width: 90%; display: flex; flex-direction: column; align-items: center; gap: .02em; text-align: center; color: #fff; font-size: 52px; font-weight: 800; line-height: 1.04; letter-spacing: -.015em; text-shadow: 0 2px 22px rgba(0,0,0,.5); }
.cmpv4-hero__vs { color: #D0021B; font-style: italic; }

/* Trim-selector card — overlaps the hero bottom. */
.cmpv4-card { background: #fff; border-radius: 10px; box-shadow: 0 8px 24px rgba(15,23,42,.10); }
.cmpv4-selector { position: relative; z-index: 3; margin-top: -16px; padding: 32px; display: grid; grid-template-columns: 90px 1fr 220px; gap: 24px; align-items: center; }
.cmpv4-selector__icon { width: 84px; height: 84px; border-radius: 50%; background: #F5F6F8; color: #D0021B; display: flex; align-items: center; justify-content: center; }
.cmpv4-selector__body { min-width: 0; }
.cmpv4-selector__q { margin: 0 0 14px; font-size: 28px; font-weight: 800; color: #07111F; line-height: 1.15; }
.cmpv4-selector__controls { display: flex; align-items: flex-end; gap: 16px; }
.cmpv4-field { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cmpv4-field__label { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: #6B7280; }
.cmpv4-field__select { height: 56px; border: 1px solid #D6DAE1; border-radius: 6px; padding: 0 14px; font-size: 16px; color: #07111F; background: #fff; width: 100%; }
.cmpv4-selector__vs { color: #6B7280; font-weight: 700; padding-bottom: 16px; }
.cmpv4-selector__help { margin: 14px 0 0; font-size: 13px; color: #6B7280; }
.cmpv4-selector__btn { align-self: center; justify-self: end; height: 56px; width: 220px; border: 0; border-radius: 6px; background: #D0021B; color: #fff; font-weight: 800; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }

/* Verdict card — navy, three-column score. */
.cmpv4-verdict { margin-top: 32px; background: #07111F; color: #fff; border-radius: 8px; padding: 36px; display: grid; grid-template-columns: 120px 1fr 360px; gap: 24px; align-items: center; }
.cmpv4-verdict__icon { width: 96px; height: 96px; border-radius: 50%; border: 2px solid rgba(255,255,255,.28); color: #fff; display: flex; align-items: center; justify-content: center; }
.cmpv4-verdict__label { display: block; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.55); margin-bottom: 8px; }
.cmpv4-verdict__headline { margin: 0 0 12px; font-size: 36px; font-weight: 800; text-transform: uppercase; line-height: 1.05; color: #fff; }
.cmpv4-verdict__text { margin: 0; font-size: 16px; line-height: 1.5; color: rgba(255,255,255,.8); max-width: 560px; }
.cmpv4-verdict__score { display: flex; }
.cmpv4-score { flex: 1; text-align: center; padding: 0 12px; border-left: 1px solid rgba(255,255,255,.14); }
.cmpv4-score:first-child { border-left: 0; }
.cmpv4-score__n { display: block; font-size: 34px; font-weight: 800; color: #D0021B; line-height: 1; }
.cmpv4-score__l { display: block; margin-top: 6px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #fff; }

/* Who should buy which — two vehicle-keyed cards. */
.cmpv4-buy { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.cmpv4-buycard { position: relative; overflow: hidden; border-radius: 8px; padding: 28px; min-height: 190px; box-shadow: 0 6px 18px rgba(15,23,42,.06); }
.cmpv4-buycard--rival { background: #FFF1F2; }
.cmpv4-buycard--subject { background: #F1F7FF; }
/* Vehicle photo anchored bottom-right behind the (left-aligned) copy — fills the empty corner like the mockup. */
.cmpv4-buycard__veh { position: absolute; right: -8px; bottom: -6px; width: 210px; max-width: 46%; height: auto; object-fit: contain; opacity: .9; z-index: 0; pointer-events: none; }
.cmpv4-buycard > :not(.cmpv4-buycard__veh) { position: relative; z-index: 1; }
.cmpv4-buycard__icon { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; margin-bottom: 14px; }
.cmpv4-buycard--rival .cmpv4-buycard__icon { background: #D0021B; }
.cmpv4-buycard--subject .cmpv4-buycard__icon { background: #0B4A8F; }
.cmpv4-buycard__head { font-size: 18px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; margin-bottom: 12px; }
.cmpv4-buycard--rival .cmpv4-buycard__head { color: #D0021B; }
.cmpv4-buycard--subject .cmpv4-buycard__head { color: #0B4A8F; }
.cmpv4-buycard__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.cmpv4-buycard__list li { position: relative; padding-left: 26px; font-size: 16px; color: #1f2937; line-height: 1.4; }
.cmpv4-buycard__list li::before { content: "\2713"; position: absolute; left: 0; top: 0; font-weight: 800; }
.cmpv4-buycard--rival .cmpv4-buycard__list li::before { color: #D0021B; }
.cmpv4-buycard--subject .cmpv4-buycard__list li::before { color: #0B4A8F; }

/* The real differences — three buyer-insight cards (insight first, spec values second). */
.cmpv4-diffs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cmpv4-diff { background: #fff; border-radius: 8px; padding: 28px; box-shadow: 0 6px 18px rgba(15,23,42,.10); }
.cmpv4-diff__icon { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; color: #fff; margin-bottom: 16px; }
.cmpv4-diff__icon--green { background: #138A36; } .cmpv4-diff__icon--blue { background: #1463B8; }
.cmpv4-diff__icon--purple { background: #6B3FA0; } .cmpv4-diff__icon--orange { background: #C2410C; } .cmpv4-diff__icon--navy { background: #07111F; }
.cmpv4-diff__title { font-size: 18px; font-weight: 800; text-transform: uppercase; color: #07111F; line-height: 1.2; margin-bottom: 10px; }
.cmpv4-diff__body { margin: 0 0 16px; font-size: 16px; line-height: 1.5; color: #4b5563; }
.cmpv4-diff__data { font-size: 22px; font-weight: 800; }
.cmpv4-diff__data--green { color: #138A36; } .cmpv4-diff__data--blue { color: #1463B8; }
.cmpv4-diff__data--purple { color: #6B3FA0; } .cmpv4-diff__data--orange { color: #C2410C; } .cmpv4-diff__data--navy { color: #07111F; }
.cmpv4-diffs__none { color: #6B7280; font-size: 16px; }

/* Full specifications — reference table. */
.cmpv4-specs { margin-top: 8px; }
.cmpv4-specs__scroll { overflow-x: auto; background: #fff; border-radius: 6px; box-shadow: 0 6px 18px rgba(15,23,42,.08); -webkit-overflow-scrolling: touch; }
.cmpv4-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cmpv4-table thead th { background: #07111F; color: #fff; font-weight: 700; text-align: left; padding: 0 16px; height: 46px; white-space: nowrap; }
/* Subject column: same navy as the rest — only a thin red top accent marks "your vehicle". Reference, not loud. */
.cmpv4-table thead th.cmpv4-table__subject { background: #07111F; box-shadow: inset 0 2px 0 0 #D0021B; }
.cmpv4-table tbody th, .cmpv4-table tbody td { height: 34px; padding: 0 16px; border-bottom: 1px solid #ECEEF1; text-align: left; }
.cmpv4-table tbody th { font-weight: 600; color: #07111F; white-space: nowrap; }
.cmpv4-table tbody td { color: #1f2937; }
.cmpv4-table tbody tr:last-child th, .cmpv4-table tbody tr:last-child td { border-bottom: 0; }
.cmpv4-specs__more { text-align: center; margin-top: 16px; }
.cmpv4-specs__more a { color: #1463B8; font-weight: 700; text-decoration: none; font-size: 15px; }
.cmpv4-specs__more a:hover { text-decoration: underline; }

/* FAQ + Related — two-column support row. Inner section wrappers are neutralized to sit as plain columns. */
.cmpv4-support { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 32px; padding-bottom: 8px; align-items: start; }
.cmpv4-support .ifmg-section { padding: 0; background: transparent; margin: 0; border: 0; }
.cmpv4-support .ifmg-container, .cmpv4-support .ifmg-container--wide { padding: 0; max-width: none; margin: 0; width: 100%; }

@media (max-width: 860px) {
    .cmpv4-wrap { padding: 0 20px; }
    .cmpv4-hero { height: 390px; }
    /* Mobile: fixed-width composition box (760) like desktop, so object-position can pan the crop down
       (center 82%) to lift the cars and reveal the front tires; stable across phone widths. */
    .cmpv4-hero__img { top: 50%; left: 50%; transform: translate(-50%, -50%); width: 760px; min-width: 100%; max-width: none; height: 100%; object-fit: cover; object-position: center 82%; }
    .cmpv4-hero__title { font-size: 34px; top: 38%; }
    .cmpv4-selector { grid-template-columns: 1fr; gap: 16px; margin-top: -12px; padding: 24px; }
    .cmpv4-selector__icon { display: none; }
    .cmpv4-selector__q { font-size: 24px; }
    .cmpv4-selector__controls { flex-direction: column; align-items: stretch; }
    .cmpv4-selector__vs { display: none; }
    .cmpv4-selector__btn { width: 100%; justify-self: stretch; }
    .cmpv4-h2 { font-size: 24px; }
    .cmpv4-verdict { grid-template-columns: 1fr; padding: 28px; text-align: center; }
    .cmpv4-verdict__icon { margin: 0 auto; }
    .cmpv4-verdict__headline { font-size: 28px; }
    .cmpv4-verdict__text { margin: 0 auto; }
    .cmpv4-verdict__score { margin-top: 6px; }
    .cmpv4-buy { grid-template-columns: 1fr; }
    .cmpv4-buycard { min-height: 0; }
    .cmpv4-diffs { grid-template-columns: 1fr; }
    .cmpv4-diff__body, .cmpv4-buycard__list li { font-size: 15px; }
    .cmpv4-support { grid-template-columns: 1fr; gap: 24px; }
}

/* ============================================================================
   Compare Experience V6 — borderless editorial (body.cmp-v6). A magazine-style
   comparison that holds on type, spacing, and hierarchy: NO cards/boxes except
   the hero media, the ad interstitial, and the closing CTA. Order: pairing hero
   (title -> selector -> imagery -> whisper stats) -> short answer -> real
   differences -> verdict -> quiet/collapsible specs -> ad -> which-one ->
   deep FAQ -> related -> CTA. Replaces the cmpv4 card system.
   ============================================================================ */
/* ----------------------------------------------------------------------------
   V6 inherits the Honda ifmg-* design language: an immersive full-bleed hero
   (mirrors .cms-trim .ifmg-trimhero + .ifmg-hero), Honda section rhythm + zone
   bands, brand-blue/orange accents, accent-bar eyebrows, and a full-width CTA
   band. Architecture, section order, and all behaviour hooks are unchanged —
   this is purely the visual reconciliation layer. Local tokens fall back to the
   locked brand values so V6 holds even if a site hasn't themed --ifmg-primary.
   ---------------------------------------------------------------------------- */
body.cmp-v6 { background: var(--ifmg-surface, #fff); overflow-x: hidden; }

/* Honda-width content column (mirrors .ifmg-trimhero__inner / .ifmg-container--wide). */
.cmpv6 { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* ===== Hero — full-bleed immersive (vehicle imagery dominant; copy overlays the scrim) ===== */
.cmpv6-hero {
    position: relative; overflow: hidden; isolation: isolate;
    min-height: 415px; display: flex; align-items: center;
    /* Brand gradient base shows behind the pending state + edges (mirrors .ifmg-hero). */
    background: linear-gradient(115deg,
        color-mix(in srgb, var(--ifmg-primary, var(--ifmg-blue)) 94%, #000) 0%,
        color-mix(in srgb, var(--ifmg-secondary, var(--ifmg-ink)) 70%, #000) 100%);
    color: #fff;
}
/* Media layer — the vehicle composition, full-bleed cover behind a dark brand scrim. */
.cmpv6-hero__media { position: absolute; inset: 0; z-index: 0; }
.cmpv6-hero__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 62%; border: 0; border-radius: 0; margin: 0; filter: saturate(1.12) contrast(1.12) brightness(1.02); }
/* Scrim: dark at the top (nav legibility) and bottom (selector overlap) but LIGHT through the middle band so
   the vehicles stay dominant. Title legibility over the lighter middle comes from its own strengthened shadow. */
.cmpv6-hero__media::before {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background:
        radial-gradient(120% 78% at 50% 46%, rgba(0,0,0,0) 38%, rgba(0,0,0,.28) 100%),
        linear-gradient(180deg, rgba(0,0,0,.52) 0%, rgba(0,0,0,.10) 30%, rgba(0,0,0,.10) 62%, rgba(0,0,0,.58) 100%);
}
/* Pending state — a brand-gradient placeholder, never a silhouette dressed up as final. */
.cmpv6-hero__img--pending {
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.78); font-size: 14px; letter-spacing: .02em; text-align: center; padding: 24px;
    background: linear-gradient(115deg,
        color-mix(in srgb, var(--ifmg-primary, var(--ifmg-blue)) 90%, #000) 0%,
        color-mix(in srgb, var(--ifmg-secondary, var(--ifmg-ink)) 72%, #000) 100%);
}
/* Overlay column — centered to the Honda content width; sits above the media/scrim. */
.cmpv6-hero__inner { position: relative; z-index: 2; width: 100%; max-width: 1180px; margin: 0 auto; padding: 2rem 24px; text-align: center; }
.cmpv6-eyebrow {
    text-transform: uppercase; letter-spacing: .14em; font-weight: 700; font-size: .85rem;
    color: color-mix(in srgb, var(--ifmg-accent, var(--ifmg-orange)) 58%, #fff);
    display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 .7rem;
    text-shadow: 0 1px 2px rgba(0,0,0,.45);
}
.cmpv6-eyebrow::before { content: ""; width: 30px; height: 2px; background: var(--ifmg-accent, var(--ifmg-orange)); flex: none; }
.cmpv6-title {
    font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1.05; font-weight: 800; letter-spacing: -.02em;
    color: #fff; margin: 0 auto; max-width: 22ch;
    text-shadow: 0 2px 6px rgba(0,0,0,.6), 0 6px 30px rgba(0,0,0,.5);
}
.cmpv6-title .cmpv6-vs { display: block; font-weight: 800; font-style: italic; color: var(--ifmg-primary, var(--ifmg-blue)); }
/* Selector — white-on-dark hero furniture (the GET form + st/rt selects are unchanged markup). */
.cmpv6-selector { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin: 0 0 1.6rem; }
.cmpv6-field { display: flex; flex-direction: column; gap: 6px; }
.cmpv6-field__label { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.85); text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.cmpv6-field__select {
    appearance: none; -webkit-appearance: none;
    background-color: rgba(255,255,255,.10); border: 1.5px solid rgba(255,255,255,.55); border-radius: 10px;
    padding: 11px 38px 11px 14px; font: 600 16px/1 inherit; color: #fff; min-width: 184px; cursor: pointer;
    backdrop-filter: blur(3px);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center;
}
.cmpv6-field__select:hover, .cmpv6-field__select:focus { border-color: #fff; outline: none; }
/* The native option list renders on the OS surface — keep it readable (dark text on white). */
.cmpv6-field__select option { color: var(--ifmg-ink); background: #fff; }
.cmpv6-selector__vs { font-size: 14px; color: rgba(255,255,255,.75); padding-bottom: 12px; }
.cmpv6-stats { display: flex; gap: 28px; flex-wrap: wrap; font-size: 14px; color: rgba(255,255,255,.82); margin: 0; }
.cmpv6-stats b { color: #fff; font-weight: 700; }

/* ===== Selector card — straddles the hero/body boundary (overlaps the hero bottom; remainder in the body) ===== */
.cmpv6-selwrap { max-width: 1180px; margin: -56px auto 0; padding: 0 24px; position: relative; z-index: 3; }
/* Compact premium controls (not a form block): tighter padding/height, narrower card. The -56px hero
   overlap (.cmpv6-selwrap) is intentionally unchanged. */
.cmpv6-selcard {
    max-width: 720px; margin: 0 auto; background: #fff; border-radius: var(--ifmg-radius, 16px);
    box-shadow: 0 20px 54px -18px rgba(15,23,32,.32); padding: 1rem 1.4rem;
    display: flex; align-items: center; gap: 1rem;
}
.cmpv6-selcard__icon { flex: none; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--ifmg-primary, var(--ifmg-blue)); background: color-mix(in srgb, var(--ifmg-primary, var(--ifmg-blue)) 10%, #fff); }
.cmpv6-selcard__icon svg { width: 22px; height: 22px; }
.cmpv6-selcard__body { flex: 1 1 auto; min-width: 0; }
.cmpv6-selcard__q { font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; color: var(--ifmg-ink); margin: 0 0 .5rem; }
/* Controls fill the card width (the two trim selects grow equally) — removes the dead whitespace on the right
   WITHOUT changing the card size, icon, heading, or dropdown height/font. */
.cmpv6-selcard__controls { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.cmpv6-selcard__vs { font-size: 14px; color: var(--ifmg-muted); padding-bottom: 8px; flex: none; }
.cmpv6-selcard .cmpv6-field { gap: 4px; flex: 1 1 0; min-width: 0; }
.cmpv6-selcard .cmpv6-field__select { padding: 8px 34px 8px 12px; font-size: 15px; min-width: 0; width: 100%; }
.cmpv6-selcard .cmpv6-field__label { font-size: 11px; }
.cmpv6-selcard__btn {
    flex: none; align-self: center; background: var(--ifmg-primary, var(--ifmg-blue)); color: #fff; border: 0;
    border-radius: var(--ifmg-radius-sm, 8px); padding: .95rem 1.6rem; font: 700 .9rem/1 inherit;
    text-transform: uppercase; letter-spacing: .05em; cursor: pointer; white-space: nowrap; transition: background .15s ease;
}
.cmpv6-selcard__btn:hover { background: color-mix(in srgb, var(--ifmg-primary, var(--ifmg-blue)) 85%, #000); }
/* Card-context selects: dark-on-white with a neutral border (override the white-on-dark hero field styling). */
.cmpv6-selcard .cmpv6-field__label { color: var(--ifmg-muted); text-shadow: none; }
.cmpv6-selcard .cmpv6-field__select {
    background-color: #fff; border: 1.5px solid var(--ifmg-border); color: var(--ifmg-ink); backdrop-filter: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%235F5E5A' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
}
.cmpv6-selcard .cmpv6-field__select:hover, .cmpv6-selcard .cmpv6-field__select:focus { border-color: var(--ifmg-primary, var(--ifmg-blue)); }
/* Whisper stats — subtle, centered, below the card (light context overrides the dark-hero white). */
.cmpv6-selwrap .cmpv6-stats { justify-content: center; color: var(--ifmg-muted); margin: 1.1rem auto 0; text-shadow: none; }
.cmpv6-selwrap .cmpv6-stats b { color: var(--ifmg-ink); font-weight: 700; }

/* ===== Section rhythm + zones — tightened for density + scanning momentum (was 4rem/6rem bands) ===== */
.cmpv6-section { padding: 2.75rem 0; }
.cmpv6-section + .cmpv6-section { border-top: 1px solid var(--ifmg-border); }
/* Full-bleed band backgrounds with centered inner content. White is the default surface; tint + verdict
   bands break the page into readable zones. The hero/CTA bands own their own surfaces (below). */
.cmpv6-section--tint { background: var(--ifmg-bg); padding-top: 3rem; padding-bottom: 3rem; }
.cmpv6-section--verdict { background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--ifmg-primary, var(--ifmg-blue)) 7%, transparent) 0%, transparent 60%),
    var(--ifmg-bg, #f1f4f8); }
.cmpv6-section--which { background: var(--ifmg-surface, #fff); }
.cmpv6-section--decision { background: var(--ifmg-surface, #fff); padding-top: 2.5rem; }
.cmpv6-section--wins { /* the visual centerpiece — keep the tint band's generous padding (set by --tint) */ }
/* When a tint band follows the hero or another tint band the divider is redundant — let the surface speak. */
.cmpv6-hero + .cmpv6-section { border-top: 0; }
/* Per-section readable measures (spec): verdict widened to 1080 for the main+why split, specs/faq 900,
   decision/wins/which wider for the grids. */
.cmpv6-section--verdict .cmpv6 { max-width: 1180px; } /* the answer — widest, most dominant block */
.cmpv6-section--verdict { padding: 3.25rem 0; } /* a touch more air than other bands so the verdict commands */
.cmpv6-section--tint .cmpv6 { max-width: 1080px; } /* head-to-head matrix + FAQ two-column want more width */
.cmpv6-section--decision .cmpv6, .cmpv6-section--which .cmpv6 { max-width: 1080px; }
.cmpv6-section--specs .cmpv6, .cmpv6-section--faq .cmpv6 { max-width: 900px; }

/* Section heading scale (Honda section scale) + the in-band accent-bar eyebrow. */
.cmpv6-h { font-size: clamp(1.9rem, 2.6vw, 2.2rem); font-weight: 800; letter-spacing: -.02em; color: var(--ifmg-ink); margin: 0 0 .85rem; }
.cmpv6-eyebrow--section {
    /* On light bands the eyebrow uses the primary brand colour + a solid accent bar (mirrors .ifmg-eyebrow
       and .ifmg-hero .ifmg-eyebrow::before), overriding the white hero variant above. */
    color: var(--ifmg-primary, var(--ifmg-blue)); text-shadow: none; margin-bottom: .5rem;
}
.cmpv6-eyebrow--section::before { background: var(--ifmg-accent, var(--ifmg-orange)); }

/* ===== Matchup orientation module ("What this matchup really means") — the buying-guide entry point ===== */
.cmpv6-section--matchup { background: var(--ifmg-surface, #fff); }
.cmpv6-section--matchup .cmpv6 { max-width: 1080px; }
.cmpv6-matchup__lead { font-size: 1.12rem; font-weight: 600; color: var(--ifmg-ink); margin: 0 0 1.4rem; }
.cmpv6-matchup__body { color: var(--ifmg-body, #333); font-size: 1rem; line-height: 1.7; }
.cmpv6-matchup__body p { margin: 0 0 1rem; }
.cmpv6-matchup__body p:last-child { margin-bottom: 0; }
.cmpv6-matchup__fallback-label {
    display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--ifmg-ink);
    background: color-mix(in srgb, var(--ifmg-accent, var(--ifmg-orange)) 12%, #fff);
    border: 1px solid color-mix(in srgb, var(--ifmg-accent, var(--ifmg-orange)) 35%, #fff);
    border-radius: 999px; padding: .45rem .95rem; margin: 0 0 1rem;
}
.cmpv6-matchup__fallback-label .bi { color: var(--ifmg-accent, var(--ifmg-orange)); }
/* Positioning cards — two "what each trim is" cards (subject = brand red, rival = navy). */
.cmpv6-poscards { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 0 0 1.1rem; }
.cmpv6-poscard {
    background: var(--ifmg-surface, #fff); border: 1px solid var(--ifmg-border, #e6e9ee);
    border-radius: var(--ifmg-radius, 16px); padding: 1.3rem 1.45rem; border-top: 4px solid var(--ifmg-muted, #98a2b3);
    box-shadow: 0 12px 32px -24px rgba(15,23,32,.45);
}
.cmpv6-poscard--subject { border-top-color: var(--ifmg-primary, var(--ifmg-blue)); }
.cmpv6-poscard--rival { border-top-color: var(--cmpv6-rival); }
.cmpv6-poscard__tag {
    display: inline-block; text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; font-weight: 800;
    padding: .25rem .6rem; border-radius: 999px; margin: 0 0 .6rem;
}
.cmpv6-poscard--subject .cmpv6-poscard__tag { color: var(--ifmg-primary, var(--ifmg-blue)); background: color-mix(in srgb, var(--ifmg-primary, var(--ifmg-blue)) 12%, #fff); }
.cmpv6-poscard--rival .cmpv6-poscard__tag { color: var(--cmpv6-rival); background: color-mix(in srgb, var(--cmpv6-rival) 12%, #fff); }
.cmpv6-poscard__name { font-size: 1.2rem; font-weight: 800; color: var(--ifmg-ink); margin: 0 0 .85rem; letter-spacing: -.01em; }
.cmpv6-poscard__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.cmpv6-poscard__list li { position: relative; padding-left: 1.4rem; color: var(--ifmg-body, #333); font-size: .96rem; }
.cmpv6-poscard__list li::before { content: ""; position: absolute; left: 0; top: .5em; width: .55rem; height: .55rem; border-radius: 50%; }
.cmpv6-poscard--subject .cmpv6-poscard__list li::before { background: var(--ifmg-primary, var(--ifmg-blue)); }
.cmpv6-poscard--rival .cmpv6-poscard__list li::before { background: var(--cmpv6-rival); }
@media (max-width: 640px) { .cmpv6-poscards { grid-template-columns: 1fr; } }

/* Matchup badge row — at-a-glance trim tier per side + the matchup type. */
.cmpv6-matchbadges { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0 0 1.1rem; align-items: stretch; }
.cmpv6-matchbadge { flex: 1 1 0; min-width: 180px; display: flex; flex-direction: column; gap: .15rem; padding: .7rem 1rem; border-radius: 12px; background: var(--ifmg-surface-2, #f6f8fb); border: 1px solid var(--ifmg-border, #e6e9ee); border-top: 3px solid var(--ifmg-muted, #98a2b3); }
.cmpv6-matchbadge--subject { border-top-color: var(--ifmg-primary, var(--ifmg-blue)); }
.cmpv6-matchbadge--rival { border-top-color: var(--cmpv6-rival); }
.cmpv6-matchbadge--type { border-top-color: var(--ifmg-accent, var(--ifmg-orange)); align-items: center; text-align: center; }
.cmpv6-matchbadge__icon { font-size: 1.1rem; line-height: 1; margin-bottom: .15rem; }
.cmpv6-matchbadge--subject .cmpv6-matchbadge__icon { color: var(--ifmg-primary, var(--ifmg-blue)); }
.cmpv6-matchbadge--rival .cmpv6-matchbadge__icon { color: var(--cmpv6-rival); }
.cmpv6-matchbadge--type .cmpv6-matchbadge__icon { color: var(--ifmg-accent, var(--ifmg-orange)); }
.cmpv6-matchbadge__veh { font-weight: 800; color: var(--ifmg-ink); font-size: .95rem; }
.cmpv6-matchbadge__tag { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ifmg-muted, #667085); font-weight: 700; }

/* Buyer-outcome categories (Head-to-head) — scannable WINNER CARDS: big winner + big supporting stat + one line. */
.cmpv6-cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin: 0 0 1.25rem; }
.cmpv6-cat { background: #fff; border: 1px solid var(--ifmg-border, #e6e9ee); border-top: 5px solid var(--ifmg-muted, #98a2b3); border-radius: var(--ifmg-radius, 14px); padding: 1.5rem 1.4rem; box-shadow: 0 14px 34px -26px rgba(15,23,32,.5); transition: transform .15s ease, box-shadow .15s ease; }
.cmpv6-cat:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -24px rgba(15,23,32,.55); }
.cmpv6-cat--subject { border-top-color: var(--ifmg-primary, var(--ifmg-blue)); }
.cmpv6-cat--rival { border-top-color: var(--cmpv6-rival); }
.cmpv6-cat__top { display: flex; align-items: center; gap: .85rem; margin: 0 0 .9rem; }
/* P3 — icon as a branded circular anchor, not a tiny bullet. */
.cmpv6-cat__icon { flex: none; width: 3.35rem; height: 3.35rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.7rem; background: var(--ifmg-bg, #f1f4f8); color: var(--ifmg-ink); box-shadow: inset 0 0 0 1px rgba(15,23,32,.06); }
.cmpv6-cat--subject .cmpv6-cat__icon { background: color-mix(in srgb, var(--ifmg-primary, var(--ifmg-blue)) 14%, #fff); color: var(--ifmg-primary, var(--ifmg-blue)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ifmg-primary, var(--ifmg-blue)) 22%, transparent); }
.cmpv6-cat--rival .cmpv6-cat__icon { background: color-mix(in srgb, var(--cmpv6-rival) 14%, #fff); color: var(--cmpv6-rival); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cmpv6-rival) 22%, transparent); }
.cmpv6-cat__label { font-size: 1.15rem; font-weight: 800; color: var(--ifmg-ink); margin: 0; letter-spacing: -.01em; }
.cmpv6-cat__winner { display: flex; align-items: baseline; gap: .5rem; margin: 0 0 .4rem; flex-wrap: wrap; }
.cmpv6-cat__winlabel { font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ifmg-muted, #98a2b3); }
.cmpv6-cat__winname { font-size: 1.4rem; font-weight: 800; letter-spacing: -.015em; line-height: 1.1; }
.cmpv6-cat--subject .cmpv6-cat__winname { color: var(--ifmg-primary, var(--ifmg-blue)); }
.cmpv6-cat--rival .cmpv6-cat__winname { color: var(--cmpv6-rival); }
.cmpv6-cat--even .cmpv6-cat__winname { color: var(--ifmg-muted, #667085); }
.cmpv6-cat__stat { display: flex; align-items: baseline; gap: .55rem; margin: 0 0 .55rem; font-variant-numeric: tabular-nums; }
.cmpv6-cat__statwin { font-size: 1.35rem; font-weight: 800; color: var(--ifmg-ink); }
.cmpv6-cat--subject .cmpv6-cat__statwin { color: var(--ifmg-primary, var(--ifmg-blue)); }
.cmpv6-cat--rival .cmpv6-cat__statwin { color: var(--cmpv6-rival); }
.cmpv6-cat__statvs { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ifmg-muted, #98a2b3); }
.cmpv6-cat__statlose { font-size: 1.02rem; font-weight: 600; color: var(--ifmg-muted, #667085); }
.cmpv6-cat__explain { font-size: .92rem; line-height: 1.5; color: var(--ifmg-body, #444); margin: 0; }
@media (max-width: 640px) { .cmpv6-cats { grid-template-columns: 1fr; } }

/* Progressive disclosure — long-form analysis collapsed by default, expands on click (no JS needed). */
.cmpv6-readmore { margin: .25rem 0 0; }
.cmpv6-readmore > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: .45rem; font-size: .82rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ifmg-primary, var(--ifmg-blue)); padding: .45rem 0; }
.cmpv6-readmore > summary::-webkit-details-marker { display: none; }
.cmpv6-readmore > summary::after { content: "▾"; font-size: .9rem; }
.cmpv6-readmore[open] > summary::after { content: "▴"; }
.cmpv6-readmore[open] > summary { margin-bottom: .4rem; }
.cmpv6-readmore .cmpv6-wins__summary, .cmpv6-readmore .cmpv6-wins__summary--pairing { margin-top: 0; }

/* ===== Reusable Honda-red winner callout badge (used in decision/wins/specs key-metrics) ===== */
.cmpv6-callout {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; line-height: 1;
    color: #fff; background: var(--ifmg-primary, var(--ifmg-blue));
    border-radius: 999px; padding: .42rem .7rem; white-space: nowrap;
}
.cmpv6-callout .bi { font-size: 12px; }
/* Two-brand winner callouts: subject win = brand primary (red), rival win = navy. The base stays red so
   existing red-callout usages are unchanged; the modifiers recolour by winning side. */
.cmpv6-callout--subject { background: var(--ifmg-primary, var(--ifmg-blue)); }
.cmpv6-callout--rival { background: var(--cmpv6-rival, #0B2545); }

/* ===== Quick Decision Summary — four computed verdict cards (two-brand by winning side) ===== */
.cmpv6-decision { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.cmpv6-decision__card {
    background: var(--ifmg-surface, #fff); border: 1px solid var(--ifmg-border); border-radius: var(--ifmg-radius);
    box-shadow: var(--ifmg-shadow-sm); padding: 1.4rem 1.4rem 1.5rem; border-top: 3px solid var(--ifmg-muted);
    display: flex; flex-direction: column; gap: .5rem;
}
/* Card top accent + winner text take the winning side's brand colour (subject red / rival navy). A card with
   no clear winner keeps the neutral gray top border. */
.cmpv6-decision__card--subject { border-top-color: var(--ifmg-primary, var(--ifmg-blue)); }
.cmpv6-decision__card--rival { border-top-color: var(--cmpv6-rival, #0B2545); }
.cmpv6-decision__card--subject .cmpv6-decision__winner { color: var(--ifmg-primary, var(--ifmg-blue)); }
.cmpv6-decision__card--rival .cmpv6-decision__winner { color: var(--cmpv6-rival, #0B2545); }
.cmpv6-decision__label {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ifmg-muted); margin: 0;
}
.cmpv6-decision__label .bi { color: var(--ifmg-accent, var(--ifmg-orange)); font-size: 15px; }
.cmpv6-decision__winner { font-size: 1.3rem; font-weight: 800; letter-spacing: -.01em; color: var(--ifmg-ink); margin: 0; line-height: 1.15; }
.cmpv6-decision__reason { font-size: 14px; line-height: 1.55; color: var(--ifmg-ink-soft); margin: 0; }

/* ===== Who wins what — the head-to-head MATRIX (tight rows, two-brand winner badges) ===== */
.cmpv6-wins__intro { font-size: 1.05rem; line-height: 1.6; color: var(--ifmg-ink-soft); margin: 0 0 2rem; max-width: 62ch; }
/* Editable explanatory paragraph below the matrix. */
.cmpv6-wins__summary { font-size: 1.02rem; line-height: 1.7; color: var(--ifmg-ink-soft); margin: 2rem 0 0; max-width: 70ch; }
.cmpv6-wins { display: flex; flex-direction: column; gap: 1.25rem; }
/* Matrix layout: a tight 4-column row — head (icon+label/desc) | subject value | "vs" | rival value | badge.
   The badge wraps to its own line on narrower widths via the auto-fit of the values block. */
.cmpv6-wins--matrix { gap: .75rem; }
.cmpv6-wins--matrix .cmpv6-wins__row {
    background: var(--ifmg-surface, #fff); border: 1px solid var(--ifmg-border); border-radius: var(--ifmg-radius-sm);
    box-shadow: var(--ifmg-shadow-sm); padding: 1rem 1.25rem;
    display: grid; grid-template-columns: minmax(180px, 1.4fr) auto minmax(150px, 1fr);
    align-items: center; gap: .85rem 1.25rem;
}
.cmpv6-wins__head { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.cmpv6-wins__icon { color: var(--ifmg-primary, var(--ifmg-blue)); font-size: 1.35rem; flex: none; }
.cmpv6-wins__headtext { min-width: 0; }
.cmpv6-wins__title { font-size: 1rem; font-weight: 800; letter-spacing: -.01em; color: var(--ifmg-ink); margin: 0; line-height: 1.2; }
.cmpv6-wins__desc { font-size: 12.5px; color: var(--ifmg-muted); margin: .15rem 0 0; line-height: 1.3; }
/* Values cell: subject | vs | rival, compact. */
.cmpv6-wins__vals { display: flex; align-items: center; gap: .9rem; }
.cmpv6-wins__side { display: flex; flex-direction: column; gap: .15rem; flex: 1 1 0; min-width: 0; }
.cmpv6-wins__veh { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ifmg-muted); }
.cmpv6-wins__val { font-size: clamp(1.05rem, 1.8vw, 1.35rem); font-weight: 800; letter-spacing: -.01em; color: var(--ifmg-ink); line-height: 1.1; }
/* Two-brand: the winning value text takes the winner's colour. */
.cmpv6-wins__side--subject .cmpv6-wins__val { color: var(--ifmg-primary, var(--ifmg-blue)); }
.cmpv6-wins__side--rival .cmpv6-wins__val { color: var(--cmpv6-rival, #0B2545); }
.cmpv6-wins__vs { align-self: center; font-size: 12px; font-weight: 700; color: var(--ifmg-muted); text-transform: uppercase; flex: none; }
.cmpv6-wins__win {
    justify-self: end; align-self: center;
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
    color: #fff; background: var(--ifmg-muted); border-radius: 999px; padding: .45rem .85rem; white-space: nowrap;
}
.cmpv6-wins__win .bi { font-size: 13px; }
/* Two-brand winner badges. */
.cmpv6-wins__win--subject { background: var(--ifmg-primary, var(--ifmg-blue)); }
.cmpv6-wins__win--rival { background: var(--cmpv6-rival, #0B2545); }
.cmpv6-wins__win--even { background: var(--ifmg-muted); }

/* ===== Verdict — executive summary card (Editor's pick badge + winner + headline + prose + chips) ===== */
.cmpv6-exec {
    background: var(--ifmg-surface, #fff); border: 1px solid var(--ifmg-border); border-radius: var(--ifmg-radius-lg, 20px);
    box-shadow: 0 28px 60px -34px rgba(15,23,32,.55); padding: 2.75rem 2.75rem 2.5rem; border-top: 6px solid var(--ifmg-primary, var(--ifmg-blue));
}
.cmpv6-exec__badge {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: #fff; background: var(--ifmg-accent, var(--ifmg-orange)); border-radius: 999px; padding: .55rem 1.05rem; margin: 0 0 1.1rem;
}
.cmpv6-exec__winner { font-size: clamp(2.7rem, 5vw, 3.9rem); font-weight: 800; letter-spacing: -.025em; color: var(--ifmg-ink); margin: 0 0 .7rem; line-height: 1.04; }
/* Pairing-specific verdict support — the recommendation copy, set apart as the authoritative answer. */
.cmpv6-verdict__support { margin: 1.1rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--ifmg-border); font-size: 1.05rem; line-height: 1.65; color: var(--ifmg-ink-soft); }
.cmpv6-verdict__support p { margin: 0 0 .6rem; } .cmpv6-verdict__support p:last-child { margin-bottom: 0; }
/* Two-brand: the named verdict winner reads in the winning side's colour (subject red / rival navy). */
.cmpv6-exec__winner--subject { color: var(--ifmg-primary, var(--ifmg-blue)); }
.cmpv6-exec__winner--rival { color: var(--cmpv6-rival, #0B2545); }
.cmpv6-exec__headline { font-size: clamp(1.3rem, 2vw, 1.6rem); font-weight: 700; line-height: 1.4; color: var(--ifmg-ink); margin: 0 0 1rem; max-width: 40ch; }
.cmpv6-verdict__text { font-size: 1.05rem; line-height: 1.7; color: var(--ifmg-ink-soft); margin: 0; max-width: 62ch; }
/* Authored intro/outro prose wrapping the narrator verdict — each its own spaced, crawlable paragraph. */
.cmpv6-verdict__intro { margin: 0 0 1rem; }
.cmpv6-verdict__outro { margin: 1rem 0 0; }
.cmpv6-exec__headline + .cmpv6-verdict__text { margin-top: .85rem; }
.cmpv6-chips { display: flex; flex-wrap: wrap; gap: .65rem; margin: 1.5rem 0 0; padding: 1.25rem 0 0; border-top: 1px solid var(--ifmg-border); }
.cmpv6-chip {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: 14px; font-weight: 700; color: var(--ifmg-ink);
    background: var(--ifmg-bg); border: 1px solid var(--ifmg-border); border-radius: 999px; padding: .55rem .95rem;
}
.cmpv6-chip .bi { color: var(--ifmg-muted); font-size: 15px; }
/* Two-brand evidence chips: a subject-win chip is brand-red, a rival-win chip is navy (never miscoloured). */
.cmpv6-chip--subject .bi { color: var(--ifmg-primary, var(--ifmg-blue)); }
.cmpv6-chip--rival .bi { color: var(--cmpv6-rival, #0B2545); }

/* ===== Verdict split — executive card (left) + "Why this verdict?" support column (right) ===== */
.cmpv6-verdict__split { display: grid; grid-template-columns: 1.55fr 1fr; gap: 1.75rem; align-items: start; }
.cmpv6-why {
    background: var(--ifmg-bg); border: 1px solid var(--ifmg-border); border-radius: var(--ifmg-radius);
    padding: 1.75rem 1.6rem; align-self: stretch;
}
.cmpv6-why__h { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ifmg-muted); margin: 0 0 1.1rem; }
.cmpv6-why__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.cmpv6-why__item { display: flex; align-items: flex-start; gap: .65rem; font-size: 15px; line-height: 1.5; color: var(--ifmg-ink-soft); }
.cmpv6-why__item .bi { font-size: 1.15rem; flex: none; margin-top: .05rem; color: var(--ifmg-muted); }
/* Two-brand: a why-point that credits the subject/rival gets that side's icon colour. */
.cmpv6-why__item--subject .bi { color: var(--ifmg-primary, var(--ifmg-blue)); }
.cmpv6-why__item--rival .bi { color: var(--cmpv6-rival, #0B2545); }

/* ===== Verdict decision framework (left card) — "why we landed here" + "what could change" ===== */
.cmpv6-verdict__why { margin: 1.15rem 0 0; padding: 1.1rem 0 0; border-top: 1px solid var(--ifmg-border); }
.cmpv6-verdict__whyh { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ifmg-muted); margin: 0 0 .85rem; }
.cmpv6-verdict__why .cmpv6-why__list { gap: .75rem; }
.cmpv6-verdict__why .cmpv6-why__item { font-size: 14.5px; }
.cmpv6-verdict__change { margin-top: 1.05rem; font-size: 14.5px; line-height: 1.55; color: var(--ifmg-ink-soft); }
.cmpv6-verdict__change b { color: var(--ifmg-ink); }

/* ===== Decision column (right) — "Choose the {subject} if" / "Choose the {rival} if" ===== */
.cmpv6-choose { display: flex; flex-direction: column; gap: 1.5rem; }
.cmpv6-choose__block { padding-left: .95rem; border-left: 3px solid var(--ifmg-border); }
.cmpv6-choose__block--subject { border-left-color: var(--ifmg-primary, var(--ifmg-blue)); }
.cmpv6-choose__block--rival { border-left-color: var(--cmpv6-rival, #0B2545); }
.cmpv6-choose__block .cmpv6-why__h { margin-bottom: .8rem; color: var(--ifmg-ink); }
.cmpv6-choose__block .cmpv6-why__list { gap: .7rem; }
.cmpv6-choose__block .cmpv6-why__item { font-size: 14.5px; }

/* ===== Editorial explanation cards — four authored cards (ownership / interior / performance / safety) ===== */
.cmpv6-section--editorial { background: var(--ifmg-surface, #fff); }
.cmpv6-section--editorial .cmpv6 { max-width: 1180px; }
.cmpv6-editorial { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
/* Ownership-scenario guides: five cards, responsive auto-fit so they never strand a lone card on a row. */
.cmpv6-editorial--scenarios { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
@media (min-width: 1100px) { .cmpv6-editorial--scenarios { grid-template-columns: repeat(5, 1fr); } }
.cmpv6-editorial__card {
    background: var(--ifmg-surface, #fff); border: 1px solid var(--ifmg-border); border-top: 4px solid var(--ifmg-primary, var(--ifmg-blue)); border-radius: var(--ifmg-radius);
    box-shadow: 0 12px 30px -26px rgba(15,23,32,.5); padding: 1.75rem 1.5rem 1.75rem;
    display: flex; flex-direction: column; gap: .7rem; transition: transform .15s ease, box-shadow .15s ease;
}
.cmpv6-editorial__card:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -24px rgba(15,23,32,.55); }
.cmpv6-editorial__icon { flex: none; width: 3rem; height: 3rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    color: var(--ifmg-primary, var(--ifmg-blue)); background: color-mix(in srgb, var(--ifmg-primary, var(--ifmg-blue)) 12%, #fff); font-size: 1.45rem; line-height: 1; }
.cmpv6-editorial__h { font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; color: var(--ifmg-ink); margin: 0; line-height: 1.25; }
.cmpv6-editorial__p { font-size: 14.5px; line-height: 1.6; color: var(--ifmg-ink-soft); margin: 0; }
/* Scannable bullet list for the ownership-scenario cards (less prose, more visual). */
.cmpv6-editorial__list { list-style: none; margin: .15rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.cmpv6-editorial__list li { position: relative; padding-left: 1.3rem; font-size: 14px; line-height: 1.4; color: var(--ifmg-ink-soft); }
.cmpv6-editorial__list li::before { content: ""; position: absolute; left: .15rem; top: .5em; width: .42rem; height: .42rem; border-radius: 50%; background: var(--ifmg-primary, var(--ifmg-blue)); }

/* ===== Specs that matter — heading-led intro + highlighted key-metrics strip, then the quiet table ===== */
.cmpv6-specs__intro { font-size: 1.05rem; line-height: 1.6; color: var(--ifmg-ink-soft); margin: 0 0 1.75rem; max-width: 62ch; }
/* Five metric cards on desktop (Price / HP / MPG / Cargo / AWD). Specs band is 900px; let it overflow that
   measure to the section width for the strip via a negative margin so 5 cards stay readable. */
.cmpv6-keymetrics { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin: 0 0 2.5rem; }
.cmpv6-keymetric {
    background: var(--ifmg-surface, #fff); border: 1px solid var(--ifmg-border); border-radius: var(--ifmg-radius);
    box-shadow: var(--ifmg-shadow-sm); padding: 1.1rem 1.05rem 1.2rem; display: flex; flex-direction: column; gap: .75rem;
}
.cmpv6-keymetric__head { display: inline-flex; align-items: center; gap: .5rem; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ifmg-muted); }
.cmpv6-keymetric__head .bi { color: var(--ifmg-primary, var(--ifmg-blue)); font-size: 15px; flex: none; }
.cmpv6-keymetric__rows { display: flex; flex-direction: column; gap: .35rem; }
.cmpv6-keymetric__row { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
.cmpv6-keymetric__veh { font-size: 12px; color: var(--ifmg-muted); font-weight: 600; }
.cmpv6-keymetric__val { font-size: 1.05rem; font-weight: 800; color: var(--ifmg-ink); letter-spacing: -.01em; }
/* Two-brand winning side: subject red, rival navy. */
.cmpv6-keymetric__row--subject .cmpv6-keymetric__veh, .cmpv6-keymetric__row--subject .cmpv6-keymetric__val { color: var(--ifmg-primary, var(--ifmg-blue)); }
.cmpv6-keymetric__row--rival .cmpv6-keymetric__veh, .cmpv6-keymetric__row--rival .cmpv6-keymetric__val { color: var(--cmpv6-rival, #0B2545); }
.cmpv6-keymetric .cmpv6-callout { align-self: flex-start; }

/* ===== Specifications — quiet, subordinate, collapsible; TWO-BRAND headers (subject red / rival navy) ===== */
.cmpv6-specs { max-width: 900px; }
.cmpv6-specs__head { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 .75rem; }
.cmpv6-specs__label { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--ifmg-muted); }
.cmpv6-specs__note { font-size: 12px; color: var(--ifmg-muted); }
.cmpv6-specs table { width: 100%; border-collapse: collapse; font-size: 15px; border: 1px solid var(--ifmg-border); border-radius: var(--ifmg-radius-sm); overflow: hidden; }
.cmpv6-specs th, .cmpv6-specs td { padding: .7rem 1rem; text-align: right; }
.cmpv6-specs th:first-child, .cmpv6-specs td:first-child { text-align: left; color: var(--ifmg-muted); font-weight: 400; background: var(--ifmg-bg); }
.cmpv6-specs thead th { font-size: 13px; font-weight: 700; color: #fff; }
/* Neutral label column header + the two brand-coloured vehicle columns. */
.cmpv6-specs thead th:first-child { background: var(--ifmg-ink); color: #fff; }
.cmpv6-specs__th--subject { background: var(--ifmg-primary, var(--ifmg-blue)); }
.cmpv6-specs__th--rival { background: var(--cmpv6-rival, #0B2545); }
.cmpv6-specs tbody tr { border-top: 1px solid var(--ifmg-border); }
.cmpv6-specs td { color: var(--ifmg-ink); }
/* Subtle per-row winning-value tint + weight, in the winning side's brand colour. */
.cmpv6-specs__td--subject-win { background: color-mix(in srgb, var(--ifmg-primary, var(--ifmg-blue)) 8%, #fff); color: var(--ifmg-primary, var(--ifmg-blue)); font-weight: 700; }
.cmpv6-specs__td--rival-win { background: color-mix(in srgb, var(--cmpv6-rival, #0B2545) 8%, #fff); color: var(--cmpv6-rival, #0B2545); font-weight: 700; }
.cmpv6-specs__more { display: none; }
.cmpv6-specs.is-open .cmpv6-specs__more { display: table-row-group; }
.cmpv6-specs__toggle { display: inline-flex; align-items: center; gap: 6px; margin-top: 1rem; background: none; border: 0; padding: 6px 0; font: 700 14px/1 inherit; color: var(--ifmg-primary, var(--ifmg-blue)); cursor: pointer; }
.cmpv6-specs__toggle .cmpv6-chev { transition: transform .15s; }
.cmpv6-specs.is-open .cmpv6-specs__toggle .cmpv6-chev { transform: rotate(180deg); }

/* ===== Ad interstitial — delineated tint box, Honda-spaced inside its own section ===== */
.cmpv6-section--ad { padding-top: 4rem; padding-bottom: 4rem; }
.cmpv6-ad { margin: 0 auto; max-width: 920px; padding: 1.25rem; background: var(--ifmg-bg); border: 1px solid var(--ifmg-border); border-radius: var(--ifmg-radius); text-align: center; }
.cmpv6-ad__label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ifmg-muted); margin: 0 0 .6rem; }

/* ===== Which one is right for you — two premium buyer-profile cards (two-brand accents) ===== */
.cmpv6-profiles { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.cmpv6-profiles__card {
    background: var(--ifmg-surface, #fff); border: 1px solid var(--ifmg-border); border-radius: var(--ifmg-radius);
    box-shadow: var(--ifmg-shadow-sm); padding: 1.75rem 1.85rem; border-top: 3px solid var(--ifmg-muted);
}
/* Subject card = brand-red accent; rival card = navy accent (card top border + label/check icons). */
.cmpv6-profiles__card--subject { border-top-color: var(--ifmg-primary, var(--ifmg-blue)); }
.cmpv6-profiles__card--rival { border-top-color: var(--cmpv6-rival, #0B2545); }
.cmpv6-profiles__label {
    display: inline-flex; align-items: center; gap: .6rem;
    font-size: 1.05rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: var(--ifmg-ink); margin: 0 0 1rem;
}
.cmpv6-profiles__card--subject .cmpv6-profiles__label .bi,
.cmpv6-profiles__card--subject .cmpv6-profiles__list .bi { color: var(--ifmg-primary, var(--ifmg-blue)); }
.cmpv6-profiles__card--rival .cmpv6-profiles__label .bi,
.cmpv6-profiles__card--rival .cmpv6-profiles__list .bi { color: var(--cmpv6-rival, #0B2545); }
.cmpv6-profiles__label .bi { color: var(--ifmg-primary, var(--ifmg-blue)); font-size: 1.5rem; }
.cmpv6-profiles__lead { font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ifmg-muted); margin: 0 0 .75rem; }
.cmpv6-profiles__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.cmpv6-profiles__list li { display: flex; align-items: flex-start; gap: .65rem; font-size: 16px; line-height: 1.45; color: var(--ifmg-ink-soft); }
.cmpv6-profiles__list .bi { color: var(--ifmg-primary, var(--ifmg-blue)); font-size: 1.1rem; flex: none; margin-top: .1rem; }
/* Self-identification paragraph beneath the bullets — set apart by a hairline + space, crawlable copy. */
.cmpv6-profiles__copy { font-size: 14.5px; line-height: 1.65; color: var(--ifmg-ink-soft); margin: 1.25rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--ifmg-border); }

/* ===== Deep FAQ — the SITE-STANDARD Bootstrap accordion on a tint band (single column, AEO surface) ===== */
.cmpv6-faq__lead { font-size: 1.05rem; line-height: 1.6; color: var(--ifmg-ink-soft); margin: 0 0 1.75rem; max-width: 62ch; }
/* The FAQ renders Bootstrap's .accordion markup — styling matches the rest of the site (the global
   .accordion-button:not(.collapsed) brand rule applies). On the cmpv6 tint band, give the accordion a white
   surface so it reads as a clear card against the tint, mirroring the standard #faqAccordion treatment. */
.cmpv6-section--faq .accordion { background: var(--ifmg-surface, #fff); border: 1px solid var(--ifmg-border); border-radius: var(--ifmg-radius); overflow: hidden; }
.cmpv6-section--faq .accordion-item { border-left: 0; border-right: 0; background: transparent; }
.cmpv6-section--faq .accordion-item:first-child { border-top: 0; }
.cmpv6-section--faq .accordion-item:last-child { border-bottom: 0; }
.cmpv6-section--faq .accordion-button { font-weight: 700; }
.cmpv6-section--faq .accordion-body { font-size: 16px; line-height: 1.7; color: var(--ifmg-ink-soft); }

/* ===== Related comparisons — content-discovery cards (thumbnail + title + arrow, red left accent) ===== */
.cmpv6-related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.cmpv6-related__card {
    display: flex; flex-direction: column; text-decoration: none; overflow: hidden;
    background: var(--ifmg-surface, #fff); border: 1px solid var(--ifmg-border); border-radius: var(--ifmg-radius);
    box-shadow: var(--ifmg-shadow-sm);
    border-left: 4px solid var(--ifmg-primary, var(--ifmg-blue));
    transition: transform .18s ease, box-shadow .18s ease;
}
.cmpv6-related__card:hover { transform: translateY(-3px); box-shadow: var(--ifmg-shadow-lg); }
/* Vehicle image thumbnail (or a wired placeholder when no asset is supplied). The rival render is CONTAINED on
   white with breathing room (inventory/recommendation-card standard) so it supports the card, not dominates —
   the thumb area + card dimensions are unchanged. */
.cmpv6-related__thumb { display: block; aspect-ratio: 16 / 10; background: #fff; overflow: hidden; }
.cmpv6-related__thumb img { width: 100%; height: 100%; object-fit: contain; padding: .65rem 1.1rem; display: block; transition: transform .25s ease; }
.cmpv6-related__card:hover .cmpv6-related__thumb img { transform: scale(1.04); }
.cmpv6-related__thumb--ph {
    width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem;
    color: var(--ifmg-muted); background: var(--ifmg-bg);
}
.cmpv6-related__thumb--ph .bi { font-size: 1.8rem; opacity: .55; }
.cmpv6-related__thumb--ph span { font-size: 12px; letter-spacing: .04em; }
.cmpv6-related__thumb { aspect-ratio: 16 / 11; }
.cmpv6-related__body { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; padding: 1.1rem 1.3rem 1.3rem; }
.cmpv6-related__eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ifmg-muted, #98a2b3); }
.cmpv6-related__title { font-size: 1.3rem; font-weight: 800; letter-spacing: -.015em; color: var(--ifmg-ink); line-height: 1.2; margin: 0 0 .35rem; }
.cmpv6-related__go {
    display: inline-flex; align-items: center; gap: .4rem; flex: none;
    font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ifmg-primary, var(--ifmg-blue));
    background: color-mix(in srgb, var(--ifmg-primary, var(--ifmg-blue)) 10%, #fff); padding: .5rem .9rem; border-radius: 999px;
}
.cmpv6-related__go .bi { transition: transform .18s ease; }
.cmpv6-related__card:hover .cmpv6-related__go .bi { transform: translateX(3px); }

/* ===== Comparison Media System — visual side-by-side modules (exterior / interior / colours / features) ===== */
.cmpv6-media__modh { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ifmg-muted, #667085); margin: 2rem 0 1rem; }
.cmpv6-media__modh:first-of-type { margin-top: 1.25rem; }
.cmpv6-media__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
/* Single-side module (graceful omission): show the one image at a sensible size, not stretched full width. */
.cmpv6-media__pair--single { grid-template-columns: minmax(0, 560px); }
.cmpv6-media__note { display: flex; align-items: center; gap: .5rem; margin: 1.75rem 0 0; font-size: 14px; color: var(--ifmg-muted, #667085); }
.cmpv6-media__note .bi { color: var(--ifmg-primary, var(--ifmg-blue)); }
.cmpv6-media__cell { margin: 0; }
.cmpv6-media__img { display: block; aspect-ratio: 16 / 10; border-radius: var(--ifmg-radius, 14px); overflow: hidden; background: var(--ifmg-bg, #f1f4f8); border: 1px solid var(--ifmg-border); border-top: 4px solid var(--ifmg-muted, #98a2b3); }
.cmpv6-media__cell--subject .cmpv6-media__img { border-top-color: var(--ifmg-primary, var(--ifmg-blue)); }
.cmpv6-media__cell--rival .cmpv6-media__img { border-top-color: var(--cmpv6-rival, #0B2545); }
.cmpv6-media__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cmpv6-media__img--ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; color: var(--ifmg-muted, #98a2b3); }
.cmpv6-media__img--ph .bi { font-size: 2rem; opacity: .5; }
.cmpv6-media__img--ph span { font-size: 12px; letter-spacing: .04em; }
.cmpv6-media__cap { margin: .6rem 0 0; font-weight: 800; font-size: 1rem; color: var(--ifmg-ink); }
.cmpv6-media__cell--subject .cmpv6-media__cap { color: var(--ifmg-primary, var(--ifmg-blue)); }
.cmpv6-media__cell--rival .cmpv6-media__cap { color: var(--cmpv6-rival, #0B2545); }
/* Feature highlight columns */
.cmpv6-media__featcol { background: var(--ifmg-surface, #fff); border: 1px solid var(--ifmg-border); border-radius: var(--ifmg-radius); padding: 1.25rem 1.4rem; border-top: 4px solid var(--ifmg-muted, #98a2b3); }
.cmpv6-media__featcol--subject { border-top-color: var(--ifmg-primary, var(--ifmg-blue)); }
.cmpv6-media__featcol--rival { border-top-color: var(--cmpv6-rival, #0B2545); }
.cmpv6-media__vehname { font-weight: 800; font-size: 1.05rem; color: var(--ifmg-ink); margin: 0 0 .9rem; }
.cmpv6-media__none { font-size: 14px; color: var(--ifmg-muted, #98a2b3); margin: 0; }
.cmpv6-media__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.cmpv6-media__chip { display: flex; align-items: center; gap: .6rem; font-size: 14.5px; font-weight: 600; color: var(--ifmg-ink-soft, #333); }
.cmpv6-media__chip .bi { font-size: 1.2rem; flex: none; }
.cmpv6-media__featcol--subject .cmpv6-media__chip .bi { color: var(--ifmg-primary, var(--ifmg-blue)); }
.cmpv6-media__featcol--rival .cmpv6-media__chip .bi { color: var(--cmpv6-rival, #0B2545); }
/* Colour gallery */
.cmpv6-media__colorrow { margin: 0 0 1.5rem; }
.cmpv6-media__swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .9rem; }
.cmpv6-media__swatch { margin: 0; }
/* Platform thumbnail standard: the vehicle render is CONTAINED on white with consistent height and generous
   whitespace — no oversized fill, no aggressive crop. The swatch card stays the same size. */
.cmpv6-media__swatch img { width: 100%; aspect-ratio: 4 / 3; max-height: 96px; object-fit: contain; background: #fff; padding: .4rem; border-radius: 10px; border: 1px solid var(--ifmg-border); display: block; }
.cmpv6-media__swatch figcaption { font-size: 12px; color: var(--ifmg-ink-soft, #444); margin: .4rem 0 0; text-align: center; }
@media (max-width: 640px) { .cmpv6-media__pair { grid-template-columns: 1fr; } }

/* ===== Closing CTA — full-width Honda CTA band, ORANGE accent button (mirrors .ifmg-cta-band / --ink) ===== */
.cmpv6-ctaband { background: #07111f; padding: 3rem 1.25rem; }
.cmpv6-cta { max-width: 1180px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.cmpv6-cta__copy { flex: 1 1 360px; min-width: 0; }
.cmpv6-cta__t { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 800; letter-spacing: -.02em; color: #fff; margin: 0 0 .5rem; }
.cmpv6-cta__sub { font-size: 1.05rem; line-height: 1.6; color: rgba(255,255,255,.78); margin: 0; max-width: 48ch; }
.cmpv6-cta__action { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: .8rem; }
.cmpv6-cta__btn {
    display: inline-flex; align-items: center; gap: .55rem;
    background: var(--ifmg-accent, var(--ifmg-orange)); color: var(--ifmg-accent-text, var(--ifmg-ink)); border: 1px solid var(--ifmg-accent, var(--ifmg-orange));
    border-radius: var(--ifmg-radius-sm); padding: 1rem 1.9rem; font: 700 1.02rem/1 inherit; text-decoration: none; cursor: pointer; white-space: nowrap;
    box-shadow: 0 12px 30px -10px color-mix(in srgb, var(--ifmg-accent, var(--ifmg-orange)) 65%, transparent);
    transition: background .15s ease, transform .15s ease;
}
.cmpv6-cta__btn .bi { transition: transform .18s ease; }
.cmpv6-cta__btn:hover { background: var(--ifmg-orange-dark); border-color: var(--ifmg-orange-dark); color: var(--ifmg-accent-text, var(--ifmg-ink)); transform: translateY(-2px); }
.cmpv6-cta__btn:hover .bi { transform: translateX(3px); }
.cmpv6-cta__trust { display: inline-flex; align-items: center; gap: .4rem; font-size: 13px; color: rgba(255,255,255,.62); margin: 0; }
.cmpv6-cta__trust .bi { color: var(--ifmg-accent, var(--ifmg-orange)); }

/* ===== Mobile — keep the hero immersive + automotive; preserve section rhythm (mirrors .cms-trim mobile) ===== */
/* Tablet (≤1080px): the dense desktop grids relax a tier before the mobile stack. */
@media (max-width: 1080px) {
    .cmpv6-editorial { grid-template-columns: repeat(2, 1fr); }
    .cmpv6-keymetrics { grid-template-columns: repeat(3, 1fr); }
    .cmpv6-related { grid-template-columns: repeat(2, 1fr); }
    .cmpv6-verdict__split { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
    .cmpv6-hero { min-height: 360px; }
    .cmpv6-hero__media::before {
        background:
            linear-gradient(180deg, color-mix(in srgb, var(--ifmg-hero-scrim, #07111F) 55%, transparent) 0%, color-mix(in srgb, var(--ifmg-hero-scrim, #07111F) 22%, transparent) 40%, color-mix(in srgb, var(--ifmg-hero-scrim, #07111F) 16%, transparent) 62%, color-mix(in srgb, var(--ifmg-hero-scrim, #07111F) 55%, transparent) 100%);
    }
    .cmpv6-hero__inner { padding: 2.5rem 20px; }
    .cmpv6-title { font-size: clamp(2.2rem, 9vw, 3rem); max-width: none; margin-bottom: 1.25rem; }
    .cmpv6-section { padding: 2.75rem 0; }
    .cmpv6-section--tint { padding-top: 3.5rem; padding-bottom: 3.5rem; }
    .cmpv6-decision { grid-template-columns: 1fr 1fr; gap: 1rem; }
    .cmpv6-editorial { grid-template-columns: 1fr 1fr; gap: 1rem; }
    .cmpv6-keymetrics { grid-template-columns: repeat(2, 1fr); }
    .cmpv6-profiles { grid-template-columns: 1fr; gap: 1.25rem; }
    .cmpv6-exec { padding: 1.6rem 1.5rem; }
    /* Matrix rows stack: head → values → badge, each full-width + readable. */
    .cmpv6-wins--matrix .cmpv6-wins__row { grid-template-columns: 1fr; padding: 1.1rem 1.25rem; gap: .75rem; }
    .cmpv6-wins__vals { justify-content: space-between; }
    .cmpv6-wins__win { justify-self: start; }
    .cmpv6-cta { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
    .cmpv6-cta__action { align-items: flex-start; width: 100%; }
    .cmpv6-cta__btn { width: 100%; justify-content: center; text-align: center; }
    .cmpv6-selwrap { margin-top: -36px; }
    .cmpv6-selcard { flex-direction: column; align-items: stretch; text-align: center; gap: 1rem; padding: 1.25rem; }
    .cmpv6-selcard__icon { margin: 0 auto; }
    .cmpv6-selcard__controls { justify-content: center; }
    .cmpv6-selcard__btn { width: 100%; }
    /* Full specs table scrolls inside its own container so it never forces the page to scroll horizontally;
       a min-width keeps the three columns readable while the box scrolls rather than crushing the text. */
    .cmpv6-specs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .cmpv6-specs table { min-width: 420px; }
    /* Whisper-stat lines stack so a long "$MSRP · hp · mpg" string never overflows the hero width. */
    .cmpv6-selwrap .cmpv6-stats { flex-direction: column; gap: .35rem; text-align: center; }
}
@media (max-width: 560px) {
    .cmpv6-editorial { grid-template-columns: 1fr; }
    .cmpv6-keymetrics { grid-template-columns: 1fr; }
    .cmpv6-related { grid-template-columns: 1fr; }
    /* On the narrowest screens give the matrix value pair a touch more room. */
    .cmpv6-wins__vals { gap: .6rem; }
    .cmpv6-field__select { min-width: 0; flex: 1 1 44%; }
    .cmpv6-selector { gap: 10px; }
    .cmpv6-stats { gap: 16px; }
}
/* Quick-decision cards stay 2-up down to small phones; collapse to one column only below 430px. */
@media (max-width: 429.98px) {
    .cmpv6-decision { grid-template-columns: 1fr; }
}

/* ===== NewsFeed ("In the News") — data-driven, link-out cards with source attribution ===== */
.ifmg-news__intro { max-width: 760px; margin: -.25rem 0 1.5rem; color: var(--ifmg-muted); font-size: 1.05rem; }
/* `.ifmg-news__list` layout is provided by the unified `.ifmg-editorial-grid` (Article Grid V2) in the
   Editorial section above — it is grouped there as a compatibility alias (1 → 2 → 3 on --bp tokens). */
/* News variant of the editorial card — text-led with source/date metadata. Base chrome (surface/border/
   radius/shadow/transition/flex-column) comes from the .ifmg-editorial-card base in the Editorial section
   above; this adds only the News deltas. `.ifmg-news-card` stays as the compatibility alias. */
.ifmg-editorial-card--news, .ifmg-news-card { gap: .6rem; padding: 1.1rem 1.2rem; }
.ifmg-editorial-card--news:hover, .ifmg-news-card:hover { box-shadow: var(--ifmg-shadow); transform: translateY(-2px); }

/* CR1 R6 — COMPACT Story variant: a horizontal "supporting reading" card (small thumb + title), far shorter
   when stacked, so a tail of stories reads as "a few more reads" rather than a second page body. Reusable;
   applied to the Review tail this pass. A grid of compact cards collapses to a single-column list. */
.ifmg-editorial-card--compact { flex-direction: row; align-items: stretch; }
.ifmg-editorial-card--compact .ifmg-article-card__media { aspect-ratio: 1 / 1; width: 104px; flex: none; }
.ifmg-editorial-card--compact .ifmg-article-card__body { padding: var(--space-3) var(--space-4); gap: .2rem; justify-content: center; }
.ifmg-editorial-card--compact .ifmg-article-card__title { font-size: 1rem; line-height: 1.3; }
.ifmg-editorial-card--compact .ifmg-article-card__dek,
.ifmg-editorial-card--compact .ifmg-article-card__byline { display: none; } /* supporting reading — the title (a link) carries it; content stays in the DOM */
.ifmg-editorial-grid:has(.ifmg-editorial-card--compact) { grid-template-columns: 1fr; gap: var(--space-3); }
.ifmg-news-card__link { text-decoration: none; color: inherit; }
.ifmg-news-card__headline { margin: 0; font-size: 1.08rem; line-height: 1.25; color: var(--ifmg-ink); }
.ifmg-news-card__link:hover .ifmg-news-card__headline { color: var(--ifmg-primary, var(--ifmg-ink)); }
.ifmg-news-card__snippet { margin: 0; color: var(--ifmg-ink-soft); font-size: .94rem; line-height: 1.5; }
.ifmg-news-card__byline {
    margin-top: auto; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    padding-top: .6rem; border-top: 1px solid var(--ifmg-border);
    font-size: .82rem; color: var(--ifmg-muted);
}
.ifmg-news-card__logo { height: 18px; width: auto; max-width: 90px; object-fit: contain; }
.ifmg-news-card__source { font-weight: 600; color: var(--ifmg-ink-soft); }
.ifmg-news-card__date::before { content: "·"; margin-right: .5rem; color: var(--ifmg-muted); }

/* ===== Recalls — NHTSA campaigns, credited to source ===== */
.ifmg-recalls__intro { max-width: 760px; margin: -.25rem 0 1rem; color: var(--ifmg-muted); font-size: 1.05rem; }
.ifmg-recalls__count { margin: 0 0 1.25rem; font-weight: 600; color: var(--ifmg-ink); }
.ifmg-recalls__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.ifmg-recall {
    background: var(--ifmg-surface); border: 1px solid var(--ifmg-border);
    border-left: 3px solid var(--ifmg-primary, var(--ifmg-ink-soft));
    border-radius: var(--ifmg-radius); box-shadow: var(--ifmg-shadow-sm);
    padding: 1.1rem 1.25rem;
}
.ifmg-recall__head { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.ifmg-recall__component { font-weight: 700; color: var(--ifmg-ink); letter-spacing: .01em; }
.ifmg-recall__flag {
    font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    padding: .15rem .5rem; border-radius: 999px; color: #fff;
}
.ifmg-recall__flag--parkit { background: #b3261e; }       /* "Do not drive" — highest severity */
.ifmg-recall__flag--parkoutside { background: #b9770a; }  /* "Park outside" — fire risk */
.ifmg-recall__meta {
    display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
    margin: .4rem 0 .6rem; font-size: .82rem; color: var(--ifmg-muted);
}
.ifmg-recall__campaign { font-weight: 600; color: var(--ifmg-ink-soft); }
.ifmg-recall__summary { margin: 0 0 .5rem; color: var(--ifmg-ink-soft); line-height: 1.55; }
.ifmg-recall__remedy { margin: 0 0 .6rem; color: var(--ifmg-ink-soft); line-height: 1.55; }
.ifmg-recall__link { font-size: .88rem; font-weight: 600; color: var(--ifmg-primary, var(--ifmg-ink)); text-decoration: none; }
.ifmg-recall__link:hover { text-decoration: underline; }
.ifmg-recalls__note { margin: 1.25rem 0 .25rem; font-size: .85rem; color: var(--ifmg-muted); }
.ifmg-recalls__credit { margin: 0; font-size: .82rem; color: var(--ifmg-muted); font-weight: 600; }

/* `.ifmg-news__list` responsive columns now come from the unified `.ifmg-editorial-grid` rhythm
   (Article Grid V2): 1 → 2 (--bp-sm) → 3 (--bp-lg). Its old max-width breakpoints (980/620) were
   replaced by the one tokenized min-width rhythm (Decision 2, Option A). */

/* ============================================================================
   Recall Center (/recalls) — editorial safety experience (Section B).
   ========================================================================== */
.ifmg-btn--primary { background: var(--ifmg-primary, var(--ifmg-blue)); color: #fff; border-color: var(--ifmg-primary, var(--ifmg-blue)); }
.ifmg-btn--danger { background: var(--ifmg-danger); color: #fff; border-color: var(--ifmg-danger); }
.ifmg-btn--danger:hover { background: #a80216; border-color: #a80216; color: #fff; }

.ifmg-section-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.ifmg-link-all { font-size: .9rem; font-weight: 700; color: var(--ifmg-primary, var(--ifmg-blue)); text-decoration: none; white-space: nowrap; }
.ifmg-link-all:hover { text-decoration: underline; }
.ifmg-link-more { font-size: .85rem; font-weight: 600; color: var(--ifmg-primary, var(--ifmg-blue)); text-decoration: none; }
.ifmg-link-more:hover { text-decoration: underline; }

/* Severity pills */
.ifmg-sev { display: inline-block; font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: .2rem .5rem; border-radius: 999px; white-space: nowrap; }
.ifmg-sev.ifmg-sev--high { background: #FDE7EA; color: var(--ifmg-danger); }
.ifmg-sev.ifmg-sev--medium { background: #FEF3C7; color: #B45309; }
.ifmg-sev.ifmg-sev--low { background: #E0F2FE; color: #0369A1; }
.ifmg-sev.ifmg-sev--info { background: #EEF2F6; color: var(--ifmg-ink-soft); }

/* Quick-facts bar */
.ifmg-recall-facts__grid { list-style: none; margin: 0; padding: 1rem 1.25rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; background: var(--ifmg-surface); border: 1px solid var(--ifmg-border); border-radius: var(--ifmg-radius); box-shadow: var(--ifmg-shadow-sm); }
.ifmg-recall-facts__item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .15rem; position: relative; }
.ifmg-recall-facts__item:not(:last-child)::after { content: ""; position: absolute; right: -.5rem; top: 10%; height: 80%; width: 1px; background: var(--ifmg-border); }
.ifmg-recall-facts__num { font-size: 2rem; font-weight: 800; line-height: 1; color: var(--ifmg-primary, var(--ifmg-blue)); }
.ifmg-recall-facts__item--alert .ifmg-recall-facts__num { color: var(--ifmg-danger); }
.ifmg-recall-facts__item--date .ifmg-recall-facts__num { font-size: 1.35rem; color: var(--ifmg-ink); }
.ifmg-recall-facts__label { font-size: .8rem; color: var(--ifmg-muted); font-weight: 600; }

/* Active recall alert cards */
.ifmg-recall-alert { border: 1px solid var(--ifmg-border); border-left: 4px solid var(--ifmg-muted); border-radius: var(--ifmg-radius); background: var(--ifmg-surface); padding: 1.25rem 1.4rem; margin-top: 1rem; box-shadow: var(--ifmg-shadow-sm); }
.ifmg-recall-alert.ifmg-sev--high { border-left-color: var(--ifmg-danger); background: #FFF8F8; }
.ifmg-recall-alert.ifmg-sev--medium { border-left-color: #D97706; }
.ifmg-recall-alert__top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.ifmg-recall-alert__title { font-size: 1.1rem; font-weight: 700; margin: 0; color: var(--ifmg-ink); }
.ifmg-recall-alert__meta { display: flex; flex-wrap: wrap; gap: 1.5rem; margin: .9rem 0; }
.ifmg-recall-alert__meta dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ifmg-muted); font-weight: 700; }
.ifmg-recall-alert__meta dd { margin: .1rem 0 0; font-weight: 700; color: var(--ifmg-ink); }
.ifmg-recall-alert__summary, .ifmg-recall-alert__fix, .ifmg-recall-alert__action { margin: .35rem 0; font-size: .92rem; color: var(--ifmg-ink-soft); }
.ifmg-recall-alert__cta { margin-top: .9rem; }

/* "No active recalls" reassurance */
.ifmg-recall-ok { display: flex; gap: .8rem; align-items: flex-start; margin-top: 1rem; padding: 1rem 1.25rem; border-radius: var(--ifmg-radius); background: #ECFDF3; border: 1px solid #A6F4C5; }
.ifmg-recall-ok p { margin: .15rem 0 0; font-size: .9rem; color: var(--ifmg-ink-soft); }
.ifmg-recall-ok__icon { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 999px; background: #12B76A; color: #fff; font-weight: 800; flex: none; }
.ifmg-recall-ok--mini { background: #F6FEF9; }

/* Recall history timeline */
.ifmg-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.ifmg-timeline::before { content: ""; position: absolute; left: 7px; top: .5rem; bottom: .5rem; width: 2px; background: var(--ifmg-border); }
.ifmg-timeline__row { display: grid; grid-template-columns: 150px 1fr; gap: 1rem; padding: .65rem 0 .65rem 1.5rem; position: relative; }
.ifmg-timeline__row::before { content: ""; position: absolute; left: 1px; top: 1.05rem; width: 14px; height: 14px; border-radius: 999px; background: var(--ifmg-muted); border: 3px solid var(--ifmg-surface); }
.ifmg-timeline__row.ifmg-sev--high::before { background: var(--ifmg-danger); }
.ifmg-timeline__row.ifmg-sev--medium::before { background: #D97706; }
.ifmg-timeline__when time { font-size: .82rem; font-weight: 700; color: var(--ifmg-muted); }
.ifmg-timeline__body { border: 0; }
.ifmg-timeline__body summary { cursor: pointer; list-style: none; display: flex; flex-direction: column; gap: .2rem; }
.ifmg-timeline__body summary::-webkit-details-marker { display: none; }
.ifmg-timeline__title { font-weight: 700; color: var(--ifmg-ink); }
.ifmg-timeline__sub { font-size: .82rem; color: var(--ifmg-muted); display: inline-flex; align-items: center; gap: .4rem; }
.ifmg-timeline__body p { margin: .5rem 0; font-size: .9rem; color: var(--ifmg-ink-soft); }

/* Problem-area grid */
.ifmg-problem-areas__grid { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.ifmg-problem-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .25rem; padding: 1.1rem .75rem; border: 1px solid var(--ifmg-border); border-radius: var(--ifmg-radius); background: var(--ifmg-surface); box-shadow: var(--ifmg-shadow-sm); }
.ifmg-problem-card__icon { font-size: 1.5rem; color: var(--ifmg-primary, var(--ifmg-blue)); }
.ifmg-problem-card__count { font-size: 1.6rem; font-weight: 800; color: var(--ifmg-ink); line-height: 1; }
.ifmg-problem-card__name { font-size: .85rem; font-weight: 700; color: var(--ifmg-ink); }
.ifmg-problem-card__unit { font-size: .72rem; color: var(--ifmg-muted); text-transform: uppercase; letter-spacing: .05em; }

/* Open investigations */
.ifmg-investigations__grid { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.ifmg-investigation { border: 1px solid var(--ifmg-border); border-radius: var(--ifmg-radius); background: var(--ifmg-surface); padding: 1.1rem 1.2rem; box-shadow: var(--ifmg-shadow-sm); }
.ifmg-investigation__title { font-size: 1rem; font-weight: 700; margin: 0 0 .6rem; color: var(--ifmg-ink); }
.ifmg-investigation__meta { display: flex; flex-direction: column; gap: .35rem; margin: 0 0 .6rem; }
.ifmg-investigation__meta div { display: flex; gap: .4rem; font-size: .82rem; }
.ifmg-investigation__meta dt { color: var(--ifmg-muted); font-weight: 600; margin: 0; }
.ifmg-investigation__meta dd { margin: 0; font-weight: 700; color: var(--ifmg-ink); }
.ifmg-investigation__summary { font-size: .88rem; color: var(--ifmg-ink-soft); margin: 0 0 .6rem; }
.ifmg-istatus { display: inline-block; font-size: .68rem; font-weight: 800; text-transform: uppercase; padding: .15rem .45rem; border-radius: 999px; }
.ifmg-istatus--open { background: #FDE7EA; color: var(--ifmg-danger); }
.ifmg-istatus--eval { background: #FEF3C7; color: #B45309; }
.ifmg-istatus--closed { background: #EEF2F6; color: var(--ifmg-ink-soft); }

/* TSB preview table */
.ifmg-tsbs__wrap { margin-top: 1.25rem; overflow-x: auto; }
.ifmg-tsbs__table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.ifmg-tsbs__table th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ifmg-muted); padding: .5rem .75rem; border-bottom: 2px solid var(--ifmg-border); }
.ifmg-tsbs__table td { padding: .7rem .75rem; border-bottom: 1px solid var(--ifmg-border); vertical-align: top; color: var(--ifmg-ink-soft); }
.ifmg-tsbs__title { font-weight: 700; color: var(--ifmg-primary, var(--ifmg-blue)); }
.ifmg-tsbs__years { white-space: nowrap; }
.ifmg-tsbs__note { margin-top: .75rem; font-size: .8rem; color: var(--ifmg-muted); }

/* VIN lookup card */
.ifmg-vin__card { max-width: 420px; border: 1px solid var(--ifmg-border); border-radius: var(--ifmg-radius); background: var(--ifmg-surface); padding: 1.4rem; box-shadow: var(--ifmg-shadow-sm); }
.ifmg-vin__title { font-size: 1.05rem; font-weight: 700; margin: 0 0 .35rem; }
.ifmg-vin__intro { font-size: .88rem; color: var(--ifmg-ink-soft); margin: 0 0 .9rem; }
.ifmg-vin__form { display: flex; gap: .5rem; }
.ifmg-vin__input { flex: 1; padding: .6rem .75rem; border: 1px solid var(--ifmg-border); border-radius: var(--ifmg-radius-sm); font-size: .9rem; }
.ifmg-vin__note { font-size: .78rem; color: var(--ifmg-muted); margin: .7rem 0 0; display: flex; align-items: center; gap: .35rem; }
.ifmg-vin__help { margin-top: 1.1rem; border-top: 1px solid var(--ifmg-border); padding-top: .9rem; }
.ifmg-vin__help-title { font-size: .9rem; font-weight: 700; margin: 0 0 .5rem; }
.ifmg-vin__help ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.ifmg-vin__help a { font-size: .85rem; font-weight: 600; color: var(--ifmg-primary, var(--ifmg-blue)); text-decoration: none; }
.ifmg-vin__help a:hover { text-decoration: underline; }

/* Help / dealer CTA */
.ifmg-help-cta__card { display: grid; grid-template-columns: 280px 1fr; gap: 1.5rem; align-items: center; border: 1px solid var(--ifmg-border); border-radius: var(--ifmg-radius-lg); background: var(--ifmg-surface); overflow: hidden; box-shadow: var(--ifmg-shadow-sm); }
.ifmg-help-cta__media img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 160px; }
.ifmg-help-cta__body { padding: 1.4rem 1.6rem; }
.ifmg-help-cta__title { font-size: 1.2rem; font-weight: 700; margin: 0 0 .4rem; }
.ifmg-help-cta__body p { color: var(--ifmg-ink-soft); margin: 0 0 1rem; }

/* Related / Trending Research cards */
.ifmg-related__grid { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.ifmg-related__card a { display: flex; flex-direction: column; gap: .25rem; padding: 1.1rem 1.2rem; border: 1px solid var(--ifmg-border); border-radius: var(--ifmg-radius); background: var(--ifmg-surface); text-decoration: none; box-shadow: var(--ifmg-shadow-sm); transition: box-shadow .15s, transform .15s; height: 100%; }
.ifmg-related__card a:hover { box-shadow: var(--ifmg-shadow); transform: translateY(-2px); }
.ifmg-related__title { font-weight: 700; color: var(--ifmg-ink); }
.ifmg-related__sub { font-size: .82rem; color: var(--ifmg-muted); }
.ifmg-related__arrow { margin-top: auto; color: var(--ifmg-primary, var(--ifmg-blue)); font-weight: 800; }

@media (max-width: 900px) {
    .ifmg-recall-facts__grid { grid-template-columns: repeat(2, 1fr); }
    .ifmg-recall-facts__item:nth-child(2)::after { display: none; }
    .ifmg-problem-areas__grid { grid-template-columns: repeat(3, 1fr); }
    .ifmg-investigations__grid { grid-template-columns: 1fr; }
    .ifmg-related__grid { grid-template-columns: repeat(2, 1fr); }
    .ifmg-help-cta__card { grid-template-columns: 1fr; }
    .ifmg-help-cta__media { display: none; }
}
@media (max-width: 560px) {
    .ifmg-recall-facts__item::after { display: none !important; }
    .ifmg-problem-areas__grid { grid-template-columns: repeat(2, 1fr); }
    .ifmg-timeline__row { grid-template-columns: 1fr; gap: .25rem; }
    .ifmg-related__grid { grid-template-columns: 1fr; }
    .ifmg-recall-alert__meta { gap: 1rem; }
}

/* ============================================================================
   Recall Center — premium editorial polish (page-scoped via body.page-recalls).
   Wider canvas, larger type, more breathing room. Scoped so other pages are
   untouched. (Also applies to /recalls/all.)
   ========================================================================== */
.page-recalls .ifmg-section { padding-top: 2.25rem; padding-bottom: 2.25rem; }
.page-recalls .ifmg-section > .ifmg-container { max-width: 1200px; }
.page-recalls .ifmg-section h2 { font-size: 2rem; letter-spacing: -.01em; }
.page-recalls .ifmg-eyebrow { font-size: .8rem; letter-spacing: .12em; }

/* Hero — large, confident, comparable to the homepage hero. */
.page-recalls .ifmg-hero--research { min-height: 0; padding: 4.5rem 1.25rem 4rem; background: linear-gradient(180deg, #F7F9FC 0%, var(--ifmg-surface) 100%); border-bottom: 1px solid var(--ifmg-border); }
.page-recalls .ifmg-hero--research > .ifmg-container { max-width: 1200px; }
.page-recalls .ifmg-hero--research .ifmg-hero__split { gap: 3rem; align-items: center; }
.page-recalls .ifmg-hero--research h1 { font-size: clamp(2.6rem, 4.5vw, 3.7rem); line-height: 1.05; letter-spacing: -.02em; }
.page-recalls .ifmg-hero--research .ifmg-subtitle { font-size: 1.2rem; line-height: 1.55; color: var(--ifmg-ink-soft); max-width: 34ch; margin-top: 1rem; }
.page-recalls .ifmg-hero--research .ifmg-hero__media img { min-height: 360px; max-height: 440px; object-fit: cover; border-radius: var(--ifmg-radius-lg); box-shadow: var(--ifmg-shadow-lg); }

/* Quick-facts bar — prominent ownership signal; lifts over the hero edge. */
.page-recalls .ifmg-recall-facts { padding-top: 0; margin-top: 1.5rem; }
.page-recalls .ifmg-recall-facts__grid { padding: 1.9rem 2.25rem; gap: 1.5rem; border-radius: var(--ifmg-radius-lg); box-shadow: var(--ifmg-shadow-lg); }
.page-recalls .ifmg-recall-facts__num { font-size: 2.9rem; }
.page-recalls .ifmg-recall-facts__item--date .ifmg-recall-facts__num { font-size: 1.7rem; }
.page-recalls .ifmg-recall-facts__label { font-size: .92rem; }

/* Active recall alerts — bigger, more urgent, clearer hierarchy. */
.page-recalls .ifmg-recall-alert { padding: 1.9rem 2.1rem; margin-top: 1.4rem; border-radius: var(--ifmg-radius-lg); box-shadow: var(--ifmg-shadow); }
.page-recalls .ifmg-recall-alert.ifmg-sev--high { border-left-width: 6px; }
.page-recalls .ifmg-recall-alert__title { font-size: 1.5rem; line-height: 1.2; }
.page-recalls .ifmg-recall-alert .ifmg-sev { font-size: .74rem; padding: .3rem .7rem; }
.page-recalls .ifmg-recall-alert__meta { gap: 2.5rem; margin: 1.2rem 0; }
.page-recalls .ifmg-recall-alert__meta dt { font-size: .74rem; }
.page-recalls .ifmg-recall-alert__meta dd { font-size: 1.15rem; }
.page-recalls .ifmg-recall-alert__summary, .page-recalls .ifmg-recall-alert__fix, .page-recalls .ifmg-recall-alert__action { font-size: 1rem; line-height: 1.55; margin: .5rem 0; }
.page-recalls .ifmg-recall-alert__cta { margin-top: 1.2rem; padding: .8rem 1.6rem; font-size: 1rem; }
.page-recalls .ifmg-recall-ok { padding: 1.25rem 1.5rem; border-radius: var(--ifmg-radius-lg); }

/* History | VIN row — history carries the weight; VIN is a strong utility panel. */
.page-recalls .ifmg-row { gap: 2rem; align-items: start; }
.page-recalls .ifmg-timeline__row { padding: 1rem 0 1rem 1.6rem; border-bottom: 1px solid var(--ifmg-border); }
.page-recalls .ifmg-timeline__title { font-size: 1.08rem; }
.page-recalls .ifmg-timeline__when time { font-size: .9rem; }
.page-recalls .ifmg-vin__card { max-width: none; padding: 2rem; border-radius: var(--ifmg-radius-lg); box-shadow: var(--ifmg-shadow); border-top: 4px solid var(--ifmg-primary, var(--ifmg-blue)); }
.page-recalls .ifmg-vin__title { font-size: 1.35rem; }
.page-recalls .ifmg-vin__intro { font-size: .98rem; }
.page-recalls .ifmg-vin__form { flex-direction: column; gap: .7rem; }
.page-recalls .ifmg-vin__input { padding: .85rem 1rem; font-size: 1rem; }
.page-recalls .ifmg-vin__btn { width: 100%; text-align: center; padding: .85rem 1rem; font-size: 1.05rem; }
.page-recalls .ifmg-vin__help a { font-size: .95rem; }

/* Problem-area cards — visual storytelling, not statistics. */
.page-recalls .ifmg-problem-areas__grid { gap: 1.25rem; }
.page-recalls .ifmg-problem-card { padding: 1.8rem 1rem; gap: .4rem; border-radius: var(--ifmg-radius-lg); min-height: 160px; justify-content: center; }
.page-recalls .ifmg-problem-card__icon { font-size: 2.6rem; }
.page-recalls .ifmg-problem-card__count { font-size: 2.6rem; }
.page-recalls .ifmg-problem-card__name { font-size: .98rem; }

/* Investigations — visually distinct from recalls (amber "under review" accent). */
.page-recalls .ifmg-investigations__grid { gap: 1.25rem; }
.page-recalls .ifmg-investigation { padding: 1.5rem 1.6rem; border-radius: var(--ifmg-radius-lg); border-top: 4px solid #D97706; box-shadow: var(--ifmg-shadow-sm); }
.page-recalls .ifmg-investigation__title { font-size: 1.15rem; }
.page-recalls .ifmg-investigation__summary { font-size: .95rem; line-height: 1.55; }
.page-recalls .ifmg-istatus { font-size: .72rem; padding: .25rem .6rem; }

/* TSBs — premium cards instead of a spreadsheet. */
.ifmg-tsbs__list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1rem; }
.ifmg-tsb-card { border: 1px solid var(--ifmg-border); border-left: 4px solid var(--ifmg-primary, var(--ifmg-blue)); border-radius: var(--ifmg-radius); background: var(--ifmg-surface); padding: 1.25rem 1.5rem; box-shadow: var(--ifmg-shadow-sm); }
.ifmg-tsb-card__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.ifmg-tsb-card__title { font-size: 1.1rem; font-weight: 700; margin: 0; color: var(--ifmg-ink); }
.ifmg-tsb-card__years { font-size: .78rem; font-weight: 700; color: var(--ifmg-ink-soft); background: #EEF2F6; padding: .2rem .6rem; border-radius: 999px; white-space: nowrap; }
.ifmg-tsb-card__summary { margin: .5rem 0 0; font-size: .95rem; color: var(--ifmg-ink-soft); line-height: 1.55; }

/* FAQ — more spacing + larger touch targets. */
.page-recalls .accordion-button { font-size: 1.08rem; padding: 1.15rem 1.25rem; }
.page-recalls .accordion-item { margin-bottom: .5rem; border-radius: var(--ifmg-radius); }

/* Help CTA — strong end-of-page action. */
.page-recalls .ifmg-help-cta__card { border-radius: var(--ifmg-radius-lg); box-shadow: var(--ifmg-shadow); }
.page-recalls .ifmg-help-cta__body { padding: 2.25rem 2.5rem; }
.page-recalls .ifmg-help-cta__title { font-size: 1.7rem; }
.page-recalls .ifmg-help-cta__body p { font-size: 1.05rem; }
.page-recalls .ifmg-help-cta__body .ifmg-btn { padding: .85rem 1.8rem; font-size: 1.05rem; }
.page-recalls .ifmg-help-cta { background: #F7F9FC; }

/* Related research — genuine destination cards. */
.page-recalls .ifmg-related__grid { gap: 1.25rem; }
.page-recalls .ifmg-related__card a { padding: 1.5rem 1.6rem; border-radius: var(--ifmg-radius-lg); min-height: 130px; }
.page-recalls .ifmg-related__title { font-size: 1.15rem; }
.page-recalls .ifmg-related__sub { font-size: .9rem; }
.page-recalls .ifmg-related__arrow { font-size: 1.2rem; }

@media (max-width: 900px) {
    .page-recalls .ifmg-recall-facts { margin-top: 1rem; }
    .page-recalls .ifmg-hero--research h1 { font-size: clamp(2.1rem, 7vw, 2.6rem); }
}

/* ===== Recall Center — final visual-parity fixes ===== */

/* 1) Help CTA — strong band with dealer/storefront image on the right. */
.page-recalls .ifmg-help-cta { background: linear-gradient(180deg, #F7F9FC 0%, var(--ifmg-surface) 100%); }
.page-recalls .ifmg-help-cta__card { grid-template-columns: 1fr; overflow: hidden; }
.page-recalls .ifmg-help-cta__card--media { grid-template-columns: 1fr minmax(280px, 360px); }
.page-recalls .ifmg-help-cta__body { padding: 2.5rem 2.75rem; }
.page-recalls .ifmg-help-cta__media { min-height: 100%; }
.page-recalls .ifmg-help-cta__media img { width: 100%; height: 100%; min-height: 220px; object-fit: cover; display: block; }

/* 3) Active-recall warning icon (urgency at a glance). */
.ifmg-recall-alert__heading { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.ifmg-recall-alert__icon { font-size: 1.5rem; line-height: 1; color: var(--ifmg-muted); flex: none; }
.ifmg-recall-alert.ifmg-sev--high .ifmg-recall-alert__icon { color: var(--ifmg-danger); }
.ifmg-recall-alert.ifmg-sev--medium .ifmg-recall-alert__icon { color: #D97706; }

/* 2) Related Research — destination cards with thumbnails. */
.page-recalls .ifmg-related__card a { padding: 0; overflow: hidden; min-height: 0; }
.ifmg-related__thumb { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #EEF2F6; }
.ifmg-related__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.page-recalls .ifmg-related__card a:hover .ifmg-related__thumb img { transform: scale(1.04); }
.ifmg-related__body { display: flex; flex-direction: column; gap: .25rem; padding: 1.1rem 1.25rem 1.25rem; }
.page-recalls .ifmg-related__body .ifmg-related__title { font-size: 1.1rem; }

/* 4) Hero — photographic depth (accent panel behind the image + richer band). */
.page-recalls .ifmg-hero--research { background: radial-gradient(120% 140% at 85% 0%, #EAF1FA 0%, #F7F9FC 45%, var(--ifmg-surface) 100%); }
.page-recalls .ifmg-hero--research .ifmg-hero__media { position: relative; }
.page-recalls .ifmg-hero--research .ifmg-hero__media::before {
    content: ""; position: absolute; inset: 1.25rem -1.25rem -1.25rem 1.25rem; z-index: 0;
    background: var(--ifmg-primary, var(--ifmg-blue)); opacity: .10; border-radius: var(--ifmg-radius-lg);
}
.page-recalls .ifmg-hero--research .ifmg-hero__media img { position: relative; z-index: 1; min-height: 400px; max-height: 460px; box-shadow: 0 24px 60px rgba(15,23,32,.22); }

@media (max-width: 900px) {
    .page-recalls .ifmg-help-cta__card--media { grid-template-columns: 1fr; }
    .page-recalls .ifmg-help-cta__media { display: block; min-height: 200px; }
    .page-recalls .ifmg-hero--research .ifmg-hero__media::before { display: none; }
    .page-recalls .ifmg-hero--research .ifmg-hero__media img { min-height: 240px; }
}

/* ============================================================================
   News & Updates (/news) — premium editorial intelligence center.
   Page-scoped via body.page-news (also /news/all). Other pages untouched.
   ========================================================================== */
.page-news .ifmg-section { padding-top: 2.25rem; padding-bottom: 2.25rem; }
.page-news .ifmg-section > .ifmg-container { max-width: 1200px; }
.page-news .ifmg-section h2 { font-size: 2rem; letter-spacing: -.01em; }
.page-news .ifmg-eyebrow { font-size: .8rem; letter-spacing: .12em; }

/* Hero — same photographic treatment as the Recall Center. */
.page-news .ifmg-hero--research { min-height: 0; padding: 4.5rem 1.25rem 4rem; background: radial-gradient(120% 140% at 85% 0%, #EAF1FA 0%, #F7F9FC 45%, var(--ifmg-surface) 100%); border-bottom: 1px solid var(--ifmg-border); }
.page-news .ifmg-hero--research > .ifmg-container { max-width: 1200px; }
.page-news .ifmg-hero--research .ifmg-hero__split { gap: 3rem; align-items: center; }
.page-news .ifmg-hero--research h1 { font-size: clamp(2.6rem, 4.5vw, 3.7rem); line-height: 1.05; letter-spacing: -.02em; }
.page-news .ifmg-hero--research .ifmg-subtitle { font-size: 1.2rem; line-height: 1.55; color: var(--ifmg-ink-soft); max-width: 36ch; margin-top: 1rem; }
.page-news .ifmg-hero--research .ifmg-hero__media { position: relative; }
.page-news .ifmg-hero--research .ifmg-hero__media::before { content: ""; position: absolute; inset: 1.25rem -1.25rem -1.25rem 1.25rem; z-index: 0; background: var(--ifmg-primary, var(--ifmg-blue)); opacity: .10; border-radius: var(--ifmg-radius-lg); }
.page-news .ifmg-hero--research .ifmg-hero__media img { position: relative; z-index: 1; min-height: 380px; max-height: 440px; object-fit: cover; border-radius: var(--ifmg-radius-lg); box-shadow: 0 24px 60px rgba(15,23,32,.22); }

/* Featured story carousel */
.ifmg-featured__track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; padding-bottom: .5rem; margin-top: 1.25rem; }
.ifmg-featured__track::-webkit-scrollbar { height: 6px; }
.ifmg-featured__track::-webkit-scrollbar-thumb { background: var(--ifmg-border); border-radius: 999px; }
.ifmg-featured__slide { scroll-snap-align: start; display: grid; grid-template-columns: 1.15fr 1fr; gap: 0; align-items: stretch; border: 1px solid var(--ifmg-border); border-radius: var(--ifmg-radius-lg); background: var(--ifmg-surface); overflow: hidden; box-shadow: var(--ifmg-shadow); }
.ifmg-featured__media { position: relative; min-height: 340px; background: #EEF2F6; }
.ifmg-featured__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ifmg-featured__source { position: absolute; top: 1rem; left: 1rem; background: rgba(15,23,32,.78); color: #fff; font-size: .78rem; font-weight: 700; padding: .3rem .7rem; border-radius: 999px; display: inline-flex; align-items: center; gap: .35rem; }
.ifmg-featured__copy { padding: 2.25rem 2.5rem; display: flex; flex-direction: column; }
.ifmg-featured__headline { font-size: 1.8rem; line-height: 1.15; font-weight: 800; margin: 0 0 .5rem; color: var(--ifmg-ink); }
.ifmg-featured__date { font-size: .85rem; color: var(--ifmg-muted); font-weight: 600; }
.ifmg-featured__summary { font-size: 1rem; line-height: 1.6; color: var(--ifmg-ink-soft); margin: .9rem 0; }
.ifmg-buyerbox { background: #F0F6FF; border-left: 4px solid var(--ifmg-primary, var(--ifmg-blue)); border-radius: 0 var(--ifmg-radius-sm) var(--ifmg-radius-sm) 0; padding: .9rem 1.1rem; margin: .5rem 0 1.1rem; }
.ifmg-buyerbox__label { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ifmg-primary, var(--ifmg-blue)); margin-bottom: .25rem; }
.ifmg-buyerbox p { margin: 0; font-size: .92rem; color: var(--ifmg-ink-soft); line-height: 1.5; }
.ifmg-featured__copy .ifmg-btn { margin-top: auto; align-self: flex-start; }
.ifmg-featured__dots { display: flex; gap: .4rem; justify-content: center; margin-top: 1rem; }
.ifmg-featured__dot { width: 9px; height: 9px; border-radius: 999px; background: var(--ifmg-border); }
.ifmg-featured__dot.is-active { background: var(--ifmg-primary, var(--ifmg-blue)); width: 26px; }

/* Buyer-insight cards (mandatory layer) */
.ifmg-insights__grid { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.ifmg-insight { border: 1px solid var(--ifmg-border); border-top: 4px solid var(--ifmg-primary, var(--ifmg-blue)); border-radius: var(--ifmg-radius-lg); background: var(--ifmg-surface); padding: 1.6rem 1.7rem; box-shadow: var(--ifmg-shadow-sm); }
.ifmg-insight__icon { font-size: 1.9rem; color: var(--ifmg-primary, var(--ifmg-blue)); }
.ifmg-insight__headline { font-size: 1.15rem; font-weight: 700; margin: .6rem 0 .4rem; color: var(--ifmg-ink); }
.ifmg-insight__text { font-size: .95rem; line-height: 1.55; color: var(--ifmg-ink-soft); margin: 0 0 .8rem; }

/* Latest news + category filters */
.ifmg-latest__filters { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.25rem 0 1.5rem; }
.ifmg-pill { font-size: .85rem; font-weight: 600; padding: .45rem 1rem; border-radius: var(--ifmg-radius-full); border: 1px solid var(--ifmg-border); background: var(--ifmg-surface); color: var(--ifmg-ink-soft); cursor: pointer; transition: background var(--motion-fast), color var(--motion-fast), border-color var(--motion-fast); }
.ifmg-pill:hover { border-color: var(--ifmg-primary, var(--ifmg-blue)); color: var(--ifmg-primary, var(--ifmg-blue)); }
.ifmg-pill.is-active { background: var(--ifmg-primary, var(--ifmg-blue)); color: #fff; border-color: var(--ifmg-primary, var(--ifmg-blue)); }
.ifmg-latest__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.25rem; }
.ifmg-latest__card { display: grid; grid-template-columns: 220px 1fr; gap: 1.5rem; border: 1px solid var(--ifmg-border); border-radius: var(--ifmg-radius-lg); background: var(--ifmg-surface); overflow: hidden; box-shadow: var(--ifmg-shadow-sm); }
.ifmg-latest__thumb { background: #EEF2F6; min-height: 150px; }
.ifmg-latest__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ifmg-latest__body { padding: 1.25rem 1.5rem 1.25rem 0; }
.ifmg-latest__cat { display: inline-block; font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ifmg-primary, var(--ifmg-blue)); margin-bottom: .35rem; }
.ifmg-latest__headline { font-size: 1.2rem; font-weight: 700; margin: 0 0 .35rem; line-height: 1.25; }
.ifmg-latest__headline a { color: var(--ifmg-ink); text-decoration: none; }
.ifmg-latest__headline a:hover { color: var(--ifmg-primary, var(--ifmg-blue)); }
.ifmg-latest__meta { display: flex; gap: .75rem; font-size: .82rem; color: var(--ifmg-muted); font-weight: 600; margin-bottom: .5rem; }
.ifmg-latest__summary { font-size: .95rem; line-height: 1.55; color: var(--ifmg-ink-soft); margin: 0 0 .5rem; }
.ifmg-latest__means { font-size: .9rem; color: var(--ifmg-ink-soft); margin: 0 0 .6rem; }
.ifmg-latest__means strong { color: var(--ifmg-primary, var(--ifmg-blue)); }

/* Milestones timeline */
.ifmg-milestones__track { list-style: none; margin: 1.5rem 0 0; padding: 1rem 0 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 1rem; position: relative; }
.ifmg-milestones__track::before { content: ""; position: absolute; top: 1.65rem; left: 9%; right: 9%; height: 2px; background: var(--ifmg-border); }
.ifmg-milestone { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .3rem; position: relative; }
.ifmg-milestone__year { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 999px; border: 3px solid var(--ifmg-primary, var(--ifmg-blue)); background: var(--ifmg-surface); color: var(--ifmg-primary, var(--ifmg-blue)); font-weight: 800; font-size: 1.05rem; position: relative; z-index: 1; }
.ifmg-milestone__title { font-weight: 700; font-size: 1rem; color: var(--ifmg-ink); margin-top: .35rem; }
.ifmg-milestone__desc { font-size: .85rem; color: var(--ifmg-muted); line-height: 1.45; max-width: 22ch; }

/* Stay-informed band */
.page-news .ifmg-stay__card { display: grid; grid-template-columns: 1fr; border-radius: var(--ifmg-radius-lg); overflow: hidden; background: linear-gradient(120deg, var(--ifmg-ink) 0%, #1B2A3A 100%); color: #fff; box-shadow: var(--ifmg-shadow); }
.page-news .ifmg-stay__card--media { grid-template-columns: 1fr minmax(280px, 380px); }
.ifmg-stay__body { padding: 2.5rem 2.75rem; }
.ifmg-stay__title { font-size: 1.6rem; font-weight: 800; margin: 0 0 .5rem; color: #fff; }
.ifmg-stay__body p { color: rgba(255,255,255,.85); margin: 0 0 1.2rem; font-size: 1.05rem; }
.ifmg-stay__media img { width: 100%; height: 100%; min-height: 200px; object-fit: cover; display: block; }

@media (max-width: 900px) {
    .page-news .ifmg-hero--research h1 { font-size: clamp(2.1rem, 7vw, 2.6rem); }
    .page-news .ifmg-hero--research .ifmg-hero__media::before { display: none; }
    .ifmg-featured__slide { grid-template-columns: 1fr; }
    .ifmg-insights__grid { grid-template-columns: 1fr; }
    .ifmg-latest__card { grid-template-columns: 1fr; }
    .ifmg-latest__thumb { min-height: 180px; }
    .ifmg-latest__body { padding: 1.25rem 1.5rem; }
    .ifmg-milestones__track { grid-auto-flow: row; grid-auto-columns: auto; }
    .ifmg-milestones__track::before { display: none; }
    .page-news .ifmg-stay__card--media { grid-template-columns: 1fr; }
}

/* ============================================================================
   Buyer's Guide (/buyers-guide) — the "Should I buy this vehicle?" decision page.
   Data-driven sections resolved from the published BuyersGuideContent. Built on the
   IFMG tokens (success/danger/blue/orange) so it themes per-site. Prefixed ifmg-bguide-
   (ifmg-bg- is reserved for the layout background utilities).
   ============================================================================ */

/* 1) Hero ---------------------------------------------------------------- */
.ifmg-bguide-hero { background: linear-gradient(115deg, var(--ifmg-ink) 0%, #16222F 55%, #1d3346 100%); padding: 3rem 0 2.25rem; }
.ifmg-bguide-hero .ifmg-eyebrow { color: var(--ifmg-blue-logo); }
.ifmg-bguide-hero__grid { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; }
.ifmg-bguide-hero__title { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.08; margin: .25rem 0 .5rem; }
.ifmg-bguide-hero__sub { color: rgba(255,255,255,.82); font-size: 1.05rem; max-width: 40ch; margin: 0 0 1.25rem; }
.ifmg-bguide-hero__media { display: none; }
.ifmg-bguide-hero__media img { width: 100%; height: 100%; max-height: 340px; object-fit: contain; }
@media (min-width: 900px) {
    .ifmg-bguide-hero__grid { grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: 2.5rem; }
    .ifmg-bguide-hero__media { display: block; }
}

/* Recommendation + evaluation-score card (light surface on the dark hero). */
.ifmg-bguide-rec { display: inline-flex; flex-wrap: wrap; gap: 1rem 2.25rem; align-items: center; background: var(--ifmg-surface);
    color: var(--ifmg-ink); border-radius: var(--ifmg-radius-lg); padding: 1.5rem 1.9rem; box-shadow: var(--ifmg-shadow-lg);
    margin-bottom: 1.5rem; max-width: 480px; }
.ifmg-bguide-rec__col { display: flex; flex-direction: column; gap: .2rem; padding-right: 2rem; }
.ifmg-bguide-rec__col + .ifmg-bguide-rec__col { border-left: 1px solid var(--ifmg-border); padding-left: 2rem; padding-right: 0; }
.ifmg-bguide-rec__label { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ifmg-muted); font-weight: 700; }
.ifmg-bguide-rec__verdict { font-size: 2rem; font-weight: 800; color: var(--ifmg-success); line-height: 1.05; }
.ifmg-bguide-rec__score { font-size: 2.6rem; font-weight: 900; color: var(--ifmg-ink); line-height: 1; letter-spacing: -.01em; }
.ifmg-bguide-rec__score small { font-size: 1.05rem; font-weight: 700; color: var(--ifmg-muted); }
.ifmg-bguide-stars { display: inline-flex; gap: 1px; font-size: 1.05rem; line-height: 1; }
.ifmg-bguide-stars__s { color: #D7DCE3; }
.ifmg-bguide-stars__s.is-on { color: #F5A623; }
.ifmg-bguide-rec__basis { font-size: .72rem; color: var(--ifmg-muted); }

/* Key-highlight pills (on dark). */
.ifmg-bguide-hl { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1rem 1.75rem; }
.ifmg-bguide-hl__item { display: flex; align-items: center; gap: .6rem; }
.ifmg-bguide-hl__icon { color: var(--ifmg-blue-logo); font-size: 1.35rem; }
.ifmg-bguide-hl__text { display: flex; flex-direction: column; line-height: 1.2; }
.ifmg-bguide-hl__text strong { color: #fff; font-size: .92rem; }
.ifmg-bguide-hl__text span { color: rgba(255,255,255,.7); font-size: .78rem; }

/* Best-for chip row. */
.ifmg-bguide-bestfor { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 1.5rem;
    padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.14); }
.ifmg-bguide-bestfor__label { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6); font-weight: 700; margin-right: .35rem; }
.ifmg-bguide-bestfor__chip { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.2);
    border-radius: 999px; padding: .35rem .9rem; font-size: .85rem; font-weight: 600; }

/* 2) Who it's for (and isn't) -------------------------------------------- */
.ifmg-bguide-audience__grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 820px) { .ifmg-bguide-audience__grid { grid-template-columns: 1fr 1fr; } }
.ifmg-bguide-aud { background: var(--ifmg-surface); border: 1px solid var(--ifmg-border); border-radius: var(--ifmg-radius);
    padding: 1.75rem; box-shadow: var(--ifmg-shadow-sm); }
.ifmg-bguide-aud__title { display: flex; align-items: center; gap: .55rem; font-size: 1.05rem; margin: 0 0 1.25rem;
    text-transform: uppercase; letter-spacing: .04em; font-size: .95rem; }
.ifmg-bguide-aud--yes .ifmg-bguide-aud__title { color: var(--ifmg-success); }
.ifmg-bguide-aud--no .ifmg-bguide-aud__title { color: var(--ifmg-danger); }
.ifmg-bguide-aud__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.1rem; }
.ifmg-bguide-aud__item { display: flex; gap: .9rem; align-items: flex-start; }
.ifmg-bguide-aud__icon { flex: 0 0 auto; width: 2.4rem; height: 2.4rem; display: inline-flex; align-items: center;
    justify-content: center; border-radius: 50%; font-size: 1.1rem; }
.ifmg-bguide-aud--yes .ifmg-bguide-aud__icon { background: rgba(31,163,99,.12); color: var(--ifmg-success); }
.ifmg-bguide-aud--no .ifmg-bguide-aud__icon { background: rgba(208,2,27,.1); color: var(--ifmg-danger); }
.ifmg-bguide-aud__body strong { display: block; color: var(--ifmg-ink); margin-bottom: .15rem; }
.ifmg-bguide-aud__body p { margin: 0; color: var(--ifmg-ink-soft); font-size: .92rem; }

/* 3) Which trim should you buy? (recommendation cards) ------------------- */
.ifmg-bguide-picks__grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 640px) { .ifmg-bguide-picks__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .ifmg-bguide-picks__grid { grid-template-columns: repeat(4,1fr); } }
/* White cards with a coloured BADGE only — no decorative top-border accent line (matches the mockup). */
.ifmg-bguide-pick { display: flex; flex-direction: column; background: var(--ifmg-surface); border: 1px solid var(--ifmg-border);
    border-radius: var(--ifmg-radius); padding: 1.25rem 1.2rem; box-shadow: var(--ifmg-shadow-sm); }
.ifmg-bguide-pick--skip { background: rgba(208,2,27,.045); border-color: rgba(208,2,27,.18); }
.ifmg-bguide-pick__badge { align-self: flex-start; font-size: .68rem; font-weight: 800; letter-spacing: .06em;
    text-transform: uppercase; color: #fff; border-radius: 999px; padding: .25rem .7rem; margin-bottom: .6rem; background: var(--ifmg-muted); }
.ifmg-bguide-pick--most .ifmg-bguide-pick__badge { background: var(--ifmg-success); }
.ifmg-bguide-pick--value .ifmg-bguide-pick__badge { background: var(--ifmg-blue); }
.ifmg-bguide-pick--budget .ifmg-bguide-pick__badge { background: var(--ifmg-orange); color: var(--ifmg-ink); }
/* Premium Pick — a refined charcoal badge (distinct from the value/skip treatments); the card stays a
   normal positive recommendation (white, check bullets, price + CTA). */
.ifmg-bguide-pick--premium .ifmg-bguide-pick__badge { background: var(--ifmg-ink); color: #fff; }
.ifmg-bguide-pick--skip .ifmg-bguide-pick__badge { background: rgba(208,2,27,.12); color: var(--ifmg-danger); }
.ifmg-bguide-pick__name { font-size: 1.15rem; margin: .1rem 0 .45rem; color: var(--ifmg-ink); }
.ifmg-bguide-pick__media { height: 150px; display: flex; align-items: center; justify-content: center;
    margin: 0 0 .8rem; background: linear-gradient(180deg, #F7F9FC, #EDF1F6); border-radius: var(--ifmg-radius-sm); }
.ifmg-bguide-pick__media img { width: 100%; height: 100%; object-fit: contain; padding: .4rem .55rem; }
.ifmg-bguide-pick__price { font-size: 1.35rem; font-weight: 800; color: var(--ifmg-ink); line-height: 1.1; }
.ifmg-bguide-pick__price small { font-size: .8rem; color: var(--ifmg-muted); vertical-align: super; }
.ifmg-bguide-pick__price-label { display: block; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ifmg-muted); font-weight: 700; margin-bottom: .55rem; }
.ifmg-bguide-pick__rationale { font-size: .88rem; color: var(--ifmg-ink-soft); margin: 0 0 .8rem; }
/* Bottom-align the bullets+CTA group so the bullet region and CTA baseline match across ALL four cards,
   regardless of price presence / rationale length (equalized structure). */
.ifmg-bguide-pick__bullets { list-style: none; margin: auto 0 .9rem; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.ifmg-bguide-pick__bullets li { display: flex; gap: .5rem; align-items: flex-start; font-size: .86rem; color: var(--ifmg-ink-soft); }
.ifmg-bguide-pick__bullets .bi-check-lg { color: var(--ifmg-success); }
.ifmg-bguide-pick__bullets .bi-x { color: var(--ifmg-danger); }
.ifmg-bguide-pick__cta { text-align: center; }
.ifmg-bguide-pick--skip .ifmg-bguide-pick__cta { background: transparent; color: var(--ifmg-blue); border: 1px solid var(--ifmg-border); }
.ifmg-bguide-picks__note { font-size: .75rem; color: var(--ifmg-muted); margin: 1.1rem 0 0; }

/* 4) Strengths & Weaknesses ---------------------------------------------- */
.ifmg-bguide-sw__grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 820px) { .ifmg-bguide-sw__grid { grid-template-columns: 1fr 1fr; } }
.ifmg-bguide-sw__card { position: relative; overflow: hidden; border-radius: var(--ifmg-radius); padding: 1.75rem 2rem; border: 1px solid var(--ifmg-border); }
.ifmg-bguide-sw__card--pro { background: rgba(31,163,99,.06); border-color: rgba(31,163,99,.25); }
.ifmg-bguide-sw__card--con { background: rgba(208,2,27,.05); border-color: rgba(208,2,27,.22); }
.ifmg-bguide-sw__title { margin: 0 0 1rem; font-size: 1rem; text-transform: uppercase; letter-spacing: .05em; }
.ifmg-bguide-sw__card--pro .ifmg-bguide-sw__title { color: var(--ifmg-success); }
.ifmg-bguide-sw__card--con .ifmg-bguide-sw__title { color: var(--ifmg-danger); }
.ifmg-bguide-sw__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; max-width: 80%; }
.ifmg-bguide-sw__list li { display: flex; gap: .5rem; align-items: flex-start; color: var(--ifmg-ink-soft); font-size: .92rem; }
.ifmg-bguide-sw__card--pro .ifmg-bguide-sw__list .bi { color: var(--ifmg-success); }
.ifmg-bguide-sw__card--con .ifmg-bguide-sw__list .bi { color: var(--ifmg-danger); }
.ifmg-bguide-sw__mark { position: absolute; right: 1.1rem; bottom: .6rem; font-size: 3.5rem; opacity: .12; }
.ifmg-bguide-sw__card--pro .ifmg-bguide-sw__mark { color: var(--ifmg-success); }
.ifmg-bguide-sw__card--con .ifmg-bguide-sw__mark { color: var(--ifmg-danger); }

/* 5) Ownership expectations (5-card grid) -------------------------------- */
.ifmg-bguide-own__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (min-width: 720px) { .ifmg-bguide-own__grid { grid-template-columns: repeat(3,1fr); } }
@media (min-width: 1040px) { .ifmg-bguide-own__grid { grid-template-columns: repeat(5,1fr); } }
.ifmg-bguide-own__card { display: flex; flex-direction: column; gap: .25rem; text-align: left; background: var(--ifmg-surface);
    border: 1px solid var(--ifmg-border); border-radius: var(--ifmg-radius); padding: 1.5rem 1.35rem; box-shadow: var(--ifmg-shadow-sm); }
.ifmg-bguide-own__icon { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem;
    border-radius: 50%; background: rgba(27,117,188,.1); color: var(--ifmg-blue); font-size: 1.3rem; margin-bottom: .6rem; }
.ifmg-bguide-own__label { font-weight: 700; color: var(--ifmg-ink); font-size: 1rem; }
.ifmg-bguide-own__value { color: var(--ifmg-ink); font-weight: 700; font-size: .95rem; }
.ifmg-bguide-own__note { color: var(--ifmg-muted); font-size: .82rem; }

/* 6) Cross-shop (routes into Compare) ------------------------------------ */
.ifmg-bguide-cross__table { width: 100%; border-collapse: collapse; background: var(--ifmg-surface);
    border: 1px solid var(--ifmg-border); border-radius: var(--ifmg-radius); overflow: hidden; }
.ifmg-bguide-cross__table th { text-align: left; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
    color: var(--ifmg-muted); background: var(--ifmg-bg); padding: .75rem 1rem; }
.ifmg-bguide-cross__table td { padding: .85rem 1rem; border-top: 1px solid var(--ifmg-border); vertical-align: top; }
.ifmg-bguide-cross__veh { font-weight: 700; color: var(--ifmg-ink); white-space: nowrap; }
.ifmg-bguide-cross__veh a { color: var(--ifmg-blue); text-decoration: none; }
.ifmg-bguide-cross__veh a:hover { text-decoration: underline; }
.ifmg-bguide-cross__why { color: var(--ifmg-ink-soft); font-size: .92rem; }

/* 7) Why choose this vehicle? -------------------------------------------- */
.ifmg-bguide-why__card { background: rgba(27,117,188,.05); border: 1px solid rgba(27,117,188,.2);
    border-radius: var(--ifmg-radius); padding: 1.9rem 2rem; height: 100%;
    display: flex; flex-direction: column; justify-content: center; }
.ifmg-bguide-why__title { margin: 0 0 1.1rem; font-size: 1.2rem; color: var(--ifmg-blue-dark); }
.ifmg-bguide-why__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .65rem; }
.ifmg-bguide-why__list li { display: flex; gap: .5rem; align-items: flex-start; color: var(--ifmg-ink-soft); font-size: .92rem; }
.ifmg-bguide-why__list .bi { color: var(--ifmg-success); }

/* 8) Bottom line --------------------------------------------------------- */
.ifmg-bguide-bottom__summary { font-size: 1.05rem; color: var(--ifmg-ink-soft); max-width: 70ch; margin: 0 0 1.6rem; }
.ifmg-bguide-bottom__cols { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 820px) { .ifmg-bguide-bottom__cols { grid-template-columns: repeat(3,1fr); } }
.ifmg-bguide-bottom__col { border: 1px solid var(--ifmg-border); border-top: 3px solid var(--ifmg-muted);
    border-radius: var(--ifmg-radius); padding: 1.4rem 1.5rem; background: var(--ifmg-surface); }
.ifmg-bguide-bottom__col--buy { border-top-color: var(--ifmg-success); }
.ifmg-bguide-bottom__col--wait { border-top-color: var(--ifmg-orange); }
.ifmg-bguide-bottom__col--alt { border-top-color: var(--ifmg-danger); }
.ifmg-bguide-bottom__col-title { display: flex; align-items: center; gap: .5rem; font-size: .8rem; text-transform: uppercase;
    letter-spacing: .06em; margin: 0 0 .6rem; }
.ifmg-bguide-bottom__col--buy .ifmg-bguide-bottom__col-title { color: var(--ifmg-success); }
.ifmg-bguide-bottom__col--wait .ifmg-bguide-bottom__col-title { color: var(--ifmg-orange-text); }
.ifmg-bguide-bottom__col--alt .ifmg-bguide-bottom__col-title { color: var(--ifmg-danger); }
.ifmg-bguide-bottom__col p { margin: 0; color: var(--ifmg-ink-soft); font-size: .92rem; }

/* 9) Continue Your Research — page-scoped polish over the shared RelatedResearch block (mirrors the
   .page-recalls precedent so News/Recalls strips are untouched). Five evenly-sized cards with a clearer
   arrow affordance + stronger title/subtitle hierarchy. */
.page-buyers-guide .ifmg-related__grid { gap: 1.1rem; }
@media (min-width: 880px) { .page-buyers-guide .ifmg-related__grid { grid-template-columns: repeat(5, 1fr); } }
/* Destination cards — real presence (navigation hub) so the section stands on its own before the footer. */
.page-buyers-guide .ifmg-related__card a { padding: 1.5rem 1.4rem; min-height: 156px; border-radius: var(--ifmg-radius-lg); gap: .35rem; box-shadow: var(--ifmg-shadow-sm); }
.page-buyers-guide .ifmg-related__card a:hover { box-shadow: var(--ifmg-shadow-lg); }
.page-buyers-guide .ifmg-related__title { font-size: 1.15rem; font-weight: 800; color: var(--ifmg-ink); }
.page-buyers-guide .ifmg-related__sub { font-size: .88rem; line-height: 1.4; color: var(--ifmg-muted); }
.page-buyers-guide .ifmg-related__arrow { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center;
    padding: .4rem .85rem; border-radius: 999px; background: rgba(27,117,188,.1); color: var(--ifmg-blue); font-weight: 700; font-size: .95rem; }

/* 10) Page rhythm — tighter vertical spacing than the default 4rem section padding, matching the
   approved mockup. Hero keeps its own (slightly larger) padding; columned rows (cross-shop/why-choose)
   are unaffected (they zero their section padding inside .ifmg-col). */
.page-buyers-guide .ifmg-section { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.page-buyers-guide .ifmg-bguide-hero.ifmg-section { padding-top: 2.75rem; padding-bottom: 2rem; }
.page-buyers-guide .ifmg-section-head { margin-bottom: 1.75rem; }
/* More horizontal breathing room for the Buyer's Guide (the constrained container was squeezing the
   trim / ownership / research cards). Header + footer share this container so they stay aligned. */
.page-buyers-guide .ifmg-container--wide { max-width: 1360px; }
/* Section headings were overpowering their content — bring them down a notch. */
.page-buyers-guide .ifmg-section-head h2 { font-size: clamp(1.5rem, 2.3vw, 1.95rem); }
/* Align the Why-Choose card's TOP with the cross-shop TABLE (not the "What Should You Cross-Shop?"
   heading): when the two panels are side-by-side, offset the Why-Choose section down by the cross-shop
   section-head height. Stacks (no offset) below the 768px breakpoint. */
@media (min-width: 769px) {
    .page-buyers-guide .ifmg-bguide-why.ifmg-section { padding-top: 4.1rem; }
}

/* ===== WS1 — Golden Review Blueprint two-column layout =====================================
   The reviews page renders a full-width header zone (hero + quick facts + editorial rating) above a
   [main | sticky rail] grid. The rail holds the "On This Page" TOC + the "In This Review" panel.
   Review-SCOPED: everything here is nested under .ifmg-review-layout, so the global .ifmg-toc
   (horizontal sticky bar used on other pages) and every non-review layout are untouched. Collapses to
   a single column on narrow screens (rail drops below the main content). */
.ifmg-review-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 17rem;
    gap: 2.5rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1.25rem 0;
    align-items: start;
}
.ifmg-review-layout__main { min-width: 0; }
/* The main column already holds full-section components (each with its own .ifmg-container); strip the
   redundant outer max-width so they fill the column instead of re-centering inside it. */
.ifmg-review-layout__main .ifmg-container,
.ifmg-review-layout__main .ifmg-container--wide { max-width: none; padding-left: 0; padding-right: 0; }
.ifmg-review-layout__main .ifmg-section { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.ifmg-review-layout__rail {
    position: sticky;
    top: calc(var(--ifmg-header-h, 56px) + 1.25rem);
    /* CR1 R2: bound the sticky rail so it supports — never dominates — the article. If its modules exceed
       the viewport it scrolls within itself rather than running taller than the fold. (Reset on mobile below.) */
    max-height: calc(100vh - var(--ifmg-header-h, 56px) - 2.5rem);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
/* Re-flow the TOC from a horizontal sticky bar into a vertical in-rail nav (Review-scoped only). */
.ifmg-review-layout .ifmg-toc {
    position: static; z-index: auto;
    background: none; backdrop-filter: none; border-bottom: 0;
    border-left: 2px solid var(--ifmg-border);
}
.ifmg-review-layout .ifmg-toc__inner {
    flex-direction: column; align-items: stretch; gap: .1rem;
    overflow: visible; padding: .15rem 0 .15rem .75rem;
}
.ifmg-review-layout .ifmg-toc__link { white-space: normal; }
@media (max-width: 900px) {
    .ifmg-review-layout { grid-template-columns: 1fr; gap: 1.5rem; padding-top: 1rem; }
    .ifmg-review-layout__rail { position: static; top: auto; order: 2; max-height: none; overflow: visible; } /* CR1 R2: full content on mobile (rail stacks, not sticky) */
    .ifmg-review-layout .ifmg-toc { border-left: 0; }
    .ifmg-review-layout .ifmg-toc__inner { padding-left: 0; }
}

/* Sidebar module (CR1 R2) — a COMPACT, SECONDARY editorial aside (e.g. the Review rail's "How we evaluate").
   It had no dedicated styling before (a base <h2> + default list made it heavy); this keeps it small so it
   supports, never competes with, the article. The eyebrow + per-item detail are dropped in the Review rail
   at render (compact payload); the detail style is retained for any other use. */
.ifmg-sidebar-module__title { font-size: .95rem; font-weight: 700; letter-spacing: .01em; margin: 0 0 var(--space-2); color: var(--ifmg-ink); }
.ifmg-sidebar-module__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.ifmg-sidebar-module__item { display: flex; align-items: baseline; gap: .4rem; font-size: .85rem; line-height: 1.4; color: var(--ifmg-ink-soft); }
.ifmg-sidebar-module__item > .bi { color: var(--ifmg-primary); font-size: .72rem; flex: none; position: relative; top: .05rem; }
.ifmg-sidebar-module__label { font-weight: 600; }
.ifmg-sidebar-module__detail { color: var(--ifmg-muted); }

/* Review editorial article (CR1 R3) — the page's centerpiece. Typography-led, minimal chrome (no card): the
   prose is the focus, opened by a byline + a lead/dek (the Short Answer) and set in comfortable long-form type.
   Replaces the old generic .ifmg-feature-card + muted blockquote treatment. */
.ifmg-review__article { max-width: 720px; margin: 0 auto; }
.ifmg-review__article > .ifmg-eyebrow { margin-bottom: .35rem; }
.ifmg-review__byline { font-size: var(--type-meta); font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--ifmg-muted); margin: 0 0 var(--space-5); }
.ifmg-review__lead { font-size: 1.3rem; line-height: 1.55; font-weight: 500; color: var(--ifmg-ink); margin: 0 0 var(--space-6); padding-bottom: var(--space-5); border-bottom: 1px solid var(--ifmg-border); }
.ifmg-review__body { font-size: 1.075rem; line-height: 1.75; color: var(--ifmg-ink); }
.ifmg-review__body > p { margin: 0 0 var(--space-5); }
.ifmg-review__body > p:last-child { margin-bottom: 0; }
.ifmg-review__body > p:first-of-type:first-letter { /* subtle editorial opening emphasis, not a heavy drop-cap */
    font-size: 1.15em; font-weight: 700; }
.ifmg-review__pullquote { margin: var(--space-8) 0; padding: 0 0 0 var(--space-5); border-left: 3px solid var(--ifmg-accent, var(--ifmg-orange)); font-size: 1.4rem; line-height: 1.45; font-weight: 600; color: var(--ifmg-ink); }
@media (max-width: 640px) {
    .ifmg-review__lead { font-size: 1.12rem; }
    .ifmg-review__body { font-size: 1.02rem; }
    .ifmg-review__pullquote { font-size: 1.2rem; }
}

/* Section-rhythm variants (Contract 14 R8 — reusable editorial pacing). Applied as a wrapper class around a
   section by the layout assembler (LayoutJson "rhythm"); `default` emits no class (section keeps its context
   padding → zero regression). Placed AFTER the review-layout block so emphasized/rest/tight win over the
   compressed two-column baseline (equal specificity, later source order). No page-specific selectors. */
.ifmg-rhythm-tight > section.ifmg-section { padding-top: var(--section-rhythm-tight); padding-bottom: var(--section-rhythm-tight); }
.ifmg-rhythm-emphasized > section.ifmg-section { padding-top: var(--section-rhythm-emphasized); padding-bottom: var(--section-rhythm-emphasized); }
.ifmg-rhythm-rest > section.ifmg-section { padding-top: var(--section-rhythm-rest); padding-bottom: var(--section-rhythm-rest); }

/* =====================================================================================================
   WS2 Trims (listing) Golden Blueprint — Contract 20 visual refinement pass.
   Premium editorial presentation, Trims-SCOPED classes only (shared components untouched). Token-driven.
   ===================================================================================================== */

/* Quiet band tinting for vertical rhythm + softer transitions between data-driven sections. */
.ifmg-trims-alt { background: var(--ifmg-surface-2, #f6f8fb); }
.ifmg-trims-alt + .ifmg-section, .ifmg-section + .ifmg-trims-alt { border-top: 0; }

/* 3) Lineup Progression — a CENTERED, GROUPED walk-up: gas value trims → hybrid trims → premium flagship. */
.ifmg-lineup { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: var(--space-6); list-style: none; margin: 0; padding: 0; }
.ifmg-lineup__group { display: flex; flex-direction: column; gap: .7rem; }
.ifmg-lineup__grouplabel { text-align: center; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ifmg-muted); }
.ifmg-lineup__row { display: flex; justify-content: center; gap: var(--space-4); list-style: none; margin: 0; padding: 0; }
.ifmg-lineup__arrow { color: var(--ifmg-muted); font-size: 1.5rem; align-self: center; margin-top: 1.4rem; }
.ifmg-lineup__step { flex: 0 0 150px; display: flex; flex-direction: column; gap: .4rem; background: var(--ifmg-surface); border: 1px solid var(--ifmg-border); border-radius: var(--ifmg-radius); padding: 1.1rem 1.2rem; text-decoration: none; color: inherit; box-shadow: var(--ifmg-shadow-sm); transition: transform .15s var(--ease-out), box-shadow .15s var(--ease-out); }
a.ifmg-lineup__step:hover { transform: translateY(-3px); box-shadow: var(--ifmg-shadow); }
.ifmg-lineup__step.is-premium { border-color: var(--ifmg-primary, var(--ifmg-blue)); box-shadow: 0 0 0 1px var(--ifmg-primary, var(--ifmg-blue)) inset, var(--ifmg-shadow-sm); }
.ifmg-lineup__tier { align-self: flex-start; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: .15rem .55rem; border-radius: 999px; }
.ifmg-lineup__tier--gas { background: #eef1f4; color: var(--ifmg-ink-soft); }
.ifmg-lineup__tier--hybrid { background: #e4f4ea; color: #1c7a3e; }
.ifmg-lineup__tier--premium { background: var(--ifmg-primary, var(--ifmg-blue)); color: #fff; }
.ifmg-lineup__price { font-size: 1.4rem; font-weight: 800; line-height: 1.05; }
.ifmg-lineup__name { font-weight: 700; }
.ifmg-lineup__delta { margin-top: auto; font-size: .82rem; color: var(--ifmg-muted); }
@media (max-width: 820px) { .ifmg-lineup__arrow { transform: rotate(90deg); margin: 0; } .ifmg-lineup__row { flex-wrap: wrap; } }

/* 6) Trim Comparison Table + 5) Feature matrix — scannable, sticky header + first column. */
.ifmg-trims-tablewrap { overflow-x: auto; border: 1px solid var(--ifmg-border); border-radius: var(--ifmg-radius); box-shadow: var(--ifmg-shadow-sm); background: var(--ifmg-surface); }
.ifmg-trims-table { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 620px; }
.ifmg-trims-table th, .ifmg-trims-table td { padding: .8rem 1.05rem; text-align: left; border-bottom: 1px solid var(--ifmg-border); }
.ifmg-trims-table thead th { background: var(--ifmg-ink); color: #fff; font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; }
.ifmg-trims-table tbody th[scope="row"] { font-weight: 700; color: var(--ifmg-ink-soft); background: var(--ifmg-surface-2, #f6f8fb); white-space: nowrap; position: sticky; left: 0; }
.ifmg-trims-table tbody tr:last-child th, .ifmg-trims-table tbody tr:last-child td { border-bottom: 0; }
.ifmg-trims-table tbody tr:hover td { background: var(--ifmg-blue-tint, #eef4fb); }
.ifmg-trims-table .ifmg-fmatrix-cat th { background: var(--ifmg-surface-2, #f6f8fb); color: var(--ifmg-primary); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.ifmg-feat-yes { color: #1c7a3e; font-weight: 700; } .ifmg-feat-opt { color: var(--ifmg-ink-soft); } .ifmg-feat-pkg { color: #6b3fa0; } .ifmg-feat-no { color: var(--ifmg-muted); }

/* 5) "What each trim adds" — upgrade cards: one per adjacent trim step (replaces the old feature spreadsheet). */
.ifmg-upgrade-cards { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 680px) { .ifmg-upgrade-cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .ifmg-upgrade-cards { grid-template-columns: repeat(3, 1fr); } }
.ifmg-upgrade-card { display: flex; flex-direction: column; gap: .5rem; background: var(--ifmg-surface); border: 1px solid var(--ifmg-border); border-top: 3px solid var(--ifmg-primary, var(--ifmg-blue)); border-radius: var(--ifmg-radius); padding: 1.3rem 1.4rem; box-shadow: var(--ifmg-shadow-sm); }
.ifmg-upgrade-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.ifmg-upgrade-card__title { font-size: 1.18rem; font-weight: 800; line-height: 1.2; margin: 0; color: var(--ifmg-ink); }
.ifmg-upgrade-card__arrow { color: var(--ifmg-primary, var(--ifmg-blue)); font-weight: 700; }
.ifmg-upgrade-card__price { font-size: 1.05rem; font-weight: 800; color: var(--ifmg-primary, var(--ifmg-blue)); white-space: nowrap; }
.ifmg-upgrade-card__count { font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ifmg-ink-soft); margin: 0; }
.ifmg-upgrade-card__list { margin: .15rem 0 0; padding-left: 1.15rem; display: flex; flex-direction: column; gap: .2rem; font-size: .95rem; color: var(--ifmg-ink-soft); }
.ifmg-upgrade-card__more { font-size: .85rem; color: var(--ifmg-muted); margin: .15rem 0 0; font-style: italic; }
.ifmg-upgrade-card__actions { margin-top: .4rem; }
.ifmg-upgrade-card__all { margin-top: .35rem; border-top: 1px solid var(--ifmg-border); padding-top: .6rem; }
.ifmg-upgrade-card__all > summary { cursor: pointer; font-size: .82rem; font-weight: 700; color: var(--ifmg-primary, var(--ifmg-blue)); list-style-position: inside; }
.ifmg-upgrade-cat { margin: .45rem 0 0; }
.ifmg-upgrade-cat > summary { cursor: pointer; font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ifmg-ink); list-style-position: inside; }
.ifmg-upgrade-cat__n { display: inline-block; min-width: 1.3em; text-align: center; font-size: .72rem; font-weight: 700; color: var(--ifmg-ink-soft); background: var(--ifmg-surface-2, #f6f8fb); border-radius: 999px; padding: .05rem .35rem; margin-left: .15rem; }
.ifmg-upgrade-cat > ul { margin: .35rem 0 .2rem; padding-left: 1.25rem; display: flex; flex-direction: column; gap: .22rem; font-size: .92rem; color: var(--ifmg-ink-soft); }
.ifmg-upgrade-tag { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: .05rem .35rem; border-radius: 4px; margin-left: .3rem; white-space: nowrap; }
.ifmg-upgrade-tag.is-std { color: #1c7a3e; background: rgba(28,122,62,.1); }
.ifmg-upgrade-tag.is-opt { color: var(--ifmg-ink-soft); background: var(--ifmg-surface-2, #f6f8fb); }
.ifmg-upgrade-tag.is-pkg { color: #6b3fa0; background: rgba(107,63,160,.1); }

/* 7) Best Trim For… — a decision module (intentional cards, accent top-rule, persona icon). */
/* Fixed 3-column grid so a six-trim lineup stacks a balanced 3-on-3 (1 col mobile, 2 tablet, 3 desktop). */
.ifmg-decisions { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 560px) { .ifmg-decisions { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .ifmg-decisions { grid-template-columns: repeat(3, 1fr); } }
.ifmg-decision { display: flex; flex-direction: column; gap: .45rem; background: var(--ifmg-surface); border: 1px solid var(--ifmg-border); border-top: 3px solid var(--ifmg-primary, var(--ifmg-blue)); border-radius: var(--ifmg-radius); padding: 1.4rem; box-shadow: var(--ifmg-shadow-sm); }
.ifmg-decision__persona { display: flex; align-items: center; gap: .45rem; font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ifmg-primary); }
.ifmg-decision__persona i { font-size: 1rem; }
.ifmg-decision__trim { font-size: 1.45rem; font-weight: 800; margin: .1rem 0; line-height: 1.1; }
.ifmg-decision__trim a { color: inherit; text-decoration: none; } .ifmg-decision__trim a:hover { color: var(--ifmg-primary); }
.ifmg-decision__reason { margin: 0; color: var(--ifmg-ink-soft); flex: 1; }
.ifmg-decision__cta { margin-top: .5rem; font-weight: 600; color: var(--ifmg-primary); text-decoration: none; }
.ifmg-decision__cta:hover { text-decoration: underline; }

/* 8) Hybrid vs Gas — dark guided-decision band. */
.ifmg-trims-hybrid { background: var(--ifmg-ink); color: #fff; }
.ifmg-trims-hybrid .ifmg-eyebrow { color: #7fe3b0; }
.ifmg-trims-hybrid .ifmg-section-head h2 { color: #fff; }
.ifmg-trims-hybrid .ifmg-section-head__subtitle { color: rgba(255,255,255,.82); }
.ifmg-hybrid-grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr 1fr; max-width: 820px; margin: 0 auto; }
@media (max-width: 600px) { .ifmg-hybrid-grid { grid-template-columns: 1fr; } }
.ifmg-hybrid-card { text-align: center; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: var(--ifmg-radius); padding: 1.5rem 1.2rem; }
.ifmg-hybrid-card--hybrid { border-color: #3ecf8e; box-shadow: 0 0 0 1px #3ecf8e inset; }
.ifmg-hybrid-card__label { font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; opacity: .8; }
.ifmg-hybrid-card__trim { font-weight: 700; margin: .15rem 0 .6rem; }
.ifmg-hybrid-card__mpg { font-size: 2.6rem; font-weight: 800; line-height: 1; }
.ifmg-hybrid-card__mpg span { font-size: .85rem; font-weight: 400; opacity: .75; }
.ifmg-hybrid-card__price { opacity: .82; margin-top: .35rem; }
.ifmg-hybrid-verdict { max-width: 760px; margin: var(--space-6) auto 0; background: rgba(255,255,255,.06); border-left: 3px solid var(--ifmg-orange, #f58220); border-radius: var(--ifmg-radius-sm); padding: 1.1rem 1.4rem; }
.ifmg-hybrid-verdict h3 { color: #fff; font-size: 1.05rem; margin: 0 0 .5rem; }
.ifmg-hybrid-verdict ul { margin: 0; padding-left: 1.15rem; }
.ifmg-hybrid-verdict li { margin: .35rem 0; line-height: 1.55; }

/* 9) Package Differences — package cards. */
.ifmg-pkggrid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.ifmg-pkgcard { background: var(--ifmg-surface); border: 1px solid var(--ifmg-border); border-radius: var(--ifmg-radius); padding: 1.3rem; box-shadow: var(--ifmg-shadow-sm); }
.ifmg-pkgcard__name { font-size: 1.15rem; font-weight: 700; margin: 0 0 .35rem; }
.ifmg-pkgcard__price { font-weight: 700; color: var(--ifmg-primary); }
.ifmg-pkgcard__desc { color: var(--ifmg-ink-soft); margin: .35rem 0 .8rem; }
.ifmg-pkgcard__trims { display: flex; flex-wrap: wrap; gap: .4rem; }

/* badge used by lineup/packages (reuses existing pill look). */
.ifmg-trim-pill { font-size: .75rem; font-weight: 600; padding: .2rem .6rem; border-radius: 999px; background: var(--ifmg-surface-2, #f6f8fb); color: var(--ifmg-ink-soft); border: 1px solid var(--ifmg-border); }

/* 11) Related Articles — consistent equal-height cards, fixed 16:9 media (no orphan tiny/huge). */
.ifmg-relgrid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.ifmg-relgrid--two { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); max-width: 880px; margin-inline: auto; }
.ifmg-relcard { display: flex; flex-direction: column; background: var(--ifmg-surface); border: 1px solid var(--ifmg-border); border-radius: var(--ifmg-radius); overflow: hidden; box-shadow: var(--ifmg-shadow-sm); transition: transform .15s var(--ease-out), box-shadow .15s var(--ease-out); }
.ifmg-relcard:hover { transform: translateY(-4px); box-shadow: var(--ifmg-shadow-lg); }
.ifmg-relcard__media { aspect-ratio: 16 / 9; background: var(--ifmg-surface-2, #f6f8fb); overflow: hidden; }
.ifmg-relcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ifmg-relcard__body { display: flex; flex-direction: column; gap: .4rem; padding: 1rem 1.1rem 1.2rem; flex: 1; }
.ifmg-relcard__body h3 { font-size: 1.05rem; margin: 0; line-height: 1.25; }
.ifmg-relcard__body h3 a { color: inherit; text-decoration: none; } .ifmg-relcard__body h3 a:hover { color: var(--ifmg-primary); }
.ifmg-relcard__body p { margin: 0; color: var(--ifmg-ink-soft); font-size: .92rem; }

/* 12) FAQ close — constrained, centered utility section. */
.ifmg-trims-faq .ifmg-trims-faqwrap { max-width: 820px; margin: 0 auto; }

/* =====================================================================================================
   WS3 Features (listing) Golden Blueprint — canonical feature knowledge base. Trims/Features-scoped classes
   only; token-driven; data-driven sections self-hide when empty.
   ===================================================================================================== */

/* Feature Overview — grounded count strip + CTA. */
.ifmg-features-stats { display: flex; flex-wrap: wrap; gap: var(--space-8); justify-content: center; margin-top: var(--space-6); }
.ifmg-features-stat { display: flex; flex-direction: column; align-items: center; }
.ifmg-features-stat__n { font-size: 2.2rem; font-weight: 800; line-height: 1; color: var(--ifmg-primary, var(--ifmg-blue)); }
.ifmg-features-stat__l { font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ifmg-muted); margin-top: .25rem; }
.ifmg-features-overview__cta { text-align: center; margin-top: var(--space-6); }

/* Feature Categories — sticky scroll-spy nav. Smooth-scroll handled globally; scroll-margin offsets the
   sticky bar so anchored sections aren't hidden underneath it. */
html { scroll-behavior: smooth; }
.ifmg-features-nav { background: var(--ifmg-surface); border-top: 1px solid var(--ifmg-border); border-bottom: 1px solid var(--ifmg-border); position: sticky; top: 0; z-index: 50; }
.ifmg-features-nav__track { display: flex; gap: .5rem; overflow-x: auto; padding: .7rem 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ifmg-features-nav__track::-webkit-scrollbar { display: none; }
.ifmg-features-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .85rem; border: 1px solid var(--ifmg-border); border-radius: 999px; background: var(--ifmg-bg, #fff); color: var(--ifmg-ink); text-decoration: none; font-weight: 600; font-size: .9rem; white-space: nowrap; transition: border-color .15s var(--ease-out), background .15s var(--ease-out), color .15s var(--ease-out); }
.ifmg-features-chip:hover { border-color: var(--ifmg-primary, var(--ifmg-blue)); color: var(--ifmg-ink); }
.ifmg-features-chip i { color: var(--ifmg-primary, var(--ifmg-blue)); }
.ifmg-features-chip.is-active { background: var(--ifmg-primary, var(--ifmg-blue)); border-color: var(--ifmg-primary, var(--ifmg-blue)); color: #fff; }
.ifmg-features-chip.is-active i { color: #fff; }
.ifmg-features-chip__n { font-size: .78rem; font-weight: 700; color: var(--ifmg-primary, var(--ifmg-blue)); background: var(--ifmg-blue-tint, #eef4fb); border-radius: 999px; padding: .05rem .45rem; }
.ifmg-features-chip.is-active .ifmg-features-chip__n { color: var(--ifmg-primary, var(--ifmg-blue)); background: #fff; }

/* Feature Category sections — educational intro (always) + verified cards (when data). */
.ifmg-features-cat { scroll-margin-top: 64px; }
.ifmg-features-cat .ifmg-eyebrow i { margin-right: .35rem; }
.ifmg-features-cat .ifmg-section-head__subtitle { max-width: 70ch; }
.ifmg-features-cat .ifmg-features-cardgrid { margin-top: var(--space-5); }

/* Feature cards — rich: icon, category, name, why-it-matters, availability. */
/* Roomier grid (cards breathe): wider min gap + a 3-up ceiling only on large screens. */
.ifmg-features-cardgrid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .ifmg-features-cardgrid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .ifmg-features-cardgrid { grid-template-columns: repeat(3, 1fr); } }
.ifmg-features-card { display: flex; flex-direction: column; background: var(--ifmg-bg, #fff); border: 1px solid var(--ifmg-border); border-radius: var(--ifmg-radius); padding: 1.5rem; box-shadow: var(--ifmg-shadow-sm); }
.ifmg-features-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 10px; background: var(--ifmg-blue-tint, #eef4fb); color: var(--ifmg-primary, var(--ifmg-blue)); font-size: 1.1rem; margin-bottom: .7rem; }
.ifmg-features-card__cat { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ifmg-primary, var(--ifmg-blue)); font-weight: 700; }
/* Hierarchy: title largest/boldest, explanation high-contrast body, benefit set apart (its own block below). */
.ifmg-features-card__name { font-weight: 700; font-size: 1.12rem; line-height: 1.3; margin: .15rem 0 .45rem; color: var(--ifmg-ink, #16181d); }
/* Scannable excerpt: clamp the explanation so cards stay uniform and the page doesn't read as a wall of text
   (full copy remains in the DOM + stored for reuse). */
.ifmg-features-card__desc { font-size: .92rem; line-height: 1.55; color: #353a42; margin-bottom: .65rem; display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.ifmg-features-card__avail { font-size: .82rem; color: var(--ifmg-muted); margin-top: auto; padding-top: .4rem; }
/* Curation note when a category has more verified features than the curated grid shows. */
.ifmg-fcat__more { margin: 1.1rem 0 0; font-size: .78rem; color: var(--ifmg-muted); opacity: .8; }

/* Related Comparisons — text-only teaser cards reuse the Trims related-card shell. */
.ifmg-relcard--text { text-decoration: none; color: inherit; }
.ifmg-relcard--text .ifmg-relcard__body { gap: .3rem; }
.ifmg-relcard--text h3 { font-size: 1.1rem; margin: 0; }

/* =====================================================================================================
   WS3 Features V3 — premium presentation system (reusable ModelWide patterns): distinct category layout
   variants, scroll-reveal motion, sticky-nav progress, editorial callout. Token-driven; degrades gracefully.
   ===================================================================================================== */

/* Entry fade microinteraction (reusable). CSS-ONLY and content ALWAYS ends visible — never gated on JS, so a
   blocked/failed/slow script can never hide the page body. Base state is visible; the keyframe gently fades
   each element in on load and finishes fully opaque (animation-fill-mode: both). Reduced-motion → no anim. */
@keyframes ifmg-fade-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.ifmg-reveal { animation: ifmg-fade-in .55s var(--ease-out, ease) both; }
@media (prefers-reduced-motion: reduce) { .ifmg-reveal { animation: none; } }

/* Sticky-nav read-progress bar. */
.ifmg-features-nav__progress { height: 3px; background: var(--ifmg-border); }
.ifmg-features-nav__progress span { display: block; height: 100%; width: 0; background: var(--ifmg-primary, var(--ifmg-blue)); transition: width .12s linear; }

.ifmg-fcat { scroll-margin-top: 80px; padding-top: var(--space-6, 3rem); padding-bottom: var(--space-6, 3rem); }
.ifmg-fcat .ifmg-section-head { margin-bottom: var(--space-5, 2rem); }

/* Variant: image + content split (mirrored for --reverse). */
.ifmg-fsplit__grid { display: grid; gap: 2.5rem; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 860px) { .ifmg-fsplit__grid { grid-template-columns: 1fr 1fr; } .ifmg-fsplit--reverse .ifmg-fsplit__media { order: 2; } }
.ifmg-fsplit__media img { width: 100%; height: 100%; max-height: 440px; object-fit: cover; border-radius: var(--ifmg-radius); box-shadow: 0 18px 40px rgba(0,0,0,.12); }

/* Variant: spotlight — full-bleed image with a floating card pulled over it. */
/* Spotlight — the image is now CONTAINED (not a full-bleed cropped band) and the heading card sits BELOW it
   (no text-over-image overlay), so it matches the contained scale/rhythm of the split (Performance/Cargo)
   sections and never dominates. object-position favours the upper-middle so the cover-crop keeps the car body. */
.ifmg-fspot__media { max-width: 1000px; height: 300px; margin: 0 auto; overflow: hidden; border-radius: var(--ifmg-radius); }
.ifmg-fspot__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; display: block; }
.ifmg-fspot__card { background: var(--ifmg-bg, #fff); border-radius: 16px; box-shadow: var(--ifmg-shadow-sm); padding: 1.75rem; max-width: 1000px; margin: 1.25rem auto 1.5rem; position: relative; }
@media (max-width: 640px) { .ifmg-fspot__media { height: 190px; } .ifmg-fspot__card { padding: 1.4rem; } }

/* Variant: dark feature band. */
.ifmg-fdark__badge { width: 64px; height: 64px; margin: 0 auto 1.1rem; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; background: rgba(255,255,255,.12); color: #fff; }
.ifmg-fdark .ifmg-section-head { text-align: center; align-items: center; }
.ifmg-fdark .ifmg-section-head__subtitle { color: rgba(255,255,255,.82); max-width: 64ch; }

/* Variant: gallery strip — horizontal, snap-scrolling real photography. */
.ifmg-fgallery__strip { display: flex; gap: 1rem; overflow-x: auto; padding: 1.2rem 0 .4rem; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.ifmg-fgallery__strip img { height: 280px; width: auto; flex: 0 0 auto; object-fit: cover; border-radius: var(--ifmg-radius); scroll-snap-align: start; }
@media (max-width: 640px) { .ifmg-fgallery__strip img { height: 200px; } }

/* Variant: icon-forward band. */
.ifmg-ficon { text-align: center; }
.ifmg-ficon__badge { width: 64px; height: 64px; margin: 0 auto 1.1rem; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; background: var(--ifmg-blue-tint, #eef4fb); color: var(--ifmg-primary, var(--ifmg-blue)); }
.ifmg-ficon .ifmg-section-head { text-align: center; align-items: center; }

/* Editorial callout (reusable Buyer-tip / Did-you-know / Note). */
.ifmg-callout { display: flex; gap: 1rem; align-items: flex-start; padding: 1.4rem 1.6rem; border: 1px solid var(--ifmg-border); border-left: 4px solid var(--ifmg-primary, var(--ifmg-blue)); border-radius: var(--ifmg-radius); background: var(--ifmg-surface); }
.ifmg-callout--did { border-left-color: #6b46c1; }
.ifmg-callout--note { border-left-color: var(--ifmg-muted); }
.ifmg-callout__icon { font-size: 1.5rem; line-height: 1; color: var(--ifmg-primary, var(--ifmg-blue)); }
.ifmg-callout--did .ifmg-callout__icon { color: #6b46c1; }
.ifmg-callout__eyebrow { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--ifmg-primary, var(--ifmg-blue)); }
.ifmg-callout--did .ifmg-callout__eyebrow { color: #6b46c1; }
.ifmg-callout__title { margin: .15rem 0 .35rem; font-size: 1.15rem; }
.ifmg-callout__body p { margin: 0; color: var(--ifmg-ink-soft, var(--ifmg-ink)); }

/* Feature card — grounded availability badge + trims + the honest "pending" band. */
.ifmg-features-card__avail { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.ifmg-features-card__trims { font-size: .8rem; color: var(--ifmg-muted); }
.ifmg-avail { display: inline-block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: .15rem .55rem; border-radius: 999px; }
.ifmg-avail--std { background: #e7f6ec; color: #1a7f3c; }
.ifmg-avail--trim { background: var(--ifmg-blue-tint, #eef4fb); color: var(--ifmg-primary, var(--ifmg-blue)); }
.ifmg-avail--avail { background: #fff5e6; color: #b56a00; }
.ifmg-avail--pending { background: #f0f0f3; color: var(--ifmg-muted); }
.ifmg-fcat__pending { display: flex; gap: .55rem; align-items: center; color: var(--ifmg-muted); font-size: .95rem; background: var(--ifmg-surface); border: 1px dashed var(--ifmg-border); border-radius: var(--ifmg-radius); padding: 1rem 1.2rem; margin-top: .5rem; }
.ifmg-fcat__pending i { color: var(--ifmg-primary, var(--ifmg-blue)); }

/* WS3 Features — Next Pass: the card as a reusable knowledge object (name + plain-English explanation +
   why-it-matters + grounded availability + source), the COMPACT category-pending row, and the grounded
   "Feature availability by trim" summary. No fabrication — every value comes from verified data. */
.ifmg-features-card__head { display: flex; align-items: center; gap: .55rem; margin-bottom: .45rem; }
.ifmg-features-card__head .ifmg-features-card__icon { margin-bottom: 0; width: 2rem; height: 2rem; font-size: 1rem; }
/* Secondary to the explanation: lighter weight + a touch muted + clamped, so it supports without competing. */
.ifmg-features-card__why { font-size: .85rem; line-height: 1.5; color: #51565e; margin: 0 0 .2rem; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ifmg-features-card__whylabel { display: block; font-weight: 600; font-size: .64rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ifmg-primary, var(--ifmg-blue)); opacity: .85; margin-bottom: .1rem; }
/* Consumer benefit — the buyer takeaway, set apart with a tinted left rail so it reads as the "so what". */
.ifmg-features-card__benefit { font-size: .84rem; line-height: 1.45; color: var(--ifmg-ink, #1a1a1a); margin: 0 0 .7rem; padding: .5rem .7rem; background: var(--ifmg-blue-tint, #eef4fb); border-radius: 8px; border-left: 3px solid var(--ifmg-primary, var(--ifmg-blue)); }
.ifmg-features-card__benefitlabel { display: inline-flex; align-items: center; gap: .25rem; font-weight: 700; font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ifmg-primary, var(--ifmg-blue)); margin-right: .35rem; }
.ifmg-features-card__foot { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: auto; padding-top: .6rem; border-top: 1px solid var(--ifmg-border); }

/* Compact category-pending band (Fix 2/4) — one tight row, never a big empty section. */
.ifmg-section--tight { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.ifmg-fcat--pending { scroll-margin-top: 70px; }
.ifmg-pendingrow { display: flex; align-items: flex-start; gap: .9rem 1.1rem; flex-wrap: wrap; background: var(--ifmg-surface); border: 1px dashed var(--ifmg-border); border-radius: var(--ifmg-radius); padding: .9rem 1.1rem; }
.ifmg-pendingrow__cat { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; font-size: .95rem; white-space: nowrap; padding-top: .05rem; }
.ifmg-pendingrow__cat i { color: var(--ifmg-primary, var(--ifmg-blue)); }
.ifmg-pendingrow__note { flex: 1 1 320px; color: var(--ifmg-muted); font-size: .88rem; line-height: 1.5; }
.ifmg-pendingrow__note i { color: var(--ifmg-primary, var(--ifmg-blue)); margin-right: .35rem; }
.ifmg-pendingrow__note strong { color: var(--ifmg-ink, #1a1a1a); font-weight: 700; }

/* Feature availability by trim (Fix 5) — grounded summary connecting verified features to the lineup. */
/* Compact lineup summary — a few short scannable cards, never a long row-per-trim-set list. */
.ifmg-favail__cards { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: var(--space-4); }
@media (min-width: 620px) { .ifmg-favail__cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .ifmg-favail__cards { grid-template-columns: repeat(4, 1fr); } }
.ifmg-favail__card { background: var(--ifmg-bg, #fff); border: 1px solid var(--ifmg-border); border-radius: var(--ifmg-radius); padding: 1.1rem 1.2rem; border-top: 3px solid var(--ifmg-border); }
.ifmg-favail__card--all { background: var(--ifmg-blue-tint, #eef4fb); border-color: transparent; border-top-color: var(--ifmg-primary, var(--ifmg-blue)); }
.ifmg-favail__card--hybrid { border-top-color: #1a7f3c; }
.ifmg-favail__card--premium { border-top-color: #b08400; }
.ifmg-favail__h { font-weight: 700; font-size: 1rem; color: var(--ifmg-ink, #16181d); }
.ifmg-favail__sub { font-size: .76rem; text-transform: uppercase; letter-spacing: .03em; color: var(--ifmg-muted); margin: .15rem 0 .55rem; }
.ifmg-favail__feats { color: #353a42; font-size: .9rem; line-height: 1.55; }
.ifmg-favail__more { color: var(--ifmg-muted); font-size: .8rem; white-space: nowrap; }
.ifmg-favail__pending { display: flex; align-items: flex-start; gap: .5rem; margin-top: var(--space-5, 1.5rem); color: var(--ifmg-muted); font-size: .84rem; line-height: 1.5; }
.ifmg-favail__pending i { color: var(--ifmg-primary, var(--ifmg-blue)); margin-top: .15rem; }

/* WS4 — FAQ Golden hub: featured cards + searchable, categorized, native <details> accordion. Works without
   JS (answers are server-rendered + crawlable); the script only filters/counts. No horizontal overflow. */

/* Featured "Start here" cards — editorial, stronger than the list: a confident on-ramp to the top answers. */
.ifmg-faqpop { margin: var(--space-4) 0 var(--space-6, 3rem); }
.ifmg-faqpop__h { font-size: 1.2rem; font-weight: 800; letter-spacing: -.01em; color: var(--ifmg-ink, #16181d); margin: 0 0 1.1rem; }
.ifmg-faqpop__grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 620px) { .ifmg-faqpop__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .ifmg-faqpop__grid { grid-template-columns: repeat(3, 1fr); } }
.ifmg-faqpop__card { display: flex; flex-direction: column; gap: .5rem; min-height: 200px; padding: 1.5rem 1.6rem; background: var(--ifmg-bg, #fff); border: 1px solid var(--ifmg-border); border-top: 4px solid var(--ifmg-primary, var(--ifmg-blue)); border-radius: 14px; text-decoration: none; box-shadow: var(--ifmg-shadow-sm); transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; }
.ifmg-faqpop__card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0,0,0,.12); }
.ifmg-faqpop__cat { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 800; color: var(--ifmg-primary, var(--ifmg-blue)); }
.ifmg-faqpop__q { font-size: 1.2rem; font-weight: 800; line-height: 1.3; letter-spacing: -.01em; color: var(--ifmg-ink, #16181d); }
.ifmg-faqpop__a { font-size: .92rem; line-height: 1.55; color: #353a42; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ifmg-faqpop__go { margin-top: auto; padding-top: .6rem; font-size: .85rem; font-weight: 800; color: var(--ifmg-primary, var(--ifmg-blue)); display: inline-flex; align-items: center; gap: .25rem; }
.ifmg-faqpop__card:hover .ifmg-faqpop__go { gap: .45rem; }

/* Controls — a prominent search (leading icon) + live count + chips. */
.ifmg-faqhub__controls { display: flex; flex-direction: column; gap: .85rem; margin: 0 0 var(--space-5, 2rem); }
.ifmg-faqhub__searchwrap { position: relative; max-width: 680px; width: 100%; }
.ifmg-faqhub__searchicon { position: absolute; left: 1.15rem; top: 50%; transform: translateY(-50%); font-size: 1.1rem; color: var(--ifmg-muted); pointer-events: none; }
.ifmg-faqhub__search { width: 100%; padding: .95rem 1.1rem .95rem 2.9rem; font-size: 1.02rem; border: 1.5px solid var(--ifmg-border); border-radius: 999px; background: var(--ifmg-bg, #fff); color: var(--ifmg-ink, #16181d); box-shadow: var(--ifmg-shadow-sm); }
.ifmg-faqhub__search::placeholder { color: var(--ifmg-muted); }
.ifmg-faqhub__search:focus { outline: none; border-color: var(--ifmg-primary, var(--ifmg-blue)); box-shadow: 0 0 0 3px rgba(27,117,188,.15); }
.ifmg-faqhub__count { margin: 0; font-size: .85rem; color: var(--ifmg-muted); font-weight: 600; }
.ifmg-faqhub__chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.ifmg-faqchip { display: inline-flex; align-items: center; gap: .4rem; padding: .42rem .85rem; font-size: .82rem; font-weight: 600; color: var(--ifmg-ink-soft, #51565e); background: var(--ifmg-surface, #f3f5f8); border: 1px solid var(--ifmg-border); border-radius: 999px; cursor: pointer; transition: background .12s ease, color .12s ease, border-color .12s ease; }
.ifmg-faqchip:hover { border-color: var(--ifmg-primary, var(--ifmg-blue)); color: var(--ifmg-ink, #16181d); }
.ifmg-faqchip.is-active { color: #fff; background: var(--ifmg-primary, var(--ifmg-blue)); border-color: transparent; }
.ifmg-faqchip__n { font-size: .7rem; font-weight: 700; min-width: 1.1rem; height: 1.1rem; padding: 0 .25rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: rgba(0,0,0,.06); color: inherit; }
.ifmg-faqchip.is-active .ifmg-faqchip__n { background: rgba(255,255,255,.25); }

/* List — scannable: a strong category header (accent bar + count), question rows, aligned toggle, open state. */
.ifmg-faqcat { margin-bottom: var(--space-6, 3rem); }
.ifmg-faqcat__h { display: flex; align-items: center; gap: .55rem; font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; color: var(--ifmg-ink, #16181d); margin: 0 0 .9rem; padding-bottom: .55rem; border-bottom: 1px solid var(--ifmg-border); }
.ifmg-faqcat__bar { width: .3rem; height: 1.1rem; border-radius: 999px; background: var(--ifmg-primary, var(--ifmg-blue)); flex: none; }
.ifmg-faqcat__n { font-size: .8rem; font-weight: 700; color: var(--ifmg-muted); }
.ifmg-faqitem { border: 1px solid var(--ifmg-border); border-radius: var(--ifmg-radius); background: var(--ifmg-bg, #fff); margin-bottom: .6rem; overflow: hidden; transition: border-color .12s ease; }
.ifmg-faqitem:hover { border-color: #c7ccd4; }
.ifmg-faqitem[open] { border-color: var(--ifmg-primary, var(--ifmg-blue)); box-shadow: var(--ifmg-shadow-sm); }
.ifmg-faqitem__q { cursor: pointer; list-style: none; padding: 1rem 1.2rem; font-weight: 700; font-size: 1.02rem; line-height: 1.4; color: var(--ifmg-ink, #16181d); display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.ifmg-faqitem__q::-webkit-details-marker { display: none; }
.ifmg-faqitem__q::after { content: "+"; font-weight: 400; font-size: 1.5rem; line-height: 1; color: var(--ifmg-primary, var(--ifmg-blue)); flex: none; width: 1.4rem; text-align: center; }
.ifmg-faqitem[open] .ifmg-faqitem__q { color: var(--ifmg-primary, var(--ifmg-blue)); }
.ifmg-faqitem[open] .ifmg-faqitem__q::after { content: "\2013"; }
.ifmg-faqitem__a { padding: .2rem 1.2rem 1.2rem; border-top: 1px solid var(--ifmg-border); margin-top: -1px; }
.ifmg-faqitem__short { font-weight: 700; color: var(--ifmg-ink, #16181d); margin: .9rem 0 .5rem; line-height: 1.5; }
.ifmg-faqitem__full { color: #353a42; font-size: .93rem; line-height: 1.65; margin: 0 0 .6rem; }
.ifmg-faqitem__links { display: flex; flex-wrap: wrap; gap: .5rem .9rem; margin-top: .5rem; }
.ifmg-faqitem__link { font-size: .85rem; font-weight: 700; color: var(--ifmg-primary, var(--ifmg-blue)); text-decoration: none; display: inline-flex; align-items: center; gap: .25rem; background: var(--ifmg-blue-tint, #eef4fb); padding: .35rem .7rem; border-radius: 999px; }
.ifmg-faqitem__link:hover { text-decoration: none; filter: brightness(.97); }
/* Empty state — a clear, friendly "no matches" panel rather than a bare line. */
.ifmg-faqhub__empty { text-align: center; padding: 2.5rem 1rem; color: var(--ifmg-muted); }
.ifmg-faqhub__empty i { font-size: 1.8rem; color: var(--ifmg-border); display: block; margin-bottom: .5rem; }
.ifmg-faqhub__empty-h { font-size: 1.05rem; font-weight: 700; color: var(--ifmg-ink, #16181d); margin: 0 0 .25rem; }
.ifmg-faqhub__empty-s { font-size: .9rem; margin: 0; }
/* Breathing room below the hub so the ad / lineup / research that follow don't feel cramped. */
.ifmg-faqhub { padding-bottom: var(--space-6, 3rem); }

/* ===== WS6 Pricing platform — Trim Detail "Build & Price" (MSRP only) ===== */
/* Summary stat row — quick buying facts (starting MSRP + package/accessory counts) above the groups. */
.ifmg-bprice__summary { display: flex; flex-wrap: wrap; gap: .9rem 2.25rem; align-items: flex-end;
  padding: 0 0 1.15rem; margin: 1rem 0 1.4rem; border-bottom: 1px solid var(--ifmg-border, #e4e7ec); }
.ifmg-bprice__stat { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.ifmg-bprice__stat-v { font-size: 1.35rem; font-weight: 800; line-height: 1.05; color: var(--ifmg-ink, #16181d); font-variant-numeric: tabular-nums; }
.ifmg-bprice__stat-l { font-size: .78rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--ifmg-muted, #667085); }
.ifmg-bprice__stat--primary .ifmg-bprice__stat-v { font-size: 1.65rem; color: var(--ifmg-blue, #1B75BC); }
.ifmg-bprice__group { margin: 0 0 1.25rem; }
.ifmg-bprice__group-h { font-size: 1.05rem; font-weight: 700; margin: 0 0 .5rem; color: var(--ifmg-ink, #16181d);
  display: flex; align-items: center; gap: .5rem; }
.ifmg-bprice__group-h .bi { color: var(--ifmg-blue, #1B75BC); }
.ifmg-bprice__list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--ifmg-border, #e4e7ec); border-radius: 10px; overflow: hidden; }
.ifmg-bprice__item { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .7rem 1rem; border-top: 1px solid var(--ifmg-border, #eef0f3); }
.ifmg-bprice__item:first-child { border-top: 0; }
.ifmg-bprice__item-name { color: var(--ifmg-ink, #16181d); min-width: 0; overflow-wrap: anywhere; }
.ifmg-bprice__item-price { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; color: var(--ifmg-ink, #16181d); }
.ifmg-bprice__impact { margin: 1.5rem 0 .5rem; padding: 1rem 1.25rem; border-radius: 10px;
  background: var(--ifmg-surface-2, #f6f8fb); border: 1px solid var(--ifmg-border, #e4e7ec); }
.ifmg-bprice__impact-h { font-size: 1rem; font-weight: 700; margin: 0 0 .5rem; color: var(--ifmg-ink, #16181d); }
.ifmg-bprice__impact-row { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; font-variant-numeric: tabular-nums; }
.ifmg-bprice__impact-row--total { border-top: 2px solid var(--ifmg-border, #d8dce2); margin-top: .35rem; padding-top: .6rem; font-weight: 800; }
.ifmg-bprice__impact-row--total span:last-child { color: var(--ifmg-blue, #1B75BC); }
.ifmg-bprice__note { font-size: .82rem; color: var(--ifmg-muted, #667085); margin: .75rem 0 0; }
@media (max-width: 560px) {
  .ifmg-bprice__summary { gap: .8rem 1.75rem; }
  .ifmg-bprice__stat-v { font-size: 1.25rem; }
  .ifmg-bprice__stat--primary .ifmg-bprice__stat-v { font-size: 1.45rem; }
}
/* Collapsible (default-collapsed) pricing groups — native <details>. */
details.ifmg-bprice__group { margin: 0 0 .6rem; border: 1px solid var(--ifmg-border, #e4e7ec); border-radius: 10px; overflow: hidden; background: var(--ifmg-surface, #fff); }
details.ifmg-bprice__group > summary.ifmg-bprice__group-h { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin: 0; padding: .8rem 1rem; font-size: 1rem; font-weight: 700; color: var(--ifmg-ink, #16181d); user-select: none; }
.ifmg-bprice__group-n { flex-shrink: 0; }
details.ifmg-bprice__group > summary.ifmg-bprice__group-h::-webkit-details-marker { display: none; }
details.ifmg-bprice__group > summary.ifmg-bprice__group-h::after { content: "\f282"; font-family: "bootstrap-icons"; margin-left: auto; color: var(--ifmg-muted, #667085); transition: transform .15s ease; }
details.ifmg-bprice__group[open] > summary.ifmg-bprice__group-h::after { transform: rotate(180deg); }
.ifmg-bprice__group-h .bi { color: var(--ifmg-blue, #1B75BC); }
.ifmg-bprice__group-n { font-size: .8rem; font-weight: 700; color: var(--ifmg-muted, #667085); background: var(--ifmg-surface-2, #f1f4f8); border-radius: 999px; padding: .05rem .5rem; }
details.ifmg-bprice__group > .ifmg-bprice__list { border: 0; border-top: 1px solid var(--ifmg-border, #eef0f3); border-radius: 0; }
/* Compact recall summary on content pages (trim/model) — most-recent + CTA, not the full list. */
.ifmg-recalls--compact .ifmg-recalls__latest { border: 1px solid var(--ifmg-border, #e4e7ec); border-left: 4px solid var(--ifmg-blue, #1B75BC); border-radius: 10px; padding: 1.2rem 1.4rem; margin: .5rem 0 1.25rem; background: var(--ifmg-surface, #fff); }
.ifmg-recalls__latest-label { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ifmg-muted, #667085); margin-bottom: .55rem; }
.ifmg-recalls--compact .ifmg-recall__head { margin-bottom: .5rem; }
.ifmg-recalls--compact .ifmg-recall__meta { margin-bottom: .2rem; }
.ifmg-recalls--compact .ifmg-recall__summary { margin: .85rem 0 0; line-height: 1.6; }
.ifmg-recalls__context { font-size: .9rem; color: var(--ifmg-ink, #16181d); margin: 0 0 1.15rem; }
.ifmg-recalls__safe { display: flex; align-items: center; gap: .85rem; flex-wrap: wrap; padding: 1rem 1.25rem; margin: .5rem 0 1rem;
  border: 1px solid var(--ifmg-border, #e4e7ec); border-radius: 10px; background: var(--ifmg-surface-2, #f6f8fb); }
.ifmg-recalls__safe-icon { font-size: 1.5rem; color: #1a8f5a; }
.ifmg-recalls__safe-body { flex: 1 1 16rem; }
.ifmg-recalls__safe-h { font-weight: 700; margin: 0; color: var(--ifmg-ink, #16181d); }
.ifmg-recalls__safe-s { font-size: .85rem; color: var(--ifmg-muted, #667085); margin: .15rem 0 0; }
.ifmg-recalls__cta { white-space: nowrap; }
.ifmg-recalls__cta .bi { margin-left: .35rem; }
/* Mobile: the long recall CTA goes full-width and wraps so it never forces horizontal scroll. */
@media (max-width: 560px) {
  .ifmg-recalls__cta { white-space: normal; display: flex; width: 100%; justify-content: center; text-align: center; }
}