/* Responsive overrides for mobile and tablet */
:root{ }

/* Tablet and small laptops */
@media (max-width: 900px) {
  .header-inner { padding: 12px 10px; }
  .brand-mark { height:64px; }
  .nav-toggle { display: inline-flex; }

  /* Hide desktop nav by default and show a compact panel when opened */
  .nav { display: none; position: absolute; top: 68px; right: 16px; background: #fff; border: 1px solid var(--line); border-radius:12px; padding:8px; box-shadow:var(--shadow); flex-direction: column; min-width:220px; z-index:120; }
  .nav a { display:block; padding:10px 12px; color:var(--brand); border-radius:8px; }
  .nav a:hover{ background: rgba(244,122,32,0.06); color:var(--brand2); }
  .nav[data-open="true"], .nav[data-open='true'] { display:flex; }

  .hero { padding: clamp(48px, 10vh, 72px) 0 clamp(36px, 6vh, 56px); min-height:55vh; }
  .hero-grid, .hero-panel, .process-grid { grid-template-columns: 1fr; }
  .hero-image-frame { border-radius:18px; }
  .cta-row { flex-direction: column; align-items: stretch; }
  .cta-row .btn { width:100%; }

  .split { grid-template-columns: 1fr; gap:18px; }
  .panel { padding:20px; }
  .payment-panel { padding:18px; }
}

/* Phones */
@media (max-width: 600px) {
  :root { --container: 100%; }
  .container { padding: 0 14px; }
  .brand-mark { height:54px; }
  .header-inner { gap:12px; }

  .nav { left: 12px; right: 12px; top: 64px; }
  .nav a { padding:12px; font-size:15px; }

  .hero { padding: 40px 0 28px; min-height:48vh; }
  .hero-copy h1 { font-size: clamp(1.6rem, 7vw, 2.1rem); }
  .hero-lead { font-size: 1rem; }

  .card-media { height:160px; }
  .panel { padding:18px; }
  .panel h3 { font-size:18px; }
  .stat-card { padding:14px; }

  .cta-links { gap:8px; font-size:14px; }
  .payment-grid { grid-template-columns:1fr; }

  .skip-link:focus { left: 8px; }
}