/* Responsive spacing refinements. Load after the section stylesheets. */

/* Keep desktop copy and the campaign photograph in one balanced first view. */
@media (min-width: 1001px) {
  .hero-campaign {
    min-height: clamp(560px, 75vh, 680px);
    min-height: clamp(560px, 75svh, 680px);
  }
  .hero-campaign-image {
    object-position: center center;
  }
  .hero-campaign-copy {
    padding-top: clamp(26px, 3.4vh, 34px);
  }
  .hero-campaign-copy .eyebrow {
    margin-bottom: 14px;
  }
  .hero-campaign h1 {
    font-size: clamp(3.2rem, 4.4vw, 4.4rem);
  }
  .hero-campaign-description {
    margin-block: 16px 21px;
  }
  .hero-download {
    min-height: 56px;
    padding-block: 15px;
  }
  .hero-plan-link {
    margin-top: 10px;
  }
}

.benefit-row {
  padding-block: 17px;
}
.benefit-row > div {
  gap: 14px;
  min-width: 0;
}
.benefit-row > div > span {
  min-width: 0;
  text-align: left;
}
.benefit-row > div > svg {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

/* These sections use natural height; only their surrounding rhythm changes. */
#services.section,
#our-care.section,
#why-washngo.section,
.plans-section > .section {
  padding-block: clamp(56px, 5.1vw, 74px);
}
.section-heading {
  margin-bottom: 32px;
}
.section-heading p:not(.eyebrow) {
  margin-top: 16px;
}
.bike-copy {
  padding: 38px 42px;
}
.bike-photo {
  min-height: 410px;
}
.care-story-grid {
  gap: 32px;
}
.comparison-photo > img {
  height: 400px;
}

/* Scale the whole mockup composition together, retaining the app's pixels. */
.reference-showcase .section {
  padding-block: 64px 52px;
}
.reference-showcase h2 {
  font-size: clamp(2rem, 3.5vw, 3.1rem);
  margin-bottom: 36px;
}
.reference-showcase .ref-mockup {
  max-width: 336px;
}
.reference-showcase .step-badge {
  margin-top: 16px;
}
.how-section.reference-showcase .app-step h3 {
  margin-top: 18px;
  font-size: clamp(1.3rem, 1.9vw, 1.7rem);
}
.how-section.reference-showcase .app-step > p {
  margin-top: 12px;
}

.ref-quality {
  padding-block: 64px 54px;
}
.ref-quality h2,
.ref-reviews h2 {
  font-size: clamp(2rem, 3.5vw, 3.1rem);
}
.ref-quality-grid {
  margin-top: 34px;
}
.champ-card {
  min-height: 426px;
  padding: 24px;
}
.ref-reviews {
  padding-block: 62px 54px;
}
.ref-reviews-heading {
  margin-bottom: 30px;
}
.ref-review-rows {
  gap: 20px;
}
.ref-review-card {
  min-height: 248px;
  padding: 23px 26px;
}
.ref-review-author {
  margin-top: 18px;
}

.faq-home .section {
  padding-block: 60px;
}
.faq-home h2 {
  margin-bottom: 32px;
}
.faq-home .faq-item summary {
  min-height: 76px;
  padding-block: 20px;
}
.faq-home .faq-bottom {
  padding-block: 22px;
}
.site-footer.footer-minimal {
  padding-block: 56px 60px;
}

@media (max-width: 1000px) {
  /* The existing image overlap consumes its built-in blank upper area. */
  .hero-campaign-copy {
    padding-top: 28px;
    padding-bottom: 12px;
  }
  .hero-campaign h1 {
    font-size: clamp(2.8rem, 5.8vw, 3.6rem);
  }
  .hero-campaign-description {
    margin-block: 15px 20px;
  }
  .hero-plan-link {
    margin-top: 10px;
  }
  .reference-showcase .section {
    padding-block: 50px 42px;
  }
  .reference-showcase h2 {
    margin-bottom: 26px;
    font-size: clamp(1.8rem, 4.6vw, 2.65rem);
  }
  .reference-showcase .ref-mockup {
    max-width: 326px;
  }
  .ref-quality,
  .ref-reviews {
    padding-block: 52px 46px;
  }
  .champ-card {
    min-height: 0;
  }
}

@media (min-width: 651px) and (max-width: 900px) {
  .benefit-row {
    gap: 12px;
  }
  .benefit-row > div {
    gap: 10px;
    padding-right: 10px;
  }
  .benefit-row strong {
    font-size: 0.8125rem;
    line-height: 1.35;
  }
  .benefit-row small {
    font-size: 0.75rem;
    line-height: 1.4;
  }
}

@media (max-width: 650px) {
  .hero-campaign-copy {
    padding: 24px 18px 10px;
  }
  .hero-campaign-copy .eyebrow {
    margin-bottom: 12px;
  }
  .hero-campaign h1 {
    font-size: clamp(2.25rem, 9.7vw, 3rem);
    line-height: 1.07;
  }
  .hero-campaign-description {
    margin-block: 13px 17px;
    line-height: 1.55;
  }
  .hero-download {
    min-height: 54px;
    padding-block: 14px;
  }
  .hero-plan-link {
    margin-top: 8px;
  }
  .benefit-row {
    padding-block: 6px;
  }
  .benefit-row > div {
    padding-block: 10px;
    gap: 12px;
  }
  .benefit-row > div > svg {
    width: 23px;
    height: 23px;
    margin-left: 0;
  }
  .benefit-row > div > span {
    display: block;
    flex: 1;
  }
  .benefit-row strong {
    font-size: 0.875rem;
    line-height: 1.35;
  }
  .benefit-row small {
    max-width: none;
    margin-top: 2px;
    text-align: left;
    font-size: 0.75rem;
    line-height: 1.4;
  }
  #services.section,
  #our-care.section,
  #why-washngo.section,
  .plans-section > .section {
    padding-block: 46px;
  }
  .section-heading {
    margin-bottom: 26px;
  }
  .bike-photo {
    min-height: 0;
    height: auto;
    aspect-ratio: 1.4;
  }
  .bike-copy {
    padding: 27px 24px;
  }
  .care-story-grid {
    gap: 26px;
  }
  .comparison-photo > img {
    height: auto;
    aspect-ratio: 1.35;
  }
  .reference-showcase .section {
    padding-block: 44px 38px;
  }
  .reference-showcase h2 {
    font-size: clamp(1.8rem, 7.3vw, 2.2rem);
    margin-bottom: 22px;
  }
  .reference-showcase .ref-mockup {
    max-width: 310px;
  }
  .reference-showcase .step-badge {
    margin-top: 12px;
  }
  .how-section.reference-showcase .app-step h3 {
    margin-top: 15px;
    font-size: 1.35rem;
  }
  .how-section.reference-showcase .app-step > p {
    margin-top: 10px;
    font-size: 0.875rem;
  }
  .ref-quality,
  .ref-reviews {
    padding-block: 44px 40px;
  }
  .ref-quality-grid {
    margin-top: 28px;
  }
  .ref-reviews-heading {
    margin-bottom: 24px;
  }
  .ref-review-card {
    min-height: 238px;
    padding: 22px;
  }
  .faq-home .section {
    padding-block: 44px;
  }
  .faq-home h2 {
    margin-bottom: 26px;
  }
  .faq-home .faq-item summary {
    min-height: 68px;
    padding: 18px 20px;
  }
  .faq-home .faq-bottom {
    padding: 20px;
  }
  /* The lower campaign also follows its content instead of a blank spacer. */
  .download-banner-stage {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-top: 0;
  }
  .download-banner-copy {
    position: relative;
    order: 0;
    padding: 32px 20px 10px;
  }
  .download-banner-photo {
    order: 1;
    flex: none;
    margin-top: -10vw;
    mask-image: linear-gradient(180deg, transparent, #000 24%);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 24%);
  }
  .download-banner-shade {
    background: none;
  }
  .download-banner-signoff {
    padding-block: 14px;
  }
  .site-footer.footer-minimal {
    padding-block: 42px 104px;
  }
  .footer-minimal .footer-minimal-grid {
    gap: 32px;
  }
}