/* =========================================================
   Variation F (index-f.html), layered on variation-e.css.
   E restyled like the live calls page (rubysarahaas.com/calls):
   - Manrope headlines at weight 500, slightly tight; no italic words.
     The word that carries the feeling gets a soft petal highlight instead.
   - Section labels in spaced uppercase, rose on light, petal on charcoal.
   - Instrument Serif upright only for the details: the name, step numbers, prices.
   - Buttons with an arrow; petal buttons on charcoal.
   - Charcoal bands: "What we'll do", and the end (letter-free: questions + close).
   - The favourite price option is the charcoal card.
   Fonts are served from this site (assets/fonts), like the calls page.
   ========================================================= */

@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/instrument-serif-latin.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../fonts/manrope-latin.woff2") format("woff2"); }

.vf {
  --vb-bg: #faf9f6;
  --vb-surface: #f1efeb;
  --vb-text: #221f1d;
  --vb-body: #45403b;
  --vb-muted: #6a635c;
  --vb-primary-hover: #3a3632;
  --vb-on-dark: #f7f4f0;
  --vb-on-dark-body: rgba(247, 244, 240, .74);
  --vf-rule-dark: rgba(247, 244, 240, .16);
  --vf-rose: #8a4b52;                 /* labels and ticks on light, 6.2:1 */
  --vf-petal: #f2b6b0;                /* the one accent on charcoal */
  --vf-petal-hover: #f6c8c3;
  --vf-hl: rgba(242, 182, 176, .6);   /* highlighter behind one word */
  --vf-h1: clamp(36px, calc(36px + 24 * (100vw - 375px) / 905), 60px);
  --vf-h2: clamp(30px, calc(30px + 22 * (100vw - 375px) / 905), 52px);
  --vf-label: clamp(13px, calc(13px + 2 * (100vw - 375px) / 905), 15px);
  --vf-text: clamp(16px, calc(16px + 2 * (100vw - 375px) / 905), 18px);
}
body.vf { color: var(--vb-text); font-size: var(--vf-text); }

/* ---------- Highlight and labels ---------- */
.vf mark.hl { color: inherit; background: linear-gradient(180deg, transparent 58%, var(--vf-hl) 58%, var(--vf-hl) 90%, transparent 90%); padding: 0 .04em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.vf-dark mark.hl { background: none; color: var(--vf-petal); padding: 0; }
.vf .vc-lead, .vf .vb-label, .vf-kicker {
  display: block; margin-bottom: 12px;
  font: 600 var(--vf-label)/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--vf-rose);
}
.vf-kicker { font-weight: 700; letter-spacing: .14em; margin-bottom: 10px; }
.vf-dark .vc-lead, .vf .vb-label--dark { color: var(--vf-petal); }

/* ---------- Headlines: Manrope 500 ---------- */
.vf-h1 { font: 500 var(--vf-h1)/1.04 var(--sans); letter-spacing: -.032em; max-width: 9.5em; }
.vf .vc-l1, .vf .vb-h2 { font: 500 var(--vf-h2)/1.06 var(--sans); letter-spacing: -.028em; }
.vf .vc-l2 { margin-top: var(--s3); font: 400 clamp(17px, calc(17px + 3 * (100vw - 375px) / 905), 20px)/1.4 var(--sans); letter-spacing: -.005em; color: var(--vb-body); }
.vf #inside-title .vc-l2 { font-size: clamp(17px, calc(17px + 3 * (100vw - 375px) / 905), 20px); }
.vf .vb-lede { font-size: clamp(16px, calc(16px + 2 * (100vw - 375px) / 905), 18px); }

/* ---------- Header: the name upright and centred ---------- */
.vf .vb-head { display: grid; grid-template-columns: 1fr auto 1fr; min-height: 64px; padding: 8px var(--s4); }
.vf .vb-head .vb-logo { grid-column: 2; font: 400 27px/1 var(--serif); letter-spacing: -.005em; white-space: nowrap; }
.vf .vb-head .vc-head-cta { grid-column: 3; justify-self: end; }
.vf .vb-foot .vb-logo { font: 400 24px/1 var(--serif); }
@media (max-width: 899px) { .vf .vb-head .vc-head-cta { display: none; } }

/* ---------- Buttons: arrow, petal on charcoal ---------- */
.vf .vb-btn { gap: 10px; min-height: 54px; border-radius: 8px; transition: background .15s ease, transform .1s ease; }
.vf .vb-btn:not(.vb-btn--sm)::after { content: "→"; font-weight: 600; transition: transform .15s ease; }
.vf .vb-btn:hover::after { transform: translateX(3px); }
.vf .vb-btn:active { transform: scale(.98); }
.vf .vb-btn--sm { min-height: 44px; font-size: 14px; }
.vf-dark .vb-btn, .vf .vb-btn--light { background: var(--vf-petal); color: var(--vb-text); }
.vf-dark .vb-btn:hover, .vf .vb-btn--light:hover { background: var(--vf-petal-hover); }

/* ---------- Hero facts in spaced capitals ---------- */
.vf .vb-facts { font: 600 13px/1.45 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--vb-muted); }
.vf .vd-ease { font-size: 14px; }

/* ---------- This is for you if ---------- */
.vf .vd-for__list li { font-size: var(--vf-text); }

/* ---------- Inside list ---------- */
.vf .ve-list dt { font: 600 clamp(18px, calc(18px + 2 * (100vw - 375px) / 905), 20px)/1.3 var(--sans); letter-spacing: -.01em; }
.vf .ve-list dd { font-size: var(--vf-text); }

/* ---------- Charcoal bands ---------- */
.vf-dark { background: var(--vb-text); color: var(--vb-on-dark); }
.vf-dark .vc-l1, .vf-dark .vb-h2 { color: var(--vb-on-dark); }
.vf-dark .vc-l2, .vf-dark p { color: var(--vb-on-dark-body); }
.vf-dark h3 { color: var(--vb-on-dark) !important; }

/* steps: numbers on hairlines, the first one lit */
.vf-dark .vb-steps li { display: block; padding-top: var(--s5); border-top: 1px solid var(--vf-rule-dark); }
.vf-dark .vb-steps__n { display: block; font: 400 56px/.9 var(--serif); color: rgba(247, 244, 240, .42); }
.vf-dark .vb-steps li:first-child .vb-steps__n { color: var(--vf-petal); }
.vf-dark .vb-steps h3 { margin-top: var(--s3); font: 600 clamp(19px, calc(19px + 3 * (100vw - 375px) / 905), 22px)/1.25 var(--sans); letter-spacing: -.015em; }
.vf-dark .vb-steps p { font-size: 15px; }
.vf .vf-dark .vb-photo__frame { background: #2e2a27; }
.vf .vf-dark .vb-photo__frame span { color: var(--vb-on-dark-body); }

/* the end: questions and the close share one charcoal block */
.vf-end .vb-sec { background: transparent; }
.vf-end .vb-faq { border-top-color: var(--vf-rule-dark); }
.vf-end .vb-faq details { border-bottom-color: var(--vf-rule-dark); }
.vf-end .vb-faq summary { font: 700 16px/1.4 var(--sans); color: var(--vb-on-dark); }
.vf-end .vb-faq summary::after { color: var(--vf-petal); font-weight: 500; }
.vf-end .vb-faq details p { font-size: 15px; color: var(--vb-on-dark-body); }
.vf-end .vb-close { background: transparent; border-top: 1px solid var(--vf-rule-dark); }
.vf-end .vb-close .vb-h2 { font-size: var(--vf-h2); }
.vf .vb-foot__inner { border-top-color: var(--vf-rule-dark); }

/* ---------- Letter ---------- */
.vf .vb-about__text .vb-sign { font: italic 400 44px/1 var(--serif); color: var(--vf-rose); }

/* ---------- Offer: centred, two cards, the favourite in charcoal ---------- */
.vf-book { max-width: calc(680px + 2 * var(--s5)); text-align: center; }
.vf-book .vc-l1, .vf-book .vc-l2 { margin-left: auto; margin-right: auto; }
.vf-options { display: grid; gap: var(--s3); margin-top: var(--s6); text-align: left; }
.vf-option { padding: var(--s5); border: 1px solid var(--vb-border); border-radius: 16px; background: var(--vb-bg); }
.vf-option--main { background: var(--vb-text); border-color: var(--vb-text); color: var(--vb-on-dark); }
.vf-option__name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px var(--s3); font: 700 13px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.vf-fav { padding: 4px 10px; border-radius: 999px; background: var(--vf-petal); color: var(--vb-text); font: 700 12px/1.3 var(--sans); letter-spacing: .02em; text-transform: none; }
.vf-option__price { margin-top: var(--s3); }
.vf-option__price b { font: 400 clamp(52px, calc(52px + 12 * (100vw - 375px) / 905), 64px)/1 var(--serif); letter-spacing: -.01em; font-variant-numeric: lining-nums; }
.vf-option__note { margin-top: var(--s3); font-size: 14px; color: var(--vb-on-dark-body); }
.vf-ticks { list-style: none; margin: var(--s6) auto 0; padding: 0; max-width: 28rem; display: grid; gap: var(--s3); text-align: left; }
.vf-ticks li { position: relative; padding-left: var(--s6); font-size: 15px; line-height: 1.45; color: var(--vb-body); }
.vf-ticks li::before { content: ""; position: absolute; left: 2px; top: .4em; width: 12px; height: 7px; border-left: 2px solid var(--vf-rose); border-bottom: 2px solid var(--vf-rose); transform: rotate(-45deg); }
.vf-book > .vb-btn { margin-top: var(--s6); }
@media (max-width: 899px) { .vf-book > .vb-btn { width: 100%; } }
@media (min-width: 640px) { .vf-options { grid-template-columns: 1fr 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .vf .vb-btn, .vf .vb-btn::after { transition: none; }
  .vf .vb-btn:active { transform: none; }
}
.vf-nw { white-space: nowrap; }
@media (max-width: 899px) { .vf .vc-l1 { max-width: none; } }