/* ============================================================
   Said & Saved — Responsive / Mobile
   ============================================================ */

/* --- Tablet (max 900px) --- */
@media (max-width: 900px) {
  .spread {
    grid-template-columns: 1fr;
    padding: 0 var(--sp-4);
  }

  .spread__gutter {
    display: none;
  }

  .spread__page {
    padding: var(--sp-6) var(--sp-4);
    border-bottom: 1px solid var(--rule-page);
  }

  .spread__page--verso,
  .spread__page--recto {
    padding: var(--sp-6) var(--sp-4);
  }

  .spread__page-footer {
    justify-content: space-between !important;
  }

  .pricing-cols {
    grid-template-columns: 1fr;
    max-width: 480px;
  }

  .pricing-col {
    border-right: none;
    border-bottom: 1px solid var(--rule-page);
  }

  .pricing-col:last-child {
    border-bottom: none;
  }

  .comparison-grid {
    grid-template-columns: 1fr;
  }

  .privacy-cols {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }
}

/* --- Mobile (max 768px) --- */
@media (max-width: 768px) {
  :root {
    --sp-12: 64px;
    --sp-16: 80px;
  }

  /* Nav */
  .site-nav__links {
    display: none;
  }

  .site-nav {
    padding: 12px var(--sp-3);
  }

  /* Hero book */
  .hero-section {
    padding: 80px var(--sp-3) var(--sp-8);
    min-height: auto;
  }

  .book__spine {
    width: 20px;
    min-height: 460px;
  }

  .book__spine-text {
    font-size: 8px;
    letter-spacing: 0.16em;
  }

  .book__cover {
    width: 280px;
    min-height: 460px;
    padding: 24px 28px;
  }

  .book__title-said,
  .book__title-saved {
    font-size: 40px;
  }

  .book__title-and {
    font-size: 34px;
  }

  .book__tagline {
    font-size: 12px;
  }

  /* Chapter openers */
  .chapter-opener {
    padding: var(--sp-8) var(--sp-3);
  }

  .chapter-opener__title {
    font-size: 28px;
  }

  /* Memoir sample */
  .memoir-page {
    padding: 36px 28px;
  }

  .memoir-page__prose {
    font-size: 16px;
  }

  .memoir-page__attribution {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }

  /* Chat */
  .chat-phone {
    max-width: 100%;
  }

  .chat-stats {
    gap: var(--sp-4);
  }

  /* Back cover */
  .back-cover {
    padding: var(--sp-12) var(--sp-3);
  }

  .back-cover .btn-cta {
    padding: 16px 28px;
    font-size: 14px;
  }

  /* Comparison */
  .comparison-grid {
    grid-template-columns: 1fr;
    margin: 0 var(--sp-3);
  }

  /* Spread section (already handled above, reinforce) */
  .spread {
    padding: 0 var(--sp-3);
  }

  /* Pricing */
  .pricing-section {
    padding: var(--sp-8) var(--sp-3);
  }

  /* Drop cap on mobile — reduce size */
  .drop-cap::first-letter {
    font-size: 4em;
  }

  /* Chat bubbles tighter */
  .chat-bubble {
    font-size: 13px;
  }

  /* Back cover privacy text */
  .back-cover__privacy {
    font-size: 12px;
    padding: 0 var(--sp-2);
  }
}

/* --- Small mobile (max 480px) --- */
@media (max-width: 480px) {
  .book__cover {
    width: 240px;
    padding: 20px 22px;
  }

  .book__title-said,
  .book__title-saved {
    font-size: 34px;
  }

  .book__title-and {
    font-size: 28px;
  }

  .memoir-page {
    padding: 28px 20px;
  }

  .memoir-page__prose {
    font-size: 15px;
    line-height: 1.85;
  }

  .stat-row {
    gap: var(--sp-4);
  }

  .trust-row {
    gap: var(--sp-3);
  }

  .trust-badge {
    font-size: 11px;
  }
}

/* --- Print (hide interactive elements) --- */
@media print {
  .site-nav,
  .book__cta,
  .btn,
  .back-cover,
  .trust-row,
  .chat-section {
    display: none;
  }
}