/* Landing v3 polish — bigger text, mobile pass, brand banner restored,
 * preset card improvements. Layered on top of components.css and
 * landing_v2_extras.css; loaded via base.html.
 */

/* ── Brand banner — wordmark inline, NOT overriding the v1 spinning
   "1" design from components.css. We just provide a smaller-but-still
   loud container so the hero video fits above the fold. ─────────────── */
.landing-brand-banner {
    background: var(--paper);
    border-bottom: 3px solid var(--ink);
    padding: 14px clamp(20px, 5vw, 60px) 18px;
    text-align: center;
    overflow: hidden;
    /* Don't fight components.css's font-size on .landing-word — just
       constrain to a smaller cap so it doesn't dominate the viewport. */
}
.landing-brand-banner .landing-word {
    /* Override the original 11vw/140px cap with a tighter banner-only size
       so hero video still fits above the fold on a 1440x900 desktop. */
    font-size: clamp(48px, 8vw, 96px) !important;
    text-align: center;
}
.landing-brand-banner .landing-word .one { box-shadow: 5px 5px 0 var(--ink) !important; }

@media (max-width: 640px) {
    .landing-brand-banner { padding: 10px 12px 14px; }
    .landing-brand-banner .landing-word { font-size: clamp(36px, 14vw, 72px) !important; }
    .landing-brand-banner .landing-word .one { box-shadow: 3px 3px 0 var(--ink) !important; }
}

/* ── Bigger text throughout ───────────────────────────────────────── */
.landing-hero-headline {
    font-size: clamp(44px, 6vw, 72px) !important;
    line-height: 1.04;
}
.landing-hero-sub {
    font-size: clamp(17px, 2vw, 21px) !important;
    line-height: 1.55;
    max-width: 600px;
}
.landing-hero-eyebrow {
    font-size: 13px !important;
    letter-spacing: 2.5px !important;
}
.landing-hero-trust {
    font-size: 13px !important;
}
.landing-hero-paste input {
    font-size: 16px !important;
    padding: 16px 18px !important;
}
.landing-hero-paste button {
    font-size: 15px !important;
    padding: 0 24px !important;
}

.landing-section-title {
    font-size: clamp(32px, 4.5vw, 56px) !important;
}
.landing-section-lead {
    font-size: clamp(16px, 1.6vw, 18px) !important;
    line-height: 1.55;
    max-width: 760px !important;
}
.landing-eyebrow {
    font-size: 13px !important;
    letter-spacing: 2.5px !important;
}

.landing-feature h3 { font-size: clamp(17px, 1.5vw, 20px) !important; }
.landing-feature p { font-size: clamp(14px, 1.2vw, 16px) !important; line-height: 1.55; }

.landing-example figcaption strong { font-size: 15px !important; }
.landing-example figcaption span { font-size: 12px !important; }

.landing-preset figcaption strong { font-size: 14px !important; }
.landing-preset figcaption span { font-size: 11px !important; }

/* TG bot mockup — bigger description column */
.landing-tg-copy h3 { font-size: clamp(24px, 3.5vw, 36px) !important; }
.landing-tg-copy p { font-size: clamp(15px, 1.5vw, 17px) !important; line-height: 1.6; }
.landing-tg-bullets li { font-size: clamp(14px, 1.3vw, 16px) !important; }

/* Highlights mockup — bigger */
.landing-hl-body h4 { font-size: clamp(16px, 1.5vw, 18px) !important; }
.landing-hl-why { font-size: clamp(13px, 1.2vw, 15px) !important; }

/* 4-step flow — bigger */
.landing-flow-step h3 { font-size: clamp(18px, 1.8vw, 22px) !important; }
.landing-flow-step p { font-size: clamp(13px, 1.2vw, 15px) !important; line-height: 1.55; }

/* FAQ — make summaries bigger and bodies more readable */
.landing-faq summary { font-size: clamp(15px, 1.4vw, 17px) !important; padding: 14px 18px !important; }
.landing-faq .faq-body { font-size: clamp(14px, 1.2vw, 16px) !important; line-height: 1.6 !important; padding: 12px 18px 18px !important; }

/* ── Preset card improvements ─────────────────────────────────────── */
.landing-presets-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 22px !important;
}
.landing-preset {
    border-width: 4px !important;
    box-shadow: 8px 8px 0 var(--ink) !important;
}
.landing-preset:hover {
    transform: translate(-3px, -3px) rotate(-1deg) !important;
    box-shadow: 11px 11px 0 var(--ink) !important;
}
.landing-preset img {
    background: #000;
}
.landing-preset figcaption {
    padding: 12px 14px !important;
}

/* ── Example card improvements ────────────────────────────────────── */
.landing-example {
    border-width: 4px !important;
    box-shadow: 10px 10px 0 var(--ink) !important;
}
.landing-example:hover {
    transform: translate(-3px, -3px) !important;
    box-shadow: 13px 13px 0 var(--ink) !important;
}
.landing-example figcaption {
    padding: 14px 16px !important;
}

/* ── Hero shadow upgrade — more brutalist depth ───────────────────── */
.landing-hero-paste {
    border-width: 4px !important;
    box-shadow: 8px 8px 0 var(--ink) !important;
}
.landing-hero-video-wrap {
    box-shadow: 14px 14px 0 var(--ink), 0 0 0 8px var(--neon-yellow), 14px 14px 0 8px var(--ink) !important;
}

/* ════════════════════════════════════════════════════════════════════
   Mobile pass — every section reviewed and tightened for ≤640px
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
    /* General section padding tighter, but content readable */
    .landing-section { padding: 36px 16px !important; }

    .landing-hero-v2 { padding: 36px 16px !important; }
    .landing-hero-headline { font-size: clamp(34px, 9vw, 48px) !important; }
    .landing-hero-sub { font-size: 16px !important; }
    .landing-hero-paste { box-shadow: 5px 5px 0 var(--ink) !important; }
    .landing-hero-paste input { font-size: 15px !important; padding: 14px !important; }
    .landing-hero-paste button { padding: 14px 16px !important; font-size: 14px !important; }
    .landing-hero-trust {
        flex-direction: column;
        gap: 6px !important;
        align-items: flex-start;
    }
    .landing-hero-video-wrap {
        max-width: 220px !important;
        box-shadow: 8px 8px 0 var(--ink), 0 0 0 6px var(--neon-yellow), 8px 8px 0 6px var(--ink) !important;
    }
    .landing-hero-video-tag { font-size: 11px !important; bottom: -32px !important; }

    /* Section titles smaller but still loud */
    .landing-section-title { font-size: clamp(26px, 8vw, 38px) !important; }
    .landing-section-lead { font-size: 15px !important; }

    /* Examples — single column, full width */
    .landing-examples {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }
    .landing-example {
        max-width: 320px;
        margin: 0 auto;
        box-shadow: 6px 6px 0 var(--ink) !important;
    }

    /* Preset gallery — 2 columns on phone (tighter) */
    .landing-presets-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
    }
    .landing-preset {
        box-shadow: 5px 5px 0 var(--ink) !important;
        border-width: 3px !important;
    }
    .landing-preset figcaption { padding: 8px 10px !important; }
    .landing-preset figcaption strong { font-size: 12px !important; }
    .landing-preset figcaption span { font-size: 10px !important; }

    /* TG bot mockup — phone scales down, copy stacks above */
    .landing-tg-grid {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }
    .landing-tg-phone-frame {
        width: 260px !important;
        padding: 30px 6px 12px !important;
    }
    .landing-tg-chat {
        max-height: 480px !important;
        font-size: 11px !important;
    }
    .landing-tg-msg { padding: 7px 9px !important; }
    .landing-tg-copy h3 { font-size: 24px !important; }
    .landing-tg-copy p { font-size: 15px !important; }
    .landing-tg-bullets li { font-size: 14px !important; }

    /* Highlights mockup — single column with full-width thumb */
    .landing-hl-mockup {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .landing-hl-card {
        max-width: 360px;
        margin: 0 auto;
        box-shadow: 5px 5px 0 var(--ink) !important;
    }
    .landing-hl-card--top {
        box-shadow: 6px 6px 0 var(--neon-pink), 6px 6px 0 3px var(--ink) !important;
    }
    .landing-hl-body h4 { font-size: 16px !important; }
    .landing-hl-why { font-size: 13px !important; }

    /* 4-step flow — single column with rotated arrows */
    .landing-flow {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .landing-flow-step {
        box-shadow: 5px 5px 0 var(--ink) !important;
    }
    .landing-flow-icon { font-size: 32px !important; }
    .landing-flow-arrow {
        font-size: 26px !important;
        transform: rotate(90deg) !important;
        padding: 4px 0 !important;
        text-align: center !important;
    }

    /* Pricing — tighter padding */
    .landing-plan { padding: 18px 14px !important; }

    /* FAQ — full-width with tighter padding */
    .landing-faq summary { padding: 12px 14px !important; font-size: 14px !important; }
    .landing-faq .faq-body { font-size: 13px !important; padding: 10px 14px 14px !important; }

    /* Final CTA — bigger button */
    .landing-final h2 { font-size: clamp(28px, 8vw, 40px) !important; }
    .landing-final p { font-size: 14px !important; }
    .landing-final .btn { padding: 14px 18px !important; font-size: 14px !important; }

    /* Brand banner mobile — slightly less intense shadow */
    .landing-brand-banner {
        padding: 16px 12px !important;
        border-bottom-width: 3px !important;
    }
}

/* Tablet / mid (641-1024) — 3-up presets, 2-up examples */
@media (min-width: 641px) and (max-width: 1024px) {
    .landing-presets-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .landing-examples {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .landing-hl-mockup {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ════════════════════════════════════════════════════════════════════
   Hero compression — fit headline + paste + VIDEO above the fold
   on a 1440x900 desktop viewport (no scrolling required).
   ════════════════════════════════════════════════════════════════════ */

.landing-hero-v2 {
    /* Trimmed top/bottom padding to claw back vertical space. */
    padding: clamp(24px, 4vw, 44px) clamp(20px, 5vw, 60px) clamp(28px, 4vw, 48px) !important;
}
.landing-hero-headline {
    /* Was clamp(44px, 6vw, 72px). Slightly tighter to free vertical room
       for the video preview without losing punch on big screens. */
    font-size: clamp(38px, 4.6vw, 60px) !important;
    line-height: 1.02 !important;
    margin: 0 0 14px !important;
}
.landing-hero-eyebrow { margin: 0 0 8px !important; }
.landing-hero-sub {
    margin: 0 0 18px !important;
    font-size: clamp(15px, 1.6vw, 18px) !important;
}
.landing-hero-paste { margin-bottom: 10px !important; }
.landing-hero-trust { margin-top: 4px; }

/* Make the desktop video frame slightly larger so it actually visible
   above the fold, but still capped so it doesn't dominate. */
.landing-hero-video-wrap {
    max-width: 280px !important;
    margin: 0 auto !important;
}

/* Below 1100px, switch to row-reverse so the video shows ABOVE the
   text on tablets (so the "hook" is still visible without scrolling). */
@media (max-width: 1024px) and (min-width: 641px) {
    .landing-hero-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    .landing-hero-video-wrap {
        order: -1 !important;
        max-width: 200px !important;
    }
}

/* On mobile (≤640px) — drop the video to a thin strip on top so user
   sees BOTH headline + video without scrolling. */
@media (max-width: 640px) {
    .landing-hero-grid {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }
    .landing-hero-video-wrap {
        order: -1 !important;
        max-width: 160px !important;
        margin-bottom: 8px !important;
    }
    .landing-hero-headline {
        font-size: clamp(28px, 8vw, 40px) !important;
    }
}

/* ════════════════════════════════════════════════════════════════════
   Animations — entrance reveals + the hover lifts already in place.
   Respect prefers-reduced-motion.
   ════════════════════════════════════════════════════════════════════ */

@keyframes cl1pper-fade-up {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes cl1pper-pop-in {
    0%   { opacity: 0; transform: scale(0.8) rotate(-2deg); }
    60%  { transform: scale(1.04) rotate(0.5deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes cl1pper-shimmer {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

@media (prefers-reduced-motion: no-preference) {
    /* Hero entrance */
    .landing-brand-banner .landing-word {
        animation: cl1pper-pop-in 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }
    .landing-hero-eyebrow   { animation: cl1pper-fade-up 0.6s 0.10s both; }
    .landing-hero-headline  { animation: cl1pper-fade-up 0.6s 0.20s both; }
    .landing-hero-sub       { animation: cl1pper-fade-up 0.6s 0.30s both; }
    .landing-hero-paste     { animation: cl1pper-fade-up 0.6s 0.40s both; }
    .landing-hero-trust     { animation: cl1pper-fade-up 0.6s 0.50s both; }
    .landing-hero-video-wrap {
        animation: cl1pper-pop-in 0.8s 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }

    /* Highlighter behind "Twitch VODs" — sweeps in after the headline
       lands, then settles. Pure CSS, no JS. */
    .landing-hero-headline .hl {
        background: linear-gradient(90deg,
            transparent 0%, transparent 50%,
            var(--neon-green) 50%, var(--neon-green) 100%) !important;
        background-size: 200% 100% !important;
        background-position: 100% 50% !important;
        animation: cl1pper-shimmer 0.7s 0.6s ease-out forwards !important;
    }

    /* Section reveal — uses IntersectionObserver via .landing-reveal
       class added by JS in landing.html. */
    .landing-reveal {
        opacity: 0;
        transform: translateY(32px);
        transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }
    .landing-reveal.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

    /* Subtle paste-button pulse — draws the eye to the action input
       once the entrance finishes. */
    @keyframes cl1pper-cta-pulse {
        0%, 100% { box-shadow: 8px 8px 0 var(--ink); }
        50%      { box-shadow: 10px 10px 0 var(--ink), 0 0 0 4px rgba(255, 51, 102, 0.15); }
    }
    .landing-hero-paste {
        animation: cl1pper-fade-up 0.6s 0.40s both,
                   cl1pper-cta-pulse 2.4s 1.5s ease-in-out infinite;
    }
}

/* ════════════════════════════════════════════════════════════════════
   Dark-theme contrast patches — places where var(--ink) was used as
   text on the page background and went near-invisible when --ink
   flipped to #050505 in dark mode.
   ════════════════════════════════════════════════════════════════════ */

[data-theme="dark"] .landing-nav-links a {
    color: var(--text-primary);
}
[data-theme="dark"] .landing-nav-links a:hover {
    border-bottom-color: var(--neon-pink);
    background: rgba(255, 255, 255, 0.04);
}
[data-theme="dark"] .landing-nav-logo {
    color: var(--text-primary);
}

[data-theme="dark"] .landing-meta-strip {
    color: var(--text-muted);
    border-color: var(--border-strong);
}
[data-theme="dark"] .landing-meta-strip span {
    color: var(--text-muted);
}

[data-theme="dark"] .landing-brand-banner {
    border-bottom-color: var(--border-strong);
}
[data-theme="dark"] .landing-brand-banner .landing-word {
    color: var(--text-primary);
}
[data-theme="dark"] .landing-brand-banner .landing-word .one {
    box-shadow: 5px 5px 0 var(--text-primary) !important;
}

/* Hero paste field on dark — keep input legible. */
[data-theme="dark"] .landing-hero-paste {
    background: var(--bg-surface);
    border-color: var(--border-strong);
    box-shadow: 8px 8px 0 var(--shadow-ink) !important;
}
[data-theme="dark"] .landing-hero-paste input {
    background: transparent;
    color: var(--text-primary);
}
[data-theme="dark"] .landing-hero-paste input::placeholder {
    color: var(--text-muted);
}
[data-theme="dark"] .landing-hero-paste input:focus {
    background: rgba(190, 242, 100, 0.06);
}
[data-theme="dark"] .landing-hero-paste button {
    border-left-color: var(--border-strong);
}

/* Hero video frame — yellow halo against dark bg looks OK but the
   inner ink border drops to invisible. Soften to border-strong. */
[data-theme="dark"] .landing-hero-video-wrap {
    border-color: var(--border-strong);
    box-shadow: 14px 14px 0 var(--shadow-ink),
                0 0 0 8px var(--neon-yellow),
                14px 14px 0 8px var(--shadow-ink) !important;
}

/* Section cards (examples, presets, flow steps, hl cards) — borders
   that were ink need to soften so the cards register against dark. */
[data-theme="dark"] .landing-example,
[data-theme="dark"] .landing-preset,
[data-theme="dark"] .landing-flow-step,
[data-theme="dark"] .landing-hl-card {
    border-color: var(--border-strong);
    box-shadow: 8px 8px 0 var(--shadow-ink) !important;
}
[data-theme="dark"] .landing-example:hover,
[data-theme="dark"] .landing-preset:hover {
    box-shadow: 11px 11px 0 var(--shadow-ink) !important;
}
[data-theme="dark"] .landing-example figcaption,
[data-theme="dark"] .landing-preset figcaption {
    /* Captions used --neon-yellow background with black text; that pair
       is high-contrast in BOTH modes so we keep it. Just make sure the
       border-top respects the dark theme. */
    border-top-color: var(--border-strong);
}

/* TG bot mockup — phone frame is intentionally always dark, no change.
   But the surrounding copy column needs ink->text-primary swap. */
[data-theme="dark"] .landing-tg-copy h3,
[data-theme="dark"] .landing-tg-copy p,
[data-theme="dark"] .landing-tg-bullets li {
    color: var(--text-primary);
}
[data-theme="dark"] .landing-tg-bullets li {
    border-bottom-color: rgba(245, 240, 224, 0.12);
}
[data-theme="dark"] .landing-tg-note {
    color: var(--text-muted);
}

/* Highlights mockup — same fix for the body card. */
[data-theme="dark"] .landing-hl-body h4 {
    color: var(--text-primary);
}
[data-theme="dark"] .landing-hl-meta {
    color: var(--text-muted);
}
[data-theme="dark"] .landing-hl-why {
    color: var(--text-primary);
}
[data-theme="dark"] .landing-hl-why li {
    border-bottom-color: rgba(245, 240, 224, 0.12);
}
[data-theme="dark"] .landing-hl-btn {
    background: var(--bg-surface);
    color: var(--text-primary);
    border-color: var(--border-strong);
}
[data-theme="dark"] .landing-hl-btn--primary {
    background: var(--neon-pink);
    color: #fff;
}

/* 4-step flow */
[data-theme="dark"] .landing-flow-step h3,
[data-theme="dark"] .landing-flow-step p {
    color: var(--text-primary);
}
[data-theme="dark"] .landing-flow-mini {
    background: rgba(251, 191, 36, 0.92);
    color: #050505;
    border-color: var(--border-strong);
}
[data-theme="dark"] .landing-flow-arrow {
    color: var(--neon-pink);
}

/* Time-saved banner on dashboard / hero trust — already pop colors,
   no change needed. */

/* Final CTA section on dark already inherits from .landing-final, OK. */

/* ════════════════════════════════════════════════════════════════════
   Dark-theme — section background fixes. .landing-section-alt was
   hardcoded cream in light mode and never got a dark override, so
   in dark mode it appeared as a cream stripe with white text on it
   (the "FOUR STEPS. TWO MINUTES." section disappeared).
   ════════════════════════════════════════════════════════════════════ */

[data-theme="dark"] .landing-section-alt {
    background: #14141a;   /* slightly lifted from page bg so the section
                              still reads as a band, not flat */
    border-top: 3px solid var(--border-strong);
    border-bottom: 3px solid var(--border-strong);
}
[data-theme="dark"] .landing-section-alt .landing-section-title,
[data-theme="dark"] .landing-section-alt .landing-section-lead {
    color: var(--text-primary);
}

/* The detection-engine section (.landing-section-ink) in light mode is
   already ink-dark with cream text — perfect on dark too. The existing
   dark override at retro/components.css line 4617 keeps it consistent. */