/* =========================================================
   Variation D (index-d.html), layered on variation-c.css.
   The conversion audit applied: effort and price under the hero button,
   a "this is for you if…" section, both price options side by side.
   ========================================================= */

/* ---------- Hero: what happens after the click ---------- */
.vd-ease { margin-top: var(--s2); font-size: 13px; color: var(--vb-muted); }
@media (max-width: 899px) { .vd-ease { text-align: center; } }

/* ---------- This is for you if: three short lines, no dividers ---------- */
.vd-for { padding: var(--s8) 0; }
.vd-for__list { list-style: none; margin: var(--s5) auto 0; padding: 0; display: grid; gap: var(--s3); }
.vd-for__list { gap: var(--s2); }
/* same size as the hero paragraph ("There's a magic that happens…") */
.vd-for__list li, .vd #inside-title .vc-l2 { font: 400 15px/1.55 var(--sans); letter-spacing: 0; color: var(--vb-body); text-align: center; }

/* the photo spot now sits on the tinted band */
.vd .vb-sec--tint .vb-photo__frame { background: var(--vb-bg); }

/* ---------- Offer: both options, the $47 marked as Ruby's favourite ---------- */
.vd-options { display: grid; gap: var(--s3); margin-top: var(--s6); }
.vd-option {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: var(--s4) var(--s5);
  border: 1px solid var(--vb-border); border-radius: var(--vb-radius-media);
  background: var(--vb-bg);
}
.vd-option--fav { border-color: var(--vb-text); }
.vd-option__name { font: 600 16px/1.35 var(--sans); color: var(--vb-text); }
.vd-option__name span { display: block; margin-top: 2px; font-size: 14px; font-weight: 400; color: var(--vb-muted); }
.vd-option__price { flex: none; font: 400 34px/1 var(--serif); color: var(--vb-text); }
.vd-option__tag {
  position: absolute; top: -10px; right: var(--s4);
  padding: 4px 10px; border-radius: 999px;
  background: var(--vb-text); color: var(--vb-on-dark);
  font: 600 10px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase;
}
.vd .vc-receive .vb-btn { margin-top: var(--s5); }