/* Use available space, not a guessed Instagram/Messenger user agent. */
@media (max-width: 768px) {
  html { scroll-padding-top: 80px; }
  .pv-modal-bg {
    inset: auto 0;
    top: var(--pv-visible-top, 0px);
    height: 100vh;
    height: var(--pv-visible-height, 100dvh);
    box-sizing: border-box;
    padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  }
  .pv-modal { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  input, button, a { touch-action: manipulation; }
  input { scroll-margin-block: 80px; }
  #nav, #nav.scrolled { padding-top: max(12px, env(safe-area-inset-top)); }
  .nav-in { padding-inline: max(20px, env(safe-area-inset-left)) max(20px, env(safe-area-inset-right)); }
  .nav-wm { font-size: 18px; }
  #hero { padding-top: calc(74px + env(safe-area-inset-top)); }
  #pv-lang-switcher { top: max(10px, env(safe-area-inset-top)) !important; }
  #pv-lang-menu { max-height: min(360px, 60svh) !important; overflow-y: auto; }
  body > .wrap {
    padding-top: max(16px, env(safe-area-inset-top));
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }
  body > .wrap ~ #pv-lang-switcher { top: auto !important; }
  footer { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
}
/* Short embedded browsers: retain the entire video and CTA, not a cropped hero. */
@media (max-width: 768px) and (max-height: 650px) {
  #hero { padding-top: calc(64px + env(safe-area-inset-top)); padding-bottom: 20px; }
  .hero-pill { font-size: 10px; padding: 5px 10px; margin-bottom: 10px; }
  .hero-h1 { font-size: clamp(26px, 7.4vw, 32px); margin-bottom: 10px; }
  .hero-sub { font-size: 14px; line-height: 1.45; margin-bottom: 12px; }
  #hero .vsl-wrap { margin-top: 8px; margin-bottom: 14px; }
  .hero-cta-wrap { margin-bottom: 14px; }
  .hero-cta-wrap .cta-inner { min-height: 48px; padding: 12px 16px; }
  .hero-why-free { font-size: 12px; }
  .pv-modal { padding: 24px 18px 18px; }
  .pv-modal .sub { margin-bottom: 16px; }
}