/* Trade-In route. The source built this with classic Elementor section/column
   widgets, so the two-column split and the red step pills came from the
   builder, not the stylesheet — they are re-created here. */

.bf-tradein__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: start;
  padding-block: 60px 0;
}

.bf-tradein__intro { text-align: center; }
.bf-tradein__intro h2,
.bf-tradein__steps h2 { text-align: center; margin-bottom: 1rem; }
.bf-tradein__intro p { margin-bottom: 1.75rem; }

.bf-tradein__flyer {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 1.5rem;
}

/* Numbered steps: white type on a brand-red pill, centred. */
.bf-step-pill {
  display: table;
  margin: 40px auto 0;
  padding: 5px 20px;
  background: var(--wp--preset--color--red);
  color: var(--wp--preset--color--white);
  font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem);
}
.bf-step-body { margin-top: 1rem; }
.bf-step-body ul { margin: .6rem 0 .6rem 1.1rem; padding: 0; }
.bf-step-body li { margin-bottom: .25rem; }

.bf-tradein__gtk { margin-top: 40px; }
.bf-tradein__list { margin: 1rem 0 0 1.1rem; padding: 0; }
.bf-tradein__list li { margin-bottom: .35rem; }

/* Closing CTA band — full bleed, charcoal so it does not merge with the
   near-black Visit-the-Shop panel directly beneath it in the footer. */
.bf-tradein__cta {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  margin-top: 80px;
  padding-block: 70px;
  background: var(--wp--preset--color--gray-700);
  color: var(--wp--preset--color--white);
  text-align: center;
}
.bf-tradein__cta h2 { color: var(--wp--preset--color--white); }
.bf-tradein__cta p { max-width: 60ch; margin: 1rem auto 1.75rem; }

@media (max-width: 60rem) {
  .bf-tradein__body { grid-template-columns: 1fr; }
}

/* Page hero, measured on production: a 500px band with a Montserrat 47.5/47.5
   800 title in title case and a 26.4px sub — not the display face. */
.bf-page-hero { min-height: 500px; padding-block: var(--wp--preset--spacing--lg); }
.bf-page-hero h1 {
  font-family: var(--wp--preset--font-family--body);
  font-size: clamp(2rem, 1.4rem + 2.2vw, 2.97rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
}
.bf-page-hero__sub {
  margin-top: .6rem;
  font-family: var(--wp--preset--font-family--body);
  font-size: clamp(1.15rem, 1rem + .6vw, 1.65rem);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: normal;
  text-transform: none;
}