/* ============================================================
   MOBILE / RESPONSIVE STYLES
   Everything here is wrapped in @media — opens in the browser
   identically with or without this file, just degrades to desktop.
   Edit this file when you want to change only the mobile look.
   ============================================================ */

/* ---------- TABLET (≤1024px) ---------- */
@media (max-width: 1024px){
  .hero-grid, .product-grid, .story-block, .faq-grid{grid-template-columns:1fr; gap:50px}
  .story-block.reverse{direction:ltr}
  .hero-visual{height:480px}
  .stats-inner, .steps, .reviews-grid, .why-grid, .feature-grid{grid-template-columns:repeat(2,1fr); gap:24px}
  .shop-grid, .members-grid{grid-template-columns:1fr; max-width:520px}
  .stat{border-left:none; padding-left:0}
  .foot-grid{grid-template-columns:1fr; gap:32px}

  .ag-hero-grid, .ag-about-grid, .ag-value-grid, .ag-cta-grid, .ag-prod-grid{grid-template-columns:1fr; gap:50px}
  .ag-value-grid.reverse{direction:ltr}
  .ag-svc-grid, .ag-counter-grid, .ag-testi-grid, .ag-proc-grid, .ag-shop-grid, .ag-price-grid{grid-template-columns:repeat(2, 1fr); gap:24px}
  .ag-shop-grid, .ag-price-grid{max-width:560px}
  .ag-counter-item{border-right:none; border-bottom:1px solid rgba(243,236,217,.15); padding-bottom:24px}
  .ag-counter-item:nth-child(3), .ag-counter-item:nth-child(4){border-bottom:none; padding-bottom:0}
  .ag-foot-grid{grid-template-columns:1fr 1fr; gap:32px}
  .ag-hero-floater-1, .ag-hero-floater-2{display:none}
  .ag-about-badge{display:none}
}

/* ---------- MOBILE (≤720px) ---------- */
@media (max-width: 720px){
  /* General mobile layout */
  .container{padding:0 20px}
  .nav-links{display:none}
  .menu-toggle{display:grid}
  .hero{padding:50px 0 70px}
  .hero h1{font-size:60px}
  .features-row{gap:16px}
  .feature-pill{max-width:none}
  .stats-inner, .steps, .reviews-grid, .why-grid, .feature-grid, .foot-grid{grid-template-columns:1fr}
  .hero-ctas{flex-direction:column; align-items:stretch}
  .btn{justify-content:center}
  .seal{width:100px;height:100px}
  .product-display .seal{top:14px;right:14px}
  .hero-visual{height:440px}
  .product-box{width:65%; left:3%}
  .roll-stack{width:42%}
  .price-tag .amount{font-size:60px}

  /* NAV — hamburger LEFT, logo CENTERED, actions RIGHT */
  .ag-nav-inner{position:relative; min-height:50px}
  .ag-menu-toggle{
    display:inline-flex;
    position:absolute;
    left:0; top:50%;
    transform:translateY(-50%);
    z-index:2;
  }
  .ag-logo{
    position:absolute;
    left:50%; top:50%;
    transform:translate(-50%, -50%);
    margin:0;
  }
  .ag-nav-actions{margin-left:auto}
  .ag-nav-actions .ag-nav-cta{display:none}

  /* DRAWER — slides in from the LEFT now (matches the hamburger side) */
  .ag-nav-links{
    display:flex; flex-direction:column;
    position:fixed;
    top:0; left:0; bottom:0; right:auto;
    width:min(320px, 80vw);
    background:var(--cream);
    padding:80px 32px 32px;
    gap:8px;
    z-index:101;
    transform:translateX(-100%);
    transition:transform .35s var(--ease);
    box-shadow:20px 0 60px -20px rgba(20,40,29,.4);
    overflow-y:auto;
  }
  .ag-nav-links.open{transform:translateX(0)}
  .ag-nav-links a{
    font-size:18px; padding:14px 0;
    border-bottom:1px solid var(--line);
    color:var(--green); font-weight:600;
  }
  .ag-nav-links a::after{display:none}
  .ag-nav-links a:hover, .ag-nav-links a.active{color:var(--green-card)}

  /* OVERLAY — dim background when drawer is open */
  .ag-nav-overlay{
    position:fixed; inset:0;
    background:rgba(20,40,29,.45);
    z-index:99;
    opacity:0; pointer-events:none;
    transition:opacity .3s;
  }
  .ag-nav-overlay.open{opacity:1; pointer-events:all}

  /* Grid collapses */
  .ag-svc-grid, .ag-counter-grid, .ag-testi-grid, .ag-proc-grid, .ag-foot-grid, .ag-shop-grid, .ag-price-grid{grid-template-columns:1fr}
  .ag-prod-feats{grid-template-columns:repeat(2, 1fr)}
  .ag-prod-price .amount{font-size:48px}

  /* Legal / policy pages */
  .ag-legal-grid{grid-template-columns:1fr; gap:30px}
  .ag-legal-aside{position:static}
  .ag-legal-aside ul{flex-direction:row; flex-wrap:wrap; gap:6px}
  .ag-legal-aside a{padding:8px 12px; font-size:13px; border-left:none; border:1px solid var(--line); border-radius:999px}
  .ag-legal-aside a.active{border-color:var(--green); background:var(--green); color:var(--cream)}
  .ag-legal-content{padding:30px 24px}
  .ag-legal-content h2{font-size:22px}

  /* Topbar */
  .ag-topbar-info{font-size:11px; gap:14px}
  .ag-topbar-info span{flex-direction:row}
  .ag-topbar-inner{justify-content:center; text-align:center}

  /* Counter strip on mobile */
  .ag-counter-item{border-right:none; border-bottom:1px solid rgba(243,236,217,.15); padding-bottom:24px}
  .ag-counter-item:last-child{border-bottom:none; padding-bottom:0}
  .ag-counter-num{font-size:48px}

  /* Hero adjustments */
  .ag-hero{padding:50px 0 70px}
  .ag-hero-ctas{flex-direction:column; align-items:stretch}
  .ag-btn{justify-content:center}

  /* Tighten vertical breathing room between sections on mobile */
  .ag-about,
  .ag-services,
  .ag-value,
  .ag-testi,
  .ag-process,
  .ag-shop-section,
  .ag-price-section,
  .ag-prod,
  .ag-faq,
  .ag-legal{padding:60px 0}

  /* Reviews: visually distinct cards on mobile */
  .ag-testi-grid{gap:14px}
  .ag-testi-card{
    background:var(--cream);
    border:1px solid var(--line);
    padding:24px 22px;
  }
  .ag-testi-card::before{font-size:60px; top:10px; right:18px}
  .ag-testi-stars{margin-bottom:12px}
  .ag-testi-text{margin-bottom:16px; font-size:14px; line-height:1.6}
  .ag-testi-author{padding-top:14px}
  .ag-testi-avatar{width:42px; height:42px; font-size:18px}
  /* Belt-and-suspenders: reveal animation should never leave a review hidden */
  .ag-testi-card.reveal{opacity:1; transform:none}

  /* Section heads: less bottom margin on mobile */
  .ag-sec-head{margin-bottom:36px}
  .ag-sec-head.left{margin-bottom:28px}

  /* Page head a bit tighter */
  .ag-page-head{padding:50px 0 40px}

  /* CTA strip */
  .ag-cta{padding:60px 0}
}