/* ============================================================
   Bold GEO — Responsive fixes
   Load AFTER /styles.176394a2eb.css so these rules win.
   Every rule is guarded by a media query or targets a specific
   class already used by the site — no invasive rewrites.
   ============================================================ */

/* ------------------------------------------------------------
   1. HORIZONTAL OVERFLOW — kill the 60–100px sideways scroll
   Root cause: .bracket-frame decorative corners use
   right:-7px / left:-7px in a positioned wrapper whose parent
   is `overflow: visible`. On mobile that adds ~7px per side to
   the scroll width; combined with .grid-cols-12 min-content
   pressure it produces ~60-99px of overflow.
   Fix: clip the page-wide container horizontally on small
   screens (does not affect drop-shadows or vertical animation).
   ------------------------------------------------------------ */
html, body {
  overflow-x: hidden;      /* belt */
  overscroll-behavior-x: none;
}
@media (max-width: 768px) {
  .page-wide, .page {
    overflow-x: clip;      /* suspenders — modern browsers */
  }
}

/* ------------------------------------------------------------
   2. .receipt CARDS — hard-coded 380px overflows 375/414 mobile
   Original: `.receipt { flex: 0 0 380px }`
   Fix: cap at 88vw on narrow phones so a card + peek of the
   next one is always visible, keeps the marquee affordance.
   ------------------------------------------------------------ */
@media (max-width: 640px) {
  .receipt {
    flex: 0 0 88vw;
    max-width: 340px;
  }
}

/* ------------------------------------------------------------
   3. PRICE TABLE — wrapper uses `overflow-hidden`, clipping
   the last two plan columns on any viewport below ~720px.
   The generic `.scroll-x` helper already exists — we upgrade
   the specific wrapper class combination used on this page.
   ------------------------------------------------------------ */
.rounded-xl.overflow-hidden.border:has(> .price-table) {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}
/* :has() fallback for older engines — pin overflow on any
   direct parent of .price-table below md */
@media (max-width: 767px) {
  .price-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    min-width: 100%;
  }
  .price-table thead, .price-table tbody { display: table; width: max-content; min-width: 100%; }
  .price-table th, .price-table td {
    padding: 12px 12px;
    font-size: 13px;
  }
}

/* ------------------------------------------------------------
   4. HEADER NAV — 3-track grid breaks between 768–1100px
   "The Method" wraps, "Log in" collides with "FAQ".
   Fixes:
   a. nav-link never wraps its label
   b. shrink horizontal padding on mid-widths
   c. hide the desktop nav below 900px and show a minimal
      logo + CTA row (progressive enhancement, no JS needed
      — the header still functions, anchor links available
      via the § markers further down the page)
   ------------------------------------------------------------ */
.nav-link {
  white-space: nowrap;
}
@media (max-width: 1100px) {
  header .nav-link { padding: .5rem .55rem; font-size: 14px; }
  header .brand-logo { font-size: 22px; }
}
@media (max-width: 900px) {
  header .page-wide {
    grid-template-columns: auto 1fr auto !important;
  }
  header nav[aria-label], header .justify-self-center {
    display: none !important;
  }
  header .btn-primary { padding: .55rem .85rem; font-size: 14px; }
  header .btn-ghost   { padding: .5rem .6rem;  font-size: 14px; white-space: nowrap; }
}

/* ------------------------------------------------------------
   5. HERO TYPOGRAPHY — 116px h1 renders on mobile due to
   `text-[28px]` … `lg:text-[…]` ladder using clamp-ish rems.
   On some phones the display serif shows unbalanced descenders
   next to the tight leading-[0.85]. Force fluid scale.
   ------------------------------------------------------------ */
/* Scoped to mobile only — desktop keeps the original 116px
   inline-styled display setting untouched.
   !important is required: the hero h1 carries an inline
   style="font-size:clamp(56px, 7.8vw, 116px);line-height:0.9". */
@media (max-width: 640px) {
  h1.font-display {
    font-size: clamp(2.25rem, 11vw, 3.25rem) !important;
    line-height: 1.05 !important;
    overflow-wrap: break-word;
  }
  /* THE root cause of the 99px page overflow: .grid-cols-12
     uses gap-x-10 (40px). 11 gutters x 40px = 440px of gap in
     a 375px container — tracks collapse to 0 and every
     col-span-12 cell renders 440px wide. On a single-column
     phone layout the column gap is pure phantom width. */
  .grid-cols-12 { column-gap: 12px; }
  .grid-cols-12 > * { min-width: 0; max-width: 100%; }
}
@media (max-width: 480px) {
  h1.font-display { letter-spacing: -0.035em; }
  .dropcap:first-letter { font-size: 4em; }  /* was 5.6em — spills on 375px */
}

/* ------------------------------------------------------------
   6. ENGINE ROW — fixed 130px label column starves values on
   narrow phones (33%+ of usable width just for the engine name).
   ------------------------------------------------------------ */
@media (max-width: 640px) {
  .engine-row {
    grid-template-columns: 92px 1fr auto;
    gap: 10px;
    padding: 12px 0;
  }
  .engine-name { font-size: 12px; }
  .engine-val  { font-size: 12px; min-width: 48px; }
}

/* ------------------------------------------------------------
   7. FORM ROW — email input + button share a flex row without
   flex-wrap on mobile. When the audit button is present next
   to the input the two share `gap-2` and the input shrinks to
   ~140px. Force stacking below sm.
   ------------------------------------------------------------ */
@media (max-width: 520px) {
  form.max-w-\[560px\] .flex.gap-2 { flex-direction: column; align-items: stretch; }
  form.max-w-\[560px\] .btn-primary { justify-content: center; }
}

/* ------------------------------------------------------------
   8. SECTION PADDING — original `.sec-pad` drops from 120px
   to 72px only at ≤768px. Add an intermediate step for large
   phones so vertical rhythm isn't jarring.
   ------------------------------------------------------------ */
@media (max-width: 480px) {
  .sec-pad { padding-top: 56px; padding-bottom: 56px; }
}

/* ------------------------------------------------------------
   9. ULTRA-WIDE (≥1600px) — content locked to 1180px leaves
   360px+ of empty gutters. Not a bug, but the grid background
   (.bg-grid-cream) keeps drawing across all of it which reads
   as unfinished on 1920+ monitors. Fade the grid at the edges.
   ------------------------------------------------------------ */
@media (min-width: 1600px) {
  body {
    background:
      linear-gradient(90deg, var(--cream) 0, transparent 12%, transparent 88%, var(--cream) 100%),
      var(--cream);
  }
  /* note: container max-widths intentionally left at the
     original 1180/1320 — changing them altered hero line
     wrapping at 1920. */
}

/* ------------------------------------------------------------
   10. NAV CTA "Start free" — wraps into 2 lines on 375px
   because `padding: .78rem 1.15rem` + arrow + label > 110px
   at a narrow viewport where the header CTA column is only ~110px.
   Force nowrap and a smaller variant below 400px.
   ------------------------------------------------------------ */
.btn-primary, .btn-secondary, .btn-ghost { white-space: nowrap; }
@media (max-width: 400px) {
  header .btn-primary { padding: .55rem .8rem; font-size: 14px; }
}

/* ------------------------------------------------------------
   11. BRACKET-FRAME decorative corners — their `right:-7px`
   creates 7px of phantom right-side overflow inside the
   .grid-cols-12 hero cell. Constrain them so they never
   extend past the viewport edge on mobile.
   ------------------------------------------------------------ */
@media (max-width: 640px) {
  .bracket-frame .br.tr,
  .bracket-frame .br.br { right: 0; }
  .bracket-frame .br.tl,
  .bracket-frame .br.bl { left: 0; }
}

/* ------------------------------------------------------------
   12. IMG / MEDIA — belt-and-suspenders max-width so no
   future <img> or embedded SVG can blow the layout.
   (Base Tailwind sets img,video max-width:100% already, but
   iframes and object embeds are not covered.)
   ------------------------------------------------------------ */
iframe, embed, object, video, svg { max-width: 100%; }