@media (max-width:720px){
  :root{--header-offset:calc(78px + env(safe-area-inset-top))}

  .site-header{
    min-height:calc(70px + env(safe-area-inset-top));
    padding-top:calc(10px + env(safe-area-inset-top));
    padding-bottom:10px;
    padding-left:max(16px,env(safe-area-inset-left));
    padding-right:max(16px,env(safe-area-inset-right));
  }

  .button-small{
    min-height:44px;
    padding:9px 12px;
    font-size:.72rem;
  }

  .section-shell{
    padding-top:56px;
    padding-bottom:56px;
    padding-left:max(20px,env(safe-area-inset-left));
    padding-right:max(20px,env(safe-area-inset-right));
  }

  .eyebrow{font-size:.74rem;letter-spacing:.16em}
  .hero-actions p{font-size:.8rem}
  .visual-kicker{font-size:.72rem;letter-spacing:.16em}
  .visual-caption{font-size:.72rem;letter-spacing:.06em;line-height:1.45}

  .section-intro h2,
  .supplier h2,
  .preorder h2{
    font-size:clamp(2.25rem,10.5vw,3.15rem);
    line-height:.98;
  }

  .box-visual{min-height:158px}
  .box-visual img{width:40%}
  .box-visual>span{left:18px;top:14px;font-size:1.7rem}
  .box-copy{min-height:0;padding:20px}
  .box-meta{font-size:.74rem;letter-spacing:.11em}
  .box-card h3{margin-top:18px;font-size:2.18rem}
  .box-card p{font-size:.92rem}
  .text-action{min-height:54px;margin-top:24px;font-size:.82rem}

  .supplier-image{min-height:220px;padding:20px}
  .supplier-image img{width:48%}
  .supplier-image span{font-size:.72rem;letter-spacing:.12em}
  .supplier small{font-size:.78rem;line-height:1.55}

  .preorder-form label{font-size:.76rem;letter-spacing:.09em}
  .form-note,.form-status{font-size:.79rem;line-height:1.5}

  footer{
    padding-top:24px;
    padding-bottom:calc(24px + env(safe-area-inset-bottom));
    padding-left:max(20px,env(safe-area-inset-left));
    padding-right:max(20px,env(safe-area-inset-right));
    font-size:.78rem;
  }

  footer>a{
    display:inline-flex;
    align-items:center;
    justify-content:flex-start;
    min-height:44px;
    text-align:left;
  }
}

@media (max-width:360px){
  .site-header{
    padding-left:max(12px,env(safe-area-inset-left));
    padding-right:max(12px,env(safe-area-inset-right));
  }

  .hero h1{font-size:2.68rem}
  .section-intro h2,
  .supplier h2,
  .preorder h2{font-size:2.15rem}
  .supplier-note{font-size:1.7rem}
}