/* =========================================================================
   Clear Pages Studios — MOBILE-FIRST RESPONSIVE FIX BLOCK
   Append to (or @import after) premium.css.
   Breakpoints used consistently (max-width):
     ≤768px  small tablet
     ≤680px  large phone / hamburger threshold
     ≤480px  phone
     ≤420px  small phone
   All rules override styles.css + premium.css without touching those files.
   ========================================================================= */


/* =========================================================================
   0. GLOBAL — prevent horizontal scroll & set fluid base
   ========================================================================= */

html,body{
  overflow-x:hidden;
  width:100%;
}

/* ensure nothing breaks out of its parent */
*,*::before,*::after{
  max-width:100%;
}

/* fluid images / embeds already covered by styles.css img rule —
   keep this here as a safety net for any inline-sized elements */
iframe,embed,object,video{
  max-width:100%;
  height:auto;
}

/* =========================================================================
   1. TABLET  ≤768px
   ========================================================================= */
@media (max-width:768px){

  /* -- Global typography & spacing -- */
  body{font-size:16px}
  section{padding:48px 0}
  .wrap{padding:0 20px}
  h1{font-size:clamp(1.9rem,6vw,2.8rem)}
  h2{font-size:clamp(1.4rem,4vw,2rem)}
  h3{font-size:1.1rem}
  .section-head{margin-bottom:28px}

  /* -- Header / nav-tools -- */
  /* keep nav-tools from wrapping/overflowing at tablet */
  .nav{gap:12px;height:68px}
  .nav-tools{gap:8px;flex-shrink:0}

  /* -- Hero -- */
  .hero-inner{
    grid-template-columns:1fr;
    gap:28px;
    padding:40px 0 52px;
  }
  .hero-covers{
    grid-template-columns:repeat(3,1fr);
    grid-template-rows:auto;
    max-width:520px;
    margin:0 auto;
  }
  .hc-a,.hc-b,.hc-c{grid-column:auto;grid-row:auto;margin-top:0;aspect-ratio:3/4}
  .hero .lead{font-size:1.05rem;max-width:unset}

  /* -- Product grid -- */
  .product-grid{grid-template-columns:repeat(3,1fr);gap:18px}

  /* -- Category grid -- */
  .cat-grid{grid-template-columns:repeat(2,1fr);gap:14px}

  /* -- Stats -- */
  .stats{grid-template-columns:repeat(2,1fr);gap:14px}

  /* -- Bento -- */
  .bento{grid-template-columns:repeat(2,1fr);gap:14px}
  .bento-tile.big{grid-column:span 2;grid-row:span 1}

  /* -- Ladder / pricing tiers -- */
  .ladder{grid-template-columns:1fr}

  /* -- Showcase -- */
  .showcase{grid-template-columns:repeat(3,1fr);gap:12px}

  /* -- Bundle builder grid -- */
  .builder-grid{grid-template-columns:repeat(4,1fr);gap:10px}

  /* -- Bundle bar: stack comfortably, don't obscure content --
     Use a defined height so body padding-bottom can offset it */
  .bundle-bar{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    padding:14px 18px 18px;
    border-radius:0;
  }
  .bundle-bar .hint{margin-right:0;text-align:center}
  .bundle-bar .totals{justify-content:center}

  /* add bottom padding to .builder so sticky bar never covers last row */
  .builder{padding-bottom:0}
  .builder-grid{padding-bottom:2px}

  /* -- Footer -- */
  .foot-grid{grid-template-columns:1fr 1fr;gap:24px}

  /* -- Contact -- */
  .contact-grid{grid-template-columns:1fr;gap:28px}

  /* -- Bundle/feature cards -- */
  .bundle-grid{grid-template-columns:1fr}

  /* -- Two-column splits -- */
  .split.t-bundle,.split.t-about{grid-template-columns:1fr}

  /* -- Props -- */
  .props{grid-template-columns:repeat(2,1fr);gap:14px}

  /* -- Newsletter -- */
  .newsletter{padding:36px 24px}

  /* -- Marquee text -- */
  .marquee span{font-size:1.25rem;gap:32px}
  .marquee-track{gap:32px}
}


/* =========================================================================
   2. LARGE PHONE  ≤680px  (hamburger threshold)
   ========================================================================= */
@media (max-width:680px){

  /* -- Global -- */
  body{font-size:15px}
  section{padding:40px 0}
  .wrap{padding:0 16px}

  /* -- Tap targets: all interactive elements ≥44px -- */
  .btn,.chip,.pick,.cat-tile,
  .nav-links a,.mobile-menu a,
  .social a,.foot-col a,
  .faq summary{
    min-height:44px;
  }
  .btn{padding:.82em 1.3em}
  .btn-sm{padding:.65em 1em;font-size:.9rem}
  .social a{width:44px;height:44px}

  /* -- Header: hamburger show, nav hidden (already in styles.css) --
     Ensure nav-tools doesn't overflow on 680 boundary */
  .nav{height:64px;gap:10px}
  .nav-tools{gap:8px}
  /* theme toggle still needs 44px — already set above */
  .theme-toggle,.hamburger{min-width:44px;min-height:44px}

  /* -- Brand lockup -- */
  .brand{gap:8px}
  .brand .brand-ico{width:36px;height:36px}
  .brand-name{font-size:.96rem}

  /* -- Hero -- */
  .hero-inner{padding:32px 0 44px;gap:24px}
  .hero-covers{
    grid-template-columns:repeat(2,1fr);
    max-width:340px;
  }
  .hc-c{display:none}
  .hero-chips{gap:7px;flex-wrap:wrap}
  .hero-chip{font-size:.76rem;padding:.26em .6em}
  .hero-cta{gap:10px}
  .hero-cta .btn{flex:1 1 auto;min-width:0;text-align:center}

  /* -- Product grid: 2 columns -- */
  .product-grid{grid-template-columns:repeat(2,1fr);gap:14px}

  /* -- Showcase: 2 columns -- */
  .showcase{grid-template-columns:repeat(2,1fr);gap:10px}

  /* -- Bundle builder: 3 columns on phone -- */
  .builder-grid{grid-template-columns:repeat(3,1fr);gap:10px}

  /* -- Bundle bar: full stack with full-width CTA button -- */
  .bundle-bar{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    padding:12px 16px 16px;
    border-radius:0 0 14px 14px;
  }
  .bundle-bar .hint{order:0;margin-right:0;text-align:center;font-size:.85rem}
  .bundle-bar .totals{order:1;justify-content:center}
  .bundle-bar .btn{order:2;width:100%;justify-content:center}
  /* Ensure the sticky bar doesn't permanently cover content;
     compensate with explicit bottom padding on its parent section */
  .builder{
    padding-bottom:0;
    /* sticky bar ~130px tall on phones; outer section must add clearance */
  }

  /* -- Steps -- */
  .steps{grid-template-columns:1fr}
  .premium-steps::before{display:none}

  /* -- Stats -- */
  .stats{grid-template-columns:repeat(2,1fr);gap:12px}
  .stat .n{font-size:2rem}
  .stat{padding:22px 14px}

  /* -- Bento -- */
  .bento{grid-template-columns:1fr;gap:12px}
  .bento-tile.big{grid-column:span 1}

  /* -- Marquee -- */
  .marquee span{font-size:1.05rem;gap:24px}
  .marquee-track{gap:24px}

  /* -- Newsletter -- */
  .newsletter{padding:28px 18px}

  /* -- Subscribe form: stack vertically -- */
  .subscribe{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    max-width:100%;
  }
  .subscribe input{
    width:100%;
    min-width:0;
    flex:none;
  }
  .subscribe .btn{
    width:100%;
    justify-content:center;
  }

  /* -- Contact form -- */
  .contact-grid{grid-template-columns:1fr}
  .field input,
  .field textarea{
    width:100%;
    font-size:16px; /* prevent iOS zoom on focus */
  }

  /* -- Card row buttons -- */
  .card .links .btn{padding:.55em .85em;font-size:.88rem}

  /* -- Footer -- */
  .foot-grid{grid-template-columns:1fr 1fr;gap:20px}
  .foot-bottom{flex-direction:column;align-items:flex-start;gap:12px}

  /* -- FAQ -- */
  .faq summary{padding:16px 18px;font-size:1rem}
  .faq .a{padding:0 18px 16px}

  /* -- Section head -- */
  .section-head{margin-bottom:24px}

  /* -- Announce bar -- */
  .announce{font-size:.82rem;padding:.5rem 16px}
}


/* =========================================================================
   3. SMALL PHONE  ≤480px
   ========================================================================= */
@media (max-width:480px){

  /* -- Global -- */
  body{font-size:15px}
  section{padding:32px 0}
  .wrap{padding:0 14px}
  h1{font-size:clamp(1.7rem,7vw,2.2rem)}
  h2{font-size:clamp(1.25rem,5vw,1.65rem)}

  /* -- Brand lockup: hide tagline, shrink icon -- */
  .brand .brand-ico,
  .brand img{width:32px;height:32px}
  .brand-name{font-size:.88rem}
  .brand-tag{display:none}

  /* -- Hero -- */
  .hero-inner{padding:28px 0 36px;gap:20px}
  .hero-covers{max-width:300px}
  .hero-chips{display:none} /* too crowded on 360px; optionally show 1-2 */
  .hero .lead{font-size:1rem}

  /* -- Product grid: 2 col (or single on very narrow -- see ≤360) -- */
  .product-grid{grid-template-columns:repeat(2,1fr);gap:12px}

  /* -- Cat grid: 2 col -- */
  .cat-grid{grid-template-columns:repeat(2,1fr);gap:10px}

  /* -- Bundle builder: 2 columns -- */
  .builder-grid{grid-template-columns:repeat(2,1fr);gap:8px}

  /* -- Bundle bar refinements -- */
  .bundle-bar .now{font-size:1.35rem}
  .bundle-bar .was{font-size:.9rem}
  .bundle-bar .save{font-size:.85rem}

  /* -- Stats: 2 col -- */
  .stats{grid-template-columns:repeat(2,1fr);gap:10px}
  .stat .n{font-size:1.75rem}
  .stat{padding:18px 12px}

  /* -- Showcase: 2 col -- */
  .showcase{grid-template-columns:repeat(2,1fr);gap:8px}

  /* -- Bento: 1 col (carried forward) -- */
  .bento{grid-template-columns:1fr}

  /* -- Ladder: 1 col (carried forward) -- */
  .ladder{grid-template-columns:1fr}

  /* -- Marquee -- */
  .marquee span{font-size:.9rem;gap:18px}
  .marquee-track{gap:18px}

  /* -- Footer: 1 col at 480 -- */
  .foot-grid{grid-template-columns:1fr;gap:20px}

  /* -- Newsletter -- */
  .newsletter{padding:22px 14px;border-radius:var(--radius-sm)}

  /* -- Subscribe: already stacked from 680; ensure button full width -- */
  .subscribe .btn,.subscribe input{width:100%}

  /* -- Cards: tighter internal padding -- */
  .card .body{padding:12px 12px 14px}
  .card .row{flex-direction:column;align-items:flex-start;gap:8px}
  .card .links{width:100%}
  .card .links .btn{flex:1;justify-content:center}
  .card .preview-link{font-size:.82rem}

  /* -- Tier padding -- */
  .tier{padding:22px 18px}

  /* -- Planners block -- */
  .planners{padding:28px 16px}

  /* -- Page hero -- */
  .page-hero{padding:36px 0}
}


/* =========================================================================
   4. VERY SMALL PHONE  ≤420px
   (hide header CTA button that would crowd the brand + hamburger row)
   ========================================================================= */
@media (max-width:420px){

  /* Hide "Shop PDFs" / "Build a bundle" primary CTA in the header tools area
     to prevent the nav from overflowing or wrapping */
  .nav-tools .btn{display:none}

  /* Brand compress further */
  .brand .brand-ico,
  .brand img{width:30px;height:30px}
  .brand-name{font-size:.84rem}

  /* Hero: full-width stacked CTAs */
  .hero-cta{flex-direction:column;gap:8px}
  .hero-cta .btn{width:100%;text-align:center}

  /* Product grid: single column on narrowest screens */
  .product-grid{grid-template-columns:1fr}

  /* Cat grid: single column */
  .cat-grid{grid-template-columns:1fr}

  /* Builder: 2 col is tight but workable; stay at 2 */
  .builder-grid{grid-template-columns:repeat(2,1fr)}

  /* Footer always single column */
  .foot-grid{grid-template-columns:1fr}

  /* Stat numbers */
  .stat .n{font-size:1.5rem}

  /* FAQ */
  .faq summary{font-size:.96rem;padding:14px 16px}
}


/* =========================================================================
   5. OVERRIDES: fixed-width elements that could cause horizontal scroll
   ========================================================================= */

/* newsletter max-width cap */
.newsletter{max-width:100%}

/* subscribe input never wider than viewport */
.subscribe{width:100%;box-sizing:border-box}
.subscribe input{box-sizing:border-box}

/* builder itself */
.builder{width:100%;box-sizing:border-box;overflow:hidden}

/* any inline-styled or JS-set fixed widths on picks */
.pick{min-width:0;width:100%}

/* marquee track must not create horizontal scroll on the page
   (it scrolls internally via animation — the outer is overflow:hidden) */
.marquee{width:100%;box-sizing:border-box}

/* section heads with constrained ch widths can overflow on tiny screens */
.section-head{max-width:100%}
.prose{max-width:100%}

/* hero copy max-width */
.hero h1{max-width:100%}
.hero .lead{max-width:100%}


/* =========================================================================
   6. BUNDLE BAR: body bottom padding so sticky bar never buries content
      Applied at each relevant breakpoint.
   ========================================================================= */

/* Give the section containing .builder enough clearance at the bottom
   so the sticky .bundle-bar doesn't permanently overlay the last row.
   Adjust the value if the bar height changes. */
@media (max-width:768px){
  .builder{padding-bottom:0} /* bar sits inside .builder, clip handled by border-radius */
  /* If bundle-bar is sticky to the viewport bottom (not inside .builder),
     add padding to body or the page wrapper: */
  body{padding-bottom:0} /* reset — bar is inside the component, not fixed to viewport */
}

/* =========================================================================
   7. ACCESSIBILITY: ensure all interactive elements meet 44px tap targets
      across all breakpoints (safety sweep)
   ========================================================================= */
@media (max-width:768px){
  .theme-toggle,
  .hamburger,
  .social a{
    min-width:44px;
    min-height:44px;
  }
  /* chip filter buttons */
  .chip{
    min-height:44px;
    display:inline-flex;
    align-items:center;
  }
  /* mobile menu links */
  .mobile-menu a{
    padding:14px 20px;
    min-height:44px;
    display:flex;
    align-items:center;
  }
  /* foot links */
  .foot-col a{
    padding:.45em 0;
    min-height:44px;
    display:flex;
    align-items:center;
  }
}


/* ================= HERO v3 (centered + auto-scrolling cover rail) ============ */
.hero{min-height:auto;display:block}
.hero .hero-inner{display:block;max-width:800px;margin:0 auto;text-align:center;grid-template-columns:none;
  padding:clamp(76px,12vw,132px) 24px clamp(24px,4vw,40px)}
.hero-eyebrow{justify-content:center}
.hero h1{max-width:none;margin-inline:auto}
.hero .lead{margin-inline:auto;max-width:54ch}
.hero-cta{justify-content:center}
.hero-chips{justify-content:center}
.hero-covers{display:none!important}

.hero-rail{position:relative;z-index:2;width:100%;overflow:hidden;padding-bottom:clamp(44px,7vw,80px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.hero-rail-track{display:flex;gap:18px;width:max-content;animation:railScroll 70s linear infinite}
.hero-rail:hover .hero-rail-track{animation-play-state:paused}
.hero-rail-card{flex:0 0 auto;width:clamp(140px,16vw,196px);aspect-ratio:3/4;border-radius:14px;overflow:hidden;
  border:1px solid rgba(255,255,255,.14);box-shadow:0 18px 44px rgba(0,0,0,.55);background:var(--canvas-2)}
.hero-rail-card img{width:100%;height:100%;object-fit:cover;display:block}
@keyframes railScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (max-width:520px){.hero-rail-card{width:128px}.hero-rail-track{gap:12px}}

/* ===== sticky navbar (works now that html/body use overflow-x:clip) ===== */
.site-header{position:-webkit-sticky;position:sticky;top:0;z-index:60}

/* ===== price / card padding — keep numbers off the edge ===== */
.pick .pk-body{padding:14px 16px 18px}
.pick .pk-title{padding-right:6px}
.pick .pk-price{margin-top:8px}
.card .body{padding:20px 20px 22px}
.card .price{margin-top:14px}
.tier{padding:32px}

/* ===== button labels always centered ===== */
a.btn,button.btn{display:inline-flex;align-items:center;justify-content:center;text-align:center}

/* ===== ribbon always animates (owner request); rail respects reduced motion ===== */
.marquee-track{animation:scrollX 30s linear infinite!important}
@media (prefers-reduced-motion:reduce){.hero-rail-track{animation:none;transform:translateX(0)}}


/* ===== REAL bundle-pick padding fix: .pk-body is an inline <span>, so its
   padding never inset the title/price. Make it a block. ===== */
.pick .pk-body{display:block;padding:14px 16px 18px}
.pick .pk-title{padding-right:6px}
.pick .pk-price{display:block;margin-top:8px}

/* ===== hero headline descender clipping (background-clip:text cuts the 'y') ===== */
.hero h1{line-height:1.16;padding-bottom:.08em}


/* ================= HERO COVER CAROUSEL v2 (scrollable + arrows, uncropped) ===== */
.hero-rail{position:relative;z-index:2;max-width:1200px;margin:0 auto clamp(40px,6vw,72px);padding:0 8px;overflow:visible}
.hero-rail-viewport{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:6px 44px;scrollbar-width:none;-ms-overflow-style:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.hero-rail-viewport::-webkit-scrollbar{display:none}
.hero-rail-card{flex:0 0 auto;width:clamp(150px,15vw,188px);aspect-ratio:3/4;scroll-snap-align:center;
  border-radius:14px;overflow:hidden;border:1px solid var(--border-2);background:var(--canvas-2);
  box-shadow:0 14px 36px rgba(0,0,0,.5);transition:transform .2s,box-shadow .2s,border-color .2s;display:block}
.hero-rail-card:hover{transform:translateY(-5px);box-shadow:0 22px 50px rgba(0,0,0,.6);border-color:var(--primary)}
.hero-rail-card img{width:100%;height:100%;object-fit:contain;padding:8px;display:block}
.rail-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:46px;height:46px;border-radius:50%;
  border:1px solid var(--border-2);background:var(--card);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  color:var(--ink);font-size:1.6rem;line-height:1;cursor:pointer;display:grid;place-items:center;
  transition:border-color .2s,color .2s,transform .2s}
.rail-btn:hover{border-color:var(--primary);color:var(--primary);transform:translateY(-50%) scale(1.06)}
.rail-prev{left:0}.rail-next{right:0}
@media (max-width:640px){.rail-btn{display:none}.hero-rail-viewport{padding:6px 14px}.hero-rail-card{width:142px}}

/* ===== hero "coming soon" badge ===== */
.hero-soon{display:inline-flex;align-items:center;gap:.5em;margin-top:1.4em;font-size:.82rem;font-weight:650;
  letter-spacing:.02em;color:var(--primary);background:rgba(227,168,92,.10);border:1px solid rgba(227,168,92,.45);
  padding:.45em 1.05em;border-radius:999px;transition:background .2s,transform .2s}
.hero-soon:hover{background:rgba(227,168,92,.18);transform:translateY(-1px)}
.hero-soon-dot{width:7px;height:7px;border-radius:50%;background:var(--primary);box-shadow:0 0 8px var(--glow)}

/* ===== marketing copy bands ===== */
.copyband{max-width:760px;margin:0 auto;text-align:center}
.copyband .lead-line{font-family:var(--serif);font-size:clamp(1.3rem,2.6vw,1.8rem);color:var(--ink);line-height:1.35;margin:0 0 .7em}
.copyband p{font-size:1.05rem;color:var(--muted);line-height:1.8}
.cta-band{position:relative;text-align:center;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:clamp(40px,6vw,76px) 28px;overflow:hidden}
.cta-band::before{content:"";position:absolute;inset:0;background:var(--grad-soft);opacity:.55;pointer-events:none}
.cta-band>*{position:relative}


/* ===== "who it's for" use-case grid ===== */
.usecase-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.usecase{display:block;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:24px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:transform .18s,box-shadow .2s,border-color .2s}
.usecase:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--primary)}
.usecase .uc-emoji{font-size:1.7rem}
.usecase h3{font-family:var(--serif);font-size:1.12rem;margin:.5em 0 .3em;color:var(--ink)}
.usecase p{font-size:.92rem;color:var(--muted);margin:0 0 .8em;line-height:1.6}
.usecase .go{font-weight:650;color:var(--accent-text);font-size:.9rem}
@media (max-width:900px){.usecase-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){.usecase-grid{grid-template-columns:1fr}}


/* ===== STICKY NAV FIX: force overflow-x:clip (hidden was breaking sticky) ===== */
html,body{overflow-x:clip;overflow-y:visible}
.site-header{position:-webkit-sticky;position:sticky;top:0;z-index:60}

/* ===== MOBILE: nav becomes a horizontal carousel (no hamburger) ===== */
@media (max-width:680px){
  .nav{flex-wrap:wrap;height:auto;padding-top:8px;padding-bottom:6px;gap:8px}
  .hamburger{display:none!important}
  #mobileMenu{display:none!important}
  .nav-tools{margin-left:auto}
  .nav-tools .btn{display:none}            /* hide header CTA; nav has Shop */
  .nav-links{display:flex!important;order:3;flex-basis:100%;width:100%;flex-wrap:nowrap;overflow-x:auto;gap:4px;
    padding:2px 0;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 2%,#000 96%,transparent);
            mask-image:linear-gradient(90deg,transparent,#000 2%,#000 96%,transparent)}
  .nav-links::-webkit-scrollbar{display:none}
  .nav-links a{flex:0 0 auto;white-space:nowrap;font-size:.92rem;padding:.45em .8em}
}

/* ===== shop filters: dropdown on mobile, chips on desktop ===== */
.cat-select{display:none}
@media (max-width:680px){
  .filters{display:none}
  .toolbar{flex-direction:column;align-items:stretch;gap:10px}
  .count{margin-left:0;text-align:right}
  .cat-select{display:block;width:100%;font:inherit;font-size:1rem;font-weight:600;padding:.8em 1em;border-radius:12px;
    border:1px solid var(--border-2);background:var(--card);color:var(--ink);appearance:none;-webkit-appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23E3A85C' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 14px center}
}