/* Phone layout: retain the desktop composition above 899px. */
@media(max-width:899px){
  html{scroll-padding-top:88px}
  .lights-grid>*,.check-grid>*,.price-grid>*,.a-grid>*,.founder-copy>*{min-width:0}
  .stepper{height:52px;padding:4px}
  .stepper button{width:44px;height:44px}
  .prow-price small{white-space:normal;max-width:100%;line-height:1.4}
  .prow>p,.prow>ul{grid-column:1/-1}
  .reel-btn,.film-toggle{min-height:44px}
  .field input,.field select{font-size:18px}
  .clarity-player,.past-cover .clarity-player{position:relative;left:auto;bottom:auto;z-index:1;width:max-content;max-width:calc(100% - 40px);margin:0 auto;padding:24px 0 104px;opacity:1;visibility:visible}
  .past-cover .clarity-player:not(:has(.is-playing)){opacity:1;visibility:visible}
  .clarity-player .clarity-toggle{width:202px;gap:10px;padding-right:15px}
  .clarity-player .clarity-copy{max-width:135px;opacity:1;transform:none}
  .clarity-dialog-close{width:44px;height:44px}
  .clarity-dialog{max-height:calc(100dvh - 32px);overflow:auto}
  .sticky-cta{bottom:max(14px,env(safe-area-inset-bottom))}
  .nav{max-width:calc(100% - 24px)}
  .roles{gap:8px}
  .roles label{min-height:48px;height:auto;padding-top:10px;padding-bottom:10px}
}
@media(max-width:420px){
  .offer h1{font-size:clamp(36px,10.7vw,44px);letter-spacing:-.045em}
  .offer-stats>div{padding-right:10px;margin-right:10px}
  .offer-stats dd{font-size:15px}
  .hs-chip{gap:5px;font-size:11px;padding:9px 10px}
  .hs-chip b{font-size:16px;margin-left:3px}
  .hs-chip span{margin-left:4px;padding-left:6px}
  .check-form .btn{width:100%}
}
@media(max-width:899px) and (hover:none){
  .price-fx i{animation:none}
}