/* ==========================================================================
   VARIANT B — 50/50 HYBRID
   --------------------------------------------------------------------------
   Qlosi branding owns the editorial half of the page: hero, quiz, product,
   next steps, testimonials, visit prep. The CONVERSION half flips to IQ Laser
   Vision's own look (white ground, Josefin Sans headings, #00AFEF cyan) so
   that the moments where a patient books or hands over their details feel
   native to their practice.

   IQLV surfaces: trust strip, booking section, discussion-guide section,
   stats CTA banner, footer.

   Load AFTER base.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Josefin Sans — IQ Laser Vision's heading font, scoped to IQLV surfaces
   only. Qlosi sections keep Montserrat.
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;600;700&display=swap');

:root {
  --iqlv-font: 'Josefin Sans', 'Montserrat', sans-serif;
}

/* --- Co-brand lockup ---------------------------------------------------- */
.cobrand__partner {
  filter: brightness(0) invert(1);
  opacity: 0.95;
}
.cobrand__divider {
  background: var(--iqlv-cyan);
  opacity: 0.85;
}
/* Header CTA adopts IQLV cyan, matching the booking sections below. */
.site-header__cta {
  background: var(--iqlv-cyan);
  border-color: var(--iqlv-cyan);
  color: var(--white);
  box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--iqlv-cyan) 80%, transparent);
}
.site-header__cta:hover {
  background: var(--iqlv-cyan-dk);
  border-color: var(--iqlv-cyan-dk);
}

/* --- Hero: keep Qlosi, but the primary (booking) CTA is IQLV cyan -------- */
/* One consistent rule across the page: if a button books an appointment,
   it is cyan. If it does anything else, it is Qlosi green. */
.hero [data-booking-trigger].btn--primary,
.quiz [data-booking-trigger].btn--primary,
.product [data-booking-trigger].btn--primary,
.next-step [data-booking-trigger].btn--primary,
.visit [data-booking-trigger].btn--primary,
.sticky-book [data-booking-trigger].btn--primary {
  background: var(--iqlv-cyan);
  border-color: var(--iqlv-cyan);
  color: var(--white);
  box-shadow: 0 10px 26px -10px color-mix(in srgb, var(--iqlv-cyan) 75%, transparent);
}
.hero [data-booking-trigger].btn--primary:hover,
.quiz [data-booking-trigger].btn--primary:hover,
.product [data-booking-trigger].btn--primary:hover,
.next-step [data-booking-trigger].btn--primary:hover,
.visit [data-booking-trigger].btn--primary:hover,
.sticky-book [data-booking-trigger].btn--primary:hover {
  background: var(--iqlv-cyan-dk);
  border-color: var(--iqlv-cyan-dk);
  box-shadow: 0 16px 34px -10px color-mix(in srgb, var(--iqlv-cyan) 85%, transparent);
}

/* The booking path card is flagged in cyan too. */
.path-card--primary {
  border-color: color-mix(in srgb, var(--iqlv-cyan) 55%, transparent);
  background: color-mix(in srgb, var(--iqlv-cyan) 9%, rgba(255, 255, 255, 0.05));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--iqlv-cyan) 25%, transparent);
}

/* --------------------------------------------------------------------------
   IQLV SURFACE 1 — TRUST STRIP (white)
   -------------------------------------------------------------------------- */
.trust {
  --trust-bg: var(--white);
  --trust-fg: var(--iqlv-ink);
  --trust-figure: var(--iqlv-cyan);
  --trust-border: rgba(0, 0, 0, 0.08);
}
.trust__lede { font-family: var(--iqlv-font); opacity: 0.62; }
.trust__lede strong { color: var(--iqlv-cyan); }
.trust__figure { font-family: var(--iqlv-font); font-weight: 700; }
.trust__label { opacity: 0.66; }

/* --------------------------------------------------------------------------
   IQLV SURFACE 2 — BOOKING SECTION (white / cyan)
   -------------------------------------------------------------------------- */
.booking {
  --booking-bg: var(--white);
  --booking-fg: var(--iqlv-ink);
  --booking-accent: var(--iqlv-cyan);
  --booking-accent-ink: var(--white);
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}
.booking::before { color: var(--iqlv-cyan); opacity: 0.11; }
.booking .section-head__headline {
  font-family: var(--iqlv-font);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.booking .section-head__sub { opacity: 0.7; }
.booking__reassurance li { opacity: 0.72; }

/* --------------------------------------------------------------------------
   IQLV SURFACE 3 — DISCUSSION GUIDE (white / cyan)
   -------------------------------------------------------------------------- */
.guide {
  --light-bg: var(--white);
  --light-fg: var(--iqlv-ink);
  --light-muted: rgba(51, 51, 51, 0.68);
  border-top: 1px solid rgba(0, 0, 0, 0.07);
}
.guide__headline {
  font-family: var(--iqlv-font);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.guide .lead-form--boxed {
  background: #f4fbfe;
  border: 1px solid color-mix(in srgb, var(--iqlv-cyan) 22%, transparent);
}
.guide .lead-form--boxed .field__input { background: var(--white); }
.guide .lead-form .btn--primary,
.guide__confirm .btn--primary {
  background: var(--iqlv-cyan);
  border-color: var(--iqlv-cyan);
  color: var(--white);
}
.guide .lead-form .btn--primary:hover,
.guide__confirm .btn--primary:hover {
  background: var(--iqlv-cyan-dk);
  border-color: var(--iqlv-cyan-dk);
}
.guide .perks__check {
  background: color-mix(in srgb, var(--iqlv-cyan) 16%, transparent);
  color: var(--iqlv-cyan-dk);
}

/* --------------------------------------------------------------------------
   IQLV SURFACE 4 — STATS CTA BANNER (cyan field)
   -------------------------------------------------------------------------- */
.cta-banner {
  background:
    radial-gradient(ellipse 80% 70% at 50% 115%, rgba(255, 255, 255, 0.22), transparent 70%),
    linear-gradient(160deg, var(--iqlv-cyan) 0%, var(--iqlv-cyan-dk) 100%);
  color: var(--white);
}
.cta-banner .eyebrow { color: rgba(255, 255, 255, 0.82); }
.cta-banner__headline { font-family: var(--iqlv-font); font-weight: 700; letter-spacing: -0.02em; }
.cta-banner__accent { color: var(--qlosi-ink); }
.cta-banner__sub strong { color: var(--white); }
/* On a cyan field the highest-contrast button is deep Qlosi purple. */
.cta-banner .btn--primary {
  background: var(--qlosi-ink);
  border-color: var(--qlosi-ink);
  color: var(--white);
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.55);
}
.cta-banner .btn--primary:hover {
  background: var(--qlosi-purple);
  border-color: var(--qlosi-purple);
}
.cta-banner .btn--ghost { border-color: rgba(255, 255, 255, 0.7); }

/* --------------------------------------------------------------------------
   IQLV SURFACE 5 — FOOTER
   -------------------------------------------------------------------------- */
.site-footer { --footer-bg: var(--iqlv-ink); }
.site-footer__partner { filter: brightness(0) invert(1); opacity: 0.95; }
.site-footer__links a:hover { color: var(--iqlv-cyan); }

/* --------------------------------------------------------------------------
   Sticky bars
   -------------------------------------------------------------------------- */
.sticky-isi__btn { background: var(--iqlv-cyan); color: var(--white); }