/* Responsive breakpoints layered on top of all other styles */

/* === Tablet: ≤1024px === */
@media (max-width: 1024px) {
  /* Top nav */
  .topnav-inner { padding: 0 16px; flex-wrap: wrap; gap: 8px; }
  .topnav-links { gap: 18px; }
  .topnav-links a { font-size: 13px; }

  /* Hero */
  .lp-hero h1 { font-size: 56px; letter-spacing: -1.6px; }
  .lp-hero .lead { font-size: 17px; }
  .lp-hero-mesh { height: 600px; }

  /* Section headings */
  .lp-section { padding: 72px 24px; }
  .lp-section h2 { font-size: 38px; letter-spacing: -1px; }
  .pricing-hero h1 { font-size: 52px; }

  /* 3-up → 2-up grids */
  .problem-grid,
  .calcs-grid,
  .how-grid,
  .pricing-cards { grid-template-columns: repeat(2, 1fr); }
  .problem-card { font-size: 19px; }

  /* 4-up → 2-up */
  .tmpl-grid { grid-template-columns: repeat(2, 1fr); }

  /* 2-col splits stay 2-col but tighter gap */
  .why-grid,
  .pp-grid,
  .pfaq-grid,
  .lender-grid { gap: 40px; }
  .testimonial-quote { font-size: 26px; }

  /* Hero device — keep but smaller text */
  .device-body { min-height: 480px; }
  .device-inputs { padding: 22px 22px; }
  .device-results { padding: 22px 22px; }
  .device-results .hero-num { font-size: 38px; }
  .floater { font-size: 11px; padding: 10px 12px; }

  /* Calculator shell */
  .calc-shell { grid-template-columns: 1fr !important; gap: 24px; padding: 0 16px; }
  .results-panel { position: static !important; }

  /* SEO + page intro */
  .page-intro { padding: 32px 16px 24px; }
  .page-intro h1 { font-size: 44px; }
  .seo-shell,
  .seo-section { padding-left: 16px !important; padding-right: 16px !important; }

  /* Final CTA */
  .lp-final-inner { padding: 72px 24px; }
  .lp-final h2 { font-size: 44px; letter-spacing: -1.2px; }
  .templates-cta h2 { font-size: 36px; }

  /* Footer */
  .site-footer-inner { grid-template-columns: repeat(3, 1fr) !important; gap: 32px; }
}

/* === Mobile: ≤768px === */
@media (max-width: 768px) {
  /* Top nav — collapse links and desktop CTAs into a hamburger menu */
  .topnav-links { display: none; }
  .topnav-right .btn-text { display: none; }
  .topnav-right .desktop-cta { display: none; }
  .mobile-menu-btn { display: inline-flex; }
  .mobile-dropdown { display: block; }

  /* Hero */
  .lp-hero { padding-bottom: 48px; }
  .lp-hero-inner { padding: 0 16px; }
  .lp-hero-copy { padding-top: 56px; }
  .lp-hero h1 { font-size: 40px; letter-spacing: -1.2px; line-height: 1.1; }
  .lp-hero h1 br { display: inline; }
  .hero-rotator { font-size: 17px; height: 56px; }
  .lp-hero .lead { font-size: 16px; }
  .lp-ctas { flex-wrap: wrap; justify-content: center; }
  .lp-trust { flex-wrap: wrap; justify-content: center; gap: 10px; font-size: 11px; }
  .lp-trust .dot { display: none; }

  /* Hero device — stack columns */
  .lp-product-frame { margin-top: 40px; }
  .device-body { grid-template-columns: 1fr; min-height: 0; }
  .device-inputs { border-right: 0; border-bottom: 1px solid var(--hairline); padding: 20px 18px; }
  .device-inputs .ip-row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .device-results { padding: 20px 18px; }
  .device-results .hero-num { font-size: 34px; }
  .device-results .grid2 { grid-template-columns: 1fr 1fr; }
  .floater { display: none; } /* hide annotations on tiny screens */
  .device-bar .url { font-size: 10px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Logos */
  .logos-inner { flex-direction: column; gap: 14px; text-align: center; }
  .logos-inner .lgs { gap: 22px; flex-wrap: wrap; justify-content: center; }
  .logos-inner .lgs span { font-size: 14px; }

  /* Sections */
  .lp-section { padding: 56px 16px; }
  .lp-section h2 { font-size: 30px; letter-spacing: -0.8px; }
  .lp-section .lp-section-lead { font-size: 16px; }
  .lp-section.tinted .lp-section-inner { padding: 0 16px; }

  /* All multi-col grids → single column on mobile */
  .problem-grid,
  .calcs-grid,
  .how-grid,
  .why-grid,
  .exp-grid,
  .lp-pricing-grid,
  .pricing-cards,
  .pp-grid,
  .pfaq-grid,
  .tmpl-grid,
  .lender-grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }
  .why-grid, .pp-grid, .pfaq-grid, .lender-grid { gap: 32px; }
  .testimonial-quote { font-size: 22px; letter-spacing: -0.4px; }

  .transitional { font-size: 22px; margin-top: 36px; }
  .how-step .num { font-size: 48px; }

  /* Pricing teaser cards center */
  .lp-pricing-grid { max-width: 360px; }
  .pcard { padding: 24px; }
  .pcard .pprice { font-size: 44px; }

  /* FAQ */
  .faq-list { max-width: 100%; margin-top: 0; }
  .faq-list .faq-q { font-size: 15px; padding: 16px 0; gap: 16px; }
  .faq-list .faq-a { padding-right: 24px; font-size: 14px; }

  /* Templates */
  .tmpl-thumb { height: 110px; }
  .templates-cta { padding: 56px 16px; }
  .templates-cta h2 { font-size: 28px; }

  /* Pricing hero */
  .pricing-hero { padding: 56px 16px 40px; }
  .pricing-hero h1 { font-size: 38px; }
  .pricing-hero .lead { font-size: 16px; }

  /* Pricing philosophy */
  .pricing-philosophy { padding: 56px 16px; }
  .pp-grid h2 { font-size: 30px; }
  .pricing-faq-section { padding: 56px 16px; }
  .pfaq-grid h2 { font-size: 26px; }

  /* Final CTA */
  .lp-final-inner { padding: 56px 16px; }
  .lp-final h2 { font-size: 32px; letter-spacing: -0.8px; }
  .lp-final p { font-size: 16px; }
  .lp-final .lp-ctas { flex-direction: column; gap: 10px; align-items: stretch; }
  .lp-final .lp-ctas button { width: 100%; }

  /* Page intro / calculator */
  .page-intro h1 { font-size: 32px; letter-spacing: -0.6px; }
  .page-intro .lead { font-size: 15px; }
  .trust-line { flex-wrap: wrap; gap: 8px; font-size: 11px; }

  /* Calculator inputs collapse padding */
  .input-section { padding: 14px 16px !important; }
  .input-section .ip-grid { grid-template-columns: 1fr !important; }

  /* Final CTA on calc page */
  .final-cta-inner { flex-direction: column; gap: 16px; text-align: center; padding: 0 16px; }
  .final-cta-inner h2 { font-size: 28px !important; }

  /* Footer */
  .site-footer-inner { grid-template-columns: 1fr 1fr !important; gap: 24px; padding: 0 16px; }
  .legal { flex-direction: column; gap: 6px; padding: 16px; text-align: center; }

  /* Newsletter */
  .newsletter form { flex-direction: column; max-width: 100%; }
  .newsletter button { width: 100%; }

  /* Tweaks panel doesn't need to dominate */
  .tweaks-panel { right: 12px !important; bottom: 12px !important; max-width: calc(100vw - 24px); }
}

/* === Very narrow: ≤420px === */
@media (max-width: 420px) {
  .lp-hero h1 { font-size: 34px; }
  .device-inputs .ip-row { grid-template-columns: 1fr; }
  .device-results .grid2 { grid-template-columns: 1fr; }
  .lp-eyebrow { font-size: 10px; padding: 4px 10px; }
}