/* =========================================
   RESPONSIVE — Mobile First
   ========================================= */

/* ─── TABLET (≤ 1024px) ──────────────────── */
/* Collapse navigation before the desktop links compete with the brand mark. */
@media (max-width: 1023px) {
  .nav__toggle {
    display: flex;
    position: relative;
    z-index: 1001;
  }
  .nav__menu {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--brand-field-navy);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    z-index: 999;
  }
  .nav__menu.is-open { display: flex; }
  .nav__menu.is-open + .nav__toggle span,
  .nav__toggle[aria-expanded="true"] span {
    background: var(--brand-white);
  }
  .nav__link { font-size: 1.2rem; padding: 0.75rem 2rem; }
  .nav__cta { margin-left: 0; }
}

@media (max-width: 1024px) {
  :root { --section-py: 4rem; }

  .story__grid { gap: 2.5rem; }
  .steps { gap: 1.5rem; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer__brand { grid-column: 1 / -1; }
  .coverage-form { grid-template-columns: 1fr 1fr; }
  .thanks-hero__inner { grid-template-columns: 1fr; }

  .hero__layout--split { grid-template-columns: 1fr; }
  .hero__copy { max-width: none; }
  .quickstart { max-width: 560px; }
  .protection__grid,
  .tire__hero,
  .premium__card { grid-template-columns: 1fr; gap: 2rem; }
}

/* ─── TABLET PORTRAIT (≤ 768px) ─────────── */
@media (max-width: 768px) {
  :root { --section-py: 3.5rem; }

  /* Nav */
  .nav__toggle {
    display: flex;
    position: relative;
    z-index: 1001;
  }
  .nav__menu {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--brand-field-navy);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    z-index: 999;
  }
  .nav__menu.is-open { display: flex; }
  .nav__menu.is-open + .nav__toggle span,
  .nav__toggle[aria-expanded="true"] span {
    background: var(--brand-white);
  }
  .nav__link { font-size: 1.2rem; padding: 0.75rem 2rem; }
  .nav__cta { margin-left: 0; }

  /* Hero */
  .hero__content { padding-bottom: 4rem; }
  .hero__actions { align-items: flex-start; }
  .hero__trust { flex-direction: column; text-align: center; }

  /* Inboard */
  .inboard__grid { grid-template-columns: 1fr; gap: 2rem; }

  /* ESA cards */
  .esa-cards { grid-template-columns: 1fr 1fr; }

  /* Story */
  .story__grid { grid-template-columns: 1fr; gap: 2rem; }
  .story__visual { order: -1; }
  .story__content .section__title { text-align: center; }
  .story__content .btn { display: block; text-align: center; }

  /* Compare */
  .compare__table { font-size: 0.85rem; }
  .compare__table thead th,
  .compare__table tbody td { padding: 0.75rem 0.875rem; }

  /* Coverage */
  .coverage__grid { grid-template-columns: 1fr 1fr; }

  /* Benefits */
  .benefits__grid { grid-template-columns: 1fr 1fr; }

  /* Plans, costs & coverage details */
  .sticky-cta__text span { display: none; }
  .plans__grid { grid-template-columns: 1fr; }
  .components__list { columns: 1; }
  .benefits__grid.tire__cards { grid-template-columns: 1fr; }
  .tire__cards .benefit__card:first-child { grid-row: auto; }
  #additional-benefits .benefit__card {
    grid-template-columns: 3rem minmax(0, 1fr);
    grid-template-areas: "icon title" "icon limit" "text text";
    row-gap: 0.5rem;
  }
  #additional-benefits .benefit__limit { padding: 0; border-left: 0; }
  #additional-benefits .benefit__limit > span { flex-basis: auto; }
  #additional-benefits .benefit__card > p:last-child { margin-top: 0.25rem; }
  .platinum { grid-template-columns: 1fr; }
  .platinum__cta { width: 100%; }
  .premium__tags { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .packages--media,
  .reasons__layout { grid-template-columns: 1fr; }
  .reasons__layout .media-slot { aspect-ratio: 16 / 9; min-height: 0; height: auto; }
  .benefits.has-bg[data-bg-slot] { background-attachment: scroll; }
  .protection__content .section__title,
  .tire__copy .section__title { text-align: center; }
  .tire__copy .btn { width: 100%; }
  .tire__stamp { left: 0.75rem; bottom: -1rem; font-size: 1.15rem; }

  /* Reviews */
  .reviews__summary {
    flex-direction: column;
    align-items: flex-start;
  }
  .reviews__rating { align-items: flex-start; }
  .reviews__caption { text-align: left; }
  .reviews__grid { grid-template-columns: 1fr; }
  .reviews__grid--featured { grid-template-columns: 1fr; }
  .review-card--featured { grid-row: auto; }
  .reviews__rating { flex-wrap: wrap; }

  /* Thank you */
  .thanks-panel { padding: 1.6rem; }

  /* Steps */
  .steps {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .steps::before { display: none; }
  .step { text-align: left; display: flex; align-items: flex-start; gap: 1.25rem; }
  .step__num { flex-shrink: 0; margin: 0; }
  .step__body { padding-top: 0.25rem; }

  /* Eligibility */
  .eligibility__grid { grid-template-columns: 1fr; }

  /* Form */
  .coverage-form {
    grid-template-columns: 1fr;
    padding: 1.75rem 1.25rem;
  }

  /* Footer */
  .footer__grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer__brand { grid-column: auto; }
}

/* ─── MOBILE (≤ 480px) ───────────────────── */
@media (max-width: 480px) {
  :root { --section-py: 3rem; }

  .hero__title { font-size: 1.8rem; }
  .section__title { font-size: 1.5rem; }
  .story .container,
  .esa-positive .container,
  .protection .container,
  .plans .container,
  .coverage .container,
  .coverage-details .container,
  .benefits .container,
  .tire-wheel .container,
  .reviews .container,
  .form-section .container,
  .thanks-summary .container,
  .faq .container { padding: 1.4rem; border-radius: 24px; }

  .coverage__grid { grid-template-columns: 1fr; }
  .benefits__grid { grid-template-columns: 1fr; }
  .reasons__grid { grid-template-columns: 1fr; }
  .premium__tags { grid-template-columns: 1fr 1fr; }
  .media-slot--banner { aspect-ratio: 16 / 9; }
  .plans__tab { min-width: 0; flex: 1; padding: 0.7rem 1rem; }
  .plans__switch { width: 100%; }
  .quickstart { padding: 1.35rem; }
  .packages { padding: 1.25rem; }
  .plan__card,
  .premium__card { border-radius: 24px; }
  .hero__actions .btn { width: 100%; }
  .esa-cards { grid-template-columns: 1fr; }
  .thanks-hero { min-height: auto; padding-bottom: 3rem; }
  .thanks-panel__title { font-size: 1.35rem; }

  .btn--lg { padding: 0.875rem 1.5rem; font-size: 1rem; }

  .compare__table thead th:first-child { display: none; }
  .compare__table tbody td:first-child { font-size: 0.8rem; }
}

/* ─── REDUCED MOTION ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

@media (max-width: 768px) {
  .thanks-banner { padding-bottom: 4.5rem; }
  .thanks-coverage { margin-top: -2.75rem; }
  .thanks-coverage__grid { grid-template-columns: 1fr; }
  .thanks-coverage__main { order: -1; }
  .thanks-coverage__aside { order: 0; }
  .thanks-detail-grid { grid-template-columns: 1fr; }
  .thanks-plan-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .thanks-offers__heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }
  .thanks-options-table__header,
  .thanks-option-row {
    grid-template-columns: minmax(0, 1fr) minmax(180px, 0.9fr);
    gap: 0.9rem;
  }
  .thanks-option-row__payment {
    padding: 0 0.35rem;
  }
}

@media (max-width: 480px) {
  .thanks-banner { padding: calc(var(--nav-h) + 1.5rem) 0 4rem; }
  .thanks-coverage { margin-top: -2.25rem; padding-bottom: 1.5rem; }
  .thanks-offers__card { padding: 1.1rem; }
  .thanks-plan-grid--3 { grid-template-columns: 1fr; }
  .thanks-plan-card { border-radius: 14px; padding: 0.85rem 1rem 1rem; }
  .thanks-plan-card__price { font-size: 1.5rem; }
  .thanks-options-table__header,
  .thanks-option-row {
    grid-template-columns: 1fr;
  }
  .thanks-options-table__header {
    padding-left: 0;
    padding-right: 0;
  }
  .thanks-option-row {
    padding: 1rem 0;
  }
  .thanks-option-row__payment {
    padding: 0;
  }
  .thanks-option-row__monthly {
    font-size: 3.1rem;
  }
  .thanks-option-row__retail {
    min-height: auto;
  }
}

/* ─── LAYOUT FIXES: MENU, TABLET HERO, IMAGE COLUMNS, COST PANEL ─── */

/* Desktop: side images fill the height of their text column (no gaps). */
@media (min-width: 1024px) {
  .story__grid,
  .inboard__grid { align-items: stretch; }
  .story__visual,
  .inboard__visual { display: flex; }
  .story__visual img,
  .inboard__visual img { height: 100%; min-height: 320px; object-fit: cover; }
}

@media (max-width: 1023px) {
  /* Open mobile menu: white links on navy, whatever the header state. */
  .header .nav__toggle[aria-expanded="true"] span { background: var(--brand-white); }
  .header .nav__menu.is-open .nav__link:not(.nav__cta) {
    color: var(--brand-white);
    background: transparent;
    text-shadow: none;
  }
  .header .nav__menu.is-open .nav__link:not(.nav__cta):hover,
  .header .nav__menu.is-open .nav__link:not(.nav__cta):focus-visible,
  .header .nav__menu.is-open .nav__link.active {
    color: var(--brand-primary-cyan);
    background: rgba(255,255,255,0.06);
  }

  /* Tablet/phone: text first, then a wide image banner (no side gaps). */
  .story__grid,
  .inboard__grid { grid-template-columns: 1fr; gap: 2rem; align-items: start; }
  .story__visual,
  .inboard__visual { order: -1; }
  .story__visual img,
  .inboard__visual img { width: 100%; height: auto; min-height: 0; aspect-ratio: 16 / 9; max-height: 380px; object-fit: cover; }
  .story__content .section__title,
  .inboard__content .section__title { text-align: left !important; }
}

/* Tablet: centered, symmetric hero. */
@media (min-width: 481px) and (max-width: 1023px) {
  .hero__copy { text-align: center; }
  .hero__eyebrow { justify-content: center; }
  .hero__subtitle { margin-left: auto; margin-right: auto; }
  .hero__actions { justify-content: center; }
  .hero__trust { justify-content: center; flex-direction: row; text-align: left; }
  .quickstart { margin: 0 auto; width: 100%; }

}

/* Footer band: centered and stacked until the links fit on one line next to the logo. */
@media (max-width: 1199px) {
  .footer__grid--two { flex-direction: column; text-align: center; gap: 1.5rem; }
  .footer__grid--two .footer__col ul { justify-content: center; gap: 0.6rem 1.25rem; }
  .footer__grid--two .footer__brand img { display: block; margin-inline: auto; }
}

/* Rate card: one narrower column below 1200px (3 columns don't fit), stacked CTA on phones. */
@media (max-width: 1199px) {
  .rate-card { max-width: 680px; }
  .rate-card__head { grid-template-columns: 1fr; }
  .rate-card__head > div + div { display: none; }
  .rate-card__list { grid-auto-flow: row; grid-template-columns: 1fr; grid-template-rows: none; }
  .rate-card__row:nth-child(n + 4) { border-left: 0; }
  .rate-card__row:nth-child(3n + 2) { background: var(--brand-white); }
  .rate-card__row:nth-child(odd) { background: #F6F9FC; }
}
@media (max-width: 767px) {
  .rate-card__cta { flex-direction: column; align-items: stretch; text-align: center; }
  .rate-card__offer { justify-content: center; }
  .rate-card__cta .btn { width: 100%; }
}
@media (max-width: 480px) {
  .rate-card__head { font-size: 0.68rem; letter-spacing: 0.04em; }
  .rate-card__head > div { padding: 0.8rem 1rem; }
  .rate-card__row { padding: 0.6rem 1rem; }
  .rate-card__row dd { min-width: 5.2rem; font-size: 1rem; }
  .rate-card__cta { padding: 1.1rem 1rem; }
}

@media (max-width: 1199px) {
  .accessory__types ul { grid-template-columns: repeat(4, max-content); gap: 0.6rem 2.5rem; }
}
/* Accessory package: one card per row below 1024px; component lists start folded on phones (landing-sales.js). */
@media (max-width: 1023px) {
  .accessory__grid { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .accessory__terms { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
}
@media (max-width: 767px) {
  .accessory__types ul { grid-template-columns: repeat(2, max-content); }
}
@media (max-width: 480px) {
  .accessory__types ul { grid-template-columns: 1fr 1fr; gap: 0.5rem 1rem; }
  .accessory-card__components ul { columns: 1; }
}