/* =========================================================
   Variation B (index-b.html)
   Who: women arriving from Instagram who feel anxious or stuck and want to pray but don't know how.
   Job: understand what they get, trust Ruby, start the questionnaire.
   Order of attention: the promise + Ruby → what's inside → price and the button.
   Rules: Instrument Serif (upright) for headings only, Manrope for everything else,
   charcoal as the one accent (the button), near-white grounds, few containers.
   ========================================================= */

.vb {
  /* colour roles */
  --vb-bg: #faf9f6;              /* page */
  --vb-surface: #f1efeb;         /* alternate bands */
  --vb-text: #262320;            /* headings, primary button */
  --vb-body: #403b36;            /* running text, 10:1 on bg */
  --vb-muted: #5e5852;           /* labels, facts, captions, 6.5:1 on bg, 6:1 on surface */
  --vb-border: rgba(38, 35, 32, .14);
  --vb-primary-hover: #3a3632;
  --vb-on-dark: #f6f4f0;
  --vb-on-dark-body: rgba(246, 244, 240, .8);

  /* type scale */
  --vb-h1: clamp(40px, 8.4vw, 66px);
  --vb-h2: clamp(32px, 5.6vw, 46px);
  --vb-h3: 18px;
  --vb-lede: 18px;
  --vb-text-size: 17px;
  --vb-small: 14px;

  /* spacing scale */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px; --s9: 112px;
  --vb-section: clamp(var(--s8), 10vw, var(--s9));

  /* widths and radii */
  --vb-wide: 1120px;
  --vb-read: 40rem;              /* about 68 characters at 17px */
  --vb-radius: 8px;              /* buttons, fields */
  --vb-radius-media: 10px;       /* photos, video, screenshots */

  background: var(--vb-bg);
  color: var(--vb-text);
  font: 400 var(--vb-text-size)/1.55 var(--sans);
}
:where(.vb) p { margin: 0; }
:where(.vb) :is(h1, h2, h3) { margin: 0; font-weight: 400; }

/* ---------- Type ---------- */
.vb-h1 { font: 400 var(--vb-h1)/1.04 var(--serif); letter-spacing: -0.01em; text-wrap: balance; max-width: 12em; }
.vb-h2 { font: 400 var(--vb-h2)/1.08 var(--serif); letter-spacing: -0.005em; text-wrap: balance; }
.vb h3 { font: 600 var(--vb-h3)/1.35 var(--sans); color: var(--vb-text); }
.vb-lede { margin-top: var(--s5); max-width: 32rem; font-size: var(--vb-lede); line-height: 1.55; color: var(--vb-body); }
.vb-intro { margin-top: var(--s3); max-width: var(--vb-read); color: var(--vb-muted); }
.vb-label { margin-bottom: var(--s3); font: 600 var(--vb-small)/1.3 var(--sans); color: var(--vb-muted); }
.vb-label--dark { color: var(--vb-on-dark-body); }
.vb-sub { margin-top: var(--s3); max-width: var(--vb-read); font: 400 20px/1.35 var(--sans); color: var(--vb-body); }
.vb-small { margin-top: var(--s3); font-size: var(--vb-small); color: var(--vb-muted); text-align: center; }

/* ---------- Buttons: one style, charcoal, sentence case ---------- */
.vb-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 var(--s6);
  border-radius: var(--vb-radius);
  background: var(--vb-text); color: var(--vb-on-dark);
  font: 600 16px/1 var(--sans);
  text-decoration: none; white-space: nowrap;
  transition: background .15s ease;
}
.vb-btn:hover { background: var(--vb-primary-hover); }
.vb-btn:focus-visible, .vb a:focus-visible, .vb summary:focus-visible { outline: 2px solid var(--vb-text); outline-offset: 3px; }
.vb-btn--sm { min-height: 44px; padding: 0 var(--s4); font-size: 15px; }
.vb-btn--block { width: 100%; }
.vb-btn--light { background: var(--vb-on-dark); color: var(--vb-text); }
.vb-btn--light:hover { background: #fff; }
.vb-btn--light:focus-visible { outline-color: var(--vb-on-dark); }

/* ---------- Header ---------- */
.vb-head {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: var(--s3) var(--s5);
  background: rgba(250, 249, 246, .94);
  border-bottom: 1px solid var(--vb-border);
}
.vb-logo { font: italic 400 24px/1 var(--serif); color: inherit; text-decoration: none; }
@media (max-width: 420px) { .vb-head .vb-btn--sm { font-size: 14px; padding: 0 var(--s3); } }

/* ---------- Layout ---------- */
.vb-wrap { max-width: var(--vb-wide); margin: 0 auto; padding: 0 var(--s5); }
.vb-narrow { max-width: calc(var(--vb-read) + 2 * var(--s5)); }
.vb-sec { padding: var(--vb-section) 0; }
.vb-sec--tint { background: var(--vb-surface); }

/* ---------- Hero (flower video, butterfly and slider come from styles.css) ---------- */
.vb-hero { background: var(--vb-bg); min-height: 0; }
.vb-hero .hv__inner { padding: var(--s7) var(--s5) var(--s8); gap: var(--s7); }
.vb-hero .hv__stage { margin: 0 calc(var(--s5) * -1); }
.vb-hero .hv__side { background: var(--vb-bg); }
.vb-hero .hv__card { border-radius: var(--vb-radius-media); }
.vb-hero__copy .vb-btn { margin-top: var(--s7); }          /* room for the butterfly to land */
.vb-facts { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); margin-top: var(--s4); font-size: var(--vb-small); font-weight: 500; color: var(--vb-muted); }
.vb-facts span + span::before { content: "·"; margin-right: var(--s4); }
@media (max-width: 899px) {
  .vb-hero__copy .vb-btn { width: 100%; }
  .vb-facts { justify-content: center; }
}
@media (min-width: 900px) {
  .vb-hero .hv__inner { padding: var(--s8) var(--s7) var(--s9); }
  .vb-hero .hv__stage { margin: 0; }
}

/* ---------- What's inside ---------- */
.vb-inside { display: grid; gap: var(--s7); }
@media (max-width: 899px) {
  /* phones: heading, then the tablet, then the list and the button */
  .vb-inside { gap: 0; }
  .vb-inside__text { display: contents; }
  .vb-inside__text > * { order: 1; }
  .vb-inside__book { order: 2; margin: var(--s7) 0 var(--s2); }
  .vb-inside__text > .vb-list { order: 3; }
  .vb-inside__text > .vb-inside__cta { order: 4; }
}
.vb .tablet { margin: 0 auto; }
.vb .tablet__body, .vb .tablet:hover .tablet__body { transform: none; transition: none; }
.vb-list { margin: var(--s6) 0 0; border-top: 1px solid var(--vb-border); }
.vb-list > div { padding: var(--s5) 0; border-bottom: 1px solid var(--vb-border); }
.vb-list dt { font: 600 var(--vb-h3)/1.35 var(--sans); }
.vb-list dd { margin: var(--s2) 0 0; max-width: var(--vb-read); color: var(--vb-body); }
.vb-inside__cta { margin-top: var(--s6); }
@media (max-width: 899px) { .vb-inside__cta { width: 100%; } }
@media (min-width: 900px) {
  .vb-inside { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s8); align-items: start; }
  .vb-inside__book { position: sticky; top: 120px; padding-top: var(--s2); }
}

/* ---------- How it works ---------- */
.vb-steps { list-style: none; margin: var(--s6) 0 0; padding: 0; display: grid; gap: var(--s6); }
.vb-steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--s4); }
.vb-steps__n { font: 400 44px/.9 var(--serif); color: var(--vb-text); }
.vb-steps p { margin-top: var(--s2); max-width: 30rem; color: var(--vb-body); }
.vb-photo { position: relative; margin-top: var(--s7); }
.vb-photo__frame { aspect-ratio: 4 / 3; border-radius: var(--vb-radius-media); overflow: hidden; background: var(--vb-bg); display: grid; place-items: center; }
.vb-photo__frame { position: relative; }
.vb-photo__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; }   /* fills the frame; a little room above Ruby's head, the notebook in view */
.vb-photo__frame span { padding: 0 var(--s5); text-align: center; font-size: var(--vb-small); color: var(--vb-muted); }
@media (min-width: 900px) {
  .vb-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s7); }
  .vb-photo__frame { aspect-ratio: 16 / 9; }
  .vb-photo__frame img { object-position: 50% 8%; }   /* the wider crop needs the frame a touch higher */
}

/* ---------- About ---------- */
.vb-about { display: grid; gap: var(--s6); }
.vb-about__photo { margin: 0; }
.vb-about__photo img { width: 100%; height: auto; max-width: 420px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--vb-radius-media); }
.vb-about__photo figcaption { margin-top: var(--s3); font-size: var(--vb-small); color: var(--vb-muted); }
.vb-about__photo a { color: inherit; text-underline-offset: 3px; }
.vb-about__text p { margin-top: var(--s4); max-width: var(--vb-read); color: var(--vb-body); }
.vb-about__text .vb-h2 { margin-bottom: var(--s2); }
.vb-about__text .vb-sign { margin-top: var(--s5); font: italic 400 40px/1 var(--serif); color: var(--vb-text); }
@media (min-width: 900px) {
  .vb-about { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s8); align-items: center; }
}

/* ---------- Messages ---------- */
.vb-shots { display: grid; grid-auto-flow: column; grid-auto-columns: 72%; gap: var(--s4); margin: var(--s6) calc(var(--s5) * -1) 0; padding: 0 var(--s5) var(--s2); overflow-x: auto; scroll-snap-type: x mandatory; }
.vb-shot { margin: 0; aspect-ratio: 9 / 16; border-radius: var(--vb-radius-media); overflow: hidden; scroll-snap-align: start; background: var(--vb-bg); }
.vb-shot img { width: 100%; height: 100%; object-fit: cover; }
.vb-shot--empty { display: grid; place-items: center; border: 1px dashed var(--vb-border); }
.vb-shot--empty span { font-size: var(--vb-small); color: var(--vb-muted); }
@media (min-width: 900px) {
  .vb-shots { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: var(--s6) 0 0; padding: 0; overflow: visible; }
}

/* ---------- Price ---------- */
.vb-offer { display: grid; gap: var(--s6); }
.vb-offer__table { border-top: 1px solid var(--vb-text); }
.vb-checks { list-style: none; margin: 0; padding: 0; }
.vb-checks li { position: relative; padding: var(--s3) 0 var(--s3) var(--s6); border-bottom: 1px solid var(--vb-border); color: var(--vb-body); }
.vb-checks li::before { content: ""; position: absolute; left: 2px; top: 19px; width: 12px; height: 7px; border-left: 1.5px solid var(--vb-text); border-bottom: 1.5px solid var(--vb-text); transform: rotate(-45deg); }
.vb-price { margin-top: var(--s6); font: 400 56px/1 var(--serif); font-variant-numeric: lining-nums; }
.vb-addon { margin-top: var(--s2); color: var(--vb-muted); }
.vb-offer__table .vb-btn { margin-top: var(--s6); }
@media (min-width: 900px) {
  .vb-offer { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s8); align-items: start; }
}

/* ---------- Questions ---------- */
.vb-faq { margin-top: var(--s5); border-top: 1px solid var(--vb-border); }
.vb-faq details { border-bottom: 1px solid var(--vb-border); }
.vb-faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s4);
  min-height: 64px; padding: var(--s4) 0;
  font: 500 18px/1.35 var(--sans);
  list-style: none; cursor: pointer;
}
.vb-faq summary::-webkit-details-marker { display: none; }
.vb-faq summary::after { content: "+"; flex: none; font: 300 26px/1 var(--sans); color: var(--vb-muted); transition: transform .15s ease; }
.vb-faq details[open] summary::after { transform: rotate(45deg); }
.vb-faq details p { padding: 0 var(--s7) var(--s5) 0; color: var(--vb-body); }

/* ---------- Close + footer ---------- */
.vb-close { padding: var(--s9) 0 var(--s8); background: var(--vb-text); color: var(--vb-on-dark); text-align: center; }
.vb-close p { margin: var(--s3) auto 0; color: var(--vb-on-dark-body); }
.vb-close .vb-btn { margin-top: var(--s6); }
.vb-foot { padding: var(--s6) 0 var(--s7); background: var(--vb-text); color: var(--vb-on-dark-body); }
.vb-foot__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4) var(--s6); padding-top: var(--s6); border-top: 1px solid rgba(246, 244, 240, .16); }

.vb-foot .vb-logo { color: var(--vb-on-dark); }
.vb-foot nav { display: flex; gap: var(--s5); }
.vb-foot a { color: inherit; text-underline-offset: 3px; }
.vb-foot nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; }
.vb-foot small { font-size: 13px; }