/* ─────────────────────────────────────────────────────────────────────────
   Orcrist — responsive layer.

   Loaded last so it can override the component defaults. The components
   are authored desktop-first, so everything here narrows rather than
   widens.

   Breakpoints, chosen from where the layouts actually break rather than
   from device names:
     1024px  nav links no longer fit beside the CTA
      720px  two-column grids stop earning their second column
      520px  small phones: tighten type and spacing
   ───────────────────────────────────────────────────────────────────────── */

/* ── Global guards ──────────────────────────────────────────────────────
   Nothing may cause a horizontal scrollbar. Long unbroken strings — DICOM
   UIDs, email addresses, model names — are the usual culprits. */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}
.container {
  width: 100%;
}
h1,
h2,
h3,
p,
li,
summary {
  overflow-wrap: break-word;
}

/* ── ≤1024px: collapse the primary nav ──────────────────────────────────
   The pill cannot hold five links plus a CTA. The links are dropped and
   the CTA kept — every destination is still reachable from the footer,
   which carries the full sitemap. */
@media (max-width: 1024px) {
  .nav-links {
    display: none;
  }
  .nav-inner {
    gap: var(--space-3);
    padding: 0 0.5rem 0 1rem;
  }
  .nav .btn-primary {
    margin-left: auto;
  }
}

/* ── ≤720px: single-column layouts ──────────────────────────────────── */
@media (max-width: 720px) {
  /* The comparison stops being a comparison side by side at this width;
     stacking keeps each column readable, ContourOAI first since it is the
     one that matters. */
  .compare {
    grid-template-columns: 1fr;
  }
  .compare-new {
    order: -1;
  }

  .teaser-grid,
  .detail-grid,
  .team-grid,
  .proof-grid,
  .next-steps,
  .group-list,
  .problem-grid {
    grid-template-columns: 1fr;
  }

  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
  .footer-bottom {
    flex-direction: column;
    gap: var(--space-2);
  }

  /* Timeline: pull the rail in so the copy keeps its measure. */
  .timeline::before {
    left: 18px;
  }
  .step {
    gap: var(--space-4);
  }
  .step-num {
    width: 36px;
    height: 36px;
    font-size: 0.9rem;
  }

  .section-cta {
    flex-direction: column;
    align-items: stretch;
  }
  .section-cta .btn {
    width: 100%;
  }

  .faq-item summary {
    padding: var(--space-4) var(--space-5);
  }
  .faq-answer {
    padding: 0 var(--space-5) var(--space-4);
  }
}

/* ── ≤520px: small phones ───────────────────────────────────────────── */
@media (max-width: 520px) {
  .hero-stats {
    gap: var(--space-5);
  }
  .hero-cta {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-cta .btn {
    width: 100%;
  }

  .brand-text {
    font-size: 1.05rem;
  }
  .nav .btn-primary {
    padding: 0.45rem 0.9rem;
    font-size: 0.8rem;
  }

  .footer-top {
    grid-template-columns: 1fr;
  }
  .footer-panel {
    padding: var(--space-6) var(--space-5) var(--space-5);
    border-radius: var(--radius-lg);
  }

  .page-header h1 {
    font-size: var(--step-3);
  }

  /* The marquee's edge fade eats too much of a narrow screen. */
  .marquee {
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent,
      #000 20px,
      #000 calc(100% - 20px),
      transparent
    );
    mask-image: linear-gradient(
      90deg,
      transparent,
      #000 20px,
      #000 calc(100% - 20px),
      transparent
    );
  }
}