/* ============================================================
   Dang! Payoff — marketing site layout grids (responsive)
   Loaded only by the website. Depends on site.css.
   Faithful verbatim port of _design/Dang-Payoff-Handoff/site/mkt.css.
   ============================================================ */

/* Hero */
.mkt-hero-grid {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(36px, 5vw, 76px);
  align-items: center;
}
.mkt-hero-visual { position: relative; }
@media (max-width: 940px) {
  .mkt-hero-grid { grid-template-columns: 1fr; gap: 56px; }
  .mkt-hero-visual { max-width: 540px; }
}

/* Trust band */
.mkt-trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
@media (max-width: 900px) { .mkt-trust-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (max-width: 520px) { .mkt-trust-grid { grid-template-columns: 1fr; } }

/* Proof */
.mkt-proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
@media (max-width: 760px) { .mkt-proof-grid { grid-template-columns: repeat(2, 1fr); gap: 36px 24px; } }

/* How */
.mkt-how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) { .mkt-how-grid { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; } }

/* Generic two-column split (live demo, share) */
.mkt-split { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(40px, 6vw, 88px); }
@media (max-width: 940px) { .mkt-split { grid-template-columns: 1fr; gap: 48px; } }

/* Share card fan */
.mkt-cards-fan { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; justify-items: center; align-items: center;
  transform: perspective(1400px) rotateY(-7deg) rotateX(2deg); }
@media (max-width: 940px) { .mkt-cards-fan { transform: none; max-width: 520px; margin: 0 auto; } }
@media (max-width: 480px) { .mkt-cards-fan { gap: 8px; } }

/* Do / don't */
.mkt-dodont-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 760px) { .mkt-dodont-grid { grid-template-columns: 1fr; } }

/* Pricing */
.mkt-price-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; max-width: 880px; margin: 0 auto; }
@media (max-width: 760px) { .mkt-price-grid { grid-template-columns: 1fr; max-width: 460px; } }
.mkt-price-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1040px; margin: 48px auto 0; align-items: stretch; }
@media (max-width: 860px) { .mkt-price-grid3 { grid-template-columns: 1fr; max-width: 440px; gap: 18px; } }

/* Family */
.mkt-family-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
@media (max-width: 820px) { .mkt-family-grid { grid-template-columns: 1fr; } }

/* ============================================================
   F1 amendment (CPO-authorized 2026-06-18) — ≤480px ONLY.
   Eliminate horizontal overflow on phones. The design prototype overflows
   at ≤~480px; we intentionally deviate to fix mobile UX. Beyond the two
   named items (hero floating card + share-card fan — both handled responsively
   in sections.js JS) and the live-demo curve (sections.js), the "How it works"
   cards' fixed-width inner visuals (the ~290px form mock + the 256px curve svg)
   also exceeded a 320px viewport. Constrain them to fit — content stays fully
   visible, just scaled. NO effect >480px (desktop/tablet unchanged).
   ============================================================ */
@media (max-width: 480px) {
  .mkt-how-grid .po-surface { max-width: 100% !important; }
  .mkt-how-grid svg { max-width: 100%; height: auto; }
  /* Live-demo card: stack the figure+tag header and the actions row so their
     side-by-side min-content doesn't exceed a phone viewport (no clipped
     controls). All content stays visible. */
  .mkt-demo-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .mkt-demo-actions { flex-direction: column; align-items: flex-start; gap: 14px; }
  /* UAT #3: keep the hero floating 50% card fully inside the viewport on phones
     (the design's left:-26 offset pokes it off the left edge at ≤480). */
  .mkt-hero-float { left: 8px !important; }
}

/* Footer */
.mkt-footer-cta { display: grid; grid-template-columns: 1.4fr auto; gap: 32px; align-items: center; }
@media (max-width: 760px) { .mkt-footer-cta { grid-template-columns: 1fr; } }
.mkt-footer-cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
@media (max-width: 820px) { .mkt-footer-cols { grid-template-columns: 1fr 1fr; gap: 36px 24px; } }
@media (max-width: 460px) { .mkt-footer-cols { grid-template-columns: 1fr; } }