.kicker {
  display: block;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--silverblue);
  margin-bottom: 8px;
}

.masthead .kicker { color: #ece2ef; }
.lede { font-size: 18px; line-height: 1.5; color: var(--plum-soft); max-width: 640px; }


.masthead {
  position: relative;
  isolation: isolate;
  min-height: 70vh;
  display: flex;
  align-items: flex-end;
  color: #ffffff;
  padding: 0;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-image:
    radial-gradient(58% 70% at 78% 18%, rgba(139, 92, 246, 0.55) 0%, rgba(139, 92, 246, 0) 62%),
    radial-gradient(46% 58% at 12% 84%, rgba(249, 246, 241, 0.38) 0%, rgba(249, 246, 241, 0) 60%),
    linear-gradient(152deg, #6b2e60 0%, #4d1f45 44%, #2b1226 100%);
}
.masthead::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(43, 18, 38, 0.8), transparent 70%);
}
.masthead::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("/dist/img/hero-bg.jpg");
  background-size: cover;
  background-position: right center;
  opacity: 0.16;
  pointer-events: none;
}
.masthead > * { position: relative; padding: 32px; }
.masthead__ribbons {
  position: absolute;
  inset: 0;
  padding: 0;
  pointer-events: none;
  opacity: 0.5;
}
.masthead__ribbons span {
  position: absolute;
  display: block;
  border-radius: 50%;
  border: 1px solid rgba(249, 246, 241, 0.35);
  transform: rotate(-18deg);
}
.masthead__ribbons span:nth-child(1) { width: 460px; height: 200px; top: 8%; right: 6%; }
.masthead__ribbons span:nth-child(2) { width: 620px; height: 260px; top: 22%; right: -6%; border-color: rgba(139, 92, 246, 0.5); }
.masthead__ribbons span:nth-child(3) { width: 340px; height: 150px; bottom: 14%; right: 22%; border-color: rgba(249, 246, 241, 0.22); }
.masthead__inner { width: 1200px; max-width: 100%; margin: 0 auto; }
.masthead__title { color: #ffffff; max-width: 720px; }
.masthead__text { font-size: 18px; line-height: 1.5; color: #ece2ef; max-width: 560px; margin-bottom: 16px; }
.masthead__price { display: flex; align-items: baseline; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.masthead__price-now { font-size: 32px; font-weight: 900; color: #ffffff; }
.masthead__price-was { font-size: 18px; color: #c6b3c9; text-decoration: line-through; }
.masthead__badge {
  padding: 4px 12px;
  border-radius: 16px;
  
  background: #7c3aed;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.masthead__actions { display: flex; flex-wrap: wrap; gap: 16px; }
.masthead--compact { min-height: 380px; }
.masthead--plain { min-height: 300px; }


.action {
  --action-bg: var(--plum);
  --action-fg: #ffffff;
  --action-border: none;
  --action-glow: var(--halo);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--action-bg);
  color: var(--action-fg);
  border: var(--action-border);
  border-radius: 16px;
  padding: 16px 32px;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  line-height: 1.2;
  cursor: pointer;
  text-align: center;
  box-shadow: 0 4px 15px var(--action-glow);
  transition: box-shadow 0.3s ease, transform 0.2s ease, background 0.3s ease;
}
.action:hover {
  color: var(--action-fg);
  text-decoration: none;
  box-shadow: 0 6px 25px rgba(139, 92, 246, 0.5);
  transform: translateY(-2px);
}
.action--ghost {
  --action-bg: transparent;
  --action-fg: #ffffff;
  --action-border: 1px solid rgba(255, 255, 255, 0.65);
  --action-glow: rgba(0, 0, 0, 0);
}
.action--quiet {
  --action-bg: transparent;
  --action-fg: var(--plum);
  --action-border: 1px solid var(--plum);
  --action-glow: rgba(0, 0, 0, 0);
}
.action--wide { width: 100%; }
.action[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }


.rule-zigzag {
  height: 24px;
  background: var(--lilac);
  -webkit-mask: linear-gradient(135deg, #000 25%, transparent 0) -16px 0/32px 32px repeat-x;
  mask: linear-gradient(135deg, #000 25%, transparent 0) -16px 0/32px 32px repeat-x;
}


.step-set {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 24px;
}
.step {
  --step-bg: #ffffff;
  --step-glow: rgba(139, 92, 246, 0.15);

  position: relative;
  padding: 32px 28px;
  border-radius: 12px;
  background: var(--step-bg);
  border: 1px solid var(--hairline);
  box-shadow: 0 4px 20px var(--step-glow);
  overflow: hidden;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.step:hover { box-shadow: 0 8px 40px rgba(139, 92, 246, 0.3); transform: translateY(-4px); }
.step::before {
  content: attr(data-step);
  position: absolute;
  top: -0.2em;
  right: 0.2em;
  font-size: 80px;
  font-weight: 900;
  color: var(--lilac);
  line-height: 1;
}
.step__title { position: relative; }
.step__text { position: relative; color: var(--plum-soft); margin-bottom: 0; }


.product-feature__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
}
.product-feature__figure { position: relative; margin: 0; }
.product-feature__figure img {
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(43, 18, 38, 0.28);
  display: block;
}
.product-feature__figure figcaption { font-size: 13px; color: var(--silverblue); margin-top: 8px; }
.product-feature__text { padding-right: 32px; }
.product-feature__price { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.product-feature__now { font-size: 32px; font-weight: 900; color: var(--plum); }
.product-feature__was { font-size: 18px; color: var(--silverblue); text-decoration: line-through; }
.product-feature__meta { font-size: 15px; color: var(--silverblue); margin-bottom: 16px; }
.product-feature__points { list-style: none; padding: 0; margin: 0 0 24px; }
.product-feature__points li { padding-left: 24px; position: relative; color: var(--plum-soft); }
.product-feature__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--lilac-glow);
  box-shadow: 0 0 12px var(--halo);
}


.by-the-numbers { display: flex; gap: 32px; margin-top: 32px; flex-wrap: wrap; }
.by-the-numbers__cell { flex: 1 1 160px; border-left: 3px solid var(--lilac); padding-left: 16px; }
.by-the-numbers__value { display: block; font-size: 27px; font-weight: 900; color: var(--plum); line-height: 1.2; }
.by-the-numbers__label { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--silverblue); }


.editorial__body { columns: 3; column-gap: 32px; column-rule: 1px solid #ddd; }
.editorial__body p { margin-bottom: 8px; line-height: 1.5; }
.editorial__body p:first-of-type::first-letter {
  float: left;
  font-size: 56px;
  line-height: 0.86;
  padding-right: 8px;
  color: var(--plum);
  font-weight: 900;
}


.reader-questions__list { border-top: 1px solid var(--hairline); }
.reader-question { border-bottom: 1px solid var(--hairline); }
.reader-question__q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  cursor: pointer;
  font-weight: 700;
  font-size: 17px;
  color: var(--plum);
  background: none;
  border: none;
  text-align: left;
  font-family: inherit;
  min-height: 44px;
}
.reader-question__q::after {
  content: "+";
  font-size: 22px;
  font-weight: 400;
  color: var(--lilac-glow);
  transition: transform 0.3s ease;
}
.reader-question.is-open .reader-question__q::after { transform: rotate(45deg); }
.reader-question__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  color: var(--plum-soft);
}
.reader-question.is-open .reader-question__a { max-height: 400px; padding-bottom: 16px; }


.correspondence__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 24px; }
.features-list__grid--spaced { margin-top: 32px; }
.features-list__grid + .spec, .features-list__grid + table { margin-top: 40px; }
.features-list__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}
.the-upside {
  --upside-bg: var(--pearl);
  background: var(--upside-bg);
  border-radius: 12px;
  padding: 24px;
  border: 1px solid var(--hairline);
}
.the-upside__title { font-size: 17px; margin-bottom: 8px; }
.the-upside p { color: var(--plum-soft); margin-bottom: 0; }


.trail { font-size: 13px; color: var(--silverblue); margin-bottom: 16px; }
.trail a { color: var(--silverblue); }
.trail span { padding: 0 8px; }


.correspondence { padding-top: 32px; }
.features-list { padding-top: 32px; }
.product-feature { padding-top: 32px; }
.reader-questions { padding-top: 32px; }
.editorial { padding-top: 32px; }
.editorial h2 { margin-top: 24px; }
.editorial > p, .editorial > ul { max-width: 780px; }


.band--pearl { background: var(--pearl); }
.band--lilac { background: var(--lilac); }
.band--ivory { background: var(--ivory); }

@media (max-width: 1024px) {
  .product-feature__split { grid-template-columns: 1fr; }
  .product-feature__text { padding-right: 0; }
  .editorial__body { columns: 2; }
}

@media (max-width: 768px) {
  .masthead { min-height: 520px; }
  .masthead--compact { min-height: 340px; }
  .masthead--plain { min-height: 260px; }
  .masthead > * { padding: 24px 16px; }
  .masthead__ribbons { display: none; }
  .editorial__body { columns: 1; column-rule: none; }
  .by-the-numbers { gap: 16px; }
  .action { width: 100%; }
  .masthead__actions, .correspondence__actions { flex-direction: column; align-items: stretch; }
}