@media (max-width:700px){
  .wrap{padding:0 22px}
  header{height:76px}
  .logo{font-size:25px;gap:7px}
  .logo svg{width:28px;height:28px}
  header .button{padding:11px 12px;border-radius:9px;font-size:11px}
  .hero-copy{text-align:center;padding:34px 0 0}
  .eyebrow{font-size:8px;letter-spacing:.75px}
  .hero h1{font-size:clamp(42px,12vw,58px);line-height:1.02;margin:22px 0;letter-spacing:-.06em}
  .underline:after{height:8px;bottom:2px}
  .hero-copy p{font-size:14px;line-height:1.65;max-width:330px;margin:20px auto 23px;text-wrap:pretty}
  .hero-copy .button{width:100%;max-width:320px;min-height:54px;padding:15px 18px;justify-content:space-between}
  .hero-note{font-size:9px;line-height:1.6;margin-top:15px}
  .stage{height:480px;margin:18px 0 0;transform:none;width:100%;perspective:1100px}
  .orbit{width:390px;height:570px;left:50%;transform:translateX(-50%) scale(.78) rotateY(var(--scroll-y,0deg)) rotateX(var(--scroll-x,0deg))!important;transform-origin:center 230px;will-change:transform}
  .stage:before{width:300px;height:300px;left:50%;top:88px;transform:translateX(-50%)}
  .stage:after{width:260px;left:50%;transform:translateX(-50%);bottom:24px;height:45px;filter:blur(15px)}
  .phone{top:50px;left:calc(50% - 112px);width:230px}
  .word{left:8px;top:157px;width:158px;padding:14px}
  .word h3{font-size:22px}
  .tag{top:22px;right:15px;font-size:9px;padding:13px 16px}
  .stage .mascot{width:235px;right:-8px;bottom:98px}
  .stage .bubble{right:18px;bottom:60px;font-size:11px;padding:12px 14px;white-space:nowrap}
  .corner-star{left:4px;bottom:58px;font-size:36px}
  .hero-bottom{padding:14px 0 20px;font-size:7px;line-height:1.6;gap:12px}
  .ribbon{padding:14px 0}
  .ribbon-inner{font-size:19px;gap:23px}
  .section{padding:56px 0}
  .section-head{margin-bottom:28px}
  h2{font-size:clamp(32px,8.8vw,43px);line-height:1.08;letter-spacing:-.045em;margin-top:15px;text-wrap:balance}
  .section-head p{font-size:14px;line-height:1.7;margin-top:18px;max-width:none}
  .features{gap:22px}
  .feature{border-radius:16px;box-shadow:3px 4px 0 var(--ink)}
  .feature-visual{height:205px}
  .feature-body{padding:23px}
  .feature-body h3{font-size:25px;line-height:1.12;letter-spacing:-1px}
  .feature-body p{font-size:13px;line-height:1.7}
  .demo-section,.faq{gap:26px}
  .quiz{transform:none;padding:22px;border-radius:16px;box-shadow:4px 5px 0 var(--ink)}
  .quiz h3{font-size:27px;line-height:1.15}
  .quiz button{min-height:52px;font-size:14px}
  .story{border-radius:16px;overflow:hidden}
  .story>img{height:205px;width:100%;object-fit:cover;object-position:center}
  .story-text{padding:23px}
  .story-text h3{font-size:28px;line-height:1.1}
  .story-text p{font-size:13px;line-height:1.75}
  .faq summary{font-size:14px;line-height:1.5;padding:20px 0;gap:18px;min-height:64px}
  .faq details p{font-size:13px;line-height:1.75}
  .end{padding-top:48px}
  .end-top{gap:38px}
  .end-top h2{font-size:clamp(36px,10vw,45px)}
  .end p{font-size:14px;line-height:1.7;margin:22px 0}
  .end .button{min-height:52px}
  .booster-scene{height:420px;max-width:340px}
  .booster-halo{width:270px;height:270px}
  .booster-scene .collection-caption{bottom:0;line-height:1.6;padding:0 15px}
  .booster-progress{top:-8px}
  .end .huge{margin:35px 0 -5px;font-size:17vw}
  footer{padding:24px 22px;gap:20px;display:flex;flex-direction:column;align-items:flex-start;font-size:9px}
  footer .footer-links{display:grid;grid-template-columns:1fr 1fr;gap:15px 20px;font-size:11px;line-height:1.5;width:100%}
}
@media(max-width:360px){
  .wrap{padding:0 18px}
  .logo{font-size:22px;gap:5px}
  .logo svg{width:24px;height:24px}
  header .button{font-size:10px;padding:10px;gap:9px;white-space:nowrap}
  .hero h1{font-size:42px}
  .stage{height:445px}
  .orbit{transform:translateX(-50%) scale(.71) rotateY(var(--scroll-y,0deg)) rotateX(var(--scroll-x,0deg))!important}
  .feature-visual{height:190px}
}
@media(max-width:700px) and (hover:none){
  .booster-scene .booster-fan,.booster-scene:hover .booster-fan{transform:rotateY(var(--scroll-y,0deg)) rotateX(var(--scroll-x,0deg));transition:transform .12s ease-out}
  .booster-scene.is-opening .booster-fan,.booster-scene.is-open .booster-fan{transform:none}
  .booster-scene:hover .card-left{transform:translateX(-80px) rotate(-24deg)}
  .booster-scene:hover .card-right{transform:translateX(85px) rotate(20deg)}
}
@media(prefers-reduced-motion:reduce){.orbit,.booster-fan{will-change:auto}}
/* Shared spacing for the four numbered mobile sections. */
@media(max-width:700px){
  .section{padding:48px 0}
  .section-head .mono,.demo-copy>.mono,.faq>div:first-child>.mono{display:block;line-height:1.5}
  .section-head h2,.demo-copy h2,.faq h2{margin:16px 0 0;line-height:1.08}
  .section-head p,.demo-copy>p{margin:20px 0 0;line-height:1.7}
  .section-head{margin-bottom:28px}
  .demo-section,.faq{gap:28px;align-items:start}
  .steps{margin-top:24px}
  .faq details{padding:0}
  .faq summary{padding:20px 0;min-height:64px;align-items:center}
  .faq details p{margin:0;padding:0 0 20px}
}