/* =============================================================================
   FPLyzer — public landing page
   =============================================================================
   Replaces the ~2280-line inline <style> that landing.html carried since
   launch (roughly 900 lines of which styled markup copied from dashboard.html
   that the page never rendered).

   DIRECTION — "matchday broadcast". The page is a floodlit stadium at night:
   the purple gradient is the sky, a green light-pool sits under the pitch, and
   the section edges are cut on the diagonal like broadcast lower-thirds. Gold
   is reserved for the one AI moment, matching .wc-ai-review-btn in
   squad-pitch.css — the app already means "AI" when it goes gold.

   The palette and the typeface are unchanged: #38003C / #E90052 / #00FF87 /
   Montserrat, exactly as everywhere else. What changed is structure, hierarchy
   and motion — the builder is the hero now, not a form.

   Depends on tokens.css (loaded before this). Composes with:
     squad-pitch.css    the pitch, cards, stats strip, AI review card
     manual-builder.css .mb-layout, the search panel, the summary bar

   BREAKPOINTS: the house LAYOUT contract — 1024 / 768 / 480 / 360
   (manual-builder.css:13-27). The pitch keeps its own 768/540/400 set.

   RTL: per manual-builder.css:29-31, [dir="rtl"] overrides live next to the
   rule they correct rather than in rtl.css. Note the page body does NOT inherit
   the header's forced direction:ltr. No arrow glyphs anywhere — rtl.css has no
   flip rule for them.
   ============================================================================= */

* { margin: 0; padding: 0; box-sizing: border-box; }

html { overflow-x: hidden; }

/* overflow-x must live on html only, not body too: setting it on both makes
   the UA promote each one's overflow-y to `auto` independently (CSS Overflow
   §3), so html and body become two separate scroll containers. The manual
   builder's phone sticky strip (manual-builder.css's .mb-sticky-strip) picks
   body as its nearest scrolling ancestor and sticks to *that* container's
   scroll offset, which never moves — the page actually scrolls via html —
   so the strip just rides along in normal flow instead of pinning to the
   viewport top. */
body {
    font-family: 'Montserrat', sans-serif;
    background: linear-gradient(135deg, var(--c-purple) 0%, var(--c-purple-deep) 50%, var(--c-purple) 100%);
    background-attachment: fixed;
    color: var(--c-text);
    min-height: 100vh;
    width: 100%;
    max-width: 100vw;
}

/* rtl.css sets the Arabic stack on [dir="rtl"], which matches <html> — and a
   `body { font-family }` rule beats that inherited value, so Arabic rendered in
   Montserrat's fallback instead of Noto Sans Arabic. Restated here per the
   colocation convention (manual-builder.css:29-31) rather than by weakening the
   rule above. The same shadowing exists in the other page templates' inline
   styles; fixing those is a separate sweep. */
[dir="rtl"] body {
    font-family: 'Noto Sans Arabic', 'Montserrat', sans-serif;
}

/* The ambient particle layer every page in the app shares. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
        radial-gradient(circle at 20% 80%, rgba(233, 0, 82, 0.10) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(0, 255, 135, 0.10) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(233, 0, 82, 0.05) 0%, transparent 50%);
    z-index: -2;
    animation: lpFloat 20s ease-in-out infinite;
    pointer-events: none;
}

@keyframes lpFloat {
    0%, 100% { transform: translateY(0)     rotate(0deg); }
    33%      { transform: translateY(-20px) rotate(1deg); }
    66%      { transform: translateY(-10px) rotate(-1deg); }
}

.lp-shell {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
}

/* =============================================================================
   1. HERO — deliberately short
   The pitch has to be reachable at the desktop fold, so this band gives up the
   4rem type wall the old hero had and earns its presence back with density.
   ============================================================================= */
/* Vertical budget: at a 720px-tall laptop viewport, 80px of fixed header plus
   this band plus the stats strip and summary bar all sit above the pitch. Every
   value here was measured against that fold — keep the total under ~300px or
   the pitch stops being the hero. */
.lp-hero {
    position: relative;
    padding: clamp(20px, 3vw, 28px) 0 clamp(16px, 2vw, 20px);
    text-align: center;
}

.lp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 16px 6px 10px;
    margin-bottom: var(--space-3);
    background: rgba(0, 255, 135, 0.08);
    border: 1px solid var(--border-green);
    border-radius: var(--radius-pill);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-green);
}

/* Live dot — this page's data really is this gameweek's. */
.lp-eyebrow::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--c-green);
    box-shadow: 0 0 0 0 rgba(0, 255, 135, 0.6);
    animation: lpPing 2.4s var(--ease-out) infinite;
}

@keyframes lpPing {
    0%       { box-shadow: 0 0 0 0   rgba(0, 255, 135, 0.55); }
    70%,100% { box-shadow: 0 0 0 9px rgba(0, 255, 135, 0);    }
}

.lp-title {
    font-size: clamp(2rem, 6.4vw, 3.6rem);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.025em;
    background: linear-gradient(120deg, var(--c-pink) 0%, var(--c-text) 45%, var(--c-green) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: var(--space-3);
}

.lp-subtitle {
    max-width: 62ch;
    margin: 0 auto;
    font-size: clamp(0.95rem, 2.2vw, 1.12rem);
    font-weight: 400;
    line-height: 1.65;
    color: var(--c-muted);
}

.lp-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.lp-chip {
    padding: 7px 15px;
    background: var(--surface-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--c-muted);
    transition: border-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
}

.lp-chip:hover {
    border-color: var(--border-green);
    color: var(--c-text);
    transform: translateY(-2px);
}

/* =============================================================================
   2. BUILDER — the product, and the reason the page exists
   ============================================================================= */
.lp-builder {
    position: relative;
    padding: clamp(16px, 2.5vw, 24px) 0 clamp(32px, 5vw, 64px);
}

/* Floodlight. A single soft pool of green under the pitch — the page's one
   piece of real atmosphere, and cheap: no image, no extra element.

   The width used to be min(1100px, 130vw), which at 375px painted a 487px
   ellipse centred on the section: 56px of absolutely-positioned overflow on
   each side. `html { overflow-x: hidden }` above hides it but still counts it
   as scrollable overflow, so the document became 431px wide. In LTR that only
   parked dead space off the right edge; in RTL the document is laid out from
   the *right* edge of that 431px box, which pushed every element 56px past the
   screen and forced the reader to scroll horizontally to read the page. 100%
   keeps the glow soft-edged and can never exceed the section. */
.lp-builder::before {
    content: '';
    position: absolute;
    top: -6%;
    left: 50%;
    transform: translateX(-50%);
    width: min(1100px, 100%);
    height: 78%;
    background: radial-gradient(ellipse at 50% 0%,
                rgba(0, 255, 135, 0.13) 0%,
                rgba(0, 255, 135, 0.05) 38%,
                transparent 72%);
    z-index: -1;
    pointer-events: none;
}

/* Broadcast lower-third: a skewed rule that cuts the section open. */
.lp-rule {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.lp-rule::after {
    content: '';
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, var(--c-green), rgba(0, 255, 135, 0));
    transform: skewX(-24deg);
    transform-origin: left center;
}

[dir="rtl"] .lp-rule::after {
    background: linear-gradient(270deg, var(--c-green), rgba(0, 255, 135, 0));
    transform: skewX(24deg);
    transform-origin: right center;
}

/* Tighten the chrome between the hero and the pitch. Scoped to .lp-builder so
   /squad-builder keeps its own roomier spacing — there the page header already
   establishes the rhythm, and nothing is competing for the fold. */
.lp-builder .lp-rule { margin-bottom: var(--space-3); }
.lp-builder #wcStatsGrid { margin-bottom: var(--space-3); }
.lp-builder .mb-summary-extra { margin-bottom: 12px; }

.lp-rule-label {
    flex-shrink: 0;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-green);
}

.lp-rule-hint {
    flex-shrink: 1;
    min-width: 0;
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--c-dim);
}

/* =============================================================================
   3. AI REVIEW CTA — centred under the pitch, the conversion gate
   ============================================================================= */
.lp-review {
    position: relative;
    max-width: 720px;
    margin: clamp(28px, 4vw, 44px) auto 0;
    padding: clamp(24px, 4vw, 36px) clamp(18px, 4vw, 34px);
    text-align: center;
    background: linear-gradient(160deg, rgba(255, 215, 0, 0.07), rgba(56, 0, 60, 0.55));
    border: 1px solid var(--border-gold);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

/* Spotlight sweep — the gold moment, kept to one slow pass. */
.lp-review::before {
    content: '';
    position: absolute;
    top: -60%;
    left: -30%;
    width: 60%;
    height: 220%;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.10), transparent);
    transform: rotate(18deg);
    animation: lpSweep 7s var(--ease-out) infinite;
    pointer-events: none;
}

@keyframes lpSweep {
    0%, 65% { transform: translateX(-40%) rotate(18deg); opacity: 0; }
    72%     { opacity: 1; }
    100%    { transform: translateX(320%) rotate(18deg); opacity: 0; }
}

.lp-review-title {
    position: relative;
    font-size: clamp(1.15rem, 3.2vw, 1.6rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    margin-bottom: var(--space-2);
    color: var(--c-text);
}

.lp-review-body {
    position: relative;
    max-width: 48ch;
    margin: 0 auto var(--space-4);
    font-size: 0.94rem;
    line-height: 1.6;
    color: var(--c-muted);
}

/* Mount point manual-builder.js renders the AI Review button into. The button
   itself is .wc-ai-review-btn from squad-pitch.css — same control as
   /squad-builder, just placed here instead of in the summary bar. */
.lp-review-cta {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}

.lp-review-cta .wc-ai-review-btn {
    padding: 15px 34px;
    font-size: clamp(0.9rem, 3vw, 1.05rem);
    box-shadow: var(--glow-gold);
}

.lp-review-cta .mb-review-reason {
    max-width: 46ch;
    font-size: 0.8rem;
    color: var(--c-dim);
}

/* Post-login nudge (?review=1). Also used on /squad-builder. */
.mb-review-highlight {
    animation: lpNudge 1.6s var(--ease-out) 3;
}

@keyframes lpNudge {
    0%, 100% { transform: scale(1);    box-shadow: var(--glow-gold); }
    50%      { transform: scale(1.05); box-shadow: 0 8px 40px rgba(255, 215, 0, 0.75); }
}

.lp-review-note {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
    font-size: 0.78rem;
    color: var(--c-dim);
}

.lp-review-note::before {
    content: '\2713';
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 255, 135, 0.15);
    color: var(--c-green);
    font-size: 0.62rem;
    font-weight: 800;
}

/* =============================================================================
   4. TEASER — shown when an anonymous visitor asks for their review
   The facts row is real, computed from the squad on the pitch. The blurred
   block below it is generic filler from the locale file, never an analysis:
   no model was called, so there is nothing behind the blur to reveal.
   ============================================================================= */
.lp-teaser {
    max-width: 720px;
    margin: var(--space-4) auto 0;
    background: var(--surface-1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(180, 127, 255, 0.28);
    border-radius: var(--radius-xl);
    overflow: hidden;
    animation: lpRise var(--dur-slow) var(--ease-out) both;
}

.lp-teaser[hidden] { display: none; }

@keyframes lpRise {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

.lp-teaser-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
}

.lp-teaser-head h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--c-violet);
}

.lp-teaser-badge {
    padding: 3px 10px;
    background: rgba(180, 127, 255, 0.18);
    border-radius: var(--radius-pill);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-violet);
}

/* The honest half. */
.lp-teaser-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    gap: 1px;
    background: var(--border-subtle);
}

.mb-teaser-fact {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 14px 12px;
    background: rgba(20, 8, 26, 0.72);
    text-align: center;
}

.mb-teaser-fact span {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-dim);
}

.mb-teaser-fact strong {
    font-size: 1.02rem;
    font-weight: 800;
    color: var(--c-green);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The locked half. */
.lp-teaser-locked {
    position: relative;
    padding: var(--space-4);
}

.lp-teaser-blur {
    filter: blur(5px);
    opacity: 0.5;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
}

.lp-teaser-blur p {
    margin-bottom: 10px;
    font-size: 0.88rem;
    line-height: 1.7;
    color: var(--c-muted);
}

.lp-teaser-blur h4 {
    margin-bottom: 8px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--c-violet);
}

.lp-teaser-gate {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-3);
    background: linear-gradient(180deg, rgba(30, 30, 30, 0.35) 0%, rgba(30, 30, 30, 0.88) 55%);
    text-align: center;
}

.lp-teaser-lock {
    font-size: 1.6rem;
    line-height: 1;
}

.lp-teaser-gate p {
    max-width: 42ch;
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--c-muted);
}

.lp-unlock-btn {
    display: inline-block;
    margin-top: var(--space-2);
    padding: 13px 30px;
    background: linear-gradient(135deg, var(--c-green), var(--c-green-deep));
    border: none;
    border-radius: var(--radius-pill);
    color: var(--c-purple);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.92rem;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 6px 22px rgba(0, 255, 135, 0.32);
    transition: transform var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out);
}

.lp-unlock-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 255, 135, 0.46);
}

.lp-teaser-alt {
    font-size: 0.78rem;
    color: var(--c-dim);
}

.lp-teaser-alt a {
    color: var(--c-green);
    font-weight: 700;
}

/* =============================================================================
   5. MARKETING — numbered, staggered, revealed on scroll
   ============================================================================= */
.lp-sections { padding: clamp(40px, 7vw, 88px) 0; }

.lp-section-head {
    max-width: 60ch;
    margin: 0 auto clamp(28px, 4vw, 48px);
    text-align: center;
}

.lp-section-head h2 {
    font-size: clamp(1.5rem, 4.4vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-2);
}

.lp-section-head p {
    font-size: 0.98rem;
    line-height: 1.65;
    color: var(--c-muted);
}

.lp-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-4);
}

.lp-card {
    position: relative;
    padding: clamp(24px, 3vw, 32px);
    background: var(--surface-2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    transition: transform var(--dur-base) var(--ease-out),
                border-color var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out);
}

/* Asymmetry: the middle card sits lower on wide screens, so the row reads as a
   composition rather than three boxes. Collapses below 1024px. */
@media (min-width: 1024px) {
    .lp-card:nth-child(2) { transform: translateY(28px); }
    .lp-card:nth-child(2):hover { transform: translateY(20px); }
}

.lp-card:hover {
    transform: translateY(-8px);
    border-color: var(--border-green);
    box-shadow: var(--shadow-lift), var(--glow-green);
}

/* Broadcast-style index numeral, bled off the card's top edge. */
.lp-card-index {
    position: absolute;
    top: -14px;
    inset-inline-start: clamp(20px, 3vw, 28px);
    padding: 4px 12px;
    background: var(--c-purple);
    border: 1px solid var(--border-pink);
    border-radius: var(--radius-pill);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--c-pink);
}

.lp-card h3 {
    margin-bottom: var(--space-3);
    font-size: 1.14rem;
    font-weight: 700;
    color: var(--c-pink);
}

.lp-card ul { list-style: none; }

.lp-card li {
    position: relative;
    padding-inline-start: 26px;
    margin-bottom: 11px;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--c-muted);
}

.lp-card li::before {
    content: '\2713';
    position: absolute;
    inset-inline-start: 0;
    top: 1px;
    width: 17px;
    height: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 255, 135, 0.14);
    color: var(--c-green);
    font-size: 0.6rem;
    font-weight: 800;
}

/* =============================================================================
   6. CLOSING CTA — full-bleed band, cut on the diagonal
   ============================================================================= */
.lp-final {
    position: relative;
    margin-top: clamp(24px, 4vw, 48px);
    padding: clamp(48px, 8vw, 96px) 20px;
    text-align: center;
    overflow: hidden;
}

.lp-final::before {
    content: '';
    position: absolute;
    inset: -10% -10% -10% -10%;
    background: linear-gradient(135deg, rgba(233, 0, 82, 0.14), rgba(0, 255, 135, 0.09));
    border-top: 2px solid var(--border-pink);
    border-bottom: 2px solid var(--border-green);
    transform: skewY(-2.4deg);
    z-index: -1;
}

[dir="rtl"] .lp-final::before { transform: skewY(2.4deg); }

.lp-final h2 {
    font-size: clamp(1.6rem, 5vw, 2.7rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-3);
}

.lp-final p {
    max-width: 52ch;
    margin: 0 auto var(--space-5);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--c-muted);
}

.lp-final-btn {
    display: inline-block;
    padding: 17px 44px;
    background: linear-gradient(135deg, var(--c-pink), var(--c-green));
    border-radius: var(--radius-pill);
    color: var(--c-text);
    font-size: 1.05rem;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(233, 0, 82, 0.34);
    transition: transform var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out);
}

.lp-final-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 42px rgba(233, 0, 82, 0.48);
}

/* =============================================================================
   7. Off-season hero
   ============================================================================= */
.lp-offseason {
    max-width: 720px;
    margin: clamp(32px, 6vw, 72px) auto;
    padding: clamp(28px, 5vw, 48px);
    text-align: center;
    background: var(--surface-1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 2px solid var(--border-green);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card), var(--glow-green);
}

.lp-offseason h2 {
    margin-bottom: var(--space-3);
    font-size: clamp(1.3rem, 4vw, 1.9rem);
    font-weight: 800;
    color: var(--c-green);
}

.lp-offseason p {
    font-size: 0.98rem;
    line-height: 1.65;
    color: var(--c-muted);
}

/* =============================================================================
   8. Motion & focus
   ============================================================================= */

/* One orchestrated page load: the hero's parts arrive in sequence. */
.lp-enter {
    animation: lpRise var(--dur-slow) var(--ease-out) both;
}
.lp-enter-1 { animation-delay: 0.05s; }
.lp-enter-2 { animation-delay: 0.14s; }
.lp-enter-3 { animation-delay: 0.23s; }
.lp-enter-4 { animation-delay: 0.32s; }

/* Scroll reveal. Starts hidden only when JS is there to reveal it — the
   .lp-observed class is added by script, so a no-JS visitor sees everything. */
.lp-observed { opacity: 0; transform: translateY(26px); }

.lp-observed.lp-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity var(--dur-slow) var(--ease-out),
                transform var(--dur-slow) var(--ease-out);
}

:where(a, button, [tabindex]):focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 255, 135, 0.35);
    border-radius: var(--radius-sm);
}

/* Nothing on this page moves for a visitor who asked for stillness. The old
   landing page ran three animations unconditionally. */
@media (prefers-reduced-motion: reduce) {
    body::before,
    .lp-eyebrow::before,
    .lp-review::before,
    .mb-review-highlight,
    .lp-enter,
    .lp-teaser {
        animation: none !important;
    }
    .lp-observed { opacity: 1; transform: none; }
    .lp-observed.lp-visible { transition: none; }
    .lp-card:hover,
    .lp-chip:hover,
    .lp-final-btn:hover,
    .lp-unlock-btn:hover { transform: none; }
    @media (min-width: 1024px) {
        .lp-card:nth-child(2),
        .lp-card:nth-child(2):hover { transform: none; }
    }
}

/* =============================================================================
   9. Responsive — house LAYOUT contract
   ============================================================================= */
/* --mb-bleed keeps manual-builder.css's full-bleed .mb-sticky-strip in step
   with this shell's padding. It defaults to 20px there (what .page-content
   uses on the builder pages); every rule below that narrows .lp-shell has to
   narrow the bleed with it, or the strip overhangs the viewport and the
   browser shrink-to-fits the entire page to make room. */
@media (max-width: 1024px) {
    .lp-shell { padding: 0 18px; --mb-bleed: 18px; }
}

@media (max-width: 768px) {
    .lp-shell { padding: 0 14px; --mb-bleed: 14px; }
    .lp-review { border-radius: var(--radius-lg); }
    .lp-teaser { border-radius: var(--radius-lg); }
    .lp-rule-hint { display: none; }   /* the label alone carries it at this width */
}

@media (max-width: 480px) {
    .lp-shell { padding: 0 12px; --mb-bleed: 12px; }
    .lp-chips { gap: 6px; }
    .lp-chip { padding: 6px 12px; font-size: 0.7rem; }
    .lp-final { padding: 40px 16px; }
    .lp-teaser-facts { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 360px) {
    .lp-eyebrow { font-size: 0.65rem; padding: 5px 12px 5px 8px; }
    .lp-review { padding: 20px 14px; }
}
