/* Responsive layout for the landing bundle.
   Both viewport variants of every responsive section are always in the DOM;
   these rules decide which one renders. The 768px boundary matches the
   retired useIsMobile() hook, and the two hide-rules are exact complements —
   at any viewport width exactly one variant is visible.
   .fv-m = mobile-only element · .fv-d = desktop-only element. */

@media (max-width: 768px) {
  .fv-d { display: none !important; }
}
@media not all and (max-width: 768px) {
  .fv-m { display: none !important; }
}

/* ── Founding Season ribbon ── */
.fv-ribbon { padding: 13px 16px; }

/* ── Hero container ── */
.fv-hero { padding: 60px 28px 58px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; }

/* ── Section-head line gaps (moat headline) ── */
.fv-headgap { margin-top: 0; }

/* ── Moat blocks (text/visual two-up, alternating) ── */
.fv-moat { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding: 40px 44px; }
.fv-moat > .fv-moat-a { order: 1; }
.fv-moat > .fv-moat-b { order: 2; }
.fv-moat.fv-flip > .fv-moat-a { order: 2; }
.fv-moat.fv-flip > .fv-moat-b { order: 1; }

/* ── Nav inner row ── */
.fv-nav-in { padding: 13px 28px; gap: 24px; }

/* ── Stat band ── */
.fv-stats { padding: 0 28px; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.fv-stat-n { font-size: 34px; }

/* ── Footer grid ── */
.fv-foot-grid { padding: 52px 28px 30px; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 32px; }

/* ── Pricing ── */
.fv-price-wrap { padding: 0 28px; }
.fv-price-box { padding: 30px 30px 26px; }
.fv-price-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; padding-top: 0; }

@media (max-width: 768px) {
  .fv-ribbon { padding: 10px 14px; }
  .fv-hero { padding: 30px 20px 40px; display: block; }
  .fv-headgap { margin-top: 0.5em; }
  .fv-moat { grid-template-columns: 1fr; gap: 22px; padding: 24px 20px; }
  .fv-moat > .fv-moat-a, .fv-moat.fv-flip > .fv-moat-a { order: 1; }
  .fv-moat > .fv-moat-b, .fv-moat.fv-flip > .fv-moat-b { order: 2; }
  .fv-nav-in { padding: 10px 16px; gap: 10px; }
  .fv-stats { padding: 0 16px; grid-template-columns: 1fr 1fr; gap: 22px 12px; }
  .fv-stat-n { font-size: 27px; }
  .fv-foot-grid { padding: 38px 20px 24px; grid-template-columns: 1fr; gap: 26px; }
  .fv-price-wrap { padding: 0 16px; }
  .fv-price-box { padding: 18px 16px; }
  .fv-price-grid { grid-template-columns: 1fr; gap: 14px; padding-top: 6px; }
  /* Mobile stack order: recommended plan first — Collector leads, Reseller
     next, Free last as the exit ramp. DOM keeps the desktop order. */
  .fv-price-grid > :nth-child(1) { order: 3; }
  .fv-price-grid > :nth-child(2) { order: 1; }
  .fv-price-grid > :nth-child(3) { order: 2; }
}