@media (max-width:900px) { .primary-nav { gap:var(--s4); font-size:.82rem; } .hero-grid,.section-heading,.split-callout,.roadmap-grid,.faq-layout,.cta-box { gap:var(--s6); } .feature-grid { grid-template-columns:repeat(2,1fr); } .journey-list { grid-template-columns:repeat(2,1fr); } .cta-box { padding:var(--s6); } }
@media (max-width:720px) { .container { width:min(calc(100% - 32px),var(--max)); } .section { padding-block:var(--s8); } .header-inner { min-height:72px; } .menu-toggle { display:grid; width:44px; height:44px; place-content:center; gap:5px; padding:0; border:0; background:transparent; } .menu-toggle span:not(.visually-hidden) { display:block; width:24px; height:2px; background:var(--white); transition:transform 250ms ease,opacity 250ms ease; } .menu-toggle[aria-expanded="true"] span:nth-child(2) { transform:translateY(7px) rotate(45deg); } .menu-toggle[aria-expanded="true"] span:nth-child(3) { opacity:0; } .menu-toggle[aria-expanded="true"] span:nth-child(4) { transform:translateY(-7px) rotate(-45deg); } .primary-nav { position:absolute; top:72px; right:0; left:0; display:none; align-items:stretch; padding:var(--s5) var(--s4) var(--s6); background:var(--header); box-shadow:var(--shadow-m); } .primary-nav.is-open { display:flex; flex-direction:column; } .primary-nav > a:not(.button) { padding:var(--s3) 0; } .primary-nav .button { margin-top:var(--s2); } .hero-grid,.section-heading,.split-callout,.roadmap-grid,.faq-layout,.cta-box { grid-template-columns:1fr; } .hero-grid { min-height:auto; padding-block:var(--s7); } .hero-copy { padding:0; } .hero-art { grid-row:1; } .hero-art::before { inset:8% -8% -8% 8%; } .section-heading { margin-bottom:var(--s6); } .feature-grid,.journey-list { grid-template-columns:1fr; } .feature-card { min-height:0; } .journey-list { margin-top:var(--s6); } .footer-top { grid-template-columns:1fr; } .footer-top nav { gap:var(--s4); } }
@media (max-width:480px) { h1 { font-size:2.8rem; } .button-row,.form-row,.footer-bottom { align-items:stretch; flex-direction:column; } .button-row .button,.form-row .button { width:100%; } .button--quiet { justify-content:flex-start; } .cta-box { padding:var(--s5); } .roadmap-list li { grid-template-columns:1fr; gap:var(--s2); } }