/* ============================================================
   Mobile overrides — kicks in at ≤720px
   Most layouts use inline-styled grids, so we use !important
   to override grid-template-columns and tighten spacing.
   ============================================================ */

@media (max-width: 720px) {

  /* General */
  .wrap { padding: 0 20px !important; }

  /* ── Top nav ─────────────────────────────────────────────── */
  header .wrap { height: 60px !important; gap: 12px !important; }
  header nav { display: none !important; }
  header img[alt="detour"] { height: 20px !important; }
  header .wrap > div:last-child > span { display: none !important; }   /* hide price next to CTA */
  header .wrap > div:last-child > button { min-height: 44px; padding: 11px 16px !important; font-size: 13px !important; }

  /* ── Hero ────────────────────────────────────────────────── */
  #buy { padding: 32px 0 56px !important; }
  #buy > .wrap {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
  /* book + thumb strip: stack vertically with thumbs as a horizontal scroller below */
  #buy > .wrap > div:first-child {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  /* book first, thumbs below */
  #buy > .wrap > div:first-child > div:first-child { order: 2; }
  #buy > .wrap > div:first-child > div:last-child  { order: 1; }
  /* thumb row → small, centered, side-by-side */
  #buy > .wrap > div:first-child > div:first-child {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }
  #buy > .wrap > div:first-child > div:first-child > div {
    flex: 0 0 auto !important;
    width: 76px !important;
    max-width: 76px !important;
    border-radius: 6px !important;
  }
  /* book image — 20% smaller so thumbs are visible in one viewport */
  #buy > .wrap > div:first-child > div:last-child {
    width: 80% !important;
    margin: 0 auto !important;
  }

  /* hero copy column */
  #buy h1 { font-size: 40px !important; letter-spacing: -1px !important; line-height: 1.05 !important; }
  #buy h1 span { font-size: 40px !important; }
  #buy > .wrap > div:last-child { gap: 18px !important; }
  /* big price row: no wrap, button left, price right */
  #buy button:not([aria-label="Close preview"]) { min-height: 52px !important; font-size: 16px !important; padding: 16px 24px !important; }
  #buy > .wrap > div:last-child > div:nth-child(3) {
    flex-wrap: nowrap !important;
    gap: 14px !important;
    align-items: center !important;
  }
  #buy > .wrap > div:last-child > div:nth-child(3) > div { flex-shrink: 0; }
  /* shrink price text to fit beside button on narrow screens */
  #buy > .wrap > div:last-child > div:nth-child(3) > span > span:first-child { font-size: 22px !important; }
  #buy > .wrap > div:last-child > div:nth-child(3) > span > span:last-child  { font-size: 14px !important; }

  /* ── FeatureBar ──────────────────────────────────────────── */
  #features .wrap { padding: 32px 20px !important; }
  #features .wrap > div {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  /* ── ForWho ──────────────────────────────────────────────── */
  #for-who { padding: 56px 0 !important; }
  #for-who > .wrap {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  /* guide cover image — 20% smaller */
  #for-who > .wrap > div:first-child {
    width: 80% !important;
    margin: 0 auto !important;
  }
  #for-who h2 { font-size: 34px !important; letter-spacing: -1px !important; }

  /* ── FAQ ─────────────────────────────────────────────────── */
  #faq { padding: 56px 0 !important; }
  #faq > .wrap {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  #faq h2 { font-size: 34px !important; letter-spacing: -1px !important; }
  #faq button { padding: 18px 0 !important; min-height: 64px; }
  #faq button > span:first-child { font-size: 17px !important; }

  /* ── Reviews ─────────────────────────────────────────────── */
  #reviews { padding: 56px 0 !important; }
  #reviews .wrap > div:first-child { gap: 14px !important; margin-bottom: 28px !important; }
  #reviews h2 { font-size: 32px !important; letter-spacing: -1px !important; }
  /* the cards grid is the second child div */
  #reviews .wrap > div:last-child {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* ── Closing CTA ─────────────────────────────────────────── */
  #closing-cta > .wrap > div:last-child > div:first-child { display: none !important; }
  #closing-cta { padding: 64px 0 !important; }
  #closing-cta > .wrap {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
  #closing-cta h2 { font-size: 38px !important; letter-spacing: -1px !important; }
  #closing-cta button { min-height: 52px !important; font-size: 16px !important; padding: 16px 24px !important; }
  /* price to the right of CTA button, no wrap */
  #closing-cta > .wrap > div:first-child > div:nth-child(3) {
    flex-wrap: nowrap !important;
    gap: 14px !important;
    align-items: center !important;
  }
  #closing-cta > .wrap > div:first-child > div:nth-child(3) > span > span:first-child { font-size: 22px !important; }
  #closing-cta > .wrap > div:first-child > div:nth-child(3) > span > span:last-child  { font-size: 14px !important; }

  /* ── Footer ──────────────────────────────────────────────── */
  .site-footer { padding: 40px 0 32px !important; }
  .site-footer > .wrap:first-child {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .site-footer > .wrap:last-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-top: 36px !important;
  }

  /* ── Lightbox: tighten padding so close button doesn't clip ── */
  /* (PreviewLightbox renders into body, no nesting under sections) */

  /* Touch-friendly nav anchors generally */
  a, button { -webkit-tap-highlight-color: rgba(242,100,25,0.18); }
}