/* ===========================================================================
   Boon — "Liquid Display" theme layer (v12)
   Visual redesign only: retokens the Webflow export + the boon-rebuild
   injected components for both dark (default) and light frosted modes.
   Palette from the Boon DS 3.0 brand guide:
     Primary Signal #5C4DE9 (light) / #9288F0 (dark tint)
     Frosted        #F7F1FB   Obsidian #1D1A23
     Secondary      #695F7B (light) / #A499B6 (dark)
     Boon green     #2CFF74 — status accents only
   =========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;1,8..60,400&display=swap");

/* ---------------------------------------------------------------------------
   1. Theme tokens (+ Webflow variable overrides so the export repaints itself)
   --------------------------------------------------------------------------- */
:root,
html[data-boon-theme="dark"] {
  --bp-canvas: #1d1a23;
  --bp-canvas-2: #242030;
  --bp-surface: rgba(247, 241, 251, 0.05);
  --bp-surface-strong: rgba(247, 241, 251, 0.09);
  --bp-surface-solid: #282334;
  --bp-frost: #f7f1fb;
  --bp-ink: #f7f1fb;
  --bp-body: #d6cee2;
  --bp-muted: #a499b6;
  --bp-line: rgba(247, 241, 251, 0.14);
  --bp-line-soft: rgba(247, 241, 251, 0.08);
  --bp-line-strong: rgba(247, 241, 251, 0.32);
  --bp-primary: #5c4de9;
  --bp-primary-strong: #6f61f0;
  --bp-primary-soft: #9288f0;
  --bp-primary-ink: #ffffff;
  --bp-green: #2cff74;
  --bp-glass: rgba(29, 26, 35, 0.6);
  --bp-glass-border: rgba(247, 241, 251, 0.1);
  --bp-shadow: 0 24px 70px rgba(10, 6, 20, 0.5);
  --bp-shadow-soft: 0 12px 36px rgba(10, 6, 20, 0.35);
  --bp-glow: 0 0 0 1px rgba(146, 136, 240, 0.25), 0 18px 48px rgba(92, 77, 233, 0.35);
  --bp-liquid-edge: rgba(255, 255, 255, 0.22);
  --bp-liquid-sheen: rgba(255, 255, 255, 0.08);
  --bp-cta-primary-bg: linear-gradient(135deg, #6f61f0 0%, #5747e4 52%, #857cff 100%);
  --bp-cta-primary-bg-hover: linear-gradient(135deg, #8276ff 0%, #6253f0 54%, #9a91ff 100%);
  --bp-cta-secondary-bg: rgba(247, 241, 251, 0.08);
  --bp-cta-secondary-bg-hover: rgba(247, 241, 251, 0.14);
  --bp-cta-secondary-border: rgba(247, 241, 251, 0.28);
  --bp-cta-secondary-ink: #f7f1fb;
  --bp-ease: cubic-bezier(0.625, 0.05, 0, 1);

  /* Legacy aliases used by injected components */
  --boon-ink: var(--bp-ink);
  --boon-muted: var(--bp-muted);
  --boon-line: var(--bp-line);
  --boon-paper: var(--bp-canvas);
  --boon-white: var(--bp-surface-solid);
  --boon-mint: rgba(44, 255, 116, 0.12);
  --boon-green: var(--bp-green);
  --boon-lilac: rgba(146, 136, 240, 0.18);
  --boon-coral: rgba(255, 143, 120, 0.16);
  --boon-yellow: rgba(229, 192, 105, 0.18);
  --boon-shadow: var(--bp-shadow-soft);
  --boon-ease: var(--bp-ease);

  /* Webflow palette re-mapping */
  --boon-colors--bg-black: #1d1a23;
  --boon-colors--card-bg-dark: #282334;
  --boon-colors--dark-card-bg: #242030;
  --boon-colors--card-bg-light: #a499b6;
  --boon-colors--purple: #5c4de9;
  --boon-colors--purple-2: #5c4de9;
  --boon-colors--agent-glow-bg-home: #5c4de9;
  --boon-colors--white-2: #f7f1fb;
  --boon-colors--grey: #a499b6;
  --boon-colors--pink: #c77bc0;
  --boon-colors--yellow: #e5c069;
  --white: #fdfbff;
  --grey-03: rgba(247, 241, 251, 0.16);
}

html[data-boon-theme="light"] {
  --bp-canvas: #f7f1fb;
  --bp-canvas-2: #fdfbff;
  --bp-surface: rgba(255, 255, 255, 0.62);
  --bp-surface-strong: rgba(255, 255, 255, 0.85);
  --bp-surface-solid: #ffffff;
  --bp-frost: #f7f1fb;
  --bp-ink: #1d1a23;
  --bp-body: #4a4254;
  --bp-muted: #695f7b;
  --bp-line: rgba(29, 26, 35, 0.12);
  --bp-line-soft: rgba(29, 26, 35, 0.07);
  --bp-line-strong: rgba(29, 26, 35, 0.24);
  --bp-primary: #5c4de9;
  --bp-primary-strong: #4c3ddc;
  --bp-primary-soft: #9288f0;
  --bp-primary-ink: #ffffff;
  --bp-green: #2cff74;
  --bp-glass: rgba(247, 241, 251, 0.66);
  --bp-glass-border: rgba(29, 26, 35, 0.08);
  --bp-shadow: 0 24px 70px rgba(60, 42, 112, 0.16);
  --bp-shadow-soft: 0 12px 34px rgba(60, 42, 112, 0.12);
  --bp-glow: 0 0 0 1px rgba(92, 77, 233, 0.16), 0 18px 44px rgba(92, 77, 233, 0.22);
  --bp-liquid-edge: rgba(255, 255, 255, 0.9);
  --bp-liquid-sheen: rgba(255, 255, 255, 0.62);
  --bp-cta-primary-bg: linear-gradient(135deg, #6557f4 0%, #5142e8 58%, #776cff 100%);
  --bp-cta-primary-bg-hover: linear-gradient(135deg, #7468ff 0%, #5b4cf0 54%, #8b82ff 100%);
  --bp-cta-secondary-bg: rgba(255, 255, 255, 0.72);
  --bp-cta-secondary-bg-hover: rgba(255, 255, 255, 0.92);
  --bp-cta-secondary-border: rgba(92, 77, 233, 0.42);
  --bp-cta-secondary-ink: #4c3ddc;

  --boon-ink: var(--bp-ink);
  --boon-muted: var(--bp-muted);
  --boon-line: var(--bp-line);
  --boon-paper: var(--bp-canvas);
  --boon-white: var(--bp-surface-solid);
  --boon-mint: rgba(31, 197, 94, 0.14);
  --boon-lilac: rgba(92, 77, 233, 0.1);
  --boon-coral: rgba(255, 122, 92, 0.14);
  --boon-yellow: rgba(196, 148, 32, 0.16);
  --boon-shadow: var(--bp-shadow-soft);

  --boon-colors--bg-black: #f7f1fb;
  --boon-colors--card-bg-dark: #ffffff;
  --boon-colors--dark-card-bg: #ffffff;
  --boon-colors--card-bg-light: #695f7b;
  --boon-colors--white-2: #ffffff;
  --boon-colors--grey: #695f7b;
  --white: #ffffff;
  --grey-03: rgba(29, 26, 35, 0.12);
}

/* ---------------------------------------------------------------------------
   2. Canvas, base text, focus, selection
   --------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
}

#boon-contact {
  scroll-margin-top: 96px;
}

/* Performance: isolate the heavy hero Lottie on its own compositor layer. */
.lottie-container,
.lottie_sticky-wrapper,
.lottie-welcome,
[data-animation-type="lottie"] {
  transform: translateZ(0);
  backface-visibility: hidden;
  contain: layout paint style;
}

body {
  background: var(--bp-canvas);
  color: var(--bp-body);
}

::selection {
  background: rgba(92, 77, 233, 0.35);
  color: var(--bp-ink);
}

/* Liquid lavender washes behind everything. Sections that used the flat
   "bg-black" are made transparent below so the canvas reads as one surface. */
.page-wrapper,
.main-wrapper {
  background-color: var(--bp-canvas);
}

.main-wrapper {
  background-image:
    linear-gradient(125deg, rgba(92, 77, 233, 0.22) 0%, transparent 34%, rgba(44, 255, 116, 0.04) 72%, transparent 100%),
    linear-gradient(225deg, rgba(247, 241, 251, 0.08) 0%, transparent 42%, rgba(229, 192, 105, 0.06) 100%),
    linear-gradient(180deg, rgba(29, 26, 35, 0.9), rgba(36, 32, 48, 0.94));
  background-attachment: fixed, fixed, fixed;
}

html[data-boon-theme="light"] .main-wrapper {
  background-image:
    linear-gradient(125deg, rgba(92, 77, 233, 0.14) 0%, transparent 36%, rgba(44, 255, 116, 0.05) 74%, transparent 100%),
    linear-gradient(225deg, rgba(255, 255, 255, 0.86) 0%, transparent 45%, rgba(229, 192, 105, 0.08) 100%),
    linear-gradient(180deg, #f7f1fb, #fdfbff);
}

/* Let the liquid canvas flow through sections that painted flat black. */
.section_hero-header,
.section_testimonial,
.section_why-header,
.section_why-welcome,
.section_data,
.section_demo-header,
.section_how-picture,
.section_partner-logos,
.section_why-lottie,
.nested-collection {
  background-color: transparent;
}

a,
button,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--bp-primary-soft);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   3. Typography — editorial serif display over clean sans body
   --------------------------------------------------------------------------- */
h1,
h2,
h3,
.heading-style-h1,
.heading-style-h2,
.heading-style-h3,
.heading-style-h4,
.boon-section-title,
.boon-auth-title,
.boon-legal-card h1 {
  font-family: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.heading-style-h1,
.heading-style-h2 {
  line-height: 1.04;
}

.heading-style-h5,
.heading-style-h6 {
  font-family: Inter, sans-serif;
}

body,
p,
.text-size-regular,
.text-size-small,
.text-size-medium {
  font-family: Inter, sans-serif;
}

/* Default text tones per theme (colored/dark islands re-assert below). */
html[data-boon-theme="light"] body {
  color: var(--bp-body);
}

html[data-boon-theme="light"] .text-color-white,
html[data-boon-theme="light"] .heading-style-h1,
html[data-boon-theme="light"] .heading-style-h2,
html[data-boon-theme="light"] .heading-style-h3,
html[data-boon-theme="light"] .heading-style-h4,
html[data-boon-theme="light"] .menu_link-text,
html[data-boon-theme="light"] .footer_column-heading {
  color: var(--bp-ink);
}

html[data-boon-theme="light"] .text-size-regular,
html[data-boon-theme="light"] .text-size-small,
html[data-boon-theme="light"] .text-size-medium,
html[data-boon-theme="light"] .text-size-large {
  color: var(--bp-body);
}

/* Deeper light-mode text flips: the export inherits white from .page-wrapper
   and hard-codes #fff on many utility classes. */
html[data-boon-theme="light"] .page-wrapper {
  color: var(--bp-body);
}

html[data-boon-theme="light"] :is(.caption-medium, .paragraph, .text-size-small-copy,
    .text-style-link, .text-block-2, .text-block-3, .text-block-4, .text-block-5,
    .text-block-6, .text-block-7, .text-block-8, .text-block-9, .text-span-2,
    .text-span-5, .text-span-12, .text-span-13, .text-span-15, .text-span-16,
    .text-span-17, .max-width-50, .why_agent-text, .form-text) {
  color: var(--bp-body);
}

html[data-boon-theme="light"] :is(.heading-8, .heading-9, .heading-11, .heading-16,
    .heading-17, .heading-18, .heading-19, .heading-21, .heading-22,
    .card_heading-wrapper, .centered-heading-2, .konverted-menu_link-text-2,
    .nav-menu_dropdown, .menu_all-pools) {
  color: var(--bp-ink);
}

/* Surfaces that stay indigo/obsidian keep frosted text in light mode. */
html[data-boon-theme="light"] :is(.section_cta1:not(.why), .section_cta2, .section_cta3,
    .section_cta-screenspace, .section_work-together, .mini-cta_inner,
    .footer_component, .section_footer, .footer, .x-form,
    .blog_content-wrapper:not(.card), .agent-wrapper:not(.bg-yellow),
    .step_card._2, .faq-content.active, .dropdown-panel.first, .bg-purple, .bg-color.purple),
html[data-boon-theme="light"] :is(.section_cta1:not(.why), .section_cta2, .section_cta3,
    .section_cta-screenspace, .section_work-together, .mini-cta_inner,
    .footer_component, .section_footer, .footer, .x-form,
    .blog_content-wrapper:not(.card), .agent-wrapper:not(.bg-yellow),
    .step_card._2, .faq-content.active, .dropdown-panel.first, .bg-purple, .bg-color.purple)
  :is(.text-color-white, .text-size-regular, .text-size-small, .text-size-medium,
    .text-size-large, .heading-style-h1, .heading-style-h2, .heading-style-h3,
    .heading-style-h4, .footer_column-heading, .menu_link-text, .caption-medium,
    .paragraph, .form-text, .text-block-2, .text-block-3, .text-block-4, .text-block-5,
    .text-block-6, .text-block-7, .text-block-8, .text-block-9) {
  color: #f7f1fb;
}

/* ---------------------------------------------------------------------------
   4. Navigation — liquid glass bar
   --------------------------------------------------------------------------- */
.nav_menu {
  background-color: var(--bp-glass);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  backdrop-filter: blur(28px) saturate(1.4);
  border-bottom: 1px solid var(--bp-glass-border);
  color: var(--bp-ink);
}

.konverted-menu_links {
  background-color: transparent;
}

.menu_link-text {
  color: var(--bp-ink);
}

.menu_link:hover .menu_link-text {
  color: var(--bp-primary-soft);
}

.konverted-menu_underline,
.konverted-menu_underline.fx-underline.light,
.konverted-menu_underline.darkmode {
  background-color: var(--bp-primary-soft);
}

/* Active/status dots stay Boon green per the brand system. */
.link-active,
.link-active-2,
.circle,
.circle-2 {
  background-color: var(--bp-green);
}

/* Nav dropdown panels become frosted glass. */
.konverted-menu_dropdown-wrap,
.konverted-menu_dropdown-wrapper.w--open,
.konverted-menu_dropdown-wrapper-2.w--open,
.konverted-menu_dropdown.card,
.menu_dropdown-wrap,
.nav-menu_dropdown-list.w--open {
  background-color: var(--bp-surface-solid);
  border: 1px solid var(--bp-line-soft);
  box-shadow: var(--bp-shadow-soft);
}

/* Both shipped logo variants are light-on-dark artwork; in light mode tint the
   visible wordmark to the primary indigo so it reads on the frosted canvas. */
html[data-boon-theme="light"] .konverted-menu_logo-light {
  display: none;
}

html[data-boon-theme="light"] .konverted-menu_logo-dark {
  display: block;
  filter: brightness(0) saturate(100%) invert(33%) sepia(78%) saturate(4046%) hue-rotate(242deg) brightness(95%) contrast(92%);
}

/* Decorative hero letter art ships as near-black vectors; on the frosted
   canvas they are inverted into soft white watermarks instead of heavy blobs. */
html[data-boon-theme="light"] :is(.svg-home-header, .why-hero-svg, .how-header-svg,
    .pricing-svg, .boon-library_svg, .gtm_hero-svg, .integrations_hero-img,
    .success-library-svg, .pp-hero-img) {
  filter: invert(1);
  opacity: 0.55;
}

/* Mobile hamburger lines follow the theme ink. */
.menu-icon1_line-top,
.menu-icon1_line-middle,
.menu-icon1_line-bottom,
.hambi-line {
  background-color: var(--bp-ink);
}

/* ---------------------------------------------------------------------------
   5. Theme toggle (injected by boon-rebuild.js)
   --------------------------------------------------------------------------- */
.boon-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border: 1px solid var(--bp-glass-border);
  border-radius: 999px;
  background: var(--bp-surface-strong);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  color: var(--bp-ink);
  cursor: pointer;
  padding: 0;
  transition: transform 280ms var(--bp-ease), box-shadow 280ms var(--bp-ease), color 280ms var(--bp-ease);
}

.boon-theme-toggle:hover {
  transform: translateY(-1px) rotate(8deg);
  box-shadow: var(--bp-glow);
  color: var(--bp-primary-soft);
}

.boon-theme-toggle svg {
  width: 18px;
  height: 18px;
  display: block;
}

.boon-theme-toggle .boon-icon-sun {
  display: none;
}

html[data-boon-theme="light"] .boon-theme-toggle .boon-icon-sun {
  display: block;
}

html[data-boon-theme="light"] .boon-theme-toggle .boon-icon-moon {
  display: none;
}

.boon-theme-toggle--floating {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 2147483001;
}

/* ---------------------------------------------------------------------------
   6. Buttons — indigo pill system (green becomes status-only)
   --------------------------------------------------------------------------- */
.button,
.button-load,
.previous.btn-animate-chars {
  background: var(--bp-cta-primary-bg);
  border-color: transparent;
  color: var(--bp-primary-ink);
  box-shadow: 0 12px 32px rgba(92, 77, 233, 0.28);
}

.button:hover,
.button-load:hover {
  background: var(--bp-cta-primary-bg-hover);
  border-color: transparent;
  color: var(--bp-primary-ink);
}

/* Outlined variants — glass outline that follows the theme ink. */
.button:where(.w-variant-273fc40e-df92-3e04-4c44-a70937f1f959),
.button:where(.w-variant-5c1287f4-5e65-a151-ab87-060c147ca43c) {
  background: var(--bp-cta-secondary-bg);
  border-color: var(--bp-cta-secondary-border);
  color: var(--bp-cta-secondary-ink);
  box-shadow: inset 0 1px 0 var(--bp-liquid-edge);
}

.button:where(.w-variant-273fc40e-df92-3e04-4c44-a70937f1f959):hover,
.button:where(.w-variant-5c1287f4-5e65-a151-ab87-060c147ca43c):hover {
  background: var(--bp-cta-secondary-bg-hover);
  border-color: var(--bp-primary-soft);
  color: var(--bp-cta-secondary-ink);
}

/* Staggered-character CTAs: fill turns indigo, glyphs turn white.
   (Counters the per-page inline <style> that forces #131313.) */
.btn-animate-chars {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--bp-cta-primary-bg);
  background-clip: padding-box;
  color: #ffffff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  text-decoration: none;
}

.btn-animate-chars__bg {
  position: absolute;
  inset: 0 !important;
  z-index: -1;
  border-radius: inherit;
  background: inherit;
  box-shadow: inset 0 1px 0 var(--bp-liquid-edge);
  pointer-events: none;
}

.btn-animate-chars [data-button-animate-chars] {
  position: relative;
  z-index: 1;
  color: currentColor !important;
}

.btn-animate-chars__text.submit {
  color: #ffffff !important;
}

/* Outline / outline-nav stagger buttons become liquid glass controls. */
.btn-animate-chars[data-wf--button-component--variant="outline"],
.btn-animate-chars[data-wf--button-component--variant="outline-nav"] {
  background: var(--bp-cta-secondary-bg);
  border-color: var(--bp-cta-secondary-border);
  color: var(--bp-cta-secondary-ink) !important;
  box-shadow: inset 0 1px 0 var(--bp-liquid-edge);
}

.btn-animate-chars[data-wf--button-component--variant="outline"] .btn-animate-chars__bg,
.btn-animate-chars[data-wf--button-component--variant="outline-nav"] .btn-animate-chars__bg {
  background: var(--bp-cta-secondary-bg);
}

.btn-animate-chars[data-wf--button-component--variant="outline"] [data-button-animate-chars],
.btn-animate-chars[data-wf--button-component--variant="outline-nav"] [data-button-animate-chars],
.btn-animate-chars[data-wf--button-component--variant="outline"] span,
.btn-animate-chars[data-wf--button-component--variant="outline-nav"] span {
  color: currentColor !important;
}

.btn-animate-chars__bg:where(.w-variant-f704b4dc-aee8-4f78-b284-2b6c9b779dc7) {
  background: var(--bp-cta-primary-bg);
}

.btn-animate-chars:hover {
  background: var(--bp-cta-primary-bg-hover);
}

.btn-animate-chars:hover .btn-animate-chars__bg {
  inset: 0 !important;
}

.btn-animate-chars[data-wf--button-component--variant="outline"]:hover,
.btn-animate-chars[data-wf--button-component--variant="outline-nav"]:hover {
  background: var(--bp-cta-secondary-bg-hover);
  border-color: var(--bp-primary-soft);
  color: var(--bp-cta-secondary-ink) !important;
}

.btn-animate-chars[data-wf--button-component--variant="outline"]:hover .btn-animate-chars__bg,
.btn-animate-chars[data-wf--button-component--variant="outline-nav"]:hover .btn-animate-chars__bg {
  background: var(--bp-cta-secondary-bg-hover);
}

/* Legacy yellow / blue CTAs from older embeds → indigo system. */
.button-2,
.button-2.with-icon,
.button-2.with-icon.blue,
.blog_ad,
.button_blog_wrapper,
.button-fill,
.button-fill.yellow,
.secondary_button_icon_wrapper,
.button-main,
.submit-button-2,
.button_subscribe-2,
.button-submit,
.submit {
  background: var(--bp-cta-primary-bg);
  border-color: transparent;
  color: var(--bp-primary-ink);
}

.button-2.with-icon:hover,
.button-2.with-icon.blue:hover,
.button-main:hover,
.button_subscribe-2:hover,
.submit:hover {
  background: var(--bp-cta-primary-bg-hover);
  color: var(--bp-primary-ink);
}

.button,
.btn-animate-chars,
.submit,
.button_subscribe,
.w-button {
  transition: transform 320ms var(--bp-ease), box-shadow 320ms var(--bp-ease), background-color 320ms var(--bp-ease), filter 320ms var(--bp-ease);
}

.button:hover,
.btn-animate-chars:hover,
.submit:hover,
.button_subscribe:hover,
.w-button:hover {
  transform: translateY(-2px);
  box-shadow: var(--bp-glow);
}

/* ---------------------------------------------------------------------------
   7. Webflow surfaces — frosted cards, obsidian footer
   --------------------------------------------------------------------------- */
.blog_card,
.library_item-wrapper {
  transition: transform 360ms var(--bp-ease), box-shadow 360ms var(--bp-ease);
}

.blog_card:hover,
.library_item-wrapper:hover {
  transform: translateY(-4px);
  box-shadow: var(--bp-shadow-soft);
}

.blog_item.swiper-slide,
.agent-card_slide.swiper-slide,
.integration-card.radius-20.bg-black,
.integration-card-2,
.partner-card,
.gtm-box,
.faq_accordion,
.hubspot-embed,
.price-pill,
.fixed-card.radius-8,
.step_card._1,
.event_sign-up-form {
  background-color: var(--bp-surface-solid);
  border: 1px solid var(--bp-line-soft);
}

/* "Our Data" metric cards + pricing cards: the stock Webflow outline is nearly
   invisible on the obsidian canvas, so give them a frosted fill and a stronger
   hairline that reads as a real surface in both themes. */
.data-card.radius-8,
.pricing-card.radius-8 {
  background-color: var(--bp-surface);
  border: 1px solid var(--bp-line-strong);
  border-radius: 16px;
  transition: transform 360ms var(--bp-ease), box-shadow 360ms var(--bp-ease),
    background-color 360ms var(--bp-ease), border-color 360ms var(--bp-ease);
}

.faq_accordion:hover,
.data-card.radius-8:hover,
.pricing-card.radius-8:hover {
  background-color: var(--bp-primary);
  border-color: var(--bp-primary);
}

.data-card.radius-8:hover :is(div, p, span, h1, h2, h3, h4, h5, h6),
.pricing-card.radius-8:hover :is(div, p, span, h1, h2, h3, h4, h5, h6) {
  color: #f7f1fb;
}

/* Opened case-study accordion is an indigo panel in both themes; its CMS text
   must stay frosted regardless of the light-mode flips. */
.faq-content.active :is(div, p, span, h1, h2, h3, h4, h5, h6, strong, a) {
  color: #f7f1fb;
}

/* The Webflow interaction paints the open accordion with an inline legacy
   purple; only the open card carries an inline background-color, so retarget
   it to the primary indigo and keep its text frosted. */
.faq_accordion[style*="background-color"] {
  background-color: var(--bp-primary) !important;
}

.faq_accordion[style*="background-color"] :is(div, p, span, h1, h2, h3, h4, h5, h6, strong, a) {
  color: #f7f1fb !important;
}

/* Decorative black "b" backdrop inside CTA/testimonial bands. */
html[data-boon-theme="light"] .cta-3_bg-svg {
  filter: invert(1);
  opacity: 0.5;
}

/* Obsidian footer in both themes (white footer logos stay legible). */
.footer,
.footer_component,
.section_footer {
  background-color: #171420;
  color: #f7f1fb;
  border-top: 1px solid rgba(146, 136, 240, 0.16);
}

.footer {
  background-image:
    radial-gradient(900px 480px at 90% 0%, rgba(92, 77, 233, 0.22), transparent 62%),
    radial-gradient(700px 420px at 8% 100%, rgba(146, 136, 240, 0.12), transparent 60%);
}

/* Testimonial tiles carry inline CMS colors (neon green / violet / black).
   Re-skin them as obsidian glass cards with accent bars in both themes. */
.testimonial_item {
  background-color: #262130 !important;
  border: 1px solid rgba(247, 241, 251, 0.1);
  border-radius: 18px;
  position: relative;
  overflow: hidden;
}

.testimonial_item::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--bp-primary-soft);
}

.testimonial_item:nth-child(3n + 1)::before { background: var(--bp-green); }
.testimonial_item:nth-child(3n)::before { background: #e5c069; }

.testimonial_item :is(div, p, span, h1, h2, h3, h4, h5, h6, strong, a) {
  color: #f7f1fb !important;
}

/* Signal tags: frosted chips instead of flat black/green pills. */
.tag_item,
.tag_item:nth-child(odd),
.tag_item:nth-child(2n) {
  background-color: var(--bp-surface-strong);
  border: 1px solid var(--bp-line-soft);
  color: var(--bp-ink);
}

.tag_item.highlighted {
  background-color: var(--bp-primary);
  border-color: var(--bp-primary);
  color: #ffffff;
}

/* Library/GTM alternating tiles: swap neon green fills for the indigo system
   (both variants keep light text, so both surfaces stay deep-toned). */
.library_item-wrapper:nth-child(odd) {
  background-color: var(--bp-primary);
}

.library_item-wrapper:nth-child(2n) {
  background-color: #262130;
  border: 1px solid rgba(247, 241, 251, 0.1);
}

.library_item-wrapper:nth-child(2n) :is(div, p, span, h3, h4, strong) {
  color: #f7f1fb;
}

/* Deep-purple embeds (blog subscribe banner) stay obsidian in both themes. */
.x-form {
  background-color: #221c30;
}

/* Feature tiles: green is reserved for status accents, so the neon tile joins
   the indigo system (icon tiles on why-boon / how-it-works). */
.globe-card.radius-8.background-green {
  background-color: var(--bp-primary);
}

body.boon-enhanced .globe-card.radius-8 {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(247, 241, 251, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 24px 58px rgba(10, 6, 20, 0.24);
  transition: transform 320ms var(--bp-ease), box-shadow 320ms var(--bp-ease), filter 320ms var(--bp-ease);
}

body.boon-enhanced .globe-card.radius-8::before,
body.boon-enhanced .globe-card.radius-8::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

body.boon-enhanced .globe-card.radius-8::before {
  inset: -45% -25% auto auto;
  width: 70%;
  height: 70%;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.42), transparent 62%);
  filter: blur(8px);
}

body.boon-enhanced .globe-card.radius-8::after {
  inset: auto auto -38% -18%;
  width: 68%;
  height: 68%;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(44, 255, 116, 0.24), transparent 64%);
  filter: blur(12px);
}

body.boon-enhanced .globe-card.radius-8:hover {
  transform: translateY(-4px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 30px 70px rgba(10, 6, 20, 0.32);
}

body.boon-enhanced .globe-card.radius-8.background-green {
  background:
    radial-gradient(circle at 20% 14%, rgba(255, 255, 255, 0.45), transparent 26%),
    linear-gradient(135deg, #2cff74 0%, #55dbc1 42%, #5c4de9 100%) !important;
  color: #171420 !important;
  border-color: rgba(255, 255, 255, 0.38);
}

body.boon-enhanced .globe-card.radius-8.background-purple {
  background:
    radial-gradient(circle at 76% 18%, rgba(247, 241, 251, 0.36), transparent 28%),
    linear-gradient(135deg, #6f61f0 0%, #5c4de9 50%, #ff8f78 100%) !important;
  color: #ffffff !important;
  border-color: rgba(247, 241, 251, 0.22);
}

body.boon-enhanced .globe-card.radius-8.background-white {
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.58), transparent 27%),
    linear-gradient(135deg, #ff8f78 0%, #e5c069 48%, #2cff74 100%) !important;
  color: #171420 !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
}

body.boon-enhanced .globe-card.radius-8 :is(.heading-style-h6, div, span) {
  color: currentColor !important;
}

body.boon-enhanced .globe-card.radius-8 svg,
body.boon-enhanced .globe-card.radius-8 svg * {
  color: currentColor !important;
  stroke: currentColor !important;
}

body.boon-enhanced .globe-card.radius-8 svg [fill]:not([fill="none"]) {
  fill: currentColor !important;
}

/* The "signals" artwork ships with a baked neon-green fill; rotate it into the
   indigo family so illustrations follow the brand palette. */
.challenge_image {
  filter: hue-rotate(107deg) saturate(0.72) brightness(0.97);
}

/* Neon-green utility surface (e.g. the Zapier integration card) becomes a
   frosting panel — readable with its dark text in both themes. */
.bg-green {
  background-color: var(--bp-frost);
}

/* The snapshot/contact hero ships black ring art as a background-image; drop
   it on the frosted canvas so the obsidian heading stays readable. */
html[data-boon-theme="light"] .section_contact-header {
  background-image: none;
}

.globe-card.radius-8.background-white {
  background-color: var(--bp-surface-strong);
  border: 1px solid var(--bp-line-soft);
}

.footer_social-rounded {
  background-color: rgba(247, 241, 251, 0.08);
}

.footer_social-rounded:hover {
  background-color: var(--bp-primary);
}

/* Light editorial panels (blog headers, author boxes) stay frosted. */
.blog_header-2,
.author-box {
  background-color: var(--bp-canvas-2);
}

html[data-boon-theme="dark"] .blog_header-2,
html[data-boon-theme="dark"] .author-box {
  background-color: #f7f1fb;
}

.popup_layer {
  background-color: rgba(19, 14, 28, 0.8);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* ---------------------------------------------------------------------------
   8. Injected boon-* sections (contact, forms, FAQ, library, demo…)
   --------------------------------------------------------------------------- */
.boon-section {
  position: relative;
  padding: clamp(72px, 8vw, 118px) 0;
  color: var(--bp-ink);
  background: transparent;
}

.boon-section--dark {
  background: var(--bp-canvas-2);
  color: var(--bp-ink);
}

.boon-shell {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
}

.boon-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  color: var(--bp-muted);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.boon-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--bp-green);
  box-shadow: 0 0 10px rgba(44, 255, 116, 0.55);
}

.boon-section h2,
.boon-section h3 {
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--bp-ink);
}

.boon-section p {
  margin: 0;
  color: var(--bp-muted);
  line-height: 1.6;
}

.boon-section-title {
  max-width: 780px;
  font-size: clamp(2.2rem, 4.6vw, 4.4rem);
  line-height: 1.05;
  font-weight: 500;
}

.boon-section-lede {
  max-width: 680px;
  margin-top: 18px !important;
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  color: var(--bp-body) !important;
}

.boon-grid {
  display: grid;
  gap: 24px;
}

.boon-grid--2 {
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
}

.boon-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.boon-card {
  border: 1px solid var(--bp-line-soft);
  border-radius: 18px;
  background: var(--bp-surface);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  box-shadow: var(--bp-shadow-soft);
  transition: transform 360ms var(--bp-ease), box-shadow 360ms var(--bp-ease), border-color 360ms var(--bp-ease);
}

.boon-card:hover {
  transform: translateY(-4px);
  border-color: rgba(146, 136, 240, 0.4);
  box-shadow: var(--bp-shadow);
}

.boon-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.boon-action,
.boon-secondary-action {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0 24px;
  border: 1px solid var(--bp-primary);
  font-weight: 600;
  line-height: 1;
  transition: transform 300ms var(--bp-ease), box-shadow 300ms var(--bp-ease), background 300ms var(--bp-ease);
}

.boon-action {
  background: var(--bp-primary);
  color: var(--bp-primary-ink);
}

.boon-action:hover {
  background: var(--bp-primary-strong);
}

.boon-secondary-action {
  background: transparent;
  border-color: var(--bp-line);
  color: var(--bp-ink);
}

.boon-secondary-action:hover {
  border-color: var(--bp-primary-soft);
}

.boon-action:hover,
.boon-secondary-action:hover {
  transform: translateY(-2px);
  box-shadow: var(--bp-glow);
}

/* Hidden state only once JS has booted, so static content stays readable without JS. */
body.boon-enhanced .boon-reveal {
  opacity: 0;
  transform: translateY(28px);
}

.boon-reveal {
  transition: opacity 700ms var(--bp-ease), transform 700ms var(--bp-ease);
}

body.boon-enhanced .boon-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Product demo (index) ------------------------------------------------- */
.boon-demo {
  overflow: hidden;
}

.boon-demo__head {
  display: flex;
  justify-content: space-between;
  gap: 28px;
  align-items: end;
  margin-bottom: 38px;
}

.boon-demo__steps {
  display: grid;
  gap: 12px;
}

.boon-step {
  width: 100%;
  border: 1px solid var(--bp-line-soft);
  border-left: 3px solid transparent;
  border-radius: 14px;
  background: var(--bp-surface);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  padding: 18px;
  color: var(--bp-ink);
  text-align: left;
  cursor: pointer;
  transition: border-color 280ms var(--bp-ease), background 280ms var(--bp-ease), transform 280ms var(--bp-ease);
}

.boon-step:hover {
  transform: translateX(2px);
}

.boon-step[aria-selected="true"] {
  border-color: rgba(146, 136, 240, 0.35);
  border-left-color: var(--bp-primary);
  background: var(--bp-surface-strong);
  box-shadow: var(--bp-shadow-soft);
}

.boon-step strong {
  display: block;
  margin-bottom: 6px;
  font-size: 1rem;
  color: var(--bp-ink);
}

.boon-step span {
  display: block;
  color: var(--bp-muted);
  font-size: 0.94rem;
  line-height: 1.45;
}

/* Browser chrome around product shots */
.boon-browser {
  overflow: hidden;
  border: 1px solid var(--bp-line-soft);
  border-radius: 16px;
  background: var(--bp-surface-solid);
  box-shadow: var(--bp-shadow);
}

.boon-browser__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  border-bottom: 1px solid var(--bp-line-soft);
  background: var(--bp-surface-strong);
}

.boon-browser__bar span {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--bp-line);
}

.boon-browser__bar span:nth-child(1) {
  background: #ff8f78;
}

.boon-browser__bar span:nth-child(2) {
  background: #e5c069;
}

.boon-browser__bar span:nth-child(3) {
  background: var(--bp-green);
}

.boon-browser__image {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--bp-canvas-2);
}

.boon-browser__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  opacity: 1;
  transition: opacity 240ms ease;
}

.boon-browser__caption {
  display: grid;
  gap: 8px;
  padding: 20px;
  background: var(--bp-surface-solid);
  border-top: 1px solid var(--bp-line-soft);
}

.boon-browser__caption strong {
  font-size: 1.08rem;
  color: var(--bp-ink);
}

.boon-snippets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.boon-snippet {
  overflow: hidden;
  border: 1px solid var(--bp-line-soft);
  border-radius: 14px;
  background: var(--bp-surface);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: transform 300ms var(--bp-ease), box-shadow 300ms var(--bp-ease);
}

.boon-snippet:hover {
  transform: translateY(-3px);
  box-shadow: var(--bp-shadow-soft);
}

.boon-snippet img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
}

.boon-snippet span {
  display: block;
  padding: 12px 14px;
  color: var(--bp-muted);
  font-size: 0.9rem;
}

/* --- Approved homepage refresh ------------------------------------------- */
body.boon-home-refresh-page :is(.section_welcome, .section_meet,
    .section_cta-screenspace, .section_blog-home, .section_boon-library,
    .section_cta1, .section_testimonial, .section_cta2) {
  display: none !important;
}

.boon-home-refresh .boon-section {
  scroll-margin-top: 96px;
}

.boon-home-video {
  padding-top: clamp(56px, 7vw, 96px);
}

.boon-home-video__grid,
.boon-problem-grid,
.boon-buyer-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: clamp(28px, 5vw, 68px);
  align-items: center;
}

.boon-home-video .boon-button-row {
  margin-top: 28px;
}

.boon-home-proof-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 28px 0;
}

.boon-home-proof-row span {
  min-height: 92px;
  border: 1px solid var(--bp-line-soft);
  border-radius: 14px;
  background: var(--bp-surface);
  padding: 14px;
  color: var(--bp-muted);
  font-size: 0.9rem;
  line-height: 1.42;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.boon-home-proof-row strong {
  display: block;
  margin-bottom: 4px;
  color: var(--bp-ink);
  font-size: 0.98rem;
}

.boon-video-card {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: #0b0d12;
  box-shadow: var(--bp-shadow);
}

.boon-video-card video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #0b0d12;
}

.boon-video-play {
  position: absolute;
  left: 18px;
  bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  border: 1px solid rgba(247, 241, 251, 0.2);
  border-radius: 999px;
  background: rgba(29, 26, 35, 0.72);
  color: #ffffff;
  padding: 0 16px;
  font-weight: 700;
  cursor: pointer;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.boon-video-play span {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 999px;
  background: var(--bp-green);
  color: #111111;
  font-size: 0.72rem;
}

.boon-video-play[hidden] {
  display: none;
}

.boon-home-problem {
  border-top: 1px solid var(--bp-line-soft);
  border-bottom: 1px solid var(--bp-line-soft);
}

.boon-problem-grid {
  align-items: start;
}

.boon-problem-list {
  display: grid;
  gap: 14px;
}

.boon-problem-list article {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 16px;
  border: 1px solid var(--bp-line-soft);
  border-radius: 18px;
  background: var(--bp-surface);
  padding: 18px;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: var(--bp-shadow-soft);
}

.boon-problem-list article > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 999px;
  background: rgba(92, 77, 233, 0.14);
  color: var(--bp-primary-soft);
  font-size: 0.78rem;
  font-weight: 800;
}

.boon-problem-list h3,
.boon-buyer-steps h3 {
  margin-bottom: 8px;
  font-size: 1.12rem;
}

.boon-home-trust__cards,
.boon-pricing-grid {
  margin-top: 34px;
}

.boon-home-trust-card {
  min-height: 236px;
  padding: 26px;
}

.boon-home-trust-card p {
  margin-top: 12px;
}

.boon-mode-head {
  display: flex;
  justify-content: space-between;
  gap: 28px;
  align-items: end;
  margin-bottom: 36px;
}

.boon-mode-tabs {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(112px, 1fr));
  gap: 4px;
  flex: 0 0 auto;
  border: 1px solid var(--bp-line-soft);
  border-radius: 999px;
  background: var(--bp-surface);
  padding: 4px;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.boon-mode-tabs button {
  min-height: 42px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--bp-muted);
  font-weight: 700;
  cursor: pointer;
}

.boon-mode-tabs button[aria-selected="true"] {
  background: var(--bp-primary);
  color: var(--bp-primary-ink);
  box-shadow: var(--bp-shadow-soft);
}

.boon-mode-panel {
  display: none;
}

.boon-mode-panel.is-active {
  display: block;
}

.boon-seller-intro {
  max-width: 720px;
  margin-bottom: 26px;
}

.boon-seller-intro h3 {
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
}

.boon-seller-workspace {
  border: 1px solid var(--bp-line-soft);
  border-radius: 20px;
  background: var(--bp-surface);
  padding: clamp(18px, 2.6vw, 30px);
  box-shadow: var(--bp-shadow-soft);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.boon-seller-workspace__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  grid-template-areas:
    "stage info1"
    "info2 thumbs";
  gap: clamp(16px, 2.4vw, 26px);
  align-items: center;
}

.boon-seller-workspace__grid > * {
  min-width: 0;
}

.boon-seller-workspace__grid .boon-product-frame {
  grid-area: stage;
}

.boon-seller-workspace__grid .boon-seller-thumbs {
  grid-area: thumbs;
  margin-top: 0;
}

.boon-seller-info {
  padding: 6px 4px;
}

.boon-seller-info--a {
  grid-area: info1;
}

.boon-seller-info--b {
  grid-area: info2;
}

.boon-seller-info h3 {
  font-size: 1.05rem;
}

.boon-seller-info p {
  margin-top: 8px;
  color: var(--bp-body);
  font-size: 0.95rem;
  line-height: 1.5;
}

.boon-seller-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 24px;
}

.boon-seller-flow-card {
  border: 1px solid var(--bp-line-soft);
  border-radius: 16px;
  background: var(--bp-surface);
  padding: 18px;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: var(--bp-shadow-soft);
}

.boon-seller-flow-card span {
  display: inline-flex;
  margin-bottom: 12px;
  color: var(--bp-primary-soft);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.boon-seller-flow-card h3 {
  font-size: 1rem;
}

.boon-seller-flow-card p {
  margin-top: 8px;
  font-size: 0.92rem;
  line-height: 1.48;
}

.boon-product-frame {
  overflow: hidden;
  margin: 0;
  border-radius: 18px;
  background: #0b0f16;
  box-shadow: var(--bp-shadow);
}

.boon-product-frame img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9.08;
  object-fit: cover;
  object-position: top left;
}

.boon-product-frame figcaption {
  display: grid;
  gap: 5px;
  padding: 16px 18px;
  border-top: 1px solid rgba(247, 241, 251, 0.08);
  background: #121824;
}

.boon-product-frame figcaption strong {
  color: #ffffff;
}

.boon-product-frame figcaption span {
  color: rgba(247, 241, 251, 0.68);
  font-size: 0.93rem;
  line-height: 1.42;
}

.boon-seller-thumbs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.boon-seller-thumbs button {
  overflow: hidden;
  border: 1px solid var(--bp-line-soft);
  border-radius: 12px;
  background: var(--bp-surface);
  padding: 0;
  cursor: pointer;
  box-shadow: var(--bp-shadow-soft);
}

.boon-seller-thumbs button[aria-pressed="true"] {
  border-color: var(--bp-primary-soft);
  box-shadow: var(--bp-glow);
}

.boon-seller-thumbs img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: top left;
}

.boon-buyer-grid {
  align-items: start;
}

.boon-buyer-steps {
  border: 1px solid var(--bp-line-soft);
  border-radius: 18px;
  background: var(--bp-surface);
  padding: clamp(22px, 3vw, 30px);
  box-shadow: var(--bp-shadow-soft);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.boon-buyer-steps ol {
  display: grid;
  gap: 12px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: buyer-step;
}

.boon-buyer-steps li {
  position: relative;
  min-height: 40px;
  padding: 8px 0 8px 48px;
  color: var(--bp-body);
  counter-increment: buyer-step;
}

.boon-buyer-steps li::before {
  content: counter(buyer-step);
  position: absolute;
  left: 0;
  top: 2px;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 999px;
  background: rgba(92, 77, 233, 0.14);
  color: var(--bp-primary-soft);
  font-size: 0.82rem;
  font-weight: 800;
}

.boon-mode-copy {
  max-width: 620px;
  margin: 10px 0 18px !important;
}

.boon-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.boon-price-card {
  display: flex;
  min-height: 390px;
  flex-direction: column;
  gap: 22px;
  justify-content: space-between;
  padding: 26px;
}

.boon-price-card.is-featured {
  border-color: rgba(146, 136, 240, 0.42);
  background: var(--bp-surface-strong);
}

.boon-price-card.is-featured .boon-price-number {
  font-size: clamp(1.75rem, 2.9vw, 2.55rem);
}

.boon-price-card p {
  margin-top: 10px;
}

.boon-price-number {
  color: var(--bp-ink);
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 700;
  line-height: 0.96;
}

.boon-price-number span {
  display: block;
  margin-top: 8px;
  color: var(--bp-muted);
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.3;
}

.boon-price-card ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.boon-price-card li {
  position: relative;
  padding-left: 20px;
  color: var(--bp-body);
  line-height: 1.4;
}

.boon-price-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--bp-green);
}

.boon-home-cta {
  text-align: center;
}

.boon-home-cta .boon-section-lede {
  margin-inline: auto;
}

.boon-home-cta .boon-button-row {
  justify-content: center;
}

/* --- Why Boon cards -------------------------------------------------------- */
.boon-why__cards {
  margin-top: 34px;
}

.boon-why-card {
  min-height: 260px;
  padding: 26px;
  position: relative;
  overflow: hidden;
}

.boon-why-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
}

.boon-why-card:nth-child(1)::before {
  background: var(--bp-green);
}

.boon-why-card:nth-child(2)::before {
  background: var(--bp-primary-soft);
}

.boon-why-card:nth-child(3)::before {
  background: #ff8f78;
}

.boon-why-card h3 {
  margin-bottom: 12px;
  font-size: 1.45rem;
  line-height: 1.15;
}

.boon-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  overflow: hidden;
  margin-top: 28px;
  border: 1px solid var(--bp-line-soft);
  border-radius: 18px;
  background: var(--bp-line-soft);
}

.boon-compare__col {
  background: var(--bp-surface-solid);
  padding: 26px;
}

.boon-compare__col.is-better {
  background: linear-gradient(160deg, rgba(92, 77, 233, 0.12), rgba(44, 255, 116, 0.05));
}

.boon-compare ul {
  display: grid;
  gap: 12px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.boon-compare li {
  position: relative;
  padding-left: 22px;
  color: var(--bp-muted);
}

.boon-compare li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: var(--bp-primary-soft);
}

.boon-compare__col.is-better li::before {
  background: var(--bp-green);
}

/* --- Contact / partner pages ----------------------------------------------- */
.boon-contact-section {
  background: transparent;
  color: var(--bp-ink);
}

.boon-contact-page {
  padding-top: clamp(132px, 16vh, 208px);
  min-height: 100vh;
}

.boon-contact-page .boon-section-title {
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  line-height: 1.08;
}

#boon-partner-application {
  scroll-margin-top: 96px;
}

body.boon-enhanced .section_hubspot-embed {
  display: none !important;
}

.boon-anchor {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.boon-partner-application {
  padding-top: clamp(86px, 9vw, 132px);
  padding-bottom: clamp(86px, 9vw, 132px);
}

.boon-partner-application::before {
  content: "";
  position: absolute;
  inset: 8% 4% 10%;
  z-index: 0;
  pointer-events: none;
  border-radius: 36px;
  background:
    radial-gradient(circle at 14% 12%, rgba(44, 255, 116, 0.18), transparent 29%),
    radial-gradient(circle at 82% 22%, rgba(255, 143, 120, 0.18), transparent 30%),
    radial-gradient(circle at 58% 90%, rgba(229, 192, 105, 0.13), transparent 34%);
  filter: blur(8px);
}

.boon-partner-application .boon-shell {
  position: relative;
  z-index: 1;
}

.boon-partner-application .boon-reveal {
  opacity: 1;
  transform: none;
}

.boon-partner-application .boon-contact-panel,
.boon-partner-application .boon-form {
  border-color: rgba(146, 136, 240, 0.24);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(146, 136, 240, 0.08)),
    var(--bp-surface);
}

.boon-partner-application .boon-form {
  position: relative;
  overflow: hidden;
}

.boon-partner-application .boon-form::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 0%, rgba(44, 255, 116, 0.14), transparent 24%),
    radial-gradient(circle at 100% 12%, rgba(255, 143, 120, 0.14), transparent 26%);
}

.boon-partner-application .boon-form > * {
  position: relative;
  z-index: 1;
}

.boon-partner-application .boon-contact-panel li:nth-child(2)::before {
  background: #e5c069;
}

.boon-partner-application .boon-contact-panel li:nth-child(3)::before {
  background: #ff8f78;
}

.boon-contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 5vw, 64px);
  align-items: start;
}

.boon-contact-panel,
.boon-form {
  border: 1px solid var(--bp-line-soft);
  border-radius: 18px;
  background: var(--bp-surface);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  box-shadow: var(--bp-shadow-soft);
}

.boon-contact-panel {
  padding: 24px;
  margin-top: 26px;
}

.boon-contact-panel strong {
  color: var(--bp-ink);
}

.boon-contact-panel ul {
  display: grid;
  gap: 14px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.boon-contact-panel li {
  display: flex;
  gap: 12px;
  color: var(--bp-muted);
  line-height: 1.45;
}

.boon-contact-panel li::before {
  content: "";
  flex: 0 0 9px;
  width: 9px;
  height: 9px;
  margin-top: 0.55em;
  border-radius: 99px;
  background: var(--bp-green);
}

.boon-form {
  display: grid;
  gap: 16px;
  padding: clamp(20px, 4vw, 32px);
}

.boon-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.boon-field {
  display: grid;
  gap: 8px;
}

.boon-field--full {
  grid-column: 1 / -1;
}

.boon-field label {
  color: var(--bp-ink);
  font-size: 0.92rem;
  font-weight: 600;
}

.boon-input,
.boon-select,
.boon-textarea {
  min-height: 48px;
  width: 100%;
  border: 1px solid var(--bp-line);
  border-radius: 12px;
  background: var(--bp-surface-strong);
  color: var(--bp-ink);
  padding: 12px 14px;
  font: inherit;
  transition: border-color 200ms var(--bp-ease), box-shadow 200ms var(--bp-ease);
}

.boon-input:focus,
.boon-select:focus,
.boon-textarea:focus {
  outline: none;
  border-color: var(--bp-primary-soft);
  box-shadow: 0 0 0 3px rgba(92, 77, 233, 0.25);
}

.boon-input::placeholder,
.boon-textarea::placeholder {
  color: var(--bp-muted);
}

.boon-select option {
  color: #1d1a23;
  background: #ffffff;
}

.boon-textarea {
  min-height: 120px;
  resize: vertical;
}

.boon-form__message,
.boon-newsletter-message,
.boon-market-message {
  min-height: 24px;
  color: var(--bp-muted);
  font-size: 0.94rem;
}

.boon-form__message.is-error,
.boon-newsletter-message.is-error,
.boon-market-message.is-error {
  color: #ff9d8a;
}

html[data-boon-theme="light"] .boon-form__message.is-error,
html[data-boon-theme="light"] .boon-newsletter-message.is-error,
html[data-boon-theme="light"] .boon-market-message.is-error {
  color: #c0392b;
}

.boon-form__message.is-success,
.boon-newsletter-message.is-success,
.boon-market-message.is-success {
  color: #4fd88a;
}

html[data-boon-theme="light"] .boon-form__message.is-success,
html[data-boon-theme="light"] .boon-newsletter-message.is-success,
html[data-boon-theme="light"] .boon-market-message.is-success {
  color: #0f7a2e;
}

/* --- FAQ --------------------------------------------------------------------- */
.boon-faq {
  background: transparent;
}

.boon-faq-list {
  display: grid;
  gap: 12px;
  margin-top: 32px;
}

.boon-faq-item {
  border: 1px solid var(--bp-line-soft);
  border-radius: 16px;
  background: var(--bp-surface);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  overflow: hidden;
  transition: border-color 280ms var(--bp-ease);
}

.boon-faq-item.is-open {
  border-color: rgba(146, 136, 240, 0.4);
}

.boon-faq-trigger {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border: 0;
  background: transparent;
  color: var(--bp-ink);
  padding: 22px 24px;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  text-align: left;
}

.boon-faq-icon {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 999px;
  border: 1px solid var(--bp-line);
  color: var(--bp-primary-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 360ms var(--bp-ease), background 360ms var(--bp-ease);
}

.boon-faq-item.is-open .boon-faq-icon {
  transform: rotate(45deg);
  background: var(--bp-primary);
  border-color: var(--bp-primary);
  color: #ffffff;
}

.boon-faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 420ms var(--bp-ease);
}

.boon-faq-item.is-open .boon-faq-panel {
  grid-template-rows: 1fr;
}

.boon-faq-panel > div {
  overflow: hidden;
}

.boon-faq-panel p {
  padding: 0 24px 24px;
}

/* --- Library ------------------------------------------------------------------ */
.boon-library-enhanced {
  background: transparent;
}

.boon-library-head {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: end;
  margin-bottom: 30px;
}

.boon-tabs {
  display: inline-flex;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--bp-glass-border);
  border-radius: 999px;
  background: var(--bp-surface);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.boon-tab {
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--bp-muted);
  padding: 0 16px;
  cursor: pointer;
  font-weight: 600;
  transition: color 240ms var(--bp-ease), background 240ms var(--bp-ease);
}

.boon-tab[aria-selected="true"] {
  background: var(--bp-primary);
  color: #ffffff;
  box-shadow: 0 8px 22px rgba(92, 77, 233, 0.35);
}

.boon-library-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 34px;
}

.boon-library-card {
  position: relative;
  overflow: hidden;
  text-align: left;
  border: 1px solid var(--bp-line-soft);
  border-radius: 18px;
  padding: 24px 24px 22px;
  background: var(--bp-surface);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  cursor: pointer;
  transition: transform 320ms var(--bp-ease), box-shadow 320ms var(--bp-ease), border-color 320ms var(--bp-ease);
}

.boon-library-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--bp-green);
  opacity: 0.9;
}

.boon-library-card.accent-mint::before { background: var(--bp-green); }
.boon-library-card.accent-lilac::before { background: var(--bp-primary-soft); }
.boon-library-card.accent-coral::before { background: #ff8f78; }
.boon-library-card.accent-yellow::before { background: #e5c069; }

.boon-library-card:hover,
.boon-library-card[aria-expanded="true"] {
  transform: translateY(-4px);
  box-shadow: var(--bp-shadow-soft);
  border-color: rgba(146, 136, 240, 0.4);
}

.boon-library-card__top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.boon-library-card__num {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--bp-muted);
  letter-spacing: 0.06em;
}

.boon-library-card__tag {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bp-ink);
  background: var(--boon-mint);
  padding: 5px 10px;
  border-radius: 999px;
}

.boon-library-card.accent-lilac .boon-library-card__tag { background: var(--boon-lilac); }
.boon-library-card.accent-coral .boon-library-card__tag { background: var(--boon-coral); }
.boon-library-card.accent-yellow .boon-library-card__tag { background: var(--boon-yellow); }

.boon-library-card__chevron {
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bp-surface-strong);
  color: var(--bp-ink);
  transition: transform 320ms var(--bp-ease), background 200ms var(--bp-ease), color 200ms var(--bp-ease);
}

.boon-library-card[aria-expanded="true"] .boon-library-card__chevron {
  transform: rotate(180deg);
  background: var(--bp-primary);
  color: #ffffff;
}

.boon-library-card h3 {
  font-size: 1.16rem;
  margin-bottom: 8px;
  color: var(--bp-ink);
}

.boon-library-card p {
  color: var(--bp-muted);
  font-size: 0.94rem;
  line-height: 1.55;
}

.boon-library-card__details {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 360ms var(--bp-ease);
}

.boon-library-card__details > div {
  overflow: hidden;
}

.boon-library-card[aria-expanded="true"] .boon-library-card__details {
  grid-template-rows: 1fr;
  margin-top: 16px;
}

.boon-library-card__details-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bp-muted);
  margin-bottom: 8px;
}

.boon-library-card__details ul {
  margin: 0;
  padding-left: 18px;
}

.boon-library-card__details li {
  color: var(--bp-body);
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 6px;
}

/* --- Market snapshot / newsletter -------------------------------------------- */
.boon-market {
  background: transparent;
}

.boon-market-card {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 28px;
  align-items: start;
  padding: clamp(20px, 4vw, 34px);
}

.boon-market-card .boon-form {
  background: var(--bp-canvas-2);
}

.boon-market-success {
  display: none;
  gap: 16px;
  border: 1px solid rgba(44, 255, 116, 0.3);
  border-radius: 16px;
  background: rgba(44, 255, 116, 0.08);
  padding: 22px;
}

.boon-market-success.is-visible {
  display: grid;
}

.boon-market-success p {
  color: var(--bp-muted);
}

.boon-newsletter {
  background: var(--bp-canvas-2);
  color: var(--bp-ink);
}

.boon-newsletter-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.7fr);
  gap: 24px;
  align-items: center;
  border: 1px solid var(--bp-line-soft);
  border-radius: 18px;
  padding: clamp(22px, 4vw, 34px);
  background: var(--bp-surface);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

.boon-newsletter-form {
  display: grid;
  gap: 12px;
}

.boon-newsletter-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

/* --- Legal pages ---------------------------------------------------------------- */
.boon-legal {
  min-height: 62vh;
  padding-top: clamp(120px, 14vw, 170px);
  background: transparent;
}

.boon-legal-card {
  padding: clamp(24px, 5vw, 48px);
}

.boon-legal-card h1 {
  margin: 0 0 18px;
  font-size: clamp(2.4rem, 4.6vw, 4.2rem);
  line-height: 1.02;
  color: var(--bp-ink);
}

.boon-legal-card h2 {
  margin: 34px 0 10px;
  font-size: 1.35rem;
  color: var(--bp-ink);
}

.boon-legal-card p,
.boon-legal-card li {
  color: var(--bp-muted);
  line-height: 1.65;
}

.boon-footer-legal-link {
  color: currentColor;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Footer "Contact Us" block, injected site-wide by injectFooterContact().
   The footer stays obsidian in both themes, so the muted tones are fixed. */
.boon-footer-contact-block { margin-top: 1.5em; text-align: left; }

.boon-footer-contact-info p {
  margin: 0 0 10px;
  font-size: 0.85rem;
  line-height: 1.6;
  color: rgba(247, 241, 251, 0.66);
}

.boon-footer-contact-info p:last-child { margin-bottom: 0; }

.boon-footer-contact-info .boon-footer-contact-name {
  margin-bottom: 4px;
  color: #f7f1fb;
  font-weight: 600;
}

.boon-footer-contact-info a {
  color: rgba(247, 241, 251, 0.82);
  text-decoration: none;
}

.boon-footer-contact-info a:hover {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The general inbox leads the footer contact block. */
.boon-footer-contact-info a.boon-footer-email {
  color: #f7f1fb;
  font-weight: 600;
  font-size: 0.95rem;
}

.boon-footer-contact-block--mobile { margin: 28px 0 8px; }

.boon-hidden {
  display: none !important;
}

/* ---------------------------------------------------------------------------
   9. Account portal (login / signup with OTP) + waitlist popups
   --------------------------------------------------------------------------- */
body.boon-noscroll {
  overflow: hidden;
}

.boon-auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(16, 12, 24, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: boon-auth-fade 220ms var(--bp-ease);
}

.boon-auth-overlay[hidden] {
  display: none;
}

@keyframes boon-auth-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.boon-auth-card {
  position: relative;
  width: min(440px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 34px 32px 30px;
  border-radius: 22px;
  border: 1px solid var(--bp-glass-border);
  background: var(--bp-canvas-2);
  color: var(--bp-ink);
  box-shadow: var(--bp-shadow);
  animation: boon-auth-pop 260ms var(--bp-ease);
}

@keyframes boon-auth-pop {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

.boon-auth-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: var(--bp-surface-strong);
  color: var(--bp-ink);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background 200ms var(--bp-ease);
}

.boon-auth-close:hover {
  background: var(--bp-line);
}

.boon-auth-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 18px;
  color: var(--bp-ink);
}

.boon-auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  margin-bottom: 22px;
  background: var(--bp-surface-strong);
  border-radius: 999px;
}

.boon-auth-tab {
  border: none;
  background: transparent;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--bp-muted);
  cursor: pointer;
  transition: background 200ms var(--bp-ease), color 200ms var(--bp-ease);
}

.boon-auth-tab.is-active {
  background: var(--bp-primary);
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(92, 77, 233, 0.35);
}

.boon-auth-title {
  margin: 0 0 6px;
  font-size: 1.5rem;
  color: var(--bp-ink);
}

.boon-auth-sub {
  margin: 0 0 20px;
  color: var(--bp-muted);
  font-size: 0.94rem;
  line-height: 1.5;
}

.boon-auth-step .boon-field {
  margin-bottom: 14px;
}

.boon-auth-step .boon-field label {
  color: var(--bp-ink);
}

.boon-auth-step .boon-input {
  background: var(--bp-surface-strong);
  border: 1px solid var(--bp-line);
  color: var(--bp-ink);
}

.boon-auth-step .boon-input::placeholder {
  color: var(--bp-muted);
}

.boon-auth-signup-only {
  display: none;
}

.boon-auth-overlay.is-signup .boon-auth-signup-only {
  display: block;
}

.boon-auth-step .boon-action {
  width: 100%;
  margin-top: 6px;
}

.boon-mini-form {
  display: grid;
  gap: 18px;
}

.boon-mini-form .boon-auth-title,
.boon-mini-form .boon-auth-sub,
.boon-mini-form .boon-field,
.boon-mini-form .boon-auth-msg {
  margin: 0;
}

.boon-mini-field {
  margin-top: 8px;
}

.boon-mini-form .boon-input {
  min-height: 64px;
  background: var(--bp-surface-strong);
  border-color: var(--bp-primary-soft);
  color: var(--bp-ink);
  caret-color: var(--bp-ink);
}

.boon-mini-form .boon-input::placeholder {
  color: var(--bp-muted);
}

.boon-mini-form .boon-action {
  width: auto;
  margin-top: 6px;
  align-self: start;
  position: relative;
  z-index: 0;
}

.boon-otp {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin: 6px 0 18px;
}

.boon-otp-input {
  width: 100%;
  aspect-ratio: 1 / 1;
  text-align: center;
  font-size: 1.3rem;
  font-weight: 700;
  border: 1px solid var(--bp-line);
  border-radius: 12px;
  background: var(--bp-surface-strong);
  color: var(--bp-ink);
  transition: border-color 160ms var(--bp-ease), box-shadow 160ms var(--bp-ease);
}

.boon-otp-input:focus {
  outline: none;
  border-color: var(--bp-primary-soft);
  box-shadow: 0 0 0 3px rgba(92, 77, 233, 0.28);
}

.boon-auth-secondary {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
}

.boon-auth-link {
  border: none;
  background: none;
  padding: 0;
  color: var(--bp-muted);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.boon-auth-link:hover {
  color: var(--bp-ink);
}

.boon-auth-msg {
  margin-top: 12px;
  font-size: 0.86rem;
  min-height: 1.1em;
}

.boon-auth-msg.is-error {
  color: #ff9d8a;
}

html[data-boon-theme="light"] .boon-auth-msg.is-error {
  color: #c0392b;
}

.boon-auth-msg.is-hint {
  color: var(--bp-muted);
}

.boon-auth-success {
  text-align: center;
  padding-top: 8px;
}

.boon-auth-check {
  width: 62px;
  height: 62px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 30px;
  color: var(--bp-green);
  background: rgba(44, 255, 116, 0.12);
  animation: boon-auth-pop 300ms var(--bp-ease);
}

html[data-boon-theme="light"] .boon-auth-check {
  color: #0f7a2e;
  background: rgba(31, 197, 94, 0.14);
}

.boon-auth-success .boon-action {
  width: 100%;
  margin-top: 8px;
}

/* ---------------------------------------------------------------------------
   10. How it Works — product screenshot cards
   --------------------------------------------------------------------------- */
.boon-how-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
  margin-top: 40px;
}

.boon-how-card {
  border: 1px solid var(--bp-line-soft);
  border-radius: 18px;
  overflow: hidden;
  background: var(--bp-surface);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  transition: transform 340ms var(--bp-ease), box-shadow 340ms var(--bp-ease);
}

.boon-how-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--bp-shadow);
}

.boon-how-card .boon-browser {
  border-radius: 0;
  box-shadow: none;
  border: none;
  border-bottom: 1px solid var(--bp-line-soft);
}

.boon-how-card .boon-browser__image {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.boon-how-card .boon-browser__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.boon-how-card__text {
  padding: 20px 22px 24px;
}

.boon-how-card__text h3 {
  font-size: 1.12rem;
  margin-bottom: 8px;
  color: var(--bp-ink);
}

.boon-how-card__text p {
  color: var(--bp-muted);
  font-size: 0.94rem;
  line-height: 1.55;
}

/* ---------------------------------------------------------------------------
   11. Liquid polish overrides for late Webflow embeds
   --------------------------------------------------------------------------- */
body.boon-enhanced :is(.blog_card, .library_item-wrapper, .pricing-card, .data-card,
    .faq_accordion, .integration-card, .partner-card, .gtm-box, .blog_content-wrapper,
    .step_card, .agent-card_slide, .fixed-card, .accordion-css__item,
    .blog_single_author, .toc, .author-box) {
  background-color: var(--bp-surface) !important;
  border-color: var(--bp-line-soft) !important;
  box-shadow: var(--bp-shadow-soft);
}

body.boon-enhanced :is(.blog_card, .library_item-wrapper, .pricing-card, .data-card,
    .faq_accordion, .integration-card, .partner-card, .gtm-box, .step_card,
    .agent-card_slide, .fixed-card, .accordion-css__item) {
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
  backdrop-filter: blur(22px) saturate(1.15);
  box-shadow: inset 0 1px 0 var(--bp-liquid-edge), var(--bp-shadow-soft);
}

body.boon-enhanced .library_item-wrapper:nth-child(odd),
body.boon-enhanced .library_item-wrapper:nth-child(even),
body.boon-enhanced .library_item-wrapper:nth-child(odd):hover,
body.boon-enhanced .library_item-wrapper:nth-child(even):hover {
  background: var(--bp-surface) !important;
  color: var(--bp-ink) !important;
  border: 1px solid var(--bp-line-soft) !important;
}

body.boon-enhanced .library_item-wrapper:hover {
  transform: translateY(-4px);
  border-color: rgba(146, 136, 240, 0.42) !important;
  box-shadow: inset 0 1px 0 var(--bp-liquid-edge), var(--bp-shadow) !important;
}

body.boon-enhanced :is(.tag_item, .tag-wrapper, .gtm_tag-item, .gtm-tag) {
  background: var(--bp-surface-strong) !important;
  border-color: var(--bp-line-soft) !important;
  color: var(--bp-ink) !important;
}

body.boon-enhanced :is(.library_item-wrapper, .blog_card, .blog_content-wrapper,
    .section_blog-single-header, .section_blog-single-content, .section_library,
    .section_boon-library, .section_blog-home, .section_mini-cta, .pricing-card,
    .data-card, .faq_accordion, .accordion-css__item, .boon-card, .boon-form,
    .boon-contact-panel, .blog_header-2, .author-box)
  :is(h1, h2, h3, h4, h5, h6, strong, b, .heading-style-h1, .heading-style-h2,
    .heading-style-h3, .heading-style-h4, .heading-style-h5, .heading-style-h6,
    .blog_title, .accordion-title, .title-link, .text-weight-bold, .tag_text) {
  color: var(--bp-ink) !important;
}

body.boon-enhanced :is(.library_item-wrapper, .blog_card, .blog_content-wrapper,
    .section_blog-single-header, .section_blog-single-content, .section_library,
    .section_boon-library, .section_blog-home, .section_mini-cta, .pricing-card,
    .data-card, .faq_accordion, .accordion-css__item, .boon-card, .boon-form,
    .boon-contact-panel, .blog_header-2, .author-box)
  :is(p, li, div, span, em, .text-size-regular, .text-size-small, .text-size-medium,
    .text-size-large, .paragraph, .caption-medium, .accordion-css__item-p,
    .blog-details_wrapper, .toc_item) {
  color: var(--bp-body) !important;
}

body.boon-enhanced :is(.footer, .footer_component, .section_footer, .section_cta1,
    .section_cta2, .section_cta3, .section_cta-screenspace, .section_work-together,
    .mini-cta_inner, .testimonial_item, .faq-content.active)
  :is(h1, h2, h3, h4, h5, h6, p, li, div, span, strong, b, em, a,
    .text-size-regular, .text-size-small, .text-size-medium, .text-size-large,
    .heading-style-h1, .heading-style-h2, .heading-style-h3, .heading-style-h4,
    .heading-style-h5, .heading-style-h6, .footer_column-heading) {
  color: #f7f1fb !important;
}

body.boon-enhanced :is(.button, .w-button, .button-load, .button_subscribe,
    .button_subscribe-2, .submit, .button-main, .button-submit,
    .submit-button-2, .button-2.with-icon) {
  border: 1px solid transparent;
  background: var(--bp-cta-primary-bg) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 34px rgba(92, 77, 233, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

body.boon-enhanced :is(.button, .w-button, .button-load, .button_subscribe,
    .button_subscribe-2, .submit, .button-main, .button-submit,
    .submit-button-2, .button-2.with-icon):hover {
  background: var(--bp-cta-primary-bg-hover) !important;
  color: #ffffff !important;
}

body.boon-enhanced .button:where(.w-variant-273fc40e-df92-3e04-4c44-a70937f1f959),
body.boon-enhanced .button:where(.w-variant-5c1287f4-5e65-a151-ab87-060c147ca43c),
body.boon-enhanced .button.w--current {
  background: var(--bp-cta-secondary-bg) !important;
  border-color: var(--bp-cta-secondary-border) !important;
  color: var(--bp-cta-secondary-ink) !important;
  box-shadow: inset 0 1px 0 var(--bp-liquid-edge), 0 10px 26px rgba(10, 6, 20, 0.12);
}

body.boon-enhanced .btn-animate-chars,
body.boon-enhanced .btn-animate-chars:hover,
body.boon-enhanced .btn-animate-chars:focus-visible {
  border-color: transparent;
  color: #ffffff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

body.boon-enhanced .btn-animate-chars__bg,
body.boon-enhanced .btn-animate-chars:hover .btn-animate-chars__bg {
  display: none !important;
  inset: 0 !important;
  border-radius: inherit;
}

body.boon-enhanced .btn-animate-chars :is([data-button-animate-chars], span) {
  color: currentColor !important;
}

body.boon-enhanced .btn-animate-chars[data-wf--button-component--variant="outline"],
body.boon-enhanced .btn-animate-chars[data-wf--button-component--variant="outline-nav"] {
  border-color: var(--bp-cta-secondary-border) !important;
  background: var(--bp-cta-secondary-bg) !important;
  color: var(--bp-cta-secondary-ink) !important;
  box-shadow: inset 0 1px 0 var(--bp-liquid-edge) !important;
}

body.boon-enhanced .btn-animate-chars[data-wf--button-component--variant="outline"] .btn-animate-chars__bg,
body.boon-enhanced .btn-animate-chars[data-wf--button-component--variant="outline-nav"] .btn-animate-chars__bg {
  background: var(--bp-cta-secondary-bg) !important;
}

body.boon-enhanced .btn-animate-chars[data-wf--button-component--variant="outline"]:hover,
body.boon-enhanced .btn-animate-chars[data-wf--button-component--variant="outline-nav"]:hover {
  background: var(--bp-cta-secondary-bg-hover) !important;
  color: var(--bp-cta-secondary-ink) !important;
}

body.boon-enhanced .btn-animate-chars[data-wf--button-component--variant="outline"]:hover .btn-animate-chars__bg,
body.boon-enhanced .btn-animate-chars[data-wf--button-component--variant="outline-nav"]:hover .btn-animate-chars__bg {
  background: var(--bp-cta-secondary-bg-hover) !important;
}

/* ---------------------------------------------------------------------------
   12. Responsive + reduced motion
   --------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .boon-grid--2,
  .boon-grid--3,
  .boon-home-video__grid,
  .boon-problem-grid,
  .boon-buyer-grid,
  .boon-pricing-grid,
  .boon-contact-layout,
  .boon-market-card,
  .boon-newsletter-card {
    grid-template-columns: 1fr;
  }

  .boon-demo__head,
  .boon-library-head,
  .boon-mode-head {
    display: grid;
    align-items: start;
  }

  .boon-seller-workspace__grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "stage"
      "thumbs"
      "info1"
      "info2";
    align-items: start;
  }

  .boon-seller-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .boon-library-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .boon-library-grid,
  .boon-how-grid {
    grid-template-columns: 1fr;
  }

  .boon-otp {
    gap: 6px;
  }

  .boon-auth-card {
    padding: 28px 22px 24px;
  }
}

@media (max-width: 640px) {
  .boon-shell {
    width: min(100% - 28px, 1180px);
  }

  .boon-section {
    padding: 62px 0;
  }

  .boon-form__grid,
  .boon-library-grid,
  .boon-snippets,
  .boon-home-proof-row,
  .boon-compare,
  .boon-newsletter-row {
    grid-template-columns: 1fr;
  }

  .boon-seller-thumbs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .boon-seller-flow {
    grid-template-columns: 1fr;
  }

  .boon-tabs {
    width: 100%;
    border-radius: 14px;
  }

  .boon-tab {
    flex: 1;
  }

  .boon-section-title {
    font-size: clamp(2.05rem, 11vw, 3.4rem);
  }

  .boon-mode-tabs {
    width: 100%;
    grid-template-columns: 1fr;
    border-radius: 16px;
  }

  .boon-mode-tabs button {
    border-radius: 12px;
  }

  .boon-video-play {
    right: 14px;
    left: 14px;
    justify-content: center;
  }

  .boon-theme-toggle {
    width: 36px;
    height: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }

  .boon-reveal,
  body.boon-enhanced .boon-reveal {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Footer links — subtle focus/select micro-interaction.
   Hover / keyboard focus: text brightens, link nudges right, a 1px lavender
   underline sweeps in. Press ("selected"): text flashes lavender.
   -------------------------------------------------------------------------- */
.footer .footer-link,
.footer-mobile .footer-link,
.boon-footer-legal-link {
  position: relative;
  display: inline-block;
  width: fit-content;
  padding-bottom: 2px;
  color: rgba(247, 241, 251, 0.68);
  transition: color 180ms var(--bp-ease), transform 180ms var(--bp-ease);
}

.footer .footer-link::after,
.footer-mobile .footer-link::after,
.boon-footer-legal-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--bp-primary-soft);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 220ms var(--bp-ease);
}

.footer .footer-link:hover,
.footer-mobile .footer-link:hover,
.boon-footer-legal-link:hover,
.footer .footer-link:focus-visible,
.footer-mobile .footer-link:focus-visible,
.boon-footer-legal-link:focus-visible {
  color: #f7f1fb;
  transform: translateX(6px);
}

.footer .footer-link:hover::after,
.footer-mobile .footer-link:hover::after,
.boon-footer-legal-link:hover::after,
.footer .footer-link:focus-visible::after,
.footer-mobile .footer-link:focus-visible::after,
.boon-footer-legal-link:focus-visible::after {
  transform: scaleX(1);
}

.footer .footer-link:active,
.footer-mobile .footer-link:active,
.boon-footer-legal-link:active {
  color: var(--bp-primary-soft);
}

/* The obsidian-footer text lock above (body.boon-enhanced … !important) also
   hits these links, so the interactive colors are re-declared at matching
   importance; being later in the sheet, they win the tie. */
body.boon-enhanced .footer .footer-link.footer-link,
body.boon-enhanced .footer-mobile .footer-link.footer-link,
body.boon-enhanced .footer .boon-footer-legal-link.boon-footer-legal-link {
  color: rgba(247, 241, 251, 0.68) !important;
}

body.boon-enhanced .footer .footer-link.footer-link:hover,
body.boon-enhanced .footer-mobile .footer-link.footer-link:hover,
body.boon-enhanced .footer .boon-footer-legal-link.boon-footer-legal-link:hover,
body.boon-enhanced .footer .footer-link.footer-link:focus-visible,
body.boon-enhanced .footer-mobile .footer-link.footer-link:focus-visible,
body.boon-enhanced .footer .boon-footer-legal-link.boon-footer-legal-link:focus-visible {
  color: #f7f1fb !important;
}

body.boon-enhanced .footer .footer-link.footer-link:active,
body.boon-enhanced .footer-mobile .footer-link.footer-link:active,
body.boon-enhanced .footer .boon-footer-legal-link.boon-footer-legal-link:active {
  color: var(--bp-primary-soft) !important;
}

.footer .footer-link:focus-visible,
.footer-mobile .footer-link:focus-visible,
.boon-footer-legal-link:focus-visible {
  outline: 2px solid var(--bp-primary-soft);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .footer .footer-link,
  .footer-mobile .footer-link,
  .boon-footer-legal-link,
  .footer .footer-link::after,
  .footer-mobile .footer-link::after,
  .boon-footer-legal-link::after {
    transition: none;
  }

  .footer .footer-link:hover,
  .footer-mobile .footer-link:hover,
  .boon-footer-legal-link:hover,
  .footer .footer-link:focus-visible,
  .footer-mobile .footer-link:focus-visible,
  .boon-footer-legal-link:focus-visible {
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
   Homepage "Moving the needle" band (.section_cta-screenspace).
   The 40em-tall .screenspace-embed placeholder was removed from the markup
   (it was never populated and rendered as a giant blank panel), so the section
   is now a compact CTA band: space the heading and button and trim the
   media-sized padding it used to need.
   --------------------------------------------------------------------------- */
.section_cta-screenspace .vflex-center { grid-row-gap: 2em; gap: 2em; }

.section_cta-screenspace {
  padding-top: clamp(4.5em, 7vw, 7em);
  padding-bottom: clamp(4.5em, 7vw, 7em);
}