/* ==== Wide desktop trim ≤ 1200px ==== */
@media (max-width: 1200px) {
  .main-nav a { font-size: var(--fs-sm); padding: var(--sp-2); }
  .main-nav { column-gap: 0; }
  .main-nav a::after { left: var(--sp-2); right: var(--sp-2); }
}

/* ==== Laptop ≤ 1024px — 9 nav items no longer fit beside the brand ==== */
@media (max-width: 1024px) {
  :root { --header-h: 76px; }

  .site-header { position: sticky; }
  .nav-toggle { display: flex; }
  .main-nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    z-index: var(--z-nav);
    background: var(--surface); border-top: 1px solid var(--border);
    flex-direction: column; align-items: stretch;
    max-width: none; margin-left: 0;
    padding: var(--sp-2) var(--gutter) var(--sp-4);
    box-shadow: var(--sh-lg);
    max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
  }
  .main-nav.open { display: flex; }
  .main-nav a {
    display: flex; align-items: center; min-height: 48px;
    font-size: var(--fs-md); padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--border);
    border-radius: 0;
  }
  .main-nav a:last-child { border-bottom: none; }
  .main-nav a::after { display: none; }

  .hero { padding: var(--sp-12) 0 var(--sp-16); }
  .hero-grid { grid-template-columns: 1fr; gap: var(--sp-10); }
  .hero-cover { max-width: 340px; margin: 0 auto; }
  .hero-content h1 { font-size: var(--fs-3xl); }

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

  .check-list.two-col { columns: 1; }
  .previews { grid-template-columns: repeat(3, 1fr); }
  .previews--pro { grid-template-columns: repeat(3, 1fr); }
  .related-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
}

/* ==== Mobile ≤ 768px ==== */
@media (max-width: 768px) {
  :root { --header-h: 68px; --gutter: 16px; }

  /* room for the sticky download bar */
  body { padding-bottom: 76px; }

  /* Touch targets must clear 44px */
  .topbar-inner { min-height: 44px; }
  .topbar-link { font-size: var(--fs-xs); min-height: 44px; }
  .social-square { width: 36px; height: 36px; }

  .brand { min-height: 44px; }
  .brand-tagline { display: none; }
  .brand-name { font-size: var(--fs-lg); }

  .social-square-dark { width: 44px; height: 44px; }
  .footer-links li { margin-bottom: 0; }
  .footer-links a { display: flex; align-items: center; min-height: 44px; }

  .hero { padding: var(--sp-3) 0 var(--sp-12); }

  /* Cover beside the title instead of stacked above it — stacking a 260px cover
     pushes the Pro button ~160px further down. 108px is the widest the cover can be
     before the content column drops under 200px and the nowrap download button
     overflows the viewport (measured: 140px cover caused 25px of h-scroll at 360). */
  .hero-grid { grid-template-columns: 108px minmax(0, 1fr); gap: var(--sp-3); align-items: start; }
  .hero-cover { max-width: none; margin: 0; }
  .hero-content h1 { font-size: var(--fs-lg); margin: 0 0 var(--sp-2); }

  /* The content column is ~238px here, but the label needs ~130 and the countdown
     ~112 plus padding — one row cannot hold both, and forcing it wraps the LABEL
     onto three lines. Two centred rows are shorter than that and read cleanly. */
  .flash-header {
    padding: var(--sp-2) var(--sp-4); flex-wrap: wrap;
    justify-content: center; row-gap: var(--sp-1);
  }
  .flash-label { font-size: var(--fs-sm); white-space: nowrap; }
  .cd-box { min-width: 32px; font-size: var(--fs-base); }
  .flash-body { padding: var(--sp-4) var(--sp-3); }
  .offer-grid { gap: var(--sp-3); }
  .offer-card { padding: var(--sp-3); }
  /* Pro first on a phone. Two readable cards cannot share a 667px screen, so the
     tier that has to be seen without scrolling goes on top — this page exists to
     reach people already spending big, not to re-sell the beginner edition.
     Caveat: this is a visual reorder only, so keyboard tab order stays basic → pro. */
  .offer-card--pro { order: -1; }
  /* The basic tier is self-explanatory at a glance; the Pro tier is the one that
     needs to justify itself, so only its points survive the narrow layout. */
  .offer-card:not(.offer-card--pro) .offer-points { display: none; }
  .offer-card--pro .offer-points { margin: var(--sp-2) 0 var(--sp-3); }
  .offer-card--pro .offer-points li:nth-child(n + 3) { display: none; }
  /* the anchor line earns its place on desktop; on a phone it is one more scroll */
  .price-anchor { display: none; }
  /* 4 proof thumbs at ~80px are unreadable and add scroll — desktop-only garnish */
  .offer-proof { display: none; }
  .author-note { margin-top: var(--sp-3); }
  /* "รับฟรีวันนี้" repeats what "ฟรี" and the struck-price line below already say;
     the struck price keeps the number but drops its own repeat of "free today" */
  .offer-card .price-label { display: none; }
  .offer-card .price-old strong { display: none; }
  .offer-tier { margin-bottom: var(--sp-2); }
  .price-big { font-size: var(--fs-3xl); }
  .buy-btn { width: 100%; font-size: var(--fs-md); padding: var(--sp-3); }
  .trust-row { flex-direction: column; gap: var(--sp-2); align-items: center; }

  .gray-band { padding: var(--sp-12) 0 var(--sp-16); }
  .accordion-head { min-height: 56px; }
  .accordion-head h2 { font-size: var(--fs-xl); }

  /* 5 previews are unreadable at 1/2 width — swipeable strip instead */
  .previews {
    display: flex; gap: var(--sp-3);
    margin: var(--sp-8) 0 var(--sp-10);
    overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: var(--sp-2);
    scrollbar-width: thin;
  }
  .previews .zoom-btn { flex: 0 0 46%; scroll-snap-align: start; }

  .faq-grid { grid-template-columns: 1fr; gap: var(--sp-3); }
  .faq-col { gap: var(--sp-3); }
  .faq-title { font-size: var(--fs-2xl); }
  .faq-head { font-size: var(--fs-base); padding: var(--sp-3) var(--sp-4); }
  .faq-item.open .faq-body-inner { padding: 0 var(--sp-4) var(--sp-4); }

  .related { padding: var(--sp-12) 0 var(--sp-8); }
  .related-title { font-size: var(--fs-2xl); margin-bottom: var(--sp-5); }
  .related-grid { gap: var(--sp-4); }
  .related-card p { font-size: var(--fs-sm); }

  .post-nav-inner { flex-direction: column; gap: var(--sp-3); }
  .post-nav-prev, .post-nav-next { max-width: 100%; }
  .post-nav-next { align-items: flex-start; text-align: left; }

  .footer-grid { grid-template-columns: 1fr; gap: var(--sp-8); padding-top: var(--sp-12); }
  .footer-desc { max-width: none; }

  .sticky-cta { display: flex; gap: var(--sp-2); }
  /* flex-basis 0 has to beat the width:100% above, or the two tiers overflow the bar */
  .sticky-cta .buy-btn {
    flex: 1 1 0; width: auto; min-width: 0;
    min-height: 44px; font-size: var(--fs-sm);
    padding: var(--sp-2) var(--sp-3);
  }

  .lightbox { padding: var(--sp-4); }
  .lightbox-close { top: var(--sp-2); right: var(--sp-2); }
}

/* ==== Small phone ≤ 380px ==== */
@media (max-width: 380px) {
  /* was --fs-xl, which is larger than the --fs-lg set at <=768 and so made the
     narrowest screens carry the biggest headline — and pushed the Pro download
     button 23px past the fold on a 360x640 phone */
  .hero-content h1 { font-size: var(--fs-md); }
  .hero-grid { grid-template-columns: 92px minmax(0, 1fr); }
  .price-big { font-size: var(--fs-2xl); }
  .pw-note { font-size: 12px; }
  .previews .zoom-btn { flex: 0 0 62%; }
}

/* ==== Landscape phone — sticky chrome eats too much height ==== */
@media (max-height: 480px) and (orientation: landscape) {
  .site-header { position: relative; }
  .sticky-cta { display: none; }
  body { padding-bottom: 0; }
}