/* SOCIUS restrained mobile usability pass */

@media(max-width:700px){
  :root{--header:64px}

  /* Header: keep the brand look, just make the controls easier to use. */
  .header{height:var(--header);padding:0 16px;mix-blend-mode:normal;background:rgba(244,241,235,.94);color:#111;backdrop-filter:blur(16px) saturate(1.08);border-bottom:1px solid rgba(0,0,0,.07)}
  .brand{font-size:21px;min-height:44px}
  .mobile{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border-radius:50%;font-size:22px}
  .header.mobile-open{background:#111;color:#f4f1eb}
  .header.mobile-open .nav{display:flex;position:fixed;left:0;right:0;top:var(--header);bottom:0;background:#111;padding:20px 18px calc(24px + env(safe-area-inset-bottom));flex-direction:column;align-items:stretch;gap:0;overflow:auto}
  .header.mobile-open .nav button{width:100%;min-height:54px;padding:14px 2px;border-bottom:1px solid rgba(255,255,255,.13);text-align:left;font-size:14px;letter-spacing:.08em}
  .header.mobile-open .nav .bag{border:1px solid rgba(255,255,255,.4);border-radius:999px;text-align:center;margin-top:18px}

  button,.pill,.pill-dark,.vote,.checkout{min-height:44px}

  /* Homepage: preserve the desktop composition, but scale it cleanly. */
  .preview-hero{padding:calc(var(--header) + 30px) 18px 30px!important;display:block!important;min-height:auto!important}
  .preview-hero-copy{max-width:none!important}
  .preview-hero-copy h1{font-size:clamp(52px,15vw,64px)!important;line-height:.9!important;letter-spacing:-.065em!important;max-width:8.5ch!important}
  .preview-hero-copy p{font-size:16px!important;line-height:1.5!important;max-width:330px!important;margin-top:20px!important}
  .preview-stage{height:330px!important;margin:24px auto 0!important;gap:8px!important;width:100%!important}
  .preview-bottle span{font-size:7px!important;letter-spacing:.1em!important}
  .preview-ghost{display:none!important}

  .preview-system,.visual-editorial,.preview-proof,.visual-community,.simple,.build{padding-left:18px!important;padding-right:18px!important}
  .preview-system,.visual-editorial,.visual-world,.visual-community{padding-top:72px!important;padding-bottom:74px!important}
  .preview-system-head,.preview-editorial-head,.visual-world-head,.preview-community-head{display:block!important}
  .preview-system-head h2,.preview-editorial-head h2,.visual-world-head h2,.preview-community-head h2{font-size:clamp(44px,12vw,54px)!important;line-height:.94!important}
  .preview-system-head p,.preview-editorial-head p,.preview-community-head p{font-size:16px!important;line-height:1.55!important;margin-top:18px!important}

  /* Keep Base 3 concise instead of turning the rows into cards. */
  .visual-rows button{grid-template-columns:34px 1fr 24px!important;gap:10px!important;padding:18px 0!important}
  .visual-rows button span{display:none!important}
  .visual-rows button strong{font-size:29px!important}
  .visual-rows button em{font-size:19px!important}

  /* Campaign cards: one strong card at a time reads better on phones. */
  .campaign-mosaic{display:grid!important;grid-template-columns:1fr!important;grid-template-rows:none!important;gap:9px!important;min-height:0!important}
  .campaign-mosaic .campaign-shot{grid-column:auto!important;grid-row:auto!important;height:360px!important;min-height:0!important;border-radius:20px!important}
  .campaign-mosaic .campaign-shot img{max-width:100%!important}
  .campaign-mosaic .campaign-shower img{width:62%!important;height:84%!important;margin:8% auto 0!important}
  .campaign-mosaic .campaign-am img{width:64%!important;height:80%!important;margin:10% auto 0!important}
  .campaign-mosaic .campaign-pm img{width:68%!important;height:82%!important;margin:9% auto 0!important}

  .visual-world{padding-left:18px!important;padding-right:18px!important}
  .visual-world-grid{grid-template-columns:1fr!important;gap:10px!important}
  .visual-world-card{min-height:330px!important;border-radius:22px!important}

  /* Build With Us */
  .build{padding-top:calc(var(--header) + 34px)!important}
  .build .page-title{font-size:clamp(52px,14vw,64px)!important;line-height:.91!important}
  .build-intro{display:block!important}
  .build-actions{justify-content:flex-start!important;margin-top:22px!important;gap:8px!important}
  .build-actions button{min-height:46px!important}
  .build-stage,.visual-community .cloud{height:430px!important;margin-top:26px!important;border-radius:22px!important;overflow:hidden!important}
  .request-row{grid-template-columns:minmax(0,1fr) auto!important;gap:12px!important;padding:15px 0!important}
  .request-row .votes,.request-row .status{display:none!important}

  /* Product page */
  .product-detail{display:block!important}
  .product-visual{min-height:56vh!important;padding:calc(var(--header) + 10px) 18px 22px!important}
  .product-visual img{height:min(51vh,510px)!important;width:min(80%,430px)!important;transform:none!important}
  .product-copy{padding:42px 18px 72px!important;border-left:0!important}
  .product-copy h1{font-size:clamp(60px,18vw,76px)!important}
  .product-copy .lede{font-size:18px!important;line-height:1.5!important}
  .product-copy .addrow{position:static!important;grid-template-columns:1fr 76px!important;padding:9px!important;border-radius:18px!important}
  .review-strip{grid-template-columns:1fr!important;overflow:visible!important}

  /* Modals/forms: bottom sheets are easier to reach on a phone. */
  .modal,.account-modal{left:0!important;right:0!important;top:auto!important;bottom:0!important;transform:none!important;width:100%!important;max-height:88dvh!important;overflow:auto!important;border-radius:24px 24px 0 0!important;padding:22px 18px calc(22px + env(safe-area-inset-bottom))!important}
  .drawer{width:100%!important;padding:22px 18px calc(22px + env(safe-area-inset-bottom))!important}
  .modal input,.modal textarea,.newsletter-card input{font-size:16px!important;min-height:50px!important}
  .modal-actions{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
  .modal-actions button{width:100%!important}
  .modal-actions .pill{order:2}

  #newsletterOverlay.open{align-items:end!important;padding:0!important}
  #newsletterOverlay .newsletter-card{width:100%!important;max-width:none!important;border-radius:24px 24px 0 0!important;padding:26px 18px calc(24px + env(safe-area-inset-bottom))!important}
  .newsletter-form{grid-template-columns:1fr!important}

  /* IMPORTANT: hidden by default; only .show makes it visible. */
  .cookie-bar{left:10px!important;right:10px!important;bottom:10px!important;width:auto!important;padding:14px!important;border-radius:18px!important;display:none!important}
  .cookie-bar.show{display:flex!important;align-items:flex-start!important;flex-direction:column!important;gap:12px!important}
  .cookie-bar>div:first-child{display:flex!important;flex-direction:column!important;gap:4px!important}
  .cookie-actions{width:100%!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}
  .cookie-actions button{width:100%!important;min-height:44px!important}

  .site-footer{padding-left:18px!important;padding-right:18px!important}
  .footer-links{grid-template-columns:1fr 1fr!important;gap:30px 20px!important}
  .footer-links>div:last-child{grid-column:1/3!important}
  .footer-bottom{flex-direction:column!important;gap:8px!important}
}

@media(max-width:390px){
  .preview-stage{height:300px!important}
  .campaign-mosaic .campaign-shot{height:320px!important}
  .build-stage,.visual-community .cloud{height:400px!important}
}