/* ═══════════════════════════════════════════════════════════
   LANDING — RESPONSIVE
   Breakpoint overrides for the landing sections, grouped by section
   and ordered widest → narrowest so they read top-to-bottom like the
   page. Load this LAST so it wins the cascade.

   Note: self-contained components keep their OWN breakpoints
   (navigation.css, modal.css) so they stay reusable in isolation.
   This file only re-flows landing layout.
═══════════════════════════════════════════════════════════ */

/* ── HERO ── */
@media(max-width:880px){
  .hero-grid{grid-template-columns:1fr;gap:28px}
  .hero-scrim{background:linear-gradient(180deg, rgba(10,22,40,.84), rgba(10,22,40,.94))}
  .dial{max-width:360px}
}
@media(max-width:600px){
  .dchip{font-size:10.5px;padding:7px 12px}
  .dchip.c1{top:1%;left:0}.dchip.c2{top:16%;right:0}.dchip.c3{left:0}
}

/* ── OUTCOMES + PILLARS ── */
@media(max-width:820px){.calc{grid-template-columns:1fr}}
@media(max-width:760px){.pillars{grid-template-columns:1fr;gap:38px}}
@media(max-width:520px){
  .lever{min-height:112px;padding:18px}
  .lever .lv-up{font-size:30px}
  .calc-result .cr-num{font-size:42px}
}

/* ── JOURNEY ── */
@media(max-width:820px){
  .dj-rail{display:none}
  .dj{grid-template-columns:1fr;gap:20px}
}

/* ── PRODUCT ── */
@media(max-width:820px){
  .prod-row,.prod-row.flip{grid-template-columns:1fr;gap:38px}
  .prod-row.flip .ptext{order:0}
  .mock,.prod-row.flip .mock{transform:none;animation:none}
}

/* ── DIFFERENCE ── */
@media(max-width:820px){
  .proof-grid{grid-template-columns:1fr}
  .leader-strip{flex-direction:column;align-items:flex-start}
}
@media(max-width:560px){
  .diff-viz{padding:20px 16px}
  .dv-sub-grey,.dv-sub-gold{display:none}
}

/* ── FOUNDER + PLAYBOOKS ── */
@media(max-width:900px){.pbooks{grid-template-columns:repeat(3,1fr);gap:18px}}
@media(max-width:760px){.founder{grid-template-columns:1fr;gap:34px}}
@media(max-width:520px){.pbooks{grid-template-columns:repeat(2,1fr)}}

/* ── FOOTER ── */
@media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr;gap:28px}}