/* ─────────────────────────────────────────────────────────────────────────
   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;
}

/* ── ≥1025px: the full nav ──────────────────────────────────────────────
   The hamburger and drawer default to visible (see components.css), so the
   wide layout is the one that has to opt out. The two blocks are exact
   complements, so exactly one nav treatment applies at any width. */
@media (min-width: 1025px) {
  .nav-toggle,
  .nav-drawer {
    display: none;
  }
}

/* ── ≤1024px: collapse the primary nav ──────────────────────────────────
   The pill cannot hold six links plus a CTA. The inline links are dropped
   and replaced by a hamburger that opens a drawer carrying every one of
   them, so no destination is lost to the smaller screen. */
@media (max-width: 1024px) {
  .nav-links {
    display: none;
  }
  .nav-inner {
    gap: var(--space-3);
    padding: 0 0.5rem 0 1rem;
  }
  /* The CTA moves into the drawer, where it sits below the links as the
     one filled button — so the pill is just brand + hamburger. */
  .nav-inner > .btn-primary {
    display: none;
  }
  .nav-toggle {
    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;
  }

  .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
    );
  }
}