/* =========================================================
   Variation G (index-g.html), layered on variation-f.css.
   Ruby's notes on F, section by section:
   - No highlighter anywhere (the FAQ keeps its petal word on charcoal).
   - Phones: the video starts high enough to be seen without scrolling.
   - "This is for you if" and "Inside you'll find" centred.
   - The sample prayerbook (Lea's) shown on an iPhone instead of the tablet.
   - D's cards for what's inside.
   - "What we'll do": F's numbered layout, but light (E's colours) and centred.
   - "Why I created the prayerbook" centred.
   ========================================================= */

/* ---------- Hero: bring the video up on phones ---------- */
@media (max-width: 899px) {
  .vg .vb-head { min-height: 56px; padding-block: 4px; }
  .vg .vb-hero .hv__inner { padding-top: var(--s5); padding-bottom: var(--s7); gap: var(--s5); }
  .vg .vf-kicker { margin-bottom: 6px; }
  .vg .vf-h1 { font-size: 34px; }
  .vg .vb-lede { margin-top: var(--s4); font-size: 16px; line-height: 1.55; }
  .vg .vb-hero__copy .vb-btn { margin-top: 28px; }
  .vg .vb-facts { margin-top: var(--s3); }
  .vg .vd-ease { margin-top: 4px; font-size: 13px; }
}

/* ---------- This is for you if: centred ---------- */
.vg .vd-for .vc-l1 { margin-left: auto; margin-right: auto; }
.vg .vd-for__list li { text-align: center; }

/* ---------- Inside: centred header, iPhone, D's cards ---------- */
.vg #inside-title .vc-l2 { text-align: center; margin-left: auto; margin-right: auto; max-width: 30rem; }
.vg .vc-book { margin-top: var(--s7); }

/* iPhone 15 proportions: titanium edge, black bezel, Dynamic Island, side buttons */
.vg .vg-phone { position: relative; width: min(236px, 62vw); margin: 0 auto; }
.vg .vg-phone .tablet__body {
  padding: 9px; border-radius: 46px;
  background: #0f0e0d;
  box-shadow:
    0 0 0 1.5px #a59f98,                       /* titanium frame */
    0 0 0 3px #6f6a64,
    inset 0 0 0 1px rgba(255, 255, 255, .06),
    0 34px 44px -24px rgba(38, 35, 32, .5), 0 10px 16px rgba(38, 35, 32, .14);
}
.vg .vg-phone .tablet__body::before {          /* Dynamic Island */
  content: ""; position: absolute; z-index: 4; top: 19px; left: 50%; transform: translateX(-50%);
  width: 30%; height: 20px; border-radius: 12px; background: #000;
}
.vg .vg-phone::before, .vg .vg-phone::after {   /* side buttons */
  content: ""; position: absolute; width: 3px; border-radius: 2px; background: #8d8780;
}
.vg .vg-phone::before { left: -4px; top: 92px; height: 58px; box-shadow: 0 -40px 0 -6px #8d8780; }
.vg .vg-phone::after { right: -4px; top: 118px; height: 76px; }
.vg .vg-phone .tablet__screen { aspect-ratio: 390 / 844; border-radius: 38px; background: #faf9f6; }
.vg .vg-phone .tablet__screen::after { background: linear-gradient(125deg, rgba(255,255,255,.12), rgba(255,255,255,0) 32%); }
.vg .vg-phone .tablet__slide img { object-fit: cover; object-position: top; }
.vg .vg-phone .tablet__slide--note { background: #faf9f6; }
.vg .vg-phone .tablet__note { inset: 12% 8%; border-color: rgba(38, 35, 32, .35); }
.vg .vg-phone .tablet__preview-tag { top: 62%; }
@media (min-width: 900px) { .vg .vg-phone { width: 260px; } }

/* D's cards on the paper section */
.vg .vc-cards { margin-top: var(--s7); }
.vg .vc-card p { font-size: 16px; line-height: 1.6; }

/* ---------- What we'll do: F's layout in E's colours, centred ---------- */
.vg-steps .vb-photo { margin-top: var(--s7); }
.vg-steps .vb-steps { margin-top: var(--s7); text-align: left; }
.vg-steps .vb-steps li { display: block; padding-top: var(--s5); border-top: 1px solid var(--vb-border); }
.vg-steps .vb-steps__n { display: block; font: 400 56px/.9 var(--serif); color: var(--vb-text); }
.vg-steps .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; }
.vg-steps .vb-steps p { font-size: 16px; }
.vg-steps .vb-photo__frame { background: var(--vb-bg); }
.vg-steps .vc-l1 { margin-left: auto; margin-right: auto; }

/* ---------- Why I created the prayerbook: centred ---------- */
.vg .vc-about .vc-l1 { margin-left: auto; margin-right: auto; }
.vg .vc-about .vb-about__text p { margin-left: auto; margin-right: auto; }

.vg .vb-about__text .vb-sign { font-style: normal; color: var(--vb-text); }

/* ---------- Offer: both cards light; the favourite gets an ink outline and D's tag on it ---------- */
.vg .vf-option--main { position: relative; background: #e3ddd5; border-color: var(--vb-text); color: var(--vb-text); }  /* warm stone: darker than the section, far from charcoal */
.vg .vf-option--main .vf-option__note { color: var(--vb-muted); }
.vg .vf-option__note { color: var(--vb-muted); }
.vg-fav {
  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;
}

/* ---------- Close: all white, the line in Instrument Serif ---------- */
.vg .vf-end .vb-close .vb-label { color: var(--vb-on-dark); }
.vg .vf-end .vb-close .vg-serif { font: 400 clamp(40px, calc(40px + 24 * (100vw - 375px) / 905), 64px)/1.02 var(--serif); letter-spacing: -.01em; color: var(--vb-on-dark); }
.vg .vf-end .vb-close p { color: var(--vb-on-dark); }
.vg .vf-end .vb-close .vb-btn { background: var(--vb-on-dark); color: var(--vb-text); }
.vg .vf-end .vb-close .vb-btn:hover { background: #fff; }
.vg #inside-title .vc-l1 { max-width: 12em; }   /* "A deeper connection, / from your heart" */
.vg .vg-privacy { margin-top: 4px; }

/* ---------- Offer: one block, "Your prayerbook, from $37" (the choice happens after the questions) ---------- */
.vg-from { max-width: 340px; margin: var(--s6) auto 0; padding: var(--s5); border: 1px solid var(--vb-text); border-radius: 16px; background: var(--vb-bg); text-align: center; }
.vg-from__price { margin-top: var(--s3); display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.vg-from__price span { font: 500 16px/1 var(--sans); color: var(--vb-muted); }
.vg-from__price b { font: 400 clamp(52px, calc(52px + 12 * (100vw - 375px) / 905), 64px)/1 var(--serif); font-weight: 400; letter-spacing: -.01em; font-variant-numeric: lining-nums; }
.vg-from .vf-option__name { justify-content: center; }