/* ============================================================
   responsive.css — ALL @media breakpoints in one place
   Breakpoints: max-width 900px and max-width 600px
   ============================================================ */

/* ---- 900px and below ---- */
@media (max-width: 900px) {

  /* Navigation: hide desktop links, show mobile CTA */
  .nav-links {
    display: none;
  }

  .nav-cta {
    display: none;
  }

  .nav-mobile-cta {
    display: inline-block;
  }

  /* How It Works: collapse to single column */
  .timeline-grid {
    grid-template-columns: 1fr;
  }

  .timeline-item:nth-child(1) { border-radius: 16px 16px 0 0; }
  .timeline-item:nth-child(2) { border-radius: 0; }
  .timeline-item:nth-child(3) { border-radius: 0; }
  .timeline-item:nth-child(4) { border-radius: 0 0 16px 16px; }

  /* Deliverables: collapse to single column */
  .deliverables-grid {
    grid-template-columns: 1fr;
    background: transparent;
    gap: 1px;
  }

  .deliverable:nth-child(1) { border-radius: 16px 16px 0 0; }
  .deliverable:nth-child(2) { border-radius: 0; }
  .deliverable:nth-child(3) { border-radius: 0; }
  .deliverable:nth-child(4) { border-radius: 0; }
  .deliverable:nth-child(5) { border-radius: 0; }
  .deliverable:nth-child(6) { border-radius: 0 0 16px 16px; }

  /* Pricing: collapse to single column, all cards get full radius */
  .pricing-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .pricing-card,
  .pricing-card:first-child,
  .pricing-card:last-child {
    border-radius: var(--radius-lg);
  }

  .pricing-card.featured {
    margin-top: 8px;
  }

  /* About: single column, centered */
  .about-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .about-avatar {
    margin: 0 auto;
  }

  /* Onboarding block: stack vertically */
  .onboarding-block {
    flex-direction: column;
    align-items: flex-start;
  }

  /* "You don't need" strip: stack vertically on tablet/mobile */
  .dont-need {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
}

/* ---- 600px and below ---- */
@media (max-width: 600px) {

  /* Reduced container padding */
  .container,
  .nav-inner,
  .footer-inner {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Reduced section padding */
  section {
    padding: 72px 0;
  }

  #stack {
    padding: 32px 0 48px;
  }

  .stack-logos {
    gap: 24px 32px;
  }

  /* Hero headline size */
  #hero h1 {
    font-size: 36px;
    letter-spacing: -1.5px;
  }

  .desktop-break {
    display: none;
  }

  #hero {
    padding-top: calc(var(--nav-height) + 48px);
    padding-bottom: 72px;
  }

  .hero-subhead {
    font-size: 17px;
    line-height: 1.6;
  }

  .hero-ctas {
    flex-direction: column;
    gap: 12px;
  }

  .hero-ctas .btn-primary,
  .hero-ctas .btn-secondary {
    width: 100%;
    text-align: center;
  }

  .hero-trust {
    flex-direction: column;
    gap: 10px;
  }

  .hero-terminal {
    max-width: 100%;
  }

  /* Section headings scale */
  #how-it-works h2,
  #what-you-get h2,
  #pricing h2,
  #faq h2 {
    font-size: 32px;
    letter-spacing: -1px;
  }

  .cta-box h2 {
    font-size: 36px;
    letter-spacing: -1.5px;
  }

  .cta-box {
    padding: 48px 24px;
  }

  .cta-box .btn-primary {
    width: 100%;
    text-align: center;
    padding: 16px 24px;
  }

  .cta-subtext {
    font-size: 17px;
  }

  .problem-card {
    padding: 32px 24px;
  }

  .problem-card h2 {
    font-size: 28px;
  }

  /* Footer: stack vertically */
  .footer-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
  }
}