/* =============================================================
   Responsive mobile polish v2
   Cross-page mobile tightening for the five navbar routes.

   v2 (2026-05-20): Extended scoping to body[data-page="careers"].
   v1 silently no-op'd on careers — careers loaded the file but no
   selectors matched. Hero/zoom-resilience pass.

   Careers extensions are narrower than the other four pages because
   careers' DOM differs:
   - No .hero-kicker (uses .hero-pill)
   - No .hero-scroll-cue
   - Main container is .page (40px gutter via :root), not .shell;
     the only .shell on careers landing/role pages is inside
     <footer class="site-footer">
   - Hero geometry is content-driven (no min-height); the .hero
     padding clamp other pages get does not apply
   So careers is extended only into the rules whose target elements
   actually exist on the page: .hero-sub width at 720, .hero h1
   reclamp and .hero-sub at 480. Everything else stays scoped to
   the original four panel-style hero pages.

   v1 history (preserved):
   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
   intended 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. Careers excluded:
     its hero is content-driven (no min-height) and its inline 24/96
     padding is already mobile-tuned. */
  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. Careers has no
     .hero-kicker (uses .hero-pill). */
  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.
     Careers extended: its .hero-sub is 56ch / margin-top 40px inline;
     the tighter 44ch / 20px reads better at phone widths. */
  body[data-page="platform"]   .hero-sub,
  body[data-page="industries"] .hero-sub,
  body[data-page="pricing"]    .hero-sub,
  body[data-page="company"]    .hero-sub,
  body[data-page="careers"]    .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).
     Careers has no .hero-scroll-cue. */
  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. Careers uses .close .row, not
     .closing-actions — unaffected. */
  .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. Careers' main wrapper is
     .page (with its own 24px mobile padding); careers landing's
     only .shell is in <footer class="site-footer">. Leaving
     careers off this rule avoids retightening the footer in a
     direction it doesn't need. */
  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. Careers excluded for the
     same content-driven reason as the 720 block. */
  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. Unscoped
     rules — fire on any .hero-kicker. Careers has none. */
  .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.
     The four original pages use clamp(48px, 7.5vw, 92px); at 375 →
     48px (floor), wrap is fine. Careers landing now uses
     clamp(48px, 6.5vw, 96px) after the v2 hero-resilience pass; same
     48px floor at 375 wraps cleanly to 3 lines at 18ch max-width.
     Lower the floor for all five pages so phone widths breathe. */
  body[data-page="platform"]   .hero h1,
  body[data-page="industries"] .hero h1,
  body[data-page="pricing"]    .hero h1,
  body[data-page="company"]    .hero h1,
  body[data-page="careers"]    .hero h1 {
    font-size: clamp(36px, 9.5vw, 60px);
    line-height: 1.02;
  }

  /* Sub paragraph reads cleaner with slightly tighter line length.
     Careers extended. */
  body[data-page="platform"]   .hero-sub,
  body[data-page="industries"] .hero-sub,
  body[data-page="pricing"]    .hero-sub,
  body[data-page="company"]    .hero-sub,
  body[data-page="careers"]    .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. Unscoped — careers uses
     .close (different selector) which has its own padding inline. */
  .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. Careers has none. */
  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;
  }
}