/* Mobile composition and touch feedback, after shared visual layers. */
@media(max-width:680px){
  html{scroll-padding-top:24px}
  body,body.order-selected{padding-bottom:calc(118px + env(safe-area-inset-bottom));transition:none}
  .wrap{width:calc(100% - 32px)}
  .header{height:78px}
  .hero{padding:24px 4px 34px}
  .hero h1{font-size:clamp(34px,9.4vw,44px);line-height:1.55;max-width:100%}
  .hero-copy>p{max-width:30ch;line-height:1.95}
  .hero-art{width:190px;left:-3px;top:20px;opacity:.24}
  .hero-art img{animation:nerd-emblem-arrive .8s ease-out both;filter:url(#nerd-cutout)}
  .hero-actions{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px}
  .hero-actions .button{justify-content:space-between;min-height:54px;padding:12px 18px}
  #plans{padding-top:26px}
  #plans>.section-top{margin-bottom:18px}
  #plans .selector{padding:15px;border-radius:26px;background:linear-gradient(150deg,#fff,#fff8f9);box-shadow:inset 0 1px 0 #fff,0 12px 32px #6505000a}
  #plans .tabs{margin-bottom:22px;border-radius:17px}
  #plans .tabs:before{transition:transform .32s cubic-bezier(.22,1,.36,1)}
  #plans .tabs button{min-height:48px;font-size:14px}
  #plans .months{gap:7px}
  #plans .months button{min-height:46px;border-radius:13px}
  #plans .volumes{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  #plans .volume{min-height:110px;padding:17px 10px 12px;border-radius:18px;transition:transform .2s cubic-bezier(.22,1,.36,1),border-color .22s ease,box-shadow .22s ease}
  #plans .volume strong{font-size:30px;letter-spacing:-.7px}
  #plans .volume small{font-size:12px}
  #plans .volume .amount{margin-top:12px;padding-top:9px;font-size:16px}
  #plans .volume.selected{box-shadow:inset 0 1px 0 #ffffff50,0 6px 16px #65050025}
  #plans .volume.selected:after{top:9px;left:10px;font-size:13px}
  #plans .label-row output{min-width:80px;text-align:center;font-size:16px}
  #plans input[type=range]{height:48px}
  #plans .range-stepper{gap:10px;margin-top:4px}
  #plans .range-stepper button{min-height:48px;min-width:0;border-radius:14px}
  #plans .mobile-order{left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));border:1px solid #65050020;border-top-color:#fff;border-radius:22px;padding:12px;gap:10px;background:#fffafbf5;box-shadow:0 8px 28px #42001420,inset 0 1px 0 #fff;-webkit-backdrop-filter:none;backdrop-filter:none;transition:transform .38s cubic-bezier(.22,1,.36,1),opacity .25s ease,visibility .38s}
  #plans .mobile-order strong{font-size:18px}
  #plans .mobile-order>div>span{font-size:12px;margin-bottom:3px}
  #plans .mobile-order .buy{min-height:50px;padding:12px 15px;border-radius:15px;gap:10px;font-size:14px}
  .steps article{padding:13px 7px;background:#fff9fa;box-shadow:none}
  .questions details{box-shadow:none;border-radius:16px}
  .questions summary{min-height:54px}
  .closing .contact-links .button{min-height:52px;border-radius:14px}
}
@media(max-width:360px){
  .wrap{width:calc(100% - 24px)}
  #plans .selector{padding:12px}
  .hero-actions{gap:10px}
  #plans .mobile-order{left:8px;right:8px;padding:10px;gap:8px}
  #plans .mobile-order strong{font-size:16px}
  #plans .mobile-order .buy{padding-inline:12px;font-size:13px}
}
@media(hover:none){
  a,button,summary{-webkit-tap-highlight-color:transparent}
  #plans .volume:active,#plans .range-stepper button:not(:disabled):active,.button:active,#plans .buy:active{transform:scale(.975)}
}
@media(prefers-reduced-motion:reduce){
  #plans .mobile-order,#plans .volume,#plans .tabs:before{transition:none}
  .hero-art img{animation:none}
}