/* ===========================================================================
   DEESTECH AUDIO — shared MOBILE authority layer.
   Loaded LAST in <head> on every audio page (after each page's own inline
   <style> and after deestech.css), so at phone widths these rules win the
   cascade. The marketing pages were authored desktop-first; this layer gives
   them a real phone build instead of a shrunk desktop: comfortable gutters,
   a sane type ceiling, tidy stat/spec strips, single-column bands, and
   full-width tap targets. It is deliberately conservative on pages that are
   already fine (the home page) and only reshapes what crowds a 375px screen.
   Breakpoints: 600px = phones/large phones, 400px = small phones.
   =========================================================================== */

@media (max-width:600px){

  /* ---- no sideways scroll, ever ---- */
  html,body{max-width:100%;overflow-x:hidden}

  /* ---- comfortable, consistent gutters ---- */
  .wrap{padding-left:20px;padding-right:20px}

  /* ---- hero: pull the first screen in, keep the headline from dominating -- */
  .hero{padding-top:40px!important;padding-bottom:26px!important}
  .hero h1{font-size:clamp(32px,8.6vw,40px)!important;line-height:1.05!important;
    max-width:none!important}
  .hero .sub,.hero .lede{font-size:16.5px!important;line-height:1.45!important;
    max-width:none!important}
  .hero .kick,.hero .eyebrow{margin-bottom:12px!important}

  /* ---- CTAs: stack as full-width, finger-sized buttons ---- */
  .hero .acts,.acts,.heroactions,.strip .acts,.cta{
    flex-direction:column!important;align-items:stretch!important;
    gap:12px!important;width:100%}
  .hero .acts .btn,.acts .btn,.heroactions .btn,.strip .acts .btn,.cta .btn{
    width:100%!important;justify-content:center!important;
    padding-top:15px!important;padding-bottom:15px!important}
  /* inline "Browse everything ›" style links stay centered, not full-width */
  .hero .acts .link,.acts .link,.strip .acts .link{
    width:auto!important;justify-content:center!important;text-align:center}

  /* ---- stat / metric strips (suite + studio-series heroes) ---- */
  .herostats{display:grid!important;grid-template-columns:repeat(3,auto);
    justify-content:start;gap:16px 22px!important;margin-top:24px!important}
  .herostats .s b{font-size:19px!important;line-height:1.1}
  .freeline{flex-wrap:wrap}

  /* ---- the 4-up spec rail (home + plugins): 2x2, no awkward borders ---- */
  .specs{grid-template-columns:1fr 1fr!important}
  .specs .s{padding:20px 14px!important}
  .specs .s:nth-child(odd){border-left:0!important}

  /* ---- every multi-column band collapses to one column ---- */
  .appgrid,.grid,.trio,.features,.steps,.fgrid,.apps,
  .bundle-mosaic,.bundle-inner,.hero-grid,.feat-card,
  .suite .wrap,.store{grid-template-columns:1fr!important}

  /* two-column "media + text" rows: let the copy lead, art follows */
  .hero-grid{gap:28px!important}

  /* ---- section rhythm: trim the biggest desktop paddings ---- */
  .apps,.market,.suiteband,.strip,.suite,.sec,.band,
  section.market,section.strip{
    padding-top:52px!important;padding-bottom:52px!important}

  /* section headings scale down with the hero */
  .shead h2,.suiteband .head h2,.strip h2,.sec-head h2{
    font-size:clamp(24px,6.8vw,30px)!important;max-width:none!important}
  .shead p,.suiteband .head p,.strip p{font-size:16px!important;max-width:none!important}

  /* ---- cards breathe a little less on a narrow screen ---- */
  .acard{padding:22px 20px!important}

  /* ---- footer: left-align the stack instead of a cramped space-between -- */
  footer.site .row{flex-direction:column;align-items:flex-start!important;gap:14px}
  footer.site .flinks{gap:14px 18px}
}

@media (max-width:400px){
  .wrap{padding-left:16px;padding-right:16px}
  .hero h1{font-size:30px!important}
  /* on the smallest phones the 3-up stat row would crowd — go 1 line each */
  .herostats{grid-template-columns:repeat(3,1fr)!important;gap:14px 10px!important}
  .herostats .s b{font-size:17px!important}
  .herostats .s span{font-size:9.5px!important}
}