/* Purchase-page layout only. Tokens, header/footer/faq/btn/badge/offer-includes/cloud-edge
   all come from /css/styles.css — do not redefine them here. */

.buy-hero {
  position: relative;
  background: var(--grad-sky);
  padding: 2.5rem 0 4.5rem;
}
.buy-hero__inner {
  display: grid;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 860px) {
  .buy-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 3rem; }
}
.buy-hero__badges { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .75rem; }
.buy-hero h1 {
  font-family: var(--bsl-display);
  font-weight: 800;
  font-size: clamp(2.25rem, 6vw, 3.75rem);
  line-height: 1.02;
  color: var(--bsl-ink);
  margin: 0 0 .75rem;
}
.buy-hero__line { font-size: 1.0625rem; line-height: 1.55; color: var(--bsl-slate); margin-bottom: 1rem; max-width: 46ch; }
.buy-hero__price { font-family: var(--bsl-display); font-weight: 800; font-size: 1.375rem; color: var(--bsl-ink); margin-bottom: 1rem; }
.buy-hero__cover { border-radius: 16px; box-shadow: 10px 14px 0 var(--bsl-ink); width: 100%; height: auto; display: block; }
.buy-hero__cover-wrap { justify-self: center; max-width: 320px; }

.buy-section { padding: 3rem 0; }
.buy-section--mist { background: var(--bsl-mist); }
.buy-section h2 { font-family: var(--bsl-display); font-weight: 800; font-size: clamp(1.5rem, 4vw, 2.25rem); color: var(--bsl-ink); margin: .4rem 0 1.25rem; }

.buy-preview { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 680px) { .buy-preview { grid-template-columns: repeat(4, 1fr); } }
.buy-preview figure { margin: 0; }
.buy-preview img { width: 100%; height: auto; border-radius: 10px; box-shadow: 5px 7px 0 var(--bsl-mist); display: block; }
.buy-preview figcaption { font-size: .8rem; color: var(--bsl-slate); margin-top: .4rem; }
.buy-preview--single img { box-shadow: 8px 11px 0 var(--bsl-mist); max-width: 320px; }

.buy-price {
  text-align: center;
  max-width: 460px;
  margin: 0 auto;
}
.buy-price__amount { font-family: var(--bsl-display); font-weight: 800; font-size: 3rem; color: var(--bsl-ink); }
.buy-price__terms { color: var(--bsl-slate); margin-bottom: 1.25rem; }
.buy-price .offer-includes { text-align: left; margin-bottom: 1.5rem; }
.buy-price__cta { display: inline-block; margin-bottom: .75rem; }