/* ==========================================================================
   lead_premium.css — the premium lead-site design system (Jeff, 2026-09-16/17)
   --------------------------------------------------------------------------
   Copied from the vault prototype
     "01 - Projects/SMASH Auction Renewal/2026-09-16 - Lead design preview/index.html"
   and the specification
     "2026-09-16 - Production release and premium lead experience specification.md"
   (design system, spec lines 66-82). Values are the prototype's FINAL pass — the
   prototype was written in five stacked passes and later passes supersede earlier
   ones (pill buttons, not 6px; 38px ivory play token, not the 42px gold outline;
   no rest-state shadow; right-edge rail mask only).

   SCOPING CONTRACT — every selector in this file contains `.lead-premium`.
   Nothing here may leak into the existing lead pages, which are still served by
   templates/leads/converters_ca_buy.html and friends and carry smash-lead.css,
   Bootstrap and Font Awesome. No bare element selectors, no `:root`, and every
   component class is `lp-` prefixed because the prototype's bare names
   (.button, .hero, .strip, .film, .play, .steps, .quote) would collide.
   core/tests/test_lead_premium_variants.py enforces both rules.

   Motion: every animation is off under prefers-reduced-motion — the ticker and
   the CTA rail especially (see the reduced-motion block at the end of the file).
   ========================================================================== */

/* ── Tokens: on the root class, never on :root ───────────────────────────── */
.lead-premium {
    --lp-ink: #0a0a0a;
    --lp-gold: #c9a45c;
    --lp-paper: #f5f1e6;
    --lp-muted: #aaa69d;
    --lp-copy: #bcb8ad;
    --lp-copy-2: #c4bfae;

    --lp-hair-1: #ffffff12;
    --lp-hair-2: #ffffff1c;
    --lp-hair-3: #ffffff25;
    --lp-hair-4: #ffffff40;
    --lp-hair-gold: #c9a45c30;

    --lp-btn-bg: #d6b578;
    --lp-btn-bg-hover: #e5c78e;
    --lp-btn-border: #e0c495;
    --lp-btn-ink: #14120d;
    --lp-ghost-bg: #ffffff06;
    --lp-ghost-bg-hover: #ffffff0d;
    --lp-ghost-border: #ffffff30;
    --lp-ghost-border-hover: #ffffff60;

    /* Focus ring colour is a token because the ring must clear WCAG 2.2
       SC 1.4.11 (3:1) against whatever it actually sits on. outline-offset
       exposes the PANEL behind the control, so the ring is judged against the
       panel, not the button. Gold on the steel ground is 8.4:1; gold on ivory
       is only 2.1:1, so the ivory panels below redefine this token to ink. */
    --lp-focus-ring: var(--lp-gold);

    /* The converter pages already load these three from Google Fonts
       (converters_ca_buy.html hero_preload); the tiers fall back cleanly. */
    --lp-font-display: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
    --lp-font-body: 'Inter', 'Segoe UI', Arial, sans-serif;
    --lp-font-label: 'Oswald', 'Arial Narrow', sans-serif;

    --lp-radius-pill: 999px;
    --lp-radius-lg: 24px;
    --lp-radius-md: 16px;
    --lp-radius-sm: 11px;

    --lp-ease-out: cubic-bezier(.22, 1, .36, 1);
    --lp-dur-control: 180ms;
    --lp-dur-reveal: 260ms;
    --lp-drift: 32s;

    --lp-space-section: 75px;
    --lp-space-gutter: 90%;
    --lp-tap: 44px;

    background: var(--lp-ink);
    color: var(--lp-paper);
    font-family: var(--lp-font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    position: relative;
    isolation: isolate;
}

.lead-premium *,
.lead-premium *::before,
.lead-premium *::after { box-sizing: border-box; }

/* These pages also carry Bootstrap's reboot. Neutralise its element defaults
   INSIDE the premium wrapper only — never globally — so the compositions are
   not at the mercy of a vendor stylesheet's margins and list padding. */
.lead-premium h1,
.lead-premium h2,
.lead-premium h3,
.lead-premium p,
.lead-premium ul,
.lead-premium ol,
.lead-premium figure { margin: 0; padding: 0; }

.lead-premium a { color: inherit; }
.lead-premium button { cursor: pointer; }
.lead-premium button,
.lead-premium input,
.lead-premium select { font: inherit; }
.lead-premium [hidden] { display: none !important; }

.lead-premium a:focus-visible,
.lead-premium button:focus-visible,
.lead-premium summary:focus-visible,
.lead-premium [tabindex]:focus-visible {
    outline: 3px solid var(--lp-focus-ring);
    outline-offset: 5px;
}

.lead-premium .lp-wrap { width: min(1320px, var(--lp-space-gutter)); margin: 0 auto; }

/* ── Type scale ──────────────────────────────────────────────────────────── */
.lead-premium .lp-h1,
.lead-premium h1.lp-h1 {
    font-family: var(--lp-font-display);
    font-size: clamp(43px, 5.8vw, 84px);
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -.055em;
    margin: 0;
    text-wrap: balance;
}
.lead-premium .lp-h1 em { font-style: normal; color: var(--lp-gold); }

.lead-premium .lp-h2 {
    font-family: var(--lp-font-display);
    font-size: clamp(30px, 3.1vw, 46px);
    line-height: 1.12;
    letter-spacing: -.04em;
    font-weight: 500;
    margin: 0;
}
.lead-premium .lp-h3 { font-size: 20px; line-height: 1.3; font-weight: 500; margin: 0; }

.lead-premium .lp-eyebrow {
    font-family: var(--lp-font-label);
    font-size: 11px;
    letter-spacing: .19em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--lp-gold);
    margin: 0;
}
.lead-premium .lp-intro {
    color: var(--lp-copy);
    max-width: 430px;
    margin: 24px 0 28px;
    font-size: 17px;
    line-height: 1.65;
}
.lead-premium .lp-micro { font-size: 11px; color: var(--lp-muted); margin: 20px 0 0; }
.lead-premium .lp-provenance { font-size: 10px; color: var(--lp-muted); margin: 8px 0 0; }

/* ── Controls: one pill system, shared by hero, rail, quote band ─────────── */
.lead-premium .lp-btn,
.lead-premium .lp-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    border-radius: var(--lp-radius-pill);
    min-height: 52px;
    padding: 12px 22px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -.015em;
    line-height: 1.25;
    text-decoration: none;
    box-shadow: none;
    transition: background var(--lp-dur-control) ease, border-color var(--lp-dur-control) ease,
                transform var(--lp-dur-control) ease, box-shadow var(--lp-dur-control) ease;
}
.lead-premium .lp-btn { background: var(--lp-btn-bg); color: var(--lp-btn-ink); border: 1px solid var(--lp-btn-border); }
.lead-premium .lp-btn:hover { background: var(--lp-btn-bg-hover); box-shadow: 0 4px 18px #c9a45c15; transform: translateY(-1px); }
.lead-premium .lp-btn-ghost { background: var(--lp-ghost-bg); border: 1px solid var(--lp-ghost-border); color: var(--lp-paper); }
.lead-premium .lp-btn-ghost:hover { background: var(--lp-ghost-bg-hover); border-color: var(--lp-ghost-border-hover); }
.lead-premium .lp-btn:active,
.lead-premium .lp-btn-ghost:active { transform: scale(.98); }
.lead-premium .lp-btn > span,
.lead-premium .lp-btn-ghost > span {
    background: none;
    min-width: 18px;
    height: 18px;
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    transition: transform var(--lp-dur-control) ease;
}
.lead-premium .lp-btn:hover > span,
.lead-premium .lp-btn-ghost:hover > span { transform: translate(2px, -2px); }

.lead-premium .lp-hero .lp-btn { padding-left: 25px; padding-right: 20px; min-height: 54px; }

/* small quiet control: rail pause, ticker pause */
.lead-premium .lp-quiet-btn {
    border: 1px solid var(--lp-hair-2);
    border-radius: var(--lp-radius-pill);
    background: transparent;
    color: var(--lp-muted);
    min-width: var(--lp-tap);
    min-height: var(--lp-tap);
    padding: 8px 10px;
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.lead-premium .lp-quiet-btn:hover { border-color: #c9a45c80; color: var(--lp-paper); }

/* ── Masthead ────────────────────────────────────────────────────────────── */
.lead-premium .lp-masthead {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    padding: 18px 0;
}
.lead-premium .lp-masthead img { width: 65px; height: 58px; object-fit: contain; }
.lead-premium .lp-identity { font-size: 12px; letter-spacing: -.015em; color: #d4d0c8; }
.lead-premium .lp-country {
    margin-left: auto;
    color: var(--lp-gold);
    font-family: var(--lp-font-label);
    font-size: 10px;
    letter-spacing: .12em;
    border: 1px solid #c9a45c38;
    border-radius: var(--lp-radius-pill);
    padding: 5px 11px;
}

/* ── Animated CTA rail ───────────────────────────────────────────────────── */
.lead-premium .lp-rail {
    display: flex;
    gap: 12px;
    align-items: center;
    border: 1px solid var(--lp-hair-1);
    border-radius: 20px;
    background: #ffffff03;
    padding: 10px 14px;
    overflow: hidden;
}
.lead-premium .lp-rail-window {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, #000 95%, transparent);
    mask-image: linear-gradient(90deg, #000 95%, transparent);
}
.lead-premium .lp-rail-track {
    display: flex;
    width: max-content;
    animation: lp-action-drift var(--lp-drift) linear infinite;
}
.lead-premium .lp-rail-group { display: flex; align-items: center; gap: 12px; padding-right: 32px; }
.lead-premium .lp-rail-group .lp-btn,
.lead-premium .lp-rail-group .lp-btn-ghost {
    padding: 11px 20px;
    min-height: 46px;
    font-size: 13px;
    gap: 12px;
    white-space: nowrap;
}
.lead-premium .lp-rail-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #c9a45c60;
    font-size: 0;
    margin: 0 18px;
    flex: none;
}
.lead-premium .lp-rail:hover .lp-rail-track,
.lead-premium .lp-rail:focus-within .lp-rail-track,
.lead-premium .lp-rail.is-paused .lp-rail-track,
/* The rail sits at the top of the page, so it is scrolled away for nearly the
   whole funnel. It gets the ticker's offscreen pause for the same reason:
   compositing a translate on three duplicated button groups costs battery. */
.lead-premium .lp-rail.is-offscreen .lp-rail-track { animation-play-state: paused; }

@keyframes lp-action-drift { to { transform: translateX(-33.333333%); } }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.lead-premium .lp-hero {
    padding: 65px 0 55px;
    display: grid;
    grid-template-columns: 1fr 1.06fr;
    gap: 65px;
    align-items: center;
    position: relative;
}
.lead-premium .lp-hero .lp-eyebrow { margin-bottom: 24px; }
.lead-premium .lp-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

.lead-premium .lp-visual {
    position: relative;
    min-height: 465px;
    background: #24231f;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: none;
}
.lead-premium .lp-visual > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 900ms var(--lp-ease-out);
}
.lead-premium .lp-visual:hover > img { transform: scale(1.025); }
.lead-premium .lp-visual::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent 60%, #0009);
    pointer-events: none;
}
.lead-premium .lp-visual-caption {
    position: absolute;
    bottom: 24px;
    left: 26px;
    right: 26px;
    z-index: 1;
    margin: 0;
    font-size: 12px;
    color: #fff;
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.lead-premium .lp-checklist { list-style: none; padding: 0; margin: 24px 0 0; font-size: 13px; }
.lead-premium .lp-checklist li { padding: 11px 0; border-bottom: 1px solid var(--lp-hair-3); }
.lead-premium .lp-checklist li > span { color: var(--lp-gold); margin-right: 14px; }

/* ── Film facade (K3) ────────────────────────────────────────────────────── */
.lead-premium .lp-film { margin: 0; }
.lead-premium .lp-film-open {
    display: flex;
    gap: 18px;
    align-items: center;
    text-align: left;
    border: 0;
    background: none;
    color: inherit;
    font-size: 14px;
    padding: 0;
    min-height: var(--lp-tap);
}
.lead-premium .lp-film-play {
    display: grid;
    place-items: center;
    flex: none;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: var(--lp-paper);
    color: #17150f;
    font-size: 13px;
    line-height: 1;
}
.lead-premium .lp-film-label small { display: block; color: var(--lp-copy-2); font-size: 11px; }

/* docked in the hero photograph */
.lead-premium .lp-film--dock {
    position: absolute;
    inset: auto 24px 70px;
    z-index: 2;
    border: 1px solid #ffffff2b;
    border-radius: var(--lp-radius-md);
    background: #131311d9;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    color: #fff;
    padding: 15px 18px;
}
/* The dock's player is IN FLOW inside the tray and carries its own 16:9 box.
   It must not be absolutely positioned: an absolute box with `inset: auto 0 0`
   has an indefinite height, so the iframe's `height: 100%` resolves to `auto`
   and the browser falls back to the 150px replaced-element default — a 4:1
   letterbox with the film pillarboxed inside it. In flow with aspect-ratio the
   tray grows upward from its bottom anchor to hold a true 16:9 player. */
.lead-premium .lp-film--dock .lp-film-player {
    position: static;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--lp-radius-sm);
    overflow: hidden;
    z-index: 3;
}
.lead-premium .lp-film--dock.is-playing { padding: 12px; }

/* 16:9 block in the process strip — the placement that survives with JS off */
.lead-premium .lp-film--block { margin: 0 0 clamp(28px, 4vw, 44px); max-width: 960px; }
.lead-premium .lp-film-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--lp-radius-md);
    overflow: hidden;
    background: #111;
    border: 1px solid var(--lp-hair-gold);
}
.lead-premium .lp-film-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lead-premium .lp-film--block .lp-film-open {
    position: absolute;
    inset: auto 16px 16px;
    z-index: 2;
    width: max-content;
    max-width: calc(100% - 32px);
    border-radius: var(--lp-radius-pill);
    background: #131311d9;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid #ffffff2b;
    color: #fff;
    padding: 10px 20px 10px 10px;
    gap: 14px;
    font-weight: 600;
}
.lead-premium .lp-film-player { background: #000; }
.lead-premium .lp-film--block .lp-film-player { position: absolute; inset: 0; z-index: 3; }
.lead-premium .lp-film-player iframe { display: block; width: 100%; height: 100%; border: 0; }
.lead-premium .lp-film-close {
    position: absolute;
    right: 12px;
    top: 12px;
    z-index: 4;
    min-height: var(--lp-tap);
    min-width: var(--lp-tap);
    padding: 8px 16px;
    border-radius: var(--lp-radius-pill);
    border: 1px solid var(--lp-ghost-border-hover);
    background: #0a0a0ae6;
    color: var(--lp-paper);
    font-size: 12px;
}
.lead-premium .lp-film figcaption { padding: 14px 0 0; }
.lead-premium .lp-film-note { margin: 0; font-size: 12px; color: var(--lp-copy-2); }
/* The dock's recovery link: small, quiet, and only ever seen once the script
   has un-hidden the tray — which is exactly when a blocked frame can happen. */
.lead-premium .lp-film-note--dock { margin: 9px 0 0; font-size: 11px; text-align: right; }
.lead-premium .lp-film-note a { color: var(--lp-gold); text-underline-offset: 4px; }
.lead-premium .lp-film-transcript { border-top: 1px solid var(--lp-hair-3); margin-top: 14px; padding: 14px 0 0; }
.lead-premium .lp-film-transcript summary { cursor: pointer; font-size: 13px; min-height: var(--lp-tap); display: flex; align-items: center; }
/* `display: flex` on a <summary> replaces the UA's `display: list-item`, which
   destroys the disclosure triangle. Nothing else in the design replaces it, so
   a sighted visitor would have no signal that these rows open. Put a real
   chevron back on every premium <summary>, and suppress the native marker
   explicitly for the engines that still emit one. */
.lead-premium summary::-webkit-details-marker { display: none; }
.lead-premium summary::marker { content: ''; }
.lead-premium .lp-faq summary::after,
.lead-premium .lp-film-transcript summary::after {
    content: '';
    flex: 0 0 auto;
    margin-left: auto;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--lp-gold);
    border-bottom: 2px solid var(--lp-gold);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform var(--lp-dur-control) var(--lp-ease-out);
}
.lead-premium .lp-faq details[open] summary::after,
.lead-premium .lp-film-transcript[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.lead-premium .lp-film-transcript p { font-size: 13px; color: var(--lp-muted); max-width: 750px; margin: 10px 0 0; }
.lead-premium .lp-film-noscript { margin: 10px 0 0; font-size: 12px; color: var(--lp-copy-2); }

/* ── Ticker: converter metals ────────────────────────────────────────────── */
.lead-premium .lp-ticker {
    border-block: 1px solid var(--lp-hair-gold);
    padding: 18px 0 12px;
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 12px 28px;
    overflow: hidden;
}
.lead-premium .lp-ticker-label { display: flex; align-items: center; gap: 12px; }
.lead-premium .lp-ticker-label .lp-eyebrow { font-size: 10px; }
.lead-premium .lp-ticker-window {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.lead-premium .lp-ticker-track {
    display: flex;
    width: max-content;
    animation: lp-market-drift var(--lp-drift) linear infinite;
}
.lead-premium .lp-ticker-group { display: flex; gap: 52px; align-items: center; padding-right: 52px; min-height: var(--lp-tap); }
.lead-premium .lp-ticker-group span {
    white-space: nowrap;
    font-family: var(--lp-font-label);
    font-size: 12px;
    letter-spacing: .09em;
    font-variant-numeric: tabular-nums;
}
.lead-premium .lp-ticker-group b {
    color: var(--lp-gold);
    margin-left: 12px;
    font-size: 19px;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}
.lead-premium .lp-ticker-note { grid-column: 1 / -1; font-size: 10px; color: var(--lp-muted); margin: 0; }
.lead-premium .lp-ticker:hover .lp-ticker-track,
.lead-premium .lp-ticker:focus-within .lp-ticker-track,
.lead-premium .lp-ticker.is-paused .lp-ticker-track,
.lead-premium .lp-ticker.is-offscreen .lp-ticker-track { animation-play-state: paused; }

@keyframes lp-market-drift { to { transform: translateX(-50%); } }

/* ── Sections, process strip ─────────────────────────────────────────────── */
.lead-premium .lp-section { padding: var(--lp-space-section) 0; }
.lead-premium .lp-section-top {
    display: flex;
    justify-content: space-between;
    gap: 35px;
    align-items: flex-end;
    margin-bottom: 38px;
}
.lead-premium .lp-section-top p { max-width: 330px; color: var(--lp-muted); font-size: 14px; margin: 0; }
.lead-premium .lp-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.lead-premium .lp-step { border-top: 1px solid var(--lp-hair-4); padding-top: 18px; }
.lead-premium .lp-step .lp-h3 { margin: 10px 0; }
.lead-premium .lp-step p { font-size: 13px; color: var(--lp-muted); margin: 12px 0 0; }
.lead-premium .lp-lab-credit { font-size: 10px; color: #b6b7b0; margin: 30px 0 0; }

/* ── Photo strip: real, admin-approved converter photographs ─────────────── */
/* minmax(0, …) on every track: a bare `fr` track takes its automatic minimum
   from the item's intrinsic size, and these figures carry width/height
   attributes, so a photograph that fails to load blows the grid past the
   container and puts a horizontal scrollbar on the page at 390px. */
.lead-premium .lp-photos { display: grid; grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr)); gap: 24px; align-items: end; }
.lead-premium .lp-photos > * { min-width: 0; }
.lead-premium .lp-photos figure { margin: 0; }
.lead-premium .lp-photos img {
    width: 100%;
    height: 180px;
    object-fit: contain;
    background: #eae7df;
    border-radius: 10px;
    display: block;
}
.lead-premium .lp-photos figcaption { color: var(--lp-muted); font-size: 12px; padding: 14px 0; }
.lead-premium .lp-photos-intro .lp-h2 { font-size: 32px; margin-top: 14px; }
.lead-premium .lp-photos-intro p { font-size: 13px; color: var(--lp-muted); margin: 18px 0 0; }

/* ── Editorial grid (non-converter compositions) ─────────────────────────── */
.lead-premium .lp-editorial { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr)); gap: 18px; }
.lead-premium .lp-editorial article { position: relative; min-height: 240px; overflow: hidden; background: #23231f; border-radius: 10px; }
.lead-premium .lp-editorial img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; }
.lead-premium .lp-editorial article::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent, #000b); }
.lead-premium .lp-editorial .lp-h3 { position: absolute; bottom: 22px; left: 22px; z-index: 1; color: #fff; }

/* ── Trust band, secondary nav, resources, FAQ, footer ───────────────────── */
.lead-premium .lp-strip {
    border-top: 1px solid #ffffff29;
    border-bottom: 1px solid #ffffff29;
    display: flex;
    gap: 30px;
    justify-content: space-between;
    font-size: 12px;
    color: var(--lp-copy-2);
    list-style: none;
    margin: 0;
    /* One `padding` only: a second declaration lower in this block silently
       won and flattened the band to its hairlines (prototype: 20px 0). */
    padding: 20px 0;
}
.lead-premium .lp-strip li { display: flex; align-items: center; }
.lead-premium .lp-strip b { color: var(--lp-gold); font-weight: 400; margin-right: 10px; }
.lead-premium .lp-strip a { color: var(--lp-gold); text-decoration: none; min-height: var(--lp-tap); display: inline-flex; align-items: center; }

.lead-premium .lp-secondary-nav { display: flex; gap: 10px; flex-wrap: wrap; padding: 16px 0; border-bottom: 1px solid #ffffff20; }
.lead-premium .lp-secondary-nav a {
    padding: 9px 16px;
    border: 1px solid var(--lp-hair-2);
    border-radius: var(--lp-radius-pill);
    text-decoration: none;
    font-size: 12px;
    color: #cbc7be;
    min-height: var(--lp-tap);
    display: inline-flex;
    align-items: center;
}
.lead-premium .lp-secondary-nav a:hover { border-color: #c9a45c80; color: #fff; }

.lead-premium .lp-resources {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 60px;
    border-top: 1px solid var(--lp-hair-3);
    margin-top: 65px;
    padding-top: 65px;
}
.lead-premium .lp-resources p { color: var(--lp-muted); margin: 18px 0 0; max-width: 530px; }
.lead-premium .lp-resource-links { display: grid; align-content: center; gap: 14px; }
.lead-premium .lp-resource-links a {
    padding: 22px 18px;
    border: 1px solid #ffffff35;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    text-decoration: none;
    min-height: var(--lp-tap);
    align-items: center;
    transition: border-color var(--lp-dur-control) var(--lp-ease-out);
}
.lead-premium .lp-resource-links a:hover { border-color: var(--lp-gold); }

.lead-premium .lp-faq { margin-top: 65px; }
.lead-premium .lp-faq details { border-top: 1px solid var(--lp-ghost-border); padding: 20px 0; }
.lead-premium .lp-faq summary { cursor: pointer; font-size: 16px; min-height: var(--lp-tap); display: flex; align-items: center; }
.lead-premium .lp-faq details p { font-size: 14px; color: var(--lp-muted); max-width: 750px; margin: 15px 0 0; }

/* ── Editorial prose, fact lists, coverage (2026-09-18 SEO acceptance) ─────
   Three quiet text primitives for the copy the premium compositions had to
   carry back: long-form explanation, a named list of categories, and a
   place-name coverage list. Text-first on purpose. What these hold is what
   these pages are ranked on, so none of it sits behind a control, and the
   coverage list is plain text in hairline chips rather than the base's grid of
   coloured badges, which would fight this composition.
   `dl`, `dt` and `dd` are not in the Bootstrap-reboot neutraliser at the top of
   this file, so their margins are reset here. */
.lead-premium .lp-prose { max-width: 820px; }
.lead-premium .lp-prose .lp-h3 { margin: 34px 0 0; }
.lead-premium .lp-prose .lp-h3:first-child { margin-top: 0; }
.lead-premium .lp-prose p { margin: 12px 0 0; color: var(--lp-copy); font-size: 15px; }
.lead-premium .lp-prose strong { color: var(--lp-paper); font-weight: 600; }
.lead-premium .lp-prose a { color: var(--lp-gold); }
.lead-premium .lp-section-top p a { color: var(--lp-gold); }

.lead-premium .lp-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
    margin: 0;
    padding: 0;
}
.lead-premium .lp-facts > div { border-top: 1px solid var(--lp-hair-4); padding-top: 18px; min-width: 0; }
.lead-premium .lp-facts dt {
    font-family: var(--lp-font-label);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 14px;
    color: var(--lp-paper);
    margin: 0;
}
.lead-premium .lp-facts dd { margin: 12px 0 0; font-size: 13px; color: var(--lp-muted); }
.lead-premium .lp-facts + .lp-micro { margin-top: 28px; }

.lead-premium .lp-coverage {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.lead-premium .lp-coverage li {
    border: 1px solid var(--lp-hair-2);
    border-radius: var(--lp-radius-pill);
    padding: 9px 16px;
    font-size: 12px;
    color: #cbc7be;
}

/* quote intro band — sits directly above the inherited #leadFormSection */
.lead-premium .lp-quote-band {
    --lp-focus-ring: var(--lp-ink);
    background: var(--lp-paper);
    color: var(--lp-ink);
    border-radius: var(--lp-radius-lg);
    padding: 55px;
    margin-bottom: 8px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 65px;
    align-items: center;
}
.lead-premium .lp-quote-band .lp-eyebrow { color: #735a2b; }
.lead-premium .lp-quote-band p { margin: 20px 0 0; color: #625e55; font-size: 14px; }
.lead-premium .lp-quote-band .lp-btn { margin-top: 22px; }

.lead-premium .lp-footer {
    padding: 42px 0;
    display: flex;
    justify-content: space-between;
    gap: 30px;
    font-size: 11px;
    color: #969185;
}

/* ── Reveal (no-JS-safe: visible by default, hidden only once lp-js is set) ─ */
@media (prefers-reduced-motion: no-preference) {
    html.lp-js .lead-premium .lp-reveal:not(.is-in) { opacity: 0; transform: translateY(12px); }
    html.lp-js .lead-premium .lp-reveal {
        transition: opacity var(--lp-dur-reveal) var(--lp-ease-out) var(--lp-reveal-delay, 0ms),
                    transform 320ms var(--lp-ease-out) var(--lp-reveal-delay, 0ms);
    }
    html.lp-js .lead-premium .lp-reveal:focus-within { opacity: 1; transform: none; }
}

/* ==========================================================================
   Per-domain compositions (spec lines 70-80). Each variant changes only its
   own geometry; the tokens, controls, focus ring and motion rules are shared.
   ========================================================================== */

/* 1 — converter_us: asymmetric first screen, full-bleed photographic backdrop */
.lead-premium--converter-us .lp-hero { padding-top: 60px; padding-bottom: 38px; gap: 45px; }
.lead-premium--converter-us .lp-hero::before {
    content: '';
    position: absolute;
    inset: 0 -5vw;
    z-index: -1;
    background: linear-gradient(90deg, #0a0a0af5 10%, #0a0a0ad9 55%, #0a0a0af0),
                url('../images/converters/premium-hero-backdrop.webp') center / cover;
    opacity: .8;
}
.lead-premium--converter-us .lp-h1 { font-size: clamp(42px, 4.6vw, 66px); max-width: 630px; }
.lead-premium--converter-us .lp-intro { font-size: 18px; max-width: 440px; }
.lead-premium--converter-us .lp-hero .lp-micro { max-width: 390px; }
.lead-premium--converter-us .lp-visual { min-height: 570px; }
.lead-premium--converter-us .lp-visual > img { object-position: 50% 46%; }
/* the rail carries "Create an account", so the hero keeps ONE primary action */
.lead-premium--converter-us .lp-hero .lp-btn-ghost { display: none; }
.lead-premium--converter-us .lp-lab-band {
    position: relative;
    isolation: isolate;
    border-radius: var(--lp-radius-lg);
    padding: 52px 36px;
    margin: 12px 0 50px;
    overflow: hidden;
    background: #151612 url('../images/converters/premium-lab-backdrop.webp') center 44% / cover no-repeat;
}
.lead-premium--converter-us .lp-lab-band::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, #080a08b8, #080a0866);
}
.lead-premium--converter-us .lp-lab-band .lp-section-top p,
.lead-premium--converter-us .lp-lab-band .lp-step p { color: #e2ded5; }
.lead-premium--converter-us .lp-lab-band .lp-step { border-color: #ffffff55; }

/* 2 — converter_ca: workshop/editorial, the photograph leads on desktop */
.lead-premium--converter-ca .lp-hero { grid-template-columns: 1.05fr 1fr; }
.lead-premium--converter-ca .lp-hero-copy { padding: 18px 0; }
.lead-premium--converter-ca .lp-visual { min-height: 570px; order: -1; }
.lead-premium--converter-ca .lp-visual > img { object-position: 50% 46%; }
.lead-premium--converter-ca .lp-h1 { font-size: clamp(43px, 5vw, 72px); }

/* 3 — tier1_cars_ca: vehicle-first photographic, ivory details below the fold */
.lead-premium--vehicle-ca .lp-hero { display: block; padding: 35px 0 0; }
.lead-premium--vehicle-ca .lp-visual { min-height: 550px; }
.lead-premium--vehicle-ca .lp-visual::after {
    background: linear-gradient(90deg, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .45) 45%, rgba(0, 0, 0, .08) 100%);
}
.lead-premium--vehicle-ca .lp-hero-copy {
    position: absolute;
    z-index: 2;
    top: 80px;
    left: 45px;
    width: 48%;
    text-shadow: 0 2px 25px #000;
}
.lead-premium--vehicle-ca .lp-h1 { font-size: clamp(43px, 5.5vw, 78px); }
.lead-premium--vehicle-ca .lp-intro { color: #eee; max-width: 390px; }
.lead-premium--vehicle-ca .lp-section { --lp-focus-ring: var(--lp-ink); background: var(--lp-paper); color: var(--lp-ink); padding: 55px 35px; margin-top: 40px; border-radius: var(--lp-radius-lg); }
.lead-premium--vehicle-ca .lp-section .lp-step { border-color: #aaa; }
.lead-premium--vehicle-ca .lp-section .lp-step p,
.lead-premium--vehicle-ca .lp-section .lp-section-top p { color: #655f53; }
/* the ivory panels need ink-on-paper contrast for everything they contain */
.lead-premium--vehicle-ca .lp-section .lp-eyebrow { color: #735a2b; }
.lead-premium--vehicle-ca .lp-section details { border-top-color: rgba(10, 10, 10, .14); }
.lead-premium--vehicle-ca .lp-section details p { color: #514c43; }

/* 4 — tier2_scrapcar: the horizontal layout, one heavy gold rule */
.lead-premium--vehicle-us .lp-hero { grid-template-columns: 1.1fr .9fr; align-items: start; gap: 50px; }
.lead-premium--vehicle-us .lp-visual { min-height: 340px; margin-top: 55px; border-bottom: 7px solid var(--lp-gold); }
.lead-premium--vehicle-us .lp-h1 { font-size: clamp(42px, 5.1vw, 70px); }

/* 5 — tier_pickup_ca: service planning, the signature quarter arc */
.lead-premium--pickup-ca .lp-hero { grid-template-columns: .85fr 1.15fr; gap: 45px; }
.lead-premium--pickup-ca .lp-visual { min-height: 510px; border-radius: 130px 0 0 0; }
.lead-premium--pickup-ca .lp-h1 { font-size: clamp(43px, 5vw, 71px); }

/* 6 — tier3_scrap: material-led editorial, the one composition with no hero photo */
.lead-premium--material-us .lp-hero { display: block; max-width: 900px; padding-bottom: 40px; }
.lead-premium--material-us .lp-hero .lp-visual { display: none; }
.lead-premium--material-us .lp-h1 { max-width: 850px; }
.lead-premium--material-us .lp-intro { max-width: 560px; }
.lead-premium--material-us .lp-editorial { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); }
.lead-premium--material-us .lp-editorial article { min-height: 300px; }

/* ── Breakpoints: 850 reflow, 600 control compaction, 430 phone type ─────── */
@media (max-width: 850px) {
    .lead-premium .lp-masthead { padding: 14px 0; }
    .lead-premium .lp-masthead img { width: 52px; height: 46px; }
    .lead-premium .lp-country { font-size: 10px; }
    .lead-premium .lp-rail { gap: 5px; }
    .lead-premium .lp-rail-group { gap: 14px; padding-right: 14px; }
    .lead-premium .lp-rail-group .lp-btn,
    .lead-premium .lp-rail-group .lp-btn-ghost { font-size: 12px; padding: 10px 15px; }
    .lead-premium .lp-rail-dot { margin: 0 10px; }
    .lead-premium .lp-hero { grid-template-columns: 1fr; gap: 32px; padding: 40px 0; }
    .lead-premium .lp-visual { min-height: 350px; border-radius: 12px; }
    .lead-premium .lp-section { padding: 50px 0; }
    .lead-premium .lp-section-top { display: block; }
    .lead-premium .lp-section-top p { margin-top: 20px; }
    .lead-premium .lp-steps { grid-template-columns: 1fr 1fr; row-gap: 30px; }
    .lead-premium .lp-ticker { grid-template-columns: 1fr; gap: 2px; }
    .lead-premium .lp-ticker-label { justify-content: space-between; }
    .lead-premium .lp-ticker-group { gap: 32px; padding-right: 32px; }
    .lead-premium .lp-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lead-premium .lp-photos-intro { grid-column: 1 / -1; }
    .lead-premium .lp-photos figure:last-child { grid-column: 1 / -1; max-width: 50%; justify-self: center; }
    .lead-premium .lp-editorial { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lead-premium .lp-editorial article:first-child { grid-column: 1 / -1; }
    .lead-premium .lp-editorial article { min-height: 210px; }
    .lead-premium .lp-strip { flex-wrap: wrap; gap: 12px; }
    .lead-premium .lp-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
    .lead-premium .lp-prose p { font-size: 14px; }
    .lead-premium .lp-resources { grid-template-columns: 1fr; gap: 25px; padding-top: 40px; margin-top: 40px; }
    .lead-premium .lp-quote-band { grid-template-columns: 1fr; padding: 30px; gap: 25px; }
    .lead-premium .lp-footer { flex-direction: column; gap: 8px; }

    .lead-premium--converter-us .lp-hero { padding-top: 35px; gap: 30px; }
    .lead-premium--converter-us .lp-visual,
    .lead-premium--converter-ca .lp-visual { min-height: 440px; }
    .lead-premium--converter-us .lp-lab-band { padding: 32px 22px; background-position: 38% center; }
    .lead-premium--converter-ca .lp-visual { order: 0; }
    .lead-premium--vehicle-ca .lp-visual { min-height: 620px; }
    .lead-premium--vehicle-ca .lp-visual::after { background: linear-gradient(90deg, #000d, #0005); }
    .lead-premium--vehicle-ca .lp-hero-copy { left: 25px; top: 65px; width: 80%; }
    .lead-premium--vehicle-us .lp-visual { margin-top: 0; }
    .lead-premium--material-us .lp-editorial { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lead-premium--material-us .lp-editorial article { min-height: 210px; }
}

@media (max-width: 600px) {
    .lead-premium .lp-rail { border-radius: 16px; padding: 8px; }
    .lead-premium .lp-rail-group { padding-right: 18px; }
    .lead-premium .lp-rail-group .lp-btn,
    .lead-premium .lp-rail-group .lp-btn-ghost { padding: 10px 16px; font-size: 12px; }
    .lead-premium .lp-rail-dot { margin: 0 8px; }
    .lead-premium .lp-hero .lp-btn { max-width: 100%; font-size: 13px; }
    .lead-premium .lp-visual { border-radius: 18px; }
    .lead-premium .lp-quote-band { padding: 28px 22px; }
    .lead-premium .lp-film--dock { inset: auto 16px 68px; padding: 14px; }
    /* The tray is bottom-anchored inside `.lp-visual`, which clips. At rest it
       sits above the caption, as the prototype has it; once a 16:9 player is
       in it the margin gets thin, so playing drops it to the frame edge. */
    .lead-premium .lp-film--dock.is-playing { inset: auto 12px 12px; padding: 8px; }
    .lead-premium--converter-us .lp-lab-band .lp-steps { grid-template-columns: 1fr; gap: 25px; }

    /* tier1_cars_ca overlays its hero copy on the photograph. At phone widths
       the copy is taller than any photograph we would show, so the overlay is
       dropped entirely and the copy returns to flow ABOVE the image. Fighting
       this with a taller `min-height` does not work: the generic
       `.lead-premium .lp-visual` rule in the 430px block has equal specificity
       and lands later, so it silently wins and the text spills off the photo. */
    .lead-premium--vehicle-ca .lp-hero-copy {
        position: static;
        width: auto;
        top: auto;
        left: auto;
        padding-top: 26px;
        text-shadow: none;
    }
    .lead-premium--vehicle-ca .lp-intro { color: var(--lp-copy); max-width: none; }
    .lead-premium--vehicle-ca .lp-visual { min-height: 320px; margin-top: 26px; }
    .lead-premium--vehicle-ca .lp-visual::after { background: linear-gradient(transparent 45%, #000000a6); }
}

@media (max-width: 430px) {
    .lead-premium .lp-h1 { font-size: 45px; }
    .lead-premium .lp-facts { grid-template-columns: 1fr; gap: 20px; }
    .lead-premium .lp-coverage { gap: 8px; }
    .lead-premium .lp-coverage li { padding: 8px 13px; }
    .lead-premium .lp-steps { gap: 20px; }
    .lead-premium .lp-visual { min-height: 320px; }
    .lead-premium .lp-visual-caption { font-size: 10px; }
    .lead-premium .lp-photos { gap: 16px; }
    .lead-premium .lp-photos img { height: 150px; }
    .lead-premium .lp-quote-band { padding: 24px; }
    .lead-premium--vehicle-ca .lp-section { padding: 35px 20px; }
}

/* ==========================================================================
   REDUCED MOTION — the ticker and the CTA rail stop, the rail collapses to a
   plain two-button row, nothing translates and nothing is hidden behind a
   reveal. Reproduces all three of the prototype's reduced-motion blocks.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .lead-premium .lp-reveal { opacity: 1; transform: none; transition: none; }

    .lead-premium .lp-ticker-track { animation: none; }
    .lead-premium .lp-ticker-window { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }

    .lead-premium .lp-rail-track { animation: none; width: 100%; }
    .lead-premium .lp-rail-group { width: 100%; flex-wrap: wrap; padding: 0; gap: 10px; }
    .lead-premium .lp-rail-group[aria-hidden="true"],
    .lead-premium .lp-rail-dot { display: none; }
    .lead-premium .lp-rail-window { -webkit-mask-image: none; mask-image: none; }
    .lead-premium .lp-rail-group .lp-btn,
    .lead-premium .lp-rail-group .lp-btn-ghost { flex: 1; justify-content: center; }

    .lead-premium .lp-btn,
    .lead-premium .lp-btn-ghost,
    .lead-premium .lp-btn > span,
    .lead-premium .lp-btn-ghost > span,
    .lead-premium .lp-resource-links a,
    .lead-premium .lp-visual > img { transition: none; transform: none !important; }
    .lead-premium .lp-btn:hover { transform: none; }
}