/* 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; }
  /* iOS Safari rubber-band overscroll at the bottom of the page shows the html bg
     below the footer. Set html bg to the footer ink colour so the page reads as
     continuous black at the bottom — no cream "empty space" effect. */
  html { background-color: var(--ink); }
  body { background-color: var(--paper); }
  /* 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 sizing handled below in the unified ≤767px block) */
  /* 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) {
  /* Hamburger sized for easy tap (44x44 Apple HIG min). */
  .hamburger-btn { width: 42px !important; height: 42px !important; margin-right: 4px !important; border-radius: 10px !important; }
  .hamburger-btn svg { width: 18px !important; height: 18px !important; }
  /* Mobile logo — keep full "Sellingmachine" wordmark, but smaller so nav row fits */
  header a.font-display { font-size: 14px !important; gap: 6px !important; }
  header a.font-display > span:first-child { width: 32px !important; height: 32px !important; }
  header a.font-display > span:last-child { display: inline !important; font-size: 13px !important; }
  header a.font-display .font-serif { font-size: 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; }
}
@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;
  }
  /* Stack the label above the value vertically — avoids overlap with long labels like "Hire freelancers" */
  table.compare td.us, table.compare td.them {
    position: static !important;
    padding: 12px 16px 14px !important;
  }
  table.compare td.them::before,
  table.compare td.us::before {
    display: block;
    margin-bottom: 4px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
  }
  table.compare td.them::before { content: "Build/Hire"; }
  table.compare td.us::before { content: "Partner"; color: var(--ink); }
  /* The two .them columns get distinct labels */
  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 — compact stack for mobile
   ============================================================ */
@media (max-width: 768px) {
  footer .max-w-7xl { padding-top: 36px !important; padding-bottom: 24px !important; }
  footer .grid.md\:grid-cols-12 { gap: 22px !important; margin-bottom: 24px !important; }
  footer a.btn-lime { display: inline-flex !important; width: auto !important; padding: 12px 20px !important; font-size: 13px !important; }
  footer .text-xs.font-extrabold.uppercase.tracking-widest { margin-bottom: 8px !important; font-size: 11px !important; }
  footer ul.space-y-2 > li { margin-top: 4px !important; }
  footer p.text-white\/60 { font-size: 14px !important; line-height: 1.45 !important; margin-bottom: 12px !important; }
  /* Pills row below the description */
  footer .mt-6.flex.flex-wrap.gap-2 { margin-top: 12px !important; gap: 6px !important; }
  footer .mt-6.flex.flex-wrap.gap-2 span { font-size: 10px !important; padding: 4px 10px !important; }
  footer .border-t { padding-top: 16px !important; }
  footer .text-xs.text-white\/50 { font-size: 11px !important; }
}

/* ============================================================
   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) {
  /* Use padding-top/bottom only so the page's horizontal padding (px-6) is preserved.
     Earlier `padding: 40px 0 56px` shorthand wiped the left/right padding to 0. */
  .subhero { padding-top: 40px !important; padding-bottom: 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
   ============================================================ */
/* (Removed old ≤360 wordmark-rewriter; the wordmark is now hidden across all mobile widths.) */

/* ============================================================
   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; }
}