/* =========================================================================
   RESPONSIVE OVERRIDES
   Base styles above are mobile-first; this file handles breakpoints where
   layouts need to shift for tablet / desktop, plus mobile-specific tweaks.
   ========================================================================= */

/* ---------- narrow phones ---------- */
@media (max-width: 480px) {
  .hero__headline {
    font-size: var(--fs-4xl);
  }
  .calc {
    padding: var(--space-4);
  }
}

/* ---------- tablet + mobile: stack calculator and case studies ---------- */
@media (max-width: 900px) {
  .calc {
    grid-template-columns: 1fr;
  }
  .case {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  .case__meta {
    position: static;
  }
}

/* ---------- mobile-only tightening ---------- */
@media (max-width: 700px) {
  .section, .hero__inner, .calc-section__inner, .cases-section__inner,
  .cta-section__inner, .keyhole-section__inner, .guess-section__inner,
  .methodology__inner {
    padding-left: 0;
    padding-right: 0;
  }
  .hero, .calc-section, .cases-section, .cta-section, .keyhole-section,
  .guess-section, .methodology {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
  .section {
    margin-bottom: var(--space-9);
  }
  .cta-cards {
    grid-template-columns: 1fr;
  }
}

/* ---------- print stylesheet (bonus, cheap to add) ---------- */
@media print {
  .intro, .site-header, .site-footer, .keyhole-button {
    display: none !important;
  }
  .main-paper, .site-header, .site-footer {
    display: block !important;
  }
  body { color: black; background: white; }
  a { text-decoration: underline; }
  .keyhole-reveal { display: block !important; }
}