/* ──────────────────────────────────────────────
 * Responsive overrides for Accelerate landing.
 * Loaded after styles.css so these win.
 * ────────────────────────────────────────────── */

/* Tablet and below */
@media (max-width: 1024px) {
  body { min-width: 0; overflow-x: hidden; }
  .page { width: 100%; max-width: 100%; }

  .topbar { padding: 10px 24px; flex-wrap: wrap; gap: 8px; }
  .nav { padding: 18px 24px; flex-wrap: wrap; gap: 12px; }
  .nav ul { gap: 18px; flex-wrap: wrap; }

  .hero { padding: 56px 24px 48px; }
  .hero-grid { grid-template-columns: 1fr; gap: 40px; align-items: start; }
  .hero h1 { font-size: clamp(48px, 9vw, 96px); }
  .hero .lead { max-width: 100%; font-size: 17px; }

  /* Generic section padding */
  section, .section, footer { padding-left: 24px !important; padding-right: 24px !important; }

  /* Section heads with right block */
  .sec-head { display: block; }
  .sec-head .right-block { max-width: 100%; margin-top: 16px; }
  .sec-head h2, .sec-head p { max-width: 100%; }

  /* Common multi-column grids inside sections collapse to single column */
  .arch-grid, .demo-grid, .tech-grid, .foot-grid,
  .grid-2, .grid-3, .grid-4,
  [class*="cols-2"], [class*="cols-3"], [class*="cols-4"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Hero visual / animation containers */
  .hero-visual, .reel, .anim-reel {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
  }

  /* Long horizontal content can scroll */
  table, .scroll-x, .pipeline, .timeline {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }
}

/* Phones */
@media (max-width: 640px) {
  .topbar { padding: 8px 16px; font-size: 10px; }
  .topbar .right { display: none; }

  .nav { padding: 14px 16px; }
  .nav ul { display: none; }
  .nav .crumb { display: none; }
  .nav .actions .icon { display: none; }
  .nav .wm { font-size: 18px; }

  .hero { padding: 40px 16px 36px; }
  .hero h1 { font-size: clamp(40px, 11vw, 72px); }
  .hero .lead { font-size: 16px; margin: 24px 0 28px; }
  .hero .eyebrow { margin-bottom: 20px; }

  section, .section, footer { padding-left: 16px !important; padding-right: 16px !important; }

  .btn { padding: 12px 18px; font-size: 12px; }
  .btn-ghost { padding: 12px 0; }

  /* Drop heavy max-width caps that look weird on narrow screens */
  .hero .lead, .sec-head h2, .sec-head p,
  .foot-grid p { max-width: 100% !important; }

  /* Stacks of inline buttons */
  .cta-row, .button-row, .actions-row { flex-wrap: wrap; gap: 12px; }
}