/** Shopify CDN: Minification failed

Line 20:0 All "@import" rules must come first

**/
/* ============================================================
   landing-funnel-responsive.css
   Responsive layer for page.promo-landing
   Base styles: mobile-first (landing-funnel.css)
   This file adds tablet (≥768px) and desktop (≥1024px) overrides.
   ============================================================ */

/* ── Shared page container ─────────────────────────────────── */
.funnel-page {
  /* On mobile: no change. On desktop: constrain + centre. */
  width: 100%;
}

/* ── Font injection (Shopify-safe Google Fonts via @import) ── */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

/* ── Sticky CTA: fixed to viewport bottom on real page ──────── */
/* position:fixed lives in landing-funnel.css — responsive tweaks only */

/* ============================================================
   TABLET — ≥ 768px
   ============================================================ */
@media (min-width: 768px) {

  /* ── Container ── */
  section,
  .hero,
  .marquee-bar,
  .sticky-cta {
    padding-left: max(32px, calc(50vw - 420px));
    padding-right: max(32px, calc(50vw - 420px));
  }

  /* ── Type scale up ── */
  .hero h1  { font-size: 38px; }
  .h-section { font-size: 34px; }

  /* ── Hero: constrain sub-headline width ── */
  .hero-sub { max-width: 46ch; }

  /* ── Benefit grid: 4-up on tablet ── */
  .benefit-grid { grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .benefit-tile .stat { font-size: 36px; }

  /* ── Steps: 2-col grid ── */
  .steps { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

  /* ── Features: image right of copy (alternating) ── */
  .feature {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    padding: 40px 0;
  }
  .feature:first-child { padding-top: 0; }
  /* Default (odd): image col 1, text col 2 — DOM order handles this naturally */
  .feature .feature-img {
    border-radius: 12px;
  }
  /* Even features: push image to col 2, text auto-places to col 1 */
  .feature:nth-child(even) .feature-img {
    grid-column: 2;
  }
  .feature-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
  }
  .feature h3 { font-size: 28px; }
  .feature .copy { font-size: 16px; }

  /* ── Problem/Solution: 2-col on tablet ── */
  .ps-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
  }

  /* ── Testimonials: cycling image + stack side by side ── */
  .testimonial-stack { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

  /* ── Pricing tiers: horizontal row ── */
  .tiers { flex-direction: row; align-items: stretch; }
  .tier  { flex: 1; }

  /* ── Press strip: no wrap ── */
  .press-strip { flex-wrap: nowrap; gap: 40px; }

  /* ── Guarantee wider ── */
  .guarantee { max-width: 600px; margin: 0 auto; }

  /* ── FAQ max-width ── */
  .faq-list { max-width: 680px; }

}

/* ============================================================
   DESKTOP — ≥ 1024px
   Full two-column hero, max-width container, bigger type
   ============================================================ */
@media (min-width: 1024px) {

  /* ── Max-width container centred ── */
  section,
  .hero {
    padding-left: max(48px, calc(50vw - 600px));
    padding-right: max(48px, calc(50vw - 600px));
    padding-top: 72px;
    padding-bottom: 72px;
  }
  section.tight,
  .hero {
    padding-top: 56px;
    padding-bottom: 56px;
  }
  .marquee-bar { padding-left: 0; padding-right: 0; }
  .sticky-cta {
    padding-left: max(32px, calc(50vw - 600px));
    padding-right: max(32px, calc(50vw - 600px));
  }

  /* ── Type scale ── */
  .hero h1  { font-size: 52px; line-height: 1.06; }
  .h-section { font-size: 40px; }
  .hero-sub  { font-size: 18px; max-width: 44ch; }

  /* ── Hero: 2-col split (content left, image right) ── */
  .hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    column-gap: 64px;
    align-items: start;
  }

  /* Left column: all copy + pickers + price + form + trust strip */
  .hero-eyebrow    { grid-column: 1; grid-row: 1; }
  .hero h1         { grid-column: 1; grid-row: 2; margin-bottom: 18px; }
  .hero .hero-sub  { grid-column: 1; grid-row: 3; }
  .hero .rating-row{ grid-column: 1; grid-row: 4; }
  .hero .picker-group { grid-column: 1; }
  .hero .price-row { grid-column: 1; }
  .hero form[data-funnel-cart-form] { grid-column: 1; }
  .hero > div:last-of-type { grid-column: 1; } /* trust strip */

  /* Right column: hero image — stretches to match left-column height exactly */
  .hero-img-wrap {
    grid-column: 2;
    grid-row: 1 / span 10;
    margin: 0;
    width: 100%;
    /* No fixed height — grid rows (sized by left column) drive this.
       Prevents bleed below hero at high resolutions. */
    height: 100%;
    min-height: 420px;
    border-radius: 20px;
    overflow: hidden;
    background: var(--paper, #faf8f5);
    align-self: stretch;
  }

  /* Video / image inside: cover the wider container cleanly */
  .hero-img-wrap .video-tile,
  .hero-img-wrap > .video-tile {
    aspect-ratio: unset !important;  /* kills inline style="aspect-ratio:1/1" */
    width: 100%;
    height: 100%;
    border-radius: 0;
  }
  .hero-img-wrap video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%; /* frames person + rebounder */
    border-radius: 0;
  }
  .hero-img-wrap .real-img {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center 20%;
    border-radius: 0;
  }


  /* ── Section head: larger ── */
  .section-head { max-width: 680px; }

  /* ── Benefits: 4-col always ── */
  .benefit-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .benefit-tile .stat { font-size: 42px; }

  /* ── How-it-works: steps 2-col, YouTube tile wider ── */
  .steps { grid-template-columns: 1fr 1fr; gap: 32px; }
  .step .num  { font-size: 48px; }
  .step .title { font-size: 22px; }
  .step .copy  { font-size: 16px; }

  /* ── Features ── */
  .feature { gap: 80px; padding: 56px 0; }
  .feature h3   { font-size: 32px; }
  .feature .copy { font-size: 17px; }

  /* ── Comparison: full width ── */
  .compare { font-size: 15px; }
  .compare-row > div { padding: 16px 10px; font-size: 15px; }
  .compare-head > div { font-size: 12px; padding: 16px 10px; }

  /* ── Testimonials: 3-col ── */
  .testimonial-stack { grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
  .testimonial .quote { font-size: 17px; }

  /* ── Cycling UGC: keep portrait aspect for UGC photos ── */
  /* Note: scoped section CSS manages aspect-ratio; no override needed at desktop */

  /* ── Pricing: tiers side by side ── */
  .tiers { gap: 20px; }
  .tier   { padding: 28px; }
  .tier-name  { font-size: 22px; }
  .tier-price { font-size: 34px; }

  /* ── Guarantee: horizontal, wider ── */
  .guarantee { max-width: 760px; margin: 0 auto; padding: 32px 40px; }
  .guarantee .seal { width: 110px; height: 110px; }
  .guarantee .seal .big { font-size: 36px; }
  .guarantee h3 { font-size: 22px; }
  .guarantee p  { font-size: 15px; }

  /* ── FAQ: 2-col layout ── */
  .faq-list { max-width: 800px; }
  .faq-q { font-size: 18px; }

  /* ── CTA block ── */
  .cta-block { padding: 56px 48px; }
  .cta-block h3 { font-size: 34px; }
  .cta-block p  { font-size: 17px; max-width: 52ch; margin: 0 auto 20px; }

  /* ── Press strip ── */
  .press-strip { padding: 24px 0 10px; gap: 56px; }
  .press-logo  { font-size: 16px; }

  /* ── Counter strip ── */
  .counter-strip .num { font-size: 36px; }

  /* ── Sticky CTA: more spacious on desktop ── */
  .sticky-cta {
    padding-top: 16px;
    padding-bottom: 16px;
  }
  .sticky-cta .thumb { width: 76px; height: 76px; }
  .sticky-cta .meta .name { font-size: 16px; }
  .sticky-cta .meta .price { font-size: 14px; }
  .sticky-cta .meta .price b { font-size: 17px; }
  .sticky-cta .btn-primary { padding: 20px 32px; font-size: 17px; }

  /* ── Section background rhythm (keep alternating on desktop) ── */
  section.paper   { background: var(--paper); }
  section.cream-2 { background: var(--cream-2); }

  /* ── Push page content down so sticky top nav doesn't overlap ── */
  body {
    padding-bottom: 80px; /* space for sticky ATC bar */
  }
}

/* ============================================================
   WIDE DESKTOP — ≥ 1440px
   Minimal tweaks to avoid over-stretching
   ============================================================ */
@media (min-width: 1440px) {
  section,
  .hero {
    padding-left: max(64px, calc(50vw - 680px));
    padding-right: max(64px, calc(50vw - 680px));
  }
  .sticky-cta {
    padding-left: max(64px, calc(50vw - 680px));
    padding-right: max(64px, calc(50vw - 680px));
  }
  .hero h1    { font-size: 60px; }
  .h-section  { font-size: 46px; }
  .hero-sub   { font-size: 19px; }
}

/* ============================================================
   MOBILE-SPECIFIC FIXES (≤ 767px)
   Override prototype-only classes that break on real Shopify
   ============================================================ */
@media (max-width: 767px) {
  /* Sticky ATC: full-width at bottom of viewport */
  .sticky-cta {
    left: 0; right: 0;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  }

  /* Pricing tiers: full-width stack */
  .tiers { flex-direction: column; }

  /* Comparison table: shrink font so it fits */
  .compare       { font-size: 12px; }
  .compare-head > div { padding: 10px 4px; font-size: 10px; }
  .compare-row > div  { padding: 10px 4px; font-size: 12px; }

  /* Feature image: full-width before copy */
  .feature .real-img,
  .feature .imgph { border-radius: 10px; }

  /* Body bottom padding for sticky ATC */
  body { padding-bottom: 74px; }
}

/* ============================================================
   SWATCH ACTIVE STATE — global
   Color is set inline by Liquid (style="background:...").
   This just adds the selection ring on top.
   ============================================================ */
[data-funnel-swatch].is-active {
  box-shadow: 0 0 0 2px white, 0 0 0 4px var(--orange);
  transform: scale(1.1);
}
[data-funnel-swatch]:hover {
  transform: scale(1.05);
  transition: transform .15s ease;
}