/* ───────────────────────────────────────────────────────────
   Cronyx — responsive layer
   Media queries only: desktop (>1100px) rendering is untouched.
   Shared across index / Cronyx Site / Book a Demo / Still Brewing.
   ─────────────────────────────────────────────────────────── */

/* ───── ≤1100px — tighten the chrome ───── */
@media (max-width: 1100px) {
  .page { padding: 0 40px; }
  .nav-links { gap: 28px; }

  .hero { gap: 40px; }
  .hero-title { white-space: normal; font-size: clamp(38px, 4.6vw, 52px); }
  .stat-num { font-size: 64px; }
}

/* ───── ≤960px — stack the major grids ───── */
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; padding: 64px 0 80px; }
  .hero-title { font-size: clamp(36px, 6.4vw, 48px); }
  .convo-col { margin-top: 16px; }

  .how-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 56px; }
  .how h2 { font-size: 44px; }
  .how-steps { grid-template-columns: 1fr; }
  .step { min-height: 0; padding: 40px 32px; }

  .outcomes-grid { grid-template-columns: 1fr; gap: 0; }
  .outcomes-grid .stat {
    border-right: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--on-surface-inverse) 12%, transparent);
    padding: 40px 0;
  }
  .outcomes-grid .stat:last-child { border-bottom: 0; }

  .builtfor-row { grid-template-columns: repeat(3, 1fr); row-gap: 24px; }
  .builtfor-row .bf-item:nth-child(4) { border-left: 0; }

  .principles-grid { grid-template-columns: 1fr; }

  .foot-grid { grid-template-columns: 1fr 1fr; gap: 48px; }

  /* Book a Demo */
  .demo { grid-template-columns: 1fr; min-height: 0; }
  .demo-left { border-right: 0; border-bottom: 1px solid var(--rule); padding: 56px 40px; }
  .demo-right { padding: 56px 40px; max-width: none; }

  /* Still Brewing */
  .stage h1 { font-size: 64px; }
}

/* ───── ≤720px — full mobile ───── */
@media (max-width: 720px) {
  html, body { overflow-x: clip; }
  .page { padding: 0 32px; }

  /* Section eyebrow labels: 11px ultra-tracked caps are illegible at
     phone size — one step up, slightly tighter tracking */
  .hero-eyebrow, .how-eyebrow, .principles-eyebrow,
  .outcomes-head .eyebrow, .convo-eyebrow,
  .lead-eyebrow, .form-eyebrow {
    font-size: 12px; letter-spacing: 0.26em;
  }
  .stat-label { font-size: 12px; letter-spacing: 0.26em; }

  /* Nav: brand + CTA stay on the first row, links wrap underneath */
  .nav { flex-wrap: wrap; gap: 14px 20px; padding: 16px 0; }
  .nav-brand { gap: 12px; }
  .nav-brand .mark { width: 44px; height: 44px; }
  .nav-links {
    order: 3; flex-basis: 100%;
    justify-content: flex-start; flex-wrap: wrap;
    gap: 10px 20px;
  }
  .nav-links a { font-size: 10px; letter-spacing: 0.26em; }
  .nav .btn { padding: 12px 16px; font-size: 10px; letter-spacing: 0.26em; }
  .nav-back { font-size: 10px; }

  /* Hero */
  .hero { padding: 48px 0 64px; gap: 48px; }
  .hero-title { font-size: clamp(36px, 10.4vw, 44px); }
  .hero-body { font-size: 15px; }
  .hero-actions { flex-wrap: wrap; margin-bottom: 40px; }
  .feature-row { flex-direction: column; gap: 0; }
  .feature { border-right: 0; border-bottom: 1px solid var(--rule); padding: 14px 0; }
  .feature:last-child { border-bottom: 0; }

  /* Hero conversation */
  .convo-col { padding-left: 16px; }
  .convo-mark { left: -16px; width: 44px; height: 44px; top: 72px; }
  .convo-mark svg { width: 28px; height: 28px; }
  .convo-head { flex-wrap: wrap; gap: 12px; }
  .convo-tab { padding: 8px 13px 7px; letter-spacing: 0.22em; }
  .bubble { max-width: none; }
  .bubble.from-user { margin-right: 56px; }
  .avatar { right: -52px; width: 40px; height: 40px; font-size: 12px; }
  .convo-stage { min-height: 680px; }

  /* Banner */
  .banner { padding: 64px 0; }
  .banner-inner { gap: 16px; padding: 0 32px; }
  .banner-rule { flex: 0 0 24px; }
  .banner h2 { font-size: clamp(30px, 8.4vw, 36px); }

  /* Built for */
  .builtfor { padding: 48px 0 64px; }
  .builtfor-label { font-size: 19px; padding: 0 8px; }
  .builtfor-row { grid-template-columns: repeat(2, 1fr); }
  .builtfor-row .bf-item { border-left: 0; padding: 20px 8px; }

  /* How it works */
  .how { padding: 80px 0; }
  .how h2 { font-size: clamp(34px, 9.4vw, 42px); }
  .step { padding: 36px 24px; }

  /* Outcomes */
  .outcomes { padding: 72px 0; }
  .outcomes-head { margin-bottom: 32px; }
  .outcomes-head h2 { font-size: clamp(30px, 8.4vw, 38px); }
  .stat-num { font-size: 60px; }
  .stat-num sup { font-size: 22px; }

  /* Principles */
  .principles { padding: 80px 0; }
  .principles-title { font-size: clamp(30px, 8.4vw, 38px); margin-bottom: 48px; }
  .principle { padding: 36px 24px; }

  /* CTA */
  .cta-band { padding: 72px 0; }
  .cta-band h2 { font-size: clamp(34px, 9.5vw, 44px); }

  /* Footer */
  .foot { padding: 56px 0 40px; }
  .foot-grid { grid-template-columns: 1fr; gap: 40px; padding-bottom: 40px; }
  .foot-bot { flex-direction: column; align-items: flex-start; gap: 10px; }

  /* Book a Demo */
  .demo-left { padding: 48px 24px; }
  .demo-right { padding: 48px 24px; }
  .field-row { grid-template-columns: 1fr; gap: 32px; }
  .opt-grid, .opt-grid.cols-3 { grid-template-columns: 1fr 1fr; }
  .submit-row { flex-direction: column; align-items: stretch; }
  .submit-note { max-width: none; }
  button.submit { width: 100%; }

  /* Still Brewing */
  .stage { padding: 80px 0; min-height: calc(100vh - 320px); }
  .stage h1 { font-size: clamp(36px, 11vw, 48px); line-height: 1.1; }
  .stage-actions { flex-wrap: wrap; justify-content: center; }
  .foot-row { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* ───── ≤480px — small phones ───── */
@media (max-width: 480px) {
  .page { padding: 0 28px; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { text-align: center; }
  .stat-num { font-size: 48px; }
  .opt-grid, .opt-grid.cols-3 { grid-template-columns: 1fr; }
  .stage-actions { flex-direction: column; width: 100%; }
  .stage-actions .btn { text-align: center; }
}