/* Car Vin Inspection — custom styles */

:root {
  --heading: #1c2226;
  --text: #5f6973;
  --yellow: #f5c518;
  --yellow-dark: #e0b00e;
  --navy: #0f1a2e;
  --blue: #1a3a8f;
  --gray-bg: #f3f4f6;
  --card-bg: #eef0f3;
  --grid-line: #e8eaed;
}

html {
  scroll-behavior: smooth;
  background-color: #fff;
  /* keeps the page from shifting when the menu locks body scroll */
  scrollbar-gutter: stable;
}

body {
  font-family: "Chivo", sans-serif;
  color: var(--text);
  min-height: 100vh;
  background-color: #fff;
  /* Vertical guide lines at every quarter of the page width, drawn in CSS so
     they stay hairline-thin and evenly spaced at any page length or width. */
  background-image: repeating-linear-gradient(
    to right,
    var(--grid-line),
    var(--grid-line) 1px,
    transparent 1px,
    transparent 25%
  );
}

h1,
h2,
h3,
h4,
h5,
h6,
.font-heading {
  font-family: "DM Sans", sans-serif;
  color: var(--heading);
}

/* Brush underline under "Vehicle" */
.brush-underline {
  position: relative;
  display: inline-block;
}

.brush-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: calc(100% - 6px);
  height: 0.3em;
  background: url("../asset/brush-underline.svg") center / 100% 100% no-repeat;
  pointer-events: none;
}

/* The yellow brush is invisible on the yellow title band, so the stroke is
   masked instead of drawn from the SVG fill and takes the heading text color. */
.page-hero .brush-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -16px;
  width: calc(100% - 6px);
  height: 0.3em;
  background-image: none;
  background-color: currentColor;
  -webkit-mask: url("../asset/brush-underline-dark.svg") center / 100% 100%
    no-repeat;
  mask: url("../asset/brush-underline-dark.svg") center / 100% 100% no-repeat;
  pointer-events: none;
}

/* Hero */
.hero {
  position: relative;
  min-height: min(92vh, 820px);
  background-color: #e8e9eb;
  background-image: url("../asset/ChatGPT-Image-Jun-19-2026-11_38_39-PM.png");
  background-size: cover;
  background-position: 44% center;
  background-attachment: fixed;
  overflow: hidden;
}

@media (max-width: 1024px) {
  .hero {
    background-position: 70% center;
  }
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #000000bd;
  opacity: 0.25;
  pointer-events: none;
  z-index: 0;
}

/* Pricing ribbon — the folded band graphic overhangs the card corner, so it is
   offset outwards and left unclipped */
.plan-ribbon {
  position: absolute;
  top: -11px;
  right: -11px;
  width: 132px;
  pointer-events: none;
}

.plan-ribbon img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.18));
}

/* the three-up grid gets cramped between md and lg, so scale the badge down */
@media (max-width: 1023px) {
  .plan-ribbon {
    width: 112px;
  }
}

.plan-card {
  position: relative;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.plan-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(28, 34, 38, 0.1);
}

/* Mobile: tire-track art tiles vertically as the pricing section grows */
@media (max-width: 767px) {
  #pricing {
    background-color: #fff;
    background-image: url("../asset/Mask-1.png");
    background-repeat: repeat-y;
    background-position: top center;
    background-size: 115% auto;
  }

  #pricing .pricing-mask-bottom {
    display: none !important;
  }
}

.plan-gold {
  background: #f0c040;
}

.Pricing-Plans-text {
  font-weight: 300;
}

.Pricing-Plans-text li > span:not(.check-icon) {
  font-weight: 300;
}

.check-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  color: #1c2226;
}

.check-icon i {
  font-size: 19px;
}

.plan-gold .check-icon {
  color: #1c2226;
}

/* Partners heading zigzag border — 2px #808080 */
.partners-heading .partners-wave {
  flex: 1;
  height: 7px;
  min-width: 2.5rem;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10' fill='none'%3E%3Cpolyline points='0,5 4,1.5 8,5 12,8.5 16,5' stroke='%23808080' stroke-width='1' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: center;
  background-size: 16px 10px;
}

/* Partners infinite slider */
.partners-slider {
  overflow: hidden;
  width: 100%;
  mask-image: linear-gradient(
    to right,
    transparent,
    #000 6%,
    #000 94%,
    transparent
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    #000 6%,
    #000 94%,
    transparent
  );
}

.partners-track {
  display: flex;
  width: max-content;
  animation: partners-scroll 32s linear infinite;
  will-change: transform;
}

.partners-slider.is-stepping .partners-track {
  animation: none;
  transition: transform 0.5s cubic-bezier(0.33, 1, 0.68, 1);
}

.partners-slider:hover .partners-track {
  animation-play-state: paused;
}

.partners-group {
  display: flex;
  align-items: center;
  gap: 3.25rem;
  padding-inline: 1.625rem;
  flex-shrink: 0;
}

.partners-group img {
  width: 7.5rem;
  max-width: 7.5rem;
  height: 2.75rem;
  max-height: 2.75rem;
  object-fit: contain;
  object-position: center;
  flex-shrink: 0;
  opacity: 0.92;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.partners-group img:hover {
  opacity: 1;
  transform: scale(1.04);
}

.partners-group img.partners-logo-arizona {
  mix-blend-mode: multiply;
}

@keyframes partners-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .partners-track {
    animation: none;
  }

  .partners-slider {
    overflow-x: auto;
  }

  .partners-slider.is-stepping .partners-track {
    transition: none;
  }
}

@media (max-width: 767px) {
  /* Heading: wave above / title / wave below */
  .partners-heading {
    flex-direction: column;
    justify-content: center;
    gap: 0.7rem;
    margin-bottom: 1.75rem;
  }

  .partners-heading .partners-wave {
    flex: none;
    width: min(12rem, 58vw);
    height: 10px;
  }

  .partners-heading h2 {
    font-size: 32px;
    line-height: 1.2;
  }

  /* Mobile: show 3 logos; JS advances one-by-one */
  .partners-slider {
    --partners-gap: 0.85rem;
    overflow: hidden;
    width: 100%;
    padding-inline: 1rem;
    mask-image: none;
    -webkit-mask-image: none;
  }

  .partners-track {
    animation: none;
    will-change: transform;
  }

  .partners-group {
    gap: var(--partners-gap);
    padding-inline: 0;
  }

  .partners-group img {
    height: 2.5rem;
    max-height: 2.5rem;
    box-sizing: border-box;
    object-fit: contain;
    object-position: center;
    /* width / flex-basis set by js/main.js (1/3 of slider) */
  }
}

/* Yellow features section */
.features-band {
  background: var(--yellow);
  border-radius: 1.25rem;
}

.feature-tile {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: flex-start;
}

.feature-icon {
  flex-shrink: 0;
  width: 38px;
  height: 40px;
  border-radius: 9px;
  background: #eef3fb;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 8px rgba(15, 26, 46, 0.08);
}

.feature-icon i {
  font-size: 17px;
  color: var(--navy);
}

.feature-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Why choose cards */
.why-card {
  background: #fff;
  border-radius: 1rem;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  /* box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; */
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.why-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(28, 34, 38, 0.1);
}

/* Testimonials */
.testimonial-card {
  background: #fff;
  border-radius: 1rem;
  /* box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; */
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.tm-slider {
  overflow: hidden;
  padding-bottom: 0.25rem;
}

/* Swiper gives slides height:100%, which pins each card to its own text.
   Releasing that lets the flex row stretch them all to the tallest card. */
.tm-slider .swiper-wrapper {
  align-items: stretch;
}

.tm-slider .swiper-slide {
  height: auto;
  display: flex;
  flex-direction: column;
}

.tm-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 1.25rem;
}

.tm-slider .swiper-pagination {
  position: static;
  width: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tm-slider .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  margin: 0 !important;
  border-radius: 50%;
  background: #d5d9de;
  opacity: 1;
  transition:
    width 0.25s ease,
    background 0.25s ease,
    border-radius 0.25s ease;
}

.tm-slider .swiper-pagination-bullet-active {
  width: 24px;
  border-radius: 999px;
  background: var(--yellow);
}

.tm-arrows {
  display: flex;
  gap: 0.625rem;
}

.tm-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #e2e5e9;
  background: #fff;
  color: var(--heading);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

.tm-arrow:hover {
  background: var(--yellow);
  border-color: var(--yellow);
  transform: translateY(-2px);
}

.tm-arrow.swiper-button-disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
  transform: none;
}

/* FAQ accordion */
.faq-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.15rem;
  text-align: left;
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.45;
  color: var(--heading);
  background: #fff;
  border-radius: 0.625rem;
  box-shadow: 0 1px 2px rgba(28, 34, 38, 0.05);
  cursor: pointer;
  transition: box-shadow 0.2s ease;
}

.faq-trigger:hover {
  box-shadow: 0 4px 14px rgba(28, 34, 38, 0.08);
}

.faq-icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  display: grid;
  place-items: center;
  color: #2563eb;
  transition: transform 0.25s ease;
}

.faq-item.open .faq-icon {
  transform: rotate(180deg);
}

.faq-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.faq-panel-inner {
  padding: 0.85rem 1.15rem 0.4rem;
  font-size: 16px;
  line-height: 1.85;
  color: var(--text);
}

/* Left menu rail + side panel */
.Home-menu-section {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 61;
  width: 4.2%;
  min-width: 52px;
  height: 100%;
  background: #fff;
  /* border-right: 1px solid var(--grid-line); */
}

.menu-section {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 61;
  width: 5.2%;
  min-width: 52px;
  height: 100%;
  /* background: #fff; */
  /* border-right: 1px solid var(--grid-line); */
}

.menu-rail {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  pointer-events: none;
}

.menu-rail-label {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: "Chivo", sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--heading);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  line-height: 1;
  user-select: none;
  cursor: pointer;
  pointer-events: auto;
  transition:
    color 0.25s ease,
    letter-spacing 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.menu-rail-label:hover,
body.menu-open .menu-rail-label {
  color: var(--blue);
  letter-spacing: 0.12em;
}

.menu-rail-icon {
  position: relative;
  width: 19px;
  height: 19px;
  padding: 0;
  transform: rotate(90deg);

  border: 0;
  background: transparent;
  display: grid;
  place-items: center;
  color: var(--heading);
  cursor: pointer;
  pointer-events: none;
}

body.menu-open .menu-rail-icon {
  pointer-events: auto;
}

/* both icon states share one grid cell so they can cross-fade in place */
.menu-icon-bars,
.menu-icon-close {
  grid-area: 1 / 1;
  transition:
    opacity 0.28s ease,
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.menu-icon-bars {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 18px;
}

.menu-icon-bars span {
  display: block;
  height: 1.5px;
  width: 100%;
  background: var(--heading);
  border-radius: 1px;
  transition: background-color 0.25s ease;
}

.menu-icon-close {
  display: grid;
  place-items: center;
  font-size: 16px;
  line-height: 1;
  color: var(--heading);
  opacity: 0;
  transform: rotate(-90deg) scale(0.6);
}

body.menu-open .menu-icon-bars {
  opacity: 0;
  transform: rotate(90deg) scale(0.6);
}

body.menu-open .menu-icon-close {
  opacity: 1;
  transform: rotate(0deg) scale(1);
  color: var(--blue);
}

/* Header hamburger — mirrors the rail button, but always available */
.header-menu-btn {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(28, 34, 38, 0.14);
  border-radius: 12px;
  background: #fff;
  color: var(--heading);
  cursor: pointer;
  transition:
    color 0.25s ease,
    border-color 0.25s ease,
    background-color 0.25s ease;
}

.header-menu-btn:hover,
body.menu-open .header-menu-btn {
  color: var(--blue);
  border-color: var(--blue);
}

.header-menu-bars {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 20px;
}

.header-menu-bars span {
  display: block;
  height: 2px;
  width: 100%;
  background: currentColor;
  border-radius: 2px;
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.2s ease;
}

body.menu-open .header-menu-bars span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

body.menu-open .header-menu-bars span:nth-child(2) {
  opacity: 0;
}

body.menu-open .header-menu-bars span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* On the yellow title band a solid white button reads as a floating chip */
.page-hero .header-menu-btn {
  background: transparent;
  border-color: rgba(28, 34, 38, 0.3);
}

.page-hero .header-menu-btn:hover,
body.menu-open .page-hero .header-menu-btn {
  background: rgba(255, 255, 255, 0.6);
  border-color: var(--heading);
  color: var(--heading);
}

/* From lg the full header nav is on screen, so hide the hamburger. */
@media (min-width: 1024px) {
  .header-menu-btn {
    display: none;
  }
}

.side-menu {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 60;
  width: min(440px, 100%);
  height: 100%;
  background: #fff;
  box-shadow: -12px 0 40px rgba(15, 26, 46, 0);
  transform: translateX(100%);
  transition:
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.55s ease;
  will-change: transform;
  pointer-events: none;
}

body.menu-open .side-menu {
  transform: translateX(0);
  box-shadow: -12px 0 40px rgba(15, 26, 46, 0.14);
  pointer-events: auto;
}

/* content trails the panel slightly so the open feels layered, not flat */
.side-menu-logo,
.side-menu-nav a,
.side-menu-contact {
  opacity: 0;
  transform: translateX(24px);
  transition:
    opacity 0.45s ease,
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.2s ease;
  transition-delay: 0s;
}

body.menu-open .side-menu-logo,
body.menu-open .side-menu-nav a,
body.menu-open .side-menu-contact {
  opacity: 1;
  transform: translateX(0);
}

body.menu-open .side-menu-logo {
  transition-delay: 0.1s;
}

body.menu-open .side-menu-nav a:nth-child(1) {
  transition-delay: 0.16s;
}

body.menu-open .side-menu-nav a:nth-child(2) {
  transition-delay: 0.21s;
}

body.menu-open .side-menu-nav a:nth-child(3) {
  transition-delay: 0.26s;
}

body.menu-open .side-menu-nav a:nth-child(4) {
  transition-delay: 0.31s;
}

body.menu-open .side-menu-nav a:nth-child(5) {
  transition-delay: 0.36s;
}

body.menu-open .side-menu-contact {
  transition-delay: 0.41s;
}

.side-menu-inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: 48px 40px 36px;
}

.side-menu-logo {
  display: flex;
  justify-content: center;
}

.side-menu-logo img {
  height: 96px;
  width: auto;
}

.side-menu-nav {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.side-menu-nav a {
  font-family: "Chivo", sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: var(--heading);
}

.side-menu-nav a:hover {
  color: var(--blue);
}

.side-menu-contact {
  padding-top: 40px;
}

.side-menu-contact p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #5f6973;
}

.side-menu-contact a {
  display: inline-block;
  margin-top: 18px;
  font-size: 18px;
  font-weight: 500;
  color: #5f6973;
  transition: color 0.2s ease;
}

.side-menu-contact a:hover {
  color: var(--blue);
}

.menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(15, 26, 46, 0.28);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}

body.menu-open .menu-backdrop {
  opacity: 1;
  pointer-events: auto;
}

body.menu-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .side-menu,
  .side-menu-logo,
  .side-menu-nav a,
  .side-menu-contact,
  .menu-backdrop,
  .menu-icon-bars,
  .menu-icon-close {
    transition-duration: 0.01ms;
    transition-delay: 0ms;
  }
}

/* Only needed once the rail is gone and the backdrop is the panel's neighbour */
.side-menu-close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: none;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--gray-bg);
  color: var(--heading);
  font-size: 15px;
  line-height: 1;
  place-items: center;
  cursor: pointer;
}

/* The rail and the full header nav show from lg up. Below that the rail
   is dropped and the header hamburger drives the same panel. */
@media (max-width: 1023.98px) {
  .Home-menu-section,
  .menu-section {
    display: none;
  }

  body .site-content {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .side-menu {
    width: min(360px, 88%);
  }

  .side-menu-close {
    display: none;
  }

  .side-menu-inner {
    padding: 56px 28px 36px;
  }

  .side-menu-logo {
    justify-content: center;
  }

  .side-menu-logo img {
    height: 88px;
  }

  .side-menu-nav {
    gap: 26px;
    padding-left: 8px;
  }

  .side-menu-nav a {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.01em;
  }

  .side-menu-contact {
    padding-top: 28px;
    padding-bottom: 8px;
  }

  .side-menu-contact p {
    font-size: 13px;
    line-height: 1.6;
    max-width: 28ch;
  }

  .side-menu-contact a {
    margin-top: 16px;
    font-size: 14px;
    font-weight: 400;
    color: #8b939c;
  }
}

/* Go to top */
.go-top-btn {
  position: fixed;
  right: 2rem;
  bottom: 5.5rem;
  z-index: 70;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #000;
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition:
    opacity 0.25s ease,
    visibility 0.25s ease,
    transform 0.25s ease;
}

.go-top-btn.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.go-top-btn:hover {
  transform: translateY(-2px);
}

.go-top-btn i {
  font-size: 16px;
  line-height: 1;
}

/* Floating chat */
.chat-fab {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 70;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--heading);
  display: grid;
  place-items: center;
  box-shadow: 0 8px 24px rgba(245, 197, 24, 0.45);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.chat-fab:hover {
  transform: scale(1.06);
  box-shadow: 0 10px 28px rgba(245, 197, 24, 0.55);
}

/* Footer — the artwork behind the panel is pinned to the viewport, so it holds
   still while the footer text scrolls over it. */
.footer-section {
  position: relative;
  /* background-image: url("../asset/ChatGPT-Image-Jun-19-2026-11_38_39-PM.png"); */
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.footer-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(26, 27, 32, 0.96) 0%,
    rgba(26, 27, 32, 0.78) 50%,
    rgba(26, 27, 32, 0.88) 100%
  );
  pointer-events: none;
}

.footer-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  /* gap: 2.5rem;
  gap: 2.5rem; */

}

.footer-col-title {
  color: rgba(255, 255, 255, 0.72);
}

.footer-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem 1.25rem;
  text-align: left;
}

.footer-email {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Desktop: brand left, collab + links right, copyright full-width bottom */
@media (min-width: 768px) {
  .footer-inner {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "brand collab"
      "brand links"
      "copy copy";
    column-gap: 4rem;
    row-gap: 0;
  }

  .footer-brand {
    grid-area: brand;
  }

  .footer-collab {
    grid-area: collab;
    /* Beats .font-heading { color: var(--heading) } on the dark footer */
    color: rgba(255, 255, 255, 0.55);
  }

  .footer-collab a {
    color: #fff;
  }

  .footer-links {
    grid-area: links;
    margin-top: 3.5rem;
    gap: 2.5rem;
  }

  .footer-copy {
    grid-area: copy;
    margin-top: 4rem;
  }

  .footer-col-title {
    color: #fff;
  }
}

.footer-spacer {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .footer-section {
    background-attachment: scroll;
  }
}

/* Sticky footer reveal: the page column is opaque and stacks above the footer,
   which sits pinned at the bottom of the viewport. The footer therefore stays
   hidden until the column has scrolled clear of it. The column is hidden below
   `md`, so the effect only makes sense from that breakpoint up. */
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  body {
    background-image: none;
  }

  .site-content {
    position: relative;
    z-index: 1;
    background-color: #fff;
    /* Same guide lines that were on `body`; `fixed` attachment keeps them
       measured against the viewport rather than this 96%-wide column. */
    background-image: repeating-linear-gradient(
      to right,
      var(--grid-line),
      var(--grid-line) 1px,
      transparent 1px,
      transparent 25%
    );
    background-attachment: fixed;
  }

  /* Transparent trailing room so the column can scroll past the footer.
     js/main.js measures the real height; the fallback keeps the footer
     reachable without JS. */
  .footer-spacer {
    display: block;
    height: var(--footer-h, 560px);
  }

  .footer-section {
    position: fixed;
    z-index: 0;
    bottom: 0;
    right: 0;
    /* Lines up with `.site-content` (96% wide, right aligned) */
    left: 5.2%;
  }
}

/* The rail is gone here, so the column and footer run edge to edge */
@media (max-width: 1023.98px) {
  .footer-section {
    left: 0;
  }
}

/* Motion */
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-in {
  animation: fade-up 0.7s ease both;
}

.delay-1 {
  animation-delay: 0.1s;
}
.delay-2 {
  animation-delay: 0.2s;
}
.delay-3 {
  animation-delay: 0.35s;
}

/* Letter-by-letter heading reveal (spans are injected by js/main.js) */
@keyframes char-in {
  from {
    opacity: 0;
    transform: translateY(-0.55em);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.split-text .word {
  display: inline-block;
  white-space: nowrap;
}

.split-text .char {
  display: inline-block;
  animation: char-in 0.6s cubic-bezier(0.22, 0.68, 0.28, 1) both;
  animation-delay: var(--char-delay, 0s);
}

/* Wipe the brush on once the letters above it have landed */
@keyframes brush-in {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

.page-hero .split-text .brush-underline::after {
  animation: brush-in 0.45s ease-out 1s both;
}

/* Beats the shared `h1`/`.font-heading` color declarations above */
.hero .hero-title,
.hero .hero-title .word,
.hero .hero-title .char {
  color: #fff;
  line-height: 1.28;
}

/* Checkout — yellow title band */
.page-hero {
  position: relative;
  overflow: hidden;
  background: #f0c040;
  border-radius: 0 0 1.5rem 1.5rem;
}

/* Default placement behind the logo; the markup can nudge it with utilities. */
.page-hero-watermark {
  position: absolute;
  /* top: -50px; */
  /* left: 40%; */
  width: 300px;
  max-width: none;
  transform: translateX(-50%);
  opacity: 0.2;
  pointer-events: none;
  user-select: none;
}

@media (max-width: 639px) {
  .page-hero-watermark {
    width: 190px;
  }
}

/* Checkout — progress steps */
/* No vertical padding: the row height comes from the 56px chevron so it can run
   edge to edge, and the steps center themselves against it. */
.checkout-steps {
  display: flex;
  align-items: stretch;
  min-height: 56px;
  padding: 16px 4.25rem;
  /* background: #ececed; */
  border-radius: 0.25rem;
  list-style: none;
  border: 1px solid #ececed;
}

/* Equal-width columns with the step pinned to the left of each one, so the
   chevron lands on the column boundary. */
.checkout-step {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #9aa3ad;
  white-space: nowrap;
}

.checkout-step-num {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #c9ced6;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.checkout-step.is-done,
.checkout-step.is-active {
  color: var(--heading);
}

.checkout-step.is-done .checkout-step-num,
.checkout-step.is-active .checkout-step-num {
  background: #253993;
}

.checkout-step-sep {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  width: 9px;
  margin-right: 1.5rem;
  list-style: none;
}

.checkout-step-sep svg {
  display: block;
  width: 9px;
  height: 100%;
}

@media (max-width: 1023px) {
  .checkout-steps {
    padding: 0 1.75rem;
  }

  .checkout-step-sep {
    margin-right: 0.75rem;
  }
}

/* Mobile: number above label, thin line connecting the circles */
@media (max-width: 639px) {
  .checkout-steps {
    position: relative;
    border: none;
    padding: 0 0.25rem;
    min-height: 0;
    align-items: flex-start;
  }

  /* Line runs through the circle centers (1/6 → 5/6 of the row) */
  .checkout-steps::before {
    content: "";
    position: absolute;
    top: 13px;
    left: 16.666%;
    right: 16.666%;
    height: 1px;
    background: #d0d4da;
    z-index: 0;
  }

  .checkout-step {
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.45rem;
    text-align: center;
    white-space: normal;
    position: relative;
    z-index: 1;
    color: var(--heading);
  }

  .checkout-step-num {
    width: 26px;
    height: 26px;
    font-size: 12px;
  }

  .checkout-step-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
    max-width: 5.5rem;
  }

  /* Hide chevron separators — the ::before line replaces them */
  .checkout-step-sep {
    display: none;
  }
}

/* Checkout — VIN auto-check + locked billing until verified */
.vin-check-field {
  position: relative;
  display: flex;
  align-items: stretch;
}

.vin-check-field .field-input {
  padding-right: 2.75rem;
}

.vin-check-field .field-input:focus {
  outline: none;
  border-color: #dfe3e8;
  box-shadow: none;
}

.vin-check-field .field-input.has-error,
.vin-check-field .field-input.has-error:focus {
  border-color: #d94f4f;
  box-shadow: none;
}

.vin-check-field.is-checking .field-input,
.vin-check-field.is-verified .field-input {
  padding-right: 2.75rem;
}

.vin-check-field.is-verified .field-input,
.vin-check-field.is-verified .field-input:focus {
  border-color: var(--yellow);
  box-shadow: 0 0 0 3px rgba(245, 197, 24, 0.22);
}

.vin-check-field.is-checking .field-input,
.vin-check-field.is-checking .field-input:focus {
  border-color: #dfe3e8;
  box-shadow: none;
}

.vin-check-status {
  position: absolute;
  top: 50%;
  right: 0.7rem;
  transform: translateY(-50%);
  font-size: 1.1rem;
  line-height: 1;
  pointer-events: none;
}

.vin-check-status.hidden {
  display: none !important;
}

.vin-check-status i.is-hidden,
.vin-status-spin.is-hidden,
.vin-status-ok.is-hidden {
  display: none !important;
}

.vin-status-spin {
  color: #1a3a8f;
}

.vin-status-ok {
  color: #3f7d2c;
}

.vin-vehicle-line {
  margin: 0.45rem 0 0;
  font-size: 13px;
  color: #3f7d2c;
}

.vin-vehicle-line.hidden {
  display: none;
}

.checkout-payment-locked {
  opacity: 0.55;
  pointer-events: none;
  filter: grayscale(0.15);
}

.checkout-payment-locked.is-unlocked {
  opacity: 1;
  pointer-events: auto;
  filter: none;
}

.field-input:disabled,
.field-select:disabled,
.country-picker-trigger:disabled {
  background: #f3f4f6;
  color: #8b95a1;
  cursor: not-allowed;
}

/* Checkout — form fields */
.field-label {
  display: block;
  margin-bottom: 0.4rem;
  font-family: "Chivo", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #444 !important;
}

.field-req {
  color: #e8b800;
}

.field-input,
.field-select {
  width: 100%;
  padding: 0.7rem 0.85rem;
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  color: var(--heading);
  background: #fff;
  border: 1px solid #dfe3e8;
  border-radius: 4px;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.field-input::placeholder {
  color: #a7aeb6;
}

.field-input:focus,
.field-select:focus {
  outline: none;
  border-color: var(--yellow);
  box-shadow: 0 0 0 3px rgba(245, 197, 24, 0.22);
}

.field-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%235F6973' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
}

.field-input.has-error,
.field-select.has-error {
  border-color: #d94f4f;
}

/* iOS zooms the viewport when a focused control is under 16px */
@media (max-width: 767px) {
  .field-input,
  .field-select {
    font-size: 16px;
    padding: 0.75rem 0.85rem;
  }
}

.field-error {
  margin-top: 0.3rem;
  font-size: 12px;
  color: #d94f4f;
}

/* Checkout — panels share the pricing card treatment */
.checkout-panel {
  position: relative;
  background: #f9f9f9;
  border-radius: 0.75rem;
  padding: 2rem 1.5rem;
  box-shadow: 0 1px 2px rgba(28, 34, 38, 0.05);
}

.order-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0;
}

.order-row-divided {
  border-top: 1px solid #d2d2d2;
}

.order-item-name {
  font-size: 14px;
  line-height: 1.5;
  color: var(--heading);
}

.order-item-price {
  font-size: 14px;
  font-weight: 700;
  color: var(--heading);
  white-space: nowrap;
}

.order-label {
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--heading);
}

.order-amount {
  font-family: "Outfit", sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--heading);
  white-space: nowrap;
}

.order-total {
  font-family: "Chivo", sans-serif;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.1;
  color: #111;
  white-space: nowrap;
}

/* Checkout — payment methods */
.pay-option {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 1rem;
  background: #fff;
  border: 1px solid #dfe3e8;
  border-radius: 4px;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}

.pay-option + .pay-option,
.pay-option-body + .pay-option {
  margin-top: 0.5rem;
}

.pay-option:hover {
  border-color: #c9ced6;
}

.pay-option.is-selected {
  background: #fffdf3;
  border-color: var(--yellow);
  /* box-shadow: 0 0 0 1px var(--yellow); */
}

.pay-radio {
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  margin: 0;
  cursor: pointer;
}

.pay-option-label {
  font-family: "DM Sans", sans-serif;
  font-size: 17px;
  font-weight: bold;
  color: var(--heading);
}

.pay-option-body:not(.hidden) {
  margin-top: 0.75rem;
  padding: 1rem;
  background: #fff;
  border: 1px solid #dfe3e8;
  border-radius: 4px;
}

.pay-option.is-selected + .pay-option-body:not(.hidden) {
  border-color: var(--yellow);
  background: #fffdf3;
}

.pay-option-hint {
  margin: 0 0 0.85rem;
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  line-height: 1.45;
  color: #5c6670;
}

.paypal-buttons-mount {
  width: 100%;
  min-height: 48px;
}

.paypal-buttons-mount > div,
.paypal-buttons-mount iframe {
  max-width: 100% !important;
}

.paypal-card-fields {
  display: grid;
  gap: 1.1rem;
}

.paypal-card-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
}

@media (max-width: 480px) {
  .paypal-card-row {
    grid-template-columns: 1fr;
  }
}

/* Clean single-border card panel (no nested input borders) */
.paypal-native-section {
  width: 100%;
}

.paypal-card-panel {
  padding: 1.25rem 1.15rem 1.35rem;
  background: #fff;
  border: 1px solid #eceff2;
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(28, 34, 38, 0.04);
}

.paypal-field-block {
  min-width: 0;
}

.paypal-field-label {
  display: block;
  margin-bottom: 0.45rem;
  font-family: "Chivo", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #444 !important;
}

.paypal-field-box {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 52px;
  padding: 0 0.95rem;
  border: 1.5px solid #e1e5ea;
  border-radius: 10px;
  background: #fafbfc;
  outline: none !important;
  box-shadow: none !important;
}

.paypal-field-box:hover,
.paypal-field-box:focus,
.paypal-field-box:focus-within,
.paypal-field-box:active {
  border-color: #e1e5ea !important;
  background: #fafbfc !important;
  outline: none !important;
  box-shadow: none !important;
}

.paypal-field-icon {
  flex-shrink: 0;
  width: 1.05rem;
  text-align: center;
  font-size: 15px;
  color: #98a2ab;
}

.paypal-field-box:focus-within .paypal-field-icon {
  color: #98a2ab;
}

.paypal-field-host,
.paypal-field-host:focus,
.paypal-field-host:focus-within {
  flex: 1;
  min-width: 0;
  min-height: 32px;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  padding: 0;
  box-shadow: none !important;
}

.paypal-field-host iframe,
.paypal-field-host iframe:focus,
.paypal-field-host > * {
  display: block;
  width: 100%;
  min-height: 32px;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.paypal-card-disclaimer {
  margin: 1.05rem 0 0;
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  line-height: 1.5;
  color: #8b949e;
}

.paypal-pay-btn {
  display: block;
  width: 100%;
  margin-top: 1.05rem;
  padding: 0.95rem 1rem;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(180deg, #0078c8 0%, #0070ba 100%);
  color: #fff !important;
  font-family: "DM Sans", sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(0, 112, 186, 0.22);
  transition:
    background-color 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.paypal-pay-btn:hover {
  background: linear-gradient(180deg, #006bb4 0%, #005ea6 100%);
  box-shadow: 0 8px 18px rgba(0, 112, 186, 0.28);
}

.paypal-pay-btn:active {
  transform: translateY(1px);
}

.paypal-pay-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  box-shadow: none;
}

.payment-processing-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(26, 27, 32, 0.55);
  backdrop-filter: blur(2px);
}

.payment-processing-overlay.hidden {
  display: none;
}

.payment-processing-dialog {
  width: min(100%, 22rem);
  padding: 1.75rem 1.5rem;
  border-radius: 12px;
  background: #fff;
  text-align: center;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
}

.payment-processing-spinner {
  width: 2.5rem;
  height: 2.5rem;
  margin: 0 auto 1rem;
  border: 3px solid #d7e6f2;
  border-top-color: #0070ba;
  border-radius: 50%;
  animation: payment-processing-spin 0.75s linear infinite;
}

.payment-processing-title {
  margin: 0;
  font-family: "DM Sans", sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  color: #1c2226;
}

.payment-processing-text {
  margin: 0.55rem 0 0;
  font-family: "DM Sans", sans-serif;
  font-size: 0.875rem;
  line-height: 1.45;
  color: #5c6670;
}

@keyframes payment-processing-spin {
  to {
    transform: rotate(360deg);
  }
}

.paypal-native-buttons {
  width: 100%;
  min-height: 45px;
}

.paypal-native-buttons > div,
.paypal-native-buttons iframe {
  max-width: 100% !important;
}

/* Avoid custom cursor overlapping PayPal fields/buttons */
html.cc-on .paypal-native-section,
html.cc-on .paypal-native-section *,
html.cc-on #paypalButtonsContainer,
html.cc-on #paypalButtonsContainer * {
  cursor: auto !important;
}

/* Checkout — consent checkboxes */
.consent-row {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text);
  cursor: pointer;
}

.consent-box {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  margin-top: 2px;
  accent-color: #1b1b1b;
  cursor: pointer;
}

/**
 * Custom cursor — three states driven by js/main.js (CVI.initCursor):
 *   1. idle  dot 7px #20264C · ring 35px, 1px #20264C
 *   2. hover dot scale(2.25) · ring scale(1.2)
 *   3. blob  over [data-custom-cursor] — gold disc with multiply blend
 *
 * Position lives on the wrapper (rAF); scale lives on the inner .cc-face (CSS) so
 * the two never fight over transform. Touch / reduced-motion keep the native cursor.
 *
 * Native OS cursor stays visible — do not use cursor: none.
 */
.cc {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  pointer-events: none;
  opacity: 0;
  will-change: transform;
  transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

html.cc-visible .cc {
  opacity: 1;
}

html.cc-visible .cc.is-muted {
  opacity: 0;
}

.cc-face {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50em;
  box-sizing: border-box;
  font-style: normal;
  transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}

.cc--dot {
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
}

.cc--dot .cc-face {
  background-color: #20264c;
}

.cc--ring {
  width: 35px;
  height: 35px;
  margin: -17.5px 0 0 -17.5px;
}

.cc--ring .cc-face {
  border: 1px solid #20264c;
  background: transparent;
}

.cc--dot.is-hover .cc-face {
  transform: scale(2.25);
}

.cc--ring.is-hover .cc-face {
  transform: scale(1.2);
}

.cc--dot.is-down .cc-face {
  transform: scale(0.65);
}

.cc--ring.is-down .cc-face {
  transform: scale(0.85);
}

.cc--dot.is-hover.is-down .cc-face {
  transform: scale(1.8);
}

.cc--ring.is-hover.is-down .cc-face {
  transform: scale(1.05);
}

.cc-blob {
  --cc-blob-size: 390px;
  --cc-blob-fill: #f0c040;
  position: absolute;
  top: 0;
  left: 0;
  width: var(--cc-blob-size);
  height: var(--cc-blob-size);
  margin: calc(var(--cc-blob-size) / -2) 0 0 calc(var(--cc-blob-size) / -2);
  border-radius: 50em;
  background-color: var(--cc-blob-fill);
  mix-blend-mode: multiply;
  -webkit-backdrop-filter: blur(8px) brightness(117%);
  backdrop-filter: blur(8px) brightness(117%);
  opacity: 0;
  z-index: 1; /* above the photo and scrim, below the hero copy (z-10) */
  pointer-events: none;
  will-change: transform, opacity;
  transition: opacity 0.45s cubic-bezier(0.23, 1, 0.32, 1);
}

.cc-blob.is-active {
  opacity: 1;
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .cc,
  .cc-blob {
    display: none !important;
  }
}

@media (max-width: 767px) {
  html,
  body {
    overflow-x: hidden;
  }

  /* iOS never paints a fixed attachment correctly; it either jitters or the
     artwork is scaled to the whole document instead of the section. */
  .hero,
  .footer-section {
    background-attachment: scroll;
  }

  /* The artwork runs from the very top of the screen and the header floats on
     it, so the hero owns the whole first screen. */
  .site-content {
    position: relative;
  }

  .hero-header {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 30;
  }

  .hero-header > div {
    padding-bottom: 0;
    background: transparent;
  }

  .hero-header > div > div {
    padding: 0.4rem 0.5rem;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 1rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .hero-header .header-menu-btn {
    width: 40px;
    height: 40px;
    background: transparent;
    border-color: transparent;
    color: #fff;
  }

  .hero {
    min-height: 92vh;
    /* min-height: 72svh; */
    /* clears the floating header so the centred copy stays below it */
    /* padding-top: 6.5rem; */
    /* background-position: 64% center; */
    min-height: 91svh;
    padding-top: 4.5rem;
    background-position: 67% center;
  }

  /* The car body sits directly behind the copy at this crop, so the flat
     overlay is traded for a scrim that only darkens the lower half. */
  .hero::before {
    opacity: 1;
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.45) 0%,
      rgba(0, 0, 0, 0.452) 30%,
      rgba(0, 0, 0, 0.82) 100%
    );
  }

  .hero .hero-title {
    line-height: 1.2;
  }

  .brush-underline::after {
    bottom: -2px;
    height: 0.26em;
  }

  .plan-ribbon {
    width: 96px;
    top: -8px;
    right: -8px;
  }

  .feature-icon {
    width: 41px;
    height: 41px;
  }

  .faq-trigger {
    padding: 0.85rem 1rem;
    font-size: 18px;
    gap: 0.75rem;
  }

  .faq-panel-inner {
    padding: 0.75rem 1rem 0.35rem;
    font-size: 16px;
    line-height: 1.7;
  }

  .checkout-panel {
    padding: 1.5rem 1.15rem;
  }

  .order-total {
    font-size: 22px;
  }

  /* Mobile footer: centered intro + copyright, then Menu | Contact side by side */
  .footer-section .footer-inner {
    padding-bottom: 6.5rem;
    gap: 1.75rem;
  }

  .footer-section .footer-logo {
    display: block;
    height: 70px;
    width: auto;
    margin-inline: auto;
  }

  .footer-section .footer-mission,
  .footer-section .footer-collab,
  .footer-section .footer-copy {
    text-align: center;
  }

  .footer-section .footer-mission {
    font-size: 18px;
    line-height: 1.65;
    margin-top: 1.5rem;
  }

  .footer-section .footer-collab {
    font-size: 22px;
    line-height: 1.45;
    margin-top: 0.25rem;
    /* Beats .font-heading { color: var(--heading) } on the dark footer */
    color: rgba(255, 255, 255, 0.55);
  }

  .footer-section .footer-collab a {
    color: #fff;
  }

  .footer-section .footer-copy {
    margin-top: 0.5rem;
    margin-bottom: 0.75rem;
    font-size: 13px;
    line-height: 1.5;
  }

  .footer-section .footer-links {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem 1.25rem;
    margin-top: 0.5rem;
    text-align: left;
    align-items: start;
  }

  .footer-section .footer-col-title {
    color: rgba(255, 255, 255, 0.55);
    font-size: 15px;
  }

  .footer-section .footer-menu nav {
    align-items: flex-start;
    gap: 0.65rem;
  }

  .footer-section .footer-contact {
    max-width: none;
    margin-inline: 0;
  }

  .footer-section .footer-contact > p:not(.footer-col-title) {
    margin-top: 1rem;
    font-size: 13px;
    line-height: 1.55;
  }

  .footer-section .footer-email {
    margin-top: 0.85rem;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    font-size: 13px;
    line-height: 1.4;
  }

  /* Both floating buttons stack against the same edge */
  .chat-fab {
    right: 1rem;
    bottom: 1rem;
    width: 50px;
    height: 50px;
  }

  .go-top-btn {
    right: 1rem;
    bottom: 4.75rem;
    width: 44px;
    height: 44px;
    box-shadow: 0 6px 20px rgba(28, 34, 38, 0.16);
  }
}

/* The VIN bar stays a single row on phones, so below this width the type and
   the button step down rather than let the placeholder clip. */
@media (max-width: 399px) {
  #vinForm button {
    gap: 0.25rem;
    padding-right: 0.625rem;
    padding-left: 0.625rem;
    font-size: 12px;
  }

  #vinInput {
    font-size: 12px;
  }
}

@media (max-width: 339px) {
  #vinForm .fa-file-lines {
    display: none;
  }

  #vinForm button,
  #vinInput {
    font-size: 11px;
  }
}

/* Checkout — searchable country picker */
.country-picker {
  position: relative;
}

.country-picker-trigger {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.7rem 2.25rem 0.7rem 0.85rem;
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  text-align: left;
  color: var(--heading);
  background: #fff;
  border: 1px solid #dfe3e8;
  border-radius: 4px;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%235F6973' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
}

.country-picker-trigger.is-placeholder {
  color: #a7aeb6;
}

.country-picker-trigger:focus,
.country-picker.is-open .country-picker-trigger {
  outline: none;
  border-color: var(--yellow);
  box-shadow: 0 0 0 3px rgba(245, 197, 24, 0.22);
}

.country-picker-trigger.has-error {
  border-color: #d94f4f;
}

.country-picker-panel {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  padding: 0.55rem;
  background: #fff;
  border-radius: 6px;
  box-shadow:
    0 4px 6px -1px rgba(28, 34, 38, 0.08),
    0 10px 24px -4px rgba(28, 34, 38, 0.14);
}

.country-picker-search {
  display: block;
  width: 100%;
  margin-bottom: 0.45rem;
  padding: 0.65rem 0.8rem;
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  color: var(--heading);
  background: #fff;
  border: 1px solid #e4e7eb;
  border-radius: 5px;
  box-shadow: 0 1px 3px rgba(28, 34, 38, 0.08);
}

.country-picker-search:focus {
  outline: none;
  border-color: #c5cad1;
  box-shadow: 0 1px 4px rgba(28, 34, 38, 0.12);
}

.country-picker-list {
  max-height: 220px;
  margin: 0;
  padding: 0.15rem;
  overflow-y: auto;
  list-style: none;
  background: #f7f8fa;
  border-radius: 4px;
  scrollbar-width: thin;
  scrollbar-color: #c5cad1 transparent;
}

.country-picker-list::-webkit-scrollbar {
  width: 6px;
}

.country-picker-list::-webkit-scrollbar-thumb {
  background: #c5cad1;
  border-radius: 999px;
}

.country-picker-option {
  display: block;
  width: 100%;
  padding: 0.55rem 0.75rem;
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  text-align: left;
  color: #1c2226;
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}

.country-picker-option:hover,
.country-picker-option.is-active {
  background: #1a3a8f;
  color: #fff;
}

.country-picker-empty {
  padding: 0.75rem;
  font-size: 13px;
  color: var(--text);
  text-align: center;
}

@media (max-width: 767px) {
  .country-picker-trigger,
  .country-picker-search,
  .country-picker-option {
    font-size: 16px;
  }
}

/* Thank you — order received */
.thankyou-page {
  overflow-x: clip;
}

.thankyou-order {
  color: #1c2226;
}

.thankyou-success {
  margin-top: 1.75rem;
  padding: 0.95rem 1.15rem;
  background: #e8f6e9;
  border-left: 4px solid #3c763d;
  color: #3c763d;
  font-size: 15px;
  line-height: 1.5;
}

.thankyou-overview {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 1.75rem;
  border: 1px solid #e5e5e5;
  border-radius: 2px;
  background: #fff;
}

.thankyou-overview > div {
  padding: 1rem 1.15rem;
  border-bottom: 1px solid #e5e5e5;
}

.thankyou-overview > div:last-child {
  border-bottom: 0;
}

.thankyou-overview dt {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #7a7a7a;
}

.thankyou-overview dd {
  margin-top: 0.35rem;
  font-size: 15px;
  font-weight: 700;
  color: #1c2226;
  overflow-wrap: anywhere;
}

.thankyou-pay-note {
  margin-top: 1rem;
  font-size: 15px;
  color: #1c2226;
  line-height: 1.5;
}

.thankyou-pay-note:empty {
  display: none;
}

.thankyou-details {
  margin-top: 2.25rem;
}

.thankyou-details-title {
  margin-bottom: 1rem;
  font-family: "DM Sans", sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: #1c2226;
}

.thankyou-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.thankyou-table th,
.thankyou-table td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid #e5e5e5;
  text-align: left;
  vertical-align: top;
}

.thankyou-table thead th {
  background: #f7f7f7;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7a7a7a;
}

.thankyou-table thead th:last-child,
.thankyou-table td:last-child {
  text-align: right;
  white-space: nowrap;
}

.thankyou-table tbody th {
  font-weight: 700;
  color: #1c2226;
}

.thankyou-product {
  color: #c9a227;
  font-weight: 700;
}

.thankyou-qty {
  color: #1c2226;
  font-weight: 600;
}

.thankyou-vin-line {
  margin-top: 2rem;
  font-size: 15px;
  color: #1c2226;
  line-height: 1.5;
}

.thankyou-vin-line strong {
  font-weight: 700;
}

.thankyou-vin-value {
  color: #c9a227;
  font-weight: 700;
  word-break: break-all;
}

.thankyou-vin-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-top: 1.25rem;
  padding: 1rem 1.25rem;
  background: #f0f0f0;
  border-radius: 4px;
  font-size: 15px;
  color: #1c2226;
}

.thankyou-vin-bar strong {
  font-weight: 700;
  word-break: break-all;
}

.thankyou-address-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 1.75rem;
}

.thankyou-address-card {
  padding: 1.25rem 1.35rem;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  background: #fff;
  font-size: 15px;
  line-height: 1.65;
  color: #1c2226;
}

.thankyou-address-card p {
  margin: 0;
}

.thankyou-address-email {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.85rem !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.thankyou-address-email i {
  color: #5f6973;
  font-size: 13px;
}

.thankyou-vin-select {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.65rem;
}

.thankyou-radio {
  width: 16px;
  height: 16px;
  border: 1.5px solid #9aa3ad;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
}

.thankyou-radio::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1c2226;
}

.thankyou-step-short {
  display: none;
}

.thankyou-step-full {
  display: inline;
}

.thankyou-page .page-hero .brush-underline::after {
  bottom: -10px;
}

@media (min-width: 640px) {
  .thankyou-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .thankyou-overview > div {
    border-bottom: 1px solid #e5e5e5;
    border-right: 1px solid #e5e5e5;
  }

  .thankyou-overview > div:nth-child(2n) {
    border-right: 0;
  }

  .thankyou-overview > div:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .thankyou-address-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 640px) and (max-width: 1023.98px) {
  .thankyou-steps {
    padding: 14px 1.25rem;
  }

  .thankyou-steps .checkout-step {
    gap: 0.5rem;
    font-size: 12px;
    white-space: normal;
  }

  .thankyou-steps .checkout-step-label {
    line-height: 1.25;
  }

  .thankyou-steps .thankyou-step-full {
    display: none;
  }

  .thankyou-steps .thankyou-step-short {
    display: inline;
  }

  .thankyou-page .page-hero .brush-underline::after {
    bottom: -12px;
  }
}

@media (min-width: 900px) {
  .thankyou-overview {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .thankyou-overview > div {
    border-bottom: 0;
    border-right: 1px solid #e5e5e5;
  }

  .thankyou-overview > div:nth-child(2n) {
    border-right: 1px solid #e5e5e5;
  }

  .thankyou-overview > div:last-child {
    border-right: 0;
  }

  .thankyou-overview > div:nth-last-child(-n + 2) {
    border-bottom: 0;
  }
}

@media (max-width: 639.98px) {
  .thankyou-page .page-hero {
    border-radius: 0 0 1.15rem 1.15rem;
  }

  .thankyou-page .page-hero .brush-underline::after {
    bottom: -6px;
    height: 0.24em;
  }

  .thankyou-success {
    margin-top: 1.35rem;
    font-size: 14px;
  }

  .thankyou-table th,
  .thankyou-table td {
    padding: 0.75rem 0.65rem;
    font-size: 14px;
  }

  .thankyou-vin-bar {
    flex-direction: column;
    align-items: flex-start;
  }

  .thankyou-steps .thankyou-step-short {
    display: none;
  }

  .thankyou-steps .thankyou-step-full {
    display: inline;
  }

  .thankyou-steps .checkout-step-label {
    max-width: 5.75rem;
  }
}

@media (min-width: 1024px) {
  .thankyou-page .page-hero .brush-underline::after {
    bottom: -16px;
  }

  .thankyou-success {
    margin-top: 2rem;
  }

  .thankyou-details {
    margin-top: 2.75rem;
  }
}

/* ============================================================
   iOS / touch refinements
   Appended last so these win over the earlier rules they adjust.
   ============================================================ */

/* iOS Safari's toolbar makes 100vh taller than the visible area, so a
   100vh page gains a phantom scroll and jumps as the toolbar collapses.
   100dvh tracks the real viewport; browsers without it keep the 100vh above. */
body {
  min-height: 100dvh;
}

/* Safari zooms the page in whenever a focused text field computes to less
   than 16px — and never zooms back out, leaving the visitor stranded on a
   zoomed, sideways-scrolling page. The VIN bar was 13px (and 12/11px on
   narrower phones), so this fired on every iPhone, on the site's main call
   to action. 16px is the threshold, not a preference. */
@media (max-width: 767px) {
  #vinInput,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="search"],
  input[type="number"],
  input[type="password"],
  input[type="url"],
  select,
  textarea {
    font-size: 16px;
  }

  /* Reclaim the width the larger type needs so the bar stays one row. */
  #vinForm {
    padding: 5px;
  }

  #vinForm button {
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    font-size: 14px;
  }
}

/* Below this the one-row bar genuinely runs out of room, so let it stack
   rather than shrink the field back into zoom territory. */
@media (max-width: 359px) {
  #vinForm {
    flex-wrap: wrap;
    gap: 6px;
  }

  #vinForm > div {
    flex-basis: 100%;
  }

  #vinForm button {
    width: 100%;
    justify-content: center;
  }
}

/* Removes the ~300ms wait Safari holds every tap for in case it becomes a
   double-tap-to-zoom. Buttons feel immediate with it gone. */
a,
button,
input,
select,
textarea,
label,
[role="button"],
.plan-card,
.faq-question {
  touch-action: manipulation;
}

/* Apple's minimum comfortable target is 44pt; these sat at 21–24px. */
@media (max-width: 767px) {
  .side-menu-nav {
    gap: 6px;
  }

  .side-menu-nav a,
  .side-menu-contact a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  footer a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* The drawer is position:fixed and full-height, so on notched iPhones its
   top and bottom rows land under the notch and the home indicator. */
.side-menu-inner {
  padding-top: max(48px, env(safe-area-inset-top));
  padding-right: max(40px, env(safe-area-inset-right));
  padding-bottom: max(36px, env(safe-area-inset-bottom));
  padding-left: 40px;
}

/* Scrolling to the end of the drawer should not start dragging the page
   behind it, and the page should not rubber-band while the drawer is open. */
.side-menu {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

body.menu-open {
  overscroll-behavior-y: none;
}

/* Safari needs the prefix for backdrop blur. This is the overlay shown while
   the payment is confirming — the one moment the blur really matters. */
.payment-processing-overlay {
  -webkit-backdrop-filter: blur(2px);
}

/* Honour Reduce Motion — the drawer and reveal animations are long easings. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}