/* ============================================================
   ProWritingCrew — Mobile optimization layer
   Append AFTER crew/styles.css (do not replace).
   ============================================================ */

html, body { max-width: 100vw; overflow-x: hidden; }
img, svg, video { max-width: 100%; height: auto; }

/* Injected by mobile-nav.js — hidden on desktop, revealed ≤720px below */
.mobile-burger, .mobile-drawer { display: none; }

@media (max-width: 720px) {
  .container { padding: 0 18px; }

  /* Tape ticker — shrink */
  .tape { padding: 6px 0; font-size: 10.5px; }
  .tape-track { gap: 40px; }
  .tape-track span { gap: 40px; }

  /* NAV */
  .nav-inner { padding: 12px 0; gap: 10px; flex-wrap: nowrap; }
  .logo { font-size: 22px; }
  .logo .pro, .logo .crew { padding: 6px 8px; }
  .nav-links { display: none; }
  .nav-cta { margin-left: auto; gap: 8px; }
  .nav-cta .btn--ghost { display: none; }
  .nav-cta .btn { padding: 10px 12px; font-size: 13px; box-shadow: 3px 3px 0 var(--ink); }
  .nav-cta .btn:hover { transform: none; box-shadow: 3px 3px 0 var(--ink); }

  .mobile-burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    background: var(--bone); border: 3px solid var(--ink);
    box-shadow: 3px 3px 0 var(--ink);
    cursor: pointer; padding: 0;
  }
  .mobile-burger span,
  .mobile-burger span::before,
  .mobile-burger span::after {
    display: block; width: 20px; height: 3px; background: var(--ink);
  }
  .mobile-burger span { position: relative; }
  .mobile-burger span::before,
  .mobile-burger span::after { content: ""; position: absolute; left: 0; }
  .mobile-burger span::before { top: -7px; }
  .mobile-burger span::after  { top:  7px; }

  .mobile-drawer {
    position: fixed; inset: 0; z-index: 100;
    background: var(--bone);
    padding: 80px 24px 32px;
    display: none; flex-direction: column;
    overflow-y: auto;
  }
  .mobile-drawer.open { display: flex; }
  .mobile-drawer a {
    display: block; padding: 16px 0;
    font-family: "Anton", sans-serif;
    font-size: 30px; text-transform: uppercase; letter-spacing: 0.01em;
    color: var(--ink); text-decoration: none;
    border-bottom: 3px solid var(--ink);
  }
  .mobile-drawer .btn { margin-top: 28px; align-self: flex-start; }
  .mobile-drawer-close {
    position: absolute; top: 16px; right: 20px;
    width: 44px; height: 44px;
    background: var(--hot); color: var(--bone);
    border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
    font-family: "Anton", sans-serif; font-size: 22px;
    cursor: pointer; line-height: 1;
  }

  /* HERO */
  .hero { padding: 40px 0 56px; }
  .hero h1 { font-size: clamp(54px, 16vw, 84px); }
  .hero h1 .we { padding: 4px 14px 8px; }
  .hero h1 .write { text-shadow: 3px 3px 0 var(--ink), 6px 6px 0 var(--acid); }
  .hero h1 .you-sleep { font-size: 0.5em; margin-top: 8px; }
  .hero-sub { grid-template-columns: 1fr; gap: 28px; margin-top: 36px; }
  .hero-lede { font-size: 17px; }
  .sticker { display: none; }

  /* MANIFESTO */
  .manifesto { padding: 18px 0; }
  .manifesto-track { font-size: 32px; gap: 40px; }
  .manifesto-track span { gap: 40px; }

  /* SECTIONS */
  section { padding: 60px 0; }
  .section-title { font-size: clamp(40px, 12vw, 64px); }
  .section-sub { font-size: 17px; margin-bottom: 36px; }

  /* PROCESS */
  .process { grid-template-columns: 1fr; gap: 18px; }
  .process-card { padding: 22px 20px; min-height: auto; box-shadow: 4px 4px 0 var(--ink); transform: none !important; }
  .process-card .num { font-size: 44px; }
  .process-card h3 { font-size: 22px; }

  /* CALC */
  .calc-out { grid-template-columns: 1fr; box-shadow: 6px 6px 0 var(--acid); }
  .calc-side { padding: 28px 22px; }
  .calc-side h3 { font-size: 28px; margin-bottom: 22px; }
  .chip { padding: 10px 14px; font-size: 13px; min-height: 40px; }
  .calc-price { padding: 28px 22px; border-left: none; border-top: 3px solid var(--ink); }
  .calc-price .pn { font-size: 72px; }

  /* CREW CARDS */
  .crew-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .card { padding: 12px; box-shadow: 4px 4px 0 var(--ink); transform: none !important; }
  .card h4 { font-size: 18px; }
  .card .tag { font-size: 10px; }
  .card .meta { font-size: 10px; }
  .card-corner, .card-corner-2 { font-size: 14px; }

  /* SUBJECT STICKERS */
  .sk { font-size: 14px; padding: 9px 14px; box-shadow: 2px 2px 0 var(--ink); transform: none !important; }
  .sk:hover { transform: none; }

  /* TESTIMONIALS */
  .testimonial-grid { grid-template-columns: 1fr; gap: 22px; }
  .tstm {
    padding: 22px 20px;
    box-shadow: 4px 4px 0 var(--ink);
    transform: none !important;
    margin-top: 0 !important;
  }
  .tstm p { font-size: 16px; }
  .tstm .qm { font-size: 44px; }

  /* PROMISES */
  .promises { grid-template-columns: 1fr; }
  .promise { padding: 24px 22px; border-right: none; border-bottom: 3px solid var(--ink); }
  .promise:last-child { border-bottom: none; }
  .promise .pnum { font-size: 48px; margin-bottom: 10px; }
  .promise h4 { font-size: 22px; }
  .promise p { font-size: 14px; }

  /* FINAL */
  .final { padding: 80px 0 90px; }
  .final h2 { font-size: clamp(56px, 16vw, 100px); }
  .final p { font-size: 17px; margin-bottom: 28px; }
  .float-stk { display: none; }

  /* FOOTER */
  footer { padding: 44px 0 22px; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 28px; }
  .foot-grid > div:first-child { grid-column: 1 / -1; }
  .foot-bot { flex-direction: column; gap: 8px; align-items: flex-start; }

  /* SUBPAGE */
  .page-hero { padding: 36px 0 28px; }
  .page-hero-grid { grid-template-columns: 1fr; gap: 24px; }
  .page-hero h1 { font-size: clamp(44px, 13vw, 72px); margin: 12px 0 22px; }
  .page-hero h1 .hot { text-shadow: 3px 3px 0 var(--ink), 5px 5px 0 var(--acid); }
  .page-hero .lede { font-size: 17px; }

  .prose { font-size: 16px; }
  .prose h2 { font-size: 30px; margin: 40px 0 14px; }
  .prose h3 { font-size: 20px; }
  .prose blockquote { font-size: 18px; padding: 16px 18px; box-shadow: 4px 4px 0 var(--ink); }

  .tabs { gap: 4px; }
  .tab { padding: 10px 14px; font-size: 12px; box-shadow: 2px 2px 0 var(--ink); }

  .stat-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .stat { padding: 20px 16px; box-shadow: 3px 3px 0 var(--ink); }
  .stat .n { font-size: 40px; }
  .stat .l { font-size: 11px; }

  .sample-grid { grid-template-columns: 1fr; gap: 18px; }
  .sample { padding: 20px; box-shadow: 4px 4px 0 var(--ink); transform: none !important; }
  .sample h3 { font-size: 19px; }

  .filter-bar { gap: 6px; }
  .filter { padding: 8px 12px; font-size: 12px; min-height: 40px; box-shadow: 2px 2px 0 var(--ink); }

  .policy-page { padding: 48px 0 64px; }
  .policy-grid { grid-template-columns: 1fr; gap: 22px; }
  .policy-nav { display: flex; flex-wrap: wrap; gap: 6px; position: static; }
  .policy-nav a { padding: 8px 12px; font-size: 12px; box-shadow: 2px 2px 0 var(--ink); }

  .faq-q { font-size: 18px; gap: 12px; }
  .faq-q .plus { width: 28px; height: 28px; flex-shrink: 0; }
  .faq-a p { font-size: 15px; }

  .form-grid { gap: 14px; }
  .form-row { grid-template-columns: 1fr; gap: 14px; }
  .field input, .field textarea, .field select { padding: 12px 14px; font-size: 16px; box-shadow: 2px 2px 0 var(--ink); }
}

@media (max-width: 480px) {
  .container { padding: 0 14px; }
  .crew-grid { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: 1fr; }
  .hero-cta .btn { width: 100%; text-align: center; }
  .calc-price .pn { font-size: 60px; }
  .section-title { font-size: clamp(36px, 11vw, 52px); }
  .final h2 { font-size: clamp(48px, 14vw, 80px); }
}

/* ============================================================
   Subpage clipping fixes (added 2026-05-24)
   Subpages set grid columns via inline style="" and per-page <style>
   blocks that never collapsed on phones, so multi-column content ran
   off the right edge and the root overflow-x:hidden clipped it.
   Collapse those inline grids to one column. Selectors are anchored to
   "grid-template-columns: " so icon/label rows (60px 1fr) and the live
   damage matrix (1.4fr repeat(...)) are NOT matched. !important beats
   the inline style attributes and the late-loading <style> blocks.
   ============================================================ */
@media (max-width: 720px) {
  body { overflow-wrap: break-word; }            /* long emails/words wrap instead of overflowing */

  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1.4fr"],
  [style*="grid-template-columns: 1fr 1.6fr"],
  [style*="grid-template-columns: 1.4fr 1fr"],
  [style*="grid-template-columns: 240px 1fr"],
  [style*="grid-template-columns: 80px 1fr 2fr"],
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns: repeat(5, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .form-row { grid-template-columns: 1fr !important; }          /* name/email stack */
  [style*="position: sticky"] { position: static !important; }  /* unstick FAQ category rail */
  [style*="padding: 64px;"],
  [style*="padding: 50px;"] { padding: 28px !important; }        /* trim oversized feature-card padding */

  /* Keep inline-grid columns proportional so header cells stay lined up with
     the price rows below them. */
  [style*="grid-template-columns"] > * { min-width: 0; }

  /* Live damage matrix -> swipe horizontally within its own box */
  .dmg-table { overflow-x: auto !important; }
  .dmg-row { min-width: 640px; }

  /* Crew cards: drop rotation so they don't overflow (portraits already 3/4 uniform) */
  .card { transform: none !important; }
}