/* ==============================================================
   MOBILE PREMIUM TUNING
   Loaded last on every page. Only touches small screens.
   Goal: smaller/tighter type & cards, larger/bolder imagery,
   more breathing room — without altering desktop styles or
   any page-specific CSS files directly.
   ============================================================== */

@media (max-width: 640px){

  /* ---------- Base rhythm ---------- */
  section{ padding-top:56px !important; padding-bottom:56px !important; }
  .container, .wrap{ padding-left:18px; padding-right:18px; }

  /* ---------- Typography: dial everything down a notch ---------- */
  h1{ font-size:clamp(26px,7vw,34px) !important; line-height:1.15 !important; letter-spacing:-0.3px !important; }
  h2{ font-size:clamp(21px,5.6vw,26px) !important; line-height:1.2 !important; }
  h3{ font-size:clamp(16px,4.6vw,19px) !important; line-height:1.3 !important; }
  h4{ font-size:15px !important; }

  p{ font-size:14.5px !important; line-height:1.65 !important; }

  .eyebrow, .section-tag, .kicker{
    font-size:11px !important;
    letter-spacing:1px !important;
  }

  .btn, a.btn, button.btn{
    font-size:13.5px !important;
    padding:12px 20px !important;
  }

  /* ---------- Cards: shrink padding, keep readable ---------- */
  .card, .vert-card, .why-card, .highlight-box, .test-card,
  .tier-card, .fr-why-card, .market-card, .ap-cat-card,
  .pr-card, .so-card, .ev-card, [class*="-card"]{
    padding:18px !important;
    border-radius:14px !important;
  }

  .card h3, [class*="-card"] h3{ font-size:16px !important; margin-bottom:6px !important; }
  .card p, [class*="-card"] p{ font-size:13.5px !important; }

  .vert-icon, .why-icon, [class*="-icon"]{
    width:44px !important; height:44px !important; font-size:18px !important;
  }

  /* Stat / number blocks */
  .hero-stats strong, .stat strong, [class*="stat"] strong{ font-size:22px !important; }
  .hero-stats span, .stat span{ font-size:11.5px !important; }
  .hero-stats div{ min-width:auto !important; padding:14px 16px !important; }

  /* ---------- Images: bigger, bolder on mobile ---------- */
  .hero-image{
    position:relative !important;
    width:100% !important;
    right:auto !important;
    top:auto !important;
    transform:none !important;
    margin:22px 0 28px !important;
  }
  .hero-image img{
    filter:drop-shadow(0 18px 34px rgba(0,0,0,.35)) !important;
  }

  .vert-thumb, .why-visual, .benefits-visual,
  .about-visual, .gallery-item, .pr-photo, [class*="-thumb"], [class*="-visual"],
  .card img, [class*="-card"] img{
    border-radius:16px !important;
  }

  img{ max-width:100% !important; }

  /* Product/category photo blocks get extra room to breathe & feel premium */
  .ap-cat-card img, .pr-card img, .so-card img, .ev-card img,
  .products-grid img, .gallery-grid img{
    width:100% !important;
    aspect-ratio:1/1 !important;
    object-fit:contain !important;
    padding:10px !important;
  }

  /* ---------- Grids: single column, tighter gaps ---------- */
  .trust-grid, .why-highlights, .vert-grid, .test-grid,
  .tier-grid, .fr-why-grid, .market-grid, .ap-cat-card-grid,
  .ap-feature-grid, [class*="-grid"]{
    grid-template-columns:1fr !important;
    gap:16px !important;
  }

  /* ---------- Nav / header tightened ---------- */
  .logo, .brand{ font-size:18px !important; }

  /* ---------- CTA band ---------- */
  .cta-band h2, .cta h2{ font-size:22px !important; }
}

@media (max-width: 400px){
  h1{ font-size:24px !important; }
  h2{ font-size:20px !important; }
  .btn, a.btn, button.btn{ padding:11px 18px !important; font-size:13px !important; }
}

/* =========================================
   MOBILE PRODUCT HERO SPACING
========================================= */

@media (max-width: 899px) {

  .so-hero,
  .ev-hero,
  .ap-hero {
    padding-top: 150px;
  }

}

@media (max-width: 899px) {

  .so-breadcrumb {
    margin-top: 10px;
  }

}