.wrap {
  width:min(1280px,calc(100% - 96px));
  margin-inline:auto;
}
.header {
  min-height:108px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
}
.header nav {
  display:flex;
  align-items:center;
  gap:30px;
}
.hero {
  display:grid;
  grid-template-columns:1.03fr 1fr;
  gap:60px;
  align-items:center;
  padding-top:32px;
  padding-bottom:74px;
}
.hero-copy {
  padding-block:26px;
}
.hero-visual {
  position:relative;
  align-self:stretch;
  min-height:580px;
}
.hero-visual>img {
  width:100%;
  height:100%;
  position:absolute;
  border-radius:var(--radius-lg);
}
.actions {
  display:flex;
  gap:24px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:30px;
}
.principles {
  display:flex;
  justify-content:space-between;
  gap:24px;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding-block:24px;
}
.section {
  padding-block:100px;
}
.section-heading {
  display:flex;
  justify-content:space-between;
  gap:50px;
  align-items:end;
  margin-bottom:40px;
}
.section-heading>p {
  max-width:360px;
}
.feature-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.calculator-section {
  padding-block:80px;
  background:var(--navy);
  color:var(--on-dark);
}
.calculator-layout {
  display:grid;
  grid-template-columns:.9fr 1fr;
  gap:100px;
  align-items:center;
}
.field-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
.steps {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:60px;
  margin-top:50px;
}
.plans {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
.footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  padding-block:36px;
}
.menu-toggle {
  display:none;
}
@media(min-width:1600px) {
  .hero-visual {
    min-height:620px;
  }
}
@media(max-width:1100px) {
  .wrap {
    width:calc(100% - 56px);
  }
  .header nav {
    gap:20px;
    font-size:.875rem;
  }
  .hero {
    gap:32px;
  }
  .hero-visual {
    min-height:540px;
  }
  .calculator-layout {
    gap:45px;
  }
  .feature-top {
    flex-wrap:wrap;
    gap:8px;
  }
  .steps {
    gap:30px;
  }
  .footer {
    flex-wrap:wrap;
  }
}
@media(max-width:60rem) {
  .wrap {
    width:calc(100% - 40px);
  }
  .header {
    min-height:80px;
    position:relative;
    flex-wrap:wrap;
    gap:0;
  }
  .js .menu-toggle {
    display:flex;
    gap:12px;
    align-items:center;
    background:transparent;
    border:1px solid var(--border);
    padding:8px 12px;
    border-radius:var(--radius-sm);
    color:var(--ink);
  }
  .header nav {
    display:flex;
    width:100%;
    padding:15px 0 25px;
    align-items:stretch;
    flex-direction:column;
    font-size:1rem;
    gap:18px;
  }
  .header nav.open {
    display:flex;
  }
  .hero {
    grid-template-columns:1fr;
    gap:28px;
    padding-top:5px;
    padding-bottom:40px;
  }
  .hero-copy {
    padding-top:16px;
  }
  h1 {
    font-size:clamp(3.1rem,10.5vw,4.8rem);
  }
  .hero-visual {
    min-height:460px;
  }
  .principles {
    flex-direction:column;
    gap:10px;
    font-size:.875rem;
  }
  .section {
    padding-block:64px;
  }
  .section-heading {
    display:block;
    margin-bottom:28px;
  }
  .section-heading>p {
    margin-top:22px;
  }
  .feature-grid,.calculator-layout,.steps,.plans {
    grid-template-columns:1fr;
  }
  .calculator-layout {
    gap:32px;
  }
  .calculator-section {
    padding-block:60px;
  }
  .steps {
    gap:32px;
  }
  .steps article {
    border-bottom:1px solid var(--border);
    padding-bottom:28px;
  }
  .footer {
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
  }
  .actions {
    gap:20px;
  }
  .feature {
    padding:26px!important;
  }
  .calculator {
    padding:24px!important;
  }
  .ride-card {
    left:16px!important;
    right:16px!important;
    bottom:16px!important;
  }
  .ride-card-top {
    flex-wrap:wrap;
    gap:8px;
  }
  .plan {
    padding:28px!important;
  }
}
@media(max-width:380px) {
  .field-grid {
    grid-template-columns:1fr;
  }
  .hero-visual {
    min-height:400px;
  }
  .ride-stats strong {
    font-size:1.55rem;
  }
  .ride-card {
    padding:16px!important;
  }
}
.hero>*,.calculator-layout>*,.field-grid>* {
  min-width:0;
}
.header nav {
  flex-wrap:wrap;
}
.header {
  flex-wrap:wrap;
}
.field-grid {
  grid-template-columns:repeat(auto-fit,minmax(min(100%,10rem),1fr));
}
@media(max-width:60rem) {
  .js .header nav:not(.open) {
    display:none;
  }
}
.hero-visual {
  display: grid;
  padding: 24px;
}
.hero-visual > img {
  inset: 0;
}
@media (max-width: 60rem) {
  .hero-visual {
    padding: 16px;
  }
}