:root {
  --blue-primary: #003DA6;
  --navy: #002060;
  --blue-mid: #3554C2;
  --gold: #FFC000;
  --gold-warm: #FFBD59;
  --ice: #D5E1F0;
  --white: #FFFFFF;
  --red: #EF391F;
  --green: #078D00;
  --gray-body: #595959;
  --gray-200: #E6EAF2;
  --gray-300: #C9D3E5;
  --ink: #0B1B3A;
  --surface-card: var(--white);
  --text-body: var(--gray-body);
  --text-on-dark: var(--white);
  --eyebrow-on-dark: var(--gold);
  --eyebrow-on-light: var(--gray-body);
  --cta-bg: var(--gold);
  --cta-bg-hover: var(--gold-warm);
  --cta-text: var(--navy);
  --cta-alt-bg: var(--blue-primary);
  --cta-alt-bg-hover: var(--blue-mid);
  --cta-alt-text: var(--white);
  --link: var(--blue-mid);
  --border-subtle: var(--gray-200);
  --border-strong: var(--gray-300);
  --border-on-dark: rgba(255,255,255,0.22);
  --font-display: 'Inter Tight', system-ui, sans-serif;
  --font-sans: 'Inter', system-ui, sans-serif;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 900;
  --fs-eyebrow: 12px;
  --ls-eyebrow: 0.14em;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(0,32,96,0.06);
  --shadow-md: 0 6px 18px rgba(0,32,96,0.10);
  --shadow-lg: 0 18px 44px rgba(0,32,96,0.16);
  --shadow-gold: 0 8px 22px rgba(255,192,0,0.34);
  --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --container: 1120px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body { margin: 0; font-family: var(--font-sans); color: var(--ink); background: var(--white); }
.vfc-burger { display: none !important; }
.vfc-confirmed-card { flex: 0 1 calc(33.333% - 16px); }
@media (max-width: 920px) {
  .vfc-navlinks { display: none !important; }
  .vfc-burger { display: inline-flex !important; }
  .vfc-about-grid, .vfc-how-grid, .vfc-role-grid, .vfc-qi-grid, .vfc-foot-grid { grid-template-columns: 1fr !important; }
  .vfc-benefit-grid { grid-template-columns: 1fr 1fr !important; }
  .vfc-session-grid { grid-template-columns: 1fr 1fr !important; }
  .vfc-win4 { grid-template-columns: 1fr 1fr !important; }
  .vfc-win3 { grid-template-columns: 1fr 1fr !important; }
  .vfc-steps-grid { grid-template-columns: 1fr !important; }
  .vfc-gallery-grid { grid-template-columns: 1fr 1fr !important; }
  .vfc-confirmed-card { flex-basis: calc(50% - 12px) !important; }
}
@media (max-width: 560px) {
  .vfc-benefit-grid, .vfc-win3, .vfc-win4, .vfc-gallery-grid, .vfc-session-grid, .vfc-steps-grid { grid-template-columns: 1fr !important; }
  .vfc-confirmed-card { flex-basis: 100% !important; }
  /* Award tiers: the amount is a fixed-width flex item, so on a narrow
     phone it leaves too little room for the label beside it. Shrink the
     figure and tighten the row instead of letting the text crowd. */
  .vfc-award-row { gap: 12px !important; padding: 16px 18px !important; }
  .vfc-award-amount { font-size: 30px !important; min-width: 112px !important; }
}

/* ── Scroll-reveal entrances ─────────────────────────────────────────
   Opt in with data-reveal on any element; the observer in
   vfc-shared.jsx adds .vfc-in the first time it scrolls into view.
   data-reveal="<n>" staggers the delay so grid children cascade. */
.vfc-reveal {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition:
    opacity 700ms var(--ease-out),
    transform 700ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.vfc-reveal.vfc-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .vfc-reveal,
  .vfc-reveal.vfc-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}