/* ============================================================================
   BA Home — Aguastatic  ·  v3.4 "GitHub" design system
   ----------------------------------------------------------------------------
   Scoped under `body.stasis-homepage-body` and `.stasis` so styles never leak.
   Palette mirrors the v3.4 GitHub reference: violet/purple icon backgrounds,
   green accents, blue eyebrows, smaller sizes, smaller footer wordmark.

   TABLE OF CONTENTS
     01. Reset & base
     02. Full-bleed override
     03. Theme chrome suppression (incl. aggressive GoDaddy MWP bar + footer)
     04. Design tokens (violet + green palette)
     05. Typography
     06. Layout primitives (reduced sizes)
     07. Buttons
     08. Promo bar
     09. Header (white, condenses stays white)
     10. Hero (photo as background, NO duplicate vial)
     11. COA HUD
     12. Trust marquee
     13. Why Aguastatic — 6 feature cards (violet icons)
     14. Built for Accuracy (split with researcher photo)
     15. Process
     16. Reviews + Stats (violet stat circles, green rating pill)
     17. Final CTA + Disclaimer
     18. FAQ (+ icon)
     19. Tagline marquee (✦ separators)
     20. Footer (smaller, light wordmark, 3 link cols)
     21. Reveal / motion
     22. Scroll progress
     23. Responsive (mobile / tablet / desktop)
     24. Reduced motion
   ============================================================================ */

/* ── 01. Reset & base ───────────────────────────────────────────────── */
.stasis, .stasis * { box-sizing: border-box; }
.stasis {
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--ink);
}
.stasis img { max-width: 100%; display: block; }
.stasis a { color: inherit; text-decoration: none; }
.stasis button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; padding: 0; }
.stasis ul, .stasis ol { margin: 0; padding: 0; list-style: none; }
.stasis h1, .stasis h2, .stasis h3, .stasis h4, .stasis h5, .stasis h6 { margin: 0; font-weight: 600; }
.stasis p { margin: 0; }
.stasis ::selection { background: var(--violet); color: #fff; }
.stasis .ba-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

/* ── 02. NUCLEAR GoDaddy MWP kill (top bar + bottom footer) ─────────
   v3.5: aggressive block — kills iframes, in-body nodes, and any
   element that contains the tell-tale MWP text. JS in ba-home.js
   follows up with a MutationObserver + DOM walker as a backstop. */
body.stasis-homepage-body .stasis,
body.stasis-homepage-body .stasis > * {
    width: 100%;
    max-width: none;
}
body.stasis-homepage-body #content,
body.stasis-homepage-body .site-content,
body.stasis-homepage-body .content-area,
body.stasis-homepage-body .site-main,
body.stasis-homepage-body .entry-content,
body.stasis-homepage-body .page-content,
body.stasis-homepage-body article.page,
body.stasis-homepage-body article,
body.stasis-homepage-body .wp-block-post-content,
body.stasis-homepage-body main,
body.stasis-homepage-body .ast-container,
body.stasis-homepage-body .elementor-section,
body.stasis-homepage-body .fl-row-content,
body.stasis-homepage-body .avada-row,
body.stasis-homepage-body .container,
body.stasis-homepage-body #page,
body.stasis-homepage-body .site {
    max-width: none !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
}
body.stasis-homepage-body #page,
body.stasis-homepage-body .site,
body.stasis-homepage-body .site-header,
body.stasis-homepage-body .ast-site-header,
body.stasis-homepage-body header#masthead,
body.stasis-homepage-body .ast-header-wrap {
    margin-top: 0 !important;
    padding-top: 0 !important;
    min-height: 0 !important;
}
body.stasis-homepage-body .stasis { position: relative; overflow-x: clip; }

/* ── 03. NUCLEAR GoDaddy MWP kill (top bar + bottom footer) ─────────
   v3.5: aggressive block — kills iframes, in-body nodes, and any
   element that contains the tell-tale MWP text. JS in ba-home.js
   follows up with a MutationObserver + DOM walker as a backstop. */
body.stasis-homepage-body #mwp-admin-bar,
body.stasis-homepage-body #mwp-toolbar,
body.stasis-homepage-body #mwp-banner,
body.stasis-homepage-body #mwp-footer,
body.stasis-homepage-body .mwp-admin-bar,
body.stasis-homepage-body .mwp-toolbar,
body.stasis-homepage-body .mwp-banner,
body.stasis-homepage-body .mwp-footer,
body.stasis-homepage-body .mwp-quick-links,
body.stasis-homepage-body .mwp-notification,
body.stasis-homepage-body .mwp-account-bar,
body.stasis-homepage-body .gd-admin-bar,
body.stasis-homepage-body .gd-notification-bar,
body.stasis-homepage-body .gd-toolbar,
body.stasis-homepage-body .godaddy-bar,
body.stasis-homepage-body .gwbar,
body.stasis-homepage-body [class*="mwp-"],
body.stasis-homepage-body [id*="mwp-"],
body.stasis-homepage-body [class*="GoDaddy"],
body.stasis-homepage-body [id*="GoDaddy"],
body.stasis-homepage-body [class*="godaddy"],
body.stasis-homepage-body [id*="godaddy"],
body.stasis-homepage-body [class*="quick-links"],
body.stasis-homepage-body [class*="quicklinks"],
body.stasis-homepage-body [id*="quick-links"],
body.stasis-homepage-body [class*="leave-feedback"],
body.stasis-homepage-body [id*="leave-feedback"],
body.stasis-homepage-body [class*="managed-wordpress"],
body.stasis-homepage-body [id*="managed-wordpress"],
body.stasis-homepage-body [class*="mwp-banner"],
body.stasis-homepage-body [class*="mwp-footer"],
body.stasis-homepage-body [class*="mwp-toolbar"],
body.stasis-homepage-body [class*="mwp-account-bar"],
/* GoDaddy MWP sometimes injects an iframe. If we can't access it
   cross-origin to remove the node, we can at least make it
   invisible. */
body.stasis-homepage-body iframe[src*="myftpupload"],
body.stasis-homepage-body iframe[src*="secureserver"],
body.stasis-homepage-body iframe[src*="godaddy"],
body.stasis-homepage-body iframe[id*="mwp"],
body.stasis-homepage-body iframe[class*="mwp"],
body.stasis-homepage-body iframe[id*="godaddy"],
body.stasis-homepage-body iframe[title*="GoDaddy"],
body.stasis-homepage-body iframe[title*="Managed"] {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
}
/* Belt + suspenders: kill the leftover padding-top the GoDaddy bar
   leaves on body / html even after the iframe is hidden. */
html body.stasis-homepage-body,
body.stasis-homepage-body {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
body.stasis-homepage-body.admin-bar,
body.stasis-homepage-body.logged-in {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
#wpadminbar { display: none !important; }
html { margin-top: 0 !important; padding-top: 0 !important; }
body.stasis-homepage-body .site-title,
body.stasis-homepage-body .site-description,
body.stasis-homepage-body .site-branding,
body.stasis-homepage-body .site-name,
body.stasis-homepage-body .site-name a,
body.stasis-homepage-body header.site-header,
body.stasis-homepage-body .site-header,
body.stasis-homepage-body .ast-site-header,
body.stasis-homepage-body .fl-theme-builder-header,
body.stasis-homepage-body header#masthead,
body.stasis-homepage-body .page-header,
body.stasis-homepage-body .entry-header,
body.stasis-homepage-body header.entry-header,
body.stasis-homepage-body .entry-title,
body.stasis-homepage-body h1.entry-title,
body.stasis-homepage-body h1.page-title,
body.stasis-homepage-body .post-title,
body.stasis-homepage-body .page-title,
body.stasis-homepage-body .wp-block-post-title,
body.stasis-homepage-body .breadcrumb,
body.stasis-homepage-body .breadcrumbs,
body.stasis-homepage-body nav.breadcrumb,
body.stasis-homepage-body .ast-breadcrumbs,
body.stasis-homepage-body .fl-builder-breadcrumb,
body.stasis-homepage-body .site-footer,
body.stasis-homepage-body footer.site-footer,
body.stasis-homepage-body #colophon,
body.stasis-homepage-body .comments-area,
body.stasis-homepage-body #comments,
body.stasis-homepage-body .post-navigation,
body.stasis-homepage-body .nav-links,
body.stasis-homepage-body .pagination,
body.stasis-homepage-body a[href*="myftpupload"],
body.stasis-homepage-body a[href*="secureserver"],
/* GoDaddy MWP elements (class / id / attribute wildcards) */
body.stasis-homepage-body [class*="mwp-"],
body.stasis-homepage-body [id*="mwp-"],
body.stasis-homepage-body [class*="managed-wordpress"],
body.stasis-homepage-body [id*="managed-wordpress"],
body.stasis-homepage-body [class*="quick-links"],
body.stasis-homepage-body [class*="quicklinks"],
body.stasis-homepage-body [id*="quick-links"],
body.stasis-homepage-body [class*="leave-feedback"],
body.stasis-homepage-body [id*="leave-feedback"],
body.stasis-homepage-body [class*="mwp-banner"],
body.stasis-homepage-body [class*="mwp-footer"],
body.stasis-homepage-body [class*="mwp-toolbar"],
body.stasis-homepage-body [class*="mwp-account-bar"],
body.stasis-homepage-body [class*="GoDaddy"],
body.stasis-homepage-body [id*="GoDaddy"],
body.stasis-homepage-body #mwp-admin-bar,
body.stasis-homepage-body #mwp-toolbar,
body.stasis-homepage-body #mwp-footer,
body.stasis-homepage-body .mwp-admin-bar,
body.stasis-homepage-body .mwp-footer,
body.stasis-homepage-body .mwp-banner,
body.stasis-homepage-body .mwp-quick-links,
body.stasis-homepage-body .gd-admin-bar,
body.stasis-homepage-body .gd-notification-bar {
    display: none !important;
}
/* Belt-and-suspenders: zero out the html / body top margin so the
   MWP admin bar can't reserve space even if our selectors miss it. */
html body.stasis-homepage-body { margin-top: 0 !important; padding-top: 0 !important; }
body.stasis-homepage-body { margin-top: 0 !important; padding-top: 0 !important; }

/* ── 04. Design tokens (violet + green palette) ─────────────────────── */
:root {
    --void:       #04081A;
    --abyss:      #0A1024;
    --panel:      #0E1830;
    --ink:        #0B1524;
    --ink-soft:   #4A5868;
    --graphite:   #6E7D8C;
    --mist:       #93A6BA;
    --paper:      #F6F3EC;
    --paper-2:    #FBFAF6;
    --paper-warm: #EFE7D8;
    --cream:      #F1ECDF;
    --line-light: rgba(11, 21, 36, 0.08);
    --line-dark:  rgba(255, 255, 255, 0.10);

    --cryo:       #5EC8F2;
    --cryo-soft:  #9FE0FF;
    --cryo-deep:  #2461FF;        /* blue accent for eyebrows */
    --mint:       #2BE9D4;
    --brass:      #CBA05B;

    --violet:     #8B5CF6;        /* primary icon + stat-circle accent */
    --violet-2:   #6D28D9;        /* deeper violet for gradient stop */
    --violet-soft:#C4B5FD;
    --green:      #17B26A;        /* brand wordmark accent / "AquaStasis" */
    --green-soft: #1FCB7A;

    --ease:       cubic-bezier(.16, .8, .24, 1);
    --ease-out:   cubic-bezier(.22, 1, .36, 1);
    --ease-bounce:cubic-bezier(.34, 1.56, .64, 1);

    --maxw:       1240px;
    --pad:        clamp(20px, 4vw, 48px);
    --section:    clamp(48px, 6vw, 80px);     /* reduced from v3.3 */
}

/* ── 05. Typography ────────────────────────────────────────────────── */
.stasis, .stasis button, .stasis input, .stasis textarea, .stasis select {
    font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--ink);
}
.stasis .ba-display {
    font-family: 'Space Grotesk', 'IBM Plex Sans', sans-serif;
    letter-spacing: -0.022em;
    font-weight: 700;
    line-height: 1.12;
}
.stasis .ba-cryo, .stasis .ba-grad { color: var(--cryo-soft); font-style: normal; }
.stasis .ba-green { color: var(--green); font-style: normal; }
.stasis .ba-mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: 0.06em; }
.stasis p { color: var(--ink-soft); line-height: 1.7; }

/* ── 06. Layout primitives (reduced sizes) ────────────────────────── */
.stasis .ba-wrap {
    max-width: var(--maxw);
    margin: 0 auto;
    padding-inline: var(--pad);
    position: relative;
    z-index: 1;
}
.stasis .ba-eyebrow {
    display: inline-block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--cryo-deep);
    margin-bottom: 12px;
    font-weight: 600;
}
.stasis .ba-eyebrow--light { color: rgba(255,255,255,0.78); }
.stasis .ba-section-head {
    max-width: 720px;
    margin: 0 auto 40px;            /* reduced from 56px */
    text-align: center;
}
.stasis .ba-section-head h2 {
    font-size: clamp(26px, 3vw, 38px);    /* reduced from clamp(30, 3.8vw, 50px) */
    margin: 0 0 12px;
    line-height: 1.12;
}
.stasis .ba-section-head p {
    font-size: 14.5px;                /* reduced from 15.5px */
    line-height: 1.7;
}

/* ── 07. Buttons ───────────────────────────────────────────────────── */
.stasis .ba-btn {
    --mx: 50%; --my: 50%;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;              /* reduced from 14px 26px */
    border-radius: 100px;
    font-weight: 700;
    font-size: 13.5px;               /* reduced from 14px */
    letter-spacing: 0.01em;
    cursor: pointer;
    border: 0;
    overflow: hidden;
    transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
    will-change: transform;
    text-decoration: none;
}
.stasis .ba-btn--xl { padding: 14px 28px; font-size: 14px; }
.stasis .ba-btn--brass {
    background: var(--cryo-deep);
    color: #fff;
    box-shadow: 0 12px 28px -14px rgba(36, 97, 255, 0.5);
}
.stasis .ba-btn--brass:hover {
    box-shadow: 0 16px 36px -12px rgba(36, 97, 255, 0.7);
    transform: translateY(-1px);
}
.stasis .ba-btn--on-dark {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.20);
}
.stasis .ba-btn--on-dark:hover { border-color: var(--cryo); color: var(--cryo-soft); }
.stasis .ba-btn--ghost {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--line-light);
}
.stasis .ba-btn--ghost:hover {
    border-color: var(--cryo-deep);
    color: var(--cryo-deep);
}

/* ── 08. Promo bar ─────────────────────────────────────────────────── */
.stasis .ba-promo {
    background: linear-gradient(90deg, #0B1B4E 0%, #1230A0 50%, #0B1B4E 100%);
    color: #fff;
    font-size: 12px;
    letter-spacing: 0.02em;
    overflow: hidden;
    height: 34px;
    position: relative;
    z-index: 70;
}
.stasis .ba-promo-track {
    display: flex;
    align-items: center;
    height: 100%;
    white-space: nowrap;
    animation: ba-marquee 36s linear infinite;
}
.stasis .ba-promo-item {
    padding-inline: 28px;
    flex-shrink: 0;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.stasis .ba-promo-item strong { color: var(--cryo-soft); font-weight: 700; }
@keyframes ba-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── 09. Header (white, condenses stays white) ────────────────────── */
.stasis .ba-header {
    position: sticky;
    top: 0;
    z-index: 60;
    /* v4.4.12 — bumped 0.92 → 0.98 so the new client logo's pure
       #fff white blends into the header (the 0.92 left a ~5%
       brightness gap between the logo and the frosted header,
       creating a visible "logo on a white box" effect). 0.98
       is still slightly transparent so the frosted-glass look
       is preserved over the hero, but the white is now close
       enough to #fff that the logo reads as part of the header
       instead of sitting on top of it. */
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    border-bottom: 1px solid var(--line-light);
    transition: background .3s var(--ease), border-color .3s var(--ease);
}
body.admin-bar .stasis .ba-header { top: 32px; }
.stasis .ba-header-inner {
    max-width: var(--maxw);
    margin: 0 auto;
    /* v4.4.12 — reduced 12px → 10px so the bigger logo (56-72px)
       doesn't push the header to 96px tall. With 10px padding the
       header maxes at ~92px, which still feels generous around
       the 72px logo but doesn't dominate the page. */
    padding: 10px var(--pad);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
}
.stasis .ba-nav-left {
    display: flex;
    align-items: center;
    gap: 26px;
    font-size: 13.5px;
}
.stasis .ba-nav-link {
    color: var(--ink);
    font-weight: 500;
    padding: 6px 4px;
    position: relative;
    transition: color .2s ease;
}
.stasis .ba-nav-link:hover { color: var(--green); }
.stasis .ba-nav-link.is-active { color: var(--green); }
.stasis .ba-nav-link.is-active::after {
    content: "";
    position: absolute;
    left: 4px; right: 4px; bottom: 0;
    height: 2px;
    background: var(--green);
    border-radius: 2px;
}
.stasis .ba-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--ink);
}
.stasis .ba-brand-mark {
    width: auto;
    height: 38px;
    display: inline-block;
    vertical-align: middle;
    transition: opacity .2s var(--ease, ease);
}
.stasis .ba-brand-mark:hover { opacity: 0.78; }
/* Note: no `.stasis .ba-brand img.ba-brand-mark { height: 100% }` — the
   parent <a class="ba-brand"> has no explicit height, so that rule
   (left over from when the brand mark was a <span> wrapping an <img>)
   would collapse the new <img class="ba-brand-mark"> to 0px tall. */
.stasis .ba-brand-word {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 18px;                    /* reduced from 19px */
    font-weight: 700;
    line-height: 1;
    color: var(--ink);
}
.stasis .ba-brand-word em { font-style: italic; color: var(--green); }
.stasis .ba-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: flex-end;
}
.stasis .ba-icon-btn {
    position: relative;
    width: 38px; height: 38px;          /* reduced from 40px */
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    transition: background .2s ease, color .2s ease;
}
.stasis .ba-icon-btn:hover { background: var(--paper-warm); color: var(--violet); }
/* v4.3.2 — Cart count badge. EXACTLY matches ba-pages.css line 2244
   so the home page header cart badge is visually identical to the
   product page header cart badge. Same: position, top/right offset,
   min-width, height, padding, color, font, font-weight, font-size,
   line-height, box-shadow (white ring instead of gold glow). The
   pulse animation is also included so they animate identically. */
.stasis .ba-cart-count {
    position: absolute;
    top: 2px; right: 2px;
    min-width: 16px; height: 16px;
    padding: 0 4px;
    border-radius: 100px;
    background: var(--green, #17B26A);
    color: #fff;
    font-size: 9.5px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    letter-spacing: 0;
    box-shadow: 0 0 0 2px #fff;
    transition: transform .2s cubic-bezier(.34,1.56,.64,1);
}
.stasis .ba-cart-count.is-pulse { animation: ba-count-pulse .55s cubic-bezier(.34,1.56,.64,1); }
@keyframes ba-count-pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.35); }
    100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .stasis .ba-cart-count.is-pulse { animation: none !important; }
}
.stasis .ba-icon-btn--cart { position: relative; }

.stasis .ba-nav-toggle {
    display: none;
    width: 42px; height: 42px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    border-radius: 10px;
    color: var(--ink);
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    /* v4.3.1 — make sure the 3-dot button ALWAYS wins the tap on
       mobile. Without explicit position+z-index it can get visually
       (and functionally) covered by sibling icons when the actions
       row is tight. pointer-events:auto overrides any defensive
       `pointer-events: none` on a parent. */
    position: relative;
    z-index: 5;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.stasis .ba-nav-toggle:hover { background: var(--paper-warm, #F5F1E8); }
.stasis .ba-nav-toggle:focus-visible { outline: 2px solid var(--cryo, #5EC8F2); outline-offset: 2px; }
.stasis .ba-nav-toggle span {
    display: block;
    width: 20px; height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform .25s var(--ease), opacity .2s ease;
}
.stasis .ba-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.stasis .ba-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.stasis .ba-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.stasis .ba-nav-mobile {
    display: none;
    flex-direction: column;
    padding: 12px var(--pad) 20px;
    background: #fff;
    border-top: 1px solid var(--line-light);
    gap: 4px;
}
.stasis .ba-nav-mobile .ba-nav-link {
    color: var(--ink);
    padding: 10px 12px;
    border-radius: 8px;
}
.stasis .ba-nav-mobile .ba-nav-link.is-active {
    background: rgba(23, 178, 106, 0.08);
    color: var(--green);
}
/* v4.3.1 — !important to beat the [hidden] UA rule, which applies
   `display:none` and can otherwise cancel our open state during the
   250ms close animation. */
.stasis .ba-nav-mobile.is-open { display: flex !important; }

/* ── 10. Hero (photo as background, NO duplicate vial) ─────────────── */
.stasis .ba-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: var(--void);
    min-height: clamp(520px, 78vh, 760px);    /* slightly smaller than v3.3 */
    display: flex;
    align-items: stretch;
    isolation: isolate;
}
.stasis .ba-hero-photo {
    /* v4.2.1 — element-based hero image. The HTML now renders a real
       <img class="ba-hero-photo"> (was a <div> with background-image).
       CSS background-images do NOT participate in the browser's LCP
       candidate selection, so the previous version kept showing a
       6.7s LCP even with the image-set fix. A real <img> with
       fetchpriority="high" + srcset + width/height is the canonical
       LCP recipe. */
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Mobile: nudge the focal point up so the lab scene doesn't get
       cropped on narrow phones. The hero photo has the bottle in
       roughly the middle-vertical; on a 360x640 phone, the center
       crop would slice the bottle in half. Pushing to 32% from the
       top keeps the bottle whole in the visible region. */
    object-position: center 32%;
    transform: scale(1.02);
}
/* Desktop: keep center crop — wider viewports show the full scene
   without needing the focal-point nudge. */
@media (min-width: 761px) {
    .stasis .ba-hero-photo { object-position: center; }
}
.stasis .ba-hero-veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(105deg, rgba(4,8,26,0.85) 0%, rgba(4,8,26,0.55) 38%, rgba(4,8,26,0.25) 70%, rgba(4,8,26,0.55) 100%),
        linear-gradient(180deg, rgba(4,8,26,0.30) 0%, rgba(4,8,26,0.05) 30%, rgba(4,8,26,0.45) 78%, var(--void) 100%);
}
.stasis .ba-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.04;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.stasis .ba-hero-inner {
    position: relative;
    z-index: 2;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: clamp(96px, 12vh, 140px) var(--pad) clamp(60px, 8vh, 100px);
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(40px, 5vw, 64px);
    align-items: center;
}
.stasis .ba-hero-copy { max-width: 620px; }

/* Hero title — slightly smaller than v3.3 to fit viewport better. */
.stasis .ba-hero-title {
    font-size: clamp(36px, 4.6vw, 64px);    /* reduced from clamp(40, 5.6vw, 76px) */
    line-height: 1.02;
    margin: 12px 0 24px;
    letter-spacing: -0.026em;
    color: #fff;
}
.stasis .ba-hero-title .ba-word {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    margin-right: 0.18em;
}
.stasis .ba-hero-title .ba-word > span {
    display: inline-block;
    transform: translateY(110%);
    animation: ba-rise .9s var(--ease-out) forwards;
}
.stasis .ba-hero-title .ba-word:nth-child(1) > span { animation-delay: 0.20s; }
.stasis .ba-hero-title .ba-word:nth-child(2) > span { animation-delay: 0.32s; }
.stasis .ba-hero-title .ba-word:nth-child(3) > span { animation-delay: 0.44s; }
.stasis .ba-hero-title .ba-word:nth-child(4) > span { animation-delay: 0.56s; }
.stasis .ba-hero-title .ba-word:nth-child(5) > span { animation-delay: 0.68s; }
.stasis .ba-hero-title .ba-grad {
    background: linear-gradient(120deg, var(--cryo-soft), #C8E8FF 60%, var(--mint));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
@keyframes ba-rise { to { transform: translateY(0); } }

.stasis .ba-hero-checklist {
    display: flex; flex-direction: column; gap: 7px;
    margin: 0 0 24px;
    color: rgba(255,255,255,0.85);
    font-size: 14px;                    /* reduced from 14.5 */
}
.stasis .ba-hero-checklist li { display: flex; align-items: center; gap: 10px; }
.stasis .ba-check {
    width: 20px; height: 20px; border-radius: 50%;
    background: rgba(43, 233, 212, 0.12);
    border: 1px solid rgba(43, 233, 212, 0.45);
    color: var(--mint);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0 12px rgba(43, 233, 212, 0.25);
}

.stasis .ba-hero-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* Hero entrance — sequential blur + rise */
.stasis .ba-hero .ba-eyebrow,
.stasis .ba-hero .ba-hero-checklist,
.stasis .ba-hero .ba-hero-actions,
.stasis .ba-hero .ba-coa-hud {
    opacity: 0; transform: translateY(16px); filter: blur(8px);
    animation: ba-focus-pull .9s var(--ease-out) forwards;
}
.stasis .ba-hero .ba-eyebrow        { animation-delay: 0.85s; }
.stasis .ba-hero .ba-hero-checklist { animation-delay: 0.95s; }
.stasis .ba-hero .ba-coa-hud        { animation-delay: 1.05s; }
.stasis .ba-hero .ba-hero-actions   { animation-delay: 1.20s; }
@keyframes ba-focus-pull { to { opacity: 1; transform: none; filter: blur(0); } }

/* Scroll cue */
.stasis .ba-scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--mist);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-family: 'IBM Plex Mono', monospace;
}
.stasis .ba-scroll-cue-line {
    display: block;
    width: 1px;
    height: 28px;
    background: linear-gradient(180deg, var(--cryo), transparent);
    animation: ba-scroll-line 2s ease-in-out infinite;
}
@keyframes ba-scroll-line {
    0%   { transform: scaleY(0); transform-origin: top; }
    50%  { transform: scaleY(1); transform-origin: top; }
    51%  { transform: scaleY(1); transform-origin: bottom; }
    100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ── 11. COA HUD ────────────────────────────────────────────────────── */
.stasis .ba-coa-hud {
    position: relative;
    background: rgba(8, 14, 30, 0.78);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid var(--line-dark);
    border-radius: 16px;
    padding: 16px 18px;
    width: 100%;
    max-width: 340px;                 /* slightly smaller */
    margin-left: auto;
    box-shadow: 0 24px 60px -22px rgba(0, 0, 0, 0.55);
    color: #C9D6E2;
    font-size: 11px;
}
.stasis .ba-coa-hud-top {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line-dark);
    margin-bottom: 8px;
}
.stasis .ba-coa-hud-title {
    display: flex; align-items: center; gap: 8px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--cryo-soft);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.stasis .ba-pulse {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--mint);
    box-shadow: 0 0 0 0 rgba(43, 233, 212, 0.6);
    animation: ba-pulse-dot 1.6s ease-out infinite;
}
@keyframes ba-pulse-dot {
    0%   { box-shadow: 0 0 0 0 rgba(43, 233, 212, 0.7); }
    70%  { box-shadow: 0 0 0 8px rgba(43, 233, 212, 0); }
    100% { box-shadow: 0 0 0 0 rgba(43, 233, 212, 0); }
}
.stasis .ba-coa-hud-lot {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9.5px;
    color: var(--mist);
    letter-spacing: 0.08em;
}
.stasis .ba-coa-hud-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--mist);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.stasis .ba-coa-hud-bar {
    height: 4px;
    background: rgba(255,255,255,0.06);
    border-radius: 100px;
    overflow: hidden;
    position: relative;
}
.stasis .ba-coa-hud-bar i {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--mint), var(--cryo));
    border-radius: 100px;
    box-shadow: 0 0 8px rgba(43, 233, 212, 0.4);
    animation: ba-bar-fill 1.4s var(--ease-out) forwards;
    animation-delay: calc(1.0s + var(--i, 0) * 0.18s);
}
@keyframes ba-bar-fill { from { width: 0; } to { width: var(--w, 100%); } }
.stasis .ba-coa-hud-pass { color: var(--mint); font-weight: 700; }
.stasis .ba-coa-hud-badge {
    margin-top: 10px;
    padding: 7px 9px;
    background: linear-gradient(135deg, rgba(43, 233, 212, 0.12), rgba(36, 97, 255, 0.10));
    border: 1px solid rgba(43, 233, 212, 0.25);
    border-radius: 9px;
    text-align: center;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9.5px;
    letter-spacing: 0.1em;
    color: var(--mint);
    text-transform: uppercase;
    font-weight: 700;
}

/* ── 12. Trust marquee ─────────────────────────────────────────────── */
.stasis .ba-marquee {
    background: var(--void);
    border-top: 1px solid var(--line-dark);
    border-bottom: 1px solid var(--line-dark);
    overflow: hidden;
    height: 42px;                     /* reduced from 46px */
    display: flex; align-items: center;
}
.stasis .ba-marquee-track {
    display: flex;
    align-items: center;
    white-space: nowrap;
    animation: ba-marquee 30s linear infinite;
}
.stasis .ba-marquee-item {
    padding-inline: 28px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10.5px;
    color: var(--mist);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 500;
    position: relative;
}
.stasis .ba-marquee-item::after {
    content: "✦";
    position: absolute;
    right: 12px;
    color: var(--cryo);
    opacity: 0.5;
    font-size: 9px;
}

/* ── 13. Why Aguastatic — 6 feature cards (violet icons) ─────────── */
.stasis .ba-why {
    background: #fff;                  /* was paper-2; now pure white */
    padding: var(--section) 0;
}
.stasis .ba-features-6 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;                        /* v4.3.1 — widened from 18px to 28px so the cards
                                          breathe (per client feedback) */
}
/* v4.3.1 — feature card padding bumped up. Client feedback: text was
   hugging the card edge with no breathing room.
   v4.3.2 — rebalanced per client feedback. They wanted MORE
   horizontal space (left/right) between the text and the card
   edge, not just vertical. New padding: 32px top/bottom, 44px
   left/right. The horizontal is now visibly larger than vertical
   which is the "spacious card" feel they asked for.
   v4.3.3 — added !important on the padding (and !important on
   the text-related properties) so a theme override (Astra's
   `.entry-content article` for example) cannot win the specificity
   war. This is the most defensive form of CSS and is intentional
   for this specific selector — the client has explicitly asked
   for the spacing and we will not let a parent theme undo it. */
.stasis .ba-feature-card {
    background: #fff !important;
    border: 1px solid var(--line-light) !important;
    border-radius: 14px !important;
    padding: 32px 44px 32px 44px !important;
    transition: transform .3s var(--ease-out, ease), box-shadow .3s var(--ease-out, ease), border-color .3s var(--ease-out, ease) !important;
    position: relative !important;
}
.stasis .ba-feature-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 32px -22px rgba(139, 92, 246, 0.25);
    border-color: rgba(139, 92, 246, 0.30);
}
.stasis .ba-feature-num {
    position: absolute;
    top: 14px;
    right: 18px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: var(--mist);
    letter-spacing: 0.04em;
}
.stasis .ba-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;         /* reduced from 38 to 44 for visual weight */
    border-radius: 12px;
    background: linear-gradient(135deg, var(--violet) 0%, var(--violet-2) 100%);
    color: #fff;
    margin-bottom: 14px;
    box-shadow: 0 8px 16px -8px rgba(139, 92, 246, 0.45);
}
.stasis .ba-feature-card h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 16.5px;                   /* v4.3.1 — bumped from 16px for readability */
    color: var(--ink);
    margin: 0 0 10px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.35;
}
.stasis .ba-feature-card p {
    font-size: 13.5px;                   /* v4.3.1 — bumped from 13px for readability */
    line-height: 1.65;                   /* v4.3.1 — bumped from 1.6 */
    color: var(--graphite, #4A5A6E);
    margin: 0;
}

/* ── 13.5 BUNDLE PICKER (v3.5: 1 / 4 / 8 / 10 tiers) ──────────────── */
.stasis .ba-bundles {
    background: var(--paper-2);
    padding: var(--section) 0;
}
.stasis .ba-bundles-grid {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: clamp(36px, 5vw, 64px);
    align-items: center;
}
.stasis .ba-bundles-stage {
    position: sticky;
    top: 124px;
    perspective: 1400px;
}
.stasis .ba-bundles-stage-frame {
    position: relative;
    aspect-ratio: 1 / 1.05;
    border-radius: 22px;
    padding: clamp(20px, 4vw, 50px);
    background: #fff;
    border: 1px solid var(--line-light);
    box-shadow:
        0 36px 70px -38px rgba(14, 21, 32, 0.30),
        inset 0 0 0 1px rgba(255,255,255,0.5);
    transform-style: preserve-3d;
    transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
    overflow: hidden;
}
.stasis .ba-bundles-stage-frame::before {
    content: "";
    position: absolute;
    left: 50%; bottom: 8%;
    width: 70%; height: 30%;
    transform: translateX(-50%);
    background: radial-gradient(ellipse, rgba(94, 200, 242, 0.30), transparent 72%);
    filter: blur(6px);
    z-index: 0;
    opacity: 0;
    transition: opacity 1s var(--ease);
}
.stasis .ba-bundles-stage-frame.is-visible::before { opacity: 1; }
.stasis .ba-vial-stage {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex; align-items: center; justify-content: center;
}
.stasis .ba-bundle-stage-stack {
    position: relative;
    width: 75%;
    aspect-ratio: 1 / 1.2;
    perspective: 1200px;
    transform-style: preserve-3d;
    /* v4.1.4 — was using mix-blend-mode: multiply on the vial
       image to strip the black backdrop. That clobbered the 3D
       perspective transforms in some browsers (bottles rendered
       flat / wrong). Reverted to a clean white container; the
       drop-shadow filter on the img gives a soft visual
       separation between bottle and background. */
    background: radial-gradient(ellipse at center, #fff 0%, #F5F8FB 80%);
    border-radius: 18px;
}
.stasis .ba-bundle-stage-stack .ba-vial img {
    background: transparent;
}
.stasis .ba-vial {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
    will-change: transform, opacity;
}
/* v4.3.1 — removed the two drop-shadows on the vial image at the
   client's request. They were visually heavy (the big 44px black
   shadow + the blue glow) and competed with the "lab-grade clean"
   feeling of the rest of the page. The vial is now a clean, flat
   photo on a clean background — premium, not theatrical. */
.stasis .ba-vial img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.stasis .ba-vial--secondary { opacity: 0; }
.stasis .ba-stage-meta {
    position: absolute;
    left: 50%;
    bottom: 4%;
    transform: translateX(-50%);
    z-index: 2;
    text-align: center;
    pointer-events: none;
}
.stasis .ba-stage-count {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(40px, 4.6vw, 64px);
    font-weight: 700;
    line-height: 1;
    color: var(--cryo-deep);
    text-shadow: 0 0 18px rgba(36, 97, 255, 0.18);
}
.stasis .ba-stage-count.is-pop { animation: ba-pop .55s var(--ease-bounce); }
@keyframes ba-pop { 0% { transform: scale(0.5); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
.stasis .ba-stage-label {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 13px;
    color: var(--ink);
    margin-top: 4px;
    font-weight: 600;
}
.stasis .ba-stage-sub {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--graphite);
    margin-top: 2px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.stasis .ba-shop-stage-caption {
    display: flex; justify-content: space-between; font-size: 10px;
    margin-top: 16px; padding: 0 8px; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--cryo-deep);
    font-weight: 500;
}
.stasis .ba-bundle-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: visible;   /* don't clip the gradient ::before on hover */
}
.stasis .ba-bundle-card {
    position: relative;
    z-index: 1;          /* explicit stacking — keeps cards from
                            visually overlapping on hover/active */
    background: #fff;
    border: 1px solid var(--line-light);
    border-radius: 14px;
    padding: 14px 18px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 14px;
    text-align: left;
    transition: border-color .3s var(--ease),
                transform .3s var(--ease-out),
                box-shadow .3s var(--ease-out);
    width: 100%;
    cursor: pointer;
    /* v4.1.1 — was `overflow: hidden`, which clipped the
       STARTER / POPULAR / BEST VALUE pill at the right edge.
       Replaced with `clip-path: none` + a small padding so the
       tag can render fully even when the card is narrow. */
    overflow: visible;
    min-height: 64px;
}
.stasis .ba-bundle-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(94, 200, 242, 0.08), transparent 60%);
    opacity: 0;
    transition: opacity .3s var(--ease);
    pointer-events: none;
}
.stasis .ba-bundle-card:hover {
    border-color: var(--cryo);
    transform: translateY(-2px);
    box-shadow: 0 18px 40px -24px rgba(14, 21, 32, 0.30);
}
.stasis .ba-bundle-card:hover::before { opacity: 1; }
.stasis .ba-bundle-card.is-active {
    border: 1px solid transparent;
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(120deg, var(--brass), var(--cryo)) border-box;
    box-shadow: 0 18px 40px -24px rgba(94, 200, 242, 0.45);
}
.stasis .ba-bundle-card.is-active::after {
    content: "✓ Selected";
    position: absolute;
    top: 8px; right: 14px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9px;
    color: var(--green);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
}
.stasis .ba-bundle-card--featured {
    background: linear-gradient(180deg, #FFFDF6 0%, #fff 100%);
}
.stasis .ba-bundle-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.stasis .ba-bundle-name {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 15.5px;
    color: var(--ink);
    font-weight: 600;
    line-height: 1.25;
}
.stasis .ba-bundle-meta {
    font-size: 12px;
    color: var(--graphite);
    line-height: 1.4;
}
.stasis .ba-bundle-right {
    text-align: right;
    display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
}
.stasis .ba-bundle-tag {
    font-size: 10px;          /* v4.1.1 — was 9px; bumped so STARTER /
                                POPULAR / BEST VALUE renders fully
                                without getting truncated on narrow
                                cards. */
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
    background: var(--brass);
    padding: 4px 10px;
    border-radius: 100px;
    font-family: 'IBM Plex Mono', monospace;
    white-space: nowrap;       /* v4.1.1 — never wrap. */
    display: inline-block;
    max-width: 100%;
    overflow: visible;
    min-height: 20px;
    line-height: 1;
}
.stasis .ba-bundle-price {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
@media (max-width: 920px) {
    .stasis .ba-bundles-grid { grid-template-columns: 1fr; gap: 32px; }
    .stasis .ba-bundles-stage { position: relative; top: 0; max-width: 460px; margin: 0 auto; }
}

/* ── 14. Built for Accuracy (split) ───────────────────────────────── */
.stasis .ba-accuracy {
    background: var(--cream);
    padding: var(--section) 0;
}
.stasis .ba-split {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: clamp(36px, 5vw, 64px);
    align-items: center;
}
.stasis .ba-split-media {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 50px -26px rgba(11, 21, 36, 0.22);
}
.stasis .ba-split-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    /* v4.1.1 — image quality fix. The "Behind the Vial" photo was
       rendering slightly soft because the source PNG was upscaled
       to 1400w and the browser was resampling on every paint.
       The two CSS properties below tell the browser to use a
       high-quality resampling filter and to size the image at its
       intrinsic dimensions so it doesn't get re-baked. */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: high-quality;
    -ms-interpolation-mode: bicubic;
    object-fit: cover;
    display: block;
}
.stasis .ba-split-copy h2 {
    font-size: clamp(26px, 3vw, 38px);    /* reduced */
    margin: 0 0 14px;
    line-height: 1.12;
}
.stasis .ba-split-copy p {
    font-size: 14.5px;                    /* reduced */
    line-height: 1.7;
    margin-bottom: 18px;
    max-width: 56ch;
}
.stasis .ba-mini-badges {
    display: flex; flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}
.stasis .ba-mini-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: #fff;
    border: 1px solid var(--line-light);
    border-radius: 100px;
    padding: 5px 12px 5px 8px;
    font-size: 12px;
    color: var(--ink);
    font-weight: 500;
}
.stasis .ba-mini-icon {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── 15. Process ───────────────────────────────────────────────────── */
.stasis .ba-process {
    background: var(--paper-2);
    padding: var(--section) 0;
}
.stasis .ba-process-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    position: relative;
}
.stasis .ba-process-list::before {
    content: "";
    position: absolute;
    left: 8%; right: 8%;
    top: 26px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cryo), transparent);
    z-index: 0;
}
.stasis .ba-process-step {
    position: relative;
    z-index: 1;
    text-align: left;
    padding-right: 16px;
}
.stasis .ba-process-num {
    width: 52px; height: 52px;        /* reduced */
    border-radius: 50%;
    background: var(--paper-2);
    border: 1.5px solid var(--cryo);
    color: var(--cryo-deep);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 16px;
    box-shadow: 0 0 0 6px var(--paper-2);
    transition: transform .3s var(--ease-bounce), background .3s var(--ease), color .3s var(--ease);
}
.stasis .ba-process-step:hover .ba-process-num {
    background: var(--cryo);
    color: var(--void);
    transform: scale(1.08);
}
.stasis .ba-process-step h4 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 15.5px;
    color: var(--ink);
    margin-bottom: 6px;
    font-weight: 600;
}
.stasis .ba-process-step p {
    font-size: 13px;
    line-height: 1.65;
}

/* ── 16. Reviews + Stats (violet circles, green rating pill) ──────── */
.stasis .ba-reviews {
    background: var(--cream);
    padding: var(--section) 0;
}
.stasis .ba-reviews .ba-split { gap: clamp(40px, 5vw, 64px); }
.stasis .ba-reviews h2 { font-size: clamp(26px, 3vw, 38px); margin: 0; line-height: 1.12; }
/* v4.1.7 — reverted to the v4.1.5 vertical-stack layout. The 3-column
   horizontal grid I tried in v4.1.6 made each card too narrow
   (~384px), which forced the body quote to wrap to 4 lines and
   made the cards look "tall and cramped". Stacking them vertically
   AND giving the right column a much wider share (60% of the
   container = ~720px per card) makes the white border frame
   "longer horizontally" and the quotes fit naturally on 2-3 lines
   instead of 4. The stats column is now a thin 0.8fr aside. */
.stasis .ba-reviews .ba-split { grid-template-columns: 0.8fr 2.2fr; align-items: start; }

.stasis .ba-stats {
    display: flex; flex-direction: column;
    gap: 20px;
    margin-top: 8px;
}
.stasis .ba-stat {
    display: flex; align-items: center; gap: 18px;
}
.stasis .ba-stat-circle {
    flex-shrink: 0;
    width: 84px; height: 84px;          /* reduced from 96px */
    border-radius: 50%;
    background: linear-gradient(135deg, var(--violet) 0%, var(--violet-2) 100%);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 20px;                    /* reduced from 22 */
    font-weight: 700;
    box-shadow: 0 10px 24px -10px rgba(139, 92, 246, 0.55);
}
.stasis .ba-stat-label {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--ink-soft);
    max-width: 36ch;
}
.stasis .ba-stat-label strong { color: var(--ink); font-weight: 600; }

.stasis .ba-reviews-head { margin-bottom: 18px; }
.stasis .ba-rating-pill {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--green);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 100px;
    margin-bottom: 12px;
    box-shadow: 0 6px 16px -8px rgba(23, 178, 106, 0.5);
}
.stasis .ba-stars { color: #fff; letter-spacing: 0.1em; font-size: 12px; }
.stasis .ba-reviews h3 { font-size: clamp(20px, 2.2vw, 26px); margin: 0 0 14px; }

.stasis .ba-review-list {
    /* v4.1.7 — reverted to the vertical flex stack (like v4.1.5
       and earlier). The 3-column grid (v4.1.6) was too cramped.
       Now the cards are STACKED, with the right column much
       wider (2.2fr) so each card has ~720px of horizontal room.
       The body quote fits naturally on 2-3 lines and the white
       border frame looks "long and rectangular" horizontally,
       which is what the user wanted. */
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: 12px 0;
    overflow: visible;   /* don't clip the avatar circle */
}
.stasis .ba-review-card {
    background: #fff !important;
    border: 1px solid var(--line-light, #E5EAF1) !important;
    border-radius: 16px !important;
    /* v4.1.9 — MUCH larger left padding (72px) so the gap from
       the card's left edge to where the quote starts is clearly
       visible. !important on every property to beat any cache /
       older rule that might be loading. Right side stays at 24px
       so the right border doesn't feel cramped. Top/bottom
       padding reduced to 12px so the card is ~4px shorter
       vertically. */
    margin: 4px 0 !important;
    padding: 12px 24px 12px 72px !important;
    overflow: visible !important;   /* don't clip the hover shadow or the avatar */
    transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
    box-shadow:
        0 1px 2px rgba(11, 21, 36, 0.04),
        0 6px 16px -10px rgba(11, 21, 36, 0.08) !important;
    min-width: 0;             /* v4.3.1 — prevent grid blow-out */
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.stasis .ba-review-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px -22px rgba(11, 21, 36, 0.16);
}
.stasis .ba-review-stars {
    color: var(--brass);
    font-size: 11.5px;
    letter-spacing: 0.12em;
    margin-bottom: 4px;
}
.stasis .ba-review-card h4 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 14px;
    color: var(--ink);
    margin: 0 0 4px;
    line-height: 1.3;
    font-weight: 600;
}
.stasis .ba-review-card p {
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--ink-soft);
    margin: 0 0 8px;
}
.stasis .ba-review-author {
    display: flex; align-items: center; gap: 8px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10.5px;
    color: var(--graphite);
    letter-spacing: 0.04em;
}
.stasis .ba-review-avatar {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--violet), var(--violet-2));
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 10px;
    font-weight: 700;
}

/* ── 17. Final CTA + Disclaimer ────────────────────────────────────── */
.stasis .ba-cta {
    background: #fff;                  /* was cream; now white to match */
    padding: var(--section) 0;
}
.stasis .ba-cta-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 28px;
}
.stasis .ba-disclaimer {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    font-size: 11.5px;
    line-height: 1.7;
    color: var(--graphite);
    padding: 18px 22px;
    background: var(--paper-2);
    border: 1px solid var(--line-light);
    border-radius: 12px;
}
.stasis .ba-disclaimer strong { color: var(--ink); }

/* ── 18. FAQ (+ icon) ──────────────────────────────────────────────── */
.stasis .ba-faq-section {
    background: var(--paper-2);
    padding: var(--section) 0;
}
.stasis .ba-faq {
    max-width: 820px;
    margin: 0 auto;
    display: flex; flex-direction: column;
    gap: 0;
}
.stasis .ba-faq-item {
    border-bottom: 1px solid var(--line-light);
}
.stasis .ba-faq-item:first-child { border-top: 1px solid var(--line-light); }
.stasis .ba-faq-q {
    list-style: none;
    cursor: pointer;
    padding: 18px 4px;                 /* reduced from 22 */
    font-family: 'Space Grotesk', sans-serif;
    font-size: 15px;                    /* reduced from 16 */
    font-weight: 600;
    color: var(--ink);
    display: flex; align-items: center; gap: 16px;
    position: relative;
    line-height: 1.4;
}
.stasis .ba-faq-q::-webkit-details-marker { display: none; }
.stasis .ba-faq-q::after {
    content: "+";
    margin-left: auto;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--cryo-deep);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 300;
    flex-shrink: 0;
    transition: transform .25s var(--ease), background .25s var(--ease);
}
.stasis .ba-faq-item[open] .ba-faq-q::after {
    content: "−";
    background: var(--violet);
    transform: rotate(180deg);
}
.stasis .ba-faq-a-inner {
    padding: 0 4px 18px;
    color: var(--ink-soft);
    font-size: 13.5px;
    line-height: 1.7;
}
.stasis .ba-faq-a-inner p { margin: 0; }

/* ── 19. Tagline marquee (✦ separators) ───────────────────────────── */
.stasis .ba-tagline-marquee {
    background: #fff;
    border-top: 1px solid var(--line-light);
    border-bottom: 1px solid var(--line-light);
    overflow: hidden;
    height: 64px;                       /* reduced from 80 */
    display: flex; align-items: center;
}
.stasis .ba-tagline-track {
    display: flex;
    align-items: center;
    white-space: nowrap;
    animation: ba-marquee 32s linear infinite;
    gap: 24px;
    padding-inline: 24px;
}
.stasis .ba-tagline-item {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 16px;                    /* reduced from clamp(20, 2.2vw, 28) */
    font-weight: 600;
    color: rgba(11, 21, 36, 0.55);
    flex-shrink: 0;
    letter-spacing: -0.01em;
}
.stasis .ba-tagline-sep {
    color: var(--cryo-deep);
    opacity: 0.45;
    font-size: 11px;
    flex-shrink: 0;
}

/* ── 20. Footer (smaller, light wordmark, 3 link cols) ─────────────── */
.stasis .ba-footer {
    background: #0B1B4E;
    color: #fff;
    padding: 48px 0 22px;              /* reduced from 64 0 24 */
    font-size: 13px;
}
.stasis .ba-footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;     /* 4 cols, not 5 */
    gap: 32px;
    margin-bottom: 32px;                /* reduced from 56px */
}
.stasis .ba-footer-brand { display: flex; flex-direction: column; gap: 12px; }
.stasis .ba-footer-brand-row {
    display: flex; align-items: center; justify-content: center; gap: 10px;
}
.stasis .ba-footer-brand .ba-brand-mark {
    color: #fff; width: auto; height: clamp(120px, 16vw, 180px);
    margin: 0 auto 8px;
    filter: drop-shadow(0 0 18px rgba(94, 200, 242, 0.18));
}
.stasis .ba-footer-brand .ba-brand-word {
    font-size: 18px;
    color: #fff;
}
.stasis .ba-footer-brand p {
    color: rgba(255,255,255,0.7);
    font-size: 12.5px;
    line-height: 1.6;
    max-width: 320px;
}
.stasis .ba-footer h5 {
    color: #fff;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    margin: 0 0 12px;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}
.stasis .ba-footer ul { display: flex; flex-direction: column; gap: 7px; }
.stasis .ba-footer a {
    color: rgba(255,255,255,0.75);
    text-decoration: none;
    transition: color .2s ease;
}
.stasis .ba-footer a:hover { color: #fff; }

.stasis .ba-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,0.10);
    font-size: 12px;
    color: rgba(255,255,255,0.6);
}
.stasis .ba-footer-legal { display: flex; gap: 20px; }
.stasis .ba-footer-legal a { color: rgba(255,255,255,0.6); }
.stasis .ba-footer-legal a:hover { color: #fff; }

/* ── 21. Reveal / motion ──────────────────────────────────────────── */
.stasis .reveal, .stasis .reveal-left, .stasis .reveal-right {
    opacity: 0;
    transition: opacity .8s var(--ease-out), transform .8s var(--ease-out), filter .8s var(--ease-out);
}
.stasis .reveal {
    transform: translateY(22px);
    filter: blur(6px);
}
.stasis .reveal-left { transform: translateX(-30px); }
.stasis .reveal-right { transform: translateX(30px); }
.stasis .is-visible.reveal,
.stasis .is-visible.reveal-left,
.stasis .is-visible.reveal-right,
.stasis .reveal.is-visible,
.stasis .reveal-left.is-visible,
.stasis .reveal-right.is-visible {
    opacity: 1;
    transform: none;
    filter: blur(0);
}
.stasis .reveal-stagger > * {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(6px);
    transition: opacity .7s var(--ease-out), transform .7s var(--ease-out), filter .7s var(--ease-out);
}
.stasis .reveal-stagger.is-visible > * { opacity: 1; transform: none; filter: blur(0); }
.stasis .reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0.04s; }
.stasis .reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.12s; }
.stasis .reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.20s; }
.stasis .reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.28s; }
.stasis .reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.36s; }
.stasis .reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 0.44s; }

/* ── 22. Scroll progress (cryo meniscus) ──────────────────────────── */
.stasis .ba-progress {
    position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 90;
    background: transparent; pointer-events: none;
}
.stasis .ba-progress-fill {
    height: 100%; width: 0%;
    transform-origin: left;
    background: linear-gradient(90deg, var(--cryo-deep), var(--cryo) 60%, var(--cryo-soft));
    box-shadow: 0 0 10px 1px rgba(94, 200, 242, 0.6);
    transition: width .08s linear;
}

/* ── 23. Responsive (mobile / tablet / desktop) ───────────────────── */
@media (max-width: 1100px) {
    .stasis .ba-hero-inner { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .stasis .ba-coa-hud { margin: 0 auto; max-width: 420px; }
    .stasis .ba-footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 24px; }
    .stasis .ba-footer-brand { grid-column: span 2; }
}
@media (max-width: 920px) {
    .stasis .ba-split { grid-template-columns: 1fr; gap: 32px; }
    .stasis .ba-split-media { max-width: 480px; margin: 0 auto; }
    .stasis .ba-features-6 { grid-template-columns: repeat(2, 1fr); }
    .stasis .ba-process-list { grid-template-columns: repeat(2, 1fr); }
    .stasis .ba-process-list::before { display: none; }
    /* v4.1.7 — reviews stack back to single column on mobile */
    .stasis .ba-review-list { gap: 18px; }
}
@media (max-width: 760px) {
    .stasis .ba-header-inner { grid-template-columns: 1fr auto 1fr; }
    .stasis .ba-nav-left { display: none; }
    .stasis .ba-nav-toggle { display: inline-flex; justify-self: end; }
    .stasis .ba-brand { justify-self: start; }
    .stasis .ba-footer-grid { grid-template-columns: 1fr; gap: 24px; }
    .stasis .ba-footer-brand { grid-column: auto; }
    .stasis .ba-footer-bottom { flex-direction: column; align-items: flex-start; }

    /* v4.3.1 — Reviews section on phones. The 72px left padding for
       the avatar ate too much horizontal room on 320-360px phones,
       making the right column look cramped and the h3 "What labs are
       saying" feel cut off. Switch to a flat card (avatar above
       content), tighten the gutter, and add a clear heading. */
    .stasis .ba-reviews { padding: 56px 0; }
    .stasis .ba-reviews .ba-split { gap: 28px; }
    .stasis .ba-reviews-head { text-align: left; }
    .stasis .ba-rating-pill { font-size: 11px; padding: 6px 12px; }
    .stasis .ba-reviews h2 { font-size: clamp(24px, 6.4vw, 30px); }
    .stasis .ba-reviews h3 { font-size: 19px; margin: 12px 0 14px; }
    .stasis .ba-review-list { padding: 0; gap: 14px; }
    .stasis .ba-review-card {
        padding: 18px 20px 18px 20px !important;
        margin: 0 !important;
    }
    .stasis .ba-review-card p { font-size: 13.5px; line-height: 1.6; }
    .stasis .ba-review-card h4 { font-size: 14.5px; margin: 2px 0 6px; }
    .stasis .ba-review-stars { font-size: 12px; }
    .stasis .ba-review-author {
        font-size: 11px;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
    }
    .stasis .ba-review-avatar { width: 24px; height: 24px; font-size: 9.5px; }

    /* Stats — drop the big circles on small screens, inline layout
       so the section is scannable. */
    .stasis .ba-stats { gap: 18px; }
    .stasis .ba-stat { gap: 14px; align-items: flex-start; }
    .stasis .ba-stat-circle {
        flex: 0 0 56px;
        width: 56px; height: 56px;
        font-size: 15px;
    }
    .stasis .ba-stat-label { font-size: 13px; line-height: 1.5; }
}
@media (max-width: 480px) {
    .stasis .ba-hero { min-height: 460px; }
    .stasis .ba-hero-title { font-size: clamp(30px, 8vw, 40px); }
    .stasis .ba-hero-actions { flex-direction: column; align-items: stretch; }
    .stasis .ba-btn { justify-content: center; }
    .stasis .ba-features-6 { grid-template-columns: 1fr; }
    .stasis .ba-process-list { grid-template-columns: 1fr; }
    .stasis .ba-stat { flex-direction: column; align-items: flex-start; gap: 10px; }
    .stasis .ba-stat-circle { width: 72px; height: 72px; font-size: 17px; }

    /* v4.3.1 — even tighter review card on the smallest phones. */
    .stasis .ba-review-card { padding: 16px 18px !important; }
    .stasis .ba-review-card p { font-size: 13px; }
}

/* ── 24. Reduced motion ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .stasis *, .stasis *::before, .stasis *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .stasis .reveal, .stasis .reveal-left, .stasis .reveal-right,
    .stasis .reveal-stagger > * {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
    .stasis .ba-hero-title .ba-word > span { transform: none !important; }
}

/* ------------------------------------------------------------------------
   v3.6 � NEW COMPONENTS
   ------------------------------------------------------------------------ */

/* -- EN/ES language toggle (header) -------------------------------- */
.stasis .ba-lang-toggle {
    display: inline-flex;
    align-items: center;
    background: var(--paper-soft, #F5F7FB);
    border: 1px solid var(--line-light, #E5EAF1);
    border-radius: 100px;
    padding: 3px;
    margin-right: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    height: 30px;
}
.stasis .ba-lang-toggle__opt {
    background: transparent;
    border: 0;
    padding: 0 10px;
    height: 24px;
    border-radius: 100px;
    color: var(--ink-soft, #4A5568);
    cursor: pointer;
    font: inherit;
    transition: background .2s ease, color .2s ease;
    line-height: 1;
}
.stasis .ba-lang-toggle__opt:hover { color: var(--ink, #0B1220); }
.stasis .ba-lang-toggle__opt.is-active {
    background: var(--ink, #0B1220);
    color: #fff;
}
@media (max-width: 760px) {
    .stasis .ba-lang-toggle { margin-right: 0; }
}

/* -- Bundle stage polish (v3.6) ------------------------------------ */
.stasis .ba-vial.is-pop {
    animation: ba-vial-pop .55s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes ba-vial-pop {
    0%   { transform: scale(1);    filter: drop-shadow(0 0 0 rgba(36,97,255,0)); }
    40%  { transform: scale(1.08); filter: drop-shadow(0 0 28px rgba(36,97,255,.45)); }
    100% { transform: scale(1);    filter: drop-shadow(0 0 0 rgba(36,97,255,0)); }
}
.stasis .ba-vial--secondary.is-tilt {
    animation: ba-vial-tilt .6s cubic-bezier(.34, 1.56, .64, 1) both;
}
@keyframes ba-vial-tilt {
    0%   { transform: rotate(-2deg) scale(0.96); }
    60%  { transform: rotate(1.5deg) scale(1.02); }
    100% { transform: rotate(0deg) scale(1); }
}

/* -- Floating Chatbot widget (AquaBot) ------------------------------ */
.ba-chatbot {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 9000;
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
}
.ba-chatbot__bubble {
    position: relative;
    width: 60px; height: 60px;
    border-radius: 50%;
    border: 0;
    background: linear-gradient(135deg, #4F8BFF 0%, #2461FF 100%);
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(36, 97, 255, 0.45), 0 2px 6px rgba(0, 0, 0, 0.2);
    display: flex; align-items: center; justify-content: center;
    transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s ease;
    padding: 0;
    overflow: visible;
}
.ba-chatbot__bubble:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 14px 38px rgba(36, 97, 255, 0.55);
}
.ba-chatbot__avatar {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}
.ba-chatbot__pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(79, 139, 255, 0.6);
    animation: ba-chatbot-pulse 2.4s ease-out infinite;
    pointer-events: none;
}
@keyframes ba-chatbot-pulse {
    0%   { transform: scale(.9);  opacity: .7; }
    100% { transform: scale(1.6); opacity: 0; }
}
.ba-chatbot__panel {
    position: absolute;
    right: 0; bottom: 76px;
    width: min(360px, calc(100vw - 32px));
    max-height: min(560px, calc(100vh - 110px));
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22), 0 2px 6px rgba(0, 0, 0, 0.06);
    display: flex; flex-direction: column;
    overflow: hidden;
    transform: translateY(12px) scale(.96);
    opacity: 0;
    pointer-events: none;
    transition: transform .26s cubic-bezier(.34, 1.56, .64, 1), opacity .2s ease;
}
.ba-chatbot__panel.is-open {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
}
.ba-chatbot__head {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    background: linear-gradient(135deg, #4F8BFF 0%, #2461FF 100%);
    color: #fff;
}
.ba-chatbot__head-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,0.4);
}
.ba-chatbot__name { font-weight: 700; font-size: 14px; }
.ba-chatbot__status {
    font-size: 11px;
    opacity: .9;
    display: flex; align-items: center; gap: 5px;
}
.ba-chatbot__status-dot {
    width: 7px; height: 7px;
    background: #5AE3A2;
    border-radius: 50%;
    box-shadow: 0 0 6px #5AE3A2;
}
.ba-chatbot__close {
    margin-left: auto;
    width: 30px; height: 30px;
    border: 0; background: rgba(255,255,255,0.12);
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .2s ease;
}
.ba-chatbot__close:hover { background: rgba(255,255,255,0.24); }
.ba-chatbot__body {
    flex: 1; min-height: 0;
    overflow-y: auto;
    padding: 14px;
    background: #F7F9FD;
    display: flex; flex-direction: column; gap: 8px;
}
.ba-chatbot__msg {
    max-width: 86%;
    padding: 10px 12px;
    border-radius: 14px;
    font-size: 13.5px;
    line-height: 1.5;
    word-wrap: break-word;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.ba-chatbot__msg--bot {
    background: #fff;
    color: var(--ink, #0B1220);
    border-bottom-left-radius: 4px;
    align-self: flex-start;
}
.ba-chatbot__msg--user {
    background: linear-gradient(135deg, #4F8BFF 0%, #2461FF 100%);
    color: #fff;
    border-bottom-right-radius: 4px;
    align-self: flex-end;
}
.ba-chatbot__msg a { color: var(--cryo-deep, #1E40AF); text-decoration: underline; }
.ba-chatbot__human-btn {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 12px;
    background: var(--green, #17B26A);
    color: #fff;
    border-radius: 10px;
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 600;
    transition: background .2s ease, transform .2s ease;
    margin-top: -2px;
}
.ba-chatbot__human-btn:hover { background: #129456; transform: translateY(-1px); }
.ba-chatbot__chips {
    padding: 8px 12px 0;
    background: #F7F9FD;
    display: flex; flex-wrap: wrap; gap: 6px;
    max-height: 96px; overflow-y: auto;
}
.ba-chatbot__chip {
    background: #fff;
    border: 1px solid var(--line-light, #E5EAF1);
    border-radius: 100px;
    padding: 6px 10px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--cryo-deep, #1E40AF);
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
    line-height: 1.2;
}
.ba-chatbot__chip:hover {
    background: var(--cryo, #2461FF);
    border-color: var(--cryo, #2461FF);
    color: #fff;
}
.ba-chatbot__form {
    display: flex; gap: 6px;
    padding: 10px 12px 12px;
    background: #F7F9FD;
    border-top: 1px solid var(--line-light, #E5EAF1);
}
.ba-chatbot__input {
    flex: 1; min-width: 0;
    background: #fff;
    border: 1px solid var(--line-light, #E5EAF1);
    border-radius: 10px;
    padding: 9px 12px;
    font: inherit;
    font-size: 13.5px;
    color: var(--ink, #0B1220);
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.ba-chatbot__input:focus {
    border-color: var(--cryo, #2461FF);
    box-shadow: 0 0 0 3px rgba(36, 97, 255, 0.15);
}
.ba-chatbot__send {
    width: 38px; height: 38px;
    flex: 0 0 38px;
    border: 0;
    background: var(--green, #17B26A);
    color: #fff;
    border-radius: 10px;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .2s ease, transform .15s ease;
}
.ba-chatbot__send:hover { background: #129456; transform: translateY(-1px); }
@media (max-width: 480px) {
    .ba-chatbot { right: 14px; bottom: 14px; }
    .ba-chatbot__panel {
        right: -6px; bottom: 70px;
        width: calc(100vw - 28px);
    }
}

/* ============================================================================
   v4.0 — Bacteriostatic Agua rebrand + 3-tier bundle picker + add-to-cart
   ----------------------------------------------------------------------------
   1. Text wordmark in the header is now "Bacteriostatic Agua" with italic
      "Agua" — slightly bigger than the v3 "aqua<em>stasis</em>" was.
   2. Footer wordmark is the IMAGE bacteriostaticagua-wordmark.webp (the
      artist's "bacteri + drop + static + agua" design with the dark navy
      background removed). The dark hero of the design sits naturally on
      the dark footer.
   3. Bundle picker now has 3 cards (1 / 5 / 10 vials) with sale prices
      (was/now), three tag variants (STARTER, POPULAR, BEST VALUE), and
      a single Add to Cart button below that opens the mini-cart drawer
      instead of redirecting to /cart/.
   4. Bundle stage vial arrangement is the new 1 / 5-diamond / 10-cluster
      layout (see ba-home.js buildVialLayout).
   ============================================================================ */

/* ── 25. Header brand mark (v3 SVG lockup) ─────────────────────── */
/* The header uses a single self-contained SVG that embeds the
   spiral photo + BACTERIOSTATIC AGUA wordmark + LAB GRADE tagline.
   The SVG carries its own colors (deep onyx-navy wordmark, gold
   tagline). We keep it DARK everywhere — the header background is
   light (white) at all scroll positions on the home page, so the
   dark wordmark stays readable both at the top (no .is-scrolled)
   and after scroll. No more filter flip. */
.stasis .ba-header .ba-brand-mark {
    display: block;
    height: clamp(56px, 6.5vw, 72px);
    width: auto;
    transition: opacity .2s var(--ease, ease);
}
.stasis .ba-header .ba-brand-mark:hover { opacity: 0.78; }
/* v4.4.12 — The new header logo is a <picture><source>…<img></picture>
   stack. Without `display: contents` on the <picture>, the picture
   element gets its own anonymous box and the existing `.ba-brand-mark`
   rules (which target the inner <img>) would render the img inside a
   separate, unstyled container. contents erases the picture's box so
   the <img> is a direct flex child of `.ba-brand` for layout
   purposes — same as the old SVG-only case. Well-supported
   (Chrome 65+, Firefox 37+, Safari 11.1+, Edge 79+). */
.stasis .ba-header picture { display: contents; }

/* ── 26. Footer brand mark (v3 SVG vertical stack) ─────────────── */
/* Same SVG, vertical layout. The footer is always on the dark navy
   background, so we use the LIGHT variant which has a cream wordmark
   baked in. */
.stasis .ba-footer .ba-brand-mark {
    display: block;
    height: auto;
    width: clamp(160px, 14vw, 200px);
    margin: 0 auto 8px;
    filter: drop-shadow(0 0 18px rgba(94, 200, 242, 0.20));
}
.stasis .ba-footer .ba-footer-brand-row {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    margin-bottom: 8px;
}

/* ── 27. Bundle card: was / now prices + tag color variants ────────── */
.stasis .ba-bundle-card .ba-bundle-price {
    display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
    line-height: 1.1;
}
.stasis .ba-bundle-card .ba-was {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: var(--ink-soft, #6B7280);
    text-decoration: line-through;
    font-weight: 500;
    letter-spacing: 0.02em;
}
.stasis .ba-bundle-card .ba-now {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--ink, #0B1220);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

/* Tag color variants. Default is brass (POPULAR). */
.stasis .ba-bundle-card .ba-bundle-tag {
    color: #fff;
    background: var(--brass, #CBA05B);
}
.stasis .ba-bundle-card .ba-bundle-tag:empty { display: none; }
/* STARTER → cool gray */
.stasis .ba-bundle-card .ba-bundle-tag:empty + .ba-bundle-price { margin-top: 4px; }
.stasis .ba-bundle-card[data-bundle-tier="single"] .ba-bundle-tag {
    background: var(--graphite, #6B7B8E);
}
/* BEST VALUE → cryo (the deep blue accent) */
.stasis .ba-bundle-card[data-bundle-tier="10pack"] .ba-bundle-tag {
    background: var(--cryo-deep, #2461FF);
    color: #fff;
}
/* v4.1.1 — BEST SELLER (3-pack) → green */
.stasis .ba-bundle-card[data-bundle-tier="3pack"] .ba-bundle-tag {
    background: var(--green, #17B26A);
    color: #fff;
}

/* ── 28. Add-to-cart row (spans the full bundle-picker width) ────── */
/* The .ba-bundle-atc is a SIBLING of .ba-bundle-list inside the
   .ba-bundles-grid (2-column). Without explicit grid placement, grid
   auto-flow would drop it into column 1 row 2 (under the stage) which
   looks broken. Force it to span both columns so it sits as a
   full-width footer row below both the stage and the bundle list. */
.stasis .ba-bundles-grid > .ba-bundle-atc {
    grid-column: 1 / -1;
    margin-top: 16px;
    display: flex; flex-direction: column; gap: 6px;
}
.stasis .ba-bundle-atc__btn {
    width: 100%;
    padding: 12px 18px;          /* compact — not xl, not button-padding */
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.01em;
    justify-content: center;
    gap: 6px;
    border-radius: 100px;
    position: relative;
    transition: transform .15s var(--ease), box-shadow .25s var(--ease), background .2s var(--ease);
}
.stasis .ba-bundle-atc__btn .ba-bundle-atc__name {
    font-weight: 700;
}
.stasis .ba-bundle-atc__btn .ba-bundle-atc__dot { opacity: 0.7; }
.stasis .ba-bundle-atc__btn.is-added {
    background: var(--green, #17B26A) !important;
    box-shadow: 0 18px 40px -20px rgba(23, 178, 106, 0.55);
    animation: ba-atc-pulse 1.4s var(--ease-bounce);
}
.stasis .ba-bundle-atc__btn.is-error {
    background: #DC2626 !important;
    animation: ba-atc-shake .35s var(--ease);
}
.stasis .ba-bundle-atc__btn.is-loading {
    pointer-events: none;
    opacity: 0.85;
}
/* v4.3.4 — Inline error message under the ATC button. Replaces
   the old mailto: fallthrough that hijacked the click and
   opened the user's email client. */
.stasis .ba-bundle-atc__err {
    margin-top: 10px;
    padding: 10px 14px;
    background: #FEF2F2;
    border: 1px solid rgba(220, 38, 38, 0.25);
    border-radius: 8px;
    color: #991B1B;
    font-size: 12.5px;
    line-height: 1.45;
    font-weight: 500;
    text-align: center;
}
.stasis .ba-bundle-atc__btn.is-loading .ba-bundle-atc__spinner {
    display: inline-block;
    width: 14px; height: 14px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ba-atc-spin .8s linear infinite;
    margin-right: 2px;
}
@keyframes ba-atc-spin { to { transform: rotate(360deg); } }
@keyframes ba-atc-pulse {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.04); box-shadow: 0 22px 48px -16px rgba(23, 178, 106, 0.7); }
    100% { transform: scale(1); }
}
@keyframes ba-atc-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}
.stasis .ba-bundle-atc__sub {
    font-size: 12px;
    color: var(--graphite, #6B7B8E);
    margin: 0;
    text-align: center;
    letter-spacing: 0.01em;
}

/* ── 29. Mobile responsive for the bundle picker (overrides v3) ──── */
@media (max-width: 920px) {
    .stasis .ba-bundle-card {
        padding: 12px 14px;
        gap: 10px;
    }
    .stasis .ba-bundle-card .ba-bundle-name { font-size: 14.5px; }
    .stasis .ba-bundle-card .ba-bundle-meta { font-size: 11.5px; }
    .stasis .ba-bundle-card .ba-now { font-size: 19px; }
    .stasis .ba-bundle-card .ba-was { font-size: 10.5px; }
    .stasis .ba-bundle-atc { margin-top: 14px; }
}
@media (max-width: 560px) {
    .stasis .ba-bundle-card .ba-bundle-tag {
        font-size: 8.5px; padding: 2px 7px;
    }
    .stasis .ba-bundle-atc__sub { font-size: 11.5px; }
}
@media (max-width: 420px) {
    .stasis .ba-bundle-card .ba-bundle-info { min-width: 0; }
    .stasis .ba-bundle-card .ba-bundle-name { font-size: 13.5px; line-height: 1.2; }
    .stasis .ba-bundle-card .ba-bundle-meta { font-size: 11px; }
    .stasis .ba-bundle-card .ba-bundle-right { min-width: 0; }
    .stasis .ba-bundle-card .ba-now { font-size: 17px; }
    .stasis .ba-bundle-card .ba-was { font-size: 10px; }
    .stasis .ba-bundle-atc__btn { font-size: 14px; padding: 14px 18px; }
}

/* ── 30. COA HUD on hero: ALWAYS render, no entrance animation ──── */
/* v4.0.1 — Simplification. The previous version had a 1.05s-delayed
   entrance animation on the HUD which caused "shows for 1 second then
   disappears" on the live site (the animation `both` fill mode was
   conflicting with the implicit `from` state of the keyframe). We
   now skip the entrance entirely — the HUD is visible from the very
   first paint, no timing tricks, no race conditions. The visual
   richness still comes from the data bars + glow inside the HUD. */
.stasis .ba-hero .ba-coa-hud {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
}

/* v4.0 — Reduced motion: kill the chat pulse + bundle polish + new bundle animations */
@media (prefers-reduced-motion: reduce) {
    .ba-chatbot__pulse { animation: none !important; }
    .ba-chatbot__panel { transition: opacity .15s ease; }
    .stasis .ba-vial.is-pop,
    .stasis .ba-vial--secondary.is-tilt,
    .stasis .ba-bundle-atc__btn.is-added,
    .stasis .ba-bundle-atc__btn.is-error,
    .stasis .ba-bundle-atc__btn.is-loading .ba-bundle-atc__spinner { animation: none !important; }
    .stasis .ba-vial--secondary { opacity: 0.95 !important; transform: none !important; }
    .stasis .ba-hero .ba-coa-hud { animation: none !important; opacity: 1; transform: none; filter: none; }
}

/* ============================================================================
   v4.4.0 — Press / trust badges row
   Pure CSS text-mark badges. No fake publisher logos — each badge is
   a real-world standard the lab audience recognizes (NIST, USP, NIH,
   FDA, JOVE, Nature). The wordmark uses Space Grotesk with letter-
   spacing to read like a magazine masthead. The fineprint explicitly
   states they're placeholders so we don't mislead anyone.
   ============================================================================ */
.stasis .ba-press {
    background: linear-gradient(180deg, transparent 0%, #f8fafc 100%);
    padding: clamp(40px, 6vw, 64px) var(--pad);
    border-top: 1px solid var(--line-light, #E5EAF1);
    border-bottom: 1px solid var(--line-light, #E5EAF1);
    text-align: center;
}
.stasis .ba-press__eyebrow {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--graphite, #6B7B8E);
    margin: 0 0 28px;
}
.stasis .ba-press__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 32px 48px;
    max-width: 1100px;
    margin-inline: auto;
}
.stasis .ba-press__badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transition: opacity .2s ease;
}
.stasis .ba-press__mark {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: #4b5563;
    opacity: 0.78;
    text-transform: uppercase;
    transition: opacity .2s ease, color .2s ease;
}
.stasis .ba-press__label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #4b5563;
}
.stasis .ba-press__badge:hover .ba-press__mark { opacity: 1; color: var(--cryo-deep, #2461FF); }
.stasis .ba-press__fineprint {
    margin: 28px 0 0;
    font-size: 11.5px;
    color: #4b5563;
    font-style: italic;
    max-width: 640px;
    margin-inline: auto;
}
@media (max-width: 760px) {
    .stasis .ba-press__list { gap: 24px 32px; }
    .stasis .ba-press__mark { font-size: 20px; }
}