/* ============================================================
   Kingscrowd — Responsive layer (tablet & mobile)
   Loaded last so it overrides inline fixed widths/heights set
   via direct edits. Keeps the desktop design intact above 1024px.
   ============================================================ */

/* ---------- TABLET & DOWN (≤1024px) ---------- */
@media (max-width: 1024px) {
  /* Neutralize fixed inline widths so text reflows to the column */
  .hero-sub,
  .why-left .lead,
  .moat-left .body,
  .intel-head,
  .intel-head .lead,
  .intel-head .lead > span,
  .prod-top .body,
  .banner-title,
  .cred-title,
  .cred-sub,
  .cap-head,
  .cap-head .lead,
  .cap-head h2,
  .cap-top,
  .cap-top > div,
  .cap-top h2,
  .cap-top .lead,
  .founder-text,
  .fw-flow {
    width: auto !important;
    max-width: 100% !important;
  }

  /* Neutralize fixed inline heights so content isn't clipped */
  .intel-stage,
  .intel-out,
  .conviction,
  .fw-flow,
  .fw-step,
  .founder-bigquote {
    height: auto !important;
  }

  /* The intel connect-the-dots wires are absolutely sized to the
     desktop stage; hide them once the stage stacks */
  .intel-stage.lit .intel-wires,
  .intel-wires { display: none; }

  /* Banner brackets pulled into the gutter on desktop — bring back in */
  .banner .bracketed { margin-left: 0 !important; }
  .banner .bracketed[style] { margin: 0 0 24px 0 !important; }
}

/* ---------- SMALL TABLET / LARGE PHONE (≤760px) ---------- */
@media (max-width: 760px) {
  .section { padding: 64px 0; }
  .why-steps { padding: 26px 22px; }

  /* Scorecard: stack each row into a readable block */
  .sc-colhead { display: none; }
  .sc-row { grid-template-columns: 1fr; gap: 4px; padding: 16px 20px; }
  .sc-score { text-align: left; }
  .sc-score .stars { justify-content: flex-start !important; }
  .sc-head { padding: 20px 20px 14px; }
  .sc-foot { flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px 20px; }

  /* Updates + FAQ: single column container padding */
  .util-col { padding: 30px 24px; }
  .util-bottom { flex-direction: column; align-items: flex-start; padding: 24px; }

  /* Traction stat grid → 2 columns */
  .tstats { grid-template-columns: repeat(2, 1fr) !important; gap: 24px 0; }

  /* Data layer mosaic + traction cards stack full width */
  .traction-mods { grid-template-columns: 1fr; }

  /* Capital flywheel: comfortable rows */
  .cap-grid { gap: 28px; }

  /* Founder photo frame scales down */
  .founder-photo-wrap { width: 100% !important; max-width: 320px; }
  .founder-frame { width: 100% !important; height: auto !important; }
  .founder-frame .founder-photo { aspect-ratio: 4 / 4.6; }
  .founder-bigquote { font-size: clamp(22px, 6vw, 28px); }

  /* Hide hand-drawn margin annotations that rely on side space */
  .sc-insight, .card-anno, .mark-note, .insight, .hero-anno-2, .prod-hand .note { display: none; }

  /* Footer: stack the three columns */
  .footer-in { flex-direction: column; align-items: flex-start; gap: 24px; }
  .footer-mid { max-width: 100%; }
  .footer-links { gap: 14px 18px; }
}

/* ---------- PHONE (≤480px) ---------- */
@media (max-width: 480px) {
  :root { --gutter: 18px; }
  .section { padding: 52px 0; }

  /* Proof / numbers / data grids → 2 cols */
  .proof-row, .data-strip, .numbers-strip, .founder-proof { grid-template-columns: 1fr 1fr !important; }
  .numbers-strip .ns-label { grid-column: 1 / -1; }

  /* Hero actions + buttons wrap full width */
  .hero-actions .btn, .final-actions .btn, .banner-actions .btn { width: 100%; justify-content: center; }
  .hero-actions, .final-actions, .banner-actions { width: 100%; }

  /* Header: hide secondary CTA text, keep primary */
  .header-cta .se-link { display: none; }

  /* Logo card → single column-ish (2 keeps it tidy) */
  .cred .logos { grid-template-columns: repeat(2, 1fr) !important; }

  /* Rail cards a touch narrower */
  .rail-card { width: 180px; }

  /* Tighten oversized display headings on phones */
  .h-xl { font-size: clamp(40px, 12vw, 56px) !important; }
}