/* =========================================================
   Variation C (index-c.html), layered on variation-b.css.
   Changes from B: A's headline treatment (serif line with one italic word,
   Manrope line under it) at B's sizes, centred section headers, A's cards
   with lighter title tags, A's dark offer box, and a header button that
   appears only once the hero button has scrolled away.
   ========================================================= */

.vc {
  --vc-tag: #6e675f;             /* card title tags: lighter than the charcoal buttons; 5.4:1 with light text */
  --vb-text-size: 15px;          /* running text a step smaller than B */
}

/* ---------- Headlines: serif line (one italic word) + Manrope line ---------- */
.vc-title { font-weight: 400; color: var(--vb-text); }
.vc-lead { display: block; margin-bottom: var(--s3); font: 600 var(--vb-small)/1.3 var(--sans); color: var(--vb-muted); }
.vc-l1 { display: block; font: 400 var(--vb-h2)/1.06 var(--serif); letter-spacing: -0.005em; text-wrap: balance; }
.vc-l1 em { font-style: italic; }
.vc-l2 { display: block; margin-top: var(--s2); font: 400 clamp(18px, 3.4vw, 24px)/1.25 var(--sans); letter-spacing: -0.01em; color: var(--vb-body); text-wrap: balance; }
.vc-center { text-align: center; }
.vc-center .vc-l1, .vc-center .vc-l2 { margin-left: auto; margin-right: auto; max-width: 18em; }
.vc-title--long .vc-l1 { max-width: 14em; }

/* hero: B's size, A's mix */
.vc-title--hero .vc-l1 { font-size: var(--vb-h1); line-height: 1.02; letter-spacing: -0.01em; max-width: none; }
.vc-title--hero .vc-l2 { margin-top: 0; font-size: calc(var(--vb-h1) * .72); line-height: 1.05; letter-spacing: -0.02em; color: var(--vb-text); }
.vc .vb-lede { font-size: 15px; }
.vc .vb-hero .hv__card { box-shadow: none; }   /* no grey shadow line under the video */

/* colour break: the hero keeps B's ground; "Inside you'll find" starts the tinted band, and the
   sections after it alternate from there (the tint classes in index-c.html are shifted by one) */
.vc .vb-sec--tint .vc-card { background: var(--vb-bg); }
.vc .vb-photo__frame { background: var(--vb-surface); }

/* ---------- Header button: hidden until the hero button scrolls out of view ---------- */
.vc-head-cta { opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s; }
.vc-head-cta.is-shown { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .2s ease, visibility 0s; }

/* ---------- Inside: centred header, tablet, A's cards ---------- */
.vc-book { margin: var(--s7) auto 0; }
.vc-cards { list-style: none; margin: var(--s7) 0 0; padding: 0; display: grid; gap: var(--s3); }
.vc-card { padding: var(--s6) var(--s5); border-radius: 16px; background: var(--vb-surface); text-align: center; }
.vc .vc-card__title {
  display: inline-block; margin: 0 0 var(--s4);
  padding: 10px var(--s4); border-radius: 999px;
  background: var(--vc-tag); color: var(--vb-on-dark);
  font: 600 12px/1.2 var(--sans); letter-spacing: .18em; text-transform: uppercase;
  white-space: nowrap;
}
.vc-card p { margin: 0 auto; max-width: 30rem; color: var(--vb-body); }
.vc-cta { margin-top: var(--s6); }
@media (max-width: 899px) { .vc-cta { width: 100%; } }
@media (min-width: 900px) {
  .vc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; margin-left: auto; margin-right: auto; }
  .vc-card:last-child { grid-column: 1 / -1; }
}

/* ---------- How it works: centred header ---------- */
.vc .vb-steps { margin-top: var(--s7); }

/* ---------- About: everything centred ---------- */
.vb-about.vc-about { display: block; text-align: center; }
.vc-about .vb-about__photo { max-width: 360px; margin: 0 auto var(--s6); }
.vc-about .vb-about__photo img { margin: 0 auto; }
.vc-about .vb-about__text p { margin-left: auto; margin-right: auto; }
.vc-about .vb-about__text .vc-title { margin-bottom: var(--s5); }

/* ---------- Offer: centred header, B's light list (no dark box) ---------- */
.vc-offer { max-width: calc(560px + 2 * var(--s5)); }
.vc-receive { margin-top: var(--s6); }
.vc-receive .vb-price, .vc-receive .vb-addon { text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .vc-head-cta, .vc-head-cta.is-shown { transition: none; transform: none; }
}