/* SellingMachine — Mobile overlay
   Layered on top of styles.css. Targets ≤768px with extra care for ≤480px (iPhone SE class).
   Goal: airtight responsive behaviour on every page without touching the desktop design.
   ------------------------------------------------------------------------------------------ */

/* ============================================================
   1. Global safety — kill horizontal overflow at the root
   ============================================================ */
@media (max-width: 768px) {
  html, body { max-width: 100vw; overflow-x: hidden; }
  /* Anything with negative margins / rotated transforms shouldn't push past the viewport */
  section, header, footer { overflow-x: clip; }
  /* Word-wrap any obstinate long strings (URLs, e-mails, long tokens) */
  h1, h2, h3, h4, p, li, summary, blockquote { overflow-wrap: anywhere; word-break: normal; }
}

/* ============================================================
   2. Top strip + sticky nav — trim height on small screens
   ============================================================ */
@media (max-width: 480px) {
  /* Tighter top marquee */
  .bg-ink.text-white.text-xs.font-bold.uppercase.tracking-widest.py-2 { padding-top: 6px; padding-bottom: 6px; font-size: 10px; }
  /* Tighter sticky nav */
  header > div.max-w-7xl { padding-top: 10px !important; padding-bottom: 10px !important; }
  /* Logo a touch smaller */
  header a.font-display { font-size: 17px !important; }
  header a.font-display .font-serif { font-size: 22px !important; }
  /* Pull the hamburger dropdown's top offset down a few px to match the trimmed header */
  header nav.mobile-open { top: 82px !important; max-height: calc(100vh - 82px) !important; }
}

/* ============================================================
   3. Nav CTA at very small widths — keep it visible but compact
   ============================================================ */
@media (max-width: 767px) {
  /* Shrink hamburger button on all mobile widths so the nav row fits properly */
  .hamburger-btn { width: 36px !important; height: 36px !important; margin-right: 6px !important; border-radius: 8px !important; }
  .hamburger-btn svg { width: 16px !important; height: 16px !important; }
}
@media (max-width: 480px) {
  /* On smaller phones the nav row is tight — compress the Book CTA */
  header a.btn-blk { padding: 8px 14px !important; font-size: 12px !important; }
  header a.btn-blk > span { display: none; }
}
@media (max-width: 420px) {
  header a.btn-blk { padding: 7px 11px !important; font-size: 11px !important; }
  /* Logo "Sellingmachine" wordmark — keep it readable but compact */
  header a.font-display > span:last-child { font-size: 14px !important; }
}
@media (max-width: 360px) {
  /* On 320–360px screens, hide the nav CTA entirely — the hamburger has Book inside */
  header a.btn-blk { display: none; }
}

/* ============================================================
   4. Hero + headline scaling — tame the giant clamp() values
   ============================================================ */
@media (max-width: 768px) {
  /* Hero h1 — big "white-label Amazon team behind…" type heading */
  section.mesh h1 { font-size: clamp(36px, 9vw, 56px) !important; line-height: 0.92 !important; }
  /* Subpage hero h1 (mesh hero on /how-it-works, /build-vs-partner, etc.) */
  section.mesh h1.mt-8 { font-size: clamp(34px, 8.4vw, 54px) !important; }
  /* Standard section h2 (paper/paper-warm) */
  section.bg-paper h2.font-display, section.bg-paper-warm h2.font-display { font-size: clamp(30px, 7vw, 52px) !important; line-height: 1 !important; }
  /* Dark section h2 (bg-ink) */
  section.bg-ink h2.font-display { font-size: clamp(30px, 7vw, 52px) !important; line-height: 1 !important; }
  /* Lime founder section h2 */
  section.bg-lime h2.font-display { font-size: clamp(28px, 6.6vw, 48px) !important; line-height: 1 !important; }
  /* Mesh CTA h2 (final book-a-call block) */
  section.mesh h2 { font-size: clamp(34px, 8vw, 56px) !important; line-height: 0.95 !important; }
  /* Blockquote (testimonials) */
  blockquote.font-display { font-size: clamp(22px, 5.5vw, 32px) !important; line-height: 1.15 !important; }
  /* Article card h3 (case-study big numbers) */
  article.brutal-card-dark h3.font-display { font-size: 24px !important; }
}
@media (max-width: 480px) {
  /* On iPhone SE — go even smaller, kill the forced line breaks visually with a smaller font */
  section.mesh h1 { font-size: 36px !important; }
  section.mesh h2 { font-size: 34px !important; }
  /* Allow forced <br> to remain but with tight type, layout doesn't break */
}

/* ============================================================
   5. Hero spacing — too much top/bottom on phones
   ============================================================ */
@media (max-width: 768px) {
  section.mesh > div.max-w-7xl,
  section.mesh > div.max-w-5xl { padding-top: 48px !important; padding-bottom: 64px !important; }
  /* Hero internal grid gap */
  section.mesh .grid.md\:grid-cols-12 { gap: 32px !important; }
  /* The stat row below the headline */
  section.mesh .mt-20.grid { margin-top: 40px !important; padding-top: 24px !important; }
  /* Hero stat numbers slightly smaller so 2-up on 375px doesn't crowd */
  section.mesh .text-4xl.font-display.font-black.tnum { font-size: 30px !important; }
}

/* ============================================================
   6. Buttons — big inline padding is too much for mobile
   ============================================================ */
@media (max-width: 480px) {
  .btn-blk, .btn-out, .btn-lime, .btn-ghost-w {
    padding: 14px 22px !important;
    font-size: 14px !important;
    width: auto;
  }
  /* The mega CTAs that had style="padding: 22px 40px;" — beat them with !important */
  section.mesh a.btn-lime[style*="padding"],
  section.mesh a.btn-blk[style*="padding"],
  section a[style*="padding: 22px 40px"] { padding: 16px 26px !important; font-size: 14px !important; }
  /* Full-width stack on the smallest screens for primary CTA pairs */
  section.mesh .flex.flex-col.sm\:flex-row > a,
  section .flex.flex-col.sm\:flex-row > a { width: 100%; justify-content: center; }
}

/* ============================================================
   7. Brutal cards — tighten padding on mobile
   ============================================================ */
@media (max-width: 480px) {
  .brutal-card, .brutal-card-dark { border-radius: 22px; }
  .brutal-card.p-9, .brutal-card-dark.p-9 { padding: 24px !important; }
  .brutal-card.p-8, .brutal-card-dark.p-8 { padding: 22px !important; }
  .brutal-card.p-7, .brutal-card-dark.p-7 { padding: 20px !important; }
  /* Step numbers — 88px serifs are too tall on a 375px card */
  .step-num { font-size: 60px !important; }
  /* The big "01 02 03" numerals in problem cards (text-7xl) */
  .brutal-card .text-7xl { font-size: 56px !important; }
  /* Card icon block */
  .icon-blk { width: 48px; height: 48px; font-size: 22px; }
}

/* ============================================================
   8. Compare table — convert to stacked cards on mobile
   ============================================================ */
@media (max-width: 640px) {
  /* Hide the default table structure */
  table.compare thead { display: none; }
  table.compare, table.compare tbody, table.compare tr, table.compare td { display: block; width: 100%; }
  table.compare tr {
    border: 2px solid var(--ink);
    border-radius: 18px;
    margin-bottom: 18px;
    overflow: hidden;
    background: white;
  }
  table.compare tr td:first-child {
    background: var(--ink) !important;
    color: var(--paper) !important;
    font-weight: 800 !important;
    width: 100% !important;
    border: none !important;
    padding: 14px 18px !important;
    font-size: 11px !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  table.compare td {
    border: none !important;
    border-top: 1px solid rgba(0,0,0,0.1) !important;
    padding: 14px 18px !important;
    font-size: 14px !important;
  }
  table.compare td.us, table.compare td.them {
    position: relative;
    padding-left: 110px !important;
  }
  table.compare td.them::before {
    content: "Build/Hire";
    position: absolute;
    left: 18px;
    top: 14px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
  }
  table.compare td.us::before {
    content: "Partner";
    position: absolute;
    left: 18px;
    top: 14px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink);
  }
  /* When we have 3 .them cells, label them distinctly */
  table.compare tr td:nth-child(2)::before { content: "Build in-house"; }
  table.compare tr td:nth-child(3)::before { content: "Hire freelancers"; }
}

/* ============================================================
   9. Sticky note — don't let rotate clip
   ============================================================ */
@media (max-width: 768px) {
  .sticky-note { max-width: 100%; padding: 16px 18px; font-size: 14px; }
}

/* ============================================================
   10. Founder section — smaller portrait
   ============================================================ */
@media (max-width: 768px) {
  section.bg-lime .aspect-square { max-width: 180px !important; border-width: 6px !important; }
  section.bg-lime .aspect-square > div.absolute { font-size: 60px !important; }
}

/* ============================================================
   11. FAQ details — bigger tap targets
   ============================================================ */
@media (max-width: 480px) {
  details summary { padding: 4px 0; min-height: 48px; }
  details.py-7 { padding-top: 18px !important; padding-bottom: 18px !important; }
  details summary.font-display { font-size: 17px !important; }
  details summary .plus { font-size: 28px !important; }
  details p.mt-5 { margin-top: 12px !important; font-size: 15px !important; line-height: 1.55 !important; }
}

/* ============================================================
   12. Marquee — slow it down + tighten gap on small screens
   ============================================================ */
@media (max-width: 480px) {
  .marquee .text-2xl { font-size: 18px !important; }
  .marquee .text-3xl, .marquee .em-serif.text-3xl { font-size: 22px !important; }
  .marquee .flex.items-center.gap-12 { gap: 28px !important; }
  .marquee .flex.items-center.gap-10 { gap: 22px !important; }
}

/* ============================================================
   13. Vertical badges (vbadge — used in agency wins) — hide on mobile
   ============================================================ */
@media (max-width: 768px) {
  .vbadge { writing-mode: horizontal-tb; transform: none; opacity: 0.6; font-size: 11px; }
}

/* ============================================================
   14. Footer — tighten + better stack
   ============================================================ */
@media (max-width: 768px) {
  footer .max-w-7xl { padding-top: 48px !important; padding-bottom: 48px !important; }
  footer .grid.md\:grid-cols-12 { gap: 32px !important; }
  footer a.btn-lime { width: 100%; justify-content: center; }
}

/* ============================================================
   15. Increase tap target sizes on all interactive elements
   ============================================================ */
@media (pointer: coarse) {
  a, button, summary { min-height: 44px; }
  nav.mobile-open a { min-height: 48px; padding: 12px 0 !important; }
}

/* ============================================================
   16. Subpage hero — already softened in styles.css, push a bit further
   ============================================================ */
@media (max-width: 480px) {
  .subhero { padding: 40px 0 56px !important; }
}

/* ============================================================
   17. Hero tag/tape strip — prevent overflow on small screens
   ============================================================ */
@media (max-width: 480px) {
  .tape { font-size: 10px !important; padding: 5px 10px !important; }
  .flex.flex-wrap.items-center.gap-3 .tape { margin-bottom: 4px; }
}

/* ============================================================
   18. The "Sellingmachine" wordmark in nav — keep readable
   ============================================================ */
@media (max-width: 360px) {
  header a.font-display .font-serif { display: none; }
  header a.font-display > span:last-child::after { content: "machine"; font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-size: 18px; padding-left: 2px; }
}

/* ============================================================
   19. Anti-zoom on form inputs (prevents iOS auto-zoom into inputs)
   ============================================================ */
@media (max-width: 768px) {
  input, select, textarea { font-size: 16px !important; }
}

/* ============================================================
   20. Reduced-motion friendly marquee + animation respect
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .marquee { animation: none !important; }
  .fade-up { animation: none !important; }
  * { transition: none !important; }
}