/* ─────────────────────────────────────────────────────────────
   Aërgap — shared mobile responsiveness fixes
   Loaded AFTER each page's inline <style>, so these win the cascade
   without duplicating page-specific rules.
   ───────────────────────────────────────────────────────────── */

/* tablet & below ------------------------------------------------ */
@media (max-width: 720px){
  /* tighter gutters, sections, hero */
  .wrap{padding:0 20px}
  section.section{padding:48px 0}
  .hero{padding-top:24px; padding-bottom:32px}

  /* type scales down a notch */
  .display{
    font-size: clamp(34px, 9vw, 56px);
    line-height:1.04;
    letter-spacing:-0.028em;
  }
  .h2{
    font-size: clamp(28px, 7.5vw, 44px);
    line-height:1.06;
  }
  .lede{font-size:16.5px; line-height:1.5}

  /* hard-coded <br/> tags inside titles look bad on phones — drop them */
  .display br,
  .section-head h2 br,
  .cta-band h2 br,
  .pricing-band h2 br{display:none}

  /* eyebrow chip: hide the secondary link inside it on mobile to keep on one line */
  .eyebrow .sep,
  .eyebrow .lnk{display:none}

  /* nav: shrink so the CTA doesn't crowd the brand */
  .nav-inner{height:60px}
  .brand{font-size:16.5px}
  .nav-cta .btn{padding:9px 12px; font-size:13.5px}

  /* hero actions stretch full-width and stack cleanly */
  .hero-actions{gap:10px; width:100%}
  .hero-actions .btn,
  .hero-actions .btn-lg{flex:1 1 160px; padding:13px 14px; font-size:14.5px}
  .hero-meta{margin-top:24px; gap:12px 18px; font-size:13px}

  /* section head spacing */
  .section-head{margin-bottom:24px}
  .section-head p{font-size:16px}

  /* air-gap strip */
  .agstrip{padding:18px 16px; gap:16px}
  .agstrip .ag-head{font-size:16px; line-height:1.3}
  .agstrip .ag-sub{font-size:12.5px}
  .agstrip .ag-cta{padding:10px 14px; font-size:13px}

  /* pricing band — collapses padding & lets prices wrap if needed */
  .pricing-band{padding:28px 22px; border-radius:18px; gap:28px}
  .pricing-band h2{font-size:clamp(26px, 6.6vw, 34px)}
  .pricing-band p{font-size:15px}
  .recipe-row{padding:14px 16px; gap:10px}
  .recipe-row .rl{font-size:14px}
  .recipe-row .rl small{font-size:12px}
  .recipe-row .rv{font-size:12px; padding:5px 10px}

  /* method strip — keep the step number visible but tighter */
  .method-step{padding:20px 18px 22px}
  .method-step h4{font-size:17px}

  /* differentiators */
  .why-card{padding:16px 18px; gap:14px}
  .why-card h4{font-size:15.5px}
  .why-card p{font-size:13.5px}

  /* ICP cards */
  .icp{padding:20px; min-height:0}

  /* CTA band */
  .cta-band{padding:36px 24px; border-radius:20px}
  .cta-band h2{font-size:clamp(28px, 7vw, 40px)}
  .cta-band p{font-size:15px}
  .cta-band .actions{width:100%}
  .cta-band .actions .btn{flex:1 1 160px; justify-content:center}

  /* footer: stack the bottom row so legal links don't crash into the address */
  .foot-grid{gap:32px}
  .foot-bottom{flex-direction:column; align-items:flex-start; gap:14px}
  .foot-bottom .legal{flex-wrap:wrap}
}

/* phone ------------------------------------------------ */
@media (max-width: 480px){
  .wrap{padding:0 18px}
  section.section{padding:40px 0}

  /* nav: keep brand + CTA on one row, hide the arrow glyph if necessary */
  .nav-inner{height:56px}
  .nav-cta .btn{padding:8px 11px; font-size:13px; border-radius:9px}

  /* hero gap-scene: the "vendor cloud" side is decorative — drop it on small
     screens so the "your servers" panel can breathe at full width */
  .gap-scene{aspect-ratio:auto; max-width:none; padding:0}
  .gap-scene .scene-bg,
  .gap-scene .their-side,
  .gap-scene .gap-rule,
  .gap-scene .gap-label{display:none}
  .gap-scene .your-side{
    position:relative;
    width:100%;
    height:auto;
    top:auto; right:auto;
    padding:18px;
  }

  /* page-specific hero visuals: let them flow normally instead of locked ratios */
  .iso-stage, .erp-stage, .cv-stage, .hero-visual, .hero-photo{
    max-width:100%;
  }

  /* hero meta items stack so each gets its own line and reads cleanly */
  .hero-meta{flex-direction:column; align-items:flex-start; gap:10px}

  /* foot grid — single column with comfortable spacing */
  .foot-grid{grid-template-columns:1fr; gap:28px}

  /* pricing recipe rows can flex-wrap so the price drops below if needed */
  .recipe-row{flex-wrap:wrap}
  .recipe-row .rv{margin-left:auto}

  /* CTA / pricing band corner radii flatten a hair for narrow viewports */
  .cta-band,
  .pricing-band{border-radius:18px}
  .cta-band{padding:32px 22px}
  .pricing-band{padding:26px 20px}

  /* drop the big decorative glow on the CTA so it doesn't waste space */
  .cta-band::before{width:240px; height:240px; right:-110px; top:-110px}

  /* trusted-logos label centers comfortably */
  .trusted{margin-top:36px; padding-top:24px}
  .trusted .label{font-size:12.5px}

  /* eyebrow always single-line */
  .eyebrow{font-size:12px; padding:5px 11px 5px 9px}
}

/* very small phones (≤360) ------------------------------------- */
@media (max-width: 360px){
  .wrap{padding:0 14px}
  .display{font-size:30px}
  .h2{font-size:24px}
  .brand{font-size:15px}
  .brand .brand-mark{width:22px; height:22px}
  .brand .brand-mark svg{width:22px; height:22px}
  .nav-cta .btn{padding:7px 10px; font-size:12.5px}
  .pricing-band h2{font-size:24px}
  .cta-band h2{font-size:24px}
}