/* 7 breakpoints: 360 · 480 · 640 · 768 · 1024 · 1280 · 1536 */

@media (max-width: 359px) {
    .container { padding-inline: 14px; }
    .banner-inner { padding-inline: 18px; }
    .banner-cta { padding: 12px 18px; font-size: 0.58rem; }
    .footer-inner { flex-direction: column; align-items: flex-start; }
}

@media (min-width: 360px) and (max-width: 479px) {
    .hero h1 { font-size: clamp(1.55rem, 7vw, 1.85rem); }
}

@media (min-width: 480px) {
    .container { padding-inline: clamp(20px, 4vw, 28px); }
}

@media (min-width: 640px) {
    .banner-inner { grid-template-columns: 1fr auto; }
    .banner-cta-wrap { justify-self: end; }
}

@media (min-width: 768px) {
    .container { width: min(920px, 100%); }
    .hero { max-width: 40rem; }
    .doc-modal-panel { max-width: 680px; }
}

@media (min-width: 1024px) {
    .container { width: min(960px, 100%); }
    .hero h1 { font-size: clamp(2rem, 3.2vw, 2.65rem); }
    .doc-modal-panel { max-width: 720px; }
}

@media (min-width: 1280px) {
    .container { width: min(980px, 100%); padding-inline: 32px; }
    main { padding-top: clamp(48px, 6vw, 72px); }
}

@media (min-width: 1536px) {
    .container { width: min(1000px, 100%); }
    .hero { max-width: 42rem; }
}

@media (max-width: 639px) {
    .banner-inner { grid-template-columns: 1fr; }
    .banner-cta-wrap { justify-self: start; }
}