/* =============================================================
   Responsive mobile polish v1
   Cross-page mobile tightening for the four navbar routes:
   platform, industries, pricing, company.

   Round 3 set hero padding/min-height for desktop composed-moment
   feel. On phone viewports those values overflow the screen, so this
   sheet tightens hero geometry, gutters, kicker, and CTA stacking
   at 720px and 480px.

   Each rule is scoped per body[data-page] so it only fires on the
   four routes — privacy/terms/sms-consent are unaffected.
   ============================================================= */

/* ---------- 720px (tablet portrait / large phone) ---------- */
@media (max-width: 720px) {
  /* Hero: tighter padding + min-height so the composed moment fits
     in one phone viewport without forcing scroll. */
  body[data-page="platform"]   .hero,
  body[data-page="industries"] .hero,
  body[data-page="pricing"]    .hero,
  body[data-page="company"]    .hero {
    padding-top: clamp(56px, 9vh, 96px);
    padding-bottom: clamp(56px, 10vh, 96px);
    min-height: clamp(480px, 80vh, 720px);
  }

  /* Kicker: tighter spacing + smaller separator */
  body[data-page="platform"]   .hero-kicker,
  body[data-page="industries"] .hero-kicker,
  body[data-page="pricing"]    .hero-kicker,
  body[data-page="company"]    .hero-kicker {
    margin-bottom: 20px;
    gap: 12px;
  }

  /* Sub paragraph: round-3 set 46ch above-the-fold; on mobile drop
     to 44ch + a tighter top gap so it reads like one block with the H1. */
  body[data-page="platform"]   .hero-sub,
  body[data-page="industries"] .hero-sub,
  body[data-page="pricing"]    .hero-sub,
  body[data-page="company"]    .hero-sub {
    max-width: 44ch;
    margin-top: 20px;
  }

  /* Scroll cue closer to the copy on mobile (round-3 clamp goes
     56→120px which is too much air on a 667px-tall phone) */
  body[data-page="platform"]   .hero-scroll-cue,
  body[data-page="industries"] .hero-scroll-cue,
  body[data-page="pricing"]    .hero-scroll-cue,
  body[data-page="company"]    .hero-scroll-cue {
    margin-top: clamp(36px, 6vh, 72px);
  }

  /* Closing CTA: stack the buttons full-width so they're easy
     to tap. Touch target ≥44px height comes from the existing
     btn-primary/btn-ghost padding. */
  .closing-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .closing-actions .btn-primary,
  .closing-actions .btn-ghost {
    width: 100%;
    justify-content: center;
  }

  /* Company hero-meta: round-3 puts a big gap between the scroll cue
     and the meta to push meta below the fold. On mobile that gap
     overflows the viewport, so collapse to natural flow. The meta
     becomes the first thing seen on scroll regardless. */
  body[data-page="company"] .hero { min-height: auto; }
  body[data-page="company"] .hero .hero-meta {
    margin-top: 32px;
  }

  /* Company .cta band — already stacks at 720 via its own rule;
     ensure buttons are full-width too. */
  body[data-page="company"] .cta-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  body[data-page="company"] .cta-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ---------- 480px (small phone — iPhone SE class) ---------- */
@media (max-width: 480px) {
  /* Tighter shell gutter so 18px on each side becomes 14px,
     reclaiming 8px of content width. */
  body[data-page="platform"]   .shell,
  body[data-page="industries"] .shell,
  body[data-page="pricing"]    .shell {
    padding-left: 14px;
    padding-right: 14px;
  }
  body[data-page="company"] .page {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Hero: even tighter on small phones */
  body[data-page="platform"]   .hero,
  body[data-page="industries"] .hero,
  body[data-page="pricing"]    .hero,
  body[data-page="company"]    .hero {
    padding-top: clamp(40px, 7vh, 64px);
    padding-bottom: clamp(40px, 8vh, 72px);
    min-height: clamp(420px, 74vh, 600px);
  }

  /* Kicker separator shrinks so the §·PAGE label has room */
  .hero-kicker .sep { max-width: 40px; }
  .hero-kicker {
    font-size: 0.66rem;
    margin-bottom: 16px;
  }

  /* H1: lower the floor so very small viewports don't clip headlines.
     Round-3 spec is clamp(48px, 7.5vw, 92px). On 375px → 48px (clamp
     min). At 7.5vw on 375 = 28px, but min wins. We want a real reduction
     here — tighten the min for 480- viewports. */
  body[data-page="platform"]   .hero h1,
  body[data-page="industries"] .hero h1,
  body[data-page="pricing"]    .hero h1,
  body[data-page="company"]    .hero h1 {
    font-size: clamp(36px, 9.5vw, 60px);
    line-height: 1.02;
  }

  /* Sub paragraph reads cleaner with slightly tighter line length */
  body[data-page="platform"]   .hero-sub,
  body[data-page="industries"] .hero-sub,
  body[data-page="pricing"]    .hero-sub,
  body[data-page="company"]    .hero-sub {
    max-width: 38ch;
    margin-top: 16px;
    font-size: 14px;
  }

  /* Pricing's secondary callout matches sub treatment */
  body[data-page="pricing"] .pricing-callout {
    max-width: 38ch;
    font-size: 13px;
  }

  /* Closing/CTA section padding tighter */
  .closing { padding: 56px 0 48px !important; }
  body[data-page="company"] .cta {
    padding: 24px 18px;
    gap: 18px;
  }
  body[data-page="company"] .cta .cta-copy h3 {
    font-size: 1.1rem;
  }

  /* Scroll cue: minimal air on smallest phones */
  body[data-page="platform"]   .hero-scroll-cue,
  body[data-page="industries"] .hero-scroll-cue,
  body[data-page="pricing"]    .hero-scroll-cue,
  body[data-page="company"]    .hero-scroll-cue {
    margin-top: clamp(24px, 5vh, 56px);
    font-size: 10px;
  }
}