/* ============================================================
   Backpack Premium HTML — Responsive
   ============================================================ */

@media (max-width: 1180px) {
  .container { padding: 0 28px; }
}

@media (max-width: 980px) {
  .hero { padding: 64px 0 48px; }
  .hero__inner { gap: 32px; }
  .features { grid-template-columns: 1fr; }
  .feature, .feature--wide, .feature--narrow { grid-column: span 1; }
  .trust { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 880px) {
  h1 { font-size: clamp(30px, 7vw, 44px); }
  h2 { font-size: clamp(24px, 5.5vw, 32px); }
  .section { padding: 64px 0; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .quick-answer, .safety { grid-template-columns: 1fr; }
  .journey { grid-template-columns: 1fr; }
  .step { grid-template-columns: 44px 1fr; }
  .step__cta { grid-column: 1 / -1; }
  .step__cta .btn { width: 100%; }
}

@media (max-width: 720px) {
  :root { --gutter: 18px; }
  .hero__cta .btn { flex: 1 1 100%; }
  .header-actions .btn--ghost { display: none; }
  .container { padding: 0 18px; }
  .comparison th, .comparison td { padding: 12px 14px; }
  .footer__grid { grid-template-columns: 1fr; }
  .ticker { font-size: 11px; }
}

@media (max-width: 520px) {
  .trust { grid-template-columns: 1fr; }
  .feature { padding: 18px; }
  .step { padding: 14px; }
  .final-cta { padding: 32px 22px; }
  .hero__chip { font-size: 11px; }
}

/* Tablet landscape — keep multi-col where possible */
@media (min-width: 720px) and (max-width: 980px) {
  .quick-answer, .safety { grid-template-columns: 1fr; }
  .journey { grid-template-columns: 1fr; }
}