/**
 * Mobile / narrow UX — scoped media queries only.
 * Desktop: no matching rules ≥961px wide (landing “mobile lock” is ≤960px; phone polish ≤767px).
 */

/* ─── Narrow tablet & phone (≤960px): align with sticky header, trim vertical stacking ─── */
@media (max-width: 960px) {
  html {
    scroll-padding-top: calc(4rem + env(safe-area-inset-top, 0px));
    scroll-padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  body.landing-v2 .site-main.site-main--showcase {
    padding-left: max(0.875rem, env(safe-area-inset-left));
    padding-right: max(0.875rem, env(safe-area-inset-right));
  }

  body.landing-v2 .section {
    margin-bottom: clamp(2.15rem, 5.2vw, 3rem) !important;
  }

  body.landing-v2 .section .section-intro {
    margin-top: 0.65rem !important;
    margin-bottom: 1.1rem !important;
  }

  body.landing-v2 .trust-strip {
    margin-top: 0 !important;
  }
}

/* ─── Phones (≤767px): hero mass, pinned scroll lanes, chapters ─── */
@media (max-width: 767px) {
  body.landing-v2 .hero.hero-v3.hero--cinema {
    min-height: unset !important;
    min-height: min(92svh, 820px) !important;
    padding-top: max(0.5rem, env(safe-area-inset-top, 0px)) !important;
    padding-bottom: clamp(0.85rem, 3vw, 1.35rem) !important;
  }

  /* Was min-height: 640px — oversized on phones vs desktop proportions */
  body.landing-v2 .hero-v3__card {
    min-height: unset !important;
    min-height: min(62svh, 460px) !important;
    max-height: min(72svh, 560px) !important;
  }

  .hero-v3__showcase-row {
    margin-top: 0.65rem !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .hero-v3__showcase,
  .hero-v3__card-shell {
    width: 100%;
    max-width: 100%;
  }

  body.landing-v2 .hero-v3__card-shell[data-hero-showcase] {
    transform: none !important;
    opacity: 1 !important;
  }

  /* Shorter pin = same four stops, less empty travel (desktop pin height unchanged) */
  .iphone-showcase__pin {
    min-height: calc(3.1 * 100dvh);
    min-height: calc(3.1 * 100svh);
  }

  .iphone-showcase__sticky {
    min-height: min(88svh, 720px);
    padding-top: max(0.5rem, env(safe-area-inset-top));
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
  }

  /* Enough runway for ~4 discrete caption beats (same story as desktop 3.35× pin). Too short pins
     made mobile feel like “everything scrolls through” without text changing. */
  .app-story__pin {
    min-height: calc(3.3 * 100dvh);
    min-height: calc(3.3 * 100svh);
  }

  .app-story__sticky {
    top: calc(4.25rem + env(safe-area-inset-top, 0px));
    padding-bottom: max(0.65rem, env(safe-area-inset-bottom));
  }

  .scroll-chapter {
    scroll-margin-top: calc(3.9rem + env(safe-area-inset-top, 0px));
    padding-top: 1.15rem !important;
    padding-bottom: 1.35rem !important;
  }

  .story-stack {
    gap: clamp(1.65rem, 5vw, 2.5rem) !important;
  }

  .site-footer {
    padding-top: 1.35rem;
    padding-bottom: max(1.35rem, env(safe-area-inset-bottom));
  }

  /* Inner pages (contact uses main.legal-page; privacy/terms use body.page-legal) */
  body.landing-v2 main.legal-page,
  body.page-legal .site-main {
    padding-left: max(0.875rem, env(safe-area-inset-left));
    padding-right: max(0.875rem, env(safe-area-inset-right));
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }
}

/* Final mobile landing constraints: high specificity so they win the landing redesign cascade. */
@media (max-width: 767px) {
  body.landing-v2 .hero-v3__showcase-row {
    width: 100%;
    max-width: 100%;
    padding-inline: 0 !important;
  }

  body.landing-v2 .hero-v3__card {
    width: 100%;
    min-height: clamp(360px, 54svh, 430px) !important;
    max-height: none !important;
    aspect-ratio: auto !important;
  }

  body.landing-v2 .hero-live-app.hero-live-app--immersive {
    min-width: 0;
    overflow: hidden;
    grid-template-columns: minmax(0, 1fr);
  }

  body.landing-v2 .hero-live-app.hero-live-app--immersive > * {
    min-width: 0;
    max-width: 100%;
  }

  body.landing-v2 .hero-live-app.hero-live-app--immersive .hero-live-app__deck {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: clamp(250px, 36svh, 340px) !important;
    overflow: hidden;
  }

  body.landing-v2 .hero-live-app.hero-live-app--immersive .hero-live-deck__card {
    min-width: 0;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }

  body.landing-v2 .hero-live-app.hero-live-app--immersive .hero-live-deck__media {
    min-height: 0 !important;
  }

  body.landing-v2 .hero-live-app.hero-live-app--immersive .hero-live-deck__content {
    min-height: 0;
  }
}

@media (max-width: 380px) {
  body.landing-v2 .hero-v3__inner {
    gap: 0;
  }

  body.landing-v2 .hero-v3__lead {
    font-size: clamp(0.94rem, 4vw, 1rem) !important;
    line-height: 1.55 !important;
  }

  body.landing-v2 .hero-v3 .pill.hero-eyebrow {
    max-width: 100%;
    white-space: normal;
  }

  body.landing-v2 .hero-v3__card {
    min-height: clamp(340px, 52svh, 410px) !important;
  }

  body.landing-v2 .app-story__layout {
    gap: 0.5rem;
  }

  body.landing-v2 .app-story__col h3 {
    font-size: clamp(0.92rem, 5vw, 1.05rem);
  }

  body.landing-v2 .app-story__col-text {
    font-size: clamp(0.76rem, 3.6vw, 0.84rem);
    line-height: 1.42;
  }
}

/* Decorative off-canvas atmosphere should not create a horizontal scroll range. */
html:has(body.landing-v2),
body.landing-v2 {
  max-width: 100%;
  overflow-x: clip;
}

body.landing-v2 .app-mock-solo__clip,
body.landing-v2 .iphone-showcase__phones {
  contain: paint;
  overflow: clip;
}

@media (max-width: 1240px) {
  body.landing-v2 .hero-live-float--a,
  body.landing-v2 .hero-live-float--b {
    left: 0.5rem;
  }

  body.landing-v2 .hero-live-float--c {
    right: 0.5rem;
  }

  html body.landing-v2 .section.section-global-intel {
    overflow-x: clip !important;
  }
}