/* HelloJonny mobile + Core Web Vitals enhancements */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:hidden}
body{overflow-x:hidden}
img,svg,video{max-width:100%}
img{height:auto}
a,button,.btn{touch-action:manipulation}
button,.btn,a.navlink,.mobile a{min-height:44px}
.visual img,.shot img,.future-media img,.final-logo img{width:100%;height:auto;object-fit:contain}
.shot,.visual,.future-media{max-width:100%;overflow:hidden}
:focus-visible{outline:3px solid var(--gold-2,#ffd57a);outline-offset:3px}

@media (max-width:980px){
  .container{width:min(100% - 28px,1180px)!important}
  .hero{padding-top:52px!important;padding-bottom:48px!important}
  .hero-grid,.split,.compare,.price-grid,.story-flow,.day,.module-grid,.addon-grid,.limits-grid,.future-grid,.process-step,.legal-grid{
    grid-template-columns:minmax(0,1fr)!important;
  }
  .display,.hero h1{font-size:clamp(2.25rem,9vw,4.25rem)!important;line-height:1.02!important;letter-spacing:-.045em!important}
  h2{font-size:clamp(1.8rem,7vw,3.1rem)!important;line-height:1.08!important}
  h3{line-height:1.2}
  .hero p,.section-head p,.copy p{font-size:1rem!important}
  .hero-actions{display:grid!important;grid-template-columns:1fr!important;width:100%;gap:10px!important}
  .hero-actions .btn,.cta .btn{width:100%;justify-content:center;text-align:center}
  .visual{min-height:0!important;height:auto!important}
  .visual img{max-height:none!important}
  .price-grid{gap:56px!important}
  .price-card{min-height:0!important;height:auto!important}
  .price-card.recommended{transform:none!important}
  .service-toggle{grid-template-columns:1fr!important;gap:12px!important}
  .service-right{justify-content:space-between!important;width:100%}
  .service-feature-grid{grid-template-columns:1fr!important}
  .process-step{gap:22px!important;padding-block:34px!important}
  .step-copy{max-width:none!important}
  .shot{padding:8px!important;border-radius:18px!important}
  .shot img{max-height:none!important;min-height:0!important}
  .future-grid{gap:18px!important}
  .future-card{min-width:0!important}
  .table,.compare-table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
  .toc{position:static!important;top:auto!important;margin-bottom:20px}
  .footer{grid-template-columns:1fr!important;gap:24px!important}
  .footerlinks{justify-content:flex-start!important;gap:12px 18px!important}
}

@media (max-width:700px){
  .container{width:calc(100% - 20px)!important}
  .nav{min-height:64px!important;height:auto!important;padding-block:8px!important}
  .brand img{width:auto!important;max-width:116px!important;max-height:44px!important}
  .actions{gap:7px!important}
  .actions>.btn{display:none!important}
  .theme,.menubtn{width:44px!important;height:44px!important;min-width:44px!important;padding:0!important}
  .mobile{top:64px!important;max-height:calc(100dvh - 64px)!important;overflow-y:auto!important;overscroll-behavior:contain}
  .mobile a,.mobile button{padding:13px 0!important}
  .display,.hero h1{font-size:clamp(2.05rem,11vw,3.35rem)!important}
  .hero-note{padding:14px!important;border-radius:14px!important}
  section,.section,.section-tight,.module-section,.addons,.limits,.service-details{scroll-margin-top:76px}
  .section{padding-block:68px!important}
  .section-tight{padding-block:56px!important}
  .section-head{margin-bottom:28px!important}
  .card,.compare-card,.daycard,.limit-card,.addon-card,.module-card{padding:20px!important;border-radius:18px!important}
  .pills{gap:8px!important}
  .pill,.chip{font-size:.79rem!important;padding:8px 11px!important}
  .chatbox{border-radius:20px!important}
  .chatbody{padding:16px!important}
  .bubble{max-width:92%!important}
  .service-toggle{padding:18px!important}
  .service-content{padding-left:18px!important;padding-right:18px!important}
  .reco{top:-40px!important;max-width:calc(100% - 24px);white-space:normal!important;text-align:center}
  .price{font-size:2.45rem!important}
  .final-logo img{max-width:230px!important;margin-inline:auto!important;display:block}
  .cta{padding-block:70px!important}
  .cta h2{font-size:clamp(2rem,9vw,3rem)!important}
  .contact{grid-template-columns:1fr!important}
  input,select,textarea{font-size:16px!important;max-width:100%}
}

@media (max-width:420px){
  .container{width:calc(100% - 16px)!important}
  .display,.hero h1{font-size:clamp(1.95rem,11.5vw,2.9rem)!important}
  h2{font-size:clamp(1.65rem,8.8vw,2.35rem)!important}
  .eyebrow{font-size:.72rem!important}
  .footerlinks{display:grid!important;grid-template-columns:1fr 1fr!important}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal{opacity:1!important;transform:none!important}
}