/* Live Buy-page clarity pass. Keeps the existing visual system and separates the two buyer tools. */
#spec-deck,
#used-guide {
  scroll-margin-top: 92px;
}

.tool-kicker {
  display: block;
  margin-bottom: 9px;
  color: var(--green);
  font-size: .78rem;
  font-weight: 950;
  letter-spacing: .18em;
  text-align: center;
  text-transform: uppercase;
}

.scooter-head,
.comparison-section-title,
.comparison-value,
.field-value {
  text-align: center;
}

.comparison-value,
.field-value {
  width: 100%;
}

.comparison-legend {
  margin: 0;
  padding: 10px 16px;
  color: var(--muted);
  background: #0b0f0c;
  border-bottom: 1px solid #313a32;
  text-align: center;
  font-size: .78rem;
  font-weight: 750;
}

.buy-tool-divider {
  margin: 18px 0 46px;
  padding: 28px clamp(18px, 4vw, 46px);
  background: rgba(5, 8, 6, .94);
  border-top: 4px solid var(--green);
  border-bottom: 1px solid #59655a;
  box-shadow: 9px 10px 0 #030503;
  text-align: center;
}

.buy-tool-divider span {
  color: var(--green);
  font-size: .76rem;
  font-weight: 950;
  letter-spacing: .18em;
}

.buy-tool-divider h2 {
  max-width: 920px;
  margin: 8px auto 6px;
  color: #fff;
  font-size: clamp(1.35rem, 3vw, 2.35rem);
  line-height: 1.08;
}

.buy-tool-divider p {
  max-width: 800px;
  margin: 0 auto;
  color: var(--muted);
  font-weight: 750;
}

.buy-section {
  margin-top: 0;
  border-top: 4px solid var(--green);
}

.section-title {
  text-align: center;
}

.section-title p {
  max-width: 900px;
  margin-right: auto;
  margin-left: auto;
}

.guide-reality-check {
  display: grid;
  grid-template-columns: minmax(210px, .7fr) minmax(0, 1.8fr);
  gap: 18px;
  align-items: center;
  margin: 0 0 14px;
  padding: 18px 20px;
  background: #090d0a;
  border: 1px solid #566157;
  border-left: 5px solid var(--green);
}

.guide-reality-check strong {
  color: var(--green);
  font-size: 1.02rem;
  line-height: 1.15;
  text-transform: uppercase;
}

.guide-reality-check span {
  color: #d6dbd3;
  font-weight: 750;
}

.guide-pocket-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0 0 22px;
  color: var(--muted);
  font-size: .8rem;
  font-weight: 850;
  text-transform: uppercase;
}

.guide-pocket-list strong {
  margin-right: 3px;
  color: #fff;
}

.guide-pocket-list span {
  padding: 5px 9px;
  background: #111711;
  border: 1px solid #425043;
}

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

.guide-grid article {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  overflow: hidden;
}

.guide-grid article::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: #536154;
}

.guide-step {
  margin: 0 0 5px;
  color: var(--green);
  font-size: .67rem;
  font-weight: 950;
  letter-spacing: .14em;
}

.guide-grid h3 {
  margin-bottom: 7px;
  line-height: 1.08;
}

.guide-note {
  min-height: 2.9em;
  margin: 0 0 16px;
  padding-bottom: 13px;
  color: #aeb7ae;
  border-bottom: 1px solid #39433a;
  font-size: .88rem;
  font-weight: 700;
}

.guide-grid label {
  line-height: 1.34;
}

.guide-grid .seller-says-card::before {
  background: #86b7c8;
}

.seller-says-card {
  border-color: #45636d !important;
}

.seller-says-card .guide-step,
.seller-says-card h3 {
  color: #a9e8ff;
}

.guide-grid .price-card::before {
  background: var(--green);
}

.price-card {
  border-color: #4f7341 !important;
}

.price-card h3 {
  color: var(--green);
}

.guide-grid .deal-breakers::before {
  background: var(--warning);
}

.guide-bottom-line {
  margin: 18px 0 0;
  padding: 18px 20px;
  color: #e8ebe5;
  background: #0b0f0c;
  border: 1px solid #59655a;
  border-left: 5px solid var(--green);
  font-size: 1rem;
  font-weight: 750;
}

.guide-bottom-line strong {
  color: var(--green);
  text-transform: uppercase;
}

/* Make each buyer tool read as its own labeled instrument: small white subheader, large green boxed title. */
.spec-intro,
.section-title {
  max-width: 980px;
  margin-right: auto;
  margin-left: auto;
  padding: clamp(20px, 3vw, 32px);
  background: rgba(5, 8, 6, .94);
  border: 1px solid #59655a;
  border-top: 4px solid var(--green);
  box-shadow: 9px 10px 0 #030503;
  text-align: center;
}

.spec-intro .tool-kicker,
.section-title .tool-kicker {
  margin-bottom: 8px;
  color: #fff;
  font-size: clamp(.72rem, 1.2vw, .9rem);
  letter-spacing: .16em;
}

.spec-intro h1,
.section-title h2 {
  margin: 0;
  color: var(--green);
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(3rem, 7vw, 6.5rem);
  letter-spacing: .025em;
  line-height: .9;
  text-transform: uppercase;
}

.spec-intro p,
.section-title p {
  max-width: 820px;
  margin-right: auto;
  margin-left: auto;
}

.spec-intro p:first-of-type,
.section-title p {
  color: #fff;
  font-size: clamp(.92rem, 1.5vw, 1.08rem);
}

.spec-intro p:last-child {
  color: var(--muted);
  font-size: clamp(.82rem, 1.3vw, .98rem);
}

/* Keep both selectors on one line with VS centered between them at every viewport width. */
.comparison-picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
}

.selector-slot {
  min-width: 0;
}

.versus {
  align-self: center;
  padding-top: 0;
  text-align: center;
}

.scooter-choice {
  height: 100%;
}

@media (max-width: 850px) {
  .guide-grid {
    grid-template-columns: 1fr;
  }

  .buy-tool-divider {
    margin-bottom: 30px;
  }

  .guide-reality-check {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .guide-note {
    min-height: 0;
  }
}

@media (max-width: 620px) {
  .spec-intro,
  .section-title {
    padding: 18px 14px;
    box-shadow: 6px 7px 0 #030503;
  }

  .spec-intro h1,
  .section-title h2 {
    font-size: clamp(2.5rem, 13vw, 4.25rem);
  }

  .comparison-picker {
    grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr);
    gap: 6px;
  }

  .versus {
    font-size: 1rem;
  }

  .scooter-choice {
    min-height: 108px;
    padding-right: 8px;
    padding-left: 8px;
  }
}