/* =========================================================
   Variation H (index-h.html), layered on variation-g.css.
   Ruby's new structure: G's design, no flowers (the butterflies stay),
   titles in Title Case, one price, a guarantee box.
   ========================================================= */

/* ---------- Hero: long headline, no flowers ---------- */
.vh .vh-h1 { font-size: clamp(30px, calc(30px + 16 * (100vw - 375px) / 905), 46px); line-height: 1.08; max-width: 15em; }
.vh .vb-lede { max-width: 33rem; }
.vh-sub { margin-top: var(--s3); font-size: 14px; color: var(--vb-muted); }
.vh .vb-hero__copy .vb-facts { margin-top: var(--s2); }
@media (max-width: 899px) { .vh-sub { text-align: center; } }
@media (min-width: 900px) {
  .vh .vb-hero .hv__frame { margin: 0 auto; }
}

/* ---------- Plain reading sections ---------- */
.vh-prose { margin-top: var(--s5); }
.vh-prose p, .vh-gift .vb-about__text p { margin: var(--s4) auto 0; max-width: 34rem; font-size: var(--vf-text); line-height: 1.65; color: var(--vb-body); }
.vh-prose p:first-child { margin-top: 0; font-weight: 600; color: var(--vb-text); }
.vh .vc-l1 { max-width: 16em; }

/* ---------- The reveal: the writing photo with the butterfly ---------- */
.vh-gift .vb-about__photo { position: relative; }
.vh-gift .vb-about__photo img { border-radius: var(--vb-radius-media); }

/* ---------- This is for you if: four longer lines ---------- */
.vh .vh-for .vd-for__list { gap: var(--s3); max-width: 34rem; }
.vh-nod { margin-top: var(--s5); font-weight: 600; color: var(--vb-text); }

/* ---------- What you get: one complete package ---------- */
.vh-box { padding: var(--s7) var(--s5); border: 1.5px solid var(--vb-text); border-radius: 16px; background: #fff; text-align: center; }
.vh-box p { margin: var(--s4) auto 0; max-width: 32rem; color: var(--vb-body); }
.vh-box .vc-title { margin-bottom: var(--s5); }
.vh-price { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin-top: var(--s6) !important; padding-top: var(--s5); border-top: 1px solid var(--vb-border); }
.vh-price span { font: 600 16px/1 var(--sans); color: var(--vb-muted); }
.vh-price b { font: 400 clamp(52px, calc(52px + 12 * (100vw - 375px) / 905), 64px)/1 var(--serif); font-weight: 400; color: var(--vb-text); font-variant-numeric: lining-nums; }

/* ---------- The guarantee: a stamp-like double border ---------- */
.vh-guarantee { padding: var(--s7) var(--s5); border: 1px solid var(--vb-text); border-radius: 16px; outline: 1px solid var(--vb-text); outline-offset: 5px; background: var(--vb-bg); text-align: center; }
.vh-guarantee p { margin: var(--s4) auto 0; max-width: 32rem; color: var(--vb-body); }
.vh-guarantee .vb-btn { margin-top: var(--s6); }
@media (max-width: 899px) { .vh-guarantee .vb-btn { width: 100%; } }

/* ---------- Final call ---------- */
.vh .vf-end .vb-close .vh-close-small { margin-top: var(--s3); font-size: 14px; color: var(--vb-on-dark-body); }

/* ---------- Phones: Ruby's video right after the opening words, before the button ---------- */
@media (max-width: 899px) {
  .vh .vb-hero .hv__inner { display: flex; flex-direction: column; gap: 0; }
  .vh .vb-hero__copy { display: contents; }
  .vh .vh-h1 { order: 1; }
  .vh .vb-hero .vb-lede { order: 2; }
  .vh .vb-hero .hv__stage { order: 3; margin-top: var(--s5); }
  .vh .vb-hero #hero-cta { order: 4; margin-top: var(--s6); }
  .vh .vh-sub { order: 5; }
  .vh .vb-hero .vb-facts { order: 6; justify-content: center; font-size: 12px; letter-spacing: .06em; gap: 4px 10px; }
  .vh .vb-hero .vb-facts span + span::before { margin-right: 10px; }
}

/* ---------- Round 2 (Ruby's notes) ---------- */
/* hero: centred, the video under the words */
.vh .vh-hero .hv__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.vh .vh-hero .vb-hero__copy { max-width: 760px; margin: 0 auto; }
.vh .vh-hero .vf-kicker, .vh .vh-h1, .vh .vh-hero .vb-lede { margin-left: auto; margin-right: auto; text-align: center; }
.vh .vh-h1 { max-width: 17em; }
.vh .vh-hero .vh-sub { text-align: center; }
.vh .vh-hero .vb-facts { justify-content: center; text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 500; }
@media (min-width: 900px) {
  .vh .vh-hero .hv__inner { padding-top: var(--s8); padding-bottom: var(--s9); gap: var(--s7); }
  .vh .vh-hero .hv__stage { width: 100%; }
  .vh .vh-hero .hv__frame { width: min(36vw, 400px); margin: 0 auto; }
}
@media (max-width: 899px) { .vh .vh-hero .vf-kicker { order: 0; } }

/* why: plain Manrope, nothing bold */
.vh .vh-prose p:first-child { font-weight: 400; color: var(--vb-body); }

/* my gift: header, one text, then the photo */
.vh-gift > p { margin: var(--s5) auto 0; max-width: 34rem; font-size: var(--vf-text); line-height: 1.65; color: var(--vb-body); }
.vh-gift__photo { position: relative; width: min(100%, 380px); margin: var(--s7) auto 0; }
.vh-gift__photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--vb-radius-media); }

/* what's inside: four items with a strong lead-in */
.vh-inside { list-style: none; margin: 0 auto; padding: 0; max-width: 32rem; text-align: left; border-top: 1px solid var(--vb-border); }
.vh-inside li { position: relative; padding: var(--s4) 0 var(--s4) var(--s6); border-bottom: 1px solid var(--vb-border); color: var(--vb-body); line-height: 1.55; }
.vh-inside li::before { content: ""; position: absolute; left: 2px; top: 1.45em; width: 12px; height: 7px; border-left: 2px solid var(--vf-rose); border-bottom: 2px solid var(--vf-rose); transform: rotate(-45deg); }
.vh-inside b { font-weight: 700; color: var(--vb-text); text-transform: uppercase; letter-spacing: .06em; font-size: .88em; }
.vh-box .vh-price { border-top: 0; }

/* ---------- Round 3: headlines in Instrument Serif, more air ---------- */
.vh .vh-h1, .vh .vc-l1, .vh .vb-h2, .vh .vf-end .vb-close .vg-serif {
  font-family: var(--serif); font-weight: 400; font-style: normal; letter-spacing: -.01em; color: var(--vb-text);
}
.vh .vh-h1 { font-size: clamp(42px, calc(42px + 26 * (100vw - 375px) / 905), 68px); line-height: 1.04; max-width: 14em; }
.vh .vc-l1 { font-size: clamp(36px, calc(36px + 20 * (100vw - 375px) / 905), 56px); line-height: 1.06; }
.vh .vf-dark .vc-l1, .vh .vf-end .vb-close .vg-serif { color: var(--vb-on-dark); }
.vh .vf-end .vb-close .vg-serif { font-size: clamp(42px, calc(42px + 22 * (100vw - 375px) / 905), 64px); }
.vh .vc-lead, .vh .vf-kicker { margin-bottom: var(--s4); }

/* spacious reading: taller lines and more room between sections */
.vh .vh-hero .vb-lede { margin-top: var(--s5); font-size: clamp(17px, calc(17px + 2 * (100vw - 375px) / 905), 19px); line-height: 1.8; max-width: 38rem; }
.vh .vh-hero #hero-cta { margin-top: var(--s7); }
.vh .vh-prose p, .vh-gift > p, .vh .vh-box p, .vh .vh-guarantee p, .vh .vd-for__list li, .vh .vh-inside li { line-height: 1.8; }
.vh .vb-sec { padding: clamp(88px, 12vw, 144px) 0; }
.vh .vh-prose, .vh-gift > p { margin-top: var(--s6); }
.vh .vh-h1, .vh .vc-l1 { text-wrap: balance; }
@media (min-width: 900px) { .vh .vh-h1 { max-width: 15.5em; } }

/* ---------- Round 4: short fragments with room to breathe ---------- */
.vh .vh-lede-2 { margin-top: var(--s4); }
.vh .vh-frag { margin-top: var(--s6); }
.vh .vh-frag p, .vh .vh-prose.vh-frag p { margin: var(--s5) auto 0; max-width: 30rem; font-size: var(--vf-text); line-height: 1.7; color: var(--vb-body); font-weight: 400; }
.vh .vh-frag p:first-child { margin-top: 0; }
.vh .vh-guarantee .vh-frag { margin-top: var(--s5); }

/* ---------- Round 5: button right under the words, then the video; calmer spacing; headings max 2 lines ---------- */
@media (max-width: 899px) {
  .vh .vh-hero .vb-hero__copy { display: block; }
  .vh .vh-hero .hv__inner { gap: var(--s6); }
  .vh .vh-hero .hv__stage { margin-top: 0; }
  .vh .vh-hero #hero-cta { width: 100%; }
}
.vh .vh-hero #hero-cta { margin-top: var(--s6); }
.vh .vh-hero .vb-lede { margin-top: var(--s4); line-height: 1.65; }
.vh .vb-sec { padding: clamp(64px, 9vw, 104px) 0; }
.vh .vh-prose p, .vh-gift > p, .vh .vh-box p, .vh .vh-guarantee p, .vh .vd-for__list li, .vh .vh-inside li { line-height: 1.65; }
.vh .vh-frag { margin-top: var(--s5); }
.vh .vh-frag p, .vh .vh-prose.vh-frag p { margin-top: var(--s4); line-height: 1.65; }
.vh .vh-frag p:first-child { margin-top: 0; }
.vh .vc-lead, .vh .vf-kicker { margin-bottom: var(--s3); }
.vh strong { font-weight: 700; color: var(--vb-text); }
.vh .vf-dark strong { color: var(--vb-on-dark); }

/* every heading fits on two lines */
.vh .vh-h1 { font-size: clamp(30px, calc(30px + 30 * (100vw - 375px) / 905), 60px); max-width: 21em; }
.vh .vc-l1 { font-size: clamp(32px, calc(32px + 20 * (100vw - 375px) / 905), 52px); max-width: 20em; }
.vh .vh-hero .vb-hero__copy { width: 100%; min-width: 0; }
@media (max-width: 599px) { .vh .vh-h1 { font-size: clamp(24px, 6.9vw, 30px); letter-spacing: -.015em; } }

/* ---------- Round 6: the hero like Ruby's reference, big and still two lines ---------- */
.vh .vh-h1 { letter-spacing: -.025em; line-height: 1.04; max-width: 22em; text-wrap: balance; }
@media (max-width: 599px) { .vh .vh-h1 { font-size: clamp(33px, 9.9vw, 44px); letter-spacing: -.03em; } }
@media (max-width: 599px) {
  .vh .vh-hero .hv__inner { padding-left: 16px; padding-right: 16px; }
  .vh .vh-h1 { font-size: clamp(29px, 8.9vw, 44px); }
}

/* ---------- Round 7: room under the header (like Ruby's reference), one-line reassurance ---------- */
.vh .vh-sub { white-space: nowrap; }
@media (max-width: 899px) { .vh .vh-hero .hv__inner { padding-top: 64px; } }
@media (min-width: 900px) { .vh .vh-hero .hv__inner { padding-top: 104px; } }

/* ---------- Round 8: "Is This You?" lines on one line each on phones; hero a little higher ---------- */
@media (max-width: 599px) {
  .vh .vh-for .vb-wrap { padding-left: 16px; padding-right: 16px; }
  .vh .vh-for .vd-for__list li { font-size: clamp(13.8px, 3.85vw, 16px); white-space: nowrap; }
  .vh .vh-for .vd-for__list li:last-child, .vh .vh-for .vh-nod { white-space: normal; }
  .vh .vh-for .vh-nod { font-size: clamp(14px, 3.85vw, 16px); }
  .vh .vh-hero .hv__inner { padding-top: 44px; }
}
@media (min-width: 900px) { .vh .vh-hero .hv__inner { padding-top: 84px; } }
.vh .vh-for .vd-for__list li:last-child, .vh .vh-for .vh-nod { text-wrap: balance; }

/* ---------- Round 9: the prayer book on an iPhone, after "My Gift" ---------- */
.vh-phone-wrap { margin-top: var(--s8); }
.vh .vh-phone-wrap .vg-phone { margin: 0 auto; }
.vh-phone-note { margin: var(--s5) auto 0; max-width: 26rem; font-size: var(--vf-text); line-height: 1.6; color: var(--vb-body); text-align: center; text-wrap: balance; }

/* ---------- Round 10 ---------- */
/* hero: tighter lines in the opening words, more room under the small label */
.vh .vh-hero .vb-lede { line-height: 1.5; }
.vh .vh-hero .vf-kicker { margin-bottom: var(--s5); }
/* fewer, calmer paragraphs */
.vh .vh-tight p { margin-top: var(--s3); line-height: 1.6; }
.vh .vh-tight p:first-child { margin-top: 0; }
.vh-gift .vh-phone-wrap { margin: var(--s6) 0 var(--s6); }
/* the photo now closes "Is This You?" */
.vh .vh-for .vh-gift__photo { margin-top: var(--s6); }
/* what's inside: a dark charcoal box */
.vh .vh-box--dark { background: var(--vb-text); border-color: var(--vb-text); color: var(--vb-on-dark); }
.vh .vh-box--dark .vc-lead { color: var(--vf-petal); }
.vh .vh-box--dark .vc-l1 { color: var(--vb-on-dark); }
.vh .vh-box--dark .vh-inside { border-top-color: var(--vf-rule-dark); }
.vh .vh-box--dark .vh-inside li { border-bottom-color: var(--vf-rule-dark); color: var(--vb-on-dark-body); }
.vh .vh-box--dark .vh-inside b { color: var(--vb-on-dark); }
.vh .vh-box--dark .vh-inside li::before { border-color: var(--vf-petal); }
.vh .vh-hero .vb-lede { font-size: clamp(16px, calc(16px + 2 * (100vw - 375px) / 905), 18px); }   /* same size as G */

/* ---------- Round 11: buttons without arrows, a touch more air between paragraphs ---------- */
.vh .vb-btn::after { content: none !important; }
.vh .vh-tight p { margin-top: var(--s4); }
.vh .vh-tight p:first-child { margin-top: 0; }

/* ---------- Round 12: a "Start My Prayer Book" bar at the bottom, and a button in the dark box ---------- */
.vh .vc-head-cta { display: none; }   /* the bottom bar replaces the header button */
.vh-dock { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(250, 249, 246, .94); border-top: 1px solid var(--vb-border); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transform: translateY(110%); transition: transform .25s ease; }
.vh-dock.is-shown { transform: none; }
.vh-dock .vb-btn { width: 100%; }
@media (min-width: 900px) {
  .vh-dock { display: flex; justify-content: center; padding-top: 12px; padding-bottom: 12px; }
  .vh-dock .vb-btn { width: auto; min-width: 320px; }
}
.vh .vb-foot { padding-bottom: calc(var(--s7) + 76px); }   /* room so the bar never hides the footer */
.vh .vh-box__cta { display: flex; width: 100%; max-width: 32rem; margin: var(--s6) auto 0; }
@media (prefers-reduced-motion: reduce) { .vh-dock { transition: none; } }
.vh .vh-box__cta { background: var(--vb-on-dark); color: var(--vb-text); }
.vh .vh-box__cta:hover { background: #fff; }

/* keep the bottom bar's button clear of Netlify's "Powered by Netlify" badge (bottom right, 64px tall) */
.vh-dock { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
.vh .vb-foot { padding-bottom: calc(var(--s7) + 72px); }
@media (min-width: 900px) { .vh-dock { padding-bottom: 12px; } .vh-dock .vb-btn { margin-right: 0; } }
.vh .vh-hero .vh-em { font-weight: 600; color: var(--vb-text); }   /* "slightly bold" */
.vh .vh-g-sub { margin-top: var(--s3); font: 600 13px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--vf-rose); }
.vh .vh-guarantee .vh-g-sub { max-width: none; white-space: nowrap; }

/* ---------- FAQ on a light band, before the guarantee ---------- */
.vh-faq .vb-faq { border-top-color: var(--vb-border); }
.vh-faq .vb-faq details { border-bottom-color: var(--vb-border); }
.vh-faq .vb-faq summary { font: 600 16px/1.4 var(--sans); color: var(--vb-text); }
.vh-faq .vb-faq summary::after { color: var(--vf-rose); }
.vh-faq .vb-faq details p { font-size: 15px; line-height: 1.6; color: var(--vb-body); }
.vh .vh-guarantee { background: #fff; }

/* ---------- Guarantee: a smaller, tighter box ---------- */
.vh .vh-guar-sec { padding: clamp(48px, 7vw, 72px) 0; }
.vh .vh-guarantee { max-width: 34rem; margin: 0 auto; padding: var(--s6) var(--s5); }
.vh .vh-guarantee .vc-l1 { font-size: clamp(28px, calc(28px + 10 * (100vw - 375px) / 905), 38px); }
.vh .vh-guarantee .vh-g-sub { margin-top: var(--s2); font-size: 12px; }
.vh .vh-guarantee .vh-frag { margin-top: var(--s4); }
.vh .vh-guarantee .vh-frag p { margin-top: var(--s3); font-size: 15px; line-height: 1.55; }
.vh .vh-guarantee .vh-frag p:first-child { margin-top: 0; }
.vh .vh-guarantee .vb-btn { margin-top: var(--s5); }

/* a touch more room between the small rose labels and the serif headings */
.vh .vc-lead { margin-bottom: var(--s4); }
.vh .vh-hero .vf-kicker { margin-bottom: 28px; }
.vh .vh-guarantee .vh-g-sub { margin-top: var(--s4); }
.vh .vh-nw { white-space: nowrap; }