/* ========================================
   RESPONSIVE OVERRIDES — FINAL AUTHORITY
   This file loads LAST in the cascade.
   ALL rules use !important to guarantee override.
   ======================================== */

/* ── Desktop base ── */
h1.hero-heading {
    font-size: 3.5em !important;
    line-height: 1.05 !important;
    word-break: break-word !important;
}

.paragraph.is-stage-paragraph {
    font-size: 1.3em !important;
    line-height: 1.3 !important;
}

.insider-heading {
    font-size: 2.8em !important;
}

.insider-text-inner {
    margin-top: 6em !important;
}

.stage {
    padding-bottom: 0 !important;
    overflow: visible !important;
    margin-bottom: 3em !important;
}

.marquee {
    transform: translateY(60px) !important;
    z-index: 2 !important;
}

.insider-section {
    /* Minimal top clearance so the heading's first line clears the marquee's
       curved band (the band dips lowest at its centre, right over the centred
       heading). The overlap is ~constant in PIXELS across desktop widths
       (~22px @1440 → ~33px @1000), so a small fixed px margin clears every width
       — an em margin would shrink on narrow screens, exactly where more is
       needed. 50px clears the ~33px worst case with a comfortable buffer, far less
       than the original 6em gap. (This rule wins — it loads after globals.) */
    margin-top: 50px !important;
    position: relative !important;
    z-index: 2 !important;
}

.insider-wrapper,
.insider-section {
    overflow: visible !important;
}

/* ── Stage canvas & logo ── */
.stage-canvas {
    rotate: 20deg !important;
    scale: 1.125 !important;
}

.stage-logo {
    filter: none !important;
    margin-top: 4em !important;
}

.stage-logo-img {
    transform: scale(1.3) !important;
    transform-origin: center bottom !important;
}

.stage-logo-lottie {
    display: none !important;
}

/* ── Desktop only scale-ups ── */
@media (min-width: 992px) {
    .navbar .button {
        scale: 1.25 !important;
    }
    .stage-cta .button {
        scale: 1.25 !important;
    }
    /* Base desktop scale-up lives on the WRAPPER, not .testimonial-inner —
       the latter is the GSAP inertia target, and a CSS scale on it gets folded
       into GSAP's transform matrix and compounds on hover (card "grows"). */
    .testimonial-inner-wrap {
        scale: 1.3 !important;
    }
}

/* ── 5-Video grid desktop ── */
.testimonial-wrapper {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 1rem !important;
    align-items: start !important;
    padding-top: 0 !important;
}

.testimonial-inner-wrap {
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

.testimonial-inner {
    width: 100% !important;
}

.testimonial-inner-wrap.is-first  { top: 3em !important; rotate: -8deg !important; z-index: 2 !important; margin-left: -0.5em !important; }
.testimonial-inner-wrap.is-second { top: 6em !important; rotate: 3deg !important; z-index: 3 !important; margin-left: -1.5em !important; }
.testimonial-inner-wrap.is-third  { top: 0 !important; rotate: -4deg !important; z-index: 5 !important; transform: scale(1.08) !important; }
.testimonial-inner-wrap.is-fourth { top: 5em !important; rotate: 5deg !important; z-index: 3 !important; margin-left: -1em !important; }
.testimonial-inner-wrap.is-fifth  { top: 2em !important; rotate: -6deg !important; z-index: 2 !important; margin-right: -0.5em !important; }

/* ── Letter spacing — use original webflow values (-.03em) ── */

/* ── Marquee text ── */
.marquee-text-svg { top: 20px !important; }
.marquee-text-svg text, .marquee-text-svg textPath {
    font-weight: 700 !important;
}
/* font-size governed by the SVG user-unit attribute (fontSize=160) so it scales with the viewBox */

/* ── Benefit table mobile-only title ── */
.benefit-table-title.is-mobile-only { display: none !important; }

/* ── Footer logo ── */
.footer-logo.desktop { display: none !important; }


/* ========================================
   TABLET — max-width: 991px
   ======================================== */
@media screen and (max-width: 991px) {

    /* ── Footer logo hidden on mobile (only .footer-logo.mobile renders) ── */
    .footer-logo.mobile,
    .footer-logo {
        display: none !important;
    }

    /* ── Navbar collapse ── (social icons STAY visible like the original) */
    .navbar .nav-link-inner,
    #w-node-_084a53a4-1315-9fde-31ee-e99a4811c293-4811c289 {
        display: none !important;
    }

    .navbar .grid-layout {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    .navbar .button {
        margin-left: auto !important;
        scale: 1 !important;
    }

    /* ── Hero ── */
    h1.hero-heading {
        font-size: 2.4em !important;
        text-align: center !important;
    }

    .paragraph.is-stage-paragraph {
        font-size: 1.05em !important;
        text-align: center !important;
    }

    .stage-right { text-align: center !important; }
    .stage-text-wrap { align-items: center !important; }
    .stage { margin-bottom: 2em !important; }
    .marquee { transform: translateY(40px) !important; }

    /* ── Stage facts ── */
    .stage-fact-number { font-size: 1.8em !important; }
    .stage-fact-unit { font-size: 0.9em !important; }
    .stage-fact-text { font-size: 0.7em !important; }

    /* ── Stage logo ── */
    .stage-logo { margin-top: 2em !important; }
    .stage-logo-img { transform: scale(1) !important; }

    /* ── Stage layout ── */
    .stage-deco { display: none !important; }
    .stage-wrap { flex-direction: column !important; align-items: center !important; }
    .stage-left, .stage-right { width: 100% !important; }
    .stage-canvas { scale: 0.85 !important; }

    /* ── Insider ── */
    .insider-section { margin-top: 4em !important; }
    .insider-heading { font-size: 1.8em !important; }
    .insider-text-inner { margin-top: 2em !important; font-size: 1em !important; }
    .insider-section .grid-layout { display: flex !important; flex-direction: column !important; }
    .insider-section .insider-heading { order: -1 !important; margin-bottom: 1.5em !important; margin-top: 0 !important; }

    /* ── Insider videos — stacked pile ── */
    .testimonial-wrapper {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 0 !important;
        transform: none !important;
    }

    .testimonial-inner-wrap,
    .testimonial-inner-wrap.is-first,
    .testimonial-inner-wrap.is-second,
    .testimonial-inner-wrap.is-third,
    .testimonial-inner-wrap.is-fourth,
    .testimonial-inner-wrap.is-fifth {
        display: block !important;
        width: 82vw !important;
        max-width: 420px !important;
        margin-top: -4em !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
    }

    .testimonial-inner-wrap:first-child { margin-top: 0 !important; }
    .testimonial-inner { width: 100% !important; height: auto !important; scale: 1 !important; }

    .testimonial-inner-wrap.is-first  { align-self: flex-end !important; rotate: 5deg !important; }
    .testimonial-inner-wrap.is-second { align-self: flex-start !important; rotate: -4deg !important; }
    .testimonial-inner-wrap.is-third  { align-self: flex-end !important; rotate: 6deg !important; }
    .testimonial-inner-wrap.is-fourth { align-self: flex-start !important; rotate: -5deg !important; }
    .testimonial-inner-wrap.is-fifth  { align-self: flex-end !important; rotate: 4deg !important; }

    /* ── Sequence ──
       DO NOT re-show .sequence-cards here. webflow.css hides the desktop
       cards on mobile (display:none) and shows .sequence-cards-mobile.
       Forcing display:flex made BOTH card sets render at grid-area:1/1,
       stacking on top of each other. .statement-card sizing is left to
       webflow.css originals too. */
    .sequence-title { font-size: 1.8em !important; }

    /* ── Benefits ── */
    .benefit-heading { font-size: 2.8em !important; text-align: center !important; }
}

/* ========================================
   MOBILE — max-width: 767px
   ======================================== */
@media screen and (max-width: 767px) {
    h1.hero-heading { font-size: 2em !important; }
    .paragraph.is-stage-paragraph { font-size: 0.9em !important; }
    .stage-container { padding-left: 1em !important; padding-right: 1em !important; }
    .stage { margin-bottom: 1em !important; }
    .marquee { transform: translateY(20px) !important; }
    /* Nudge the marquee text up so it sits centered in the band on mobile */
    .marquee-text-svg { top: 10px !important; }

    .stage-fact-number { font-size: 1.4em !important; }
    .stage-fact-unit { font-size: 0.7em !important; }
    .stage-fact-text { font-size: 0.55em !important; }
    .stage-fact { padding: 0.6em !important; }

    .stage-logo { margin-top: 1.5em !important; }
    .stage-logo-img { transform: scale(0.85) !important; }

    .insider-section { margin-top: 2.5em !important; }
    .insider-heading { font-size: 1.5em !important; }
    .insider-text-inner { margin-top: 1.5em !important; font-size: 0.85em !important; }

    .testimonial-inner-wrap,
    .testimonial-inner-wrap.is-first,
    .testimonial-inner-wrap.is-second,
    .testimonial-inner-wrap.is-third,
    .testimonial-inner-wrap.is-fourth,
    .testimonial-inner-wrap.is-fifth {
        width: 78vw !important;
        max-width: 330px !important;
        margin-top: -3em !important;
    }
    .testimonial-inner-wrap:first-child { margin-top: 0 !important; }

    .sequence-title { font-size: 1.4em !important; }
    .benefit-heading { font-size: 2.2em !important; }

    .footer-full-height-container { grid-template-columns: 1fr !important; }

    /* ── Benefits table ──
       The title-wrapper, each row, AND the nested checker-inner must share the
       SAME column template AND column-gap, otherwise the "Hype Bam"/"Typical"
       labels drift off the check/X columns. checker-inner spans cols 2–4 with a
       0.5em internal gap, so the outer column-gap must also be 0.5em for the
       split to land exactly on col2/col3. */
    /* minmax(0, …) instead of bare fr: a bare `1fr` is `minmax(auto,1fr)`, so the
       long "Typical Energy Drinks" label inflates its track and the title grid
       stops matching the row grid. minmax(0,…) forces a pure fr split so the
       wrapper and rows resolve to IDENTICAL columns and the labels sit dead-centre
       over the check / X columns. */
    .benefit-table-item { grid-template-columns: minmax(0, 2.5fr) minmax(0, 1fr) minmax(0, 1fr) !important; column-gap: 0.5em !important; align-items: center !important; }
    .benefit-item-title { grid-column: 1 / 2 !important; font-size: 0.85em !important; }
    .benefit-checker-inner { grid-column: 2 / 4 !important; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 0.5em !important; }
    .benefit-item-check, .benefit-item-x { width: 100% !important; justify-content: center !important; }
    .benefit-table-title-wrapper { display: grid !important; grid-template-columns: minmax(0, 2.5fr) minmax(0, 1fr) minmax(0, 1fr) !important; column-gap: 0.5em !important; align-items: center !important; }
    .benefit-table-title-wrapper>.benefit-table-title { white-space: normal !important; min-width: 0 !important; }
    .benefit-table-title-wrapper>.benefit-table-title:first-child { grid-column: 1 !important; grid-row: 1 !important; }
    .benefit-table-title-img.is-desktop { display: none !important; }
    .benefit-table-title.is-mobile-only { display: block !important; grid-column: 2 !important; grid-row: 1 !important; text-align: center !important; }
    .benefit-table-title-wrapper>.benefit-table-title:last-child { grid-column: 3 !important; grid-row: 1 !important; text-align: center !important; }
}

/* ========================================
   SMALL MOBILE — max-width: 479px
   ======================================== */
@media screen and (max-width: 479px) {
    h1.hero-heading { font-size: 1.6em !important; }
    .paragraph.is-stage-paragraph { font-size: 0.8em !important; }

    .stage-fact-number { font-size: 1.2em !important; }
    .stage-fact-unit { font-size: 0.6em !important; }
    .stage-fact-text { font-size: 0.5em !important; }
    .stage-fact { padding: 0.5em !important; }

    .stage-logo-img { transform: scale(0.7) !important; }
    .stage-canvas { scale: 0.7 !important; }

    .testimonial-inner-wrap,
    .testimonial-inner-wrap.is-first,
    .testimonial-inner-wrap.is-second,
    .testimonial-inner-wrap.is-third,
    .testimonial-inner-wrap.is-fourth,
    .testimonial-inner-wrap.is-fifth {
        width: 84vw !important;
        max-width: 320px !important;
        margin-top: -2.5em !important;
    }

    .sequence-title { font-size: 1.2em !important; }
    .benefit-heading { font-size: 1.8em !important; }

    .footer-inner { flex-direction: column !important; gap: 2em !important; }
    .footer-col { width: 100% !important; text-align: center !important; }
}

/* ──────────────────────────────────────────────────────────────────────────
   lvh / svh FALLBACK for Safari < 15.4 (iOS < 15.4) — e.g. iPhone 11 Pro on
   an older iOS. Those Safari versions treat `lvh`/`svh` as an INVALID unit
   and drop the whole declaration, so the sequence section loses its height
   and runway → the layout collapses ("UI broken on iPhone 11 Pro, fine on 13").
   The original webflow.css declares these with no fallback. Here we declare a
   `vh` value first, then the `lvh`/`svh` value second: pre-15.4 Safari keeps
   the `vh` line (visually identical) and ignores the invalid one; 15.4+ uses
   the `lvh`/`svh` line. This file loads last, so these win by source order
   (same specificity as webflow.css, no !important needed).
   ────────────────────────────────────────────────────────────────────────── */
.sequence-scroll-wrap { height: 720vh; height: 720lvh; }
.sequence-sticky { height: 100vh; height: 100lvh; }
.sequence-cards { height: 100vh; height: 100lvh; }
.stage-logo { height: max(12.5em, 34vh); height: max(12.5em, 34svh); }

@media screen and (max-width: 991px) {
    .sequence-sticky { height: 100vh; height: 100lvh; }
    .sequence-cards-mobile {
        grid-column-gap: 65vh; grid-column-gap: 65lvh;
        grid-row-gap: 65vh; grid-row-gap: 65lvh;
        margin-top: -100vh; margin-top: -100lvh;
        padding-top: 50vh; padding-top: 50lvh;
    }
    .sequence-final-mobile { min-height: 100vh; min-height: 100lvh; }
}

@media (orientation: landscape) {
    .stage-container { min-height: 210vh; min-height: 210svh; }
}