/* ─────────────────────────────────────────────────────────────────
   RESPONSIVE OVERLAY — added on top of the fixed-1280 design system.
   Uses !important and [style*=...] selectors because the redesign
   inlines layout (grid-template-columns) on individual elements.
   ───────────────────────────────────────────────────────────────── */

/* Make the page itself fluid so it scales below 1280px. */
html, body { max-width: 100%; overflow-x: hidden; }
.web-page { width: 100% !important; max-width: 1280px !important; overflow-x: hidden; }
img, svg:not(.nav-logo svg):not(.footer-logo svg), video, iframe { max-width: 100%; height: auto; }
pre, code, .mono { overflow-wrap: anywhere; word-break: break-word; }

/* ── MOBILE NAV (hamburger + drawer) ── shared by tablet and phone so
   both show the identical menu. Hidden on desktop. */
.nav { position: relative; z-index: 50; }
.nav-toggle { display: none; }
.nav-drawer { display: none; }
.nav-toggle-bar { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }

/* ── TABLET ── (≤1024px): dense multi-column layouts step down to 2 cols;
   the design system uses CSS classes for layout, so we target those
   directly and keep the inline-style selectors as a fallback. */
@media (max-width: 1024px) {
  .container { padding: 0 32px !important; }
  .container-narrow { padding: 0 32px !important; }
  .nav-inner { padding: 16px 32px !important; }
  .nav-links { display: none !important; }
  .nav-cta { display: none !important; }
  .nav-toggle {
    display: inline-flex !important; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; width: 42px; height: 42px; padding: 0; background: var(--bg);
    border: 1px solid var(--line); border-radius: var(--r-md); cursor: pointer; flex-shrink: 0;
  }
  .nav.is-open .nav-toggle-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav.is-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
  .nav.is-open .nav-toggle-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .nav.is-open .nav-drawer {
    display: flex; flex-direction: column;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-xl); padding: 8px 20px 22px; z-index: 60;
    max-height: calc(100vh - 64px); overflow-y: auto;
  }
  .nav-drawer-link { display: block; padding: 15px 6px; font-size: 16px; font-weight: 600; color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--line-dim); }
  .nav-drawer-link:last-of-type { border-bottom: none; }
  .nav-drawer-link.active { color: var(--blue); }
  .nav-drawer-cta { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
  .nav-drawer-cta .btn { width: 100%; justify-content: center; padding: 14px 18px; font-size: 15px; }
  .nav-drawer-cta .btn-ghost { border: 1px solid var(--line); background: var(--bg); color: var(--ink); }

  /* Consistent vertical rhythm — uniform section padding (no fragile
     sibling tricks) plus tamed inner spacers so the whole page breathes
     evenly on tablet. */
  section { padding: 52px 0 !important; }
  section.tight { padding: 36px 0 !important; }
  .hero { padding: 52px 0 40px !important; }
  .promo-bar { padding: 12px 24px !important; font-size: 13.5px !important; line-height: 1.45 !important; }
  .mb-8 { margin-bottom: 32px !important; } .mb-6 { margin-bottom: 24px !important; }
  .mt-10 { margin-top: 40px !important; } .mt-8 { margin-top: 32px !important; } .mt-6 { margin-top: 24px !important; }
  [style*="auto 56px"], [style*="auto 48px"], [style*="auto 64px"], [style*="auto 72px"],
  [style*="margin-bottom: 48px"], [style*="margin-bottom:48px"], [style*="margin-bottom: 56px"],
  [style*="margin-bottom: 64px"], [style*="margin-bottom: 72px"], [style*="margin-bottom: 80px"] { margin-bottom: 32px !important; }

  /* Class-based grids. */
  .grid-3, .grid-4, .diff-strip { grid-template-columns: repeat(2, 1fr) !important; }
  .grid-2 { grid-template-columns: repeat(2, 1fr) !important; }
  .metric-row, .agency-metric-row, .trust-badges { grid-template-columns: repeat(2, 1fr) !important; }
  .funnel-steps, .workflow-steps { grid-template-columns: repeat(2, 1fr) !important; }
  .rpm-grid-row, .weight-bar-row, .math-flow, .roi-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .are-grid { grid-template-columns: 1fr !important; }
  .math-arrow, .funnel-step-arrow { display: none !important; }
  .compare-grid { display: block !important; overflow: auto !important; -webkit-overflow-scrolling: touch; }
  .compare-grid table { min-width: 560px !important; }
  .compare-grid th, .compare-grid td { padding: 12px 14px !important; font-size: 13px !important; }
  .pricing-row { grid-template-columns: 1fr !important; max-width: 480px; margin-left: auto; margin-right: auto; }
  .pcard.featured { transform: none !important; }
  .steps { grid-template-columns: 1fr !important; gap: 32px !important; }
  .step-arrow { display: none !important; }
  .feature-block, .feature-block.reverse { grid-template-columns: 1fr !important; gap: 40px !important; direction: ltr !important; }
  .layers-flow { grid-template-columns: 1fr !important; gap: 24px !important; }
  .layers-diagram { padding: 32px 24px !important; }
  .layer-row { grid-template-columns: 40px 1fr !important; gap: 12px !important; }
  .layer-row .layer-example { grid-column: 1 / -1; text-align: left !important; }
  .compare-bar { grid-template-columns: 1fr !important; gap: 10px !important; text-align: left; }
  .compare-tag { justify-content: flex-start !important; text-align: left !important; }
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }

  /* Inline-style fallback. */
  [style*="grid-template-columns: repeat(5"], [style*="grid-template-columns:repeat(5"],
  [style*="grid-template-columns: repeat(4"], [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns: repeat(3"], [style*="grid-template-columns:repeat(3"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns: 2fr 1fr 1fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; }
  [style*="grid-template-columns: 1fr 60px 1fr 60px 1fr"],
  [style*="grid-template-columns: 1fr 50px 1fr 50px 1fr"],
  [style*="grid-template-columns: 320px 1fr"],
  [style*="grid-template-columns: 200px 1fr"],
  [style*="grid-template-columns: 48px 1fr"],
  [style*="grid-template-columns: 1fr 1.5fr"],
  [style*="grid-template-columns: 200px 1fr 200px"],
  [style*="grid-template-columns: 200px 1fr 80px"],
  [style*="grid-template-columns: 200px 1fr 130px"],
  [style*="grid-template-columns: 48px 1fr 200px"] { grid-template-columns: 1fr !important; }

  /* Scale the largest headings so they don't blow past the viewport. */
  .h-xl { font-size: 44px !important; line-height: 1.08 !important; }
  .h-lg { font-size: 36px !important; line-height: 1.12 !important; }
  .h-md { font-size: 28px !important; }
}

/* ── PHONE ── (≤640px): single column everywhere. */
@media (max-width: 640px) {
  .container { padding: 0 20px !important; }
  .container-narrow { padding: 0 20px !important; }
  .nav-inner { padding: 12px 20px !important; }

  section { padding: 36px 0 !important; }
  section.tight { padding: 28px 0 !important; }
  .hero { padding: 32px 0 28px !important; }
  .promo-bar { display: block !important; padding: 11px 20px !important; font-size: 13px !important; line-height: 1.45 !important; text-align: center !important; }
  .promo-bar .icon { display: none !important; }  /* decorative bolt: drop on phones so it can't break onto its own line */
  .mb-8 { margin-bottom: 24px !important; } .mb-6 { margin-bottom: 20px !important; } .mb-5 { margin-bottom: 18px !important; }
  .mt-10 { margin-top: 28px !important; } .mt-8 { margin-top: 24px !important; } .mt-6 { margin-top: 20px !important; }
  [style*="auto 56px"], [style*="auto 48px"], [style*="auto 64px"], [style*="auto 72px"],
  [style*="margin-bottom: 48px"], [style*="margin-bottom:48px"], [style*="margin-bottom: 56px"],
  [style*="margin-bottom: 64px"], [style*="margin-bottom: 72px"], [style*="margin-bottom: 80px"] { margin-bottom: 24px !important; }

  /* Everything stacks. */
  .grid-2, .grid-3, .grid-4, .diff-strip, .metric-row, .agency-metric-row,
  .pricing-row, .steps, .feature-block, .feature-block.reverse,
  .layers-flow, .layer-row, .compare-bar, .funnel-steps, .workflow-steps,
  .rpm-grid-row, .weight-bar-row, .math-flow, .roi-grid, .are-grid { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  .feature-block, .feature-block.reverse { direction: ltr !important; gap: 28px !important; }
  .feature-mockup { padding: 20px !important; }
  .layer-row { gap: 10px !important; }
  .card { padding: 22px !important; }
  .cta-row .btn { width: 100%; justify-content: center; }

  .footer { padding: 48px 0 24px !important; }
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 24px 28px !important; margin-bottom: 32px !important; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column !important; gap: 8px !important; text-align: center; }

  /* Heading + big-number scale */
  .h-xl { font-size: 34px !important; line-height: 1.1 !important; letter-spacing: -0.025em !important; }
  .h-lg { font-size: 28px !important; line-height: 1.15 !important; }
  .h-md { font-size: 23px !important; line-height: 1.2 !important; }
  .h-sm { font-size: 20px !important; }
  .lead { font-size: 16px !important; line-height: 1.55 !important; }
  .stat-card .stat-num, .pcard-price { font-size: 44px !important; }

  /* Buttons */
  .btn { white-space: normal !important; text-align: center; }
  .btn-lg { padding: 12px 18px !important; font-size: 14.5px !important; }

  /* Tables: let them scroll horizontally rather than blow out the layout. */
  table { display: block; overflow-x: auto; max-width: 100%; }

  /* Tame fixed-pixel inline widths often used for screenshot/demo blocks. */
  [style*="width: 1180px"], [style*="width:1180px"],
  [style*="width: 1080px"], [style*="width:1080px"],
  [style*="width: 980px"], [style*="width:980px"],
  [style*="width: 880px"], [style*="width:880px"],
  [style*="width: 800px"], [style*="width:800px"],
  [style*="width: 720px"], [style*="width:720px"],
  [style*="width: 640px"], [style*="width:640px"] {
    max-width: 100% !important; width: auto !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   .ba-newnav PAGES — hamburger parity (features, contact, free-audit,
   report, boltaudit-home, blog/*, fixes/*, agencies, woocommerce,
   publishers). Mirrors the .nav drawer. Literal colors because these
   pages don't expose the --ink/--line CSS vars.
   ═══════════════════════════════════════════════════════════════════ */
.ba-newnav { position: relative; z-index: 50; }
.ba-newnav-toggle { display: none; }
.ba-newnav-drawer { display: none; }
.ba-newnav-toggle-bar { display: block; width: 18px; height: 2px; background: #0B1220; border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }

@media (max-width: 1024px) {
  .ba-newnav-links { display: none !important; }
  .ba-newnav-cta { display: none !important; }
  .ba-newnav-inner { padding: 14px 20px !important; }
  .ba-newnav-toggle {
    display: inline-flex !important; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; width: 42px; height: 42px; padding: 0; background: #fff;
    border: 1px solid #E2E8F0; border-radius: 8px; cursor: pointer; flex-shrink: 0;
  }
  .ba-newnav.is-open .ba-newnav-toggle-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .ba-newnav.is-open .ba-newnav-toggle-bar:nth-child(2) { opacity: 0; }
  .ba-newnav.is-open .ba-newnav-toggle-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .ba-newnav.is-open .ba-newnav-drawer {
    display: flex; flex-direction: column;
    position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; border-top: 1px solid #E2E8F0; border-bottom: 1px solid #E2E8F0;
    box-shadow: 0 20px 25px -5px rgba(15,23,42,0.10), 0 8px 10px -6px rgba(15,23,42,0.05);
    padding: 8px 20px 22px; z-index: 60; max-height: calc(100vh - 64px); overflow-y: auto;
  }
  .ba-newnav-drawer-link { display: block; padding: 15px 6px; font-size: 16px; font-weight: 600; color: #0F172A; text-decoration: none; border-bottom: 1px solid #F1F5F9; }
  .ba-newnav-drawer-link:last-of-type { border-bottom: none; }
  .ba-newnav-drawer-link.active { color: #2563EB; }
  .ba-newnav-drawer-cta { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
  .ba-newnav-drawer-cta > a, .ba-newnav-drawer-cta > button { width: 100%; justify-content: center; text-align: center; padding: 14px 18px; font-size: 15px; }
}

/* ── P2 polish ── */
body.nav-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .nav-toggle-bar, .ba-newnav-toggle-bar, * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
:focus-visible { outline: 2px solid #2563EB; outline-offset: 2px; }

/* ═══════════════════════════════════════════════════════════════════
   TARGETED FIXES — batch 1 (reported mobile/tablet issues, applied
   site-wide via shared classes so every page benefits).
   ═══════════════════════════════════════════════════════════════════ */

/* #1 — Visible gap between the dark final-CTA and the dark footer.
   Both are #0b…; show a light strip between them regardless of the
   surrounding background. */
body:has(.ba-newfooter) { background: #f7f8fb; }
.ba-newfooter { margin-top: 28px !important; border-top: 1px solid rgba(255,255,255,0.08); }

/* #2 — Footer link columns: 2-up on mobile/tablet, brand spans the
   full top row. Covers both footer systems (.footer-grid for .nav
   pages and .ba-newfooter-grid for .ba-newnav pages). */
@media (max-width: 900px) {
  .ba-newfooter-grid { grid-template-columns: 1fr 1fr !important; gap: 24px 28px !important; }
  .ba-newfooter-brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .ba-newfooter-grid { grid-template-columns: 1fr 1fr !important; gap: 22px 24px !important; }
  .ba-newfooter-brand { grid-column: 1 / -1; }
}

@media (max-width: 1024px) {
  /* #4 — Inset the promo/notification bar from the screen edges. */
  .promo-bar { margin: 14px 24px !important; border-radius: 10px !important; }
  /* #6 — FORMULA code block: contain it, never bleed past the box. */
  .code-block { font-size: 12.5px !important; padding: 20px 18px !important;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    white-space: pre-wrap; word-break: break-word; }
  /* #7 — Chart legend wraps instead of overflowing the card. */
  .bounce-curve-legend { flex-wrap: wrap; gap: 12px 18px; }
}

@media (max-width: 640px) {
  /* #3 — Kill the doubled hero→cards whitespace on the pricing page
     (the promo bar is immediately followed by the hero, then plans). */
  .promo-bar + section { padding: 26px 0 6px !important; }
  .promo-bar + section + section { padding: 6px 0 30px !important; }
  .toggle-row { margin: 16px 0 8px !important; }

  /* #4 — Tighter side inset on phones. */
  .promo-bar { margin: 12px 16px !important; }

  /* #5 — Article meta row: stack the three items, left-aligned. */
  div[style*="display: flex"][style*="margin-top: 28px"][style*="border-top"] {
    flex-direction: column !important; align-items: flex-start !important; gap: 10px !important;
  }
  /* #5 — TL;DR: stack icon above text so the copy gets full width. */
  .tldr { flex-direction: column !important; gap: 14px !important; padding: 20px !important; }

  /* #6 — Smaller mono on phones. */
  .code-block { font-size: 11.5px !important; padding: 16px 14px !important; }

  /* #7 — Legend stacks; the data table scrolls horizontally while
     keeping real table layout (overrides the generic table fallback). */
  .bounce-curve-legend { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }
  .method-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .method-table thead, .method-table tbody { display: table; width: 100%; min-width: 460px; }
  .method-table th, .method-table td { white-space: nowrap; padding: 10px 12px !important; font-size: 12.5px !important; }

  /* #8 — Icon+text cards: icon on its own line, text full width. */
  .reason-card { grid-template-columns: 1fr !important; gap: 12px !important; padding: 20px !important; }

  /* #9 — The single flex <p> (methodology contact line) reads as a
     normal sentence with an inline icon instead of 1 word/line. */
  p[style*="display: flex"] { display: block !important; }
  p[style*="display: flex"] .icon { vertical-align: -3px; margin-right: 4px; }
}