/* ═══════════════════════════════════════════════════════════════
   AMMO MOBILE SYSTEM V1 · The Ramp Cut (2026-05-19)
   Single source of truth for mobile rhythm across every marketing
   page. Loaded AFTER colors_and_type.css and topnav.css; overrides
   per-page styles by virtue of cascade order only — no !important
   except where a documented per-page rule fights us.

   Activation: <=720px. Homepage 7-section rebuild: <=640px.
   Below 360px: existing per-page SE overrides still own the layout.
   ═══════════════════════════════════════════════════════════════ */

/* ── Mobile tokens (scoped, only fire <=720px) ───────────────── */
@media (max-width:720px){
  :root{
    --m-section-y:64px;       /* vertical padding per section */
    --m-gutter:20px;           /* horizontal page gutter */
    --m-card-gap:16px;         /* gap between stacked cards */
    --m-tap:48px;              /* tap target floor */

    /* Type scale collapse */
    --m-h1:44px;
    --m-h2:32px;
    --m-h3:22px;
    --m-body:16px;
    --m-eyebrow:11px;
    --m-mono:10px;
    --m-lh-body:1.6;
    --m-lh-display:1.05;
    --m-ls-eyebrow:0.18em;
  }

  /* ── Section rhythm — every section gets the same vertical air ── */
  section{
    padding-top:var(--m-section-y);
    padding-bottom:var(--m-section-y);
    padding-left:var(--m-gutter);
    padding-right:var(--m-gutter);
  }

  /* ── Type scale collapse (only the canonical marketing classes;
       per-page exotic types are governed by their own overrides) ── */
  .h1,.hero h1,.legs-title,.tour-h,.pricing-h,.final-h,.how-h,.desk-h{
    font-size:var(--m-h1);
    line-height:var(--m-lh-display);
    letter-spacing:-.025em;
  }
  h2,.h2{
    font-size:var(--m-h2);
    line-height:1.1;
    letter-spacing:-.02em;
  }
  h3,.h3,.leg-h{
    font-size:var(--m-h3);
    line-height:1.2;
    letter-spacing:-.01em;
  }
  body,p,.sub,.tour-body,.pricing-sub,.final-sub,.how-sub,.leg-body{
    font-size:var(--m-body);
    line-height:var(--m-lh-body);
  }
  /* P2-1 fix 2026-05-19: per-page <p> rules sometimes set line-height
   * below 1.6 (/grade was 1.45). Re-assert at higher specificity so the
   * partial wins across pages. */
  html body p{
    line-height:var(--m-lh-body);
  }
  .eyebrow,.tour-eye,.legs-eye,.pricing-eye,.final-eye,.how-step .how-ord,
  .intermission-eye,.foot-col-title,.foot-briefing-eyebrow,
  .nav-mobile-subhead{
    font-size:var(--m-eyebrow);
    letter-spacing:var(--m-ls-eyebrow);
    text-transform:uppercase;
  }
  .mono,.num,.tab,.iso-metric .l,.leg-stat .l,.spec-mini .cell .l,
  .grade-row .l,.wr-head,.tape-row{
    font-size:var(--m-mono);
  }

  /* ── Tap target floor: every interactive element clears 48px ──
   * 2026-05-19 (QA P1-4 fix): added .foot-news button + input variants —
   * homepage footer uses .foot-news, NOT .foot-briefing-form. Both selectors
   * now in the floor so the rule fires across all marketing pages.
   * 2026-05-19 (P1-2 follow-up): .nav-cta REMOVED from this selector list —
   * topnav.css hides .nav-cta at <=560 (CTA reachable via burger drawer +
   * sticky-cta-bar). Adding display:inline-flex here re-defeated that hide
   * because mobile-system.css loads after topnav.css. The drawer's own
   * .nav-cta still picks up min-height via .nav-mobile a (it IS a child <a>). */
  .btn-primary,.btn-ghost,.cta,a.cta,.tier-cta,.foot-cta,
  .nav-link,.nav-mobile a,.tour-link,.read-more,
  button[type="submit"],.foot-briefing-form button,
  .foot-briefing-form input[type=email],
  .foot-news button,.foot-news input[type=email],
  .nav-mobile-close{
    min-height:var(--m-tap);
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .nav-link{
    /* Pill-shaped nav link in burger drawer needs left-align */
    justify-content:flex-start;
  }
  /* The bar across the screen needs a real hit area, not just the
     burger icon. */
  .nav-burger{
    min-width:var(--m-tap);
    min-height:var(--m-tap);
  }

  /* ── Card list rhythm: stacked cards get gap; list-card variant
       uses hairline dividers instead. Pages opt in via .m-list-cards
       on the parent grid. ── */
  .legs-grid,.pricing-grid,.tour-feat,.how-steps{
    display:flex;
    flex-direction:column;
    gap:var(--m-card-gap);
  }
  .m-list-cards{
    display:flex;
    flex-direction:column;
    gap:0;
  }
  .m-list-cards > * + *{
    border-top:1px solid var(--line,#E6E0D4);
    padding-top:24px;
    margin-top:24px;
  }
  .m-list-cards > *{
    /* Strip card chrome — list rows have no border / no bg */
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    padding-left:0;
    padding-right:0;
  }

  /* ── Kill decorative overlays on mobile (perf + clarity) ── */
  body::before,        /* mesh gradient */
  body::after,         /* grid overlay */
  .grid-overlay,
  .mesh-grad,
  .iso-stage .float-chip{
    display:none !important;
  }

  /* ── Tape ticker: gone below 640. Section padding stays. ── */
  @media (max-width:640px){
    .tape-row,.reel-stripe-eyebrow{display:none !important}
  }

  /* ── Body container clamp so nothing overflows the gutter ── */
  .hero,.tour,.legs,.how,.pricing,.final,.intermission,
  .stands,.faq,.spec,.manifesto,.voice,.desk,.reel-stripe{
    max-width:100vw;
    overflow-x:clip;
  }
}

/* ═══════════════════════════════════════════════════════════════
   STICKY BOTTOM CTA — fixed bar, homepage only by default.
   Other pages can opt in by including <!-- CHROME:STICKY-CTA -->.
   ═══════════════════════════════════════════════════════════════ */
.sticky-cta-bar{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:50;
  display:none;                       /* shown only via .is-on + <=720px */
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom)) 16px;
  background:var(--ink,#14110D);
  color:var(--cream,#F2EEE6);
  border-top:1px solid rgba(255,255,255,.08);
  box-shadow:0 -8px 24px -8px rgba(20,17,13,.18);
  min-height:calc(56px + env(safe-area-inset-bottom));
  transform:translateY(100%);
  transition:transform 220ms var(--ease-drawer,cubic-bezier(0.32,0.72,0,1));
}
.sticky-cta-bar.is-on{transform:translateY(0)}
@media (max-width:720px){
  .sticky-cta-bar.is-on{display:flex}
}
.sticky-cta-pitch{
  font-family:var(--ui,'General Sans',sans-serif);
  font-size:13px;
  font-weight:500;
  letter-spacing:-.005em;
  line-height:1.3;
  color:var(--cream,#F2EEE6);
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.sticky-cta-pitch b{color:var(--violet,#7B61FF);font-weight:600}
.sticky-cta-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex-shrink:0;
  padding:10px 14px;
  min-height:40px;
  background:var(--violet,#7B61FF);
  color:var(--cream,#F2EEE6);
  font-family:var(--mono,'JetBrains Mono',monospace);
  font-size:11px;
  font-weight:600;
  letter-spacing:.10em;
  text-transform:uppercase;
  text-decoration:none;
  border-radius:99px;
  transition:background 160ms ease,transform 160ms ease;
}
.sticky-cta-btn:active{transform:scale(0.97)}
.sticky-cta-btn:hover{background:var(--violet-ink,#5A3FFF)}
.sticky-cta-close{
  flex-shrink:0;
  width:32px;height:32px;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;
  border:1px solid rgba(255,255,255,.18);
  border-radius:99px;
  color:var(--cream,#F2EEE6);
  font-size:14px;
  cursor:pointer;
  opacity:.7;
  transition:opacity 160ms ease;
}
.sticky-cta-close:hover{opacity:1}

/* When sticky CTA is on, pad the body so footer content isn't trapped */
body.has-sticky-cta{padding-bottom:calc(56px + env(safe-area-inset-bottom))}
@media (min-width:721px){body.has-sticky-cta{padding-bottom:0}}