/* Shared mobile UX refinements across the homepage, service pages and guides. */
@media (max-width:800px){
  html,body,.home-inline-page,.seo-inline-page{max-width:100%;overflow-x:clip}

  /* Mobile navigation: stable overlay, larger targets and no background scrolling. */
  body.mobile-menu-open{overflow:hidden}
  .site-header .menu-button{min-width:46px;min-height:46px;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.32);border-radius:50%}
  .site-header .main-nav{max-height:calc(100dvh - 88px);overflow-y:auto;overscroll-behavior:contain}
  .site-header .main-nav>a{display:flex;min-height:48px;align-items:center}
  .site-header .main-nav .button{min-height:52px;justify-content:center}
  body.mobile-menu-open .whatsapp-contact{opacity:0;pointer-events:none;transform:translateY(8px)}

  /* Keep the floating contact route useful without covering primary actions. */
  .whatsapp-contact{right:10px;bottom:max(10px,env(safe-area-inset-bottom));padding:7px;box-shadow:0 8px 18px rgba(5,29,58,.2)}
  .whatsapp-contact span{width:28px;height:28px;background-size:18px 18px}

  /* Stronger, more compact first screens. */
  .service-page .page-hero h1,.seo-article-page .seo-hero h1{font-size:clamp(39px,10.5vw,44px)!important;line-height:1.07!important}
  .service-page .page-hero .eyebrow,.service-page .page-hero>div>p:first-child,.seo-page .eyebrow{font-size:13px!important;line-height:1.35!important;letter-spacing:.11em!important}

  /* One consistent, thumb-friendly return control. */
  .service-page .page-nav>a:first-of-type,.seo-page .page-nav>a:first-of-type,.seo-page header a[href="/"]{
    display:inline-flex;min-height:44px;align-items:center;padding:8px 0;font-size:15px!important;line-height:1.2
  }

  /* Secondary actions remain tappable without becoming visually dominant. */
  .service-page a[href^="mailto:"],.service-page a[href*="wa.me"],.seo-page footer a{min-height:44px;align-items:center}
  .service-page .guided-contact-link{display:inline-flex!important}

  /* Compact mobile comparisons: key facts first, optional full detail below. */
  .package-comparison-mobile{gap:16px}
  .comparison-mobile-card{padding:21px 18px 17px!important}
  .comparison-mobile-card dl>div:nth-child(n+5){display:none}
  .comparison-mobile-card.is-expanded dl>div:nth-child(n+5){display:grid}
  .comparison-mobile-card .comparison-recommended{font-size:12px!important;letter-spacing:.07em;min-height:29px}
  .comparison-mobile-heading strong{font-size:23px!important}
  .comparison-mobile-heading span{font-size:14px!important}
  .comparison-mobile-heading>b{font-size:12px!important}
  .comparison-mobile-toggle{display:flex;width:100%;min-height:46px;align-items:center;justify-content:space-between;margin-top:10px;padding:10px 0;border:0;border-top:1px solid #dbe3e8;background:transparent;color:#173c5b;font:800 14px/1.2 var(--sans);cursor:pointer}
  .comparison-mobile-toggle::after{content:'+';display:grid;width:26px;height:26px;place-items:center;border-radius:50%;background:#e8f0f3;font-size:20px;font-weight:500}
  .comparison-mobile-card.is-expanded .comparison-mobile-toggle::after{content:'−'}
  .comparison-mobile-card>.comparison-purchase{margin-top:14px!important}

  /* Footer links wrap cleanly and remain usable. */
  .site-footer .footer-wrap>div:last-child{position:static!important;display:flex!important;flex-wrap:wrap;gap:4px 18px!important}
  .site-footer a{display:inline-flex;min-height:40px;align-items:center}
}

@media (max-width:380px){
  .service-page .page-hero h1,.seo-article-page .seo-hero h1{font-size:38px!important}
  .comparison-mobile-heading{display:grid!important;grid-template-columns:1fr}
  .comparison-mobile-heading>b{justify-self:start}
}