@media (max-width: 1199px) {
  .how-work-hero__inner { grid-template-columns: minmax(300px, .9fr) minmax(430px, 1.1fr); }
  .how-work-hero h1 { font-size: clamp(44px, 5.8vw, 64px); letter-spacing: -1.8px; }
}

@media (max-width: 1199px) {
  .how-work-hero__inner { grid-template-columns: minmax(250px, .8fr) minmax(360px, 1.2fr); }
  .how-work-hero__art { margin-right: -90px; }
  .how-work-intro { max-width: 780px; width: 100%; }
  .how-work-intro > p:not(.how-work-eyebrow) { white-space: normal; }
  .hyperloop { height: auto; margin-left: 0; margin-top: 38px; min-height: 1680px; padding: 24px 0 38px; transform: none; width: 100%; }
  .hyperloop__canvas, .hyperloop__center { display: none; }
  .hyperloop__mobile-track { display: block; height: 100%; inset: 0; overflow: visible; position: absolute; width: 100%; z-index: 0; }
  .hyperloop__stages { height: auto; inset: auto; position: relative; }
  .hyperloop-stage { inset: auto; margin-bottom: 18px; min-height: 142px; padding-left: 92px; padding-right: 30px; pointer-events: auto; position: relative; }
  .hyperloop-stage:last-child { margin-bottom: 0; }
  .hyperloop-stage__node { height: 72px; left: 7.5% !important; top: 26px !important; transform: translateX(-50%); width: 72px; }
  .hyperloop-stage__node .how-work-icon { height: 30px; width: 30px; }
  .hyperloop-stage__node .how-work-icon svg { height: 25px; width: 25px; }
  .hyperloop-stage__card,
  .hyperloop-stage--1 .hyperloop-stage__card,
  .hyperloop-stage--2 .hyperloop-stage__card,
  .hyperloop-stage--3 .hyperloop-stage__card,
  .hyperloop-stage--4 .hyperloop-stage__card,
  .hyperloop-stage--5 .hyperloop-stage__card,
  .hyperloop-stage--6 .hyperloop-stage__card,
  .hyperloop-stage--7 .hyperloop-stage__card,
  .hyperloop-stage--8 .hyperloop-stage__card,
  .hyperloop-stage--9 .hyperloop-stage__card,
  .hyperloop-stage--10 .hyperloop-stage__card {
    bottom: auto;
    height: auto;
    left: auto;
    min-height: 142px;
    padding: 22px 24px;
    position: relative;
    top: auto;
    width: 100%;
  }
  .hyperloop-stage__card h4 { font-size: 20px; }
  .hyperloop-stage__card p { font-size: 16px; }
  .hyperloop-stage--learning .hyperloop-stage__node { height: 78px; width: 78px; }
  .hyperloop-stage--learning .hyperloop-stage__card { padding-top: 19px; }

  .hyperloop { min-height: 2200px; }
  .hyperloop-stage { min-height: 0; padding-left: 92px; padding-right: 28px; }
  .hyperloop-stage__card,
  .hyperloop-stage--1 .hyperloop-stage__card,
  .hyperloop-stage--2 .hyperloop-stage__card,
  .hyperloop-stage--3 .hyperloop-stage__card,
  .hyperloop-stage--4 .hyperloop-stage__card,
  .hyperloop-stage--5 .hyperloop-stage__card,
  .hyperloop-stage--6 .hyperloop-stage__card,
  .hyperloop-stage--7 .hyperloop-stage__card,
  .hyperloop-stage--8 .hyperloop-stage__card,
  .hyperloop-stage--9 .hyperloop-stage__card,
  .hyperloop-stage--10 .hyperloop-stage__card {
    align-items: flex-start;
    border: 3px solid var(--atlas-blue);
    border-radius: 48px;
    min-height: 190px;
    padding: 24px 26px;
    text-align: left;
    transform: none;
  }
  .hyperloop-stage__card::before {
    border-top: 3px solid var(--atlas-blue);
    content: '';
    left: -30px;
    position: absolute;
    top: 54px;
    width: 28px;
  }
  .hyperloop-stage__card:hover,
  .hyperloop-stage__card:focus-visible { transform: translateY(-3px); }
  .hyperloop-stage__node,
  .hyperloop-stage--learning .hyperloop-stage__node {
    height: 72px;
    justify-content: center;
    left: 7.5% !important;
    position: absolute;
    top: 55px !important;
    transform: translate(-50%, -50%);
    width: 72px;
  }
  .hyperloop-stage--learning .hyperloop-stage__node { height: 78px; width: 78px; }
  .hyperloop-stage__card h4 { margin-top: 0; }
}

@media (max-width: 767px) {
  .how-work-hero__inner { grid-template-columns: minmax(210px, .95fr) minmax(280px, 1.05fr); }
  .how-work-hero h1 { font-size: clamp(38px, 7.5vw, 50px); }
  .how-work-hero__art { margin-right: -130px; }
}

@media (max-width: 575px) {
  .how-work-hero { height: 210px; }
  .how-work-hero::before, .how-work-hero::after { display: none; }
  .how-work-hero__inner { grid-template-columns: 1.04fr .96fr; padding-left: 20px; padding-right: 0; }
  .how-work-hero h1 { font-size: clamp(32px, 9.3vw, 42px); letter-spacing: -1px; line-height: 1.08; }
  .how-work-hero__art { margin-right: -95px; }
  .how-work-hero__art svg { height: 190px; max-width: 370px; width: 370px; }
  .how-work-content { padding: 44px 0 0; }
  .how-work-eyebrow { font-size: 12px !important; letter-spacing: 2px; }
  .how-work-intro h2 { font-size: 30px; }
  .how-work-intro > p:not(.how-work-eyebrow) { font-size: 17px; }
  .hyperloop { margin-top: 30px; min-height: 1820px; padding-top: 20px; }
  .hyperloop-stage { margin-bottom: 16px; min-height: 158px; padding-left: 68px; padding-right: 15px; }
  .hyperloop-stage__node { height: 58px; left: 8.5% !important; top: 51px !important; width: 58px; }
  .hyperloop-stage__node .how-work-icon { height: 25px; width: 25px; }
  .hyperloop-stage__node .how-work-icon svg { height: 22px; width: 22px; }
  .hyperloop-stage__number { bottom: -7px; font-size: 10px; line-height: 19px; min-width: 27px; }
  .hyperloop-stage__card,
  .hyperloop-stage--1 .hyperloop-stage__card,
  .hyperloop-stage--2 .hyperloop-stage__card,
  .hyperloop-stage--3 .hyperloop-stage__card,
  .hyperloop-stage--4 .hyperloop-stage__card,
  .hyperloop-stage--5 .hyperloop-stage__card,
  .hyperloop-stage--6 .hyperloop-stage__card,
  .hyperloop-stage--7 .hyperloop-stage__card,
  .hyperloop-stage--8 .hyperloop-stage__card,
  .hyperloop-stage--9 .hyperloop-stage__card,
  .hyperloop-stage--10 .hyperloop-stage__card { min-height: 158px; padding: 20px 18px; }
  .hyperloop-stage__card h4 { font-size: 19px; }
  .hyperloop-stage__card p { font-size: 15px; line-height: 1.55; }
  .hyperloop-stage--learning .hyperloop-stage__node { height: 64px; width: 64px; }
  .hyperloop { min-height: 2200px; }
  .hyperloop-stage { min-height: 0; padding-left: 68px; padding-right: 14px; }
  .hyperloop-stage__card,
  .hyperloop-stage--1 .hyperloop-stage__card,
  .hyperloop-stage--2 .hyperloop-stage__card,
  .hyperloop-stage--3 .hyperloop-stage__card,
  .hyperloop-stage--4 .hyperloop-stage__card,
  .hyperloop-stage--5 .hyperloop-stage__card,
  .hyperloop-stage--6 .hyperloop-stage__card,
  .hyperloop-stage--7 .hyperloop-stage__card,
  .hyperloop-stage--8 .hyperloop-stage__card,
  .hyperloop-stage--9 .hyperloop-stage__card,
  .hyperloop-stage--10 .hyperloop-stage__card {
    border-radius: 36px;
    min-height: 0;
    padding: 22px 20px;
  }
  .hyperloop-stage__card::before { left: -34px; top: 51px; width: 31px; }
  .about-network-cta { padding: 44px 0; }
  .about-network-cta-inner { align-items: flex-start; flex-direction: column; padding: 34px 26px; }
  .about-network-cta .btn { margin: 24px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hyperloop__track-highlight { animation: none; }
  .hyperloop-stage__card { transition: none; }
}