@media (max-width: 1120px) {
  .hero-layout {
    grid-template-columns: minmax(0, 0.86fr) minmax(500px, 1.14fr);
    gap: 38px;
  }

  .floating-card-one {
    right: -1%;
  }

  .floating-card-two {
    left: -1%;
  }

  .approach-heading,
  .decision-layout,
  .faq-layout,
  .access-layout {
    gap: 60px;
  }

  .step {
    grid-template-columns: 60px minmax(0, 0.8fr) minmax(340px, 0.75fr);
  }
}

@media (max-width: 960px) {
  :root {
    --header-height: 70px;
  }

  .container {
    width: min(calc(100% - 36px), var(--container));
  }

  .primary-nav > a:not(.button) {
    display: none;
  }

  .hero,
  .hero-layout {
    min-height: auto;
  }

  .hero-layout {
    grid-template-columns: 1fr;
    gap: 58px;
    padding-top: 150px;
    padding-bottom: 90px;
  }

  .hero-copy {
    max-width: 760px;
  }

  .hero h1 {
    max-width: 800px;
  }

  .route-demo {
    max-width: 760px;
    margin-inline: auto;
  }

  .demo-window {
    transform: none;
  }

  .audience-content {
    grid-template-columns: 1fr;
    gap: 14px;
    padding-block: 25px;
  }

  .audience-content > div {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 9px 22px;
  }

  .feature-grid {
    grid-template-columns: 1fr 1fr;
  }

  .feature-card-large {
    grid-column: span 2;
  }

  .feature-card-wide {
    grid-template-columns: auto 1fr;
  }

  .feature-card-wide .separation-diagram {
    grid-column: 1 / -1;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;
  }

  .separation-diagram i {
    width: 14px;
    height: 1px;
  }

  .approach-heading,
  .decision-layout,
  .faq-layout,
  .access-layout {
    grid-template-columns: 1fr;
  }

  .approach-heading {
    gap: 24px;
  }

  .approach-heading > p {
    max-width: 660px;
  }

  .step {
    grid-template-columns: 60px 1fr;
  }

  .step-visual {
    grid-column: 2;
    justify-self: start;
    max-width: 560px;
  }

  .decision-copy {
    position: static;
    max-width: 700px;
  }

  .question-grid {
    max-width: 800px;
  }

  .faq-layout,
  .access-layout {
    gap: 50px;
  }

  .faq-heading {
    max-width: 720px;
  }

  .access-copy {
    max-width: 720px;
  }

  .access-form {
    max-width: 760px;
  }
}

@media (max-width: 680px) {
  .container {
    width: min(calc(100% - 28px), var(--container));
  }

  .brand {
    font-size: 15px;
  }

  .brand-mark {
    width: 36px;
    height: 36px;
  }

  .button-small {
    min-height: 38px;
    padding-inline: 14px;
    font-size: 12px;
  }

  .hero-layout {
    padding-top: 130px;
    padding-bottom: 70px;
  }

  .hero h1 {
    font-size: clamp(42px, 12.6vw, 60px);
  }

  .hero-lead {
    font-size: 17px;
  }

  .hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .hero-actions .button {
    width: 100%;
  }

  .hero-points {
    align-items: flex-start;
    flex-direction: column;
  }

  .demo-toolbar {
    min-height: 64px;
  }

  .status-chip {
    display: none;
  }

  .map-label {
    transform: scale(0.82);
  }

  .map-label-origin {
    left: 2%;
  }

  .map-label-hub {
    left: 36%;
  }

  .map-label-gate {
    right: 0;
  }

  .demo-results {
    grid-template-columns: 1fr;
  }

  .floating-card {
    display: none;
  }

  .section {
    padding-block: 88px;
  }

  .section-heading {
    margin-bottom: 42px;
  }

  .section-heading h2,
  .approach-heading h2,
  .decision-copy h2,
  .faq-heading h2,
  .access-copy h2 {
    font-size: 38px;
  }

  .section-heading > p:last-child,
  .decision-copy > p,
  .access-copy > p {
    font-size: 16px;
  }

  .feature-grid {
    grid-template-columns: 1fr;
  }

  .feature-card,
  .feature-card-large {
    min-height: 340px;
    grid-column: auto;
  }

  .feature-card-wide {
    min-height: 0;
    grid-column: auto;
    grid-template-columns: 1fr;
  }

  .feature-card-wide .feature-icon {
    margin-bottom: 25px;
  }

  .feature-card-wide .separation-diagram {
    grid-column: auto;
    grid-template-columns: 1fr;
  }

  .separation-diagram i {
    width: 1px;
    height: 8px;
  }

  .feature-icon {
    margin-bottom: 55px;
  }

  .approach-heading {
    margin-bottom: 48px;
  }

  .steps-list::before {
    left: 22px;
  }

  .step {
    grid-template-columns: 46px 1fr;
    gap: 20px;
    padding-block: 38px;
  }

  .step-index {
    width: 44px;
    height: 44px;
  }

  .step-copy h3 {
    font-size: 25px;
  }

  .step-visual {
    grid-column: 1 / -1;
    margin-top: 12px;
  }

  .question-grid {
    grid-template-columns: 1fr;
  }

  .question-grid article {
    min-height: 240px;
  }

  .faq-list summary {
    min-height: 80px;
    font-size: 16px;
  }

  .faq-list details p {
    margin-right: 8px;
  }

  .early-access {
    padding-block: 88px;
  }

  .field-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .access-form {
    border-radius: 21px;
    padding: 20px;
  }

  .footer-main {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .footer-main > p {
    max-width: 440px;
  }

  .footer-email {
    justify-self: start;
  }

  .footer-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}