/* AWMZA — phase3 pages on a phone. Additive only, 30 Aug 2026.
   The phase3 layout was written for a desktop: the nav wrapped into four
   rows on a phone and pushed the headline off the screen. Here the nav
   becomes one swipeable strip, the header stays reachable, and every tap
   target is at least 44px. Nothing desktop sees changes. */
@media (max-width:820px){
  html{-webkit-text-size-adjust:100%}
  body{overflow-x:clip}
  .wrap{width:min(1080px,calc(100% - 28px))}

  .site-header{position:sticky;top:0;z-index:900;background:rgba(245,242,233,.94);
    backdrop-filter:saturate(1.4) blur(8px);flex-wrap:nowrap;gap:10px;
    padding:12px 0 10px;margin:0 -14px;padding-left:14px;padding-right:14px;
    border-bottom:1px solid var(--line)}
  .brand{font-size:1.2rem;flex:0 0 auto}
  .brand b{width:23px;height:23px;border-radius:7px}

  .nav{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;gap:4px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    mask-image:linear-gradient(90deg,#000 88%,transparent);
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .nav::-webkit-scrollbar{display:none}
  .nav a{flex:0 0 auto;white-space:nowrap;font-size:.86rem;padding:9px 11px}

  .hero{padding:34px 0 30px}
  .hero h1{font-size:clamp(2rem,9vw,3rem);line-height:1.06;margin:14px 0}
  .hero p{font-size:1.03rem}
  .btn{padding:14px 18px;min-height:46px;display:inline-flex;align-items:center;justify-content:center}
  .hero .btn{width:100%;margin:0 0 10px}
  .btn.ghost{margin-left:0}

  .section{padding:32px 0}
  .card{padding:20px}
  .cta{padding:24px}
  .panel,.quote{padding:24px}
  table{font-size:.88rem}
  .scroll,.section table{-webkit-overflow-scrolling:touch}

  /* the floating home button must never sit on top of a CTA */
  .footer{padding-bottom:calc(78px + env(safe-area-inset-bottom))}
}
@media (max-width:420px){
  .nav a{font-size:.82rem;padding:8px 9px}
  .hero h1{font-size:clamp(1.8rem,9.4vw,2.5rem)}
}