/* indexv.css — shared styles for the Registration Variants pages
   (indexv1a sheet checkout, indexv1b one page, indexv1c stepper).
   Visual language ported from the design doc "Registration Variants.dc.html":
   cream canvas, Archivo + IBM Plex Mono, red #CE2B3C / ink #14181F / navy #1B3A6B. */

:root {
  --vbv-red: #CE2B3C;
  --vbv-red-dark: #B01F31;
  --vbv-ink: #14181F;
  --vbv-navy: #1B3A6B;
  --vbv-cream: #FBFAF7;
  --vbv-line: #E4DFD7;
  --vbv-line-soft: #E7E3DC;
  --vbv-muted: #5A6270;
  --vbv-faint: #8A8F99;
  --vbv-green: #0E5C3A;
  --vbv-ring: 0 0 0 4px rgba(206, 43, 60, .14);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.vbv {
  margin: 0;
  background: #EDE9E2;
  font-family: 'Archivo', system-ui, sans-serif;
  color: var(--vbv-ink);
  -webkit-font-smoothing: antialiased;
}
.vbv a { color: var(--vbv-red); text-decoration: none; }
.vbv input, .vbv select, .vbv button, .vbv textarea { font-family: 'Archivo', system-ui, sans-serif; }
.vbv input:focus, .vbv select:focus { outline: 2px solid var(--vbv-navy); outline-offset: -1px; }
.vbv ::placeholder { color: #9AA1AC; }
.vbv [hidden] { display: none !important; }
.vbv-mono { font-family: 'IBM Plex Mono', monospace; }

/* Page column: full-bleed on mobile, centered card on desktop. */
.vbv-page {
  max-width: 480px;
  margin: 0 auto;
  background: var(--vbv-cream);
  min-height: 100vh;
  position: relative;
}
@media (min-width: 520px) {
  .vbv-page {
    margin: 28px auto 48px;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 30px 70px -24px rgba(20, 24, 31, .35), 0 0 0 1px rgba(20, 24, 31, .08);
    min-height: 0;
  }
}

/* ---- top bar ---- */
.vbv-topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 18px; height: 58px;
  background: rgba(251, 250, 247, .94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--vbv-line-soft);
}
.vbv-topbar-brand { display: flex; align-items: center; gap: 9px; }
.vbv-logo {
  width: 26px; height: 26px; border-radius: 7px; background: var(--vbv-red);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px; font-weight: 800; letter-spacing: -.04em;
}
.vbv-logo-navy { background: var(--vbv-navy); }
.vbv-topbar-name { font-size: 14px; font-weight: 700; letter-spacing: -.01em; color: var(--vbv-ink); }
.vbv-topbar-phone { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--vbv-muted); }
.vbv-topbar-login { font-size: 12px; font-weight: 600; color: var(--vbv-navy); }

/* ---- hero (1a photo hero / 1c photo hero) ---- */
.vbv-hero { position: relative; background-size: cover; }
.vbv-hero-1a { height: 430px; }
.vbv-hero-media { position: absolute; inset: 0; background-size: cover; }
.vbv-hero-shade { position: absolute; inset: 0; }
.vbv-hero-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 20px 22px; }
.vbv-kicker {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px; font-weight: 600; letter-spacing: .18em; margin-bottom: 10px;
}
.vbv-hero h1 { margin: 0 0 10px; font-size: 42px; line-height: .95; font-weight: 800; letter-spacing: -.035em; color: #fff; }
.vbv-hero p { margin: 0 0 16px; font-size: 15px; line-height: 1.45; color: rgba(255, 255, 255, .78); }
.vbv-hero-cta {
  display: block; text-align: center; background: var(--vbv-red); color: #fff !important;
  font-size: 16px; font-weight: 700; padding: 16px; border-radius: 14px;
  box-shadow: 0 10px 24px -8px rgba(206, 43, 60, .7); border: 0; width: 100%; cursor: pointer;
}
.vbv-hero-cta:active { background: var(--vbv-red-dark); }

/* ---- stats strip (1a) ---- */
.vbv-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; background: var(--vbv-ink); color: #fff; }
.vbv-stat { padding: 14px 10px; text-align: center; }
.vbv-stat + .vbv-stat { border-left: 1px solid rgba(255, 255, 255, .12); }
.vbv-stat-num { font-size: 16px; font-weight: 800; }
.vbv-stat-label {
  font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: .1em;
  color: rgba(255, 255, 255, .6); margin-top: 3px;
}

/* ---- shared type ---- */
.vbv-h2 { margin: 0 0 6px; font-size: 26px; font-weight: 800; letter-spacing: -.025em; }
.vbv-sub { margin: 0 0 18px; font-size: 14px; line-height: 1.5; color: var(--vbv-muted); }
.vbv-eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px; font-weight: 600; letter-spacing: .14em;
  color: var(--vbv-faint); margin-bottom: 10px;
}
.vbv-eyebrow-red { color: var(--vbv-red); }

/* ---- 1a league cards ---- */
.vbv-cards { display: flex; flex-direction: column; gap: 14px; }
.vbv-card {
  border: 1px solid var(--vbv-line); border-radius: 20px; background: #fff;
  padding: 16px; box-shadow: 0 2px 10px -4px rgba(20, 24, 31, .1);
}
.vbv-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.vbv-day-pill {
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 600; letter-spacing: .12em;
  background: #F1EEE8; color: var(--vbv-ink); padding: 5px 9px; border-radius: 999px;
}
/* 1a: the day of week IS the card headline. */
.vbv-card-day { font-size: 25px; font-weight: 800; letter-spacing: -.02em; color: var(--vbv-ink); line-height: 1; }
.vbv-card-day::after { content: ''; display: block; width: 30px; height: 3px; border-radius: 2px; background: var(--vbv-red); margin-top: 7px; }
.vbv-card-top { align-items: flex-start; }
.vbv-card-season { font-size: 12px; font-weight: 600; color: var(--vbv-faint); }
.vbv-card-name { font-size: 15px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 8px; color: #3A414D; }
.vbv-card-meta { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--vbv-muted); line-height: 1.4; margin-bottom: 12px; }
.vbv-card-meta .vbv-dim { color: var(--vbv-faint); }
.vbv-females-chip {
  display: inline-block; font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 600;
  letter-spacing: .06em; background: #FDEDEF; color: #A3162A; padding: 6px 9px; border-radius: 8px; margin-bottom: 14px;
}
.vbv-card-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.vbv-card-btns.vbv-single { grid-template-columns: 1fr; }
.vbv-btn-team {
  border: 0; cursor: pointer; background: var(--vbv-red); color: #fff;
  border-radius: 13px; padding: 11px 6px; text-align: center;
}
.vbv-btn-team:hover { background: var(--vbv-red-dark); }
.vbv-btn-solo {
  border: 1px solid var(--vbv-ink); cursor: pointer; background: #fff; color: var(--vbv-ink);
  border-radius: 13px; padding: 11px 6px; text-align: center;
}
.vbv-btn-solo:hover { background: var(--vbv-ink); color: #fff; }
.vbv-btn-title { font-size: 14px; font-weight: 700; }
.vbv-btn-price { font-size: 11px; opacity: .75; margin-top: 2px; }
.vbv-btn-solo .vbv-btn-price { color: var(--vbv-muted); opacity: 1; }
.vbv-btn-soldout { opacity: .45; cursor: not-allowed !important; }
.vbv-btn-soldout:hover { background: inherit; color: inherit; }
.vbv-btn-team.vbv-btn-soldout:hover { background: var(--vbv-red); }
.vbv-btn-solo.vbv-btn-soldout:hover { background: #fff; color: var(--vbv-ink); }

/* ---- photo blocks ---- */
.vbv-photo { position: relative; border-radius: 20px; overflow: hidden; background-size: cover; }
.vbv-photo-shade { position: absolute; inset: 0; }
.vbv-photo-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px; }
.vbv-stars { color: #FFC94D; font-size: 13px; letter-spacing: .1em; margin-bottom: 8px; }
.vbv-quote { margin: 0 0 8px; font-size: 16px; line-height: 1.4; font-weight: 600; color: #fff; }
.vbv-attrib { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: rgba(255, 255, 255, .65); }

/* ---- guarantee / FAQ (1a) ---- */
.vbv-guarantee { border: 1px solid var(--vbv-line); border-radius: 18px; background: #fff; padding: 16px; }
.vbv-guarantee-title { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.vbv-guarantee p, .vbv-faq p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--vbv-muted); }
.vbv-faq-item { border-bottom: 1px solid var(--vbv-line-soft); padding-bottom: 12px; }
.vbv-faq-item:last-child { border-bottom: 0; padding-bottom: 0; }
.vbv-faq-q { font-size: 14px; font-weight: 700; margin-bottom: 4px; }

/* ---- footer ---- */
.vbv-footer { background: var(--vbv-ink); color: rgba(255, 255, 255, .6); padding: 24px 20px 30px; font-size: 12px; line-height: 1.7; }
.vbv-footer-name { color: #fff; font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.vbv-footer-fine { margin-top: 12px; font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .08em; color: rgba(255, 255, 255, .35); }

/* ---- form fields ---- */
.vbv-fields { display: flex; flex-direction: column; gap: 12px; }
.vbv-field label { display: block; font-size: 12px; font-weight: 600; color: var(--vbv-muted); margin-bottom: 5px; }
.vbv-label-note { font-weight: 400; color: var(--vbv-faint); }
.vbv-field input, .vbv-field select {
  width: 100%; height: 52px; border: 1px solid #DED9D1; border-radius: 12px;
  padding: 0 14px; font-size: 16px; font-weight: 500; background: #fff; color: var(--vbv-ink);
}
.vbv-field select { padding: 0 12px; }
.vbv-field.vbv-invalid input, .vbv-field.vbv-invalid select { border: 2px solid #c00; box-shadow: 0 0 0 3px rgba(204, 0, 0, .12); }
.vbv-err { color: #c00; font-size: 12px; margin-top: 4px; }
.vbv-err-block { color: #c00; font-size: 13px; margin: 10px 0; }
.vbv-err-block:empty { display: none; }
.vbv-mens-note { font-size: 12px; color: var(--vbv-faint); line-height: 1.45; }
.vbv-lead-note { margin-top: 12px; display: flex; align-items: flex-start; gap: 8px; font-size: 12px; line-height: 1.45; color: var(--vbv-muted); }
.vbv-lead-note.vbv-lead-ok { color: var(--vbv-green); }
.vbv-lead-icon { font-weight: 700; }

/* ---- one-box checkout (1b) ----------------------------------------------
   The shared format hoopstars/sportstars/AGS/msl run: the whole checkout in a
   single container, headed by a title and the Stripe badge, opening with a
   summary of what is being bought, and with the picker sitting against the pay
   button. Rendered here in the variants' own language — cream inset, Archivo,
   IBM Plex Mono for the small caps, navy rule. */
.vbv-co-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 20px 16px; border-bottom: 1px solid var(--vbv-line-soft); margin-bottom: 18px;
}
.vbv-co-head h2 { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -.025em; }

/* Quiet inset, not a card: it is a receipt line, so it never competes with the
   league cards it is summarising. */
.vbv-co-summary {
  background: #F4F1EB; border-radius: 16px; padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.vbv-co-title { font-size: 17px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.vbv-co-summary .vbv-flags { margin: 0; }
.vbv-co-lines { display: flex; flex-direction: column; gap: 3px; }
.vbv-co-line { font-size: 13px; line-height: 1.4; color: var(--vbv-ink); }
.vbv-co-line:empty { display: none; }
.vbv-co-dim { color: var(--vbv-muted); font-size: 12px; }
/* One hairline, so the number being charged doesn't read as another spec line
   in the list above it. */
.vbv-co-rule { height: 1px; background: #DFD9CF; }
.vbv-co-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 14px; }
.vbv-co-amt { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.vbv-co-balance { font-size: 12px; color: var(--vbv-muted); margin-top: -4px; }

/* Picker + pay button read as one control: what you are buying, then the
   button that buys it. */
.vbv-cta-group { display: flex; flex-direction: column; gap: 12px; }
.vbv-picker-field label { margin-bottom: 5px; }

/* ---- fee options ---- */
.vbv-fees { display: flex; flex-direction: column; gap: 10px; }
.vbv-fee {
  text-align: left; cursor: pointer; background: #fff; border-radius: 14px; padding: 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 2px solid var(--vbv-line); box-shadow: none; width: 100%;
}
.vbv-fee.vbv-selected { border-color: var(--vbv-red); box-shadow: var(--vbv-ring); }
.vbv-fee-title { font-size: 14px; font-weight: 700; }
.vbv-fee-titlerow { display: flex; align-items: center; gap: 7px; }
.vbv-fee-note { display: block; font-size: 12px; color: var(--vbv-muted); margin-top: 3px; }
.vbv-fee-amt { font-size: 15px; font-weight: 800; white-space: nowrap; }
.vbv-save-badge {
  font-family: 'IBM Plex Mono', monospace; font-size: 9px; font-weight: 600; letter-spacing: .08em;
  background: var(--vbv-green); color: #fff; padding: 3px 6px; border-radius: 5px;
}

/* ---- payment block ---- */
.vbv-payment-hint { font-size: 13px; color: var(--vbv-faint); margin: 0 0 10px; }
/* Payment heading + Stripe badge, the shared checkout format's header row. */
.vbv-pay-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 12px; }
.vbv-pay-head h2 {
  margin: 0; font-family: 'IBM Plex Mono', monospace; font-size: 11px;
  font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--vbv-ink);
}
/* Stripe's official blurple asset — used as issued, never recoloured. */
.vbv-stripe-badge { height: 24px; width: auto; flex: 0 0 auto; }
/* Reserves the button height while the wallet resolves. Starts hidden, is
   unhidden just before the element mounts, and collapses again if Stripe
   reports no usable wallet (indexv-shared.js mountExpress / setWalletReady). */
.vbv-express-wrap { min-height: 48px; margin: 0 0 4px; }
.vbv-or-row {
  display: flex; align-items: center; gap: 12px; margin: 12px 0;
  font-size: 12px; color: var(--vbv-faint);
}
.vbv-or-row::before, .vbv-or-row::after {
  content: ''; flex: 1 1 auto; height: 1px; background: var(--vbv-line);
}
.vbv-or-row[hidden], .vbv-express-wrap[hidden], .vbv-pay-head[hidden] { display: none; }
#vbv-payment-element { margin: 4px 0 12px; min-height: 0; }
.vbv-paybtn {
  width: 100%; cursor: pointer; border: 0; background: #B9B3A9; color: #fff;
  padding: 18px; border-radius: 15px; font-size: 16px; font-weight: 700;
}
.vbv-paybtn.vbv-ready { background: var(--vbv-red); box-shadow: 0 12px 26px -10px rgba(206, 43, 60, .65); }
.vbv-paybtn:disabled { cursor: default; }
.vbv-paybtn.vbv-ready:disabled { opacity: .7; }
.vbv-post-note { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: var(--vbv-muted); }
.vbv-secure { margin-top: 10px; font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .06em; color: #9AA1AC; }
.vbv-spinner {
  display: inline-block; width: 14px; height: 14px; margin-right: 8px;
  border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff; border-radius: 50%;
  vertical-align: -2px; animation: vbv-spin .7s linear infinite;
}
@keyframes vbv-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .vbv-spinner { animation: none; } }

/* ---- honeypot ---- */
.vbv-hp { position: absolute; left: -9999px; top: -9999px; height: 1px; width: 1px; overflow: hidden; }

/* ---- 1a bottom sheet ---- */
.vbv-sheet-veil {
  position: fixed; inset: 0; z-index: 60; background: rgba(20, 24, 31, .55);
  display: flex; align-items: flex-end; justify-content: center;
}
.vbv-sheet {
  width: 100%; max-width: 480px; max-height: 92vh; max-height: 92dvh; overflow-y: auto;
  background: var(--vbv-cream); border-radius: 26px 26px 0 0;
  box-shadow: 0 -20px 50px -10px rgba(20, 24, 31, .5);
  -webkit-overflow-scrolling: touch;
}
.vbv-sheet-head {
  position: sticky; top: 0; z-index: 2; background: var(--vbv-cream);
  padding: 12px 18px 10px; border-bottom: 1px solid var(--vbv-line-soft);
}
.vbv-sheet-head-row { display: flex; align-items: center; justify-content: space-between; }
.vbv-sheet-title { font-size: 17px; font-weight: 700; letter-spacing: -.015em; }
.vbv-sheet-sub { font-size: 12px; color: var(--vbv-muted); margin-top: 2px; }
.vbv-sheet-close {
  border: 1px solid #DED9D1; background: #fff; cursor: pointer; width: 32px; height: 32px;
  border-radius: 50%; font-size: 16px; color: var(--vbv-muted); line-height: 1; flex: none;
}
.vbv-sheet-body { padding: 18px 18px 26px; }
.vbv-mode-strip {
  display: flex; align-items: center; justify-content: space-between;
  background: #F1EEE8; border-radius: 14px; padding: 12px 14px; margin-bottom: 20px;
}
.vbv-mode-label { font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 600; letter-spacing: .08em; }
.vbv-mode-due { font-size: 14px; font-weight: 700; }

/* ---- 1b: toggles, night strip, rows, sticky bar ---- */
.vbv-toggle2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vbv-toggle {
  cursor: pointer; border-radius: 14px; padding: 15px 12px; text-align: left;
  border: 2px solid #DED9D1; background: #fff; color: var(--vbv-ink);
}
.vbv-toggle.vbv-selected { border-color: var(--vbv-ink); background: var(--vbv-ink); color: #fff; }
.vbv-toggle-title { font-size: 15px; font-weight: 700; }
.vbv-toggle-sub { font-size: 12px; opacity: .7; margin-top: 3px; }
.vbv-nights { display: flex; gap: 7px; margin-bottom: 14px; }
.vbv-night {
  flex: 1; cursor: pointer; border-radius: 11px; padding: 11px 0; font-size: 13px; font-weight: 700;
  border: 1px solid #DED9D1; background: #fff; color: var(--vbv-muted);
}
.vbv-night.vbv-selected { border-color: var(--vbv-ink); background: var(--vbv-ink); color: #fff; }
.vbv-rows { display: flex; flex-direction: column; gap: 10px; }
.vbv-row {
  display: block; width: 100%; text-align: left; cursor: pointer; border-radius: 16px;
  padding: 14px; background: #fff; border: 2px solid var(--vbv-line); box-shadow: none;
}
.vbv-row.vbv-selected { border-color: var(--vbv-red); box-shadow: var(--vbv-ring); }
.vbv-row-flex { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.vbv-row-title { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.vbv-row-meta { font-size: 13px; color: var(--vbv-muted); margin-top: 4px; line-height: 1.4; }
.vbv-row-fine { font-size: 12px; color: var(--vbv-faint); margin-top: 3px; }
.vbv-row-price { font-size: 17px; font-weight: 800; white-space: nowrap; }
.vbv-row-tax { font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: .06em; color: var(--vbv-faint); margin-top: 3px; text-align: right; }
.vbv-row-soldout { opacity: .5; cursor: not-allowed; }
.vbv-empty {
  border: 1px dashed #DED9D1; border-radius: 14px; padding: 20px; text-align: center;
  font-size: 13px; color: var(--vbv-faint);
}
.vbv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vbv-chip { font-size: 12px; font-weight: 600; background: #F1EEE8; padding: 7px 11px; border-radius: 999px; }
.vbv-guarantee-inline { margin: 16px 0 0; border-left: 3px solid var(--vbv-navy); padding: 2px 0 2px 12px; }
.vbv-guarantee-inline .vbv-faq-q { margin-bottom: 4px; }
.vbv-guarantee-inline p { margin: 0; font-size: 13px; line-height: 1.5; color: #4A515D; }
.vbv-review { border-bottom: 1px solid var(--vbv-line-soft); padding-bottom: 14px; margin-bottom: 14px; }
.vbv-review:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.vbv-review .vbv-stars { color: #FFB300; font-size: 12px; margin-bottom: 6px; }
.vbv-review p { margin: 0 0 6px; font-size: 14px; line-height: 1.5; color: var(--vbv-ink); }
.vbv-review .vbv-attrib { color: var(--vbv-faint); }

.vbv-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; justify-content: center; pointer-events: none;
}
.vbv-bar-inner {
  pointer-events: auto; width: 100%; max-width: 480px;
  background: rgba(251, 250, 247, .97);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid #E0DBD2; padding: 12px 16px 16px;
  display: flex; align-items: center; gap: 12px;
}
.vbv-bar-text { flex: 1; min-width: 0; }
.vbv-bar-title { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vbv-bar-note { font-size: 12px; color: var(--vbv-muted); margin-top: 2px; }
.vbv-bar-cta {
  cursor: pointer; border: 0; background: var(--vbv-ink); color: #fff;
  padding: 14px 18px; border-radius: 13px; font-size: 15px; font-weight: 700; white-space: nowrap;
}
.vbv-bar-cta.vbv-ready { background: var(--vbv-red); }

/* ---- 1c: express card, steps, list rows ---- */
.vbv-express {
  margin: -18px 16px 0; position: relative; z-index: 2; background: #fff;
  border-radius: 20px; padding: 16px;
  box-shadow: 0 14px 34px -14px rgba(20, 24, 31, .35), 0 0 0 1px rgba(20, 24, 31, .06);
}
.vbv-express-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.vbv-express-title { font-size: 15px; font-weight: 700; }
.vbv-express-tag {
  font-family: 'IBM Plex Mono', monospace; font-size: 9px; font-weight: 600; letter-spacing: .1em;
  background: #F1EEE8; color: var(--vbv-muted); padding: 4px 7px; border-radius: 5px;
}
.vbv-express p { margin: 0 0 12px; font-size: 13px; line-height: 1.45; color: var(--vbv-muted); }
/* 1h (browse → stepper) top blocks — mobile gutters; widened on desktop below. */
.vbv-1h-head { padding: 30px 20px 20px; }
.vbv-1h-reviews { padding: 0 20px 8px; display: grid; gap: 14px; }
.vbv-1h-stepper { padding: 14px 20px 0; }
.vbv-wallet2 { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.vbv-wallet-dark { cursor: pointer; border: 0; background: var(--vbv-ink); color: #fff; height: 48px; border-radius: 12px; font-size: 14px; font-weight: 600; }
.vbv-wallet-light { cursor: pointer; border: 1px solid #DED9D1; background: #fff; color: var(--vbv-ink); height: 48px; border-radius: 12px; font-size: 14px; font-weight: 600; }
.vbv-trustline {
  display: flex; align-items: center; justify-content: center; gap: 10px; padding: 18px 16px 6px;
  font-family: 'IBM Plex Mono', monospace; font-size: 9px; font-weight: 500; letter-spacing: .1em; color: var(--vbv-faint);
}
.vbv-trustline .vbv-dot { color: #D6D0C6; }
.vbv-steps { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.vbv-step { flex: 1; }
.vbv-step-bar { height: 3px; border-radius: 2px; background: #E0DBD2; margin-bottom: 7px; }
.vbv-step.vbv-done .vbv-step-bar { background: var(--vbv-red); }
.vbv-step-label { font-family: 'IBM Plex Mono', monospace; font-size: 9px; font-weight: 600; letter-spacing: .1em; color: #9AA1AC; }
.vbv-step.vbv-done .vbv-step-label { color: var(--vbv-ink); }
.vbv-month {
  font-family: 'IBM Plex Mono', monospace; font-size: 9px; font-weight: 600; letter-spacing: .16em;
  color: #9AA1AC; padding: 10px 0 6px;
}
.vbv-pick {
  display: block; width: 100%; text-align: left; cursor: pointer; background: #fff;
  border-radius: 14px; padding: 13px 14px; border: 1px solid var(--vbv-line); box-shadow: none;
}
.vbv-pick.vbv-selected { border-color: var(--vbv-red); box-shadow: var(--vbv-ring); }
.vbv-pick-flex { display: flex; align-items: center; gap: 12px; }
.vbv-pick-dot { width: 20px; height: 20px; border-radius: 50%; flex: none; border: 2px solid #D6D0C6; background: #fff; }
.vbv-pick.vbv-selected .vbv-pick-dot { border-color: var(--vbv-red); background: var(--vbv-red); }
.vbv-pick-main { flex: 1; min-width: 0; }
.vbv-pick-title { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.vbv-pick-meta { font-size: 12px; color: var(--vbv-muted); margin-top: 2px; }
.vbv-pick-fine { font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: .06em; color: #A3162A; margin-top: 4px; }
.vbv-pick-prices { text-align: right; flex: none; }
.vbv-pick-team { font-size: 14px; font-weight: 800; }
.vbv-pick-solo { font-size: 11px; color: var(--vbv-faint); margin-top: 2px; }
.vbv-cta {
  width: 100%; cursor: pointer; border: 0; background: var(--vbv-red); color: #fff;
  padding: 17px; border-radius: 14px; font-size: 16px; font-weight: 700;
}
.vbv-cta:disabled, .vbv-cta.vbv-idle { background: #B9B3A9; }
.vbv-backbtn {
  width: 100%; margin-top: 10px; cursor: pointer; border: 0; background: transparent;
  color: var(--vbv-muted); padding: 8px; font-size: 13px; font-weight: 600;
}
.vbv-summary-card { background: #fff; border: 1px solid var(--vbv-line); border-radius: 16px; padding: 15px; margin-bottom: 16px; }
.vbv-summary-top { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.vbv-summary-title { font-size: 15px; font-weight: 700; }
.vbv-summary-sub { font-size: 12px; color: var(--vbv-muted); margin-top: 2px; }
.vbv-change { cursor: pointer; border: 0; background: transparent; color: var(--vbv-navy); font-size: 12px; font-weight: 700; flex: none; }
.vbv-lines { border-top: 1px solid #EDE9E2; padding-top: 10px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.vbv-line-row { display: flex; justify-content: space-between; }
.vbv-line-row .vbv-dim { color: var(--vbv-muted); }
.vbv-line-row.vbv-green { color: var(--vbv-green); }
.vbv-line-total { border-top: 1px solid #EDE9E2; padding-top: 8px; margin-top: 2px; font-size: 15px; }
.vbv-line-total .vbv-total-label { font-weight: 700; }
.vbv-line-total .vbv-total-amt { font-weight: 800; }
.vbv-quotebox { margin: 28px 20px 0; padding: 16px; background: #F1EEE8; border-radius: 16px; }
.vbv-quotebox p { margin: 0 0 6px; font-size: 14px; line-height: 1.5; font-weight: 600; color: var(--vbv-ink); }

/* ---- Stripe Link Authentication email mount ---- */
#vbv-email-mount { display: block; }

/* ---- 1a proof block (photo + guarantee + FAQ) — mobile spacing ---- */
.vbv-proof-photo { margin: 26px 18px 0; }
.vbv-proof-guarantee { margin: 14px 18px 0; }
.vbv-proof-faq { padding: 26px 18px 34px; }

/* ---- 1b layout columns: plain stacking on mobile ---- */
.vbv-cols { display: block; }

/* The box is the whole point of the format, so 1b keeps it on mobile too —
   where it matters most, since the league cards scroll away above it and the
   summary inside is then the only thing saying what is being bought. Desktop
   overrides this with the sticky rail treatment further down. */
body[data-variant="1b"] .vbv-rail-inner {
  margin: 22px 16px 0;
  background: #fff;
  border: 1px solid var(--vbv-line);
  border-radius: 20px;
  padding-bottom: 22px;
  box-shadow: 0 10px 30px -20px rgba(20, 24, 31, .35);
}

/* =========================================================================
   Variant 1d — split-screen checkout (desktop-first).
   ========================================================================= */
.vbv-split { min-height: 100vh; }
.vbv-split-left { position: relative; min-height: 300px; background: var(--vbv-ink); overflow: hidden; }
.vbv-split-media { position: absolute; inset: 0; background-size: cover; background-position: 50% 40%; opacity: .55; }
.vbv-split-shade { position: absolute; inset: 0; background: linear-gradient(200deg, rgba(20,24,31,.25) 0%, rgba(20,24,31,.85) 80%); }
.vbv-split-left-inner { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 22px 24px 26px; min-height: 300px; box-sizing: border-box; }
.vbv-split-left-main h1 { margin: 0 0 10px; font-size: 34px; line-height: .98; font-weight: 800; letter-spacing: -.035em; color: #fff; }
.vbv-split-left-main p { margin: 0; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.75); max-width: 44ch; }
.vbv-split-quote p { margin: 0 0 6px; font-size: 14px; line-height: 1.45; font-weight: 600; color: #fff; }
.vbv-split-left-foot { display: none; }
.vbv-split-right { background: var(--vbv-cream); }
.vbv-split-flow { max-width: 560px; margin: 0 auto; padding: 30px 20px 40px; }
.vbv-split-foot { font-size: 12px; color: var(--vbv-faint); border-top: 1px solid var(--vbv-line-soft); padding-top: 18px; }
.vbv-dayrow-day { font-size: 19px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.vbv-row.vbv-selected .vbv-dayrow-day { color: var(--vbv-red); }

@media (min-width: 1024px) {
  .vbv-split { display: grid; grid-template-columns: 44% 56%; }
  .vbv-split-left { position: sticky; top: 0; height: 100vh; }
  .vbv-split-left-inner { height: 100vh; padding: 36px 44px 40px; }
  .vbv-split-left-main h1 { font-size: 52px; }
  .vbv-split-left-main p { font-size: 16px; }
  .vbv-split-left-foot { display: block; }
  .vbv-split-flow { padding: 56px 48px 56px; }
}

/* =========================================================================
   Variant 1e — week grid (desktop-first). Drawer checkout on desktop.
   ========================================================================= */
.vbv-week { max-width: 1160px; margin: 0 auto; background: var(--vbv-cream); min-height: 100vh; }
.vbv-week-hero { text-align: center; padding: 40px 20px 26px; }
.vbv-week-hero h1 { margin: 0 0 12px; font-size: 40px; font-weight: 800; letter-spacing: -.035em; line-height: .98; }
.vbv-week-hero p { margin: 0 auto; max-width: 52ch; font-size: 15px; line-height: 1.5; color: var(--vbv-muted); }
.vbv-daygrid { display: flex; gap: 10px; padding: 12px 20px 8px; overflow-x: auto; }
.vbv-daytile {
  flex: 1 0 128px; cursor: pointer; text-align: left; background: #fff;
  border: 2px solid var(--vbv-line); border-radius: 18px; padding: 18px 16px;
}
.vbv-daytile.vbv-selected { border-color: var(--vbv-red); box-shadow: var(--vbv-ring); }
.vbv-daytile-day { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.vbv-daytile.vbv-selected .vbv-daytile-day { color: var(--vbv-red); }
.vbv-daytile-meta { font-size: 12px; color: var(--vbv-muted); margin-top: 6px; }
.vbv-week-cards { padding: 18px 20px 8px; }
.vbv-week-trust { padding: 26px 20px 34px; }
@media (min-width: 900px) {
  .vbv-week { border-radius: 0; }
  .vbv-week-hero { padding: 64px 20px 30px; }
  .vbv-week-hero h1 { font-size: 56px; }
  .vbv-daygrid { padding: 16px 40px 8px; overflow-x: visible; }
  .vbv-daytile { padding: 22px 20px; }
  .vbv-daytile-day { font-size: 24px; }
  .vbv-week-cards { padding: 22px 40px 8px; }
  .vbv-week-cardgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
  .vbv-week-trust { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 28px; padding: 34px 40px 44px; }
  .vbv-week-trust .vbv-review { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
  /* drawer: checkout slides in from the right */
  .vbv-veil-drawer { align-items: stretch; justify-content: flex-end; padding: 0; }
  .vbv-veil-drawer .vbv-sheet { max-width: 470px; max-height: 100vh; height: 100vh; border-radius: 0; }
}

/* =========================================================================
   Variant 1f — comparison columns (desktop-first). Modal checkout.
   ========================================================================= */
.vbv-compare { max-width: 1240px; margin: 0 auto; background: var(--vbv-cream); min-height: 100vh; }
.vbv-compare-hero { text-align: center; padding: 40px 20px 24px; }
.vbv-compare-hero h1 { margin: 0 0 12px; font-size: 40px; font-weight: 800; letter-spacing: -.035em; line-height: .98; }
.vbv-compare-hero p { margin: 0 auto 16px; max-width: 52ch; font-size: 15px; line-height: 1.5; color: var(--vbv-muted); }
.vbv-compare-scroll { padding: 10px 20px 8px; }
.vbv-compare-grid { display: flex; flex-direction: column; gap: 16px; }
.vbv-col { background: #fff; border: 1px solid var(--vbv-line); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; }
.vbv-col-day { padding: 18px 18px 14px; border-bottom: 1px solid var(--vbv-line-soft); }
.vbv-col-row { padding: 10px 18px; border-bottom: 1px solid #F1EEE8; }
.vbv-col-label { font-family: 'IBM Plex Mono', monospace; font-size: 9px; font-weight: 600; letter-spacing: .14em; color: var(--vbv-faint); margin-bottom: 3px; }
.vbv-col-val { font-size: 13px; font-weight: 600; line-height: 1.4; }
.vbv-col-cta { padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 9px; margin-top: auto; }
.vbv-compare-foot { padding: 30px 20px 40px; }
@media (min-width: 900px) {
  .vbv-compare-hero { padding: 64px 20px 30px; }
  .vbv-compare-hero h1 { font-size: 56px; }
  .vbv-compare-scroll { overflow-x: auto; padding: 10px 32px 20px; }
  .vbv-compare-grid { flex-direction: row; align-items: stretch; }
  .vbv-col { flex: 1 0 236px; max-width: 320px; }
}

/* =========================================================================
   Variant 1g — full-screen wizard (desktop-first).
   ========================================================================= */
.vbv-wiz { min-height: 100vh; background: var(--vbv-cream); display: flex; flex-direction: column; }
.vbv-wiz-top { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; }
.vbv-wiz-count { font-size: 11px; font-weight: 600; letter-spacing: .1em; color: var(--vbv-faint); }
.vbv-wiz-progress { height: 3px; background: #E0DBD2; }
.vbv-wiz-progress-fill { height: 3px; width: 25%; background: var(--vbv-red); transition: width .35s ease; }
.vbv-wiz-main { flex: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: 40px 22px 60px; box-sizing: border-box; }
.vbv-wiz-q { margin: 0 0 26px; font-size: 34px; font-weight: 800; letter-spacing: -.035em; line-height: .98; }
.vbv-wiz-days { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 26px; }
.vbv-wiz-day {
  cursor: pointer; text-align: left; background: #fff; border: 2px solid var(--vbv-line);
  border-radius: 18px; padding: 20px 22px; display: flex; align-items: baseline;
  justify-content: space-between; gap: 12px;
}
.vbv-wiz-day:hover { border-color: var(--vbv-red); box-shadow: var(--vbv-ring); }
.vbv-wiz-day-name { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.vbv-wiz-day-meta { font-size: 13px; color: var(--vbv-muted); }
.vbv-wiz-leagues { display: flex; flex-direction: column; gap: 14px; margin-bottom: 10px; }
.vbv-wiz-league { background: #fff; border: 1px solid var(--vbv-line); border-radius: 20px; padding: 20px; }
.vbv-wiz-league-name { font-size: 19px; font-weight: 700; letter-spacing: -.015em; }
.vbv-wiz-league-meta { font-size: 13px; color: var(--vbv-muted); margin-top: 5px; line-height: 1.45; }
.vbv-wiz-league-btns { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 16px; }
.vbv-wiz-choice {
  cursor: pointer; border: 2px solid var(--vbv-ink); background: #fff; color: var(--vbv-ink);
  border-radius: 14px; padding: 15px 18px; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; font-size: 15px;
}
.vbv-wiz-choice:hover:not(:disabled) { background: var(--vbv-ink); color: #fff; }
.vbv-wiz-choice:disabled { opacity: .45; cursor: not-allowed; border-color: var(--vbv-line); }
.vbv-wiz-choice-title { font-weight: 700; }
.vbv-wiz-choice-price { font-weight: 800; white-space: nowrap; }
.vbv-wiz-form { max-width: 520px; }
@media (min-width: 900px) {
  .vbv-wiz-main { padding: 72px 22px 80px; }
  .vbv-wiz-q { font-size: 52px; margin-bottom: 34px; }
  .vbv-wiz-days { grid-template-columns: 1fr 1fr; }
  .vbv-wiz-day-name { font-size: 28px; }
  .vbv-wiz-league-btns { grid-template-columns: 1fr 1fr; }
}

/* =========================================================================
   Desktop compositions (the mobile design is the source of truth below
   1024px; these recompose the same sections into full desktop layouts).
   ========================================================================= */

/* Sheet becomes a centered modal once there's room. */
@media (min-width: 640px) {
  .vbv-sheet-veil { align-items: center; padding: 32px; }
  .vbv-sheet { border-radius: 26px; max-height: 88vh; }
}

@media (min-width: 1024px) {
  body[data-variant="1a"], body[data-variant="1b"], body[data-variant="1c"], body[data-variant="1h"], body[data-variant="1i"] { padding: 0 32px; }
  body[data-variant="1a"] .vbv-page,
  body[data-variant="1b"] .vbv-page,
  body[data-variant="1i"] .vbv-page { max-width: 1140px; border-radius: 28px; }
  body[data-variant="1c"] .vbv-page,
  body[data-variant="1h"] .vbv-page { max-width: 780px; }
  .vbv-topbar { padding: 0 40px; height: 68px; }
  .vbv-topbar-name { font-size: 15px; }

  /* ---- 1a: ink hero band, copy left / photo right ---- */
  .vbv-hero-1a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; background: var(--vbv-ink); padding: 56px 48px; height: auto; }
  .vbv-hero-1a .vbv-hero-media { position: static; order: 2; border-radius: 22px; min-height: 440px; background-size: cover; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); }
  .vbv-hero-1a .vbv-hero-shade { display: none; }
  .vbv-hero-1a .vbv-hero-body { position: static; order: 1; padding: 0; }
  .vbv-hero-1a h1 { font-size: 58px; letter-spacing: -.04em; line-height: .95; }
  .vbv-hero-1a p { font-size: 17px; max-width: 46ch; }
  .vbv-hero-1a .vbv-hero-cta { display: inline-block; width: auto; padding: 16px 36px; }
  body[data-variant="1a"] .vbv-choose { padding: 48px 48px 8px !important; }
  body[data-variant="1a"] .vbv-choose .vbv-h2 { font-size: 34px; }
  body[data-variant="1a"] .vbv-choose .vbv-sub { font-size: 15px; margin-bottom: 24px; }
  body[data-variant="1a"] .vbv-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
  body[data-variant="1a"] .vbv-proof { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 24px; align-items: start; padding: 40px 48px 56px; }
  .vbv-proof-photo { grid-row: 1 / span 2; margin: 0; }
  .vbv-proof-photo .vbv-photo { height: 100% !important; min-height: 420px; }
  .vbv-proof-guarantee { margin: 0; }
  .vbv-proof-faq { padding: 0; }

  /* On mobile the hero is a photo with an overlay (media absolute). */

  /* ---- 1b (and 1i, its Apple Pay twin): main content left, sticky rail right ---- */
  body[data-variant="1b"] .vbv-page,
  body[data-variant="1i"] .vbv-page { padding-bottom: 40px !important; }
  body[data-variant="1b"] .vbv-bar,
  body[data-variant="1i"] .vbv-bar { display: none; }
  body[data-variant="1b"] .vbv-cols,
  body[data-variant="1i"] .vbv-cols { display: grid; grid-template-columns: minmax(0, 1fr) 430px; gap: 8px 36px; padding: 0 40px 24px; align-items: start; }
  .vbv-colmain-1 { grid-column: 1; grid-row: 1; }
  .vbv-colmain-2 { grid-column: 1; grid-row: 2; }
  .vbv-rail { grid-column: 2; grid-row: 1 / span 2; min-width: 0; }
  /* Same specificity as the mobile 1b box above, so the desktop margin and
     shadow actually win over it. */
  .vbv-rail-inner,
  body[data-variant="1b"] .vbv-rail-inner {
    position: sticky; top: 88px; margin: 0;
    background: #fff; border: 1px solid var(--vbv-line); border-radius: 20px;
    padding: 4px 0 24px; box-shadow: 0 18px 44px -24px rgba(20, 24, 31, .25);
  }
  .vbv-rail-inner .vbv-field input, .vbv-rail-inner .vbv-field select { background: var(--vbv-cream); }
  .vbv-rail-inner .vbv-fee { background: var(--vbv-cream); }
  body[data-variant="1b"] .vbv-page > div:nth-of-type(2) h1,
  body[data-variant="1i"] .vbv-page > div:nth-of-type(2) h1 { font-size: 44px; max-width: 22ch; }
  body[data-variant="1b"] .vbv-page > div:nth-of-type(2),
  body[data-variant="1i"] .vbv-page > div:nth-of-type(2) { padding: 40px 40px 26px; }

  /* ---- 1c: taller hero, roomier centered column ---- */
  body[data-variant="1c"] .vbv-hero { height: 400px !important; }
  body[data-variant="1c"] .vbv-hero h1 { font-size: 52px; }
  body[data-variant="1c"] .vbv-express { margin: -26px 48px 0; }
  body[data-variant="1c"] #vbv-stepper { padding: 20px 56px 0; }
  body[data-variant="1c"] .vbv-quotebox { margin: 32px 56px 0; }

  /* ---- 1h: 1b browse inside a 1c stepper — roomier centered column ---- */
  body[data-variant="1h"] .vbv-1h-head { padding: 40px 56px 24px; }
  body[data-variant="1h"] .vbv-1h-head h1 { font-size: 44px; max-width: 22ch; }
  body[data-variant="1h"] .vbv-1h-reviews { padding: 0 56px 8px; grid-template-columns: 1fr 1fr; gap: 14px 20px; }
  body[data-variant="1h"] .vbv-express { margin: 8px 56px 0; }
  body[data-variant="1h"] #vbv-stepper { padding: 20px 56px 0; }
}

/* Google reviews attribution (real reviews via cron-google-reviews.php) */
.vbv-gattr, .vbv-attrib-link { color: #6b7280; font-size: 12px; font-weight: 600; text-decoration: none; border-bottom: 1px dotted currentColor; }
.vbv-gattr:hover, .vbv-attrib-link:hover { color: #2563eb; }
.vbv-attrib-link { color: inherit; opacity: .85; }

/* ---- Conversion flags, per-player framing, deposit note, gallery ----
   (league-flags.php / indexv-shared.php helpers, 2026-07-29) */
.vbv-flags { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 4px; }
.vbv-flag { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .08em; padding: 5px 8px; border-radius: 6px; line-height: 1; }
.vbv-flag-urgent { background: #CE2B3C; color: #fff; }
.vbv-flag-badge { background: #FFF1F2; color: #CE2B3C; border: 1px solid #FECDD3; }
.vbv-flag-count { background: #14181F; color: #fff; }
.vbv-perplayer { font-size: 11px; color: #6b7280; margin-top: 4px; }
.vbv-dep-note { font-size: 12px; color: #4A515D; background: #F4F6F9; border: 1px solid #E4E8EF; border-radius: 10px; padding: 10px 12px; margin: 10px 0 4px; line-height: 1.45; }
.vbv-qa-block { padding: 22px 20px; }
.vbv-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 18px 20px 8px; }
.vbv-gallery img { width: 100%; height: 120px; object-fit: cover; border-radius: 12px; display: block; }
@media (max-width: 640px) {
  .vbv-gallery { grid-template-columns: 1fr 1fr; padding: 14px 16px 4px; }
  .vbv-gallery img { height: 96px; }
}
.vbv-topbar-links { display: flex; align-items: center; gap: 14px; }