/*
 * Virtual Plus — main.css
 * Tailwind handles layout/spacing/color. This file covers only
 * things Tailwind utilities can't express cleanly.
 */

/* ── Smooth scroll ────────────────────────────────────────── */
html { scroll-behavior: smooth; }

/* ── Global chrome ────────────────────────────────────────── */
body {
  background-color: #EDE8DE; /* vp-paper */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Hero gradient background (default style) ───────────── */
.hero-bg {
  background: linear-gradient(130deg, #0B2753 0%, #0E3468 40%, #1A4A8A 100%);
}
.hero-glow {
  background: radial-gradient(ellipse at 62% 48%, rgba(29,77,158,0.5) 0%, transparent 58%);
}

/* ── Hero background-image variant ───────────────────────── */
/* Replaces the gradient with a full-bleed image set inline via
 * style="background-image: url(...)". A darkening overlay keeps
 * the white hero text legible over arbitrary imagery. */
.hero-bg.hero-bg--image {
  background-color: #0B2753; /* fallback while image loads */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero-bg__overlay {
  background: linear-gradient(
    130deg,
    rgba(11, 39, 83, 0.75) 0%,
    rgba(14, 52, 104, 0.55) 60%,
    rgba(26, 74, 138, 0.45) 100%
  );
}

/* ── Final CTA gradient background ───────────────────────── */
.cta-bg {
  background: linear-gradient(130deg, #C0D8F5 0%, #D8EAFB 100%);
}

/* ── Green checkmark bullet (hero + device kit) ───────────── */
.check-bullet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  background: #3FA04A;
  border-radius: 9999px;
  box-shadow: 0 2px 8px rgba(63,160,74,0.4);
}
.check-bullet--sm {
  width: 20px;
  height: 20px;
}

/* ── Benefits lead block accent border ────────────────────── */
.benefits-lead {
  border-left: 5px solid #3FA04A;
  border-radius: 0 12px 12px 0;
}

/* ── Review decorative open-quote ─────────────────────────── */
.review-quote-mark {
  font-family: Georgia, serif;
  font-size: 4rem;
  line-height: 1;
  color: #0E2E5F;
  display: block;
  text-align: center;
  margin-bottom: -1rem;
  position: relative;
  top: 0;
}

/* ── Button ──────────────────────────────────────────────────
 * Terracotta pill button (vp-coral on vp-paper). Use on <a> or <button>.
 * ─────────────────────────────────────────────────────────── */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2.5rem;
  background: #B05A36;
  color: #EDE8DE;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  border: 0;
  border-radius: 50px;
  box-shadow: 0 4px 14px rgba(176, 90, 54, 0.35);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;

  &:hover {
    background: #9A4A2C;
    box-shadow: 0 6px 18px rgba(176, 90, 54, 0.45);
  }

  &:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px #EDE8DE, 0 0 0 5px #B05A36;
  }

  &:active {
    transform: translateY(1px);
    box-shadow: 0 2px 8px rgba(176, 90, 54, 0.35);
  }
}

/* ── Gravity Forms submit → match .button ────────────────── */
.gform_wrapper.gform-theme--orbital .gform_footer input[type="submit"].gform_button,
.gform_wrapper.gform-theme--framework .gform_footer input[type="submit"].gform_button,
.gform_wrapper.gform-theme--foundation .gform_footer input[type="submit"].gform_button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1rem 2.5rem !important;
  background: #B05A36 !important;
  color: #EDE8DE !important;
  font-family: inherit !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  line-height: 1 !important;
  border: 0 !important;
  border-radius: 50px !important;
  box-shadow: 0 4px 14px rgba(176, 90, 54, 0.35) !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
}

.gform_wrapper.gform-theme--orbital .gform_footer input[type="submit"].gform_button:hover,
.gform_wrapper.gform-theme--framework .gform_footer input[type="submit"].gform_button:hover,
.gform_wrapper.gform-theme--foundation .gform_footer input[type="submit"].gform_button:hover {
  background: #9A4A2C !important;
  box-shadow: 0 6px 18px rgba(176, 90, 54, 0.45) !important;
}

.gform_wrapper.gform-theme--orbital .gform_footer input[type="submit"].gform_button:focus-visible,
.gform_wrapper.gform-theme--framework .gform_footer input[type="submit"].gform_button:focus-visible,
.gform_wrapper.gform-theme--foundation .gform_footer input[type="submit"].gform_button:focus-visible {
  outline: 0 !important;
  box-shadow: 0 0 0 3px #EDE8DE, 0 0 0 5px #B05A36 !important;
}

.gform_wrapper.gform-theme--orbital .gform_footer input[type="submit"].gform_button:active,
.gform_wrapper.gform-theme--framework .gform_footer input[type="submit"].gform_button:active,
.gform_wrapper.gform-theme--foundation .gform_footer input[type="submit"].gform_button:active {
  transform: translateY(1px) !important;
  box-shadow: 0 2px 8px rgba(176, 90, 54, 0.35) !important;
}

/* ── WYSIWYG / rich text ─────────────────────────────────────
 * Applied to any ACF wysiwyg output. Authors control content +
 * colors; this stylesheet controls everything else.
 * ─────────────────────────────────────────────────────────── */
.richtext {
  font-size: 1rem;
  line-height: 1.65;

  & > *:last-child { margin-bottom: 0; }

  & h1, & h2, & h3, & h4, & h5, & h6 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 500;
    line-height: 1.2;
    margin: 1.5rem 0 1rem;
  }
  & > :first-child { margin-top: 0; }

  & h1 { font-size: clamp(2.25rem, 4vw, 3rem); }
  & h3 { font-size: 1.5rem; }
  & h4 { font-size: 1.25rem; }
  & h5 { font-size: 1.125rem; }
  & h6 { font-size: 1rem; }

  & p { margin: 0 0 1rem; }

  & a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;

    &:hover { opacity: 0.75; }
  }

  & strong { font-weight: 600; }
  & em     { font-style: italic; }

  & ul, & ol {
    margin: 0 0 1rem;
    padding-left: 1.5rem;
  }
  & ol { list-style: decimal; }

  & ul {
    list-style: none;
    padding-left: 0;

    & li {
      position: relative;
      padding-left: 2rem;
      margin-bottom: 0.5rem;

      &::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0.3em;
        width: 1.25rem;
        height: 1.25rem;
        border-radius: 9999px;
        background: #B05A36 url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 0.75rem no-repeat;
        box-shadow: 0 2px 8px rgba(176, 90, 54, 0.4);
      }
    }
  }

  & img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 1rem 0;
  }
}

/* ── Video modal ─────────────────────────────────────────────
 * Native <dialog> mounted once in footer.php. Opened by main.js
 * when a [data-video] element is clicked.
 * ─────────────────────────────────────────────────────────── */
.vp-video-modal {
  width: min(92vw, 1100px);
  max-width: 1100px;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: #0E0E0E;
  overflow: hidden;
  color: #EDE8DE;
}

.vp-video-modal::backdrop {
  background: rgba(14, 14, 14, 0.75);
  backdrop-filter: blur(4px);
}

.vp-video-modal__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  background: #0E0E0E;
}

.vp-video-modal__iframe,
.vp-video-modal__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.vp-video-modal__close {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 0;
  background: rgba(237, 232, 222, 0.92);
  color: #0E0E0E;
  font: 600 1.5rem/1 Inter, sans-serif;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.vp-video-modal__close:hover {
  background: #EDE8DE;
  transform: scale(1.05);
}

/* ── Reveal (fade + translateY on scroll) ────────────────────
 * Apply .reveal to any block; main.js toggles .is-visible when
 * it enters the viewport. Use --i on children (or .reveal-item
 * rendered by component-reveal.php) to stagger the transition.
 * ─────────────────────────────────────────────────────────── */
.reveal .reveal-item,
.reveal.reveal-item {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.75s ease calc(var(--i, 0) * 100ms),
    transform 0.75s ease calc(var(--i, 0) * 100ms);
}

.reveal.is-visible .reveal-item,
.reveal.reveal-item.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal .reveal-item,
  .reveal.reveal-item {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

/* ── Gravity Forms — single column layout for hero lead form ── */
.gform_wrapper .gform_fields {
  grid-template-columns: 1fr !important;
}

/* ── Hero lead form (Gravity Forms override) ────────────────
 * Scoped to .vp-hero-form. Tightens row rhythm, refines inputs
 * into editorial Fraunces-italic fields with mono eyebrow labels
 * and a coral focus state. Promotes the ZIP sub-field inside
 * Gravity's address fieldset to a full-width primary field and
 * hides the default "Address" legend.
 * ─────────────────────────────────────────────────────────── */
.vp-hero-form .gform_wrapper .gform_fields {
  grid-template-columns: 1fr !important;
  grid-row-gap: 0.65rem !important;
  row-gap: 0.65rem !important;
  gap: 0.65rem !important;
  --gf-form-gap-y: 0.65rem;
}

.vp-hero-form .gform_wrapper .gfield {
  margin: 0 !important;
  padding: 0 !important;
}

.vp-hero-form .gform_wrapper .gfield_label,
.vp-hero-form .gform_wrapper legend.gfield_label,
.vp-hero-form .gform_wrapper .ginput_address_zip .gform-field-label--type-sub {
  display: block !important;
  font-family: "JetBrains Mono", monospace !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  color: #000000 !important;
  margin: 0 0 0.35rem !important;
  padding: 0 !important;
  line-height: 1.2 !important;
}

.vp-hero-form .gform_wrapper .gfield_required {
  color: #B05A36 !important;
  margin-left: 0.2em !important;
}

.vp-hero-form .gform_wrapper input[type="text"],
.vp-hero-form .gform_wrapper input[type="email"],
.vp-hero-form .gform_wrapper input[type="tel"] {
  width: 100% !important;
  padding: 0.8rem 1rem !important;
  background: rgba(237, 232, 222, 0.35) !important;
  border: 1px solid rgba(42, 40, 36, 0.18) !important;
  border-radius: 10px !important;
  font-family: "Inter", sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  color: #2A2824 !important;
  line-height: 1.25 !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease !important;
}

.vp-hero-form .gform_wrapper input[type="text"]::placeholder,
.vp-hero-form .gform_wrapper input[type="email"]::placeholder,
.vp-hero-form .gform_wrapper input[type="tel"]::placeholder {
  color: rgba(42, 40, 36, 0.45) !important;
}

.vp-hero-form .gform_wrapper input[type="text"]:focus,
.vp-hero-form .gform_wrapper input[type="email"]:focus,
.vp-hero-form .gform_wrapper input[type="tel"]:focus {
  outline: 0 !important;
  border-color: #B05A36 !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(176, 90, 54, 0.18) !important;
}

/* Address fieldset — hide legend, collapse to full-width ZIP */
.vp-hero-form .gform_wrapper .gfield--type-address {
  position: relative;
}

.vp-hero-form .gform_wrapper .gfield--type-address .gfield_label_before_complex {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.vp-hero-form .gform_wrapper .ginput_complex.has_zip,
.vp-hero-form .gform_wrapper .ginput_container_address {
  display: block !important;
  grid-template-columns: 1fr !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}

.vp-hero-form .gform_wrapper .ginput_address_zip,
.vp-hero-form .gform_wrapper span.ginput_right.address_zip {
  display: flex !important;
  flex-direction: column-reverse !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  grid-column: 1 / -1 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.vp-hero-form .gform_wrapper .gform_footer {
  margin: 0.9rem 0 0 !important;
  padding: 0 !important;
}

.vp-hero-form .gform_wrapper .gfield_description,
.vp-hero-form .gform_wrapper .gfield_validation_message {
  font-family: "JetBrains Mono", monospace !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.06em !important;
  color: #B05A36 !important;
  margin-top: 0.3rem !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

.vp-hero-form .gform_wrapper .gf_clear,
.vp-hero-form .gform_wrapper .gf_clear_complex {
  display: none !important;
}

/* ── Horizontal marquee ─────────────────────────────────────
 * Content (duplicated inline) slides 0 → -50%, looping seamlessly.
 * Parent owns overflow: hidden. main.js toggles animationPlayState
 * on .vp-marquee for the pause-on-interaction util.
 * ─────────────────────────────────────────────────────────── */
@keyframes vp-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.vp-marquee {
  animation: vp-marquee-scroll 40s linear infinite;
  will-change: transform;
}

.vp-marquee--slow {
  animation-duration: 60s;
}

.vp-marquee--fast {
  animation-duration: 32s;
}

.vp-marquee--reverse {
  animation-direction: reverse;
}

@media (max-width: 767px) {
  .vp-marquee { animation-duration: 18s; }
  .vp-marquee--slow { animation-duration: 28s; }
  .vp-marquee--fast { animation-duration: 14s; }
}

@media (prefers-reduced-motion: reduce) {
  .vp-marquee {
    animation: none;
    transform: none;
  }
}

/* Marquee window — owns overflow + optional edge fade + pause-on-hover.
   Use .vp-marquee-window--logos for the bone-tinted fade used on the
   trust band; the stacked counter-scrolling rows below Get Care For use
   the paper-tinted variant so the fade blends with its section bg. */
.vp-marquee-window {
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 6%,
    #000 94%,
    transparent 100%
  );
          mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 6%,
    #000 94%,
    transparent 100%
  );
}

@media (hover: hover) {
  .vp-marquee-window:hover .vp-marquee {
    animation-play-state: paused;
  }
}

/* ── How It Works — thumbnail + Apple-style tilt ────────────
 * .how-step-thumb    — perspective context, sized to the media area
 * .how-step-thumb__tiltable — inner frame that rotates in 3D on
 *   mousemove. JS sets --rx / --ry on this element and overrides the
 *   transition duration on move (fast) vs leave (slow spring-back).
 * .how-step-card     — the <li>; own reveal timing (slower, scale-up).
 * ─────────────────────────────────────────────────────────── */

/* Perspective wrapper — no overflow:hidden so the tiltable can float */
.how-step-thumb {
  perspective: 700px;
  perspective-origin: center center;
  height: 11rem;           /* ~h-44 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The tiltable frame: clips its own image, rotates in 3D */
.how-step-thumb__tiltable {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  overflow: hidden;
  transform:
    rotateX(var(--rx, 0deg))
    rotateY(var(--ry, 0deg));
  transition:
    transform 0.65s cubic-bezier(.15, .8, .2, 1),
    box-shadow 0.65s cubic-bezier(.15, .8, .2, 1);
  will-change: transform;
}

/* Lottie inside the new thumb (proportional scaling, unchanged logic) */
.how-step-thumb__tiltable .vp-lottie {
  height: 100%;
  width: auto;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.how-step-thumb__tiltable .vp-lottie svg {
  height: 100% !important;
  width: auto !important;
  max-width: 100% !important;
  display: block;
}

/* Slower, scale-up card reveal for this section */
.reveal .how-step-card {
  opacity: 0;
  transform: translateY(24px) scale(0.91);
  transition:
    opacity  1.2s cubic-bezier(.15, .8, .2, 1) calc(var(--i, 0) * 220ms),
    transform 1.2s cubic-bezier(.15, .8, .2, 1) calc(var(--i, 0) * 220ms);
}
.reveal.is-visible .how-step-card {
  opacity: 1;
  transform: none;
}

/* Box shadow only on pointer-tilt cards — enhances the depth illusion */
.how-step-thumb[data-anim="tilt"] .how-step-thumb__tiltable {
  box-shadow:
    0 6px 24px rgba(14, 14, 14, 0.10),
    0 1px 4px  rgba(14, 14, 14, 0.05);
}

/* ── How It Works — assemble animation ───────────────────────
 * Splits a single source image into 5 equal-width vertical
 * slices that start scattered (scale + offset) and fly in to
 * their natural positions when the card scrolls into view.
 * Each piece is one <span> absolutely stacked on top of the
 * others with background-image set to the whole source; the
 * --slice-left / --slice-right vars drive a clip-path that
 * reveals only this piece's column. The PHP template sets
 * --dx/--dy/--rot per-piece for the scattered start.
 * ─────────────────────────────────────────────────────────── */
.how-step-thumb[data-anim="assemble"] .how-step-thumb__tiltable {
  position: relative;
}

.how-step-assemble {
  position: absolute;
  inset: 0;
}

.how-step-assemble__piece {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  clip-path: inset(0 var(--slice-right, 0%) 0 var(--slice-left, 0%));
  transform: translate(var(--dx, 0), var(--dy, 0)) rotate(var(--rot, 0deg));
  opacity: 0;
  transition:
    transform 0.95s cubic-bezier(.2, .75, .25, 1) calc(var(--piece, 0) * 110ms + 350ms),
    opacity   0.6s ease                         calc(var(--piece, 0) * 110ms + 350ms);
  will-change: transform, opacity;
}

/* Scatter start positions, keyed on --piece. Each piece starts offset
 * from its resting spot; .is-visible resets everything to 0. */
.how-step-assemble__piece:nth-child(1) { --dx: -120px; --dy:  26px; --rot: -10deg; }
.how-step-assemble__piece:nth-child(2) { --dx:  -60px; --dy: -48px; --rot:   7deg; }
.how-step-assemble__piece:nth-child(3) { --dx:    0px; --dy:  56px; --rot:  -4deg; }
.how-step-assemble__piece:nth-child(4) { --dx:   60px; --dy: -48px; --rot:   7deg; }
.how-step-assemble__piece:nth-child(5) { --dx:  120px; --dy:  26px; --rot: -10deg; }

.reveal.is-visible .how-step-thumb[data-anim="assemble"] .how-step-assemble__piece {
  --dx:  0;
  --dy:  0;
  --rot: 0deg;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .how-step-assemble__piece {
    --dx: 0;
    --dy: 0;
    --rot: 0deg;
    opacity: 1;
    transition: none;
  }
}

/* ── How It Works — device-fade animation ────────────────────
 * When data-anim="device-fade", the tiltable image frame fades up
 * into view after the card has mostly finished its own reveal.
 * animation-delay inherits --i from the parent <li> so stagger
 * stays in sync with the card entrance.
 * ─────────────────────────────────────────────────────────── */
@keyframes how-step-device-fade {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Keep invisible until card reveals and delay fires */
.reveal .how-step-thumb[data-anim="device-fade"] .how-step-thumb__tiltable {
  opacity: 0;
}

.reveal.is-visible .how-step-thumb[data-anim="device-fade"] .how-step-thumb__tiltable {
  animation: how-step-device-fade 0.9s cubic-bezier(.15, .8, .2, 1) both;
  animation-delay: calc(var(--i, 0) * 220ms + 750ms);
}

@media (prefers-reduced-motion: reduce) {
  .reveal .how-step-card {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .how-step-thumb__tiltable {
    transition: none;
  }
  .reveal .how-step-thumb[data-anim="device-fade"] .how-step-thumb__tiltable,
  .reveal.is-visible .how-step-thumb[data-anim="device-fade"] .how-step-thumb__tiltable {
    opacity: 1;
    animation: none;
  }
}


/* ── Reveal variants — different entrance flavors by direction ──
 * Layer these on top of .reveal-item: add .reveal-item--left or
 * .reveal-item--right to slide from the side instead of rising.
 * ─────────────────────────────────────────────────────────── */
.reveal .reveal-item--left,
.reveal.reveal-item.reveal-item--left {
  opacity: 0;
  transform: translateX(-24px);
  transition:
    opacity 0.8s ease calc(var(--i, 0) * 100ms),
    transform 0.8s ease calc(var(--i, 0) * 100ms);
}

.reveal .reveal-item--right,
.reveal.reveal-item.reveal-item--right {
  opacity: 0;
  transform: translateX(24px);
  transition:
    opacity 0.8s ease calc(var(--i, 0) * 100ms),
    transform 0.8s ease calc(var(--i, 0) * 100ms);
}

.reveal.is-visible .reveal-item--left,
.reveal.reveal-item--left.is-visible,
.reveal.is-visible .reveal-item--right,
.reveal.reveal-item--right.is-visible {
  opacity: 1;
  transform: none;
}

.reveal .reveal-item--scale,
.reveal.reveal-item.reveal-item--scale {
  opacity: 0;
  transform: scale(0.94);
  transition:
    opacity 0.85s cubic-bezier(.2,.7,.2,1) calc(var(--i, 0) * 100ms),
    transform 0.85s cubic-bezier(.2,.7,.2,1) calc(var(--i, 0) * 100ms);
}

.reveal.is-visible .reveal-item--scale,
.reveal.reveal-item--scale.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal .reveal-item--left,
  .reveal.reveal-item.reveal-item--left,
  .reveal .reveal-item--right,
  .reveal.reveal-item.reveal-item--right,
  .reveal .reveal-item--scale,
  .reveal.reveal-item.reveal-item--scale {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

/* ── Play button — shared by video-triggering cards ──────────
 * Circular coral dot with a centered white play triangle. Used
 * by Physical Exams + Real People cards via [data-video]. Scales
 * on group-hover (Tailwind) or plain :hover on the button.
 * ─────────────────────────────────────────────────────────── */
.vp-play-btn {
  width: 64px;
  height: 64px;
  border-radius: 9999px;
  background: #B05A36;
  box-shadow: 0 6px 20px rgba(176, 90, 54, 0.45);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.vp-play-btn::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin-left: 4px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 16px solid #EDE8DE;
}

.group:hover .vp-play-btn,
button:hover > * .vp-play-btn {
  transform: scale(1.15);
  box-shadow: 0 10px 32px rgba(176, 90, 54, 0.6);
}

/* ── Hero + card video hover suite ───────────────────────────
 * Layered hover treatment used by the hero video well and the
 * Physical Exams + Real Results cards. Poster zooms, shade fades
 * in, play button grows, ripple ring pulses, corner label rises.
 * Respects prefers-reduced-motion.
 * ─────────────────────────────────────────────────────────── */
.vp-hover-zoom {
  transition: transform 0.7s cubic-bezier(.2,.7,.2,1), filter 0.4s ease;
  will-change: transform;
}

.group:hover .vp-hover-zoom,
button:hover .vp-hover-zoom {
  transform: scale(1.08);
  filter: saturate(1.1);
}

.vp-hover-shade {
  background: linear-gradient(180deg, rgba(14,14,14,0.05) 0%, rgba(14,14,14,0.35) 100%);
  opacity: 0;
  transition: opacity 0.35s ease, background 0.35s ease;
  pointer-events: none;
}

.group:hover .vp-hover-shade,
button:hover .vp-hover-shade {
  opacity: 1;
  background: linear-gradient(180deg, rgba(176,90,54,0.12) 0%, rgba(14,14,14,0.55) 100%);
}

.vp-play-btn--lg {
  width: 88px;
  height: 88px;
}

.vp-play-btn--lg::before {
  margin-left: 6px;
  border-top-width: 14px;
  border-bottom-width: 14px;
  border-left-width: 22px;
}

.vp-hover-label {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
  text-shadow: 0 1px 8px rgba(0,0,0,0.6);
}

.group:hover .vp-hover-label,
button:hover .vp-hover-label {
  opacity: 1;
  transform: none;
}

.vp-hero-video:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px #EDE8DE, 0 0 0 5px #B05A36;
}

@media (prefers-reduced-motion: reduce) {
  .vp-hover-zoom,
  .vp-hover-shade,
  .vp-hover-label {
    transition: none;
    animation: none;
  }
  .group:hover .vp-hover-zoom,
  button:hover .vp-hover-zoom { transform: none; }
}

/* ── Pricing v2 — Care Benefits panel ─────────────────────────
 * Light cream card with a featured icon row + a service list.
 * Replaces the prior dark panel layout. Most styling is Tailwind
 * utilities on the markup; this block holds only what utilities
 * cannot express cleanly.
 * ──────────────────────────────────────────────────────────── */
.vp-pricing-v2 {
  font-variant-numeric: tabular-nums;
}

/* The pricing panel's headline doesn't get the coral rule used elsewhere. */
.vp-pricing-v2-panel .richtext h2::after,
.vp-pricing-v2-panel .richtext h3::after {
  display: none;
}

.vp-pricing-v2-panel .richtext em {
  color: #E3B49D;
}

/* Service-row icon — silhouette against the dark badge. The filter recolors
 * any source artwork to pure white so the icon set can stay the same files
 * used elsewhere on the page. */
.vp-pricing-v2__icon-badge img {
  filter: brightness(0) invert(1);
}

/* Featured-card icon — aspect-ratio enforces consistent shape across the
 * four cards while the wrapper width is a fraction of the card so the icon
 * never balloons to fill the whole card. */
.vp-pricing-v2__featured-icon {
  width: 45%;
  max-width: 5rem;
}
@media (min-width: 768px) {
  .vp-pricing-v2__featured-icon {
    max-width: 5.5rem;
  }
}

.vp-pricing-v2__badge {
  flex-shrink: 0;
}

.vp-pricing-v2__badge img {
  display: block;
  max-width: 100%;
  max-height: 100%;
}

/* Horizontal row divider — flush with the row content (which is already
 * inset from the card border by the list's px-4 / md:px-8 padding) and
 * subtle enough to read as a hairline, not a hard rule. */
.vp-pricing-v2__row:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background-color: rgba(197, 187, 166, 0.45); /* vp-stone @ 45% */
}

@media (min-width: 768px) {
  .vp-pricing-v2__row {
    min-height: 4rem;
  }
}


/* Sage check badge — reused from earlier pricing card */
.vp-pricing-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 9999px;
  background: #B05A36;
  color: #EDE8DE;
  box-shadow: 0 2px 8px rgba(176, 90, 54, 0.45);
  flex-shrink: 0;
}

.vp-pricing-badge svg {
  width: 14px;
  height: 14px;
}

/* ── Virtual Care Changes — paneled content ──────────────────
 * Matches the How Different bordered panel, but narrative content
 * only (no comparison columns). Sage underline accent under H2.
 * ─────────────────────────────────────────────────────────── */
.vp-vcc-panel {
  position: relative;
}

.vp-vcc-panel__headline {
  position: relative;
  display: inline-block;
}

.vp-vcc-panel__headline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.35em;
  height: 3px;
  width: 3rem;
  background: #B05A36;
  border-radius: 2px;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.9s cubic-bezier(.2,.7,.2,1) 0.6s;
}

.vp-vcc-panel.is-visible .vp-vcc-panel__headline::after {
  transform: scaleX(1);
}

/* Drop cap inside the Virtual Care Changes panel body. The first <p>
 * inside .richtext gets an oversized italic coral initial. */
.vp-vcc-panel__body > p:first-of-type::first-letter {
  font-family: Fraunces, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 4em;
  line-height: 0.82;
  color: #B05A36;
  float: left;
  margin: 0.04em 0.12em 0 0;
  font-variation-settings: "opsz" 144;
}

@media (prefers-reduced-motion: reduce) {
  .vp-vcc-panel__headline::after {
    transform: scaleX(1);
    transition: none;
  }
}

/* ── Owl Carousel — v2 palette overrides ─────────────────── */
.vp-owl--exams .owl-stage {
  display: flex;
  align-items: center;
}

.vp-owl--exams .owl-item {
  display: flex;
}

.vp-owl--exams .owl-item .vp-exam-slide {
  height: 550px;
}

.vp-owl--exams .vp-exam-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* ── Shared carousel controls — used by every .vp-owl ──────────
 * main.js groups Owl's .owl-nav buttons + .owl-dots into a single
 * .vp-owl-controls bar after init, so every carousel renders the
 * same horizontal row: [prev]  •••  [next]. The rules below hide
 * Owl's defaults and style the unified bar.
 * ───────────────────────────────────────────────────────────── */
.vp-owl .owl-nav { display: none; }

.vp-owl .vp-owl-controls {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.vp-owl .vp-owl-controls button.owl-prev,
.vp-owl .vp-owl-controls button.owl-next {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 9999px !important;
  background: #EDE8DE !important;
  color: #0E0E0E !important;
  border: 1px solid #C5BBA6 !important;
  font: 600 1.25rem/1 Inter, sans-serif !important;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.vp-owl .vp-owl-controls button.owl-prev:hover,
.vp-owl .vp-owl-controls button.owl-next:hover {
  background: #B05A36 !important;
  color: #EDE8DE !important;
  border-color: #B05A36 !important;
  transform: translateY(-1px);
}

.vp-owl .vp-owl-controls button.owl-prev:focus-visible,
.vp-owl .vp-owl-controls button.owl-next:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px #EDE8DE, 0 0 0 5px #B05A36;
}

.vp-owl .vp-owl-controls button.disabled { opacity: 0.35; }

.vp-owl .vp-owl-controls .owl-dots {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.vp-owl .vp-owl-controls button.owl-dot {
  background: transparent;
  border: 0;
  padding: 6px;
  cursor: pointer;
  line-height: 0;
}

.vp-owl .vp-owl-controls button.owl-dot span {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 9999px;
  background: #C5BBA6;
  margin: 0 !important;
  transition: background 0.15s ease, transform 0.15s ease, width 0.2s ease;
}

.vp-owl .vp-owl-controls button.owl-dot:hover span {
  background: #8B857A;
  transform: scale(1.2);
}

.vp-owl .vp-owl-controls button.owl-dot.active span {
  background: #B05A36;
  width: 24px;
}

.vp-owl .vp-owl-controls button.owl-dot:focus-visible {
  outline: 0;
}
.vp-owl .vp-owl-controls button.owl-dot:focus-visible span {
  box-shadow: 0 0 0 3px #EDE8DE, 0 0 0 5px #B05A36;
}

.vp-owl--people .owl-stage {
  display: flex;
}

.vp-owl--people .owl-item {
  display: flex;
}

.vp-owl--people .owl-item .vp-person-slide,
.vp-owl--people .owl-item .vp-person-card {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.vp-person-card:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px #EDE8DE, 0 0 0 5px #B05A36;
}

/* ── Paper grain ─────────────────────────────────────────────
 * Fixed, full-bleed, fractional-opacity SVG noise. Gives vp-paper
 * an actual paper-grain texture instead of flat hex. Sits behind
 * all content via z-index: -1 on a <body::before>.
 * ─────────────────────────────────────────────────────────── */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.55;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.05 0 0 0 0 0.05 0 0 0 0 0.04 0 0 0 0.13 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}

/* ── Scroll progress rail ────────────────────────────────────
 * Thin coral line pinned to the top of the viewport. Fill
 * span's width is driven by main.js on scroll/resize.
 * ─────────────────────────────────────────────────────────── */
.vp-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(176, 90, 54, 0.08);
  z-index: 9999;
  pointer-events: none;
}

.vp-scroll-progress__fill {
  display: block;
  height: 100%;
  width: 0;
  background: #B05A36;
  box-shadow: 0 0 8px rgba(176, 90, 54, 0.55);
  transition: width 80ms linear;
}

/* ── Headline wipe reveal ────────────────────────────────────
 * Left-to-right clip-path reveal. Layer on top of .reveal-item;
 * the container .reveal flips .is-visible when it enters view.
 * ─────────────────────────────────────────────────────────── */
.reveal .reveal-item--wipe,
.reveal.reveal-item--wipe {
  clip-path: inset(0 100% -0.35em 0);
  opacity: 0;
  transition:
    clip-path 0.95s cubic-bezier(.2,.7,.2,1) calc(var(--i, 0) * 80ms),
    opacity 0.5s ease calc(var(--i, 0) * 80ms);
}

.reveal.is-visible .reveal-item--wipe,
.reveal.reveal-item--wipe.is-visible {
  clip-path: inset(0 0 -0.35em 0);
  opacity: 1;
}

/* ── H2 global size ──────────────────────────────────────────
 * All h2s on the page share one size. Richtext overrides removed.
 * ─────────────────────────────────────────────────────────── */
h2 {
  font-size: clamp(1.875rem, 2.5vw + 0.75rem, 3rem) !important;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* ── Section headline underline ──────────────────────────────
 * Short coral rule under an inline-wrapped headline fragment.
 * Grows from scaleX(0) after the container reveals.
 * ─────────────────────────────────────────────────────────── */
.vp-headline-underline {
  position: relative;
  display: inline-block;
  padding-bottom: 0.18em;
}

.vp-headline-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 3.25rem;
  background: #B05A36;
  border-radius: 2px;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.9s cubic-bezier(.2,.7,.2,1) 0.55s;
}

.reveal.is-visible .vp-headline-underline::after,
.reveal.is-visible.vp-headline-underline::after {
  transform: scaleX(1);
}

/* ── Richtext headline underline (WYSIWYG sections) ─────────
 * Mirrors vp-headline-underline for h2/h3 authored inside
 * .richtext blocks that live within a .reveal container.
 * ─────────────────────────────────────────────────────────── */
.reveal .richtext h2,
.reveal .richtext h3,
.reveal.richtext h2,
.reveal.richtext h3 {
  display: inline-block;
  position: relative;
  padding-bottom: 0.18em;
}

.reveal .richtext h2::after,
.reveal .richtext h3::after,
.reveal.richtext h2::after,
.reveal.richtext h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 3.25rem;
  background: #B05A36;
  border-radius: 2px;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.9s cubic-bezier(.2,.7,.2,1) 0.55s;
}

.reveal.is-visible .richtext h2::after,
.reveal.is-visible .richtext h3::after,
.reveal.is-visible.richtext h2::after,
.reveal.is-visible.richtext h3::after {
  transform: scaleX(1);
}

/* ── Parallax ambience ───────────────────────────────────────
 * Elements marked [data-parallax] are translated by main.js on
 * scroll. data-parallax holds the speed multiplier (e.g. 0.3).
 * ─────────────────────────────────────────────────────────── */
[data-parallax] {
  will-change: transform;
}

/* ── Fluid display type ──────────────────────────────────────
 * Optical-size bump for the largest Fraunces display text and
 * fluid scaling for the major hero/CTA headlines.
 * ─────────────────────────────────────────────────────────── */
.vp-display-opsz {
  font-variation-settings: "opsz" 144;
}

.vp-display-fluid {
  font-size: clamp(2.4rem, 4.5vw + 0.5rem, 4.5rem);
  line-height: 1.03;
  letter-spacing: -0.02em;
}

/* ── Drop cap ────────────────────────────────────────────────
 * Editorial enlarged first letter. Apply to a paragraph element.
 * ─────────────────────────────────────────────────────────── */
.vp-dropcap::first-letter {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 4em;
  line-height: 0.82;
  color: #B05A36;
  float: left;
  margin: 0.06em 0.12em 0 0;
  font-variation-settings: "opsz" 144;
}

/* ── Ken Burns ───────────────────────────────────────────────
 * Slow infinite pan/zoom for editorial imagery. Wrapper owns
 * overflow + rounded corners so the scaled image never bleeds.
 * ─────────────────────────────────────────────────────────── */
@keyframes vp-ken-burns {
  0%   { transform: scale(1)     translate(0, 0); }
  100% { transform: scale(1.06)  translate(-1%, -1.5%); }
}

.vp-ken-burns {
  overflow: hidden;
  border-radius: 1rem;
  line-height: 0;
}

.vp-ken-burns > img {
  width: 100%;
  height: auto;
  animation: vp-ken-burns 16s ease-in-out infinite alternate;
  will-change: transform;
  transform-origin: center center;
}

/* ── Final CTA — breathing halo ──────────────────────────────
 * Outer node keeps the JS parallax translate. Inner .vp-final-cta-halo
 * owns the visual blur + coral wash + pulse animation so the two
 * transforms don't collide.
 * ─────────────────────────────────────────────────────────── */
@keyframes vp-halo-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.55;
  }
  50% {
    transform: scale(1.08);
    opacity: 0.95;
  }
}

.vp-final-cta-halo {
  width: 100%;
  height: 100%;
  border-radius: 9999px;
  background: rgba(176, 90, 54, 0.22);
  filter: blur(64px);
  animation: vp-halo-pulse 6.5s ease-in-out infinite;
  will-change: transform, opacity;
}

/* Magnetic button — JS sets --mx / --my as pixel offsets toward cursor.
   Transition keeps the pull feeling liquid; the spring-back on mouseleave
   is the same transition, so zeroing the vars naturally settles. */
.vp-final-cta .button {
  transform: translate3d(var(--mx, 0), var(--my, 0), 0);
  transition:
    transform 0.35s cubic-bezier(.2, .9, .25, 1),
    background-color 0.15s ease,
    box-shadow 0.15s ease;
}
.vp-final-cta .button:active {
  transform: translate3d(var(--mx, 0), calc(var(--my, 0) + 1px), 0);
}

/* ── How Is VP Different — check-draw + divider ──────────────
 * JS wraps each <li> in .vp-check-draw with an inline SVG badge so
 * the check path can actually draw via stroke-dashoffset. The native
 * .richtext ::before circle is suppressed on these li's.
 *
 * The column divider is an absolute <span> spanning the middle gap,
 * draws from top→bottom via scaleY once the panel reveals.
 * ─────────────────────────────────────────────────────────── */
.vp-check-draw ul > li {
  padding-left: 2.25rem;
  position: relative;
}

.vp-check-draw ul > li::before {
  content: none !important;
}

.vp-check-draw__icon {
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 9999px;
  background: #B05A36;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 8px rgba(176, 90, 54, 0.38);
}

.vp-check-draw__icon svg {
  width: 0.82rem;
  height: 0.82rem;
  overflow: visible;
  fill: none;
  stroke: #fff;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vp-check-draw__path {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  transition: stroke-dashoffset 1s cubic-bezier(.2, .7, .3, 1);
  transition-delay: calc(var(--i, 0) * 220ms + 550ms);
}

.reveal.is-visible .vp-check-draw ul > li .vp-check-draw__path {
  stroke-dashoffset: 0;
}

/* Column divider — absolute center line on md+, draws on reveal */
.vp-how-diff {
  position: relative;
}

.vp-how-diff__divider {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(139, 133, 122, 0.55); /* vp-ash at 55% */
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 1s cubic-bezier(.2, .8, .2, 1) 0.25s;
  pointer-events: none;
}

.reveal.is-visible .vp-how-diff__divider {
  transform: scaleY(1);
}

/* ── Real People — carousel entry bounce ─────────────────────
 * When the carousel enters the viewport, each visible person card
 * fades + bounce-lifts in (springy cubic-bezier), staggered by --i
 * which main.js stamps on .owl-item.active after init. The nav
 * arrows + dots follow on a softer spring a beat later.
 *
 * The card slide wrappers pre-set opacity:0; .is-visible unlocks
 * them — so the bounce only fires once on scroll-in, not on every
 * slide change.
 * ─────────────────────────────────────────────────────────── */
.vp-owl-reveal .vp-owl--people .owl-item .vp-person-slide {
  opacity: 0;
  transform: translateY(28px) scale(0.94);
  transition:
    opacity 0.75s cubic-bezier(.5, 1.55, .4, 1),
    transform 0.75s cubic-bezier(.5, 1.55, .4, 1);
}

.vp-owl-reveal.is-visible .vp-owl--people .owl-item .vp-person-slide {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i, 0) * 140ms + 180ms);
}

.vp-owl-reveal .vp-owl--people .owl-nav,
.vp-owl-reveal .vp-owl--people .owl-dots {
  opacity: 0;
  transform: translateY(14px) scale(0.88);
  transition:
    opacity 0.55s cubic-bezier(.3, 1.45, .4, 1),
    transform 0.55s cubic-bezier(.3, 1.45, .4, 1);
}

.vp-owl-reveal.is-visible .vp-owl--people .owl-nav {
  opacity: 1;
  transform: none;
  transition-delay: 780ms;
}

.vp-owl-reveal.is-visible .vp-owl--people .owl-dots {
  opacity: 1;
  transform: none;
  transition-delay: 920ms;
}

/* ── Reduced-motion fallbacks for additions ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  .reveal .reveal-item--wipe,
  .reveal.reveal-item--wipe {
    clip-path: none;
    opacity: 1;
    transition: none;
  }
  .vp-headline-underline::after,
  .reveal .richtext h2::after,
  .reveal .richtext h3::after,
  .reveal.richtext h2::after,
  .reveal.richtext h3::after {
    transform: scaleX(1);
    transition: none;
  }
  [data-parallax] {
    transform: none !important;
  }
  .vp-ken-burns > img,
  .vp-final-cta-halo {
    animation: none;
  }
  .vp-final-cta .button {
    transform: none;
  }
  .vp-check-draw__path {
    stroke-dashoffset: 0;
    transition: none;
  }
  .vp-how-diff__divider {
    transform: scaleY(1);
    transition: none;
  }
  .vp-owl-reveal .vp-owl--people .owl-item .vp-person-slide,
  .vp-owl-reveal .vp-owl--people .owl-nav,
  .vp-owl-reveal .vp-owl--people .owl-dots {
    opacity: 1;
    transform: none;
    transition: none;
  }
}