/* ============================================================================
   sc-product-landing.css — the homepage's broadcast DNA for the product pages
   ============================================================================
   Oct 10 2026 (lane L4b; Carlos on #1796: "we need to up the ante on design";
   then the bar: "People should look at these sites and say 'these guys spent
   $250,000–$1M on a custom UI/UX studio'"). /referee, /platform and /hub are
   built on this one file so they read as the same site as the homepage: the
   dark canvas (index.html :root --bg-dark), the volt slash (css/home-launch.css
   .hl-volt-fill), scroll ACTS, the score-bug act bar (index.html .quarter-bar)
   and the yard-line rails (css/sc-yardline-rail.css). Header:
   css/sc-site-header.css.

   Laws (scripts/test-landing-referee-platform.js enforces the mechanical ones):
   - hex/rgba ONLY inside the :root custom properties below.
   - Saira Condensed display, Rajdhani UI. Orbitron on `.num` ONLY (numerals).
   - NO AI TELLS: no full-radius shape anywhere (pills, pill kickers, pill
     rows); no 1–3px gradient fading to transparent (dividers, drip lines,
     accents); no backdrop-filter; no gradient text; no blurred glow blobs;
     no glow shadow except the one primary button; no icon-card grids; no
     01/02/03 rows; one volt moment per act; acts are asymmetric, not centred.
   - structure is a SOLID token hairline, the volt bar, spacing, or nothing.
   - every control >= 44px; nothing wider than the viewport at 390.
   - prefers-reduced-motion: nothing moves, everything is visible.
   ============================================================================ */

:root {
    --pl-bg: #0a0d14;
    --pl-bg-card: #12161f;
    --pl-bg-elev: #1e2433;
    --pl-text: #ffffff;
    --pl-text-2: #9ca3af;
    --pl-text-3: #6b7280;
    --pl-line: rgba(255, 255, 255, 0.08);
    --pl-line-strong: rgba(255, 255, 255, 0.18);
    --pl-hover: rgba(255, 255, 255, 0.04);
    --pl-red: #ef4444;
    --pl-ink: #000;
    --pl-bg-deep: #000;
    --pl-shadow: rgba(0, 0, 0, 0.55);
    --pl-shadow-deep: rgba(0, 0, 0, 0.8);
    --pl-scrim: rgba(10, 13, 20, 0.94);
    --pl-scrim-mid: rgba(10, 13, 20, 0.62);
    --pl-clear: rgba(10, 13, 20, 0);
    --pl-black-clear: rgba(0, 0, 0, 0);
    --pl-font-display: 'Saira Condensed', 'Rajdhani', system-ui, sans-serif;
    --pl-font-body: 'Rajdhani', system-ui, sans-serif;
    --pl-font-num: 'Orbitron', 'Saira Condensed', system-ui, sans-serif;
    /* side gutter: clears the yard-line rails on desktop (the homepage's
       .stack-block.parallax clamp), 20px on a phone */
    --pl-gutter: clamp(80px, 8vw, 160px);
}
/* THE ACCENT follows the subject (css/sc-accent.css): the page sets it on
   <body data-accent>, a section may set its own. Derived here, on every
   element that sets it, so a section's override reaches its children. */
:root, [data-accent] {
    --pl-accent: rgb(var(--sc-page-accent-rgb));
    --pl-accent-deep: rgb(var(--sc-page-accent-deep-rgb));
    --pl-accent-ink: var(--sc-page-accent-ink);
    --pl-accent-glow: rgba(var(--sc-page-accent-rgb), 0.28);
    --pl-accent-tint: rgba(var(--sc-page-accent-rgb), 0.12);
}
/* THE LIGHT CANVAS (the Team Hub): black type on light surfaces. */
[data-canvas="light"] {
    --pl-bg: #ffffff;
    --pl-bg-card: #f4f5f7;
    --pl-bg-elev: #ffffff;
    --pl-bg-deep: #eceef2;
    --pl-text: #0a0d14;
    --pl-text-2: #3f4652;
    --pl-text-3: #5b6370;
    --pl-line: rgba(10, 13, 20, 0.1);
    --pl-line-strong: rgba(10, 13, 20, 0.2);
    --pl-hover: rgba(10, 13, 20, 0.04);
    --pl-shadow: rgba(10, 13, 20, 0.12);
    --pl-shadow-deep: rgba(10, 13, 20, 0.22);
    --pl-scrim: rgba(255, 255, 255, 0.94);
    --pl-scrim-mid: rgba(255, 255, 255, 0.62);
    --pl-clear: rgba(255, 255, 255, 0);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; overflow-x: clip; }
body {
    background: var(--pl-bg);
    color: var(--pl-text);
    font-family: var(--pl-font-body);
    font-size: 17px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
/* Every section and its heading land BELOW the fixed header + act bar
   (header 62-76px, act bar to 116px): a jump never parks a heading under them. */
:root { --pl-chrome-clear: 136px; }
main > section[id], main h2[id] { scroll-margin-top: var(--pl-chrome-clear); }

/* ─── Type: huge Saira against small, precise Rajdhani ─────────────────── */
.lp-eyebrow {
    display: flex; align-items: center; gap: 12px;
    font-family: var(--pl-font-body);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--pl-text-2);
    margin: 0 0 22px;
    /* a label never wraps: keep eyebrow copy short enough for a 360 phone
       (scripts/test-intentional-line-breaks.js) */
    white-space: nowrap;
}
.lp-eyebrow::before { content: ''; flex: 0 0 28px; height: 3px; background: var(--pl-accent); }
.lp-h1, .lp-h2, .lp-h3 {
    font-family: var(--pl-font-display);
    font-weight: 800;
    text-transform: uppercase;
    margin: 0;
    color: var(--pl-text);
}
.lp-h1 { font-size: clamp(50px, 7.4vw, 120px); line-height: 0.9; letter-spacing: -0.02em; text-wrap: balance; }
.lp-h2 { font-size: clamp(42px, 6vw, 96px); line-height: 0.9; letter-spacing: -0.015em; text-wrap: balance; }
.lp-h3 { font-size: clamp(24px, 2.2vw, 32px); line-height: 1; letter-spacing: 0.01em; text-wrap: balance; }
/* INTENTIONAL LINE BREAKS (lane TY1, Oct 10 2026 — "it has to be
   intentional"). A heading breaks where it was designed to: each designed
   phrase is an .lp-keep (it never breaks inside), text-wrap: balance is the
   fallback, and the heading's data-lines says how many lines it is designed
   to run at >= 1024. scripts/test-intentional-line-breaks.js measures every
   heading, lede, label and button at 1440/1280/1024/768/390/360 and fails on a
   one-word last line or a heading past its data-lines. */
.lp-keep { white-space: nowrap; }
.lp-mega { font-size: clamp(60px, 11vw, 190px); line-height: 0.84; letter-spacing: -0.03em; }
/* THE VOLT SLASH — the homepage's .hl-volt-fill: a FILL with dark ink, leaned
   like a broadcast chyron. ONE per act. It wipes in once it is on screen. */
.lp-slash {
    display: inline-block;
    background: var(--pl-accent);
    color: var(--pl-accent-ink);
    padding: 0 0.14em;
    transform: skewX(-6deg);
    /* ONE clean slash per phrase: it never wraps (Carlos, Oct 10: a wrapped
       fill stair-stepped across the words). Keep slash phrases short enough
       to fit a 390 column; scripts/test-landing-dna-browser.js fails on any
       slash that leaves its column or the viewport. */
    white-space: nowrap;
}
.lp-armed .lp-reveal .lp-slash { clip-path: inset(0 100% 0 0); transition: clip-path 0.7s 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.lp-armed .lp-reveal.is-in .lp-slash { clip-path: inset(0 0 0 0); }
.lp-hero .lp-slash { animation: lp-slash-in 0.8s 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes lp-slash-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.lp-lede {
    font-weight: 500;
    font-size: clamp(17px, 1.5vw, 20px);
    line-height: 1.5;
    color: var(--pl-text-2);
    /* 28em = 560px at the 20px desktop size, and a 45–75 character line at
       every size below it (a fixed 560px ran to 82 characters at 17px) */
    max-width: 28em;
    margin: 26px 0 0;
    text-wrap: pretty;
}
.lp-lede strong { color: var(--pl-text); font-weight: 700; }
.lp-lede a, .lp-rows a:not(.lp-row-go), .lp-drive a { color: var(--pl-text); text-decoration-color: var(--pl-accent); text-underline-offset: 3px; text-decoration-thickness: 2px; }

/* ─── Buttons: 8px, the primary is the one glow on the page ─────────────── */
.lp-cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.lp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 54px;
    padding: 0 30px;
    font-family: var(--pl-font-display);
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 8px;
    transition: transform 0.15s, background 0.2s, border-color 0.2s;
}
.lp-btn--volt {
    background: var(--pl-accent);
    color: var(--pl-accent-ink);
    box-shadow: 0 12px 30px var(--pl-accent-glow);
}
.lp-btn--volt:hover { transform: translateY(-2px); }
.lp-btn--line { color: var(--pl-text); border: 1px solid var(--pl-line-strong); background: transparent; }
.lp-btn--line:hover { border-color: var(--pl-text); }
.lp-btn:focus-visible, .lp-q:focus-visible, .lp-foot a:focus-visible, .lp-row-go:focus-visible { outline: 2px solid var(--pl-accent); outline-offset: 3px; }

/* ─── Chyron: a broadcast lower-third (volt plate + ink bar) ───────────── */
.lp-chyron {
    display: inline-flex; align-items: stretch; max-width: 100%;
    margin: 0;
    font-family: var(--pl-font-display); font-weight: 800; text-transform: uppercase;
}
.lp-chyron b {
    display: flex; align-items: center; padding: 10px 16px;
    background: var(--pl-accent); color: var(--pl-accent-ink);
    font-size: 13px; letter-spacing: 0.2em; font-weight: 800;
}
.lp-chyron span {
    display: flex; align-items: center; padding: 10px 18px;
    background: var(--pl-bg-card); color: var(--pl-text);
    border: 1px solid var(--pl-line-strong); border-left: 0;
    font-size: 14px; letter-spacing: 0.12em;
}

/* ─── Hero frame (each page composes its own stage inside) ─────────────── */
.lp-hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding: 130px var(--pl-gutter) 96px;
    overflow: hidden;
    isolation: isolate;
}
.lp-hero-copy { position: relative; z-index: 2; max-width: 660px; }
.lp-hero-copy > * { animation: lp-up 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; }
.lp-hero-copy > :nth-child(2) { animation-delay: 0.1s; }
.lp-hero-copy > :nth-child(3) { animation-delay: 0.2s; }
.lp-hero-copy > :nth-child(4) { animation-delay: 0.3s; }
.lp-hero-copy > :nth-child(5) { animation-delay: 0.4s; }
@keyframes lp-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* Facts — the score-bug grammar: ONE joined bar, solid hairlines.
   ONE row of EQUAL cells that fill the bar (Carlos, Oct 10: a flex-wrap bar
   put the third fact on a second row under an empty area — "all that
   negative space"). One column per fact, whatever the count, so a cell is
   never empty; dividers only BETWEEN cells; a long fact sets on two balanced
   lines inside its cell. <= 768: one fact per row, horizontal dividers.
   scripts/test-intentional-line-breaks.js holds the bar to this. */
.lp-facts {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    margin: 36px 0 0; padding: 0; list-style: none;
    border: 1px solid var(--pl-line-strong);
    border-radius: 4px;
    background: var(--pl-bg);
}
.lp-facts li {
    display: flex; align-items: center;
    padding: 12px 18px;
    font-family: var(--pl-font-display); font-weight: 800; font-size: 13px;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--pl-text);
    text-wrap: balance;
}
.lp-facts li + li { border-left: 1px solid var(--pl-line-strong); }
.lp-facts li b { color: var(--pl-accent); font-weight: 800; }

/* ─── Acts ─────────────────────────────────────────────────────────────── */
.lp-act {
    position: relative;
    padding: 160px var(--pl-gutter);
    overflow: hidden;
    isolation: isolate;
}
.lp-act + .lp-act { border-top: 1px solid var(--pl-line); }
.lp-act--ink { background: var(--pl-bg-card); }
.lp-act--black { background: var(--pl-bg-deep); }
.lp-inner { max-width: 1280px; margin: 0 auto; position: relative; }
.lp-head { max-width: 900px; margin: 0 0 64px; }
/* Asymmetric two-column: a narrow, sticky title column + a wide body */
.lp-aside {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 80px;
    align-items: start;
}
.lp-aside > :first-child { position: sticky; top: 140px; }

/* Scroll reveal: only when the script has armed it (no JS = all visible) */
.lp-armed .lp-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.lp-armed .lp-reveal.is-in { opacity: 1; transform: none; }
.lp-armed .lp-reveal[data-delay="1"] { transition-delay: 0.12s; }
.lp-armed .lp-reveal[data-delay="2"] { transition-delay: 0.24s; }

/* ─── Scroll-linked product shots (motion that means something) ─────────
   --lp-p runs 0 → 1 as the shot crosses the viewport (js/sc-product-
   landing.js). A shot that starts tilted lands flat exactly as it reaches
   the middle of the screen; nothing else on the page moves on its own. */
.lp-scrub { --lp-p: 1; }
.lp-armed .lp-scrub--flatten { transform: perspective(1600px) rotateX(calc((1 - var(--lp-p)) * 14deg)) scale(calc(0.92 + var(--lp-p) * 0.08)); transform-origin: 50% 100%; }
.lp-armed .lp-scrub--slide { transform: translateX(calc((1 - var(--lp-p)) * 12%)); }
.lp-armed .lp-scrub--rise { transform: translateY(calc((1 - var(--lp-p)) * 80px)); }

/* Screens get a device-grade frame: solid bezel, deep shadow, no glow */
.lp-frame {
    border-radius: 12px;
    border: 1px solid var(--pl-line-strong);
    background: var(--pl-bg-elev);
    padding: 6px;
    box-shadow: 0 50px 120px var(--pl-shadow-deep);
}
.lp-frame img { border-radius: 7px; width: 100%; height: auto; }
.lp-cap { margin: 18px 0 0; font-size: 14px; color: var(--pl-text-3); }
.lp-cap b { color: var(--pl-text-2); font-weight: 700; }
/* A full-bleed cinematic strip that breaks the grid */
.lp-bleed { margin-left: calc(var(--pl-gutter) * -1); margin-right: calc(var(--pl-gutter) * -1); }
.lp-bleed img { width: 100%; height: auto; }

/* ─── Editorial rows (instead of a card grid) ──────────────────────────── */
.lp-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--pl-line-strong); }
.lp-rows > li {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) auto;
    gap: 40px;
    align-items: baseline;
    padding: 38px 0;
    border-bottom: 1px solid var(--pl-line-strong);
}
.lp-row-k { font-family: var(--pl-font-display); font-weight: 800; font-size: clamp(30px, 2.4vw, 38px); line-height: 0.95; text-transform: uppercase; letter-spacing: -0.01em; text-wrap: balance; }
.lp-row-k small { display: block; white-space: nowrap; margin-top: 10px; font-family: var(--pl-font-body); font-size: 12px; font-weight: 700; letter-spacing: 3px; color: var(--pl-accent); }
.lp-rows p { margin: 0; color: var(--pl-text-2); font-size: 18px; }
.lp-row-go {
    display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap;
    font-family: var(--pl-font-display); font-weight: 800; font-size: 14px;
    letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; color: var(--pl-text);
    border-bottom: 2px solid var(--pl-accent);
}

/* ─── Pinned feature run: the shot holds, the features scroll past it ──── */
.lp-run { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 96px; align-items: start; }
.lp-run-media { position: sticky; top: 120px; }
.lp-run-list { list-style: none; margin: 0; padding: 0; }
.lp-run-list li { padding: 34px 0 34px 28px; border-left: 2px solid var(--pl-line-strong); transition: border-color 0.3s, opacity 0.3s; }
.lp-run-list b { display: block; font-family: var(--pl-font-display); font-weight: 800; font-size: clamp(26px, 2.6vw, 40px); line-height: 1; text-transform: uppercase; text-wrap: balance; }
.lp-run-list p { margin: 12px 0 0; color: var(--pl-text-2); font-size: 18px; max-width: 520px; }
.lp-armed .lp-run-list li { opacity: 0.38; }
.lp-armed .lp-run-list li.is-on { opacity: 1; border-left-color: var(--pl-accent); }

/* ─── Index: a two-column table of contents, no numbers, no icons ──────── */
.lp-index { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; border-top: 1px solid var(--pl-line-strong); }
.lp-index li { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--pl-line); align-items: baseline; }
.lp-index b { font-family: var(--pl-font-display); font-weight: 800; font-size: 20px; letter-spacing: 0.04em; text-transform: uppercase; }
.lp-index span { color: var(--pl-text-2); }

/* ─── The drive: how to start, told as downs ───────────────────────────── */
.lp-drive { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lp-drive li { padding: 0 36px 0 0; }
.lp-drive li + li { padding-left: 36px; border-left: 1px solid var(--pl-line-strong); }
.lp-down {
    display: block; padding-bottom: 18px; margin-bottom: 22px;
    border-bottom: 3px solid var(--pl-line-strong);
    font-family: var(--pl-font-display); font-weight: 800; font-size: 15px;
    letter-spacing: 0.24em; text-transform: uppercase; color: var(--pl-text-3);
}
.lp-drive li:first-child .lp-down { border-bottom-color: var(--pl-accent); color: var(--pl-text); }
.lp-drive .lp-h3 { margin-bottom: 12px; }
.lp-drive p { margin: 0; color: var(--pl-text-2); }

/* ─── The close: one statement, the CTA pair, left-aligned ─────────────── */
.lp-close { padding-top: 180px; padding-bottom: 180px; }
.lp-close .lp-h2 { max-width: 1100px; }

/* ─── The act bar — the homepage's Q1–Q4 score bug, for acts not tiers ── */
.lp-quarters {
    position: fixed;
    top: 70px; left: 50%;
    transform: translateX(-50%);
    z-index: 65;
    display: flex; align-items: stretch;
    width: min(760px, calc(100vw - 48px));
    background: var(--pl-bg-card);
    border: 1px solid var(--pl-line-strong);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 16px 40px var(--pl-shadow);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}
.lp-quarters.ready { opacity: 1; pointer-events: auto; }
.lp-quarters.at-footer { opacity: 0; pointer-events: none; }
.lp-q {
    flex: 1 1 0; min-width: 0;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 44px; padding: 0 10px;
    text-decoration: none;
    border-right: 1px solid var(--pl-line);
    color: var(--pl-text-3);
    transition: background 0.3s, color 0.3s;
}
.lp-q:last-child { border-right: 0; }
.lp-q:hover { background: var(--pl-hover); color: var(--pl-text); }
.lp-q-n { font-family: var(--pl-font-display); font-weight: 800; font-size: 11px; letter-spacing: 0.28em; }
.lp-q-name { font-family: var(--pl-font-display); font-weight: 800; font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pl-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-q.passed .lp-q-n, .lp-q.passed .lp-q-name { color: var(--pl-accent-deep); }
.lp-q.active { background: var(--pl-accent-tint); box-shadow: inset 0 -2px 0 var(--pl-accent); }
.lp-q.active .lp-q-n, .lp-q.active .lp-q-name { color: var(--pl-accent); }

/* ─── Footer ───────────────────────────────────────────────────────────── */
.lp-foot { border-top: 1px solid var(--pl-line); padding: 56px var(--pl-gutter) 40px; background: var(--pl-bg); }
.lp-foot-row { max-width: 1280px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.lp-foot img { height: 28px; width: auto; }
.lp-foot nav { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.lp-foot nav a {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px;
    font-family: var(--pl-font-display); font-weight: 700; font-size: 13px;
    letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
    color: var(--pl-text-2);
}
.lp-foot nav a:hover { color: var(--pl-text); }
.lp-foot small { display: block; max-width: 1280px; margin: 18px auto 0; color: var(--pl-text-3); font-size: 13px; }

/* ─── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .lp-aside, .lp-run { grid-template-columns: minmax(0, 1fr); gap: 48px; }
    .lp-aside > :first-child, .lp-run-media { position: static; }
    .lp-run-media { max-width: 420px; }
    /* Stacked: the words lead, the media follows — a jump to the act lands
       on its heading, not on a picture with the heading below the fold. */
    .lp-run > .lp-run-media { order: 2; }
    .lp-armed .lp-run-list li { opacity: 1; }
    .lp-index { grid-template-columns: minmax(0, 1fr); }
    .lp-rows > li { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}
@media (max-width: 880px) {
    :root { --pl-gutter: 20px; }
    .lp-hero { padding-top: 110px; padding-bottom: 72px; }
    .lp-act { padding-top: 104px; padding-bottom: 104px; }
    .lp-close { padding-top: 120px; padding-bottom: 120px; }
    .lp-drive { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .lp-drive li, .lp-drive li + li { padding: 0; border-left: 0; }
}
@media (max-width: 768px) {
    .lp-facts { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr); }
    .lp-facts li + li { border-left: 0; border-top: 1px solid var(--pl-line-strong); }
}
@media (max-width: 720px) {
    .lp-quarters { top: 72px; width: calc(100vw - 24px); }
    .lp-q { gap: 6px; padding: 0 4px; }
    .lp-q-n { font-size: 10px; letter-spacing: 0.16em; }
    .lp-q-name { font-size: 12px; letter-spacing: 0.08em; }
    .lp-cta-row { flex-direction: column; align-items: stretch; }
    .lp-index li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .lp-chyron { flex-direction: column; }
    .lp-chyron span { border-left: 1px solid var(--pl-line-strong); border-top: 0; }
    .lp-foot-row { flex-direction: column; align-items: flex-start; }
}

/* ─── Reduced motion: nothing moves, everything is there ───────────────── */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .lp-hero .lp-slash, .lp-hero-copy > * { animation: none; }
    .lp-armed .lp-reveal, .lp-armed .lp-scrub--flatten, .lp-armed .lp-scrub--slide, .lp-armed .lp-scrub--rise { opacity: 1; transform: none; transition: none; }
    .lp-armed .lp-reveal .lp-slash { clip-path: none; transition: none; }
    .lp-armed .lp-run-list li { opacity: 1; transition: none; }
    .lp-quarters, .lp-q, .lp-btn { transition: none; }
    .lp-btn--volt:hover { transform: none; }
}