/* ============================================================
   INVESP BRAND COLOR SCHEME  (toggle: body.brand-invesp)
   Matches the LIVE invesp homepage: deep royal-blue full-bleed
   bands + a violet-purple accent for emphasis, green kept for
   positive-result metrics. Recolors the current design WITHOUT
   changing layout, so we can flip back and forth.

   Palette:
     Royal blue (bands / primary)  #283c86  ~ hsl(230 53% 34%)
     Royal blue deep (hover)                 hsl(230 55% 27%)
     Violet accent (emphasis)      #7c3aed  ~ hsl(263 75% 58%)
       on light (text-safe)                  hsl(263 60% 50%)
       on dark  (text-safe)                  hsl(263 82% 80%)
     Green results — left as-is (positive metric convention)

   Loaded LAST. Uses !important on the brand swaps so this layer is
   authoritative over the per-style theme accents.
   ============================================================ */

body.brand-invesp {
  --primary: 230 53% 34%;          /* royal blue */
  --accent-warm: 263 75% 58%;      /* violet accent */

  /* ---- ONE dark-band system (every dark surface uses these) ---- */
  --inv-band: 231 52% 25%;         /* the single deep royal navy        */
  --inv-band-edge: 233 56% 15%;    /* deeper edge for the band gradient  */
  --inv-glow: 219 92% 58%;         /* luminous blue glow for depth       */
  /* The reusable "lit deep navy" fill: the Invesp ring mark baked into the
     top-right corner as a background layer (clips at the band edge), a soft
     blue glow top-right, over a deep royal->navy gradient. Backgrounds always
     sit behind content, so no z-index juggling. IDENTICAL on every dark band. */
  --inv-band-grad:
    radial-gradient(120% 130% at 82% -15%, hsl(var(--inv-glow) / .30) 0%, transparent 46%),
    linear-gradient(162deg, hsl(var(--inv-band)) 0%, hsl(var(--inv-band-edge)) 100%);
  --inv-band-fill:
    url('assets/invesp-mark-watermark.svg') top -290px right -230px / 900px 900px no-repeat,
    var(--inv-band-grad);
}

/* (legacy ::after watermark removed — the mark now rides in --inv-band-fill) */

/* ---------- ONE lit deep-royal band system across every dark surface ---------- */
body.brand-invesp .hero {
  background: var(--inv-band-fill) !important;
  background-color: hsl(var(--inv-band)) !important;
}
/* The hero's dark band is supplied by THIS layer, so this layer must also own
   its text contrast — otherwise the headline/lede inherit the light-theme dark
   ink and render near-black on navy. Force white/light type on the band. */
body.brand-invesp .hero,
body.brand-invesp .hero h1,
body.brand-invesp .hero .h-display { color: #fff !important; }
/* Keyword eyebrow <h1> stays muted on the navy band (beats the white rule above). */
body.brand-invesp .hero h1.hero-keyword-h1 { color: hsl(220 26% 80%) !important; }
body.brand-invesp .hero .hero-lede { color: hsl(220 32% 87%) !important; }
body.brand-invesp .hero .hero-trust-item .num { color: #fff !important; }
body.brand-invesp .hero .hero-trust-item .lbl { color: hsl(220 22% 74%) !important; }
body.brand-invesp .hero .hero-trust { border-top-color: hsl(230 40% 55% / .32) !important; }
/* Nav sits as a distinctly DEEPER royal bar over the lighter hero band,
   with a visible royal hairline + soft shadow so the seam reads as
   intentional chrome instead of a same-color bleed. */
/* Nav blends seamlessly into the hero band at the top of the page: same
   deep-royal fill as the hero's top edge, no hairline, no shadow — so the
   header and hero read as one continuous surface (not two stacked boxes).
   Once the user scrolls past the hero, `.is-scrolled` re-introduces a solid
   bar + hairline + shadow so it stays legible over the white sections. */
body.brand-invesp .nav {
  background: hsl(var(--inv-band)) !important;
  border-bottom: 1px solid transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  transition: background .25s ease, box-shadow .25s ease, border-color .25s ease;
}
body.brand-invesp .nav.is-scrolled {
  background: hsl(231 52% 22% / .92) !important;
  border-bottom: 1px solid hsl(230 35% 50% / .35) !important;
  box-shadow: 0 8px 24px -16px hsl(231 60% 8% / .7) !important;
  backdrop-filter: blur(10px) !important;
}
/* Nav text must be light on the dark bar (plain style doesn't set it). */
body.brand-invesp .nav-brand,
body.brand-invesp .nav-brand-name,
body.brand-invesp .nav-links a { color: #fff !important; }
body.brand-invesp .nav-brand-sub { color: hsl(220 24% 72%) !important; }
/* The full color logo is navy + blue gradient — invert to solid white on the dark bar. */
body.brand-invesp .nav-logo-full { filter: brightness(0) invert(1); }
body.brand-invesp .nav-links a:hover { color: hsl(263 82% 84%) !important; }
/* Split testimonial: blue-left -> light-right. The Invesp mark watermark sits at
   the top of the blue half, clipped by the seam. */
@media (min-width: 861px) {
  body.brand-invesp .split-quote-split {
    background:
      url('assets/invesp-mark-watermark.svg') top -230px left -210px / 840px 840px no-repeat,
      linear-gradient(to right, hsl(var(--inv-band)) 0 50%, hsl(220 22% 96%) 50% 100%) !important;
  }
}
@media (max-width: 860px) {
  body.brand-invesp .split-quote-split .split-quote-headline {
    background:
      url('assets/invesp-mark-watermark.svg') top -70px right -80px / 260px 260px no-repeat,
      hsl(var(--inv-band)) !important;
  }
}

/* ---------- Primary buttons -> royal blue ---------- */
body.brand-invesp .btn-primary,
body.brand-invesp .hero .btn-primary,
body.brand-invesp .nav-cta .btn-primary,
body.brand-invesp .final-cta .btn-primary {
  background: hsl(230 53% 34%) !important;
  color: #fff !important;
}
body.brand-invesp .btn-primary:hover,
body.brand-invesp .hero .btn-primary:hover,
body.brand-invesp .nav-cta .btn-primary:hover,
body.brand-invesp .final-cta .btn-primary:hover {
  background: hsl(230 55% 27%) !important;
}

/* ---------- Accent (coral/indigo highlights) -> violet ---------- */
/* On light sections */
body.brand-invesp .eyebrow,
body.brand-invesp .benefit-num,
body.brand-invesp .help-num,
body.brand-invesp .step-num,
body.brand-invesp .why-num { color: hsl(263 60% 50%) !important; }
body.brand-invesp .step { border-top-color: hsl(263 75% 58%) !important; }

/* On dark sections / bands (lighter violet for contrast) */
body.brand-invesp .section#tracks .eyebrow,
body.brand-invesp .section-included .eyebrow,
body.brand-invesp .final-cta-side .eyebrow { color: hsl(263 82% 80%) !important; }

/* Hero accent pill */
body.brand-invesp .hero-eyebrow-pill {
  background: hsl(263 75% 62% / .2) !important;
  color: hsl(263 82% 84%) !important;
}
body.brand-invesp .hero-eyebrow-pill .dot { background: hsl(263 80% 70%) !important; }

/* ---------- Pricing cards (.door-*) ---------- */
body.brand-invesp .door-featured {
  border-color: hsl(263 75% 58%) !important;
  box-shadow: 0 0 0 4px hsl(263 75% 58% / .14), 0 24px 48px -24px hsl(263 75% 58% / .4) !important;
}
body.brand-invesp .door-badge { background: hsl(263 70% 56%) !important; color: #fff !important; }
body.brand-invesp .door-tier { color: hsl(263 82% 78%) !important; }

/* Legacy plan-* (harmless if absent) */
body.brand-invesp .plan-featured { border-color: hsl(263 75% 58%) !important; }
body.brand-invesp .plan-badge { background: hsl(263 70% 56%) !important; }
body.brand-invesp .plan-feature .check { background: hsl(263 75% 58% / .16) !important; color: hsl(263 60% 46%) !important; }

/* ---------- Links + interactive accents ---------- */
body.brand-invesp a:not(.btn):hover { color: hsl(263 60% 50%) !important; }
body.brand-invesp .rq-dot.is-active .rq-dot-hit,
body.brand-invesp .fquote-dot.is-active .fquote-dot-hit { background: hsl(263 70% 56%) !important; }
body.brand-invesp .rq-arrow:hover,
body.brand-invesp .split-quote-split .split-quote-arrow:hover,
body.brand-invesp .fquote-arrow:hover {
  background: hsl(263 70% 56%) !important;
  border-color: hsl(263 70% 56%) !important;
  color: #fff !important;
}

/* ---------- Animated hero scene accent -> violet ---------- */
body.brand-invesp .ahs-root {
  --ahs-accent: hsl(263 80% 68%);
  --ahs-accent-soft: hsl(263 75% 58% / .2);
}

/* ============================================================
   BAND UNIFICATION
   Every full-bleed dark surface — hero, animated hero scene, the
   "included" band, the testimonial bands, and the final CTA —
   now uses the SINGLE lit deep-royal fill (--inv-band-fill) defined
   at the top of this file. Same hue, same lightness, same glow on
   every band, so the page reads as one continuous system instead of
   a patchwork of royal-blue + near-black strips.
   ============================================================ */
body.brand-invesp {
  --inv-card-on-band: 230 40% 26%;  /* cards/insets sitting on a band */
  --inv-line-on-band: 230 35% 46%;  /* hairlines on a band            */
}

/* ---------- Animated hero scene -> identical fill to the hero band ---------- */
/* (it sits inside the hero band, so any mismatch shows as a seam) */
body.brand-invesp .ahs-root {
  background: var(--inv-band-grad) !important;
  background-color: hsl(var(--inv-band)) !important;
  --ahs-bg: hsl(var(--inv-band));
  --ahs-bg-2: hsl(var(--inv-band-edge));
  --ahs-card: hsl(var(--inv-card-on-band) / .55);
}
body.brand-invesp .ahs-thumb { background: hsl(var(--inv-card-on-band) / .55) !important; }

/* ---------- "What you get" / included band (dark only in remix/contrast) ---------- */
body.brand-invesp.style-remix .section-included,
body.brand-invesp.style-contrast .section-included {
  background: var(--inv-band-fill) !important;
  background-color: hsl(var(--inv-band)) !important;
}
body.brand-invesp.style-remix .included-results,
body.brand-invesp.style-contrast .included-results {
  background: hsl(var(--inv-card-on-band)) !important;
  border-color: hsl(var(--inv-line-on-band)) !important;
}

/* ---------- Dark testimonial band -> identical fill ---------- */
body.brand-invesp .split-quote.split-quote-band {
  background: var(--inv-band-fill) !important;
  background-color: hsl(var(--inv-band)) !important;
  box-shadow: inset 0 0 0 1px hsl(var(--inv-line-on-band) / .5) !important;
}

/* ---------- Final CTA -> identical fill (was a different, deeper blue) ---------- */
body.brand-invesp .final-cta {
  background: var(--inv-band-fill) !important;
  background-color: hsl(var(--inv-band)) !important;
}
body.brand-invesp .final-cta::before { background: hsl(var(--inv-glow) / .14) !important; }
body.brand-invesp .final-cta .btn-primary { color: #fff !important; }
body.brand-invesp .final-cta-list .check {
  background: hsl(263 75% 62% / .28) !important;
  color: hsl(263 82% 84%) !important;
}
body.brand-invesp .final-cta .eyebrow { color: hsl(263 82% 82%) !important; }

/* ---------- Misc ---------- */
body.brand-invesp ::selection { background: hsl(263 75% 58% / .25); }