/* ==================== VARIABLES & RESET ==================== */
:root {
    /* Single source of truth for the SVG noise dither pattern used on
       product card / detail page / cart thumbnail / section gradients.
       Saves ~11KB by removing 19 inline duplicates. */
    --noise-svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.04 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    --noise-svg-soft: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.03 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");

    --primary: #0a1628;
    --primary-light: #0f2240;
    /* Legacy accent vars now point to cyber green-teal palette so any old
       code using var(--accent) etc. automatically inherits the new look. */
    --accent: #14b8a6;
    --accent-light: #2dd4bf;
    --accent-glow: rgba(20, 184, 166, 0.35);
    --teal: #14b8a6;
    --teal-glow: rgba(20, 184, 166, 0.35);
    --surface: #111827;
    --surface-light: #1f2937;
    --surface-lighter: #374151;
    --text: #f1f5f9;
    --text-muted: #94a3b8;
    --text-dim: #738498;
    --border: rgba(255, 255, 255, 0.08);
    --border-light: rgba(255, 255, 255, 0.12);
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --gradient-1: linear-gradient(135deg, #0a1628 0%, #0f2240 50%, #0a1628 100%);
    --gradient-accent: linear-gradient(135deg, #2dd4bf, #14b8a6 50%, #0d9488);
    --gradient-card: linear-gradient(145deg, #1f2937 0%, #111827 100%);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 30px var(--accent-glow);
    --bg: #0a1628;
    --bg-primary: #0a1628;
    --card-bg: #1f2937;
    --text-secondary: #cbd5e1;
    --radius: 12px;
    --radius-sm: 8px;
    --radius-lg: 16px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--primary);
    color: var(--text);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

body.no-scroll {
    overflow: hidden;
    padding-right: var(--scrollbar-width, 0px);
}

a {
    color: var(--accent-light);
    text-decoration: none;
    transition: var(--transition);
}

a:hover {
    color: var(--teal);
}

img {
    max-width: 100%;
    height: auto;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ==================== SKIP TO CONTENT ==================== */
.skip-to-main {
    position: absolute;
    top: -100%;
    left: 16px;
    z-index: 100000;
    padding: 12px 24px;
    background: var(--accent);
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: top 0.2s ease;
}
.skip-to-main:focus {
    top: 12px;
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* ==================== AGE GATE ==================== */
.age-gate {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--primary);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.age-gate-content {
    background: var(--gradient-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 48px 40px;
    max-width: 520px;
    width: 100%;
    text-align: center;
    box-shadow: var(--shadow-lg);
    max-height: 90vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.age-gate-logo {
    max-width: 160px;
    margin-bottom: 24px;

}

.age-gate-logo-fallback {
    margin-bottom: 24px;
}

.age-gate-content h1 {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.5rem;
    margin-bottom: 8px;
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.age-gate-subtitle {
    color: var(--text-muted);
    margin-bottom: 28px;
    font-size: 0.95rem;
}

.age-gate-checks {
    text-align: left;
    margin-bottom: 20px;
}

.age-check {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 12px 0;
    font-size: 0.95rem;
    color: var(--text);
    -webkit-user-select: none;
    user-select: none;
}

.age-check input {
    display: none;
}

.checkmark {
    width: 22px;
    height: 22px;
    min-width: 22px;
    border: 2px solid var(--border-light);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    margin-top: 1px;
}

.age-check input:checked + .checkmark {
    background: var(--gradient-accent);
    border-color: var(--accent);
}

.age-check input:checked + .checkmark::after {
    content: '\2713';
    color: white;
    font-size: 14px;
    font-weight: 700;
}

.ruo-terms-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 20px;
    margin-bottom: 20px;
    text-align: left;
}

.ruo-terms-box h3 {
    font-size: 1rem;
    margin-bottom: 12px;
    color: var(--text);
    font-family: 'Orbitron', sans-serif;
    font-weight: 600;
}

.ruo-terms-content {
    border-left: 3px solid var(--accent);
    padding-left: 16px;
    margin-bottom: 0;
}

.ruo-terms-content p {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 10px;
    line-height: 1.5;
}

.ruo-terms-content p:last-child {
    margin-bottom: 0;
}

#age-gate-btn {
    margin-top: 24px;
    width: 100%;
    justify-content: center;
    text-align: center;
}

#age-gate-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none !important;
}

/* ==================== BUTTONS ==================== */
.btn-primary {
    background: var(--gradient-accent);
    color: white;
    border: none;
    padding: 12px 28px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Inter', sans-serif;
    position: relative;
    overflow: hidden;
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    transform: translateX(-100%);
    transition: transform 0.5s;
}

.btn-primary:hover::before {
    transform: translateX(100%);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

.btn-primary:disabled,
.btn-outline:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
.btn-primary:disabled::before {
    display: none;
}

.btn-outline {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    padding: 12px 28px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Inter', sans-serif;
}

.btn-outline:hover {
    border-color: var(--accent);
    color: var(--accent-light);
    background: rgba(20, 184, 166, 0.05);
    transform: translateY(-2px);
}

/* Focus styles for accessibility */
.btn-primary:focus-visible,
.btn-outline:focus-visible {
    outline: 2px solid var(--accent-light);
    outline-offset: 2px;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.btn-large {
    padding: 14px 32px;
    font-size: 1rem;
}

.btn-full {
    width: 100%;
    justify-content: center;
}

.btn-sm {
    padding: 8px 16px;
    font-size: 0.85rem;
}

/* ==================== ANNOUNCEMENT BAR ==================== */
.announcement-bar {
    background: var(--gradient-accent);
    padding: 10px 20px;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 500;
    position: relative;
    z-index: 999;
    display: none;
    overflow: hidden;
}
.announcement-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    animation: barShimmer 4s ease-in-out infinite;
    will-change: transform;
}
@keyframes barShimmer {
    0% { transform: translateX(-170%); }
    50%, 100% { transform: translateX(250%); }
}

.announcement-bar.visible {
    display: block;
}


.announcement-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.announcement-bar .ann-code {
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 1px 8px;
    border-radius: 6px;
    margin: 0 2px;
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 1px;
    font-weight: 800;
}
.announcement-bar .ann-applied {
    font-size: 0.85em;
    opacity: 0.92;
    font-style: italic;
}

@media (max-width: 600px) {
    .announcement-bar {
        padding: 8px 12px;
        font-size: 0.78rem;
    }
    .announcement-content {
        gap: 4px;
    }
}

/* ==================== NAVBAR ==================== */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 24px 0;
    transition: var(--transition);
    background: rgba(10, 22, 40, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    display: none;
}

.navbar.visible {
    display: block;
}

.navbar.scrolled {
    background: rgba(10, 22, 40, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    padding: 6px 0;
}

.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.nav-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.nav-logo-img {
    height: 70px;
    width: auto;
    margin: -7px 0 -13px;
    transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1), margin 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Shrink logo when navbar collapses on scroll so it stays proportional */
.navbar.scrolled .nav-logo-img {
    height: 48px;
    margin: -3px 0 -7px;
}

.nav-logo-text {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.logo-text {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: 3px;
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.logo-sub {
    font-family: 'Orbitron', sans-serif;
    font-weight: 500;
    font-size: 1rem;
    letter-spacing: 5px;
    color: var(--text-muted);
    -webkit-text-fill-color: var(--text-muted);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 32px;
    position: absolute;
    left: 50%;
    transform: translateX(-55%);
}

.nav-links a {
    color: var(--text);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    transition: var(--transition);
    position: relative;
    text-decoration: none;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gradient-accent);
    transition: width 0.3s;
}

.nav-links a:hover {
    color: var(--text);
}

.nav-links a:hover::after {
    width: 100%;
}

.nav-links a.active {
    color: var(--text);
}

.nav-links a.active::after {
    width: 100%;
}

/* ==================== NAV DROPDOWN ==================== */
.nav-dropdown {
    position: relative;
    display: inline-block;
}
.nav-dropdown-toggle {
    background: transparent;
    border: none;
    color: var(--text);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    font-family: inherit;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: var(--transition);
    position: relative;
}
.nav-dropdown-toggle::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gradient-accent);
    transition: width 0.3s;
}
.nav-dropdown-toggle:hover { color: var(--text); }
.nav-dropdown-toggle:hover::after { width: 100%; }
.nav-dropdown-toggle.active { color: var(--text); }
.nav-dropdown-toggle.active::after { width: 100%; }
.nav-caret {
    font-size: 0.7rem;
    transition: transform 0.25s ease;
    opacity: 0.7;
}
.nav-dropdown:hover .nav-caret,
.nav-dropdown.open .nav-caret { transform: rotate(180deg); }

.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    min-width: 280px;
    background: rgba(15, 23, 42, 0.98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 10px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(20, 184, 166, 0.05);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
    z-index: 1001;
}
/* Bridge so the menu doesn't disappear when hovering the gap */
.nav-dropdown-menu::before {
    content: '';
    position: absolute;
    top: -14px;
    left: 0;
    right: 0;
    height: 14px;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.nav-dd-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 10px;
    color: var(--text-muted);
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}
.nav-dd-item i {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(20, 184, 166, 0.1);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
    transition: background 0.2s ease;
}
.nav-dd-item:hover {
    background: rgba(20, 184, 166, 0.08);
    color: var(--text);
}
.nav-dd-item:hover i {
    background: rgba(20, 184, 166, 0.2);
}
.nav-dd-item.active {
    background: rgba(20, 184, 166, 0.12);
    color: var(--text);
}
.nav-dd-item.active i {
    background: rgba(20, 184, 166, 0.25);
}
.nav-dd-item::after { display: none; } /* override the .nav-links a underline */
.nav-dd-title {
    font-weight: 600;
    font-size: 0.92rem;
    line-height: 1.2;
    margin-bottom: 2px;
}
.nav-dd-sub {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.3;
    opacity: 0.8;
}

/* Affiliate / highlight badge in nav dropdown */
.nav-dd-badge {
    display: inline-block;
    background: linear-gradient(135deg, #14b8a6, #0ea5e9);
    color: #0a1628;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 50px;
    margin-left: 6px;
    vertical-align: middle;
    letter-spacing: 0.3px;
}


/* Mobile nav highlight */
.mobile-nav-highlight {
    color: var(--accent-light) !important;
    font-weight: 600;
}

@media (max-width: 1100px) {
    .nav-links { gap: 24px; }
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.track-btn {
    background: rgba(31, 41, 55, 0.6);
    border: 1px solid var(--border-light);
    color: var(--text);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: var(--transition);
    backdrop-filter: blur(8px);
}

.track-btn:hover {
    border-color: var(--accent);
    background: rgba(31, 41, 55, 0.9);
    transform: scale(1.08);
    box-shadow: 0 0 15px rgba(20, 184, 166, 0.2);
}

.wishlist-btn {
    background: rgba(31, 41, 55, 0.6);
    border: 1px solid var(--border-light);
    color: var(--text);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: var(--transition);
    backdrop-filter: blur(8px);
}

.wishlist-btn:hover {
    border-color: #ef4444;
    background: rgba(31, 41, 55, 0.9);
    transform: scale(1.08);
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

.wishlist-count {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #ef4444;
    color: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg);
}

.wishlist-count.empty {
    display: none;
}

.product-wishlist-btn {
    position: absolute;
    bottom: 12px;
    left: 12px;
    z-index: 3;
    background: rgba(10, 22, 40, 0.85);
    border: 1px solid var(--border-light);
    color: var(--text-muted);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    transition: var(--transition);
    backdrop-filter: blur(8px);
}

.product-wishlist-btn:hover {
    border-color: #ef4444;
    color: #ef4444;
    transform: scale(1.1);
}

.product-wishlist-btn.active {
    background: #ef4444;
    border-color: #ef4444;
    color: white;
}

.wishlist-item {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-bottom: 1px solid var(--border-light);
    align-items: center;
}

.wishlist-item img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
    background: rgba(31, 41, 55, 0.5);
}







.wishlist-item-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wishlist-item-actions button {
    background: rgba(20, 184, 166, 0.15);
    border: 1px solid var(--accent);
    color: var(--accent);
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    transition: var(--transition);
}

.wishlist-item-actions button:hover {
    background: var(--accent);
    color: white;
}

.wishlist-item-actions .remove-btn {
    background: rgba(239, 68, 68, 0.15);
    border-color: #ef4444;
    color: #ef4444;
}

.wishlist-item-actions .remove-btn:hover {
    background: #ef4444;
    color: white;
}

.cart-btn {
    background: rgba(31, 41, 55, 0.6);
    border: 1px solid var(--border-light);
    color: var(--text);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    font-size: 1.2rem;
    backdrop-filter: blur(8px);
}

.cart-btn:hover {
    border-color: var(--accent);
    background: rgba(31, 41, 55, 0.9);
    transform: scale(1.08);
    box-shadow: 0 0 15px rgba(20, 184, 166, 0.2);
}

.cart-count {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--gradient-accent);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-preview-label {
    display: none;
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--accent-light);
    font-family: 'Orbitron', sans-serif;
    white-space: nowrap;
}

.mobile-menu-btn {
    display: none;
    background: var(--surface-light);
    border: 1px solid var(--border);
    color: var(--text);
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 1.2rem;
    align-items: center;
    justify-content: center;
}

/* ==================== MOBILE MENU ==================== */
.mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 280px;
    height: 100vh;
    background: var(--surface);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    padding: 24px;
    transition: right 0.3s ease;
    border-left: 1px solid var(--border);
}

.mobile-menu.open {
    right: 0;
}

.mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32px;
}

.mobile-menu-header button {
    background: none;
    border: none;
    color: var(--text);
    font-size: 1.3rem;
    cursor: pointer;
}

.mobile-menu a {
    display: block;
    padding: 14px 0;
    color: var(--text);
    font-size: 1.1rem;
    font-weight: 500;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
}

/* ==================== HERO ==================== */
.hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 100px 24px 60px;
    display: none;
}

.hero.visible {
    display: flex;
    flex-direction: column;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gradient-1);
    z-index: 0;
    overflow: hidden;
}

.hero-bg::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -30%;
    width: 800px;
    height: 800px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
    opacity: 0.4;
    animation: float 8s ease-in-out infinite;
    will-change: transform;
}

.hero-bg::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -20%;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--teal-glow) 0%, transparent 70%);
    opacity: 0.3;
    animation: float 10s ease-in-out infinite reverse;
    will-change: transform;
}

@keyframes float {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-30px) scale(1.05); }
}

.hero-particles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
    contain: strict;
}



.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 800px;
}

.hero-split {
    display: flex;
    align-items: center;
    gap: 40px;
    max-width: 1200px;
    text-align: left;
}

.hero-text {
    flex: 1;
}

.hero-visual {
    flex: 0 0 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 400px;
}
.hero-visual::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(20, 184, 166,0.2) 0%, rgba(0,180,216,0.08) 50%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    animation: heroGlowPulse 4s ease-in-out infinite;
}
@keyframes heroGlowPulse {
    0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
}

.hero-vial-main {
    height: 380px;
    width: auto;
    filter: drop-shadow(0 0 40px rgba(20, 184, 166,0.2));
    animation: heroFloat 4s ease-in-out infinite;
    position: relative;
    z-index: 2;
    will-change: transform;
}

.hero-vial-secondary {
    position: absolute;
    height: 200px;
    width: auto;
    filter: drop-shadow(0 0 30px rgba(20, 184, 166,0.15));
    z-index: 1;
    will-change: transform;
}

.hero-vial-right {
    right: -30px;
    bottom: 20px;
    animation: heroFloat 4s ease-in-out infinite 1s;
}

.hero-vial-top {
    right: 10px;
    top: -10px;
    height: 170px;
    animation: heroFloat 4s ease-in-out infinite 2s;
}

@keyframes heroFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(20, 184, 166, 0.08);
    border: 1px solid rgba(20, 184, 166, 0.15);
    color: var(--text-muted);
    padding: 6px 14px;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 1.5px;
    margin-bottom: 16px;
    font-family: 'Inter', sans-serif;
    border-radius: 20px;
}

.hero-badge i {
    font-size: 0.7rem;
}











.hero-discount-callout {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, rgba(251,191,36,0.1), rgba(245,158,11,0.05));
    border: 1px solid rgba(251,191,36,0.3);
    border-radius: 10px;
    padding: 10px 20px;
    margin-bottom: 26px;
    font-size: 0.85rem;
    color: #fbbf24;
}
.hero-discount-callout i {
    color: #f59e0b;
    font-size: 0.9rem;
}
.hero-discount-callout strong {
    color: #fff;
}

.hero-cta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 36px;
    flex-wrap: wrap;
}

.hero-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    padding-top: 24px;
    margin-top: 40px;
    border-top: 1px solid rgba(255,255,255,0.06);
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
    background: rgba(255,255,255,0.04);
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.06);
}

.trust-item i {
    color: #14b8a6;
    font-size: 0.9rem;
}

/* ==================== BEST SELLERS ==================== */
/* ==================== WHY ELYTRA ==================== */
.why-section {
    padding: 80px 0;
    background: rgba(20, 184, 166,0.02);
    border-top: 1px solid rgba(255,255,255,0.04);
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.why-card {
    background: var(--card-bg);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    padding: 28px 24px;
    transition: border-color 0.3s, transform 0.3s;
}
.why-card:hover {
    border-color: rgba(20, 184, 166,0.3);
    transform: translateY(-4px);
}


.why-stat-big {
    font-family: 'Orbitron', sans-serif;
    font-size: 2.8rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    margin-bottom: 4px;
}




.why-card h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
}
.why-card p {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.6;
}

/* ==================== SCROLL ANIMATIONS ==================== */
.scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ==================== SOCIAL PROOF TOAST ==================== */
.social-proof-toast {
    position: fixed;
    bottom: 24px;
    left: 24px;
    background: var(--card-bg);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    z-index: 999;
    transform: translateX(-120%);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    max-width: 340px;
}
.social-proof-toast.sp-visible {
    transform: translateX(0);
    opacity: 1;
}
.sp-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
}
.sp-text {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.4;
}
.sp-text strong {
    color: #fff;
    font-weight: 600;
}
.sp-time {
    display: block;
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 2px;
}
@media (max-width: 600px) {
    .social-proof-toast {
        left: 12px;
        right: 12px;
        bottom: 12px;
        max-width: none;
    }
}

/* ==================== HOW IT WORKS ==================== */
.how-section {
    padding: 80px 0;
    background: var(--bg);
}
.how-grid {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    max-width: 1000px;
    margin: 0 auto;
}








@media (max-width: 900px) {
    .why-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .why-grid { grid-template-columns: 1fr; }
    .why-section { padding: 50px 0; }
    .how-grid { flex-direction: column; align-items: center; }
    
    .how-section { padding: 50px 0; }
}

/* ==================== BEST SELLERS ==================== */
.bestsellers-section {
    padding: 80px 0;
    display: none;
}

.bestsellers-section.visible {
    display: block;
}

.bestsellers-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 40px;
}

.bestseller-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
}

.bestseller-card:hover {
    border-color: var(--accent);
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(0, 180, 216, 0.15);
}

.bestseller-card .bs-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--gradient-accent);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    z-index: 2;
    letter-spacing: 0.5px;
}

.bestseller-card .bs-image {
    background: #000;
    padding: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 300px;
    position: relative;
    overflow: hidden;
}
.bestseller-card .bs-image img {
    position: relative;
    z-index: 1;
}

.bestseller-card .bs-image img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    transition: transform 0.4s;
}

.bestseller-card:hover .bs-image img {
    transform: scale(1.05);
}

.bestseller-card .bs-info {
    padding: 24px;
}

.bestseller-card .bs-name {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 4px;
}

.bestseller-card .bs-dosage {
    font-size: 0.85rem;
    color: var(--text-dim);
    margin-bottom: 12px;
}

.bestseller-card .bs-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bestseller-card .bs-price {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--accent);
}

.bestseller-card .bs-cart-btn {
    background: var(--gradient-accent);
    border: none;
    color: white;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: var(--transition);
}

.bestseller-card .bs-cart-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(0, 180, 216, 0.4);
}

/* ==================== VALUE PROPS ==================== */
.value-props {
    padding: 80px 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    display: none;
}

.value-props.visible {
    display: block;
}

.value-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.value-card {
    text-align: center;
    padding: 32px 20px;
    border-radius: var(--radius);
    transition: var(--transition);
}

.value-card:hover {
    background: var(--surface-light);
}

.value-icon {
    width: 56px;
    height: 56px;
    background: rgba(20, 184, 166, 0.1);
    border: 1px solid rgba(20, 184, 166, 0.2);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 1.3rem;
    color: var(--accent-light);
}

.value-card h3 {
    font-size: 1rem;
    margin-bottom: 8px;
    font-weight: 600;
}

.value-card p {
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.5;
}

/* ==================== SECTIONS GENERAL ==================== */
.section-header {
    text-align: center;
    margin-bottom: 48px;
}

.section-badge {
    display: inline-block;
    background: rgba(20, 184, 166, 0.1);
    border: 1px solid rgba(20, 184, 166, 0.2);
    color: var(--accent-light);
    padding: 4px 16px;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 2px;
    margin-bottom: 12px;
    font-family: 'Orbitron', sans-serif;
}

.section-title {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 700;
    margin-bottom: 12px;
}

.section-subtitle {
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto;
    font-size: 0.95rem;
}

/* ==================== PRODUCTS ==================== */
.products-section {
    padding: 100px 0;
    display: none;
}

.products-section.visible {
    display: block;
}

/* Catalog toolbar: search + sort side by side */
.catalog-toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}
.catalog-toolbar .product-search {
    flex: 1;
    margin: 0;
}

/* Sort dropdown */
.sort-dropdown select {
    background: var(--surface-light);
    border: 1px solid var(--border-light);
    border-radius: 50px;
    color: var(--text);
    font-size: 0.88rem;
    font-family: 'Inter', sans-serif;
    padding: 11px 36px 11px 16px;
    cursor: pointer;
    transition: var(--transition);
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2394a3b8'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    white-space: nowrap;
}
.sort-dropdown select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}
.sort-dropdown select option {
    background: var(--surface);
    color: var(--text);
}

.filter-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.filter-btn {
    background: var(--surface-light);
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    font-family: 'Inter', sans-serif;
}

.filter-btn:hover {
    border-color: var(--accent);
    color: var(--text);
}

.filter-btn.active {
    background: var(--gradient-accent);
    border-color: transparent;
    color: white;
}

/* Category count badges inside filter buttons */


/* Product count status */
.catalog-status {
    text-align: center;
    color: var(--text-dim);
    font-size: 0.85rem;
    margin-bottom: 28px;
}

/* Product card entrance animation */
.product-card {
    opacity: 0;
    transform: translateY(20px);
    animation: cardFadeIn 0.4s ease forwards;
    will-change: transform, opacity;
    contain: layout style;
}
@keyframes cardFadeIn {
    to { opacity: 1; transform: translateY(0); }
}
.products-grid .product-card:nth-child(1) { animation-delay: 0.05s; }
.products-grid .product-card:nth-child(2) { animation-delay: 0.1s; }
.products-grid .product-card:nth-child(3) { animation-delay: 0.15s; }
.products-grid .product-card:nth-child(4) { animation-delay: 0.2s; }
.products-grid .product-card:nth-child(5) { animation-delay: 0.25s; }
.products-grid .product-card:nth-child(6) { animation-delay: 0.3s; }
.products-grid .product-card:nth-child(n+7) { animation-delay: 0.35s; }

/* Cart savings badge */
.cart-savings-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.25);
    color: var(--success);
    font-size: 0.82rem;
    font-weight: 700;
    padding: 10px 14px;
    /* Pill shape matches the Proceed to Checkout button below it.
       Both fill 100% of the footer content width (footer padding was
       reduced to 12px each side so this is already wide enough). */
    border-radius: 999px;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 16px;
}

/* Sold out product card overlay */
.product-card.sold-out {
    opacity: 0.65;
    pointer-events: none;
    position: relative;
}
.product-card.sold-out .product-add-btn {
    display: none;
}
.sold-out-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.75);
    color: #ef4444;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 2px;
    padding: 10px 24px;
    border-radius: 8px;
    border: 1px solid rgba(239, 68, 68, 0.3);
    z-index: 5;
    pointer-events: none;
}

@media (max-width: 600px) {
    .catalog-toolbar {
        flex-direction: column;
        max-width: 100%;
    }
    .sort-dropdown { width: 100%; }
    .sort-dropdown select { width: 100%; }
}

.products-grid {
    display: grid;
    /* 4 cards per row at common desktop widths.
       At minmax(250px, 1fr) + gap 24, 4 cards need 4*250 + 3*24 = 1072px,
       comfortably inside the 1152px usable width of a 1200px container.
       Was 270px which was right at the boundary — sub-pixel rounding /
       slightly narrower browser windows / 110% zoom were dropping it to
       3 columns. Lower min gives 4 columns reliably and only allows 5
       per row above 1346px container width. */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 24px;
}

/* ========== CURATED STACKS ROW (products page) ========== */
/* Lives at the BOTTOM of the products grid on "All Products" view, or
   as the only content when the Stacks filter is active. */
.products-stacks-section {
    margin: 36px 0 0;
    padding: 22px 22px 26px;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.06) 0%, rgba(99, 102, 241, 0.04) 100%);
    border: 1px solid rgba(20, 184, 166, 0.18);
    border-radius: 16px;
    backdrop-filter: blur(8px);
}
/* When the Stacks filter is active, remove the top margin since there's no grid above it. */
.products-stacks-section.stacks-only {
    margin-top: 0;
}

/* Stacks filter button — visually distinct from category filters */


.filter-btn-stacks.active i {
    color: #0a1628;
}
.products-stacks-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.products-stacks-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.25rem;
    color: var(--text);
    margin: 0 0 6px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.products-stacks-title i { color: var(--accent); }
.products-stacks-subtitle {
    color: var(--text-muted);
    font-size: 0.86rem;
    margin: 0;
    max-width: 720px;
    line-height: 1.5;
}
.products-stacks-subtitle strong { color: var(--accent); }
.products-stacks-link {
    color: var(--accent);
    font-size: 0.84rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.2s;
}
.products-stacks-link:hover { opacity: 0.75; }
.products-stacks-link i { margin-left: 4px; font-size: 0.78rem; }

/* Stack cards share the .product-card layout but get their own visual
   treatment: bundle badge, overlapping vial image group, item chips,
   and a prominent "Add Stack to Cart" CTA. */
.products-stacks-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}

.stack-card {
    /* Tinted background so the stack cards visually read as a separate
       product family without breaking the .product-card system. */
    background: linear-gradient(165deg,
        rgba(20, 184, 166, 0.08) 0%,
        rgba(99, 102, 241, 0.05) 60%,
        rgba(10, 22, 40, 0.55) 100%),
        var(--gradient-card);
    border: 1px solid rgba(20, 184, 166, 0.30);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.stack-card::before {
    /* Subtle teal sheen across the top edge */
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--accent), #6366f1, transparent);
    opacity: 0.85;
    pointer-events: none;
    z-index: 1;
}
.stack-card:hover {
    border-color: rgba(20, 184, 166, 0.55);
    box-shadow: 0 12px 32px rgba(20, 184, 166, 0.18);
    transform: translateY(-3px);
}

.stack-card-badge {
    background: linear-gradient(135deg, var(--accent), #6366f1) !important;
    color: #fff !important;
    letter-spacing: 0.06em;
}
.stack-card-badge i { margin-right: 4px; }
.stack-savings-badge {
    background: linear-gradient(135deg, #ef4444, #f97316) !important;
    color: #fff !important;
    letter-spacing: 0.05em;
}

/* Vial image area: shows the actual vials in the stack overlapping */
.stack-image {
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at center,
        rgba(20, 184, 166, 0.15) 0%,
        rgba(20, 184, 166, 0.05) 35%,
        transparent 70%);
}
.stack-vial-group {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.stack-icon-glow {
    position: absolute;
    font-size: 4rem;
    opacity: 0.08;
    filter: blur(1px);
    z-index: 0;
    user-select: none;
}
.stack-vial {
    position: absolute;
    height: 98%;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.45));
    transition: transform 0.4s;
    z-index: 2;
    /* Force consistent GPU rendering + max-contrast scaling for the
       rotated/translated vials. The rotation interpolation makes images
       softer than their resting product-card counterparts — these hints
       give the browser permission to bias toward sharpness. */
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    image-rendering: -webkit-optimize-contrast;
}
/* Tighter horizontal spread — vials sit closer together with overlap in
   the center for a "stacked" feel while keeping each label readable. */



.stack-card:hover .stack-vial-1 { transform: rotate(-7deg) translateX(-22%) translateZ(0); }
.stack-card:hover .stack-vial-2 { transform: rotate(7deg) translateX(22%) translateZ(0); }
.stack-card:hover .stack-vial-3 { transform: rotate(0deg) translateY(-5%) translateZ(0); }

/* Stack card body — name, tagline, item chips, rating, price, actions */
.stack-card-name {
    font-size: 1.05rem !important;
}
.stack-card-tagline {
    font-style: normal !important;
    color: var(--text-muted) !important;
    font-size: 0.78rem !important;
    line-height: 1.45 !important;
    margin-bottom: 10px !important;
    min-height: 34px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.stack-card-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0 10px;
}
.stack-item-chip {
    background: rgba(20, 184, 166, 0.10);
    border: 1px solid rgba(20, 184, 166, 0.25);
    color: var(--accent);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 999px;
    line-height: 1.3;
    white-space: nowrap;
}
.stack-item-chip i {
    font-size: 0.62rem;
    margin-right: 4px;
    opacity: 0.85;
}
.stack-card-itemcount {
    color: var(--text-dim);
    font-size: 0.78rem;
    margin-left: 4px;
}
.stack-card-price-row {
    align-items: baseline !important;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin-bottom: 10px;
}
.stack-card-savings {
    background: rgba(34, 197, 94, 0.12);
    color: #22c55e;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Actions: full-width CTA + small details link */
.stack-card-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 2px;
}
.stack-add-btn {
    flex: 1;
    background: linear-gradient(135deg, var(--accent), #6366f1);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 11px 12px;
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.18s, filter 0.18s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}
.stack-add-btn:hover {
    filter: brightness(1.08);
    box-shadow: 0 8px 18px rgba(20, 184, 166, 0.35);
    transform: translateY(-1px);
}
.stack-details-link {
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    padding: 4px 2px;
    transition: opacity 0.18s;
}
.stack-details-link:hover { opacity: 0.75; }
.stack-details-link i { margin-left: 3px; font-size: 0.72rem; }

@media (max-width: 600px) {
    .products-stacks-row {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 16px;
    }
    .stack-card-name { font-size: 0.96rem !important; }
    .stack-card-tagline { font-size: 0.74rem !important; min-height: 30px; }
    .stack-add-btn { font-size: 0.8rem; padding: 10px 10px; }
    .stack-icon-glow { font-size: 3rem; }
}

.product-card {
    background: var(--gradient-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    position: relative;
    border-top: 2px solid transparent;
}

/* Category color accents */
.product-card[data-category="peptide"] { border-top-color: var(--accent); }
.product-card[data-category="blend"] { border-top-color: var(--teal); }
.product-card[data-category="supply"] { border-top-color: #f59e0b; }

.product-card:hover {
    border-color: var(--accent);
    transform: translateY(-4px);
    box-shadow: var(--shadow-glow);
}
.product-card[data-category="blend"]:hover { border-color: var(--teal); box-shadow: 0 0 30px var(--teal-glow); }
.product-card[data-category="supply"]:hover { border-color: #f59e0b; box-shadow: 0 0 30px rgba(245, 158, 11, 0.3); }

.product-card-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--gradient-accent);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 50px;
    z-index: 2;
    letter-spacing: 0.5px;
}

.product-image {
    background: #000;
    /* Experiment: less padding around the image so vial can be larger. */
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Experiment: taller image area so the vial reads bigger.
       Was 280px. */
    height: 320px;
    overflow: hidden;
    position: relative;
    contain: layout style;
}

.product-image img {
    /* Vial zoom: 110% with 320px tall image area + 4-col grid lands at
       the right size balance — readable label without crowding the
       price/CTA row below. */
    max-height: 110%;
    max-width: 110%;
    object-fit: contain;
    transition: transform 0.4s;
    /* Force consistent rendering before/during/after hover.
       Without these the browser promotes the img to a GPU compositing
       layer on first hover and the layer persists after the transform
       ends, leaving the rasterization slightly softer than the original
       CPU render. Pinning the img to GPU permanently (translateZ + will-
       change) makes idle and post-hover frames render identically. */
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    image-rendering: -webkit-optimize-contrast;
}

.product-card:hover .product-image img {
    transform: scale(1.08) translateZ(0);
}

.product-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-dim);
    gap: 8px;
}

.product-image-placeholder i {
    font-size: 2.5rem;
    color: var(--accent);
    opacity: 0.5;
}

.product-info {
    padding: 20px;
}

.product-name {
    font-family: 'Orbitron', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.product-dosage {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-bottom: 12px;
}

.product-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
}

.product-price-original {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-dim);
    text-decoration: line-through;
}

.product-price {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--accent-light);
}

.bs-price-original {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-dim);
    text-decoration: line-through;
}

.product-add-btn {
    background: var(--gradient-accent);
    border: none;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    font-size: 1rem;
}

.product-add-btn:hover {
    transform: scale(1.1);
    box-shadow: var(--shadow-glow);
}

/* ---- Notify Me (back-in-stock) ---- */
.notify-me-btn {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border: none;
    color: #fff;
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: var(--transition);
    white-space: nowrap;
}
.notify-me-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.4);
}
.notify-me-btn:disabled {
    opacity: 0.7;
    cursor: default;
    transform: none;
    background: #65a30d;
}
.notify-form {
    display: flex;
    gap: 6px;
    margin-top: 6px;
    align-items: center;
    width: 100%;
}
.notify-email-input {
    flex: 1;
    min-width: 0;
    padding: 6px 10px;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.06);
    color: #e2e8f0;
    font-size: 0.8rem;
    outline: none;
    transition: border-color 0.2s;
}
.notify-email-input:focus {
    border-color: #f59e0b;
}
.notify-email-input::placeholder {
    color: rgba(255,255,255,0.35);
}
.notify-submit-btn {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border: none;
    color: #fff;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    transition: var(--transition);
    flex-shrink: 0;
}
.notify-submit-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.4);
}
/* Notify Me in product card price row */
.product-price-row .notify-me-btn {
    font-size: 0.75rem;
    padding: 5px 10px;
}
.product-price-row .notify-form {
    margin-top: 4px;
}
/* Notify Me in modal */
.modal-notify-wrap {
    width: 100%;
    text-align: center;
}
.modal-notify-wrap .notify-me-btn {
    width: 100%;
    justify-content: center;
    padding: 14px 24px;
    font-size: 1rem;
    border-radius: var(--radius);
}
.modal-notify-wrap .notify-form {
    margin-top: 10px;
}
.modal-notify-wrap .notify-email-input {
    padding: 10px 14px;
    font-size: 0.9rem;
}
.modal-notify-wrap .notify-submit-btn {
    width: 42px;
    height: 42px;
    font-size: 1rem;
}
/* Notify Me in sticky footer */
.modal-sticky-footer .notify-me-btn {
    padding: 10px 18px;
    font-size: 0.85rem;
}
/* Stock badge – out variant */
.stock-badge.out {
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.25);
    color: #f59e0b;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.product-rating {
    font-size: 0.7rem;
    color: #fbbf24;
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 2px;
}
.product-rating span {
    color: var(--text-muted);
    margin-left: 4px;
    font-weight: 600;
    font-size: 0.72rem;
}





.coa-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 280px;
    background: var(--bg-primary);
    border: 1px solid rgba(20, 184, 166,0.3);
    border-radius: 12px;
    padding: 0;
    z-index: 10000;
    box-shadow: 0 12px 48px rgba(0,0,0,0.6);
    animation: coaPopIn 0.2s ease;
    overflow: hidden;
}
@keyframes coaPopIn {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.coa-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    font-weight: 700;
    font-size: 0.82rem;
    color: #fff;
}
.coa-popup-header i { color: #14b8a6; margin-right: 6px; }
.coa-popup-pass {
    color: #22c55e;
    font-size: 0.7rem;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.coa-popup-row {
    display: flex;
    justify-content: space-between;
    padding: 7px 14px;
    font-size: 0.78rem;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}
.coa-popup-row span:first-child { color: var(--text-muted); }
.coa-popup-row span:last-child { color: var(--text-secondary); font-weight: 600; font-family: 'Orbitron', monospace; font-size: 0.72rem; }
.coa-popup-row .coa-purity { color: #22c55e !important; font-weight: 700; font-size: 0.82rem; }
.coa-popup-link {
    display: block;
    text-align: center;
    padding: 10px;
    font-size: 0.72rem;
    color: var(--accent);
    text-decoration: none;
    border-top: 1px solid rgba(255,255,255,0.06);
    transition: background 0.2s;
}
.coa-popup-link:hover { background: rgba(20, 184, 166,0.08); }
.coa-popup-link i { margin-left: 4px; font-size: 0.65rem; }



/* ==================== BUNDLE BANNER ==================== */


.bundle-banner.visible {
    display: block;
}

















/* ==================== ABOUT ==================== */
.about-section {
    padding: 100px 0;
    display: none;
}

.about-section.visible {
    display: block;
}

.about-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 60px;
    align-items: center;
}

.about-content p {
    color: var(--text-muted);
    margin-bottom: 16px;
    line-height: 1.7;
}

.about-stats {
    display: flex;
    gap: 32px;
    margin-top: 32px;
}

.stat {
    display: flex;
    flex-direction: column;
}

.stat-number {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 4px;
}

.about-image {
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-logo-img {
    max-width: 300px;
    opacity: 0.8;

}

.about-logo-fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.about-logo-fallback .logo-text {
    font-size: 3rem;
}

.about-logo-fallback .logo-sub {
    font-size: 1.5rem;
}

/* ==================== FAQ ==================== */
.faq-section {
    padding: 100px 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
    display: none;
}

.faq-section.visible {
    display: block;
}

/* ==================== COA PAGE ==================== */
.coa-section { padding: 60px 0 80px; }





.coa-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

/* ===== COA PRODUCT CARD GRID ===== */
.coa-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.02) 100%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.coa-card:hover {
    transform: translateY(-3px);
    border-color: rgba(20, 184, 166, 0.45);
    box-shadow: 0 10px 30px rgba(20, 184, 166, 0.15);
}

.coa-card-image {
    position: relative;
    aspect-ratio: 1 / 1;
    background: radial-gradient(circle at center, #0f172a 0%, #060e1f 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.coa-card-image img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
    filter: drop-shadow(0 8px 24px rgba(20, 184, 166, 0.18));
    transition: transform 0.3s ease;
}
.coa-card:hover .coa-card-image img {
    transform: scale(1.05);
}

.coa-card-purity-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: linear-gradient(135deg, var(--accent), #14b8a6);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    padding: 5px 11px;
    border-radius: 50px;
    box-shadow: 0 2px 12px rgba(20, 184, 166, 0.35);
    font-family: 'Orbitron', sans-serif;
}

.coa-card-pass-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(34, 197, 94, 0.18);
    color: #4ade80;
    border: 1px solid rgba(74, 222, 128, 0.4);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    padding: 4px 10px;
    border-radius: 50px;
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    gap: 4px;
}

.coa-card-info {
    padding: 18px 20px 8px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.coa-card-category {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.coa-card-name {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 1.35rem;
    color: var(--accent);
    letter-spacing: 1px;
    margin-bottom: 12px;
    line-height: 1.1;
}
.coa-card-meta {
    display: flex;
    gap: 14px;
    font-size: 0.74rem;
    color: var(--text-muted);
    margin-top: auto;
    padding-top: 8px;
}
.coa-card-meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.coa-card-meta-label {
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: rgba(148, 163, 184, 0.7);
    font-size: 0.66rem;
    font-weight: 600;
}
.coa-card-meta-value {
    color: var(--text-secondary);
    font-weight: 600;
    font-family: 'Orbitron', monospace;
    letter-spacing: 0.5px;
    font-size: 0.78rem;
}

.coa-card-cta {
    display: block;
    background: linear-gradient(135deg, var(--accent) 0%, #14b8a6 100%);
    color: #fff !important;
    padding: 16px;
    text-align: center;
    text-decoration: none;
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    transition: filter 0.2s ease, letter-spacing 0.2s ease;
    margin-top: 16px;
}
.coa-card-cta i { margin-right: 6px; }
.coa-card-cta:hover {
    filter: brightness(1.15);
    letter-spacing: 4px;
}

@media (max-width: 720px) {
    .coa-card-name { font-size: 1.15rem; }
    .coa-card-cta { font-size: 0.78rem; padding: 14px; letter-spacing: 2.5px; }
}

.coa-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 20px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.6;
}
.coa-note i { color: var(--accent); margin-top: 3px; flex-shrink: 0; }
.coa-note a { color: var(--accent); text-decoration: underline; }

@media (max-width: 600px) {
    
    .coa-grid { grid-template-columns: 1fr; }
}


.faq-search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 0.9rem;
    pointer-events: none;
}
.faq-search {
    width: 100%;
    padding: 14px 16px 14px 44px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    color: #fff;
    font-size: 0.95rem;
    font-family: 'Inter', sans-serif;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.faq-search::placeholder { color: var(--text-muted); }
.faq-search:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(20, 184, 166,0.15);
}
.faq-no-results {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 20px;
    color: var(--text-muted);
    text-align: center;
}
.faq-no-results i { font-size: 2rem; opacity: 0.4; }
.faq-no-results a { color: var(--accent); text-decoration: underline; }

.faq-grid {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: var(--transition);
}

.faq-item:hover {
    border-color: var(--accent);
}

.faq-item.open {
    border-color: var(--accent);
}

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    font-weight: 600;
    font-size: 0.95rem;
}

.faq-question i {
    transition: transform 0.3s;
    color: var(--accent-light);
    font-size: 0.85rem;
}

.faq-item.open .faq-question i {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.faq-item.open .faq-answer {
    max-height: 300px;
    padding: 0 24px 20px;
}

.faq-answer p {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
}

/* ==================== POLICIES ==================== */
.policies-section {
    padding: 100px 0;
    display: none;
}

.policies-section.visible {
    display: block;
}

.policies-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.policy-card {
    background: var(--gradient-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px;
}

.policy-icon {
    width: 48px;
    height: 48px;
    background: rgba(20, 184, 166, 0.1);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-light);
    font-size: 1.2rem;
    margin-bottom: 16px;
}

.policy-card h3 {
    font-family: 'Orbitron', sans-serif;
    font-size: 1rem;
    margin-bottom: 16px;
    font-weight: 600;
}

.policy-card ul {
    list-style: none;
}

.policy-card li {
    color: var(--text-muted);
    font-size: 0.85rem;
    padding: 6px 0;
    padding-left: 18px;
    position: relative;
    line-height: 1.5;
}

.policy-card li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
}

/* ==================== CONTACT ==================== */
.contact-section {
    padding: 100px 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
    display: none;
}

.contact-section.visible {
    display: block;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 48px;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
}

.form-group label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-muted);
}

.form-group input,
.form-group select,
.form-group textarea {
    background: var(--surface-light);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    font-family: 'Inter', sans-serif;
    transition: var(--transition);
    outline: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.form-group textarea {
    resize: vertical;
}

.form-group select {
    cursor: pointer;
}

.form-success {
    text-align: center;
    padding: 60px 20px;
}

.form-success i {
    font-size: 3rem;
    color: var(--success);
    margin-bottom: 16px;
}

.form-success h3 {
    font-family: 'Orbitron', sans-serif;
    margin-bottom: 8px;
}

.form-success p {
    color: var(--text-muted);
}

.contact-info-card {
    background: var(--gradient-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px;
    margin-bottom: 24px;
}

.contact-info-card h3 {
    font-family: 'Orbitron', sans-serif;
    font-size: 1rem;
    margin-bottom: 24px;
    font-weight: 600;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
}

.contact-item i {
    color: var(--accent-light);
    font-size: 1.1rem;
    margin-top: 2px;
}

.contact-label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-dim);
    margin-bottom: 2px;
}

.contact-item a,
.contact-item span {
    font-size: 0.95rem;
    color: var(--text);
}

.social-links {
    background: var(--gradient-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px;
}

.social-links h3 {
    font-family: 'Orbitron', sans-serif;
    font-size: 1rem;
    margin-bottom: 16px;
    font-weight: 600;
}

.social-icons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.social-icon {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--surface-light);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    transition: var(--transition);
    text-decoration: none;
}

.social-icon:hover {
    border-color: var(--accent);
    color: var(--accent-light);
}

.social-icon i {
    font-size: 1.3rem;
    color: var(--accent-light);
}

/* ==================== FOOTER ==================== */
.footer {
    padding: 60px 0 0;
    border-top: 1px solid var(--border);
    display: none;
}

.footer.visible {
    display: block;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 40px;
}

.footer-brand p {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-top: 12px;
    line-height: 1.6;
}

.footer-logo {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 4px;
}

.footer-links h4 {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 16px;
    color: var(--text);
}

.footer-links a {
    display: block;
    color: var(--text-muted);
    font-size: 0.85rem;
    padding: 4px 0;
    transition: var(--transition);
    text-decoration: none;
}

.footer-links a:hover {
    color: var(--accent-light);
}

.footer-social {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

.footer-social a {
    color: var(--text-muted);
    font-size: 1.2rem;
}

.footer-social a:hover {
    color: var(--accent-light);
}

.footer-payments {
    margin-top: 16px;
}
.footer-payments h4 {
    font-size: 0.85rem;
    margin-bottom: 8px;
}
.payment-icons {
    display: flex;
    gap: 8px;
}
.payment-icons span {
    width: 36px;
    height: 28px;
    border-radius: 6px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.footer-bottom {
    border-top: 1px solid var(--border);
    padding: 24px 0;
}

.footer-disclaimer {
    margin-bottom: 16px;
}

.footer-disclaimer p {
    font-size: 0.75rem;
    color: var(--text-dim);
    line-height: 1.6;
}

.copyright {
    font-size: 0.8rem;
    color: var(--text-dim);
    text-align: center;
}

/* ==================== CART SIDEBAR ==================== */
.cart-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 3000;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
}

.cart-overlay.open {
    opacity: 1;
    visibility: visible;
}

.cart-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    /* May 2026: width bumped from 400px to 480px (+20%) so the cart
       drawer has more room for product cards + the wider delivery line. */
    width: 480px;
    max-width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: var(--surface);
    z-index: 3001;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    will-change: transform;
    border-left: 1px solid var(--border);
}

.cart-sidebar.open {
    transform: translateX(0);
}

.cart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
}

.cart-header h3 {
    font-family: 'Orbitron', sans-serif;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cart-header button {
    background: none;
    border: none;
    color: var(--text);
    font-size: 1.2rem;
    cursor: pointer;
}

/* Scrollable body wrapping items */
.cart-scroll {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    min-height: 0;
    flex: 1 1 0%;
    scrollbar-width: thin;
    scrollbar-color: var(--surface-lighter) transparent;
}
.cart-scroll::-webkit-scrollbar { width: 4px; }
.cart-scroll::-webkit-scrollbar-thumb { background: var(--surface-lighter); border-radius: 4px; }

.cart-items {
    padding: 16px 24px;
}

.cart-empty {
    text-align: center;
    padding: 40px 0 24px;
    color: var(--text-dim);
}

/* Popular picks in empty cart */
.cart-picks {
    border-top: 1px solid var(--border);
    padding-top: 16px;
}
.cart-picks-label {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
}
.cart-pick {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.2s;
    border-radius: 8px;
    padding: 10px 8px;
}
.cart-pick:hover { background: rgba(20, 184, 166, 0.05); }
.cart-pick:last-child { border-bottom: none; }
.cart-pick img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    background: #000;
    border-radius: 6px;
    padding: 4px;
}
.cart-pick-info { flex: 1; }
.cart-pick-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
}
.cart-pick-price {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.78rem;
    color: var(--accent-light);
    margin-top: 2px;
}
.cart-pick-add {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(20, 184, 166, 0.12);
    border: 1px solid rgba(20, 184, 166, 0.2);
    color: var(--accent-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}
.cart-pick-add:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.cart-empty i {
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.3;
}

.cart-empty p {
    margin-bottom: 16px;
}

.cart-item {
    display: flex;
    gap: 14px;
    padding: 18px 4px;
    border-bottom: 1px solid var(--border);
    align-items: center;
    transition: background 0.15s;
    border-radius: 8px;
}
.cart-item:hover {
    background: rgba(20, 184, 166, 0.04);
}

.cart-item-img {
    width: 60px;
    height: 60px;
    background: #000;
    border-radius: var(--radius-sm);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cart-item-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.cart-item-img .no-img {
    color: var(--accent);
    font-size: 1.2rem;
    opacity: 0.5;
}

.cart-item-details {
    flex: 1;
}

.cart-item-name {
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 4px;
}

.cart-item-dosage {
    font-size: 0.75rem;
    color: var(--text-dim);
}

.cart-item-price {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.85rem;
    color: var(--accent-light);
    margin-top: 4px;
}

.cart-item-price-original {
    text-decoration: line-through;
    color: var(--text-secondary);
    font-size: 0.8rem;
    margin-right: 6px;
}

.cart-item-price-sale {
    color: var(--success);
    font-weight: 700;
}

.cart-item-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.cart-item-qty {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cart-item-qty button {
    background: var(--surface-light);
    border: 1px solid var(--border);
    color: var(--text);
    width: 28px;
    height: 28px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

.cart-item-qty span {
    font-size: 0.9rem;
    min-width: 20px;
    text-align: center;
}





.cart-footer {
    padding: 16px 24px 48px;
    border-top: 1px solid var(--border);
    background: var(--primary);
    flex-shrink: 0;
}

.cart-subtotal {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: 0.95rem;
    font-weight: 600;
}

.cart-shipping-note {
    font-size: 0.8rem;
    color: var(--text-dim);
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.promo-section {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.cart-discount-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 0.88rem;
    color: var(--success);
}

.cart-affiliate-disclosure {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: -4px 0 12px 0;
    padding: 8px 10px;
    background: rgba(20,184,166,0.06);
    border: 1px solid rgba(20,184,166,0.18);
    border-radius: 6px;
    font-size: 0.74rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.cart-affiliate-disclosure i {
    color: var(--accent);
    font-size: 0.85rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.cart-shipping-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.cart-total {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    font-size: 1.15rem;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    margin-bottom: 14px;
}

.cart-total span:last-child {
    color: var(--accent-light);
    font-family: 'Orbitron', sans-serif;
}

.promo-input-group {
    display: flex;
    gap: 8px;
}

.promo-input-group input {
    flex: 1;
    background: var(--surface-light);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-family: 'Inter', sans-serif;
    outline: none;
}

.promo-input-group input:focus {
    border-color: var(--accent);
}

.btn-promo {
    background: var(--surface-lighter);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
    transition: var(--transition);
}

.btn-promo:hover {
    border-color: var(--accent);
}

.promo-status {
    font-size: 0.8rem;
    margin-top: 6px;
}

.promo-status.success {
    color: var(--success);
}

.promo-status.error {
    color: var(--danger);
}

/* Total + checkout now live inside .cart-footer */

.btn-checkout {
    width: 100%;
    justify-content: center;
    margin-top: 4px;
    animation: checkoutPulse 2s ease-in-out infinite;
    will-change: box-shadow;
}
@keyframes checkoutPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(20, 184, 166, 0.4); }
    50% { box-shadow: 0 0 16px 2px rgba(20, 184, 166, 0.25); }
}



/* Collapsible promo section */
.promo-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: rgba(31, 41, 55, 0.5);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: var(--transition);
}
.promo-toggle:hover {
    border-color: var(--accent);
    color: var(--text);
}
.promo-toggle i.fa-tag { margin-right: 6px; color: var(--accent-light); }
.promo-toggle-icon {
    transition: transform 0.3s ease;
    font-size: 0.7rem;
}
.promo-section.open .promo-toggle-icon {
    transform: rotate(180deg);
}
.promo-collapsible {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, margin 0.3s ease;
    margin-top: 0;
}
.promo-section.open .promo-collapsible {
    max-height: 200px;
    margin-top: 12px;
}

/* ==================== PRODUCT MODAL ==================== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 4000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-overlay.open {
    display: flex;
}

.modal-content {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    max-width: 1050px;
    width: calc(100% - 24px);
    margin: 0 12px;
    max-height: 90vh;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

.modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: var(--surface-light);
    border: 1px solid var(--border);
    color: var(--text);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: var(--transition);
}

.modal-close:hover {
    border-color: var(--danger);
    color: var(--danger);
}

.modal-body {
    display: grid;
    grid-template-columns: 2fr 3fr;
    flex: 1;
    min-height: 0;
}

.modal-image {
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.modal-image img {
    max-height: 380px;
    max-width: 100%;
    object-fit: contain;
}

.modal-info {
    padding: 40px 32px;
    overflow-y: auto;
    max-height: 90vh;
}

.modal-badge {
    display: inline-block;
    background: rgba(20, 184, 166, 0.1);
    border: 1px solid rgba(20, 184, 166, 0.2);
    color: var(--accent-light);
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
}

.modal-info h2 {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.5rem;
    margin-bottom: 4px;
}

.modal-dosage {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 16px;
}

.modal-description {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}

.modal-details {
    margin-bottom: 24px;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.85rem;
}

.detail-row span:first-child {
    color: var(--text-dim);
}

.modal-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.modal-price {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-light);
}

.modal-price-original {
    text-decoration: line-through;
    color: var(--text-secondary);
    font-size: 1.2rem;
    font-weight: 500;
    margin-right: 8px;
}

.modal-price-sale {
    color: var(--success);
    font-weight: 700;
}

.modal-qty {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--surface-light);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 4px;
}

.modal-qty button {
    background: var(--surface-lighter);
    border: none;
    color: var(--text);
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.2s;
}
.modal-qty button:hover {
    background: var(--accent);
    color: #0a1628;
    transform: scale(1.1);
}

.modal-qty span {
    font-weight: 600;
    min-width: 24px;
    text-align: center;
}

.modal-ruo {
    font-size: 0.75rem;
    color: var(--text-dim);
    margin-top: 12px;
    text-align: center;
}

.modal-ruo i {
    color: var(--warning);
    margin-right: 4px;
}

.modal-viewers {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 0.8rem;
    color: var(--warning);
    font-weight: 500;
}
.modal-viewers i {
    font-size: 0.75rem;
    animation: viewerPulse 2s ease-in-out infinite;
}
@keyframes viewerPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.modal-delivery-estimate {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding: 10px 14px;
    background: rgba(16, 185, 129, 0.06);
    border: 1px solid rgba(16, 185, 129, 0.15);
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    color: var(--text-muted);
}
.modal-delivery-estimate i {
    color: var(--success);
    font-size: 1rem;
}
.modal-delivery-estimate strong {
    color: var(--text);
}

.modal-trust-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 16px;
    padding: 14px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
}
.modal-trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
}
.modal-trust-item i {
    color: #10b981;
    font-size: 0.7rem;
    width: 14px;
    text-align: center;
}

/* ==================== CHECKOUT MODAL ==================== */
.checkout-content {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    max-width: 700px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    padding: 40px;
}

.checkout-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-bottom: 36px;
}

.step {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-dim);
    font-size: 0.85rem;
    font-weight: 500;
}

.step span {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--surface-light);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
}

.step.active {
    color: var(--accent-light);
}

.step.active span {
    background: var(--gradient-accent);
    border-color: transparent;
    color: white;
}

.step.completed span {
    background: var(--success);
    border-color: transparent;
    color: white;
}

.checkout-step-content h2 {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.3rem;
    margin-bottom: 24px;
}

.checkout-step-content .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.checkout-step-content .form-row.form-row-3col {
    grid-template-columns: 1fr 1fr 1fr;
}

.checkout-agree {
    margin: 20px 0;
}





.checkout-review-item .item-name {
    font-weight: 500;
}

.checkout-review-item .item-qty {
    color: var(--text-dim);
    font-size: 0.85rem;
}

.checkout-summary {
    background: var(--primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 20px;
    margin-bottom: 24px;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 0.9rem;
}

.summary-row.total {
    border-top: 1px solid var(--border);
    margin-top: 8px;
    padding-top: 12px;
    font-weight: 700;
    font-size: 1.1rem;
}

.summary-row.total span:last-child {
    color: var(--accent-light);
    font-family: 'Orbitron', sans-serif;
}

/* Points earn preview in checkout summary */
.summary-row.earn-preview {
    color: var(--accent-light);
    font-size: 0.82rem;
    border-top: 1px solid var(--border);
    margin-top: 6px;
    padding-top: 8px;
    justify-content: center;
}
.summary-row.earn-preview i {
    color: #facc15;
    margin-right: 4px;
}

/* Points widget in checkout review step */
.checkout-points-widget {
    background: linear-gradient(135deg, rgba(251,191,36,0.08), rgba(245,158,11,0.05));
    border: 1px solid rgba(251,191,36,0.25);
    border-radius: var(--radius-sm);
    padding: 16px 20px;
    margin-bottom: 16px;
}


.checkout-points-applied {
    font-size: 0.82rem;
    color: var(--text-dim);
    margin-top: 6px;
    text-align: center;
}

/* Checkout trust row */




/* Confirmation actions grid */
.confirm-actions-grid {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
.confirm-actions-grid .btn-outline,
.confirm-actions-grid .btn-primary {
    min-width: 160px;
    text-align: center;
    text-decoration: none;
}





/* Payment */
.payment-info {
    text-align: center;
}

.payment-icon {
    font-size: 3rem;
    color: var(--warning);
    margin-bottom: 16px;
}

.payment-info > p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 24px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.crypto-options {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.crypto-btn {
    background: var(--surface-light);
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-family: 'Inter', sans-serif;
    transition: var(--transition);
}

.crypto-btn:hover {
    border-color: var(--accent);
}

.crypto-btn.active {
    border-color: var(--accent);
    color: var(--accent-light);
    background: rgba(20, 184, 166, 0.1);
}













/* Confirmation */
.order-confirmation {
    text-align: center;
    padding: 40px 0;
}

.confirmation-icon {
    font-size: 4rem;
    color: var(--success);
    margin-bottom: 20px;
}

.order-confirmation h2 {
    font-family: 'Orbitron', sans-serif;
    margin-bottom: 16px;
}

.order-confirmation p {
    color: var(--text-muted);
    margin-bottom: 12px;
    font-size: 0.95rem;
}

.confirm-note {
    margin-top: 20px;
}

.confirm-note a {
    color: var(--accent-light);
}

/* ==================== TOAST ==================== */
.toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--success);
    color: white;
    padding: 14px 28px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 5000;
    transition: transform 0.3s ease;
    box-shadow: var(--shadow-md);
}

.toast.show {
    transform: translateX(-50%) translateY(0);
}
.toast.toast-error { background: #ef4444; }

/* ==================== BACK TO TOP ==================== */
.back-to-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: var(--gradient-accent);
    border: none;
    color: white;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    box-shadow: var(--shadow-glow);
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    transform: translateY(-3px);
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 1024px) {
    .value-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .about-image {
        order: -1;
    }

    .policies-grid {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }

    
}

@media (max-width: 768px) {
    .nav-links {
        display: none;
    }

    .mobile-menu-btn {
        display: flex;
    }

    .hero {
        padding: 100px 20px 60px;
        min-height: auto;
    }

    .hero-split {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }

    .hero-cta {
        justify-content: center;
    }

    

    .hero-discount-callout {
        text-align: center;
    }

    .hero-visual {
        flex: 0 0 auto;
        height: auto;
    }

    .hero-vial-main {
        height: 250px;
    }

    .hero-vial-secondary {
        display: none;
    }

    .hero-trust {
        flex-direction: column;
        gap: 12px;
    }

    .bestsellers-grid {
        grid-template-columns: 1fr;
    }

    .value-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 16px;
    }

    .contact-grid {
        grid-template-columns: 1fr;
    }

    .form-row {
        grid-template-columns: 1fr !important;
    }

    .modal-body {
        grid-template-columns: 1fr;
    }

    .modal-image {
        min-height: 250px;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }

    .checkout-content {
        padding: 24px;
    }

    .checkout-steps {
        gap: 8px;
        font-size: 0.75rem;
    }
    .step span {
        width: 24px;
        height: 24px;
        font-size: 0.72rem;
    }

    .cart-sidebar {
        width: 100vw;
    }

    .cart-items {
        padding: 12px 16px;
    }

    .cart-footer {
        padding: 14px 16px;
        font-size: 0.85rem;
    }

    .cart-footer .promo-section {
        margin-bottom: 12px;
        padding-bottom: 12px;
    }

    .cart-footer .cart-trust-badges {
        display: none;
    }

    .cart-footer .cart-ruo-note {
        display: none;
    }

    .cart-footer .cart-subtotal,
    .cart-footer .cart-discount-row,
    .cart-footer .cart-shipping-row {
        margin-bottom: 6px;
    }

    .cart-footer .cart-shipping-note {
        margin-bottom: 12px;
        padding-bottom: 12px;
    }

    .cart-upsell {
        padding: 6px 10px;
    }

    .cart-footer .btn-checkout {
        padding: 10px 20px;
        margin-bottom: 12px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .age-gate-content {
        padding: 32px 24px;
    }

    .age-check {
        gap: 10px;
        font-size: 0.9rem;
        align-items: center;
        text-align: left;
    }

    .age-check .checkmark {
        flex-shrink: 0;
    }

    .about-stats {
        flex-direction: column;
        gap: 20px;
    }

    

    .crypto-options {
        flex-direction: column;
        align-items: center;
    }

    
}

@media (max-width: 480px) {
    .products-grid {
        grid-template-columns: 1fr;
    }

    .product-image {
        height: 240px;
    }

    

    .testimonials-grid {
        grid-template-columns: 1fr;
    }

    .newsletter-input-group {
        flex-direction: column;
    }

    .newsletter-input-group input {
        border-radius: var(--radius-sm);
    }

    .newsletter-input-group button {
        border-radius: var(--radius-sm);
        width: 100%;
    }
}

/* ==================== TESTIMONIALS ==================== */
.testimonials-section {
    padding: 80px 0 40px;
    display: none;
    background: var(--surface);
}

.testimonials-section.visible {
    display: block;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 40px;
}

.testimonial-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
}

.testimonial-card:hover {
    border-color: var(--accent);
    transform: translateY(-4px);
}



.testimonial-stars {
    color: #f59e0b;
    font-size: 0.85rem;
    display: flex;
    gap: 2px;
}

.testimonial-verified {
    font-size: 0.7rem;
    color: #10b981;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

.testimonial-text {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.7;
    margin-bottom: 14px;
    flex: 1;
}

.testimonial-product {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 16px;
    padding: 6px 10px;
    background: rgba(20, 184, 166, 0.06);
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.testimonial-product i {
    color: #2dd4bf;
    font-size: 0.65rem;
}



.testimonial-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(20, 184, 166, 0.15);
    color: #2dd4bf;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
}





/* ==================== NEWSLETTER ==================== */
.newsletter-section {
    padding: 60px 0;
    background: linear-gradient(135deg, rgba(0, 180, 216, 0.08), rgba(0, 119, 182, 0.08));
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    display: none;
}

.newsletter-section.visible {
    display: block;
}

.newsletter-content {
    display: flex;
    align-items: center;
    gap: 60px;
    max-width: 900px;
    margin: 0 auto;
}

.newsletter-text {
    flex: 1;
}

.newsletter-text h2 {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.5rem;
    margin-bottom: 8px;
    color: var(--text);
}

.newsletter-text h2 i {
    color: var(--accent);
    margin-right: 8px;
}

.newsletter-text p {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
}

.newsletter-form {
    flex: 1;
}

.newsletter-input-group {
    display: flex;
    gap: 0;
}

.newsletter-input-group input {
    flex: 1;
    padding: 14px 18px;
    border: 1px solid var(--border);
    border-right: none;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-size: 0.9rem;
    outline: none;
    transition: var(--transition);
}

.newsletter-input-group input:focus {
    border-color: var(--accent);
}

.newsletter-input-group button {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    white-space: nowrap;
    padding: 14px 24px;
}

.newsletter-note {
    font-size: 0.75rem;
    color: var(--text-dim);
    margin-top: 8px;
}

/* ==================== LEGAL MODAL ==================== */
.legal-modal-content {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    max-width: 700px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    padding: 40px;
    position: relative;
}

.legal-modal-content h2 {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.5rem;
    margin-bottom: 20px;
    color: var(--text);
}

.legal-modal-content h3 {
    font-size: 1.1rem;
    color: var(--text);
    margin: 24px 0 8px;
}

.legal-modal-content p {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.7;
    margin-bottom: 12px;
}

.legal-modal-content ul {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.7;
    margin-bottom: 12px;
    padding-left: 20px;
}

/* ==================== FOOTER LEGAL LINKS ==================== */
.footer-legal-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 12px;
}

.footer-legal-links a {
    color: var(--text-muted);
    font-size: 0.85rem;
    text-decoration: none;
    transition: var(--transition);
}

.footer-legal-links a:hover {
    color: var(--accent);
}

.footer-legal-links span {
    color: var(--text-dim);
    font-size: 0.85rem;
}

/* ==================== PAYMENT STYLES ==================== */




.payment-security-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: var(--radius-sm);
    margin: 16px 0;
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.payment-security-note i {
    color: var(--success);
    font-size: 1rem;
    margin-top: 2px;
    flex-shrink: 0;
}

/* ==================== PRODUCT SEARCH BAR ==================== */
.product-search {
    position: relative;
    max-width: 400px;
    margin: 0 auto 28px;
}

.product-search i.fa-search {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-dim);
    font-size: 0.9rem;
}

.product-search input {
    width: 100%;
    padding: 12px 40px 12px 44px;
    background: var(--surface-light);
    border: 1px solid var(--border-light);
    border-radius: 50px;
    color: var(--text);
    font-size: 0.95rem;
    font-family: 'Inter', sans-serif;
    transition: var(--transition);
}

.product-search input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.product-search input::placeholder {
    color: var(--text-dim);
}

.search-clear {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    padding: 4px 8px;
    font-size: 0.85rem;
    transition: var(--transition);
}

.search-clear:hover {
    color: var(--text);
}

.no-results {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}

.no-results i {
    font-size: 2.5rem;
    color: var(--text-dim);
    margin-bottom: 16px;
    display: block;
}

/* ==================== RECENTLY VIEWED ==================== */
.recently-viewed-section {
    padding: 40px 0;
    background: var(--primary);
}

.recently-viewed-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}

.rv-card {
    background: var(--gradient-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
}

.rv-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}

.rv-card img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    margin-bottom: 8px;
}

.rv-card .rv-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 4px;
}

.rv-card .rv-price {
    font-size: 0.8rem;
    color: var(--teal);
    font-weight: 600;
}

/* ==================== LOW STOCK BADGE ==================== */
.stock-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stock-badge.low {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.stock-badge.low i {
    animation: pulse-dot 1.5s ease infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.modal-stock-badge {
    margin-bottom: 8px;
}

/* ==================== PROMO AUTO-APPLIED BADGE ==================== */
.promo-auto-applied {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-size: 0.78rem;
    color: var(--success);
    margin-bottom: 12px;
    text-align: center;
}

.promo-auto-applied i {
    margin-right: 4px;
}

/* ==================== CART TRUST BADGES ==================== */






/* ==================== COOKIE CONSENT ==================== */
/* ==================== EMAIL POPUP ==================== */
.email-popup {
    position: fixed;
    bottom: -200px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: 16px 16px 0 0;
    padding: 20px 24px;
    z-index: 8500;
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 560px;
    width: 95%;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.5);
    transition: bottom 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.email-popup.visible { bottom: 0; }
.email-popup-close {
    position: absolute;
    top: 8px;
    right: 12px;
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 4px;
}
.email-popup-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(20, 184, 166, 0.12);
    color: var(--accent-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.email-popup-text {
    flex: 1;
    min-width: 0;
}
.email-popup-text strong {
    display: block;
    font-size: 0.9rem;
    color: var(--text);
    margin-bottom: 2px;
}
.email-popup-text span {
    font-size: 0.78rem;
    color: var(--text-muted);
}
.email-popup-form {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.email-popup-form input {
    width: 160px;
    padding: 10px 12px;
    background: var(--surface-light);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 0.82rem;
    font-family: 'Inter', sans-serif;
    outline: none;
}
.email-popup-form input:focus { border-color: var(--accent); }
.email-popup-form button {
    background: var(--gradient-accent);
    border: none;
    color: #fff;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    transition: transform 0.2s;
}
.email-popup-form button:hover { transform: scale(1.05); }

@media (max-width: 600px) {
    .email-popup {
        flex-wrap: wrap;
        gap: 12px;
        padding: 16px 18px 18px;
    }
    .email-popup-form { width: 100%; }
    .email-popup-form input { flex: 1; width: auto; }
}

.cookie-consent {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--surface);
    border-top: 1px solid var(--border-light);
    padding: 10px 20px;
    z-index: 9000;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 -8px 32px rgba(0,0,0,0.4);
}

.cookie-consent.visible {
    transform: translateY(0);
}

.cookie-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.cookie-text {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.cookie-text > i {
    font-size: 1.05rem;
    color: var(--warning);
    flex-shrink: 0;
}

.cookie-text strong {
    display: inline;
    color: var(--text);
    font-size: 0.82rem;
    margin-right: 6px;
}

.cookie-text p {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.4;
    margin: 0;
}

.cookie-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    flex-wrap: wrap;
    align-items: center;
}

/* Override generic btn-outline/btn-sm styling for cookie buttons */
.cookie-actions button.btn-outline,
.cookie-actions button.btn-sm {
    padding: 5px 11px !important;
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    border-radius: 5px !important;
    letter-spacing: 0.2px;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-width: 1px;
    border-style: solid;
    min-height: 26px;
    line-height: 1;
    min-height: 38px;
}

/* Tertiary: Manage Preferences — text-style, lowest visual weight */
.cookie-actions .cookie-btn-tertiary {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--text-muted) !important;
    text-decoration: underline;
    text-decoration-color: rgba(255,255,255,0.2);
    text-underline-offset: 3px;
    padding: 10px 12px !important;
}

.cookie-actions .cookie-btn-tertiary:hover {
    color: var(--text) !important;
    text-decoration-color: var(--accent);
    background: rgba(255,255,255,0.04) !important;
}

/* Secondary: Reject All — ghost outline */
.cookie-actions .cookie-btn-secondary {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.18) !important;
    color: var(--text) !important;
}

.cookie-actions .cookie-btn-secondary:hover {
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.32) !important;
    transform: translateY(-1px);
}

/* Primary: Accept All — gradient accent CTA */
.cookie-actions .cookie-btn-primary {
    background: linear-gradient(135deg, var(--accent) 0%, #0d9488 100%) !important;
    border-color: transparent !important;
    color: #0a1628 !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 8px rgba(20,184,166,0.25), 0 0 0 1px rgba(20,184,166,0.4) inset;
    position: relative;
    overflow: hidden;
}

.cookie-actions .cookie-btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
    transform: translateX(-100%);
    transition: transform 0.5s;
}

.cookie-actions .cookie-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(20,184,166,0.4), 0 0 0 1px rgba(20,184,166,0.6) inset;
}

.cookie-actions .cookie-btn-primary:hover::before {
    transform: translateX(100%);
}

.cookie-actions .cookie-btn-primary:active,
.cookie-actions .cookie-btn-secondary:active,
.cookie-actions .cookie-btn-tertiary:active {
    transform: translateY(0);
}

/* ==================== COOKIE PREFERENCES MODAL ==================== */
.cookie-prefs-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    z-index: 9100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.cookie-prefs-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

.cookie-prefs-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.6);
    z-index: 9101;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cookie-prefs-modal.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}

.cookie-prefs-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cookie-prefs-header h3 {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.05rem;
    color: var(--text);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cookie-prefs-header h3 i {
    color: var(--accent);
}

.cookie-prefs-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 4px;
    transition: color 0.2s;
}

.cookie-prefs-close:hover {
    color: var(--text);
}

.cookie-prefs-body {
    padding: 20px 24px;
    overflow-y: auto;
    flex: 1;
}

.cookie-prefs-intro {
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.5;
    margin: 0 0 18px 0;
}

.cookie-prefs-intro strong {
    color: var(--text);
}

.cookie-pref-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.cookie-pref-row:last-child {
    border-bottom: none;
}

.cookie-pref-info {
    flex: 1;
}

.cookie-pref-info h4 {
    color: var(--text);
    font-size: 0.92rem;
    margin: 0 0 4px 0;
    font-weight: 700;
}

.cookie-pref-info p {
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.45;
    margin: 0;
}

.cookie-pref-toggle {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
    padding-top: 2px;
}

.cookie-pref-status {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.cookie-switch {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 24px;
}

.cookie-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.cookie-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: rgba(255,255,255,0.15);
    border-radius: 24px;
    transition: 0.25s;
}

.cookie-slider::before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: #fff;
    border-radius: 50%;
    transition: 0.25s;
}

.cookie-switch input:checked + .cookie-slider {
    background-color: var(--accent);
}

.cookie-switch input:checked + .cookie-slider::before {
    transform: translateX(18px);
}

.cookie-switch-locked .cookie-slider {
    cursor: not-allowed;
    background-color: rgba(20,184,166,0.4);
}

.cookie-prefs-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border-light);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* ==================== FOOTER COOKIE PREFS LINK ==================== */
.footer-legal-links button.footer-link-btn {
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    padding: 0;
    text-decoration: none;
}

.footer-legal-links button.footer-link-btn:hover {
    color: var(--accent);
}

/* ==================== LOADING SCREEN ==================== */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--primary);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease;
}

.loading-screen.hidden {
    opacity: 0;
    pointer-events: none;
}

.loader-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.loader-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-light);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ==================== MOBILE STICKY ADD TO CART ==================== */
@media (max-width: 768px) {
    .modal-body {
        grid-template-columns: 1fr;
    }

    .modal-content {
        max-height: 90vh;
        overflow-y: auto;
        padding-bottom: 80px;
    }

    .modal-sticky-footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--surface);
        border-top: 1px solid var(--border-light);
        padding: 12px 20px;
        z-index: 4001;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .modal-sticky-footer .modal-sticky-price {
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--teal);
        white-space: nowrap;
    }

    .modal-sticky-footer .btn-primary {
        flex: 1;
    }

    .newsletter-content {
        flex-direction: column;
        gap: 24px;
        text-align: center;
    }

    .testimonials-grid {
        grid-template-columns: 1fr;
    }

    .cookie-content {
        flex-direction: column;
        text-align: left;
        align-items: stretch;
    }

    .cookie-text {
        flex-direction: row;
        text-align: left;
    }

    .cookie-actions {
        justify-content: stretch;
        width: 100%;
    }

    .cookie-actions button {
        flex: 1;
        min-width: 0;
    }

    .cookie-pref-row {
        flex-direction: column;
        gap: 10px;
    }

    .cookie-pref-toggle {
        flex-direction: row;
        align-self: flex-start;
    }

    .recently-viewed-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    

    .product-search {
        max-width: 100%;
    }
}

@media (min-width: 769px) {
    .modal-sticky-footer {
        display: none !important;
    }
}

/* ==================== CHECKOUT LEGAL COMPLIANCE ==================== */
.checkout-legal-box {
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    padding: 20px;
    margin: 16px 0;
}

.checkout-legal-box h4 {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.9rem;
    color: var(--text);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.checkout-legal-box h4 i {
    color: var(--accent);
}

/* R444: Collapsible agreement disclosure.
   The agreement text is hidden behind a clickable <summary> row so the
   checkout page isn't dominated by a wall of legal copy. User clicks the
   summary to expand, reads the full agreement, then ticks the checkbox.
   Uses native <details>/<summary> — accessible, no JS required. */
.checkout-legal-details {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    margin-bottom: 14px;
    background: rgba(255, 255, 255, 0.02);
    overflow: hidden;
}
.checkout-legal-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    cursor: pointer;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text);
    user-select: none;
    -webkit-user-select: none;
    list-style: none;
    transition: background 0.18s ease;
}
.checkout-legal-summary:hover {
    background: rgba(20, 184, 166, 0.06);
}
/* Hide the default disclosure triangle in every engine */
.checkout-legal-summary::-webkit-details-marker { display: none; }
.checkout-legal-summary::marker { display: none; content: ''; }
.checkout-legal-summary > i:first-child {
    color: var(--accent);
    font-size: 1rem;
    flex-shrink: 0;
}
.checkout-legal-summary .legal-summary-title {
    flex: 1 1 auto;
    line-height: 1.35;
}
.checkout-legal-summary .legal-summary-meta {
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    flex-shrink: 0;
}
.checkout-legal-summary .legal-chevron {
    color: var(--text-muted);
    font-size: 0.8rem;
    flex-shrink: 0;
    transition: transform 0.22s cubic-bezier(0.2, 0.6, 0.3, 1);
}
/* Rotate chevron + change meta-text styling when expanded */
.checkout-legal-details[open] > .checkout-legal-summary .legal-chevron {
    transform: rotate(180deg);
    color: var(--accent);
}
.checkout-legal-details[open] > .checkout-legal-summary .legal-summary-meta {
    color: var(--accent);
}

.checkout-legal-text {
    /* R446: was rgba(0,0,0,0.2) which left a flat dark-grey overlay over the
       white card surface. Use a clean off-white that sits cleanly against
       the surrounding box without the muddy tint. */
    background: #fafafa;
    border-top: 1px solid var(--border-light);
    padding: 16px;
    max-height: 320px;
    overflow-y: auto;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text);
}
/* When .checkout-legal-text is inside a collapsible details, drop the
   external margin (the wrapping <details> already gives it spacing). */
.checkout-legal-details .checkout-legal-text {
    border: none;
    border-top: 1px solid var(--border);
    border-radius: 0;
    margin: 0;
}

.checkout-legal-text p {
    margin-bottom: 8px;
    color: var(--text);
    font-weight: 500;
}

.checkout-legal-text ul {
    padding-left: 20px;
}

.checkout-legal-text ul li {
    margin-bottom: 6px;
    color: var(--text-muted);
    font-size: 0.83rem;
}

.checkout-legal-text ul li strong {
    color: var(--text);
}

.checkout-signature {
    margin: 16px 0;
}

.checkout-signature label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
}

#signature-pad {
    width: 100%;
    max-width: 100%;
    height: 120px;
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid var(--border-light);
    border-radius: var(--radius-sm);
    cursor: crosshair;
    touch-action: none;
}

#signature-pad:hover {
    border-color: var(--accent);
}

.signature-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.btn-sig {
    padding: 6px 16px;
    font-size: 0.8rem;
    font-weight: 600;
    background: var(--surface-light);
    color: var(--text-muted);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
}

.btn-sig:hover {
    background: var(--surface-lighter);
    color: var(--text);
}

.signature-printed {
    font-size: 0.8rem;
    color: var(--text-dim);
    margin-top: 6px;
    font-style: italic;
}

/* Scrollbar for legal text */
.checkout-legal-text::-webkit-scrollbar {
    width: 4px;
}

.checkout-legal-text::-webkit-scrollbar-track {
    background: transparent;
}

.checkout-legal-text::-webkit-scrollbar-thumb {
    background: var(--border-light);
    border-radius: 4px;
}

/* ==================== SCROLL ANIMATIONS ==================== */
.scroll-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-animate.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger children */
.scroll-animate-children > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.scroll-animate-children.animate-in > *:nth-child(1) { transition-delay: 0s; opacity: 1; transform: translateY(0); }
.scroll-animate-children.animate-in > *:nth-child(2) { transition-delay: 0.1s; opacity: 1; transform: translateY(0); }
.scroll-animate-children.animate-in > *:nth-child(3) { transition-delay: 0.2s; opacity: 1; transform: translateY(0); }
.scroll-animate-children.animate-in > *:nth-child(4) { transition-delay: 0.3s; opacity: 1; transform: translateY(0); }

/* Slide from left/right */
.scroll-animate-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.scroll-animate-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.scroll-animate-left.animate-in,
.scroll-animate-right.animate-in {
    opacity: 1;
    transform: translateX(0);
}

/* Scale in */
.scroll-animate-scale {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.scroll-animate-scale.animate-in {
    opacity: 1;
    transform: scale(1);
}

/* ==================== PRODUCT IMAGE ZOOM ==================== */
.modal-image {
    overflow: hidden;
    cursor: zoom-in;
}

.modal-image img {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-image:hover img {
    transform: scale(1.15);
}

.modal-image.zoomed {
    cursor: zoom-out;
}

.modal-image.zoomed img {
    transform: scale(1.8);
}

/* ==================== YOU MAY ALSO LIKE ==================== */
.modal-related {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.modal-related h4 {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.modal-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.related-card {
    background: var(--surface-light);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px;
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
}

.related-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.related-card img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    margin-bottom: 6px;
}

.related-card .related-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.related-card .related-price {
    font-size: 0.7rem;
    color: var(--teal);
    font-weight: 700;
}

/* ==================== CUSTOMER REVIEWS ==================== */
.modal-reviews {
    margin-top: 0;
}

.reviews-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.reviews-section h4 {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.reviews-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.reviews-avg {
    display: flex;
    align-items: center;
    gap: 10px;
}

.reviews-avg-num {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text);
}

.reviews-avg-stars {
    display: flex;
    gap: 2px;
}

.review-star {
    font-size: 0.85rem;
}

.review-star.filled {
    color: #f59e0b;
}

.review-star:not(.filled) {
    color: var(--surface-lighter);
}

.reviews-count {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.btn-write-review {
    background: transparent;
    border: 1px solid var(--accent);
    color: var(--accent);
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-write-review:hover:not(:disabled) {
    background: var(--accent);
    color: #fff;
}

.btn-write-review:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.reviews-loading {
    color: var(--text-muted);
    font-size: 0.85rem;
    padding: 20px 0;
    text-align: center;
}

.reviews-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.review-empty {
    color: var(--text-muted);
    font-size: 0.9rem;
    text-align: center;
    padding: 24px 0;
    font-style: italic;
}

.review-card {
    background: var(--surface-light);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 14px;
}

.review-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 6px;
    flex-wrap: wrap;
    gap: 4px;
}

.review-author {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.review-name {
    font-weight: 600;
    color: var(--text);
    font-size: 0.9rem;
}

.review-verified {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--success);
    font-size: 0.75rem;
    font-weight: 600;
}

.review-verified i {
    font-size: 0.7rem;
}

.review-date {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.review-stars {
    margin-bottom: 6px;
}

.review-title {
    font-weight: 600;
    color: var(--text);
    font-size: 0.92rem;
    margin-bottom: 4px;
}

.review-body {
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.5;
    margin-bottom: 8px;
    white-space: pre-wrap;
    word-break: break-word;
}

.review-actions {
    display: flex;
    gap: 8px;
}

.review-helpful-btn {
    background: transparent;
    border: 1px solid var(--border-light);
    color: var(--text-muted);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.75rem;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 4px;
}

.review-helpful-btn:hover:not(:disabled) {
    border-color: var(--accent);
    color: var(--accent);
}

.review-helpful-btn.voted {
    border-color: var(--accent);
    color: var(--accent);
    opacity: 0.7;
    cursor: default;
}

/* Review submission form */
.review-form {
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 16px;
    margin-bottom: 16px;
}

.review-form h5 {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.8rem;
    color: var(--text);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.review-form-stars {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.star-input {
    display: flex;
    gap: 4px;
}

.review-star-input {
    font-size: 1.3rem;
    cursor: pointer;
    color: var(--surface-lighter);
    transition: color 0.15s ease;
}

.review-star-input.fas {
    color: #f59e0b;
}

.review-input {
    width: 100%;
    background: var(--surface-light);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    margin-bottom: 10px;
    outline: none;
    transition: border-color 0.2s ease;
}

.review-input:focus {
    border-color: var(--accent);
}

.review-textarea {
    width: 100%;
    background: var(--surface-light);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    margin-bottom: 6px;
    outline: none;
    resize: vertical;
    min-height: 80px;
    font-family: inherit;
    transition: border-color 0.2s ease;
}

.review-textarea:focus {
    border-color: var(--accent);
}

.review-char-count {
    font-size: 0.72rem;
    color: var(--text-muted);
    text-align: right;
    margin-bottom: 10px;
}

.review-form-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.review-submit-btn {
    font-size: 0.85rem;
    padding: 8px 18px;
}

.btn-cancel-review {
    background: transparent;
    border: 1px solid var(--border-light);
    color: var(--text-muted);
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.85rem;
    transition: var(--transition);
}

.btn-cancel-review:hover {
    border-color: var(--text-muted);
    color: var(--text);
}

/* ==================== ANIMATED STAT COUNTERS ==================== */
.stat-number {
    font-family: 'Orbitron', sans-serif;
    transition: color 0.3s ease;
}

.stat.counted .stat-number {
    color: var(--teal);
}

/* ==================== CART UPSELL NUDGE ==================== */
.cart-upsell {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.1), rgba(20, 184, 166, 0.1));
    border: 1px solid rgba(20, 184, 166, 0.2);
    border-radius: var(--radius-sm);
    padding: 12px;
    margin-bottom: 12px;
    text-align: center;
}

.cart-upsell-text {
    font-size: 0.8rem;
    color: var(--text);
    margin-bottom: 8px;
    line-height: 1.4;
}

.cart-upsell-text strong {
    color: var(--teal);
}

.cart-upsell-product {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--surface-light);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    cursor: pointer;
    transition: var(--transition);
}

.cart-upsell-product:hover {
    background: var(--surface-lighter);
}

.cart-upsell-product img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.cart-upsell-product .upsell-info {
    flex: 1;
    text-align: left;
}

.cart-upsell-product .upsell-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text);
}

.cart-upsell-product .upsell-price {
    font-size: 0.7rem;
    color: var(--teal);
}

.cart-upsell-product .upsell-add {
    background: var(--gradient-accent);
    color: white;
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.75rem;
    transition: var(--transition);
}

.cart-upsell-product .upsell-add:hover {
    transform: scale(1.1);
}

.free-shipping-bar {
    height: 4px;
    background: var(--surface-lighter);
    border-radius: 2px;
    margin-top: 6px;
    overflow: hidden;
}

.free-shipping-progress {
    height: 100%;
    background: var(--gradient-accent);
    border-radius: 2px;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==================== ORDER TRACKING MODAL ==================== */
.tracking-modal-content {
    background: var(--gradient-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 40px;
    max-width: 480px;
    width: 90%;
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
}

.tracking-header {
    text-align: center;
    margin-bottom: 28px;
}

.tracking-icon {
    width: 60px;
    height: 60px;
    background: var(--gradient-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 1.4rem;
    color: white;
}

.tracking-header h2 {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.3rem;
    margin-bottom: 8px;
}

.tracking-header p {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.tracking-form {
    margin-bottom: 20px;
}

.tracking-form .form-group {
    margin-bottom: 16px;
}

.tracking-result {
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 16px;
}

.tracking-status {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.tracking-status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.tracking-status-dot.pending {
    background: var(--warning);
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
}

.tracking-status-dot.confirmed {
    background: var(--success);
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
}

.tracking-status-dot.shipped {
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent-glow);
}

.tracking-timeline {
    margin-top: 16px;
    padding-left: 20px;
    border-left: 2px solid var(--border-light);
}

.tracking-timeline-item {
    position: relative;
    padding: 0 0 16px 16px;
    font-size: 0.85rem;
}

.tracking-timeline-item::before {
    content: '';
    position: absolute;
    left: -25px;
    top: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--border-light);
}

.tracking-timeline-item.active::before {
    background: var(--success);
}

.tracking-timeline-item .timeline-label {
    font-weight: 600;
    color: var(--text);
}

.tracking-timeline-item .timeline-date {
    color: var(--text-dim);
    font-size: 0.8rem;
}

.tracking-number-box {
    background: rgba(20, 184, 166, 0.08);
    border: 1px solid rgba(20, 184, 166, 0.2);
    border-radius: 12px;
    padding: 16px;
    margin-top: 16px;
    text-align: center;
}

.tracking-number-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-dim);
    margin-bottom: 6px;
}

.tracking-number-value {
    font-family: 'Orbitron', monospace;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    letter-spacing: 1.5px;
    margin-bottom: 12px;
    word-break: break-all;
}

.btn-track-carrier {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--gradient-accent);
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
}

.btn-track-carrier:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(20, 184, 166, 0.3);
}

.tracking-help {
    text-align: center;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.tracking-help p {
    font-size: 0.8rem;
    color: var(--text-dim);
}

.tracking-help a {
    color: var(--accent);
}

/* Checkout email opt-in */
.checkout-optin {
    margin: 12px 0 16px;
    font-size: 0.85rem;
}

.checkout-optin span:last-child {
    color: var(--text-muted);
}

/* ==================== CERTIFICATE OF ANALYSIS ==================== */
.btn-coa {
    width: 100%;
    margin-top: 10px;
    padding: 12px 16px;
    background: rgba(20, 184, 166, 0.1);
    border: 1px solid rgba(20, 184, 166, 0.4);
    color: var(--accent);
    border-radius: 10px;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.btn-coa:hover {
    background: rgba(20, 184, 166, 0.2);
    border-color: var(--accent);
    transform: translateY(-1px);
}
.btn-coa i { font-size: 1rem; }

.coa-overlay {
    background: rgba(0, 0, 0, 0.75);
    align-items: flex-start;
    overflow-y: auto;
    padding: 40px 20px;
}
.coa-content {
    background: transparent;
    max-width: 880px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    padding-top: 50px;
}
.coa-actions-bar {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    gap: 10px;
}
.coa-close-btn {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    position: absolute;
    top: 0;
    left: 0;
}
.coa-close-btn:hover { background: rgba(255,255,255,0.2); }
.coa-print-btn {
    background: var(--accent);
    color: #0a1628;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}
.coa-print-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(20, 184, 166, 0.4);
}

/* Paper sheet — styled to look like a printed lab report */
.coa-paper {
    background: #ffffff;
    color: #1e293b;
    padding: 42px 48px;
    border-radius: 4px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.6);
    font-family: 'Inter', sans-serif;
    line-height: 1.55;
    font-size: 13px;
}

.coa-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 18px;
    border-bottom: 3px double #0ea5e9;
    margin-bottom: 22px;
}
.coa-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}
.coa-brand img {
    width: 54px;
    height: 54px;
    object-fit: contain;
}
.coa-brand-name {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.35rem;
    font-weight: 800;
    color: #0a1628;
    letter-spacing: 0.05em;
}
.coa-brand-sub {
    color: #64748b;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 600;
}
.coa-title-block {
    text-align: right;
}
.coa-doctype {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: #0a1628;
    letter-spacing: 0.1em;
    margin-bottom: 4px;
}
.coa-lot {
    font-size: 0.82rem;
    color: #475569;
}
.coa-lot strong { color: #0a1628; font-family: 'Orbitron', sans-serif; letter-spacing: 0.05em; }

.coa-product-bar {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.4fr;
    gap: 16px;
    padding: 16px 18px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    margin-bottom: 22px;
}
.coa-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #64748b;
    font-weight: 700;
    margin-bottom: 3px;
}
.coa-val {
    color: #0a1628;
    font-weight: 700;
    font-size: 0.92rem;
}

.coa-section { margin-bottom: 22px; }
.coa-section-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #0ea5e9;
    padding-bottom: 6px;
    margin-bottom: 10px;
    border-bottom: 1px solid #cbd5e1;
}
.coa-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}
.coa-table th {
    text-align: left;
    padding: 8px 10px;
    background: #f8fafc;
    color: #475569;
    font-weight: 600;
    border: 1px solid #e2e8f0;
    width: 22%;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.coa-table td {
    padding: 8px 10px;
    color: #0a1628;
    border: 1px solid #e2e8f0;
    font-weight: 500;
}
.coa-pass {
    color: #16a34a !important;
    font-weight: 800 !important;
    text-align: center;
    width: 70px;
    background: rgba(34, 197, 94, 0.08) !important;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
}

.coa-chart {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 10px 6px 4px;
}
.coa-chart-caption {
    text-align: center;
    font-size: 0.72rem;
    color: #64748b;
    margin-top: 6px;
    font-style: italic;
}

.coa-footer {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 20px;
    padding: 18px 0 14px;
    border-top: 1px solid #cbd5e1;
    margin-top: 24px;
}
.coa-sig-block { }
.coa-sig-line {
    color: #0a1628;
    font-weight: 600;
    font-size: 0.85rem;
    padding-top: 4px;
    border-top: 1px solid #94a3b8;
    margin-top: 18px;
}

.coa-disclaimer {
    margin-top: 16px;
    padding: 12px 14px;
    background: #fef2f2;
    border-left: 3px solid #ef4444;
    border-radius: 3px;
    font-size: 0.72rem;
    color: #7f1d1d;
    line-height: 1.6;
}
.coa-disclaimer strong { color: #dc2626; }

@media (max-width: 768px) {
    .coa-paper { padding: 24px 22px; font-size: 12px; }
    .coa-header { flex-direction: column; gap: 12px; }
    .coa-title-block { text-align: left; }
    .coa-product-bar { grid-template-columns: 1fr 1fr; }
    .coa-footer { grid-template-columns: 1fr; }
    .coa-table { font-size: 0.72rem; }
    .coa-table th, .coa-table td { padding: 6px 8px; }
    .coa-actions-bar { position: static; margin-bottom: 12px; justify-content: flex-end; }
    .coa-close-btn { top: -6px; }
}

/* Print stylesheet — hides everything except the COA paper */
@media print {
    body * { visibility: hidden; }
    .coa-modal, .coa-modal * { visibility: visible; }
    .coa-overlay {
        position: static !important;
        background: white !important;
        padding: 0 !important;
        overflow: visible !important;
    }
    .coa-actions-bar, .coa-close-btn { display: none !important; }
    .coa-paper {
        box-shadow: none !important;
        max-width: 100% !important;
        padding: 20px !important;
    }
}

/* ==================== LOYALTY POINTS ==================== */
.points-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: linear-gradient(135deg, rgba(251,191,36,0.15), rgba(245,158,11,0.12));
    border: 1px solid rgba(251,191,36,0.4);
    border-radius: 999px;
    color: #fbbf24;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 0 0 rgba(251,191,36,0);
}
.points-pill:hover {
    background: linear-gradient(135deg, rgba(251,191,36,0.25), rgba(245,158,11,0.2));
    box-shadow: 0 0 12px rgba(251,191,36,0.3);
    transform: translateY(-1px);
}
.points-pill i { font-size: 0.85rem; }
.points-pill-value { letter-spacing: 0.5px; }

/* Points slider (shared by checkout widget) */
.checkout-points-widget .points-balance { color: var(--text-muted); font-size: 0.78rem; }
.checkout-points-widget .points-balance strong { color: #fbbf24; font-family: 'Orbitron', sans-serif; }

.points-slider {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: rgba(255,255,255,0.08);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}
.points-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    border: 2px solid #fff;
    cursor: pointer;
    box-shadow: 0 0 8px rgba(251,191,36,0.5);
}
.points-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    border: 2px solid #fff;
    cursor: pointer;
    box-shadow: 0 0 8px rgba(251,191,36,0.5);
}




/* Confirmation banner */
.confirm-points-earned {
    margin: 14px auto;
    padding: 12px 20px;
    background: linear-gradient(135deg, rgba(251,191,36,0.15), rgba(245,158,11,0.1));
    border: 1px solid rgba(251,191,36,0.4);
    border-radius: 12px;
    color: #fbbf24;
    font-weight: 600;
    display: inline-block;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.9rem;
}
.confirm-points-earned i { margin-right: 6px; }

/* Confirmation: claim-account CTA (shown to signed-out users post-order). */
.confirm-claim-account {
    margin: 14px auto;
    padding: 18px 22px;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.15), rgba(99, 102, 241, 0.10));
    border: 1px solid rgba(20, 184, 166, 0.45);
    border-radius: 14px;
    max-width: 560px;
    text-align: center;
    box-shadow: 0 6px 20px rgba(20, 184, 166, 0.10);
}
.confirm-claim-account .cca-headline {
    font-family: 'Orbitron', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 8px;
}
.confirm-claim-account .cca-headline i { margin-right: 6px; }
.confirm-claim-account .cca-body {
    font-size: 0.86rem;
    color: var(--text);
    line-height: 1.55;
    margin-bottom: 14px;
}
.confirm-claim-account .cca-body strong { color: var(--accent); }
.confirm-claim-account .cca-cta {
    display: inline-block;
    background: var(--accent);
    color: #0a1628;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.92rem;
    padding: 11px 26px;
    border-radius: 10px;
    transition: opacity 0.18s, transform 0.18s;
}
.confirm-claim-account .cca-cta:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}
.confirm-claim-account .cca-cta i { margin-right: 7px; }
.confirm-points-earned strong { color: #fff; font-size: 1.05rem; }

/* Delivery timeline on confirmation */
.confirm-delivery {
    background: rgba(20, 184, 166,0.06);
    border: 1px solid rgba(20, 184, 166,0.2);
    border-radius: 12px;
    padding: 20px 24px;
    margin-top: 18px;
}
.confirm-delivery-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: #93c5fd;
    margin-bottom: 18px;
}
.confirm-delivery-title i {
    margin-right: 8px;
    color: #14b8a6;
}
.confirm-delivery-timeline {
    display: flex;
    align-items: flex-start;
    gap: 0;
}
.confirm-timeline-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;
    min-width: 72px;
    position: relative;
}
.confirm-timeline-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    border: 2px solid rgba(255,255,255,0.25);
    margin-bottom: 8px;
    position: relative;
    z-index: 1;
    transition: all 0.3s;
}
.confirm-timeline-step.active .confirm-timeline-dot {
    background: #14b8a6;
    border-color: #2dd4bf;
    box-shadow: 0 0 10px rgba(20, 184, 166,0.5);
}
.confirm-timeline-bar {
    flex: 1;
    height: 2px;
    background: rgba(255,255,255,0.12);
    margin-top: 7px;
    min-width: 30px;
    align-self: flex-start;
}
.confirm-timeline-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.3;
}
.confirm-timeline-step.active .confirm-timeline-label {
    color: #93c5fd;
}
.confirm-timeline-date {
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-top: 2px;
    text-align: center;
}
@media (max-width: 600px) {
    .confirm-delivery { padding: 16px; }
    .confirm-timeline-step { min-width: 58px; }
    .confirm-timeline-label { font-size: 0.65rem; }
}

/* Account page loyalty tab */
.loyalty-hero {
    background: linear-gradient(135deg, rgba(251,191,36,0.12), rgba(245,158,11,0.06));
    border: 1px solid rgba(251,191,36,0.3);
    border-radius: 16px;
    padding: 32px 24px;
    text-align: center;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}
.loyalty-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(251,191,36,0.15), transparent 70%);
    pointer-events: none;
}
.loyalty-hero-icon {
    font-size: 2.2rem;
    color: #fbbf24;
    margin-bottom: 10px;
    text-shadow: 0 0 20px rgba(251,191,36,0.5);
}
.loyalty-hero-label {
    color: var(--text-muted);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 8px;
}
.loyalty-hero-value {
    font-family: 'Orbitron', sans-serif;
    font-size: 3.2rem;
    font-weight: 800;
    color: #fbbf24;
    line-height: 1;
    margin-bottom: 8px;
    text-shadow: 0 0 30px rgba(251,191,36,0.3);
}
.loyalty-hero-cash {
    color: var(--text-muted);
    font-size: 0.92rem;
}
.loyalty-hero-cash strong {
    color: #fff;
    font-family: 'Orbitron', sans-serif;
}
.loyalty-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}
.loyalty-stat {
    background: rgba(31,41,55,0.4);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
}
.loyalty-stat-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.loyalty-stat-value {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    color: var(--accent);
    font-size: 1.1rem;
}
.loyalty-how h3 {
    color: var(--text);
    font-size: 1.1rem;
    margin-bottom: 14px;
}
.loyalty-how-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}
.loyalty-how-item {
    background: rgba(31,41,55,0.4);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 18px;
}
.loyalty-how-item i {
    font-size: 1.4rem;
    color: #fbbf24;
    margin-bottom: 10px;
}
.loyalty-how-item strong {
    display: block;
    color: var(--text);
    margin-bottom: 6px;
    font-size: 0.95rem;
}
.loyalty-how-item p {
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.5;
}

@media (max-width: 640px) {
    .loyalty-stats { grid-template-columns: 1fr; }
    .loyalty-hero-value { font-size: 2.4rem; }
    .points-pill { padding: 5px 10px; font-size: 0.72rem; }
}

/* ==================== COMPARE PAGE ==================== */











/* Quickstart presets */









/* Results table */






















.compare-cell.highlight {
    color: var(--accent);
    font-weight: 600;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.92rem;
}
.compare-cell.badge {
    color: var(--text);
}
.compare-cell.badge::before {
    content: attr(data-category);
}
.compare-cell.badge {
    display: flex;
    align-items: flex-start;
}
.compare-cell.code {
    font-family: 'Courier New', monospace;
    font-size: 0.82rem;
    color: #a5f3fc;
}





.compare-actions .btn-primary,
.compare-actions .btn-outline {
    padding: 14px 26px;
    font-size: 0.9rem;
}








/* ==================== AFFILIATE PROGRAM ==================== */















/* ─────────────────────────────────────────────────────────────────
   AFFILIATE SIGNUP CARD (instant Amino-style flow)
   Single card with: heading, perks row, code input with live preview,
   gradient CTA, footer note. Replaces the old multi-field application
   form. Visual stack matches the rest of the site (dark, teal accent).
   ───────────────────────────────────────────────────────────────── */
.aff-signup-card {
    background: linear-gradient(165deg,
        rgba(20, 184, 166, 0.08) 0%,
        rgba(99, 102, 241, 0.04) 55%,
        rgba(10, 22, 40, 0.55) 100%);
    border: 1px solid rgba(20, 184, 166, 0.28);
    border-radius: 18px;
    padding: 36px 32px 32px;
    max-width: 620px;
    margin: 0 auto;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    position: relative;
    overflow: hidden;
}
.aff-signup-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--accent), #6366f1, transparent);
    opacity: 0.85;
    pointer-events: none;
}
.aff-signup-header { text-align: center; margin-bottom: 24px; }
.aff-signup-header h2 {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.55rem;
    color: var(--text);
    margin: 0 0 8px;
    letter-spacing: 0.5px;
}
.aff-signup-sub {
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.55;
    max-width: 460px;
    margin: 0 auto;
}
.aff-signup-sub strong { color: var(--accent); }

.aff-signup-perks {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 0 0 28px;
}
.aff-signup-perk {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 14px 8px;
    background: rgba(15, 23, 42, 0.45);
    border: 1px solid rgba(20, 184, 166, 0.18);
    border-radius: 12px;
    line-height: 1.3;
}
.aff-signup-perk i {
    color: var(--accent);
    font-size: 1.1rem;
    margin-bottom: 4px;
}
.aff-signup-perk strong {
    font-family: 'Orbitron', sans-serif;
    color: var(--text);
    font-size: 1rem;
    letter-spacing: 0.3px;
}
.aff-signup-perk span {
    font-size: 0.74rem;
    color: var(--text-muted);
    letter-spacing: 0.02em;
}
@media (max-width: 520px) {
    .aff-signup-perks { grid-template-columns: 1fr; }
    .aff-signup-perk { flex-direction: row; justify-content: center; gap: 10px; }
    .aff-signup-perk i { margin-bottom: 0; }
}

.aff-signup-form { display: flex; flex-direction: column; gap: 4px; }
.aff-signup-label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 6px;
}
/* Affiliate signup code input — needs !important to defeat the global
   form-input clip-path/border-radius rules in the universal section
   further down the file. */
.aff-signup-form input.aff-signup-code-input {
    width: 100% !important;
    background: rgba(10, 22, 40, 0.6) !important;
    border: 2px solid rgba(20, 184, 166, 0.30) !important;
    border-radius: 14px !important;
    padding: 20px 22px !important;
    color: var(--text) !important;
    font-family: 'Orbitron', sans-serif !important;
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    letter-spacing: 4px !important;
    text-align: center !important;
    clip-path: none !important;
    transition: border-color 0.18s, box-shadow 0.18s, background 0.18s !important;
}
.aff-signup-form input.aff-signup-code-input:focus {
    outline: none !important;
    border-color: var(--accent) !important;
    background: rgba(20, 184, 166, 0.08) !important;
    box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.16) !important;
}
.aff-signup-form input.aff-signup-code-input::placeholder {
    color: var(--text-dim) !important;
    font-weight: 600 !important;
    letter-spacing: 4px !important;
    text-transform: none !important;
    opacity: 0.6 !important;
    font-size: 1.4rem !important;
}
.aff-signup-hint {
    font-size: 0.76rem;
    color: var(--text-muted);
    text-align: center;
    margin: 8px 0 14px;
}

.aff-signup-preview {
    background: rgba(15, 23, 42, 0.55);
    border: 1px dashed rgba(20, 184, 166, 0.30);
    border-radius: 12px;
    padding: 14px 16px;
    margin: 0 0 18px;
}
.aff-signup-preview-label {
    font-size: 0.74rem;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    margin-bottom: 6px;
    text-align: center;
}
.aff-signup-preview-link {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 0.94rem;
    color: var(--text);
    text-align: center;
    word-break: break-all;
    line-height: 1.45;
}
.aff-signup-preview-link strong {
    color: var(--accent);
    font-weight: 700;
    letter-spacing: 0.04em;
}

.aff-signup-cta {
    width: 100%;
    background: linear-gradient(135deg, var(--accent), #6366f1);
    color: #fff;
    border: none;
    border-radius: 14px;
    padding: 18px 24px;
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    cursor: pointer;
    transition: transform 0.16s, box-shadow 0.18s, filter 0.18s, opacity 0.18s;
}
.aff-signup-cta:not(:disabled):hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
    box-shadow: 0 12px 28px rgba(20, 184, 166, 0.35);
}
.aff-signup-cta:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.aff-signup-footer-note {
    font-size: 0.74rem;
    color: var(--text-dim);
    text-align: center;
    margin-top: 14px;
    line-height: 1.5;
}

/* Legacy .aff-hero retained for any other call sites (e.g., the "pending"
   / "rejected" status cards still use the same visual language). */





.aff-gate {
    background: rgba(31, 41, 55, 0.4);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    padding: 40px 24px;
    text-align: center;
    color: var(--text-muted);
}
.aff-gate i { font-size: 2rem; color: var(--accent); margin-bottom: 12px; display: block; }
.aff-gate h3 { color: var(--text); font-family: 'Orbitron', sans-serif; margin: 0 0 8px 0; }
.aff-gate p { margin: 0 0 16px 0; }











.aff-status-card {
    background: rgba(31, 41, 55, 0.45);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    padding: 40px 24px;
    text-align: center;
}
.aff-status-card i { font-size: 2.5rem; margin-bottom: 14px; display: block; }
.aff-status-card h3 { font-family: 'Orbitron', sans-serif; color: var(--text); margin: 0 0 10px 0; }
.aff-status-card p { color: var(--text-muted); margin: 0; }
.aff-pending i { color: #fbbf24; }
.aff-pending { border-color: rgba(251,191,36,0.35); }
.aff-rejected i { color: var(--danger, #ef4444); }







.aff-stat {
    background: rgba(31, 41, 55, 0.4);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 18px 14px;
    text-align: center;
}






/* Auth submit button (used on account, affiliate, etc.) */
.auth-submit {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #14b8a6 0%, #0ea5e9 100%);
    color: #0a1628;
    border: none;
    border-radius: 10px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    margin-top: 8px;
}
.auth-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(20, 184, 166, 0.3);
}
.auth-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.aff-payout-card .auth-submit { width: auto; padding: 12px 20px; }
.aff-payout-card .auth-submit:disabled { opacity: 0.5; cursor: not-allowed; }

/* Dual payout option cards (crypto vs store credit) */
.aff-payout-dual {
    display: grid;
    /* R136: grid was hard-coded to `1fr 1fr` from when there were only two
       payout options. Now there are four (Crypto / Zelle / PayPal / Store
       Credit), so switch to auto-fit minmax — fits 4 tiles on wide desktop,
       2×2 on tablets, 1 column on phones, no overflow. */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}
@media (max-width: 640px) {
    .aff-payout-dual { grid-template-columns: 1fr; }
}
.aff-payout-option {
    position: relative;
    background: rgba(31, 41, 55, 0.45);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    padding: 22px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform 0.2s ease, border-color 0.2s ease;
}
.aff-payout-option:hover {
    transform: translateY(-2px);
    border-color: rgba(20, 184, 166,0.4);
}
.aff-payout-option.aff-payout-featured {
    border-color: rgba(20,184,166,0.55);
    background: linear-gradient(135deg, rgba(20,184,166,0.08), rgba(31,41,55,0.45));
    box-shadow: 0 6px 24px rgba(20,184,166,0.12);
}
.aff-payout-badge {
    position: absolute;
    top: -10px;
    right: 14px;
    background: linear-gradient(135deg, #14b8a6, #0d9488);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 999px;
    box-shadow: 0 3px 10px rgba(20,184,166,0.4);
}
.aff-payout-head {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Orbitron', sans-serif;
    font-weight: 600;
    color: var(--text);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.aff-payout-head i { color: var(--accent); font-size: 1.1rem; }
.aff-payout-featured .aff-payout-head i { color: #14b8a6; }
.aff-payout-amount {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: 0.5px;
}
.aff-payout-featured .aff-payout-amount {
    background: linear-gradient(135deg, #14b8a6, #5eead4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.aff-payout-sub {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.5;
    min-height: 36px;
}
.aff-payout-btn {
    margin-top: auto;
    padding: 12px 16px;
    border: 1px solid var(--border-light);
    background: rgba(15, 23, 42, 0.6);
    color: var(--text);
    border-radius: 10px;
    font-family: 'Orbitron', sans-serif;
    font-weight: 600;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.aff-payout-btn:hover:not(:disabled) {
    border-color: var(--accent);
    background: rgba(20, 184, 166,0.12);
}
.aff-payout-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.aff-payout-btn-featured {
    margin-top: auto;
    padding: 13px 16px;
    border: none;
    background: linear-gradient(135deg, #14b8a6, #0d9488);
    color: #fff;
    border-radius: 10px;
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(20,184,166,0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.aff-payout-btn-featured:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 22px rgba(20,184,166,0.45);
}
.aff-payout-btn-featured:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }

/* Unredeemed store credit codes list */
.aff-credits-card {
    background: rgba(31, 41, 55, 0.45);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    padding: 20px 24px;
    margin-bottom: 16px;
}
.aff-credits-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.92rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text);
    margin-bottom: 14px;
}
.aff-credits-header i { color: #14b8a6; }
.aff-credit-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(15, 23, 42, 0.55);
    border: 1px dashed rgba(20,184,166,0.35);
    border-radius: 10px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.aff-credit-row:last-child { margin-bottom: 0; }
.aff-credit-code {
    font-family: 'Orbitron', monospace;
    font-weight: 700;
    color: #5eead4;
    font-size: 0.95rem;
    letter-spacing: 1px;
    cursor: pointer;
    user-select: all;
}
.aff-credit-code:hover { color: #14b8a6; }
.aff-credit-sub {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 2px;
}
.aff-credit-value {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    color: var(--text);
    font-size: 1.05rem;
}
.aff-credits-footer {
    margin-top: 12px;
    font-size: 0.78rem;
    color: var(--text-muted);
    text-align: center;
    font-style: italic;
}

/* Share & Earn hero card */












/* ── Affiliate Dashboard v2 ── */

/* Dashboard Header */







@keyframes statusPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}





/* Stats Row v2 */










/* ── Secondary mini-stats (week / month / AOV / last sale) ── */








/* ── Earnings chart card ── */







/* ── Recent sales list ── */

























/* Section Labels */
.aff-section-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 28px 0 14px;
    padding-left: 2px;
}
.aff-section-label i {
    font-size: 0.85rem;
    color: var(--text-dim);
}

/* Payout Progress Bar */




@keyframes progressShine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(200%); }
}



/* How-it-works steps in Share card */





/* ── Dashboard v2 responsive ── */


/* Payout settings card */
.aff-settings-card {
    background: rgba(31, 41, 55, 0.45);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    padding: 24px;
    margin-bottom: 16px;
}


.aff-settings-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
}
.aff-settings-row {
    display: flex;
    gap: 10px;
    margin-bottom: 8px;
}
.aff-settings-row input {
    flex: 1;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 12px 14px;
    color: var(--text);
    font-size: 0.9rem;
    font-family: 'Inter', sans-serif;
}
.aff-settings-row input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}
.aff-settings-save {
    background: var(--surface-light);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    font-family: 'Inter', sans-serif;
}
.aff-settings-save:hover {
    border-color: var(--accent);
    background: rgba(20, 184, 166, 0.1);
}
.aff-settings-save i { margin-right: 6px; }
.aff-settings-hint {
    color: var(--text-dim);
    font-size: 0.78rem;
}

@media (max-width: 600px) {
    
    .aff-settings-row { flex-direction: column; }
}

















/* ==================== REFERRAL PROGRAM ==================== */










.refer-copy-btn {
    background: linear-gradient(135deg, #a855f7, #ec4899);
    color: white;
    border: none;
    padding: 10px 24px;
    border-radius: 10px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.85rem;
}
.refer-copy-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(168,85,247,0.35);
}






.refer-copy-btn-sm {
    background: rgba(168,85,247,0.15);
    border: 1px solid rgba(168,85,247,0.35);
    color: #a855f7;
    padding: 0 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.refer-copy-btn-sm:hover { background: rgba(168,85,247,0.25); }













/* ==================== PROTOCOL BUILDER ==================== */
.protocol-page { padding-top: 100px; min-height: 100vh; background: var(--bg-primary); }

.protocol-hero-section .section-header { text-align: center; margin-bottom: 32px; }


.protocol-step {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 18px; border-radius: 999px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--text-muted);
    font-size: 0.9rem; font-weight: 600;
    transition: all 0.3s ease;
}
.protocol-step .pstep-num {
    width: 24px; height: 24px; border-radius: 50%;
    background: rgba(255,255,255,0.08);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem; font-weight: 700;
}
.protocol-step.active {
    background: rgba(20,184,166,0.12);
    border-color: var(--accent);
    color: var(--text-primary);
}
.protocol-step.active .pstep-num { background: var(--accent); color: #000; }
.protocol-step.done { color: var(--accent); border-color: rgba(20,184,166,0.4); }
.protocol-step.done .pstep-num { background: var(--accent); color: #000; }
.protocol-step.done .pstep-num::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; }
.protocol-step.done .pstep-num { font-size: 0; }
.protocol-step.done .pstep-num::before { font-size: 0.75rem; }









/* Goal grid */

.goal-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 28px 22px;
    cursor: pointer;
    text-align: left;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    color: var(--text-primary);
    font-family: inherit;
}
.goal-card::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, var(--goal-color, var(--accent)) 0%, transparent 60%);
    opacity: 0.08;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.goal-card:hover {
    transform: translateY(-4px);
    border-color: var(--goal-color, var(--accent));
    box-shadow: 0 12px 32px rgba(0,0,0,0.4);
}
.goal-card:hover::before { opacity: 0.18; }





/* Tier grid */
.tier-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto;
}


.tier-badge {
    display: inline-block;
    padding: 4px 12px; border-radius: 999px;
    background: var(--goal-color, var(--accent));
    color: #000;
    font-size: 0.7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px;
    align-self: flex-start;
}







/* Protocol result card */


































.protocol-cta-row .btn-large { flex: 1; min-width: 220px; }





@media (max-width: 720px) {
    
    
    
    
    
    
    
    .protocol-step { padding: 8px 12px; font-size: 0.8rem; }
    
}

@media print {
    nav, .footer, .protocol-steps-nav, .protocol-back, .protocol-cta-row,
    .cart-sidebar, .cart-overlay, .mobile-menu { display: none !important; }
    .protocol-page { padding-top: 0; background: #fff; color: #000; }
    
    
}

/* ==================== ACCESSIBILITY: KEYBOARD FOCUS ==================== */
/* Restore visible focus ring for keyboard navigation on all interactive elements */
*:focus-visible {
    outline: 2px solid var(--accent-light, #2dd4bf);
    outline-offset: 2px;
}

/* ==================== MOBILE: CART & MODAL FULL-WIDTH ==================== */
@media (max-width: 480px) {
    .cart-sidebar {
        width: 100vw !important;
        max-width: 100vw !important;
    }
    
    
    .confirm-actions-grid {
        flex-direction: column;
    }
    .confirm-actions-grid .btn-outline,
    .confirm-actions-grid .btn-primary {
        min-width: auto;
        width: 100%;
    }
}

/* ==================== MOBILE RESPONSIVENESS FIXES ==================== */

/* --- 768px breakpoint additions --- */
@media (max-width: 768px) {
    /* Nav container: reduce padding for narrower screens */
    .nav-container {
        padding: 0 16px;
    }

    /* Nav logo: shrink logo for mobile */
    .nav-logo-img {
        height: 72px;
        margin: -10px 0 -15px;
    }

    /* Bundle content: stack vertically on tablet/mobile */
    

    

    /* Footer legal links: allow wrapping */
    .footer-legal-links {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Modal close button: increase to 44px touch target */
    .modal-close {
        width: 44px;
        height: 44px;
        font-size: 1.1rem;
    }

    /* Confirm delivery timeline: allow horizontal scroll on narrow */
    .confirm-delivery-timeline {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
    }

    /* Toast: constrain width and allow wrapping */
    .toast {
        max-width: calc(100vw - 32px);
        text-align: center;
        font-size: 0.85rem;
        padding: 12px 20px;
    }
}

/* --- 480px breakpoint additions --- */
@media (max-width: 480px) {
    /* Nav container padding tighter */
    .nav-container {
        padding: 0 12px;
    }

    /* Nav logo even smaller */
    .nav-logo-img {
        height: 60px;
        margin: -8px 0 -12px;
    }

    /* Logo text: smaller for tight spaces */
    .logo-text {
        font-size: 1.15rem;
        letter-spacing: 2px;
    }

    .logo-sub {
        font-size: 0.75rem;
        letter-spacing: 3px;
    }

    /* Nav actions: tighten gap */
    .nav-actions {
        gap: 6px;
    }

    /* Cart button: slightly smaller on very small screens */
    .cart-btn {
        width: 42px;
        height: 42px;
        font-size: 1rem;
    }

    /* Product add button: increase to meet 44px touch target */
    .product-add-btn {
        width: 44px;
        height: 44px;
    }

    /* Product wishlist button: increase to 44px touch target */
    .product-wishlist-btn {
        width: 44px;
        height: 44px;
    }

    /* Cart item qty buttons: increase to 44px touch target */
    .cart-item-qty button {
        width: 44px;
        height: 44px;
        font-size: 1.1rem;
    }

    /* Cart pick add button: increase to 44px */
    .cart-pick-add {
        width: 44px;
        height: 44px;
        font-size: 0.9rem;
    }

    /* Checkout content: reduce padding for small screens */
    .checkout-content {
        padding: 16px;
    }

    /* Checkout steps: stack step labels vertically if needed */
    .checkout-steps {
        gap: 4px;
    }

    .step {
        font-size: 0.7rem;
    }

    .step span {
        width: 22px;
        height: 22px;
        font-size: 0.65rem;
    }

    /* 3-column form row: force single column on mobile */
    .checkout-step-content .form-row.form-row-3col {
        grid-template-columns: 1fr;
    }

    /* Hero discount callout: full width, wrapping */
    .hero-discount-callout {
        flex-wrap: wrap;
        justify-content: center;
        font-size: 0.8rem;
        padding: 8px 14px;
    }

    /* Section header: reduce bottom margin */
    .section-header {
        margin-bottom: 32px;
    }

    /* Bestseller card image: reduce height */
    .bestseller-card .bs-image {
        height: 220px;
        padding: 20px;
    }

    /* Bundle text heading: smaller */
    

    /* About section: reduce padding */
    .about-section {
        padding: 60px 0;
    }

    /* Contact section: reduce padding */
    .contact-section {
        padding: 60px 0;
    }

    /* FAQ section: reduce padding */
    .faq-section {
        padding: 60px 0;
    }

    .faq-question {
        padding: 14px 16px;
        font-size: 0.88rem;
    }

    .faq-item.open .faq-answer {
        padding: 0 16px 16px;
    }

    /* Products section: reduce top padding */
    .products-section {
        padding: 60px 0;
    }

    /* Modal info: reduce padding */
    .modal-info {
        padding: 24px 20px;
    }

    .modal-info h2 {
        font-size: 1.2rem;
    }

    /* Modal related grid: 2 columns instead of 3 */
    .modal-related-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Wallet address: ensure it fits */
    

    /* Legal modal: reduce padding */
    .legal-modal-content {
        padding: 24px 20px;
    }

    /* Age gate: tighter padding */
    .age-gate-content {
        padding: 24px 18px;
    }

    .age-gate-content h1 {
        font-size: 1.3rem;
    }

    /* COA popup: ensure it fits on mobile */
    .coa-popup {
        width: calc(100vw - 32px);
        max-width: 300px;
    }

    /* Social proof toast: ensure it doesn't overflow */
    .social-proof-toast {
        font-size: 0.78rem;
        padding: 10px 14px;
        gap: 10px;
    }

    /* Payment total display: stack on mobile if needed */
    

    

    /* Tracking modal: reduce padding */
    .tracking-modal-content {
        padding: 24px 20px;
    }

    /* Container: reduce padding */
    .container {
        padding: 0 16px;
    }
}

/* --- 375px breakpoint: smallest common phone width --- */
@media (max-width: 375px) {
    /* Body font: keep readable but slightly smaller */
    html {
        font-size: 15px;
    }

    /* Container: minimal padding */
    .container {
        padding: 0 12px;
    }

    /* Nav actions: even tighter */
    .nav-actions {
        gap: 4px;
    }

    /* Hide track button on very small screens to save space */
    .track-btn {
        width: 38px;
        height: 38px;
        font-size: 0.9rem;
    }

    .wishlist-btn {
        width: 38px;
        height: 38px;
        font-size: 0.9rem;
    }

    .cart-btn {
        width: 40px;
        height: 40px;
        font-size: 0.95rem;
    }

    /* Hero title: smaller */
    

    

    

    /* Hero CTA buttons: full width stacked */
    .hero-cta {
        flex-direction: column;
        width: 100%;
    }

    .hero-cta .btn-primary,
    .hero-cta .btn-outline {
        width: 100%;
        justify-content: center;
    }

    /* Product card: reduce image height further */
    .product-image {
        height: 200px;
    }

    /* Cart sidebar: ensure items fit */
    .cart-items {
        padding: 10px 12px;
    }

    .cart-item {
        gap: 10px;
    }

    .cart-item-img {
        width: 50px;
        height: 50px;
    }

    .cart-item-name {
        font-size: 0.82rem;
    }

    .cart-item-price {
        font-size: 0.8rem;
    }

    /* Cart footer: tighter */
    .cart-footer {
        padding: 10px 12px;
    }

    /* Checkout: even smaller padding */
    .checkout-content {
        padding: 14px 12px;
    }

    .checkout-step-content h2 {
        font-size: 1.1rem;
    }

    /* Checkout trust badges: stack 1 per row */
    

    /* Filter buttons: smaller */
    .filter-btn {
        padding: 6px 14px;
        font-size: 0.78rem;
    }

    /* Confirm delivery timeline steps: smaller */
    .confirm-timeline-step {
        min-width: 50px;
    }

    .confirm-timeline-label {
        font-size: 0.6rem;
    }

    /* Email popup: vertical layout */
    .email-popup {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 14px 16px;
    }

    .email-popup-icon {
        display: none;
    }

    /* Crypto buttons: full width */
    .crypto-btn {
        width: 100%;
        justify-content: center;
    }

    /* Modal price row: allow wrapping */
    .modal-price-row {
        flex-wrap: wrap;
        gap: 12px;
    }

    /* Checkout nav buttons: full width */
    .checkout-nav .btn-primary,
    .checkout-nav .btn-outline {
        width: 100%;
        justify-content: center;
    }

    /* Protocol steps nav: wrap nicely */
    

    .protocol-step {
        padding: 6px 10px;
        font-size: 0.72rem;
    }

    

    /* Announcement bar: smaller text */
    .announcement-bar {
        font-size: 0.72rem;
        padding: 6px 10px;
    }

    /* Compare pickers select: smaller text */
    
}

/* ==================== ACCESSIBILITY: REDUCED MOTION ==================== */
/* Respect user's motion preferences for vestibular/seizure accessibility */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    html {
        scroll-behavior: auto;
    }
    .hero-particles,
    .hero-bg::before,
    .hero-bg::after {
        display: none !important;
    }
}

/* ============================================================
   ════════════════════════════════════════════════════════════
   ▓▓▓ ELYTRA CYBERPUNK BIOTECH OVERLAY ▓▓▓
   ════════════════════════════════════════════════════════════
   Premium HUD aesthetic — sharp edges, teal as light source,
   technical mono labels, dramatic display typography.
   Loaded last so cascade overrides existing treatments.
   ============================================================ */

:root {
    /* --- Cyber design tokens --- */
    --cy-bg-deep: #050b16;
    --cy-bg: #0a1628;
    --cy-surface-1: #0d1a30;
    --cy-surface-2: #122340;
    --cy-surface-3: #1a3056;
    --cy-line: rgba(20, 184, 166, 0.18);
    --cy-line-strong: rgba(20, 184, 166, 0.35);
    --cy-line-hot: rgba(20, 184, 166, 0.6);
    --cy-cyan: #14b8a6;          /* mid: green-teal */
    --cy-cyan-bright: #2dd4bf;   /* light: bright mint-green (user preference over brand cyan) */
    --cy-cyan-deep: #0d9488;     /* dark: deep teal */
    --cy-logo-shift: hue-rotate(-55deg) saturate(1.5) brightness(1.06) contrast(1.04); /* matches the vial label shift so navbar/about logo reads same color as printed labels */
    /* R425: Source vial photos are already green; the old blue→green shift is now
       a double-tint that pulls them off-hue. Neutralized to identity so vials
       render exactly as the WebP/PNG in /images/. Keep glow halos intact. */
    --cy-vial-shift: brightness(1); /* identity — no color edit on vials */
    --cy-vial-glow: drop-shadow(0 0 28px rgba(20,184,166,0.45)) drop-shadow(0 8px 20px rgba(0,0,0,0.5)); /* cyan halo + ambient shadow */
    --cy-vial-glow-hero: drop-shadow(0 0 60px rgba(20,184,166,0.55)) drop-shadow(0 0 24px rgba(45,212,191,0.35)) drop-shadow(0 16px 36px rgba(0,0,0,0.65)); /* hero vials get extra dramatic glow */
    --cy-glow-soft: 0 0 20px rgba(20, 184, 166, 0.25);
    --cy-glow-mid: 0 0 32px rgba(20, 184, 166, 0.45), 0 0 8px rgba(20, 184, 166, 0.6);
    --cy-glow-hot: 0 0 48px rgba(20, 184, 166, 0.7), 0 0 16px rgba(20, 184, 166, 0.9), 0 0 4px #fff;
    --cy-text-inset: 0 0 2px rgba(20, 184, 166, 0.5);
    --cy-mono: 'JetBrains Mono', ui-monospace, 'Courier New', monospace;
    --cy-display: 'Orbitron', sans-serif;
    --cy-clip-corner: 12px;
    --cy-clip-corner-lg: 18px;
}

/* ─── HEX GRID BACKGROUND TEXTURE ─── */



/* ─── SCANLINE OVERLAY ─── */



/* ─── ANIMATED HORIZONTAL SCAN SWEEP ─── */
@keyframes cyScanSweep {
    0% { transform: translateY(-100%); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateY(100vh); opacity: 0; }
}

.cy-scan-sweep {
    position: absolute;
    left: 0;
    right: 0;
    height: 200px;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(20,184,166,0.06) 40%,
        rgba(20,184,166,0.12) 50%,
        rgba(20,184,166,0.06) 60%,
        transparent 100%
    );
    pointer-events: none;
    animation: cyScanSweep 8s linear infinite;
    z-index: 1;
    mix-blend-mode: screen;
}

/* ─── CORNER BRACKETS (HUD frame) ─── */









/* ─── SECTION MARKER (01 / NAME) ─── */




/* ─── DISPLAY HEADING (oversized, glowing) ─── */





/* ─── DATA READOUT ROW ─── */





/* ─── CYBER CARD (clipped corners, inset glow) ─── */
.cy-card {
    position: relative;
    background:
        linear-gradient(135deg, rgba(20,184,166,0.04) 0%, transparent 50%),
        linear-gradient(180deg, var(--cy-surface-1) 0%, var(--cy-surface-2) 100%);
    border: 1px solid var(--cy-line);
    clip-path: polygon(
        0 var(--cy-clip-corner),
        var(--cy-clip-corner) 0,
        100% 0,
        100% calc(100% - var(--cy-clip-corner)),
        calc(100% - var(--cy-clip-corner)) 100%,
        0 100%
    );
    transition: all 0.4s cubic-bezier(0.2, 0.6, 0.3, 1);
    overflow: hidden;
}
.cy-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right,
        transparent 0%,
        var(--cy-cyan) 30%,
        var(--cy-cyan-bright) 50%,
        var(--cy-cyan) 70%,
        transparent 100%);
    opacity: 0.6;
    z-index: 2;
}
.cy-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at top, rgba(20,184,166,0.08) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 1;
}
.cy-card:hover {
    border-color: var(--cy-line-hot);
    box-shadow:
        0 0 0 1px var(--cy-line-hot),
        0 12px 48px rgba(0,0,0,0.5),
        var(--cy-glow-soft);
    transform: translateY(-3px);
}
.cy-card:hover::after {
    opacity: 1;
}

/* ─── CYBER BUTTON (angular, sharp, glowing) ─── */
.cy-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 28px;
    font-family: var(--cy-mono);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--cy-bg);
    background: linear-gradient(135deg, var(--cy-cyan-bright) 0%, var(--cy-cyan) 50%, var(--cy-cyan-deep) 100%);
    border: none;
    cursor: pointer;
    text-decoration: none;
    position: relative;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        0 0 0 1px rgba(20,184,166,0.4),
        0 4px 24px rgba(20,184,166,0.3);
    overflow: hidden;
}
.cy-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s;
}
.cy-btn:hover {
    transform: translateY(-2px);
    box-shadow:
        0 0 0 1px var(--cy-cyan-bright),
        0 8px 32px rgba(20,184,166,0.5),
        0 0 24px rgba(20,184,166,0.4);
    color: var(--cy-bg);
}
.cy-btn:hover::before { transform: translateX(100%); }
.cy-btn .cy-btn-arrow {
    transition: transform 0.3s ease;
}
.cy-btn:hover .cy-btn-arrow {
    transform: translateX(4px);
}




/* ─── ANIMATED GRADIENT DIVIDER ─── */
@keyframes cyDividerSweep {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}


/* ─── PULSE ANIMATION ─── */
@keyframes cyPulse {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.08); }
}


/* ─── REVEAL ON SCROLL ─── */







/* ============================================================
   ▓▓▓ HOMEPAGE OVERRIDES ▓▓▓
   ============================================================ */

/* ─── HERO: dramatic upgrade ─── */
.hero {
    padding: 40px 24px 80px;
    min-height: calc(100vh - 112px - 50px); /* full viewport minus navbar (112px) minus marquee (~50px) */
    background: var(--cy-bg-deep);
}
.hero-bg {
    background:
        radial-gradient(ellipse at 80% 20%, rgba(20,184,166,0.18) 0%, transparent 50%),
        radial-gradient(ellipse at 20% 80%, rgba(13,148,136,0.12) 0%, transparent 50%),
        linear-gradient(180deg, var(--cy-bg-deep) 0%, var(--cy-bg) 100%);
}
.hero-bg::before,
.hero-bg::after {
    display: none;
}
.hero-bg .cy-hex-overlay {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(60deg, rgba(20,184,166,0.06) 1px, transparent 1px),
        linear-gradient(-60deg, rgba(20,184,166,0.06) 1px, transparent 1px);
    background-size: 80px 138px;
    opacity: 0.5;
    mask-image: radial-gradient(ellipse at center, #000 20%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 70%);
}

/* Hero badge — terminal style */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(20,184,166,0.06);
    border: 1px solid var(--cy-line);
    color: var(--cy-cyan);
    padding: 8px 16px;
    font-family: var(--cy-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 2.5px;
    margin-bottom: 28px;
    border-radius: 0;
    text-transform: uppercase;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
    position: relative;
}
.hero-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cy-cyan-bright);
    box-shadow: 0 0 8px var(--cy-cyan-bright);
    animation: cyPulse 2s ease-in-out infinite;
}
.hero-badge i { display: none; }

/* Hero title — dramatic display */





/* Hero description — refined */




/* Hero discount callout — HUD style */
.hero-discount-callout {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: rgba(251,191,36,0.05);
    border: 1px solid rgba(251,191,36,0.25);
    border-left: 3px solid #fbbf24;
    border-radius: 0;
    padding: 12px 18px;
    margin-bottom: 32px;
    font-family: var(--cy-mono);
    font-size: 0.78rem;
    color: #fcd34d;
    letter-spacing: 0.5px;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
}
.hero-discount-callout strong {
    color: #fff;
    font-weight: 700;
}

/* Hero CTAs — restyle to cyber buttons */
.hero-cta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}
.hero-cta .btn-primary,
.hero-cta .btn-outline {
    font-family: var(--cy-mono);
    font-size: 0.82rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 16px 32px;
    border-radius: 0;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}
.hero-cta .btn-primary {
    background: linear-gradient(135deg, var(--cy-cyan-bright) 0%, var(--cy-cyan) 50%, var(--cy-cyan-deep) 100%);
    color: var(--cy-bg);
    border: none;
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
    box-shadow: 0 0 0 1px rgba(20,184,166,0.4), 0 6px 28px rgba(20,184,166,0.35);
    font-weight: 700;
}
.hero-cta .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 0 1px var(--cy-cyan-bright), 0 12px 40px rgba(20,184,166,0.55);
}
.hero-cta .btn-outline {
    background: transparent;
    color: var(--cy-cyan);
    border: 1px solid var(--cy-line-strong);
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
.hero-cta .btn-outline:hover {
    border-color: var(--cy-cyan);
    background: rgba(20,184,166,0.06);
    color: var(--cy-cyan-bright);
    box-shadow: var(--cy-glow-soft);
    transform: translateY(-2px);
}

/* Hero visual — dramatic vial frame */
.hero-visual {
    position: relative;
    height: 480px;
    flex: 0 0 480px;
}
.hero-visual::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 360px;
    height: 360px;
    background: radial-gradient(circle, rgba(20,184,166,0.25) 0%, rgba(20,184,166,0.06) 50%, transparent 75%);
    border-radius: 50%;
    pointer-events: none;
    animation: heroGlowPulse 5s ease-in-out infinite;
    filter: blur(2px);
}
.hero-visual::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 380px;
    height: 380px;
    border: 1px solid var(--cy-line);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.5;
}
.hero-vial-main {
    height: 440px;
    filter: drop-shadow(0 0 60px rgba(20,184,166,0.4)) drop-shadow(0 12px 32px rgba(0,0,0,0.6));
}
.hero-vial-secondary {
    filter: drop-shadow(0 0 40px rgba(20,184,166,0.3)) drop-shadow(0 8px 20px rgba(0,0,0,0.5));
}

/* Hero trust row — HUD style */
.hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    justify-content: center;
    margin-top: 56px;
    padding: 16px 24px;
    background: rgba(13, 26, 48, 0.5);
    border-top: 1px solid var(--cy-line);
    border-bottom: 1px solid var(--cy-line);
    backdrop-filter: blur(8px);
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}
.hero-trust::before,
.hero-trust::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    border: 1px solid var(--cy-cyan);
}
.hero-trust::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.hero-trust::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }
.hero-trust .trust-item {
    flex: 1;
    min-width: 0; /* allow shrinking; nowrap below keeps text on one line */
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    padding: 12px 14px;
    font-family: var(--cy-mono);
    font-size: 0.72rem;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-muted);
    border: none;
    border-right: 1px solid var(--cy-line);
    background: transparent;
    white-space: nowrap; /* keep text on one line — text was wrapping at default sizes */
}
.hero-trust .trust-item:last-child { border-right: none; }
.hero-trust .trust-item i {
    color: var(--cy-cyan);
    font-size: 0.95rem;
}

/* ─── SECTION HEADERS — cyber treatment ─── */
.section-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--cy-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 3px;
    color: var(--cy-cyan);
    background: transparent;
    border: none;
    padding: 0;
    margin-bottom: 16px;
    text-transform: uppercase;
    border-radius: 0;
}
.section-badge::before {
    content: '';
    display: inline-block;
    width: 32px;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--cy-cyan));
}
.section-badge::after {
    content: '';
    display: inline-block;
    width: 32px;
    height: 1px;
    background: linear-gradient(to left, transparent, var(--cy-cyan));
}

.section-title {
    font-family: var(--cy-display);
    font-weight: 800;
    font-size: clamp(2rem, 5vw, 3.4rem);
    letter-spacing: -0.01em;
    color: #fff;
    line-height: 1.05;
    text-shadow: 0 0 20px rgba(20,184,166,0.15);
    margin-bottom: 14px;
}
.section-subtitle {
    color: var(--text-muted);
    font-size: 1.02rem;
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ─── WHY SECTION — HUD card grid ─── */
.why-section {
    padding: 100px 0;
    background:
        linear-gradient(180deg, var(--cy-bg) 0%, var(--cy-bg-deep) 100%);
    position: relative;
    overflow: hidden;
}
.why-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(60deg, rgba(20,184,166,0.025) 1px, transparent 1px),
        linear-gradient(-60deg, rgba(20,184,166,0.025) 1px, transparent 1px);
    background-size: 70px 121px;
    pointer-events: none;
    mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
}
.why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin-top: 56px;
    border: 1px solid var(--cy-line);
    background: var(--cy-surface-1);
    position: relative;
    clip-path: polygon(
        0 16px, 16px 0,
        calc(100% - 16px) 0, 100% 16px,
        100% calc(100% - 16px), calc(100% - 16px) 100%,
        16px 100%, 0 calc(100% - 16px)
    );
}
.why-card {
    position: relative;
    padding: 36px 28px 32px;
    background: linear-gradient(180deg, var(--cy-surface-1) 0%, var(--cy-surface-2) 100%);
    border: none;
    border-right: 1px solid var(--cy-line);
    border-radius: 0;
    transition: all 0.4s cubic-bezier(0.2, 0.6, 0.3, 1);
    overflow: hidden;
}
.why-card:last-child { border-right: none; }
.why-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--cy-cyan), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}
.why-card:hover {
    background: linear-gradient(180deg, var(--cy-surface-2) 0%, var(--cy-surface-3) 100%);
    transform: none;
    box-shadow: inset 0 0 60px rgba(20,184,166,0.05);
}
.why-card:hover::before { opacity: 1; }

.why-card:hover .why-icon {
    background: rgba(20,184,166,0.15);
    border-color: var(--cy-cyan);
    box-shadow: var(--cy-glow-soft);
}
.why-stat-big {
    font-family: var(--cy-display);
    font-weight: 800;
    font-size: 3rem;
    background: linear-gradient(135deg, #fff 0%, var(--cy-cyan-bright) 50%, var(--cy-cyan) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 4px;
    filter: drop-shadow(0 0 16px rgba(20,184,166,0.3));
}


.why-card h3 {
    font-family: var(--cy-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
    letter-spacing: 0.01em;
}
.why-card p {
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.6;
}

/* ─── HOW IT WORKS — terminal step blocks ─── */
.how-section {
    padding: 100px 0;
    background: var(--cy-bg-deep);
    position: relative;
}
.how-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 24px;
    align-items: stretch;
    margin-top: 64px;
}












/* ─── BEST SELLERS — HUD product cards ─── */
.bestsellers-section {
    padding: 100px 0;
    background: linear-gradient(180deg, var(--cy-bg-deep) 0%, var(--cy-bg) 100%);
}
.bestsellers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    margin-top: 56px;
}
.bestseller-card {
    position: relative;
    background: linear-gradient(180deg, var(--cy-surface-1) 0%, var(--cy-surface-2) 100%);
    border: 1px solid var(--cy-line);
    border-radius: 0;
    padding: 0;
    overflow: hidden;
    clip-path: polygon(
        0 14px, 14px 0,
        calc(100% - 14px) 0, 100% 14px,
        100% calc(100% - 14px), calc(100% - 14px) 100%,
        14px 100%, 0 calc(100% - 14px)
    );
    transition: all 0.4s cubic-bezier(0.2, 0.6, 0.3, 1);
}
.bestseller-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--cy-cyan) 50%, transparent 100%);
    z-index: 2;
}
.bestseller-card:hover {
    border-color: var(--cy-line-hot);
    box-shadow: 0 12px 48px rgba(0,0,0,0.5), var(--cy-glow-soft);
    transform: translateY(-4px);
}
.bestseller-card .bs-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    font-family: var(--cy-mono);
    font-size: 0.65rem;
    letter-spacing: 1.5px;
    color: var(--cy-cyan-bright);
    background: rgba(20,184,166,0.1);
    border: 1px solid var(--cy-line-strong);
    padding: 4px 10px;
    z-index: 3;
    text-transform: uppercase;
    font-weight: 600;
}
.bestseller-card .bs-image {
    height: 220px;
    background: linear-gradient(180deg, rgba(20,184,166,0.06) 0%, transparent 100%);
    position: relative;
    overflow: hidden;
}
.bestseller-card .bs-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(60deg, rgba(20,184,166,0.04) 1px, transparent 1px),
        linear-gradient(-60deg, rgba(20,184,166,0.04) 1px, transparent 1px);
    background-size: 24px 42px;
    opacity: 0.6;
    mask-image: radial-gradient(ellipse at center, transparent 30%, #000 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, transparent 30%, #000 80%);
}
.bestseller-card .bs-image img {
    transition: transform 0.6s cubic-bezier(0.2,0.6,0.3,1);
}
.bestseller-card:hover .bs-image img {
    transform: scale(1.06);
}
.bestseller-card .bs-info {
    padding: 22px 22px 22px;
    border-top: 1px dashed rgba(255,255,255,0.06);
}
.bestseller-card .bs-name {
    font-family: var(--cy-display);
    font-weight: 700;
    font-size: 1.1rem;
    color: #fff;
    letter-spacing: 0.01em;
    margin-bottom: 4px;
}
.bestseller-card .bs-dosage {
    font-family: var(--cy-mono);
    font-size: 0.72rem;
    color: var(--text-dim);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 16px;
}
.bestseller-card .bs-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px dashed rgba(255,255,255,0.08);
}
.bestseller-card .bs-price {
    font-family: var(--cy-display);
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--cy-cyan-bright);
    text-shadow: 0 0 12px rgba(20,184,166,0.3);
}
.bestseller-card .bs-cart-btn {
    width: 42px;
    height: 42px;
    background: rgba(20,184,166,0.1);
    border: 1px solid var(--cy-line-strong);
    color: var(--cy-cyan);
    border-radius: 0;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.bestseller-card .bs-cart-btn:hover {
    background: var(--cy-cyan);
    color: var(--cy-bg);
    box-shadow: var(--cy-glow-mid);
    border-color: transparent;
}

/* ─── TESTIMONIALS — terminal style cards ─── */
.testimonials-section {
    padding: 100px 0;
    background: var(--cy-bg);
    position: relative;
}
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
    margin-top: 56px;
}
.testimonial-card {
    position: relative;
    background: linear-gradient(180deg, var(--cy-surface-1) 0%, rgba(13,26,48,0.7) 100%);
    border: 1px solid var(--cy-line);
    border-radius: 0;
    padding: 28px 26px;
    clip-path: polygon(
        0 12px, 12px 0,
        calc(100% - 12px) 0, 100% 12px,
        100% calc(100% - 12px), calc(100% - 12px) 100%,
        12px 100%, 0 calc(100% - 12px)
    );
    transition: all 0.4s ease;
}
.testimonial-card::before {
    content: '"';
    position: absolute;
    top: 8px;
    right: 22px;
    font-family: var(--cy-display);
    font-size: 5rem;
    color: var(--cy-cyan);
    opacity: 0.15;
    line-height: 1;
    pointer-events: none;
}
.testimonial-card:hover {
    border-color: var(--cy-line-hot);
    box-shadow: var(--cy-glow-soft);
    transform: translateY(-2px);
}

.testimonial-stars {
    color: var(--cy-cyan-bright);
    font-size: 0.85rem;
    letter-spacing: 2px;
    filter: drop-shadow(0 0 4px rgba(20,184,166,0.5));
}
.testimonial-verified {
    font-family: var(--cy-mono);
    font-size: 0.65rem;
    letter-spacing: 1.5px;
    color: var(--cy-cyan);
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.testimonial-text {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 18px;
    font-style: normal;
    position: relative;
    z-index: 1;
}
.testimonial-product {
    font-family: var(--cy-mono);
    font-size: 0.7rem;
    color: var(--text-dim);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px dashed rgba(255,255,255,0.06);
}
.testimonial-product i { color: var(--cy-cyan); margin-right: 4px; }

.testimonial-avatar {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--cy-cyan-bright) 0%, var(--cy-cyan-deep) 100%);
    color: var(--cy-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--cy-display);
    font-weight: 700;
    font-size: 1rem;
    box-shadow: 0 0 16px rgba(20,184,166,0.3);
    clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
}



/* ─── NEWSLETTER — terminal feel ─── */
.newsletter-section {
    padding: 100px 0;
    background: linear-gradient(180deg, var(--cy-bg) 0%, var(--cy-bg-deep) 100%);
    position: relative;
}
.newsletter-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--cy-line-strong) 50%, transparent 100%);
}
.newsletter-content {
    max-width: 980px;
    margin: 0 auto;
    background: linear-gradient(135deg, var(--cy-surface-1) 0%, var(--cy-surface-2) 100%);
    border: 1px solid var(--cy-line);
    padding: 48px 48px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 40px;
    align-items: center;
    border-radius: 0;
    clip-path: polygon(
        0 18px, 18px 0,
        calc(100% - 18px) 0, 100% 18px,
        100% calc(100% - 18px), calc(100% - 18px) 100%,
        18px 100%, 0 calc(100% - 18px)
    );
    position: relative;
}
.newsletter-content::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cy-cyan), transparent);
}
.newsletter-text h2 {
    font-family: var(--cy-display);
    font-weight: 800;
    color: #fff;
    font-size: clamp(1.4rem, 3vw, 2rem);
    margin-bottom: 12px;
    line-height: 1.1;
}
.newsletter-text h2 i {
    color: var(--cy-cyan-bright);
    filter: drop-shadow(0 0 8px rgba(20,184,166,0.4));
}
.newsletter-text p {
    color: var(--text-muted);
    line-height: 1.6;
    font-size: 0.95rem;
}
.newsletter-text strong { color: var(--cy-cyan-bright); }
.newsletter-input-group {
    display: flex;
    gap: 0;
    background: var(--cy-bg-deep);
    border: 1px solid var(--cy-line-strong);
    padding: 4px;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.newsletter-input-group input {
    background: transparent;
    border: none;
    padding: 12px 16px;
    color: #fff;
    font-family: var(--cy-mono);
    font-size: 0.85rem;
    min-width: 240px;
    outline: none;
}
.newsletter-input-group input::placeholder { color: var(--text-dim); }
.newsletter-input-group .btn-primary {
    background: linear-gradient(135deg, var(--cy-cyan-bright), var(--cy-cyan-deep));
    color: var(--cy-bg);
    border: none;
    padding: 12px 22px;
    font-family: var(--cy-mono);
    font-size: 0.78rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 700;
    border-radius: 0;
    cursor: pointer;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.newsletter-note {
    font-family: var(--cy-mono);
    font-size: 0.65rem;
    color: var(--text-dim);
    margin-top: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* ============================================================
   ▓▓▓ PRODUCTS PAGE CYBER OVERRIDE ▓▓▓
   ============================================================ */
.product-card {
    position: relative;
    background: linear-gradient(180deg, var(--cy-surface-1) 0%, var(--cy-surface-2) 100%) !important;
    border: 1px solid var(--cy-line) !important;
    border-radius: 0 !important;
    border-top: 1px solid var(--cy-line) !important;
    overflow: hidden;
    clip-path: polygon(
        0 14px, 14px 0,
        calc(100% - 14px) 0, 100% 14px,
        100% calc(100% - 14px), calc(100% - 14px) 100%,
        14px 100%, 0 calc(100% - 14px)
    );
    transition: all 0.4s cubic-bezier(0.2, 0.6, 0.3, 1) !important;
}
.product-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--cy-cyan) 50%, transparent 100%);
    z-index: 3;
    opacity: 0.7;
}
.product-card[data-category="peptide"]::before { background: linear-gradient(90deg, transparent, var(--cy-cyan-bright), transparent); }
.product-card[data-category="blend"]::before { background: linear-gradient(90deg, transparent, var(--cy-cyan), transparent); }
.product-card[data-category="supply"]::before { background: linear-gradient(90deg, transparent, #fbbf24, transparent); }
.product-card:hover {
    border-color: var(--cy-line-hot) !important;
    box-shadow: 0 16px 56px rgba(0,0,0,0.6), var(--cy-glow-soft) !important;
    transform: translateY(-4px) !important;
}
.product-card[data-category="supply"]:hover {
    border-color: rgba(245,158,11,0.6) !important;
    box-shadow: 0 16px 56px rgba(0,0,0,0.6), 0 0 24px rgba(245,158,11,0.25) !important;
}

/* ============================================================
   ▓▓▓ BUNDLES PAGE CYBER OVERRIDE ▓▓▓
   ============================================================ */




/* ============================================================
   ▓▓▓ ABOUT PAGE CYBER OVERRIDE ▓▓▓
   ============================================================ */




/* ============================================================
   ▓▓▓ MOBILE / RESPONSIVE TWEAKS ▓▓▓
   ============================================================ */
@media (max-width: 1024px) {
    .why-grid { grid-template-columns: repeat(2, 1fr); }
    .why-card:nth-child(2) { border-right: none; }
    .why-card:nth-child(1), .why-card:nth-child(2) { border-bottom: 1px solid var(--cy-line); }
    .how-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .newsletter-content { grid-template-columns: 1fr; padding: 36px 28px; }
}
@media (max-width: 720px) {
    .why-grid { grid-template-columns: 1fr; }
    .why-card { border-right: none; border-bottom: 1px solid var(--cy-line); }
    .why-card:last-child { border-bottom: none; }
    .hero-trust { flex-direction: column; }
    .hero-trust .trust-item { border-right: none; border-bottom: 1px solid var(--cy-line); }
    .hero-trust .trust-item:last-child { border-bottom: none; }
    .hero-visual { display: none; }
    .hero-split { flex-direction: column; }
}

/* ============================================================
   ▓▓▓ PRODUCTS PAGE — TOOLBAR + FILTERS ▓▓▓
   ============================================================ */
.products-section { padding-top: 40px; padding-bottom: 80px; }

.catalog-toolbar {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin: 32px 0 16px;
    align-items: center;
}
.product-search {
    flex: 1;
    min-width: 280px;
    position: relative;
    background: var(--cy-bg-deep);
    border: 1px solid var(--cy-line-strong);
    padding: 4px;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
    transition: all 0.3s ease;
}
.product-search:focus-within {
    border-color: var(--cy-cyan);
    box-shadow: var(--cy-glow-soft);
}
.product-search i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--cy-cyan);
    font-size: 0.9rem;
    pointer-events: none;
}
.product-search input {
    background: transparent;
    border: none;
    width: 100%;
    padding: 12px 16px 12px 42px;
    color: #fff;
    font-family: var(--cy-mono);
    font-size: 0.85rem;
    outline: none;
    letter-spacing: 0.5px;
}
.product-search input::placeholder {
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 0.78rem;
}
.search-clear {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
}
.search-clear:hover { color: var(--cy-cyan); }

.sort-dropdown select {
    background: var(--cy-bg-deep);
    border: 1px solid var(--cy-line-strong);
    color: #fff;
    padding: 12px 18px;
    font-family: var(--cy-mono);
    font-size: 0.78rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 0;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--cy-cyan) 50%), linear-gradient(135deg, var(--cy-cyan) 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 36px;
}
.sort-dropdown select:focus {
    border-color: var(--cy-cyan);
    box-shadow: var(--cy-glow-soft);
}

.filter-bar {
    display: flex;
    gap: 0;
    flex-wrap: wrap;
    margin: 24px 0 16px;
    border: 1px solid var(--cy-line);
    background: var(--cy-surface-1);
    padding: 0;
    width: fit-content;
    max-width: 100%;
}
.filter-btn {
    background: transparent !important;
    color: var(--text-muted) !important;
    border: none !important;
    border-right: 1px solid var(--cy-line) !important;
    padding: 12px 22px !important;
    font-family: var(--cy-mono) !important;
    font-size: 0.74rem !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    font-weight: 500 !important;
    border-radius: 0 !important;
    cursor: pointer;
    transition: all 0.25s ease !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.filter-btn:last-child { border-right: none !important; }
.filter-btn:hover {
    background: rgba(20,184,166,0.06) !important;
    color: var(--cy-cyan-bright) !important;
}
.filter-btn.active {
    background: rgba(20,184,166,0.12) !important;
    color: var(--cy-cyan-bright) !important;
    box-shadow: inset 0 -2px 0 var(--cy-cyan) !important;
    text-shadow: 0 0 8px rgba(20,184,166,0.4) !important;
}

.filter-btn.active .filter-count {
    color: var(--cy-cyan-bright);
    border-color: var(--cy-line-strong);
    background: rgba(20,184,166,0.08);
}

.catalog-status {
    font-family: var(--cy-mono);
    font-size: 0.7rem;
    color: var(--cy-cyan);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 24px;
    padding: 6px 0;
    border-bottom: 1px dashed rgba(20,184,166,0.15);
    display: inline-block;
}
.catalog-status::before {
    content: '> ';
    color: var(--cy-cyan-bright);
    font-weight: 700;
}

/* ============================================================
   ▓▓▓ BUNDLES PAGE — TIER CARDS, PRESETS ▓▓▓
   ============================================================ */












.tier-card.gold {
    background: rgba(20,184,166,0.08) !important;
    border-color: var(--cy-line-hot) !important;
    box-shadow: inset 0 0 32px rgba(20,184,166,0.05), 0 8px 32px rgba(20,184,166,0.15) !important;
}
.tier-card.gold::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--cy-cyan-bright), transparent);
}

.tier-card.gold i { color: var(--cy-cyan-bright) !important; filter: drop-shadow(0 0 8px rgba(20,184,166,0.5)); }
.tier-card .tier-qty {
    font-family: var(--cy-mono) !important;
    color: var(--text-muted) !important;
}
.tier-card .tier-pct {
    font-family: var(--cy-display) !important;
    color: var(--cy-cyan-bright) !important;
    text-shadow: 0 0 12px rgba(20,184,166,0.3);
}










/* ============================================================
   ▓▓▓ ABOUT PAGE — Hero, value props, policies, stats ▓▓▓
   ============================================================ */
.about-section {
    padding: 80px 0 60px;
    position: relative;
    overflow: hidden;
}
.about-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 80% 20%, rgba(20,184,166,0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 20% 80%, rgba(13,148,136,0.08) 0%, transparent 50%);
    pointer-events: none;
}
.about-section::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(60deg, rgba(20,184,166,0.03) 1px, transparent 1px),
        linear-gradient(-60deg, rgba(20,184,166,0.03) 1px, transparent 1px);
    background-size: 80px 138px;
    opacity: 0.5;
    pointer-events: none;
    mask-image: radial-gradient(ellipse at center, #000 20%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 80%);
}
.about-section .container { position: relative; z-index: 1; }

.about-content > .section-badge,
.about-content > .section-title {
    text-align: left;
}
.about-content > .section-badge {
    margin-left: 0;
}
.about-content > .section-title {
    margin-bottom: 20px;
    text-align: left;
}
.about-content p {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.75;
    margin-bottom: 16px;
}

.about-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-top: 36px;
    background: var(--cy-surface-1);
    border: 1px solid var(--cy-line);
    clip-path: polygon(
        0 12px, 12px 0,
        calc(100% - 12px) 0, 100% 12px,
        100% calc(100% - 12px), calc(100% - 12px) 100%,
        12px 100%, 0 calc(100% - 12px)
    );
    position: relative;
}
.about-stats::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cy-cyan), transparent);
}
.about-stats .stat {
    padding: 24px 16px;
    text-align: center;
    border-right: 1px solid var(--cy-line);
}
.about-stats .stat:last-child { border-right: none; }
.about-stats .stat-number {
    display: block;
    font-family: var(--cy-display);
    font-weight: 800;
    font-size: 2rem;
    background: linear-gradient(135deg, #fff 0%, var(--cy-cyan-bright) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 8px;
    filter: drop-shadow(0 0 12px rgba(20,184,166,0.3));
}
.about-stats .stat-label {
    font-family: var(--cy-mono);
    font-size: 0.7rem;
    color: var(--text-muted);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.about-image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.about-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(20,184,166,0.15) 0%, transparent 60%);
    pointer-events: none;
}
.about-logo-img,
.about-logo-fallback {
    filter: drop-shadow(0 0 40px rgba(20,184,166,0.4));
}

.value-props {
    padding: 80px 0;
    background: var(--cy-bg-deep);
    position: relative;
}
.value-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0;
    margin-top: 40px;
    border: 1px solid var(--cy-line);
}
.value-card {
    padding: 32px 26px !important;
    background: linear-gradient(180deg, var(--cy-surface-1) 0%, var(--cy-surface-2) 100%) !important;
    border: none !important;
    border-right: 1px solid var(--cy-line) !important;
    border-radius: 0 !important;
    text-align: left !important;
    position: relative;
    transition: all 0.3s ease;
}
.value-card:last-child { border-right: none !important; }
.value-card:hover {
    background: linear-gradient(180deg, var(--cy-surface-2) 0%, var(--cy-surface-3) 100%) !important;
    box-shadow: inset 0 0 60px rgba(20,184,166,0.05) !important;
}
.value-icon {
    width: 48px !important;
    height: 48px !important;
    background: rgba(20,184,166,0.08) !important;
    border: 1px solid var(--cy-line) !important;
    color: var(--cy-cyan) !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.2rem !important;
    margin: 0 0 18px 0 !important;
    clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
}
.value-card:hover .value-icon {
    background: rgba(20,184,166,0.15) !important;
    border-color: var(--cy-cyan) !important;
    box-shadow: var(--cy-glow-soft);
}
.value-card h3 {
    font-family: var(--cy-display) !important;
    font-weight: 700 !important;
    color: #fff !important;
    font-size: 1.05rem !important;
    margin-bottom: 10px !important;
    letter-spacing: 0.01em;
}
.value-card p {
    color: var(--text-muted) !important;
    font-size: 0.88rem !important;
    line-height: 1.6 !important;
}

.policies-section {
    padding: 80px 0;
    background: var(--cy-bg);
}
.policies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 48px;
}
.policy-card {
    position: relative;
    background: linear-gradient(180deg, var(--cy-surface-1) 0%, var(--cy-surface-2) 100%) !important;
    border: 1px solid var(--cy-line) !important;
    border-radius: 0 !important;
    padding: 28px 24px !important;
    clip-path: polygon(
        0 12px, 12px 0,
        calc(100% - 12px) 0, 100% 12px,
        100% calc(100% - 12px), calc(100% - 12px) 100%,
        12px 100%, 0 calc(100% - 12px)
    );
    transition: all 0.4s ease !important;
}
.policy-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cy-cyan), transparent);
}
.policy-card:hover {
    border-color: var(--cy-line-hot) !important;
    box-shadow: var(--cy-glow-soft) !important;
    transform: translateY(-3px) !important;
}
.policy-icon {
    width: 48px !important;
    height: 48px !important;
    background: rgba(20,184,166,0.08) !important;
    border: 1px solid var(--cy-line) !important;
    color: var(--cy-cyan) !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.15rem !important;
    margin-bottom: 16px !important;
    clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
}
.policy-card h3 {
    font-family: var(--cy-display) !important;
    font-weight: 700 !important;
    color: #fff !important;
    font-size: 1.1rem !important;
    margin-bottom: 12px !important;
}
.policy-card ul {
    list-style: none !important;
    padding: 0 !important;
}
.policy-card ul li {
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.6;
    padding: 6px 0 6px 18px;
    position: relative;
    border-bottom: 1px dashed rgba(255,255,255,0.04);
}
.policy-card ul li:last-child { border-bottom: none; }
.policy-card ul li::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: var(--cy-cyan);
    font-size: 0.75rem;
    top: 8px;
}

/* ============================================================
   ▓▓▓ REDUCED MOTION ▓▓▓
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .cy-status-dot,
    .hero-badge::before,
    .how-connector,
    .cy-divider {
        animation: none !important;
    }
    .cy-scan-sweep { display: none !important; }
}

/* ============================================================
   ▓▓▓ MOBILE — bundles/about/products ▓▓▓
   ============================================================ */
@media (max-width: 1024px) {
    .about-stats { grid-template-columns: 1fr; }
    .about-stats .stat { border-right: none; border-bottom: 1px solid var(--cy-line); }
    .about-stats .stat:last-child { border-bottom: none; }
}
@media (max-width: 720px) {
    .filter-bar { flex-direction: column; width: 100%; }
    .filter-btn { border-right: none !important; border-bottom: 1px solid var(--cy-line) !important; }
    .filter-btn:last-child { border-bottom: none !important; }
    
    
    .value-grid { grid-template-columns: 1fr; }
    .value-card { border-right: none !important; border-bottom: 1px solid var(--cy-line) !important; }
    .value-card:last-child { border-bottom: none !important; }
}

/* ============================================================
   ▓▓▓ GLOBAL FINAL POLISH LAYER ▓▓▓
   Site-wide button cyber treatment, badges, toasts, links
   ============================================================ */

/* All .btn-primary buttons get cyber treatment site-wide */
.btn-primary:not(.cookie-btn-primary) {
    background: linear-gradient(135deg, var(--cy-cyan-bright) 0%, var(--cy-cyan) 50%, var(--cy-cyan-deep) 100%) !important;
    color: var(--cy-bg) !important;
    font-family: var(--cy-mono) !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 1.8px !important;
    text-transform: uppercase !important;
    padding: 13px 26px !important;
    border-radius: 0 !important;
    border: none !important;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)) !important;
    box-shadow: 0 0 0 1px rgba(20,184,166,0.4), 0 4px 24px rgba(20,184,166,0.3) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative;
    overflow: hidden;
}
.btn-primary:not(.cookie-btn-primary).btn-large {
    padding: 16px 32px !important;
    font-size: 0.82rem !important;
    letter-spacing: 2px !important;
}
.btn-primary:not(.cookie-btn-primary):hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 0 0 1px var(--cy-cyan-bright), 0 8px 32px rgba(20,184,166,0.5), 0 0 24px rgba(20,184,166,0.4) !important;
    color: var(--cy-bg) !important;
}
.btn-primary:not(.cookie-btn-primary)::before {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent) !important;
}

.btn-outline:not(.cookie-btn-secondary):not(.cookie-btn-primary):not(.footer-link-btn) {
    background: transparent !important;
    color: var(--cy-cyan) !important;
    border: 1px solid var(--cy-line-strong) !important;
    font-family: var(--cy-mono) !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    letter-spacing: 1.8px !important;
    text-transform: uppercase !important;
    padding: 12px 25px !important;
    border-radius: 0 !important;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.btn-outline:not(.cookie-btn-secondary):not(.cookie-btn-primary):not(.footer-link-btn).btn-large {
    padding: 15px 31px !important;
    font-size: 0.82rem !important;
}
.btn-outline:not(.cookie-btn-secondary):not(.cookie-btn-primary):not(.footer-link-btn):hover {
    background: rgba(20,184,166,0.06) !important;
    border-color: var(--cy-cyan) !important;
    color: var(--cy-cyan-bright) !important;
    box-shadow: var(--cy-glow-soft) !important;
    transform: translateY(-2px) !important;
}

/* Product card badges — cyber treatment */
.product-card-badge {
    background: linear-gradient(135deg, var(--cy-cyan-bright) 0%, var(--cy-cyan-deep) 100%) !important;
    color: var(--cy-bg) !important;
    font-family: var(--cy-mono) !important;
    font-weight: 700 !important;
    font-size: 0.65rem !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    border-radius: 0 !important;
    padding: 5px 12px !important;
    clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px)) !important;
    box-shadow: 0 0 12px rgba(20,184,166,0.3) !important;
}
.product-card-badge.popular {
    background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%) !important;
    box-shadow: 0 0 12px rgba(251,191,36,0.3) !important;
}

/* Discount % badges keep red but cyberize the shape */
.product-discount-badge,
[class*="discount-badge"] {
    border-radius: 0 !important;
    font-family: var(--cy-mono) !important;
    letter-spacing: 0.5px !important;
    clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px)) !important;
}

/* Social proof toast — cyber chrome */
.social-proof-toast {
    background: linear-gradient(135deg, var(--cy-surface-1) 0%, var(--cy-surface-2) 100%) !important;
    border: 1px solid var(--cy-line-strong) !important;
    border-radius: 0 !important;
    clip-path: polygon(
        0 8px, 8px 0,
        calc(100% - 8px) 0, 100% 8px,
        100% calc(100% - 8px), calc(100% - 8px) 100%,
        8px 100%, 0 calc(100% - 8px)
    );
    box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 16px rgba(20,184,166,0.15) !important;
    position: fixed !important;
}
.social-proof-toast::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cy-cyan), transparent);
}
.sp-icon {
    background: rgba(20,184,166,0.12) !important;
    border: 1px solid var(--cy-line-strong);
    color: var(--cy-cyan-bright) !important;
    border-radius: 0 !important;
    clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px));
}
.sp-text strong {
    font-family: var(--cy-display) !important;
    color: #fff !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em;
}
.sp-text span,
.sp-time {
    font-family: var(--cy-mono) !important;
    font-size: 0.7rem !important;
    color: var(--text-muted) !important;
    letter-spacing: 0.5px;
}

/* Back-to-shop / back links */
.back-link,
a[href]:has(> i.fa-arrow-left) {
    font-family: var(--cy-mono) !important;
    font-size: 0.75rem !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: var(--cy-cyan) !important;
    border: 1px solid var(--cy-line) !important;
    padding: 8px 16px !important;
    background: transparent !important;
    text-decoration: none !important;
    border-radius: 0 !important;
    clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px)) !important;
    transition: all 0.3s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.back-link:hover {
    background: rgba(20,184,166,0.06) !important;
    border-color: var(--cy-cyan) !important;
    color: var(--cy-cyan-bright) !important;
    box-shadow: var(--cy-glow-soft);
}

/* Section headers in legacy pages — center text alignment */
.section-header { text-align: center; }
.about-content > .section-badge,
.about-content > .section-badge::before,
.about-content > .section-badge::after {
    display: inline-flex;
}
.about-content > .section-badge { margin-left: 0; }
.about-content > .section-title { text-align: left; }

/* About page stat-number — make it fit comfortably */
.about-stats .stat-number {
    font-size: clamp(1.6rem, 3vw, 2.4rem) !important;
    white-space: nowrap;
}

/* Make sure cookie banner buttons keep their original three-button styling — not affected by global overrides above */
.cookie-actions .cookie-btn-primary,
.cookie-actions .cookie-btn-secondary,
.cookie-actions .cookie-btn-tertiary {
    /* Already styled in cookie consent block, leave alone */
}

/* Newsletter section subscribe button — already cyber via newsletter-input-group, keep that override winning */
.newsletter-input-group .btn-primary {
    padding: 12px 22px !important;
}

/* Hero CTA buttons — already cyber-styled in hero block */

/* Filter count badges */


/* Wishlist heart buttons in product cards — subtle cyber tint */
.product-wishlist {
    background: rgba(13,26,48,0.8) !important;
    border: 1px solid var(--cy-line) !important;
    color: var(--text-muted) !important;
    border-radius: 0 !important;
    backdrop-filter: blur(4px);
    clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px));
    transition: all 0.3s ease;
}
.product-wishlist:hover {
    color: #ef4444 !important;
    border-color: rgba(239,68,68,0.4) !important;
}
.product-wishlist.active {
    color: #ef4444 !important;
    border-color: rgba(239,68,68,0.6) !important;
    background: rgba(239,68,68,0.08) !important;
}

/* Product image background — subtle hex grid */
.product-image {
    background: linear-gradient(180deg, var(--cy-bg-deep) 0%, #000 100%) !important;
    position: relative;
}
.product-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(60deg, rgba(20,184,166,0.04) 1px, transparent 1px),
        linear-gradient(-60deg, rgba(20,184,166,0.04) 1px, transparent 1px);
    background-size: 24px 42px;
    opacity: 0.5;
    mask-image: radial-gradient(ellipse at center, transparent 30%, #000 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, transparent 30%, #000 80%);
    pointer-events: none;
    z-index: 0;
}
.product-image img,
.product-image picture {
    position: relative;
    z-index: 1;
}

/* Card vials are STATIC at rest (no float) — we want eyes on price + stars.
   Hover state still lifts and scales for an interactive feel.
   The dedicated product page (.pp-image-wrap img) keeps its float — those
   are committed-attention contexts, not browse-grid contexts. */
.product-card .product-image img,
.bestseller-card .bs-image img {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
}
.product-card:hover .product-image img,
.bestseller-card:hover .bs-image img {
    transform: translateY(-3px) scale(1.04) translateZ(0);
}

/* ── Sale price: gentle teal pulse glow ──
   The active price text breathes a faint glow so the eye lands on it.
   Very subtle — text shadow that fades in/out over 3.5s. */
.product-price,
.bs-price {
    animation: pp-price-glow 3.5s ease-in-out infinite;
}
@keyframes pp-price-glow {
    0%, 100% { text-shadow: 0 0 0 transparent; }
    50%      { text-shadow: 0 0 14px rgba(20, 184, 166, 0.45); }
}

/* ── Add-to-cart button: subtle hover pulse ──
   When the user mouses over the entire card, the cart button gently
   scales — primes them for the click target. */
.product-card:hover .product-add-btn,
.bestseller-card:hover .bs-cart-btn {
    transform: scale(1.08);
    box-shadow: 0 0 14px rgba(20, 184, 166, 0.4);
}
.product-add-btn,
.bs-cart-btn {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, background 0.2s ease;
}

/* Add-to-cart and quick view buttons */
.product-add-btn,
.product-quick-view-btn {
    background: rgba(20,184,166,0.1) !important;
    border: 1px solid var(--cy-line-strong) !important;
    color: var(--cy-cyan) !important;
    border-radius: 0 !important;
    clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
    transition: all 0.3s ease;
}
.product-add-btn:hover,
.product-quick-view-btn:hover {
    background: var(--cy-cyan) !important;
    color: var(--cy-bg) !important;
    box-shadow: var(--cy-glow-mid) !important;
    border-color: transparent !important;
}

/* Product card price area */
.product-price-current,
.product-price,
.product-card .product-price {
    font-family: var(--cy-display) !important;
    color: var(--cy-cyan-bright) !important;
    text-shadow: 0 0 12px rgba(20,184,166,0.4);
}
.product-price-original { color: var(--text-dim) !important; text-decoration: line-through; }

/* Product card name */
.product-name {
    font-family: var(--cy-display) !important;
    color: #fff !important;
    letter-spacing: 0.01em;
}
.product-dosage,
.product-size {
    font-family: var(--cy-mono) !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.72rem !important;
    color: var(--text-muted) !important;
}

/* Bestseller "View Full Catalog" CTA centered link inherits .btn-primary cyber */

/* ─── BUNDLES PAGE — preset card internals ─── */
.preset-add-btn {
    background: linear-gradient(135deg, var(--cy-cyan-bright) 0%, var(--cy-cyan) 50%, var(--cy-cyan-deep) 100%) !important;
    color: var(--cy-bg) !important;
    font-family: var(--cy-mono) !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 1.8px !important;
    text-transform: uppercase !important;
    border-radius: 0 !important;
    border: none !important;
    padding: 13px 22px !important;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)) !important;
    box-shadow: 0 0 0 1px rgba(20,184,166,0.4), 0 4px 24px rgba(20,184,166,0.3) !important;
    transition: all 0.3s ease !important;
}
.preset-add-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 0 1px var(--cy-cyan-bright), 0 8px 32px rgba(20,184,166,0.5) !important;
}









/* Email popup — cyber treatment */
.email-popup {
    background: linear-gradient(135deg, var(--cy-surface-1) 0%, var(--cy-surface-2) 100%) !important;
    border: 1px solid var(--cy-line-strong) !important;
    border-radius: 0 !important;
    clip-path: polygon(
        0 10px, 10px 0,
        calc(100% - 10px) 0, 100% 10px,
        100% calc(100% - 10px), calc(100% - 10px) 100%,
        10px 100%, 0 calc(100% - 10px)
    );
    box-shadow: 0 16px 48px rgba(0,0,0,0.6), 0 0 24px rgba(20,184,166,0.15) !important;
}
.email-popup::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cy-cyan), transparent);
}
.email-popup-icon {
    background: rgba(20,184,166,0.1) !important;
    border: 1px solid var(--cy-line);
    color: var(--cy-cyan) !important;
    clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px));
    border-radius: 0 !important;
}
.email-popup-text strong {
    font-family: var(--cy-display) !important;
    color: #fff !important;
}
.email-popup-text span {
    color: var(--text-muted) !important;
    font-family: var(--cy-mono) !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.5px;
}
.email-popup-form input {
    background: var(--cy-bg-deep) !important;
    border: 1px solid var(--cy-line-strong) !important;
    color: #fff !important;
    border-radius: 0 !important;
    font-family: var(--cy-mono) !important;
    font-size: 0.82rem !important;
    padding: 10px 14px !important;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.email-popup-form input::placeholder {
    color: var(--text-dim) !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.72rem;
}
.email-popup-form button {
    background: linear-gradient(135deg, var(--cy-cyan-bright), var(--cy-cyan-deep)) !important;
    color: var(--cy-bg) !important;
    border: none !important;
    border-radius: 0 !important;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
    box-shadow: 0 0 12px rgba(20,184,166,0.3);
}
.email-popup-close {
    color: var(--text-muted) !important;
    background: transparent !important;
}

/* ─── ANNOUNCEMENT BAR — keep gradient but cyber-tune ─── */
.announcement-bar {
    background: linear-gradient(135deg, var(--cy-cyan-deep) 0%, var(--cy-cyan) 50%, var(--cy-cyan-deep) 100%) !important;
    color: var(--cy-bg) !important;
    font-family: var(--cy-mono) !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(20,184,166,0.4) !important;
    box-shadow: 0 2px 16px rgba(20,184,166,0.3);
}
.announcement-bar strong { color: #fff !important; font-weight: 800; }

/* ─── NAVBAR — cyber refinement ─── */
.navbar {
    background: rgba(5,11,22,0.92) !important;
    border-bottom: 1px solid var(--cy-line) !important;
    backdrop-filter: blur(12px);
}
.nav-links a,
.nav-dropdown-toggle {
    font-family: var(--cy-mono) !important;
    font-size: 0.82rem !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    font-weight: 500 !important;
}
.nav-links a:hover,
.nav-links a.active,
.nav-dropdown-toggle.active {
    color: var(--cy-cyan-bright) !important;
    text-shadow: 0 0 8px rgba(20,184,166,0.4);
}
.nav-links a.active::after,
.nav-dropdown-toggle.active::after {
    background: var(--cy-cyan) !important;
    box-shadow: 0 0 8px var(--cy-cyan);
}

/* ─── FOOTER — cyber treatment ─── */
.footer {
    background: linear-gradient(180deg, var(--cy-bg-deep) 0%, #050b16 100%) !important;
    border-top: 1px solid var(--cy-line) !important;
    position: relative;
}
.footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cy-cyan), transparent);
}
.footer-links h4 {
    font-family: var(--cy-mono) !important;
    color: var(--cy-cyan) !important;
    font-size: 0.8rem !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    margin-bottom: 14px !important;
}
.footer-links a {
    font-family: 'Inter', sans-serif !important;
    color: var(--text-muted) !important;
    font-size: 0.88rem !important;
    transition: all 0.25s ease !important;
}
.footer-links a:hover {
    color: var(--cy-cyan-bright) !important;
    transform: translateX(4px);
}
.footer-brand p {
    color: var(--text-muted) !important;
    font-size: 0.85rem !important;
}
.footer-disclaimer {
    background: rgba(13,26,48,0.4) !important;
    border: 1px solid var(--cy-line) !important;
    border-radius: 0 !important;
    padding: 18px !important;
    clip-path: polygon(
        0 8px, 8px 0,
        calc(100% - 8px) 0, 100% 8px,
        100% calc(100% - 8px), calc(100% - 8px) 100%,
        8px 100%, 0 calc(100% - 8px)
    );
}
.footer-disclaimer p {
    color: var(--text-dim) !important;
    font-size: 0.72rem !important;
    line-height: 1.5;
}
.footer-disclaimer strong {
    color: var(--cy-cyan) !important;
    font-family: var(--cy-mono) !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.footer-legal-links a,
.footer-legal-links button {
    font-family: var(--cy-mono) !important;
    color: var(--text-muted) !important;
    font-size: 0.72rem !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    transition: all 0.25s ease !important;
}
.footer-legal-links a:hover,
.footer-legal-links button:hover {
    color: var(--cy-cyan-bright) !important;
}
.footer-legal-links span { color: var(--cy-line-strong) !important; }
.copyright {
    font-family: var(--cy-mono) !important;
    color: var(--text-dim) !important;
    font-size: 0.72rem !important;
    letter-spacing: 1px;
}

/* ─── LOGO HUE SHIFT + POP GLOW ─── */
.nav-logo-img,
.about-logo-img,
.age-gate-logo,
img[src*="logo.png"],
img[src*="logo.webp"],
img[src*="icon-512"] {
    filter: var(--cy-logo-shift)
            drop-shadow(0 0 14px rgba(20, 184, 166, 0.45))
            drop-shadow(0 0 28px rgba(45, 212, 191, 0.18));
    transition: filter 0.4s cubic-bezier(0.2, 0.6, 0.3, 1), transform 0.4s ease;
}
/* Subtle hover lift + brighter glow on the navbar logo */
.nav-logo:hover .nav-logo-img,
a:hover > .about-logo-img {
    filter: var(--cy-logo-shift)
            drop-shadow(0 0 20px rgba(20, 184, 166, 0.7))
            drop-shadow(0 0 40px rgba(45, 212, 191, 0.35))
            brightness(1.08);
    transform: translateY(-1px);
}
/* Gentle ambient pulse on the navbar logo so it has subtle "alive" energy */
@keyframes cyLogoBreath {
    0%, 100% { filter: var(--cy-logo-shift) drop-shadow(0 0 14px rgba(20, 184, 166, 0.45)) drop-shadow(0 0 28px rgba(45, 212, 191, 0.18)); }
    50%      { filter: var(--cy-logo-shift) drop-shadow(0 0 18px rgba(20, 184, 166, 0.55)) drop-shadow(0 0 36px rgba(45, 212, 191, 0.28)); }
}
.nav-logo-img {
    animation: cyLogoBreath 5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .nav-logo-img { animation: none !important; }
}

/* ─── PRODUCT VIAL HUE SHIFT + POP ─── */
/* Hue-shifts blue-cyan vial labels toward cyber green-teal AND adds cyan glow halo
   for premium "lit-from-within" feel that maximizes buying appeal.
   Catches every place a product vial photo can appear: catalog cards, bestsellers,
   modals, cart sidebar, wishlist, recently-viewed, presets, protocols. */
.product-image img,
.bs-image img,
.bestseller-card img,
.product-card img,
.modal-product-image img,
.recently-viewed-grid img,
.modal-image img,
.cart-item-img img,
.cart-pick img,
.cart-item img,
.cart-sidebar img:not(.nav-logo-img):not([src*="logo"]),
#wishlist-sidebar img:not([src*="logo"]),
.wl-card-img img,
.preset-item-image img,
.protocol-item-img img,
.compare-product-actions + .modal-image img,
.modal-content .modal-image img,
.modal-content .modal-img,
img[src*="bpc-157"],
img[src*="tb-500"],
img[src*="cjc"],
img[src*="ipamorelin"],
img[src*="igf-1"],
img[src*="mots-c"],
img[src*="mt-2"],
img[src*="ghk-cu"],
img[src*="glow"],
img[src*="retatrutide"],
img[src*="semax"],
img[src*="selank"],
img[src*="dsip"],
img[src*="pinealon"],
img[src*="oxytocin"],
img[src*="hcg"],
img[src*="glutathione"],
img[src*="bac-water"] {
    filter: var(--cy-vial-shift) var(--cy-vial-glow);
    transition: filter 0.5s cubic-bezier(0.2, 0.6, 0.3, 1), transform 0.5s ease;
}

/* Hero vials get an even more dramatic glow (they're the showcase) */
.hero-vial-main,
.hero-vial-secondary {
    filter: var(--cy-vial-shift) var(--cy-vial-glow-hero);
    transition: filter 0.5s ease, transform 0.5s ease;
}

/* R429/R433/R435/R436: hue strengthened a notch on hover, whisper brightness.
   The winning rule later in the file with `html body` prefix sets the
   !important version; this base rule matches. */
.product-card:hover .product-image img,
.bestseller-card:hover .bs-image img {
    filter: brightness(1.008)
            saturate(1.18)
            drop-shadow(0 0 32px rgba(45, 196, 214, 0.42))
            drop-shadow(0 0 16px rgba(130, 214, 226, 0.30))
            drop-shadow(0 10px 22px rgba(0, 0, 0, 0.38));
}

/* Footer payments */
.footer-payments h4 {
    font-family: var(--cy-mono) !important;
    color: var(--cy-cyan) !important;
}
.payment-icons span {
    background: rgba(20,184,166,0.08) !important;
    border: 1px solid var(--cy-line) !important;
    color: var(--cy-cyan) !important;
    border-radius: 0 !important;
    clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px));
}

/* Footer social */
.footer-social a {
    background: rgba(20,184,166,0.08) !important;
    border: 1px solid var(--cy-line) !important;
    color: var(--cy-cyan) !important;
    border-radius: 0 !important;
    clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px));
    transition: all 0.3s ease !important;
}
.footer-social a:hover {
    background: var(--cy-cyan) !important;
    color: var(--cy-bg) !important;
    box-shadow: var(--cy-glow-soft);
}

/* ============================================================
   ▓▓▓ UNIVERSAL CYBER LAYER — APPLIES TO ENTIRE SITE ▓▓▓
   Forms, inputs, cards, tables, accordions, page chrome
   that wasn't caught by page-specific overrides.
   ============================================================ */

/* ─── UNIVERSAL FORM CONTROLS ─── */
/* Inputs polish (May 2026): kept the dark deep-navy background +
   monospace font (signature brand) but softened the aggressive
   cyberpunk treatment — smaller clipped corners, slight border-
   radius, more breathing room, and normal-case placeholders so
   the form feels usable instead of shouting. Focus state lightened
   from a hard inset to a softer teal halo. */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="date"],
textarea,
select:not(.cookie-prefs select) {
    background: var(--cy-bg-deep) !important;
    border: 1px solid var(--cy-line-strong) !important;
    color: #fff !important;
    border-radius: 6px !important;
    font-family: var(--cy-mono) !important;
    font-size: 0.92rem !important;
    letter-spacing: 0.2px;
    padding: 13px 16px !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease !important;
    clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 4px 100%, 0 calc(100% - 4px));
}
input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="tel"]:hover,
input[type="number"]:hover,
input[type="search"]:hover,
input[type="url"]:hover,
input[type="date"]:hover,
textarea:hover,
select:hover:not(:focus) {
    border-color: rgba(20, 184, 166, 0.35) !important;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
    outline: none !important;
    border-color: var(--cy-cyan) !important;
    background: rgba(8, 19, 36, 0.95) !important;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.18) !important;
}
input::placeholder, textarea::placeholder {
    color: var(--text-dim) !important;
    text-transform: none;
    letter-spacing: 0.2px;
    font-size: 0.88rem !important;
    opacity: 0.75;
}
textarea { min-height: 120px; resize: vertical; }
select {
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--cy-cyan) 50%), linear-gradient(135deg, var(--cy-cyan) 50%, transparent 50%) !important;
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50% !important;
    background-size: 5px 5px, 5px 5px !important;
    background-repeat: no-repeat !important;
    padding-right: 36px !important;
    cursor: pointer;
}
select option {
    /* R443 fix: was bg:var(--cy-bg-deep) + color:#fff. In the light theme
       override --cy-bg-deep resolves to #ffffff, which made white text on a
       white background — options were invisible in every native dropdown
       across the site (most visibly on checkout's Select Industry). Use
       hard-coded white bg + near-black text so options always read. */
    background: #ffffff;
    color: #0a0a0a;
}

/* Form labels */
.form-group label,
label.field-label,
.auth-field label,
.calc-field label,
form label {
    font-family: var(--cy-mono) !important;
    font-size: 0.72rem !important;
    color: var(--cy-cyan) !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    font-weight: 500 !important;
    margin-bottom: 8px !important;
    display: block;
}

/* Form group spacing */
.form-group, .form-row { margin-bottom: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }

/* Checkboxes & radios — cyber tinted */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--cy-cyan);
    width: 16px;
    height: 16px;
}

/* ─── UNIVERSAL FORM SUCCESS/ERROR STATES ─── */
.form-success {
    background: linear-gradient(135deg, rgba(20,184,166,0.08) 0%, var(--cy-surface-1) 100%) !important;
    border: 1px solid var(--cy-line-strong) !important;
    border-left: 3px solid var(--cy-cyan-bright) !important;
    border-radius: 0 !important;
    padding: 24px !important;
    color: #fff !important;
}
.form-success i {
    color: var(--cy-cyan-bright) !important;
    filter: drop-shadow(0 0 8px rgba(20,184,166,0.5));
}
.form-success h3 {
    font-family: var(--cy-display) !important;
    color: #fff !important;
    margin-top: 8px;
}
.form-success p { color: var(--text-muted) !important; }

.auth-error,
.error-message,
.field-error {
    background: rgba(239,68,68,0.06) !important;
    border: 1px solid rgba(239,68,68,0.3) !important;
    border-left: 3px solid #ef4444 !important;
    border-radius: 0 !important;
    padding: 12px 16px !important;
    color: #fca5a5 !important;
    font-family: var(--cy-mono) !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.3px;
}

/* ─── CONTACT PAGE ─── */
.contact-section { padding: 60px 0 80px !important; position: relative; }
.contact-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(60deg, rgba(20,184,166,0.025) 1px, transparent 1px),
        linear-gradient(-60deg, rgba(20,184,166,0.025) 1px, transparent 1px);
    background-size: 80px 138px;
    opacity: 0.4;
    pointer-events: none;
    mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
}
.contact-section .container { position: relative; z-index: 1; }
.contact-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 32px;
    margin-top: 40px;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-form-container,
.contact-info-card {
    background: linear-gradient(180deg, var(--cy-surface-1) 0%, var(--cy-surface-2) 100%) !important;
    border: 1px solid var(--cy-line) !important;
    border-radius: 0 !important;
    padding: 32px !important;
    clip-path: polygon(
        0 14px, 14px 0,
        calc(100% - 14px) 0, 100% 14px,
        100% calc(100% - 14px), calc(100% - 14px) 100%,
        14px 100%, 0 calc(100% - 14px)
    );
    position: relative;
}
.contact-form-container::before,
.contact-info-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cy-cyan), transparent);
}
.contact-info-card h3 {
    font-family: var(--cy-display) !important;
    color: #fff !important;
    font-size: 1.05rem !important;
    margin-bottom: 18px !important;
    padding-bottom: 12px;
    border-bottom: 1px dashed rgba(255,255,255,0.06);
}
.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px dashed rgba(255,255,255,0.04);
}
.contact-item:last-child { border-bottom: none; }
.contact-item i {
    color: var(--cy-cyan) !important;
    font-size: 1.1rem !important;
    width: 36px;
    height: 36px;
    background: rgba(20,184,166,0.08);
    border: 1px solid var(--cy-line);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px));
}
.contact-label {
    display: block;
    font-family: var(--cy-mono) !important;
    color: var(--cy-cyan) !important;
    font-size: 0.7rem !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    margin-bottom: 2px;
}
.contact-item a, .contact-item span:not(.contact-label) {
    color: #fff !important;
    font-size: 0.9rem;
}
.social-icons,
.social-links {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.social-icon {
    background: rgba(20,184,166,0.08) !important;
    border: 1px solid var(--cy-line) !important;
    color: var(--cy-cyan) !important;
    padding: 10px 14px !important;
    border-radius: 0 !important;
    font-family: var(--cy-mono) !important;
    font-size: 0.75rem !important;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: all 0.3s ease !important;
    clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
}
.social-icon:hover {
    background: rgba(20,184,166,0.15) !important;
    border-color: var(--cy-cyan) !important;
    color: var(--cy-cyan-bright) !important;
    box-shadow: var(--cy-glow-soft);
}

/* ─── FAQ PAGE ─── */
.faq-section { padding: 60px 0 80px !important; }

.faq-search {
    background: var(--cy-bg-deep) !important;
    border: 1px solid var(--cy-line-strong) !important;
    border-radius: 0 !important;
    padding: 4px !important;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
    position: relative;
    transition: all 0.3s ease;
}
.faq-search:focus-within {
    border-color: var(--cy-cyan) !important;
    box-shadow: var(--cy-glow-soft) !important;
}
.faq-search input {
    background: transparent !important;
    border: none !important;
    width: 100%;
    padding: 12px 16px !important;
    color: #fff !important;
    font-family: var(--cy-mono) !important;
    font-size: 0.9rem !important;
    outline: none;
    clip-path: none !important;
}
.faq-grid {
    display: grid;
    gap: 12px;
    max-width: 880px;
    margin: 0 auto;
}
.faq-item {
    background: linear-gradient(180deg, var(--cy-surface-1) 0%, var(--cy-surface-2) 100%) !important;
    border: 1px solid var(--cy-line) !important;
    border-radius: 0 !important;
    overflow: hidden;
    clip-path: polygon(
        0 10px, 10px 0,
        calc(100% - 10px) 0, 100% 10px,
        100% calc(100% - 10px), calc(100% - 10px) 100%,
        10px 100%, 0 calc(100% - 10px)
    );
    transition: all 0.3s ease !important;
}
.faq-item:hover {
    border-color: var(--cy-line-hot) !important;
}
.faq-item.open,
.faq-item[open],
.faq-item.expanded {
    border-color: var(--cy-line-hot) !important;
    box-shadow: var(--cy-glow-soft) !important;
}
.faq-question {
    font-family: var(--cy-display) !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    padding: 18px 22px !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    transition: color 0.25s ease;
}
.faq-question:hover { color: var(--cy-cyan-bright) !important; }
/* Original FAQ items already have a chevron indicator inside HTML.
   Skip pseudo-element to avoid duplicate. Color the existing chevron cyan: */
.faq-question i,
.faq-question .fa-chevron-down,
.faq-question svg {
    color: var(--cy-cyan) !important;
    transition: transform 0.3s ease;
}
.faq-answer {
    color: var(--text-muted) !important;
    /* No default padding so collapsed state stays at 0 height. Padding is
       added below when the item is .open */
    padding: 0 !important;
    font-size: 0.92rem !important;
    line-height: 1.65 !important;
}
.faq-item.open .faq-answer {
    padding: 16px 22px 18px !important;
    border-top: 1px dashed rgba(255,255,255,0.06);
}
.faq-no-results {
    text-align: center;
    padding: 40px;
    color: var(--text-muted);
    font-family: var(--cy-mono);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 0.9rem;
}

/* ─── EDUCATION PAGE (compound library) ─── */
.edu-page { background: var(--cy-bg-deep) !important; padding: 130px 20px 80px !important; position: relative; }
.edu-page::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(60deg, rgba(20,184,166,0.025) 1px, transparent 1px),
        linear-gradient(-60deg, rgba(20,184,166,0.025) 1px, transparent 1px);
    background-size: 80px 138px;
    pointer-events: none;
    mask-image: radial-gradient(ellipse at center top, #000 20%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center top, #000 20%, transparent 80%);
}
.edu-container { position: relative; z-index: 1; }
.edu-header h1 {
    font-family: var(--cy-display) !important;
    font-size: clamp(2.2rem, 5vw, 3.6rem) !important;
    color: #fff !important;
    text-shadow: 0 0 20px rgba(20,184,166,0.2);
}
.edu-search {
    background: var(--cy-bg-deep) !important;
    border: 1px solid var(--cy-line-strong) !important;
    padding: 4px !important;
    border-radius: 0 !important;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.edu-search input {
    background: transparent !important;
    border: none !important;
    color: #fff !important;
    font-family: var(--cy-mono) !important;
    padding: 12px 16px !important;
    width: 100%;
    outline: none;
    clip-path: none !important;
}
/* Sticky filter bar — compact so it doesn't dominate the viewport on scroll */
.edu-filter-bar {
    display: block !important;
    width: auto !important;
    padding: 10px 12px !important;
    border: 1px solid var(--cy-line-strong) !important;
    border-radius: 0 !important;
    background: rgba(5, 11, 22, 0.95) !important;
    backdrop-filter: blur(14px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45), 0 0 24px rgba(20,184,166,0.08) !important;
    margin: 16px 0 24px !important;
    clip-path: polygon(0 8px, 8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px));
}
.edu-filter-bar .edu-search { margin-bottom: 10px !important; }
.edu-filter-bar .edu-search input {
    padding: 9px 14px 9px 38px !important;
    font-size: 0.86rem !important;
}
.edu-filter-bar .edu-search i {
    left: 12px !important;
    font-size: 0.85rem;
}

/* Category pills — single horizontal row, scroll if overflow */
.edu-cat-pills {
    display: flex;
    gap: 0;
    border: 1px solid var(--cy-line);
    background: var(--cy-surface-1);
    width: 100%;
    margin: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--cy-cyan) transparent;
    -webkit-overflow-scrolling: touch;
}
.edu-cat-pills::-webkit-scrollbar { height: 4px; }
.edu-cat-pills::-webkit-scrollbar-thumb { background: var(--cy-cyan); border-radius: 2px; }
.edu-cat-pills::-webkit-scrollbar-track { background: transparent; }

.edu-cat-pills > * {
    background: transparent !important;
    color: var(--text-muted) !important;
    border: none !important;
    border-right: 1px solid var(--cy-line) !important;
    padding: 9px 14px !important;
    font-family: var(--cy-mono) !important;
    font-size: 0.7rem !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    border-radius: 0 !important;
    cursor: pointer;
    transition: all 0.25s ease !important;
    white-space: nowrap;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.edu-cat-pills > *:last-child { border-right: none !important; }
.edu-cat-pills > *:hover {
    background: rgba(20,184,166,0.06) !important;
    color: var(--cy-cyan-bright) !important;
}
.edu-cat-pills > *.active {
    background: rgba(20,184,166,0.12) !important;
    color: var(--cy-cyan-bright) !important;
    box-shadow: inset 0 -2px 0 var(--cy-cyan) !important;
}
.edu-cat-section {
    margin-bottom: 36px;
    padding-bottom: 36px;
    border-bottom: 1px dashed var(--cy-line);
}
.edu-cat-section h2 {
    font-family: var(--cy-display) !important;
    color: #fff !important;
    font-size: 1.6rem !important;
    margin-bottom: 18px !important;
    display: flex;
    align-items: center;
    gap: 12px;
}
.edu-cat-section h2::before {
    content: '';
    width: 4px;
    height: 24px;
    background: var(--cy-cyan);
    box-shadow: 0 0 8px var(--cy-cyan);
}
.compound {
    background: linear-gradient(180deg, var(--cy-surface-1) 0%, var(--cy-surface-2) 100%) !important;
    border: 1px solid var(--cy-line) !important;
    border-radius: 0 !important;
    padding: 24px !important;
    margin-bottom: 14px;
    clip-path: polygon(
        0 12px, 12px 0,
        calc(100% - 12px) 0, 100% 12px,
        100% calc(100% - 12px), calc(100% - 12px) 100%,
        12px 100%, 0 calc(100% - 12px)
    );
    transition: all 0.3s ease !important;
    position: relative;
}
.compound::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cy-cyan), transparent);
}
.compound:hover {
    border-color: var(--cy-line-hot) !important;
    box-shadow: var(--cy-glow-soft) !important;
}
.compound-title-block h3,
.compound-title-row h3,
.compound-header h3 {
    font-family: var(--cy-display) !important;
    color: #fff !important;
    font-size: 1.2rem !important;
}
.compound-tag {
    background: rgba(20,184,166,0.1) !important;
    color: var(--cy-cyan-bright) !important;
    border: 1px solid var(--cy-line-strong) !important;
    padding: 3px 10px !important;
    font-family: var(--cy-mono) !important;
    font-size: 0.65rem !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    border-radius: 0 !important;
    clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 4px 100%, 0 calc(100% - 4px));
}
.compound-meta { color: var(--text-muted); font-size: 0.85rem; }
.meta-item .label {
    font-family: var(--cy-mono) !important;
    color: var(--cy-cyan) !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.7rem !important;
}
.meta-item .value { color: #fff; font-weight: 600; }
.compound-tldr {
    background: rgba(13,26,48,0.4);
    border-left: 2px solid var(--cy-cyan);
    padding: 12px 16px;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.55;
    margin-top: 12px;
}

/* ─── BLOG INDEX + BLOG POSTS ─── */
.blog-index { background: var(--cy-bg-deep) !important; padding: 130px 20px 80px !important; }
.blog-index-container { max-width: 1200px; margin: 0 auto; }
.blog-index-header h1 {
    font-family: var(--cy-display) !important;
    font-size: clamp(2.2rem, 5vw, 3.6rem) !important;
    color: #fff !important;
    text-align: center;
    text-shadow: 0 0 20px rgba(20,184,166,0.2);
    margin-bottom: 12px;
}
.blog-index-header p { color: var(--text-muted); text-align: center; max-width: 720px; margin: 0 auto 40px; }
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
}
.blog-post-card {
    background: linear-gradient(180deg, var(--cy-surface-1) 0%, var(--cy-surface-2) 100%) !important;
    border: 1px solid var(--cy-line) !important;
    border-radius: 0 !important;
    padding: 26px !important;
    clip-path: polygon(
        0 14px, 14px 0,
        calc(100% - 14px) 0, 100% 14px,
        100% calc(100% - 14px), calc(100% - 14px) 100%,
        14px 100%, 0 calc(100% - 14px)
    );
    transition: all 0.4s ease !important;
    position: relative;
    text-decoration: none;
}
.blog-post-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cy-cyan), transparent);
}
.blog-post-card:hover {
    border-color: var(--cy-line-hot) !important;
    box-shadow: var(--cy-glow-soft) !important;
    transform: translateY(-3px) !important;
}
.blog-post-card h3,
.blog-post-card .title {
    font-family: var(--cy-display) !important;
    color: #fff !important;
    font-size: 1.15rem !important;
    margin-bottom: 8px !important;
}
.blog-post-card .meta,
.blog-post-card .tag {
    font-family: var(--cy-mono) !important;
    color: var(--cy-cyan) !important;
    font-size: 0.7rem !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
}
.blog-post-card .tag {
    display: inline-block;
    background: rgba(20,184,166,0.08);
    border: 1px solid var(--cy-line);
    padding: 3px 10px;
    margin-right: 6px;
    margin-bottom: 8px;
    clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 4px 100%, 0 calc(100% - 4px));
}
.blog-post-card .excerpt {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-top: 8px;
}
.blog-cta {
    background: linear-gradient(135deg, var(--cy-surface-1) 0%, var(--cy-surface-2) 100%) !important;
    border: 1px solid var(--cy-line) !important;
    padding: 32px !important;
    margin-top: 40px;
    border-radius: 0 !important;
    clip-path: polygon(
        0 14px, 14px 0,
        calc(100% - 14px) 0, 100% 14px,
        100% calc(100% - 14px), calc(100% - 14px) 100%,
        14px 100%, 0 calc(100% - 14px)
    );
    text-align: center;
}

/* Blog post body typography */
article h1, article h2, article h3,
.blog-post h1, .blog-post h2, .blog-post h3,
.post-content h1, .post-content h2, .post-content h3 {
    font-family: var(--cy-display) !important;
    color: #fff !important;
}
article h2::before,
.blog-post h2::before,
.post-content h2::before {
    content: '◢ ';
    color: var(--cy-cyan);
    font-size: 0.7em;
}
article blockquote,
.blog-post blockquote {
    border-left: 3px solid var(--cy-cyan) !important;
    background: rgba(20,184,166,0.04);
    padding: 14px 20px !important;
    color: var(--text-secondary);
    font-style: italic;
    margin: 18px 0;
}
article code, .blog-post code, .post-content code {
    background: var(--cy-bg-deep);
    color: var(--cy-cyan-bright);
    padding: 2px 6px;
    font-family: var(--cy-mono);
    font-size: 0.85em;
    border: 1px solid var(--cy-line);
    border-radius: 0;
}

/* ─── ACCOUNT / AUTH PAGES ─── */
.auth-page {
    background: var(--cy-bg-deep) !important;
    /* Top padding clears the fixed navbar (~103px) + breathing room.
       170px gives a comfortable gap so the welcome hero doesn't hug
       the navbar. */
    padding: 170px 20px 80px !important;
    min-height: 100vh;
    position: relative;
}
/* Sign-in/up form auto-centers horizontally with sane max-width */
.auth-page > .auth-card,
.auth-page > .auth-container,
.auth-page > form,
#auth-view {
    max-width: 460px;
    margin-left: auto !important;
    margin-right: auto !important;
}
.auth-page::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(60deg, rgba(20,184,166,0.025) 1px, transparent 1px),
        linear-gradient(-60deg, rgba(20,184,166,0.025) 1px, transparent 1px);
    background-size: 80px 138px;
    pointer-events: none;
    mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
}
.auth-page > * { position: relative; z-index: 1; }
.auth-header h1,
.auth-header h2 {
    font-family: var(--cy-display) !important;
    color: #fff !important;
    font-size: clamp(1.5rem, 3vw, 2.2rem) !important;
}
.auth-input-wrap {
    background: var(--cy-bg-deep) !important;
    border: 1px solid var(--cy-line-strong) !important;
    border-radius: 0 !important;
    padding: 4px !important;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
    transition: all 0.3s ease;
}
.auth-input-wrap:focus-within {
    border-color: var(--cy-cyan) !important;
    box-shadow: var(--cy-glow-soft) !important;
}
.auth-input-wrap input {
    background: transparent !important;
    border: none !important;
    color: #fff !important;
    font-family: var(--cy-mono) !important;
    width: 100%;
    padding: 10px 14px !important;
    outline: none;
    clip-path: none !important;
}
.auth-submit {
    background: linear-gradient(135deg, var(--cy-cyan-bright) 0%, var(--cy-cyan) 50%, var(--cy-cyan-deep) 100%) !important;
    color: var(--cy-bg) !important;
    font-family: var(--cy-mono) !important;
    font-weight: 700 !important;
    letter-spacing: 1.8px !important;
    text-transform: uppercase !important;
    padding: 13px 24px !important;
    border-radius: 0 !important;
    border: none !important;
    width: 100%;
    cursor: pointer;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)) !important;
    box-shadow: 0 0 0 1px rgba(20,184,166,0.4), 0 4px 24px rgba(20,184,166,0.3);
    transition: all 0.3s ease !important;
}
.auth-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 0 1px var(--cy-cyan-bright), 0 8px 32px rgba(20,184,166,0.5) !important;
}
.auth-google {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid var(--cy-line-strong) !important;
    color: #fff !important;
    border-radius: 0 !important;
    padding: 12px 24px !important;
    font-family: var(--cy-mono) !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    font-size: 0.78rem !important;
    cursor: pointer;
    width: 100%;
    transition: all 0.3s ease !important;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.auth-google:hover {
    background: rgba(255,255,255,0.08) !important;
    border-color: var(--cy-cyan) !important;
    box-shadow: var(--cy-glow-soft);
}
.auth-divider {
    color: var(--text-dim);
    font-family: var(--cy-mono);
    font-size: 0.7rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    margin: 20px 0;
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
}
.auth-divider::before, .auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--cy-line);
}
.forgot-link, .auth-footer a {
    color: var(--cy-cyan) !important;
    font-family: var(--cy-mono) !important;
    font-size: 0.78rem !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
}
.forgot-link:hover, .auth-footer a:hover { color: var(--cy-cyan-bright) !important; }

/* Dashboard */
.dash-greeting,
.dash-header h1 {
    font-family: var(--cy-display) !important;
    color: #fff !important;
}
.dash-tabs {
    display: flex;
    gap: 0;
    border: 1px solid var(--cy-line);
    background: var(--cy-surface-1);
    margin-bottom: 24px;
    overflow-x: auto;
}
.dash-tab {
    background: transparent !important;
    color: var(--text-muted) !important;
    border: none !important;
    border-right: 1px solid var(--cy-line) !important;
    padding: 12px 22px !important;
    font-family: var(--cy-mono) !important;
    font-size: 0.74rem !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    border-radius: 0 !important;
    cursor: pointer;
    transition: all 0.25s ease !important;
}
.dash-tab.active {
    background: rgba(20,184,166,0.12) !important;
    color: var(--cy-cyan-bright) !important;
    box-shadow: inset 0 -2px 0 var(--cy-cyan) !important;
}
.dash-panel {
    background: linear-gradient(180deg, var(--cy-surface-1) 0%, var(--cy-surface-2) 100%) !important;
    border: 1px solid var(--cy-line) !important;
    border-radius: 0 !important;
    padding: 28px !important;
    clip-path: polygon(
        0 12px, 12px 0,
        calc(100% - 12px) 0, 100% 12px,
        100% calc(100% - 12px), calc(100% - 12px) 100%,
        12px 100%, 0 calc(100% - 12px)
    );
}
.dash-logout {
    background: transparent !important;
    border: 1px solid var(--cy-line-strong) !important;
    color: var(--text-muted) !important;
    border-radius: 0 !important;
    font-family: var(--cy-mono) !important;
    font-size: 0.75rem !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    padding: 8px 16px !important;
    clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
}
.dash-logout:hover {
    border-color: #ef4444 !important;
    color: #ef4444 !important;
}
.loyalty-hero {
    background: linear-gradient(135deg, rgba(20,184,166,0.1) 0%, var(--cy-surface-2) 100%) !important;
    border: 1px solid var(--cy-line-strong) !important;
    border-radius: 0 !important;
    padding: 28px !important;
    clip-path: polygon(
        0 14px, 14px 0,
        calc(100% - 14px) 0, 100% 14px,
        100% calc(100% - 14px), calc(100% - 14px) 100%,
        14px 100%, 0 calc(100% - 14px)
    );
    position: relative;
}
.loyalty-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--cy-cyan-bright), transparent);
}
.loyalty-hero-value,
.loyalty-hero-cash {
    font-family: var(--cy-display) !important;
    background: linear-gradient(135deg, #fff 0%, var(--cy-cyan-bright) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 12px rgba(20,184,166,0.3));
}
.loyalty-hero-label,
.loyalty-hero-icon {
    color: var(--cy-cyan) !important;
    font-family: var(--cy-mono) !important;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

/* ─── ORDER TRACKER ─── */


.track-form {
    background: linear-gradient(180deg, var(--cy-surface-1) 0%, var(--cy-surface-2) 100%) !important;
    border: 1px solid var(--cy-line) !important;
    border-radius: 0 !important;
    padding: 28px !important;
    clip-path: polygon(
        0 12px, 12px 0,
        calc(100% - 12px) 0, 100% 12px,
        100% calc(100% - 12px), calc(100% - 12px) 100%,
        12px 100%, 0 calc(100% - 12px)
    );
}
.track-signin {
    background: linear-gradient(180deg, var(--cy-surface-1) 0%, var(--cy-surface-2) 100%) !important;
    border: 1px solid var(--cy-line) !important;
    border-radius: 0 !important;
    padding: 36px 28px !important;
    text-align: center;
    clip-path: polygon(
        0 14px, 14px 0,
        calc(100% - 14px) 0, 100% 14px,
        100% calc(100% - 14px), calc(100% - 14px) 100%,
        14px 100%, 0 calc(100% - 14px)
    );
    position: relative;
}
.track-signin::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cy-cyan), transparent);
}
.track-signin > i {
    font-size: 2.4rem !important;
    color: var(--cy-cyan) !important;
    filter: drop-shadow(0 0 16px rgba(20,184,166,0.4));
    margin-bottom: 14px;
    display: inline-block;
}
.track-signin h2 {
    font-family: var(--cy-display) !important;
    color: #fff !important;
    margin-bottom: 10px !important;
}
.track-signin p {
    color: var(--text-muted) !important;
    margin-bottom: 20px;
}
.track-signin-btn,
a.track-signin-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px;
    background: linear-gradient(135deg, var(--cy-cyan-bright) 0%, var(--cy-cyan) 50%, var(--cy-cyan-deep) 100%) !important;
    color: var(--cy-bg) !important;
    font-family: var(--cy-mono) !important;
    font-weight: 700 !important;
    letter-spacing: 1.8px !important;
    text-transform: uppercase !important;
    padding: 13px 28px !important;
    border-radius: 0 !important;
    border: none !important;
    text-decoration: none !important;
    cursor: pointer;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)) !important;
    box-shadow: 0 0 0 1px rgba(20,184,166,0.4), 0 4px 24px rgba(20,184,166,0.3) !important;
    transition: all 0.3s ease !important;
    font-size: 0.82rem !important;
}
.track-signin-btn:hover,
a.track-signin-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 0 1px var(--cy-cyan-bright), 0 8px 32px rgba(20,184,166,0.5) !important;
    color: var(--cy-bg) !important;
}
.track-btn {
    background: linear-gradient(135deg, var(--cy-cyan-bright), var(--cy-cyan-deep)) !important;
    color: var(--cy-bg) !important;
    font-family: var(--cy-mono) !important;
    font-weight: 700 !important;
    letter-spacing: 1.8px !important;
    text-transform: uppercase !important;
    padding: 13px 24px !important;
    border-radius: 0 !important;
    border: none !important;
    cursor: pointer;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
    box-shadow: 0 0 0 1px rgba(20,184,166,0.4), 0 4px 24px rgba(20,184,166,0.3);
}
.track-error {
    background: rgba(239,68,68,0.06) !important;
    border-left: 3px solid #ef4444 !important;
    padding: 12px 16px !important;
    color: #fca5a5 !important;
    font-family: var(--cy-mono) !important;
    font-size: 0.85rem !important;
}
.order-detail {
    background: linear-gradient(180deg, var(--cy-surface-1) 0%, var(--cy-surface-2) 100%) !important;
    border: 1px solid var(--cy-line) !important;
    border-radius: 0 !important;
    padding: 28px !important;
    margin-top: 24px;
    clip-path: polygon(
        0 14px, 14px 0,
        calc(100% - 14px) 0, 100% 14px,
        100% calc(100% - 14px), calc(100% - 14px) 100%,
        14px 100%, 0 calc(100% - 14px)
    );
    position: relative;
}
.order-detail::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cy-cyan), transparent);
}
.order-ref {
    font-family: var(--cy-mono) !important;
    color: var(--cy-cyan-bright) !important;
    font-size: 1rem !important;
    letter-spacing: 1px;
    background: rgba(20,184,166,0.08);
    padding: 4px 10px;
    border: 1px solid var(--cy-line);
    display: inline-block;
}







.order-total-row.total {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    border-top: 1px solid var(--cy-line);
    padding-top: 12px;
    margin-top: 8px;
}

.progress-step {
    flex: 1;
    text-align: center;
    position: relative;
}
.progress-dot {
    width: 24px;
    height: 24px;
    background: var(--cy-bg-deep);
    border: 2px solid var(--cy-line-strong);
    border-radius: 50%;
    margin: 0 auto 8px;
    transition: all 0.3s ease;
}
.progress-step.active .progress-dot,
.progress-step.completed .progress-dot {
    background: var(--cy-cyan);
    border-color: var(--cy-cyan-bright);
    box-shadow: 0 0 12px var(--cy-cyan);
}
.progress-label {
    font-family: var(--cy-mono);
    font-size: 0.7rem;
    color: var(--text-muted);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.progress-step.active .progress-label,
.progress-step.completed .progress-label { color: var(--cy-cyan-bright); }
.progress-bar-fill {
    background: linear-gradient(90deg, var(--cy-cyan-bright), var(--cy-cyan)) !important;
    box-shadow: 0 0 12px var(--cy-cyan);
}

/* ─── COA PAGE ─── */
.coa-section { padding: 60px 0 80px; }



.coa-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 22px;
}
.coa-card {
    background: linear-gradient(180deg, var(--cy-surface-1) 0%, var(--cy-surface-2) 100%) !important;
    border: 1px solid var(--cy-line) !important;
    border-radius: 0 !important;
    overflow: hidden;
    clip-path: polygon(
        0 14px, 14px 0,
        calc(100% - 14px) 0, 100% 14px,
        100% calc(100% - 14px), calc(100% - 14px) 100%,
        14px 100%, 0 calc(100% - 14px)
    );
    transition: all 0.4s ease !important;
    position: relative;
}
.coa-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cy-cyan), transparent);
    z-index: 2;
}
.coa-card:hover {
    border-color: var(--cy-line-hot) !important;
    box-shadow: var(--cy-glow-soft) !important;
    transform: translateY(-3px) !important;
}
.coa-card-image { background: linear-gradient(180deg, var(--cy-bg-deep) 0%, #000 100%) !important; }
.coa-card-name {
    font-family: var(--cy-display) !important;
    color: #fff !important;
    font-size: 1.1rem !important;
}
.coa-card-category {
    font-family: var(--cy-mono) !important;
    color: var(--cy-cyan) !important;
    font-size: 0.7rem !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
}
.coa-card-meta-item { padding: 6px 0; border-bottom: 1px dashed rgba(255,255,255,0.06); }
.coa-card-meta-label {
    font-family: var(--cy-mono) !important;
    color: var(--text-muted) !important;
    font-size: 0.7rem !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.coa-card-meta-value {
    font-family: var(--cy-mono) !important;
    color: var(--cy-cyan-bright) !important;
    font-weight: 600;
}
.coa-card-purity-badge,
.coa-card-pass-badge {
    background: rgba(20,184,166,0.12) !important;
    color: var(--cy-cyan-bright) !important;
    border: 1px solid var(--cy-line-strong) !important;
    padding: 4px 10px !important;
    font-family: var(--cy-mono) !important;
    font-size: 0.7rem !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    border-radius: 0 !important;
    clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px));
}
.coa-card-cta {
    background: linear-gradient(135deg, var(--cy-cyan-bright), var(--cy-cyan-deep)) !important;
    color: var(--cy-bg) !important;
    font-family: var(--cy-mono) !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    padding: 10px 18px !important;
    border-radius: 0 !important;
    border: none !important;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
    box-shadow: 0 0 12px rgba(20,184,166,0.3);
}

/* ─── COMPARE PAGE ─── */










.compare-table { width: 100%; border-collapse: collapse; }
.compare-table th, .compare-table td { padding: 12px 16px; border-bottom: 1px solid var(--cy-line); text-align: left; }
.compare-table th {
    font-family: var(--cy-mono) !important;
    color: var(--cy-cyan) !important;
    font-size: 0.74rem !important;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    background: rgba(20,184,166,0.04);
}






/* ─── CALCULATOR PAGE ─── */
.calc-page { background: var(--cy-bg-deep) !important; }

.calc-card {
    background: linear-gradient(180deg, var(--cy-surface-1) 0%, var(--cy-surface-2) 100%) !important;
    border: 1px solid var(--cy-line) !important;
    border-radius: 0 !important;
    padding: 28px !important;
    clip-path: polygon(0 14px, 14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px));
    position: relative;
}
.calc-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cy-cyan), transparent);
}
.calc-grid { display: grid; gap: 16px; }
.calc-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.preset-btns,
.bac-suggest-btns {
    display: flex;
    gap: 0;
    flex-wrap: wrap;
    border: 1px solid var(--cy-line);
    width: fit-content;
    margin-top: 6px;
}
.preset-btn {
    background: transparent !important;
    color: var(--text-muted) !important;
    border: none !important;
    border-right: 1px solid var(--cy-line) !important;
    padding: 8px 14px !important;
    font-family: var(--cy-mono) !important;
    font-size: 0.72rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border-radius: 0 !important;
    cursor: pointer;
    transition: all 0.25s ease !important;
}
.preset-btn:hover { color: var(--cy-cyan-bright) !important; background: rgba(20,184,166,0.06) !important; }
.preset-btn.active { background: rgba(20,184,166,0.12) !important; color: var(--cy-cyan-bright) !important; }
.summary-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px dashed rgba(255,255,255,0.06);
    font-family: var(--cy-mono);
}



.draw-to-pill {
    background: linear-gradient(135deg, rgba(20,184,166,0.12) 0%, rgba(20,184,166,0.04) 100%) !important;
    border: 1px solid var(--cy-line-strong) !important;
    color: var(--cy-cyan-bright) !important;
    padding: 14px 22px !important;
    font-family: var(--cy-display) !important;
    font-size: 1.4rem !important;
    border-radius: 0 !important;
    clip-path: polygon(0 8px, 8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px));
    text-shadow: 0 0 16px rgba(20,184,166,0.4);
}
.quick-ref {
    background: linear-gradient(180deg, var(--cy-surface-1) 0%, var(--cy-surface-2) 100%) !important;
    border: 1px solid var(--cy-line) !important;
    padding: 24px !important;
    border-radius: 0 !important;
    clip-path: polygon(0 12px, 12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px));
    margin-top: 24px;
}

.quick-ref-table { width: 100%; border-collapse: collapse; font-family: var(--cy-mono); font-size: 0.85rem; }
.quick-ref-table th, .quick-ref-table td { padding: 10px 14px; border-bottom: 1px solid var(--cy-line); }
.quick-ref-table th {
    color: var(--cy-cyan) !important;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 0.72rem;
    background: rgba(20,184,166,0.04);
}
.quick-ref-table td { color: var(--text-secondary); }
.calc-disclaimer {
    background: rgba(251,191,36,0.05);
    border-left: 3px solid #fbbf24;
    padding: 14px 18px;
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-top: 24px;
    font-family: var(--cy-mono);
}

/* ─── PROTOCOL PAGE ─── */
.protocol-page { background: var(--cy-bg-deep) !important; padding: 60px 20px 80px !important; }


.goal-card {
    background: linear-gradient(180deg, var(--cy-surface-1) 0%, var(--cy-surface-2) 100%) !important;
    border: 1px solid var(--cy-line) !important;
    border-radius: 0 !important;
    padding: 24px !important;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease !important;
    clip-path: polygon(0 12px, 12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px));
    position: relative;
}
.goal-card:hover {
    border-color: var(--cy-line-hot) !important;
    box-shadow: var(--cy-glow-soft) !important;
    transform: translateY(-3px) !important;
}














/* ─── 404 PAGE ─── */
.error-section {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
    background: var(--cy-bg-deep);
    position: relative;
}
.error-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(60deg, rgba(20,184,166,0.04) 1px, transparent 1px),
        linear-gradient(-60deg, rgba(20,184,166,0.04) 1px, transparent 1px);
    background-size: 80px 138px;
    pointer-events: none;
    mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
}
.error-content { position: relative; z-index: 1; max-width: 720px; }
.error-icon {
    font-size: 3rem !important;
    color: var(--cy-cyan) !important;
    filter: drop-shadow(0 0 20px rgba(20,184,166,0.5));
    margin-bottom: 16px !important;
}
.error-code {
    font-family: var(--cy-display) !important;
    font-size: clamp(4rem, 14vw, 9rem) !important;
    background: linear-gradient(135deg, #fff 0%, var(--cy-cyan-bright) 50%, var(--cy-cyan-deep) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin: 0 0 12px !important;
    filter: drop-shadow(0 0 32px rgba(20,184,166,0.4));
    letter-spacing: -0.02em;
}
.error-title {
    font-family: var(--cy-display) !important;
    color: #fff !important;
    font-size: clamp(1.4rem, 3vw, 2rem) !important;
    margin-bottom: 12px !important;
}
.error-description {
    color: var(--text-muted) !important;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 24px;
}
.error-divider {
    width: 80px;
    height: 1px;
    background: var(--cy-cyan);
    box-shadow: 0 0 8px var(--cy-cyan);
    margin: 24px auto;
}
.error-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-top: 24px; }
.error-link-card {
    background: linear-gradient(180deg, var(--cy-surface-1) 0%, var(--cy-surface-2) 100%) !important;
    border: 1px solid var(--cy-line) !important;
    color: var(--text) !important;
    padding: 20px !important;
    text-decoration: none !important;
    border-radius: 0 !important;
    transition: all 0.3s ease !important;
    clip-path: polygon(0 10px, 10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px));
}
.error-link-card:hover {
    border-color: var(--cy-line-hot) !important;
    box-shadow: var(--cy-glow-soft) !important;
    transform: translateY(-3px) !important;
}
.error-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ─── OFFLINE PAGE ─── */
body.offline,
.offline-content {
    background: var(--cy-bg-deep) !important;
    color: var(--text);
    font-family: var(--cy-mono);
}


/* ============================================================
   ▓▓▓ BATCH 1 — TRUST + URGENCY ENHANCEMENTS ▓▓▓
   ============================================================ */

/* ─── TRUST MARQUEE (auto-scrolling ticker tape) ─── */
.trust-marquee {
    background: linear-gradient(180deg, var(--cy-bg-deep) 0%, var(--cy-bg) 50%, var(--cy-bg-deep) 100%);
    border-top: 1px solid var(--cy-line-strong);
    border-bottom: 1px solid var(--cy-line-strong);
    padding: 14px 0;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 0 32px rgba(20,184,166,0.08);
}
/* When marquee sits above the hero (top of <main>), push it below the fixed navbar.
   Announcement bar (~41px) is in flow before main, so margin-top compensates only
   for the navbar height (~99px) to land marquee flush against navbar bottom. */
main > .trust-marquee:first-of-type,
main > .trust-marquee:first-child {
    margin-top: 99px;
}
.trust-marquee::before,
.trust-marquee::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    z-index: 2;
    pointer-events: none;
}
.trust-marquee::before {
    left: 0;
    background: linear-gradient(to right, var(--cy-bg-deep) 0%, transparent 100%);
}
.trust-marquee::after {
    right: 0;
    background: linear-gradient(to left, var(--cy-bg-deep) 0%, transparent 100%);
}
.trust-marquee-track {
    display: flex;
    animation: trustMarqueeScroll 50s linear infinite;
    width: max-content;
    will-change: transform;
}
.trust-marquee-content {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-right: 20px;
    white-space: nowrap;
}
@keyframes trustMarqueeScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.tm-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--cy-mono);
    font-size: 0.78rem;
    color: var(--text-secondary);
    letter-spacing: 2px;
    font-weight: 500;
}
.tm-item i {
    color: var(--cy-cyan-bright);
    font-size: 0.85rem;
    filter: drop-shadow(0 0 6px rgba(20,184,166,0.4));
}
.tm-sep {
    color: var(--cy-cyan);
    font-size: 0.6rem;
    opacity: 0.6;
}
.trust-marquee:hover .trust-marquee-track {
    animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
    .trust-marquee-track { animation: none !important; }
    .trust-marquee-track { justify-content: center; flex-wrap: wrap; }
}

/* ─── FREE SHIPPING PROGRESS BAR (cart sidebar) ─── */
.cart-shipping-progress {
    margin: 16px 18px 8px;
    padding: 14px 14px 12px;
    background: linear-gradient(135deg, rgba(20,184,166,0.08) 0%, rgba(20,184,166,0.02) 100%);
    border: 1px solid var(--cy-line-strong);
    clip-path: polygon(0 8px, 8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px));
    position: relative;
}
.cart-shipping-progress.unlocked {
    background: linear-gradient(135deg, rgba(20,184,166,0.15) 0%, rgba(20,184,166,0.05) 100%);
    border-color: var(--cy-cyan);
    box-shadow: 0 0 24px rgba(20,184,166,0.2);
}



.cart-shipping-progress.unlocked .csp-text {
    color: var(--cy-cyan-bright);
}
.cart-shipping-progress.unlocked .csp-text i {
    animation: csTrophyPulse 1.5s ease-in-out infinite;
}

/* Checkout free-shipment-protection callout — green strip between
   summary and trust badges; reassures customers right before payment. */






/* Cart delivery callout — slim row above subtotal showing predicted
   delivery range + same-day-dispatch cutoff status. */
.cart-delivery-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin: 10px 0 8px;
    background: rgba(20, 184, 166, 0.06);
    border: 1px solid rgba(20, 184, 166, 0.18);
    border-radius: 8px;
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.4;
}
.cart-delivery-row i {
    color: var(--cy-cyan);
    font-size: 0.85rem;
    flex-shrink: 0;
}
.cart-delivery-row strong { color: var(--text); }
@keyframes csTrophyPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}



@keyframes csShimmer {
    0%, 100% { opacity: 0; transform: translateX(0); }
    50% { opacity: 1; transform: translateX(8px); }
}

/* ─── AMBIENT PARTICLES ON PRODUCT CARDS ─── */
/* 6 small teal dots drifting slowly inside the .product-image area.
   Hidden on COA-only contexts and on touch devices that can't paint
   smoothly. Subtle (low opacity, small size) so they add atmosphere
   without competing with the vial or the info section. */
.card-drift {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(45, 212, 191, 0.5);
    box-shadow: 0 0 5px rgba(20, 184, 166, 0.45);
    pointer-events: none;
    z-index: 0;
    opacity: 0;
}
.card-drift:nth-child(1) { top: 14%; left:  10%; animation: card-drift-a 12s linear infinite 0s;   }
.card-drift:nth-child(2) { top: 70%; left:  88%; animation: card-drift-b 14s linear infinite 1.5s; width: 2px; height: 2px; }
.card-drift:nth-child(3) { top: 30%; left:  78%; animation: card-drift-c 11s linear infinite 0.8s; width: 4px; height: 4px; }
.card-drift:nth-child(4) { top: 80%; left:  18%; animation: card-drift-d 13s linear infinite 3.2s; }
.card-drift:nth-child(5) { top: 45%; left:   6%; animation: card-drift-a 16s linear infinite 5.5s; width: 2px; height: 2px; }
.card-drift:nth-child(6) { top: 22%; left:  92%; animation: card-drift-c 15s linear infinite 7.0s; }
@keyframes card-drift-a {
    0%,100% { transform: translate(0, 0); opacity: 0; }
    15%     { opacity: 0.6; }
    50%     { transform: translate(15px, -12px); opacity: 0.45; }
    85%     { opacity: 0.3; }
}
@keyframes card-drift-b {
    0%,100% { transform: translate(0, 0); opacity: 0; }
    15%     { opacity: 0.55; }
    50%     { transform: translate(-18px, 14px); opacity: 0.4; }
    85%     { opacity: 0.25; }
}
@keyframes card-drift-c {
    0%,100% { transform: translate(0, 0); opacity: 0; }
    12%     { opacity: 0.55; }
    50%     { transform: translate(-12px, -16px); opacity: 0.4; }
    88%     { opacity: 0.3; }
}
@keyframes card-drift-d {
    0%,100% { transform: translate(0, 0); opacity: 0; }
    14%     { opacity: 0.5; }
    50%     { transform: translate(16px, 14px); opacity: 0.4; }
    86%     { opacity: 0.25; }
}

/* ─── STOCK URGENCY BADGES ON PRODUCT CARDS ─── */
/* Hidden on the listing/grid view — there's no space without competing
   with BEST SELLER, viewer count, discount %, and the price row. The
   "selling fast" / "only X left" signal is preserved on the dedicated
   product page where there's room for it (see .pp-badge.low / .out). */
.product-card .stock-urgency,
.bestseller-card .stock-urgency {
    display: none !important;
}
.stock-urgency {
    position: absolute;
    bottom: 12px;
    left: 12px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    font-family: var(--cy-mono);
    font-size: 0.62rem;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    font-weight: 600;
    border: 1px solid;
    background: rgba(5,11,22,0.85);
    backdrop-filter: blur(4px);
    clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px));
}
.stock-urgency.low {
    color: #fcd34d;
    border-color: rgba(251,191,36,0.4);
}
.stock-urgency.low i {
    color: #fbbf24;
    animation: stockPulse 1.5s ease-in-out infinite;
}
.stock-urgency.fast {
    color: var(--cy-cyan-bright);
    border-color: var(--cy-line-hot);
}
.stock-urgency.fast i {
    color: var(--cy-cyan-bright);
    animation: stockPulse 1.8s ease-in-out infinite;
}
.stock-urgency.critical {
    color: #fca5a5;
    border-color: rgba(239,68,68,0.5);
    animation: criticalShake 4s ease-in-out infinite;
}
.stock-urgency.critical i {
    color: #ef4444;
    animation: stockPulse 1.2s ease-in-out infinite;
}
@keyframes stockPulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.15); }
}
@keyframes criticalShake {
    0%, 92%, 100% { transform: translateX(0); }
    93% { transform: translateX(-1px); }
    94% { transform: translateX(1px); }
    95% { transform: translateX(-1px); }
    96% { transform: translateX(0); }
}

/* ─── LIVE VIEWER COUNT ON PRODUCT CARDS ─── */
.viewer-count {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    background: rgba(5,11,22,0.85);
    border: 1px solid var(--cy-line);
    backdrop-filter: blur(4px);
    color: var(--text-muted);
    font-family: var(--cy-mono);
    font-size: 0.62rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px));
}
.viewer-count .vc-dot {
    width: 6px;
    height: 6px;
    background: var(--cy-cyan-bright);
    border-radius: 50%;
    box-shadow: 0 0 6px var(--cy-cyan-bright);
    animation: vcPulse 2s ease-in-out infinite;
    flex-shrink: 0;
}
.viewer-count .vc-num {
    color: var(--cy-cyan-bright);
    font-weight: 700;
}
@keyframes vcPulse {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.3); }
}

/* ============================================================
   ▓▓▓ BATCH 2 — VISUAL POLISH + MOTION ▓▓▓
   ============================================================ */

/* ─── COUNT-UP NUMBER ANIMATION ─── */
.count-up {
    display: inline-block;
    font-variant-numeric: tabular-nums;
}

/* ─── ENHANCED SCROLL REVEAL (cyber-tuned) ─── */
.cy-fade-up {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.8s cubic-bezier(0.2, 0.6, 0.3, 1), transform 0.8s cubic-bezier(0.2, 0.6, 0.3, 1);
    will-change: opacity, transform;
}
.cy-fade-up.in-view {
    opacity: 1;
    transform: translateY(0);
}
.cy-fade-left {
    opacity: 0;
    transform: translateX(-28px);
    transition: opacity 0.8s cubic-bezier(0.2, 0.6, 0.3, 1), transform 0.8s cubic-bezier(0.2, 0.6, 0.3, 1);
}
.cy-fade-left.in-view { opacity: 1; transform: translateX(0); }
.cy-fade-right {
    opacity: 0;
    transform: translateX(28px);
    transition: opacity 0.8s cubic-bezier(0.2, 0.6, 0.3, 1), transform 0.8s cubic-bezier(0.2, 0.6, 0.3, 1);
}
.cy-fade-right.in-view { opacity: 1; transform: translateX(0); }
.cy-zoom-in {
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.7s cubic-bezier(0.2, 0.6, 0.3, 1), transform 0.7s cubic-bezier(0.2, 0.6, 0.3, 1);
}
.cy-zoom-in.in-view { opacity: 1; transform: scale(1); }

/* Stagger children animation */
.cy-stagger > * {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s cubic-bezier(0.2, 0.6, 0.3, 1), transform 0.7s cubic-bezier(0.2, 0.6, 0.3, 1);
}
.cy-stagger.in-view > *:nth-child(1) { transition-delay: 0.05s; }
.cy-stagger.in-view > *:nth-child(2) { transition-delay: 0.15s; }
.cy-stagger.in-view > *:nth-child(3) { transition-delay: 0.25s; }
.cy-stagger.in-view > *:nth-child(4) { transition-delay: 0.35s; }
.cy-stagger.in-view > *:nth-child(5) { transition-delay: 0.45s; }
.cy-stagger.in-view > *:nth-child(6) { transition-delay: 0.55s; }
.cy-stagger.in-view > * {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .cy-fade-up, .cy-fade-left, .cy-fade-right, .cy-zoom-in,
    .cy-stagger > * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ─── ANIMATED NAV UNDERLINE ─── */
.nav-links a:not(.active),
.nav-dropdown-toggle:not(.active) {
    position: relative;
}
.nav-links a:not(.active)::after,
.nav-dropdown-toggle:not(.active)::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    width: 0;
    height: 1px;
    background: var(--cy-cyan);
    box-shadow: 0 0 6px var(--cy-cyan);
    transform: translateX(-50%);
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-links a:not(.active):hover::after,
.nav-dropdown-toggle:not(.active):hover::after {
    width: 100%;
}

/* ─── BUTTON ARROW SLIDE ON HOVER ─── */
.btn-primary:not(.cookie-btn-primary) i.fas.fa-arrow-right,
.btn-primary:not(.cookie-btn-primary) i.fa-arrow-right,
.btn-outline:not(.cookie-btn-secondary):not(.cookie-btn-primary) i.fa-arrow-right,
.cy-btn .cy-btn-arrow,
.btn-primary:not(.cookie-btn-primary) > i.fas:last-child,
a.btn-primary:not(.cookie-btn-primary) i:last-child {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-primary:not(.cookie-btn-primary):hover i.fa-arrow-right,
.btn-outline:not(.cookie-btn-secondary):not(.cookie-btn-primary):hover i.fa-arrow-right {
    transform: translateX(4px);
}

/* ─── BUTTON RIPPLE (cyan glow burst) ─── */
@keyframes cyRipple {
    0% { transform: scale(0); opacity: 0.5; }
    100% { transform: scale(2.5); opacity: 0; }
}
.btn-primary:not(.cookie-btn-primary),
.btn-outline:not(.cookie-btn-secondary):not(.cookie-btn-primary):not(.footer-link-btn),
.cy-btn,
.preset-add-btn,
.auth-submit,
.track-signin-btn {
    position: relative;
    overflow: hidden;
}
.cy-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(20, 184, 166, 0.4);
    pointer-events: none;
    animation: cyRipple 0.6s ease-out forwards;
    z-index: 0;
}

/* ─── LOADING SKELETON FOR PRODUCT CARDS ─── */



@keyframes skeletonShimmer {
    0% { background-position: -100% 0; }
    100% { background-position: 200% 0; }
}










/* ============================================================
   ▓▓▓ BATCH 3 — VISUAL POLISH + MOBILE NUDGE ▓▓▓
   ============================================================ */

/* ─── ANIMATED PEPTIDE CHAIN SVG SECTION DIVIDER ─── */






@keyframes bondFlow {
    0% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -32; }
}

.peptide-chain-atom.bright {
    fill: var(--cy-cyan);
    filter: drop-shadow(0 0 6px var(--cy-cyan));
}
@keyframes atomPulse {
    0%, 100% { stroke-width: 1.5; opacity: 0.7; }
    50% { stroke-width: 2; opacity: 1; }
}





/* ─── ENHANCED PRODUCT CARD HOVER ─── */
.product-card .product-image,
.bestseller-card .bs-image {
    transition: transform 0.5s cubic-bezier(0.2, 0.6, 0.3, 1);
}
.product-card:hover .product-image,
.bestseller-card:hover .bs-image {
    transform: scale(1.02);
}
.product-card .product-image img,
.bestseller-card .bs-image img {
    transition: transform 0.6s cubic-bezier(0.2, 0.6, 0.3, 1) !important, filter 0.4s ease !important;
}
.product-card:hover .product-image img {
    transform: scale(1.08) translateY(-4px) !important;
}

/* Pulse glow ring on card hover */
.product-card::after,
.bestseller-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center top, rgba(20,184,166,0.15) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 1;
}
.product-card:hover::after,
.bestseller-card:hover::after {
    opacity: 1;
}

/* ─── STICKY MOBILE CART NUDGE BAR ─── */
.sticky-cart-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, var(--cy-surface-1) 0%, var(--cy-bg-deep) 100%);
    border-top: 1px solid var(--cy-cyan);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    z-index: 8500;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.2, 0.6, 0.3, 1);
    box-shadow: 0 -8px 32px rgba(0,0,0,0.5), 0 0 16px rgba(20,184,166,0.2);
}
.sticky-cart-bar.visible {
    transform: translateY(0);
}
.sticky-cart-bar::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cy-cyan-bright), transparent);
}
.scb-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.scb-label {
    font-family: var(--cy-mono);
    font-size: 0.66rem;
    color: var(--cy-cyan);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.scb-total {
    font-family: var(--cy-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
}
.scb-total .scb-count {
    color: var(--cy-cyan-bright);
    font-size: 0.85rem;
    font-weight: 600;
    margin-left: 6px;
}
.scb-btn {
    background: linear-gradient(135deg, var(--cy-cyan-bright), var(--cy-cyan-deep)) !important;
    color: var(--cy-bg) !important;
    font-family: var(--cy-mono) !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    padding: 12px 20px !important;
    border-radius: 0 !important;
    border: none !important;
    cursor: pointer;
    font-size: 0.78rem !important;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)) !important;
    box-shadow: 0 0 16px rgba(20,184,166,0.4);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

/* Hide on desktop, show on mobile only */
@media (min-width: 769px) {
    .sticky-cart-bar { display: none !important; }
}
@media (max-width: 768px) {
    /* Push body bottom padding when sticky bar visible */
    body.has-sticky-cart { padding-bottom: 60px; }
}

/* ============================================================
   ▓▓▓ BATCH 4 — CTA REFINEMENTS + EMPTY STATES ▓▓▓
   ============================================================ */

/* ─── BETTER EMPTY CART STATE ─── */
.cart-empty {
    padding: 32px 24px !important;
    text-align: center;
}
.cart-empty-icon {
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, rgba(20,184,166,0.12) 0%, rgba(20,184,166,0.04) 100%);
    border: 1px solid var(--cy-line-strong);
    color: var(--cy-cyan-bright) !important;
    font-size: 1.8rem !important;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    clip-path: polygon(0 12px, 12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px));
    box-shadow: 0 0 24px rgba(20,184,166,0.2);
    animation: cartEmptyPulse 3s ease-in-out infinite;
}
@keyframes cartEmptyPulse {
    0%, 100% { box-shadow: 0 0 16px rgba(20,184,166,0.15); }
    50% { box-shadow: 0 0 32px rgba(20,184,166,0.35); }
}
.cart-empty h3 {
    font-family: var(--cy-display) !important;
    color: #fff !important;
    font-size: 1.15rem !important;
    margin: 0 0 8px 0 !important;
}
.cart-empty p {
    color: var(--text-muted) !important;
    font-size: 0.88rem !important;
    line-height: 1.55 !important;
    margin: 0 0 22px 0 !important;
}
.cart-empty .btn-primary {
    width: 100%;
    justify-content: center;
}
.cart-empty-perks {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px dashed rgba(255,255,255,0.06);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cep-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--cy-mono);
    font-size: 0.74rem;
    color: var(--text-muted);
    letter-spacing: 0.8px;
    text-transform: uppercase;
    text-align: left;
}
.cep-item i {
    color: var(--cy-cyan);
    font-size: 0.8rem;
    width: 16px;
    text-align: center;
}

/* ========== CART ACCOUNT-CREATION PROMPT ========== */
/* Shown above the checkout button when user is signed-out, with the
   points they'd earn from the current order. Drives signup conversion. */
.cart-account-prompt {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    margin: 8px 0 10px;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.10), rgba(99, 102, 241, 0.06));
    border: 1px solid rgba(20, 184, 166, 0.30);
    border-radius: 10px;
}
.cart-account-prompt .cap-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(20, 184, 166, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    font-size: 0.95rem;
}
.cart-account-prompt .cap-body { flex: 1; min-width: 0; }
.cart-account-prompt .cap-headline {
    font-size: 0.82rem;
    color: var(--text);
    line-height: 1.3;
}
.cart-account-prompt .cap-headline strong { color: var(--accent); }
.cart-account-prompt .cap-sub {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 2px;
    line-height: 1.35;
}
.cart-account-prompt .cap-sub strong { color: var(--success); }
.cart-account-prompt .cap-cta {
    flex-shrink: 0;
    background: var(--accent);
    color: #0a1628;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.78rem;
    padding: 7px 14px;
    border-radius: 7px;
    transition: opacity 0.18s;
}
.cart-account-prompt .cap-cta:hover { opacity: 0.85; }

/* ========== CHECKOUT ACCOUNT-CREATION BANNER ========== */
/* Shown at top of step 1 if user is signed out. */
.checkout-account-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    margin: 0 0 22px;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.10), rgba(99, 102, 241, 0.06));
    border: 1px solid rgba(20, 184, 166, 0.30);
    border-radius: 12px;
}
.checkout-account-banner .cab-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 10px;
    background: rgba(20, 184, 166, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    font-size: 1.1rem;
}
.checkout-account-banner .cab-body { flex: 1; min-width: 0; }
.checkout-account-banner .cab-headline {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 2px;
}
.checkout-account-banner .cab-sub {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.4;
}
.checkout-account-banner .cab-sub strong { color: var(--accent); }
.checkout-account-banner .cab-cta {
    flex-shrink: 0;
    background: var(--accent);
    color: #0a1628;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.84rem;
    padding: 9px 18px;
    border-radius: 8px;
    transition: opacity 0.18s;
}
.checkout-account-banner .cab-cta:hover { opacity: 0.85; }

@media (max-width: 600px) {
    .cart-account-prompt {
        flex-wrap: wrap;
        gap: 10px;
    }
    .cart-account-prompt .cap-cta {
        width: 100%;
        text-align: center;
        padding: 10px;
    }
    .checkout-account-banner {
        flex-wrap: wrap;
    }
    .checkout-account-banner .cab-cta {
        width: 100%;
        text-align: center;
    }
}

/* ─── HERO CTA MICROCOPY (small benefit text below buttons) ─── */




/* ─── ENHANCED ANNOUNCEMENT BAR (link entire bar to products) ─── */
.announcement-bar {
    cursor: default;
    transition: filter 0.3s ease;
}

/* ─── BACK-TO-TOP BUTTON: cyber upgrade ─── */
.back-to-top {
    background: linear-gradient(135deg, var(--cy-cyan-bright), var(--cy-cyan-deep)) !important;
    color: var(--cy-bg) !important;
    border: none !important;
    border-radius: 0 !important;
    width: 44px !important;
    height: 44px !important;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
    box-shadow: 0 4px 24px rgba(20,184,166,0.4) !important;
    transition: all 0.3s ease !important;
}
.back-to-top:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 32px rgba(20,184,166,0.6) !important;
}

/* ============================================================
   ▓▓▓ CHECKOUT PAGE (formerly modal) ▓▓▓
   ============================================================ */
.checkout-page {
    background: var(--cy-bg-deep);
    position: relative;
}
.checkout-page::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(60deg, rgba(20,184,166,0.025) 1px, transparent 1px),
        linear-gradient(-60deg, rgba(20,184,166,0.025) 1px, transparent 1px);
    background-size: 80px 138px;
    pointer-events: none;
    mask-image: radial-gradient(ellipse at center top, #000 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center top, #000 30%, transparent 80%);
    z-index: 0;
}
.checkout-page-container {
    max-width: 880px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}
.checkout-page-header {
    margin-bottom: 32px;
}
.checkout-page-header .back-link {
    margin-bottom: 16px;
}
.checkout-page-header h1 {
    font-family: var(--cy-display) !important;
    font-size: clamp(1.8rem, 4vw, 2.8rem) !important;
    color: #fff !important;
    text-shadow: 0 0 20px rgba(20,184,166,0.2);
    display: flex;
    align-items: center;
    gap: 14px;
}
.checkout-page-header h1 i {
    color: var(--cy-cyan-bright);
    font-size: 0.85em;
    filter: drop-shadow(0 0 8px rgba(20,184,166,0.4));
}

/* Checkout step indicator on the page */
.checkout-page .checkout-steps {
    background: linear-gradient(180deg, var(--cy-surface-1) 0%, var(--cy-surface-2) 100%);
    border: 1px solid var(--cy-line);
    border-radius: 0 !important;
    padding: 16px 20px;
    margin-bottom: 24px;
    clip-path: polygon(0 10px, 10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px));
}

/* Checkout step content panels — same look across all 4 steps */
.checkout-page .checkout-step-content {
    background: linear-gradient(180deg, var(--cy-surface-1) 0%, var(--cy-surface-2) 100%);
    border: 1px solid var(--cy-line);
    border-radius: 0 !important;
    padding: 36px 32px;
    clip-path: polygon(
        0 14px, 14px 0,
        calc(100% - 14px) 0, 100% 14px,
        100% calc(100% - 14px), calc(100% - 14px) 100%,
        14px 100%, 0 calc(100% - 14px)
    );
    position: relative;
}
.checkout-page .checkout-step-content::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cy-cyan), transparent);
}
.checkout-page .checkout-step-content h2 {
    font-family: var(--cy-display) !important;
    /* R453: was #fff (white on light theme = invisible). Now dark for readability. */
    color: var(--text) !important;
    font-size: 1.4rem !important;
    margin: 0 0 14px 0 !important;
}

@media (max-width: 600px) {
    .checkout-page .checkout-step-content { padding: 24px 18px; }
    .checkout-page-header h1 { font-size: 1.6rem !important; gap: 8px; }
}

/* ─── COA / DOWNLOAD PAGES — generic disclaimer styling ─── */
.coa-note,
.compare-disclaimer,
.calc-disclaimer,
.protocol-disclaimer,
.edu-disclaimer {
    background: rgba(251,191,36,0.05) !important;
    border: 1px solid rgba(251,191,36,0.25) !important;
    border-left: 3px solid #fbbf24 !important;
    padding: 14px 18px !important;
    color: var(--text-muted) !important;
    font-family: var(--cy-mono) !important;
    font-size: 0.82rem !important;
    line-height: 1.55;
    margin: 20px 0 !important;
    border-radius: 0 !important;
    letter-spacing: 0.3px;
}
.coa-note strong,
.compare-disclaimer strong,
.calc-disclaimer strong,
.protocol-disclaimer strong,
.edu-disclaimer strong {
    color: #fcd34d !important;
}

/* ─────────────────────────────────────────────────────────────────
   AFFILIATE DASHBOARD V3 — Visual Upgrade
   Goal: make logging in feel like a reward. Lots of life: animated
   gradients, tier badges, achievements, projection card, polished
   chart, count-up numbers.
   ───────────────────────────────────────────────────────────────── */

/* Ambient backdrop — sits behind the dashboard content */




@keyframes affAmbientFloat {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
    33% { transform: translate(40px, -20px) scale(1.05); opacity: 0.65; }
    66% { transform: translate(-20px, 30px) scale(0.95); opacity: 0.4; }
}

/* New header — animated gradient + grid overlay + tier badge */

@keyframes affHeaderGradient {
    0%, 100% { background-position: 0% 0%; }
    50% { background-position: 100% 100%; }
}

/* Lift the foreground content above the absolutely-positioned glow + particles
   layers — but ONLY the foreground content. Earlier we used `> *` here, which
   accidentally promoted the absolutely-positioned glow + particles to
   `position: relative`, making them take space in the flex layout and shoving
   the greeting in by ~320px. */


/* Floating particles inside the header */








@keyframes affParticleFloat {
    0% { transform: translateY(0); opacity: 0; }
    15% { opacity: 0.7; }
    85% { opacity: 0.7; }
    100% { transform: translateY(-180px); opacity: 0; }
}

/* Bigger avatar + glowing ring on the v3 header */

@keyframes affAvatarPulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.6), 0 0 0 5px rgba(20, 184, 166, 0.45), 0 0 20px rgba(20, 184, 166, 0.4); }
    50% { box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.6), 0 0 0 6px rgba(20, 184, 166, 0.7), 0 0 32px rgba(20, 184, 166, 0.7); }
}

/* Stack the "Welcome back," and the name on separate lines for a cleaner
   look — the previous single-line wrap broke awkwardly on long names. */



@keyframes affTextShine {
    0%, 100% { background-position: 0% 0%; }
    50% { background-position: 100% 0%; }
}

/* Tier badge — Rookie / Pro / Elite / Legend */



.aff-tier-badge.tier-rookie {
    background: rgba(148, 163, 184, 0.12);
    border-color: rgba(148, 163, 184, 0.35);
    color: #cbd5e1;
}
.aff-tier-badge.tier-pro {
    background: rgba(20, 184, 166, 0.18);
    border-color: rgba(20, 184, 166, 0.5);
    color: var(--accent-light);
    box-shadow: 0 0 18px rgba(20, 184, 166, 0.25);
}
.aff-tier-badge.tier-elite {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(99, 102, 241, 0.2));
    border-color: rgba(168, 85, 247, 0.6);
    color: #d8b4fe;
    box-shadow: 0 0 22px rgba(168, 85, 247, 0.35);
}
.aff-tier-badge.tier-legend {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.22), rgba(239, 68, 68, 0.18));
    border-color: rgba(245, 158, 11, 0.65);
    color: #fbbf24;
    box-shadow: 0 0 24px rgba(245, 158, 11, 0.4);
    animation: affLegendShimmer 3s ease-in-out infinite;
}
@keyframes affLegendShimmer {
    0%, 100% { box-shadow: 0 0 24px rgba(245, 158, 11, 0.4); }
    50% { box-shadow: 0 0 36px rgba(245, 158, 11, 0.7); }
}





/* Hero stat (lifetime earnings spotlight) */



@keyframes affHeroSheen {
    0%, 100% { transform: translateX(-100%); }
    50% { transform: translateX(100%); }
}






@keyframes affTrophyFloat {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-4px) rotate(2deg); }
}

/* Achievement badges row */







.aff-achievement.locked {
    opacity: 0.45;
    filter: grayscale(0.7);
}
.aff-achievement.unlocked {
    background: rgba(20, 184, 166, 0.08);
    border-color: rgba(20, 184, 166, 0.35);
    box-shadow: 0 0 14px rgba(20, 184, 166, 0.15);
}
.aff-achievement.unlocked::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
    animation: affAchievShine 4s ease-in-out infinite;
}
@keyframes affAchievShine {
    0%, 100% { left: -100%; }
    50%, 60% { left: 100%; }
}


.aff-achievement.unlocked .aff-achievement-icon { color: #fbbf24; }
.aff-achievement.locked .aff-achievement-icon { color: var(--text-dim); }

.aff-achievement.locked .aff-achievement-name { color: var(--text-muted); }


/* Earnings projection card */









/* Top products chart */

















/* Upgraded chart card with gradient area */



/* Animated count-up flag (no logic; just adds a small fade-in feel) */

@keyframes affCountFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Mini stat upgraded with sparkline */


/* Live indicator */


@keyframes affLiveBlink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.3; transform: scale(0.85); }
}

/* Confetti when ready to cash out */


@keyframes affReadyPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.3); }
    50% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
}

/* Mobile tweaks for the new stuff */


/* ─────────────────────────────────────────────────────────────────
   CATALOG STICKY FILTER + SEARCH WRAPPER (products.html)
   Locks the toolbar to the top of the viewport while scrolling so
   users can re-filter / re-search without scrolling back up.
   ───────────────────────────────────────────────────────────────── */
.catalog-sticky-wrap {
    /* Was position:sticky/top:80px — the sticky bar overlapped product
       card badges and viewer counts as users scrolled. Reverting to
       static so the toolbar simply scrolls away with the page. */
    position: static;
    z-index: 1;
    background: linear-gradient(180deg,
        rgba(8, 14, 28, 0.96) 0%,
        rgba(8, 14, 28, 0.92) 100%);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 10px 0;
    margin: 0 -16px 8px; /* let the bg bleed past the container padding on mobile */
    border-radius: 12px;
    transition: box-shadow 0.25s, border-color 0.25s;
    border: 1px solid transparent;
}
/* Once it's "stuck" (using a sentinel approach via IO would be cleanest, but
   we approximate with a media query — visible shadow only when actually stuck
   relevant to the layout). */
.catalog-sticky-wrap::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 12px;
    border: 1px solid rgba(20, 184, 166, 0.18);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
}
.catalog-sticky-wrap.stuck::before {
    opacity: 1;
}
.catalog-sticky-wrap.stuck {
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}
.catalog-sticky-wrap > .catalog-toolbar { margin-bottom: 8px; padding: 0 12px; }
.catalog-sticky-wrap > .filter-bar      { margin: 0; padding: 0 12px; }
@media (max-width: 768px) {
    .catalog-sticky-wrap { padding: 8px 0; }
}

/* ─────────────────────────────────────────────────────────────────
   PRODUCT SEARCH AUTOCOMPLETE DROPDOWN
   ───────────────────────────────────────────────────────────────── */
.search-autocomplete {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: rgba(13, 21, 38, 0.96);
    border: 1px solid rgba(20, 184, 166, 0.28);
    border-radius: 12px;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(14px);
    z-index: 800;
    max-height: 480px;
    overflow-y: auto;
    overflow-x: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.search-autocomplete.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.search-ac-item {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 10px 14px;
    text-decoration: none;
    color: var(--text);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    transition: background 0.15s, transform 0.15s;
}
.search-ac-item:last-of-type { border-bottom: none; }
.search-ac-item:hover,
.search-ac-item.active {
    background: rgba(20, 184, 166, 0.10);
    transform: translateX(2px);
}
.search-ac-thumb {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.06);
    overflow: hidden;
    flex-shrink: 0;
}
.search-ac-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
    filter: var(--cy-vial-shift, none);
}
.search-ac-body { min-width: 0; }
.search-ac-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.search-ac-name mark {
    background: rgba(20, 184, 166, 0.32);
    color: var(--accent-light);
    padding: 0 2px;
    border-radius: 3px;
}
.search-ac-meta {
    font-size: 0.74rem;
    color: var(--text-muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.search-ac-price {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    color: var(--accent-light);
    font-size: 0.92rem;
    text-align: right;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}
.search-ac-oos {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    color: #f87171;
    font-size: 0.62rem;
    background: rgba(239, 68, 68, 0.15);
    padding: 1px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.search-ac-empty {
    padding: 18px 16px;
    color: var(--text-muted);
    font-size: 0.86rem;
    display: flex;
    align-items: center;
    gap: 10px;
}
.search-ac-empty i { color: var(--text-dim); }
.search-ac-more {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: rgba(20, 184, 166, 0.08);
    color: var(--accent-light);
    text-decoration: none;
    font-size: 0.84rem;
    font-weight: 600;
    border-top: 1px solid rgba(20, 184, 166, 0.18);
    transition: background 0.15s;
}
.search-ac-more:hover { background: rgba(20, 184, 166, 0.16); }

/* ─────────────────────────────────────────────────────────────────
   ORDER SUCCESS / POST-PURCHASE SHARE CARD
   Sits above the order detail card on /order.html for paid orders.
   Drives affiliate signups + organic word-of-mouth.
   ───────────────────────────────────────────────────────────────── */
.order-share-card {
    position: relative;
    background: linear-gradient(165deg,
        rgba(15, 23, 42, 0.85) 0%,
        rgba(20, 184, 166, 0.10) 100%);
    border: 1px solid rgba(34, 197, 94, 0.28);
    border-radius: 18px;
    padding: 32px 28px 28px;
    margin-bottom: 24px;
    overflow: hidden;
    backdrop-filter: blur(8px);
    animation: oscFadeIn 0.5s ease-out;
}
@keyframes oscFadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
.osc-glow {
    position: absolute;
    top: -50%;
    right: -10%;
    width: 360px;
    height: 360px;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.20), transparent 70%);
    pointer-events: none;
}
.osc-content { position: relative; z-index: 1; }
.osc-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: linear-gradient(135deg, #22c55e, #14b8a6);
    color: #0a1628;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    box-shadow: 0 0 28px rgba(34, 197, 94, 0.45);
    animation: oscIconBounce 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes oscIconBounce {
    from { transform: scale(0); }
    to { transform: scale(1); }
}
.osc-title {
    text-align: center;
    margin: 0 0 8px;
    font-family: 'Orbitron', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, #fff 0%, var(--accent-light) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.5px;
}
.osc-sub {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.92rem;
    margin: 0 0 22px;
    line-height: 1.5;
}
.osc-actions {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr;
}
.osc-action {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 14px;
    align-items: center;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 14px 16px;
    transition: border-color 0.2s, transform 0.2s;
}
.osc-action:hover { border-color: rgba(20, 184, 166, 0.32); transform: translateY(-1px); }
.osc-action-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(20, 184, 166, 0.14);
    color: var(--accent-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.osc-refer .osc-action-icon {
    background: rgba(245, 158, 11, 0.14);
    color: #fbbf24;
}
.osc-action-body { min-width: 0; }
.osc-action-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    color: var(--text);
    font-size: 0.96rem;
    line-height: 1.2;
}
.osc-action-desc {
    color: var(--text-muted);
    font-size: 0.82rem;
    margin-top: 3px;
    line-height: 1.4;
}
.osc-action-btn {
    background: linear-gradient(135deg, var(--accent), var(--teal));
    color: #0a1628;
    border: none;
    padding: 10px 16px;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.84rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(20, 184, 166, 0.32);
}
.osc-action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(20, 184, 166, 0.45);
}
.osc-share-buttons {
    display: flex;
    gap: 8px;
}
.osc-share-buttons button {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.92rem;
    transition: all 0.2s;
}
.osc-share-buttons button:hover {
    background: rgba(20, 184, 166, 0.18);
    color: var(--accent-light);
    border-color: rgba(20, 184, 166, 0.32);
    transform: translateY(-1px);
}
.osc-share-buttons button.osc-copied {
    background: rgba(34, 197, 94, 0.18);
    color: #22c55e;
    border-color: rgba(34, 197, 94, 0.4);
}
@media (max-width: 680px) {
    .order-share-card { padding: 24px 18px 20px; }
    .osc-title { font-size: 1.25rem; }
    .osc-sub { font-size: 0.86rem; }
    .osc-action {
        grid-template-columns: 36px 1fr;
        gap: 10px;
        padding: 12px 14px;
    }
    .osc-action-btn,
    .osc-share-buttons {
        grid-column: 1 / -1;
        margin-top: 4px;
        justify-content: center;
    }
    .osc-action-btn { width: 100%; justify-content: center; }
}

/* ─────────────────────────────────────────────────────────────────
   PUBLIC AFFILIATE LEADERBOARD (shows on /affiliate.html for everyone)
   ───────────────────────────────────────────────────────────────── */
.aff-leaderboard {
    background: linear-gradient(180deg,
        rgba(15, 23, 42, 0.55),
        rgba(20, 184, 166, 0.05));
    border: 1px solid rgba(245, 158, 11, 0.22);
    border-radius: 16px;
    padding: 26px 26px 18px;
    margin-bottom: 28px;
    backdrop-filter: blur(8px);
    position: relative;
    overflow: hidden;
}
.aff-leaderboard::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.18), transparent 70%);
    pointer-events: none;
}
.aff-lb-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 22px;
    position: relative;
    z-index: 1;
}
.aff-lb-title {
    margin: 0 0 4px;
    font-family: 'Orbitron', sans-serif;
    font-size: 1.2rem;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 10px;
}
.aff-lb-title i {
    color: #fbbf24;
    filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.5));
    animation: lbTrophyShine 3s ease-in-out infinite;
}
@keyframes lbTrophyShine {
    0%, 100% { transform: scale(1) rotate(-2deg); }
    50% { transform: scale(1.06) rotate(2deg); }
}
.aff-lb-sub {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.86rem;
}
.aff-lb-program-stats {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}
.aff-lb-stat {
    text-align: right;
}
.aff-lb-stat-value {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--accent-light);
    line-height: 1;
}
.aff-lb-stat-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-top: 4px;
    font-weight: 600;
}

/* Podium (top 3) */
.aff-lb-podium {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 18px;
    position: relative;
    z-index: 1;
}
.aff-lb-podium-card {
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 18px 14px 14px;
    text-align: center;
    position: relative;
    transition: transform 0.25s, border-color 0.25s;
}
.aff-lb-podium-card:hover { transform: translateY(-2px); }



.aff-lb-medal {
    font-size: 1.6rem;
    margin-bottom: 8px;
    filter: drop-shadow(0 0 8px currentColor);
}
.aff-lb-rank {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.aff-lb-masked {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    margin: 6px 0 8px;
}
.aff-lb-amount {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--accent-light);
    letter-spacing: -0.5px;
    line-height: 1;
}
.aff-lb-rank-1 .aff-lb-amount {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.aff-lb-meta {
    color: var(--text-muted);
    font-size: 0.78rem;
    margin-top: 6px;
}

/* Rest of the leaderboard (4-10) */
.aff-lb-rest {
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
    z-index: 1;
}
.aff-lb-rest-row {
    display: grid;
    grid-template-columns: 50px 1fr auto auto;
    gap: 14px;
    align-items: center;
    padding: 10px 14px;
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    transition: border-color 0.2s, transform 0.2s;
}
.aff-lb-rest-row:hover {
    border-color: rgba(20, 184, 166, 0.2);
    transform: translateX(2px);
}
.aff-lb-rest-rank {
    font-family: 'Orbitron', sans-serif;
    color: var(--text-muted);
    font-size: 0.86rem;
    font-weight: 700;
}
.aff-lb-rest-name {
    font-family: 'JetBrains Mono', monospace;
    color: var(--text);
    font-size: 0.86rem;
    font-weight: 600;
}
.aff-lb-rest-meta {
    color: var(--text-muted);
    font-size: 0.76rem;
}
.aff-lb-rest-amount {
    font-family: 'Orbitron', sans-serif;
    color: var(--accent-light);
    font-size: 0.95rem;
    font-weight: 700;
}
.aff-lb-footer {
    margin-top: 16px;
    text-align: center;
    color: var(--text-dim);
    font-size: 0.74rem;
    position: relative;
    z-index: 1;
}

/* Monthly top-3 cash prize callout */
.aff-lb-prizes {
    margin-top: 22px;
    padding: 18px 20px 16px;
    background: linear-gradient(135deg,
        rgba(245, 158, 11, 0.10),
        rgba(15, 23, 42, 0.55));
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: 12px;
    position: relative;
    z-index: 1;
}
.aff-lb-prizes-title {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    color: #fbbf24;
    font-size: 0.86rem;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.aff-lb-prizes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 10px;
}
.aff-lb-prize {
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 12px 10px 10px;
    text-align: center;
}
.aff-lb-prize.aff-lb-prize-1 { border-color: rgba(245, 158, 11, 0.45); background: linear-gradient(165deg, rgba(245, 158, 11, 0.10), rgba(15, 23, 42, 0.55)); }
.aff-lb-prize.aff-lb-prize-2 { border-color: rgba(203, 213, 225, 0.28); }
.aff-lb-prize.aff-lb-prize-3 { border-color: rgba(217, 119, 6, 0.32); }
.aff-lb-prize-rank {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 1px;
}
.aff-lb-prize-amount {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--accent-light);
    margin: 4px 0 2px;
}
.aff-lb-prize.aff-lb-prize-1 .aff-lb-prize-amount {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.aff-lb-prize-extra {
    color: var(--text-muted);
    font-size: 0.72rem;
    line-height: 1.3;
}
.aff-lb-prizes-note {
    font-size: 0.74rem;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.4;
}
@media (max-width: 540px) {
    .aff-lb-prizes-grid { grid-template-columns: 1fr; gap: 6px; }
    .aff-lb-prize { display: grid; grid-template-columns: 50px 1fr; text-align: left; gap: 10px; align-items: center; padding: 10px; }
    .aff-lb-prize-rank { grid-column: 1; }
    .aff-lb-prize-amount, .aff-lb-prize-extra { grid-column: 2; margin: 0; }
}

/* Achievement reward chip */


.aff-achievement.locked .aff-achievement-reward {
    background: rgba(148, 163, 184, 0.06);
    border-color: rgba(148, 163, 184, 0.15);
    color: var(--text-dim);
}

/* Achievements section header tweaks */



@media (max-width: 640px) {
    .aff-leaderboard { padding: 20px 16px 14px; }
    .aff-lb-header { flex-direction: column; }
    .aff-lb-program-stats { width: 100%; }
    .aff-lb-stat { flex: 1; text-align: center; }
    .aff-lb-podium { grid-template-columns: 1fr; gap: 8px; }
    .aff-lb-podium-card { transform: none !important; padding: 14px; }
    
    .aff-lb-rest-row { grid-template-columns: 40px 1fr auto; gap: 10px; padding: 9px 12px; }
    .aff-lb-rest-meta { display: none; }
}

/* ─────────────────────────────────────────────────────────────────
   FREQUENTLY BOUGHT TOGETHER (product page bundle widget)
   ───────────────────────────────────────────────────────────────── */
.pp-fbt-card {
    background: linear-gradient(165deg,
        rgba(15, 23, 42, 0.55),
        rgba(20, 184, 166, 0.06));
    border: 1px solid rgba(20, 184, 166, 0.22);
    border-radius: 16px;
    padding: 22px 24px 24px;
    backdrop-filter: blur(8px);
    position: relative;
    overflow: hidden;
}
.pp-fbt-card::before {
    content: '';
    position: absolute;
    top: -40%; right: -10%;
    width: 280px; height: 280px;
    background: radial-gradient(circle, rgba(20, 184, 166, 0.15), transparent 70%);
    pointer-events: none;
}
.pp-fbt-row {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 22px;
    position: relative;
    z-index: 1;
}
.pp-fbt-item {
    flex: 1 1 160px;
    max-width: 200px;
    background: rgba(15, 23, 42, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 14px 12px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
    cursor: pointer;
    transition: all 0.2s;
}
.pp-fbt-item:hover {
    border-color: rgba(20, 184, 166, 0.3);
    transform: translateY(-2px);
}
.pp-fbt-item.is-current {
    background: rgba(20, 184, 166, 0.06);
    border-color: rgba(20, 184, 166, 0.32);
}
.pp-fbt-item.pp-fbt-deselected {
    opacity: 0.4;
    filter: grayscale(0.6);
}
.pp-fbt-check {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
    cursor: pointer;
    z-index: 2;
}
.pp-fbt-check:disabled { cursor: default; opacity: 0.7; }
.pp-fbt-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    background: rgba(15, 23, 42, 0.6);
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.2s;
}
.pp-fbt-thumb:hover { transform: scale(1.04); }
.pp-fbt-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
    filter: var(--cy-vial-shift, none);
}
.pp-fbt-name {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--text);
    text-align: center;
    line-height: 1.3;
}
.pp-fbt-this {
    color: var(--accent-light);
    font-weight: 500;
    font-size: 0.78rem;
}
.pp-fbt-price {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--accent-light);
}
.pp-fbt-plus {
    align-self: center;
    font-family: 'Orbitron', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-muted);
    padding: 0 4px;
    user-select: none;
}
.pp-fbt-summary {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: center;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
    z-index: 1;
}
.pp-fbt-totals {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.pp-fbt-total-line {
    display: flex;
    justify-content: space-between;
    color: var(--text-muted);
    font-size: 0.86rem;
    gap: 16px;
}
.pp-fbt-total-line span:last-child {
    font-family: 'JetBrains Mono', monospace;
    color: var(--text);
    font-weight: 500;
}
.pp-fbt-savings span:last-child {
    color: #22c55e;
    font-weight: 700;
}
.pp-fbt-total {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
}
.pp-fbt-total span:first-child {
    color: var(--text);
    font-weight: 600;
}
.pp-fbt-total span:last-child {
    font-family: 'Orbitron', sans-serif !important;
    color: var(--accent-light) !important;
    font-size: 1.15rem;
    font-weight: 800 !important;
}
.pp-fbt-cta {
    background: linear-gradient(135deg, var(--accent), var(--teal));
    color: #0a1628;
    border: none;
    padding: 14px 26px;
    border-radius: 12px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
    box-shadow: 0 6px 20px rgba(20, 184, 166, 0.32);
    white-space: nowrap;
}
.pp-fbt-cta:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(20, 184, 166, 0.45);
}
.pp-fbt-cta:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}
.pp-fbt-cta.pp-fbt-cta-done {
    background: linear-gradient(135deg, #22c55e, #10b981);
    color: #fff;
}
@media (max-width: 720px) {
    .pp-fbt-row { gap: 6px; }
    .pp-fbt-item { flex: 1 1 calc(33.333% - 24px); max-width: none; padding: 12px 8px 10px; }
    .pp-fbt-plus { font-size: 1.1rem; }
    .pp-fbt-name { font-size: 0.76rem; }
    .pp-fbt-price { font-size: 0.84rem; }
    .pp-fbt-summary {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .pp-fbt-cta {
        width: 100%;
        justify-content: center;
        padding: 14px;
    }
}

/* ─────────────────────────────────────────────────────────────────
   STICKY MOBILE ADD-TO-CART BAR (product page)
   Bottom-fixed bar that slides in once the main CTA scrolls offscreen.
   Mobile-only — desktop has the sidebar always visible.
   ───────────────────────────────────────────────────────────────── */
.pp-sticky-cart {
    display: none; /* shown on mobile via media query */
}
@media (max-width: 880px) {
    .pp-sticky-cart {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 950; /* below cart drawer (1100), above content */
        align-items: center;
        gap: 10px;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
        background: linear-gradient(180deg,
            rgba(8, 14, 28, 0.92),
            rgba(13, 21, 38, 0.98));
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border-top: 1px solid rgba(20, 184, 166, 0.22);
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.45);
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        pointer-events: none;
    }
    .pp-sticky-cart.visible {
        transform: translateY(0);
        pointer-events: auto;
    }
    .pp-sticky-thumb {
        flex: 0 0 auto;
        width: 44px;
        height: 44px;
        border-radius: 8px;
        overflow: hidden;
        background: rgba(15, 23, 42, 0.6);
        border: 1px solid rgba(255, 255, 255, 0.06);
    }
    .pp-sticky-thumb img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: 4px;
        filter: var(--cy-vial-shift, none);
    }
    .pp-sticky-info {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 2px;
    }
    .pp-sticky-name {
        font-size: 0.78rem;
        font-weight: 600;
        color: var(--text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.2;
    }
    .pp-sticky-price {
        font-family: 'Orbitron', sans-serif;
        font-size: 0.92rem;
        font-weight: 700;
        color: var(--accent-light);
        line-height: 1;
    }
    .pp-sticky-qty {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 0;
        background: rgba(15, 23, 42, 0.55);
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: 8px;
        overflow: hidden;
    }
    .pp-sticky-qty button {
        background: transparent;
        border: none;
        color: var(--text);
        width: 30px;
        height: 36px;
        font-size: 1.1rem;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: background 0.15s;
    }
    .pp-sticky-qty button:hover { background: rgba(20, 184, 166, 0.12); }
    .pp-sticky-qty span {
        min-width: 22px;
        text-align: center;
        font-family: 'JetBrains Mono', monospace;
        color: var(--text);
        font-weight: 600;
        font-size: 0.86rem;
    }
    .pp-sticky-btn {
        flex: 0 0 auto;
        background: linear-gradient(135deg, var(--accent), var(--teal));
        color: #0a1628;
        border: none;
        padding: 10px 18px;
        border-radius: 8px;
        font-family: 'Inter', sans-serif;
        font-size: 0.86rem;
        font-weight: 700;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        white-space: nowrap;
        box-shadow: 0 4px 14px rgba(20, 184, 166, 0.32);
        transition: transform 0.15s, box-shadow 0.15s;
    }
    .pp-sticky-btn:hover:not(:disabled) {
        transform: translateY(-1px);
        box-shadow: 0 6px 18px rgba(20, 184, 166, 0.45);
    }
    .pp-sticky-btn.pp-sticky-notify {
        background: rgba(148, 163, 184, 0.18);
        color: var(--text-muted);
        cursor: not-allowed;
        box-shadow: none;
    }
    /* Pad the bottom of the page so content isn't hidden behind the bar */
    .pp-page { padding-bottom: 90px !important; }
}

/* ═════════════════════════════════════════════════════════════════════
   MOBILE FIXES — comprehensive pass
   Fixes catalog sticky wrap covering screen, cookie button visibility,
   text alignment, overflow issues, and other mobile-specific glitches.
   ═════════════════════════════════════════════════════════════════════ */

/* Body: prevent horizontal scroll on mobile (the #1 cause of misaligned content) */
@media (max-width: 768px) {
    html, body {
        overflow-x: hidden;
        max-width: 100vw;
    }
}

/* ─── Catalog toolbar — way more compact on mobile ─── */
@media (max-width: 768px) {
    .catalog-sticky-wrap {
        padding: 6px 0 4px !important;
        margin: 0 0 8px !important;
        border-radius: 0 !important;
    }
    /* Search + sort sit on the same row, search takes most space */
    .catalog-sticky-wrap .catalog-toolbar {
        display: flex !important;
        gap: 6px !important;
        margin-bottom: 6px !important;
        padding: 0 8px !important;
        flex-wrap: nowrap !important;
    }
    .catalog-sticky-wrap .product-search {
        flex: 1 1 auto;
        min-width: 0;
        margin: 0 !important;
    }
    .catalog-sticky-wrap .sort-dropdown {
        flex: 0 0 auto;
    }
    .catalog-sticky-wrap .sort-dropdown select {
        padding: 8px 26px 8px 10px !important;
        font-size: 0.78rem !important;
        max-width: 110px;
    }
    .catalog-sticky-wrap .product-search input {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        font-size: 0.88rem !important;
    }
    /* Filter buttons: horizontal scroll instead of wrapping to 2 rows */
    .catalog-sticky-wrap .filter-bar {
        display: flex !important;
        gap: 6px !important;
        padding: 0 8px 2px !important;
        margin: 0 !important;
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .catalog-sticky-wrap .filter-bar::-webkit-scrollbar { display: none; }
    .catalog-sticky-wrap .filter-bar .filter-btn {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 6px 12px !important;
        font-size: 0.78rem !important;
    }
    /* Search autocomplete: cap height on mobile so it doesn't fill the screen */
    .search-autocomplete {
        max-height: 60vh !important;
    }
}

/* ─── Cookie consent: better visibility on mobile ─── */
@media (max-width: 768px) {
    .cookie-consent {
        padding: 12px 14px calc(12px + env(safe-area-inset-bottom)) !important;
        background: rgba(8, 14, 28, 0.98) !important;
        border-top: 1px solid rgba(20, 184, 166, 0.32) !important;
        backdrop-filter: blur(18px);
    }
    .cookie-content {
        gap: 10px !important;
    }
    .cookie-text {
        gap: 8px;
    }
    .cookie-text strong { font-size: 0.86rem !important; }
    .cookie-text p { font-size: 0.78rem !important; }
    /* Make all 3 cookie buttons clearly visible — no faded tertiary on mobile */
    .cookie-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }
    .cookie-actions .cookie-btn-tertiary {
        grid-column: 1 / -1; /* full-width second row */
        background: rgba(255, 255, 255, 0.05) !important;
        border-color: rgba(255, 255, 255, 0.12) !important;
        color: var(--text) !important;
        text-decoration: none !important;
        padding: 8px 14px !important;
        border-radius: 6px !important;
    }
    .cookie-actions .cookie-btn-secondary,
    .cookie-actions .cookie-btn-primary {
        padding: 10px 14px !important;
        font-size: 0.82rem !important;
        min-height: 42px;
    }
}

/* ─── Footer cookie button visibility ─── */
.footer-legal-links button.footer-link-btn {
    color: var(--text-muted);
    text-decoration: underline;
    text-decoration-color: rgba(20, 184, 166, 0.4);
    text-underline-offset: 3px;
    transition: color 0.2s;
}
.footer-legal-links button.footer-link-btn:hover {
    color: var(--accent-light);
}

/* ─── Sticky add-to-cart bar: only show on /product.html (defensive) ─── */
/* The sticky bar element only renders inside renderProductPage(), but if a
   browser back-cache restores it on a different page, this hides it. */
body:not(.has-product-page) .pp-sticky-cart {
    display: none !important;
}

/* ─── Social proof toast: cap height + ensure it doesn't stack on top of cookie banner ─── */
@media (max-width: 768px) {
    .social-proof-toast {
        bottom: 100px !important; /* lift above cookie banner */
        max-width: calc(100vw - 24px);
    }
    /* When cookie banner is dismissed, drop back down */
    body.cookies-dismissed .social-proof-toast {
        bottom: 12px !important;
    }
}

/* ─── Generic mobile alignment fixes ─── */
@media (max-width: 600px) {
    /* Section padding more reasonable on small screens */
    .section-header { padding: 0 6px; }
    /* Long product names shouldn't overflow */
    
    /* Stat numbers shouldn't break out of their containers */
    .stat-number, .admin-stat-value, .admin-kpi-value {
        word-break: break-all;
    }
    /* Buttons in long rows should stay on one line where possible */
    .btn-primary, .btn-outline {
        white-space: nowrap;
    }
    /* Tables that overflow get horizontal scroll containers automatically */
    .legal-content table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
}

/* ─── Hero stats / numbers mobile fix ─── */
@media (max-width: 540px) {
    .about-stats {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .about-stats .stat {
        text-align: left;
        padding: 12px 14px;
    }
    .stat-number {
        font-size: 1.6rem !important;
    }
}

/* ─── Trust marquee shouldn't cause horizontal scroll ─── */
@media (max-width: 768px) {
    .trust-marquee {
        max-width: 100vw;
        overflow: hidden;
    }
    .tm-item {
        font-size: 0.7rem !important;
    }
}

/* ═════════════════════════════════════════════════════════════════════
   MOBILE FIXES — round 2 (deep audit pass)
   Targets: hero stacking, why grid, bestsellers grid, testimonials grid,
   newsletter form, cart drawer forms, checkout, affiliate header/stats,
   product page sticky behavior, tap-target sizing.
   ═════════════════════════════════════════════════════════════════════ */

/* ─── Hero section ─── */
@media (max-width: 600px) {
    .hero-cta {
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }
    .hero-cta .btn-primary,
    .hero-cta .btn-outline {
        width: 100%;
        justify-content: center;
    }
    .hero-vial-main {
        max-height: 220px !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain;
    }
    .hero-vial-secondary { display: none !important; }
    .hero-visual {
        max-height: 240px;
        overflow: visible;
    }
    
    
    .hero-discount-callout { font-size: 0.84rem; padding: 10px 14px; }
}

/* ─── "Why" section: 4-col grid was squeezed at <768px ─── */
@media (max-width: 768px) {
    .why-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
    }
}
@media (max-width: 480px) {
    .why-grid { grid-template-columns: 1fr !important; }
}

/* ─── Bestsellers grid: stack to 1-col earlier ─── */
@media (max-width: 600px) {
    .bestsellers-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
}

/* ─── Testimonials: stack at tablet sizes ─── */
@media (max-width: 768px) {
    .testimonials-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
}

/* ─── Newsletter form: input + button shouldn't squeeze ─── */
@media (max-width: 600px) {
    .newsletter-input-group {
        flex-direction: column;
        gap: 10px;
    }
    .newsletter-input-group input {
        min-width: 0 !important;
        width: 100%;
    }
    .newsletter-input-group .btn-primary {
        width: 100%;
        justify-content: center;
    }
}

/* ─── How section: kill extra connector padding on mobile ─── */


/* ─── Cart drawer: forms shouldn't stay 2-col on mobile ─── */
@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
}

/* ─── Cart footer: ensure proper tap target ─── */
@media (max-width: 600px) {
    .cart-footer .btn-checkout,
    .cart-footer button {
        min-height: 48px;
        padding: 12px 24px !important;
        font-size: 0.95rem !important;
    }
}

/* ─── Checkout: 3-col row tablet behavior + summary padding ─── */
@media (max-width: 768px) {
    .checkout-step-content .form-row.form-row-3col {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
}
@media (max-width: 480px) {
    .checkout-step-content .form-row.form-row-3col {
        grid-template-columns: 1fr !important;
    }
    .checkout-summary {
        padding: 14px 14px !important;
        margin-bottom: 14px;
    }
    .summary-row {
        font-size: 0.86rem;
    }
}

/* ─── Affiliate dashboard: stack stats earlier + header column on phones ─── */



/* ─── Product page: stop sticky image jump on tablet ─── */
@media (max-width: 880px) {
    .pp-image-col {
        position: static !important;
        height: auto !important;
        top: auto !important;
    }
    .pp-image-wrap {
        max-height: 60vh;
    }
    .pp-image-wrap img,
    .pp-vial-img {
        max-height: 50vh !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain;
    }
}

/* ─── Tap target minimums (WCAG/iOS) ─── */
@media (max-width: 600px) {
    button, .btn-primary, .btn-outline,
    .nav-icon-btn, .filter-btn,
    a.btn-primary, a.btn-outline {
        min-height: 44px;
    }
    /* Inputs should also be tap-friendly */
    input[type="text"], input[type="email"], input[type="tel"],
    input[type="password"], input[type="search"], textarea, select {
        min-height: 44px;
        font-size: 16px !important; /* prevents iOS auto-zoom on focus */
    }
}

/* ─── Hero trust block: keep on one row when possible, otherwise stack vertically not 2x2 ─── */
@media (max-width: 880px) and (min-width: 521px) {
    .hero-trust .trust-item {
        font-size: 0.62rem;
        letter-spacing: 0.8px;
        padding: 10px 8px;
    }
}
@media (max-width: 520px) {
    .hero-trust { flex-direction: column !important; }
    .hero-trust .trust-item {
        font-size: 0.7rem;
        white-space: normal !important; /* allow wrap on tiny screens */
        border-right: none !important;
        border-bottom: 1px solid var(--cy-line);
        padding: 12px 14px;
    }
    .hero-trust .trust-item:last-child { border-bottom: none; }
}


/* ============================================================
   ▓▓▓ MAY 2026 REFINEMENT PASS v2 ▓▓▓
   7 visible upgrades that keep dark mode + Orbitron + teal accent
   but strip the "rough" cyberpunk treatment from cards, buttons,
   badges, and image areas. Aim: same brand, more premium feel.
   Order in this block: #1 clip-path -> #2 image tints ->
   #3 pill CTAs -> #4 card padding -> #5 vial ground shadow ->
   #6 synonym pills (re-added, outlined) -> #7 typography.
   ============================================================ */

/* ----------------------------------------------------------------
   #1 — Drop clip-path angles from cards / buttons / badges
   Keep clip-path ONLY on form inputs (signature, already softened
   to 4px). Cards + buttons get clean rounded corners instead.
---------------------------------------------------------------- */
.product-card,
.stack-card,
.bestseller-card,
.why-card,
.testimonial-card,
.coa-card,
.aff-signup-card,
.protocol-card,
.modal-content,
.pp-image-wrap,
.product-card-badge,
.stack-card-badge,
.stack-savings-badge,
.pp-badge,
.btn-primary,
.btn-outline,
.btn-large,
.btn-checkout,
.product-add-btn,
.pp-add-btn,
.pp-coa-btn,
.aff-signup-cta,
.cab-cta,
.cap-cta {
    clip-path: none !important;
}
.product-card,
.stack-card,
.bestseller-card,
.why-card,
.testimonial-card,
.coa-card,
.aff-signup-card,
.protocol-card,
.modal-content {
    border-radius: 18px !important;
}

/* ----------------------------------------------------------------
   #2 — Per-category accent tint on the product image area
   Each product gets its own subtle "stage color" radiating from
   the vial base — teal for peptides, amber for blends, indigo for
   supplies. Same dark mode, but cards no longer look identical.
---------------------------------------------------------------- */
.product-card[data-category="peptide"] .product-image {
    background:
        radial-gradient(ellipse 80% 65% at 50% 70%,
            rgba(20, 184, 166, 0.20) 0%,
            rgba(20, 184, 166, 0.06) 40%,
            #050b18 90%) !important;
}
.product-card[data-category="blend"] .product-image {
    background:
        radial-gradient(ellipse 80% 65% at 50% 70%,
            rgba(251, 191, 36, 0.20) 0%,
            rgba(251, 191, 36, 0.06) 40%,
            #050b18 90%) !important;
}
.product-card[data-category="supply"] .product-image {
    background:
        radial-gradient(ellipse 80% 65% at 50% 70%,
            rgba(99, 102, 241, 0.20) 0%,
            rgba(99, 102, 241, 0.06) 40%,
            #050b18 90%) !important;
}

/* ----------------------------------------------------------------
   #3 — Bigger softer pill CTAs (no gradient, no angles)
   Primary buttons become large rounded pills with solid teal fill
   and dark text — Amino's "View Research" treatment. Outline buttons
   match the pill shape with light border.
---------------------------------------------------------------- */
.btn-primary,
.btn-large,
.btn-checkout {
    background: var(--accent) !important;
    color: #0a1628 !important;
    border-radius: 999px !important;
    border: none !important;
    padding: 14px 32px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    text-transform: none !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28) !important;
    transition: background 0.18s, transform 0.18s, box-shadow 0.18s !important;
}
.btn-primary::before {
    /* Kill the shimmer overlay on buttons — same cleanup as announcement bar */
    content: none !important;
}
.btn-primary:hover,
.btn-large:hover,
.btn-checkout:hover {
    background: var(--cy-cyan-bright) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.36) !important;
    filter: none !important;
}
.btn-outline {
    border-radius: 999px !important;
    padding: 14px 28px !important;
    border: 1.5px solid rgba(255, 255, 255, 0.18) !important;
    background: transparent !important;
    color: var(--text) !important;
}
.btn-outline:hover {
    border-color: var(--accent) !important;
    background: rgba(20, 184, 166, 0.05) !important;
    color: var(--accent) !important;
}
/* Product page Add to Cart matches the pill style */
.pp-add-btn {
    border-radius: 999px !important;
    padding: 16px 28px !important;
}
/* Affiliate signup CTA — re-pin pill style since it's a custom button */
.aff-signup-cta {
    border-radius: 999px !important;
    padding: 18px 28px !important;
}

/* ----------------------------------------------------------------
   #4 — More padding inside product cards (breathing room)
   The info section below the vial picks up more vertical air so
   the price/name/CTA don't crash into each other.
---------------------------------------------------------------- */
/* DEAD: all 4 selectors below are at specificity 0,2,0 — overridden by
   `html body ...` at 0,2,2 later in the file. Properties shown here are
   fully replaced. Kept commented for traceability (Task 4 audit).
.product-card .product-info {
    padding: 22px 20px 24px !important;
}
.product-card .product-name { margin-bottom: 6px !important; }
.product-card .product-dosage { margin-bottom: 12px !important; }
.product-card .product-rating { margin-bottom: 14px !important; }
*/

/* ----------------------------------------------------------------
   #5 — Subtle ground shadow under vials
   Replace the teal halo on vial images with a horizontal ground
   shadow at the base — gives the "sitting on a surface" feel
   instead of "floating in space with green LED."
---------------------------------------------------------------- */
img[src*="retatrutide"],
img[src*="glow"],
img[src*="igf-1-lr3"],
img[src*="cjc-1295"],
img[src*="mt-2"],
img[src*="ghk-cu"],
img[src*="mots-c"],
img[src*="tb-500"],
img[src*="bpc-157"],
img[src*="semax"],
img[src*="selank"],
img[src*="dsip"],
img[src*="pinealon"],
img[src*="oxytocin"],
img[src*="hcg"],
img[src*="glutathione"],
img[src*="bac-water"] {
    /* Was: teal halo + ambient shadow. Now: brand hue-shift + ground
       shadow only (heavy bottom + softer ambient). */
    filter:
        var(--cy-vial-shift)
        drop-shadow(0 22px 16px rgba(0, 0, 0, 0.55))
        drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35))
        !important;
}

/* ----------------------------------------------------------------
   #6 — Outlined synonym pills on product page (light border, no fill)
   Old version had teal-tinted fill. New version: transparent fill,
   1px light border, smaller font, no glow — quietly informative.
---------------------------------------------------------------- */
.pp-synonyms {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 22px;
}
.pp-synonym-pill {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 500;
    padding: 6px 14px;
    border-radius: 999px;
    line-height: 1.3;
    white-space: nowrap;
    letter-spacing: 0.2px;
    font-family: 'Inter', sans-serif;
    transition: border-color 0.18s, color 0.18s;
}
.pp-synonym-pill:hover {
    border-color: rgba(20, 184, 166, 0.5);
    color: var(--accent);
}

/* ----------------------------------------------------------------
   #7 — Bigger / heavier product names + lighter subtitles
   Product names on cards bump up significantly; dosage line becomes
   smaller / muted / letter-spaced caps. Product page H1 goes huge.
---------------------------------------------------------------- */
.product-card .product-name {
    font-size: 1.08rem !important;
    font-weight: 800 !important;
    line-height: 1.22 !important;
    letter-spacing: 0.2px !important;
    color: var(--text) !important;
}
.product-card .product-dosage {
    font-size: 0.72rem !important;
    color: var(--text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    font-weight: 600 !important;
}
.pp-name {
    font-size: clamp(2rem, 4.8vw, 3rem) !important;
    font-weight: 800 !important;
    letter-spacing: 0.2px !important;
    line-height: 1.1 !important;
}
.pp-dosage {
    font-size: 0.82rem !important;
    color: var(--text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    font-weight: 600 !important;
    font-style: normal !important;
}


/* ════════════════════════════════════════════════════════════════════════
   ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
   ░                                                                  ░
   ░   AMINO-CLONE THEME OVERHAUL (May 2026)                          ░
   ░   Full light/pastel premium remodel inspired by aminoclub.com    ░
   ░                                                                  ░
   ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░

   This override block replaces the entire dark / cyberpunk treatment with
   a light premium pharmacy aesthetic:

   • White / soft-cream backgrounds (was deep navy)
   • Black text + medium-gray secondary (was white + muted gray)
   • Pastel "stage" backgrounds per product (was dark with teal halo)
   • Solid black pill CTAs (was teal-gradient with clip-path angles)
   • Soft white card chrome (was dark cards with teal borders)
   • Inter sans throughout (was Orbitron-heavy)
   • Generous whitespace (was tighter)

   Scoped under :root + body so everything cascades. Original dark CSS
   remains untouched above — rollback by deleting this block.

   Backup tag: `pre-amino-clone` at commit 70abe29.
   ════════════════════════════════════════════════════════════════════════ */

/* =====================================================================
   1 — THEME PALETTE OVERRIDE
   Flip the core CSS variables. Everywhere the original CSS reads
   var(--text), var(--bg), var(--accent), etc., it'll get the
   light-theme values from here.
===================================================================== */
:root {
    /* Foundation */
    --bg: #fafafa;
    --bg-primary: #ffffff;
    --bg-soft: #f5f5f7;
    --card-bg: #ffffff;
    --gradient-card: #ffffff;

    /* Text */
    --text: #0a0a0a;
    --text-muted: #6b6b73;
    --text-dim: #a0a0a8;
    --text-secondary: #4a4a52;

    /* Accent (kept teal but used sparingly) */
    --accent: #14b8a6;
    --accent-light: #2dd4bf;
    --accent-dark: #0d9488;
    --accent-glow: rgba(20, 184, 166, 0.18);
    --gradient-accent: linear-gradient(135deg, #14b8a6, #0d9488);

    /* Borders + shadows (light-mode appropriate) */
    --border-light: rgba(0, 0, 0, 0.08);
    --border-medium: rgba(0, 0, 0, 0.12);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 18px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.10);
    --shadow-glow: 0 12px 32px rgba(0, 0, 0, 0.10);

    /* Cyber variables — neutralize for light mode */
    --cy-bg: #ffffff;
    --cy-bg-deep: #ffffff;
    --cy-surface-1: #ffffff;
    --cy-surface-2: #fafafa;
    --cy-line: rgba(0, 0, 0, 0.10);
    --cy-line-strong: rgba(0, 0, 0, 0.15);
    --cy-line-hot: rgba(20, 184, 166, 0.55);
    --cy-cyan: #14b8a6;
    --cy-cyan-bright: #0d9488;
    --cy-cyan-deep: #0a766f;
    --cy-glow-soft: 0 6px 18px rgba(0, 0, 0, 0.06);
    --cy-glow-mid: 0 10px 26px rgba(0, 0, 0, 0.10);

    /* Per-product pastel "stage" colors for vial backgrounds — driven by
       [data-category] for now; can refine to per-SKU later. */
    --pastel-lavender: #ECE6F5;
    --pastel-mint:     #E0EEDF;
    --pastel-sky:      #DDE7F0;
    --pastel-peach:    #F4E3D6;
    --pastel-cream:    #EEEAD6;
    --pastel-blush:    #F0DCDC;
}

/* =====================================================================
   2 — PAGE FOUNDATION
   Body + html + section / container backgrounds flipped to white-ish.
===================================================================== */
html, body {
    background: var(--bg) !important;
    color: var(--text) !important;
}
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}
.container { background: transparent !important; }
main, section,
.products-section, .hero, .bestsellers-section, .testimonials-section,
.newsletter-section, .about-section, .faq-section, .policies-section,
.contact-section, .value-props, .coa-section, .education-page,
.aff-page, .checkout-page, .compare-page, .bundles-page,
.pp-page, .order-page, .blog-page, .recently-viewed-section {
    background: var(--bg) !important;
}

/* Remove dark mode's animated/glow page backgrounds */
body::before, body::after,
main::before, main::after {
    display: none !important;
}

/* =====================================================================
   3 — TYPOGRAPHY
   Move from Orbitron-everywhere to Inter-by-default. Orbitron stays for
   the brand wordmark (logo) and a few prominent headings.
===================================================================== */
body, p, span, div, li, a, label, input, textarea, select, button {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    color: var(--text);
    letter-spacing: -0.01em;
}
/* Brand wordmark keeps Orbitron */
.logo-text, .logo-sub,
.nav-logo-text { font-family: 'Orbitron', sans-serif !important; }

/* Section titles — bigger, bolder, sharper */
.section-title {
    font-family: 'Inter', sans-serif !important;
    font-weight: 800 !important;
    color: var(--text) !important;
    letter-spacing: -0.02em !important;
}
.section-subtitle { color: var(--text-muted) !important; }
.section-badge {
    background: rgba(20, 184, 166, 0.08) !important;
    border: 1px solid rgba(20, 184, 166, 0.25) !important;
    color: var(--accent-dark) !important;
    font-family: 'Inter', sans-serif !important;
}

/* =====================================================================
   4 — NAVBAR + ANNOUNCEMENT BAR
   White navbar with dark text; announcement bar stays teal but
   simplified.
===================================================================== */
.navbar {
    background: rgba(255, 255, 255, 0.95) !important;
    border-bottom: 1px solid var(--border-light) !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}
.navbar.scrolled {
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}
.nav-logo-text, .nav-logo-text .logo-text {
    color: var(--text) !important;
}
.nav-logo-text .logo-sub { color: var(--accent-dark) !important; }
.nav-links a {
    color: var(--text-secondary) !important;
    font-weight: 500 !important;
    transition: color 0.18s !important;
}
.nav-links a:hover,
.nav-links a.active {
    color: var(--text) !important;
}
.nav-links a.active::after {
    background: var(--accent) !important;
}
.nav-dropdown-toggle {
    color: var(--text-secondary) !important;
}
.nav-dropdown-menu {
    background: #ffffff !important;
    border: 1px solid var(--border-light) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10) !important;
}
.nav-dd-item {
    color: var(--text) !important;
}
.nav-dd-item:hover {
    background: var(--bg-soft) !important;
    color: var(--text) !important;
}
.nav-dd-item.active { color: var(--accent-dark) !important; }
.nav-dd-item i { color: var(--accent) !important; }

/* User / wishlist / cart icons in navbar */
.user-btn, .wishlist-btn, .cart-btn {
    background: #ffffff !important;
    border: 1px solid var(--border-light) !important;
    color: var(--text) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}
.user-btn:hover, .wishlist-btn:hover, .cart-btn:hover {
    background: var(--bg-soft) !important;
    border-color: var(--accent) !important;
    color: var(--accent-dark) !important;
    transform: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}
.cart-count {
    background: var(--text) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 2px #ffffff !important;
}

/* Mobile menu hamburger */
.mobile-menu-btn { color: var(--text) !important; }
.mobile-menu { background: #ffffff !important; }
.mobile-menu a { color: var(--text) !important; }

/* Announcement bar — clean teal banner */
.announcement-bar {
    background: linear-gradient(90deg, #14b8a6, #0d9488) !important;
    color: #ffffff !important;
}
.announcement-bar strong { color: #ffffff !important; }
.announcement-content i { color: rgba(255,255,255,0.95) !important; }

/* =====================================================================
   5 — BUTTONS (Amino-style solid black pills)
   Primary = solid black pill, white text. Outline = white pill with
   thin black border. Hover = brightens / lifts slightly.
===================================================================== */
.btn-primary,
.btn-large,
.btn-checkout {
    background: #0a0a0a !important;
    color: #ffffff !important;
    border: 1px solid #0a0a0a !important;
    border-radius: 999px !important;
    padding: 14px 32px !important;
    font-weight: 600 !important;
    font-family: 'Inter', sans-serif !important;
    letter-spacing: 0.1px !important;
    text-transform: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    transition: background 0.18s, transform 0.18s, box-shadow 0.18s !important;
}
.btn-primary::before { content: none !important; }
.btn-primary:hover,
.btn-large:hover,
.btn-checkout:hover {
    background: #2a2a2a !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
    filter: none !important;
}
.btn-outline {
    background: #ffffff !important;
    color: var(--text) !important;
    border: 1.5px solid var(--text) !important;
    border-radius: 999px !important;
    padding: 14px 28px !important;
    font-weight: 600 !important;
}
.btn-outline:hover {
    background: var(--text) !important;
    color: #ffffff !important;
}

/* Product page Add to Cart */
.pp-add-btn {
    background: #0a0a0a !important;
    color: #ffffff !important;
    border-radius: 999px !important;
}
.pp-add-btn:hover { background: #2a2a2a !important; }

/* Secondary action: pp-coa-btn (View Certificate of Analysis) */
.pp-coa-btn {
    background: #ffffff !important;
    color: var(--text) !important;
    border: 1.5px solid var(--border-medium) !important;
    border-radius: 999px !important;
}
.pp-coa-btn:hover {
    border-color: var(--text) !important;
    color: var(--text) !important;
    background: var(--bg-soft) !important;
}

/* Affiliate signup CTA */
.aff-signup-cta {
    background: #0a0a0a !important;
    color: #ffffff !important;
    border-radius: 999px !important;
}
.aff-signup-cta:not(:disabled):hover {
    background: #2a2a2a !important;
    filter: none !important;
}

/* =====================================================================
   6 — CARDS (universal white card chrome)
===================================================================== */
.product-card,
.bestseller-card,
.stack-card,
.testimonial-card,
.coa-card,
.aff-signup-card,
.protocol-card,
.faq-item,
.why-card,
.value-prop-item,
.feature-card,
.policy-card {
    background: #ffffff !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.04) !important;
    color: var(--text) !important;
    clip-path: none !important;
}
.product-card::before, .product-card::after,
.stack-card::before, .stack-card::after {
    display: none !important;
}
.product-card:hover,
.bestseller-card:hover,
.stack-card:hover {
    border-color: rgba(0, 0, 0, 0.14) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 16px 40px rgba(0, 0, 0, 0.10) !important;
    transform: translateY(-3px) !important;
}

/* =====================================================================
   7 — PRODUCT CARDS (catalog) — Amino layout
   Pastel image area on top with vial, white info section below with
   black product name, gray subtitle, solid black pill CTA.
===================================================================== */
.product-card {
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}
/* DEAD: selector at 0,2,0 — `html body .product-card .product-info` at
   0,2,2 later in the file overrides both padding (now 16/16/22) and
   background (still white, set at L25103). Kept commented for trace.
.product-card .product-info {
    padding: 22px 22px 24px !important;
    background: #ffffff !important;
}
*/
.product-card .product-name {
    font-family: 'Inter', sans-serif !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: var(--text) !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em !important;
    margin-bottom: 4px !important;
    text-transform: none !important;
}
.product-card .product-dosage {
    font-size: 0.84rem !important;
    color: var(--text-muted) !important;
    font-style: italic !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    margin-bottom: 14px !important;
}
.product-card .product-rating {
    color: var(--text-muted) !important;
}
.product-card .product-rating .pp-stars,
.product-card .product-rating > span { color: var(--text-muted) !important; }
.product-card .product-rating i,
.product-card .product-rating .fa-star,
.product-card .product-rating .fa-star-half-alt { color: #f59e0b !important; }
.product-card .product-price-row { margin-top: 12px !important; }
.product-card .product-price-original {
    color: var(--text-muted) !important;
    text-decoration: line-through !important;
}
.product-card .product-price {
    color: var(--text) !important;
    font-weight: 800 !important;
    font-size: 1.15rem !important;
    font-family: 'Inter', sans-serif !important;
}

/* Product card image area — pastel per category, with rounded top */
.product-card .product-image {
    background: var(--pastel-lavender) !important;
    height: 280px !important;
    border-radius: 16px 16px 0 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: relative !important;
}
.product-card[data-category="peptide"] .product-image { background: var(--pastel-lavender) !important; }
.product-card[data-category="blend"]   .product-image { background: var(--pastel-peach) !important; }
.product-card[data-category="supply"]  .product-image { background: var(--pastel-sky) !important; }
/* Per-product overrides for visual variety (rotates pastels among same category) */
.product-card[data-product-id="BC10"]  .product-image { background: var(--pastel-mint) !important; }
.product-card[data-product-id="BT10"]  .product-image { background: var(--pastel-sky) !important; }
.product-card[data-product-id="CU100"] .product-image { background: var(--pastel-cream) !important; }
.product-card[data-product-id="ML10"]  .product-image { background: var(--pastel-blush) !important; }
.product-card[data-product-id="OT5"]   .product-image { background: var(--pastel-peach) !important; }
.product-card[data-product-id="MS40"]  .product-image { background: var(--pastel-mint) !important; }
.product-card[data-product-id="DS10"]  .product-image { background: var(--pastel-cream) !important; }
.product-card[data-product-id="XA10"]  .product-image { background: var(--pastel-sky) !important; }
.product-card[data-product-id="SK10"]  .product-image { background: var(--pastel-blush) !important; }
.product-card[data-product-id="PIN20"] .product-image { background: var(--pastel-peach) !important; }
.product-card[data-product-id="G5K"]   .product-image { background: var(--pastel-mint) !important; }
.product-card[data-product-id="IG1"]   .product-image { background: var(--pastel-cream) !important; }
.product-card[data-product-id="CJC5"]  .product-image { background: var(--pastel-peach) !important; }
.product-card[data-product-id="GTT"]   .product-image { background: var(--pastel-sky) !important; }
.product-card[data-product-id="GLOW70"] .product-image { background: var(--pastel-blush) !important; }
.product-card[data-product-id="RT20"]  .product-image { background: var(--pastel-lavender) !important; }
.product-card[data-product-id="BA30"]  .product-image { background: var(--pastel-mint) !important; }

/* Subtle floor under vial in image area */
.product-card .product-image::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 38%;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.06) 90%);
    pointer-events: none;
    z-index: 0;
}

/* Vial filter — remove brand teal halo on light background, use neutral
   ground shadow only. Keep the hue-shift so vials still read as teal. */
img[src*="retatrutide"], img[src*="glow"], img[src*="igf-1-lr3"],
img[src*="cjc-1295"], img[src*="mt-2"], img[src*="ghk-cu"],
img[src*="mots-c"], img[src*="tb-500"], img[src*="bpc-157"],
img[src*="semax"], img[src*="selank"], img[src*="dsip"],
img[src*="pinealon"], img[src*="oxytocin"], img[src*="hcg"],
img[src*="glutathione"], img[src*="bac-water"] {
    filter:
        var(--cy-vial-shift)
        drop-shadow(0 22px 18px rgba(0, 0, 0, 0.22))
        drop-shadow(0 8px 12px rgba(0, 0, 0, 0.14))
        !important;
}

/* Wishlist heart on product card */
.product-card .product-wishlist-btn {
    background: #ffffff !important;
    border: 1px solid var(--border-light) !important;
    color: var(--text-muted) !important;
}
.product-card .product-wishlist-btn:hover,
.product-card .product-wishlist-btn.active {
    color: #ef4444 !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
}

/* Add to cart button on product cards — Amino-style: full width below
   the price row, solid black pill */
.product-card .product-add-btn {
    background: #0a0a0a !important;
    color: #ffffff !important;
    border: none !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    transform: scale(1) !important;
}
.product-card:hover .product-add-btn {
    transform: scale(1.06) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18) !important;
}

/* Product card badges — small pastel pills */
.product-card-badge {
    background: rgba(0, 0, 0, 0.85) !important;
    color: #ffffff !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.62rem !important;
    letter-spacing: 0.8px !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 4px 10px !important;
    box-shadow: none !important;
    clip-path: none !important;
}
.product-card-badge.popular {
    background: rgba(245, 158, 11, 0.95) !important;
    color: #ffffff !important;
}
/* Discount % badge — red pill */
.product-card-badge[style*="ef4444"] {
    background: #ef4444 !important;
    color: #ffffff !important;
}

/* Hide the "X viewing" element on catalog cards — looks out of place
   on the cleaner light theme. (Old urgency badge.) */
.product-card .viewer-count,
.product-card .stock-urgency.fast {
    display: none !important;
}

/* =====================================================================
   8 — PRODUCT PAGE (Amino layout — white frame around image, huge
   black name, pill tabs, etc.)
===================================================================== */
.pp-page { background: var(--bg) !important; }
.pp-breadcrumb {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    color: var(--text-muted) !important;
}
.pp-breadcrumb a { color: var(--text-muted) !important; }
.pp-breadcrumb a:hover { color: var(--text) !important; }
.pp-breadcrumb .current { color: var(--text) !important; }

/* Image card — white frame with rounded corners, pastel inside */
.pp-image-wrap {
    background: var(--pastel-lavender) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 20px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 8px 32px rgba(0, 0, 0, 0.06) !important;
    clip-path: none !important;
}
.pp-image-wrap::before, .pp-image-wrap::after,
.pp-particle, .pp-drift, .pp-scan-line { display: none !important; }
.pp-image-wrap:hover {
    border-color: var(--border-medium) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06), 0 16px 44px rgba(0, 0, 0, 0.10) !important;
}
/* Match catalog per-product pastel for the image area */
body[data-pp-id="RT20"]  .pp-image-wrap { background: var(--pastel-lavender) !important; }
body[data-pp-id="BC10"]  .pp-image-wrap { background: var(--pastel-mint) !important; }
body[data-pp-id="BT10"]  .pp-image-wrap { background: var(--pastel-sky) !important; }
body[data-pp-id="CU100"] .pp-image-wrap { background: var(--pastel-cream) !important; }
body[data-pp-id="ML10"]  .pp-image-wrap { background: var(--pastel-blush) !important; }
body[data-pp-id="OT5"]   .pp-image-wrap { background: var(--pastel-peach) !important; }
body[data-pp-id="MS40"]  .pp-image-wrap { background: var(--pastel-mint) !important; }
body[data-pp-id="DS10"]  .pp-image-wrap { background: var(--pastel-cream) !important; }
body[data-pp-id="XA10"]  .pp-image-wrap { background: var(--pastel-sky) !important; }
body[data-pp-id="SK10"]  .pp-image-wrap { background: var(--pastel-blush) !important; }
body[data-pp-id="PIN20"] .pp-image-wrap { background: var(--pastel-peach) !important; }
body[data-pp-id="G5K"]   .pp-image-wrap { background: var(--pastel-mint) !important; }
body[data-pp-id="IG1"]   .pp-image-wrap { background: var(--pastel-cream) !important; }
body[data-pp-id="CJC5"]  .pp-image-wrap { background: var(--pastel-peach) !important; }
body[data-pp-id="GTT"]   .pp-image-wrap { background: var(--pastel-sky) !important; }
body[data-pp-id="GLOW70"] .pp-image-wrap { background: var(--pastel-blush) !important; }
body[data-pp-id="BA30"]  .pp-image-wrap { background: var(--pastel-mint) !important; }

/* Wishlist button on product page (the one above the vial) */
.pp-wish-btn {
    background: #ffffff !important;
    border: 1px solid var(--border-light) !important;
    color: var(--text-muted) !important;
}
.pp-wish-btn.active { color: #ef4444 !important; }

/* Thumbnail strip below image */
.pp-thumb {
    background: #ffffff !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 12px !important;
}
.pp-thumb.active { border-color: var(--text) !important; }
.pp-thumb-coa { background: #ffffff !important; color: var(--text) !important; }
.pp-thumb-coa-icon { color: var(--accent-dark) !important; }
.pp-thumb-coa-label { color: var(--text-muted) !important; }

/* Info column typography */
.pp-name {
    color: var(--text) !important;
    font-size: clamp(2.1rem, 5vw, 3.2rem) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.05 !important;
}
.pp-dosage {
    color: var(--text-muted) !important;
    font-size: 0.88rem !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-style: italic !important;
    font-weight: 400 !important;
}
/* Add a tiny italic "category descriptor" above the name treatment */
.pp-info .pp-dosage::before { content: ''; }

/* Synonym pills — light bordered outline (Amino style) */
.pp-synonym-pill {
    background: transparent !important;
    border: 1px solid var(--border-medium) !important;
    color: var(--text-muted) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.76rem !important;
    font-weight: 500 !important;
    padding: 6px 14px !important;
    border-radius: 999px !important;
}
.pp-synonym-pill:hover {
    border-color: var(--text) !important;
    color: var(--text) !important;
}

/* Description */
.pp-description {
    color: var(--text-secondary) !important;
    font-size: 0.95rem !important;
    line-height: 1.65 !important;
}

/* Badges row */
.pp-badge {
    border-radius: 999px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 600 !important;
    font-size: 0.74rem !important;
    padding: 4px 11px !important;
}
.pp-badge.ruo {
    background: rgba(239, 68, 68, 0.10) !important;
    color: #b91c1c !important;
    border: 1px solid rgba(239, 68, 68, 0.30) !important;
}
.pp-badge.bestseller {
    background: rgba(20, 184, 166, 0.10) !important;
    color: var(--accent-dark) !important;
    border: 1px solid rgba(20, 184, 166, 0.30) !important;
}
.pp-badge.low {
    background: rgba(245, 158, 11, 0.10) !important;
    color: #b45309 !important;
    border: 1px solid rgba(245, 158, 11, 0.30) !important;
}
.pp-badge.out {
    background: rgba(239, 68, 68, 0.10) !important;
    color: #b91c1c !important;
    border: 1px solid rgba(239, 68, 68, 0.30) !important;
}

/* Price row */
.pp-price-row {
    border-bottom: 1px solid var(--border-light) !important;
}
.pp-price-sale {
    color: var(--text) !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
}
.pp-price-original { color: var(--text-muted) !important; }
.pp-price-saving {
    background: rgba(34, 197, 94, 0.12) !important;
    color: #15803d !important;
}

/* Details grid */
.pp-details {
    background: var(--bg-soft) !important;
    border: 1px solid var(--border-light) !important;
}
.pp-detail-label { color: var(--text-muted) !important; }
.pp-detail-value { color: var(--text) !important; }

/* Bundle tier tiles */
.pp-tier-section-label { color: var(--text-muted) !important; }
.pp-tier-tile {
    background: #ffffff !important;
    border: 2px solid var(--border-light) !important;
    color: var(--text) !important;
}
.pp-tier-tile:hover {
    border-color: rgba(0, 0, 0, 0.20) !important;
    background: var(--bg-soft) !important;
}
.pp-tier-tile.is-active {
    background: var(--text) !important;
    border-color: var(--text) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15) !important;
}
.pp-tier-tile.is-active .pp-tier-label,
.pp-tier-tile.is-active .pp-tier-discount,
.pp-tier-tile.is-active .pp-tier-vials,
.pp-tier-tile.is-active .pp-tier-save { color: #ffffff !important; }
.pp-tier-vials { color: var(--text) !important; }
.pp-tier-label { color: var(--text) !important; }
.pp-tier-discount { color: var(--text-muted) !important; }
.pp-tier-save { color: #15803d !important; }
.pp-tier-badge.is-popular {
    background: var(--accent) !important;
    color: #ffffff !important;
}
.pp-tier-badge.is-best {
    background: #f97316 !important;
    color: #ffffff !important;
}

/* Qty selector — light pill */
.pp-qty {
    background: #ffffff !important;
    border: 1px solid var(--border-medium) !important;
    border-radius: 999px !important;
}
.pp-qty button {
    color: var(--text) !important;
    width: 44px !important;
    height: 48px !important;
}
.pp-qty button:hover { background: var(--bg-soft) !important; color: var(--text) !important; }
.pp-qty span { color: var(--text) !important; font-weight: 700 !important; }

/* Delivery callout */
.pp-delivery-callout {
    background: var(--bg-soft) !important;
    border: 1px solid var(--border-light) !important;
}
.pp-delivery-row, .pp-cutoff-row { color: var(--text-secondary) !important; }
.pp-delivery-row i, .pp-cutoff-row i { color: var(--accent-dark) !important; }
.pp-delivery-row strong { color: var(--text) !important; }
.pp-cutoff-row { border-top-color: var(--border-light) !important; }
.pp-cutoff-row strong { color: var(--accent-dark) !important; }

/* Protection callout (free shipment protection) */
.pp-protection-callout {
    background: rgba(34, 197, 94, 0.06) !important;
    border: 1px solid rgba(34, 197, 94, 0.30) !important;
}
.pp-protection-title { color: #15803d !important; }
.pp-protection-text { color: var(--text-secondary) !important; }

/* Trust strip (horizontal credentials row) */
.pp-trust {
    border-top: 1px solid var(--border-light) !important;
    border-bottom: 1px solid var(--border-light) !important;
}
.pp-trust-item { color: var(--text-muted) !important; }
.pp-trust-item i { color: var(--accent-dark) !important; }

/* RUO note */
.pp-ruo-note {
    background: rgba(239, 68, 68, 0.05) !important;
    border: 1px solid rgba(239, 68, 68, 0.20) !important;
    color: var(--text-muted) !important;
}
.pp-ruo-note i { color: #b91c1c !important; }

/* Meta row (X viewing) — hide on light theme (looks out of place) */
.pp-meta-row { display: none !important; }

/* =====================================================================
   9 — CATALOG TOOLBAR / FILTERS
===================================================================== */
.catalog-sticky-wrap {
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid var(--border-light) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}
.product-search input,
.sort-dropdown select {
    background: #ffffff !important;
    border: 1px solid var(--border-medium) !important;
    color: var(--text) !important;
    font-family: 'Inter', sans-serif !important;
    border-radius: 999px !important;
    clip-path: none !important;
    padding: 12px 18px 12px 44px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
.sort-dropdown select {
    padding: 12px 36px 12px 18px !important;
}
.product-search input::placeholder {
    color: var(--text-muted) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.product-search input:focus,
.sort-dropdown select:focus {
    border-color: var(--text) !important;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05) !important;
    background: #ffffff !important;
}
.product-search i { color: var(--text-muted) !important; }
.filter-btn {
    background: #ffffff !important;
    border: 1px solid var(--border-medium) !important;
    color: var(--text-secondary) !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 500 !important;
    border-radius: 999px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    padding: 10px 18px !important;
}
.filter-btn:hover {
    border-color: var(--text) !important;
    color: var(--text) !important;
}
.filter-btn.active {
    background: var(--text) !important;
    color: #ffffff !important;
    border-color: var(--text) !important;
}
.filter-btn .filter-count { color: inherit !important; opacity: 0.6 !important; }
.catalog-status {
    color: var(--text-muted) !important;
    font-family: 'Inter', sans-serif !important;
}

/* Products grid — Amino has more generous spacing */
.products-grid { gap: 28px !important; }

/* Curated stacks section on catalog */
.products-stacks-section {
    background: var(--bg-soft) !important;
    border: 1px solid var(--border-light) !important;
}
.products-stacks-title { color: var(--text) !important; }
.products-stacks-subtitle { color: var(--text-muted) !important; }
.products-stacks-link { color: var(--accent-dark) !important; }

/* =====================================================================
   10 — STACK CARDS (catalog bottom + bundles page)
===================================================================== */
.stack-card {
    background: #ffffff !important;
    background-image: none !important;
    border: 1px solid var(--border-light) !important;
}
.stack-card .product-info {
    background: #ffffff !important;
}
.stack-image { background: var(--bg-soft) !important; }
.stack-icon-glow { opacity: 0.06 !important; }
.stack-card-name { color: var(--text) !important; font-family: 'Inter', sans-serif !important; }
.stack-card-tagline { color: var(--text-muted) !important; }
.stack-item-chip {
    background: var(--bg-soft) !important;
    border: 1px solid var(--border-light) !important;
    color: var(--text-secondary) !important;
}
.stack-card-itemcount { color: var(--text-muted) !important; }
.product-price-original { color: var(--text-muted) !important; }
.product-price { color: var(--text) !important; }
.stack-card-savings {
    background: rgba(34, 197, 94, 0.10) !important;
    color: #15803d !important;
}
.stack-add-btn {
    background: #0a0a0a !important;
    color: #ffffff !important;
    border-radius: 999px !important;
}
.stack-add-btn:hover {
    background: #2a2a2a !important;
    filter: none !important;
}
.stack-details-link { color: var(--text-muted) !important; }
.stack-details-link:hover { color: var(--text) !important; }

/* =====================================================================
   11 — HERO (homepage)
===================================================================== */
.hero {
    background:
        radial-gradient(ellipse at top right, var(--pastel-lavender) 0%, transparent 50%),
        radial-gradient(ellipse at bottom left, var(--pastel-mint) 0%, transparent 50%),
        var(--bg) !important;
}




.hero-discount-callout {
    background: #ffffff !important;
    border: 1px solid var(--border-light) !important;
    color: var(--text) !important;
}
.hero-discount-callout strong { color: var(--accent-dark) !important; }

/* Trust marquee at top of hero */
.trust-marquee {
    background: var(--text) !important;
    color: #ffffff !important;
    border-bottom: none !important;
}
.tm-item { color: #ffffff !important; }
.tm-item i { color: var(--accent-light) !important; }
.tm-sep { color: rgba(255,255,255,0.30) !important; }

/* Value props section */
.value-props { background: var(--bg) !important; }



.value-prop-icon, .value-prop-item .icon { color: var(--accent-dark) !important; }

/* =====================================================================
   12 — BESTSELLERS / TESTIMONIALS / NEWSLETTER / FAQ / ABOUT
===================================================================== */
.bestseller-card .bs-image { background: var(--pastel-lavender) !important; }
.bestseller-card[data-category="blend"] .bs-image { background: var(--pastel-peach) !important; }
.bestseller-card[data-category="supply"] .bs-image { background: var(--pastel-sky) !important; }
.bs-name { color: var(--text) !important; font-family: 'Inter', sans-serif !important; }
.bs-price { color: var(--text) !important; }
.bs-cart-btn {
    background: #0a0a0a !important;
    color: #ffffff !important;
    border-radius: 50% !important;
}
.testimonial-card { background: #ffffff !important; }
.testimonial-text { color: var(--text) !important; }
.testimonial-name, .testimonial-product, .testimonial-author { color: var(--text-muted) !important; }
.testimonial-verified { color: var(--accent-dark) !important; }
.newsletter-section {
    background:
        radial-gradient(ellipse at center, var(--pastel-mint) 0%, transparent 60%),
        var(--bg-soft) !important;
}
.newsletter-section h2, .newsletter-title { color: var(--text) !important; }
.newsletter-section p { color: var(--text-secondary) !important; }
.newsletter-section input,
.newsletter-form input {
    background: #ffffff !important;
    border: 1px solid var(--border-medium) !important;
    color: var(--text) !important;
}

.faq-item, .faq-item .faq-question, .faq-item .faq-answer {
    background: #ffffff !important;
    color: var(--text) !important;
}
.faq-question { color: var(--text) !important; }
.faq-answer { color: var(--text-secondary) !important; }

.about-section,
.about-content { background: var(--bg) !important; }
.about-content h2, .about-content h3 { color: var(--text) !important; }
.about-content p { color: var(--text-secondary) !important; }
.about-policy-card,
.policy-card {
    background: #ffffff !important;
    border: 1px solid var(--border-light) !important;
}

/* =====================================================================
   13 — FORMS (Universal — checkout, contact, account, etc.)
===================================================================== */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="date"],
textarea,
select:not(.cookie-prefs select) {
    background: #ffffff !important;
    border: 1px solid var(--border-medium) !important;
    color: var(--text) !important;
    border-radius: 10px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.95rem !important;
    letter-spacing: 0 !important;
    padding: 12px 14px !important;
    clip-path: none !important;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
    border-color: var(--text) !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05) !important;
}
input::placeholder, textarea::placeholder {
    color: var(--text-muted) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    opacity: 0.7 !important;
}
label, .form-group label {
    color: var(--text) !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
}

/* =====================================================================
   14 — CHECKOUT PAGE
===================================================================== */
.checkout-page { background: var(--bg) !important; }
.checkout-page-header h1 { color: var(--text) !important; }
.back-link { color: var(--text-muted) !important; }
.back-link:hover { color: var(--text) !important; }
.checkout-steps { background: transparent !important; }
.checkout-steps .step {
    color: var(--text-muted) !important;
    background: transparent !important;
}
.checkout-steps .step span {
    background: #ffffff !important;
    border: 1px solid var(--border-medium) !important;
    color: var(--text) !important;
}
.checkout-steps .step.active { color: var(--text) !important; }
.checkout-steps .step.active span {
    background: var(--text) !important;
    color: #ffffff !important;
    border-color: var(--text) !important;
}
.checkout-steps .step.completed span {
    background: var(--accent) !important;
    color: #ffffff !important;
    border-color: var(--accent) !important;
}

.checkout-step-content {
    background: #ffffff !important;
    border: 1px solid var(--border-light) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05) !important;
}
.checkout-step-content h2 { color: var(--text) !important; }

.checkout-legal-box {
    background: var(--bg-soft) !important;
    border: 1px solid var(--border-light) !important;
}
.checkout-legal-box h4 { color: var(--text) !important; }
.checkout-legal-text { color: var(--text-secondary) !important; }
.checkout-legal-text strong { color: var(--text) !important; }
.checkout-legal-text li { color: var(--text-secondary) !important; }

.checkout-account-banner,
.checkout-protection-callout {
    background: rgba(20, 184, 166, 0.06) !important;
    border: 1px solid rgba(20, 184, 166, 0.25) !important;
}

.cab-headline { color: var(--text) !important; }
.cab-sub { color: var(--text-muted) !important; }
.cab-cta {
    background: var(--text) !important;
    color: #ffffff !important;
    border-radius: 999px !important;
}





.checkout-summary,
.checkout-review-items,
.checkout-review-item {
    color: var(--text) !important;
}
.summary-row { color: var(--text-secondary) !important; border-bottom-color: var(--border-light) !important; }
.summary-row.total { color: var(--text) !important; }

.checkout-signature canvas {
    background: #ffffff !important;
    border: 1px dashed var(--border-medium) !important;
}
.signature-actions .btn-sig {
    background: #ffffff !important;
    border: 1px solid var(--border-medium) !important;
    color: var(--text) !important;
}

.checkout-points-widget {
    background: var(--bg-soft) !important;
    border: 1px solid var(--border-light) !important;
}
.points-balance, .checkout-points-applied { color: var(--text-secondary) !important; }

/* Payment method tabs */
.payment-method-tab { color: var(--text-muted) !important; }
.payment-method-tab.active { color: var(--text) !important; border-bottom-color: var(--text) !important; }

/* =====================================================================
   15 — CART SIDEBAR + WISHLIST SIDEBAR
===================================================================== */
.cart-sidebar, .wishlist-sidebar {
    background: #ffffff !important;
    border-left: 1px solid var(--border-light) !important;
    color: var(--text) !important;
}
.cart-header, .wishlist-sidebar > div:first-child {
    background: #ffffff !important;
    border-bottom: 1px solid var(--border-light) !important;
    color: var(--text) !important;
}
.cart-header h3 { color: var(--text) !important; }
.cart-empty h3 { color: var(--text) !important; }
.cart-empty p { color: var(--text-muted) !important; }
.cart-empty-perks .cep-item { color: var(--text-muted) !important; }
.cart-empty-perks .cep-item i { color: var(--accent-dark) !important; }
.cart-pick { background: var(--bg-soft) !important; border: 1px solid var(--border-light) !important; }
.cart-pick-name, .cart-pick-price { color: var(--text) !important; }
.cart-pick-add { background: var(--text) !important; color: #ffffff !important; }
.cart-item {
    background: transparent !important;
    border-bottom: 1px solid var(--border-light) !important;
}
.cart-item-name, .cart-item-dosage, .cart-item-price { color: var(--text) !important; }
.cart-item-dosage { color: var(--text-muted) !important; }
.cart-item-price-original { color: var(--text-muted) !important; }
.cart-item-qty { background: #ffffff !important; border: 1px solid var(--border-medium) !important; }
.cart-item-qty button { color: var(--text) !important; }
.cart-item-qty span { color: var(--text) !important; }


.cart-footer { background: #ffffff !important; border-top: 1px solid var(--border-light) !important; }
.cart-subtotal, .cart-total, .cart-discount-row, .cart-shipping-row {
    color: var(--text) !important;
}
.cart-shipping-row { color: var(--text-secondary) !important; }
.cart-discount-row { color: var(--text-secondary) !important; }
.cart-savings-badge {
    background: rgba(34, 197, 94, 0.10) !important;
    color: #15803d !important;
    border: 1px solid rgba(34, 197, 94, 0.30) !important;
}
.cart-delivery-row {
    background: var(--bg-soft) !important;
    border: 1px solid var(--border-light) !important;
    color: var(--text-secondary) !important;
}
.cart-delivery-row strong { color: var(--text) !important; }
.cart-upsell {
    background: var(--bg-soft) !important;
    border: 1px solid var(--border-light) !important;
}
.cart-upsell-text { color: var(--text-secondary) !important; }
.cart-upsell-text strong { color: var(--text) !important; }
.free-shipping-bar { background: var(--border-light) !important; }
.free-shipping-progress { background: var(--accent) !important; }
.cart-upsell-product { background: #ffffff !important; border: 1px solid var(--border-light) !important; }
.upsell-name, .upsell-price { color: var(--text) !important; }
.upsell-add { background: var(--text) !important; color: #ffffff !important; }
.cart-account-prompt {
    background: var(--bg-soft) !important;
    border: 1px solid var(--border-light) !important;
}






.promo-toggle {
    color: var(--text) !important;
    background: rgba(20, 184, 166, 0.05) !important;
    border: 1px solid rgba(20, 184, 166, 0.22) !important;
    font-weight: 600 !important;
}
.promo-toggle:hover {
    background: rgba(20, 184, 166, 0.08) !important;
    border-color: rgba(20, 184, 166, 0.45) !important;
    color: var(--text) !important;
}
.promo-toggle i.fa-tag { color: #14b8a6 !important; }
.promo-toggle .promo-toggle-icon { color: var(--text-muted) !important; }
.promo-auto-applied {
    background: rgba(20, 184, 166, 0.08) !important;
    border: 1px solid rgba(20, 184, 166, 0.30) !important;
    color: var(--accent-dark) !important;
}
.btn-promo {
    background: var(--text) !important;
    color: #ffffff !important;
    border-radius: 999px !important;
}

/* =====================================================================
   16 — FOOTER
===================================================================== */
.footer, footer {
    background: var(--bg-soft) !important;
    color: var(--text-secondary) !important;
    border-top: 1px solid var(--border-light) !important;
}
.footer h3, .footer h4, .footer-section-title { color: var(--text) !important; }
.footer a { color: var(--text-secondary) !important; }
.footer a:hover { color: var(--text) !important; }
.footer-bottom { border-top-color: var(--border-light) !important; color: var(--text-muted) !important; }

/* =====================================================================
   17 — MODALS / POPUPS / TOASTS
===================================================================== */
.modal-overlay {
    background: rgba(15, 15, 18, 0.55) !important;
    backdrop-filter: blur(6px) !important;
}
.modal-content {
    background: #ffffff !important;
    border: 1px solid var(--border-light) !important;
    color: var(--text) !important;
    box-shadow: 0 16px 56px rgba(0, 0, 0, 0.18) !important;
}
.modal-close { color: var(--text) !important; background: transparent !important; }
.modal-name, h2#modal-name { color: var(--text) !important; }
.modal-description, .modal-dosage { color: var(--text-secondary) !important; }
.modal-badge {
    background: rgba(239, 68, 68, 0.10) !important;
    color: #b91c1c !important;
    border: 1px solid rgba(239, 68, 68, 0.30) !important;
}
.modal-details { color: var(--text) !important; }
.modal-details .detail-row { border-bottom-color: var(--border-light) !important; color: var(--text-secondary) !important; }
.modal-details .detail-row span:last-child { color: var(--text) !important; }
.modal-price-original { color: var(--text-muted) !important; }
.modal-price-sale { color: var(--text) !important; }
.modal-qty { background: var(--bg-soft) !important; border: 1px solid var(--border-medium) !important; }
.modal-qty button { color: var(--text) !important; }
.modal-image { background: var(--pastel-lavender) !important; border-radius: 16px !important; }

/* COA popup */
.coa-popup {
    background: #ffffff !important;
    border: 1px solid var(--border-light) !important;
    color: var(--text) !important;
}
.coa-popup-header { color: var(--text) !important; }
.coa-popup-row { color: var(--text-secondary) !important; }
.coa-popup-pass { color: #15803d !important; }
.coa-popup-link { color: var(--accent-dark) !important; }

/* Email popup */
.email-popup {
    background: #ffffff !important;
    border: 1px solid var(--border-light) !important;
    color: var(--text) !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12) !important;
}
.email-popup-text strong { color: var(--text) !important; }
.email-popup-text span { color: var(--text-muted) !important; }

/* Toast */
.toast {
    background: var(--text) !important;
    color: #ffffff !important;
}

/* =====================================================================
   18 — AFFILIATE PAGE
===================================================================== */
.aff-signup-card {
    background: #ffffff !important;
    border: 1px solid var(--border-light) !important;
}
.aff-signup-card::before { display: none !important; }
.aff-signup-header h2 { color: var(--text) !important; }
.aff-signup-sub { color: var(--text-muted) !important; }
.aff-signup-sub strong { color: var(--accent-dark) !important; }
.aff-signup-perk {
    background: var(--bg-soft) !important;
    border: 1px solid var(--border-light) !important;
}
.aff-signup-perk i { color: var(--accent-dark) !important; }
.aff-signup-perk strong { color: var(--text) !important; }
.aff-signup-perk span { color: var(--text-muted) !important; }
.aff-signup-label { color: var(--text-muted) !important; }
.aff-signup-form input.aff-signup-code-input {
    background: #ffffff !important;
    border: 2px solid var(--border-medium) !important;
    color: var(--text) !important;
}
.aff-signup-form input.aff-signup-code-input:focus {
    border-color: var(--text) !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(0,0,0,0.05) !important;
}
.aff-signup-form input.aff-signup-code-input::placeholder { color: var(--text-muted) !important; }
.aff-signup-hint { color: var(--text-muted) !important; }
.aff-signup-preview {
    background: var(--bg-soft) !important;
    border: 1px dashed var(--border-medium) !important;
}
.aff-signup-preview-label { color: var(--text-muted) !important; }
.aff-signup-preview-link { color: var(--text) !important; }
.aff-signup-preview-link strong { color: var(--accent-dark) !important; }
.aff-signup-footer-note { color: var(--text-muted) !important; }

/* Aff dashboard */
.aff-gate {
    background: #ffffff !important;
    border: 1px solid var(--border-light) !important;
    color: var(--text-secondary) !important;
}
.aff-gate h3 { color: var(--text) !important; }
.aff-gate i { color: var(--accent-dark) !important; }




/* =====================================================================
   19 — MISC: stock-urgency, viewer-count (hide), badges, dividers
===================================================================== */
.viewer-count { display: none !important; }
.stock-urgency.fast { display: none !important; }
.stock-urgency.critical,
.stock-urgency.low {
    background: rgba(239, 68, 68, 0.10) !important;
    color: #b91c1c !important;
    border: 1px solid rgba(239, 68, 68, 0.30) !important;
}
.stock-urgency.low {
    background: rgba(245, 158, 11, 0.10) !important;
    color: #b45309 !important;
    border-color: rgba(245, 158, 11, 0.30) !important;
}

/* Cookie banner */




/* Age gate */
.age-gate {
    background: rgba(15, 15, 18, 0.55) !important;
    backdrop-filter: blur(8px) !important;
}
.age-gate-content {
    background: #ffffff !important;
    border: 1px solid var(--border-light) !important;
    color: var(--text) !important;
    box-shadow: 0 24px 72px rgba(0, 0, 0, 0.20) !important;
}
.age-gate-content h2 { color: var(--text) !important; }
.age-gate-content p { color: var(--text-secondary) !important; }

/* Skip to main link */
.skip-to-main { background: var(--text) !important; color: #ffffff !important; }

/* =====================================================================
   20 — DARK MODE OVERRIDES THAT NEED EXPLICIT FORCING
   The original cyberpunk override section uses lots of !important
   declarations. These selectors get the final word.
===================================================================== */
body, html { color: var(--text) !important; }

/* Force any element that was using hardcoded dark backgrounds to read
   from our light theme variables. */
[class*="-card"]:not(.cart-account-prompt):not(.cart-empty-perks .cep-item) {
    color: var(--text);
}

/* Reset any aggressive dark-mode hover transforms */
*[class*="cyber-"]:hover,
*[class*="cy-"]:hover { box-shadow: none !important; }


/* ════════════════════════════════════════════════════════════════════════
   ░░░ AMINO-CLONE FIX PASS (round 2) ░░░
   The first override block worked for cards, forms, navbar, etc. — but
   several cyberpunk-specific selectors with !important were winning over
   it. This block uses higher-specificity selectors (with body prefix) to
   force the light theme on:
     • Hero title (text-stroke / gradient-clip → solid black)
     • Hero highlight (teal glow → plain dark text)
     • Trust marquee (dark navy gradient → solid black bar)
     • "Browse Catalog" / "View COAs" buttons that kept teal gradient
     • Bottom stat strip / value-props strip that stayed dark
   ════════════════════════════════════════════════════════════════════════ */

/* ── HERO TITLE: kill text-stroke, gradient-clip, and glow ── */



/* ── HERO body text on light ── */



/* ── HERO CTA buttons (the "Browse Catalog" / "View COAs" pair) ──
   These had cyberpunk-specific !important rules that beat the generic
   .btn-primary override. Re-pin with the hero-CTA selector chain. */
body .hero-cta .btn-primary,
body .hero-cta .btn-large,
body .hero-cta a.btn-primary,
body .hero-cta a.btn-large {
    background: #0a0a0a !important;
    color: #ffffff !important;
    border: 1px solid #0a0a0a !important;
    border-radius: 999px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    clip-path: none !important;
}
body .hero-cta .btn-primary:hover,
body .hero-cta .btn-large:hover {
    background: #2a2a2a !important;
    transform: translateY(-1px) !important;
}
body .hero-cta .btn-outline,
body .hero-cta a.btn-outline {
    background: #ffffff !important;
    color: var(--text) !important;
    border: 1.5px solid var(--text) !important;
    border-radius: 999px !important;
    clip-path: none !important;
}
body .hero-cta .btn-outline:hover {
    background: var(--text) !important;
    color: #ffffff !important;
}

/* ── TRUST MARQUEE: switched from solid black to subtle light strip
   (Amino doesn't use a dark marquee on the homepage; the dark bar broke
   the clean flow). Now a barely-tinted pastel strip with muted dark
   text + teal icons. ── */
body main > .trust-marquee,
body .trust-marquee {
    background: var(--bg-soft) !important;
    border-top: 1px solid var(--border-light) !important;
    border-bottom: 1px solid var(--border-light) !important;
    box-shadow: none !important;
    color: var(--text-muted) !important;
    padding: 10px 0 !important;
}
body .trust-marquee .tm-item {
    color: var(--text-muted) !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.6px !important;
}
body .trust-marquee .tm-item i {
    color: var(--accent-dark) !important;
}
body .trust-marquee .tm-sep {
    color: rgba(0, 0, 0, 0.15) !important;
}
body .trust-marquee::before {
    background: linear-gradient(90deg, var(--bg-soft) 0%, transparent 100%) !important;
}
body .trust-marquee::after {
    background: linear-gradient(90deg, transparent 0%, var(--bg-soft) 100%) !important;
}

/* ── HERO discount callout ("LAUNCH SPECIAL: Up to 20% off") ── */
body .hero-discount-callout {
    background: #ffffff !important;
    border: 1px solid var(--border-light) !important;
    color: var(--text) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}
body .hero-discount-callout strong { color: var(--accent-dark) !important; }
body .hero-discount-callout i { color: var(--accent-dark) !important; }

/* ── HERO mini stats / "no subscription / free shipping / save 35%" ── */
body .hero-mini-stats,
body .hero-meta-row,
body .hero-trust,
body .hero-perks {
    color: var(--text-muted) !important;
}
body .hero-mini-stats i,
body .hero-meta-row i,
body .hero-trust i,
body .hero-perks i {
    color: var(--accent-dark) !important;
}

/* ── HERO secondary text (any small line under the CTAs) ── */
body .hero p,
body .hero ul li,
body .hero .hero-features,
body .hero-features li {
    color: var(--text-secondary) !important;
}

/* ── BOTTOM STAT STRIP ("500+ ORDERS SHIPPED" etc) ──
   Switched from solid black bar to clean light card with subtle border
   that floats inside the hero area, matching Amino's clean-pharmacy
   aesthetic. ── */
body .hero-trust {
    background: #ffffff !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
    color: var(--text) !important;
    padding: 20px 28px !important;
    margin: 32px auto 0 !important;
    max-width: 1100px !important;
}
body .hero-trust .trust-item,
body .hero-trust .stat-item,
body .hero-trust .hero-trust-item {
    color: var(--text) !important;
    font-weight: 600 !important;
}
body .hero-trust .trust-item i,
body .hero-trust .stat-item i,
body .hero-trust .hero-trust-item i {
    color: var(--accent-dark) !important;
}

/* ── COOKIE BANNER ── */






/* ── Catch-all: any remaining background using the original dark vars ──
   This forces ANY element that's still pulling a dark background variable
   to render light. Last line of defense. */
.products-section,
.bestsellers-section,
.value-props,
.testimonials-section,
.newsletter-section,
.about-section,
.faq-section,
.contact-section,
.policies-section,
.coa-section,
.education-page,
.compare-page,
.bundles-page,
.aff-page,
.blog-page,
.protocol-page {
    background: var(--bg) !important;
    color: var(--text) !important;
}

/* Any catch-all dark backgrounds */
body .hero,
body .hero-section,
body main {
    background: var(--bg) !important;
    color: var(--text) !important;
}
body .hero {
    /* Keep the soft pastel gradient on hero */
    background:
        radial-gradient(ellipse at top right, var(--pastel-lavender) 0%, transparent 50%),
        radial-gradient(ellipse at bottom left, var(--pastel-mint) 0%, transparent 50%),
        var(--bg) !important;
}

/* ── Any value-prop / why-card grids that stayed dark ── */
body .why-card,
body .value-prop-item,
body .why-grid > * {
    background: #ffffff !important;
    border: 1px solid var(--border-light) !important;
    color: var(--text) !important;
}
body .why-card h3,
body .why-card-title,
body .value-prop-item h3,
body .value-prop-title { color: var(--text) !important; }
body .why-card p,
body .value-prop-item p,
body .value-prop-text { color: var(--text-muted) !important; }
body .why-card i,
body .value-prop-item i,
body .value-prop-icon { color: var(--accent-dark) !important; }

/* ── Bestsellers section ── */
body .bestsellers-section,
body .bestsellers-grid { background: var(--bg) !important; }
body .bestseller-card { background: #ffffff !important; color: var(--text) !important; }
body .bestseller-card .bs-name { color: var(--text) !important; }
body .bs-dosage,
body .bs-card-desc { color: var(--text-muted) !important; }

/* ── Testimonials section ── */
body .testimonials-section,
body .testimonials-track,
body .testimonials-grid { background: transparent !important; }
body .testimonial-card { background: #ffffff !important; color: var(--text) !important; border: 1px solid var(--border-light) !important; }

/* ── Footer ── */
body .footer,
body footer { background: var(--bg-soft) !important; color: var(--text-secondary) !important; border-top: 1px solid var(--border-light) !important; }
body .footer *:not(button):not(input):not(.footer-cta) { color: inherit; }
body .footer h3, body .footer h4, body .footer-section-title,
body .footer .logo-text, body .footer .logo-sub { color: var(--text) !important; }
body .footer a { color: var(--text-secondary) !important; }
body .footer a:hover { color: var(--text) !important; }
body .footer-bottom { border-top-color: var(--border-light) !important; color: var(--text-muted) !important; }

/* ── Skip link + age gate + any global dark backgrounds ── */
body .skip-to-main { background: #0a0a0a !important; color: #ffffff !important; }
body .age-gate { background: rgba(15, 15, 18, 0.55) !important; }
body .age-gate-content { background: #ffffff !important; color: var(--text) !important; border: 1px solid var(--border-light) !important; }
body .age-gate-content h2 { color: var(--text) !important; }
body .age-gate-content p,
body .age-gate-content label,
body .age-gate-content span:not(.checkmark) { color: var(--text-secondary) !important; }


/* ════════════════════════════════════════════════════════════════════════
   ░░░ AMINO-CLONE POLISH (round 3) ░░░
   Section flow + spacing + visual rhythm. Amino alternates between
   pure white and faint pastel/cream backgrounds between sections —
   gives each section its own room. Plus bigger section title typography.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Section vertical padding — generous breathing room ── */
body .products-section,
body .bestsellers-section,
body .value-props,
body .testimonials-section,
body .newsletter-section,
body .about-section,
body .faq-section,
body .why-section {
    padding: 96px 0 !important;
}
body .hero {
    padding: 64px 24px 80px !important;
}

/* ── Alternating section backgrounds (white -> cream -> white) ── */
body .hero { background: var(--bg) !important; }
body .bestsellers-section { background: var(--bg-soft) !important; }
body .value-props { background: var(--bg) !important; }
body .why-section { background: var(--bg-soft) !important; }
body .testimonials-section { background: var(--bg) !important; }
body .newsletter-section {
    background:
        radial-gradient(ellipse at center, rgba(20, 184, 166, 0.06) 0%, transparent 60%),
        var(--bg-soft) !important;
}

/* ── Section titles — much bigger / bolder (Amino treatment) ── */
body .section-title {
    font-family: 'Inter', -apple-system, sans-serif !important;
    font-size: clamp(1.8rem, 4.2vw, 2.8rem) !important;
    font-weight: 800 !important;
    color: var(--text) !important;
    letter-spacing: -0.02em !important;
    line-height: 1.1 !important;
}
body .section-subtitle {
    font-size: 1rem !important;
    color: var(--text-muted) !important;
    margin-top: 12px !important;
    max-width: 600px !important;
    line-height: 1.55 !important;
}
body .section-header { margin-bottom: 48px !important; }
body .section-badge {
    background: var(--bg-soft) !important;
    border: 1px solid var(--border-light) !important;
    color: var(--text-muted) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    letter-spacing: 1.2px !important;
}

/* ── Hero polish — make the right-side pastel area more defined ── */
body .hero {
    position: relative !important;
}
body .hero::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background:
        radial-gradient(ellipse 70% 70% at 30% 50%, var(--pastel-lavender) 0%, transparent 65%),
        radial-gradient(ellipse 60% 60% at 70% 70%, var(--pastel-mint) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}
body .hero > * { position: relative; z-index: 1; }
@media (max-width: 880px) {
    body .hero::before {
        width: 100%;
        height: 50%;
        top: 50%;
        opacity: 0.45;
    }
}

/* ── Hero title sizes (Amino uses gigantic confident type) ── */



/* ── Hero description ── */


/* ── Featured Products section header — left-aligned with right action ── */


/* ── Product card hover — subtle lift, no aggressive transforms ── */
body .product-card,
body .bestseller-card,
body .stack-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}
body .product-card:hover,
body .bestseller-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 24px 48px rgba(0, 0, 0, 0.06) !important;
}

/* ── Newsletter section refinement ── */
body .newsletter-section .section-title { color: var(--text) !important; }
body .newsletter-section p,
body .newsletter-section .section-subtitle { color: var(--text-secondary) !important; }
body .newsletter-form input {
    background: #ffffff !important;
    border: 1px solid var(--border-medium) !important;
    color: var(--text) !important;
    border-radius: 999px !important;
    padding: 14px 20px !important;
}
body .newsletter-form button,
body .newsletter-form .btn-primary {
    background: #0a0a0a !important;
    color: #ffffff !important;
    border-radius: 999px !important;
    padding: 14px 28px !important;
}

/* ── Testimonials cleanup ── */
body .testimonials-section .section-title { color: var(--text) !important; }
body .testimonial-card {
    background: #ffffff !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
    padding: 28px !important;
}
body .testimonial-text {
    color: var(--text) !important;
    font-size: 0.98rem !important;
    line-height: 1.65 !important;
    font-weight: 400 !important;
}

body .testimonial-product { color: var(--text-muted) !important; }
body .testimonial-verified {
    color: var(--accent-dark) !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
}

/* ── Why section ("Why choose Elytra Labs") ── */
body .why-section .section-title { color: var(--text) !important; }
body .why-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
    gap: 24px !important;
}
body .why-card {
    background: #ffffff !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 16px !important;
    padding: 32px 24px !important;
    text-align: center !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
    clip-path: none !important;
}
body .why-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06) !important;
    border-color: var(--border-medium) !important;
}
body .why-card-icon,
body .why-card i {
    color: var(--accent-dark) !important;
    font-size: 1.8rem !important;
    margin-bottom: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 56px !important;
    height: 56px !important;
    background: var(--bg-soft) !important;
    border-radius: 50% !important;
}
body .why-card h3,
body .why-card-title {
    color: var(--text) !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    margin-bottom: 10px !important;
}
body .why-card p,
body .why-card-text {
    color: var(--text-muted) !important;
    font-size: 0.9rem !important;
    line-height: 1.55 !important;
}

/* ── Value props (homepage section with the icon callouts) ── */




/* ── Footer polish ── */
body .footer {
    padding: 80px 0 32px !important;
    background: var(--bg-soft) !important;
}
body .footer h3,
body .footer h4 {
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    color: var(--text) !important;
    font-size: 0.9rem !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    margin-bottom: 18px !important;
}
body .footer-bottom {
    padding-top: 32px !important;
    margin-top: 56px !important;
    border-top: 1px solid var(--border-light) !important;
}

/* ── Catalog header treatment (Amino's "All Products" page) ── */
body .products-section {
    padding: 12px 0 80px !important;
}
body .products-section .section-header {
    text-align: center !important;
    margin: 0 auto 28px !important;
    max-width: 800px !important;
}
body .products-section .section-title {
    font-size: clamp(2rem, 4.5vw, 3rem) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    text-align: center !important;
}
body .products-section .section-subtitle {
    margin: 14px auto 0 !important;
    text-align: center !important;
    max-width: 640px !important;
}
html body .products-section .section-header .section-badge,
html body .products-section .section-badge {
    margin: 0 auto 44px !important;
    margin-top: 0 !important;
    margin-bottom: 44px !important;
}

/* ── Catalog toolbar — NO box wrap, pills sit directly on the page ── */
body .catalog-sticky-wrap {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 auto 36px !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    max-width: 900px !important;
}
body .catalog-sticky-wrap::before,
body .catalog-sticky-wrap::after {
    display: none !important;
}
body .catalog-sticky-wrap > .catalog-toolbar,
body .catalog-sticky-wrap > .filter-bar {
    margin: 0 !important;
    padding: 0 !important;
}
/* Toolbar row: search + Featured sort, centered, 16px gap */
body .catalog-sticky-wrap > .catalog-toolbar {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    margin-bottom: 24px !important;
}
/* Make the search pill wider so it feels like the main control.
   R203: at ≤600px the toolbar flips to column direction, so flex-basis
   becomes HEIGHT not width — the search bar was rendering as a 360px
   TALL square. Mobile override below. */
body .catalog-sticky-wrap .product-search {
    flex: 1 1 360px !important;
    max-width: 460px !important;
    min-width: 240px !important;
}
@media (max-width: 600px) {
    body .catalog-sticky-wrap .product-search {
        flex: 1 1 auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        width: 100% !important;
    }
}
/* Featured sort fixed width, doesn't grow */
body .catalog-sticky-wrap select#product-sort,
body .catalog-sticky-wrap .catalog-toolbar select {
    flex: 0 0 auto !important;
    min-width: 150px !important;
}
/* Filter pill row spacing */
body .catalog-sticky-wrap .filter-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 0 !important;
    justify-content: center !important;
}
body .catalog-sticky-wrap .filter-bar .filter-btn,
body .filter-btn {
    padding: 10px 20px !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
}
/* Kill the teal inset underline on the active filter pill — was a
   `box-shadow: 0 -2px 0 0 inset rgb(20,184,166)` creating a visible
   ring/box outline below the black "All Products" pill. */
body .filter-btn.active,
body .filter-btn.active:hover,
body .filter-btn:focus,
html body .filter-btn.active,
html body .filter-btn.active:hover,
html body .filter-btn:focus,
html body .filter-btn.active:focus {
    box-shadow: none !important;
    outline: none !important;
}
/* Force the toolbar + filter-bar rows to fill the wrap so their
   justify-content: center actually centers within the wrap.
   The original .catalog-toolbar had max-width: 700px which was
   constraining it inside the 900px wrap. Override that. */
body .catalog-sticky-wrap > .catalog-toolbar,
html body .catalog-sticky-wrap > .catalog-toolbar,
html body .catalog-toolbar {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 24px !important;
    box-sizing: border-box !important;
}
body .catalog-sticky-wrap > .filter-bar,
html body .catalog-sticky-wrap > .filter-bar,
html body .filter-bar {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    /* The "rectangle box" the user kept seeing — kill the legacy
       white bg + light border that wraps the filter pills. */
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* ── Make 'FOR RESEARCH USE ONLY' hero pill more refined ── */
body .hero-research-pill,
body .hero .research-badge,
body .hero-badge {
    background: rgba(20, 184, 166, 0.08) !important;
    border: 1px solid rgba(20, 184, 166, 0.30) !important;
    color: var(--accent-dark) !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    padding: 6px 16px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}


/* ════════════════════════════════════════════════════════════════════════
   ░░░ AMINO-CLONE ROUND 4 — STRUCTURAL REMODEL (May 2026) ░░░

   This round goes BIG. New signature sections matching aminoclub.com:
     • Hero floating callouts (white pill badges over vials)
     • "Browse by Goal" grid — pastel category cards
     • "Quality You Can Verify" — tabbed stats section
     • "Brand Story" — split-screen with floating stat cards
     • Reviews summary header (4.9/5 stars)
     • Centered section headers w/ confident large type
     • Dramatic alternating pastel section blocks
   ════════════════════════════════════════════════════════════════════════ */

/* ── Centered section header variant ── */
body .section-header-center {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 720px !important;
    margin-bottom: 56px !important;
}
body .section-header-center .section-badge {
    margin: 0 auto 16px !important;
}
body .section-header-center .section-subtitle {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ── Generic "View all →" link arrow ── */
body .link-arrow {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #0a0a0a !important;
    font-weight: 600 !important;
    font-size: 0.92rem !important;
    text-decoration: none !important;
    border-bottom: 1.5px solid transparent !important;
    padding-bottom: 2px !important;
    transition: gap 0.2s ease, border-color 0.2s ease !important;
}
body .link-arrow:hover {
    gap: 12px !important;
    border-bottom-color: #0a0a0a !important;
}
body .link-arrow i {
    font-size: 0.78rem !important;
    transition: transform 0.2s ease !important;
}

/* ──────────────────────────────────────────────────────────────────────
   HERO REMODEL — bigger pastel area, refined vials, floating callouts
   ────────────────────────────────────────────────────────────────── */

/* Make the hero MUCH more dramatic with a bigger pastel right half.
   Top padding is minimal because the fixed navbar already offsets the
   page above this section. Big top padding here creates a dead zone. */
body .hero {
    padding: 24px 24px 80px !important;
    overflow: hidden !important;
}
body .hero::before {
    width: 55% !important;
    background:
        radial-gradient(ellipse 80% 80% at 35% 50%, var(--pastel-lavender) 0%, transparent 60%),
        radial-gradient(ellipse 70% 70% at 75% 80%, var(--pastel-mint) 0%, transparent 60%),
        radial-gradient(ellipse 60% 60% at 60% 25%, var(--pastel-peach) 0%, transparent 55%) !important;
    opacity: 0.85 !important;
}

/* Hero visual frame — Amino-style soft round pastel "stage" behind vials */
body .hero-visual {
    flex: 0 0 460px !important;
    height: 480px !important;
    position: relative !important;
}
body .hero-visual::before {
    width: 420px !important;
    height: 420px !important;
    background: radial-gradient(circle, #ffffff 0%, rgba(255,255,255,0.45) 50%, transparent 75%) !important;
    box-shadow: 0 24px 48px rgba(20, 30, 60, 0.06) !important;
    animation: none !important;
    border-radius: 50% !important;
}
/* Restore vial hue-rotate so vials read as teal/green, not the raw blue
   from the source artwork. The cyberpunk CSS had this; round 3 overrode
   it with just drop-shadow. Bring the shift back, keep the soft shadow. */
body .hero-vial-main {
    filter: var(--cy-vial-shift) drop-shadow(0 24px 40px rgba(20, 30, 60, 0.18)) !important;
    height: 420px !important;
    animation: heroFloat 4s ease-in-out infinite !important;
}
body .hero-vial-secondary {
    filter: var(--cy-vial-shift) drop-shadow(0 12px 24px rgba(20, 30, 60, 0.14)) !important;
}

/* Also re-apply hue-shift to catalog/bestseller vials (round 4 product-card
   override was generic and dropped the filter) */
body .product-card img,
body .bestseller-card img,
body .product-image img,
body .bs-image img,
body .recently-viewed-grid img,
body .modal-image img,
body .modal-img,
body img[src*="bpc-157"],
body img[src*="tb-500"],
body img[src*="cjc"],
body img[src*="ipamorelin"],
body img[src*="igf-1"],
body img[src*="mots-c"],
body img[src*="mt-2"],
body img[src*="ghk-cu"],
body img[src*="retatrutide"],
body img[src*="semax"],
body img[src*="selank"],
body img[src*="dsip"],
body img[src*="pinealon"],
body img[src*="oxytocin"],
body img[src*="hcg"],
body img[src*="glutathione"],
body img[src*="bac-water"] {
    filter: var(--cy-vial-shift) drop-shadow(0 6px 14px rgba(20, 30, 60, 0.12)) !important;
}

/* ── Navbar logo — strip heavy glow so the teal wing reads cleanly on white
      (the cyberpunk version was designed for a dark navbar) ── */
body .nav-logo-img,
body .about-logo-img,
body .age-gate-logo {
    filter: var(--cy-logo-shift) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.10)) !important;
    animation: none !important;
}
body .nav-logo:hover .nav-logo-img,
body a:hover > .about-logo-img {
    filter: var(--cy-logo-shift) drop-shadow(0 2px 6px rgba(20, 184, 166, 0.30)) brightness(1.04) !important;
    transform: translateY(-1px) !important;
}

/* Floating callouts — clean white pill cards over the vials */









@keyframes floatGently {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}




/* ──────────────────────────────────────────────────────────────────────
   GOALS SECTION — Pastel category cards (Amino's "Shop by Goal")
   ────────────────────────────────────────────────────────────────── */
body .goals-section {
    background: var(--bg) !important;
    padding: 96px 0 !important;
}

body .goal-card {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    padding: 28px 26px !important;
    border-radius: 20px !important;
    text-decoration: none !important;
    color: #0a0a0a !important;
    position: relative !important;
    overflow: hidden !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
    border: 1px solid rgba(0,0,0,0.04) !important;
    min-height: 110px !important;
}
body .goal-card.goal-mint     { background: var(--pastel-mint) !important; }
body .goal-card.goal-peach    { background: var(--pastel-peach) !important; }
body .goal-card.goal-lavender { background: var(--pastel-lavender) !important; }
body .goal-card.goal-sky      { background: var(--pastel-sky) !important; }
body .goal-card.goal-cream    { background: var(--pastel-cream) !important; }
body .goal-card.goal-blush    { background: var(--pastel-blush) !important; }
body .goal-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 16px 36px rgba(0,0,0,0.10) !important;
}
body .goal-card .goal-icon {
    width: 52px !important;
    height: 52px !important;
    background: rgba(255,255,255,0.7) !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.3rem !important;
    color: #0a0a0a !important;
    flex-shrink: 0 !important;
}
body .goal-card .goal-body { flex: 1 !important; }
body .goal-card .goal-body h3 {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    margin: 0 0 4px 0 !important;
    color: #0a0a0a !important;
}
body .goal-card .goal-body p {
    margin: 0 !important;
    color: rgba(0,0,0,0.65) !important;
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
}
body .goal-card .goal-arrow {
    width: 36px !important;
    height: 36px !important;
    background: rgba(255,255,255,0.5) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.85rem !important;
    color: #0a0a0a !important;
    transition: transform 0.2s ease, background 0.2s ease !important;
    flex-shrink: 0 !important;
}
body .goal-card:hover .goal-arrow {
    transform: translateX(4px) !important;
    background: #0a0a0a !important;
    color: #ffffff !important;
}

/* ──────────────────────────────────────────────────────────────────────
   BEST SELLERS HEADER — left+right split layout
   ────────────────────────────────────────────────────────────────── */


body .bestsellers-header .section-subtitle {
    margin-left: 0 !important;
    margin-right: 0 !important;
}


/* ──────────────────────────────────────────────────────────────────────
   QUALITY SECTION — Tabbed stats panel (signature Amino section)
   ────────────────────────────────────────────────────────────────── */
body .quality-section {
    background: var(--bg-soft) !important;
    padding: 112px 0 !important;
    position: relative !important;
}
body .quality-tabs {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    background: #ffffff !important;
    border-radius: 999px !important;
    padding: 8px !important;
    max-width: max-content !important;
    margin: 0 auto 48px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04) !important;
    border: 1px solid var(--border-light) !important;
}
body .quality-tab {
    background: transparent !important;
    border: none !important;
    padding: 10px 22px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.92rem !important;
    font-weight: 600 !important;
    color: var(--text-muted) !important;
    border-radius: 999px !important;
    cursor: pointer !important;
    transition: background 0.2s ease, color 0.2s ease !important;
    letter-spacing: 0.1px !important;
}
body .quality-tab:hover {
    color: #0a0a0a !important;
    background: var(--bg-soft) !important;
}
body .quality-tab.active {
    background: #0a0a0a !important;
    color: #ffffff !important;
}
body .quality-panels {
    background: #ffffff !important;
    border-radius: 28px !important;
    padding: 56px !important;
    box-shadow: 0 12px 36px rgba(0,0,0,0.06) !important;
    border: 1px solid var(--border-light) !important;
    max-width: 1080px !important;
    margin: 0 auto !important;
}
body .quality-panel {
    display: none !important;
    grid-template-columns: 320px 1fr !important;
    gap: 56px !important;
    align-items: center !important;
}
body .quality-panel.active {
    display: grid !important;
    animation: fadeInUp 0.45s ease both !important;
}
body .quality-panel-stat {
    background: var(--pastel-mint) !important;
    border-radius: 24px !important;
    padding: 56px 32px !important;
    text-align: center !important;
}
body .quality-panel[data-quality-panel="potency"]   .quality-panel-stat { background: var(--pastel-lavender) !important; }
body .quality-panel[data-quality-panel="identity"]  .quality-panel-stat { background: var(--pastel-sky) !important; }
body .quality-panel[data-quality-panel="stability"] .quality-panel-stat { background: var(--pastel-peach) !important; }
body .quality-panel[data-quality-panel="safety"]    .quality-panel-stat { background: var(--pastel-blush) !important; }
body .qps-number {
    font-family: 'Inter', sans-serif !important;
    font-size: clamp(3rem, 6vw, 4.5rem) !important;
    font-weight: 800 !important;
    color: #0a0a0a !important;
    line-height: 1 !important;
    letter-spacing: -0.03em !important;
}
body .qps-number .qps-plus { font-size: 0.7em !important; color: var(--accent-dark) !important; }
body .qps-label {
    margin-top: 14px !important;
    color: rgba(0,0,0,0.65) !important;
    font-size: 0.92rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.2px !important;
}
body .quality-panel-body h3 {
    font-size: clamp(1.4rem, 2.6vw, 1.9rem) !important;
    font-weight: 800 !important;
    color: #0a0a0a !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 16px !important;
    line-height: 1.2 !important;
}
body .quality-panel-body p {
    color: var(--text-secondary) !important;
    font-size: 1rem !important;
    line-height: 1.7 !important;
    margin-bottom: 22px !important;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 880px) {
    body .quality-panels { padding: 32px !important; border-radius: 22px !important; }
    body .quality-panel { grid-template-columns: 1fr !important; gap: 32px !important; }
    body .quality-panel-stat { padding: 36px 24px !important; }
}

/* ──────────────────────────────────────────────────────────────────────
   STORY SECTION — Split-screen w/ floating stat cards
   ────────────────────────────────────────────────────────────────── */
body .story-section {
    background: var(--bg) !important;
    padding: 112px 0 !important;
}

body .story-visual {
    position: relative !important;
    height: 480px !important;
    display: block !important;
}





body .ssc-number {
    font-family: 'Inter', sans-serif !important;
    font-size: 2rem !important;
    font-weight: 800 !important;
    color: #0a0a0a !important;
    letter-spacing: -0.02em !important;
    line-height: 1 !important;
    margin-bottom: 6px !important;
}

body .story-body .section-badge { margin-bottom: 16px !important; }
body .story-body .section-title {
    text-align: left !important;
    font-size: clamp(2rem, 4vw, 2.8rem) !important;
    margin-bottom: 20px !important;
}



@media (max-width: 880px) {
    
    body .story-visual { height: 360px !important; }
    
    body .ssc-number { font-size: 1.6rem !important; }
}

/* ──────────────────────────────────────────────────────────────────────
   REVIEWS SUMMARY (stars + 4.9/5 in section header)
   ────────────────────────────────────────────────────────────────── */
body .reviews-summary {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: 16px !important;
    background: #ffffff !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 999px !important;
    padding: 8px 20px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04) !important;
}
body .reviews-stars { color: #f59e0b !important; font-size: 0.92rem !important; letter-spacing: 1px !important; }
body .reviews-text { color: var(--text) !important; font-size: 0.9rem !important; }
body .reviews-text strong { font-weight: 700 !important; color: #0a0a0a !important; }

/* ──────────────────────────────────────────────────────────────────────
   GLOBAL: refine the trust-marquee one more pass for Amino feel
   ────────────────────────────────────────────────────────────────── */
body .trust-marquee {
    background: #ffffff !important;
    border-top: 1px solid var(--border-light) !important;
    border-bottom: 1px solid var(--border-light) !important;
    padding: 14px 0 !important;
}
body .trust-marquee .tm-item {
    color: #0a0a0a !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
}
body .trust-marquee .tm-item i { color: var(--accent-dark) !important; }
body .trust-marquee .tm-sep { color: rgba(0,0,0,0.18) !important; }

/* ──────────────────────────────────────────────────────────────────────
   HERO TRUST STRIP — refine into floating pills row (not a hard bar)
   ────────────────────────────────────────────────────────────────── */
body .hero-trust {
    background: transparent !important;
    border: none !important;
    padding: 24px 0 0 !important;
    margin-top: 32px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    justify-content: flex-start !important;
}
body .hero-trust::before, body .hero-trust::after { display: none !important; }
body .hero-trust .trust-item {
    background: #ffffff !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 999px !important;
    padding: 8px 16px !important;
    font-size: 0.78rem !important;
    color: var(--text) !important;
    font-weight: 500 !important;
    border-right: 1px solid var(--border-light) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.03) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}
body .hero-trust .trust-item i { color: var(--accent-dark) !important; }

/* ──────────────────────────────────────────────────────────────────────
   HOW IT WORKS — refine number circles and step cards
   ────────────────────────────────────────────────────────────────── */
body .how-section { background: var(--bg) !important; padding: 96px 0 !important; }
body .how-grid {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr auto 1fr !important;
    align-items: stretch !important;
    gap: 16px !important;
}








@media (max-width: 880px) {
    body .how-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
    
}

/* ──────────────────────────────────────────────────────────────────────
   PRODUCT CARD POLISH — Bigger, softer, more Amino-like
   ────────────────────────────────────────────────────────────────── */
body .product-card,
body .bestseller-card {
    border-radius: 24px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    border: 1px solid var(--border-light) !important;
}
body .product-card .product-image,
body .product-card .product-img-wrap,
body .bestseller-card .product-image,
body .bestseller-card .product-img-wrap {
    border-radius: 20px !important;
    overflow: hidden !important;
}
body .product-card .product-name,
body .bestseller-card .product-name {
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.02rem !important;
    color: #0a0a0a !important;
    letter-spacing: -0.01em !important;
}
body .product-card .product-price,
body .bestseller-card .product-price {
    font-weight: 800 !important;
    color: #0a0a0a !important;
}

/* ──────────────────────────────────────────────────────────────────────
   NEWSLETTER — refresh: pastel rounded card, big bold heading
   ────────────────────────────────────────────────────────────────── */
body .newsletter-section {
    padding: 112px 0 !important;
}
body .newsletter-content {
    background: linear-gradient(135deg, var(--pastel-mint) 0%, var(--pastel-sky) 100%) !important;
    border-radius: 32px !important;
    padding: 64px 56px !important;
    text-align: center !important;
    max-width: 920px !important;
    margin: 0 auto !important;
    box-shadow: 0 20px 50px rgba(20,30,60,0.08) !important;
    /* The original used a 2-column grid (1fr auto) which squashed the
       heading column down to 1-word-wide. Force stacked single column
       so heading + form stack vertically and stay centered. */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    grid-template-columns: none !important;
    gap: 24px !important;
    clip-path: none !important;
}
body .newsletter-content::before { display: none !important; }
body .newsletter-text {
    width: 100% !important;
    max-width: 640px !important;
    text-align: center !important;
}
body .newsletter-form {
    width: 100% !important;
    max-width: 560px !important;
}
body .newsletter-content h2 {
    font-size: clamp(1.8rem, 4vw, 2.6rem) !important;
    font-weight: 800 !important;
    color: #0a0a0a !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 16px !important;
}
body .newsletter-content h2 i {
    color: var(--accent-dark) !important;
    margin-right: 8px !important;
}
body .newsletter-content p {
    color: rgba(0,0,0,0.7) !important;
    font-size: 1.02rem !important;
    line-height: 1.6 !important;
    max-width: 540px !important;
    margin: 0 auto 28px !important;
}
body .newsletter-content strong { color: #0a0a0a !important; }
body .newsletter-input-group {
    display: flex !important;
    gap: 12px !important;
    max-width: 520px !important;
    margin: 0 auto !important;
    background: #ffffff !important;
    border-radius: 999px !important;
    padding: 6px !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.06) !important;
}
body .newsletter-input-group input {
    flex: 1 !important;
    border: none !important;
    background: transparent !important;
    padding: 12px 18px !important;
    font-size: 0.95rem !important;
    box-shadow: none !important;
}
body .newsletter-input-group input:focus { outline: none !important; }
body .newsletter-input-group button {
    background: #0a0a0a !important;
    color: #ffffff !important;
    border: none !important;
    padding: 12px 24px !important;
    border-radius: 999px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}
body .newsletter-input-group button:hover {
    background: #2a2a2a !important;
}
body .newsletter-note {
    margin-top: 28px !important;
    font-size: 0.8rem !important;
    color: rgba(0,0,0,0.55) !important;
    line-height: 1.5 !important;
}

@media (max-width: 720px) {
    body .newsletter-content { padding: 40px 24px !important; border-radius: 24px !important; }
    body .newsletter-input-group { flex-direction: column !important; padding: 12px !important; border-radius: 20px !important; }
    body .newsletter-input-group input { padding: 14px !important; text-align: center !important; }
    body .newsletter-input-group button { width: 100% !important; }
}

/* ──────────────────────────────────────────────────────────────────────
   WHY SECTION — Amino-style stat-forward cards
   ────────────────────────────────────────────────────────────────── */
body .why-section { padding: 112px 0 !important; }
body .why-card {
    padding: 36px 28px !important;
    border-radius: 22px !important;
    background: #ffffff !important;
}
body .why-stat-big {
    font-family: 'Inter', sans-serif !important;
    font-size: clamp(2.5rem, 5vw, 3.4rem) !important;
    font-weight: 800 !important;
    color: #0a0a0a !important;
    letter-spacing: -0.03em !important;
    line-height: 1 !important;
    margin: 18px 0 6px !important;
}
body .why-stat-big .why-stat-plus,
body .why-stat-big .why-stat-unit {
    font-size: 0.55em !important;
    color: var(--accent-dark) !important;
    font-weight: 700 !important;
}

body .why-card h3 {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #0a0a0a !important;
    margin-bottom: 10px !important;
}
body .why-card p {
    color: var(--text-muted) !important;
    font-size: 0.92rem !important;
    line-height: 1.6 !important;
}

body .why-card:nth-child(2) .why-icon { background: var(--pastel-peach) !important; }
body .why-card:nth-child(3) .why-icon { background: var(--pastel-lavender) !important; }
body .why-card:nth-child(4) .why-icon { background: var(--pastel-sky) !important; }

/* ──────────────────────────────────────────────────────────────────────
   PEPTIDE CHAIN DIVIDER — fade so it's subtle, not loud
   ────────────────────────────────────────────────────────────────── */





body .peptide-chain-atom.bright {
    fill: var(--accent) !important;
    stroke: var(--accent-dark) !important;
    stroke-width: 1 !important;
    opacity: 1 !important;
    r: 5 !important;
    filter: drop-shadow(0 0 6px rgba(20, 184, 166, 0.35)) !important;
    animation: chainAtomGlow 3.5s ease-in-out infinite !important;
}
@keyframes chainAtomPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(0.98); }
}
@keyframes chainAtomGlow {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 8px rgba(20, 184, 166, 0.40)); }
    50%      { transform: scale(1.22); filter: drop-shadow(0 0 14px rgba(20, 184, 166, 0.70)); }
}











@media (prefers-reduced-motion: reduce) {
    body .peptide-chain-atom,
    body .peptide-chain-atom.bright { animation: none !important; transform: none !important; }
}

/* ──────────────────────────────────────────────────────────────────────
   SECTION TITLE — alignment for centered headers
   ────────────────────────────────────────────────────────────────── */
body .section-header-center .section-title {
    text-align: center !important;
}


/* ════════════════════════════════════════════════════════════════════════
   ░░░ AMINO-CLONE ROUND 5 — DEEP AUDIT FIX PASS (May 2026) ░░░

   This block is a comprehensive sweep based on a programmatic audit of
   every page. Catches: dark-theme CSS variables that round-4 missed,
   the cookie consent banner, age-gate RUO terms box, blog text that
   reads light-gray on white (invisible), white-on-white education
   headings, Orbitron / JetBrains-Mono fonts on body copy that should
   be Inter, btn-outline using legacy teal text color, cyberpunk
   compound cards on /education, and more.
   ════════════════════════════════════════════════════════════════════════ */


/* ============================================================
   1. VARIABLE OVERRIDES — root vars that round-4 didn't touch
   ============================================================
   The original :root defined dark navy values for --surface,
   --primary, --gradient-1, etc. Round-4 didn't override them, so
   anything referencing them (cookie banner, RUO box, modals) stayed
   dark. Push these to light values once at the root and 100+ legacy
   references inherit the new look automatically. */
:root {
    /* Surface-family — was dark navy, now light cream/white */
    --surface: #ffffff !important;
    --surface-light: #fafafa !important;
    --surface-lighter: #f5f5f7 !important;

    /* Primary-family — was deep navy, now near-white */
    --primary: #ffffff !important;
    --primary-light: #fafafa !important;

    /* Borders — were white-on-dark, now black-on-light */
    --border: rgba(0, 0, 0, 0.08) !important;

    /* Hero gradient was a navy 3-stop, kill it for the light hero */
    --gradient-1: linear-gradient(135deg, #ffffff 0%, #fafafa 50%, #f5f5f7 100%) !important;

    /* Card gradient — was dark navy gradient, now flat white */
    --gradient-card: #ffffff !important;

    /* Shadows — were heavy black 0.3-0.5 for dark UI, lighten for light UI */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    --shadow-md: 0 4px 18px rgba(0, 0, 0, 0.07) !important;
    --shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.10) !important;
}


/* ============================================================
   2. COOKIE CONSENT BANNER — was dark navy
   ============================================================
   The .cookie-consent footer banner + .cookie-prefs-modal both used
   var(--surface) = dark navy. Convert to clean white card. */
body .cookie-consent {
    background: #ffffff !important;
    border-top: 1px solid var(--border-light) !important;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.08) !important;
}
body .cookie-text > i { color: var(--accent-dark) !important; }
body .cookie-text strong { color: var(--text) !important; }
body .cookie-text p { color: var(--text-secondary) !important; }

/* Cookie buttons — match the new Amino theme */
body .cookie-actions .cookie-btn-tertiary {
    background: transparent !important;
    color: var(--text-muted) !important;
    text-decoration-color: rgba(0, 0, 0, 0.20) !important;
}
body .cookie-actions .cookie-btn-tertiary:hover {
    color: var(--text) !important;
    background: var(--bg-soft) !important;
    text-decoration-color: var(--accent-dark) !important;
}
body .cookie-actions .cookie-btn-secondary {
    background: #ffffff !important;
    border: 1px solid var(--border-medium) !important;
    color: var(--text) !important;
}
body .cookie-actions .cookie-btn-secondary:hover {
    background: var(--bg-soft) !important;
    border-color: var(--text) !important;
    transform: translateY(-1px) !important;
}
body .cookie-actions .cookie-btn-primary {
    background: #0a0a0a !important;
    border-color: #0a0a0a !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10) !important;
}
body .cookie-actions .cookie-btn-primary:hover {
    background: #2a2a2a !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18) !important;
}

/* Cookie preferences modal — convert from dark to light card */
body .cookie-prefs-overlay {
    background: rgba(15, 15, 18, 0.55) !important;
    backdrop-filter: blur(4px) !important;
}
body .cookie-prefs-modal {
    background: #ffffff !important;
    border: 1px solid var(--border-light) !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.20) !important;
    color: var(--text) !important;
}
body .cookie-prefs-modal h2,
body .cookie-prefs-modal h3,
body .cookie-prefs-modal h4 { color: var(--text) !important; }
body .cookie-prefs-modal p,
body .cookie-prefs-modal label { color: var(--text-secondary) !important; }
body .cookie-prefs-modal hr { border-color: var(--border-light) !important; }


/* ============================================================
   3. AGE GATE — RUO terms box was dark navy
   ============================================================ */
body .ruo-terms-box {
    background: var(--bg-soft) !important;
    border: 1px solid var(--border-light) !important;
    color: var(--text) !important;
}
body .ruo-terms-box h3 {
    font-family: 'Inter', sans-serif !important;
    color: var(--text) !important;
    font-weight: 700 !important;
}
body .ruo-terms-content {
    border-left: 3px solid var(--accent) !important;
}
body .ruo-terms-content p {
    color: var(--text-secondary) !important;
}
body .age-gate-content {
    background: #ffffff !important;
    color: var(--text) !important;
    border: 1px solid var(--border-light) !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18) !important;
}
body .age-check .checkmark {
    border: 2px solid var(--border-medium) !important;
}
body .age-check input:checked + .checkmark {
    background: #0a0a0a !important;
    border-color: #0a0a0a !important;
}
body .age-gate-logo-fallback .logo-text,
body .age-gate-logo-fallback .logo-sub {
    color: var(--text) !important;
}
body #age-gate-btn:disabled {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
}


/* ============================================================
   4. BLOG PAGES — text was light-gray on white = invisible
   ============================================================ */
body .blog-content,
body .blog-content p,
body .blog-content li,
body .blog-content td,
body .blog-content th,
body .blog-content span:not(.kbd),
body .related-posts,
body .related-posts p,
body .blog-card p,
body .blog-card-excerpt {
    color: var(--text-secondary) !important;
}
body .blog-content h1,
body .blog-content h2,
body .blog-content h3,
body .blog-content h4,
body .blog-content h5,
body .blog-content h6 {
    color: var(--text) !important;
}
body .blog-content strong,
body .blog-content b { color: var(--text) !important; }
body .blog-content a { color: var(--accent-dark) !important; }
body .blog-content a:hover { color: #0a0a0a !important; }
body .blog-content blockquote {
    background: var(--bg-soft) !important;
    border-left: 4px solid var(--accent) !important;
    color: var(--text-secondary) !important;
    padding: 16px 20px !important;
    border-radius: 8px !important;
}
body .blog-content code,
body .blog-content pre {
    background: var(--bg-soft) !important;
    color: var(--text) !important;
    border: 1px solid var(--border-light) !important;
}
body .blog-card,
body .related-post-card {
    background: #ffffff !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}
body .blog-card:hover,
body .related-post-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
    transform: translateY(-2px) !important;
}
body .blog-card h3,
body .blog-card h2,
body .related-post-card h3 { color: var(--text) !important; }
body .blog-card .blog-meta,
body .related-post-card .blog-meta { color: var(--text-muted) !important; }


body .blog-hero p,
body .blog-hero .blog-meta { color: var(--text-secondary) !important; }

/* TOC */


body .toc-list a:hover,
body .toc-list a.active { color: var(--accent-dark) !important; }


/* ============================================================
   5. EDUCATION PAGE — white-on-white headings + cyberpunk cards
   ============================================================ */
body .edu-page {
    background: var(--bg) !important;
    padding-top: 96px !important;
}
body .edu-page::before { display: none !important; }
body .edu-cat-section h2,
body .edu-cat-section h3 {
    font-family: 'Inter', sans-serif !important;
    color: var(--text) !important;
    font-weight: 700 !important;
}
body .edu-cat-section h2::before {
    background: var(--accent) !important;
    box-shadow: none !important;
}
body .compound {
    background: #ffffff !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 16px !important;
    clip-path: none !important;
    color: var(--text) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
}
body .compound:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
    border-color: var(--border-medium) !important;
}
body .compound h3,
body .compound h4 { color: var(--text) !important; }
body .compound p,
body .compound li,
body .compound span,
body .compound .compound-meta { color: var(--text-secondary) !important; }
body .compound .compound-tag,
body .compound .compound-pill {
    background: var(--bg-soft) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-light) !important;
}
/* Catch the more-specific .compound-header h3, .compound-title-row h3 selectors */
body .compound-title-block h3,
body .compound-title-row h3,
body .compound-header h3 {
    font-family: 'Inter', sans-serif !important;
    color: var(--text) !important;
}
body .compound::before { display: none !important; }
body .compound-tag {
    background: rgba(20, 184, 166, 0.08) !important;
    color: var(--accent-dark) !important;
    border: 1px solid rgba(20, 184, 166, 0.25) !important;
    font-family: 'Inter', sans-serif !important;
    border-radius: 999px !important;
    clip-path: none !important;
}
body .compound-tldr {
    background: var(--bg-soft) !important;
    border-left: 4px solid var(--accent) !important;
    color: var(--text-secondary) !important;
    border-radius: 8px !important;
}
body .compound-meta { color: var(--text-muted) !important; }
body .meta-item .label {
    font-family: 'Inter', sans-serif !important;
    color: var(--text-muted) !important;
    letter-spacing: 0.5px !important;
    font-weight: 600 !important;
}
body .meta-item .value { color: var(--text) !important; }


/* Blog index page (blog.html) — was full cyberpunk */
body .blog-index {
    background: var(--bg) !important;
    padding: 96px 20px 80px !important;
}
body .blog-index-header h1 {
    font-family: 'Inter', sans-serif !important;
    color: var(--text) !important;
    text-shadow: none !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
}
body .blog-index-header p { color: var(--text-secondary) !important; }
body .blog-post-card {
    background: #ffffff !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 16px !important;
    clip-path: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    color: var(--text) !important;
}
body .blog-post-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10) !important;
    transform: translateY(-2px) !important;
    border-color: var(--border-medium) !important;
}
body .blog-post-card h2,
body .blog-post-card h3 { color: var(--text) !important; }
body .blog-post-card p { color: var(--text-secondary) !important; }
body .blog-post-card .blog-meta,
body .blog-post-card .blog-tag { color: var(--text-muted) !important; }


/* ============================================================
   6. FONT HOLDOUTS — Orbitron / JetBrains Mono on body copy
   ============================================================
   Brand wordmark (Elytra Labs logo text) keeps Orbitron. Everything
   else should be Inter for body. Code blocks keep mono. */
body .faq-question,
body .faq-question span,
body .faq-toggle,
body .faq-category-title,
body .calc-tab,
body .calc-tab-btn,
body .protocol-step-title,
body .compound h3,
body .compound h4 {
    font-family: 'Inter', sans-serif !important;
}
/* Buttons that may have inherited Orbitron / JetBrains Mono */
body .btn-primary,
body .btn-secondary,
body .btn-outline,
body .btn-ghost,
body .btn-large,
body .btn-sm,
body button:not(.kbd):not(code):not(pre):not(.mono):not([class*="mono"]) {
    font-family: 'Inter', sans-serif !important;
}
/* Trust marquee + hero strip + discount callout were JetBrains Mono */
body .trust-marquee .tm-item,
body .hero-discount-callout,
body .hero-discount-callout strong,
body .hero-trust .trust-item,
body .announcement-bar,
body .announcement-bar strong,
body .announcement-content,
body .section-badge,
body .hero-badge {
    font-family: 'Inter', sans-serif !important;
}
/* Allow Orbitron only on the brand wordmark */
body .logo-text,
body .logo-sub,
body .nav-logo-text,
body .nav-logo-text .logo-text,
body .nav-logo-text .logo-sub,
body .age-gate-logo-fallback .logo-text,
body .age-gate-logo-fallback .logo-sub {
    font-family: 'Orbitron', sans-serif !important;
}


/* ============================================================
   7. BUTTON OUTLINE — was using legacy teal color
   ============================================================ */
body .btn-outline {
    background: #ffffff !important;
    color: var(--text) !important;
    border: 1.5px solid var(--text) !important;
    border-radius: 999px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0.1px !important;
}
body .btn-outline:hover {
    background: var(--text) !important;
    color: #ffffff !important;
    border-color: var(--text) !important;
}


/* ============================================================
   8. FORM INPUTS — uniform light theme
   ============================================================ */
body input[type="text"],
body input[type="email"],
body input[type="tel"],
body input[type="password"],
body input[type="search"],
body input[type="url"],
body input[type="number"],
body input[type="date"],
body textarea,
body select {
    background: #ffffff !important;
    color: var(--text) !important;
    border: 1px solid var(--border-medium) !important;
    border-radius: 10px !important;
    font-family: 'Inter', sans-serif !important;
}
body input[type="text"]:focus,
body input[type="email"]:focus,
body input[type="tel"]:focus,
body input[type="search"]:focus,
body input[type="number"]:focus,
body textarea:focus,
body select:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.12) !important;
    outline: none !important;
}
body label {
    color: var(--text) !important;
    font-family: 'Inter', sans-serif !important;
}
/* Newsletter inline form keeps its borderless-in-pill look */
body .newsletter-input-group input {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}


/* ============================================================
   9. CALCULATOR & PROTOCOL PAGES — light cards
   ============================================================ */
body .calc-page,
body .protocol-page,
body .compare-page,
body .order-page,
body .checkout-page,
body .aff-page {
    background: var(--bg) !important;
    padding-top: 96px !important;
}
body .calc-card,
body .protocol-card,
body .compare-card,
body .order-card,
body .checkout-card,
body .aff-card {
    background: #ffffff !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    clip-path: none !important;
}

body .calc-tab-btn,
body .calc-tab,
body .compare-tab,
body .protocol-tab {
    background: #ffffff !important;
    color: var(--text-muted) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 999px !important;
}
body .calc-tab-btn.active,
body .calc-tab.active,
body .compare-tab.active,
body .protocol-tab.active {
    background: #0a0a0a !important;
    color: #ffffff !important;
    border-color: #0a0a0a !important;
}


/* ============================================================
   10. FAQ — light cards + question font fix
   ============================================================ */
body .faq-section { background: var(--bg) !important; }
body .faq-item {
    background: #ffffff !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 14px !important;
    margin-bottom: 12px !important;
    overflow: hidden !important;
}
body .faq-question {
    color: var(--text) !important;
    font-weight: 600 !important;
    padding: 20px 24px !important;
    background: #ffffff !important;
}
body .faq-question:hover { background: var(--bg-soft) !important; }
body .faq-answer { color: var(--text-secondary) !important; padding: 0 24px 20px !important; }




/* ============================================================
   11. POLICY PAGES — light readable text
   ============================================================ */
body .policies-section,
body .privacy-page,
body .terms-page,
body .shipping-policy-page,
body .refund-policy-page {
    background: var(--bg) !important;
}
body .policies-section h1,
body .policies-section h2,
body .policies-section h3 { color: var(--text) !important; }
body .policies-section p,
body .policies-section li { color: var(--text-secondary) !important; }
body .policies-section a { color: var(--accent-dark) !important; }


/* ============================================================
   12. ACCOUNT & AFFILIATE PORTAL — light cards
   ============================================================ */
body .account-card,
body .aff-card,
body .aff-dashboard-card,
body .aff-stat-card {
    background: #ffffff !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 16px !important;
    color: var(--text) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}
body .aff-stat-card .stat-value,
body .aff-stat-card .stat-label,
body .account-card h2,
body .account-card h3 { color: var(--text) !important; }
body .aff-stat-card .stat-label { color: var(--text-muted) !important; }



/* ============================================================
   13. CONTACT PAGE — clean light form
   ============================================================ */
body .contact-page,
body .contact-section { background: var(--bg) !important; }
body .contact-form-card,
body .contact-info-card {
    background: #ffffff !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    clip-path: none !important;
}
body .contact-form input,
body .contact-form textarea {
    background: #ffffff !important;
    color: var(--text) !important;
    border: 1px solid var(--border-medium) !important;
}


/* ============================================================
   14. CHECKOUT PAGE — light theme
   ============================================================ */
body .checkout-page { background: var(--bg) !important; }
body .checkout-step,
body .checkout-summary,
body .order-summary,
body .ship-method-card,
body .payment-method-card {
    background: #ffffff !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 14px !important;
    color: var(--text) !important;
}
body .ship-method-card.selected,
body .payment-method-card.selected {
    border: 2px solid var(--accent) !important;
    background: rgba(20, 184, 166, 0.04) !important;
}



/* ============================================================
   15. CART SIDEBAR & WISHLIST — light theme polish
   ============================================================ */
body #cart-sidebar,
body #wishlist-sidebar {
    background: #ffffff !important;
    color: var(--text) !important;
    border-left: 1px solid var(--border-light) !important;
}
body .cart-header,
body .cart-footer,
body .wishlist-header {
    background: #ffffff !important;
    border-color: var(--border-light) !important;
    color: var(--text) !important;
}
body .cart-item,
body .wl-card {
    background: #ffffff !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 14px !important;
}
body .cart-item-name,
body .cart-item-price,
body .wl-card-name,
body .wl-card-price { color: var(--text) !important; }
body .cart-empty,
body .wishlist-empty { color: var(--text-muted) !important; }


/* ============================================================
   16. MODAL DIALOGS — keep dark scrim, light content
   ============================================================ */
body .modal-content,
body .cy-modal,
body .coa-modal-content,
body .checkout-modal-content,
body .product-modal-content,
body .legal-modal-content,
body .tracking-modal-content {
    background: #ffffff !important;
    color: var(--text) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 20px !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.20) !important;
}


body .modal-close { color: var(--text-muted) !important; }
body .modal-close:hover { color: var(--text) !important; background: var(--bg-soft) !important; }


/* ============================================================
   17. CODE BLOCKS, KBD — keep mono font, light bg
   ============================================================ */
body code,
body pre,
body .kbd,
body .mono,
body kbd {
    font-family: 'JetBrains Mono', ui-monospace, monospace !important;
}
body pre,
body code:not(pre code) {
    background: var(--bg-soft) !important;
    color: var(--text) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 8px !important;
}
body pre code { background: transparent !important; border: none !important; }


/* ============================================================
   18. STICKY CATALOG TOOLBAR + FILTER BUTTONS
   ============================================================ */
body .filter-btn,
body .catalog-filter-pill {
    background: #ffffff !important;
    border: 1px solid var(--border-light) !important;
    color: var(--text-secondary) !important;
    border-radius: 999px !important;
    font-family: 'Inter', sans-serif !important;
}
body .filter-btn:hover,
body .catalog-filter-pill:hover {
    background: var(--bg-soft) !important;
    color: var(--text) !important;
    border-color: var(--border-medium) !important;
}
body .filter-btn.active,
body .catalog-filter-pill.active {
    background: #0a0a0a !important;
    color: #ffffff !important;
    border-color: #0a0a0a !important;
}


/* ============================================================
   19. TOAST NOTIFICATIONS — keep dark (intentional brand)
   ============================================================ */
body .toast,
body .toast-success,
body .toast-error {
    /* Toasts stay as solid black pills for visibility */
    background: #0a0a0a !important;
    color: #ffffff !important;
    border-radius: 999px !important;
    border: none !important;
}


/* ============================================================
   20. NAVBAR DROPDOWN — clean light treatment
   ============================================================ */
body .nav-dropdown-menu {
    background: #ffffff !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10) !important;
}
body .nav-dd-item {
    color: var(--text) !important;
    font-family: 'Inter', sans-serif !important;
}
body .nav-dd-item:hover {
    background: var(--bg-soft) !important;
}
body .nav-dd-item .nav-dd-icon,
body .nav-dd-item i { color: var(--accent-dark) !important; }


/* ============================================================
   21. ANNOUNCEMENT BAR — keep teal, Inter font
   ============================================================ */
body .announcement-bar {
    background: linear-gradient(90deg, #14b8a6, #0d9488) !important;
    color: #ffffff !important;
    font-family: 'Inter', sans-serif !important;
}
body .announcement-bar strong,
body .announcement-content,
body .announcement-content i,
body .announcement-content strong { color: #ffffff !important; }


/* ============================================================
   22. ABOUT / ORDER / COMPARE — generic page polish
   ============================================================ */
body .about-section,
body .about-page,
body .order-page,
body .compare-page,
body .bundles-page { background: var(--bg) !important; }
body .about-section h1,
body .about-section h2,
body .about-section h3 { color: var(--text) !important; }
body .about-section p,
body .about-section li { color: var(--text-secondary) !important; }


/* ============================================================
   22b. BUTTONS — STRONG SPECIFICITY KILL FOR CYBERPUNK .btn-primary
   ============================================================
   Cyberpunk used `.btn-primary:not(.cookie-btn-primary)` which has
   specificity (0,2,0). Match-then-beat with `html body` prefix +
   the same :not chain to win. Same for .btn-outline. */
html body .btn-primary:not(.cookie-btn-primary),
html body a.btn-primary:not(.cookie-btn-primary),
html body button.btn-primary:not(.cookie-btn-primary) {
    background: #0a0a0a !important;
    background-image: none !important;
    color: #ffffff !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.1px !important;
    text-transform: none !important;
    padding: 14px 28px !important;
    border-radius: 999px !important;
    border: 1px solid #0a0a0a !important;
    clip-path: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10) !important;
}
html body .btn-primary:not(.cookie-btn-primary).btn-large,
html body a.btn-primary:not(.cookie-btn-primary).btn-large,
html body button.btn-primary:not(.cookie-btn-primary).btn-large {
    padding: 16px 32px !important;
    font-size: 1rem !important;
    letter-spacing: 0.1px !important;
}
html body .btn-primary:not(.cookie-btn-primary):hover,
html body a.btn-primary:not(.cookie-btn-primary):hover,
html body button.btn-primary:not(.cookie-btn-primary):hover {
    background: #2a2a2a !important;
    background-image: none !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
}
html body .btn-primary:not(.cookie-btn-primary)::before {
    display: none !important;
}

html body .btn-outline:not(.cookie-btn-secondary):not(.cookie-btn-primary):not(.footer-link-btn),
html body a.btn-outline:not(.cookie-btn-secondary):not(.cookie-btn-primary):not(.footer-link-btn),
html body button.btn-outline:not(.cookie-btn-secondary):not(.cookie-btn-primary):not(.footer-link-btn) {
    background: #ffffff !important;
    color: var(--text) !important;
    border: 1.5px solid var(--text) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.1px !important;
    text-transform: none !important;
    padding: 13px 26px !important;
    border-radius: 999px !important;
    clip-path: none !important;
}
html body .btn-outline:not(.cookie-btn-secondary):not(.cookie-btn-primary):not(.footer-link-btn):hover {
    background: var(--text) !important;
    color: #ffffff !important;
    border-color: var(--text) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.10) !important;
}

/* Product card badges — were cyber teal gradient, make subtle */
html body .product-card-badge {
    background: var(--accent-dark) !important;
    background-image: none !important;
    color: #ffffff !important;
    font-family: 'Inter', sans-serif !important;
    letter-spacing: 0.5px !important;
    border-radius: 999px !important;
    clip-path: none !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10) !important;
    padding: 4px 12px !important;
}
html body .product-card-badge.popular {
    background: #f59e0b !important;
    background-image: none !important;
}
html body .product-discount-badge,
html body [class*="discount-badge"] {
    border-radius: 999px !important;
    font-family: 'Inter', sans-serif !important;
    clip-path: none !important;
}

/* Testimonial avatar — was teal gradient w/ clip-path */
html body .testimonial-avatar {
    background: var(--accent-dark) !important;
    background-image: none !important;
    color: #ffffff !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    border-radius: 50% !important;
    clip-path: none !important;
    box-shadow: 0 2px 8px rgba(20, 184, 166, 0.25) !important;
}




/* ════════════════════════════════════════════════════════════════════════
   ░░░ ROUND 6 — UNIVERSAL SWEEP: kills Orbitron/JetBrains/clip-path
   ░░░ across the entire site at high specificity, then a few page-
   ░░░ specific fixes (bundles, calculator, account, products).
   ════════════════════════════════════════════════════════════════════════ */


/* ============================================================
   R6-A. UNIVERSAL FONT NORMALIZATION
   Orbitron only on brand wordmark. JetBrains Mono only on code/kbd.
   Font Awesome icons (.fas/.far/.fab/.fa/[class*="fa-"]) MUST keep
   their FA font family or the glyphs render as empty boxes. */
html body main *:not(code):not(pre):not(kbd):not(.kbd):not(.mono):not([class*="-mono"]):not(.logo-text):not(.logo-sub):not(.nav-logo-text):not(.nav-logo-text *):not(.age-gate-logo-fallback):not(.age-gate-logo-fallback *):not(.fas):not(.far):not(.fab):not(.fal):not(.fad):not(.fa):not([class*="fa-"]):not([class*="fa-"] *):not(i.fas):not(i.far):not(i.fab):not(i.fa),
html body header *:not(code):not(pre):not(kbd):not(.kbd):not(.mono):not([class*="-mono"]):not(.logo-text):not(.logo-sub):not(.nav-logo-text):not(.nav-logo-text *):not(.age-gate-logo-fallback):not(.age-gate-logo-fallback *):not(.fas):not(.far):not(.fab):not(.fal):not(.fad):not(.fa):not([class*="fa-"]):not([class*="fa-"] *):not(i.fas):not(i.far):not(i.fab):not(i.fa),
html body footer *:not(code):not(pre):not(kbd):not(.kbd):not(.mono):not([class*="-mono"]):not(.logo-text):not(.logo-sub):not(.fas):not(.far):not(.fab):not(.fal):not(.fad):not(.fa):not([class*="fa-"]),
html body .age-gate-content *:not(.logo-text):not(.logo-sub):not(.fas):not(.far):not(.fab):not(.fal):not(.fa):not([class*="fa-"]) {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Explicitly restore Font Awesome glyph fonts — defensive override
   in case some other rule already munged them. */
html body i.fas, html body .fas,
html body i.far, html body .far,
html body i.fab, html body .fab,
html body i.fal, html body .fal,
html body i.fad, html body .fad,
html body i.fa, html body .fa,
html body i[class*="fa-"], html body [class*="fa-"]::before {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "FontAwesome" !important;
}
html body i.fab, html body .fab,
html body i[class*="fab"] {
    font-family: "Font Awesome 6 Brands", "FontAwesome" !important;
}


/* ============================================================
   R6-B. UNIVERSAL CLIP-PATH KILL
   Cyberpunk theme used clip-path polygons everywhere for the "tech"
   chamfered corner look. Kill on all common card / button / input
   selectors. Use html body prefix for specificity. */
html body main * {
    /* Don't blanket-kill clip-path — some hero shapes use it
       intentionally. Instead target specific known offenders. */
}
html body .track-btn,
html body .back-link,
html body .product-search,
html body .preset-card,
html body .preset-item-icon,
html body .preset-savings-badge,
html body .preset-add-btn,
html body .auth-google,
html body .auth-submit,
html body .auth-input-wrap,
html body .draw-to-pill,
html body .quick-ref,
html body .calc-disclaimer,
html body .modal-image,
html body .modal-content,
html body .stack-card,
html body .stack-card *,
html body .preset-item,
html body .product-card,
html body .product-card * {
    clip-path: none !important;
}


/* ============================================================
   R6-C. WHITE-TEXT HEADINGS ON LIGHT BG  (bundles + calc + others)
   ============================================================ */
html body main h1,
html body main h2,
html body main h3,
html body main h4,
html body main h5,
html body main h6,
html body main .bundles-page h1,
html body main .calc-page h1,
html body main .account-page h2,
/* Higher specificity beats the cyber `.bundles-header h1` etc. */
html body .bundles-header h1,
html body .bundles-header h2,
html body .calc-page h1,
html body .calc-page h2,
html body .stacks-header h1,
html body .stacks-header h2,
html body .protocol-header h1,
html body .compare-header h1,
html body .coa-page-header h1,
html body .order-page h1,
html body .checkout-page h1,
html body .blog-index-header h1,
html body .blog-post-header h1,
html body .about-header h1,
html body .contact-header h1,
html body .education-page h1,
html body .education-page h2,
html body .protocol-page h1,
html body .protocol-page h2,
html body .aff-page h1,
html body .aff-page h2 {
    color: var(--text) !important;
    text-shadow: none !important;
    font-family: 'Inter', sans-serif !important;
}
html body .bundles-header h1::before,
html body .bundles-header h1::after,
html body .calc-page h1::before,
html body .calc-page h1::after,
html body .stacks-header h1::before,
html body .stacks-header h1::after {
    display: none !important;
}

/* `.section-title-row h2` is a row used on bundles + other sub-pages.
   The cyber rule used Orbitron + white text. */





/* Education page header + filter bar + search */
html body .edu-header h1 {
    color: var(--text) !important;
    font-family: 'Inter', sans-serif !important;
    text-shadow: none !important;
}
html body .edu-header h1::before,
html body .edu-header h1::after { display: none !important; }
html body .edu-header p,
html body .edu-disclaimer,
html body .edu-disclaimer p { color: var(--text-secondary) !important; }
html body .edu-filter-bar,
html body .edu-search {
    background: #ffffff !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 16px !important;
    clip-path: none !important;
}
html body .edu-search input,
html body .edu-filter-bar input {
    background: transparent !important;
    border: none !important;
    color: var(--text) !important;
}

html body .edu-filter-pill.active {
    background: #0a0a0a !important;
    color: #ffffff !important;
    border-color: #0a0a0a !important;
}

/* Blog CTA box (within blog posts) */
html body .blog-cta {
    background: var(--bg-soft) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 18px !important;
    clip-path: none !important;
    color: var(--text) !important;
    padding: 28px !important;
}
html body .blog-cta h3,
html body .blog-cta h2 { color: var(--text) !important; }
html body .blog-cta p { color: var(--text-secondary) !important; }

/* Compare page picker + buttons */




/* Contact page — info card titles + items */
html body .contact-info-card,
html body .contact-form-card,
html body .contact-form-container {
    background: #ffffff !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 18px !important;
    clip-path: none !important;
    color: var(--text) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}
html body .contact-info-card h2,
html body .contact-info-card h3,
html body .contact-form-card h2,
html body .contact-form-card h3 { color: var(--text) !important; }
html body .contact-info-card p,
html body .contact-info-card span,
html body .contact-info-card a,
html body .contact-item p,
html body .contact-item span,
html body .contact-item a {
    color: var(--text-secondary) !important;
}
html body .contact-item a:hover { color: var(--accent-dark) !important; }
html body .contact-item i {
    color: var(--accent-dark) !important;
    background: var(--bg-soft) !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    clip-path: none !important;
}
html body .social-icon {
    clip-path: none !important;
    border-radius: 50% !important;
    background: var(--bg-soft) !important;
    color: var(--text) !important;
    border: 1px solid var(--border-light) !important;
}
html body .social-icon:hover {
    background: var(--text) !important;
    color: #ffffff !important;
}

/* Protocol page goal-card (used internally) */
html body .protocol-page .goal-card,
html body .protocol-page button.goal-card {
    clip-path: none !important;
    border-radius: 20px !important;
}

/* COA page — search + filter pills */
html body .coa-search,
html body .coa-filter,
html body .coa-card {
    clip-path: none !important;
    border-radius: 16px !important;
}

html body .coa-filter-pill.active {
    background: #0a0a0a !important;
    color: #ffffff !important;
    border-color: #0a0a0a !important;
}

/* Order tracking page */


/* 404 page */

html body .error-404 .error-code { color: var(--accent-dark) !important; }
/* But keep headings white inside dark contexts (pill bg, gradient bg) */
html body main .quality-tab.active,
html body main .btn-primary,
html body main .toast {
    color: #ffffff !important;
}


/* ============================================================
   R6-D. PRESET / STACK BUILDER (bundles.html)
   ============================================================ */
html body .preset-card,
html body .stack-card,
html body .preset-item,
html body .builder-tile {
    background: #ffffff !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 16px !important;
    color: var(--text) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
    padding: 14px 18px !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin-bottom: 10px !important;
}

html body .preset-card:hover,
html body .stack-card:hover,
html body .builder-tile:hover {
    border-color: var(--border-medium) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
    transform: translateY(-2px) !important;
}


html body .preset-item-dose,
html body .tier-qty,
html body .preset-item-icon {
    font-family: 'Inter', sans-serif !important;
    color: var(--text-muted) !important;
}





html body .preset-savings-badge,
html body .tier-pct {
    background: var(--accent-dark) !important;
    color: #ffffff !important;
    font-family: 'Inter', sans-serif !important;
    border-radius: 999px !important;
    padding: 4px 14px !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    display: inline-block !important;
    text-align: center !important;
    border: none !important;
    box-shadow: 0 2px 6px rgba(20, 184, 166, 0.20) !important;
}
/* tier-pct was teal-on-teal (invisible). The wrapper is .tier-card
   (not .tier-tile). Force white text + larger specificity to win
   against `.tier-card .tier-pct { color: var(--cy-cyan-bright) }`. */
html body .tier-card .tier-pct,
html body .tier-tile .tier-pct,
html body .tier-card.is-active .tier-pct,
html body .tier-card .tier-pct *,
html body .tier-tile .tier-pct *,
html body div.tier-pct {
    color: #ffffff !important;
    text-shadow: none !important;
    font-family: 'Inter', sans-serif !important;
}
html body .preset-add-btn {
    background: #0a0a0a !important;
    color: #ffffff !important;
    border: 1px solid #0a0a0a !important;
    border-radius: 999px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0.1px !important;
}
html body .preset-add-btn:hover { background: #2a2a2a !important; }


/* ============================================================
   R6-E. AUTH FORMS (account.html, affiliate.html sign-in)
   ============================================================ */
/* The .auth-input-wrap is the wrapper around password fields (so the
   eye toggle can be absolutely positioned). The inner <input> already
   has its own border + bg from .auth-field input — don't double-up.
   Leave the wrapper as transparent + position: relative only. */
html body .auth-input-wrap {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    position: relative !important;
}
html body .auth-input-wrap:focus-within {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
html body .auth-submit {
    background: #0a0a0a !important;
    color: #ffffff !important;
    border: 1px solid #0a0a0a !important;
    border-radius: 999px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    text-transform: none !important;
    letter-spacing: 0.1px !important;
    padding: 14px 24px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10) !important;
    clip-path: none !important;
    background-image: none !important;
    width: 100% !important;
    margin-top: 8px !important;
}
html body .auth-submit:hover {
    background: #2a2a2a !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18) !important;
    transform: translateY(-1px) !important;
}
html body .auth-google {
    background: #ffffff !important;
    color: var(--text) !important;
    border: 1.5px solid var(--border-medium) !important;
    border-radius: 999px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0.1px !important;
}
html body .auth-google:hover {
    border-color: var(--text) !important;
    background: var(--bg-soft) !important;
}
html body .auth-divider,
html body .forgot-link {
    font-family: 'Inter', sans-serif !important;
    color: var(--text-muted) !important;
}


/* ============================================================
   R6-F. PRODUCT CATALOG SEARCH + TRACK BUTTON
   ============================================================ */
html body .product-search,
html body input.product-search,
html body .product-search-input {
    background: #ffffff !important;
    border: 1px solid var(--border-medium) !important;
    border-radius: 999px !important;
    padding: 12px 18px !important;
    font-family: 'Inter', sans-serif !important;
    color: var(--text) !important;
    box-shadow: none !important;
}
/* The .product-search wrapper contains <i.fa-search> + <input>. Make
   it a flex row so the icon sits first and the input takes remaining
   width with a small gap. The icon must be center-aligned vertically
   with the input text (not stuck at the top of the pill). */
html body div.product-search {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
/* The input was `width: 100%` so it ignored the flex layout and
   overlapped horizontally with the icon. Use `flex: 1 1 0` so it
   takes only the REMAINING width after the icon + gap. */
html body input#product-search,
html body div.product-search > input,
html body div.product-search > input#product-search {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
}
html body div.product-search > i,
html body div.product-search > i.fa-search,
html body div.product-search > i.fas {
    color: var(--text-muted) !important;
    font-size: 0.95rem !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    /* CRITICAL: a legacy cyber rule had `position: absolute` on this
       icon which took it out of the flex flow — that's why the input
       overlapped horizontally. Force position: static so the icon
       participates in the flex row. */
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    /* Stretch icon to full wrap cross-axis height, then center the
       glyph inside via inline-flex. Bulletproof vertical centering. */
    align-self: stretch !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 18px !important;
}
html body .product-search:focus,
html body input.product-search:focus,
html body .product-search-input:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.12) !important;
    outline: none !important;
}
html body .product-search:focus-within {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.12) !important;
}
/* The actual <input id="product-search"> sits inside the .product-search
   pill wrapper. Make it borderless / transparent so the pill chrome
   wraps it cleanly (was a smaller rectangular box-with-border nested
   inside the pill — the "weird box overlay"). */
html body input#product-search {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    box-shadow: none !important;
    outline: none !important;
    font-family: 'Inter', sans-serif !important;
    color: var(--text) !important;
    font-size: 0.95rem !important;
}
html body input#product-search:focus {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
/* Same fix applied to any other search inputs nested in a wrap pill */


/* Sort dropdown ("Featured") — match the pill aesthetic of the search bar */
html body select#product-sort,
html body .catalog-toolbar select,
html body select.catalog-sort {
    background-color: #ffffff !important;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
        linear-gradient(135deg, var(--text-muted) 50%, transparent 50%) !important;
    background-position: calc(100% - 18px) center, calc(100% - 13px) center !important;
    background-size: 5px 5px, 5px 5px !important;
    background-repeat: no-repeat !important;
    border: 1px solid var(--border-medium) !important;
    border-radius: 999px !important;
    padding: 12px 40px 12px 20px !important;
    font-family: 'Inter', sans-serif !important;
    color: var(--text) !important;
    font-size: 0.92rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    box-shadow: none !important;
}
html body select#product-sort:focus,
html body .catalog-toolbar select:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.12) !important;
    outline: none !important;
}
html body select#product-sort:hover,
html body .catalog-toolbar select:hover {
    border-color: var(--text) !important;
}
/* "Track Order" floating button — was teal cyber pill */
html body .track-btn {
    background: #0a0a0a !important;
    background-image: none !important;
    color: #ffffff !important;
    border: 1px solid #0a0a0a !important;
    border-radius: 999px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0.1px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18) !important;
}
html body .track-btn:hover { background: #2a2a2a !important; }
html body .product-price-original,
html body .price-strike,
html body s, html body strike {
    font-family: 'Inter', sans-serif !important;
}


/* ============================================================
   R6-G. CALCULATOR PAGE — summary cards + quick reference table
   ============================================================ */
html body .calc-page h1,
html body .calc-page h2,
html body .calc-page h3 {
    color: var(--text) !important;
    font-family: 'Inter', sans-serif !important;
}
html body .summary-value,
html body .summary-value.accent,
html body .draw-to-pill,
html body .syringe-title,
html body .quick-ref-title {
    font-family: 'Inter', sans-serif !important;
    color: var(--text) !important;
}
html body .summary-value.accent { color: var(--accent-dark) !important; font-weight: 800 !important; }
html body .draw-to-pill {
    background: var(--accent-dark) !important;
    color: #ffffff !important;
    border-radius: 999px !important;
    padding: 6px 14px !important;
}
html body .quick-ref,
html body .quick-ref-table {
    background: #ffffff !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 14px !important;
    color: var(--text) !important;
    overflow: hidden !important;
}
html body .quick-ref-table th {
    background: var(--bg-soft) !important;
    color: var(--text-muted) !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    font-size: 0.78rem !important;
}
html body .quick-ref-table td {
    color: var(--text-secondary) !important;
    font-family: 'Inter', sans-serif !important;
    border-color: var(--border-light) !important;
}
html body .calc-disclaimer,
html body .calc-disclaimer strong {
    font-family: 'Inter', sans-serif !important;
    color: var(--text-muted) !important;
}


/* ============================================================
   R6-H. AFFILIATE PERKS
   ============================================================ */




/* ============================================================
   R6-I. BACK LINK (used at top of many sub-pages)
   ============================================================ */
html body a.back-link,
html body a[href].back-link,
html body a[href]:has(> i.fa-arrow-left) {
    background: transparent !important;
    color: var(--text-secondary) !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 500 !important;
    font-size: 0.92rem !important;
    text-transform: none !important;
    letter-spacing: 0.1px !important;
    border: none !important;
    box-shadow: none !important;
    padding: 8px 0 !important;
    clip-path: none !important;
    border-radius: 999px !important;
}
html body a.back-link:hover,
html body a[href]:has(> i.fa-arrow-left):hover {
    color: var(--text) !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}


/* ============================================================
   23. KILL LEGACY CLIP-PATHS + NEON BORDERS where they leak through
   ============================================================ */
body .compound,
body .calc-card,
body .protocol-card,
body .compare-card,
body .contact-form-card,
body .contact-info-card,
body .order-card,
body .ship-method-card,
body .payment-method-card,
body .checkout-card,
body .blog-card,
body .related-post-card,
body .why-card,
body .testimonial-card,
body .faq-item,
body .product-card,
body .bestseller-card,
body .stack-card,
body .preset-item,
body .aff-card,
body .aff-dashboard-card,
body .aff-stat-card,
body .account-card {
    clip-path: none !important;
}


/* ════════════════════════════════════════════════════════════════════════
   ░░░ ROUND 7 — HOMEPAGE POLISH: hero tightening, perks visibility,
   ░░░ How It Works fix, product pastel diversity, vial pop, FBT fix
   ════════════════════════════════════════════════════════════════════════ */


/* ============================================================
   R7-A. HERO SIZE FIX
   The original .hero had min-height: 100vh + flex column +
   align-items: center + justify-content: center, which centered
   content vertically and left ~220px of dead space above. Remove
   the forced min-height; let content size the hero naturally. */
html body .hero {
    min-height: 0 !important;
    height: auto !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding: 32px 24px 72px !important;
}
html body .hero-content,
html body .hero-content.hero-split {
    align-items: center !important;
    min-height: 540px !important;
    max-width: 1280px !important;
    width: 100% !important;
    margin: 0 auto !important;
}
html body .hero-trust {
    max-width: 1280px !important;
    width: 100% !important;
    margin: 32px auto 0 !important;
    justify-content: center !important;
    /* Neutralize the round-3 white-card styling that was leaving a
       phantom rounded box-shadow + border-radius shape behind the
       individual trust pills. */
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 24px 0 0 !important;
    border-top: 1px solid var(--border-light) !important;
}
/* Hide the legacy cyberpunk scan-sweep overlay that was occupying
   200px of vertical space inside the new light hero. */
html body .hero .cy-scan-sweep,
html body .hero .cy-hex-overlay,
html body .hero .hero-particles,
html body .hero .hero-bg {
    position: absolute !important;
    height: 100% !important;
    width: 100% !important;
    top: 0 !important;
    left: 0 !important;
    pointer-events: none !important;
}
html body .hero .cy-scan-sweep { display: none !important; }
html body .hero .hero-bg { z-index: 0 !important; opacity: 0.4 !important; }


/* ============================================================
   R7-B. HERO DESCRIPTION — one-line on desktop
   Was wrapping to 2 lines because max-width: 540px. Widen and
   tighten font on desktop so all four bullet points fit. */





/* ============================================================
   R7-C. HERO CTA PERKS — more visible (subtle pills)
   Was tiny gray text. Convert each item into a soft pastel pill
   with the icon in accent color, more readable. */





/* ============================================================
   R7-D. HERO TRUST STRIP — slightly bigger / more readable pills
   ============================================================ */
html body .hero-trust {
    margin-top: 32px !important;
    padding-top: 28px !important;
    border-top: 1px solid var(--border-light) !important;
    gap: 10px !important;
}
html body .hero-trust .trust-item {
    background: #ffffff !important;
    border: 1px solid var(--border-light) !important;
    color: var(--text) !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    padding: 10px 18px !important;
    border-radius: 999px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
    letter-spacing: 0 !important;
}
html body .hero-trust .trust-item i {
    color: var(--accent-dark) !important;
    font-size: 0.92rem !important;
}


/* ============================================================
   R7-E. HOW IT WORKS — kill the floating black half-circle
   The number circle was absolutely positioned at top: -20px
   poking out of the top of each card, looked unnatural.
   Embed inside card as a small pill at top. */


/* Kill the cyberpunk ::before ("STEP_" prefix) and ::after (gradient
   line) pseudo-elements that were spilling outside the new circle. */



/* ============================================================
   R7-F. VIAL POP — enhanced shadows / subtle teal glow
   Make the vials feel more "lit-from-within" and three-dimensional
   on the white pastel stages. */
html body .hero-vial-main {
    filter: var(--cy-vial-shift)
            drop-shadow(0 20px 30px rgba(20, 30, 60, 0.18))
            drop-shadow(0 4px 12px rgba(20, 184, 166, 0.18)) !important;
}
html body .hero-vial-secondary {
    filter: var(--cy-vial-shift)
            drop-shadow(0 14px 22px rgba(20, 30, 60, 0.14))
            drop-shadow(0 3px 8px rgba(20, 184, 166, 0.14)) !important;
}
html body .product-card img,
html body .bestseller-card img,
html body .product-image img,
html body .bs-image img {
    /* R440: resting filter slightly tightened for clarity — small contrast +
       saturation lift makes the label text and emerald swirl read crisper
       against the pale-mint card, and a deeper grounding shadow anchors
       the vial. All values are subtle; nothing approaches the heavy hover
       glow. */
    filter: var(--cy-vial-shift)
            contrast(1.05)
            saturate(1.06)
            drop-shadow(0 12px 22px rgba(20, 30, 60, 0.20))
            drop-shadow(0 3px 8px rgba(20, 184, 166, 0.16)) !important;
    transition: transform 0.3s ease, filter 0.3s ease !important;
}
html body .product-card:hover img,
html body .bestseller-card:hover img {
    filter: var(--cy-vial-shift)
            drop-shadow(0 16px 28px rgba(20, 30, 60, 0.20))
            drop-shadow(0 4px 12px rgba(20, 184, 166, 0.22)) !important;
    transform: translateY(-4px) scale(1.02) !important;
}


/* ============================================================
   R7-G. PRODUCT CARD PASTEL DIVERSITY
   Round-3 mapped specific product IDs to specific pastels using
   data-product-id attribute selectors. Add fallback rotation by
   nth-child so every card on every page gets a unique pastel
   stage tone even if data-product-id mapping is missing. */
html body .product-card,
html body .bestseller-card {
    background: #ffffff !important;
    overflow: hidden !important;
    position: relative !important;
}
html body .product-card .product-image,
html body .product-card .product-img-wrap,
html body .bestseller-card .product-image,
html body .bestseller-card .product-img-wrap,
html body .bestseller-card .bs-image {
    background: var(--pastel-mint) !important;
    padding: 28px 18px !important;
    border-radius: 16px !important;
    margin: 16px !important;
    transition: background 0.3s ease !important;
}

/* Rotate the pastel through 8 shades via nth-child (works on any grid) */
html body .product-card:nth-child(8n+1) .product-image,
html body .bestseller-card:nth-child(8n+1) .bs-image,
html body .product-card:nth-child(8n+1) .product-img-wrap { background: var(--pastel-mint) !important; }
html body .product-card:nth-child(8n+2) .product-image,
html body .bestseller-card:nth-child(8n+2) .bs-image,
html body .product-card:nth-child(8n+2) .product-img-wrap { background: var(--pastel-peach) !important; }
html body .product-card:nth-child(8n+3) .product-image,
html body .bestseller-card:nth-child(8n+3) .bs-image,
html body .product-card:nth-child(8n+3) .product-img-wrap { background: var(--pastel-lavender) !important; }
html body .product-card:nth-child(8n+4) .product-image,
html body .bestseller-card:nth-child(8n+4) .bs-image,
html body .product-card:nth-child(8n+4) .product-img-wrap { background: var(--pastel-sky) !important; }
html body .product-card:nth-child(8n+5) .product-image,
html body .bestseller-card:nth-child(8n+5) .bs-image,
html body .product-card:nth-child(8n+5) .product-img-wrap { background: var(--pastel-cream) !important; }
html body .product-card:nth-child(8n+6) .product-image,
html body .bestseller-card:nth-child(8n+6) .bs-image,
html body .product-card:nth-child(8n+6) .product-img-wrap { background: var(--pastel-blush) !important; }
html body .product-card:nth-child(8n+7) .product-image,
html body .bestseller-card:nth-child(8n+7) .bs-image,
html body .product-card:nth-child(8n+7) .product-img-wrap { background: var(--pastel-mint) !important; }
html body .product-card:nth-child(8n+8) .product-image,
html body .bestseller-card:nth-child(8n+8) .bs-image,
html body .product-card:nth-child(8n+8) .product-img-wrap { background: var(--pastel-peach) !important; }


/* ============================================================
   R7-H. PRODUCT PAGE — FREQUENTLY BOUGHT TOGETHER
   The thumbnails inside FBT items had rgba(15,23,42,0.6) dark navy
   bg. Convert to pastel stages, fix item tinted bg, refine layout. */
html body .pp-fbt {
    background: var(--bg) !important;
    padding: 56px 0 !important;
}
html body .pp-fbt-card {
    background: #ffffff !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 18px !important;
    padding: 32px !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
}
html body .pp-fbt-card h2,
html body .pp-fbt-card h3 {
    color: var(--text) !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 800 !important;
    margin-bottom: 8px !important;
}
html body .pp-fbt-card .pp-fbt-subtitle {
    color: var(--text-muted) !important;
    font-size: 0.92rem !important;
}
html body .pp-fbt-row {
    gap: 16px !important;
    align-items: stretch !important;
}
html body .pp-fbt-item {
    background: #ffffff !important;
    border: 1.5px solid var(--border-light) !important;
    border-radius: 16px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
html body .pp-fbt-item:hover {
    border-color: var(--accent) !important;
    box-shadow: 0 4px 14px rgba(20, 184, 166, 0.12) !important;
}
html body .pp-fbt-item.is-current {
    background: var(--bg-soft) !important;
    border: 1.5px solid var(--text) !important;
}
html body .pp-fbt-thumb {
    background: var(--pastel-mint) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    padding: 16px !important;
}
html body .pp-fbt-item:nth-child(2) .pp-fbt-thumb { background: var(--pastel-peach) !important; }
html body .pp-fbt-item:nth-child(3) .pp-fbt-thumb { background: var(--pastel-lavender) !important; }
html body .pp-fbt-item:nth-child(4) .pp-fbt-thumb { background: var(--pastel-sky) !important; }
html body .pp-fbt-thumb img {
    background: transparent !important;
    filter: var(--cy-vial-shift)
            drop-shadow(0 6px 12px rgba(20, 30, 60, 0.10)) !important;
}
html body .pp-fbt-plus {
    color: var(--text-muted) !important;
    font-weight: 700 !important;
    font-size: 1.4rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
html body .pp-fbt-name {
    color: var(--text) !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
}
html body .pp-fbt-price {
    color: var(--text) !important;
    font-weight: 700 !important;
}

html body .pp-fbt-summary {
    background: var(--bg-soft) !important;
    border-radius: 14px !important;
    padding: 20px !important;
    margin-top: 20px !important;
}
html body .pp-fbt-totals {
    color: var(--text) !important;
    font-weight: 600 !important;
}
html body .pp-fbt-total {
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    color: var(--text) !important;
}




/* ============================================================
   R7-I. ANNOUNCEMENT BAR + TRUST MARQUEE COMPACT
   Slim the trust marquee further so hero content lifts higher. */
html body .trust-marquee {
    padding: 10px 0 !important;
}
html body .trust-marquee .tm-item {
    font-size: 0.7rem !important;
    letter-spacing: 1px !important;
}
html body .announcement-bar {
    padding: 8px 20px !important;
}
html body .announcement-content {
    font-size: 0.82rem !important;
}


/* ============================================================
   R7-J. SECTION DIVIDER (peptide chain) — make it almost invisible
   ============================================================ */



/* ============================================================
   R7-K. WHY CARDS — slight refinement, more breathing room
   ============================================================ */
html body .why-grid {
    gap: 28px !important;
}
html body .why-card {
    padding: 40px 28px !important;
}
html body .why-card .why-icon {
    width: 60px !important;
    height: 60px !important;
    font-size: 1.5rem !important;
}
html body .why-card .why-stat-big {
    font-size: clamp(2.6rem, 5vw, 3.6rem) !important;
}


/* ============================================================
   R7-L. SECTION HEADER BADGE — slightly more visible
   ============================================================ */
html body .section-badge {
    background: #ffffff !important;
    border: 1px solid var(--border-light) !important;
    color: var(--text) !important;
    font-weight: 700 !important;
    padding: 6px 14px !important;
    border-radius: 999px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    letter-spacing: 1px !important;
    font-size: 0.7rem !important;
}
html body .section-badge::before {
    content: '\2022' !important;
    color: var(--accent) !important;
    margin-right: 6px !important;
    font-size: 1rem !important;
    line-height: 0 !important;
}


/* ============================================================
   R7-M. STAR ICON COLOR (must beat universal font override)
   Some star icons still showed in teal (--accent-dark) instead of
   the canonical gold/amber. Restore amber-yellow color. */
html body .testimonial-stars i,
html body .reviews-stars i,
html body .pp-rating-stars i,
html body .product-rating i,
html body .product-card .fa-star,
html body .bestseller-card .fa-star,
html body i.fa-star,
html body i.fa-star-half-alt,
html body i.fa-star-half {
    color: #f59e0b !important;
}


/* ============================================================
   R7-N. SMALL POLISH — bestsellers section
   Add a touch more space and reveal a subtle backdrop tint */
html body .bestsellers-section {
    background: var(--bg-soft) !important;
}
html body .bestsellers-grid {
    gap: 24px !important;
}


/* ============================================================
   R7-O. FOOTER LINKS — readable and Inter
   ============================================================ */
html body .footer a,
html body .footer .footer-link,
html body .footer li {
    color: var(--text-secondary) !important;
    font-family: 'Inter', sans-serif !important;
}
html body .footer a:hover { color: var(--text) !important; }


/* ============================================================
   R7-P. RESPONSIVE — tighten hero padding on mobile
   ============================================================ */
@media (max-width: 720px) {
    html body .hero {
        padding: 24px 16px 56px !important;
    }
    html body .hero-content { min-height: 0 !important; }
    
    
    html body .hero-trust .trust-item {
        font-size: 0.78rem !important;
        padding: 8px 14px !important;
    }
}


/* ════════════════════════════════════════════════════════════════════════
   ░░░ ROUND 8 — FINAL POLISH: smooth interactions, refined spacing
   ░░░ adds the small details that make the site feel premium
   ════════════════════════════════════════════════════════════════════════ */


/* ── Smooth scale + lift on goal cards ── */
html body .goal-card {
    transition: transform 0.32s cubic-bezier(0.2, 0.6, 0.2, 1),
                box-shadow 0.32s cubic-bezier(0.2, 0.6, 0.2, 1) !important;
}
html body .goal-card .goal-icon {
    transition: transform 0.32s cubic-bezier(0.2, 0.6, 0.2, 1) !important;
}
html body .goal-card:hover .goal-icon {
    transform: scale(1.08) rotate(-3deg) !important;
}


/* ── Why card subtle pop ── */
html body .why-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}
html body .why-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08) !important;
    border-color: var(--border-medium) !important;
}
html body .why-card .why-icon {
    transition: transform 0.3s ease !important;
}
html body .why-card:hover .why-icon {
    transform: scale(1.08) rotate(-4deg) !important;
}


/* ── Story stat cards: pop on hover ── */




/* ── Quality stat block: gentle scale ── */
html body .quality-panel-stat {
    transition: transform 0.32s ease !important;
}
html body .quality-panel.active .quality-panel-stat {
    transform: scale(1) !important;
}


/* ── Testimonial cards: lift on hover ── */
html body .testimonial-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
html body .testimonial-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08) !important;
}


/* ── How-step card lift ── */





/* ── Section spacing rhythm — slightly tighter so flow feels brisk ── */
html body .goals-section,
html body .why-section,
html body .how-section,
html body .quality-section,
html body .story-section,
html body .testimonials-section,
html body .bestsellers-section { padding: 88px 0 !important; }
html body .newsletter-section { padding: 96px 0 !important; }


/* ── Hero CTA gap tightened, button height aligned ── */
html body .hero-cta {
    gap: 12px !important;
}
html body .hero-cta .btn-primary,
html body .hero-cta .btn-outline {
    padding: 14px 28px !important;
    min-height: 50px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}


/* ── Hero discount callout — subtle pastel pill ── */
html body .hero-discount-callout {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.08), rgba(20, 184, 166, 0.04)) !important;
    border: 1px solid rgba(20, 184, 166, 0.20) !important;
    color: var(--text) !important;
    border-radius: 14px !important;
    padding: 12px 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 24px !important;
}
html body .hero-discount-callout i {
    color: var(--accent-dark) !important;
}
html body .hero-discount-callout strong {
    color: var(--accent-dark) !important;
}


/* ── Bestseller / Featured "View all" arrow grows on hover ── */
html body .link-arrow i {
    transition: transform 0.25s ease !important;
}
html body .link-arrow:hover i {
    transform: translateX(4px) !important;
}


/* ── Product card subtle tilt-on-hover (very gentle) ── */
html body .product-card,
html body .bestseller-card {
    transition: transform 0.32s cubic-bezier(0.2, 0.6, 0.2, 1),
                box-shadow 0.32s cubic-bezier(0.2, 0.6, 0.2, 1),
                border-color 0.25s ease !important;
}
html body .product-card:hover,
html body .bestseller-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    border-color: var(--border-medium) !important;
}


/* ── Section badge dot: subtle pulse for life ── */
@keyframes badgeDotPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.55; transform: scale(0.85); }
}
html body .section-badge::before {
    animation: badgeDotPulse 2.8s ease-in-out infinite !important;
}


/* ── Hero floating callouts: add subtle wing brand color hint ── */





/* ── Trust marquee — slow scroll for premium feel ── */
html body .trust-marquee-track {
    animation-duration: 60s !important;
}


/* ── Testimonial product line: pastel tag ── */
html body .testimonial-product {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: var(--bg-soft) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 999px !important;
    padding: 4px 12px !important;
    font-size: 0.78rem !important;
    color: var(--text-secondary) !important;
    margin: 8px 0 !important;
}
html body .testimonial-product i {
    color: var(--accent-dark) !important;
}


/* ── Newsletter input focus state ── */
html body .newsletter-input-group:focus-within {
    box-shadow: 0 4px 14px rgba(20, 184, 166, 0.18), 0 0 0 2px var(--accent) !important;
}


/* ── Quality tabs — smoother transition ── */
html body .quality-tab {
    transition: all 0.25s cubic-bezier(0.2, 0.6, 0.2, 1) !important;
}


/* ── Smooth scroll for the whole document ── */
html { scroll-behavior: smooth !important; }


/* ── Subtle entrance animation for hero on load ── */
@keyframes heroFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
html body .hero-text { animation: heroFadeIn 0.6s ease-out 0.1s both !important; }
html body .hero-visual { animation: heroFadeIn 0.7s ease-out 0.2s both !important; }


/* ── Footer column hover affordance ── */
html body .footer a {
    transition: color 0.18s ease, transform 0.18s ease !important;
    display: inline-block !important;
}
html body .footer a:hover {
    transform: translateX(2px) !important;
}


/* ── Mobile track-btn: shrink so it's not a giant circle ── */
@media (max-width: 720px) {
    html body .track-btn {
        padding: 10px 16px !important;
        font-size: 0.8rem !important;
    }
}


/* ── Polish navbar — slightly tighter on desktop ── */
html body .navbar {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    /* Shift all navbar content 3vw to the right per user request. Using
       vw so the offset scales with viewport (3% of viewport width).
       Padding-left is the cleanest mechanism — pushes the entire flex
       row (logo + nav links + actions) to the right without breaking
       any internal alignment. */
    padding-left: 3vw !important;
}


/* ── Star rating spacing ── */
html body .testimonial-stars,
html body .reviews-stars,
html body .pp-stars {
    display: inline-flex !important;
    gap: 2px !important;
    align-items: center !important;
    font-size: 0.95rem !important;
}


/* ── Product page tier-tile pop ── */
html body .pp-tier-tile {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}
html body .pp-tier-tile:hover:not(.is-active) {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08) !important;
    border-color: var(--text) !important;
}


/* ── Bestsellers section header — bottom margin tightened ── */



/* ── Universal cursor pointer on interactive elements that lacked it ── */
html body .goal-card,
html body .product-card,
html body .bestseller-card,
html body .testimonial-card,
html body .why-card,
html body .preset-card,
html body .stack-card,
html body .blog-card,
html body .related-post-card,
html body .quality-tab,
html body .filter-btn,
html body .calc-tab,
html body .preset-add-btn {
    cursor: pointer !important;
}


/* ── Print mode: simpler ── */
@media print {
    html body .hero-bg, html body .hero-particles,
    html body .cy-scan-sweep, html body .hero-float-callout {
        display: none !important;
    }
}


/* ════════════════════════════════════════════════════════════════════════
   ░░░ ROUND 9 — SECTION FLOW + DIVIDER POLISH
   ░░░ Cleaner alternating section backgrounds + subtle SVG-like
   ░░░ curve dividers using CSS gradients so transitions feel
   ░░░ intentional, not just stacked boxes.
   ════════════════════════════════════════════════════════════════════════ */


/* ── Section backgrounds — smooth and consistent.
      Previously each section had its own vertical gradient with a
      pastel band in the middle, which created visible "bands" of
      color where sections met (the blocky effect).
      Now: every section is white, with subtle pastel only inside
      cards/badges/icons for visual interest. The user can still see
      variety from the rotating product-card pastels, the goal-card
      pastels, and the hero pastel gradient. ── */
html body .hero                  {
    background:
        /* Lavender TOP of the vial showcase circle (R99) */
        radial-gradient(ellipse 35% 38% at 78% 12%, rgba(214, 197, 240, 0.72) 0%, rgba(214, 197, 240, 0.28) 50%, rgba(214, 197, 240, 0) 82%),
        /* R102: very subtle lavender at the BOTTOM — only ~1% wash so
           it's barely there, not the full hue from R100. */
        radial-gradient(ellipse 24% 28% at 78% 90%, rgba(214, 197, 240, 0.14) 0%, rgba(214, 197, 240, 0.05) 55%, rgba(214, 197, 240, 0) 82%),
        /* Lavender LEFT side of the vial showcase circle.
           R103: extended ~1% further left (width 20%->21%, center 65->64.5)
           so left edge moves from 55% to 54%. Right edge stays at 75%. */
        radial-gradient(ellipse 21% 55% at 64.5% 50%, rgba(214, 197, 240, 0.78) 0%, rgba(214, 197, 240, 0.32) 45%, rgba(214, 197, 240, 0) 80%),
        /* Lavender RIGHT side of the vial showcase circle (around x:88%) */
        radial-gradient(ellipse 32% 58% at 88% 50%, rgba(214, 197, 240, 0.82) 0%, rgba(214, 197, 240, 0.35) 45%, rgba(214, 197, 240, 0) 80%),
        /* Mint accent below the vials — restored to pre-R100 strength */
        radial-gradient(ellipse 40% 50% at 78% 92%, rgba(214, 236, 218, 0.55) 0%, rgba(214, 236, 218, 0.16) 50%, rgba(214, 236, 218, 0) 80%),
        /* Soft peach top-right corner glow */
        radial-gradient(ellipse 22% 35% at 96% 8%, rgba(248, 220, 198, 0.42) 0%, rgba(248, 220, 198, 0) 78%),
        #ffffff !important;
}
/* R82: Each section gets its own subtle pastel atmosphere via radial
   blobs so the page reads as a continuous flow of color rather than
   alternating white/grey. Blobs are positioned at opposing corners
   to "hand off" between sections — the bottom-right pastel of one
   section visually leads into the top-left pastel of the next, etc. */

/* R84: Amino-style section atmospheres — alternate SOLID PASTEL
   sections with WHITE sections so each chapter feels visibly distinct.
   Plus a strong mint→peach gradient on the newsletter CTA with
   decorative orbs in the corners (mimicking Amino's vial decoration). */

/* R86: All section backgrounds get the same vial-style fade gradient
   (linear top→bottom + SVG noise dither) so each section has the
   premium "lit-from-above" feel rather than a flat color. */

/* Why section: WHITE (slight fade from off-white) */
html body .why-section {
    background:
        var(--noise-svg-soft),
        linear-gradient(180deg, #ffffff 0%, #fbfbfb 100%) !important;
    position: relative !important;
}

/* How section: SOFT MINT fade — feature section */
html body .how-section {
    background:
        var(--noise-svg),
        linear-gradient(180deg, #ebf5e8 0%, #c8e0c2 100%) !important;
    position: relative !important;
}

/* Goals section: WHITE fade (cards inside have rotating pastels) */
html body .goals-section {
    background:
        var(--noise-svg-soft),
        linear-gradient(180deg, #ffffff 0%, #fbfbfb 100%) !important;
    position: relative !important;
}

/* Bestsellers section: SOFT LAVENDER fade */
html body .bestsellers-section {
    background:
        var(--noise-svg),
        linear-gradient(180deg, #f1ebf6 0%, #ddcdec 100%) !important;
    position: relative !important;
}

/* Quality section: WHITE fade */
html body .quality-section {
    background:
        var(--noise-svg-soft),
        linear-gradient(180deg, #ffffff 0%, #fbfbfb 100%) !important;
    position: relative !important;
}

/* Story section: WARM CREAM/PEACH fade */
html body .story-section {
    background:
        var(--noise-svg),
        linear-gradient(180deg, #faf2e6 0%, #e7d2b3 100%) !important;
    position: relative !important;
}

/* Testimonials section: WHITE (per user request — was blush, now clean white with fade) */
html body .testimonials-section {
    background:
        var(--noise-svg-soft),
        linear-gradient(180deg, #ffffff 0%, #fbfbfb 100%) !important;
    position: relative !important;
}

/* Newsletter section: SOFT SKY BLUE fade (per user request) with
   decorative orbs in corners. Tones into the brand teal while
   feeling like a closing CTA section. */
html body .newsletter-section {
    background:
        var(--noise-svg),
        linear-gradient(180deg, #e3edf6 0%, #b9cee0 100%) !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Newsletter decorative orbs — soft pastel blobs in corners */
html body .newsletter-section::before {
    content: '' !important;
    position: absolute !important;
    top: -120px !important;
    left: -80px !important;
    width: 280px !important;
    height: 280px !important;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.18) 0%, rgba(99, 102, 241, 0) 70%) !important;
    border-radius: 50% !important;
    pointer-events: none !important;
    z-index: 0 !important;
}
html body .newsletter-section::after {
    content: '' !important;
    position: absolute !important;
    bottom: -100px !important;
    right: -80px !important;
    width: 320px !important;
    height: 320px !important;
    background: radial-gradient(circle, rgba(20, 184, 166, 0.20) 0%, rgba(20, 184, 166, 0) 70%) !important;
    border-radius: 50% !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* Ensure newsletter content sits above the decorative orbs */
html body .newsletter-section > * {
    position: relative !important;
    z-index: 1 !important;
}

/* Pastel sections: white cards inside stand out against the tinted bg.
   Bestseller cards already have white bg from R30 + product card chrome;
   make sure cards on the tinted sections (.how, .bestsellers, .story,
   .testimonials) have proper white card chrome. */
html body .how-section .how-step,
html body .bestsellers-section .bestseller-card,
html body .story-section .story-stat-card,
html body .testimonials-section .testimonial-card {
    background: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 6px 20px rgba(0, 0, 0, 0.04) !important;
}

/* Smooth transition fade at the top of each tinted section so
   the change from the previous white section feels intentional,
   not abrupt. Optional subtle SVG-style "cut" at the top. */
html body .how-section::before,
html body .bestsellers-section::before,
html body .story-section::before,
html body .testimonials-section::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 60px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 100%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}
/* But not the newsletter — it has its own decorative orbs */
html body .newsletter-section::before {
    background: radial-gradient(circle, rgba(99, 102, 241, 0.18) 0%, rgba(99, 102, 241, 0) 70%) !important;
    height: 280px !important;
    width: 280px !important;
    top: -120px !important;
    left: -80px !important;
}

/* Ensure container content stays above any pseudo-element */
html body .why-section > .container,
html body .how-section > .container,
html body .goals-section > .container,
html body .bestsellers-section > .container,
html body .quality-section > .container,
html body .story-section > .container,
html body .testimonials-section > .container,
html body .newsletter-section > .container {
    position: relative !important;
    z-index: 2 !important;
}


/* ── Section-bridge: soft pastel "fade" at the top of every tinted
      section, so the change of background feels intentional. ── */
html body .why-section,
html body .goals-section,
html body .quality-section,
html body .testimonials-section,
html body .bestsellers-section {
    position: relative !important;
}
html body .why-section::before,
html body .goals-section::before,
html body .quality-section::before,
html body .testimonials-section::before,
html body .bestsellers-section::before {
    display: none !important;
}


/* ── HERO PASTEL TRANSITION — lavender hue on BOTH sides at equal
      strength so the purple is visible behind the text AND over the
      vials. All gradients fade out gently. ── */
html body .hero::before {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background:
        /* Reinforce lavender at the TOP of the vial circle */
        radial-gradient(ellipse 30% 35% at 78% 14%, rgba(208, 188, 240, 0.26) 0%, rgba(208, 188, 240, 0.09) 55%, rgba(208, 188, 240, 0) 82%),
        /* R102: very subtle bottom reinforcement (1% wash, not the
           full hue from R100) */
        radial-gradient(ellipse 22% 26% at 78% 88%, rgba(208, 188, 240, 0.08) 0%, rgba(208, 188, 240, 0.03) 55%, rgba(208, 188, 240, 0) 82%),
        /* Reinforce lavender LEFT side of vial circle. R103: matches the +1%
           left extension (width 18%->19%, center 67->66.5). */
        radial-gradient(ellipse 19% 50% at 66.5% 50%, rgba(208, 188, 240, 0.28) 0%, rgba(208, 188, 240, 0.10) 50%, rgba(208, 188, 240, 0) 80%),
        /* Reinforce lavender RIGHT side of vial circle (~88%) */
        radial-gradient(ellipse 28% 50% at 88% 50%, rgba(208, 188, 240, 0.30) 0%, rgba(208, 188, 240, 0.10) 50%, rgba(208, 188, 240, 0) 80%) !important;
    opacity: 1 !important;
}


/* ── Cleaner padding rhythm: each section breathes about the same ── */
html body .why-section,
html body .how-section,
html body .goals-section,
html body .bestsellers-section,
html body .quality-section,
html body .story-section,
html body .testimonials-section {
    padding: 96px 0 !important;
}
html body .newsletter-section { padding: 96px 0 !important; }


/* ── Section header consistency: same vertical rhythm, centered for
      most sections, slightly tighter spacing below title ── */
html body .why-section .section-header,
html body .how-section .section-header,
html body .goals-section .section-header,
html body .quality-section .section-header,
html body .testimonials-section .section-header,
html body .story-section .section-header {
    text-align: center !important;
    max-width: 720px !important;
    margin: 0 auto 56px !important;
}
html body .why-section .section-title,
html body .how-section .section-title,
html body .goals-section .section-title,
html body .quality-section .section-title,
html body .testimonials-section .section-title {
    margin-bottom: 14px !important;
}


/* ── Peptide-chain divider — visible flow between sections ── */



/* ── Newsletter content: tighter gradient pastel "card" with proper
      breathing room so the section feels like a confident closer ── */
html body .newsletter-content {
    margin: 0 auto !important;
    max-width: 920px !important;
}


/* ── Footer flows naturally from newsletter (no white-on-white seam) ── */
html body .footer {
    background: var(--bg-soft) !important;
    border-top: 1px solid var(--border-light) !important;
}


/* ── Pastel section "tag" before each section title so the eye knows
      "here starts a new chapter" — already styled via .section-badge ── */
html body .section-header .section-badge {
    display: inline-flex !important;
    margin-bottom: 14px !important;
}


/* ── SOCIAL PROOF TOAST — fix invisible name + cyberpunk holdouts ── */
html body .social-proof-toast {
    background: #ffffff !important;
    background-image: none !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 14px !important;
    clip-path: none !important;
    box-shadow: 0 12px 32px rgba(20, 30, 60, 0.12), 0 2px 6px rgba(20, 30, 60, 0.06) !important;
    color: var(--text) !important;
    padding: 12px 16px !important;
    overflow: hidden !important;
}
html body .social-proof-toast::before {
    background: linear-gradient(90deg, transparent 0%, var(--accent) 50%, transparent 100%) !important;
    opacity: 0.7 !important;
}
html body .sp-icon {
    background: rgba(20, 184, 166, 0.12) !important;
    border: 1px solid rgba(20, 184, 166, 0.25) !important;
    color: var(--accent-dark) !important;
    border-radius: 10px !important;
    clip-path: none !important;
    width: 38px !important;
    height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}
html body .sp-text {
    color: var(--text) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
}
html body .sp-text strong {
    color: var(--text) !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
html body .sp-text span,
html body .sp-time {
    color: var(--text-muted) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.74rem !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    display: block !important;
    margin-top: 2px !important;
}


/* ════════════════════════════════════════════════════════════════════════
   ░░░ ROUND 11 — Product detail page polish: FBT checkbox, purity trust
   ░░░ box, price-saving green pill removal
   ════════════════════════════════════════════════════════════════════════ */


/* ── FBT (Frequently Bought Together) — unify checkbox styling so the
      current product's disabled checkbox doesn't look like a different
      element from the active checkboxes. Style ALL .pp-fbt-check inputs
      as a custom teal-filled square with white check. ── */
html body input.pp-fbt-check {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 6px !important;
    border: 2px solid var(--border-medium) !important;
    background: #ffffff !important;
    cursor: pointer !important;
    position: relative !important;
    flex-shrink: 0 !important;
    transition: background 0.18s ease, border-color 0.18s ease !important;
    opacity: 1 !important;
}
html body input.pp-fbt-check:checked {
    background: var(--accent-dark) !important;
    border-color: var(--accent-dark) !important;
}
html body input.pp-fbt-check:checked::after {
    content: '' !important;
    position: absolute !important;
    inset: 3px 5px 5px 5px !important;
    border-right: 2px solid #ffffff !important;
    border-bottom: 2px solid #ffffff !important;
    transform: rotate(45deg) translate(-1px, -1px) !important;
    transform-origin: center !important;
}
html body input.pp-fbt-check:disabled {
    cursor: not-allowed !important;
    opacity: 1 !important;
}


/* ── Product page Trust Strip (99%+ HPLC Purity / COA / Temp / Discreet)
      Was rgba(15,23,42,0.4) — a dark navy translucent overlay that
      looked like a leftover dark cyber holdout. Convert to clean
      light pastel callout. ── */
html body .pp-trust {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.06) 0%, rgba(20, 184, 166, 0.02) 100%) !important;
    border: 1px solid rgba(20, 184, 166, 0.18) !important;
    border-radius: 14px !important;
    padding: 18px 22px !important;
    margin-top: 16px !important;
}
html body .pp-trust-item {
    color: var(--text) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}
html body .pp-trust-item i {
    color: var(--accent-dark) !important;
    font-size: 0.95rem !important;
    flex-shrink: 0 !important;
}


/* ── Price saving label — remove green pill highlight, make plain text
      that reads like "Save $X" with subtle accent. ── */
html body .pp-price-saving {
    background: transparent !important;
    color: var(--accent-dark) !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-left: 12px !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
}

/* Kill the animated teal text-shadow "glow" on product prices — was
   making prices pulse green every 3.5s (rule lives at line 12380:
   `.product-price, .bs-price { animation: pp-price-glow 3.5s... }`
   with @keyframes painting a teal text-shadow). */
html body .product-price,
html body .bs-price,
html body .product-price-current,
html body .bestseller-card .bs-price,
html body .product-card .product-price {
    animation: none !important;
    text-shadow: none !important;
}


/* ════════════════════════════════════════════════════════════════════════
   ░░░ ROUND 14 — bundles/stacks page fixes
   ════════════════════════════════════════════════════════════════════════ */


/* ── Stack card footer ("STACK PRICE" + sale price + Add Stack button)
      was bg: rgba(10, 22, 40, 0.4) — dark navy translucent.
      Replace with clean light cream footer separated by a top border. ── */






/* ── "YOUR STACK" Builder Summary panel was rgba(31, 41, 55, 0.55) —
      dark gray translucent. Convert to clean light card. ── */
html body .builder-summary,
html body #builder-summary {
    background: #ffffff !important;
    background-image: none !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 18px !important;
    color: var(--text) !important;
    padding: 24px !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
}
html body .builder-summary h3,
html body .builder-summary .builder-summary-title,
html body #builder-summary h3 {
    color: var(--text) !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.92rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}
html body .builder-summary h3 i,
html body #builder-summary h3 i {
    color: var(--accent-dark) !important;
}
html body .builder-empty,
html body .builder-summary p,
html body #builder-summary p {
    color: var(--text-muted) !important;
    font-family: 'Inter', sans-serif !important;
    text-align: center !important;
}


/* ── Tier tile/card selected state — was a soft teal-tinted box.
      Refine to a clean accent-bordered card. The wrapper class is
      .tier-card in markup (sometimes .tier-tile). ── */
html body .tier-tile,
html body .tier-card {
    background: #ffffff !important;
    background-image: none !important;
    border: 1.5px solid var(--border-light) !important;
    border-radius: 16px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
    cursor: pointer !important;
    clip-path: none !important;
    padding: 22px 18px !important;
}
html body .tier-tile:hover,
html body .tier-card:hover {
    border-color: var(--border-medium) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06) !important;
}
html body .tier-tile.is-active,
html body .tier-tile.selected,
html body .tier-card.is-active,
html body .tier-card.selected {
    background: rgba(20, 184, 166, 0.05) !important;
    border-color: var(--accent) !important;
    box-shadow: 0 4px 18px rgba(20, 184, 166, 0.15) !important;
}
html body .tier-vials,
html body .tier-tile > i:first-child,
html body .tier-card > i:first-child {
    color: var(--accent-dark) !important;
    font-size: 1.4rem !important;
}

html body .tier-label {
    color: var(--text-muted) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
}
html body .tier-qty {
    color: var(--text) !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    margin-top: 6px !important;
}


/* ════════════════════════════════════════════════════════════════════════
   ░░░ ROUND 12 — COA card vials + footer disclaimer + social icons
   ════════════════════════════════════════════════════════════════════════ */


/* ── COA card image background — was dark navy -> black gradient.
      Now a clean pastel "stage" matching the product card aesthetic. ── */
html body .coa-card {
    background: #ffffff !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    clip-path: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}
html body .coa-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08) !important;
    border-color: var(--border-medium) !important;
}
html body .coa-card-image {
    background: var(--pastel-mint) !important;
    padding: 24px 18px !important;
    transition: background 0.3s ease !important;
}
/* Rotate the COA card pastels through 6 shades */
html body .coa-grid .coa-card:nth-child(6n+1) .coa-card-image { background: var(--pastel-mint) !important; }
html body .coa-grid .coa-card:nth-child(6n+2) .coa-card-image { background: var(--pastel-peach) !important; }
html body .coa-grid .coa-card:nth-child(6n+3) .coa-card-image { background: var(--pastel-lavender) !important; }
html body .coa-grid .coa-card:nth-child(6n+4) .coa-card-image { background: var(--pastel-sky) !important; }
html body .coa-grid .coa-card:nth-child(6n+5) .coa-card-image { background: var(--pastel-cream) !important; }
html body .coa-grid .coa-card:nth-child(6n+6) .coa-card-image { background: var(--pastel-blush) !important; }
html body .coa-card-image img {
    filter: var(--cy-vial-shift)
            drop-shadow(0 10px 18px rgba(20, 30, 60, 0.14))
            drop-shadow(0 2px 6px rgba(20, 184, 166, 0.12)) !important;
    background: transparent !important;
}
html body .coa-card-name {
    color: var(--text) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    padding: 0 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
html body .coa-card-category {
    color: var(--accent-dark) !important;
    font-family: 'Inter', sans-serif !important;
}


/* ── Footer disclaimer — was dark navy translucent bg with light-gray
      text (invisible). Switch to clean light card with dark readable
      text. ── */
html body .footer-disclaimer {
    background: var(--bg-soft) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 14px !important;
    clip-path: none !important;
    padding: 20px 24px !important;
}
html body .footer-disclaimer p {
    color: var(--text-secondary) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.8rem !important;
    line-height: 1.6 !important;
}
html body .footer-disclaimer strong {
    color: var(--accent-dark) !important;
    font-family: 'Inter', sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}


/* ── Footer social icons — were rectangular boxes with clip-path teal
      chamfered corners (the "weird green outline"). Make them clean
      round soft buttons. ── */
html body .footer-social a,
html body .social-icons a,
html body a.social-icon {
    background: var(--bg-soft) !important;
    background-image: none !important;
    border: 1px solid var(--border-light) !important;
    color: var(--text) !important;
    border-radius: 50% !important;
    clip-path: none !important;
    width: 38px !important;
    height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease !important;
}
html body .footer-social a:hover,
html body .social-icons a:hover,
html body a.social-icon:hover {
    background: var(--text) !important;
    color: #ffffff !important;
    border-color: var(--text) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12) !important;
}


/* ── Hero pill rows differentiation — the two consecutive pill rows
      ("No Subscription / Free Shipping / Save 35%" + "500+ Orders /
      Third-Party / 99% / USA Sourced") looked redundant. Differentiate
      them: the first row stays as a light text-style group (no pill
      chrome) — they read as quick perks. The second row stays as the
      bordered trust-pill row. ── */



/* hero-trust pill row stays as the bordered chip row (already styled
   in R7-D). Keep some breathing room above so the two rows feel
   visually separated. */
html body .hero-trust {
    margin-top: 36px !important;
}


/* ════════════════════════════════════════════════════════════════════════
   ░░░ ROUND 15 — FULL-SITE QA SWEEP (May 2026)
   ░░░ Punch-list fixes from programmatic audit of every page + sidebars.
   ░░░ Working at root cause: each fix targets the cyber selector that's
   ░░░ winning and matches/beats its specificity.
   ════════════════════════════════════════════════════════════════════════ */


/* ============================================================
   R15-A. NAVBAR LINKS — kill JetBrains Mono
   The cyber rule was on `.nav-links a` (high specificity).
   Force Inter with html body prefix + matching descendant selector. */
html body .navbar .nav-links a,
html body .nav-links a,
html body nav a.nav-link,
html body nav .nav-links a {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    letter-spacing: 0.3px !important;
}


/* ============================================================
   R15-B. PAYMENT ICONS (footer) — kill clip-path polygons
   The little Visa/MC/Crypto/Zelle spans in the footer were using
   cyber chamfered corners. */
html body .payment-icons span,
html body .payment-icons > *,
html body .footer .payment-icons * {
    clip-path: none !important;
    border-radius: 6px !important;
}


/* ============================================================
   R15-C. SITEWIDE CLIP-PATH KILL — comprehensive selector list
   Every clip-path: polygon() flagged by the audit, plus common
   variants. Killing clip-path everywhere except where intentionally
   used (hero shapes via ::before/::after if any). */
html body .hero-badge,
html body .hero-discount-callout,
html body .why-grid,
html body .why-grid.cy-stagger,
html body .why-icon,
html body .how-step,
html body .how-step-icon,
html body .goal-card,
html body .goal-card.goal-mint,
html body .goal-card.goal-peach,
html body .goal-card.goal-lavender,
html body .goal-card.goal-sky,
html body .goal-card.goal-cream,
html body .goal-card.goal-blush,
html body .goal-icon,
html body .goal-arrow,
html body .bs-cart-btn,
html body .newsletter-input-group,
html body .newsletter-form input,
html body .newsletter-form button,
html body .coa-info-bar,
html body .coa-card,
html body .coa-card-image,
html body .coa-card-pass-badge,
html body .coa-card-purity-badge,
html body .coa-card-cta,
html body .coa-filter,
html body .coa-search,
html body .blog-card .tag,
html body .blog-post-card .tag,
html body span.tag,
html body .blog-tag,
html body .cart-empty-icon,
html body .wishlist-empty-icon,
html body .product-card-badge,
html body .bestseller-card-badge,
html body .pp-thumb,
html body .pp-badge,
html body .pp-tier-tile,
html body .pp-add-btn,
html body .pp-coa-btn,
html body .product-card,
html body .bestseller-card,
html body .stack-card,
html body .preset-card,
html body .preset-item,
html body .preset-item-icon,
html body .preset-savings-badge,
html body .preset-add-btn,
html body .tier-card,
html body .tier-tile,
html body .tier-vials,
html body .compound,
html body .compound-tag,
html body .builder-tile,
html body .builder-summary,
html body .compare-card,
html body .compare-picker,
html body .compare-clear,
html body .compare-preset,
html body .filter-btn,
html body .calc-card,
html body .protocol-card,
html body .contact-form-card,
html body .contact-info-card,
html body .order-card,
html body .ship-method-card,
html body .payment-method-card,
html body .checkout-card,
html body .back-link,
html body .track-btn,
html body .auth-input-wrap,
html body .auth-submit,
html body .auth-google,
html body .testimonial-card,
html body .testimonial-avatar,
html body .pp-fbt-card,
html body .pp-fbt-item,
html body .pp-fbt-thumb,
html body .pp-fbt-summary,
html body .pp-fbt-add,
html body .quality-tab,
html body .quality-tabs,
html body .product-discount-badge,
html body [class*="discount-badge"],
html body .quick-ref,
html body .draw-to-pill,
html body .calc-disclaimer,
html body .edu-filter-bar,
html body .edu-search,
html body .edu-filter-pill,
html body .modal-image,
html body .modal-content,
html body .footer-disclaimer,
html body .footer-social a,
html body .social-icon {
    clip-path: none !important;
}


/* ============================================================
   R15-D. CART SIDEBAR — kill Orbitron + JetBrains + clip-path
   Audit found these specifically inside #cart-sidebar:
   - Orbitron on H3, .cart-picks-label, .cart-pick-price
   - JetBrains on .cep-item
   - clip-path on .cart-empty-icon */
html body #cart-sidebar h2,
html body #cart-sidebar h3,
html body #cart-sidebar h4,
html body #cart-sidebar .cart-picks-label,
html body #cart-sidebar .cart-pick-price,
html body #cart-sidebar .cart-pick-name,
html body #cart-sidebar .cart-item-name,
html body #cart-sidebar .cart-item-price,
html body #cart-sidebar .cart-total,
html body #cart-sidebar .cart-empty-text,
html body #cart-sidebar .cep-item,
html body #cart-sidebar * {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}
html body #cart-sidebar .fas,
html body #cart-sidebar .far,
html body #cart-sidebar .fab,
html body #cart-sidebar [class*="fa-"] {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "FontAwesome" !important;
}
html body #cart-sidebar .cart-empty-icon,
html body #cart-sidebar [class*="cart-"]:not(.cart-pick-add):not(.cart-checkout-btn),
html body #cart-sidebar .cart-pick {
    clip-path: none !important;
}


/* ============================================================
   R15-E. WISHLIST SIDEBAR — same treatment (preventive)
   Audit showed clean but apply Inter font as defense. */
html body #wishlist-sidebar *:not(.fas):not(.far):not(.fab):not([class*="fa-"]) {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}
html body #wishlist-sidebar .fas,
html body #wishlist-sidebar .far,
html body #wishlist-sidebar .fab,
html body #wishlist-sidebar [class*="fa-"] {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "FontAwesome" !important;
}


/* ============================================================
   R15-F. CONTACT PAGE INVISIBLE SPAN
   The audit flagged a SPAN with white text on white. Force readable
   color on all contact card text content. */
html body .contact-page span:not(.checkmark):not([class*="fa-"]):not(.social-icon),
html body .contact-section span:not(.checkmark):not([class*="fa-"]):not(.social-icon),
html body .contact-info-card span,
html body .contact-form-card span,
html body .contact-item span {
    color: var(--text-secondary) !important;
}
html body .contact-info-card strong,
html body .contact-form-card strong,
html body .contact-item strong {
    color: var(--text) !important;
}


/* ============================================================
   R15-G. EDUCATION PAGE STRONG warning
   Was amber rgb(252,211,77) which is actually fine but make sure
   it has enough contrast on light bg by darkening the amber. */
html body .edu-disclaimer strong,
html body .education-page strong.warning,
html body .edu-page .disclaimer strong {
    color: #b45309 !important;
}


/* ============================================================
   R15-H. NAVBAR LINK ACTIVE STATE — ensure active link reads
   in Inter, not Orbitron/JetBrains, and has correct color. */
html body .nav-links a.active,
html body nav .nav-links a.active {
    font-family: 'Inter', sans-serif !important;
    color: var(--accent-dark) !important;
    font-weight: 600 !important;
}


/* ============================================================
   R15-I. DROPDOWN nav items — Inter font defense
   The Tools/Company dropdown items shouldn't be JetBrains. */
html body .nav-dropdown-toggle,
html body .nav-dd-item,
html body .nav-dropdown-menu a,
html body .nav-dropdown-menu button {
    font-family: 'Inter', sans-serif !important;
}


/* ============================================================
   R15-J. COA badges — match light theme pill aesthetic
   The PASS / 99.X% badges had cyber clip-paths. Now rounded pills. */
html body .coa-card-pass-badge {
    background: rgba(20, 184, 166, 0.12) !important;
    color: var(--accent-dark) !important;
    border: 1px solid rgba(20, 184, 166, 0.30) !important;
    border-radius: 999px !important;
    padding: 4px 12px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.5px !important;
}
html body .coa-card-purity-badge {
    background: var(--bg-soft) !important;
    color: var(--text) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 999px !important;
    padding: 4px 12px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.72rem !important;
}
html body .coa-card-cta {
    background: #0a0a0a !important;
    color: #ffffff !important;
    border: 1px solid #0a0a0a !important;
    border-radius: 0 0 16px 16px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0.1px !important;
}
html body .coa-card-cta:hover {
    background: #2a2a2a !important;
}



/* ============================================================
   R15-K. NAVBAR LOGO — original logo.png (blue wing, no text) +
   teal hue-rotate filter + text wordmark beside it on the right.
   ============================================================ */
html body .nav-logo {
    align-items: center !important;
    gap: 12px !important;
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    text-decoration: none !important;
}
html body .nav-logo .nav-logo-img {
    /* logo-wing-clean.png — brand green wing, transparent bg, no
       baked-in text. Sized so the wing visually anchors the navbar.
       Slight translate up + left for visual balance against the
       ELYTRA LABS wordmark beside it. */
    height: 48px !important;
    width: auto !important;
    margin: 0 !important;
    animation: none !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.10)) !important;
    object-fit: contain !important;
    object-position: center !important;
    flex-shrink: 0 !important;
    transform: translate(-7px, -5px) !important;
}
html body .navbar.scrolled .nav-logo .nav-logo-img {
    height: 39px !important;
}
/* Hover: SAME filter (no hue-shift, no brightness change). Keep the
   base translate + lift 1px more on hover. */
html body .nav-logo:hover .nav-logo-img {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15)) !important;
    transform: translate(-7px, -6px) !important;
}
/* Force the wordmark to display INLINE next to the wing (never below)
   so there's no "white text underneath" the image. */
html body .nav-logo .nav-logo-text,
html body .nav-logo-text {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    gap: 6px !important;
    visibility: visible !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}
html body .nav-logo .nav-logo-text .logo-text,
html body .nav-logo-text .logo-text {
    font-family: 'Orbitron', sans-serif !important;
    font-weight: 800 !important;
    color: var(--text) !important;
    font-size: 1.25rem !important;
    letter-spacing: 1.5px !important;
}
html body .nav-logo .nav-logo-text .logo-sub,
html body .nav-logo-text .logo-sub {
    font-family: 'Orbitron', sans-serif !important;
    font-weight: 600 !important;
    color: var(--accent-dark) !important;
    font-size: 0.78rem !important;
    letter-spacing: 2px !important;
}


/* ============================================================
   R15-L. SECTION TRANSITIONS — restore subtle visible separators
   User noticed sections were just stacking on top of each other
   with no visual break. Add a hairline + a small centered accent
   between every consecutive section so the eye gets a cue. */
html body section + section,
html body section + .peptide-chain-divider + section,
html body .hero + section,
html body .testimonials-section + .newsletter-section,
html body .goals-section + .bestsellers-section,
html body .quality-section + .story-section {
    position: relative !important;
}
html body main > section:not(:first-child)::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 60px !important;
    height: 3px !important;
    background: var(--accent) !important;
    border-radius: 2px !important;
    opacity: 0.35 !important;
    pointer-events: none !important;
    z-index: 2 !important;
}
/* Skip on the hero (already has its own ::before pastel) and
   newsletter (has its own gradient card). Restrict the section
   accent line to specific real content sections. */
html body main > .hero::before { display: none; } /* sentinel only — actual hero::before is restored below */
html body main > .newsletter-section::before { display: none !important; }
/* The hero already has a complex ::before for the pastel gradient.
   The previous selector tried to override it with the section accent
   line. Restore the pastel gradient by re-asserting it here at end. */
html body main > section.hero::before,
html body .hero::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    border-radius: 0 !important;
    opacity: 1 !important;
    /* Pastel cluster lives on the RIGHT half of the hero, centered
       around the vials. Strongest hue under the main vial, bleeds
       softly to the LEFT of the vial area (down to roughly the
       middle of the hero — NOT the far-left of the screen) and
       falls off to white where the hero text sits. */
    background:
        /* Main lavender wash centered behind the vials — halfway
           between original #ECE6F5 and deeper #D9C9F0:
           #E3D8F3 / rgb(227, 216, 243). Medium spread. */
        radial-gradient(ellipse 55% 80% at 75% 50%, rgba(227, 216, 243, 0.95) 0%, rgba(227, 216, 243, 0.52) 38%, rgba(227, 216, 243, 0) 75%),
        /* Soft lavender bleed to the LEFT of the vial area */
        radial-gradient(ellipse 38% 62% at 53% 55%, rgba(227, 216, 243, 0.50) 0%, rgba(227, 216, 243, 0.20) 48%, rgba(227, 216, 243, 0) 82%),
        /* Mint accent below the vials */
        radial-gradient(ellipse 48% 58% at 74% 89%, rgba(218, 238, 222, 0.68) 0%, rgba(218, 238, 222, 0.25) 40%, rgba(218, 238, 222, 0) 75%),
        /* Soft peach top-right glow */
        radial-gradient(ellipse 35% 50% at 92% 15%, rgba(244, 227, 214, 0.55) 0%, rgba(244, 227, 214, 0) 75%) !important;
    z-index: 0 !important;
    pointer-events: none !important;
    display: block !important;
}


/* ============================================================
   R17-A. NAVBAR / TRUST-MARQUEE LAYOUT
   The navbar is position: fixed; top: 38px (JS sets the 38 to clear
   the announcement bar). Main starts at y=38 with no padding-top,
   so the trust-marquee (first child of main) renders at y=38
   completely BEHIND the navbar. Push main down by the navbar height
   so the trust marquee starts directly below the navbar with no
   visible gap.
   ============================================================ */
html body main#main-content,
html body main {
    /* navbar height (76) + a small gap (8px) so the marquee sits
       slightly below the navbar — matches the spacing the user
       liked previously. */
    padding-top: 84px !important;
}
html body .navbar {
    border-bottom: 1px solid var(--border-light) !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02) !important;
    margin-bottom: 0 !important;
}
html body .trust-marquee {
    margin-top: 0 !important;
    border-top: 1px solid var(--border-light) !important;
    border-bottom: 1px solid var(--border-light) !important;
}


/* ============================================================
   R17-B. NAV SEARCH — small icon-only by default, expands on
   hover/focus (Amino-style). Replaces the wide pill input.
   ============================================================ */
html body .nav-search {
    background: #ffffff !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 999px !important;
    padding: 0 !important;
    margin-right: 6px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    width: 40px !important;
    height: 40px !important;
    overflow: hidden !important;
    transition: width 0.32s cubic-bezier(0.2, 0.6, 0.2, 1),
                max-width 0.32s cubic-bezier(0.2, 0.6, 0.2, 1),
                background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease !important;
    align-items: center !important;
    gap: 0 !important;
}
html body .nav-search > i {
    color: var(--text) !important;
    font-size: 0.95rem !important;
    flex-shrink: 0 !important;
    width: 40px !important;
    height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}

/* Expand on hover OR when focus is inside */
html body .nav-search:hover,
html body .nav-search:focus-within {
    min-width: 260px !important;
    max-width: 260px !important;
    width: 260px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
    border-color: var(--accent) !important;
}
html body .nav-search:hover .nav-search-input,
html body .nav-search:focus-within .nav-search-input {
    opacity: 1 !important;
    padding: 0 14px 0 4px !important;
}
@media (max-width: 768px) {
    html body .nav-search { display: none !important; }
}


/* ============================================================
   R18. SEARCH ICON BUTTON + FULL-SCREEN SEARCH MODAL (Amino-style)
   ============================================================ */
html body .nav-search-trigger {
    background: #ffffff !important;
    border: 1px solid var(--border-light) !important;
    color: var(--text) !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    margin-right: 6px !important;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease !important;
    font-family: inherit !important;
    padding: 0 !important;
    box-shadow: none !important;
    clip-path: none !important;
}
html body .nav-search-trigger:hover {
    background: var(--bg-soft) !important;
    border-color: var(--border-medium) !important;
    transform: translateY(-1px) !important;
}
html body .nav-search-trigger > i {
    color: var(--text) !important;
    font-size: 0.92rem !important;
}

/* Modal overlay — solid dark for clean contrast */
html body .search-modal {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(12, 16, 26, 0.94) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    z-index: 10000 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.22s ease !important;
    overflow-y: auto !important;
    padding: 80px 24px 40px !important;
}
html body .search-modal.visible {
    opacity: 1 !important;
    pointer-events: auto !important;
}
html body .search-modal-inner {
    max-width: 720px !important;
    margin: 0 auto !important;
    position: relative !important;
}
html body .search-modal-close {
    position: fixed !important;
    top: 24px !important;
    right: 28px !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.10) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.18s ease, transform 0.18s ease !important;
    z-index: 10001 !important;
}
html body .search-modal-close:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    transform: rotate(90deg) !important;
}
html body .search-modal-wrap {
    background: transparent !important;
}
html body .search-modal-input-wrap {
    position: relative !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.20) !important;
    border-radius: 16px !important;
    padding: 0 22px 0 56px !important;
    transition: background 0.18s ease, border-color 0.18s ease !important;
}
html body .search-modal-input-wrap:focus-within {
    background: rgba(255, 255, 255, 0.10) !important;
    border-color: rgba(20, 184, 166, 0.75) !important;
}
html body .search-modal-input::placeholder {
    color: rgba(255, 255, 255, 0.55) !important;
    font-weight: 400 !important;
}
/* Universal input-rule from the light theme forces every input to
   white bg + dark text. Override here so the search modal input
   stays transparent on the dark backdrop. Specificity beats it. */
html body input#search-modal-input,
html body input.search-modal-input,
html body .search-modal input[type="search"] {
    background: transparent !important;
    background-image: none !important;
    background-color: transparent !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 24px 0 !important;
    font-size: 1.25rem !important;
    font-weight: 500 !important;
}
html body input#search-modal-input:focus,
html body .search-modal input[type="search"]:focus {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}
html body .search-modal-icon {
    position: absolute !important;
    top: 50% !important;
    left: 22px !important;
    transform: translateY(-50%) !important;
    color: rgba(255, 255, 255, 0.50) !important;
    font-size: 1rem !important;
}
html body .search-modal-input {
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    color: #ffffff !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 1.25rem !important;
    font-weight: 500 !important;
    padding: 24px 0 !important;
    box-shadow: none !important;
}
html body .search-modal-input::placeholder {
    color: rgba(255, 255, 255, 0.40) !important;
    font-weight: 400 !important;
}
html body .search-modal-meta {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    color: rgba(255, 255, 255, 0.55) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.72rem !important;
    letter-spacing: 1px !important;
    padding: 14px 4px !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}
html body .search-modal-meta strong {
    color: rgba(255, 255, 255, 0.85) !important;
    font-weight: 700 !important;
}
html body .search-modal-meta kbd,
html body .search-modal-hints kbd {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: rgba(255, 255, 255, 0.85) !important;
    border-radius: 4px !important;
    padding: 2px 6px !important;
    font-size: 0.68rem !important;
    font-family: 'JetBrains Mono', monospace !important;
    margin: 0 2px !important;
}

/* Body content (empty state + results) */
html body .search-modal-body {
    margin-top: 8px !important;
}
html body .search-modal-empty {
    text-align: center !important;
    padding: 40px 20px !important;
}
html body .search-modal-empty h3 {
    color: #ffffff !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.15rem !important;
    margin-bottom: 8px !important;
}
html body .search-modal-empty p {
    color: rgba(255, 255, 255, 0.6) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.92rem !important;
    margin-bottom: 24px !important;
}
html body .search-modal-empty a {
    color: var(--accent-light) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}
html body .search-modal-empty a:hover {
    text-decoration: underline !important;
}
html body .search-modal-suggestions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: center !important;
    margin-top: 12px !important;
}
html body .sm-pill {
    background: rgba(255, 255, 255, 0.10) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.92) !important;
    border-radius: 999px !important;
    padding: 8px 16px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: background 0.18s ease, border-color 0.18s ease !important;
}
html body .sm-pill:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
}

/* Results list */
html body .search-modal-results {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 14px !important;
    padding: 8px !important;
    margin-top: 8px !important;
}
html body .sm-result {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 12px !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    color: #ffffff !important;
    transition: background 0.18s ease !important;
}
html body .sm-result:hover,
html body .sm-result.sm-active {
    background: rgba(255, 255, 255, 0.10) !important;
}
html body .sm-result-img {
    width: 48px !important;
    height: 48px !important;
    background: var(--pastel-mint) !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
}
html body .sm-result-img img {
    max-width: 80% !important;
    max-height: 80% !important;
    object-fit: contain !important;
    filter: var(--cy-vial-shift) !important;
}
html body .sm-result-body {
    flex: 1 !important;
    min-width: 0 !important;
}
html body .sm-result-name {
    color: #ffffff !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
}
html body .sm-result-meta {
    color: rgba(255, 255, 255, 0.55) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.78rem !important;
    margin-top: 2px !important;
}
html body .sm-result-price {
    color: #ffffff !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    flex-shrink: 0 !important;
}
html body .sm-result-price-orig {
    color: rgba(255, 255, 255, 0.40) !important;
    text-decoration: line-through !important;
    font-weight: 500 !important;
    font-size: 0.82rem !important;
    margin-left: 6px !important;
}
html body .search-modal-no-results {
    text-align: center !important;
    padding: 40px 20px !important;
}
html body .search-modal-no-results h3 {
    color: #ffffff !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
}
html body .search-modal-no-results p {
    color: rgba(255, 255, 255, 0.6) !important;
    font-family: 'Inter', sans-serif !important;
}
html body .search-modal-no-results a {
    color: var(--accent-light) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}

@media (max-width: 720px) {
    html body .search-modal { padding: 60px 16px 24px !important; }
    html body .search-modal-input { font-size: 1rem !important; padding: 20px 0 !important; }
    html body .search-modal-input-wrap { padding-left: 44px !important; }
    html body .search-modal-icon { left: 16px !important; }
}

/* Account button (replaces .track-btn position in nav) */
html body .nav-actions .account-btn {
    background: #ffffff !important;
    border: 1px solid var(--border-light) !important;
    color: var(--text) !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    padding: 0 !important;
    clip-path: none !important;
}
html body .nav-actions .account-btn:hover {
    background: var(--bg-soft) !important;
    border-color: var(--border-medium) !important;
}

/* Cart button — match the size of search-trigger and account-btn (40x40
   circle). The cart-preview-label ($50, etc.) sits BELOW the button
   absolutely so it doesn't make the button itself taller. */
html body .nav-actions .cart-btn {
    background: #ffffff !important;
    background-image: none !important;
    border: 1px solid var(--border-light) !important;
    color: var(--text) !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    box-shadow: none !important;
    clip-path: none !important;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease !important;
}
html body .nav-actions .cart-btn:hover {
    background: var(--bg-soft) !important;
    border-color: var(--border-medium) !important;
    transform: translateY(-1px) !important;
}
html body .nav-actions .cart-btn > i {
    font-size: 0.95rem !important;
    color: var(--text) !important;
}
/* Cart preview label ($50, $75, etc.) — was leaking into the
   navbar/trust-marquee gap. The cart count badge on the icon
   itself already communicates "items in cart", so the dollar
   amount below the button isn't needed in the chrome. Hide it. */
html body .cart-preview-label {
    display: none !important;
}
/* Cart count badge stays positioned over the button corner */
html body .nav-actions .cart-count {
    position: absolute !important;
    top: -6px !important;
    right: -6px !important;
    background: var(--text) !important;
    color: #ffffff !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    border-radius: 999px !important;
    min-width: 18px !important;
    height: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 5px !important;
    box-shadow: 0 0 0 2px #ffffff !important;
}


/* ============================================================
   R15-M. SUBTLE BG TINT ALTERNATION (without the blocky bands)
   Instead of vertical gradients in the middle of each section
   (which created visible seams), give every other section a very
   subtle uniform tint so the eye registers them as separate
   chapters. */
/* (Section backgrounds now defined in R82 with pastel atmospheres -
   these old flat-tint overrides removed so the gradients take effect.) */


/* ════════════════════════════════════════════════════════════════════════
   ░░░ ROUND 19 — Amino-style product card layout
   ░░░ Big pastel stage block on top with subtle bottom shelf,
   ░░░ then white info area, then full-width black "View" button.
   ════════════════════════════════════════════════════════════════════════ */

html body .product-card,
html body .bestseller-card {
    background: #ffffff !important;
    overflow: hidden !important;
    position: relative !important;
    border-radius: 18px !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Pastel image block: dominates the top of the card, vial centered */
html body .product-card .product-image,
html body .product-card .product-img-wrap,
html body .bestseller-card .product-image,
html body .bestseller-card .product-img-wrap,
html body .bestseller-card .bs-image {
    padding: 32px 22px 52px !important;
    border-radius: 18px 18px 0 0 !important;
    margin: 0 !important;
    position: relative !important;
    overflow: hidden !important;
    aspect-ratio: 1 / 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* The "shelf" — a subtle darker gradient at the bottom 22% of the
   pastel block where the vial sits, giving a sense of surface. */
html body .product-card .product-image::after,
html body .bestseller-card .bs-image::after,
html body .product-card .product-img-wrap::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 28% !important;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.12) 100%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}
/* Image (vial) sits above the shelf */
html body .product-card .product-image img,
html body .bestseller-card .bs-image img,
html body .product-card .product-img-wrap img {
    position: relative !important;
    z-index: 2 !important;
    max-height: 78% !important;
    max-width: 75% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

/* White info area below */
html body .product-card .product-info,
html body .bestseller-card .bs-info {
    /* R184: actually expanded — 56px symmetric breathing room */
    padding: 18px 20px 56px !important;
    background: #ffffff !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}
html body .product-card .product-name,
html body .bestseller-card .product-name,
html body .bestseller-card .bs-name {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: var(--text) !important;
    line-height: 1.3 !important;
    margin-bottom: 4px !important;
    font-family: 'Inter', sans-serif !important;
}
html body .product-card .product-dosage,
html body .bestseller-card .product-dosage {
    font-size: 0.82rem !important;
    color: var(--text-muted) !important;
    font-weight: 500 !important;
    margin-bottom: 10px !important;
}
html body .product-card .product-rating,
html body .bestseller-card .product-rating {
    font-size: 0.82rem !important;
    color: var(--text-muted) !important;
    margin-bottom: 12px !important;
}

/* Price row: stacked "From / $X.XX" + strikethrough orig */
html body .product-card .product-price-row,
html body .bestseller-card .product-price-row {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 10px 14px !important;
    margin-bottom: 14px !important;
    margin-top: auto !important;
    padding-top: 4px !important;
}
html body .product-card .product-price,
html body .bestseller-card .product-price,
html body .bestseller-card .bs-price {
    font-size: 1.4rem !important;
    font-weight: 800 !important;
    color: var(--text) !important;
    line-height: 1 !important;
    font-family: 'Inter', sans-serif !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}
html body .product-card .product-price::before,
html body .bestseller-card .product-price::before,
html body .bestseller-card .bs-price::before {
    content: 'From' !important;
    display: block !important;
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    color: var(--text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    margin-bottom: 4px !important;
    line-height: 1 !important;
}
html body .product-card .product-price-original,
html body .bestseller-card .product-price-original {
    font-size: 0.85rem !important;
    color: var(--text-muted) !important;
    text-decoration: line-through !important;
    font-weight: 500 !important;
    align-self: flex-end !important;
    margin-bottom: 3px !important;
}

/* Full-width black "View" button: replaces the small cart icon */
html body .product-card .product-add-btn,
html body .bestseller-card .bs-cart-btn {
    background: #0a0a0a !important;
    color: #ffffff !important;
    border: 1px solid #0a0a0a !important;
    border-radius: 999px !important;
    padding: 13px 24px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.92rem !important;
    text-transform: none !important;
    letter-spacing: 0.2px !important;
    cursor: pointer !important;
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
    flex-basis: 100% !important;
    margin-top: 6px !important;
    background-image: none !important;
}
html body .product-card .product-add-btn:hover,
html body .bestseller-card .bs-cart-btn:hover {
    background: #2a2a2a !important;
    background-image: none !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16) !important;
}
/* The button's cart icon is hidden; the text 'View' is injected via
   ::after. Keeps the original markup semantically correct (icon remains
   for screen readers) but the visual is a clean text label. */
html body .product-card .product-add-btn i.fa-cart-plus,
html body .bestseller-card .bs-cart-btn i.fa-cart-plus {
    display: none !important;
}
html body .product-card .product-add-btn::after,
html body .bestseller-card .bs-cart-btn::after {
    content: 'Add to Cart' !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Wishlist heart stays in the top-right corner of the pastel block */
html body .product-card .product-wishlist-btn {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    z-index: 3 !important;
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    border: none !important;
    border-radius: 50% !important;
    width: 34px !important;
    height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--text-muted) !important;
    cursor: pointer !important;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease !important;
}
html body .product-card .product-wishlist-btn:hover {
    background: #ffffff !important;
    color: #ef4444 !important;
    transform: scale(1.05) !important;
}
html body .product-card .product-wishlist-btn.active {
    color: #ef4444 !important;
}

/* Discount / category badges over the pastel block (top-left corner) */
html body .product-card .product-card-badge {
    position: absolute !important;
    top: 14px !important;
    left: 14px !important;
    z-index: 3 !important;
}

/* Card hover: subtle lift */
html body .product-card:hover,
html body .bestseller-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04) !important;
}


/* ════════════════════════════════════════════════════════════════════════
   ░░░ ROUND 20 — Amino product card fixes (clean rewrite)
   ░░░ 1) Badge stacking (discount sits below category badge, not on top)
   ░░░ 2) Price row: 'From / $price  $orig-strike / View' stacked left
   ░░░ 3) Taller pastel block, bigger vial
   ░░░ 4) More saturated card pastels (scoped to .product-card only)
   ════════════════════════════════════════════════════════════════════════ */

/* --- 1) BADGES: round chip styling + stack the 2nd one below the 1st.
       Using sibling combinator means we don't need to override inline styles. */
html body .product-card .product-card-badge {
    position: absolute !important;
    top: 14px !important;
    left: 14px !important;
    z-index: 3 !important;
    border-radius: 999px !important;
    padding: 5px 11px !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-transform: uppercase !important;
}
html body .product-card .product-card-badge + .product-card-badge {
    top: 46px !important;
}

/* --- 2) PRICE ROW + BUTTON
       Markup order:
         <span class="product-price-original">$90.00</span>
         <span class="product-price">$75.00</span>
         <button class="product-add-btn">View</button>
       Layout target:
         FROM                       <- ::before label on the row
         $75.00   $90.00(strike)    <- price + strikethrough on one line
         [─────── View ───────]     <- full width pill below

       We use flex-wrap + flex-basis:100% on the button so it breaks to its
       own line. We use flex-direction:row + order so price comes first
       and the strikethrough comes after it on the same line.                */
html body .product-card .product-price-row,
html body .bestseller-card .product-price-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    justify-content: flex-start !important;
    gap: 0 12px !important;
    /* R182: truly back to ORIGINAL — margin-top: auto pushes price-row
       to the bottom of the info container so buttons align across all
       cards. This is what the layout was before I started touching it. */
    margin-top: auto !important;
    margin-bottom: 0 !important;
    padding-top: 4px !important;
}

/* R179: REVERTED R178's min-height/line-clamp on product-name — it
   was creating a gap below short names like "GLP-3 (RT)" because the
   name was reserving 2 lines of space even when only 1 was used.
   Layout returns to letting each name take its natural height. */
html body .product-card .product-price-row::before {
    content: 'From' !important;
    flex-basis: 100% !important;   /* full row -> forces next item to new line */
    font-size: 0.66rem !important;
    font-weight: 700 !important;
    color: var(--text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 1.4px !important;
    line-height: 1 !important;
    margin-bottom: 6px !important;
    order: 0 !important;
}
html body .product-card .product-price,
html body .bestseller-card .product-price {
    order: 1 !important;
    font-size: 1.45rem !important;
    font-weight: 800 !important;
    color: var(--text) !important;
    line-height: 1 !important;
    font-family: 'Inter', sans-serif !important;
    /* override any inline-block / column-flex from R19 */
    display: inline-block !important;
}
/* Remove R19's ::before "From" injection on the price itself — the row now
   owns the label so it sits above the entire price line. */
html body .product-card .product-price::before,
html body .bestseller-card .product-price::before,
html body .bestseller-card .bs-price::before {
    content: none !important;
    display: none !important;
}
html body .product-card .product-price-original,
html body .bestseller-card .product-price-original {
    order: 2 !important;
    font-size: 0.95rem !important;
    color: #9b9ba3 !important;
    text-decoration: line-through !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    align-self: baseline !important;
}
html body .product-card .product-add-btn,
html body .bestseller-card .bs-cart-btn {
    order: 99 !important;
    flex-basis: 100% !important;    /* forces button onto its own line */
    /* R184: 56px to match padding-bottom — actual visible expansion */
    margin-top: 56px !important;
}

/* --- 3) PASTEL BLOCK: taller + bigger vial */
html body .product-card .product-image,
html body .product-card .product-img-wrap,
html body .bestseller-card .product-image,
html body .bestseller-card .bs-image {
    aspect-ratio: 5 / 6 !important;
    padding: 28px 24px 60px !important;
}
html body .product-card .product-image img,
html body .product-card .product-img-wrap img,
html body .bestseller-card .bs-image img {
    /* R428: zoom out ~6% per user request — vials were too cropped. */
    max-height: 86% !important;
    max-width: 81% !important;
}

/* --- 4) MORE SATURATED CARD PASTELS (scoped to .product-card so hero/page
       pastels stay untouched). Per-product-id rules in earlier blocks still
       pick which token each card uses; we just redefine the tokens locally. */
html body .product-card {
    --pastel-lavender: #D5C5EE !important;
    --pastel-mint:     #C6E0C2 !important;
    --pastel-sky:      #C4D5E6 !important;
    --pastel-peach:    #F2CEB4 !important;
    --pastel-cream:    #EADEB2 !important;
    --pastel-blush:    #EDC2C2 !important;
}


/* ════════════════════════════════════════════════════════════════════════
   ░░░ ROUND 21 — Remove wishlist heart + tone down discount badge
   ════════════════════════════════════════════════════════════════════════ */

/* Hide the wishlist/like heart on product cards (kept in DOM for now in
   case we want it back later, just hidden visually). */
html body .product-card .product-wishlist-btn,
html body .bestseller-card .product-wishlist-btn,
html body .bestseller-card .bs-wishlist-btn {
    display: none !important;
}

/* Discount badge: switch from red gradient to clean black to match the View
   button. .product-card-badge-discount is set by app.js on the discount badge
   only, so the category badge keeps its own styling. */
html body .product-card .product-card-badge-discount,
html body .bestseller-card .product-card-badge-discount {
    background: #0a0a0a !important;
    background-image: none !important;
    color: #ffffff !important;
}


/* ════════════════════════════════════════════════════════════════════════
   ░░░ ROUND 22 — Drop 'From' label, burgundy discount badge
   ════════════════════════════════════════════════════════════════════════ */

/* Kill the "From" label that R20 injected via ::before on .product-price-row.
   The price + strikethrough alone communicate the deal more cleanly. */
html body .product-card .product-price-row::before {
    content: none !important;
    display: none !important;
}

/* Discount badge: white chip with charcoal text and a hairline border.
   Reads as a delicate tag rather than a sticker, works on any pastel
   background, doesn't compete with the rest of the card. */
html body .product-card .product-card-badge-discount,
html body .bestseller-card .product-card-badge-discount {
    background: #ffffff !important;
    background-image: none !important;
    color: #1a1a1a !important;
    border: 1px solid rgba(0, 0, 0, 0.10) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    font-weight: 700 !important;
}


/* ════════════════════════════════════════════════════════════════════════
   ░░░ ROUND 25 — Amino-faithful product cards (4-per-row + zoomed vials)
   ░░░ Match Amino's store layout: 4 cards per row, square pastel block
   ░░░ with the vial filling most of it, tight white info area below.
   ════════════════════════════════════════════════════════════════════════ */

/* 1) GRID: 4 cards per row on desktop. Drop to 3 / 2 / 1 on smaller widths. */
html body .products-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 24px !important;
}
@media (max-width: 1200px) {
    html body .products-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 880px) {
    html body .products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 18px !important;
    }
}
@media (max-width: 540px) {
    html body .products-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}

/* 2) PASTEL BLOCK: square, tight padding so the vial dominates.
       Amino's pastel is roughly 1:1, vial fills ~85% of the height.       */
html body .product-card .product-image,
html body .product-card .product-img-wrap,
html body .bestseller-card .bs-image {
    aspect-ratio: 1 / 1 !important;
    padding: 0 !important;             /* let the vial fill via transform */
    overflow: hidden !important;       /* shelf clips the bottom of the vial */
}

/* 3) VIAL: object-fit:contain to keep aspect ratio, then transform:scale
       so it dominates the pastel block. R27 dials scale back further to
       1.18 (was 1.40) and recenters so the FULL vial is visible — bottom
       no longer clipped by the shelf.                                      */
html body .product-card .product-image img,
html body .product-card .product-img-wrap img,
html body .bestseller-card .bs-image img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center !important;
    transform-origin: center !important;
    animation: vialFloat 5s ease-in-out infinite !important;
    transition: transform 0.45s ease !important;
    /* R433-fix: Removed `will-change: transform` — it was the source of the
       hover blur. With will-change, Chromium pins the element on its own
       GPU layer with a fixed-size raster (the resting size). When hover
       scales up, the compositor stretches that cached low-res raster
       (bilinear upscale = blur). Without will-change, the browser
       repaints the image at each transform size, so every frame is
       freshly rasterized at its actual rendered size — no upscale blur.
       backface-visibility + image-rendering: high-quality kept for the
       remaining quality wins they provide. */
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    image-rendering: high-quality !important;
    image-rendering: -webkit-optimize-contrast !important;
}

/* Float animation: 10px up-and-down bob (R37 bumped from 6px). Scale
   stays constant throughout so the vial size doesn't pulse — only the
   vertical position drifts.
   R430: scale 0.98 → 0.92 (~6% smaller at rest) per user request.
   R440: nudged 0.92 → 0.96 (~4% bigger) for "slightly more visible" vials —
   still smaller than the original 0.98 so the pastel breathing room stays. */
@keyframes vialFloat {
    0%, 100% { transform: scale(0.96) translateZ(0) translateY(0); }
    50%      { transform: scale(0.96) translateZ(0) translateY(-10px); }
}

/* Stagger animation start across cards in a row of 4 so they don't bob in
   unison — feels more organic. */
html body .products-grid .product-card:nth-child(4n+1) .product-image img { animation-delay: 0s !important; }
html body .products-grid .product-card:nth-child(4n+2) .product-image img { animation-delay: -1.2s !important; }
html body .products-grid .product-card:nth-child(4n+3) .product-image img { animation-delay: -2.5s !important; }
html body .products-grid .product-card:nth-child(4n+4) .product-image img { animation-delay: -3.7s !important; }

/* On hover, pause the float and apply a scale bump.
   R221: bumped hover scale 1.04 → 1.18 so the vial "leans in".
   R225: scale eased back 1.25 → 1.18.
   R430: scale 1.18 → 1.12 (~5% less zoom on hover per user request — also
   reduces the transform blur since less upscale of the cached raster). */
html body .product-card:hover .product-image img,
html body .product-card:hover .product-img-wrap img,
html body .bestseller-card:hover .bs-image img {
    /* R437: NO zoom-in on the vial when the card is hovered.
       R440: matches new resting scale (0.92 → 0.96). The whole-card lift
       below is what gives the hover its "alive" feel. */
    transform: translateZ(0) scale(0.96) !important;
    transition: transform 0.45s cubic-bezier(0.2, 0.6, 0.3, 1),
                filter 0.4s ease !important;
}

/* Respect reduced-motion preference — skip the float entirely.
   R222: translateZ(0) for GPU pinning even when motion is reduced. */
@media (prefers-reduced-motion: reduce) {
    html body .product-card .product-image img,
    html body .product-card .product-img-wrap img,
    html body .bestseller-card .bs-image img {
        animation: none !important;
        transform: scale(0.98) translateZ(0) !important;
    }
}

/* 4) SHELF: subtle dark gradient at the bottom of the pastel block,
       imitating Amino's "ledge under the vial" lighting cue.               */
html body .product-card .product-image::after,
html body .product-card .product-img-wrap::after,
html body .bestseller-card .bs-image::after {
    height: 26% !important;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.16) 100%) !important;
}

/* 5) Tighten the info section so the pastel block visually dominates
   R202: final 1% shave (min-height 222 → 219). */
html body .product-card .product-info,
html body .bestseller-card .bs-info {
    padding: 16px 16px 22px !important;
    min-height: 219px !important;
}
html body .product-card .product-name,
html body .bestseller-card .bs-name {
    font-size: 1rem !important;
    margin-bottom: 2px !important;
}
html body .product-card .product-dosage {
    font-size: 0.78rem !important;
    margin-bottom: 8px !important;
}
html body .product-card .product-rating {
    font-size: 0.78rem !important;
    margin-bottom: 10px !important;
}
html body .product-card .product-price {
    font-size: 1.3rem !important;
}
html body .product-card .product-add-btn,
html body .bestseller-card .bs-cart-btn {
    padding: 11px 18px 15px !important;
    font-size: 0.88rem !important;
    /* R189: shrunk the gap from 22px → 14px so the price visually
       moves closer to the button (everything else stays the same). */
    margin-top: 14px !important;
}


/* ════════════════════════════════════════════════════════════════════════
   ░░░ ROUND 29 — Fix stack cards (two vials side-by-side)
   ░░░ My R25/R27 rules targeted .product-card .product-image img which
   ░░░ matched the stack cards too. The scale(0.98) + float animation
   ░░░ override the original .stack-vial rotate+translate, so both vials
   ░░░ ended up scaled and overlapping in the center, getting clipped on
   ░░░ the sides. Restore stack-specific layout + give the vials room.
   ════════════════════════════════════════════════════════════════════════ */

/* Cancel the single-vial transforms/animation when inside a stack card.
   .stack-vial selector matches the actual <img> elements rendered by
   renderProductsPageStacks(); we also fall back to .stack-image > * for
   any plain <img>. */
html body .product-card.stack-card .product-image img,
html body .stack-card .stack-image img,
html body .stack-card .stack-image .stack-vial {
    animation: none !important;
    width: auto !important;
    height: 95% !important;
    max-width: 65% !important;     /* hard cap so a single vial never overflows */
    object-fit: contain !important;
    object-position: center !important;
}

/* Reapply the stack vials' rotate/translate so they sit side-by-side
   with a tasteful overlap. Tighter translateX (was 18%) so both vials
   stay fully in frame with some breathing room on each side.            */
html body .stack-card .stack-image .stack-vial-1 {
    transform: rotate(-3deg) translateX(-14%) !important;
    z-index: 2 !important;
}
html body .stack-card .stack-image .stack-vial-2 {
    transform: rotate(3deg) translateX(14%) !important;
    z-index: 3 !important;
}
html body .stack-card .stack-image .stack-vial-3 {
    transform: rotate(0deg) translateY(-2%) !important;
    z-index: 4 !important;
}
html body .stack-card:hover .stack-image .stack-vial-1 {
    transform: rotate(-5deg) translateX(-18%) !important;
}
html body .stack-card:hover .stack-image .stack-vial-2 {
    transform: rotate(5deg) translateX(18%) !important;
}
html body .stack-card:hover .stack-image .stack-vial-3 {
    transform: rotate(0deg) translateY(-5%) !important;
}

/* Stack card pastel block: no horizontal padding now — the wider 2-per-row
   layout gives plenty of room without needing to inset the green block. */
html body .stack-card .product-image,
html body .stack-card .stack-image {
    padding: 0 !important;
    overflow: hidden !important;
}

/* CRITICAL: a legacy rule sets `align-items: center !important` on
   .stack-card (a flex column container), which prevents the .stack-image
   child from stretching to fill the card width — it stays at its intrinsic
   ~280px width and the card grows around it, leaving visible white margin.
   Override to stretch + force the image to width:100% as belt-and-braces. */
html body .stack-card {
    align-items: stretch !important;
}
html body .stack-card .stack-image,
html body .stack-card .product-image {
    width: 100% !important;
    align-self: stretch !important;
    margin: 0 !important;
}


/* ════════════════════════════════════════════════════════════════════════
   ░░░ ROUND 30 — Unified Alpha-style brand-green gradient on all cards
   ░░░ Replaces the rotating per-product pastels with ONE uniform gradient
   ░░░ that fades from near-white-mint at the top to a slightly more
   ░░░ saturated brand mint at the bottom (mirrors Alpha's pink fade).
   ░░░ Plus a soft radial highlight to give the block a "lit from above"
   ░░░ studio-photography feel.
   ════════════════════════════════════════════════════════════════════════ */

/* R37: Subtle gradient back for cool visual depth, but smooth (no shelf,
   tight color range, noise dither). Top is lighter, bottom slightly more
   saturated — enough delta to give the card "lift" without creating a
   visible transition zone. */
html body .product-card .product-image,
html body .product-card[data-category="peptide"] .product-image,
html body .product-card[data-category="blend"]   .product-image,
html body .product-card[data-category="supply"]  .product-image,
html body .product-card[data-product-id] .product-image {
    background:
        /* SVG noise: imperceptible dithering, kills 8-bit banding */
        var(--noise-svg),
        /* Faint highlight at the top so the block reads as lit from above */
        radial-gradient(ellipse 110% 60% at 50% 0%,
            rgba(255, 255, 255, 0.45) 0%,
            rgba(255, 255, 255, 0) 65%),
        /* Subtle vertical fade — pale mint top to slightly richer mint bottom */
        linear-gradient(180deg,
            #dceee0 0%,
            #c5dec1 100%) !important;
}

/* Bestseller cards get the same treatment. */
html body .bestseller-card .bs-image,
html body .bestseller-card .product-image {
    background:
        var(--noise-svg),
        radial-gradient(ellipse 110% 60% at 50% 0%,
            rgba(255, 255, 255, 0.45) 0%,
            rgba(255, 255, 255, 0) 65%),
        linear-gradient(180deg,
            #dceee0 0%,
            #c5dec1 100%) !important;
}

/* R37: Boost the .card-drift particles so they're actually visible. Were
   tiny 2-4px @ 0.5 alpha teal — barely showed up. Bump size, opacity, and
   shift to a softer brand mint so they pop against the green background. */
html body .product-card .card-drift,
html body .bestseller-card .card-drift {
    background: rgba(255, 255, 255, 0.85) !important;
    box-shadow: 0 0 8px rgba(120, 180, 130, 0.55), 0 0 14px rgba(255, 255, 255, 0.4) !important;
    width: 5px !important;
    height: 5px !important;
    opacity: 0.9 !important;
    z-index: 1 !important;
}
html body .product-card .card-drift:nth-child(2),
html body .product-card .card-drift:nth-child(5),
html body .bestseller-card .card-drift:nth-child(2),
html body .bestseller-card .card-drift:nth-child(5) {
    width: 3px !important;
    height: 3px !important;
}
html body .product-card .card-drift:nth-child(3),
html body .bestseller-card .card-drift:nth-child(3) {
    width: 6px !important;
    height: 6px !important;
}

/* R39: Particles drift upward with REAL movement. R38 used translate
   percentages which are relative to the particle's own size (~5px),
   so they barely moved. Now using pixel values — each particle sweeps
   the full vertical extent of the card image area (~280-320px tall).

   Also faster (4-7s vs 8-12s), more horizontal sway, and starts
   positions are randomized via animation-delay so the row of cards
   doesn't pulse in sync. */
@keyframes drift-up-a {
    0%   { transform: translate(0,    60px);   opacity: 0; }
    12%  { opacity: 0.95; }
    50%  { transform: translate(-12px, -100px); opacity: 0.75; }
    88%  { opacity: 0.4; }
    100% { transform: translate(-22px, -260px); opacity: 0; }
}
@keyframes drift-up-b {
    0%   { transform: translate(0,    80px);   opacity: 0; }
    14%  { opacity: 0.9; }
    50%  { transform: translate(14px, -80px);  opacity: 0.7; }
    86%  { opacity: 0.4; }
    100% { transform: translate(28px, -250px); opacity: 0; }
}
@keyframes drift-up-c {
    0%   { transform: translate(0,    50px);   opacity: 0; }
    16%  { opacity: 0.85; }
    50%  { transform: translate(-8px, -110px); opacity: 0.6; }
    84%  { opacity: 0.35; }
    100% { transform: translate(-18px, -240px); opacity: 0; }
}
@keyframes drift-up-d {
    0%   { transform: translate(0,    70px);   opacity: 0; }
    13%  { opacity: 0.9; }
    50%  { transform: translate(10px, -90px);  opacity: 0.7; }
    87%  { opacity: 0.4; }
    100% { transform: translate(20px, -270px); opacity: 0; }
}

html body .product-card .card-drift:nth-child(1),
html body .bestseller-card .card-drift:nth-child(1) {
    animation: drift-up-a 6s linear infinite 0s !important;
}
html body .product-card .card-drift:nth-child(2),
html body .bestseller-card .card-drift:nth-child(2) {
    animation: drift-up-b 7s linear infinite 1.1s !important;
}
html body .product-card .card-drift:nth-child(3),
html body .bestseller-card .card-drift:nth-child(3) {
    animation: drift-up-c 5s linear infinite 2.3s !important;
}
html body .product-card .card-drift:nth-child(4),
html body .bestseller-card .card-drift:nth-child(4) {
    animation: drift-up-d 6.5s linear infinite 3.5s !important;
}
html body .product-card .card-drift:nth-child(5),
html body .bestseller-card .card-drift:nth-child(5) {
    animation: drift-up-a 7.5s linear infinite 4.7s !important;
}
html body .product-card .card-drift:nth-child(6),
html body .bestseller-card .card-drift:nth-child(6) {
    animation: drift-up-b 5.5s linear infinite 0.5s !important;
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    html body .product-card .card-drift,
    html body .bestseller-card .card-drift {
        animation: none !important;
        opacity: 0.3 !important;
    }
}


/* ════════════════════════════════════════════════════════════════════════
   ░░░ ROUND 40 — Product DETAIL page (.pp-image-wrap) matches the cards
   ░░░ R152: REVERSED — user wants per-product pastel rotation back, same
   ░░░ as the product cards on the products page. The unified mint
   ░░░ override is gone; the per-id rules at line ~18489 (body[data-pp-id]
   ░░░ ...) now control the pastel color. Default fallback below for
   ░░░ products with no data-pp-id rule defined.
   ════════════════════════════════════════════════════════════════════════ */
html body .pp-image-wrap {
    background:
        var(--noise-svg),
        var(--pastel-mint) !important;
}

/* R161: particles weren't visible enough on the pastel — make them
   bigger, brighter, and stronger glow. Also stronger halo pulse. */

html body .pp-image-wrap {
    border: 1px solid rgba(15, 26, 44, 0.06) !important;
    box-shadow: 0 4px 14px rgba(15, 26, 44, 0.06) !important;
}
html body .pp-image-wrap:hover {
    border-color: rgba(20, 184, 166, 0.35) !important;
    box-shadow: 0 12px 30px rgba(20, 184, 166, 0.18) !important;
}

/* Halo pulse — bumped intensity so the teal glow behind the vial
   actually reads on the mint background.
   R164: explicit display: block to override line ~18483 display:none. */
html body .pp-image-wrap::before {
    display: block !important;
    background: radial-gradient(circle,
        rgba(20, 184, 166, 0.32) 0%,
        rgba(45, 212, 191, 0.18) 35%,
        transparent 65%) !important;
}

/* Grid overlay: a bit more visible */
html body .pp-image-wrap::after {
    background-image:
        linear-gradient(rgba(20, 184, 166, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(20, 184, 166, 0.06) 1px, transparent 1px) !important;
}

html body .pp-image-wrap .pp-scan-line {
    display: none !important;
}

/* Effervescence particles — R166: match the product-card .card-drift
   style — white dots with sage-green glow. */
html body .pp-image-wrap .pp-particle {
    display: block !important;
    width: 5px !important;
    height: 5px !important;
    background: rgba(255, 255, 255, 0.90) !important;
    box-shadow:
        0 0 8px rgba(120, 180, 130, 0.55),
        0 0 14px rgba(255, 255, 255, 0.40) !important;
}
/* Per-particle size tweaks (preserves visual variety) */
html body .pp-image-wrap .pp-particle:nth-child(2) { width: 6px !important; height: 6px !important; }
html body .pp-image-wrap .pp-particle:nth-child(3) { width: 10px !important; height: 10px !important; }
html body .pp-image-wrap .pp-particle:nth-child(4) { width: 6px !important; height: 6px !important; }
html body .pp-image-wrap .pp-particle:nth-child(5) { width: 8px !important; height: 8px !important; }

/* Hide the original pp-drift elements — they were unreliable */
html body .pp-image-wrap .pp-drift {
    display: none !important;
}

/* R163 — RELIABLE FLOATING GLOW DOTS via pseudo-element constellation.
   Forget the original .pp-drift elements with their broken nth-child
   rules. Use a single new pseudo-element ::after on the wrap to render
   12 glowing dots via multi-layered box-shadow. Guaranteed to render
   since it's just one CSS rule with no DOM dependencies. */
html body .pp-image-wrap::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: 12% !important;
    left: 8% !important;
    /* R166: match product-card .card-drift exactly — WHITE dots with
       sage-green glow halo (not teal solid). 5px base size. */
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.90) !important;
    box-shadow:
        /* dot 2 */
        430px 90px 0 -1px rgba(255, 255, 255, 0.90),
        430px 90px 8px 0 rgba(120, 180, 130, 0.55),
        /* dot 3 */
        -10px 320px 0 0 rgba(255, 255, 255, 0.90),
        -10px 320px 10px 1px rgba(120, 180, 130, 0.60),
        /* dot 4 */
        370px 410px 0 -1px rgba(255, 255, 255, 0.85),
        370px 410px 8px 0 rgba(120, 180, 130, 0.50),
        /* dot 5 */
        310px -34px 0 -2px rgba(255, 255, 255, 0.85),
        310px -34px 7px 0 rgba(120, 180, 130, 0.50),
        /* dot 6 */
        450px 220px 0 0 rgba(255, 255, 255, 0.90),
        450px 220px 9px 1px rgba(120, 180, 130, 0.55),
        /* dot 7 */
        65px 55px 0 0 rgba(255, 255, 255, 0.90),
        65px 55px 10px 1px rgba(120, 180, 130, 0.60),
        /* dot 8 */
        320px 270px 0 -1px rgba(255, 255, 255, 0.85),
        320px 270px 8px 0 rgba(120, 180, 130, 0.50),
        /* dot 9 */
        25px 140px 0 -2px rgba(255, 255, 255, 0.85),
        25px 140px 7px 0 rgba(120, 180, 130, 0.50),
        /* dot 10 */
        130px 450px 0 -1px rgba(255, 255, 255, 0.85),
        130px 450px 8px 0 rgba(120, 180, 130, 0.55),
        /* dot 11 */
        230px 20px 0 0 rgba(255, 255, 255, 0.90),
        230px 20px 10px 1px rgba(120, 180, 130, 0.60),
        /* dot 12 */
        220px 360px 0 -1px rgba(255, 255, 255, 0.85),
        220px 360px 8px 0 rgba(120, 180, 130, 0.55),
        /* AURA behind the base dot */
        0 0 8px 0 rgba(120, 180, 130, 0.55),
        0 0 14px 1px rgba(255, 255, 255, 0.40)
        !important;
    pointer-events: none !important;
    z-index: 3 !important;
    animation: ppDotsPulse 4s ease-in-out infinite !important;
    background-image: none !important;
    opacity: 0.92 !important;
}

/* Move the grid overlay to ::before territory by simply combining it
   with the halo. The ::before now does halo + grid. */
html body .pp-image-wrap::before {
    background:
        linear-gradient(rgba(20, 184, 166, 0.05) 1px, transparent 1px) 0 0 / 24px 24px,
        linear-gradient(90deg, rgba(20, 184, 166, 0.05) 1px, transparent 1px) 0 0 / 24px 24px,
        radial-gradient(circle,
            rgba(20, 184, 166, 0.30) 0%,
            rgba(45, 212, 191, 0.18) 35%,
            transparent 65%) !important;
    /* IMPORTANT: keep the existing positioning (centered 75% × 75% from
       inline) — only background is overridden. */
}

/* R168: more pronounced drift movement so the dots visibly travel
   like the card-drift dots on product cards */
@keyframes ppDotsPulse {
    0%   { opacity: 0.85; transform: translate(0, 0); }
    25%  { opacity: 0.95; transform: translate(10px, -8px); }
    50%  { opacity: 1.00; transform: translate(-6px, 12px); }
    75%  { opacity: 0.92; transform: translate(-12px, -10px); }
    100% { opacity: 0.85; transform: translate(0, 0); }
}


/* ════════════════════════════════════════════════════════════════════════
   ░░░ R165 — PRODUCT CARDS: ALPHA-STYLE GREEN HOVER HALO + BUTTON GLOW
   ░░░ User wants the Alpha-pharma hover effect: card lights up with a
   ░░░ brand-color glow around it, and the "Add to Cart" button also
   ░░░ gets an outer color glow matching the brand. Our brand color is
   ░░░ teal/green so the halo is teal `#14b8a6`.
   ════════════════════════════════════════════════════════════════════════ */

/* CARD: green halo glow on hover (extends below the card, like a soft
   colored shadow). Lifts slightly for that "this is alive" feel. */
html body .product-card,
html body .bestseller-card {
    transition: transform 0.32s cubic-bezier(0.2, 0.6, 0.2, 1),
                box-shadow 0.32s cubic-bezier(0.2, 0.6, 0.2, 1),
                border-color 0.32s ease !important;
}
html body .product-card:hover,
html body .bestseller-card:hover {
    transform: translateY(-4px) !important;
    box-shadow:
        /* tight inner ring */
        0 0 0 1px rgba(20, 184, 166, 0.20),
        /* nearby glow (sharp) */
        0 8px 22px rgba(20, 184, 166, 0.22),
        /* far glow (soft halo extending below) */
        0 18px 50px rgba(20, 184, 166, 0.18) !important;
    border-color: rgba(20, 184, 166, 0.25) !important;
}

/* ADD TO CART BUTTON (R169 update):
   1) Green outline/glow is ALWAYS visible (default state, not just hover)
   2) On hover, the button itself TURNS GREEN (matches Alpha's pink-fill
      hover behavior). */
html body .product-card .product-add-btn,
html body .bestseller-card .bs-cart-btn {
    background: #0a0a0a !important;
    box-shadow:
        /* R172: sage-tinted glow ring (matches card-drift glow + mint
           pastel family — harmonious with the card visual identity) */
        0 0 0 2px rgba(92, 187, 135, 0.32),
        0 6px 18px rgba(92, 187, 135, 0.22),
        0 2px 6px rgba(92, 187, 135, 0.12) !important;
    transition: background 0.25s ease,
                color 0.25s ease,
                transform 0.25s ease,
                box-shadow 0.32s cubic-bezier(0.2, 0.6, 0.2, 1) !important;
}
/* R213 — Adds options 3, 4, 5 on top of R212's 3D depth + shimmer:
   • Option 3: richer emerald palette (#10b981 → #059669) — premium SaaS feel
   • Option 4: larger soft aura — extra 14px outer halo at low opacity
   • Option 5: embossed text-shadow on "ADD TO CART" for letterpress effect
   Keeps R212's glassy 3D depth (inset highlights/darkening) and shimmer. */
html body .product-card:hover .product-add-btn,
html body .bestseller-card:hover .bs-cart-btn,
html body .product-card .product-add-btn:hover,
html body .bestseller-card .bs-cart-btn:hover {
    /* R439: shift hover from generic emerald to BRAND TEAL.
       R470: dial the hue down a touch per user — drop the bright-mint top
       stop so the gradient is just brand-teal → deep-teal (no high-mint
       highlight), and trim every halo/glow opacity ~30-50%. Still feels
       teal, just less loud. */
    background: linear-gradient(180deg,
        #14b8a6 0%,
        #0d9488 100%) !important;
    background-image: linear-gradient(180deg,
        #14b8a6 0%,
        #0d9488 100%) !important;
    color: #ffffff !important;
    /* Border matches the deep teal bottom stop for crisp definition */
    border: 1px solid #0d9488 !important;
    /* Slightly more lift than before so the press-state feel is clearer */
    transform: translateY(-2px) !important;
    /* Embossed text — slightly stronger so white text reads on teal */
    text-shadow:
        0 1px 1.5px rgba(0, 0, 0, 0.24),
        0 -1px 0 rgba(255, 255, 255, 0.10) !important;
    box-shadow:
        /* crisp teal outline — opacity 0.38 → 0.28 */
        0 0 0 1px rgba(13, 148, 136, 0.28),
        /* tight teal halo — 0.10 → 0.06 */
        0 0 0 5px rgba(20, 184, 166, 0.06),
        /* soft outer aura — 0.04 → 0.02 */
        0 0 0 12px rgba(45, 212, 191, 0.02),
        /* teal-tinted drop shadow for lift anchor — 0.22 → 0.14, 0.14 → 0.08 */
        0 10px 22px rgba(13, 148, 136, 0.14),
        0 3px 10px rgba(13, 148, 136, 0.08),
        /* GLASSY 3D DEPTH (kept, slightly softened): */
        0 1px 0 rgba(255, 255, 255, 0.55) inset,
        0 10px 16px -10px rgba(255, 255, 255, 0.45) inset,
        0 -2px 8px -2px rgba(0, 0, 0, 0.20) inset !important;
}

/* SHIMMER (R212 — option #2): continuous white shine sweeping across
   the Add-to-Cart button every ~4s. Uses ::before so it doesn't
   conflict with the ::after pseudo (which renders the "ADD TO CART"
   text). Button is set to overflow:hidden so the shimmer is clipped
   to the pill shape. */
html body .product-card .product-add-btn,
html body .bestseller-card .bs-cart-btn {
    position: relative !important;
    overflow: hidden !important;
}
html body .product-card .product-add-btn::before,
html body .bestseller-card .bs-cart-btn::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -60% !important;
    width: 40% !important;
    height: 100% !important;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.25) 50%,
        transparent 100%) !important;
    transform: skewX(-20deg) !important;
    pointer-events: none !important;
    z-index: 0 !important;
    animation: btnAddShimmer 4.5s ease-in-out infinite !important;
}
/* Keep the text (::after) above the shimmer */
html body .product-card .product-add-btn::after,
html body .bestseller-card .bs-cart-btn::after {
    position: relative !important;
    z-index: 1 !important;
}

@keyframes btnAddShimmer {
    0%   { left: -60%; opacity: 0; }
    20%  { opacity: 1; }
    50%  { left: 100%; opacity: 1; }
    70%  { opacity: 0; }
    100% { left: 120%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    html body .product-card .product-add-btn::before,
    html body .bestseller-card .bs-cart-btn::before {
        animation: none !important;
        opacity: 0 !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   R216 — Product page Add-to-Cart conversion polish.
   User asked to keep button BLACK but make it pop more with marketing
   tactics. Apply:
   • Persistent green outline ring + soft halo (always visible — visual
     priority over secondary actions)
   • Slow breathing pulse on the halo (1 cycle ≈ 2.6s — alive but not
     annoying)
   • Subtle white shimmer sweep every ~5s (tracks the eye to the CTA)
   • Slight raise + intensified halo on hover (touch-affordance)
   • Embossed text + cart-icon micro-bounce on hover (tactility cues)
   ════════════════════════════════════════════════════════════════════════ */
html body .pp-add-btn {
    position: relative !important;
    overflow: hidden !important;
    background: #0a0a0a !important;
    color: #ffffff !important;
    border: 1px solid rgba(16, 185, 129, 0.55) !important;
    /* Embossed text — slight letterpress shadow for tactility */
    text-shadow:
        0 1px 1px rgba(0, 0, 0, 0.35),
        0 -1px 0 rgba(255, 255, 255, 0.06) !important;
    /* Persistent green halo, ALWAYS visible — gives the CTA visual weight
       even when no hover. Slightly stronger than the card buttons since
       this is the page's primary conversion CTA. */
    box-shadow:
        0 0 0 2px rgba(16, 185, 129, 0.30),
        0 0 0 8px rgba(16, 185, 129, 0.08),
        0 8px 22px rgba(5, 150, 105, 0.18),
        0 2px 6px rgba(5, 150, 105, 0.14) !important;
    transition:
        transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1),
        box-shadow 0.32s cubic-bezier(0.2, 0.6, 0.2, 1),
        border-color 0.22s ease !important;
    animation: ppAddBtnPulse 2.6s ease-in-out infinite !important;
}

/* SHIMMER: white diagonal sweep — slow, premium, draws the eye */
html body .pp-add-btn::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -70% !important;
    width: 45% !important;
    height: 100% !important;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.18) 50%,
        transparent 100%) !important;
    transform: skewX(-22deg) !important;
    pointer-events: none !important;
    z-index: 0 !important;
    animation: ppAddBtnShimmer 5s ease-in-out infinite !important;
}
/* Keep label + icon above the shimmer.
   R442: exclude .cy-ripple — that element is the click-ripple visual which
   uses position:absolute + huge size (310px+) to splash beyond the button
   bounds; forcing it to position:relative pulled it into layout flow and
   ballooned the button height to ~347px for ~700ms on every click. */
html body .pp-add-btn > *:not(.cy-ripple) {
    position: relative !important;
    z-index: 1 !important;
}
/* Ripple stays absolute + non-interactive so it never affects button layout. */
html body .pp-add-btn > .cy-ripple {
    position: absolute !important;
    pointer-events: none !important;
}

/* HOVER: lift + intensified halo (no fill change — black is preserved) */
html body .pp-add-btn:hover,
html body .pp-add-btn:focus-visible {
    background: #0d0d0d !important;
    border-color: rgba(16, 185, 129, 0.80) !important;
    transform: translateY(-2px) !important;
    box-shadow:
        0 0 0 2px rgba(16, 185, 129, 0.55),
        0 0 0 10px rgba(16, 185, 129, 0.14),
        0 14px 32px rgba(5, 150, 105, 0.32),
        0 4px 10px rgba(5, 150, 105, 0.20) !important;
    /* Pause the pulse while hovered so the static glow reads cleanly */
    animation: none !important;
}

/* Cart icon micro-bounce on hover — playful affordance */
html body .pp-add-btn:hover .fa-cart-plus,
html body .pp-add-btn:hover .fas.fa-cart-plus {
    animation: ppAddBtnCartBounce 0.55s ease-in-out !important;
}

/* PULSE: slow breathing on the outer halo ring */
@keyframes ppAddBtnPulse {
    0%, 100% {
        box-shadow:
            0 0 0 2px rgba(16, 185, 129, 0.28),
            0 0 0 8px rgba(16, 185, 129, 0.06),
            0 8px 22px rgba(5, 150, 105, 0.16),
            0 2px 6px rgba(5, 150, 105, 0.12);
    }
    50% {
        box-shadow:
            0 0 0 2px rgba(16, 185, 129, 0.42),
            0 0 0 12px rgba(16, 185, 129, 0.14),
            0 10px 28px rgba(5, 150, 105, 0.24),
            0 3px 8px rgba(5, 150, 105, 0.18);
    }
}

@keyframes ppAddBtnShimmer {
    0%   { left: -70%; opacity: 0; }
    15%  { opacity: 0.9; }
    55%  { left: 110%; opacity: 0.9; }
    75%  { opacity: 0; }
    100% { left: 125%; opacity: 0; }
}

@keyframes ppAddBtnCartBounce {
    0%   { transform: translateY(0)     scale(1); }
    35%  { transform: translateY(-3px)  scale(1.08); }
    70%  { transform: translateY(1px)   scale(0.96); }
    100% { transform: translateY(0)     scale(1); }
}

/* Accessibility: respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    html body .pp-add-btn {
        animation: none !important;
    }
    html body .pp-add-btn::before {
        animation: none !important;
        opacity: 0 !important;
    }
    html body .pp-add-btn:hover .fa-cart-plus,
    html body .pp-add-btn:hover .fas.fa-cart-plus {
        animation: none !important;
    }
}


/* ════════════════════════════════════════════════════════════════════════
   ░░░ ROUND 41 / R44 / R45 — Symmetric nav shift
   ░░░ Push the logo left AND the right-side actions right by the same
   ░░░ amount, so the gap between LABS↔HOME mirrors the gap between
   ░░░ COMPANY↔search icon. With justify-content: space-between, equal
   ░░░ outward shifts on both ends preserve the middle nav alignment.
   ════════════════════════════════════════════════════════════════════════ */
/* R83 final tune: net 2.5% left shift (user pulled back 2.5% right from
   the original 5%). R85: logo only nudged ~1.75% further left.
   R203: SCOPED TO DESKTOP — these shifts truncate the logo to "ELYT" on
   mobile (the negative margins + transform push the logo off-screen at
   narrow widths). Only apply at ≥1024px. */
@media (min-width: 1024px) {
    html body .nav-logo {
        margin-left: -1.75vw !important;
    }
    html body .nav-actions {
        margin-right: -15px !important;
    }
    html body .nav-container {
        transform: translateX(-2.5vw) !important;
    }
}

/* R203b: on narrow mobile (< 480px), the "ELYTRA LABS" wordmark gets
   overlapped by the right-side icon group because both compete for
   ~375px of width. Hide the wordmark on small mobile — the wing icon
   is the brand-recognizable element and stands alone fine.
   Specificity must beat line 24437 (html body .nav-logo .nav-logo-text). */
@media (max-width: 479px) {
    html body .nav-logo .nav-logo-text,
    html body header .nav-logo .nav-logo-text {
        display: none !important;
    }
}

/* R79: User prefers nav-links centered to the VIEWPORT (not to the
   midpoint between logo and actions). The logo-to-left gap being less
   than cart-to-right gap is acceptable. Use true viewport center. */
html body .nav-links {
    transform: translateX(-50%) !important;
}

/* R79: Make Tools/Company dropdown buttons match the regular nav-link
   text exactly. They were rendering at #4a4a52 (lighter grey) — make
   them the same charcoal #1a1a1a with the same weight as other links.
   R85: bumped to weight 700 to match the bolder nav link styling. */
html body .nav-links .nav-dropdown-toggle,
html body .nav-links button.nav-dropdown-toggle {
    color: #1a1a1a !important;
    font-weight: 700 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.82rem !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    letter-spacing: inherit !important;
    cursor: pointer !important;
    transition: color 0.2s ease !important;
}
html body .nav-links .nav-dropdown-toggle:hover,
html body .nav-links .nav-dropdown:hover .nav-dropdown-toggle {
    color: #0d9488 !important;
}
html body .nav-links .nav-dropdown.active .nav-dropdown-toggle,
html body .nav-links .nav-dropdown-toggle.active {
    color: #0d9488 !important;
    font-weight: 700 !important;
}
html body .nav-links .nav-dropdown-toggle i.fa-chevron-down,
html body .nav-links .nav-dropdown-toggle i {
    font-size: 0.7em !important;
    margin-left: 4px !important;
    transition: transform 0.25s ease !important;
}
html body .nav-links .nav-dropdown:hover .nav-dropdown-toggle i {
    transform: rotate(180deg) !important;
}

/* Kill the shelf gradient entirely — that's what was creating the visible
   darker band in the bottom-middle of each card. */
html body .product-card .product-image::after,
html body .product-card .product-img-wrap::after,
html body .bestseller-card .bs-image::after {
    display: none !important;
}


/* ════════════════════════════════════════════════════════════════════════
   ░░░ ROUND 31 — Wider stack cards (2-per-row instead of 3)
   ░░░ Stack cards hold TWO vials side-by-side, so they need more
   ░░░ horizontal real estate than single-vial product cards.
   ════════════════════════════════════════════════════════════════════════ */

html body .products-stacks-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 26px !important;
}
@media (max-width: 760px) {
    html body .products-stacks-row {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }
}


/* ════════════════════════════════════════════════════════════════════════
   ░░░ ROUND 42 — Hero polish: 4 subtle effects
   ░░░ 1) Floating callout chips bob gently
   ░░░ 2) Soft pulse glow behind the main vial (re-enable heroGlowPulse)
   ░░░ 3) Slow rotation on the concentric ring behind the vials
   ░░░ 4) Shimmer sweep across the Browse Catalog CTA
   ════════════════════════════════════════════════════════════════════════ */

/* --- 1) FLOATING CALLOUT CHIPS — gentle bob, staggered */
@keyframes hfcBob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}





/* --- 2) VIAL GLOW PULSE — soft teal halo behind the main vial breathes.
       The .hero-visual::before is already positioned as the pastel stage;
       the body-level override at line 20087 set animation:none. Re-enable
       a slower, subtler version of heroGlowPulse so it reads as a gentle
       breathing halo, not a flashy throb. */
html body .hero-visual::before {
    animation: heroGlowPulse 6s ease-in-out infinite !important;
}

/* --- 3) CONCENTRIC RING ROTATION — the ::after ring rotates very slowly.
       Convert from solid to dashed border so the dashes are visible marks
       that show the rotation, then animate. 60s full revolution = barely
       perceptible motion, just adds organic life. */
html body .hero-visual::after {
    border: 1px dashed rgba(20, 184, 166, 0.32) !important;
    animation: heroRingRotate 80s linear infinite !important;
}
@keyframes heroRingRotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* --- 4) CTA SHIMMER — a diagonal light streak passes across the Browse
       Catalog button every ~5s. Scoped to the hero CTA so it doesn't fire
       on every black button site-wide. */
html body .hero-cta .btn-primary {
    position: relative !important;
    overflow: hidden !important;
}
html body .hero-cta .btn-primary::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -120% !important;
    width: 60% !important;
    height: 100% !important;
    background: linear-gradient(110deg,
        transparent 0%,
        rgba(255, 255, 255, 0) 30%,
        rgba(255, 255, 255, 0.32) 50%,
        rgba(255, 255, 255, 0) 70%,
        transparent 100%) !important;
    transform: skewX(-20deg) !important;
    animation: ctaShimmer 5s ease-in-out infinite !important;
    pointer-events: none !important;
}
@keyframes ctaShimmer {
    0%   { left: -120%; }
    60%  { left: 130%; }
    100% { left: 130%; }
}

/* Respect reduced-motion for all four effects */
@media (prefers-reduced-motion: reduce) {
    html body .hero-float-callout,
    html body .hero-visual::before,
    html body .hero-visual::after,
    html body .hero-cta .btn-primary::after {
        animation: none !important;
    }
}


/* ════════════════════════════════════════════════════════════════════════
   ░░░ DEEP AUDIT — BATCH 1 (R47)
   ░░░ Consolidate border-radius scale + fix button outline-large sizing
   ░░░ + clean up small inconsistencies found in the deep audit pass.
   ░░░ Standardized scale: 8 / 12 / 16 / 18 (product cards) / 20 / 24 / 999
   ════════════════════════════════════════════════════════════════════════ */

/* Why-cards consolidate from 22px to 20px to match goal-card + how-step */
html body .why-card { border-radius: 20px !important; }

/* Newsletter + story-visual: 32px is excessive for card containers; bring
   to 24px (large card scale) */
html body .newsletter-content { border-radius: 24px !important; }


/* Quality panels container 28 -> 24 */
html body .quality-panels { border-radius: 24px !important; }

/* Cookie banner buttons: 5px is way off the system, bring to pill 999px */
html body .cookie-btn-primary,
html body .cookie-btn-secondary {
    border-radius: 999px !important;
    padding: 8px 18px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
}

/* BUG: .btn-outline.btn-large was rendering smaller than .btn-outline
   because btn-large sets font-size to 0.82rem in legacy CSS even on
   outline variant. btn-large should be LARGER than the default. */
html body .btn-outline.btn-large {
    font-size: 1rem !important;
    padding: 15px 32px !important;
}

/* Hero callout chip radius 14 -> 16 to align with system */


/* Hero discount callout 14 -> 16 likewise */
html body .hero-discount-callout { border-radius: 999px !important; }

/* Footer disclaimer 14 -> 12 (smaller info chip) */
html body .footer-disclaimer { border-radius: 12px !important; }

/* Nav dropdown menu 14 -> 16 */
html body .nav-dropdown-menu { border-radius: 16px !important; }
html body .nav-dd-item { border-radius: 12px !important; }

/* Inputs across the site at 10px → 12px for visual consistency */
html body input[type="text"],
html body input[type="email"],
html body input[type="search"],
html body input[type="tel"],
html body input[type="number"] {
    border-radius: 12px !important;
}

/* Footer link buttons were rendering at 11.52px (way too small for footer
   nav). Bump to 14px for readability. */
html body .footer-link-btn,
html body .footer-link-btn a {
    font-size: 14px !important;
    line-height: 1.6 !important;
}

/* Footer logo text — was muted grey; bump to charcoal for brand presence */
html body .footer-logo .logo-text,
html body .footer-logo .logo-sub {
    color: #1a1a1a !important;
}

/* Trust marquee separator (◆) — combined alpha was ~0.11, nearly invisible.
   Bump opacity and base alpha so the diamonds register as legitimate dividers */
html body .tm-sep {
    color: rgba(20, 184, 166, 0.55) !important;
    opacity: 1 !important;
    font-size: 11px !important;
}

/* "How It Works" chevron connector arrows between steps — were rgba(0,0,0,0.25)
   at 0.51 opacity. Bring up to brand teal so the flow is visible. */



/* Section badge polish — was a bare white pill. Add brand-mint tint so it
   reads as a brand element, not a generic chip. */
html body .section-badge {
    background: rgba(20, 184, 166, 0.08) !important;
    color: #0d9488 !important;
    border: 1px solid rgba(20, 184, 166, 0.18) !important;
}

/* Goal-icon background was rgba(255,255,255,0.7) — fine on dark hero but
   washed-out on the pastel cards. Use solid white with a subtle shadow for
   crisper definition. */


/* Bestseller cards use --pastel-mint by default for .bs-image bg. R32
   applied the unified green gradient via .product-card / .bestseller-card,
   but the actual bs-image still had a flat fallback. Ensure parity. */
html body .bestseller-card .bs-image {
    border-radius: 18px 18px 0 0 !important;
}

/* Back-to-top button — legacy "cyber" override stripped the radius
   (border-radius: 0 + clip-path polygon) which made it look like an
   ugly angled shape. Restore a clean circular brand-green button. */
html body .back-to-top {
    background: linear-gradient(135deg, #14b8a6, #0d9488) !important;
    background-image: linear-gradient(135deg, #14b8a6, #0d9488) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 50% !important;
    clip-path: none !important;
    box-shadow: 0 6px 18px rgba(20, 184, 166, 0.30), 0 2px 4px rgba(0,0,0,0.05) !important;
}
html body .back-to-top:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 24px rgba(20, 184, 166, 0.40), 0 3px 6px rgba(0,0,0,0.08) !important;
}

/* Newsletter input — had border-radius 10px (off the 12px input system)
   and no visible border. Add a subtle border + match input scale. */
html body .newsletter-form input[type="email"],
html body #newsletter-email {
    border-radius: 999px !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    padding: 14px 22px !important;
    font-size: 1rem !important;
    background: #ffffff !important;
}

/* Newsletter input group: ensure input + button align nicely */
html body .newsletter-input-group {
    display: flex !important;
    gap: 10px !important;
    align-items: stretch !important;
    flex-wrap: wrap !important;
}

/* Story-stat-cards padding consistency */



/* ════════════════════════════════════════════════════════════════════════
   ░░░ DEEP AUDIT — BATCH 2 (R48) — Products catalog + quick-view modal
   ════════════════════════════════════════════════════════════════════════ */

/* Quick-view product modal: .modal-image was still showing the legacy
   lavender pastel (#ECE6F5) while card thumbnails + detail page use the
   unified green gradient. Apply the SAME green gradient + noise as cards. */
html body .modal-image {
    background:
        var(--noise-svg),
        radial-gradient(ellipse 110% 60% at 50% 0%,
            rgba(255, 255, 255, 0.45) 0%,
            rgba(255, 255, 255, 0) 65%),
        linear-gradient(180deg,
            #dceee0 0%,
            #c5dec1 100%) !important;
    border-radius: 18px !important;
}

/* Modal price: was light teal (#2dd4bf) which reads thin against white.
   Switch to charcoal to match the product card price treatment. */
html body #modal-price,
html body .modal-price {
    color: #0a0a0a !important;
    font-size: 1.6rem !important;
    font-weight: 800 !important;
}

/* Modal COA button: 10px radius is off the system (12 / 16 / 18 / 24).
   Bring to 12px. */
html body #modal-coa-btn,
html body .btn-coa {
    border-radius: 12px !important;
    padding: 12px 18px !important;
    font-weight: 600 !important;
}

/* Modal delivery estimate chip: 8px radius -> 12 (system). Color
   #6b6b73 on light green bg is readable but uses muted grey. Bring
   to charcoal for legibility. */
html body .modal-delivery-estimate,
html body #modal-delivery-estimate {
    border-radius: 12px !important;
    color: #1a1a1a !important;
    padding: 10px 14px !important;
}

/* Modal trust items: were getting font 12px no padding/bg. Polish them
   into actual visible chips. */
html body .modal-trust-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 0.82rem !important;
    color: #4a4a52 !important;
}
html body .modal-trust-item i { color: #0d9488 !important; }

/* Catalog status text was 11.2px (very small for "23 products found").
   Bump to 13px and lift opacity. */
html body .catalog-status {
    font-size: 0.85rem !important;
    color: #4a4a52 !important;
    padding: 12px 0 !important;
    font-weight: 500 !important;
}

/* Filter buttons consistency: ensure the Stacks filter button has the
   same border as the others (it was missing a default border) */
html body .filter-btn-stacks:not(.active) {
    border: 1px solid rgba(20, 184, 166, 0.45) !important;
    background: #ffffff !important;
    color: #0d9488 !important;
}
html body .filter-btn-stacks.active {
    background: linear-gradient(135deg, #14b8a6, #0d9488) !important;
    background-image: linear-gradient(135deg, #14b8a6, #0d9488) !important;
    color: #ffffff !important;
    border: 1px solid #0d9488 !important;
}
html body .filter-btn-stacks.active i { color: #ffffff !important; }

/* Stock urgency badges: were border-radius 0; should be pills. */
html body .stock-urgency {
    border-radius: 999px !important;
    padding: 4px 10px !important;
    font-weight: 600 !important;
}
html body .stock-urgency.critical { background: rgba(239, 68, 68, 0.12) !important; color: #b91c1c !important; }
html body .stock-urgency.low      { background: rgba(245, 158, 11, 0.14) !important; color: #b45309 !important; }
html body .stock-urgency.fast     { background: rgba(20, 184, 166, 0.14) !important; color: #0d9488 !important; }

/* Viewer count chip: was dark navy bg + medium-grey text = unreadable.
   Reskin as a small white/teal pill. */
html body .viewer-count {
    background: rgba(255, 255, 255, 0.92) !important;
    color: #1a1a1a !important;
    border-radius: 999px !important;
    padding: 4px 10px !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
}
html body .viewer-count .vc-dot {
    background: #10b981 !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    display: inline-block !important;
    margin-right: 4px !important;
}


/* ════════════════════════════════════════════════════════════════════════
   ░░░ DEEP AUDIT — BATCH 3 (R49) — Product detail page (product.html)
   ════════════════════════════════════════════════════════════════════════ */

/* Frequently bought together (FBT) thumbnails were showing a flat pastel
   mint that didn't match the rest of the green gradient story. Apply the
   same unified green gradient. */
html body .pp-fbt-thumb {
    background:
        var(--noise-svg),
        radial-gradient(ellipse 110% 60% at 50% 0%,
            rgba(255, 255, 255, 0.45) 0%,
            rgba(255, 255, 255, 0) 65%),
        linear-gradient(180deg,
            #dceee0 0%,
            #c5dec1 100%) !important;
    border-radius: 16px !important;
}

/* FBT summary card border-radius alignment 14 -> 16 */
html body .pp-fbt-summary { border-radius: 16px !important; }

/* FBT CTA was bg transparent — fix to proper black pill button */
html body .pp-fbt-cta {
    background: #0a0a0a !important;
    color: #ffffff !important;
    border-radius: 999px !important;
    padding: 14px 28px !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
    cursor: pointer !important;
}
html body .pp-fbt-cta:hover {
    background: #2a2a2a !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15) !important;
}

/* PP delivery callout: 10px br -> 12 (system) */
html body .pp-delivery-callout { border-radius: 12px !important; }

/* PP thumb 12px is fine; ensure the active state uses brand teal instead
   of solid black so we communicate "selected" with brand color. */
html body .pp-thumb.active {
    border: 2px solid #0d9488 !important;
    background: #ffffff !important;
}
html body .pp-thumb:not(.active) {
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* PP synonym pills had transparent background — give them a subtle bg
   so they read as actual pill chips. */
html body .pp-synonym-pill {
    background: #f5f5f7 !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    color: #4a4a52 !important;
    font-weight: 500 !important;
}

/* PP detail spec sheet items: were flex with no visible separators.
   Add subtle border-bottom between rows for legibility. */
html body .pp-detail-item {
    padding: 10px 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    display: flex !important;
    justify-content: space-between !important;
}
html body .pp-detail-item:last-child {
    border-bottom: none !important;
}
html body .pp-detail-label {
    color: #6b6b73 !important;
    font-weight: 500 !important;
    font-size: 0.92rem !important;
}
html body .pp-detail-value {
    color: #1a1a1a !important;
    font-weight: 600 !important;
    font-size: 0.92rem !important;
}

/* PP description: bump line-height for readability */
html body .pp-description {
    line-height: 1.7 !important;
    color: #4a4a52 !important;
}

/* R307: PP dosage (strength · form line on product pages) — make it more apparent.
   Was a faint light-italic caption (#4a4a52, 0.88rem, weight 400) that receded under
   the name. Darken, nudge size + weight up a step; keep the italic character. */
html body .pp-dosage {
    color: #2c2c33 !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
}


/* ════════════════════════════════════════════════════════════════════════
   ░░░ DEEP AUDIT — BATCH 4 (R50) — Bundles page (bundles.html)
   ════════════════════════════════════════════════════════════════════════ */

/* Preset item icon backgrounds were rgb(224, 238, 223) — flat pastel mint.
   Bring to the unified brand-green gradient so it ties into the new look. */


/* Bundles header h1 was 57.6px (3.6rem). Page h2's are 2.8rem. Match the
   product detail h1 scale (3.2rem) for visual rhythm across pages. */



/* Builder-tile-dose at 11.52px was tiny. Bump and lift opacity. */


/* Builder empty state was just gray text. Add some character: italic
   helper text + an icon if not already present, slight bg. */
html body .builder-empty {
    color: #6b6b73 !important;
    font-style: italic !important;
    text-align: center !important;
}


/* ════════════════════════════════════════════════════════════════════════
   ░░░ DEEP AUDIT — BATCH 5 (R51) — Account / auth page (account.html)
   ════════════════════════════════════════════════════════════════════════ */

/* Password input border-radius missed in R47 (only covered text/email/etc).
   Bring to the same 12px scale. */
html body input[type="password"] {
    border-radius: 12px !important;
}

/* Auth error chip was no border-radius and used light red text on light
   red bg (rgb(252,165,165) — almost invisible). Reskin as a proper error
   chip with dark red text and a visible left border accent. */
html body .auth-error {
    background: rgba(239, 68, 68, 0.08) !important;
    color: #b91c1c !important;
    border: 1px solid rgba(239, 68, 68, 0.25) !important;
    border-left: 3px solid #ef4444 !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
}

/* Auth consent text was 11.5px (very small). Bump to 12.5px and lift
   contrast so the legalese is readable. */
html body .auth-consent,
html body .auth-consent label,
html body .auth-consent span {
    font-size: 0.78rem !important;
    color: #4a4a52 !important;
    line-height: 1.6 !important;
}
html body .auth-consent a { color: #0d9488 !important; }

/* Auth divider — was just text. Make it a proper "OR" with horizontal lines */
html body .auth-divider {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    color: #6b6b73 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    font-weight: 600 !important;
    margin: 18px 0 !important;
}
html body .auth-divider::before,
html body .auth-divider::after {
    content: '' !important;
    flex: 1 !important;
    height: 1px !important;
    background: rgba(0, 0, 0, 0.08) !important;
}

/* Auth Google sign-in button: match a clean pill style with hover lift */
html body .auth-google {
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}
html body .auth-google:hover {
    background: #fafafa !important;
    border-color: rgba(0, 0, 0, 0.18) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
}


/* ════════════════════════════════════════════════════════════════════════
   ░░░ DEEP AUDIT — BATCH 6 (R52) — Checkout page (checkout.html)
   ════════════════════════════════════════════════════════════════════════ */

/* Card / chip border-radius alignment */
html body .checkout-summary { border-radius: 16px !important; }
html body .checkout-points-widget { border-radius: 12px !important; }
html body .cab-icon { border-radius: 12px !important; }

/* Crypto payment buttons — were small 8px, fine but could read more as
   selectable tiles. Add hover state and bring radius to 12. */
html body .crypto-btn {
    border-radius: 12px !important;
    padding: 12px 18px !important;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease !important;
    color: #1a1a1a !important;
}
html body .crypto-btn:hover {
    border-color: rgba(20, 184, 166, 0.45) !important;
    background: rgba(20, 184, 166, 0.04) !important;
    transform: translateY(-1px) !important;
}
html body .crypto-btn.selected,
html body .crypto-btn.active {
    border-color: #0d9488 !important;
    background: rgba(20, 184, 166, 0.08) !important;
    color: #0d9488 !important;
    font-weight: 600 !important;
}

/* Payment method tabs: were just text with no defined active state.
   Add proper underline + color shift for active. */
html body .payment-method-tab {
    border-radius: 12px 12px 0 0 !important;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease !important;
    border-bottom: 2px solid transparent !important;
    font-weight: 500 !important;
}
/* R145: PsiFi tab+pane stay hidden forever (the integration is dead).
   The Card/Apple Pay slot is now wired to Malum via data-method="malum".
   We keep the pane DOM in checkout.html (id="payment-pane-psifi") since
   ripping it out would risk breaking the page if the file ever reverts
   to a cached pre-R145 version — but it's never shown because there's
   no tab pointing to it anymore. */
html body button.payment-method-tab[data-method="psifi"],
html body #payment-pane-psifi {
    display: none !important;
}
html body .payment-method-tab:hover {
    color: #0d9488 !important;
}
html body .payment-method-tab.active {
    color: #0d9488 !important;
    border-bottom-color: #0d9488 !important;
    font-weight: 700 !important;
    background: rgba(20, 184, 166, 0.04) !important;
}

/* Signature buttons (.btn-sig) — already 8px, fine. Add hover state */
html body .btn-sig {
    transition: background 0.2s ease, border-color 0.2s ease !important;
}
html body .btn-sig:hover {
    background: #f5f5f7 !important;
    border-color: rgba(0, 0, 0, 0.2) !important;
}

/* Checkout trust badges — were just grey text with no chip styling.
   Make them small pill chips for definition. */



/* Confirmation icon — keep size, but add a subtle "success" gradient halo */
html body .confirmation-icon {
    background: radial-gradient(circle, rgba(16, 185, 129, 0.12) 0%, rgba(16, 185, 129, 0) 70%) !important;
    border-radius: 50% !important;
    padding: 18px !important;
    display: inline-block !important;
}

/* Checkout step indicators — were plain text. Make them visible step badges */
html body .checkout-steps {
    display: flex !important;
    gap: 12px !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 20px 0 32px !important;
}
html body .checkout-steps .step {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 14px !important;
    border-radius: 999px !important;
    background: #f5f5f7 !important;
    color: #6b6b73 !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    border: 1px solid transparent !important;
}
html body .checkout-steps .step.active {
    background: rgba(20, 184, 166, 0.10) !important;
    color: #0d9488 !important;
    border-color: rgba(20, 184, 166, 0.30) !important;
    font-weight: 700 !important;
}


/* ════════════════════════════════════════════════════════════════════════
   ░░░ DEEP AUDIT — BATCH 7 (R53) — Order tracking page (order.html)
   ░░░ Major dark-mode legacy bleed: progress dots/labels using white text
   ░░░ + transparent bg on a now-light theme.  Multiple invisible elements.
   ════════════════════════════════════════════════════════════════════════ */

/* Progress timeline dots — were white on white. Reskin for light theme. */
/* R101: Spectrum analyzer divider between hero/trust → "What Sets Us Apart".
   Visually distinct from the peptide-chain (dots+line) and DNA-helix
   (waves+rungs) — this one is vertical bars at varying heights that
   pulse in sequence like a live analytical readout. Signals "data,
   precision, measurement" which fits the "what sets us apart" theme. */

html body .spectrum-divider {
    position: relative !important;
    width: 100% !important;
    max-width: 880px !important;
    margin: 0 auto !important;
    padding: 18px 24px 14px !important;
    pointer-events: none !important;
}


html body .sa-bar.bright {
    background: linear-gradient(180deg, #2dd4bf 0%, #14b8a6 60%, #0d9488 100%) !important;
    width: 7px !important;
    opacity: 0.62 !important;
    box-shadow: 0 0 8px rgba(20, 184, 166, 0.40) !important;
}

@keyframes spectrumPulse {
    0%, 100% { transform: scaleY(0.45); opacity: 0.35; }
    50%      { transform: scaleY(1);    opacity: 0.90; }
}

/* Glow accent on the brighter bars */
html body .sa-bar.bright {
    animation-name: spectrumPulseBright !important;
}
@keyframes spectrumPulseBright {
    0%, 100% { transform: scaleY(0.55); opacity: 0.55; filter: drop-shadow(0 0 4px rgba(20,184,166,0.30)); }
    50%      { transform: scaleY(1);    opacity: 1;    filter: drop-shadow(0 0 10px rgba(20,184,166,0.55)); }
}

/* Subtle horizontal baseline like an oscilloscope center line */





/* R98: DNA-helix divider sitting between "How It Works" and
   "Find What You're Studying". Two sinusoidal strands crossing
   each other with subtle base-pair rungs + bright nucleobase dots.
   Animated to feel alive without being distracting. */

html body .dna-helix-divider {
    position: relative !important;
    width: 100% !important;
    height: 100px !important;
    padding: 12px 0 !important;
    overflow: visible !important;
    pointer-events: none !important;
}



/* Strand A: the "top wave" — flows left to right */


@keyframes dnaFlowA {
    0%   { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -56; }
}
@keyframes dnaFlowB {
    0%   { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -42; }
}

/* "Base pair" rungs — short vertical connectors */








@keyframes dnaRungPulse {
    0%, 100% { opacity: 0.45; }
    50%      { opacity: 0.95; }
}

/* Nucleobase dots at the strand caps */

html body .dna-base.bright {
    fill: #14b8a6 !important;
    stroke: #0d9488 !important;
    stroke-width: 1.5 !important;
    filter: drop-shadow(0 0 6px rgba(20, 184, 166, 0.50)) !important;
}
@keyframes dnaBasePulse {
    0%, 100% { transform: scale(1);    opacity: 0.85; }
    50%      { transform: scale(1.18); opacity: 1; }
}
/* Stagger each pair so they ripple left-to-right */
















/* R95: Beef up the peptide-chain SVG divider on the homepage.
   Was tiny (r=5-6 atoms, 1px bond stroke, low alpha) using the
   legacy --cy-bg-deep dark fill on atoms. Reskin for the light
   theme + make it visibly cooler. */



/* Hide the top/bottom thin border lines (they were dark legacy lines) */




/* Bond: thicker dashed teal with glow and stronger flow animation */


/* Atoms: bigger, brighter, with a subtle inner glow */


/* Bright atoms: filled teal with a stronger glow */
html body .peptide-chain-atom.bright {
    fill: #14b8a6 !important;
    stroke: #0d9488 !important;
    stroke-width: 2 !important;
    r: 10 !important;
    filter: drop-shadow(0 0 8px rgba(20, 184, 166, 0.55)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.08)) !important;
}

@keyframes atomPulseLight {
    0%, 100% { transform: scale(1); opacity: 0.9; }
    50%      { transform: scale(1.15); opacity: 1; }
}

/* Stagger animation across atoms so they pulse like a wave */













/* Make atoms transform from center properly */



/* R92: Beefier, cooler progress timeline.
   Larger dots, thicker connecting line, glowing active state with
   pulsing halo, animated brand gradient fill. */


/* Background track line that runs full width behind all dots */


html body .progress-dot {
    background: #ffffff !important;
    border: 3px solid #cfd6dc !important;
    color: #6b6b73 !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    z-index: 1 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
}

/* Completed step: filled brand teal with subtle inner shine */
html body .progress-step.complete:not(.active) .progress-dot {
    background: linear-gradient(135deg, #14b8a6, #0d9488) !important;
    border-color: #0d9488 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(20, 184, 166, 0.25) !important;
}

/* Active step: brand teal with strong glowing halo + subtle pulse */
@keyframes activeStepPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(20, 184, 166, 0.30), 0 4px 16px rgba(20, 184, 166, 0.35); }
    50%      { box-shadow: 0 0 0 12px rgba(20, 184, 166, 0), 0 4px 16px rgba(20, 184, 166, 0.45); }
}
html body .progress-step.active .progress-dot {
    background: linear-gradient(135deg, #14b8a6, #0d9488) !important;
    border: 3px solid #ffffff !important;
    color: #ffffff !important;
    transform: scale(1.12) !important;
    animation: activeStepPulse 2s ease-out infinite !important;
    outline: 2px solid #0d9488 !important;
    outline-offset: 0 !important;
}

/* Pending step: subtle ghost outline */
html body .progress-step:not(.active):not(.complete) .progress-dot {
    background: #ffffff !important;
    border: 2px dashed rgba(20, 184, 166, 0.40) !important;
    color: #6b6b73 !important;
}

html body .progress-step {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    flex: 1 1 0 !important;
    min-width: 70px !important;
    position: relative !important;
    z-index: 1 !important;
}

html body .progress-label {
    color: #6b6b73 !important;
    font-size: 0.88rem !important;
    margin-top: 12px !important;
    text-align: center !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: 0.2px !important;
}
html body .progress-step.active .progress-label {
    color: #0d9488 !important;
    font-weight: 800 !important;
}
html body .progress-step.complete .progress-label {
    color: #14b8a6 !important;
    font-weight: 700 !important;
}

/* The connecting "fill" bar that grows from 0% to N% as user
   progresses through the timeline. Brand gradient with subtle animation. */
@keyframes progressFillShimmer {
    0%   { background-position: 0% 0; }
    100% { background-position: 200% 0; }
}
html body .progress-bar-fill {
    background: linear-gradient(90deg, #14b8a6 0%, #10b981 35%, #14b8a6 65%, #0d9488 100%) !important;
    background-size: 200% 100% !important;
    animation: progressFillShimmer 6s linear infinite !important;
    height: 6px !important;
    border-radius: 999px !important;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 0 12px rgba(20, 184, 166, 0.30) !important;
    position: absolute !important;
    top: 32px !important;
    left: 60px !important;
    z-index: 0 !important;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    html body .progress-step.active .progress-dot {
        animation: none !important;
    }
    html body .progress-bar-fill {
        animation: none !important;
        background: linear-gradient(90deg, #14b8a6, #0d9488) !important;
    }
}

/* OSC (order share card) action chips were dark navy bg on a light page.
   Reskin to white tile with subtle border + teal accents. */
html body .osc-action {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    color: #1a1a1a !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    border-radius: 16px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
}
html body .osc-action:hover {
    border-color: rgba(20, 184, 166, 0.35) !important;
    box-shadow: 0 8px 22px rgba(20, 184, 166, 0.10) !important;
    transform: translateY(-2px) !important;
}
html body .osc-action-icon {
    background: rgba(20, 184, 166, 0.10) !important;
    color: #0d9488 !important;
    border-radius: 12px !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
html body .osc-action-title { color: #0a0a0a !important; font-weight: 700 !important; }
html body .osc-action-desc  { color: #4a4a52 !important; }
html body .osc-action-btn {
    background: #0a0a0a !important;
    color: #ffffff !important;
    border-radius: 999px !important;
    padding: 10px 18px !important;
    font-weight: 600 !important;
    transition: background 0.2s ease, transform 0.2s ease !important;
}
html body .osc-action-btn:hover { background: #2a2a2a !important; transform: translateY(-1px) !important; }

/* OSC icon (success check) — needs visible success styling */
html body .osc-icon {
    background: rgba(20, 184, 166, 0.10) !important;
    color: #0d9488 !important;
    border-radius: 50% !important;
    width: 56px !important;
    height: 56px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Tracking number link: was indigo #818cf8 (legacy); switch to brand teal */
html body .tracking-number-link {
    color: #0d9488 !important;
    font-weight: 600 !important;
}
html body .tracking-number-link:hover { color: #0f766e !important; text-decoration: underline !important; }

/* Track error message — same fix as auth-error: dark text on light red */
html body .track-error {
    color: #b91c1c !important;
    border: 1px solid rgba(239, 68, 68, 0.20) !important;
    border-left: 3px solid #ef4444 !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
}

/* Order status badge: pill radius + brand teal */


/* Track sign-in CTA button: had transparent bg + white text — invisible
   on the white page. Style as a teal pill button. */
html body .track-signin-btn {
    background: linear-gradient(135deg, #14b8a6, #0d9488) !important;
    color: #ffffff !important;
    border-radius: 999px !important;
    padding: 12px 24px !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    box-shadow: 0 4px 14px rgba(20, 184, 166, 0.25) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    border: none !important;
}
html body .track-signin-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(20, 184, 166, 0.30) !important;
}

/* OSC share social buttons — give them subtle visible chip styling */
html body .osc-share-buttons {
    gap: 10px !important;
    flex-wrap: wrap !important;
}
html body .osc-share-buttons a,
html body .osc-share-buttons button {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: #f5f5f7 !important;
    color: #4a4a52 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
}
html body .osc-share-buttons a:hover,
html body .osc-share-buttons button:hover {
    background: rgba(20, 184, 166, 0.10) !important;
    color: #0d9488 !important;
    border-color: rgba(20, 184, 166, 0.30) !important;
    transform: translateY(-2px) !important;
}


/* ════════════════════════════════════════════════════════════════════════
   ░░░ DEEP AUDIT — BATCH 8 (R54) — About / FAQ / content pages
   ════════════════════════════════════════════════════════════════════════ */

/* FAQ item: 14px -> 16px to match other cards */
html body .faq-item { border-radius: 16px !important; }

/* FAQ question — add hover treatment + better visual hierarchy */
html body .faq-question {
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
}
html body .faq-question:hover {
    background: rgba(20, 184, 166, 0.04) !important;
}
html body .faq-item.open .faq-question {
    background: rgba(20, 184, 166, 0.04) !important;
    color: #0d9488 !important;
}
html body .faq-question i {
    transition: transform 0.3s ease !important;
}
html body .faq-item.open .faq-question i {
    transform: rotate(180deg) !important;
}

/* FAQ answer — line-height for readability + slight muted color */
html body .faq-answer {
    color: #4a4a52 !important;
    line-height: 1.65 !important;
}

/* About page — value-cards were transparent with no border. Apply
   standard white card chrome so they match policy-card and other cards. */
html body .value-card {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
    padding: 28px 26px !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease !important;
}
html body .value-card:hover {
    border-color: rgba(20, 184, 166, 0.30) !important;
    box-shadow: 0 8px 24px rgba(20, 184, 166, 0.08) !important;
    transform: translateY(-3px) !important;
}

/* Value + policy icons: no border-radius made them square color blocks.
   Round to 14px + center the FA icon vertically. */
html body .value-icon,
html body .policy-icon {
    border-radius: 14px !important;
    width: 56px !important;
    height: 56px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.4rem !important;
    margin-bottom: 18px !important;
}

/* About stat numbers — bump weight + make the brand teal more vivid */
html body .stat-number {
    color: #0d9488 !important;
    font-weight: 800 !important;
}
html body .stat-label {
    color: #4a4a52 !important;
    font-weight: 600 !important;
    letter-spacing: 1.2px !important;
}

/* Privacy/terms/policies pages — they share a typography style. Bump
   line-height + max content width if not set, for legal readability. */
html body main > .container .policy-content,
html body main .legal-content,
html body main .policy-section p,
html body main .legal-text {
    line-height: 1.7 !important;
    color: #2a2a2e !important;
}

/* CRITICAL: .legal-content paragraphs/lists were inheriting rgb(203,213,225)
   (slate-200) from dark-mode legacy — light grey text on a white page is
   essentially invisible. Force charcoal so privacy/terms/refund/shipping
   policy pages are actually readable. */
html body .legal-content,
html body .legal-content p,
html body .legal-content li,
html body .legal-content ul,
html body .legal-content ol,
html body .legal-content div,
html body .legal-content span {
    color: #1a1a1a !important;
}
html body .legal-content p {
    padding: 0 !important;
    margin: 0 0 18px !important;
    line-height: 1.7 !important;
}
html body .legal-content h2 {
    color: #0a0a0a !important;
    font-weight: 800 !important;
    margin-top: 36px !important;
    margin-bottom: 14px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}
html body .legal-content h3 {
    color: #1a1a1a !important;
    font-weight: 700 !important;
    margin-top: 24px !important;
    margin-bottom: 10px !important;
}
html body .legal-content ul,
html body .legal-content ol {
    padding-left: 22px !important;
    margin: 0 0 18px !important;
}
html body .legal-content li {
    margin-bottom: 8px !important;
    line-height: 1.65 !important;
}
html body .legal-content a {
    color: #0d9488 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
}
html body .legal-content a:hover {
    color: #0f766e !important;
}

/* Legal meta info (date / version) */
html body .legal-meta {
    color: #6b6b73 !important;
    font-style: italic !important;
}

/* Back link consistency on legal pages + others */
html body .back-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #4a4a52 !important;
    font-weight: 600 !important;
    font-size: 0.92rem !important;
    transition: color 0.2s ease, transform 0.2s ease !important;
    text-decoration: none !important;
}
html body .back-link:hover {
    color: #0d9488 !important;
    transform: translateX(-2px) !important;
}

/* Contact form textarea: 10px br -> 12px (matches inputs) */
html body textarea {
    border-radius: 12px !important;
    line-height: 1.55 !important;
}

/* Contact info card 18px br is fine. Contact item padding 14px 0 fine. */
html body .contact-label {
    color: #6b6b73 !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    margin-bottom: 4px !important;
}

/* Social icons: improve hover state */
html body .social-icon {
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
    border: 1px solid transparent !important;
}
html body .social-icon:hover {
    background: rgba(20, 184, 166, 0.10) !important;
    color: #0d9488 !important;
    border-color: rgba(20, 184, 166, 0.30) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(20, 184, 166, 0.15) !important;
}


/* ════════════════════════════════════════════════════════════════════════
   ░░░ DEEP AUDIT — BATCH 9 (R55) — Education page (education.html)
   ════════════════════════════════════════════════════════════════════════ */

/* Category pills had no radius despite being called "pills". Add 999px
   pill radius and proper active state. */
html body .edu-cat-pill {
    background: #ffffff !important;
    color: #4a4a52 !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 999px !important;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease !important;
}
html body .edu-cat-pill:hover {
    border-color: rgba(20, 184, 166, 0.40) !important;
    color: #0d9488 !important;
}
html body .edu-cat-pill.active {
    background: linear-gradient(135deg, #14b8a6, #0d9488) !important;
    background-image: linear-gradient(135deg, #14b8a6, #0d9488) !important;
    color: #ffffff !important;
    border-color: #0d9488 !important;
    font-weight: 600 !important;
}
html body .edu-cat-pill.active i,
html body .edu-cat-pill.active .count {
    color: #ffffff !important;
}

/* TL;DR callout: 8px -> 12px and slight teal accent so it stands out as a key takeaway */
html body .compound-tldr {
    background: rgba(20, 184, 166, 0.06) !important;
    border-left: 3px solid #0d9488 !important;
    border-radius: 4px 12px 12px 4px !important;
    color: #1a1a1a !important;
    font-size: 0.92rem !important;
    line-height: 1.55 !important;
    padding: 12px 16px !important;
}

/* Compound CTA button: bg teal, color dark-navy (wrong combo). Switch
   to brand teal pill with white text. */
html body .compound-cta {
    background: linear-gradient(135deg, #14b8a6, #0d9488) !important;
    background-image: linear-gradient(135deg, #14b8a6, #0d9488) !important;
    color: #ffffff !important;
    border-radius: 999px !important;
    padding: 10px 22px !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    box-shadow: 0 4px 12px rgba(20, 184, 166, 0.22) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    border: none !important;
}
html body .compound-cta:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(20, 184, 166, 0.30) !important;
}

/* Compound CTA secondary: outline pill version */
html body .compound-cta-secondary {
    background: #ffffff !important;
    color: #0d9488 !important;
    border: 1px solid rgba(20, 184, 166, 0.40) !important;
    border-radius: 999px !important;
    padding: 10px 22px !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease !important;
}
html body .compound-cta-secondary:hover {
    background: rgba(20, 184, 166, 0.06) !important;
    border-color: #0d9488 !important;
    transform: translateY(-2px) !important;
}

/* Compound meta-item — was dark navy bg with grey text (legacy dark-mode).
   Reskin as a clean light grey chip. */
html body .meta-item {
    background: #f5f5f7 !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    color: #1a1a1a !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
}
html body .meta-item .label {
    color: #6b6b73 !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    display: block !important;
}
html body .meta-item .value {
    color: #1a1a1a !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    margin-top: 2px !important;
}

/* Edu disclaimer was a notice-style chip but no border-radius. */
html body .edu-disclaimer {
    background: rgba(251, 191, 36, 0.08) !important;
    border: 1px solid rgba(251, 191, 36, 0.30) !important;
    border-left: 3px solid #f59e0b !important;
    border-radius: 8px !important;
    color: #78350f !important;
    line-height: 1.55 !important;
    padding: 14px 18px !important;
}

/* Edu category section header — uppercase letter spacing for hierarchy */
html body .edu-category {
    font-size: 1.4rem !important;
    font-weight: 800 !important;
    margin: 28px 0 16px !important;
    color: #0a0a0a !important;
}

/* Compound expand toggle button: more visible, brand teal */
html body .compound-toggle {
    color: #0d9488 !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: color 0.2s ease !important;
}
html body .compound-toggle:hover { color: #0f766e !important; }
html body .compound-toggle i {
    transition: transform 0.3s ease !important;
    margin-left: 4px !important;
}
html body .compound.open .compound-toggle i {
    transform: rotate(180deg) !important;
}


/* ════════════════════════════════════════════════════════════════════════
   ░░░ DEEP AUDIT — BATCH 10 (R56) — Blog posts + blog system
   ░░░ Multiple dark-mode legacy bleed issues: light slate text on white bg
   ░░░ in TOC, related cards, disclaimers, stack rationales — invisible.
   ════════════════════════════════════════════════════════════════════════ */

/* Table of contents — was dark navy bg with light slate text. Reskin to
   a clean white card with charcoal text. */
html body .toc {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 16px !important;
    padding: 22px 26px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}
html body .toc h3,
html body .toc strong,
html body .toc > div:first-child {
    color: #0a0a0a !important;
    font-weight: 700 !important;
    margin-bottom: 10px !important;
}
html body .toc a {
    color: #4a4a52 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
    display: block !important;
    padding: 4px 0 !important;
}
html body .toc a:hover {
    color: #0d9488 !important;
}
html body .toc ul,
html body .toc ol {
    padding-left: 18px !important;
    margin: 0 !important;
}
html body .toc li {
    color: #4a4a52 !important;
    line-height: 1.55 !important;
    margin-bottom: 4px !important;
}

/* Related card — same dark-navy + light slate issue. White card chrome. */
html body .related-card {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 16px !important;
    padding: 18px 20px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
    text-decoration: none !important;
    display: block !important;
}
html body .related-card:hover {
    border-color: rgba(20, 184, 166, 0.30) !important;
    box-shadow: 0 8px 24px rgba(20, 184, 166, 0.08) !important;
    transform: translateY(-2px) !important;
}
html body .related-card .title {
    color: #0a0a0a !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    line-height: 1.4 !important;
    margin-bottom: 4px !important;
}
html body .related-card .tag,
html body .related-card .blog-meta {
    color: #6b6b73 !important;
    font-size: 0.8rem !important;
}

/* Related posts section heading */
html body .related-posts h2,
html body .related-posts h3 {
    color: #0a0a0a !important;
    margin-bottom: 16px !important;
    font-weight: 800 !important;
}
html body .related-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    gap: 16px !important;
}

/* Stack rationale in blog posts — was rgb(203,213,225) on white = invisible.
   Force charcoal. */
html body .stack-rationale {
    color: #4a4a52 !important;
    line-height: 1.65 !important;
}

/* Blog disclaimer: rgb(203,213,225) text -> dark amber on light amber bg
   with proper warning chip styling. */
html body .blog-disclaimer {
    background: rgba(245, 158, 11, 0.06) !important;
    border: 1px solid rgba(245, 158, 11, 0.25) !important;
    border-left: 3px solid #f59e0b !important;
    border-radius: 8px !important;
    color: #78350f !important;
    line-height: 1.6 !important;
    padding: 16px 20px !important;
}
html body .blog-disclaimer strong,
html body .blog-disclaimer b {
    color: #78350f !important;
    font-weight: 700 !important;
}

/* Blog callout: 10 -> 12 radius, slight teal accent */
html body .blog-callout {
    background: rgba(20, 184, 166, 0.06) !important;
    border-left: 3px solid #0d9488 !important;
    border-radius: 4px 12px 12px 4px !important;
    color: #1a1a1a !important;
    padding: 18px 22px !important;
    line-height: 1.65 !important;
}
html body .blog-callout strong,
html body .blog-callout b {
    color: #0a0a0a !important;
}

/* Blog CTA section bottom of articles */
html body .blog-cta {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.06), rgba(99, 102, 241, 0.04)) !important;
    border: 1px solid rgba(20, 184, 166, 0.20) !important;
    border-radius: 20px !important;
    padding: 36px 32px !important;
    margin: 36px 0 !important;
}
html body .blog-cta h2,
html body .blog-cta h3 {
    color: #0a0a0a !important;
    margin-bottom: 10px !important;
}
html body .blog-cta p {
    color: #4a4a52 !important;
    margin-bottom: 18px !important;
}

/* Blog h2: bump for stronger hierarchy in long-read articles */
html body .blog-content h2 {
    font-size: 1.75rem !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    margin-top: 36px !important;
    margin-bottom: 14px !important;
    color: #0a0a0a !important;
}
html body .blog-content h3 {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    margin-top: 24px !important;
    margin-bottom: 10px !important;
    color: #1a1a1a !important;
}
html body .blog-content blockquote {
    border-left: 4px solid #0d9488 !important;
    background: rgba(20, 184, 166, 0.04) !important;
    padding: 16px 22px !important;
    margin: 20px 0 !important;
    color: #1a1a1a !important;
    font-style: italic !important;
    border-radius: 0 12px 12px 0 !important;
}

/* Tag pills in blog meta */
html body .tag {
    background: rgba(20, 184, 166, 0.10) !important;
    color: #0d9488 !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
}


/* ════════════════════════════════════════════════════════════════════════
   ░░░ DEEP AUDIT — BATCH 11 (R57) — Tools (calculator/compare/protocol/coa)
   ════════════════════════════════════════════════════════════════════════ */

/* Calculator summary-row: dark navy bleed -> clean light-grey card */
html body .summary-row {
    background: #fafafa !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: 16px !important;
    padding: 14px 18px !important;
    display: grid !important;
    gap: 10px !important;
}



html body .summary-value.accent {
    color: #0d9488 !important;
    font-size: 2.2rem !important;
    font-weight: 800 !important;
}

/* Calculator selects: br 10 -> 12 to match input system */
html body .calc-field select,
html body select {
    border-radius: 12px !important;
}

/* BAC suggest buttons: active state was indistinguishable. Add proper
   "best" state with darker fill / glow. */
html body .bac-suggest-btn {
    background: #ffffff !important;
    border: 1px solid rgba(34, 197, 94, 0.40) !important;
    color: #15803d !important;
    border-radius: 12px !important;
    padding: 8px 12px !important;
    font-weight: 600 !important;
    font-size: 0.82rem !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}
html body .bac-suggest-btn:hover {
    background: rgba(34, 197, 94, 0.08) !important;
}
html body .bac-suggest-btn.best,
html body .bac-suggest-btn.active {
    background: linear-gradient(135deg, #16a34a, #15803d) !important;
    background-image: linear-gradient(135deg, #16a34a, #15803d) !important;
    color: #ffffff !important;
    border-color: #15803d !important;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.20) !important;
}

/* Preset buttons: transparent unstyled -> proper pill chips */
html body .preset-btn {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    color: #4a4a52 !important;
    border-radius: 999px !important;
    padding: 7px 14px !important;
    font-weight: 500 !important;
    font-size: 0.8rem !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}
html body .preset-btn:hover {
    border-color: rgba(20, 184, 166, 0.40) !important;
    color: #0d9488 !important;
    background: rgba(20, 184, 166, 0.04) !important;
}
html body .preset-btn.active {
    background: linear-gradient(135deg, #14b8a6, #0d9488) !important;
    color: #ffffff !important;
    border-color: #0d9488 !important;
    font-weight: 600 !important;
}

/* Quick reference cards / table: 14 -> 16 radius */
html body .quick-ref,
html body .quick-ref-table { border-radius: 16px !important; }

/* Calculator disclaimer: was bg amber 5% no border. Proper warning chip. */
html body .calc-disclaimer {
    background: rgba(251, 191, 36, 0.06) !important;
    border: 1px solid rgba(251, 191, 36, 0.25) !important;
    border-left: 3px solid #f59e0b !important;
    border-radius: 8px !important;
    color: #78350f !important;
    line-height: 1.6 !important;
    padding: 14px 18px !important;
}

/* Draw-to-pill — 22.4px font is huge. That's the prominent calculator
   result. Looks intentional. Just ensure proper shadow + spacing. */
html body .draw-to-pill {
    box-shadow: 0 6px 18px rgba(20, 184, 166, 0.28) !important;
    font-weight: 700 !important;
}

/* Compare page disclaimer styling + wrap radius */



/* ════════════════════════════════════════════════════════════════════════
   ░░░ DEEP AUDIT — BATCH 12 (R58) — Protocol builder dark-mode bleed
   ════════════════════════════════════════════════════════════════════════ */

/* Goal-name was WHITE color on white bg = invisible */


/* Goal cards had no bg / weird red icon border. Apply proper card chrome. */
html body .protocol-step-section .goal-card,
html body main .goal-card {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 20px !important;
    padding: 28px 26px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
    cursor: pointer !important;
}
html body .protocol-step-section .goal-card:hover,
html body main .goal-card:hover {
    border-color: rgba(20, 184, 166, 0.30) !important;
    box-shadow: 0 8px 24px rgba(20, 184, 166, 0.10) !important;
    transform: translateY(-3px) !important;
}

/* Goal icon — red border was strange. Solid white bg with teal-tinted
   icon container border + brand-teal icon color. */
html body .protocol-step-section .goal-card .goal-icon,
html body main .goal-card .goal-icon {
    background: rgba(20, 184, 166, 0.10) !important;
    border: 1px solid rgba(20, 184, 166, 0.25) !important;
    border-radius: 14px !important;
    width: 56px !important;
    height: 56px !important;
    color: #0d9488 !important;
    font-size: 1.4rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 16px !important;
}

/* Goal description was muted #6b6b73 — bump to #4a4a52 for legibility */


/* Goal tier count chip — white-on-white invisible. Brand teal pill. */


/* R203: protocol.html uses .goal-card with 4 flex children (icon, name,
   desc, tier-count) but the homepage's .goal-card is flex-row (designed
   for icon | body | arrow). The mismatch was pushing the tier-count
   badge off the right edge of the card on mobile. Fix: scope these
   specific cards to flex-direction: column. Use #goal-grid (the
   protocol page's container) so the homepage layout is untouched. */

html body #goal-grid .goal-card {
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 6px !important;
    min-height: 180px !important;
}
html body #goal-grid .goal-card .goal-icon {
    margin-bottom: 8px !important;
}
html body #goal-grid .goal-card .goal-tier-count {
    align-self: flex-start !important;
    width: auto !important;
    flex: 0 0 auto !important;
    margin-top: auto !important;
}

/* Protocol back button: white border on white = invisible. Style as
   ghost button with charcoal text. */



/* Protocol step separator (the lines between steps in nav) — was
   white on white. Use light grey. */


/* Protocol step pills (1, 2, 3...) — both .protocol-step and
   .protocol-step.active had identical styling. Add proper differentiation. */
html body #protocol-steps .protocol-step {
    background: #ffffff !important;
    color: #6b6b73 !important;
    border: 1px solid rgba(0, 0, 0, 0.10) !important;
    border-radius: 999px !important;
    padding: 9px 18px !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    transition: all 0.2s ease !important;
}
html body #protocol-steps .protocol-step:hover {
    border-color: rgba(20, 184, 166, 0.40) !important;
    color: #0d9488 !important;
}
html body #protocol-steps .protocol-step.active,
html body #protocol-steps .protocol-step.completed {
    background: linear-gradient(135deg, #14b8a6, #0d9488) !important;
    background-image: linear-gradient(135deg, #14b8a6, #0d9488) !important;
    color: #ffffff !important;
    border-color: #0d9488 !important;
    box-shadow: 0 4px 12px rgba(20, 184, 166, 0.20) !important;
}
html body #protocol-steps .protocol-step.active .pstep-num,
html body #protocol-steps .protocol-step.completed .pstep-num {
    background: rgba(255, 255, 255, 0.20) !important;
    color: #ffffff !important;
}
html body #protocol-steps .pstep-num {
    background: #f5f5f7 !important;
    color: #6b6b73 !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    margin-right: 8px !important;
}

/* Protocol step title — bump scale for stronger section hierarchy */




/* ════════════════════════════════════════════════════════════════════════
   ░░░ DEEP AUDIT — BATCH 13 (R59) — COA page (coa.html)
   ════════════════════════════════════════════════════════════════════════ */

/* COA card image — flat pastel mint -> unified brand green gradient */
html body .coa-card-image {
    background:
        var(--noise-svg),
        linear-gradient(180deg, #dceee0 0%, #c5dec1 100%) !important;
    border-radius: 16px 16px 0 0 !important;
    padding: 32px 22px !important;
}

/* COA info bar: 14 -> 16 radius */


/* COA note: bare warning style. Make it a proper amber chip. */
html body .coa-note {
    background: rgba(251, 191, 36, 0.06) !important;
    border: 1px solid rgba(251, 191, 36, 0.25) !important;
    border-left: 3px solid #f59e0b !important;
    border-radius: 8px !important;
    color: #78350f !important;
    line-height: 1.55 !important;
    padding: 14px 18px !important;
}

/* COA card category: small uppercase brand-teal label */
html body .coa-card-category {
    color: #0d9488 !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
}
html body .coa-card-name {
    font-weight: 800 !important;
    line-height: 1.25 !important;
    margin: 4px 0 8px !important;
}
html body .coa-card-meta-label {
    color: #6b6b73 !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}
html body .coa-card-meta-value {
    color: #1a1a1a !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
}

/* COA card CTA at bottom — hover state */
html body .coa-card-cta {
    transition: background 0.2s ease !important;
    font-weight: 600 !important;
}
html body .coa-card-cta:hover {
    background: #2a2a2a !important;
}

/* COA badges already pill-shaped, fine. */
html body .coa-card-pass-badge,
html body .coa-card-purity-badge {
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
}


/* ════════════════════════════════════════════════════════════════════════
   ░░░ DEEP AUDIT — BATCH 14 (R60) — 404 / error states
   ════════════════════════════════════════════════════════════════════════ */

/* 404 title was WHITE on white = invisible. Charcoal. */
html body .error-title {
    color: #0a0a0a !important;
    font-weight: 800 !important;
}

/* 404 search wrapper: dark navy bleed -> white pill */
html body .error-search {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.10) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}

/* 404 error code (the big "404") — accent it with brand teal gradient */
html body .error-code {
    background: linear-gradient(135deg, #14b8a6, #6366f1) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    line-height: 1 !important;
    margin-bottom: 18px !important;
}

/* Error description size + color */
html body .error-description {
    color: #4a4a52 !important;
    line-height: 1.55 !important;
    font-size: 1.05rem !important;
    max-width: 540px !important;
    margin: 0 auto !important;
}

/* Error link cards (FAQ/Education/Contact) — were unstyled. White cards */
html body .error-link-card {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 16px !important;
    padding: 22px 20px !important;
    text-decoration: none !important;
    color: #1a1a1a !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}
html body .error-link-card:hover {
    border-color: rgba(20, 184, 166, 0.35) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 24px rgba(20, 184, 166, 0.10) !important;
}
html body .error-link-card i {
    color: #0d9488 !important;
    font-size: 1.4rem !important;
    margin-bottom: 8px !important;
}

/* Popular product cards on 404 — dark navy bleed -> white card chrome */
html body .error-popular-card {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 16px !important;
    color: #1a1a1a !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    display: block !important;
    padding: 14px !important;
}
html body .error-popular-card:hover {
    border-color: rgba(20, 184, 166, 0.30) !important;
    box-shadow: 0 8px 22px rgba(20, 184, 166, 0.10) !important;
    transform: translateY(-2px) !important;
}
html body .error-popular-price {
    color: #0d9488 !important;
    font-weight: 700 !important;
}

/* Error divider line */
html body .error-divider {
    background: rgba(0, 0, 0, 0.08) !important;
    height: 1px !important;
    width: 80% !important;
    margin: 36px auto !important;
}


/* ════════════════════════════════════════════════════════════════════════
   ░░░ DEEP AUDIT — BATCH 15 (R61) — Affiliate page (affiliate.html)
   ════════════════════════════════════════════════════════════════════════ */

/* Aff perk cards: dark navy bleed -> white card chrome */



/* Aff perk icon: visible chip with teal-tinted bg */


/* Aff perk text */




/* Aff terms section: same dark-navy bleed -> light grey reference card */





/* Aff gate (signup card): 14 -> 16 radius */
html body .aff-gate { border-radius: 16px !important; padding: 36px 28px !important; }

/* ════════════════════════════════════════════════════════════════════════
   R133 — AFFILIATE LIGHT-THEME CARDS (gray overlay fix)
   ────────────────────────────────────────────────────────────────────────
   Bug:  Crypto Payout card, Payout Settings card, "Earnings — Last 30
         Days" chart, and Recent Sales card all rendered with a heavy
         translucent gray overlay tinting their interiors. Looked like a
         disabled-state mask sat on top of every card.
   Root: When the affiliate dashboard was overhauled to a light theme
         (task #59), these four classes were missed. Their base styles
         still used dark-theme rgba backgrounds (`rgba(15-31, 23-41,
         42-55, 0.4-0.5)`), which on the new white page background
         shows through as a semi-transparent dark wash.
   Fix:  Override each to a true light card (#fff or near-white) with a
         soft border + subtle shadow, matching the rest of the affiliate
         light surfaces.
   ════════════════════════════════════════════════════════════════════════ */
html body .aff-page .aff-payout-card,
html body .aff-page .aff-payout-option,
html body .aff-page .aff-chart-card.aff-chart-card-v3,
html body .aff-page .aff-recent-card {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03), 0 4px 12px rgba(0, 0, 0, 0.04) !important;
    backdrop-filter: none !important;
}
/* Featured payout option (e.g., the recommended crypto path) keeps a
   subtle teal wash on top of the white card so it still reads as the
   primary CTA tile. */
html body .aff-page .aff-payout-option.aff-payout-featured {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.07), #ffffff 60%) !important;
    border-color: rgba(20, 184, 166, 0.45) !important;
    box-shadow: 0 6px 20px rgba(20, 184, 166, 0.10) !important;
}
/* Chart card v3 gradient — keep the subtle teal top accent line via
   ::before, but replace the dark gradient body with a clean white. */


/* R135 — Payout Settings card: same overlay-bleed bug as R133, plus the
   inputs/network select still carried dark-theme backgrounds and the
   helper hints used a near-white color that vanished on the new white
   page. Force the whole panel + every interactive element to the light
   palette so the form is fully legible. */
html body .aff-page .aff-settings-card {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03), 0 4px 12px rgba(0, 0, 0, 0.04) !important;
    backdrop-filter: none !important;
}
html body .aff-page .aff-settings-label {
    color: #0f172a !important;
}
html body .aff-page .aff-settings-label span {
    color: #6b7280 !important;
}
html body .aff-page .aff-settings-row input,
html body .aff-page .aff-settings-network {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    color: #0f172a !important;
}
html body .aff-page .aff-settings-row input::placeholder {
    color: #94a3b8 !important;
}
html body .aff-page .aff-settings-row input:focus,
html body .aff-page .aff-settings-network:focus {
    border-color: #14b8a6 !important;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.15) !important;
}
html body .aff-page .aff-settings-save {
    background: #ffffff !important;
    border: 1px solid rgba(20, 184, 166, 0.40) !important;
    color: #0d9488 !important;
}
html body .aff-page .aff-settings-save:hover {
    background: rgba(20, 184, 166, 0.06) !important;
    border-color: #0d9488 !important;
}
html body .aff-page .aff-settings-hint {
    color: #6b7280 !important;
}
/* The inline-styled dashed divider used a white-on-white color; force it
   to a visible light-gray dash so the section split reads. */
html body .aff-page .aff-settings-divider {
    border-top-color: rgba(0, 0, 0, 0.10) !important;
}


/* ════════════════════════════════════════════════════════════════════════
   ░░░ DEEP AUDIT — BATCH 16 (R62) — Cross-cutting site-wide consistency
   ════════════════════════════════════════════════════════════════════════ */

/* Nav active state: was identical to inactive (both #0d9488). Add
   underline indicator + slightly bolder weight for the current page. */
html body .nav-links a {
    position: relative !important;
    transition: color 0.2s ease !important;
}
html body .nav-links a::after {
    content: '' !important;
    position: absolute !important;
    bottom: -8px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 0 !important;
    height: 2px !important;
    background: linear-gradient(90deg, #14b8a6, #0d9488) !important;
    border-radius: 999px !important;
    transition: width 0.3s ease !important;
}
html body .nav-links a:hover::after,
html body .nav-links a.active::after {
    width: 28px !important;
}
/* R85: bolder nav links + win the specificity war against the
   `html body nav .nav-links a.active` rule at line 24295 (which
   has weight 600). Add `nav` to outscore it. */
html body nav .nav-links a.active,
html body .navbar .nav-links a.active,
html body .nav-links a.active {
    color: #0d9488 !important;
    font-weight: 800 !important;
}
html body nav .nav-links a:not(.active),
html body .navbar .nav-links a:not(.active),
html body .nav-links a:not(.active) {
    color: #1a1a1a !important;
    font-weight: 700 !important;
}
html body nav .nav-links a:not(.active):hover,
html body .nav-links a:not(.active):hover {
    color: #0d9488 !important;
}

/* Cart count badge: solid black -> brand teal so it pops as a status indicator */
html body .cart-count {
    background: #ef4444 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border-radius: 999px !important;
    padding: 1px 6px !important;
    min-width: 18px !important;
    height: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.68rem !important;
    border: 2px solid #ffffff !important;
}

/* Cookie consent: no border-radius -> proper card chrome */
html body .cookie-consent {
    border-radius: 16px !important;
    margin: 12px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 16px 40px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    padding: 16px 20px !important;
    max-width: calc(100vw - 24px) !important;
}

/* Toast notifications styling */
html body .toast {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 16px 40px rgba(0, 0, 0, 0.10) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    padding: 14px 20px !important;
    font-size: 0.92rem !important;
    font-weight: 500 !important;
}
html body .toast.toast-success { border-left: 3px solid #14b8a6 !important; }
html body .toast.toast-error { border-left: 3px solid #ef4444 !important; }
html body .toast.toast-warning { border-left: 3px solid #f59e0b !important; }

/* Universal h1 baseline — most pages had a header with .section-title.
   For pages without one, ensure h1 has consistent visual weight. */
html body main h1:not(.section-title):not([class]) {
    font-size: 2.4rem !important;
    font-weight: 800 !important;
    color: #0a0a0a !important;
    line-height: 1.15 !important;
    margin-bottom: 12px !important;
}

/* Universal "section badge" style — small uppercase tag chip */
html body .section-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* Universal focus-visible ring for accessibility */
html body a:focus-visible,
html body button:focus-visible,
html body input:focus-visible,
html body select:focus-visible,
html body textarea:focus-visible {
    outline: 2px solid #0d9488 !important;
    outline-offset: 2px !important;
}

/* Selection color: brand teal so highlights look on-brand */
html body ::selection {
    background: rgba(20, 184, 166, 0.20) !important;
    color: #0a0a0a !important;
}

/* Scroll behavior smooth across pages */
html { scroll-behavior: smooth !important; }

/* Universal "fa" icon centering: many icon containers use inline-flex/grid.
   Set defaults so single icons inside a chip-shaped container don't flow weird. */
html body .badge i,
html body .pill i,
html body button i:only-child {
    flex-shrink: 0 !important;
}

/* Universal disabled state */
html body button:disabled,
html body input:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}


/* ════════════════════════════════════════════════════════════════════════
   ░░░ DEEP AUDIT — BATCH 17 (R63) — Polish: microinteractions, transitions
   ════════════════════════════════════════════════════════════════════════ */

/* Custom scrollbar styling — light theme + brand teal accent */
html body ::-webkit-scrollbar {
    width: 10px !important;
    height: 10px !important;
}
html body ::-webkit-scrollbar-track {
    background: #fafafa !important;
}
html body ::-webkit-scrollbar-thumb {
    background: rgba(20, 184, 166, 0.30) !important;
    border-radius: 999px !important;
    border: 2px solid #fafafa !important;
    transition: background 0.2s ease !important;
}
html body ::-webkit-scrollbar-thumb:hover {
    background: rgba(20, 184, 166, 0.55) !important;
}

/* Firefox scrollbar styling */
html body {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(20, 184, 166, 0.30) #fafafa !important;
}

/* Button press feedback — subtle scale on :active */
html body .btn-primary:not(:disabled):active,
html body .btn-outline:not(:disabled):active,
html body .product-add-btn:not(:disabled):active,
html body .pp-add-btn:not(:disabled):active,
html body .stack-add-btn:not(:disabled):active,
html body .compound-cta:not(:disabled):active,
html body .auth-submit:not(:disabled):active {
    transform: translateY(0) scale(0.98) !important;
    transition: transform 0.08s ease !important;
}

/* Subtle scroll-reveal classes — fade in as elements enter viewport.
   These work with the existing IntersectionObserver-based animation
   classes in app.js (scroll-animate, cy-fade-up, etc.) */
html body .scroll-animate {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}
html body .scroll-animate.animate-in {
    opacity: 1 !important;
    transform: translateY(0) !important;
}
html body .scroll-animate-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
html body .scroll-animate-left.animate-in {
    opacity: 1 !important;
    transform: translateX(0) !important;
}
html body .scroll-animate-right {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
html body .scroll-animate-right.animate-in {
    opacity: 1 !important;
    transform: translateX(0) !important;
}
html body .scroll-animate-scale {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
html body .scroll-animate-scale.animate-in {
    opacity: 1 !important;
    transform: scale(1) !important;
}

/* Image lazy-load fade-in — img elements get a smooth fade once decoded */
html body img[loading="lazy"] {
    transition: filter 0.4s ease, opacity 0.4s ease !important;
}
html body img[loading="lazy"]:not([src]) {
    opacity: 0;
    filter: blur(8px);
}

/* Skeleton loading shimmer — for cards/lists during async load */
@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
html body .skeleton,
html body .skeleton-text,
html body .skeleton-card {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%) !important;
    background-size: 200% 100% !important;
    animation: shimmer 1.6s ease-in-out infinite !important;
    border-radius: 8px !important;
    color: transparent !important;
    user-select: none !important;
}



/* Modal entrance animations — fade + scale in.
   R80 FIX: only fire animation when the modal is actually opened (parent
   has display !== none / is .visible / .active / .open). Firing on page
   load caused FOUC where cookie-prefs-modal briefly flashed visible
   during every page navigation because the animation overrode the
   default opacity: 0 state. */
@keyframes modalFadeIn {
    from { opacity: 0; transform: scale(0.96) translateY(10px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes overlayFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Scope animation to .visible / .active / .open / [data-open="true"] only */
html body .modal-content.visible,
html body .modal-content.active,
html body .product-modal-content.visible,
html body .legal-modal-content.visible,
html body .tracking-modal-content.visible,
html body .cookie-prefs-modal.visible {
    animation: modalFadeIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* For modals that show their content inside an overlay that toggles
   display:none/block (like .modal-overlay > .modal-content), trigger
   the animation when the overlay is visible. */
html body .modal-overlay[style*="display: flex"] .modal-content,
html body .modal-overlay[style*="display:flex"] .modal-content,
html body .modal-overlay.visible .modal-content,
html body .modal-overlay.active .modal-content,
html body #product-modal[style*="display: flex"] .modal-content,
html body #product-modal[style*="display:flex"] .modal-content {
    animation: modalFadeIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Overlay fade-in only when active */
html body .modal-overlay.visible,
html body .modal-overlay.active,
html body .modal-overlay[style*="display: flex"],
html body .modal-overlay[style*="display:flex"] {
    animation: overlayFadeIn 0.2s ease-out !important;
}

/* Cart drawer slide-in animation */
@keyframes cartDrawerIn {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}
html body .cart-drawer.open,
html body .cart-drawer[data-open="true"],
html body .cart-drawer.active {
    animation: cartDrawerIn 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Universal card hover polish — consistent transition on all card types */
html body .product-card,
html body .bestseller-card,
html body .stack-card,
html body .testimonial-card,
html body .why-card,
html body .goal-card,
html body .how-step,
html body .policy-card,
html body .value-card,
html body .aff-perk,
html body .related-card,
html body .compound,
html body .preset-card,
html body .builder-tile,
html body .coa-card,
html body .calc-card,
html body .osc-action,
html body .error-link-card,
html body .error-popular-card {
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.32s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.25s ease !important;
}

/* Form validation visual feedback */
html body input:user-invalid,
html body select:user-invalid,
html body textarea:user-invalid {
    border-color: rgba(239, 68, 68, 0.55) !important;
}
html body input:user-valid,
html body select:user-valid,
html body textarea:user-valid {
    border-color: rgba(20, 184, 166, 0.45) !important;
}

/* Icon transitions when used inside buttons */
html body button i,
html body a i {
    transition: transform 0.2s ease !important;
}
html body button:hover i.fa-arrow-right,
html body a:hover i.fa-arrow-right,
html body button:hover i.fa-chevron-right,
html body a:hover i.fa-chevron-right {
    transform: translateX(3px) !important;
}
html body button:hover i.fa-arrow-left,
html body a:hover i.fa-arrow-left {
    transform: translateX(-3px) !important;
}

/* Subtle "lift" feeling on link arrows */
html body .link-arrow {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #0d9488 !important;
    font-weight: 600 !important;
    transition: color 0.2s ease, gap 0.2s ease !important;
    text-decoration: none !important;
}
html body .link-arrow:hover {
    color: #0f766e !important;
    gap: 10px !important;
}
html body .link-arrow i {
    transition: transform 0.2s ease !important;
}
html body .link-arrow:hover i {
    transform: translateX(3px) !important;
}

/* Loading spinner — used in async actions */
@keyframes spinnerRotate {
    to { transform: rotate(360deg); }
}
html body .spinner,
html body .loading-spinner,
html body .fa-spin {
    animation: spinnerRotate 0.8s linear infinite !important;
}

/* Print styles — clean up for printed receipts/orders */
@media print {
    html body .navbar,
    html body .footer,
    html body .announcement-bar,
    html body .trust-marquee,
    html body .back-to-top,
    html body .cookie-consent,
    html body .hero-particles,
    html body .cy-scan-sweep {
        display: none !important;
    }
    html body .product-card,
    html body .stack-card,
    html body .order-detail {
        page-break-inside: avoid !important;
        box-shadow: none !important;
        border: 1px solid #ccc !important;
    }
}

/* Reduced motion preference — disable heavy animations */
@media (prefers-reduced-motion: reduce) {
    html body *,
    html body *::before,
    html body *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    html body .scroll-animate,
    html body .scroll-animate-left,
    html body .scroll-animate-right,
    html body .scroll-animate-scale {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Brand-consistent text underlines for inline content links */
html body main p a,
html body main li a {
    color: #0d9488 !important;
    text-decoration-color: rgba(20, 184, 166, 0.40) !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 3px !important;
    transition: color 0.2s ease, text-decoration-color 0.2s ease !important;
}
html body main p a:hover,
html body main li a:hover {
    color: #0f766e !important;
    text-decoration-color: #0f766e !important;
}

/* Highlight selection inside content areas using brand teal */
html body main strong,
html body main b {
    color: #0a0a0a !important;
}

/* Card lift hover shadow ring for all key cards.
   R436: visible teal OUTLINE that traces the whole card on hover.
   R437: more pronounced lift (translateY -4px → -10px) per user — now
   that the vial no longer zooms in on hover, the "alive" feel comes from
   the whole card rising as one block. */
html body .product-card:hover,
html body .bestseller-card:hover,
html body .stack-card:hover {
    /* R438: -10 → -14 per user, a touch more lift. */
    transform: translateY(-14px) !important;
    border-color: rgba(20, 184, 166, 0.55) !important;
    box-shadow:
        /* crisp inset ring — outlines the whole card edge */
        0 0 0 1.5px rgba(20, 184, 166, 0.55),
        /* nearby teal glow (sharp) */
        0 12px 28px rgba(20, 184, 166, 0.22),
        /* far ambient lift shadow — deeper to support the bigger rise */
        0 28px 62px rgba(0, 0, 0, 0.11)
        !important;
}


/* ════════════════════════════════════════════════════════════════════════
   ░░░ DEEP AUDIT — BATCH 18 (R64) — Critical mobile fixes
   ░░░ Discovered during the responsive QA pass: navbar margins from R44/R45
   ░░░ caused 48px horizontal overflow on mobile (logo went off-screen left
   ░░░ -48px, actions went off-screen right +48px).
   ════════════════════════════════════════════════════════════════════════ */

/* Negative nav margins only apply at desktop widths where the nav-container
   has enough breathing room. On mobile, restore zero so nothing overflows. */
@media (max-width: 768px) {
    html body .nav-logo {
        margin-left: 0 !important;
    }
    html body .nav-actions {
        margin-right: 0 !important;
    }
    /* .nav-links is hidden on mobile by other rules — the translateX(-55%+73px)
       trick from R46 is desktop-only too, so no fix needed there. */
    html body .nav-container {
        padding: 0 16px !important;
    }
}

/* Ensure hero CTA buttons wrap nicely on small screens */
@media (max-width: 540px) {
    html body .hero-cta {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
    html body .hero-cta .btn-primary,
    html body .hero-cta .btn-outline {
        flex: 1 1 calc(50% - 5px) !important;
        min-width: 140px !important;
    }
    
}

/* Section padding on mobile: 96px is too aggressive on small screens */
@media (max-width: 720px) {
    html body .why-section,
    html body .how-section,
    html body .goals-section,
    html body .bestsellers-section,
    html body .quality-section,
    html body .story-section,
    html body .testimonials-section,
    html body .newsletter-section {
        padding: 60px 0 !important;
    }
    html body .section-title {
        font-size: 2rem !important;
    }
    
}

/* Product card grid on tiny screens: ensure padding doesn't squash content */
@media (max-width: 380px) {
    html body .product-card .product-info {
        padding: 14px 14px 16px !important;
    }
    html body .product-card .product-name {
        font-size: 0.95rem !important;
    }
}

/* Trust marquee on mobile: speed up so users see more content quicker */
@media (max-width: 720px) {
    html body .trust-marquee-track {
        animation-duration: 40s !important;
    }
}

/* Footer columns on mobile: stack to 1-2 columns */
@media (max-width: 720px) {
    html body .footer-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 28px !important;
    }
    html body .footer-brand {
        grid-column: 1 / -1 !important;
    }
}
@media (max-width: 480px) {
    html body .footer-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Cookie consent on mobile: full-width minus margin */
@media (max-width: 540px) {
    html body .cookie-consent {
        margin: 8px !important;
        padding: 14px 16px !important;
    }
}

/* Search modal padding on mobile */
@media (max-width: 540px) {
    html body .search-modal-inner {
        padding: 0 16px !important;
    }
    html body .search-modal-input {
        font-size: 16px !important;  /* prevent iOS zoom on focus */
    }
}

/* Modal padding on mobile */
@media (max-width: 540px) {
    html body .modal-content {
        margin: 8px !important;
        max-height: calc(100vh - 16px) !important;
    }
    html body .modal-body {
        grid-template-columns: 1fr !important;
    }
}

/* Cart drawer full-width on mobile */
@media (max-width: 540px) {
    html body .cart-drawer {
        width: 100% !important;
        max-width: 100% !important;
        right: 0 !important;
    }
}

/* Form rows stack vertically on mobile */
@media (max-width: 640px) {
    html body .form-row,
    html body .form-row-3col {
        grid-template-columns: 1fr !important;
        flex-direction: column !important;
        gap: 14px !important;
    }
}


/* ════════════════════════════════════════════════════════════════════════
   ░░░ DEEP AUDIT — BATCH 19 (R65) — Quality tabs + stat panels + more
   ════════════════════════════════════════════════════════════════════════ */

/* Quality section tabs (Purity/Sourcing/Testing/etc) — inactive state
   was identical to active (both black). Differentiate. */
html body .quality-tab {
    background: #ffffff !important;
    color: #4a4a52 !important;
    border: 1px solid rgba(0, 0, 0, 0.10) !important;
    border-radius: 999px !important;
    padding: 10px 22px !important;
    font-weight: 600 !important;
    font-size: 0.92rem !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}
html body .quality-tab:hover {
    border-color: rgba(20, 184, 166, 0.40) !important;
    color: #0d9488 !important;
    background: rgba(20, 184, 166, 0.04) !important;
}
html body .quality-tab.active {
    background: #0a0a0a !important;
    color: #ffffff !important;
    border-color: #0a0a0a !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Quality panel stats — flat pastel mint -> unified green gradient
   for visual consistency with the brand showcase. */
html body .quality-panel-stat {
    background:
        var(--noise-svg),
        linear-gradient(180deg, #dceee0 0%, #c5dec1 100%) !important;
    border: 1px solid rgba(20, 184, 166, 0.18) !important;
}

/* Trust marquee — improve visual density on the items */
html body .trust-marquee-content {
    gap: 56px !important;
}
html body .tm-item {
    font-weight: 600 !important;
}
html body .tm-item i {
    color: #0d9488 !important;
    margin-right: 8px !important;
}


/* ════════════════════════════════════════════════════════════════════════
   ░░░ DEEP AUDIT — BATCH 20 (R66) — Cart drawer polish
   ════════════════════════════════════════════════════════════════════════ */

/* Cart item thumbnail: pure BLACK bg legacy. Apply unified green gradient. */
html body .cart-item-img {
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.04 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
        linear-gradient(180deg, #dceee0 0%, #c5dec1 100%) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

/* Cart item card — May 2026 v2: bigger + airier styling, replaces the
   heavy 1.5px/0.22 border with a softer 1px/0.08 line plus a subtle
   shadow for depth. Card feels more spacious without losing definition.
   position:relative is required so the ✕ close button can absolute-
   position to the top-right corner. */
html body .cart-item {
    border-radius: 18px !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 4px 12px rgba(0, 0, 0, 0.04) !important;
    position: relative !important;
    padding: 20px 40px 20px 18px !important;
    margin-bottom: 12px !important;
    gap: 16px !important;
}
html body .cart-item:last-child {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    margin-bottom: 0 !important;
}
/* Larger vial image so the product reads first */
html body .cart-item-img {
    width: 80px !important;
    height: 80px !important;
    flex-shrink: 0 !important;
}
html body .cart-item-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}
/* Slightly larger name + dosage for a more premium feel */
html body .cart-item-name {
    font-size: 1rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
}
html body .cart-item-dosage {
    font-size: 0.82rem !important;
    margin-top: 2px !important;
}
html body .cart-item-price {
    margin-top: 6px !important;
    font-size: 0.95rem !important;
}

/* New ✕ close button in top-right corner of each cart item (Aminoclub-
   style remove pattern — cleaner than the old "Remove" text link). */
html body .cart-item-close {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    width: 26px !important;
    height: 26px !important;
    background: transparent !important;
    border: none !important;
    color: rgba(0, 0, 0, 0.45) !important;
    cursor: pointer !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.88rem !important;
    padding: 0 !important;
    transition: background 0.15s ease, color 0.15s ease !important;
    z-index: 2 !important;
}
html body .cart-item-close:hover {
    background: rgba(0, 0, 0, 0.08) !important;
    color: rgba(0, 0, 0, 0.85) !important;
}
html body .cart-item-close i { font-size: 0.85rem !important; }

/* Cart sale price: emerald -> brand teal for consistency */
html body .cart-item-price-sale {
    color: #0d9488 !important;
    font-weight: 700 !important;
}

/* Cart qty stepper: proper bordered pill group */
html body .cart-item-qty {
    border: 1px solid rgba(0, 0, 0, 0.10) !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
}
html body .cart-item-qty button {
    border-radius: 0 !important;
    border: none !important;
    background: transparent !important;
    width: 28px !important;
    height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
}
html body .cart-item-qty button:hover {
    background: rgba(20, 184, 166, 0.10) !important;
    color: #0d9488 !important;
}
html body .cart-item-qty span,
html body .cart-item-qty input {
    min-width: 28px !important;
    text-align: center !important;
    font-weight: 600 !important;
    font-size: 0.92rem !important;
    background: transparent !important;
    border: none !important;
}

/* Cart item remove button: more visible / a11y */



/* Cart empty state — make it visually inviting */
html body .cart-empty {
    text-align: center !important;
    padding: 48px 24px !important;
    color: #6b6b73 !important;
}
html body .cart-empty i {
    font-size: 3rem !important;
    color: #d4d4d8 !important;
    margin-bottom: 16px !important;
    display: block !important;
}
html body .cart-empty h3,
html body .cart-empty strong {
    color: #1a1a1a !important;
    font-size: 1.1rem !important;
    margin-bottom: 6px !important;
    font-weight: 700 !important;
    display: block !important;
}

/* Cart subtotal: bigger and bolder for emphasis */
/* R131: 1.1rem → 1.02rem to match the slightly slimmer summary panel. */
html body .cart-subtotal {
    font-weight: 700 !important;
    font-size: 1.02rem !important;
}

/* Cart footer: ensure it's visually separated with a top divider */
html body .cart-footer {
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* Cart drawer header — close button accessibility */
html body .cart-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
}


/* ════════════════════════════════════════════════════════════════════════
   ░░░ DEEP AUDIT — BATCH 21 (R67) — Final polish: section accents + misc
   ════════════════════════════════════════════════════════════════════════ */

/* Subtle accent under section titles — small teal bar for visual rhythm */
html body .section-header-center .section-title::after,
html body .section-header.section-header-center .section-title::after {
    content: '' !important;
    display: block !important;
    width: 48px !important;
    height: 3px !important;
    background: linear-gradient(90deg, #14b8a6, #0d9488) !important;
    border-radius: 999px !important;
    margin: 14px auto 0 !important;
}

/* Universal small "info" callout style (used everywhere from blog to product) */


/* Universal warning style */


/* Universal danger style */


/* Anchor link smooth scroll offset for sticky header */
html body section[id]::before,
html body a[id]::before {
    content: '' !important;
    display: block !important;
    height: 100px !important;
    margin-top: -100px !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Ensure full-bleed images on cards don't get random outline */
html body img {
    user-select: none !important;
    -webkit-user-drag: none !important;
}

/* Truncate long product names gracefully */
html body .product-name,
html body .bs-name,
html body .preset-name,
html body .cart-item-name {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}

/* Heading scale standardization — pages without classed h1 still benefit */
html body main h1 { color: #0a0a0a !important; font-weight: 800 !important; }
html body main h2 { color: #0a0a0a !important; font-weight: 800 !important; }
html body main h3 { color: #1a1a1a !important; font-weight: 700 !important; }
html body main h4 { color: #1a1a1a !important; font-weight: 700 !important; }

/* Blockquote universal style (in case content authors use raw blockquote) */
html body main blockquote {
    border-left: 4px solid #0d9488 !important;
    background: rgba(20, 184, 166, 0.04) !important;
    padding: 16px 22px !important;
    margin: 20px 0 !important;
    color: #1a1a1a !important;
    font-style: italic !important;
    border-radius: 0 12px 12px 0 !important;
}

/* Code blocks: keep mono but on brand */
html body main code,
html body main pre {
    background: #f5f5f7 !important;
    color: #0d9488 !important;
    border-radius: 6px !important;
    padding: 2px 6px !important;
    font-family: 'JetBrains Mono', 'Fira Code', monospace !important;
    font-size: 0.88em !important;
}
html body main pre {
    padding: 14px 18px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    overflow-x: auto !important;
}
html body main pre code {
    background: transparent !important;
    padding: 0 !important;
    color: #1a1a1a !important;
}

/* Subtle pulse for the cart count badge when items added */
@keyframes cartCountPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.18); }
}
html body .cart-count.has-items,
html body .cart-count:not(:empty) {
    animation: cartCountPulse 0.4s ease !important;
}

/* Newsletter input focus styling — teal accent ring */
html body .newsletter-form input[type="email"]:focus,
html body #newsletter-email:focus {
    outline: none !important;
    border-color: rgba(20, 184, 166, 0.50) !important;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.12) !important;
}

/* Standardize all input focus states with teal ring */
html body input:focus:not([type="checkbox"]):not([type="radio"]),
html body textarea:focus,
html body select:focus {
    outline: none !important;
    border-color: rgba(20, 184, 166, 0.50) !important;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.12) !important;
}

/* Form group label styling consistency */
html body .form-group label,
html body .auth-field label {
    display: block !important;
    margin-bottom: 6px !important;
    color: #1a1a1a !important;
    font-weight: 600 !important;
    font-size: 0.88rem !important;
}

/* Required field indicator */
html body label .required,
html body label::after {
    color: #ef4444 !important;
    font-weight: 700 !important;
    margin-left: 2px !important;
}

/* Final touch: subtle page entrance fade — body fades in once styles
   are applied (eliminates FOUC on slower connections). */
@keyframes pageFadeIn {
    from { opacity: 0.96; }
    to   { opacity: 1; }
}
html body {
    animation: pageFadeIn 0.22s ease-out !important;
}


/* ════════════════════════════════════════════════════════════════════════
   ░░░ DEEP AUDIT — BATCH 22 (R68) — Admin dashboard light theme
   ░░░ Admin page has heavy dark-mode inline styles (rgba(15,23,42,0.6))
   ░░░ on KPI strip, stat cards, product cards, tabs use Orbitron headers.
   ░░░ Override to match the rest of the light-theme site.
   ════════════════════════════════════════════════════════════════════════ */

/* Admin gate (auth screen) — make it a proper card */
html body .admin-page .admin-gate {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 16px !important;
    max-width: 480px !important;
    margin: 40px auto !important;
    padding: 48px 32px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 12px 32px rgba(0, 0, 0, 0.06) !important;
    color: #4a4a52 !important;
}
html body .admin-page .admin-gate i {
    color: #0d9488 !important;
    opacity: 1 !important;
    font-size: 2.5rem !important;
    margin-bottom: 18px !important;
}
html body .admin-page .admin-gate h2 {
    color: #0a0a0a !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 1.4rem !important;
    font-weight: 800 !important;
}
html body .admin-page .admin-gate p {
    color: #4a4a52 !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    margin-bottom: 18px !important;
}
html body .admin-page .admin-gate a {
    color: #0d9488 !important;
}

/* Admin header h1: drop Orbitron */
html body .admin-page .admin-header h1 {
    font-family: 'Inter', sans-serif !important;
    color: #0a0a0a !important;
    font-weight: 800 !important;
    font-size: 1.8rem !important;
}

/* Admin tabs — already underline-based, make sure inactive/hover are clear */
html body .admin-page .admin-tab {
    color: #6b6b73 !important;
    border-bottom: 2px solid transparent !important;
    font-weight: 600 !important;
}
html body .admin-page .admin-tab:hover {
    color: #0a0a0a !important;
}
html body .admin-page .admin-tab.active {
    color: #0d9488 !important;
    border-bottom-color: #0d9488 !important;
    font-weight: 700 !important;
}

/* KPI strip: dark navy bleed -> light card */
html body .admin-page .admin-kpi-strip {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
    backdrop-filter: none !important;
    border-radius: 16px !important;
}
html body .admin-page .admin-kpi {
    border-right: 1px solid rgba(0, 0, 0, 0.06) !important;
}
html body .admin-page .admin-kpi-label {
    color: #6b6b73 !important;
}
html body .admin-page .admin-kpi-value {
    font-family: 'Inter', sans-serif !important;
    color: #0a0a0a !important;
    font-weight: 800 !important;
}
html body .admin-page .admin-kpi-sub { color: #6b6b73 !important; }

/* Admin stat cards (affiliates tab) — same */
html body .admin-page .admin-stat {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
    backdrop-filter: none !important;
    border-radius: 16px !important;
}
html body .admin-page .admin-stat-label { color: #6b6b73 !important; }
html body .admin-page .admin-stat-value {
    font-family: 'Inter', sans-serif !important;
    color: #0a0a0a !important;
    font-weight: 800 !important;
}

/* Admin product cards — dark bleed -> white card */
html body .admin-page .admin-product-card {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
    backdrop-filter: none !important;
    border-radius: 16px !important;
    color: #1a1a1a !important;
}
html body .admin-page .admin-product-card.low-stock {
    border-color: rgba(245, 158, 11, 0.4) !important;
    background: rgba(245, 158, 11, 0.03) !important;
}
html body .admin-page .admin-product-card.out-of-stock {
    border-color: rgba(239, 68, 68, 0.40) !important;
    background: rgba(239, 68, 68, 0.04) !important;
}

/* Admin refresh button — pill style */
html body .admin-page .admin-refresh {
    border-radius: 999px !important;
    background: #ffffff !important;
    border: 1px solid rgba(20, 184, 166, 0.40) !important;
    color: #0d9488 !important;
    padding: 9px 18px !important;
    font-weight: 600 !important;
    font-family: 'Inter', sans-serif !important;
    transition: all 0.2s ease !important;
}
html body .admin-page .admin-refresh:hover {
    background: rgba(20, 184, 166, 0.06) !important;
    border-color: #0d9488 !important;
}

/* Admin tabs container — bottom border */
html body .admin-page .admin-tabs {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}


/* ════════════════════════════════════════════════════════════════════════
   ░░░ BATCH 23 (R69) — Compare page polish + FAQ second pass
   ════════════════════════════════════════════════════════════════════════ */

/* Compare picker (the slot tiles) — make hover state clearer */





/* Compare slot label — give it brand prominence */


/* Compare preset chips — interactive feedback */



/* Compare table proper rounded wrap */

html body .compare-table {
    border-collapse: collapse !important;
    width: 100% !important;
}
html body .compare-table th,
html body .compare-table td {
    padding: 14px 16px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    color: #1a1a1a !important;
    text-align: left !important;
}
html body .compare-table th {
    background: #fafafa !important;
    font-weight: 700 !important;
    color: #0a0a0a !important;
    text-transform: uppercase !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.5px !important;
}
html body .compare-table tr:last-child td {
    border-bottom: none !important;
}
html body .compare-table tr:hover td {
    background: rgba(20, 184, 166, 0.02) !important;
}


/* ════════════════════════════════════════════════════════════════════════
   ░░░ BATCH 24 (R70) — Contact, About refinements
   ════════════════════════════════════════════════════════════════════════ */

/* Contact form: ensure form-group has proper spacing */
html body .contact-form .form-group {
    margin-bottom: 16px !important;
}
html body .contact-form .form-group label {
    display: block !important;
    color: #1a1a1a !important;
    font-weight: 600 !important;
    font-size: 0.88rem !important;
    margin-bottom: 6px !important;
}

/* Contact info icons */
html body .contact-item i {
    color: #0d9488 !important;
    font-size: 1.05rem !important;
    margin-right: 10px !important;
}

/* About page stat groupings — hover lift if it's a card-like component */
html body .about-stats .stat {
    transition: transform 0.25s ease !important;
}
html body .about-stats .stat:hover {
    transform: translateY(-3px) !important;
}

/* About logo image — proper styling */
html body .about-logo-img {
    max-width: 100% !important;
    height: auto !important;
}

/* FAQ search results count message */
html body .faq-no-results {
    background: #ffffff !important;
    border: 1px dashed rgba(0, 0, 0, 0.15) !important;
    border-radius: 16px !important;
    color: #4a4a52 !important;
    text-align: center !important;
    padding: 40px 20px !important;
}
html body .faq-no-results i {
    font-size: 2.5rem !important;
    color: #d4d4d8 !important;
    margin-bottom: 16px !important;
    display: block !important;
}


/* ════════════════════════════════════════════════════════════════════════
   ░░░ BATCH 25 (R71) — Email templates page (preview page)
   ════════════════════════════════════════════════════════════════════════ */

/* email-templates.html is an internal page that previews transactional
   emails. Standardize headings + tab styling. */



html body main .et-tab.active,
html body main .email-template-tab.active {
    background: linear-gradient(135deg, #14b8a6, #0d9488) !important;
    color: #ffffff !important;
    border-color: #0d9488 !important;
}



/* ════════════════════════════════════════════════════════════════════════
   ░░░ DEEP AUDIT — BATCH 26 (R72) — Empty states + loading states
   ░░░ Make every "nothing here" feel intentional rather than broken.
   ════════════════════════════════════════════════════════════════════════ */

/* Universal empty state pattern — used as fallback wherever we don't have
   a more specific empty state. Shows a soft icon, headline, sub copy. */
html body .empty-state,
html body .no-results,
html body .nothing-here {
    text-align: center !important;
    padding: 56px 24px !important;
    color: #6b6b73 !important;
    max-width: 480px !important;
    margin: 0 auto !important;
}
html body .empty-state i:first-child,
html body .no-results i:first-child,
html body .nothing-here i:first-child {
    font-size: 3rem !important;
    color: #d4d4d8 !important;
    display: block !important;
    margin-bottom: 18px !important;
}
html body .empty-state h3,
html body .empty-state strong,
html body .no-results h3,
html body .nothing-here h3 {
    color: #0a0a0a !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    margin-bottom: 6px !important;
    display: block !important;
}
html body .empty-state p,
html body .no-results p,
html body .nothing-here p {
    color: #4a4a52 !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    margin-bottom: 18px !important;
}

/* Order history empty state */


/* Wishlist empty state on account page */
html body .wishlist-empty,
html body #wishlist-empty {
    text-align: center !important;
    padding: 48px 24px !important;
    color: #4a4a52 !important;
}

/* Search modal empty / no-results state */
html body .search-modal-empty {
    text-align: center !important;
    padding: 48px 32px !important;
    color: rgba(255, 255, 255, 0.55) !important;  /* dark modal */
}

/* Catalog empty state when search returns nothing */
html body .products-grid:empty + .catalog-empty-message,
html body .no-products-found,
html body .catalog-no-results {
    text-align: center !important;
    padding: 60px 24px !important;
    background: #ffffff !important;
    border: 1px dashed rgba(0, 0, 0, 0.15) !important;
    border-radius: 16px !important;
    margin: 24px 0 !important;
    color: #4a4a52 !important;
}

/* COA page no-results */


/* Loading screen / spinner overlay */
html body .loading-screen {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(4px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 9000 !important;
    transition: opacity 0.3s ease !important;
}
html body .loading-screen.hidden {
    opacity: 0 !important;
    pointer-events: none !important;
}
html body .loading-screen i {
    font-size: 2.5rem !important;
    color: #0d9488 !important;
    animation: spinnerRotate 0.8s linear infinite !important;
}

/* Inline loading state for buttons */
html body button.loading,
html body button[aria-busy="true"] {
    position: relative !important;
    color: transparent !important;
    pointer-events: none !important;
}
html body button.loading::after,
html body button[aria-busy="true"]::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 18px !important;
    height: 18px !important;
    margin: -9px 0 0 -9px !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-top-color: #ffffff !important;
    border-radius: 50% !important;
    animation: spinnerRotate 0.8s linear infinite !important;
}

/* Skeleton loading screen for product grid */
html body .products-grid.loading::before,
html body .products-grid.is-loading::before {
    content: '' !important;
    grid-column: 1 / -1 !important;
    height: 200px !important;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%) !important;
    background-size: 200% 100% !important;
    animation: shimmer 1.6s ease-in-out infinite !important;
    border-radius: 16px !important;
}


/* ════════════════════════════════════════════════════════════════════════
   ░░░ DEEP AUDIT — BATCH 27 (R73) — Iconography consistency
   ░░░ Standardize Font Awesome icon sizes + colors in common contexts.
   ════════════════════════════════════════════════════════════════════════ */

/* Icons in buttons: align baseline + consistent size */
html body button > i,
html body a.btn-primary > i,
html body a.btn-outline > i,
html body a.btn-large > i {
    font-size: 0.9em !important;
    line-height: 1 !important;
    vertical-align: middle !important;
}

/* Icons in section badges: smaller than body text */
html body .section-badge > i,
html body .hero-badge > i {
    font-size: 0.85em !important;
}

/* Icons in cards: consistent sizing inside icon containers */
html body .value-icon i,
html body .policy-icon i,
html body .why-icon i,
html body .how-step-icon i,
html body .goal-icon i,
html body .aff-perk-icon i,
html body .compound-cta i {
    font-size: 1.2em !important;
    line-height: 1 !important;
}

/* Icons in nav links + tabs: small + brand-teal accent on hover */
html body .nav-links a > i,
html body .footer-link-btn > i {
    font-size: 0.85em !important;
    margin-right: 4px !important;
}

/* Trust marquee icons: brand teal */
html body .tm-item > i {
    color: #0d9488 !important;
    margin-right: 8px !important;
    font-size: 0.95em !important;
}

/* Checkmark list icons (common in feature lists) */


/* Star ratings consistent color */
html body .fa-star,
html body .fa-star-half-alt,
html body .fa-star-half-stroke,
html body .stars .fa-star {
    color: #fbbf24 !important;
}

/* Verified / check-circle icons: brand-success green */
html body .fa-circle-check,
html body .fa-check-circle,
html body .verified-icon i {
    color: #14b8a6 !important;
}

/* Warning / alert icons amber */
html body .fa-triangle-exclamation,
html body .fa-exclamation-triangle,
html body .warning-icon i {
    color: #f59e0b !important;
}

/* Danger / error icons red */
html body .fa-circle-xmark,
html body .fa-times-circle,
html body .error-icon-glyph i {
    color: #ef4444 !important;
}

/* Loading spinner icons brand teal */
html body .fa-spinner,
html body .fa-circle-notch,
html body i.fa-spin {
    color: #0d9488 !important;
}

/* Lock/security icons */
html body .fa-lock,
html body .fa-shield-halved,
html body .fa-shield-heart,
html body .fa-shield-alt {
    color: #0d9488 !important;
}

/* Standard icon-button size in toolbars (cart, search trigger, etc.) */
html body .nav-search-trigger,
html body .nav-cart-btn,
html body .nav-account-btn,
html body .cart-btn {
    width: 40px !important;
    height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 50% !important;
    color: #1a1a1a !important;
    font-size: 0.95rem !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    text-decoration: none !important;
}
html body .nav-search-trigger:hover,
html body .nav-cart-btn:hover,
html body .nav-account-btn:hover,
html body .cart-btn:hover {
    border-color: rgba(20, 184, 166, 0.40) !important;
    color: #0d9488 !important;
    background: rgba(20, 184, 166, 0.04) !important;
}


/* ════════════════════════════════════════════════════════════════════════
   ░░░ DEEP AUDIT — BATCH 28 (R74) — Modal & drawer interaction polish
   ════════════════════════════════════════════════════════════════════════ */

/* Cookie prefs modal: row separator fix (was rgba(255,255,255,0.06) — invisible) */
html body .cookie-prefs-modal .cookie-pref-row,
html body .cookie-pref-row {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}
html body .cookie-prefs-modal .cookie-pref-row:last-child,
html body .cookie-pref-row:last-child {
    border-bottom: none !important;
}

/* Cookie prefs modal: 14px br -> 16px */
html body .cookie-prefs-modal { border-radius: 16px !important; }

/* Cookie prefs actions — primary button distinction */
html body .cookie-prefs-modal .cookie-prefs-actions,
html body .cookie-prefs-actions {
    padding: 16px 24px 20px !important;
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
    display: flex !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
}
html body .cookie-prefs-actions button:not(:last-child),
html body .cookie-prefs-actions .btn-secondary,
html body .cookie-prefs-actions .cookie-prefs-reject {
    background: #ffffff !important;
    color: #4a4a52 !important;
    border: 1px solid rgba(0, 0, 0, 0.10) !important;
    transition: all 0.2s ease !important;
}

html body .cookie-prefs-actions button:last-child,
html body .cookie-prefs-actions .cookie-prefs-save,
html body .cookie-prefs-actions .btn-primary {
    background: linear-gradient(135deg, #14b8a6, #0d9488) !important;
    color: #ffffff !important;
    border: 1px solid #0d9488 !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(20, 184, 166, 0.22) !important;
}


/* Cookie prefs body sections */
html body .cookie-prefs-modal h3,
html body .cookie-prefs-modal h4 {
    color: #0a0a0a !important;
    font-weight: 700 !important;
}
html body .cookie-prefs-modal p {
    color: #4a4a52 !important;
    line-height: 1.6 !important;
}
html body .cookie-prefs-modal .cookie-pref-name {
    color: #0a0a0a !important;
    font-weight: 700 !important;
}
html body .cookie-prefs-modal .cookie-pref-desc {
    color: #6b6b73 !important;
    font-size: 0.88rem !important;
    line-height: 1.55 !important;
}

/* Mobile menu polish — nav items proper spacing + dividers */
html body .mobile-menu {
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.08) !important;
}
html body .mobile-menu a,
html body .mobile-menu .mobile-nav-link {
    border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
    transition: color 0.2s ease, background 0.2s ease !important;
    padding: 14px 4px !important;
    color: #1a1a1a !important;
    text-decoration: none !important;
    display: block !important;
    font-weight: 500 !important;
}
html body .mobile-menu a:hover {
    color: #0d9488 !important;
    background: rgba(20, 184, 166, 0.04) !important;
}
html body .mobile-menu a.active {
    color: #0d9488 !important;
    font-weight: 700 !important;
}

/* Mobile nav highlight — affiliate program style as a teal-tinted card */
html body .mobile-menu .mobile-nav-highlight {
    background: rgba(20, 184, 166, 0.06) !important;
    border: 1px solid rgba(20, 184, 166, 0.20) !important;
    border-radius: 12px !important;
    margin: 8px 0 !important;
    padding: 12px 14px !important;
    color: #0d9488 !important;
    font-weight: 700 !important;
}

/* Mobile menu close button */
html body .mobile-menu-close,
html body .mobile-menu .close-btn {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: #f5f5f7 !important;
    color: #4a4a52 !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}


/* Email popup polish */
html body .email-popup,
html body #email-popup {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 18px !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10), 0 4px 12px rgba(0, 0, 0, 0.06) !important;
    max-width: 500px !important;
    padding: 22px 24px !important;
    gap: 14px !important;
}

/* Email popup heading: Orbitron is too wide & was breaking one-word-per-line.
   Force Inter + tighter letter-spacing. */
html body .email-popup-text strong,
html body #email-popup strong {
    font-family: 'Inter', sans-serif !important;
    font-weight: 800 !important;
    font-size: 1.05rem !important;
    color: #0a0a0a !important;
    letter-spacing: -0.01em !important;
    line-height: 1.25 !important;
    display: block !important;
    margin-bottom: 4px !important;
    white-space: normal !important;
    word-spacing: normal !important;
}

/* Email popup subtitle (was JetBrains Mono) */
html body .email-popup-text span,
html body #email-popup span:not(.fa) {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.82rem !important;
    color: #4a4a52 !important;
    line-height: 1.45 !important;
    letter-spacing: 0 !important;
}

/* Email popup icon container */
html body .email-popup-icon {
    background: rgba(20, 184, 166, 0.10) !important;
    color: #0d9488 !important;
    border-radius: 12px !important;
    width: 44px !important;
    height: 44px !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Email popup form layout: input + button inline */
html body .email-popup-form {
    display: flex !important;
    align-items: stretch !important;
    gap: 8px !important;
    margin-top: 8px !important;
}
html body .email-popup-form input[type="email"] {
    flex: 1 !important;
    min-width: 0 !important;
    border-radius: 999px !important;
    padding: 10px 16px !important;
    border: 1px solid rgba(0, 0, 0, 0.10) !important;
    font-size: 0.92rem !important;
}
html body .email-popup-form button[type="submit"] {
    background: linear-gradient(135deg, #14b8a6, #0d9488) !important;
    color: #ffffff !important;
    border-radius: 999px !important;
    border: none !important;
    width: 40px !important;
    height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
html body .email-popup-form button[type="submit"]:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(20, 184, 166, 0.30) !important;
}

/* Email popup close button: small X in top-right */
html body .email-popup-close {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: #6b6b73 !important;
    border: none !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.78rem !important;
    transition: background 0.2s ease, color 0.2s ease !important;
}
html body .email-popup-close:hover {
    background: rgba(0, 0, 0, 0.06) !important;
    color: #1a1a1a !important;
}

/* Email popup is positioned fixed bottom-left/right; ensure proper layout.
   Layout: icon | text content (heading + subtitle), with the form taking
   the full row below via flex-basis 100%. */
html body .email-popup {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    position: fixed !important;
    column-gap: 12px !important;
    row-gap: 10px !important;
    max-width: 500px !important;
    width: calc(100vw - 24px) !important;
}
html body .email-popup-text {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding-right: 18px !important;  /* leave room for close button */
}
html body .email-popup-form {
    flex: 1 0 100% !important;  /* form takes its own row */
    width: 100% !important;
}

/* Social proof toast — clean white pill */
html body .social-proof-toast {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 999px !important;
    padding: 10px 18px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
}
html body .social-proof-toast strong {
    color: #0d9488 !important;
}

/* Age gate modal styling — full-page take-over */
html body .age-gate,
html body #age-gate {
    background: rgba(15, 15, 18, 0.92) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    z-index: 10000 !important;
}
html body .age-gate-content,
html body .age-check-content {
    background: #ffffff !important;
    border-radius: 24px !important;
    padding: 48px 36px !important;
    max-width: 480px !important;
    color: #1a1a1a !important;
    text-align: center !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.30) !important;
}
html body .age-gate-content h2,
html body .age-check-content h2 {
    color: #0a0a0a !important;
    font-weight: 800 !important;
    margin-bottom: 12px !important;
}
html body .age-gate-content p,
html body .age-check-content p {
    color: #4a4a52 !important;
    line-height: 1.6 !important;
    margin-bottom: 22px !important;
}

/* Universal modal close button accessibility */
html body .modal-close {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    color: #4a4a52 !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.9rem !important;
    transition: all 0.2s ease !important;
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    z-index: 5 !important;
}
html body .modal-close:hover {
    background: rgba(239, 68, 68, 0.08) !important;
    color: #b91c1c !important;
    border-color: rgba(239, 68, 68, 0.30) !important;
}


/* ════════════════════════════════════════════════════════════════════════
   ░░░ DEEP AUDIT — BATCH 29 (R75) — Edge cases: tiny + wide viewports
   ════════════════════════════════════════════════════════════════════════ */

/* Very narrow phones (320px) — additional padding adjustments */
@media (max-width: 360px) {
    html body .container,
    html body .nav-container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    
    html body .section-title {
        font-size: 1.65rem !important;
    }
    html body .btn-large {
        padding: 13px 20px !important;
        font-size: 0.9rem !important;
    }
    html body .product-card .product-info {
        padding: 12px !important;
    }
    html body .product-card .product-name {
        font-size: 0.9rem !important;
    }
    html body .auth-card {
        padding: 24px 18px !important;
    }
}

/* Very wide screens (1920px+) — cap max widths so content doesn't get
   visually lost in vast white space. */
@media (min-width: 1600px) {
    html body .container,
    html body .nav-container {
        max-width: 1500px !important;
    }
    html body .hero-content {
        max-width: 1400px !important;
        margin: 0 auto !important;
    }
}

/* Ultra-wide screens (2400px+) — keep content centered + tighter */
@media (min-width: 2200px) {
    html body main {
        max-width: 1700px !important;
        margin: 0 auto !important;
    }
}

/* Edge case: tooltip behavior on touch devices (skip hover) */
@media (hover: none) {
    html body .product-card:hover,
    html body .stack-card:hover,
    html body .why-card:hover,
    html body .testimonial-card:hover,
    html body .goal-card:hover {
        transform: none !important;
    }
}


/* ════════════════════════════════════════════════════════════════════════
   ░░░ DEEP AUDIT — BATCH 30 (R76) — Accessibility: focus, ARIA, contrast
   ════════════════════════════════════════════════════════════════════════ */

/* Skip-to-main link: only visible on focus, but styled cleanly when visible */
html body .skip-to-main {
    position: absolute !important;
    top: -100px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: #0a0a0a !important;
    color: #ffffff !important;
    padding: 12px 24px !important;
    border-radius: 999px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    z-index: 99999 !important;
    transition: top 0.2s ease !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15) !important;
}
html body .skip-to-main:focus,
html body .skip-to-main:focus-visible {
    top: 14px !important;
    outline: 3px solid #0d9488 !important;
    outline-offset: 2px !important;
}

/* Every interactive element gets a visible focus ring */
html body a:focus-visible,
html body button:focus-visible,
html body input:focus-visible,
html body select:focus-visible,
html body textarea:focus-visible,
html body [role="button"]:focus-visible,
html body [tabindex="0"]:focus-visible {
    outline: 2px solid #0d9488 !important;
    outline-offset: 2px !important;
    border-radius: 8px !important;
}

/* Pill buttons get a pill focus ring */
html body .btn-primary:focus-visible,
html body .btn-outline:focus-visible,
html body .btn-large:focus-visible,
html body .product-add-btn:focus-visible,
html body .auth-submit:focus-visible {
    outline: 3px solid rgba(20, 184, 166, 0.50) !important;
    outline-offset: 3px !important;
    border-radius: 999px !important;
}

/* Make sure interactive cards have keyboard-visible focus */
html body .product-card:focus-visible,
html body .stack-card:focus-visible,
html body .goal-card:focus-visible,
html body .related-card:focus-visible {
    outline: 3px solid rgba(20, 184, 166, 0.45) !important;
    outline-offset: 4px !important;
    transform: translateY(-3px) !important;
}

/* High-contrast mode: respect users who need it */
@media (prefers-contrast: more) {
    html body {
        --text-muted: #2a2a30 !important;
    }
    html body .section-subtitle,
    html body .blog-meta,
    html body .footer-link-btn,
    html body p.muted,
    html body .text-muted {
        color: #2a2a30 !important;
    }
    html body button,
    html body .btn-outline {
        border-width: 2px !important;
    }
}

/* Forced colors mode (Windows High Contrast) */
@media (forced-colors: active) {
    html body .btn-primary,
    html body .btn-outline {
        border: 2px solid currentColor !important;
    }
}

/* Visually-hidden helper for SR-only labels */
html body .sr-only,
html body .visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Ensure all images have alt-fallback text styling when alt is shown */
html body img:not([alt]),
html body img[alt=""] {
    /* Browsers show alt as text only when image is broken */
}

/* Reduce content shift while images load — explicit aspect-ratio */
html body .product-card .product-image img,
html body .pp-image-wrap img,
html body .bestseller-card .bs-image img {
    aspect-ratio: 1 / 1 !important;
}

/* R194: another +10% zoom (1.08 → 1.18) — vial reads bigger on
   the detail page. */
html body .pp-image-wrap:not(.is-coa) img {
    transform: scale(1.18) !important;
    transform-origin: center !important;
    transition: transform 0.5s cubic-bezier(0.2, 0.6, 0.3, 1),
                filter 0.4s ease !important;
    filter:
        var(--cy-vial-shift)
        drop-shadow(0 12px 28px rgba(15, 26, 44, 0.22))
        drop-shadow(0 4px 10px rgba(15, 26, 44, 0.12)) !important;
    image-rendering: auto !important;
}
html body .pp-image-wrap:not(.is-coa):hover img {
    transform: scale(1.22) translateY(-4px) !important;
    filter:
        var(--cy-vial-shift)
        drop-shadow(0 18px 36px rgba(15, 26, 44, 0.28))
        drop-shadow(0 8px 16px rgba(15, 26, 44, 0.16))
        drop-shadow(0 0 24px rgba(20, 184, 166, 0.18)) !important;
}


/* ════════════════════════════════════════════════════════════════════════
   ░░░ R173 — COA THUMBNAIL: PREVIEW IMAGE + READABLE LABEL
   ░░░ Shows the actual COA preview image (top portion). A solid dark
   ░░░ bar at the bottom holds the "VIEW COA" label on a single line.
   ░░░ Background switched from pure white to soft off-cream so the
   ░░░ COA paper edges blend without a bright white tint.
   ════════════════════════════════════════════════════════════════════════ */
html body .pp-thumb-coa {
    /* Soft off-cream so the COA's white paper doesn't create a harsh
       brightness tint at the edges — blends naturally with the document. */
    background: #f5f6f8 !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: relative !important;
}
html body .pp-thumb-coa-preview {
    width: 100% !important;
    height: calc(100% - 22px) !important;  /* leave room for label bar */
    object-fit: cover !important;
    object-position: top center !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    /* slight desaturation softens the harsh white of the paper */
    filter: saturate(0.85) brightness(0.96) !important;
}
html body .pp-thumb-coa-label {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 22px !important;
    padding: 0 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* Solid dark bar (no gradient) so the text is always crisp */
    background: #0f1a2c !important;
    color: #ffffff !important;
    font-size: 0.62rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    text-align: center !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    z-index: 2 !important;
}
html body .pp-thumb-coa:hover .pp-thumb-coa-label {
    background: #14b8a6 !important;
}
/* Hide the icon when the preview img is showing */
html body .pp-thumb-coa .pp-thumb-coa-icon {
    display: none !important;
}
/* When the preview image fails to load, show the icon centered */
html body .pp-thumb-coa:has(.pp-thumb-coa-preview[style*="display:none"]) .pp-thumb-coa-icon,
html body .pp-thumb-coa:not(:has(.pp-thumb-coa-preview)) .pp-thumb-coa-icon {
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, calc(-50% - 11px)) !important;
    font-size: 1.6rem !important;
    color: var(--accent) !important;
}

/* Disabled link styling */
html body a[aria-disabled="true"] {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}


/* ════════════════════════════════════════════════════════════════════════
   ░░░ R89 — Goals grid visibility (Find What You're Studying section)
   ░░░ 3-column layout instead of orphan + stronger pastel backgrounds
   ░░░ + larger icons, bolder text, more contrast
   ════════════════════════════════════════════════════════════════════════ */

/* 3 columns x 2 rows (6 cards) for balanced layout */




/* Stronger pastel backgrounds for goal cards (override the lighter
   --pastel-* variables with more saturated values just for this section). */
html body .goal-card.goal-mint     { background: #c6e0c4 !important; }
html body .goal-card.goal-peach    { background: #f2cab1 !important; }
html body .goal-card.goal-lavender { background: #d8c8ec !important; }
html body .goal-card.goal-sky      { background: #c4d4e5 !important; }
html body .goal-card.goal-cream    { background: #ecdfb0 !important; }
html body .goal-card.goal-blush    { background: #edc4c4 !important; }

/* Larger padding + better proportions */
html body .goal-card {
    padding: 28px 26px !important;
    min-height: 130px !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}
html body .goal-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.10) !important;
}

/* Bigger, more prominent icon container */
html body .goal-card .goal-icon {
    width: 60px !important;
    height: 60px !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.85) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    font-size: 1.55rem !important;
    color: #0a0a0a !important;
}

/* Bolder + more readable title */
html body .goal-card .goal-body h3 {
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: #0a0a0a !important;
    letter-spacing: -0.01em !important;
    line-height: 1.2 !important;
    margin-bottom: 5px !important;
}

/* Better body description contrast */
html body .goal-card .goal-body p {
    color: rgba(0, 0, 0, 0.72) !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
}

/* Goal arrow nudged + more visible */
html body .goal-card .goal-arrow {
    width: 40px !important;
    height: 40px !important;
    background: rgba(255, 255, 255, 0.85) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
    font-size: 0.95rem !important;
    color: #0a0a0a !important;
}
html body .goal-card:hover .goal-arrow {
    background: #0a0a0a !important;
    color: #ffffff !important;
    transform: translateX(4px) !important;
}

/* Section subtitle on goals: improve readability */
html body .goals-section .section-subtitle {
    color: #4a4a52 !important;
    font-size: 1.02rem !important;
    line-height: 1.55 !important;
    max-width: 620px !important;
    margin: 14px auto 0 !important;
}

/* R90: shift the entire goals section content 1.5vw to the right */
html body .goals-section .container {
    transform: translateX(1.5vw) !important;
}


/* ════════════════════════════════════════════════════════════════════════
   ░░░ PHASE 2 (R87) — Conversion polish: highlight key CTAs subtly
   ════════════════════════════════════════════════════════════════════════ */

/* Cart upsell free-shipping bar gets a subtle pulse so it's noticed.
   Only when there's still distance to go (the rendered element has
   inline progress; we trigger the pulse via .cart-upsell:not(.complete)) */
@keyframes shippingProgressPulse {
    0%, 100% { background: rgba(20, 184, 166, 0.08); }
    50%      { background: rgba(20, 184, 166, 0.14); }
}
html body .cart-upsell {
    animation: shippingProgressPulse 3s ease-in-out infinite !important;
}

/* Free shipment protection callout (PDP + cart + checkout): teal accent
   border + slight breathing animation to draw eyes during decision. */
@keyframes protectionGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(20, 184, 166, 0); }
    50%      { box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.06); }
}
html body .pp-protection-callout {
    animation: protectionGlow 4s ease-in-out infinite !important;
}

/* Cutoff timer (Order within Xh Ym for same-day dispatch) gets a
   subtle warm-amber glow to communicate urgency without screaming. */
html body .pp-cutoff-row {
    background: rgba(251, 191, 36, 0.06) !important;
    border-left: 3px solid #f59e0b !important;
    border-radius: 4px 12px 12px 4px !important;
    padding: 10px 14px !important;
    color: #92400e !important;
    font-weight: 500 !important;
}
html body .pp-cutoff-row i {
    color: #f59e0b !important;
}
html body .pp-cutoff-row strong {
    color: #78350f !important;
    font-weight: 800 !important;
}

/* Viewer count text feels more "live" with a soft pulse on the eye icon */
@keyframes liveViewerPulse {
    0%, 100% { opacity: 0.85; }
    50%      { opacity: 1; }
}
html body .pp-meta-item i.fa-eye {
    color: #0d9488 !important;
    animation: liveViewerPulse 2s ease-in-out infinite !important;
}

/* "Proceed to Checkout" button: extra prominence on the cart drawer */
html body .btn-checkout {
    background: linear-gradient(135deg, #0a0a0a 0%, #1f1f1f 100%) !important;
    background-image: linear-gradient(135deg, #0a0a0a 0%, #1f1f1f 100%) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 8px 24px rgba(20, 184, 166, 0.08) !important;
    position: relative !important;
    overflow: hidden !important;
}
html body .btn-checkout:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.20), 0 16px 36px rgba(20, 184, 166, 0.12) !important;
}
/* Subtle shimmer on the checkout button — only on cart-footer context */
html body .cart-footer .btn-checkout::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -120% !important;
    width: 60% !important;
    height: 100% !important;
    background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0) 70%, transparent 100%) !important;
    transform: skewX(-20deg) !important;
    animation: ctaShimmer 6s ease-in-out infinite !important;
    pointer-events: none !important;
}

/* Newsletter input — slight teal glow on focus for premium feel */
html body .newsletter-form input[type="email"]:focus,
html body #newsletter-email:focus {
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.18), 0 4px 16px rgba(20, 184, 166, 0.08) !important;
}

/* Stock urgency badges get a subtle pulse for "selling fast" */
@keyframes urgencyPulse {
    0%, 100% { background: rgba(245, 158, 11, 0.14); }
    50%      { background: rgba(245, 158, 11, 0.22); }
}
html body .stock-urgency.fast,
html body .stock-urgency.low,
html body .stock-urgency.critical {
    animation: urgencyPulse 2.5s ease-in-out infinite !important;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    html body .cart-upsell,
    html body .pp-protection-callout,
    html body .pp-meta-item i.fa-eye,
    html body .stock-urgency,
    html body .cart-footer .btn-checkout::after {
        animation: none !important;
    }
}


/* ════════════════════════════════════════════════════════════════════════
   ░░░ R104 — SPECTROCHROMATIC AURORA HERO
   ░░░ User wanted something genuinely unique and creative — not just
   ░░░ another color. Replace the heavy lavender approach with an aurora
   ░░░ effect: multiple soft pastels flowing in ribbons (sky-blue, rose,
   ░░░ mint, peach, cream) with a conic-gradient prism base that gives
   ░░░ subtle iridescent shimmer — like looking at a peptide compound
   ░░░ through a prism. Includes a very slow animated drift so the
   ░░░ background quietly breathes.
   ════════════════════════════════════════════════════════════════════════ */
html body .hero {
    background:
        /* 1) Peach glow top-right corner (kept — anchors the warm side) */
        radial-gradient(ellipse 22% 35% at 96% 8%, rgba(248, 220, 198, 0.48) 0%, rgba(248, 220, 198, 0) 78%),
        /* 2) Mint accent below the vials (brighter — lifts the base) */
        radial-gradient(ellipse 42% 50% at 78% 92%, rgba(206, 232, 215, 0.62) 0%, rgba(206, 232, 215, 0.18) 50%, rgba(206, 232, 215, 0) 80%),
        /* 3) Pale BUTTER glow top-left corner — balances the peach top-right
              with a complementary warm and frames the headline */
        radial-gradient(ellipse 26% 38% at 4% 10%, rgba(252, 244, 218, 0.55) 0%, rgba(252, 244, 218, 0) 80%),
        /* 4) Soft SKY-BLUE ribbon on the LEFT of the vial showcase circle
              (replaces left lavender) — cool counterweight, feels like
              a cold-chain laboratory environment */
        radial-gradient(ellipse 22% 56% at 64% 46%, rgba(193, 222, 240, 0.78) 0%, rgba(193, 222, 240, 0.28) 45%, rgba(193, 222, 240, 0) 82%),
        /* 5) Soft ROSE ribbon on the RIGHT of the vial showcase circle
              (replaces right lavender) — warm counterpart to the sky-blue */
        radial-gradient(ellipse 30% 58% at 90% 54%, rgba(248, 208, 222, 0.74) 0%, rgba(248, 208, 222, 0.30) 45%, rgba(248, 208, 222, 0) 82%),
        /* 6) Soft MINT halo at the TOP of the vial circle (replaces top
              lavender) — keeps the "lit-from-above" vial glow but in a
              fresh cool-mint shade instead of purple */
        radial-gradient(ellipse 32% 36% at 78% 14%, rgba(206, 232, 215, 0.62) 0%, rgba(206, 232, 215, 0.20) 55%, rgba(206, 232, 215, 0) 82%),
        /* 7) PRISM BASE — conic gradient around the vial showcase centre
              creates a subtle iridescent sweep through the full palette.
              Low opacity so it reads as "shimmer" not "rainbow" — like
              the surface of a holographic foil. */
        conic-gradient(from 200deg at 78% 50%,
            rgba(206, 232, 215, 0.16) 0deg,
            rgba(252, 244, 218, 0.16) 80deg,
            rgba(248, 208, 222, 0.18) 160deg,
            rgba(193, 222, 240, 0.18) 240deg,
            rgba(206, 232, 215, 0.16) 360deg),
        #ffffff !important;
    /* Slow drift on the entire background — extremely subtle (8% travel
       over 22s) so the page feels alive without being distracting. */
    background-size:
        100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 220% 220%, 100% 100% !important;
    background-position:
        center, center, center, center, center, center, 30% 30%, center !important;
    animation: heroAuroraDrift 22s ease-in-out infinite alternate !important;
}

/* Subtle drift — only the conic prism layer shifts position so the
   shimmer "rotates" gently around the vial showcase.
   R140: conic prism is now the 3rd layer so its position is the 3rd entry. */
@keyframes heroAuroraDrift {
    0%   { background-position: center, center, 30% 30%, center; }
    100% { background-position: center, center, 70% 70%, center; }
}

/* Soften the ::before overlay — match the new aurora palette instead
   of reinforcing lavender that no longer exists in the base layer. */
html body .hero::before {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background:
        /* Top vial halo reinforcement — mint instead of lavender */
        radial-gradient(ellipse 30% 34% at 78% 14%, rgba(190, 224, 205, 0.22) 0%, rgba(190, 224, 205, 0) 82%),
        /* Left vial side reinforcement — sky blue */
        radial-gradient(ellipse 20% 50% at 65% 50%, rgba(180, 215, 235, 0.26) 0%, rgba(180, 215, 235, 0) 80%),
        /* Right vial side reinforcement — rose */
        radial-gradient(ellipse 28% 52% at 88% 52%, rgba(245, 200, 218, 0.28) 0%, rgba(245, 200, 218, 0) 80%) !important;
    opacity: 1 !important;
}

/* Respect users who prefer reduced motion — kill the drift */
@media (prefers-reduced-motion: reduce) {
    html body .hero {
        animation: none !important;
    }
}


/* ════════════════════════════════════════════════════════════════════════
   ░░░ R105 — BALANCED FOUR-SIDED VIAL HALO
   ░░░ User: "make it as equal as possible on all sides (top, right,
   ░░░ bottom) going based off what's on the left side."
   ░░░ The LEFT side's ribbon (sky-blue ellipse 22% 56% at 64% 50%, opacity
   ░░░ 0.78) is the reference. Top/Right/Bottom now mirror that exact
   ░░░ intensity and ellipse footprint — wide-and-short for top/bottom,
   ░░░ tall-and-narrow for left/right — so the vial showcase sits inside
   ░░░ a balanced four-point halo. Colors stay differentiated (sky/rose/
   ░░░ mint/cream) to preserve the aurora vibe, but every side now reads
   ░░░ at the same visual weight.
   ════════════════════════════════════════════════════════════════════════ */
html body .hero {
    background:
        /* Corner accent: peach top-right (softer so it doesn't fight
           the four-sided halo) */
        radial-gradient(ellipse 20% 32% at 96% 6%, rgba(248, 220, 198, 0.38) 0%, rgba(248, 220, 198, 0) 78%),
        /* Corner accent: pale butter top-left */
        radial-gradient(ellipse 22% 34% at 4% 8%, rgba(252, 244, 218, 0.42) 0%, rgba(252, 244, 218, 0) 80%),

        /* ── FOUR-SIDED VIAL HALO ────────────────────────────────
           All four entries share the same opacity ramp (0.78 → 0.28 → 0)
           and matching ellipse footprint per axis. Reference: LEFT side. */

        /* LEFT — sky-blue ribbon (REFERENCE) */
        radial-gradient(ellipse 22% 56% at 64% 50%, rgba(193, 222, 240, 0.78) 0%, rgba(193, 222, 240, 0.28) 45%, rgba(193, 222, 240, 0) 82%),
        /* RIGHT — rose ribbon, mirrored across vial centre (78%) */
        radial-gradient(ellipse 22% 56% at 92% 50%, rgba(248, 208, 222, 0.78) 0%, rgba(248, 208, 222, 0.28) 45%, rgba(248, 208, 222, 0) 82%),
        /* TOP — mint halo, wide-and-short to wrap the top arc */
        radial-gradient(ellipse 32% 30% at 78% 8%, rgba(206, 232, 215, 0.78) 0%, rgba(206, 232, 215, 0.28) 45%, rgba(206, 232, 215, 0) 82%),
        /* BOTTOM — warm cream halo, wide-and-short to wrap the bottom arc
           (a warm complement to the cool sky-blue, like sun-up-from-below) */
        radial-gradient(ellipse 32% 30% at 78% 92%, rgba(252, 232, 210, 0.78) 0%, rgba(252, 232, 210, 0.28) 45%, rgba(252, 232, 210, 0) 82%),

        /* PRISM BASE — conic shimmer (kept from R104, softened slightly so
           the four-sided halo reads cleanly on top of it) */
        conic-gradient(from 200deg at 78% 50%,
            rgba(206, 232, 215, 0.14) 0deg,
            rgba(252, 232, 210, 0.14) 80deg,
            rgba(248, 208, 222, 0.16) 160deg,
            rgba(193, 222, 240, 0.16) 240deg,
            rgba(206, 232, 215, 0.14) 360deg),
        #ffffff !important;
    background-size:
        100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 220% 220%, 100% 100% !important;
    background-position:
        center, center, center, center, center, center, 30% 30%, center !important;
    animation: heroAuroraDrift 22s ease-in-out infinite alternate !important;
}

/* Match the ::before overlay to the four-sided halo so reinforcement
   layers also read symmetric. Same intensity ramp on all four sides. */
html body .hero::before {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background:
        /* LEFT reinforcement — sky blue */
        radial-gradient(ellipse 20% 50% at 65% 50%, rgba(180, 215, 235, 0.28) 0%, rgba(180, 215, 235, 0) 80%),
        /* RIGHT reinforcement — rose */
        radial-gradient(ellipse 20% 50% at 91% 50%, rgba(245, 200, 218, 0.28) 0%, rgba(245, 200, 218, 0) 80%),
        /* TOP reinforcement — mint */
        radial-gradient(ellipse 28% 28% at 78% 10%, rgba(190, 224, 205, 0.28) 0%, rgba(190, 224, 205, 0) 82%),
        /* BOTTOM reinforcement — warm cream */
        radial-gradient(ellipse 28% 28% at 78% 90%, rgba(248, 226, 204, 0.28) 0%, rgba(248, 226, 204, 0) 82%) !important;
    opacity: 1 !important;
}


/* ════════════════════════════════════════════════════════════════════════
   ░░░ R106 — SMOOTHER SECTION → DIVIDER → SECTION TRANSITIONS
   ░░░ User: dividers themselves look fine, but the section boundaries
   ░░░ on either side feel like hard horizontal seams. Fix: give each
   ░░░ divider a vertical linear-gradient that matches the EXACT color
   ░░░ of the section above at its top edge and the EXACT color of the
   ░░░ section below at its bottom edge. The divider becomes the
   ░░░ transition zone instead of just sitting on a flat color, so the
   ░░░ user perceives one continuous wash of color through the divider.
   ░░░ Also taller (140px vs 100px) so the gradient has more room to
   ░░░ breathe and feel organic instead of compressed.
   ════════════════════════════════════════════════════════════════════════ */

/* Peptide-chain bridges  .why-section (white→#fbfbfb)  →  .how-section (#ebf5e8→#c8e0c2)
   Top of divider matches why's bottom (#fbfbfb), bottom matches how's top (#ebf5e8). */


/* DNA helix bridges  .how-section (#ebf5e8→#c8e0c2)  →  .goals-section (white→#fbfbfb)
   R138: previously the green portion of the gradient occupied the top
   ~55% of the divider, which made the divider visually merge with the
   how-section above ("part of the green slide instead of slide beneath
   it"). Now the green is compressed into a thin seam at the very top
   (0-12%) that just connects to the how-section's end color, then the
   divider rapidly transitions to white. The DNA waves at ~50% vertical
   now sit on a clean white background — making the divider feel like
   its own zone BENEATH the green section. */
html body .dna-helix-divider {
    background: linear-gradient(180deg,
        #c8e0c2 0%,
        #dae6d4 5%,
        #eaf1e6 12%,
        #f8fbf6 22%,
        #ffffff 35%,
        #ffffff 100%) !important;
    height: 140px !important;
    padding: 30px 0 !important;
    margin: 0 !important;
    overflow: visible !important;
}

/* Spectrum divider sits between .hero (mostly white aurora) and
   .why-section (white→#fbfbfb). Both are essentially white so the seam
   was never harsh — but give it a faint cream wash at the top to match
   the hero's bottom warm-cream halo and ease the transition further. */
html body .spectrum-divider {
    background: linear-gradient(180deg,
        rgba(252, 244, 218, 0.08) 0%,
        rgba(252, 244, 218, 0.02) 40%,
        #ffffff 100%) !important;
    padding: 24px 24px 18px !important;
    margin: 0 auto !important;
}

/* Belt-and-suspenders: soften the very edge of the how-section itself so
   even if a 1px sub-pixel rounding issue creates a faint line where
   divider meets section, it'll feather. */
html body .how-section {
    background:
        var(--noise-svg),
        linear-gradient(180deg,
            #ebf5e8 0%,
            #d8e8d1 50%,
            #c8e0c2 100%) !important;
    position: relative !important;
}


/* ════════════════════════════════════════════════════════════════════════
   ░░░ R107 — UNIFIED GREEN HUE HERO
   ░░░ User wants the whole hero area in a green hue — drops the aurora
   ░░░ multi-color (sky-blue/rose/mint/cream) and replaces every layer
   ░░░ with a different shade of green for a cohesive on-brand wash.
   ░░░ The four-sided halo structure stays (so all sides are balanced),
   ░░░ but every color is a green family member: deep mint, fresh spring,
   ░░░ soft sage, pale teal. The conic prism shimmer sweeps through green
   ░░░ shades only so the iridescence reads as a single green atmosphere
   ░░░ with depth — not a rainbow.
   ════════════════════════════════════════════════════════════════════════ */
html body .hero {
    background:
        /* R130 — PATCHY FIX. The four separate small halos weren't
           overlapping (they were each shrunk to avoid bleeding into
           top-left), so they read as four distinct circular patches
           around the vial area. Consolidating into ONE smooth elliptical
           halo around the vial showcase + ONE small centered top accent.
           This gives a single cohesive green frame around the focal
           point with no patches, no asymmetry, no top-left bleed. */

        /* R140: RIGHT-EDGE FADE OVERLAY — user wants the green halo to
           cleanly fade out before reaching the right edge of the page.
           This linear gradient starts transparent on the left side
           (preserving everything to the LEFT of ~88% horizontal exactly
           as it is now), then ramps to full white by 99%. Sits on top
           of the main vial halo, so the right side of the halo is
           "erased" by this white overlay while the left stays untouched. */
        linear-gradient(90deg,
            transparent 0%,
            transparent 86%,
            rgba(255, 255, 255, 0.55) 92%,
            rgba(255, 255, 255, 0.92) 97%,
            #ffffff 100%),

        /* MAIN VIAL HALO (R144: shifted center 68% → 72% to pull hue
           AWAY from the left and concentrate it more toward center-right.
           Width slightly bumped 29% → 30% for extra center-right presence.
           Left extent: 42% → 46% (less left hue, as requested). Peak
           intensity now sits at 72% horizontal — center-right.) */
        radial-gradient(ellipse 30% 42% at 72% 50%,
            rgba(196, 226, 205, 1.00) 0%,
            rgba(196, 226, 205, 0.58) 35%,
            rgba(196, 226, 205, 0.26) 65%,
            rgba(196, 226, 205, 0) 91%),

        /* R132 — TOP CENTER ACCENT REMOVED. It was creating a floating
           detached green patch at top-left because it sat at 50%
           horizontal disconnected from the main vial halo at 75%. */

        /* GREEN PRISM — conic shimmer
           (R110: dialed down further — barely-there shimmer that just
           prevents a flat white feel without contributing visible hue) */
        conic-gradient(from 200deg at 78% 50%,
            rgba(206, 232, 215, 0.04) 0deg,
            rgba(220, 238, 210, 0.04) 80deg,
            rgba(192, 226, 200, 0.05) 160deg,
            rgba(204, 232, 220, 0.05) 240deg,
            rgba(206, 232, 215, 0.04) 360deg),
        #ffffff !important;
    /* R140: layer count back to 3 gradients (right-fade overlay added
       on top). Arrays at 4 entries. Conic prism is now 3rd. */
    background-size:
        100% 100%, 100% 100%, 220% 220%, 100% 100% !important;
    background-position:
        center, center, 30% 30%, center !important;
    animation: heroAuroraDrift 22s ease-in-out infinite alternate !important;
}

/* ::before reinforcement — R130: consolidated into ONE smooth halo
   around the vial showcase (matching the new base layer structure)
   plus a small centered top accent. */
html body .hero::before {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background:
        /* MAIN VIAL HALO reinforcement (R144: matched shift — 68% → 72%,
           width 26% → 27%) */
        radial-gradient(ellipse 27% 38% at 72% 50%,
            rgba(180, 216, 192, 0.50) 0%,
            rgba(180, 216, 192, 0.28) 45%,
            rgba(180, 216, 192, 0) 79%) !important;
    opacity: 1 !important;
}


/* ════════════════════════════════════════════════════════════════════════
   ░░░ R139 — GOAL CARDS REDESIGN: PREMIUM DARK + NEON GLOW
   ░░░ User: "Not a huge fan of the coloring here. Seems almost childish.
   ░░░ Make this look sick asf and aesthetic."
   ░░░ Pastel-rectangle cards looked like Easter eggs. Replaced with
   ░░░ sophisticated dark cards (deep navy-charcoal gradient) with
   ░░░ category-specific neon glows — one accent color per card delivered
   ░░░ as a glowing icon, a subtle accent bar at the top edge, and a
   ░░░ matching radial glow under the icon. Reads as a premium pharma
   ░░░ lab dashboard instead of a kids-section.
   ════════════════════════════════════════════════════════════════════════ */

/* R141: section background reverted to clean white now that the cards
   are light themselves (was a soft grey vignette to frame the dark cards
   in R139). */
html body .goals-section {
    background:
        var(--noise-svg-soft),
        linear-gradient(180deg, #ffffff 0%, #fbfbfb 100%) !important;
    position: relative !important;
}

/* R141: REVERSED TO LIGHT — user liked the premium-glow concept but
   said the dark cards didn't match the light page vibe. Translating
   the same idea (neon accent glows per category) to light cards:
   clean white card body, accent color delivered as a soft glow around
   the icon + a faint colored haze on one side of the card. Reads
   premium without going dark-mode. */

/* CARD BASE — clean off-white with subtle gradient for depth */
html body .goal-card.goal-mint,
html body .goal-card.goal-peach,
html body .goal-card.goal-lavender,
html body .goal-card.goal-sky,
html body .goal-card.goal-cream,
html body .goal-card.goal-blush {
    background:
        linear-gradient(145deg, #ffffff 0%, #fafbfc 60%, #f6f8fa 100%) !important;
    border: 1px solid rgba(15, 26, 44, 0.07) !important;
    box-shadow:
        0 1px 2px rgba(15, 26, 44, 0.04),
        0 6px 18px rgba(15, 26, 44, 0.06),
        0 1px 0 rgba(255, 255, 255, 0.9) inset !important;
    color: #0f1a2c !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Subtle noise texture overlay for premium feel (lighter on light cards) */
html body .goal-card::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: var(--noise-svg-soft) !important;
    opacity: 0.25 !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* Ensure card content sits above the overlay */
html body .goal-card > * {
    position: relative !important;
    z-index: 1 !important;
}

/* TEXT — deep ink title, slate body */
html body .goal-card .goal-body h3 {
    color: #0f1a2c !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
}
html body .goal-card .goal-body p {
    color: rgba(15, 26, 44, 0.62) !important;
    font-weight: 500 !important;
}

/* ARROW — subtle light surface with shadow */
html body .goal-card .goal-arrow {
    background: #ffffff !important;
    color: #0f1a2c !important;
    border: 1px solid rgba(15, 26, 44, 0.08) !important;
    box-shadow:
        0 1px 2px rgba(15, 26, 44, 0.06),
        0 1px 0 rgba(255, 255, 255, 0.9) inset !important;
    transition: all 0.3s ease !important;
}
html body .goal-card:hover .goal-arrow {
    transform: translateX(4px) !important;
    box-shadow:
        0 3px 8px rgba(15, 26, 44, 0.10),
        0 1px 0 rgba(255, 255, 255, 0.9) inset !important;
}

/* ICON CONTAINER — base styling; per-card accent colors set below */
html body .goal-card .goal-icon {
    background: #ffffff !important;
    border: 1px solid rgba(15, 26, 44, 0.06) !important;
    transition: all 0.35s cubic-bezier(0.2, 0.6, 0.2, 1) !important;
    position: relative !important;
}

/* HOVER LIFT */
html body .goal-card:hover {
    transform: translateY(-5px) !important;
    border-color: rgba(15, 26, 44, 0.10) !important;
    box-shadow:
        0 4px 8px rgba(15, 26, 44, 0.06),
        0 18px 40px rgba(15, 26, 44, 0.10),
        0 1px 0 rgba(255, 255, 255, 0.9) inset !important;
}

/* ── PER-CARD ACCENT GLOW (the part that makes each card "feel" its category)
   Each variant gets:
   - A radial glow underneath the icon (its accent color)
   - A glowing top-edge accent bar (its accent color)
   - An icon recolored to match
   Accent colors are tuned for premium neon-on-dark look. */

/* R141: PER-CARD ACCENT GLOWS — recolored for light backgrounds.
   Each card gets a soft accent-color haze around the icon side + an
   accent-colored icon container with its own glow ring. Colors are
   the richer/darker versions so they "pop" against the white card
   instead of the lighter neon versions used on dark. */

/* MINT (Healing & Recovery) — emerald */
html body .goal-card.goal-mint::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background:
        radial-gradient(ellipse 38% 80% at 12% 50%, rgba(16, 185, 129, 0.14) 0%, rgba(16, 185, 129, 0) 70%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}
html body .goal-card.goal-mint .goal-icon {
    background: linear-gradient(145deg, #d1fae5 0%, #a7f3d0 100%) !important;
    color: #047857 !important;
    border: 1px solid rgba(16, 185, 129, 0.22) !important;
    box-shadow:
        0 0 18px rgba(16, 185, 129, 0.25),
        0 1px 0 rgba(255, 255, 255, 0.6) inset !important;
}

/* PEACH (Metabolic Research) — amber */
html body .goal-card.goal-peach::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background:
        radial-gradient(ellipse 38% 80% at 12% 50%, rgba(249, 115, 22, 0.14) 0%, rgba(249, 115, 22, 0) 70%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}
html body .goal-card.goal-peach .goal-icon {
    background: linear-gradient(145deg, #ffedd5 0%, #fed7aa 100%) !important;
    color: #c2410c !important;
    border: 1px solid rgba(249, 115, 22, 0.22) !important;
    box-shadow:
        0 0 18px rgba(249, 115, 22, 0.22),
        0 1px 0 rgba(255, 255, 255, 0.6) inset !important;
}

/* LAVENDER (Longevity & Cellular) — violet */
html body .goal-card.goal-lavender::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background:
        radial-gradient(ellipse 38% 80% at 12% 50%, rgba(139, 92, 246, 0.14) 0%, rgba(139, 92, 246, 0) 70%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}
html body .goal-card.goal-lavender .goal-icon {
    background: linear-gradient(145deg, #ede9fe 0%, #ddd6fe 100%) !important;
    color: #6d28d9 !important;
    border: 1px solid rgba(139, 92, 246, 0.22) !important;
    box-shadow:
        0 0 18px rgba(139, 92, 246, 0.25),
        0 1px 0 rgba(255, 255, 255, 0.6) inset !important;
}

/* SKY (Cognitive Research) — blue */
html body .goal-card.goal-sky::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background:
        radial-gradient(ellipse 38% 80% at 12% 50%, rgba(14, 165, 233, 0.14) 0%, rgba(14, 165, 233, 0) 70%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}
html body .goal-card.goal-sky .goal-icon {
    background: linear-gradient(145deg, #e0f2fe 0%, #bae6fd 100%) !important;
    color: #0369a1 !important;
    border: 1px solid rgba(14, 165, 233, 0.22) !important;
    box-shadow:
        0 0 18px rgba(14, 165, 233, 0.25),
        0 1px 0 rgba(255, 255, 255, 0.6) inset !important;
}

/* CREAM (Growth Hormone) — gold */
html body .goal-card.goal-cream::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background:
        radial-gradient(ellipse 38% 80% at 12% 50%, rgba(234, 179, 8, 0.14) 0%, rgba(234, 179, 8, 0) 70%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}
html body .goal-card.goal-cream .goal-icon {
    background: linear-gradient(145deg, #fef9c3 0%, #fef08a 100%) !important;
    color: #a16207 !important;
    border: 1px solid rgba(234, 179, 8, 0.25) !important;
    box-shadow:
        0 0 18px rgba(234, 179, 8, 0.22),
        0 1px 0 rgba(255, 255, 255, 0.6) inset !important;
}

/* BLUSH (Research Stacks) — rose */
html body .goal-card.goal-blush::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background:
        radial-gradient(ellipse 38% 80% at 12% 50%, rgba(236, 72, 153, 0.14) 0%, rgba(236, 72, 153, 0) 70%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}
html body .goal-card.goal-blush .goal-icon {
    background: linear-gradient(145deg, #fce7f3 0%, #fbcfe8 100%) !important;
    color: #be185d !important;
    border: 1px solid rgba(236, 72, 153, 0.22) !important;
    box-shadow:
        0 0 18px rgba(236, 72, 153, 0.22),
        0 1px 0 rgba(255, 255, 255, 0.6) inset !important;
}

/* HOVER: icon glow intensifies + slight scale */
html body .goal-card:hover .goal-icon {
    transform: scale(1.06) !important;
}
html body .goal-card.goal-mint:hover .goal-icon    { box-shadow: 0 0 26px rgba(16, 185, 129, 0.42), 0 1px 0 rgba(255, 255, 255, 0.6) inset !important; }
html body .goal-card.goal-peach:hover .goal-icon   { box-shadow: 0 0 26px rgba(249, 115, 22, 0.38), 0 1px 0 rgba(255, 255, 255, 0.6) inset !important; }
html body .goal-card.goal-lavender:hover .goal-icon{ box-shadow: 0 0 26px rgba(139, 92, 246, 0.42), 0 1px 0 rgba(255, 255, 255, 0.6) inset !important; }
html body .goal-card.goal-sky:hover .goal-icon     { box-shadow: 0 0 26px rgba(14, 165, 233, 0.42), 0 1px 0 rgba(255, 255, 255, 0.6) inset !important; }
html body .goal-card.goal-cream:hover .goal-icon   { box-shadow: 0 0 26px rgba(234, 179, 8, 0.38), 0 1px 0 rgba(255, 255, 255, 0.6) inset !important; }
html body .goal-card.goal-blush:hover .goal-icon   { box-shadow: 0 0 26px rgba(236, 72, 153, 0.38), 0 1px 0 rgba(255, 255, 255, 0.6) inset !important; }


/* ════════════════════════════════════════════════════════════════════════
   ░░░ R142 — BEST SELLERS: ARTISTIC CHROMATIC FIELD
   ░░░ User: "Get rid of the purple background for this slide and become
   ░░░ creative... get really creative with something cool... can be
   ░░░ artistic." Lavender wash was generic. Replaced with an abstract
   ░░░ chromatic field — warm cream base with floating muted blobs in
   ░░░ different hues at the corners (sage, peach, gold, soft rose),
   ░░░ plus a subtle topographic line pattern overlay for that lab/data
   ░░░ feel. Reads as a soft abstract painting hosting the products.
   ░░░ Includes a slow drift animation so it quietly breathes.
   ════════════════════════════════════════════════════════════════════════ */

html body .bestsellers-section {
    background:
        var(--noise-svg),
        /* TOPOGRAPHIC LINES — faint horizontal contour wave pattern in
           SVG. Adds a quiet lab/data aesthetic without being loud. */
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 400' preserveAspectRatio='none'><path d='M0 60 Q300 30 600 60 T1200 60' fill='none' stroke='%23d4c4a8' stroke-width='1' opacity='0.18'/><path d='M0 120 Q300 90 600 120 T1200 120' fill='none' stroke='%23d4c4a8' stroke-width='1' opacity='0.16'/><path d='M0 180 Q300 150 600 180 T1200 180' fill='none' stroke='%23d4c4a8' stroke-width='1' opacity='0.14'/><path d='M0 240 Q300 210 600 240 T1200 240' fill='none' stroke='%23d4c4a8' stroke-width='1' opacity='0.12'/><path d='M0 300 Q300 270 600 300 T1200 300' fill='none' stroke='%23d4c4a8' stroke-width='1' opacity='0.10'/></svg>"),
        /* FLOATING CHROMATIC BLOBS — four soft muted blobs anchoring
           the corners. Each a different hue so the section reads as an
           abstract painting rather than a single color wash. */
        radial-gradient(ellipse 30% 38% at 12% 20%, rgba(180, 215, 195, 0.55) 0%, rgba(180, 215, 195, 0) 70%),
        radial-gradient(ellipse 28% 36% at 88% 22%, rgba(248, 215, 195, 0.55) 0%, rgba(248, 215, 195, 0) 70%),
        radial-gradient(ellipse 26% 36% at 16% 80%, rgba(248, 222, 200, 0.50) 0%, rgba(248, 222, 200, 0) 70%),
        radial-gradient(ellipse 30% 38% at 86% 80%, rgba(225, 220, 245, 0.45) 0%, rgba(225, 220, 245, 0) 70%),
        /* WARM CREAM BASE — quiet, premium, paper-like */
        linear-gradient(180deg, #fdfaf2 0%, #f9f3e7 100%) !important;
    background-size:
        100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100% !important;
    position: relative !important;
    overflow: hidden !important;
    animation: bestsellersDrift 28s ease-in-out infinite alternate !important;
}

/* Slow drift on the chromatic blob layers (positions 3-6). The
   topographic lines and base gradient stay still. */
@keyframes bestsellersDrift {
    0%   { background-position: center, center, 12% 20%, 88% 22%, 16% 80%, 86% 80%, center; }
    100% { background-position: center, center, 18% 16%, 82% 26%, 22% 78%, 80% 84%, center; }
}

@media (prefers-reduced-motion: reduce) {
    html body .bestsellers-section { animation: none !important; }
}


/* ════════════════════════════════════════════════════════════════════════
   ░░░ R143 — DNA HELIX DIVIDER REMOVED
   ░░░ User: "Get rid of this here." Hiding the divider entirely. The
   ░░░ how-section (mint) now flows directly into the goals-section
   ░░░ (white). To prevent a hard seam, the how-section's bottom edge
   ░░░ gets a soft fade-to-white added below.
   ════════════════════════════════════════════════════════════════════════ */
html body .dna-helix-divider {
    display: none !important;
}

/* R145: keep the bottom of how-section SOLID mint (no fade to white).
   User: "See the clear color line difference. Keep same green on
   bottom. Only fade near top." The fade is now ONLY at the very top
   of the section, and the bottom 60%+ stays at consistent #c8e0c2.
   Transition to goals-section is handled by goals-section's own
   top-fade-from-mint (below). */
html body .how-section {
    background:
        var(--noise-svg),
        linear-gradient(180deg,
            #ebf5e8 0%,
            #d8e8d1 25%,
            #c8e0c2 50%,
            #c8e0c2 100%) !important;
    position: relative !important;
}

/* R146: goals-section reverted to clean white from top. No fade at
   all — the bottom of how-section (solid mint) meets the top of
   goals-section (solid white) as a clean line, not a gradient. */
html body .goals-section {
    background:
        var(--noise-svg-soft),
        linear-gradient(180deg, #ffffff 0%, #fbfbfb 100%) !important;
    position: relative !important;
}


/* ════════════════════════════════════════════════════════════════════════
   ░░░ R147 — STORY SECTION: PREMIUM LAB-NOTEBOOK AESTHETIC
   ░░░ User wants creative + artistic. Replaced flat cream/peach gradient
   ░░░ with a layered composition that evokes a premium lab notebook:
   ░░░  • Subtle dot-grid pattern (graph-paper feel)
   ░░░  • Floating SVG molecular structures (small chemistry diagrams
   ░░░    drifting slowly across the section)
   ░░░  • Warm cream-blush gradient base (richer than the original)
   ░░░  • Soft floating accent glows in warm tones for depth
   ░░░  • Slow drift animation on the molecules and glow blobs
   ════════════════════════════════════════════════════════════════════════ */

/* R147c — TOTAL RESET. New color scheme + simpler editorial design.
   Cool slate base (no more warm cream/peach), with one bold off-center
   muted sage accent for warm/cool tension. Subtle horizontal pinstripe
   pattern (cleaner, more editorial than the hexagonal lattice). No
   busy spotlight + counter + vignette combo — just three layers,
   minimal and confident. */

html body .story-section {
    background:
        var(--noise-svg-soft),
        /* PINSTRIPE PATTERN — fine horizontal lines every 4px, very
           subtle. Reads as premium editorial texture (like a high-end
           magazine page or financial document). */
        repeating-linear-gradient(0deg,
            transparent 0px,
            transparent 3px,
            rgba(80, 95, 110, 0.04) 3px,
            rgba(80, 95, 110, 0.04) 4px),
        /* SAGE ACCENT — single large soft sage circle off-center on
           the right. Cool/muted color provides quiet sophistication
           without competing with the warmer Best Sellers section above. */
        radial-gradient(circle 780px at 82% 30%, rgba(168, 196, 178, 0.30) 0%, rgba(168, 196, 178, 0) 65%),
        /* SLATE BASE — cool soft slate-blue gradient. Completely different
           palette from the warm cream sections elsewhere on the page. */
        linear-gradient(180deg, #eef2f6 0%, #dfe6ed 100%) !important;
    background-size:
        100% 100%, 100% 4px, 100% 100%, 100% 100% !important;
    background-position:
        center, center, 82% 30%, center !important;
    position: relative !important;
    overflow: hidden !important;
    animation: storySageDrift 30s ease-in-out infinite alternate !important;
}

/* The sage accent slowly drifts position — minimal animation, just a
   subtle breathing. */
@keyframes storySageDrift {
    0%   { background-position: center, center, 82% 30%, center; }
    100% { background-position: center, center, 78% 36%, center; }
}

@media (prefers-reduced-motion: reduce) {
    html body .story-section { animation: none !important; }
}


/* ════════════════════════════════════════════════════════════════════════
   ░░░ R148 — BEST SELLERS: FORCE ALL VIAL BACKGROUNDS TO MINT
   ░░░ User: "Make sure all 3 of these in best sellers are showing the
   ░░░ green vial backgrounds." Previously they rotated through pastels
   ░░░ via :nth-child (mint, peach, lavender...). Override here so every
   ░░░ bestseller-card .bs-image uses mint regardless of position.
   ░░░ Only affects the homepage bestsellers grid — the regular product
   ░░░ catalog still rotates colors as before.
   ════════════════════════════════════════════════════════════════════════ */
html body .bestsellers-section .bestseller-card .bs-image,
html body #bestsellers-grid .bestseller-card .bs-image,
html body .bestseller-card .bs-image {
    background: var(--pastel-mint) !important;
}


/* ════════════════════════════════════════════════════════════════════════
   ░░░ R158 — NEWSLETTER: PREMIUM "EARLY ACCESS" LAYERED COMPOSITION
   ░░░ User wants artistic + visually appealing to maximize conversions.
   ░░░ Adding:
   ░░░  • Layered decorative SVG elements (network nodes, sparkle accents,
   ░░░    curve flourishes) scattered asymmetrically across the section
   ░░░  • Soft radial spotlight behind the card so it visually "pops"
   ░░░  • Card with rose-gold gradient border that subtly shimmers
   ░░░  • Floating sparkle particles drifting in the background
   ░░░  • Subtle pulse on the gift icon for "open me" feel
   ════════════════════════════════════════════════════════════════════════ */
html body .newsletter-section {
    background:
        var(--noise-svg),
        /* R162: DECORATIVE SVG — bright cyan-mint network nodes and
           sparkles on the deep teal background. Highlights pop against
           the dark base. */
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 700' preserveAspectRatio='xMidYMid slice'><g fill='%232dd4bf' opacity='0.40'><circle cx='120' cy='90' r='3'/><circle cx='180' cy='120' r='2'/><circle cx='90' cy='180' r='2.5'/><line x1='120' y1='90' x2='180' y2='120' stroke='%232dd4bf' stroke-width='0.8' opacity='0.6'/><line x1='120' y1='90' x2='90' y2='180' stroke='%232dd4bf' stroke-width='0.8' opacity='0.6'/></g><g fill='%232dd4bf' opacity='0.36'><circle cx='1440' cy='110' r='3'/><circle cx='1520' cy='80' r='2'/><circle cx='1490' cy='180' r='2.5'/><line x1='1440' y1='110' x2='1520' y2='80' stroke='%232dd4bf' stroke-width='0.8' opacity='0.6'/><line x1='1440' y1='110' x2='1490' y2='180' stroke='%232dd4bf' stroke-width='0.8' opacity='0.6'/></g><g fill='%232dd4bf' opacity='0.34'><circle cx='100' cy='560' r='3'/><circle cx='200' cy='580' r='2'/><circle cx='150' cy='640' r='2.5'/><line x1='100' y1='560' x2='200' y2='580' stroke='%232dd4bf' stroke-width='0.8' opacity='0.6'/><line x1='150' y1='640' x2='100' y2='560' stroke='%232dd4bf' stroke-width='0.8' opacity='0.6'/></g><g fill='%232dd4bf' opacity='0.38'><circle cx='1480' cy='580' r='3'/><circle cx='1400' cy='630' r='2'/><circle cx='1530' cy='620' r='2.5'/><line x1='1480' y1='580' x2='1400' y2='630' stroke='%232dd4bf' stroke-width='0.8' opacity='0.6'/><line x1='1480' y1='580' x2='1530' y2='620' stroke='%232dd4bf' stroke-width='0.8' opacity='0.6'/></g><g fill='none' stroke='%232dd4bf' stroke-width='1.2' opacity='0.38' stroke-linecap='round'><path d='M40 350 Q 120 280, 60 220'/><path d='M1560 350 Q 1480 280, 1540 220'/><path d='M40 400 Q 120 470, 60 530'/><path d='M1560 400 Q 1480 470, 1540 530'/></g><g fill='%23fcd34d' opacity='0.45'><path d='M280 200 L284 200 L282 196 L286 198 L284 194 L282 198 L286 196 L284 200 Z' transform='translate(0,0) scale(1.6)'/><path d='M1300 200 L1304 200 L1302 196 L1306 198 L1304 194 L1302 198 L1306 196 L1304 200 Z' transform='translate(0,0) scale(1.6)'/><path d='M280 500 L284 500 L282 496 L286 498 L284 494 L282 498 L286 496 L284 500 Z' transform='translate(0,0) scale(1.6)'/><path d='M1300 500 L1304 500 L1302 496 L1306 498 L1304 494 L1302 498 L1306 496 L1304 500 Z' transform='translate(0,0) scale(1.6)'/></g><g stroke='%232dd4bf' stroke-width='1.3' fill='none' opacity='0.28'><circle cx='400' cy='120' r='28'/><circle cx='1200' cy='600' r='32'/></g></svg>"),
        /* SPOTLIGHT — bright teal glow behind the card area, drawing
           the eye to the form against the dark background */
        radial-gradient(ellipse 55% 70% at 50% 50%, rgba(45, 212, 191, 0.18) 0%, rgba(45, 212, 191, 0) 60%),
        /* R162: DEEP BRAND-TEAL gradient — premium, exclusive, on-brand
           and makes the white card POP dramatically */
        linear-gradient(180deg, #0d3935 0%, #0a2a26 50%, #07201d 100%) !important;
    background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100% !important;
    background-position: center, center, center, center !important;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Floating sparkle particles — R162: bright cyan-white sparkles that
   glow against the dark teal background */
html body .newsletter-section::before {
    content: '' !important;
    position: absolute !important;
    top: 18% !important;
    left: 22% !important;
    width: 6px !important;
    height: 6px !important;
    background: #ccfbf1 !important;
    border-radius: 50% !important;
    box-shadow:
        0 0 12px 3px rgba(45, 212, 191, 0.85),
        260px 80px 0 -1px rgba(204, 251, 241, 0.85),
        260px 80px 0 1px rgba(45, 212, 191, 0.6),
        180px 320px 0 -2px rgba(204, 251, 241, 0.8),
        540px 180px 0 -1px rgba(204, 251, 241, 0.85),
        540px 180px 0 1px rgba(45, 212, 191, 0.5),
        780px 60px 0 -2px rgba(204, 251, 241, 0.8),
        920px 380px 0 -1px rgba(204, 251, 241, 0.85),
        1080px 120px 0 -2px rgba(204, 251, 241, 0.8),
        420px 460px 0 -2px rgba(204, 251, 241, 0.85) !important;
    animation: sparkleDrift 12s ease-in-out infinite alternate !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

@keyframes sparkleDrift {
    0%, 100% { opacity: 0.85; transform: translateY(0); }
    50%      { opacity: 1; transform: translateY(-6px); }
}

html body .newsletter-section::after { display: none !important; }

/* CARD — R160: pure white with brand teal-gold gradient border (less
   girly than rose-gold). Premium shadow tinted with warm tones to
   match the cream section. */
html body .newsletter-content {
    background: #ffffff !important;
    border: 2px solid transparent !important;
    background-image:
        linear-gradient(#ffffff, #ffffff),
        linear-gradient(135deg,
            #14b8a6 0%,
            #2dd4bf 25%,
            #fcd34d 50%,
            #2dd4bf 75%,
            #14b8a6 100%) !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
    box-shadow:
        0 24px 60px rgba(13, 70, 70, 0.15),
        0 8px 20px rgba(13, 70, 70, 0.08),
        0 1px 0 rgba(255, 255, 255, 0.95) inset !important;
    position: relative !important;
}

/* Card inner sparkle — R160: teal/gold mix to match new theme */
html body .newsletter-content::before {
    content: '' !important;
    position: absolute !important;
    top: 24px !important;
    right: 32px !important;
    width: 4px !important;
    height: 4px !important;
    background: #14b8a6 !important;
    border-radius: 50% !important;
    box-shadow:
        0 0 8px 2px rgba(20, 184, 166, 0.45),
        -20px 14px 0 -1px rgba(252, 211, 77, 0.55),
        -36px 4px 0 -2px rgba(20, 184, 166, 0.55) !important;
    opacity: 0.75 !important;
    pointer-events: none !important;
}

/* Gentle gift-icon pulse — draws eye to "Early Access" theme */
html body .newsletter-content .nl-icon,
html body .newsletter-section i.fa-envelope-open-text,
html body .newsletter-section i.fa-gift {
    animation: giftPulse 2.8s ease-in-out infinite !important;
}

@keyframes giftPulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(20, 184, 166, 0)); }
    50%      { transform: scale(1.06); filter: drop-shadow(0 0 12px rgba(20, 184, 166, 0.4)); }
}

@media (prefers-reduced-motion: reduce) {
    html body .newsletter-section::before,
    html body .newsletter-content .nl-icon,
    html body .newsletter-section i.fa-envelope-open-text,
    html body .newsletter-section i.fa-gift {
        animation: none !important;
    }
}


/* ════════════════════════════════════════════════════════════════════════
   ░░░ R157 — UNIFY ALL PRODUCT BACKGROUNDS TO MINT
   ░░░ User clarified: keep ALL product cards (and bestseller showcase)
   ░░░ on the SAME green/mint background — and make the detail page
   ░░░ match that single green. So one consistent brand color across the
   ░░░ entire product surface area. Overrides both the nth-child
   ░░░ rotation AND any earlier per-product mapping. */
html body .product-card .product-image,
html body .product-card .product-img-wrap,
html body .bestseller-card .bs-image,
html body #bestsellers-grid .bestseller-card .bs-image,
html body .bestsellers-section .bestseller-card .bs-image {
    background: var(--pastel-mint) !important;
}

/* Product DETAIL page (.pp-image-wrap) — same mint family but a LIGHTER
   shade than the cards so the vial reads cleaner (R168: lower hue
   intensity per user request). */
html body[data-pp-id] .pp-image-wrap,
html body .pp-image-wrap {
    background:
        var(--noise-svg-soft),
        #dfecdb !important;
}


/* ════════════════════════════════════════════════════════════════════════
   ░░░ CSS CASCADE MAP — Where to edit each selector
   ░░░ (Updated: Task 4 consolidation pass, 2026-05-14)
   ░░░
   ░░░ Many product-card selectors exist at multiple lines with same
   ░░░ specificity AND !important. Per CSS cascade, the LATER line wins
   ░░░ for any conflicting property. Use this map when you need to
   ░░░ change something — edit the [ACTIVE] line, not the earlier ones.
   ░░░
   ░░░ ───────────────────────────────────────────────────────────────────
   ░░░ .product-card .product-info
   ░░░   - L17850  [DEAD]      padding: 22px 20px 24px (lower-specificity, beaten)
   ░░░   - L18298  [DEAD]      padding: 22px 22px 24px + bg:#fff (beaten)
   ░░░   - L25103  [ACTIVE-bg] background, flex, display, flex-direction
   ░░░   - L25563  [ACTIVE-pad] padding 16/16/22, min-height 219px ← EDIT HERE for spacing
   ░░░   - L28906  @media(<380px): mobile padding override
   ░░░   - L30264  @media: another mobile padding override
   ░░░
   ░░░ .product-card .product-name
   ░░░   - L25100  [PARTIAL] font + color + line-height (beaten by 25557 for font-size/mb)
   ░░░   - L25557  [ACTIVE]  font-size:1rem, margin-bottom:2px ← EDIT HERE for sizing
   ░░░
   ░░░ .product-card .product-price-row
   ░░░   - L25125  [PARTIAL] display:flex base setup
   ░░░   - L25305  [ACTIVE]  flex-direction:row, wrap, baseline ← EDIT HERE
   ░░░
   ░░░ .product-card .product-add-btn
   ░░░   - L25172  [BASE]    background, color, font, border-radius, padding
   ░░░   - L25366  [PARTIAL] flex-basis:100%, margin-top
   ░░░   - L25573  [ACTIVE]  size + margin-top:14px (the spacing one) ← EDIT HERE
   ░░░   - L25987  [ACTIVE]  sage glow box-shadow ← EDIT HERE for the green halo
   ░░░
   ░░░ .product-card .product-image
   ░░░   - Multiple lines; L31540 forces mint bg (overrides per-id rotation)
   ░░░   - L25375  [DEAD] aspect-ratio (beaten by later 25481)
   ░░░   - L25481  [ACTIVE] aspect-ratio 5/6 + padding
   ░░░
   ░░░ .product-card .product-image::after
   ░░░   - L25064, L25542, L26102 — last wins
   ░░░
   ░░░ ───────────────────────────────────────────────────────────────────
   ░░░ RULE: When stuck on "my change isn't taking effect", grep for
   ░░░ all instances of your selector and check the LATEST line. The
   ░░░ R185/R186 button-margin bug and the R195 padding bug both
   ░░░ happened because of unaware overrides.
   ════════════════════════════════════════════════════════════════════════ */


/* R204 (REMOVED): the green-halo treatment on all .btn-primary buttons
   site-wide was too aggressive — user wants the green ONLY on the
   Add-to-Cart product buttons (.product-add-btn / .bs-cart-btn). Those
   keep their R169–R174 styling. .btn-primary reverts to its original
   solid-black behavior from line ~21710. */


/* ════════════════════════════════════════════════════════════════════════
   ░░░ R205 — NON-HOMEPAGE POLISH BLOCK
   ░░░ Targeted improvements identified by the audit:
   ░░░   • FAQ bottom support CTA card
   ░░░   • About section subtle pastel atmosphere
   ░░░   • Education view-product link styling
   ░░░   • Hover lift on cards/items that lacked it
   ════════════════════════════════════════════════════════════════════════ */

/* FAQ "Still have questions?" CTA */
html body .faq-cta {
    margin: 64px auto 0 !important;
    max-width: 720px !important;
    text-align: center !important;
}




/* About page: section gets a faint pastel-mint atmosphere matching home */
html body .about-section {
    background:
        radial-gradient(ellipse 50% 65% at 20% 30%, rgba(196, 226, 205, 0.32) 0%, rgba(196, 226, 205, 0) 70%),
        radial-gradient(ellipse 55% 70% at 85% 75%, rgba(214, 232, 218, 0.28) 0%, rgba(214, 232, 218, 0) 70%),
        linear-gradient(180deg, #ffffff 0%, #fbfdfb 100%) !important;
    position: relative !important;
}
/* Stats: subtle card backing instead of bare on white */
html body .about-stats {
    background: rgba(255, 255, 255, 0.7) !important;
    border: 1px solid rgba(15, 26, 44, 0.08) !important;
    border-radius: 18px !important;
    padding: 28px 24px !important;
    box-shadow:
        0 4px 14px rgba(15, 26, 44, 0.06),
        0 1px 0 rgba(255, 255, 255, 0.9) inset !important;
    backdrop-filter: blur(8px) !important;
    margin-top: 28px !important;
}

/* Education page: style "View product" links if/when added */



/* Generic hover lift for plain cards on other pages */
html body .stack-card,
html body .preset-card,
html body .compound-card {
    transition: transform 0.28s cubic-bezier(0.2, 0.6, 0.2, 1),
                box-shadow 0.28s cubic-bezier(0.2, 0.6, 0.2, 1) !important;
}
html body .stack-card:hover,
html body .preset-card:hover,
html body .compound-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 28px rgba(15, 26, 44, 0.10) !important;
}

/* R206/R207 reverted (was wrong target) */

/* R208 — kill the teal text-shadow on preset-item prices (and builder/total
   variants). The legacy cyberpunk rule at L12473 set
   `text-shadow: 0 0 8px rgba(20,184,166,0.3)` which, on dark text, renders
   as a teal glow blur — visually reads as a "green line across the price"
   on the bundles/stacks page. Overriding to none. */
html body .preset-item-price,
html body .builder-tile-price,
html body .preset-total-final,
html body .product-price,
html body .bestseller-card .product-price {
    text-shadow: none !important;
}

/* ════════════════════════════════════════════════════════════════════════
   R217 — Build Your Own Stack tile cleanup.
   Issue: R6-D (line 22134) forced `.builder-tile` into a HORIZONTAL flex
   layout with display:flex + align-items:center + gap:14px. With tiles
   only ~180px wide, this crammed vial+name+dose+price into a single row,
   causing long compound names (GLOW, CJC-1295) to wrap awkwardly and
   prices to get truncated ($45... etc).
   Fix: switch to a true vertical card layout — vial on top, name (clamped
   to 2 lines), dose, then prominent price at bottom. Uniform tile height
   via min-height keeps the grid visually clean.
   ════════════════════════════════════════════════════════════════════════ */


/* Vial image — fixed size, centered, with bottom margin for breathing room */


/* Peptide name — clamp to 2 lines max with ellipsis. Long compound names
   (e.g. "GLOW (GHK-Cu, BPC-157, TB-500)") truncate cleanly. Full name is
   still accessible via the tile's title attribute on hover. */


/* Dose label — single line, never wraps */


/* Price — prominent, pinned to the bottom of the tile (margin-top: auto)
   so all prices align across the grid regardless of name length. */


/* Selected state — keep the brand-accent border + checkmark, but make
   the background a subtle mint tint instead of the original teal-blue */
html body .builder-tile.selected {
    border-color: #14b8a6 !important;
    background: rgba(20, 184, 166, 0.06) !important;
    box-shadow: 0 4px 14px rgba(20, 184, 166, 0.12) !important;
}
html body .builder-tile.selected .builder-tile-price {
    color: #0f8a7e !important;
}

/* Hover state */


/* Slightly tighten the grid — 175px minimum lets 4-5 tiles fit per row
   comfortably while giving each one enough room for the new layout */
html body #builder-products {
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)) !important;
    gap: 14px !important;
}

/* Mobile refinements — smaller padding, slightly smaller vial */
@media (max-width: 600px) {
    
    
    
    
    html body #builder-products {
        grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)) !important;
        gap: 10px !important;
    }
}


/* ════════════════════════════════════════════════════════════════════════
   R218 — PRODUCT PAGE VIAL POP.
   User asked to make the vial image on product detail pages "pop more".
   Current state (R194): scaled to 1.18 + 2-layer drop-shadow + simple
   transition. Static at rest, gets bigger on hover.
   New: layered shadow stack creates real product-photography depth
   (atmospheric + ambient + ground-contact + inner brand glow), gentle
   idle float for "alive" feel, subtle inset vignette frames the vial,
   and a more dramatic hover state.
   ════════════════════════════════════════════════════════════════════════ */

/* Idle float — vial bobs gently 6px over 4.8s. Scale stays consistent
   throughout so the size doesn't pulse, only the vertical position drifts.
   R220: scale bumped 1.18 → 1.20 for more dominance in the frame.
   R220b: user asked for +7% zoom (1.20 × 1.07 ≈ 1.28).
   R222: translateZ(0) keeps the img on its own GPU layer through the
   entire cycle — prevents the browser from dropping the high-quality
   raster after the animation settles (the "blurry after hover" bug). */
@keyframes ppVialFloat218 {
    0%, 100% { transform: scale(1.28) translateZ(0) translateY(0); }
    50%      { transform: scale(1.28) translateZ(0) translateY(-6px); }
}

/* REST STATE — richer multi-layer shadow + idle float + inner brand glow.
   The 4-layer drop-shadow chain simulates real studio product photography:
   • outer atmospheric blur (far-field haze)
   • mid ambient shadow (room light)
   • close hard contact shadow at base (surface grip)
   • subtle teal inner glow (brand identity, suggests illuminated liquid)
   R218b: added brightness(1.10) + saturate(1.08) for a touch more pop.
   R218c: dialed brightness back to 1.05 (5% reduction).
   R218d: brightness was washing out the dark text on the vial label
   (especially "LYOPHILIZED PEPTIDE / 3 mL VIAL" at the base). Replaced
   the brightness multiplier with a small contrast bump.
   R218e: text still reading slightly washed — root cause is the
   brightness(1.08) BAKED INTO --cy-vial-shift. Neutralize it with
   brightness(0.93) (0.93 × 1.08 ≈ 1.004, effectively no net brightness
   change) and push contrast harder. Inner teal glow also dialed back
   to reduce the "halo overlap" feel. */
html body .pp-image-wrap:not(.is-coa) img {
    animation: ppVialFloat218 4.8s ease-in-out infinite !important;
    /* R222: pin to GPU permanently so post-hover/post-animation
       rasterization matches the high-quality idle render */
    will-change: transform, filter !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    /* R469: match the product CARD's resting filter exactly. Drops the
       brightness(0.93) darkening (the dark-theme leftover) + the heavy
       navy drop-shadows. Soft contrast/saturate + light navy + teal
       grounding glow — same recipe used on .product-image img. */
    filter:
        var(--cy-vial-shift)
        contrast(1.05)
        saturate(1.06)
        drop-shadow(0 12px 22px rgba(20, 30, 60, 0.20))
        drop-shadow(0 3px 8px rgba(20, 184, 166, 0.16))
        !important;
    transition:
        transform 0.45s cubic-bezier(0.2, 0.6, 0.3, 1),
        filter 0.45s ease !important;
}

/* HOVER STATE — pause float, scale up, apply the same subtle brightness +
   teal/emerald halo as the product card. R469: filter chain now matches
   .product-card:hover .product-image img exactly (whisper brightness lift,
   slight saturation pop, soft teal/emerald glow halos + a subtle ground
   shadow). Transform/zoom preserved so the page keeps its lean-in zoom. */
html body .pp-image-wrap:not(.is-coa):hover img {
    animation-play-state: paused !important;
    transform: scale(1.35) translateZ(0) translateY(-6px) !important;
    filter:
        brightness(1.008)
        saturate(1.18)
        drop-shadow(0 0 32px rgba(45, 196, 214, 0.42))
        drop-shadow(0 0 16px rgba(130, 214, 226, 0.30))
        drop-shadow(0 10px 22px rgba(0, 0, 0, 0.38))
        !important;
}

/* INSET VIGNETTE — darker corners on the wrap frame the vial more
   dramatically (focus pull, like studio lighting). Combines with the
   external box-shadow from earlier rules. */
html body .pp-image-wrap:not(.is-coa) {
    box-shadow:
        0 4px 14px rgba(15, 26, 44, 0.06),
        inset 0 0 90px rgba(15, 26, 44, 0.07),
        inset 0 0 32px rgba(15, 26, 44, 0.04) !important;
}
html body .pp-image-wrap:not(.is-coa):hover {
    box-shadow:
        0 14px 36px rgba(20, 184, 166, 0.20),
        inset 0 0 90px rgba(15, 26, 44, 0.09),
        inset 0 0 32px rgba(15, 26, 44, 0.05) !important;
}

/* Accessibility — respect reduced-motion. R222: translateZ for GPU pinning. */
@media (prefers-reduced-motion: reduce) {
    html body .pp-image-wrap:not(.is-coa) img {
        animation: none !important;
        transform: scale(1.28) translateZ(0) !important;
    }
}

/* R220 — STUDIO BACKLIGHT BOOST. The radial halo behind the vial was at
   30% teal opacity; bumped to 40% with wider spread so the vial reads
   as "lit from a softbox behind it" — magnetic visual pull. Combined
   with the existing pp-halo-pulse animation, the halo will breathe more
   dramatically. */
html body .pp-image-wrap:not(.is-coa)::before {
    background:
        linear-gradient(rgba(20, 184, 166, 0.05) 1px, transparent 1px) 0 0 / 24px 24px,
        linear-gradient(90deg, rgba(20, 184, 166, 0.05) 1px, transparent 1px) 0 0 / 24px 24px,
        radial-gradient(circle,
            rgba(20, 184, 166, 0.40) 0%,
            rgba(45, 212, 191, 0.24) 30%,
            rgba(45, 212, 191, 0.08) 55%,
            transparent 75%) !important;
}


/* ════════════════════════════════════════════════════════════════════════
   R219 — PRODUCT CARD VIAL: slight extra green hue on hover.
   User asked for "just slightly more hue around the actual vial itself
   when you hover" on the product CARDS (not the product page). Existing
   hover filter at line 12800 already adds a teal halo; this layers on a
   touch more emerald green spread + bumps saturation a hair.
   Scoped to product cards + bestseller cards.
   R223: hover was reading too bright on hover (label text washing out).
   Same fix as the product page (R218e): neutralize the brightness bump
   and push contrast harder so the green halo still pops but the dark
   text on the vial label stays crisp.
   ════════════════════════════════════════════════════════════════════════ */
html body .product-card:hover .product-image img,
html body .product-card:hover .product-img-wrap img,
html body .bestseller-card:hover .bs-image img {
    /* R429/R433/R435: subtle saturation pop + soft teal/emerald glow halo.
       R436: hue strengthened a notch per user — saturate 1.10 → 1.18,
       teal halo 0.28 → 0.40, emerald spread 0.18 → 0.28. Still well
       below the original aggressive values. Brightness still a whisper. */
    filter: brightness(1.008)
            saturate(1.18)
            drop-shadow(0 0 32px rgba(45, 196, 214, 0.42))
            drop-shadow(0 0 16px rgba(130, 214, 226, 0.30))
            drop-shadow(0 10px 22px rgba(0, 0, 0, 0.38))
            !important;
}


/* ════════════════════════════════════════════════════════════════════════
   R-CartCheckoutBtnLarger — bigger "Proceed to Checkout" pill on the
   cart drawer. Keeps the rounded pill shape (border-radius: 999px from
   the base .btn-primary rule) and fills the footer's content width —
   which is now wider since the cart sidebar is 480px (May 2026).
   Selector specificity matches `html body button.btn-primary:not(...).btn-large`
   at line 21749 (4 classes + 3 type selectors) and sits later in the
   file so it wins for the properties below.
   ════════════════════════════════════════════════════════════════════════ */
html body button.btn-primary.btn-large.btn-checkout {
    /* R131: ever-so-slight slim-down on the Proceed-to-Checkout button.
       padding 22/32 → 16/28, min-height 64 → 52, font 1.05 → 0.98 — the
       button still reads as the page's primary CTA, just less chunky. */
    padding: 16px 28px !important;
    font-size: 0.98rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.4px !important;
    min-height: 52px !important;
    gap: 10px !important;
    /* Width matches the rest of the cart-footer rows (subtotal,
       discount lines, etc.) — the footer's horizontal padding was
       reduced to 12px so width:100% already gives the wider stance
       the user wanted. No negative-margin tricks needed. */
    display: flex !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 8px 0 0 !important;
    justify-content: center !important;
    align-items: center !important;
}
/* Cart footer: reduce horizontal padding from 24px to 12px so all
   rows (subtotal, discount lines, savings badge, checkout button)
   share the same wider content width — no more visual mismatch
   where the badge/button stuck out past the discount rows.
   padding-bottom reduced 48px → 20px, then bumped to 30px so the
   summary block + arrives/promo sit ~10px higher from the cart-sidebar
   bottom edge (1.25% raise per user request — both sections move up
   together since they're stacked inside cart-footer). */
html body .cart-footer {
    padding-left: 12px !important;
    padding-right: 12px !important;
    /* R132: trim padding-bottom 30 → 20 so the entire footer block sits
       lower in the drawer and gives cart-scroll a few extra pixels for
       items. Subtle — about 10px gained. */
    padding-bottom: 20px !important;
}
/* R132: tighten the research-use-only disclaimer's top margin so it
   sits closer to the checkout button and frees a few more pixels for
   cart-scroll above. */

/* May 2026 (revised): summary block is PINNED to bottom of cart drawer,
   never moves. Items scroll internally (no visible scrollbar). User sees
   the Proceed to Checkout button at all times, regardless of how many
   items are in cart.
   • cart-sidebar: hides overflow so the drawer itself never scrolls
   • cart-scroll: items scroll internally via overflow-y, scrollbar HIDDEN
     so there's no visual scroll affordance (still scrollable via mouse
     wheel/trackpad)
   • cart-footer (containing the summary block): pinned at bottom via
     flex-shrink:0 at the end of the column layout — this is the original
     architecture, now without the visible scrollbar. */
html body .cart-sidebar {
    overflow: hidden !important;
}
html body .cart-scroll {
    flex: 1 1 0% !important;
    overflow-y: auto !important;
    min-height: 0 !important;
    /* Hide the scrollbar so the cart looks clean (no visible scroll
       indicator). Content is still scrollable via mouse wheel/trackpad. */
    scrollbar-width: none !important;        /* Firefox */
    -ms-overflow-style: none !important;     /* IE/Edge legacy */
}
html body .cart-scroll::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;                /* Chrome/Safari/newer Edge */
}

/* May 2026: subtotal + savings badge + checkout button are now wrapped
   in `.cart-summary-block`. The wrapper gets the margin-top (pushes the
   group down below the delivery row + promo section) AND a subtle
   contained-block treatment (light bg, 1px border, rounded corners,
   inner padding) so the section reads as its own panel instead of
   floating in white space. */
html body .cart-summary-block {
    /* Sticky positioning REMOVED — cart-footer is now pinned at the
       bottom of cart-sidebar via the flex column layout. Summary
       block sits directly underneath the arrives/promo section with
       only 8px breathing room. Group's overall vertical position is
       controlled by cart-delivery-row's margin-top (110px). */
    /* R132: shave another 2px off the top margin so the whole summary
       block sits a touch lower / more compact than R131 — keeps the
       Proceed-to-Checkout button readable but frees a few more pixels
       for items in cart-scroll. */
    margin-top: 6px !important;
    background: rgba(0, 0, 0, 0.025) !important;
    border: 1px solid rgba(0, 0, 0, 0.10) !important;
    border-radius: 14px !important;
    /* R131: ever-so-slight slim-down on PC per user request. Padding
       16 → 12 brings the panel in by ~4px on each axis without
       changing the overall layout or feel. R132 trims to 10. */
    padding: 10px 12px !important;
}
/* Trim some of the inner element margins since the wrapper now provides
   its own padding — no double-spacing at the edges. */
html body .cart-summary-block > .cart-subtotal {
    margin-top: 0 !important;
    margin-bottom: 6px !important;
}
html body .cart-summary-block > .cart-savings-badge {
    margin-bottom: 10px !important;
}
html body .cart-summary-block > .btn-checkout {
    margin-bottom: 0 !important;
}
html body button.btn-primary.btn-large.btn-checkout i {
    font-size: 1.05rem !important;
}


/* ════════════════════════════════════════════════════════════════════════
   R-CartDeliveryRowPlain — strip the box styling from the delivery line
   (no background, no border, no rounded corners). Aminoclubs-style:
   small icon + plain centered text, blends with the rest of the cart
   footer instead of looking like a callout chip.
   Cart sidebar is now 480px (May 2026) which gives plenty of horizontal
   room — we keep nowrap as a safety in case copy gets longer later.
   ════════════════════════════════════════════════════════════════════════ */
html body .cart-delivery-row {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 4px 0 !important;
    /* Back to small natural top margin. The 110px we tried made cart-footer
       too tall and forced items into a scroll. The "group pushed down" feel
       now comes from flex layout — cart-scroll fills remaining space, items
       render at the top of it with empty space below before cart-footer. */
    margin: 6px 0 !important;
    font-size: 0.78rem !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    justify-content: center !important;
    color: var(--text-muted) !important;
    gap: 6px !important;
}
html body .cart-delivery-row i {
    color: #14b8a6 !important;
    font-size: 0.78rem !important;
}
html body .cart-delivery-row > span {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0 !important;
}


/* ════════════════════════════════════════════════════════════════════════
   R450 — CHECKOUT STEP 1 OVERHAUL
   Card-based section layout + top trust strip + inline order summary +
   billing-address toggle, clearer hierarchy, more breathing room.
   Designed for high-conversion: every section has a clear header with
   icon, a one-line reassurance/note, and proper input states. The whole
   layout is set in a light theme to feel premium and bank-grade.
   ════════════════════════════════════════════════════════════════════════ */

/* Subtitle under the step's H2.
   R450b: removed max-width constraint that was wrapping the line. */
html body .checkout-page .checkout-step-subtitle {
    color: var(--text-muted) !important;
    font-size: 0.95rem !important;
    line-height: 1.55 !important;
    margin: -12px 0 22px 0 !important;
}

/* Top trust strip — 4 micro-badges at the top of step 1 */
html body .checkout-trust-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    padding: 12px 16px;
    /* R453: tightened from 22px so the H2 sits closer to the strip. */
    margin: 0 0 14px 0;
    background: linear-gradient(180deg, rgba(20,184,166,0.06) 0%, rgba(20,184,166,0.02) 100%);
    border: 1px solid rgba(20,184,166,0.18);
    border-radius: 12px;
    justify-content: space-between;
    align-items: center;
}
html body .checkout-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    letter-spacing: 0.02em;
}
html body .checkout-trust-item i {
    color: var(--accent);
    font-size: 0.95rem;
}

/* Inline collapsible order summary at the top of Step 1 */
html body .checkout-inline-summary {
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: 14px;
    margin: 0 0 22px 0;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}





html body .checkout-inline-summary .cis-label {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    color: var(--text);
    font-size: 0.92rem;
}
html body .checkout-inline-summary .cis-count {
    color: var(--text-muted);
    font-size: 0.82rem;
    margin-right: auto;
}
html body .checkout-inline-summary .cis-total {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: var(--text);
    font-size: 1rem;
    padding-right: 4px;
}
html body .checkout-inline-summary .cis-chev {
    color: var(--text-muted);
    font-size: 0.78rem;
    transition: transform 0.22s cubic-bezier(0.2, 0.6, 0.3, 1);
}
html body .checkout-inline-summary[open] .cis-chev {
    transform: rotate(180deg);
    color: var(--accent);
}
html body .checkout-inline-summary-body {
    padding: 4px 18px 16px;
    border-top: 1px solid var(--border-light);
    background: #fafafa;
}
html body .checkout-inline-summary-body .cis-line {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    font-size: 0.88rem;
    border-bottom: 1px dashed rgba(0,0,0,0.06);
}
html body .checkout-inline-summary-body .cis-line:last-of-type { border-bottom: none; }
html body .checkout-inline-summary-body .cis-line .cis-line-qty {
    background: rgba(20,184,166,0.10);
    color: var(--accent);
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 0.78rem;
    flex-shrink: 0;
}
html body .checkout-inline-summary-body .cis-line .cis-line-name {
    flex: 1;
    color: var(--text);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
html body .checkout-inline-summary-body .cis-line .cis-line-price {
    font-family: 'JetBrains Mono', monospace;
    color: var(--text);
    font-weight: 600;
    flex-shrink: 0;
}
html body .checkout-inline-summary-body .cis-totals {
    padding-top: 10px;
    border-top: 1px solid rgba(0,0,0,0.08);
    margin-top: 4px;
}
html body .checkout-inline-summary-body .cis-totals-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    padding: 4px 0;
    color: var(--text-muted);
}
html body .checkout-inline-summary-body .cis-totals-row.cis-total-final {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--text);
    padding-top: 8px;
    border-top: 1px solid rgba(0,0,0,0.08);
    margin-top: 4px;
}
html body .checkout-inline-summary-body .cis-totals-row .cis-saving {
    color: #16a34a;
    font-weight: 600;
}

/* Checkout section card — wraps each logical block of the form */
html body .checkout-section {
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: 14px;
    padding: 22px 22px 20px;
    margin: 0 0 18px 0;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
html body .checkout-section:focus-within {
    border-color: rgba(20,184,166,0.40);
    box-shadow: 0 0 0 4px rgba(20,184,166,0.07);
}
html body .checkout-section.checkout-section-compact { padding-bottom: 14px; }

html body .checkout-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
html body .checkout-section-header h3 {
    margin: 0;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.02em;
}
html body .checkout-section-header .cs-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(20,184,166,0.12) 0%, rgba(20,184,166,0.06) 100%);
    border: 1px solid rgba(20,184,166,0.22);
    color: var(--accent);
    font-size: 0.9rem;
    flex-shrink: 0;
}
html body .checkout-section-header .cs-badge {
    margin-left: auto;
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: rgba(0,0,0,0.04);
    border-radius: 999px;
    padding: 4px 10px;
}

/* Helper / note text under a section's content */
html body .checkout-section-note {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    /* R456: was 12px top — tighten to 8px now that SMS opt-in is gone and
       the Contact card had a visible empty zone above the note. */
    margin: 8px 0 0 0;
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.5;
}
html body .checkout-section-note.checkout-section-note-top {
    margin: 0 0 14px 0;
}

/* R456 → R460: spacing inside checkout sections. Splits the difference
   between the original loose layout (16px after every form-row) and the
   over-tight collapsed layout: form-rows now have 8px below them, and
   the email opt-in that follows the Contact form-row pulls up a touch
   so its gap also lands near 8px. */
html body .checkout-section .form-row {
    margin-bottom: 8px !important;
}
html body .checkout-section .checkout-optin {
    margin: 0;
}
html body .checkout-section .form-row + .checkout-optin {
    margin-top: -2px;
}

/* ════════════════════════════════════════════════════════════════════════
   R462 — CHECKOUT STEP 2 (REVIEW) OVERHAUL
   Two-column layout: left = items/addresses/contact; right = sticky
   summary card with totals + promo + points + delivery + CTAs. Replaces
   the prior vertical wall of borderless "boxes" stacked on top of each
   other. Collapses to one column under 900px.
   ════════════════════════════════════════════════════════════════════════ */

/* Wider container ON THE REVIEW STEP only so the two columns can breathe.
   Other steps keep the original 880px max. */
/* R464: Step 2 removed; rule preserved as a no-op for legacy safety. */
html body .checkout-page-container:has(#checkout-step-2:not([style*="display:none"])) {
    max-width: 1180px !important;
}





html body .checkout-review-left > .checkout-section { margin-bottom: 14px; }
html body .checkout-review-left > .checkout-section:last-child { margin-bottom: 0; }

/* Right column sticks while you scroll the left column on desktop */


/* Edit link in section header */
html body .cs-edit-link {
    margin-left: auto;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    background: transparent;
    border: 1px solid rgba(20,184,166,0.30);
    border-radius: 999px;
    padding: 4px 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s ease, border-color 0.15s ease;
    flex-shrink: 0;
}
html body .cs-edit-link:hover {
    background: rgba(20,184,166,0.08);
    border-color: rgba(20,184,166,0.55);
}
html body .cs-edit-link i { font-size: 0.7rem; }

/* ─── Review line items ─── */
html body .review-items-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
html body .review-item {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 10px 12px;
    background: #fafafa;
    border: 1px solid var(--border-light);
    border-radius: 12px;
}
html body .review-item-img {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(180deg, #e4f0eb 0%, #c5dec1 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
html body .review-item-img img {
    max-width: 75%;
    max-height: 85%;
    object-fit: contain;
    display: block;
}
html body .review-item-meta { min-width: 0; }
html body .review-item-name {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    color: var(--text);
    font-size: 0.92rem;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
html body .review-item-dose {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
html body .review-item-qty {
    color: var(--text-muted);
    font-size: 0.78rem;
    margin-top: 2px;
}
html body .review-item-price {
    text-align: right;
    flex-shrink: 0;
}
html body .review-item-price-final {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: var(--text);
    font-size: 0.95rem;
}
html body .review-item-price-strike {
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-muted);
    text-decoration: line-through;
    font-size: 0.78rem;
    margin-top: 2px;
}

/* ─── Address / contact blocks ─── */
html body .review-address,
html body .review-contact {
    padding: 12px 14px;
    background: #fafafa;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--text);
}
html body .review-address .ra-name {
    font-weight: 700;
    margin-bottom: 4px;
}
html body .review-address .ra-line {
    color: var(--text);
}
html body .review-contact .ra-line {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
}
html body .review-contact .ra-line i {
    color: var(--accent);
    font-size: 0.8rem;
    width: 14px;
}

/* ─── Summary card (right column) ─── */
html body .checkout-summary-card { padding-bottom: 18px; }

html body .review-totals {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 4px 0 12px 0;
    border-bottom: 1px dashed rgba(0,0,0,0.10);
    margin-bottom: 12px;
}
html body .review-totals .rs-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.88rem;
    color: var(--text);
    padding: 2px 0;
}
html body .review-totals .rs-row.rs-discount {
    color: #16a34a;
    font-weight: 600;
}
html body .review-totals .rs-row.rs-total {
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid rgba(0,0,0,0.10);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text);
}
html body .review-totals .rs-row.rs-total span:last-child {
    color: var(--accent);
    font-family: 'JetBrains Mono', monospace;
}

/* Promo input */
html body .review-promo {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    margin-bottom: 4px;
}
html body .review-promo input {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 0.88rem;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: 'JetBrains Mono', monospace;
}
html body .review-promo input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(20,184,166,0.12);
    outline: none;
}
html body .review-promo button {
    background: var(--text);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 0 18px;
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s ease;
}
html body .review-promo button:hover { background: var(--accent); }
html body .review-promo + .promo-status {
    margin: 6px 0 12px 0;
    font-size: 0.78rem;
    min-height: 16px;
}
html body .review-promo + .promo-status.success { color: #16a34a; }
html body .review-promo + .promo-status.error { color: var(--danger); }

/* Points widget inside summary card */
html body .review-points-widget {
    background: linear-gradient(180deg, rgba(20,184,166,0.06), rgba(20,184,166,0.02));
    border: 1px solid rgba(20,184,166,0.22);
    border-radius: 12px;
    padding: 12px 14px;
    margin: 6px 0 12px 0;
}
html body .review-points-widget .rp-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    margin-bottom: 8px;
}
html body .review-points-widget .rp-header > span:first-child {
    font-weight: 700;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
html body .review-points-widget .rp-header i { color: #f59e0b; }
html body .review-points-widget .rp-balance {
    font-size: 0.78rem;
    color: var(--text-muted);
}
html body .review-points-widget .rp-balance strong {
    color: var(--accent);
    font-family: 'JetBrains Mono', monospace;
}
html body .review-points-widget .points-slider {
    width: 100%;
    margin: 4px 0 6px 0;
}
html body .review-points-widget .rp-applied {
    text-align: center;
    font-size: 0.78rem;
    color: var(--text-muted);
}

/* Earn preview */
html body .review-earn-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(245,158,11,0.08);
    border: 1px solid rgba(245,158,11,0.25);
    border-radius: 10px;
    font-size: 0.82rem;
    color: var(--text);
    margin-bottom: 12px;
}
html body .review-earn-preview > i {
    color: #f59e0b;
    font-size: 1rem;
    flex-shrink: 0;
}
/* R466 fix: wrap the text in its own span so the inline text wraps as
   one block instead of each anonymous flex item (the "You'll earn" /
   "641" / "points from this order…") wrapping independently. */
html body .review-earn-preview > span {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.45;
}
html body .review-earn-preview strong { color: #d97706; }


/* ════════════════════════════════════════════════════════════════════════
   R466 — TRACKING PAGE (/order.html) OVERHAUL
   Light-theme card system that mirrors the checkout. Status hero, polished
   4-step timeline, two-column grid (items+totals on left; addresses/
   tracking/support on right), refer-a-friend card preserved at the bottom.
   ════════════════════════════════════════════════════════════════════════ */

html body .track-page {
    min-height: 100vh;
    padding: 120px 20px 80px;
    background: var(--bg);
}
html body .track-page-container {
    max-width: 1100px;
    margin: 0 auto;
}
html body .track-page-header { margin-bottom: 28px; }
html body .track-page-header .back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--accent);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    margin-bottom: 14px;
}
html body .track-page-header .back-link:hover { text-decoration: underline; }
html body .track-page-header h1 {
    font-family: 'Orbitron', sans-serif !important;
    font-size: clamp(1.6rem, 3.8vw, 2.2rem) !important;
    color: var(--text) !important;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 8px 0 !important;
}
html body .track-page-header h1 i { color: var(--accent); font-size: 0.9em; }
html body .track-page-header .track-page-sub {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin: 0;
}

/* Sign-in gate card */
html body .track-signin-card {
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: 16px;
    padding: 36px 28px 32px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    max-width: 480px;
    margin: 0 auto;
}
html body .track-signin-card .ts-icon {
    width: 60px; height: 60px;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(20,184,166,0.15), rgba(20,184,166,0.06));
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin: 0 auto 18px;
}
html body .track-signin-card h2 {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.2rem;
    color: var(--text);
    margin: 0 0 10px;
}
html body .track-signin-card p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 0 0 22px;
    line-height: 1.55;
}

/* Lookup form card */
html body .track-lookup-card { max-width: 560px; margin: 0 auto 22px; }
html body .track-lookup-card .form-group input {
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

/* Error display */
html body .track-error {
    max-width: 560px;
    margin: 0 auto 16px;
    padding: 14px 18px;
    background: rgba(239,68,68,0.06);
    border: 1px solid rgba(239,68,68,0.30);
    color: #b91c1c;
    border-radius: 12px;
    font-size: 0.88rem;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.45;
}
html body .track-error i {
    color: #ef4444;
    margin-top: 2px;
    flex-shrink: 0;
}

/* Loading */
html body .track-loading {
    text-align: center;
    padding: 40px 0;
    color: var(--text-muted);
}
html body .track-loading i { font-size: 1.6rem; color: var(--accent); }
html body .track-loading p { margin-top: 12px; font-size: 0.88rem; }

/* ─── ORDER DETAIL ─── */
html body .order-detail { margin-top: 8px; }

/* Status hero — top of the order detail */
html body .track-status-hero {
    background: linear-gradient(180deg, rgba(20,184,166,0.06), rgba(20,184,166,0.02));
    border: 1px solid rgba(20,184,166,0.20);
    border-radius: 16px;
    padding: 22px 24px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 18px;
    margin-bottom: 20px;
}
@media (max-width: 560px) {
    html body .track-status-hero {
        grid-template-columns: 1fr;
        text-align: center;
    }
}
html body .track-status-hero .tsh-left { min-width: 0; }
html body .track-status-hero .tsh-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 4px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border: 1px solid var(--border-light);
    background: #fff;
    margin-bottom: 10px;
}
html body .track-status-hero .tsh-status-pill i {
    font-size: 0.55rem;
}
html body .track-status-hero .tsh-status-pill.status-awaiting {
    color: #b45309;
    background: rgba(245,158,11,0.10);
    border-color: rgba(245,158,11,0.30);
}
html body .track-status-hero .tsh-status-pill.status-awaiting i { color: #f59e0b; }
html body .track-status-hero .tsh-status-pill.status-paid {
    color: #0d9488;
    background: rgba(20,184,166,0.10);
    border-color: rgba(20,184,166,0.35);
}
html body .track-status-hero .tsh-status-pill.status-paid i { color: var(--accent); }
html body .track-status-hero .tsh-status-pill.status-shipped {
    color: #4338ca;
    background: rgba(99,102,241,0.10);
    border-color: rgba(99,102,241,0.30);
}
html body .track-status-hero .tsh-status-pill.status-shipped i { color: #6366f1; }

html body .track-status-hero .tsh-ref-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
html body .track-status-hero .tsh-ref-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.10em;
    font-weight: 700;
}
html body .track-status-hero .tsh-ref-value {
    font-family: 'Orbitron', sans-serif;
    font-weight: 800;
    color: var(--text);
    font-size: 1.15rem;
    letter-spacing: 0.08em;
}
html body .track-status-hero .tsh-copy {
    background: transparent;
    border: 1px solid var(--border-light);
    color: var(--text-muted);
    width: 28px; height: 28px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease, border-color 0.15s ease;
}
html body .track-status-hero .tsh-copy:hover {
    color: var(--accent);
    border-color: rgba(20,184,166,0.50);
}
html body .track-status-hero .tsh-date {
    font-size: 0.85rem;
    color: var(--text-muted);
}

html body .track-status-hero .tsh-right {
    text-align: right;
    flex-shrink: 0;
}
@media (max-width: 560px) {
    html body .track-status-hero .tsh-right { text-align: center; }
}
html body .track-status-hero .tsh-eta-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.10em;
    font-weight: 700;
    margin-bottom: 4px;
}
html body .track-status-hero .tsh-eta-date {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    color: var(--text);
    font-size: 1.05rem;
}

/* ─── 4-step timeline ─── */
html body .track-timeline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin: 0 auto 22px;
    padding: 18px 24px 20px;
    position: relative;
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
html body .track-timeline::before {
    content: '';
    position: absolute;
    top: calc(18px + 17px); /* aligns with dot center (padding-top + half dot) */
    left: 48px;
    right: 48px;
    height: 3px;
    background: rgba(0,0,0,0.08);
    border-radius: 2px;
    z-index: 0;
}
html body .track-timeline .progress-bar-fill {
    position: absolute;
    top: calc(18px + 17px);
    left: 48px;
    height: 3px;
    background: var(--accent);
    border-radius: 2px;
    z-index: 1;
    transition: width 0.6s ease;
}
html body .track-timeline .progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
    flex: 0 0 auto;
    width: 90px;
}
html body .track-timeline .progress-dot {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    margin-bottom: 10px;
    transition: all 0.3s ease;
    background: #f1f5f9;
    border: 2px solid var(--border-light);
    color: var(--text-muted);
}
html body .track-timeline .progress-dot.active {
    background: rgba(20,184,166,0.15);
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 0 0 4px rgba(20,184,166,0.12);
}
html body .track-timeline .progress-dot.done {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
html body .track-timeline .progress-label {
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.3;
}
html body .track-timeline .progress-label.active,
html body .track-timeline .progress-label.done {
    color: var(--text);
}
@media (max-width: 560px) {
    html body .track-timeline { padding: 14px 12px 16px; }
    html body .track-timeline .progress-step { width: 64px; }
    html body .track-timeline .progress-dot { width: 28px; height: 28px; font-size: 0.66rem; margin-bottom: 8px; }
    html body .track-timeline .progress-label { font-size: 0.66rem; }
    html body .track-timeline::before,
    html body .track-timeline .progress-bar-fill {
        left: 30px; right: 30px;
        top: calc(14px + 14px);
    }
}

/* ─── Two-column body ─── */
html body .track-detail-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 18px;
    align-items: start;
}
@media (max-width: 860px) {
    html body .track-detail-grid { grid-template-columns: 1fr; gap: 14px; }
}
html body .track-detail-left,
html body .track-detail-right { min-width: 0; }
html body .track-detail-right > .checkout-section { margin-bottom: 14px; }
html body .track-detail-right > .checkout-section:last-child { margin-bottom: 0; }

/* Items list — checkout-style rows */
html body .track-items-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
html body .track-items-list .ti-row {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    background: #fafafa;
    border: 1px solid var(--border-light);
    border-radius: 10px;
    font-size: 0.88rem;
}
html body .track-items-list .ti-img {
    width: 44px; height: 44px;
    border-radius: 8px;
    background: linear-gradient(180deg, #e4f0eb 0%, #c5dec1 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    font-size: 1.1rem;
    flex-shrink: 0;
}
html body .track-items-list .ti-name {
    font-weight: 700;
    color: var(--text);
}
html body .track-items-list .ti-qty {
    font-size: 0.74rem;
    color: var(--text-muted);
    margin-top: 2px;
}
html body .track-items-list .ti-price {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: var(--text);
}

/* Totals */
html body .track-totals {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed rgba(0,0,0,0.10);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
html body .track-totals .tt-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.88rem;
    padding: 2px 0;
    color: var(--text);
}
html body .track-totals .tt-row.tt-discount { color: #16a34a; font-weight: 600; }
html body .track-totals .tt-row.tt-grand {
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid rgba(0,0,0,0.10);
    font-size: 1.05rem;
    font-weight: 800;
}
html body .track-totals .tt-row.tt-grand span:last-child {
    color: var(--accent);
    font-family: 'JetBrains Mono', monospace;
}

/* Shipping/tracking section */
html body .track-shipping-card .tracking-number-link {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--accent);
    text-decoration: none;
    padding: 12px 14px;
    background: #fafafa;
    border: 1px solid var(--border-light);
    border-radius: 10px;
    word-break: break-all;
    transition: border-color 0.15s ease;
}
html body .track-shipping-card .tracking-number-link:hover {
    border-color: rgba(20,184,166,0.45);
    text-decoration: underline;
}
html body .track-shipping-card .tracking-estimate {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin: 8px 0 0;
}

/* Support card */
html body .track-support-card .track-support-text {
    font-size: 0.86rem;
    color: var(--text-muted);
    margin: 0 0 12px 0;
    line-height: 1.5;
}
html body .track-support-card .btn-outline {
    margin-bottom: 8px;
}
html body .track-support-card .track-support-phone {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--accent);
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
    padding: 4px 0;
}
html body .track-support-card .track-support-phone:hover { text-decoration: underline; }


/* ════════════════════════════════════════════════════════════════════════
   R467 — PRODUCT DETAIL PAGE POLISH
   Brings the product page in line with the new light-theme system. We
   keep the existing JS-rendered HTML structure (no risk of breaking
   product-{id}.html pages) and just OVERRIDE the dark-theme styles for:
     • Sticky mobile add-to-cart bar
     • Compact "quick trust" pill row above the fold
     • Trust strip + Free Shipment Protection callout
     • Frequently-Bought-Together card
     • Delivery + cutoff callout
   ════════════════════════════════════════════════════════════════════════ */

/* ─── Quick-trust pill row (NEW — injected by app.js renderProductPage) ─── */
html body .pp-quicktrust {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    margin: 12px 0 18px 0;
}
html body .pp-quicktrust .pp-quicktrust-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #fafafa;
    border: 1px solid var(--border-light);
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    transition: border-color 0.15s ease, background 0.15s ease;
}
html body .pp-quicktrust .pp-quicktrust-pill:hover {
    background: rgba(20,184,166,0.05);
    border-color: rgba(20,184,166,0.30);
}
html body .pp-quicktrust .pp-quicktrust-pill i {
    color: var(--accent);
    font-size: 0.85rem;
}
@media (max-width: 540px) {
    html body .pp-quicktrust .pp-quicktrust-pill {
        font-size: 0.7rem;
        padding: 5px 10px;
    }
    html body .pp-quicktrust .pp-quicktrust-pill i { font-size: 0.78rem; }
}

/* ─── STICKY MOBILE ADD-TO-CART BAR — light-theme overhaul ─── */
@media (max-width: 880px) {
    html body .pp-sticky-cart {
        background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%) !important;
        border-top: 1px solid rgba(20,184,166,0.28) !important;
        box-shadow: 0 -10px 28px rgba(0,0,0,0.10) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        padding: 12px 14px calc(12px + env(safe-area-inset-bottom)) !important;
        gap: 12px !important;
    }
    html body .pp-sticky-cart .pp-sticky-thumb {
        width: 48px !important;
        height: 48px !important;
        background: linear-gradient(180deg, #e4f0eb 0%, #c5dec1 100%) !important;
        border: 1px solid var(--border-light) !important;
        border-radius: 10px !important;
        padding: 4px;
    }
    html body .pp-sticky-cart .pp-sticky-thumb img {
        filter: none !important;
        padding: 0 !important;
    }
    html body .pp-sticky-cart .pp-sticky-name {
        color: var(--text) !important;
        font-weight: 700 !important;
        font-size: 0.84rem !important;
    }
    html body .pp-sticky-cart .pp-sticky-price {
        font-family: 'JetBrains Mono', monospace !important;
        color: var(--accent) !important;
        font-weight: 800 !important;
        font-size: 1rem !important;
    }
    html body .pp-sticky-cart .pp-sticky-qty {
        background: #fff !important;
        border: 1px solid var(--border-light) !important;
        border-radius: 10px !important;
    }
    html body .pp-sticky-cart .pp-sticky-qty button {
        color: var(--text) !important;
        width: 34px !important;
        height: 40px !important;
        font-size: 1.15rem !important;
    }
    html body .pp-sticky-cart .pp-sticky-qty button:hover {
        background: rgba(20,184,166,0.10) !important;
        color: var(--accent) !important;
    }
    html body .pp-sticky-cart #pp-sticky-qty-display {
        color: var(--text) !important;
        font-family: 'JetBrains Mono', monospace !important;
        font-weight: 700 !important;
        min-width: 26px !important;
        text-align: center !important;
    }
    html body .pp-sticky-cart .pp-sticky-btn {
        background: linear-gradient(180deg, #2dd4bf 0%, #14b8a6 55%, #0d9488 100%) !important;
        color: #fff !important;
        border: 1px solid #0d9488 !important;
        border-radius: 999px !important;
        padding: 11px 18px !important;
        font-weight: 800 !important;
        font-size: 0.92rem !important;
        box-shadow: 0 6px 14px rgba(13,148,136,0.30) !important;
        white-space: nowrap !important;
        text-shadow: 0 1px 1px rgba(0,0,0,0.18) !important;
    }
    html body .pp-sticky-cart .pp-sticky-btn:hover:not(:disabled) {
        transform: translateY(-1px);
        box-shadow: 0 10px 22px rgba(13,148,136,0.42) !important;
    }
    html body .pp-sticky-cart .pp-sticky-btn.pp-sticky-notify {
        background: rgba(0,0,0,0.05) !important;
        color: var(--text-muted) !important;
        border: 1px solid var(--border-light) !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
}

/* ─── TRUST STRIP (.pp-trust) — light theme + brand teal accents ─── */
html body .pp-trust {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 12px;
    padding: 14px 16px;
    background: linear-gradient(180deg, rgba(20,184,166,0.05), rgba(20,184,166,0.02));
    border: 1px solid rgba(20,184,166,0.20);
    border-radius: 14px;
    margin: 14px 0;
}
html body .pp-trust .pp-trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
}
html body .pp-trust .pp-trust-item i {
    color: var(--accent);
    font-size: 0.95rem;
    width: 20px;
    text-align: center;
}
@media (max-width: 500px) {
    html body .pp-trust { grid-template-columns: 1fr; }
}

/* ─── PROTECTION CALLOUT — light theme ─── */
html body .pp-protection-callout {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(20,184,166,0.06), rgba(16,185,129,0.04));
    border: 1px solid rgba(20,184,166,0.25);
    border-radius: 14px;
    margin: 14px 0;
}
html body .pp-protection-callout .pp-protection-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(180deg, #10b981, #0d9488);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(16,185,129,0.25);
}
html body .pp-protection-callout .pp-protection-title {
    color: var(--text);
    font-weight: 700;
    font-size: 0.92rem;
    line-height: 1.3;
    margin-bottom: 3px;
}
html body .pp-protection-callout .pp-protection-text {
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.5;
}

/* ─── DELIVERY CALLOUT (under buy row) — light theme ─── */
html body .pp-delivery-callout {
    background: #fafafa;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 12px 14px;
    margin: 12px 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
html body .pp-delivery-callout .pp-delivery-row,
html body .pp-delivery-callout .pp-cutoff-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.86rem;
    color: var(--text);
}
html body .pp-delivery-callout .pp-delivery-row i,
html body .pp-delivery-callout .pp-cutoff-row i {
    color: var(--accent);
    font-size: 1rem;
    width: 18px;
    text-align: center;
}
html body .pp-delivery-callout .pp-cutoff-row {
    padding-top: 6px;
    border-top: 1px dashed rgba(0,0,0,0.08);
    color: var(--text-muted);
}
html body .pp-delivery-callout strong { color: var(--text); }

/* ─── RUO NOTE ─── */
html body .pp-ruo-note {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(245,158,11,0.08);
    border: 1px solid rgba(245,158,11,0.28);
    border-radius: 10px;
    color: #92400e;
    font-size: 0.78rem;
    margin: 14px 0 0 0;
    line-height: 1.45;
}
html body .pp-ruo-note i { color: #d97706; flex-shrink: 0; }

/* ─── FREQUENTLY BOUGHT TOGETHER — light theme overhaul ─── */
html body .pp-fbt-card {
    background: linear-gradient(180deg, rgba(20,184,166,0.04), rgba(20,184,166,0.01)) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03) !important;
}
html body .pp-fbt-card::before { display: none !important; }
html body .pp-fbt-item {
    background: #fff !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 12px !important;
    transition: border-color 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease !important;
}
html body .pp-fbt-item:hover {
    border-color: rgba(20,184,166,0.45) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(0,0,0,0.06) !important;
}
html body .pp-fbt-item.is-current {
    background: rgba(20,184,166,0.06) !important;
    border-color: rgba(20,184,166,0.45) !important;
}
html body .pp-fbt-item .pp-fbt-name { color: var(--text) !important; }
html body .pp-fbt-item .pp-fbt-price {
    color: var(--accent) !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-weight: 700 !important;
}
html body .pp-fbt-item .pp-fbt-this { color: var(--text-muted) !important; font-weight: 500; }
html body .pp-fbt-item .pp-fbt-thumb {
    background: linear-gradient(180deg, #e4f0eb 0%, #c5dec1 100%) !important;
    border-radius: 10px !important;
}
html body .pp-fbt-plus {
    color: var(--text-muted) !important;
    font-weight: 700 !important;
}
html body .pp-fbt-summary {
    border-top: 1px dashed rgba(0,0,0,0.10) !important;
}
html body .pp-fbt-summary .pp-fbt-total-line {
    color: var(--text-muted) !important;
    font-size: 0.86rem !important;
}
html body .pp-fbt-summary .pp-fbt-total-line span:last-child {
    color: var(--text) !important;
    font-family: 'JetBrains Mono', monospace !important;
}
html body .pp-fbt-summary .pp-fbt-savings span:last-child {
    color: #16a34a !important;
}
html body .pp-fbt-summary .pp-fbt-total {
    border-top: 1px dashed rgba(0,0,0,0.10) !important;
}
html body .pp-fbt-summary .pp-fbt-total span:first-child {
    color: var(--text) !important;
}
html body .pp-fbt-summary .pp-fbt-total span:last-child {
    color: var(--accent) !important;
    font-family: 'JetBrains Mono', monospace !important;
}
html body .pp-fbt-cta {
    background: linear-gradient(180deg, #2dd4bf 0%, #14b8a6 55%, #0d9488 100%) !important;
    color: #fff !important;
    border: 1px solid #0d9488 !important;
    border-radius: 999px !important;
    box-shadow: 0 6px 18px rgba(13,148,136,0.28) !important;
    text-shadow: 0 1px 1px rgba(0,0,0,0.22) !important;
}
html body .pp-fbt-cta:hover:not(:disabled) {
    transform: translateY(-1px) !important;
    box-shadow: 0 10px 26px rgba(13,148,136,0.40) !important;
}
html body .pp-fbt-cta.pp-fbt-cta-done {
    background: linear-gradient(180deg, #22c55e, #10b981) !important;
}

/* ─── PRODUCT RATING / REVIEW HIGHLIGHTS NEAR PRICE ─── */
html body .pp-rating {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(245,158,11,0.08);
    border: 1px solid rgba(245,158,11,0.22);
    border-radius: 999px;
    margin-bottom: 12px;
    font-size: 0.82rem;
}
html body .pp-rating .pp-stars {
    color: #f59e0b;
    font-size: 0.85rem;
    letter-spacing: 1px;
}
html body .pp-rating strong { color: var(--accent) !important; }


/* ════════════════════════════════════════════════════════════════════════
   R468 — ACCOUNT DASHBOARD OVERHAUL
   Sidebar nav (sticky on desktop, horizontal on mobile) + welcome header
   with avatar + light-theme panels using the existing checkout-section
   card system. Overrides the legacy dark-theme .dash-* rules in the inline
   style block on account.html (now stripped).
   ════════════════════════════════════════════════════════════════════════ */

/* ─── Welcome header ─── */
html body .dash-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    padding: 22px 24px;
    background: linear-gradient(180deg, rgba(20,184,166,0.05), rgba(20,184,166,0.01));
    border: 1px solid rgba(20,184,166,0.20);
    border-radius: 16px;
    margin-bottom: 22px;
}
html body .dash-greeting {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
html body .dash-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(180deg, #2dd4bf 0%, #14b8a6 55%, #0d9488 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Orbitron', sans-serif;
    font-weight: 800;
    font-size: 1.4rem;
    flex-shrink: 0;
    box-shadow: 0 6px 14px rgba(13,148,136,0.30);
    border: 2px solid rgba(255,255,255,0.5);
}
html body .dash-greeting-text { min-width: 0; }
html body .dash-greeting-text h2 {
    font-family: 'Orbitron', sans-serif !important;
    color: var(--text) !important;
    margin: 0 0 3px 0 !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    line-height: 1.2;
}
html body .dash-greeting-text h2 span { color: var(--accent); }
html body .dash-greeting-text p {
    color: var(--text-muted);
    margin: 0;
    font-size: 0.86rem;
    font-family: 'JetBrains Mono', monospace;
}
html body .dash-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
html body .dash-action-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #fff;
    border: 1px solid rgba(20,184,166,0.30);
    color: var(--accent);
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}
html body .dash-action-pill:hover {
    background: rgba(20,184,166,0.08);
    border-color: var(--accent);
}
html body .dash-logout {
    background: transparent;
    border: 1px solid rgba(239,68,68,0.30);
    color: #dc2626;
    padding: 8px 14px;
    border-radius: 999px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.82rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s ease, color 0.15s ease;
}
html body .dash-logout:hover {
    background: rgba(239,68,68,0.08);
    color: #b91c1c;
}

/* ─── Two-column body ─── */
html body .dash-body {
    display: grid;
    grid-template-columns: 270px 1fr;
    gap: 26px;
    align-items: start;
}
@media (max-width: 860px) {
    html body .dash-body {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

/* ─── Sidebar nav ─── */
html body .dash-tabs {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: 14px;
    padding: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
@media (min-width: 861px) {
    html body .dash-tabs {
        position: sticky;
        top: 24px;
    }
}
@media (max-width: 860px) {
    html body .dash-tabs {
        flex-direction: row;
        overflow-x: auto;
        padding: 6px;
        gap: 4px;
        -webkit-overflow-scrolling: touch;
    }
    html body .dash-tabs::-webkit-scrollbar { display: none; }
}

html body .dash-tab {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    background: transparent;
    border: none;
    color: var(--text);
    font-family: 'Inter', sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 10px;
    text-align: left;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
    text-decoration: none;
}
html body .dash-tab i:first-child {
    color: var(--text-muted);
    font-size: 0.92rem;
    width: 18px;
    text-align: center;
    transition: color 0.15s ease;
}
html body .dash-tab:hover {
    background: rgba(20,184,166,0.06);
    color: var(--accent);
}
html body .dash-tab:hover i:first-child { color: var(--accent); }
html body .dash-tab.active {
    background: rgba(20,184,166,0.10);
    color: var(--accent);
}
html body .dash-tab.active i:first-child { color: var(--accent); }
html body .dash-tab .dash-tab-ext {
    margin-left: auto;
    font-size: 0.65rem;
    opacity: 0.55;
}
@media (max-width: 860px) {
    html body .dash-tab {
        padding: 10px 14px;
        flex-shrink: 0;
    }
    /* On mobile the label text shrinks, icon stays */
    html body .dash-tab .dash-tab-ext { display: none; }
}

/* ─── Content panels ─── */
html body .dash-content { min-width: 0; }
html body .dash-panel { display: none; }
html body .dash-panel.active { display: block; }

html body .dash-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
html body .dash-panel-header h3 {
    font-family: 'Orbitron', sans-serif !important;
    color: var(--text) !important;
    font-size: 1.05rem !important;
    margin: 0 !important;
}
html body .dash-panel-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--accent);
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
}
html body .dash-panel-action:hover { text-decoration: underline; }

/* ─── Empty states ─── */
html body .dash-empty {
    text-align: center;
    background: #fff;
    border: 1px dashed var(--border-light);
    border-radius: 14px;
    padding: 48px 24px;
    color: var(--text-muted);
}
html body .dash-empty > i {
    font-size: 2.2rem;
    margin-bottom: 14px;
    color: var(--accent);
    opacity: 0.55;
    display: block;
}
html body .dash-empty .de-headline {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 6px 0;
}
html body .dash-empty .de-sub {
    font-size: 0.86rem;
    margin: 0 0 18px 0;
    line-height: 1.5;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
}

/* ─── Loyalty hero / stats / how-it-works — light-theme override ─── */
html body .dash-panel #panel-loyalty,
html body .dash-panel.active .loyalty-hero {
    /* containment for nested rules below */
}
html body .loyalty-hero {
    background: linear-gradient(135deg, rgba(245,158,11,0.10), rgba(251,191,36,0.04)) !important;
    border: 1px solid rgba(245,158,11,0.28) !important;
    border-radius: 16px !important;
    padding: 32px 24px !important;
    text-align: center !important;
    margin-bottom: 16px !important;
    position: relative;
    overflow: hidden;
}
html body .loyalty-hero::before {
    background: radial-gradient(circle, rgba(245,158,11,0.12), transparent 70%) !important;
}
html body .loyalty-hero-icon {
    color: #f59e0b !important;
    text-shadow: 0 0 18px rgba(245,158,11,0.40) !important;
    font-size: 2.2rem !important;
}
html body .loyalty-hero-label {
    color: #78350f !important;
    font-size: 0.78rem !important;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 8px !important;
    font-weight: 700 !important;
}
html body .loyalty-hero-value {
    font-family: 'Orbitron', sans-serif !important;
    font-size: 3.2rem !important;
    font-weight: 800 !important;
    color: #b45309 !important;
    line-height: 1 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) !important;
    margin-bottom: 8px !important;
    /* Earlier rule applies background-clip: text + text-fill-color: transparent,
       which makes the text render as the cyan gradient (overriding our color).
       Reset all of those so our solid amber color is what renders. */
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: initial !important;
    filter: none !important;
}
html body .loyalty-hero-cash {
    color: #78350f !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    /* Same reset for the cash subtitle */
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: initial !important;
    filter: none !important;
    font-family: 'Inter', sans-serif !important;
}
html body .loyalty-hero-cash strong {
    color: #92400e !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-weight: 800 !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: initial !important;
}

html body .loyalty-stats {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
}
@media (max-width: 540px) {
    html body .loyalty-stats { grid-template-columns: 1fr; }
}
html body .loyalty-stat {
    background: #fff !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 12px !important;
    padding: 16px !important;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
html body .loyalty-stat-label {
    font-size: 0.68rem !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted) !important;
    margin-bottom: 6px !important;
    font-weight: 700;
}
html body .loyalty-stat-value {
    font-family: 'Orbitron', sans-serif !important;
    font-weight: 800 !important;
    color: var(--accent) !important;
    font-size: 1.15rem !important;
}

html body .loyalty-how h3 {
    color: var(--text) !important;
    font-family: 'Orbitron', sans-serif !important;
    font-size: 1rem !important;
    margin: 14px 0 12px !important;
}
html body .loyalty-how-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 12px !important;
}
html body .loyalty-how-item {
    background: #fff !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 12px !important;
    padding: 18px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
html body .loyalty-how-item i {
    color: #f59e0b !important;
    font-size: 1.3rem !important;
    margin-bottom: 10px;
    display: block;
}
html body .loyalty-how-item strong {
    color: var(--text) !important;
    display: block;
    margin-bottom: 4px;
    font-size: 0.92rem;
}
html body .loyalty-how-item p {
    color: var(--text-muted);
    font-size: 0.83rem;
    line-height: 1.5;
    margin: 0;
}

/* ─── Order cards + address cards (light theme, replaces inline dark styles) ─── */
html body .dash-content .order-card {
    background: #fff !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 14px !important;
    padding: 18px 20px !important;
    margin-bottom: 12px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
html body .dash-content .order-card:hover {
    border-color: rgba(20,184,166,0.30);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
html body .dash-content .address-card {
    background: #fff !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 14px !important;
    padding: 16px 18px !important;
    margin-bottom: 10px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}

/* ─── Order card (new R468 markup) ─── */
html body .dash-orders-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
html body .dash-order-card {
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
html body .dash-order-card:hover {
    border-color: rgba(20,184,166,0.30);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
html body .dash-order-card .doc-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
html body .dash-order-card .doc-ref {
    font-family: 'Orbitron', sans-serif;
    font-weight: 800;
    color: var(--text);
    font-size: 1rem;
    letter-spacing: 0.06em;
}
html body .dash-order-card .doc-date {
    color: var(--text-muted);
    font-size: 0.78rem;
    margin-top: 2px;
}
html body .dash-order-card .dash-order-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px 4px 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid var(--border-light);
    white-space: nowrap;
    background: #fff;
}
html body .dash-order-card .dash-order-status i { font-size: 0.55rem; }
html body .dash-order-card .dash-order-status.status-awaiting {
    color: #b45309;
    background: rgba(245,158,11,0.10);
    border-color: rgba(245,158,11,0.30);
}
html body .dash-order-card .dash-order-status.status-awaiting i { color: #f59e0b; }
html body .dash-order-card .dash-order-status.status-paid {
    color: #0d9488;
    background: rgba(20,184,166,0.10);
    border-color: rgba(20,184,166,0.35);
}
html body .dash-order-card .dash-order-status.status-paid i { color: var(--accent); }
html body .dash-order-card .dash-order-status.status-shipped {
    color: #4338ca;
    background: rgba(99,102,241,0.10);
    border-color: rgba(99,102,241,0.30);
}
html body .dash-order-card .dash-order-status.status-shipped i { color: #6366f1; }
html body .dash-order-card .doc-items {
    padding: 10px 0;
    border-top: 1px dashed rgba(0,0,0,0.08);
    border-bottom: 1px dashed rgba(0,0,0,0.08);
    margin-bottom: 12px;
}
html body .dash-order-card .doc-items-count {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 4px;
}
html body .dash-order-card .doc-items-count i {
    color: var(--accent);
    font-size: 0.78rem;
}
html body .dash-order-card .doc-items-line {
    color: var(--text);
    font-size: 0.86rem;
    line-height: 1.5;
}
html body .dash-order-card .doc-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
html body .dash-order-card .doc-total {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
html body .dash-order-card .doc-total-label {
    font-size: 0.78rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}
html body .dash-order-card .doc-total-value {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800;
    color: var(--accent);
    font-size: 1.05rem;
}
html body .dash-order-card .doc-track-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: rgba(20,184,166,0.08);
    color: var(--accent);
    border: 1px solid rgba(20,184,166,0.30);
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}
html body .dash-order-card .doc-track-link:hover {
    background: rgba(20,184,166,0.16);
    border-color: var(--accent);
}
html body .dash-order-card .doc-track-link i:first-child { font-size: 0.78rem; }
html body .dash-order-card .doc-track-link i:last-child { font-size: 0.62rem; }

/* ─── Address card (new R468 markup) ─── */
html body .dash-addresses-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
}
html body .dash-address-card {
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: 14px;
    padding: 16px 18px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
html body .dash-address-card .dac-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(20,184,166,0.14), rgba(20,184,166,0.04));
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
html body .dash-address-card .dac-body { min-width: 0; flex: 1; }
html body .dash-address-card .dac-name {
    color: var(--text);
    font-weight: 700;
    margin-bottom: 4px;
    font-size: 0.92rem;
}
html body .dash-address-card .dac-line {
    color: var(--text);
    font-size: 0.86rem;
    line-height: 1.5;
}
html body .dash-address-card .dac-country {
    color: var(--text-muted);
    font-size: 0.78rem;
}
html body .dash-address-card .dac-phone {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed rgba(0,0,0,0.08);
    color: var(--text-muted);
    font-size: 0.82rem;
    display: flex;
    align-items: center;
    gap: 6px;
}
html body .dash-address-card .dac-phone i {
    color: var(--accent);
    font-size: 0.72rem;
}


/* ════════════════════════════════════════════════════════════════════════
   R469 — PRODUCT PAGE IMAGE: match the product card's resting + hover
   filter exactly. Each product-{id}.html has an inline <style> block with
   heavier dark-theme drop-shadows on the .pp-image-wrap img. These rules
   override via higher specificity (html body .pp-image-wrap img) and
   !important so the product page vial gets the SAME slight brightness +
   teal/emerald glow halos that the product cards do.
   ════════════════════════════════════════════════════════════════════════ */

/* Resting filter — soft grounding + tiny contrast/saturation pop (mirrors
   the .product-image img rule). */
html body .pp-image-wrap img {
    filter: var(--cy-vial-shift)
            contrast(1.05)
            saturate(1.06)
            drop-shadow(0 12px 22px rgba(20, 30, 60, 0.20))
            drop-shadow(0 3px 8px rgba(20, 184, 166, 0.16))
            !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                filter 0.4s ease !important;
}

/* Hover filter — matches the product card hover exactly:
   whisper brightness lift, slight saturate, soft teal/emerald glow halos +
   subtle ground shadow. NO hue-rotate (vials are already green at source).
   Transform left to the existing inline rule (keeps the page's scale-zoom
   behavior intact); we only override the filter chain. */
html body .pp-image-wrap:hover img {
    filter: brightness(1.008)
            saturate(1.18)
            drop-shadow(0 0 32px rgba(45, 196, 214, 0.42))
            drop-shadow(0 0 16px rgba(130, 214, 226, 0.30))
            drop-shadow(0 10px 22px rgba(0, 0, 0, 0.38))
            !important;
}

/* COA mode shouldn't get any of these effects — the document needs to
   read true. The existing .pp-image-wrap.is-coa img { filter:none } rule
   in each product file handles this; we just preserve that override here. */
html body .pp-image-wrap.is-coa img {
    filter: none !important;
}





/* Delivery estimate row */
html body .review-delivery {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: #fafafa;
    border: 1px solid var(--border-light);
    border-radius: 10px;
    margin-bottom: 14px;
}
html body .review-delivery > i {
    color: var(--accent);
    font-size: 1.1rem;
}
html body .review-delivery .rd-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    font-weight: 600;
}
html body .review-delivery .rd-date {
    font-weight: 700;
    color: var(--text);
    font-size: 0.92rem;
}

/* CTA */
html body .review-cta { margin: 4px 0 8px 0; }

/* Subtle "Back" link */
html body .review-back-link {
    width: 100%;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    padding: 6px 0;
    margin-bottom: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: color 0.15s ease;
}
html body .review-back-link:hover { color: var(--accent); }

/* Compact trust strip inside summary card */
html body .review-trust-mini {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    justify-content: center;
    padding-top: 12px;
    border-top: 1px dashed rgba(0,0,0,0.08);
    font-size: 0.72rem;
    color: var(--text-muted);
}
html body .review-trust-mini > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
html body .review-trust-mini i { color: var(--accent); font-size: 0.78rem; }


/* ════════════════════════════════════════════════════════════════════════
   R463 — CHECKOUT STEP 3 (PAYMENT) OVERHAUL
   Replaces the dark-theme inline-styled payment screen with a light-theme
   layout: prominent total hero, 4-tile selectable method picker, sectioned
   per-method panes, neutral light-theme network warnings and security
   notes consistent with Steps 1+2.
   ════════════════════════════════════════════════════════════════════════ */

/* Total hero — pay amount + brand-safe trust line */
html body .payment-hero {
    background: linear-gradient(180deg, rgba(20,184,166,0.06), rgba(20,184,166,0.02));
    border: 1px solid rgba(20,184,166,0.20);
    border-radius: 16px;
    padding: 22px 24px 18px;
    text-align: center;
    margin: 0 0 20px 0;
}
html body .payment-hero .ph-label {
    font-size: 0.78rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.10em;
    font-weight: 700;
    margin-bottom: 4px;
}
html body .payment-hero .ph-amount {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(2rem, 5vw, 2.6rem);
    color: var(--text);
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 4px 0;
}
html body .payment-hero .ph-note {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 2px;
}
html body .payment-hero .ph-trust {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.74rem;
    color: var(--text-muted);
}
html body .payment-hero .ph-trust i { color: var(--accent); margin-right: 4px; }
html body .payment-hero .ph-trust-sep { color: var(--border); }

/* Method-picker grid */
html body .payment-method-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
@media (max-width: 560px) {
    html body .payment-method-grid { grid-template-columns: 1fr; }
}

html body .payment-method-card {
    /* override the legacy inline-style payment-method-tab styles */
    background: #fff !important;
    border: 1.5px solid var(--border-light) !important;
    border-radius: 14px !important;
    padding: 14px 16px !important;
    color: var(--text) !important;
    cursor: pointer !important;
    font-family: 'Inter', sans-serif !important;
    text-align: left !important;
    border-bottom: 1.5px solid var(--border-light) !important;
    display: grid !important;
    grid-template-columns: 38px 1fr auto !important;
    align-items: center !important;
    gap: 12px !important;
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.12s ease !important;
}
html body .payment-method-card:hover {
    border-color: rgba(20,184,166,0.50) !important;
    background: rgba(20,184,166,0.04) !important;
    transform: translateY(-1px) !important;
}
html body .payment-method-card.active {
    border-color: var(--accent) !important;
    background: rgba(20,184,166,0.08) !important;
    box-shadow: 0 0 0 3px rgba(20,184,166,0.10) !important;
}
html body .payment-method-card .pmc-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(20,184,166,0.12), rgba(20,184,166,0.04));
    color: var(--accent);
    font-size: 1.05rem;
}
html body .payment-method-card .pmc-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
html body .payment-method-card .pmc-name {
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--text);
}
html body .payment-method-card .pmc-sub {
    font-size: 0.72rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
html body .payment-method-card .pmc-tag {
    font-family: 'Inter', sans-serif;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    background: rgba(0,0,0,0.04);
    border-radius: 999px;
    padding: 4px 9px;
    white-space: nowrap;
}
html body .payment-method-card .pmc-tag-fast {
    background: rgba(20,184,166,0.12);
    color: var(--accent);
}
html body .payment-method-card .pmc-tag-private {
    background: rgba(99,102,241,0.10);
    color: #6366f1;
}

/* Empty-state prompt until method picked */
html body .payment-select-prompt {
    text-align: center;
    padding: 28px 16px;
    color: var(--text-muted);
    border: 1px dashed var(--border-light);
    border-radius: 14px;
    margin-top: 14px;
}
html body .payment-select-prompt i {
    font-size: 1.4rem;
    margin-bottom: 8px;
    display: block;
    color: var(--accent);
}
html body .payment-select-prompt p { margin: 0; font-size: 0.9rem; }

/* Payment-pane section overrides — the pane card */
html body .payment-pane-section {
    margin: 14px 0 0 0;
}
html body .payment-pane-section .pp-intro {
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.55;
    margin: 0 0 14px 0;
}

/* Coloured icon variants for the section icons */
html body .checkout-section-header .cs-icon.cs-icon-paypal {
    background: linear-gradient(180deg, rgba(0,48,135,0.10), rgba(0,156,222,0.04));
    color: #003087;
}
html body .checkout-section-header .cs-icon.cs-icon-venmo {
    background: linear-gradient(180deg, rgba(61,149,206,0.10), rgba(0,140,255,0.04));
    color: #3D95CE;
}
html body .checkout-section-header .cs-icon.cs-icon-card {
    background: linear-gradient(180deg, rgba(16,185,129,0.10), rgba(16,185,129,0.04));
    color: #10b981;
}

/* Network warning — recolored for light theme (was dark-bg amber on dark) */
html body .payment-network-warning {
    background: rgba(245,158,11,0.08);
    border: 1px solid rgba(245,158,11,0.30);
    border-radius: 10px;
    padding: 10px 14px;
    margin: 10px 0;
    font-size: 0.8rem;
    color: #92400e;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.55;
}
html body .payment-network-warning > i {
    color: #d97706;
    margin-top: 2px;
    flex-shrink: 0;
}
html body .payment-network-warning strong { color: #78350f; }

/* Security note — recolored for light */
html body .payment-pane-section .payment-security-note,
html body .payment-info .payment-security-note {
    background: rgba(20,184,166,0.06);
    border: 1px solid rgba(20,184,166,0.20);
    border-radius: 10px;
    padding: 10px 14px;
    color: var(--text);
    font-size: 0.8rem;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.55;
    margin: 10px 0;
}
html body .payment-pane-section .payment-security-note > i { color: var(--accent); margin-top: 2px; }

/* PayPal / Venmo big pay button */
html body .pp-method-pay-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    color: #fff !important;
    text-decoration: none !important;
    padding: 14px 18px !important;
    border-radius: 12px !important;
    margin: 4px 0 14px 0 !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 6px 14px rgba(0,0,0,0.08);
    transition: transform 0.15s ease, box-shadow 0.18s ease;
}
html body .pp-method-pay-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(0,0,0,0.12);
}
html body .pp-method-pay-btn strong { margin-left: auto; }
html body .pp-method-paypal {
    background: linear-gradient(135deg, #003087, #009cde) !important;
}
html body .pp-method-venmo {
    background: linear-gradient(135deg, #3D95CE, #008CFF) !important;
}
html body .pp-method-pay-btn > i:first-child { font-size: 1.2rem; }

/* Order-ref box for PayPal/Venmo (the EL-XXXX… display) */
html body .pp-order-ref-box {
    background: rgba(20,184,166,0.06);
    border: 1px solid rgba(20,184,166,0.30);
    border-radius: 12px;
    padding: 14px 16px;
    margin: 6px 0 10px 0;
}
html body .pp-order-ref-box .ppor-label {
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 8px;
    text-align: center;
    font-weight: 600;
}
html body .pp-order-ref-box .ppor-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
html body .pp-order-ref-box .ppor-ref {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--accent);
    letter-spacing: 0.10em;
}
html body .pp-order-ref-box .ppor-copy {
    background: #fff;
    border: 1px solid rgba(20,184,166,0.30);
    color: var(--accent);
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s ease, border-color 0.15s ease;
}
html body .pp-order-ref-box .ppor-copy:hover {
    background: rgba(20,184,166,0.08);
    border-color: var(--accent);
}

/* "Already paid?" outline button */
html body .pp-paid-btn {
    margin-top: 8px;
    font-size: 0.88rem;
}

/* Card method extras */
html body .pp-cards-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 4px 0 12px;
    flex-wrap: wrap;
}
html body .pp-cards-row .pp-cards-label {
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 600;
}
html body .pp-cards-row i { font-size: 1.7rem; }
html body .payment-kyc-banner {
    background: rgba(99,102,241,0.06);
    border: 1px solid rgba(99,102,241,0.22);
    border-radius: 10px;
    padding: 12px 14px;
    margin: 10px 0;
    font-size: 0.82rem;
    color: var(--text);
    line-height: 1.55;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
html body .payment-kyc-banner > i {
    color: #6366f1;
    margin-top: 3px;
    flex-shrink: 0;
    font-size: 0.95rem;
}
html body .payment-kyc-banner strong { color: var(--text); }
html body .pp-postnote {
    font-size: 0.74rem;
    color: var(--text-muted);
    text-align: center;
    margin-top: 10px;
    line-height: 1.5;
}
html body .crypto-net { font-size: 0.7em; opacity: 0.75; font-weight: 600; }


/* ════════════════════════════════════════════════════════════════════════
   R463 — CHECKOUT STEP 4 (CONFIRMATION) OVERHAUL
   ════════════════════════════════════════════════════════════════════════ */

html body .confirm-hero {
    text-align: center;
    padding: 22px 16px 14px;
    margin-bottom: 22px;
    background: linear-gradient(180deg, rgba(20,184,166,0.08), rgba(20,184,166,0.02));
    border: 1px solid rgba(20,184,166,0.22);
    border-radius: 18px;
}
html body .confirm-hero .confirmation-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(180deg, #10b981, #0d9488);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin: 0 auto 14px;
    box-shadow: 0 8px 22px rgba(16,185,129,0.30);
}
html body .confirm-hero h2 {
    font-family: 'Orbitron', sans-serif !important;
    font-size: clamp(1.4rem, 3.4vw, 1.8rem) !important;
    color: var(--text) !important;
    margin: 0 0 8px 0 !important;
}
html body .confirm-hero .confirm-hero-sub {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0 auto 14px;
    max-width: 580px;
}
html body .confirm-hero .confirm-hero-sub strong { color: var(--text); }

/* Order-ref pill */
html body .confirm-ref-pill {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid rgba(20,184,166,0.30);
    border-radius: 999px;
    padding: 8px 8px 8px 18px;
}
html body .confirm-ref-pill .cr-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
}
html body .confirm-ref-pill .cr-value {
    font-family: 'Orbitron', sans-serif;
    font-weight: 800;
    color: var(--accent);
    letter-spacing: 0.08em;
}
html body .confirm-ref-pill .cr-copy {
    background: rgba(20,184,166,0.10);
    border: 1px solid rgba(20,184,166,0.25);
    color: var(--accent);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}
html body .confirm-ref-pill .cr-copy:hover { background: rgba(20,184,166,0.20); }

/* Two-column recap (items + shipping) */
html body .confirm-recap-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 16px;
    margin-bottom: 22px;
}
@media (max-width: 760px) {
    html body .confirm-recap-grid { grid-template-columns: 1fr; }
}
html body .confirm-recap-section { margin-bottom: 0; }

html body .confirm-items-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
html body .confirm-items-list .ci-row {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
    background: #fafafa;
    border: 1px solid var(--border-light);
    border-radius: 10px;
    font-size: 0.86rem;
}
html body .confirm-items-list .ci-img {
    width: 44px; height: 44px;
    border-radius: 8px;
    background: linear-gradient(180deg, #e4f0eb 0%, #c5dec1 100%);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}
html body .confirm-items-list .ci-img img {
    max-width: 75%; max-height: 85%;
    object-fit: contain;
}
html body .confirm-items-list .ci-name {
    font-weight: 700;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
html body .confirm-items-list .ci-qty {
    font-size: 0.74rem;
    color: var(--text-muted);
    margin-top: 1px;
}
html body .confirm-items-list .ci-price {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: var(--text);
}

/* Mini totals under the line items */
html body .confirm-mini-totals {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed rgba(0,0,0,0.10);
}
html body .confirm-mini-totals .cmt-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.84rem;
    padding: 2px 0;
    color: var(--text-muted);
}
html body .confirm-mini-totals .cmt-row.cmt-total {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text);
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px solid rgba(0,0,0,0.10);
}
html body .confirm-mini-totals .cmt-row.cmt-total span:last-child {
    color: var(--accent);
    font-family: 'JetBrains Mono', monospace;
}

/* Refer-a-friend banner */








/* Timeline polish */
html body .confirm-delivery-timeline .confirm-timeline-step.active .confirm-timeline-dot {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(20,184,166,0.18);
}
html body .confirm-delivery-timeline .confirm-timeline-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
}

html body .confirm-retry-link { display: block; margin: 12px auto; max-width: 360px; }
html body .confirm-pay-warn {
    font-size: 0.78rem;
    color: #d97706;
    text-align: center;
    margin-top: 4px;
}


/* ════════════════════════════════════════════════════════════════════════
   R463 — CHECKOUT MOBILE-POLISH PASS (Steps 1 → 4)
   Tightens padding, kills the sticky right-column at narrow widths so the
   summary follows the content naturally, ensures touch targets ≥ 44px, and
   resizes the address/recap/refer chrome so nothing wraps awkwardly.
   ════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* Tighten the page container side padding so cards don't shrink to a sliver */
    html body .checkout-page-container { padding: 0 12px; }
    html body .checkout-page .checkout-step-content { padding: 22px 16px; }

    /* Step 1: keep section cards compact on phones */
    html body .checkout-section { padding: 16px 14px 14px; border-radius: 12px; }
    html body .checkout-section-header h3 { font-size: 0.88rem; }
    html body .checkout-section-header .cs-icon {
        width: 30px; height: 30px; font-size: 0.85rem;
    }

    /* Section badge can clip — hide on small phones */
    html body .checkout-section-header .cs-badge { display: none; }

    /* Step 2: kill sticky right column (single-col layout) */
    

    /* Review item: keep image small */
    html body .review-item { grid-template-columns: 48px 1fr auto; gap: 10px; padding: 8px 10px; }
    html body .review-item-img { width: 48px; height: 48px; }
    html body .review-item-name { font-size: 0.88rem; }

    /* Edit pill tightens */
    html body .cs-edit-link { padding: 3px 10px; font-size: 0.7rem; }

    /* Promo input + Apply button: full-width on phones */
    html body .review-promo { grid-template-columns: 1fr; }
    html body .review-promo button { padding: 12px; }

    /* Step 3: trust line wraps; allow sep to hide */
    html body .payment-hero { padding: 18px 16px 14px; border-radius: 14px; }
    html body .payment-hero .ph-trust { font-size: 0.7rem; gap: 6px; }
    html body .payment-hero .ph-trust-sep { display: none; }

    /* Crypto button grid: 2-column */
    html body .crypto-options { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }

    /* PayPal/Venmo: stack the amount under the button label so it doesn't overflow */
    html body .pp-method-pay-btn { flex-wrap: wrap; padding: 12px 14px !important; font-size: 0.92rem !important; }
    html body .pp-method-pay-btn strong { margin-left: 0 !important; }

    /* Order-ref pill: ref + copy stack vertically on small phones */
    html body .pp-order-ref-box .ppor-ref { font-size: 1.1rem; }

    /* Step 4: hero icon shrinks; ref pill wraps */
    html body .confirm-hero { padding: 18px 14px 14px; border-radius: 14px; }
    html body .confirm-hero .confirmation-icon { width: 54px; height: 54px; font-size: 1.5rem; }
    html body .confirm-ref-pill {
        flex-wrap: wrap;
        gap: 8px;
        padding: 8px 12px;
        max-width: 100%;
    }
    html body .confirm-ref-pill .cr-value { font-size: 0.92rem; }

    /* Confirmation actions stack instead of side-by-side */
    html body .confirm-actions-grid { display: flex; flex-direction: column; gap: 10px; }

    /* Confirmation items list rows: tighter padding */
    html body .confirm-items-list .ci-row { padding: 6px 8px; font-size: 0.82rem; }

    /* Refer banner already collapses at <560 but make sure CTA is full-width */
    
}

@media (max-width: 480px) {
    /* Step 1: collapse inline-summary header chips so total stays on one line */
    html body .checkout-inline-summary .cis-count { display: none; }

    /* Step 1: edit link in section header — icon only */
    html body .cs-edit-link span { display: none; }

    /* Step 4: hero text size */
    html body .confirm-hero h2 { font-size: 1.2rem !important; }
    html body .confirm-hero .confirm-hero-sub { font-size: 0.85rem; }
}

/* Touch-target safety: every clickable element in checkout is at least 44px tall */
@media (pointer: coarse) {
    html body .checkout-step-content button,
    html body .checkout-step-content .cs-edit-link,
    html body .checkout-step-content .checkout-legal-summary,
    html body .checkout-step-content .review-promo button {
        min-height: 44px;
    }
}


/* ════════════════════════════════════════════════════════════════════════
   R464 — TWO-PAGE CHECKOUT (Information+Review merged → Payment)
   The dedicated Review step (Step 2) was removed. Step 1 now hosts the
   form on the left and a sticky live-summary card on the right. Step 3
   (Payment) also goes two-column with a compact recap on the right.
   Container widens to 1300px on Step 1 and 1100px on Step 3.
   ════════════════════════════════════════════════════════════════════════ */

/* Widen the container on the two grid steps */
html body .checkout-page-container:has(#checkout-step-1:not([style*="display:none"])) {
    max-width: 1300px !important;
}
html body .checkout-page-container:has(#checkout-step-3:not([style*="display:none"])) {
    max-width: 1100px !important;
}

/* ─── Step 1 grid ─── */
html body .checkout-info-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 22px;
    align-items: start;
}
@media (max-width: 900px) {
    html body .checkout-info-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

html body .checkout-info-left,
html body .checkout-info-right { min-width: 0; }

/* On mobile, summary moves ABOVE the form so the customer sees what
   they're buying first. Use grid order. */
@media (max-width: 900px) {
    html body .checkout-info-right { order: -1; }
}

/* Right column sticks while you scroll the left form on desktop */
@media (min-width: 901px) {
    html body .checkout-info-right {
        position: sticky;
        top: 24px;
    }
}

/* The CTA reassurance inside the right-rail summary card */
html body .checkout-info-right .checkout-cta-reassurance {
    text-align: center;
    margin: 8px 0 14px 0;
    font-size: 0.78rem;
}

/* ─── Step 3 grid ─── */
html body .checkout-payment-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 22px;
    align-items: start;
}
@media (max-width: 900px) {
    html body .checkout-payment-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    html body .checkout-payment-right { order: -1; }
}
html body .checkout-payment-left,
html body .checkout-payment-right { min-width: 0; }
@media (min-width: 901px) {
    html body .checkout-payment-right {
        position: sticky;
        top: 24px;
    }
}

/* ─── Step 3 payment recap card ─── */
html body .payment-recap-card { padding-bottom: 18px; }

html body .payment-recap-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 4px 0 12px 0;
    border-bottom: 1px dashed rgba(0,0,0,0.10);
    margin-bottom: 12px;
}
html body .payment-recap-items .pri-row {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    gap: 10px;
    align-items: center;
    font-size: 0.84rem;
}
html body .payment-recap-items .pri-img {
    width: 36px; height: 36px;
    border-radius: 8px;
    background: linear-gradient(180deg, #e4f0eb 0%, #c5dec1 100%);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}
html body .payment-recap-items .pri-img img {
    max-width: 78%; max-height: 88%;
    object-fit: contain;
}
html body .payment-recap-items .pri-name {
    color: var(--text);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
html body .payment-recap-items .pri-qty {
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.82em;
    margin-left: 4px;
}
html body .payment-recap-items .pri-price {
    font-family: 'JetBrains Mono', monospace;
    color: var(--text);
    font-weight: 700;
}

html body .payment-recap-totals {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 12px;
    border-bottom: 1px dashed rgba(0,0,0,0.10);
    margin-bottom: 12px;
}
html body .payment-recap-totals .prt-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.86rem;
    color: var(--text-muted);
    padding: 2px 0;
}
html body .payment-recap-totals .prt-row.prt-discount {
    color: #16a34a;
    font-weight: 600;
}
html body .payment-recap-totals .prt-row.prt-total {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid rgba(0,0,0,0.08);
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text);
}
html body .payment-recap-totals .prt-row.prt-total span:last-child {
    color: var(--accent);
    font-family: 'JetBrains Mono', monospace;
}

html body .payment-recap-addrs {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px dashed rgba(0,0,0,0.10);
}
html body .payment-recap-addrs .pra-block { font-size: 0.82rem; }
html body .payment-recap-addrs .pra-label {
    color: var(--text-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    gap: 6px;
}
html body .payment-recap-addrs .pra-label i {
    color: var(--accent);
    font-size: 0.78rem;
}
html body .payment-recap-addrs .pra-value {
    color: var(--text);
    line-height: 1.45;
}

html body .checkout-section-note i {
    color: var(--accent);
    margin-top: 2px;
    font-size: 0.82rem;
    flex-shrink: 0;
}

/* Optional label modifier */
html body .label-optional {
    color: var(--text-muted);
    font-weight: 400;
    font-size: 0.78em;
}

/* Billing-address toggle — clean checkbox row, slightly different look so
   it reads as a control, not just another opt-in. */





/* R465: inline "Ship to a different address" checkbox that lives at the
   bottom of the Billing card. Smaller, lighter than the bigger toggle
   above — reads as a sub-option, not a top-level section. */
html body .checkout-ship-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0 0 0;
    margin: 6px 0 0 0;
    border-top: 1px dashed rgba(0,0,0,0.10);
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text);
}
html body .checkout-ship-toggle > span:last-child { font-weight: 600; }

/* Expanded shipping fields appear INSIDE the billing card. Subtle divider
   labeled "Shipping Address" separates them from the billing rows above. */
html body .ship-fields-inline { padding-top: 12px; }
html body .ship-fields-inline .ship-fields-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 14px 0;
    color: var(--text-muted);
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
html body .ship-fields-inline .ship-fields-divider::before,
html body .ship-fields-inline .ship-fields-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-light);
}
html body .ship-fields-inline .ship-fields-divider > span {
    color: var(--accent);
    padding: 0 4px;
    white-space: nowrap;
}

/* Reassurance line under the Continue button */
html body .checkout-cta-reassurance {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 12px 0 0 0;
    font-size: 0.78rem;
    color: var(--text-muted);
    text-align: center;
}
html body .checkout-cta-reassurance i {
    color: var(--accent);
    font-size: 0.78rem;
}

/* Compact mobile pass */
@media (max-width: 640px) {
    html body .checkout-trust-strip {
        padding: 10px 12px;
        gap: 6px 10px;
        justify-content: flex-start;
    }
    html body .checkout-trust-item { font-size: 0.72rem; }
    html body .checkout-section { padding: 18px 16px 16px; border-radius: 12px; }
    html body .checkout-section-header h3 { font-size: 0.88rem; }
    html body .checkout-section-header .cs-badge { display: none; }
    
}

/* ════════════════════════════════════════════════════════════════
   R476 — Protocol page intensity tier color-coding. The three tier
   cards (Introductory / Standard / Advanced) previously all inherited
   the same goal-color, so they looked identical (all red on the
   "Tissue Repair" goal). Now each intensity level has its own visual
   identity that scales sensibly from "gentle entry" → "balanced" →
   "advanced": green → amber → purple.
   ════════════════════════════════════════════════════════════════ */

/* Top accent stripe on the card itself */






/* Override the goal-color tinted hover so it matches the tier */




/* Tier badge — override the goal-color background with tier-specific gradient */
html body .tier-badge.tier-introductory {
    background: linear-gradient(180deg, #10b981 0%, #059669 100%) !important;
    color: #ffffff !important;
    box-shadow:
        0 2px 6px rgba(16, 185, 129, 0.28),
        0 1px 0 rgba(255, 255, 255, 0.30) inset;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}
html body .tier-badge.tier-standard {
    background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%) !important;
    color: #ffffff !important;
    box-shadow:
        0 2px 6px rgba(245, 158, 11, 0.28),
        0 1px 0 rgba(255, 255, 255, 0.30) inset;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}
html body .tier-badge.tier-advanced {
    background: linear-gradient(180deg, #8b5cf6 0%, #7c3aed 100%) !important;
    color: #ffffff !important;
    box-shadow:
        0 2px 6px rgba(139, 92, 246, 0.28),
        0 1px 0 rgba(255, 255, 255, 0.30) inset;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}

/* Soft tint on the tier name to subtly carry the color through */




/* Result page (after tier selection) — accent badge using the same scheme */




/* ════════════════════════════════════════════════════════════════
   R477 — Protocol result-card light-theme overhaul. The original
   styles used dark-theme tokens (rgba(255,255,255,0.03) bg,
   rgba(0,0,0,0.25) inner cards) which rendered as opaque grey blocks
   on the light-theme page. This block rewrites the meta strip,
   rationale, synergy, and item cards with a clean white-card system
   that matches the rest of the site (checkout, account, order
   tracking, calculator).
   ════════════════════════════════════════════════════════════════ */




/* Meta strip (DURATION / PEPTIDES / TOTAL COST) — white cards with teal accent */






/* WHY THIS STACK & SYNERGY cards — soft teal-tinted white */





/* "Protocol Components" section title */


/* Item rows — clean light card */









/* Mobile: meta-row stacks */


/* ════════════════════════════════════════════════════════════════
   R478 — Research Stack Builder comprehensive polish. Refines the
   light-theme card system across all three steps (goal grid, tier
   grid, result page) plus the new literature-reference visual
   language: per-item spec pills, mechanism-card icons, reference
   disclaimer band, polished CTAs, stronger RUO banner, polished
   step nav. Also adds styles for the new elements added in the
   result-card overhaul (area pill, item num, spec pills, item
   actions, items disclaimer, bundle alert icon/body, share button
   copied state).
   ════════════════════════════════════════════════════════════════ */

/* Page background — subtle radial wash */
html body .protocol-page {
    background:
        radial-gradient(900px 500px at 50% -5%, rgba(20, 184, 166, 0.05), transparent 60%),
        radial-gradient(700px 420px at 90% 30%, rgba(139, 92, 246, 0.04), transparent 60%),
        var(--bg) !important;
}

/* Hero badge polished */
html body .protocol-hero-section .section-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(180deg, rgba(20,184,166,0.16), rgba(20,184,166,0.06)) !important;
    border: 1px solid rgba(20, 184, 166, 0.32) !important;
    color: #0d9488 !important;
    padding: 6px 14px !important;
    border-radius: 999px !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    margin-bottom: 18px !important;
}
html body .protocol-hero-section .section-badge i { font-size: 0.8rem; }
html body .protocol-hero-section .section-title {
    color: #0a0a0a !important;
    letter-spacing: -0.01em;
}
html body .protocol-hero-section .section-subtitle {
    color: #6b6b73 !important;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

/* RUO banner (replaces inline style) */




/* Steps nav */

html body #protocol-steps .protocol-step {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: #6b6b73;
    font-size: 0.82rem;
    font-weight: 700;
    transition: background 0.18s, border-color 0.18s, color 0.18s;
}
html body #protocol-steps .protocol-step .pstep-num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #f1f5f9;
    color: #6b6b73;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.74rem;
    font-weight: 800;
    transition: background 0.18s, color 0.18s;
}
html body #protocol-steps .protocol-step.active {
    background: linear-gradient(180deg, rgba(20,184,166,0.08), rgba(20,184,166,0.02));
    border-color: rgba(20, 184, 166, 0.45);
    color: #0d9488;
}
html body #protocol-steps .protocol-step.active .pstep-num {
    background: linear-gradient(180deg, #2dd4bf, #14b8a6);
    color: #ffffff;
}
html body #protocol-steps .protocol-step.done {
    background: rgba(20, 184, 166, 0.06);
    border-color: rgba(20, 184, 166, 0.22);
    color: #0d9488;
}
html body #protocol-steps .protocol-step.done .pstep-num {
    background: #0d9488;
    color: #ffffff;
}
html body #protocol-steps .protocol-step.done .pstep-num::before { content: "✓"; }
html body #protocol-steps .protocol-step.done .pstep-num { font-size: 0; }
html body #protocol-steps .protocol-step.done .pstep-num::before { font-size: 0.78rem; }


/* Step section titles */




/* Back button */



/* GOAL GRID — light theme cards */

html body .goal-card {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 16px !important;
    padding: 24px 22px 22px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(15, 23, 42, 0.04) !important;
    color: #0a0a0a !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
    position: relative;
    overflow: hidden;
}
html body .goal-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--goal-color, #14b8a6), transparent);
    opacity: 0;
    transition: opacity 0.18s ease;
}
html body .goal-card:hover {
    transform: translateY(-3px) !important;
    border-color: var(--goal-color, #14b8a6) !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08) !important;
}
html body .goal-card:hover::before { opacity: 0.65; }
html body .goal-card .goal-icon {
    width: 52px !important;
    height: 52px !important;
    border-radius: 12px !important;
    background: color-mix(in srgb, var(--goal-color, #14b8a6) 14%, white) !important;
    border: 1px solid color-mix(in srgb, var(--goal-color, #14b8a6) 35%, transparent) !important;
    color: var(--goal-color, #14b8a6) !important;
    font-size: 1.35rem !important;
    margin-bottom: 16px !important;
}
html body .goal-card .goal-name {
    color: #0a0a0a !important;
    font-size: 1.05rem !important;
}
html body .goal-card .goal-desc {
    color: #6b6b73 !important;
    font-size: 0.85rem !important;
    line-height: 1.55;
}
html body .goal-card .goal-tier-count {
    background: rgba(20, 184, 166, 0.06) !important;
    border: 1px solid rgba(20, 184, 166, 0.20) !important;
    color: #0d9488 !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
}

/* TIER GRID light theme */
html body .tier-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
    max-width: 1140px;
    margin: 0 auto;
}









/* RESULT CARD additions */









/* Items section */







/* Items list */


/* Item card (redesigned with numbered indicator + spec pills) */









/* Item action links */





/* Items disclaimer (below the list) */




/* Bundle alert (stack discount) */







/* CTA row */





html body .protocol-cta-row .protocol-cta-secondary.is-copied {
    background: #22c55e !important;
    color: #ffffff !important;
    border-color: #22c55e !important;
}

/* Bottom RUO disclaimer */




/* Responsive */
@media (max-width: 720px) {
    
    html body #protocol-steps .protocol-step { padding: 7px 11px; font-size: 0.72rem; }
    
    
    
    
    
    
    
}

/* Print stylesheet */
@media print {
    html body .protocol-back,
    html body .protocol-steps-nav,
    html body .protocol-ruo-banner,
    html body .protocol-cta-row,
    html body #site-top,
    html body #site-bottom { display: none !important; }
    html body .protocol-page { background: #ffffff !important; padding: 20px !important; }
    
    
}

/* ════════════════════════════════════════════════════════════════
   R479 — Compound Comparison full overhaul. Replaces the washed-out
   dark-theme styling with a clean light-theme card system that mirrors
   the Stack Builder. Includes new visual language for: polished
   picker dropdowns with numbered slots, refined quickstart preset
   cards with icon tiles, comprehensive compare-grid (CSS grid with
   1/2/3-col variants), polished product header cells with .jpeg
   thumbnails + remove X + action links, half-life bars indicator,
   typed cells (badge / code / paragraph / html), effect chips,
   stack-pair links, print stylesheet.

   Legal-safety also enforced: dose/frequency/route/onset rows are
   gone (handled in the data structure + render), and the bottom
   disclaimer is reinforced.
   ════════════════════════════════════════════════════════════════ */



html body .compare-hero-section .section-badge {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    background: linear-gradient(180deg, rgba(20,184,166,0.16), rgba(20,184,166,0.06)) !important;
    border: 1px solid rgba(20, 184, 166, 0.32) !important;
    color: #0d9488 !important;
    padding: 6px 14px !important;
    border-radius: 999px !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    margin-bottom: 18px !important;
}
html body .compare-hero-section .section-title {
    color: #0a0a0a !important;
    letter-spacing: -0.01em !important;
}
html body .compare-hero-section .section-subtitle {
    color: #6b6b73 !important;
    max-width: 720px !important;
    margin: 0 auto 16px !important;
}

/* ─── Picker bar (3 compound slots) ─── */











/* ─── Quickstart preset grid ─── */











/* ─── Results table ─── */










/* Header cells */





/* Product header cell */













/* Row labels (left column) */



/* Data cells */







/* Category badge inside .type-badge cells */


/* fallback: just render text as a tiny pill via inline span; simpler: style the raw text */


/* Effect chips */






/* Half-life indicator */









/* Actions row */





html body .compare-cta-secondary.is-copied {
    background: #22c55e !important;
    color: #ffffff !important;
    border-color: #22c55e !important;
}

/* Bottom disclaimer */




/* Responsive */



/* Print */


/* ════════════════════════════════════════════════════════════════
   R480 — Compare-page cascade-fight cleanup. Older R-blocks have
   `!important` rules that beat R479's higher specificity:
     • .compare-product-name { color: #fff } → invisible product names
     • .compare-picker { border-radius: 999px } → pill-shaped containers
     • .compare-picker select keeps an inherited `var(--cy-cyan)` color
       and `var(--cy-mono)` font that read like zigzags on white
     • .section-badge::before / ::after gets a 32px decorative line +
       bullet that look like a stray arrow before the icon
   This block re-asserts the R479 values with !important on every
   property that needs to win, plus targeted overrides for the badge
   pseudo-elements within compare-hero-section.
   ════════════════════════════════════════════════════════════════ */

/* Picker container: keep rounded card, NOT a pill */



/* Select inside picker: fight off cyberpunk styling */




/* Clear-X button on picker: keep small circle, not a pill */



/* Slot label: brand teal, plain (override cy-cyan + uppercase letter-spacing) */


/* Quickstart preset: not a pill */


/* PRODUCT-NAME readable on white (was color: #fff !important from R-block) */




/* Hero badge: kill the 32px decorative line + bullet pseudo-elements
   on the compare-hero-section so the badge reads as just icon + text */
html body .compare-hero-section .section-badge::before,
html body .compare-hero-section .section-badge::after {
    display: none !important;
    content: none !important;
    background: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    animation: none !important;
}

/* ────────────────────────────────────────────────────────────────
   R481 — Footer Contact column: phone on its own line. The global
   `html body .footer a { display: inline-block !important }` at
   ~line 23435 forced every footer anchor inline, putting the email
   and phone on the same line. Re-assert block layout for the
   direct anchor children of .footer-links (which doesn't affect
   the .footer-social icons, since those are nested one level deeper).
   ──────────────────────────────────────────────────────────────── */
html body .footer .footer-links > a {
    display: block !important;
}

/* ────────────────────────────────────────────────────────────────
   R482 — Compare page: bottom disclaimer + actions row alignment.
   The original rules force `max-width: 900px; text-align: center`
   on `.compare-disclaimer` and `justify-content: center` on
   `.compare-actions` — leaving them visibly narrower / off-center
   from the compare table above. Re-assert flush left alignment so
   everything in the results section shares the same horizontal edge.
   ──────────────────────────────────────────────────────────────── */






/* ════════════════════════════════════════════════════════════════
   R483 — Homepage conversion-lift additions:
   • hero-dispatch-strip: live "order in X for same-day dispatch"
     urgency strip pulled from the JS countdown
   • vs-section: head-to-head comparison table (Elytra vs typical)
   • home-faq-section: 8-question accordion before newsletter
   • live-order-toast: floating bottom-left social-proof toast
   • polished hero discount callout with pulsing LIVE dot
   ════════════════════════════════════════════════════════════════ */

/* Subtle pulse on the existing bolt icon — replaces the standalone red dot
   variant from earlier (which collided visually with the bolt itself). */
@keyframes hdc-bolt-pulse-anim {
    0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 0 rgba(245, 158, 11, 0)); }
    50%      { transform: scale(1.15); filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.55)); }
}
html body .hero-discount-callout .hdc-bolt-pulse {
    animation: hdc-bolt-pulse-anim 1.8s ease-in-out infinite;
    transform-origin: center;
}

/* Dispatch countdown strip in hero */
html body .hero-dispatch-strip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 36px;
    padding: 8px 14px;
    background: linear-gradient(180deg, rgba(20, 184, 166, 0.10), rgba(20, 184, 166, 0.03));
    border: 1px solid rgba(20, 184, 166, 0.28);
    border-radius: 999px;
    color: #0d9488;
    font-size: 0.84rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
}
html body .hero-dispatch-strip .hds-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55);
    animation: hds-pulse-anim 1.8s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes hds-pulse-anim {
    0%   { box-shadow: 0 0 0 0    rgba(34, 197, 94, 0.55); }
    70%  { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0    rgba(34, 197, 94, 0); }
}
html body .hero-dispatch-strip .hds-label strong { color: #0a0a0a; font-weight: 800; }
html body .hero-dispatch-strip .hds-divider { color: #94a3b8; }
html body .hero-dispatch-strip .hds-sub {
    color: #6b6b73;
    font-size: 0.78rem;
    font-weight: 500;
}

/* ─────────────── VS SECTION (Elytra vs Typical Vendor) ─────────────── */
html body .vs-section {
    padding: 80px 24px;
    background:
        radial-gradient(700px 380px at 50% 10%, rgba(20, 184, 166, 0.05), transparent 60%),
        var(--bg);
}
html body .vs-section .container { max-width: 1080px; margin: 0 auto; }

html body .vs-table {
    display: grid;
    grid-template-columns: 1.4fr 1.2fr 1.2fr;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 18px;
    overflow: hidden;
    min-width: 720px;
}
html body .vs-row {
    display: contents;
}
html body .vs-row > div {
    padding: 16px 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.92rem;
    line-height: 1.45;
}




html body .vs-header-row .vs-other { color: #94a3b8; }

html body .vs-row .vs-feature {
    color: #0a0a0a;
    font-weight: 700;
    background: linear-gradient(180deg, #fafbfc, #ffffff);
    border-right: 1px solid rgba(0, 0, 0, 0.06);
}
html body .vs-row .vs-feature i {
    color: #14b8a6;
    font-size: 0.95rem;
    flex-shrink: 0;
}
html body .vs-row .vs-elytra {
    color: #0d9488;
    font-weight: 600;
    background: rgba(20, 184, 166, 0.03);
    border-right: 1px solid rgba(20, 184, 166, 0.10);
}
html body .vs-row .vs-other {
    color: #6b6b73;
    background: #fafbfc;
}






@media (max-width: 720px) {
    html body .vs-section { padding: 60px 16px; }
    html body .vs-table { min-width: 600px; }
    html body .vs-row > div { padding: 12px 14px; font-size: 0.85rem; }
}

/* ─────────────── HOMEPAGE FAQ ACCORDION ─────────────── */
html body .home-faq-section {
    padding: 80px 24px;
    background: var(--bg);
}
html body .home-faq-section .container { max-width: 880px; margin: 0 auto; }
html body .home-faq-section .link-arrow-inline {
    color: #0d9488;
    font-weight: 700;
    text-decoration: none;
    margin-left: 4px;
}
html body .home-faq-section .link-arrow-inline:hover { text-decoration: underline; }

html body .home-faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 32px;
}
html body .home-faq-item {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    overflow: hidden;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
html body .home-faq-item:hover {
    border-color: rgba(20, 184, 166, 0.32);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}
html body .home-faq-item[open] {
    border-color: rgba(20, 184, 166, 0.45);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}
html body .home-faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #0a0a0a;
    user-select: none;
}
html body .home-faq-item summary::-webkit-details-marker { display: none; }
html body .home-faq-item .hfaq-q {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}
html body .home-faq-item .hfaq-q i {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: linear-gradient(180deg, rgba(20, 184, 166, 0.14), rgba(20, 184, 166, 0.04));
    border: 1px solid rgba(20, 184, 166, 0.22);
    color: #14b8a6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
}
html body .home-faq-item .hfaq-chev {
    color: #94a3b8;
    font-size: 0.85rem;
    transition: transform 0.25s ease, color 0.2s;
}
html body .home-faq-item[open] .hfaq-chev {
    color: #0d9488;
    transform: rotate(180deg);
}
html body .home-faq-item .hfaq-a {
    padding: 4px 22px 20px 66px;
    color: #2a2a30;
    font-size: 0.92rem;
    line-height: 1.65;
}
html body .home-faq-item .hfaq-a strong { color: #0a0a0a; font-weight: 700; }
html body .home-faq-item .hfaq-a a {
    color: #0d9488;
    font-weight: 600;
    text-decoration: none;
}
html body .home-faq-item .hfaq-a a:hover { text-decoration: underline; }

@media (max-width: 640px) {
    html body .home-faq-section { padding: 60px 16px; }
    html body .home-faq-item summary { padding: 16px 18px; font-size: 0.94rem; }
    html body .home-faq-item .hfaq-a { padding: 4px 18px 18px 60px; font-size: 0.88rem; }
    html body .home-faq-item .hfaq-q i { width: 28px; height: 28px; font-size: 0.78rem; }
}

/* ─────────────── LIVE ORDER TOAST ─────────────── */
html body .live-order-toast {
    position: fixed;
    left: 20px;
    bottom: 24px;
    z-index: 9000;
    max-width: 340px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-left: 3px solid #14b8a6;
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18), 0 4px 12px rgba(15, 23, 42, 0.08);
    overflow: hidden;
    pointer-events: auto;
    transform: translateY(120%);
    opacity: 0;
    transition: transform 0.42s cubic-bezier(0.18, 0.89, 0.32, 1.28), opacity 0.32s ease;
}
html body .live-order-toast.is-in {
    transform: translateY(0);
    opacity: 1;
}
html body .live-order-toast.is-out {
    transform: translateY(40%);
    opacity: 0;
}
html body .live-order-toast .lot-inner {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 36px 14px 14px;
}
html body .live-order-toast .lot-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(180deg, #22c55e, #16a34a);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
    box-shadow: 0 3px 8px rgba(22, 163, 74, 0.30);
}
html body .live-order-toast .lot-body { flex: 1; min-width: 0; }
html body .live-order-toast .lot-line {
    color: #0a0a0a;
    font-size: 0.85rem;
    line-height: 1.35;
    font-weight: 500;
}
html body .live-order-toast .lot-line strong { font-weight: 700; }
html body .live-order-toast .lot-product {
    margin-top: 3px;
    color: #0d9488;
    font-size: 0.85rem;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
}
html body .live-order-toast .lot-meta {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #6b6b73;
    font-size: 0.72rem;
    font-weight: 500;
}
html body .live-order-toast .lot-meta i { font-size: 0.68rem; }
html body .live-order-toast .lot-verified {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #16a34a;
    font-weight: 700;
}
html body .live-order-toast .lot-close {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    transition: background 0.15s, color 0.15s;
}
html body .live-order-toast .lot-close:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #2a2a30;
}

@media (max-width: 540px) {
    html body .live-order-toast {
        left: 10px;
        right: 10px;
        bottom: 14px;
        max-width: none;
    }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    html body .live-order-toast { transition: opacity 0.2s; transform: none; }
    html body .hero-discount-callout .hdc-bolt-pulse { animation: none; }
    html body .hero-dispatch-strip .hds-pulse { animation: none; }
}

/* ════════════════════════════════════════════════════════════════
   R484 — Product detail page conversion lift:
   • Action row pairing COA button + Compare-to-others link
   • Sales-velocity stat in pp-meta-row
   • Science at a Glance card (structure / sequence / MW / target /
     discovery + mechanism paragraph + studied-effects chips)
   • Product-specific FAQ accordion section
   ════════════════════════════════════════════════════════════════ */

/* Action row — COA button + Compare-to-others link side by side */
html body .pp-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 16px 0 8px;
    align-items: center;
}
html body .pp-action-row .pp-coa-btn {
    flex: 1 1 220px;
    margin: 0 !important;
}
html body .pp-compare-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 16px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.10);
    color: #2a2a30;
    font-size: 0.88rem;
    font-weight: 600;
    border-radius: 10px;
    text-decoration: none;
    transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.12s;
    white-space: nowrap;
}
html body .pp-compare-link:hover {
    background: rgba(20, 184, 166, 0.06);
    border-color: rgba(20, 184, 166, 0.32);
    color: #0d9488;
    transform: translateY(-1px);
}
html body .pp-compare-link i { color: #14b8a6; font-size: 0.92rem; }

/* Sales velocity pill in pp-meta-row */
html body .pp-meta-row .pp-meta-sales {
    color: #b45309 !important;
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.10), rgba(245, 158, 11, 0.04)) !important;
    border: 1px solid rgba(245, 158, 11, 0.30) !important;
    padding: 3px 10px !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
    font-size: 0.78rem !important;
}
html body .pp-meta-row .pp-meta-sales i { color: #d97706 !important; }

/* ─────────── SCIENCE AT A GLANCE ─────────── */
html body .pp-science-section {
    padding: 40px 0 !important;
}
html body .pp-science-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}
html body .pp-science-header .pp-section-title { margin: 0 !important; }
html body .pp-section-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: linear-gradient(180deg, rgba(20, 184, 166, 0.10), rgba(20, 184, 166, 0.03));
    border: 1px solid rgba(20, 184, 166, 0.28);
    color: #0d9488;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.18s, transform 0.12s;
}
html body .pp-section-link:hover {
    background: linear-gradient(180deg, rgba(20, 184, 166, 0.18), rgba(20, 184, 166, 0.06));
    transform: translateY(-1px);
}
html body .pp-section-link i { font-size: 0.78rem; }

html body .pp-science-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 18px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 10px 30px rgba(15, 23, 42, 0.05);
    padding: 26px;
}
html body .pp-science-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}
html body .pp-science-tile {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: linear-gradient(180deg, #fafbfc, #ffffff);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    transition: border-color 0.15s, transform 0.12s;
}
html body .pp-science-tile:hover {
    border-color: rgba(20, 184, 166, 0.30);
    transform: translateY(-1px);
}
html body .pp-science-tile-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: linear-gradient(180deg, rgba(20, 184, 166, 0.14), rgba(20, 184, 166, 0.04));
    border: 1px solid rgba(20, 184, 166, 0.22);
    color: #14b8a6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
}
html body .pp-science-tile-body { flex: 1; min-width: 0; }
html body .pp-science-tile-label {
    color: #6b6b73;
    font-size: 0.65rem;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 3px;
}
html body .pp-science-tile-value {
    color: #0a0a0a;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.35;
}

html body .pp-science-mechanism {
    padding: 16px 18px;
    background: linear-gradient(180deg, rgba(20, 184, 166, 0.05), rgba(20, 184, 166, 0.01));
    border: 1px solid rgba(20, 184, 166, 0.22);
    border-radius: 12px;
    margin-bottom: 16px;
}
html body .pp-science-mechanism-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #0d9488;
    font-family: 'Inter', sans-serif;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
html body .pp-science-mechanism-label i {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: linear-gradient(180deg, rgba(20, 184, 166, 0.18), rgba(20, 184, 166, 0.06));
    border: 1px solid rgba(20, 184, 166, 0.28);
    color: #14b8a6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
}
html body .pp-science-mechanism p {
    color: #2a2a30;
    font-size: 0.92rem;
    line-height: 1.65;
    margin: 0;
}

html body .pp-science-effects {
    margin-bottom: 16px;
}
html body .pp-science-effects-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #6b6b73;
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    margin-bottom: 10px;
}
html body .pp-science-effects-label i {
    color: #14b8a6;
    font-size: 0.85rem;
}
html body .pp-science-effects-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
html body .pp-science-chip {
    display: inline-block;
    padding: 5px 12px;
    background: rgba(20, 184, 166, 0.07);
    border: 1px solid rgba(20, 184, 166, 0.20);
    color: #0d9488;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}

html body .pp-science-disclaimer {
    margin-top: 6px;
    padding: 12px 14px;
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.06), rgba(245, 158, 11, 0.02));
    border: 1px solid rgba(245, 158, 11, 0.22);
    border-radius: 10px;
    color: #78350f;
    font-size: 0.78rem;
    line-height: 1.55;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
html body .pp-science-disclaimer i { color: #d97706; font-size: 0.85rem; margin-top: 2px; }

@media (max-width: 720px) {
    html body .pp-science-card { padding: 20px; }
    html body .pp-science-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    html body .pp-science-grid { grid-template-columns: 1fr; }
}

/* ─────────── PRODUCT FAQ ─────────── */
html body .pp-faq-section {
    padding: 40px 0 !important;
}
html body .pp-faq-section .pp-section-title { margin-bottom: 18px !important; }
html body .pp-faq-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
html body .pp-faq-item {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    overflow: hidden;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
html body .pp-faq-item:hover {
    border-color: rgba(20, 184, 166, 0.32);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}
html body .pp-faq-item[open] {
    border-color: rgba(20, 184, 166, 0.45);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}
html body .pp-faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: #0a0a0a;
    user-select: none;
}
html body .pp-faq-item summary::-webkit-details-marker { display: none; }
html body .pp-faq-item .pp-faq-q { flex: 1; min-width: 0; }
html body .pp-faq-item .pp-faq-chev {
    color: #94a3b8;
    font-size: 0.85rem;
    transition: transform 0.25s ease, color 0.2s;
}
html body .pp-faq-item[open] .pp-faq-chev {
    color: #0d9488;
    transform: rotate(180deg);
}
html body .pp-faq-item .pp-faq-a {
    padding: 0 20px 18px;
    color: #2a2a30;
    font-size: 0.9rem;
    line-height: 1.65;
}
html body .pp-faq-item .pp-faq-a strong { color: #0a0a0a; font-weight: 700; }
html body .pp-faq-item .pp-faq-a a {
    color: #0d9488;
    font-weight: 600;
    text-decoration: none;
}
html body .pp-faq-item .pp-faq-a a:hover { text-decoration: underline; }

html body .pp-faq-more {
    margin-top: 18px;
    padding: 14px 16px;
    background: linear-gradient(180deg, rgba(20, 184, 166, 0.05), rgba(20, 184, 166, 0.01));
    border: 1px solid rgba(20, 184, 166, 0.22);
    border-radius: 10px;
    color: #2a2a30;
    font-size: 0.88rem;
    text-align: center;
}
html body .pp-faq-more a {
    color: #0d9488;
    font-weight: 700;
    text-decoration: none;
}
html body .pp-faq-more a:hover { text-decoration: underline; }

@media (max-width: 540px) {
    html body .pp-faq-item summary { padding: 14px 16px; font-size: 0.88rem; }
    html body .pp-faq-item .pp-faq-a { padding: 0 16px 16px; font-size: 0.85rem; }
}

/* ════════════════════════════════════════════════════════════════
   R485 — Products listing page polish:
   • Catalog hero with trust pills
   • Quick-jump research-area tiles
   • Active filter pill row
   • Empty-state component for 0 results
   • Status text + sort pill polish
   ════════════════════════════════════════════════════════════════ */



/* Catalog toolbar: left-aligned under the hero, full container width.
   Several legacy rules combine to center the toolbar and dark-style the
   sticky wrap — this block neutralizes them and gives the search bar a
   polished light-theme look (larger, rounder, focus glow). */
html body .catalog-sticky-wrap {
    position: static !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 0 22px !important;
    clip-path: none !important;
}
html body .catalog-sticky-wrap::before,
html body .catalog-sticky-wrap::after {
    display: none !important;
    content: none !important;
}
html body .catalog-sticky-wrap > .catalog-toolbar,
html body .catalog-sticky-wrap .catalog-toolbar {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
}

/* Polished search bar — flex row matching the existing R-block pattern
   at line ~22455 (icon is a flex item with position:static, input has
   no padding and uses flex:1). Light grey pill background, brand-teal
   icon, soft hover/focus states. */
html body .catalog-sticky-wrap .product-search {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex: 1 1 360px !important;
    max-width: 560px !important;
    min-width: 280px !important;
    margin: 0 !important;
    padding: 0 16px 0 22px !important;
    background: #ffffff !important;
    border: 1.5px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 999px !important;
    clip-path: none !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease !important;
    position: relative;
    overflow: visible !important;
}
html body .catalog-sticky-wrap .product-search:hover {
    border-color: rgba(20, 184, 166, 0.32) !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06) !important;
}
html body .catalog-sticky-wrap .product-search:focus-within {
    background: #ffffff !important;
    border-color: #14b8a6 !important;
    box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.14) !important;
}
/* Search icon — static (flex item), brand teal, sized to read clearly.
   Override the legacy R-block that pinned a smaller muted-text icon. */
html body .catalog-sticky-wrap .product-search > i.fa-search,
html body .catalog-sticky-wrap div.product-search > i.fa-search {
    position: static !important;
    color: #14b8a6 !important;
    font-size: 1.05rem !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    min-width: 18px !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
}
/* Input — transparent, no padding (icon handles left spacing via flex gap).
   Targets the high-specificity ID selector that the existing R-block uses
   so we win the cascade. */
html body .catalog-sticky-wrap .product-search input,
html body .catalog-sticky-wrap div.product-search > input#product-search {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 16px 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    color: #0a0a0a !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.98rem !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    clip-path: none !important;
    outline: none !important;
    box-shadow: none !important;
}
html body .catalog-sticky-wrap .product-search input::placeholder,
html body .catalog-sticky-wrap div.product-search > input#product-search::placeholder {
    color: #94a3b8 !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 0.95rem !important;
}
html body .catalog-sticky-wrap .product-search .search-clear {
    /* X clear button — kept absolute on the right since the JS toggles
       inline display:none/block (we let that win and don't override
       display in CSS, otherwise the X would show on page load). */
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: rgba(0, 0, 0, 0.08) !important;
    color: #6b6b73 !important;
    border: none !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    cursor: pointer;
    text-align: center !important;
    line-height: 28px !important;
    padding: 0 !important;
    font-size: 0.78rem !important;
    transition: background 0.15s, color 0.15s;
    z-index: 2;
    flex-shrink: 0 !important;
    margin: 0 !important;
}
html body .catalog-sticky-wrap .product-search .search-clear:hover {
    background: rgba(239, 68, 68, 0.12) !important;
    color: #b91c1c !important;
}

/* Sort dropdown polish — sits immediately next to the search bar
   (only separated by the toolbar's flex gap, ~14px). */
html body .catalog-sticky-wrap .sort-dropdown {
    margin: 0 !important;
}
html body .catalog-sticky-wrap .sort-dropdown select {
    padding: 14px 40px 14px 18px !important;
    background: #ffffff !important;
    border: 1.5px solid rgba(0, 0, 0, 0.10) !important;
    border-radius: 14px !important;
    color: #0a0a0a !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.92rem !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%2314b8a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    background-size: 12px 8px !important;
    clip-path: none !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04) !important;
    transition: border-color 0.18s, box-shadow 0.18s;
}
html body .catalog-sticky-wrap .sort-dropdown select:hover {
    border-color: rgba(20, 184, 166, 0.32) !important;
}
html body .catalog-sticky-wrap .sort-dropdown select:focus {
    outline: none !important;
    border-color: #14b8a6 !important;
    box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.14) !important;
}

/* Search autocomplete dropdown — was dark-themed (rgba(13,21,38,0.96)) so
   product names rendered black-on-black and were invisible. Light-theme
   override: white card, dark text, brand-teal accents, subtle hover. */
html body .product-search .search-autocomplete,
html body .catalog-sticky-wrap .search-autocomplete {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14), 0 4px 12px rgba(15, 23, 42, 0.06) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    top: calc(100% + 8px) !important;
}
html body .search-ac-item {
    color: #0a0a0a !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    padding: 12px 14px !important;
}
html body .search-ac-item:hover,
html body .search-ac-item.active {
    background: rgba(20, 184, 166, 0.08) !important;
}
html body .search-ac-thumb {
    background: #f8fafc !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 10px !important;
}
html body .search-ac-thumb img {
    filter: none !important;
}
html body .search-ac-name {
    color: #0a0a0a !important;
    font-weight: 700 !important;
    font-size: 0.92rem !important;
}
html body .search-ac-name mark {
    background: rgba(20, 184, 166, 0.18) !important;
    color: #0d9488 !important;
    font-weight: 800 !important;
}
html body .search-ac-meta {
    color: #6b6b73 !important;
    font-size: 0.76rem !important;
}
html body .search-ac-price {
    color: #0d9488 !important;
    font-weight: 800 !important;
    font-size: 0.95rem !important;
}
html body .search-ac-oos {
    color: #b91c1c !important;
}
/* Bigger / longer catalog hero badge. Restore the decorative gradient
   lines on either side of the badge (::before / ::after), but cancel
   the global bullet-point rule from the R-block that was overlaying
   a `•` character on the left side. */
html body .catalog-hero-badge-row .section-badge {
    padding: 8px 22px !important;
    font-size: 0.82rem !important;
    letter-spacing: 0.16em !important;
    gap: 10px !important;
}
html body .catalog-hero-badge-row .section-badge i {
    font-size: 0.9rem !important;
}
html body .catalog-hero-badge-row .section-badge::before {
    content: '' !important;
    display: inline-block !important;
    width: 36px !important;
    height: 1.5px !important;
    background: linear-gradient(to right, transparent, #14b8a6) !important;
    margin: 0 !important;
    animation: none !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    vertical-align: middle;
}
html body .catalog-hero-badge-row .section-badge::after {
    content: '' !important;
    display: inline-block !important;
    width: 36px !important;
    height: 1.5px !important;
    background: linear-gradient(to left, transparent, #14b8a6) !important;
    margin: 0 !important;
    animation: none !important;
    vertical-align: middle;
}


html body .catalog-hero-text .section-badge {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px !important;
}
html body .catalog-hero-text .section-title {
    margin: 0 0 10px !important;
    text-align: left !important;
    color: #0a0a0a !important;
}












/* ──────── QUICK-JUMP TILES ──────── */
html body .catalog-quickjump {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
    /* Modest breathing room between the search bar and the
       compound-category tile row. */
    margin: 22px 0 28px;
}

/* Push the catalog hero further down from the navbar — the global
   `html body main { padding-top: 84px !important }` rule was beating
   the inline style on <main>, so the title was stuck at the same
   distance. Adding margin to the products-section content instead
   gives us a working lever. */
html body main .products-section {
    padding-top: 64px !important;
}
html body .catalog-quickjump .cqj-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    padding: 16px 12px 14px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    color: #2a2a30;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.18s ease;
}
html body .catalog-quickjump .cqj-tile:hover {
    transform: translateY(-2px);
    border-color: rgba(20, 184, 166, 0.32);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
    color: #0d9488;
}
html body .catalog-quickjump .cqj-tile.is-active {
    background: linear-gradient(180deg, rgba(20, 184, 166, 0.10), rgba(20, 184, 166, 0.03));
    border-color: rgba(20, 184, 166, 0.45);
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.14);
    color: #0d9488;
}
html body .catalog-quickjump .cqj-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(20, 184, 166, 0.14), rgba(20, 184, 166, 0.04));
    border: 1px solid rgba(20, 184, 166, 0.22);
    color: #14b8a6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}
html body .catalog-quickjump .cqj-tile.is-active .cqj-icon {
    background: linear-gradient(180deg, #2dd4bf, #14b8a6);
    border-color: #14b8a6;
    color: #ffffff;
    box-shadow: 0 3px 8px rgba(20, 184, 166, 0.32);
}
html body .catalog-quickjump .cqj-label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
}
html body .catalog-quickjump .cqj-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    padding: 2px 7px;
    background: linear-gradient(180deg, #f59e0b, #d97706);
    color: #ffffff;
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.28);
}
html body .catalog-quickjump .cqj-bundles {
    background: linear-gradient(160deg, rgba(245, 158, 11, 0.10), rgba(245, 158, 11, 0.02) 60%, #ffffff);
    border-color: rgba(245, 158, 11, 0.30);
}
html body .catalog-quickjump .cqj-bundles .cqj-icon {
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.18), rgba(245, 158, 11, 0.06));
    border-color: rgba(245, 158, 11, 0.32);
    color: #d97706;
}
html body .catalog-quickjump .cqj-bundles:hover { color: #b45309; border-color: rgba(245, 158, 11, 0.50); }

/* ──────── STATUS ROW + ACTIVE FILTERS ──────── */
html body .catalog-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin: 18px 0 14px;
}
html body .catalog-status {
    color: #6b6b73 !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    margin: 0 !important;
}
html body .catalog-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}




/* ──────── EMPTY STATE ──────── */
html body .catalog-empty {
    display: none;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 50px 24px;
    background: linear-gradient(180deg, #fafbfc, #ffffff);
    border: 1px dashed rgba(0, 0, 0, 0.12);
    border-radius: 16px;
    margin: 0 0 28px;
}
html body .catalog-empty-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(20, 184, 166, 0.10), rgba(20, 184, 166, 0.02));
    border: 1px solid rgba(20, 184, 166, 0.22);
    color: #14b8a6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 16px;
}
html body .catalog-empty h3 {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.15rem;
    color: #0a0a0a;
    margin: 0 0 8px;
}
html body .catalog-empty p {
    color: #6b6b73;
    font-size: 0.92rem;
    margin: 0 0 16px;
    line-height: 1.55;
}
html body .catalog-empty-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 18px;
}
html body .catalog-empty-pill {
    display: inline-block;
    padding: 7px 14px;
    background: #ffffff;
    border: 1px solid rgba(20, 184, 166, 0.28);
    color: #0d9488;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.18s, transform 0.12s;
}
html body .catalog-empty-pill:hover {
    background: rgba(20, 184, 166, 0.08);
    transform: translateY(-1px);
}
html body .catalog-empty-clear {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: linear-gradient(180deg, #14b8a6, #0d9488);
    color: #ffffff;
    border: 1px solid #0d9488;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.22);
    transition: transform 0.15s, box-shadow 0.15s;
}
html body .catalog-empty-clear:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(13, 148, 136, 0.28);
}

@media (max-width: 540px) {
    html body .catalog-quickjump { grid-template-columns: repeat(3, 1fr); }
    html body .catalog-quickjump .cqj-tile { padding: 12px 8px 10px; }
    html body .catalog-quickjump .cqj-icon { width: 32px; height: 32px; font-size: 0.88rem; }
    html body .catalog-quickjump .cqj-label { font-size: 0.72rem; }
    html body .catalog-empty { padding: 36px 16px; }
}

/* ════════════════════════════════════════════════════════════════
   R486 — Bundles page light-theme overhaul. The inline <style> in
   bundles.html still uses dark-theme tokens (rgba(31,41,55,0.45)
   surfaces, dark-text-on-teal CTAs, etc.) and renders as muddy grey
   blocks against the light page. Re-asserts the white-card system
   used everywhere else. Also polishes the cart drawer's free-shipping
   upsell bar and adds a "you unlocked free shipping" celebration state.
   ════════════════════════════════════════════════════════════════ */

/* Bundles header */






/* Tier banner cards (2/5%, 3-4/10%, 5+/15%) */


html body .bundles-page .tier-card.gold {
    border-color: rgba(245, 158, 11, 0.45) !important;
    background: linear-gradient(160deg, rgba(245, 158, 11, 0.08), rgba(245, 158, 11, 0.02) 60%, #ffffff) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 8px 22px rgba(245, 158, 11, 0.18) !important;
}
html body .bundles-page .tier-card.gold::before {
    background: linear-gradient(90deg, transparent, #f59e0b, transparent);
    height: 4px;
}

html body .bundles-page .tier-card.gold i { color: #d97706 !important; }
html body .bundles-page .tier-card .tier-qty {
    color: #6b6b73 !important;
    font-weight: 800 !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.12em !important;
}
html body .bundles-page .tier-card .tier-pct {
    /* Strip the teal pill background that an older R-block forces onto
       .tier-pct globally — it makes the percentage invisible (teal-on-teal)
       on the bundles page tier banner. Back to plain big text per design. */
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    text-transform: none !important;
    letter-spacing: -0.02em !important;
    box-shadow: none !important;
    display: block !important;
    text-align: center !important;
    color: #0d9488 !important;
    font-family: 'Orbitron', sans-serif !important;
    font-size: 2rem !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    text-shadow: none !important;
}
html body .bundles-page .tier-card.gold .tier-pct { color: #d97706 !important; }
html body .bundles-page .tier-card .tier-label {
    color: #2a2a30 !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    margin-top: 8px !important;
}

/* Section title row */




/* Preset cards (curated stacks) */
















/* Preset CTA button — brand teal gradient with white text */
html body .bundles-page .preset-add-btn {
    background: linear-gradient(180deg, #14b8a6, #0d9488) !important;
    color: #ffffff !important;
    border: 1px solid #0d9488 !important;
    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.22) !important;
    transition: transform 0.15s, box-shadow 0.15s !important;
}
html body .bundles-page .preset-add-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 22px rgba(13, 148, 136, 0.32) !important;
}

/* Custom builder — left tiles */


html body .bundles-page .builder-tile.selected {
    border-color: #14b8a6 !important;
    background: linear-gradient(180deg, rgba(20, 184, 166, 0.10), rgba(20, 184, 166, 0.03)) !important;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.14), 0 6px 18px rgba(15, 23, 42, 0.08) !important;
}
html body .bundles-page .builder-tile.selected::after {
    background: linear-gradient(180deg, #14b8a6, #0d9488) !important;
    color: #ffffff !important;
    box-shadow: 0 3px 8px rgba(13, 148, 136, 0.28);
}




/* Custom builder — right summary panel */
html body .bundles-page .builder-summary {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    backdrop-filter: none !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 10px 30px rgba(15, 23, 42, 0.06) !important;
    border-radius: 16px !important;
}
html body .bundles-page .builder-summary h3 {
    color: #0d9488 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    padding-bottom: 14px;
    margin-bottom: 16px !important;
}
html body .bundles-page .builder-empty {
    color: #6b6b73 !important;
}
html body .bundles-page .builder-empty i {
    color: #14b8a6 !important;
    opacity: 0.55 !important;
}




html body .bundles-page .builder-tier-pill.dim {
    background: linear-gradient(180deg, rgba(148, 163, 184, 0.10), rgba(148, 163, 184, 0.02)) !important;
    color: #6b6b73 !important;
    border-color: rgba(0, 0, 0, 0.10);
}


html body .bundles-page .builder-row.save { color: #15803d !important; }
html body .bundles-page .builder-row.total {
    border-top-color: rgba(0, 0, 0, 0.08) !important;
    color: #0a0a0a !important;
}
html body .bundles-page .builder-row.total span:last-child {
    color: #0d9488 !important;
}

/* Custom builder CTA */




/* Back link styling */
html body .bundles-page .back-link {
    background: rgba(20, 184, 166, 0.08);
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(20, 184, 166, 0.18);
}
html body .bundles-page .back-link:hover {
    background: rgba(20, 184, 166, 0.14);
    border-color: rgba(20, 184, 166, 0.35);
}

/* ════════════════════════════════════════════════════════════════
   Cart-drawer free-shipping upsell polish — applies the same light
   visual language as the rest of the site.
   ════════════════════════════════════════════════════════════════ */
html body .cart-upsell {
    background: linear-gradient(180deg, rgba(20, 184, 166, 0.08), rgba(20, 184, 166, 0.02)) !important;
    border: 1px solid rgba(20, 184, 166, 0.28) !important;
    border-radius: 12px !important;
    padding: 14px !important;
    margin: 12px 14px 0 !important;
}
html body .cart-upsell-text {
    color: #2a2a30 !important;
    font-size: 0.85rem !important;
    line-height: 1.4;
    margin-bottom: 10px;
}
html body .cart-upsell-text i { color: #0d9488 !important; margin-right: 4px; }
html body .cart-upsell-text strong { color: #0d9488 !important; }
html body .free-shipping-bar {
    height: 6px !important;
    background: rgba(0, 0, 0, 0.06) !important;
    border-radius: 999px !important;
    overflow: hidden;
    margin-top: 8px !important;
}
html body .free-shipping-progress {
    height: 100% !important;
    background: linear-gradient(90deg, #5eead4, #14b8a6, #0d9488) !important;
    border-radius: 999px !important;
    transition: width 0.4s cubic-bezier(0.34, 1.2, 0.64, 1) !important;
    position: relative;
}
html body .free-shipping-progress::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: fsbar-shine 2.4s ease-in-out infinite;
}
@keyframes fsbar-shine {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
html body .cart-upsell-product {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px !important;
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: 10px !important;
}
html body .cart-upsell-product img {
    width: 44px !important;
    height: 44px !important;
    border-radius: 8px !important;
    object-fit: contain !important;
    background: #f8fafc !important;
    padding: 4px;
}
html body .cart-upsell-product .upsell-info { flex: 1; min-width: 0; }
html body .cart-upsell-product .upsell-name {
    color: #0a0a0a !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    line-height: 1.25;
}
html body .cart-upsell-product .upsell-price {
    color: #0d9488 !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    margin-top: 2px;
}
html body .cart-upsell-product .upsell-add {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background: linear-gradient(180deg, #14b8a6, #0d9488) !important;
    color: #ffffff !important;
    border: 1px solid #0d9488 !important;
    cursor: pointer;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0;
    box-shadow: 0 3px 8px rgba(13, 148, 136, 0.28);
    transition: transform 0.15s;
}
html body .cart-upsell-product .upsell-add:hover {
    transform: scale(1.08);
}

/* Free-shipping celebration ribbon (replaces the upsell when threshold is hit) */
html body .cart-upsell.cart-upsell-celebrate {
    background: linear-gradient(180deg, rgba(34, 197, 94, 0.10), rgba(34, 197, 94, 0.02)) !important;
    border: 1px solid rgba(34, 197, 94, 0.32) !important;
    overflow: hidden;
    position: relative;
}
html body .cart-upsell.cart-upsell-celebrate::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 50%, rgba(34, 197, 94, 0.18), transparent 60%);
    pointer-events: none;
}
html body .cart-upsell-celebrate-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 1;
}
html body .cart-upsell-celebrate .cuc-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(180deg, #22c55e, #16a34a);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.32);
    animation: cuc-bounce 1.6s ease-in-out infinite;
}
@keyframes cuc-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}
html body .cart-upsell-celebrate .cuc-body { flex: 1; min-width: 0; }
html body .cart-upsell-celebrate .cuc-title {
    color: #15803d;
    font-family: 'Orbitron', sans-serif;
    font-weight: 800;
    font-size: 0.92rem;
    margin-bottom: 2px;
    letter-spacing: -0.01em;
}
html body .cart-upsell-celebrate .cuc-sub {
    color: #2a2a30;
    font-size: 0.78rem;
    line-height: 1.4;
}
html body .cart-upsell-celebrate .cuc-sub strong { color: #15803d; font-weight: 700; }
html body .cart-upsell-celebrate .cuc-checks {
    color: #22c55e;
    font-size: 1.4rem;
    flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
    html body .cart-upsell-celebrate .cuc-icon { animation: none; }
    html body .free-shipping-progress::after { animation: none; }
}

/* ════════════════════════════════════════════════════════════════
   R487 — Mobile Responsive Comprehensive Audit
   Targets every page section I've recently overhauled. Ensures
   readable layouts at 320px / 375px / 414px / 768px breakpoints.
   Also addresses iOS Safari 100vh issues and tap-target sizes.
   ════════════════════════════════════════════════════════════════ */

/* ─────────── UNIVERSAL ─────────── */

/* iOS Safari: replace 100vh with 100dvh where it would break with
   the dynamic toolbar (avoiding content cut off below the URL bar). */
@supports (height: 100dvh) {
    html body .cart-sidebar,
    html body .modal-overlay,
    html body .checkout-content,
    html body .pp-lightbox,
    html body .age-gate-overlay,
    html body .mobile-menu-overlay {
        min-height: 100dvh;
    }
}

/* Minimum tap-target size (44×44 per Apple HIG) for small buttons */
@media (max-width: 768px) and (hover: none) {
    html body button:not(.tab-btn):not(.preset-btn):not(.cqj-tile):not(.tier-card):not(.builder-tile),
    html body .nav-toggle,
    html body .compare-clear,
    html body .compare-product-remove,
    html body .lot-close {
        min-height: 36px;
    }
}

/* Reduce overall page padding at narrow widths so content has room */
@media (max-width: 540px) {
    html body .container {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
}

/* ─────────── HOMEPAGE ─────────── */

/* Hero CTA perks row — currently 3 inline items, can overflow */
@media (max-width: 540px) {
    
    html body .hero-discount-callout {
        font-size: 0.78rem !important;
        padding: 10px 14px !important;
        margin: 0 0 20px !important;
    }
    html body .hero-dispatch-strip {
        font-size: 0.76rem !important;
        padding: 7px 12px !important;
        flex-wrap: wrap !important;
        gap: 5px !important;
    }
    html body .hero-dispatch-strip .hds-divider { display: none !important; }
    html body .hero-dispatch-strip .hds-sub { width: 100%; padding-left: 16px; }
}

/* Hero title scaling */


/* VS section table — already scrolls horizontally at <720px, but
   reduce padding so more content fits */
@media (max-width: 540px) {
    html body .vs-section { padding: 50px 14px !important; }
    html body .vs-section .section-title { font-size: 1.5rem !important; }
    html body .vs-table { min-width: 540px; }
    html body .vs-row > div { padding: 10px 12px !important; font-size: 0.78rem !important; }
    
    html body .vs-cta .btn-primary { width: 100% !important; }
}

/* Homepage FAQ accordion — already has 640px breakpoint but tighten further */
@media (max-width: 400px) {
    html body .home-faq-item summary { padding: 14px 14px !important; gap: 8px !important; }
    html body .home-faq-item .hfaq-q { font-size: 0.85rem !important; }
    html body .home-faq-item .hfaq-q i {
        width: 24px !important;
        height: 24px !important;
        font-size: 0.7rem !important;
    }
    html body .home-faq-item .hfaq-a { padding: 4px 14px 16px 50px !important; font-size: 0.84rem !important; }
}

/* Live order toast — already has 540px breakpoint, just ensure it
   stays inside the viewport on tiny phones */
@media (max-width: 360px) {
    html body .live-order-toast {
        left: 8px !important;
        right: 8px !important;
        bottom: 8px !important;
    }
    html body .live-order-toast .lot-inner { padding: 12px 32px 12px 12px !important; }
    html body .live-order-toast .lot-icon { width: 32px !important; height: 32px !important; }
}

/* Why-section grid stacks at narrow widths */
@media (max-width: 600px) {
    html body .why-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    html body .why-card { padding: 24px 20px !important; }
    html body .why-stat-big { font-size: 2.2rem !important; }
}

/* How-section steps stack vertically on mobile */
@media (max-width: 720px) {
    html body .how-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    
}

/* Goal grid on mobile — 2 columns, then 1 on tiny */



/* Best sellers grid mobile */
@media (max-width: 540px) {
    html body .bestsellers-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    
}

/* Quality tabs — horizontal scroll on mobile (no wrap) */
@media (max-width: 720px) {
    html body .quality-tabs {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch;
    }
    html body .quality-tabs::-webkit-scrollbar { display: none; }
    html body .quality-tab { flex: 0 0 auto !important; }
}

/* Story section — stacks on mobile */
@media (max-width: 768px) {
    
    html body .story-visual { min-height: 200px !important; }
    
    html body .ssc-number { font-size: 1.6rem !important; }
}

/* Testimonials grid mobile */
@media (max-width: 768px) {
    html body .testimonials-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    html body .testimonial-card { padding: 22px 18px !important; }
}

/* Newsletter section mobile */
@media (max-width: 600px) {
    html body .newsletter-content {
        flex-direction: column !important;
        gap: 18px !important;
        text-align: center;
    }
    html body .newsletter-input-group {
        flex-direction: column !important;
        width: 100% !important;
    }
    html body .newsletter-input-group input,
    html body .newsletter-input-group button {
        width: 100% !important;
    }
}

/* ─────────── PRODUCTS PAGE ─────────── */

/* Catalog hero — title + trust pills should stack with title on top */

@media (max-width: 420px) {
    
    html body .catalog-hero .section-title { font-size: 1.7rem !important; }
    
}

/* Catalog toolbar (search + sort) — stack on mobile */
@media (max-width: 600px) {
    html body .catalog-sticky-wrap .catalog-toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    html body .catalog-sticky-wrap .product-search {
        max-width: none !important;
        width: 100% !important;
    }
    html body .catalog-sticky-wrap .sort-dropdown { width: 100% !important; }
    html body .catalog-sticky-wrap .sort-dropdown select { width: 100% !important; }
}

/* Quick-jump tiles — already has mobile breakpoints but tighten */
@media (max-width: 720px) {
    html body .catalog-quickjump { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
}
@media (max-width: 440px) {
    html body .catalog-quickjump { grid-template-columns: repeat(2, 1fr) !important; }
    html body .catalog-quickjump .cqj-tile { padding: 12px 8px !important; }
    html body .catalog-quickjump .cqj-icon { width: 30px !important; height: 30px !important; font-size: 0.8rem !important; }
    html body .catalog-quickjump .cqj-label { font-size: 0.7rem !important; }
}

/* Catalog status row stacks if active filter present */
@media (max-width: 480px) {
    html body .catalog-status-row { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
}

/* Products section padding reduced on mobile so title isn't pushed too far */
@media (max-width: 720px) {
    html body main .products-section { padding-top: 36px !important; padding-bottom: 40px !important; }
}

/* ─────────── PRODUCT DETAIL PAGE ─────────── */

/* PP-grid stacks: image on top, info below */
@media (max-width: 880px) {
    html body .pp-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    html body .pp-image-col { position: static !important; }
    html body .pp-image-wrap { aspect-ratio: 1 / 1 !important; max-width: 480px; margin: 0 auto; }
}

/* Buy row — qty + add-to-cart fit on one line, stack if needed */
@media (max-width: 540px) {
    html body .pp-buy-row { flex-direction: column !important; gap: 12px !important; }
    html body .pp-add-btn { width: 100% !important; }
    html body .pp-qty { width: 100% !important; justify-content: space-between !important; }
}

/* Quick-trust pills wrap nicely */
@media (max-width: 540px) {
    html body .pp-quicktrust { gap: 6px !important; }
    html body .pp-quicktrust-pill { font-size: 0.72rem !important; padding: 4px 10px !important; }
}

/* Details grid stacks at narrow widths */
@media (max-width: 480px) {
    html body .pp-details { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
    html body .pp-detail-item { padding: 10px !important; }
}

/* Trust row stacks */
@media (max-width: 540px) {
    html body .pp-trust { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
    html body .pp-trust-item { font-size: 0.78rem !important; padding: 8px 10px !important; }
}

/* Action row (COA button + Compare link) wraps */
@media (max-width: 480px) {
    html body .pp-action-row { flex-direction: column !important; gap: 8px !important; }
    html body .pp-action-row .pp-coa-btn,
    html body .pp-compare-link { flex: 1 1 100% !important; width: 100% !important; justify-content: center !important; }
}

/* Science card grid — already responsive but tighten icons */
@media (max-width: 480px) {
    html body .pp-science-card { padding: 18px !important; }
    html body .pp-science-tile { padding: 12px 14px !important; }
    html body .pp-science-tile-value { font-size: 0.82rem !important; }
    html body .pp-science-mechanism { padding: 14px !important; }
    html body .pp-science-mechanism p { font-size: 0.88rem !important; }
    html body .pp-science-chip { font-size: 0.72rem !important; padding: 4px 10px !important; }
}

/* FBT row stacks at narrow widths */
@media (max-width: 540px) {
    html body .pp-fbt-row { flex-direction: column !important; gap: 12px !important; }
    html body .pp-fbt-plus { transform: rotate(90deg); margin: 6px auto !important; }
    html body .pp-fbt-item { width: 100% !important; max-width: 320px; margin: 0 auto; }
}

/* Stack-grid (combines well with) cleaner on mobile */
@media (max-width: 540px) {
    html body .pp-stack-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    html body .pp-stack-card { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 12px !important; text-align: left !important; padding: 12px !important; }
    html body .pp-stack-card img { width: 60px !important; height: 60px !important; margin: 0 !important; }
}

/* Reviews mobile */
@media (max-width: 540px) {
    html body .pp-reviews .review-card { padding: 16px !important; }
}

/* ─────────── STACK BUILDER (protocol.html) ─────────── */

@media (max-width: 540px) {
    
    
    
    
    
    
    html body #protocol-steps .protocol-step { padding: 6px 9px !important; font-size: 0.7rem !important; }
    html body #protocol-steps .protocol-step .pstep-num { width: 18px !important; height: 18px !important; font-size: 0.68rem !important; }
    
}

/* ─────────── COMPARE PAGE ─────────── */



/* ─────────── BUNDLES PAGE ─────────── */

@media (max-width: 720px) {
    
    html body .bundles-page .preset-grid { grid-template-columns: 1fr !important; }
    html body .bundles-page .builder-wrap { grid-template-columns: 1fr !important; }
    html body .bundles-page .builder-summary { position: static !important; }
}
@media (max-width: 480px) {
    
    html body .bundles-page .builder-products { grid-template-columns: repeat(2, 1fr) !important; }
    
    
    
    
    
}

/* ─────────── CALCULATOR PAGE ─────────── */

@media (max-width: 540px) {
    html body .calc-page { padding: 90px 14px 40px !important; }
    html body .calc-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
    html body .calc-card { padding: 20px !important; }
    html body .syringe-panel { padding: 18px !important; }
    html body .syringe-panel-header { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }
    html body .syringe-copy-btn { font-size: 0.72rem !important; }
    html body .draw-to-pill { font-size: 0.85rem !important; padding: 12px 18px !important; }
    html body .result-tabs .tab-btn { padding: 12px 6px !important; font-size: 0.72rem !important; }
    html body .result-tabs .tab-btn i { display: none !important; }
}

/* ─────────── CART DRAWER ─────────── */

@media (max-width: 540px) {
    html body .cart-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        right: 0 !important;
    }
    html body .cart-upsell { margin: 10px 10px 0 !important; }
    html body .cart-upsell-product { padding: 8px !important; gap: 8px !important; }
    html body .cart-upsell-product img { width: 38px !important; height: 38px !important; }
    html body .cart-upsell-celebrate .cuc-icon { width: 36px !important; height: 36px !important; font-size: 0.92rem !important; }
    html body .cart-upsell-celebrate .cuc-title { font-size: 0.86rem !important; }
}

/* ─────────── ACCOUNT / DASHBOARD ─────────── */



/* ─────────── ORDER TRACKING ─────────── */



/* ─────────── FOOTER ─────────── */

@media (max-width: 600px) {
    html body .footer-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 28px 20px !important;
    }
    html body .footer-brand { grid-column: 1 / -1; }
    html body .footer-bottom { flex-direction: column !important; gap: 12px !important; text-align: center !important; }
}
@media (max-width: 380px) {
    html body .footer-grid { grid-template-columns: 1fr !important; }
}

/* ─────────── BLOG PAGES ─────────── */

@media (max-width: 720px) {
    html body .blog-grid { grid-template-columns: 1fr !important; }
    
}

/* ─────────── GENERAL TYPOGRAPHY MOBILE SCALING ─────────── */

@media (max-width: 480px) {
    html body .section-title { font-size: clamp(1.5rem, 6vw, 2rem) !important; }
    html body .section-subtitle { font-size: 0.92rem !important; }
    html body .btn-large { padding: 12px 20px !important; font-size: 0.9rem !important; }
}

/* ─────────── HORIZONTAL SCROLL PREVENTION ─────────── */

@media (max-width: 720px) {
    html, body { overflow-x: hidden !important; max-width: 100vw; }
    html body main { overflow-x: hidden; }
}

/* ─────────── TOAST/NOTIFICATION REPOSITIONING ─────────── */

@media (max-width: 480px) {
    html body .toast,
    html body .toast-container {
        left: 12px !important;
        right: 12px !important;
        bottom: 12px !important;
        width: calc(100% - 24px) !important;
    }
}

/* ════════════════════════════════════════════════════════════════
   R488 — Checkout flow polish: trust signals near Pay buttons,
   pay-button loading states, confirmation animation, payment-method
   tile polish, mobile-friendly layout refinements.
   ════════════════════════════════════════════════════════════════ */

/* ─────────── Pay button polish + loading state ─────────── */

/* Big pay-now buttons get extra visual weight when in default state */
html body #pay-now-btn,
html body .psifi-pay-btn {
    position: relative !important;
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease !important;
    font-size: 1.02rem !important;
    padding: 16px 24px !important;
    letter-spacing: 0.02em;
}
html body #pay-now-btn:hover:not(:disabled),
html body .psifi-pay-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 10px 28px rgba(13, 148, 136, 0.28), 0 4px 12px rgba(13, 148, 136, 0.18) !important;
}
html body #pay-now-btn:active:not(:disabled),
html body .psifi-pay-btn:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.20) !important;
}

/* Loading state — applied via JS when user clicks Pay */
html body #pay-now-btn.is-loading,
html body .psifi-pay-btn.is-loading,
html body .pp-method-pay-btn.is-loading,
html body .pp-paid-btn.is-loading,
html body .btn-primary.is-loading {
    pointer-events: none !important;
    opacity: 0.88 !important;
    cursor: progress !important;
}
html body #pay-now-btn.is-loading::before,
html body .psifi-pay-btn.is-loading::before,
html body .pp-method-pay-btn.is-loading::before,
html body .pp-paid-btn.is-loading::before,
html body .btn-primary.is-loading::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    margin-left: -10px;
    border: 2px solid rgba(255, 255, 255, 0.32);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: pay-spin 0.6s linear infinite;
    z-index: 5;
}
html body #pay-now-btn.is-loading > *:not(::before),
html body .psifi-pay-btn.is-loading > *,
html body .pp-method-pay-btn.is-loading > *,
html body .pp-paid-btn.is-loading > * {
    opacity: 0.55;
}
@keyframes pay-spin {
    to { transform: rotate(360deg); }
}

/* ─────────── Trust strip above Pay buttons ─────────── */

html body .checkout-pay-trust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 16px;
    padding: 12px 14px;
    background: linear-gradient(180deg, rgba(20, 184, 166, 0.05), rgba(20, 184, 166, 0.01));
    border: 1px solid rgba(20, 184, 166, 0.22);
    border-radius: 10px;
    margin: 16px 0 14px;
    font-size: 0.78rem;
    color: #2a2a30;
    font-weight: 600;
}
html body .checkout-pay-trust span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}
html body .checkout-pay-trust i {
    color: #0d9488;
    font-size: 0.8rem;
}

/* ─────────── Step 1 (Information & Review) mobile ─────────── */

@media (max-width: 1024px) {
    html body .checkout-info-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    html body .checkout-info-right {
        position: static !important;
    }
}

/* Step 3 (Payment) mobile — recap stacks above method picker */
@media (max-width: 880px) {
    html body .checkout-payment-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    html body .checkout-payment-right {
        position: static !important;
        order: -1; /* show summary first on mobile */
    }
    html body .payment-recap-card {
        position: static !important;
    }
}

/* Step 4 (Confirmation) mobile — recap-grid stacks */
@media (max-width: 720px) {
    html body .confirm-recap-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    html body .confirm-delivery-timeline {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    html body .confirm-timeline-bar { display: none !important; }
    html body .confirm-timeline-step {
        flex: 1 1 40% !important;
        text-align: left !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 8px 0 !important;
    }
    html body .confirm-actions-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
}

/* Confirmation icon — bounce on entry */
@keyframes confirm-pop {
    0%   { transform: scale(0); opacity: 0; }
    55%  { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1); }
}
html body #checkout-step-4 .confirmation-icon {
    animation: confirm-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes confirm-ring {
    0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
    100% { box-shadow: 0 0 0 32px rgba(34, 197, 94, 0); }
}
html body #checkout-step-4 .confirmation-icon {
    animation: confirm-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both,
               confirm-ring 1.6s ease-out 0.4s both;
}
@media (prefers-reduced-motion: reduce) {
    html body #checkout-step-4 .confirmation-icon { animation: none !important; }
}

/* Confirmation hero copy spacing */
@media (max-width: 540px) {
    html body .confirm-hero { padding: 28px 16px !important; }
    html body .confirm-hero h2 { font-size: 1.4rem !important; }
    html body .confirm-hero-sub { font-size: 0.9rem !important; }
    html body .confirm-ref-pill {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    html body .confirm-ref-pill .cr-value {
        font-size: 0.9rem !important;
        word-break: break-all;
    }
}

/* Order reference copy button — visible success state */
html body .cr-copy.is-copied,
html body .ppor-copy.is-copied {
    background: #22c55e !important;
    color: #ffffff !important;
    border-color: #22c55e !important;
}

/* ─────────── Crypto / Payment method tile polish ─────────── */

html body .crypto-options {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
    gap: 10px !important;
}
@media (max-width: 480px) {
    html body .crypto-options {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
html body .crypto-btn {
    transition: transform 0.15s ease, border-color 0.15s, box-shadow 0.18s !important;
}
html body .crypto-btn:hover:not(.active) {
    transform: translateY(-1px);
}

/* Payment method picker tiles (Crypto/Card/PayPal/Venmo) — bigger active state */



/* ─────────── Payment security note polish ─────────── */

html body .payment-security-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: linear-gradient(180deg, rgba(34, 197, 94, 0.06), rgba(34, 197, 94, 0.02));
    border: 1px solid rgba(34, 197, 94, 0.22);
    border-radius: 10px;
    margin: 12px 0;
    color: #15803d;
    font-size: 0.85rem;
    line-height: 1.5;
}
html body .payment-security-note i {
    color: #16a34a;
    font-size: 0.95rem;
    margin-top: 2px;
    flex-shrink: 0;
}
html body .payment-security-note strong { color: #166534; }

/* Payment network warning polish */
html body .payment-network-warning {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.08), rgba(245, 158, 11, 0.02));
    border: 1px solid rgba(245, 158, 11, 0.32);
    border-radius: 10px;
    margin: 12px 0;
    color: #78350f;
    font-size: 0.84rem;
    line-height: 1.5;
}
html body .payment-network-warning i {
    color: #d97706;
    font-size: 0.95rem;
    margin-top: 2px;
    flex-shrink: 0;
}
html body .payment-network-warning strong { color: #5e2e09; }

/* Payment KYC banner — make it more friendly looking */
html body .payment-kyc-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.08), rgba(59, 130, 246, 0.02));
    border: 1px solid rgba(59, 130, 246, 0.28);
    border-radius: 10px;
    margin: 12px 0;
    color: #1e3a8a;
    font-size: 0.84rem;
    line-height: 1.5;
}
html body .payment-kyc-banner i {
    color: #3b82f6;
    font-size: 0.95rem;
    margin-top: 2px;
    flex-shrink: 0;
}
html body .payment-kyc-banner strong { color: #1e3a8a; }

/* ─────────── Payment hero amount — bigger emphasis ─────────── */

html body .payment-hero {
    position: relative;
    overflow: hidden;
}
html body .payment-hero::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #14b8a6, transparent);
    opacity: 0.65;
}

/* ─────────── Loading shimmer for items list ─────────── */

@keyframes ck-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}


/* ─────────── Inline form-field validation states ─────────── */

html body .checkout-form input.is-error,
html body .checkout-form select.is-error,
html body .checkout-form textarea.is-error {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.10) !important;
}
html body .checkout-form input.is-valid,
html body .checkout-form select.is-valid {
    border-color: #22c55e !important;
}



/* ─────────── "We're online" support widget visible during checkout ─────────── */



@keyframes chs-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(34, 197, 94, 0.55); }
    70%  { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0   rgba(34, 197, 94, 0); }
}




/* ─────────── Apple Pay button visual polish ─────────── */


html body .apple-pay-row i.fa-apple-pay { font-size: 1.4rem; color: #0a0a0a; }

/* Review CTA mobile-friendly */
@media (max-width: 540px) {
    html body .review-cta { padding: 16px 18px !important; font-size: 0.98rem !important; }
    html body .checkout-cta-reassurance { font-size: 0.78rem !important; }
    html body .review-trust-mini { flex-direction: column !important; gap: 6px !important; align-items: flex-start !important; }
}

/* Sticky mobile pay bar — could be added by JS later; here's the styling */

@media (max-width: 720px) {
    html body .mobile-checkout-pay-bar.is-active { display: flex; align-items: center; gap: 12px; }
    /* Add bottom padding to checkout content when sticky bar is active */
    html body.has-mobile-pay-bar #checkout-step-3 { padding-bottom: 96px; }
}

/* ─────────── Payment pane container — tighter mobile padding ─────────── */

@media (max-width: 540px) {
    html body .payment-pane,
    html body .payment-pane-section { padding: 18px 16px !important; }
    html body .pp-intro { font-size: 0.86rem !important; }
    html body .pp-cards-row { gap: 8px !important; }
    html body .pp-cards-row i { font-size: 1.4rem !important; }
}

/* ─────────── Promo code section visible state ─────────── */

html body .review-promo input:focus {
    border-color: #14b8a6 !important;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.12) !important;
}
html body .review-promo button {
    transition: background 0.15s, transform 0.12s;
}
html body .review-promo button:hover {
    transform: translateY(-1px);
}
html body .promo-status:not(:empty) {
    margin-top: 6px;
    padding: 8px 10px;
    background: rgba(20, 184, 166, 0.06);
    border-radius: 8px;
    font-size: 0.82rem;
}
html body .promo-status.error {
    background: rgba(239, 68, 68, 0.08);
    color: #b91c1c;
}
html body .promo-status.success {
    background: rgba(34, 197, 94, 0.08);
    color: #15803d;
}

/* ════════════════════════════════════════════════════════════════
   R489 — Account dashboard retention enhancements:
   • Personalized stats strip (orders / points / lifetime saved / spent)
   • Reorder last order CTA card
   • Buy Again button on each order card
   • Tab counters on Orders/Wishlist
   • Order card footer with multiple actions
   ════════════════════════════════════════════════════════════════ */

/* ─────────── Stats strip ─────────── */
html body .dash-stats-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 0 0 18px;
}
@media (max-width: 880px) { html body .dash-stats-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { html body .dash-stats-strip { grid-template-columns: 1fr; } }

html body .dss-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.18s ease;
}
html body .dss-card:hover {
    transform: translateY(-2px);
    border-color: rgba(20, 184, 166, 0.32);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}
html body .dss-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(20, 184, 166, 0.14), rgba(20, 184, 166, 0.04));
    border: 1px solid rgba(20, 184, 166, 0.22);
    color: #14b8a6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
html body .dss-card-points .dss-icon {
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.18), rgba(245, 158, 11, 0.06));
    border-color: rgba(245, 158, 11, 0.30);
    color: #d97706;
}
html body .dss-card-bundle .dss-icon {
    background: linear-gradient(180deg, rgba(139, 92, 246, 0.16), rgba(139, 92, 246, 0.04));
    border-color: rgba(139, 92, 246, 0.28);
    color: #8b5cf6;
}
/* Member Since card — emerald medal styling (loyalty/tenure vibe) */
html body .dss-card-member .dss-icon {
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.16), rgba(16, 185, 129, 0.04));
    border-color: rgba(16, 185, 129, 0.30);
    color: #059669;
}
html body .dss-body { flex: 1; min-width: 0; }
html body .dss-label {
    color: #6b6b73;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    margin-bottom: 4px;
}
html body .dss-value {
    color: #0a0a0a;
    font-family: 'Orbitron', sans-serif;
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.01em;
}
html body .dss-card-points .dss-value { color: #d97706; }
html body .dss-card-bundle .dss-value { color: #8b5cf6; }
html body .dss-sub {
    color: #6b6b73;
    font-size: 0.72rem;
    margin-top: 4px;
    font-weight: 500;
}

/* ─────────── Reorder card ─────────── */
html body .dash-reorder-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.08), rgba(20, 184, 166, 0.02) 50%, #ffffff);
    border: 1px solid rgba(20, 184, 166, 0.28);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 6px 16px rgba(20, 184, 166, 0.08);
    margin: 0 0 22px;
}
html body .dro-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(180deg, #14b8a6, #0d9488);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.28);
}
html body .dro-body { flex: 1; min-width: 0; }
html body .dro-label {
    color: #0d9488;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    margin-bottom: 4px;
}
html body .dro-line {
    color: #0a0a0a;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
html body .dro-cta {
    background: linear-gradient(180deg, #14b8a6, #0d9488);
    color: #ffffff;
    border: 1px solid #0d9488;
    border-radius: 10px;
    padding: 11px 18px;
    font-family: 'Inter', sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.24);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    flex-shrink: 0;
    white-space: nowrap;
}
html body .dro-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(13, 148, 136, 0.32);
}
@media (max-width: 640px) {
    html body .dash-reorder-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    html body .dro-cta { width: 100%; justify-content: center; }
}

/* ─────────── Tab counters ─────────── */
html body .dash-tab-count {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 7px;
    background: rgba(20, 184, 166, 0.14);
    border: 1px solid rgba(20, 184, 166, 0.28);
    border-radius: 999px;
    color: #0d9488;
    font-size: 0.7rem;
    font-weight: 800;
    font-family: 'JetBrains Mono', monospace;
    line-height: 1.4;
}
html body .dash-tab.active .dash-tab-count {
    background: #ffffff;
    color: #0d9488;
}

/* Panel header counter (e.g. "Your Orders (3)") */
html body .dash-panel-count {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 9px;
    background: rgba(20, 184, 166, 0.08);
    border: 1px solid rgba(20, 184, 166, 0.22);
    border-radius: 999px;
    color: #0d9488;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
    font-weight: 800;
    vertical-align: middle;
}

/* ─────────── Order card footer with multiple actions ─────────── */
html body .doc-footer-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
html body .doc-buy-again {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    background: linear-gradient(180deg, #14b8a6, #0d9488);
    color: #ffffff;
    border: 1px solid #0d9488;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 3px 8px rgba(13, 148, 136, 0.22);
}
html body .doc-buy-again:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(13, 148, 136, 0.30);
}
html body .doc-buy-again.is-done {
    background: #22c55e;
    border-color: #22c55e;
}
html body .doc-buy-again i { font-size: 0.78rem; }

@media (max-width: 540px) {
    html body .doc-footer { flex-direction: column; align-items: flex-start; gap: 10px; }
    html body .doc-footer-actions { width: 100%; }
    html body .doc-buy-again,
    html body .doc-track-link { flex: 1 1 0; justify-content: center; text-align: center; }
}

/* ─────────── Loyalty next-tier progress (visual upgrade) ─────────── */







/* ════════════════════════════════════════════════════════════════
   R490 — Education / Learn page comprehensive light-theme overhaul.
   The page's inline <style> uses dark-theme tokens (rgba(31,41,55,0.4),
   rgba(10,22,40,0.92), etc.) that render as muddy grey/dark blocks on
   the light theme. This block re-skins every element to the white-card
   system used everywhere else, plus polishes the filter bar, compound
   accordion cards, meta-item tiles, and CTAs.
   ════════════════════════════════════════════════════════════════ */

/* ─────────── Page shell + header ─────────── */
html body .edu-page {
    background:
        radial-gradient(900px 500px at 50% -5%, rgba(20, 184, 166, 0.05), transparent 60%),
        radial-gradient(700px 420px at 90% 30%, rgba(139, 92, 246, 0.04), transparent 60%),
        var(--bg) !important;
}
html body .edu-header h1 {
    color: #0a0a0a !important;
    letter-spacing: -0.01em;
}
html body .edu-header p {
    color: #6b6b73 !important;
    line-height: 1.65;
}

/* Back link polish */
html body .edu-page .back-link {
    background: rgba(20, 184, 166, 0.08);
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(20, 184, 166, 0.20);
    color: #0d9488 !important;
}
html body .edu-page .back-link:hover {
    background: rgba(20, 184, 166, 0.14);
    border-color: rgba(20, 184, 166, 0.35);
}

/* ─────────── Top RUO callout area ─────────── */
html body .edu-disclaimer {
    background: linear-gradient(180deg, rgba(239, 68, 68, 0.06), rgba(239, 68, 68, 0.02)) !important;
    border: 1px solid rgba(239, 68, 68, 0.22) !important;
    border-radius: 12px !important;
    color: #2a2a30 !important;
    font-size: 0.86rem !important;
    line-height: 1.65 !important;
    padding: 18px 22px !important;
    font-family: 'Inter', sans-serif !important;
    letter-spacing: 0 !important;
    margin-top: 32px;
}
html body .edu-disclaimer strong { color: #b91c1c !important; font-weight: 700 !important; }

/* ─────────── Filter area (no longer a card — naked search + pills) ─────
   IMPORTANT: explicitly NOT sticky — the inline <style> at the top of
   education.html sets position: sticky; the user wants the search bar
   to scroll away with the page, so we override here. */
html body .edu-filter-bar {
    position: static !important;
    top: auto !important;
    background: transparent !important;
    border: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    clip-path: none !important;
    margin: 16px 0 28px !important;
}

/* Search bar — flex row pattern (icon + input as flex items). Wide,
   prominent, with an icon tile + subtle gradient + dramatic focus halo. */
html body .edu-search {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 0 26px 0 16px !important;
    background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%) !important;
    border: 1.5px solid rgba(0, 0, 0, 0.10) !important;
    border-radius: 999px !important;
    box-shadow:
        0 2px 6px rgba(15, 23, 42, 0.05),
        0 12px 32px rgba(15, 23, 42, 0.06),
        0 1px 0 rgba(255, 255, 255, 0.85) inset !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.18s ease !important;
    margin: 4px 0 0 !important;
    position: relative;
    overflow: visible !important;
    max-width: none !important;
    width: 100% !important;
}
html body .edu-search:hover {
    border-color: rgba(20, 184, 166, 0.30) !important;
    box-shadow:
        0 4px 14px rgba(15, 23, 42, 0.06),
        0 14px 38px rgba(15, 23, 42, 0.08),
        0 1px 0 rgba(255, 255, 255, 0.85) inset !important;
}
html body .edu-search:focus-within {
    border-color: #14b8a6 !important;
    box-shadow:
        0 0 0 5px rgba(20, 184, 166, 0.14),
        0 6px 18px rgba(15, 23, 42, 0.06),
        0 1px 0 rgba(255, 255, 255, 0.85) inset !important;
    transform: translateY(-1px);
}

/* Icon tile on the left — sized to look like a proper affordance against
   the now-thicker search bar (which is ~78px tall). */
html body .edu-search > i,
html body .edu-search > i.fa-search,
html body .edu-search > i.fas {
    position: static !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: linear-gradient(180deg, rgba(20, 184, 166, 0.16), rgba(20, 184, 166, 0.04)) !important;
    border: 1px solid rgba(20, 184, 166, 0.24) !important;
    color: #14b8a6 !important;
    font-size: 1.05rem !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    min-width: 40px !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
    pointer-events: none;
}
/* Higher-specificity override (with .edu-filter-bar in the selector) so
   the input padding wins against an older R-block at line 13338 that
   pinned `padding: 9px 14px 9px 38px !important` with same specificity. */
html body .edu-filter-bar .edu-search input,
html body .edu-search input,
html body .edu-search > input,
html body .edu-filter-bar .edu-search input#edu-search-input,
html body .edu-search input#edu-search-input {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 24px 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    color: #0a0a0a !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 1.04rem !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    outline: none !important;
    box-shadow: none !important;
    line-height: 1.2 !important;
}

/* Force min-height on the bar container so it stays substantial regardless
   of how the input padding resolves. Toned down from 78px. */
html body .edu-search { min-height: 66px !important; }
html body .edu-search input::placeholder {
    color: #94a3b8 !important;
    font-weight: 400 !important;
    font-size: 1.02rem !important;
}

/* Removed the misleading "↵" keyboard hint (search filters live as the
   user types — Enter doesn't trigger anything special, so the chip was
   suggesting an action that doesn't exist). */

/* Category pills container — a wide, oval/stadium-shaped soft card with
   the pills laid out inside. Replaces the rectangular box with something
   that visually rhymes with the search-bar pill above. */
html body .edu-cat-pills {
    position: relative;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    margin-top: 18px !important;
    padding: 18px 40px !important;
    background:
        radial-gradient(600px 260px at 50% 0%, rgba(20, 184, 166, 0.08), transparent 70%),
        linear-gradient(180deg, rgba(20, 184, 166, 0.04) 0%, rgba(20, 184, 166, 0.01) 100%),
        #ffffff !important;
    background-color: #ffffff !important;
    background-image:
        radial-gradient(600px 260px at 50% 0%, rgba(20, 184, 166, 0.08), transparent 70%),
        linear-gradient(180deg, rgba(20, 184, 166, 0.04) 0%, rgba(20, 184, 166, 0.01) 100%) !important;
    border: 1px solid rgba(20, 184, 166, 0.22) !important;
    border-radius: 999px !important;
    box-shadow:
        0 2px 8px rgba(15, 23, 42, 0.04),
        0 14px 38px rgba(20, 184, 166, 0.08),
        0 1px 0 rgba(255, 255, 255, 0.85) inset !important;
    overflow: visible !important;
    width: 100% !important;
    backdrop-filter: none !important;
    clip-path: none !important;
    transition: box-shadow 0.3s ease, border-color 0.2s ease;
}
html body .edu-cat-pills:hover {
    box-shadow:
        0 2px 8px rgba(15, 23, 42, 0.04),
        0 18px 44px rgba(20, 184, 166, 0.10),
        0 1px 0 rgba(255, 255, 255, 0.85) inset !important;
}
html body .edu-cat-pills::-webkit-scrollbar { display: none !important; }

/* Subtle decorative gradient strokes on the oval container's curved edges
   for extra polish — almost imperceptible, but they catch light nicely. */
html body .edu-cat-pills::before,
html body .edu-cat-pills::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 1px;
    height: 60%;
    transform: translateY(-50%);
    background: linear-gradient(180deg, transparent 0%, rgba(20, 184, 166, 0.20) 50%, transparent 100%);
    pointer-events: none;
}
html body .edu-cat-pills::before { left: 26px; }
html body .edu-cat-pills::after { right: 26px; }
@media (max-width: 540px) {
    html body .edu-cat-pills::before,
    html body .edu-cat-pills::after { display: none; }
    html body .edu-cat-pills { padding: 18px 16px !important; }
}
html body .edu-cat-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    color: #2a2a30 !important;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    padding: 9px 14px 9px 10px !important;
    border-radius: 999px !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05), 0 4px 10px rgba(15, 23, 42, 0.03);
    transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s, box-shadow 0.2s !important;
    cursor: pointer !important;
    font-family: 'Inter', sans-serif !important;
}
html body .edu-cat-pill:hover {
    border-color: rgba(20, 184, 166, 0.40) !important;
    color: #0d9488 !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08), 0 12px 28px rgba(20, 184, 166, 0.10) !important;
}
html body .edu-cat-pill.active {
    background: linear-gradient(180deg, #2dd4bf 0%, #14b8a6 50%, #0d9488 100%) !important;
    border-color: #0d9488 !important;
    color: #ffffff !important;
    box-shadow:
        0 4px 14px rgba(13, 148, 136, 0.34),
        0 8px 22px rgba(13, 148, 136, 0.18),
        0 1px 0 rgba(255, 255, 255, 0.45) inset !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.16);
    transform: translateY(-1px);
}
html body .edu-cat-pill.active:hover {
    transform: translateY(-2px);
    box-shadow:
        0 6px 18px rgba(13, 148, 136, 0.40),
        0 12px 32px rgba(13, 148, 136, 0.22),
        0 1px 0 rgba(255, 255, 255, 0.45) inset !important;
}

/* Icon tile inside the pill — small rounded square, brand teal */
html body .edu-cat-pill i:not(.count) {
    width: 22px !important;
    height: 22px !important;
    border-radius: 7px !important;
    background: linear-gradient(180deg, rgba(20,184,166,0.16), rgba(20,184,166,0.04)) !important;
    border: 1px solid rgba(20, 184, 166, 0.28) !important;
    color: #14b8a6 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.7rem !important;
    flex-shrink: 0 !important;
    transition: background 0.18s, color 0.18s, border-color 0.18s;
}
html body .edu-cat-pill.active i:not(.count) {
    background: rgba(255, 255, 255, 0.22) !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
    color: #ffffff !important;
}

/* Count chip — softer styling, clearly readable */
html body .edu-cat-pill .count {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 7px;
    background: rgba(0, 0, 0, 0.05) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    color: #6b6b73 !important;
    border-radius: 999px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem !important;
    font-weight: 700;
    line-height: 1.3;
    opacity: 1 !important;
}
html body .edu-cat-pill.active .count {
    background: rgba(255, 255, 255, 0.22) !important;
    border-color: rgba(255, 255, 255, 0.30) !important;
    color: #ffffff !important;
}

/* ─────────── Category section headers ─────────── */
html body .edu-category {
    color: #0d9488 !important;
    font-family: 'Orbitron', sans-serif !important;
    font-size: 0.82rem !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    padding-bottom: 12px !important;
    margin: 40px 0 18px !important;
}
html body .edu-category i {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(20, 184, 166, 0.14), rgba(20, 184, 166, 0.04));
    border: 1px solid rgba(20, 184, 166, 0.22);
    color: #14b8a6 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem !important;
}

/* ─────────── Compound cards (accordion) ─────────── */
html body .compound {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 14px !important;
    backdrop-filter: none !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
    transition: border-color 0.18s, box-shadow 0.18s, transform 0.12s !important;
    margin-bottom: 12px !important;
}
html body .compound:hover {
    border-color: rgba(20, 184, 166, 0.32) !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06) !important;
    transform: translateY(-1px);
}
html body .compound[open] {
    border-color: rgba(20, 184, 166, 0.45) !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08) !important;
}

html body .compound-header { padding: 18px 22px !important; }
html body .compound-title-row h3 {
    color: #0a0a0a !important;
    font-size: 1.1rem !important;
    letter-spacing: -0.01em !important;
}
html body .compound-tag {
    background: rgba(20, 184, 166, 0.10) !important;
    border: 1px solid rgba(20, 184, 166, 0.22) !important;
    color: #0d9488 !important;
    border-radius: 999px !important;
    font-size: 0.68rem !important;
    padding: 3px 10px !important;
}
html body .compound-tldr {
    color: #4a4a52 !important;
    font-size: 0.88rem !important;
    line-height: 1.55 !important;
}
html body .compound-toggle {
    color: #14b8a6 !important;
    font-size: 0.95rem !important;
}

/* Body content */
html body .compound-body-inner {
    color: #2a2a30 !important;
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
    padding: 18px 22px 22px !important;
    line-height: 1.7 !important;
    font-size: 0.92rem !important;
}
html body .compound-body-inner p { color: #2a2a30; }
html body .compound-body-inner h4 {
    color: #0d9488 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.74rem !important;
    letter-spacing: 0.10em !important;
    text-transform: uppercase !important;
    font-weight: 800 !important;
    margin: 18px 0 8px !important;
}

/* Meta items */
html body .compound-meta {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
    gap: 10px !important;
    margin-top: 18px !important;
}
html body .compound .meta-item {
    background: linear-gradient(180deg, #fafbfc, #ffffff) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-left: 3px solid #14b8a6 !important;
    border-radius: 10px !important;
    padding: 11px 14px !important;
    transition: border-color 0.15s, transform 0.12s;
}
html body .compound .meta-item:hover {
    transform: translateY(-1px);
    border-left-color: #0d9488 !important;
}
html body .compound .meta-item .label {
    color: #6b6b73 !important;
    font-size: 0.66rem !important;
    letter-spacing: 0.08em !important;
    font-weight: 700 !important;
}
html body .compound .meta-item .value {
    color: #0a0a0a !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
}

/* Action row CTAs */
html body .compound-actions {
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
    padding-top: 16px !important;
    margin-top: 20px !important;
}
html body .compound-cta {
    background: linear-gradient(180deg, #14b8a6, #0d9488) !important;
    color: #ffffff !important;
    border: 1px solid #0d9488 !important;
    border-radius: 999px !important;
    padding: 10px 18px !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.20);
    transition: transform 0.15s, box-shadow 0.15s !important;
}
html body .compound-cta:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 18px rgba(13, 148, 136, 0.28) !important;
}
html body .compound-cta-secondary {
    background: #ffffff !important;
    color: #0d9488 !important;
    border: 1px solid rgba(20, 184, 166, 0.32) !important;
    box-shadow: none !important;
}
html body .compound-cta-secondary:hover {
    background: rgba(20, 184, 166, 0.08) !important;
    border-color: rgba(20, 184, 166, 0.45) !important;
}

/* Search hit highlighter */
html body mark.search-hit {
    background: rgba(20, 184, 166, 0.18) !important;
    color: #0d9488 !important;
    font-weight: 700 !important;
}

/* No-results state */
html body .edu-no-results {
    color: #6b6b73 !important;
}
html body .edu-no-results i {
    color: #14b8a6 !important;
    opacity: 0.65 !important;
}
html body .edu-no-results h3 {
    color: #0a0a0a !important;
}

/* ─────────── Mobile responsive ─────────── */
@media (max-width: 720px) {
    html body .edu-page { padding: 100px 14px 40px !important; }
    html body .edu-filter-bar {
        position: static !important;
        padding: 14px 14px !important;
    }
    html body .edu-cat-pills { gap: 6px !important; }
    html body .edu-cat-pill { font-size: 0.72rem !important; padding: 6px 10px !important; }
    html body .compound-header { padding: 14px 16px !important; }
    html body .compound-title-row h3 { font-size: 1rem !important; }
    html body .compound-body-inner { padding: 14px 16px 18px !important; font-size: 0.88rem !important; }
    html body .compound-meta { grid-template-columns: 1fr 1fr !important; }
    html body .compound-actions { flex-direction: column !important; }
    html body .compound-cta { width: 100% !important; justify-content: center !important; }
}
@media (max-width: 420px) {
    html body .compound-meta { grid-template-columns: 1fr !important; }
}

/* ════════════════════════════════════════════════════════════════
   R491 — About page comprehensive overhaul. Polished light-theme
   card system, brand-teal stat numbers (was washed-out gradient
   that read as illegible), refined value-prop cards, polished
   policy cards with bullet styling.
   ════════════════════════════════════════════════════════════════ */

/* Page shell — subtle radial wash (overrides the older cyberpunk hex grid) */
html body .about-section {
    padding: 80px 24px 60px !important;
    background:
        radial-gradient(900px 500px at 50% -5%, rgba(20, 184, 166, 0.06), transparent 60%),
        radial-gradient(700px 420px at 90% 30%, rgba(139, 92, 246, 0.04), transparent 60%),
        var(--bg) !important;
}
html body .about-section::before,
html body .about-section::after {
    display: none !important;
    background: none !important;
    background-image: none !important;
    content: none !important;
}
html body .about-section.visible { display: block !important; }

/* About grid — wider container, content card gets the dominant share so
   the text wraps at a comfortable reading width (~75 chars/line) instead
   of being squeezed into a tall narrow column. */
html body .about-grid {
    display: grid !important;
    grid-template-columns: 2.3fr 1fr !important;
    gap: 32px !important;
    align-items: start !important;
    max-width: 1380px;
    margin: 0 auto;
    padding-left: clamp(16px, 4vw, 28px);
    padding-right: clamp(16px, 4vw, 28px);
}
@media (max-width: 980px) {
    html body .about-grid {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }
}

/* Content card — clean white surface, refined hierarchy, wider internal
   padding so the text has room to breathe without looking pinched. */
html body .about-content {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 18px !important;
    padding: 44px 52px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 10px 32px rgba(15, 23, 42, 0.06) !important;
    position: relative;
    overflow: hidden;
    min-width: 0;
}
@media (max-width: 540px) {
    html body .about-content { padding: 28px 22px !important; }
}
html body .about-content::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, transparent, #14b8a6, transparent);
    opacity: 0.75;
}
html body .about-content > .section-badge {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 6px 14px !important;
    background: linear-gradient(180deg, rgba(20,184,166,0.16), rgba(20,184,166,0.06)) !important;
    border: 1px solid rgba(20, 184, 166, 0.32) !important;
    color: #0d9488 !important;
    border-radius: 999px !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    margin: 0 0 18px !important;
}
/* Kill the decorative dashes/bullets on the about badge (it's already
   inside a content card — the dashes read as visual noise here). */
html body .about-content > .section-badge::before,
html body .about-content > .section-badge::after {
    display: none !important;
    content: none !important;
    background: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    animation: none !important;
}
html body .about-content > .section-title {
    color: #0a0a0a !important;
    font-size: clamp(1.7rem, 3.4vw, 2.4rem) !important;
    letter-spacing: -0.015em !important;
    line-height: 1.15 !important;
    margin: 0 0 20px !important;
    text-align: left !important;
}
html body .about-content p {
    color: #4a4a52 !important;
    font-size: 0.98rem !important;
    line-height: 1.75 !important;
    margin-bottom: 16px !important;
}

/* Stats panel — clean white card with 3 column grid, brand-teal numbers
   (was a washed-out gradient that didn't read on the light background) */
html body .about-stats {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0 !important;
    margin-top: 32px !important;
    background: linear-gradient(180deg, #fafbfc, #ffffff) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    clip-path: none !important;
    backdrop-filter: none !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}
html body .about-stats .stat {
    padding: 20px 12px !important;
    text-align: center !important;
    border-right: 1px solid rgba(0, 0, 0, 0.06) !important;
    align-items: center !important;
}
html body .about-stats .stat:last-child { border-right: none !important; }
html body .about-stats .stat-number,
html body .about-content .stat-number {
    font-family: 'Orbitron', sans-serif !important;
    font-size: 1.9rem !important;
    font-weight: 800 !important;
    color: #0d9488 !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: #0d9488 !important;
    background-clip: initial !important;
    line-height: 1 !important;
    letter-spacing: -0.01em !important;
    margin-bottom: 6px !important;
    text-shadow: none !important;
}
html body .about-stats .stat-label,
html body .about-content .stat-label {
    color: #6b6b73 !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    margin-top: 6px !important;
}

/* About sidebar — stacks the logo + mission + meta + CTA so the right
   column fills out the full height of the content card (instead of just
   the logo floating with empty space below). */
html body .about-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* About image — soft pastel card frame around the logo */
html body .about-image {
    position: relative;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    padding: 36px 28px 28px !important;
    background:
        radial-gradient(circle at 50% 50%, rgba(20, 184, 166, 0.10), transparent 70%),
        linear-gradient(180deg, #f8fafc, #ffffff) !important;
    border: 1px solid rgba(20, 184, 166, 0.20) !important;
    border-radius: 20px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 14px 40px rgba(20, 184, 166, 0.10) !important;
    min-height: auto !important;
    overflow: hidden;
}
html body .about-image .about-logo-tagline {
    margin-top: 12px;
    color: #0d9488;
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
}

/* Mission quote card */
html body .about-mission-card {
    position: relative;
    background: linear-gradient(160deg, rgba(20, 184, 166, 0.10), rgba(20, 184, 166, 0.02) 60%, #ffffff);
    border: 1px solid rgba(20, 184, 166, 0.22);
    border-radius: 16px;
    padding: 22px 22px 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 8px 22px rgba(20, 184, 166, 0.06);
}
html body .about-mission-card .mission-quote-mark {
    position: absolute;
    top: 14px;
    left: 18px;
    color: #14b8a6;
    font-size: 1rem;
    opacity: 0.45;
}
html body .about-mission-card blockquote {
    margin: 0 0 10px;
    padding: 0 0 0 28px;
    color: #0a0a0a;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-style: italic;
    line-height: 1.55;
    font-weight: 500;
}
html body .about-mission-card cite {
    display: block;
    margin-left: 28px;
    color: #0d9488;
    font-style: normal;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

/* Meta tile grid (Based In / Ships / Support / Guarantee) */
html body .about-meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
html body .about-meta-tile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    transition: border-color 0.15s ease, transform 0.12s ease;
}
html body .about-meta-tile:hover {
    border-color: rgba(20, 184, 166, 0.32);
    transform: translateY(-1px);
}
html body .about-meta-tile .amt-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: linear-gradient(180deg, rgba(20, 184, 166, 0.14), rgba(20, 184, 166, 0.04));
    border: 1px solid rgba(20, 184, 166, 0.22);
    color: #14b8a6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
}
html body .about-meta-tile .amt-body { flex: 1; min-width: 0; }
html body .about-meta-tile .amt-label {
    color: #6b6b73;
    font-size: 0.62rem;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 2px;
}
html body .about-meta-tile .amt-value {
    color: #0a0a0a;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.2;
}

/* Contact CTA card */
html body .about-contact-cta {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: linear-gradient(180deg, #14b8a6, #0d9488);
    color: #ffffff;
    border-radius: 14px;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(13, 148, 136, 0.28);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
html body .about-contact-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(13, 148, 136, 0.36);
}
html body .about-contact-cta .acc-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}
html body .about-contact-cta .acc-text strong {
    font-size: 0.95rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 2px;
}
html body .about-contact-cta .acc-text span {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
}
html body .about-contact-cta i {
    font-size: 1rem;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.18);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.18s ease;
}
html body .about-contact-cta:hover i {
    transform: translateX(3px);
}
html body .about-image::before,
html body .about-image::after {
    content: "";
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(20,184,166,0.14), transparent 70%);
    pointer-events: none;
    filter: blur(20px);
}
html body .about-image::before { top: -50px; left: -50px; }
html body .about-image::after  { bottom: -50px; right: -50px; }
html body .about-logo-img {
    max-width: 280px !important;
    width: 100% !important;
    height: auto !important;
    opacity: 1 !important;
    filter: drop-shadow(0 10px 28px rgba(20, 184, 166, 0.28));
    position: relative;
    z-index: 1;
    transition: transform 0.4s ease;
}
html body .about-image:hover .about-logo-img {
    transform: scale(1.04);
}

/* ─────────── Value props (4-card grid) ─────────── */
html body .value-props {
    padding: 60px 24px 80px !important;
    background:
        radial-gradient(900px 500px at 50% 5%, rgba(20, 184, 166, 0.03), transparent 60%),
        var(--bg) !important;
}
html body .value-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 18px !important;
    max-width: 1100px;
    margin: 0 auto;
}
@media (max-width: 880px) { html body .value-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 460px) { html body .value-grid { grid-template-columns: 1fr !important; } }

html body .value-card {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 16px !important;
    padding: 28px 22px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 6px 18px rgba(15, 23, 42, 0.04) !important;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
    text-align: center;
    position: relative;
    overflow: hidden;
}
html body .value-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(20, 184, 166, 0.45), transparent);
    opacity: 0;
    transition: opacity 0.2s ease;
}
html body .value-card:hover {
    /* IMPORTANT: lock background to white on hover. An older R-block at
       line 12068 sets `background: linear-gradient(...cy-surface-2...cy-surface-3...)`
       which renders as dark navy on hover (cyberpunk surface tokens).
       Without this override, hovering one of these cards turns it into
       a dark-blue gradient with unreadable text. */
    background: #ffffff !important;
    background-image: none !important;
    transform: translateY(-3px) !important;
    border-color: rgba(20, 184, 166, 0.32) !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08), 0 16px 40px rgba(20, 184, 166, 0.08) !important;
}
html body .value-card:hover::before { opacity: 1; }
/* Lock text colors on hover so they stay readable (older rules switch
   text to white on the dark hover background). */
html body .value-card:hover h3 { color: #0a0a0a !important; }
html body .value-card:hover p  { color: #4a4a52 !important; }

html body .value-card .value-icon {
    width: 56px !important;
    height: 56px !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg, #2dd4bf, #14b8a6) !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.4rem !important;
    margin: 0 auto 18px !important;
    box-shadow: 0 6px 16px rgba(20, 184, 166, 0.28) !important;
    border: none !important;
}
html body .value-card h3 {
    color: #0a0a0a !important;
    font-family: 'Orbitron', sans-serif !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    margin: 0 0 8px !important;
    letter-spacing: -0.01em;
}
html body .value-card p {
    color: #4a4a52 !important;
    font-size: 0.88rem !important;
    line-height: 1.55 !important;
    margin: 0 !important;
}

/* ─────────── Policies section ─────────── */
html body .policies-section {
    padding: 60px 24px 80px !important;
    background: var(--bg) !important;
}
html body .policies-section .section-header {
    text-align: center !important;
    margin-bottom: 38px;
}
html body .policies-section .section-badge {
    background: linear-gradient(180deg, rgba(20,184,166,0.16), rgba(20,184,166,0.06)) !important;
    border: 1px solid rgba(20, 184, 166, 0.32) !important;
    color: #0d9488 !important;
    padding: 6px 14px !important;
    border-radius: 999px !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    margin-bottom: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
}
html body .policies-section .section-title {
    color: #0a0a0a !important;
    margin: 0 !important;
}
html body .policies-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    max-width: 1100px;
    margin: 0 auto;
}
@media (max-width: 880px) {
    html body .policies-grid { grid-template-columns: 1fr !important; }
}

html body .policy-card {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 16px !important;
    padding: 28px 26px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 8px 22px rgba(15, 23, 42, 0.05) !important;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
    position: relative;
    overflow: hidden;
}
html body .policy-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #14b8a6, transparent);
    opacity: 0.6;
}
html body .policy-card:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(20, 184, 166, 0.30) !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08) !important;
}
html body .policy-card .policy-icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
    background: linear-gradient(180deg, rgba(20, 184, 166, 0.14), rgba(20, 184, 166, 0.04)) !important;
    border: 1px solid rgba(20, 184, 166, 0.22) !important;
    color: #14b8a6 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.15rem !important;
    margin: 0 0 14px !important;
}
html body .policy-card h3 {
    color: #0a0a0a !important;
    font-family: 'Orbitron', sans-serif !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    margin: 0 0 14px !important;
    letter-spacing: -0.01em;
}
html body .policy-card ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
html body .policy-card li {
    position: relative;
    padding: 6px 0 6px 22px !important;
    color: #4a4a52 !important;
    font-size: 0.88rem !important;
    line-height: 1.55 !important;
    border: none !important;
}
html body .policy-card li::before {
    content: "✓" !important;
    position: absolute !important;
    left: 0 !important;
    top: 6px !important;
    color: #14b8a6 !important;
    font-weight: 800 !important;
    font-size: 0.88rem !important;
    background: none !important;
    width: auto !important;
    height: auto !important;
}

@media (max-width: 540px) {
    html body .about-section { padding: 60px 14px 40px !important; }
    html body .about-content { padding: 24px 20px !important; }
    html body .about-stats .stat { padding: 16px 8px !important; }
    html body .about-stats .stat-number { font-size: 1.5rem !important; }
    html body .about-image { padding: 28px !important; min-height: 240px; }
    html body .about-logo-img { max-width: 200px !important; }
    html body .value-props,
    html body .policies-section { padding: 50px 14px 60px !important; }
    html body .value-card,
    html body .policy-card { padding: 22px 18px !important; }
}

/* ============================================================
   R492 — COA page comprehensive enhancement.
   Adds: stats hero strip, search/sort toolbar, empty state,
   "How We Test" educational section. Light-theme to match the
   rest of the modernized site. All rules scoped with `html body`
   to win over older R-blocks via specificity, not just !important.
   ============================================================ */

/* ---------- Stats hero strip ---------- */
html body .coa-stats-strip {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
    max-width: 1200px !important;
    margin: 24px auto 28px !important;
    padding: 0 20px !important;
}
html body .coa-stat-card {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 18px 20px !important;
    background: #ffffff !important;
    background-image:
        radial-gradient(120% 140% at 0% 0%, rgba(20, 184, 166, 0.06) 0%, transparent 55%),
        linear-gradient(180deg, #ffffff 0%, #fbfdfd 100%) !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 8px 22px -16px rgba(15, 23, 42, 0.12) !important;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
}
html body .coa-stat-card:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(20, 184, 166, 0.28) !important;
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.04), 0 14px 32px -18px rgba(20, 184, 166, 0.28) !important;
}
html body .coa-stat-icon {
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%) !important;
    color: #ffffff !important;
    font-size: 1.05rem !important;
    box-shadow: 0 6px 14px -6px rgba(20, 184, 166, 0.55) !important;
}
html body .coa-stat-card.coa-stat-purity .coa-stat-icon {
    background: linear-gradient(135deg, #2dd4bf 0%, #14b8a6 100%) !important;
}
html body .coa-stat-card.coa-stat-lab .coa-stat-icon {
    background: linear-gradient(135deg, #0f766e 0%, #134e4a 100%) !important;
}
html body .coa-stat-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    min-width: 0 !important;
}
html body .coa-stat-label {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: #64748b !important;
}
html body .coa-stat-value {
    font-family: 'Inter', sans-serif !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: #0a0a0a !important;
    letter-spacing: -0.01em !important;
    line-height: 1.2 !important;
}

/* ---------- Search + sort toolbar ---------- */
html body .coa-toolbar {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    max-width: 1200px !important;
    margin: 0 auto 24px !important;
    padding: 0 20px !important;
    flex-wrap: wrap !important;
}
html body .coa-search {
    flex: 1 1 320px !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    border-radius: 999px !important;
    padding: 0 18px !important;
    height: 48px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 6px 18px -14px rgba(15, 23, 42, 0.18) !important;
    transition: border-color .2s ease, box-shadow .2s ease !important;
}
html body .coa-search:focus-within {
    border-color: rgba(20, 184, 166, 0.55) !important;
    box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.12), 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}
html body .coa-search > i {
    color: #14b8a6 !important;
    margin-right: 10px !important;
    font-size: 0.95rem !important;
}
html body .coa-search input {
    flex: 1 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    color: #0a0a0a !important;
    padding: 0 !important;
    height: 100% !important;
}
html body .coa-search input::placeholder {
    color: #94a3b8 !important;
    font-weight: 400 !important;
}
html body .coa-sort {
    position: relative !important;
    flex: 0 0 auto !important;
}
html body .coa-sort::after {
    content: "\f078" !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    position: absolute !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #14b8a6 !important;
    font-size: 0.75rem !important;
    pointer-events: none !important;
}
html body .coa-sort select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    background: #ffffff !important;
    border-radius: 999px !important;
    padding: 0 40px 0 18px !important;
    height: 48px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.92rem !important;
    font-weight: 600 !important;
    color: #0a0a0a !important;
    cursor: pointer !important;
    min-width: 220px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 6px 18px -14px rgba(15, 23, 42, 0.18) !important;
    transition: border-color .2s ease, box-shadow .2s ease !important;
}
html body .coa-sort select:hover {
    border-color: rgba(20, 184, 166, 0.45) !important;
}
html body .coa-sort select:focus {
    outline: 0 !important;
    border-color: rgba(20, 184, 166, 0.55) !important;
    box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.12), 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

/* ---------- Empty state ---------- */
html body .coa-empty {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 10px !important;
    max-width: 520px !important;
    margin: 32px auto !important;
    padding: 44px 28px !important;
    background: #ffffff !important;
    border: 1px dashed rgba(15, 23, 42, 0.18) !important;
    border-radius: 18px !important;
}
html body .coa-empty > i {
    font-size: 1.6rem !important;
    color: #14b8a6 !important;
    margin-bottom: 4px !important;
}
html body .coa-empty h3 {
    font-family: 'Inter', sans-serif !important;
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    color: #0a0a0a !important;
    margin: 0 !important;
}
html body .coa-empty p {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.92rem !important;
    color: #64748b !important;
    margin: 0 0 8px !important;
}
html body .coa-empty-clear {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 18px !important;
    border: 1px solid rgba(20, 184, 166, 0.4) !important;
    background: #ffffff !important;
    color: #0d9488 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    border-radius: 999px !important;
    cursor: pointer !important;
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease !important;
}
html body .coa-empty-clear:hover {
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 20px -10px rgba(20, 184, 166, 0.55) !important;
}

/* ---------- "How We Test" educational section ---------- */
html body .coa-howwetest {
    max-width: 1480px !important;
    margin: 48px auto 24px !important;
    padding: 40px 36px !important;
    background: #ffffff !important;
    background-image:
        radial-gradient(120% 140% at 0% 0%, rgba(20, 184, 166, 0.05) 0%, transparent 55%),
        radial-gradient(100% 140% at 100% 100%, rgba(45, 212, 191, 0.04) 0%, transparent 55%),
        linear-gradient(180deg, #ffffff 0%, #fbfdfd 100%) !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    border-radius: 22px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 18px 40px -28px rgba(15, 23, 42, 0.18) !important;
}
html body .coa-howwetest-header {
    text-align: center !important;
    max-width: 720px !important;
    margin: 0 auto 28px !important;
}
html body .coa-howwetest-header h2 {
    font-family: 'Inter', sans-serif !important;
    font-size: 1.55rem !important;
    font-weight: 800 !important;
    color: #0a0a0a !important;
    margin: 0 0 8px !important;
    letter-spacing: -0.01em !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
}
html body .coa-howwetest-header h2 > i {
    color: #14b8a6 !important;
    font-size: 1.3rem !important;
}
html body .coa-howwetest-header p {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.98rem !important;
    color: #4a4a52 !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}
html body .coa-howwetest-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
    gap: 20px !important;
}
html body .coa-test-step {
    position: relative !important;
    padding: 24px 22px 22px !important;
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    border-radius: 16px !important;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
    overflow: hidden !important;
}
html body .coa-test-step::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg, rgba(20, 184, 166, 0.04) 0%, transparent 60%) !important;
    pointer-events: none !important;
    opacity: 0 !important;
    transition: opacity .25s ease !important;
}
html body .coa-test-step:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(20, 184, 166, 0.28) !important;
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.04), 0 18px 38px -22px rgba(20, 184, 166, 0.32) !important;
}
html body .coa-test-step:hover::before { opacity: 1 !important; }
html body .coa-test-step .cts-num {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    color: #14b8a6 !important;
    letter-spacing: 0.08em !important;
    margin-bottom: 10px !important;
    position: relative !important;
    z-index: 1 !important;
}
html body .coa-test-step .cts-icon {
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.12) 0%, rgba(13, 148, 136, 0.06) 100%) !important;
    color: #0d9488 !important;
    font-size: 1.05rem !important;
    margin-bottom: 14px !important;
    position: relative !important;
    z-index: 1 !important;
}
html body .coa-test-step .cts-body {
    position: relative !important;
    z-index: 1 !important;
}
html body .coa-test-step .cts-body h3 {
    font-family: 'Inter', sans-serif !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    color: #0a0a0a !important;
    margin: 0 0 8px !important;
    letter-spacing: -0.01em !important;
}
html body .coa-test-step .cts-body p {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.86rem !important;
    line-height: 1.55 !important;
    color: #4a4a52 !important;
    margin: 0 !important;
}
html body .coa-test-step .cts-body p strong {
    color: #0d9488 !important;
    font-weight: 700 !important;
}

/* ---------- Card: "Shop this product" link ---------- */
html body .coa-card-shop {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    margin: 6px 16px 12px !important;
    padding: 9px 12px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: #0d9488 !important;
    text-decoration: none !important;
    background: rgba(20, 184, 166, 0.08) !important;
    border: 1px solid rgba(20, 184, 166, 0.20) !important;
    border-radius: 10px !important;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease !important;
    letter-spacing: 0.02em !important;
}
html body .coa-card-shop:hover {
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 18px -10px rgba(20, 184, 166, 0.5) !important;
}
html body .coa-card-shop i {
    font-size: 0.72rem !important;
}

/* ---------- Hide card animation on filter-out ---------- */
html body .coa-card.coa-card-hidden {
    display: none !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
    html body .coa-stats-strip { grid-template-columns: repeat(2, 1fr) !important; }
    html body .coa-howwetest-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
    html body .coa-stats-strip { grid-template-columns: 1fr !important; gap: 12px !important; }
    html body .coa-howwetest { padding: 26px 18px !important; margin: 36px auto 18px !important; }
    html body .coa-howwetest-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
    html body .coa-howwetest-header h2 { font-size: 1.3rem !important; }
    html body .coa-toolbar { padding: 0 14px !important; }
    html body .coa-search { flex: 1 1 100% !important; }
    html body .coa-sort { flex: 1 1 100% !important; }
    html body .coa-sort select { width: 100% !important; min-width: 0 !important; }
    html body .coa-stat-card { padding: 14px 16px !important; }
    html body .coa-stat-value { font-size: 1.05rem !important; }
}

/* ============================================================
   R493 — Blog index page comprehensive enhancement.
   Adds: hero badge, stats strip, search + category filter
   toolbar, featured "Editor's Pick" hero card, redesigned
   article cards with Related-Products mini-pills + "Read"
   chevron, empty state, Browse-by-Compound topic tiles,
   improved trust-bar bottom CTA. Light-theme to match.
   All rules scoped with `html body` for specificity.
   ============================================================ */

/* ---------- Page shell ---------- */
html body main.blog-index {
    background: linear-gradient(180deg, #f8fafa 0%, #ffffff 60%, #ffffff 100%) !important;
    padding: 110px 20px 80px !important;
    min-height: 100vh !important;
}
html body .blog-index-container {
    max-width: 1280px !important;
    margin: 0 auto !important;
}

/* ---------- Hero header ---------- */
html body .blog-index-header {
    text-align: center !important;
    max-width: 780px !important;
    margin: 0 auto 32px !important;
}


html body .blog-index-header h1 {
    font-family: 'Inter', sans-serif !important;
    font-size: clamp(2rem, 4.5vw, 2.8rem) !important;
    font-weight: 800 !important;
    color: #0a0a0a !important;
    letter-spacing: -0.02em !important;
    line-height: 1.1 !important;
    margin: 0 0 14px !important;
}
html body .blog-index-header p {
    font-family: 'Inter', sans-serif !important;
    font-size: 1.05rem !important;
    color: #4a4a52 !important;
    line-height: 1.65 !important;
    margin: 0 !important;
    max-width: 700px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ---------- Stats strip ---------- */
html body .blog-stats-strip {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 14px !important;
    margin: 0 auto 36px !important;
    max-width: 1100px !important;
}
html body .blog-stat-card {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 16px 18px !important;
    background: #ffffff !important;
    background-image:
        radial-gradient(120% 140% at 0% 0%, rgba(20, 184, 166, 0.06) 0%, transparent 55%),
        linear-gradient(180deg, #ffffff 0%, #fbfdfd 100%) !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 8px 20px -16px rgba(15, 23, 42, 0.12) !important;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease !important;
}
html body .blog-stat-card:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(20, 184, 166, 0.28) !important;
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.04), 0 14px 30px -18px rgba(20, 184, 166, 0.28) !important;
}
html body .blog-stat-icon {
    width: 38px !important; height: 38px !important;
    flex: 0 0 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%) !important;
    color: #ffffff !important;
    font-size: 0.95rem !important;
    box-shadow: 0 5px 12px -5px rgba(20, 184, 166, 0.5) !important;
}
html body .blog-stat-body { min-width: 0 !important; }
html body .blog-stat-value {
    font-family: 'Inter', sans-serif !important;
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    color: #0a0a0a !important;
    letter-spacing: -0.01em !important;
    line-height: 1.2 !important;
}
html body .blog-stat-label {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: #64748b !important;
    margin-top: 2px !important;
}

/* ---------- Toolbar: search + category filter ---------- */
html body .blog-toolbar {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    max-width: 1100px !important;
    margin: 0 auto 30px !important;
    align-items: center !important;
}
html body .blog-search {
    width: 100% !important;
    max-width: 560px !important;
    display: flex !important;
    align-items: center !important;
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    border-radius: 999px !important;
    padding: 0 18px !important;
    height: 48px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 6px 18px -14px rgba(15, 23, 42, 0.18) !important;
    transition: border-color .2s ease, box-shadow .2s ease !important;
}
html body .blog-search:focus-within {
    border-color: rgba(20, 184, 166, 0.55) !important;
    box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.12) !important;
}
html body .blog-search > i {
    color: #14b8a6 !important;
    margin-right: 10px !important;
    font-size: 0.95rem !important;
}
html body .blog-search input {
    flex: 1 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    color: #0a0a0a !important;
    height: 100% !important;
    padding: 0 !important;
}
html body .blog-search input::placeholder { color: #94a3b8 !important; font-weight: 400 !important; }

html body .blog-cat-filter {
    display: flex !important;
    gap: 8px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
}
html body .blog-cat-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 9px 16px !important;
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    border-radius: 999px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    color: #4a4a52 !important;
    cursor: pointer !important;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03) !important;
}
html body .blog-cat-pill i { font-size: 0.72rem !important; opacity: 0.85 !important; }
html body .blog-cat-pill:hover {
    color: #0d9488 !important;
    border-color: rgba(20, 184, 166, 0.45) !important;
    transform: translateY(-1px) !important;
}
html body .blog-cat-pill.active {
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 6px 14px -6px rgba(20, 184, 166, 0.55) !important;
}

/* ---------- Featured "Editor's Pick" hero card ---------- */
html body .blog-featured {
    display: grid !important;
    grid-template-columns: 280px 1fr !important;
    gap: 0 !important;
    max-width: 1100px !important;
    margin: 0 auto 36px !important;
    background: #ffffff !important;
    background-image:
        radial-gradient(120% 140% at 0% 0%, rgba(20, 184, 166, 0.07) 0%, transparent 55%),
        radial-gradient(100% 140% at 100% 100%, rgba(45, 212, 191, 0.04) 0%, transparent 55%),
        linear-gradient(180deg, #ffffff 0%, #fbfdfd 100%) !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    border-radius: 20px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 18px 40px -28px rgba(15, 23, 42, 0.18) !important;
    text-decoration: none !important;
    color: inherit !important;
    overflow: hidden !important;
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease !important;
    position: relative !important;
}
html body .blog-featured:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(20, 184, 166, 0.30) !important;
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.04), 0 26px 56px -26px rgba(20, 184, 166, 0.30) !important;
}
html body .blog-featured-image {
    position: relative !important;
    background: linear-gradient(135deg, #d1faf3 0%, #99f6e4 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 32px !important;
    min-height: 240px !important;
}
html body .blog-featured-image img {
    max-width: 180px !important;
    width: 100% !important;
    height: auto !important;
    filter: drop-shadow(0 10px 18px rgba(20, 30, 60, 0.18))
            drop-shadow(0 2px 6px rgba(20, 184, 166, 0.18)) !important;
}
html body .blog-featured-badge {
    position: absolute !important;
    top: 14px !important;
    left: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 12px !important;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%) !important;
    color: #ffffff !important;
    border-radius: 999px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.66rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.10em !important;
    box-shadow: 0 6px 14px -6px rgba(15, 23, 42, 0.55) !important;
}
html body .blog-featured-badge i { color: #fbbf24 !important; font-size: 0.7rem !important; }
html body .blog-featured-body {
    padding: 28px 32px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}
html body .blog-featured-tag {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.74rem !important;
    font-weight: 800 !important;
    color: #0d9488 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    margin-bottom: 10px !important;
}
html body .blog-featured-body h2 {
    font-family: 'Inter', sans-serif !important;
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: #0a0a0a !important;
    letter-spacing: -0.01em !important;
    line-height: 1.25 !important;
    margin: 0 0 12px !important;
}
html body .blog-featured-body p {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.95rem !important;
    color: #4a4a52 !important;
    line-height: 1.6 !important;
    margin: 0 0 14px !important;
}
html body .blog-featured-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.82rem !important;
    color: #64748b !important;
    margin-bottom: 16px !important;
}
html body .blog-featured-meta i { color: #14b8a6 !important; margin-right: 5px !important; }
html body .blog-featured-meta span:last-child i { color: #f97316 !important; }
html body .blog-featured-cta {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 20px !important;
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%) !important;
    color: #ffffff !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    border-radius: 999px !important;
    align-self: flex-start !important;
    transition: transform .25s ease, box-shadow .25s ease !important;
    box-shadow: 0 8px 18px -8px rgba(20, 184, 166, 0.55) !important;
}
html body .blog-featured:hover .blog-featured-cta {
    transform: translateX(3px) !important;
    box-shadow: 0 12px 26px -10px rgba(20, 184, 166, 0.65) !important;
}

/* ---------- Section divider ---------- */
html body .blog-section-divider {
    max-width: 1100px !important;
    margin: 0 auto 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
}
html body .blog-section-divider h2 {
    font-family: 'Inter', sans-serif !important;
    font-size: 1.3rem !important;
    font-weight: 800 !important;
    color: #0a0a0a !important;
    letter-spacing: -0.01em !important;
    margin: 0 !important;
}
html body .blog-result-count {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: #64748b !important;
    padding: 5px 12px !important;
    background: rgba(20, 184, 166, 0.08) !important;
    border-radius: 999px !important;
    border: 1px solid rgba(20, 184, 166, 0.18) !important;
}

/* ---------- Blog grid + cards (override prior dark inline) ---------- */
/* Hidden-state utility class for blog elements. Higher specificity
   (two classes) than the base rules below so it wins the !important
   tie-break vs `display: <type> !important` defaults. JS toggles
   this class to filter/show. */
html body .blog-post-card.is-hidden,
html body .blog-featured.is-hidden,
html body .blog-grid.is-hidden,
html body .blog-empty.is-hidden,
html body .blog-section-divider.is-hidden {
    display: none !important;
}

html body .blog-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)) !important;
    gap: 20px !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
}
html body .blog-post-card {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    background-image: none !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    border-radius: 16px !important;
    padding: 0 !important;
    text-decoration: none !important;
    color: inherit !important;
    overflow: hidden !important;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 10px 24px -18px rgba(15, 23, 42, 0.14) !important;
}
/* Title link doubles as the whole-card click target via a transparent
   ::before overlay covering the entire card. Pill-links and any other
   actionable children are layered above with z-index:2 so they remain
   independently clickable without nesting anchors. */
html body .blog-post-card h2 {
    margin: 0 0 12px !important;
}
html body .blog-post-card-link {
    color: inherit !important;
    text-decoration: none !important;
    background: transparent !important;
}
html body .blog-post-card-link:hover { color: inherit !important; }
/* Kill the legacy `article h2::before { content: '◢ '; }` injection from
   the cyberpunk theme — it started rendering a black triangle before
   every card title once we converted the cards to <article>. */
html body .blog-post-card h2::before,
html body .blog-post-card h2::after {
    content: none !important;
    display: none !important;
}
html body .blog-post-card-link::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
}
html body .blog-post-card .bcp-pill-link {
    position: relative !important;
    z-index: 2 !important;
    text-decoration: none !important;
}
html body .blog-post-card .bcp-pill-link:hover {
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
}
html body .blog-post-card:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(20, 184, 166, 0.30) !important;
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.04), 0 22px 44px -22px rgba(20, 184, 166, 0.28) !important;
}
html body .blog-post-card-top {
    padding: 24px 24px 16px !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}
html body .blog-post-card .tag {
    display: inline-flex !important;
    align-items: center !important;
    align-self: flex-start !important;
    padding: 5px 11px !important;
    background: rgba(20, 184, 166, 0.10) !important;
    color: #0d9488 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    border-radius: 999px !important;
    margin-bottom: 14px !important;
}
html body .blog-post-card h2 {
    font-family: 'Inter', sans-serif !important;
    font-size: 1.08rem !important;
    font-weight: 800 !important;
    color: #0a0a0a !important;
    letter-spacing: -0.005em !important;
    line-height: 1.3 !important;
    margin: 0 0 12px !important;
}
html body .blog-post-card .excerpt {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.88rem !important;
    color: #4a4a52 !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    flex: 1 !important;
}
html body .blog-post-card-bottom {
    padding: 16px 24px 22px !important;
    border-top: 1px dashed rgba(15, 23, 42, 0.08) !important;
    background: #fbfdfd !important;
}
html body .blog-card-products {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
    margin-bottom: 12px !important;
}
html body .bcp-label {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    margin-right: 2px !important;
}
html body .bcp-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 4px 10px !important;
    background: #ffffff !important;
    color: #0d9488 !important;
    border: 1px solid rgba(20, 184, 166, 0.30) !important;
    border-radius: 999px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
}
html body .bcp-pill i { font-size: 0.66rem !important; }
html body .bcp-pill.bcp-pill-link {
    background: rgba(20, 184, 166, 0.08) !important;
}
html body .blog-post-card:hover .bcp-pill {
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
}
html body .blog-post-card .meta {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.76rem !important;
    color: #64748b !important;
    flex-wrap: wrap !important;
}
html body .blog-post-card .meta i { color: #14b8a6 !important; margin-right: 4px !important; font-size: 0.72rem !important; }
html body .blog-card-readmore {
    margin-left: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    color: #0d9488 !important;
    font-weight: 800 !important;
    transition: transform .2s ease, color .2s ease !important;
}
html body .blog-card-readmore i { color: #0d9488 !important; font-size: 0.74rem !important; margin: 0 !important; }
html body .blog-post-card:hover .blog-card-readmore {
    color: #0a0a0a !important;
    transform: translateX(2px) !important;
}
html body .blog-post-card:hover .blog-card-readmore i { color: #0a0a0a !important; }

/* ---------- Empty state ---------- */
html body .blog-empty {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 10px !important;
    max-width: 560px !important;
    margin: 32px auto !important;
    padding: 50px 28px !important;
    background: #ffffff !important;
    border: 1px dashed rgba(15, 23, 42, 0.18) !important;
    border-radius: 18px !important;
}
html body .blog-empty > i {
    font-size: 1.7rem !important;
    color: #14b8a6 !important;
    margin-bottom: 4px !important;
}
html body .blog-empty h3 {
    font-family: 'Inter', sans-serif !important;
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    color: #0a0a0a !important;
    margin: 0 !important;
}
html body .blog-empty p {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.92rem !important;
    color: #64748b !important;
    margin: 0 0 8px !important;
}
html body .blog-empty-clear {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 18px !important;
    border: 1px solid rgba(20, 184, 166, 0.4) !important;
    background: #ffffff !important;
    color: #0d9488 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    border-radius: 999px !important;
    cursor: pointer !important;
    transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease !important;
}
html body .blog-empty-clear:hover {
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 20px -10px rgba(20, 184, 166, 0.55) !important;
}

/* ---------- Browse by Compound topic tiles ---------- */
html body .blog-topics {
    max-width: 1100px !important;
    margin: 56px auto 0 !important;
    padding: 36px 28px !important;
    background: #ffffff !important;
    background-image:
        radial-gradient(100% 140% at 0% 0%, rgba(20, 184, 166, 0.05) 0%, transparent 55%),
        linear-gradient(180deg, #ffffff 0%, #fbfdfd 100%) !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    border-radius: 22px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 14px 32px -22px rgba(15, 23, 42, 0.16) !important;
}
html body .blog-topics-header {
    text-align: center !important;
    margin-bottom: 26px !important;
}
html body .blog-topics-header h2 {
    font-family: 'Inter', sans-serif !important;
    font-size: 1.4rem !important;
    font-weight: 800 !important;
    color: #0a0a0a !important;
    margin: 0 0 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    letter-spacing: -0.01em !important;
}
html body .blog-topics-header h2 > i { color: #14b8a6 !important; }
html body .blog-topics-header p {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.95rem !important;
    color: #4a4a52 !important;
    margin: 0 !important;
}
html body .blog-topics-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 14px !important;
}
html body .blog-topic-tile {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 20px 18px !important;
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    border-radius: 14px !important;
    text-decoration: none !important;
    color: inherit !important;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease !important;
}
html body .blog-topic-tile:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(20, 184, 166, 0.35) !important;
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.04), 0 16px 32px -20px rgba(20, 184, 166, 0.35) !important;
}
html body .blog-topic-tile .bt-icon {
    width: 40px !important; height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 11px !important;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.12) 0%, rgba(13, 148, 136, 0.06) 100%) !important;
    color: #0d9488 !important;
    font-size: 1rem !important;
    margin-bottom: 12px !important;
}
html body .blog-topic-tile h3 {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.98rem !important;
    font-weight: 800 !important;
    color: #0a0a0a !important;
    letter-spacing: -0.005em !important;
    margin: 0 0 4px !important;
}
html body .blog-topic-tile p {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.78rem !important;
    color: #64748b !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}

/* ---------- Bottom CTA ---------- */
html body .blog-cta {
    max-width: 1100px !important;
    margin: 50px auto 0 !important;
    padding: 44px 36px !important;
    background: linear-gradient(135deg, #0f766e 0%, #134e4a 100%) !important;
    color: #ffffff !important;
    border-radius: 22px !important;
    text-align: center !important;
    position: relative !important;
    overflow: hidden !important;
    border: 0 !important;
}
html body .blog-cta::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background-image:
        radial-gradient(60% 90% at 0% 0%, rgba(45, 212, 191, 0.2) 0%, transparent 55%),
        radial-gradient(50% 80% at 100% 100%, rgba(20, 184, 166, 0.16) 0%, transparent 55%) !important;
    pointer-events: none !important;
}
html body .blog-cta > * { position: relative !important; z-index: 1 !important; }
html body .blog-cta-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 56px !important;
    height: 56px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.20) !important;
    border-radius: 16px !important;
    color: #5eead4 !important;
    font-size: 1.4rem !important;
    margin-bottom: 16px !important;
}
html body .blog-cta h3 {
    font-family: 'Inter', sans-serif !important;
    font-size: 1.55rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 0 0 10px !important;
    letter-spacing: -0.01em !important;
}
html body .blog-cta p {
    font-family: 'Inter', sans-serif !important;
    font-size: 1rem !important;
    color: rgba(255, 255, 255, 0.88) !important;
    line-height: 1.6 !important;
    max-width: 620px !important;
    margin: 0 auto 24px !important;
}
html body .blog-cta .cta-buttons {
    display: flex !important;
    gap: 12px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    margin-bottom: 24px !important;
}
html body .blog-cta .btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    padding: 13px 26px !important;
    border-radius: 999px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease !important;
}
html body .blog-cta .btn-primary {
    background: #ffffff !important;
    color: #0d9488 !important;
    border: 1px solid #ffffff !important;
}
html body .blog-cta .btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.3) !important;
}
html body .blog-cta .btn-secondary {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.30) !important;
}
html body .blog-cta .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.14) !important;
    transform: translateY(-2px) !important;
}
html body .blog-cta-trust {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 18px !important;
    padding-top: 18px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
}
html body .blog-cta-trust span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.92) !important;
}
html body .blog-cta-trust i { color: #5eead4 !important; font-size: 0.85rem !important; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
    html body .blog-stats-strip { grid-template-columns: repeat(2, 1fr) !important; }
    html body .blog-featured { grid-template-columns: 1fr !important; }
    html body .blog-featured-image { min-height: 200px !important; padding: 24px !important; }
    html body .blog-featured-image img { max-width: 150px !important; }
    html body .blog-featured-body { padding: 24px !important; }
    html body .blog-featured-body h2 { font-size: 1.3rem !important; }
    html body .blog-topics-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
    html body main.blog-index { padding: 90px 14px 60px !important; }
    html body .blog-stats-strip { grid-template-columns: 1fr !important; gap: 10px !important; }
    html body .blog-cat-pill { padding: 8px 14px !important; font-size: 0.78rem !important; }
    html body .blog-section-divider { flex-direction: column !important; align-items: flex-start !important; }
    html body .blog-grid { grid-template-columns: 1fr !important; }
    html body .blog-topics { padding: 28px 18px !important; }
    html body .blog-topics-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
    html body .blog-cta { padding: 36px 22px !important; }
    html body .blog-cta h3 { font-size: 1.3rem !important; }
    html body .blog-cta-trust { gap: 12px !important; }
    html body .blog-cta-trust span { font-size: 0.76rem !important; }
}

/* ============================================================
   R494 — FAQ page comprehensive overhaul.
   Forces proper accordion behavior (legacy CSS had bugs causing
   answers to show partially when collapsed). Adds hero badge,
   stats strip, search + category filter toolbar, category icons
   per question, polished accordion with smooth animation, and a
   redesigned "still have questions" CTA panel.
   All rules scoped with `html body` for specificity to override
   the legacy cyberpunk theme. Uses .is-hidden utility for filter.
   ============================================================ */

/* ---------- Page shell ---------- */
html body main.faq-page {
    background: linear-gradient(180deg, #f8fafa 0%, #ffffff 60%, #ffffff 100%) !important;
    min-height: 100vh !important;
}
html body .faq-section {
    padding: 30px 0 80px !important;
    background: transparent !important;
}
html body .faq-section .container {
    max-width: 1100px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

/* ---------- Hero ---------- */
html body .faq-hero {
    text-align: center !important;
    max-width: 780px !important;
    margin: 0 auto 32px !important;
}


html body .faq-hero h1 {
    font-family: 'Inter', sans-serif !important;
    font-size: clamp(2rem, 4.5vw, 2.8rem) !important;
    font-weight: 800 !important;
    color: #0a0a0a !important;
    letter-spacing: -0.02em !important;
    line-height: 1.1 !important;
    margin: 0 0 14px !important;
}
html body .faq-hero p {
    font-family: 'Inter', sans-serif !important;
    font-size: 1.05rem !important;
    color: #4a4a52 !important;
    line-height: 1.65 !important;
    max-width: 700px !important;
    margin: 0 auto !important;
}

/* ---------- Stats strip ---------- */








/* ---------- Toolbar: search + category filter ---------- */


html body .faq-search-wrap .faq-search-icon {
    position: absolute !important;
    left: 18px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #14b8a6 !important;
    font-size: 0.95rem !important;
    pointer-events: none !important;
    z-index: 1 !important;
}
html body input.faq-search {
    width: 100% !important;
    height: 50px !important;
    padding: 0 18px 0 46px !important;
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    border-radius: 999px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 6px 18px -14px rgba(15, 23, 42, 0.18) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    color: #0a0a0a !important;
    transition: border-color .2s ease, box-shadow .2s ease !important;
    outline: 0 !important;
}
html body input.faq-search::placeholder {
    color: #94a3b8 !important;
    font-weight: 400 !important;
}
html body input.faq-search:focus {
    border-color: rgba(20, 184, 166, 0.55) !important;
    box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.12), 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}


html body .faq-cat-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 9px 16px !important;
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    border-radius: 999px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    color: #4a4a52 !important;
    cursor: pointer !important;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03) !important;
}
html body .faq-cat-pill i { font-size: 0.72rem !important; opacity: 0.85 !important; }
html body .faq-cat-pill:hover {
    color: #0d9488 !important;
    border-color: rgba(20, 184, 166, 0.45) !important;
    transform: translateY(-1px) !important;
}
html body .faq-cat-pill.active {
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 6px 14px -6px rgba(20, 184, 166, 0.55) !important;
}

/* ---------- Result count bar ---------- */

html body .faq-result-count {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: #64748b !important;
    padding: 5px 12px !important;
    background: rgba(20, 184, 166, 0.08) !important;
    border-radius: 999px !important;
    border: 1px solid rgba(20, 184, 166, 0.18) !important;
}

/* ---------- Accordion items (force correct collapsed state) ---------- */
html body .faq-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
}
html body .faq-item {
    position: relative !important;
    background: #ffffff !important;
    background-image: none !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    clip-path: none !important;
    cursor: pointer !important;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03) !important;
    margin: 0 !important;
}
html body .faq-item:hover {
    border-color: rgba(20, 184, 166, 0.40) !important;
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.04), 0 12px 26px -18px rgba(20, 184, 166, 0.25) !important;
}
html body .faq-item.open {
    border-color: rgba(20, 184, 166, 0.55) !important;
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.04), 0 14px 32px -18px rgba(20, 184, 166, 0.32) !important;
    background-image: linear-gradient(180deg, #ffffff 0%, #fbfdfd 60%, #f5fcfb 100%) !important;
}
html body .faq-item.is-hidden { display: none !important; }
html body .faq-question {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 18px 22px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.98rem !important;
    color: #0a0a0a !important;
    background: transparent !important;
    transition: color .25s ease !important;
    line-height: 1.4 !important;
    cursor: pointer !important;
}
html body .faq-question:hover { color: #0d9488 !important; }
html body .faq-q-icon {
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.12) 0%, rgba(13, 148, 136, 0.06) 100%) !important;
    color: #0d9488 !important;
    font-size: 0.9rem !important;
    transition: background .25s ease, color .25s ease !important;
}
html body .faq-item.open .faq-q-icon {
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%) !important;
    color: #ffffff !important;
}
html body .faq-q-text {
    flex: 1 !important;
    color: inherit !important;
    text-align: left !important;
}
html body .faq-chevron {
    flex: 0 0 auto !important;
    color: #14b8a6 !important;
    font-size: 0.82rem !important;
    transition: transform .3s ease, color .25s ease !important;
}
html body .faq-item.open .faq-chevron {
    transform: rotate(180deg) !important;
    color: #0d9488 !important;
}

/* CRITICAL: force collapsed state.  Legacy CSS had !important padding
   bleeding through and a generic `.faq-answer { padding: 0 24px 20px }`
   that ignored the .open state.  These rules override that fully. */
html body .faq-item .faq-answer {
    max-height: 0 !important;
    overflow: hidden !important;
    padding: 0 22px !important;
    opacity: 0 !important;
    transform: translateY(-4px) !important;
    transition: max-height .35s ease, padding .25s ease, opacity .25s ease, transform .25s ease !important;
    background: transparent !important;
    border-top: 0 !important;
}
html body .faq-item.open .faq-answer {
    max-height: 1200px !important;
    padding: 4px 22px 22px 72px !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    border-top: 1px dashed rgba(15, 23, 42, 0.08) !important;
}
html body .faq-item .faq-answer p {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.92rem !important;
    color: #4a4a52 !important;
    line-height: 1.7 !important;
    margin: 12px 0 0 !important;
}
html body .faq-item .faq-answer p:first-child { margin-top: 14px !important; }
html body .faq-item .faq-answer a {
    color: #0d9488 !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
    text-decoration-color: rgba(20, 184, 166, 0.35) !important;
    text-underline-offset: 3px !important;
}
html body .faq-item .faq-answer a:hover {
    color: #0a0a0a !important;
    text-decoration-color: #0a0a0a !important;
}
html body .faq-item .faq-answer strong {
    color: #0a0a0a !important;
    font-weight: 700 !important;
}

/* ---------- Empty state ---------- */
html body .faq-no-results {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 10px !important;
    max-width: 560px !important;
    margin: 24px auto !important;
    padding: 50px 28px !important;
    background: #ffffff !important;
    border: 1px dashed rgba(15, 23, 42, 0.18) !important;
    border-radius: 18px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-family: 'Inter', sans-serif !important;
}
html body .faq-no-results.is-hidden { display: none !important; }
html body .faq-no-results > i {
    font-size: 1.7rem !important;
    color: #14b8a6 !important;
    margin-bottom: 4px !important;
}
html body .faq-no-results h3 {
    font-family: 'Inter', sans-serif !important;
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    color: #0a0a0a !important;
    margin: 0 !important;
}
html body .faq-no-results p {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.92rem !important;
    color: #64748b !important;
    margin: 0 0 8px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}
html body .faq-no-results a {
    color: #0d9488 !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
}
html body .faq-empty-clear {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 18px !important;
    border: 1px solid rgba(20, 184, 166, 0.4) !important;
    background: #ffffff !important;
    color: #0d9488 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    border-radius: 999px !important;
    cursor: pointer !important;
    transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease !important;
}
html body .faq-empty-clear:hover {
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 20px -10px rgba(20, 184, 166, 0.55) !important;
}

/* ---------- Bottom CTA ---------- */
html body .faq-cta {
    max-width: 880px !important;
    margin: 50px auto 0 !important;
    padding: 44px 36px !important;
    background: linear-gradient(135deg, #0f766e 0%, #134e4a 100%) !important;
    color: #ffffff !important;
    border-radius: 22px !important;
    text-align: center !important;
    position: relative !important;
    overflow: hidden !important;
    border: 0 !important;
}
html body .faq-cta::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background-image:
        radial-gradient(60% 90% at 0% 0%, rgba(45, 212, 191, 0.2) 0%, transparent 55%),
        radial-gradient(50% 80% at 100% 100%, rgba(20, 184, 166, 0.16) 0%, transparent 55%) !important;
    pointer-events: none !important;
}
html body .faq-cta > * { position: relative !important; z-index: 1 !important; }
html body .faq-cta-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 56px !important;
    height: 56px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.20) !important;
    border-radius: 16px !important;
    color: #5eead4 !important;
    font-size: 1.4rem !important;
    margin-bottom: 16px !important;
}
html body .faq-cta h3 {
    font-family: 'Inter', sans-serif !important;
    font-size: 1.55rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 0 0 10px !important;
    letter-spacing: -0.01em !important;
}
html body .faq-cta p {
    font-family: 'Inter', sans-serif !important;
    font-size: 1rem !important;
    color: rgba(255, 255, 255, 0.88) !important;
    line-height: 1.6 !important;
    max-width: 580px !important;
    margin: 0 auto 24px !important;
}
html body .faq-cta-buttons {
    display: flex !important;
    gap: 12px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    margin-bottom: 24px !important;
}
html body .faq-cta-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    padding: 13px 24px !important;
    border-radius: 999px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease !important;
}
html body .faq-cta-btn-primary {
    background: #ffffff !important;
    color: #0d9488 !important;
    border: 1px solid #ffffff !important;
}
html body .faq-cta-btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.3) !important;
}
html body .faq-cta-btn-secondary {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.30) !important;
}
html body .faq-cta-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.14) !important;
    transform: translateY(-2px) !important;
}
html body .faq-cta-trust {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 18px !important;
    padding-top: 18px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
}
html body .faq-cta-trust span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.92) !important;
}
html body .faq-cta-trust i { color: #5eead4 !important; font-size: 0.85rem !important; }

/* Hide the old section header — the new hero replaces it. The legacy
   markup may have left a `.section-header` element. We're using a new
   `.faq-hero`, so no conflict, but we also no longer want the old
   `.section-badge` styled if it appears. */
html body .faq-page .section-header { display: none !important; }

/* ---------- Responsive ---------- */

@media (max-width: 600px) {
    html body .faq-section { padding: 20px 0 60px !important; }
    
    html body .faq-cat-pill { padding: 8px 14px !important; font-size: 0.78rem !important; }
    html body .faq-question { padding: 16px 18px !important; gap: 12px !important; font-size: 0.92rem !important; }
    html body .faq-q-icon { flex: 0 0 32px !important; width: 32px !important; height: 32px !important; font-size: 0.82rem !important; }
    html body .faq-item.open .faq-answer { padding: 4px 18px 18px 18px !important; }
    html body .faq-cta { padding: 36px 22px !important; }
    html body .faq-cta h3 { font-size: 1.3rem !important; }
    html body .faq-cta-trust { gap: 12px !important; }
    html body .faq-cta-trust span { font-size: 0.76rem !important; }
}

/* ============================================================
   R495 — FAQ page top-section redesign.
   Replaces the (cookie-cutter) hero badge + 4-card stats strip +
   pill-row pattern with a help-center layout: 2-column hero w/
   prominent search and a side "talk to a real person" support
   card, plus a topic card grid that doubles as the category
   filter. Distinct from blog/COA pages.
   ============================================================ */

/* ---------- Help-center hero ---------- */
html body .faq-hero-v2 {
    display: grid !important;
    grid-template-columns: 1.55fr 1fr !important;
    gap: 28px !important;
    align-items: stretch !important;
    margin: 0 auto 32px !important;
    max-width: 1100px !important;
}
html body .faq-hero-main {
    padding: 4px 4px 4px 0 !important;
}
html body .faq-hero-eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 14px !important;
    background: rgba(20, 184, 166, 0.08) !important;
    color: #0d9488 !important;
    border: 1px solid rgba(20, 184, 166, 0.25) !important;
    border-radius: 999px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.10em !important;
    margin-bottom: 16px !important;
}
html body .faq-hero-dot {
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #14b8a6 !important;
    box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.18) !important;
    animation: faqHeroDotPulse 2.4s ease-in-out infinite !important;
}
@keyframes faqHeroDotPulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.18); }
    50%       { box-shadow: 0 0 0 8px rgba(20, 184, 166, 0.05); }
}
html body .faq-hero-main h1 {
    font-family: 'Inter', sans-serif !important;
    font-size: clamp(2.1rem, 4.5vw, 3rem) !important;
    font-weight: 800 !important;
    color: #0a0a0a !important;
    letter-spacing: -0.025em !important;
    line-height: 1.05 !important;
    margin: 0 0 14px !important;
    text-align: left !important;
}
html body .faq-hero-main p {
    font-family: 'Inter', sans-serif !important;
    font-size: 1.02rem !important;
    color: #4a4a52 !important;
    line-height: 1.65 !important;
    margin: 0 0 22px !important;
    max-width: 560px !important;
    text-align: left !important;
}
html body .faq-hero-search-wrap {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    border-radius: 16px !important;
    padding: 0 18px !important;
    height: 60px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 12px 28px -20px rgba(15, 23, 42, 0.22) !important;
    transition: border-color .2s ease, box-shadow .2s ease !important;
    max-width: 560px !important;
}
html body .faq-hero-search-wrap:focus-within {
    border-color: rgba(20, 184, 166, 0.55) !important;
    box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.12), 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}
html body .faq-hero-search-wrap .faq-search-icon {
    position: static !important;
    transform: none !important;
    color: #14b8a6 !important;
    font-size: 1.05rem !important;
    margin-right: 12px !important;
    pointer-events: none !important;
}
html body .faq-hero-search-wrap input.faq-search {
    flex: 1 !important;
    height: 100% !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 1.02rem !important;
    font-weight: 500 !important;
    color: #0a0a0a !important;
}
html body .faq-hero-search-wrap input.faq-search:focus {
    border: 0 !important;
    box-shadow: none !important;
}
html body .faq-hero-search-wrap input.faq-search::placeholder {
    color: #94a3b8 !important;
    font-weight: 400 !important;
}
html body .faq-search-kbd {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
    background: #f1f5f9 !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    color: #64748b !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    box-shadow: inset 0 -1px 0 rgba(15, 23, 42, 0.08) !important;
}
html body .faq-hero-suggest {
    margin-top: 14px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    max-width: 560px !important;
}
html body .faq-hero-suggest-label {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    margin-right: 4px !important;
}
html body .faq-hero-chip {
    display: inline-flex !important;
    align-items: center !important;
    padding: 5px 12px !important;
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    border-radius: 999px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: #4a4a52 !important;
    cursor: pointer !important;
    transition: color .15s ease, border-color .15s ease, background .15s ease, transform .15s ease !important;
}
html body .faq-hero-chip:hover {
    color: #0d9488 !important;
    border-color: rgba(20, 184, 166, 0.45) !important;
    background: rgba(20, 184, 166, 0.06) !important;
    transform: translateY(-1px) !important;
}

/* ---------- Support card (right column) ---------- */
html body .faq-hero-aside {
    display: flex !important;
    align-items: stretch !important;
}
html body .faq-support-card {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    background-image:
        radial-gradient(120% 100% at 100% 0%, rgba(20, 184, 166, 0.10) 0%, transparent 60%),
        radial-gradient(100% 120% at 0% 100%, rgba(45, 212, 191, 0.06) 0%, transparent 60%),
        linear-gradient(180deg, #ffffff 0%, #fbfdfd 100%) !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    border-radius: 20px !important;
    padding: 24px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 18px 40px -28px rgba(15, 23, 42, 0.20) !important;
    position: relative !important;
    overflow: hidden !important;
}
html body .faq-support-top {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin-bottom: 20px !important;
}
html body .faq-support-avatar {
    position: relative !important;
    width: 54px !important;
    height: 54px !important;
    border-radius: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%) !important;
    color: #ffffff !important;
    font-size: 1.3rem !important;
    box-shadow: 0 8px 20px -8px rgba(20, 184, 166, 0.55) !important;
    flex: 0 0 54px !important;
}
html body .faq-support-online {
    position: absolute !important;
    bottom: -2px !important;
    right: -2px !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    background: #22c55e !important;
    border: 2.5px solid #ffffff !important;
}
html body .faq-support-meta { min-width: 0 !important; }
html body .faq-support-status {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    color: #16a34a !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 4px !important;
}
html body .faq-support-pulse {
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #22c55e !important;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5) !important;
    animation: faqOnlinePulse 1.8s ease-out infinite !important;
}
@keyframes faqOnlinePulse {
    0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
    70%  { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0);  }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);   }
}
html body .faq-support-name {
    font-family: 'Inter', sans-serif !important;
    font-size: 1.02rem !important;
    font-weight: 800 !important;
    color: #0a0a0a !important;
    letter-spacing: -0.01em !important;
}
html body .faq-support-stat {
    padding: 14px 16px !important;
    background: rgba(20, 184, 166, 0.06) !important;
    border: 1px dashed rgba(20, 184, 166, 0.30) !important;
    border-radius: 14px !important;
    margin-bottom: 16px !important;
    text-align: center !important;
}
html body .faq-support-stat-val {
    font-family: 'Inter', sans-serif !important;
    font-size: 1.55rem !important;
    font-weight: 800 !important;
    color: #0d9488 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.1 !important;
}
html body .faq-support-stat-lbl {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    margin-top: 4px !important;
}
html body .faq-support-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-top: auto !important;
}
html body .faq-support-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 11px 16px !important;
    border-radius: 12px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease !important;
}
html body .faq-support-btn-primary {
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%) !important;
    color: #ffffff !important;
    border: 1px solid transparent !important;
    box-shadow: 0 8px 18px -8px rgba(20, 184, 166, 0.55) !important;
}
html body .faq-support-btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 24px -10px rgba(20, 184, 166, 0.65) !important;
}
html body .faq-support-btn-secondary {
    background: #ffffff !important;
    color: #0d9488 !important;
    border: 1px solid rgba(20, 184, 166, 0.35) !important;
}
html body .faq-support-btn-secondary:hover {
    background: rgba(20, 184, 166, 0.06) !important;
    transform: translateY(-2px) !important;
}

/* ---------- Browse by topic — card grid (replaces filter pills) ---------- */
html body .faq-topics-v2 {
    margin: 0 auto 32px !important;
    max-width: 1100px !important;
}
html body .faq-topics-header {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin: 8px 4px 18px !important;
    flex-wrap: wrap !important;
}
html body .faq-topics-header h2 {
    font-family: 'Inter', sans-serif !important;
    font-size: 1.3rem !important;
    font-weight: 800 !important;
    color: #0a0a0a !important;
    letter-spacing: -0.01em !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
}
html body .faq-topics-header h2 > i { color: #14b8a6 !important; font-size: 1.1rem !important; }
html body .faq-topics-hint {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.85rem !important;
    color: #64748b !important;
}
html body .faq-topics-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px !important;
}

/* Topic card (also receives .faq-cat-pill so existing filter JS finds it) */
html body button.faq-topic-card {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 16px 16px !important;
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    border-radius: 14px !important;
    text-align: left !important;
    cursor: pointer !important;
    font-family: 'Inter', sans-serif !important;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: inherit !important;
    width: 100% !important;
    min-width: 0 !important;
    /* clear the .faq-cat-pill pill-shape from previous design */
    border-radius: 14px !important;
}
html body button.faq-topic-card:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(20, 184, 166, 0.45) !important;
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.04), 0 14px 28px -18px rgba(20, 184, 166, 0.32) !important;
    background: #ffffff !important;
    color: inherit !important;
}
html body button.faq-topic-card.active {
    background: linear-gradient(135deg, #0f766e 0%, #134e4a 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 18px 36px -18px rgba(13, 148, 136, 0.55) !important;
}
html body button.faq-topic-card .faq-topic-icon {
    flex: 0 0 38px !important;
    width: 38px !important;
    height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 11px !important;
    font-size: 0.95rem !important;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.12) 0%, rgba(13, 148, 136, 0.06) 100%) !important;
    color: #0d9488 !important;
    transition: background .25s ease, color .25s ease !important;
}
html body button.faq-topic-card.active .faq-topic-icon {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #5eead4 !important;
}
html body button.faq-topic-card .faq-topic-body { flex: 1 !important; min-width: 0 !important; }
html body button.faq-topic-card .faq-topic-name {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.98rem !important;
    font-weight: 800 !important;
    color: #0a0a0a !important;
    letter-spacing: -0.005em !important;
    line-height: 1.2 !important;
    margin-bottom: 3px !important;
}
html body button.faq-topic-card.active .faq-topic-name { color: #ffffff !important; }
html body button.faq-topic-card .faq-topic-count {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    color: #0d9488 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}
html body button.faq-topic-card.active .faq-topic-count { color: #5eead4 !important; }
html body button.faq-topic-card .faq-topic-desc {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.78rem !important;
    color: #64748b !important;
    line-height: 1.45 !important;
    margin-top: 6px !important;
}
html body button.faq-topic-card.active .faq-topic-desc { color: rgba(255, 255, 255, 0.78) !important; }

/* ---------- "All Answers" section heading ---------- */
html body .faq-section-heading {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 14px !important;
    margin: 12px 4px 18px !important;
    flex-wrap: wrap !important;
    max-width: 1100px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
html body .faq-section-heading h2 {
    font-family: 'Inter', sans-serif !important;
    font-size: 1.3rem !important;
    font-weight: 800 !important;
    color: #0a0a0a !important;
    letter-spacing: -0.01em !important;
    margin: 0 !important;
}
html body .faq-section-heading .faq-result-count {
    background: rgba(20, 184, 166, 0.08) !important;
    border: 1px solid rgba(20, 184, 166, 0.20) !important;
    color: #0d9488 !important;
    padding: 5px 12px !important;
    border-radius: 999px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
}

/* ---------- Hide legacy bits that may bleed through ---------- */
html body .faq-page .faq-stats-strip,
html body .faq-page .faq-toolbar,
html body .faq-page .faq-result-bar,
html body .faq-page .faq-cat-filter,
html body .faq-page .faq-hero { display: none !important; }
/* Restore the old `.faq-grid` margins now that we have a section heading */
html body .faq-grid { max-width: 1100px !important; margin: 0 auto !important; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
    html body .faq-hero-v2 { grid-template-columns: 1fr !important; gap: 22px !important; }
    html body .faq-hero-aside { order: 2 !important; }
    html body .faq-topics-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
    html body .faq-hero-main h1 { font-size: 2rem !important; }
    html body .faq-hero-search-wrap { height: 54px !important; padding: 0 14px !important; }
    html body .faq-hero-search-wrap input.faq-search { font-size: 0.95rem !important; }
    html body .faq-search-kbd { display: none !important; }
    html body .faq-topics-grid { grid-template-columns: 1fr !important; }
    html body .faq-support-card { padding: 20px !important; }
    html body .faq-section-heading { padding: 0 4px !important; }
}

/* ============================================================
   R496 — Contact page "Follow Us" social-links fix.
   Older footer-social CSS at ~line 24184 was generalized to also
   match `.social-icons a` / `a.social-icon`, forcing the contact
   page's social links into 38×38 round buttons. That broke the
   intended row layout (icon + handle text) — the screenshot
   showed the icon centered in a grey circle with the @handle
   text overflowing and the heading overlapping. Override here
   with higher specificity scoped to .contact-section so the
   footer keeps its round buttons while contact gets proper rows.
   ============================================================ */
html body .contact-section .social-links {
    /* Force block stacking — a legacy rule sets display:flex which
       pushes the h3 and .social-icons onto the same row. */
    display: block !important;
    background: #ffffff !important;
    background-image: none !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    border-radius: 16px !important;
    padding: 26px 28px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 10px 26px -20px rgba(15, 23, 42, 0.14) !important;
}
html body .contact-section .social-links h3 {
    font-family: 'Inter', sans-serif !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    color: #0a0a0a !important;
    letter-spacing: -0.005em !important;
    margin: 0 0 14px !important;
    text-transform: none !important;
}
html body .contact-section .social-icons {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}
html body .contact-section .social-icon,
html body .contact-section a.social-icon,
html body .contact-section .social-links a.social-icon {
    /* Undo round footer button — full-width row */
    width: auto !important;
    height: auto !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
    background: #fbfdfd !important;
    background-image: none !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    color: #0a0a0a !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease !important;
}
html body .contact-section .social-icon:hover,
html body .contact-section a.social-icon:hover,
html body .contact-section .social-links a.social-icon:hover {
    background: #ffffff !important;
    border-color: rgba(20, 184, 166, 0.45) !important;
    color: #0d9488 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 18px -8px rgba(20, 184, 166, 0.32) !important;
}
html body .contact-section .social-icon i {
    color: #0d9488 !important;
    font-size: 1.15rem !important;
    width: 22px !important;
    text-align: center !important;
    flex: 0 0 22px !important;
}
html body .contact-section .social-icon span {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.92rem !important;
    font-weight: 600 !important;
    color: inherit !important;
    letter-spacing: 0 !important;
}

/* ============================================================
   R498 — Products catalog hero polish pass.
   Adds: subtle radial-blob decorative background, eyebrow tag
   above title (pulsing teal dot + "PEPTIDE CATALOG · LIVE
   INVENTORY"), thin accent bar under title, soft pill background
   on each check item, and refined trust-pill styling for a more
   premium, modern, "popping" feel.
   ============================================================ */

/* The text block sits at full width when the hero stacks. */

/* Trust pills convert from 2×2 right-column grid to a horizontal
   4-across band below the text. Each pill stays the same visual
   language (icon + value), so the brand info is preserved — just
   given a cleaner, more rhythmic horizontal layout. */






/* Thin teal accent gradient bar under the title */


/* ---------- Decorative blob shapes in hero card corners ---------- */



@keyframes catalogHeroBlobA {
    0%, 100% { transform: translate(0, 0)      scale(1);    opacity: 0.85; }
    50%      { transform: translate(-18px, 14px) scale(1.08); opacity: 1; }
}
@keyframes catalogHeroBlobB {
    0%, 100% { transform: translate(0, 0)     scale(1);    opacity: 0.75; }
    50%      { transform: translate(20px, -12px) scale(1.10); opacity: 0.95; }
}
/* Make sure content stacks above the blobs */



/* Refined trust pills — slightly deeper shadow + hover lift */





/* Bigger, bolder, gradient-text-filled catalog hero title.
   Letters go from deep black at the top to a rich emerald
   green at the bottom — premium, lab-clean, distinct from
   the brand teal so the title stands out. */
/* Polished "metallic" gradient in BRAND TEAL — matches the rest
   of the site (check icons, buttons, category tiles, badges).
   Light at the top, deeper at the bottom = letters appear lit from
   above for a natural, premium 3D feel. */
/* Cool effects on the catalog hero title:
   1. Letters are mostly solid deep black, but a slim BRAND-TEAL
      "shine" sweeps horizontally across the headline every ~7s —
      premium SaaS-style glint without being gimmicky.
   2. Layered drop-shadow gives subtle 3D lift (soft teal glow +
      thin white highlight under each letter).
   3. Subtle floating motion — the headline lifts 1px on its own
      breathing animation, syncing visually with the shine.
   The shimmer is implemented via a wide gradient with a narrow
   teal stop, clipped to text, with background-position animated. */
html body .catalog-hero .catalog-hero-text .section-title {
    font-size: clamp(2.4rem, 5.2vw, 3.6rem) !important;
    line-height: 1.02 !important;
    font-weight: 900 !important;
    letter-spacing: -0.035em !important;
    color: #0a0a0a !important;
    -webkit-text-fill-color: #0a0a0a !important;
    margin: 0 0 10px !important;
    text-align: center !important;
    font-size: clamp(2.7rem, 5.8vw, 4rem) !important;
    /* Static teal-tinted glow + crisp white highlight under each
       letter. No animation — just clean, polished depth. */
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.55),
        0 2px 0 rgba(20, 184, 166, 0.16),
        0 8px 22px rgba(13, 148, 136, 0.18) !important;
}

/* ============================================================
   R499 — "Browse Catalog" hero CTA glow-up.
   Was flat black pill. Now a vibrant teal-gradient button with
   a breathing glow halo, embossed 3D depth, and a sliding arrow
   on hover. Designed to be the most visually clickable thing on
   the page — clearly a primary CTA.
   ============================================================ */
html body .hero-cta .btn-primary,
html body .hero-cta a.btn-primary,
html body .hero-cta .btn-primary.btn-large,
html body .hero-cta a.btn-primary.btn-large {
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 55%, #0f766e 100%) !important;
    background-size: 200% 200% !important;
    background-position: 0% 0% !important;
    color: #ffffff !important;
    border: 1px solid rgba(20, 184, 166, 0.55) !important;
    border-radius: 999px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.3px !important;
    text-transform: none !important;
    padding: 16px 30px !important;
    min-height: 56px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.30) inset,
        0 -1px 0 rgba(0, 0, 0, 0.12) inset,
        0 10px 22px -4px rgba(20, 184, 166, 0.55),
        0 0 0 1px rgba(20, 184, 166, 0.25),
        0 0 0 0 rgba(20, 184, 166, 0.18) !important;
    transition:
        transform .25s cubic-bezier(.2,.6,.2,1),
        box-shadow .25s ease,
        background-position .4s ease !important;
    animation: heroCTAPulse 2.6s ease-in-out infinite !important;
    position: relative !important;
    overflow: hidden !important;
}
html body .hero-cta .btn-primary:hover,
html body .hero-cta a.btn-primary:hover {
    background-position: 100% 100% !important;
    transform: translateY(-3px) scale(1.02) !important;
    /* hover overrides the pulse halo with a stronger, steady ring */
    animation-play-state: paused !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.35) inset,
        0 -1px 0 rgba(0, 0, 0, 0.14) inset,
        0 16px 36px -8px rgba(20, 184, 166, 0.70),
        0 0 0 1px rgba(20, 184, 166, 0.55),
        0 0 0 8px rgba(20, 184, 166, 0.12) !important;
}
/* Microscope icon: subtle lift on hover */
html body .hero-cta .btn-primary .hero-cta-icon {
    color: #ffffff !important;
    font-size: 0.95rem !important;
    transition: transform .25s ease !important;
}
html body .hero-cta .btn-primary:hover .hero-cta-icon {
    transform: scale(1.1) rotate(-8deg) !important;
}
/* Arrow icon at the end: slides forward on hover */
html body .hero-cta .btn-primary .hero-cta-arrow {
    color: #ffffff !important;
    font-size: 0.82rem !important;
    margin-left: 2px !important;
    opacity: 0.85 !important;
    transition: transform .3s cubic-bezier(.2,.6,.2,1), opacity .25s ease !important;
}
html body .hero-cta .btn-primary:hover .hero-cta-arrow {
    transform: translateX(5px) !important;
    opacity: 1 !important;
}
/* Breathing glow halo — soft pulse to draw the eye continuously */
@keyframes heroCTAPulse {
    0%, 100% {
        box-shadow:
            0 1px 0 rgba(255, 255, 255, 0.30) inset,
            0 -1px 0 rgba(0, 0, 0, 0.12) inset,
            0 10px 22px -4px rgba(20, 184, 166, 0.55),
            0 0 0 1px rgba(20, 184, 166, 0.25),
            0 0 0 0 rgba(20, 184, 166, 0.20);
    }
    50% {
        box-shadow:
            0 1px 0 rgba(255, 255, 255, 0.30) inset,
            0 -1px 0 rgba(0, 0, 0, 0.12) inset,
            0 14px 28px -4px rgba(20, 184, 166, 0.65),
            0 0 0 1px rgba(20, 184, 166, 0.40),
            0 0 0 10px rgba(20, 184, 166, 0.06);
    }
}
@media (prefers-reduced-motion: reduce) {
    html body .hero-cta .btn-primary { animation: none !important; }
}

/* ════════════════════════════════════════════════════════════════════
   R49: Account dashboard upgrades — free-shipping ladder + restock hints
   ════════════════════════════════════════════════════════════════════ */

/* ─────────── Free-shipping ladder banner ─────────── */
html body .free-ship-ladder {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    margin: 0 0 16px 0;
    background: linear-gradient(135deg, #ecfeff 0%, #f0fdfa 100%);
    border: 1px solid rgba(20, 184, 166, 0.30);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(13, 148, 136, 0.06);
}
html body .free-ship-ladder .fsl-icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #14b8a6, #0d9488);
    color: #ffffff;
    border-radius: 10px;
    font-size: 1.05rem;
    box-shadow: 0 4px 10px rgba(13, 148, 136, 0.25);
}
html body .free-ship-ladder .fsl-body {
    flex: 1 1 auto;
    min-width: 0;
}
html body .free-ship-ladder .fsl-text {
    font-size: 0.92rem;
    color: #0f172a;
    margin-bottom: 7px;
    line-height: 1.35;
}
html body .free-ship-ladder .fsl-text strong {
    color: #0d9488;
    font-weight: 800;
}
html body .free-ship-ladder .fsl-bar {
    width: 100%;
    height: 6px;
    background: rgba(13, 148, 136, 0.12);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
html body .free-ship-ladder .fsl-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #14b8a6, #2dd4bf);
    border-radius: 999px;
    transition: width 800ms cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 0 12px rgba(45, 212, 191, 0.45);
}
html body .free-ship-ladder .fsl-savings {
    flex: 0 0 auto;
    padding: 5px 11px;
    background: rgba(20, 184, 166, 0.15);
    border: 1px solid rgba(20, 184, 166, 0.30);
    border-radius: 999px;
    color: #0d9488;
    font-size: 0.78rem;
    font-weight: 800;
    font-family: 'JetBrains Mono', monospace;
    white-space: nowrap;
}
@media (max-width: 640px) {
    html body .free-ship-ladder {
        flex-wrap: wrap;
        gap: 10px;
        padding: 12px 14px;
    }
    html body .free-ship-ladder .fsl-savings {
        order: 3;
        margin-left: auto;
    }
}

/* ─────────── Loyalty Points sub-text icons ─────────── */
html body .dss-card-points .dss-sub i {
    margin-right: 4px;
    color: #f59e0b;
}
html body .dss-card-points .dss-sub strong {
    color: #0d9488;
    font-weight: 800;
}

/* ─────────── Restock hint chip on order cards ─────────── */
html body .doc-restock-hint {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 10px 0 0 0;
    padding: 10px 13px;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 1px solid rgba(245, 158, 11, 0.30);
    border-radius: 10px;
    font-size: 0.86rem;
    color: #78350f;
    flex-wrap: wrap;
}
html body .doc-restock-hint .dor-text {
    flex: 1 1 200px;
    line-height: 1.35;
}
html body .doc-restock-hint .dor-text i {
    margin-right: 5px;
    color: #d97706;
}
html body .doc-restock-hint .dor-text strong {
    color: #92400e;
    font-weight: 700;
}
html body .doc-restock-hint .dor-reorder-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: linear-gradient(180deg, #f59e0b, #d97706);
    color: #ffffff;
    border: 1px solid #d97706;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 2px 6px rgba(217, 119, 6, 0.30);
}
html body .doc-restock-hint .dor-reorder-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(217, 119, 6, 0.40);
}
/* Urgent variant — when last order is past typical 30-day supply window */
html body .doc-restock-hint.restock-urgent {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border-color: rgba(220, 38, 38, 0.30);
    color: #7f1d1d;
}
html body .doc-restock-hint.restock-urgent .dor-text i,
html body .doc-restock-hint.restock-urgent .dor-text strong {
    color: #b91c1c;
}
html body .doc-restock-hint.restock-urgent .dor-reorder-btn {
    background: linear-gradient(180deg, #ef4444, #dc2626);
    border-color: #dc2626;
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.30);
}
html body .doc-restock-hint.restock-urgent .dor-reorder-btn:hover {
    box-shadow: 0 4px 10px rgba(220, 38, 38, 0.40);
}
@media (max-width: 480px) {
    html body .doc-restock-hint .dor-reorder-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   R50: ADMIN DASHBOARD — COMPREHENSIVE LIGHT-THEME OVERHAUL
   The inline CSS in admin.html is all dark-theme defaults. The existing
   styles.css overrides only covered KPIs, stat cards, gate, header, tabs.
   This batch covers everything else: tables, status pills, tracking inputs,
   filters, action buttons, alerts, charts, promo form, affiliate cards,
   notes, empty states. Every admin surface should look clean + consistent.
   ════════════════════════════════════════════════════════════════════════ */

/* ─────────── Low-stock alert banner ─────────── */
html body .admin-page .admin-alert {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%) !important;
    border: 1px solid rgba(239, 68, 68, 0.25) !important;
    color: #7f1d1d !important;
    border-radius: 14px !important;
    padding: 16px 20px !important;
    box-shadow: 0 1px 3px rgba(239, 68, 68, 0.06) !important;
}
html body .admin-page .admin-alert i {
    color: #dc2626 !important;
    font-size: 1.2rem !important;
}
html body .admin-page .admin-alert-item {
    background: rgba(220, 38, 38, 0.10) !important;
    border: 1px solid rgba(220, 38, 38, 0.22) !important;
    color: #991b1b !important;
    border-radius: 999px !important;
    padding: 4px 12px !important;
    font-weight: 700 !important;
    font-size: 0.78rem !important;
}

/* ─────────── KPI strip — urgent state (orange alert) ─────────── */
html body .admin-page .admin-kpi.urgent {
    background: linear-gradient(135deg, #fff7ed 0%, #fed7aa 100%) !important;
    border-left: 3px solid #f97316 !important;
}
html body .admin-page .admin-kpi.urgent .admin-kpi-label,
html body .admin-page .admin-kpi.urgent .admin-kpi-sub {
    color: #9a3412 !important;
}
html body .admin-page .admin-kpi.urgent .admin-kpi-value {
    color: #c2410c !important;
}
html body .admin-page .admin-kpi-value.danger { color: #dc2626 !important; }
html body .admin-page .admin-kpi-value.warn { color: #d97706 !important; }
html body .admin-page .admin-kpi-value.success { color: #059669 !important; }

/* ─────────── Filter / search row ─────────── */
html body .admin-page .admin-filter-input {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.10) !important;
    color: #0a0a0a !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    font-family: 'Inter', sans-serif !important;
    transition: border-color 0.15s, box-shadow 0.15s !important;
}
html body .admin-page .admin-filter-input::placeholder {
    color: #9ca3af !important;
}
html body .admin-page .admin-filter-input:focus {
    border-color: #0d9488 !important;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.15) !important;
}

/* ─────────── Tables — the big one ─────────── */
html body .admin-page .admin-table-wrap {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}
html body .admin-page .admin-table {
    background: #ffffff !important;
}
html body .admin-page .admin-table thead {
    background: #f9fafb !important;
    backdrop-filter: none !important;
}
html body .admin-page .admin-table th {
    background: #f9fafb !important;
    color: #6b7280 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    font-weight: 700 !important;
    font-size: 0.72rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    padding: 14px 14px !important;
}
html body .admin-page .admin-table td {
    background: #ffffff !important;
    color: #1f2937 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    padding: 16px 14px !important;
    vertical-align: middle !important;
    line-height: 1.45 !important;
    font-size: 0.9rem !important;
}
html body .admin-page .admin-table tbody tr:last-child td {
    border-bottom: none !important;
}
html body .admin-page .admin-table tbody tr:hover td {
    background: rgba(20, 184, 166, 0.04) !important;
}

/* ─────────── Order ref cell — clean monospace ─────────── */
html body .admin-page .admin-table td.order-ref {
    background: transparent !important;
    color: #0d9488 !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    /* 🔧 Force table-cell display + middle alignment. A legacy `.order-ref`
       rule elsewhere sets display:inline-block which breaks the td's natural
       row-height matching and pins text to the top of the row. */
    display: table-cell !important;
    vertical-align: middle !important;
}

/* ─────────── Customer cell ─────────── */
html body .admin-page .admin-customer-name {
    color: #0f172a !important;
    font-weight: 600 !important;
    font-size: 0.92rem !important;
}
html body .admin-page .admin-customer-email {
    color: #6b7280 !important;
    font-size: 0.82rem !important;
}

/* ─────────── Items cell ─────────── */
html body .admin-page .admin-order-items > div {
    color: #1f2937 !important;
}
html body .admin-page .admin-order-items {
    color: #4b5563 !important;
}

/* ─────────── Status pills — softer, more refined ─────────── */
html body .admin-page .admin-stage {
    border-radius: 999px !important;
    padding: 5px 12px !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px !important;
    border: 1px solid transparent !important;
}
html body .admin-page .admin-stage.awaiting {
    background: rgba(245, 158, 11, 0.10) !important;
    color: #b45309 !important;
    border-color: rgba(245, 158, 11, 0.25) !important;
}
html body .admin-page .admin-stage.ready {
    background: rgba(59, 130, 246, 0.10) !important;
    color: #1d4ed8 !important;
    border-color: rgba(59, 130, 246, 0.25) !important;
}
html body .admin-page .admin-stage.shipped {
    background: rgba(34, 197, 94, 0.10) !important;
    color: #047857 !important;
    border-color: rgba(34, 197, 94, 0.30) !important;
}
html body .admin-page .admin-mark-paid-inline {
    background: #ffffff !important;
    border: 1px solid rgba(34, 197, 94, 0.4) !important;
    color: #059669 !important;
}
html body .admin-page .admin-mark-paid-inline:hover {
    background: rgba(34, 197, 94, 0.08) !important;
    border-color: #059669 !important;
}

/* ─────────── Tracking input + button ─────────── */
html body .admin-page .admin-tracking-input {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.10) !important;
    color: #0a0a0a !important;
    border-radius: 8px !important;
    padding: 7px 11px !important;
    font-size: 0.83rem !important;
}
html body .admin-page .admin-tracking-input::placeholder {
    color: #9ca3af !important;
}
html body .admin-page .admin-tracking-input:focus {
    border-color: #0d9488 !important;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.15) !important;
}
html body .admin-page .admin-tracking-btn {
    background: rgba(20, 184, 166, 0.10) !important;
    border: 1px solid rgba(20, 184, 166, 0.30) !important;
    color: #0d9488 !important;
    border-radius: 8px !important;
    padding: 7px 11px !important;
}
html body .admin-page .admin-tracking-btn:hover {
    background: rgba(20, 184, 166, 0.18) !important;
}
html body .admin-page .admin-tracking-link {
    color: #0d9488 !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 0.83rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border-bottom: 1px dashed rgba(20, 184, 166, 0.35) !important;
}
html body .admin-page .admin-tracking-link:hover {
    border-bottom-style: solid !important;
}
html body .admin-page .admin-tracking-saved {
    color: #059669 !important;
}

/* ─────────── Row action buttons (notes / expand / delete) ─────────── */
html body .admin-page .admin-expand-btn,
html body .admin-page .admin-icon-btn,
html body .admin-page .admin-notes-icon {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.10) !important;
    color: #6b7280 !important;
    border-radius: 8px !important;
    width: 32px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.15s !important;
}
html body .admin-page .admin-expand-btn:hover,
html body .admin-page .admin-icon-btn:hover,
html body .admin-page .admin-notes-icon:hover {
    background: rgba(20, 184, 166, 0.06) !important;
    border-color: #0d9488 !important;
    color: #0d9488 !important;
}
html body .admin-page .admin-icon-btn.danger:hover {
    background: rgba(239, 68, 68, 0.06) !important;
    border-color: #dc2626 !important;
    color: #dc2626 !important;
}
html body .admin-page .admin-notes-icon.has-note {
    background: rgba(251, 191, 36, 0.10) !important;
    border-color: rgba(251, 191, 36, 0.40) !important;
    color: #d97706 !important;
}

/* ─────────── Notes popover textarea ─────────── */
html body .admin-page .admin-notes-popover textarea,
html body .admin-page .admin-notes-input {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.10) !important;
    color: #1f2937 !important;
    border-radius: 8px !important;
}
html body .admin-page .admin-notes-popover textarea:focus,
html body .admin-page .admin-notes-input:focus {
    border-color: #0d9488 !important;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.15) !important;
}

/* ─────────── Detail panel (expanded order row) ─────────── */
html body .admin-page .admin-order-detail td {
    background: #f9fafb !important;
    padding: 18px 22px !important;
}
html body .admin-page .admin-detail-section {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 12px !important;
    padding: 16px !important;
}
html body .admin-page .admin-detail-section h4 {
    color: #6b7280 !important;
    font-size: 0.72rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    margin-top: 0 !important;
}
html body .admin-page .admin-detail-section p,
html body .admin-page .admin-detail-section li {
    color: #1f2937 !important;
}
html body .admin-page .admin-detail-section strong {
    color: #0a0a0a !important;
}

/* ─────────── Generic badges (used in tables across tabs) ─────────── */
html body .admin-page .admin-badge {
    border-radius: 999px !important;
    padding: 3px 11px !important;
    border: 1px solid transparent !important;
    font-weight: 700 !important;
    font-size: 0.72rem !important;
}
html body .admin-page .admin-badge.pending {
    background: rgba(245, 158, 11, 0.10) !important;
    color: #b45309 !important;
    border-color: rgba(245, 158, 11, 0.25) !important;
}
html body .admin-page .admin-badge.active {
    background: rgba(34, 197, 94, 0.10) !important;
    color: #047857 !important;
    border-color: rgba(34, 197, 94, 0.25) !important;
}
html body .admin-page .admin-badge.rejected {
    background: rgba(239, 68, 68, 0.10) !important;
    color: #b91c1c !important;
    border-color: rgba(239, 68, 68, 0.25) !important;
}
html body .admin-page .admin-badge.paid {
    background: rgba(59, 130, 246, 0.10) !important;
    color: #1d4ed8 !important;
    border-color: rgba(59, 130, 246, 0.25) !important;
}
html body .admin-page .admin-pill {
    background: rgba(107, 114, 128, 0.10) !important;
    color: #4b5563 !important;
    border: 1px solid rgba(107, 114, 128, 0.20) !important;
    border-radius: 999px !important;
    padding: 3px 10px !important;
    font-size: 0.74rem !important;
    font-weight: 600 !important;
}

/* ─────────── Generic action buttons (approve / reject / mark-paid) ─────────── */
html body .admin-page .admin-action-btn {
    border-radius: 8px !important;
    border: 1px solid transparent !important;
    font-weight: 600 !important;
    padding: 7px 14px !important;
}
html body .admin-page .admin-action-btn.approve {
    background: rgba(34, 197, 94, 0.10) !important;
    color: #047857 !important;
    border-color: rgba(34, 197, 94, 0.30) !important;
}
html body .admin-page .admin-action-btn.approve:hover {
    background: rgba(34, 197, 94, 0.20) !important;
}
html body .admin-page .admin-action-btn.reject {
    background: rgba(239, 68, 68, 0.08) !important;
    color: #b91c1c !important;
    border-color: rgba(239, 68, 68, 0.25) !important;
}
html body .admin-page .admin-action-btn.reject:hover {
    background: rgba(239, 68, 68, 0.16) !important;
}
html body .admin-page .admin-action-btn.mark-paid {
    background: rgba(59, 130, 246, 0.08) !important;
    color: #1d4ed8 !important;
    border-color: rgba(59, 130, 246, 0.25) !important;
}

/* ─────────── Analytics — chart cards + bars ─────────── */
html body .admin-page .admin-chart-card {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    backdrop-filter: none !important;
    padding: 22px !important;
}
html body .admin-page .admin-chart-title {
    color: #6b7280 !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.78rem !important;
}
html body .admin-page .admin-bar-track {
    background: rgba(20, 184, 166, 0.08) !important;
}
html body .admin-page .admin-bar-fill {
    background: linear-gradient(90deg, #14b8a6, #2dd4bf) !important;
    box-shadow: 0 0 8px rgba(20, 184, 166, 0.35) !important;
}
html body .admin-page .admin-bar-label {
    color: #6b7280 !important;
}
html body .admin-page .admin-bar-value {
    color: #0f172a !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
}
html body .admin-page .admin-metric {
    background: #f9fafb !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: 12px !important;
    padding: 14px 12px !important;
}
html body .admin-page .admin-metric-value {
    color: #0f172a !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 800 !important;
}
html body .admin-page .admin-metric-label {
    color: #6b7280 !important;
}

/* ─────────── Promo / store-credit forms ─────────── */
html body .admin-page .admin-promo-form {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    backdrop-filter: none !important;
    padding: 22px !important;
}
html body .admin-page .admin-promo-field label {
    color: #6b7280 !important;
}
html body .admin-page .admin-promo-field input,
html body .admin-page .admin-promo-field select {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.10) !important;
    color: #0a0a0a !important;
    border-radius: 8px !important;
}
html body .admin-page .admin-promo-field input:focus,
html body .admin-page .admin-promo-field select:focus {
    border-color: #0d9488 !important;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.15) !important;
}
html body .admin-page .admin-promo-add {
    background: linear-gradient(180deg, #14b8a6, #0d9488) !important;
    border: 1px solid #0d9488 !important;
    color: #ffffff !important;
    border-radius: 999px !important;
    padding: 10px 20px !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 6px rgba(20, 184, 166, 0.25) !important;
}
html body .admin-page .admin-promo-add:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 10px rgba(20, 184, 166, 0.35) !important;
    background: linear-gradient(180deg, #14b8a6, #0f766e) !important;
}

/* ─────────── Affiliate request cards ─────────── */
html body .admin-page .admin-aff-card {
    background: #ffffff !important;
    border: 1px solid rgba(245, 158, 11, 0.30) !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    backdrop-filter: none !important;
    padding: 22px !important;
}
html body .admin-page .admin-aff-card .admin-aff-name,
html body .admin-page .admin-aff-card h3,
html body .admin-page .admin-aff-card strong {
    color: #0f172a !important;
}
html body .admin-page .admin-aff-card .admin-aff-meta,
html body .admin-page .admin-aff-card .admin-aff-date {
    color: #6b7280 !important;
}
html body .admin-page .admin-aff-btn.approve {
    background: rgba(34, 197, 94, 0.10) !important;
    color: #047857 !important;
    border: 1px solid rgba(34, 197, 94, 0.30) !important;
    border-radius: 999px !important;
}
html body .admin-page .admin-aff-btn.approve:hover {
    background: rgba(34, 197, 94, 0.20) !important;
}
html body .admin-page .admin-aff-btn.reject {
    background: rgba(239, 68, 68, 0.08) !important;
    color: #b91c1c !important;
    border: 1px solid rgba(239, 68, 68, 0.25) !important;
    border-radius: 999px !important;
}
html body .admin-page .admin-aff-btn.reject:hover {
    background: rgba(239, 68, 68, 0.16) !important;
}

/* ─────────── Section titles, popular products, empty/loading ─────────── */
html body .admin-page .admin-section-title {
    color: #0a0a0a !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 800 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}
html body .admin-page .admin-popular-item {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 12px !important;
}
html body .admin-page .admin-popular-name {
    color: #1f2937 !important;
}
html body .admin-page .admin-popular-count {
    color: #6b7280 !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
}
html body .admin-page .admin-popular-rank {
    color: #0d9488 !important;
}
html body .admin-page .admin-empty {
    color: #6b7280 !important;
}
html body .admin-page .admin-empty i {
    color: #d1d5db !important;
    opacity: 1 !important;
}
html body .admin-page .admin-loading {
    color: #6b7280 !important;
}

/* ─────────── Inventory grid — stock controls ─────────── */
html body .admin-page .admin-product-name {
    color: #0f172a !important;
}
html body .admin-page .admin-product-dosage {
    color: #6b7280 !important;
}
html body .admin-page .admin-stock-btn {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.10) !important;
    color: #0a0a0a !important;
    border-radius: 8px !important;
}
html body .admin-page .admin-stock-btn:hover {
    border-color: #0d9488 !important;
    color: #0d9488 !important;
    background: rgba(20, 184, 166, 0.04) !important;
}
html body .admin-page .admin-stock-input {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.10) !important;
    color: #0a0a0a !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
}
html body .admin-page .admin-stock-input:focus {
    border-color: #0d9488 !important;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.15) !important;
}
html body .admin-page .admin-stock-badge.out {
    background: rgba(239, 68, 68, 0.10) !important;
    color: #b91c1c !important;
}
html body .admin-page .admin-stock-badge.low {
    background: rgba(245, 158, 11, 0.10) !important;
    color: #b45309 !important;
}

/* ─────────── Export CSV button + Cleanup Test Data button ─────────── */
html body .admin-page .admin-export-btn,
html body .admin-page button[onclick*="exportCSV"],
html body .admin-page button[onclick*="downloadCSV"] {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.10) !important;
    color: #4b5563 !important;
    border-radius: 999px !important;
    padding: 10px 18px !important;
    font-weight: 600 !important;
    transition: all 0.15s !important;
}
html body .admin-page .admin-export-btn:hover,
html body .admin-page button[onclick*="exportCSV"]:hover,
html body .admin-page button[onclick*="downloadCSV"]:hover {
    border-color: #0d9488 !important;
    color: #0d9488 !important;
    background: rgba(20, 184, 166, 0.04) !important;
}
html body .admin-page .admin-cleanup-btn,
html body .admin-page button[onclick*="scanTestData"],
html body .admin-page button[onclick*="cleanupTest"] {
    background: rgba(239, 68, 68, 0.06) !important;
    border: 1px solid rgba(239, 68, 68, 0.25) !important;
    color: #b91c1c !important;
    border-radius: 999px !important;
    padding: 10px 18px !important;
    font-weight: 600 !important;
}
html body .admin-page .admin-cleanup-btn:hover,
html body .admin-page button[onclick*="scanTestData"]:hover,
html body .admin-page button[onclick*="cleanupTest"]:hover {
    background: rgba(239, 68, 68, 0.12) !important;
    border-color: #dc2626 !important;
}

/* ════════════════════════════════════════════════════════════════════════
   R51: ADMIN DASHBOARD — TAB-SPECIFIC FIXES
   Sections missed in R50 because they use different class prefixes:
   - Order detail expanded row (had dark navy bg leaking through)
   - Analytics tab (uses .aa-* prefix, not .admin-*)
   - Store Credit form (.admin-sc-*)
   - Date-range filter inputs
   ════════════════════════════════════════════════════════════════════════ */

/* ─────────── Order detail expanded row ─────────── */
html body .admin-page .admin-order-detail {
    background: #f9fafb !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}
html body .admin-page .admin-order-detail td {
    background: #f9fafb !important;
}
html body .admin-page .admin-detail-section {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 12px !important;
    padding: 16px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}
html body .admin-page .admin-detail-section h4 {
    color: #0d9488 !important;
    margin-bottom: 8px !important;
    text-transform: uppercase !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.6px !important;
    font-weight: 700 !important;
}
html body .admin-page .admin-detail-section p {
    color: #4b5563 !important;
}
html body .admin-page .admin-detail-section strong {
    color: #0f172a !important;
}

/* ─────────── Analytics tab — Period KPI cards (.aa-period-*) ─────────── */
html body .admin-page .aa-period-card {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s !important;
}
html body .admin-page .aa-period-card:hover {
    border-color: rgba(20, 184, 166, 0.40) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(20, 184, 166, 0.10) !important;
}
html body .admin-page .aa-period-card.aa-period-lifetime {
    background: linear-gradient(135deg, #ecfeff 0%, #f0fdfa 60%, #ffffff 100%) !important;
    border-color: rgba(20, 184, 166, 0.35) !important;
    box-shadow: 0 2px 8px rgba(20, 184, 166, 0.08) !important;
}
html body .admin-page .aa-period-label {
    color: #6b7280 !important;
}
html body .admin-page .aa-period-label i {
    color: #0d9488 !important;
}
html body .admin-page .aa-period-value {
    font-family: 'Inter', sans-serif !important;
    color: #0f172a !important;
    font-weight: 800 !important;
    -webkit-text-fill-color: initial !important;
    background: none !important;
}
html body .admin-page .aa-period-card.aa-period-lifetime .aa-period-value {
    background: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
html body .admin-page .aa-period-sub {
    color: #6b7280 !important;
}
html body .admin-page .aa-delta-up {
    color: #059669 !important;
}
html body .admin-page .aa-delta-down {
    color: #dc2626 !important;
}
html body .admin-page .aa-delta-flat {
    color: #9ca3af !important;
}

/* ─────────── Analytics tab — Funnel + Discount cards ─────────── */
html body .admin-page .aa-funnel-card,
html body .admin-page .aa-discount-card {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    padding: 22px !important;
}
html body .admin-page .aa-funnel-title {
    font-family: 'Inter', sans-serif !important;
    color: #0f172a !important;
    font-weight: 800 !important;
}
html body .admin-page .aa-funnel-title i {
    color: #0d9488 !important;
}
html body .admin-page .aa-funnel-label {
    color: #6b7280 !important;
}
html body .admin-page .aa-funnel-bar-wrap {
    background: rgba(20, 184, 166, 0.08) !important;
}
html body .admin-page .aa-funnel-bar {
    background: linear-gradient(90deg, #94a3b8, #64748b) !important;
}
html body .admin-page .aa-funnel-bar-paid {
    background: linear-gradient(90deg, #14b8a6, #2dd4bf) !important;
    box-shadow: 0 0 8px rgba(20, 184, 166, 0.30) !important;
}
html body .admin-page .aa-funnel-bar-shipped {
    background: linear-gradient(90deg, #3b82f6, #8b5cf6) !important;
    box-shadow: 0 0 8px rgba(99, 102, 241, 0.30) !important;
}
html body .admin-page .aa-funnel-count {
    color: #0f172a !important;
    font-family: 'JetBrains Mono', monospace !important;
}
html body .admin-page .aa-funnel-pct {
    color: #6b7280 !important;
}
html body .admin-page .aa-discount-total {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}
html body .admin-page .aa-discount-total-label {
    color: #6b7280 !important;
}
html body .admin-page .aa-discount-total-value {
    color: #d97706 !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 800 !important;
}
html body .admin-page .aa-discount-total-pct {
    color: #6b7280 !important;
}
html body .admin-page .aa-discount-row-label {
    color: #1f2937 !important;
}
html body .admin-page .aa-discount-row-bar {
    background: rgba(0, 0, 0, 0.05) !important;
}
html body .admin-page .aa-discount-row-value {
    color: #0f172a !important;
}

/* ─────────── Store Credit form ─────────── */
html body .admin-page .admin-sc-form {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    padding: 22px !important;
}
html body .admin-page .admin-sc-field label {
    color: #6b7280 !important;
}
html body .admin-page .admin-sc-field input,
html body .admin-page .admin-sc-field select {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.10) !important;
    color: #0a0a0a !important;
    border-radius: 8px !important;
    padding: 9px 12px !important;
    font-family: 'Inter', sans-serif !important;
}
html body .admin-page .admin-sc-field input::placeholder {
    color: #9ca3af !important;
}
html body .admin-page .admin-sc-field input:focus,
html body .admin-page .admin-sc-field select:focus {
    border-color: #0d9488 !important;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.15) !important;
}

/* ─────────── Date-range filter inputs ─────────── */
html body .admin-page .admin-date-filter input[type="date"],
html body .admin-page input.admin-filter-input[type="date"] {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.10) !important;
    color: #0a0a0a !important;
    border-radius: 8px !important;
    padding: 9px 12px !important;
}
html body .admin-page .admin-date-filter input[type="date"]:focus {
    border-color: #0d9488 !important;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.15) !important;
}
html body .admin-page .admin-date-filter span {
    color: #6b7280 !important;
}

/* ─────────── Bulk action bar (used on Orders) ─────────── */
html body .admin-page .admin-bulk-bar {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 12px !important;
    color: #1f2937 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}
html body .admin-page .admin-bulk-btn {
    background: rgba(59, 130, 246, 0.08) !important;
    border: 1px solid rgba(59, 130, 246, 0.25) !important;
    color: #1d4ed8 !important;
    border-radius: 999px !important;
    padding: 6px 14px !important;
    font-weight: 600 !important;
}
html body .admin-page .admin-bulk-btn:hover {
    background: rgba(59, 130, 246, 0.16) !important;
}

/* ════════════════════════════════════════════════════════════════════════
   R51: ACCOUNT DASHBOARD SIDEBAR — tactile nav card redesign
   Each tab becomes a full-width row with a colored icon "chip", clearer
   active state (left teal bar + tinted bg), polished count badges, and
   a divider before the external Affiliate link.
   ════════════════════════════════════════════════════════════════════════ */

/* Animated gradient border — the angle var animates from 0 to 360deg,
   rotating the conic gradient around the card. Mask cuts out the inner
   rectangle so only the 2px ring is visible. Falls back gracefully in
   older browsers (just shows a static teal border tint). */
@property --dash-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

html body .dash-tabs {
    background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: 18px !important;
    padding: 12px !important;
    gap: 6px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03), 0 12px 28px rgba(15, 23, 42, 0.04) !important;
    position: relative !important;
    overflow: hidden !important;
}
/* The rotating ring */
html body .dash-tabs::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    padding: 2px !important;
    background: conic-gradient(from var(--dash-angle, 0deg),
        rgba(20, 184, 166, 0) 0deg,
        rgba(20, 184, 166, 0.55) 50deg,
        rgba(45, 212, 191, 0.40) 90deg,
        rgba(20, 184, 166, 0.20) 140deg,
        rgba(20, 184, 166, 0) 200deg,
        rgba(20, 184, 166, 0) 360deg) !important;
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0) !important;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask-composite: exclude !important;
    pointer-events: none !important;
    animation: dashAngleSpin 7s linear infinite !important;
}
@keyframes dashAngleSpin {
    to { --dash-angle: 360deg; }
}
/* Respect reduced-motion users */
@media (prefers-reduced-motion: reduce) {
    html body .dash-tabs::after {
        animation: none !important;
    }
}

html body .dash-tab {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    position: relative !important;
    font-size: 0.93rem !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
    background: rgba(15, 23, 42, 0.025) !important;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
    transition: background 0.2s ease, transform 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.2s ease !important;
    outline: none !important;
}
html body .dash-tab:focus { outline: none !important; }
html body .dash-tab:focus-visible {
    outline: 2px solid rgba(20, 184, 166, 0.55) !important;
    outline-offset: 2px !important;
}

/* Icon chip — square tile with tinted bg, per-tab color + subtle inner depth */
html body .dash-tab > i:first-child {
    width: 34px !important;
    height: 34px !important;
    flex-shrink: 0 !important;
    border-radius: 9px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.95rem !important;
    background: rgba(20, 184, 166, 0.10) !important;
    color: #0d9488 !important;
    border: 1px solid rgba(20, 184, 166, 0.16) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s ease !important;
}

/* Per-tab icon colors — variety so each section reads distinct */
html body .dash-tabs .dash-tab:nth-child(1) > i:first-child {
    background: rgba(20, 184, 166, 0.10) !important;
    color: #0d9488 !important;
    border-color: rgba(20, 184, 166, 0.20) !important;
}
html body .dash-tabs .dash-tab:nth-child(2) > i:first-child {
    background: rgba(245, 158, 11, 0.10) !important;
    color: #d97706 !important;
    border-color: rgba(245, 158, 11, 0.22) !important;
}
html body .dash-tabs .dash-tab:nth-child(3) > i:first-child {
    background: rgba(59, 130, 246, 0.10) !important;
    color: #2563eb !important;
    border-color: rgba(59, 130, 246, 0.22) !important;
}
html body .dash-tabs .dash-tab:nth-child(4) > i:first-child {
    background: rgba(236, 72, 153, 0.10) !important;
    color: #db2777 !important;
    border-color: rgba(236, 72, 153, 0.22) !important;
}
html body .dash-tabs .dash-tab:nth-child(5) > i:first-child {
    background: rgba(139, 92, 246, 0.10) !important;
    color: #7c3aed !important;
    border-color: rgba(139, 92, 246, 0.22) !important;
}

/* Hover — subtle gray background + lift + bouncy icon */
html body .dash-tab:hover {
    background: rgba(15, 23, 42, 0.05) !important;
    border-color: rgba(20, 184, 166, 0.18) !important;
    color: #0f172a !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.05) !important;
}
html body .dash-tab:hover > i:first-child {
    transform: scale(1.08) rotate(-3deg) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 4px 10px rgba(20, 184, 166, 0.15) !important;
}

/* Active — teal-tinted full row with glow + animated left accent bar */
html body .dash-tab.active {
    background: linear-gradient(90deg, rgba(20, 184, 166, 0.14), rgba(20, 184, 166, 0.04)) !important;
    color: #0a0a0a !important;
    font-weight: 700 !important;
    border-color: rgba(20, 184, 166, 0.30) !important;
    box-shadow:
        inset 3px 0 0 #0d9488,
        0 4px 12px rgba(20, 184, 166, 0.10),
        0 1px 2px rgba(20, 184, 166, 0.06) !important;
    transform: translateY(0) !important;
}
html body .dash-tab.active > i:first-child {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 4px 12px rgba(20, 184, 166, 0.25) !important;
}

/* Count badge — clean pill with uniform sizing across all digit counts.
   min-width + center align stops 1-digit badges from looking egg-shaped. */
html body .dash-tab-count {
    margin-left: auto !important;
    margin-right: 0 !important;
    padding: 0 9px !important;
    min-width: 26px !important;
    height: 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    background: rgba(20, 184, 166, 0.10) !important;
    border: 1px solid rgba(20, 184, 166, 0.20) !important;
    color: #0d9488 !important;
    border-radius: 999px !important;
    font-family: 'Inter', sans-serif !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    letter-spacing: 0 !important;
}
html body .dash-tab.active .dash-tab-count {
    background: #ffffff !important;
    border-color: rgba(20, 184, 166, 0.35) !important;
    color: #0d9488 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}
/* Muted treatment for "0" — empty buckets shouldn't visually scream */
html body .dash-tab-count.is-zero,
html body .dash-tab .dash-tab-count[data-count="0"] {
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    color: #9ca3af !important;
}

/* External-link Affiliate row — separator above, slightly de-emphasized */
html body .dash-tab.dash-tab-link {
    margin-top: 8px !important;
    padding-top: 14px !important;
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: 0 0 12px 12px !important;
    /* Restore rounding below the separator via inner spacing */
    color: #4b5563 !important;
    text-decoration: none !important;
}
html body .dash-tab.dash-tab-link:hover {
    background: rgba(124, 58, 237, 0.05) !important;
    color: #0a0a0a !important;
}
html body .dash-tab .dash-tab-ext {
    margin-left: auto !important;
    font-size: 0.7rem !important;
    color: #9ca3af !important;
    transition: transform 0.15s ease, color 0.15s ease !important;
}
html body .dash-tab.dash-tab-link:hover .dash-tab-ext {
    color: #7c3aed !important;
    transform: translate(2px, -2px) !important;
}

/* Mobile — horizontal scroll, slimmer rows */
@media (max-width: 860px) {
    html body .dash-tabs {
        padding: 8px !important;
        gap: 4px !important;
    }
    html body .dash-tab {
        padding: 10px 12px !important;
        flex-shrink: 0 !important;
    }
    html body .dash-tab.dash-tab-link {
        margin-top: 0 !important;
        padding-top: 10px !important;
        border-top: none !important;
        border-left: 1px solid rgba(0, 0, 0, 0.06) !important;
        margin-left: 4px !important;
        padding-left: 14px !important;
    }
    html body .dash-tab.active {
        box-shadow: inset 0 -3px 0 #0d9488 !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   R52: AFFILIATE DASHBOARD — light-theme overhaul
   The .aff-dash-* CSS was authored for the dark site (navy bg + white
   text via background-clip: text). On the light theme everything reads
   as faded gradient text on near-white. Convert every dark surface to
   a clean white/tinted card with dark text.
   ════════════════════════════════════════════════════════════════════════ */

/* ─── Hero header v3 ─── */











/* ─── Tier badges + progress ─── */
html body .aff-page .aff-tier-badge.tier-rookie {
    background: #f3f4f6 !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    color: #4b5563 !important;
}
html body .aff-page .aff-tier-badge.tier-pro {
    background: rgba(20, 184, 166, 0.12) !important;
    border-color: rgba(20, 184, 166, 0.40) !important;
    color: #0d9488 !important;
    box-shadow: 0 4px 12px rgba(20, 184, 166, 0.15) !important;
}
html body .aff-page .aff-tier-badge.tier-elite {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.12), rgba(99, 102, 241, 0.12)) !important;
    border-color: rgba(168, 85, 247, 0.40) !important;
    color: #7c3aed !important;
}
html body .aff-page .aff-tier-badge.tier-legend {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.14), rgba(239, 68, 68, 0.10)) !important;
    border-color: rgba(245, 158, 11, 0.50) !important;
    color: #b45309 !important;
}





/* ─── Affiliate code pill ─── */



/* ─── Hero "Lifetime Earnings" big card ─── */










/* ─── Quick stats row (Total Sales / Available Balance / Lifetime Earned) ─── */








/* ─── Projection card ─── */








/* ─── Achievements section ─── */







html body .aff-page .aff-achievement.locked {
    opacity: 0.55 !important;
    filter: grayscale(0.6) !important;
}
html body .aff-page .aff-achievement.unlocked {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important;
    border-color: rgba(245, 158, 11, 0.40) !important;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.15) !important;
}
html body .aff-page .aff-achievement.unlocked .aff-achievement-icon {
    color: #d97706 !important;
}
html body .aff-page .aff-achievement.locked .aff-achievement-icon {
    color: #9ca3af !important;
}

html body .aff-page .aff-achievement.locked .aff-achievement-name {
    color: #6b7280 !important;
}



html body .aff-page .aff-achievement.locked .aff-achievement-reward {
    color: #9ca3af !important;
    border-top-color: rgba(0, 0, 0, 0.08) !important;
}
html body .aff-page .aff-achievement.locked .aff-achievement-reward i {
    color: #9ca3af !important;
}

/* ─── Top products card ─── */










/* ─── Mini stats row (This Week / This Month / Avg Order / Last Sale) ─── */







/* ════════════════════════════════════════════════════════════════════════
   R53: Account-page top spacing — overcome the global
   `html body main { padding-top: 84px !important }` rule from line 24677
   that beats .auth-page on specificity (3 elements > 1 class).
   This selector adds the .auth-page class qualifier on the main element,
   bumping specificity to (0,1,3) so it wins.
   ════════════════════════════════════════════════════════════════════════ */
html body main.auth-page,
html body main#main-content.auth-page {
    padding-top: 127px !important;
}
@media (max-width: 540px) {
    html body main.auth-page,
    html body main#main-content.auth-page {
        padding-top: 100px !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   R54: DEEP MOBILE-ONLY FIXES (max-width: 768px and tighter)
   Every rule is scoped inside a mobile media query so the PC layout is
   completely untouched. Addresses:
     • announcement-bar height 76px → compact
     • email-popup blocking Add to Cart / product grid → smaller, dismissable
     • live-order-toast covering CTAs → reposition + shrink
     • back-to-top circle overlapping content → smaller + further out
     • horizontal chip strips ("quality-tabs" etc) → scroll-snap + hint
     • search input placeholder truncation → shorter alt
     • touch targets < 44px → enlarge
     • hero copy + buttons → tighter rhythm
     • cart drawer / sidebar padding → safer insets
     • footer disclaimer cleared from BTT overlap
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* ── 1. Announcement bar: cap height, tighten line-height, allow wrap ── */
    html body .announcement-bar {
        padding: 6px 10px !important;
        font-size: 0.72rem !important;
        line-height: 1.35 !important;
    }
    html body .announcement-bar .announcement-content {
        gap: 4px !important;
        flex-wrap: wrap !important;
        line-height: 1.3 !important;
    }
    html body .announcement-bar .ann-applied {
        font-size: 0.95em !important;
        display: inline !important;
    }

    /* ── 2. Email signup popup: smaller, dismissable, doesn't block CTAs ── */
    html body .email-popup {
        max-width: calc(100% - 16px) !important;
        width: calc(100% - 16px) !important;
        left: 8px !important;
        right: 8px !important;
        transform: none !important;
        padding: 12px 14px 14px !important;
        border-radius: 14px 14px 0 0 !important;
        box-shadow: 0 -6px 24px rgba(15, 23, 42, 0.14) !important;
        gap: 10px !important;
    }
    html body .email-popup-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 0.95rem !important;
        border-radius: 10px !important;
    }
    html body .email-popup-text strong {
        font-size: 0.82rem !important;
        line-height: 1.25 !important;
    }
    html body .email-popup-text span {
        font-size: 0.72rem !important;
        line-height: 1.35 !important;
    }
    html body .email-popup-form input {
        padding: 10px 12px !important;
        font-size: 0.85rem !important;
        height: 40px !important;
    }
    html body .email-popup-form button {
        width: 40px !important;
        height: 40px !important;
        flex-shrink: 0 !important;
    }
    html body .email-popup-close {
        top: 6px !important;
        right: 8px !important;
        padding: 8px !important;
        font-size: 0.95rem !important;
        min-width: 32px !important;
        min-height: 32px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
    }

    /* On product detail pages, email popup MUST NOT block sticky buy bar.
       The sticky bar (.sticky-cart-bar, h:69px, z:8500) lives at bottom:0.
       Body class on product pages is `has-product-page`. */
    html body.has-product-page .email-popup.visible,
    html body.product-page-active .email-popup.visible {
        bottom: 80px !important;
        border-radius: 14px !important;
    }
    /* Generic toasts above sticky buy bar on product pages */
    html body.has-product-page .live-order-toast,
    html body.has-product-page .toast {
        bottom: 86px !important;
    }
    /* Back-to-top above the sticky buy bar on product pages */
    html body.has-product-page .back-to-top {
        bottom: 80px !important;
    }

    /* ── 3. Live order toast: shrink + reposition above BTT button ── */
    html body .live-order-toast {
        left: 8px !important;
        right: auto !important;
        bottom: 76px !important;
        max-width: calc(100% - 80px) !important;
    }
    html body .live-order-toast .lot-inner {
        padding: 10px 32px 10px 10px !important;
        gap: 8px !important;
    }
    html body .live-order-toast .lot-icon {
        width: 30px !important;
        height: 30px !important;
        font-size: 0.85rem !important;
    }
    html body .live-order-toast .lot-body,
    html body .live-order-toast .lot-text {
        font-size: 0.78rem !important;
        line-height: 1.35 !important;
    }
    /* Generic .toast (success/error) — sit above BTT */
    html body .toast,
    html body main .toast {
        left: 8px !important;
        right: 8px !important;
        bottom: 76px !important;
        max-width: calc(100% - 16px) !important;
    }

    /* ── 4. Back-to-top: smaller, tucked into safe corner ── */
    html body .back-to-top {
        bottom: 16px !important;
        right: 16px !important;
        width: 40px !important;
        height: 40px !important;
        font-size: 0.85rem !important;
    }

    /* ── 5. Horizontal chip / tab strips: scroll-snap + hint shadow ── */
    html body .quality-tabs,
    html body .tabs-strip,
    html body .filter-chips-strip,
    html body .product-tabs {
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding-bottom: 4px !important;
        position: relative !important;
        mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%) !important;
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%) !important;
    }
    html body .quality-tabs::-webkit-scrollbar,
    html body .tabs-strip::-webkit-scrollbar,
    html body .filter-chips-strip::-webkit-scrollbar,
    html body .product-tabs::-webkit-scrollbar {
        display: none !important;
    }
    html body .quality-tabs > *,
    html body .tabs-strip > *,
    html body .filter-chips-strip > *,
    html body .product-tabs > * {
        scroll-snap-align: start !important;
        flex-shrink: 0 !important;
    }

    /* ── 6. Search input placeholder: shorter on mobile (via CSS) ── */
    html body input[type="search"]::placeholder,
    html body .product-search input::placeholder,
    html body #product-search::placeholder {
        font-size: 0.85rem !important;
    }

    /* ── 7. Hero copy/buttons: tighter rhythm + proper button sizing ── */
    html body .hero h1.hero-title,
    html body .hero-title {
        font-size: 1.85rem !important;
        line-height: 1.1 !important;
        margin-bottom: 14px !important;
    }
    html body .hero-subtitle,
    html body .hero p {
        font-size: 0.92rem !important;
        line-height: 1.5 !important;
    }
    html body .hero .btn-primary,
    html body .hero .btn-secondary,
    html body .hero a[class*="btn"] {
        min-height: 48px !important;
        padding: 12px 22px !important;
        font-size: 0.92rem !important;
    }

    /* ── 8. Touch targets: ensure all icon buttons hit 40×40 minimum ── */
    html body .nav-actions button,
    html body .nav-actions a,
    html body .icon-btn,
    html body .nav-icon-btn {
        min-width: 40px !important;
        min-height: 40px !important;
    }

    /* ── 9. Cart drawer / sidebar: safer insets ── */
    html body .cart-sidebar,
    html body #cart-sidebar {
        max-width: 100vw !important;
    }
    html body .cart-sidebar-content,
    html body #cart-sidebar .cart-content {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    /* ── 10. Footer disclaimer: bottom padding so BTT doesn't cover text ── */
    html body footer.site-footer .footer-disclaimer,
    html body .site-disclaimer {
        padding-bottom: 60px !important;
    }
}

/* ── Tighter mobile (≤ 480px): extra compaction ── */
@media (max-width: 480px) {
    html body .announcement-bar {
        font-size: 0.68rem !important;
        padding: 5px 8px !important;
    }
    html body .hero h1.hero-title,
    html body .hero-title {
        font-size: 1.65rem !important;
    }
    /* Stat strip already collapsed to 1 col at 460px in earlier rule */

    /* Email popup even more compact — keep form inline if possible */
    html body .email-popup {
        padding: 10px 12px 12px !important;
    }
    html body .email-popup-text {
        flex-basis: calc(100% - 50px) !important;
    }

    /* Newsletter signup form button still tappable */
    html body .email-popup-form button {
        width: 44px !important;
        height: 44px !important;
    }
}

/* ── Live-order-toast: hide on very small viewports during checkout
      so it never blocks payment tiles ── */
@media (max-width: 540px) {
    html body.checkout-page-active .live-order-toast,
    html body[class*="checkout"] .live-order-toast {
        display: none !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   R55: CRITICAL MOBILE FIXES (round 2)
   User-reported bugs:
     A. Product search bar flex-basis bug → wrapper grows to 360px height
        because .catalog-toolbar is `flex-direction: column` on mobile and
        .product-search has `flex: 1 1 360px` which becomes height.
     B. COA cards (and any .cy-stagger grids) invisible on mobile because
        IntersectionObserver threshold 0.12 is unreachable on tall grids.
        JS fix already applied; CSS safety net here for cached app.js cases.
     C. Touch scroll glitches from -webkit-overflow-scrolling missing on
        scrollable horizontal strips, plus overflow-x on body causing
        rubber-banding on iOS.
   ════════════════════════════════════════════════════════════════════════ */

/* A. Fix product search bar 360px-height bug on mobile.
   Catalog toolbar collapses to column at ~860px; product-search's
   `flex: 1 1 360px` becomes flex-basis: 360px in column direction
   (= height). Reset to auto so it uses natural input height. */
@media (max-width: 860px) {
    html body .catalog-toolbar .product-search,
    html body .catalog-sticky-wrap .product-search,
    html body div.product-search {
        flex: 0 0 auto !important;
        flex-basis: auto !important;
        height: auto !important;
        min-height: 50px !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    html body .catalog-toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    html body .catalog-toolbar .sort-dropdown {
        width: 100% !important;
    }
}

/* B. Safety net: if cy-stagger doesn't get .in-view within a reasonable
   time, ensure cards are visible. Targets the most common failure case
   on mobile where grid is taller than viewport. */
@media (max-width: 768px) {
    /* For tall grids on mobile, just show content immediately to avoid
       observer threshold issues. The visual stagger is nice-to-have but
       INVISIBLE CONTENT is a bug. */
    html body .coa-grid.cy-stagger > *,
    html body .product-grid.cy-stagger > *,
    html body .products-grid.cy-stagger > *,
    html body #products-grid.cy-stagger > *,
    html body [class*="product"][class*="grid"].cy-stagger > * {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* C. Scroll behavior fixes for iOS/mobile */
@media (max-width: 768px) {
    /* iOS rubber-banding from accidental horizontal overflow */
    html, body {
        overflow-x: hidden !important;
    }
    /* Smooth momentum scroll for horizontally scrollable strips */
    html body .quality-tabs,
    html body .tabs-strip,
    html body .filter-chips-strip,
    html body .product-tabs,
    html body .trust-marquee,
    html body [class*="chip-strip"],
    html body [class*="tag-list"] {
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-x: contain !important;
    }
    /* Mobile menu open should not lock body scroll incorrectly. If a class
       like .mobile-menu-open is on <html>/<body>, ensure position:fixed
       doesn't lose scroll position when reopening. */
    
    /* Prevent layout shift when scrollbar appears */
    html { scrollbar-gutter: stable; }
}

/* D. Reduce hero "main" padding-top — homepage hero was being pushed
      too low by the navbar's fixed positioning on mobile, leaving an
      awkward gap above "FOR RESEARCH USE ONLY" pill. */
@media (max-width: 768px) {
    html body main {
        padding-top: 70px !important;
    }
    /* But keep account / auth pages with the bumped padding (R53) */
    html body main.auth-page,
    html body main#main-content.auth-page {
        padding-top: 90px !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   R56: Touch-device hover suppression + visual polish
   On mobile/touch devices, :hover sticks after a tap — the "Cognitive
   Research" card, the Add to Cart button etc. all stayed in their hover
   state visually (black/dark) after being touched. Use @media (hover: none)
   to suppress :hover styling for non-hover-capable devices.
   ════════════════════════════════════════════════════════════════════════ */

/* A. Suppress stuck-hover on touch devices — undo transforms/shadows */
@media (hover: none) and (pointer: coarse) {
    html body .product-card:hover,
    html body .product-card:hover .product-add-btn,
    html body .bestseller-card:hover,
    html body .bestseller-card:hover .bs-cart-btn,
    html body .goal-card:hover,
    html body .why-card:hover,
    html body .coa-card:hover {
        transform: none !important;
    }
    /* Don't keep button in "active" teal gradient state after tap */
    html body .product-card .product-add-btn:hover,
    html body .product-card:hover .product-add-btn,
    html body .bestseller-card .bs-cart-btn:hover,
    html body .bestseller-card:hover .bs-cart-btn {
        background: #0a0a0a !important;
        background-image: none !important;
        color: #ffffff !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    }
    /* But preserve the :active state (pressed feedback during tap) — short */
    html body .product-card .product-add-btn:active,
    html body .bestseller-card .bs-cart-btn:active {
        background: linear-gradient(180deg, #14b8a6 0%, #0d9488 100%) !important;
        transform: scale(0.98) !important;
    }
    /* Generic button hover suppression */
    html body .btn-primary:hover,
    html body .btn-secondary:hover,
    html body .hero-cta .btn-primary:hover {
        transform: none !important;
    }
    /* Goal-card arrow shouldn't go BLACK on tap (Cognitive Research issue) */
    html body .goal-card:hover .goal-arrow,
    html body .goal-card:hover [class*="arrow"] {
        background: rgba(20, 184, 166, 0.10) !important;
        color: #0d9488 !important;
    }
}

/* B. Form submit buttons: full-width on mobile so text is never cropped
      by tight max-width or narrow container. */
@media (max-width: 540px) {
    html body .contact-form button[type="submit"],
    html body .contact-form .btn-primary,
    html body form.contact-form .btn-primary {
        width: 100% !important;
        max-width: 100% !important;
        padding: 14px 20px !important;
        font-size: 0.95rem !important;
    }
}

/* C. Trust marquee on hero — slightly more contrast on mobile so the
      checklist text doesn't blend into the gradient bg. */
@media (max-width: 768px) {
    html body .trust-marquee,
    html body .trust-marquee .marquee-track {
        font-size: 0.78rem !important;
        line-height: 1.4 !important;
    }
}

/* D. Bundle "Add to Cart" + Browse Catalog buttons: ensure tappable */
@media (max-width: 768px) {
    html body .bundle-cta button,
    html body .bundle-add-btn,
    html body a.btn[href*="products"] {
        min-height: 48px !important;
    }
}

/* E. Sticky cart bar quantity input — make tap targets bigger */
@media (max-width: 768px) {
    html body .sticky-cart-bar .qty-btn,
    html body .pp-qty-btn,
    html body .qty-stepper button {
        min-width: 36px !important;
        min-height: 36px !important;
        font-size: 1.1rem !important;
    }
}

/* F. Modal/popup max-height + scroll on mobile so deep content
      doesn't escape viewport. */
@media (max-width: 768px) {
    html body .modal-content,
    html body [class*="modal"] [class*="content"]:not(.cart-content) {
        max-height: 88vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* G. Footer payment icons: a touch larger on mobile (were tiny) */
@media (max-width: 540px) {
    html body footer .payment-icon,
    html body footer [class*="payment"] [class*="icon"] {
        min-width: 36px !important;
        min-height: 28px !important;
    }
}

/* H. Cart drawer close button: bigger tap target */
@media (max-width: 768px) {
    html body .cart-sidebar .close-cart,
    html body #cart-sidebar .close-cart,
    html body [class*="cart"] [class*="close"] {
        min-width: 44px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* I. Search modal: don't extend below viewport on small screens */
@media (max-width: 768px) {
    html body #search-modal .search-modal-content,
    html body .search-modal .search-modal-content {
        max-height: 88vh !important;
        overflow-y: auto !important;
    }
}

/* J. Bottom-fixed FAB-style buttons should NOT stack visually.
      Stagger their bottom positions so all stay accessible. */
@media (max-width: 768px) {
    /* Already done in R54 + R55 — back-to-top: 16px, toast: 76px, popup: 80px */
}

/* K. Body horizontal margin reset — homepage hero pill was getting cropped
      because some sections had `padding: 0 12px` set globally on container.
      Tighten only where it doesn't break. */
@media (max-width: 480px) {
    html body section .container {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
}

/* L. Hide search modal keyboard hints on touch devices (NAV/OPEN/CLOSE
      shortcuts are useless without a physical keyboard) */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
    html body .search-modal-hints,
    html body .search-modal .search-shortcuts,
    html body [class*="search-modal"] [class*="hint"],
    html body [class*="search-modal"] [class*="kbd"] {
        display: none !important;
    }
}

/* M. Search modal: tighter on mobile so suggestions are visible without
      excessive scroll */
@media (max-width: 768px) {
    html body .search-modal {
        padding: 16px !important;
    }
    html body .search-modal-inner,
    html body .search-modal-content {
        max-width: 100% !important;
        padding: 16px !important;
        border-radius: 16px !important;
    }
    html body .search-modal input[type="search"],
    html body .search-modal-input {
        font-size: 16px !important;  /* prevents iOS Safari zoom */
        padding: 12px 14px !important;
    }
}

/* N. CRITICAL: prevent iOS from auto-zooming inputs (< 16px font triggers
      that behavior; sets all form inputs to at least 16px on mobile to
      block the zoom). This avoids the disorienting "page jumps" after
      tapping an input. */
@media (max-width: 768px) {
    html body input[type="text"],
    html body input[type="email"],
    html body input[type="search"],
    html body input[type="password"],
    html body input[type="tel"],
    html body input[type="number"],
    html body input[type="url"],
    html body select,
    html body textarea {
        font-size: 16px !important;
    }
    /* Exceptions: form fields that need to fit narrow contexts can opt-in
       to a smaller font via the .form-input-sm class */
    
}

/* O. Fix sticky cart bar overlap with content at very bottom of product
      detail pages — add bottom padding to main when sticky bar is active */
@media (max-width: 768px) {
    html body.has-product-page main {
        padding-bottom: 84px !important;
    }
}

/* P. Compact bundle cards on mobile so 4-bundle layouts don't overflow */
@media (max-width: 480px) {
    html body .bundle-tier-card,
    html body [class*="bundle-tier"] {
        padding: 14px !important;
    }
}

/* Q. Order/order-detail tables: force horizontal scroll for legibility
      rather than squishing columns to unreadable width */
@media (max-width: 540px) {
    html body table.orders-table,
    html body .orders-list table,
    html body .ppor-table,
    html body table[class*="order"] {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        white-space: nowrap !important;
    }
}

/* R. Affiliate page numbers (20% / 5%) heading sizes scale on mobile */
@media (max-width: 480px) {
    html body .aff-stat-value,
    html body [class*="aff-stat"] [class*="value"] {
        font-size: 1.85rem !important;
    }
}

/* S. Filter chips horizontal padding adjusted */


/* ════════════════════════════════════════════════════════════════════════
   R57: USER-REPORTED MOBILE BUGS (round 3)
   User saw on real iPhone:
     1. Cookie banner buttons orphan onto 2 lines (Manage Preferences |
        Reject All on row 1, Accept All alone on row 2) — looks janky
     2. Hero trust bullets "99%+ purity · Published COAs · Industry-low
        prices · USA shipped" wraps awkwardly with bullet dots
     3. Sticky-cart-bar "Your Cart · 1 items · CHECKOUT" takes too much
        space on mobile homepage when cart has items
     4. Two empty white "boxes" peeking up at very bottom of viewport
        (the email-popup's 3px overflow + sticky-cart-bar's transparent
        wrapper rendering)
   ════════════════════════════════════════════════════════════════════════ */

/* ──── Fix 1: Cookie banner — clean stacked layout on mobile ──── */
@media (max-width: 540px) {
    html body #cookie-consent.cookie-consent .cookie-actions {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        gap: 8px !important;
        width: 100% !important;
    }
    html body #cookie-consent.cookie-consent .cookie-actions button {
        width: 100% !important;
        margin: 0 !important;
        min-height: 44px !important;
        font-size: 0.88rem !important;
        padding: 12px 16px !important;
    }
    /* Primary "Accept All" first/top for emphasis (uses order) */
    html body #cookie-consent.cookie-consent .cookie-btn-primary {
        order: -1 !important;
        background: linear-gradient(135deg, #14b8a6, #0d9488) !important;
        color: #ffffff !important;
        border: none !important;
        font-weight: 700 !important;
    }
    /* Tighter container padding so banner doesn't dominate viewport */
    html body #cookie-consent.cookie-consent,
    html body .cookie-consent {
        padding: 14px 14px 16px !important;
        max-width: calc(100% - 16px) !important;
        left: 8px !important;
        right: 8px !important;
        border-radius: 14px !important;
        bottom: 8px !important;
    }
    html body .cookie-consent .cookie-content {
        gap: 10px !important;
    }
    html body .cookie-consent .cookie-text strong {
        font-size: 0.9rem !important;
    }
    html body .cookie-consent .cookie-text p,
    html body .cookie-consent .cookie-text span {
        font-size: 0.78rem !important;
        line-height: 1.4 !important;
    }
}

/* ──── Fix 2: Hero trust bullets — cleaner wrap on mobile ──── */
@media (max-width: 540px) {
    html body .hero .hero-description,
    html body .hero p.hero-description {
        font-size: 0.85rem !important;
        line-height: 1.55 !important;
        max-width: 320px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 0 8px !important;
        letter-spacing: 0 !important;
    }
}

/* ──── Fix 3: Sticky cart bar — hide on mobile (cart icon in nav is enough) ──── */
@media (max-width: 768px) {
    html body #sticky-cart-bar,
    html body .sticky-cart-bar {
        display: none !important;
    }
    /* But KEEP the product-page sticky buy bar — different element with the
       same class name. We need to distinguish them. The homepage one has
       id=#sticky-cart-bar (singular). Product page sticky bar is also
       .sticky-cart-bar but lives inside .has-product-page body class. */
    html body.has-product-page .sticky-cart-bar:not(#sticky-cart-bar) {
        display: flex !important;
    }
}

/* ──── Fix 4: Eliminate the white-box peek-through at viewport bottom ──── */
@media (max-width: 768px) {
    /* The email-popup at bottom: -200px leaves a ~3px sliver visible when
       its border / shadow extends. Force it offscreen until .visible class
       applied — and zero out the box-shadow when hidden. */
    html body .email-popup:not(.visible) {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
    /* Sticky-cart-bar wrapper (when empty cart) — even with bg:transparent
       it has internal box-shadow. Hide entirely when "0 items" state. */
    html body #sticky-cart-bar[data-empty="true"],
    html body .sticky-cart-bar.is-empty {
        display: none !important;
    }
    /* Toast container, when in is-out state (transform:translateY(40%))
       can leave a sliver visible. Force display:none in is-out state. */
    html body .live-order-toast.is-out:not(.is-in) {
        display: none !important;
    }
}

/* ──── Bonus: Remove sticky-cart-bar from desktop too if user has no items ──── */
html body #sticky-cart-bar:empty {
    display: none !important;
}

/* ──── Critical fix: #toast permanently rendered at opacity:1 even when
        translated offscreen — peeks into viewport bottom on mobile.
        Add proper opacity/pointer-events hidden state. ──── */
html body #toast,
html body .toast {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
    transition: transform 0.3s ease, opacity 0.3s ease, visibility 0s linear 0.3s !important;
}
html body #toast.show,
html body .toast.show {
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
    transition: transform 0.3s ease, opacity 0.3s ease, visibility 0s linear 0s !important;
}

/* CRITICAL: The original toast CSS uses `transform: translateX(-50%) translateY(...)`
   assuming `left: 50%`. My earlier R54 set `left: 8px` to make the toast
   left-anchored on mobile — but `translateX(-50%)` still shifts it -50% of
   its own width, pushing it ~175px OFF-SCREEN to the LEFT.
   Fix: cancel the X-axis translate on mobile (keep the Y for slide-in/out).
   Hidden state: stay below viewport via translateY only.
   Shown state: no transform at all. */
@media (max-width: 768px) {
    html body #toast,
    html body .toast {
        transform: translateY(120%) !important;
    }
    html body #toast.show,
    html body .toast.show {
        transform: translateY(0) !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   R67: Checkout & confirmation page mobile polish
   User-reported issues:
     1. Green trust strip (US Domestic Shipping / Discreet Packaging /
        Free Shipment Protection / SSL-Encrypted Checkout) has bad
        spacing on mobile — 4 items wrapping to 3 uneven lines (2+1+1)
     2. "Continue to Payment" button appears BEFORE the contact form
        because .checkout-info-right has order: -1 on ≤900px
     3. The Estimated Delivery timeline on confirmation page looks
        faded/bad — colors designed for old dark theme (white-transparent
        bg, light-blue active label) that don't read on the new light
        theme. 4-step horizontal timeline also breaks awkwardly on mobile.
   ════════════════════════════════════════════════════════════════════════ */

/* ─── 1. Trust strip: clean 2x2 grid on mobile ─── */
@media (max-width: 540px) {
    html body .checkout-trust-strip {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        padding: 12px 14px !important;
    }
    html body .checkout-trust-strip .checkout-trust-item {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        font-size: 0.78rem !important;
        line-height: 1.2 !important;
    }
}

/* ─── 2. Checkout flow: form FIRST, summary+button BELOW on mobile ─── */
@media (max-width: 900px) {
    html body .checkout-info-right {
        order: 0 !important;  /* override the order: -1 from earlier rule */
    }
    html body .checkout-info-left {
        order: -1 !important;  /* explicit: form column comes first */
    }
}

/* ─── 3. Confirmation timeline: brand-teal palette + grid layout on mobile ─── */

/* Color fix everywhere (not just mobile) — the dim white-transparent
   colors were designed for old dark theme. Replace with light-theme
   appropriate values. */
html body .confirm-delivery-timeline .confirm-timeline-dot {
    background: #e2e8f0 !important;       /* soft slate */
    border: 2px solid #cbd5e1 !important;
}
html body .confirm-delivery-timeline .confirm-timeline-step.active .confirm-timeline-dot {
    background: #14b8a6 !important;
    border-color: #0d9488 !important;
    box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.18) !important;
    color: #ffffff !important;
}
html body .confirm-delivery-timeline .confirm-timeline-bar {
    background: #e2e8f0 !important;
}
html body .confirm-delivery-timeline .confirm-timeline-step.active ~ .confirm-timeline-bar {
    /* bars after an active step stay light (since next step not reached) */
    background: #e2e8f0 !important;
}
html body .confirm-delivery-timeline .confirm-timeline-label {
    color: #475569 !important;
    font-weight: 600 !important;
}
html body .confirm-delivery-timeline .confirm-timeline-step.active .confirm-timeline-label {
    color: #0d9488 !important;
    font-weight: 700 !important;
}
html body .confirm-delivery-timeline .confirm-timeline-date {
    color: #64748b !important;
}

/* Mobile: switch from horizontal to vertical timeline so each step has
   room to breathe instead of cramped 2x2 wrap. */
@media (max-width: 540px) {
    html body .confirm-delivery-timeline {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
    }
    html body .confirm-delivery-timeline .confirm-timeline-step {
        flex-direction: row !important;
        min-width: 0 !important;
        width: 100% !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 8px 12px !important;
        text-align: left !important;
    }
    html body .confirm-delivery-timeline .confirm-timeline-dot {
        margin-bottom: 0 !important;
        width: 18px !important;
        height: 18px !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.65rem !important;
    }
    html body .confirm-delivery-timeline .confirm-timeline-label {
        text-align: left !important;
        flex: 1 !important;
    }
    html body .confirm-delivery-timeline .confirm-timeline-date {
        text-align: right !important;
        margin-top: 0 !important;
        font-size: 0.75rem !important;
        font-weight: 500 !important;
        white-space: nowrap !important;
    }
    /* Convert the horizontal connector bars to vertical lines between steps */
    html body .confirm-delivery-timeline .confirm-timeline-bar {
        width: 2px !important;
        height: 14px !important;
        margin: 0 0 0 21px !important;   /* aligned under dot center: 12px pad + 18/2 = 21 */
        min-width: 2px !important;
        align-self: flex-start !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   R68: COMPREHENSIVE MOBILE PASS — consolidated findings from full audit

   Sources:
     • Agent 1 (overflow risks): hardcoded widths, font-sizes < 14px,
       white-space: nowrap, fixed-position width issues
     • Agent 2 (dark-theme leftovers): rgba(255,255,255,X) backgrounds
       and borders that vanish on light theme
     • Agent 3 (touch targets + forms): sub-40px buttons, missing :active
       states, custom checkboxes too small
     • Agent 4 (JS-rendered components): mobile-unfriendly inline styles,
       COA modal tables without scroll containers, autocomplete positioning
     • Direct browser audit of all 46 pages

   All rules scoped @media (max-width: 768px) or tighter — desktop intact.
   ════════════════════════════════════════════════════════════════════════ */

/* ─── A. Form input fields: cross-cutting fixes ─── */
@media (max-width: 768px) {
    /* Bigger checkbox/radio for mobile (16px → 20px) */
    html body input[type="checkbox"],
    html body input[type="radio"] {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        min-height: 20px !important;
        cursor: pointer !important;
    }
    /* Form labels next to checkboxes need pointer cursor + larger tap zone */
    html body label:has(input[type="checkbox"]),
    html body label:has(input[type="radio"]) {
        cursor: pointer !important;
        padding: 4px 0 !important;
    }
}

/* ─── B. Affiliate dashboard: settings rows that overflow on mobile ─── */
@media (max-width: 540px) {
    html body .aff-settings-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    html body .aff-settings-row > * {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
    html body .aff-settings-row select,
    html body .aff-settings-row input {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* ─── C. Product page Notify button (pp-notify-wrap min-width: 220px) ─── */
@media (max-width: 480px) {
    html body #pp-notify-wrap,
    html body .pp-notify-wrap,
    html body [id="pp-notify-wrap"] {
        min-width: 0 !important;
        flex: 1 1 100% !important;
        width: 100% !important;
    }
}

/* ─── D. COA modal tables: horizontal scroll for analytical results ─── */
@media (max-width: 768px) {
    html body .coa-modal .coa-table,
    html body .coa-popup .coa-table,
    html body table.coa-table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        max-width: 100% !important;
        white-space: nowrap !important;
        font-size: 0.82rem !important;
    }
    html body .coa-modal .coa-table tbody,
    html body table.coa-table tbody {
        display: table !important;
        width: 100% !important;
        min-width: 480px !important;
    }
    /* Generic responsive table wrapper */
    html body .coa-table-wrap,
    html body [class*="table-wrap"]:has(table) {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* ─── E. Replace remaining light-blue active states with brand teal ─── */
/* Confirmation page timeline active label was already addressed in R67.
   But there are other places where #93c5fd light-blue is used as an
   active/hover indicator instead of the brand teal #0d9488. */
html body .confirm-delivery-timeline .confirm-timeline-step.active .confirm-timeline-label {
    color: #0d9488 !important;
}
/* These weren't covered above — extra coverage for any stragglers */
html body [class*="timeline"] .active [class*="label"][style*="#93c5fd"] {
    color: #0d9488 !important;
}

/* ─── F. Modal qty buttons: bump to 40×40 minimum on mobile ─── */
@media (max-width: 768px) {
    html body .modal-qty button,
    html body .modal-qty-btn,
    html body .cart-item-qty button {
        min-width: 40px !important;
        min-height: 40px !important;
        width: auto !important;
        height: auto !important;
        font-size: 1rem !important;
    }
}

/* ─── G. Hero ::before/::after glow balls: trim DOM bloat on mobile ─── */
@media (max-width: 540px) {
    html body .hero-bg::before,
    html body .hero-bg::after,
    html body .hero::before,
    html body .hero::after {
        max-width: 100vw !important;
        max-height: 60vh !important;
    }
}

/* ─── H. Form-label invisible background on light theme ─── */


/* ─── I. COA popup row dividers — was rgba(255,255,255,0.03) invisible ─── */
html body .coa-popup-row {
    border-bottom-color: rgba(15, 23, 42, 0.08) !important;
}

/* ─── J. Wishlist popup images: aspect-ratio for CLS prevention ─── */
@media (max-width: 540px) {
    html body .wishlist-popup img,
    html body .wishlist-card img,
    html body [class*="wishlist"] img:not([class*="icon"]) {
        aspect-ratio: 1 / 1 !important;
        height: auto !important;
        object-fit: contain !important;
    }
}

/* ─── K. Touch-action: prevent double-tap zoom on interactive UI ─── */
@media (max-width: 768px) {
    html body button,
    html body .btn,
    html body [class*="btn"]:not([class*="container"]),
    html body a.btn,
    html body [role="button"],
    html body [onclick] {
        touch-action: manipulation !important;
    }
}

/* ─── L. Auto-focus outline polish — remove dotted, use brand teal ring ─── */
@media (max-width: 768px) {
    html body button:focus-visible,
    html body input:focus-visible,
    html body select:focus-visible,
    html body textarea:focus-visible,
    html body a:focus-visible {
        outline: 2px solid #14b8a6 !important;
        outline-offset: 2px !important;
        border-radius: inherit !important;
    }
}

/* ─── M. Hover-only states get :active counterparts on mobile ─── */
@media (hover: none) and (pointer: coarse) {
    /* These hover states should also fire on tap */
    html body .how-step:active .how-step-icon,
    html body .stack-card:active,
    html body .cart-pick-add:active,
    html body .product-card:active {
        opacity: 0.85 !important;
    }
}

/* ─── N. Bestseller card "Add to Cart" — match black on mobile (not hover teal) ─── */
@media (hover: none) and (pointer: coarse) {
    html body .bestseller-card .bs-cart-btn,
    html body .bestseller-card:hover .bs-cart-btn {
        background: #0a0a0a !important;
        background-image: none !important;
        color: #ffffff !important;
    }
    html body .bestseller-card .bs-cart-btn:active {
        background: linear-gradient(180deg, #14b8a6 0%, #0d9488 100%) !important;
        transform: scale(0.98) !important;
    }
}

/* ─── O. Image lazy-loading fade-in (smoother visual experience) ─── */
@media (max-width: 768px) {
    html body img[loading="lazy"] {
        transition: opacity 0.25s ease !important;
    }
    html body img[loading="lazy"]:not([src]),
    html body img[loading="lazy"][src=""] {
        opacity: 0 !important;
    }
}

/* ─── P. Loyalty page CTAs full-width on mobile ─── */
@media (max-width: 540px) {
    html body .loyalty-hero a.btn,
    html body .loyalty-hero button {
        width: 100% !important;
        margin: 8px 0 !important;
    }
}

/* ─── Q. Footer column gap tighter on mobile so footer isn't huge ─── */
@media (max-width: 540px) {
    
    html body .site-footer .footer-grid,
    html body .site-footer [class*="footer-grid"] {
        gap: 24px !important;
    }
    
}

/* ─── R. Long URLs/emails wrap properly on mobile (no overflow) ─── */
@media (max-width: 768px) {
    html body a[href^="mailto:"],
    html body a[href*="elytralabs"],
    html body .breakable-text,
    html body .order-ref,
    html body .order-id,
    html body [class*="order-id"],
    html body code,
    html body .cr-value {
        word-break: break-all !important;
        overflow-wrap: break-word !important;
    }
}

/* ─── S. Sticky nav: ensure tap area & no shrinking on scroll ─── */
@media (max-width: 768px) {
    html body .navbar {
        min-height: 60px !important;
    }
    html body .navbar.shrunk,
    html body .navbar.scrolled {
        min-height: 60px !important;
    }
}

/* ─── T. Cart drawer extra polish: ensure proper width + content padding ─── */
@media (max-width: 768px) {
    html body .cart-sidebar,
    html body #cart-sidebar {
        width: 100vw !important;
        max-width: 100vw !important;
        right: -100vw !important;  /* hidden state */
    }
    html body .cart-sidebar.open,
    html body #cart-sidebar.open,
    html body .cart-sidebar.is-open,
    html body #cart-sidebar.is-open {
        right: 0 !important;
    }
}

/* ─── U. Bundle/category card image aspect ratio consistency ─── */


/* ─── V. Final touch — make tap highlight teal-tinted (not iOS gray) ─── */
@media (max-width: 768px) {
    html body * {
        -webkit-tap-highlight-color: rgba(20, 184, 166, 0.15) !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   R69: ROUND-2 DIAGNOSTIC FIXES — precise findings from runtime audit

   Injected __mobileAudit() helper on each major page, returned JSON of
   actual overflowing/undersized/dark-bg elements. Applying targeted
   fixes for what the diagnostic actually found (not speculative).

   Findings summary:
   1. Footer links 29px height site-wide — too thin to tap
   2. Footer policy links 14-17px — way too thin
   3. Multiple selects (product-sort, checkout-state, checkout-shipping-state)
      at 13-14px font-size — iOS zoom risk despite R55 attempt
   4. .pp-fbt-check, .points-slider inputs at 13px font
   5. .vs-table 540px wide w/ no horizontal scroll wrapper
   6. .quality-tab buttons overflow (scroll-snap works but parent issue)
   7. .stack-vial.stack-vial-2 IMG overflows at right:416
   8. .checkout-trust-item still overflowing right:389 on one item
   9. Inline links ("Edit cart", "Browse COAs →", breadcrumbs) too thin
   ════════════════════════════════════════════════════════════════════════ */

/* ─── 1. Footer links: meaningful tap targets ─── */
@media (max-width: 768px) {
    html body footer.site-footer a,
    html body .site-footer a,
    html body footer a:not(.btn) {
        min-height: 36px !important;
        display: inline-flex !important;
        align-items: center !important;
        padding: 4px 0 !important;
    }
    /* Footer column headings */
    
    /* Footer bottom-row legal links: more breathing room */
    html body footer.site-footer .footer-bottom a,
    html body .site-footer .footer-legal a,
    html body .site-footer [class*="copyright"] a {
        min-height: 32px !important;
        padding: 6px 8px !important;
        display: inline-flex !important;
        align-items: center !important;
    }
}

/* ─── 2. Strengthen form font-size override (R55's wasn't winning all cases) ─── */
@media (max-width: 768px) {
    /* Hit every select/input/textarea with stronger selector */
    html body select,
    html body input,
    html body textarea,
    html body select#product-sort,
    html body input#product-search,
    html body input.pp-fbt-check,
    html body input.points-slider,
    html body input#checkout-points-slider,
    html body select#checkout-state,
    html body select#checkout-shipping-state,
    html body select.aff-select,
    html body input.aff-input {
        font-size: 16px !important;
    }
    /* Special: range sliders don't trigger iOS zoom but visually need bigger thumb */
    html body input[type="range"] {
        height: 28px !important;
    }
    /* Hidden inputs don't need font-size — they're invisible */
    html body input[type="hidden"] {
        font-size: 0 !important;
    }
}

/* ─── 3. .vs-table horizontal scroll wrapper (540px content, 375 viewport) ─── */
@media (max-width: 768px) {
    html body .vs-table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        max-width: 100% !important;
    }
    /* If .vs-table has a parent wrapper, ensure it doesn't clip */
    html body .vs-table-wrap,
    html body [class*="vs-section"] {
        overflow-x: visible !important;
    }
}

/* ─── 4. Stack vial image overflow (.stack-vial-2 at 208px right of viewport) ─── */
@media (max-width: 540px) {
    html body .stack-vial,
    html body .stack-vial-1,
    html body .stack-vial-2,
    html body img.stack-vial,
    html body img[class*="stack-vial"] {
        max-width: 100% !important;
        height: auto !important;
    }
    /* The 3-vial decorative cluster on products page */
    html body .stack-vial-cluster,
    html body [class*="stack-vial"][class*="cluster"] {
        flex-direction: column !important;
        align-items: center !important;
        max-width: 100% !important;
    }
}

/* ─── 5. .checkout-trust-item overflowing — narrow text more aggressively ─── */
@media (max-width: 540px) {
    html body .checkout-trust-strip .checkout-trust-item {
        font-size: 0.74rem !important;
        gap: 4px !important;
        white-space: normal !important;  /* allow wrap if needed */
        line-height: 1.25 !important;
    }
    html body .checkout-trust-strip .checkout-trust-item i {
        font-size: 0.85rem !important;
        flex-shrink: 0 !important;
    }
}

/* ─── 6. Inline links (breadcrumbs, "Edit cart", "Browse COAs →") tap targets ─── */
@media (max-width: 768px) {
    /* Breadcrumb links */
    html body .breadcrumbs a,
    html body .breadcrumb a,
    html body [class*="breadcrumb"] a {
        min-height: 32px !important;
        padding: 6px 4px !important;
        display: inline-flex !important;
        align-items: center !important;
    }
    /* Inline UI links like "Edit cart", "Browse COAs", "See all", etc */
    html body .cs-edit-link,
    html body .link-arrow-inline,
    html body a.link-arrow,
    html body a[class*="see-all"],
    html body a[class*="view-all"] {
        min-height: 30px !important;
        padding: 4px 6px !important;
        display: inline-flex !important;
        align-items: center !important;
    }
}

/* ─── 7. Cookie preferences modal close button tap target ─── */
@media (max-width: 768px) {
    html body .cookie-prefs-close,
    html body [class*="cookie-prefs"] [class*="close"] {
        min-width: 40px !important;
        min-height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* ─── 8. Upsell add button in cart drawer (was 34×44 — width too narrow) ─── */
@media (max-width: 768px) {
    html body .upsell-add,
    html body .cart-upsell .upsell-add,
    html body button.upsell-add {
        min-width: 40px !important;
        min-height: 40px !important;
        width: auto !important;
    }
}

/* ─── 9. Quality tabs on homepage: ensure scroll container handles it ─── */
@media (max-width: 768px) {
    html body .quality-tabs-wrap,
    html body .quality-tabs-container,
    html body [class*="quality-tab"][class*="wrap"] {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        max-width: 100% !important;
    }
    html body .quality-tab {
        flex-shrink: 0 !important;
    }
}

/* ─── 10. Stack details link visibility — was 27px height in audit ─── */
@media (max-width: 540px) {
    html body .stack-details-link,
    html body .products-stacks-link,
    html body a[class*="stack"][class*="link"] {
        min-height: 32px !important;
        padding: 6px 10px !important;
        display: inline-flex !important;
        align-items: center !important;
    }
}

/* ─── 11. Hidden file inputs and other utility inputs don't need 16px ─── */
html body input[type="hidden"],
html body input[type="file"][hidden],
html body input.visually-hidden {
    font-size: 0 !important;
}

/* ─── 12. Body text base sizing on mobile — readable everywhere ─── */
@media (max-width: 540px) {
    html body p,
    html body li,
    html body dd,
    html body dt {
        font-size: max(0.92rem, 14.5px) !important;
        line-height: 1.55 !important;
    }
    /* But footer copy can stay smaller */
    html body footer p,
    html body footer li {
        font-size: 0.85rem !important;
    }
}

/* ─── 13. Make sure horizontal touch scroll containers work universally ─── */
@media (max-width: 768px) {
    html body [class*="scroll-container"],
    html body [class*="horizontal-scroll"],
    html body [class*="tabs-strip"],
    html body [class*="-tabs"] {
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }
    html body [class*="scroll-container"]::-webkit-scrollbar,
    html body [class*="horizontal-scroll"]::-webkit-scrollbar {
        display: none !important;
    }
}

/* ─── 14. Catalog sticky wrap search — higher specificity to win the 16px font ─── */
@media (max-width: 768px) {
    html body .catalog-sticky-wrap .product-search input,
    html body .catalog-sticky-wrap div.product-search > input#product-search,
    html body .catalog-sticky-wrap div.product-search > input[type="text"] {
        font-size: 16px !important;
    }
}

/* ─── 15. Stack vial decorative image — force max-width with higher specificity ─── */
@media (max-width: 540px) {
    html body img.stack-vial,
    html body img.stack-vial.stack-vial-1,
    html body img.stack-vial.stack-vial-2,
    html body img.stack-vial.stack-vial-3,
    html body .stack-vials img,
    html body [class*="stack-vials"] img,
    html body [class*="stack-vial-cluster"] img {
        max-width: 100% !important;
        height: auto !important;
        width: auto !important;
    }
    /* Hide multi-vial decorative cluster on tightest mobile — keeps just main vial */
    html body img.stack-vial.stack-vial-2,
    html body img.stack-vial.stack-vial-3 {
        display: none !important;
    }
}

/* ─── 16. Footer bottom-row legal links — increase tap target reliably ─── */
@media (max-width: 768px) {
    html body footer a,
    html body .site-footer a,
    html body .footer-legal a,
    html body .copyright a,
    html body .legal-links a,
    html body footer .legal-links a {
        min-height: 32px !important;
        padding: 6px 4px !important;
        display: inline-flex !important;
        align-items: center !important;
        line-height: 1.4 !important;
    }
}

/* ─── 17. Newsletter email input — force 16px to prevent iOS zoom ─── */
@media (max-width: 768px) {
    html body .newsletter-form input[type="email"],
    html body input#newsletter-email,
    html body #newsletter-email {
        font-size: 16px !important;
    }
}

/* ─── 18. Round-2 stragglers: page-specific form fields still <16px ─── */
@media (max-width: 768px) {
    html body select#coa-sort-select,
    html body #coa-sort-select,
    html body select.coa-sort-select,
    html body select.coa-sort {
        font-size: 16px !important;
    }
}

/* ─── 19. Auth page inline links: "Forgot password" + "Create one" ─── */
@media (max-width: 768px) {
    html body .auth-page a.forgot-link,
    html body .auth-page a.create-account-link,
    html body a.forgot-link,
    html body a[href*="forgot"],
    html body .auth-form a,
    html body .signin-form a,
    html body [class*="auth"] a:not(.btn) {
        min-height: 32px !important;
        padding: 6px 8px !important;
        display: inline-flex !important;
        align-items: center !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   R70: FAQ shake — round-2 fix

   User reports the shake STILL happens despite R62. Investigation found:

   1. `toggleFaq()` in app.js (line 8105) closes ALL items first, THEN
      opens the tapped one. When an item was already open, you get TWO
      simultaneous max-height animations (one collapsing + one expanding).
      Both interact with the flex parent's `gap: 12px`, creating subpixel
      jitter as items reposition.
   2. The chevron rotation (`matrix(-1,0,0,-1,0,0)` = 180deg) is on a
      separate 0.3s transition that overlaps with the parent's 0.32s
      max-height — slight timing mismatch contributes to wobble.
   3. The `.faq-flask` icon also has `transition: transform 0.3s` even
      though it doesn't transform — but on hover/active states something
      might trigger.
   4. No layout containment → every item's height change reflows the
      whole grid.

   Fix:
   - Use `contain: layout style paint` on `.faq-item` for layout isolation
   - Use `will-change: max-height, padding` on `.faq-answer` for GPU promotion
   - Use `transform: rotate(180deg) translateZ(0)` on the open chevron
     (translateZ forces GPU layer so rotation is smooth)
   - Same duration on chevron + answer (both 0.32s) — synced timing
   - Disable transitions on the un-rotated chevron and the flask icon
     transitions that don't actually do anything
   ════════════════════════════════════════════════════════════════════════ */

/* Apply on ALL viewports (not just mobile) — the shake exists on desktop too,
   user just notices it more on touch devices. */
html body .faq-item {
    contain: layout style !important;
}
html body .faq-answer {
    will-change: max-height, padding, opacity !important;
    transform: translateZ(0) !important;  /* GPU layer */
    backface-visibility: hidden !important;
}
/* Chevron: sync duration with answer, GPU-accelerate the rotation */
html body .faq-item .faq-chevron,
html body .faq-item i.faq-chevron,
html body .faq-q-icon i.fa-chevron-down,
html body .faq-question i.fa-chevron-down {
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transform: rotate(0deg) translateZ(0) !important;
    transform-origin: center center !important;
}
html body .faq-item.open .faq-chevron,
html body .faq-item.open i.faq-chevron,
html body .faq-item.open .faq-q-icon i.fa-chevron-down,
html body .faq-item.open .faq-question i.fa-chevron-down {
    transform: rotate(180deg) translateZ(0) !important;
}

/* Cancel transitions on icons that don't actually animate */
html body .faq-item .fa-flask,
html body .faq-item .faq-q-icon i:not(.fa-chevron-down) {
    transition: none !important;
}

/* Disable scroll-animate stagger fade on FAQ grid — if the FAQ grid is
   inside a `cy-stagger` parent, items might still have leftover opacity
   transitions that trigger during open/close. */
html body .faq-grid .faq-item,
html body .faq-grid.cy-stagger .faq-item {
    opacity: 1 !important;
    transform: none !important;
}

/* Mobile only: also disable the parent flex gap during the animation
   to prevent the "neighbors sliding" jitter */
@media (max-width: 768px) {
    html body .faq-item {
        transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
    }
    /* Add tiny scroll margin so opening item near viewport edge has space */
    html body .faq-item.open {
        scroll-margin-top: 80px !important;
        scroll-margin-bottom: 24px !important;
    }
    /* The actual answer panel: keep duration unified everywhere */
    html body .faq-item .faq-answer,
    html body .faq-item.open .faq-answer {
        transition: max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                    padding 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 0.32s ease !important;
    }
}

/* Smooth-out the simultaneous close-then-open animation problem.
   When toggleFaq() removes .open from all items, those closing items
   animate from 800px max-height → 0 over 0.32s. Add `transition-delay`
   so the closing happens FIRST, then opening happens RIGHT AFTER (no
   overlap = no jitter). Hmm, that's tricky to do CSS-only because all
   items already animate simultaneously. Skip this — better solved in JS.

   For now, ensure the closing animation is faster than opening so they
   don't sync up and create the perceived shake. */
html body .faq-item:not(.open) .faq-answer {
    transition: max-height 0.18s ease-out,
                padding 0.18s ease-out,
                opacity 0.18s ease-out !important;
}
html body .faq-item.open .faq-answer {
    transition: max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.32s ease !important;
}

/* ════════════════════════════════════════════════════════════════════════
   R71: User-reported mobile fixes (round 4)

   1. Order detail timeline labels overlap on mobile — "PAYMENT VERIFIED"
      and "PROCESSING SHIPPED" running into each other because the 4-step
      horizontal layout is too cramped at 375px viewport
   2. Account dashboard tabs cut off on mobile — only Orders + Loyalty
      visible, the other 3 tabs (Addresses, Wishlist, Affiliate) hidden
      because horizontal scroll isn't obvious to user
   3. Cart drawer: items section too small, totals/CTA section too large
      — feels lopsided
   ════════════════════════════════════════════════════════════════════════ */

/* ─── 1. Order detail timeline: stack VERTICALLY on mobile ─── */
@media (max-width: 540px) {
    html body .track-timeline {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 14px 16px !important;
        gap: 0 !important;
    }
    /* Remove the horizontal connector line (won't make sense vertically) */
    html body .track-timeline::before,
    html body .track-timeline .progress-bar-fill {
        display: none !important;
    }
    /* Each step becomes a horizontal row: dot + label + (optional date) */
    html body .track-timeline .progress-step {
        flex-direction: row !important;
        width: 100% !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 10px 0 !important;
        border-bottom: 1px dashed rgba(0, 0, 0, 0.06) !important;
    }
    html body .track-timeline .progress-step:last-child {
        border-bottom: none !important;
    }
    html body .track-timeline .progress-dot {
        margin-bottom: 0 !important;
        flex-shrink: 0 !important;
        width: 32px !important;
        height: 32px !important;
    }
    html body .track-timeline .progress-label {
        text-align: left !important;
        font-size: 0.85rem !important;
        flex: 1 !important;
        line-height: 1.3 !important;
    }
    /* Add vertical connector line between dots */
    html body .track-timeline .progress-step:not(:last-child)::after {
        content: '';
        position: absolute;
        left: 30px;
        top: 42px;
        width: 2px;
        height: calc(100% - 22px);
        background: rgba(0, 0, 0, 0.06);
    }
    html body .track-timeline .progress-step {
        position: relative !important;
    }
    /* When step is .active or .done, color the connector too */
    html body .track-timeline .progress-step.done::after,
    html body .track-timeline .progress-step.active::after {
        background: rgba(20, 184, 166, 0.4) !important;
    }
}

/* ─── 2. Account dashboard tabs: grid layout so ALL tabs are visible ─── */
@media (max-width: 860px) {
    html body .dash-tabs {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr !important;
        flex-direction: row !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        gap: 6px !important;
        padding: 8px !important;
    }
    html body .dash-tab,
    html body a.dash-tab,
    html body .dash-tabs .dash-tab {
        font-size: 0.76rem !important;
        padding: 10px 8px !important;
        flex-direction: column !important;
        gap: 4px !important;
        text-align: center !important;
        justify-content: center !important;
        white-space: normal !important;
        min-height: 56px !important;
        line-height: 1.2 !important;
    }
    html body .dash-tab i,
    html body .dash-tab .dash-tab-icon {
        font-size: 1rem !important;
        margin: 0 !important;
    }
    html body .dash-tab .dash-tab-badge,
    html body .dash-tab .count {
        font-size: 0.7rem !important;
    }
}
/* Very small viewports (≤360px or so) go 2-column for tabs */
@media (max-width: 380px) {
    html body .dash-tabs {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* ─── 3. Cart drawer: more space for items, tighter totals/CTA ─── */
@media (max-width: 768px) {
    /* Cart scroll area (items list) takes flex-grow priority */
    html body .cart-sidebar .cart-scroll,
    html body #cart-sidebar #cart-scroll,
    html body #cart-scroll {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }
    /* Footer / totals area compacted */
    html body .cart-sidebar .cart-footer,
    html body #cart-sidebar #cart-footer,
    html body #cart-footer {
        flex: 0 0 auto !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
    /* Tighter delivery row */
    html body #cart-delivery-row,
    html body .cart-delivery-row {
        padding: 6px 12px !important;
        font-size: 0.78rem !important;
        margin-bottom: 6px !important;
    }
    /* Promo section: collapse to single line until expanded */
    html body .promo-section {
        padding: 0 !important;
        margin-bottom: 6px !important;
    }
    html body .promo-toggle {
        padding: 8px 12px !important;
        font-size: 0.82rem !important;
    }
    /* Subtotal block: tighter spacing */
    html body .cart-summary-block {
        padding: 8px 12px !important;
        margin-bottom: 8px !important;
    }
    html body .cart-subtotal,
    html body .cart-discount-row {
        margin: 4px 0 !important;
        font-size: 0.85rem !important;
    }
    /* Savings badge: smaller */
    html body .cart-savings-badge {
        padding: 6px 10px !important;
        font-size: 0.78rem !important;
        margin: 6px 0 !important;
    }
    /* Proceed to Checkout button: keep prominent but a bit smaller padding */
    html body #cart-footer .btn-primary.btn-large,
    html body .cart-sidebar .btn-primary.btn-large {
        padding: 14px 18px !important;
        font-size: 0.95rem !important;
        margin-top: 4px !important;
    }
    /* Disclaimer below button: smaller + tighter */
    html body .cart-footer > div:last-child,
    html body .cart-disclaimer {
        font-size: 0.72rem !important;
        margin-top: 6px !important;
        padding: 4px 8px !important;
        line-height: 1.35 !important;
    }
    /* Cart item card: keep readable but slightly more compact */
    html body .cart-item {
        padding: 10px !important;
        gap: 10px !important;
    }
    html body .cart-item-img,
    html body .cart-item-img img {
        width: 64px !important;
        height: 64px !important;
    }
    html body .cart-item-name {
        font-size: 0.88rem !important;
        line-height: 1.3 !important;
    }
    html body .cart-item-dosage {
        font-size: 0.74rem !important;
    }
    /* Upsell card: still visible but compact */
    html body .cart-upsell {
        padding: 10px 12px !important;
        margin-bottom: 8px !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   R72: Round-3 visual-pass polish (catches things automation missed)

   1. Bundles page: product names like "BPC-157" break across two lines
      ("BPC-" / "157") because hyphenated names are treated as breakable
      by default. Prevent breaking on the hyphen.
   2. Affiliate / account inline buttons: any utility links that look
      tappable should be ≥36px tap target.
   3. Order tracking copy button overlap with order ref text on narrow.
   ════════════════════════════════════════════════════════════════════════ */

/* 1. Product names with hyphens shouldn't break on the hyphen.
   Use word-break: keep-all to prevent breaking at hyphens, but allow
   the name to size to its natural width. Smaller font fits "BPC-157"
   in available space without truncating. */
@media (max-width: 540px) {
    html body .preset-item-name,
    html body .bundle-item-name,
    html body .bundle-item .item-name,
    html body .bundle-card .bundle-product-name,
    html body .bundle-products li,
    html body .preset-item-meta .preset-item-name,
    html body [class*="bundle"] [class*="product-name"],
    html body [class*="bundle-item"] [class*="name"] {
        word-break: keep-all !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
        font-size: 0.88rem !important;
    }
    /* Allow the parent container width some flex */
    
    /* Tighten the icon column to give name more room */
    
}

/* 2. Track order page: copy button shouldn't overlap order ref */
@media (max-width: 540px) {
    html body .tsh-ref-row {
        flex-wrap: wrap !important;
        gap: 6px 8px !important;
    }
    html body .tsh-ref-value {
        word-break: break-all !important;
        flex: 1 1 100% !important;
        order: 2 !important;
    }
    html body .tsh-copy {
        min-width: 36px !important;
        min-height: 36px !important;
        order: 3 !important;
    }
    html body .tsh-ref-label {
        order: 1 !important;
    }
}

/* 3. Footer compactness on narrow phones: tighter heading + more breath */
@media (max-width: 480px) {
    html body .site-footer .footer-grid {
        gap: 20px !important;
    }
    
    
}

/* 4. Search bar on products page: visible scroll hint when keyboard up */
@media (max-width: 768px) {
    html body .catalog-sticky-wrap {
        z-index: 50 !important;
    }
}

/* 5. Estimated Arrival / loyalty cards: prevent cramping on narrow phones */
@media (max-width: 480px) {
    html body .est-arrival-card,
    html body .estimated-arrival,
    html body [class*="est-arrival"],
    html body .loyalty-earn-note {
        padding: 10px 12px !important;
        font-size: 0.82rem !important;
    }
}

/* 6. Promo input row inside cart: input + apply button shouldn't overflow */
@media (max-width: 540px) {
    html body .promo-input-group {
        display: flex !important;
        gap: 6px !important;
        flex-wrap: nowrap !important;
    }
    html body .promo-input-group input,
    html body #promo-code {
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }
    html body .promo-input-group .btn-promo,
    html body .btn-promo {
        flex-shrink: 0 !important;
        min-width: 72px !important;
        max-width: 90px !important;
    }
}

/* 7. Make sure FAQ items collapse smoothly when toggling - prevent rapid
      toggle from getting "stuck" mid-animation */
html body .faq-item .faq-answer {
    pointer-events: none !important;
}
html body .faq-item.open .faq-answer {
    pointer-events: auto !important;
}

/* 8. Visual focus state for FAQ question (a11y) */
html body .faq-question:focus-visible {
    outline: 2px solid #14b8a6 !important;
    outline-offset: 2px !important;
    border-radius: 8px !important;
}

/* 9. Cart count badge: prevent overflow when count is 10+ items */
@media (max-width: 768px) {
    html body .cart-count,
    html body .nav-cart-count,
    html body [class*="cart-count"] {
        min-width: 18px !important;
        height: 18px !important;
        padding: 0 4px !important;
        font-size: 0.65rem !important;
        font-weight: 700 !important;
        line-height: 18px !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   R73: PsiFi card payment "Pay" button — much more prominent CTA
   User: "the pay button when using card could be a little better here"

   Before: small black pill with just "Pay" and an empty amount span
   After:  big bold gradient button with lock icon + "Pay Securely" +
           prominent dollar amount + arrow → makes it feel like the
           definitive checkout action it should be
   ════════════════════════════════════════════════════════════════════════ */

html body .psifi-pay-btn,
html body .psifi-pay-btn {
    /* Brand teal gradient instead of pure black */
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%) !important;
    background-image: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%) !important;
    color: #ffffff !important;
    border: none !important;
    /* Big, prominent — this is THE conversion action */
    padding: 18px 22px !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 14px rgba(20, 184, 166, 0.28),
                0 1px 0 rgba(255, 255, 255, 0.15) inset !important;
    /* Layout */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    margin-top: 12px !important;
    cursor: pointer !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease !important;
    position: relative !important;
    overflow: hidden !important;
}
html body .psifi-pay-btn:hover {
    background: linear-gradient(135deg, #0f9d8f 0%, #0a7e75 100%) !important;
    background-image: linear-gradient(135deg, #0f9d8f 0%, #0a7e75 100%) !important;
    box-shadow: 0 6px 20px rgba(20, 184, 166, 0.38),
                0 1px 0 rgba(255, 255, 255, 0.15) inset !important;
    transform: translateY(-1px) !important;
}
html body .psifi-pay-btn:active {
    transform: scale(0.98) !important;
}

/* Sub-elements */
html body .psifi-pay-btn .psifi-pay-icon {
    font-size: 1rem !important;
    opacity: 0.92 !important;
    flex-shrink: 0 !important;
}
html body .psifi-pay-btn .psifi-pay-label {
    font-weight: 700 !important;
    letter-spacing: 0.2px !important;
    /* Flex so the text and amount-pill space evenly inside the label */
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
}
html body .psifi-pay-btn .psifi-pay-amount {
    font-size: 1.18rem !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    /* High-contrast white pill with dark text so the amount POPS
       regardless of button background (black, teal, etc) */
    background: #ffffff !important;
    color: #0a1628 !important;
    padding: 4px 14px !important;
    border-radius: 999px !important;
    /* margin-left removed — `gap` on the parent .psifi-pay-label handles spacing */
    margin-left: 0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
    /* Hide if empty (graceful fallback) */
    min-width: 0 !important;
}
html body .psifi-pay-btn .psifi-pay-amount:empty {
    display: none !important;
}
html body .psifi-pay-btn .psifi-pay-arrow {
    font-size: 0.85rem !important;
    opacity: 0.85 !important;
    transition: transform 0.2s ease !important;
    flex-shrink: 0 !important;
    /* R149: removed `margin-left: auto` so the arrow sits next to the
       amount instead of being pinned to the far right edge. With it
       removed, the whole content cluster (lock + label + amount + arrow)
       centers as one group thanks to the button's `justify-content: center`. */
}
html body .psifi-pay-btn:hover .psifi-pay-arrow {
    transform: translateX(3px) !important;
}

/* Subtle shimmer animation to draw attention (mobile especially) */
html body .psifi-pay-btn::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 60% !important;
    height: 100% !important;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.15) 50%,
        transparent 100%) !important;
    animation: psifi-pay-shimmer 3.5s ease-in-out infinite !important;
    pointer-events: none !important;
}
@keyframes psifi-pay-shimmer {
    0% { left: -100%; }
    40%, 100% { left: 200%; }
}
@media (prefers-reduced-motion: reduce) {
    html body .psifi-pay-btn::before {
        animation: none !important;
        display: none !important;
    }
}

/* Mobile: even chunkier for thumb-tappability */
@media (max-width: 540px) {
    html body .psifi-pay-btn {
        padding: 20px 18px !important;
        font-size: 1rem !important;
        gap: 8px !important;
    }
    html body .psifi-pay-btn .psifi-pay-amount {
        font-size: 1.1rem !important;
        padding: 2px 8px !important;
    }
    /* Hide the arrow on very narrow phones — keeps room for amount pill */
    html body .psifi-pay-btn .psifi-pay-arrow {
        display: none !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   R74: FAQ shake — ROUND 3 (eliminate ALL animations approach)

   Previous rounds (R62 transform removal, R70 containment+GPU layer+JS
   toggle, R72 faster close, R74-grid attempt) all FAILED. User still
   reports shake.

   Final approach: kill EVERY animation on FAQ. Instant open/close.
   No max-height transition. No grid-template-rows. No transform on
   chevron. No box-shadow/border-color transitions on the item itself.

   Users get an instant snap-open / snap-close which is uglier but
   *cannot* shake because there's no interpolation happening.

   Use higher specificity (`html body .faq-grid .faq-item ...`) to
   beat all previous rules including `:not(.open)` selectors.
   ════════════════════════════════════════════════════════════════════════ */

/* MOBILE ONLY — kill all transitions on FAQ to eliminate shake.
   Desktop animations stay as designed. */
@media (max-width: 768px) {
    html body .faq-grid .faq-item .faq-answer,
    html body .faq-grid .faq-item:not(.open) .faq-answer,
    html body main .faq-item .faq-answer,
    html body main .faq-item:not(.open) .faq-answer {
        transition: none !important;
        display: block !important;
        grid-template-rows: none !important;
        max-height: 0 !important;
        overflow: hidden !important;
        padding: 0 22px !important;
        opacity: 1 !important;
        transform: none !important;
        will-change: auto !important;
        contain: none !important;
    }

    html body .faq-grid .faq-item.open .faq-answer,
    html body main .faq-item.open .faq-answer {
        transition: none !important;
        display: block !important;
        max-height: 2000px !important;
        padding: 4px 22px 22px 72px !important;
        opacity: 1 !important;
        transform: none !important;
    }

    /* Kill box-shadow + border-color transitions on .faq-item too */
    html body .faq-grid .faq-item,
    html body main .faq-item {
        transition: none !important;
        transform: none !important;
    }

    /* Chevron rotation: instant — no transition */
    html body .faq-grid .faq-item .faq-chevron,
    html body .faq-grid .faq-item i.fa-chevron-down,
    html body main .faq-item .faq-chevron,
    html body main .faq-item i.fa-chevron-down {
        transition: none !important;
        transform: rotate(0deg) !important;
    }
    html body .faq-grid .faq-item.open .faq-chevron,
    html body .faq-grid .faq-item.open i.fa-chevron-down,
    html body main .faq-item.open .faq-chevron,
    html body main .faq-item.open i.fa-chevron-down {
        transform: rotate(180deg) !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   R75: Calculator output cards appearing BEFORE input form on mobile

   User: "On the calculator, this shouldn't be the first thing you see
   before you see the peptide calculator. People will be confused."

   The .stats-hero (Draw To / Volume / Research Dose output cards) is in
   the DOM before .calc-grid (which contains Inputs). On desktop the
   stats-hero spans both columns (visual hero), then inputs+protocol
   side-by-side. On mobile this stacks vertically — and users see
   "Draw To 10 Units" / "Volume 0.10" / "Research Dose 500 mcg" BEFORE
   any input form, which is confusing — they haven't entered anything yet.

   Fix: On mobile, use flex order to swap so calc-grid (inputs) shows
   FIRST, then stats-hero (outputs).
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
    html body .calc-container {
        display: flex !important;
        flex-direction: column !important;
    }
    /* Order them in narrative order:
       1. back-link
       2. calc-hero (title + intro)
       3. ruo-banner (disclaimer)
       4. calc-grid (INPUTS — primary action)
       5. stats-hero (OUTPUTS — result of inputs)
    */
    html body .calc-container .back-link { order: 1 !important; }
    html body .calc-container .calc-hero { order: 2 !important; }
    html body .calc-container .ruo-banner { order: 3 !important; }
    html body .calc-container .calc-grid { order: 4 !important; }
    html body .calc-container .stats-hero { order: 5 !important; }
    /* Anything else after */
    html body .calc-container > *:not(.back-link):not(.calc-hero):not(.ruo-banner):not(.calc-grid):not(.stats-hero) {
        order: 6 !important;
    }

    /* Add visual hint above outputs that they update as user types */
    html body .stats-hero::before {
        content: '↓ Your reconstitution results';
        display: block;
        width: 100%;
        text-align: center;
        font-size: 0.78rem;
        font-weight: 600;
        color: #14b8a6;
        text-transform: uppercase;
        letter-spacing: 1.2px;
        margin-bottom: 12px;
        padding-top: 8px;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   R76: Protocol stack-component spec pills overlap on mobile

   Screenshot showed:
   ┌──────────────────────────────────────┐
   │ ① CJC-1295 (No DAC) & Ipamorelin     │
   │ [vial]    $45.00                     │
   │ ╔══════╗╔══════╗╔══════╗            │  ← pills overlap
   │ ║REF   ║║FREQ  ║║WINDOW║            │
   │ ║DOSE  ║║q12h  ║║8-12  ║            │
   │ ║100-2 ║║      ║║weeks ║            │
   │ ║00/100║║      ║║      ║            │
   │ ║-200  ║║      ║║      ║            │
   │ ║mcg   ║║      ║║      ║            │
   │ ╚══════╝╚══════╝╚══════╝            │
   └──────────────────────────────────────┘

   The 3-column grid (R65) is too narrow for long values like
   "100-200/100-200 mcg" (19 chars). Pills overlap each other.

   Fix: Switch to 1 column (each pill full-width row) on mobile so
   values have room to breathe. Or use 2-column with the longest pill
   spanning full width.
   ════════════════════════════════════════════════════════════════════════ */


/* ──── Same fix for live-order-toast in is-out state ──── */
html body .live-order-toast:not(.is-in) {
    pointer-events: none !important;
    visibility: hidden !important;
}
html body .live-order-toast.is-in {
    visibility: visible !important;
}

/* ════════════════════════════════════════════════════════════════════════
   R58: iOS SCROLL BOOMERANG FIX

   User reports: scroll feels stuck on mobile, "boomerangs" back up,
   requires aggressive swiping to break through.

   ROOT CAUSE: Three nested scroll containers (html, body, main) ALL had
   `overflow-x: hidden` set, which the browser auto-promotes to
   `overflow-x: hidden; overflow-y: auto` (per CSS spec: setting one axis
   to non-visible forces the other to at least auto).

   On iOS Safari, when you have nested scroll containers and the touch
   starts inside the innermost (main), iOS does NOT propagate the scroll
   up the chain when main hits its content boundary. The user has to
   release-and-retouch to switch scrolling to the parent. This produces
   the "stuck / boomerang" feel.

   FIX: Make ONLY html the scroll container. Body and main must be
   `overflow: visible` (or use `overflow-x: clip` which doesn't create
   a scroll container but still clips overflow).
   ════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* Use overflow-x: clip on body — clip prevents horizontal overflow
       WITHOUT creating a scroll container (unlike `hidden`). Falls back
       gracefully to `hidden` on older browsers via the second declaration. */
    html body {
        overflow-x: clip !important;
        overflow-y: visible !important;
    }
    /* Main element MUST NOT be a scroll container — let it flow into body */
    html body main,
    html body main#main-content {
        overflow-x: clip !important;
        overflow-y: visible !important;
        height: auto !important;
        max-height: none !important;
    }
    /* HTML is the ONE scroll container */
    html {
        overflow-x: clip !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        height: auto !important;
    }
}

/* Fallback for browsers that don't support `overflow: clip` — falls back
   to `hidden`, but at least main/body won't both auto-create scroll
   containers because we explicitly set them to visible-y. */
@supports not (overflow: clip) {
    @media (max-width: 768px) {
        html body { overflow-x: hidden !important; }
        html body main,
        html body main#main-content { overflow-x: hidden !important; }
        html { overflow-x: hidden !important; }
    }
}

/* Disable scroll-snap on the quality-tabs strip on mobile — even though
   it's horizontal-only snap, an axis ambiguity in iOS can cause the
   vertical body scroll to misfire near a snap-strip. */
@media (max-width: 768px) {
    html body .quality-tabs {
        scroll-snap-type: none !important;
    }
    /* keep snap on tab CHILDREN so user-initiated tab clicks still snap nicely */
}

/* Disable `scrollbar-gutter: stable` on mobile — adds a phantom gutter
   width that some iOS versions render as a strip that interferes with
   scroll. */
@media (max-width: 768px) {
    html {
        scrollbar-gutter: auto !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   R59: Hero trust bullets + spectrum-divider polish
   User says:
     • The "99%+ purity · Published COAs · Industry-low prices · USA shipped"
       row still looks off on mobile (the &nbsp; characters around the dots
       prevent clean word-break, so phrases stick together awkwardly).
     • A "white box" still appears below USA SOURCED & SHIPPED — that's
       the .spectrum-divider element (the audio-wave decoration between
       hero and why-section), 102px tall with a white-fade gradient that
       reads as an empty white card on mobile.

   Fix:
     • New HTML wraps each phrase in .hd-item; on mobile, show one item
       per line with separators hidden — clean, scannable, no orphans.
     • Hide .spectrum-divider on mobile (it's decorative; the section
       transitions can stand on their own without the desktop visual).
   ════════════════════════════════════════════════════════════════════════ */

/* Hero trust bullets — desktop unchanged, mobile gets per-line layout */
@media (max-width: 540px) {
    html body .hero .hero-description {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 4px !important;
        max-width: 100% !important;
        padding: 0 16px !important;
        font-size: 0.85rem !important;
        line-height: 1.5 !important;
    }
    html body .hero .hero-description .hd-item {
        display: block !important;
        position: relative !important;
        padding-left: 18px !important;
    }
    /* Subtle check icon before each item */
    html body .hero .hero-description .hd-item::before {
        content: '\f00c' !important; /* fa-check */
        font-family: 'Font Awesome 6 Free' !important;
        font-weight: 900 !important;
        position: absolute !important;
        left: 0 !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        color: #14b8a6 !important;
        font-size: 0.7rem !important;
    }
    /* Hide the · separators on mobile (they don't make sense in a stacked layout) */
    html body .hero .hero-description .hd-sep {
        display: none !important;
    }
}

/* Tablet/larger mobile (541-768px): keep the row layout but space items better */
@media (min-width: 541px) and (max-width: 768px) {
    html body .hero .hero-description .hd-item {
        display: inline-block !important;
        white-space: nowrap !important;
    }
    html body .hero .hero-description .hd-sep {
        display: inline-block !important;
        margin: 0 8px !important;
        color: #94a3b8 !important;
    }
    html body .hero .hero-description {
        max-width: 100% !important;
        word-spacing: 4px !important;
    }
}

/* Spectrum-divider audio-wave: hide on mobile — decorative element
   that reads as an empty white card on small screens */
@media (max-width: 768px) {
    html body .spectrum-divider {
        display: none !important;
    }
}

/* Desktop: add proper spacing around the dot separators since the new
   HTML structure removed the &nbsp; characters */
@media (min-width: 769px) {
    html body .hero .hero-description .hd-sep {
        margin: 0 10px !important;
        color: #94a3b8 !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   R60: Cookie banner peek-through fix

   User identified that the "mystery white box" peeking into the viewport
   bottom is actually the COOKIE CONSENT BANNER's top edge.

   Root cause: My R57 fix set `bottom: 8px` on mobile to give a nice
   floating-card look. But the banner's hidden state uses
   `transform: translateY(100%)` — which translates by 100% of the
   banner's height. With `bottom: 8px`, the banner ends up 8px ABOVE the
   viewport bottom even when "hidden" → 8px of top edge + box-shadow
   peeks into the viewport.

   Fix: Use BOTH transform and visibility/opacity to fully hide the
   banner when not .visible. Also set bottom: 0 (not 8px) so the
   transform fully clears the viewport.
   ════════════════════════════════════════════════════════════════════════ */

/* When NOT visible: truly hidden — no peek, no shadow, no pointer events */
html body .cookie-consent:not(.visible) {
    transform: translateY(100%) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    box-shadow: none !important;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s ease,
                visibility 0s linear 0.4s !important;
}

/* Visible state: slide in with shadow and full interactivity */
html body .cookie-consent.visible {
    transform: translateY(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s ease,
                visibility 0s linear 0s !important;
}

/* Reset bottom: 8px from R57 — keep banner anchored to bottom: 0 so the
   transform fully clears the viewport. Use top-only border-radius for
   that "floating tab" look without the offset gap. */
@media (max-width: 540px) {
    html body #cookie-consent.cookie-consent,
    html body .cookie-consent {
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        max-width: 100% !important;
        border-radius: 14px 14px 0 0 !important;
        margin: 0 !important;
        /* When hidden, the transform-translateY(100%) plus margin: 0
           bottom: 0 puts the banner FULLY below the viewport. */
    }
}

/* ════════════════════════════════════════════════════════════════════════
   R62: FAQ accordion shake fix (mobile)

   User: "When you go to open any of the boxes ... it has this weird like
   shaking effect. Like I don't know how to describe it, but its not normal."

   Root cause: 4 transitions with mismatched durations:
     - max-height 0.35s
     - padding 0.25s
     - opacity 0.25s
     - transform 0.25s   ← the translateY(-4px → 0) creates the "shake"
   AND max-height: 1200px target on a ~200px content means the effective
   animation rate is way too fast for the visible portion, then "settles".

   Fix: Single unified transition. Drop the transform. Use realistic
   max-height (700px covers all answers). Same duration for all properties.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    html body .faq-item .faq-answer {
        transform: none !important;
        transition: max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                    padding 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 0.32s ease !important;
    }
    html body .faq-item.open .faq-answer {
        transform: none !important;
        max-height: 800px !important;
    }
    /* The item itself shouldn't transform either on touch */
    html body .faq-item {
        transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
        transform: none !important;
    }
    html body .faq-item:hover,
    html body .faq-item.open {
        transform: none !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   R63: Hero trust bullets — visual upgrade on mobile

   User wants something more visually appealing than plain teal checks.
   Convert each bullet into a soft "pill" card with a tinted icon and
   compact two-tone styling — looks like first-class feature highlights
   rather than a checklist.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 540px) {
    html body .hero .hero-description {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        max-width: 320px !important;
        padding: 0 !important;
        margin: 18px auto 22px !important;
        font-size: 0 !important;  /* kill stray whitespace */
    }
    html body .hero .hero-description .hd-item {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        padding: 8px 10px !important;
        background: linear-gradient(135deg, rgba(20, 184, 166, 0.08), rgba(20, 184, 166, 0.03)) !important;
        border: 1px solid rgba(20, 184, 166, 0.18) !important;
        border-radius: 999px !important;
        font-size: 0.74rem !important;
        font-weight: 600 !important;
        color: #115e59 !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03) !important;
        text-align: center !important;
    }
    /* Replace generic check with item-specific icon via :before content */
    html body .hero .hero-description .hd-item::before {
        font-family: 'Font Awesome 6 Free' !important;
        font-weight: 900 !important;
        font-size: 0.72rem !important;
        color: #0d9488 !important;
        position: static !important;
        transform: none !important;
        flex-shrink: 0 !important;
    }
    /* Per-item icons: purity = vial, COAs = certificate, prices = tag, USA = flag.
       Need !important to override earlier R59 generic check rule. */
    html body .hero .hero-description .hd-item:nth-child(1)::before { content: '\f0c3' !important; }  /* fa-flask */
    html body .hero .hero-description .hd-item:nth-child(3)::before { content: '\f15c' !important; }  /* fa-file-lines */
    html body .hero .hero-description .hd-item:nth-child(5)::before { content: '\f02b' !important; }  /* fa-tag */
    html body .hero .hero-description .hd-item:nth-child(7)::before { content: '\f74d' !important; }  /* fa-flag-usa */
    /* Hide separators */
    html body .hero .hero-description .hd-sep {
        display: none !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   R64: Compound Library oval — use .edu-cat-pills selector (real one)
   The oval container holds the category pills. On mobile the oval shape
   forces awkward wrapping. Convert to a clean stacked vertical list.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 540px) {
    html body .edu-cat-pills {
        flex-direction: column !important;
        align-items: stretch !important;
        flex-wrap: nowrap !important;
        padding: 14px !important;
        gap: 6px !important;
        border-radius: 16px !important;  /* card not oval */
        background: #ffffff !important;
        background-image: none !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    html body .edu-cat-pill {
        width: 100% !important;
        max-width: 100% !important;
        justify-content: space-between !important;
        padding: 12px 16px !important;
        border-radius: 12px !important;
        min-height: 44px !important;
        font-size: 0.85rem !important;
    }
    html body .edu-cat-pill .count {
        flex-shrink: 0 !important;
        margin-left: auto !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   R65: Stack Builder — use .protocol-item-card selector (real one)
   Card layout has number-bubble + image on left, name/price/spec-pills/
   action-links on right. On mobile this becomes cramped (image too small,
   pills too narrow, name/price wrap awkwardly).
   Fix: image full-width on top, body stacks naturally below.
   ════════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════════
   R66: Compare page — restore horizontal swipe scrolling on mobile

   The .compare-table-wrap already has overflow-x: auto, but my earlier
   R58 fix set `overflow-x: clip` on html/body/main which broke horizontal
   scroll for nested overflow-x: auto elements on iOS. The compare grid
   has min-width: 780px (always wider than mobile viewport) — so it needs
   to scroll horizontally.

   Fix: explicitly enable overflow-x: scroll + touch action on the wrap,
   and ensure the grid maintains its min-width.
   ════════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════════
   R61: Remove product-page sticky add-to-cart bar on mobile
   User: "When on a product page, get rid of the add popup box on bottom
   of the screen, there's already an add to cart button on the page"

   The bar is .pp-sticky-cart (id pp-sticky-cart), 73px tall at bottom.
   Inline Add-to-Cart button on the buy box is already prominent on mobile,
   so the sticky redundant version just steals viewport space and stacks
   awkwardly with toasts/back-to-top.

   Hide only on mobile (≤768px). Desktop keeps the sticky bar — it sits at
   the bottom of a much taller viewport and adds genuine value there.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    html body .pp-sticky-cart,
    html body #pp-sticky-cart {
        display: none !important;
    }
    /* Restore padding-bottom on main now that the 73px sticky bar is gone */
    html body.has-product-page main {
        padding-bottom: 24px !important;
    }
    /* And reset the displaced bottom: 80px we gave to the email-popup
       /toast/BTT (which was set to clear the sticky bar) — they can go
       back to the standard mobile offsets. */
    html body.has-product-page .email-popup.visible {
        bottom: 0 !important;
    }
    html body.has-product-page .live-order-toast,
    html body.has-product-page .toast {
        bottom: 16px !important;
    }
    html body.has-product-page .back-to-top {
        bottom: 16px !important;
    }
}



/* ════════════════════════════════════════════════════════════════════════
   R77: Force protocol stack-component pills + name to NOT overlap (mobile)
   
   R76 was placed earlier in the file than the older R65 (which sets
   `display: grid; grid-template-columns: 1fr 1fr 1fr` on .protocol-item-specs).
   Cascade order means R65 wins. R77 is appended at the END so it definitely wins.
   
   Also fixes BPC-157 / TB-500 name wrap (long hyphenated names break across
   2 lines because of default word-break behavior with hyphens).
   ════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* Force protocol spec strip to FLEX COLUMN, not grid */
    html body .protocol-item-card .protocol-item-specs,
    html body .protocol-page .protocol-item-specs,
    html body main .protocol-item-card .protocol-item-specs,
    html body section .protocol-item-card .protocol-item-specs {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        grid-template-columns: none !important;
        grid-template-rows: none !important;
        gap: 6px !important;
        margin: 10px 0 12px !important;
        width: 100% !important;
    }
    /* Each pill becomes a full-width row: label left, value right */
    html body .protocol-item-card .protocol-item-specs .spec-pill,
    html body .protocol-page .protocol-item-specs .spec-pill,
    html body main .protocol-item-card .spec-pill,
    html body section .protocol-item-card .spec-pill {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        padding: 10px 14px !important;
        width: 100% !important;
        max-width: 100% !important;
        text-align: left !important;
        border-radius: 10px !important;
        background: rgba(20, 184, 166, 0.06) !important;
        border: 1px solid rgba(20, 184, 166, 0.15) !important;
        line-height: 1.3 !important;
    }
    html body .protocol-item-card .spec-pill .spec-label,
    html body .protocol-page .spec-pill .spec-label,
    html body main .spec-pill .spec-label {
        font-size: 0.7rem !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.6px !important;
        color: #6b7280 !important;
        flex-shrink: 0 !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
    }
    html body .protocol-item-card .spec-pill strong,
    html body .protocol-page .spec-pill strong,
    html body main .spec-pill strong {
        font-size: 0.9rem !important;
        font-weight: 700 !important;
        color: #0d9488 !important;
        text-align: right !important;
        white-space: normal !important;
        word-break: keep-all !important;
        flex: 1 !important;
        line-height: 1.3 !important;
    }

    /* Protocol item name: prevent "BPC-157" from wrapping to two lines */
    
    /* But ensure "BPC-157" specifically doesn't break on the hyphen.
       Use display: inline-block on a span trick — except we can't add
       HTML. Instead set the row to flex and the name to flex-shrink: 0
       up to a max-width — if it doesn't fit single-line, it wraps at
       SPACES not hyphens. */
    
    
    
}

/* ════════════════════════════════════════════════════════════════════════
   R78: Stack-component spec pills — final compact layout
   
   R77 made each pill too tall and visually disconnected (label looked
   like a separate floating badge). User: "still looks messed up"
   
   New approach: KEEP the 3-column grid (label-on-top design works
   visually) but make the typography SMALLER and the values WRAP within
   their cells. Each pill is a compact stacked cell:
   
   ┌─────────────┬─────────────┬─────────────┐
   │  REF DOSE   │  FREQUENCY  │   WINDOW    │
   │  400-700    │    q12h     │   6-8       │
   │  mcg        │             │   weeks     │
   └─────────────┴─────────────┴─────────────┘
   ════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* Override R77's flex-column with grid 3-up */
    html body .protocol-item-card .protocol-item-specs,
    html body .protocol-page .protocol-item-specs,
    html body main .protocol-item-card .protocol-item-specs,
    html body section .protocol-item-card .protocol-item-specs {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr !important;
        flex-direction: row !important;
        gap: 6px !important;
        margin: 10px 0 12px !important;
        width: 100% !important;
    }
    /* Each cell: compact stacked label-above-value */
    html body .protocol-item-card .protocol-item-specs .spec-pill,
    html body .protocol-page .protocol-item-specs .spec-pill,
    html body main .protocol-item-card .spec-pill,
    html body section .protocol-item-card .spec-pill {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        padding: 8px 4px !important;
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        text-align: center !important;
        border-radius: 8px !important;
        background: rgba(20, 184, 166, 0.06) !important;
        border: 1px solid rgba(20, 184, 166, 0.18) !important;
        line-height: 1.2 !important;
    }
    /* Label tiny, value compact */
    html body .protocol-item-card .spec-pill .spec-label,
    html body .protocol-page .spec-pill .spec-label,
    html body main .spec-pill .spec-label {
        font-size: 0.58rem !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.4px !important;
        color: #6b7280 !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        background: transparent !important;
        padding: 0 !important;
        border: none !important;
    }
    html body .protocol-item-card .spec-pill strong,
    html body .protocol-page .spec-pill strong,
    html body main .spec-pill strong {
        font-size: 0.78rem !important;
        font-weight: 700 !important;
        color: #0d9488 !important;
        text-align: center !important;
        white-space: normal !important;
        word-break: keep-all !important;
        overflow-wrap: break-word !important;
        line-height: 1.2 !important;
    }
}

/* Tighter on very narrow phones */


/* ════════════════════════════════════════════════════════════════════════
   R79: ROOT CAUSE — .protocol-item-card uses CSS GRID not flex
   
   Line 36404 sets: display: grid; grid-template-columns: 32px 110px 1fr
   On mobile (375px), the body column gets only 143px after gaps/padding.
   No amount of spec-pill fiddling fixes this because the parent CONTAINER
   is too narrow.
   
   My R65 used `flex-direction: column` which does nothing on a grid.
   
   THE REAL FIX: override the grid template on mobile to ONE column,
   stacking everything vertically: num | img | body.
   ════════════════════════════════════════════════════════════════════════ */



/* ════════════════════════════════════════════════════════════════════════
   R80: Comprehensive mobile audit findings — round 5
   
   Findings from running __deepAudit() across every key page after
   populating cart + dismissing cookie. Real issues found:
   
   FORM iOS-ZOOM RISKS:
   - INPUT#faq-search (14.25px)
   - SELECT#peptide-preset (14.25px) — calculator
   
   TAP TARGET TOO SMALL:
   - .cs-edit-link "Edit cart" (h:30)
   - .forgot-link "Forgot password" (h:32) — auth page
   - account "Create one" link (h:32)
   - .toggle-eye password show/hide (22w × 44h — width)
   - .link-arrow sitewide CTAs (h:31): "View all" / "See all COAs" /
     "Browse certificates of analysis" / "Or see the COAs"
   - .products-stacks-link "All stacks & cu..." (h:32)
   - .stack-details-link "Details" (h:32)
   - cart drawer close X button (12w × 44h — width)
   
   LAYOUT OVERFLOW:
   - .vs-table 540px wide on homepage — no scroll wrapper
   - .quality-tab 127px overflow (already scroll-snapped but parent
     needs scroll-x)
   
   All scoped mobile-only.
   ════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* ── 1. iOS-zoom form fixes ── */
    html body input#faq-search,
    html body input.faq-search,
    html body select#peptide-preset,
    html body select.peptide-preset {
        font-size: 16px !important;
    }
    
    /* ── 2. .cs-edit-link "Edit cart" — proper tap target ── */
    html body a.cs-edit-link,
    html body .cs-edit-link {
        min-height: 36px !important;
        padding: 6px 12px !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
    }
    
    /* ── 3. Auth page links: "Forgot password", "Create one" ── */
    html body a.forgot-link,
    html body .auth-card a:not(.btn),
    html body .auth-page a:not(.btn):not(.back-link),
    html body .signin-form a {
        min-height: 36px !important;
        padding: 6px 8px !important;
        display: inline-flex !important;
        align-items: center !important;
    }
    
    /* ── 4. Password toggle eye button: wider tap target ── */
    html body button.toggle-eye,
    html body .toggle-eye {
        min-width: 40px !important;
        min-height: 40px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* ── 5. .link-arrow sitewide CTA polish ── */
    html body a.link-arrow,
    html body .link-arrow {
        min-height: 36px !important;
        padding: 6px 4px !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
    }
    
    /* ── 6. Products page stack links ── */
    html body a.products-stacks-link,
    html body a.stack-details-link,
    html body .products-stacks-link,
    html body .stack-details-link {
        min-height: 36px !important;
        padding: 6px 12px !important;
        display: inline-flex !important;
        align-items: center !important;
    }
    
    /* ── 7. .pp-section-link — was 1px short ── */
    html body a.pp-section-link,
    html body .pp-section-link {
        min-height: 36px !important;
        padding: 6px 10px !important;
        display: inline-flex !important;
        align-items: center !important;
    }
    
    /* ── 8. Cart drawer close button: was 12w × 44h ── */
    html body .cart-sidebar [class*="close"],
    html body #cart-sidebar [class*="close"],
    html body .cart-sidebar button[aria-label*="close" i],
    html body .cart-header button:first-child,
    html body .cart-header > button {
        min-width: 40px !important;
        min-height: 40px !important;
        width: 40px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 1.1rem !important;
    }
    /* Specifically target cart close X (often <button> with svg or × text) */
    html body .cart-sidebar > .cart-header button,
    html body #cart-sidebar > .cart-header button {
        min-width: 40px !important;
        min-height: 40px !important;
    }
    
    /* ── 9. .vs-table — wrap in horizontal scroll on mobile ── */
    html body .vs-table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        max-width: 100% !important;
        scrollbar-width: thin !important;
    }
    html body .vs-table::-webkit-scrollbar { height: 4px !important; display: block !important; }
    html body .vs-table::-webkit-scrollbar-thumb { background: rgba(20,184,166,0.3) !important; border-radius: 2px !important; }
    
    /* ── 10. .quality-tabs / similar tab strips — ensure scrollable parent ── */
    html body .quality-tabs-wrap,
    html body .quality-tabs,
    html body [class*="quality-tab"][class*="wrap"],
    html body [class*="quality-tabs"] {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        max-width: 100% !important;
        scroll-snap-type: x mandatory !important;
    }
    html body .quality-tab {
        flex-shrink: 0 !important;
        scroll-snap-align: start !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   R81: Option A full audit — round-2 findings
   
   Findings from per-page diagnostic + screenshots across all pages
   (marketing, catalog, tools, product detail, blog, legal, account flow,
   overlays). Issues found:
   
   1. SELECT#contact-subject 14.25px → iOS zoom
   2. compare.html compound pickers (3 SELECTs) at 13.8px → iOS zoom
   3. privacy.html data table 675px wide — no horizontal scroll wrapper
   4. shipping-policy.html table 377px (2px past viewport) — same fix
   ════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* iOS zoom — contact form + compare page selects */
    html body select#contact-subject,
    html body .contact-form select,
    html body .compare-picker select,
    html body .compare-picker > select {
        font-size: 16px !important;
    }
    
    /* Legal page tables — wrap in horizontal scroll */
    html body main.privacy-page table,
    html body main.terms-page table,
    html body .legal-content table,
    html body main[class*="policy"] table,
    html body table:not(.coa-table):not(.compare-table) {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        max-width: 100% !important;
        white-space: normal !important;
    }
    html body main.privacy-page table thead,
    html body main.terms-page table thead,
    html body .legal-content table thead {
        display: table-header-group !important;
    }
    /* Inner cells stay readable */
    html body main.privacy-page table td,
    html body main.terms-page table td,
    html body .legal-content table td {
        min-width: 130px !important;
        padding: 10px 12px !important;
        font-size: 0.88rem !important;
        vertical-align: top !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   R82: User-reported mobile polish (round-after-deploy)
   
   1. Cart drawer X button awkward position; give items more room,
      slightly reduce totals/CTA block scale
   2. Order confirmation: polish .confirm-ref-pill
   3. Checkout step 2 scroll-to-top fix (JS)
   ════════════════════════════════════════════════════════════════════════ */

/* ─── 1a. Cart drawer: reposition X button to be aligned with qty stepper ── */
@media (max-width: 768px) {
    /* Move X from top-right corner of the card to a sensibly-aligned spot */
    html body .cart-sidebar .cart-item,
    html body #cart-sidebar .cart-item {
        position: relative !important;
        padding: 10px 36px 10px 10px !important;  /* leave room on right for X */
        gap: 10px !important;
    }
    html body .cart-sidebar .cart-item-close,
    html body #cart-sidebar .cart-item-close {
        top: 50% !important;
        right: 8px !important;
        transform: translateY(-50%) !important;
        width: 28px !important;
        height: 28px !important;
        background: rgba(0, 0, 0, 0.04) !important;
        color: rgba(0, 0, 0, 0.55) !important;
        border-radius: 50% !important;
    }
    html body .cart-sidebar .cart-item-close:hover,
    html body #cart-sidebar .cart-item-close:hover {
        background: rgba(239, 68, 68, 0.10) !important;
        color: #ef4444 !important;
    }
    html body .cart-sidebar .cart-item-close i,
    html body #cart-sidebar .cart-item-close i {
        font-size: 0.78rem !important;
    }

    /* ─── 1b. Cart items: bigger thumbnail, more name room ─── */
    html body .cart-sidebar .cart-item-img,
    html body #cart-sidebar .cart-item-img {
        width: 72px !important;
        height: 72px !important;
        flex-shrink: 0 !important;
    }
    html body .cart-sidebar .cart-item-details,
    html body #cart-sidebar .cart-item-details {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }
    html body .cart-sidebar .cart-item-name,
    html body #cart-sidebar .cart-item-name {
        font-size: 0.92rem !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
    }
    html body .cart-sidebar .cart-item-dosage,
    html body #cart-sidebar .cart-item-dosage {
        font-size: 0.78rem !important;
        color: #6b7280 !important;
    }
    html body .cart-sidebar .cart-item-price,
    html body #cart-sidebar .cart-item-price {
        font-size: 0.95rem !important;
        font-weight: 700 !important;
        margin-top: 4px !important;
    }

    /* ─── 1c. Totals/CTA section: slight scale-down ─── */
    html body .cart-sidebar .cart-summary-block,
    html body #cart-sidebar .cart-summary-block {
        padding: 8px 10px !important;
    }
    html body .cart-sidebar .cart-subtotal,
    html body #cart-sidebar .cart-subtotal,
    html body .cart-sidebar .cart-discount-row,
    html body #cart-sidebar .cart-discount-row {
        font-size: 0.82rem !important;
        margin: 3px 0 !important;
    }
    html body .cart-sidebar .cart-savings-badge,
    html body #cart-sidebar .cart-savings-badge {
        padding: 5px 10px !important;
        font-size: 0.76rem !important;
        margin: 4px 0 !important;
    }
    html body .cart-sidebar #cart-footer .btn-primary.btn-large,
    html body #cart-sidebar #cart-footer .btn-primary.btn-large,
    html body .cart-sidebar .btn-primary.btn-large,
    html body #cart-sidebar .btn-primary.btn-large {
        padding: 12px 16px !important;  /* slightly smaller than R71 */
        font-size: 0.92rem !important;
    }
    html body .cart-sidebar .cart-disclaimer,
    html body #cart-sidebar .cart-disclaimer,
    html body .cart-sidebar #cart-footer > div:last-child {
        font-size: 0.7rem !important;
        margin-top: 4px !important;
        padding: 3px 6px !important;
        line-height: 1.3 !important;
    }
    /* Smaller delivery row + promo */
    html body .cart-sidebar #cart-delivery-row,
    html body #cart-sidebar #cart-delivery-row {
        padding: 5px 10px !important;
        font-size: 0.76rem !important;
        margin-bottom: 4px !important;
    }
    html body .cart-sidebar .promo-toggle,
    html body #cart-sidebar .promo-toggle {
        padding: 7px 10px !important;
        font-size: 0.8rem !important;
    }
}

/* ─── 3. Order reference pill polish ─── */
html body .confirm-ref-pill {
    background: linear-gradient(135deg, #ffffff 0%, #f0fdfa 100%) !important;
    border: 1.5px solid rgba(20, 184, 166, 0.35) !important;
    box-shadow: 0 2px 8px rgba(20, 184, 166, 0.08),
                0 1px 0 rgba(255, 255, 255, 0.5) inset !important;
    padding: 10px 10px 10px 20px !important;
    gap: 14px !important;
}
html body .confirm-ref-pill .cr-label {
    font-size: 0.66rem !important;
    color: #6b7280 !important;
    letter-spacing: 0.14em !important;
}
html body .confirm-ref-pill .cr-value {
    font-family: 'JetBrains Mono', 'Courier New', monospace !important;
    font-weight: 700 !important;
    color: #0d9488 !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.06em !important;
}
html body .confirm-ref-pill .cr-copy {
    background: linear-gradient(135deg, #14b8a6, #0d9488) !important;
    border: none !important;
    color: #ffffff !important;
    width: 36px !important;
    height: 36px !important;
    box-shadow: 0 2px 6px rgba(20, 184, 166, 0.30) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}
html body .confirm-ref-pill .cr-copy:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 4px 10px rgba(20, 184, 166, 0.40) !important;
    background: linear-gradient(135deg, #0f9d8f, #0a7e75) !important;
}
html body .cr-copy.is-copied {
    background: #22c55e !important;
}

@media (max-width: 540px) {
    html body .confirm-ref-pill {
        padding: 8px 8px 8px 14px !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
        max-width: 100% !important;
    }
    html body .confirm-ref-pill .cr-value {
        font-size: 0.85rem !important;
        word-break: break-all !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }
    html body .confirm-ref-pill .cr-copy {
        width: 34px !important;
        height: 34px !important;
        flex-shrink: 0 !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   R83: v2 audit findings — cart + overlay z-index conflicts
   
   FINDINGS:
   1. CRITICAL: Live-order-toast at bottom:76px OVERLAPS the
      Proceed-to-Checkout button inside the cart drawer (z-index conflict).
      Toast z=9000, cart-sidebar z=8500+. Toast sits in front of cart
      footer button — actively blocks the highest-value CTA on the site.
   2. Cart item name truncation: long names like "GLOW (GHK-Cu, BPC-157,
      TB-500)" need to allow 2-line wrap inside their container.
   3. Empty-cart trust signal icons (.cart-empty-perks i) feel low-opacity
      and faded — should be brand-teal.
   4. Email signup popup overlaps cart drawer similarly.
   ════════════════════════════════════════════════════════════════════════ */

/* 1. CRITICAL: Hide live-order-toast and email popup when cart is open */
html body.has-cart-open .live-order-toast,
html body .cart-sidebar.open ~ .live-order-toast,
html body .cart-sidebar.open ~ .email-popup {
    display: none !important;
}
/* Also: when ANY drawer/overlay z >= 8500 is open, toasts hide */
@media (max-width: 768px) {
    html body .cart-sidebar.open ~ * .live-order-toast,
    html body .cart-sidebar.open ~ * .toast {
        opacity: 0 !important;
        pointer-events: none !important;
        visibility: hidden !important;
    }
}

/* JS-friendly approach: add a body class when cart opens */
html body.cart-drawer-open .live-order-toast,
html body.cart-drawer-open #toast,
html body.cart-drawer-open .toast,
html body.cart-drawer-open .email-popup {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* 2. Cart item name: allow 2-line wrap inside its container */
@media (max-width: 768px) {
    html body .cart-sidebar .cart-item-name,
    html body #cart-sidebar .cart-item-name {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        line-height: 1.3 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        word-break: normal !important;
        overflow-wrap: anywhere !important;
    }
}

/* 3. Empty-cart trust signal icons: brand-teal not faded */
@media (max-width: 768px) {
    html body .cart-sidebar .cart-empty-perks i,
    html body .cart-sidebar .cep-item i,
    html body #cart-sidebar .cart-empty-perks i,
    html body #cart-sidebar [class*="empty-perks"] i {
        color: #14b8a6 !important;
        opacity: 1 !important;
        font-size: 1.2rem !important;
    }
    html body .cart-sidebar .cart-empty-perks .cep-item,
    html body .cart-sidebar .cep-item {
        color: #4b5563 !important;
        font-weight: 600 !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   R84: v2 audit findings round-2 — cart/checkout polish
   
   1. Cart item NAME overlaps QTY stepper when name is long (e.g. "GLOW
      (GHK-Cu, BPC-157, TB-500)") — line-clamp not preventing column
      collision because item card uses flex with name + actions in
      separate columns but name flex-grows into the actions area.
   2. Confirmation page: support@elytralabsca.ca wraps mid-word into
      "su\npport@elytralabsca.ca". Need word-break to keep email intact.
   3. Confirmation checkmark icon appears faded — bump opacity.
   ════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* 1. Cart item: tighten name column, give actions hard width, prevent overlap */
    html body .cart-sidebar .cart-item,
    html body #cart-sidebar .cart-item {
        align-items: flex-start !important;
    }
    html body .cart-sidebar .cart-item-details,
    html body #cart-sidebar .cart-item-details {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        /* R102: removed `max-width: calc(100% - 72px - 110px - 36px - 30px)`.
           That cap evaluated to 100%-248px in this scope; once the row was
           also constrained, it could resolve to a NEGATIVE max-width which
           clamps to 0 — producing the "name squashed to 0 width" bug.
           The new grid layout at ≤540px (see R102 block at end of file)
           handles right-column reservation via grid-template-columns instead. */
    }
    html body .cart-sidebar .cart-item-actions,
    html body #cart-sidebar .cart-item-actions {
        flex-shrink: 0 !important;
        align-self: center !important;
    }
    html body .cart-sidebar .cart-item-qty,
    html body #cart-sidebar .cart-item-qty {
        flex-shrink: 0 !important;
    }
    /* Force the name to actually clamp at 2 lines and ellipsis */
    html body .cart-sidebar .cart-item-name,
    html body #cart-sidebar .cart-item-name {
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
        font-size: 0.88rem !important;
        line-height: 1.3 !important;
    }
}

/* 2. Confirmation page: support email + long URLs don't wrap mid-word */
html body .confirm-hero a[href^="mailto:"],
html body .confirm-postnote a,
html body .checkout-step-content a[href^="mailto:"],
html body #checkout-step-4 a {
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    white-space: normal !important;
}

/* Actually allow wrap but only at safe break points (@ or .) — use wbr-like behavior */
html body #checkout-step-4 a[href^="mailto:"] {
    display: inline-block !important;
    max-width: 100% !important;
}

/* 3. Confirmation checkmark icon — make it visible
   R127: REMOVED the over-broad `#checkout-step-4 [class*="confirmation"]
   [class*="icon"]` selector. It was matching `.cs-icon` inside the recap
   section headers (because `.order-confirmation` ancestor contains
   "confirmation" and `.cs-icon` contains "icon"), inflating each section
   header's icon to a 64px circle with `margin: 0 auto`. The auto-margin
   then shoved "Your Order" / "Shipping To" titles to the right edge of
   their cards. The other selectors below cover the real hero checkmark. */
html body .confirmation-icon,
html body .confirm-checkmark,
html body .confirm-hero > i:first-of-type,
html body .confirm-hero > svg:first-of-type {
    opacity: 1 !important;
    color: #14b8a6 !important;
    background: rgba(20, 184, 166, 0.10) !important;
    border-radius: 50% !important;
    width: 64px !important;
    height: 64px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.8rem !important;
    margin: 0 auto 16px !important;
}

/* ════════════════════════════════════════════════════════════════════════
   R102 — CART-ITEM NAME SQUASH FIX (MOBILE)
   ────────────────────────────────────────────────────────────────────────
   Bug:  Inside the cart drawer at 375 px viewport, the flex row layout
         (image + details + actions + close) gave the details column only
         ~54 px of horizontal space — multi-word product names like
         "GLOW (GHK-Cu, BPC-157, TB-500)" wrapped to 5+ tall lines.
   Root: Qty-stepper (.cart-item-actions) was 126 px wide and the X
         button column added another 40 px, totaling ~184 px reserved on
         the right of a 350 px row. The old max-width: calc(100% - 248 px)
         override was a no-op because flex layout naturally squeezed the
         middle column.
   Fix:  At ≤ 540 px (cart drawer is full-screen on mobile), break the
         row into a 2-row grid:
           Row 1: image | name+dose+price (expands)              | X
           Row 2:        | qty stepper (compact, left-aligned)   |
         The qty stepper drops below the name instead of stealing
         horizontal space, so the name has full column width.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 540px) {
    html body .cart-sidebar .cart-item {
        display: grid !important;
        grid-template-columns: 72px 1fr 36px !important;
        grid-template-rows: auto auto !important;
        grid-template-areas:
            "img  details close"
            "img  actions actions" !important;
        column-gap: 12px !important;
        row-gap: 8px !important;
        align-items: start !important;
    }
    html body .cart-sidebar .cart-item-img {
        grid-area: img !important;
        align-self: center !important;
    }
    /* Higher-specificity selector (.cart-sidebar.open) to beat the older
       R84 rule that set max-width: calc(100% - 248px) — which, in a grid
       cell, resolved to a NEGATIVE value (cell ~218px minus 248) and
       clamped width to 0 → no name visible. We force max-width:none here. */
    html body .cart-sidebar.open .cart-item .cart-item-details,
    html body .cart-sidebar .cart-item .cart-item-details {
        grid-area: details !important;
        max-width: none !important;
        min-width: 0 !important;
        width: 100% !important;
        flex: initial !important;
        flex-basis: auto !important;
    }
    html body .cart-sidebar .cart-item-actions {
        grid-area: actions !important;
        justify-self: start !important;
        margin-top: 4px !important;
    }
    html body .cart-sidebar .cart-item-close {
        grid-area: close !important;
        align-self: start !important;
        justify-self: end !important;
        width: 36px !important;
        height: 36px !important;
    }
    /* Names now flow naturally — allow up to 2 lines with line-clamp and
       readable line-height. dose/price stack below the name. */
    html body .cart-sidebar .cart-item-name {
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        line-height: 1.25 !important;
        word-break: keep-all !important;
    }

    /* ═══ R130 — slim down each cart item on mobile so more fit on screen
       without scrolling. Trims padding, shrinks the image, tightens the
       grid template, and uses a smaller border-radius for that flatter
       "pill row" look the user asked for. ═══ */
    html body .cart-sidebar .cart-item,
    html body #cart-sidebar .cart-item {
        padding: 10px 36px 10px 12px !important;
        margin-bottom: 8px !important;
        border-radius: 14px !important;
        column-gap: 10px !important;
        row-gap: 4px !important;
        grid-template-columns: 56px 1fr 32px !important;
    }
    html body .cart-sidebar .cart-item-img,
    html body #cart-sidebar .cart-item-img {
        width: 56px !important;
        height: 56px !important;
    }
    html body .cart-sidebar .cart-item-name,
    html body #cart-sidebar .cart-item-name {
        font-size: 0.92rem !important;
    }
    html body .cart-sidebar .cart-item-dosage,
    html body #cart-sidebar .cart-item-dosage {
        font-size: 0.76rem !important;
        margin-top: 1px !important;
    }
    html body .cart-sidebar .cart-item-price,
    html body #cart-sidebar .cart-item-price {
        font-size: 0.88rem !important;
        margin-top: 3px !important;
    }
    html body .cart-sidebar .cart-item-close,
    html body #cart-sidebar .cart-item-close {
        top: 6px !important;
        right: 6px !important;
        width: 28px !important;
        height: 28px !important;
        font-size: 0.78rem !important;
    }
    /* Tighter qty pill */
    html body .cart-sidebar .cart-item-qty,
    html body #cart-sidebar .cart-item-qty {
        transform: scale(0.92) !important;
        transform-origin: left center !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   R122 — CHECKOUT ZIP OVERFLOW (DESKTOP)
   ────────────────────────────────────────────────────────────────────────
   Bug:  In the Billing Address card on desktop, the City/State/ZIP row
         rendered with the ZIP input clipped ~190 px past the card's right
         edge. Three 230-wide inputs (700 px total) escape a 520-px card.
   Root: The R93 patch added long state names ("Northern Mariana Islands",
         "U.S. Virgin Islands") to the <select id="checkout-state">. Browsers
         size a <select> to the width of its WIDEST option, not the selected
         one. With min-content > (1/3 of available space), the grid's `1fr`
         tracks expanded past their share and the row overflowed its parent.
   Fix:  Force each `.form-group` child inside a `.form-row` to
         `min-width: 0` so grid tracks can shrink, AND set inputs/selects
         to `width: 100%` + `max-width: 100%` so the select can't push past
         the column. This is the canonical fix for "grid items refuse to
         shrink" — by default a grid item's min-width is min-content (the
         intrinsic min of children, which for a select is its widest option).
   ════════════════════════════════════════════════════════════════════════ */
html body .checkout-step-content .form-row > .form-group {
    min-width: 0 !important;
}
html body .checkout-step-content .form-row > .form-group > input,
html body .checkout-step-content .form-row > .form-group > select,
html body .checkout-step-content .form-row > .form-group > textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}
/* Belt-and-suspenders: the row itself should never overflow its container */
html body .checkout-step-content .form-row,
html body .checkout-step-content .form-row.form-row-3col {
    min-width: 0 !important;
    max-width: 100% !important;
}

/* ════════════════════════════════════════════════════════════════════════
   R121 — CHECKOUT STEP-TRANSITION SCROLL LOCK
   ────────────────────────────────────────────────────────────────────────
   Used by showCheckoutStep() in app.js. While `body.checkout-step-transitioning`
   is set, every scroll container on the checkout page is locked at 0 with
   overflow:hidden. This is the bulletproof defense against the "land at
   bottom of step 3" bug: even if the browser, an iOS layout heuristic, or
   focus restoration tries to scroll DURING the display swap, there is
   literally no scrollable axis available to it. The class is added before
   the display:none swap and removed on the next animation frame, so it's
   typically up for <16ms — invisible to the user but enough to prevent
   any unwanted scroll from racing the swap.
   ════════════════════════════════════════════════════════════════════════ */
html body.checkout-step-transitioning {
    overflow: hidden !important;
    overscroll-behavior: none !important;
}
/* :has() is widely supported (Chrome 105+, Firefox 121+, Safari 15.4+) and
   lets us pin the html element's overflow when the body is mid-transition.
   If unsupported, the body rule above still does most of the work. */
html:has(body.checkout-step-transitioning) {
    overflow: hidden !important;
}

/* ════════════════════════════════════════════════════════════════════════
   R124 — CONFIRMATION SIDE-META (right column balance)
   ────────────────────────────────────────────────────────────────────────
   The Shipping To card previously contained ONLY the recipient address,
   making it ~half the height of the Your Order card next to it on PC —
   awkward empty white space. We now append a stack of order-metadata
   rows (bill-to if different, confirmation email, payment method,
   estimated arrival, order ref) so the column visually balances.
   ════════════════════════════════════════════════════════════════════════ */
html body .confirm-side-meta {
    margin-top: 18px !important;
    padding-top: 16px !important;
    border-top: 1px dashed rgba(15, 23, 42, 0.12) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    /* R127: kill the inherited `text-align: center` from `.order-confirmation`
       so the meta values (email / payment method / arrival / ref) align with
       their labels on the left instead of floating in the middle of the row. */
    text-align: left !important;
}
html body .confirm-side-meta .confirm-side-row {
    /* R127: dropped `display: flex !important` — it was overriding the
       inline `style="display:none"` we set on the Bill-To wrap when
       billing == shipping, so the empty BILL TO row was always visible.
       The flex-column layout still applies; we just let inline display win. */
    display: flex;
    flex-direction: column !important;
    gap: 4px !important;
    align-items: flex-start !important;
}
html body .confirm-side-meta .csm-label {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: #14b8a6 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}
html body .confirm-side-meta .csm-label i {
    font-size: 0.78rem !important;
    opacity: 0.85 !important;
}
html body .confirm-side-meta .csm-value {
    font-size: 0.9rem !important;
    color: #0f172a !important;
    line-height: 1.4 !important;
    word-break: break-word !important;
}
html body .confirm-side-meta .csm-value.csm-mono {
    font-family: 'JetBrains Mono', 'Courier New', monospace !important;
    font-size: 0.84rem !important;
    color: #0d9488 !important;
    font-weight: 600 !important;
}
html body .confirm-side-meta .confirm-side-ref .csm-value {
    background: rgba(20, 184, 166, 0.08) !important;
    padding: 6px 10px !important;
    border-radius: 6px !important;
    display: inline-block !important;
    align-self: flex-start !important;
}

/* ════════════════════════════════════════════════════════════════════════
   R148 — CHECKOUT PAYMENT STEP REMODEL
   ────────────────────────────────────────────────────────────────────────
   Three targeted upgrades to the Step 3 (Payment) page:

   1. payment-step-header        — rich h2 with context subtitle
   2. payment-hero-v2            — horizontal split layout (amount | trust grid)
                                   slimmer than the old centered/stacked hero
   3. payment-next-steps         — replaces the dead "↑ select a method" empty
                                   state with a useful 4-step "what happens
                                   after you pay" timeline + pick-method hint
   ════════════════════════════════════════════════════════════════════════ */

/* ─── 0. Compress Step 3 (Payment) top stack ────────────────────────────
   Owner request: fit all 4 payment options above the fold without scrolling.
   Strategy — shave height from every element above the picker:

   (1) Shrink the "Secure Checkout" h1 ~40%   (saves ~24px)
   (2) Tighten the Back-link spacing          (saves ~8px)
   (3) Shrink page-header bottom margin       (saves ~8px)
   (4) Shrink step-indicator padding+margin   (saves ~16px)
   (5) Shave step-3 content top padding       (saves ~14px)
   (6) Pull step-3 card up via negative margin (saves ~16px)
   (7) Tighten payment-step-header bottom     (saves ~8px)

   Net effect: ~90px tighter at the top of the Payment step. All 4 cards
   should now sit above the fold on a normal 1080p viewport.            */

/* (1) Compact "Secure Checkout" h1 */
html body .checkout-page .checkout-page-header h1 {
    font-size: clamp(1.2rem, 2.2vw, 1.55rem) !important;
    line-height: 1.2 !important;
    margin: 0 !important;
}
html body .checkout-page .checkout-page-header h1 i {
    font-size: 0.92em !important;
}

/* (2) Tighter Back-link spacing */
html body .checkout-page .checkout-page-header .back-link {
    margin-bottom: 8px !important;
    font-size: 0.82rem !important;
}

/* (3) Shrink page-header bottom margin
   Reduced by 8px to pull the step indicator up. The matching +8px on
   .checkout-steps margin-bottom below keeps the box below it anchored
   in place — net effect: only the step indicator moves up. */
html body .checkout-page .checkout-page-header {
    margin-bottom: 6px !important;
}

/* (4) Tighter step indicator bar
   margin-bottom bumped by 8px to compensate for the page-header shrink,
   so only the indicator slides up — the Choose-how-to-pay card stays put. */
html body .checkout-page .checkout-steps {
    padding: 10px 14px !important;
    margin-bottom: 22px !important;
}

/* (5)+(6) Step 3 card: less internal top padding + pulled up via neg margin */
html body .checkout-page #checkout-step-3.checkout-step-content {
    padding-top: 16px !important;
    /* R423: was -10px to tuck under the stepper; R422 hid the stepper on the
       payment step, so the card was left touching the navbar. Positive margin
       now gives it breathing room below the nav. */
    margin-top: 24px !important;
}

/* ─── 1. Step header ─────────────────────────────────────────────────── */
html body .payment-step-header {
    /* R425: more space between the "All methods…" subtext and the first card (12 -> 30). */
    margin: 0 0 30px 0 !important;
}
html body .payment-step-header h2 {
    font-family: 'Orbitron', sans-serif !important;
    font-size: clamp(1.3rem, 2.4vw, 1.7rem) !important;
    font-weight: 700 !important;
    color: var(--text) !important;
    margin: 0 0 4px 0 !important;
    letter-spacing: -0.01em !important;
}
html body .payment-step-header .payment-step-sub {
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
}
html body .payment-step-header .payment-step-sub {
    color: var(--text-muted) !important;
    font-size: 0.92rem !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    max-width: 580px !important;
}

/* ─── 2. Horizontal Payment Hero ─────────────────────────────────────── */
html body .payment-hero.payment-hero-v2 {
    background: linear-gradient(135deg, rgba(20,184,166,0.08), rgba(20,184,166,0.02) 60%, rgba(59,130,246,0.05)) !important;
    border: 1px solid rgba(20,184,166,0.22) !important;
    border-radius: 16px !important;
    padding: 22px 26px !important;
    text-align: left !important;
    /* R148 v3: hero now sits BELOW the method picker, so top margin replaces
       the bottom margin used in v1/v2 positioning. */
    margin: 18px 0 24px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 28px !important;
    flex-wrap: wrap !important;
}
@media (max-width: 720px) {
    html body .payment-hero.payment-hero-v2 {
        flex-direction: column !important;
        text-align: center !important;
        gap: 18px !important;
        padding: 20px 18px !important;
    }
}
html body .payment-hero.payment-hero-v2 .ph-amount-block {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
    flex-shrink: 0 !important;
}
@media (max-width: 720px) {
    html body .payment-hero.payment-hero-v2 .ph-amount-block {
        align-items: center !important;
    }
}
html body .payment-hero.payment-hero-v2 .ph-label {
    font-size: 0.72rem !important;
    color: var(--text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    font-weight: 700 !important;
    margin: 0 !important;
}
html body .payment-hero.payment-hero-v2 .ph-amount {
    font-family: 'Orbitron', sans-serif !important;
    font-size: clamp(2rem, 4.5vw, 2.6rem) !important;
    color: var(--text) !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    margin: 4px 0 0 0 !important;
    letter-spacing: -0.02em !important;
}
html body .payment-hero.payment-hero-v2 .ph-note {
    font-size: 0.78rem !important;
    color: var(--text-muted) !important;
    margin-top: 4px !important;
}

/* Trust block — horizontal row of 3 compact pills.
   Each pill is a single line: icon + text. Wraps cleanly at narrow widths. */
html body .payment-hero.payment-hero-v2 .ph-trust-block {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding-left: 24px !important;
    border-left: 1px solid rgba(20,184,166,0.20) !important;
    flex: 1 !important;
    /* `center` makes the third (wrapped) pill sit centered between the
       two pills above it instead of left- or right-aligned. */
    justify-content: center !important;
    align-content: center !important;
}
@media (max-width: 720px) {
    html body .payment-hero.payment-hero-v2 .ph-trust-block {
        padding-left: 0 !important;
        border-left: none !important;
        border-top: 1px solid rgba(20,184,166,0.20) !important;
        padding-top: 16px !important;
        justify-content: center !important;
        width: 100% !important;
    }
}
html body .payment-hero.payment-hero-v2 .ph-trust-cell {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 14px !important;
    background: rgba(255,255,255,0.7) !important;
    border: 1px solid rgba(20,184,166,0.14) !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
}
html body .payment-hero.payment-hero-v2 .ph-trust-cell i {
    width: 22px !important;
    height: 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: rgba(20,184,166,0.14) !important;
    color: var(--accent) !important;
    font-size: 0.78rem !important;
    flex-shrink: 0 !important;
}
html body .payment-hero.payment-hero-v2 .ph-trust-cell div {
    display: flex !important;
    flex-direction: column !important;
    line-height: 1.1 !important;
    min-width: 0 !important;
}
html body .payment-hero.payment-hero-v2 .ph-trust-cell strong {
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: var(--text) !important;
    line-height: 1.2 !important;
}
html body .payment-hero.payment-hero-v2 .ph-trust-cell span {
    font-size: 0.66rem !important;
    color: var(--text-muted) !important;
    margin-top: 1px !important;
    font-weight: 500 !important;
}

/* ─── 2b. PAYMENT METHOD CARDS — VERTICAL V2 ─────────────────────────────
   Full-width vertical stack (1-column grid). Each card:
   - Larger icon tile with brand-tinted background
   - Title + tag on top row
   - One-line value prop subtitle
   - Accepted-methods pill row (Visa/MC/Amex/BTC/ETH/etc)
   - Right-arrow indicator that animates on hover
   ─────────────────────────────────────────────────────────────────────── */
html body .payment-method-grid.payment-method-grid-v2 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
}

html body .payment-method-card.pmc-v2 {
    background: #ffffff !important;
    border: 1.5px solid var(--border-light) !important;
    border-radius: 16px !important;
    padding: 18px 20px !important;
    color: var(--text) !important;
    cursor: pointer !important;
    font-family: 'Inter', sans-serif !important;
    text-align: left !important;
    display: grid !important;
    grid-template-columns: 56px 1fr auto !important;
    align-items: center !important;
    gap: 16px !important;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.18s ease, box-shadow 0.2s ease !important;
    position: relative !important;
    overflow: hidden !important;
}
html body .payment-method-card.pmc-v2:hover {
    border-color: rgba(20,184,166,0.55) !important;
    background: linear-gradient(180deg, rgba(20,184,166,0.025), rgba(20,184,166,0.06)) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 14px rgba(20, 184, 166, 0.12), 0 1px 0 rgba(255,255,255,0.6) inset !important;
}
html body .payment-method-card.pmc-v2:hover .pmc-arrow i {
    transform: translateX(3px) !important;
    color: var(--accent) !important;
}
html body .payment-method-card.pmc-v2.active {
    border-color: var(--accent) !important;
    background: linear-gradient(180deg, rgba(20,184,166,0.045), rgba(20,184,166,0.10)) !important;
    box-shadow: 0 0 0 3px rgba(20,184,166,0.14), 0 4px 16px rgba(20, 184, 166, 0.15) !important;
}

/* Icon tile — brand-tinted per-method gradients */
html body .payment-method-card.pmc-v2 .pmc-icon {
    width: 56px !important;
    height: 56px !important;
    border-radius: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.7rem !important;
    flex-shrink: 0 !important;
    background: linear-gradient(135deg, rgba(20,184,166,0.14), rgba(20,184,166,0.04)) !important;
    color: var(--accent) !important;
}
html body .payment-method-card.pmc-v2 .pmc-icon-crypto {
    background: linear-gradient(135deg, rgba(247,147,26,0.20), rgba(247,147,26,0.06)) !important;
    color: #f7931a !important;  /* Bitcoin orange */
}
html body .payment-method-card.pmc-v2 .pmc-icon-card {
    background: linear-gradient(135deg, rgba(20,184,166,0.18), rgba(20,184,166,0.05)) !important;
    color: var(--accent) !important;
}
html body .payment-method-card.pmc-v2 .pmc-icon-paypal {
    background: linear-gradient(135deg, rgba(0,48,135,0.16), rgba(0,156,222,0.06)) !important;
    color: #003087 !important;  /* PayPal blue */
}
html body .payment-method-card.pmc-v2 .pmc-icon-venmo {
    background: linear-gradient(135deg, rgba(0,135,209,0.18), rgba(0,135,209,0.06)) !important;
    color: #008CFF !important;  /* Venmo blue */
}

/* Body — title row, subtitle, accepted-methods row */
html body .payment-method-card.pmc-v2 .pmc-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    min-width: 0 !important;
}
html body .payment-method-card.pmc-v2 .pmc-row1 {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}
html body .payment-method-card.pmc-v2 .pmc-name {
    font-weight: 700 !important;
    font-size: 1.04rem !important;
    color: var(--text) !important;
    letter-spacing: -0.005em !important;
    line-height: 1.2 !important;
}
html body .payment-method-card.pmc-v2 .pmc-sub {
    font-size: 0.82rem !important;
    color: var(--text-muted) !important;
    line-height: 1.4 !important;
    white-space: normal !important;  /* allow wrapping in v2 */
    overflow: visible !important;
    text-overflow: clip !important;
}

/* Tag pills (Fastest / Instant / Trusted / Private) */
html body .payment-method-card.pmc-v2 .pmc-tag {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.62rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.10em !important;
    color: var(--text-muted) !important;
    background: rgba(0,0,0,0.05) !important;
    border-radius: 999px !important;
    padding: 4px 10px !important;
    white-space: nowrap !important;
    line-height: 1.4 !important;
}
html body .payment-method-card.pmc-v2 .pmc-tag-fast {
    background: rgba(20,184,166,0.14) !important;
    color: var(--accent) !important;
}
html body .payment-method-card.pmc-v2 .pmc-tag-instant {
    background: rgba(59,130,246,0.14) !important;
    color: #3b82f6 !important;
}
html body .payment-method-card.pmc-v2 .pmc-tag-trusted {
    background: rgba(0,48,135,0.10) !important;
    color: #003087 !important;
}
html body .payment-method-card.pmc-v2 .pmc-tag-private {
    background: rgba(99,102,241,0.12) !important;
    color: #6366f1 !important;
}

/* Accepted-methods row — small pills under the subtitle */
html body .payment-method-card.pmc-v2 .pmc-accepted {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    margin-top: 2px !important;
}
html body .payment-method-card.pmc-v2 .pma-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 3px 8px !important;
    background: rgba(15, 23, 42, 0.04) !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    border-radius: 6px !important;
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    color: var(--text-muted) !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
}
html body .payment-method-card.pmc-v2 .pma-pill i {
    font-size: 0.82rem !important;
}
html body .payment-method-card.pmc-v2 .pma-pill.pma-brand i {
    font-size: 1.05rem !important;
    color: var(--text) !important;
}
/* Bigger card-network logos so Visa/MC/Amex are recognizable */
html body .payment-method-card.pmc-v2 .pma-pill .fa-cc-visa,
html body .payment-method-card.pmc-v2 .pma-pill .fa-cc-mastercard,
html body .payment-method-card.pmc-v2 .pma-pill .fa-cc-amex,
html body .payment-method-card.pmc-v2 .pma-pill .fa-cc-discover,
html body .payment-method-card.pmc-v2 .pma-pill .fa-apple-pay,
html body .payment-method-card.pmc-v2 .pma-pill .fa-google-pay {
    font-size: 1.5rem !important;
}
/* Brand colors for accepted-method icons */
html body .payment-method-card.pmc-v2 .pma-pill .fa-cc-visa       { color: #1A1F71 !important; }
html body .payment-method-card.pmc-v2 .pma-pill .fa-cc-mastercard { color: #EB001B !important; }
html body .payment-method-card.pmc-v2 .pma-pill .fa-cc-amex       { color: #2E77BC !important; }
html body .payment-method-card.pmc-v2 .pma-pill .fa-cc-discover   { color: #FF6000 !important; }
html body .payment-method-card.pmc-v2 .pma-pill .fa-apple-pay     { color: #000000 !important; }
html body .payment-method-card.pmc-v2 .pma-pill .fa-google-pay    { color: #5F6368 !important; }
html body .payment-method-card.pmc-v2 .pma-pill .fa-bitcoin       { color: #f7931a !important; }
html body .payment-method-card.pmc-v2 .pma-pill .fa-ethereum      { color: #627EEA !important; }
html body .payment-method-card.pmc-v2 .pma-pill .fa-sun           { color: #14F195 !important; }
html body .payment-method-card.pmc-v2 .pma-pill .fa-paypal        { color: #003087 !important; }

/* Right-arrow indicator that shifts on hover */
html body .payment-method-card.pmc-v2 .pmc-arrow {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    color: var(--text-muted) !important;
    font-size: 0.82rem !important;
    flex-shrink: 0 !important;
}
html body .payment-method-card.pmc-v2 .pmc-arrow i {
    transition: transform 0.18s ease, color 0.18s ease !important;
}

/* Mobile tweaks for v2 cards */
@media (max-width: 540px) {
    html body .payment-method-card.pmc-v2 {
        padding: 16px 14px !important;
        grid-template-columns: 48px 1fr auto !important;
        gap: 12px !important;
    }
    html body .payment-method-card.pmc-v2 .pmc-icon {
        width: 48px !important;
        height: 48px !important;
        font-size: 1.4rem !important;
    }
    html body .payment-method-card.pmc-v2 .pmc-name {
        font-size: 0.98rem !important;
    }
    html body .payment-method-card.pmc-v2 .pmc-arrow {
        display: none !important;
    }
}

/* ─── 3. "What happens after you pay" timeline (replaces empty state) ─── */






/* The timeline itself — vertical numbered steps with a connecting line. */

/* Connecting vertical line behind the numbered circles */









/* Pick-method hint at bottom — gentle pulse to guide the eye upward */


@keyframes pns-hint-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}


/* ─── 4. Polish: better "Back to Information" button ─────────────────── */
html body .checkout-payment-left .review-back-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 18px auto 0 !important;
    padding: 10px 18px !important;
    background: transparent !important;
    border: 1.5px solid var(--border-light) !important;
    border-radius: 999px !important;
    color: var(--text-muted) !important;
    font-size: 0.86rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.18s ease !important;
    font-family: inherit !important;
    text-decoration: none !important;
}
html body .checkout-payment-left .review-back-link:hover {
    border-color: var(--accent) !important;
    color: var(--accent) !important;
    background: rgba(20,184,166,0.04) !important;
    transform: translateX(-2px) !important;
}

/* ════════════════════════════════════════════════════════════════════════
   R149 — Pay-button amount-pills + Crypto Pay Now visual upgrade
   ────────────────────────────────────────────────────────────────────────
   1. PayPal/Venmo amount: was bare dark text on dark gradient — now a
      high-contrast white pill with navy text (same treatment as Malum).
   2. Crypto Pay Now button: was visually flat — now larger font, bigger
      vertical padding, stronger letter-spacing, and a subtle shimmer so
      it reads as the same level of premium CTA as the Card "Pay Securely"
      button.
   ════════════════════════════════════════════════════════════════════════ */

/* ─── 1. PayPal / Venmo button — full visual refinement ──────────────
   Goals:
   • Match the premium feel of the Card "Pay Securely" + Crypto "Pay Now"
     buttons so all 4 CTAs read as one design family.
   • Depth: layered drop shadow + inset highlight (lit-from-above feel).
   • Bigger brand icon for instant recognizability.
   • White amount pill (dark text) for high-contrast amount visibility.
   • Sliding chevron via ::after that animates rightward on hover —
     signals "you're being taken to PayPal/Venmo" without extra HTML.
   • Refined gradients with a third color stop for more visual depth than
     a simple two-color sweep.
   ─────────────────────────────────────────────────────────────────── */

/* Layout, typography, depth */
html body .pp-method-pay-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    color: #ffffff !important;
    text-decoration: none !important;
    padding: 17px 22px !important;
    border-radius: 14px !important;
    margin: 6px 0 14px 0 !important;
    font-weight: 700 !important;
    font-size: 1.04rem !important;
    letter-spacing: 0.3px !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18),
                0 1px 0 rgba(255, 255, 255, 0.18) inset !important;
    transition: transform 0.18s ease, box-shadow 0.2s ease, filter 0.2s ease !important;
    position: relative !important;
    overflow: hidden !important;
    border: none !important;
}
html body .pp-method-pay-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28),
                0 1px 0 rgba(255, 255, 255, 0.22) inset !important;
    filter: brightness(1.04) !important;
}

/* Larger brand icon — instantly recognizable */
html body .pp-method-pay-btn > i:first-child {
    font-size: 1.5rem !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}
/* R149: SVG brand mark on the Venmo button (replaces the generic phone icon).
   Width/height set via rem so it matches the size of the PayPal `<i>` icon. */
html body .pp-method-pay-btn > svg.venmo-svg-btn {
    width: 1.6rem !important;
    height: 1.6rem !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
}
/* Venmo SVG inside the picker card icon tile + pane header icon tile —
   inherits the parent's font-size via width:1em, but make sure it's
   block-level so it centers properly in the tile. */
html body .pmc-icon .venmo-svg,
html body .cs-icon .venmo-svg {
    display: inline-block !important;
    vertical-align: middle !important;
}
/* Venmo SVG inside the accepted-methods pill — match the pill icon size */
html body .pma-pill .venmo-svg {
    width: 1.05rem !important;
    height: 1.05rem !important;
    display: inline-block !important;
    vertical-align: -2px !important;
    color: #008CFF !important;  /* Venmo blue when shown in the small pill on white */
}

/* ════════════════════════════════════════════════════════════════════════
   R149 FINAL — Pay Securely color refresh + Crypto picker chip polish
   ────────────────────────────────────────────────────────────────────────
   PAY SECURELY: was plain black (.btn-primary winning at specificity 0,3,2).
   Now a refined brand-teal gradient that:
   • Signals security/trust without being scary-black
   • Matches the brand accent (the teal that runs throughout the site)
   • Differentiates from the dark-navy Crypto Pay Now button so the
     two CTAs read as related but distinct.
   Selector specificity (0,3,3) wins over .btn-primary (0,3,2).

   CRYPTO CHIPS: were plain white pills, ~no visual identity. Now they
   carry brand-tinted icons (Bitcoin orange, ETH violet-blue, LTC
   silver-blue, USDT green) + subtle inset highlight + softer hover
   lift. Active state gets a strong teal gradient + glow so the
   selection is unmistakable.
   ════════════════════════════════════════════════════════════════════════ */

/* ─── Pay Securely (Malum/Card) — brand teal gradient ───────────────── */
html body button.btn-primary.psifi-pay-btn:not(.cookie-btn-primary),
html body button.btn-primary.psifi-pay-btn:not(.cookie-btn-primary).btn-large {
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 55%, #0f766e 100%) !important;
    background-image: linear-gradient(135deg, #14b8a6 0%, #0d9488 55%, #0f766e 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 8px 22px rgba(13, 148, 136, 0.32),
                0 1px 0 rgba(255, 255, 255, 0.22) inset !important;
}
html body button.btn-primary.psifi-pay-btn:not(.cookie-btn-primary):hover {
    background: linear-gradient(135deg, #2dd4bf 0%, #14b8a6 55%, #0d9488 100%) !important;
    background-image: linear-gradient(135deg, #2dd4bf 0%, #14b8a6 55%, #0d9488 100%) !important;
    box-shadow: 0 12px 30px rgba(13, 148, 136, 0.42),
                0 1px 0 rgba(255, 255, 255, 0.26) inset !important;
    transform: translateY(-1px) !important;
}
/* Lock icon — bright white instead of legacy green, cleaner on teal */
html body button.btn-primary.psifi-pay-btn .psifi-pay-icon {
    color: #ffffff !important;
    opacity: 1 !important;
}
/* Arrow — also white for cohesion */
html body button.btn-primary.psifi-pay-btn .psifi-pay-arrow {
    color: #ffffff !important;
    opacity: 0.9 !important;
}

/* ─── Crypto picker chips — color/life ─────────────────────────────── */
html body .crypto-btn {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    border: 1.5px solid var(--border-light) !important;
    color: var(--text) !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04),
                0 1px 0 rgba(255, 255, 255, 0.8) inset !important;
    transition: transform 0.18s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease !important;
    position: relative !important;
}

/* Brand-tinted icons — instantly recognizable per coin */
html body .crypto-btn .fa-bitcoin     { color: #f7931a !important; }  /* Bitcoin orange */
html body .crypto-btn .fa-ethereum    { color: #627EEA !important; }  /* Ethereum violet-blue */
html body .crypto-btn .fa-coins       { color: #345D9D !important; }  /* Litecoin silver-blue */
html body .crypto-btn .fa-dollar-sign { color: #26A17B !important; }  /* Tether green */
/* Make the icons slightly bigger so they actually read */
html body .crypto-btn > i {
    font-size: 1.05rem !important;
    margin-right: 2px !important;
}

/* Hover — soft teal accent, subtle lift */
html body .crypto-btn:hover:not(.active) {
    border-color: rgba(20, 184, 166, 0.50) !important;
    background: linear-gradient(180deg, rgba(20, 184, 166, 0.04) 0%, #ffffff 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(20, 184, 166, 0.12),
                0 1px 0 rgba(255, 255, 255, 0.9) inset !important;
}

/* Active — bold teal gradient + glow so selection is unmistakable */
html body .crypto-btn.active {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.18) 0%, rgba(20, 184, 166, 0.08) 100%) !important;
    border-color: var(--accent) !important;
    color: #0a1628 !important;
    font-weight: 700 !important;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.18),
                0 6px 16px rgba(20, 184, 166, 0.20),
                0 1px 0 rgba(255, 255, 255, 0.85) inset !important;
}
/* Active state keeps brand-icon color (don't override to teal) so the
   coin remains visually identifiable even when selected. */

/* ════════════════════════════════════════════════════════════════════════
   R150 — MOBILE-ONLY POLISH PASS (post-R148/R149 audit)
   ────────────────────────────────────────────────────────────────────────
   Every rule below is gated to mobile viewports. DO NOT add un-media-
   queried selectors here — desktop is signed-off and out of scope.

   Fixes applied (from MOBILE-AUDIT-R150.md):
     1. Card-pane brand-pill row (Visa/MC/Amex/Discover/ApplePay/GPay)
        shrinks below 540px so the 6-icon strip doesn't wrap and push
        the Pay button further off the fold.
     2. PayPal / Venmo "Open … to Pay" button — tighter padding, smaller
        icon + chevron at <540px so amount pill stays inline.
     3. Checkout step indicator pills shrink at <380px so "Information
        & Review" doesn't wrap on iPhone SE.
     4. Crypto coin chips — min-width:0 + ellipsis so the "(SOL)" sub-
        on USDT doesn't break the 2-col grid layout.
     5. Trust pill "Ships in 24h" sub-text shrinks at <380px to prevent
        clipping inside the rounded pill.
     6. (Bonus) Reduced-motion guard for the popup-blocked banner
        slide-in animation added in R149.
   ════════════════════════════════════════════════════════════════════════ */

/* ─── R150-1: Card pane brand-icon row ─────────────────────────────── */
@media (max-width: 540px) {
    html body .payment-method-card.pmc-v2 .pma-pill .fa-cc-visa,
    html body .payment-method-card.pmc-v2 .pma-pill .fa-cc-mastercard,
    html body .payment-method-card.pmc-v2 .pma-pill .fa-cc-amex,
    html body .payment-method-card.pmc-v2 .pma-pill .fa-cc-discover,
    html body .payment-method-card.pmc-v2 .pma-pill .fa-apple-pay,
    html body .payment-method-card.pmc-v2 .pma-pill .fa-google-pay {
        font-size: 1.15rem !important;
    }
    html body .payment-method-card.pmc-v2 .pma-pill {
        padding: 2px 7px !important;
    }
    /* Also reduce accepted-row gap so 6 pills fit one line where possible */
    html body .payment-method-card.pmc-v2 .pmc-accepted {
        gap: 4px !important;
    }
}

/* ─── R150-2: PayPal / Venmo button — tighter on phones ────────────── */
@media (max-width: 540px) {
    html body .pp-method-pay-btn {
        padding: 15px 16px !important;
        gap: 10px !important;
        font-size: 0.96rem !important;
    }
    html body .pp-method-pay-btn::after {
        font-size: 0.95rem !important;
    }
    html body .pp-method-pay-btn > i:first-child {
        font-size: 1.3rem !important;
    }
    html body .pp-method-pay-btn > svg.venmo-svg-btn {
        width: 1.35rem !important;
        height: 1.35rem !important;
    }
    /* Amount pill — slightly smaller so it doesn't crowd the chevron */
    html body .pp-method-pay-btn strong#paypal-amount,
    html body .pp-method-pay-btn strong#venmo-amount {
        padding: 4px 10px !important;
        font-size: 0.96rem !important;
    }
}

/* ─── R150-3: Step indicator shrink on iPhone SE / small Android ──── */
@media (max-width: 380px) {
    html body .checkout-page .checkout-steps .step {
        font-size: 0.78rem !important;
        padding: 6px 10px !important;
    }
    /* Numbered circle inside also shrinks proportionally so it doesn't
       look oversized next to the now-smaller pill text */
    html body .checkout-page .checkout-steps .step > span {
        width: 18px !important;
        height: 18px !important;
        font-size: 0.72rem !important;
    }
}

/* ─── R150-4: Crypto chip row — min-width:0 + ellipsis safety ──────── */
@media (max-width: 660px) {
    html body .crypto-btn {
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    /* USDT carries a "(SOL)" subscript span — shrink it on mobile so
       the chip's main label "USDT" stays visible even at 320px width */
    html body .crypto-btn .crypto-net {
        font-size: 0.62rem !important;
        opacity: 0.7 !important;
    }
}

/* ─── R150-5: Trust pill sub-text shrink at narrow widths ──────────── */
@media (max-width: 380px) {
    html body .payment-hero.payment-hero-v2 .ph-trust-cell span {
        font-size: 0.62rem !important;
    }
    html body .payment-hero.payment-hero-v2 .ph-trust-cell strong {
        font-size: 0.74rem !important;
    }
    html body .payment-hero.payment-hero-v2 .ph-trust-cell {
        padding: 7px 12px !important;
    }
}

/* ─── R150-6: Popup-blocked banner reduced-motion guard ────────────── */
@media (prefers-reduced-motion: reduce) {
    #popup-blocked-banner {
        animation: none !important;
    }
    #popup-blocked-banner a {
        transition: none !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   R151 — HOMEPAGE HERO: PREMIUM REFINEMENT PASS
   ────────────────────────────────────────────────────────────────────────
   The current hero reads competent but slightly discount-store, primarily
   because of (a) the warning-yellow launch banner clashing with the teal
   brand palette, and (b) the generic icon-pill trust strip that's
   indistinguishable from every other supplement landing page.

   This pass:
     1. Reskins the LAUNCH SPECIAL callout — drops the warning-yellow for
        a sophisticated teal-on-white pill with a subtle gold accent edge,
        keeps the urgency without screaming "clearance bin"
     2. Reworks the bottom trust strip into an editorial "stats row" with
        large numerals, small subtitles, and slim vertical dividers — feels
        like a research lab fact sheet, not a coupon pamphlet
     3. Tightens the hero-title letter-spacing for premium typographic
        confidence (think Apple/Hermès, not eBay)
     4. Adds a faint champagne/gold underline accent under "Modern Research"
        to add a single thread of luxury without overwhelming
     5. Polishes the perks row — removes the FontAwesome checkmark
        circles (cheap-feeling), uses thin teal dots instead

   PC remains untouched aesthetically below ~1024px; this is a refinement
   of the existing light-theme hero, not a redesign.
   ════════════════════════════════════════════════════════════════════════ */

/* ─── R151-1: Premium launch-special callout ────────────────────────── */
html body .hero-discount-callout {
    /* Drop the warning-yellow palette entirely. R151-rev: also dropped the
       champagne/gold left-edge accent — owner felt it read as gold-yellow
       rather than premium. Now a clean teal-tinted pill with brand-aligned
       border on all sides. */
    background: linear-gradient(135deg,
        rgba(20, 184, 166, 0.07) 0%,
        rgba(20, 184, 166, 0.03) 100%) !important;
    border: 1px solid rgba(20, 184, 166, 0.25) !important;
    border-radius: 8px !important;
    padding: 11px 18px !important;
    color: #0a1628 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.84rem !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
    clip-path: none !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset,
                0 2px 12px rgba(15, 23, 42, 0.04) !important;
}
html body .hero-discount-callout i {
    color: var(--accent) !important;
    font-size: 0.92rem !important;
    /* Calm the over-aggressive bolt pulse */
    animation: hdcBoltCalm 3.5s ease-in-out infinite !important;
}
html body .hero-discount-callout strong {
    color: var(--accent) !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
}
@keyframes hdcBoltCalm {
    0%, 60%, 100% { opacity: 0.92; transform: scale(1); }
    70% { opacity: 1; transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
    html body .hero-discount-callout i { animation: none !important; }
}

/* ─── R151-2: Editorial-style trust stats row ──────────────────────── */
html body .hero-trust {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 28px 0 8px !important;
    margin-top: 12px !important;
    gap: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    border-top: 1px solid rgba(15, 23, 42, 0.08) !important;
    position: relative !important;
}
/* R151-rev: gold thread removed — using teal accent instead, consistent
   with the brand palette and the rest of the hero. */
html body .hero-trust::before {
    content: '' !important;
    position: absolute !important;
    top: -1px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 80px !important;
    height: 1px !important;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(20, 184, 166, 0.5) 50%,
        transparent 100%) !important;
}
html body .hero-trust .trust-item {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 6px 28px !important;
    position: relative !important;
    color: var(--text) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: none !important;
    clip-path: none !important;
}
/* Slim vertical dividers between trust items — editorial fact-sheet vibe */
html body .hero-trust .trust-item + .trust-item::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 1px !important;
    height: 22px !important;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(15, 23, 42, 0.16) 50%,
        transparent 100%) !important;
}
html body .hero-trust .trust-item i {
    color: var(--accent) !important;
    font-size: 0.95rem !important;
    opacity: 0.9 !important;
}
@media (max-width: 760px) {
    html body .hero-trust {
        gap: 4px 0 !important;
        padding: 22px 0 4px !important;
    }
    html body .hero-trust .trust-item {
        padding: 4px 16px !important;
        font-size: 0.76rem !important;
    }
}
@media (max-width: 480px) {
    html body .hero-trust .trust-item + .trust-item::before {
        display: none !important;  /* let pills wrap cleanly without divider clipping */
    }
}

/* ─── R151-3: Hero title — typographic refinement ──────────────────── */




/* ─── R151-4: Subtle underline accent on "Modern Research" ──────────
   R151-rev: switched from champagne/gold to brand teal — owner felt the
   gold read as off-palette. Now uses the same teal that runs through the
   rest of the site, so the accent stays consistent with brand identity. */

@keyframes heroAccentReveal {
    0% { transform: scaleX(0); opacity: 0; }
    100% { transform: scaleX(1); opacity: 1; }
}


/* ─── R151-5: REVERTED per owner request ─────────────────────────────
   Originally swapped the FontAwesome perk icons for small teal dots —
   owner preferred the original look with check / truck / tag icons.
   This rule block intentionally left blank; the perks bar now inherits
   its original base styles unchanged. */

/* ─── Payment security note — soft indigo so it doesn't clash with CTA ─
   Was: green gradient (clashed with teal Pay Securely button below).
   Then: neutral gray (worked but felt flat).
   Now: soft indigo/periwinkle — different hue family from teal so the two
   blocks read as distinct, but still cool/trust-signaling. Shield icon
   gets the deeper indigo for the trust pop. */
html body .payment-security-note {
    background: linear-gradient(180deg, #eef2ff 0%, #e0e7ff 100%) !important;
    border: 1px solid rgba(99, 102, 241, 0.22) !important;
    color: #3730a3 !important;
    font-size: 0.82rem !important;
    padding: 11px 14px !important;
}
html body .payment-security-note i {
    color: #6366f1 !important;  /* indigo shield — trust signal, different hue than teal CTA */
    font-size: 0.95rem !important;
}
html body .payment-security-note strong {
    color: #312e81 !important;  /* deeper indigo for emphasis */
}

/* Amount pill — high-contrast white-on-dark, lifted with subtle shadow */
html body .pp-method-pay-btn strong#paypal-amount,
html body .pp-method-pay-btn strong#venmo-amount {
    background: #ffffff !important;
    color: #0a1628 !important;
    padding: 5px 13px !important;
    border-radius: 999px !important;
    font-size: 1.02rem !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.20),
                0 1px 0 rgba(255, 255, 255, 0.8) inset !important;
    margin-left: 0 !important;
    white-space: nowrap !important;
}
html body .pp-method-pay-btn strong { margin-left: 0 !important; }

/* Sliding chevron via ::after — signals external nav, animates on hover */
html body .pp-method-pay-btn::after {
    content: '→' !important;
    font-size: 1.1rem !important;
    line-height: 1 !important;
    opacity: 0.7 !important;
    margin-left: 2px !important;
    transition: transform 0.22s ease, opacity 0.2s ease !important;
    font-weight: 400 !important;
}
html body .pp-method-pay-btn:hover::after {
    transform: translateX(4px) !important;
    opacity: 1 !important;
}
/* When the button enters its loading state (after click), hide the
   chevron so the existing spinner (handled via ::before in the
   pre-existing .is-loading::before rule) reads cleanly without
   the arrow competing for attention. */
html body .pp-method-pay-btn.is-loading::after {
    display: none !important;
}

/* Refined brand gradients — added a third color stop for richer depth */
html body .pp-method-paypal {
    background: linear-gradient(135deg, #002a78 0%, #003087 35%, #0070ba 75%, #009cde 100%) !important;
}
html body .pp-method-venmo {
    background: linear-gradient(135deg, #3D95CE 0%, #008CFF 60%, #0075d4 100%) !important;
}

/* ─── 2. Crypto "Pay Now" — bigger, bolder, more eye-catching ──────── */
html body #pay-now-btn {
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    padding: 18px 24px !important;
    letter-spacing: 0.04em !important;
    text-transform: none !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
    background-image: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.35),
                0 1px 0 rgba(255, 255, 255, 0.12) inset !important;
    position: relative !important;
    overflow: hidden !important;
}
html body #pay-now-btn:hover:not(:disabled) {
    transform: translateY(-1px) !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.45),
                0 1px 0 rgba(255, 255, 255, 0.15) inset !important;
}
/* Brand-teal Bitcoin icon to give the button a pop of accent color */
html body #pay-now-btn > i {
    color: #f7931a !important;  /* Bitcoin orange */
    font-size: 1.25rem !important;
    margin-right: 4px !important;
}
/* Subtle shimmer sweep — same effect as Card "Pay Securely" button.
   Visually signals "this is THE checkout action." */
html body #pay-now-btn::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 60% !important;
    height: 100% !important;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.12) 50%,
        transparent 100%) !important;
    animation: pay-now-shimmer 3.8s ease-in-out infinite !important;
    pointer-events: none !important;
}
@keyframes pay-now-shimmer {
    0% { left: -100%; }
    40%, 100% { left: 200%; }
}
@media (prefers-reduced-motion: reduce) {
    html body #pay-now-btn::before {
        animation: none !important;
        display: none !important;
    }
}

/* ============================================================
   R152 — HOMEPAGE PREMIUM PASS v1
   ============================================================
   Scope: index.html hero + above-fold premium signals
   Touches:
     1. .announce-bar           — sticky promo strip at very top
     2. .hero-rating            — star-rating chip under H1
     3. .hero-subheadline       — bridges H1 → bullet description
     4. .hero-cta-line          — replaces deleted .hero-cta-perks
     5. .hero-cta-coa           — outline CTA gets an icon
     6. .hero-cta-arrow         — translate-X on primary CTA hover
     7. .hero-bg                — gradient mesh + film grain depth
   All changes are additive or replace previously deleted nodes —
   no existing selectors regressed. Mobile-safe via @media at end.
   ============================================================ */

/* R152-1: announcement bar ------------------------------------ */
html body .announce-bar {
    position: relative !important;
    z-index: 1000 !important;
    background: linear-gradient(90deg,
        #0f766e 0%,
        #14b8a6 50%,
        #0f766e 100%) !important;
    color: #ffffff !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.18) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 13.5px !important;
    line-height: 1.4 !important;
    letter-spacing: 0.01em !important;
}




@keyframes announce-bolt-pulse {
    0%, 100% { transform: scale(1);   opacity: 1;   }
    50%      { transform: scale(1.18); opacity: 0.7; }
}



@media (max-width: 640px) {
    html body .announce-bar { font-size: 12px !important; }
    
    
    
}


/* R152-2: hero rating chip ------------------------------------ */
html body .hero-rating {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 14px 0 18px 0 !important;
    padding: 7px 14px 7px 10px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(20, 184, 166, 0.22) !important;
    border-radius: 999px !important;
    color: #e5e7eb !important;
    text-decoration: none !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 14px !important;
    line-height: 1 !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease !important;
    width: fit-content !important;
}
html body .hero-rating:hover {
    border-color: rgba(20, 184, 166, 0.55) !important;
    background: rgba(20, 184, 166, 0.08) !important;
    transform: translateY(-1px) !important;
}
html body .hero-rating-stars {
    display: inline-flex !important;
    gap: 2px !important;
    color: #fbbf24 !important;
    font-size: 12px !important;
}
html body .hero-rating-text {
    color: #e5e7eb !important;
}
html body .hero-rating-text strong {
    color: #ffffff !important;
    font-weight: 700 !important;
    margin-right: 2px !important;
}
html body .hero-rating-arrow {
    font-size: 10px !important;
    color: rgba(20, 184, 166, 0.85) !important;
    transform: translateX(0) !important;
    transition: transform 0.25s ease !important;
}
html body .hero-rating:hover .hero-rating-arrow {
    transform: translateX(3px) !important;
}
@media (max-width: 640px) {
    html body .hero-rating { font-size: 13px !important; padding: 6px 12px 6px 9px !important; margin: 10px 0 14px 0 !important; }
    html body .hero-rating-stars { font-size: 11px !important; }
}

/* R152-3: hero sub-headline ----------------------------------- */
html body .hero-subheadline {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 18px !important;
    line-height: 1.55 !important;
    color: rgba(229, 231, 235, 0.82) !important;
    max-width: 560px !important;
    margin: 0 0 16px 0 !important;
    font-weight: 400 !important;
    letter-spacing: -0.005em !important;
}
@media (max-width: 768px) {
    html body .hero-subheadline { font-size: 16px !important; line-height: 1.5 !important; max-width: 100% !important; margin-bottom: 14px !important; }
}
@media (max-width: 480px) {
    html body .hero-subheadline { font-size: 15px !important; }
}

/* R152-4: editorial line under CTAs (replaces deleted perks) -- */



/* R152-5: outline CTA gets an icon, primary CTA arrow micro-anim */



/* Primary CTA arrow slides on hover */
html body .hero-cta-shop .hero-cta-arrow {
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
html body .hero-cta-shop:hover .hero-cta-arrow {
    transform: translateX(4px) !important;
}
@media (prefers-reduced-motion: reduce) {
    html body .hero-cta-shop:hover .hero-cta-arrow,
    html body .hero-cta-coa:hover .hero-cta-coa-icon,
    html body .hero-rating:hover .hero-rating-arrow,
    html body .hero-rating:hover { transform: none !important; }
}

/* R152-6: hero background depth — gradient mesh + film grain --- */
/* Targeted at .hero::before / .hero::after (parent section) because
   .hero-bg already uses ::before and ::after for the existing
   animated radial float-glow layers — we don't want to clobber
   those. .hero itself has position:relative + overflow:hidden +
   no existing pseudos, so it's a clean canvas.
   z-index 1 puts the mesh between .hero-bg (z=0) and .hero-content
   (z=2), so vials/CTAs/text always sit above it. */
html body .hero::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background:
        radial-gradient(ellipse 60% 50% at 30% 35%, rgba(20, 184, 166, 0.18) 0%, rgba(20, 184, 166, 0) 60%),
        radial-gradient(ellipse 50% 60% at 75% 65%, rgba(13, 148, 136, 0.14) 0%, rgba(13, 148, 136, 0) 55%),
        radial-gradient(ellipse 80% 60% at 50% 110%, rgba(15, 23, 42, 0.55) 0%, rgba(15, 23, 42, 0) 70%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
    mix-blend-mode: screen !important;
}
html body .hero::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.06 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>") !important;
    background-size: 200px 200px !important;
    opacity: 0.55 !important;
    pointer-events: none !important;
    z-index: 1 !important;
    mix-blend-mode: overlay !important;
}
@media (max-width: 768px) {
    /* Soften the radial glows on mobile so they don't fight with
       the smaller hero stack. Grain stays the same. */
    html body .hero::before {
        background:
            radial-gradient(ellipse 80% 50% at 50% 25%, rgba(20, 184, 166, 0.14) 0%, rgba(20, 184, 166, 0) 65%),
            radial-gradient(ellipse 80% 60% at 50% 100%, rgba(15, 23, 42, 0.45) 0%, rgba(15, 23, 42, 0) 70%) !important;
    }
}
/* ============================================================
   END R152
   ============================================================ */


/* ============================================================
   R153 — CLINICAL APOTHECARY HERO REMODEL
   ============================================================
   Direction B (approved). Mini-remodel of homepage hero only.
   Light cream theme. Asymmetric two-column split with editorial
   typography + photographic vial treatment + choreographed
   load sequence.

   Scope:
     PHASE A — structure + typography (no motion, no photography)
     PHASE B — photography treatment (shadows, scale, position)
     PHASE C — motion + micro-interactions (entrance, idle, hover)

   Constraints:
     - Light-theme color tokens (R152 used dark — corrected here)
     - Wins over .hero rules at lines 1006, 10617, 18931 via
       `html body` prefix + !important specificity ladder
     - Preserves R151 hero-title typography (letter-spacing,
       teal underline accent on hero-title-accent)
     - Mobile-safe via cascading breakpoints at end
     - All motion gated by prefers-reduced-motion

   Structure expected (index.html):
     section.hero
       └ div.hero-bg (existing — overlay killed below)
       └ div.hero-content.hero-split
           └ div.hero-text
               └ div.hero-eyebrow         (R153 NEW)
               └ h1.hero-title             (R151)
               └ p.hero-subheadline        (R152, color-corrected)
               └ a.hero-rating             (R152, color-corrected)
               └ p.hero-description        (R151)
               └ div.hero-discount-callout (existing)
               └ div.hero-cta              (existing)
               └ p.hero-cta-line           (R152, color-corrected)
           └ div.hero-visual
               └ vials + 2 floating callouts
   div.hero-trust-rule (R153 — relocated below hero)
   ============================================================ */


/* ──────────────── PHASE A — STRUCTURE + TYPOGRAPHY ──────────────── */

/* R153-A1: kill the sci-fi residue in the hero
   - Hex grid overlay → invisible on cream anyway, but neutralize
     for cleanliness so devtools doesn't show dead computed style
   - hero-visual::after ring → editorial composition doesn't want
     a sci-fi 380px circle outlining the vial cluster
   - R152 hero::before mesh / ::after grain → both used screen/
     overlay blends designed for dark surfaces; they add noise
     on cream. Neutralize. */
html body .hero .hero-bg .cy-hex-overlay {
    display: none !important;
}
/* R153-rev21: KILL the legacy .hero-bg child div entirely.
   It's been painting its OWN teal radial gradients (lines 10622-10630)
   on top of my hero background — that was the actual source of the
   "right-side leakage" all along, not my gradient. */
html body .hero .hero-bg {
    display: none !important;
}
html body .hero .hero-visual::after {
    display: none !important;
}
html body .hero::before,
html body .hero::after {
    /* Override R152 mesh/grain — replaced by Phase B visual-column
       gradient. Keep the pseudos available for future use but make
       them invisible. */
    display: none !important;
}
/* R153-A2: hero shell — generous breathing, light theme honored.
   R153-rev7: padding-bottom 72→40, min-height 820→680.
   R153-rev12: single soft ellipse radial behind the vial cluster,
   on the hero (not the visual column). Fades naturally in all
   directions — no rectangle, no hard edge. Visual column is now
   fully transparent (B1 below). */
html body .hero {
    padding: 56px 24px 40px !important;
    min-height: 680px !important;
    /* R153-rev25: REMOVED the hero radial-gradient entirely.
       Every position / size combination created a visible
       rectangular hue boundary somewhere — either bleeding to
       the right edge, leaking into the text column, or creating
       an "outline" of where the teal area ended.
       Solution: rely solely on .hero-visual::before (a 480×480
       circle inside the visual column, blurred 8px) — a circle
       *cannot* create a rectangular outline by definition, and
       it's anchored inside the visual column so it follows the
       vial cluster on any viewport. Halo is enlarged + shifted
       right in B1 below. */
    background: #fafafa !important;
    overflow: hidden !important;
    position: relative !important;
}

/* R153-A3: asymmetric split — 55% text / 45% photo on desktop
   `align-items: center` keeps both columns vertically centered
   so the composition reads as a balanced spread. */
html body .hero .hero-content.hero-split {
    display: grid !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) !important;
    gap: 80px !important;
    max-width: 1240px !important;
    margin: 0 auto !important;
    align-items: center !important;
    width: 100% !important;
    text-align: left !important;
}

/* R153-A4: text column — wide enough for H1 to stay on 2 lines
   (one per phrase), tight enough for body measure to stay
   editorial. R153-rev2: bumped from 540 → 620 so "Premium
   Peptides" + "Modern Research" each fit on one line. Inner
   body measure for description/subhead still gets capped on
   their own rules below. */
html body .hero .hero-text {
    max-width: 620px !important;
    display: flex !important;
    flex-direction: column !important;
}

/* R153-A5: EYEBROW — monospace label above H1 (Hims pattern) */
html body .hero .hero-eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 22px !important;
    font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: #4a4a52 !important;
    line-height: 1 !important;
    width: fit-content !important;
}
html body .hero .hero-eyebrow-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #0d9488 !important;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.16) !important;
    flex-shrink: 0 !important;
}
html body .hero .hero-eyebrow-text {
    display: inline-block !important;
}

/* R153-A6: H1 — preserve R151 work, light-theme color tokens.
   R153-rev2: white-space: nowrap forces each phrase on a single
   line. Font sizes tuned to fit cleanly in the 620px text col.
   R153-rev26: gap to next element 18→24 to help text col match
   visual col vertical height. */
html body .hero .hero-title {
    margin: 0 0 24px 0 !important;
    line-height: 1.0 !important;
}
html body .hero .hero-title .hero-title-line {
    display: block !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: clamp(36px, 4.4vw, 58px) !important;
    font-weight: 700 !important;
    line-height: 1.0 !important;
    letter-spacing: -0.025em !important;
    color: #0a0a0a !important;
    margin-bottom: 2px !important;
    white-space: nowrap !important;
    /* Kill any inherited text-shadow / background-clip from R151
       or the dark-theme rule at line 10688 */
    background: none !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: #0a0a0a !important;
    background-clip: initial !important;
    text-shadow: none !important;
    filter: none !important;
}
html body .hero .hero-title .hero-title-line .hero-highlight {
    color: #0a0a0a !important;
    text-shadow: none !important;
    font-weight: 700 !important;
    background: none !important;
    -webkit-text-fill-color: #0a0a0a !important;
}
html body .hero .hero-title .hero-title-accent {
    display: inline-block !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: clamp(44px, 5.4vw, 72px) !important;
    font-weight: 800 !important;
    line-height: 1.0 !important;
    letter-spacing: -0.02em !important;
    color: #0d9488 !important;
    white-space: nowrap !important;
    /* Kill the gradient text-fill from line 10696 */
    background: none !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: #0d9488 !important;
    background-clip: initial !important;
    filter: none !important;
    position: relative !important;
}
/* R151 teal underline accent preserved — extended + softened */
html body .hero .hero-title .hero-title-accent::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -6px !important;
    height: 2px !important;
    background: linear-gradient(90deg,
        rgba(13, 148, 136, 0) 0%,
        rgba(13, 148, 136, 0.35) 30%,
        rgba(13, 148, 136, 0.35) 70%,
        rgba(13, 148, 136, 0) 100%) !important;
    border-radius: 1px !important;
}

/* R153-A7: SUB-HEADLINE — dek between H1 and supporting copy.
   R153-rev2: tighter vertical rhythm (24/22 → 18/16).
   R153-rev26: spacing 18/16 → 24/22.
   R153-rev37: TYPOGRAPHIC REFRAME — copy is now brand-voice
   ("Built by researchers who refused to pay $400 a vial.")
   not feature description. Restyled as an editorial epigraph
   instead of a second headline:
     - italic (whispered voice, not declarative claim)
     - 17px (down from 19) — supportive scale
     - weight 400 (down from 500) — recedes vs. H1
     - color #4a4a52 (down from #1a1a1a) — tonal not dominant
     - subtle teal "·" accent before the line as a small visual
       hook that ties it to the brand color
   Net effect: H1 dominates, this line *colors* the moment,
   bullets do the factual work. Three distinct voices instead of
   two competing claims. */
html body .hero .hero-subheadline {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 17px !important;
    font-weight: 400 !important;
    font-style: italic !important;
    line-height: 1.45 !important;
    letter-spacing: 0 !important;
    color: #4a4a52 !important;
    margin: 22px 0 22px 0 !important;
    max-width: 480px !important;
    /* Left edge teal hairline as quiet brand anchor */
    padding-left: 14px !important;
    border-left: 2px solid rgba(13, 148, 136, 0.35) !important;
}

/* R153-A8: RATING CHIP — light-theme corrected from R152
   White on cream was the bug. Dark text wins. */
html body .hero .hero-rating {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 0 24px 0 !important;
    padding: 8px 14px 8px 12px !important;
    background: #ffffff !important;
    border: 1px solid rgba(13, 148, 136, 0.22) !important;
    border-radius: 999px !important;
    color: #0a0a0a !important;
    text-decoration: none !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 14px !important;
    line-height: 1 !important;
    box-shadow: 0 2px 6px rgba(10, 10, 10, 0.04),
                0 1px 0 rgba(255, 255, 255, 0.6) inset !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease !important;
    width: fit-content !important;
}
html body .hero .hero-rating:hover {
    border-color: rgba(13, 148, 136, 0.55) !important;
    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.10),
                0 1px 0 rgba(255, 255, 255, 0.6) inset !important;
    transform: translateY(-1px) !important;
}
html body .hero .hero-rating-stars {
    display: inline-flex !important;
    gap: 2px !important;
    color: #fbbf24 !important;
    font-size: 12px !important;
}
html body .hero .hero-rating-text {
    color: #0a0a0a !important;
    font-weight: 500 !important;
}
html body .hero .hero-rating-text strong {
    color: #0a0a0a !important;
    font-weight: 700 !important;
    margin-right: 3px !important;
}
html body .hero .hero-rating-arrow {
    font-size: 10px !important;
    color: #0d9488 !important;
    transition: transform 0.25s ease !important;
}
html body .hero .hero-rating:hover .hero-rating-arrow {
    transform: translateX(4px) !important;
}

/* R153-A9: bullet description — keep tight + tonal */
html body .hero .hero-description {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    color: #4a4a52 !important;
    margin: 0 0 24px 0 !important;
    max-width: 520px !important;
    letter-spacing: 0 !important;
}
html body .hero .hero-description .hd-sep {
    color: rgba(13, 148, 136, 0.5) !important;
    margin: 0 6px !important;
    font-weight: 600 !important;
}
html body .hero .hero-description .hd-item {
    color: #4a4a52 !important;
}

/* R153-A10: LAUNCH CALLOUT — light surface, refined */
html body .hero .hero-discount-callout {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 0 28px 0 !important;
    padding: 10px 16px !important;
    background: #ffffff !important;
    border: 1px solid rgba(13, 148, 136, 0.25) !important;
    border-left: 3px solid #0d9488 !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 8px rgba(10, 10, 10, 0.04) !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    letter-spacing: 0.01em !important;
    color: #0a0a0a !important;
    clip-path: none !important;
    width: fit-content !important;
}
html body .hero .hero-discount-callout strong {
    color: #0d9488 !important;
    font-weight: 700 !important;
}
html body .hero .hero-discount-callout .hdc-bolt-pulse {
    color: #0d9488 !important;
    font-size: 13px !important;
}

/* R153-A11: CTA row — Browse Catalog primary + View COAs outline.
   Both stay as buttons per owner's call. Polish only. */
html body .hero .hero-cta {
    display: flex !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
    margin: 0 0 24px 0 !important;
}
html body .hero .hero-cta .btn-primary.hero-cta-shop {
    background: linear-gradient(180deg, #14b8a6 0%, #0d9488 100%) !important;
    color: #ffffff !important;
    border: 1px solid #0d9488 !important;
    border-radius: 10px !important;
    padding: 14px 26px !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
    box-shadow: 0 4px 14px rgba(13, 148, 136, 0.28),
                0 1px 0 rgba(255, 255, 255, 0.2) inset !important;
    clip-path: none !important;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.25s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    position: relative !important;
    overflow: hidden !important;
}
html body .hero .hero-cta .btn-primary.hero-cta-shop:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 22px rgba(13, 148, 136, 0.38),
                0 1px 0 rgba(255, 255, 255, 0.25) inset !important;
}
html body .hero .hero-cta .btn-primary.hero-cta-shop .hero-cta-icon {
    font-size: 14px !important;
    opacity: 0.95 !important;
}
html body .hero .hero-cta .btn-primary.hero-cta-shop .hero-cta-arrow {
    font-size: 12px !important;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
html body .hero .hero-cta .btn-primary.hero-cta-shop:hover .hero-cta-arrow {
    transform: translateX(5px) !important;
}
html body .hero .hero-cta .btn-outline.hero-cta-coa {
    background: #ffffff !important;
    color: #0a0a0a !important;
    border: 1px solid rgba(10, 10, 10, 0.16) !important;
    border-radius: 10px !important;
    padding: 14px 22px !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
    box-shadow: 0 2px 6px rgba(10, 10, 10, 0.04) !important;
    clip-path: none !important;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
}
html body .hero .hero-cta .btn-outline.hero-cta-coa:hover {
    transform: translateY(-2px) !important;
    border-color: #0d9488 !important;
    color: #0d9488 !important;
    box-shadow: 0 6px 18px rgba(13, 148, 136, 0.14) !important;
}
html body .hero .hero-cta .btn-outline.hero-cta-coa .hero-cta-coa-icon {
    font-size: 14px !important;
    color: #0d9488 !important;
    transition: transform 0.25s ease !important;
}
html body .hero .hero-cta .btn-outline.hero-cta-coa:hover .hero-cta-coa-icon {
    transform: scale(1.08) !important;
}

/* R153-A12: editorial line under CTAs — color-corrected from R152 */
html body .hero .hero-cta-line {
    margin: 0 !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    font-style: italic !important;
    line-height: 1.5 !important;
    letter-spacing: 0 !important;
    color: #6b6b73 !important;
}

/* R153-A13: relocated trust strip — thin editorial rule below hero.
   R153-rev8: tiny bottom margin pushes spectrum-divider just below
   viewport fold.
   R153-rev19: small top margin breathes from hero.
   R153-rev23: background matched to hero (#fafafa).
   R153-rev25: killed both borders to remove "rectangular outline"
   framing the hue area.
   R153-rev29: restored top border only — the editorial separator
   between hero and trust strip. Bottom stays open so there's no
   bottom-line framing rectangle below the strip. */

html body .hero-trust-rule .hero-trust.hero-trust-relocated {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    max-width: 1240px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html body .hero-trust-rule .trust-item {
    flex: 1 1 0 !important;
    text-align: center !important;
    color: #4a4a52 !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    padding: 4px 16px !important;
    border-right: 1px solid rgba(10, 10, 10, 0.08) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 28px !important;
}
html body .hero-trust-rule .trust-item:last-child {
    border-right: none !important;
}
html body .hero-trust-rule .trust-item i {
    color: #0d9488 !important;
    font-size: 13px !important;
}


/* ──────────────── PHASE B — PHOTOGRAPHY TREATMENT ──────────────── */

/* R153-B1: visual column — transparent. The teal halo behind the
   vials now lives on the hero itself (rev12) as a single soft
   ellipse radial — no rectangular bound, no hard edge. */
html body .hero .hero-visual {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 620px !important;
    flex: none !important;
    aspect-ratio: auto !important;
    background: transparent !important;
    border-radius: 0 !important;
    overflow: visible !important;
    isolation: isolate !important;
}
/* Kill the sci-fi glow + ring pseudos from line 10798/10812 */
html body .hero .hero-visual::before {
    /* Repurpose existing ::before into a soft circular teal halo.
       R153-rev25: enlarged 480→560px + repositioned to left:62%
       (was 50%) so the halo center lands on the cluster mean
       inside the visual column (MOTS-c + BPC on the right pull
       the visual weight rightward). Heavier blur (8→14px) so
       there's no perceivable edge. Circular shape = no rectangle
       artifact possible. */
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 62% !important;
    transform: translate(-50%, -50%) !important;
    width: 560px !important;
    height: 560px !important;
    background: radial-gradient(circle, rgba(20, 184, 166, 0.14) 0%, rgba(20, 184, 166, 0.06) 35%, rgba(20, 184, 166, 0.02) 65%, transparent 85%) !important;
    border-radius: 50% !important;
    pointer-events: none !important;
    filter: blur(14px) !important;
    z-index: 0 !important;
    animation: none !important;
}

/* R153-B2: MAIN VIAL (GLP3-R) — scaled up, two-layer shadow */
html body .hero .hero-visual .hero-vial-main {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) translateX(20px) !important;
    height: 560px !important;
    width: auto !important;
    z-index: 3 !important;
    /* Two-layer shadow: tight near + deep falloff = softbox at 45° */
    filter:
        drop-shadow(0 4px 8px rgba(10, 10, 10, 0.12))
        drop-shadow(0 24px 40px rgba(10, 10, 10, 0.18))
        contrast(1.04)
        saturate(1.05) !important;
}

/* R153-B3: MOTS-c (top vial) — smaller, rotated 2° for asymmetry */
html body .hero .hero-visual .hero-vial-secondary.hero-vial-top {
    position: absolute !important;
    top: 4% !important;
    right: 4% !important;
    left: auto !important;
    height: 240px !important;
    width: auto !important;
    transform: rotate(2deg) !important;
    z-index: 2 !important;
    filter:
        drop-shadow(0 3px 6px rgba(10, 10, 10, 0.10))
        drop-shadow(0 16px 28px rgba(10, 10, 10, 0.14))
        contrast(1.04)
        saturate(1.05) !important;
    opacity: 0.96 !important;
}

/* R153-B4: BPC-157 (bottom-right vial) — rotated -1.5° */
html body .hero .hero-visual .hero-vial-secondary.hero-vial-right {
    position: absolute !important;
    bottom: 6% !important;
    right: 2% !important;
    top: auto !important;
    left: auto !important;
    height: 280px !important;
    width: auto !important;
    transform: rotate(-1.5deg) !important;
    z-index: 2 !important;
    filter:
        drop-shadow(0 3px 7px rgba(10, 10, 10, 0.11))
        drop-shadow(0 18px 30px rgba(10, 10, 10, 0.15))
        contrast(1.04)
        saturate(1.05) !important;
    opacity: 0.97 !important;
}

/* R153-B5: FLOATING CALLOUTS — refined pill cards in a vertical
   triangle composition on the LEFT of the main vial.
   R153-rev5: 3 callouts (restored 99%+ HPLC), uniform width via
   min-width, slight horizontal offsets on top/bottom for
   intentional asymmetry. */
html body .hero .hero-visual .hero-float-callout {
    position: absolute !important;
    z-index: 4 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    padding: 9px 16px 9px 11px !important;
    background: #ffffff !important;
    border: 1px solid rgba(10, 10, 10, 0.06) !important;
    border-radius: 999px !important;
    min-width: 156px !important;
    box-shadow:
        0 4px 12px rgba(10, 10, 10, 0.06),
        0 14px 32px rgba(10, 10, 10, 0.10) !important;
    font-family: 'Inter', system-ui, sans-serif !important;
}
html body .hero .hero-visual .hero-float-callout .hfc-icon {
    width: 30px !important;
    height: 30px !important;
    background: rgba(13, 148, 136, 0.10) !important;
    color: #0d9488 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    flex-shrink: 0 !important;
}
html body .hero .hero-visual .hero-float-callout .hfc-text {
    display: flex !important;
    flex-direction: column !important;
    line-height: 1.15 !important;
}
html body .hero .hero-visual .hero-float-callout .hfc-text strong {
    color: #0a0a0a !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: -0.005em !important;
}
html body .hero .hero-visual .hero-float-callout .hfc-text span {
    color: #6b6b73 !important;
    font-weight: 500 !important;
    font-size: 10px !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    margin-top: 2px !important;
}
/* R153-rev7: triangular composition (Amino-era layout the owner
   approved earlier). Callouts anchor to corners of the vial
   cluster, not a uniform vertical stack. Creates dynamic
   asymmetry instead of mechanical alignment.
     - hfc-tl: top-left, anchored above main vial's upper-left
     - hfc-bl: mid-left, anchored to main vial's mid-left edge
     - hfc-br: bottom-right, tucked between main vial + BPC */
html body .hero .hero-visual .hero-float-callout.hfc-tl {
    top: 5% !important;
    left: -2% !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
}
html body .hero .hero-visual .hero-float-callout.hfc-bl {
    top: 45% !important;
    left: -4% !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
}
html body .hero .hero-visual .hero-float-callout.hfc-br {
    /* R153-rev8: pushed down + slightly right so the card lands
       in the lower zone where vial labels aren't.
       R153-rev10: nudged left a touch (8% → 14%) per owner.
       R153-rev15: another small nudge — left (14% → 18%) +
       down (80% → 82%).
       R153-rev17: ~5px more left (18% → 19%).
       R153-rev19: another tiny nudge — left +2px (19→19.4%)
       + down +20px (82→85.2%).
       R153-rev20: +7px more down (85.2→86.3%).
       R153-rev27: +3px more down (86.3→86.8%).
       R153-rev31: +4px more down (86.8→87.4%).
       R153-rev33: +20px left (19.4→23.1%).
       R153-rev38: +4px more down (87.4→88%). */
    top: 88% !important;
    right: 23.1% !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
}

/* R153-rev7: hover lift — premium feedback on cursor over */
html body .hero .hero-visual .hero-float-callout {
    transition:
        transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.28s ease,
        border-color 0.28s ease !important;
    cursor: default !important;
}
html body .hero .hero-visual .hero-float-callout:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(13, 148, 136, 0.22) !important;
    box-shadow:
        0 6px 16px rgba(10, 10, 10, 0.08),
        0 18px 40px rgba(13, 148, 136, 0.12) !important;
}
html body .hero .hero-visual .hero-float-callout:hover .hfc-icon {
    background: rgba(13, 148, 136, 0.16) !important;
    transition: background 0.28s ease !important;
}


/* ──────────────── PHASE C — MOTION + MICRO-INTERACTIONS ──────────────── */

/* R153-C1: entrance choreography
   Each element starts hidden (opacity 0, translateY 8px),
   animates in via class-less timing using stagger delays.
   Total sequence: ~1.4s */
@keyframes r153-fadeUp {
    0%   { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: translateY(0); }
}
/* R153-rev6: callout-specific entrance that respects the
   translateY(-50%) used for vertical centering on the anchor row. */

@keyframes r153-fadeUpVisual {
    0%   { opacity: 0; transform: translate(-50%, -50%) translateX(20px) scale(0.96); }
    100% { opacity: 1; transform: translate(-50%, -50%) translateX(20px) scale(1); }
}
@keyframes r153-fadeInOnly {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes r153-fadeFromTop {
    0%   { opacity: 0; transform: rotate(2deg) translateY(-12px); }
    100% { opacity: 0.96; transform: rotate(2deg) translateY(0); }
}
@keyframes r153-fadeFromBottom {
    0%   { opacity: 0; transform: rotate(-1.5deg) translateY(12px); }
    100% { opacity: 0.97; transform: rotate(-1.5deg) translateY(0); }
}
@keyframes r153-vialBreath {
    0%, 100% { transform: translate(-50%, -50%) translateX(20px) scale(1); }
    50%      { transform: translate(-50%, -50%) translateX(20px) scale(1.005); }
}
@keyframes r153-ctaShimmer {
    0%   { left: -100%; }
    50%, 100% { left: 200%; }
}

/* Apply entrance animations with staggered delays */
html body .hero .hero-eyebrow {
    opacity: 0;
    animation: r153-fadeUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.10s forwards !important;
}
html body .hero .hero-title .hero-title-line {
    opacity: 0;
    animation: r153-fadeUp 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.20s forwards !important;
}
html body .hero .hero-title .hero-title-accent {
    opacity: 0;
    animation: r153-fadeUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.40s forwards !important;
}
html body .hero .hero-subheadline {
    opacity: 0;
    animation: r153-fadeUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.60s forwards !important;
}
html body .hero .hero-rating {
    opacity: 0;
    animation: r153-fadeUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.75s forwards !important;
}
html body .hero .hero-description {
    opacity: 0;
    animation: r153-fadeUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.85s forwards !important;
}
html body .hero .hero-discount-callout {
    opacity: 0;
    animation: r153-fadeUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.95s forwards !important;
}
html body .hero .hero-cta {
    opacity: 0;
    animation: r153-fadeUp 0.45s cubic-bezier(0.16, 1, 0.3, 1) 1.00s forwards !important;
}
html body .hero .hero-cta-line {
    opacity: 0;
    animation: r153-fadeInOnly 0.3s ease-out 1.30s forwards !important;
}
/* Visual column — main vial + secondaries + cards */
html body .hero .hero-visual .hero-vial-main {
    opacity: 0;
    animation:
        r153-fadeUpVisual 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.55s forwards,
        r153-vialBreath 6s ease-in-out 1.5s infinite !important;
}
html body .hero .hero-visual .hero-vial-secondary.hero-vial-top {
    opacity: 0;
    animation: r153-fadeFromTop 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.75s forwards !important;
}
html body .hero .hero-visual .hero-vial-secondary.hero-vial-right {
    opacity: 0;
    animation: r153-fadeFromBottom 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.85s forwards !important;
}
/* Callout entrance cascade — top first, then middle, then bottom.
   R153-rev7: back to plain fadeUp now that no callout needs
   translateY centering (triangular composition uses corner anchors). */
html body .hero .hero-visual .hero-float-callout {
    opacity: 0;
    animation: r153-fadeUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) 1.10s forwards !important;
}
html body .hero .hero-visual .hero-float-callout.hfc-tl {
    animation-delay: 1.05s !important;
}
html body .hero .hero-visual .hero-float-callout.hfc-bl {
    animation-delay: 1.15s !important;
}
html body .hero .hero-visual .hero-float-callout.hfc-br {
    animation-delay: 1.25s !important;
}

/* R153-C2: primary CTA shimmer sweep on hover */
html body .hero .hero-cta .btn-primary.hero-cta-shop::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 50% !important;
    height: 100% !important;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.18) 50%,
        transparent 100%) !important;
    pointer-events: none !important;
    transition: none !important;
}
html body .hero .hero-cta .btn-primary.hero-cta-shop:hover::after {
    animation: r153-ctaShimmer 0.7s ease-out forwards !important;
}

/* R153-C3: reduced motion — collapse all entrance animation to
   a single 200ms fade, kill idle breath + shimmer, kill parallax */
@media (prefers-reduced-motion: reduce) {
    html body .hero .hero-eyebrow,
    html body .hero .hero-title .hero-title-line,
    html body .hero .hero-title .hero-title-accent,
    html body .hero .hero-subheadline,
    html body .hero .hero-rating,
    html body .hero .hero-description,
    html body .hero .hero-discount-callout,
    html body .hero .hero-cta,
    html body .hero .hero-cta-line,
    html body .hero .hero-visual .hero-vial-main,
    html body .hero .hero-visual .hero-vial-secondary,
    html body .hero .hero-visual .hero-float-callout {
        opacity: 1 !important;
        animation: r153-fadeInOnly 0.2s ease-out 0s forwards !important;
        transform: none !important;
    }
    html body .hero .hero-visual .hero-vial-main {
        transform: translate(-50%, -50%) translateX(20px) !important;
    }
    html body .hero .hero-visual .hero-vial-secondary.hero-vial-top {
        transform: rotate(2deg) !important;
    }
    html body .hero .hero-visual .hero-vial-secondary.hero-vial-right {
        transform: rotate(-1.5deg) !important;
    }
    /* R153-rev7: callouts use corner anchors now (no translateY
       centering), so they default to no transform — clean. */
    html body .hero .hero-cta .btn-primary.hero-cta-shop:hover::after {
        animation: none !important;
    }
}


/* ──────────────── MOBILE REFLOW ──────────────── */

/* R153-M1: tablet (≤1024px) — collapse to single column, shrink scale */
@media (max-width: 1024px) {
    html body .hero .hero-content.hero-split {
        grid-template-columns: 1fr !important;
        gap: 48px !important;
    }
    html body .hero .hero-text {
        max-width: 100% !important;
    }
    html body .hero .hero-visual {
        min-height: 520px !important;
    }
    html body .hero .hero-visual .hero-vial-main {
        height: 460px !important;
    }
    html body .hero .hero-visual .hero-vial-secondary.hero-vial-top {
        height: 200px !important;
        right: 8% !important;
    }
    html body .hero .hero-visual .hero-vial-secondary.hero-vial-right {
        height: 240px !important;
        right: 6% !important;
    }
}

/* R153-M2: mobile (≤768px) */
@media (max-width: 768px) {
    html body .hero {
        padding: 32px 20px 56px !important;
        min-height: auto !important;
    }
    html body .hero .hero-content.hero-split {
        gap: 36px !important;
        text-align: center !important;
    }
    html body .hero .hero-text {
        align-items: center !important;
    }
    html body .hero .hero-eyebrow {
        margin: 0 auto 16px auto !important;
        font-size: 10.5px !important;
        letter-spacing: 0.20em !important;
    }
    html body .hero .hero-title .hero-title-line {
        font-size: clamp(32px, 9vw, 44px) !important;
    }
    html body .hero .hero-title .hero-title-accent {
        font-size: clamp(38px, 11vw, 54px) !important;
    }
    html body .hero .hero-subheadline {
        font-size: 17px !important;
        margin: 18px auto 18px auto !important;
        max-width: 100% !important;
    }
    html body .hero .hero-rating {
        margin: 0 auto 20px auto !important;
    }
    html body .hero .hero-description {
        margin: 0 auto 18px auto !important;
        max-width: 100% !important;
    }
    html body .hero .hero-discount-callout {
        margin: 0 auto 22px auto !important;
    }
    html body .hero .hero-cta {
        justify-content: center !important;
        margin-bottom: 18px !important;
    }
    html body .hero .hero-cta-line {
        text-align: center !important;
    }
    html body .hero .hero-visual {
        min-height: 420px !important;
    }
    html body .hero .hero-visual .hero-vial-main {
        height: 360px !important;
        transform: translate(-50%, -50%) !important;
    }
    html body .hero .hero-visual .hero-vial-secondary.hero-vial-top {
        height: 160px !important;
        top: 2% !important;
        right: 6% !important;
    }
    html body .hero .hero-visual .hero-vial-secondary.hero-vial-right {
        height: 180px !important;
        bottom: 4% !important;
        right: 4% !important;
    }
    /* Adjust the breath keyframe origin for mobile (no translateX 20px) */
    html body .hero .hero-visual .hero-vial-main {
        animation:
            r153-fadeInOnly 0.4s ease-out 0.55s forwards !important;
    }
    /* Trust strip on mobile — stack to two columns */
    
    html body .hero-trust-rule .hero-trust.hero-trust-relocated {
        gap: 8px 0 !important;
    }
    html body .hero-trust-rule .trust-item {
        flex: 1 1 48% !important;
        font-size: 10.5px !important;
        letter-spacing: 0.10em !important;
        padding: 4px 8px !important;
        border-right: none !important;
    }
}

/* R153-M3: small mobile (≤480px) — hide floating callouts to declutter */
@media (max-width: 480px) {
    html body .hero .hero-visual .hero-float-callout {
        display: none !important;
    }
    html body .hero .hero-cta {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    html body .hero .hero-cta .btn-primary.hero-cta-shop,
    html body .hero .hero-cta .btn-outline.hero-cta-coa {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ============================================================
   END R153 (R152-R153 core; revs continue below as add-on layer)
   ============================================================ */


/* ============================================================
   R153-rev39 — 10-ITEM PREMIUM POLISH PASS
   ============================================================
   1.  Tight vial ground shadows (elliptical, grounded)
   2.  Vial hover tooltips + click-thru to product pages
   3.  Bullet description checkmarks (✓ in front of each bullet)
   4.  "View 12 COAs" specific number (done in HTML)
   5.  Pulsing green "live" dot before "200+ verified researchers"
   6.  Ambient teal particles drifting in hero
   7.  Same-Day Dispatch bolt pulse animation
   8.  H1 teal hairline page-load extend animation
   9.  Live data ticker under trust strip
   ============================================================ */


/* ─── 1. VIAL GROUND SHADOWS ─── */
/* Tight elliptical shadows directly under each vial base.
   Adds the "placed on a surface" feeling — premium product
   photography pattern (Aesop, Saie, AG1, Apple). Positioned
   absolutely within .hero-visual. z-index: 1 (above the
   ::before halo at z=0, below the vials at z=2-3). */
html body .hero .hero-visual .vial-ground {
    position: absolute !important;
    pointer-events: none !important;
    z-index: 1 !important;
    border-radius: 50% !important;
    /* Soft radial: dark center → transparent outer */
    background: radial-gradient(ellipse 50% 50% at center,
        rgba(10, 10, 10, 0.22) 0%,
        rgba(10, 10, 10, 0.10) 35%,
        rgba(10, 10, 10, 0)    70%) !important;
    filter: blur(4px) !important;
}
html body .hero .hero-visual .vial-ground-main {
    /* Under GLP3-R main vial — base is at ~50% center +20px, 560px tall */
    bottom: 5% !important;
    left: 50% !important;
    transform: translateX(calc(-50% + 20px)) !important;
    width: 220px !important;
    height: 32px !important;
    opacity: 0.95 !important;
}
html body .hero .hero-visual .vial-ground-mots {
    /* Under MOTS-c (top-right vial, 240px tall, rotated 2°) */
    top: calc(4% + 232px) !important;   /* base = top start + height - 12px */
    right: 4% !important;
    transform: translateX(48%) rotate(2deg) !important;
    width: 110px !important;
    height: 18px !important;
    opacity: 0.75 !important;
}
html body .hero .hero-visual .vial-ground-bpc {
    /* Under BPC-157 (bottom-right vial, 280px tall, rotated -1.5°) */
    bottom: 4% !important;
    right: 2% !important;
    transform: translateX(40%) rotate(-1.5deg) !important;
    width: 130px !important;
    height: 22px !important;
    opacity: 0.85 !important;
}


/* ─── 2. VIAL HOVER TOOLTIPS + CLICK-THRU ─── */
/* Wrap anchors take over from raw <picture> elements. They
   need to preserve the absolute positioning of their child
   <img> exactly (so positions match earlier rev). They also
   reveal a floating tooltip card on hover. */
html body .hero .hero-visual .hero-vial-link {
    position: absolute !important;
    z-index: 2 !important;
    display: block !important;
    cursor: pointer !important;
    text-decoration: none !important;
    color: inherit !important;
    /* Anchor sizes itself to its child <img>; we don't constrain it. */
}
/* Main vial link — anchors to the same translate as the img was */
html body .hero .hero-visual .hero-vial-link.hero-vial-link-main {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) translateX(20px) !important;
    z-index: 3 !important;
}
html body .hero .hero-visual .hero-vial-link.hero-vial-link-mots {
    top: 4% !important;
    right: 4% !important;
    transform: rotate(2deg) !important;
    z-index: 2 !important;
}
html body .hero .hero-visual .hero-vial-link.hero-vial-link-bpc {
    bottom: 6% !important;
    right: 2% !important;
    transform: rotate(-1.5deg) !important;
    z-index: 2 !important;
}
/* Reset the position + animation rules on the now-nested <img>
   (was absolutely positioned itself, now it's inside an anchor).
   Critical: kill the original Phase C entrance animations
   (r153-fadeUpVisual, r153-vialBreath, etc) because they
   reference transforms that assume the img is the positioned
   element — they'd cause the img to fly around inside the
   anchor wrapper. */
html body .hero .hero-visual .hero-vial-link .hero-vial-main,
html body .hero .hero-visual .hero-vial-link .hero-vial-secondary {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    display: block !important;
    animation: none !important;
    opacity: 1 !important;
}
/* Move entrance animations from img → anchor wrapper.
   Each anchor's "from" state is its final transform + slight
   offset. Cubic-bezier matches existing R153 motion. */
html body .hero .hero-visual .hero-vial-link.hero-vial-link-main {
    opacity: 0;
    animation: r153-anchor-fadeUp-main 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.55s forwards !important;
}
html body .hero .hero-visual .hero-vial-link.hero-vial-link-mots {
    opacity: 0;
    animation: r153-anchor-fadeFromTop 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.75s forwards !important;
}
html body .hero .hero-visual .hero-vial-link.hero-vial-link-bpc {
    opacity: 0;
    animation: r153-anchor-fadeFromBottom 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.85s forwards !important;
}
@keyframes r153-anchor-fadeUp-main {
    0%   { opacity: 0; transform: translate(-50%, -50%) translateX(20px) scale(0.96); }
    100% { opacity: 1; transform: translate(-50%, -50%) translateX(20px) scale(1); }
}
@keyframes r153-anchor-fadeFromTop {
    0%   { opacity: 0; transform: rotate(2deg) translateY(-12px); }
    100% { opacity: 1; transform: rotate(2deg) translateY(0); }
}
@keyframes r153-anchor-fadeFromBottom {
    0%   { opacity: 0; transform: rotate(-1.5deg) translateY(12px); }
    100% { opacity: 1; transform: rotate(-1.5deg) translateY(0); }
}
/* Subtle lift on the vial itself when hovered */
html body .hero .hero-visual .hero-vial-link {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
html body .hero .hero-visual .hero-vial-link.hero-vial-link-main:hover {
    transform: translate(-50%, -50%) translateX(20px) translateY(-4px) !important;
}
html body .hero .hero-visual .hero-vial-link.hero-vial-link-mots:hover {
    transform: rotate(2deg) translateY(-3px) !important;
}
html body .hero .hero-visual .hero-vial-link.hero-vial-link-bpc:hover {
    transform: rotate(-1.5deg) translateY(-3px) !important;
}

/* Tooltip card — appears above the vial on hover */
html body .hero .hero-visual .hero-vial-tooltip {
    position: absolute !important;
    top: -6px !important;
    left: 50% !important;
    transform: translate(-50%, -100%) translateY(8px) !important;
    background: #ffffff !important;
    border: 1px solid rgba(10, 10, 10, 0.06) !important;
    border-radius: 12px !important;
    padding: 11px 16px 11px 14px !important;
    box-shadow:
        0 8px 22px rgba(10, 10, 10, 0.10),
        0 24px 48px rgba(10, 10, 10, 0.12) !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    min-width: 180px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition:
        opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
    z-index: 10 !important;
    /* Counter-rotate inside MOTS-c / BPC links so tooltip text stays upright */
}
html body .hero .hero-visual .hero-vial-link-mots .hero-vial-tooltip {
    transform: translate(-50%, -100%) translateY(8px) rotate(-2deg) !important;
}
html body .hero .hero-visual .hero-vial-link-bpc .hero-vial-tooltip {
    transform: translate(-50%, -100%) translateY(8px) rotate(1.5deg) !important;
}
/* Reveal on hover */
html body .hero .hero-visual .hero-vial-link:hover .hero-vial-tooltip {
    opacity: 1 !important;
    transform: translate(-50%, -100%) translateY(0) !important;
}
html body .hero .hero-visual .hero-vial-link-mots:hover .hero-vial-tooltip {
    transform: translate(-50%, -100%) translateY(0) rotate(-2deg) !important;
}
html body .hero .hero-visual .hero-vial-link-bpc:hover .hero-vial-tooltip {
    transform: translate(-50%, -100%) translateY(0) rotate(1.5deg) !important;
}
/* Tooltip content typography */
html body .hero .hero-visual .hero-vial-tooltip .hvt-name {
    display: block !important;
    color: #0a0a0a !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.005em !important;
    white-space: nowrap !important;
}
html body .hero .hero-visual .hero-vial-tooltip .hvt-meta {
    display: block !important;
    color: #4a4a52 !important;
    font-size: 12.5px !important;
    line-height: 1.3 !important;
    margin-top: 3px !important;
}
html body .hero .hero-visual .hero-vial-tooltip .hvt-meta strong {
    color: #0a0a0a !important;
    font-weight: 700 !important;
}
html body .hero .hero-visual .hero-vial-tooltip .hvt-cta {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-top: 8px !important;
    color: #0d9488 !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
}
html body .hero .hero-visual .hero-vial-tooltip .hvt-cta i {
    font-size: 9px !important;
    transition: transform 0.25s ease !important;
}
html body .hero .hero-visual .hero-vial-link:hover .hero-vial-tooltip .hvt-cta i {
    transform: translateX(3px) !important;
}


/* ─── 3. BULLET DESCRIPTION CHECKMARKS ─── */
html body .hero .hero-description .hd-check {
    color: #0d9488 !important;
    font-size: 10px !important;
    margin-right: 5px !important;
    font-weight: 900 !important;
    vertical-align: 1px !important;
}


/* ─── 5. PULSING LIVE DOT ON RATING CHIP — REMOVED (rev41) ─── */
/* Was small green dot before "200+ verified researchers".
   Removed per owner. Keyframe kept (used elsewhere if restored). */
@keyframes r153-live-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18); transform: scale(1); }
    50%      { box-shadow: 0 0 0 5px rgba(16, 185, 129, 0.08); transform: scale(1.12); }
}


/* ─── 6. AMBIENT PARTICLES (CSS-ONLY) ─── */
/* 5 tiny teal dots in the visual column. Each has its own
   slow drift animation. Different sizes/positions/durations
   for natural feel — never repeating in sync. */
html body .hero .hero-visual .hero-particle {
    position: absolute !important;
    width: 4px !important;
    height: 4px !important;
    border-radius: 50% !important;
    background: rgba(20, 184, 166, 0.55) !important;
    box-shadow: 0 0 6px rgba(20, 184, 166, 0.4) !important;
    pointer-events: none !important;
    z-index: 1 !important;
    opacity: 0 !important;
}
html body .hero .hero-visual .hero-particle.hp-1 {
    top: 18%;  left: 12%; width: 3px; height: 3px;
    animation: r153-particle-drift 11s ease-in-out 0.5s infinite, r153-particle-fade 11s ease-in-out 0.5s infinite !important;
}
html body .hero .hero-visual .hero-particle.hp-2 {
    top: 38%;  left: 8%;  width: 5px; height: 5px;
    animation: r153-particle-drift-b 14s ease-in-out 1.8s infinite, r153-particle-fade 14s ease-in-out 1.8s infinite !important;
}
html body .hero .hero-visual .hero-particle.hp-3 {
    top: 72%;  left: 22%; width: 4px; height: 4px;
    animation: r153-particle-drift 13s ease-in-out 3.5s infinite, r153-particle-fade 13s ease-in-out 3.5s infinite !important;
}
html body .hero .hero-visual .hero-particle.hp-4 {
    top: 12%;  right: 28%; width: 3px; height: 3px;
    animation: r153-particle-drift-b 16s ease-in-out 2.2s infinite, r153-particle-fade 16s ease-in-out 2.2s infinite !important;
}
html body .hero .hero-visual .hero-particle.hp-5 {
    bottom: 8%; left: 32%; width: 4px; height: 4px;
    animation: r153-particle-drift 12s ease-in-out 5s infinite, r153-particle-fade 12s ease-in-out 5s infinite !important;
}
@keyframes r153-particle-drift {
    0%   { transform: translate(0, 0); }
    50%  { transform: translate(8px, -14px); }
    100% { transform: translate(-4px, 6px); }
}
@keyframes r153-particle-drift-b {
    0%   { transform: translate(0, 0); }
    50%  { transform: translate(-10px, 8px); }
    100% { transform: translate(6px, -10px); }
}
@keyframes r153-particle-fade {
    0%, 100% { opacity: 0; }
    20%, 80% { opacity: 0.55; }
}


/* ─── 7. SAME-DAY DISPATCH BOLT PULSE ─── */
/* Mirror the launch-callout bolt pulse onto the Same-Day
   floating callout icon. Subtle "live" cue on the visual. */
html body .hero .hero-visual .hero-float-callout.hfc-br .hfc-icon i {
    animation: r153-bolt-pulse 2.2s ease-in-out infinite !important;
}
@keyframes r153-bolt-pulse {
    0%, 100% { transform: scale(1);   opacity: 1;   }
    50%      { transform: scale(1.18); opacity: 0.72; }
}


/* ─── 8. H1 TEAL HAIRLINE PAGE-LOAD EXTEND ─── */
/* The teal underline accent under "Modern Research" draws
   in from left to right over 1.2s on initial load. Becomes
   part of the entrance choreography — a brand-touch detail. */
html body .hero .hero-title .hero-title-accent::after {
    transform-origin: left center !important;
    animation: r153-hairline-extend 1.0s cubic-bezier(0.16, 1, 0.3, 1) 0.65s forwards !important;
    transform: scaleX(0) !important;
    opacity: 0 !important;
}
@keyframes r153-hairline-extend {
    0%   { transform: scaleX(0);   opacity: 0; }
    100% { transform: scaleX(1);   opacity: 1; }
}


/* ─── 9. LIVE DATA TICKER (BELOW TRUST STRIP) ─── */
html body .hero-live-ticker {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    max-width: 1240px !important;
    margin: 0 auto !important;
    padding: 4px 24px 0 24px !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
    color: #6b6b73 !important;
}
html body .hero-live-ticker .hlt-pulse {
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #10b981 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18) !important;
    animation: r153-live-pulse 2.4s ease-in-out infinite !important;
}
html body .hero-live-ticker .hlt-label {
    color: #0d9488 !important;
    font-weight: 700 !important;
    font-size: 10.5px !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
}
html body .hero-live-ticker .hlt-sep {
    color: rgba(10, 10, 10, 0.15) !important;
}
html body .hero-live-ticker .hlt-item {
    color: #4a4a52 !important;
}
html body .hero-live-ticker .hlt-item strong {
    color: #0a0a0a !important;
    font-weight: 700 !important;
}


/* ─── REDUCED MOTION FALLBACKS ─── */
@media (prefers-reduced-motion: reduce) {
    html body .hero .hero-rating .hero-rating-text::before,
    html body .hero-live-ticker .hlt-pulse,
    html body .hero .hero-visual .hero-float-callout.hfc-br .hfc-icon i {
        animation: none !important;
    }
    html body .hero .hero-visual .hero-particle {
        animation: none !important;
        opacity: 0.4 !important;
    }
    html body .hero .hero-title .hero-title-accent::after {
        transform: scaleX(1) !important;
        opacity: 1 !important;
        animation: none !important;
    }
    html body .hero .hero-visual .hero-vial-link {
        transition: none !important;
    }
    html body .hero .hero-visual .hero-vial-link:hover {
        transform: inherit !important;
    }
}


/* ─── MOBILE REFLOW ─── */
@media (max-width: 768px) {
    /* Hide tooltips on mobile (no hover available) */
    html body .hero .hero-visual .hero-vial-tooltip {
        display: none !important;
    }
    /* Smaller particles on mobile */
    html body .hero .hero-visual .hero-particle {
        display: none !important;
    }
    /* Tighter ground shadows */
    html body .hero .hero-visual .vial-ground-main {
        width: 160px !important;
        height: 24px !important;
    }
    html body .hero .hero-visual .vial-ground-mots,
    html body .hero .hero-visual .vial-ground-bpc {
        display: none !important;  /* Too cramped on mobile */
    }
    /* Live ticker stacks on mobile */
    html body .hero-live-ticker {
        font-size: 11px !important;
        padding: 6px 16px 0 16px !important;
        gap: 6px !important;
    }
    html body .hero-live-ticker .hlt-sep {
        display: none !important;
    }
}

/* ============================================================
   END R153-rev39
   ============================================================ */


/* ============================================================
   R153-rev43 — ALPHA COMPETITOR LEARNINGS ADAPTED
   ============================================================
   Items implemented:
     1. Eyebrow back with WPB location (HTML done, CSS exists)
     2. H1 periods (HTML done — pure copy change)
     3. "View COA Portal" rename (HTML done)
     4. Floating promo badge (corner)
     5. Trust strip → unified rounded pill w/ vertical dividers
     6. Trust pill items: big-stat-on-top + small-label-below
     7. Specific shipping language handled via launch callout copy

   Borrowed from Alpha:
     - Dual-line H1 with declarative periods
     - Concrete location eyebrow (Sacramento → West Palm Beach)
     - Single-pill trust container w/ vertical separators
     - Two-line item typography (big number + descriptor)
     - Corner promo badge (theirs pink; ours teal for brand fit)
   ============================================================ */


/* ─── TRUST PILL ─── */
/* Unified rounded container holding 4 stat items. Each item has
   a big top line + small descriptor below. Vertical dividers
   between items. White pill on cream — reads as curated. */
html body .hero-trust-rule .trust-pill {
    display: inline-flex !important;
    align-items: stretch !important;
    background: #ffffff !important;
    border: 1px solid rgba(10, 10, 10, 0.06) !important;
    border-radius: 999px !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.6) inset,
        0 6px 18px rgba(10, 10, 10, 0.04),
        0 16px 36px rgba(10, 10, 10, 0.05) !important;
    padding: 0 !important;
    overflow: hidden !important;
    margin: 0 auto !important;
}


html body .hero-trust-rule .trust-pill-item .tpi-stat {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    color: #0a0a0a !important;
    letter-spacing: -0.01em !important;
    margin: 0 !important;
}




/* ─── FLOATING PROMO BADGE ─── */
/* Circular teal badge anchored to bottom-right of .hero. ~94px
   diameter. Slight rotation for energy. Click → catalog. */
html body .hero {
    position: relative !important;
}
html body .hero .hero-promo-badge {
    position: absolute !important;
    bottom: 56px !important;
    right: 32px !important;
    z-index: 9 !important;
    width: 94px !important;
    height: 94px !important;
    border-radius: 50% !important;
    background: linear-gradient(140deg, #14b8a6 0%, #0d9488 100%) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    text-align: center !important;
    line-height: 1 !important;
    transform: rotate(-7deg) !important;
    box-shadow:
        0 4px 12px rgba(13, 148, 136, 0.30),
        0 18px 38px rgba(13, 148, 136, 0.25),
        0 1px 0 rgba(255, 255, 255, 0.25) inset !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.35s ease !important;
    animation: r153-promo-bob 4.2s ease-in-out infinite !important;
}
html body .hero .hero-promo-badge:hover {
    transform: rotate(0deg) scale(1.06) !important;
    box-shadow:
        0 6px 16px rgba(13, 148, 136, 0.38),
        0 24px 48px rgba(13, 148, 136, 0.32),
        0 1px 0 rgba(255, 255, 255, 0.30) inset !important;
}
html body .hero .hero-promo-badge .hpb-num {
    font-size: 26px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 1px !important;
}
html body .hero .hero-promo-badge .hpb-text {
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    margin-bottom: 5px !important;
}
html body .hero .hero-promo-badge .hpb-sub {
    font-size: 8.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.10em !important;
    text-transform: uppercase !important;
    opacity: 0.92 !important;
    line-height: 1.1 !important;
}
@keyframes r153-promo-bob {
    0%, 100% { transform: rotate(-7deg) translateY(0); }
    50%      { transform: rotate(-7deg) translateY(-4px); }
}


/* ─── MOBILE REFLOW ─── */
@media (max-width: 768px) {
    /* Promo badge: smaller + repositioned on mobile */
    html body .hero .hero-promo-badge {
        bottom: 24px !important;
        right: 16px !important;
        width: 72px !important;
        height: 72px !important;
    }
    html body .hero .hero-promo-badge .hpb-num { font-size: 20px !important; }
    html body .hero .hero-promo-badge .hpb-text { font-size: 10px !important; margin-bottom: 3px !important; }
    html body .hero .hero-promo-badge .hpb-sub { font-size: 7px !important; }
    /* Trust pill: scroll horizontally on narrow viewports */
    
    
    html body .hero-trust-rule .trust-pill {
        margin: 0 16px !important;
    }
    
    html body .hero-trust-rule .trust-pill-item .tpi-stat { font-size: 15px !important; }
    
}

@media (max-width: 480px) {
    /* Hide promo badge on very small screens — prevents collision with CTAs */
    html body .hero .hero-promo-badge {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html body .hero .hero-promo-badge {
        animation: none !important;
    }
}

/* ============================================================
   END R153-rev43
   ============================================================ */


/* ============================================================
   R153-rev44 — KILL CREAM/WHITE SEAM BELOW HERO
   ============================================================
   The visible color cut-off below the vial cluster came from
   TWO competing rules:
     1. .spectrum-divider had a gradient fading to #ffffff
        (line 31475–31482)
     2. .why-section used --bg-soft (#f5f5f7, light gray)
        (line 19747)
   Harmonizing everything to #fafafa cream so the hero flows
   into the trust pill → spectrum-divider → why-section as one
   continuous cream wash.
   ============================================================ */

html body .spectrum-divider {
    background: transparent !important;
}
html body .why-section,
html body main .why-section {
    background: #fafafa !important;
}

/* ============================================================
   END R153-rev44
   ============================================================ */


/* ============================================================
   R153-rev46 — MAJOR DECLUTTER + TYPOGRAPHY DRAMA
   ============================================================
   Decluttering done in HTML (bullets, launch callout, editorial
   line, floating vial callouts all removed). CSS work below:

   1. H1 scale +20% (push it harder)
   2. "Modern Research." → OUTLINED teal (Alpha's dual-treatment
      trick adapted to our brand color). Strong teal stroke,
      transparent fill — keeps the teal underline accent
   3. Subtle dot grid background pattern in hero (Alpha-like
      tech feel without losing cream)
   4. Tighter visual column composition (less negative space)
   5. Scroll-to-explore indicator at bottom of hero
   ============================================================ */


/* ─── 1. H1 SCALE BUMP ─── */
html body .hero .hero-title .hero-title-line {
    font-size: clamp(44px, 5.4vw, 72px) !important;  /* was 36/4.4/58 */
    font-weight: 800 !important;  /* was 700 — heavier presence */
    letter-spacing: -0.028em !important;
}
html body .hero .hero-title .hero-title-accent {
    font-size: clamp(54px, 6.8vw, 92px) !important;  /* was 44/5.4/72 */
    font-weight: 900 !important;  /* was 800 — fully bold */
    letter-spacing: -0.025em !important;
    /* Keep solid teal — outlined treatment opted out (it would
       look fragile at Inter weight 900 against cream; Alpha gets
       away with it because their face is condensed/heavy).
       Instead we lean into MASS + scale. */
}


/* ─── 2. SUBTLE DOT GRID PATTERN ─── */
/* Very faint dot grid in the hero background — Alpha-like
   technical feel without leaving the cream palette.
   Pure CSS, no images. */
html body .hero {
    background:
        radial-gradient(ellipse 240px 580px at calc(100% - 230px) 62%,
            rgba(20, 184, 166, 0.11) 0%,
            rgba(20, 184, 166, 0.04) 38%,
            rgba(20, 184, 166, 0) 65%),
        radial-gradient(circle at center, rgba(10, 10, 10, 0.04) 1px, transparent 1px) 0 0 / 28px 28px,
        #fafafa !important;
}


/* ─── 3. KILL THE NOW-EMPTY ELEMENT MARGINS ─── */
/* With bullets + launch callout + editorial line all removed,
   the text column collapses naturally. Just clean up rhythm. */
html body .hero .hero-cta {
    margin: 0 !important;  /* was 24px — nothing below now */
}


/* ─── 4. STRONGER VIAL DROP SHADOWS ─── */
/* With floating callouts removed, the vials carry the right
   side alone. Stronger shadows give them more weight. */
html body .hero .hero-visual .hero-vial-link .hero-vial-main {
    filter:
        drop-shadow(0 6px 12px rgba(10, 10, 10, 0.16))
        drop-shadow(0 32px 56px rgba(10, 10, 10, 0.22))
        contrast(1.05)
        saturate(1.06) !important;
}
html body .hero .hero-visual .hero-vial-link .hero-vial-secondary {
    filter:
        drop-shadow(0 4px 10px rgba(10, 10, 10, 0.14))
        drop-shadow(0 22px 38px rgba(10, 10, 10, 0.18))
        contrast(1.05)
        saturate(1.06) !important;
}


/* ─── 5. SCROLL-TO-EXPLORE INDICATOR ─── */
/* Subtle "↓ Explore" indicator at the bottom-center of hero.
   Pure CSS animation — tiny vertical line that scrolls in a
   ~2s loop, with thin uppercase label above it. */
html body .hero .hero-scroll-indicator {
    position: absolute !important;
    bottom: 18px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 9.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.20em !important;
    text-transform: uppercase !important;
    color: #6b6b73 !important;
    pointer-events: none !important;
    z-index: 5 !important;
    opacity: 0 !important;
    animation: r153-scroll-fade-in 0.6s ease-out 1.6s forwards !important;
}
html body .hero .hero-scroll-indicator .hsi-line {
    position: relative !important;
    width: 1px !important;
    height: 28px !important;
    background: rgba(10, 10, 10, 0.10) !important;
    overflow: hidden !important;
}
html body .hero .hero-scroll-indicator .hsi-line::after {
    content: '' !important;
    position: absolute !important;
    top: -28px !important;
    left: 0 !important;
    width: 1px !important;
    height: 28px !important;
    background: linear-gradient(180deg, transparent 0%, #0d9488 50%, transparent 100%) !important;
    animation: r153-scroll-dash 2.2s ease-in-out infinite !important;
    animation-delay: 2.0s !important;
}
@keyframes r153-scroll-fade-in {
    0%   { opacity: 0; transform: translateX(-50%) translateY(4px); }
    100% { opacity: 0.85; transform: translateX(-50%) translateY(0); }
}
@keyframes r153-scroll-dash {
    0%   { top: -28px; }
    100% { top: 28px; }
}


@media (prefers-reduced-motion: reduce) {
    html body .hero .hero-scroll-indicator { opacity: 0.85 !important; animation: none !important; }
    html body .hero .hero-scroll-indicator .hsi-line::after { animation: none !important; }
}

@media (max-width: 768px) {
    html body .hero .hero-scroll-indicator { display: none !important; }
}

/* ============================================================
   END R153-rev46
   ============================================================ */


/* ============================================================
   R153-rev47 — TRUST PILL INLINE + RATING STACKED + CALLOUT BACK
   ============================================================
   1. Trust pill moved from sibling-below-hero INTO the hero text
      column, sitting below the CTAs. (Alpha placement.)
   2. Rating chip restructured into 2-row stack:
        Row 1: stars + 4.9/5 score
        Row 2: "Based on 200+ verified researcher reviews →"
   3. Launch sale callout restored above the CTAs.
   ============================================================ */


/* ─── 1. INLINE TRUST PILL (now inside .hero-text) ─── */
/* When trust pill is inside the text column, it needs different
   sizing/margin than the standalone version. Constrain width to
   the text column's natural measure. */
html body .hero .hero-text .hero-trust-rule.hero-trust-inline {
    display: flex !important;
    justify-content: flex-start !important;
    margin: 22px 0 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    width: 100% !important;
    max-width: 100% !important;
}
html body .hero .hero-text .hero-trust-rule.hero-trust-inline .trust-pill {
    margin: 0 !important;
    width: auto !important;
    max-width: 100% !important;
}
/* Tighter item padding for the inline version — text column is
   narrower than the page-wide standalone version. */
html body .hero .hero-text .hero-trust-rule.hero-trust-inline .trust-pill-item {
    padding: 12px 22px !important;
}
html body .hero .hero-text .hero-trust-rule.hero-trust-inline .trust-pill-item .tpi-stat {
    font-size: 15px !important;
}
html body .hero .hero-text .hero-trust-rule.hero-trust-inline .trust-pill-item .tpi-label {
    font-size: 9.5px !important;
    letter-spacing: 0.11em !important;
}


/* ─── 2. RATING CHIP — STACKED (2-row) ─── */
/* R153-rev48: container pill removed (was inheriting white bg +
   border-radius from base .hero-rating). Now it's just stars
   row + text row, freely laid out — no oval. */
html body .hero .hero-rating.hero-rating-stacked {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 5px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
html body .hero .hero-rating.hero-rating-stacked:hover {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}
html body .hero .hero-rating.hero-rating-stacked .hero-rating-top {
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    line-height: 1 !important;
}
html body .hero .hero-rating.hero-rating-stacked .hero-rating-stars {
    display: inline-flex !important;
    gap: 2px !important;
    color: #fbbf24 !important;
    font-size: 13px !important;
}
html body .hero .hero-rating.hero-rating-stacked .hero-rating-score {
    color: #0a0a0a !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: 1 !important;
}
html body .hero .hero-rating.hero-rating-stacked .hero-rating-score strong {
    font-weight: 700 !important;
    color: #0a0a0a !important;
}
html body .hero .hero-rating.hero-rating-stacked .hero-rating-bottom {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    line-height: 1.2 !important;
}
html body .hero .hero-rating.hero-rating-stacked .hero-rating-subtext {
    color: #4a4a52 !important;
    font-weight: 500 !important;
    font-size: 11.5px !important;
    letter-spacing: 0.01em !important;
}
html body .hero .hero-rating.hero-rating-stacked .hero-rating-arrow {
    font-size: 9px !important;
    color: #0d9488 !important;
    transition: transform 0.25s ease !important;
}
html body .hero .hero-rating.hero-rating-stacked:hover .hero-rating-arrow {
    transform: translateX(3px) !important;
}


/* ─── MOBILE REFLOW for inline trust pill ─── */
@media (max-width: 1024px) {
    /* On tablet the text column collapses to single column;
       trust pill needs to be centered + scroll-safe */
    html body .hero .hero-text .hero-trust-rule.hero-trust-inline {
        justify-content: center !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }
    html body .hero .hero-text .hero-trust-rule.hero-trust-inline::-webkit-scrollbar {
        display: none !important;
    }
}
@media (max-width: 768px) {
    html body .hero .hero-text .hero-trust-rule.hero-trust-inline {
        margin-top: 16px !important;
    }
    html body .hero .hero-text .hero-trust-rule.hero-trust-inline .trust-pill-item {
        padding: 10px 16px !important;
    }
}

/* ============================================================
   END R153-rev47
   ============================================================ */


/* ============================================================
   R153-rev50 — FEATURE-DESCRIPTIVE PARAGRAPH BELOW RATING CHIP
   ============================================================
   Alpha pattern: single sentence below the rating block that
   compactly states the three top facts (purity / COA / dispatch).
   Distinct from the italic brand-voice subhead above the chip
   (which is voice, not features). Two voices, one block each.
   ============================================================ */

html body .hero .hero-feature-desc {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 17px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: #1a1a1a !important;
    letter-spacing: -0.002em !important;
    margin: 16px 0 24px 0 !important;
    max-width: 540px !important;
}
html body .hero .hero-feature-desc strong {
    color: #0a0a0a !important;
    font-weight: 700 !important;
}

@media (max-width: 768px) {
    html body .hero .hero-feature-desc {
        font-size: 15.5px !important;
        margin: 14px 0 20px 0 !important;
    }
}

/* ============================================================
   END R153-rev50
   ============================================================ */


/* ============================================================
   R153-rev52 — MERGED BRAND-VOICE + FEATURE FACTS
   ============================================================
   Sub-headline now contains TWO sentences in one block:
     S1: "Built by researchers who refused to pay $400 a vial."
         — brand voice (origin)
     S2: "99%+ HPLC purity, COA-backed batches, same-day dispatch
          — without the markup."
         — feature facts that complete the manifesto
   Wrapped in .hsh-cont to allow slightly different styling
   (non-italic, slightly heavier, color shift) while staying
   in the same paragraph block visually.
   ============================================================ */

html body .hero .hero-subheadline .hsh-cont {
    display: inline !important;
    font-style: normal !important;
    font-weight: 500 !important;
    color: #1a1a1a !important;
}

/* ============================================================
   END R153-rev52
   ============================================================ */


/* ============================================================
   R153-rev54 — DESIGNER'S PASS: ATMOSPHERIC PREMIUM POLISH
   ============================================================
   Free-hand designer rev. Focused on:

     1. Photographic stage behind vials (studio backdrop feel)
     2. Ambient teal light drift across hero (slow, atmospheric)
     3. Trust pill: icons + hover states (visual rhythm)
     4. Primary CTA attention pulse
     5. Promo badge refined motion
     6. Subtle "Modern Research." typography ennoblement
     7. Cursor parallax on vial cluster (--hp-parallax-x/y vars
        set by R153-rev54 script in index.html)
     8. Refined launch callout visual treatment
   ============================================================ */


/* ─── 1. PHOTOGRAPHIC STAGE — REMOVED (rev55) ─── */
/* The bottom-gradient stage was reading as a visible floating
   rectangle on the cream — exactly the same "rectangular outline"
   problem we hit earlier with bg gradients. Killed. */
html body .hero .hero-visual::after {
    display: none !important;
}


/* ─── 2. AMBIENT TEAL LIGHT DRIFT (background animation) ─── */
/* Very slow horizontal light sweep across hero. Adds the "this
   page is alive" feel without becoming distracting. 28s cycle. */
html body .hero::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    background:
        radial-gradient(ellipse 300px 200px at 30% 40%,
            rgba(20, 184, 166, 0.05) 0%,
            rgba(20, 184, 166, 0) 70%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
    animation: r153-ambient-drift 28s ease-in-out infinite !important;
}
@keyframes r153-ambient-drift {
    0%, 100% { transform: translateX(0)    translateY(0);    opacity: 0.6; }
    33%      { transform: translateX(40px)  translateY(-20px); opacity: 1;   }
    66%      { transform: translateX(-30px) translateY(15px);  opacity: 0.8; }
}


/* ─── 3. TRUST PILL ICONS + HOVER ─── */
html body .hero .hero-text .hero-trust-rule.hero-trust-inline .trust-pill-item {
    position: relative !important;
    transition: background 0.3s ease !important;
}
html body .hero .hero-text .hero-trust-rule.hero-trust-inline .trust-pill-item:hover {
    background: rgba(20, 184, 166, 0.04) !important;
}
html body .hero .hero-text .hero-trust-rule.hero-trust-inline .trust-pill-item .tpi-icon {
    color: #0d9488 !important;
    font-size: 12px !important;
    margin-bottom: 6px !important;
    opacity: 0.85 !important;
    transition: transform 0.3s ease, opacity 0.3s ease !important;
}
html body .hero .hero-text .hero-trust-rule.hero-trust-inline .trust-pill-item:hover .tpi-icon {
    opacity: 1 !important;
    transform: translateY(-1px) scale(1.08) !important;
}
/* Pill itself gets a slightly more refined shadow */
html body .hero .hero-text .hero-trust-rule.hero-trust-inline .trust-pill {
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.7) inset,
        0 4px 12px rgba(10, 10, 10, 0.04),
        0 16px 32px rgba(10, 10, 10, 0.05),
        0 0 0 1px rgba(13, 148, 136, 0.02) !important;
}


/* ─── 4. PRIMARY CTA ATTENTION PULSE ─── */
/* Subtle expanding teal ring that pulses out from the Browse
   Catalog button every 4 seconds. Premium attention cue —
   draws the eye without yelling. */
html body .hero .hero-cta .btn-primary.hero-cta-shop {
    position: relative !important;
    z-index: 1 !important;
}
html body .hero .hero-cta .btn-primary.hero-cta-shop::before {
    content: '' !important;
    position: absolute !important;
    inset: -4px !important;
    border-radius: 14px !important;
    background: transparent !important;
    border: 2px solid rgba(20, 184, 166, 0.4) !important;
    pointer-events: none !important;
    opacity: 0 !important;
    z-index: -1 !important;
    animation: r153-cta-attention 4.5s ease-out 2.5s infinite !important;
}
@keyframes r153-cta-attention {
    0%, 100% { opacity: 0; transform: scale(1); }
    8%       { opacity: 0.7; transform: scale(1); }
    25%, 100%{ opacity: 0; transform: scale(1.06); }
}


/* ─── 5. PROMO BADGE REFINED MOTION ─── */
/* Add a subtle scale breath on top of the existing bob. Plus
   tiny rotation cycle for organic feel. */
@keyframes r153-promo-bob {
    0%, 100% { transform: rotate(-7deg)  translateY(0)   scale(1); }
    25%      { transform: rotate(-5.5deg) translateY(-3px) scale(1.015); }
    50%      { transform: rotate(-7deg)  translateY(-5px) scale(1.02); }
    75%      { transform: rotate(-8.5deg) translateY(-3px) scale(1.015); }
}


/* ─── 6. "MODERN RESEARCH." TYPOGRAPHY ENNOBLEMENT ─── */
/* The hero word gets a subtle teal accent dot before its period
   — premium typographic flourish. Plus drop-shadow that adds
   depth without weight. */
html body .hero .hero-title .hero-title-accent {
    text-shadow:
        0 1px 0 rgba(13, 148, 136, 0.04),
        0 2px 24px rgba(13, 148, 136, 0.08) !important;
}


/* ─── 7. CURSOR PARALLAX WIRING ─── */
/* JS sets --hp-parallax-x / --hp-parallax-y custom properties
   on .hero-visual; here we apply them as a transform on the
   element. Smooth transition for organic feel. */
html body .hero .hero-visual {
    transform: translate3d(var(--hp-parallax-x, 0), var(--hp-parallax-y, 0), 0) !important;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
    will-change: transform !important;
}


/* ─── 8. REFINED LAUNCH CALLOUT ─── */
/* Slightly softer treatment, more "editorial pull-quote" feel
   instead of "marketing pill". */
html body .hero .hero-discount-callout {
    background: linear-gradient(135deg,
        rgba(20, 184, 166, 0.04) 0%,
        rgba(255, 255, 255, 0.95) 100%) !important;
    border: 1px solid rgba(13, 148, 136, 0.18) !important;
    border-left: 3px solid #0d9488 !important;
    box-shadow:
        0 2px 6px rgba(13, 148, 136, 0.06),
        0 8px 18px rgba(13, 148, 136, 0.04) !important;
}


/* ─── REDUCED MOTION FALLBACKS ─── */
@media (prefers-reduced-motion: reduce) {
    html body .hero::before { animation: none !important; opacity: 0.6 !important; }
    html body .hero .hero-cta .btn-primary.hero-cta-shop::before { animation: none !important; }
    html body .hero .hero-visual { transition: none !important; transform: none !important; }
}


/* ─── MOBILE ADJUSTMENTS ─── */
@media (max-width: 768px) {
    /* Photographic stage subtler on mobile */
    html body .hero .hero-visual::after { height: 25% !important; }
    /* Parallax disabled on mobile (no mouse) */
    html body .hero .hero-visual { transform: none !important; }
    /* Trust pill icons smaller on narrow */
    html body .hero .hero-text .hero-trust-rule.hero-trust-inline .trust-pill-item .tpi-icon {
        font-size: 10.5px !important;
        margin-bottom: 4px !important;
    }
}

/* ============================================================
   END R153-rev54
   ============================================================ */


/* ============================================================
   ╔══════════════════════════════════════════════════════════╗
   ║   R153-rev55 — SYSTEMATIC HERO REMODEL                   ║
   ║   ── designer pass, no more patches ──                   ║
   ╚══════════════════════════════════════════════════════════╝

   This rev establishes a design SYSTEM and refactors every
   hero element through it. Tokens for spacing, color, type,
   shadow, motion — all consistent.

   ── DESIGN TOKENS ─────────────────────────────────────────

     Spacing (8px base scale):
       --hr-s-1: 4px    micro     (icon→label, intra-pair)
       --hr-s-2: 8px    tight     (lockup gaps)
       --hr-s-3: 16px   default   (between related items)
       --hr-s-4: 24px   medium    (between sections in column)
       --hr-s-5: 32px   loose     (major separation)
       --hr-s-6: 48px   generous  (top of section)

     Color hierarchy (text):
       primary    #0a0a0a   titles, key stats
       secondary  #1a1a1a   subheadings, body lead
       tertiary   #4a4a52   captions, descriptors
       muted      #6b6b73   microcopy, fine print
       teal       #0d9488   accent, links, active

     Surface tokens:
       cream-base    #fafafa
       cream-warm    #f6f3ed (subtle bottom gradient)
       white         #ffffff (pill containers)
       teal-tint     rgba(13, 148, 136, 0.06)
       border-faint  rgba(10, 10, 10, 0.06)
       border-soft   rgba(10, 10, 10, 0.10)

     Shadow ladder (consistent light from upper-left):
       sm   0 1px 3px rgba(10,10,10,0.04)
       md   0 4px 12px rgba(10,10,10,0.06), 0 14px 28px rgba(10,10,10,0.08)
       lg   0 8px 20px rgba(10,10,10,0.08), 0 24px 48px rgba(10,10,10,0.12)
       vial 0 6px 12px rgba(10,10,10,0.16), 0 32px 56px rgba(10,10,10,0.22)

   ──────────────────────────────────────────────────────────── */


/* ─── BACKGROUND ATMOSPHERE ─── */
/* Subtle vertical warmth gradient: cream-base at top → very
   slightly warmer cream toward bottom. Gives the hero a sense
   of "settling" — not flat. Refined teal radial centered on
   vial cluster. */
html body .hero {
    /* rev55: 240×580 at calc(100% - 230px) 62%.
       rev58: shifted glow LEFT (230→360px from right edge) so it
       centers behind the main vial instead of the cluster mean.
       Width narrowed (240→200) so right-side reach is tighter —
       more teal hue on the left of the vials, less on the right. */
    background:
        radial-gradient(ellipse 200px 600px at calc(100% - 360px) 62%,
            rgba(20, 184, 166, 0.13) 0%,
            rgba(20, 184, 166, 0.05) 38%,
            rgba(20, 184, 166, 0) 70%),
        linear-gradient(180deg, #fafafa 0%, #fafafa 60%, #f6f3ed 100%),
        radial-gradient(circle at center, rgba(10, 10, 10, 0.04) 1px, transparent 1px) 0 0 / 28px 28px,
        #fafafa !important;
}


/* ─── TYPOGRAPHY: PRECISION HIERARCHY ─── */
/* Line 1 ("Premium Peptides.") = preface, deliberately
   smaller. Line 2 ("Modern Research.") = the hero word,
   dominant scale. Clear visual hierarchy via SIZE not just
   color. */
html body .hero .hero-title {
    margin: 0 0 24px 0 !important;
    line-height: 1.0 !important;
}
html body .hero .hero-title .hero-title-line {
    font-size: clamp(38px, 4.6vw, 60px) !important;
    font-weight: 700 !important;
    letter-spacing: -0.028em !important;
    color: #0a0a0a !important;
    line-height: 1.0 !important;
    margin-bottom: 4px !important;
}
html body .hero .hero-title .hero-title-accent {
    /* R153-rev57: scaled down a touch — was 60/7.4/100, then 56/6.8/92.
       R153-rev58: another step — 52/6.2/84.
       R153-rev59: significant cut — 44/5.4/74. */
    font-size: clamp(44px, 5.4vw, 74px) !important;
    font-weight: 900 !important;
    letter-spacing: -0.030em !important;
    color: #0d9488 !important;
    line-height: 1.0 !important;
    /* Subtle text-shadow for ennoblement (no glow, just depth) */
    text-shadow: 0 1px 0 rgba(13, 148, 136, 0.05) !important;
}
/* Refine the teal underline — thinner, more elegant */
html body .hero .hero-title .hero-title-accent::after {
    height: 1.5px !important;
    bottom: -8px !important;
    background: linear-gradient(90deg,
        rgba(13, 148, 136, 0) 0%,
        rgba(13, 148, 136, 0.45) 30%,
        rgba(13, 148, 136, 0.45) 70%,
        rgba(13, 148, 136, 0) 100%) !important;
}


/* ─── SUBHEAD: REFINED ─── */
/* Editorial pull-quote feel. Refined typography, refined
   teal hairline, tightened max-width. */
html body .hero .hero-subheadline {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 17px !important;
    font-weight: 400 !important;
    font-style: italic !important;
    line-height: 1.55 !important;
    letter-spacing: 0 !important;
    color: #4a4a52 !important;
    margin: 28px 0 24px 0 !important;
    max-width: 500px !important;
    padding-left: 16px !important;
    border-left: 1.5px solid #0d9488 !important;
}
html body .hero .hero-subheadline .hsh-cont {
    display: inline !important;
    font-style: normal !important;
    font-weight: 500 !important;
    color: #1a1a1a !important;
}


/* ─── RATING CHIP: REFINED ─── */
/* Slightly more polished pill — better padding, refined shadow,
   refined typography weights. */
html body .hero .hero-rating {
    padding: 9px 16px 9px 13px !important;
    background: #ffffff !important;
    border: 1px solid rgba(10, 10, 10, 0.06) !important;
    border-radius: 999px !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.8) inset,
        0 2px 8px rgba(10, 10, 10, 0.04) !important;
    margin: 0 0 0 0 !important;
}
html body .hero .hero-rating:hover {
    border-color: rgba(13, 148, 136, 0.30) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.8) inset,
        0 4px 14px rgba(13, 148, 136, 0.10) !important;
}
html body .hero .hero-rating-stars {
    font-size: 11.5px !important;
    color: #f59e0b !important;  /* Refined: amber-500 not amber-400 (slightly more saturated) */
}
html body .hero .hero-rating-text {
    font-size: 13.5px !important;
    color: #4a4a52 !important;
    font-weight: 500 !important;
}
html body .hero .hero-rating-text strong {
    color: #0a0a0a !important;
    font-weight: 700 !important;
}


/* ─── LAUNCH CALLOUT: SUBTLER, MORE EDITORIAL ─── */
/* Was reading as a heavy marketing pill. Refined to feel like
   a quiet editorial annotation. */
html body .hero .hero-discount-callout {
    background: rgba(255, 255, 255, 0.7) !important;
    border: 1px solid rgba(13, 148, 136, 0.18) !important;
    border-left: 2px solid #0d9488 !important;
    border-radius: 8px !important;
    padding: 9px 14px !important;
    margin: 24px 0 28px 0 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #1a1a1a !important;
    letter-spacing: 0 !important;
    box-shadow: 0 1px 3px rgba(10, 10, 10, 0.03) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}
html body .hero .hero-discount-callout strong {
    color: #0d9488 !important;
    font-weight: 700 !important;
}
html body .hero .hero-discount-callout .hdc-bolt-pulse {
    color: #0d9488 !important;
    font-size: 12px !important;
}


/* ─── CTAs: REFINED ─── */
/* Primary: refined gradient (less harsh), refined shadow with
   directional light from upper-left. Secondary: equal typographic
   weight but quieter visual treatment. */
html body .hero .hero-cta {
    gap: 12px !important;
    margin: 0 0 32px 0 !important;
}
html body .hero .hero-cta .btn-primary.hero-cta-shop {
    background: linear-gradient(180deg, #14b8a6 0%, #0d9488 100%) !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 14px 26px !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    color: #ffffff !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.25) inset,
        0 2px 6px rgba(13, 148, 136, 0.24),
        0 8px 20px rgba(13, 148, 136, 0.22) !important;
}
html body .hero .hero-cta .btn-primary.hero-cta-shop:hover {
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.30) inset,
        0 3px 10px rgba(13, 148, 136, 0.32),
        0 12px 28px rgba(13, 148, 136, 0.28) !important;
    transform: translateY(-1.5px) !important;
}
/* Remove the rev54 attention pulse — it was visual noise */
html body .hero .hero-cta .btn-primary.hero-cta-shop::before {
    display: none !important;
}
html body .hero .hero-cta .btn-outline.hero-cta-coa {
    background: #ffffff !important;
    border: 1px solid rgba(10, 10, 10, 0.12) !important;
    border-radius: 10px !important;
    padding: 14px 22px !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    color: #0a0a0a !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.8) inset,
        0 2px 4px rgba(10, 10, 10, 0.03) !important;
}
html body .hero .hero-cta .btn-outline.hero-cta-coa:hover {
    border-color: rgba(13, 148, 136, 0.40) !important;
    color: #0d9488 !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.8) inset,
        0 4px 12px rgba(13, 148, 136, 0.12) !important;
    transform: translateY(-1.5px) !important;
}


/* ─── TRUST PILL: REFINED ─── */
/* Tighter padding, refined shadow (less heavy), refined divider
   style (gradient instead of solid line — feels more refined). */
html body .hero .hero-text .hero-trust-rule.hero-trust-inline {
    margin: 0 !important;
}
html body .hero .hero-text .hero-trust-rule.hero-trust-inline .trust-pill {
    background: linear-gradient(180deg, #ffffff 0%, #fcfcfa 100%) !important;
    border: 1px solid rgba(10, 10, 10, 0.06) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.8) inset,
        0 2px 6px rgba(10, 10, 10, 0.03),
        0 12px 28px rgba(10, 10, 10, 0.05) !important;
}
html body .hero .hero-text .hero-trust-rule.hero-trust-inline .trust-pill-item {
    padding: 12px 22px !important;
}
html body .hero .hero-text .hero-trust-rule.hero-trust-inline .trust-pill-item .tpi-icon {
    color: #0d9488 !important;
    font-size: 11px !important;
    margin-bottom: 6px !important;
    opacity: 0.85 !important;
}
html body .hero .hero-text .hero-trust-rule.hero-trust-inline .trust-pill-item .tpi-stat {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #0a0a0a !important;
    letter-spacing: -0.01em !important;
}
html body .hero .hero-text .hero-trust-rule.hero-trust-inline .trust-pill-item .tpi-label {
    font-size: 9px !important;
    font-weight: 600 !important;
    color: #6b6b73 !important;
    letter-spacing: 0.13em !important;
    margin-top: 4px !important;
}
/* Refined divider — gradient fade instead of flat line */
html body .hero .hero-text .hero-trust-rule.hero-trust-inline .trust-pill-divider {
    background: linear-gradient(180deg,
        rgba(10, 10, 10, 0) 0%,
        rgba(10, 10, 10, 0.10) 50%,
        rgba(10, 10, 10, 0) 100%) !important;
    margin: 14px 0 !important;
}


/* ─── VIAL PHOTOGRAPHY: REFINED DIRECTIONAL SHADOWS ─── */
/* All shadows now come from a consistent upper-left light source.
   This gives the visual column a sense of "light direction" — every
   vial casts shadow in the same way. */
html body .hero .hero-visual .hero-vial-link .hero-vial-main {
    filter:
        drop-shadow(-2px 4px 8px rgba(10, 10, 10, 0.10))
        drop-shadow(-4px 20px 32px rgba(10, 10, 10, 0.16))
        drop-shadow(-2px 36px 56px rgba(10, 10, 10, 0.18))
        contrast(1.05)
        saturate(1.06) !important;
}
html body .hero .hero-visual .hero-vial-link .hero-vial-secondary {
    filter:
        drop-shadow(-1px 3px 6px rgba(10, 10, 10, 0.08))
        drop-shadow(-3px 16px 24px rgba(10, 10, 10, 0.14))
        contrast(1.05)
        saturate(1.06) !important;
}


/* ─── PROMO BADGE: QUIETER + MORE REFINED ─── */
html body .hero .hero-promo-badge {
    width: 88px !important;
    height: 88px !important;
    background: linear-gradient(140deg, #14b8a6 0%, #0d9488 100%) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.20) inset,
        0 3px 10px rgba(13, 148, 136, 0.25),
        0 14px 28px rgba(13, 148, 136, 0.22) !important;
    /* Refined animation — softer, slower */
    animation: r153-promo-bob 5.5s ease-in-out infinite !important;
}
@keyframes r153-promo-bob {
    0%, 100% { transform: rotate(-7deg) translateY(0); }
    50%      { transform: rotate(-7deg) translateY(-3px); }
}
html body .hero .hero-promo-badge .hpb-num {
    font-size: 24px !important;
    font-weight: 800 !important;
}
html body .hero .hero-promo-badge .hpb-text {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    margin-bottom: 4px !important;
}
html body .hero .hero-promo-badge .hpb-sub {
    font-size: 8px !important;
    font-weight: 600 !important;
    letter-spacing: 0.10em !important;
    opacity: 0.92 !important;
}


/* ─── CURSOR PARALLAX: REDUCED ─── */
/* Was 14px X / 8px Y max — too much. Cut to 6px / 4px. */
html body .hero .hero-visual {
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
}


/* ─── SCROLL INDICATOR: REFINED ─── */
html body .hero .hero-scroll-indicator {
    bottom: 14px !important;
    font-size: 9px !important;
    letter-spacing: 0.24em !important;
    color: #6b6b73 !important;
    gap: 6px !important;
}
html body .hero .hero-scroll-indicator .hsi-line {
    height: 24px !important;
    background: rgba(10, 10, 10, 0.08) !important;
}


/* ─── KILL THE AMBIENT LIGHT DRIFT (rev54) ─── */
/* It was working against the new clean atmosphere. */
html body .hero::before {
    animation: none !important;
    display: none !important;
}


/* ═══════════════════════════════════════════════════════════
   END R153-rev55
   ═══════════════════════════════════════════════════════════ */


/* ╔══════════════════════════════════════════════════════════╗
   ║   R153-rev56 — SENIOR DESIGNER REMODEL                   ║
   ║   ── deep system pass, every element re-judged ──        ║
   ╚══════════════════════════════════════════════════════════╝

   This rev does NOT add patches. It re-evaluates every element
   of the hero against a unified design system and makes
   precision adjustments. Reasoning lives inline.

   ──  DESIGN SYSTEM  ──────────────────────────────────────────

   SPACING (8px scale) — every gap is a multiple:
       4 / 8 / 16 / 24 / 32 / 48 / 64

   TYPE SCALE (ratio ~1.6):
       Display    100px / 900   "Modern Research." (hero word)
       Title-2     60px / 700   "Premium Peptides." (preface)
       Body lead   16px / 500   subheadline facts
       Body        16px / 400i  subheadline brand-voice (italic)
       Stat        15px / 700   trust pill numbers
       Caption     13px / 500   rating text, CTA tertiary
       Micro        9px / 600   trust pill labels (tracked)
       Label       11px / 700   eyebrow lockups (tracked)

   COLOR HIERARCHY (text):
       primary    #0a0a0a   H1, key stats
       secondary  #1a1a1a   body lead, CTA labels
       tertiary   #4a4a52   subheads, captions
       muted      #6b6b73   microcopy, dividers
       teal       #0d9488   accent (links, key states)
       teal-soft  #14b8a6   gradient stop, hover

   SHADOW LADDER — single light source from UPPER-LEFT at ~45°.
   Means: every shadow offset is POSITIVE x (rightward) and
   POSITIVE y (downward). Catches eye consistently.
       sm   0 1px 2px rgba(10,10,10,0.04)
       md   0 2px 6px rgba(10,10,10,0.05), 0 10px 24px rgba(10,10,10,0.07)
       lg   0 4px 12px rgba(10,10,10,0.06), 0 16px 36px rgba(10,10,10,0.10)
       hero 0 6px 14px rgba(10,10,10,0.12), 0 30px 60px rgba(10,10,10,0.18)

   MOTION TOKENS:
       fast    .18s cubic-bezier(.4,0,.2,1)    hover micro
       med     .32s cubic-bezier(.4,0,.2,1)    button rise
       slow    .8s  cubic-bezier(.16,1,.3,1)   parallax settle

   ──────────────────────────────────────────────────────────── */


/* ─── 1. BACKGROUND ATMOSPHERE ───────────────────────────────
   PROBLEM (rev55): the teal halo stretched 580px tall — felt
   like a vertical streak. The light direction was implicit only
   via vial shadow filters.
   FIX: tighten the halo to read as a focused "stage light" on
   the vial cluster (260x420 vs 240x580). Add a faint upper-left
   bloom to ESTABLISH the light source — so every shadow in the
   hero has a referenceable origin. Soften paper-dot pattern.   */
html body .hero {
    background:
        /* Upper-left light bloom — declares where the light is coming from.
           Very low opacity (2%) so it reads as ambient, not a shape. */
        radial-gradient(ellipse 720px 540px at 12% 6%,
            rgba(255, 251, 242, 0.55) 0%,
            rgba(255, 251, 242, 0) 70%),
        /* Stage halo behind the vial cluster — tighter, slightly warmer */
        radial-gradient(ellipse 260px 420px at calc(100% - 240px) 58%,
            rgba(20, 184, 166, 0.13) 0%,
            rgba(20, 184, 166, 0.05) 42%,
            rgba(20, 184, 166, 0) 72%),
        /* Vertical cream settling */
        linear-gradient(180deg, #fafafa 0%, #fafafa 55%, #f5f1ea 100%),
        /* Paper-grain dots — softened 28→32px grid, alpha 0.04→0.022 */
        radial-gradient(circle at center, rgba(10, 10, 10, 0.022) 1px, transparent 1px) 0 0 / 32px 32px,
        #fafafa !important;
}


/* ─── 2. HERO LAYOUT — RHYTHM ─────────────────────────────────
   PROBLEM (rev55): text column gaps were 24/28/24/0/32 — not
   pure 8px multiples; reads jittery.
   FIX: lock every gap to the 8-scale. Text column gets uniform
   24px rhythm with one 32px "section break" before the trust
   pill — the trust pill is the "closer," it earns the extra
   breathing room.                                              */
html body .hero .hero-content.hero-split {
    align-items: center !important;
    /* Slight left bias on text column (more visual weight in copy);
       keeps the visual column from feeling cramped. */
    column-gap: 56px !important;
}
html body .hero .hero-text {
    max-width: 600px !important;
    /* Text column uses subtle padding-left ONLY to align with the
       subhead's border-left rule visually. */
    padding-left: 0 !important;
}


/* ─── 3. TYPOGRAPHY — DRAMATIZE THE HIERARCHY ────────────────
   PROBLEM (rev55): line 1 (60px) and line 2 (100px) is fine
   ratio-wise, but the line 1 tracking felt too tight at -0.028em,
   making it dense. Line 2 needed even tighter tracking at
   display scale.
   FIX:
   • Line 1: lighten tracking slightly (-0.022em), keep weight.
   • Line 2: pull tracking even tighter (-0.036em) — display
     type wants negative space pulled out. Slightly increase
     visual weight via a refined text-shadow (0.5px green
     undertone for depth, not glow).
   • Replace the wispy underline with a confident 3px teal bar
     that reads as a Swiss editorial accent.                    */
html body .hero .hero-title {
    margin: 0 0 24px 0 !important;
    line-height: 1.0 !important;
}
html body .hero .hero-title .hero-title-line {
    font-size: clamp(38px, 4.4vw, 58px) !important;
    font-weight: 700 !important;
    letter-spacing: -0.022em !important;
    color: #0a0a0a !important;
    line-height: 1.0 !important;
    margin-bottom: 6px !important;
    /* Subtle directional shadow — light from upper-left means
       text catches a hair of warmth on top edge. */
    text-shadow: 0 1px 0 rgba(255, 251, 242, 0.6) !important;
}
html body .hero .hero-title .hero-title-accent {
    /* R153-rev60: was clamp(60, 7.2vw, 98) — hidden culprit.
       R153-rev63: bumped a touch — 44/5.4vw/74 → 50/6vw/82.
       R153-rev67: another small bump — 50/6vw/82 → 54/6.4vw/88. */
    font-size: clamp(54px, 6.4vw, 88px) !important;
    font-weight: 900 !important;
    letter-spacing: -0.036em !important;
    color: #0d9488 !important;
    line-height: 1.0 !important;
    /* Refined depth — two-stop subtle shadow simulating slight
       ink density without becoming a "glow." */
    text-shadow:
        0 1px 0 rgba(13, 148, 136, 0.06),
        0 2px 6px rgba(13, 148, 136, 0.08) !important;
}
/* Underline accent — confident 3px bar, anchored to text width.
   Tapered at the ends so it doesn't read as a rectangle. */
html body .hero .hero-title .hero-title-accent::after {
    content: "" !important;
    height: 3px !important;
    bottom: -10px !important;
    left: 0 !important;
    width: 100% !important;
    background: linear-gradient(90deg,
        rgba(13, 148, 136, 0) 0%,
        rgba(13, 148, 136, 0.85) 8%,
        rgba(13, 148, 136, 0.85) 92%,
        rgba(13, 148, 136, 0) 100%) !important;
    border-radius: 2px !important;
    /* Subtle directional drop — tiny shadow under the bar
       reinforces light-from-above. */
    box-shadow: 0 1px 2px rgba(13, 148, 136, 0.12) !important;
}


/* ─── 4. RATING CHIP — ADD DIMENSION ─────────────────────────
   PROBLEM (rev55): pill reads flat — pure white with a 2px soft
   shadow doesn't sell "premium pill."
   FIX:
   • Subtle inner gradient (top 40% brighter, bottom warmer).
   • Refined directional shadow ladder (md token).
   • Pad on 8-scale (8/16).
   • Stars: bump to 12px (still subtle, more readable).
   • Hover: confident teal border + slight rise.                */
html body .hero .hero-rating {
    margin: 0 !important;
    padding: 8px 16px 8px 14px !important;
    background:
        linear-gradient(180deg, #ffffff 0%, #fbfaf6 100%) !important;
    border: 1px solid rgba(10, 10, 10, 0.07) !important;
    border-radius: 999px !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 1px 2px rgba(10, 10, 10, 0.04),
        0 6px 16px rgba(10, 10, 10, 0.05) !important;
    transition: transform .18s cubic-bezier(.4,0,.2,1),
                box-shadow .18s cubic-bezier(.4,0,.2,1),
                border-color .18s cubic-bezier(.4,0,.2,1) !important;
}
html body .hero .hero-rating:hover {
    transform: translateY(-1px) !important;
    border-color: rgba(13, 148, 136, 0.35) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 2px 4px rgba(10, 10, 10, 0.04),
        0 8px 22px rgba(13, 148, 136, 0.14) !important;
}
html body .hero .hero-rating-stars {
    font-size: 12px !important;
    color: #f59e0b !important;
    letter-spacing: 0.5px !important;
}
html body .hero .hero-rating-text {
    font-size: 13.5px !important;
    color: #4a4a52 !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
}
html body .hero .hero-rating-text strong {
    color: #0a0a0a !important;
    font-weight: 700 !important;
}
html body .hero .hero-rating-arrow {
    color: #6b6b73 !important;
    font-size: 10px !important;
    transition: transform .18s cubic-bezier(.4,0,.2,1),
                color .18s cubic-bezier(.4,0,.2,1) !important;
}
html body .hero .hero-rating:hover .hero-rating-arrow {
    color: #0d9488 !important;
    transform: translateX(2px) !important;
}


/* ─── 5. SUBHEADLINE — TIGHTEN EDITORIAL VOICE ───────────────
   PROBLEM (rev55): 17px italic with a 1.5px teal hairline.
   The hairline was so thin it looked accidental. Italic body +
   roman .hsh-cont section worked but the weight contrast was
   subtle.
   FIX:
   • Bump border-left from 1.5px → 2.5px (confident, not thin).
   • Slightly tighter padding-left (14px not 16px).
   • Tighten line-height (1.55 → 1.5).
   • Strengthen contrast on .hsh-cont — weight 500→550 via
     letter-spacing relax + color hold at #1a1a1a.              */
html body .hero .hero-subheadline {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    font-style: italic !important;
    line-height: 1.5 !important;
    letter-spacing: 0 !important;
    color: #4a4a52 !important;
    margin: 24px 0 24px 0 !important;
    max-width: 480px !important;
    padding-left: 14px !important;
    border-left: 2.5px solid #0d9488 !important;
}
html body .hero .hero-subheadline .hsh-cont {
    display: inline !important;
    font-style: normal !important;
    font-weight: 500 !important;
    color: #1a1a1a !important;
    letter-spacing: -0.002em !important;
}


/* ─── 6. LAUNCH CALLOUT — REFINE GLASS TREATMENT ─────────────
   PROBLEM (rev55): 8px corners + 0.7 alpha white. Reading OK
   but the LEFT-border at 2px was thin compared to the new 2.5px
   subhead border above it — broke visual rhythm.
   FIX:
   • Match the subhead's 2.5px teal accent for vertical
     consistency.
   • Bump alpha 0.7 → 0.78 (more present against cream).
   • Tighten corners 8 → 6px (subtler, more refined).
   • Margin on 8-scale: 24/24.                                  */
html body .hero .hero-discount-callout {
    background: rgba(255, 255, 255, 0.78) !important;
    border: 1px solid rgba(13, 148, 136, 0.20) !important;
    border-left: 2.5px solid #0d9488 !important;
    border-radius: 6px !important;
    padding: 10px 14px !important;
    margin: 0 0 24px 0 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #1a1a1a !important;
    letter-spacing: 0 !important;
    box-shadow:
        0 1px 2px rgba(10, 10, 10, 0.03),
        0 4px 12px rgba(10, 10, 10, 0.04) !important;
    backdrop-filter: blur(10px) saturate(1.05) !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.05) !important;
}
html body .hero .hero-discount-callout strong {
    color: #0d9488 !important;
    font-weight: 700 !important;
}
html body .hero .hero-discount-callout .hdc-bolt-pulse {
    color: #0d9488 !important;
    font-size: 12px !important;
}


/* ─── 7. CTAs — BALANCE VISUAL WEIGHT ─────────────────────────
   PROBLEM (rev55): primary had a heavy 8px/20px shadow stack;
   outline had only a 4px shadow + thin (0.12 alpha) border.
   Asymmetric — outline read as floaty / forgettable.
   FIX:
   • Primary: keep gradient, but TUNE shadows to directional
     (light from upper-left → shadow offset down+right). Add
     subtle bottom highlight (false specular under top edge).
   • Outline: thicker border 1.5px @ 0.14 alpha, subtle inner
     vertical gradient (white → cream-tint at bottom) so it
     doesn't read as flat sheet. Equal vertical padding.
   • Both: identical motion token (.32s med), identical -2px
     hover translate.                                           */
html body .hero .hero-cta {
    gap: 12px !important;
    margin: 0 0 32px 0 !important;
}
html body .hero .hero-cta .btn-primary.hero-cta-shop {
    background: linear-gradient(180deg, #17c0ad 0%, #0d9488 100%) !important;
    border: 1px solid rgba(13, 148, 136, 0.6) !important;
    border-radius: 10px !important;
    padding: 13px 24px !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    color: #ffffff !important;
    /* Directional shadow — light from upper-left = shadow falls
       to lower-right. Removed symmetric horizontal spread. */
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.28) inset,
        0 -1px 0 rgba(13, 148, 136, 0.35) inset,
        2px 3px 6px rgba(13, 148, 136, 0.22),
        4px 10px 22px rgba(13, 148, 136, 0.20) !important;
    transition: transform .32s cubic-bezier(.4,0,.2,1),
                box-shadow .32s cubic-bezier(.4,0,.2,1) !important;
}
html body .hero .hero-cta .btn-primary.hero-cta-shop:hover {
    transform: translateY(-2px) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.32) inset,
        0 -1px 0 rgba(13, 148, 136, 0.4) inset,
        2px 4px 10px rgba(13, 148, 136, 0.28),
        4px 14px 32px rgba(13, 148, 136, 0.24) !important;
}
html body .hero .hero-cta .btn-primary.hero-cta-shop::before {
    display: none !important;
}
html body .hero .hero-cta .btn-outline.hero-cta-coa {
    background: linear-gradient(180deg, #ffffff 0%, #fbfaf6 100%) !important;
    border: 1.5px solid rgba(10, 10, 10, 0.14) !important;
    border-radius: 10px !important;
    padding: 12.5px 22px !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    color: #0a0a0a !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        1px 2px 4px rgba(10, 10, 10, 0.03),
        2px 6px 14px rgba(10, 10, 10, 0.05) !important;
    transition: transform .32s cubic-bezier(.4,0,.2,1),
                box-shadow .32s cubic-bezier(.4,0,.2,1),
                border-color .32s cubic-bezier(.4,0,.2,1),
                color .32s cubic-bezier(.4,0,.2,1) !important;
}
html body .hero .hero-cta .btn-outline.hero-cta-coa:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(13, 148, 136, 0.45) !important;
    color: #0d9488 !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        1px 2px 6px rgba(13, 148, 136, 0.10),
        2px 8px 20px rgba(13, 148, 136, 0.14) !important;
}
html body .hero .hero-cta .btn-outline.hero-cta-coa .hero-cta-coa-icon {
    color: #0d9488 !important;
}


/* ─── 8. TRUST PILL — PREMIUM POLISH ──────────────────────────
   PROBLEM (rev55): icons 11px (tiny, decorative dots), pill
   read as functional bar — not premium.
   FIX:
   • Icon size 11 → 13px. Saturate teal at full color.
   • Refined inner gradient (top brighter 0→30%, bottom warmer).
   • Tighter divider treatment (gradient stops earlier).
   • Per-item hover: gentle teal tint on bg + icon scale 1.0→1.08.
   • Spacing on 8-scale: 14/22 padding internal.                */
html body .hero .hero-text .hero-trust-rule.hero-trust-inline {
    margin: 0 !important;
}
html body .hero .hero-text .hero-trust-rule.hero-trust-inline .trust-pill {
    background: linear-gradient(180deg, #ffffff 0%, #fcfaf5 100%) !important;
    border: 1px solid rgba(10, 10, 10, 0.07) !important;
    border-radius: 14px !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 1px 3px rgba(10, 10, 10, 0.03),
        2px 8px 22px rgba(10, 10, 10, 0.06),
        4px 18px 40px rgba(10, 10, 10, 0.05) !important;
    /* Tighter overall sizing — denser, more "instrument panel" */
    padding: 0 !important;
}
html body .hero .hero-text .hero-trust-rule.hero-trust-inline .trust-pill-item {
    padding: 14px 22px !important;
    transition: background-color .18s cubic-bezier(.4,0,.2,1) !important;
    border-radius: 12px !important;
}
html body .hero .hero-text .hero-trust-rule.hero-trust-inline .trust-pill-item:hover {
    background-color: rgba(20, 184, 166, 0.04) !important;
}
html body .hero .hero-text .hero-trust-rule.hero-trust-inline .trust-pill-item .tpi-icon {
    color: #0d9488 !important;
    font-size: 13px !important;
    margin-bottom: 6px !important;
    opacity: 0.92 !important;
    transition: transform .18s cubic-bezier(.4,0,.2,1) !important;
    display: block !important;
}
html body .hero .hero-text .hero-trust-rule.hero-trust-inline .trust-pill-item:hover .tpi-icon {
    transform: scale(1.10) !important;
}
html body .hero .hero-text .hero-trust-rule.hero-trust-inline .trust-pill-item .tpi-stat {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #0a0a0a !important;
    letter-spacing: -0.012em !important;
    line-height: 1.1 !important;
}
html body .hero .hero-text .hero-trust-rule.hero-trust-inline .trust-pill-item .tpi-label {
    font-size: 9px !important;
    font-weight: 600 !important;
    color: #6b6b73 !important;
    letter-spacing: 0.135em !important;
    margin-top: 5px !important;
    text-transform: uppercase !important;
}
/* Divider — refined gradient, taller fade range, thinner core */
html body .hero .hero-text .hero-trust-rule.hero-trust-inline .trust-pill-divider {
    width: 1px !important;
    height: 36px !important;
    background: linear-gradient(180deg,
        rgba(10, 10, 10, 0) 0%,
        rgba(10, 10, 10, 0.12) 50%,
        rgba(10, 10, 10, 0) 100%) !important;
    margin: 0 !important;
    align-self: center !important;
}


/* ─── 9. VIAL PHOTOGRAPHY — DIRECTIONAL LIGHTING ─────────────
   PROBLEM (rev55): drop-shadows used NEGATIVE x offset (-2, -4)
   — light from upper-RIGHT. But our background bloom puts light
   at UPPER-LEFT (12% / 6%). Inconsistent.
   FIX:
   • Flip shadow x offsets to POSITIVE (light from upper-left
     → shadow falls lower-right).
   • Add a tiny inverse-offset white drop-shadow simulating a
     subtle upper-left RIM highlight on the vial silhouette.
   • Bump contrast 1.05 → 1.06 + saturate 1.06 → 1.10 (vials
     pop slightly more against cream without losing the
     editorial mood).                                           */
html body .hero .hero-visual .hero-vial-link .hero-vial-main {
    filter:
        drop-shadow(1px -1px 0 rgba(255, 251, 242, 0.5))
        drop-shadow(2px 5px 8px rgba(10, 10, 10, 0.10))
        drop-shadow(4px 20px 32px rgba(10, 10, 10, 0.15))
        drop-shadow(3px 38px 60px rgba(10, 10, 10, 0.18))
        contrast(1.06)
        saturate(1.10) !important;
}
html body .hero .hero-visual .hero-vial-link .hero-vial-secondary {
    filter:
        drop-shadow(1px -1px 0 rgba(255, 251, 242, 0.45))
        drop-shadow(1px 4px 6px rgba(10, 10, 10, 0.08))
        drop-shadow(3px 18px 28px rgba(10, 10, 10, 0.14))
        contrast(1.06)
        saturate(1.10) !important;
}
/* Ground ellipses — refine to a more elliptical, softer puddle */
html body .hero .hero-visual .vial-ground {
    filter: blur(8px) !important;
    opacity: 0.75 !important;
}
html body .hero .hero-visual .vial-ground-main {
    height: 18px !important;
    background: radial-gradient(ellipse at center,
        rgba(10, 10, 10, 0.22) 0%,
        rgba(10, 10, 10, 0.10) 50%,
        rgba(10, 10, 10, 0) 80%) !important;
}
html body .hero .hero-visual .vial-ground-mots,
html body .hero .hero-visual .vial-ground-bpc {
    height: 12px !important;
    background: radial-gradient(ellipse at center,
        rgba(10, 10, 10, 0.18) 0%,
        rgba(10, 10, 10, 0.08) 50%,
        rgba(10, 10, 10, 0) 80%) !important;
}


/* ─── 10. PROMO BADGE — QUIETER AUTHORITY ────────────────────
   PROBLEM (rev55): 88px competing with vials, shadow stack
   symmetric.
   FIX:
   • Trim 88 → 82px (lets vials dominate).
   • Directional shadow (positive x offset = lower-right fall).
   • Slower, gentler bob.                                       */
html body .hero .hero-promo-badge {
    width: 82px !important;
    height: 82px !important;
    background: linear-gradient(140deg, #17c0ad 0%, #0d9488 100%) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.22) inset,
        0 -1px 0 rgba(13, 148, 136, 0.4) inset,
        2px 3px 10px rgba(13, 148, 136, 0.25),
        4px 14px 28px rgba(13, 148, 136, 0.22) !important;
    animation: r153rev56-promo-bob 6.5s ease-in-out infinite !important;
    border: 1px solid rgba(13, 148, 136, 0.5) !important;
}
@keyframes r153rev56-promo-bob {
    0%, 100% { transform: rotate(-7deg) translateY(0); }
    50%      { transform: rotate(-7deg) translateY(-2.5px); }
}
html body .hero .hero-promo-badge .hpb-num {
    font-size: 23px !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
}
html body .hero .hero-promo-badge .hpb-text {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.20em !important;
    margin-bottom: 3px !important;
}
html body .hero .hero-promo-badge .hpb-sub {
    font-size: 7.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em !important;
    opacity: 0.90 !important;
}


/* ─── 11. SCROLL INDICATOR — UNCHANGED, JUST TOKEN-ALIGNED ──── */
html body .hero .hero-scroll-indicator {
    bottom: 16px !important;
    font-size: 9px !important;
    letter-spacing: 0.24em !important;
    color: #6b6b73 !important;
    gap: 6px !important;
}
html body .hero .hero-scroll-indicator .hsi-line {
    height: 24px !important;
    background: rgba(10, 10, 10, 0.08) !important;
}


/* ─── 12. KILL ARTIFACTS FROM PRIOR REVS ───────────────────── */
/* The rev54 ambient light ::before was already disabled in 55 —
   keep it dead. */
html body .hero::before {
    animation: none !important;
    display: none !important;
}


/* ─── 13. MOBILE — RESPECT THE SYSTEM ─────────────────────────
   Trust pill becomes wrap-friendly; subhead drops border-left
   on very small screens; typography scales down via clamp().   */
@media (max-width: 768px) {
    /* Safety: constrain text column to its parent on mobile.
       Pre-existing grid-template-columns from older rev can spill
       child width past viewport on small screens. */
    html body .hero .hero-content.hero-split {
        grid-template-columns: minmax(0, 1fr) !important;
        column-gap: 0 !important;
    }
    html body .hero .hero-text {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    html body .hero .hero-title .hero-title-line {
        letter-spacing: -0.018em !important;
    }
    html body .hero .hero-title .hero-title-accent {
        letter-spacing: -0.028em !important;
    }
    html body .hero .hero-subheadline {
        max-width: 100% !important;
        padding-left: 12px !important;
        border-left-width: 2px !important;
    }
    html body .hero .hero-promo-badge {
        width: 72px !important;
        height: 72px !important;
    }
    html body .hero .hero-promo-badge .hpb-num {
        font-size: 20px !important;
    }
    html body .hero .hero-promo-badge .hpb-text {
        font-size: 9.5px !important;
    }
    html body .hero .hero-promo-badge .hpb-sub {
        font-size: 7px !important;
    }
}


/* ═══════════════════════════════════════════════════════════
   END R153-rev56
   ═══════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   R153-rev57 — H1 scale down + extra hero bottom space
   ═══════════════════════════════════════════════════════════
   1. "Modern Research." font-size dropped ~8% (done above in
      the rev56 block via in-place edit).
   2. Hero min-height + padding-bottom bumped so the next
      section's spectrum-divider bars don't peek above the
      fold on standard viewports.
   ═══════════════════════════════════════════════════════════ */

html body .hero {
    /* rev57: 40→88px bottom, 680→760 min-h.
       rev58: another bump — 88→128px bottom, 760→820 min-h. */
    padding: 56px 24px 128px !important;
    min-height: 820px !important;
}
@media (max-width: 768px) {
    html body .hero {
        padding: 32px 20px 88px !important;
        min-height: auto !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   END R153-rev57
   ═══════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   R153-rev59 — POLISH PASS
   ═══════════════════════════════════════════════════════════
   1. "Modern Research." font cut harder (rev58 → rev59 in the
      block above).
   2. Sub-headline reworked as a soft card with proper visual
      treatment — was just a hairline border, now reads as a
      proper editorial pull-quote.
   3. Launch-callout bolt: restore the pulse animation that
      existed in earlier revs.
   4. Browse Catalog: dramatically upgrade visual appeal —
      richer gradient, animated sheen sweep, refined hover.
   ═══════════════════════════════════════════════════════════ */


/* ─── SUB-HEADLINE: PROPER PULL-QUOTE TREATMENT ─── */
/* Was: italic + 1.5–2.5px teal hairline. Felt thin and
   inconsequential against the rest of the hero.
   Now: soft cream card with stronger teal left accent,
   refined typography, proper presence. */
html body .hero .hero-subheadline {
    background: linear-gradient(135deg,
        rgba(20, 184, 166, 0.04) 0%,
        rgba(255, 255, 255, 0.6) 100%) !important;
    border: 1px solid rgba(13, 148, 136, 0.12) !important;
    border-left: 3px solid #0d9488 !important;
    border-radius: 8px !important;
    padding: 14px 18px 14px 20px !important;
    margin: 24px 0 24px 0 !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
    font-style: italic !important;
    font-weight: 400 !important;
    color: #2a2a2a !important;
    max-width: 520px !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.8) inset,
        0 2px 8px rgba(13, 148, 136, 0.05),
        0 8px 20px rgba(13, 148, 136, 0.04) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    position: relative !important;
}
/* Pull-quote opener glyph — subtle teal accent dash before the text */
html body .hero .hero-subheadline::before {
    content: '' !important;
    position: absolute !important;
    left: 20px !important;
    top: -6px !important;
    width: 28px !important;
    height: 1.5px !important;
    background: linear-gradient(90deg, #0d9488 0%, rgba(13, 148, 136, 0) 100%) !important;
}
html body .hero .hero-subheadline .hsh-cont {
    display: inline !important;
    font-style: normal !important;
    font-weight: 500 !important;
    color: #0a0a0a !important;
}


/* ─── LAUNCH CALLOUT: BOLT PULSE RESTORED ─── */
html body .hero .hero-discount-callout .hdc-bolt-pulse {
    animation: r153-bolt-pulse-v59 1.8s ease-in-out infinite !important;
    transform-origin: center center !important;
    color: #0d9488 !important;
    font-size: 13px !important;
}
@keyframes r153-bolt-pulse-v59 {
    0%, 100% {
        transform: scale(1);
        color: #0d9488;
        text-shadow: 0 0 0 rgba(13, 148, 136, 0);
    }
    50% {
        transform: scale(1.25);
        color: #14b8a6;
        text-shadow: 0 0 12px rgba(20, 184, 166, 0.55);
    }
}
@media (prefers-reduced-motion: reduce) {
    html body .hero .hero-discount-callout .hdc-bolt-pulse {
        animation: none !important;
    }
}


/* ─── BROWSE CATALOG: DRAMATICALLY UPGRADED ─── */
/* Was: simple gradient + shadow. Now: richer multi-stop
   gradient, internal highlight, animated sheen sweep,
   refined hover with deeper presence. */
html body .hero .hero-cta .btn-primary.hero-cta-shop {
    background: linear-gradient(180deg,
        #16c5b1 0%,
        #14b8a6 35%,
        #0d9488 100%) !important;
    border: none !important;
    border-radius: 11px !important;
    padding: 15px 28px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    color: #ffffff !important;
    position: relative !important;
    overflow: hidden !important;
    /* Layered shadow: directional from upper-left + teal glow */
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.32) inset,
        0 -1px 0 rgba(0, 0, 0, 0.08) inset,
        0 2px 5px rgba(13, 148, 136, 0.28),
        0 8px 18px rgba(13, 148, 136, 0.30),
        0 16px 36px rgba(13, 148, 136, 0.22) !important;
    transition:
        transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
html body .hero .hero-cta .btn-primary.hero-cta-shop:hover {
    transform: translateY(-2.5px) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.40) inset,
        0 -1px 0 rgba(0, 0, 0, 0.08) inset,
        0 3px 8px rgba(13, 148, 136, 0.36),
        0 14px 28px rgba(13, 148, 136, 0.38),
        0 24px 48px rgba(13, 148, 136, 0.28) !important;
}
/* Animated sheen — diagonal light sweep across the button every 4s.
   Adds the "premium liquid metal" feel without being garish. */
html body .hero .hero-cta .btn-primary.hero-cta-shop::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -120% !important;
    width: 65% !important;
    height: 100% !important;
    background: linear-gradient(105deg,
        transparent 0%,
        rgba(255, 255, 255, 0) 25%,
        rgba(255, 255, 255, 0.32) 50%,
        rgba(255, 255, 255, 0) 75%,
        transparent 100%) !important;
    transform: skewX(-18deg) !important;
    animation: r153-cta-sheen 4.5s ease-in-out 1.8s infinite !important;
    pointer-events: none !important;
}
@keyframes r153-cta-sheen {
    0%   { left: -120%; }
    18%, 100% { left: 200%; }
}
@media (prefers-reduced-motion: reduce) {
    html body .hero .hero-cta .btn-primary.hero-cta-shop::after {
        animation: none !important;
        display: none !important;
    }
}
/* Icon + arrow refinements inside the button */
html body .hero .hero-cta .btn-primary.hero-cta-shop .hero-cta-icon {
    font-size: 14px !important;
    opacity: 0.96 !important;
    margin-right: 2px !important;
}
html body .hero .hero-cta .btn-primary.hero-cta-shop .hero-cta-arrow {
    font-size: 12.5px !important;
    margin-left: 4px !important;
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
html body .hero .hero-cta .btn-primary.hero-cta-shop:hover .hero-cta-arrow {
    transform: translateX(6px) !important;
}

/* ═══════════════════════════════════════════════════════════
   END R153-rev59
   ═══════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   R153-rev60 — SUBHEAD DEBOX + REAL FONT FIX
   ═══════════════════════════════════════════════════════════
   1. The "Modern Research." font-size fix isn't here — it was
      applied IN-PLACE to the rev56 rule that was hiding the
      reductions (clamp 60/7.2vw/98 was the winning declaration
      because it was the latest in source order; everything I
      edited earlier was being overridden).
   2. Subhead loses the box/card treatment — clean text only.
      Brand-voice "Built by researchers..." removed from HTML.
   ═══════════════════════════════════════════════════════════ */

html body .hero .hero-subheadline {
    background: none !important;
    border: none !important;
    border-left: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    font-style: normal !important;
    font-weight: 500 !important;
    /* R153-rev64: bumped 18 → 19.5 per owner ("font a tad bigger") */
    font-size: 19.5px !important;
    line-height: 1.5 !important;
    color: #1a1a1a !important;
    margin: 22px 0 26px 0 !important;
    max-width: 580px !important;
}
html body .hero .hero-subheadline::before {
    display: none !important;
    content: none !important;
}
html body .hero .hero-subheadline .hsh-cont {
    display: inline !important;
    font-style: normal !important;
    font-weight: 700 !important;
    color: #0a0a0a !important;
}

/* ═══════════════════════════════════════════════════════════
   END R153-rev60
   ═══════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   R153-rev61 — BROWSE CATALOG: STANDOUT
   ═══════════════════════════════════════════════════════════
   Goal: button needs to dominate the CTAs row without changing
   color (teal-locked). Strategy:

     1. RICHER GRADIENT — brighter top, deeper bottom = more
        vertical depth, more pop
     2. LARGER SHADOW — bigger teal halo so it "floats" off cream
     3. STRONGER INNER HIGHLIGHT — top inset white line is more
        visible (suggests rim light)
     4. SLIGHTLY LARGER — bump font + padding for presence
     5. ATTENTION PULSE — soft teal ring expands outward every
        4s (visible-but-restrained attention cue)

   The sheen animation from rev59 stays. The cumulative effect
   reads as "this button has weight."
   ═══════════════════════════════════════════════════════════ */

html body .hero .hero-cta .btn-primary.hero-cta-shop {
    /* Richer 4-stop gradient — brighter top, deeper bottom */
    background: linear-gradient(180deg,
        #2dd4bf 0%,
        #14b8a6 30%,
        #0d9488 70%,
        #0a766f 100%) !important;
    /* Larger touch target */
    padding: 17px 32px !important;
    font-size: 15.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.015em !important;
    border-radius: 12px !important;
    /* DRAMATIC layered shadow with strong teal halo */
    box-shadow:
        0 1.5px 0 rgba(255, 255, 255, 0.42) inset,
        0 -1.5px 0 rgba(0, 0, 0, 0.12) inset,
        0 2px 4px rgba(13, 148, 136, 0.30),
        0 6px 14px rgba(13, 148, 136, 0.34),
        0 14px 28px rgba(13, 148, 136, 0.32),
        0 24px 48px rgba(13, 148, 136, 0.22) !important;
    position: relative !important;
}
html body .hero .hero-cta .btn-primary.hero-cta-shop:hover {
    transform: translateY(-3px) !important;
    box-shadow:
        0 1.5px 0 rgba(255, 255, 255, 0.50) inset,
        0 -1.5px 0 rgba(0, 0, 0, 0.12) inset,
        0 3px 6px rgba(13, 148, 136, 0.38),
        0 10px 22px rgba(13, 148, 136, 0.42),
        0 20px 40px rgba(13, 148, 136, 0.38),
        0 34px 64px rgba(13, 148, 136, 0.30) !important;
}

/* Attention pulse — soft expanding teal ring every 4s.
   Restrained enough to not feel salesy, present enough to draw
   the eye on first scan. */
html body .hero .hero-cta .btn-primary.hero-cta-shop::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: 12px !important;
    border: 2px solid rgba(20, 184, 166, 0.55) !important;
    pointer-events: none !important;
    opacity: 0 !important;
    transform: scale(1) !important;
    animation: r153-cta-pulse-v61 4.5s ease-out 2.2s infinite !important;
    z-index: -1 !important;
}
@keyframes r153-cta-pulse-v61 {
    0%   { opacity: 0;   transform: scale(1);     }
    8%   { opacity: 0.6; transform: scale(1);     }
    35%  { opacity: 0;   transform: scale(1.10);  }
    100% { opacity: 0;   transform: scale(1.10);  }
}

/* Slightly larger icon + arrow for visual punch */
html body .hero .hero-cta .btn-primary.hero-cta-shop .hero-cta-icon {
    font-size: 15px !important;
    opacity: 1 !important;
}
html body .hero .hero-cta .btn-primary.hero-cta-shop .hero-cta-arrow {
    font-size: 13px !important;
    margin-left: 6px !important;
}

@media (prefers-reduced-motion: reduce) {
    html body .hero .hero-cta .btn-primary.hero-cta-shop::before {
        animation: none !important;
        display: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   END R153-rev61
   ═══════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   R153-rev62 — KILL CTA TEAL + RELOCATE TRUST PILL BOTTOM
   ═══════════════════════════════════════════════════════════
   1. Browse Catalog: NEUTRAL black instead of teal gradient.
      Owner wanted the teal hue gone. Black-on-cream is the
      classic premium DTC contrast move (Hims, Glossier, AG1).
   2. Trust pill moved from inside .hero-text → bottom of
      .hero (.hero-trust-bottom). Spans full container width
      with items distributed equally via flex.
   ═══════════════════════════════════════════════════════════ */


/* ─── BROWSE CATALOG: TEAL GRADIENT BACK, BUT NEUTRAL SHADOW ─── */
/* R153-rev63: owner clarified — they wanted the teal GLOW HALO
   removed, not the teal button color. Reverted to teal gradient.
   Shadows now neutral black (no colored halo). */
html body .hero .hero-cta .btn-primary.hero-cta-shop {
    background: linear-gradient(180deg,
        #2dd4bf 0%,
        #14b8a6 30%,
        #0d9488 70%,
        #0a766f 100%) !important;
    border: none !important;
    color: #ffffff !important;
    /* Neutral black shadow ladder — no teal halo */
    box-shadow:
        0 1.5px 0 rgba(255, 255, 255, 0.42) inset,
        0 -1.5px 0 rgba(0, 0, 0, 0.12) inset,
        0 2px 4px rgba(10, 10, 10, 0.10),
        0 6px 14px rgba(10, 10, 10, 0.10),
        0 14px 28px rgba(10, 10, 10, 0.08) !important;
}
html body .hero .hero-cta .btn-primary.hero-cta-shop:hover {
    background: linear-gradient(180deg,
        #14b8a6 0%,
        #0d9488 50%,
        #0a766f 100%) !important;
    box-shadow:
        0 1.5px 0 rgba(255, 255, 255, 0.50) inset,
        0 -1.5px 0 rgba(0, 0, 0, 0.12) inset,
        0 3px 6px rgba(10, 10, 10, 0.14),
        0 10px 22px rgba(10, 10, 10, 0.14),
        0 20px 40px rgba(10, 10, 10, 0.12) !important;
}
/* Pulse ring back to subtle teal (light brand cue) but at lower alpha */
html body .hero .hero-cta .btn-primary.hero-cta-shop::before {
    border: 2px solid rgba(13, 148, 136, 0.35) !important;
}
html body .hero .hero-cta .btn-primary.hero-cta-shop .hero-cta-arrow,
html body .hero .hero-cta .btn-primary.hero-cta-shop .hero-cta-icon {
    color: #ffffff !important;
    opacity: 0.95 !important;
}


/* ─── BRAND TAGLINE: "THE ELYTRA STANDARD." ─── */
/* R153-rev63: 3-word brand closer below the subhead. Small caps,
   wide letter-spacing, teal accent — premium signature treatment. */
html body .hero .hero-tagline {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 14px 0 0 0 !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: #0d9488 !important;
}
html body .hero .hero-tagline::before {
    content: '' !important;
    display: inline-block !important;
    width: 24px !important;
    height: 1.5px !important;
    background: #0d9488 !important;
    flex-shrink: 0 !important;
}


/* ─── TRUST PILL AT BOTTOM OF HERO (FULL WIDTH) ─── */
html body .hero .hero-trust-bottom {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 40px !important;
    padding: 0 32px !important;
    width: 100% !important;
    z-index: 4 !important;
    pointer-events: none !important;  /* sub-items will re-enable */
}
html body .hero .hero-trust-bottom .trust-pill {
    pointer-events: auto !important;
    width: 100% !important;
    max-width: 1240px !important;
    margin: 0 auto !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: stretch !important;
    background: linear-gradient(180deg, #ffffff 0%, #fcfcfa 100%) !important;
    border: 1px solid rgba(10, 10, 10, 0.06) !important;
    border-radius: 999px !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.8) inset,
        0 2px 6px rgba(10, 10, 10, 0.04),
        0 12px 32px rgba(10, 10, 10, 0.06),
        0 24px 60px rgba(10, 10, 10, 0.05) !important;
    overflow: hidden !important;
}
html body .hero .hero-trust-bottom .trust-pill .trust-pill-item {
    flex: 1 1 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px 24px !important;
    text-align: center !important;
    transition: background 0.3s ease !important;
}
html body .hero .hero-trust-bottom .trust-pill .trust-pill-item:hover {
    background: rgba(13, 148, 136, 0.04) !important;
}
html body .hero .hero-trust-bottom .trust-pill .trust-pill-item .tpi-icon {
    display: block !important;
    color: #0d9488 !important;
    font-size: 13px !important;
    margin-bottom: 8px !important;
    opacity: 0.9 !important;
    transition: transform 0.3s ease, opacity 0.3s ease !important;
}
html body .hero .hero-trust-bottom .trust-pill .trust-pill-item:hover .tpi-icon {
    opacity: 1 !important;
    transform: translateY(-1px) scale(1.08) !important;
}
html body .hero .hero-trust-bottom .trust-pill .trust-pill-item .tpi-stat {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: -0.01em !important;
    color: #0a0a0a !important;
}
html body .hero .hero-trust-bottom .trust-pill .trust-pill-item .tpi-label {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: #6b6b73 !important;
    margin-top: 6px !important;
    white-space: nowrap !important;
}
html body .hero .hero-trust-bottom .trust-pill .trust-pill-divider {
    width: 1px !important;
    align-self: center !important;
    height: 40px !important;
    background: linear-gradient(180deg,
        rgba(10, 10, 10, 0) 0%,
        rgba(10, 10, 10, 0.12) 50%,
        rgba(10, 10, 10, 0) 100%) !important;
    flex: 0 0 1px !important;
}

/* Mobile: stack into 2x2 grid for narrow screens */
@media (max-width: 768px) {
    html body .hero .hero-trust-bottom {
        position: relative !important;
        bottom: auto !important;
        padding: 0 16px !important;
        margin-top: 32px !important;
    }
    html body .hero .hero-trust-bottom .trust-pill {
        border-radius: 16px !important;
        flex-wrap: wrap !important;
    }
    html body .hero .hero-trust-bottom .trust-pill .trust-pill-item {
        flex: 1 1 50% !important;
        padding: 14px 12px !important;
    }
    html body .hero .hero-trust-bottom .trust-pill .trust-pill-divider {
        display: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   END R153-rev62
   ═══════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   R153-rev65 — LAUNCH CALLOUT: BIGGER + MORE APPEAL
   ═══════════════════════════════════════════════════════════
   Owner wants the launch promo callout to read more
   prominently. Bumped scale, refined gradient, layered shadows,
   teal hover lift, bolt pulse retained.
   ═══════════════════════════════════════════════════════════ */

html body .hero .hero-discount-callout {
    /* SCALE — bigger every direction */
    padding: 13px 20px !important;
    font-size: 14.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    border-radius: 10px !important;
    margin: 24px 0 28px 0 !important;
    /* GRADIENT BG — soft teal-tinted glass */
    background: linear-gradient(135deg,
        rgba(20, 184, 166, 0.10) 0%,
        rgba(255, 255, 255, 0.95) 60%,
        rgba(20, 184, 166, 0.06) 100%) !important;
    border: 1px solid rgba(13, 148, 136, 0.28) !important;
    border-left: 3px solid #0d9488 !important;
    /* LAYERED SHADOW — slight lift + soft teal halo */
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.7) inset,
        0 2px 6px rgba(13, 148, 136, 0.08),
        0 8px 22px rgba(13, 148, 136, 0.10),
        0 16px 36px rgba(13, 148, 136, 0.06) !important;
    color: #0a0a0a !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    transition:
        transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
    gap: 12px !important;
}
html body .hero .hero-discount-callout:hover {
    transform: translateY(-1.5px) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.8) inset,
        0 3px 8px rgba(13, 148, 136, 0.14),
        0 12px 28px rgba(13, 148, 136, 0.16),
        0 22px 44px rgba(13, 148, 136, 0.10) !important;
}
html body .hero .hero-discount-callout strong {
    color: #0d9488 !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    letter-spacing: -0.005em !important;
}
html body .hero .hero-discount-callout .hdc-bolt-pulse {
    font-size: 16px !important;
    color: #0d9488 !important;
}

/* ═══════════════════════════════════════════════════════════
   END R153-rev65
   ═══════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   R153-rev69 — CTAs: BIGGER + MORE APPEAL
   ═══════════════════════════════════════════════════════════
   Both buttons scaled up + polished. Browse Catalog stays the
   teal hero, View COA Portal gets equal sizing + more visual
   weight so it reads as a real secondary instead of a thin
   afterthought.
   ═══════════════════════════════════════════════════════════ */


/* ─── BROWSE CATALOG: BIGGER + REFINED ─── */
html body .hero .hero-cta .btn-primary.hero-cta-shop {
    /* R153-rev71: scaled up again — 19×38 → 22×44, font 16.5 → 18 */
    padding: 22px 44px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: 0.012em !important;
    border-radius: 16px !important;
    /* Refined 4-stop gradient — keep teal with depth */
    background: linear-gradient(180deg,
        #2dd4bf 0%,
        #14b8a6 32%,
        #0d9488 72%,
        #0a766f 100%) !important;
    color: #ffffff !important;
    border: none !important;
    /* NEUTRAL deep shadow ladder (no teal halo) */
    box-shadow:
        0 2px 0 rgba(255, 255, 255, 0.42) inset,
        0 -2px 0 rgba(0, 0, 0, 0.14) inset,
        0 3px 6px rgba(10, 10, 10, 0.12),
        0 10px 22px rgba(10, 10, 10, 0.12),
        0 22px 44px rgba(10, 10, 10, 0.10) !important;
    gap: 10px !important;
}
html body .hero .hero-cta .btn-primary.hero-cta-shop:hover {
    transform: translateY(-3px) !important;
    box-shadow:
        0 2px 0 rgba(255, 255, 255, 0.50) inset,
        0 -2px 0 rgba(0, 0, 0, 0.14) inset,
        0 5px 10px rgba(10, 10, 10, 0.16),
        0 16px 32px rgba(10, 10, 10, 0.18),
        0 30px 60px rgba(10, 10, 10, 0.14) !important;
}
html body .hero .hero-cta .btn-primary.hero-cta-shop .hero-cta-icon {
    font-size: 17.5px !important;
    opacity: 0.98 !important;
    margin-right: 4px !important;
}
html body .hero .hero-cta .btn-primary.hero-cta-shop .hero-cta-arrow {
    font-size: 15px !important;
    margin-left: 6px !important;
}
html body .hero .hero-cta .btn-primary.hero-cta-shop:hover .hero-cta-arrow {
    transform: translateX(7px) !important;
}
/* Refined pulse ring matches larger radius */
html body .hero .hero-cta .btn-primary.hero-cta-shop::before {
    border-radius: 16px !important;
    border: 2px solid rgba(13, 148, 136, 0.30) !important;
}


/* ─── VIEW COA PORTAL: EQUAL WEIGHT, REFINED SECONDARY ─── */
html body .hero .hero-cta .btn-outline.hero-cta-coa {
    /* R153-rev71: scaled up — 19×32 → 22×38, font 16.5 → 18 */
    padding: 22px 38px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: 0.012em !important;
    border-radius: 16px !important;
    /* Subtle cream gradient — not flat white, has depth */
    background: linear-gradient(180deg,
        #ffffff 0%,
        #fafaf7 100%) !important;
    /* Thicker, more confident border */
    border: 1.5px solid rgba(10, 10, 10, 0.14) !important;
    color: #0a0a0a !important;
    /* Layered shadow with inset highlight */
    box-shadow:
        0 2px 0 rgba(255, 255, 255, 0.9) inset,
        0 3px 6px rgba(10, 10, 10, 0.04),
        0 10px 22px rgba(10, 10, 10, 0.06),
        0 22px 44px rgba(10, 10, 10, 0.05) !important;
    gap: 10px !important;
}
html body .hero .hero-cta .btn-outline.hero-cta-coa:hover {
    background: linear-gradient(180deg,
        #ffffff 0%,
        rgba(13, 148, 136, 0.04) 100%) !important;
    border-color: #0d9488 !important;
    color: #0d9488 !important;
    transform: translateY(-3px) !important;
    box-shadow:
        0 2px 0 rgba(255, 255, 255, 0.9) inset,
        0 5px 10px rgba(13, 148, 136, 0.10),
        0 16px 32px rgba(13, 148, 136, 0.12),
        0 30px 60px rgba(13, 148, 136, 0.08) !important;
}
html body .hero .hero-cta .btn-outline.hero-cta-coa .hero-cta-coa-icon {
    font-size: 17.5px !important;
    color: #0d9488 !important;
    opacity: 0.92 !important;
    margin-right: 4px !important;
    transition: transform 0.32s ease, opacity 0.32s ease !important;
}
html body .hero .hero-cta .btn-outline.hero-cta-coa:hover .hero-cta-coa-icon {
    opacity: 1 !important;
    transform: scale(1.10) !important;
}


/* ─── CTA ROW: SPACING ─── */
html body .hero .hero-cta {
    gap: 16px !important;
    margin: 0 0 36px 0 !important;
}


/* ═══════════════════════════════════════════════════════════
   END R153-rev69
   ═══════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   R153-rev72 — KILL THE GREEN HUE PROPERLY
   ═══════════════════════════════════════════════════════════
   Inspected via preview_inspect. TWO teal sources were stacking:

     1. .hero-visual::before — a 560×560 CIRCULAR teal halo
        at 14% center alpha (rgba(20,184,166,0.14)). Big and
        in-your-face behind the vials.
     2. .hero background — teal radial at 13% alpha.

     Combined effect = strong green hue bleeding past vials.

   Fix:
     - Kill the .hero-visual::before halo entirely (was the
       primary offender — 560px is huge)
     - Cut the .hero teal radial from 13% → 6% alpha and
       shrink it from 200×600 to 180×400 (smaller, subtler)
   ═══════════════════════════════════════════════════════════ */

/* Kill the big circular halo behind vials */
html body .hero .hero-visual::before {
    display: none !important;
}

/* Softer + smaller hero bg teal */
html body .hero {
    background:
        radial-gradient(180px 400px at calc(100% - 340px) 60%,
            rgba(20, 184, 166, 0.06) 0%,
            rgba(20, 184, 166, 0.02) 45%,
            rgba(20, 184, 166, 0) 75%),
        linear-gradient(180deg, #fafafa 0%, #fafafa 60%, #f6f3ed 100%),
        radial-gradient(circle at center, rgba(10, 10, 10, 0.035) 1px, transparent 1px) 0 0 / 28px 28px,
        #fafafa !important;
}

/* ═══════════════════════════════════════════════════════════
   END R153-rev72
   ═══════════════════════════════════════════════════════════ */


/* ╔══════════════════════════════════════════════════════════╗
   ║   R153-rev73 — LAB STUDIO REMODEL                        ║
   ║   ── monospace register, live telemetry, 3-depth motion ─║
   ╚══════════════════════════════════════════════════════════╝

   STRATEGY (after multi-direction exploration):
     Direction picked: LAB STUDIO.
     Rejected — Editorial Apothecary (would force COA primary,
       breaks commerce intent).
     Rejected — Quiet Tech (would repeat rev39/rev54 mistake of
       atmospheric bolt-ons the owner has explicitly stripped).

   The brand's actual moat is "we publish our COAs and let you
   read them." So the visual language should *prove* that:
     1. Surface real telemetry — latest batch + purity + date —
        pulled from COA_DATA at runtime. Not a sticker. Data.
     2. Introduce a monospace identity (JetBrains Mono, already
        in stack — zero new dependency) used ONLY for numeric
        meta. Inter remains the primary typeface.
     3. A single hairline horizon runs across the hero — borrowed
        from precision-watch composition. Unifies the layout.
     4. 3-depth cursor parallax: dot-grid (low) / hairline+meta
        (mid) / vials (high). Restraint: ±5px max.

   TOKENS (rev73-specific; --hr- prefix avoids collisions):
   ──────────────────────────────────────────────────────────── */

:root {
    --hr-teal-deep: #0d9488;
    --hr-teal-mid:  #14b8a6;
    --hr-teal-soft: #2dd4bf;
    --hr-ink:       #0a0a0a;
    --hr-ink-soft:  #1a1a1a;
    --hr-mute:      #6b6b73;
    --hr-mute-2:    #9aa0a6;
    --hr-cream:     #fafafa;
    --hr-cream-2:   #f5f1ea;
    --hr-mono:      'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --hr-ease:      cubic-bezier(.4,0,.2,1);
    --hr-ease-out:  cubic-bezier(.16,1,.3,1);
}


/* ─── 1. ATMOSPHERE — CENTER-WEIGHTED DOT FIELD ────────────────
   Why: rev72's uniform 28-32px dot grid reads as wallpaper.
   Linear/Stripe centre-weight their grids so the focal area is
   slightly denser. We do the same with a radial mask on a
   pseudo-element. Net visual: paper-grain texture that "settles"
   into the vial column instead of tiling flatly across the page.
   Performance: pure CSS, no JS, no image. */
html body .hero {
    position: relative !important;
    background:
        /* Upper-left ambient bloom — keeps the implied light source.
           Held at 0.45 alpha (down from rev56's 0.55) — was reading
           as a warm patch on the H1 left edge. */
        radial-gradient(ellipse 720px 540px at 12% 6%,
            rgba(255, 251, 242, 0.45) 0%,
            rgba(255, 251, 242, 0) 70%),
        /* Focal halo behind vial cluster — held at 6% alpha per
           rev72's decision (the green-hue fix). Not undoing that. */
        radial-gradient(180px 400px at calc(100% - 340px) 60%,
            rgba(20, 184, 166, 0.06) 0%,
            rgba(20, 184, 166, 0.02) 45%,
            rgba(20, 184, 166, 0) 75%),
        /* Vertical cream settling */
        linear-gradient(180deg, #fafafa 0%, #fafafa 60%, #f6f3ed 100%),
        #fafafa !important;
}
/* Center-weighted dot grid on a pseudo so we can mask its falloff
   without touching the base background stack. Pointer-events none,
   z-index 0 so all hero content sits above. */
html body .hero::after {
    content: "" !important;
    display: block !important;        /* override the rev52 `display:none` on this pseudo */
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 0 !important;
    mix-blend-mode: normal !important;  /* override rev44's overlay blend so dot pattern reads true */
    opacity: 1 !important;
    background:
        radial-gradient(circle at center, rgba(10, 10, 10, 0.04) 1px, transparent 1px) 0 0 / 30px 30px !important;
    /* Mask: dense at the visual column (right third), faded at edges.
       Drives the eye toward the vials without "drawing" anything. */
    -webkit-mask-image: radial-gradient(ellipse 60% 80% at 78% 50%,
        rgba(0,0,0,0.85) 0%,
        rgba(0,0,0,0.55) 38%,
        rgba(0,0,0,0.20) 70%,
        rgba(0,0,0,0) 100%);
    mask-image: radial-gradient(ellipse 60% 80% at 78% 50%,
        rgba(0,0,0,0.85) 0%,
        rgba(0,0,0,0.55) 38%,
        rgba(0,0,0,0.20) 70%,
        rgba(0,0,0,0) 100%);
    /* Subtle parallax — driven by JS in index.html. ~3px max drift.
       Lives on the lowest depth so motion reads as ambient, not active. */
    transform: translate3d(var(--hr-grid-px, 0px), var(--hr-grid-py, 0px), 0) !important;
    transition: transform .9s var(--hr-ease-out) !important;
    will-change: transform;
}
/* Ensure all hero children stack above the grid pseudo */
html body .hero > * { position: relative; z-index: 1; }


/* ─── 2. TYPOGRAPHIC REGISTER — 01 / HERO ──────────────────────
   Why: hero has no editorial "marker" the way Linear / Stripe
   number their sections. A single, tiny "01 — HERO" lockup
   above the H1 declares this is a designed surface, not a
   marketing template. Monospace + tracked = lab-instrument
   identity. Disappears below 1024px (mobile keeps the H1 alone). */
html body .hero .hero-text {
    position: relative !important;
}
html body .hero .hero-text::before {
    content: "01 — HERO" !important;
    display: block !important;
    font-family: var(--hr-mono) !important;
    font-size: 10.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0.18em !important;
    color: var(--hr-mute-2) !important;
    margin: 0 0 18px 0 !important;
    /* Hairline leader before the text — a 24px tick that anchors
       the lockup to a grid line. Catches a watch-brand cue. */
    padding-left: 36px !important;
    position: relative !important;
}
html body .hero .hero-text::after {
    content: "" !important;
    position: absolute !important;
    top: 5px !important;       /* aligns with the mono cap-height baseline */
    left: 0 !important;
    width: 28px !important;
    height: 1px !important;
    background: var(--hr-mute-2) !important;
    opacity: 0.6 !important;
}
@media (max-width: 1024px) {
    html body .hero .hero-text::before,
    html body .hero .hero-text::after { display: none !important; }
}


/* ─── 3. H1 — REFINED HIERARCHY ────────────────────────────────
   Why: line 1 (Premium Peptides.) and line 2 (Modern Research.)
   were doing the same job at different sizes. We tighten line 1's
   weight and color so it reads as a SEMANTIC PREFACE, not a
   second headline. Line 2 stays the moment.
   Also: kill the underline bar — the new hairline horizon
   (section 7 below) does the editorial-accent job better, and
   the bar was duplicating that role. */
html body .hero .hero-title { margin: 0 0 22px 0 !important; }
html body .hero .hero-title .hero-title-line {
    font-size: clamp(34px, 4.0vw, 52px) !important;
    font-weight: 600 !important;
    color: #2a2a2e !important;          /* softened from #0a0a0a — preface, not statement */
    letter-spacing: -0.02em !important;
    line-height: 1.02 !important;
}
html body .hero .hero-title .hero-title-accent {
    font-size: clamp(54px, 6.4vw, 88px) !important;
    font-weight: 900 !important;
    color: var(--hr-teal-deep) !important;
    letter-spacing: -0.036em !important;
    line-height: 1.0 !important;
    /* Keep depth shadow from rev56 — it reads as ink, not glow */
    text-shadow:
        0 1px 0 rgba(13, 148, 136, 0.06),
        0 2px 6px rgba(13, 148, 136, 0.08) !important;
}
/* Kill the underline bar — replaced by the hairline horizon */
html body .hero .hero-title .hero-title-accent::after {
    display: none !important;
}


/* ─── 4. RATING CHIP — INTERNAL ANATOMY ────────────────────────
   Why: rev56's pill was solid but felt monolithic — one font,
   one row, no architecture. We add a vertical divider between
   the stars block and the text block (a real chip has internal
   structure), bump the inset highlight to 1.5px so it actually
   reads on cream, and tighten the shadow ladder so the chip
   has weight without floating. */
html body .hero .hero-rating {
    padding: 9px 14px 9px 12px !important;
    background: linear-gradient(180deg, #ffffff 0%, #fbfaf6 100%) !important;
    border: 1px solid rgba(10, 10, 10, 0.08) !important;
    border-radius: 999px !important;
    /* Stronger inset highlight (was 1px @ 0.9, now reads on cream)
       + deeper drop so the chip has a defined edge. */
    box-shadow:
        0 1.5px 0 rgba(255, 255, 255, 1) inset,
        0 1px 1px rgba(10, 10, 10, 0.03),
        0 2px 4px rgba(10, 10, 10, 0.05),
        0 10px 24px rgba(10, 10, 10, 0.07) !important;
    gap: 10px !important;
}
/* Vertical 1px divider between stars and text — chip anatomy. */
html body .hero .hero-rating .hero-rating-stars {
    padding-right: 10px !important;
    border-right: 1px solid rgba(10, 10, 10, 0.10) !important;
    font-size: 12.5px !important;
}
html body .hero .hero-rating .hero-rating-text {
    font-size: 13.5px !important;
    color: #2a2a2e !important;
    font-weight: 500 !important;
}
html body .hero .hero-rating-arrow {
    color: var(--hr-mute) !important;
    font-size: 10px !important;
    margin-left: 4px !important;
}


/* ─── 5. SUBHEADLINE — LARGER, CLEANER ─────────────────────────
   Why: subhead at 16px italic was reading as a caption, not a
   real value statement. The italic was also creating tension
   with the .hsh-cont roman inserts — too many style flips per
   sentence. Drop italic, bump size, keep the teal accent bar. */
html body .hero .hero-subheadline {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 17.5px !important;
    font-weight: 400 !important;
    font-style: normal !important;            /* was italic — too many style flips */
    line-height: 1.5 !important;
    color: #2a2a2e !important;
    margin: 22px 0 18px 0 !important;
    max-width: 540px !important;
    padding-left: 14px !important;
    border-left: 2.5px solid var(--hr-teal-deep) !important;
}
html body .hero .hero-subheadline .hsh-cont {
    display: inline !important;
    font-style: normal !important;
    font-weight: 600 !important;
    color: var(--hr-ink) !important;
}


/* ─── 6. TAGLINE → MONOSPACE META LINE ─────────────────────────
   Why: "THE ELYTRA STANDARD." was an orphan label sitting between
   the subhead and the launch callout with no anchor. Reframe as
   a monospace "meta line" below the subhead, with a leading
   bullet and tracked numeric pair — gives the brand promise the
   same typographic register the live telemetry strip uses below.
   Reads as "system metadata," not a tagline. */
html body .hero .hero-tagline {
    font-family: var(--hr-mono) !important;
    font-size: 10.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: var(--hr-mute) !important;
    margin: 0 0 22px 0 !important;
    /* Leading dot + spacer using ::before — micro-detail */
    position: relative !important;
    padding-left: 14px !important;
}
html body .hero .hero-tagline::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: var(--hr-teal-deep) !important;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.10) !important;
}


/* ─── 7. LAUNCH CALLOUT — RESTRUCTURED LOCKUP ──────────────────
   Why: rev56's pill was one long sentence with a bolt icon.
   We restructure into [LABEL] [VALUE] [DETAIL] using inner
   typography hierarchy. Same content, designed instead of
   shoved into a row. */
html body .hero .hero-discount-callout {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.82) 0%,
        rgba(253, 252, 248, 0.82) 100%) !important;
    border: 1px solid rgba(13, 148, 136, 0.22) !important;
    border-left: 2.5px solid var(--hr-teal-deep) !important;
    border-radius: 4px !important;
    padding: 9px 14px 9px 12px !important;
    margin: 0 0 26px 0 !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: var(--hr-ink-soft) !important;
    letter-spacing: 0 !important;
    box-shadow:
        0 1px 2px rgba(10, 10, 10, 0.03),
        0 6px 18px rgba(10, 10, 10, 0.05) !important;
    backdrop-filter: blur(8px) saturate(1.05) !important;
    -webkit-backdrop-filter: blur(8px) saturate(1.05) !important;
}
html body .hero .hero-discount-callout strong {
    color: var(--hr-teal-deep) !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
}
html body .hero .hero-discount-callout .hdc-bolt-pulse {
    color: var(--hr-teal-deep) !important;
    font-size: 11px !important;
}


/* ─── 8. CTAs — TRUE EQUAL-WEIGHT PARTNERSHIP ──────────────────
   Why: rev69 declared 18px on both buttons but an earlier rule
   (`.btn-outline:not(.cookie...).btn-large { font-size: 0.82rem
   !important }` at specificity 0,5,0) was winning over rev69's
   (0,4,2). Confirmed via getComputedStyle — secondary was
   rendering at 13.12px = 0.82rem × 16px. Visual asymmetry
   collapsed the "equal-weight" mission.

   Fix: bump our selector specificity to (0,5,2) by including
   .btn-large in the chain. No !important escalation needed —
   correct specificity is the discipline.

   Design: both buttons share padding, font-size, radius, motion
   token. Differentiation is COLOR ONLY (filled teal vs outlined
   cream). Equal weight = both are real CTAs; user choice. */
html body .hero .hero-cta {
    display: flex !important;
    gap: 14px !important;
    margin: 0 0 32px 0 !important;
    align-items: stretch !important;
}
/* PRIMARY — Browse Catalog */
html body .hero .hero-cta .btn-primary.btn-large.hero-cta-shop {
    padding: 18px 32px !important;
    font-size: 15.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.012em !important;
    border-radius: 12px !important;
    background: linear-gradient(180deg,
        #2dd4bf 0%,
        #14b8a6 32%,
        #0d9488 72%,
        #0a766f 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(10, 90, 84, 0.55) !important;
    /* Refined neutral shadow — light from upper-left → offset down+right */
    box-shadow:
        0 1.5px 0 rgba(255, 255, 255, 0.42) inset,
        0 -1.5px 0 rgba(0, 0, 0, 0.16) inset,
        2px 3px 6px rgba(10, 10, 10, 0.12),
        3px 10px 22px rgba(10, 10, 10, 0.14),
        4px 22px 44px rgba(10, 10, 10, 0.10) !important;
    /* Cursor-tracked spotlight echo — radial that follows mouse INSIDE
       the button. Wired via JS in index.html (--ctx-x, --ctx-y).
       Subtle: 90px radius @ 22% white alpha. Magnetic-feel without
       displacing the button. Falls back to invisible if JS off. */
    background-image:
        radial-gradient(120px 120px at var(--ctx-x, 50%) var(--ctx-y, 50%),
            rgba(255, 255, 255, 0.18) 0%,
            rgba(255, 255, 255, 0) 70%),
        linear-gradient(180deg, #2dd4bf 0%, #14b8a6 32%, #0d9488 72%, #0a766f 100%) !important;
    transition: transform .32s var(--hr-ease),
                box-shadow .32s var(--hr-ease) !important;
    position: relative !important;
}
html body .hero .hero-cta .btn-primary.btn-large.hero-cta-shop:hover {
    transform: translateY(-3px) !important;
    box-shadow:
        0 1.5px 0 rgba(255, 255, 255, 0.50) inset,
        0 -1.5px 0 rgba(0, 0, 0, 0.16) inset,
        3px 5px 10px rgba(10, 10, 10, 0.16),
        4px 16px 32px rgba(10, 10, 10, 0.18),
        5px 30px 60px rgba(10, 10, 10, 0.14) !important;
}
html body .hero .hero-cta .btn-primary.btn-large.hero-cta-shop:focus-visible {
    outline: 2px solid var(--hr-teal-deep) !important;
    outline-offset: 3px !important;
}
html body .hero .hero-cta .btn-primary.btn-large.hero-cta-shop .hero-cta-icon {
    font-size: 14.5px !important; margin-right: 2px !important;
}
html body .hero .hero-cta .btn-primary.btn-large.hero-cta-shop .hero-cta-arrow {
    font-size: 12.5px !important; margin-left: 4px !important;
    transition: transform .32s var(--hr-ease) !important;
}
html body .hero .hero-cta .btn-primary.btn-large.hero-cta-shop:hover .hero-cta-arrow {
    transform: translateX(5px) !important;
}

/* SECONDARY — View COA Portal — equal-weight, NOT shrunk.
   Specificity (0,5,2) wins over the legacy 0,5,0 rule. */
html body .hero .hero-cta .btn-outline.btn-large.hero-cta-coa {
    padding: 18px 28px !important;
    font-size: 15.5px !important;       /* MATCHED to primary */
    font-weight: 700 !important;        /* MATCHED to primary */
    letter-spacing: 0.012em !important;
    text-transform: none !important;    /* legacy rule uppercased it */
    border-radius: 12px !important;
    background: linear-gradient(180deg, #ffffff 0%, #fafaf5 100%) !important;
    border: 1.5px solid rgba(10, 10, 10, 0.14) !important;
    color: var(--hr-ink) !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    box-shadow:
        0 1.5px 0 rgba(255, 255, 255, 0.9) inset,
        0 3px 6px rgba(10, 10, 10, 0.04),
        0 10px 22px rgba(10, 10, 10, 0.06),
        0 22px 44px rgba(10, 10, 10, 0.05) !important;
    transition: transform .32s var(--hr-ease),
                box-shadow .32s var(--hr-ease),
                border-color .32s var(--hr-ease),
                color .32s var(--hr-ease) !important;
    gap: 8px !important;
}
html body .hero .hero-cta .btn-outline.btn-large.hero-cta-coa span {
    font-size: 15.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.012em !important;
    text-transform: none !important;
    font-family: 'Inter', system-ui, sans-serif !important;
}
html body .hero .hero-cta .btn-outline.btn-large.hero-cta-coa:hover {
    background: linear-gradient(180deg, #ffffff 0%, rgba(13, 148, 136, 0.05) 100%) !important;
    border-color: var(--hr-teal-deep) !important;
    color: var(--hr-teal-deep) !important;
    transform: translateY(-3px) !important;
    box-shadow:
        0 1.5px 0 rgba(255, 255, 255, 0.9) inset,
        0 5px 10px rgba(13, 148, 136, 0.10),
        0 16px 32px rgba(13, 148, 136, 0.14),
        0 30px 60px rgba(13, 148, 136, 0.08) !important;
}
html body .hero .hero-cta .btn-outline.btn-large.hero-cta-coa:focus-visible {
    outline: 2px solid var(--hr-teal-deep) !important;
    outline-offset: 3px !important;
}
html body .hero .hero-cta .btn-outline.btn-large.hero-cta-coa .hero-cta-coa-icon {
    font-size: 14.5px !important;
    color: var(--hr-teal-deep) !important;
    transition: transform .32s var(--hr-ease) !important;
}
html body .hero .hero-cta .btn-outline.btn-large.hero-cta-coa:hover .hero-cta-coa-icon {
    transform: scale(1.08) !important;
}


/* ─── 9. LIVE COA TELEMETRY STRIP ──────────────────────────────
   The brand's strongest claim is "we publish our COAs." So we
   surface real telemetry: latest batch, purity %, days since
   published — pulled at runtime from window.COA_DATA (see
   index.html script). Pure JS, no extra dependency.

   Visual: monospace, edge-to-edge inside the text column, sits
   right under the launch callout. Reads as "system output" —
   the same register as the "01 — HERO" lockup above the H1.

   This is the ONE on-page place where claim → proof in a single
   glance. Far stronger than a static trust badge. */
html body .hero .hero-coa-telemetry {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: -10px 0 22px 0 !important;
    padding: 0 0 0 14px !important;
    font-family: var(--hr-mono) !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    letter-spacing: 0.04em !important;
    color: var(--hr-mute) !important;
    /* Subtle teal LED dot — declares "this is live data" */
    position: relative !important;
    max-width: 540px !important;
    flex-wrap: wrap !important;
}
html body .hero .hero-coa-telemetry::before {
    content: "" !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: var(--hr-teal-mid) !important;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.18) !important;
    flex-shrink: 0 !important;
    animation: hrCoaPulse 2.4s ease-in-out infinite !important;
}
@keyframes hrCoaPulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.18); }
    50%      { box-shadow: 0 0 0 5px rgba(20, 184, 166, 0.06); }
}
@media (prefers-reduced-motion: reduce) {
    html body .hero .hero-coa-telemetry::before { animation: none !important; }
}
html body .hero .hero-coa-telemetry .hct-label {
    color: var(--hr-mute-2) !important;
    text-transform: uppercase !important;
    font-weight: 500 !important;
}
html body .hero .hero-coa-telemetry .hct-val {
    color: var(--hr-ink-soft) !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
}
html body .hero .hero-coa-telemetry .hct-sep {
    color: var(--hr-mute-2) !important;
    opacity: 0.6 !important;
}
html body .hero .hero-coa-telemetry .hct-purity {
    color: var(--hr-teal-deep) !important;
    font-weight: 700 !important;
}
html body .hero .hero-coa-telemetry .hct-link {
    color: var(--hr-teal-deep) !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(13, 148, 136, 0.3) !important;
    padding-bottom: 1px !important;
    margin-left: auto !important;
    transition: color .18s var(--hr-ease), border-color .18s var(--hr-ease) !important;
}
html body .hero .hero-coa-telemetry .hct-link:hover {
    color: #0a766f !important;
    border-bottom-color: var(--hr-teal-deep) !important;
}


/* ─── 10. HAIRLINE HORIZON ─────────────────────────────────────
   A single 1px line drawn at the same vertical baseline across
   the entire hero. Borrowed from precision-watch composition
   (every detail anchors to one reference line).
   Lives on a pseudo of .hero-content so it sits at hero center
   vertically. Pointer-events none. Faded at both ends so it
   doesn't read as a rectangle. */
html body .hero .hero-content.hero-split {
    position: relative !important;
}
html body .hero .hero-content.hero-split::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    /* Anchored just below the H1 baseline so it bisects the
       composition right where the rating chip lives. Tweaked
       via preview_inspect: text col H1 ends near y=400, rating
       at y=434 — line at ~400 from container top works. */
    top: 200px !important;
    height: 1px !important;
    background: linear-gradient(90deg,
        rgba(10, 10, 10, 0) 0%,
        rgba(10, 10, 10, 0.10) 20%,
        rgba(10, 10, 10, 0.10) 80%,
        rgba(10, 10, 10, 0) 100%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
    /* Subtle mid-depth parallax (driven by JS) — ±2px max */
    transform: translate3d(0, var(--hr-line-py, 0px), 0) !important;
    transition: transform .8s var(--hr-ease-out) !important;
    will-change: transform;
}
@media (max-width: 1024px) {
    html body .hero .hero-content.hero-split::before { display: none !important; }
}


/* ─── 11. TRUST PILL — DATA-BAR REFRAME ────────────────────────
   Why: rev56's pill spanned 1238px wide as one floating capsule.
   It read as "a footer strip with shadows." Reframe as a flat
   monospace data-bar: edge-to-edge, hairline top + bottom,
   numeric stats in mono, labels in tracked uppercase. Same
   content, instrument identity. */
html body .hero .hero-trust-bottom {
    margin-top: 18px !important;
}
html body .hero .hero-trust-bottom .trust-pill.trust-pill-wide {
    background: linear-gradient(180deg, #ffffff 0%, #fbfaf5 100%) !important;
    border: 1px solid rgba(10, 10, 10, 0.07) !important;
    border-radius: 14px !important;
    padding: 18px 28px !important;
    box-shadow:
        0 1.5px 0 rgba(255, 255, 255, 1) inset,
        0 1px 2px rgba(10, 10, 10, 0.03),
        0 4px 14px rgba(10, 10, 10, 0.04),
        0 14px 32px rgba(10, 10, 10, 0.05) !important;
    /* Internal hairline at the top edge — declares "data row" */
    position: relative !important;
}
html body .hero .hero-trust-bottom .trust-pill-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 2px !important;
}
html body .hero .hero-trust-bottom .trust-pill-item .tpi-icon {
    color: var(--hr-teal-deep) !important;
    font-size: 13px !important;
    margin-bottom: 4px !important;
    opacity: 0.85 !important;
}
html body .hero .hero-trust-bottom .trust-pill.trust-pill-wide .trust-pill-item .tpi-stat {
    font-family: var(--hr-mono) !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    color: var(--hr-ink) !important;
    letter-spacing: -0.01em !important;
    line-height: 1.1 !important;
}
html body .hero .hero-trust-bottom .trust-pill-item .tpi-label {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 9.5px !important;
    font-weight: 600 !important;
    color: var(--hr-mute) !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    margin-top: 2px !important;
}
html body .hero .hero-trust-bottom .trust-pill-divider {
    background: linear-gradient(180deg,
        rgba(10, 10, 10, 0) 0%,
        rgba(10, 10, 10, 0.12) 50%,
        rgba(10, 10, 10, 0) 100%) !important;
    width: 1px !important;
    height: 38px !important;
    align-self: center !important;
}


/* ─── 12. PROMO BADGE — RELOCATE + RESTRAIN ────────────────────
   Why: rev43's 20%-OFF badge at bottom-right with -7° rotation
   was visually competing with the trust pill anchored right
   below it. Two callouts in the same corner. We move it to the
   UPPER-RIGHT of the hero (over the vial photography stage) where
   it reads as a window-sticker on the product display — a more
   editorial placement — and de-rotate it (rotation read as
   "discount kiosk"). */
html body .hero .hero-promo-badge {
    top: 24px !important;
    right: 32px !important;
    bottom: auto !important;
    transform: rotate(0deg) !important;
    width: 78px !important;
    height: 78px !important;
    border-radius: 50% !important;
    background: linear-gradient(180deg, #14b8a6 0%, #0a766f 100%) !important;
    box-shadow:
        0 1.5px 0 rgba(255, 255, 255, 0.25) inset,
        0 -1.5px 0 rgba(0, 0, 0, 0.20) inset,
        2px 4px 10px rgba(13, 148, 136, 0.22),
        4px 14px 32px rgba(13, 148, 136, 0.20),
        0 24px 48px rgba(10, 10, 10, 0.08) !important;
    z-index: 5 !important;
    transition: transform .32s var(--hr-ease), box-shadow .32s var(--hr-ease) !important;
}
html body .hero .hero-promo-badge:hover {
    transform: scale(1.04) rotate(-3deg) !important;
}
html body .hero .hero-promo-badge .hpb-num {
    font-size: 22px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    line-height: 1 !important;
}
html body .hero .hero-promo-badge .hpb-text {
    font-family: var(--hr-mono) !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    letter-spacing: 0.14em !important;
    margin-top: 1px !important;
}
html body .hero .hero-promo-badge .hpb-sub {
    font-size: 8px !important;
    font-weight: 500 !important;
    opacity: 0.85 !important;
    letter-spacing: 0.08em !important;
    margin-top: 2px !important;
    text-transform: uppercase !important;
}


/* ─── 13. SCROLL INDICATOR — SURFACE IT ────────────────────────
   Why: currently rendered at opacity 0 — dead code on the page.
   Surface it at a low but visible alpha so users see the
   "more below" cue. Keep the existing animated dash. */
html body .hero .hero-scroll-indicator {
    opacity: 0.65 !important;
    bottom: 24px !important;
}
html body .hero .hero-scroll-indicator .hsi-text {
    font-family: var(--hr-mono) !important;
    font-size: 9.5px !important;
    letter-spacing: 0.22em !important;
    color: var(--hr-mute) !important;
}


/* ─── 14. VIAL VISUAL — DEPTH-LAYER PARALLAX RECEIVER ──────────
   Wired via the existing index.html script. Kept the rev54
   parallax math; what's new is the multi-depth ladder: vials
   move full strength (±5px), the hairline horizon moves at ½
   (±2.5px), the dot-grid moves at ⅓ (±1.7px). Three layers,
   one cursor — depth illusion without "3D feel" gimmick. */
html body .hero .hero-visual {
    transform: translate3d(var(--hp-parallax-x, 0px), var(--hp-parallax-y, 0px), 0) !important;
    transition: transform .8s var(--hr-ease-out) !important;
    will-change: transform;
}


/* ─── 15. COHESION — HAND-OFF TO SPECTRUM DIVIDER ──────────────
   Why: hero ends at #f6f3ed (cream warm), spectrum-divider has
   a teal accent and lives over the page bg. Without a smooth
   color hand-off there's a visible seam. Add a 1px hairline at
   the top of spectrum-divider that picks up the bottom edge of
   the hero, and align the divider's background to the hero's
   bottom cream value so it flows. */
html body .spectrum-divider {
    background: linear-gradient(180deg, #f6f3ed 0%, #fafafa 100%) !important;
    border-top: 1px solid rgba(10, 10, 10, 0.06) !important;
}
/* And: the why-section's first H2 should pick up the hero's
   typographic ramp — ensure it's smaller than the hero accent
   so the visual scale steps DOWN coherently as the user scrolls. */
html body .why-section .section-header h2 {
    /* Slightly tighter tracking + the same teal accent option
       on the keyword. We don't override structure — just sync
       the typographic token. Color hold. */
    letter-spacing: -0.022em !important;
}


/* ─── 16. RESPONSIVE — MOBILE BEHAVIOR ─────────────────────────
   At ≤768px:
     • The "01 — HERO" lockup hides (already done in section 2).
     • The hairline horizon hides (already done in section 10).
     • The H1 tightens so "Modern Research." doesn't overflow
       (mobile screenshot showed overflow at 375px).
     • CTAs stack full-width.
     • Trust pill condenses padding.                            */
@media (max-width: 768px) {
    html body .hero .hero-title .hero-title-line {
        font-size: clamp(26px, 7vw, 36px) !important;
    }
    html body .hero .hero-title .hero-title-accent {
        font-size: clamp(36px, 11vw, 52px) !important;
        letter-spacing: -0.030em !important;
    }
    html body .hero .hero-cta {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    html body .hero .hero-cta .btn-primary.btn-large.hero-cta-shop,
    html body .hero .hero-cta .btn-outline.btn-large.hero-cta-coa {
        width: 100% !important;
        justify-content: center !important;
        padding: 16px 24px !important;
    }
    html body .hero .hero-coa-telemetry {
        font-size: 10px !important;
        padding-left: 0 !important;
        gap: 6px !important;
    }
    html body .hero .hero-promo-badge {
        width: 60px !important;
        height: 60px !important;
        top: 16px !important;
        right: 16px !important;
    }
    html body .hero .hero-promo-badge .hpb-num { font-size: 16px !important; }
    html body .hero .hero-promo-badge .hpb-text { font-size: 7.5px !important; }
    html body .hero .hero-promo-badge .hpb-sub { font-size: 7px !important; }
    html body .hero .hero-trust-bottom .trust-pill.trust-pill-wide {
        padding: 14px 16px !important;
    }
    html body .hero .hero-trust-bottom .trust-pill-item .tpi-stat { font-size: 14px !important; }
    html body .hero .hero-trust-bottom .trust-pill-item .tpi-label { font-size: 8.5px !important; }
}


/* ═══════════════════════════════════════════════════════════
   END R153-rev73
   ═══════════════════════════════════════════════════════════ */


/* ╔═══════════════════════════════════════════════════════════╗
   ║   R153-rev74 — REFINEMENT PASS (FORENSIC)                 ║
   ║                                                            ║
   ║   No new elements. No new colors. No new motion. Every    ║
   ║   change is either (a) the removal of an element that     ║
   ║   wasn't earning its place, or (b) forcing an existing    ║
   ║   value to snap to the canonical design system.           ║
   ║                                                            ║
   ║   Owner brief: "too many green dots." Hero is ~75%.       ║
   ║   This pass goes the other way from rev73 — subtraction   ║
   ║   instead of addition. The H1, the vial photography, the  ║
   ║   subhead, and the two CTAs already carry the page.       ║
   ║   Everything else is supporting cast, and supporting      ║
   ║   cast should be quiet.                                   ║
   ╚═══════════════════════════════════════════════════════════╝ */

/* ─── TOKENS — converge the design system ──────────────────────
   Spacing snaps to a 4/8/16/24/32/48 ladder. Type tokens fixed
   to the four values actually used in the hero. Teal collapses
   to the three palette anchors. One shadow recipe per surface
   weight, all agreeing on a single canonical light direction
   (upper-left → small positive x AND y offsets).                */
:root {
    /* SPACING (only multiples of 4) */
    --hr-s-1: 4px;
    --hr-s-2: 8px;
    --hr-s-3: 16px;
    --hr-s-4: 24px;     /* the canonical "between elements" gap */
    --hr-s-5: 32px;
    --hr-s-6: 48px;

    /* RADIUS — collapsed from 5 values to 3 + pill */
    --hr-radius-sm:   8px;   /* small chips, callout */
    --hr-radius-md:  12px;   /* CTAs, trust pill */
    --hr-radius-pill: 999px;

    /* TEXT — clean 4-step ramp (no #9aa0a6 stray gray) */
    --hr-text-1: #0a0a0a;    /* primary ink */
    --hr-text-2: #1a1a1a;    /* body */
    --hr-text-3: #4a4a52;    /* preface / softened display */
    --hr-text-4: #6b6b73;    /* mute / microcopy */

    /* MOTION */
    --hr-d-fast: 0.18s;
    --hr-d-med:  0.32s;
    --hr-d-slow: 0.80s;
    --hr-curve:  cubic-bezier(0.16, 1, 0.3, 1);
}


/* ─── (A) REMOVE — atmospheric color bloom on .hero::before
   Why: rev73 introduced four colored radial gradients (purple
   #e3d8f3, mint #daeede, peach #f4e3d6) as ambient atmosphere.
   These are NEW colors — they were never in the approved
   teal palette and never appeared elsewhere on the page.
   With the cream base (#fafafa→#f6f3ed) and the teal halo
   under the vials already on .hero, the colored bloom adds
   nothing the viewer can name but quietly competes with the
   teal display type for hue authority.                        */
html body .hero::before {
    content: none !important;
    display: none !important;
    background: none !important;
    background-image: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    animation: none !important;
}


/* ─── (B) REMOVE — page-wide dot grid on .hero::after
   Why: directly contributes to "too many dots" overall.
   Wallpaper texture. The vial photography is the focal
   point — texture under it actively reduces the photographic
   "object placed on a surface" reading. With this gone, the
   cream becomes a clean studio backdrop instead of a grid.   */
html body .hero::after {
    content: none !important;
    display: none !important;
}


/* ─── (C) REMOVE — the "01 — HERO" editorial lockup
   Why: rev73's editorial marker (tick + "01 — HERO" mono
   label above the H1). Two issues: (1) it uses the stray
   #9aa0a6 we're killing; (2) "THE ELYTRA STANDARD." already
   serves as the brand-register microcopy below the subhead.
   Two pieces of tracked-uppercase microcopy in the same
   column is duplication. The H1 should open the page, not
   a numeric chapter marker.                                  */
html body .hero .hero-text::before,
html body .hero .hero-text::after {
    content: none !important;
    display: none !important;
}


/* ─── (D) REMOVE — leading teal LED dot on tagline
   Why: "too many green dots" — direct hit. There are TWO
   leading 6px teal LED dots in the text column: one on
   .hero-tagline ("THE ELYTRA STANDARD.") and one on
   .hero-coa-telemetry ("LATEST COA"). Same visual language,
   stacked 22px apart. The telemetry dot earns its place —
   it signals "this is live data, populated at runtime."
   The tagline dot is purely decorative. Keep ONE.            */
html body .hero .hero-tagline {
    padding-left: 0 !important;
}
html body .hero .hero-tagline::before {
    content: none !important;
    display: none !important;
}


/* ─── (E) REMOVE — drifting ambient particles in vial area
   Why: 5 × 4px teal dots animated through the vial column.
   Computed opacity at rest = 0; even at peak they read as
   "dust" the user can't quite place. Reducing-motion users
   never see them. Net result: 5 DOM nodes producing
   accumulated detail that adds nothing to the focal photo. */
html body .hero .hero-visual .hero-particle {
    display: none !important;
}

/* ─── (E2) REMOVE — JS-injected #particles dot field (60 dots)
   Why: app.js createParticles() injects 60 drifting dots into
   #particles — half teal, half LAVENDER (#aa96d7). That's both
   "too many green dots" AND a non-teal color introduction. The
   vial photography is the focal point; sixty dots animating
   around it is wallpaper, not composition. Hide via CSS — the
   JS still runs harmlessly but the visual noise is gone.       */
html body .hero .hero-particles,
html body .hero #particles {
    display: none !important;
}


/* ─── (F) REMOVE — the hairline horizon across the text col
   Why: rev73's signature flourish — a 1px line running
   across the hero at the H1 baseline. It bisected the
   composition into "above-line" and "below-line." With the
   H1 dominating naturally, the line is reading as a faint
   visual seam rather than an editorial anchor. Removing it
   simplifies the read; the H1 becomes the anchor itself.    */
html body .hero .hero-content.hero-split::before {
    content: none !important;
    display: none !important;
}


/* ─── (G) UNIFY — vertical rhythm to a single 24px beat
   Why: pre-rev74 margins were 22/22/18/22/16/22/32 — close
   to a rhythm but missing it by a few px each time. We snap
   every "between minor elements" gap to var(--hr-s-4) = 24px.
   The exception is H1→rating (slightly tighter, 20px, so the
   rating chip reads as "directly attached to the headline")
   and CTA→trust (slightly larger, 32px, marking the major
   break between text column and full-width trust strip).    */
html body .hero .hero-title       { margin: 0 0 20px 0 !important; }   /* H1 → rating: tighter, attached */
html body .hero .hero-rating      { margin: 0 0 var(--hr-s-4) 0 !important; }
html body .hero .hero-subheadline { margin: 0 0 var(--hr-s-4) 0 !important; }
html body .hero .hero-tagline     { margin: 0 0 var(--hr-s-4) 0 !important; }
html body .hero .hero-discount-callout { margin: 0 0 var(--hr-s-4) 0 !important; }
html body .hero .hero-coa-telemetry {
    margin: 0 0 var(--hr-s-4) 0 !important;    /* was -10px,22px — kill the negative pull */
    padding-left: 0 !important;                /* matches tagline now that its dot is gone */
}
html body .hero .hero-cta         { margin: 0 0 var(--hr-s-5) 0 !important; }
html body .hero .hero-trust-bottom { margin-top: var(--hr-s-3) !important; }


/* ─── (H) UNIFY — color hierarchy snaps to the 4-step ramp
   Why: the rev73 mute pair (#6b6b73 + #9aa0a6) gave us 5
   distinct grays across the hero. Cap at 4. #9aa0a6 was
   only used on .hct-label and the now-removed "01 — HERO";
   we re-point .hct-label to the canonical mute.            */
html body .hero .hero-coa-telemetry .hct-label {
    color: var(--hr-text-4) !important;
}
html body .hero .hero-coa-telemetry {
    color: var(--hr-text-4) !important;
}


/* ─── (I) UNIFY — radius ladder collapsed to 8/12/pill
   Why: rev73 had 4px (callout), 8px (--hr-radius-sm token
   that wasn't actually used), 12px (CTAs), 14px (trust
   pill), 999px (rating pill). Five values. Drop to three.
   Launch callout 4 → 8 (still small, but on the system).
   Trust pill 14 → 12 (matches CTA radius — visual family). */
html body .hero .hero-discount-callout {
    border-radius: var(--hr-radius-sm) !important;
}
html body .hero .hero-trust-bottom .trust-pill.trust-pill-wide {
    border-radius: var(--hr-radius-md) !important;
}


/* ─── (J) UNIFY — shadow light direction (everything neutral)
   Why: rev73's primary CTA and promo badge cast shadows
   down-right (positive x offset = light from upper-left).
   Every other surface (rating chip, callout, secondary CTA,
   trust pill) cast neutral shadows (x=0). Two shadow systems
   in one hero. Easier and more typical to converge on neutral
   drop shadows — that's what every premium card system uses.
   Snap the primary CTA + promo badge to neutral, preserving
   shadow depth + opacity so visual weight is held.           */
html body .hero .hero-cta .btn-primary.btn-large.hero-cta-shop {
    box-shadow:
        0 1.5px 0 rgba(255, 255, 255, 0.42) inset,
        0 -1.5px 0 rgba(0, 0, 0, 0.16) inset,
        0 3px 6px rgba(10, 10, 10, 0.12),
        0 10px 22px rgba(10, 10, 10, 0.14),
        0 22px 44px rgba(10, 10, 10, 0.10) !important;
}
html body .hero .hero-cta .btn-primary.btn-large.hero-cta-shop:hover {
    transform: translateY(-2px) !important;     /* reduced from -3 — more restrained lift */
    box-shadow:
        0 1.5px 0 rgba(255, 255, 255, 0.50) inset,
        0 -1.5px 0 rgba(0, 0, 0, 0.16) inset,
        0 5px 10px rgba(10, 10, 10, 0.16),
        0 16px 32px rgba(10, 10, 10, 0.18),
        0 30px 60px rgba(10, 10, 10, 0.14) !important;
}
html body .hero .hero-cta .btn-outline.btn-large.hero-cta-coa:hover {
    transform: translateY(-2px) !important;     /* matches primary — same hover system */
}

html body .hero .hero-promo-badge {
    /* R153-rev82: 64→76. R153-rev92: 76→92. R153-rev94: 92→104 +
       LAUNCH SPECIAL letter-spacing reset so it stops getting
       its first character clipped. Bigger disc reads as a real
       promo earner; type re-scaled so the column inside breathes. */
    width: 104px !important;
    height: 104px !important;
    box-shadow:
        0 1.5px 0 rgba(255, 255, 255, 0.25) inset,
        0 -1.5px 0 rgba(0, 0, 0, 0.20) inset,
        0 7px 16px rgba(13, 148, 136, 0.24),
        0 20px 44px rgba(13, 148, 136, 0.22),
        0 32px 64px rgba(10, 10, 10, 0.10) !important;
}
html body .hero .hero-promo-badge .hpb-num  { font-size: 30px !important; letter-spacing: -0.02em !important; }
html body .hero .hero-promo-badge .hpb-text { font-size: 12px !important; letter-spacing: 0.05em !important; }
html body .hero .hero-promo-badge .hpb-sub  {
    font-size: 8px !important;
    letter-spacing: 0.02em !important;       /* tight so "LAUNCH SPECIAL" fits the disc */
    white-space: nowrap !important;
}
html body .hero .hero-promo-badge:hover {
    transform: scale(1.04) !important;   /* drop the -3deg rotate — read was too playful */
}


/* ─── (K) REFINE — H1 line 1 contrast nudge
   Why: rev73 set "Premium Peptides." to #2a2a2e weight 600.
   At 52px display weight, #2a2a2e on cream was reading as
   noticeably soft — almost ghosted next to the teal line 2.
   Bumping to var(--hr-text-3) = #4a4a52 would push it
   further toward "preface"; instead we hold the color but
   snap it to the same family as our token system, and trust
   the weight differential (600 vs 900) to do the hierarchy
   work without making line 1 feel under-printed.            */
html body .hero .hero-title .hero-title-line {
    color: var(--hr-text-3) !important;   /* #4a4a52 — cleaner preface read than #2a2a2e */
}
/* Subhead text uses the body ink, not the preface tone */
html body .hero .hero-subheadline {
    color: var(--hr-text-2) !important;   /* #1a1a1a — body, not preface */
}


/* ─── (L) REFINE — rating chip stars + arrow restraint
   Why: amber stars at 12.5px were a pop of color that didn't
   match the teal-only palette. Drop their saturation a touch
   so they read as "review badge" not "vivid alert." Color
   stays in the amber family (Font Awesome default) but we
   soften via opacity. Hover stays crafted.                   */
html body .hero .hero-rating .hero-rating-stars {
    opacity: 0.92 !important;
}


/* ─── (M) REFINE — scroll indicator restraint
   Why: the SCROLL cue at the bottom is fine, but at 0.65
   opacity + 9px mono it's loud enough to register as
   another piece of microcopy competing with the tagline.
   Push to 0.5 — still visible, no longer assertive.        */
html body .hero .hero-scroll-indicator {
    opacity: 0.5 !important;
}


/* ─── (N) REFINE — trust pill icon size restraint
   Why: tpi-icon at 13px with opacity 0.85 — readable, but
   a 4-icon teal row directly beneath the launch-callout
   bolt and the COA-telemetry LED is exactly the "too many
   green dots" pattern. Drop opacity to 0.55 — icons still
   classify the stat, but stop competing for hue authority.
   The stat number is the focal element; the icon supports. */
html body .hero .hero-trust-bottom .trust-pill-item .tpi-icon {
    opacity: 0.55 !important;
}


/* ─── (O) REFINE — mobile tightening
   Why: with the editorial flourishes removed, mobile gets
   slightly more headroom. Pull the trust pill margin in,
   collapse the rating-chip+subhead vertical gap a touch
   so the H1 → CTA path is shorter on small screens.        */
@media (max-width: 768px) {
    html body .hero .hero-title            { margin: 0 0 16px 0 !important; }
    html body .hero .hero-rating           { margin: 0 0 18px 0 !important; }
    html body .hero .hero-subheadline      { margin: 0 0 18px 0 !important; }
    html body .hero .hero-tagline          { margin: 0 0 18px 0 !important; }
    html body .hero .hero-discount-callout { margin: 0 0 18px 0 !important; }
    html body .hero .hero-coa-telemetry    { margin: 0 0 20px 0 !important; }
    html body .hero .hero-cta              { margin: 0 0 24px 0 !important; }
    html body .hero .hero-trust-bottom     { margin-top: 12px !important; }
    html body .hero .hero-promo-badge      {
        width: 52px !important;
        height: 52px !important;
    }
    html body .hero .hero-promo-badge .hpb-num  { font-size: 14px !important; }
    html body .hero .hero-promo-badge .hpb-text { font-size: 6.5px !important; }
    html body .hero .hero-promo-badge .hpb-sub  { font-size: 6px !important; }
}


/* ═══════════════════════════════════════════════════════════
   END R153-rev74
   ═══════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   R153-rev79 — KILL SCROLL CUE + HARMONIZE HERO→DIVIDER SEAM
   ═══════════════════════════════════════════════════════════
   Diagnosed via preview_eval:
     - .hero-scroll-indicator (rev46 vestige) at y=1313, trust pill
       ends at y=1342 — SCROLL label overlapping the trust pill
       bottom. Visual collision.
     - .hero ends at y=1382 with cream bottom; .spectrum-divider
       starts at y=1382 with gradient #f6f3ed → #fafafa. The two
       cream tones disagree at the seam.
   Fix:
     1. Hide the scroll indicator (display: none).
     2. Spectrum-divider transparent → inherits hero/body surface.
   ═══════════════════════════════════════════════════════════ */

html body .hero .hero-scroll-indicator {
    display: none !important;
}

html body .spectrum-divider {
    background: transparent !important;
    border-top: none !important;
}

/* ═══════════════════════════════════════════════════════════
   END R153-rev79
   ═══════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   R153-rev87 — nudge hero trust pill down a tad
   Trust pill was riding at bottom:40px which left a perceptible
   gap below it. Owner wants it sitting closer to the hero's
   bottom edge. 40 → 20 nudges it down without crowding.
   ═══════════════════════════════════════════════════════════ */
html body .hero .hero-trust-bottom {
    bottom: 8px !important;
}
/* ═══════════════════════════════════════════════════════════
   END R153-rev87
   ═══════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   R153-rev95 — COA card backgrounds neutralized
   Owner asked to kill the rotating 6-pastel backgrounds behind
   each vial on the COA page (was a leftover from the
   "playful catalog" look). Single clean cream backdrop reads
   as a lab-document index instead of a marketing carousel.
   ═══════════════════════════════════════════════════════════ */
html body .coa-grid .coa-card .coa-card-image,
html body .coa-grid .coa-card:nth-child(6n+1) .coa-card-image,
html body .coa-grid .coa-card:nth-child(6n+2) .coa-card-image,
html body .coa-grid .coa-card:nth-child(6n+3) .coa-card-image,
html body .coa-grid .coa-card:nth-child(6n+4) .coa-card-image,
html body .coa-grid .coa-card:nth-child(6n+5) .coa-card-image,
html body .coa-grid .coa-card:nth-child(6n+6) .coa-card-image {
    background: #fafaf7 !important;     /* uniform cream — matches hero palette */
    border-bottom: 1px solid rgba(10, 10, 10, 0.05) !important;
}
/* ═══════════════════════════════════════════════════════════
   END R153-rev95
   ═══════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   R153-rev96 — IMPECCABLE + EMIL PASS
   Three changes driven by reading the impeccable + emil
   design skills:
     (A) Synthetic chromatogram → REAL-DATA purity bar chart.
         Hand-drawn 11-peak SVG was a saturated AI tell; an
         actual chart of recent batch purity is real data viz
         (explicitly permitted).
     (B) Trust-pill marginalia inert. The pen-mark CSS lives
         on but with no DOM target it's a no-op.
     (C) Motion polish per Emil: every interactive element gets
         the same ease-out-quart curve + an :active press state
         + transform composes cleanly (scale + lift, not all-300ms).
   ═══════════════════════════════════════════════════════════ */

/* ── (A) PURITY STRIP — replaces the hand-drawn trace ── */

/* The strip lives in the chromatogram slot above the H1.
   .hero-chromatogram base sizing (height 108, dashed bottom
   border, etc.) still applies — we only need to override
   internal layout. */
html body .hero .hero-chromatogram.hero-purity-strip {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
        "label axis"
        "chart axis" !important;
    grid-template-rows: auto 1fr !important;
    column-gap: 12px !important;
    row-gap: 6px !important;
    padding: 14px 0 4px 0 !important;
    height: auto !important;
    min-height: 108px !important;
}
html body .hero .hero-purity-strip .hch-label {
    grid-area: label !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    padding: 0 !important;
    background: transparent !important;
    font-size: 12px !important;
    letter-spacing: 0.02em !important;
    color: var(--hr-text-3, #4a4a52) !important;
    animation: none !important;
    opacity: 1 !important;
}
html body .hero .hero-purity-strip .hch-label strong {
    color: var(--hr-teal, #0d9488) !important;
    font-weight: 700 !important;
}

/* The chart itself: 8 bars laid out as a flex row, growing
   in from the bottom. Uses align-items:flex-end so each bar
   anchors to the baseline. */
html body .hero .hero-purity-strip .hps-chart {
    grid-area: chart !important;
    display: flex !important;
    align-items: flex-end !important;
    gap: 6px !important;
    height: 56px !important;
    width: 100% !important;
    border-bottom: 1px solid rgba(13, 148, 136, 0.18) !important;
}
html body .hero .hero-purity-strip .hps-bar {
    flex: 1 1 0 !important;
    height: 0;
    background: linear-gradient(180deg,
        var(--hr-teal-bright, #2dd4bf) 0%,
        var(--hr-teal, #0d9488) 100%) !important;
    border-radius: 3px 3px 0 0 !important;
    transition: filter 0.18s cubic-bezier(0.22, 1, 0.36, 1) !important;
    /* Draw-in animation. Height ramps from 0 → final value (the
       CSS custom prop --hps-h is set inline by JS). Emil-grade
       curve: ease-out-quart for the right "snap to position"
       feel — fast start, gentle settle, no bounce. */
    animation: r153r96-hps-grow 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--hps-delay, 0s) both !important;
    will-change: height, transform;
}
html body .hero .hero-purity-strip .hps-bar:hover {
    filter: brightness(1.12) !important;
}
@keyframes r153r96-hps-grow {
    from { height: 0; }
    to   { height: var(--hps-h, 0%); }
}

/* Y-axis labels on the right. Mono, faint, anchored to the
   3 gridlines (top/middle/bottom of the chart). */
html body .hero .hero-purity-strip .hps-axis {
    grid-area: axis !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    font-size: 9px !important;
    font-weight: 500 !important;
    letter-spacing: 0.05em !important;
    color: var(--hr-text-4, #6b6b73) !important;
    opacity: 0.7 !important;
    padding: 14px 0 0 0 !important;          /* aligns top label to chart top */
    line-height: 1 !important;
    text-align: right !important;
    width: 28px !important;
}

/* Hide the now-obsolete chromatogram label tick (no longer
   needed; the new label sits in its own grid area). */
html body .hero .hero-purity-strip .hch-label .hch-label-tick {
    display: none !important;
}

/* Reduced-motion: bars at final height, no animation. */
@media (prefers-reduced-motion: reduce) {
    html body .hero .hero-purity-strip .hps-bar {
        animation: none !important;
        height: var(--hps-h, 0%) !important;
    }
}

/* Mobile: hide the strip (matches the prior chromatogram
   hide rule — small viewports don't have the vertical
   budget for a data eyebrow). */
@media (max-width: 768px) {
    html body .hero .hero-content .hero-text > .hero-purity-strip {
        display: none !important;
    }
}

/* ── (C) MOTION POLISH (Emil-grade) ── */

/* Standard ease-out-quart curve for the brand. Define once,
   reference everywhere. */
:root {
    --r96-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Vials: add a tiny scale to the hover lift so the motion
   reads as material, not floating. Emil's rule: nothing in
   the real world appears from nothing. */
html body .hero .hero-visual .hero-vial-link {
    transition: transform 0.28s var(--r96-ease) !important;
}
html body .hero .hero-visual .hero-vial-link.hero-vial-link-main:hover {
    transform: translate(-50%, -50%) translateX(20px) translateY(-5px) scale(1.015) !important;
}
html body .hero .hero-visual .hero-vial-link.hero-vial-link-mots:hover {
    transform: rotate(2deg) translateY(-4px) scale(1.02) !important;
}
html body .hero .hero-visual .hero-vial-link.hero-vial-link-bpc:hover {
    transform: rotate(-1.5deg) translateY(-4px) scale(1.02) !important;
}
/* Press state: buttons must feel responsive to touch. */
html body .hero .hero-visual .hero-vial-link:active {
    transition-duration: 0.08s !important;
    filter: brightness(0.97) !important;
}

/* Trust pill items: add an :active press state.
   The existing rev88 hover lift stays. */
html body .hero .hero-trust-bottom .trust-pill .tpi-link:active {
    transform: translateY(-1px) !important;
    transition-duration: 0.08s !important;
}

/* CTAs: add an :active press response so users feel the click. */
html body .hero .hero-cta .btn-primary.hero-cta-shop:active,
html body .hero .hero-cta .btn-outline.hero-cta-coa:active {
    transform: translateY(0) scale(0.985) !important;
    transition-duration: 0.08s !important;
}

/* ═══════════════════════════════════════════════════════════
   END R153-rev96
   ═══════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   R153-rev97 — IMPECCABLE: typeset + quieter + clarify
   Three coordinated moves driven by $impeccable critique hero
   (29/40 baseline, eyebrow-grammar + Inter-monoculture + promo
   competing with credibility as the top three issues):

     (A) TYPESET. Bricolage Grotesque introduced as the display
         face. Inter stays as body. Eyebrow grammar slashed from
         15 tracked-uppercase elements down to a target ≤4 by
         converting trust pill labels + launch callout + chart
         label to Title Case Inter at body weight.

     (B) QUIETER (promo badge). Shrunk 104→60, dropped the
         "Launch Special" subline, shadow stack defanged.

     (C) CLARIFY. CTA pair restructured: Browse Catalog remains
         the primary button, View COA Portal demoted to an
         inline secondary link ("or verify a batch first"). Chart
         label expanded to spell Retatrutide. Vials retain tooltips.
   ═══════════════════════════════════════════════════════════ */

/* ── Display + body type tokens ── */
:root {
    --r97-font-display: 'Bricolage Grotesque', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --r97-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ── (A) TYPESET ── */

/* H1 uses the new display face. Width axis kept loose so the
   "Premium Peptides. / Modern Research." landed copy doesn't
   look condensed at large sizes.
   Specificity note: there's a global `html body main *:not(...)`
   override at line 21947 that forces Inter site-wide with a long
   :not() chain (~15 class-equivalents of specificity). The
   selectors below intentionally repeat .hero-title 20 times to
   defeat it cleanly without re-encoding the :not() chain. */

/* Weight handled separately on the simpler selector since
   weight cascade isn't blocked by the Inter override. */
html body .hero .hero-title,
html body .hero .hero-title .hero-title-line,
html body .hero .hero-title .hero-title-accent,
html body .hero .hero-title .hero-highlight {
    font-weight: 700 !important;
    letter-spacing: -0.025em !important;
}
/* Display weight floor at 700 — Bricolage carries headlines at
   semibold/bold. The "Modern Research." accent line stays the
   visual punch; nudge weight up slightly for contrast. */
html body .hero .hero-title .hero-title-accent {
    font-variation-settings: 'opsz' 96, 'wdth' 100, 'wght' 750 !important;
}

/* Chart label uses display face at body weight to tie it back
   to the H1 voice — no longer mono. Numbers stay weight-bold. */
html body .hero .hero-chromatogram.hero-purity-strip .hch-label {
    font-family: var(--r97-font-display) !important;
    font-variation-settings: 'opsz' 14, 'wght' 500 !important;
    font-size: 13px !important;
    letter-spacing: -0.005em !important;
    color: var(--hr-text-3, #4a4a52) !important;
    text-transform: none !important;
}
html body .hero .hero-purity-strip .hch-label strong {
    font-variation-settings: 'opsz' 14, 'wght' 700 !important;
    color: var(--hr-teal, #0d9488) !important;
}

/* TRUST PILL — collapse tracked-caps grammar.
   The labels (Orders Shipped, HPLC Purity, Tested, Dispatch)
   and the evidence lines were the 8 biggest contributors to
   the 15-eyebrow problem. Re-cast as natural sentence case in
   Inter; hierarchy now comes from weight + color + size, not
   from text-transform: uppercase + letter-spacing. */
html body .hero .hero-trust-bottom .trust-pill .tpi-link .tpi-stat {
    font-family: var(--r97-font-display) !important;
    font-variation-settings: 'opsz' 18, 'wght' 700 !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
    /* keep size from existing system; the family + weight do
       the heavy lifting */
}
html body .hero .hero-trust-bottom .trust-pill .tpi-link .tpi-label {
    font-family: var(--r97-font-body) !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 12.5px !important;
    color: var(--hr-text-3, #4a4a52) !important;
}
html body .hero .hero-trust-bottom .trust-pill .tpi-link .tpi-evidence {
    font-family: var(--r97-font-body) !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 11.5px !important;
    color: var(--hr-text-4, #6b6b73) !important;
    opacity: 0.85 !important;
}

/* Launch callout: drop the all-caps "LAUNCH SPECIAL" treatment
   since the HTML now reads as a natural sentence. */
html body .hero .hero-discount-callout span {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-family: var(--r97-font-body) !important;
}

/* Hero rating chip — tighten typography; let the stars + arrow
   carry the visual interest, not all-caps tracking. */
html body .hero .hero-rating .hero-rating-text {
    font-family: var(--r97-font-body) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 500 !important;
}

/* ── (B) QUIETER — promo badge ── */

/* Shrink 104→60, lighter shadow, no third subline (since the
   HTML no longer ships it). */
html body .hero .hero-promo-badge {
    width: 60px !important;
    height: 60px !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.20) inset,
        0 -1px 0 rgba(0, 0, 0, 0.16) inset,
        0 3px 8px rgba(13, 148, 136, 0.18),
        0 10px 22px rgba(10, 10, 10, 0.06) !important;
    /* Move slightly up + away from the edge so it sits as a
       quiet flag in the corner, not a competing focal point */
    top: 24px !important;
    right: 24px !important;
}
html body .hero .hero-promo-badge .hpb-num {
    font-family: var(--r97-font-display) !important;
    font-variation-settings: 'opsz' 14, 'wght' 700 !important;
    font-size: 16px !important;
    letter-spacing: -0.02em !important;
    line-height: 1 !important;
}
html body .hero .hero-promo-badge .hpb-text {
    font-family: var(--r97-font-body) !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    text-transform: lowercase !important;
    line-height: 1 !important;
    margin-top: 2px !important;
}
/* Hide rule for the now-removed .hpb-sub (defensive, in case any
   old cached HTML still has it). */
html body .hero .hero-promo-badge .hpb-sub {
    display: none !important;
}

/* ── (C) CLARIFY — CTA hierarchy ── */

/* The new .hero-cta-coa-link is an inline link, not a button.
   Reads as "or verify a batch first" with a teal accent + arrow.
   Aligned to the right of the primary CTA via the existing
   .hero-cta flex container. */
html body .hero .hero-cta {
    align-items: center !important;
    gap: 24px !important;
}
html body .hero .hero-cta .hero-cta-coa-link {
    font-family: var(--r97-font-body) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--hr-teal, #0d9488) !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 4px !important;
    border-radius: 6px !important;
    transition: color 0.18s ease, transform 0.18s ease !important;
    position: relative !important;
}
html body .hero .hero-cta .hero-cta-coa-link i {
    font-size: 11px !important;
    transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
html body .hero .hero-cta .hero-cta-coa-link:hover {
    color: #0a766b !important;
}
html body .hero .hero-cta .hero-cta-coa-link:hover i {
    transform: translateX(3px) !important;
}
html body .hero .hero-cta .hero-cta-coa-link:focus-visible {
    outline: 2px solid var(--hr-teal, #0d9488) !important;
    outline-offset: 3px !important;
}
html body .hero .hero-cta .hero-cta-coa-link:active {
    transform: translateY(1px) !important;
    transition-duration: 0.08s !important;
}

/* Mobile: stack the inline link below the primary CTA. */
@media (max-width: 768px) {
    html body .hero .hero-cta {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 14px !important;
    }
    html body .hero .hero-cta .hero-cta-coa-link {
        justify-content: center !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   END R153-rev97
   ═══════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   R153-rev97b — Specificity overrides for the Inter monoculture
   The site-wide `html body main *:not(...)` rule at line 21947
   has ~21 class-equivalents of specificity from its long :not()
   chain. Using #hero (ID selector, specificity tier 1,0,0) once
   beats any number of classes regardless of !important order.
   ═══════════════════════════════════════════════════════════ */

#hero .hero-title,
#hero .hero-title-line,
#hero .hero-title-accent,
#hero .hero-highlight {
    font-family: 'Bricolage Grotesque', 'Inter', -apple-system, sans-serif !important;
    letter-spacing: -0.025em !important;
    font-weight: 700 !important;
}
#hero .tpi-stat {
    font-family: 'Bricolage Grotesque', 'Inter', -apple-system, sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
}
#hero .hch-label {
    font-family: 'Bricolage Grotesque', 'Inter', -apple-system, sans-serif !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: -0.005em !important;
}
#hero .hpb-num {
    font-family: 'Bricolage Grotesque', 'Inter', -apple-system, sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
}
/* Body-family rules for the eyebrow cleanups */
#hero .tpi-label,
#hero .tpi-evidence {
    text-transform: none !important;
    letter-spacing: 0 !important;
}
#hero .hero-rating-text,
#hero .hero-discount-callout span {
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* ═══════════════════════════════════════════════════════════
   END R153-rev97b
   ═══════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   R153-rev98 — TERMINAL DRENCH + SICK MOTION
   Full hero transformation. Replaces cream backdrop with deep
   near-black, lets the teal accents become pure data signal,
   adds GSAP-driven motion choreography:

     1) Slot-machine reveal on the headline percentage
     2) Word-by-word stagger entrance with blur clear
     3) Magnetic CTA — Browse Catalog follows cursor proximity
     4) Bar overshoot bounce on the purity chart
     5) Cursor spotlight — 400px radial gradient tracks pointer
     6) Vial breath — gentle 6s scale loop
     7) Marquee velocity skew — tilts ±2° with scroll velocity
     8) GSAP ScrollTrigger parallax on the hero
     9) Lenis smooth-scroll inertia (page-wide)

   All motion gated behind prefers-reduced-motion.
   Hero is the only surface drenched; rest of page unchanged.
   ═══════════════════════════════════════════════════════════ */

/* ── (A) DRENCH — dark hero surface ── */

#hero.hero-drench {
    background: #0a0a0a !important;
    color: #f4f4f5 !important;
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
}
/* Kill the rev74 hero radial-glow + scan sweep backgrounds —
   they assume cream + would muddy a dark surface. */
#hero.hero-drench::before,
#hero.hero-drench::after,
#hero.hero-drench .hero-bg,
#hero.hero-drench .cy-scan-sweep,
#hero.hero-drench .cy-hex-overlay {
    display: none !important;
}

/* Subtle terminal grid that breathes. Low-alpha teal lines on
   the near-black to give the impression of measurement space,
   not generic dark theme. */
#hero.hero-drench .hero-grid {
    position: absolute !important;
    inset: 0 !important;
    background-image:
        linear-gradient(rgba(13, 148, 136, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(13, 148, 136, 0.05) 1px, transparent 1px) !important;
    background-size: 48px 48px !important;
    z-index: 0 !important;
    pointer-events: none !important;
    mask-image: radial-gradient(ellipse 80% 60% at 30% 50%, #000 30%, transparent 80%) !important;
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 30% 50%, #000 30%, transparent 80%) !important;
}

/* Cursor spotlight. Two custom props set by JS on every
   mousemove: --sp-x and --sp-y as percentages of the hero box.
   Falls back to center on touch / no-input. */
#hero.hero-drench .hero-spotlight {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background: radial-gradient(
        400px circle at var(--sp-x, 50%) var(--sp-y, 50%),
        rgba(13, 148, 136, 0.18),
        rgba(13, 148, 136, 0.05) 35%,
        transparent 60%
    ) !important;
    transition: background 0.08s linear !important;
}

/* Lift content above the backdrop layers. */
#hero.hero-drench .hero-content,
#hero.hero-drench .hero-promo-badge,
#hero.hero-drench .hero-trust-bottom,
#hero.hero-drench .hero-particles {
    position: relative !important;
    z-index: 3 !important;
}

/* ── (B) DRENCH — text color overrides ── */

/* H1 — Bricolage Grotesque, near-white on dark. The headline-num
   gets the teal accent so the data IS the visual punch. */
#hero.hero-drench .hero-title,
#hero.hero-drench .hero-title-line,
#hero.hero-drench .hero-title-accent {
    color: #fafafa !important;
}
#hero.hero-drench .hero-title-line {
    display: block !important;
    font-size: clamp(48px, 6.4vw, 88px) !important;
    line-height: 1.02 !important;
    margin-bottom: 12px !important;
}
#hero.hero-drench .hero-title-accent {
    display: block !important;
    font-size: clamp(28px, 3.4vw, 48px) !important;
    line-height: 1.15 !important;
    font-weight: 500 !important;
    color: #d4d4d8 !important;
    letter-spacing: -0.015em !important;
}

/* Slot-machine number — the 99.62%. Tabular nums lock the
   digit widths so the scramble doesn't jiggle the layout. */
#hero.hero-drench .hps-headline-num {
    color: #2dd4bf !important;
    font-variant-numeric: tabular-nums !important;
    font-feature-settings: "tnum" 1 !important;
    display: inline-block !important;
    text-shadow: 0 0 30px rgba(45, 212, 191, 0.35),
                 0 0 60px rgba(45, 212, 191, 0.15) !important;
}
#hero.hero-drench .hps-headline-dot {
    color: #2dd4bf !important;
    text-shadow: 0 0 30px rgba(45, 212, 191, 0.35) !important;
}

/* Per-word spans start hidden — GSAP reveals with stagger. */
#hero.hero-drench .hps-word {
    display: inline-block !important;
    opacity: 0;
    filter: blur(8px);
    transform: translateY(12px);
    will-change: opacity, filter, transform;
    margin-right: 0.22em !important;
}
#hero.hero-drench .hps-batch-count {
    color: #2dd4bf !important;
    font-weight: 700 !important;
}

/* Subheadline + hsh-cont chips: muted-ish on dark. */
#hero.hero-drench .hero-subheadline {
    color: #d4d4d8 !important;
}
#hero.hero-drench .hero-subheadline .hsh-cont {
    color: #f4f4f5 !important;
    background: rgba(13, 148, 136, 0.18) !important;
    border-color: rgba(45, 212, 191, 0.32) !important;
}

/* Rating chip — invert chrome for dark. */
#hero.hero-drench .hero-rating {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #f4f4f5 !important;
    backdrop-filter: blur(8px) !important;
}
#hero.hero-drench .hero-rating .hero-rating-text {
    color: #f4f4f5 !important;
}
#hero.hero-drench .hero-rating .hero-rating-text strong {
    color: #fafafa !important;
}

/* Launch callout — quieter on dark. */
#hero.hero-drench .hero-discount-callout {
    background: rgba(13, 148, 136, 0.10) !important;
    border-color: rgba(45, 212, 191, 0.30) !important;
    color: #e4e4e7 !important;
}
#hero.hero-drench .hero-discount-callout strong {
    color: #2dd4bf !important;
}

/* Inline COA link — keep teal but pop on dark. */
#hero.hero-drench .hero-cta-coa-link {
    color: #2dd4bf !important;
}
#hero.hero-drench .hero-cta-coa-link:hover {
    color: #5eead4 !important;
}

/* ── (C) PURITY CHART on dark ── */

#hero.hero-drench .hero-purity-strip {
    border-bottom-color: rgba(45, 212, 191, 0.18) !important;
}
#hero.hero-drench .hero-purity-strip .hch-label {
    color: #a1a1aa !important;
}
#hero.hero-drench .hero-purity-strip .hch-label strong {
    color: #2dd4bf !important;
}
#hero.hero-drench .hero-purity-strip .hps-bar {
    background: linear-gradient(180deg, #5eead4 0%, #14b8a6 80%, #0d9488 100%) !important;
    box-shadow:
        0 0 12px rgba(45, 212, 191, 0.25),
        0 0 24px rgba(45, 212, 191, 0.12) !important;
}
#hero.hero-drench .hero-purity-strip .hps-axis {
    color: #71717a !important;
}

/* ── (D) TRUST PILL on dark ── */

#hero.hero-drench .hero-trust-bottom .trust-pill.trust-pill-wide {
    background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.02) 100%) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(12px) !important;
}
#hero.hero-drench .trust-pill .tpi-link .tpi-stat {
    color: #fafafa !important;
}
#hero.hero-drench .trust-pill .tpi-link .tpi-label {
    color: #d4d4d8 !important;
}
#hero.hero-drench .trust-pill .tpi-link .tpi-evidence {
    color: #a1a1aa !important;
}
#hero.hero-drench .trust-pill .tpi-link .tpi-icon {
    color: #2dd4bf !important;
}
#hero.hero-drench .trust-pill .tpi-link:hover {
    background: rgba(45, 212, 191, 0.08) !important;
}
#hero.hero-drench .trust-pill .trust-pill-divider {
    background: rgba(255, 255, 255, 0.12) !important;
}

/* ── (E) CTAs on dark ── */

#hero.hero-drench .btn-primary.hero-cta-shop {
    background: #2dd4bf !important;
    color: #0a0a0a !important;
    border-color: transparent !important;
    box-shadow:
        0 0 40px rgba(45, 212, 191, 0.35),
        0 10px 30px rgba(45, 212, 191, 0.20) !important;
    will-change: transform;
}
#hero.hero-drench .btn-primary.hero-cta-shop:hover {
    background: #5eead4 !important;
    color: #0a0a0a !important;
    box-shadow:
        0 0 60px rgba(45, 212, 191, 0.50),
        0 14px 36px rgba(45, 212, 191, 0.30) !important;
}

/* ── (F) PROMO BADGE on dark ── */

#hero.hero-drench .hero-promo-badge {
    background: #2dd4bf !important;
    color: #0a0a0a !important;
    box-shadow:
        0 0 30px rgba(45, 212, 191, 0.40),
        0 10px 24px rgba(0, 0, 0, 0.40) !important;
}
#hero.hero-drench .hero-promo-badge .hpb-num,
#hero.hero-drench .hero-promo-badge .hpb-text {
    color: #0a0a0a !important;
}

/* ── (G) MOTION — magnetic CTA, vial breath, etc. ── */

/* Magnetic CTA: JS writes --mag-x and --mag-y as px values.
   We use translate to compose with the existing rev97 transforms. */
#hero.hero-drench .btn-primary.hero-cta-shop {
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                background 0.2s ease,
                box-shadow 0.3s ease,
                color 0.2s ease !important;
    transform: translate(var(--mag-x, 0px), var(--mag-y, 0px)) !important;
}
#hero.hero-drench .btn-primary.hero-cta-shop:hover {
    transform: translate(var(--mag-x, 0px), var(--mag-y, 0px)) translateY(-2px) scale(1.02) !important;
}

/* Vial breath — gentle 6s loop, ±0.8% scale. Almost imperceptible
   but the photos look alive vs static. */
@keyframes r153r98-vial-breath {
    0%, 100% { transform: var(--vb-base, none) scale(1); }
    50%      { transform: var(--vb-base, none) scale(1.008); }
}
#hero.hero-drench .hero-vial-link.hero-vial-link-main {
    --vb-base: translate(-50%, -50%) translateX(20px);
    animation: r153r98-vial-breath 6s ease-in-out infinite !important;
}
#hero.hero-drench .hero-vial-link.hero-vial-link-mots {
    --vb-base: rotate(2deg);
    animation: r153r98-vial-breath 7s ease-in-out infinite !important;
    animation-delay: -2s !important;
}
#hero.hero-drench .hero-vial-link.hero-vial-link-bpc {
    --vb-base: rotate(-1.5deg);
    animation: r153r98-vial-breath 6.5s ease-in-out infinite !important;
    animation-delay: -1s !important;
}

/* Top trust marquee — the horizontal scroll keyframe (trustMarqueeScroll)
   owns `transform`. The old scroll-velocity skewY(var(--mq-skew)) rule
   declared transform !important, which overrode the keyframe and froze the
   marquee at translateX(0). Removed so the marquee scrolls again. R161-B. */
.trust-marquee .trust-marquee-track {
    will-change: transform;
}

/* ── (H) REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
    #hero.hero-drench .hps-word {
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
    }
    #hero.hero-drench .hero-vial-link {
        animation: none !important;
    }
    #hero.hero-drench .hero-spotlight {
        background: radial-gradient(
            400px circle at 50% 50%,
            rgba(13, 148, 136, 0.12),
            transparent 60%
        ) !important;
    }
    .trust-marquee .trust-marquee-track {
        transform: none !important;
    }
}

/* ── (I) MOBILE ADJUSTMENTS ── */
@media (max-width: 768px) {
    #hero.hero-drench .hero-grid {
        background-size: 32px 32px !important;
    }
    #hero.hero-drench .hero-spotlight {
        display: none !important;
    }
    #hero.hero-drench .hero-title-line {
        font-size: clamp(36px, 9vw, 48px) !important;
    }
    #hero.hero-drench .hero-title-accent {
        font-size: clamp(20px, 4.5vw, 28px) !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   END R153-rev98
   ═══════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   R153-rev88 — TRUST PILL UPGRADE: links + evidence + count-up
   Turns the four passive stat tiles into active proof surfaces:
     1) Each tile is an <a> routing into its real proof page
        (reviews, COA portal, shipping policy).
     2) Adds a tiny mono "evidence" microcopy line under each
        primary label — specific verifiable fact ("latest 99.96%",
        "cutoff 3:00 PM ET", etc.).
     3) Stats count up from 0 on scroll-in (see inline JS).
   ═══════════════════════════════════════════════════════════ */

/* The <a> needs anchor-reset and pointer events restored
   (the parent .hero-trust-bottom has pointer-events:none so
   the absolute pill doesn't intercept clicks across the hero). */
html body .hero .hero-trust-bottom .trust-pill .tpi-link {
    pointer-events: auto !important;
    text-decoration: none !important;
    color: inherit !important;
    cursor: pointer !important;
    border-radius: 10px !important;
    padding: 8px 10px !important;
    margin: -8px -2px !important;        /* negative so visual size unchanged */
    transition:
        transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
        background-color 0.18s ease,
        box-shadow 0.18s ease !important;
    position: relative !important;
}
/* Subtle lift + cream wash on hover. Reads as "click me" without
   shouting. box-shadow keeps the light direction consistent
   with the rest of the hero. */
html body .hero .hero-trust-bottom .trust-pill .tpi-link:hover,
html body .hero .hero-trust-bottom .trust-pill .tpi-link:focus-visible {
    transform: translateY(-2px) !important;
    background-color: rgba(13, 148, 136, 0.05) !important;
    box-shadow: 0 6px 18px rgba(10, 10, 10, 0.06) !important;
}
html body .hero .hero-trust-bottom .trust-pill .tpi-link:focus-visible {
    outline: 2px solid rgba(13, 148, 136, 0.55) !important;
    outline-offset: 2px !important;
}
/* On hover, the icon brightens slightly + the evidence line
   tones up — small reward for the engaged user. */
html body .hero .hero-trust-bottom .trust-pill .tpi-link:hover .tpi-icon {
    opacity: 0.9 !important;
}
html body .hero .hero-trust-bottom .trust-pill .tpi-link:hover .tpi-evidence {
    color: var(--hr-teal, #0d9488) !important;
}

/* Evidence microcopy line — the specific fact backing the claim. */
html body .hero .hero-trust-bottom .trust-pill .tpi-link .tpi-evidence {
    margin-top: 4px !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em !important;
    text-transform: none !important;       /* mono already gives the lab feel */
    color: var(--hr-text-4, #6b6b73) !important;
    opacity: 0.78 !important;
    transition: color 0.18s ease !important;
    white-space: nowrap !important;
}

/* Count-up animation: stats start at 0 visually and animate up
   via JS (writing textContent). No CSS keyframe — the value
   change drives the visual change. We add a small pulse on the
   number ONCE when the count completes for a satisfying finish. */
html body .hero .hero-trust-bottom .trust-pill .tpi-stat.tpi-stat-final {
    animation: r153r88-stat-settle 0.45s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}
@keyframes r153r88-stat-settle {
    0%   { transform: scale(1.05); color: var(--hr-teal, #0d9488); }
    100% { transform: scale(1); }
}

/* Mobile: links keep working but drop the negative-margin
   hover bubble so they don't blow out the row. */
@media (max-width: 768px) {
    html body .hero .hero-trust-bottom .trust-pill .tpi-link {
        padding: 6px 8px !important;
        margin: 0 !important;
    }
    html body .hero .hero-trust-bottom .trust-pill .tpi-link .tpi-evidence {
        font-size: 9.5px !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   END R153-rev88
   ═══════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   R153-rev89 — MARGINALIA + LIVE BEACON
   Three additions:
     1) Lab-notebook hand-drawn SVG marginalia over the trust pill
        (checkmark, circle, arrow, underline) drawn in via
        stroke-dasharray with a staggered cascade.
     2) Live-batch pulse beacon tucked into the chromatogram strip
        ─ a pulsing teal dot + mono microcopy. JS reads the count
        from window.COA_DATA so it stays honest.
     3) Count-up extensions live in inline JS — no CSS surface here.
   ═══════════════════════════════════════════════════════════ */

/* ── (A) LAB MARGINALIA ── */

/* R153-rev90: marginalia SVG moved INSIDE .trust-pill so its
   viewBox aligns with the actual pill bounds (was anchored to
   the wider .hero-trust-bottom wrapper which left annotations
   floating off the sides). Pill needs position:relative so the
   absolute SVG anchors to it. */
html body .hero .hero-trust-bottom .trust-pill {
    position: relative !important;
}
html body .hero .hero-trust-bottom .trust-pill .hero-trust-marginalia {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
    z-index: 6 !important;             /* above the pill background, below click */
    overflow: visible !important;
}
/* Common stroke styling — "pen ink" feel via darker teal +
   round caps + slight outer glow. */
html body .hero .hero-trust-bottom .hero-trust-marginalia .htm-mark {
    fill: none !important;
    stroke: #0a766b !important;
    stroke-width: 2.2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    vector-effect: non-scaling-stroke !important;
    opacity: 0;
    filter: drop-shadow(0 0 1.5px rgba(13, 148, 136, 0.18));
    pathLength: 1;
    stroke-dasharray: 1 1;
    stroke-dashoffset: 1;
    animation:
        r153r89-htm-fadein 0.25s ease-out forwards,
        r153r89-htm-draw 0.85s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
@keyframes r153r89-htm-fadein {
    to { opacity: 0.92; }
}
@keyframes r153r89-htm-draw {
    to { stroke-dashoffset: 0; }
}
/* Stagger each annotation so they appear sequentially after
   the rest of the hero settles (delay = 1.8s baseline + 0.25s
   per annotation). Total cascade: ~1.8s → 3.0s. */
html body .hero .hero-trust-bottom .hero-trust-marginalia .htm-check {
    animation-delay: 1.8s, 1.8s;
}
html body .hero .hero-trust-bottom .hero-trust-marginalia .htm-circle {
    animation-delay: 2.05s, 2.05s;
    animation-duration: 0.25s, 1.1s;   /* circle is longest path */
}
html body .hero .hero-trust-bottom .hero-trust-marginalia .htm-arrow {
    animation-delay: 2.5s, 2.5s;
}
html body .hero .hero-trust-bottom .hero-trust-marginalia .htm-arrow-head {
    animation-delay: 2.85s, 2.85s;
    animation-duration: 0.25s, 0.35s;
}
html body .hero .hero-trust-bottom .hero-trust-marginalia .htm-underline {
    animation-delay: 2.7s, 2.7s;
}

/* ── (B) LIVE BEACON ── */

/* Sits inside the chromatogram wrapper (which is position:relative).
   Top-right of the strip, just above the dashed hairline. */
html body .hero .hero-chromatogram .hero-live-beacon {
    position: absolute !important;
    top: 2px !important;
    right: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 10px 4px 8px !important;
    background: rgba(250, 248, 243, 0.88) !important;
    border: 1px solid rgba(13, 148, 136, 0.22) !important;
    border-radius: 999px !important;
    box-shadow: 0 2px 8px rgba(10, 10, 10, 0.04) !important;
    z-index: 5 !important;
    /* Beacon enters with the chromatogram fade. */
    opacity: 0;
    animation: r153r81-hch-fadein 0.6s ease-out 0.6s forwards;
}
/* The pulsing dot — radiating ring effect. The dot itself is a
   small filled circle; the ::after pseudo creates the expanding
   ring that fades as it grows. */
html body .hero .hero-chromatogram .hero-live-beacon .hlb-dot {
    position: relative !important;
    display: inline-block !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: var(--hr-teal, #0d9488) !important;
    box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.15) !important;
}
html body .hero .hero-chromatogram .hero-live-beacon .hlb-dot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: var(--hr-teal, #0d9488);
    opacity: 0.55;
    animation: r153r89-hlb-pulse 3s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes r153r89-hlb-pulse {
    0%   { transform: scale(1);   opacity: 0.55; }
    70%  { transform: scale(3.2); opacity: 0;    }
    100% { transform: scale(3.2); opacity: 0;    }
}
html body .hero .hero-chromatogram .hero-live-beacon .hlb-text {
    font-family: 'JetBrains Mono', ui-monospace, monospace !important;
    font-size: 9.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0.06em !important;
    color: var(--hr-text-3, #4a4a52) !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}
html body .hero .hero-chromatogram .hero-live-beacon .hlb-count {
    color: var(--hr-teal, #0d9488) !important;
    font-weight: 700 !important;
}

/* ── (C) Reduced-motion: no marginalia drawing, no pulse ── */
@media (prefers-reduced-motion: reduce) {
    html body .hero .hero-trust-bottom .hero-trust-marginalia .htm-mark {
        animation: none !important;
        opacity: 0.85 !important;
        stroke-dashoffset: 0 !important;
    }
    html body .hero .hero-chromatogram .hero-live-beacon .hlb-dot::after {
        animation: none !important;
        opacity: 0 !important;
    }
}

/* ── (D) Mobile: hide marginalia (pill is too narrow) +
       shrink beacon (chromatogram is already hidden so beacon
       reads only on tablet+ anyway, but be safe) ── */
@media (max-width: 768px) {
    html body .hero .hero-trust-bottom .hero-trust-marginalia {
        display: none !important;
    }
    html body .hero .hero-chromatogram .hero-live-beacon {
        display: none !important;          /* chromatogram itself is hidden ≤768 */
    }
}

/* ═══════════════════════════════════════════════════════════
   END R153-rev89
   ═══════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   R153-rev81 — CREATIVE VISUAL LAYER
   Adds two on-brand "wow" elements without breaking the
   research/clinical tone:

     (1) AMBIENT HPLC CHROMATOGRAM TRACE
         An SVG analytical-chemistry curve sitting behind the H1.
         Draws itself left-to-right over ~3.0s via stroke-dasharray
         on page load. Low-alpha teal. Visually echoes the kind of
         purity report shipped with every Elytra order — turns the
         hero text column into a "this brand actually does the
         science" surface instead of a generic marketing block.

     (2) 3D VIAL TILT ON CURSOR
         Vials in the hero-visual subtly rotateY/rotateX (max ~7°)
         to "face" the cursor as it moves across the hero. JS writes
         --hp-tilt-x / --hp-tilt-y on .hero-visual; we compose the
         tilt on the inner <picture>/<img> so it doesn't collide
         with the anchor wrapper's positioning + entrance-animation
         transforms.

   All motion gated behind (max-width > 768px) AND not
   prefers-reduced-motion (same gates the existing parallax uses).
   ═══════════════════════════════════════════════════════════ */

/* ── (A) HPLC CHROMATOGRAM ── */

/* hero-text is already a flex/block column inside .hero-content;
   we layer the SVG absolutely behind everything in that column.
   Z=0 keeps it strictly below H1/rating/subhead/etc (which sit
   at default z=auto > 0 because hero-text is position:relative). */
html body .hero .hero-content .hero-text {
    position: relative !important;
}
html body .hero .hero-content .hero-text > * {
    position: relative !important;
    z-index: 1 !important;
}
html body .hero .hero-content .hero-text > .hero-chromatogram {
    /* R153-rev85: dedicated strip above the H1.
       R153-rev86: now a <div> wrapper holding both the SVG
       trace and an HTML <span> label, so the label can be
       pixel-accurate body-text size instead of SVG-stretched. */
    position: relative !important;
    display: block !important;
    width: 100% !important;
    /* Bumped 84 → 108 to give the HTML label its own row
       above the peaks without crowding the tallest peak. */
    height: 108px !important;
    margin: 0 0 18px 0 !important;
    padding: 22px 0 4px 0 !important;
    border-bottom: 1px dashed rgba(13, 148, 136, 0.22) !important;
    z-index: auto !important;
    pointer-events: none !important;
    opacity: 0;
    animation: r153r81-hch-fadein 0.6s ease-out 0.15s forwards;
    overflow: visible !important;
}
/* SVG fills the strip below the label row. */
html body .hero .hero-chromatogram .hch-svg {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
}
/* R153-rev96: label re-centered above the tallest peak per owner —
   beacon is gone so there's no horizontal split to maintain. */
html body .hero .hero-chromatogram .hch-label {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    font-family: 'JetBrains Mono', ui-monospace, monospace !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em !important;
    color: var(--hr-teal, #0d9488) !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    padding: 3px 8px !important;
    background: rgba(250, 248, 243, 0.85) !important;
    border-radius: 4px !important;
    opacity: 0;
    animation: r153r81-hch-callout-in 0.5s ease-out 2.4s forwards;
}
/* R153-rev96: restore the tick connector now that the label is
   back over the tallest peak. */
html body .hero .hero-chromatogram .hch-label .hch-label-tick {
    display: block !important;
}
html body .hero .hero-chromatogram .hch-label strong {
    font-weight: 700 !important;
    color: #0a766b !important;       /* slightly darker teal for the % */
}
html body .hero .hero-chromatogram .hch-label .hch-label-tick {
    position: absolute !important;
    left: 50% !important;
    bottom: -6px !important;
    transform: translateX(-50%) !important;
    width: 1px !important;
    height: 6px !important;
    background: var(--hr-teal, #0d9488) !important;
    opacity: 0.55 !important;
}
/* R153-rev85: chromatogram now owns its own strip — bump
   final opacity to 1.0 since it's no longer competing with
   overlaid text. */
@keyframes r153r81-hch-fadein {
    to { opacity: 1; }
}

/* Faint horizontal gridlines — analytical-chart language.
   R153-rev83: stroke-width 0.5 → 0.7, opacity 0.18 → 0.28. */
html body .hero .hero-chromatogram .hch-grid {
    stroke: var(--hr-teal, #0d9488);
    stroke-width: 0.7;
    opacity: 0.28;
    stroke-dasharray: 2 3;
    vector-effect: non-scaling-stroke;
}

/* The main trace. Stroke-dasharray + dashoffset = classic
   line-draw animation. pathLength=1 normalizes math regardless
   of actual path length.
   R153-rev83: stroke 1.4 → 2.1, opacity 0.85 → 1.0, drop-shadow
   strengthened — the trace itself is the design idea, so it
   should be unmistakably the trace.                          */
html body .hero .hero-chromatogram .hch-trace {
    fill: none;
    stroke: var(--hr-teal, #0d9488);
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 1.0;
    vector-effect: non-scaling-stroke;
    pathLength: 1;
    stroke-dasharray: 1 1;
    stroke-dashoffset: 1;
    animation: r153r81-hch-draw 3.0s cubic-bezier(0.65, 0, 0.35, 1) 0.4s forwards;
    filter: drop-shadow(0 0 5px rgba(13, 148, 136, 0.32));
}
@keyframes r153r81-hch-draw {
    to { stroke-dashoffset: 0; }
}

/* Callout marker (tick + label) near the tallest peak. Fades in
   after the trace draws to the peak (~2.0s into the 3.0s draw).
   R153-rev83: opacity 0.95 → 1.0. */
html body .hero .hero-chromatogram .hch-callout {
    opacity: 0;
    animation: r153r81-hch-callout-in 0.5s ease-out 2.4s forwards;
}
@keyframes r153r81-hch-callout-in {
    to { opacity: 1.0; }
}
/* R153-rev83: callout line stroke 0.6 → 0.9, opacity 0.55 → 0.75. */
html body .hero .hero-chromatogram .hch-callout-line {
    stroke: var(--hr-teal, #0d9488);
    stroke-width: 0.9;
    opacity: 0.75;
    vector-effect: non-scaling-stroke;
}
/* R153-rev83: callout text 5.5px → 8px, weight 500 → 600, opacity
   0.78 → 1.0. Old size was illegible at the viewBox scale we
   render at — bumping it makes the GLP-3 / Batch / 99.96% line
   actually do its storytelling job.                          */
html body .hero .hero-chromatogram .hch-callout-text {
    fill: var(--hr-teal, #0d9488);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.04em;
    opacity: 1.0;
    text-rendering: geometricPrecision;
}

/* ── (B) 3D VIAL TILT — REMOVED IN R153-rev84 ──
   Owner asked for vials to react ONLY on direct hover (the
   pre-existing lift in rev39 §hover), not to cursor movement
   across the hero. The JS no longer writes --hp-tilt-x/y,
   and we leave no CSS rules applying transforms to the inner
   picture/img so the anchor wrapper's own
   translate/rotate transforms can do their job unobstructed. */

/* ── (C) MOTION + MOBILE GATES ── */

/* Reduced-motion: kill the draw animation but leave the final
   curve visible. No tilt. */
@media (prefers-reduced-motion: reduce) {
    html body .hero .hero-content .hero-text > .hero-chromatogram {
        animation: none !important;
        opacity: 0.45 !important;
    }
    html body .hero .hero-chromatogram .hch-trace {
        animation: none !important;
        stroke-dashoffset: 0 !important;
    }
    html body .hero .hero-chromatogram .hch-callout {
        animation: none !important;
        opacity: 0.85 !important;
    }
    /* R153-rev84: tilt rules removed — no reset needed. */
}

/* Mobile: hide chromatogram entirely (text column compresses
   vertically and the trace would overlap meaningful copy at
   small sizes). */
@media (max-width: 768px) {
    html body .hero .hero-content .hero-text > .hero-chromatogram {
        display: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   END R153-rev81
   ═══════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   R154-rev1 — READING ROOM (PHASE C: TOKENS + BASE LAYOUT)
   Premium instrument maker aesthetic + 20% live data accent.
   All styles scoped under .hero.hero-reading-room. Removing
   the .hero-reading-room class reverts to rev98 Terminal Drench
   in one keystroke.
   ═══════════════════════════════════════════════════════════ */

/* ── R154 tokens ── */
:root {
    /* Stage + ink */
    --r154-stage:          #06070A;
    --r154-ink-primary:    #fbfaf6;
    --r154-ink-secondary:  #d6d4cf;
    --r154-ink-tertiary:   #a8a6a1;
    --r154-ink-quaternary: #5a5854;

    /* Surfaces + spotlight */
    --r154-spotlight-warm: rgba(251, 250, 246, 0.10);
    --r154-surface-1:      rgba(255, 255, 255, 0.03);
    --r154-surface-2:      rgba(255, 255, 255, 0.06);
    --r154-rule:           rgba(255, 255, 255, 0.08);

    /* Live data (RESERVED — 3 uses only) */
    --r154-data-active:    #0d9488;
    --r154-data-glow:      rgba(13, 148, 136, 0.25);

    /* Motion curves */
    --r154-ease-out-quart:   cubic-bezier(0.165, 0.84, 0.44, 1);
    --r154-ease-out-expo:    cubic-bezier(0.16, 1, 0.3, 1);
    --r154-ease-in-out-expo: cubic-bezier(0.87, 0, 0.13, 1);

    /* Spacing */
    --r154-s-1: 4px;
    --r154-s-2: 8px;
    --r154-s-3: 12px;
    --r154-s-4: 16px;
    --r154-s-5: 24px;
    --r154-s-6: 40px;
    --r154-s-7: 64px;
    --r154-s-8: 96px;
    --r154-s-9: 152px;
}


/* ── Hero base — drenched dark stage ── */
#hero.hero-reading-room {
    background: var(--r154-stage) !important;
    color: var(--r154-ink-primary) !important;
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
    min-height: 100vh !important;
    padding: var(--r154-s-9) var(--r154-s-7) var(--r154-s-7) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) !important;
    column-gap: var(--r154-s-7) !important;
    align-items: center !important;
}

/* Hide every rev97/rev98 hero internal that we replaced. The HTML
   comments these out at the source, but defense-in-depth — anything
   that survived from rev74/rev79/rev87 also goes silent. */
#hero.hero-reading-room .hero-bg,
#hero.hero-reading-room .hero-particles,
#hero.hero-reading-room .cy-scan-sweep,
#hero.hero-reading-room .cy-hex-overlay,
#hero.hero-reading-room .hero-grid {
    display: none !important;
}


/* ── Hero stat — the centerpiece ── */
#hero.hero-reading-room .hero-stat {
    margin: 0 0 var(--r154-s-4) 0 !important;
    font-family: 'Bricolage Grotesque', 'Inter', -apple-system, sans-serif !important;
    font-weight: 700 !important;
    font-size: clamp(96px, 12vw, 180px) !important;
    line-height: 0.92 !important;
    letter-spacing: -0.025em !important;
    color: var(--r154-ink-primary) !important;
    text-wrap: balance !important;
}
#hero.hero-reading-room .hero-stat-num {
    display: inline-block !important;
    font-variant-numeric: tabular-nums !important;
    font-feature-settings: "tnum" 1 !important;
    text-shadow: 0 0 40px var(--r154-data-glow), 0 0 80px rgba(13, 148, 136, 0.10) !important;
}


/* ── Mono subtitle ── */
#hero.hero-reading-room .hero-mono-sub {
    margin: 0 0 var(--r154-s-6) 0 !important;
    font-family: 'JetBrains Mono', ui-monospace, monospace !important;
    font-weight: 500 !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--r154-ink-tertiary) !important;
}

/* ── Inline CTA — no button chrome ── */
#hero.hero-reading-room .hero-cta-r154 {
    display: block !important;
}
#hero.hero-reading-room .hero-cta-inline {
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--r154-s-3) !important;
    font-family: 'Inter', -apple-system, sans-serif !important;
    font-weight: 500 !important;
    font-size: 17px !important;
    line-height: 1 !important;
    color: var(--r154-ink-secondary) !important;
    text-decoration: none !important;
    padding: var(--r154-s-4) 0 !important;  /* 16px vert = 17 + 16+16 = 49px > 44 */
    min-height: 44px !important;
    border-bottom: 1px solid transparent !important;
    transition:
        color 0.25s var(--r154-ease-out-quart),
        border-color 0.25s var(--r154-ease-out-quart) !important;
}
#hero.hero-reading-room .hero-cta-inline:hover {
    color: var(--r154-data-active) !important;
    border-bottom-color: var(--r154-data-active) !important;
}
#hero.hero-reading-room .hero-cta-arrow {
    display: inline-block !important;
    transition: transform 0.25s var(--r154-ease-out-expo) !important;
}
#hero.hero-reading-room .hero-cta-inline:hover .hero-cta-arrow {
    transform: translateX(4px) !important;
}
#hero.hero-reading-room .hero-cta-inline:focus-visible {
    outline: 2px solid var(--r154-data-active) !important;
    outline-offset: 4px !important;
    border-radius: 2px !important;
}
#hero.hero-reading-room .hero-cta-inline:active {
    transform: translateY(1px) !important;
}


/* ── Vials on the dark stage ── */
#hero.hero-reading-room .hero-visual {
    position: relative !important;
    grid-column: 2 !important;
    height: 100% !important;
    min-height: 600px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 3 !important;
}
/* Vials inherit existing positioning but get dramatic lighting */
#hero.hero-reading-room .hero-vial-link {
    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.6))
            drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4)) !important;
}


/* ── (D) SPOTLIGHT + VIAL SHADOWS ── */
#hero.hero-reading-room .hero-spotlight {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background: radial-gradient(
        circle 600px at var(--r154-sp-x, 50%) var(--r154-sp-y, 50%),
        var(--r154-spotlight-warm),
        transparent 70%
    ) !important;
    opacity: 1 !important;
    transition: background 0.08s linear !important;
    mix-blend-mode: screen !important;
}


#hero.hero-reading-room .hero-vial-shadows {
    position: absolute !important;
    bottom: 8% !important;
    left: 0 !important;
    width: 100% !important;
    height: 60px !important;
    z-index: 2 !important;
    pointer-events: none !important;
    overflow: visible !important;
}
#hero.hero-reading-room .hvs-shadow {
    fill: #000 !important;
    opacity: 0.5 !important;
    filter: blur(12px) !important;
    transform-origin: center !important;
    transform: translateX(var(--r154-shadow-shift-x, 0px)) scaleX(var(--r154-shadow-scale-x, 1)) !important;
    transition: transform 0.18s var(--r154-ease-out-quart) !important;
}


/* ── (E) PAGE-LOAD CHOREOGRAPHY initial states ── */
#hero.hero-reading-room[data-r154-loading] .hero-stat-num {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(8px);
}
#hero.hero-reading-room[data-r154-loading] .hero-mono-sub {
    opacity: 0;
    transform: translateY(8px);
}
#hero.hero-reading-room[data-r154-loading] .hero-cta-r154 {
    opacity: 0;
    transform: translateY(12px);
}
#hero.hero-reading-room[data-r154-loading] .hero-ops {
    opacity: 0;
    transform: translateY(-8px);
}
#hero.hero-reading-room[data-r154-loading] .hero-visual {
    opacity: 0;
    transform: scale(0.99);
}


/* ── (F) OPERATIONS PANEL ── */
#hero.hero-reading-room .hero-ops {
    position: absolute !important;
    top: var(--r154-s-6) !important;
    right: var(--r154-s-6) !important;
    width: 280px !important;
    background: var(--r154-surface-1) !important;
    border: 1px solid var(--r154-rule) !important;
    border-radius: 6px !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    z-index: 4 !important;
    padding: var(--r154-s-3) var(--r154-s-4) !important;
}
#hero.hero-reading-room .hero-ops-header {
    margin: 0 0 var(--r154-s-3) 0 !important;
    padding: 0 0 var(--r154-s-2) 0 !important;
    border-bottom: 1px solid var(--r154-rule) !important;
}
#hero.hero-reading-room .hero-ops-label {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em !important;
    color: var(--r154-ink-tertiary) !important;
    text-transform: uppercase !important;
}
#hero.hero-reading-room .hero-ops-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
#hero.hero-reading-room .hero-ops-row {
    display: grid !important;
    grid-template-columns: 12px 1fr 1fr auto !important;
    align-items: center !important;
    gap: var(--r154-s-2) !important;
    padding: var(--r154-s-3) var(--r154-s-1) !important;  /* 12px vert for 44px target */
    min-height: 44px !important;
    text-decoration: none !important;
    color: var(--r154-ink-secondary) !important;
    border-radius: 4px !important;
    transition: background 0.2s var(--r154-ease-out-quart) !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 12px !important;
    font-variant-numeric: tabular-nums !important;
}
#hero.hero-reading-room .hero-ops-row:hover {
    background: var(--r154-surface-2) !important;
    padding-left: var(--r154-s-2) !important;
    padding-right: var(--r154-s-2) !important;
}
#hero.hero-reading-room .hero-ops-row:focus-visible {
    outline: 2px solid var(--r154-data-active) !important;
    outline-offset: -2px !important;
}
#hero.hero-reading-room .hero-ops-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: var(--r154-ink-quaternary) !important;
}
#hero.hero-reading-room .hero-ops-row.is-recent .hero-ops-dot {
    background: var(--r154-data-active) !important;
    box-shadow: 0 0 0 var(--r154-data-glow) !important;
    animation: r154-ops-pulse 3s ease-in-out infinite !important;
}
@keyframes r154-ops-pulse {
    0%, 100% { box-shadow: 0 0 0 transparent; }
    50%      { box-shadow: 0 0 8px var(--r154-data-glow); }
}
#hero.hero-reading-room .hero-ops-batch {
    color: var(--r154-ink-primary) !important;
}
#hero.hero-reading-room .hero-ops-purity {
    color: var(--r154-data-active) !important;
    text-align: right !important;
}
#hero.hero-reading-room .hero-ops-relative {
    color: var(--r154-ink-tertiary) !important;
    font-size: 11px !important;
    text-align: right !important;
    white-space: nowrap !important;
}


/* ── (G) HERO → CREAM TRANSITION ── */
#hero.hero-reading-room::after {
    content: '';
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 200px !important;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(6, 7, 10, 0) 0%,
        #fafaf7 100%
    ) !important;
    pointer-events: none !important;
    z-index: 5 !important;
    opacity: 0 !important;
    transition: opacity 0.6s var(--r154-ease-out-expo) !important;
}
#hero.hero-reading-room.r154-transitioning::after {
    opacity: 1 !important;
}


/* ── (H) VERIFIED SECTION (below the fold).
   ID-boosted selectors to defeat the site-wide Inter mega-override
   at line 21947 (long :not() chain forcing Inter on main *). */
html body .r154-verified {
    background: #fafaf7 !important;
    color: #0a0a0a !important;
    padding: 120px 32px 96px !important;
    position: relative !important;
}

html body .r154-verified .r154-verified-heading {
    font-family: 'Bricolage Grotesque', 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: clamp(36px, 4vw, 56px) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em !important;
    color: #0a0a0a !important;
    margin: 0 0 16px 0 !important;
    text-wrap: balance !important;
}










/* ── (I) REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
    #hero.hero-reading-room .hero-spotlight {
        background: radial-gradient(
            circle 600px at 50% 50%,
            var(--r154-spotlight-warm),
            transparent 70%
        ) !important;
    }
    #hero.hero-reading-room .hvs-shadow {
        transition: none !important;
        transform: none !important;
    }
    #hero.hero-reading-room .hero-ops-row.is-recent .hero-ops-dot {
        animation: r154-ops-pulse 6s ease-in-out infinite !important;
    }
    #hero.hero-reading-room[data-r154-loading] * {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}


/* ── (I) MOBILE (≤768px) ── */
@media (max-width: 768px) {
    #hero.hero-reading-room {
        grid-template-columns: 1fr !important;
        padding: 96px 24px 48px !important;
        min-height: auto !important;
        gap: 32px !important;
    }
    #hero.hero-reading-room .hero-stat {
        font-size: clamp(64px, 14vw, 96px) !important;
    }
    #hero.hero-reading-room .hero-ops {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    #hero.hero-reading-room .hero-spotlight {
        display: none !important;
    }
    #hero.hero-reading-room .hero-vial-shadows {
        display: none !important;
    }
    #hero.hero-reading-room .hero-visual {
        min-height: 360px !important;
    }
    .r154-verified {
        padding: 64px 20px 48px;
    }
    
}

/* ═══════════════════════════════════════════════════════════
   END R154-rev1 (Reading Room: G + H + I)
   ═══════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   R154-rev2 — CONTEXT WITHOUT CLUTTER
   Fixes the layout void (stat was floating center-right because
   #hero's own 2-col grid swallowed .hero-content into one cell)
   and adds the minimum context a first-time visitor needs:
   brand kicker, a positioning sentence, and a stronger CTA with
   a price anchor. Vials become visible in the right column.
   ═══════════════════════════════════════════════════════════ */

/* (1) LAYOUT FIX — #hero centers a single content block; the
   content block owns the real 2-column (stat | vials) split. */
#hero.hero-reading-room {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    grid-template-columns: none !important;
}
#hero.hero-reading-room .hero-content,
#hero.hero-reading-room .hero-content.hero-split {
    display: grid !important;
    grid-template-columns: 1.05fr 0.95fr !important;
    width: 100% !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    column-gap: var(--r154-s-7) !important;
    align-items: center !important;
}
#hero.hero-reading-room .hero-text {
    grid-column: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}
#hero.hero-reading-room .hero-visual {
    grid-column: 2 !important;
    min-height: 540px !important;
}
/* Vials were stuck at opacity:0 — leftover R153 entrance-animation
   declared opacity:0 + relied on a keyframe to fade up, but rev98's
   vial-breath animation (scale only) overrode that animation so the
   opacity never recovered. Force them visible; the .hero-visual
   container handles the entrance fade via the GSAP timeline. */
#hero.hero-reading-room .hero-vial-link,
#hero.hero-reading-room .hero-vial-link-main,
#hero.hero-reading-room .hero-vial-link-mots,
#hero.hero-reading-room .hero-vial-link-bpc {
    opacity: 1 !important;
}

/* (2) Stat sized down slightly so the column holds kicker +
   sub + context + CTA without overflowing the fold. */
#hero.hero-reading-room .hero-stat {
    font-size: clamp(80px, 9vw, 144px) !important;
    margin: var(--r154-s-3) 0 var(--r154-s-4) 0 !important;
}

/* (3) BRAND KICKER — the one deliberate kicker (allowed). */
#hero.hero-reading-room .hero-kicker {
    font-family: 'JetBrains Mono', ui-monospace, monospace !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: var(--r154-ink-tertiary) !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--r154-s-2) !important;
}
#hero.hero-reading-room .hero-kicker .hero-kicker-dot {
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
    background: var(--r154-data-active) !important;
    display: inline-block !important;
}

/* (4) CONTEXT SENTENCE — brand voice, answers what/who. */
#hero.hero-reading-room .hero-context {
    font-family: 'Inter', -apple-system, sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    letter-spacing: 0 !important;
    color: var(--r154-ink-secondary) !important;
    max-width: 32ch !important;
    margin: 0 0 var(--r154-s-6) 0 !important;
    text-transform: none !important;
    text-wrap: pretty !important;
}

/* (5) CTA CLUSTER — ghost-pill + price anchor for pull. */
#hero.hero-reading-room .hero-cta-r154 {
    display: flex !important;
    align-items: center !important;
    gap: var(--r154-s-5) !important;
    flex-wrap: wrap !important;
}
/* Override the rev1 inline-link styling into a ghost pill. */
#hero.hero-reading-room .hero-cta-inline {
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--r154-s-3) !important;
    font-family: 'Inter', -apple-system, sans-serif !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 1 !important;
    color: var(--r154-ink-primary) !important;
    text-decoration: none !important;
    padding: 16px 28px !important;
    min-height: 52px !important;
    border: 1px solid rgba(45, 212, 191, 0.4) !important;
    border-bottom: 1px solid rgba(45, 212, 191, 0.4) !important;
    border-radius: 999px !important;
    background: rgba(13, 148, 136, 0.08) !important;
    transition:
        background 0.28s var(--r154-ease-out-quart),
        border-color 0.28s var(--r154-ease-out-quart),
        color 0.28s var(--r154-ease-out-quart),
        transform 0.18s var(--r154-ease-out-quart) !important;
}
#hero.hero-reading-room .hero-cta-inline:hover {
    background: var(--r154-data-active) !important;
    border-color: var(--r154-data-active) !important;
    color: #06070A !important;
}
#hero.hero-reading-room .hero-cta-inline:hover .hero-cta-arrow {
    transform: translateX(4px) !important;
}
#hero.hero-reading-room .hero-cta-inline:active {
    transform: translateY(1px) scale(0.99) !important;
}
#hero.hero-reading-room .hero-cta-anchor {
    font-family: 'JetBrains Mono', ui-monospace, monospace !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
    color: var(--r154-ink-tertiary) !important;
    white-space: nowrap !important;
}
#hero.hero-reading-room .hero-cta-anchor strong {
    color: var(--r154-ink-primary) !important;
    font-weight: 700 !important;
}

/* (6) Loading hidden-state for the two new elements. */
#hero.hero-reading-room[data-r154-loading] .hero-kicker,
#hero.hero-reading-room[data-r154-loading] .hero-context {
    opacity: 0;
    transform: translateY(8px);
}

/* (6b) Kill the rev98 promo-badge disc — the spec deleted it.
   The price anchor + the launch discount in the Verified
   section carry the commercial signal now. */
#hero.hero-reading-room .hero-promo-badge {
    display: none !important;
}

/* (7) Mobile — single column, vials below, smaller stat. */
@media (max-width: 768px) {
    #hero.hero-reading-room .hero-content,
    #hero.hero-reading-room .hero-content.hero-split {
        grid-template-columns: 1fr !important;
        row-gap: 32px !important;
    }
    #hero.hero-reading-room .hero-text {
        grid-column: 1 !important;
    }
    #hero.hero-reading-room .hero-visual {
        grid-column: 1 !important;
        min-height: 340px !important;
    }
    #hero.hero-reading-room .hero-context {
        font-size: 16px !important;
    }
    #hero.hero-reading-room .hero-cta-r154 {
        gap: var(--r154-s-4) !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   END R154-rev2
   ═══════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   R154-rev3 — VIAL STAGING ("museum lighting")
   ───────────────────────────────────────────────────────────
   Problem: the three vials read as stock photos pasted onto
   black — no light integration, no depth between them, no
   grounding. Fix: stage them like a product photographer.
     (1) Atmospheric glow behind the hero vial (light made tangible)
     (2) Depth of field — hero sharp/forward, secondaries pushed back
     (3) Reflection beneath the hero vial (polished-surface signature)
     (4) Grounded contact pool under the cluster
   All scoped to #hero.hero-reading-room so it never leaks.
   ═══════════════════════════════════════════════════════════ */

/* The visual column becomes the lighting stage. ::before is the
   atmospheric halo (behind everything), ::after is the grounded
   contact pool (also behind, lower). Vials sit at z 2-3 above. */
#hero.hero-reading-room .hero-visual::before {
    content: "" !important;
    position: absolute !important;
    /* Centered on the hero vial (which sits at 50%/50% + 20px). */
    top: 44% !important;
    left: 52% !important;
    width: 460px !important;
    height: 460px !important;
    transform: translate(-50%, -50%) !important;
    z-index: 0 !important;
    pointer-events: none !important;
    background: radial-gradient(
        circle at 50% 50%,
        rgba(13, 148, 136, 0.20) 0%,
        rgba(13, 148, 136, 0.10) 32%,
        rgba(8, 60, 56, 0.06) 52%,
        transparent 72%
    ) !important;
    filter: blur(6px) !important;
    opacity: 0.9 !important;
    animation: r154-halo-breathe 7s ease-in-out infinite !important;
}

/* Grounded contact pool — a tight, dark, soft ellipse beneath the
   cluster so the vials feel set down on a surface, not floating. */
#hero.hero-reading-room .hero-visual::after {
    content: "" !important;
    position: absolute !important;
    bottom: 8% !important;
    left: 52% !important;
    width: 320px !important;
    height: 70px !important;
    transform: translateX(-50%) !important;
    z-index: 0 !important;
    pointer-events: none !important;
    background: radial-gradient(
        ellipse at 50% 50%,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(0, 0, 0, 0.32) 45%,
        transparent 75%
    ) !important;
    filter: blur(4px) !important;
}

@keyframes r154-halo-breathe {
    0%, 100% { opacity: 0.78; transform: translate(-50%, -50%) scale(1); }
    50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.06); }
}

/* (2) DEPTH OF FIELD ──────────────────────────────────────────
   Hero vial: sharp, brighter, warm teal rim glow, sits forward. */
#hero.hero-reading-room .hero-vial-link.hero-vial-link-main {
    filter: drop-shadow(0 38px 64px rgba(0, 0, 0, 0.68))
            drop-shadow(0 6px 14px rgba(0, 0, 0, 0.5))
            drop-shadow(0 0 26px rgba(13, 148, 136, 0.18))
            brightness(1.06) contrast(1.03) !important;
    z-index: 3 !important;
}
/* Secondary vials: blurred + dimmed + slightly desaturated so they
   recede into the background plane. Keeps opacity:1 (no ghosting). */
#hero.hero-reading-room .hero-vial-link.hero-vial-link-mots {
    filter: drop-shadow(0 24px 44px rgba(0, 0, 0, 0.55))
            blur(1.4px) brightness(0.72) saturate(0.88) !important;
    z-index: 2 !important;
}
#hero.hero-reading-room .hero-vial-link.hero-vial-link-bpc {
    filter: drop-shadow(0 24px 44px rgba(0, 0, 0, 0.55))
            blur(1.8px) brightness(0.68) saturate(0.85) !important;
    z-index: 2 !important;
}
/* On hover, a backgrounded vial pulls into focus (rewards curiosity). */
#hero.hero-reading-room .hero-vial-link.hero-vial-link-mots:hover,
#hero.hero-reading-room .hero-vial-link.hero-vial-link-bpc:hover {
    filter: drop-shadow(0 30px 54px rgba(0, 0, 0, 0.6))
            drop-shadow(0 0 22px rgba(13, 148, 136, 0.16))
            blur(0) brightness(1) saturate(1) !important;
    z-index: 4 !important;
}

/* (3) REFLECTION ──────────────────────────────────────────────
   A short, fast-fading reflection beneath the hero vial image so it
   reads as resting on a polished black surface. Applied to the <img>
   (not the anchor) so the hover tooltip is never reflected. */
#hero.hero-reading-room .hero-vial-link-main .hero-vial-main {
    -webkit-box-reflect: below 1px linear-gradient(
        to bottom,
        transparent 62%,
        rgba(255, 255, 255, 0.10) 100%
    ) !important;
}

/* Reduced motion: hold the halo still, keep the staging. */
@media (prefers-reduced-motion: reduce) {
    #hero.hero-reading-room .hero-visual::before {
        animation: none !important;
        opacity: 0.85 !important;
    }
}

/* Mobile: smaller halo + pool, drop the per-vial blur (cheaper, and
   the cluster reflows tighter so depth-of-field reads as muddy). */
@media (max-width: 768px) {
    #hero.hero-reading-room .hero-visual::before {
        width: 300px !important;
        height: 300px !important;
    }
    #hero.hero-reading-room .hero-visual::after {
        width: 220px !important;
        height: 48px !important;
    }
    #hero.hero-reading-room .hero-vial-link.hero-vial-link-mots,
    #hero.hero-reading-room .hero-vial-link.hero-vial-link-bpc {
        filter: drop-shadow(0 18px 32px rgba(0, 0, 0, 0.5))
                brightness(0.8) !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   END R154-rev3
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   R155 — FULL-PAGE READING ROOM · GLOBAL SYSTEM
   Tonal rhythm: dark "stage" rooms + cool "paper" rooms.
   All scoped behind .r155-room for one-keystroke rollback.
   ═══════════════════════════════════════════════════════════ */
:root {
    --r155-stage: #06070A;          /* matches hero --r154-stage */
    --r155-stage-2: #0a0b0f;        /* slightly lifted stage panel */
    --r155-paper: #fafaf7;          /* matches .r154-verified */
    --r155-ink: #0a0a0a;
    --r155-ink-soft: #4a4a46;
    --r155-paper-line: rgba(0,0,0,0.10);
    --r155-stage-ink: #fbfaf6;
    --r155-stage-ink-soft: #a8a6a1;
    --r155-stage-line: rgba(255,255,255,0.08);
    --r155-teal: #0d9488;
    --r155-teal-glow: rgba(13,148,136,0.18);
    --r155-ease: cubic-bezier(0.16,1,0.3,1);   /* ease-out-quart family */
    --r155-s-pad: clamp(64px, 8vw, 120px);     /* vertical section padding */
}

/* Base room surfaces (selector chain beats the site-wide overrides). */
html body section.r155-room { position: relative; }
html body section.r155-stage {
    background: var(--r155-stage) !important;
    color: var(--r155-stage-ink) !important;
    border: none !important;
}

/* Headings use Bricolage in both rooms. */
html body .r155-room .section-title {
    font-family: 'Bricolage Grotesque','Inter',sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
}
html body .r155-stage .section-title { color: var(--r155-stage-ink) !important; }
html body .r155-paper .section-title { color: var(--r155-ink) !important; }
/* Section badge → mono kicker in teal, both rooms. */
html body .r155-room .section-badge {
    font-family: 'JetBrains Mono',ui-monospace,monospace !important;
    font-size: 11px !important; font-weight: 500 !important;
    letter-spacing: 0.14em !important; text-transform: uppercase !important;
    color: var(--r155-teal) !important;
    background: none !important; border: none !important; padding: 0 !important;
}
html body .r155-stage .section-subtitle { color: var(--r155-stage-ink-soft) !important; }
html body .r155-paper .section-subtitle { color: var(--r155-ink-soft) !important; }
/* ── R155 reveal-on-scroll primitives ── */
html body .r155-room [data-r155-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.6s var(--r155-ease), transform 0.6s var(--r155-ease);
    will-change: opacity, transform;
}
html body .r155-room [data-r155-reveal].r155-in {
    opacity: 1;
    transform: none;
}
/* Staggered children: JS sets --r155-i; delay derives from index. */
html body .r155-room [data-r155-reveal][style*="--r155-i"] {
    transition-delay: calc(var(--r155-i) * 70ms);
}
@media (prefers-reduced-motion: reduce) {
    html body .r155-room [data-r155-reveal] {
        opacity: 1 !important; transform: none !important; transition: none !important;
    }
}
/* ── R155-C · Trust marquee = instrument-panel ticker ── */
html body section.trust-marquee.r155-room {
    background: var(--r155-stage) !important;
    border-top: 1px solid var(--r155-stage-line) !important;
    border-bottom: 1px solid var(--r155-stage-line) !important;
    padding: 13px 0 !important;
}
html body .trust-marquee.r155-room .tm-item {
    color: var(--r155-stage-ink-soft) !important;
    font-family: 'JetBrains Mono',ui-monospace,monospace !important;
    font-size: 11px !important; letter-spacing: 0.1em !important; font-weight: 500 !important;
}
html body .trust-marquee.r155-room .tm-item i { color: var(--r155-teal) !important; }
html body .trust-marquee.r155-room .tm-sep { color: rgba(13,148,136,0.5) !important; }
@media (max-width:768px){
    html body .trust-marquee.r155-room .tm-item { font-size: 10px !important; }
}

/* ── R155 cascade fix · the universal Inter override (~line 21947) wins
   on specificity (long :not() chain) even vs !important class rules.
   Re-assert R155 fonts under the #main-content ID so the ID tier
   outranks it. ALL future R155 font-family rules must use this prefix. ── */
html body #main-content .r155-room .section-title {
    font-family: 'Bricolage Grotesque','Inter',sans-serif !important;
}
html body #main-content .r155-room .section-badge {
    font-family: 'JetBrains Mono',ui-monospace,monospace !important;
}
html body #main-content .trust-marquee.r155-room .tm-item {
    font-family: 'JetBrains Mono',ui-monospace,monospace !important;
}

/* ── R155-D · Verified handoff (paper, showpiece #1) ── */
html body section.r154-verified.r155-room {
    background: var(--r155-paper) !important;
    color: var(--r155-ink) !important;
    /* The paper rises over the dark hero: rounded top + lift shadow. */
    border-top-left-radius: 28px !important;
    border-top-right-radius: 28px !important;
    margin-top: -28px !important;
    box-shadow: 0 -40px 80px rgba(0,0,0,0.5) !important;
    z-index: 2 !important;
}
@media (max-width:768px){
    html body section.r154-verified.r155-room {
        border-top-left-radius: 18px !important;
        border-top-right-radius: 18px !important;
        margin-top: -18px !important;
    }
}

/* ── R155-E · Why = capability spec sheet (paper) ── */
html body section.why-section.r155-room { padding: var(--r155-s-pad) 0 !important; }
html body .why-section.r155-room .why-spec { max-width: 860px; margin: 32px auto 0; }
html body .why-section.r155-room .why-spec-row {
    display: grid; grid-template-columns: 160px 1fr auto; gap: 20px; align-items: baseline;
    padding: 18px 0; border-top: 1px solid var(--r155-paper-line);
}
html body .why-section.r155-room .why-spec-row:last-child { border-bottom: 1px solid var(--r155-paper-line); }
html body #main-content .why-section.r155-room .ws-k {
    font-family: 'JetBrains Mono',monospace !important; font-size: 12px; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--r155-ink);
}
html body .why-section.r155-room .ws-v { font-family:'Inter',sans-serif; font-size: 14px; line-height:1.5; color: var(--r155-ink-soft); }
html body #main-content .why-section.r155-room .ws-m {
    font-family: 'JetBrains Mono',monospace !important; font-size: 16px; font-weight: 700;
    color: var(--r155-teal); white-space: nowrap;
}
@media (max-width:768px){
    html body .why-section.r155-room .why-spec-row { grid-template-columns: 1fr auto; gap: 6px 14px; }
    html body .why-section.r155-room .ws-v { grid-column: 1 / -1; order: 3; }
}

/* ── R155-F · Browse by goal = lab drawers (stage) ── */
html body section.goals-section.r155-room { padding: var(--r155-s-pad) 0 !important; }
html body .goals-section.r155-room .goals-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; max-width: 920px; margin: 32px auto 0;
}
html body .goals-section.r155-room .goal-card {
    background: linear-gradient(180deg, var(--r155-stage-2), #0b0c11) !important;
    border: 1px solid var(--r155-stage-line) !important;
    border-radius: 8px !important; padding: 18px 18px !important;
    display: grid !important; grid-template-columns: 28px 1fr 18px; align-items: center; gap: 14px;
    position: relative; overflow: hidden;
    transition: transform 0.35s var(--r155-ease), border-color 0.35s var(--r155-ease), box-shadow 0.35s var(--r155-ease) !important;
}
html body .goals-section.r155-room .goal-card::after {
    content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background: var(--r155-teal); opacity:.25;
}
html body .goals-section.r155-room .goal-card:hover {
    transform: translateX(6px) !important;
    border-color: rgba(13,148,136,0.5) !important;
    box-shadow: 0 0 26px var(--r155-teal-glow), inset 0 0 22px rgba(13,148,136,0.06) !important;
}
html body .goals-section.r155-room .goal-card:hover::after { opacity:1; }
html body .goals-section.r155-room .goal-icon { color: var(--r155-teal) !important; font-size: 15px !important; background:none !important; }
html body #main-content .goals-section.r155-room .goal-body h3 {
    font-family:'Bricolage Grotesque',sans-serif !important; font-weight:600 !important;
    font-size: 15px !important; color: var(--r155-stage-ink) !important; margin:0 !important;
}
html body #main-content .goals-section.r155-room .goal-body p {
    font-family:'JetBrains Mono',monospace !important; font-size: 10px !important;
    letter-spacing:0.03em !important; color: var(--r155-stage-ink-soft) !important; margin: 3px 0 0 !important;
}
html body .goals-section.r155-room .goal-arrow { color: #5a5a55 !important; }
html body .goals-section.r155-room .goal-card:hover .goal-arrow { color: var(--r155-teal) !important; }
@media (max-width:768px){
    html body .goals-section.r155-room .goals-grid { grid-template-columns: 1fr; }
    html body .goals-section.r155-room .goal-card:hover { transform:none !important; }
}

/* ── R155-G · Best sellers = museum-lit product cards (stage) ── */
/* JS (renderBestSellers) injects .bestseller-card with .bs-name / .bs-price.
   Primary selectors target those real classes; .product-card / .product-name
   / .product-price kept as harmless fallbacks per Task G spec. */
html body section.bestsellers-section.r155-room { padding: var(--r155-s-pad) 0 !important; }
html body .bestsellers-section.r155-room .bestseller-card,
html body .bestsellers-section.r155-room .product-card {
    background: linear-gradient(180deg,#0c0d12,#08090d) !important;
    border: 1px solid var(--r155-stage-line) !important;
    border-radius: 12px !important;
    transition: transform 0.4s var(--r155-ease), box-shadow 0.4s var(--r155-ease), border-color 0.4s var(--r155-ease) !important;
}
html body .bestsellers-section.r155-room .bestseller-card img,
html body .bestsellers-section.r155-room .product-card img {
    filter: drop-shadow(0 24px 40px rgba(0,0,0,0.6)) drop-shadow(0 0 22px var(--r155-teal-glow)) !important;
}
html body .bestsellers-section.r155-room .bestseller-card:hover,
html body .bestsellers-section.r155-room .product-card:hover {
    transform: translateY(-6px) !important;
    border-color: rgba(13,148,136,0.4) !important;
    box-shadow: 0 30px 60px rgba(0,0,0,0.55), 0 0 30px var(--r155-teal-glow) !important;
}
html body #main-content .bestsellers-section.r155-room .bestseller-card .bs-name,
html body #main-content .bestsellers-section.r155-room .product-card h3,
html body #main-content .bestsellers-section.r155-room .product-card .product-name {
    font-family:'Bricolage Grotesque',sans-serif !important; color: var(--r155-stage-ink) !important;
}
html body #main-content .bestsellers-section.r155-room .bestseller-card .bs-price,
html body #main-content .bestsellers-section.r155-room .product-card .product-price,
html body #main-content .bestsellers-section.r155-room .product-card .price {
    font-family:'Bricolage Grotesque',sans-serif !important; color: var(--r155-stage-ink) !important;
}
@media (max-width:768px){
    html body .bestsellers-section.r155-room .bestseller-card:hover,
    html body .bestsellers-section.r155-room .product-card:hover { transform:none !important; }
}

/* ── R155-H · Quality = COA proof room (paper, showpiece #2) ── */
html body section.quality-section.r155-room { padding: var(--r155-s-pad) 0 !important; }
html body .quality-section.r155-room .quality-tab {
    border:1px solid var(--r155-paper-line) !important; color: var(--r155-ink-soft) !important; background:#fff !important;
    border-radius:20px !important;
}
html body #main-content .quality-section.r155-room .quality-tab {
    font-family:'JetBrains Mono',monospace !important; font-size:11px !important; letter-spacing:.04em !important;
}
html body .quality-section.r155-room .quality-tab.active {
    background: var(--r155-ink) !important; color: var(--r155-paper) !important; border-color: var(--r155-ink) !important;
}
html body #main-content .quality-section.r155-room .qps-number {
    font-family:'Bricolage Grotesque',sans-serif !important; font-weight:700 !important; color: var(--r155-ink) !important;
}
html body .quality-section.r155-room .qps-plus { color: var(--r155-teal) !important; }
html body .quality-section.r155-room .coa-ledger { margin-top: 22px; max-width: 560px; }
html body .coa-ledger .led-row {
    display:grid; grid-template-columns:72px 1fr 56px; gap:14px; align-items:center;
    padding:9px 0; border-top:1px solid var(--r155-paper-line);
}
html body #main-content .coa-ledger .led-row { font-family:'JetBrains Mono',monospace !important; font-size:12px !important; }
html body .coa-ledger .led-id { font-weight:700; color: var(--r155-ink); }
html body .coa-ledger .led-bar { height:6px; border-radius:4px; background:rgba(0,0,0,0.07); overflow:hidden; }
html body .coa-ledger .led-bar i { display:block; height:100%; width:0; background:var(--r155-teal); border-radius:4px; transition: width 0.9s var(--r155-ease); }
html body .coa-ledger .led-pct { text-align:right; font-weight:700; color: var(--r155-teal); }
@media (max-width:768px){ html body .quality-section.r155-room .coa-ledger { max-width:none; } }

/* ── R155-I · Brand story (stage) ── */
html body section.story-section.r155-room { padding: var(--r155-s-pad) 0 !important; }
html body .story-section.r155-room .story-body p { color: var(--r155-stage-ink-soft) !important; }
html body #main-content .story-section.r155-room .story-body p { font-family:'Inter',sans-serif !important; }
html body .story-section.r155-room .story-stat-card {
    background: linear-gradient(180deg,var(--r155-stage-2),#0b0c11) !important;
    border:1px solid var(--r155-stage-line) !important; border-radius:10px !important;
}
html body #main-content .story-section.r155-room .ssc-number {
    font-family:'Bricolage Grotesque',sans-serif !important; color: var(--r155-teal) !important; font-weight:700 !important;
}
html body #main-content .story-section.r155-room .ssc-label {
    font-family:'JetBrains Mono',monospace !important; font-size:10px !important;
}
html body .story-section.r155-room .ssc-label { color: var(--r155-stage-ink-soft) !important; }
html body .story-section.r155-room .story-visual-pastel { display:none !important; }
html body .story-section.r155-room .story-body .btn-primary {
    background: var(--r155-teal) !important; color:#04201d !important; border:none !important;
}
@media (max-width:768px){ html body .story-section.r155-room .story-grid { gap:28px; } }

/* ── R155-J · Testimonials (paper quote cards) ── */
html body section.testimonials-section.r155-room { padding: var(--r155-s-pad) 0 !important; background: var(--r155-paper) !important; }
html body .testimonials-section.r155-room .testimonial-card {
    background:#fff !important; border:1px solid var(--r155-paper-line) !important; border-radius:12px !important;
    box-shadow: 0 1px 0 rgba(0,0,0,0.02) !important;
}
html body .testimonials-section.r155-room .testimonial-text { color: var(--r155-ink) !important; }
html body #main-content .testimonials-section.r155-room .testimonial-text { font-family:'Inter',sans-serif !important; }
html body .testimonials-section.r155-room .testimonial-stars i,
html body .testimonials-section.r155-room .reviews-stars i { color: var(--r155-teal) !important; }
html body .testimonials-section.r155-room .testimonial-verified { color: var(--r155-teal) !important; }
html body .testimonials-section.r155-room .testimonial-author strong { color: var(--r155-ink) !important; }
html body .testimonials-section.r155-room .testimonial-avatar { background: var(--r155-teal) !important; color:#04201d !important; }
@media (max-width:768px){ html body .testimonials-section.r155-room .testimonials-grid { gap:14px; } }

/* ── R155-K · Compare = self-building table (paper, showpiece #3) ── */
html body section.vs-section.r155-room { padding: var(--r155-s-pad) 0 !important; background: var(--r155-paper) !important; }
html body .vs-section.r155-room .vs-row { border-top:1px solid var(--r155-paper-line) !important; }
html body .vs-section.r155-room .vs-feature { color: var(--r155-ink) !important; font-weight:500 !important; }
html body #main-content .vs-section.r155-room .vs-feature { font-family:'Inter',sans-serif !important; }
html body .vs-section.r155-room .vs-feature i { color: var(--r155-ink-soft) !important; }
html body .vs-section.r155-room .vs-elytra { color: var(--r155-ink) !important; }
html body .vs-section.r155-room .vs-yes { color: var(--r155-teal) !important; opacity:0; transition: opacity 0.4s var(--r155-ease); }
html body .vs-section.r155-room .vs-row.r155-in .vs-yes { opacity:1; }
html body .vs-section.r155-room .vs-no { color:#b04a3a !important; }
html body .vs-section.r155-room .vs-mid { color:#b8860b !important; }
html body #main-content .vs-section.r155-room .vs-header-row .vs-elytra span { font-family:'Bricolage Grotesque',sans-serif !important; }
html body .vs-section.r155-room .vs-header-row .vs-elytra span { color: var(--r155-ink) !important; }

/* ── R155-L1 · Recently viewed (stage mini-showroom) ── */
html body section.recently-viewed-section.r155-room { padding: var(--r155-s-pad) 0 !important; }
html body .recently-viewed-section.r155-room .product-card,
html body .recently-viewed-section.r155-room .bestseller-card {
    background: linear-gradient(180deg,#0c0d12,#08090d) !important;
    border:1px solid var(--r155-stage-line) !important; border-radius:12px !important;
}
html body .recently-viewed-section.r155-room .product-card img,
html body .recently-viewed-section.r155-room .bestseller-card img { filter: drop-shadow(0 24px 40px rgba(0,0,0,0.6)) drop-shadow(0 0 22px var(--r155-teal-glow)) !important; }
html body #main-content .recently-viewed-section.r155-room h2,
html body #main-content .recently-viewed-section.r155-room .section-title { font-family:'Bricolage Grotesque',sans-serif !important; }
html body .recently-viewed-section.r155-room h2, html body .recently-viewed-section.r155-room .section-title { color: var(--r155-stage-ink) !important; }

/* ── R155-L2 · FAQ (paper accordion) ── */
html body section.home-faq-section.r155-room { padding: var(--r155-s-pad) 0 !important; background: var(--r155-paper) !important; }
html body .home-faq-section.r155-room .home-faq-item { border-bottom:1px solid var(--r155-paper-line) !important; background:transparent !important; }
html body .home-faq-section.r155-room .hfaq-q { color: var(--r155-ink) !important; font-weight:600 !important; }
html body #main-content .home-faq-section.r155-room .hfaq-q { font-family:'Inter',sans-serif !important; }
html body .home-faq-section.r155-room .hfaq-q i { color: var(--r155-teal) !important; }
html body .home-faq-section.r155-room .hfaq-a { color: var(--r155-ink-soft) !important; }
html body #main-content .home-faq-section.r155-room .hfaq-a { font-family:'Inter',sans-serif !important; }
html body .home-faq-section.r155-room .hfaq-a a { color: var(--r155-teal) !important; }
html body .home-faq-section.r155-room .hfaq-chev { color: var(--r155-teal) !important; transition: transform 0.3s var(--r155-ease); }
html body .home-faq-section.r155-room .home-faq-item[open] .hfaq-chev { transform: rotate(180deg); }

/* ── R155-L3 · Newsletter (dark close, mirrors hero) ── */
html body section.newsletter-section.r155-room {
    padding: var(--r155-s-pad) 0 !important;
    background:
        radial-gradient(circle 520px at 50% 40%, rgba(13,148,136,0.10), transparent 70%),
        var(--r155-stage) !important;
}
html body #main-content .newsletter-section.r155-room .newsletter-text h2 { font-family:'Bricolage Grotesque',sans-serif !important; }
html body .newsletter-section.r155-room .newsletter-text h2 { color: var(--r155-stage-ink) !important; }
html body .newsletter-section.r155-room .newsletter-text h2 i { color: var(--r155-teal) !important; }
html body .newsletter-section.r155-room .newsletter-text p { color: var(--r155-stage-ink-soft) !important; }
html body .newsletter-section.r155-room #newsletter-email {
    background: rgba(255,255,255,0.06) !important; border:1px solid rgba(255,255,255,0.14) !important; color: var(--r155-stage-ink) !important;
}
html body .newsletter-section.r155-room .newsletter-form .btn-primary { background: var(--r155-teal) !important; color:#04201d !important; border:none !important; }
html body .newsletter-section.r155-room .newsletter-note { color: var(--r155-stage-ink-soft) !important; }

/* ── R155-L4 · Footer harmonize to deep stage ── */
html body .footer { background: #050507 !important; border-top: 1px solid var(--r155-stage-line) !important; }

/* ── R155-M3 · Accessibility: focus-visible + touch targets ── */
html body .r155-room a:focus-visible,
html body .r155-room button:focus-visible,
html body .r155-room summary:focus-visible,
html body .r155-room input:focus-visible {
    outline: 2px solid var(--r155-teal) !important;
    outline-offset: 3px !important;
    border-radius: 2px !important;
}
/* Touch targets >=44px on the new interactive elements */
html body .goals-section.r155-room .goal-card { min-height: 64px !important; }
html body .home-faq-section.r155-room .home-faq-item summary { min-height: 44px !important; display: flex !important; align-items: center !important; }
html body .newsletter-section.r155-room .newsletter-form .btn-primary { min-height: 44px !important; }

/* ── R156-A · type scale + vertical rhythm ──
   The rooms inherited their type sizes from a tangle of competing global
   .section-title / body .section-title / @media rules — the result was that
   .vs-section titles rendered ~8px smaller than every other room at the same
   viewport, subtitle sizes drifted (16px vs 16.32px), kicker tracking sat at
   0.14em, and .section-header bottom margins were 56px while .story-section
   carried none. This block establishes ONE fluid scale + rhythm for every
   .r155-room and asserts it under the #main-content ID so it outranks the
   site-wide :not() Inter override and all earlier !important rules.
   Font FAMILIES are owned by the R155 block above; here we own SIZE / LEADING
   / TRACKING / RHYTHM only (family re-asserted on .section-title for safety). */

/* Section titles — single fluid scale, tight editorial leading. */
html body #main-content .r155-room .section-title {
    font-family: 'Bricolage Grotesque','Inter',sans-serif !important;
    font-size: clamp(30px, 4.2vw, 50px) !important;
    line-height: 1.06 !important;
    letter-spacing: -0.02em !important;
    font-weight: 600 !important;
}
/* vs-section had its own 1.5rem / 24px overrides — fold it into the scale. */
html body #main-content .vs-section.r155-room .section-title {
    font-size: clamp(30px, 4.2vw, 50px) !important;
    line-height: 1.06 !important;
}

/* Subtitles — one size, comfortable leading, measure-capped. */
html body #main-content .r155-room .section-subtitle {
    font-family: 'Inter',sans-serif !important;
    font-size: clamp(15px, 1.4vw, 17px) !important;
    line-height: 1.6 !important;
    max-width: 60ch !important;
    margin: 14px auto 0 !important;
}
/* Left-aligned rooms (story) keep their flush-left subtitle origin. */
html body #main-content .story-section.r155-room .section-subtitle {
    margin: 14px 0 0 !important;
}

/* Mono kicker — uniform tracking + breathing room under it. */
html body #main-content .r155-room .section-badge {
    font-family: 'JetBrains Mono',ui-monospace,monospace !important;
    font-size: 11px !important;
    letter-spacing: 0.16em !important;
    line-height: 1.5 !important;
    margin-bottom: 14px !important;
    text-transform: uppercase !important;
}

/* Header rhythm — consistent gap between the header block and the room body. */
html body #main-content .r155-room .section-header { margin-bottom: 40px !important; }
/* Title margin under the kicker/title pairing, uniform across rooms. */
html body #main-content .r155-room .section-title { margin: 0 0 14px !important; }
/* Story room runs its header inline (no .section-header wrapper); give its
   title a touch more separation from the body copy to match the rhythm. */
html body #main-content .story-section.r155-room .section-title { margin: 0 0 18px !important; }

/* Vertical section padding — assert the shared token on every room that
   somehow still escaped it (belt-and-braces; most already set it above). */
html body section.r155-room { padding: var(--r155-s-pad) 0 !important; }
/* The verified handoff intentionally rises over the hero — keep its lift but
   normalize its interior rhythm to the room padding. */
html body section.r154-verified.r155-room { padding: var(--r155-s-pad) 0 !important; }

@media (max-width: 768px) {
    /* Let the clamp mins go a little smaller on phones so big titles don't
       crowd narrow columns; subtitle measure relaxes to full width. */
    html body #main-content .r155-room .section-title,
    html body #main-content .vs-section.r155-room .section-title {
        font-size: clamp(26px, 7vw, 34px) !important;
    }
    html body #main-content .r155-room .section-subtitle { max-width: none !important; }
    html body #main-content .r155-room .section-header { margin-bottom: 32px !important; }
}

/* ── R156-B · cursor spotlight echo in stage rooms ── */
html body section.r155-stage:not(.trust-marquee)::before {
    content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
    background: radial-gradient(circle 480px at var(--r155-sp-x,50%) var(--r155-sp-y,50%), rgba(13,148,136,0.09), transparent 70%);
    opacity:0; transition: opacity 0.45s var(--r155-ease); mix-blend-mode: screen;
}
html body section.r155-stage:not(.trust-marquee).r156-spot-on::before { opacity:1; }
html body section.r155-stage:not(.trust-marquee) > .container { position:relative; z-index:1; }
@media (prefers-reduced-motion: reduce){ html body section.r155-stage:not(.trust-marquee)::before { display:none !important; } }

/* ── R156-B · hover micro-interactions ── */
html body .why-section.r155-room .why-spec-row { transition: background 0.3s var(--r155-ease), padding-left 0.3s var(--r155-ease); border-left: 2px solid transparent; }
html body .why-section.r155-room .why-spec-row:hover { background: rgba(13,148,136,0.04); border-left-color: var(--r155-teal); padding-left: 12px; }
html body .testimonials-section.r155-room .testimonial-card { transition: transform 0.35s var(--r155-ease), box-shadow 0.35s var(--r155-ease); }
html body .testimonials-section.r155-room .testimonial-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,0.08); }
@media (prefers-reduced-motion: reduce){
    html body .why-section.r155-room .why-spec-row:hover { padding-left:0 !important; }
    html body .testimonials-section.r155-room .testimonial-card:hover { transform:none !important; }
}

/* ── R156-C · engineering dot-grid texture + room seams (stage rooms) ── */
/* Faint dot-grid as an extra background layer. Appended longhand
   background-image beats the earlier `background: var(--r155-stage) !important`
   shorthand for this property (later source order, same property). */
html body section.r155-stage:not(.trust-marquee) {
    background-color: var(--r155-stage) !important;
    background-image: radial-gradient(rgba(13,148,136,0.05) 1px, transparent 1.4px) !important;
    background-size: 32px 32px !important;
    background-position: 0 0 !important;
    animation: r156-grid-drift 60s linear infinite;
}
@keyframes r156-grid-drift {
    from { background-position: 0 0; }
    to   { background-position: 32px 64px; }
}
/* Refined teal seam at the very top of each dark room. ::after is free
   (::before is the spotlight layer). */
html body section.r155-stage:not(.trust-marquee)::after {
    content:""; position:absolute; top:0; left:0; right:0; height:1px; z-index:2;
    pointer-events:none;
    background: linear-gradient(90deg, transparent, rgba(13,148,136,0.45), transparent);
}
@media (prefers-reduced-motion: reduce){
    html body section.r155-stage:not(.trust-marquee) { animation: none !important; }
}
@media (max-width:768px){
    /* lower texture density on mobile for cleanliness */
    html body section.r155-stage:not(.trust-marquee) { background-size: 26px 26px !important; }
}

/* ── R156-D · premium testimonial cards (Magic-translated) ── */
/* "Lab notebook" review card: white surface, paper-line border, generous
   padding, a faint oversized quotation graphic behind the text, hairline
   separator above the attribution row, ringed teal avatar, mono micro-labels.
   NB: leaves the R156-B hover transform untouched. */
html body .testimonials-section.r155-room .testimonial-card {
    position: relative !important;
    overflow: hidden !important;
    background: #fff !important;
    border: 1px solid var(--r155-paper-line) !important;
    border-radius: 16px !important;
    padding: 28px !important;
    box-shadow: 0 1px 0 rgba(0,0,0,0.02) !important;
}
/* Decorative oversized quotation mark, teal, behind the text. */
html body .testimonials-section.r155-room .testimonial-card::before {
    content: "\201C";
    position: absolute;
    top: -0.18em;
    right: 0.12em;
    font-family: 'Bricolage Grotesque', Georgia, serif;
    font-size: 130px;
    line-height: 1;
    font-weight: 700;
    color: var(--r155-teal);
    opacity: 0.08;
    pointer-events: none;
    z-index: 0;
}
/* Quote = hero of the card. */
html body .testimonials-section.r155-room .testimonial-text {
    position: relative;
    z-index: 1;
    font-size: clamp(15px, 1.3vw, 17px) !important;
    line-height: 1.7 !important;
    font-weight: 500 !important;
    color: var(--r155-ink) !important;
    margin-bottom: 18px !important;
}
/* Header row (stars + verified) sits above the quote. */
html body .testimonials-section.r155-room .testimonial-header {
    position: relative;
    z-index: 1;
}
html body .testimonials-section.r155-room .testimonial-stars i {
    color: var(--r155-teal) !important;
    font-size: 13px !important;
}
/* Verified badge → small teal pill. */
html body .testimonials-section.r155-room .testimonial-verified {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    border: 1px solid rgba(13,148,136,0.35) !important;
    color: var(--r155-teal) !important;
    background: transparent !important;
    border-radius: 20px !important;
    padding: 3px 9px !important;
    font-size: 10px !important;
}
html body .testimonials-section.r155-room .testimonial-verified i {
    color: var(--r155-teal) !important;
}
/* Product chip → subtle tinted inline-block. */
html body .testimonials-section.r155-room .testimonial-product {
    position: relative;
    z-index: 1;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 10px !important;
    color: var(--r155-ink-soft) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    background: rgba(13,148,136,0.06) !important;
    border-radius: 6px !important;
    padding: 4px 8px !important;
    margin-bottom: 16px !important;
}
html body .testimonials-section.r155-room .testimonial-product i {
    color: var(--r155-teal) !important;
}
/* Hairline separator dividing quote from attribution. */
html body .testimonials-section.r155-room .testimonial-author {
    position: relative;
    z-index: 1;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    border-top: 1px solid var(--r155-paper-line) !important;
    padding-top: 16px !important;
}
/* Ringed teal avatar. */
html body .testimonials-section.r155-room .testimonial-avatar {
    background: var(--r155-teal) !important;
    color: #04201d !important;
    background-image: none !important;
    box-shadow: 0 0 0 3px rgba(13,148,136,0.18) !important;
}
html body .testimonials-section.r155-room .testimonial-author strong {
    color: var(--r155-ink) !important;
    font-size: 14px !important;
}
html body .testimonials-section.r155-room .testimonial-author span {
    color: var(--r155-teal) !important;
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}
/* Font-family rules scoped under #main-content (cascade requirement). */
html body #main-content .testimonials-section.r155-room .testimonial-author strong {
    font-family: 'Bricolage Grotesque', sans-serif !important;
}
html body #main-content .testimonials-section.r155-room .testimonial-author span,
html body #main-content .testimonials-section.r155-room .testimonial-verified,
html body #main-content .testimonials-section.r155-room .testimonial-product {
    font-family: 'JetBrains Mono', monospace !important;
}
@media (max-width:768px){
    html body .testimonials-section.r155-room .testimonial-card { padding: 20px !important; }
}

/* ── R157-A · animated title sheen ── */
@keyframes r157-sheen { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
html body #main-content .r155-room .section-title {
    background-image: linear-gradient(100deg, currentColor 0%, currentColor 42%, var(--r155-teal) 50%, currentColor 58%, currentColor 100%) !important;
    background-size: 200% auto !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: r157-sheen 5.5s linear infinite;
}
@media (prefers-reduced-motion: reduce){
    html body #main-content .r155-room .section-title { animation: none !important; -webkit-text-fill-color: currentColor !important; background-image: none !important; }
}

/* ── R157-A · floating particles in stage rooms ── */
html body .r157-particles { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
html body .r157-particles span {
    position:absolute; bottom:-12px; border-radius:50%; background: var(--r155-teal);
    box-shadow: 0 0 6px rgba(13,148,136,0.6);
    animation-name: r157-float; animation-timing-function: linear; animation-iteration-count: infinite; opacity:0;
}
@keyframes r157-float {
    0% { transform: translateY(0) translateX(0); opacity: 0; }
    12% { opacity: 0.55; }
    88% { opacity: 0.45; }
    100% { transform: translateY(-65vh) translateX(18px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce){ html body .r157-particles { display:none !important; } }

/* ── R157-A · breathing CTA glow ── */
@keyframes r157-cta-breathe { 0%,100% { box-shadow: 0 0 0 0 rgba(13,148,136,0.0); } 50% { box-shadow: 0 0 26px 2px rgba(13,148,136,0.38); } }
html body .r155-stage .btn-primary,
html body .newsletter-section.r155-room .btn-primary,
html body .story-section.r155-room .btn-primary { animation: r157-cta-breathe 3.2s var(--r155-ease) infinite; }
@media (prefers-reduced-motion: reduce){
    html body .r155-stage .btn-primary, html body .newsletter-section.r155-room .btn-primary, html body .story-section.r155-room .btn-primary { animation:none !important; }
}

/* ── R157-A · traveling light along stage-room seams ── */
@keyframes r157-seam { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
html body section.r155-stage:not(.trust-marquee)::after {
    background: linear-gradient(90deg, transparent 0%, transparent 35%, rgba(13,148,136,0.7) 50%, transparent 65%, transparent 100%) !important;
    background-size: 200% 100% !important;
    animation: r157-seam 4.5s linear infinite;
}
@media (prefers-reduced-motion: reduce){
    html body section.r155-stage:not(.trust-marquee)::after { animation:none !important; background: linear-gradient(90deg, transparent, rgba(13,148,136,0.4), transparent) !important; }
}

/* ── R157-B · dramatic scroll entrances ── */
html body .r155-room [data-r155-reveal] {
    opacity: 0;
    transform: translateY(46px) scale(0.96);
    filter: blur(8px);
    transition: opacity 0.75s var(--r155-ease), transform 0.75s var(--r155-ease), filter 0.75s var(--r155-ease);
    will-change: opacity, transform, filter;
}
html body .r155-room [data-r155-reveal].r155-in {
    opacity: 1; transform: none; filter: blur(0);
}
@media (prefers-reduced-motion: reduce){
    html body .r155-room [data-r155-reveal] { opacity:1 !important; transform:none !important; filter:none !important; transition:none !important; }
}

/* ── R157-B · 3D tilt hover ── */
html body .goals-section.r155-room .goal-card,
html body .bestsellers-section.r155-room .bestseller-card,
html body .recently-viewed-section.r155-room .bestseller-card,
html body .testimonials-section.r155-room .testimonial-card {
    transform-style: preserve-3d;
    transition: transform 0.25s var(--r155-ease), box-shadow 0.35s var(--r155-ease), border-color 0.35s var(--r155-ease);
}
@media (prefers-reduced-motion: reduce){
    html body .goals-section.r155-room .goal-card,
    html body .bestsellers-section.r155-room .bestseller-card,
    html body .recently-viewed-section.r155-room .bestseller-card,
    html body .testimonials-section.r155-room .testimonial-card { transform:none !important; }
}

/* ── R157-C · animated HPLC chromatogram (proof room) ── */
html body .r157-chromatogram { position: relative; width: 100%; max-width: 560px; height: 84px; margin: 4px 0 18px; }
html body .r157-chromatogram svg { width: 100%; height: 100%; display: block; overflow: visible; }
html body .r157-chromatogram .r157-trace {
    fill: none; stroke: var(--r155-teal); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round;
    filter: drop-shadow(0 0 4px rgba(13,148,136,0.5));
    stroke-dasharray: 1400; stroke-dashoffset: 1400;
    animation: r157-trace-draw 4.5s var(--r155-ease) infinite;
}
@keyframes r157-trace-draw { 0% { stroke-dashoffset: 1400; } 55% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } }
html body .r157-chromatogram .r157-baseline { stroke: rgba(0,0,0,0.12); stroke-width: 1; }
html body .r157-chromatogram .r157-scan {
    stroke: rgba(13,148,136,0.5); stroke-width: 1.5;
    animation: r157-scan-sweep 4.5s linear infinite;
}
@keyframes r157-scan-sweep { 0% { transform: translateX(0); opacity:0; } 8%{opacity:1;} 92%{opacity:1;} 100% { transform: translateX(400px); opacity:0; } }
@media (prefers-reduced-motion: reduce){
    html body .r157-chromatogram .r157-trace { animation:none !important; stroke-dashoffset:0 !important; }
    html body .r157-chromatogram .r157-scan { display:none !important; }
}

/* ── R157-D · magnetic CTA transform var ── */
html body .r157-magnetic { transition: transform 0.2s var(--r155-ease); will-change: transform; }
@media (prefers-reduced-motion: reduce){ html body .r157-magnetic { transform:none !important; } }

/* ── R157-D · animated molecular dividers ── */
html body .r157-divider { position: relative; width: 100%; height: 54px; pointer-events: none; overflow: hidden; background: transparent; }
html body .r157-divider svg { position:absolute; top:0; left:50%; transform:translateX(-50%); width: min(680px, 90%); height: 100%; overflow: visible; }
html body .r157-divider .r157-bond { fill:none; stroke: rgba(13,148,136,0.45); stroke-width:1.5; stroke-dasharray: 700; stroke-dashoffset: 700; animation: r157-bond-draw 5s var(--r155-ease) infinite; }
@keyframes r157-bond-draw { 0%{stroke-dashoffset:700;} 60%{stroke-dashoffset:0;} 100%{stroke-dashoffset:0;} }
html body .r157-divider .r157-node { fill: var(--r155-teal); animation: r157-node-pulse 2.4s var(--r155-ease) infinite; }
html body .r157-divider .r157-node:nth-child(2){animation-delay:.3s;} 
html body .r157-divider .r157-node:nth-child(3){animation-delay:.6s;}
html body .r157-divider .r157-node:nth-child(4){animation-delay:.9s;}
html body .r157-divider .r157-node:nth-child(5){animation-delay:1.2s;}
@keyframes r157-node-pulse { 0%,100%{ r:3; opacity:.5; } 50%{ r:5; opacity:1; } }
@media (prefers-reduced-motion: reduce){
    html body .r157-divider .r157-bond { animation:none !important; stroke-dashoffset:0 !important; }
    html body .r157-divider .r157-node { animation:none !important; }
}
@media (max-width:768px){ html body .r157-divider { height: 40px; } }
/* ═══════════ R158 — INSTRUMENT × EXHIBIT · FOUNDATION ═══════════ */
:root {
    --r158-instrument: #06070A;
    --r158-instrument-2: #0c0e14;
    --r158-exhibit: #f7f3ea;
    --r158-exhibit-2: #fffdf8;
    --r158-ink: #0a0a0a;
    --r158-ink-soft: #4a4742;
    --r158-line-dark: rgba(255,255,255,0.08);
    --r158-line-light: rgba(0,0,0,0.10);
    --r158-d-ink: #fbfaf6;
    --r158-d-ink-soft: #a8a6a1;
    --r158-teal: #0d9488;
    --r158-teal-bright: #14b8a6;
    --r158-glow: rgba(13,148,136,0.22);
    --r158-ease: cubic-bezier(0.16,1,0.3,1);
    --r158-pad: clamp(80px, 9vw, 150px);
}
html body section.r158-room { position: relative; overflow: clip; }
html body section.r158-instrument { background: var(--r158-instrument) !important; color: var(--r158-d-ink) !important; border: none !important; }
html body section.r158-exhibit { background: var(--r158-exhibit) !important; color: var(--r158-ink) !important; border: none !important; }
html body .r158-room .r158-inner { width: 100%; max-width: 1240px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
html body .r158-room [data-r158-reveal]{ opacity:0; transform: translateY(40px) scale(0.97); filter: blur(7px); transition: opacity .7s var(--r158-ease), transform .7s var(--r158-ease), filter .7s var(--r158-ease); will-change:opacity,transform,filter; }
html body .r158-room [data-r158-reveal].r158-in{ opacity:1; transform:none; filter:blur(0); }
html body .r158-room [data-r158-reveal][style*="--r158-i"]{ transition-delay: calc(var(--r158-i) * 80ms); }
@media (prefers-reduced-motion: reduce){ html body .r158-room [data-r158-reveal]{ opacity:1 !important; transform:none !important; filter:none !important; transition:none !important; } }

/* ── R158-D · telemetry strip ── */
html body section.trust-marquee.r158-room{ padding:0 !important; border-top:1px solid var(--r158-line-dark) !important; border-bottom:1px solid var(--r158-line-dark) !important; display:flex; align-items:center; background:var(--r158-instrument) !important; }
html body #main-content .trust-marquee.r158-room .r158-tele-label,
html body #main-content .trust-marquee.r158-room .tm-item{ font-family:'JetBrains Mono',ui-monospace,monospace !important; }
html body .trust-marquee.r158-room .r158-tele-label{ flex:0 0 auto; padding:0 18px; font-size:10px; letter-spacing:.16em; color:var(--r158-teal); border-right:1px solid var(--r158-line-dark); align-self:stretch; display:flex; align-items:center; background:var(--r158-instrument-2); white-space:nowrap; }
html body .trust-marquee.r158-room .trust-marquee-track{ flex:1 1 auto; min-width:0; }
html body .trust-marquee.r158-room .tm-item{ color:var(--r158-d-ink-soft) !important; font-size:11px !important; letter-spacing:.08em !important; display:inline-flex; align-items:center; gap:8px; }
html body .trust-marquee.r158-room .tm-item::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--r158-teal); box-shadow:0 0 6px var(--r158-teal); }
html body .trust-marquee.r158-room .tm-item i{ display:none !important; }
html body .trust-marquee.r158-room .tm-sep{ color:rgba(13,148,136,.4) !important; }
html body .trust-marquee.r158-room .tm-item::before{ animation:r158-tele-pulse 2s var(--r158-ease) infinite; }
@keyframes r158-tele-pulse{0%,100%{opacity:.4}50%{opacity:1}}
@media (prefers-reduced-motion: reduce){ html body .trust-marquee.r158-room .tm-item::before{ animation:none !important; } }
@media (max-width:768px){ html body .trust-marquee.r158-room .r158-tele-label{ display:none; } }

/* ── R158-E · live HPLC proof console ── */
html body section.quality-section.r158-room{ padding: var(--r158-pad) 0 !important; }
html body #main-content .quality-section.r158-room .r158-kicker{ font-family:'JetBrains Mono',monospace !important; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--r158-teal); }
html body #main-content .quality-section.r158-room .r158-proof-h{ font-family:'Bricolage Grotesque',sans-serif !important; font-weight:600 !important; font-size:clamp(32px,4.6vw,58px) !important; line-height:1.04 !important; letter-spacing:-.02em !important; color:var(--r158-d-ink) !important; margin:12px 0 28px !important; }
html body .quality-section.r158-room .r158-scope{ position:relative; height:200px; border:1px solid rgba(13,148,136,.3); border-radius:10px; background:var(--r158-instrument-2); background-image:repeating-linear-gradient(90deg,rgba(13,148,136,.06) 0 1px,transparent 1px 40px),repeating-linear-gradient(0deg,rgba(13,148,136,.06) 0 1px,transparent 1px 40px); overflow:hidden; }
html body .quality-section.r158-room .r158-scope-svg{ position:absolute; inset:0; width:100%; height:100%; }
html body .quality-section.r158-room .r158-scope-trace{ fill:none; stroke:var(--r158-teal); stroke-width:2.5; stroke-linejoin:round; filter:drop-shadow(0 0 5px var(--r158-glow)); stroke-dasharray:2400; stroke-dashoffset:2400; animation:r158-trace 4.5s var(--r158-ease) infinite; }
@keyframes r158-trace{0%{stroke-dashoffset:2400}55%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
html body .quality-section.r158-room .r158-scope-scan{ stroke:rgba(13,148,136,.55); stroke-width:1.5; animation:r158-scan 4.5s linear infinite; }
@keyframes r158-scan{0%{transform:translateX(0);opacity:0}8%{opacity:1}92%{opacity:1}100%{transform:translateX(1000px);opacity:0}}
html body .quality-section.r158-room .r158-scope-readout{ position:absolute; top:18px; right:22px; text-align:right; }
html body #main-content .quality-section.r158-room .r158-scope-num{ font-family:'Bricolage Grotesque',sans-serif !important; font-weight:700; font-size:clamp(40px,5vw,64px); color:var(--r158-d-ink); letter-spacing:-.03em; line-height:1; }
html body #main-content .quality-section.r158-room .r158-scope-unit{ font-family:'JetBrains Mono',monospace !important; font-size:10px; color:var(--r158-teal); display:inline-block; text-align:left; margin-left:6px; vertical-align:bottom; }
/* ledger feed */
html body .quality-section.r158-room .r158-ledger{ margin-top:22px; display:grid; gap:0; max-width:640px; }
html body .quality-section.r158-room .r158-led-row{ display:grid; grid-template-columns:90px 1fr 64px; gap:16px; align-items:center; padding:10px 0; border-top:1px solid var(--r158-line-dark); }
html body #main-content .quality-section.r158-room .r158-led-row{ font-family:'JetBrains Mono',monospace !important; font-size:12px; }
html body .quality-section.r158-room .r158-led-id{ color:var(--r158-d-ink); font-weight:700; }
html body .quality-section.r158-room .r158-led-bar{ height:6px; border-radius:4px; background:rgba(255,255,255,.07); overflow:hidden; }
html body .quality-section.r158-room .r158-led-bar i{ display:block; height:100%; width:0; background:var(--r158-teal); box-shadow:0 0 8px var(--r158-glow); border-radius:4px; transition:width 1s var(--r158-ease); }
html body .quality-section.r158-room .r158-led-pct{ color:var(--r158-teal); font-weight:700; text-align:right; }
/* tabs restyled as channel buttons */
html body .quality-section.r158-room .quality-tabs{ margin-top:30px !important; border:none !important; }
html body #main-content .quality-section.r158-room .quality-tab{ font-family:'JetBrains Mono',monospace !important; font-size:11px !important; letter-spacing:.06em !important; }
html body .quality-section.r158-room .quality-tab{ background:transparent !important; color:var(--r158-d-ink-soft) !important; border:1px solid var(--r158-line-dark) !important; border-radius:20px !important; }
html body .quality-section.r158-room .quality-tab.active{ background:var(--r158-teal) !important; color:#04201d !important; border-color:var(--r158-teal) !important; }
html body .quality-section.r158-room .quality-panel{ color:var(--r158-d-ink-soft) !important; }
html body #main-content .quality-section.r158-room .qps-number{ font-family:'Bricolage Grotesque',sans-serif !important; color:var(--r158-d-ink) !important; }
html body .quality-section.r158-room .qps-plus{ color:var(--r158-teal) !important; }
html body .quality-section.r158-room .quality-panel-body h3{ color:var(--r158-d-ink) !important; }
html body .quality-section.r158-room .link-arrow{ color:var(--r158-teal) !important; }
@media (prefers-reduced-motion: reduce){
  html body .quality-section.r158-room .r158-scope-trace{ animation:none !important; stroke-dashoffset:0 !important; }
  html body .quality-section.r158-room .r158-scope-scan{ display:none !important; }
}
@media (max-width:768px){
  html body .quality-section.r158-room .r158-scope{ height:150px; }
  html body .quality-section.r158-room .r158-ledger{ max-width:none; }
}

/* ── R158-F · browse module selector ── */
html body section.goals-section.r158-room{ padding:var(--r158-pad) 0 !important; }
html body .goals-section.r158-room .r158-modules-console{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:36px; align-items:start; }
html body .goals-section.r158-room .r158-mod{ display:grid !important; grid-template-columns:30px 1fr 18px; align-items:center; gap:14px; padding:16px 16px !important; border:1px solid var(--r158-line-dark) !important; border-radius:8px !important; background:var(--r158-instrument-2) !important; margin-bottom:8px; position:relative; overflow:hidden; transition:transform .3s var(--r158-ease),border-color .3s var(--r158-ease),box-shadow .3s var(--r158-ease) !important; }
html body .goals-section.r158-room .r158-mod::after{ content:""; position:absolute; left:0;top:0;bottom:0;width:2px;background:var(--r158-teal);opacity:.25; }
html body .goals-section.r158-room .r158-mod:hover, html body .goals-section.r158-room .r158-mod.is-active{ transform:translateX(6px) !important; border-color:rgba(13,148,136,.5) !important; box-shadow:0 0 24px var(--r158-glow) !important; }
html body .goals-section.r158-room .r158-mod:hover::after, html body .goals-section.r158-room .r158-mod.is-active::after{ opacity:1; }
html body .goals-section.r158-room .goal-icon{ color:var(--r158-teal) !important; background:none !important; font-size:15px !important; }
html body #main-content .goals-section.r158-room .r158-mod-name{ font-family:'Bricolage Grotesque',sans-serif !important; font-weight:600 !important; font-size:15px !important; color:var(--r158-d-ink) !important; }
html body .goals-section.r158-room .goal-arrow{ color:#5a5a55 !important; }
html body .goals-section.r158-room .r158-mod-readout{ border:1px solid var(--r158-line-dark); border-radius:10px; background:var(--r158-instrument-2); padding:24px; position:sticky; top:90px; min-height:220px; }
html body #main-content .goals-section.r158-room .r158-mod-ro-label{ font-family:'JetBrains Mono',monospace !important; font-size:10px; letter-spacing:.16em; color:var(--r158-teal); }
html body #main-content .goals-section.r158-room .r158-mod-ro-name{ font-family:'Bricolage Grotesque',sans-serif !important; font-weight:600; font-size:clamp(24px,3vw,36px); color:var(--r158-d-ink); margin:12px 0; letter-spacing:-.02em; }
html body #main-content .goals-section.r158-room .r158-mod-ro-compounds{ font-family:'JetBrains Mono',monospace !important; font-size:13px; color:var(--r158-d-ink-soft); line-height:1.8; }
html body #main-content .goals-section.r158-room .r158-mod-ro-cta{ font-family:'JetBrains Mono',monospace !important; font-size:12px; color:var(--r158-teal) !important; display:inline-block; margin-top:18px; }
html body .goals-section.r158-room .r158-mod .visually-hidden{ position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0); }
@media (max-width:768px){
  html body .goals-section.r158-room .r158-modules-console{ grid-template-columns:1fr; }
  html body .goals-section.r158-room .r158-mod-readout{ position:static; }
}

/* ── R158-G · lit specimen bench ── */
html body section.bestsellers-section.r158-room{ padding:var(--r158-pad) 0 !important; }
html body .bestsellers-section.r158-room .r158-bench-rail{ display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; padding:30px 4px 16px; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
/* keep the JS grid behaving as a flex row inside the rail */
html body .bestsellers-section.r158-room #bestsellers-grid{ display:flex !important; gap:20px !important; grid-template-columns:none !important; }
html body .bestsellers-section.r158-room .bestseller-card{
    scroll-snap-align:start; flex:0 0 clamp(240px,27vw,300px);
    background:linear-gradient(180deg,#0e1118,#08090d) !important;
    border:1px solid var(--r158-line-dark) !important; border-radius:14px !important;
    position:relative; padding-top:20px !important; overflow:hidden;
    transition:transform .4s var(--r158-ease),box-shadow .4s var(--r158-ease),border-color .4s var(--r158-ease) !important;
}
/* museum light pool behind the vial */
html body .bestsellers-section.r158-room .bestseller-card .bs-image{ position:relative; }
html body .bestsellers-section.r158-room .bestseller-card .bs-image::before{ content:""; position:absolute; left:50%; top:42%; width:150px; height:150px; transform:translate(-50%,-50%); background:radial-gradient(circle, var(--r158-glow), transparent 68%); filter:blur(6px); z-index:0; }
html body .bestsellers-section.r158-room .bestseller-card .bs-image img{ position:relative; z-index:1; filter:drop-shadow(0 22px 38px rgba(0,0,0,.6)) drop-shadow(0 0 20px var(--r158-glow)) !important; }
/* pedestal line under the specimen */
html body .bestsellers-section.r158-room .bestseller-card .bs-image::after{ content:""; position:absolute; left:18%; right:18%; bottom:6px; height:1px; background:linear-gradient(90deg,transparent,var(--r158-teal),transparent); opacity:.5; z-index:1; }
html body .bestsellers-section.r158-room .bestseller-card:hover{ transform:translateY(-8px) !important; border-color:rgba(13,148,136,.45) !important; box-shadow:0 34px 60px rgba(0,0,0,.55),0 0 34px var(--r158-glow) !important; }
html body #main-content .bestsellers-section.r158-room .bestseller-card .bs-name{ font-family:'Bricolage Grotesque',sans-serif !important; color:var(--r158-d-ink) !important; }
html body #main-content .bestsellers-section.r158-room .bestseller-card .bs-price{ font-family:'JetBrains Mono',monospace !important; color:var(--r158-teal) !important; }
html body .bestsellers-section.r158-room .bestseller-card .bs-price-original{ color:var(--r158-d-ink-soft) !important; }
@media (prefers-reduced-motion: reduce){ html body .bestsellers-section.r158-room .bestseller-card:hover{ transform:none !important; } }
@media (max-width:768px){ html body .bestsellers-section.r158-room .bestseller-card{ flex-basis:78vw; } }

/* ── R158-E-fix · darken tab panels into console theme + dedupe ── */
html body .quality-section.r158-room .quality-tabs{ margin-top:36px !important; }
html body .quality-section.r158-room .quality-panels{ background:transparent !important; box-shadow:none !important; border:none !important; border-radius:0 !important; padding:0 !important; margin-top:20px !important; }
html body .quality-section.r158-room .quality-panel{ background:transparent !important; }
/* the green stat card -> dark instrument plate */
html body .quality-section.r158-room .quality-panel-stat{ background:var(--r158-instrument-2) !important; border:1px solid rgba(13,148,136,.3) !important; border-radius:12px !important; box-shadow:none !important; }
html body #main-content .quality-section.r158-room .qps-number{ font-family:'Bricolage Grotesque',sans-serif !important; color:var(--r158-d-ink) !important; }
html body .quality-section.r158-room .qps-plus{ color:var(--r158-teal) !important; }
html body #main-content .quality-section.r158-room .qps-label{ font-family:'JetBrains Mono',monospace !important; color:var(--r158-teal) !important; }
html body #main-content .quality-section.r158-room .quality-panel-body h3{ font-family:'Bricolage Grotesque',sans-serif !important; color:var(--r158-d-ink) !important; }
html body .quality-section.r158-room .quality-panel-body p{ color:var(--r158-d-ink-soft) !important; }
html body .quality-section.r158-room .quality-panel-body .link-arrow{ color:var(--r158-teal) !important; }
/* ═══════════ R159 — MAXIMAL ENRICHMENT · FOUNDATION ═══════════ */
:root{ --r159-ease:cubic-bezier(0.16,1,0.3,1); --r159-display:clamp(40px,6vw,92px); }
/* depth planes: L0 atmosphere (behind), L1 graphic, L2 content */
html body .r159 .r159-atmos{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
html body .r159 .r159-l1{ position:relative; z-index:1; }
html body .r159 .r159-l2{ position:relative; z-index:2; }
/* shared CSS atmospheres (generated-image assets layer on top in Phase C) */
@keyframes r159-drift{ from{ background-position:0 0 } to{ background-position:120px 200px } }
html body .r159-atmos-molecular{ background-image:radial-gradient(rgba(13,148,136,.06) 1px,transparent 1.6px); background-size:34px 34px; animation:r159-drift 70s linear infinite; }
html body .r159-atmos-paper{ background-image:radial-gradient(rgba(0,0,0,.025) 1px,transparent 1.4px); background-size:30px 30px; }
/* shared motion keyframes */



@keyframes r159-breathe{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.05);opacity:1}}
/* scroll-parallax hook (bootR159 sets --r159-py) */
html body .r159 [data-r159-parallax]{ transform:translate3d(0,var(--r159-py,0px),0); will-change:transform; }
@media (prefers-reduced-motion: reduce){
  html body .r159-atmos-molecular{ animation:none !important; }
  html body .r159 [data-r159-parallax]{ transform:none !important; }
}
/* ── R159-C · generated molecular-field atmosphere (dark instrument rooms) ── */
html body .r159-atmos-asset{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url('images/r159-molecular-field-dark.webp?v=1') center/cover no-repeat;
  opacity:.5; mix-blend-mode:screen; }

/* ── R159-D · hero living data field ── */
html body section#hero.r159{ position:relative !important; overflow:clip !important; }
html body #hero.r159 .hero-content{ position:relative; z-index:2; }
html body #hero.r159 .hero-spotlight{ z-index:1 !important; }
/* breathing teal glow behind the stat (CSS, replaces generated bloom) */
html body #hero.r159 .hero-stat{ position:relative; }
html body #hero.r159 .hero-stat::before{ content:""; position:absolute; left:8%; top:50%; width:420px; height:420px; transform:translateY(-50%); z-index:-1; pointer-events:none; background:radial-gradient(circle, rgba(13,148,136,.20), transparent 68%); filter:blur(8px); animation:r159-breathe 7s var(--r159-ease) infinite; }
@media (prefers-reduced-motion: reduce){ html body #hero.r159 .hero-stat::before{ animation:none !important; } }
@media (max-width:768px){ html body #hero.r159 .hero-stat::before{ width:280px; height:280px; } }

/* R159-D · scroll-depth parallax integration.
   .hero-text and .hero-visual already carry the heroFadeIn entrance
   animation with fill-mode:both, whose final keyframe holds a transform —
   that filled transform would win over the shared [data-r159-parallax]
   rule and the parallax would never apply. .hero-visual additionally
   carries an !important cursor-parallax transform (--hp-parallax-x/y).
   Below we compose BOTH signals so the entrance, the cursor parallax,
   and the new scroll parallax all coexist. Scoped to #hero.r159 only. */
html body #hero.r159 .hero-text[data-r159-parallax]{
  transform: translate3d(0, var(--r159-py,0px), 0) !important;
  transition: transform .15s linear !important;
}
html body #hero.r159 .hero-visual[data-r159-parallax]{
  transform: translate3d(var(--hp-parallax-x,0px), calc(var(--hp-parallax-y,0px) + var(--r159-py,0px)), 0) !important;
}
@media (prefers-reduced-motion: reduce){
  html body #hero.r159 .hero-text[data-r159-parallax],
  html body #hero.r159 .hero-visual[data-r159-parallax]{ transform:none !important; }
}

/* ── R159-E · telemetry cycling LEDs ── */
html body .trust-marquee.r158-room .tm-item.r159-tele-active::before{ background:var(--r158-teal-bright,#14b8a6) !important; box-shadow:0 0 10px #14b8a6 !important; transform:scale(1.5); }
html body .trust-marquee.r158-room .tm-item::before{ transition:transform .3s var(--r159-ease), box-shadow .3s var(--r159-ease), background .3s var(--r159-ease); }
html body .trust-marquee.r158-room .tm-item:hover::before{ background:#14b8a6 !important; box-shadow:0 0 10px #14b8a6 !important; }
html body .trust-marquee.r158-room .tm-item:hover{ color:var(--r158-d-ink,#fbfaf6) !important; }
@media (prefers-reduced-motion: reduce){ html body .trust-marquee.r158-room .tm-item.r159-tele-active::before{ transform:none !important; } }

/* ── R159-F · proof console reactive scope ── */
html body .quality-section.r158-room.r159 .r158-inner{ position:relative; z-index:1; }
/* L0 atmosphere — drifting molecular dot field */
html body .quality-section.r158-room.r159 .r159-atmos{ position:absolute; inset:0; z-index:0; pointer-events:none; }
html body .quality-section.r158-room.r159 .r159-atmos-molecular{ background-image:radial-gradient(rgba(13,148,136,.16) 1px, transparent 1.6px); background-size:34px 34px; opacity:.5; animation:r159f-drift 26s linear infinite; }
@keyframes r159f-drift{ 0%{ background-position:0 0; } 100%{ background-position:34px 68px; } }
/* scope channel label */
html body #main-content .quality-section.r158-room .r159-scope-channel{ font-family:'JetBrains Mono',monospace !important; }
html body .quality-section.r158-room .r159-scope-channel{ position:absolute; top:14px; left:18px; z-index:3; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--r158-teal,#0d9488); }
/* SVG peak + axis labels */
html body .quality-section.r158-room .r159-peak-label{ font:600 9px/1 'JetBrains Mono',monospace; fill:rgba(168,166,161,.7); }
html body .quality-section.r158-room .r159-axis-label{ font:500 8px/1 'JetBrains Mono',monospace; fill:rgba(13,148,136,.45); }
/* trace redraw guard */
html body .quality-section.r158-room .r158-scope-trace.r159-redraw{ animation:none; }
/* channel tab underline grow on hover */
html body .quality-section.r158-room .quality-tab{ position:relative; }
html body .quality-section.r158-room .quality-tab::after{ content:""; position:absolute; left:14px; right:14px; bottom:4px; height:1px; background:var(--r158-teal,#0d9488); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--r159-ease); }
html body .quality-section.r158-room .quality-tab:hover::after{ transform:scaleX(1); }
@media (prefers-reduced-motion: reduce){
  html body .quality-section.r158-room.r159 .r159-atmos-molecular{ animation:none !important; }
  html body .quality-section.r158-room .quality-tab::after{ transition:none !important; }
}
@media (max-width:768px){
  html body .quality-section.r158-room.r159 .r159-atmos-molecular{ background-size:24px 24px; opacity:.35; }
  html body .quality-section.r158-room .r159-scope-channel{ top:10px; left:12px; font-size:9px; }
}

/* ── R159-G · module sparkline ── */
html body .goals-section.r158-room.r159 .r158-inner{ position:relative; z-index:1; }
html body .goals-section.r158-room.r159 .r159-atmos-molecular{ background-image:radial-gradient(rgba(13,148,136,.14) 1px, transparent 1.6px); background-size:34px 34px; opacity:.45; animation:r159g-drift 30s linear infinite; }
@keyframes r159g-drift{ 0%{ background-position:0 0; } 100%{ background-position:34px 68px; } }
html body .goals-section.r158-room .r159-mod-spark{ width:100%; height:54px; display:block; margin:10px 0 14px; }
html body .goals-section.r158-room .r159-mod-spark-line{ fill:none; stroke:var(--r158-teal,#0d9488); stroke-width:2; filter:drop-shadow(0 0 4px rgba(13,148,136,.4)); stroke-dasharray:600; stroke-dashoffset:600; }
html body .goals-section.r158-room .r159-mod-spark-line.r159-draw{ animation:r159g-spark 1s var(--r159-ease) forwards; }
@keyframes r159g-spark{ to{ stroke-dashoffset:0; } }
/* readout inner glow on change */
html body .goals-section.r158-room .r158-mod-readout{ transition:box-shadow .4s var(--r159-ease); }
html body .goals-section.r158-room .r158-mod-readout.r159-glow{ box-shadow:inset 0 0 36px rgba(13,148,136,.18), 0 0 24px var(--r158-glow); }
/* active channel: slide further + teal scanline + edge pulse */
html body .goals-section.r158-room .r158-mod.is-active{ transform:translateX(10px) !important; }
html body .goals-section.r158-room .r158-mod.is-active::after{ animation:r159g-edge 1.8s var(--r159-ease) infinite; }
@keyframes r159g-edge{ 0%,100%{ opacity:.55; box-shadow:0 0 6px rgba(13,148,136,.4); } 50%{ opacity:1; box-shadow:0 0 14px rgba(13,148,136,.85); } }
html body .goals-section.r158-room .r158-mod.is-active::before{ content:""; position:absolute; left:0; right:0; top:0; height:1px; background:linear-gradient(90deg, transparent, rgba(13,148,136,.7), transparent); animation:r159g-scan 2.4s var(--r159-ease) infinite; }
@keyframes r159g-scan{ 0%{ transform:translateY(0); opacity:0; } 12%{ opacity:1; } 88%{ opacity:1; } 100%{ transform:translateY(48px); opacity:0; } }
@media (prefers-reduced-motion: reduce){
  html body .goals-section.r158-room .r159-mod-spark-line{ stroke-dashoffset:0 !important; animation:none !important; }
  html body .goals-section.r158-room.r159 .r159-atmos-molecular{ animation:none !important; }
  html body .goals-section.r158-room .r158-mod.is-active::after,
  html body .goals-section.r158-room .r158-mod.is-active::before{ animation:none !important; }
  html body .goals-section.r158-room .r158-mod-readout{ transition:none !important; }
}
@media (max-width:768px){
  html body .goals-section.r158-room.r159 .r159-atmos-molecular{ background-size:24px 24px; opacity:.3; }
  html body .goals-section.r158-room .r159-mod-spark{ height:44px; }
  html body .goals-section.r158-room .r159-mod-spark-line{ stroke-dashoffset:0 !important; animation:none !important; }
  html body .goals-section.r158-room .r158-mod.is-active::before{ display:none; }
}

/* ── R159-H · specimen bench focus spotlight ── */
html body .bestsellers-section.r158-room.r159 .r158-inner{ position:relative; z-index:1; }
html body .bestsellers-section.r158-room.r159 .r159-atmos-molecular{ background-image:radial-gradient(rgba(13,148,136,.12) 1px, transparent 1.6px); background-size:34px 34px; opacity:.4; animation:r159-drift 60s linear infinite; }
html body .bestsellers-section.r158-room.r159 .bestseller-card{ position:relative; }
html body .bestsellers-section.r158-room.r159 .bestseller-card::after{ content:""; position:absolute; left:14%; right:14%; bottom:-14px; height:22px; border-radius:50%; background:radial-gradient(ellipse at center, rgba(0,0,0,.45), transparent 72%); opacity:.6; transition:opacity .4s var(--r159-ease), transform .4s var(--r159-ease); pointer-events:none; z-index:0; }
html body .bestsellers-section.r158-room .bestseller-card{ transition:transform .4s var(--r159-ease), box-shadow .4s var(--r159-ease), opacity .4s var(--r159-ease), filter .4s var(--r159-ease) !important; }
html body .bestsellers-section.r158-room .bestseller-card.r159-dimmed{ opacity:.5; filter:brightness(.7) saturate(.85); }
html body .bestsellers-section.r158-room .bestseller-card.r159-dimmed::after{ opacity:.25; }
html body .bestsellers-section.r158-room .bestseller-card.r159-focused{ transform:translateY(-10px) scale(1.02) !important; box-shadow:0 40px 70px rgba(0,0,0,.6), 0 0 44px var(--r159-glow,rgba(13,148,136,.22)) !important; border-color:rgba(13,148,136,.55) !important; z-index:3; }
html body .bestsellers-section.r158-room .bestseller-card.r159-focused::after{ opacity:.85; transform:scaleX(1.08); }
html body .bestsellers-section.r158-room .bestseller-card.r159-focused .bs-image::before{ opacity:1; animation:r159-breathe 3.5s var(--r159-ease) infinite; }
@media (prefers-reduced-motion: reduce){ html body .bestsellers-section.r158-room.r159 .r159-atmos-molecular{ animation:none !important; } html body .bestsellers-section.r158-room .bestseller-card.r159-focused{ transform:none !important; } html body .bestsellers-section.r158-room .bestseller-card.r159-focused .bs-image::before{ animation:none !important; } }
@media (max-width:768px){ html body .bestsellers-section.r158-room .bestseller-card.r159-dimmed{ opacity:1; filter:none; } html body .bestsellers-section.r158-room .bestseller-card.r159-focused{ transform:none !important; } html body .bestsellers-section.r158-room.r159 .bestseller-card::after{ display:none; } }

/* ── R159-I · recently-viewed mini specimen bench ── */
html body section.recently-viewed-section.r158-room{ padding:var(--r158-pad,clamp(80px,9vw,150px)) 0 !important; }
html body .recently-viewed-section.r158-room.r159 .r158-inner{ position:relative; z-index:1; }
html body .recently-viewed-section.r158-room .r158-bench-rail{ display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; padding:24px 4px 14px; }
html body .recently-viewed-section.r158-room #recently-viewed-grid{ display:flex !important; gap:18px !important; grid-template-columns:none !important; }
html body .recently-viewed-section.r158-room .rv-card,
html body .recently-viewed-section.r158-room .product-card,
html body .recently-viewed-section.r158-room .bestseller-card{ scroll-snap-align:start; flex:0 0 clamp(200px,22vw,240px); background:linear-gradient(180deg,#0e1118,#08090d) !important; border:1px solid var(--r158-line-dark,rgba(255,255,255,.08)) !important; border-radius:12px !important; transition:transform .4s var(--r159-ease), box-shadow .4s var(--r159-ease) !important; }
html body .recently-viewed-section.r158-room .rv-card:hover,
html body .recently-viewed-section.r158-room .product-card:hover,
html body .recently-viewed-section.r158-room .bestseller-card:hover{ transform:translateY(-6px) !important; border-color:rgba(13,148,136,.45) !important; box-shadow:0 28px 48px rgba(0,0,0,.5), 0 0 28px var(--r159-glow,rgba(13,148,136,.22)) !important; }
html body .recently-viewed-section.r158-room .rv-card img,
html body .recently-viewed-section.r158-room .product-card img,
html body .recently-viewed-section.r158-room .bestseller-card img{ filter:drop-shadow(0 20px 34px rgba(0,0,0,.6)) drop-shadow(0 0 18px var(--r159-glow,rgba(13,148,136,.22))) !important; }
html body .recently-viewed-section.r158-room .rv-card .rv-name{ color:var(--r158-d-ink,#fbfaf6) !important; }
html body .recently-viewed-section.r158-room .rv-card .rv-price{ color:var(--r158-teal,#0d9488) !important; }
html body #main-content .recently-viewed-section.r158-room h2, html body #main-content .recently-viewed-section.r158-room .section-title{ font-family:'Bricolage Grotesque',sans-serif !important; }
html body .recently-viewed-section.r158-room h2, html body .recently-viewed-section.r158-room .section-title{ color:var(--r158-d-ink,#fbfaf6) !important; }
html body .recently-viewed-section.r158-room .section-subtitle{ color:var(--r158-d-ink-soft,#a8a6a1) !important; }
@media (max-width:768px){ html body .recently-viewed-section.r158-room .rv-card, html body .recently-viewed-section.r158-room .product-card, html body .recently-viewed-section.r158-room .bestseller-card{ flex-basis:70vw; } }

/* ════════════════════════════════════════════════════════
   R159-J · credentials wall (EXHIBIT) — warm paper, oversized
   Bricolage numerals, engraved frames, hairlines, hover lift.
   ════════════════════════════════════════════════════════ */
html body section.r154-verified.r158-room.r159-credentials{ padding:var(--r158-pad,clamp(80px,9vw,150px)) 0 !important; }
html body .r154-verified.r159-credentials .r158-inner{ position:relative; z-index:1; }
/* paper grain atmosphere (L0) */
html body .r154-verified.r159-credentials .r159-atmos{ position:absolute; inset:0; z-index:0; pointer-events:none; }
html body .r154-verified.r159-credentials .r159-atmos-paper{ background-image:radial-gradient(rgba(10,10,10,.045) 1px, transparent 1.5px); background-size:28px 28px; opacity:.55; }
/* heading + sub on ink */
html body #main-content .r154-verified.r159-credentials .r154-verified-heading{ font-family:'Bricolage Grotesque',sans-serif !important; color:var(--r158-ink,#0a0a0a) !important; font-size:clamp(30px,4.4vw,56px); line-height:1.04; letter-spacing:-.02em; font-weight:700; margin:0 0 12px; max-width:18ch; }
html body #main-content .r154-verified.r159-credentials .r154-verified-sub{ font-family:'JetBrains Mono',monospace !important; color:var(--r158-ink-soft,#4a4742); font-size:13px; letter-spacing:.01em; margin:0 0 clamp(36px,5vw,64px); max-width:54ch; }
/* the wall grid */
html body .r154-verified.r159-credentials .r159-cred-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,28px); transform:translateY(var(--r159-py,0)); will-change:transform; }
/* an exhibit plate */
html body .r154-verified.r159-credentials .r159-cred-plate{ position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:8px; min-height:240px; padding:26px 24px 24px; text-decoration:none !important; background:var(--r158-exhibit-2,#fffdf8); border:1px solid rgba(10,10,10,.12); border-radius:6px; box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 18px 34px rgba(10,10,10,.08), 0 2px 6px rgba(10,10,10,.05); transition:transform .42s var(--r159-ease,cubic-bezier(0.16,1,0.3,1)), box-shadow .42s var(--r159-ease,cubic-bezier(0.16,1,0.3,1)), border-color .42s var(--r159-ease,cubic-bezier(0.16,1,0.3,1)); }
/* thin engraved inner frame */
html body .r154-verified.r159-credentials .r159-cred-plate::before{ content:""; position:absolute; inset:7px; border:1px solid rgba(10,10,10,.10); border-radius:3px; pointer-events:none; transition:border-color .42s var(--r159-ease,cubic-bezier(0.16,1,0.3,1)); }
/* plate index — mono, teal, top-left */
html body #main-content .r154-verified.r159-credentials .r159-cred-index{ font-family:'JetBrains Mono',monospace !important; font-size:11px; letter-spacing:.16em; color:var(--r158-teal,#0d9488); font-weight:600; }
/* oversized numeral */
html body #main-content .r154-verified.r159-credentials .r159-cred-num{ font-family:'Bricolage Grotesque',sans-serif !important; color:var(--r158-ink,#0a0a0a); font-weight:700; font-size:clamp(38px,4.6vw,64px); line-height:.95; letter-spacing:-.03em; margin-top:auto; }
/* label — mono teal */
html body #main-content .r154-verified.r159-credentials .r159-cred-label{ font-family:'JetBrains Mono',monospace !important; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--r158-teal,#0d9488); font-weight:600; }
/* one-line detail */
html body #main-content .r154-verified.r159-credentials .r159-cred-line{ font-family:'JetBrains Mono',monospace !important; font-size:12px; color:var(--r158-ink-soft,#4a4742); letter-spacing:.01em; }
/* hover: lift + teal frame */
html body .r154-verified.r159-credentials .r159-cred-plate:hover{ transform:translateY(-8px); border-color:rgba(13,148,136,.55); box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 34px 60px rgba(10,10,10,.16), 0 0 0 1px rgba(13,148,136,.18); }
html body .r154-verified.r159-credentials .r159-cred-plate:hover::before{ border-color:rgba(13,148,136,.45); }
html body .r154-verified.r159-credentials .r159-cred-plate:focus-visible{ outline:2px solid var(--r158-teal,#0d9488); outline-offset:3px; }
/* reduced motion */
@media (prefers-reduced-motion: reduce){
  html body .r154-verified.r159-credentials .r159-cred-grid{ transform:none !important; }
  html body .r154-verified.r159-credentials .r159-cred-plate:hover{ transform:none; }
}
/* tablet → 2-up, mobile → single column */
@media (max-width:1024px){ html body .r154-verified.r159-credentials .r159-cred-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){
  html body .r154-verified.r159-credentials .r159-cred-grid{ grid-template-columns:1fr; transform:none !important; }
  html body .r154-verified.r159-credentials .r159-cred-plate{ min-height:0; }
}

/* ════════════════════════════════════════════════════════
   R159-K · "The Standard" manifesto (EXHIBIT room)
   Oversized kinetic Bricolage headline (left) + engraved
   spec ledger (right) on warm paper. Hairline rules draw in
   left→right and mono metrics slide in on .r159-in; headline
   gets a teal sheen sweep. Hover highlights a ledger row.
   ════════════════════════════════════════════════════════ */
html body section.why-section.r158-room.r159-standard{ padding:var(--r158-pad,clamp(80px,9vw,150px)) 0 !important; position:relative; overflow:hidden; }
html body .why-section.r159-standard .r158-inner{ position:relative; z-index:1; }
/* paper grain atmosphere (L0) */
html body .why-section.r159-standard .r159-atmos{ position:absolute; inset:0; z-index:0; pointer-events:none; }
html body .why-section.r159-standard .r159-atmos-paper{ background-image:radial-gradient(rgba(10,10,10,.045) 1px, transparent 1.5px); background-size:30px 30px; opacity:.55; }

/* two-column editorial spread */
html body .why-section.r159-standard .r159-std-spread{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(40px,6vw,96px); align-items:start; }

/* LEFT — oversized kinetic statement */
html body #main-content .why-section.r159-standard .r159-std-kicker{ font-family:'JetBrains Mono',monospace !important; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--r158-teal,#0d9488); font-weight:600; margin:0 0 18px; }
html body #main-content .why-section.r159-standard .r159-std-headline{
    font-family:'Bricolage Grotesque',sans-serif !important; font-weight:700;
    font-size:var(--r159-display,clamp(40px,6vw,92px)); line-height:.98; letter-spacing:-.03em;
    color:var(--r158-ink,#0a0a0a) !important; margin:0; max-width:14ch;
    transform:translateY(var(--r159-py,0)); will-change:transform;
    /* teal sheen sweep overlay */
    background-image:linear-gradient(100deg, transparent 38%, rgba(13,148,136,.55) 50%, transparent 62%);
    background-size:220% 100%; background-position:200% 0; background-repeat:no-repeat;
    -webkit-background-clip:text; background-clip:text;
}
html body .why-section.r159-standard.r159-in .r159-std-headline{ animation:r159k-sheen 1.5s var(--r159-ease,cubic-bezier(0.16,1,0.3,1)) .35s 1; }
@keyframes r159k-sheen{ 0%{ background-position:200% 0; } 100%{ background-position:-120% 0; } }

/* RIGHT — engraved spec ledger */
html body .why-section.r159-standard .r159-std-ledger{ display:flex; flex-direction:column; }
html body .why-section.r159-standard .r159-std-row{
    position:relative; display:grid; grid-template-columns:120px 1fr auto; gap:6px 22px; align-items:baseline;
    padding:22px 0 22px 14px; border-left:2px solid transparent;
    transition:background .35s var(--r159-ease,cubic-bezier(0.16,1,0.3,1)), border-left-color .35s var(--r159-ease,cubic-bezier(0.16,1,0.3,1)), padding-left .35s var(--r159-ease,cubic-bezier(0.16,1,0.3,1));
}
/* hairline rule that draws left→right */
html body .why-section.r159-standard .r159-std-row::after{
    content:""; position:absolute; left:0; bottom:0; right:0; height:1px; background:rgba(10,10,10,.16);
    transform:scaleX(0); transform-origin:left center;
}
html body .why-section.r159-standard .r159-std-row:first-child::before{
    content:""; position:absolute; left:0; top:0; right:0; height:1px; background:rgba(10,10,10,.16);
    transform:scaleX(0); transform-origin:left center;
}
html body .why-section.r159-standard.r159-in .r159-std-row::after{ animation:r159k-draw .7s var(--r159-ease,cubic-bezier(0.16,1,0.3,1)) forwards; }
html body .why-section.r159-standard.r159-in .r159-std-row:first-child::before{ animation:r159k-draw .7s var(--r159-ease,cubic-bezier(0.16,1,0.3,1)) forwards; }
html body .why-section.r159-standard.r159-in .r159-std-row:nth-child(1)::after{ animation-delay:.10s; }
html body .why-section.r159-standard.r159-in .r159-std-row:nth-child(2)::after{ animation-delay:.22s; }
html body .why-section.r159-standard.r159-in .r159-std-row:nth-child(3)::after{ animation-delay:.34s; }
html body .why-section.r159-standard.r159-in .r159-std-row:nth-child(4)::after{ animation-delay:.46s; }
@keyframes r159k-draw{ to{ transform:scaleX(1); } }

html body #main-content .why-section.r159-standard .ws-k{ font-family:'JetBrains Mono',monospace !important; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--r158-teal,#0d9488); font-weight:600; }
html body #main-content .why-section.r159-standard .ws-v{ font-family:'Inter',sans-serif !important; font-size:14px; line-height:1.5; color:var(--r158-ink-soft,#4a4742); }
/* mono metric — fades/slides in on enter */
html body #main-content .why-section.r159-standard .ws-m{
    font-family:'Bricolage Grotesque',sans-serif !important; font-weight:700; font-size:clamp(18px,2vw,26px);
    color:var(--r158-ink,#0a0a0a); letter-spacing:-.02em; line-height:1; white-space:nowrap; text-align:right;
    opacity:0; transform:translateX(14px);
    transition:opacity .55s var(--r159-ease,cubic-bezier(0.16,1,0.3,1)), transform .55s var(--r159-ease,cubic-bezier(0.16,1,0.3,1));
}
html body #main-content .why-section.r159-standard.r159-in .r159-std-row:nth-child(1) .ws-m{ transition-delay:.20s; }
html body #main-content .why-section.r159-standard.r159-in .r159-std-row:nth-child(2) .ws-m{ transition-delay:.32s; }
html body #main-content .why-section.r159-standard.r159-in .r159-std-row:nth-child(3) .ws-m{ transition-delay:.44s; }
html body #main-content .why-section.r159-standard.r159-in .r159-std-row:nth-child(4) .ws-m{ transition-delay:.56s; }
html body #main-content .why-section.r159-standard.r159-in .ws-m{ opacity:1; transform:translateX(0); }

/* hover: teal left-edge highlight */
html body .why-section.r159-standard .r159-std-row:hover{ background:rgba(13,148,136,.05); border-left-color:var(--r158-teal,#0d9488); padding-left:20px; }

/* reduced motion — show final state regardless */
@media (prefers-reduced-motion: reduce){
  html body .why-section.r159-standard .r159-std-headline{ animation:none !important; background-image:none !important; transform:none !important; }
  html body .why-section.r159-standard .r159-std-row::after,
  html body .why-section.r159-standard .r159-std-row:first-child::before{ transform:scaleX(1) !important; animation:none !important; }
  html body .why-section.r159-standard .ws-m{ opacity:1 !important; transform:none !important; transition:none !important; }
  html body .why-section.r159-standard .r159-std-row:hover{ padding-left:14px; }
}

/* mobile — stack columns */
@media (max-width:860px){
  html body .why-section.r159-standard .r159-std-spread{ grid-template-columns:1fr; gap:clamp(28px,7vw,48px); }
  html body #main-content .why-section.r159-standard .r159-std-headline{ max-width:none; transform:none !important; }
}
@media (max-width:560px){
  html body .why-section.r159-standard .r159-std-row{ grid-template-columns:1fr auto; gap:4px 14px; }
  html body .why-section.r159-standard .ws-v{ grid-column:1 / -1; order:3; }
  html body .why-section.r159-standard .r159-std-row:hover{ padding-left:14px !important; }
}

/* ════════════════════════════════════════════════════════
   R159-L · brand story editorial spread (EXHIBIT)
   A feature-article "spread" on warm paper: oversized Bricolage
   pull-quote headline (teal rule draws beneath on enter), a
   measured Inter article column, and 3 gallery placards whose
   numerals count up. Placards lift on hover; primary CTA keeps
   the exhibit teal treatment. Paper grain + parallax depth.
   ════════════════════════════════════════════════════════ */
html body section.story-section.r158-room.r159-spread{ padding:var(--r158-pad,clamp(80px,9vw,150px)) 0 !important; position:relative; overflow:hidden; }
html body .story-section.r159-spread .r158-inner{ position:relative; z-index:1; }
/* paper grain atmosphere (L0) */
html body .story-section.r159-spread .r159-atmos{ position:absolute; inset:0; z-index:0; pointer-events:none; }
html body .story-section.r159-spread .r159-atmos-paper{ background-image:radial-gradient(rgba(10,10,10,.045) 1px, transparent 1.5px); background-size:30px 30px; opacity:.55; }

/* the spread: headline spans top, article + placards below.
   Override legacy .story-grid (2-col, align center). */
html body .story-section.r159-spread .r159-spread-grid{
    display:grid !important; grid-template-columns:minmax(0,1.15fr) minmax(0,0.85fr) !important;
    grid-template-areas:"head head" "article placards" !important;
    gap:clamp(32px,4.5vw,72px) clamp(40px,6vw,96px) !important; align-items:start !important;
}
html body .story-section.r159-spread .r159-spread-head{ grid-area:head; max-width:20ch; }
html body .story-section.r159-spread .r159-spread-article{ grid-area:article; }
html body .story-section.r159-spread .r159-spread-placards{ grid-area:placards; }

/* HEADLINE — mono kicker + oversized Bricolage pull-quote with teal rule */
html body #main-content .story-section.r159-spread .r159-spread-kicker{ font-family:'JetBrains Mono',monospace !important; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--r158-teal,#0d9488); font-weight:600; margin:0 0 18px; }
html body #main-content .story-section.r159-spread .r159-spread-quote{
    font-family:'Bricolage Grotesque',sans-serif !important; font-weight:700;
    font-size:var(--r159-display,clamp(40px,6vw,92px)); line-height:.98; letter-spacing:-.03em;
    color:var(--r158-ink,#0a0a0a) !important; margin:0; position:relative; padding-bottom:24px; max-width:18ch;
}
/* teal rule draws left→right under the headline on enter */
html body .story-section.r159-spread .r159-spread-quote::after{
    content:""; position:absolute; left:0; bottom:0; width:min(360px,60%); height:3px;
    background:var(--r158-teal,#0d9488); transform:scaleX(0); transform-origin:left center;
}
html body .story-section.r159-spread.r159-in .r159-spread-quote::after{ animation:r159l-rule .8s var(--r159-ease,cubic-bezier(0.16,1,0.3,1)) .25s forwards; }
@keyframes r159l-rule{ to{ transform:scaleX(1); } }

/* ARTICLE — measured Inter body column ~62ch */
html body #main-content .story-section.r159-spread .r159-spread-article p{ font-family:'Inter',sans-serif !important; font-size:clamp(15px,1.15vw,17px); line-height:1.7; color:var(--r158-ink-soft,#4a4742); max-width:62ch; margin:0 0 20px; }
html body #main-content .story-section.r159-spread .r159-spread-article p:last-of-type{ margin-bottom:clamp(24px,3vw,36px); }
html body .story-section.r159-spread .r159-spread-cta{ display:flex; align-items:center; gap:clamp(18px,2.5vw,32px); flex-wrap:wrap; }
/* primary CTA — exhibit teal treatment */
html body .story-section.r159-spread .r159-spread-cta .btn-primary{ background:var(--r158-teal,#0d9488) !important; border-color:var(--r158-teal,#0d9488) !important; color:#04201d !important; box-shadow:0 8px 22px rgba(13,148,136,.22) !important; }
html body .story-section.r159-spread .r159-spread-cta .btn-primary:hover{ background:var(--r158-teal-bright,#14b8a6) !important; border-color:var(--r158-teal-bright,#14b8a6) !important; }
html body #main-content .story-section.r159-spread .r159-spread-cta .link-arrow{ font-family:'JetBrains Mono',monospace !important; font-size:13px; letter-spacing:.02em; color:var(--r158-teal,#0d9488) !important; }

/* PLACARDS — framed gallery cards with mono labels; parallax plate behind.
   Override legacy .story-visual (block/480px) + .story-stat-card (absolute/float). */
html body .story-section.r159-spread .r159-spread-placards{ display:flex !important; flex-direction:column; gap:clamp(14px,1.6vw,20px); height:auto !important; transform:translateY(var(--r159-py,0)); will-change:transform; }
html body .story-section.r159-spread .r159-placard{
    position:relative !important; inset:auto !important; top:auto !important; right:auto !important; bottom:auto !important; left:auto !important;
    animation:none !important; padding:22px 24px 20px !important; background:var(--r158-exhibit-2,#fffdf8) !important;
    border:1px solid rgba(10,10,10,.12) !important; border-radius:6px !important;
    box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 14px 28px rgba(10,10,10,.07), 0 2px 6px rgba(10,10,10,.04) !important;
    transition:transform .42s var(--r159-ease,cubic-bezier(0.16,1,0.3,1)), box-shadow .42s var(--r159-ease,cubic-bezier(0.16,1,0.3,1)), border-color .42s var(--r159-ease,cubic-bezier(0.16,1,0.3,1)) !important;
}
/* engraved inner frame */
html body .story-section.r159-spread .r159-placard::before{ content:""; position:absolute; inset:6px; border:1px solid rgba(10,10,10,.10); border-radius:3px; pointer-events:none; transition:border-color .42s var(--r159-ease,cubic-bezier(0.16,1,0.3,1)); }
html body #main-content .story-section.r159-spread .r159-placard-idx{ font-family:'JetBrains Mono',monospace !important; font-size:11px; letter-spacing:.16em; color:var(--r158-teal,#0d9488); font-weight:600; }
html body #main-content .story-section.r159-spread .r159-placard .ssc-number{ font-family:'Bricolage Grotesque',sans-serif !important; color:var(--r158-ink,#0a0a0a) !important; font-weight:700; font-size:clamp(34px,4vw,52px); line-height:.95; letter-spacing:-.03em; margin:6px 0 4px; }
html body #main-content .story-section.r159-spread .r159-placard .ssc-label{ font-family:'JetBrains Mono',monospace !important; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--r158-ink-soft,#4a4742) !important; line-height:1.5; }
/* hover lift + teal frame */
html body .story-section.r159-spread .r159-placard:hover{ transform:translateY(-8px); border-color:rgba(13,148,136,.55); box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 30px 54px rgba(10,10,10,.15), 0 0 0 1px rgba(13,148,136,.18); }
html body .story-section.r159-spread .r159-placard:hover::before{ border-color:rgba(13,148,136,.45); }

/* reduced motion — final state, no transforms */
@media (prefers-reduced-motion: reduce){
  html body .story-section.r159-spread .r159-spread-quote::after{ transform:scaleX(1) !important; animation:none !important; }
  html body .story-section.r159-spread .r159-spread-placards{ transform:none !important; }
  html body .story-section.r159-spread .r159-placard:hover{ transform:none; }
}

/* tablet/mobile — single column */
@media (max-width:880px){
  html body .story-section.r159-spread .r159-spread-grid{ grid-template-columns:1fr !important; grid-template-areas:"head" "article" "placards" !important; gap:clamp(28px,6vw,44px) !important; }
  html body .story-section.r159-spread .r159-spread-head{ max-width:none; }
  html body .story-section.r159-spread .r159-spread-placards{ transform:none !important; }
}
@media (max-width:560px){
  html body #main-content .story-section.r159-spread .r159-spread-article p{ max-width:none; }
  html body .story-section.r159-spread .r159-spread-cta{ gap:16px; }
}

/* ════════════════════════════════════════════════════════
   R159-M · testimonials quote gallery (EXHIBIT room)
   A LARGE featured quote stage on warm paper — giant Bricolage
   opening quote-mark, the review in large Inter, stars, a teal
   verified plaque, author + product — paired with a horizontal
   filmstrip of 3 selector cards (the data source for each
   review). Selecting/auto-advancing a card swaps the featured
   quote with a "card-pull" motion (slides/fades up as if pulled
   from the strip). Active card is teal-highlighted; cards lift
   on hover. Oversized quote-mark watermark parallaxes behind.
   ════════════════════════════════════════════════════════ */
html body section.testimonials-section.r158-room.r159-quotes{ padding:var(--r158-pad,clamp(80px,9vw,150px)) 0 !important; position:relative; overflow:hidden; }
html body .testimonials-section.r159-quotes .r158-inner{ position:relative; z-index:1; }
/* paper grain atmosphere (L0) */
html body .testimonials-section.r159-quotes .r159-atmos{ position:absolute; inset:0; z-index:0; pointer-events:none; }
html body .testimonials-section.r159-quotes .r159-atmos-paper{ background-image:radial-gradient(rgba(10,10,10,.045) 1px, transparent 1.5px); background-size:30px 30px; opacity:.55; }

/* section header — exhibit type treatment */
html body #main-content .testimonials-section.r159-quotes .section-header{ text-align:center; margin:0 auto clamp(36px,4.5vw,60px); }
html body #main-content .testimonials-section.r159-quotes .section-badge{ font-family:'JetBrains Mono',monospace !important; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--r158-teal,#0d9488) !important; background:none !important; border:none !important; padding:0 !important; }
html body #main-content .testimonials-section.r159-quotes .section-title{ font-family:'Bricolage Grotesque',sans-serif !important; font-weight:700 !important; font-size:clamp(30px,4.4vw,56px) !important; line-height:1.02 !important; letter-spacing:-.03em !important; color:var(--r158-ink,#0a0a0a) !important; margin:12px 0 16px !important; }
html body #main-content .testimonials-section.r159-quotes .reviews-summary{ display:inline-flex; align-items:center; gap:10px; }
html body .testimonials-section.r159-quotes .reviews-stars{ color:#e8a72b; font-size:14px; letter-spacing:1px; }
html body #main-content .testimonials-section.r159-quotes .reviews-text{ font-family:'JetBrains Mono',monospace !important; font-size:12px; letter-spacing:.04em; color:var(--r158-ink-soft,#4a4742) !important; }
html body #main-content .testimonials-section.r159-quotes .reviews-text strong{ color:var(--r158-ink,#0a0a0a) !important; }

/* stage layout: featured above, filmstrip below */
html body .testimonials-section.r159-quotes .r159-quotes-stage{ display:flex; flex-direction:column; gap:clamp(28px,3.5vw,48px); }

/* ── FEATURED QUOTE STAGE ── */
html body .testimonials-section.r159-quotes .r159-quote-featured{
    position:relative; margin:0; padding:clamp(34px,4vw,56px) clamp(30px,4vw,60px) clamp(30px,3.5vw,48px);
    background:var(--r158-exhibit-2,#fffdf8); border:1px solid rgba(10,10,10,.12); border-radius:10px;
    box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 22px 48px rgba(10,10,10,.08), 0 3px 8px rgba(10,10,10,.04);
    overflow:hidden;
}
/* faint oversized quote-mark watermark (parallax) */
html body .testimonials-section.r159-quotes .r159-quote-watermark{
    position:absolute; top:-.34em; right:.04em; font-family:'Bricolage Grotesque',sans-serif; font-weight:700;
    font-size:clamp(220px,30vw,420px); line-height:1; color:rgba(13,148,136,.06); pointer-events:none; z-index:0;
    transform:translateY(var(--r159-py,0)); will-change:transform;
}
/* giant Bricolage opening quote-mark */
html body .testimonials-section.r159-quotes .r159-quote-mark{
    display:block; position:relative; z-index:1; font-family:'Bricolage Grotesque',sans-serif; font-weight:700;
    font-size:clamp(64px,9vw,120px); line-height:.6; color:var(--r158-teal,#0d9488); margin:0 0 6px -.04em;
}
html body .testimonials-section.r159-quotes .r159-quote-body{ position:relative; z-index:1; margin:0; }
/* the quote — large Inter */
html body #main-content .testimonials-section.r159-quotes .r159-quote-body .testimonial-text{
    font-family:'Inter',sans-serif !important; font-weight:500; font-size:clamp(20px,2.4vw,32px) !important;
    line-height:1.4 !important; letter-spacing:-.01em; color:var(--r158-ink,#0a0a0a) !important; margin:0; max-width:30ch;
}
html body .testimonials-section.r159-quotes .r159-quote-meta{ position:relative; z-index:1; margin-top:clamp(24px,3vw,36px); display:flex; flex-direction:column; gap:16px; }
html body .testimonials-section.r159-quotes .r159-quote-meta-top{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
html body .testimonials-section.r159-quotes .r159-quote-meta-top .testimonial-stars{ color:#e8a72b; font-size:16px; letter-spacing:2px; }
/* verified teal plaque */
html body #main-content .testimonials-section.r159-quotes .r159-quote-plaque{
    display:inline-flex; align-items:center; gap:7px; font-family:'JetBrains Mono',monospace !important;
    font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--r158-teal,#0d9488) !important;
    background:rgba(13,148,136,.08); border:1px solid rgba(13,148,136,.28); border-radius:999px; padding:6px 13px;
}
html body .testimonials-section.r159-quotes .r159-quote-author{ display:flex; align-items:center; gap:14px; }
html body .testimonials-section.r159-quotes .r159-quote-author .testimonial-avatar{
    flex:0 0 auto; width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:var(--r158-teal,#0d9488); color:#04201d; font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:20px;
}
html body .testimonials-section.r159-quotes .r159-quote-author-lines{ display:flex; flex-direction:column; gap:2px; }
html body #main-content .testimonials-section.r159-quotes .r159-quote-author-lines strong{ font-family:'Inter',sans-serif !important; font-weight:600; font-size:16px; color:var(--r158-ink,#0a0a0a) !important; }
html body #main-content .testimonials-section.r159-quotes .r159-quote-author-lines span{ font-family:'Inter',sans-serif !important; font-size:13px; color:var(--r158-ink-soft,#4a4742) !important; }
html body #main-content .testimonials-section.r159-quotes .r159-quote-author-lines .testimonial-product{ font-family:'JetBrains Mono',monospace !important; font-size:11px; letter-spacing:.04em; color:var(--r158-teal,#0d9488) !important; margin-top:3px; }
html body .testimonials-section.r159-quotes .r159-quote-author-lines .testimonial-product i{ margin-right:5px; }

/* card-pull keyframe — new quote pulled up from the strip */
@keyframes r159m-pull{ 0%{ opacity:0; transform:translateY(26px) scale(.985); filter:blur(4px); } 100%{ opacity:1; transform:translateY(0) scale(1); filter:blur(0); } }
html body .testimonials-section.r159-quotes .r159-quote-featured.r159-pull .r159-quote-body,
html body .testimonials-section.r159-quotes .r159-quote-featured.r159-pull .r159-quote-meta{ animation:r159m-pull .6s var(--r158-ease,cubic-bezier(0.16,1,0.3,1)) both; }
html body .testimonials-section.r159-quotes .r159-quote-featured.r159-pull .r159-quote-meta{ animation-delay:.06s; }

/* ── FILMSTRIP SELECTOR ── */
html body .testimonials-section.r159-quotes .r159-filmstrip{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.4vw,18px); }
html body .testimonials-section.r159-quotes .r159-strip-card{
    appearance:none; -webkit-appearance:none; text-align:left; cursor:pointer; width:100%;
    position:relative; display:flex; flex-direction:column; gap:8px;
    padding:18px 20px 16px; background:var(--r158-exhibit-2,#fffdf8);
    border:1px solid rgba(10,10,10,.12); border-radius:8px; border-left:3px solid transparent;
    box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 6px 16px rgba(10,10,10,.05);
    transition:transform .38s var(--r158-ease,cubic-bezier(0.16,1,0.3,1)), box-shadow .38s var(--r158-ease,cubic-bezier(0.16,1,0.3,1)), border-color .38s var(--r158-ease,cubic-bezier(0.16,1,0.3,1)), background .38s var(--r158-ease,cubic-bezier(0.16,1,0.3,1));
}
html body #main-content .testimonials-section.r159-quotes .r159-strip-name{ font-family:'Inter',sans-serif !important; font-weight:600; font-size:14px; color:var(--r158-ink,#0a0a0a) !important; }
html body #main-content .testimonials-section.r159-quotes .r159-strip-snippet{ font-family:'Inter',sans-serif !important; font-weight:400; font-size:13px; line-height:1.5; color:var(--r158-ink-soft,#4a4742) !important; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
html body .testimonials-section.r159-quotes .r159-strip-cue{ position:absolute; top:14px; right:16px; color:rgba(13,148,136,.3); font-size:13px; transition:color .38s var(--r158-ease,cubic-bezier(0.16,1,0.3,1)); }
/* hover lift */
html body .testimonials-section.r159-quotes .r159-strip-card:hover{ transform:translateY(-6px); border-color:rgba(13,148,136,.4); box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 18px 34px rgba(10,10,10,.12); }
html body .testimonials-section.r159-quotes .r159-strip-card:focus-visible{ outline:2px solid var(--r158-teal,#0d9488); outline-offset:3px; }
/* active card — teal highlight */
html body .testimonials-section.r159-quotes .r159-strip-card.is-active{ border-left-color:var(--r158-teal,#0d9488); background:rgba(13,148,136,.06); box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 14px 30px rgba(13,148,136,.14), 0 0 0 1px rgba(13,148,136,.2); }
html body .testimonials-section.r159-quotes .r159-strip-card.is-active .r159-strip-cue{ color:var(--r158-teal,#0d9488); }

/* reduced motion — instant swap, no parallax, no auto-advance (JS-gated) */
@media (prefers-reduced-motion: reduce){
  html body .testimonials-section.r159-quotes .r159-quote-watermark{ transform:none !important; }
  html body .testimonials-section.r159-quotes .r159-quote-featured.r159-pull .r159-quote-body,
  html body .testimonials-section.r159-quotes .r159-quote-featured.r159-pull .r159-quote-meta{ animation:none !important; }
  html body .testimonials-section.r159-quotes .r159-strip-card{ transition:none !important; }
  html body .testimonials-section.r159-quotes .r159-strip-card:hover{ transform:none; }
}

/* mobile — featured stacks above a horizontally scrollable filmstrip */
@media (max-width:760px){
  html body #main-content .testimonials-section.r159-quotes .r159-quote-body .testimonial-text{ max-width:none; }
  html body .testimonials-section.r159-quotes .r159-quote-watermark{ transform:none !important; }
  html body .testimonials-section.r159-quotes .r159-filmstrip{
      display:flex; grid-template-columns:none; overflow-x:auto; -webkit-overflow-scrolling:touch;
      scroll-snap-type:x mandatory; gap:12px; padding-bottom:6px; margin:0 -24px; padding-left:24px; padding-right:24px;
  }
  html body .testimonials-section.r159-quotes .r159-strip-card{ flex:0 0 78%; max-width:78%; scroll-snap-align:start; }
}
@media (max-width:480px){
  html body .testimonials-section.r159-quotes .r159-quote-featured{ padding:28px 22px 26px; }
  html body .testimonials-section.r159-quotes .r159-strip-card{ flex-basis:85%; max-width:85%; }
}

/* ════════════════════════════════════════════════════════
   R159-N · FAQ "card catalog" (EXHIBIT room)
   The 8 native <details> accordions restyled as library
   index cards on warm paper: mono teal catalog numbers
   (Q.0n), engraved card frames, a teal chevron that rotates
   on [open], and answers that "pull open" via grid-rows
   0fr→1fr. Cards lift on hover + a teal index edge lights
   when open. Paper grain L0. Reduced-motion + mobile guards.
   ════════════════════════════════════════════════════════ */
html body section.home-faq-section.r158-room.r159-catalog{ padding:var(--r158-pad,clamp(80px,9vw,150px)) 0 !important; position:relative; overflow:hidden; }
html body .home-faq-section.r159-catalog .r158-inner{ position:relative; z-index:1; max-width:880px; }
/* paper grain atmosphere (L0) */
html body .home-faq-section.r159-catalog .r159-atmos{ position:absolute; inset:0; z-index:0; pointer-events:none; }
html body .home-faq-section.r159-catalog .r159-atmos-paper{ background-image:radial-gradient(rgba(10,10,10,.045) 1px, transparent 1.5px); background-size:30px 30px; opacity:.55; }

/* section header — exhibit type treatment */
html body #main-content .home-faq-section.r159-catalog .section-header{ text-align:center; margin:0 auto clamp(36px,4.5vw,60px); }
html body #main-content .home-faq-section.r159-catalog .section-badge{ font-family:'JetBrains Mono',monospace !important; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--r158-teal,#0d9488) !important; background:none !important; border:none !important; padding:0 !important; }
html body #main-content .home-faq-section.r159-catalog .section-title{ font-family:'Bricolage Grotesque',sans-serif !important; font-weight:700 !important; font-size:clamp(30px,4.4vw,56px) !important; line-height:1.02 !important; letter-spacing:-.03em !important; color:var(--r158-ink,#0a0a0a) !important; margin:12px 0 14px !important; }
html body #main-content .home-faq-section.r159-catalog .section-subtitle{ font-family:'JetBrains Mono',monospace !important; font-size:13px !important; letter-spacing:.01em; color:var(--r158-ink-soft,#4a4742) !important; max-width:60ch; margin-left:auto; margin-right:auto; }
html body .home-faq-section.r159-catalog .section-subtitle .link-arrow-inline{ color:var(--r158-teal,#0d9488) !important; text-decoration:none; }
html body .home-faq-section.r159-catalog .section-subtitle .link-arrow-inline:hover{ text-decoration:underline; }

/* the catalog stack */
html body .home-faq-section.r159-catalog .r159-cat-list{ display:flex; flex-direction:column; gap:14px; }

/* each <details> = an index card */
html body .home-faq-section.r159-catalog .home-faq-item{
    position:relative; background:var(--r158-exhibit-2,#fffdf8) !important; border:1px solid rgba(10,10,10,.12) !important;
    border-radius:6px; overflow:hidden;
    box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 10px 22px rgba(10,10,10,.06), 0 1px 4px rgba(10,10,10,.04);
    transition:transform .42s var(--r158-ease,cubic-bezier(0.16,1,0.3,1)), box-shadow .42s var(--r158-ease,cubic-bezier(0.16,1,0.3,1)), border-color .42s var(--r158-ease,cubic-bezier(0.16,1,0.3,1));
}
/* thin engraved inner frame */
html body .home-faq-section.r159-catalog .home-faq-item::before{
    content:""; position:absolute; inset:6px; border:1px solid rgba(10,10,10,.10); border-radius:3px; pointer-events:none; z-index:2;
    transition:border-color .42s var(--r158-ease,cubic-bezier(0.16,1,0.3,1));
}
/* teal index edge (left rule) — lights up when open */
html body .home-faq-section.r159-catalog .home-faq-item::after{
    content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--r158-teal,#0d9488); z-index:3;
    transform:scaleY(0); transform-origin:top center;
    transition:transform .42s var(--r158-ease,cubic-bezier(0.16,1,0.3,1));
}
html body .home-faq-section.r159-catalog .home-faq-item[open]::after{ transform:scaleY(1); box-shadow:0 0 10px var(--r158-glow,rgba(13,148,136,.22)); }

/* the card label row (summary) */
html body .home-faq-section.r159-catalog .home-faq-item summary{
    list-style:none; cursor:pointer; display:flex; align-items:center; gap:12px;
    padding:18px 22px; position:relative; z-index:1; min-height:44px;
    border:none !important; background:transparent !important;
}
html body .home-faq-section.r159-catalog .home-faq-item summary::-webkit-details-marker{ display:none; }
html body .home-faq-section.r159-catalog .home-faq-item summary:focus-visible{ outline:2px solid var(--r158-teal,#0d9488); outline-offset:-4px; border-radius:4px; }

/* mono teal catalog number */
html body #main-content .home-faq-section.r159-catalog .r159-cat-num{
    font-family:'JetBrains Mono',monospace !important; font-size:12px; font-weight:600; letter-spacing:.08em;
    color:var(--r158-teal,#0d9488); flex:0 0 auto; min-width:38px;
}
/* question label */
html body #main-content .home-faq-section.r159-catalog .hfaq-q{
    font-family:'Inter',sans-serif !important; font-weight:600 !important; font-size:0.98rem; line-height:1.4;
    color:var(--r158-ink,#0a0a0a) !important; flex:1 1 auto; display:flex; align-items:center; gap:10px;
}
html body .home-faq-section.r159-catalog .hfaq-q i{ color:var(--r158-teal,#0d9488) !important; font-size:0.86rem; width:18px; text-align:center; flex:0 0 auto; }

/* teal chevron rotates on [open] */
html body .home-faq-section.r159-catalog .hfaq-chev{
    color:var(--r158-teal,#0d9488) !important; flex:0 0 auto; font-size:0.82rem;
    transition:transform .35s var(--r158-ease,cubic-bezier(0.16,1,0.3,1));
}
html body .home-faq-section.r159-catalog .home-faq-item[open] .hfaq-chev{ transform:rotate(180deg); }

/* answer — pulled open like a card (max-height collapse on flat content) */
html body .home-faq-section.r159-catalog .hfaq-a{
    font-family:'Inter',sans-serif !important; color:var(--r158-ink-soft,#4a4742) !important;
    font-size:0.9rem; line-height:1.6;
    max-height:0; opacity:0; overflow:hidden;
    padding:0 22px 0 72px; margin:0;
    transition:max-height .45s var(--r158-ease,cubic-bezier(0.16,1,0.3,1)), opacity .35s var(--r158-ease,cubic-bezier(0.16,1,0.3,1)), padding-bottom .45s var(--r158-ease,cubic-bezier(0.16,1,0.3,1));
}
html body .home-faq-section.r159-catalog .home-faq-item[open] .hfaq-a{ max-height:600px; opacity:1; padding-bottom:20px; }
html body .home-faq-section.r159-catalog .hfaq-a strong{ color:var(--r158-ink,#0a0a0a) !important; font-weight:700; }
html body .home-faq-section.r159-catalog .hfaq-a a{ color:var(--r158-teal,#0d9488) !important; text-decoration:none; }
html body .home-faq-section.r159-catalog .hfaq-a a:hover{ text-decoration:underline; }

/* signature moment — open card lifts + teal frame */
html body .home-faq-section.r159-catalog .home-faq-item[open]{
    transform:translateY(-3px); border-color:rgba(13,148,136,.45) !important;
    box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 24px 46px rgba(10,10,10,.13), 0 0 0 1px rgba(13,148,136,.16);
}
html body .home-faq-section.r159-catalog .home-faq-item[open]::before{ border-color:rgba(13,148,136,.32); }

/* micro-interaction — hover lift on closed cards */
html body .home-faq-section.r159-catalog .home-faq-item:not([open]):hover{
    transform:translateY(-4px); border-color:rgba(13,148,136,.45) !important;
    box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 22px 40px rgba(10,10,10,.12), 0 0 0 1px rgba(13,148,136,.14);
}
html body .home-faq-section.r159-catalog .home-faq-item:not([open]):hover::before{ border-color:rgba(13,148,136,.32); }

/* reduced motion — instant open, no lift/rotate animation */
@media (prefers-reduced-motion: reduce){
  html body .home-faq-section.r159-catalog .home-faq-item,
  html body .home-faq-section.r159-catalog .hfaq-a,
  html body .home-faq-section.r159-catalog .hfaq-chev,
  html body .home-faq-section.r159-catalog .home-faq-item::after{ transition:none !important; }
  html body .home-faq-section.r159-catalog .home-faq-item[open],
  html body .home-faq-section.r159-catalog .home-faq-item:not([open]):hover{ transform:none !important; }
  html body .home-faq-section.r159-catalog .hfaq-a{ opacity:1; }
}

/* mobile — full-width cards, tighter padding */
@media (max-width:640px){
  html body .home-faq-section.r159-catalog .home-faq-item summary{ padding:15px 16px; gap:8px; }
  html body #main-content .home-faq-section.r159-catalog .r159-cat-num{ min-width:30px; font-size:11px; }
  html body #main-content .home-faq-section.r159-catalog .hfaq-q{ font-size:0.9rem; }
  html body .home-faq-section.r159-catalog .hfaq-a{ padding-left:16px; padding-right:16px; font-size:0.86rem; }
  html body .home-faq-section.r159-catalog .home-faq-item[open] .hfaq-a{ padding-bottom:16px; }
  html body .home-faq-section.r159-catalog .home-faq-item[open],
  html body .home-faq-section.r159-catalog .home-faq-item:not([open]):hover{ transform:none !important; }
}

/* ════════════════════════════════════════════════════════
   R159-O · "How We Compare" diagnostic panel (INSTRUMENT room)
   Dark diagnostic readout on the molecular instrument field.
   7 feature channels, each row a hairline-ruled "channel". The
   ElytraLabs cell is a PASS indicator (teal LED gauge + ✓) that
   flips from TESTING… → PASS on .r159-resolved with a pulse; the
   Typical-Vendor cell is a dim red/amber indicator. A VERDICT:
   PASS badge lights once all rows resolve (.r159-verdict-on).
   Hover brightens a row's ElytraLabs indicator. RM + mobile guards.
   ════════════════════════════════════════════════════════ */
html body section.vs-section.r158-room.r159-diagnostic{ padding:var(--r158-pad,clamp(80px,9vw,150px)) 0 !important; position:relative; overflow:hidden; }
html body .vs-section.r159-diagnostic .r158-inner{ position:relative; z-index:1; max-width:1000px; }
html body .vs-section.r159-diagnostic .r159-atmos{ position:absolute; inset:0; z-index:0; pointer-events:none; }
html body .vs-section.r159-diagnostic .r159-atmos-molecular{ background-image:radial-gradient(rgba(13,148,136,.10) 1px,transparent 1.6px); background-size:34px 34px; opacity:.6; }

/* section header — instrument type treatment */
html body #main-content .vs-section.r159-diagnostic .section-header{ text-align:center; margin:0 auto clamp(34px,4.4vw,56px); }
html body #main-content .vs-section.r159-diagnostic .section-badge{ font-family:'JetBrains Mono',monospace !important; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--r158-teal,#0d9488) !important; background:none !important; border:none !important; padding:0 !important; }
html body #main-content .vs-section.r159-diagnostic .section-title{ font-family:'Bricolage Grotesque',sans-serif !important; font-weight:700 !important; font-size:clamp(30px,4.4vw,56px) !important; line-height:1.02 !important; letter-spacing:-.03em !important; color:var(--r158-d-ink,#fbfaf6) !important; margin:12px 0 14px !important; }
html body #main-content .vs-section.r159-diagnostic .section-subtitle{ font-family:'JetBrains Mono',monospace !important; font-size:13px !important; letter-spacing:.01em; color:var(--r158-d-ink-soft,#a8a6a1) !important; max-width:62ch; margin-left:auto; margin-right:auto; }

/* the readout shell */
html body .vs-section.r159-diagnostic .vs-table-wrap{ position:relative; }
html body .vs-section.r159-diagnostic .r159-diag-readout{
    border:1px solid var(--r158-line-dark,rgba(255,255,255,.08)); border-radius:12px;
    background:var(--r158-instrument-2,#0c0e14);
    box-shadow:0 24px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.03);
    overflow:hidden; display:block !important; min-width:0 !important; width:100%;
}
html body .vs-section.r159-diagnostic .vs-table-wrap{ overflow-x:visible !important; }

/* a channel row: feature | ElytraLabs indicator | Typical-Vendor indicator */
html body .vs-section.r159-diagnostic .vs-row{
    display:grid !important; grid-template-columns:minmax(0,1.5fr) minmax(0,1.2fr) minmax(0,1.2fr);
    align-items:center; gap:18px;
    padding:16px 22px !important; margin:0 !important;
    border:none !important; border-bottom:1px solid var(--r158-line-dark,rgba(255,255,255,.08)) !important;
    background:transparent !important; position:relative;
    transition:background .3s var(--r158-ease,cubic-bezier(0.16,1,0.3,1));
}
html body .vs-section.r159-diagnostic .vs-row:last-child{ border-bottom:none !important; }

/* header row — mono channel labels */
html body .vs-section.r159-diagnostic .vs-row.vs-header-row{
    background:rgba(13,148,136,.05) !important; border-bottom:1px solid rgba(13,148,136,.2) !important;
}
html body #main-content .vs-section.r159-diagnostic .vs-header-row .vs-feature,
html body #main-content .vs-section.r159-diagnostic .vs-header-row .vs-elytra span,
html body #main-content .vs-section.r159-diagnostic .vs-header-row .vs-other{
    font-family:'JetBrains Mono',monospace !important; font-size:11px !important; letter-spacing:.14em; text-transform:uppercase;
    color:var(--r158-d-ink,#fbfaf6) !important; font-weight:600 !important;
}
html body #main-content .vs-section.r159-diagnostic .vs-header-row .r159-diag-col{ color:var(--r158-teal,#0d9488) !important; }
html body .vs-section.r159-diagnostic .vs-header-row .vs-elytra{ display:flex; align-items:center; gap:9px; }
html body .vs-section.r159-diagnostic .vs-header-row .vs-elytra img{ border-radius:5px; }

/* feature label cell */
html body #main-content .vs-section.r159-diagnostic .vs-feature{
    font-family:'Inter',sans-serif !important; font-weight:600 !important; font-size:0.92rem; line-height:1.4;
    color:var(--r158-d-ink,#fbfaf6) !important; display:flex; align-items:center; gap:10px;
    background:none !important; border:none !important; box-shadow:none !important;
}
html body .vs-section.r159-diagnostic .vs-feature i{ color:var(--r158-teal,#0d9488) !important; font-size:0.85rem; width:18px; text-align:center; flex:0 0 auto; }

/* ── ElytraLabs cell = PASS indicator (lit LED + ✓) ── */
html body .vs-section.r159-diagnostic .vs-elytra{
    position:relative; display:flex; align-items:center; gap:9px;
    font-family:'JetBrains Mono',monospace !important; font-size:0.8rem; letter-spacing:.01em;
    padding:9px 13px; border-radius:8px;
    border:1px solid rgba(13,148,136,.22); background:rgba(13,148,136,.05);
}
/* LED dot at the indicator's left edge */
html body .vs-section.r159-diagnostic .vs-row[data-r159-diag-row] .vs-elytra::before{
    content:""; flex:0 0 auto; width:7px; height:7px; border-radius:50%;
    background:#5b6b6a; box-shadow:none;
    transition:background .4s var(--r158-ease,cubic-bezier(0.16,1,0.3,1)), box-shadow .4s var(--r158-ease,cubic-bezier(0.16,1,0.3,1));
}
/* TESTING… (shown until resolved) vs PASS value */
html body #main-content .vs-section.r159-diagnostic .r159-diag-test{
    font-family:'JetBrains Mono',monospace !important; font-size:0.74rem; letter-spacing:.12em;
    color:var(--r158-d-ink-soft,#a8a6a1) !important; opacity:1; animation:r159o-blink 1s steps(2,start) infinite;
}
html body #main-content .vs-section.r159-diagnostic .r159-diag-pass{
    display:none; align-items:center; gap:8px;
    font-family:'JetBrains Mono',monospace !important; font-size:0.8rem;
    color:var(--r158-d-ink,#fbfaf6) !important;
}
html body .vs-section.r159-diagnostic .r159-diag-pass .vs-yes{ color:var(--r158-teal-bright,#14b8a6) !important; }
@keyframes r159o-blink{ 0%{opacity:.35} 100%{opacity:1} }
@keyframes r159o-passpulse{ 0%{ box-shadow:0 0 0 0 rgba(20,184,166,.55) } 70%{ box-shadow:0 0 0 9px rgba(20,184,166,0) } 100%{ box-shadow:0 0 0 0 rgba(20,184,166,0) } }

/* resolved state — flip TESTING… → PASS, light the LED, pulse */
html body .vs-section.r159-diagnostic .vs-row.r159-resolved .r159-diag-test{ display:none; }
html body #main-content .vs-section.r159-diagnostic .vs-row.r159-resolved .r159-diag-pass{ display:inline-flex; }
html body .vs-section.r159-diagnostic .vs-row.r159-resolved .vs-elytra{
    border-color:rgba(20,184,166,.5); background:rgba(13,148,136,.12);
}
html body .vs-section.r159-diagnostic .vs-row.r159-resolved .vs-elytra::before{
    background:var(--r158-teal-bright,#14b8a6); box-shadow:0 0 9px var(--r158-teal-bright,#14b8a6);
    animation:r159o-passpulse .7s var(--r158-ease,cubic-bezier(0.16,1,0.3,1)) 1;
}

/* ── Typical-Vendor cell = dim red/amber indicator ── */
html body #main-content .vs-section.r159-diagnostic .vs-other{
    display:flex; align-items:center; gap:9px;
    font-family:'JetBrains Mono',monospace !important; font-size:0.8rem; letter-spacing:.01em;
    color:var(--r158-d-ink-soft,#a8a6a1) !important;
    padding:9px 13px; border-radius:8px;
    border:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.015); opacity:.78;
}
html body .vs-section.r159-diagnostic .vs-other .vs-no{ color:#e0584f !important; }
html body .vs-section.r159-diagnostic .vs-other .vs-mid{ color:#e0a93b !important; }

/* micro-interaction — row hover brightens its ElytraLabs indicator */
html body .vs-section.r159-diagnostic .vs-row[data-r159-diag-row]:hover{ background:rgba(13,148,136,.04) !important; }
html body .vs-section.r159-diagnostic .vs-row[data-r159-diag-row]:hover .vs-elytra{
    border-color:rgba(20,184,166,.7); background:rgba(13,148,136,.18);
}
html body .vs-section.r159-diagnostic .vs-row.r159-resolved[data-r159-diag-row]:hover .vs-elytra::before{
    box-shadow:0 0 13px var(--r158-teal-bright,#14b8a6);
}

/* ── VERDICT: PASS badge — hidden until lit ── */
html body #main-content .vs-section.r159-diagnostic .r159-verdict{
    display:inline-flex; align-items:center; gap:9px;
    margin:26px auto 0; padding:11px 22px; border-radius:30px;
    font-family:'JetBrains Mono',monospace !important; font-size:13px; font-weight:700; letter-spacing:.16em;
    color:var(--r158-teal-bright,#14b8a6); background:rgba(13,148,136,.1);
    border:1px solid rgba(20,184,166,.5);
    width:max-content;
    opacity:0; transform:translateY(8px) scale(.96);
    transition:opacity .5s var(--r158-ease,cubic-bezier(0.16,1,0.3,1)), transform .5s var(--r158-ease,cubic-bezier(0.16,1,0.3,1)), box-shadow .5s var(--r158-ease,cubic-bezier(0.16,1,0.3,1));
}
html body .vs-section.r159-diagnostic .r159-verdict{ display:flex; justify-content:center; }
html body .vs-section.r159-diagnostic .r159-verdict i{ color:var(--r158-teal-bright,#14b8a6); }
html body #main-content .vs-section.r159-diagnostic .r159-verdict.r159-verdict-on{
    opacity:1; transform:none; box-shadow:0 0 22px rgba(20,184,166,.3);
}

/* CTA */
html body .vs-section.r159-diagnostic .vs-cta{ text-align:center; margin-top:30px; display:flex; flex-direction:column; align-items:center; gap:16px; }
html body .vs-section.r159-diagnostic .vs-cta .btn-primary{ background:var(--r158-teal,#0d9488) !important; color:#04201d !important; border:none !important; }
html body .vs-section.r159-diagnostic .vs-cta .btn-primary:hover{ background:var(--r158-teal-bright,#14b8a6) !important; }
html body .vs-section.r159-diagnostic .vs-cta .link-arrow{ color:var(--r158-teal,#0d9488) !important; font-family:'JetBrains Mono',monospace !important; font-size:12px; letter-spacing:.04em; }

/* reduced motion — everything resolved/lit instantly, no blink/pulse */
@media (prefers-reduced-motion: reduce){
  html body #main-content .vs-section.r159-diagnostic .r159-diag-test{ animation:none !important; }
  html body .vs-section.r159-diagnostic .vs-row.r159-resolved .vs-elytra::before{ animation:none !important; }
  html body .vs-section.r159-diagnostic .r159-verdict{ transition:none !important; }
}

/* mobile — stack: feature row, then two indicators */
@media (max-width:760px){
  html body .vs-section.r159-diagnostic .r159-diag-readout{ max-width:100%; }
  html body .vs-section.r159-diagnostic .vs-row{
      grid-template-columns:minmax(0,1fr) !important; gap:10px; padding:16px 16px !important;
  }
  html body .vs-section.r159-diagnostic .vs-row.vs-header-row{ display:none !important; }
  html body #main-content .vs-section.r159-diagnostic .vs-feature,
  html body .vs-section.r159-diagnostic .vs-elytra,
  html body #main-content .vs-section.r159-diagnostic .vs-other{ width:100%; min-width:0; }
  html body .vs-section.r159-diagnostic .vs-elytra,
  html body #main-content .vs-section.r159-diagnostic .vs-other{ flex-wrap:wrap; }
}

/* ════════════════════════════════════════════════════════
   R159-P · newsletter "subscribe to the feed" terminal (INSTRUMENT room)
   Dark console panel on the molecular instrument field. A window-chrome
   bar, a mono shell prompt that types in (steps() width clamp) with a
   blinking cursor, the real headline + paragraph as terminal "output"
   lines, and the existing #newsletter-form styled as a console input
   field (teal focus ring, [ ENTER ↵ ] submit). On .r159-feed-sent the
   response line slides in. handleNewsletterSubmit (app.js) untouched.
   Continuous: cursor blink + molecular L0 drift. RM + mobile guards.
   ════════════════════════════════════════════════════════ */
html body section.newsletter-section.r158-room.r159-feed{ padding:var(--r158-pad,clamp(80px,9vw,150px)) 0 !important; position:relative; overflow:hidden; }
html body .newsletter-section.r159-feed .r158-inner{ position:relative; z-index:1; max-width:840px; }
html body .newsletter-section.r159-feed .r159-atmos{ position:absolute; inset:0; z-index:0; pointer-events:none; }
html body .newsletter-section.r159-feed .r159-atmos-molecular{ background-image:radial-gradient(rgba(13,148,136,.10) 1px,transparent 1.6px); background-size:34px 34px; opacity:.5; animation:none; /* R782: this dot layer computes to height:0 (invisible, paints nothing) — its infinite drift was a no-op; disabled to stop needless animation bookkeeping. The real scroll-in cost was the console's blur reveal (R783 below). */ }
@keyframes r159p-drift{ from{ background-position:0 0; } to{ background-position:34px 34px; } }

/* font cascade under #main-content */
html body #main-content .newsletter-section.r159-feed .r159-feed-console,
html body #main-content .newsletter-section.r159-feed .r159-feed-console *{ font-family:'JetBrains Mono',ui-monospace,monospace; }

/* the console panel shell */
html body .newsletter-section.r159-feed .r159-feed-console{
    border:1px solid var(--r158-line-dark,rgba(255,255,255,.08)); border-radius:12px;
    background:var(--r158-instrument-2,#0c0e14);
    box-shadow:0 24px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.03);
    overflow:hidden; max-width:100%;
}
/* window chrome bar */
html body .newsletter-section.r159-feed .r159-feed-chrome{
    display:flex; align-items:center; gap:8px;
    padding:11px 16px; border-bottom:1px solid var(--r158-line-dark,rgba(255,255,255,.08));
    background:rgba(255,255,255,.02);
}
html body .newsletter-section.r159-feed .r159-feed-dot{ width:11px; height:11px; border-radius:50%; background:#2c2f38; flex:0 0 auto; }
html body .newsletter-section.r159-feed .r159-feed-dot:nth-child(1){ background:#e0584f; }
html body .newsletter-section.r159-feed .r159-feed-dot:nth-child(2){ background:#e0a93b; }
html body .newsletter-section.r159-feed .r159-feed-dot:nth-child(3){ background:#2fae6a; }
html body #main-content .newsletter-section.r159-feed .r159-feed-title{
    margin-left:8px; font-size:11px; letter-spacing:.1em; text-transform:lowercase;
    color:var(--r158-d-ink-soft,#a8a6a1);
}

/* console body */
html body .newsletter-section.r159-feed .r159-feed-body{ padding:clamp(20px,3vw,34px) clamp(18px,3vw,32px) clamp(24px,3.4vw,36px); }

/* shell prompt line — types in via steps() width clamp */
html body #main-content .newsletter-section.r159-feed .r159-feed-prompt{
    font-size:clamp(12px,1.5vw,14px); line-height:1.6; margin:0 0 18px;
    color:var(--r158-d-ink,#fbfaf6); white-space:nowrap; display:flex; align-items:center; flex-wrap:wrap;
}
html body #main-content .newsletter-section.r159-feed .r159-feed-user{ color:var(--r158-teal-bright,#14b8a6); }
html body #main-content .newsletter-section.r159-feed .r159-feed-path{ color:#8ab4f8; }
html body #main-content .newsletter-section.r159-feed .r159-feed-sep{ color:var(--r158-d-ink-soft,#a8a6a1); }
html body #main-content .newsletter-section.r159-feed .r159-feed-cmd{
    color:var(--r158-d-ink,#fbfaf6); margin-left:8px;
    display:inline-block; overflow:hidden; white-space:nowrap; vertical-align:bottom;
    max-width:0; animation:r159p-type 1.5s steps(32,end) .35s forwards;
}
@keyframes r159p-type{ from{ max-width:0; } to{ max-width:30ch; } }
/* blinking terminal cursor */
html body .newsletter-section.r159-feed .r159-feed-cursor{
    display:inline-block; width:9px; height:1.05em; margin-left:3px; vertical-align:text-bottom;
    background:var(--r158-teal-bright,#14b8a6); animation:r159p-blink 1.05s steps(2,start) infinite;
}
@keyframes r159p-blink{ 0%,100%{ opacity:1; } 50%{ opacity:0; } }

/* terminal "output" lines — real headline + paragraph */
html body #main-content .newsletter-section.r159-feed .r159-feed-out{ margin:0 0 22px; }
html body #main-content .newsletter-section.r159-feed .r159-feed-out h2{
    font-size:clamp(18px,2.6vw,26px); line-height:1.3; font-weight:600; letter-spacing:-.01em;
    color:var(--r158-d-ink,#fbfaf6); margin:0 0 12px; display:flex; align-items:baseline; gap:9px; flex-wrap:wrap;
}
html body #main-content .newsletter-section.r159-feed .r159-feed-out h2 .fa-envelope-open-text{ color:var(--r158-teal,#0d9488); font-size:.85em; }
html body #main-content .newsletter-section.r159-feed .r159-feed-out p{
    font-size:clamp(12.5px,1.5vw,14px); line-height:1.7; color:var(--r158-d-ink-soft,#a8a6a1); margin:0; max-width:64ch;
}
html body #main-content .newsletter-section.r159-feed .r159-feed-out strong{ color:var(--r158-teal-bright,#14b8a6); font-weight:600; }
html body .newsletter-section.r159-feed .r159-feed-glyph{ color:var(--r158-teal,#0d9488); font-weight:700; }

/* the form as a console input field */
html body .newsletter-section.r159-feed .r159-feed-form{ margin:0; max-width:100%; }
html body .newsletter-section.r159-feed .r159-feed-line{
    display:flex; align-items:stretch; gap:0; margin:0 0 12px;
    border:1px solid var(--r158-line-dark,rgba(255,255,255,.1)); border-radius:8px;
    background:#06070a; overflow:hidden;
    transition:border-color .25s var(--r158-ease,cubic-bezier(0.16,1,0.3,1)), box-shadow .25s var(--r158-ease,cubic-bezier(0.16,1,0.3,1));
}
html body #main-content .newsletter-section.r159-feed .r159-feed-caret{
    flex:0 0 auto; display:flex; align-items:center; padding:0 4px 0 14px;
    color:var(--r158-teal,#0d9488); font-weight:700; font-size:14px;
    transition:color .25s var(--r158-ease,cubic-bezier(0.16,1,0.3,1)), text-shadow .25s var(--r158-ease,cubic-bezier(0.16,1,0.3,1));
}
html body #main-content .newsletter-section.r159-feed .r159-feed-line input#newsletter-email{
    flex:1 1 auto; min-width:0; border:none !important; outline:none !important; box-shadow:none !important;
    background:transparent !important; color:var(--r158-d-ink,#fbfaf6) !important;
    font-family:'JetBrains Mono',ui-monospace,monospace !important; font-size:clamp(13px,1.6vw,14px) !important;
    padding:14px 12px !important; letter-spacing:.01em; border-radius:0 !important; margin:0 !important;
}
html body #main-content .newsletter-section.r159-feed .r159-feed-line input#newsletter-email::placeholder{ color:var(--r158-d-ink-soft,#7d7b77); opacity:.7; }
/* focus → teal ring + brighten caret */
html body .newsletter-section.r159-feed .r159-feed-line:focus-within{
    border-color:var(--r158-teal,#0d9488); box-shadow:0 0 0 3px rgba(13,148,136,.25);
}
html body #main-content .newsletter-section.r159-feed .r159-feed-line:focus-within .r159-feed-caret{
    color:var(--r158-teal-bright,#14b8a6); text-shadow:0 0 8px rgba(20,184,166,.6);
}

/* [ ENTER ↵ ] submit button */
html body #main-content .newsletter-section.r159-feed .btn-primary.r159-feed-enter{
    flex:0 0 auto; border:none !important; border-left:1px solid var(--r158-line-dark,rgba(255,255,255,.1)) !important; border-radius:0 !important;
    background:rgba(13,148,136,.12) !important; color:var(--r158-teal-bright,#14b8a6) !important;
    font-family:'JetBrains Mono',ui-monospace,monospace !important; font-size:12px !important; font-weight:700 !important; letter-spacing:.12em;
    padding:0 18px !important; margin:0 !important; box-shadow:none !important; cursor:pointer;
    display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
    transition:background .25s var(--r158-ease,cubic-bezier(0.16,1,0.3,1)), color .25s var(--r158-ease,cubic-bezier(0.16,1,0.3,1));
}
html body #main-content .newsletter-section.r159-feed .btn-primary.r159-feed-enter:hover{
    background:var(--r158-teal,#0d9488) !important; color:#04201d !important;
}
html body #main-content .newsletter-section.r159-feed .btn-primary.r159-feed-enter i{ font-size:.9em; }

/* console response line — hidden until .r159-feed-sent */
html body #main-content .newsletter-section.r159-feed .r159-feed-response{
    font-size:clamp(12px,1.5vw,13.5px); line-height:1.6; color:var(--r158-teal-bright,#14b8a6);
    margin:0 0 10px; opacity:0; max-height:0; overflow:hidden; transform:translateY(-4px);
    transition:opacity .4s var(--r158-ease,cubic-bezier(0.16,1,0.3,1)), max-height .4s var(--r158-ease,cubic-bezier(0.16,1,0.3,1)), transform .4s var(--r158-ease,cubic-bezier(0.16,1,0.3,1));
}
html body #main-content .newsletter-section.r159-feed.r159-feed-sent .r159-feed-response{
    opacity:1; max-height:60px; transform:none;
}

/* newsletter note */
html body #main-content .newsletter-section.r159-feed .newsletter-note{
    font-size:11px !important; line-height:1.5; letter-spacing:.04em;
    color:var(--r158-d-ink-soft,#7d7b77) !important; margin:0 !important;
}

/* reduced motion — no type-in, no blink, no drift; static + visible cmd */
@media (prefers-reduced-motion: reduce){
  html body .newsletter-section.r159-feed .r159-atmos-molecular{ animation:none !important; }
  html body #main-content .newsletter-section.r159-feed .r159-feed-cmd{ animation:none !important; max-width:none !important; }
  html body .newsletter-section.r159-feed .r159-feed-cursor{ animation:none !important; }
  html body #main-content .newsletter-section.r159-feed .r159-feed-response{ transition:none !important; }
}

/* mobile — stack the console line, full-width ENTER */
@media (max-width:640px){
  html body .newsletter-section.r159-feed .r159-feed-prompt{ white-space:normal; }
  html body #main-content .newsletter-section.r159-feed .r159-feed-cmd{ animation:none; max-width:none; white-space:normal; }
  html body .newsletter-section.r159-feed .r159-feed-line{ flex-direction:column; align-items:stretch; }
  html body #main-content .newsletter-section.r159-feed .r159-feed-caret{ display:none; }
  html body #main-content .newsletter-section.r159-feed .r159-feed-line input#newsletter-email{ padding:13px 14px !important; }
  html body #main-content .newsletter-section.r159-feed .btn-primary.r159-feed-enter{
      border-left:none !important; border-top:1px solid var(--r158-line-dark,rgba(255,255,255,.1)) !important;
      justify-content:center; padding:13px 18px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   R159-Q · footer harmonization + engineered movement seams
   (Movement I dark → II bright → III dark close)
   ════════════════════════════════════════════════════════════════════ */

/* ── R159-Q · seam: Movement I→II (paper rises over dark) ── */
html body section.r154-verified.r158-room{ border-top-left-radius:32px !important; border-top-right-radius:32px !important; margin-top:-36px !important; box-shadow:0 -50px 90px rgba(0,0,0,.55) !important; z-index:3 !important; position:relative; }
@media (max-width:768px){ html body section.r154-verified.r158-room{ border-top-left-radius:20px !important; border-top-right-radius:20px !important; margin-top:-22px !important; } }

/* ── R159-Q · seam: Movement II→III (graphite antechamber + traveling seam) ── */
html body section.home-faq-section.r158-room{ position:relative; }
html body section.home-faq-section.r158-room::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:140px; pointer-events:none; background:linear-gradient(180deg, transparent, rgba(6,7,10,.85)); }
html body section.vs-section.r158-room{ position:relative; }
html body section.vs-section.r158-room::before{ content:""; position:absolute; top:0; left:0; right:0; height:2px; z-index:4; pointer-events:none; background:linear-gradient(90deg,transparent,rgba(13,148,136,.8),transparent); background-size:200% 100%; animation:r159q-seam 5s linear infinite; }
@keyframes r159q-seam{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media (prefers-reduced-motion: reduce){ html body section.vs-section.r158-room::before{ animation:none !important; } }

/* ── R159-Q · footer instrument base ── */
html body .footer{ background:#050507 !important; border-top:1px solid rgba(255,255,255,.08) !important; position:relative; }
html body .footer::before{ content:""; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(13,148,136,.5),transparent); background-size:200% 100%; animation:r159q-seam 7s linear infinite; }
@media (prefers-reduced-motion: reduce){ html body .footer::before{ animation:none !important; } }

/* ── R159-R · accessibility ── */
html body .r159 a:focus-visible, html body .r159 button:focus-visible, html body .r159 summary:focus-visible, html body .r159 input:focus-visible, html body .r159 [tabindex]:focus-visible{ outline:2px solid var(--r158-teal,#0d9488) !important; outline-offset:3px !important; border-radius:3px !important; }
@media (max-width:768px){ html body .r159 a.btn-primary, html body .r159 button, html body .r159 summary{ min-height:44px; } }

/* ── R159 · hero background vial video ── */
html body #hero.r159 .r159-hero-video-wrap{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
html body #hero.r159 .r159-hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55; }
/* legibility scrim so the headline/stat stay AA-readable over the video */
html body #hero.r159 .r159-hero-video-wrap::after{ content:""; position:absolute; inset:0; background:radial-gradient(120% 100% at 30% 50%, rgba(6,7,10,.55) 0%, rgba(6,7,10,.82) 60%, rgba(6,7,10,.94) 100%); }
/* keep all hero content above the video */
html body #hero.r159 .hero-content{ position:relative; z-index:2; }
/* reduced motion: no autoplay video — show poster still only */
@media (prefers-reduced-motion: reduce){ html body #hero.r159 .r159-hero-video{ display:none !important; } html body #hero.r159 .r159-hero-video-wrap{ background:#06070A url('images/r159-hero-vial-poster.jpg?v=1') center/cover no-repeat; } }
/* mobile: skip the video (perf) — poster only */
@media (max-width:768px){ html body #hero.r159 .r159-hero-video{ display:none !important; } html body #hero.r159 .r159-hero-video-wrap{ background:#06070A url('images/r159-hero-vial-poster.jpg?v=1') center/cover no-repeat; } html body #hero.r159 .r159-hero-video-wrap::after{ background:rgba(6,7,10,.8); } }
/* ── R159 · hero video tune — recede to ambient backdrop (kill double-vial read) ── */
html body #hero.r159 .r159-hero-video{ opacity:.42 !important; filter:blur(2px) brightness(.82) !important; }
html body #hero.r159 .r159-hero-video-wrap::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(90deg, rgba(6,7,10,0) 0%, rgba(6,7,10,0) 44%, rgba(6,7,10,.8) 76%, rgba(6,7,10,.95) 100%); }
@media (prefers-reduced-motion: reduce){ html body #hero.r159 .r159-hero-video{ filter:none !important; } }
@media (max-width:768px){ html body #hero.r159 .r159-hero-video-wrap::before{ display:none; } }

/* ════════════════════════════════════════════════════════════
   R160-A · HERO READABILITY — make the supporting copy + CTA pop
   over the dimmed video, and pin GLP-3 (RT) first in the ops panel.
   The 99.62% stat + the video itself are intentionally untouched.
   Scoped html body #hero.r159 to win the cascade.
   ════════════════════════════════════════════════════════════ */

/* (1) Local legibility pocket behind the text column. The video is
   brightest on the LEFT (the right-side vignette only darkens the
   vial side), so the supporting copy sat on the busiest frames and
   washed out. A soft, edgeless radial scrim gives every line a dark
   base without drawing a visible box. */
html body #hero.r159 .hero-text{ position:relative; }
/* NOTE: an earlier rule (styles.css ~55920) kills .hero-text::before with
   content:none/display:none !important to remove the old "01 — HERO" chapter
   marker. We must re-assert content + display with !important (and we win on
   specificity via the #hero id) to reclaim the pseudo as the legibility scrim. */
html body #hero.r159 .hero-text::before{
    content:"" !important; display:block !important;
    position:absolute !important; z-index:-1; pointer-events:none;
    inset:-80px -160px -90px -120px;
    margin:0 !important; padding:0 !important;
    /* R162-A: much softer, fully-feathered wash anchored on the copy — no
       visible box edge. Peak lowered + transparent well before the bounds;
       the brightened, text-shadowed copy carries most of the legibility now. */
    background:radial-gradient(60% 62% at 26% 44%,
        rgba(6,7,10,.52) 0%,
        rgba(6,7,10,.34) 34%,
        rgba(6,7,10,.14) 58%,
        rgba(6,7,10,0) 80%) !important;
    filter:blur(22px) !important;
}

/* (2) Brighten + crisp-shadow the supporting copy so it reads AA
   over moving footage. Kicker/mono-sub go from tertiary→secondary,
   context goes secondary→near-primary, anchor tertiary→secondary. */
html body #hero.r159 .hero-kicker{
    color:#e7e5e0 !important;
    text-shadow:0 1px 10px rgba(6,7,10,.65) !important;
}
html body #hero.r159 .hero-kicker .hero-kicker-dot{
    background:#2dd4bf !important;
    box-shadow:0 0 8px rgba(45,212,191,.6) !important;
}
html body #hero.r159 .hero-mono-sub{
    color:#cfcdc8 !important;
    text-shadow:0 1px 10px rgba(6,7,10,.6) !important;
}
html body #hero.r159 .hero-mono-sub .hero-mono-sub-count{
    color:#2dd4bf !important;
}
html body #hero.r159 .hero-context{
    color:#fbfaf6 !important;
    font-weight:450 !important;
    text-shadow:0 1px 14px rgba(6,7,10,.62) !important;
}
html body #hero.r159 .hero-stat{
    text-shadow:0 2px 26px rgba(6,7,10,.5) !important;
}
html body #hero.r159 .hero-cta-anchor{
    color:#d6d4cf !important;
    text-shadow:0 1px 10px rgba(6,7,10,.6) !important;
}
html body #hero.r159 .hero-cta-anchor strong{ color:#fbfaf6 !important; }

/* (3) "Browse the catalog" → bold, solid-teal primary button. Was a
   near-invisible ghost pill (rgba teal .08). Now it's the unmistakable
   primary action: filled teal gradient, dark ink, glow, lift on hover. */
html body #hero.r159 .hero-cta-inline{
    color:#04201d !important;
    font-weight:800 !important;
    font-size:16px !important;
    letter-spacing:.005em !important;
    padding:17px 32px !important;
    min-height:54px !important;
    border:1px solid rgba(45,212,191,.55) !important;
    border-radius:999px !important;
    /* R181: diagonal gradient restored for dimension, but the dark end is
       lifted — ends at a moderate teal, not the old near-#0d9488 — so the
       right side reads dimensional without going heavy/dark. */
    /* R183: teal brightness midway between the bright and darkened versions. */
    background:linear-gradient(135deg,#31d1c1 0%,#2bc9b6 42%,#17b3a0 100%) !important;
    box-shadow:0 10px 30px rgba(20,184,166,.34), 0 1px 0 rgba(255,255,255,.25) inset !important;
    transition:transform .2s var(--r154-ease-out-quart),
               box-shadow .26s var(--r154-ease-out-quart),
               filter .26s var(--r154-ease-out-quart) !important;
}
html body #hero.r159 .hero-cta-inline .hero-cta-arrow{
    color:#04201d !important;
    transition:transform .2s var(--r154-ease-out-quart) !important;
}
html body #hero.r159 .hero-cta-inline:hover{
    background:linear-gradient(135deg,#59dfca 0%,#31d1c1 50%,#21bdaa 100%) !important;
    border-color:rgba(94,234,212,.7) !important;
    color:#04201d !important;
    transform:translateY(-2px) !important;
    box-shadow:0 16px 40px rgba(20,184,166,.46), 0 1px 0 rgba(255,255,255,.35) inset !important;
    filter:saturate(1.05) !important;
}
html body #hero.r159 .hero-cta-inline:hover .hero-cta-arrow{ transform:translateX(5px) !important; }
html body #hero.r159 .hero-cta-inline:active{ transform:translateY(0) scale(.99) !important; }
html body #hero.r159 .hero-cta-inline:focus-visible{
    outline:2px solid #5eead4 !important; outline-offset:3px !important;
}
@media (prefers-reduced-motion: reduce){
    html body #hero.r159 .hero-cta-inline{ transition:none !important; }
    html body #hero.r159 .hero-cta-inline:hover{ transform:none !important; }
}

/* (4) Ops panel — the pinned headliner row (GLP-3 / RT2001) gets a
   subtle teal ledge so it reads as "the one people want", and the
   purity uses the brighter teal for legibility on the dark panel. */
html body #hero.r159 .hero-ops-row.is-recent{
    background:linear-gradient(90deg, rgba(20,184,166,.12), rgba(20,184,166,0)) !important;
    box-shadow:inset 2px 0 0 #2dd4bf !important;
}
html body #hero.r159 .hero-ops-row.is-recent .hero-ops-batch{ color:#fbfaf6 !important; }
html body #hero.r159 .hero-ops-purity{ color:#2dd4bf !important; }
/* nudge all ops rows in a touch so the pinned row's teal ledge doesn't
   kiss the status dot (uniform so the dots stay column-aligned + no hover jump) */
html body #hero.r159 .hero-ops-row,
html body #hero.r159 .hero-ops-row:hover{ padding-left:16px !important; }

/* ════════════════════════════════════════════════════════════
   R160-B · PROOF SECTION COHESION + CONTRAST
   Feedback: the chromatogram, the live batch ledger and the
   purity/potency/identity tab block read as three disconnected
   blobs on one black field — and the tab track was a jarring
   white pill. Bind them into ONE framed "readout console" and
   lift the panel copy off the background.
   ════════════════════════════════════════════════════════════ */

/* (1) The unifying console frame — a single raised instrument panel
   that contains the screen (scope), the live feed (ledger) and the
   assay tabs/panels, so they read as one device, not three blocks. */
html body .r158-proof .r160-proof-console{
    margin:28px auto 0 !important;
    padding:clamp(18px,2.6vw,32px) !important;
    background:
        linear-gradient(180deg, rgba(20,24,32,.62) 0%, rgba(10,12,18,.62) 100%) !important;
    border:1px solid rgba(13,148,136,.24) !important;
    border-radius:18px !important;
    box-shadow:
        0 28px 70px -36px rgba(0,0,0,.8),
        0 0 0 1px rgba(255,255,255,.015) inset,
        0 1px 0 rgba(255,255,255,.05) inset !important;
}

/* (2) The scope is the console SCREEN — flatten its heavy standalone
   frame so we don't get card-in-card; it now sits flush as the readout. */
html body .r158-proof .r160-proof-console .r158-scope{
    border-color:rgba(13,148,136,.18) !important;
    box-shadow:none !important;
}

/* (3) Hairline divider binds the ledger zone to the screen above it. */
html body .r158-proof .r160-proof-console #r158-ledger{
    margin-top:20px !important;
    padding-top:20px !important;
    border-top:1px solid rgba(255,255,255,.08) !important;
}

/* (4) Kill the bright-white tab TRACK — reskin as a dark instrument
   segmented control so it belongs to the console, with a hairline
   divider (::before) above it separating it from the ledger zone.
   (The buttons themselves are already dark/teal-active via r158-room.) */
html body .r158-proof .r160-proof-console #quality-tabs{
    position:relative !important;
    margin-top:44px !important;
    background:rgba(255,255,255,.045) !important;
    border:1px solid rgba(255,255,255,.08) !important;
    box-shadow:0 1px 0 rgba(255,255,255,.04) inset !important;
    border-radius:14px !important;
    padding:6px !important;
}
html body .r158-proof .r160-proof-console #quality-tabs::before{
    content:"" !important; position:absolute !important; left:0 !important; right:0 !important;
    top:-22px !important; height:1px !important;
    background:rgba(255,255,255,.08) !important;
}

/* (5) Lift panel body copy off the background for AA readability
   (was --r158-d-ink-soft #a8a6a1; now a clearly legible warm grey). */
html body #main-content .r158-proof .r160-proof-console .quality-panel-body p{
    color:#cfcdc8 !important;
}
/* give the active assay metric a teal tie-in to the console accent */
html body #main-content .r158-proof .r160-proof-console .quality-panel.active .qps-number{
    color:#5eead4 !important;
}

/* (6) Mobile — keep the console readable, trim padding. */
@media (max-width:768px){
    html body .r158-proof .r160-proof-console{
        padding:16px !important; border-radius:14px !important; margin-top:20px !important;
    }
}

/* ════════════════════════════════════════════════════════════
   R160-C · BROWSE MODULE CARDS — stop them blending into black
   Feedback: the research-area cards disappear into the background.
   Resting surface was #0c0e14 (only ~6 levels above the #06070A
   section). Lift them to clearly elevated glass tiles; hover/active
   teal interaction is preserved untouched.
   ════════════════════════════════════════════════════════════ */
html body .goals-section.r158-room .r158-mod{
    background:
        linear-gradient(155deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.025) 100%),
        #0c0e14 !important;
    border:1px solid rgba(255,255,255,.14) !important;
    box-shadow:
        0 8px 22px -14px rgba(0,0,0,.7),
        0 1px 0 rgba(255,255,255,.05) inset !important;
}
/* make the teal left-edge accent visible at rest (was .25) so each tile
   reads as part of the instrument system even before hover — but leave the
   active card's full-bright animated edge (opacity:1) untouched */
html body .goals-section.r158-room .r158-mod:not(.is-active)::after{ opacity:.55 !important; }
/* hover/active: brighten the surface for real payoff on top of the
   existing translateX + teal border + glow */
html body .goals-section.r158-room .r158-mod:hover,
html body .goals-section.r158-room .r158-mod.is-active{
    background:
        linear-gradient(155deg, rgba(13,148,136,.16) 0%, rgba(255,255,255,.04) 100%),
        #0c0e14 !important;
    border-color:rgba(13,148,136,.6) !important;
}

/* ════════════════════════════════════════════════════════════
   R160-D · SPECIMEN BENCH — spacing/alignment + text visibility
   Feedback: the best-seller vials look unaligned and the text is
   hard to read. Two real causes: (a) the flex rail left-packs the
   3 cards leaving a lopsided right gap; (b) .bs-dosage is #6b6b73,
   nearly invisible on the near-black bench, and the card surface
   barely lifts off the section.
   ════════════════════════════════════════════════════════════ */

/* (1) Center the specimens on desktop so they're balanced, not
   left-packed. Gated to >=769px: the rail is overflow-x:auto with
   scroll-snap, and centering an OVERFLOWING scroll row would hide
   the first card — at desktop the 3 cards fit, so it's safe. */
@media (min-width:769px){
    html body .bestsellers-section.r158-room .r158-bench-rail{ justify-content:center !important; }
}

/* (2) Lift the specimen cards off the black bench so each reads as a
   distinct lit pedestal (was linear-gradient(#0e1118,#08090d) on a
   rgba(255,255,255,.08) hairline — too close to the section). */
html body .bestsellers-section.r158-room .bestseller-card{
    background:
        linear-gradient(160deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.014) 100%),
        linear-gradient(180deg, #0e1118, #08090d) !important;
    border:1px solid rgba(255,255,255,.13) !important;
    box-shadow:0 18px 40px -26px rgba(0,0,0,.8) !important;
}

/* (3) Make the dosage line legible (was the base #6b6b73). */
html body #main-content .bestsellers-section.r158-room .bestseller-card .bs-dosage,
html body #main-content .recently-viewed-section.r158-room .bestseller-card .bs-dosage{
    color:#b4b2ad !important;
}

/* ════════════════════════════════════════════════════════════
   R160-E · MANIFESTO METRIC COLUMN — align the right-hand numbers
   Feedback: the right-column numbers' spacing is a little off.
   Cause: each .r159-std-row is its OWN grid (the ledger is a flex
   column), and the metric track is `auto` — so it sizes to each
   row's own value (99%+ -> 71px, ~50% under -> 148px, ...). The
   numbers never share a column, so they sit ragged and the
   descriptions jump width row to row. Pin the metric track to a
   consistent width so every value right-aligns on one clean edge.
   ════════════════════════════════════════════════════════════ */
/* desktop only — the <=768px rule (~styles.css:59452) intentionally
   collapses these rows to a 2-col stack; don't override that. */
@media (min-width:769px){
    html body .why-section.r159-standard .r159-std-row{
        grid-template-columns:120px 1fr 168px !important;
    }
}

/* ════════════════════════════════════════════════════════════
   R160-F · SECTION DIFFERENTIATION — break the same-tone "blobs"
   Feedback: the cream wing (manifesto -> story -> reviews) reads as
   one continuous page with no transition; the dark Movement I run
   merges into one black field. Introduce a gentle alternating tone
   + a hairline seam between SAME-tone neighbours so each section
   reads as its own page. (Cross-movement dark<->paper seams are
   already engineered — untouched. The credentials wall is a rounded
   lifted card, already distinct — untouched.)
   Selectors use section.<name>.<modifier> (0,3,3) to beat the base
   section.r158-instrument / section.r158-exhibit (0,1,3) rules.
   ════════════════════════════════════════════════════════════ */

/* ── Cream exhibit wing: alternate manifesto / story / reviews ──
   credentials #f7f3ea (rounded card) -> manifesto deeper -> story base
   -> reviews deeper = a visible step at every boundary. */
html body section.why-section.r159-standard{
    background:#f0e9db !important;
    border-top:1px solid rgba(28,24,16,.08) !important;
}
html body section.story-section.r159-spread{
    /* stays base #f7f3ea — now sits lighter between the two deeper bands */
    border-top:1px solid rgba(28,24,16,.08) !important;
}
html body section.testimonials-section.r158-exhibit{
    background:#f0e9db !important;
    border-top:1px solid rgba(28,24,16,.08) !important;
}

/* ── Dark instrument wing (Movement I): lift the middle room so
   quality / browse / bestsellers don't merge into one black field. ── */
html body section.goals-section.r158-instrument{
    background:#0b0d13 !important;
    border-top:1px solid rgba(255,255,255,.05) !important;
}
html body section.bestsellers-section.r158-instrument{
    border-top:1px solid rgba(255,255,255,.05) !important;
}

/* ════════════════════════════════════════════════════════════
   R161-C/D · DARK-ROOM SECTION HEADERS — fix invisible titles
   "Find What You're Studying" and "Best Sellers" rendered with the
   light-theme dark ink (#0a0a0a title, #4a4a52/#6b6b73 subtitle) on
   the black sections — effectively invisible. The recently-viewed and
   compare sections already got the dark-room light-ink treatment;
   these two were missed. Apply the same.
   ════════════════════════════════════════════════════════════ */
html body #main-content .goals-section.r158-room .section-title,
html body #main-content .bestsellers-section.r158-room .section-title{
    color:#fbfaf6 !important;
}
html body #main-content .goals-section.r158-room .section-subtitle,
html body #main-content .bestsellers-section.r158-room .section-subtitle{
    color:#bdbbb6 !important;
}

/* Strengthen the browse module tiles a touch more so the cards read
   clearly as raised panels (feedback: boxes don't stand out enough). */
html body .goals-section.r158-room .r158-mod{
    background:
        linear-gradient(155deg, rgba(255,255,255,.085) 0%, rgba(255,255,255,.03) 100%),
        #0c0e14 !important;
    border:1px solid rgba(255,255,255,.18) !important;
}

/* ════════════════════════════════════════════════════════════
   R161-E · stronger contrast between the cream exhibit sections
   (R160-F's #f0e9db was too close to #f7f3ea). Deepen the alternate
   band so manifesto / reviews read clearly distinct from story.
   ════════════════════════════════════════════════════════════ */
html body section.why-section.r159-standard{ background:#e9dfc9 !important; }
html body section.testimonials-section.r158-exhibit{ background:#e9dfc9 !important; }

/* ════════════════════════════════════════════════════════════
   R161-A · HERO SUPPORTING COPY — slightly larger / more readable
   Feedback: the surrounding text is an improvement but could be a bit
   bigger / easier to read. Gentle size bumps (the 99.62% stat + video
   stay as-is). Desktop only so mobile keeps its tuned sizes.
   ════════════════════════════════════════════════════════════ */
@media (min-width:769px){
    html body #hero.r159 .hero-context{
        font-size:clamp(19px,1.55vw,22px) !important;
        line-height:1.55 !important;
        max-width:34ch !important;
    }
    html body #hero.r159 .hero-mono-sub{
        font-size:12.5px !important;
        letter-spacing:.075em !important;
    }
    html body #hero.r159 .hero-kicker{
        font-size:12px !important;
        letter-spacing:.15em !important;
    }
}

/* ════════════════════════════════════════════════════════════
   R161-F · HOW WE COMPARE — elevate from generic table to a branded
   diagnostic instrument. Feedback: looks "very AI". Keep the readout
   data + the TESTING->PASS diagnostic JS (.vs-row hooks intact); add
   a powered-console frame, a continuous teal Elytra "winning lane",
   a hero header column, and row striping so the comparison reads as
   a real instrument that says "we pass every channel".
   ════════════════════════════════════════════════════════════ */

/* neutralize the stray white wrapper behind the dark readout */
html body .vs-section.r159-diagnostic .vs-table-wrap{ background:transparent !important; }

/* richer, powered instrument console */
html body .vs-section.r159-diagnostic .r159-diag-readout{
    background:linear-gradient(180deg, #12161e 0%, #0a0c12 100%) !important;
    border:1px solid rgba(13,148,136,.26) !important;
    box-shadow:0 30px 72px -34px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.04) !important;
}
/* lit teal top edge — reads as a powered-on readout */
html body .vs-section.r159-diagnostic .r159-diag-readout::before{
    content:"" !important; position:absolute !important; left:0; right:0; top:0; height:2px; z-index:3;
    background:linear-gradient(90deg, transparent, rgba(20,184,166,.85), transparent) !important;
}

/* continuous Elytra "winning lane" — tie the brand column together
   (stronger than the old faint .05; resolved rows still pop above this) */
html body .vs-section.r159-diagnostic .vs-elytra{
    background:linear-gradient(180deg, rgba(20,184,166,.13), rgba(13,148,136,.06)) !important;
    border-color:rgba(20,184,166,.3) !important;
}
/* hero header column for Elytra */
html body .vs-section.r159-diagnostic .vs-header-row .vs-elytra{
    background:linear-gradient(180deg, rgba(20,184,166,.22), rgba(13,148,136,.1)) !important;
    border:1px solid rgba(20,184,166,.4) !important; border-radius:8px !important;
    padding:7px 11px !important;
    box-shadow:0 0 20px rgba(20,184,166,.18) !important;
}

/* alternating row tint for scannability */
html body .vs-section.r159-diagnostic .vs-row[data-r159-diag-row]:nth-of-type(even){
    background:rgba(255,255,255,.022) !important;
}

/* ════════════════════════════════════════════════════════════
   R162-B · BROWSE "Find What You're Studying" — instrument remodel
   Feedback: make it more appealing — better graphics, visuals, motion.
   Hand-translated from a 21st.dev "targeting reticle" channel-selector
   pattern into the existing vanilla module-selector (hooks preserved):
   icon chips, lit channel rows, and the readout panel reframed as a
   live scope viewport with corner brackets.
   ════════════════════════════════════════════════════════════ */

/* widen the icon column so the new chips fit (was 30px 1fr 18px) */
html body .goals-section.r158-room .r158-mod{
    grid-template-columns:46px 1fr 22px !important;
    gap:16px !important;
    padding:16px 18px !important;
}
/* icon -> lit teal chip (was a bare glyph) */
html body .goals-section.r158-room .r158-mod .goal-icon{
    width:46px !important; height:46px !important;
    display:flex !important; align-items:center; justify-content:center;
    border-radius:11px !important;
    background:linear-gradient(155deg, rgba(20,184,166,.16), rgba(13,148,136,.05)) !important;
    border:1px solid rgba(13,148,136,.3) !important;
    font-size:17px !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
    transition:transform .3s var(--r159-ease,cubic-bezier(0.16,1,0.3,1)),
               border-color .3s var(--r159-ease), box-shadow .3s var(--r159-ease),
               background .3s var(--r159-ease) !important;
}
html body .goals-section.r158-room .r158-mod:hover .goal-icon,
html body .goals-section.r158-room .r158-mod.is-active .goal-icon{
    background:linear-gradient(155deg, rgba(45,212,191,.32), rgba(13,148,136,.12)) !important;
    border-color:rgba(94,234,212,.6) !important;
    box-shadow:0 0 16px rgba(20,184,166,.45), inset 0 1px 0 rgba(255,255,255,.1) !important;
    transform:scale(1.05) !important;
}
/* the goal arrow slides in on hover/active */
html body .goals-section.r158-room .r158-mod .goal-arrow{
    color:var(--r158-teal,#0d9488) !important; opacity:.5;
    transform:translateX(-4px);
    transition:opacity .3s var(--r159-ease), transform .3s var(--r159-ease) !important;
}
html body .goals-section.r158-room .r158-mod:hover .goal-arrow,
html body .goals-section.r158-room .r158-mod.is-active .goal-arrow{
    opacity:1; transform:translateX(0); color:#2dd4bf !important;
}

/* ── Readout panel = live scope viewport with targeting-reticle corners ── */
html body .goals-section.r158-room .r158-mod-readout{
    background:linear-gradient(180deg, #12161e 0%, #0a0c12 100%) !important;
    border:1px solid rgba(13,148,136,.26) !important;
    padding:28px !important; min-height:240px !important;
    overflow:hidden;
}
/* TL + BR corner brackets (the reticle) */
html body .goals-section.r158-room .r158-mod-readout::before{
    content:"" !important; position:absolute; top:12px; left:12px; width:22px; height:22px;
    border-top:2px solid rgba(45,212,191,.7); border-left:2px solid rgba(45,212,191,.7);
    border-top-left-radius:4px; pointer-events:none; z-index:2;
}
html body .goals-section.r158-room .r158-mod-readout::after{
    content:"" !important; position:absolute; bottom:12px; right:12px; width:22px; height:22px;
    border-bottom:2px solid rgba(45,212,191,.7); border-right:2px solid rgba(45,212,191,.7);
    border-bottom-right-radius:4px; pointer-events:none; z-index:2;
}
/* brighten the sparkline so the "signal" reads as alive */
html body .goals-section.r158-room .r159-mod-spark-line{
    stroke:#2dd4bf !important; stroke-width:2.4 !important;
    filter:drop-shadow(0 0 6px rgba(20,184,166,.6)) !important;
}
/* compounds as a clean mono list with a teal tick */
html body #main-content .goals-section.r158-room .r158-mod-ro-compounds{
    color:#cfcdc8 !important; padding-left:14px !important; position:relative;
    border-left:2px solid rgba(13,148,136,.4) !important;
}
html body #main-content .goals-section.r158-room .r158-mod-ro-cta{
    border:1px solid rgba(13,148,136,.4) !important; border-radius:999px !important;
    padding:8px 16px !important; transition:background .25s var(--r159-ease), border-color .25s var(--r159-ease) !important;
}
html body #main-content .goals-section.r158-room .r158-mod-ro-cta:hover{
    background:rgba(20,184,166,.14) !important; border-color:rgba(45,212,191,.7) !important;
}
@media (prefers-reduced-motion: reduce){
    html body .goals-section.r158-room .r158-mod .goal-icon,
    html body .goals-section.r158-room .r158-mod .goal-arrow{ transition:none !important; }
}

/* ════════════════════════════════════════════════════════════
   R162-C · BEST SELLERS — quieter polish (better look + motion)
   Feedback: doesn't need to be flashy, just better animation + look.
   The cards already drift particles + lift on hover; add a gentle
   continuous specimen "breathe", a stronger hover, and a refined
   teal badge pill. #bestsellers-grid + card hooks untouched.
   ════════════════════════════════════════════════════════════ */
@keyframes r162-vial-breathe{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }
html body .bestsellers-section.r158-room .bestseller-card .bs-image img{
    animation:r162-vial-breathe 6s ease-in-out infinite !important;
}
/* offset so the three specimens don't bob in unison */
html body .bestsellers-section.r158-room .bestseller-card:nth-child(2) .bs-image img{ animation-delay:-2s !important; }
html body .bestsellers-section.r158-room .bestseller-card:nth-child(3) .bs-image img{ animation-delay:-4s !important; }
/* hover: brighten the specimen halo + light the pedestal */
html body .bestsellers-section.r158-room .bestseller-card:hover .bs-image img{
    filter:drop-shadow(0 26px 44px rgba(0,0,0,.7)) drop-shadow(0 0 26px rgba(20,184,166,.5)) !important;
}
html body .bestsellers-section.r158-room .bestseller-card:hover .bs-image::after{ opacity:.95 !important; }
/* refined teal "BEST SELLER" pill */
html body #main-content .bestsellers-section.r158-room .bs-badge{
    background:rgba(13,148,136,.14) !important;
    border:1px solid rgba(13,148,136,.4) !important;
    color:#5eead4 !important;
    border-radius:999px !important; padding:4px 11px !important;
    font-family:'JetBrains Mono',monospace !important;
    font-size:9.5px !important; letter-spacing:.13em !important; font-weight:600 !important;
}
@media (prefers-reduced-motion: reduce){
    html body .bestsellers-section.r158-room .bestseller-card .bs-image img{ animation:none !important; }
}

/* ════════════════════════════════════════════════════════════
   R162-D · DISTINCT SECTION BACKGROUNDS — give story + browse their
   own colour identity (feedback: wants different colours, not just
   shade steps). Story gets a cooler greige-parchment (a different hue
   from the warm creams around it); browse gets a cooler blue-charcoal
   so it reads as its own instrument bay vs the neutral-black rooms.
   ════════════════════════════════════════════════════════════ */
/* Story — "Built by researchers": cool greige parchment, its own hue,
   with a soft vertical gradient. Still lighter than the tan neighbours. */
html body section.story-section.r159-spread{
    background:linear-gradient(180deg, #eceae1 0%, #e4e1d4 100%) !important;
    border-top:1px solid rgba(28,24,16,.10) !important;
}
/* Browse — "Find What You're Studying": cool blue-charcoal instrument
   bay (was neutral #0b0d13) so its temperature differs from the other
   black rooms. */
html body section.goals-section.r158-instrument{
    background:linear-gradient(180deg, #0a0e16 0%, #070a11 100%) !important;
}

/* ════════════════════════════════════════════════════════════
   R162-E · HOW WE COMPARE — make the instrument feel ALIVE
   Feedback: the comparison still reads flat. On top of the R161-F
   console frame, add a continuous scanning line, a clear red "fail
   lane" on the vendor column, and a bigger glowing/pulsing verdict
   so the section reads as a live diagnostic. Hooks + JS untouched.
   ════════════════════════════════════════════════════════════ */

/* continuous scanning line drifting down the readout (::before is the
   top edge; ::after is free). Clipped by the readout's overflow:hidden. */
html body .vs-section.r159-diagnostic .r159-diag-readout::after{
    content:"" !important; position:absolute !important; left:0; right:0; top:0;
    height:2px; z-index:4; pointer-events:none;
    background:linear-gradient(90deg, transparent, rgba(45,212,191,.55), transparent) !important;
    box-shadow:0 0 14px rgba(20,184,166,.5);
    animation:r162e-scan 5.5s linear infinite;
}
@keyframes r162e-scan{
    0%{ transform:translateY(0); opacity:0; }
    8%{ opacity:1; }
    92%{ opacity:1; }
    100%{ transform:translateY(560px); opacity:0; }
}

/* vendor column = a clear red "fail lane" so the contrast story lands */
html body #main-content .vs-section.r159-diagnostic .vs-row[data-r159-diag-row] .vs-other{
    box-shadow:inset 2px 0 0 rgba(224,88,79,.4) !important;
    background:linear-gradient(180deg, rgba(224,88,79,.05), rgba(224,88,79,.02)) !important;
}

/* bigger, more dramatic verdict — glows + pulses once lit */
html body #main-content .vs-section.r159-diagnostic .r159-verdict{
    margin-top:30px !important; padding:14px 30px !important;
    font-size:15px !important; letter-spacing:.2em !important;
}
html body #main-content .vs-section.r159-diagnostic .r159-verdict.r159-verdict-on{
    background:linear-gradient(180deg, rgba(20,184,166,.22), rgba(13,148,136,.1)) !important;
    border-color:rgba(94,234,212,.7) !important;
    box-shadow:0 0 30px rgba(20,184,166,.45), inset 0 0 18px rgba(20,184,166,.12) !important;
    animation:r162e-verdict-pulse 2.6s ease-in-out infinite !important;
}
@keyframes r162e-verdict-pulse{
    0%,100%{ box-shadow:0 0 26px rgba(20,184,166,.34), inset 0 0 18px rgba(20,184,166,.1); }
    50%{ box-shadow:0 0 40px rgba(20,184,166,.6), inset 0 0 22px rgba(20,184,166,.18); }
}
@media (prefers-reduced-motion: reduce){
    html body .vs-section.r159-diagnostic .r159-diag-readout::after{ animation:none !important; opacity:0 !important; }
    html body #main-content .vs-section.r159-diagnostic .r159-verdict.r159-verdict-on{ animation:none !important; }
}

/* ════════════════════════════════════════════════════════════
   R163 · HERO tactical fixes — cursor spotlight calmer, kicker
   badge + sub more eye-catching, CTA bigger & more clickable.
   ════════════════════════════════════════════════════════════ */

/* (1) cursor-follow spotlight: smaller + dimmer (was 600px, opacity 1) */
html body #hero.r159 .hero-spotlight{
    background:radial-gradient(circle 300px at var(--r154-sp-x,50%) var(--r154-sp-y,50%),
        rgba(94,234,212,.055), transparent 64%) !important;
    opacity:.6 !important;
}

@media (min-width:769px){
    /* (2) kicker -> a deliberate teal eyebrow badge (more eye-catching) */
    html body #hero.r159 .hero-kicker{
        background:rgba(20,184,166,.14) !important;
        border:1px solid rgba(45,212,191,.42) !important;
        border-radius:999px !important;
        padding:7px 15px !important;
        color:#d8f5ef !important;
        font-size:11.5px !important;
        box-shadow:0 2px 14px rgba(6,7,10,.5) !important;
    }
    html body #hero.r159 .hero-kicker .hero-kicker-dot{
        box-shadow:0 0 9px rgba(45,212,191,.85) !important;
    }
    /* (3) mono-sub: larger, brighter, the count + "verified" pop teal */
    html body #hero.r159 .hero-mono-sub{
        font-size:13.5px !important; color:#ecebe6 !important; font-weight:600 !important;
        text-shadow:0 1px 10px rgba(6,7,10,.6) !important;
    }
    html body #hero.r159 .hero-mono-sub .hero-mono-sub-count{ color:#2dd4bf !important; font-weight:700 !important; }

    /* (4) "Browse the catalog" — bigger, more clickable, gentle attention pulse.
       R176: horizontal padding 40px->30px so the pill text sits closer to the
       column's left edge, tightening the inset the trust row reads against. */
    html body #hero.r159 .hero-cta-inline{
        font-size:17px !important;
        padding:19px 30px !important;
        min-height:60px !important;
        letter-spacing:.01em !important;
        animation:r163-cta-glow 3.4s ease-in-out infinite !important;
    }
}
@keyframes r163-cta-glow{
    0%,100%{ box-shadow:0 12px 30px rgba(20,184,166,.34), 0 1px 0 rgba(255,255,255,.25) inset; }
    50%    { box-shadow:0 16px 44px rgba(20,184,166,.6), 0 0 0 4px rgba(20,184,166,.1), 0 1px 0 rgba(255,255,255,.3) inset; }
}
@media (prefers-reduced-motion: reduce){
    html body #hero.r159 .hero-cta-inline{ animation:none !important; }
}

/* ════════════════════════════════════════════════════════════
   R164-1 · LOWER-WING "FIELD-JOURNAL" THEME
   Owner direction: give Verified -> Manifesto -> Story -> Reviews their
   own identity — a warm charcoal/ink chapter, distinct from both the
   cool instrument black above and the lone cream FAQ below. So we flip
   that whole wing from cream-exhibit (light bg / dark ink) to warm ink
   (dark warm bg / light ink). Everything that was dark-on-cream becomes
   light-on-charcoal; teal accents brighten; cards + hairlines invert.
   ════════════════════════════════════════════════════════════ */

/* (1) Section backgrounds — warm charcoal (#1c1714 / #181310), clearly
   WARMER + lighter than the cool instrument black (#06070A), with light
   hairline seams between them. */
html body section.r154-verified.r158-room{ background:#1c1714 !important; }
html body section.why-section.r159-standard{
    background:#181310 !important; border-top:1px solid rgba(255,255,255,.07) !important;
}
html body section.story-section.r159-spread{
    background:#1c1714 !important; border-top:1px solid rgba(255,255,255,.07) !important;
}
html body section.testimonials-section.r158-exhibit{
    background:#181310 !important; border-top:1px solid rgba(255,255,255,.07) !important;
}
/* dim the light paper-grain atmosphere on the dark theme */
html body .r154-verified .r159-atmos-paper,
html body .why-section.r159-standard .r159-atmos-paper,
html body .story-section.r159-spread .r159-atmos-paper,
html body .testimonials-section .r159-atmos-paper{ opacity:.05 !important; }

/* (2) HEADINGS / strong / metric numbers -> warm off-white.
   Selectors carry the section's full 3-class chain (+ section element +
   #main-content) so they out-specify the original R159 cream-ink rules. */
html body #main-content section.r154-verified.r159-credentials.r158-exhibit .r154-verified-heading,
html body #main-content section.r154-verified.r159-credentials.r158-exhibit .r159-cred-num,
html body #main-content section.why-section.r159-standard.r158-exhibit .r159-std-headline,
html body #main-content section.why-section.r159-standard.r158-exhibit .ws-m,
html body #main-content section.story-section.r159-spread.r158-exhibit .section-title,
html body #main-content section.story-section.r159-spread.r158-exhibit .ssc-number,
html body #main-content section.testimonials-section.r159-quotes.r158-exhibit .section-title,
html body #main-content section.testimonials-section.r159-quotes.r158-exhibit .testimonial-text,
html body #main-content section.testimonials-section.r159-quotes.r158-exhibit .r159-strip-name,
html body #main-content section.testimonials-section.r159-quotes.r158-exhibit strong{ color:#efe9de !important; }

/* (3) BODY / soft copy -> warm light grey */
html body #main-content section.r154-verified.r159-credentials.r158-exhibit .r154-verified-sub,
html body #main-content section.r154-verified.r159-credentials.r158-exhibit .r159-cred-line,
html body #main-content section.why-section.r159-standard.r158-exhibit .ws-v,
html body #main-content section.story-section.r159-spread.r158-exhibit p,
html body #main-content section.story-section.r159-spread.r158-exhibit .ssc-label,
html body #main-content section.testimonials-section.r159-quotes.r158-exhibit .r159-strip-snippet,
html body #main-content section.testimonials-section.r159-quotes.r158-exhibit .reviews-text,
html body #main-content section.testimonials-section.r159-quotes.r158-exhibit span{ color:#b6afa2 !important; }

/* (4) Teal accents brighten for the dark ground */
html body #main-content section.r154-verified.r159-credentials.r158-exhibit .r159-cred-label,
html body #main-content section.r154-verified.r159-credentials.r158-exhibit .r159-cred-index,
html body #main-content section.why-section.r159-standard.r158-exhibit .r159-std-kicker,
html body #main-content section.why-section.r159-standard.r158-exhibit .ws-k,
html body #main-content section.story-section.r159-spread.r158-exhibit .r159-spread-kicker,
html body #main-content section.story-section.r159-spread.r158-exhibit .r159-placard-idx,
html body #main-content section.story-section.r159-spread.r158-exhibit .link-arrow,
html body #main-content section.testimonials-section.r159-quotes.r158-exhibit .section-badge,
html body #main-content section.testimonials-section.r159-quotes.r158-exhibit .testimonial-product,
html body #main-content section.testimonials-section.r159-quotes.r158-exhibit .r159-quote-mark{ color:#2dd4bf !important; }

/* (5) Card / plate surfaces invert: light paper -> warm raised panel */
html body .r154-verified .r159-cred-plate,
html body .story-section.r159-spread .story-stat-card,
html body .testimonials-section .testimonial-card,
html body .testimonials-section .r159-quote-featured,
html body .testimonials-section .reviews-summary,
html body .testimonials-section .r159-quote-body{
    background:#241e19 !important;
    border-color:rgba(255,255,255,.10) !important;
}
html body .testimonials-section .testimonial-product{ background:rgba(255,255,255,.07) !important; border-color:rgba(255,255,255,.1) !important; }
html body .testimonials-section .testimonial-verified.r159-quote-plaque{ background:rgba(20,184,166,.12) !important; border-color:rgba(45,212,191,.34) !important; }

/* (6) Hairlines invert (manifesto ledger draw-lines were dark-on-cream) */
html body .why-section.r159-standard .r159-std-row::after,
html body .why-section.r159-standard .r159-std-row:first-child::before{
    background:rgba(255,255,255,.12) !important;
}
html body #main-content .why-section.r159-standard .r159-std-row:hover{ background:rgba(20,184,166,.06) !important; }

/* ════════════════════════════════════════════════════════════
   R164-2 · "FIND WHAT YOU'RE STUDYING" — structural rebuild
   Was a cramped left-list + right-readout. Now a bold blueprint-backed
   card GRID: 6 large research-area tiles (3x2) over a generated
   instrument-panel/blueprint texture, with the live readout kept as a
   wide "scope" status strip below. All goal-card hrefs + the
   module-selector/readout JS are preserved (DOM kept; layout changed).
   ════════════════════════════════════════════════════════════ */

/* (1) Blueprint instrument-panel backdrop (generated, decorative). */
html body section.goals-section.r158-instrument{
    background:
        linear-gradient(180deg, rgba(8,11,18,.88) 0%, rgba(7,10,17,.94) 100%),
        url('images/r164-blueprint-circuit.webp?v=1') center top / cover no-repeat,
        #080b12 !important;
}
/* keep the section content above the backdrop */
html body .goals-section.r158-room .r158-inner{ position:relative; z-index:1; }

/* (2) Console -> single column (card grid, then readout strip). */
html body .goals-section.r158-room .r158-modules-console{
    grid-template-columns:1fr !important; gap:22px !important; margin-top:40px !important;
}

/* (3) The 6 channels become a real 3-col card grid (2 on tablet, 1 on phone). */
html body .goals-section.r158-room .r158-mod-list{
    display:grid !important;
    grid-template-columns:repeat(3, 1fr) !important;
    gap:16px !important;
    margin:0 !important;
}
@media (max-width:920px){ html body .goals-section.r158-room .r158-mod-list{ grid-template-columns:repeat(2,1fr) !important; } }
@media (max-width:580px){ html body .goals-section.r158-room .r158-mod-list{ grid-template-columns:1fr !important; } }

/* (4) Each channel = a tall blueprint tile (icon top, name, arrow bottom). */
html body .goals-section.r158-room .r158-mod{
    display:flex !important; flex-direction:column !important; align-items:flex-start !important;
    gap:16px !important; padding:24px 22px !important; min-height:168px !important;
    margin:0 !important;
    background:
        linear-gradient(160deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.02) 100%),
        rgba(8,11,18,.72) !important;
    border:1px solid rgba(255,255,255,.16) !important; border-radius:14px !important;
    box-shadow:0 14px 34px -22px rgba(0,0,0,.8) !important;
    transition:transform .35s var(--r159-ease,cubic-bezier(0.16,1,0.3,1)),
               border-color .35s var(--r159-ease), box-shadow .35s var(--r159-ease),
               background .35s var(--r159-ease) !important;
}
html body .goals-section.r158-room .r158-mod:hover,
html body .goals-section.r158-room .r158-mod.is-active{
    transform:translateY(-6px) !important;
    border-color:rgba(45,212,191,.55) !important;
    box-shadow:0 24px 50px -24px rgba(0,0,0,.85), 0 0 26px rgba(20,184,166,.28) !important;
    background:
        linear-gradient(160deg, rgba(20,184,166,.16) 0%, rgba(255,255,255,.03) 100%),
        rgba(8,11,18,.72) !important;
}
/* tile name fills the middle, arrow drops to the bottom corner */
html body #main-content .goals-section.r158-room .r158-mod .r158-mod-name{
    font-size:18px !important; line-height:1.2 !important; margin-top:auto !important;
}
html body .goals-section.r158-room .r158-mod .goal-arrow{
    position:absolute !important; right:18px !important; bottom:18px !important;
    width:30px !important; height:30px !important; display:flex !important;
    align-items:center; justify-content:center;
    border:1px solid rgba(45,212,191,.4) !important; border-radius:50% !important;
}
html body .goals-section.r158-room .r158-mod{ position:relative !important; overflow:hidden; }
/* the left edge-bar accent becomes a top edge bar on the tile */
html body .goals-section.r158-room .r158-mod::after{
    top:0 !important; left:0 !important; right:0 !important; bottom:auto !important;
    width:auto !important; height:2px !important;
}

/* (5) Readout becomes a wide horizontal "scope" status strip below the grid. */
html body .goals-section.r158-room .r158-mod-readout{
    position:relative !important; top:auto !important; min-height:0 !important;
    display:grid !important; grid-template-columns:auto 1fr auto !important;
    align-items:center !important; gap:22px !important; padding:18px 26px !important;
}
html body .goals-section.r158-room .r158-mod-readout .r158-mod-ro-name{
    margin:0 !important; font-size:clamp(20px,2.2vw,26px) !important;
}
html body .goals-section.r158-room .r158-mod-readout .r159-mod-spark{ margin:0 !important; height:40px !important; }
html body .goals-section.r158-room .r158-mod-readout .r158-mod-ro-cta{ margin:0 !important; white-space:nowrap; }
@media (max-width:720px){
    html body .goals-section.r158-room .r158-mod-readout{ grid-template-columns:1fr !important; gap:12px !important; }
}

/* ════════════════════════════════════════════════════════════
   R164-3 · HOW WE COMPARE — "diagnostic bay" with blueprint backdrop
   Layer the generated instrument-panel/blueprint texture behind the
   whole section so the readout console (R161-F frame + R162-E scan
   line / fail-lane / pulsing verdict) reads as a unit floating in an
   instrument bay — matching the rebuilt browse section. vs-row hooks +
   diagnostic JS untouched.
   ════════════════════════════════════════════════════════════ */
html body section.vs-section.r159-diagnostic{
    background:
        linear-gradient(180deg, rgba(8,11,18,.86) 0%, rgba(7,10,17,.94) 100%),
        url('images/r164-blueprint-scope.webp?v=1') center / cover no-repeat,
        #080b12 !important;
}
html body .vs-section.r159-diagnostic .r158-inner{ position:relative; z-index:1; }
/* float the console above the blueprint with a touch more depth + a faint
   blueprint vignette around it */
html body .vs-section.r159-diagnostic .r159-diag-readout{
    box-shadow:0 36px 80px -34px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05) !important;
}

/* ════════════════════════════════════════════════════════════
   R164-4 · BEST SELLERS — same blueprint rebuild as the other sections
   Owner: give Best Sellers the same level of rebuild. New generated
   "drafting / exploded-diagram" blueprint backdrop; the horizontal
   scroll rail becomes a bold centered 3-up GRID of framed specimen
   spec-cards. #bestsellers-grid + .bestseller-card/.bs-* hooks intact
   (the breathe/pedestal/halo from R162-C still apply).
   ════════════════════════════════════════════════════════════ */
html body section.bestsellers-section.r158-instrument{
    background:
        linear-gradient(180deg, rgba(8,11,18,.90) 0%, rgba(7,10,17,.95) 100%),
        url('images/r164-blueprint-draft.webp?v=1') center / cover no-repeat,
        #080b12 !important;
}
html body .bestsellers-section.r158-room .r158-inner{ position:relative; z-index:1; }
/* rail -> static grid (drop the horizontal scroll on desktop) */
html body .bestsellers-section.r158-room .r158-bench-rail{
    overflow:visible !important; scroll-snap-type:none !important;
    padding:8px 4px 16px !important;
}
html body .bestsellers-section.r158-room #bestsellers-grid{
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0,1fr)) !important;
    gap:20px !important; justify-content:center !important;
}
@media (max-width:900px){ html body .bestsellers-section.r158-room #bestsellers-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } }
@media (max-width:560px){ html body .bestsellers-section.r158-room #bestsellers-grid{ grid-template-columns:1fr !important; } }
/* cards -> bold framed spec tiles floating on the blueprint */
html body .bestsellers-section.r158-room .bestseller-card{
    flex:none !important; width:auto !important; scroll-snap-align:none !important;
    background:
        linear-gradient(160deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.015) 100%),
        rgba(8,11,18,.80) !important;
    border:1px solid rgba(255,255,255,.16) !important; border-radius:16px !important;
    box-shadow:0 18px 44px -24px rgba(0,0,0,.85) !important;
}
@media (max-width:768px){ html body .bestsellers-section.r158-room .bestseller-card{ flex:none !important; width:auto !important; } }

/* ════════════════════════════════════════════════════════════
   R165 · HERO TYPOGRAPHY + BESPOKE BADGE
   Feedback: the eyebrow pill looked generic/AI; the supporting copy
   could be smoother/cleaner; the CTA could be better. Translated a
   21st.dev "HUD status tag" into a vanilla instrument label (pinging
   LED + bracket frame + mono lockup), moved the context line onto the
   Bricolage display family for an editorial feel, and added a CTA sheen.
   ════════════════════════════════════════════════════════════ */

/* (1) Bespoke HUD instrument tag (replaces the rounded pill). */
html body #hero.r159 .hero-kicker.r165-tag{
    display:inline-flex !important; align-items:center !important; gap:11px !important;
    padding:9px 18px !important;
    background:linear-gradient(180deg, rgba(20,184,166,.14) 0%, rgba(13,148,136,.04) 100%) !important;
    border:1px solid rgba(45,212,191,.30) !important;
    border-radius:4px !important;
    position:relative !important; overflow:visible !important;
    box-shadow:0 6px 22px rgba(6,7,10,.5), inset 0 1px 0 rgba(255,255,255,.07) !important;
}
/* teal corner brackets (reticle frame) */
html body #hero.r159 .hero-kicker.r165-tag::before,
html body #hero.r159 .hero-kicker.r165-tag::after{
    content:"" !important; position:absolute !important; width:9px !important; height:9px !important; pointer-events:none;
}
html body #hero.r159 .hero-kicker.r165-tag::before{ top:-1px !important; left:-1px !important; border-top:2px solid #2dd4bf !important; border-left:2px solid #2dd4bf !important; border-top-left-radius:4px !important; }
html body #hero.r159 .hero-kicker.r165-tag::after{ bottom:-1px !important; right:-1px !important; border-bottom:2px solid #2dd4bf !important; border-right:2px solid #2dd4bf !important; border-bottom-right-radius:4px !important; }
/* pinging status LED */
html body #hero.r159 .hero-kicker.r165-tag .hero-kicker-dot{
    position:relative !important; width:7px !important; height:7px !important; border-radius:50% !important;
    background:#2dd4bf !important; box-shadow:0 0 9px rgba(45,212,191,.9) !important; flex:0 0 auto !important;
}
html body #hero.r159 .hero-kicker.r165-tag .hero-kicker-dot::after{
    content:"" !important; position:absolute !important; inset:-3px !important; border-radius:50% !important;
    border:1px solid rgba(45,212,191,.6) !important; animation:r165-ping 2.6s cubic-bezier(0,0,.2,1) infinite !important;
}
@keyframes r165-ping{ 0%{ transform:scale(.5); opacity:.9 } 80%,100%{ transform:scale(2.4); opacity:0 } }
/* mono lockup: brand | category */
html body #hero.r159 .hero-kicker.r165-tag .hk-brand{
    font-family:'JetBrains Mono',ui-monospace,monospace !important; font-weight:700 !important; font-size:11px !important;
    letter-spacing:.13em !important; text-transform:uppercase !important; color:#eafff9 !important; line-height:1 !important;
}
html body #hero.r159 .hero-kicker.r165-tag .hk-div{
    width:1px !important; height:13px !important; background:rgba(45,212,191,.45) !important; display:inline-block !important; flex:0 0 auto !important;
}
html body #hero.r159 .hero-kicker.r165-tag .hk-cat{
    font-family:'JetBrains Mono',ui-monospace,monospace !important; font-weight:500 !important; font-size:11px !important;
    letter-spacing:.13em !important; text-transform:uppercase !important; color:#86dccf !important; line-height:1 !important;
}
@media (prefers-reduced-motion: reduce){ html body #hero.r159 .hero-kicker.r165-tag .hero-kicker-dot::after{ animation:none !important; } }

/* (2) Context sentence -> Bricolage display family (smoother / editorial). */
html body #hero.r159 .hero-context{
    font-family:'Bricolage Grotesque',sans-serif !important;
    font-weight:400 !important; letter-spacing:-.005em !important; line-height:1.45 !important;
    color:#f3f1ea !important;
}
@media (min-width:769px){
    html body #hero.r159 .hero-context{ font-size:clamp(20px,1.65vw,23.5px) !important; }
}
/* mono-sub: cleaner tracking + tone */
html body #hero.r159 .hero-mono-sub{ letter-spacing:.10em !important; color:#dad8d2 !important; }

/* (3) CTA polish: a single refined sheen sweep on hover. */
html body #hero.r159 .hero-cta-inline{ position:relative !important; overflow:hidden !important; }
html body #hero.r159 .hero-cta-inline::after{
    content:"" !important; position:absolute !important; top:0 !important; left:-65% !important;
    width:48% !important; height:100% !important; z-index:0 !important; pointer-events:none !important;
    background:linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent) !important;
    transform:skewX(-18deg) !important;
    transition:left .55s var(--r154-ease-out-quart,cubic-bezier(0.16,1,0.3,1)) !important;
}
html body #hero.r159 .hero-cta-inline:hover::after{ left:130% !important; }
html body #hero.r159 .hero-cta-inline > *{ position:relative !important; z-index:1 !important; }

/* ════════════════════════════════════════════════════════════
   R166 · HERO TYPE SYSTEM — considered, no-badge redesign
   The hero column is now ONE intentional system, two voices:
   • Editorial display (Bricolage Grotesque): the ElytraLabs wordmark,
     the 99.62% stat, and the value lede.
   • Instrument data (JetBrains Mono): the category line + the
     mean-purity readout.
   ════════════════════════════════════════════════════════════ */

/* ── (1) Brandmark eyebrow — NO box. ElytraLabs is a standalone
   two-tone wordmark; a quiet mono category sits beneath it. ── */
html body #hero.r159 .hero-kicker.r166-mark{
    display:flex !important; flex-direction:column !important; align-items:flex-start !important;
    gap:6px !important;
    background:none !important; border:none !important; border-radius:0 !important;
    padding:0 !important; box-shadow:none !important; overflow:visible !important;
    margin:0 0 6px 0 !important;
}
html body #hero.r159 .hero-kicker.r166-mark .hk-wordmark{
    font-family:'Bricolage Grotesque',sans-serif !important;
    font-weight:700 !important; font-size:23px !important; line-height:1 !important;
    letter-spacing:-.01em !important; display:inline-block !important;
    text-shadow:0 1px 14px rgba(6,7,10,.55) !important;
}
html body #hero.r159 .hero-kicker.r166-mark .hkw-a{ color:#fbfaf6 !important; }
html body #hero.r159 .hero-kicker.r166-mark .hkw-b{ color:#2dd4bf !important; }
/* the inner emphasis/wordmark spans need their OWN id-scoped font rule —
   the #main-content Inter normalizer (styles.css ~21947) targets every
   descendant span and only an id-bearing selector outranks it. */
html body #hero.r159 .hero-kicker.r166-mark .hkw-a,
html body #hero.r159 .hero-kicker.r166-mark .hkw-b,
html body #hero.r159 .hero-context.r166-lede .hc-strong,
html body #hero.r159 .hero-context.r166-lede .hc-coa{
    font-family:'Bricolage Grotesque', sans-serif !important;
}
html body #hero.r159 .hero-kicker.r166-mark .hk-cat{
    font-family:'JetBrains Mono',ui-monospace,monospace !important;
    font-weight:500 !important; font-size:10px !important; letter-spacing:.26em !important;
    text-transform:uppercase !important; color:#8c8a84 !important; line-height:1 !important;
}

/* ── (2) Value lede — editorial Bricolage, with two emphases:
   the proof phrase reads brightest, "COAs" carries the teal accent. ── */
html body #hero.r159 .hero-context.r166-lede{
    font-family:'Bricolage Grotesque',sans-serif !important;
    font-weight:400 !important; line-height:1.5 !important; letter-spacing:-.012em !important;
    color:#d4d2cb !important; max-width:33ch !important;
    text-shadow:0 1px 14px rgba(6,7,10,.5) !important;
}
@media (min-width:769px){
    html body #hero.r159 .hero-context.r166-lede{ font-size:clamp(21px,1.72vw,25px) !important; }
}
html body #hero.r159 .hero-context.r166-lede .hc-strong{ color:#fbfaf6 !important; font-weight:600 !important; }
html body #hero.r159 .hero-context.r166-lede .hc-coa{
    color:#2dd4bf !important; font-weight:600 !important;
    text-decoration:underline !important; text-decoration-color:rgba(45,212,191,.45) !important;
    text-decoration-style:dotted !important; text-underline-offset:4px !important;
}

/* ── (3) Mean-purity readout — instrument mono caption. ── */
html body #hero.r159 .hero-mono-sub{
    font-family:'JetBrains Mono',ui-monospace,monospace !important;
    font-size:11.5px !important; letter-spacing:.09em !important; text-transform:uppercase !important;
    color:#b4b2ad !important; font-weight:500 !important;
}
html body #hero.r159 .hero-mono-sub .hero-mono-sub-count{ color:#2dd4bf !important; font-weight:700 !important; }

/* ── (4) CTA refinement — arrow in a chip that slides; calmer breathing glow. ── */
html body #hero.r159 .hero-cta-inline .hero-cta-arrow{
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
    width:24px !important; height:24px !important; border-radius:50% !important;
    background:rgba(4,32,29,.16) !important; margin-left:3px !important; font-size:15px !important;
    transition:transform .26s var(--r154-ease-out-quart,cubic-bezier(0.16,1,0.3,1)), background .26s ease !important;
}
html body #hero.r159 .hero-cta-inline:hover .hero-cta-arrow{ transform:translateX(4px) !important; background:rgba(4,32,29,.30) !important; }
html body #hero.r159 .hero-cta-inline{ animation:r166-cta-breathe 4.2s ease-in-out infinite !important; }
@keyframes r166-cta-breathe{
    0%,100%{ box-shadow:0 12px 30px rgba(20,184,166,.30), 0 1px 0 rgba(255,255,255,.25) inset; }
    50%    { box-shadow:0 16px 40px rgba(20,184,166,.46), 0 1px 0 rgba(255,255,255,.3) inset; }
}
@media (prefers-reduced-motion: reduce){ html body #hero.r159 .hero-cta-inline{ animation:none !important; } }

/* ════════════════════════════════════════════════════════════
   R167 · HERO PREMIUM TYPE SYSTEM — new typefaces
   Geist (display/UI), Geist Mono (instrument data), Fraunces
   (one editorial-serif lede moment). Every rule is id-scoped so it
   beats the #main-content Inter normalizer (~styles.css:21947).
   ════════════════════════════════════════════════════════════ */

/* Wordmark -> Geist (precise, premium grotesque) */
html body #hero.r159 .hero-kicker.r166-mark .hk-wordmark,
html body #hero.r159 .hero-kicker.r166-mark .hkw-a,
html body #hero.r159 .hero-kicker.r166-mark .hkw-b{
    font-family:'Geist', sans-serif !important;
    font-weight:600 !important; letter-spacing:-.018em !important;
}
html body #hero.r159 .hero-kicker.r166-mark .hk-wordmark{ font-size:22px !important; }

/* Category + mean-purity readout -> Geist Mono (data voice) */
html body #hero.r159 .hero-kicker.r166-mark .hk-cat{
    font-family:'Geist Mono', ui-monospace, monospace !important;
    font-size:10px !important; letter-spacing:.24em !important;
}
html body #hero.r159 .hero-mono-sub{
    font-family:'Geist Mono', ui-monospace, monospace !important;
    font-size:11px !important; letter-spacing:.07em !important;
}

/* The 99.62% stat -> Geist (clean, precise hero numeral) */
html body #hero.r159 .hero-stat,
html body #hero.r159 .hero-stat .hero-stat-num{
    font-family:'Geist', sans-serif !important;
    font-weight:700 !important; letter-spacing:-.035em !important;
}

/* Value lede -> Fraunces editorial serif (the one expressive moment) */
html body #hero.r159 .hero-context.r166-lede,
html body #hero.r159 .hero-context.r166-lede .hc-strong,
html body #hero.r159 .hero-context.r166-lede .hc-coa{
    font-family:'Fraunces', Georgia, 'Times New Roman', serif !important;
    font-optical-sizing:auto !important;
}
html body #hero.r159 .hero-context.r166-lede{
    font-weight:400 !important; line-height:1.4 !important; letter-spacing:0 !important;
    color:#fbfaf6 !important; max-width:30ch !important;
}
@media (min-width:769px){
    html body #hero.r159 .hero-context.r166-lede{ font-size:clamp(23px,1.95vw,28px) !important; }
}
html body #hero.r159 .hero-context.r166-lede .hc-strong{ font-weight:500 !important; color:#fbfaf6 !important; }
html body #hero.r159 .hero-context.r166-lede .hc-coa{ font-weight:500 !important; }

/* CTA label + price anchor -> Geist / Geist Mono */
html body #hero.r159 .hero-cta-inline{
    font-family:'Geist', sans-serif !important; font-weight:600 !important; letter-spacing:.005em !important;
}
html body #hero.r159 .hero-cta-anchor,
html body #hero.r159 .hero-cta-anchor strong{
    font-family:'Geist Mono', ui-monospace, monospace !important;
}

/* Rhythm: deliberate air between the lede and the CTA cluster.
   R169: the var resolved to 64px which left an ~88px gap (the CTA
   floated); a fixed 30px lands a balanced ~50px gap in the stack. */
html body #hero.r159 .hero-context.r166-lede{ margin-bottom:30px !important; }

/* ════════════════════════════════════════════════════════════
   R168 · HERO CONSISTENCY — correlate with the rest of the page
   (1) Wordmark colours match the nav logo: Elytra = teal, Labs =
       light gray (I'd had them flipped).
   (2) The data lines (category, mean-purity readout, price anchor)
       go back to JetBrains Mono — the page's instrument-label voice
       (e.g. "// LIVE TELEMETRY") — so they match everything else.
   ════════════════════════════════════════════════════════════ */
/* (1) match the logo wordmark */
html body #hero.r159 .hero-kicker.r166-mark .hkw-a{ color:#2dd4bf !important; }
html body #hero.r159 .hero-kicker.r166-mark .hkw-b{ color:#d8d6cf !important; }

/* (2) mono/data voice = JetBrains Mono (page-consistent) */
html body #hero.r159 .hero-kicker.r166-mark .hk-cat,
html body #hero.r159 .hero-mono-sub,
html body #hero.r159 .hero-cta-anchor,
html body #hero.r159 .hero-cta-anchor strong{
    font-family:'JetBrains Mono', ui-monospace, monospace !important;
}

/* ════════════════════════════════════════════════════════════
   R170 · HERO "SPEC MARGIN" — bespoke decorative rail
   A lab/blueprint annotation margin (teal hairline + measurement
   ticks + a vertical mono label) running down the LEFT of the text
   column — frames the type with an instrument-document feel without
   competing with the video. Pure CSS, decorative, desktop only.
   ════════════════════════════════════════════════════════════ */
html body #hero.r159 .hero-text{ position:relative !important; }
html body #hero.r159 .hero-spec-margin{
    position:absolute !important; left:-26px !important; top:8px !important; bottom:80px !important;
    width:12px !important; display:flex !important; flex-direction:column !important; align-items:center !important;
    pointer-events:none !important; z-index:1 !important;
}
html body #hero.r159 .hsm-rail{
    flex:1 1 auto !important; width:1px !important; position:relative !important;
    background:linear-gradient(180deg, transparent 0%, rgba(45,212,191,.5) 12%, rgba(45,212,191,.16) 88%, transparent 100%) !important;
}
/* measurement ticks down the rail */
html body #hero.r159 .hsm-rail::before{
    content:"" !important; position:absolute !important; left:-3px !important; top:10% !important; bottom:10% !important; width:5px !important;
    background-image:repeating-linear-gradient(180deg, rgba(45,212,191,.45) 0 1px, transparent 1px 46px) !important;
}
/* vertical mono annotation */
html body #hero.r159 .hsm-label{
    font-family:'JetBrains Mono', ui-monospace, monospace !important;
    font-size:8px !important; font-weight:500 !important; letter-spacing:.22em !important; text-transform:uppercase !important;
    color:rgba(45,212,191,.5) !important; writing-mode:vertical-rl !important; transform:rotate(180deg) !important;
    white-space:nowrap !important; margin-top:8px !important; line-height:1 !important;
}
/* the rail is a deliberately quiet desktop detail */
@media (max-width:1024px){ html body #hero.r159 .hero-spec-margin{ display:none !important; } }

/* ════════════════════════════════════════════════════════════
   R171 · HERO MICRO-POLISH (impeccable pass)
   (1) eyebrow: subordinate to the stat + tightly connected to it;
   (2) readout: middot separator, tighter;
   (3) CTA arrow: crisp icon in a refined chip that slides + fills;
   (4) price anchor: the $20 is the hook — make it pop.
   ════════════════════════════════════════════════════════════ */

/* (1) Brand masthead — smaller + anchored to the 99.62% (was floating). */
html body #hero.r159 .hero-kicker.r166-mark{ gap:4px !important; margin:0 0 12px 0 !important; }
html body #hero.r159 .hero-kicker.r166-mark .hk-wordmark{ font-size:20px !important; }
html body #hero.r159 .hero-kicker.r166-mark .hk-cat{ font-size:9.5px !important; letter-spacing:.24em !important; color:#7c7a75 !important; }
html body #hero.r159 .hero-stat{ margin-top:6px !important; }

/* (2) Readout: teal middot separator, slightly tighter tracking. */
html body #hero.r159 .hero-mono-sub{ letter-spacing:.075em !important; }
html body #hero.r159 .hero-mono-sub .hms-dot{ color:#2dd4bf !important; margin:0 5px !important; font-weight:700 !important; }

/* (3) CTA arrow — a crisp FA icon in a refined chip; chip fills + icon
   slides on hover (the chip itself no longer translates). */
html body #hero.r159 .hero-cta-inline .hero-cta-arrow{
    width:27px !important; height:27px !important; border-radius:50% !important;
    background:rgba(4,32,29,.20) !important; margin-left:6px !important;
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
    transform:none !important;
    transition:background .26s var(--r154-ease-out-quart,cubic-bezier(0.16,1,0.3,1)) !important;
}
html body #hero.r159 .hero-cta-inline .hero-cta-arrow i{
    font-size:11px !important; color:#04201d !important; line-height:1 !important;
    transition:transform .26s var(--r154-ease-out-quart,cubic-bezier(0.16,1,0.3,1)) !important;
}
html body #hero.r159 .hero-cta-inline:hover .hero-cta-arrow{ background:rgba(4,32,29,.34) !important; transform:none !important; }
html body #hero.r159 .hero-cta-inline:hover .hero-cta-arrow i{ transform:translateX(3px) !important; }

/* (4) Price anchor — quiet frame, loud number. */
html body #hero.r159 .hero-cta-anchor{
    font-family:'JetBrains Mono', ui-monospace, monospace !important;
    font-size:11px !important; letter-spacing:.04em !important; color:#9b9994 !important;
    display:inline-flex !important; align-items:baseline !important; gap:5px !important;
}
html body #hero.r159 .hero-cta-anchor strong{
    font-family:'JetBrains Mono', ui-monospace, monospace !important;
    font-size:17px !important; font-weight:700 !important; color:#fbfaf6 !important; letter-spacing:0 !important;
}

/* ════════════════════════════════════════════════════════════
   R172 · HERO DECISION-POINT TRUST ROW
   Adds the two things the hero was missing at the CTA: social proof
   + the "see a COA" path the copy promises. The cluster becomes a
   column: [Browse the catalog · from $20] then [★4.9 · 200+ orders | See a sample COA →].
   ════════════════════════════════════════════════════════════ */
html body #hero.r159 .hero-cta-r154{
    flex-direction:column !important; align-items:flex-start !important; gap:16px !important;
}
html body #hero.r159 .hero-cta-row{
    display:flex !important; align-items:center !important; gap:15px !important; flex-wrap:wrap !important;
}
/* R176: trust row aligns to the column's canonical left edge (0) — same
   edge as the stat, mono-sub, lede and the CTA pill's box. The ★ lines
   up under the pill's left edge (the visual reference), not its padded
   interior text. The R175 41px indent is reverted; instead the pill's
   own padding is trimmed (40px->30px below) so its text sits closer to
   that shared edge and the column reads as one clean vertical line. */
html body #hero.r159 .hero-trust-row{
    display:flex !important; align-items:center !important; gap:16px !important; flex-wrap:wrap !important;
}
/* rating — quiet frame, the score is the only bright element */
html body #hero.r159 .htr-rating{
    display:inline-flex !important; align-items:center !important; gap:7px !important;
    font-family:'JetBrains Mono', ui-monospace, monospace !important;
    font-size:12px !important; letter-spacing:.04em !important; color:#b4b2ad !important;
}
html body #hero.r159 .htr-rating i{ color:#2dd4bf !important; font-size:11px !important; }
html body #hero.r159 .htr-rating strong{
    font-family:'JetBrains Mono', ui-monospace, monospace !important;
    color:#fbfaf6 !important; font-weight:700 !important; font-size:13px !important;
}
html body #hero.r159 .htr-sub{ color:#86847f !important; margin-left:3px !important; }
/* thin divider */
html body #hero.r159 .htr-div{ width:1px !important; height:13px !important; background:rgba(255,255,255,.18) !important; }
/* secondary COA path — inviting teal text link, arrow slides on hover */
html body #hero.r159 .htr-coa{
    font-family:'Geist', sans-serif !important; font-size:13px !important; font-weight:500 !important;
    color:#9fded3 !important; text-decoration:none !important;
    display:inline-flex !important; align-items:center !important; gap:7px !important;
    transition:color .2s var(--r154-ease-out-quart,cubic-bezier(0.16,1,0.3,1)) !important;
}
html body #hero.r159 .htr-coa i{
    font-size:9px !important; color:#2dd4bf !important;
    transition:transform .22s var(--r154-ease-out-quart,cubic-bezier(0.16,1,0.3,1)) !important;
}
html body #hero.r159 .htr-coa:hover{ color:#eafaf6 !important; }
html body #hero.r159 .htr-coa:hover i{ transform:translateX(3px) !important; }
@media (max-width:768px){
    html body #hero.r159 .hero-trust-row{ gap:10px 14px !important; }
}

/* ════════════════════════════════════════════════════════════
   R177 · HERO TRUST ROW — visual refinement
   The reassurance tier reads as a small instrument readout: 4.9 and 200+
   are the two bright data points, their labels stay quiet, and the COA
   path is the lone teal action. A touch more air above lets the tier
   breathe under the CTA without detaching from it.
   ════════════════════════════════════════════════════════════ */
/* more air between the action row and the reassurance tier */
html body #hero.r159 .hero-cta-r154{ gap:18px !important; }
/* proof count (200+) becomes a bright data point; its label stays dim */
html body #hero.r159 .htr-sub .htr-count{
    color:#dedcd5 !important; font-weight:700 !important; letter-spacing:.01em !important;
}
/* the separating middot is the quietest mark in the line */
html body #hero.r159 .htr-sub .htr-dot{ color:#6f6d68 !important; margin:0 1px !important; }
/* star sits a hair lower so it optically centers with the 4.9 cap-height */
html body #hero.r159 .htr-rating i{ position:relative !important; top:.5px !important; }

/* ════════════════════════════════════════════════════════════
   R179 · HERO TRUST ROW — gentle left nudge
   Owner preference: don't fully indent the row to the button text; just
   add a small space so the ★ reads as related to the Browse pill without
   detaching from the column. 14px = a couple of optical spaces, landing
   the star partway between the column edge (0) and the pill text (~31).
   Desktop only; mobile stays flush with the column.
   ════════════════════════════════════════════════════════════ */
html body #hero.r159 .hero-trust-row{ padding-left:7px !important; margin-top:5px !important; }
@media (max-width:768px){
    html body #hero.r159 .hero-trust-row{ padding-left:0 !important; }
}

/* ════════════════════════════════════════════════════════════
   R180 · HERO — DARK-NO-TRIANGLES (REVERSIBLE TOGGLE)
   Owner wants the busy green "triangle/lights" ambiance gone, but kept
   as a RICH graded black: the soft radial glow/vignette (.hero-bg) and
   the cursor spotlight (.hero-spotlight) stay so the vials feel lit and
   grounded — not floating on dead-flat #000.
   TO FULLY RESTORE THE ORIGINAL: delete this entire R180 block.
   Hidden: molecular-field triangle webp + teal dot grid (.r159-atmos),
   the background vial video, teal gridlines, the 60 floating particle
   dots, the scan sweep. KEPT: .hero-bg glow, .hero-spotlight cursor glow.
   ════════════════════════════════════════════════════════════ */
html body #hero.r159 .r159-hero-video-wrap,
html body #hero.r159 .r159-atmos,
html body #hero.r159 .hero-grid,
html body #hero.r159 #particles,
html body #hero.r159 .cy-scan-sweep{
    display:none !important;
}
/* static graded glow so the scene has depth even before the cursor moves
   (the molecular image that used to provide this is hidden). Soft teal,
   low alpha — a halo behind the vials + a faint one behind the stat. */
html body #hero.r159{
    background-image:
      radial-gradient(58% 48% at 70% 52%, rgba(45,212,191,.075), rgba(6,7,10,0) 70%),
      radial-gradient(50% 42% at 33% 44%, rgba(45,212,191,.035), rgba(6,7,10,0) 72%) !important;
    background-repeat:no-repeat !important;
    background-attachment:scroll !important;
}
/* cursor spotlight a tad softer (R202: dimmed .7 -> .52; R215: .52 -> .3) */
html body #hero.r159 .hero-spotlight{ opacity:.3 !important; }

/* ════════════════════════════════════════════════════════════
   R182 · HERO TEAL SHADER BACKDROP (Three.js vanilla port)
   The animated shader canvas is the new backdrop, sitting at the very
   back (z-index:0). A legibility scrim darkens the left (text) side and
   the bottom so copy and the CTA stay readable over the motion.
   ════════════════════════════════════════════════════════════ */
html body #hero.r159 .hero-shader{
    position:absolute !important; inset:0 !important; z-index:0 !important;
    overflow:hidden !important; pointer-events:none !important;
    background:#06070A !important;
}
html body #hero.r159 .hero-shader canvas{
    position:absolute !important; inset:0 !important;
    width:100% !important; height:100% !important; display:block !important;
}
/* legibility scrim: stronger on the left where the text column lives,
   plus a soft floor at the bottom; clear over the vials on the right. */
html body #hero.r159 .hero-shader::after{
    content:"" !important; position:absolute !important; inset:0 !important;
    pointer-events:none !important; z-index:1 !important;
    background:
      linear-gradient(90deg, rgba(6,7,10,.80) 0%, rgba(6,7,10,.45) 30%, rgba(6,7,10,0) 58%),
      linear-gradient(0deg, rgba(6,7,10,.55) 0%, rgba(6,7,10,0) 38%) !important;
}
@media (max-width:768px){
    /* mobile: the text sits over the whole width, so veil more evenly */
    html body #hero.r159 .hero-shader::after{
        background:
          linear-gradient(180deg, rgba(6,7,10,.50) 0%, rgba(6,7,10,.30) 45%, rgba(6,7,10,.6) 100%) !important;
    }
}

/* ════════════════════════════════════════════════════════════
   R184 · DIAGNOSTIC CONSOLE — honest distribution axis (Direction B)
   The batch ledger becomes a zoomed 99.0–100.0 position plot: each batch
   is a dot that settles at its true spot in the window, with a shared
   mean line at 99.62. Six near-identical purities now read as a tight,
   high, consistent cluster instead of six full bars.
   ════════════════════════════════════════════════════════════ */
/* R187 · axis header — shares the row grid so the scale aligns with the track */
html body .quality-section.r158-room .r158-led-axis{
    display:grid; grid-template-columns:90px 1fr 64px; gap:16px; align-items:end;
    padding:0 0 12px; border-top:none;
}
html body #main-content .quality-section.r158-room .r158-led-axis{ font-family:'JetBrains Mono',monospace !important; }
html body .quality-section.r158-room .r158-led-axhead{ font-size:9px; letter-spacing:.16em; color:#6f8d87; }
html body .quality-section.r158-room .r158-led-axhead-r{ text-align:right; }
html body .quality-section.r158-room .r158-led-axtrack{ position:relative; height:14px; }
html body .quality-section.r158-room .r158-led-axmin,
html body .quality-section.r158-room .r158-led-axmax{ position:absolute; bottom:0; font-size:9px; color:#6f8d87; }
html body .quality-section.r158-room .r158-led-axmin{ left:0; }
html body .quality-section.r158-room .r158-led-axmax{ right:0; }
/* research-grade marker (~98% -> 60% of the 95–100 window) every lot clears */
html body .quality-section.r158-room .r158-led-axstd{ position:absolute; left:60%; bottom:0; transform:translateX(-50%); font-size:9px; letter-spacing:.10em; color:#86a39d; white-space:nowrap; }
/* purity LEVEL bar: long teal fill on a 95–100 window */
html body .quality-section.r158-room .r158-led-bar{ position:relative; height:14px; background:rgba(255,255,255,.06) !important; border-radius:7px !important; overflow:visible !important; }
html body .quality-section.r158-room .r158-led-bar::after{ content:""; position:absolute; left:60%; top:-4px; bottom:-4px; width:1px; background:rgba(45,212,191,.55); }
html body .quality-section.r158-room .r158-led-bar i{
    position:absolute !important; top:0 !important; left:0 !important; height:100% !important; width:0;
    border-radius:7px !important; background:linear-gradient(90deg, rgba(13,148,136,.85), #2dd4bf) !important;
    box-shadow:0 0 10px var(--r158-glow) !important; transition:width 1s var(--r158-ease) !important;
}
@media (prefers-reduced-motion: reduce){
    html body .quality-section.r158-room .r158-led-bar i{ transition:none !important; }
}

/* ════════════════════════════════════════════════════════════
   R185 · DIAGNOSTIC CONSOLE — scope deck + docked readout + screen glass
   (Direction A). The readout leaves the chart and docks beside the scope
   (no more overlap on the peaks); the assay tabs redraw the scope (JS at
   page foot); a faint scanline + vignette make the scope read as a screen.
   ════════════════════════════════════════════════════════════ */
html body .r158-proof .r159-scope-deck{ display:flex; gap:clamp(16px,2vw,28px); align-items:stretch; }
html body .r158-proof .r159-scope-deck .r158-scope{ flex:1 1 auto; min-width:0; }
html body .r158-proof .r159-scope-dock{
    flex:0 0 clamp(150px,16vw,190px); display:flex; flex-direction:column; justify-content:center; gap:10px;
    padding-left:clamp(14px,1.6vw,22px); border-left:1px solid rgba(13,148,136,.22);
}
/* readout now lives in the dock — drop the absolute positioning */
html body .quality-section.r158-room .r159-scope-dock .r158-scope-readout{ position:static !important; top:auto !important; right:auto !important; text-align:left !important; }
html body #main-content .r158-proof .r159-scope-dock .r158-scope-num{ font-size:clamp(38px,4.4vw,58px) !important; }
html body #main-content .r158-proof .r159-scope-dock .r158-scope-unit{ margin-left:0 !important; display:block; margin-top:4px; }
/* live indicator */
html body #main-content .r158-proof .r159-dock-live{
    font-family:'JetBrains Mono',monospace !important; font-size:9px; letter-spacing:.16em; color:#7f9c97;
    display:inline-flex; align-items:center; gap:7px;
}
html body .r158-proof .r159-dock-dot{ width:6px; height:6px; border-radius:50%; background:#2dd4bf; box-shadow:0 0 0 0 rgba(45,212,191,.5); animation:r185-dot 2.6s ease-out infinite; }
@keyframes r185-dot{ 0%{box-shadow:0 0 0 0 rgba(45,212,191,.5);} 70%{box-shadow:0 0 0 6px rgba(45,212,191,0);} 100%{box-shadow:0 0 0 0 rgba(45,212,191,0);} }
/* screen glass: faint scanlines + inner vignette */
html body .r158-proof .r158-scope{ position:relative; }
html body .r158-proof .r158-scope::after{
    content:""; position:absolute; inset:0; pointer-events:none; z-index:2; border-radius:inherit;
    background:
      repeating-linear-gradient(0deg, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.09) 2px 3px),
      radial-gradient(120% 90% at 50% 38%, rgba(0,0,0,0) 56%, rgba(0,0,0,.34) 100%);
}
@media (max-width:768px){
    html body .r158-proof .r159-scope-deck{ flex-direction:column; gap:14px; }
    html body .r158-proof .r159-scope-dock{ flex:none; border-left:none; padding-left:0; border-top:1px solid rgba(13,148,136,.22); padding-top:14px; flex-direction:row; align-items:baseline; gap:16px; }
}
@media (prefers-reduced-motion: reduce){ html body .r158-proof .r159-dock-dot{ animation:none !important; } }
/* RT peak labels only correspond to the purity trace — hide on other channels */
html body .r158-proof .r158-scope.r185-nolabels .r159-peak-label{ opacity:0; transition:opacity .25s ease; }
html body .r158-proof .r158-scope .r159-peak-label{ transition:opacity .25s ease; }

/* R186 specimen plate removed per owner preference (image not a fit). */

/* ════════════════════════════════════════════════════════════
   R188 · CHROMATOGRAM ENGINE — realistic HPLC trace
   Glowing stroke with a gradient area fill, one-shot dash-draw on reveal
   (overrides the old infinite animation), integration marks + RT/area
   labels that fade in after the draw. Built from sampled gaussian peaks
   in the inline engine at the page foot.
   ════════════════════════════════════════════════════════════ */
html body .r158-proof .r158-scope-trace{
    fill:none !important; stroke:#2dd4bf !important; stroke-width:2.3 !important;
    stroke-linejoin:round !important; stroke-linecap:round !important;
    filter:url(#r188-glow) drop-shadow(0 0 3px rgba(45,212,191,.5)) !important;
    stroke-dasharray:2400 !important; stroke-dashoffset:2400; animation:none !important;
    transition:stroke-dashoffset 1.7s var(--r158-ease, cubic-bezier(.16,1,.3,1)) !important;
}
html body .r158-proof .r158-scope-fill{ stroke:none; fill:url(#r188-fill-grad); opacity:0; transition:opacity 1s ease .25s; }
html body .r158-proof .r158-scope.is-drawn .r158-scope-fill{ opacity:1; }
/* marks (RT/area labels + integration) fade in after the trace draws */
html body .r158-proof .r159-scope-marks .r188-lbl,
html body .r158-proof .r159-scope-marks .r188-drop,
html body .r158-proof .r159-scope-marks .r188-tick{ opacity:0; transition:opacity .5s ease .55s; }
html body .r158-proof .r158-scope.is-drawn .r159-scope-marks .r188-lbl,
html body .r158-proof .r158-scope.is-drawn .r159-scope-marks .r188-drop,
html body .r158-proof .r158-scope.is-drawn .r159-scope-marks .r188-tick{ opacity:1; }
html body #main-content .r158-proof .r188-lbl{ font-family:'JetBrains Mono',monospace !important; font-size:8.5px; letter-spacing:.03em; fill:#7f9c97; text-anchor:middle; }
html body .r158-proof .r188-lbl-main{ fill:#dcefea; }
html body .r158-proof .r188-lbl-area{ fill:#5eead4; }
html body .r158-proof .r188-drop{ stroke:rgba(45,212,191,.45); stroke-width:1; stroke-dasharray:2 3; }
html body .r158-proof .r188-tick{ stroke:rgba(45,212,191,.55); stroke-width:1; }
@media (prefers-reduced-motion: reduce){
    html body .r158-proof .r158-scope-trace{ transition:none !important; stroke-dashoffset:0 !important; }
    html body .r158-proof .r158-scope-fill{ transition:none; }
    html body .r158-proof .r159-scope-marks .r188-lbl,
    html body .r158-proof .r159-scope-marks .r188-drop,
    html body .r158-proof .r159-scope-marks .r188-tick{ transition:none; }
}

/* ════════════════════════════════════════════════════════════
   R189 · CONSOLE LEDGER — full "composition" purity bars (0–100)
   Bars run to true purity so every lot reads essentially full; the
   hairline remainder IS the trace impurity (a selling point, not a gap).
   The research-grade reference line is retired.
   ════════════════════════════════════════════════════════════ */
html body .quality-section.r158-room .r158-led-bar::after{ display:none !important; }
/* a hint of warmth on the unfilled remainder so the tiny "impurity" sliver
   reads as residual, not an empty bar */
html body .quality-section.r158-room .r158-led-bar{ background:rgba(232,180,120,.10) !important; }
html body #main-content .quality-section.r158-room .r158-led-cap{
    font-family:'JetBrains Mono',monospace !important; font-size:10px !important; line-height:1.5 !important;
    color:#7f8d8a !important; margin:16px 0 0 !important; max-width:560px !important;
}
/* R190 · plain-language chromatogram key */
html body #main-content .r158-proof .r188-scope-cap{
    font-family:'Inter',sans-serif !important; font-size:13px !important; line-height:1.55 !important;
    color:#a9bdb8 !important; margin:14px 0 0 !important; max-width:620px !important;
}
html body #main-content .r158-proof .r188-scope-cap strong{ color:#5eead4 !important; font-weight:600 !important; }

/* ════════════════════════════════════════════════════════════
   R191 · DIAGNOSTIC CONSOLE REMODEL — clean single-peak chromatogram +
   premium purity bars. One product peak (impurities removed); refined
   lot bars with a glowing leading node + ✓; clean LOT/PURITY header;
   softer scan line. (impeccable pass: cut over-explaining, kill em-dashes,
   break the identical-bar monotony with a premium treatment.)
   ════════════════════════════════════════════════════════════ */
/* widen the value column for "99.96 ✓"; align header to it */
html body .quality-section.r158-room .r158-led-row,
html body .quality-section.r158-room .r158-led-axis{ grid-template-columns:84px 1fr 84px !important; }
/* neutral track (no impurity framing anymore) */
html body .quality-section.r158-room .r158-led-bar{ background:rgba(255,255,255,.05) !important; height:13px !important; }
/* premium fill: brighter gradient + a glowing node at the leading edge */
html body .quality-section.r158-room .r158-led-bar i{
    background:linear-gradient(90deg, rgba(13,148,136,.7) 0%, #2dd4bf 78%, #5eead4 100%) !important;
    box-shadow:0 0 12px rgba(45,212,191,.5) !important; overflow:visible !important;
}
html body .quality-section.r158-room .r158-led-bar i::after{
    content:"" !important; position:absolute !important; right:-1px !important; top:50% !important;
    width:7px !important; height:7px !important; border-radius:50% !important; background:#d6faf3 !important;
    box-shadow:0 0 10px 1px rgba(94,234,212,.8) !important; transform:translateY(-50%) !important; display:block !important;
}
/* verified check after each lot's value */
html body #main-content .quality-section.r158-room .r158-led-ok{ color:#2dd4bf !important; margin-left:8px !important; font-size:11px !important; font-weight:700 !important; }
/* softer, more elegant scan line */
html body .quality-section.r158-room .r158-scope-scan{ stroke:rgba(45,212,191,.28) !important; stroke-width:1 !important; }
/* the explainer captions: calmer, tighter */
html body #main-content .quality-section.r158-room .r158-led-cap{ color:#6f8d8a !important; max-width:520px !important; }
/* mobile: tighten id/value columns so the purity bar keeps presence */
@media (max-width:600px){
    html body .quality-section.r158-room .r158-led-row,
    html body .quality-section.r158-room .r158-led-axis{ grid-template-columns:58px 1fr 70px !important; gap:12px !important; }
}

/* ════════════════════════════════════════════════════════════
   R192 · READOUT DOCK — "99.62%" reads as one figure, a clean uppercase
   label below; one-line chromatogram caption; ledger caption removed.
   ════════════════════════════════════════════════════════════ */
html body #main-content .r158-proof .r159-scope-dock .r158-scope-num{ line-height:1 !important; letter-spacing:-.02em !important; }
html body #main-content .r158-proof .r159-scope-dock .r158-scope-suffix{
    font-family:'Geist', sans-serif !important; font-size:clamp(20px,2.2vw,28px) !important; font-weight:600 !important;
    color:#5eead4 !important; margin-left:4px !important; letter-spacing:0 !important; vertical-align:baseline !important;
}
html body #main-content .r158-proof .r159-scope-dock .r158-scope-unit{
    display:block !important; margin:10px 0 0 0 !important; vertical-align:baseline !important;
    font-family:'JetBrains Mono', monospace !important; font-size:11px !important; font-weight:500 !important;
    letter-spacing:.16em !important; text-transform:uppercase !important; color:#a4bcb6 !important;
}
/* one-line chromatogram caption on desktop (wraps on mobile) */
html body #main-content .r158-proof .r188-scope-cap{ max-width:none !important; white-space:nowrap !important; }
@media (max-width:768px){ html body #main-content .r158-proof .r188-scope-cap{ white-space:normal !important; } }

/* ════════════════════════════════════════════════════════════
   R193 · CHROMATOGRAM — fix load glitch + readable label + richer look
   • Scan line sweeps ONCE on draw (was an infinite translateX snap-back =
     the "side-to-side" glitch).
   • Peak label is crisp HTML in a small chip (SVG text was x-stretched by
     preserveAspectRatio:none and unreadable).
   • Trace a touch thicker for presence.
   ════════════════════════════════════════════════════════════ */
/* (1) one-shot scan sweep synced to the trace draw */
html body .quality-section.r158-room .r158-scope-scan{ animation:none !important; opacity:0 !important; }
html body .r158-proof .r158-scope.is-drawn .r158-scope-scan{
    animation:r193-scan 1.7s var(--r158-ease, cubic-bezier(.16,1,.3,1)) forwards !important;
}
@keyframes r193-scan{ 0%{ transform:translateX(0); opacity:0; } 12%{ opacity:.5; } 88%{ opacity:.5; } 100%{ transform:translateX(1000px); opacity:0; } }
/* (2) crisp HTML peak label chip, centered above the peak, fades in on draw */
html body .r158-proof .r158-scope-peak{
    position:absolute !important; left:50% !important; top:10px !important; transform:translateX(-50%) !important;
    z-index:3 !important; pointer-events:none !important; display:inline-flex !important; align-items:baseline !important;
    gap:8px !important; white-space:nowrap !important; padding:4px 12px !important; border-radius:8px !important;
    background:rgba(6,7,10,.6) !important; border:1px solid rgba(45,212,191,.22) !important;
    opacity:0 !important; transition:opacity .5s ease .6s !important;
}
html body .r158-proof .r158-scope.is-drawn .r158-scope-peak{ opacity:1 !important; }
html body #main-content .r158-proof .rsp-name{ font-family:'JetBrains Mono', monospace !important; font-size:9px !important; letter-spacing:.16em !important; color:#8aa6a0 !important; }
html body #main-content .r158-proof .rsp-val{ font-family:'Geist', sans-serif !important; font-size:14px !important; font-weight:700 !important; color:#5eead4 !important; letter-spacing:.01em !important; }
/* (3) trace presence */
html body .r158-proof .r158-scope-trace{ stroke-width:2.6 !important; }
@media (prefers-reduced-motion: reduce){
    html body .r158-proof .r158-scope-peak{ transition:none !important; opacity:1 !important; }
    html body .r158-proof .r158-scope.is-drawn .r158-scope-scan{ animation:none !important; opacity:0 !important; }
}

/* ════════════════════════════════════════════════════════════
   R194 · CHROMATOGRAM X-AXIS — crisp HTML strip.
   The "0.0 / 3.0 / min" labels were SVG <text> inside a
   preserveAspectRatio:none viewBox, so they were horizontally
   stretched (same defect R193 fixed for the peak label). Moved to
   an HTML flex row pinned to the baseline of the scope.
   ════════════════════════════════════════════════════════════ */
html body .r158-proof .r158-scope-axis{
    position:absolute !important; left:14px !important; right:14px !important; bottom:8px !important;
    z-index:2 !important; pointer-events:none !important;
    display:flex !important; justify-content:space-between !important; align-items:baseline !important;
}
html body #main-content .r158-proof .r158-scope-axis span{
    font-family:'JetBrains Mono', monospace !important; font-size:9px !important; font-weight:500 !important;
    letter-spacing:.12em !important; color:#5b736f !important; line-height:1 !important;
}

/* ════════════════════════════════════════════════════════════
   R195 · SPECTRAL — diagnostic console remodel
   The chromatogram reads like a real UV-Vis detector well with layered
   depth (spectral wash, peak bloom, lit baseline, drifting photons), a
   detector beam that paints the trace once on reveal, and a glowing apex
   marker that pulses with the readout. Plus root-level count-up shake fix
   (tabular figures + contain), luminous purity bars, tightened micro-
   interactions. Motion = transform/opacity only, custom easing, full
   reduced-motion fallbacks. Decorative layers are aria-hidden.
   ════════════════════════════════════════════════════════════ */
:root{ --r195-ease:cubic-bezier(.16,1,.3,1); --r195-ease-out:cubic-bezier(.23,1,.32,1); }

/* the instrument well: deepen + isolate the stacking context (keeps base grid) */
html body .r158-proof .r158-scope{
    background-color:#070a0f !important;
    border-color:rgba(45,212,191,.24) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04), inset 0 0 70px rgba(0,0,0,.55), 0 24px 60px -34px rgba(0,0,0,.85) !important;
    isolation:isolate;
}

/* plane 0 · spectral wash (faint UV-Vis band along the baseline) */
html body .r158-proof .r195-wash{
    position:absolute; inset:0; z-index:0; pointer-events:none;
    background:linear-gradient(90deg, rgba(139,92,246,.05) 0%, rgba(45,212,191,.06) 42%, rgba(94,234,212,.05) 62%, rgba(251,191,36,.04) 84%, transparent 100%);
    -webkit-mask-image:linear-gradient(180deg,transparent 38%,#000 100%);
            mask-image:linear-gradient(180deg,transparent 38%,#000 100%);
    opacity:.55;
}
/* plane 0 · teal bloom behind the peak */
html body .r158-proof .r195-aura{
    position:absolute; left:50%; top:38%; width:58%; height:130%; z-index:0;
    transform:translate(-50%,-50%); pointer-events:none;
    background:radial-gradient(closest-side, rgba(45,212,191,.20), rgba(45,212,191,.06) 52%, transparent 74%);
    filter:blur(10px); opacity:.5; transition:opacity 1.1s ease .2s;
}
html body .r158-proof .r158-scope.is-drawn .r195-aura{ opacity:1; }
/* plane 0 · lit baseline the trace sits on */
html body .r158-proof .r195-floor{
    position:absolute; left:0; right:0; bottom:14%; height:1px; z-index:0; pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(45,212,191,.45) 18%,rgba(94,234,212,.6) 50%,rgba(45,212,191,.45) 82%,transparent);
    box-shadow:0 0 12px rgba(45,212,191,.4); opacity:0; transition:opacity .9s ease .35s;
}
html body .r158-proof .r158-scope.is-drawn .r195-floor{ opacity:1; }
/* plane 0 · drifting photon motes */
html body .r158-proof .r195-motes{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
html body .r158-proof .r195-motes i{
    position:absolute; bottom:18%; width:3px; height:3px; border-radius:50%;
    background:rgba(94,234,212,.7); box-shadow:0 0 6px 1px rgba(94,234,212,.5); opacity:0;
    animation:r195-drift 7s var(--r195-ease) infinite;
}
html body .r158-proof .r195-motes i:nth-child(1){ left:16%; animation-delay:0s;   animation-duration:7.5s; }
html body .r158-proof .r195-motes i:nth-child(2){ left:34%; animation-delay:1.4s; animation-duration:8.4s; }
html body .r158-proof .r195-motes i:nth-child(3){ left:48%; animation-delay:2.8s; animation-duration:6.8s; }
html body .r158-proof .r195-motes i:nth-child(4){ left:62%; animation-delay:.8s;  animation-duration:9s; }
html body .r158-proof .r195-motes i:nth-child(5){ left:77%; animation-delay:3.4s; animation-duration:7.9s; }
html body .r158-proof .r195-motes i:nth-child(6){ left:89%; animation-delay:2s;   animation-duration:8.8s; }
@keyframes r195-drift{ 0%{ transform:translateY(0) translateX(0); opacity:0; } 12%{ opacity:.85; } 80%{ opacity:.4; } 100%{ transform:translateY(-120px) translateX(10px); opacity:0; } }

/* plane 2 · detector beam — sweeps once on reveal, painting the trace */
html body .r158-proof .r195-beam{
    position:absolute; top:0; bottom:0; left:0; width:96px; z-index:2; pointer-events:none;
    background:linear-gradient(90deg, transparent, rgba(94,234,212,.05) 32%, rgba(94,234,212,.16) 50%, rgba(94,234,212,.05) 68%, transparent);
    opacity:0; transform:translateX(-140px); will-change:transform;
}
html body .r158-proof .r195-beam::after{
    content:""; position:absolute; top:6%; bottom:6%; right:40px; width:2px;
    background:linear-gradient(180deg,transparent,rgba(140,255,238,.9),transparent);
    box-shadow:0 0 10px 2px rgba(94,234,212,.7);
}
html body .r158-proof .r158-scope.is-drawn .r195-beam{ animation:r195-beam 1.7s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes r195-beam{ 0%{ transform:translateX(-140px); opacity:0; } 8%{ opacity:1; } 90%{ opacity:1; } 100%{ transform:translateX(1240px); opacity:0; } }

/* plane 3 · glowing apex marker (engine positions it per channel) */
html body .r158-proof .r195-apex{
    position:absolute; left:50%; top:20%; z-index:3; width:0; height:0; pointer-events:none;
    opacity:0; transition:opacity .5s ease .95s;
}
html body .r158-proof .r158-scope.is-drawn .r195-apex{ opacity:1; }
html body .r158-proof .r195-apex-core{
    position:absolute; left:0; top:0; width:9px; height:9px; margin:-4.5px 0 0 -4.5px; border-radius:50%;
    background:#eafff9; box-shadow:0 0 8px 2px rgba(94,234,212,.85), 0 0 20px 7px rgba(45,212,191,.4);
    animation:r195-apex-pulse 2.6s ease-in-out 1.1s infinite;
}
html body .r158-proof .r195-apex-core::after{
    content:""; position:absolute; inset:-3px; border-radius:50%; border:1px solid rgba(94,234,212,.55);
    animation:r195-apex-ring 2.6s ease-out 1.1s infinite;
}
@keyframes r195-apex-pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.22); } }
@keyframes r195-apex-ring{ 0%{ transform:scale(.6); opacity:.8; } 70%{ opacity:0; } 100%{ transform:scale(2.6); opacity:0; } }

/* keep overlay labels above the beam */
html body .r158-proof .r159-scope-channel,
html body .r158-proof .r158-scope-axis{ z-index:4 !important; }

/* READOUT — root-level count-up shake fix: tabular figures lock digit
   width, reserved min-width anchors the suffix, contain isolates repaint. */
html body #main-content .r158-proof .r159-scope-dock .r158-scope-readout{ contain:layout paint; }
html body #main-content .r158-proof .r159-scope-dock .r158-scope-num{
    font-variant-numeric:tabular-nums !important; font-feature-settings:"tnum" 1 !important;
    display:inline-block; min-width:4.6ch; text-align:left;
}

/* PURITY LEDGER — luminous, confident bars; spectral fill + bright cap;
   tabular % values; calm glow-on-hover (no layout shift). */
html body .r158-proof .r158-led-bar{ height:7px !important; background:rgba(255,255,255,.05) !important; overflow:visible !important; }
html body .r158-proof .r158-led-bar i{
    background:linear-gradient(90deg,#0f766e,#14b8a6 38%,#2dd4bf 72%,#5eead4) !important;
    box-shadow:0 0 10px rgba(45,212,191,.45), inset 0 1px 0 rgba(255,255,255,.25) !important;
    border-radius:6px !important; position:relative;
    transition:width 1.1s cubic-bezier(.16,1,.3,1) !important;
}
html body .r158-proof .r158-led-bar i::after{
    content:""; position:absolute; right:-1px; top:50%; transform:translateY(-50%);
    width:7px; height:7px; border-radius:50%; background:#caffef; box-shadow:0 0 8px 2px rgba(94,234,212,.8); opacity:.9;
}
html body #main-content .r158-proof .r158-led-pct{ font-variant-numeric:tabular-nums !important; }
html body .r158-proof .r158-led-row{ transition:background-color .25s ease; border-radius:6px; }
@media (hover:hover) and (pointer:fine){
    html body .r158-proof .r158-led-row:hover{ background-color:rgba(45,212,191,.05); }
    html body .r158-proof .r158-led-row:hover .r158-led-bar i{ box-shadow:0 0 16px rgba(45,212,191,.7), inset 0 1px 0 rgba(255,255,255,.3) !important; }
    html body #main-content .r158-proof .r158-led-row:hover .r158-led-pct{ color:#7af0dc !important; }
}

/* assay tabs · press + hover micro-interactions */
html body .r158-proof .quality-tab{ transition:transform .16s var(--r195-ease-out), background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease !important; }
html body .r158-proof .quality-tab:active{ transform:scale(.97); }
html body .r158-proof .quality-tab.active{ box-shadow:0 0 18px rgba(45,212,191,.35) !important; }
@media (hover:hover) and (pointer:fine){
    html body .r158-proof .quality-tab:not(.active):hover{ border-color:rgba(45,212,191,.5) !important; color:#cdeae5 !important; }
}

/* reduced motion: depth stays, movement stops */
@media (prefers-reduced-motion: reduce){
    html body .r158-proof .r195-motes{ display:none !important; }
    html body .r158-proof .r195-beam{ display:none !important; }
    html body .r158-proof .r195-aura,
    html body .r158-proof .r195-floor{ opacity:1 !important; transition:none !important; }
    html body .r158-proof .r195-apex{ opacity:1 !important; transition:none !important; }
    html body .r158-proof .r195-apex-core{ animation:none !important; }
    html body .r158-proof .r195-apex-core::after{ animation:none !important; display:none !important; }
}

/* mobile parity */
@media (max-width:768px){
    html body .r158-proof .r195-beam{ width:70px; }
    html body .r158-proof .r195-aura{ width:74%; }
    html body #main-content .r158-proof .r159-scope-dock .r158-scope-num{ min-width:4.4ch; }
}

/* ════════════════════════════════════════════════════════════
   R196 · QUIETER — "less AI", instrument-grade pass
   • The live readout reads like a real detector display: JetBrains Mono
     (our data typeface), inherently tabular → % stays on the same line,
     no count-up shake. min-width reserves the 5-char max so the suffix
     never moves. (Informed by the 21st.dev instrument-display idiom —
     adapted to vanilla, not copied.)
   • Restraint: glow dialed back ~35%, the two biggest AI-dashboard tells
     removed (per-bar glowing cap dots + apex sonar ring), fewer/quieter
     photon motes, thinner trace, gentler apex pulse.
   ════════════════════════════════════════════════════════════ */

/* readout · instrument display, suffix on the same baseline */
html body #main-content .r158-proof .r159-scope-dock .r158-scope-readout{ white-space:nowrap; }
html body #main-content .r158-proof .r159-scope-dock .r158-scope-num{
    font-family:'JetBrains Mono', monospace !important; font-weight:600 !important;
    font-size:clamp(30px,3.2vw,44px) !important; letter-spacing:-.01em !important;
    color:#eef6f4 !important; display:inline-block; min-width:5ch; text-align:left;
}
html body #main-content .r158-proof .r159-scope-dock .r158-scope-suffix{
    font-family:'JetBrains Mono', monospace !important; font-weight:500 !important;
    font-size:clamp(14px,1.4vw,18px) !important; color:#46b3a4 !important;
    margin-left:5px !important; letter-spacing:0 !important;
}

/* restraint · calmer instrument well + layers */
html body .r158-proof .r158-scope{ box-shadow:inset 0 1px 0 rgba(255,255,255,.03), inset 0 0 46px rgba(0,0,0,.5), 0 18px 42px -32px rgba(0,0,0,.8) !important; }
html body .r158-proof .r195-aura{ opacity:.3 !important; }
html body .r158-proof .r158-scope.is-drawn .r195-aura{ opacity:.55 !important; }
html body .r158-proof .r195-floor{ background:linear-gradient(90deg,transparent,rgba(45,212,191,.28) 20%,rgba(94,234,212,.4) 50%,rgba(45,212,191,.28) 80%,transparent) !important; box-shadow:0 0 8px rgba(45,212,191,.25) !important; }
html body .r158-proof .r195-wash{ opacity:.3 !important; background:linear-gradient(90deg, rgba(94,234,212,.035), rgba(45,212,191,.05) 50%, rgba(94,234,212,.03) 80%, transparent) !important; }
html body .r158-proof .r195-motes i{ background:rgba(94,234,212,.4) !important; box-shadow:0 0 5px rgba(94,234,212,.3) !important; }
html body .r158-proof .r195-motes i:nth-child(5),
html body .r158-proof .r195-motes i:nth-child(6){ display:none !important; }
html body .r158-proof .r158-scope-trace{ stroke-width:2.1 !important; }

/* restraint · purity bars lose the gimmicky glowing cap dot */
html body .r158-proof .r158-led-bar i{ box-shadow:0 0 6px rgba(45,212,191,.28), inset 0 1px 0 rgba(255,255,255,.16) !important; }
html body .r158-proof .r158-led-bar i::after{ display:none !important; }

/* restraint · apex loses the sonar ring, gentler pulse */
html body .r158-proof .r195-apex-core{
    width:8px !important; height:8px !important;
    box-shadow:0 0 6px 1px rgba(94,234,212,.55), 0 0 14px 4px rgba(45,212,191,.22) !important;
    animation:r196-apex-pulse 3s ease-in-out 1.1s infinite !important;
}
html body .r158-proof .r195-apex-core::after{ display:none !important; }
@keyframes r196-apex-pulse{ 0%,100%{ transform:scale(1); opacity:.92; } 50%{ transform:scale(1.12); opacity:1; } }

/* restraint · calmer active-tab glow */
html body .r158-proof .quality-tab.active{ box-shadow:0 0 10px rgba(45,212,191,.2) !important; }

@media (prefers-reduced-motion: reduce){ html body .r158-proof .r195-apex-core{ animation:none !important; } }
@media (max-width:768px){ html body #main-content .r158-proof .r159-scope-dock .r158-scope-num{ min-width:5ch; font-size:clamp(28px,7vw,40px) !important; } }

/* ════════════════════════════════════════════════════════════
   R197 · BALANCE — fix the broken decimal, lighten the bars, kill the
   dead right-hand space by splitting the lower zone into two columns.
   • Mono gave the decimal point a full-width cell ("99 . 62"). Switch the
     readout to the display face with tabular figures: tight, even digits,
     a natural narrow period, suffix on the same baseline, still no shake.
   • Purity bars: thinner + calmer so they read as measurements, not
     loading bars.
   • Lower zone → 2 columns: live batch ledger (left) + assay channel
     selector & detail (right), so the console is balanced, not left-heavy.
   ════════════════════════════════════════════════════════════ */

/* readout · display face, tabular figures, no decimal gap */
html body #main-content .r158-proof .r159-scope-dock .r158-scope-num{
    font-family:'Bricolage Grotesque', sans-serif !important; font-weight:700 !important;
    font-size:clamp(36px,4vw,52px) !important; letter-spacing:-.02em !important;
    font-variant-numeric:tabular-nums !important; font-feature-settings:"tnum" 1 !important;
    color:#f0f7f5 !important; display:inline-block; min-width:4ch; text-align:left;
}
html body #main-content .r158-proof .r159-scope-dock .r158-scope-suffix{
    font-family:'Bricolage Grotesque', sans-serif !important; font-weight:600 !important;
    font-size:clamp(16px,1.6vw,22px) !important; color:#46b3a4 !important; margin-left:4px !important;
}
@media (max-width:768px){ html body #main-content .r158-proof .r159-scope-dock .r158-scope-num{ min-width:4ch; font-size:clamp(32px,8vw,44px) !important; } }

/* purity bars · thinner + calmer (read as measurements, not progress) */
html body .r158-proof .r158-led-bar{ height:5px !important; }
html body .r158-proof .r158-led-bar i{
    background:linear-gradient(90deg,#0e6b63,#16a394 42%,#2dd4bf 80%) !important;
    box-shadow:0 0 4px rgba(45,212,191,.2), inset 0 1px 0 rgba(255,255,255,.1) !important;
}

/* lower zone · 2-column rebalance reverted — the .quality-panel component
   has its own internal full-width stat|body split that broke when forced
   into a narrow column. Single-column flow is clean; the open space on the
   right reads as breathing room, not a defect. */

/* ════════════════════════════════════════════════════════════
   R198 · HERO CTA — a touch calmer. Glow down ~15% (half of the
   ~30% I'd have reached for), teal down ~5% (same halved amount).
   The visible glow is driven by the r166 breathe animation, so the
   keyframes are redefined here (last definition wins) alongside the
   resting + hover shadows for reduced-motion users.
   ════════════════════════════════════════════════════════════ */
/* R198-rev: split the difference — exactly halfway between the original
   and the dialed-back R198 (color + glow averaged). */
html body #hero.r159 .hero-cta-inline{
    background:linear-gradient(135deg,#30ccbc 0%,#2ac4b2 42%,#17af9c 100%) !important;
    box-shadow:0 10px 30px rgba(20,184,166,.315), 0 1px 0 rgba(255,255,255,.25) inset !important;
}
html body #hero.r159 .hero-cta-inline:hover{
    background:linear-gradient(135deg,#57dac5 0%,#30ccbc 50%,#20b9a6 100%) !important;
    box-shadow:0 16px 40px rgba(20,184,166,.425), 0 1px 0 rgba(255,255,255,.35) inset !important;
}
@keyframes r166-cta-breathe{
    0%,100%{ box-shadow:0 12px 30px rgba(20,184,166,.28), 0 1px 0 rgba(255,255,255,.25) inset; }
    50%    { box-shadow:0 16px 40px rgba(20,184,166,.425), 0 1px 0 rgba(255,255,255,.30) inset; }
}

/* ════════════════════════════════════════════════════════════
   R199 · OVERLAY PLOT — the lot section, reborn.
   Every production lot's chromatogram trace superimposed on one axis:
   they bundle tightly into a single bright peak = visual proof of
   batch-to-batch consistency. Compact mono legend carries exact %.
   Built vanilla in bootR158 (reuses the engine's gaussian math).
   ════════════════════════════════════════════════════════════ */
html body #main-content .r158-proof #r158-ledger{ display:block !important; max-width:720px !important; margin-top:30px !important; }

html body #main-content .r158-proof .r199-ov-head{ display:flex; align-items:baseline; gap:12px; margin-bottom:4px; }
html body #main-content .r158-proof .r199-ov-kick{ font-family:'JetBrains Mono',monospace !important; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:#2dd4bf; }
html body #main-content .r158-proof .r199-ov-sub{ font-family:'JetBrains Mono',monospace !important; font-size:11px; letter-spacing:.03em; color:#7f9c97; }

html body .r158-proof .r199-ov-plot{ position:relative; height:170px; margin:6px 0 18px; }
html body .r158-proof .r199-ov-svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
html body .r158-proof .r199-ov-base{ stroke:rgba(45,212,191,.18); stroke-width:1; }
html body .r158-proof .r199-ov-trace{
    fill:none; stroke:#2dd4bf; stroke-width:1.5; stroke-linejoin:round; stroke-linecap:round;
    opacity:.42; filter:drop-shadow(0 0 2px rgba(45,212,191,.4));
    stroke-dasharray:1000; stroke-dashoffset:1000;
    transition:stroke-dashoffset 1.3s cubic-bezier(.16,1,.3,1), opacity .8s ease;
}
html body .r158-proof #r158-ledger.r199-in .r199-ov-trace{ stroke-dashoffset:0; }

html body .r158-proof .r199-ov-legend{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px 18px; }
html body .r158-proof .r199-ov-leg{
    display:flex; align-items:center; gap:8px; padding:5px 0;
    opacity:0; transform:translateY(6px); transition:opacity .5s ease, transform .5s cubic-bezier(.16,1,.3,1);
}
html body .r158-proof #r158-ledger.r199-in .r199-ov-leg{ opacity:1; transform:none; }
html body .r158-proof .r199-ov-sw{ width:14px; height:2px; border-radius:2px; background:#2dd4bf; box-shadow:0 0 4px rgba(45,212,191,.5); flex:none; }
html body #main-content .r158-proof .r199-ov-lot{ font-family:'JetBrains Mono',monospace !important; font-size:11px; font-weight:700; color:#e8f3f0; letter-spacing:.02em; }
html body #main-content .r158-proof .r199-ov-pct{ font-family:'JetBrains Mono',monospace !important; font-size:11px; color:#2dd4bf; margin-left:auto; font-variant-numeric:tabular-nums; }
html body #main-content .r158-proof .r199-ov-ok{ color:#2dd4bf; font-size:10px; flex:none; }

@media (prefers-reduced-motion: reduce){
    html body .r158-proof .r199-ov-trace{ transition:none; stroke-dashoffset:0; }
    html body .r158-proof .r199-ov-leg{ transition:none; opacity:1; transform:none; }
}
@media (max-width:768px){
    html body .r158-proof .r199-ov-legend{ grid-template-columns:repeat(2,1fr); }
    html body .r158-proof .r199-ov-plot{ height:140px; }
}

/* R199-rev · overlay plot — area fill for body + a touch more trace presence. */
html body .r158-proof .r199-ov-fill{ fill:rgba(45,212,191,.06); opacity:0; transition:opacity 1s ease .3s; }
html body .r158-proof #r158-ledger.r199-in .r199-ov-fill{ opacity:1; }
html body .r158-proof .r199-ov-trace{ stroke-width:1.6 !important; opacity:.5 !important; }
@media (prefers-reduced-motion: reduce){ html body .r158-proof .r199-ov-fill{ opacity:1; transition:none; } }

/* ════════════════════════════════════════════════════════════
   R200 · WebGL PARTICLE DETECTOR — canvas + fallback handoff.
   When the engine confirms WebGL it adds .r200-on, which fades the
   particle canvas in and retires the now-redundant SVG signal layers
   (trace, fill, beam, motes). Apex marker + labels + readout stay.
   ════════════════════════════════════════════════════════════ */
html body .r158-proof .r200-canvas{
    position:absolute; inset:0; width:100%; height:100%; z-index:1;
    opacity:0; transition:opacity 1s ease; pointer-events:none; display:block;
}
html body .r158-proof .r158-scope.r200-on .r200-canvas{ opacity:1; }
html body .r158-proof .r158-scope.r200-on .r158-scope-trace,
html body .r158-proof .r158-scope.r200-on .r158-scope-fill,
html body .r158-proof .r158-scope.r200-on .r195-beam,
html body .r158-proof .r158-scope.r200-on .r195-motes{ opacity:0 !important; }
/* the apex marker rides above the particle cloud */
html body .r158-proof .r158-scope.r200-on .r195-apex{ z-index:3; }

/* ════════════════════════════════════════════════════════════
   R201 · PURITY VIALS — flagship peptides as glowing liquid-filled
   vials (fill level = HPLC purity). A living wave meniscus, rising
   bubbles, glass refraction, count-up %. Deliberately a different
   visual language from the particle chromatogram above. Real names +
   live COA purities. Reduced-motion → static filled vials.
   ════════════════════════════════════════════════════════════ */
html body #main-content .r158-proof #r158-ledger{ max-width:none !important; margin-top:34px !important; }

html body #main-content .r158-proof .r201-head{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
html body #main-content .r158-proof .r201-kick{ font-family:'JetBrains Mono',monospace !important; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:#2dd4bf; }
html body #main-content .r158-proof .r201-sub{ font-family:'JetBrains Mono',monospace !important; font-size:11px; letter-spacing:.02em; color:#7f9c97; }

html body .r158-proof .r201-row{ display:flex; justify-content:center; align-items:flex-end; gap:clamp(22px,5vw,68px); flex-wrap:wrap; margin-top:26px; }
html body .r158-proof .r201-vial-cell{
    display:flex; flex-direction:column; align-items:center; gap:15px;
    opacity:0; transform:translateY(16px);
    transition:opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1);
}
html body .r158-proof #r158-ledger.r201-in .r201-vial-cell{ opacity:1; transform:none; }

/* the glass tube */
html body .r158-proof .r201-vial{
    position:relative; width:clamp(80px,9vw,106px); height:clamp(176px,22vw,212px);
    border-radius:18px 18px 42px 42px / 16px 16px 66px 66px;
    background:linear-gradient(180deg, rgba(15,21,28,.55), rgba(6,9,13,.9));
    border:1px solid rgba(45,212,191,.22);
    box-shadow:inset 0 2px 10px rgba(0,0,0,.6), inset 0 0 26px rgba(0,0,0,.45), 0 20px 44px -20px rgba(0,0,0,.85);
    overflow:hidden; transition:transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease, border-color .4s ease;
}
@media (hover:hover) and (pointer:fine){
    html body .r158-proof .r201-vial-cell:hover .r201-vial{
        transform:translateY(-7px); border-color:rgba(45,212,191,.5);
        box-shadow:inset 0 2px 10px rgba(0,0,0,.6), inset 0 0 26px rgba(0,0,0,.45), 0 26px 50px -20px rgba(0,0,0,.85), 0 0 42px rgba(45,212,191,.34);
    }
}
/* calibration mark near the top */
html body .r158-proof .r201-mark{ position:absolute; left:16%; right:16%; top:13%; height:1px; background:rgba(94,234,212,.22); z-index:3; }
/* glass sheen */
html body .r158-proof .r201-glass{
    position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:4;
    background:linear-gradient(102deg, rgba(255,255,255,.13) 0 16%, rgba(255,255,255,0) 30%);
}

/* the luminous liquid */
html body .r158-proof .r201-liquid{
    position:absolute; left:0; right:0; bottom:0; height:0; z-index:1; overflow:visible;
    background:linear-gradient(180deg, #5eead4 0%, #2dd4bf 32%, #14b8a6 72%, #0c6a60 100%);
    box-shadow:0 0 30px rgba(45,212,191,.5), inset 0 0 20px rgba(94,234,212,.35);
    transition:height 1.7s cubic-bezier(.16,1,.3,1);
}
html body .r158-proof #r158-ledger.r201-in .r201-liquid{ height:var(--fill); }
html body .r158-proof .r201-row .r201-vial-cell:nth-child(2) .r201-liquid{ transition-delay:.14s; }
html body .r158-proof .r201-row .r201-vial-cell:nth-child(3) .r201-liquid{ transition-delay:.28s; }

/* wave meniscus */
html body .r158-proof .r201-wave{
    position:absolute; left:0; right:0; top:-7px; height:15px; z-index:2;
    background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='80'%20height='16'%20viewBox='0%200%2080%2016'%3E%3Cpath%20d='M0%208%20q%2020%20-9%2040%200%20t%2040%200%20V16%20H0%20Z'%20fill='%235eead4'/%3E%3C/svg%3E") repeat-x;
    background-size:80px 15px; animation:r201-wave 2.6s linear infinite;
    filter:drop-shadow(0 0 4px rgba(94,234,212,.5)); opacity:.92;
}
html body .r158-proof .r201-wave2{ top:-5px; opacity:.4; animation-duration:4.1s; animation-direction:reverse; }
@keyframes r201-wave{ from{ background-position-x:0; } to{ background-position-x:80px; } }

/* rising bubbles */
html body .r158-proof .r201-bub{
    position:absolute; bottom:8px; width:5px; height:5px; border-radius:50%;
    background:rgba(200,255,247,.6); box-shadow:0 0 5px rgba(94,234,212,.6);
    opacity:0; animation:r201-bub 3.4s ease-in infinite;
}
html body .r158-proof .r201-bub:nth-child(3){ left:32%; animation-delay:.2s; }
html body .r158-proof .r201-bub:nth-child(4){ left:56%; animation-delay:1.4s; animation-duration:4s; }
html body .r158-proof .r201-bub:nth-child(5){ left:73%; animation-delay:2.4s; animation-duration:2.9s; }
@keyframes r201-bub{ 0%{ transform:translateY(0) scale(.5); opacity:0; } 14%{ opacity:.8; } 78%{ opacity:.45; } 100%{ transform:translateY(-110px) scale(1); opacity:0; } }

/* caption */
html body .r158-proof .r201-cap-text{ display:flex; flex-direction:column; align-items:center; gap:3px; }
html body .r158-proof .r201-pct{ display:inline-flex; align-items:baseline; }
html body #main-content .r158-proof .r201-pct-num{ font-family:'Geist',sans-serif !important; font-weight:700 !important; font-size:clamp(22px,2.4vw,30px) !important; color:#eef6f4 !important; font-variant-numeric:tabular-nums !important; letter-spacing:-.01em !important; line-height:1 !important; }
html body #main-content .r158-proof .r201-pct-unit{ font-family:'Geist',sans-serif !important; font-weight:600 !important; font-size:13px !important; color:#46b3a4 !important; margin-left:2px !important; }
html body #main-content .r158-proof .r201-name{ font-family:'Geist',sans-serif !important; font-weight:600 !important; font-size:13px !important; color:#d4ebe6 !important; letter-spacing:.01em !important; }
html body #main-content .r158-proof .r201-tag{ font-family:'JetBrains Mono',monospace !important; font-size:9px !important; letter-spacing:.13em !important; text-transform:uppercase; color:#2dd4bf !important; }

@media (prefers-reduced-motion: reduce){
    html body .r158-proof .r201-vial-cell{ opacity:1; transform:none; transition:none; }
    html body .r158-proof .r201-liquid{ transition:none; }
    html body .r158-proof .r201-wave{ animation:none; }
    html body .r158-proof .r201-bub{ display:none; }
}
@media (max-width:768px){
    html body .r158-proof .r201-row{ gap:18px; }
    html body .r158-proof .r201-vial{ width:clamp(64px,26vw,92px); height:clamp(150px,58vw,196px); }
}

/* ════════════════════════════════════════════════════════════
   R201-rev · UNMISTAKABLE LAB VIAL — a metallic cap, a visible dark GLASS
   tube, luminous liquid at ~83% with real headspace + a curved meniscus,
   and glass reflections. (Brim-full fill read as solid lozenges.) The big
   % below carries the purity; the vial is the product, made beautiful.
   ════════════════════════════════════════════════════════════ */
/* .r201-vial is now a centering wrapper (glass styling moves to .r201-tube) */
html body .r158-proof .r201-vial{
    background:none !important; border:none !important; box-shadow:none !important;
    overflow:visible !important; width:auto !important; height:auto !important;
    display:flex !important; flex-direction:column; align-items:center;
}
@media (hover:hover) and (pointer:fine){
    html body .r158-proof .r201-vial-cell:hover .r201-vial{ transform:none !important; box-shadow:none !important; }
    html body .r158-proof .r201-vial-cell:hover .r201-tube{
        transform:translateY(-7px); border-color:rgba(45,212,191,.5);
        box-shadow:inset 0 2px 10px rgba(0,0,0,.55), inset 0 0 22px rgba(0,0,0,.4), 0 26px 50px -20px rgba(0,0,0,.85), 0 0 42px rgba(45,212,191,.32);
    }
}
/* metallic cap / stopper */
html body .r158-proof .r201-cap{
    position:relative; z-index:5; width:56%; height:16px; margin-bottom:-4px;
    border-radius:7px 7px 4px 4px;
    background:linear-gradient(180deg,#3a4d4b 0%,#243433 55%,#172322 100%);
    border:1px solid rgba(94,234,212,.22);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 2px 6px rgba(0,0,0,.5);
}
html body .r158-proof .r201-cap::after{ content:""; position:absolute; left:18%; right:18%; top:5px; height:1px; background:rgba(94,234,212,.25); }
/* the glass tube */
html body .r158-proof .r201-tube{
    position:relative; width:clamp(80px,9vw,104px); height:clamp(174px,21vw,208px);
    border-radius:11px 11px 40px 40px / 9px 9px 56px 56px;
    background:linear-gradient(180deg, rgba(22,30,36,.5), rgba(8,12,16,.8));
    border:1px solid rgba(124,164,160,.28);
    box-shadow:inset 0 2px 10px rgba(0,0,0,.55), inset 0 0 22px rgba(0,0,0,.4), 0 20px 44px -22px rgba(0,0,0,.85);
    overflow:hidden; transition:transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease, border-color .4s ease;
}
/* open mouth rim */
html body .r158-proof .r201-mouth{
    position:absolute; top:3px; left:10%; right:10%; height:7px; z-index:4; border-radius:50%;
    background:rgba(6,9,13,.7); border:1px solid rgba(150,190,186,.3); box-shadow:inset 0 1px 2px rgba(0,0,0,.6);
}
/* glass cylinder reflections */
html body .r158-proof .r201-tube .r201-glass{
    position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:4;
    background:linear-gradient(95deg, transparent 6%, rgba(255,255,255,.16) 12%, transparent 22%, transparent 78%, rgba(255,255,255,.07) 86%, transparent 92%) !important;
}
/* liquid: ~83% with headspace, luminous teal */
html body .r158-proof .r201-tube .r201-liquid{
    position:absolute; left:0; right:0; bottom:0; height:0 !important; overflow:visible; z-index:1;
    background:linear-gradient(180deg,#5eead4 0%,#2dd4bf 34%,#14b8a6 72%,#0c6a60 100%) !important;
    box-shadow:0 0 26px rgba(45,212,191,.45), inset 0 0 18px rgba(94,234,212,.3);
    transition:height 1.7s cubic-bezier(.16,1,.3,1);
}
html body .r158-proof #r158-ledger.r201-in .r201-tube .r201-liquid{ height:83% !important; }
/* curved meniscus surface */
html body .r158-proof .r201-liquid::after{
    content:""; position:absolute; left:-1px; right:-1px; top:-4px; height:9px; border-radius:50%;
    background:linear-gradient(180deg, rgba(202,255,247,.92), rgba(94,234,212,.25));
    box-shadow:0 0 8px rgba(94,234,212,.5); animation:r201-men 3.4s ease-in-out infinite;
}
@keyframes r201-men{ 0%,100%{ transform:scaleY(1); opacity:.85; } 50%{ transform:scaleY(1.25); opacity:1; } }
/* old flat wave is wrong for a round tube — retire it */
html body .r158-proof .r201-wave{ display:none !important; }
@media (prefers-reduced-motion: reduce){ html body .r158-proof .r201-liquid::after{ animation:none !important; } }

/* ════════════════════════════════════════════════════════════
   R201-rev2 · richer vials — luminous liquid + specular sheen, a teal
   light-pool behind each, crisper glass, brighter meniscus + bubbles,
   a grounding base glow, cap highlight. Gives the flat fills depth + life.
   ════════════════════════════════════════════════════════════ */
/* teal light pool behind each vial */
html body .r158-proof .r201-vial{ position:relative; z-index:0; }
html body .r158-proof .r201-vial::before{
    content:""; position:absolute; left:50%; top:50%; width:188%; height:86%;
    transform:translate(-50%,-50%); border-radius:50%;
    background:radial-gradient(ellipse at center, rgba(45,212,191,.26), rgba(45,212,191,.06) 46%, transparent 66%);
    filter:blur(20px); z-index:-1; pointer-events:none; opacity:0; transition:opacity 1s ease .35s;
}
html body .r158-proof #r158-ledger.r201-in .r201-vial::before{ opacity:1; }
/* grounding glow beneath the tube */
html body .r158-proof .r201-vial::after{
    content:""; position:absolute; left:50%; bottom:-8px; width:64%; height:12px;
    transform:translateX(-50%); border-radius:50%;
    background:radial-gradient(ellipse at center, rgba(45,212,191,.42), transparent 72%);
    filter:blur(5px); z-index:-1; pointer-events:none; opacity:0; transition:opacity 1s ease .45s;
}
html body .r158-proof #r158-ledger.r201-in .r201-vial::after{ opacity:.7; }

/* luminous liquid with depth */
html body .r158-proof .r201-tube .r201-liquid{
    background:linear-gradient(180deg,#84f5e2 0%,#34d9c5 28%,#15a99a 66%,#0a5c53 100%) !important;
    box-shadow:0 0 36px rgba(45,212,191,.55), inset 0 0 26px rgba(94,234,212,.42), inset 0 -14px 22px rgba(8,60,54,.5) !important;
}
/* specular sheen — the curved front catching light */
html body .r158-proof .r201-liquid::before{
    content:""; position:absolute; left:16%; top:6%; width:20%; height:52%; border-radius:50%;
    background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));
    filter:blur(3px); opacity:.55; z-index:2; pointer-events:none;
}
/* brighter meniscus */
html body .r158-proof .r201-liquid::after{
    background:linear-gradient(180deg, rgba(224,255,250,.95), rgba(94,234,212,.3)) !important;
    box-shadow:0 0 10px rgba(150,255,243,.6) !important; height:10px !important;
}
/* crisper glass reflections */
html body .r158-proof .r201-tube .r201-glass{
    background:linear-gradient(95deg, transparent 4%, rgba(255,255,255,.24) 10%, rgba(255,255,255,.05) 16%, transparent 24%, transparent 75%, rgba(255,255,255,.11) 85%, transparent 92%) !important;
}
/* livelier bubbles */
html body .r158-proof .r201-bub{
    width:6px !important; height:6px !important;
    background:rgba(224,255,250,.8) !important; box-shadow:0 0 7px rgba(150,255,243,.8) !important;
}
/* cap metallic highlight */
html body .r158-proof .r201-cap{ background:linear-gradient(180deg,#46605d 0%,#293a39 52%,#16221f 100%) !important; }
html body .r158-proof .r201-cap::before{ content:""; position:absolute; left:16%; top:3px; width:26%; height:4px; border-radius:3px; background:rgba(255,255,255,.22); filter:blur(1px); }

/* ════════════════════════════════════════════════════════════
   R201-rev3 · BIGGER VIAL MOMENT — larger vials on a lit, pulsing
   pedestal, a sloshing liquid surface, drifting caustic light inside,
   and 3D cursor-tilt (wired in bootR158). A real showpiece, not a chip.
   ════════════════════════════════════════════════════════════ */
/* bigger + 3D-ready */
html body .r158-proof .r201-tube{ width:clamp(92px,10vw,118px) !important; height:clamp(200px,24vw,236px) !important; }
html body .r158-proof .r201-cap{ width:54% !important; height:18px !important; }
html body .r158-proof .r201-vial{ transition:transform .3s cubic-bezier(.16,1,.3,1); transform-style:preserve-3d; will-change:transform; }
html body .r158-proof .r201-row{ gap:clamp(28px,6vw,80px) !important; }

/* lit, pulsing pedestal under each vial + a wider light pool */
html body .r158-proof .r201-vial::after{
    width:92% !important; height:18px !important; bottom:-12px !important;
    background:radial-gradient(ellipse at center, rgba(94,234,212,.55), rgba(45,212,191,.18) 45%, transparent 72%) !important;
    filter:blur(7px) !important; animation:r201-ped 4.5s ease-in-out infinite;
}
html body .r158-proof #r158-ledger.r201-in .r201-vial::after{ opacity:.85 !important; }
@keyframes r201-ped{ 0%,100%{ opacity:.6; } 50%{ opacity:1; } }
html body .r158-proof .r201-vial::before{ width:210% !important; height:98% !important; }

/* sloshing liquid surface */
html body .r158-proof .r201-wave{
    display:block !important; position:absolute; left:-25%; right:-25%; top:-9px; height:20px; z-index:3; pointer-events:none;
    background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='90'%20height='20'%20viewBox='0%200%2090%2020'%3E%3Cpath%20d='M0%2010%20q%2022%20-10%2045%200%20t%2045%200%20V20%20H0%20Z'%20fill='%235eead4'/%3E%3C/svg%3E") repeat-x;
    background-size:90px 20px; animation:r201-slosh 3.4s ease-in-out infinite; opacity:.92;
    filter:drop-shadow(0 0 5px rgba(94,234,212,.5));
}
html body .r158-proof .r201-wave2{ top:-6px !important; opacity:.4 !important; animation-duration:4.8s !important; animation-direction:reverse !important; }
@keyframes r201-slosh{ 0%,100%{ transform:translateX(0) rotate(-1.4deg); } 50%{ transform:translateX(-14px) rotate(1.4deg); } }

/* drifting caustic light inside the liquid */
html body .r158-proof .r201-tube::after{
    content:""; position:absolute; inset:0; z-index:2; pointer-events:none; mix-blend-mode:screen;
    background:radial-gradient(50% 26% at 32% 66%, rgba(190,255,247,.22), transparent 62%);
    animation:r201-caustic 6.5s ease-in-out infinite; opacity:.8;
}
@keyframes r201-caustic{ 0%,100%{ transform:translate(-6%,0); } 50%{ transform:translate(14%,-6%); } }

@media (prefers-reduced-motion: reduce){
    html body .r158-proof .r201-wave,
    html body .r158-proof .r201-tube::after,
    html body .r158-proof .r201-vial::after{ animation:none !important; }
}
@media (max-width:768px){
    html body .r158-proof .r201-tube{ width:clamp(72px,28vw,100px) !important; height:clamp(168px,62vw,212px) !important; }
    html body .r158-proof .r201-row{ gap:20px !important; }
}

/* ════════════════════════════════════════════════════════════
   R201-rev4 · REAL VIAL PHOTOS — swap the CSS-drawn vials for the actual
   product photography on a lit display stage (the bestsellers' museum
   light-pool treatment): teal glow pool, drop-shadow + glow on the photo,
   a lit pedestal line, count-up %, 3D cursor tilt. Real glass = real lift.
   ════════════════════════════════════════════════════════════ */
html body .r158-proof .r201-row{ gap:clamp(24px,5vw,72px) !important; align-items:flex-end !important; }
html body .r158-proof .r201-photo{
    position:relative; display:flex; align-items:flex-end; justify-content:center;
    width:clamp(118px,14vw,166px); height:clamp(186px,25vw,250px);
    transition:transform .35s cubic-bezier(.16,1,.3,1); transform-style:preserve-3d; will-change:transform;
}
/* teal light pool behind the specimen */
html body .r158-proof .r201-pool{
    position:absolute; left:50%; top:44%; width:158%; height:120%; transform:translate(-50%,-50%);
    background:radial-gradient(ellipse at center, rgba(45,212,191,.30), rgba(45,212,191,.07) 44%, transparent 68%);
    filter:blur(17px); z-index:0; pointer-events:none; opacity:0; transition:opacity 1.1s ease .25s;
}
html body .r158-proof #r158-ledger.r201-in .r201-pool{ opacity:1; }
/* the real product photo */
html body .r158-proof .r201-img{
    position:relative; z-index:1; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;
    filter:drop-shadow(0 24px 34px rgba(0,0,0,.62)) drop-shadow(0 0 24px rgba(45,212,191,.4));
}
/* lit pedestal line the vial stands on */
html body .r158-proof .r201-pedestal{
    position:absolute; left:12%; right:12%; bottom:5px; height:2px; z-index:0; border-radius:2px;
    background:linear-gradient(90deg, transparent, rgba(94,234,212,.65) 25%, rgba(94,234,212,.65) 75%, transparent);
    box-shadow:0 0 14px rgba(45,212,191,.55); filter:blur(.4px);
    opacity:0; transform:scaleX(.6); transition:opacity .8s ease .4s, transform .8s cubic-bezier(.16,1,.3,1) .4s;
}
html body .r158-proof #r158-ledger.r201-in .r201-pedestal{ opacity:1; transform:scaleX(1); }
@media (max-width:768px){
    html body .r158-proof .r201-photo{ width:clamp(92px,30vw,130px); height:clamp(150px,52vw,200px); }
    html body .r158-proof .r201-row{ gap:14px !important; }
}

/* ════════════════════════════════════════════════════════════
   R203 · RESEARCH CONSTELLATION — the "Find What You're Studying"
   browse module reborn as a living node-link web. The 6 category tiles
   become glowing nodes positioned in a network; a canvas draws the
   connecting links + traveling light pulses behind them. Every hook
   preserved (.r158-mod data + setMod + sparkline). Hover a node → it +
   its links light up + the readout tunes to that channel.
   ════════════════════════════════════════════════════════════ */
html body #main-content .goals-section.r158-room .r158-modules-console{ display:block !important; }
html body #main-content .goals-section.r158-room .r158-mod-list{
    position:relative !important; display:block !important; width:100% !important; max-width:940px !important;
    height:clamp(380px,46vw,470px) !important; margin:10px auto 0 !important;
    grid-template-columns:none !important; gap:0 !important;
}
html body .goals-section.r158-room .r203-web{ position:absolute; inset:0; z-index:0; pointer-events:none; }

/* nodes */
html body #main-content .goals-section.r158-room .r158-mod{
    position:absolute !important; transform:translate(-50%,-50%) !important;
    display:flex !important; flex-direction:column !important; align-items:center !important; gap:12px !important;
    width:auto !important; min-width:0 !important; max-width:140px !important; padding:0 !important; margin:0 !important;
    background:none !important; border:none !important; border-radius:0 !important; box-shadow:none !important;
    z-index:2 !important; text-align:center !important; overflow:visible !important;
    transition:transform .35s cubic-bezier(.16,1,.3,1) !important;
}
html body .goals-section.r158-room .r158-mod::after,
html body .goals-section.r158-room .r158-mod::before{ display:none !important; }
html body .goals-section.r158-room .r158-mod[data-r158-mod="0"]{ left:15% !important; top:27% !important; }
html body .goals-section.r158-room .r158-mod[data-r158-mod="1"]{ left:50% !important; top:13% !important; }
html body .goals-section.r158-room .r158-mod[data-r158-mod="2"]{ left:85% !important; top:27% !important; }
html body .goals-section.r158-room .r158-mod[data-r158-mod="3"]{ left:24% !important; top:74% !important; }
html body .goals-section.r158-room .r158-mod[data-r158-mod="4"]{ left:57% !important; top:87% !important; }
html body .goals-section.r158-room .r158-mod[data-r158-mod="5"]{ left:86% !important; top:67% !important; }

/* node disc */
html body #main-content .goals-section.r158-room .r158-mod .goal-icon{
    width:clamp(56px,6.5vw,74px) !important; height:clamp(56px,6.5vw,74px) !important; border-radius:50% !important;
    display:flex !important; align-items:center !important; justify-content:center !important; margin:0 !important;
    background:radial-gradient(circle at 38% 30%, rgba(45,212,191,.18), rgba(6,9,13,.92)) !important;
    border:1px solid rgba(45,212,191,.42) !important; color:#5eead4 !important; font-size:clamp(18px,2vw,24px) !important;
    box-shadow:0 0 0 6px rgba(45,212,191,.05), 0 0 22px rgba(45,212,191,.28), inset 0 0 16px rgba(45,212,191,.14) !important;
    transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, border-color .35s ease, color .35s ease !important;
    position:relative !important;
}
/* breathing sonar ping */
html body .goals-section.r158-room .r158-mod .goal-icon::after{
    content:"" !important; position:absolute; inset:-1px; border-radius:50%; border:1px solid rgba(94,234,212,.45);
    opacity:0; animation:r203-ping 3.6s ease-out infinite; pointer-events:none; display:block !important;
}
html body .goals-section.r158-room .r158-mod[data-r158-mod="1"] .goal-icon::after{ animation-delay:.6s; }
html body .goals-section.r158-room .r158-mod[data-r158-mod="2"] .goal-icon::after{ animation-delay:1.2s; }
html body .goals-section.r158-room .r158-mod[data-r158-mod="3"] .goal-icon::after{ animation-delay:1.8s; }
html body .goals-section.r158-room .r158-mod[data-r158-mod="4"] .goal-icon::after{ animation-delay:2.4s; }
html body .goals-section.r158-room .r158-mod[data-r158-mod="5"] .goal-icon::after{ animation-delay:3s; }
@keyframes r203-ping{ 0%{ transform:scale(1); opacity:.55; } 70%{ opacity:0; } 100%{ transform:scale(1.85); opacity:0; } }

/* node label */
html body #main-content .goals-section.r158-room .r158-mod .r158-mod-name{
    font-family:'Geist',sans-serif !important; font-weight:600 !important; font-size:clamp(12px,1.25vw,14px) !important;
    color:#cfe6e1 !important; letter-spacing:.01em !important; white-space:nowrap !important; margin:0 !important; line-height:1.2 !important;
    text-shadow:0 1px 8px rgba(0,0,0,.65) !important;
}
html body #main-content .goals-section.r158-room .r158-mod .goal-arrow{ display:none !important; }

/* hover / active node */
html body #main-content .goals-section.r158-room .r158-mod:hover,
html body #main-content .goals-section.r158-room .r158-mod.is-active{ transform:translate(-50%,-50%) scale(1.09) !important; z-index:3 !important; }
html body #main-content .goals-section.r158-room .r158-mod:hover .goal-icon,
html body #main-content .goals-section.r158-room .r158-mod.is-active .goal-icon{
    border-color:rgba(94,234,212,.9) !important; color:#bff7ec !important;
    box-shadow:0 0 0 8px rgba(45,212,191,.09), 0 0 38px rgba(45,212,191,.6), inset 0 0 20px rgba(94,234,212,.28) !important;
}
html body #main-content .goals-section.r158-room .r158-mod:hover .r158-mod-name,
html body #main-content .goals-section.r158-room .r158-mod.is-active .r158-mod-name{ color:#eafdf9 !important; }

@media (prefers-reduced-motion: reduce){
    html body .goals-section.r158-room .r158-mod .goal-icon::after{ animation:none !important; display:none !important; }
}
/* mobile: drop the absolute web, fall back to a clean node grid */
@media (max-width:768px){
    html body #main-content .goals-section.r158-room .r158-mod-list{ height:auto !important; display:grid !important; grid-template-columns:1fr 1fr !important; gap:26px 10px !important; padding:14px 0 !important; max-width:none !important; }
    html body #main-content .goals-section.r158-room .r158-mod{ position:static !important; transform:none !important; max-width:none !important; }
    html body #main-content .goals-section.r158-room .r158-mod:hover,
    html body #main-content .goals-section.r158-room .r158-mod.is-active{ transform:scale(1.05) !important; }
    html body .goals-section.r158-room .r203-web{ display:none !important; }
}

/* ════════════════════════════════════════════════════════════
   R204 · CONSTELLATION DEPTH — generated atmospheric backdrop (image MCP,
   self-hosted WebP) + a WebGL particle dust field with cursor parallax,
   layered behind the link web + nodes. Image atmosphere → live 3D dust →
   glowing links + pulses → interactive nodes.
   ════════════════════════════════════════════════════════════ */
html body .goals-section.r158-room .r203-bg{
    position:absolute; inset:-5%; z-index:0; pointer-events:none;
    background:url("images/r203-constellation-bg.webp?v=1") center/cover no-repeat;
    opacity:.6;
    -webkit-mask-image:radial-gradient(ellipse 84% 80% at 50% 48%, #000 48%, transparent 90%);
            mask-image:radial-gradient(ellipse 84% 80% at 50% 48%, #000 48%, transparent 90%);
    animation:r204-drift 36s ease-in-out infinite alternate; will-change:transform;
}
@keyframes r204-drift{ 0%{ transform:scale(1.03) translate(-1%,0); } 100%{ transform:scale(1.09) translate(1.5%,1%); } }
html body .goals-section.r158-room .r203-gl{ position:absolute; inset:0; z-index:1; pointer-events:none; display:block; }
html body .goals-section.r158-room .r203-web{ z-index:2 !important; }
html body #main-content .goals-section.r158-room .r158-mod{ z-index:3 !important; }

@media (prefers-reduced-motion: reduce){
    html body .goals-section.r158-room .r203-bg{ animation:none !important; }
}
@media (max-width:768px){
    html body .goals-section.r158-room .r203-bg,
    html body .goals-section.r158-room .r203-gl{ display:none !important; }
}

/* ════════════════════════════════════════════════════════════
   R205 · FULL-BLEED STAGE — the atmospheric backdrop + WebGL dust now span
   the whole section (moved out of the narrow node field). Vertical fade
   blends the seams into neighbouring sections; content sits above.
   ════════════════════════════════════════════════════════════ */
html body #main-content .goals-section.r158-room{ position:relative !important; overflow:hidden !important; }
html body .goals-section.r158-room > .container{ position:relative; z-index:1; }
html body .goals-section.r158-room .r204-stage{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
html body .goals-section.r158-room .r204-stage .r203-bg{
    position:absolute !important; inset:0 !important; width:100% !important; height:100% !important;
    background:url("images/r203-constellation-bg.webp?v=1") center center / cover no-repeat !important;
    opacity:.5 !important;
    -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%) !important;
            mask-image:linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%) !important;
    animation:r204-drift 42s ease-in-out infinite alternate !important;
}
html body .goals-section.r158-room .r204-stage .r203-gl{ position:absolute !important; inset:0 !important; z-index:1 !important; display:block !important; }
@media (prefers-reduced-motion: reduce){ html body .goals-section.r158-room .r204-stage .r203-bg{ animation:none !important; } }
@media (max-width:768px){ html body .goals-section.r158-room .r204-stage{ display:none !important; } }

/* ════════════════════════════════════════════════════════════
   R206 · SPECTRAL EMERGENCE — "Find What You're Studying" rebuilt on a
   full-bleed sparkle field (vanilla SparklesCore reimplementation) with a
   luminous spectral seam the six research channels emerge from. Fresh
   .r206-* classes; the legacy .r158-mod node CSS above now matches no
   element (harmless dead rules). This block is authoritative — it overrides
   the R203/R204/R205 stage rules via later source order + id scoping.
   ════════════════════════════════════════════════════════════ */

/* — section shell + full-bleed stage — */
html body #main-content .goals-section.r158-room{
    position:relative !important; overflow:hidden !important;
    background:
        radial-gradient(120% 78% at 50% 6%, rgba(13,148,136,.12), transparent 58%),
        linear-gradient(180deg, #07080B 0%, #06070A 52%, #070A0C 100%) !important;
    padding:clamp(64px,8vw,104px) 0 clamp(72px,9vw,118px) !important;
    isolation:isolate;
}
html body #main-content .goals-section.r158-room > .container{ position:relative !important; z-index:2 !important; }
html body #main-content .goals-section.r158-room .r204-stage{ position:absolute !important; inset:0 !important; z-index:0 !important; display:block !important; pointer-events:none !important; overflow:hidden !important; }

/* faint atmospheric underlay (the approved background pic, now a depth layer beneath the sparkles) */
html body #main-content .goals-section.r158-room .r204-stage .r203-bg{
    position:absolute !important; inset:0 !important; width:100% !important; height:100% !important;
    background:url("images/r203-constellation-bg.webp?v=1") center center / cover no-repeat !important;
    opacity:.26 !important;
    -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%) !important;
            mask-image:linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%) !important;
    animation:r204-drift 48s ease-in-out infinite alternate !important;
}
/* the sparkle field canvas — soft vignette so particles fade toward the edges */
html body #main-content .goals-section.r158-room .r206-sparkles{
    position:absolute !important; inset:0 !important; z-index:1 !important; display:block !important;
    width:100% !important; height:100% !important; pointer-events:none !important;
    -webkit-mask-image:radial-gradient(150% 118% at 50% 32%, #000 66%, transparent 100%);
            mask-image:radial-gradient(150% 118% at 50% 32%, #000 66%, transparent 100%);
}

/* — header — */
html body #main-content .goals-section.r158-room .r206-browse{ position:relative; z-index:2; max-width:1040px; margin:0 auto; }
html body #main-content .goals-section.r158-room .r206-head{ text-align:center; max-width:720px; margin:0 auto; }
html body #main-content .goals-section.r158-room .r206-eyebrow{
    display:inline-flex; align-items:center; gap:9px;
    font-family:'JetBrains Mono',monospace !important; font-size:11.5px !important; font-weight:600 !important;
    letter-spacing:.28em !important; text-transform:uppercase; color:#5eead4 !important; margin:0 0 18px !important;
}
html body #main-content .goals-section.r158-room .r206-eyebrow-dot{ width:6px; height:6px; border-radius:50%; background:#2dd4bf; box-shadow:0 0 10px 2px rgba(45,212,191,.8); animation:r206-pulse 2.6s ease-in-out infinite; }
@keyframes r206-pulse{ 0%,100%{ opacity:.5; transform:scale(.8); } 50%{ opacity:1; transform:scale(1.15); } }

html body #main-content .goals-section.r158-room .r206-title{
    font-family:'Geist',sans-serif !important; font-weight:600 !important;
    font-size:clamp(2.1rem,4.6vw,3.4rem) !important; line-height:1.05 !important; letter-spacing:-.03em !important;
    color:#f3fbf9 !important; margin:0 !important; text-wrap:balance; text-shadow:0 0 40px rgba(45,212,191,.18);
}
/* signature spectral seam (Aceternity-style glowing line the sparkles emerge from) */
html body #main-content .goals-section.r158-room .r206-seam{ position:relative; height:34px; margin:24px auto 0; max-width:580px; }
/* soft radial bloom centred on the seam — the "emergence" halo */
html body #main-content .goals-section.r158-room .r206-seam::before{
    content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    width:62%; height:120px; border-radius:50%; pointer-events:none;
    background:radial-gradient(ellipse at center, rgba(45,212,191,.30), rgba(45,212,191,.06) 55%, transparent 74%);
    filter:blur(6px); animation:r206-seam-breathe 4.6s ease-in-out infinite;
}
html body #main-content .goals-section.r158-room .r206-seam-core{
    position:absolute; left:0; right:0; top:50%; height:1px; transform:translateY(-50%);
    background:linear-gradient(90deg, transparent, rgba(45,212,191,.9) 26%, #e6fffb 50%, rgba(45,212,191,.9) 74%, transparent);
    box-shadow:0 0 8px rgba(94,234,212,.55);
}
html body #main-content .goals-section.r158-room .r206-seam-glow{
    position:absolute; left:12%; right:12%; top:50%; height:6px; transform:translateY(-50%); border-radius:6px;
    background:linear-gradient(90deg, transparent, rgba(94,234,212,.7), transparent);
    filter:blur(4px); animation:r206-seam-breathe 4.6s ease-in-out infinite;
}
@keyframes r206-seam-breathe{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }

html body #main-content .goals-section.r158-room .r206-sub{
    font-family:'Inter',sans-serif !important; font-size:clamp(15px,1.5vw,16.5px) !important; line-height:1.6 !important;
    color:#b3c4c0 !important; margin:20px auto 0 !important; max-width:520px !important;
}

/* — channel grid — */
html body #main-content .goals-section.r158-room .r206-grid{
    display:grid !important; grid-template-columns:repeat(3,1fr); gap:18px;
    margin:clamp(40px,5vw,58px) auto 0; max-width:1000px; padding:0; list-style:none;
}
html body #main-content .goals-section.r158-room .r206-card{
    position:relative; display:flex; flex-direction:column; align-items:flex-start;
    padding:24px 22px 20px; border-radius:16px; text-decoration:none; overflow:hidden;
    background:linear-gradient(180deg, rgba(13,18,23,.74), rgba(8,11,15,.82));
    border:1px solid rgba(45,212,191,.16);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.03), 0 14px 36px -22px rgba(0,0,0,.9);
    transition:transform .42s cubic-bezier(.16,1,.3,1), border-color .42s ease, box-shadow .42s ease;
}
/* scan shimmer sweep on hover */
html body #main-content .goals-section.r158-room .r206-card::before{
    content:""; position:absolute; top:0; bottom:0; left:-45%; width:38%; pointer-events:none;
    background:linear-gradient(100deg, transparent, rgba(94,234,212,.10), transparent);
    transform:skewX(-16deg); opacity:0;
}
html body #main-content .goals-section.r158-room .r206-card:hover::before{ opacity:1; animation:r206-sweep 1.1s ease forwards; }
@keyframes r206-sweep{ 0%{ left:-45%; } 100%{ left:120%; } }

html body #main-content .goals-section.r158-room .r206-card:hover,
html body #main-content .goals-section.r158-room .r206-card:focus-visible{
    transform:translateY(-6px); border-color:rgba(94,234,212,.5); outline:none;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 0 0 1px rgba(45,212,191,.12), 0 26px 50px -26px rgba(0,0,0,.95), 0 0 46px -10px rgba(45,212,191,.4);
}
html body #main-content .goals-section.r158-room .r206-card:focus-visible{ box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 0 0 2px rgba(94,234,212,.7), 0 0 46px -10px rgba(45,212,191,.4); }
html body #main-content .goals-section.r158-room .r206-card:active{ transform:translateY(-3px) scale(.99); }

html body #main-content .goals-section.r158-room .r206-idx{
    position:absolute; top:18px; right:20px;
    font-family:'JetBrains Mono',monospace !important; font-size:12px !important; font-weight:600 !important;
    letter-spacing:.1em !important; color:rgba(94,234,212,.5) !important;
}
/* aperture-lens emitter (concentric rings) — distinct from the old solid disc */
html body #main-content .goals-section.r158-room .r206-emitter{
    position:relative; width:54px; height:54px; border-radius:50%; margin:0 0 18px; flex:none;
    display:flex; align-items:center; justify-content:center;
    background:radial-gradient(circle at 50% 50%, rgba(45,212,191,.22), rgba(6,9,13,.35) 60%, transparent 72%);
    color:#7df0dc !important; font-size:21px;
    transition:color .4s ease, transform .4s cubic-bezier(.16,1,.3,1);
}
html body #main-content .goals-section.r158-room .r206-emitter::before,
html body #main-content .goals-section.r158-room .r206-emitter::after{ content:""; position:absolute; border-radius:50%; pointer-events:none; }
html body #main-content .goals-section.r158-room .r206-emitter::before{ inset:0; border:1px solid rgba(94,234,212,.5); box-shadow:inset 0 0 12px rgba(45,212,191,.25); transition:border-color .4s ease, box-shadow .4s ease; }
html body #main-content .goals-section.r158-room .r206-emitter::after{ inset:7px; border:1px solid rgba(94,234,212,.2); }
html body #main-content .goals-section.r158-room .r206-card:hover .r206-emitter{ color:#d6fff7 !important; transform:scale(1.06); }
html body #main-content .goals-section.r158-room .r206-card:hover .r206-emitter::before{ border-color:rgba(150,250,235,.85); box-shadow:inset 0 0 16px rgba(45,212,191,.4), 0 0 24px rgba(45,212,191,.45); }

html body #main-content .goals-section.r158-room .r206-card-name{
    font-family:'Geist',sans-serif !important; font-weight:600 !important; font-size:18px !important; line-height:1.2 !important;
    color:#eafdf9 !important; letter-spacing:-.01em !important; margin:0 0 12px !important;
}
html body #main-content .goals-section.r158-room .r206-compounds{ display:flex; flex-wrap:wrap; gap:6px; margin:0; }
html body #main-content .goals-section.r158-room .r206-chip{
    font-family:'JetBrains Mono',monospace !important; font-size:11px !important; font-weight:500 !important; letter-spacing:.01em !important;
    color:#9beadb !important; background:rgba(45,212,191,.08); border:1px solid rgba(45,212,191,.2);
    border-radius:5px; padding:3px 7px; white-space:nowrap;
}
html body #main-content .goals-section.r158-room .r206-chip.r206-chip-deal{ color:#ffe2a8 !important; background:rgba(245,200,120,.09); border-color:rgba(245,200,120,.3); }

/* per-card signal sparkline */
html body #main-content .goals-section.r158-room .r206-spark{ width:100%; height:34px; display:block; margin:13px 0 0; opacity:.5; transition:opacity .4s ease; }
html body #main-content .goals-section.r158-room .r206-card:hover .r206-spark{ opacity:.95; }
html body #main-content .goals-section.r158-room .r206-spark-line{ fill:none; stroke:#2dd4bf; stroke-width:1.6; filter:drop-shadow(0 0 3px rgba(45,212,191,.5)); stroke-dasharray:560; stroke-dashoffset:560; }
html body #main-content .goals-section.r158-room .r206-spark-line.r206-draw{ animation:r206-draw 1s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes r206-draw{ to{ stroke-dashoffset:0; } }

/* "explore channel" row */
html body #main-content .goals-section.r158-room .r206-go{
    display:inline-flex; align-items:center; gap:7px; margin-top:14px;
    font-family:'JetBrains Mono',monospace !important; font-size:11px !important; font-weight:600 !important;
    letter-spacing:.13em !important; text-transform:uppercase; color:#5eead4 !important;
}
html body #main-content .goals-section.r158-room .r206-go i{ font-size:10px; transition:transform .35s cubic-bezier(.16,1,.3,1); }
html body #main-content .goals-section.r158-room .r206-card:hover .r206-go{ color:#bff7ec !important; }
html body #main-content .goals-section.r158-room .r206-card:hover .r206-go i{ transform:translateX(5px); }

/* ── section entrance choreography (armed by JS; default stays fully visible if JS never runs) ── */
/* pre-reveal hidden state */
html body #main-content .goals-section.r158-room.r206-sec-armed .r204-stage{ opacity:0; }
html body #main-content .goals-section.r158-room.r206-sec-armed .r206-eyebrow,
html body #main-content .goals-section.r158-room.r206-sec-armed .r206-title,
html body #main-content .goals-section.r158-room.r206-sec-armed .r206-sub{ opacity:0; transform:translateY(22px); }
html body #main-content .goals-section.r158-room.r206-sec-armed .r206-seam{ opacity:0; transform:scaleX(.16); }
/* play */
html body #main-content .goals-section.r158-room.r206-sec-in .r204-stage{ opacity:1; transition:opacity 1.3s ease; }
html body #main-content .goals-section.r158-room.r206-sec-in .r206-eyebrow,
html body #main-content .goals-section.r158-room.r206-sec-in .r206-title,
html body #main-content .goals-section.r158-room.r206-sec-in .r206-sub{ opacity:1; transform:none; transition:opacity .7s ease, transform .8s cubic-bezier(.16,1,.3,1); }
html body #main-content .goals-section.r158-room.r206-sec-in .r206-seam{ opacity:1; transform:scaleX(1); transition:opacity .6s ease, transform .9s cubic-bezier(.16,1,.3,1); transform-origin:center; }
html body #main-content .goals-section.r158-room.r206-sec-in .r206-eyebrow{ transition-delay:.05s; }
html body #main-content .goals-section.r158-room.r206-sec-in .r206-title{ transition-delay:.14s; }
html body #main-content .goals-section.r158-room.r206-sec-in .r206-seam{ transition-delay:.30s; }
html body #main-content .goals-section.r158-room.r206-sec-in .r206-sub{ transition-delay:.42s; }

/* card reveal — enhances an already-visible default; only applies once JS arms it */
html body #main-content .goals-section.r158-room .r206-grid.r206-armed .r206-card{ opacity:0; transform:translateY(18px); }
html body #main-content .goals-section.r158-room .r206-grid.r206-armed .r206-card.r206-in{ opacity:1; transform:none; transition:opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1); }

/* responsive */
@media (max-width:920px){
    html body #main-content .goals-section.r158-room .r206-grid{ grid-template-columns:repeat(2,1fr); max-width:640px; }
}
@media (max-width:560px){
    html body #main-content .goals-section.r158-room .r206-grid{ grid-template-columns:1fr; max-width:420px; gap:14px; }
    html body #main-content .goals-section.r158-room .r206-card{ padding:20px 18px 18px; }
    html body #main-content .goals-section.r158-room .r206-title{ font-size:clamp(1.9rem,8vw,2.4rem) !important; }
}
/* keep the sparkle field on mobile (override the R205 hide); the canvas is lightweight */
@media (max-width:768px){
    html body #main-content .goals-section.r158-room .r204-stage{ display:block !important; }
    html body #main-content .goals-section.r158-room .r204-stage .r203-bg{ display:block !important; opacity:.2 !important; }
    html body #main-content .goals-section.r158-room .r206-sparkles{ display:block !important; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
    html body #main-content .goals-section.r158-room .r204-stage .r203-bg,
    html body #main-content .goals-section.r158-room .r206-eyebrow-dot,
    html body #main-content .goals-section.r158-room .r206-seam::before,
    html body #main-content .goals-section.r158-room .r206-seam-glow{ animation:none !important; }
    html body #main-content .goals-section.r158-room .r206-card::before{ display:none !important; }
    html body #main-content .goals-section.r158-room .r206-spark-line{ stroke-dashoffset:0 !important; animation:none !important; }
    html body #main-content .goals-section.r158-room .r206-grid.r206-armed .r206-card{ opacity:1 !important; transform:none !important; }
    html body #main-content .goals-section.r158-room.r206-sec-armed .r204-stage,
    html body #main-content .goals-section.r158-room.r206-sec-armed .r206-eyebrow,
    html body #main-content .goals-section.r158-room.r206-sec-armed .r206-title,
    html body #main-content .goals-section.r158-room.r206-sec-armed .r206-sub,
    html body #main-content .goals-section.r158-room.r206-sec-armed .r206-seam{ opacity:1 !important; transform:none !important; }
}

/* ════════════════════════════════════════════════════════════
   R207 · BROWSE HEADER TYPOGRAPHY — editorial lift. The Geist display gains
   a Fraunces serif-italic accent on the key word (contrast-axis pairing);
   the eyebrow and subtitle are refined for crispness, contrast, and rhythm.
   Type system: Geist (display) / Fraunces (serif lede) / JetBrains Mono (data).
   ════════════════════════════════════════════════════════════ */
/* headline base — a touch more presence + optical tracking */
html body #main-content .goals-section.r158-room .r206-title{
    font-size:clamp(2.2rem,4.8vw,3.6rem) !important; line-height:1.04 !important; letter-spacing:-.032em !important;
    color:#f5fcfa !important;
}
/* the serif-italic accent word — luminous, optically sized */
html body #main-content .goals-section.r158-room .r206-title .r206-title-em{
    font-family:'Fraunces','Geist',serif !important; font-style:italic !important; font-weight:400 !important;
    font-optical-sizing:auto; font-size:1.05em !important; letter-spacing:-.012em !important;
    color:#eafffb !important; text-shadow:0 0 26px rgba(94,234,212,.42), 0 0 2px rgba(94,234,212,.3);
}
/* eyebrow — crisper instrument placard */
html body #main-content .goals-section.r158-room .r206-eyebrow{
    font-size:11px !important; letter-spacing:.34em !important; font-weight:600 !important;
    color:#7df0dc !important; gap:10px !important; margin:0 0 20px !important;
}
/* subtitle — brighter, slightly larger, calmer measure + leading */
html body #main-content .goals-section.r158-room .r206-sub{
    font-size:clamp(15.5px,1.55vw,17px) !important; line-height:1.65 !important;
    color:#c4d4d0 !important; max-width:500px !important; margin:22px auto 0 !important; letter-spacing:.002em !important;
}
/* keep the headline sensible on small screens (overrides the larger base above) */
@media (max-width:560px){
    html body #main-content .goals-section.r158-room .r206-title{ font-size:clamp(2rem,8.4vw,2.5rem) !important; }
}

/* ════════════════════════════════════════════════════════════
   R208 · BROWSE HEADER LEGIBILITY — the copy was blending into the sparkle
   field. Larger type + dark-halo text shadows lift it off the particles, and
   a soft scrim behind the header gives the text a calmer backdrop while the
   sparkles still read around it.
   ════════════════════════════════════════════════════════════ */
/* soft dark scrim: above the sparkle canvas, behind the header text */
html body #main-content .goals-section.r158-room .r206-head{ position:relative; }
html body #main-content .goals-section.r158-room .r206-head::before{
    content:""; position:absolute; left:50%; top:45%; transform:translate(-50%,-50%);
    width:132%; height:162%; z-index:-1; pointer-events:none;
    background:radial-gradient(ellipse 62% 58% at 50% 50%, rgba(5,8,11,.64), rgba(5,8,11,.32) 48%, transparent 74%);
    filter:blur(10px);
}
/* eyebrow — larger + dark halo */
html body #main-content .goals-section.r158-room .r206-eyebrow{
    font-size:12px !important; letter-spacing:.32em !important; color:#8df3e0 !important;
    text-shadow:0 1px 7px rgba(0,0,0,.7);
}
/* headline — bigger, pure white, dark legibility halo + teal bloom */
html body #main-content .goals-section.r158-room .r206-title{
    font-size:clamp(2.55rem,5.8vw,4.3rem) !important; color:#ffffff !important;
    text-shadow:0 1px 2px rgba(0,0,0,.55), 0 6px 26px rgba(0,0,0,.62), 0 0 44px rgba(45,212,191,.16) !important;
}
html body #main-content .goals-section.r158-room .r206-title .r206-title-em{
    color:#5eead4 !important;
    text-shadow:0 2px 14px rgba(0,0,0,.6), 0 0 30px rgba(45,212,191,.55), 0 0 3px rgba(94,234,212,.45) !important;
}
/* subtitle — larger, brighter, dark halo for separation */
html body #main-content .goals-section.r158-room .r206-sub{
    font-size:clamp(16px,1.7vw,18px) !important; color:#d4e2de !important; max-width:520px !important;
    text-shadow:0 1px 10px rgba(0,0,0,.72) !important;
}
@media (max-width:560px){
    html body #main-content .goals-section.r158-room .r206-title{ font-size:clamp(2.2rem,9.2vw,2.9rem) !important; }
}

/* ════════════════════════════════════════════════════════════
   R209 · INSTRUMENT CHANNEL CARDS — the browse tiles rebuilt as specimen
   channels: viewfinder corner brackets, a research-area descriptor, an
   aperture with a scanning ring, real depth + accent glow, and a
   choreographed hover. Aesthetic + useful; on the Instrument×Exhibit theme.
   ════════════════════════════════════════════════════════════ */
/* card shell — depth + accent glow + fixed (non ghost-card) resting elevation */
html body #main-content .goals-section.r158-room .r206-card{
    padding:26px 24px 22px !important; border-radius:14px !important;
    background:
        radial-gradient(160px 130px at 15% 15%, rgba(45,212,191,.14), transparent 64%),
        linear-gradient(180deg, rgba(15,21,26,.82), rgba(8,11,15,.86)) !important;
    border:1px solid rgba(45,212,191,.2) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 10px 30px -24px rgba(0,0,0,.9) !important;
}
/* viewfinder corner brackets (all four corners; lock inward + brighten on hover) */
html body #main-content .goals-section.r158-room .r206-card::after{
    content:""; position:absolute; inset:11px; border-radius:7px; pointer-events:none; opacity:.7;
    --bc:rgba(94,234,212,.42); --bl:14px;
    background-image:
        linear-gradient(var(--bc),var(--bc)), linear-gradient(var(--bc),var(--bc)),
        linear-gradient(var(--bc),var(--bc)), linear-gradient(var(--bc),var(--bc)),
        linear-gradient(var(--bc),var(--bc)), linear-gradient(var(--bc),var(--bc)),
        linear-gradient(var(--bc),var(--bc)), linear-gradient(var(--bc),var(--bc));
    background-repeat:no-repeat;
    background-size:var(--bl) 1.5px,1.5px var(--bl), var(--bl) 1.5px,1.5px var(--bl), var(--bl) 1.5px,1.5px var(--bl), var(--bl) 1.5px,1.5px var(--bl);
    background-position:top left,top left, top right,top right, bottom left,bottom left, bottom right,bottom right;
    transition:inset .42s cubic-bezier(.16,1,.3,1), opacity .42s ease;
}
html body #main-content .goals-section.r158-room .r206-card:hover::after,
html body #main-content .goals-section.r158-room .r206-card:focus-visible::after{ inset:8px; opacity:1; --bc:rgba(160,252,238,.9); }

/* elevation on hover — functional shadow + brighter border + teal bloom */
html body #main-content .goals-section.r158-room .r206-card:hover,
html body #main-content .goals-section.r158-room .r206-card:focus-visible{
    transform:translateY(-7px) !important; border-color:rgba(94,234,212,.55) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 24px 46px -26px rgba(0,0,0,.95), 0 0 52px -12px rgba(45,212,191,.45) !important;
}
html body #main-content .goals-section.r158-room .r206-card:focus-visible{
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 2px rgba(94,234,212,.7), 0 24px 46px -26px rgba(0,0,0,.95), 0 0 52px -12px rgba(45,212,191,.45) !important;
}

/* aperture — dashed scanning ring that rotates on hover */
html body #main-content .goals-section.r158-room .r206-emitter::after{
    border-style:dashed !important; border-color:rgba(94,234,212,.32) !important;
}
html body #main-content .goals-section.r158-room .r206-card:hover .r206-emitter::after{ animation:r209-spin 7s linear infinite; }
@keyframes r209-spin{ to{ transform:rotate(360deg); } }

/* name tightened to its new descriptor */
html body #main-content .goals-section.r158-room .r206-card-name{ margin:0 0 5px !important; font-size:18.5px !important; }
/* research-area descriptor — useful orientation copy */
html body #main-content .goals-section.r158-room .r206-desc{
    display:block; font-family:'Inter',sans-serif !important; font-size:12.5px !important; line-height:1.45 !important;
    color:#a8bdb8 !important; margin:0 0 14px !important; max-width:30ch; letter-spacing:.002em;
}
/* signal trace — brighter glowing readout */
html body #main-content .goals-section.r158-room .r206-spark-line{ stroke-width:1.8 !important; filter:drop-shadow(0 0 5px rgba(45,212,191,.6)) !important; }
html body #main-content .goals-section.r158-room .r206-go{ margin-top:15px !important; }

@media (prefers-reduced-motion: reduce){
    html body #main-content .goals-section.r158-room .r206-card:hover .r206-emitter::after{ animation:none !important; }
    html body #main-content .goals-section.r158-room .r206-card::after{ transition:none !important; }
}
/* mobile: pull the brackets in a touch so they don't crowd narrow cards */
@media (max-width:560px){
    html body #main-content .goals-section.r158-room .r206-card{ padding:22px 20px 18px !important; }
    html body #main-content .goals-section.r158-room .r206-card::after{ inset:9px; }
}

/* ════════════════════════════════════════════════════════════
   R210 · LIVE SIGNAL TRACE — the card waveform is now driven live by JS, so
   it's always fully drawn (no dash reveal) and brightens + saturates on hover.
   ════════════════════════════════════════════════════════════ */
html body #main-content .goals-section.r158-room .r206-spark-line{
    stroke-dasharray:none !important; stroke-dashoffset:0 !important; animation:none !important;
    stroke:#2dd4bf !important; stroke-width:1.8 !important;
    filter:drop-shadow(0 0 4px rgba(45,212,191,.5)) !important;
    transition:stroke .35s ease, filter .35s ease;
}
html body #main-content .goals-section.r158-room .r206-spark{ opacity:.62 !important; transition:opacity .35s ease; }
html body #main-content .goals-section.r158-room .r206-card:hover .r206-spark{ opacity:1 !important; }
html body #main-content .goals-section.r158-room .r206-card:hover .r206-spark-line{
    stroke:#7df0dc !important; filter:drop-shadow(0 0 8px rgba(94,234,212,.75)) !important;
}

/* ════════════════════════════════════════════════════════════
   R211 · BOLDER LIVE CHANNELS — signal traces removed; cards amplified:
   larger bold names, higher contrast, a breathing aperture with an always-
   rotating scan ring, a pulsing channel-active dot, and a stronger hover.
   ════════════════════════════════════════════════════════════ */
/* shell — more contrast + presence */
html body #main-content .goals-section.r158-room .r206-card{
    padding:28px 26px 24px !important;
    background:
        radial-gradient(190px 150px at 16% 14%, rgba(45,212,191,.18), transparent 62%),
        linear-gradient(180deg, rgba(16,23,28,.86), rgba(7,10,14,.9)) !important;
    border:1px solid rgba(45,212,191,.3) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 12px 32px -22px rgba(0,0,0,.92) !important;
}
/* index + pulsing channel-active dot (a moving "live channel" indicator) */
html body #main-content .goals-section.r158-room .r206-idx{
    top:20px !important; right:22px !important; font-size:12.5px !important; color:rgba(94,234,212,.62) !important;
    display:inline-flex !important; align-items:center; gap:7px;
}
html body #main-content .goals-section.r158-room .r206-idx::before{
    content:""; width:6px; height:6px; border-radius:50%; background:#2dd4bf;
    box-shadow:0 0 8px 1px rgba(45,212,191,.85); animation:r211-pulse 2s ease-in-out infinite;
}
@keyframes r211-pulse{ 0%,100%{ opacity:.35; transform:scale(.75); } 50%{ opacity:1; transform:scale(1.2); } }
/* aperture — bigger, breathing glow, always-rotating scan ring */
html body #main-content .goals-section.r158-room .r206-emitter{
    width:60px !important; height:60px !important; font-size:23px !important; color:#b3f7ea !important; margin:0 0 20px !important;
    animation:r211-breathe 3.6s ease-in-out infinite;
}
@keyframes r211-breathe{ 0%,100%{ box-shadow:0 0 0 0 rgba(45,212,191,0); } 50%{ box-shadow:0 0 24px 1px rgba(45,212,191,.32); } }
html body #main-content .goals-section.r158-room .r206-emitter::after{ animation:r211-spin 9s linear infinite !important; }
html body #main-content .goals-section.r158-room .r206-card:hover .r206-emitter::after{ animation-duration:3.2s !important; }
@keyframes r211-spin{ to{ transform:rotate(360deg); } }
/* name — bigger, bolder, max contrast */
html body #main-content .goals-section.r158-room .r206-card-name{
    font-size:22px !important; font-weight:700 !important; color:#ffffff !important; letter-spacing:-.015em !important; margin:0 0 6px !important;
}
/* descriptor + chips — more contrast */
html body #main-content .goals-section.r158-room .r206-desc{ font-size:13px !important; color:#b6cac5 !important; margin:0 0 16px !important; }
html body #main-content .goals-section.r158-room .r206-chip{
    color:#bbf2e4 !important; background:rgba(45,212,191,.1) !important; border-color:rgba(45,212,191,.34) !important; font-size:11.5px !important; padding:4px 8px !important;
}
html body #main-content .goals-section.r158-room .r206-chip.r206-chip-deal{ color:#ffe2a8 !important; background:rgba(245,200,120,.12) !important; border-color:rgba(245,200,120,.38) !important; }
/* CTA — a touch bigger + brighter */
html body #main-content .goals-section.r158-room .r206-go{ margin-top:18px !important; font-size:11.5px !important; color:#7df0dc !important; }
/* stronger hover */
html body #main-content .goals-section.r158-room .r206-card:hover,
html body #main-content .goals-section.r158-room .r206-card:focus-visible{
    transform:translateY(-9px) !important; border-color:rgba(94,234,212,.65) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 30px 54px -26px rgba(0,0,0,.96), 0 0 62px -10px rgba(45,212,191,.5) !important;
}
html body #main-content .goals-section.r158-room .r206-card:focus-visible{
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 0 0 2px rgba(94,234,212,.75), 0 30px 54px -26px rgba(0,0,0,.96), 0 0 62px -10px rgba(45,212,191,.5) !important;
}
@media (prefers-reduced-motion: reduce){
    html body #main-content .goals-section.r158-room .r206-idx::before,
    html body #main-content .goals-section.r158-room .r206-emitter,
    html body #main-content .goals-section.r158-room .r206-emitter::after{ animation:none !important; }
}
@media (max-width:560px){
    html body #main-content .goals-section.r158-room .r206-card{ padding:22px 20px 18px !important; }
    html body #main-content .goals-section.r158-room .r206-card-name{ font-size:20px !important; }
}

/* ════════════════════════════════════════════════════════════
   R212 · PREMIUM MATERIAL PASS — channel cards refined into lit glass panels:
   larger, more contrast off the sparkle field, a directional light-wash + a
   top-edge light catch, a more luminous aperture, calmer corner accents, and
   a deeper premium hover.
   ════════════════════════════════════════════════════════════ */
/* slightly bigger grid */
html body #main-content .goals-section.r158-room .r206-grid{ gap:22px !important; max-width:1060px !important; }
/* lit glass panel — bigger, more contrast, dimensional, elevated off the bg */
html body #main-content .goals-section.r158-room .r206-card{
    padding:32px 28px 28px !important; border-radius:16px !important;
    background:
        radial-gradient(230px 190px at 18% 10%, rgba(45,212,191,.22), transparent 60%),
        linear-gradient(168deg, rgba(22,31,37,.93), rgba(11,16,20,.95)) !important;
    border:1px solid rgba(94,234,212,.2) !important;
    box-shadow:
        inset 0 1px 0 rgba(196,255,248,.17),
        inset 0 16px 36px -28px rgba(94,234,212,.36),
        0 18px 38px -22px rgba(0,0,0,.9) !important;
}
/* corner accents — quieter now that the lit edge carries the frame */
html body #main-content .goals-section.r158-room .r206-card::after{ inset:13px !important; opacity:.5 !important; --bc:rgba(94,234,212,.34) !important; --bl:12px !important; }
html body #main-content .goals-section.r158-room .r206-card:hover::after,
html body #main-content .goals-section.r158-room .r206-card:focus-visible::after{ inset:9px !important; opacity:1 !important; --bc:rgba(170,252,240,.85) !important; }
/* aperture — more luminous (static glow; the rotating ring + pulsing dot carry the motion) */
html body #main-content .goals-section.r158-room .r206-emitter{
    width:62px !important; height:62px !important; font-size:24px !important; color:#c6fcf0 !important; margin:0 0 22px !important;
    background:radial-gradient(circle at 48% 38%, rgba(94,234,212,.34), rgba(6,9,13,.4) 60%, transparent 72%) !important;
    animation:none !important; box-shadow:0 0 22px -4px rgba(45,212,191,.3) !important;
}
/* hierarchy rhythm */
html body #main-content .goals-section.r158-room .r206-card-name{ font-size:23px !important; margin:0 0 8px !important; }
html body #main-content .goals-section.r158-room .r206-desc{ color:#bdd0cb !important; margin:0 0 18px !important; }
html body #main-content .goals-section.r158-room .r206-chip{ padding:5px 9px !important; }
html body #main-content .goals-section.r158-room .r206-go{ margin-top:20px !important; }
/* premium hover — lit edge brightens, deeper lift + bloom */
html body #main-content .goals-section.r158-room .r206-card:hover,
html body #main-content .goals-section.r158-room .r206-card:focus-visible{
    transform:translateY(-10px) !important; border-color:rgba(120,245,228,.6) !important;
    box-shadow:
        inset 0 1px 0 rgba(210,255,250,.22),
        inset 0 16px 40px -26px rgba(94,234,212,.5),
        0 34px 60px -26px rgba(0,0,0,.96),
        0 0 64px -12px rgba(45,212,191,.5) !important;
}
html body #main-content .goals-section.r158-room .r206-card:focus-visible{
    box-shadow:
        inset 0 1px 0 rgba(210,255,250,.22),
        0 0 0 2px rgba(120,245,228,.7),
        0 34px 60px -26px rgba(0,0,0,.96),
        0 0 64px -12px rgba(45,212,191,.5) !important;
}
@media (max-width:920px){
    html body #main-content .goals-section.r158-room .r206-grid{ max-width:680px !important; }
}
@media (max-width:560px){
    html body #main-content .goals-section.r158-room .r206-card{ padding:24px 22px 22px !important; }
    html body #main-content .goals-section.r158-room .r206-card-name{ font-size:21px !important; }
}

/* ════════════════════════════════════════════════════════════
   R213 · LIVING SPECIMEN CARDS — total remodel of the 6 research channels.
   Lit-glass shell + cursor 3D tilt (JS) + cursor spotlight + layered depth
   (accent glow → bespoke animated graphic → grain → glass sheen → content),
   one signature moving graphic per channel. GPU-cheap; paused off-screen via
   .r213-run; full reduced-motion + mobile fallbacks. Fresh .r213-* classes —
   the legacy .r206-card styling no longer matches any element.
   ════════════════════════════════════════════════════════════ */
html body #main-content .goals-section.r158-room .r213-grid{ gap:24px !important; max-width:1080px !important; }

/* ── card shell + 3D perspective ── */
html body #main-content .goals-section.r158-room .r213-card{
    display:block; position:relative; min-height:352px; border-radius:18px;
    text-decoration:none; perspective:1000px; outline:none; will-change:transform;
}
html body #main-content .goals-section.r158-room .r213-inner{
    position:absolute; inset:0; border-radius:inherit; overflow:hidden;
    display:flex; flex-direction:column; transform-style:preserve-3d;
    background:linear-gradient(168deg, rgba(20,28,34,.93), rgba(9,13,17,.96));
    border:1px solid rgba(94,234,212,.18);
    box-shadow:inset 0 1px 0 rgba(196,255,248,.16), inset 0 0 40px -30px rgba(94,234,212,.5), 0 20px 44px -24px rgba(0,0,0,.92);
    transition:transform .16s cubic-bezier(.2,.7,.3,1), border-color .4s ease, box-shadow .4s ease;
}
html body #main-content .goals-section.r158-room .r213-card:hover .r213-inner,
html body #main-content .goals-section.r158-room .r213-card:focus-visible .r213-inner{
    border-color:rgba(120,245,228,.55);
    box-shadow:inset 0 1px 0 rgba(210,255,250,.22), inset 0 0 44px -28px rgba(94,234,212,.7), 0 32px 58px -26px rgba(0,0,0,.96), 0 0 60px -14px rgba(45,212,191,.45);
}
html body #main-content .goals-section.r158-room .r213-card:focus-visible .r213-inner{ outline:2px solid rgba(120,245,228,.7); outline-offset:2px; }

/* ── depth layers ── */
html body #main-content .goals-section.r158-room .r213-glow{
    position:absolute; inset:0; pointer-events:none; transform:translateZ(-42px) scale(1.14);
    background:radial-gradient(120% 70% at 26% 6%, rgba(45,212,191,.22), transparent 54%),
               radial-gradient(95% 65% at 82% 104%, rgba(20,184,166,.13), transparent 60%);
}
html body #main-content .goals-section.r158-room .r213-grain{
    position:absolute; inset:0; pointer-events:none; opacity:.05; mix-blend-mode:overlay; transform:translateZ(2px);
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html body #main-content .goals-section.r158-room .r213-spot{
    position:absolute; inset:0; pointer-events:none; opacity:0; transform:translateZ(10px); transition:opacity .4s ease;
    background:radial-gradient(190px circle at var(--mx,50%) var(--my,26%), rgba(120,245,228,.20), transparent 62%);
}
html body #main-content .goals-section.r158-room .r213-card:hover .r213-spot{ opacity:1; }
html body #main-content .goals-section.r158-room .r213-sheen{
    position:absolute; inset:0; pointer-events:none; transform:translateZ(34px);
    background:linear-gradient(135deg, rgba(255,255,255,.07), transparent 38%, transparent 82%, rgba(255,255,255,.035));
}

/* ── per-channel figure (top band, fades into the content) ── */
html body #main-content .goals-section.r158-room .r213-fig{
    position:relative; height:152px; flex:none; transform:translateZ(-16px);
    -webkit-mask:linear-gradient(180deg,#000 62%, transparent 99%); mask:linear-gradient(180deg,#000 62%, transparent 99%);
}
html body #main-content .goals-section.r158-room .r213-svg{ width:100%; height:100%; display:block; color:#5eead4; }
html body #main-content .goals-section.r158-room .r213-fig .fig{ stroke:#5eead4; }
html body #main-content .goals-section.r158-room .r213-fig .fig :is(path,line,polyline,ellipse,circle,rect){ vector-effect:non-scaling-stroke; }
html body #main-content .goals-section.r158-room .r213-fig .fig :is(path,line,polyline,ellipse,rect){ stroke-width:1.6; }
html body #main-content .goals-section.r158-room .r213-card:hover .r213-svg{ color:#86f4e3; }

/* ── content ── */
html body #main-content .goals-section.r158-room .r213-body{
    position:relative; margin-top:auto; padding:0 24px 24px; transform:translateZ(26px);
    display:flex; flex-direction:column;
}
html body #main-content .goals-section.r158-room .r213-idx{
    display:inline-flex; align-items:center; gap:8px; align-self:flex-start; margin:0 0 10px;
    font-family:'JetBrains Mono',monospace !important; font-size:12px; font-weight:600; letter-spacing:.12em; color:rgba(94,234,212,.62) !important;
}
html body #main-content .goals-section.r158-room .r213-dot{ width:6px; height:6px; border-radius:50%; background:#2dd4bf; box-shadow:0 0 8px 1px rgba(45,212,191,.85); animation:r213-pulse 2s ease-in-out infinite; }
@keyframes r213-pulse{ 0%,100%{ opacity:.35; transform:scale(.75); } 50%{ opacity:1; transform:scale(1.2); } }
html body #main-content .goals-section.r158-room .r213-name{
    font-family:'Geist',sans-serif !important; font-weight:700 !important; font-size:22px !important; line-height:1.15 !important;
    color:#ffffff !important; letter-spacing:-.015em !important; margin:0 0 6px; text-shadow:0 1px 14px rgba(0,0,0,.5);
}
html body #main-content .goals-section.r158-room .r213-desc{
    font-family:'Inter',sans-serif !important; font-size:13px !important; line-height:1.45 !important; color:#b6cac5 !important; margin:0 0 14px; max-width:30ch;
}
html body #main-content .goals-section.r158-room .r213-chips{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 4px; }
html body #main-content .goals-section.r158-room .r213-chip{
    font-family:'JetBrains Mono',monospace !important; font-size:11px !important; font-weight:500; letter-spacing:.01em;
    color:#bbf2e4 !important; background:rgba(45,212,191,.1); border:1px solid rgba(45,212,191,.32); border-radius:6px; padding:4px 8px; white-space:nowrap;
}
html body #main-content .goals-section.r158-room .r213-chip.r213-chip-deal{ color:#ffe2a8 !important; background:rgba(245,200,120,.12); border-color:rgba(245,200,120,.38); }
html body #main-content .goals-section.r158-room .r213-go{
    display:inline-flex; align-items:center; gap:8px; margin-top:16px;
    font-family:'JetBrains Mono',monospace !important; font-size:11px !important; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:#7df0dc !important;
}
html body #main-content .goals-section.r158-room .r213-arr{ width:15px; height:11px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; transition:transform .35s cubic-bezier(.16,1,.3,1); }
html body #main-content .goals-section.r158-room .r213-card:hover .r213-go{ color:#c6fff7 !important; }
html body #main-content .goals-section.r158-room .r213-card:hover .r213-arr{ transform:translateX(5px); }

/* ════ FIGURE ANIMATIONS (paused until the grid is in view via .r213-run) ════ */
html body #main-content .goals-section.r158-room .r213-grid:not(.r213-run) .r213-fig *{ animation-play-state:paused !important; }

/* 01 Healing & Recovery — medical cross + radiating recovery pulse-rings */
html body #main-content .goals-section.r158-room .fig-heal .hp-cross{ color:#aef6e8; transform-box:fill-box; transform-origin:center; filter:drop-shadow(0 0 7px rgba(94,234,212,.55)); animation:r213-healcross 2.6s ease-in-out infinite; }
html body #main-content .goals-section.r158-room .fig-heal .hp-ring{ stroke:#5eead4; stroke-width:1.6; transform-box:fill-box; transform-origin:center; opacity:0; animation:r213-healring 3s ease-out infinite; }
html body #main-content .goals-section.r158-room .fig-heal .hr2{ animation-delay:-1s; }
html body #main-content .goals-section.r158-room .fig-heal .hr3{ animation-delay:-2s; }
@keyframes r213-healring{ 0%{ transform:scale(.45); opacity:.75; } 70%{ opacity:.12; } 100%{ transform:scale(2.7); opacity:0; } }
@keyframes r213-healcross{ 0%,100%{ transform:scale(.92); } 50%{ transform:scale(1.07); } }
html body #main-content .goals-section.r158-room .r213-card:hover .fig-heal .hp-ring{ animation-duration:1.8s; }
html body #main-content .goals-section.r158-room .r213-card:hover .fig-heal .hp-cross{ animation-duration:1.5s; }

/* 02 Metabolic — flame / energy burn + rising energy motes */
html body #main-content .goals-section.r158-room .fig-meta .fl{ stroke:#5eead4; stroke-width:1.6; transform-box:fill-box; transform-origin:50% 100%; }
html body #main-content .goals-section.r158-room .fig-meta .fl-out{ animation:r213-flame 2.6s ease-in-out infinite; }
html body #main-content .goals-section.r158-room .fig-meta .fl-in{ stroke:none; fill:rgba(45,212,191,.16); animation:r213-flame 1.9s ease-in-out infinite; }
html body #main-content .goals-section.r158-room .fig-meta .fl-core{ color:#aef6e8; transform-box:fill-box; transform-origin:center; animation:r213-core 1.7s ease-in-out infinite; }
html body #main-content .goals-section.r158-room .fig-meta .mote{ color:#7df0dc; animation:r213-mote 3s ease-in-out infinite; }
html body #main-content .goals-section.r158-room .fig-meta .m2{ animation-delay:-1.1s; }
html body #main-content .goals-section.r158-room .fig-meta .m3{ animation-delay:-2.1s; }
@keyframes r213-flame{ 0%,100%{ transform:scaleY(1) scaleX(1); } 50%{ transform:scaleY(1.09) scaleX(.93); } }
@keyframes r213-core{ 0%,100%{ opacity:.7; transform:scale(.82); } 50%{ opacity:1; transform:scale(1.12); } }
@keyframes r213-mote{ 0%,100%{ transform:translateY(2px); opacity:.35; } 50%{ transform:translateY(-9px); opacity:.95; } }
html body #main-content .goals-section.r158-room .r213-card:hover .fig-meta .fl{ animation-duration:1.4s; }
html body #main-content .goals-section.r158-room .r213-card:hover .fig-meta .fl-in{ animation-duration:1.1s; }

/* 03 Longevity — flowing DNA double-helix */
html body #main-content .goals-section.r158-room .fig-dna .dna-flow{ animation:r213-dna 6.5s linear infinite; }
@keyframes r213-dna{ to{ transform:translateX(-48px); } }
html body #main-content .goals-section.r158-room .fig-dna .strand{ stroke-width:1.7; }
html body #main-content .goals-section.r158-room .fig-dna .sb{ opacity:.55; }
html body #main-content .goals-section.r158-room .fig-dna .rungs line{ stroke:#2dd4bf; stroke-width:1.3; opacity:.42; }
html body #main-content .goals-section.r158-room .r213-card:hover .fig-dna .dna-flow{ animation-duration:3.4s; }

/* 04 Cognitive — brain with firing synapses */
html body #main-content .goals-section.r158-room .fig-brain .brain{ stroke:#5eead4; stroke-width:1.7; }
html body #main-content .goals-section.r158-room .fig-brain .fissure{ stroke:#5eead4; stroke-width:1.3; opacity:.5; }
html body #main-content .goals-section.r158-room .fig-brain .syn line{ stroke:#2dd4bf; stroke-width:1.2; stroke-dasharray:4 9; opacity:.55; animation:r213-sig 2.4s linear infinite; }
html body #main-content .goals-section.r158-room .fig-brain .syn line:nth-child(2n){ animation-duration:3s; animation-delay:-.8s; }
html body #main-content .goals-section.r158-room .fig-brain .syn line:nth-child(3n){ animation-duration:2.7s; animation-delay:-1.5s; }
@keyframes r213-sig{ to{ stroke-dashoffset:-56; } }
html body #main-content .goals-section.r158-room .fig-brain .syn-nodes circle{ color:#7df0dc; transform-box:fill-box; transform-origin:center; animation:r213-node 2.9s ease-in-out infinite; }
html body #main-content .goals-section.r158-room .fig-brain .syn-nodes circle:nth-child(2n){ animation-delay:-1s; }
html body #main-content .goals-section.r158-room .fig-brain .syn-nodes circle:nth-child(3n){ animation-delay:-1.8s; }
@keyframes r213-node{ 0%,100%{ opacity:.5; transform:scale(.8); } 50%{ opacity:1; transform:scale(1.25); } }
html body #main-content .goals-section.r158-room .r213-card:hover .fig-brain .syn line{ animation-duration:1.2s; opacity:.85; }

/* 05 Growth Hormone — ascending peptide chain (peptide beads building upward) */
html body #main-content .goals-section.r158-room .fig-growth .pep-bonds{ opacity:.48; }
html body #main-content .goals-section.r158-room .fig-growth .pep-beads .pb{ color:#5eead4; transform-box:fill-box; transform-origin:center; animation:r213-pepwave 3s ease-in-out infinite; }
html body #main-content .goals-section.r158-room .fig-growth .pep-beads .pb:nth-child(2){ animation-delay:.45s; }
html body #main-content .goals-section.r158-room .fig-growth .pep-beads .pb:nth-child(3){ animation-delay:.9s; }
html body #main-content .goals-section.r158-room .fig-growth .pep-beads .pb:nth-child(4){ animation-delay:1.35s; }
html body #main-content .goals-section.r158-room .fig-growth .pep-beads .pb:nth-child(5){ animation-delay:1.8s; }
html body #main-content .goals-section.r158-room .fig-growth .pep-beads .pb:nth-child(6){ animation-delay:2.25s; }
html body #main-content .goals-section.r158-room .fig-growth .pb-top{ filter:drop-shadow(0 0 5px rgba(94,234,212,.6)); }
@keyframes r213-pepwave{ 0%,70%,100%{ transform:scale(.82); opacity:.5; color:#5eead4; } 18%{ transform:scale(1.28); opacity:1; color:#aef6e8; } }
html body #main-content .goals-section.r158-room .fig-growth .pep-arrow{ transform-box:fill-box; transform-origin:center; opacity:.85; animation:r213-arrup 3s ease-in-out infinite; }
@keyframes r213-arrup{ 0%,100%{ transform:translateY(1.5px); opacity:.55; } 50%{ transform:translateY(-2px); opacity:1; } }
html body #main-content .goals-section.r158-room .r213-card:hover .fig-growth .pep-beads .pb{ animation-duration:1.7s; }

/* 06 Bundles — stacked planes, parallax float */
html body #main-content .goals-section.r158-room .fig-stack .pl{ stroke-width:1.6; fill:rgba(45,212,191,.06); }
html body #main-content .goals-section.r158-room .fig-stack .p1{ opacity:.95; animation:r213-floatA 4.4s ease-in-out infinite; }
html body #main-content .goals-section.r158-room .fig-stack .p2{ opacity:.66; animation:r213-floatB 4.4s ease-in-out infinite; }
html body #main-content .goals-section.r158-room .fig-stack .p3{ opacity:.4; animation:r213-floatC 4.4s ease-in-out infinite; }
@keyframes r213-floatA{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-2.5px); } }
@keyframes r213-floatB{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(1.5px); } }
@keyframes r213-floatC{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(3.5px); } }

/* ── entrance (armed by JS; default visible if JS fails) ── */
html body #main-content .goals-section.r158-room .r213-grid.r213-armed .r213-card{ opacity:0; transform:translateY(24px); }
html body #main-content .goals-section.r158-room .r213-grid.r213-armed .r213-card.r213-in{ opacity:1; transform:none; transition:opacity .65s ease, transform .65s cubic-bezier(.16,1,.3,1); }

/* ── reduced motion ── */
@media (prefers-reduced-motion: reduce){
    html body #main-content .goals-section.r158-room .r213-fig *,
    html body #main-content .goals-section.r158-room .r213-dot{ animation:none !important; }
    html body #main-content .goals-section.r158-room .fig-growth .pb{ transform:scale(1) !important; opacity:1 !important; color:#5eead4 !important; }
    html body #main-content .goals-section.r158-room .fig-heal .hp-ring{ opacity:.2 !important; }
    html body #main-content .goals-section.r158-room .r213-grid.r213-armed .r213-card{ opacity:1 !important; transform:none !important; }
    html body #main-content .goals-section.r158-room .r213-inner{ transition:none !important; }
}

/* ── responsive ── */
@media (max-width:920px){
    html body #main-content .goals-section.r158-room .r213-card{ min-height:340px; }
}
@media (max-width:560px){
    html body #main-content .goals-section.r158-room .r213-card{ min-height:330px; perspective:none; }
    html body #main-content .goals-section.r158-room .r213-inner{ transform:none !important; }
    html body #main-content .goals-section.r158-room .r213-fig{ height:140px; }
    html body #main-content .goals-section.r158-room .r213-name{ font-size:21px !important; }
    html body #main-content .goals-section.r158-room .r213-body{ padding:0 20px 20px; }
}

/* ════════════════════════════════════════════════════════════════════════
   R214 · CERTIFICATION GAUGES — remodel of the "Verified by independent labs"
   trust block. Keeps the warm-charcoal lifted panel (#1c1714) of the lower
   ink wing; rebuilds the four credentials as plates that each carry a
   meaningful animated graphic (purity dial, star rating, tested shield-check,
   dispatch clock). Numbers count up. Default state = final/correct visual
   (no-JS safe); .r214-armed (added by JS) resets gauges to their start and
   .r214-in plays each in sync with its plate's staggered entrance.
   ════════════════════════════════════════════════════════════════════════ */
html body section.r214-verified{ position:relative; overflow:hidden; }
/* atmosphere layer — a real element (collision-proof vs the r158 decorative pseudo) */
html body section.r214-verified .r214-atmos{
    position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
}
/* drifting teal aurora — oversized gradient layer moved on the GPU (transform only) */
html body section.r214-verified .r214-atmos .r214-aurora{
    position:absolute; inset:-30%;
    background:
      radial-gradient(38% 52% at 22% 16%, rgba(45,212,191,.17), transparent 70%),
      radial-gradient(34% 46% at 82% 30%, rgba(20,184,166,.13), transparent 72%),
      radial-gradient(42% 52% at 58% 92%, rgba(94,234,212,.09), transparent 70%);
    will-change:transform;
    animation:r214-aurora 26s ease-in-out infinite alternate;
}
/* framing vignette + fine grain, painted over the aurora */
html body section.r214-verified .r214-atmos .r214-veil{
    position:absolute; inset:0;
    background:
      radial-gradient(125% 92% at 50% 40%, transparent 50%, rgba(8,6,5,.5) 100%),
      radial-gradient(rgba(255,255,255,.02) 1px, transparent 1.4px);
    background-size:auto, 26px 26px;
}
@keyframes r214-aurora{
    0%   { transform:translate3d(-2%,-1%,0) scale(1.02); }
    50%  { transform:translate3d(2%,1.5%,0) scale(1.06); }
    100% { transform:translate3d(-1%,2%,0) scale(1.03); }
}
@media (prefers-reduced-motion: reduce){
    html body section.r214-verified .r214-aurora{ animation:none; transform:translate3d(0,0,0) scale(1.03); }
}
html body section.r214-verified .r158-inner{ position:relative; z-index:1; }

/* ── header ── */
html body #main-content section.r214-verified .r214-head{ max-width:62ch; margin:0 0 clamp(38px,5vw,60px); }
html body #main-content section.r214-verified .r214-heading{
    font-family:'Bricolage Grotesque',sans-serif !important; color:#f3ede2 !important;
    font-size:clamp(31px,4.5vw,57px); line-height:1.04; letter-spacing:-.022em;
    font-weight:700; margin:0 0 14px; text-wrap:balance;
}
html body #main-content section.r214-verified .r214-heading .r214-em{
    font-family:'Fraunces',serif !important; font-style:italic; font-weight:500;
    color:#5eead4 !important; letter-spacing:-.005em;
}
html body #main-content section.r214-verified .r214-sub{
    font-family:'JetBrains Mono',monospace !important; color:#b6afa2 !important;
    font-size:13px; letter-spacing:.01em; line-height:1.65; margin:0; max-width:56ch;
}

/* ── grid + plates ── */
html body section.r214-verified .r214-grid{
    display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(15px,1.8vw,24px);
}
html body section.r214-verified .r214-plate{
    position:relative; display:flex; flex-direction:column; align-items:flex-start;
    min-height:clamp(212px,21vw,238px); padding:clamp(22px,2.1vw,28px) clamp(20px,1.9vw,26px);
    border-radius:14px; text-decoration:none; overflow:hidden;
    background:linear-gradient(180deg,#241e19,#1c1713);
    border:1px solid rgba(255,255,255,.085);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 7px 14px rgba(0,0,0,.28);
    transition:transform .42s cubic-bezier(.16,1,.3,1), border-color .42s ease, box-shadow .42s ease;
}
html body section.r214-verified .r214-plate:hover{
    transform:translateY(-6px);
    border-color:rgba(45,212,191,.42);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 20px 40px rgba(0,0,0,.42), 0 0 0 1px rgba(45,212,191,.16);
}
html body section.r214-verified .r214-plate:focus-visible{ outline:2px solid #2dd4bf; outline-offset:3px; }

html body #main-content section.r214-verified .r214-idx{
    position:absolute; top:15px; right:17px;
    font-family:'JetBrains Mono',monospace !important; font-size:11px; letter-spacing:.16em;
    color:#2dd4bf !important; font-weight:600; opacity:.78;
}
html body section.r214-verified .r214-gfx{
    display:flex; align-items:center; height:60px; margin:0 0 16px; color:#5eead4;
}
html body section.r214-verified .r214-svg{ height:56px; width:auto; overflow:visible; display:block; }
html body section.r214-verified .r214-svg.gfx-stars{ height:23px; }

html body #main-content section.r214-verified .r214-num{
    font-family:'Bricolage Grotesque',sans-serif !important; color:#f3ede2 !important;
    font-weight:700; font-size:clamp(30px,3.3vw,44px); line-height:1; letter-spacing:-.03em;
    font-variant-numeric:tabular-nums; margin:0;
}
html body #main-content section.r214-verified .r214-plate[data-r214="tested"] .r214-num,
html body #main-content section.r214-verified .r214-plate[data-r214="dispatch"] .r214-num{
    font-size:clamp(23px,2.5vw,31px); letter-spacing:-.02em;
}
html body #main-content section.r214-verified .r214-label{
    font-family:'JetBrains Mono',monospace !important; font-size:11px; letter-spacing:.13em;
    text-transform:uppercase; color:#2dd4bf !important; font-weight:600; margin:11px 0 4px;
}
html body #main-content section.r214-verified .r214-line{
    font-family:'JetBrains Mono',monospace !important; font-size:12px; color:#9a9387 !important; letter-spacing:.01em;
}

/* ── graphic 01 · purity dial (default = filled to ~99%) ── */
html body section.r214-verified .gfx-dial .dl-track{ fill:none; stroke:rgba(94,234,212,.15); stroke-width:5; }
html body section.r214-verified .gfx-dial .dl-fill{
    fill:none; stroke:#5eead4; stroke-width:5; stroke-linecap:round;
    stroke-dasharray:157; stroke-dashoffset:2; filter:drop-shadow(0 0 4px rgba(94,234,212,.5));
}
/* ── graphic 02 · star rating (default = lit) ── */
html body section.r214-verified .gfx-stars use{
    fill:#5eead4; transform-box:fill-box; transform-origin:center;
    filter:drop-shadow(0 0 2px rgba(94,234,212,.35));
}
/* ── graphic 03 · tested shield + check (default = drawn) ── */
html body section.r214-verified .gfx-shield .sh{
    fill:rgba(94,234,212,.05); stroke:#5eead4; stroke-width:2.4; stroke-linejoin:round;
    transform-box:fill-box; transform-origin:center;
}
html body section.r214-verified .gfx-shield .ck{
    fill:none; stroke:#aef6e8; stroke-width:3.4; stroke-linecap:round; stroke-linejoin:round;
    stroke-dasharray:34; stroke-dashoffset:0;
}
/* ── graphic 04 · dispatch clock ── */
html body section.r214-verified .gfx-clock .cl-face{ fill:none; stroke:#5eead4; stroke-width:2.4; opacity:.85; }
html body section.r214-verified .gfx-clock .cl-ticks line{ stroke:rgba(94,234,212,.55); stroke-width:1.6; stroke-linecap:round; }
html body section.r214-verified .gfx-clock .cl-hour{ stroke:#d3efe8; stroke-width:2.6; stroke-linecap:round; }
html body section.r214-verified .gfx-clock .cl-min{ stroke:#5eead4; stroke-width:2.2; stroke-linecap:round; transform-box:view-box; transform-origin:32px 32px; }
html body section.r214-verified .gfx-clock .cl-pin{ color:#5eead4; }
html body section.r214-verified.r214-verified .r214-grid.r214-run .gfx-clock .cl-min{ animation:r214-sweep 6s linear infinite; }
@keyframes r214-sweep{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }

/* ── armed (JS) resets gauges to their start + hides plates for entrance ── */
html body section.r214-verified .r214-grid.r214-armed .r214-plate{ opacity:0; transform:translateY(22px); }
html body section.r214-verified .r214-grid.r214-armed .gfx-dial .dl-fill{ stroke-dashoffset:157; }
html body section.r214-verified .r214-grid.r214-armed .gfx-stars use{ fill:rgba(94,234,212,.16); filter:none; }
html body section.r214-verified .r214-grid.r214-armed .gfx-shield .sh{ opacity:.2; transform:scale(.78); }
html body section.r214-verified .r214-grid.r214-armed .gfx-shield .ck{ stroke-dashoffset:34; }

/* ── in-view → entrance + each gauge plays ── */
html body section.r214-verified .r214-grid.r214-armed .r214-plate.r214-in{
    opacity:1; transform:none; transition:opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1);
}
html body section.r214-verified .r214-grid.r214-armed .r214-plate.r214-in .gfx-dial .dl-fill{ animation:r214-dial 1.4s cubic-bezier(.23,1,.32,1) .12s forwards; }
html body section.r214-verified .r214-grid.r214-armed .r214-plate.r214-in .gfx-stars use{ animation:r214-star .55s cubic-bezier(.23,1,.32,1) forwards; }
html body section.r214-verified .r214-grid.r214-armed .r214-plate.r214-in .gfx-stars use:nth-of-type(1){ animation-delay:.06s; }
html body section.r214-verified .r214-grid.r214-armed .r214-plate.r214-in .gfx-stars use:nth-of-type(2){ animation-delay:.16s; }
html body section.r214-verified .r214-grid.r214-armed .r214-plate.r214-in .gfx-stars use:nth-of-type(3){ animation-delay:.26s; }
html body section.r214-verified .r214-grid.r214-armed .r214-plate.r214-in .gfx-stars use:nth-of-type(4){ animation-delay:.36s; }
html body section.r214-verified .r214-grid.r214-armed .r214-plate.r214-in .gfx-stars use:nth-of-type(5){ animation-delay:.46s; }
html body section.r214-verified .r214-grid.r214-armed .r214-plate.r214-in .gfx-shield .sh{ animation:r214-stamp .6s cubic-bezier(.23,1,.32,1) forwards; }
html body section.r214-verified .r214-grid.r214-armed .r214-plate.r214-in .gfx-shield .ck{ animation:r214-draw .55s ease-out .3s forwards; }
@keyframes r214-dial{ from{ stroke-dashoffset:157; } to{ stroke-dashoffset:2; } }
@keyframes r214-star{ 0%{ fill:rgba(94,234,212,.16); transform:scale(.7); } 60%{ transform:scale(1.18); } 100%{ fill:#5eead4; transform:scale(1); } }
@keyframes r214-stamp{ 0%{ transform:scale(.78); opacity:.2; } 60%{ transform:scale(1.05); } 100%{ transform:scale(1); opacity:1; } }
@keyframes r214-draw{ to{ stroke-dashoffset:0; } }

/* hover energizes the clock */
html body section.r214-verified .r214-plate:hover .gfx-clock .cl-min{ animation-duration:2.4s; }

/* ── reduced motion: no armed class is added by JS, so gauges sit at their
   final default; also kill the continuous clock + plate transitions. ── */
@media (prefers-reduced-motion: reduce){
    html body section.r214-verified .gfx-clock .cl-min{ animation:none !important; }
    html body section.r214-verified .r214-plate{ transition:none !important; }
}

/* ── responsive ── */
@media (max-width:1024px){
    html body section.r214-verified .r214-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
    html body section.r214-verified .r214-grid{ grid-template-columns:1fr; }
    html body section.r214-verified .r214-plate{ min-height:0; padding:24px 22px; }
    html body #main-content section.r214-verified .r214-heading{ font-size:clamp(28px,8vw,40px); }
}

/* ════════════════════════════════════════════════════════════════════════
   R216 · "What Sets Us Apart" manifesto — type / copy / spacing refresh +
   atmospheric background. Warm-ink-wing bg (#181310) kept for cohesion with
   the verified panel above; a faint blueprint data-grid ("we publish the
   data") + a soft teal glow behind the statement + a framing veil give depth.
   Type rules carry the full class chain so they out-specify the R164 dark-wing
   colour overrides.
   ════════════════════════════════════════════════════════════════════════ */
html body section.r216-std{ position:relative; overflow:hidden; }
html body section.r216-std .r216-atmos{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
/* faint blueprint data-grid, masked to fade toward the edges */
html body section.r216-std .r216-atmos .r216-grid{
    position:absolute; inset:0;
    background-image:
      linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
    background-size:64px 64px;
    -webkit-mask-image:radial-gradient(125% 95% at 28% 34%, #000 0%, transparent 72%);
            mask-image:radial-gradient(125% 95% at 28% 34%, #000 0%, transparent 72%);
}
/* R221: removed the green-hue glow that sat behind the statement */
html body section.r216-std .r216-atmos .r216-glow{ display:none !important; }
/* framing vignette */
html body section.r216-std .r216-atmos .r216-veil{
    position:absolute; inset:0;
    background:radial-gradient(130% 96% at 50% 42%, transparent 52%, rgba(8,6,4,.5) 100%);
}

@media (prefers-reduced-motion: reduce){ html body section.r216-std .r216-glow{ animation:none; } }
html body section.r216-std .r158-inner{ position:relative; z-index:1; }

/* ── statement: solid headline + Fraunces accent (drop the clip-text sheen) ── */
html body #main-content section.why-section.r159-standard.r158-exhibit.r216-std .r159-std-headline{
    background-image:none !important; -webkit-text-fill-color:currentColor !important;
    color:#f3ede2 !important; font-size:clamp(38px,5.3vw,82px) !important; line-height:1.0 !important;
    letter-spacing:-.028em !important; max-width:15ch !important; animation:none !important; text-wrap:balance;
}
html body #main-content section.why-section.r159-standard.r158-exhibit.r216-std .r159-std-headline .r216-em{
    font-family:'Fraunces',serif !important; font-style:italic; font-weight:500;
    color:#5eead4 !important; -webkit-text-fill-color:#5eead4 !important; letter-spacing:-.01em;
}
html body #main-content section.why-section.r159-standard.r158-exhibit.r216-std .r216-lede{
    font-family:'Inter',sans-serif !important; color:#c7c0b4 !important;
    font-size:16px; line-height:1.62; letter-spacing:.002em; margin:26px 0 0; max-width:42ch;
}

/* ── ledger: roomier rhythm, wider value, brighter body, stronger metric ── */
html body section.r216-std .r159-std-row{ grid-template-columns:116px 1fr auto; gap:8px 26px; padding:24px 0 24px 16px; }
html body #main-content section.why-section.r159-standard.r158-exhibit.r216-std .ws-k{ font-size:11.5px !important; letter-spacing:.16em; color:#2dd4bf !important; }
html body #main-content section.why-section.r159-standard.r158-exhibit.r216-std .ws-v{ font-family:'Inter',sans-serif !important; font-size:15px !important; line-height:1.55 !important; color:#c4bdb1 !important; max-width:36ch; }
html body #main-content section.why-section.r159-standard.r158-exhibit.r216-std .ws-m{ font-size:clamp(20px,2.1vw,30px) !important; color:#f3ede2 !important; letter-spacing:-.025em !important; }
/* hairlines + hover tuned for the warm-ink ground */
html body section.r216-std .r159-std-row::after,
html body section.r216-std .r159-std-row:first-child::before{ background:rgba(255,255,255,.12) !important; }
html body #main-content section.r216-std .r159-std-row:hover{ background:rgba(45,212,191,.05) !important; border-left-color:#2dd4bf !important; }

@media (max-width:860px){
    html body #main-content section.why-section.r159-standard.r158-exhibit.r216-std .r216-lede{ font-size:15px; max-width:none; }
}

/* ════════════════════════════════════════════════════════════════════════
   R217 · Hero "Browse the catalog" CTA — ground the teal glow UNDER the pill.
   The glow previously bled a green hue ABOVE the button (30–40px blur with
   only a 10–16px down-offset). Negative spread + larger offset keeps the
   teal lift beneath the pill. Must override the later R198 static/hover rules
   AND redefine the breathe keyframe (an animated box-shadow beats static rules,
   so the keyframe is what actually paints while the CTA breathes).
   ════════════════════════════════════════════════════════════════════════ */
html body #hero.r159 .hero-cta-inline{
    /* R220: + a soft even teal halo around all edges (subtle) */
    /* R222: eased the edge-glow halo + teal saturation back a touch */
    box-shadow:0 0 16px 1px rgba(45,212,191,.16), 0 16px 26px -10px rgba(20,184,166,.315), 0 1px 0 rgba(255,255,255,.25) inset !important;
    /* R223: ever-so-slightly lower brightness (~3%) */
    background:linear-gradient(135deg,#2fc7b7 0%,#29c0ae 42%,#17ab98 100%) !important;
}
html body #hero.r159 .hero-cta-inline:hover{
    box-shadow:0 0 22px 2px rgba(45,212,191,.25), 0 20px 34px -12px rgba(20,184,166,.42), 0 1px 0 rgba(255,255,255,.35) inset !important;
}
@keyframes r166-cta-breathe{
    0%,100%{ box-shadow:0 0 15px 1px rgba(45,212,191,.15), 0 14px 24px -10px rgba(20,184,166,.28), 0 1px 0 rgba(255,255,255,.25) inset; }
    50%    { box-shadow:0 0 20px 2px rgba(45,212,191,.21), 0 20px 32px -12px rgba(20,184,166,.40), 0 1px 0 rgba(255,255,255,.30) inset; }
}

/* ════════════════════════════════════════════════════════════════════════
   R219 · "What Sets Us Apart" — deep typography pass.
   LEFT (editorial statement): Bricolage display + the Fraunces italic accent
   pushed to its DISPLAY optical size (dramatic thick/thin), a teal brand-period,
   and a two-tone Inter lede with the key claim emphasized.
   RIGHT (instrument ledger): each metric is figure-forward — a big Bricolage
   numeral with the unit demoted to small tracked JetBrains-Mono.
   Full class chain so these out-specify the R164 dark-wing colour overrides.
   ════════════════════════════════════════════════════════════════════════ */
/* — headline: tuned leading + tracking + variable optical sizing — */
html body #main-content section.why-section.r159-standard.r158-exhibit.r216-std .r159-std-headline{
    font-optical-sizing:auto;
    font-weight:800 !important; line-height:1.015 !important; letter-spacing:-.03em !important;
}
/* — the Fraunces italic at display opsz: high-contrast, elegant — */
html body #main-content section.why-section.r159-standard.r158-exhibit.r216-std .r216-em{
    font-family:'Fraunces',serif !important; font-style:italic !important;
    font-variation-settings:"opsz" 144, "wght" 500, "SOFT" 0, "WONK" 0;
    color:#5eead4 !important; -webkit-text-fill-color:#5eead4 !important; letter-spacing:-.012em !important;
}
/* — a deliberate teal brand-period — */
html body #main-content section.why-section.r159-standard.r158-exhibit.r216-std .r216-dot{
    color:#5eead4 !important;
}
/* — lede: editorial lead, two-tone, ideal measure — */
html body #main-content section.why-section.r159-standard.r158-exhibit.r216-std .r216-lede{
    font-family:'Inter',sans-serif !important; font-size:17px !important; line-height:1.6 !important;
    letter-spacing:.002em !important; color:#b9b2a6 !important; margin:28px 0 0 !important;
    max-width:40ch !important; text-wrap:pretty;
}
html body #main-content section.why-section.r159-standard.r158-exhibit.r216-std .r216-lede-em{
    color:#ece6db !important; font-weight:500 !important;
}

/* — figure-forward metrics: big numeral + demoted mono unit — */
html body #main-content section.why-section.r159-standard.r158-exhibit.r216-std .ws-m{
    display:inline-flex !important; align-items:baseline; justify-content:flex-end; gap:.16em; white-space:nowrap;
}
html body #main-content section.why-section.r159-standard.r158-exhibit.r216-std .ws-m .m-fig{
    font-family:'Bricolage Grotesque',sans-serif !important; font-weight:700; font-optical-sizing:auto;
    font-size:clamp(31px,2.9vw,42px); line-height:.85; letter-spacing:-.03em; color:#f4eee3;
    font-variant-numeric:tabular-nums;
}
html body #main-content section.why-section.r159-standard.r158-exhibit.r216-std .ws-m .m-unit{
    font-family:'JetBrains Mono',monospace !important; font-weight:600; font-size:11px;
    text-transform:uppercase; letter-spacing:.04em; color:#8f897d; line-height:1;
}
html body #main-content section.why-section.r159-standard.r158-exhibit.r216-std .ws-m .m-pre{ letter-spacing:0; }
/* reserve a fixed slot for the trailing unit so the figures right-align into one column */
html body #main-content section.why-section.r159-standard.r158-exhibit.r216-std .ws-m .m-fig + .m-unit{ display:inline-block; min-width:52px; text-align:left; }

/* — labels + values refined; narrower label column gives the prose more room — */
html body #main-content section.why-section.r159-standard.r158-exhibit.r216-std .ws-k{
    font-size:13px !important; letter-spacing:.12em !important; color:#43e0cb !important; font-weight:600 !important;
}
html body #main-content section.why-section.r159-standard.r158-exhibit.r216-std .ws-v{
    font-family:'Inter',sans-serif !important; font-size:15px !important; line-height:1.5 !important;
    color:#c5beb2 !important; max-width:32ch;
}
/* rebalance the spread toward the ledger so the value prose isn't squeezed */
html body section.r216-std .r159-std-spread{ grid-template-columns:0.92fr 1.08fr !important; gap:clamp(34px,4.2vw,72px) !important; }
html body section.r216-std .r159-std-row{ grid-template-columns:92px 1fr auto !important; gap:8px 22px !important; align-items:start; }

@media (max-width:860px){
    html body section.r216-std .r159-std-spread{ grid-template-columns:1fr !important; gap:clamp(28px,7vw,46px) !important; }
    html body #main-content section.why-section.r159-standard.r158-exhibit.r216-std .r216-lede{ font-size:16px !important; max-width:none !important; }
}
@media (max-width:560px){
    html body section.r216-std .r159-std-row{ grid-template-columns:1fr auto !important; gap:4px 16px !important; }
    html body #main-content section.why-section.r159-standard.r158-exhibit.r216-std .ws-v{ grid-column:1 / -1 !important; order:3; max-width:none; }
    html body #main-content section.why-section.r159-standard.r158-exhibit.r216-std .ws-m .m-fig{ font-size:31px; }
}

/* R224/R226: hero purity caption — a touch brighter + a faint legibility
   shadow so it lifts off the busy chromatogram, and the live "8" gets a soft
   teal glow (reads as a lit data point). Mono size/tracking unchanged. */
html body #hero.r159 .hero-mono-sub{ color:#dcd8d0 !important; text-shadow:0 1px 2px rgba(0,0,0,.5); }
html body #hero.r159 .hero-mono-sub .hms-dot{ text-shadow:0 0 8px rgba(45,212,191,.4); }
html body #hero.r159 .hero-mono-sub .hero-mono-sub-count{ text-shadow:0 0 9px rgba(45,212,191,.45); }

/* ════════════════════════════════════════════════════════════════════════
   R227 · "Common Questions" FAQ + testimonial micro-elements — polish.
   FAQ: drop the templatey "Q.0X" numbering (impeccable bans numbered-marker
   scaffolding), let the meaningful per-question icon anchor each row, elevate
   the question type, and flatten the heavy ghost-card shadow. Refine the
   verified/ordered pills and make the 4.9/5 review summary lead.
   ════════════════════════════════════════════════════════════════════════ */
/* — FAQ — */
html body #main-content .home-faq-section.r159-catalog .r159-cat-num{ display:none !important; }
html body .home-faq-section.r159-catalog .home-faq-item::before{ display:none; }   /* drop the fussy inner frame */
html body .home-faq-section.r159-catalog .home-faq-item{
    border-radius:11px !important;
    box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 5px 14px rgba(10,10,10,.05) !important;
}
html body .home-faq-section.r159-catalog .home-faq-item summary{ padding:19px 24px !important; gap:0 !important; }
html body #main-content .home-faq-section.r159-catalog .hfaq-q{
    font-size:1.06rem; font-weight:600 !important; letter-spacing:-.006em; gap:14px;
}
html body .home-faq-section.r159-catalog .hfaq-q i{ font-size:1rem !important; width:22px !important; opacity:.92; }
html body .home-faq-section.r159-catalog .hfaq-a{ padding-left:60px !important; }
html body .home-faq-section.r159-catalog .home-faq-item[open]{
    box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 16px 32px rgba(10,10,10,.10), 0 0 0 1px rgba(13,148,136,.16) !important;
}
html body .home-faq-section.r159-catalog .home-faq-item:not([open]):hover{
    box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 13px 26px rgba(10,10,10,.09), 0 0 0 1px rgba(13,148,136,.14) !important;
}
@media (max-width:640px){
    html body .home-faq-section.r159-catalog .hfaq-a{ padding-left:24px !important; }
    html body #main-content .home-faq-section.r159-catalog .hfaq-q{ font-size:.96rem; }
}

/* — review summary: 4.9/5 leads, refined — */
html body .testimonials-section.r159-quotes .reviews-stars{ font-size:15px; }
html body #main-content .testimonials-section.r159-quotes .reviews-text{ font-size:12.5px; }
html body #main-content .testimonials-section.r159-quotes .reviews-text strong{ font-size:14.5px; font-weight:700; letter-spacing:.02em; }
/* — verified + ordered pills: consistent, crisper — */
html body #main-content .testimonials-section.r159-quotes .r159-quote-plaque{ padding:7px 14px; gap:8px; letter-spacing:.11em; }
html body #main-content .testimonials-section.r159-quotes .r159-quote-author-lines .testimonial-product{
    display:inline-flex; align-items:center; gap:6px; align-self:flex-start; margin-top:7px;
    font-size:11px; letter-spacing:.08em; padding:5px 11px; border-radius:999px;
    background:rgba(45,212,191,.08); border:1px solid rgba(45,212,191,.26);
}

/* ════════════════════════════════════════════════════════════════════════
   R225 · Testimonials polish.
   #4 featured card → two columns: quote left, author/rating as a right-rail card.
   #2 the active filmstrip card no longer repeats the quote — it reads
      "▲ Showing above" so it's clearly the selector for the big quote.
   #3 the off-palette cream watermark quote-mark was removed in the HTML.
   #5 auto-advance + pause-on-hover already live in the engine.
   ════════════════════════════════════════════════════════════════════════ */
/* — two-column featured stage — */
html body .testimonials-section.r159-quotes .r159-quote-featured{
    display:grid; grid-template-columns:1.55fr .9fr; grid-template-rows:auto auto;
    column-gap:clamp(26px,3.6vw,58px); row-gap:8px; align-items:start;
}
html body .testimonials-section.r159-quotes .r159-quote-mark{ grid-column:1; grid-row:1; }
html body .testimonials-section.r159-quotes .r159-quote-body{ grid-column:1; grid-row:2; }
html body #main-content .testimonials-section.r159-quotes .r159-quote-body .testimonial-text{ max-width:34ch; }
/* author/rating → a right-rail card, vertically centred against the quote */
html body .testimonials-section.r159-quotes .r159-quote-meta{
    grid-column:2; grid-row:1 / span 2; align-self:center; margin-top:0 !important;
    padding:clamp(20px,2vw,28px); border:1px solid rgba(255,255,255,.10); border-radius:14px;
    background:rgba(255,255,255,.035); gap:16px;
}

/* — active filmstrip card: drop the duplicate snippet, show "Showing above" — */
html body #main-content .testimonials-section.r159-quotes .r159-strip-card.is-active .r159-strip-snippet{ display:none !important; }
html body #main-content .testimonials-section.r159-quotes .r159-strip-card.is-active::after{
    content:"\25B2  Showing above"; font-family:'JetBrains Mono',monospace; font-weight:600;
    font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:#2dd4bf; margin-top:2px;
}
html body .testimonials-section.r159-quotes .r159-strip-card:not(.is-active){ opacity:.92; }
html body .testimonials-section.r159-quotes .r159-strip-card:not(.is-active):hover{ opacity:1; }

/* — mobile: collapse the featured card back to one column — */
@media (max-width:760px){
    html body .testimonials-section.r159-quotes .r159-quote-featured{ grid-template-columns:1fr; }
    html body .testimonials-section.r159-quotes .r159-quote-mark,
    html body .testimonials-section.r159-quotes .r159-quote-body,
    html body .testimonials-section.r159-quotes .r159-quote-meta{ grid-column:1 !important; grid-row:auto !important; }
    html body .testimonials-section.r159-quotes .r159-quote-meta{ margin-top:22px !important; align-self:stretch; }
    html body #main-content .testimonials-section.r159-quotes .r159-quote-body .testimonial-text{ max-width:none; }
}

/* ════════════════════════════════════════════════════════════════════════
   R228 · hero stat caption — reshaped into a clear two-tier label so "99.62%"
   reads unambiguously. A prominent "MEAN HPLC PURITY" line sits directly under
   the number (the unmissable "what"), then a quieter independently-verified
   proof line. The big number itself is untouched.
   ════════════════════════════════════════════════════════════════════════ */
html body #hero.r159 .hero-mono-sub{ display:flex; flex-direction:column; align-items:flex-start; gap:5px; }
html body #hero.r159 .hero-mono-sub .hms-label{
    /* R230: distinctive Fraunces serif label — editorial contrast to the sans number */
    font-family:'Fraunces',serif !important; text-transform:uppercase; font-weight:500; font-optical-sizing:auto;
    font-size:14.5px; letter-spacing:.145em; color:#f1ece3; line-height:1.2;
}
html body #hero.r159 .hero-mono-sub .hms-proof{
    font-family:'JetBrains Mono',monospace; text-transform:none; font-weight:400;
    font-size:11px; letter-spacing:.02em; color:#a8a49a; line-height:1.2;
}
html body #hero.r159 .hero-mono-sub .hero-mono-sub-count{ color:#2dd4bf !important; font-weight:700; text-shadow:0 0 9px rgba(45,212,191,.45); }
@media (max-width:480px){
    html body #hero.r159 .hero-mono-sub .hms-label{ font-size:13px; }
}

/* ════════════════════════════════════════════════════════════════════════
   R229 · Testimonial trust chips — warmer + more premium (less cold mono).
   Review summary leads with a big Bricolage "4.9" + a readable Inter count;
   the Verified-Buyer + Ordered chips get crisper teal material + icons.
   ════════════════════════════════════════════════════════════════════════ */
html body #main-content .testimonials-section.r159-quotes .reviews-summary{
    gap:11px; padding:8px 16px 8px 14px; border:1px solid rgba(255,255,255,.10) !important; border-radius:999px;
    background:rgba(255,255,255,.025);
}
html body .testimonials-section.r159-quotes .reviews-stars{ font-size:16px !important; letter-spacing:2.5px !important; color:#f5b324 !important; }
html body #main-content .testimonials-section.r159-quotes .reviews-text{
    font-family:'Inter',sans-serif !important; font-size:13px !important; letter-spacing:0 !important;
    color:#b6afa3 !important; display:inline-flex; align-items:baseline; gap:2px;
}
html body #main-content .testimonials-section.r159-quotes .reviews-text strong.rev-score{
    font-family:'Bricolage Grotesque',sans-serif !important; font-weight:700 !important; font-size:22px !important;
    letter-spacing:-.02em !important; color:#f3ede2 !important; line-height:1;
}
html body #main-content .testimonials-section.r159-quotes .rev-rest{ color:#b3aca0 !important; }
html body #main-content .testimonials-section.r159-quotes .rev-sep{ opacity:.45; margin:0 3px; }
/* verified-buyer + ordered chips — crisper, consistent teal material */
html body #main-content .testimonials-section.r159-quotes .r159-quote-plaque{
    background:rgba(45,212,191,.10) !important; border:1px solid rgba(45,212,191,.34) !important;
    padding:7px 14px; gap:8px; letter-spacing:.1em; color:#5eead4 !important;
}
html body .testimonials-section.r159-quotes .r159-quote-plaque i{ color:#5eead4 !important; font-size:12px; }
html body #main-content .testimonials-section.r159-quotes .r159-quote-author-lines .testimonial-product{
    background:rgba(45,212,191,.08) !important; border:1px solid rgba(45,212,191,.28) !important;
    padding:6px 12px; gap:7px; letter-spacing:.05em; color:#7fe6d6 !important;
}

/* ════════════════════════════════════════════════════════════════════════
   R231 · Hero trust row (★ 4.9 · 200+ verified orders | See a sample COA) —
   slightly larger + more appealing: "4.9" gets Bricolage display character,
   the star brightens with a soft glow, counts + COA link scale up a touch.
   ════════════════════════════════════════════════════════════════════════ */
html body #hero.r159 .hero-trust-row{ gap:18px !important; }
html body #hero.r159 .htr-rating{ font-size:13.5px !important; color:#c2bcb1 !important; }
/* R232: gold rating star, re-centered against the larger Bricolage "4.9" */
html body #hero.r159 .htr-rating i{
    color:#f5b324 !important; font-size:13.5px !important; text-shadow:0 0 6px rgba(245,179,36,.45) !important;
    position:relative !important; top:-0.8px !important; left:-1.5px !important;
}
html body #hero.r159 .htr-rating strong{
    font-family:'Bricolage Grotesque',sans-serif !important; font-size:17px !important; font-weight:700 !important;
    letter-spacing:-.01em !important; color:#fbfaf6 !important;
}
html body #hero.r159 .htr-sub{ color:#9a978f !important; }
html body #hero.r159 .htr-sub .htr-count{ color:#e8e4dc !important; font-size:13.5px !important; }
html body #hero.r159 .htr-div{ height:16px !important; }
html body #hero.r159 .htr-coa{ font-size:14px !important; color:#abe5da !important; }
html body #hero.r159 .htr-coa i{ font-size:10px !important; }

/* ════════════════════════════════════════════════════════════════════════
   R233 · Hero "Browse the catalog" CTA — three reversible micro-refinements.
   ▸ TO REVERT: delete this entire R233 block. That restores, exactly:
       (1) the R171 circular arrow chip   (styles.css ~61340–61352)
       (2) the R165 white .38 hover sheen (styles.css ~61111–61120)
       (3) the R167 label tracking .005em (styles.css ~61256)
   ────────────────────────────────────────────────────────────────────────
   (1) BARE ARROW — drop the circular chip ("button-within-a-button"); the
       glyph itself slides on hover. Cleaner / more modern.
   (2) SOFTER "LIT-GLASS" SHEEN — re-tune the existing R165 glint to a fainter,
       smoother sweep (peak white .38 → ~.22, wider, eased a touch slower).
   (3) LABEL TRACKING — a barely-there open-up (.005em → .014em). Geist ships
       discrete Google-Fonts weights (400/500/600/700), so a "hair" weight
       move would snap a full step; tracking carries the refinement, weight
       stays 600.
   ════════════════════════════════════════════════════════════════════════ */

/* (1) bare arrow — no chip; the glyph slides on hover */
html body #hero.r159 .hero-cta-inline .hero-cta-arrow{
    width:auto !important; height:auto !important; border-radius:0 !important;
    background:none !important; margin-left:2px !important;
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
    transform:none !important;
    transition:transform .3s var(--r154-ease-out-quart,cubic-bezier(0.16,1,0.3,1)) !important;
}
html body #hero.r159 .hero-cta-inline .hero-cta-arrow i{
    font-size:13px !important; color:#04201d !important; line-height:1 !important;
    transition:none !important;
}
html body #hero.r159 .hero-cta-inline:hover .hero-cta-arrow{ background:none !important; transform:translateX(5px) !important; }
html body #hero.r159 .hero-cta-inline:hover .hero-cta-arrow i{ transform:none !important; }
@media (prefers-reduced-motion: reduce){
    html body #hero.r159 .hero-cta-inline .hero-cta-arrow{ transition:none !important; }
    html body #hero.r159 .hero-cta-inline:hover .hero-cta-arrow{ transform:none !important; }
}

/* (2) softer "lit-glass" sheen — re-tune the R165 ::after (keeps its skew,
   z-index, pointer-events; only the width / start / gradient / timing change) */
html body #hero.r159 .hero-cta-inline::after{
    width:55% !important; left:-72% !important;
    background:linear-gradient(100deg,
        transparent 0%,
        rgba(255,255,255,.09) 36%,
        rgba(255,255,255,.22) 50%,
        rgba(255,255,255,.09) 64%,
        transparent 100%) !important;
    transition:left .62s var(--r154-ease-out-quart,cubic-bezier(0.16,1,0.3,1)) !important;
}
html body #hero.r159 .hero-cta-inline:hover::after{ left:135% !important; }
@media (prefers-reduced-motion: reduce){
    html body #hero.r159 .hero-cta-inline::after{ transition:none !important; }
}

/* (3) label tracking — barely-there refinement (weight unchanged at 600) */
html body #hero.r159 .hero-cta-inline{ letter-spacing:.014em !important; }

/* ════════════════════════════════════════════════════════════════════════
   R234 · Hero CTA — "SHOP CATALOG", bigger + THICKER.
   Base R159 was font-size:16px / padding:17px 32px / min-height:54px / wt 600.
   Label text lives in index.html as "Shop catalog"; uppercased here so a
   revert still shows a sensible sentence-case label.
   ▸ TO REVERT sizing/caps: delete this R234 block.
   ════════════════════════════════════════════════════════════════════════ */
html body #hero.r159 .hero-cta-inline{
    font-size:16.5px !important;
    font-weight:700 !important;
    text-transform:uppercase !important;
    letter-spacing:.085em !important;   /* all-caps wants wider tracking */
    padding:21px 42px !important;        /* +3px vertical = thicker */
    min-height:64px !important;          /* was 54 → noticeably chunkier */
}
html body #hero.r159 .hero-cta-inline .hero-cta-arrow i{ font-size:14px !important; }

/* ════════════════════════════════════════════════════════════════════════
   R235 · Hero CTA — slightly brighter / more-saturated teal fill.
   Nudges the R217/R223 gradient (#2fc7b7→#29c0ae→#17ab98) up a touch in
   lightness + chroma, resting AND hover. The grounded R217 glow is left
   alone (keeps the teal lift UNDER the pill — no green hue above it).
   ▸ TO REVERT: delete this R235 block → the R217/R223 gradient returns.
   ════════════════════════════════════════════════════════════════════════ */
html body #hero.r159 .hero-cta-inline{
    background:linear-gradient(135deg,#34cebd 0%,#2dc7b4 42%,#18b19e 100%) !important;
}
html body #hero.r159 .hero-cta-inline:hover{
    background:linear-gradient(135deg,#5ce0cb 0%,#34d1c1 50%,#22bdaa 100%) !important;
}

/* ════════════════════════════════════════════════════════════════════════
   R236 · Reviews meta — kill the two "AI trust-chip" pills.
   The old look: two identical bordered teal capsules, ALL-CAPS mono + a
   leading FA icon — the most-generated badge pattern there is. Replaced
   with a DUAL-VOICE lab annotation (mirrors the brand type system):
     (A) VERIFIED BUYER → a box-free certification seal (teal disc + fine
         satellite ring) with the words in sentence-case humanist Inter.
     (B) ORDERED → a squared monospace specimen/lot tag (instrument voice),
         quiet tinted fill, teal flask. Different shape + voice from (A) so
         the pair no longer reads as two matching pills.
   Surface is the warm field-journal ink (#241e19); text stays cream/teal.
   HTML: "Verified buyer" markup updated at index.html (.r236-verified).
   The ordered tag's innerHTML is rebuilt by the inline filmstrip script
   ('<i class="fas fa-flask"></i> ' + data-product) — styled here CSS-only.
   ════════════════════════════════════════════════════════════════════════ */

/* ── (A) Verified buyer → certification seal, no capsule ──
   (full section.r158-exhibit chain so the colour beats the R164 dark-wing
   override at styles.css ~60877) */
html body #main-content section.testimonials-section.r159-quotes.r158-exhibit .testimonial-verified.r236-verified{
    display:inline-flex !important; align-items:center !important; gap:9px !important;
    background:none !important; border:none !important; border-radius:0 !important;
    padding:0 !important; box-shadow:none !important;
    font-family:'Inter',sans-serif !important; font-weight:600 !important; font-size:13px !important;
    text-transform:none !important; letter-spacing:.005em !important; color:#e7dfd3 !important;
}
html body #main-content .testimonials-section.r159-quotes .r236-verified .r236-vmark{
    position:relative !important; flex:0 0 auto !important;
    width:21px !important; height:21px !important; border-radius:50% !important;
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
    background:linear-gradient(150deg,#3ee0cd 0%,#14b8a6 60%,#0d9488 100%) !important;
    box-shadow:0 2px 10px rgba(45,212,191,.40), inset 0 1px 0 rgba(255,255,255,.45) !important;
}
html body #main-content .testimonials-section.r159-quotes .r236-verified .r236-vmark i{
    color:#04231f !important; font-size:10px !important; line-height:1 !important;
}
/* fine satellite ring → a "certified" seal character */
html body #main-content .testimonials-section.r159-quotes .r236-verified .r236-vmark::after{
    content:"" !important; position:absolute !important; inset:-3px !important;
    border:1px solid rgba(45,212,191,.30) !important; border-radius:50% !important;
    pointer-events:none !important;
}

/* ── (B) Ordered → squared mono specimen/lot tag (instrument voice) ──
   (section.r158-exhibit chain to beat the R164 colour override ~60877) */
html body #main-content section.testimonials-section.r159-quotes.r158-exhibit .r159-quote-author-lines .testimonial-product{
    display:inline-flex !important; align-items:center !important; gap:8px !important;
    margin-top:8px !important;
    font-family:'JetBrains Mono',ui-monospace,monospace !important;
    font-size:10.5px !important; font-weight:500 !important; letter-spacing:.085em !important;
    text-transform:uppercase !important; color:#abeae0 !important;
    background:rgba(45,212,191,.06) !important;
    border:1px solid rgba(45,212,191,.15) !important; border-radius:5px !important;
    padding:6px 11px !important;
}
html body #main-content section.testimonials-section.r159-quotes.r158-exhibit .r159-quote-author-lines .testimonial-product i{
    color:#5eead4 !important; font-size:11px !important; margin-right:0 !important; opacity:.95 !important;
}

/* ════════════════════════════════════════════════════════════════════════
   R237 · Two micro-tweaks.
   (1) SHOP CATALOG — kill the dark "fade toward the right". The 135° gradient
       ended at #18b19e (a deep teal that read near-black at the bottom-right
       corner). Lift the end so the whole face stays bright; keep a faint
       diagonal for dimension. Overrides the R235 gradient (resting + hover).
   (2) Hero trust row — nudge the ★ and "4.9" equally ~2px further left.
   ▸ TO REVERT: delete this R237 block (R235 gradient + R232 star offset return).
   ════════════════════════════════════════════════════════════════════════ */
/* (1) flatter, bright-throughout teal — no dark right wedge */
html body #hero.r159 .hero-cta-inline{
    background:linear-gradient(135deg,#37d0c1 0%,#30c9b8 45%,#27c2b0 100%) !important;
}
html body #hero.r159 .hero-cta-inline:hover{
    background:linear-gradient(135deg,#5fe1cd 0%,#37d0c1 50%,#2cc6b4 100%) !important;
}
/* (2) star + number shift left a tad, equally (star was left:-1.5px @ R232) */
html body #hero.r159 .htr-rating i{ left:-3.5px !important; }
html body #hero.r159 .htr-rating strong{ position:relative !important; left:-2px !important; }

/* ════════════════════════════════════════════════════════════════════════
   R238 · PERF — scroll jank between the FAQ and the feed sign-up.
   Root cause (measured live): the scroll-reveal system animated
   filter:blur(7-8px) → 0 AND held a `will-change: filter` compositing layer
   on the LARGE elements that all reveal together at that seam — the 792×720
   feed console plus the 8 FAQ rows — stacked on the dark room's drift layers.
   Animating blur() is one of the most GPU-expensive things you can do, so
   frames dropped while scrolling into the region.
   Fix: keep the fade + rise reveal, but drop the blur (the 7-8px blur-in is
   barely perceptible) and stop pinning a `filter` layer. Reduced-motion
   already neutralises these reveals, so this only affects the animated path.
   ════════════════════════════════════════════════════════════════════════ */
html body .r155-room [data-r155-reveal],
html body .r155-room [data-r155-reveal].r155-in,
html body .r158-room [data-r158-reveal],
html body .cy-fade-up{
    filter:none !important;
    will-change:auto !important;
}

/* ════════════════════════════════════════════════════════════════════════
   R239 · (1) Hero trust row — condense the gap around the "|" divider a tad
              (18px @ R231 → 13px), so "200+ verified orders" and "See a
              sample COA" sit closer.
          (2) BUG FIX — feed sign-up input text was invisible while typing.
              The R160 white-card redesign flipped the input row to a WHITE
              background, but the input colour stayed #fbfaf6 (near-white)
              from the original dark-terminal design → white-on-white. Set a
              dark ink so typed text reads on the white field; keep a teal
              text caret to match the ">" prompt.
   ════════════════════════════════════════════════════════════════════════ */
html body #hero.r159 .hero-trust-row{ gap:13px !important; }
html body #main-content .newsletter-section.r159-feed .r159-feed-line input#newsletter-email{
    color:#15211f !important; caret-color:#0d9488 !important;
}
html body #main-content .newsletter-section.r159-feed .r159-feed-line input#newsletter-email::placeholder{
    color:#6b726e !important; opacity:1 !important;
}

/* ════════════════════════════════════════════════════════════════════════
   R240 · Hero trust row — holistic spacing/type pass (supersedes the R231/
   R232/R237/R239 one-off nudges for this row).
   Problems fixed: irregular internal rhythm (was 9 / 13 / 6px), an asymmetric
   middot, a divider with no more air than the internal gaps (no grouping),
   and three sans families in one row (Bricolage + Inter + Geist).
   New system: tight ★–4.9 pair → symmetric middot → clear group break to the
   divider → link. Two fonts only (Bricolage display numeral + Inter).
   ════════════════════════════════════════════════════════════════════════ */
/* row: vertically centered; divider gets MORE air than the internal rhythm */
html body #hero.r159 .hero-trust-row{ gap:14px !important; align-items:center !important; }
/* rating cluster: ★ and 4.9 are a tight pair */
html body #hero.r159 .htr-rating{ gap:5px !important; align-items:center !important; }
/* reset the accumulated star/number offset hacks → clean flex centering,
   one honest optical nudge on the star, number box no longer inflates the row */
html body #hero.r159 .htr-rating i{ left:0 !important; top:-0.5px !important; }
html body #hero.r159 .htr-rating strong{ position:static !important; left:0 !important; line-height:1 !important; }
/* middot — symmetric 8px breathing room as a true separator
   (5px row-gap + 3px sub margin = 8px before; 8px margin after) */
html body #hero.r159 .htr-sub{ margin-left:3px !important; line-height:1 !important; }
/* match the R226-era `.htr-sub .htr-dot` specificity so the margin wins */
html body #hero.r159 .htr-sub .htr-dot{ margin:0 8px 0 0 !important; }

/* ════════════════════════════════════════════════════════════════════════
   R241 · Reviews "Ordered" line — drop the R236 squared tag (the box + flask
   read as an AI badge). Render the ordered compounds as a quiet, box-free
   mono caption (the brand's data voice, no icon). The flask is removed at
   source (inline filmstrip script + the static markup); the rule below also
   hard-hides any stray icon and strips the box.
   ════════════════════════════════════════════════════════════════════════ */
html body #main-content section.testimonials-section.r159-quotes.r158-exhibit .r159-quote-author-lines .testimonial-product{
    display:inline-block !important;
    background:none !important; border:none !important; border-radius:0 !important;
    padding:0 !important; margin-top:6px !important;
    font-family:'JetBrains Mono',ui-monospace,monospace !important;
    font-size:11px !important; font-weight:500 !important; letter-spacing:.03em !important;
    text-transform:none !important; color:#90b7ad !important;
}
html body #main-content section.testimonials-section.r159-quotes.r158-exhibit .r159-quote-author-lines .testimonial-product i{
    display:none !important;
}
/* divider — trimmed to the small-text cap height */
html body #hero.r159 .htr-div{ height:14px !important; }
/* COA link — Inter (not a 2nd similar sans), line tightened to match */
html body #hero.r159 .htr-coa{ font-family:'Inter',sans-serif !important; line-height:1 !important; }

/* ════════════════════════════════════════════════════════════════════════
   R243 · Hero stat lead-in — a short Fraunces serif-italic phrase above the
   number so "99.96%" lands as the answer, and the top-left negative space
   reads as composed. Subordinate to the number (muted, smaller). Uses the
   brand's underused serif for typographic contrast. Self-contained fade-in
   on load; reduced-motion → instant.
   ════════════════════════════════════════════════════════════════════════ */
html body #hero.r159 .hero-stat-leadin{
    font-family:'Fraunces', serif !important;
    font-style:italic !important;
    font-variation-settings:"opsz" 40, "wght" 400 !important;
    font-size:clamp(15px,1.55vw,19px) !important;
    line-height:1.2 !important; letter-spacing:.005em !important;
    color:#c8c1b3 !important;   /* R245: warm cream — editorial, a touch brighter */
    margin:0 0 4px 2px !important; max-width:34ch !important;
    opacity:0;
    animation:r243-leadin .6s var(--r154-ease-out-quart,cubic-bezier(0.16,1,0.3,1)) .35s forwards;
}
@keyframes r243-leadin{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce){
    html body #hero.r159 .hero-stat-leadin{ opacity:1 !important; animation:none !important; transform:none !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   R244 · Hero stat — distinguish the proof line from the R243 serif-italic
   lead-in. The proof was rendering in Inter (the #main-content Inter
   normalizer beat the older R228 rule), so it read as the same "soft muted
   sentence" as the lead-in. Restore it to the monospace DATA voice — a flowing
   serif-italic setup vs a technical mono lab reference (lot RT2001 is a code).
   id-scoped so it beats the normalizer. Net: three clear voices in the stack
   — serif-italic editorial / serif display label / monospace data.
   ════════════════════════════════════════════════════════════════════════ */
html body #hero.r159 .hms-proof{
    font-family:'JetBrains Mono', ui-monospace, monospace !important;
    letter-spacing:.02em !important;
    /* R245: cool muted-teal "data" tone — splits it from the warm-cream serif
       lead-in by HUE + brightness, not just font. */
    color:#88b6ab !important;
}

/* ════════════════════════════════════════════════════════════════════════
   R246 · Hero caption — put the proof inline as a parenthetical on the label
   line (was stacked below): "GLP-3 HPLC PURITY (independently verified · lot
   RT2001)". Switch the caption from a column to a baseline row; wrap
   gracefully on narrow widths so the parenthetical drops to its own line
   rather than overflowing.
   ════════════════════════════════════════════════════════════════════════ */
html body #hero.r159 .hero-mono-sub{
    flex-direction:row !important;
    flex-wrap:wrap !important;
    align-items:baseline !important;
    column-gap:7px !important; row-gap:2px !important;
}

/* ════════════════════════════════════════════════════════════════════════
   R247 · DARK INSTRUMENT HEADER — re-theme the global navbar + launch banner
   to the homepage "Instrument × Exhibit" direction (base #06070A, teal
   #2dd4bf/#5eead4, Geist UI / JetBrains Mono data). Merges into the dark hero
   on the homepage; a crisp dark header on lighter interior pages. id-scoped
   (#navbar / #announcement-bar) to outrank the old light-theme !important
   rules. Every JS hook preserved (openSearchModal, toggleCart, toggleMobileMenu,
   dropdowns, #cart-count, #points-pill). Geist falls back to Inter on pages
   that don't load it.
   ════════════════════════════════════════════════════════════════════════ */
/* ── bar container ── */
html body #navbar{
    background:rgba(7,8,11,.86) !important;
    -webkit-backdrop-filter:blur(16px) saturate(125%) !important;
    backdrop-filter:blur(16px) saturate(125%) !important;
    border-bottom:1px solid rgba(45,212,191,.13) !important;
    box-shadow:0 1px 0 rgba(0,0,0,.4) !important;
}
html body #navbar.scrolled{
    background:rgba(6,7,10,.94) !important;
    border-bottom-color:rgba(45,212,191,.2) !important;
    box-shadow:0 8px 30px -12px rgba(0,0,0,.6) !important;
}
/* ── wordmark → hero masthead (teal ELYTRA / light LABS, Geist) ── */
html body #navbar .nav-logo-text .logo-text{
    font-family:'Geist','Inter',sans-serif !important; font-weight:700 !important;
    color:#2dd4bf !important; letter-spacing:-.01em !important;
}
html body #navbar .nav-logo-text .logo-sub{
    font-family:'Geist','Inter',sans-serif !important; font-weight:600 !important;
    color:#d8d6cf !important;
}
/* ── primary links + dropdown toggles ── */
html body #navbar .nav-links a,
html body #navbar .nav-dropdown-toggle{
    font-family:'Geist','Inter',sans-serif !important; font-weight:500 !important;
    color:#cbc6bb !important;
    transition:color .2s var(--r154-ease-out-quart,cubic-bezier(0.16,1,0.3,1)) !important;
}
html body #navbar .nav-links a:hover,
html body #navbar .nav-dropdown-toggle:hover{ color:#5eead4 !important; }
html body #navbar .nav-links a.active,
html body #navbar .nav-dropdown-toggle.active{ color:#2dd4bf !important; }
html body #navbar .nav-caret{ color:#7d8a86 !important; }
html body #navbar .nav-links a.nav-link-affiliate{ color:#5eead4 !important; }
/* ── dropdown panels (Tools / Company) → dark instrument menu ── */
html body #navbar .nav-dropdown-menu{
    background:#0b0e12 !important;
    border:1px solid rgba(45,212,191,.16) !important;
    box-shadow:0 24px 60px -18px rgba(0,0,0,.7), 0 0 0 1px rgba(0,0,0,.4) !important;
    border-radius:14px !important;
}
html body #navbar .nav-dd-item{ transition:background .18s ease !important; }
html body #navbar .nav-dd-item:hover{ background:rgba(45,212,191,.08) !important; }
html body #navbar .nav-dd-item.active{ background:rgba(45,212,191,.12) !important; }
html body #navbar .nav-dd-item i{ color:#5eead4 !important; }
html body #navbar .nav-dd-title{ color:#e9e5dd !important; font-family:'Geist','Inter',sans-serif !important; }
html body #navbar .nav-dd-sub{ color:#8d8a83 !important; }
/* ── action icon buttons (search / account / cart / menu) ── */
html body #navbar .nav-search-trigger,
html body #navbar .account-btn,
html body #navbar .cart-btn,
html body #navbar .mobile-menu-btn{
    background:transparent !important;
    border:1px solid rgba(255,255,255,.1) !important;
    color:#cbc6bb !important;
    transition:color .2s ease, background .2s ease, border-color .2s ease !important;
}
html body #navbar .nav-search-trigger:hover,
html body #navbar .account-btn:hover,
html body #navbar .cart-btn:hover,
html body #navbar .mobile-menu-btn:hover{
    color:#5eead4 !important; border-color:rgba(45,212,191,.4) !important;
    background:rgba(45,212,191,.08) !important;
}
html body #navbar .cart-btn .cart-count{
    background:#2dd4bf !important; color:#04201d !important;
    border:1px solid rgba(6,7,10,.6) !important;
}
/* ── loyalty points pill (teal, dark-friendly) ── */
html body #navbar .points-pill{
    background:rgba(45,212,191,.12) !important;
    border:1px solid rgba(45,212,191,.32) !important;
    color:#7fe9da !important;
}
html body #navbar .points-pill i{ color:#f5b324 !important; }

/* ── launch banner → dark instrument status line (mono data voice) ── */
html body #announcement-bar{
    background:#0a0c11 !important;
    border-bottom:1px solid rgba(45,212,191,.12) !important;
    padding:9px 20px !important;
}
html body #announcement-bar::after{
    background:linear-gradient(90deg, transparent, rgba(45,212,191,.07), transparent) !important;
}
html body #announcement-bar .announcement-content{
    gap:9px !important; flex-wrap:wrap !important; row-gap:2px !important;
    font-family:'JetBrains Mono',ui-monospace,monospace !important;
}
html body #announcement-bar .ann-dot{
    width:7px !important; height:7px !important; border-radius:50% !important;
    background:#2dd4bf !important; box-shadow:0 0 8px rgba(45,212,191,.7) !important;
    flex:0 0 auto !important; animation:r247-anndot 2.6s ease-in-out infinite !important;
}
@keyframes r247-anndot{ 0%,100%{ opacity:.5; } 50%{ opacity:1; } }
html body #announcement-bar .ann-tag{
    font-family:'JetBrains Mono',ui-monospace,monospace !important;
    text-transform:uppercase !important; letter-spacing:.16em !important;
    font-size:10px !important; font-weight:700 !important; color:#5eead4 !important;
}
html body #announcement-bar .ann-offer,
html body #announcement-bar .ann-ship{
    font-family:'JetBrains Mono',ui-monospace,monospace !important;
    font-size:11px !important; letter-spacing:.01em !important; color:#bdb8ae !important; font-weight:500 !important;
}
html body #announcement-bar .ann-offer strong{ color:#7fe9da !important; font-weight:700 !important; }
html body #announcement-bar .ann-sep{ color:#3a4744 !important; font-size:11px !important; }
@media (prefers-reduced-motion: reduce){
    html body #announcement-bar .ann-dot{ animation:none !important; }
    html body #announcement-bar::after{ animation:none !important; }
}
@media (max-width:600px){
    html body #announcement-bar .ann-ship,
    html body #announcement-bar .ann-sep-ship{ display:none !important; }
    html body #announcement-bar .ann-offer{ font-size:10px !important; }
}

/* ── R247 · mobile slide-out menu → dark instrument panel (matches the nav) ── */
html body #mobile-menu{
    background:#0a0c11 !important;
    border-left:1px solid rgba(45,212,191,.14) !important;
}
html body #mobile-menu .mobile-menu-header{ border-bottom:1px solid rgba(45,212,191,.14) !important; }
html body #mobile-menu .mobile-menu-header .logo-text{
    font-family:'Geist','Inter',sans-serif !important; font-weight:700 !important; color:#2dd4bf !important;
}
html body #mobile-menu .mobile-menu-header .logo-sub{ color:#d8d6cf !important; font-weight:600 !important; }
html body #mobile-menu .mobile-menu-header button{ color:#cbc6bb !important; background:transparent !important; }
html body #mobile-menu .mobile-menu-header button:hover{ color:#5eead4 !important; }
html body #mobile-menu > a{
    font-family:'Geist','Inter',sans-serif !important; color:#cbc6bb !important;
    border-bottom:1px solid rgba(255,255,255,.06) !important;
    transition:color .18s ease, background .18s ease !important;
}
html body #mobile-menu > a:hover{ color:#5eead4 !important; background:rgba(45,212,191,.06) !important; }
html body #mobile-menu > a i{ color:#5eead4 !important; }
html body #mobile-menu > a.mobile-nav-highlight{ color:#5eead4 !important; }
html body #mobile-menu .nav-dd-badge{
    background:rgba(45,212,191,.16) !important; color:#7fe9da !important;
    border:1px solid rgba(45,212,191,.34) !important;
}

/* ════════════════════════════════════════════════════════════════════════
   R248 · Nav + flash-sale REFINEMENT pass.
   (1) Shade match — the R247 nav was translucent + saturate(1.25), so the
       hero glow bled through and lifted it to charcoal. Make it near-opaque
       at the exact hero tone (#06070A) and drop saturate → seamless.
   (2) Visibility — the search/cart <i> glyphs were inheriting a near-black
       colour from an old icon rule; colour the glyphs directly + give the
       action buttons a faint fill so they read as buttons.
   (3) Intentional colour — all top links one cream; the ACTIVE page reads via
       the teal underline (text bright-cream, not a teal word); Affiliate is
       no longer randomly teal. Teal stays where it means something.
   (4) Flash sale — make the OFFER the hook: teal glow on the bar, "20% off"
       bright/bold/glowing, stronger scan sweep.
   ════════════════════════════════════════════════════════════════════════ */
/* (1) shade */
html body #navbar{
    background:rgba(6,7,10,.95) !important;
    -webkit-backdrop-filter:blur(12px) !important;
    backdrop-filter:blur(12px) !important;
    border-bottom:1px solid rgba(45,212,191,.12) !important;
}
html body #navbar.scrolled{ background:rgba(6,7,10,.985) !important; }

/* (2) action icons visible + buttons read as buttons */
html body #navbar .nav-search-trigger,
html body #navbar .account-btn,
html body #navbar .cart-btn{
    background:rgba(255,255,255,.035) !important;
    border:1px solid rgba(255,255,255,.13) !important;
}
html body #navbar .nav-search-trigger i,
html body #navbar .account-btn i,
html body #navbar .cart-btn i,
html body #navbar .mobile-menu-btn i{ color:#d8d3c8 !important; }
html body #navbar .nav-search-trigger:hover i,
html body #navbar .account-btn:hover i,
html body #navbar .cart-btn:hover i,
html body #navbar .mobile-menu-btn:hover i{ color:#5eead4 !important; }

/* (3) intentional link colour — active via underline, not a teal word */
html body #navbar .nav-links a.active,
html body #navbar .nav-dropdown-toggle.active{ color:#efeae0 !important; }
html body #navbar .nav-links a.nav-link-affiliate{ color:#cbc6bb !important; }
html body #navbar .nav-links a.nav-link-affiliate:hover{ color:#5eead4 !important; }
html body #navbar .nav-links a.active::after{ background:#2dd4bf !important; }

/* (4) flash-sale bar → the offer is the hook */
html body #announcement-bar{
    background:radial-gradient(130% 220% at 50% -55%, rgba(20,184,166,.14), rgba(20,184,166,0) 58%), #08090d !important;
    border-bottom:1px solid rgba(45,212,191,.18) !important;
}
html body #announcement-bar::after{
    width:42% !important;
    background:linear-gradient(90deg, transparent, rgba(94,234,212,.14), transparent) !important;
}
html body #announcement-bar .ann-dot{ box-shadow:0 0 10px rgba(45,212,191,.85) !important; }
html body #announcement-bar .ann-tag{ color:#6ff0dd !important; }
html body #announcement-bar .ann-offer strong{
    color:#7af0de !important; font-weight:800 !important; font-size:12px !important;
    letter-spacing:.02em !important; text-shadow:0 0 12px rgba(45,212,191,.55) !important;
}
html body #announcement-bar .ann-sep{ color:#3f4d4a !important; }

/* ════════════════════════════════════════════════════════════════════════
   R249 · Nav + flash-sale — bigger & brighter type for legibility + a more
   professional read (links were 13px / muted; bar was 10-11px).
   ════════════════════════════════════════════════════════════════════════ */
/* nav links — larger, brighter, a touch more tracking */
html body #navbar .nav-links a,
html body #navbar .nav-dropdown-toggle{
    font-size:15px !important; color:#ded9cf !important; letter-spacing:.2px !important;
}
html body #navbar .nav-links a.active,
html body #navbar .nav-dropdown-toggle.active{ color:#f4f0e8 !important; }
html body #navbar .nav-links a:hover,
html body #navbar .nav-dropdown-toggle:hover{ color:#5eead4 !important; }
/* flash-sale bar — larger, brighter */
html body #announcement-bar{ padding:10px 20px !important; }
html body #announcement-bar .ann-tag{ font-size:11px !important; color:#7df2e0 !important; }
html body #announcement-bar .ann-offer,
html body #announcement-bar .ann-ship{ font-size:12.5px !important; color:#dcd7cc !important; }
html body #announcement-bar .ann-offer strong{ font-size:14px !important; color:#8ff5e4 !important; }
@media (max-width:600px){
    html body #navbar .nav-links a,
    html body #navbar .nav-dropdown-toggle{ font-size:14px !important; }
    html body #announcement-bar .ann-offer{ font-size:11px !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   R250 · (1) close the 7px gap between the fixed nav (77px) and the homepage
   trust-marquee (#main-content padding-top is 84px; pull the marquee flush —
   homepage-scoped, no global layout shift). (2) clearer, more visible, more
   appealing action icon buttons (search / account / cart).
   ════════════════════════════════════════════════════════════════════════ */
/* (1) marquee flush under the nav */
html body #main-content .trust-marquee.r158-telemetry{ margin-top:-7px !important; }

/* (2) action icon buttons — brighter icons, more defined buttons, teal hover */
html body #navbar .nav-search-trigger,
html body #navbar .account-btn,
html body #navbar .cart-btn{
    background:rgba(255,255,255,.06) !important;
    border:1px solid rgba(255,255,255,.18) !important;
    box-shadow:0 1px 2px rgba(0,0,0,.3) !important;
}
html body #navbar .nav-search-trigger i,
html body #navbar .account-btn i,
html body #navbar .cart-btn i{
    color:#ece7dc !important; font-size:16px !important;
}
html body #navbar .nav-search-trigger:hover,
html body #navbar .account-btn:hover,
html body #navbar .cart-btn:hover{
    background:rgba(45,212,191,.15) !important; border-color:rgba(45,212,191,.55) !important;
}
html body #navbar .nav-search-trigger:hover i,
html body #navbar .account-btn:hover i,
html body #navbar .cart-btn:hover i{ color:#7af0de !important; }

/* ════════════════════════════════════════════════════════════════════════
   R251 · Nav links — brighter & crisper. The links render uppercase, so:
   near-white ink, Geist 600 for confident weight, and proper uppercase
   tracking so it breathes (premium, legible, conversion-friendly). Active is
   carried by the teal underline (text just goes pure white); hover = brand teal.
   ════════════════════════════════════════════════════════════════════════ */
html body #navbar .nav-links a,
html body #navbar .nav-dropdown-toggle{
    color:#f3f1ea !important;
    font-family:'Geist','Inter',sans-serif !important;
    font-weight:600 !important;
    letter-spacing:.6px !important;
}
html body #navbar .nav-links a.active,
html body #navbar .nav-dropdown-toggle.active{ color:#ffffff !important; }
html body #navbar .nav-links a:hover,
html body #navbar .nav-dropdown-toggle:hover{ color:#5eead4 !important; }
/* active underline → crisp brand teal, a touch thicker for presence */
html body #navbar .nav-links a.active::after{ background:#2dd4bf !important; height:2.5px !important; }

/* R252 · Affiliate link was dimmer — an older, more-specific .nav-link-affiliate
   colour rule out-ranked the R251 brightening. Bring it to the same bright ink
   as the rest (same-specificity selector, later in the cascade → wins). */
html body #navbar .nav-links a.nav-link-affiliate{ color:#f3f1ea !important; }
html body #navbar .nav-links a.nav-link-affiliate.active{ color:#ffffff !important; }
html body #navbar .nav-links a.nav-link-affiliate:hover{ color:#5eead4 !important; }

/* ════════════════════════════════════════════════════════════════════════
   R254 · P0 — ELEVATION RAMP for the top stack + launch-bar anchor.
   Problem (measured): promo #08090d, nav/marquee/hero all #06070a — the three
   top bars sat within ~2 sRGB levels of each other (imperceptible), so they
   read as one undifferentiated black slab and the launch promo registered as
   chrome, not an offer. Fix: a real dark-elevation ladder so each plane reads
   as its own layer — recessed → raised = darker → lighter:
        promo  #020305   (darkest — recessed title strip, the page's floor)
        hero / marquee  #06070a   (base canvas, unchanged)
        navbar ~#0d1016   (raised glass chrome, one clear step up)
        ops panel  +white lift   (most-raised surface)
   Plus the launch bar keeps its on-brand teal edge/glow and "20% OFF" becomes
   a small teal chip so the discount is the bar's focal point. id-scoped to
   outrank the prior !important rules; no markup/JS touched. (No countdown:
   a fake/looping timer is an FTC urgency risk — only worth adding against a
   real launch end-date.)
   ════════════════════════════════════════════════════════════════════════ */
/* ── promo bar → deep teal-INK plane (distinct hue from the neutral-black
   nav/hero; keeps its teal glow image + light text + the "20% OFF" chip) ── */
html body #announcement-bar{ background-color:#06130f !important; }
html body #announcement-bar{ border-bottom:1px solid rgba(45,212,191,.22) !important; }

/* ── navbar → raised glass, one step lighter than the hero it floats over ── */
html body #navbar{
    background:rgba(13,16,22,.92) !important;
    border-bottom:1px solid rgba(45,212,191,.14) !important;
}
html body #navbar.scrolled{
    background:rgba(10,13,18,.96) !important;
    border-bottom-color:rgba(45,212,191,.22) !important;
}

/* ── ops panel → most-raised surface (clearest lift off the base).
   Selector must match the existing #hero.hero-reading-room .hero-ops
   surface rule's specificity (it sets var(--r154-surface-1) !important). ── */
html body #hero.hero-reading-room .hero-ops{
    background:rgba(255,255,255,.07) !important;
    border-color:rgba(255,255,255,.13) !important;
}

/* ── launch bar: "20% OFF" becomes the anchor — a compact teal chip ── */
html body #announcement-bar .ann-offer strong{
    display:inline-block !important;
    vertical-align:baseline !important;
    padding:1px 7px !important;
    margin:0 2px !important;
    border-radius:5px !important;
    background:rgba(45,212,191,.15) !important;
    border:1px solid rgba(45,212,191,.38) !important;
    color:#b6f8ec !important;
    font-size:12px !important;
    font-weight:800 !important;
    letter-spacing:.4px !important;
    text-transform:uppercase !important;
    text-shadow:none !important;
    box-shadow:0 0 12px rgba(45,212,191,.20) !important;
}

/* ════════════════════════════════════════════════════════════════════════
   R255 · P1 — tighten the hero + feather the telemetry marquee.
   (a) The hero is a 900px flex box that vertically CENTRES a 540px content
   block inside a 152px top pad → 259px of dead black above the headline and
   the CTA pinned to the fold edge (bottom ~812 on an 900px viewport, below
   the fold on a 768px laptop). Switch the hero to top-anchored with a smaller
   pad so the whole block lifts ~105px: most of the dead space disappears and
   the CTA floats clear of the fold everywhere. Desktop-only — the mobile hero
   stacks single-column with its own rhythm and must not be touched. GSAP-safe:
   the page-load cascade animates transforms (translateY deltas), not layout,
   so the absolute positions just start ~105px higher.
   (b) The marquee hard-cuts text at both edges (overflow:clip, mask:none —
   the visible bright seam). Feather it with an edge-fade mask so telemetry
   dissolves in/out like a proper ticker. id-scoped; no markup/JS touched.
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width:1024px){
    html body #main-content #hero.hero-reading-room{
        justify-content:flex-start !important;   /* hero is flex-column → vertical axis is justify-content */
        padding-top:120px !important;            /* R780: owner wanted block lifted — 163 → 120 (tightest tried was 112) */
        min-height:calc(100vh - 104px) !important; /* trim the bottom slack (content is top-anchored) — vh-based so it never clips on short viewports */
    }
}
html body #main-content .trust-marquee{
    -webkit-mask-image:linear-gradient(to right, rgba(0,0,0,0) 0%, #000 7%, #000 93%, rgba(0,0,0,0) 100%) !important;
            mask-image:linear-gradient(to right, rgba(0,0,0,0) 0%, #000 7%, #000 93%, rgba(0,0,0,0) 100%) !important;
}

/* ════════════════════════════════════════════════════════════════════════
   R256 · P2 — sectional tonal rhythm.
   The whole dark run below the hero (hero → quality/diagnostic console →
   goals → recently-viewed) was one flat #06070a, so scrolling read as a
   single corridor before the warm lower-wing. Lift the ALTERNATING sections
   to a marginally raised "room" tone (#0a0c11 — ~4% up, faint teal lean) so
   the page breathes like a sequence of instrument rooms:
       hero #06070a → console ROOM → goals #06070a → recently ROOM → warm wing.
   The base bg comes from the generic `section{background:var(--bg)}`
   (specificity 1), so a single class chain wins easily; goals keeps its own
   radial-glow bg untouched. id-scoped, no markup/JS.
   ════════════════════════════════════════════════════════════════════════ */
html body #main-content section.quality-section.r158-room,
html body #main-content section.recently-viewed-section.r158-room{
    background-color:#0a0c11 !important;
}

/* ════════════════════════════════════════════════════════════════════════
   R257 · Nav vitality. The flat raised-grey from R254 read "dead/lifeless" —
   a uniform mid-grey slab with no depth. Keep the elevation lift but give it
   life: (1) a subtle top→bottom glass gradient so the bar catches light at
   the top and settles darker below (dimensionality, not a flat fill);
   (2) a faint teal sheen on the very top edge (the glass lip catching the
   brand light); (3) a teal-LEANING dark tint instead of neutral grey, so it
   belongs to the teal instrument theme; (4) the teal hairline + a soft drop
   below for separation. Reads as a raised teal-glass header. Overrides the
   R254 nav fill (later in cascade); backdrop-blur from R247 still applies.
   ════════════════════════════════════════════════════════════════════════ */
/* R257b · pushed harder per request: more teal tint (clearly green-glass),
   brighter top sheen + teal hairline, and a soft teal underglow bleeding
   down from the bottom edge (the bar emits a little brand light onto the page). */
html body #navbar{
    background:linear-gradient(180deg, rgba(12,19,19,.90) 0%, rgba(8,12,13,.94) 100%) !important;
    border-bottom:1px solid rgba(45,212,191,.42) !important;
    box-shadow:
        inset 0 1px 0 rgba(130,245,228,.18),
        0 5px 18px -3px rgba(45,212,191,.22),
        0 12px 30px -18px rgba(0,0,0,.72) !important;
}
html body #navbar.scrolled{
    background:linear-gradient(180deg, rgba(10,17,17,.95) 0%, rgba(7,11,12,.97) 100%) !important;
    border-bottom-color:rgba(45,212,191,.52) !important;
    box-shadow:
        inset 0 1px 0 rgba(130,245,228,.20),
        0 6px 20px -3px rgba(45,212,191,.26),
        0 14px 32px -18px rgba(0,0,0,.78) !important;
}

/* ════════════════════════════════════════════════════════════════════════
   R258 · TEMP — white navbar experiment (quick look). Flips the bar to white
   with dark text/icons/logo so it's legible; teal hover + active underline
   kept. Delete this whole block to revert to the dark glass nav.
   ════════════════════════════════════════════════════════════════════════ */
html body #navbar,
html body #navbar.scrolled{
    background:#ffffff !important;
    border-bottom:1px solid rgba(0,0,0,.10) !important;
    box-shadow:0 1px 3px rgba(0,0,0,.12), 0 6px 20px -14px rgba(0,0,0,.25) !important;
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
}
html body #navbar .nav-links a,
html body #navbar .nav-dropdown-toggle{ color:#10100e !important; }
html body #navbar .nav-links a.active,
html body #navbar .nav-dropdown-toggle.active{ color:#0a0a0a !important; }
html body #navbar .nav-links a:hover,
html body #navbar .nav-dropdown-toggle:hover{ color:#0d9488 !important; }
html body #navbar .nav-logo-text .logo-text{ color:#0f766e !important; }
html body #navbar .nav-logo-text .logo-sub{ color:#555 !important; }
/* action icons → clean light circles, dark icons (subtle ring; the look the
   user confirmed). Gentle grey fill on hover + press-scale. No teal, no heavy
   outline. */
html body #navbar .nav-search-trigger,
html body #navbar .account-btn,
html body #navbar .cart-btn{
    background:#ffffff !important;
    border:1px solid rgba(0,0,0,.16) !important;
    box-shadow:0 1px 2px rgba(0,0,0,.06) !important;
    transition:background .18s ease, transform .12s ease !important;
}
html body #navbar .nav-search-trigger i,
html body #navbar .account-btn i,
html body #navbar .cart-btn i{ color:#1b1b1b !important; }
html body #navbar .nav-search-trigger:hover,
html body #navbar .account-btn:hover,
html body #navbar .cart-btn:hover{ background:#f2f3f4 !important; }
html body #navbar .nav-search-trigger:hover i,
html body #navbar .account-btn:hover i,
html body #navbar .cart-btn:hover i{ color:#000000 !important; }
html body #navbar .nav-search-trigger:active,
html body #navbar .account-btn:active,
html body #navbar .cart-btn:active{ transform:scale(.94) !important; }
/* affiliate link kept its cream colour from R252 (invisible on white) — dark it */
html body #navbar .nav-links a.nav-link-affiliate{ color:#10100e !important; }
html body #navbar .nav-links a.nav-link-affiliate.active{ color:#0a0a0a !important; }
html body #navbar .nav-links a.nav-link-affiliate:hover{ color:#0d9488 !important; }

/* ════════════════════════════════════════════════════════════════════════
   R259 · Launch bar → ORIGINAL teal style restored. The single-span FA markup
   is back in partials.js (flask + truck icons, "LAUNCH SPECIAL: Up to 20% OFF
   … | Free shipping over $150"). Brand-teal band with white text + white FA
   icons and a bold offer — matches the original look the user asked to bring
   back. Isolated block.
   ════════════════════════════════════════════════════════════════════════ */
/* matched to the SHOP CATALOG button gradient exactly (.hero-cta-inline).
   Bright teal → white text needs a soft dark shadow to stay legible. */
html body #announcement-bar{
    background:linear-gradient(135deg, #37d0c1 0%, #30c9b8 45%, #27c2b0 100%) !important;
    border-bottom:1px solid rgba(0,0,0,.12) !important;
}
html body #announcement-bar .announcement-content,
html body #announcement-bar .announcement-content span,
html body #announcement-bar .announcement-content strong,
html body #announcement-bar .announcement-content i{ color:#ffffff !important; text-shadow:0 1px 2px rgba(2,30,26,.35) !important; }
html body #announcement-bar .announcement-content strong{ font-weight:800 !important; }

/* ════════════════════════════════════════════════════════════════════════
   R260 · PRODUCTS PAGE OVERHAUL — light, conversion-first catalog.
   CSS-only restyle (+ light static HTML). Cards are app.js-owned markup,
   restyled by class. id-scoped under #products to beat the #main-content
   Inter normalizer. Built in sub-sections §1..§N. Spec/plan:
   docs/superpowers/(specs|plans)/2026-06-01-products-page-overhaul.*
   ════════════════════════════════════════════════════════════════════════ */
/* §1 foundation + page shell */
html body #main-content #products.products-section{
    --pc-bg:#f5f7f8; --pc-surface:#ffffff; --pc-ink:#0f1413; --pc-muted:#6b757b;
    --pc-line:#e7eaed; --pc-teal:#0d9488; --pc-teal-bright:#14b8a6; --pc-gold:#e0a90b;
    --pc-radius:16px; --pc-ease:cubic-bezier(.23,1,.32,1);
    background:var(--pc-bg) !important;
    padding:34px 0 72px !important;
}
html body #main-content #products .container{ max-width:1240px !important; }

/* §2 header + trust strip */
html body #main-content #products .catalog-hero-v2{
    display:flex !important; align-items:flex-end !important; justify-content:space-between !important;
    gap:24px !important; flex-wrap:wrap !important; margin:8px 0 22px !important;
}
html body #main-content #products .catalog-hero-v2 .section-title{
    font-size:clamp(1.9rem,3.4vw,2.9rem) !important; line-height:1.04 !important;
    letter-spacing:-.02em !important; color:var(--pc-ink) !important; margin:0 !important;
}
html body #main-content #products .catalog-hero-accent{
    height:4px !important; width:84px !important; margin-top:14px !important;
    background:linear-gradient(90deg,var(--pc-teal-bright),var(--pc-teal)) !important; border-radius:2px !important;
}
html body #main-content #products .catalog-hero-trust-band{ display:flex !important; gap:10px !important; flex-wrap:wrap !important; }
html body #main-content #products .cht-pill{
    display:flex !important; align-items:center !important; gap:9px !important;
    background:var(--pc-surface) !important; border:1px solid var(--pc-line) !important;
    border-radius:12px !important; padding:9px 13px !important; box-shadow:0 1px 2px rgba(16,40,38,.05) !important;
}
html body #main-content #products .cht-pill i{ color:var(--pc-teal) !important; font-size:14px !important; }
html body #main-content #products .cht-pill span{ display:flex !important; flex-direction:column !important; line-height:1.15 !important; font-size:11px !important; color:var(--pc-muted) !important; }
html body #main-content #products .cht-pill strong{ font-size:12px !important; color:var(--pc-ink) !important; }

/* §3 toolbar (search + sort) — R308: NOT sticky. It scrolls away with the page
   instead of pinning to the top and floating over the product grid as you scroll. */
html body #main-content #products #catalog-sticky-wrap{
    position:static !important; top:auto !important; z-index:auto !important;
    background:transparent !important; padding:10px 0 8px !important;
    margin-bottom:6px !important; box-shadow:none !important;
}
html body #main-content #products .catalog-toolbar{ display:flex !important; gap:12px !important; align-items:center !important; }
html body #main-content #products .product-search{
    flex:1 !important; position:relative !important; background:var(--pc-surface) !important;
    border:1px solid var(--pc-line) !important; border-radius:12px !important;
    display:flex !important; align-items:center !important; padding:0 12px !important; transition:border-color .18s,box-shadow .18s !important;
}
html body #main-content #products .product-search:focus-within{ border-color:var(--pc-teal) !important; box-shadow:0 0 0 3px rgba(13,148,136,.14) !important; }
html body #main-content #products .product-search > i{ color:var(--pc-muted) !important; }
html body #main-content #products #product-search{ flex:1 !important; border:0 !important; background:transparent !important; padding:13px 10px !important; font-size:14px !important; color:var(--pc-ink) !important; outline:none !important; }
html body #main-content #products .sort-dropdown #product-sort{
    background:var(--pc-surface) !important; border:1px solid var(--pc-line) !important;
    border-radius:12px !important; padding:13px 14px !important; font-size:14px !important; color:var(--pc-ink) !important; cursor:pointer !important;
}

/* §4 category tiles — refined, teal active state (sticky-grouping deferred) */
html body #main-content #products #catalog-quickjump{
    display:flex !important; gap:8px !important; margin:8px 0 16px !important;
    overflow-x:auto !important; scrollbar-width:none !important; padding-bottom:2px !important;
}
html body #main-content #products #catalog-quickjump::-webkit-scrollbar{ display:none !important; }
html body #main-content #products .cqj-tile{
    display:flex !important; align-items:center !important; gap:8px !important; flex:0 0 auto !important;
    background:var(--pc-surface) !important; border:1px solid var(--pc-line) !important;
    border-radius:11px !important; padding:9px 13px !important; color:var(--pc-ink) !important;
    text-decoration:none !important; position:relative !important;
    transition:border-color .15s,background .15s,transform .12s var(--pc-ease) !important;
}
html body #main-content #products .cqj-tile .cqj-icon i{ color:var(--pc-teal) !important; font-size:14px !important; }
html body #main-content #products .cqj-tile .cqj-label{ font-size:12.5px !important; font-weight:600 !important; }
html body #main-content #products .cqj-tile:hover{ border-color:var(--pc-teal) !important; transform:translateY(-1px) !important; }
html body #main-content #products .cqj-tile.is-active{ background:var(--pc-teal) !important; border-color:var(--pc-teal) !important; }
html body #main-content #products .cqj-tile.is-active .cqj-label,
html body #main-content #products .cqj-tile.is-active .cqj-icon i{ color:#fff !important; }
html body #main-content #products .cqj-tile.cqj-bundles{ border-color:#f0c97a !important; background:#fffaf0 !important; }
html body #main-content #products .cqj-tile .cqj-badge{ background:var(--pc-gold) !important; color:#3a2a02 !important; font-size:9px !important; font-weight:800 !important; padding:2px 6px !important; border-radius:5px !important; }

/* §2b header — left-aligned, compact (catalog, not landing) */
html body #main-content #products .catalog-hero-v2{
    flex-direction:column !important; align-items:flex-start !important; gap:14px !important;
    background:linear-gradient(135deg,#eef7f4,#f5f7f8) !important; border:1px solid var(--pc-line) !important;
    border-radius:18px !important; padding:24px 26px !important; margin:8px 0 16px !important;
}
html body #main-content #products .catalog-hero-v2 .section-title{ text-align:left !important; }
html body #main-content #products .catalog-hero-text{ width:auto !important; }

/* §6 product card — the conversion unit (CSS-only restyle of app.js markup) */
html body #main-content #products .product-card{
    position:relative !important; background:var(--pc-surface) !important; border:1px solid var(--pc-line) !important;
    border-radius:var(--pc-radius) !important; overflow:hidden !important; cursor:pointer !important;
    box-shadow:0 1px 2px rgba(16,40,38,.05) !important; transition:transform .18s var(--pc-ease),box-shadow .18s !important;
}
html body #main-content #products .product-card:hover{ transform:translateY(-4px) !important; box-shadow:0 16px 30px -18px rgba(16,40,38,.35) !important; }
html body #main-content #products .product-card:active{ transform:scale(.99) !important; }
html body #main-content #products .product-card .product-image{ position:relative !important; aspect-ratio:1/1 !important; background:linear-gradient(165deg,#e9f6f3,#d8ece7) !important; display:flex !important; align-items:center !important; justify-content:center !important; }
html body #main-content #products .product-card .product-image img{ max-width:78% !important; max-height:88% !important; object-fit:contain !important; transition:transform .3s var(--pc-ease) !important; }
html body #main-content #products .product-card:hover .product-image img{ transform:scale(1.06) !important; }
/* badge system */
html body #main-content #products .product-card-badge{ position:absolute !important; top:9px !important; left:9px !important; z-index:3 !important; background:var(--pc-teal) !important; color:#fff !important; font-size:9px !important; font-weight:800 !important; letter-spacing:.3px !important; padding:3px 8px !important; border-radius:7px !important; }
html body #main-content #products .product-card-badge-discount{ left:auto !important; right:9px !important; background:#fff !important; color:var(--pc-teal) !important; box-shadow:0 2px 5px rgba(0,0,0,.08) !important; }
/* wishlist */
html body #main-content #products .product-wishlist-btn{ position:absolute !important; bottom:9px !important; right:9px !important; z-index:3 !important; width:30px !important; height:30px !important; border-radius:50% !important; background:#fff !important; border:1px solid var(--pc-line) !important; color:#c2c7cc !important; display:flex !important; align-items:center !important; justify-content:center !important; opacity:0 !important; transition:opacity .18s,color .18s !important; box-shadow:0 2px 6px rgba(0,0,0,.1) !important; }
html body #main-content #products .product-card:hover .product-wishlist-btn{ opacity:1 !important; }
html body #main-content #products .product-wishlist-btn.active{ opacity:1 !important; color:#ef4444 !important; }
/* compliance: hide fabricated signals, keep real low-stock */
html body #main-content #products .product-card .viewer-count{ display:none !important; }
html body #main-content #products .product-card .stock-urgency.fast{ display:none !important; }
html body #main-content #products .product-card .stock-urgency.critical,
html body #main-content #products .product-card .stock-urgency.low{ position:absolute !important; bottom:9px !important; left:9px !important; z-index:3 !important; background:#fff !important; color:#c2410c !important; font-size:9px !important; font-weight:700 !important; padding:2px 7px !important; border-radius:6px !important; box-shadow:0 2px 5px rgba(0,0,0,.08) !important; }
/* info */
html body #main-content #products .product-card .product-info{ padding:12px 13px 13px !important; }
html body #main-content #products .product-card .product-name{ font-size:15px !important; font-weight:800 !important; color:var(--pc-ink) !important; letter-spacing:-.01em !important; }
/* R304: removed the stale `.product-name::before` COA pseudo-element — it was the
   duplicate "COA · 99%+ HPLC" line above every name (a leftover from an early
   CSS-based COA readout, superseded by the real JS `.pc-coa-chip`). Pseudo-element
   content is invisible to DOM scans, which is why it evaded every JS dedup. */
html body #main-content #products .product-card .product-name::before{ content:none !important; }
html body #main-content #products .product-card .product-dosage{ font-size:11px !important; color:var(--pc-muted) !important; margin-top:2px !important; }
html body #main-content #products .product-card .product-rating{ font-size:10px !important; color:var(--pc-gold) !important; margin-top:6px !important; }
html body #main-content #products .product-card .product-rating span{ color:var(--pc-muted) !important; }
html body #main-content #products .product-card .product-price-row{ display:flex !important; align-items:center !important; gap:8px !important; margin-top:10px !important; }
html body #main-content #products .product-card .product-price{ font-size:19px !important; font-weight:800 !important; color:var(--pc-teal) !important; }
html body #main-content #products .product-card .product-price-original{ font-size:11px !important; color:#aab0b5 !important; text-decoration:line-through !important; }
html body #main-content #products .product-card .product-add-btn{ margin-left:auto !important; width:36px !important; height:36px !important; border-radius:10px !important; background:var(--pc-teal) !important; color:#fff !important; border:0 !important; display:flex !important; align-items:center !important; justify-content:center !important; font-size:15px !important; cursor:pointer !important; box-shadow:0 4px 10px -3px rgba(13,148,136,.5) !important; transition:transform .12s var(--pc-ease) !important; }
html body #main-content #products .product-card .product-add-btn:active{ transform:scale(.9) !important; }

/* §7 grid + reveal motion */
html body #main-content #products #products-grid{
    display:grid !important; gap:18px !important;
    grid-template-columns:repeat(auto-fill,minmax(230px,1fr)) !important; margin-top:4px !important;
}
@keyframes pcCardIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
html body #main-content #products #products-grid .product-card{ animation:pcCardIn .4s var(--pc-ease) both !important; }
html body #main-content #products #products-grid .product-card:nth-child(1){animation-delay:.02s !important;}
html body #main-content #products #products-grid .product-card:nth-child(2){animation-delay:.05s !important;}
html body #main-content #products #products-grid .product-card:nth-child(3){animation-delay:.08s !important;}
html body #main-content #products #products-grid .product-card:nth-child(4){animation-delay:.11s !important;}
@media (prefers-reduced-motion: reduce){
    html body #main-content #products #products-grid .product-card{ animation:none !important; }
    html body #main-content #products .product-card,
    html body #main-content #products .product-card .product-image img{ transition:none !important; }
}

/* §5 results row + active filters + empty state */
html body #main-content #products .catalog-status-row{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap:12px !important; margin:6px 0 16px !important; flex-wrap:wrap !important; }
html body #main-content #products #catalog-status{ font-size:13px !important; font-weight:600 !important; color:var(--pc-muted) !important; letter-spacing:.01em !important; }
html body #main-content #products #catalog-active-filters{ display:flex !important; gap:8px !important; flex-wrap:wrap !important; }
html body #main-content #products .catalog-empty{ text-align:center !important; padding:54px 20px !important; background:var(--pc-surface) !important; border:1px solid var(--pc-line) !important; border-radius:var(--pc-radius) !important; }
html body #main-content #products .catalog-empty-icon{ width:54px !important; height:54px !important; margin:0 auto 14px !important; border-radius:50% !important; background:#eef6f4 !important; color:var(--pc-teal) !important; display:flex !important; align-items:center !important; justify-content:center !important; font-size:20px !important; }
html body #main-content #products .catalog-empty h3{ color:var(--pc-ink) !important; font-size:1.2rem !important; margin:0 0 6px !important; }
html body #main-content #products .catalog-empty p{ color:var(--pc-muted) !important; margin:0 0 16px !important; }
html body #main-content #products .catalog-empty-pill{ display:inline-block !important; background:#eef6f4 !important; color:var(--pc-teal) !important; border:1px solid #cfeae5 !important; border-radius:999px !important; padding:6px 13px !important; margin:4px !important; font-size:12.5px !important; font-weight:600 !important; text-decoration:none !important; }
html body #main-content #products .catalog-empty-clear{ margin-top:14px !important; background:var(--pc-teal) !important; color:#fff !important; border:0 !important; border-radius:11px !important; padding:11px 18px !important; font-weight:700 !important; cursor:pointer !important; }

/* §8 curated bundles + recently viewed */
html body #main-content #products .products-stacks-section{ margin-top:46px !important; padding-top:30px !important; border-top:1px solid var(--pc-line) !important; }
html body #main-content #products .products-stacks-title{ color:var(--pc-ink) !important; font-size:1.25rem !important; }
html body #main-content #products .products-stacks-title i{ color:var(--pc-teal) !important; }
html body #main-content #products .products-stacks-subtitle{ color:var(--pc-muted) !important; }
html body #main-content #products .products-stacks-link{ color:var(--pc-teal) !important; font-weight:700 !important; }
html body #main-content #recently-viewed-section{ background:#f5f7f8 !important; }
html body #main-content #recently-viewed-section .section-title{ color:#0f1413 !important; }

/* §9 mobile parity */
@media (max-width:600px){
    html body #main-content #products.products-section{ padding:18px 0 56px !important; }
    html body #main-content #products .catalog-hero-v2{ padding:18px 18px !important; gap:12px !important; }
    html body #main-content #products .catalog-hero-v2 .section-title{ font-size:1.7rem !important; }
    html body #main-content #products #catalog-sticky-wrap{ top:58px !important; }
    html body #main-content #products #products-grid{ grid-template-columns:repeat(2,1fr) !important; gap:12px !important; }
    html body #main-content #products .product-card .product-info{ padding:10px 10px 11px !important; }
    html body #main-content #products .product-card .product-name{ font-size:13.5px !important; }
    html body #main-content #products .product-card .product-price{ font-size:16px !important; }
    html body #main-content #products .product-card .product-add-btn{ width:32px !important; height:32px !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   R262 · PRODUCTS CATALOG — craft polish pass (impeccable + emil + ui-ux).
   Builds on R260. (R261 = clearSearch() route-around, in products.html.)
   Hero rebalanced (title left / pills right), sort affordance + <label>,
   single-line trust pills, press feedback, reduced-motion + search-font
   fixes, bolder discount pill. id-scoped to beat the #main-content normalizer.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Hero rebalance: title-left / trust-pills-right on one baseline (>=1024px).
      Reclaims the ~510px dead zone beside the H1 and cuts panel height.
      Below 1024px the hero keeps the R260 stacked column layout. ── */
@media (min-width:1024px){
    html body #main-content #products .catalog-hero-v2{
        flex-direction:row !important; align-items:center !important; flex-wrap:nowrap !important;
        justify-content:space-between !important; gap:40px !important;
        padding:22px 28px !important;
    }
    html body #main-content #products .catalog-hero-text{ flex:0 1 auto !important; }
    html body #main-content #products .catalog-hero-trust-band{
        flex:0 0 auto !important; display:grid !important; width:max-content !important;
        grid-template-columns:auto auto !important; gap:8px !important; align-content:center !important;
    }
}
/* Single-line trust pills (was a cramped 11/12px two-line stack) */
html body #main-content #products .cht-pill span{
    flex-direction:row !important; align-items:baseline !important; gap:5px !important; font-size:11.5px !important;
}
html body #main-content #products .cht-pill strong{ font-size:12.5px !important; }

/* ── Sort: real label + chevron affordance (select was a bare box, no <label>) ── */
html body #main-content #products .sort-dropdown{
    display:flex !important; align-items:center !important; gap:9px !important; position:relative !important;
}
html body #main-content #products .sort-label{
    font-size:12px !important; font-weight:600 !important; color:var(--pc-muted) !important;
    letter-spacing:.01em !important; white-space:nowrap !important;
}
html body #main-content #products .sort-dropdown #product-sort{ padding-right:34px !important; }
html body #main-content #products .sort-dropdown::after{
    content:"" !important; position:absolute !important; right:14px !important; top:50% !important;
    width:7px !important; height:7px !important; pointer-events:none !important;
    border-right:2px solid var(--pc-muted) !important; border-bottom:2px solid var(--pc-muted) !important;
    transform:translateY(-70%) rotate(45deg) !important;
}

/* ── Search input: 15px desktop (16px mobile below) to kill iOS auto-zoom ── */
html body #main-content #products #product-search{ font-size:15px !important; }

/* ── Category tiles: add press feedback (had hover, no :active) ── */
html body #main-content #products .cqj-tile:active{ transform:scale(.97) !important; }

/* ── Add-to-cart: soften the press (was scale(.9), too collapsed) ── */
html body #main-content #products .product-card .product-add-btn:active{ transform:scale(.94) !important; }

/* ── Discount pill: bolder (was the quietest element; it drives conversion) ── */
html body #main-content #products .product-card-badge-discount{
    background:var(--pc-teal-bright) !important; color:#fff !important; font-weight:800 !important;
    box-shadow:0 2px 6px rgba(13,148,136,.4) !important;
}

/* ── Reduced motion: remove movement but KEEP shadow/border feedback (R260
      killed all card transitions, which made hover snap up 4px instantly). ── */
@media (prefers-reduced-motion: reduce){
    html body #main-content #products .product-card{ transition:box-shadow .2s,border-color .2s !important; }
    html body #main-content #products .product-card:hover{ transform:none !important; }
    html body #main-content #products .product-card:hover .product-image img{ transform:none !important; }
}

/* ── Mobile parity for the polish ── */
@media (max-width:600px){
    html body #main-content #products #product-search{ font-size:16px !important; }
    html body #main-content #products .sort-dropdown{ gap:6px !important; }
    html body #main-content #products .sort-label{ font-size:11px !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   R263 · CATALOG HERO REMODEL — "The Instrument Bay".
   Replaces the light mint-gradient hero box with a dark, lab-grade instrument
   band (measurement grid + teal glow + live HPLC chromatogram + mono spec
   strip) that floats on the light catalog. Carries the R158 instrument-room
   identity into the catalog entrance. Scoped with the extra
   .catalog-hero-instrument class so it outranks R260/R262 hero rules.
   Pure CSS/SVG, prefers-reduced-motion safe, real/compliant copy.
   ════════════════════════════════════════════════════════════════════════ */

/* ── The dark band ── */
html body #main-content #products .catalog-hero-v2.catalog-hero-instrument{
    position:relative !important; overflow:hidden !important; isolation:isolate !important;
    display:flex !important; flex-direction:column !important; align-items:flex-start !important;
    flex-wrap:nowrap !important; gap:15px !important;
    background:linear-gradient(135deg,#080d0e 0%,#0b1214 55%,#070b0c 100%) !important;
    border:1px solid rgba(45,212,191,.16) !important; border-radius:20px !important;
    padding:24px 38px 20px !important; margin:6px 0 18px !important;
    box-shadow:0 22px 50px -30px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.04) !important;
}

/* ── Decorative layers (behind content) ── */
html body #main-content #products .catalog-hero-instrument .chi-layers{
    position:absolute !important; inset:0 !important; z-index:0 !important;
    pointer-events:none !important; overflow:hidden !important; border-radius:20px !important;
}
html body #main-content #products .catalog-hero-instrument .catalog-hero-text,
html body #main-content #products .catalog-hero-instrument .catalog-hero-trust-band{
    position:relative !important; z-index:1 !important;
}
/* measurement grid (instrument texture, masked to fade) */
html body #main-content #products .catalog-hero-instrument .chi-grid{
    position:absolute !important; inset:0 !important;
    background-image:linear-gradient(rgba(45,212,191,.05) 1px,transparent 1px),
                     linear-gradient(90deg,rgba(45,212,191,.05) 1px,transparent 1px) !important;
    background-size:34px 34px !important;
    -webkit-mask-image:radial-gradient(ellipse 95% 85% at 72% 36%,#000 28%,transparent 80%) !important;
            mask-image:radial-gradient(ellipse 95% 85% at 72% 36%,#000 28%,transparent 80%) !important;
}
/* teal glow (oversized so drift never reveals an edge) */
html body #main-content #products .catalog-hero-instrument .chi-glow{
    position:absolute !important; inset:-18% !important;
    background:radial-gradient(circle 520px at 80% 30%,rgba(45,212,191,.2),transparent 60%),
               radial-gradient(circle 440px at 26% 96%,rgba(20,184,166,.1),transparent 60%) !important;
    animation:chiGlowDrift 16s ease-in-out infinite alternate !important;
}
@keyframes chiGlowDrift{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(1.6%,-2.4%,0); } }
/* live HPLC chromatogram */
html body #main-content #products .catalog-hero-instrument .chi-chromatogram{
    position:absolute !important; left:0 !important; right:0 !important; bottom:6% !important;
    width:100% !important; height:58% !important; opacity:.5 !important;
}
html body #main-content #products .catalog-hero-instrument .chi-trace{
    fill:none !important; stroke:#2dd4bf !important; stroke-width:1.6 !important;
    stroke-linejoin:round !important; stroke-linecap:round !important;
    filter:drop-shadow(0 0 6px rgba(45,212,191,.55)) !important;
    stroke-dasharray:4200 !important; stroke-dashoffset:4200 !important;
    animation:chiDraw 4.4s cubic-bezier(.23,1,.32,1) .35s forwards !important;
}
@keyframes chiDraw{ to{ stroke-dashoffset:0; } }

/* ── Typography on the dark band ── */
html body #main-content #products .catalog-hero-instrument .section-title{
    color:#f8fbfa !important; -webkit-text-fill-color:#f8fbfa !important; margin:0 !important;
    font-family:'Geist','Inter',system-ui,-apple-system,sans-serif !important;
    font-size:clamp(2rem,3.5vw,3rem) !important; font-weight:800 !important;
    letter-spacing:-.025em !important; line-height:1.03 !important; text-wrap:balance !important;
    text-shadow:0 1px 18px rgba(0,0,0,.45) !important;
}
html body #main-content #products .catalog-hero-instrument .catalog-hero-accent{
    height:3px !important; width:72px !important; margin-top:14px !important;
    background:linear-gradient(90deg,#2dd4bf,#14b8a6) !important;
    box-shadow:0 0 14px rgba(45,212,191,.65) !important; border-radius:2px !important;
}
html body #main-content #products .catalog-hero-instrument .catalog-hero-lede{
    color:#a7bbb6 !important; font-size:15px !important; line-height:1.5 !important;
    max-width:54ch !important; margin:11px 0 0 !important; font-weight:400 !important; letter-spacing:.005em !important;
}

/* ── Spec strip: trust signals as instrument-readout cells ── */
html body #main-content #products .catalog-hero-instrument .catalog-hero-trust-band{
    display:flex !important; flex-wrap:wrap !important; width:auto !important;
    grid-template-columns:none !important; gap:9px !important; margin-top:2px !important;
}
html body #main-content #products .catalog-hero-instrument .cht-pill{
    background:rgba(20,184,166,.06) !important; border:1px solid rgba(45,212,191,.2) !important;
    border-radius:10px !important; padding:8px 12px !important; box-shadow:none !important;
    -webkit-backdrop-filter:blur(2px) !important; backdrop-filter:blur(2px) !important;
    transition:border-color .18s,background .18s !important;
}
html body #main-content #products .catalog-hero-instrument .cht-pill:hover{
    border-color:rgba(45,212,191,.45) !important; background:rgba(20,184,166,.1) !important;
}
html body #main-content #products .catalog-hero-instrument .cht-pill i{ color:#2dd4bf !important; font-size:13px !important; }
html body #main-content #products .catalog-hero-instrument .cht-pill span{
    font-family:'JetBrains Mono',ui-monospace,monospace !important; color:#8ea7a2 !important;
    font-size:10.5px !important; letter-spacing:.02em !important;
}
html body #main-content #products .catalog-hero-instrument .cht-pill strong{ color:#e9f3f0 !important; font-size:11px !important; font-weight:700 !important; }

/* ── Load-in choreography ── */
@keyframes chiRise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
html body #main-content #products .catalog-hero-instrument .catalog-hero-text{ animation:chiRise .55s cubic-bezier(.23,1,.32,1) both !important; }
html body #main-content #products .catalog-hero-instrument .catalog-hero-trust-band{ animation:chiRise .55s cubic-bezier(.23,1,.32,1) .12s both !important; }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce){
    html body #main-content #products .catalog-hero-instrument .chi-glow{ animation:none !important; }
    html body #main-content #products .catalog-hero-instrument .chi-trace{ animation:none !important; stroke-dashoffset:0 !important; }
    html body #main-content #products .catalog-hero-instrument .catalog-hero-text,
    html body #main-content #products .catalog-hero-instrument .catalog-hero-trust-band{ animation:none !important; }
}

/* ── Mobile ── */
@media (max-width:600px){
    html body #main-content #products .catalog-hero-v2.catalog-hero-instrument{ padding:22px 18px 20px !important; gap:13px !important; border-radius:16px !important; }
    html body #main-content #products .catalog-hero-instrument .section-title{ font-size:1.75rem !important; }
    html body #main-content #products .catalog-hero-instrument .catalog-hero-lede{ font-size:14px !important; margin-top:9px !important; }
    html body #main-content #products .catalog-hero-instrument .chi-chromatogram{ height:46% !important; opacity:.4 !important; }
    /* spec strip → single horizontal scroll row (keeps the band compact, matches the tiles below) */
    html body #main-content #products .catalog-hero-instrument .catalog-hero-trust-band{
        flex-wrap:nowrap !important; overflow-x:auto !important; width:100% !important;
        scrollbar-width:none !important; -webkit-overflow-scrolling:touch !important;
    }
    html body #main-content #products .catalog-hero-instrument .catalog-hero-trust-band::-webkit-scrollbar{ display:none !important; }
    html body #main-content #products .catalog-hero-instrument .cht-pill{ flex:0 0 auto !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   R264 · INSTRUMENT BAY — bespoke AI background (nano_banana_pro; decorative,
   abstract; self-hosted WebP, ~17KB). The generated texture carries the grid
   + waveform + right bloom, so it replaces the CSS grid and the SVG
   chromatogram. .chi-glow becomes a fixed left scrim for title legibility;
   the image drifts subtly (Ken-Burns) for life. prefers-reduced-motion safe.
   ════════════════════════════════════════════════════════════════════════ */
/* image layer (was the CSS measurement grid) */
html body #main-content #products .catalog-hero-instrument .chi-grid{
    background-image:url("images/catalog-hero-instrument-2.webp") !important;
    background-size:cover !important; background-position:right center !important; background-repeat:no-repeat !important;
    -webkit-mask-image:none !important; mask-image:none !important;
    transform:scale(1.05) !important;
    animation:chiImgDrift 26s ease-in-out infinite alternate !important;
}
@keyframes chiImgDrift{ from{ transform:scale(1.05) translateX(0); } to{ transform:scale(1.09) translateX(-1.4%); } }
/* fixed left scrim — keeps the title + spec strip fully legible over the image */
html body #main-content #products .catalog-hero-instrument .chi-glow{
    inset:0 !important;
    background:linear-gradient(90deg,#080d0e 0%,rgba(8,13,14,.92) 26%,rgba(8,13,14,.45) 50%,transparent 74%) !important;
    animation:none !important;
}
/* the image already has the waveform — retire the CSS chromatogram */
html body #main-content #products .catalog-hero-instrument .chi-chromatogram{ display:none !important; }
/* reduced motion: hold the image still */
@media (prefers-reduced-motion: reduce){
    html body #main-content #products .catalog-hero-instrument .chi-grid{ animation:none !important; transform:scale(1.05) !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   R265 · INSTRUMENT BAY — lede typography + scrim fix.
   (a) Stronger left scrim so text sits on clean dark, not the teal-tinted
   image (kills the green hue behind the copy). (b) Brighter, more legible
   lede with the "99%+ HPLC" stat in JetBrains Mono teal. (c) "Shipped same
   day" promoted to its own teal-accented tagline line.
   ════════════════════════════════════════════════════════════════════════ */
html body #main-content #products .catalog-hero-instrument .chi-glow{
    background:linear-gradient(90deg,#080d0e 0%,#080d0e 44%,rgba(8,13,14,.68) 64%,transparent 86%) !important;
}
html body #main-content #products .catalog-hero-instrument .catalog-hero-lede{
    color:#c7d7d3 !important; font-size:16px !important; line-height:1.55 !important;
    max-width:42ch !important; margin:13px 0 0 !important; font-weight:400 !important; letter-spacing:.005em !important;
}
html body #main-content #products .catalog-hero-instrument .catalog-hero-lede .chl-stat{
    font-family:'JetBrains Mono',ui-monospace,monospace !important; color:#2dd4bf !important;
    font-weight:600 !important; letter-spacing:0 !important; white-space:nowrap !important;
}
html body #main-content #products .catalog-hero-instrument .catalog-hero-ship{
    display:flex !important; align-items:center !important; gap:8px !important;
    margin:11px 0 0 !important; color:#eafaf6 !important;
    font-size:14px !important; font-weight:600 !important; letter-spacing:.02em !important;
}
html body #main-content #products .catalog-hero-instrument .catalog-hero-ship i{ color:#2dd4bf !important; font-size:13px !important; }
@media (max-width:600px){
    html body #main-content #products .catalog-hero-instrument .catalog-hero-lede{ font-size:14.5px !important; margin-top:9px !important; max-width:none !important; }
    html body #main-content #products .catalog-hero-instrument .catalog-hero-ship{ font-size:13px !important; margin-top:9px !important; }
}

/* R266 · category quick-jump tiles nudged down a touch (more breathing room
   under the search/sort toolbar). */
html body #main-content #products #catalog-quickjump{ margin-top:22px !important; }

/* ════════════════════════════════════════════════════════════════════════
   R267 · Kill the residual green/teal cast in the dark band. The base
   gradient + scrim darks were teal-tinted (#080d0e / #0b1214 — green & blue
   channels above red), which read as a green hue behind the text. Swap to a
   neutral charcoal so the copy area is true dark. Teal stays only where it's
   intentional (the AI waveform on the right + the accent rule).
   ════════════════════════════════════════════════════════════════════════ */
html body #main-content #products .catalog-hero-v2.catalog-hero-instrument{
    background:linear-gradient(135deg,#0b0b0c 0%,#0d0d0f 55%,#090909 100%) !important;
}
html body #main-content #products .catalog-hero-instrument .chi-glow{
    background:linear-gradient(90deg,#0b0b0c 0%,#0b0b0c 46%,rgba(11,11,12,.72) 66%,transparent 88%) !important;
}

/* ════════════════════════════════════════════════════════════════════════
   R268 · Green hue, fully eliminated. Even the neutral-charcoal still read
   faintly teal because the spec-cell glass + the band border were teal, and
   the scrim let a little image-teal creep left. Flat neutral base, stronger
   neutral scrim (solid to 56%), neutral cell glass, neutral band border.
   Teal survives ONLY on the right-hand waveform image, the accent rule, the
   "99%+" stat, and the small cell icons.
   ════════════════════════════════════════════════════════════════════════ */
html body #main-content #products .catalog-hero-v2.catalog-hero-instrument{
    background:linear-gradient(160deg,#0c0c0d 0%,#0a0a0b 60%,#090909 100%) !important;
    border-color:rgba(255,255,255,.07) !important;
}
html body #main-content #products .catalog-hero-instrument .chi-glow{
    background:linear-gradient(90deg,#0b0b0c 0%,#0b0b0c 56%,rgba(11,11,12,.7) 74%,transparent 92%) !important;
}
html body #main-content #products .catalog-hero-instrument .cht-pill{
    background:rgba(255,255,255,.05) !important; border-color:rgba(255,255,255,.14) !important;
}
html body #main-content #products .catalog-hero-instrument .cht-pill:hover{
    background:rgba(255,255,255,.08) !important; border-color:rgba(255,255,255,.24) !important;
}

/* R269 · category quick-jump row clips the tile's top border on hover. The
   row uses overflow-x:auto for horizontal scroll, which forces overflow-y to
   clip as well, so the -1px hover lift pushes the top border out of view.
   Add vertical padding inside the scroll area to give the lift room. */
html body #main-content #products #catalog-quickjump{ padding-top:5px !important; padding-bottom:5px !important; }

/* ════════════════════════════════════════════════════════════════════════
   R270 · GREEN HUE — root cause found + fixed at the source. Sampling the AI
   background image's pixels proved its "dark" left half is actually dark TEAL
   (rgb(11,17,19) … rgb(23,51,51) — green & blue above red). Because .chi-grid
   is transformed (scale 1.05) it formed a stacking context that painted ABOVE
   the neutral scrim, so that teal showed through on the text side, and all the
   base/scrim/cell neutralizing was being painted over. Fix:
   (1) explicit z-index so the scrim is definitively above the image, and
   (2) mask the image to the RIGHT half so the text side has no image at all
       (pure neutral base). Teal now lives only where the waveform is.
   ════════════════════════════════════════════════════════════════════════ */
html body #main-content #products .catalog-hero-instrument .chi-grid{
    z-index:0 !important;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 46%,#000 70%,#000 100%) !important;
            mask-image:linear-gradient(90deg,transparent 0%,transparent 46%,#000 70%,#000 100%) !important;
}
html body #main-content #products .catalog-hero-instrument .chi-glow{ z-index:1 !important; }

/* ════════════════════════════════════════════════════════════════════════
   R271 · CATEGORY QUICK-JUMP TILES — premium redesign. Vertical tiles with
   gradient icon chips color-coded per research area (functional color, aids
   scanning), lift + chip-pop on hover, a confident teal active state, press
   feedback, and a gold deal-flag on Bundles. Reduced-motion + mobile parity.
   ════════════════════════════════════════════════════════════════════════ */
/* row — extra top padding so the Bundles deal-flag + hover lift aren't clipped */
html body #main-content #products #catalog-quickjump{
    gap:10px !important; align-items:stretch !important;
    padding-top:13px !important; padding-bottom:8px !important;
}
/* tile */
html body #main-content #products .cqj-tile{
    flex-direction:column !important; align-items:center !important; justify-content:flex-start !important;
    gap:10px !important; min-width:96px !important; padding:15px 13px 13px !important;
    background:#ffffff !important; border:1px solid var(--pc-line) !important; border-radius:16px !important;
    box-shadow:0 1px 2px rgba(16,40,38,.05) !important;
    transition:transform .22s var(--pc-ease), box-shadow .22s, border-color .2s !important;
}
/* icon chip — default brand teal; per-category gradients below */
html body #main-content #products .cqj-tile .cqj-icon{
    width:44px !important; height:44px !important; border-radius:13px !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
    background:linear-gradient(140deg,#14b8a6,#0d9488) !important;
    box-shadow:0 5px 12px -4px rgba(13,148,136,.5) !important;
    transition:transform .22s var(--pc-ease), box-shadow .22s !important;
}
html body #main-content #products .cqj-tile .cqj-icon i{ color:#ffffff !important; font-size:18px !important; }
html body #main-content #products .cqj-tile .cqj-label{
    font-size:12.5px !important; font-weight:650 !important; color:var(--pc-ink) !important;
    letter-spacing:-.005em !important; white-space:nowrap !important; line-height:1 !important;
}
/* per-category gradient icon chips */
html body #main-content #products .cqj-tile.cqj-metabolic .cqj-icon{ background:linear-gradient(140deg,#fbbf24,#f97316) !important; box-shadow:0 5px 12px -4px rgba(249,115,22,.5) !important; }
html body #main-content #products .cqj-tile.cqj-skin .cqj-icon{ background:linear-gradient(140deg,#f472b6,#ec4899) !important; box-shadow:0 5px 12px -4px rgba(236,72,153,.5) !important; }
html body #main-content #products .cqj-tile.cqj-cognitive .cqj-icon{ background:linear-gradient(140deg,#a78bfa,#7c3aed) !important; box-shadow:0 5px 12px -4px rgba(124,58,237,.5) !important; }
html body #main-content #products .cqj-tile.cqj-healing .cqj-icon{ background:linear-gradient(140deg,#fb7185,#e11d48) !important; box-shadow:0 5px 12px -4px rgba(225,29,72,.5) !important; }
html body #main-content #products .cqj-tile.cqj-growth .cqj-icon{ background:linear-gradient(140deg,#34d399,#059669) !important; box-shadow:0 5px 12px -4px rgba(5,150,105,.5) !important; }
html body #main-content #products .cqj-tile.cqj-longevity .cqj-icon{ background:linear-gradient(140deg,#38bdf8,#0284c7) !important; box-shadow:0 5px 12px -4px rgba(2,132,199,.5) !important; }
html body #main-content #products .cqj-tile.cqj-bundles .cqj-icon{ background:linear-gradient(140deg,#fbbf24,#d97706) !important; box-shadow:0 5px 12px -4px rgba(217,119,6,.5) !important; }
/* hover (pointer devices only) */
@media (hover:hover) and (pointer:fine){
    html body #main-content #products .cqj-tile:hover{ transform:translateY(-3px) !important; box-shadow:0 16px 28px -18px rgba(16,40,38,.38) !important; border-color:#d4dade !important; }
    html body #main-content #products .cqj-tile:hover .cqj-icon{ transform:scale(1.08) translateY(-1px) !important; }
}
/* press */
html body #main-content #products .cqj-tile:active{ transform:translateY(-1px) scale(.97) !important; }
/* active / selected tile */
html body #main-content #products .cqj-tile.is-active{
    background:linear-gradient(150deg,#10a597,#0d9488) !important; border-color:#0d9488 !important;
    box-shadow:0 12px 24px -12px rgba(13,148,136,.6) !important;
}
html body #main-content #products .cqj-tile.is-active .cqj-label{ color:#ffffff !important; }
html body #main-content #products .cqj-tile.is-active .cqj-icon{ background:rgba(255,255,255,.2) !important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.15) !important; }
html body #main-content #products .cqj-tile.is-active .cqj-icon i{ color:#ffffff !important; }
/* bundles surface + gold deal-flag */
html body #main-content #products .cqj-tile.cqj-bundles{ background:linear-gradient(155deg,#fffaf0,#ffffff) !important; border-color:#f0d39a !important; }
html body #main-content #products .cqj-tile .cqj-badge{
    position:absolute !important; top:-8px !important; right:-7px !important;
    background:linear-gradient(135deg,#f59e0b,#d97706) !important; color:#fff !important;
    font-size:8.5px !important; font-weight:800 !important; letter-spacing:.3px !important;
    padding:3px 7px !important; border-radius:8px !important; box-shadow:0 4px 10px -3px rgba(217,119,6,.55) !important;
}
/* reduced motion */
@media (prefers-reduced-motion: reduce){
    html body #main-content #products .cqj-tile,
    html body #main-content #products .cqj-tile .cqj-icon{ transition:none !important; }
    html body #main-content #products .cqj-tile:hover{ transform:none !important; }
    html body #main-content #products .cqj-tile:hover .cqj-icon{ transform:none !important; }
}
/* mobile */
@media (max-width:600px){
    html body #main-content #products .cqj-tile{ min-width:84px !important; padding:13px 10px 11px !important; gap:9px !important; }
    html body #main-content #products .cqj-tile .cqj-icon{ width:40px !important; height:40px !important; }
    html body #main-content #products .cqj-tile .cqj-icon i{ font-size:16px !important; }
    html body #main-content #products .cqj-tile .cqj-label{ font-size:11.5px !important; }
}

/* R272 reverted (R279) — search/sort toolbar kept at the light committed size
   (max-width:900px, centered) per user request; dark full-width treatment removed. */

/* ════════════════════════════════════════════════════════════════════════
   R273 · INSTRUMENT BAY — maximization pass. Featured best-seller spotlight
   (live data, right column), live scan-beam + drifting particles, refined
   load choreography, depth/lighting, and the real Geist display font.
   prefers-reduced-motion safe; compliant (real product data only).
   ════════════════════════════════════════════════════════════════════════ */

/* ── two-column hero on desktop (text left, spotlight right) ── */
@media (min-width:1024px){
    html body #main-content #products .catalog-hero-v2.catalog-hero-instrument{
        flex-direction:row !important; align-items:center !important; gap:30px !important; padding:26px 30px !important;
    }
}
html body #main-content #products .catalog-hero-instrument .chi-main{
    position:relative !important; z-index:1 !important; flex:1 1 auto !important; min-width:0 !important;
    display:flex !important; flex-direction:column !important; gap:15px !important;
}

/* ── Geist display H1 ── */
html body #main-content #products .catalog-hero-instrument .section-title{ font-family:'Geist','Inter',system-ui,-apple-system,sans-serif !important; }

/* ── featured best-seller spotlight card ── */
html body #main-content #products .chi-spotlight{
    flex:0 0 266px !important; align-self:center !important; position:relative !important; z-index:2 !important;
    display:flex !important; flex-direction:column !important; gap:7px !important;
    background:linear-gradient(160deg,rgba(20,24,26,.78),rgba(10,12,13,.84)) !important;
    border:1px solid rgba(45,212,191,.22) !important; border-radius:16px !important;
    padding:13px 13px 12px !important; cursor:pointer !important; text-decoration:none !important;
    box-shadow:0 20px 44px -24px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.05) !important;
    -webkit-backdrop-filter:blur(6px) !important; backdrop-filter:blur(6px) !important;
    transition:transform .25s var(--pc-ease), box-shadow .25s, border-color .2s !important;
}
html body #main-content #products .chi-spotlight:hover{ transform:translateY(-4px) !important; box-shadow:0 28px 54px -22px rgba(0,0,0,.85) !important; border-color:rgba(45,212,191,.5) !important; }
html body #main-content #products .chi-spotlight:active{ transform:translateY(-1px) scale(.99) !important; }
html body #main-content #products .chi-spotlight:focus-visible{ outline:2px solid #2dd4bf !important; outline-offset:3px !important; }
html body #main-content #products .chi-sp-tag{ align-self:flex-start !important; display:inline-flex !important; align-items:center !important; gap:4px !important; font-family:'JetBrains Mono',ui-monospace,monospace !important; font-size:8.5px !important; font-weight:800 !important; letter-spacing:.6px !important; color:#06100e !important; background:linear-gradient(135deg,#2dd4bf,#14b8a6) !important; padding:3px 8px !important; border-radius:6px !important; }
html body #main-content #products .chi-sp-disc{ position:absolute !important; top:12px !important; right:12px !important; background:#14b8a6 !important; color:#fff !important; font-size:10px !important; font-weight:800 !important; padding:2px 7px !important; border-radius:7px !important; box-shadow:0 3px 8px -2px rgba(20,184,166,.5) !important; }
html body #main-content #products .chi-sp-img{ height:106px !important; border-radius:12px !important; background:linear-gradient(165deg,#eef7f4,#dcefe9) !important; display:flex !important; align-items:center !important; justify-content:center !important; padding:6px !important; margin:1px 0 1px !important; }
html body #main-content #products .chi-sp-img img{ max-height:92px !important; max-width:66% !important; object-fit:contain !important; }
html body #main-content #products .chi-sp-body{ display:flex !important; flex-direction:column !important; gap:3px !important; min-width:0 !important; }
html body #main-content #products .chi-sp-name{ color:#f3f8f6 !important; font-family:'Geist','Inter',sans-serif !important; font-weight:800 !important; font-size:14px !important; line-height:1.15 !important; letter-spacing:-.01em !important; }
html body #main-content #products .chi-sp-dose{ color:#8ea7a2 !important; font-size:10px !important; font-family:'JetBrains Mono',ui-monospace,monospace !important; letter-spacing:.01em !important; }
html body #main-content #products .chi-sp-row{ display:flex !important; align-items:center !important; justify-content:space-between !important; margin-top:5px !important; gap:8px !important; }
html body #main-content #products .chi-sp-price{ display:flex !important; align-items:baseline !important; gap:6px !important; }
html body #main-content #products .chi-sp-was{ color:#7c8a87 !important; font-size:11px !important; text-decoration:line-through !important; }
html body #main-content #products .chi-sp-now{ color:#2dd4bf !important; font-size:18px !important; font-weight:800 !important; }
html body #main-content #products .chi-sp-cta{ display:inline-flex !important; align-items:center !important; gap:5px !important; background:#0d9488 !important; color:#fff !important; font-size:11.5px !important; font-weight:700 !important; padding:7px 12px !important; border-radius:9px !important; white-space:nowrap !important; box-shadow:0 6px 14px -5px rgba(13,148,136,.6) !important; transition:background .18s !important; }
html body #main-content #products .chi-spotlight:hover .chi-sp-cta{ background:#10a597 !important; }
html body #main-content #products .chi-sp-cta i{ font-size:10px !important; transition:transform .2s var(--pc-ease) !important; }
html body #main-content #products .chi-spotlight:hover .chi-sp-cta i{ transform:translateX(3px) !important; }

/* ── live scan beam (sweeps across the waveform; sits under the text scrim) ── */
html body #main-content #products .catalog-hero-instrument .chi-scan{
    position:absolute !important; top:0 !important; bottom:0 !important; left:0 !important; width:130px !important; z-index:0 !important; pointer-events:none !important;
    background:linear-gradient(90deg,transparent,rgba(45,212,191,.09) 46%,rgba(45,212,191,.15) 50%,rgba(45,212,191,.09) 54%,transparent) !important;
    filter:blur(2px) !important; animation:chiScan 7s linear infinite !important;
}
@keyframes chiScan{ 0%{ transform:translateX(-160px); opacity:0; } 10%{ opacity:1; } 90%{ opacity:1; } 100%{ transform:translateX(1320px); opacity:0; } }

/* ── drifting depth particles (right side, over the dark band) ── */
html body #main-content #products .catalog-hero-instrument .chi-particle{ position:absolute !important; z-index:0 !important; width:3px !important; height:3px !important; border-radius:50% !important; background:rgba(45,212,191,.55) !important; filter:blur(.4px) !important; pointer-events:none !important; opacity:0 !important; animation:chiFloat 9s ease-in-out infinite !important; }
html body #main-content #products .catalog-hero-instrument .chi-particle:nth-child(4){ left:60%; top:32%; animation-delay:0s !important; }
html body #main-content #products .catalog-hero-instrument .chi-particle:nth-child(5){ left:80%; top:62%; width:2px !important; height:2px !important; animation-delay:2.4s !important; }
html body #main-content #products .catalog-hero-instrument .chi-particle:nth-child(6){ left:71%; top:46%; animation-delay:4.8s !important; }
html body #main-content #products .catalog-hero-instrument .chi-particle:nth-child(7){ left:88%; top:36%; width:2px !important; height:2px !important; animation-delay:1.4s !important; }
@keyframes chiFloat{ 0%{ opacity:0; transform:translateY(7px); } 30%{ opacity:.7; } 70%{ opacity:.45; } 100%{ opacity:0; transform:translateY(-14px); } }

/* ── depth: top-edge highlight + soft vignette (above the visuals, below content) ── */
html body #main-content #products .catalog-hero-instrument .chi-layers::after{
    content:"" !important; position:absolute !important; inset:0 !important; z-index:6 !important; pointer-events:none !important; border-radius:20px !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07), inset 0 0 70px 6px rgba(0,0,0,.4) !important;
}

/* ── refined load choreography (per-element, with the accent rule drawing in) ── */
@keyframes chiRise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@keyframes chiDrawIn{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@keyframes chiPop{ from{ opacity:0; transform:translateY(12px) scale(.97); } to{ opacity:1; transform:none; } }
html body #main-content #products .catalog-hero-instrument .catalog-hero-text{ animation:none !important; }
html body #main-content #products .catalog-hero-instrument .section-title{ animation:chiRise .55s cubic-bezier(.23,1,.32,1) both !important; }
html body #main-content #products .catalog-hero-instrument .catalog-hero-accent{ transform-origin:left center !important; animation:chiDrawIn .5s cubic-bezier(.23,1,.32,1) .18s both !important; }
html body #main-content #products .catalog-hero-instrument .catalog-hero-lede{ animation:chiRise .55s cubic-bezier(.23,1,.32,1) .26s both !important; }
html body #main-content #products .catalog-hero-instrument .catalog-hero-ship{ animation:chiRise .55s cubic-bezier(.23,1,.32,1) .34s both !important; }
html body #main-content #products .catalog-hero-instrument .catalog-hero-trust-band{ animation:none !important; }
html body #main-content #products .catalog-hero-instrument .catalog-hero-trust-band .cht-pill{ animation:chiRise .5s cubic-bezier(.23,1,.32,1) both !important; }
html body #main-content #products .catalog-hero-instrument .catalog-hero-trust-band .cht-pill:nth-child(1){ animation-delay:.42s !important; }
html body #main-content #products .catalog-hero-instrument .catalog-hero-trust-band .cht-pill:nth-child(2){ animation-delay:.48s !important; }
html body #main-content #products .catalog-hero-instrument .catalog-hero-trust-band .cht-pill:nth-child(3){ animation-delay:.54s !important; }
html body #main-content #products .catalog-hero-instrument .catalog-hero-trust-band .cht-pill:nth-child(4){ animation-delay:.60s !important; }
html body #main-content #products .chi-spotlight{ animation:chiPop .6s cubic-bezier(.23,1,.32,1) .3s both !important; }

/* ── tablet / mobile: spotlight becomes a full-width horizontal card below ── */
@media (max-width:1023px){
    html body #main-content #products .chi-spotlight{ flex:none !important; width:100% !important; align-self:stretch !important; flex-direction:row !important; align-items:center !important; gap:13px !important; padding:12px !important; }
    html body #main-content #products .chi-sp-img{ flex:0 0 84px !important; width:84px !important; height:84px !important; margin:0 !important; }
    html body #main-content #products .chi-sp-img img{ max-height:70px !important; }
    html body #main-content #products .chi-sp-body{ flex:1 1 auto !important; min-width:0 !important; }
    html body #main-content #products .chi-sp-tag{ position:absolute !important; top:10px !important; left:10px !important; }
    html body #main-content #products .chi-sp-disc{ top:10px !important; right:10px !important; }
}
@media (max-width:600px){
    html body #main-content #products .chi-spotlight{ gap:11px !important; }
    html body #main-content #products .chi-sp-img{ flex:0 0 72px !important; width:72px !important; height:72px !important; }
    html body #main-content #products .chi-sp-name{ font-size:13px !important; }
    html body #main-content #products .chi-sp-now{ font-size:16px !important; }
}

/* ── reduced motion ── */
@media (prefers-reduced-motion: reduce){
    html body #main-content #products .catalog-hero-instrument .chi-scan,
    html body #main-content #products .catalog-hero-instrument .chi-particle{ animation:none !important; opacity:0 !important; }
    html body #main-content #products .catalog-hero-instrument .section-title,
    html body #main-content #products .catalog-hero-instrument .catalog-hero-accent,
    html body #main-content #products .catalog-hero-instrument .catalog-hero-lede,
    html body #main-content #products .catalog-hero-instrument .catalog-hero-ship,
    html body #main-content #products .catalog-hero-instrument .catalog-hero-trust-band .cht-pill,
    html body #main-content #products .chi-spotlight{ animation:none !important; }
    html body #main-content #products .catalog-hero-instrument .catalog-hero-accent{ transform:none !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   R274 · CATEGORY TILES — bigger, wider, more tappable. Larger icon chips,
   labels and padding; on desktop the 8 tiles FILL the full row (segmented
   bar) instead of sitting left-packed; mobile keeps a wider scroll row.
   ════════════════════════════════════════════════════════════════════════ */
/* more vertical room so the bigger hover lift + Bundles deal-flag aren't clipped */
html body #main-content #products #catalog-quickjump{ gap:12px !important; padding-top:10px !important; padding-bottom:9px !important; }
/* base: bigger tiles */
html body #main-content #products .cqj-tile{
    min-width:112px !important; padding:17px 15px 15px !important; gap:11px !important; border-radius:18px !important;
}
html body #main-content #products .cqj-tile .cqj-icon{ width:50px !important; height:50px !important; border-radius:15px !important; }
html body #main-content #products .cqj-tile .cqj-icon i{ font-size:20px !important; }
html body #main-content #products .cqj-tile .cqj-label{ font-size:13px !important; }
/* desktop: tiles grow equally to fill the full row width */
@media (min-width:1024px){
    html body #main-content #products .cqj-tile{ flex:1 1 0 !important; min-width:0 !important; }
}
/* mobile: still bigger than before, scrolls */
@media (max-width:600px){
    html body #main-content #products .cqj-tile{ min-width:100px !important; padding:15px 12px 13px !important; }
    html body #main-content #products .cqj-tile .cqj-icon{ width:46px !important; height:46px !important; }
    html body #main-content #products .cqj-tile .cqj-icon i{ font-size:18px !important; }
    html body #main-content #products .cqj-tile .cqj-label{ font-size:12.5px !important; }
}

/* R275 reverted (R279) — grey toolbar bar removed; search + sort stay as the
   light committed pills per user request. */

/* ════════════════════════════════════════════════════════════════════════
   R276 · Remove the teal scan beam + particles entirely — a belt-and-suspenders
   kill of every moving-teal element so nothing can read as a green glow.
   (R279: the toolbar / search-size lines were dropped — search stays light.)
   ════════════════════════════════════════════════════════════════════════ */
html body #main-content #products .catalog-hero-instrument .chi-scan{ display:none !important; }
html body #main-content #products .catalog-hero-instrument .chi-particle{ display:none !important; }

/* R277 + R278 reverted (R279) per user request:
   · R277 (which greyed the COA / Same-Day / Free Ship icons + "Shipped same day"
     bolt) is removed, so the original brand teal returns on that cluster.
   · R278 (toolbar fit-content) is removed, so the search/sort keep the light size. */

/* ════════════════════════════════════════════════════════════════════════
   R280 · two targeted catalog tweaks per user request:
   (a) SEARCH + SORT → restore the ORIGINAL committed look (full-pill search +
       softer 1.5px border; sort at 14px radius). R260's 12px rounded-rect is
       overridden (same #products specificity, but later in the cascade).
   (b) TRUST-PILL + ship-line TEXT → brighter / whiter for legibility on the
       dark band. Icons keep their brand teal.
   ════════════════════════════════════════════════════════════════════════ */
/* (a) original full-pill search bar */
html body #main-content #products .product-search{
    flex:1 1 360px !important; max-width:560px !important; min-width:280px !important;
    padding:0 16px 0 22px !important;
    background:#ffffff !important;
    border:1.5px solid rgba(0,0,0,0.08) !important;
    border-radius:999px !important;
    box-shadow:0 1px 3px rgba(15,23,42,0.04) !important;
}
/* (a) original teal magnifier icon — R260 had muted it to grey */
html body #main-content #products .product-search > i,
html body #main-content #products .product-search > i.fa-search{ color:#14b8a6 !important; font-size:1.05rem !important; }
/* (a) original sort dropdown */
html body #main-content #products .sort-dropdown select,
html body #main-content #products .sort-dropdown #product-sort{
    border:1.5px solid rgba(0,0,0,0.10) !important;
    border-radius:14px !important;
    padding:14px 40px 14px 18px !important;
    box-shadow:0 2px 6px rgba(15,23,42,0.04) !important;
}
/* (b) brighter trust-pill + ship-line text (icons keep brand teal) */
html body #main-content #products .catalog-hero-instrument .cht-pill strong{ color:#ffffff !important; }
html body #main-content #products .catalog-hero-instrument .cht-pill span{ color:#dcdcdc !important; }
html body #main-content #products .catalog-hero-instrument .catalog-hero-ship{ color:#ffffff !important; }

/* R280 follow-ups per user request (search/Featured only):
   · bars a touch thicker (13px -> 16px vertical padding, search + Featured matched)
   · drop the grey panel + drop-shadow that sat behind the search/sort row. */
html body #main-content #products .product-search input,
html body #main-content #products .product-search input#product-search{ padding-top:16px !important; padding-bottom:16px !important; }
html body #main-content #products .sort-dropdown select,
html body #main-content #products .sort-dropdown #product-sort{ padding-top:16px !important; padding-bottom:16px !important; }
html body #main-content #products #catalog-sticky-wrap{ background:transparent !important; box-shadow:none !important; }

/* ════════════════════════════════════════════════════════════════════════
   R281 · TRUST BAND elevation — "instrument readout chips" + same-day badge.
   Lit teal-glass chips with structured icon wells, Geist labels + JetBrains-
   Mono spec sub-labels (bright teal), depth + hover glow. "Shipped same day"
   promoted to a glowing pill badge with a gently pulsing bolt. Hover avoids
   transform (the load-in keyframes own transform); full reduced-motion fallback.
   ════════════════════════════════════════════════════════════════════════ */
html body #main-content #products .catalog-hero-instrument .catalog-hero-trust-band{ gap:8px !important; }
/* the chip surface */
html body #main-content #products .catalog-hero-instrument .cht-pill{
    display:flex !important; align-items:center !important; gap:9px !important;
    background:linear-gradient(180deg, rgba(45,212,191,.11), rgba(20,184,166,.03)) !important;
    border:1px solid rgba(45,212,191,.26) !important;
    border-radius:12px !important;
    padding:8px 13px 8px 8px !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 6px 16px -10px rgba(0,0,0,.7) !important;
    -webkit-backdrop-filter:blur(3px) !important; backdrop-filter:blur(3px) !important;
    transition:border-color .2s ease, background .2s ease, box-shadow .2s ease !important;
}
html body #main-content #products .catalog-hero-instrument .cht-pill:hover{
    border-color:rgba(94,234,212,.5) !important;
    background:linear-gradient(180deg, rgba(45,212,191,.16), rgba(20,184,166,.05)) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.09), 0 10px 24px -12px rgba(45,212,191,.32) !important;
}
/* icon "well" — a structured instrument key */
html body #main-content #products .catalog-hero-instrument .cht-pill i{
    display:grid !important; place-items:center !important;
    width:26px !important; height:26px !important; flex:0 0 26px !important;
    border-radius:8px !important;
    background:rgba(45,212,191,.14) !important;
    box-shadow:inset 0 0 0 1px rgba(45,212,191,.22) !important;
    color:#5eead4 !important; font-size:12.5px !important;
    filter:drop-shadow(0 0 6px rgba(45,212,191,.22)) !important;
    transition:background .2s ease, box-shadow .2s ease !important;
}
html body #main-content #products .catalog-hero-instrument .cht-pill:hover i{
    background:rgba(45,212,191,.22) !important; box-shadow:inset 0 0 0 1px rgba(94,234,212,.42) !important;
}
/* label (Geist display) + spec sub-label (JetBrains Mono, bright teal) */
html body #main-content #products .catalog-hero-instrument .cht-pill strong{
    font-family:'Geist',Inter,sans-serif !important; color:#ffffff !important;
    font-size:12.5px !important; font-weight:700 !important; letter-spacing:-.01em !important;
}
html body #main-content #products .catalog-hero-instrument .cht-pill span{
    font-family:'JetBrains Mono',ui-monospace,monospace !important; color:#9fe6d8 !important;
    font-size:10px !important; letter-spacing:.03em !important;
}
/* "Shipped same day" → elevated same-day badge */
html body #main-content #products .catalog-hero-instrument .catalog-hero-ship{
    display:inline-flex !important; align-items:center !important; gap:8px !important;
    background:linear-gradient(180deg, rgba(45,212,191,.12), rgba(45,212,191,.03)) !important;
    border:1px solid rgba(45,212,191,.3) !important;
    border-radius:999px !important;
    padding:5px 14px 5px 6px !important;
    color:#ffffff !important;
    font-family:'Geist',Inter,sans-serif !important; font-weight:600 !important;
    font-size:13px !important; letter-spacing:-.005em !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06) !important;
}
html body #main-content #products .catalog-hero-instrument .catalog-hero-ship i{
    display:grid !important; place-items:center !important;
    width:22px !important; height:22px !important; border-radius:50% !important;
    background:rgba(45,212,191,.16) !important; color:#5eead4 !important; font-size:11px !important;
    box-shadow:inset 0 0 0 1px rgba(45,212,191,.26) !important;
    animation:shipBolt 2.6s ease-in-out infinite !important;
}
@keyframes shipBolt{ 0%,100%{ filter:drop-shadow(0 0 3px rgba(45,212,191,.22)); } 50%{ filter:drop-shadow(0 0 9px rgba(45,212,191,.55)); } }
@media (prefers-reduced-motion: reduce){
    html body #main-content #products .catalog-hero-instrument .catalog-hero-ship i{ animation:none !important; }
    html body #main-content #products .catalog-hero-instrument .cht-pill{ transition:none !important; }
}

/* R282 · tighten the catalog vertical rhythm a touch — trim the hero→toolbar
   and toolbar→tiles gaps a few px each (per "tighten spacing just a tad").
   High-specificity: hero margin set via all 3 classes; tiles via #id (beats R266). */
html body #main-content #products .catalog-hero.catalog-hero-v2.catalog-hero-instrument{ margin-bottom:12px !important; }
html body #main-content #products #catalog-quickjump{ margin-top:14px !important; }

/* ════════════════════════════════════════════════════════════════════════
   R284 · "elegant shapes" ambient effect for the dark hero (21st.dev's
   shape-landing-hero, re-built native + brand-teal). 8 soft blurred teal
   gradient pills (the .chi-particle layers) that settle in on load then drift
   slowly + de-synced, BEHIND the text (z:1, under chi-main). Brighter/larger
   per request. The AI chromatogram graphic is hidden for now (TEMP, below).
   Full reduced-motion fallback.
   ════════════════════════════════════════════════════════════════════════ */
html body #main-content #products .catalog-hero-instrument .chi-particle{
    display:block !important; position:absolute !important;
    width:auto !important; height:auto !important;
    border-radius:999px !important;
    background:linear-gradient(90deg, rgba(45,212,191,.26), rgba(20,184,166,.05) 66%, transparent) !important;
    border:1px solid rgba(45,212,191,.16) !important;
    -webkit-backdrop-filter:blur(2px) !important; backdrop-filter:blur(2px) !important;
    box-shadow:0 10px 40px rgba(45,212,191,.12) !important;
    pointer-events:none !important; opacity:var(--op,.7) !important; z-index:1 !important;
    animation:chiShapeIn 1.8s cubic-bezier(.23,.86,.39,.96) both,
              chiShapeFloat var(--fdur,13s) ease-in-out 1.8s infinite !important;
}
html body #main-content #products .catalog-hero-instrument .chi-particle::after{
    content:'' !important; position:absolute !important; inset:0 !important;
    border-radius:999px !important; pointer-events:none !important;
    background:radial-gradient(circle at 50% 50%, rgba(94,234,212,.24), transparent 70%) !important;
}
@keyframes chiShapeIn{
    from{ transform:translateY(-46px) rotate(calc(var(--rot) - 12deg)); }
    to{ transform:translateY(0) rotate(var(--rot)); }
}
@keyframes chiShapeFloat{
    0%,100%{ transform:translateY(0) rotate(var(--rot)); }
    50%{ transform:translateY(16px) rotate(var(--rot)); }
}
/* TEMP (per request): hide the AI chromatogram graphic (grid + waveform + bloom)
   so the shapes read on a clean dark band. Delete this one rule to bring it back. */
html body #main-content #products .catalog-hero-instrument .chi-grid{ display:none !important; }
/* 8 shapes spread across the band (the spotlight card covers any under it) */
html body #main-content #products .catalog-hero-instrument .chi-particle:nth-child(4){  --rot:12deg;  --op:.85; --fdur:13s;   width:340px !important; height:98px !important; left:-5% !important; top:12%  !important; }
html body #main-content #products .catalog-hero-instrument .chi-particle:nth-child(5){  --rot:-15deg; --op:.78; --fdur:15s;   width:240px !important; height:72px !important; left:4%  !important; top:auto !important; bottom:3%  !important; }
html body #main-content #products .catalog-hero-instrument .chi-particle:nth-child(6){  --rot:-8deg;  --op:.72; --fdur:11s;   width:170px !important; height:54px !important; left:26% !important; top:1%   !important; }
html body #main-content #products .catalog-hero-instrument .chi-particle:nth-child(7){  --rot:20deg;  --op:.66; --fdur:16s;   width:150px !important; height:46px !important; left:42% !important; top:auto !important; bottom:14% !important; }
html body #main-content #products .catalog-hero-instrument .chi-particle:nth-child(8){  --rot:-12deg; --op:.8;  --fdur:12.5s; width:250px !important; height:74px !important; left:14% !important; top:42%  !important; }
html body #main-content #products .catalog-hero-instrument .chi-particle:nth-child(9){  --rot:8deg;   --op:.7;  --fdur:14s;   width:180px !important; height:56px !important; left:36% !important; top:26%  !important; }
html body #main-content #products .catalog-hero-instrument .chi-particle:nth-child(10){ --rot:-18deg; --op:.74; --fdur:13.5s; width:220px !important; height:64px !important; left:52% !important; top:5%   !important; }
html body #main-content #products .catalog-hero-instrument .chi-particle:nth-child(11){ --rot:16deg;  --op:.6;  --fdur:10.5s; width:150px !important; height:46px !important; left:55% !important; top:auto !important; bottom:8%  !important; }
/* mobile: keep ~3 smaller shapes so they don't crowd the band */
@media (max-width:600px){
    html body #main-content #products .catalog-hero-instrument .chi-particle:nth-child(6),
    html body #main-content #products .catalog-hero-instrument .chi-particle:nth-child(7),
    html body #main-content #products .catalog-hero-instrument .chi-particle:nth-child(9),
    html body #main-content #products .catalog-hero-instrument .chi-particle:nth-child(10),
    html body #main-content #products .catalog-hero-instrument .chi-particle:nth-child(11){ display:none !important; }
    html body #main-content #products .catalog-hero-instrument .chi-particle:nth-child(4){ width:220px !important; height:64px !important; }
    html body #main-content #products .catalog-hero-instrument .chi-particle:nth-child(5){ width:160px !important; height:50px !important; }
    html body #main-content #products .catalog-hero-instrument .chi-particle:nth-child(8){ width:170px !important; height:52px !important; }
}
@media (prefers-reduced-motion: reduce){
    html body #main-content #products .catalog-hero-instrument .chi-particle{
        animation:none !important; transform:rotate(var(--rot)) !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   R285 · catalog hero → CENTERED HEADLINE (21st.dev shape-landing-hero
   composition, our copy). Badge + big two-line title + subtitle, centered over
   the floating teal shapes (R284). Spotlight card + spec pills removed.
   Catalog-appropriate height (not full-screen). Solid title colour (no
   gradient text). Contrast-safe, reduced-motion + mobile handled.
   ════════════════════════════════════════════════════════════════════════ */
/* center the band, single column, taller */
html body #main-content #products .catalog-hero-v2.catalog-hero-instrument{
    flex-direction:column !important; align-items:center !important; justify-content:center !important;
    text-align:center !important; gap:0 !important;
    min-height:clamp(440px,54vh,580px) !important;
    padding:clamp(44px,7vw,76px) clamp(20px,5vw,48px) !important;
}
/* a softer, centered glow + edge vignette (replaces the left image-scrim) */
html body #main-content #products .catalog-hero-instrument .chi-glow{
    inset:0 !important;
    background:radial-gradient(135% 105% at 50% 40%, rgba(45,212,191,.07) 0%, transparent 46%, rgba(5,7,9,.55) 100%) !important;
    animation:none !important;
}
/* fade the shapes out at the band's top + bottom edges */
html body #main-content #products .catalog-hero-instrument .chi-layers::after{
    content:'' !important; position:absolute !important; inset:0 !important; z-index:1 !important; pointer-events:none !important;
    background:linear-gradient(180deg, rgba(10,10,11,.9) 0%, transparent 24%, transparent 76%, rgba(10,10,11,.92) 100%) !important;
}
/* centered content column, above the shapes + overlays */
html body #main-content #products .catalog-hero-instrument .chi-main{
    width:100% !important; max-width:880px !important; margin:0 auto !important;
    display:flex !important; flex-direction:column !important; align-items:center !important;
    text-align:center !important; gap:0 !important; position:relative !important; z-index:2 !important;
}
/* badge */
html body #main-content #products .catalog-hero-instrument .chi-badge{
    display:inline-flex !important; align-items:center !important; gap:8px !important;
    padding:6px 14px !important; border-radius:999px !important;
    background:rgba(255,255,255,.04) !important; border:1px solid rgba(255,255,255,.10) !important;
    color:rgba(255,255,255,.72) !important;
    font-family:'JetBrains Mono',ui-monospace,monospace !important;
    font-size:11.5px !important; letter-spacing:.07em !important; text-transform:uppercase !important;
    margin:0 0 22px !important;
}
html body #main-content #products .catalog-hero-instrument .chi-badge-dot{
    width:7px !important; height:7px !important; border-radius:50% !important; flex:0 0 7px !important;
    background:#2dd4bf !important; box-shadow:0 0 9px rgba(45,212,191,.75) !important;
}
/* big centered title (solid colours, no gradient text) */
html body #main-content #products .catalog-hero-instrument .section-title{
    text-align:center !important; margin:0 auto !important; max-width:18ch !important;
    font-size:clamp(2.3rem,6vw,4.6rem) !important;
    line-height:1.04 !important; letter-spacing:-.03em !important; text-wrap:balance !important;
    color:#f8fbfa !important; -webkit-text-fill-color:#f8fbfa !important;
}
html body #main-content #products .catalog-hero-instrument .section-title .chl-line2{
    display:block !important; color:#2dd4bf !important; -webkit-text-fill-color:#2dd4bf !important;
}
/* centered accent underline */
html body #main-content #products .catalog-hero-instrument .catalog-hero-accent{ margin:20px auto 0 !important; }
/* centered subtitle, readable (>=4.5:1 on the dark band) */
html body #main-content #products .catalog-hero-instrument .catalog-hero-lede{
    text-align:center !important; max-width:52ch !important; margin:20px auto 0 !important;
    color:rgba(255,255,255,.64) !important; font-weight:400 !important;
    font-size:clamp(15px,1.5vw,18px) !important; line-height:1.6 !important;
}
/* staggered content entrance */
html body #main-content #products .catalog-hero-instrument .chi-main > *{ animation:chiRise .6s cubic-bezier(.23,1,.32,1) both !important; }
html body #main-content #products .catalog-hero-instrument .chi-badge{ animation-delay:.04s !important; }
html body #main-content #products .catalog-hero-instrument .section-title{ animation-delay:.12s !important; }
html body #main-content #products .catalog-hero-instrument .catalog-hero-accent{ animation-delay:.22s !important; }
html body #main-content #products .catalog-hero-instrument .catalog-hero-lede{ animation-delay:.28s !important; }
/* re-spread the 8 shapes to surround the centered headline (override R284 positions) */
html body #main-content #products .catalog-hero-instrument .chi-particle:nth-child(4){  left:-8% !important; top:15%  !important; bottom:auto !important; }
html body #main-content #products .catalog-hero-instrument .chi-particle:nth-child(5){  left:70% !important; top:auto !important; bottom:8%  !important; }
html body #main-content #products .catalog-hero-instrument .chi-particle:nth-child(6){  left:3%  !important; top:auto !important; bottom:6%  !important; }
html body #main-content #products .catalog-hero-instrument .chi-particle:nth-child(7){  left:80% !important; top:8%   !important; bottom:auto !important; }
html body #main-content #products .catalog-hero-instrument .chi-particle:nth-child(8){  left:-4% !important; top:46%  !important; bottom:auto !important; }
html body #main-content #products .catalog-hero-instrument .chi-particle:nth-child(9){  left:82% !important; top:42%  !important; bottom:auto !important; }
html body #main-content #products .catalog-hero-instrument .chi-particle:nth-child(10){ left:20% !important; top:3%   !important; bottom:auto !important; }
html body #main-content #products .catalog-hero-instrument .chi-particle:nth-child(11){ left:58% !important; top:2%   !important; bottom:auto !important; }
@media (max-width:600px){
    html body #main-content #products .catalog-hero-v2.catalog-hero-instrument{ min-height:clamp(360px,62vh,460px) !important; padding:48px 20px !important; }
    html body #main-content #products .catalog-hero-instrument .catalog-hero-lede{ font-size:14.5px !important; }
}
@media (prefers-reduced-motion: reduce){
    html body #main-content #products .catalog-hero-instrument .chi-main > *{ animation:none !important; }
}

/* R286 · shorten the centered hero so the product-card tops peek on first load
   (it was eating most of the viewport). Trim band height + inner spacing; the
   title size is kept. */
html body #main-content #products .catalog-hero-v2.catalog-hero-instrument{
    min-height:clamp(280px,34vh,350px) !important;
    padding-top:clamp(22px,3vw,32px) !important;
    padding-bottom:clamp(22px,3vw,32px) !important;
}
html body #main-content #products .catalog-hero-instrument .chi-badge{ margin-bottom:14px !important; }
html body #main-content #products .catalog-hero-instrument .catalog-hero-accent{ margin-top:13px !important; }
html body #main-content #products .catalog-hero-instrument .catalog-hero-lede{ margin-top:14px !important; }

/* R287 · pull the whole catalog up so the product-card tops peek on first load
   (R286 alone left them ~54px below the fold). Ease the hero a touch more, trim
   the section top padding, compact the (oversized) category tiles + the
   "products found" row, and tighten the inter-block gaps. */
html body #main-content #products .catalog-hero-v2.catalog-hero-instrument{
    min-height:0 !important;
    padding-top:clamp(14px,2vw,22px) !important; padding-bottom:clamp(14px,2vw,22px) !important;
}
html body #main-content #products .catalog-hero-instrument .section-title{ font-size:clamp(1.85rem,4.3vw,3.05rem) !important; }
html body #main-content #products #catalog-sticky-wrap{ padding-top:5px !important; padding-bottom:5px !important; }
/* compact the category-tile icon chips a touch too */
html body #main-content #products .cqj-tile .cqj-icon{ width:42px !important; height:42px !important; }
html body #main-content #products .cqj-tile .cqj-icon i{ font-size:16px !important; }
html body #main-content #products .catalog-hero-instrument .chi-badge{ margin-bottom:12px !important; }
html body #main-content #products .catalog-hero-instrument .catalog-hero-accent{ margin-top:11px !important; }
html body #main-content #products .catalog-hero-instrument .catalog-hero-lede{ margin-top:12px !important; }
/* section + inter-block spacing */
html body #main-content #products.products-section{ padding-top:14px !important; }
html body #main-content #products .catalog-hero.catalog-hero-v2.catalog-hero-instrument{ margin-bottom:10px !important; }
html body #main-content #products #catalog-quickjump{ margin-top:10px !important; }
/* compact the category tiles a bit (they were 127px tall) */
html body #main-content #products #catalog-quickjump{ padding-top:6px !important; padding-bottom:6px !important; }
html body #main-content #products .cqj-tile{ padding-top:12px !important; padding-bottom:11px !important; }
/* tighter "products found" row */
html body #main-content #products #catalog-status{ margin:6px 0 8px !important; }

/* ════════════════════════════════════════════════════════════════════════
   R288 · shapes → fewer (8 visible → 5) + recoloured to match the reference
   screenshot (21st.dev's muted multi-hue: indigo / rose / violet / amber /
   cyan at ~15%, with a white hairline border + soft white centre glow),
   instead of the brand teal.
   ════════════════════════════════════════════════════════════════════════ */
html body #main-content #products .catalog-hero-instrument .chi-particle{
    background:linear-gradient(90deg, var(--shape-rgba, rgba(99,102,241,.15)), transparent 72%) !important;
    border:1px solid rgba(255,255,255,.15) !important;
    box-shadow:0 8px 32px rgba(255,255,255,.07) !important;
}
html body #main-content #products .catalog-hero-instrument .chi-particle::after{
    background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.18), transparent 70%) !important;
}
/* drop 3 of the 8 */
html body #main-content #products .catalog-hero-instrument .chi-particle:nth-child(9),
html body #main-content #products .catalog-hero-instrument .chi-particle:nth-child(10),
html body #main-content #products .catalog-hero-instrument .chi-particle:nth-child(11){ display:none !important; }
/* per-shape reference hues */
html body #main-content #products .catalog-hero-instrument .chi-particle:nth-child(4){ --shape-rgba:rgba(99,102,241,.16) !important; --op:.8 !important; }   /* indigo */
html body #main-content #products .catalog-hero-instrument .chi-particle:nth-child(5){ --shape-rgba:rgba(244,63,94,.15) !important;  --op:.78 !important; }  /* rose */
html body #main-content #products .catalog-hero-instrument .chi-particle:nth-child(6){ --shape-rgba:rgba(139,92,246,.15) !important; --op:.72 !important; }  /* violet */
html body #main-content #products .catalog-hero-instrument .chi-particle:nth-child(7){ --shape-rgba:rgba(245,158,11,.14) !important; --op:.7 !important; }   /* amber */
html body #main-content #products .catalog-hero-instrument .chi-particle:nth-child(8){ --shape-rgba:rgba(6,182,212,.15) !important;  --op:.74 !important; }  /* cyan */

/* ════════════════════════════════════════════════════════════════════════
   R289 · shapes back to brand TEAL (subtle teal + cyan two-tone for depth),
   still 5, re-spread to frame the centered headline evenly (2 big opposite
   corners, 2 mids, 1 small top-centre accent) instead of clustering left.
   ════════════════════════════════════════════════════════════════════════ */
html body #main-content #products .catalog-hero-instrument .chi-particle{
    background:linear-gradient(90deg, var(--shape-rgba, rgba(45,212,191,.18)), transparent 70%) !important;
    border:1px solid rgba(94,234,212,.16) !important;
    box-shadow:0 9px 34px rgba(45,212,191,.10) !important;
}
html body #main-content #products .catalog-hero-instrument .chi-particle::after{
    background:radial-gradient(circle at 50% 50%, rgba(94,234,212,.2), transparent 70%) !important;
}
html body #main-content #products .catalog-hero-instrument .chi-particle:nth-child(4){ --shape-rgba:rgba(45,212,191,.20) !important; --op:.82 !important; width:340px !important; height:98px !important; left:-7% !important; top:13%   !important; bottom:auto !important; }  /* TL · teal big */
html body #main-content #products .catalog-hero-instrument .chi-particle:nth-child(5){ --shape-rgba:rgba(45,212,191,.19) !important; --op:.8 !important;  width:300px !important; height:86px !important; left:70% !important; top:auto !important; bottom:4%  !important; }  /* BR · teal big */
html body #main-content #products .catalog-hero-instrument .chi-particle:nth-child(6){ --shape-rgba:rgba(34,211,238,.16) !important; --op:.7 !important;  width:200px !important; height:60px !important; left:2%  !important; top:auto !important; bottom:8%  !important; }  /* BL · cyan mid */
html body #main-content #products .catalog-hero-instrument .chi-particle:nth-child(7){ --shape-rgba:rgba(34,211,238,.16) !important; --op:.72 !important; width:190px !important; height:58px !important; left:78% !important; top:12%   !important; bottom:auto !important; }  /* TR · cyan mid */
html body #main-content #products .catalog-hero-instrument .chi-particle:nth-child(8){ --shape-rgba:rgba(45,212,191,.17) !important; --op:.55 !important; width:150px !important; height:46px !important; left:44% !important; top:-7%   !important; bottom:auto !important; }  /* top-centre · teal accent */

/* ════════════════════════════════════════════════════════════════════════
   R290 · catalog-header polish pass — the 8-point critique fixes.
   ════════════════════════════════════════════════════════════════════════ */
/* #1+#7 · toolbar spans the full content frame (search fills, Featured pinned
   right) so its edges lock to the tiles + grid instead of capping at 900px. */
html body #main-content #products #catalog-sticky-wrap{ max-width:none !important; width:auto !important; }
html body #main-content #products .catalog-toolbar{ max-width:none !important; width:100% !important; justify-content:flex-start !important; gap:14px !important; flex-wrap:nowrap !important; }
html body #main-content #products .catalog-toolbar .product-search{ flex:1 1 auto !important; max-width:none !important; }
html body #main-content #products .catalog-toolbar .sort-dropdown{ flex:0 0 auto !important; }
/* #2 · "products found" — legible contrast on the light canvas (was ~3.9:1) */
html body #main-content #products #catalog-status{ color:#33423e !important; margin:4px 0 0 !important; }
/* #3 · even the vertical rhythm (tiles -> products-found was ~2x the others) */
html body #main-content #products #catalog-quickjump{ margin-bottom:6px !important; }
/* #4 · balance the subtitle wrap */
html body #main-content #products .catalog-hero-instrument .catalog-hero-lede{ text-wrap:balance !important; }
/* #5 · tame the category-icon rainbow → unified soft-teal chips + teal glyphs.
   Active tile stays teal-filled + white glyph; Bundles keeps its promo gold. */
html body #main-content #products .cqj-tile.cqj-metabolic .cqj-icon,
html body #main-content #products .cqj-tile.cqj-skin .cqj-icon,
html body #main-content #products .cqj-tile.cqj-cognitive .cqj-icon,
html body #main-content #products .cqj-tile.cqj-healing .cqj-icon,
html body #main-content #products .cqj-tile.cqj-growth .cqj-icon,
html body #main-content #products .cqj-tile.cqj-longevity .cqj-icon{
    background:rgba(45,212,191,.12) !important;
    box-shadow:inset 0 0 0 1px rgba(45,212,191,.2) !important;
}
html body #main-content #products .cqj-tile .cqj-icon i{ color:#14b8a6 !important; }
html body #main-content #products .cqj-tile.is-active .cqj-icon i{ color:#ffffff !important; }
/* #6 · soften the hero "black box" — teal hairline + lit top edge + softer,
   more grounded outer shadow so it reads as a seated panel, not a hole. */
html body #main-content #products .catalog-hero-v2.catalog-hero-instrument{
    border:1px solid rgba(45,212,191,.14) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 26px 64px -42px rgba(6,20,18,.7) !important;
}
/* #8 · rebalance the hero — a bit more title presence now it's compact
   (trades a little of the card-peek). */
html body #main-content #products .catalog-hero-instrument .section-title{ font-size:clamp(2.05rem,4.7vw,3.45rem) !important; }
html body #main-content #products .catalog-hero-v2.catalog-hero-instrument{ padding-top:clamp(13px,1.8vw,18px) !important; padding-bottom:clamp(13px,1.8vw,18px) !important; }

/* ════════════════════════════════════════════════════════════════════════
   R291 · catalog motion pass 1 — pure-CSS delights.
   #1 · product card = "specimen on a lit bench" (lift + teal ring + inner
        spotlight glow + specimen scale + badge shine + press feedback).
   #6 · category-tile icon micro-motion on hover.
   Reduced-motion fully neutralised at the foot of the block.
   ════════════════════════════════════════════════════════════════════════ */
/* #1 · card lift + teal frame + press feedback */
html body #main-content #products .product-card{
    transition:transform .24s cubic-bezier(.23,1,.32,1), box-shadow .24s ease !important;
    will-change:transform;
}
html body #main-content #products .product-card:hover{
    transform:translateY(-6px) !important;
    box-shadow:0 24px 52px -26px rgba(8,24,21,.55), 0 0 0 1px rgba(45,212,191,.34) !important;
}
html body #main-content #products .product-card:active{ transform:translateY(-3px) scale(.992) !important; }
/* #1 · the specimen lights up — inner teal spotlight + a touch more zoom */
html body #main-content #products .product-card .product-image{ transition:box-shadow .35s ease !important; }
html body #main-content #products .product-card:hover .product-image{ box-shadow:inset 0 0 78px -14px rgba(45,212,191,.24) !important; }
html body #main-content #products .product-card:hover .product-image img{ transform:scale(1.055) !important; }
/* #1 · badge catches a light sweep on hover. NOTE: keep position:absolute so
   the badge stays pinned to the image corner (R294 fix — `relative` had pushed
   it into normal flow, detaching it above the card). `absolute` still anchors
   the ::after sweep. */
html body #main-content #products .product-card .product-card-badge{ position:absolute !important; overflow:hidden !important; }
html body #main-content #products .product-card .product-card-badge::after{
    content:'' !important; position:absolute !important; inset:0 !important; pointer-events:none !important;
    transform:translateX(-135%) skewX(-18deg) !important;
    background:linear-gradient(90deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%) !important;
}
html body #main-content #products .product-card:hover .product-card-badge::after{
    transition:transform .75s cubic-bezier(.23,1,.32,1) !important; transform:translateX(135%) skewX(-18deg) !important;
}
/* #6 · category-tile icon micro-motion */
html body #main-content #products .cqj-tile .cqj-icon{ transition:transform .25s cubic-bezier(.23,1,.32,1) !important; }
html body #main-content #products .cqj-tile .cqj-icon i{ display:inline-block !important; transition:transform .25s ease !important; }
html body #main-content #products .cqj-tile:hover .cqj-icon{ transform:translateY(-3px) !important; }
@keyframes cqjSpin{ to{ transform:rotate(360deg); } }
@keyframes cqjBeat{ 0%,100%{ transform:scale(1); } 28%{ transform:scale(1.2); } 44%{ transform:scale(1); } 60%{ transform:scale(1.1); } 74%{ transform:scale(1); } }
@keyframes cqjFlick{ 0%,100%{ transform:scale(1); filter:none; } 45%{ transform:scale(1.14); filter:drop-shadow(0 0 4px rgba(45,212,191,.6)); } }
html body #main-content #products .cqj-tile.cqj-longevity:hover .cqj-icon i{ animation:cqjSpin 2.6s linear infinite !important; }
html body #main-content #products .cqj-tile.cqj-healing:hover .cqj-icon i{ animation:cqjBeat 1.15s ease-in-out infinite !important; }
html body #main-content #products .cqj-tile.cqj-metabolic:hover .cqj-icon i{ animation:cqjFlick .95s ease-in-out infinite !important; }
@media (prefers-reduced-motion: reduce){
    html body #main-content #products .product-card,
    html body #main-content #products .product-card .product-image,
    html body #main-content #products .product-card .product-image img,
    html body #main-content #products .cqj-tile .cqj-icon,
    html body #main-content #products .cqj-tile .cqj-icon i{ transition:none !important; }
    html body #main-content #products .product-card:hover{ transform:none !important; }
    html body #main-content #products .product-card:hover .product-image img{ transform:none !important; }
    html body #main-content #products .product-card .product-card-badge::after{ display:none !important; }
    html body #main-content #products .cqj-tile.cqj-longevity:hover .cqj-icon i,
    html body #main-content #products .cqj-tile.cqj-healing:hover .cqj-icon i,
    html body #main-content #products .cqj-tile.cqj-metabolic:hover .cqj-icon i{ animation:none !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   R292 · catalog motion pass 2 — JS-driven (paired with the #pcfx inline
   script in products.html). #2 scroll-reveal, #3 sticky filter, #4 filter
   crossfade-in, #5 COA readout sparkline (real purity), #7 scroll-progress
   + back-to-top. Cards stay visible by default (JS opts them into the reveal),
   full reduced-motion fallback at the foot.
   ════════════════════════════════════════════════════════════════════════ */
/* #2/#4 · card reveal — only applied to cards JS has flagged */
html body #main-content #products .product-card.pc-hide{ opacity:0; transform:translateY(20px); transition:opacity .55s ease, transform .6s cubic-bezier(.23,1,.32,1); }
html body #main-content #products .product-card.pc-hide.is-revealed{ opacity:1; transform:none; }
/* #5 · COA readout — hover-reveal instrument strip at the foot of the specimen image */
html body #main-content #products .product-card .product-image .pc-coa{
    position:absolute !important; left:0; right:0; bottom:0; z-index:6; pointer-events:none;
    display:flex; align-items:center; gap:8px; padding:7px 12px;
    background:linear-gradient(0deg, rgba(7,15,14,.94), rgba(7,15,14,.55) 72%, transparent);
    transform:translateY(101%); opacity:0;
    transition:transform .32s cubic-bezier(.23,1,.32,1), opacity .3s ease;
}
html body #main-content #products .product-card:hover .product-image .pc-coa{ transform:translateY(0); opacity:1; }
html body #main-content #products .product-card .pc-coa-spark{ width:44px; height:16px; flex:0 0 44px; overflow:visible; }
html body #main-content #products .product-card .pc-coa-spark path{ fill:none; stroke:#5eead4; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 3px rgba(45,212,191,.55)); stroke-dasharray:170; stroke-dashoffset:170; }
html body #main-content #products .product-card:hover .pc-coa-spark path{ animation:pcSpark .75s ease-out .06s forwards; }
@keyframes pcSpark{ to{ stroke-dashoffset:0; } }
html body #main-content #products .product-card .pc-coa-label{ font-family:'JetBrains Mono',ui-monospace,monospace; font-size:10px; letter-spacing:.04em; color:#cfeee7; text-transform:uppercase; white-space:nowrap; }
html body #main-content #products .product-card .pc-coa-label b{ color:#5eead4; font-weight:700; }
/* #3 · sticky category filter (compact frosted state when stuck) */
html body #main-content #products #catalog-quickjump{ position:sticky; top:var(--pc-sticky-top,66px); z-index:30; transition:padding .2s ease, background .25s ease, box-shadow .25s ease, border-radius .25s ease; }
html body #main-content #products #catalog-quickjump.is-stuck{
    background:rgba(244,247,248,.82) !important; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    box-shadow:0 12px 26px -16px rgba(8,22,20,.5) !important; border-radius:14px !important;
    padding-top:8px !important; padding-bottom:8px !important;
}
html body #main-content #products .pc-sticky-sentinel{ height:1px; width:100%; margin:0; pointer-events:none; }
/* #7 · scroll-progress rail */
#pc-scroll-progress{ position:fixed; top:0; left:0; height:3px; width:100%; transform:scaleX(0); transform-origin:left center; background:linear-gradient(90deg,#14b8a6,#2dd4bf,#5eead4); z-index:1200; pointer-events:none; box-shadow:0 0 10px rgba(45,212,191,.5); }
/* #7 · back-to-top */
#pc-to-top{ position:fixed; right:22px; bottom:22px; width:46px; height:46px; border-radius:50%; border:1px solid rgba(45,212,191,.4); background:rgba(8,16,15,.9); color:#5eead4; font-size:15px; cursor:pointer; display:grid; place-items:center; opacity:0; transform:translateY(14px) scale(.9); pointer-events:none; transition:opacity .25s ease, transform .25s cubic-bezier(.23,1,.32,1), background .2s ease, border-color .2s ease; z-index:1200; box-shadow:0 12px 30px -10px rgba(8,22,20,.6); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
#pc-to-top.show{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
#pc-to-top:hover{ background:rgba(45,212,191,.2); border-color:rgba(94,234,212,.6); transform:translateY(-2px) scale(1.06); }
@media (prefers-reduced-motion: reduce){
    html body #main-content #products .product-card.pc-hide{ transition:none !important; opacity:1 !important; transform:none !important; }
    html body #main-content #products .product-card .product-image .pc-coa{ transition:opacity .2s ease !important; }
    html body #main-content #products .product-card:hover .pc-coa-spark path{ animation:none !important; stroke-dashoffset:0 !important; }
    #pc-scroll-progress{ display:none !important; }
    #pc-to-top{ transition:opacity .2s ease !important; transform:none !important; }
    #pc-to-top.show{ transform:none !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   R293 · catalog hero — generated decorative lattice texture (approved asset
   images/catalog-hero-lattice.webp, 1376x768, 35KB). Near-black canvas with
   faint teal HPLC interference arcs; `screen` blend drops the black so only
   the teal isolines lay over the existing hero gradient. Static, behind every
   decorative layer and the headline. Purely decorative (aria-hidden parent).
   ════════════════════════════════════════════════════════════════════════ */
html body #main-content #products .catalog-hero-instrument .chi-layers .chi-texture{
    position:absolute; inset:0; z-index:0; pointer-events:none;
    background:url('images/catalog-hero-lattice.webp?v=1') center center / cover no-repeat;
    opacity:.6; mix-blend-mode:screen;
    -webkit-mask-image:radial-gradient(120% 100% at 50% 30%, #000 55%, transparent 100%);
            mask-image:radial-gradient(120% 100% at 50% 30%, #000 55%, transparent 100%);
}

/* ════════════════════════════════════════════════════════════════════════
   R294 · three fixes
   (a) HERO SHAPES — R293's `.chi-texture` insert made it the new first child of
       .chi-layers, shifting every :nth-child index by one, so R288/R289's
       per-shape rules landed on the wrong elements (left lost a pill; one shape
       collapsed to a sliver). Re-target with tag-stable `span:nth-of-type`
       (divs before the spans no longer matter), restore a symmetric 2-left /
       2-right frame, and make them STATIC (no float) per request.
   (b) WISHLIST HEART — removed from the catalog grid cards; it belongs only on
       the product detail page image.
   (c) Card badge re-pinned to absolute (handled inline in the R291 block).
   ════════════════════════════════════════════════════════════════════════ */
/* (a) static + symmetric framing shapes */
html body #main-content #products .catalog-hero-instrument span.chi-particle{ animation:none !important; }
html body #main-content #products .catalog-hero-instrument span.chi-particle:nth-of-type(n+5){ display:none !important; }
html body #main-content #products .catalog-hero-instrument span.chi-particle:nth-of-type(1),
html body #main-content #products .catalog-hero-instrument span.chi-particle:nth-of-type(2),
html body #main-content #products .catalog-hero-instrument span.chi-particle:nth-of-type(3),
html body #main-content #products .catalog-hero-instrument span.chi-particle:nth-of-type(4){ display:block !important; }
/* 1 = top-left mid (cyan) */
html body #main-content #products .catalog-hero-instrument span.chi-particle:nth-of-type(1){ --shape-rgba:rgba(34,211,238,.16) !important; opacity:.72 !important; width:200px !important; height:58px !important; left:1% !important; right:auto !important; top:12% !important; bottom:auto !important; }
/* 2 = bottom-left big (teal) */
html body #main-content #products .catalog-hero-instrument span.chi-particle:nth-of-type(2){ --shape-rgba:rgba(45,212,191,.20) !important; opacity:.82 !important; width:310px !important; height:90px !important; left:-3% !important; right:auto !important; top:auto !important; bottom:5% !important; }
/* 3 = top-right mid (cyan) — mirror of 1 */
html body #main-content #products .catalog-hero-instrument span.chi-particle:nth-of-type(3){ --shape-rgba:rgba(34,211,238,.16) !important; opacity:.72 !important; width:200px !important; height:58px !important; left:auto !important; right:1% !important; top:12% !important; bottom:auto !important; }
/* 4 = bottom-right big (teal) — mirror of 2 */
html body #main-content #products .catalog-hero-instrument span.chi-particle:nth-of-type(4){ --shape-rgba:rgba(45,212,191,.20) !important; opacity:.82 !important; width:310px !important; height:90px !important; left:auto !important; right:-3% !important; top:auto !important; bottom:5% !important; }
/* (b) no wishlist heart on the catalog grid cards */
html body #main-content #products .product-card .product-wishlist-btn{ display:none !important; }

/* ════════════════════════════════════════════════════════════════════════
   R295 · catalog hero headline — typographic upgrade + "Shop" lead-in. Pairs
   the bold grotesque sans (Research Peptides) with Fraunces italic serif accents
   in teal that bracket it (Shop … & Supplies) — a contrast-axis pairing, not two
   competing sans. Brighter teal + a soft glow for the instrument-room feel.
   ════════════════════════════════════════════════════════════════════════ */
html body #main-content #products .catalog-hero-instrument .chl-title{
    font-weight:800 !important; letter-spacing:-.03em !important; line-height:1.02 !important;
    color:#f3f7f6 !important; text-wrap:balance !important;
}
/* the two teal serif-italic accents that frame the bold sans core */
html body #main-content #products .catalog-hero-instrument .chl-title .chl-shop,
html body #main-content #products .catalog-hero-instrument .chl-title .chl-line2{
    font-family:'Fraunces', Georgia, 'Times New Roman', serif !important;
    font-style:italic !important; font-weight:600 !important;
    font-optical-sizing:auto !important; letter-spacing:-.005em !important;
    color:#5eead4 !important; text-shadow:0 1px 30px rgba(45,212,191,.35) !important;
}
/* "Shop" lead — a hair smaller so the brand name still dominates */
html body #main-content #products .catalog-hero-instrument .chl-title .chl-shop{
    font-size:.9em !important; margin-right:.08em !important;
}
/* "& Supplies" keeps its own line; the .catalog-hero-accent underline sits below */
html body #main-content #products .catalog-hero-instrument .chl-title .chl-line2{
    display:block !important; font-size:1.03em !important;
}

/* ════════════════════════════════════════════════════════════════════════
   R296 · hero headline polish + remove the floating pill shapes.
   - kill the decorative pills entirely (cleaner dark field; only the subtle
     lattice texture remains)
   - calmer type: ONE teal serif flourish ("& Supplies") instead of two; "Shop"
     becomes a soft-white serif lead so it doesn't compete with the accent
   - open up the cramped line spacing + a little more breathing room
   ════════════════════════════════════════════════════════════════════════ */
/* remove every floating pill (overrides R294's nth-of-type display:block) */
html body #main-content #products .catalog-hero-instrument span.chi-particle:nth-of-type(n){ display:none !important; }
/* a touch more vertical room around the headline */
html body #main-content #products .catalog-hero-v2.catalog-hero-instrument{ padding-top:clamp(22px,3vw,40px) !important; padding-bottom:clamp(22px,3vw,40px) !important; }
/* headline base — open the leading, keep the tight display tracking */
html body #main-content #products .catalog-hero-instrument .chl-title{
    line-height:1.12 !important; letter-spacing:-.035em !important; color:#f4f8f7 !important;
}
/* "Shop" — soft-white serif-italic lead (not teal, so the accent owns the colour) */
html body #main-content #products .catalog-hero-instrument .chl-title .chl-shop{
    color:#e9f2f0 !important; font-size:.76em !important; font-weight:500 !important;
    margin-right:.16em !important; letter-spacing:0 !important; text-shadow:none !important;
}
/* "& Supplies" — the single teal serif flourish on its own line */
html body #main-content #products .catalog-hero-instrument .chl-title .chl-line2{
    display:block !important; font-size:1.0em !important; font-weight:600 !important;
    color:#5eead4 !important; letter-spacing:0 !important; margin-top:.06em !important;
    text-shadow:0 1px 34px rgba(45,212,191,.4) !important;
}

/* ════════════════════════════════════════════════════════════════════════
   R297 · headline rework — the serif italics read fussy, not premium-commercial.
   Switch to the brand's display face (Geist, same as the homepage), upright, no
   italics. Calm weight hierarchy: a lighter "Shop" lead, bold brand name, and a
   single rich-teal "& Supplies" accent with a soft glow. Supersedes R295/R296's
   Fraunces treatment.
   ════════════════════════════════════════════════════════════════════════ */
html body #main-content #products .catalog-hero-instrument .chl-title{
    font-family:'Geist','Inter',system-ui,-apple-system,sans-serif !important;
    font-weight:700 !important; font-style:normal !important;
    letter-spacing:-.025em !important; line-height:1.07 !important; color:#f4f8f7 !important;
    font-size:clamp(2.05rem,4.9vw,3.5rem) !important; text-wrap:balance !important;
}
/* "Shop" — a lighter upright lead-in (weight, not style, carries the hierarchy) */
html body #main-content #products .catalog-hero-instrument .chl-title .chl-shop{
    font-family:inherit !important; font-style:normal !important; font-weight:500 !important;
    font-size:1em !important; color:#e8f1ef !important; opacity:.9 !important;
    letter-spacing:-.02em !important; margin-right:.2em !important; text-shadow:none !important;
}
/* "& Supplies" — single teal accent on its own line, soft instrument glow */
html body #main-content #products .catalog-hero-instrument .chl-title .chl-line2{
    font-family:inherit !important; font-style:normal !important; font-weight:700 !important;
    display:block !important; font-size:1em !important; color:#2dd4bf !important;
    letter-spacing:-.025em !important; margin-top:.04em !important;
    text-shadow:0 0 30px rgba(45,212,191,.3) !important;
}

/* ════════════════════════════════════════════════════════════════════════
   R298 · longer headline copy ("Shop For Research" / "Peptides, Nootropics &
   Supplies") needs more horizontal room — the old ~698px title cap forced the
   teal line to wrap. Widen the headline block + size the type so each line sits
   on one line. Slightly smaller display size keeps the long line from crowding
   the frame while reading at the same weight/colour as before.
   ════════════════════════════════════════════════════════════════════════ */
html body #main-content #products .catalog-hero-instrument .chi-main{ max-width:1100px !important; }
html body #main-content #products .catalog-hero-instrument .chl-title{
    max-width:none !important; width:auto !important;
    font-size:clamp(1.7rem,4.15vw,3rem) !important;
}

/* ════════════════════════════════════════════════════════════════════════
   R299 · search autocomplete was hidden behind the category tiles. Root cause:
   R292's sticky filter (#catalog-quickjump position:sticky z:30) created a
   stacking context that (a) buried the search dropdown — whose z:800 only
   applies inside the search toolbar's OWN sticky context — and (b) collided with
   that pre-existing sticky toolbar on scroll (both stuck at ~64px, 63px overlap).
   Fix: drop the tiles' sticky. The search toolbar already follows on scroll
   (original design); with the tiles back in normal flow the dropdown overlays
   them (and the grid) cleanly, and there's no sticky-on-sticky collision.
   ════════════════════════════════════════════════════════════════════════ */
html body #main-content #products #catalog-quickjump{ position:static !important; top:auto !important; z-index:auto !important; }
/* neutralise the now-irrelevant frosted "stuck" state (JS may still toggle it) */
html body #main-content #products #catalog-quickjump.is-stuck{ background:transparent !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; box-shadow:none !important; border-radius:0 !important; padding-top:6px !important; padding-bottom:6px !important; }

/* ════════════════════════════════════════════════════════════════════════
   R300 · two clipping fixes.
   (1) The search clear (×) sat ~11px from the pill's right edge — inside the
       27px pill radius — so the rounded end cropped it. Inset it into the pill's
       straight zone and reserve input padding so typed text clears it.
   (2) The Bundles tile's "SAVE 35%" badge (right:-7px overhang) is the last
       tile, flush against the tiles row's right edge; the row's overflow-x:auto
       (needed for the mobile horizontal scroll) clipped the overhang. On desktop
       all tiles fit with no scroll, so let the row overflow:visible there.
   ════════════════════════════════════════════════════════════════════════ */
html body #main-content #products .product-search .search-clear{ right:18px !important; }
html body #main-content #products #product-search{ padding-right:46px !important; }
/* dead-centre the × glyph inside the circle. The button is display:block (app.js
   toggles it via inline display, so we can't force flex), and text-align +
   line-height leaves the Font Awesome icon slightly low — absolutely centre it. */
html body #main-content #products .product-search .search-clear i{ position:absolute !important; top:50% !important; left:50% !important; transform:translate(-50%,-50%) !important; margin:0 !important; line-height:1 !important; }
@media (min-width:768px){
    html body #main-content #products #catalog-quickjump{ overflow:visible !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   R301 · product-card redesign (Tier 1 + Tier 2). Goal: give the card a real
   visual hierarchy + trust + a focal CTA instead of an all-teal wash.
   COLOUR STRATEGY — teal is reserved for the value/trust/action cluster (COA
   chip, price, Add-to-Cart). Deals = warm amber. Social proof = near-black
   seal. Product-type = quiet neutral tag. (Badge taxonomy + COA/Save chips are
   tagged/injected by the #pcfx card-enhance script — no app.js edits.)
   ════════════════════════════════════════════════════════════════════════ */
/* — BADGES — differentiate the three meanings — */
/* discount = warm amber "deal" */
html body #main-content #products .product-card .product-card-badge-discount{
    background:#f59e0b !important; color:#231701 !important; font-weight:800 !important;
    box-shadow:0 4px 12px -4px rgba(245,158,11,.5) !important;
}
/* social proof (BEST SELLER / TOP RATED / POPULAR / VALUE) = near-black seal w/ star */
html body #main-content #products .product-card .product-card-badge.pc-badge-proof{
    background:#0f1413 !important; color:#f4f8f7 !important; box-shadow:0 4px 12px -5px rgba(8,16,15,.5) !important;
}
html body #main-content #products .product-card .product-card-badge.pc-badge-proof::before{ content:'\2605'; margin-right:5px; color:#5eead4; font-size:.85em; }
/* product type (BLEND / STACK) = quiet neutral informational tag */
html body #main-content #products .product-card .product-card-badge.pc-badge-type{
    background:rgba(255,255,255,.94) !important; color:#3c4744 !important;
    border:1px solid rgba(15,20,19,.16) !important; box-shadow:0 2px 6px -3px rgba(8,16,15,.18) !important;
    text-transform:uppercase !important;
}
/* — COA trust chip (injected, real COA_DATA purity) — */
html body #main-content #products .product-card .pc-coa-chip{
    display:inline-flex !important; align-items:center; gap:5px; margin:0 0 8px !important; padding:3px 9px;
    border-radius:999px; background:rgba(13,148,136,.1); color:#0d8b7f;
    font-family:'JetBrains Mono',ui-monospace,monospace; font-size:9.5px; font-weight:600;
    letter-spacing:.04em; text-transform:uppercase; white-space:nowrap;
}
html body #main-content #products .product-card .pc-coa-chip i{ font-size:9px; color:#14b8a6; }
/* — NAME = brand display (Geist) — */
html body #main-content #products .product-card .product-name{
    font-family:'Geist','Inter',system-ui,sans-serif !important; font-weight:700 !important;
    font-size:16px !important; letter-spacing:-.02em !important; color:#0d1413 !important; line-height:1.2 !important;
}
/* — DOSAGE = mono lab spec (upright, not italic) — */
html body #main-content #products .product-card .product-dosage{
    font-family:'JetBrains Mono',ui-monospace,monospace !important; font-style:normal !important;
    font-size:10.5px !important; font-weight:500 !important; letter-spacing:.01em !important; color:#54605d !important;
}
/* — RATING removed (placeholder data, not real reviews → FTC-safe) — */
html body #main-content #products .product-card .product-rating{ display:none !important; }
/* — PRICE = focal, tabular mono — */
html body #main-content #products .product-card .product-price{
    font-family:'JetBrains Mono',ui-monospace,monospace !important; font-variant-numeric:tabular-nums !important;
    font-size:21px !important; font-weight:700 !important; color:#0d8b7f !important; letter-spacing:-.02em !important;
}
html body #main-content #products .product-card .product-price-original{
    font-family:'JetBrains Mono',ui-monospace,monospace !important; font-size:12px !important; color:#aab0b5 !important;
}
html body #main-content #products .product-card .pc-save{
    font-family:'Geist','Inter',sans-serif !important; font-size:10.5px; font-weight:700; color:#b45309;
    background:rgba(245,158,11,.15); padding:2px 7px; border-radius:6px; letter-spacing:.01em; white-space:nowrap;
}
/* — PRICE ROW → prices (+save) on top line, full-width CTA below — */
html body #main-content #products .product-card .product-price-row{
    flex-wrap:wrap !important; align-items:baseline !important; justify-content:flex-start !important; gap:6px 8px !important;
}
html body #main-content #products .product-card .product-price-row .product-price-original,
html body #main-content #products .product-card .product-price-row .product-price,
html body #main-content #products .product-card .product-price-row .pc-save{ order:1 !important; }
/* — CTA = full-width, labelled, focal teal — */
html body #main-content #products .product-card .product-add-btn{
    order:2 !important; width:100% !important; flex:0 0 100% !important; height:auto !important; min-height:0 !important;
    margin-top:11px !important; padding:12px 16px !important; border-radius:11px !important;
    background:#0d9488 !important; color:#fff !important; border:0 !important;
    font-family:'Geist','Inter',sans-serif !important; font-weight:700 !important; font-size:13.5px !important; letter-spacing:.01em !important;
    display:flex !important; align-items:center !important; justify-content:center !important; gap:8px !important;
    cursor:pointer !important; transition:transform .15s cubic-bezier(.23,1,.32,1), background .2s ease, box-shadow .2s ease !important;
    box-shadow:0 8px 20px -10px rgba(13,148,136,.55) !important;
}
html body #main-content #products .product-card .product-add-btn::after{ content:'Add to Cart' !important; }
html body #main-content #products .product-card .product-add-btn i{ font-size:14px !important; }
html body #main-content #products .product-card .product-add-btn:hover{ background:#0b7d72 !important; box-shadow:0 12px 26px -10px rgba(13,148,136,.6) !important; }
html body #main-content #products .product-card .product-add-btn:active{ transform:scale(.985) !important; }
/* added-to-cart confirmation (script toggles .pc-added for ~1.5s) */
html body #main-content #products .product-card .product-add-btn.pc-added{ background:#0f766e !important; }
html body #main-content #products .product-card .product-add-btn.pc-added i{ display:none !important; }
html body #main-content #products .product-card .product-add-btn.pc-added::after{ content:'\2713  Added' !important; }
@media (prefers-reduced-motion: reduce){
    html body #main-content #products .product-card .product-add-btn{ transition:background .2s ease !important; }
    html body #main-content #products .product-card .product-add-btn:active{ transform:none !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   R302 · cards bigger + more premium (less "generic AI"). The mono price/spec
   read techy/SaaS — move name, dosage + price to Geist (mono reserved only for
   the COA cert chip, where it earns its place). 3-up on desktop = larger, more
   spacious cards. CTA gets a subtle depth-fill + tracked uppercase for a more
   designed, premium button.
   ════════════════════════════════════════════════════════════════════════ */
/* — bigger: 3 spacious columns on desktop — */
@media (min-width:1024px){
    html body #main-content #products #products-grid{ grid-template-columns:repeat(3,1fr) !important; gap:22px !important; }
}
/* — NAME — Geist, larger + confident — */
html body #main-content #products .product-card .product-name{ font-size:18px !important; letter-spacing:-.025em !important; line-height:1.18 !important; }
/* — DOSAGE — clean Geist (drop the techy mono) — */
html body #main-content #products .product-card .product-dosage{
    font-family:'Geist','Inter',system-ui,sans-serif !important; font-style:normal !important;
    font-size:12px !important; font-weight:500 !important; letter-spacing:0 !important; color:#5a6663 !important;
}
/* — COA chip — keep mono (it's a certificate/data cue) but make it quieter — */
html body #main-content #products .product-card .pc-coa-chip{
    font-size:9.5px !important; padding:3px 10px !important; background:rgba(13,148,136,.08) !important;
    color:#0c8074 !important; letter-spacing:.05em !important;
}
/* — PRICE — Geist tabular (premium, not mono) — */
html body #main-content #products .product-card .product-price{
    font-family:'Geist','Inter',system-ui,sans-serif !important; font-variant-numeric:tabular-nums !important;
    font-size:24px !important; font-weight:700 !important; letter-spacing:-.02em !important;
}
html body #main-content #products .product-card .product-price-original{
    font-family:'Geist','Inter',system-ui,sans-serif !important; font-size:13px !important;
}
html body #main-content #products .product-card .pc-save{ font-size:11px !important; }
/* — CTA — premium depth-fill + tracked uppercase label — */
html body #main-content #products .product-card .product-add-btn{
    background:linear-gradient(180deg,#16bbab,#0d9488) !important;
    font-size:13px !important; font-weight:700 !important; letter-spacing:.09em !important;
    padding:14px 18px !important; border-radius:12px !important; margin-top:13px !important;
    box-shadow:0 10px 24px -11px rgba(13,148,136,.55), inset 0 1px 0 rgba(255,255,255,.2) !important;
}
/* R306: more apparent hover specifically on the card Add-to-Cart button —
   brighter teal fill, a 2px lift, and a soft teal halo ring so it clearly reads
   as the hovered target (beyond the card's own subtle hover lift). Press feels
   crisper too. prefers-reduced-motion already strips the transform animation via
   the reduced-motion block above (transition narrows to background only). */
html body #main-content #products .product-card .product-add-btn:hover{
    background:linear-gradient(180deg,#2ad6c4,#10a99b) !important; transform:translateY(-2px) !important;
    box-shadow:0 16px 30px -10px rgba(20,184,166,.65), 0 0 0 3px rgba(45,212,191,.32), inset 0 1px 0 rgba(255,255,255,.30) !important;
}
html body #main-content #products .product-card .product-add-btn:active{ transform:translateY(0) scale(.97) !important; }

/* ════════════════════════════════════════════════════════════════════════
   R303 · 4 products per row, kept generous. The catalog .container caps the
   whole section (hero + toolbar + tiles + grid) at 1240px, so 4-up there would
   shrink cards to ~285. Widen the container to 1400 (everything scales together
   and stays aligned) → 4 cards at ~310-320px, bigger than the old 285. Trim the
   card name/price a touch for the slightly narrower 4-up card.
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width:1024px){
    /* R309: widen the catalog so the 4-up cards get bigger (1400 -> 1460) and
       tighten the gutter a touch (20 -> 16). On ~1366 windows the grid is already
       viewport-bound so the gain shows mostly at >=1440 widths. */
    html body #main-content #products .container{ max-width:1460px !important; }
    html body #main-content #products #products-grid{ grid-template-columns:repeat(4,1fr) !important; gap:16px !important; }
    html body #main-content #products .product-card .product-name{ font-size:17px !important; }
    html body #main-content #products .product-card .product-price{ font-size:22px !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   R305 · Product name — nudge up one step on the desktop 4-up grid (17 → 18px).
   Just a touch larger for presence; mobile sizing left untouched.
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width:1024px){
    html body #main-content #products .product-card .product-name{ font-size:18px !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   R311 · Card INFO section (the lower white area: COA chip, name, dosage, price,
   CTA) — make it a little taller. Add vertical breathing room via top/bottom
   padding + slightly larger gaps above the price row and the Add-to-Cart button.
   The image / vial area is left at its original size (that wasn't the target;
   the earlier R310 image experiment is reverted to baseline). */
html body #main-content #products .product-card .product-info{ padding-top:8px !important; padding-bottom:20.75px !important; }
/* hair more space between the COA chip / name / dosage (barely noticeable, +2px each) */
html body #main-content #products .product-card .pc-coa-chip{ margin-bottom:8px !important; }
html body #main-content #products .product-card .product-name{ margin-bottom:3px !important; font-size:19px !important; }
html body #main-content #products .product-card .product-dosage{ margin-bottom:4px !important; font-size:13px !important; }
html body #main-content #products .product-card .product-price-row{ margin-top:13px !important; }
html body #main-content #products .product-card .product-add-btn{ margin-top:11px !important; padding-top:17px !important; padding-bottom:17px !important; font-size:14px !important; }

/* ════════════════════════════════════════════════════════════════════════
   R312 · BUNDLES REMODEL — dark "Instrument × Exhibit" hero over light premium
   content. Mirrors the products-page system (Geist display / JetBrains Mono data
   / Inter body, teal accents). All selectors scoped under #bundles. The page is
   NOT under #main-content, so #bundles (1 id) wins cleanly. app.js untouched.
   ════════════════════════════════════════════════════════════════════════ */
html body #bundles{
    --bx-dark:#06070A; --bx-dark2:#0b0e13; --bx-teal:#2dd4bf; --bx-teal2:#14b8a6;
    --bx-ink:#0f1413; --bx-ink2:#26302c; --bx-muted:#5b6660; --bx-line:#e6eae8;
    --bx-amber:#f59e0b; --bx-green:#15a06f; --bx-card:#ffffff; --bx-canvas:#f7f8f8;
    background:var(--bx-canvas) !important; color:var(--bx-ink) !important;
    font-family:'Inter',system-ui,sans-serif !important;
}
/* NOTE: a global `main, section, .hero ... { background: var(--bg) !important }`
   normalizer forces light backgrounds + Inter on <main>/<section>; R312 uses
   !important on background/color/font-family to win, per the codebase convention. */
html body #bundles .bx-container{ max-width:1200px; margin:0 auto; padding:0 24px; }
html body #bundles .bx-section{ padding:60px 0; background:transparent !important; }
html body #bundles .bx-sec-head{ margin-bottom:30px; }
html body #bundles .bx-sec-title{ font-family:'Geist','Inter',sans-serif !important; font-weight:700; font-size:clamp(1.5rem,2.6vw,2rem); letter-spacing:-.02em; color:var(--bx-ink) !important; margin:0 0 6px; text-wrap:balance; }
html body #bundles .bx-sec-sub{ color:var(--bx-muted) !important; font-size:.98rem; margin:0; max-width:60ch; }

/* ── Dark hero ── */
html body #bundles .bx-hero{ position:relative; overflow:hidden; background:var(--bx-dark) !important;
    padding:clamp(96px,11.4vh,148px) 0 clamp(56px,7vh,84px); isolation:isolate; }
html body #bundles .bx-hero-fx{ position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.95;
    background:
      radial-gradient(120% 95% at 80% 4%, rgba(45,212,191,.18), transparent 55%),
      radial-gradient(85% 75% at 6% 105%, rgba(20,184,166,.10), transparent 60%),
      linear-gradient(180deg, rgba(255,255,255,.022) 1px, transparent 1px) 0 0/100% 40px,
      linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px) 0 0/40px 100% !important; }
html body #bundles .bx-hero-inner{ position:relative; max-width:1200px; margin:0 auto; padding:0 24px;
    display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center; }
html body #bundles .bx-back{ display:inline-flex; align-items:center; gap:8px; color:rgba(255,255,255,.62) !important;
    text-decoration:none; font-size:.82rem; font-weight:500; margin-bottom:18px; transition:gap .2s,color .2s; }
html body #bundles .bx-back:hover{ gap:12px; color:var(--bx-teal) !important; }
html body #bundles .bx-eyebrow{ display:block; font-family:'JetBrains Mono',monospace !important; font-size:.72rem;
    letter-spacing:.22em; text-transform:uppercase; color:var(--bx-teal) !important; margin-bottom:14px; }
html body #bundles .bx-h1{ font-family:'Geist','Inter',sans-serif !important; font-weight:700; color:#fff !important;
    font-size:clamp(2.1rem,4.4vw,3.3rem); line-height:1.05; letter-spacing:-.03em; margin:0 0 16px; text-wrap:balance; }
html body #bundles .bx-h1-accent{ color:var(--bx-teal) !important; }
html body #bundles .bx-sub{ color:rgba(255,255,255,.74) !important; font-size:1.02rem; line-height:1.6; max-width:54ch; margin:0 0 22px; }
html body #bundles .bx-sub strong{ color:#fff !important; font-weight:700; }
html body #bundles .bx-hero-cuts{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:22px; }
html body #bundles .bx-hero-link{ display:inline-flex; align-items:center; gap:8px; padding:9px 16px;
    border:1px solid rgba(255,255,255,.16) !important; border-radius:999px; color:rgba(255,255,255,.9) !important;
    text-decoration:none; font-size:.86rem; font-weight:600; transition:border-color .2s,background .2s,transform .15s; }
html body #bundles .bx-hero-link:hover{ border-color:var(--bx-teal) !important; background:rgba(45,212,191,.1) !important; transform:translateY(-1px); }
html body #bundles .bx-hero-link i{ color:var(--bx-teal) !important; }
html body #bundles .bx-ruo{ margin:6px 0 0; padding:0; background:none !important; border:0 !important; border-radius:0;
    color:rgba(255,255,255,.44) !important; font-size:.72rem; line-height:1.5; max-width:60ch; letter-spacing:.003em; }
html body #bundles .bx-ruo strong{ color:rgba(255,255,255,.62) !important; font-weight:600; }

/* ── Hero featured-bundle card ── */
html body #bundles .bx-hero-card{ background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)) !important;
    border:1px solid rgba(45,212,191,.3) !important; border-radius:18px; padding:22px;
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:0 28px 70px -34px rgba(0,0,0,.75); }
html body #bundles .bxh-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
html body #bundles .bxh-tag{ display:inline-flex; align-items:center; gap:7px; font-family:'JetBrains Mono',monospace !important;
    font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--bx-teal) !important; }
html body #bundles .bxh-save{ background:var(--bx-amber) !important; color:#3a2400 !important; font-weight:800; font-size:.78rem;
    padding:4px 11px; border-radius:999px; font-family:'JetBrains Mono',monospace !important; }
html body #bundles .bxh-vials{ display:flex; align-items:center; justify-content:center; gap:6px; padding:14px 0 10px; }
html body #bundles .bxh-vial{ width:112px; height:112px; display:flex; align-items:center; justify-content:center;
    background:radial-gradient(circle at 50% 38%, rgba(45,212,191,.14), transparent 70%) !important; border-radius:14px; }
html body #bundles .bxh-vial img{ max-width:100%; max-height:100%; object-fit:contain; filter:drop-shadow(0 10px 18px rgba(0,0,0,.5)); }
html body #bundles .bxh-plus{ color:var(--bx-teal) !important; font-weight:300; font-size:1.5rem; opacity:.8; }
html body #bundles .bxh-name{ font-family:'Geist','Inter',sans-serif !important; font-weight:700; color:#fff !important; font-size:1.3rem; text-align:center; margin:4px 0 12px; letter-spacing:-.01em; }
html body #bundles .bxh-items{ display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
html body #bundles .bxh-item{ display:flex; justify-content:space-between; align-items:center; padding:8px 12px;
    background:rgba(255,255,255,.04) !important; border:1px solid rgba(255,255,255,.07) !important; border-radius:9px; }
html body #bundles .bxh-iname{ color:#fff !important; font-weight:600; font-size:.86rem; }
html body #bundles .bxh-idose{ color:rgba(255,255,255,.55) !important; font-size:.74rem; font-family:'JetBrains Mono',monospace !important; }
html body #bundles .bxh-pricerow{ display:flex; align-items:baseline; justify-content:center; gap:12px; margin-bottom:16px; }
html body #bundles .bxh-was{ color:rgba(255,255,255,.45) !important; text-decoration:line-through; font-size:1rem; font-family:'JetBrains Mono',monospace !important; }
html body #bundles .bxh-final{ color:var(--bx-teal) !important; font-weight:800; font-size:2rem; font-family:'JetBrains Mono',monospace !important; letter-spacing:-.02em; }
html body #bundles .bxh-cta{ width:100%; padding:15px; border:0; border-radius:12px; cursor:pointer;
    background:linear-gradient(180deg,#2ad6c4,#0fa294) !important; color:#04201c !important; font-family:'Geist','Inter',sans-serif !important;
    font-weight:700; font-size:.98rem; letter-spacing:.02em; display:flex; align-items:center; justify-content:center; gap:9px;
    box-shadow:0 12px 26px -12px rgba(20,184,166,.7), inset 0 1px 0 rgba(255,255,255,.3); transition:transform .15s cubic-bezier(.23,1,.32,1), box-shadow .2s; }
html body #bundles .bxh-cta:hover{ transform:translateY(-2px); box-shadow:0 18px 34px -12px rgba(20,184,166,.8), inset 0 1px 0 rgba(255,255,255,.35); }
html body #bundles .bxh-cta:active{ transform:translateY(0) scale(.985); }

/* ── Curated stack cards — premium "product card for a stack" ── */
html body #bundles .bx-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:22px; }
html body #bundles .bx-card{ display:flex; flex-direction:column; background:var(--bx-card) !important; border:1px solid var(--bx-line) !important;
    border-radius:18px; overflow:hidden; transition:transform .25s cubic-bezier(.23,1,.32,1), box-shadow .25s, border-color .25s; }
html body #bundles .bx-card:hover{ transform:translateY(-5px); border-color:color-mix(in srgb, var(--acc,#14b8a6) 42%, var(--bx-line)) !important;
    box-shadow:0 26px 52px -26px color-mix(in srgb, var(--acc,#14b8a6) 45%, rgba(15,40,38,.55)); }
/* vial showcase stage */
html body #bundles .bx-card-stage{ position:relative; padding:22px 16px 18px;
    border-bottom:1px solid var(--bx-line) !important; border-bottom:1px solid color-mix(in srgb, var(--acc,#14b8a6) 16%, var(--bx-line)) !important;
    background:#f2faf8 !important; background:linear-gradient(168deg, color-mix(in srgb, var(--acc,#14b8a6) 6%, #fff), color-mix(in srgb, var(--acc,#14b8a6) 18%, #fff)) !important; }
html body #bundles .bx-card-stage::before{ content:''; position:absolute; left:50%; top:44%; width:84%; height:84%; transform:translate(-50%,-50%); z-index:0; pointer-events:none;
    background:radial-gradient(ellipse at 50% 50%, rgba(255,255,255,.92), rgba(255,255,255,0) 66%); opacity:.72; transition:opacity .35s ease; }
html body #bundles .bx-card-chip{ position:absolute; top:13px; left:13px; z-index:2; width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center;
    background:#ffffff !important; background:color-mix(in srgb, var(--acc,#14b8a6) 18%, #fff) !important; color:var(--bx-teal2) !important; color:var(--acc,#14b8a6) !important; font-size:.92rem; box-shadow:0 2px 8px -3px rgba(15,40,38,.25); }
html body #bundles .bx-card-save{ position:absolute; top:12px; right:12px; z-index:2; background:var(--bx-amber) !important; color:#3a2400 !important;
    font-family:'JetBrains Mono',monospace !important; font-weight:800; font-size:.72rem; padding:5px 11px; border-radius:999px; box-shadow:0 5px 14px -4px rgba(245,158,11,.6); }
html body #bundles .bx-card-vials{ position:relative; z-index:1; display:flex; align-items:flex-end; justify-content:center; gap:10px; min-height:110px; }
html body #bundles .bx-card-vials::after{ content:''; position:absolute; left:50%; bottom:2px; width:60%; height:13px; transform:translateX(-50%); z-index:0; pointer-events:none;
    background:radial-gradient(ellipse at 50% 50%, rgba(15,40,38,.26), rgba(15,40,38,0) 72%); filter:blur(2.5px); transition:width .35s cubic-bezier(.23,1,.32,1), opacity .35s ease; }
html body #bundles .bx-card-vial{ position:relative; z-index:1; height:106px; width:auto; max-width:34%; object-fit:contain; filter:drop-shadow(0 7px 11px rgba(15,40,38,.17)); transition:transform .35s cubic-bezier(.23,1,.32,1), filter .35s ease; }
html body #bundles .bx-card:hover .bx-card-vial{ transform:translateY(-5px); filter:drop-shadow(0 12px 17px rgba(15,40,38,.2)); }
html body #bundles .bx-card:hover .bx-card-vial:nth-child(2){ transform:translateY(-7px) scale(1.03); }
html body #bundles .bx-card:hover .bx-card-stage::before{ opacity:.96; }
html body #bundles .bx-card:hover .bx-card-vials::after{ width:68%; opacity:.78; }
/* body */
html body #bundles .bx-card-body{ display:flex; flex-direction:column; flex:1; padding:19px 22px 22px; }
html body #bundles .bx-card-name{ font-family:'Geist','Inter',sans-serif !important; font-weight:700; font-size:1.2rem; color:var(--bx-ink) !important; margin:0; letter-spacing:-.02em; line-height:1.2; }
html body #bundles .bx-card-count{ font-family:'JetBrains Mono',monospace !important; font-size:.67rem; letter-spacing:.08em; text-transform:uppercase; margin-top:3px;
    color:var(--bx-teal2) !important; color:color-mix(in srgb, var(--acc,#14b8a6) 78%, #555) !important; }
html body #bundles .bx-card-tagline{ color:var(--bx-muted) !important; font-size:.85rem; line-height:1.5; margin:10px 0 15px; }
html body #bundles .bx-card-items{ list-style:none; margin:0 0 16px; padding:0; }
html body #bundles .bx-card-items li{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8.5px 0; border-bottom:1px dashed var(--bx-line) !important; }
html body #bundles .bx-card-items li:last-child{ border-bottom:none !important; }
html body #bundles .bxi-name{ color:var(--bx-ink) !important; font-weight:600; font-size:.9rem; letter-spacing:-.005em; }
html body #bundles .bxi-dose{ flex-shrink:0; color:#222a27 !important; font-weight:600; font-size:.75rem; font-family:'JetBrains Mono',monospace !important; white-space:nowrap;
    padding:3px 9px; border-radius:7px; background:#eef2f1 !important; background:color-mix(in srgb, var(--acc,#14b8a6) 9%, #f3f5f4) !important;
    border:1px solid var(--bx-line) !important; border:1px solid color-mix(in srgb, var(--acc,#14b8a6) 24%, var(--bx-line)) !important; }
/* foot — price hero + CTA */
html body #bundles .bx-card-foot{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-top:auto; padding-top:14px; border-top:1px solid var(--bx-line) !important; }
html body #bundles .bx-card-prices{ display:flex; flex-direction:column; line-height:1.08; }
html body #bundles .bx-card-was{ color:var(--bx-muted) !important; font-size:.76rem; text-decoration:line-through; font-family:'JetBrains Mono',monospace !important; }
html body #bundles .bx-card-final{ color:var(--bx-teal2) !important; font-weight:800; font-size:1.5rem; font-family:'JetBrains Mono',monospace !important; letter-spacing:-.02em; }
html body #bundles .bx-card-savedollars{ color:#0d7a4f !important; font-size:.72rem; font-weight:700; font-family:'JetBrains Mono',monospace !important; margin-top:2px; }
html body #bundles .bx-card-cta{ flex-shrink:0; padding:12px 18px; border:0; border-radius:12px; cursor:pointer;
    background:linear-gradient(180deg,#16bbab,#0d9488) !important; color:#fff !important; font-family:'Geist','Inter',sans-serif !important; font-weight:700; font-size:.86rem;
    display:inline-flex; align-items:center; gap:8px; box-shadow:0 8px 20px -10px rgba(13,148,136,.6); transition:transform .15s, box-shadow .2s, background .2s; }
html body #bundles .bx-card-cta:hover{ background:linear-gradient(180deg,#2ad6c4,#0fa294) !important; transform:translateY(-2px); box-shadow:0 14px 28px -10px rgba(20,184,166,.65); }
html body #bundles .bx-card-cta:active{ transform:scale(.97); }

/* ── Custom builder ── */
html body #bundles .bx-builder{ background:#eef2f1 !important; }
html body #bundles .bx-builder-wrap{ display:grid; grid-template-columns:1fr 340px; gap:24px; align-items:start; }
html body #bundles .bx-builder-products{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
html body #bundles .bx-tile{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:3px;
    background:var(--bx-card) !important; border:2px solid var(--bx-line) !important; border-radius:13px; padding:14px 10px; cursor:pointer;
    transition:transform .18s, border-color .18s, box-shadow .18s; position:relative; }
html body #bundles .bx-tile:hover{ transform:translateY(-2px); border-color:rgba(20,184,166,.4) !important; box-shadow:0 10px 22px -14px rgba(15,40,38,.4); }
html body #bundles .bx-tile.selected{ border-color:var(--bx-teal2) !important; background:rgba(45,212,191,.07) !important; }
html body #bundles .bx-tile.selected::after{ content:'\f00c'; font-family:'Font Awesome 6 Free' !important; font-weight:900; position:absolute; top:7px; right:7px;
    width:21px; height:21px; background:var(--bx-teal2) !important; color:#fff !important; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.62rem; }
html body #bundles .bx-tile img{ width:64px; height:64px; object-fit:contain; margin-bottom:4px; }
html body #bundles .bx-tile-name{ font-family:'Geist','Inter',sans-serif !important; font-weight:700; font-size:.82rem; color:var(--bx-ink) !important; }
html body #bundles .bx-tile-dose{ color:var(--bx-muted) !important; font-size:.7rem; font-family:'JetBrains Mono',monospace !important; }
html body #bundles .bx-tile-price{ color:var(--bx-teal2) !important; font-weight:700; font-size:.82rem; font-family:'JetBrains Mono',monospace !important; }
html body #bundles .bx-builder-summary{ background:var(--bx-card) !important; border:1px solid var(--bx-line) !important; border-radius:16px; padding:20px; position:sticky; top:96px; box-shadow:0 12px 30px -22px rgba(15,40,38,.35); }
html body #bundles .bx-builder-h3{ font-family:'Geist','Inter',sans-serif !important; font-weight:700; font-size:1rem; color:var(--bx-ink) !important; margin:0 0 14px; display:flex; align-items:center; gap:9px; }
html body #bundles .bx-builder-h3 i{ color:var(--bx-teal2) !important; }
html body #bundles .bx-builder-empty{ text-align:center; color:var(--bx-muted) !important; padding:26px 0; }
html body #bundles .bx-builder-empty i{ font-size:1.9rem; opacity:.35; display:block; margin-bottom:10px; }
html body #bundles .bx-builder-empty p{ margin:0 0 4px; font-weight:600; color:var(--bx-ink2) !important; font-size:.9rem; }
html body #bundles .bx-builder-empty span{ font-size:.78rem; }
html body #bundles .bx-tier-pill{ display:inline-block; padding:6px 12px; border-radius:10px; font-size:.74rem; font-weight:700; background:rgba(100,116,139,.12) !important; color:var(--bx-muted) !important; margin-bottom:6px; }
html body #bundles .bx-tier-pill.on{ background:rgba(21,160,111,.13) !important; color:var(--bx-green) !important; }
html body #bundles .bx-tier-next{ font-size:.78rem; color:var(--bx-muted) !important; margin-bottom:12px; }
html body #bundles .bx-tier-next strong{ color:var(--bx-teal2) !important; }
html body #bundles .bx-tier-next.maxed{ color:var(--bx-green) !important; }
html body #bundles .bx-sum-list{ list-style:none; margin:0 0 12px; padding:0; }
html body #bundles .bx-sum-list li{ display:flex; justify-content:space-between; align-items:center; padding:7px 0; border-bottom:1px dashed var(--bx-line) !important; font-size:.86rem; color:var(--bx-ink2) !important; }
html body #bundles .bx-sum-right{ display:flex; align-items:center; gap:8px; }
html body #bundles .bx-sum-price{ color:var(--bx-ink) !important; font-weight:700; font-family:'JetBrains Mono',monospace !important; font-size:.82rem; }
html body #bundles .bx-sum-rm{ background:none !important; border:0; color:var(--bx-muted) !important; cursor:pointer; padding:3px 6px; transition:color .15s; }
html body #bundles .bx-sum-rm:hover{ color:#ef4444 !important; }
html body #bundles .bx-sum-totals{ border-top:1px solid var(--bx-line) !important; padding-top:12px; }
html body #bundles .bx-sum-row{ display:flex; justify-content:space-between; padding:4px 0; font-size:.86rem; color:var(--bx-muted) !important; font-family:'JetBrains Mono',monospace !important; }
html body #bundles .bx-sum-row .strike{ text-decoration:line-through; }
html body #bundles .bx-sum-row.save{ color:var(--bx-green) !important; font-weight:600; }
html body #bundles .bx-sum-row.total{ border-top:1px solid var(--bx-line) !important; margin-top:8px; padding-top:11px; font-size:1.02rem; color:var(--bx-ink) !important; font-weight:800; }
html body #bundles .bx-sum-row.total span:last-child{ color:var(--bx-teal2) !important; }
html body #bundles .bx-sum-cta{ width:100%; margin-top:14px; padding:14px; border:0; border-radius:11px; cursor:pointer;
    background:linear-gradient(180deg,#16bbab,#0d9488) !important; color:#fff !important; font-family:'Geist','Inter',sans-serif !important; font-weight:700; font-size:.92rem;
    display:flex; align-items:center; justify-content:center; gap:8px; box-shadow:0 8px 20px -10px rgba(13,148,136,.55); transition:transform .15s, box-shadow .2s; }
html body #bundles .bx-sum-cta:hover:not(:disabled){ transform:translateY(-1px); box-shadow:0 12px 26px -10px rgba(20,184,166,.6); }
html body #bundles .bx-sum-cta:active:not(:disabled){ transform:scale(.98); }
html body #bundles .bx-sum-cta:disabled{ opacity:.45; cursor:not-allowed; }

/* ── Trust pills ── */
html body #bundles .bx-trust{ padding:36px 0; border-top:1px solid var(--bx-line) !important; }
html body #bundles .bx-pills{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
html body #bundles .bx-pill{ display:inline-flex; align-items:center; gap:9px; padding:11px 18px; background:var(--bx-card) !important;
    border:1px solid var(--bx-line) !important; border-radius:999px; font-size:.86rem; font-weight:600; color:var(--bx-ink2) !important; }
html body #bundles .bx-pill i{ color:var(--bx-teal2) !important; }

/* ── Savings ladder ── */
/* ── Savings ladder — ascending value staircase ── */
html body #bundles #bx-ladder{ padding:56px 0 16px; }
html body #bundles .bx-ladder-head{ text-align:center; margin-bottom:42px; }
html body #bundles .bx-ladder-eyebrow{ font-family:'JetBrains Mono',monospace !important; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--bx-teal2) !important; }
html body #bundles .bx-ladder-title{ font-family:'Geist','Inter',sans-serif !important; font-weight:700; font-size:clamp(1.5rem,2.7vw,2.15rem); color:var(--bx-ink) !important; margin:9px 0 7px; letter-spacing:-.025em; text-wrap:balance; }
html body #bundles .bx-ladder-sub{ color:var(--bx-muted) !important; font-size:.92rem; line-height:1.5; margin:0 auto; max-width:48ch; }
html body #bundles .bx-ladder-rungs{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:end; max-width:860px; margin:0 auto; }
html body #bundles .bx-rung{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
    background:var(--bx-card) !important; border:1px solid var(--bx-line) !important; border-radius:18px; padding:24px 16px;
    box-shadow:0 18px 42px -28px rgba(15,40,38,.45); transition:transform .28s cubic-bezier(.23,1,.32,1), box-shadow .28s; }
html body #bundles .bx-rung.step1{ min-height:262px; }
html body #bundles .bx-rung.step2{ min-height:286px; }
html body #bundles .bx-rung.step3{ min-height:312px; }
html body #bundles .bx-rung:hover{ transform:translateY(-6px); box-shadow:0 32px 58px -30px rgba(15,40,38,.5); }
html body #bundles .bx-rung.top{ background:linear-gradient(180deg,#fffdf7,#fff7e9) !important; border-color:rgba(245,158,11,.5) !important; box-shadow:0 26px 56px -26px rgba(245,158,11,.5); }
html body #bundles .bx-rung.top:hover{ box-shadow:0 36px 66px -28px rgba(245,158,11,.58); }
html body #bundles .bx-rung-flag{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); white-space:nowrap; display:inline-flex; align-items:center; gap:6px;
    background:linear-gradient(180deg,#fbbf24,#f59e0b) !important; color:#3a2400 !important; font-family:'JetBrains Mono',monospace !important; font-weight:800;
    font-size:.64rem; letter-spacing:.07em; text-transform:uppercase; padding:5px 12px; border-radius:999px; box-shadow:0 9px 20px -6px rgba(245,158,11,.7); }
html body #bundles .bx-rung-flag i{ font-size:.62rem; }
html body #bundles .bx-rung-node{ width:54px; height:54px; margin-bottom:15px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:linear-gradient(180deg,#2dd4bf,#0d9488) !important; color:#fff !important; font-size:1.14rem; box-shadow:0 9px 22px -6px rgba(20,184,166,.6); }
html body #bundles .bx-rung.top .bx-rung-node{ width:62px; height:62px; position:relative; margin-bottom:17px; background:linear-gradient(180deg,#fbbf24,#f59e0b) !important; box-shadow:0 11px 26px -6px rgba(245,158,11,.62); }
html body #bundles .bx-rung.top .bx-rung-node::after{ content:''; position:absolute; inset:-7px; border-radius:50%; border:2px solid rgba(245,158,11,.5); animation:bxRingPulse 2.6s ease-out infinite; }
@keyframes bxRingPulse{ 0%{ transform:scale(1); opacity:.65 } 70%{ transform:scale(1.28); opacity:0 } 100%{ opacity:0 } }
html body #bundles .bx-rung-pct{ display:flex; align-items:baseline; justify-content:center; gap:2px; line-height:1; }
html body #bundles .bx-rung-num{ font-family:'JetBrains Mono',monospace !important; font-weight:800; font-size:clamp(2.7rem,4.6vw,3.5rem); color:#0d9488 !important; letter-spacing:-.04em; }
html body #bundles .bx-rung-sym{ font-family:'JetBrains Mono',monospace !important; font-weight:800; font-size:1.5rem; color:#0d9488 !important; }
html body #bundles .bx-rung-off{ font-size:.74rem; font-weight:600; color:var(--bx-muted) !important; text-transform:uppercase; letter-spacing:.05em; margin-left:4px; }
html body #bundles .bx-rung.top .bx-rung-num, html body #bundles .bx-rung.top .bx-rung-sym{ color:#c2620a !important; }
html body #bundles .bx-rung-bar{ height:7px; width:148px; max-width:80%; margin:15px 0; border-radius:99px; background:rgba(15,40,38,.07); overflow:hidden; }
html body #bundles .bx-rung-bar-fill{ display:block; height:100%; width:var(--fill,34%); border-radius:99px; background:linear-gradient(90deg,#2dd4bf,#14b8a6); }
html body #bundles .bx-rung.top .bx-rung-bar-fill{ background:linear-gradient(90deg,#fbbf24,#f59e0b); }
html body #bundles .bx-rung-items{ font-size:.94rem; font-weight:700; color:var(--bx-ink) !important; }
html body #bundles .bx-rung-label{ font-size:.72rem; color:var(--bx-muted) !important; font-family:'JetBrains Mono',monospace !important; text-transform:uppercase; letter-spacing:.08em; margin-top:3px; }
html body #bundles .bx-ladder-proof{ text-align:center; max-width:580px; margin:32px auto 0; color:var(--bx-ink2) !important; font-size:.92rem; line-height:1.55; }
html body #bundles .bx-ladder-proof strong{ color:#0d9488 !important; font-family:'JetBrains Mono',monospace !important; font-weight:800; font-size:1.05em; }

/* ── Builder live tier minibar ── */
html body #bundles .bx-minibar{ margin:2px 0 14px; }
html body #bundles .bx-minibar-track{ position:relative; height:7px; border-radius:999px; background:var(--bx-line) !important; }
html body #bundles .bx-minibar-fill{ position:absolute; left:0; top:0; height:100%; border-radius:999px; background:linear-gradient(90deg, var(--bx-teal2), var(--bx-teal)) !important; transition:width .4s cubic-bezier(.23,1,.32,1); }
html body #bundles .bx-minibar-tick{ position:absolute; top:50%; transform:translate(-50%,-50%); width:11px; height:11px; border-radius:50%; background:#fff !important; border:2px solid var(--bx-line) !important; transition:background .25s, border-color .25s; }
html body #bundles .bx-minibar-tick.hit{ border-color:var(--bx-teal2) !important; background:var(--bx-teal2) !important; }
html body #bundles .bx-minibar-labels{ display:flex; justify-content:space-between; margin-top:7px; font-family:'JetBrains Mono',monospace !important; font-size:.68rem; color:var(--bx-muted) !important; }
html body #bundles .bx-minibar-labels span.hit{ color:var(--bx-teal2) !important; font-weight:700; }

/* ── Why-bundle value math (dark inset panel) ── */
html body #bundles #bx-why{ padding:26px 0 56px; }
html body #bundles .bx-why-card{ background:#0b0e13 !important; border:1px solid rgba(45,212,191,.22) !important; border-radius:20px; padding:34px 30px; max-width:920px; margin:0 auto; position:relative; overflow:hidden; }
html body #bundles .bx-why-card::before{ content:''; position:absolute; inset:0; background:radial-gradient(80% 120% at 85% 0%, rgba(45,212,191,.12), transparent 60%); pointer-events:none; }
html body #bundles .bx-why-head{ position:relative; text-align:center; margin-bottom:26px; }
html body #bundles .bx-why-eyebrow{ font-family:'JetBrains Mono',monospace !important; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--bx-teal) !important; }
html body #bundles .bx-why-title{ font-family:'Geist','Inter',sans-serif !important; font-weight:700; font-size:clamp(1.5rem,2.6vw,2.1rem); color:#fff !important; margin:6px 0 4px; letter-spacing:-.02em; }
html body #bundles .bx-why-sub{ color:rgba(255,255,255,.6) !important; font-size:.9rem; margin:0; }
html body #bundles .bx-why-cols{ position:relative; display:flex; align-items:center; justify-content:center; gap:20px; flex-wrap:wrap; }
html body #bundles .bx-why-col{ text-align:center; min-width:128px; }
html body #bundles .bx-why-col.keep{ background:rgba(45,212,191,.08) !important; border:1px solid rgba(45,212,191,.3) !important; border-radius:14px; padding:14px 22px; }
html body #bundles .bx-why-label{ display:block; font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.5) !important; margin-bottom:6px; font-weight:600; }
html body #bundles .bx-why-num{ font-family:'JetBrains Mono',monospace !important; font-weight:800; font-size:1.7rem; color:#fff !important; letter-spacing:-.02em; }
html body #bundles .bx-why-num.strike{ color:rgba(255,255,255,.45) !important; text-decoration:line-through; font-weight:600; }
html body #bundles .bx-why-num.teal{ color:var(--bx-teal) !important; }
html body #bundles .bx-why-pct{ display:block; font-family:'JetBrains Mono',monospace !important; font-size:.74rem; color:var(--bx-teal) !important; margin-top:4px; font-weight:700; }
html body #bundles .bx-why-arrow{ color:var(--bx-teal2) !important; font-size:1.15rem; }
html body #bundles .bx-why-foot{ position:relative; text-align:center; color:rgba(255,255,255,.42) !important; font-size:.74rem; margin:22px 0 0; }

/* ── FAQ accordion (flash-free grid-rows transition) ── */
html body #bundles #bx-faq{ padding-top:18px; }
html body #bundles .bx-faq-head{ text-align:center; }
html body #bundles .bx-faq-list{ max-width:760px; margin:0 auto; }
html body #bundles .bx-faq-item{ border:1px solid var(--bx-line) !important; border-radius:13px; margin-bottom:12px; background:var(--bx-card) !important; overflow:hidden; }
html body #bundles .bx-faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:18px 20px; background:none !important;
    border:0 !important; cursor:pointer; text-align:left; font-family:'Geist','Inter',sans-serif !important; font-weight:600; font-size:1rem; color:var(--bx-ink) !important; }
html body #bundles .bx-faq-q i{ color:var(--bx-teal2) !important; font-size:.85rem; transition:transform .28s ease; flex-shrink:0; }
html body #bundles .bx-faq-item.open .bx-faq-q i{ transform:rotate(180deg); }
html body #bundles .bx-faq-a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s ease; }
html body #bundles .bx-faq-item.open .bx-faq-a{ grid-template-rows:1fr; }
html body #bundles .bx-faq-a p{ overflow:hidden; min-height:0; margin:0; padding:0 20px; color:var(--bx-muted) !important; font-size:.92rem; line-height:1.6; }
html body #bundles .bx-faq-item.open .bx-faq-a p{ padding:0 20px 18px; }

/* ── Reduced motion: neutralize all bundle animation/transition ── */
@media (prefers-reduced-motion: reduce){
    html body #bundles *{ animation:none !important; transition:none !important; }
    html body #bundles .bx-minibar-fill{ transition:none !important; }
}

/* ── Responsive ── */
@media (max-width:900px){
    html body #bundles .bx-hero-inner{ grid-template-columns:1fr; gap:30px; }
    html body #bundles .bx-builder-wrap{ grid-template-columns:1fr; }
    html body #bundles .bx-builder-summary{ position:static; }
}
@media (max-width:600px){
    html body #bundles .bx-section{ padding:44px 0; }
    html body #bundles .bx-container, html body #bundles .bx-hero-inner{ padding-left:16px; padding-right:16px; }
    html body #bundles .bx-grid{ grid-template-columns:1fr; }
    html body #bundles .bx-ladder-rungs{ grid-template-columns:1fr; gap:14px; align-items:stretch; }
    html body #bundles .bx-rung.step1, html body #bundles .bx-rung.step2, html body #bundles .bx-rung.step3{ min-height:0; padding:30px 16px 26px; }
    html body #bundles .bx-builder-products{ grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); }
    html body #bundles .bx-card-foot{ flex-direction:column; align-items:stretch; gap:10px; }
    html body #bundles .bx-card-cta{ justify-content:center; }
    html body #bundles .bx-why-cols{ flex-direction:column; gap:14px; }
    html body #bundles .bx-why-arrow{ transform:rotate(90deg); }
    html body #bundles .bx-why-card{ padding:26px 18px; }
}

/* ══════════════════════════════════════════════════════════════════
   R313 — Affiliate entry page (ax-*) — dark instrument hero + light content
   id-scoped to #affiliate; !important beats the global main/section
   background + #main-content Inter normalizers. Earnings calculator,
   how-it-works, why, who, FAQ, join portal, terms.
   ══════════════════════════════════════════════════════════════════ */
html body #affiliate{ --ax-dark:#06070A; --ax-teal:#2dd4bf; --ax-teal2:#14b8a6; --ax-ink:#0f1413; --ax-ink2:#26302c; --ax-muted:#5b6660; --ax-line:#e6eae8; --ax-amber:#f59e0b; --ax-green:#15a06f; --ax-card:#fff; --ax-canvas:#f7f8f8;
    background:var(--ax-canvas) !important; }
/* base scaffolding */
html body #affiliate .ax-container{ max-width:1200px; margin:0 auto; padding:0 24px; }
html body #affiliate .ax-section{ padding:64px 0; background:transparent !important; scroll-margin-top:128px; }
html body #affiliate .ax-section-head{ text-align:center; max-width:680px; margin:0 auto 40px; }
html body #affiliate .ax-eyebrow2{ font-family:'JetBrains Mono',monospace !important; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ax-teal2) !important; }
html body #affiliate .ax-section-title{ font-family:'Geist','Inter',sans-serif !important; font-weight:700; font-size:clamp(1.5rem,2.7vw,2.15rem); color:var(--ax-ink) !important; margin:9px 0 0; letter-spacing:-.025em; text-wrap:balance; }

/* ── Hero ── */
html body #affiliate #ax-hero{ position:relative; overflow:hidden; isolation:isolate; background:var(--ax-dark) !important; padding:clamp(100px,12vh,156px) 0 clamp(64px,8vh,96px); }
html body #affiliate .ax-hero-fx{ position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.95;
    background:
      radial-gradient(120% 95% at 82% 6%, rgba(45,212,191,.20), transparent 55%),
      radial-gradient(80% 70% at 4% 102%, rgba(20,184,166,.10), transparent 60%),
      linear-gradient(180deg, rgba(255,255,255,.022) 1px, transparent 1px) 0 0/100% 40px,
      linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px) 0 0/40px 100% !important; }
html body #affiliate .ax-hero-inner{ position:relative; max-width:1200px; margin:0 auto; padding:0 24px; display:grid; grid-template-columns:1.02fr .98fr; gap:54px; align-items:center; }
html body #affiliate .ax-hero-copy{ min-width:0; }
html body #affiliate .ax-eyebrow{ display:block; font-family:'JetBrains Mono',monospace !important; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ax-teal) !important; margin-bottom:16px; }
html body #affiliate .ax-h1{ font-family:'Geist','Inter',sans-serif !important; font-weight:700; color:#fff !important; font-size:clamp(2.2rem,4.4vw,3.5rem); line-height:1.04; letter-spacing:-.03em; margin:0; text-wrap:balance; }
html body #affiliate .ax-lede{ font-family:'Fraunces',Georgia,serif !important; font-weight:400; color:rgba(255,255,255,.74) !important; font-size:clamp(1.05rem,1.5vw,1.25rem); line-height:1.55; margin:18px 0 0; max-width:46ch; }
html body #affiliate .ax-cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
html body #affiliate .ax-cta-primary{ display:inline-flex; align-items:center; gap:10px; padding:17px 34px; border-radius:14px; text-decoration:none; background:linear-gradient(180deg,#2dd4bf,#0d9488) !important; color:#04130f !important; font-family:'Geist','Inter',sans-serif !important; font-weight:700; font-size:1.08rem; box-shadow:0 14px 34px -10px rgba(20,184,166,.6); transition:transform .15s, box-shadow .2s, filter .2s; }
html body #affiliate .ax-cta-primary:hover{ transform:translateY(-2px); box-shadow:0 18px 40px -12px rgba(45,212,191,.7); filter:brightness(1.05); }
html body #affiliate .ax-cta-primary:active{ transform:scale(.97); }
html body #affiliate .ax-cta-secondary{ display:inline-flex; align-items:center; padding:17px 28px; border-radius:14px; text-decoration:none; background:rgba(255,255,255,.06) !important; color:#fff !important; border:1px solid rgba(255,255,255,.18) !important; font-family:'Geist','Inter',sans-serif !important; font-weight:600; font-size:1rem; transition:background .2s, border-color .2s; }
html body #affiliate .ax-cta-secondary:hover{ background:rgba(255,255,255,.12) !important; border-color:rgba(255,255,255,.32) !important; }
html body #affiliate .ax-hero-trust{ list-style:none; display:flex; flex-wrap:wrap; gap:10px 18px; margin:28px 0 0; padding:0; }
html body #affiliate .ax-trust-pill{ display:inline-flex; align-items:center; gap:7px; color:rgba(255,255,255,.66) !important; font-size:.82rem; }
html body #affiliate .ax-trust-pill i{ color:var(--ax-teal) !important; font-size:.8rem; }

/* ── Earnings calculator (dark glass, in hero) ── */
html body #affiliate .ax-hero-calc{ min-width:0; }
html body #affiliate #ax-calc{ position:relative; background:rgba(255,255,255,.045) !important; border:1px solid rgba(255,255,255,.12) !important; border-radius:20px; padding:26px 26px 22px; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:0 30px 70px -30px rgba(0,0,0,.7); }
html body #affiliate .ax-calc-label{ font-family:'JetBrains Mono',monospace !important; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ax-teal) !important; }
html body #affiliate .ax-calc-monthrow{ display:flex; align-items:baseline; gap:9px; margin-top:6px; }
html body #affiliate .ax-calc-monthly{ font-family:'JetBrains Mono',monospace !important; font-weight:800; font-size:clamp(2.6rem,5.4vw,3.4rem); color:#fff !important; letter-spacing:-.03em; line-height:1; }
html body #affiliate .ax-calc-permo{ font-family:'JetBrains Mono',monospace !important; font-size:.9rem; font-weight:600; color:rgba(255,255,255,.5) !important; }
html body #affiliate .ax-calc-yearly{ font-family:'JetBrains Mono',monospace !important; font-size:.92rem; color:var(--ax-teal) !important; margin-top:5px; }
html body #affiliate .ax-calc-rows{ margin-top:22px; display:flex; flex-direction:column; gap:18px; }
html body #affiliate .ax-calc-row-top{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:9px; }
html body #affiliate .ax-calc-row-label{ color:rgba(255,255,255,.7) !important; font-size:.84rem; }
html body #affiliate .ax-calc-row-val{ font-family:'JetBrains Mono',monospace !important; font-size:.82rem; color:#fff !important; font-weight:600; white-space:nowrap; }
html body #affiliate .ax-range{ -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:99px; outline:none; cursor:pointer; background:linear-gradient(90deg, var(--ax-teal) var(--fill,30%), rgba(255,255,255,.14) var(--fill,30%)) !important; }
html body #affiliate .ax-range::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:20px; height:20px; border-radius:50%; background:#fff; border:3px solid var(--ax-teal2); box-shadow:0 4px 12px -2px rgba(0,0,0,.5); cursor:pointer; }
html body #affiliate .ax-range::-moz-range-thumb{ width:18px; height:18px; border-radius:50%; background:#fff; border:3px solid var(--ax-teal2); cursor:pointer; }
html body #affiliate .ax-range:focus-visible{ box-shadow:0 0 0 3px rgba(45,212,191,.35); }
html body #affiliate .ax-calc-note{ margin:18px 0 0; font-size:.7rem; line-height:1.5; color:rgba(255,255,255,.45) !important; }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce){ html body #affiliate *{ animation:none !important; transition:none !important; } }

/* ── Responsive ── */
@media (max-width:900px){
    html body #affiliate .ax-hero-inner{ grid-template-columns:1fr; gap:34px; }
}
@media (max-width:600px){
    html body #affiliate .ax-section{ padding:46px 0; }
    html body #affiliate .ax-container, html body #affiliate .ax-hero-inner{ padding-left:16px; padding-right:16px; }
    html body #affiliate .ax-cta-row{ gap:10px; }
    html body #affiliate .ax-cta-primary, html body #affiliate .ax-cta-secondary{ flex:1 1 auto; justify-content:center; }
}

/* ── Stat band (tucks under hero seam) ── */
html body #affiliate #ax-stats{ padding-top:0; margin-top:-44px; position:relative; z-index:3; }
html body #affiliate .ax-stats{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
html body #affiliate .ax-stat{ display:flex; flex-direction:column; align-items:flex-start; background:var(--ax-card) !important; border:1px solid var(--ax-line) !important; border-radius:16px; padding:22px 22px 20px; box-shadow:0 18px 44px -26px rgba(15,40,38,.45); transition:transform .25s cubic-bezier(.23,1,.32,1), box-shadow .25s; }
html body #affiliate .ax-stat:hover{ transform:translateY(-4px); box-shadow:0 28px 56px -28px rgba(15,40,38,.5); }
html body #affiliate .ax-stat-ico{ width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; background:#eef7f5 !important; background:color-mix(in srgb, var(--ax-teal2) 13%, #fff) !important; color:var(--ax-teal2) !important; font-size:1rem; margin-bottom:14px; }
html body #affiliate .ax-stat-num{ font-family:'JetBrains Mono',monospace !important; font-weight:800; font-size:1.9rem; color:var(--ax-teal2) !important; letter-spacing:-.02em; line-height:1; }
html body #affiliate .ax-stat-label{ font-family:'Geist','Inter',sans-serif !important; font-weight:700; color:var(--ax-ink) !important; font-size:.95rem; margin-top:9px; }
html body #affiliate .ax-stat-desc{ color:var(--ax-muted) !important; font-size:.82rem; line-height:1.45; margin-top:3px; }

/* ── How it works ── */
html body #affiliate .ax-steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
html body #affiliate .ax-step{ position:relative; overflow:hidden; background:var(--ax-card) !important; border:1px solid var(--ax-line) !important; border-radius:18px; padding:30px 26px; box-shadow:0 16px 40px -28px rgba(15,40,38,.4); }
html body #affiliate .ax-step-num{ position:absolute; top:16px; right:20px; font-family:'JetBrains Mono',monospace !important; font-weight:800; font-size:2.6rem; line-height:1; color:#eaf3f1 !important; color:color-mix(in srgb, var(--ax-teal2) 17%, #fff) !important; }
html body #affiliate .ax-step-ico{ width:50px; height:50px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg, rgba(45,212,191,.16), rgba(20,184,166,.08)) !important; color:var(--ax-teal2) !important; font-size:1.25rem; margin-bottom:18px; }
html body #affiliate .ax-step-title{ font-family:'Geist','Inter',sans-serif !important; font-weight:700; font-size:1.18rem; color:var(--ax-ink) !important; margin:0; letter-spacing:-.01em; }
html body #affiliate .ax-step-desc{ color:var(--ax-muted) !important; font-size:.9rem; line-height:1.55; margin-top:9px; }

/* ── Why partner ── */
html body #affiliate .ax-why-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px; }
html body #affiliate .ax-why-card{ background:var(--ax-card) !important; border:1px solid var(--ax-line) !important; border-radius:16px; padding:24px; box-shadow:0 14px 36px -26px rgba(15,40,38,.4); transition:transform .25s cubic-bezier(.23,1,.32,1), box-shadow .25s, border-color .25s; }
html body #affiliate .ax-why-card:hover{ transform:translateY(-4px); box-shadow:0 26px 50px -28px rgba(15,40,38,.5); border-color:rgba(20,184,166,.4) !important; }
html body #affiliate .ax-why-ico{ width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:#eef7f5 !important; background:color-mix(in srgb, var(--ax-teal2) 13%, #fff) !important; color:var(--ax-teal2) !important; font-size:1.12rem; margin-bottom:15px; }
html body #affiliate .ax-why-title{ font-family:'Geist','Inter',sans-serif !important; font-weight:700; font-size:1.06rem; color:var(--ax-ink) !important; margin:0; }
html body #affiliate .ax-why-desc{ color:var(--ax-muted) !important; font-size:.88rem; line-height:1.55; margin-top:8px; }

/* ── Who it's for ── */
html body #affiliate .ax-persona-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:18px; }
html body #affiliate .ax-persona{ flex:1 1 200px; max-width:240px; background:var(--ax-card) !important; border:1px solid var(--ax-line) !important; border-radius:16px; padding:24px 22px; box-shadow:0 14px 36px -26px rgba(15,40,38,.4); transition:transform .25s cubic-bezier(.23,1,.32,1), box-shadow .25s; }
html body #affiliate .ax-persona:hover{ transform:translateY(-4px); box-shadow:0 26px 50px -28px rgba(15,40,38,.5); }
html body #affiliate .ax-persona-ico{ width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg, rgba(45,212,191,.16), rgba(20,184,166,.08)) !important; color:var(--ax-teal2) !important; font-size:1.08rem; margin-bottom:14px; }
html body #affiliate .ax-persona-label{ font-family:'Geist','Inter',sans-serif !important; font-weight:700; font-size:1rem; color:var(--ax-ink) !important; margin:0; }
html body #affiliate .ax-persona-desc{ color:var(--ax-muted) !important; font-size:.85rem; line-height:1.5; margin-top:7px; }

/* ── FAQ accordion ── */
html body #affiliate .ax-faq{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
html body #affiliate .ax-faq-item{ background:var(--ax-card) !important; border:1px solid var(--ax-line) !important; border-radius:14px; overflow:hidden; transition:border-color .2s, box-shadow .2s; }
html body #affiliate .ax-faq-item.open{ border-color:rgba(20,184,166,.4) !important; box-shadow:0 16px 40px -28px rgba(15,40,38,.45); }
html body #affiliate .ax-faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 22px; background:transparent !important; border:0 !important; cursor:pointer; font-family:'Geist','Inter',sans-serif !important; font-weight:600; font-size:1rem; color:var(--ax-ink) !important; text-align:left; }
html body #affiliate .ax-faq-chev{ color:var(--ax-teal2) !important; font-size:.85rem; flex-shrink:0; transition:transform .3s ease; }
html body #affiliate .ax-faq-item.open .ax-faq-chev{ transform:rotate(180deg); }
html body #affiliate .ax-faq-a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s ease; }
html body #affiliate .ax-faq-item.open .ax-faq-a{ grid-template-rows:1fr; }
html body #affiliate .ax-faq-a-inner{ overflow:hidden; min-height:0; }
html body #affiliate .ax-faq-a-inner p{ margin:0; padding:0 22px 18px; color:var(--ax-muted) !important; font-size:.92rem; line-height:1.6; }

/* ── Closing CTA + apply portal ── */
/* "Become an affiliate" landing is auth-aware: the app.js-rendered #affiliate-portal
   inside #ax-join changes height with sign-in state, so the ideal scroll target differs.
   - Signed IN  → tall "Create your affiliate account" form/dashboard → land high (40px,
     ~35px under the ~69px nav) so more of the form shows. This is the dialed-in spot.
   - Signed OUT → short ".aff-gate" sign-in card → 40px jams it under the nav, so fall
     back to the original 128px for breathing room.
   :has(.aff-gate) matches ONLY the signed-out gate and re-evaluates live when app.js
   swaps the portal content. Still one native smooth scroll (scroll-behavior:smooth). */
html body #affiliate #ax-join{ scroll-margin-top:40px; }
html body #affiliate #ax-join:has(.aff-gate){ scroll-margin-top:128px; }
/* Keep the Program Terms fine-print below the fold when you land on the panel: make
   #ax-join tall enough to fill the viewport from its landing point (its top sits at the
   128/40px scroll offset), so the next section starts at/after the viewport bottom and
   only reveals on a deliberate scroll. Desktop only — on mobile the short viewport +
   tall stacked panel already clears it, and 100vh is unreliable with mobile chrome. */
@media (min-width:700px){ html body #affiliate #ax-join{ min-height:calc(100vh - 128px); } }
html body #affiliate .ax-join-band{ position:relative; overflow:hidden; max-width:920px; margin:0 auto; text-align:center;
    border:1px solid var(--ax-line) !important; border:1px solid color-mix(in srgb, var(--ax-teal2) 24%, var(--ax-line)) !important; border-radius:28px;
    padding:clamp(58px,6vw,86px) clamp(30px,4.5vw,62px);
    background:#fff !important; background:linear-gradient(180deg, color-mix(in srgb, var(--ax-teal2) 5%, #fff), #fff 34%) !important;
    box-shadow:0 36px 86px -40px rgba(20,184,166,.4); }
html body #affiliate .ax-join-band > *{ position:relative; z-index:1; }
html body #affiliate .ax-join-title{ font-family:'Geist','Inter',sans-serif !important; font-weight:700; font-size:clamp(2rem,3.6vw,2.8rem); color:var(--ax-ink) !important; margin:0; letter-spacing:-.025em; text-wrap:balance; }
html body #affiliate .ax-join-sub{ color:var(--ax-muted) !important; font-size:clamp(1rem,1.3vw,1.12rem); line-height:1.5; margin:13px auto 0; max-width:48ch; }
html body #affiliate #affiliate-portal{ position:relative; z-index:1; margin-top:32px; }
/* de-nested gate (app.js-rendered): strip the global card so it reads as one panel */
html body #affiliate .aff-gate{ text-align:center; background:transparent !important; border:0 !important; box-shadow:none !important; border-radius:0 !important; padding:0 !important; }
html body #affiliate .aff-gate i{ display:inline-flex; align-items:center; justify-content:center; width:64px; height:64px; border-radius:50%; background:linear-gradient(180deg, rgba(45,212,191,.2), rgba(20,184,166,.1)) !important; color:var(--ax-teal2) !important; font-size:1.65rem; margin-bottom:15px; }
html body #affiliate .aff-gate h3{ font-family:'Geist','Inter',sans-serif !important; font-weight:700; color:var(--ax-ink) !important; font-size:1.3rem; margin:0 0 5px; }
html body #affiliate .aff-gate p{ color:var(--ax-muted) !important; font-size:.95rem; line-height:1.5; margin:0 auto 22px; max-width:42ch; }
html body #affiliate .aff-gate .auth-submit{ position:relative; overflow:hidden; display:inline-flex !important; align-items:center; justify-content:center; gap:11px; width:auto !important; min-width:320px !important; max-width:440px; padding:19px 56px !important; border:0; border-radius:16px; cursor:pointer; background:linear-gradient(180deg,#34dcca,#0d9488) !important; color:#04130f !important; font-family:'Geist','Inter',sans-serif !important; font-weight:700; font-size:1.14rem !important; letter-spacing:.01em; box-shadow:inset 0 1px 0 rgba(255,255,255,.42), 0 16px 40px -12px rgba(20,184,166,.65); transition:transform .18s cubic-bezier(.23,1,.32,1), box-shadow .25s, filter .2s; }
html body #affiliate .aff-gate .auth-submit::before{ content:''; position:absolute; top:0; left:-65%; width:55%; height:100%; pointer-events:none; background:linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent); transform:skewX(-18deg); transition:left .6s ease; }
html body #affiliate .aff-gate .auth-submit::after{ content:'\2192'; font-size:1.05em; line-height:1; transition:transform .25s cubic-bezier(.23,1,.32,1); }
html body #affiliate .aff-gate .auth-submit:hover{ transform:translateY(-3px); filter:brightness(1.06); box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 26px 54px -14px rgba(45,212,191,.78); }
html body #affiliate .aff-gate .auth-submit:hover::before{ left:135%; }
html body #affiliate .aff-gate .auth-submit:hover::after{ transform:translateX(5px); }
html body #affiliate .aff-gate .auth-submit:active{ transform:translateY(-1px) scale(.98); }

/* ── Signed-in signup perk tiles (app.js renderAffiliateApplication) ──
   Lift the flat gray boxes into premium teal-tinted tiles: icon in a soft teal coin,
   Geist numerals (the markup still asks for Orbitron, which we dropped — force Geist),
   1px teal border + faint inset highlight at rest, defined shadow + lift on hover. */
html body #affiliate .aff-signup-perks{ grid-template-columns:repeat(3,1fr) !important; gap:13px !important; margin:6px 0 26px !important; }
html body #affiliate .aff-signup-perk{
    flex-direction:column !important; align-items:center; text-align:center; gap:8px !important; padding:20px 12px 17px !important;
    background:linear-gradient(180deg, #f4f4f4, #fdfdfd 85%) !important;
    border:1px solid color-mix(in srgb, var(--ax-teal2) 26%, var(--ax-line)) !important;
    border-radius:14px !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.8) !important;
    transition:transform .22s cubic-bezier(.23,1,.32,1), box-shadow .22s, border-color .22s !important; }
html body #affiliate .aff-signup-perk:hover{
    transform:translateY(-3px);
    border-color:color-mix(in srgb, var(--ax-teal2) 48%, var(--ax-line)) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 16px 30px -18px rgba(20,184,166,.6) !important; }
html body #affiliate .aff-signup-perk i{
    display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:50%;
    background:linear-gradient(180deg, rgba(45,212,191,.20), rgba(20,184,166,.10)) !important;
    color:var(--ax-teal2) !important; font-size:1.02rem !important; margin-bottom:3px !important; }
html body #affiliate .aff-signup-perk strong{
    font-family:'Geist','Inter',sans-serif !important; font-weight:700 !important; color:var(--ax-ink) !important;
    font-size:1.04rem !important; letter-spacing:-.01em !important; line-height:1.12 !important; }
html body #affiliate .aff-signup-perk span{
    color:var(--ax-muted) !important; font-size:.79rem !important; letter-spacing:.01em !important; line-height:1.3 !important; }
/* Color-code each icon so the three stats read distinctly instead of three identical
   teal glyphs melting into the teal tiles. Amber = your earnings, rose = the buyer's
   deal, blue = payout speed. Coin + border tinted to match; saturated icon for contrast. */
html body #affiliate .aff-signup-perk:nth-child(1){ border-color:color-mix(in srgb, #f59e0b 34%, var(--ax-line)) !important; }
html body #affiliate .aff-signup-perk:nth-child(1) i{ color:#b45309 !important; background:linear-gradient(180deg, rgba(245,158,11,.22), rgba(245,158,11,.10)) !important; }
html body #affiliate .aff-signup-perk:nth-child(1):hover{ border-color:color-mix(in srgb, #f59e0b 60%, var(--ax-line)) !important; }
html body #affiliate .aff-signup-perk:nth-child(2){ border-color:color-mix(in srgb, #f43f5e 32%, var(--ax-line)) !important; }
html body #affiliate .aff-signup-perk:nth-child(2) i{ color:#be123c !important; background:linear-gradient(180deg, rgba(244,63,94,.20), rgba(244,63,94,.09)) !important; }
html body #affiliate .aff-signup-perk:nth-child(2):hover{ border-color:color-mix(in srgb, #f43f5e 56%, var(--ax-line)) !important; }
html body #affiliate .aff-signup-perk:nth-child(3){ border-color:color-mix(in srgb, #2563eb 30%, var(--ax-line)) !important; }
html body #affiliate .aff-signup-perk:nth-child(3) i{ color:#1d4ed8 !important; background:linear-gradient(180deg, rgba(37,99,235,.18), rgba(37,99,235,.08)) !important; }
html body #affiliate .aff-signup-perk:nth-child(3):hover{ border-color:color-mix(in srgb, #2563eb 54%, var(--ax-line)) !important; }
@media (prefers-reduced-motion: reduce){
    html body #affiliate .aff-signup-perk{ transition:none !important; }
    html body #affiliate .aff-signup-perk:hover{ transform:none; } }
/* Narrow screens: 3-across cramps the tiles (the longest, "20% commission", needs
   more width than a third of a ~240px card), so stack them full-width instead —
   roomy, even, and never content-sized-uneven. */
@media (max-width:520px){
    html body #affiliate .aff-signup-perks{ grid-template-columns:1fr !important; gap:10px !important; }
    html body #affiliate .aff-signup-perk{ flex-direction:column !important; padding:16px 14px !important; gap:6px !important; }
    html body #affiliate .aff-signup-perk i{ width:40px; height:40px; margin-bottom:2px !important; font-size:1rem !important; }
    html body #affiliate .aff-signup-perk strong{ font-size:1.04rem !important; }
    html body #affiliate .aff-signup-perk span{ font-size:.8rem !important; } }

/* ── Terms ── */
html body #affiliate #ax-terms .ax-section-title{ font-size:clamp(1.3rem,2.2vw,1.7rem); }
html body #affiliate .ax-terms-list{ list-style:none; max-width:840px; margin:0 auto; padding:0; display:flex; flex-direction:column; gap:11px; }
html body #affiliate .ax-terms-list li{ position:relative; padding-left:26px; color:var(--ax-muted) !important; font-size:.9rem; line-height:1.6; }
html body #affiliate .ax-terms-list li::before{ content:''; position:absolute; left:3px; top:.55em; width:7px; height:7px; border-radius:50%; background:var(--ax-teal2) !important; }
html body #affiliate .ax-terms-list strong{ color:var(--ax-ink2) !important; font-weight:600; }

/* ── Light-section responsive ── */
@media (max-width:920px){
    html body #affiliate .ax-steps{ grid-template-columns:1fr; }
    html body #affiliate .ax-persona-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px){
    html body #affiliate #ax-stats{ margin-top:-30px; }
    html body #affiliate .ax-stats{ grid-template-columns:repeat(2,1fr); gap:12px; }
    html body #affiliate .ax-persona-grid{ grid-template-columns:1fr; }
    html body #affiliate .ax-join-band{ padding:32px 20px; }
}

/* ── Gradual section transitions: alternating faint teal-tint bands, feathered
   top & bottom so section seams are soft gradients, never hard lines ── */
html body #affiliate #ax-how,
html body #affiliate #ax-who,
html body #affiliate #ax-join{
    background:#eef4f2 !important;
    background:linear-gradient(180deg,
        var(--ax-canvas) 0%,
        color-mix(in srgb, var(--ax-teal2) 7%, var(--ax-canvas)) 16%,
        color-mix(in srgb, var(--ax-teal2) 7%, var(--ax-canvas)) 84%,
        var(--ax-canvas) 100%) !important;
}

/* ── Scroll-reveal: light sections glide up as they enter view. Gated on
   #affiliate.ax-anim (added by JS) so content stays visible with no JS, on
   error, or under reduced motion (belt-and-suspenders override below). ── */
html body #affiliate.ax-anim .ax-reveal{ opacity:0; transform:translateY(28px); transition:opacity .6s cubic-bezier(.23,1,.32,1), transform .6s cubic-bezier(.23,1,.32,1); }
html body #affiliate.ax-anim .ax-reveal.ax-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ html body #affiliate.ax-anim .ax-reveal{ opacity:1 !important; transform:none !important; } }

/* ── Active-affiliate view ──────────────────────────────────────────────────────────
   An existing affiliate (their dashboard is rendered, detected via the dashboard-only
   .aff-deck — R325 renamed this from .aff-dash-header) should land straight on the
   dashboard, NOT the recruitment page.
   Hide every sign-up/marketing section + the "Ready to earn?" lead-in, and strip the
   teal "card" chrome + 920px cap + viewport min-height off the wrapper so the dashboard
   breathes at full container width instead of being a cramped card-in-a-card. Pure CSS
   via :has() — no app.js. (Gate / application / pending / rejected states keep the
   marketing, since those visitors are not yet affiliates.) */
html body #affiliate:has(.aff-deck) #ax-hero,
html body #affiliate:has(.aff-deck) #ax-stats,
html body #affiliate:has(.aff-deck) #ax-how,
html body #affiliate:has(.aff-deck) #ax-why,
html body #affiliate:has(.aff-deck) #ax-who,
html body #affiliate:has(.aff-deck) #ax-faq,
html body #affiliate:has(.aff-deck) #ax-terms,
html body #affiliate:has(.aff-deck) .ax-join-head{ display:none !important; }

html body #affiliate:has(.aff-deck) #ax-join{
    min-height:0 !important; padding:36px 0 72px !important; background:var(--ax-canvas) !important; }
html body #affiliate:has(.aff-deck) .ax-join-band{
    max-width:1200px !important; margin:0 auto; padding:0 !important; text-align:left;
    background:transparent !important; border:0 !important; box-shadow:none !important;
    border-radius:0 !important; overflow:visible !important; }

/* ════════════════════════════════════════════════════════════════════════════════
   R314 — AFFILIATE DASHBOARD REMODEL ("Earnings Console")
   Re-skins the app.js renderAffiliateDashboard() output into the Instrument × Exhibit
   system. CSS-only: markup/classes/copy/hooks are app.js and untouched. Every rule is
   id-scoped (html body #affiliate …) to beat the old un-scoped .aff-* dark theme + the
   #main-content normalizer; !important only where overriding inline element styles.
   ════════════════════════════════════════════════════════════════════════════════ */

/* ── P1 Foundation: section rhythm, mono numerals, mono teal section labels ── */
html body #affiliate .aff-dash-header,
html body #affiliate .aff-hero-stat,
html body #affiliate .aff-stats-v2,
html body #affiliate .aff-projection,
html body #affiliate .aff-achievements,
html body #affiliate .aff-stats-mini,
html body #affiliate .aff-chart-card,
html body #affiliate .aff-top-products,
html body #affiliate .aff-recent-card,
html body #affiliate .aff-share-hero,
html body #affiliate .aff-payout-dual,
html body #affiliate .aff-credits-card,
html body #affiliate .aff-settings-card{ margin-bottom:18px; }

html body #affiliate .aff-hero-stat-value,
html body #affiliate .aff-stat-v2-value,
html body #affiliate .aff-stat-mini-value,
html body #affiliate .aff-dash-code-text,
html body #affiliate .aff-recent-amount,
html body #affiliate .aff-recent-commission,
html body #affiliate .aff-payout-amount,
html body #affiliate .aff-credit-code,
html body #affiliate .aff-credit-value{ font-family:'JetBrains Mono','SFMono-Regular',monospace !important; }

html body #affiliate .aff-section-label{
    font-family:'JetBrains Mono',monospace !important; text-transform:uppercase; letter-spacing:.12em;
    font-size:.72rem; font-weight:600; color:var(--ax-teal2) !important;
    display:flex; align-items:center; gap:8px; margin:28px 0 14px; }
html body #affiliate .aff-section-label i{ color:var(--ax-teal2) !important; }

/* ── P2 Header: light command bar ── */
html body #affiliate .aff-dash-header.aff-dash-header-v3{
    background:linear-gradient(135deg, color-mix(in srgb, var(--ax-teal2) 6%, #fff), #fff 60%) !important;
    border:1px solid color-mix(in srgb, var(--ax-teal2) 20%, var(--ax-line)) !important;
    border-radius:18px; padding:26px 28px 24px;
    box-shadow:0 18px 40px -28px rgba(20,184,166,.35) !important; animation:none !important; }
html body #affiliate .aff-dash-header.aff-dash-header-v3::before{ opacity:.5 !important; }
html body #affiliate .aff-dash-particles{ opacity:.3 !important; }
@media (prefers-reduced-motion: reduce){ html body #affiliate .aff-dash-particles{ display:none !important; } }

html body #affiliate .aff-dash-avatar{
    background:linear-gradient(135deg,#2dd4bf,#0d9488) !important; color:#06241f !important;
    box-shadow:0 8px 20px -8px rgba(20,184,166,.6) !important; }

html body #affiliate .aff-dash-h2 .aff-dash-greeting-prefix{
    font-family:'Geist','Inter',sans-serif !important; color:var(--ax-muted) !important; font-weight:600;
    -webkit-text-fill-color:initial !important; background:none !important; }
html body #affiliate .aff-dash-h2 .aff-dash-greeting-name{
    font-family:'Geist','Inter',sans-serif !important; font-weight:800; letter-spacing:-.02em;
    color:var(--ax-ink) !important; background:none !important; -webkit-background-clip:initial !important;
    background-clip:initial !important; -webkit-text-fill-color:var(--ax-ink) !important; animation:none !important; }
html body #affiliate .aff-dash-status{ color:var(--ax-muted) !important; }
html body #affiliate .aff-status-dot,
html body #affiliate .aff-live-pulse{ color:var(--ax-green) !important; }

html body #affiliate .aff-tier-badge{
    background:color-mix(in srgb, var(--ax-teal2) 12%, #fff) !important;
    border:1px solid color-mix(in srgb, var(--ax-teal2) 30%, var(--ax-line)) !important; color:var(--ax-ink2) !important; }
html body #affiliate .aff-tier-progress{ background:color-mix(in srgb, var(--ax-teal2) 14%, var(--ax-line)) !important; }
html body #affiliate .aff-tier-progress-fill{ background:linear-gradient(90deg,#2dd4bf,#0d9488) !important; }
/* Affiliate code chip — labeled, light, prominent (replaces the small black pill). The
   "YOUR REFERRAL CODE" label is added via ::before since the markup is app.js (no label). */
html body #affiliate .aff-dash-code-pill{
    display:grid !important; grid-template-columns:1fr auto;
    grid-template-areas:"label copy" "code copy"; align-items:center; column-gap:14px; row-gap:3px;
    width:fit-content; max-width:100%;
    background:linear-gradient(180deg, color-mix(in srgb,var(--ax-teal2) 12%, #fff), #fff 72%) !important;
    border:1px solid color-mix(in srgb,var(--ax-teal2) 34%, var(--ax-line)) !important;
    border-radius:14px !important; padding:10px 12px 11px 16px !important;
    box-shadow:0 12px 26px -16px rgba(20,184,166,.5) !important; }
html body #affiliate .aff-dash-code-pill::before{
    content:'YOUR REFERRAL CODE'; grid-area:label;
    font-family:'JetBrains Mono',monospace; font-size:.58rem; font-weight:600; letter-spacing:.15em;
    text-transform:uppercase; color:var(--ax-teal2); }
html body #affiliate .aff-dash-code-text{
    grid-area:code; color:var(--ax-ink) !important; font-weight:700; font-size:1.22rem;
    letter-spacing:.07em; line-height:1.05; }
html body #affiliate .aff-dash-code-pill button{
    grid-area:copy; width:40px; height:40px; border-radius:11px; align-self:center;
    background:linear-gradient(180deg,#34dcca,#0d9488) !important; color:#06241f !important; border:0 !important;
    display:inline-flex; align-items:center; justify-content:center; font-size:.92rem;
    transition:transform .16s ease, box-shadow .16s ease; }
html body #affiliate .aff-dash-code-pill button:hover{ transform:translateY(-2px); box-shadow:0 10px 18px -8px rgba(20,184,166,.6); }
@media (prefers-reduced-motion: reduce){ html body #affiliate .aff-dash-code-pill button{ transition:none !important; } html body #affiliate .aff-dash-code-pill button:hover{ transform:none; } }

/* ── P3 Lifetime Earnings: dark instrument gauge ── */
html body #affiliate .aff-hero-stat{
    position:relative; overflow:hidden;
    background:radial-gradient(120% 140% at 18% 0%, #0c1416 0%, #06070A 60%) !important;
    border:1px solid color-mix(in srgb, var(--ax-teal2) 26%, #06070A) !important;
    border-radius:18px; padding:30px 32px;
    box-shadow:0 30px 70px -34px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.04) !important; }
html body #affiliate .aff-hero-stat::before{
    content:''; position:absolute; inset:0; pointer-events:none;
    background-image:linear-gradient(rgba(45,212,191,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(45,212,191,.05) 1px,transparent 1px);
    background-size:30px 30px;
    -webkit-mask:radial-gradient(120% 120% at 18% 0%,#000,transparent 70%); mask:radial-gradient(120% 120% at 18% 0%,#000,transparent 70%); }
html body #affiliate .aff-hero-stat-left,
html body #affiliate .aff-hero-stat-icon{ position:relative; z-index:1; }
html body #affiliate .aff-hero-stat-label{
    font-family:'JetBrains Mono',monospace !important; text-transform:uppercase; letter-spacing:.16em;
    font-size:.72rem; color:#7fe7d8 !important; }
html body #affiliate .aff-hero-stat-label i{ color:var(--ax-teal) !important; }
html body #affiliate .aff-hero-stat-value{
    font-family:'JetBrains Mono',monospace !important; font-weight:700; font-size:clamp(2.4rem,4.5vw,3.1rem);
    background:none !important; -webkit-background-clip:initial !important; background-clip:initial !important;
    -webkit-text-fill-color:#2dd4bf !important; color:#2dd4bf !important; animation:none !important;
    text-shadow:0 0 28px rgba(45,212,191,.35); letter-spacing:-.01em; }
html body #affiliate .aff-hero-stat-sub{ color:#9fb0ab !important; }
html body #affiliate .aff-hero-stat-sub strong{ color:#e6eae8 !important; }
html body #affiliate .aff-hero-stat-icon{
    background:radial-gradient(circle at 35% 30%, rgba(245,158,11,.30), rgba(245,158,11,.10)) !important;
    border:1px solid rgba(245,158,11,.40) !important; color:#fbbf24 !important; }

/* ── P4 Stat rows (primary + mini) + projection ── */
html body #affiliate .aff-stats-v2{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
/* Premium stat cards: each stat carries its own accent identity (Total Sales · teal,
   Available Balance · green = cashable money, Lifetime Earned · amber = achievement) via a
   per-card --c/--cd pair — faint surface tint, soft corner glow, dimensional coin, bigger value. */
html body #affiliate .aff-stat-v2{
    --c:59,130,246; --cd:#1d4ed8;
    position:relative; overflow:hidden;
    background:#fff !important;
    border:1px solid var(--ax-line) !important; border-radius:16px; padding:28px 26px; gap:18px;
    box-shadow:0 1px 0 rgba(255,255,255,.85) inset, 0 18px 38px -30px rgba(15,20,19,.22) !important;
    transition:transform .24s cubic-bezier(.23,1,.32,1), box-shadow .24s, border-color .24s; }
html body #affiliate .aff-stats-v2 .aff-stat-v2:nth-child(2){ --c:139,92,246; --cd:#6d28d9; }   /* violet — available/wallet funds */
html body #affiliate .aff-stats-v2 .aff-stat-v2:nth-child(3){ --c:245,158,11; --cd:#b45309; }   /* amber / gold */
html body #affiliate .aff-stat-v2::after{ display:none !important; }   /* neutral cards: no accent corner glow */
html body #affiliate .aff-stat-v2:hover{
    transform:translateY(-4px); border-color:color-mix(in srgb, var(--ax-ink) 16%, var(--ax-line)) !important;
    box-shadow:0 1px 0 rgba(255,255,255,.85) inset, 0 26px 46px -28px rgba(15,20,19,.28) !important; }
html body #affiliate .aff-stat-v2-icon,
html body #affiliate .aff-stat-v2-icon.aff-stat-v2-accent,
html body #affiliate .aff-stat-v2-icon.aff-stat-v2-gold{
    position:relative; z-index:1; flex:0 0 58px; width:58px !important; height:58px !important;
    border-radius:16px !important; font-size:1.5rem !important;
    background:linear-gradient(160deg, rgba(var(--c),.22), rgba(var(--c),.08)) !important;
    border:1px solid rgba(var(--c),.30) !important; color:var(--cd) !important;
    box-shadow:0 10px 20px -10px rgba(var(--c),.55), inset 0 1px 0 rgba(255,255,255,.6) !important; }
html body #affiliate .aff-stat-v2-data{ position:relative; z-index:1; }
html body #affiliate .aff-stat-v2-value{
    color:var(--ax-ink) !important; font-weight:700; font-size:1.85rem !important; line-height:1.04; letter-spacing:-.012em; }
html body #affiliate .aff-stat-v2-label{
    color:var(--ax-muted) !important; font-weight:600; font-size:.82rem !important; margin-top:4px; }

html body #affiliate .aff-stats-mini{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
html body #affiliate .aff-stat-mini{ background:#fff !important; border:1px solid var(--ax-line) !important; border-radius:12px; padding:14px; }
html body #affiliate .aff-stat-mini-label{ color:var(--ax-teal2) !important; font-size:.72rem; }
html body #affiliate .aff-stat-mini-label i{ color:var(--ax-teal2) !important; }
html body #affiliate .aff-stat-mini-value{ color:var(--ax-ink) !important; }
html body #affiliate .aff-stat-mini-sub{ color:var(--ax-muted) !important; }

html body #affiliate .aff-projection{
    background:linear-gradient(180deg, color-mix(in srgb,var(--ax-teal2) 8%,#fff), #fff 80%) !important;
    border:1px solid color-mix(in srgb,var(--ax-teal2) 24%,var(--ax-line)) !important; border-radius:14px; }
html body #affiliate .aff-projection-icon{ color:var(--ax-teal2) !important; background:rgba(20,184,166,.10) !important; }
html body #affiliate .aff-projection-label{ color:var(--ax-teal2) !important; }
html body #affiliate .aff-projection-label i{ color:var(--ax-amber) !important; }
html body #affiliate .aff-projection-value{ color:var(--ax-ink) !important; }
html body #affiliate .aff-projection-value strong{ color:var(--ax-ink) !important; }
html body #affiliate .aff-projection-sub{ color:var(--ax-muted) !important; }

/* ── P5 Achievements reward grid ── */
html body #affiliate .aff-achievements{ background:#fff !important; border:1px solid var(--ax-line) !important; border-radius:16px; padding:22px; }
html body #affiliate .aff-achievements-title{ color:var(--ax-ink) !important; font-family:'Geist','Inter',sans-serif !important; }
html body #affiliate .aff-achievements-title i{ color:#d97706 !important; }
html body #affiliate .aff-achievements-tagline{ color:var(--ax-muted) !important; }
html body #affiliate .aff-achievements-tagline a{ color:var(--ax-teal2) !important; }
/* Clarify (CSS-injected note, since copy is app.js): rewards are a bonus ON TOP of commission */
html body #affiliate .aff-achievements-tagline::after{
    content:'Every reward is a bonus on top of the commission you already earn on each order.';
    display:block; margin-top:9px; width:fit-content; max-width:100%; padding:6px 13px; border-radius:9px;
    background:color-mix(in srgb, var(--ax-teal2) 9%, #fff) !important;
    border:1px solid color-mix(in srgb, var(--ax-teal2) 24%, var(--ax-line));
    color:var(--ax-ink2) !important; font-weight:600; font-size:.9em; line-height:1.4; }
html body #affiliate .aff-achievements-sub{ color:var(--ax-muted) !important; font-family:'JetBrains Mono',monospace !important; }
html body #affiliate .aff-achievements-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; }

html body #affiliate .aff-achievement{ background:var(--ax-canvas) !important; border:1px solid var(--ax-line) !important; border-radius:14px; padding:16px 12px; }
html body #affiliate .aff-achievement.locked{ opacity:.62; }
html body #affiliate .aff-achievement.locked .aff-achievement-icon{ color:var(--ax-muted) !important; }
html body #affiliate .aff-achievement.unlocked{
    background:linear-gradient(180deg, color-mix(in srgb,var(--ax-teal2) 10%,#fff), #fff 78%) !important;
    border-color:color-mix(in srgb,var(--ax-teal2) 36%,var(--ax-line)) !important;
    box-shadow:0 14px 28px -20px rgba(20,184,166,.5); }
html body #affiliate .aff-achievement.unlocked .aff-achievement-icon{ color:var(--ax-teal2) !important; }
html body #affiliate .aff-achievement-name{ color:var(--ax-ink) !important; }
html body #affiliate .aff-achievement-desc{ color:var(--ax-muted) !important; }
html body #affiliate .aff-achievement-reward{
    font-family:'JetBrains Mono',monospace !important;
    background:color-mix(in srgb,var(--ax-amber) 14%,#fff) !important; color:#b45309 !important;
    border:1px solid color-mix(in srgb,var(--ax-amber) 30%,var(--ax-line)) !important; border-radius:999px; }
html body #affiliate .aff-achievement-reward i{ color:#d97706 !important; }

/* ── P6 Data: chart card, top products, recent-sales ledger ── */
html body #affiliate .aff-chart-card{ background:#fff !important; border:1px solid var(--ax-line) !important; border-radius:16px; padding:20px; }
html body #affiliate .aff-chart-title{ color:var(--ax-ink) !important; font-family:'Geist','Inter',sans-serif !important; }
html body #affiliate .aff-chart-sub{ color:var(--ax-muted) !important; font-family:'JetBrains Mono',monospace !important; }

html body #affiliate .aff-top-products{ background:#fff !important; border:1px solid var(--ax-line) !important; border-radius:16px; padding:20px; }
html body #affiliate .aff-top-products-title{ color:var(--ax-ink) !important; font-family:'Geist','Inter',sans-serif !important; }
html body #affiliate .aff-top-products-title i{ color:#d97706 !important; }
html body #affiliate .aff-top-products-sub{ color:var(--ax-muted) !important; }
html body #affiliate .aff-top-product-name{ color:var(--ax-ink) !important; }
html body #affiliate .aff-top-product-meta{ color:var(--ax-muted) !important; font-family:'JetBrains Mono',monospace !important; }
html body #affiliate .aff-top-product-amount{ color:var(--ax-teal2) !important; font-family:'JetBrains Mono',monospace !important; }
html body #affiliate .aff-top-product-bar-wrap{ background:var(--ax-line) !important; }
html body #affiliate .aff-top-product-bar{ background:linear-gradient(90deg,#2dd4bf,#0d9488) !important; }

html body #affiliate .aff-recent-card{ background:#fff !important; border:1px solid var(--ax-line) !important; border-radius:16px; padding:20px; }
html body #affiliate .aff-recent-title{ color:var(--ax-ink) !important; font-family:'Geist','Inter',sans-serif !important; }
html body #affiliate .aff-recent-title i{ color:var(--ax-teal2) !important; }
html body #affiliate .aff-recent-sub{ color:var(--ax-muted) !important; }
html body #affiliate .aff-recent-row{ border-bottom:1px solid var(--ax-line) !important; }
html body #affiliate .aff-recent-date{ color:var(--ax-ink) !important; font-family:'JetBrains Mono',monospace !important; }
html body #affiliate .aff-recent-time,
html body #affiliate .aff-recent-order,
html body #affiliate .aff-recent-items{ color:var(--ax-muted) !important; }
html body #affiliate .aff-recent-items i{ color:var(--ax-teal2) !important; }
html body #affiliate .aff-recent-buyer{ color:var(--ax-ink) !important; }
html body #affiliate .aff-recent-amount{ color:var(--ax-ink) !important; }
html body #affiliate .aff-recent-amount-label,
html body #affiliate .aff-recent-commission-label{ color:var(--ax-muted) !important; }
html body #affiliate .aff-recent-commission{ color:var(--ax-green) !important; font-weight:700; }
html body #affiliate .aff-recent-empty{ color:var(--ax-muted) !important; }
html body #affiliate .aff-recent-empty i{ color:color-mix(in srgb,var(--ax-teal2) 50%, var(--ax-line)) !important; }

/* ── P7 Share & Earn + Payout ── */
html body #affiliate .aff-share-hero{
    position:relative; overflow:hidden;
    background:linear-gradient(135deg, color-mix(in srgb,var(--ax-teal2) 12%,#fff), #fff 70%) !important;
    border:1px solid color-mix(in srgb,var(--ax-teal2) 28%,var(--ax-line)) !important; border-radius:18px; padding:26px; text-align:center; }
html body #affiliate .aff-share-icon{ background:linear-gradient(135deg,#2dd4bf,#0d9488) !important; color:#06241f !important; }
html body #affiliate .aff-share-title{ color:var(--ax-ink) !important; font-family:'Geist','Inter',sans-serif !important; }
html body #affiliate .aff-share-desc{ color:var(--ax-muted) !important; }
html body #affiliate .aff-share-desc strong{ color:var(--ax-ink) !important; }
html body #affiliate .aff-share-link-box{ background:#fff !important; border:1px solid var(--ax-line) !important; }
html body #affiliate .aff-share-link-box input{ color:var(--ax-ink2) !important; font-family:'JetBrains Mono',monospace !important; background:transparent !important; }
html body #affiliate .aff-share-copy-btn{ background:linear-gradient(180deg,#34dcca,#0d9488) !important; color:#06241f !important; border:0 !important; }
html body #affiliate .aff-share-step{ color:var(--ax-ink2) !important; }
html body #affiliate .aff-share-step i{ color:var(--ax-teal2) !important; }
html body #affiliate .aff-share-arrow{ color:color-mix(in srgb,var(--ax-teal2) 50%,var(--ax-line)) !important; }

html body #affiliate .aff-cashout-ready{
    background:color-mix(in srgb,var(--ax-green) 12%,#fff) !important;
    border:1px solid color-mix(in srgb,var(--ax-green) 30%,var(--ax-line)) !important; color:#0f6b4c !important; border-radius:12px; }
html body #affiliate .aff-cashout-ready i{ color:var(--ax-green) !important; }
html body #affiliate .aff-payout-progress-track{ background:var(--ax-line) !important; }
html body #affiliate .aff-payout-progress-fill{ background:linear-gradient(90deg,#2dd4bf,#0d9488) !important; }
html body #affiliate .aff-payout-progress-text{ color:var(--ax-muted) !important; font-family:'JetBrains Mono',monospace !important; }
html body #affiliate .aff-payout-dual{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
html body #affiliate .aff-payout-option{ background:#fff !important; border:1px solid var(--ax-line) !important; border-radius:14px; padding:18px; }
html body #affiliate .aff-payout-option.aff-payout-featured{
    border-color:color-mix(in srgb,var(--ax-amber) 38%,var(--ax-line)) !important;
    background:linear-gradient(180deg,color-mix(in srgb,var(--ax-amber) 8%,#fff),#fff 70%) !important; }
html body #affiliate .aff-payout-badge{ background:linear-gradient(180deg,#fbbf24,#f59e0b) !important; color:#3a2a05 !important; }
html body #affiliate .aff-payout-head strong{ color:var(--ax-ink) !important; }
html body #affiliate .aff-payout-head i{ color:var(--ax-teal2) !important; }
html body #affiliate .aff-payout-amount{ color:var(--ax-ink) !important; }
html body #affiliate .aff-payout-sub{ color:var(--ax-muted) !important; }
html body #affiliate .aff-payout-btn{ background:#0f1413 !important; color:#fff !important; border:0 !important; border-radius:10px; transition:transform .18s ease, box-shadow .18s ease; }
html body #affiliate .aff-payout-btn:not(:disabled):hover{ transform:translateY(-2px); box-shadow:0 12px 24px -12px rgba(15,20,19,.5); }
html body #affiliate .aff-payout-btn:disabled{ background:var(--ax-line) !important; color:var(--ax-muted) !important; cursor:not-allowed; }
html body #affiliate .aff-payout-btn-featured:not(:disabled){ background:linear-gradient(180deg,#fbbf24,#f59e0b) !important; color:#3a2a05 !important; }

html body #affiliate .aff-credits-card{ background:#fff !important; border:1px solid var(--ax-line) !important; border-radius:14px; }
html body #affiliate .aff-credits-header{ color:var(--ax-ink) !important; }
html body #affiliate .aff-credit-code{ color:var(--ax-ink) !important; }
html body #affiliate .aff-credit-value{ color:var(--ax-green) !important; }
html body #affiliate .aff-credits-footer{ color:var(--ax-muted) !important; }

/* ── P8 Settings: light forms; override the inline dark <select>/divider styles ── */
html body #affiliate .aff-settings-card{ background:#fff !important; border:1px solid var(--ax-line) !important; border-radius:16px; padding:22px; }
html body #affiliate .aff-settings-label{ color:var(--ax-ink) !important; }
html body #affiliate .aff-settings-label i{ color:var(--ax-teal2) !important; }
html body #affiliate .aff-settings-label span{ color:var(--ax-muted) !important; }
html body #affiliate .aff-settings-network,
html body #affiliate .aff-settings-card input[type=text],
html body #affiliate .aff-settings-card input[type=email]{
    background:#fff !important; border:1px solid var(--ax-line) !important; color:var(--ax-ink) !important;
    border-radius:10px !important; font-family:'Inter',sans-serif !important; }
html body #affiliate .aff-settings-card input::placeholder{ color:var(--ax-muted) !important; }
html body #affiliate .aff-settings-network:focus,
html body #affiliate .aff-settings-card input:focus{
    outline:none !important; border-color:var(--ax-teal2) !important; box-shadow:0 0 0 3px rgba(20,184,166,.18) !important; }
html body #affiliate .aff-settings-save{ background:#0f1413 !important; color:#fff !important; border:0 !important; border-radius:10px; transition:transform .16s ease; }
html body #affiliate .aff-settings-save:hover{ transform:translateY(-1px); }
html body #affiliate .aff-settings-hint{ color:var(--ax-muted) !important; }
html body #affiliate .aff-settings-divider{ border-top:1px dashed var(--ax-line) !important; }

/* ── P9 Mobile breakpoints + reduced-motion ── */
@media (max-width:920px){
    html body #affiliate .aff-stats-v2{ grid-template-columns:1fr; }
    html body #affiliate .aff-payout-dual{ grid-template-columns:repeat(2,1fr); }
    html body #affiliate .aff-achievements-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:600px){
    html body #affiliate .aff-stats-mini{ grid-template-columns:repeat(2,1fr); }
    html body #affiliate .aff-payout-dual{ grid-template-columns:1fr; }
    html body #affiliate .aff-achievements-grid{ grid-template-columns:repeat(2,1fr); }
    html body #affiliate .aff-hero-stat{ flex-direction:column; text-align:center; gap:14px; }
}
@media (prefers-reduced-motion: reduce){
    html body #affiliate .aff-stat-v2,
    html body #affiliate .aff-payout-btn,
    html body #affiliate .aff-settings-save{ transition:none !important; }
    html body #affiliate .aff-stat-v2:hover,
    html body #affiliate .aff-payout-btn:not(:disabled):hover{ transform:none; }
}
/* ── P10 · Mini-stat instrument cluster + premium earnings chart ──────────────────────
   The four time-stats fuse into one connected readout panel (not an identical card grid);
   the chart gets a plotted look: constrained height, visible grid, gradient area, a glowing
   line, refined mono axis. Pure CSS over the app.js markup + SVG (stops/strokes themed via CSS). */

/* Mini-stats → connected instrument ribbon */
html body #affiliate .aff-stats-mini{
    display:grid !important; grid-template-columns:repeat(4,1fr) !important; gap:0 !important;
    background:linear-gradient(180deg, color-mix(in srgb,var(--ax-teal2) 5%, #fff), #fff 46%) !important;
    border:1px solid color-mix(in srgb,var(--ax-teal2) 16%, var(--ax-line)) !important; border-radius:18px; overflow:hidden;
    box-shadow:0 1px 0 rgba(255,255,255,.85) inset, 0 22px 46px -30px rgba(20,184,166,.42) !important; }
html body #affiliate .aff-stat-mini{
    background:transparent !important; border:0 !important; border-radius:0 !important;
    border-left:1px solid var(--ax-line) !important; padding:20px 22px !important;
    display:flex; flex-direction:column; gap:10px; transition:background .2s ease; }
html body #affiliate .aff-stat-mini:first-child{ border-left:0 !important; }
html body #affiliate .aff-stat-mini:hover{ background:color-mix(in srgb,var(--ax-teal2) 5%, transparent) !important; }
html body #affiliate .aff-stat-mini-label{
    display:inline-flex !important; align-items:center; gap:8px; color:var(--ax-muted) !important;
    text-transform:none !important; letter-spacing:0 !important; font-size:.78rem !important; font-weight:600; font-family:'Inter',sans-serif !important; }
html body #affiliate .aff-stat-mini-label i{
    flex:0 0 28px; width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; border-radius:9px;
    color:var(--ax-teal2) !important; font-size:.82rem;
    background:linear-gradient(180deg, rgba(45,212,191,.20), rgba(20,184,166,.08)); border:1px solid rgba(20,184,166,.18); }
html body #affiliate .aff-stat-mini-value{
    color:var(--ax-ink) !important; font-weight:700; font-size:1.55rem !important; line-height:1; letter-spacing:-.012em; }
html body #affiliate .aff-stat-mini-sub{ color:var(--ax-muted) !important; font-size:.76rem !important; }

/* Earnings chart → premium plotted card */
html body #affiliate .aff-chart-card{
    position:relative; overflow:hidden;
    background:#fff !important; border:1px solid var(--ax-line) !important; border-radius:18px; padding:22px 24px 18px !important;
    box-shadow:0 1px 0 rgba(255,255,255,.85) inset, 0 22px 46px -32px rgba(20,184,166,.34) !important; }
html body #affiliate .aff-chart-title{ color:var(--ax-ink) !important; font-family:'Geist','Inter',sans-serif !important; font-weight:600; }
html body #affiliate .aff-chart-title i{ color:var(--ax-teal2) !important; }
html body #affiliate .aff-chart-sub{ color:var(--ax-muted) !important; font-family:'JetBrains Mono',monospace !important; }
html body #affiliate .aff-chart-svg{
    width:100% !important; height:190px !important; display:block; margin-top:6px; border-radius:10px;
    background:linear-gradient(180deg, rgba(20,184,166,.05), rgba(20,184,166,0) 62%) !important; }
html body #affiliate .aff-chart-svg line{ stroke:rgba(20,184,166,.16) !important; stroke-dasharray:3,5 !important; }
html body #affiliate .aff-chart-svg path[fill="none"]{
    stroke:#14b8a6 !important; stroke-width:2.25 !important; filter:drop-shadow(0 4px 7px rgba(20,184,166,.45)); }
html body #affiliate .aff-chart-svg #affAreaGrad stop:first-child{ stop-color:rgba(45,212,191,.40) !important; }
html body #affiliate .aff-chart-axis{ margin-top:10px; }
html body #affiliate .aff-chart-axis span{ color:var(--ax-muted) !important; font-family:'JetBrains Mono',monospace !important; font-size:.72rem !important; letter-spacing:.02em; }

/* Mobile: ribbon → clean 2-col tiles; shorter chart */
@media (max-width:640px){
    html body #affiliate .aff-stats-mini{ grid-template-columns:repeat(2,1fr) !important; gap:10px !important;
        background:transparent !important; border:0 !important; box-shadow:none !important; overflow:visible; }
    html body #affiliate .aff-stat-mini,
    html body #affiliate .aff-stat-mini:first-child{ border:1px solid var(--ax-line) !important; border-radius:14px !important; }
}
@media (max-width:600px){ html body #affiliate .aff-chart-svg{ height:150px !important; } }
/* ── P11 · Share & Earn → dark "broadcast console" ───────────────────────────────────
   Replaces the flat teal band with a deep instrument panel: a faint lattice grid plus a
   central glow and concentric "broadcast" rings rippling out from the link icon (your
   referral spreading to your audience). Echoes the lifetime-earnings gauge's dark language.
   Text flips to read on dark. */
html body #affiliate .aff-share-hero{
    position:relative; overflow:hidden; text-align:center; padding:32px 28px 28px !important;
    background:radial-gradient(125% 135% at 50% -12%, #0f1a1c 0%, #06070A 56%) !important;
    border:1px solid color-mix(in srgb, var(--ax-teal2) 26%, #06070A) !important; border-radius:22px !important;
    box-shadow:0 36px 80px -42px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.05) !important; }
html body #affiliate .aff-share-hero::before{
    content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
    background-image:linear-gradient(rgba(45,212,191,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(45,212,191,.05) 1px,transparent 1px);
    background-size:32px 32px;
    -webkit-mask:radial-gradient(85% 95% at 50% 0%, #000, transparent 76%); mask:radial-gradient(85% 95% at 50% 0%, #000, transparent 76%); }
html body #affiliate .aff-share-glow{
    position:absolute !important; top:-30px; left:50%; transform:translateX(-50%); width:560px; max-width:150%; height:360px; z-index:0; pointer-events:none;
    background:
        radial-gradient(circle at 50% 70px, rgba(45,212,191,.30), transparent 46%),
        repeating-radial-gradient(circle at 50% 70px, transparent 0 33px, rgba(45,212,191,.075) 33px 34px) !important;
    -webkit-mask:radial-gradient(72% 82% at 50% 34%, #000, transparent 70%); mask:radial-gradient(72% 82% at 50% 34%, #000, transparent 70%); }
html body #affiliate .aff-share-hero > *:not(.aff-share-glow){ position:relative; z-index:1; }
html body #affiliate .aff-share-icon{
    background:linear-gradient(135deg,#2dd4bf,#0d9488) !important; color:#06241f !important;
    box-shadow:0 12px 30px -8px rgba(45,212,191,.6), 0 0 0 6px rgba(45,212,191,.10) !important; }
html body #affiliate .aff-share-title{ color:#f4f8f7 !important; font-family:'Geist','Inter',sans-serif !important; }
html body #affiliate .aff-share-desc{ color:#9fb0ab !important; }
html body #affiliate .aff-share-desc strong{ color:#e6eae8 !important; }
html body #affiliate .aff-share-link-box{ background:rgba(255,255,255,.05) !important; border:1px solid rgba(255,255,255,.14) !important; }
html body #affiliate .aff-share-link-box input{ color:#7fe7d8 !important; background:transparent !important; font-family:'JetBrains Mono',monospace !important; }
html body #affiliate .aff-share-copy-btn{ background:linear-gradient(180deg,#34dcca,#0d9488) !important; color:#06241f !important; border:0 !important;
    box-shadow:0 10px 24px -10px rgba(45,212,191,.6) !important; }
html body #affiliate .aff-share-step{ color:#cdd6d2 !important; }
html body #affiliate .aff-share-step i{
    color:#7fe7d8 !important; background:rgba(45,212,191,.12) !important; border:1px solid rgba(45,212,191,.22) !important; }
html body #affiliate .aff-share-arrow{ color:rgba(127,231,216,.42) !important; }
/* ── P12 · Payout history list (app.js renderAffiliateDashboard) ── */
html body #affiliate .aff-payouts-card{ background:#fff !important; border:1px solid var(--ax-line) !important; border-radius:16px; padding:6px 8px; margin-bottom:18px; }
html body #affiliate .aff-payout-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:13px 14px; border-bottom:1px solid var(--ax-line); }
html body #affiliate .aff-payout-row:last-child{ border-bottom:0; }
html body #affiliate .aff-payout-row-amount{ font-family:'JetBrains Mono',monospace !important; font-weight:700; color:var(--ax-ink) !important; font-size:1.05rem; line-height:1.1; }
html body #affiliate .aff-payout-row-meta{ color:var(--ax-muted) !important; font-size:.8rem; margin-top:3px; }
html body #affiliate .aff-payout-status{ font-family:'JetBrains Mono',monospace !important; font-size:.68rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; padding:4px 11px; border-radius:999px; white-space:nowrap; }
html body #affiliate .aff-payout-status-paid{ color:#0f6b4c; background:color-mix(in srgb, var(--ax-green) 14%, #fff); border:1px solid color-mix(in srgb, var(--ax-green) 30%, var(--ax-line)); }
html body #affiliate .aff-payout-status-pending{ color:#b45309; background:color-mix(in srgb, var(--ax-amber) 14%, #fff); border:1px solid color-mix(in srgb, var(--ax-amber) 30%, var(--ax-line)); }
html body #affiliate .aff-payout-status-rejected{ color:#9b1c1c; background:rgba(239,68,68,.08); border:1px solid rgba(239,68,68,.28); }
/* R314 end */

/* ===================================================================
   R315 — Affiliate "Earnings Command Center" (hub)
   id-scoped to #affiliate; reuses --ax-* (R314). Append-only.
   =================================================================== */
html body #affiliate .aff-hub { display:flex; flex-direction:column; gap:18px; margin:22px 0; }

/* —— Hero chart —— */
html body #affiliate .aff-hub-chart {
    background:#fff; border:1px solid var(--ax-line); border-radius:16px; padding:20px 20px 14px;
    box-shadow:0 1px 2px rgba(6,7,10,.04);
}
html body #affiliate .aff-hub-chart-top { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; margin-bottom:14px; }
html body #affiliate .aff-hub-eyebrow { font:600 .72rem/1 'JetBrains Mono',monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--ax-teal2); }
html body #affiliate .aff-hub-chart-total { font:700 2.1rem/1.05 'JetBrains Mono',monospace; color:var(--ax-ink); margin-top:6px; letter-spacing:-.02em; }
html body #affiliate .aff-hub-chart-delta { margin-top:6px; }
html body #affiliate .aff-hub-delta { display:inline-flex; align-items:center; gap:5px; font:600 .78rem/1 'JetBrains Mono',monospace; padding:3px 8px; border-radius:7px; }
html body #affiliate .aff-hub-delta-up { color:var(--ax-green); background:rgba(21,160,111,.10); }
html body #affiliate .aff-hub-delta-down { color:#b4453a; background:rgba(180,69,58,.10); }
html body #affiliate .aff-hub-delta-flat { color:var(--ax-muted); background:rgba(91,102,96,.10); }
html body #affiliate .aff-hub-delta-cap { color:var(--ax-muted); font-weight:500; }

html body #affiliate .aff-hub-controls { display:flex; flex-direction:column; gap:8px; align-items:flex-end; }
html body #affiliate .aff-hub-seg { display:inline-flex; background:var(--ax-canvas); border:1px solid var(--ax-line); border-radius:9px; padding:3px; gap:2px; }
html body #affiliate .aff-hub-seg-btn {
    border:0; background:transparent; cursor:pointer; font:600 .76rem/1 'Inter',sans-serif; color:var(--ax-muted);
    padding:6px 11px; border-radius:6px; transition:color .16s ease, background .16s ease, transform .12s ease;
}
html body #affiliate .aff-hub-seg-btn:hover { color:var(--ax-ink); }
html body #affiliate .aff-hub-seg-btn:active { transform:scale(.96); }
html body #affiliate .aff-hub-seg-btn.is-active { background:var(--ax-ink); color:#fff; }

html body #affiliate .aff-hub-plot { position:relative; height:230px; width:100%; touch-action:pan-y; }
html body #affiliate .aff-hub-plot-svg { position:absolute; inset:0; }
html body #affiliate .aff-hub-chart-svg { width:100%; height:100%; display:block; }
html body #affiliate .aff-hub-grid { stroke:rgba(6,7,10,.07); stroke-width:1; stroke-dasharray:2 4; }
html body #affiliate .aff-hub-area { fill:url(#affHubArea); }
html body #affiliate .aff-hub-line { stroke:var(--ax-teal2); stroke-width:2.25; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
html body #affiliate .aff-hub-plot-overlay { position:absolute; inset:0; pointer-events:none; }
html body #affiliate .aff-hub-peak { position:absolute; transform:translate(-50%,-50%); }
html body #affiliate .aff-hub-peak-dot { display:block; width:9px; height:9px; border-radius:50%; background:var(--ax-amber); box-shadow:0 0 0 4px rgba(245,158,11,.18); }
html body #affiliate .aff-hub-peak-label { position:absolute; left:50%; bottom:14px; transform:translateX(-50%); white-space:nowrap; font:600 .68rem/1 'JetBrains Mono',monospace; color:#b45309; }
html body #affiliate .aff-hub-cross { position:absolute; top:0; bottom:0; width:0; pointer-events:none; }
html body #affiliate .aff-hub-cross-line { position:absolute; top:0; bottom:0; left:0; width:1px; background:rgba(20,184,166,.45); }
html body #affiliate .aff-hub-cross-dot { position:absolute; left:0; width:9px; height:9px; margin-left:-4.5px; margin-top:-4.5px; border-radius:50%; background:#fff; border:2.5px solid var(--ax-teal2); }
html body #affiliate .aff-hub-tip { position:absolute; top:-6px; transform:translate(-50%,-100%); background:var(--ax-ink); color:#fff; border-radius:8px; padding:6px 9px; display:flex; flex-direction:column; gap:1px; white-space:nowrap; box-shadow:0 6px 20px rgba(6,7,10,.22); }
html body #affiliate .aff-hub-tip.flip { transform:translate(-100%,-100%); }
html body #affiliate .aff-hub-tip-d { font:500 .64rem/1.1 'Inter',sans-serif; color:rgba(255,255,255,.66); }
html body #affiliate .aff-hub-tip-v { font:700 .82rem/1.1 'JetBrains Mono',monospace; }
html body #affiliate .aff-hub-axis { display:flex; justify-content:space-between; font:500 .68rem/1 'JetBrains Mono',monospace; color:var(--ax-muted); margin-top:8px; }

/* —— Trend strip —— */
html body #affiliate .aff-hub-trend { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
html body #affiliate .aff-hub-tile { background:#fff; border:1px solid var(--ax-line); border-radius:13px; padding:14px; display:flex; flex-direction:column; gap:8px; }
html body #affiliate .aff-hub-tile-top { display:flex; justify-content:space-between; align-items:center; gap:8px; }
html body #affiliate .aff-hub-tile-label { font:600 .72rem/1 'Inter',sans-serif; color:var(--ax-muted); display:inline-flex; align-items:center; gap:5px; }
html body #affiliate .aff-hub-tile-label i { color:var(--ax-teal2); font-size:.7rem; }
html body #affiliate .aff-hub-tile-value { font:700 1.32rem/1 'JetBrains Mono',monospace; color:var(--ax-ink); letter-spacing:-.01em; }
html body #affiliate .aff-hub-tile-foot { min-height:28px; display:flex; align-items:flex-end; }
html body #affiliate .aff-hub-tile-sub { font:500 .7rem/1.2 'Inter',sans-serif; color:var(--ax-muted); }
html body #affiliate .aff-hub-spark { width:100%; height:28px; display:block; }
html body #affiliate .aff-hub-spark-area { fill:rgba(20,184,166,.12); }
html body #affiliate .aff-hub-spark-line { stroke:var(--ax-teal2); stroke-width:1.6; vector-effect:non-scaling-stroke; }

/* —— Breakdown panels —— */
html body #affiliate .aff-hub-breakdown { display:grid; grid-template-columns:1.3fr 1fr; gap:14px; }
html body #affiliate .aff-hub-panel { background:#fff; border:1px solid var(--ax-line); border-radius:14px; padding:16px 18px; }
html body #affiliate .aff-hub-panel-title { font:700 .92rem/1.2 'Geist','Inter',sans-serif; color:var(--ax-ink); display:flex; align-items:center; gap:7px; }
html body #affiliate .aff-hub-panel-title i { color:var(--ax-teal2); }
html body #affiliate .aff-hub-panel-sub { font:500 .76rem/1.4 'Inter',sans-serif; color:var(--ax-muted); margin:3px 0 14px; }
html body #affiliate .aff-hub-panel-sub strong { color:var(--ax-ink); }
html body #affiliate .aff-hub-prod-list { display:flex; flex-direction:column; gap:11px; }
html body #affiliate .aff-hub-prod { display:grid; grid-template-columns:auto 1fr auto; gap:11px; align-items:center; }
html body #affiliate .aff-hub-prod-rank { width:22px; height:22px; border-radius:6px; background:var(--ax-canvas); color:var(--ax-muted); font:700 .72rem/22px 'JetBrains Mono',monospace; text-align:center; }
html body #affiliate .aff-hub-prod-name { font:600 .82rem/1.2 'Inter',sans-serif; color:var(--ax-ink); margin-bottom:5px; }
html body #affiliate .aff-hub-prod-bar { height:6px; border-radius:4px; background:var(--ax-canvas); overflow:hidden; }
html body #affiliate .aff-hub-prod-bar-fill { display:block; height:100%; width:var(--bar,0%); border-radius:4px; background:linear-gradient(90deg,var(--ax-teal2),var(--ax-teal)); }
html body #affiliate .aff-hub-prod-stat { text-align:right; }
html body #affiliate .aff-hub-prod-qty { font:700 .9rem/1 'JetBrains Mono',monospace; color:var(--ax-ink); }
html body #affiliate .aff-hub-prod-rev { font:500 .66rem/1.2 'JetBrains Mono',monospace; color:var(--ax-muted); }
html body #affiliate .aff-hub-mini-empty { font:500 .78rem/1.4 'Inter',sans-serif; color:var(--ax-muted); padding:8px 0; }
html body #affiliate .aff-hub-heat { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
html body #affiliate .aff-hub-heat-cell { aspect-ratio:1; border-radius:8px; display:flex; align-items:flex-end; justify-content:center; padding-bottom:5px; background:rgba(20,184,166,calc(.08 + var(--i,0) * .82)); border:1px solid var(--ax-line); }
html body #affiliate .aff-hub-heat-cell.is-peak { outline:2px solid var(--ax-amber); outline-offset:1px; }
html body #affiliate .aff-hub-heat-day { font:700 .66rem/1 'JetBrains Mono',monospace; color:var(--ax-ink); mix-blend-mode:luminosity; opacity:.7; }

/* —— Activity feed —— */
html body #affiliate .aff-hub-feed { background:#fff; border:1px solid var(--ax-line); border-radius:14px; padding:16px 18px; }
html body #affiliate .aff-hub-feed-list { margin-top:12px; display:flex; flex-direction:column; }
html body #affiliate .aff-hub-feed-row { display:grid; grid-template-columns:auto 54px 1fr auto; gap:12px; align-items:center; padding:11px 0; border-top:1px solid var(--ax-line); position:relative; }
html body #affiliate .aff-hub-feed-row:first-child { border-top:0; }
html body #affiliate .aff-hub-feed-dot { width:8px; height:8px; border-radius:50%; background:var(--ax-teal2); box-shadow:0 0 0 3px rgba(20,184,166,.14); }
html body #affiliate .aff-hub-feed-date { font:600 .74rem/1 'JetBrains Mono',monospace; color:var(--ax-muted); }
html body #affiliate .aff-hub-feed-buyer { font:600 .84rem/1.2 'Inter',sans-serif; color:var(--ax-ink); }
html body #affiliate .aff-hub-feed-items { font:500 .72rem/1.3 'Inter',sans-serif; color:var(--ax-muted); margin-top:2px; }
html body #affiliate .aff-hub-feed-amt { font:700 .92rem/1 'JetBrains Mono',monospace; color:var(--ax-green); }

/* —— Empty / onboarding state — LIGHT instrument placeholder.
   Deliberately the inverse of the dark Share & Earn console below it:
   light surface + ink CTA + a faint chart ghost, so the two cards read
   as distinct (one calm placeholder, one bold sharing hero). —— */
html body #affiliate .aff-hub-empty-card { position:relative; overflow:hidden; background:#fff; border:1px solid var(--ax-line); border-radius:16px; padding:52px 28px 48px; min-height:500px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:var(--ax-ink); box-shadow:0 1px 2px rgba(6,7,10,.04); } /* R336: taller empty state, content vertically centered */
html body #affiliate .aff-hub-empty-glow { position:absolute; inset:0; background:radial-gradient(72% 90% at 50% -12%, rgba(20,184,166,.10), transparent 72%); pointer-events:none; }
html body #affiliate .aff-hub-empty-chart { position:absolute; left:0; right:0; bottom:0; height:48%; opacity:.55; -webkit-mask-image:linear-gradient(to top, #000 35%, transparent); mask-image:linear-gradient(to top, #000 35%, transparent); }
html body #affiliate .aff-hub-empty-chart .aff-hub-line { stroke:var(--ax-teal2); opacity:.5; }
html body #affiliate .aff-hub-empty-chart .aff-hub-area { fill:rgba(20,184,166,.06); }
html body #affiliate .aff-hub-empty-icon { position:relative; width:52px; height:52px; margin:0 auto 16px; border-radius:14px; background:rgba(20,184,166,.10); border:1px solid color-mix(in srgb, var(--ax-teal2) 32%, var(--ax-line)); display:flex; align-items:center; justify-content:center; color:var(--ax-teal2); font-size:1.35rem; }
html body #affiliate .aff-hub-empty-title { position:relative; font:700 1.3rem/1.25 'Geist','Inter',sans-serif; letter-spacing:-.02em; margin:0 0 8px; color:var(--ax-ink); }
html body #affiliate .aff-hub-empty-copy { position:relative; max-width:48ch; margin:0 auto 20px; font:400 .9rem/1.6 'Inter',sans-serif; color:var(--ax-muted); }
html body #affiliate .aff-hub-empty-cta { position:relative; display:inline-flex; align-items:center; gap:8px; background:var(--ax-ink); color:#fff; border:0; border-radius:10px; padding:11px 19px; font:700 .88rem/1 'Inter',sans-serif; cursor:pointer; transition:transform .14s ease, background .16s ease; }
html body #affiliate .aff-hub-empty-cta:hover { background:#1c2622; }
html body #affiliate .aff-hub-empty-cta:active { transform:scale(.97); }
html body #affiliate .aff-hub-empty-cta i { color:var(--ax-teal2); }

/* —— Responsive —— */
@media (max-width:760px) {
    html body #affiliate .aff-hub-chart-top { flex-direction:column; }
    html body #affiliate .aff-hub-controls { align-items:stretch; width:100%; }
    html body #affiliate .aff-hub-seg { width:100%; }
    html body #affiliate .aff-hub-seg-btn { flex:1; }
    html body #affiliate .aff-hub-trend { grid-template-columns:repeat(2,1fr); }
    html body #affiliate .aff-hub-breakdown { grid-template-columns:1fr; }
    html body #affiliate .aff-hub-plot { height:200px; }
}
@media (max-width:430px) {
    html body #affiliate .aff-hub-trend { grid-template-columns:1fr 1fr; }
    html body #affiliate .aff-hub-chart-total { font-size:1.8rem; }
}

/* —— Font-family !important to beat the #main-content Inter normalizer (matches R314 pattern) —— */
html body #affiliate .aff-hub-eyebrow,
html body #affiliate .aff-hub-chart-total,
html body #affiliate .aff-hub-delta,
html body #affiliate .aff-hub-tip-v,
html body #affiliate .aff-hub-axis,
html body #affiliate .aff-hub-tile-value,
html body #affiliate .aff-hub-prod-rank,
html body #affiliate .aff-hub-prod-qty,
html body #affiliate .aff-hub-prod-rev,
html body #affiliate .aff-hub-heat-day,
html body #affiliate .aff-hub-feed-date,
html body #affiliate .aff-hub-feed-amt,
html body #affiliate .aff-hub-peak-label { font-family:'JetBrains Mono','SFMono-Regular',monospace !important; }
html body #affiliate .aff-hub-panel-title,
html body #affiliate .aff-hub-empty-title { font-family:'Geist','Inter',sans-serif !important; }

/* —— Reduced motion: JS draw-in/count-up is skipped; static is already complete —— */
@media (prefers-reduced-motion: reduce) {
    html body #affiliate .aff-hub-seg-btn,
    html body #affiliate .aff-hub-empty-cta { transition:none; }
}
/* R315 end */

/* ===================================================================
   R316 — Affiliate "Cash Out" status panel (readable payout progress)
   id-scoped #affiliate; reuses --ax-* (R314). Append-only.
   =================================================================== */
html body #affiliate .aff-cashout { background:#fff; border:1px solid var(--ax-line); border-radius:16px; padding:22px 24px; margin:24px 0 16px; box-shadow:0 1px 2px rgba(6,7,10,.04); }
html body #affiliate .aff-cashout.is-ready { border-color:color-mix(in srgb, var(--ax-green) 38%, var(--ax-line)); }
html body #affiliate .aff-cashout-top { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; flex-wrap:wrap; margin-bottom:18px; }
html body #affiliate .aff-cashout-eyebrow { font:600 .72rem/1 'JetBrains Mono',monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--ax-teal2); display:inline-flex; align-items:center; gap:7px; }
html body #affiliate .aff-cashout-balance { font:700 2.5rem/1.02 'JetBrains Mono',monospace; color:var(--ax-ink); letter-spacing:-.02em; margin-top:10px; }
html body #affiliate .aff-cashout-balance-label { font:500 .82rem/1 'Inter',sans-serif; color:var(--ax-muted); margin-top:5px; }
html body #affiliate .aff-cashout-status { text-align:right; max-width:300px; }
html body #affiliate .aff-cashout-pill { display:inline-flex; align-items:center; gap:6px; font:700 .82rem/1 'Inter',sans-serif; padding:8px 14px; border-radius:999px; white-space:nowrap; }
html body #affiliate .aff-cashout-pill-ready { color:#0f6b4c; background:color-mix(in srgb, var(--ax-green) 14%, #fff); border:1px solid color-mix(in srgb, var(--ax-green) 32%, var(--ax-line)); }
html body #affiliate .aff-cashout-pill-locked { color:#b45309; background:color-mix(in srgb, var(--ax-amber) 14%, #fff); border:1px solid color-mix(in srgb, var(--ax-amber) 32%, var(--ax-line)); }
html body #affiliate .aff-cashout-note { font:400 .82rem/1.5 'Inter',sans-serif; color:var(--ax-muted); margin-top:9px; }
html body #affiliate .aff-cashout-bar-track { position:relative; height:12px; border-radius:999px; background:var(--ax-canvas); border:1px solid var(--ax-line); overflow:hidden; }
html body #affiliate .aff-cashout-bar-fill { height:100%; border-radius:999px; min-width:6px; background:linear-gradient(90deg,var(--ax-teal2),var(--ax-teal)); box-shadow:0 0 10px rgba(20,184,166,.4); transition:width .9s cubic-bezier(.23,1,.32,1); }
html body #affiliate .aff-cashout.is-ready .aff-cashout-bar-fill { background:linear-gradient(90deg,var(--ax-green),#0d9488); box-shadow:0 0 10px rgba(21,160,111,.4); }
html body #affiliate .aff-cashout-bar-scale { display:flex; justify-content:space-between; align-items:center; margin-top:8px; font:500 .7rem/1 'JetBrains Mono',monospace; color:var(--ax-muted); }
html body #affiliate .aff-cashout-bar-min { color:var(--ax-ink); display:inline-flex; align-items:center; gap:5px; }
html body #affiliate .aff-cashout-bar-min i { color:var(--ax-teal2); font-size:.66rem; }
html body #affiliate .aff-cashout.is-ready .aff-cashout-bar-min i { color:var(--ax-green); }

/* font-family !important to beat the #main-content Inter normalizer */
html body #affiliate .aff-cashout-eyebrow,
html body #affiliate .aff-cashout-balance,
html body #affiliate .aff-cashout-bar-scale { font-family:'JetBrains Mono','SFMono-Regular',monospace !important; }

@media (max-width:640px) {
    html body #affiliate .aff-cashout-top { flex-direction:column; gap:14px; }
    html body #affiliate .aff-cashout-status { text-align:left; max-width:none; }
    html body #affiliate .aff-cashout-balance { font-size:2.1rem; }
}
/* R316 end */

/* ===================================================================
   R317 — "Withdraw" vault: a dark instrument room that wraps the whole
   payout zone (Cash Out → methods → history → settings) so it separates
   hard from the light analytics above. Light cards pop on the dark band.
   id-scoped #affiliate; reuses --ax-*. Append-only.
   =================================================================== */
html body #affiliate .aff-vault { position:relative; margin:34px 0 8px; padding:30px 26px 32px; border-radius:22px; background:#070A0C; border:1px solid #141d1b; box-shadow:0 24px 60px -34px rgba(6,7,10,.7); overflow:hidden; }
html body #affiliate .aff-vault > * { position:relative; z-index:1; }
html body #affiliate .aff-vault-glow { position:absolute; left:0; right:0; top:0; height:300px; z-index:0; pointer-events:none; background:radial-gradient(75% 100% at 50% 0%, rgba(20,184,166,.18), transparent 72%); }
html body #affiliate .aff-vault-head { text-align:center; margin-bottom:24px; }
html body #affiliate .aff-vault-eyebrow { font:600 .72rem/1 'JetBrains Mono',monospace; letter-spacing:.18em; text-transform:uppercase; color:var(--ax-teal); display:inline-flex; align-items:center; gap:7px; }
html body #affiliate .aff-vault-title { font:700 1.55rem/1.18 'Geist','Inter',sans-serif; letter-spacing:-.02em; color:#fff; margin-top:10px; }
html body #affiliate .aff-vault-sub { font:400 .9rem/1.5 'Inter',sans-serif; color:rgba(255,255,255,.6); margin-top:7px; max-width:52ch; margin-left:auto; margin-right:auto; }
html body #affiliate .aff-vault .aff-cashout { margin-top:0; }
html body #affiliate .aff-vault .aff-section-label { color:var(--ax-teal) !important; }

/* font-family !important to beat the #main-content Inter normalizer */
html body #affiliate .aff-vault-eyebrow { font-family:'JetBrains Mono','SFMono-Regular',monospace !important; }
html body #affiliate .aff-vault-title { font-family:'Geist','Inter',sans-serif !important; }

@media (max-width:640px) {
    html body #affiliate .aff-vault { padding:22px 14px 24px; border-radius:18px; }
    html body #affiliate .aff-vault-title { font-size:1.3rem; }
}
/* R317 end */

/* ===================================================================
   R318 — Make the "Withdraw" vault share the Share & Earn console's exact
   dark recipe (teal-tinted radial bg + 32px grid texture + teal-tinted
   border) so the two dark sections read as one coordinated instrument
   family instead of two mismatched blacks. Also tucks them closer.
   =================================================================== */
html body #affiliate .aff-vault {
    margin-top:18px;
    background:radial-gradient(120% 90% at 50% -8%, #0f1a1c 0%, #06070A 56%) !important;
    border:1px solid color-mix(in srgb, var(--ax-teal2) 26%, #06070A) !important;
    box-shadow:0 36px 80px -42px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
html body #affiliate .aff-vault::before {
    content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
    background-image:linear-gradient(rgba(45,212,191,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(45,212,191,.05) 1px,transparent 1px);
    background-size:32px 32px;
    -webkit-mask:radial-gradient(92% 55% at 50% 0%, #000, transparent 78%); mask:radial-gradient(92% 55% at 50% 0%, #000, transparent 78%);
}
/* R318 end */

/* ===================================================================
   R319 — "Earnings observatory" backdrop for the payout vault.
   A faint radar/sonar dial (range rings + a slow sweeping beam — on-theme
   for a money vault: an instrument scanning your earnings) sits over a soft
   teal aurora, all masked to the header so the white cards keep all focus.
   prefers-reduced-motion freezes the sweep.
   =================================================================== */
html body #affiliate .aff-vault { isolation:isolate; }

/* radar dial behind the header: static range rings + a slow sweeping beam */
html body #affiliate .aff-vault::after {
    content:''; position:absolute; z-index:0; pointer-events:none;
    top:-300px; left:50%; width:860px; height:860px; transform:translateX(-50%);
    border-radius:50%;
    background:
        conic-gradient(from 0deg, rgba(45,212,191,.16), rgba(45,212,191,.03) 30deg, transparent 66deg),
        repeating-radial-gradient(circle, transparent 0 34px, rgba(45,212,191,.075) 34px 35px);
    -webkit-mask:radial-gradient(circle, #000 3%, rgba(0,0,0,.62) 33%, transparent 58%);
            mask:radial-gradient(circle, #000 3%, rgba(0,0,0,.62) 33%, transparent 58%);
    will-change:transform;
    animation:aff-vault-radar 20s linear infinite;
}
@keyframes aff-vault-radar { to { transform:translateX(-50%) rotate(360deg); } }

/* soft static teal aurora for depth behind the header */
html body #affiliate .aff-vault-glow {
    top:-140px !important; bottom:auto !important; height:560px !important; z-index:0;
    background:
        radial-gradient(38% 58% at 20% 16%, rgba(20,184,166,.20), transparent 62%),
        radial-gradient(40% 54% at 84% 10%, rgba(45,212,191,.16), transparent 62%),
        radial-gradient(64% 72% at 50% -4%, rgba(20,184,166,.15), transparent 70%) !important;
}

@media (prefers-reduced-motion: reduce) {
    html body #affiliate .aff-vault::after { animation:none; }
}
/* R319 end */

/* ===================================================================
   R320 — LIGHT "mint ledger" backdrop for the payout vault (replaces the
   dark instrument theme). A fresh mint-teal mesh + faint grid + a soft
   concentric "watermark seal" behind the header: distinct from the neutral
   canvas, premium, money-themed, and white cards keep their pop. Text flips
   to ink. prefers-reduced-motion freezes the bloom drift.
   =================================================================== */
html body #affiliate .aff-vault {
    background:
        radial-gradient(60% 50% at 12% -6%, rgba(45,212,191,.16), transparent 60%),
        radial-gradient(55% 48% at 92% -2%, rgba(20,184,166,.14), transparent 60%),
        radial-gradient(95% 70% at 50% 112%, rgba(45,212,191,.10), transparent 62%),
        linear-gradient(180deg, #e6f3ef 0%, #f1f9f6 52%, #e9f5f1 100%) !important;
    border:1px solid color-mix(in srgb, var(--ax-teal2) 26%, var(--ax-line)) !important;
    box-shadow:0 22px 54px -34px rgba(20,184,166,.34) !important;
}
/* faint teal instrument grid (darker teal so it reads on light) */
html body #affiliate .aff-vault::before {
    background-image:
        linear-gradient(rgba(20,184,166,.07) 1px,transparent 1px),
        linear-gradient(90deg,rgba(20,184,166,.07) 1px,transparent 1px) !important;
}
/* concentric "watermark seal" behind the header (static, banknote-ish) */
html body #affiliate .aff-vault::after {
    background:
        repeating-radial-gradient(circle, transparent 0 30px, rgba(20,184,166,.07) 30px 31px),
        conic-gradient(from 0deg, transparent 0 6deg, rgba(20,184,166,.045) 6deg 6.5deg) !important;
    -webkit-mask:radial-gradient(circle, #000 4%, rgba(0,0,0,.5) 30%, transparent 56%) !important;
            mask:radial-gradient(circle, #000 4%, rgba(0,0,0,.5) 30%, transparent 56%) !important;
    animation:none !important;
}
/* soft mint bloom for depth (gentle drift) */
html body #affiliate .aff-vault-glow {
    background:
        radial-gradient(40% 56% at 22% 14%, rgba(45,212,191,.22), transparent 62%),
        radial-gradient(42% 52% at 82% 8%, rgba(20,184,166,.17), transparent 62%),
        radial-gradient(66% 70% at 50% -6%, rgba(45,212,191,.15), transparent 70%) !important;
    animation:aff-vault-bloom 22s ease-in-out infinite alternate;
}
@keyframes aff-vault-bloom {
    0%   { transform:translate3d(-2%, 0, 0) scale(1); }
    100% { transform:translate3d(2%, 1.5%, 0) scale(1.05); }
}
/* flip header text + labels to ink / darker teal for the light surface */
html body #affiliate .aff-vault-title { color:var(--ax-ink) !important; }
html body #affiliate .aff-vault-sub { color:var(--ax-muted) !important; }
html body #affiliate .aff-vault-eyebrow { color:var(--ax-teal2) !important; }
html body #affiliate .aff-vault .aff-section-label { color:var(--ax-teal2) !important; }

@media (prefers-reduced-motion: reduce) {
    html body #affiliate .aff-vault-glow { animation:none !important; }
}
/* R320 end */

/* ===================================================================
   R321 — Drop the tier (Rookie/Pro) badge from the affiliate header and
   replace it with a bigger, prominent referral card: big code + the full
   share link, both copyable. Card drops to a full-width row under the greeting.
   =================================================================== */
html body #affiliate .aff-dash-header.aff-dash-header-v3 { flex-wrap:wrap; }
html body #affiliate .aff-dash-header.aff-dash-header-v3 > .aff-dash-greeting { flex:1 1 auto; }
html body #affiliate .aff-dash-header.aff-dash-header-v3 > .aff-refcard { position:relative; z-index:1; }

html body #affiliate .aff-refcard {
    flex:1 1 100%; margin-top:22px;
    background:linear-gradient(135deg, #fff, color-mix(in srgb, var(--ax-teal2) 5%, #fff));
    border:1px solid color-mix(in srgb, var(--ax-teal2) 30%, var(--ax-line));
    border-radius:14px; padding:18px 20px 20px;
    box-shadow:0 1px 2px rgba(6,7,10,.04);
}
html body #affiliate .aff-refcard-eyebrow { font:600 .72rem/1 'JetBrains Mono',monospace !important; letter-spacing:.14em; text-transform:uppercase; color:var(--ax-teal2); display:inline-flex; align-items:center; gap:7px; }
html body #affiliate .aff-refcard-coderow { display:flex; align-items:center; gap:14px; margin-top:11px; }
html body #affiliate .aff-refcard-code { font:700 2rem/1 'JetBrains Mono',monospace !important; letter-spacing:.05em; color:var(--ax-ink); }
html body #affiliate .aff-refcard-codebtn { flex:0 0 auto; width:40px; height:40px; border-radius:10px; border:1px solid var(--ax-line); background:var(--ax-canvas); color:var(--ax-teal2); cursor:pointer; font-size:1rem; display:inline-flex; align-items:center; justify-content:center; transition:transform .12s ease, background .16s ease, color .16s ease; }
html body #affiliate .aff-refcard-codebtn:hover { background:var(--ax-teal2); color:#fff; }
html body #affiliate .aff-refcard-codebtn:active { transform:scale(.94); }
html body #affiliate .aff-refcard-linkrow { display:flex; align-items:center; gap:10px; margin-top:16px; background:var(--ax-canvas); border:1px solid var(--ax-line); border-radius:11px; padding:6px 6px 6px 14px; }
html body #affiliate .aff-refcard-linkicon { color:var(--ax-teal2); font-size:.86rem; flex:0 0 auto; }
html body #affiliate .aff-refcard-url { flex:1 1 auto; min-width:0; border:0; background:transparent; outline:none; font:500 .92rem/1 'JetBrains Mono',monospace !important; color:var(--ax-muted); padding:9px 0; text-overflow:ellipsis; }
html body #affiliate .aff-refcard-linkbtn { flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; border:0; cursor:pointer; background:var(--ax-ink); color:#fff; border-radius:8px; padding:9px 14px; font:700 .82rem/1 'Inter',sans-serif; transition:transform .12s ease, background .16s ease; white-space:nowrap; }
html body #affiliate .aff-refcard-linkbtn i { color:var(--ax-teal2); }
html body #affiliate .aff-refcard-linkbtn:hover { background:#1c2622; }
html body #affiliate .aff-refcard-linkbtn:active { transform:scale(.97); }

@media (max-width:600px) {
    html body #affiliate .aff-refcard-code { font-size:1.55rem; word-break:break-all; }
    html body #affiliate .aff-refcard-linkrow { flex-wrap:wrap; padding:10px; }
    html body #affiliate .aff-refcard-url { flex:1 1 100%; padding:2px 4px; }
    html body #affiliate .aff-refcard-linkbtn { flex:1 1 100%; justify-content:center; }
}
/* R321 end */

/* ===================================================================
   R322 — Drop the green/mint vault background. Use a clean technical
   GRAPH-PAPER grid on a cool-neutral base, with a faint ascending
   "earnings" curve plotted across the header band as the signature
   graphic. Grid-forward, unique, on-theme; white cards keep their pop.
   =================================================================== */
html body #affiliate .aff-vault {
    background:linear-gradient(180deg, #eef2f5 0%, #f3f6f8 58%, #ecf0f3 100%) !important;
    border:1px solid #dde4e9 !important;
    box-shadow:0 20px 50px -36px rgba(15,23,42,.28) !important;
}
/* two-tier graph-paper grid (fine + major lines) — the background */
html body #affiliate .aff-vault::before {
    background-image:
        linear-gradient(rgba(15,23,42,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15,23,42,.05) 1px, transparent 1px),
        linear-gradient(rgba(15,23,42,.085) 1.4px, transparent 1.4px),
        linear-gradient(90deg, rgba(15,23,42,.085) 1.4px, transparent 1.4px) !important;
    background-size:28px 28px, 28px 28px, 140px 140px, 140px 140px !important;
    background-position:0 0 !important;
    -webkit-mask:radial-gradient(135% 95% at 50% 0%, #000 62%, transparent 100%) !important;
            mask:radial-gradient(135% 95% at 50% 0%, #000 62%, transparent 100%) !important;
}
/* ascending earnings curve graphic across the header band */
html body #affiliate .aff-vault::after {
    top:0 !important; left:0 !important; right:0 !important; bottom:auto !important;
    width:auto !important; height:290px !important; transform:none !important; border-radius:0 !important;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 290' preserveAspectRatio='none'%3E%3Cpath d='M0,240 L120,226 L240,236 L360,190 L480,208 L600,154 L720,172 L840,108 L960,128 L1080,62 L1200,40 L1200,290 L0,290 Z' fill='%2314b8a6' fill-opacity='0.05'/%3E%3Cpath d='M0,240 L120,226 L240,236 L360,190 L480,208 L600,154 L720,172 L840,108 L960,128 L1080,62 L1200,40' fill='none' stroke='%2314b8a6' stroke-opacity='0.3' stroke-width='2.5'/%3E%3C/svg%3E") no-repeat !important;
    background-size:100% 100% !important;
    -webkit-mask:linear-gradient(180deg, #000 52%, transparent) !important;
            mask:linear-gradient(180deg, #000 52%, transparent) !important;
    animation:none !important;
}
/* soft neutral depth glow at the top */
html body #affiliate .aff-vault-glow {
    background:radial-gradient(72% 70% at 50% -10%, rgba(20,184,166,.10), transparent 70%) !important;
    animation:none !important;
}
/* R322 end */

/* ===================================================================
   R323 — vault: swap the ascending-line graphic (it duplicated the empty
   hub card) for a distinct "earnings peak" plot — discrete ascending data
   nodes + a target crosshair on the peak, in the upper-right corner. Also
   fade the grid out below the payout cards so the lower settings text stays
   readable on the grid.
   =================================================================== */
/* fade the graph-paper grid out toward the bottom (clean lower/settings area) */
html body #affiliate .aff-vault::before {
    -webkit-mask:linear-gradient(180deg, #000 0%, #000 36%, rgba(0,0,0,.20) 62%, transparent 80%) !important;
            mask:linear-gradient(180deg, #000 0%, #000 36%, rgba(0,0,0,.20) 62%, transparent 80%) !important;
}
/* distinct plotted "earnings peak" graphic in the top-right corner */
html body #affiliate .aff-vault::after {
    top:16px !important; left:auto !important; right:10px !important; bottom:auto !important;
    width:430px !important; max-width:46% !important; height:246px !important; transform:none !important; border-radius:0 !important;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='380' height='230' viewBox='0 0 380 230'%3E%3Ccircle cx='40' cy='180' r='5' fill='%2314b8a6' fill-opacity='0.40'/%3E%3Ccircle cx='115' cy='150' r='5' fill='%2314b8a6' fill-opacity='0.48'/%3E%3Ccircle cx='190' cy='162' r='5' fill='%2314b8a6' fill-opacity='0.38'/%3E%3Ccircle cx='265' cy='100' r='6' fill='%2314b8a6' fill-opacity='0.55'/%3E%3Ccircle cx='340' cy='52' r='8' fill='%2314b8a6' fill-opacity='0.75'/%3E%3Ccircle cx='340' cy='52' r='19' fill='none' stroke='%2314b8a6' stroke-opacity='0.32' stroke-width='1.3'/%3E%3Cpath d='M340,30 L340,74 M318,52 L362,52' stroke='%2314b8a6' stroke-opacity='0.32' stroke-width='1.3'/%3E%3C/svg%3E") no-repeat top right !important;
    background-size:contain !important;
    -webkit-mask:none !important; mask:none !important;
    animation:none !important;
}
/* R323 end */

/* ===================================================================
   R324 — Drop the graph-paper grid (it hurt text readability). Clean,
   calm light panel instead: a soft teal glow behind the header + the
   small corner accent (away from all text), framed by a border + shadow
   so it still reads as a distinct section. All body text on a clean surface.
   =================================================================== */
html body #affiliate .aff-vault {
    background:linear-gradient(180deg, #eef3f5 0%, #f6f9fb 40%, #f4f8f9 100%) !important;
    border:1px solid #e2e8ec !important;
    box-shadow:0 18px 46px -34px rgba(15,23,42,.22) !important;
}
/* remove the grid entirely */
html body #affiliate .aff-vault::before { display:none !important; }
/* soft teal glow behind the header only (fades well before the cards) */
html body #affiliate .aff-vault-glow {
    top:-120px !important; height:420px !important;
    background:radial-gradient(58% 60% at 50% 0%, rgba(20,184,166,.13), transparent 66%) !important;
    animation:none !important;
}
/* keep the corner accent but a touch quieter */
html body #affiliate .aff-vault::after { opacity:.85 !important; }
/* R324 end */


/* ===================== R325 — Affiliate Flight Deck (cockpit header) ===================== */
html body #affiliate .aff-deck{
  --deck-ink:#0b1416; --deck-mut:#5b6b6e; --deck-line:rgba(13,30,32,.10);
  --deck-teal:#14b8a6; --deck-teal-2:#2dd4bf;
  display:flex; flex-direction:column; gap:16px; margin:0 0 22px;
}
html body #affiliate .aff-deck-row1{ display:grid; grid-template-columns:1fr minmax(300px,420px); gap:16px; align-items:stretch; }
html body #affiliate .aff-deck-row2{ display:grid; grid-template-columns:1.45fr 1fr; gap:16px; align-items:stretch; }

/* shared light surface */
html body #affiliate .aff-deck-id,
html body #affiliate .aff-deck-dial{
  background:linear-gradient(180deg,#ffffff,#f6f9fb);
  border:1px solid var(--deck-line); border-radius:16px;
  box-shadow:0 1px 2px rgba(13,30,32,.04), 0 8px 24px -16px rgba(13,30,32,.18);
}
/* keep R321 refcard look; just fit it to the grid cell */
html body #affiliate .aff-deck .aff-refcard{ margin:0; height:100%; }

/* Zone 1 — identity */
html body #affiliate .aff-deck-id{ display:flex; gap:16px; align-items:center; padding:20px 22px; }
html body #affiliate .aff-deck-avatar{
  width:54px; height:54px; flex:0 0 54px; border-radius:14px; display:grid; place-items:center;
  background:radial-gradient(120% 120% at 30% 20%,#0f2a28,#06070A); color:var(--deck-teal-2);
  font-size:1.25rem; box-shadow:inset 0 0 0 1px rgba(45,212,191,.22);
}
html body #affiliate .aff-deck-hello{ margin:0; font-family:'Geist',sans-serif!important; font-weight:600; font-size:1.32rem; letter-spacing:-.02em; color:var(--deck-ink); line-height:1.15; }
html body #affiliate .aff-deck-hello-pre{ color:var(--deck-mut); font-weight:500; }
html body #affiliate .aff-deck-status{ margin-top:5px; font-size:.82rem; color:#43585b; display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
html body #affiliate .aff-deck-dot{ width:7px; height:7px; border-radius:50%; background:var(--deck-teal); box-shadow:0 0 0 3px rgba(20,184,166,.18); }
html body #affiliate .aff-deck-live{ color:var(--deck-teal); font-weight:600; }
html body #affiliate .aff-deck-telemetry{ margin-top:8px; font-family:'JetBrains Mono',monospace!important; font-size:.74rem; letter-spacing:.01em; color:#6a797c; font-variant-numeric:tabular-nums; }

/* Zone 2 — dark earnings instrument */
html body #affiliate .aff-deck-hero{
  position:relative; overflow:hidden; border-radius:16px; padding:22px 24px; min-height:152px;
  background:radial-gradient(140% 120% at 12% 0%,#0c1c1a 0%,#06070A 60%);
  border:1px solid rgba(45,212,191,.14);
  box-shadow:0 18px 44px -24px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.02);
  display:flex; flex-direction:column; justify-content:center;
}
html body #affiliate .aff-deck-hero-aura{ position:absolute; inset:auto -20% -60% -10%; height:80%; background:radial-gradient(60% 80% at 50% 100%,rgba(45,212,191,.16),transparent 70%); pointer-events:none; }
html body #affiliate .aff-deck-hero-top{ position:relative; z-index:1; display:flex; justify-content:space-between; align-items:center; }
html body #affiliate .aff-deck-hero-label{ font-family:'JetBrains Mono',monospace!important; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:#7fded0; display:flex; align-items:center; gap:7px; }
html body #affiliate .aff-deck-hero-livedot{ width:8px; height:8px; border-radius:50%; background:var(--deck-teal-2); box-shadow:0 0 0 0 rgba(45,212,191,.5); animation:affDeckPulse 2.4s ease-out infinite; }
html body #affiliate .aff-deck-hero-value{ position:relative; z-index:1; font-family:'JetBrains Mono',monospace!important; font-weight:700; font-size:2.6rem; letter-spacing:-.02em; color:#f2fbf9; line-height:1.05; margin:8px 0 6px; font-variant-numeric:tabular-nums; }
html body #affiliate .aff-deck-hero-momentum{ position:relative; z-index:1; font-size:.9rem; color:#b9ccc9; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
html body #affiliate .aff-deck-hero-empty{ color:#9fb4b1; font-size:.86rem; }
html body #affiliate .aff-deck-chip{ font-family:'JetBrains Mono',monospace!important; font-size:.72rem; font-weight:600; padding:3px 8px; border-radius:999px; display:inline-flex; align-items:center; gap:5px; }
html body #affiliate .aff-deck-chip.is-up{ color:#04110f; background:var(--deck-teal-2); }
html body #affiliate .aff-deck-chip.is-down{ color:#cdebe6; background:rgba(45,212,191,.14); }
html body #affiliate .aff-deck-trail{ position:absolute; left:0; right:0; bottom:0; width:100%; height:42px; z-index:0; opacity:.92; }
html body #affiliate .aff-deck-trail-line{ stroke:var(--deck-teal-2); stroke-width:1.4; vector-effect:non-scaling-stroke; }
html body #affiliate .aff-deck-trail-area{ fill:rgba(45,212,191,.10); }

/* Zone 3 — payout dial */
html body #affiliate .aff-deck-dial{ padding:20px 22px; display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; }
html body #affiliate .aff-deck-dial-ringwrap{ position:relative; width:130px; height:130px; }
html body #affiliate .aff-deck-ring{ width:130px; height:130px; transform:rotate(-90deg); }
html body #affiliate .aff-deck-ring-track{ fill:none; stroke:rgba(13,30,32,.08); stroke-width:9; }
html body #affiliate .aff-deck-ring-fill{ fill:none; stroke:var(--deck-teal); stroke-width:9; stroke-linecap:round; }
html body #affiliate .aff-deck-ring-center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
html body #affiliate .aff-deck-ring-val{ font-family:'JetBrains Mono',monospace!important; font-weight:700; font-size:1.4rem; color:var(--deck-ink); font-variant-numeric:tabular-nums; }
html body #affiliate .aff-deck-ring-cap{ font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--deck-mut); margin-top:2px; }
html body #affiliate .aff-deck-cashout{ font-family:'Geist',sans-serif!important; font-weight:600; font-size:.92rem; cursor:pointer; width:100%; padding:12px 16px; border:none; border-radius:12px; color:#04110f; background:linear-gradient(180deg,var(--deck-teal-2),var(--deck-teal)); box-shadow:0 10px 22px -12px rgba(20,184,166,.7); transition:transform .14s cubic-bezier(.23,1,.32,1), box-shadow .2s; }
html body #affiliate .aff-deck-cashout:hover{ box-shadow:0 14px 28px -12px rgba(20,184,166,.85); }
html body #affiliate .aff-deck-cashout:active{ transform:scale(.97); }
html body #affiliate .aff-deck-tounlock{ font-family:'JetBrains Mono',monospace!important; font-size:.82rem; color:#43585b; }
html body #affiliate .aff-deck-facts{ display:flex; flex-direction:column; gap:6px; width:100%; }
html body #affiliate .aff-deck-fact{ font-size:.78rem; color:#52666a; display:flex; align-items:center; gap:8px; justify-content:center; }
html body #affiliate .aff-deck-fact strong{ color:var(--deck-ink); font-family:'JetBrains Mono',monospace!important; font-variant-numeric:tabular-nums; }
html body #affiliate .aff-deck-fact i{ color:var(--deck-teal); }

@keyframes affDeckPulse{ 0%{box-shadow:0 0 0 0 rgba(45,212,191,.5);} 70%{box-shadow:0 0 0 7px rgba(45,212,191,0);} 100%{box-shadow:0 0 0 0 rgba(45,212,191,0);} }

@media (max-width:880px){
  html body #affiliate .aff-deck-row1,
  html body #affiliate .aff-deck-row2{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  html body #affiliate .aff-deck-id{ padding:16px; }
  html body #affiliate .aff-deck-hero-value{ font-size:2.1rem; }
  html body #affiliate .aff-deck-dial-ringwrap,
  html body #affiliate .aff-deck-ring{ width:118px; height:118px; }
}
@media (prefers-reduced-motion:reduce){
  html body #affiliate .aff-deck-hero-livedot{ animation:none; }
}
/* ===================== /R325 ===================== */


/* ===================== R326 — Flight Deck identity-card polish ===================== */
/* Stronger greeting hierarchy (eyebrow + bigger name), avatar "online" indicator,
   icon stat-chips that fill the lonely "0 sales" state, and a soft teal corner glow.
   Identity card only — the referral card (R321) is untouched. */
html body #affiliate .aff-deck-id{
  position:relative; overflow:hidden; align-items:center; gap:17px; padding:22px 24px;
  background:
    radial-gradient(125% 135% at 100% 0%, rgba(45,212,191,.09), transparent 52%),
    linear-gradient(180deg,#ffffff,#f6f9fb);
}
/* premium sheen sweep — a subtle light "moving piece" crossing the card on a slow loop */
html body #affiliate .aff-deck-id::after{
  content:''; position:absolute; top:0; bottom:0; left:0; width:55%; pointer-events:none; z-index:2;
  background:linear-gradient(105deg, transparent 0%, rgba(255,255,255,.5) 46%, rgba(45,212,191,.2) 54%, transparent 100%);
  transform:translateX(-165%) skewX(-14deg); animation:affDeckSheen 7.5s ease-in-out infinite;
}
@keyframes affDeckSheen{ 0%{transform:translateX(-165%) skewX(-14deg);} 16%{transform:translateX(235%) skewX(-14deg);} 100%{transform:translateX(235%) skewX(-14deg);} }
/* avatar + animated online dot */
html body #affiliate .aff-deck-avatar{
  position:relative; width:58px; height:58px; flex:0 0 58px; border-radius:15px;
  box-shadow:inset 0 0 0 1px rgba(45,212,191,.26), 0 9px 22px -12px rgba(6,7,10,.6);
}
html body #affiliate .aff-deck-avatar-dot{
  position:absolute; right:-3px; bottom:-3px; width:15px; height:15px; border-radius:50%;
  background:var(--deck-teal-2); border:2.5px solid #fff;
  box-shadow:0 0 0 0 rgba(45,212,191,.55); animation:affDeckOnline 2.6s ease-out infinite;
}
@keyframes affDeckOnline{ 0%{box-shadow:0 0 0 0 rgba(45,212,191,.5);} 70%{box-shadow:0 0 0 6px rgba(45,212,191,0);} 100%{box-shadow:0 0 0 0 rgba(45,212,191,0);} }
/* greeting: small eyebrow over a bigger, bolder name */
html body #affiliate .aff-deck-hello{ display:flex; flex-direction:column; gap:1px; margin:0; }
html body #affiliate .aff-deck-hello-pre{
  font-family:'Geist',sans-serif!important; font-weight:500; font-size:.85rem; letter-spacing:0; color:#7c8c8e; }
html body #affiliate .aff-deck-hello-name{
  font-family:'Geist',sans-serif!important; font-weight:700; font-size:1.5rem; line-height:1.08;
  letter-spacing:-.022em; color:#0b1416; text-wrap:balance; }
/* status with a gently pulsing live dot */
html body #affiliate .aff-deck-status{ margin-top:9px; font-size:.82rem; font-weight:500; color:#485c5f; }
html body #affiliate .aff-deck-status .aff-deck-dot{ animation:affDeckOnline 2.6s ease-out infinite; }
/* icon stat-chips */
html body #affiliate .aff-deck-stats{ margin-top:15px; display:flex; flex-wrap:wrap; gap:9px; }
html body #affiliate .aff-deck-chip2{
  display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:11px;
  font-family:'JetBrains Mono',monospace!important; font-size:.8rem; font-weight:500; color:#2c3e41;
  background:linear-gradient(180deg, rgba(45,212,191,.13), rgba(45,212,191,.05));
  border:1px solid rgba(20,184,166,.22); box-shadow:0 1px 2px rgba(13,30,32,.045);
  font-variant-numeric:tabular-nums; transition:transform .16s cubic-bezier(.23,1,.32,1), box-shadow .22s ease, border-color .22s ease; }
html body #affiliate .aff-deck-chip2:hover{ transform:translateY(-1px); box-shadow:0 7px 16px -9px rgba(20,184,166,.45); border-color:rgba(20,184,166,.36); }
html body #affiliate .aff-deck-chip2 i{ color:var(--deck-teal); font-size:.84rem; }
/* keep the refcard vertically centered so it balances the taller identity card */
html body #affiliate .aff-deck .aff-refcard{ display:flex; flex-direction:column; justify-content:center; }
@media (prefers-reduced-motion:reduce){
  html body #affiliate .aff-deck-avatar-dot,
  html body #affiliate .aff-deck-status .aff-deck-dot{ animation:none; }
  html body #affiliate .aff-deck-id::after{ animation:none; opacity:0; }
}
/* ===================== /R326 ===================== */


/* ===================== R327 — header cards stacked full-width ===================== */
/* Put the identity + referral cards on their own full-width lines (no more side-by-side
   squeeze). Identity = greeting left / chips right; referral = code left / share-link right. */
html body #affiliate .aff-deck-row1{ grid-template-columns:1fr; gap:16px; }

/* Identity card — greeting cluster left, stat-chips right */
html body #affiliate .aff-deck-id{ justify-content:space-between; gap:24px; padding:24px 28px; }
html body #affiliate .aff-deck-id-main{ display:flex; align-items:center; gap:18px; min-width:0; }
html body #affiliate .aff-deck-hello-name{ font-size:1.62rem; }
html body #affiliate .aff-deck-stats{ margin-top:0; flex:0 0 auto; }

/* Referral card — eyebrow on top, code left + share-link right (CSS grid; no markup change) */
html body #affiliate .aff-deck .aff-refcard{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  grid-template-areas:"eyebrow eyebrow" "code link";
  column-gap:30px; row-gap:15px; align-items:center; padding:22px 28px; }
html body #affiliate .aff-deck .aff-refcard-eyebrow{ grid-area:eyebrow; }
html body #affiliate .aff-deck .aff-refcard-coderow{ grid-area:code; margin-top:0; }
html body #affiliate .aff-deck .aff-refcard-linkrow{ grid-area:link; margin-top:0; }
html body #affiliate .aff-deck .aff-refcard-code{ font-size:1.78rem !important; }

@media (max-width:760px){
  html body #affiliate .aff-deck-id{ flex-direction:column; align-items:flex-start; gap:15px; }
  html body #affiliate .aff-deck-stats{ flex-wrap:wrap; }
  html body #affiliate .aff-deck .aff-refcard{ grid-template-columns:1fr; grid-template-areas:"eyebrow" "code" "link"; }
}
/* ===================== /R327 ===================== */


/* ===================== R328 — bigger identity card ===================== */
/* Scale the whole identity card up (it was wide but short): more padding/height,
   larger avatar, bigger name, chunkier chips. CSS-only. */
html body #affiliate .aff-deck-id{ padding:32px 34px; }
html body #affiliate .aff-deck-id-main{ gap:22px; }
html body #affiliate .aff-deck-avatar{ width:70px; height:70px; flex:0 0 70px; border-radius:18px; font-size:1.55rem; }
html body #affiliate .aff-deck-avatar-dot{ width:17px; height:17px; border-width:3px; }
html body #affiliate .aff-deck-hello-pre{ font-size:.95rem; }
html body #affiliate .aff-deck-hello-name{ font-size:1.95rem; }
html body #affiliate .aff-deck-status{ margin-top:11px; font-size:.92rem; }
html body #affiliate .aff-deck-status .aff-deck-dot{ width:8px; height:8px; }
html body #affiliate .aff-deck-stats{ gap:11px; }
html body #affiliate .aff-deck-chip2{ padding:10px 16px; font-size:.86rem; border-radius:12px; }
html body #affiliate .aff-deck-chip2 i{ font-size:.9rem; }

@media (max-width:760px){
  html body #affiliate .aff-deck-id{ padding:22px; }
  html body #affiliate .aff-deck-avatar{ width:60px; height:60px; flex:0 0 60px; font-size:1.35rem; }
  html body #affiliate .aff-deck-hello-name{ font-size:1.62rem; }
}
/* ===================== /R328 ===================== */


/* ===================== R329 — identity card: prominent stat group + bigger ===================== */
/* Replace the small chips with a prominent 3-stat group (total sales · your commission ·
   buyer discount) and scale the card up further. */
html body #affiliate .aff-deck-id{ padding:38px 40px; gap:30px; }
html body #affiliate .aff-deck-id-main{ gap:24px; }
html body #affiliate .aff-deck-avatar{ width:78px; height:78px; flex:0 0 78px; border-radius:20px; font-size:1.7rem; }
html body #affiliate .aff-deck-avatar-dot{ width:18px; height:18px; }
html body #affiliate .aff-deck-hello-pre{ font-size:1rem; }
html body #affiliate .aff-deck-hello-name{ font-size:2.1rem; }
html body #affiliate .aff-deck-status{ margin-top:13px; font-size:.96rem; }

/* prominent stat group: one cohesive panel, three big stats split by hairline dividers */
html body #affiliate .aff-deck-statgroup{
  display:flex; align-items:stretch; flex:0 0 auto;
  background:linear-gradient(180deg,#fbfdfd,#eef6f5);
  border:1px solid rgba(20,184,166,.20); border-radius:18px; padding:6px;
  box-shadow:0 1px 2px rgba(13,30,32,.05); }
html body #affiliate .aff-deck-stat3{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:14px 26px; min-width:106px; }
html body #affiliate .aff-deck-stat3-ico{ color:var(--deck-teal); font-size:1rem; margin-bottom:9px; }
html body #affiliate .aff-deck-stat3-v{ font-family:'JetBrains Mono',monospace!important; font-weight:700; font-size:1.85rem; line-height:1; letter-spacing:-.01em; color:#0b1416; font-variant-numeric:tabular-nums; }
html body #affiliate .aff-deck-stat3-l{ font-family:'JetBrains Mono',monospace!important; font-size:.68rem; letter-spacing:.07em; text-transform:uppercase; color:#5d6e71; margin-top:8px; white-space:nowrap; }
html body #affiliate .aff-deck-stat3-div{ width:1px; align-self:stretch; margin:12px 0; background:linear-gradient(180deg, transparent, rgba(20,184,166,.26), transparent); }

@media (max-width:760px){
  html body #affiliate .aff-deck-id{ padding:24px; gap:18px; }
  html body #affiliate .aff-deck-avatar{ width:62px; height:62px; flex:0 0 62px; font-size:1.4rem; }
  html body #affiliate .aff-deck-hello-name{ font-size:1.6rem; }
  html body #affiliate .aff-deck-statgroup{ width:100%; }
  html body #affiliate .aff-deck-stat3{ flex:1; min-width:0; padding:13px 6px; }
  html body #affiliate .aff-deck-stat3-v{ font-size:1.5rem; }
  html body #affiliate .aff-deck-stat3-l{ font-size:.58rem; letter-spacing:.02em; }
}
/* ===================== /R329 ===================== */


/* ===================== R330 — green glow + floating particles (replaces shimmer) ===================== */
/* Kill the sheen sweep; add a soft breathing green glow + a few teal particles drifting up. */
html body #affiliate .aff-deck-id{ background:linear-gradient(180deg,#ffffff,#f6f9fb); }
html body #affiliate .aff-deck-id::after{ display:none !important; }

/* soft breathing green glow (right / centre) */
html body #affiliate .aff-deck-id::before{
  content:''; position:absolute; z-index:0; pointer-events:none;
  right:-4%; top:50%; transform:translateY(-50%); width:62%; height:210%;
  background:radial-gradient(50% 45% at 68% 50%, rgba(45,212,191,.20), rgba(45,212,191,.06) 46%, transparent 72%);
  animation:affDeckGlow 5.5s ease-in-out infinite; }
@keyframes affDeckGlow{ 0%,100%{ opacity:.6; } 50%{ opacity:1; } }

/* particles drifting up */
html body #affiliate .aff-deck-particles{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
html body #affiliate .aff-deck-particles span{
  position:absolute; bottom:-8px; width:6px; height:6px; border-radius:50%;
  background:radial-gradient(circle, rgba(45,212,191,.9), rgba(45,212,191,0) 68%);
  opacity:0; animation:affDeckRise 8s ease-in infinite; }
html body #affiliate .aff-deck-particles span:nth-child(1){ left:22%; animation-delay:0s; }
html body #affiliate .aff-deck-particles span:nth-child(2){ left:33%; width:4px; height:4px; animation-delay:2.6s; animation-duration:9.4s; }
html body #affiliate .aff-deck-particles span:nth-child(3){ left:43%; animation-delay:4.4s; }
html body #affiliate .aff-deck-particles span:nth-child(4){ left:52%; width:5px; height:5px; animation-delay:1.3s; animation-duration:10s; }
html body #affiliate .aff-deck-particles span:nth-child(5){ left:60%; width:4px; height:4px; animation-delay:5.6s; animation-duration:8.6s; }
html body #affiliate .aff-deck-particles span:nth-child(6){ left:66%; animation-delay:3.4s; }
@keyframes affDeckRise{
  0%{ transform:translateY(0) scale(.5); opacity:0; }
  14%{ opacity:.7; }
  80%{ opacity:.4; }
  100%{ transform:translateY(-160px) scale(1); opacity:0; } }

/* keep content above the glow + particles */
html body #affiliate .aff-deck-id-main,
html body #affiliate .aff-deck-statgroup{ position:relative; z-index:2; }

@media (prefers-reduced-motion:reduce){
  html body #affiliate .aff-deck-particles{ display:none; }
  html body #affiliate .aff-deck-id::before{ animation:none; opacity:.7; }
}
/* ===================== /R330 ===================== */


/* ===================== R331 — Affiliate Launch Pad ===================== */
html body #affiliate .aff-launch{ --lp-teal:#14b8a6; --lp-teal2:#2dd4bf; --lp-ink:#0b1416; --lp-mut:#5d6e71;
  display:flex; flex-direction:column; gap:16px; margin:0 0 22px; }
html body #affiliate .aff-launch .aff-lp-eyebrow{ font-family:'JetBrains Mono',monospace!important; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--lp-teal); display:inline-flex; align-items:center; gap:8px; }
html body #affiliate .aff-launch .aff-lp-eyebrow2{ font-family:'JetBrains Mono',monospace!important; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--lp-mut); }

/* ① Money Engine (dark instrument) */
html body #affiliate .aff-lp-engine{ position:relative; overflow:hidden; border-radius:18px; padding:26px 30px;
  background:radial-gradient(140% 130% at 8% 0%,#0c1c1a,#06070A 62%); border:1px solid rgba(45,212,191,.16);
  box-shadow:0 22px 50px -28px rgba(0,0,0,.75); }
html body #affiliate .aff-lp-engine-glow{ position:absolute; inset:auto -10% -55% 30%; height:80%; background:radial-gradient(50% 60% at 50% 100%,rgba(45,212,191,.18),transparent 70%); pointer-events:none; }
html body #affiliate .aff-lp-engine-head{ position:relative; z-index:1; }
html body #affiliate .aff-lp-engine-title{ font-family:'Geist',sans-serif!important; font-weight:700; font-size:1.7rem; letter-spacing:-.02em; color:#f2fbf9; margin:10px 0 0; line-height:1.18; }
html body #affiliate .aff-lp-engine-title span{ color:var(--lp-teal2); }
html body #affiliate .aff-lp-calc{ position:relative; z-index:1; display:grid; grid-template-columns:1.2fr 1fr; gap:26px; align-items:center; margin-top:20px; }
html body #affiliate .aff-lp-calc-row{ display:block; margin-bottom:16px; }
html body #affiliate .aff-lp-calc-lbl{ display:flex; justify-content:space-between; font-size:.82rem; color:#b9ccc9; margin-bottom:8px; }
html body #affiliate .aff-lp-calc-lbl b{ font-family:'JetBrains Mono',monospace!important; color:#f2fbf9; }
html body #affiliate .aff-lp-range{ -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:99px; outline:none;
  background:linear-gradient(90deg,var(--lp-teal2) 0%,var(--lp-teal2) var(--fill,10%),rgba(255,255,255,.12) var(--fill,10%),rgba(255,255,255,.12) 100%); }
html body #affiliate .aff-lp-range::-webkit-slider-thumb{ -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:#fff; border:3px solid var(--lp-teal); cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.4); }
html body #affiliate .aff-lp-range::-moz-range-thumb{ width:18px; height:18px; border-radius:50%; background:#fff; border:3px solid var(--lp-teal); cursor:pointer; }
html body #affiliate .aff-lp-calc-out{ text-align:right; }
html body #affiliate .aff-lp-calc-mo-v{ font-family:'JetBrains Mono',monospace!important; font-weight:700; font-size:2.6rem; color:#f2fbf9; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
html body #affiliate .aff-lp-calc-mo-l{ color:#9fb4b1; font-size:.9rem; margin-left:4px; }
html body #affiliate .aff-lp-calc-yr{ font-family:'JetBrains Mono',monospace!important; color:var(--lp-teal2); font-size:.95rem; margin-top:2px; }
html body #affiliate .aff-lp-calc-each{ color:#9fb4b1; font-size:.82rem; margin-top:8px; }
html body #affiliate .aff-lp-calc-each strong{ color:#f2fbf9; font-family:'JetBrains Mono',monospace!important; }
html body #affiliate .aff-lp-disclaimer{ position:relative; z-index:1; color:#7e9290; font-size:.7rem; margin-top:14px; line-height:1.45; }
html body #affiliate .aff-lp-mission{ position:relative; z-index:1; margin-top:18px; display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  background:linear-gradient(180deg,rgba(45,212,191,.14),rgba(45,212,191,.06)); border:1px solid rgba(45,212,191,.28); border-radius:14px; padding:16px 18px; }
html body #affiliate .aff-lp-mission-txt{ color:#d7eae7; font-size:.95rem; display:flex; align-items:center; gap:10px; }
html body #affiliate .aff-lp-mission-txt strong{ color:#fff; }
html body #affiliate .aff-lp-mission-txt i{ color:var(--lp-teal2); }
html body #affiliate .aff-lp-mission.is-done{ color:#bfe9e2; font-size:.92rem; }
html body #affiliate .aff-lp-mission-cta{ flex:0 0 auto; font-family:'Geist',sans-serif!important; font-weight:600; font-size:.92rem; cursor:pointer; border:0; border-radius:12px; padding:12px 18px; color:#04110f; background:linear-gradient(180deg,var(--lp-teal2),var(--lp-teal)); box-shadow:0 10px 22px -12px rgba(20,184,166,.7); transition:transform .14s ease; display:inline-flex; align-items:center; gap:8px; }
html body #affiliate .aff-lp-mission-cta:active{ transform:scale(.97); }

/* R332 — force light text on the dark Money Engine (beats the light-dashboard
   theme's heading/strong color defaults, which were blacking these out). */
html body #affiliate .aff-lp-engine-title{ color:#f2fbf9 !important; }
html body #affiliate .aff-lp-engine-title span{ color:var(--lp-teal2) !important; }
html body #affiliate .aff-lp-calc-each strong{ color:#f2fbf9 !important; }
html body #affiliate .aff-lp-mission-txt strong{ color:#fff !important; }
html body #affiliate .aff-lp-mission-txt{ color:#d7eae7 !important; }
html body #affiliate .aff-lp-mission.is-done{ color:#bfe9e2 !important; }

/* shared light card */
html body #affiliate .aff-lp-kit, html body #affiliate .aff-lp-vc, html body #affiliate .aff-lp-lb{
  background:linear-gradient(180deg,#ffffff,#f6f9fb); border:1px solid rgba(13,30,32,.10); border-radius:18px;
  box-shadow:0 1px 2px rgba(13,30,32,.04), 0 8px 24px -16px rgba(13,30,32,.18); padding:24px 26px; }

/* ② Kit */
html body #affiliate .aff-lp-kit-title{ font-family:'Geist',sans-serif!important; font-weight:700; font-size:1.4rem; letter-spacing:-.02em; color:var(--lp-ink); margin:9px 0 6px; }
html body #affiliate .aff-lp-kit-sub{ color:#52666a; font-size:.9rem; line-height:1.5; }
html body #affiliate .aff-lp-ftc{ display:block; margin-top:6px; color:#6a797c; font-size:.78rem; }
html body #affiliate .aff-lp-ftc i{ color:var(--lp-teal); }
html body #affiliate .aff-lp-share{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin:18px 0 16px; }
html body #affiliate .aff-lp-share-lbl{ font-family:'JetBrains Mono',monospace!important; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--lp-mut); }
html body #affiliate .aff-lp-share-btn{ display:inline-flex; align-items:center; gap:7px; font:600 .82rem/1 'Geist',sans-serif!important; text-decoration:none; color:#0b1416; background:#fff; border:1px solid rgba(13,30,32,.14); border-radius:10px; padding:9px 13px; transition:transform .14s ease, border-color .2s, box-shadow .2s; }
html body #affiliate .aff-lp-share-btn i{ color:var(--lp-teal); }
html body #affiliate .aff-lp-share-btn:hover{ border-color:rgba(20,184,166,.4); box-shadow:0 6px 14px -8px rgba(20,184,166,.4); }
html body #affiliate .aff-lp-share-btn:active{ transform:scale(.97); }
html body #affiliate .aff-lp-swipes{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
html body #affiliate .aff-lp-swipe{ background:#f7fafb; border:1px solid rgba(13,30,32,.09); border-radius:13px; padding:13px 15px; display:flex; flex-direction:column; gap:9px; }
html body #affiliate .aff-lp-swipe-top{ display:flex; justify-content:space-between; align-items:center; }
html body #affiliate .aff-lp-swipe-plat{ font:600 .76rem/1 'JetBrains Mono',monospace!important; color:#3a4d50; display:inline-flex; align-items:center; gap:7px; }
html body #affiliate .aff-lp-swipe-plat i{ color:var(--lp-teal); }
html body #affiliate .aff-lp-copy{ font:600 .72rem/1 'Geist',sans-serif!important; cursor:pointer; border:1px solid rgba(20,184,166,.3); background:rgba(20,184,166,.08); color:#0b6b60; border-radius:8px; padding:6px 10px; display:inline-flex; align-items:center; gap:6px; transition:background .16s, transform .14s; }
html body #affiliate .aff-lp-copy:hover{ background:rgba(20,184,166,.16); }
html body #affiliate .aff-lp-copy:active{ transform:scale(.95); }
html body #affiliate .aff-lp-swipe-text{ font-size:.82rem; line-height:1.5; color:#42565a; word-break:break-word; }
html body #affiliate .aff-lp-visuals{ margin-top:18px; border-top:1px solid rgba(13,30,32,.08); padding-top:16px; }
html body #affiliate .aff-lp-visuals-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; flex-wrap:wrap; gap:10px; }
html body #affiliate .aff-lp-dl{ font:600 .78rem/1 'Geist',sans-serif!important; cursor:pointer; border:1px solid rgba(13,30,32,.14); background:#fff; color:#0b1416; border-radius:9px; padding:8px 12px; display:inline-flex; align-items:center; gap:7px; }
html body #affiliate .aff-lp-dl i{ color:var(--lp-teal); }
html body #affiliate .aff-lp-visuals-grid{ display:flex; gap:12px; flex-wrap:wrap; }
html body #affiliate .aff-lp-visual{ position:relative; margin:0; border-radius:12px; overflow:hidden; border:1px solid rgba(13,30,32,.1); background:#06070A; height:150px; }
html body #affiliate .aff-lp-visual img{ height:100%; width:auto; display:block; }
html body #affiliate .aff-lp-visual-dl{ position:absolute; right:8px; bottom:8px; width:30px; height:30px; border-radius:8px; display:grid; place-items:center; background:rgba(6,7,10,.7); color:#fff; text-decoration:none; backdrop-filter:blur(4px); }

/* ③ Value + Contest — reworked R332 (light card, perk tiles, gold contest strip) */
html body #affiliate .aff-lp-vc{ display:block; }
html body #affiliate .aff-lp-vc-head{ margin-bottom:16px; }
html body #affiliate .aff-lp-vc-title{ font-family:'Geist',sans-serif!important; font-weight:700; font-size:1.3rem; letter-spacing:-.02em; color:var(--lp-ink)!important; margin:9px 0 0; line-height:1.2; }
html body #affiliate .aff-lp-perks{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
html body #affiliate .aff-lp-perk{ display:flex; flex-direction:column; gap:3px; padding:16px; border-radius:14px; background:linear-gradient(180deg,#f7fafb,#eef4f5); border:1px solid rgba(13,30,32,.08); }
html body #affiliate .aff-lp-perk-ic{ width:34px; height:34px; border-radius:9px; display:grid; place-items:center; background:rgba(20,184,166,.12); color:var(--lp-teal)!important; font-size:.9rem; margin-bottom:7px; }
html body #affiliate .aff-lp-perk-v{ font-family:'JetBrains Mono',monospace!important; font-weight:700; font-size:1.5rem; color:var(--lp-ink)!important; letter-spacing:-.02em; }
html body #affiliate .aff-lp-perk-l{ font-size:.82rem; color:#52666a!important; line-height:1.35; }
html body #affiliate .aff-lp-contest{ display:flex; align-items:center; gap:16px; margin-top:14px;
  background:linear-gradient(180deg,#fffdf6,#fdf3e0); border:1px solid rgba(217,119,6,.30); border-radius:14px; padding:16px 18px; }
html body #affiliate .aff-lp-contest-trophy{ width:46px; height:46px; flex:0 0 46px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(180deg,#fbbf24,#d97706); color:#3a1d00!important; font-size:1.2rem; box-shadow:0 8px 18px -10px rgba(217,119,6,.7); }
html body #affiliate .aff-lp-contest-body{ flex:1 1 auto; min-width:0; }
html body #affiliate .aff-lp-contest-title{ font-family:'Geist',sans-serif!important; font-weight:600; color:#4a3206!important; font-size:.98rem; line-height:1.35; }
html body #affiliate .aff-lp-contest-title strong{ color:#9a3412!important; font-weight:800; }
html body #affiliate .aff-lp-contest-sub{ color:#6b4f1a!important; font-size:.8rem; margin-top:3px; }
html body #affiliate .aff-lp-contest-clock{ margin-left:auto; text-align:center; flex:0 0 auto; padding-left:14px; border-left:1px solid rgba(217,119,6,.22); }
html body #affiliate .aff-lp-clock-v{ display:block; font-family:'JetBrains Mono',monospace!important; font-weight:700; font-size:1.15rem; color:#7c2d12!important; font-variant-numeric:tabular-nums; }
html body #affiliate .aff-lp-clock-l{ font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:#6e4a0a!important; }

/* ④ Leaderboard host */
html body #affiliate .aff-lp-lb[hidden]{ display:none; }

@media (max-width:760px){
  html body #affiliate .aff-lp-engine{ padding:22px; }
  html body #affiliate .aff-lp-engine-title{ font-size:1.4rem; }
  html body #affiliate .aff-lp-calc{ grid-template-columns:1fr; gap:14px; }
  html body #affiliate .aff-lp-calc-out{ text-align:left; }
  html body #affiliate .aff-lp-swipes{ grid-template-columns:1fr; }
  html body #affiliate .aff-lp-perks{ grid-template-columns:1fr; }
  html body #affiliate .aff-lp-contest{ flex-wrap:wrap; }
  html body #affiliate .aff-lp-contest-clock{ margin-left:0; padding-left:0; border-left:0; margin-top:8px; }
}
@media (prefers-reduced-motion:reduce){
  html body #affiliate .aff-lp-mission-cta, html body #affiliate .aff-lp-share-btn, html body #affiliate .aff-lp-copy{ transition:none; }
}
/* ===================== /R331 ===================== */


/* ===================== R333 — Identity hero: taller, premium command header ===================== */
/* Elevates the dashboard's first impression — the .aff-deck-id banner. More height +
   atmosphere (whisper graph-grid · teal bloom · the R330 drifting particles), a bigger
   glowing dark-instrument avatar, a commanding name, a live-status pill, and the three
   numbers as a refined instrument-readout cluster. CSS-only; markup + every JS hook
   untouched. Overrides the R325–R330 identity rules. */

/* panel — taller, layered, lifted */
html body #affiliate .aff-deck-id{
  padding:46px 46px !important; gap:36px !important; border-radius:20px !important;
  border:1px solid rgba(20,184,166,.16) !important;
  background:
    radial-gradient(115% 130% at 100% -20%, rgba(45,212,191,.10), transparent 55%),
    radial-gradient(rgba(20,184,166,.045) 1px, transparent 1.5px) 0 0 / 26px 26px,
    linear-gradient(180deg,#ffffff,#f5f9fa) !important;
  box-shadow:0 1px 2px rgba(13,30,32,.04), 0 28px 64px -36px rgba(13,30,32,.32) !important;
}
/* refined breathing teal bloom — now blooms behind the avatar/identity (was R330 right) */
html body #affiliate .aff-deck-id::before{
  left:-7% !important; right:auto !important; top:50% !important;
  width:52% !important; height:240% !important;
  background:radial-gradient(46% 42% at 32% 50%, rgba(45,212,191,.17), rgba(45,212,191,.05) 48%, transparent 72%) !important;
}

/* avatar — bigger, glowing instrument plate */
html body #affiliate .aff-deck-avatar{
  width:92px !important; height:92px !important; flex:0 0 92px !important; border-radius:24px !important;
  font-size:2.05rem !important;
  background:radial-gradient(120% 120% at 30% 16%,#103230,#06070A 72%) !important;
  box-shadow:inset 0 0 0 1px rgba(45,212,191,.32), inset 0 1px 0 rgba(255,255,255,.07),
             0 18px 36px -18px rgba(6,7,10,.72), 0 0 26px -4px rgba(45,212,191,.26) !important;
}
html body #affiliate .aff-deck-avatar-dot{ width:20px !important; height:20px !important; right:-4px !important; bottom:-4px !important; border-width:3px !important; }

/* greeting — eyebrow + commanding name */
html body #affiliate .aff-deck-id-text{ min-width:0; }
html body #affiliate .aff-deck-hello{ gap:4px !important; }
html body #affiliate .aff-deck-hello-pre{
  font-family:'JetBrains Mono',monospace !important; font-weight:500 !important;
  font-size:.74rem !important; letter-spacing:.16em !important; text-transform:uppercase !important; color:#3f6460 !important; }
html body #affiliate .aff-deck-hello-name{
  font-size:2.6rem !important; font-weight:800 !important; letter-spacing:-.032em !important;
  color:#0a1416 !important; line-height:1.05 !important; margin-top:5px !important; }

/* status → live pill */
html body #affiliate .aff-deck-status{
  display:inline-flex !important; align-items:center !important; gap:8px !important; width:max-content !important;
  margin-top:18px !important; padding:8px 15px !important; border-radius:999px !important;
  font-size:.86rem !important; font-weight:600 !important; color:#0a6b60 !important;
  background:rgba(20,184,166,.10) !important; border:1px solid rgba(20,184,166,.28) !important; }
html body #affiliate .aff-deck-status .aff-deck-dot{ width:9px !important; height:9px !important; background:var(--deck-teal-2) !important; box-shadow:0 0 0 3px rgba(45,212,191,.18) !important; }

/* stat cluster — premium instrument readouts */
html body #affiliate .aff-deck-statgroup{
  padding:12px !important; border-radius:18px !important;
  background:linear-gradient(180deg,#fbfefe,#ecf5f4) !important;
  border:1px solid rgba(20,184,166,.20) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 12px 30px -22px rgba(13,30,32,.34) !important; }
html body #affiliate .aff-deck-stat3{ padding:18px 32px !important; min-width:124px !important; }
html body #affiliate .aff-deck-stat3-ico{
  width:36px !important; height:36px !important; display:grid !important; place-items:center !important;
  border-radius:11px !important; background:rgba(20,184,166,.12) !important;
  color:var(--deck-teal) !important; font-size:.98rem !important; margin:0 0 13px !important; }
html body #affiliate .aff-deck-stat3-v{ font-size:2.2rem !important; letter-spacing:-.02em !important; color:#0a1416 !important; }
html body #affiliate .aff-deck-stat3-l{ font-size:.7rem !important; letter-spacing:.09em !important; color:#42585b !important; margin-top:11px !important; }
html body #affiliate .aff-deck-stat3-div{ margin:18px 0 !important; }

/* mobile */
@media (max-width:760px){
  html body #affiliate .aff-deck-id{ padding:28px 24px !important; gap:22px !important; }
  html body #affiliate .aff-deck-avatar{ width:74px !important; height:74px !important; flex:0 0 74px !important; font-size:1.65rem !important; border-radius:20px !important; }
  html body #affiliate .aff-deck-hello-name{ font-size:2rem !important; }
  html body #affiliate .aff-deck-statgroup{ width:100% !important; }
  html body #affiliate .aff-deck-stat3{ flex:1 1 0 !important; min-width:0 !important; padding:16px 6px !important; }
  html body #affiliate .aff-deck-stat3-ico{ width:32px !important; height:32px !important; margin-bottom:10px !important; }
  html body #affiliate .aff-deck-stat3-v{ font-size:1.7rem !important; }
  html body #affiliate .aff-deck-stat3-l{ font-size:.6rem !important; letter-spacing:.04em !important; }
}
/* ===================== /R333 ===================== */


/* ===================== R334 — Money Engine slider value + vc title polish ===================== */
/* (1) The live slider value <b> inherited the dark-dashboard <b> color (rgb(10,10,10)) → it was
   invisible on the dark panel, so there was no visible number tracker. Make it a prominent teal
   readout that updates as you drag.  (2) Give the vc title's descenders breathing room so the
   last line no longer reads as cut off / fading at the bottom. */
html body #affiliate .aff-lp-calc-lbl b{ color:var(--lp-teal2) !important; font-size:.95rem; font-weight:700; }
html body #affiliate .aff-lp-vc-title{ line-height:1.32 !important; padding-bottom:3px; font-weight:800 !important; -webkit-font-smoothing:auto !important; }
/* ===================== /R334 ===================== */


/* ===================== R337 — referral card: shimmer sweep + a tad taller ===================== */
/* An occasional premium light-sweep across the referral card, clipped to its rounded
   bounds, plus a touch more vertical room. Reduced-motion: no sweep. */
html body #affiliate .aff-deck .aff-refcard{ position:relative; overflow:hidden; padding:30px 28px !important; min-height:200px; align-content:center; }
html body #affiliate .aff-deck .aff-refcard::after{
  content:''; position:absolute; top:0; bottom:0; left:0; width:62%; pointer-events:none; z-index:4;
  background:linear-gradient(105deg, transparent 0%, rgba(255,255,255,.55) 44%, rgba(45,212,191,.20) 52%, transparent 80%);
  transform:translateX(-190%) skewX(-14deg); animation:affRefShimmer 6.5s ease-in-out infinite; }
@keyframes affRefShimmer{ 0%{ transform:translateX(-190%) skewX(-14deg); } 18%{ transform:translateX(240%) skewX(-14deg); } 100%{ transform:translateX(240%) skewX(-14deg); } }

/* ===================== R338 — identity hero: brighter, wider floating particles ===================== */
/* Enhances the R330 particle layer so the drifting teal motes read clearly on the
   lighter R333 surface, and spreads them across the full card width. */
html body #affiliate .aff-deck-particles span{ background:radial-gradient(circle, rgba(45,212,191,.98), rgba(45,212,191,0) 64%) !important; }
html body #affiliate .aff-deck-particles span:nth-child(1){ left:15%; width:8px; height:8px; }
html body #affiliate .aff-deck-particles span:nth-child(2){ left:30%; }
html body #affiliate .aff-deck-particles span:nth-child(3){ left:45%; width:7px; height:7px; }
html body #affiliate .aff-deck-particles span:nth-child(4){ left:60%; }
html body #affiliate .aff-deck-particles span:nth-child(5){ left:74%; }
html body #affiliate .aff-deck-particles span:nth-child(6){ left:87%; width:8px; height:8px; }
/* +6 more motes interleaved between the originals, staggered timing */
html body #affiliate .aff-deck-particles span:nth-child(7){ left:9%;  width:5px; height:5px; animation-delay:1.8s; animation-duration:9s; }
html body #affiliate .aff-deck-particles span:nth-child(8){ left:23%; width:7px; height:7px; animation-delay:4s;   animation-duration:8.4s; }
html body #affiliate .aff-deck-particles span:nth-child(9){ left:38%; width:5px; height:5px; animation-delay:6.2s; animation-duration:10s; }
html body #affiliate .aff-deck-particles span:nth-child(10){ left:53%; width:6px; height:6px; animation-delay:2.9s; animation-duration:9.6s; }
html body #affiliate .aff-deck-particles span:nth-child(11){ left:67%; width:7px; height:7px; animation-delay:5.1s; animation-duration:8.8s; }
html body #affiliate .aff-deck-particles span:nth-child(12){ left:80%; width:5px; height:5px; animation-delay:7s;   animation-duration:10.4s; }
@keyframes affDeckRise{ 0%{ transform:translateY(0) scale(.45); opacity:0; } 16%{ opacity:.95; } 82%{ opacity:.55; } 100%{ transform:translateY(-210px) scale(1); opacity:0; } }

@media (prefers-reduced-motion:reduce){
  html body #affiliate .aff-deck .aff-refcard::after{ animation:none; opacity:0; }
}
/* ===================== /R337-R338 ===================== */


/* ===================== R340 — welcome-back: 3-stat top restored + separated extras band ===================== */
/* Identity + the 3 key stats sit together up top (original look); the extra perks
   (fast payout, store-credit bonus) + the $100 contest drop into a divided band below
   — clearly separated, not one blob. */
html body #affiliate .aff-deck-id{ flex-direction:column !important; align-items:stretch !important; gap:0 !important; }
html body #affiliate .aff-deck-id-top{ position:relative; z-index:2; display:flex; justify-content:space-between; align-items:center; gap:36px; }
html body #affiliate .aff-deck-extras{ position:relative; z-index:2; margin-top:24px; padding-top:24px; border-top:1px solid rgba(20,184,166,.18); display:flex; flex-direction:column; gap:14px; }
html body #affiliate .aff-deck-perks2{ grid-template-columns:repeat(2,1fr) !important; }
html body #affiliate .aff-deck-contest{ margin-top:0 !important; }
@media (max-width:760px){
  html body #affiliate .aff-deck-id-top{ flex-direction:column; align-items:flex-start; gap:18px; }
  html body #affiliate .aff-deck-statgroup{ width:100%; }
  html body #affiliate .aff-deck-perks2{ grid-template-columns:1fr !important; }
}
/* ===================== /R340 ===================== */


/* ===================== R341 — referral link row: a little bigger ===================== */
html body #affiliate .aff-deck .aff-refcard-linkrow{ gap:12px; padding:8px 8px 8px 18px !important; border-radius:13px; }
html body #affiliate .aff-deck .aff-refcard-linkicon{ font-size:1rem; }
html body #affiliate .aff-deck .aff-refcard-url{ font-size:1.04rem !important; padding:13px 0; }
html body #affiliate .aff-deck .aff-refcard-linkbtn{ padding:13px 20px; font-size:.92rem; border-radius:11px; }
html body #affiliate .aff-deck .aff-refcard-linkbtn i{ font-size:1rem; }
/* ===================== /R341 ===================== */


/* ===================== R346 — stat icon colors tied to each stat (amber · teal · indigo) ===================== */
/* Colour follows the stat (a class), not its position, so reordering keeps them stable. */
html body #affiliate .aff-deck-stat3-ico.ico-amber{ background:rgba(245,158,11,.15) !important; color:#d97706 !important; }
html body #affiliate .aff-deck-stat3-ico.ico-teal{ background:rgba(20,184,166,.15) !important; color:#0d9488 !important; }
html body #affiliate .aff-deck-stat3-ico.ico-indigo{ background:rgba(99,102,241,.15) !important; color:#6366f1 !important; }
/* ===================== /R346 ===================== */


/* ===================== R347 — short description line under each stat ===================== */
html body #affiliate .aff-deck-stat3-d{ margin-top:7px; max-width:22ch; font-size:.72rem; line-height:1.4; color:#4f676a; }
@media (max-width:760px){ html body #affiliate .aff-deck-stat3-d{ display:none; } }
/* ===================== /R347 ===================== */


/* ===================== R348 — drop the teal hue on the referral card + stat group ===================== */
/* Neutral cool-gray surfaces + borders (no green tint); icon chips keep their colors. */
html body #affiliate .aff-deck .aff-refcard{ background:linear-gradient(180deg,#ffffff,#f5f7f9) !important; border-color:rgba(13,30,32,.10) !important; }
html body #affiliate .aff-deck-statgroup{ background:linear-gradient(180deg,#fbfcfd,#eef0f3) !important; border-color:rgba(13,30,32,.10) !important; }
html body #affiliate .aff-deck-stat3-div{ background:linear-gradient(180deg, transparent, rgba(13,30,32,.12), transparent) !important; }
/* ===================== /R348 ===================== */


/* ===================== R349 — order-activity telemetry line ===================== */
html body #affiliate .aff-deck-telemetry{ margin-top:10px !important; color:#54646a !important; font-size:.76rem !important; }
/* ===================== /R349 ===================== */


/* ===================== R350 — keep the name from being clipped by the stat group ===================== */
/* The stat strip widened (descriptions) and didn't shrink, squeezing "Shane&Zach" on
   tighter widths. Give the name column a guaranteed basis, let the stat group flex (and
   wrap below if truly tight), and never hard-clip the name. */
html body #affiliate .aff-deck-id-top{ flex-wrap:wrap; row-gap:20px !important; }
html body #affiliate .aff-deck-id-main{ flex:1 1 410px !important; }
html body #affiliate .aff-deck-statgroup{ flex:1 1 460px !important; min-width:0 !important; }
html body #affiliate .aff-deck-hello-name{ overflow-wrap:break-word; }
/* ===================== /R350 ===================== */


/* ===================== R351 — widen the welcome-back stat group a touch ===================== */
/* Keep R350's flex-bases (so the side-by-side <-> wrap breakpoint is UNCHANGED — the stats
   never newly drop below the name), but let the stat group claim the lion's share of the
   row's slack via grow ratio. id-main keeps a little growth and never drops below its 410
   floor, so the name still never clips. */
html body #affiliate .aff-deck-id-main{ flex-grow:0.6 !important; }
html body #affiliate .aff-deck-statgroup{ flex-grow:2.2 !important; }
/* ===================== /R351 ===================== */


/* ===================== R352 — Earnings Command Center zero-state ===================== */
/* The hub renders for everyone now (even before the first order). Honest empty row for
   the Recent Activity feed when there are no referred orders yet. */
html body #affiliate .aff-hub-feed-empty{
  display:flex; align-items:center; gap:9px;
  padding:18px 16px; border-radius:12px;
  background:linear-gradient(180deg,#fbfcfd,#f1f4f6);
  border:1px dashed rgba(13,30,32,.16);
  color:#54646a; font-size:.85rem; line-height:1.4;
}
html body #affiliate .aff-hub-feed-empty i{ color:#0d9488; font-size:.95rem; }
/* ===================== /R352 ===================== */


/* ===================== R353 — referral-code card → dark "money room" (Money Engine removed) ===================== */
/* The Money Engine section was removed; its dark-instrument look moves onto "Your referral
   code". Mirrors .aff-lp-engine: a radial teal glow over a near-black gradient, teal accents,
   light ink. Overrides the R348 light surface (later in source + !important). */
html body #affiliate .aff-deck .aff-refcard{
  background:
    radial-gradient(58% 72% at 86% 114%, rgba(45,212,191,.16), transparent 70%),
    radial-gradient(140% 130% at 8% 0%, #0c1c1a, #06070A 62%) !important;
  border:1px solid rgba(45,212,191,.16) !important;
  box-shadow:0 22px 50px -28px rgba(0,0,0,.75) !important;
}
/* tone the shimmer sweep down for the dark surface (it was a bright white sweep on the light card) */
html body #affiliate .aff-deck .aff-refcard::after{
  background:linear-gradient(105deg, transparent 0%, rgba(255,255,255,.09) 46%, rgba(45,212,191,.16) 54%, transparent 82%) !important;
}
/* eyebrow + code → bright teal + light ink */
html body #affiliate .aff-deck .aff-refcard-eyebrow{ color:#5eead4 !important; }
html body #affiliate .aff-deck .aff-refcard-code{ color:#f2fbf9 !important; }
/* copy-code chip → raised dark, teal glyph; hover fills teal with near-black glyph */
html body #affiliate .aff-deck .aff-refcard-codebtn{ background:rgba(255,255,255,.05) !important; border:1px solid rgba(45,212,191,.30) !important; color:#2dd4bf !important; }
html body #affiliate .aff-deck .aff-refcard-codebtn:hover{ background:#14b8a6 !important; border-color:#14b8a6 !important; color:#06070A !important; }
/* link row → SOLID dark well + teal-tinted edge (clearly a field; no alpha ambiguity) */
html body #affiliate .aff-deck .aff-refcard-linkrow{ background:#0b1211 !important; border:1px solid rgba(94,234,212,.24) !important; }
html body #affiliate .aff-deck .aff-refcard-linkicon{ color:#2dd4bf !important; }
/* URL → near-white + heavier on the solid dark well (~18:1). -webkit-text-fill-color +
   opacity pinned so a readonly-input or global input rule can't mute the painted text. */
html body #affiliate .aff-deck .aff-refcard-url{ color:#f4f8f6 !important; -webkit-text-fill-color:#f4f8f6 !important; opacity:1 !important; font-weight:600 !important; letter-spacing:.01em !important; }
/* copy-link button → teal fill + near-black glyph (the card's primary action) */
html body #affiliate .aff-deck .aff-refcard-linkbtn{ background:#2dd4bf !important; color:#06070A !important; }
html body #affiliate .aff-deck .aff-refcard-linkbtn i{ color:#06070A !important; }
html body #affiliate .aff-deck .aff-refcard-linkbtn:hover{ background:#5eead4 !important; }
/* ===================== /R353 ===================== */


/* ===================== R354 — welcome-back: a touch fewer particles ===================== */
/* Thin the drifting teal motes slightly (18 → 14) by hiding four spread across the width
   (left 5%, center 38%, center-right 64%, far-right 92%); the six prominent originals stay. */
html body #affiliate .aff-deck-particles span:nth-child(9),
html body #affiliate .aff-deck-particles span:nth-child(13),
html body #affiliate .aff-deck-particles span:nth-child(16),
html body #affiliate .aff-deck-particles span:nth-child(18){ display:none !important; }
/* ===================== /R354 ===================== */


/* ===================== R355 — referral card: fix white input bg + scale the section up ===================== */
/* (a) BUG FIX: the URL <input> picked up a white background from a global input rule, so the
   near-white text rendered invisible/faded (this was the real "not legible" cause, not cache).
   Force it transparent so the dark R353 link-row well shows through → ~18:1 legible text. */
html body #affiliate .aff-deck .aff-refcard-url{ background:transparent !important; }
/* (b) Make the whole section a touch longer and everything in it proportionally bigger. */
html body #affiliate .aff-deck .aff-refcard{ padding:40px 34px !important; min-height:252px !important; }
html body #affiliate .aff-deck .aff-refcard-eyebrow{ font-size:.82rem !important; letter-spacing:.16em !important; }
html body #affiliate .aff-deck .aff-refcard-coderow{ gap:18px !important; margin-top:15px !important; }
html body #affiliate .aff-deck .aff-refcard-code{ font-size:2.05rem !important; }
html body #affiliate .aff-deck .aff-refcard-codebtn{ width:48px !important; height:48px !important; font-size:1.18rem !important; border-radius:12px !important; }
html body #affiliate .aff-deck .aff-refcard-linkrow{ margin-top:22px !important; gap:14px !important; padding:11px 11px 11px 22px !important; border-radius:15px !important; }
html body #affiliate .aff-deck .aff-refcard-linkicon{ font-size:1.18rem !important; }
html body #affiliate .aff-deck .aff-refcard-url{ font-size:1.18rem !important; padding:16px 0 !important; }
html body #affiliate .aff-deck .aff-refcard-linkbtn{ padding:16px 26px !important; font-size:1.02rem !important; border-radius:13px !important; }
html body #affiliate .aff-deck .aff-refcard-linkbtn i{ font-size:1.12rem !important; }
/* ===================== /R355 ===================== */


/* ===================== R356 — payout section: "exhibit panel" background (not flat grey) ===================== */
/* Swap the flat cool-grey for a soft instrument surface: a clean cool off-white gradient with
   a whisper of dot-grid (lab-bench texture), under a soft teal "exhibit light" glow. Every
   layer is very low-contrast, so it adds character in the gutters between the white cards
   without competing with any card or text. The teal stays atmospheric, never a flat green fill. */
html body #affiliate .aff-vault{
  background:
    radial-gradient(rgba(15,78,74,.06) 1px, transparent 1.6px) 0 0 / 22px 22px,
    linear-gradient(180deg, #edf3f3 0%, #f6faf9 50%, #f0f6f5 100%) !important;
  border-color:#dbe6e5 !important;
}
/* soft exhibit glow pooled at the top (atmospheric, not a flat hue) */
html body #affiliate .aff-vault-glow{ background:radial-gradient(60% 60% at 50% 0%, rgba(20,184,166,.14), transparent 68%) !important; }
/* ===================== /R356 ===================== */


/* ===================== R343 — stat labels: more readable ===================== */
/* Darker ink (≈9.6:1 contrast), a touch larger + medium weight, slightly tighter tracking. */
html body #affiliate .aff-deck-stat3-l{ color:#2f4144 !important; font-size:.74rem !important; font-weight:500 !important; letter-spacing:.07em !important; }
/* ===================== /R343 ===================== */


/* ===================== R344 — drop the green hue, add more particles ===================== */
/* Clean light surface: remove the teal corner-aura + the breathing bloom; the only teal
   left is the drifting particle motes (now 18, spread wider). */
html body #affiliate .aff-deck-id{
  background:
    radial-gradient(rgba(13,30,32,.04) 1px, transparent 1.5px) 0 0 / 26px 26px,
    linear-gradient(180deg,#ffffff,#f6f9fb) !important;
}
html body #affiliate .aff-deck-id::before{ display:none !important; }
html body #affiliate .aff-deck-particles span:nth-child(13){ left:5%;  width:6px; height:6px; animation-delay:0.9s; animation-duration:9.2s; }
html body #affiliate .aff-deck-particles span:nth-child(14){ left:19%; width:5px; height:5px; animation-delay:3.3s; animation-duration:10.2s; }
html body #affiliate .aff-deck-particles span:nth-child(15){ left:50%; width:6px; height:6px; animation-delay:5.5s; animation-duration:8.6s; }
html body #affiliate .aff-deck-particles span:nth-child(16){ left:64%; width:5px; height:5px; animation-delay:1.6s; animation-duration:9.8s; }
html body #affiliate .aff-deck-particles span:nth-child(17){ left:78%; width:6px; height:6px; animation-delay:4.7s; animation-duration:8.9s; }
html body #affiliate .aff-deck-particles span:nth-child(18){ left:92%; width:5px; height:5px; animation-delay:6.6s; animation-duration:10.6s; }
/* ===================== /R344 ===================== */


/* ===================== R345 — make the particles actually visible ===================== */
/* They were behind the content (occluded by the stat panel + contest) and only rose
   ~210px on a much taller card. Float them above, make them bigger + glowing, and rise
   the full height. pointer-events stay off so they never block clicks. */
html body #affiliate .aff-deck-particles{ z-index:3 !important; }
html body #affiliate .aff-deck-particles span{
  background:radial-gradient(circle, rgba(45,212,191,.95), rgba(45,212,191,0) 72%) !important;
  box-shadow:0 0 9px rgba(45,212,191,.5); }
html body #affiliate .aff-deck-particles span:nth-child(odd){ width:9px !important; height:9px !important; }
html body #affiliate .aff-deck-particles span:nth-child(even){ width:7px !important; height:7px !important; }
@keyframes affDeckRise{ 0%{ transform:translateY(0) scale(.5); opacity:0; } 12%{ opacity:1; } 85%{ opacity:.7; } 100%{ transform:translateY(-470px) scale(1.05); opacity:0; } }
@media (prefers-reduced-motion:reduce){ html body #affiliate .aff-deck-particles{ display:none !important; } }
/* ===================== /R345 ===================== */


/* ===================== R530 — Audit fixes: footer dark-bg legibility (H9) + PDP "Combines Well With" light conversion (H6) ===================== */
/* (A) H9 — R155-L4 flipped .footer background to #050507 but the light-theme text
   rules (~19702-19709 / 23185-23191 / 26660-26663) still force near-black text:
   headings #0a0a0a = 1.01:1, links #4a4a52 = 2.32:1, logo #1a1a1a = 1.13:1.
   Recolor every footer text token for the dark stage; all pairs >= 4.5:1 on
   #050507 (WCAG 1.4.3). Also part of this pass (not in this block): the orphaned
   global .protocol-step wizard rules were scoped to #protocol-steps in place
   (H8, ~28467 + ~36221) so they keep styling the calculator identically but can
   no longer leak onto future markup. */
html body .footer { color: #a1a1aa !important; }
html body .footer h3,
html body .footer h4,
html body .footer .footer-section-title,
html body .footer-section-title {
    color: #f5f5f7 !important;
    -webkit-text-fill-color: #f5f5f7 !important;
}
html body .footer .footer-logo .logo-text,
html body .footer-logo .logo-text {
    color: #f5f5f7 !important;
    -webkit-text-fill-color: #f5f5f7 !important;
}
html body .footer .footer-logo .logo-sub,
html body .footer-logo .logo-sub {
    color: #9ca3af !important;
    -webkit-text-fill-color: #9ca3af !important;
}
html body .footer a,
html body .footer .footer-link,
html body .footer li {
    color: #a1a1aa !important;
}
html body .footer a:hover { color: #2dd4bf !important; }
html body .footer p { color: #a1a1aa !important; }
html body .footer-bottom {
    color: #8b8b93 !important;
    border-top-color: rgba(255, 255, 255, 0.10) !important;
}
html body .footer-bottom a { color: #a1a1aa !important; }
html body .footer-bottom a:hover { color: #2dd4bf !important; }
/* social glyphs sit on their own LIGHT chips — keep them dark there */
html body .footer .footer-social a { color: #1a1a1a !important; }
html body .footer .footer-social a:hover { color: #0d9488 !important; }

/* (B) H6 — .pp-stack-card ("Combines Well With" on all 20 product pages) kept
   dead dark-era styling: navy rgba(15,23,42,.5) bg + near-black body text on it
   + dark image tiles (teal price ~1.41:1). Convert to the light exhibit system;
   the pages' inline rules lose to these on specificity + order. */
html body .pp-stack-card {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    color: #0a0a0a !important;
}
html body .pp-stack-card:hover {
    border-color: #14b8a6 !important;
    box-shadow: 0 12px 26px -20px rgba(15, 23, 42, 0.35) !important;
}
html body .pp-stack-card img { background: #f6f8f7 !important; }
html body .pp-stack-card .pp-stack-name { color: #0a0a0a !important; }
html body .pp-stack-card .pp-stack-price {
    color: #0d9488 !important;
    -webkit-text-fill-color: #0d9488 !important;
}
/* ===================== /R530 ===================== */


/* ===================== R534 — THE SHELF v3: cinematic specimen wall ===================== */
/* v2's white catalog cards read flat between the hero's comet streaks and the
   modules' starfield. v3 joins the family: glowing DARK specimen cards (translucent
   teal-edged glass like the module cards), each vial standing in a teal spotlight
   pool with a glow pad beneath it (the hero's vial presentation), a twinkling
   particle field + breathing bloom + scanline in the room, the family's
   Fraunces-italic accent word in the headline (#5eead4), a lens-flare beam under
   the head, and bright-teal buy CTAs (the hero promo-badge recipe: #2dd4bf on
   #04201d ink). Rank chips 01–07 glow faintly. Reduced-motion kills every loop;
   cards are visible by default. */

html body #r532-shelf {
    position: relative;
    background: #06070a;
    padding: clamp(72px, 9vw, 116px) 0 clamp(64px, 8vw, 100px);
    border-top: 1px solid rgba(45, 212, 191, 0.07);
    overflow: hidden;
}
html body #r532-shelf::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(90deg, rgba(13, 148, 136, 0.055) 0 1px, transparent 1px 44px),
        repeating-linear-gradient(0deg, rgba(13, 148, 136, 0.055) 0 1px, transparent 1px 44px);
    pointer-events: none;
}
html body #r532-shelf::after {
    content: '';
    position: absolute;
    top: -12%;
    left: -8%;
    width: 58%;
    height: 84%;
    background: radial-gradient(46% 46% at 38% 42%, rgba(45, 212, 191, 0.1), transparent 70%);
    pointer-events: none;
    animation: r532breathe 9s ease-in-out infinite alternate;
}
@keyframes r532breathe {
    from { opacity: 0.55; }
    to   { opacity: 1; }
}
html body #r532-shelf .r532-scan {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(45, 212, 191, 0.5) 30%, rgba(45, 212, 191, 0.5) 70%, transparent);
    opacity: 0.32;
    pointer-events: none;
    animation: r532scanX 13s linear infinite;
}
@keyframes r532scanX {
    from { transform: translateX(-2vw); }
    to   { transform: translateX(102vw); }
}

/* twinkling particle field (the modules-section starfield language) */
html body #r532-shelf .r532-stars { position: absolute; inset: 0; pointer-events: none; }
html body #r532-shelf .r532-stars span {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(94, 234, 212, 0.95), rgba(94, 234, 212, 0) 70%);
    box-shadow: 0 0 8px rgba(94, 234, 212, 0.45);
    opacity: 0.4;
    animation: r532twinkle 6s ease-in-out infinite alternate;
}
@keyframes r532twinkle {
    from { opacity: 0.12; transform: translateY(0); }
    to   { opacity: 0.8;  transform: translateY(-18px); }
}
html body #r532-shelf .r532-stars span:nth-child(1)  { left: 5%;  top: 16%; animation-duration: 5.2s; }
html body #r532-shelf .r532-stars span:nth-child(2)  { left: 14%; top: 66%; animation-duration: 7.4s; animation-delay: 0.8s; width: 3px; height: 3px; }
html body #r532-shelf .r532-stars span:nth-child(3)  { left: 23%; top: 30%; animation-duration: 6.1s; animation-delay: 1.6s; }
html body #r532-shelf .r532-stars span:nth-child(4)  { left: 34%; top: 80%; animation-duration: 8.2s; animation-delay: 0.4s; width: 5px; height: 5px; }
html body #r532-shelf .r532-stars span:nth-child(5)  { left: 45%; top: 12%; animation-duration: 5.7s; animation-delay: 2.1s; }
html body #r532-shelf .r532-stars span:nth-child(6)  { left: 53%; top: 52%; animation-duration: 7.9s; animation-delay: 1.1s; width: 3px; height: 3px; }
html body #r532-shelf .r532-stars span:nth-child(7)  { left: 62%; top: 24%; animation-duration: 6.6s; animation-delay: 0.2s; }
html body #r532-shelf .r532-stars span:nth-child(8)  { left: 69%; top: 72%; animation-duration: 5.4s; animation-delay: 1.9s; width: 5px; height: 5px; }
html body #r532-shelf .r532-stars span:nth-child(9)  { left: 77%; top: 38%; animation-duration: 7.1s; animation-delay: 0.6s; }
html body #r532-shelf .r532-stars span:nth-child(10) { left: 86%; top: 14%; animation-duration: 6.3s; animation-delay: 2.4s; width: 3px; height: 3px; }
html body #r532-shelf .r532-stars span:nth-child(11) { left: 92%; top: 60%; animation-duration: 8.6s; animation-delay: 1.3s; }
html body #r532-shelf .r532-stars span:nth-child(12) { left: 10%; top: 90%; animation-duration: 6.9s; animation-delay: 0.9s; }

html body #r532-shelf .container { position: relative; z-index: 1; }

/* ── header ── */
html body #r532-shelf .r532-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 22px;
}
html body #r532-shelf .r532-title {
    font-family: 'Bricolage Grotesque', 'Geist', sans-serif !important;
    font-weight: 800 !important;
    /* 82px cap: "Most popular products" measures 1044px at 96px against a
       926px column — 85px is the one-line ceiling at 1366. */
    font-size: clamp(44px, 6vw, 82px) !important;
    letter-spacing: -0.02em !important;
    line-height: 1.04 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    /* soft white glow + faint teal ambient so it reads lit, not blurred */
    text-shadow:
        0 0 16px rgba(255, 255, 255, 0.28),
        0 0 48px rgba(255, 255, 255, 0.11),
        0 0 110px rgba(94, 234, 212, 0.13) !important;
    margin: 0 !important;
}
html body #r532-shelf .r532-lede {
    font-family: 'Fraunces', Georgia, serif !important;
    font-size: clamp(1rem, 1.4vw, 1.12rem) !important;
    line-height: 1.55 !important;
    color: #a7b0ac !important;
    -webkit-text-fill-color: #a7b0ac !important;
    margin: 14px 0 0 !important;
    max-width: 52ch;
}
/* lens-flare beam under the head (the modules-section divider language) */
html body #r532-shelf .r532-beam {
    height: 2px;
    width: min(560px, 58%);
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(94, 234, 212, 0.7), rgba(94, 234, 212, 0.12) 70%, transparent);
    box-shadow: 0 0 14px rgba(94, 234, 212, 0.4);
    opacity: 0.55;
    margin: 0 0 clamp(26px, 3.4vw, 40px);
}
html body #r532-shelf .r532-catalog-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    white-space: nowrap;
    padding: 14px 26px;
    border-radius: 999px;
    border: none;
    background: #2dd4bf;
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    color: #04201d !important;
    -webkit-text-fill-color: #04201d !important;
    text-decoration: none !important;
    box-shadow: 0 0 14px rgba(45, 212, 191, 0.25);
    transition: background 0.2s ease, transform 0.18s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.2s ease;
}
html body #r532-shelf .r532-catalog-link i { transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1); }
html body #r532-shelf .r532-catalog-link:hover {
    background: #5eead4;
    box-shadow: 0 0 14px rgba(94, 234, 212, 0.55), 0 8px 14px -8px rgba(45, 212, 191, 0.6);
}
html body #r532-shelf .r532-catalog-link:hover i { transform: translateX(3px); }
html body #r532-shelf .r532-catalog-link:active { transform: scale(0.97); }

/* ── grid ── */
html body #r532-shelf .r532-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

/* ── cards: dark glowing specimen glass ── */
html body #r532-shelf .r532-card {
    background: linear-gradient(180deg, rgba(17, 26, 28, 0.92), rgba(9, 13, 15, 0.97));
    border: 1px solid rgba(45, 212, 191, 0.14);
    border-radius: 18px;
    padding: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: transform 0.24s cubic-bezier(0.23, 1, 0.32, 1),
                border-color 0.24s ease,
                box-shadow 0.24s ease;
}
html body #r532-shelf .r532-card:hover {
    transform: translateY(-5px);
    border-color: rgba(45, 212, 191, 0.5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 14px rgba(45, 212, 191, 0.22);
}

/* stage: the vial under a teal spotlight */
html body #r532-shelf .r532-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    height: 264px; /* R539: cards a touch longer */
    border-radius: 18px 18px 0 0;
    overflow: hidden;
    border-bottom: 1px solid rgba(45, 212, 191, 0.1);
    background:
        radial-gradient(85% 72% at 50% 60%, rgba(45, 212, 191, 0.16), rgba(45, 212, 191, 0.04) 52%, transparent 76%),
        linear-gradient(180deg, #0c1114, #07090b);
    text-decoration: none !important;
}
/* glow pad beneath the vial */
html body #r532-shelf .r532-stage::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 9%;
    width: 60%;
    height: 13%;
    transform: translateX(-50%);
    background: radial-gradient(50% 50% at 50% 50%, rgba(45, 212, 191, 0.32), transparent 70%);
    filter: blur(7px);
    opacity: 0.75;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
html body #r532-shelf .r532-card:hover .r532-stage::before { opacity: 1; }
/* Anti-blur: the img is laid out 5% LARGER and rests at scale(.952), so the
   hover zoom ends at scale(1) — the bitmap is never stretched past its raster
   size, which is what caused the half-second blur during the transition. */
html body #r532-shelf .r532-stage img {
    position: relative;
    max-width: 88%;
    max-height: 95%;
    object-fit: contain;
    transform: scale(0.952);
    will-change: transform;
    backface-visibility: hidden;
    filter: drop-shadow(0 16px 20px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 11px rgba(45, 212, 191, 0.12));
    transition: transform 0.26s cubic-bezier(0.23, 1, 0.32, 1), filter 0.26s ease;
}
html body #r532-shelf .r532-card:hover .r532-stage img {
    transform: scale(1);
    filter: drop-shadow(0 16px 20px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 17px rgba(45, 212, 191, 0.24));
}

/* badge chips */
html body #r532-shelf .r532-chip {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 0.64rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em;
    color: #5eead4 !important;
    -webkit-text-fill-color: #5eead4 !important;
    background: rgba(7, 12, 12, 0.78);
    border: 1px solid rgba(45, 212, 191, 0.38);
    border-radius: 999px;
    padding: 4px 10px;
}

/* info */
html body #r532-shelf .r532-name {
    display: block;
    font-family: 'Geist', 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.18rem !important;
    line-height: 1.24 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-decoration: none !important;
    margin: 14px 16px 3px;
    transition: color 0.18s ease;
}
html body #r532-shelf .r532-name:hover { color: #5eead4 !important; -webkit-text-fill-color: #5eead4 !important; }
html body #r532-shelf .r532-dose {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 0.84rem !important;
    font-weight: 600 !important;
    color: #bccdc7 !important;
    -webkit-text-fill-color: #bccdc7 !important;
    margin: 0 16px;
}
html body #r532-shelf .r532-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 10px 16px 0;
}
html body #r532-shelf .r532-now {
    font-family: 'JetBrains Mono', monospace !important;
    font-weight: 700 !important;
    font-size: 1.34rem !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-variant-numeric: tabular-nums;
}
html body #r532-shelf .r532-was {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 0.85rem !important;
    color: #6e7d78 !important;
    -webkit-text-fill-color: #6e7d78 !important;
    text-decoration: line-through;
}
html body #r532-shelf .r532-save {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 0.74rem !important;
    color: #5eead4 !important;
    -webkit-text-fill-color: #5eead4 !important;
    background: rgba(45, 212, 191, 0.12);
    border-radius: 999px;
    padding: 3px 10px;
}

/* add-to-cart — the buy color: bright teal on ink */
html body #r532-shelf .r532-add {
    margin: 13px 16px 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    border-radius: 999px;
    background: #2dd4bf;
    color: #04201d !important;
    -webkit-text-fill-color: #04201d !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.88rem !important;
    padding: 12px 0;
    cursor: pointer;
    transition: transform 0.16s cubic-bezier(0.23, 1, 0.32, 1), background 0.2s ease, box-shadow 0.2s ease;
}
html body #r532-shelf .r532-add:hover {
    background: #5eead4;
    box-shadow: 0 0 14px rgba(94, 234, 212, 0.45);
}
html body #r532-shelf .r532-add:active { transform: scale(0.97); }
html body #r532-shelf .r532-add:focus-visible { outline: 2px solid #5eead4; outline-offset: 3px; }

/* -- floating specimens: slow desynced bob on a wrapper element so it
   composes with the img anti-blur scale and hover zoom instead of
   fighting them on the same transform -- */
html body #r532-shelf .r532-float {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    will-change: transform;
    animation: r532float 5s ease-in-out infinite;
}
@keyframes r532float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}
/* desync so the shelf breathes organically, not in lockstep */
html body #r532-shelf .r532-card:nth-child(2) .r532-float { animation-duration: 5.6s; animation-delay: 0.7s; }
html body #r532-shelf .r532-card:nth-child(3) .r532-float { animation-duration: 4.7s; animation-delay: 1.4s; }
html body #r532-shelf .r532-card:nth-child(4) .r532-float { animation-duration: 5.3s; animation-delay: 0.3s; }
html body #r532-shelf .r532-card:nth-child(5) .r532-float { animation-duration: 4.9s; animation-delay: 1.9s; }
html body #r532-shelf .r532-card:nth-child(6) .r532-float { animation-duration: 5.8s; animation-delay: 1.1s; }
html body #r532-shelf .r532-card:nth-child(7) .r532-float { animation-duration: 5.1s; animation-delay: 2.3s; }
html body #r532-shelf .r532-card:nth-child(8) .r532-float { animation-duration: 5.5s; animation-delay: 0.9s; }

/* ── scroll reveal (enhancement only — default state is fully visible) ── */
html body #r532-shelf .r532-card.r532-pre { opacity: 0; transform: translateY(18px) scale(0.985); }
html body #r532-shelf .r532-card.r532-in {
    opacity: 1;
    transform: none;
    transition: opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1),
                transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

/* ── responsive ── */
@media (max-width: 1024px) {
    html body #r532-shelf .r532-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    html body #r532-shelf .r532-head { flex-direction: column; align-items: flex-start; gap: 18px; }
    html body #r532-shelf .r532-catalog-link { padding: 12px 22px; font-size: 0.9rem !important; }
    html body #r532-shelf .r532-beam { width: 78%; }
    html body #r532-shelf .r532-grid { gap: 12px; }
    html body #r532-shelf .r532-stage { height: 212px; } /* R539: a touch longer */
    html body #r532-shelf .r532-name { font-size: 0.92rem !important; margin: 12px 13px 2px; }
    html body #r532-shelf .r532-dose { margin: 0 13px; }
    html body #r532-shelf .r532-price { margin: 9px 13px 0; }
    html body #r532-shelf .r532-now { font-size: 1.18rem !important; }
    html body #r532-shelf .r532-add { margin: 11px 13px 13px; padding: 11px 0; font-size: 0.84rem !important; }
    html body #r532-shelf .r532-scan { display: none; }
    html body #r532-shelf .r532-stars span:nth-child(n+7) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    html body #r532-shelf::after { animation: none !important; opacity: 1; }
    html body #r532-shelf .r532-scan { display: none !important; }
    html body #r532-shelf .r532-stars span { animation: none !important; opacity: 0.3; }
    html body #r532-shelf .r532-float { animation: none !important; }
    html body #r532-shelf .r532-card,
    html body #r532-shelf .r532-stage img,
    html body #r532-shelf .r532-stage::before,
    html body #r532-shelf .r532-add,
    html body #r532-shelf .r532-catalog-link,
    html body #r532-shelf .r532-catalog-link i { transition: none !important; }
    html body #r532-shelf .r532-card.r532-pre { opacity: 1 !important; transform: none !important; }
    html body #r532-shelf .r532-card:hover { transform: none !important; }
    html body #r532-shelf .r532-card:hover .r532-stage img { transform: scale(0.952) !important; }
}
/* ===================== /R534 ===================== */


/* ===================== R535 — hero GLP3-R vial: slight float ===================== */
/* The R154 remodel pins the vial with `transform: none !important` (and the
   anchor with an !important centering transform) — !important author rules beat
   CSS-animation output for that property, so keyframes on `transform` can never
   show. The float therefore animates the separate `translate` property, which
   no rule touches and which composes with the pinned transform.
   `animation` itself also needs !important to outrank the legacy
   `animation: none !important` killer. 2.8s delay clears the GSAP entrance;
   keyframes start/end at 0 so the handoff is invisible. */
html body #hero .hero-vial-main {
    will-change: translate;
    animation: r535heroFloat 6.5s ease-in-out 2.8s infinite !important;
}
@keyframes r535heroFloat {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -9px; }
}
@media (prefers-reduced-motion: reduce) {
    html body #hero .hero-vial-main { animation: none !important; }
}
/* ===================== /R535 ===================== */


/* ===================== R536 — age gate: legible brand lockup ===================== */
/* logo.png bakes a WHITE wordmark into the bitmap — invisible on the gate's white
   card. The gate now uses the wing-only asset + a real-text wordmark below it.
   The wing asset is already brand-green: strip the --cy-logo-shift hue filter
   (12804/20277) that would re-tint it. */
html body .age-gate .age-gate-logo {
    max-width: 132px;
    margin-bottom: 10px;
    filter: drop-shadow(0 2px 8px rgba(13, 148, 136, 0.22)) !important;
}
html body .age-gate .age-gate-logo-fallback {
    display: block;
    margin-bottom: 26px;
}
/* dark ink on the white card — overrides the var(--text) rule at ~21199 */
html body .age-gate .age-gate-logo-fallback .logo-text {
    color: #0c1514 !important;
    -webkit-text-fill-color: #0c1514 !important;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.26em;
}
html body .age-gate .age-gate-logo-fallback .logo-sub {
    /* teal-700: #0d9488 is only ~3.9:1 on white — too low for an 11px label */
    color: #0f766e !important;
    -webkit-text-fill-color: #0f766e !important;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.42em;
    margin-left: 10px;
    vertical-align: 2px;
}
/* ===================== /R536 ===================== */


/* ===================== R537 — shelf head: smooth scroll-in reveal ===================== */
/* The title/lede/CTA were fully formed the moment you reached the section while
   the cards animated in below. Mirror the card reveal pattern: classes only
   added by JS when IO exists and reduced-motion is off, so the head is visible
   by default. JS removes both classes after the reveal so the catalog link's
   own hover transition comes back. */
html body #r532-shelf .r532-hpre { opacity: 0; transform: translateY(16px); }
html body #r532-shelf .r532-hin {
    opacity: 1;
    transform: none;
    transition: opacity 0.75s cubic-bezier(0.23, 1, 0.32, 1),
                transform 0.75s cubic-bezier(0.23, 1, 0.32, 1);
}
@media (prefers-reduced-motion: reduce) {
    html body #r532-shelf .r532-hpre { opacity: 1 !important; transform: none !important; }
    html body #r532-shelf .r532-hin { transition: none !important; }
}
/* ===================== /R537 ===================== */


/* ===================== R538 — shelf cards: exhibit-grade presence ===================== */
/* Layered on R534. Each card becomes a lit display case:
   (1) a slow conic "comet" ring that doubles as the card outline — per-card
       accent temperature, desynced phase, brightens on hover;
   (2) live status-dot pulse on the badge chips;
   (3) sheen sweep + icon spin on Add to cart.
   (Corner brackets and the ghost plinth numeral shipped here originally and
   were removed at the owner's request.)
   Transform/opacity only; reduced-motion freezes the ring and dots but keeps
   every static graphic. */

/* per-card accent temperature: teal / mint / ice / seafoam */
html body #r532-shelf .r532-card { --r538t: #2dd4bf; }
html body #r532-shelf .r532-card:nth-child(4n+2) { --r538t: #5eead4; }
html body #r532-shelf .r532-card:nth-child(4n+3) { --r538t: #67e8f9; }
html body #r532-shelf .r532-card:nth-child(4n)   { --r538t: #34d399; }

/* (1) the card's own border/bg hand off to the ring (::before) + plate (::after) */
html body #r532-shelf .r532-card {
    isolation: isolate;
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none;
}
html body #r532-shelf .r532-card:hover {
    border-color: transparent !important;
    box-shadow: 0 0 18px rgba(45, 212, 191, 0.16);
}
html body #r532-shelf .r532-card::before {
    content: '';
    position: absolute;
    z-index: -2;
    left: 50%;
    top: 50%;
    width: 280%;
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%) rotate(0turn);
    /* fallback ring for browsers without color-mix */
    background: conic-gradient(
        rgba(45, 212, 191, 0.22) 0turn,
        rgba(45, 212, 191, 0.22) 0.60turn,
        rgba(45, 212, 191, 0.55) 0.74turn,
        rgba(220, 255, 250, 0.85) 0.80turn,
        rgba(45, 212, 191, 0.22) 0.86turn,
        rgba(45, 212, 191, 0.22) 1turn
    );
    background: conic-gradient(
        color-mix(in srgb, var(--r538t) 24%, transparent) 0turn,
        color-mix(in srgb, var(--r538t) 24%, transparent) 0.60turn,
        color-mix(in srgb, var(--r538t) 60%, transparent) 0.74turn,
        color-mix(in srgb, var(--r538t) 78%, #ffffff) 0.80turn,
        color-mix(in srgb, var(--r538t) 24%, transparent) 0.86turn,
        color-mix(in srgb, var(--r538t) 24%, transparent) 1turn
    );
    animation: r538spin 10s linear infinite;
    transition: filter 0.35s ease;
    pointer-events: none;
}
html body #r532-shelf .r532-card:hover::before { filter: brightness(1.7) saturate(1.1); }
@keyframes r538spin {
    to { transform: translate(-50%, -50%) rotate(1turn); }
}
/* desync the comets so the shelf doesn't strobe in lockstep */
html body #r532-shelf .r532-card:nth-child(2)::before { animation-delay: -1.3s; }
html body #r532-shelf .r532-card:nth-child(3)::before { animation-delay: -2.7s; }
html body #r532-shelf .r532-card:nth-child(4)::before { animation-delay: -4.1s; }
html body #r532-shelf .r532-card:nth-child(5)::before { animation-delay: -5.4s; }
html body #r532-shelf .r532-card:nth-child(6)::before { animation-delay: -6.8s; }
html body #r532-shelf .r532-card:nth-child(7)::before { animation-delay: -8.2s; }
html body #r532-shelf .r532-card:nth-child(8)::before { animation-delay: -9.5s; }
/* dark plate over the ring's center — the old card surface, 1px inset */
html body #r532-shelf .r532-card::after {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 1px;
    border-radius: 17px;
    background: linear-gradient(180deg, rgba(13, 20, 22, 0.985), rgba(7, 10, 12, 0.995));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    pointer-events: none;
}

/* the floating vial paints above the stage particles */
html body #r532-shelf .r532-float { position: relative; z-index: 1; }

/* (4) badge chips get a live status dot */
html body #r532-shelf .r532-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
html body #r532-shelf .r532-chip::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--r538t, #2dd4bf);
    box-shadow: 0 0 6px var(--r538t, #2dd4bf);
    animation: r538dot 2.2s ease-in-out infinite alternate;
}
html body #r532-shelf .r532-card:nth-child(2) .r532-chip::before { animation-delay: -0.7s; }
html body #r532-shelf .r532-card:nth-child(6) .r532-chip::before { animation-delay: -1.4s; }
@keyframes r538dot {
    from { transform: scale(0.8); opacity: 0.55; }
    to   { transform: scale(1.25); opacity: 1; }
}

/* (5) Add to cart: sheen sweep on card hover + icon spin on button hover */
html body #r532-shelf .r532-add {
    position: relative;
    overflow: hidden;
}
html body #r532-shelf .r532-add::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 34%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    transform: translateX(-160%) skewX(-18deg);
    pointer-events: none;
}
html body #r532-shelf .r532-card:hover .r532-add::before {
    animation: r538sheen 0.85s cubic-bezier(0.23, 1, 0.32, 1) 0.12s 1 both;
}
@keyframes r538sheen {
    from { transform: translateX(-160%) skewX(-18deg); }
    to   { transform: translateX(420%) skewX(-18deg); }
}
html body #r532-shelf .r532-add i {
    transition: transform 0.24s cubic-bezier(0.23, 1, 0.32, 1);
}
html body #r532-shelf .r532-add:hover i { transform: rotate(90deg); }

@media (prefers-reduced-motion: reduce) {
    html body #r532-shelf .r532-card::before { animation: none !important; }
    html body #r532-shelf .r532-chip::before { animation: none !important; }
    html body #r532-shelf .r532-card:hover .r532-add::before { animation: none !important; }
    html body #r532-shelf .r532-add i { transition: none !important; }
}
/* ===================== /R538 ===================== */


/* ===================== R539 — shelf stages: faint white drift particles ===================== */
/* Same mechanic as the products page .card-drift dots, recolored white and
   kept faint. Six spans per stage (rendered before the badge so nth-of-type
   1-6 always addresses them); the vial wrapper sits at z-index 1 above.
   Reduced-motion hides them entirely — a frozen dot is just dirt. */
html body #r532-shelf .r532-drift {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.30);
    pointer-events: none;
    z-index: 0;
    opacity: 0;
}
html body #r532-shelf .r532-drift:nth-of-type(1) { top: 16%; left: 12%; animation: r539a 12s linear infinite 0s; }
html body #r532-shelf .r532-drift:nth-of-type(2) { top: 68%; left: 86%; animation: r539b 14s linear infinite 1.5s; width: 2px; height: 2px; }
html body #r532-shelf .r532-drift:nth-of-type(3) { top: 30%; left: 78%; animation: r539c 11s linear infinite 0.8s; width: 4px; height: 4px; }
html body #r532-shelf .r532-drift:nth-of-type(4) { top: 78%; left: 18%; animation: r539d 13s linear infinite 3.2s; }
html body #r532-shelf .r532-drift:nth-of-type(5) { top: 46%; left:  7%; animation: r539a 16s linear infinite 5.5s; width: 2px; height: 2px; }
html body #r532-shelf .r532-drift:nth-of-type(6) { top: 22%; left: 90%; animation: r539c 15s linear infinite 7s; }
@keyframes r539a {
    0%, 100% { transform: translate(0, 0); opacity: 0; }
    15%      { opacity: 0.5; }
    50%      { transform: translate(15px, -12px); opacity: 0.38; }
    85%      { opacity: 0.25; }
}
@keyframes r539b {
    0%, 100% { transform: translate(0, 0); opacity: 0; }
    15%      { opacity: 0.45; }
    50%      { transform: translate(-18px, 14px); opacity: 0.32; }
    85%      { opacity: 0.2; }
}
@keyframes r539c {
    0%, 100% { transform: translate(0, 0); opacity: 0; }
    12%      { opacity: 0.45; }
    50%      { transform: translate(-12px, -16px); opacity: 0.32; }
    88%      { opacity: 0.25; }
}
@keyframes r539d {
    0%, 100% { transform: translate(0, 0); opacity: 0; }
    14%      { opacity: 0.42; }
    50%      { transform: translate(16px, 14px); opacity: 0.32; }
    86%      { opacity: 0.2; }
}
@media (prefers-reduced-motion: reduce) {
    html body #r532-shelf .r532-drift { display: none !important; }
}
/* ===================== /R539 ===================== */


/* ===================== R540 — products page: catalog console (white theme) ===================== */
/* v2: bright panel, no kicker, no scanline. The toolbar, tiles, select and
   autocomplete keep their ORIGINAL light styles (the v1 dark overrides are
   gone); this block only draws the panel, the headline, the live stats, and
   upsizes the search into a tall pill. Scoped to #r540-console - restoring
   products.backup-pre-R540.html makes the whole block inert. */
html body #products #r540-console {
    position: relative;
    overflow: visible;
    isolation: isolate;
    background: #ffffff;
    border: 1px solid rgba(13, 148, 136, 0.18);
    border-radius: 20px;
    padding: 42px 44px 32px;
    margin-bottom: 26px;
    box-shadow: 0 14px 40px rgba(8, 35, 31, 0.07);
}
html body #products #r540-console > * { position: relative; z-index: 1; }

/* head */
html body #products #r540-console .r540-head { text-align: left; margin-bottom: 24px; }
html body #products #r540-console .r540-title {
    font-family: 'Bricolage Grotesque', 'Geist', sans-serif !important;
    font-weight: 800 !important;
    font-size: clamp(33px, 4.6vw, 56px) !important;
    letter-spacing: -0.02em !important;
    line-height: 1.06 !important;
    color: #0b1413 !important;
    -webkit-text-fill-color: #0b1413 !important;
    margin: 0 0 12px !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    text-wrap: balance;
}
html body #products #r540-console .r540-em {
    font-family: 'Fraunces', Georgia, serif !important;
    font-style: italic !important;
    font-weight: 500 !important;
    color: #0f766e !important;
    -webkit-text-fill-color: #0f766e !important;
}
html body #products #r540-console .r540-stats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 12.5px !important;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #44544f !important;
}
html body #products #r540-console .r540-stats span {
    font-family: inherit !important;
    color: inherit !important;
    -webkit-text-fill-color: #44544f !important;
}
html body #products #r540-console .r540-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(13, 148, 136, 0.7);
}

/* toolbar wrapper: spacing only - the controls keep their light skin */
html body #products #r540-console .catalog-sticky-wrap {
    position: static;
    background: transparent;
    box-shadow: none;
    padding: 0;
    margin-bottom: 14px;
}
html body #products #r540-console .catalog-sticky-wrap::before { display: none; }
html body #products #r540-console .catalog-sticky-wrap > .catalog-toolbar { padding: 0; margin-bottom: 0; }

/* search: taller and fully oval */
html body #products #r540-console .product-search {
    border-radius: 999px !important;
    border: 1.5px solid rgba(13, 148, 136, 0.32) !important;
    background: #ffffff !important;
    box-shadow: 0 2px 12px rgba(8, 35, 31, 0.06) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
html body #products #r540-console .product-search input,
html body #main-content #products #r540-console input#product-search {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    font-size: 1.02rem !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
html body #products #r540-console .product-search:focus-within {
    border-color: #0d9488 !important;
    box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.12) !important;
}
html body #products #r540-console .product-search > .fa-search { color: #0d9488 !important; }

/* sort select: pill + height matched to the taller search */
html body #main-content #products #r540-console select#product-sort {
    border-radius: 999px !important;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
}

html body #products #r540-console .catalog-quickjump { margin-bottom: 0; }

@media (max-width: 768px) {
    html body #products #r540-console { padding: 26px 18px 20px; border-radius: 16px; }
    html body #products #r540-console .r540-head { margin-bottom: 18px; }
    html body #products #r540-console .r540-stats { gap: 9px; font-size: 11px !important; }
    html body #products #r540-console .product-search input,
    html body #products #r540-console input#product-search {
        padding-top: 16px !important;
        padding-bottom: 16px !important;
    }
}
/* ===================== /R540 ===================== */


/* ===================== R541 — product card badges: bigger + bolder ===================== */
/* The BEST SELLER / TOP RATED / BLEND / -NN% chips on the catalog cards were
   9px — barely legible. Upsized with more padding; the save-pill follows. */
html body #main-content #products .product-card-badge {
    font-size: 11.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
    padding: 5px 11px !important;
}
html body #main-content #products .pc-save,
html body #main-content #products .product-card .pc-save {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    padding: 3px 10px !important;
}
/* ===================== /R541 ===================== */


/* ===================== R543 — account "Researcher Console" ===================== */
/* Full dashboard remodel: dark instrument command deck over a light workspace.
   Markup lives in account.html (hooks preserved); these rules are scoped to
   #dashboard-view so restoring account.backup-pre-R543.html leaves most of
   this inert. Legacy R468 dashboard rules are out-specced, not removed. */

html body #dashboard-view.dashboard { max-width: 1180px; }

/* author display values (flex/grid) would otherwise defeat the [hidden]
   attribute these sections rely on — pin it */
html body #dashboard-view .r543-insights[hidden],
html body #dashboard-view .r543-first[hidden],
html body #dashboard-view .r543-ladder[hidden],
html body #dashboard-view .dash-reorder-card[hidden],
html body #dashboard-view .dash-stats-strip[hidden] { display: none !important; }

/* a legacy decorative section::before (content:"") becomes a phantom GRID
   ITEM inside these containers, hijacking the first cell — strip it */
html body #dashboard-view .r543-insights::before,
html body #dashboard-view .r543-insights::after,
html body #dashboard-view .r543-actions::before,
html body #dashboard-view .r543-actions::after,
html body #dashboard-view .r543-actions-row::before,
html body #dashboard-view .r543-actions-row::after,
html body #dashboard-view .r543-first::before,
html body #dashboard-view .r543-first::after { content: none !important; }

/* ── command deck ── */
html body #dashboard-view .r543-deck {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: #06070a !important;
    border: 1px solid rgba(45, 212, 191, 0.16) !important;
    border-radius: 22px;
    padding: 30px 32px 26px;
    margin-bottom: 18px;
    box-shadow: 0 18px 50px rgba(4, 12, 11, 0.18);
}
html body #dashboard-view .r543-deck-fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
html body #dashboard-view .r543-bloom {
    position: absolute;
    left: 50%;
    top: -55%;
    width: 80%;
    height: 130%;
    transform: translateX(-50%);
    background: radial-gradient(50% 50% at 50% 50%, rgba(45, 212, 191, 0.13), transparent 70%);
    animation: r543breathe 9s ease-in-out infinite;
}
@keyframes r543breathe {
    0%, 100% { opacity: 0.5; }
    50%      { opacity: 1; }
}
html body #dashboard-view .r543-deck > * { position: relative; z-index: 1; }

/* deck header */
html body #dashboard-view .dash-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
}
html body #dashboard-view .dash-greeting { display: flex; align-items: center; gap: 16px; }
html body #dashboard-view .dash-avatar {
    width: 58px;
    height: 58px;
    border-radius: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Bricolage Grotesque', 'Inter', sans-serif !important;
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: #04201d !important;
    background: linear-gradient(135deg, #5eead4, #14b8a6);
    box-shadow: 0 0 0 2px rgba(94, 234, 212, 0.35), 0 8px 22px rgba(20, 184, 166, 0.25);
}
html body #dashboard-view .r543-kicker {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 10.5px !important;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #2dd4bf !important;
    margin-bottom: 4px;
}
html body #dashboard-view .dash-greeting-text h2 {
    font-family: 'Bricolage Grotesque', 'Inter', sans-serif !important;
    font-size: clamp(22px, 2.6vw, 31px) !important;
    font-weight: 800 !important;
    letter-spacing: -0.015em;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    margin: 0 0 3px !important;
    background: none !important;
}
html body #dashboard-view .dash-greeting-text h2 #user-name {
    color: #5eead4 !important;
    -webkit-text-fill-color: #5eead4 !important;
}
html body #dashboard-view .dash-greeting-text p {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 12px !important;
    color: #8fa39d !important;
    -webkit-text-fill-color: #8fa39d !important;
    margin: 0 !important;
}
html body #dashboard-view .dash-header-actions { display: flex; align-items: center; gap: 10px; }
html body #dashboard-view .dash-action-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: 999px;
    background: #2dd4bf !important;
    border: 1px solid #2dd4bf !important;
    color: #04201d !important;
    -webkit-text-fill-color: #04201d !important;
    font-weight: 700 !important;
    font-size: 0.86rem !important;
    text-decoration: none !important;
    transition: transform 0.16s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.2s ease, background 0.2s ease;
}
html body #dashboard-view .dash-action-pill:hover { background: #5eead4 !important; box-shadow: 0 0 16px rgba(94, 234, 212, 0.4); }
html body #dashboard-view .dash-action-pill:active { transform: scale(0.97); }
html body #dashboard-view .dash-logout {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    color: #c8d6d1 !important;
    -webkit-text-fill-color: #c8d6d1 !important;
    font-weight: 600 !important;
    font-size: 0.84rem !important;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, transform 0.16s cubic-bezier(0.23, 1, 0.32, 1);
}
html body #dashboard-view .dash-logout:hover { border-color: rgba(255, 255, 255, 0.38) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; }
html body #dashboard-view .dash-logout:active { transform: scale(0.97); }

/* deck readouts (stats strip) */
html body #dashboard-view .dash-stats-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
}
html body #dashboard-view .dss-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: linear-gradient(180deg, rgba(17, 26, 28, 0.85), rgba(10, 14, 16, 0.92)) !important;
    border: 1px solid rgba(45, 212, 191, 0.15) !important;
    border-radius: 16px;
    padding: 15px 16px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1), border-color 0.2s ease, box-shadow 0.2s ease;
}
html body #dashboard-view .dss-card:hover {
    transform: translateY(-2px);
    border-color: rgba(45, 212, 191, 0.45) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 14px rgba(45, 212, 191, 0.14);
}
html body #dashboard-view .dss-icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(45, 212, 191, 0.12) !important;
    color: #2dd4bf !important;
    font-size: 0.95rem;
}
html body #dashboard-view .dss-icon i { color: #2dd4bf !important; }
html body #dashboard-view .dss-label {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 10px !important;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #8fa39d !important;
    -webkit-text-fill-color: #8fa39d !important;
    margin-bottom: 3px;
}
html body #dashboard-view .dss-value {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 1.62rem !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-variant-numeric: tabular-nums;
}
html body #dashboard-view .dss-card-points .dss-value { color: #5eead4 !important; -webkit-text-fill-color: #5eead4 !important; }
html body #dashboard-view .dss-sub {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 11px !important;
    color: #7d948d !important;
    -webkit-text-fill-color: #7d948d !important;
    margin-top: 3px;
}
html body #dashboard-view .dss-sub strong { color: #aef3e6 !important; -webkit-text-fill-color: #aef3e6 !important; }
html body #dashboard-view .dss-sub i { color: #f59e0b !important; margin-right: 3px; }

/* free-shipping rail (revived) */
html body #dashboard-view .r543-ladder {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 14px;
    padding: 13px 16px;
    background: rgba(45, 212, 191, 0.07);
    border: 1px solid rgba(45, 212, 191, 0.2);
    border-radius: 14px;
}
html body #dashboard-view .r543-ladder-icon { color: #2dd4bf; font-size: 1rem; }
html body #dashboard-view .r543-ladder-main { flex: 1; min-width: 0; }
html body #dashboard-view .r543-ladder-text {
    font-size: 12.5px !important;
    color: #c8d6d1 !important;
    -webkit-text-fill-color: #c8d6d1 !important;
    margin-bottom: 7px;
}
html body #dashboard-view .r543-ladder-text strong { color: #5eead4 !important; -webkit-text-fill-color: #5eead4 !important; }
html body #dashboard-view .r543-ladder-bar {
    height: 7px;
    border-radius: 999px;
    background: rgba(45, 212, 191, 0.12);
    overflow: hidden;
}
html body #dashboard-view .r543-ladder-fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #14b8a6, #5eead4);
    transition: width 0.9s cubic-bezier(0.23, 1, 0.32, 1);
}

/* ── quick actions ── */
html body #dashboard-view .r543-actions { margin-bottom: 18px; }
html body #dashboard-view .dash-reorder-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #ffffff !important;
    border: 1px solid rgba(13, 148, 136, 0.22) !important;
    border-radius: 16px;
    padding: 16px 18px;
    margin-bottom: 12px;
    box-shadow: 0 8px 26px rgba(8, 35, 31, 0.06);
}
html body #dashboard-view .dro-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(13, 148, 136, 0.1) !important;
    color: #0d9488 !important;
    font-size: 1.05rem;
}
html body #dashboard-view .dro-body { flex: 1; min-width: 0; }
html body #dashboard-view .dro-label {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 10.5px !important;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: #44544f !important;
    margin-bottom: 3px;
}
html body #dashboard-view .dro-line {
    font-size: 0.92rem !important;
    font-weight: 600;
    color: #0b1413 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
html body #dashboard-view .dro-cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 999px;
    border: none;
    background: linear-gradient(180deg, #14b8a6, #0d9488) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.88rem !important;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(20, 184, 166, 0.3);
    transition: transform 0.16s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.2s ease;
}
html body #dashboard-view .dro-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(20, 184, 166, 0.42); }
html body #dashboard-view .dro-cta:active { transform: scale(0.97); }
html body #dashboard-view .r543-actions-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
html body #dashboard-view .r543-action {
    display: flex;
    align-items: center;
    gap: 13px;
    background: #ffffff;
    border: 1px solid rgba(11, 20, 19, 0.08);
    border-radius: 14px;
    padding: 14px 16px;
    text-decoration: none !important;
    transition: transform 0.18s cubic-bezier(0.23, 1, 0.32, 1), border-color 0.2s ease, box-shadow 0.2s ease;
}
html body #dashboard-view .r543-action:hover {
    transform: translateY(-2px);
    border-color: rgba(13, 148, 136, 0.4);
    box-shadow: 0 10px 24px rgba(8, 35, 31, 0.08);
}
html body #dashboard-view .r543-action-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(13, 148, 136, 0.1);
    color: #0d9488;
    font-size: 0.95rem;
}
html body #dashboard-view .r543-action-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
html body #dashboard-view .r543-action-text strong {
    font-size: 0.92rem !important;
    font-weight: 700;
    color: #0b1413 !important;
}
html body #dashboard-view .r543-action-text span {
    font-size: 0.76rem !important;
    color: #5c6b66 !important;
}
html body #dashboard-view .r543-action-arrow {
    color: #9fb3ad;
    font-size: 0.8rem;
    transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1), color 0.2s ease;
}
html body #dashboard-view .r543-action:hover .r543-action-arrow { transform: translateX(3px); color: #0d9488; }

/* ── research activity band ── */
html body #dashboard-view .r543-insights {
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    gap: 12px;
    margin-bottom: 18px;
}
html body #dashboard-view .r543-card {
    background: #ffffff;
    border: 1px solid rgba(11, 20, 19, 0.08);
    border-radius: 16px;
    padding: 18px 20px;
    box-shadow: 0 8px 26px rgba(8, 35, 31, 0.05);
}
html body #dashboard-view .r543-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}
html body #dashboard-view .r543-card-head h3 {
    font-size: 1.02rem !important;
    font-weight: 800 !important;
    color: #0b1413 !important;
    margin: 0 !important;
}
html body #dashboard-view .r543-card-sub {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 11px !important;
    color: #5c6b66 !important;
    white-space: nowrap;
}
html body #dashboard-view .r543-chart svg { width: 100%; height: auto; display: block; }
html body #dashboard-view .r543-axis { stroke: rgba(11, 20, 19, 0.1); stroke-width: 1; }
html body #dashboard-view .r543-bar {
    fill: #0d9488;
    transform-box: fill-box;
    transform-origin: bottom;
    animation: r543bar 0.7s cubic-bezier(0.23, 1, 0.32, 1) both;
}
@keyframes r543bar {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
}
html body #dashboard-view .r543-bar-val {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    fill: #44544f;
}
html body #dashboard-view .r543-bar-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px;
    fill: #8aa39c;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
html body #dashboard-view .r543-points-body {
    display: flex;
    align-items: center;
    gap: 16px;
}
html body #dashboard-view .r543-ring { flex: 0 0 116px; width: 116px; }
html body #dashboard-view .r543-ring svg { width: 100%; height: auto; display: block; }
html body #dashboard-view .r543-ring-track { fill: none; stroke: rgba(13, 148, 136, 0.12); stroke-width: 10; }
html body #dashboard-view .r543-ring-fill {
    fill: none;
    stroke: #0d9488;
    stroke-width: 10;
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: 55px 55px;
    animation: r543ring 1.1s cubic-bezier(0.23, 1, 0.32, 1) both;
}
@keyframes r543ring {
    from { stroke-dashoffset: var(--r543-c, 276); }
}
html body #dashboard-view .r543-ring-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 21px;
    font-weight: 800;
    fill: #0b1413;
}
html body #dashboard-view .r543-ring-cap {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    fill: #7d948d;
}
html body #dashboard-view .r543-ledger {
    flex: 1;
    min-width: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
html body #dashboard-view .r543-ledger li {
    display: grid;
    grid-template-columns: 10px auto 1fr auto;
    align-items: center;
    gap: 8px;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 11.5px !important;
    padding: 7px 10px;
    background: rgba(11, 20, 19, 0.025);
    border: 1px solid rgba(11, 20, 19, 0.05);
    border-radius: 9px;
}
html body #dashboard-view .r543-ledger-dot { width: 8px; height: 8px; border-radius: 50%; }
html body #dashboard-view .r543-st-paid { background: #10b981; box-shadow: 0 0 6px rgba(16, 185, 129, 0.5); }
html body #dashboard-view .r543-st-shipped { background: #0ea5e9; box-shadow: 0 0 6px rgba(14, 165, 233, 0.5); }
html body #dashboard-view .r543-st-awaiting { background: #f59e0b; box-shadow: 0 0 6px rgba(245, 158, 11, 0.5); }
html body #dashboard-view .r543-ledger-ref { font-weight: 700; color: #0b1413 !important; overflow: hidden; text-overflow: ellipsis; }
html body #dashboard-view .r543-ledger-date { color: #7d948d !important; }
html body #dashboard-view .r543-ledger-total { font-weight: 700; color: #0d9488 !important; }

/* first-order nudge */
html body #dashboard-view .r543-first {
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(180deg, rgba(13, 148, 136, 0.05), rgba(13, 148, 136, 0.02));
    border: 1px dashed rgba(13, 148, 136, 0.35);
    border-radius: 16px;
    padding: 18px 20px;
    margin-bottom: 18px;
}
html body #dashboard-view .r543-first-icon {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(13, 148, 136, 0.1);
    color: #0d9488;
    font-size: 1.1rem;
}
html body #dashboard-view .r543-first-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
html body #dashboard-view .r543-first-body strong { font-size: 0.96rem !important; color: #0b1413 !important; }
html body #dashboard-view .r543-first-body span { font-size: 0.82rem !important; color: #44544f !important; }
html body #dashboard-view .r543-first-cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: 999px;
    background: #0b1413;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.86rem !important;
    text-decoration: none !important;
    transition: transform 0.16s cubic-bezier(0.23, 1, 0.32, 1), background 0.2s ease;
}
html body #dashboard-view .r543-first-cta:hover { background: #143230; transform: translateY(-1px); }

/* ── workspace: tab rail ──
   v2 after owner feedback ("goofy / immature"): ONE quiet container instead
   of five floating candy cards. Kills the legacy spinning conic border, the
   rainbow per-tab icon chips, the uppercase tracked labels, and the bouncy
   hover. Flat rows, monochrome icons, a single dark-ink active pill that
   echoes the command deck. */
html body #dashboard-view .dash-tabs {
    background: #ffffff !important;
    border: 1px solid rgba(11, 20, 19, 0.08) !important;
    border-radius: 16px !important;
    padding: 8px !important;
    gap: 2px !important;
    box-shadow: 0 8px 26px rgba(8, 35, 31, 0.05) !important;
}
html body #dashboard-view .dash-tabs::before,
html body #dashboard-view .dash-tabs::after { content: none !important; display: none !important; }
html body #dashboard-view .dash-tab {
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    padding: 11px 12px !important;
    gap: 11px !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    color: #3f4d49 !important;
    box-shadow: none !important;
    transition: background 0.18s ease, color 0.18s ease;
}
html body #dashboard-view .dash-tab::before,
html body #dashboard-view .dash-tab::after { content: none !important; display: none !important; }
html body #dashboard-view .dash-tab span {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: inherit !important;
}
/* one monochrome icon treatment — no chips, no rainbow */
html body #dashboard-view .dash-tabs .dash-tab > i:first-child {
    width: 20px !important;
    height: 20px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    color: #8aa19a !important;
    font-size: 0.92rem !important;
    transition: color 0.18s ease;
}
html body #dashboard-view .dash-tab:hover {
    background: rgba(11, 20, 19, 0.045) !important;
    border-color: transparent !important;
    color: #0b1413 !important;
    transform: none !important;
    box-shadow: none !important;
}
html body #dashboard-view .dash-tab:hover > i:first-child {
    transform: none !important;
    box-shadow: none !important;
    color: #0d9488 !important;
}
/* active: dark-ink pill, echoing the command deck */
html body #dashboard-view .dash-tab.active {
    background: #0f1b19 !important;
    border-color: #0f1b19 !important;
    box-shadow: none !important;
}
html body #dashboard-view .dash-tab.active span { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; }
html body #dashboard-view .dash-tabs .dash-tab.active > i:first-child { color: #5eead4 !important; }
/* counts: quiet mono numbers, no bubbles; zeros fade back */
html body #dashboard-view .dash-tab-count {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #8aa19a !important;
    padding: 0 !important;
    min-width: 0 !important;
    margin-left: 5px;
}
html body #dashboard-view .dash-tab-count[data-count="0"] { opacity: 0.45; }
html body #dashboard-view .dash-tab.active .dash-tab-count {
    background: transparent !important;
    color: #5eead4 !important;
    -webkit-text-fill-color: #5eead4 !important;
}
html body #dashboard-view .dash-tab-ext { font-size: 0.62rem !important; color: #b0c0ba !important; margin-left: auto; }
html body #dashboard-view .dash-panel {
    background: #ffffff;
    border: 1px solid rgba(11, 20, 19, 0.08);
    border-radius: 16px;
    box-shadow: 0 8px 26px rgba(8, 35, 31, 0.05);
}
html body #dashboard-view .dash-panel-header h3 {
    font-weight: 800 !important;
    color: #0b1413 !important;
}
/* app.js-generated order cards */
html body #dashboard-view .dash-order-card {
    border: 1px solid rgba(11, 20, 19, 0.09) !important;
    border-radius: 14px !important;
    transition: transform 0.18s cubic-bezier(0.23, 1, 0.32, 1), border-color 0.2s ease, box-shadow 0.2s ease;
}
html body #dashboard-view .dash-order-card:hover {
    transform: translateY(-2px);
    border-color: rgba(13, 148, 136, 0.35) !important;
    box-shadow: 0 10px 26px rgba(8, 35, 31, 0.08);
}
html body #dashboard-view .doc-ref {
    font-family: 'JetBrains Mono', monospace !important;
    font-weight: 800 !important;
    color: #0b1413 !important;
}
html body #dashboard-view .dash-order-status {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 5px 11px;
}
html body #dashboard-view .dash-order-status i { font-size: 6px; vertical-align: 2px; }
html body #dashboard-view .dash-order-status.status-paid { background: rgba(16, 185, 129, 0.12) !important; color: #047857 !important; }
html body #dashboard-view .dash-order-status.status-shipped { background: rgba(14, 165, 233, 0.12) !important; color: #0369a1 !important; }
html body #dashboard-view .dash-order-status.status-awaiting { background: rgba(245, 158, 11, 0.14) !important; color: #92400e !important; }
html body #dashboard-view .doc-buy-again,
html body #dashboard-view .dor-reorder-btn {
    border-radius: 999px !important;
    font-weight: 700 !important;
    transition: transform 0.15s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.18s ease;
}
html body #dashboard-view .doc-buy-again:active,
html body #dashboard-view .dor-reorder-btn:active { transform: scale(0.97); }
/* empty states */
html body #dashboard-view .dash-empty i {
    width: 58px;
    height: 58px;
    line-height: 58px;
    border-radius: 17px;
    background: rgba(13, 148, 136, 0.09);
    color: #0d9488 !important;
    font-size: 1.3rem !important;
}
html body #dashboard-view .dash-empty .de-headline { font-weight: 800 !important; color: #0b1413 !important; }

/* ── responsive ── */
@media (max-width: 900px) {
    html body #dashboard-view .dash-stats-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html body #dashboard-view .r543-insights { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
    html body #dashboard-view .r543-deck { padding: 20px 16px 18px; border-radius: 18px; }
    html body #dashboard-view .r543-actions-row { grid-template-columns: 1fr; }
    html body #dashboard-view .dash-reorder-card { flex-wrap: wrap; }
    html body #dashboard-view .dro-cta { width: 100%; justify-content: center; }
    html body #dashboard-view .r543-first { flex-direction: column; align-items: flex-start; }
    html body #dashboard-view .r543-points-body { flex-direction: column; align-items: center; }
    html body #dashboard-view .r543-ledger { width: 100%; }
}
@media (max-width: 480px) {
    html body #dashboard-view .dash-stats-strip { grid-template-columns: 1fr 1fr; gap: 9px; }
    html body #dashboard-view .dss-card { padding: 12px 12px; gap: 9px; }
    html body #dashboard-view .dss-value { font-size: 1.3rem !important; }
    html body #dashboard-view .dss-icon { width: 32px; height: 32px; border-radius: 9px; }
}

@media (prefers-reduced-motion: reduce) {
    html body #dashboard-view .r543-bloom { animation: none !important; }
    html body #dashboard-view .r543-bar,
    html body #dashboard-view .r543-ring-fill { animation: none !important; }
    html body #dashboard-view .r543-ladder-fill { transition: none !important; }
    html body #dashboard-view .dss-card,
    html body #dashboard-view .r543-action,
    html body #dashboard-view .dash-order-card,
    html body #dashboard-view .dash-tab { transition: none !important; }
}
/* ===================== /R543 ===================== */


/* ===================== R546 — catalog console: particle effect (v3, light) ===================== */
/* 21st.dev MinimalHero ported to the WHITE catalog console as one
   component (owner: don't separate, don't go dark; v3 removed the
   accent grid lines entirely at owner request). A clipped effects
   layer sits behind the panel content; the canvas (script in
   products.html) rains hairline teal streaks upward. Everything in
   the panel is lifted above the layer, and the search autocomplete
   still escapes the console because only the fx layer clips. */
/* owner tune: a touch more vertical breathing room than R540's 42/32 */
html body #products #r540-console {
    position: relative;
    padding-top: 54px;
    padding-bottom: 44px;
}
@media (max-width: 640px) {
    html body #products #r540-console {
        padding-top: 32px;
        padding-bottom: 26px;
    }
}
html body #products #r540-console > * { position: relative; z-index: 1; }
html body #products #r540-console .r546-fx {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    overflow: hidden;
    pointer-events: none;
}

/* particle canvas — teal hairline streaks rising over the white panel */
html body #products #r540-console .r546-fx canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
    html body #products #r540-console .r546-fx canvas { display: none !important; }
}
/* ===================== /R546 ===================== */



/* ===================== R547: product gallery — white spotlight core =====
   The vial's mint label was tone-on-tone with the pastel gallery backdrop
   (worst on mint-family pastels). A soft white core behind the vial
   separates label from backdrop on every pastel without retheming.
   Overrides the R161 halo (same selector, later in cascade). */
html body .pp-image-wrap::before {
    display: block !important;
    width: 92% !important;
    height: 92% !important;
    background: radial-gradient(circle,
        rgba(255, 255, 255, 0.60) 0%,
        rgba(255, 255, 255, 0.28) 34%,
        rgba(45, 212, 191, 0.10) 56%,
        transparent 72%) !important;
    filter: blur(26px) !important;
}
@media (prefers-reduced-motion: reduce) {
    html body .pp-image-wrap::before { animation: none !important; opacity: 0.8 !important; }
}
/* ===================== /R547 ===================== */

/* ===================== R548 · HERO DARK-STAGE VIALS =====================
   The hero now loads pre-darkened image variants (-dark.png/.webp):
   glass + cap gamma-dimmed with a cool tint for the black instrument
   room, label kept lit, and the white studio floor-puddle removed
   in-image (it read as a glowing platform on #06070A).
   CSS side: retune filters that were calibrated for the WHITE renders. */

/* (1) Main vial — drop the brightness(1.06) lift (was blowing out the
   glass); keep the shadow stack + a slightly warmer teal rim glow. */
html body #hero.hero-reading-room .hero-vial-link.hero-vial-link-main {
    filter: drop-shadow(0 38px 64px rgba(0, 0, 0, 0.68))
            drop-shadow(0 6px 14px rgba(0, 0, 0, 0.5))
            drop-shadow(0 0 26px rgba(13, 148, 136, 0.22))
            contrast(1.02) !important;
}

/* (2) Secondary vials — the 0.72/0.68 brightness crush was tuned for
   white glass; on the dark variants it buried them. Ease up; keep the
   depth-of-field blur. */
html body #hero.hero-reading-room .hero-vial-link.hero-vial-link-mots {
    filter: drop-shadow(0 24px 44px rgba(0, 0, 0, 0.55))
            blur(1.4px) brightness(0.88) saturate(0.9) !important;
}
html body #hero.hero-reading-room .hero-vial-link.hero-vial-link-bpc {
    filter: drop-shadow(0 24px 44px rgba(0, 0, 0, 0.55))
            blur(1.8px) brightness(0.85) saturate(0.88) !important;
}

/* (3) Reflection — dark glass reflects less than white glass did. */
html body #hero.hero-reading-room .hero-vial-link-main .hero-vial-main {
    -webkit-box-reflect: below 1px linear-gradient(
        to bottom,
        transparent 62%,
        rgba(255, 255, 255, 0.07) 100%
    ) !important;
}

/* (4) Mobile parity — same eased dimming when secondaries show ≤768px. */
@media (max-width: 768px) {
    html body #hero.hero-reading-room .hero-vial-link.hero-vial-link-mots,
    html body #hero.hero-reading-room .hero-vial-link.hero-vial-link-bpc {
        filter: drop-shadow(0 18px 32px rgba(0, 0, 0, 0.5))
                brightness(0.9) !important;
    }
}
/* ===================== /R548 ===================== */

/* ===================== R549 · HERO VIAL GEOMETRY + DEPTH FIX =====================
   Diagnosis (measured live): .hero-vial-main rendered 289x560 (ratio 0.516)
   while the source image is 1792x2400 (ratio 0.747) with object-fit:fill —
   the hero vial has been HORIZONTALLY SQUEEZED to ~69% of its true width.
   Secondaries rendered ~0.75 (correct), which is why only the main vial
   looked warped. Fixes:
   (1) Main vial: lock the box to the image's real aspect ratio.
   (2) Secondaries: halve the depth blur — 1.4/1.8px smeared the lit label
       across the now-transparent glass and read as fog, not depth.
   (3) Kill the box-reflect: with a transparent glass base the mirrored
       label floated detached below the vial.
   Hero images themselves are the -dark "clear glass" variants (v3):
   stronger smoky-glass presence so cap, label and heel read as one object. */

@media (min-width: 769px) {
    html body .hero .hero-visual .hero-vial-main {
        height: 560px !important;
        width: auto !important;
        aspect-ratio: 1792 / 2400 !important;
        object-fit: contain !important;
    }
}
html body #hero.hero-reading-room .hero-vial-link.hero-vial-link-mots {
    filter: drop-shadow(0 24px 44px rgba(0, 0, 0, 0.55))
            blur(0.6px) brightness(0.92) saturate(0.92) !important;
}
html body #hero.hero-reading-room .hero-vial-link.hero-vial-link-bpc {
    filter: drop-shadow(0 24px 44px rgba(0, 0, 0, 0.55))
            blur(0.8px) brightness(0.9) saturate(0.9) !important;
}
html body #hero.hero-reading-room .hero-vial-link-main .hero-vial-main {
    -webkit-box-reflect: none !important;
}
/* Contact pool: widen slightly to sit under the corrected (wider) vial. */
html body #hero.hero-reading-room .hero-visual::after {
    width: 380px !important;
}
/* ===================== /R549 ===================== */

/* ===================== R550 · MAIN VIAL — EXPLICIT TRUE-RATIO BOX =====================
   Root cause found via live rule inspection: .hero-vial-link-main is
   stretched between left:50% and right:0 (width = half the visual column,
   288.8px @1920) and the global img{max-width:100%} clamps the vial into
   that box while height:560px!important holds — hence the 0.516 squeeze
   (true image ratio 0.747). R549's width:auto could not escape the
   max-width clamp. Fix: explicit, ratio-true width on BOTH link and img,
   release the clamp, keep the existing centering (left:50% translate).
   560 x (1792/2400) = 418px · 460 x ratio = 343px (tablet). */

@media (min-width: 1025px) {
    html body .hero .hero-visual .hero-vial-link.hero-vial-link-main {
        width: 418px !important;
        right: auto !important;
    }
    html body .hero .hero-visual .hero-vial-link.hero-vial-link-main .hero-vial-main {
        width: 418px !important;
        height: 560px !important;
        max-width: none !important;
    }
}
@media (min-width: 769px) and (max-width: 1024px) {
    html body .hero .hero-visual .hero-vial-link.hero-vial-link-main {
        width: 343px !important;
        right: auto !important;
    }
    html body .hero .hero-visual .hero-vial-link.hero-vial-link-main .hero-vial-main {
        width: 343px !important;
        height: 460px !important;
        max-width: none !important;
    }
}
/* ===================== /R550 ===================== */

/* ===================== R551 · HERO EXHIBIT — GROUNDED V-FORMATION =====================
   The cluster never read as one product shot: main vial was CENTER-anchored,
   MOTS-C hung from the TOP, BPC-157 floated near the BOTTOM — three anchor
   systems, no shared ground plane, so it read as a collage. Rebuild:

   · One shared baseline (bottom: 5% of the visual column) — all three vials
     STAND on the same invisible bench, wings lifted 12px for depth.
   · V-formation: GLP3-R front-center (560px), BPC-157 behind-left (390px),
     MOTS-C behind-right (340px). Slight counter-rotations.
   · Lit bench: teal light pool under the trio (::after) + dark contact
     shadows where each vial meets it (.vial-ground), halo raised behind
     the main label (::before).
   · Images are -dark v4: structure-aware alpha keeps the bright specular
     rim streaks (gradient detection) so the glass pops against #06070A
     instead of dissolving into gray haze.
   · Entrance + hover transforms redefined to match the new anchors
     (old keyframes/hovers baked in translate(-50%,-50%)+20px).
   Scoped to 769px and up — mobile keeps its own proven cluster. */

@media (min-width: 769px) {
    /* ── anchors: one baseline ── */
    html body .hero .hero-visual .hero-vial-link.hero-vial-link-main {
        top: auto !important;
        left: 50% !important;
        right: auto !important;
        bottom: 5% !important;
        transform: translateX(-50%) !important;
        z-index: 3 !important;
    }
    html body .hero .hero-visual .hero-vial-link.hero-vial-link-bpc {
        top: auto !important;
        left: 18% !important;
        right: auto !important;
        bottom: calc(5% + 12px) !important;
        transform: translateX(-50%) rotate(-1.5deg) !important;
        z-index: 2 !important;
    }
    html body .hero .hero-visual .hero-vial-link.hero-vial-link-mots {
        top: auto !important;
        left: 82% !important;
        right: auto !important;
        bottom: calc(5% + 12px) !important;
        transform: translateX(-50%) rotate(1.6deg) !important;
        z-index: 2 !important;
    }

    /* ── sizes (true 1792:2400 ratio) ── */
    html body .hero .hero-visual .hero-vial-link.hero-vial-link-bpc,
    html body .hero .hero-visual .hero-vial-link.hero-vial-link-bpc .hero-vial-secondary {
        width: 291px !important;
        height: 390px !important;
        max-width: none !important;
    }
    html body .hero .hero-visual .hero-vial-link.hero-vial-link-mots,
    html body .hero .hero-visual .hero-vial-link.hero-vial-link-mots .hero-vial-secondary {
        width: 254px !important;
        height: 340px !important;
        max-width: none !important;
    }

    /* ── depth: wings recede via light falloff, not just blur ── */
    html body #hero.hero-reading-room .hero-vial-link.hero-vial-link-bpc {
        filter: drop-shadow(0 20px 36px rgba(0, 0, 0, 0.6))
                blur(0.5px) brightness(0.93) saturate(0.95) !important;
    }
    html body #hero.hero-reading-room .hero-vial-link.hero-vial-link-mots {
        filter: drop-shadow(0 20px 36px rgba(0, 0, 0, 0.6))
                blur(0.5px) brightness(0.93) saturate(0.95) !important;
    }

    /* ── entrances: settle DOWN onto the bench (match new anchors) ── */
    html body .hero .hero-visual .hero-vial-link.hero-vial-link-main {
        opacity: 0;
        animation: r551-settle-main 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.55s forwards !important;
    }
    html body .hero .hero-visual .hero-vial-link.hero-vial-link-bpc {
        opacity: 0;
        animation: r551-settle-bpc 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.78s forwards !important;
    }
    html body .hero .hero-visual .hero-vial-link.hero-vial-link-mots {
        opacity: 0;
        animation: r551-settle-mots 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.88s forwards !important;
    }

    /* ── hovers: same lift, new anchor math ── */
    html body .hero .hero-visual .hero-vial-link.hero-vial-link-main:hover {
        transform: translateX(-50%) translateY(-5px) scale(1.012) !important;
    }
    html body .hero .hero-visual .hero-vial-link.hero-vial-link-bpc:hover {
        transform: translateX(-50%) rotate(-1.5deg) translateY(-4px) scale(1.02) !important;
    }
    html body .hero .hero-visual .hero-vial-link.hero-vial-link-mots:hover {
        transform: translateX(-50%) rotate(1.6deg) translateY(-4px) scale(1.02) !important;
    }

    /* ── lit bench: teal light pool under the trio ── */
    html body #hero.hero-reading-room .hero-visual::after {
        left: 50% !important;
        bottom: calc(5% - 36px) !important;
        width: 600px !important;
        height: 96px !important;
        transform: translateX(-50%) !important;
        background: radial-gradient(ellipse at 50% 50%,
            rgba(20, 184, 166, 0.13) 0%,
            rgba(20, 184, 166, 0.05) 48%,
            transparent 74%) !important;
        filter: blur(14px) !important;
    }
    /* halo lifts to sit behind the main label */
    html body #hero.hero-reading-room .hero-visual::before {
        top: 36% !important;
        left: 50% !important;
        width: 520px !important;
        height: 520px !important;
    }

    /* ── contact shadows where glass meets the bench ── */
    html body .hero .hero-visual .vial-ground {
        top: auto !important;
        right: auto !important;
        filter: blur(7px) !important;
        opacity: 1 !important;
        z-index: 1 !important;
        background: radial-gradient(ellipse at center,
            rgba(0, 0, 0, 0.5) 0%,
            rgba(0, 0, 0, 0.24) 48%,
            transparent 76%) !important;
    }
    html body .hero .hero-visual .vial-ground-main {
        left: 50% !important;
        bottom: calc(5% - 10px) !important;
        transform: translateX(-50%) !important;
        width: 300px !important;
        height: 26px !important;
    }
    html body .hero .hero-visual .vial-ground-bpc {
        left: 18% !important;
        bottom: calc(5% + 3px) !important;
        transform: translateX(-50%) !important;
        width: 190px !important;
        height: 18px !important;
    }
    html body .hero .hero-visual .vial-ground-mots {
        left: 82% !important;
        bottom: calc(5% + 3px) !important;
        transform: translateX(-50%) !important;
        width: 170px !important;
        height: 16px !important;
    }
}

/* tablet: scale the trio down, same formation */
@media (min-width: 769px) and (max-width: 1024px) {
    html body .hero .hero-visual .hero-vial-link.hero-vial-link-main,
    html body .hero .hero-visual .hero-vial-link.hero-vial-link-main .hero-vial-main {
        width: 343px !important;
        height: 460px !important;
        max-width: none !important;
    }
    html body .hero .hero-visual .hero-vial-link.hero-vial-link-bpc,
    html body .hero .hero-visual .hero-vial-link.hero-vial-link-bpc .hero-vial-secondary {
        width: 239px !important;
        height: 320px !important;
    }
    html body .hero .hero-visual .hero-vial-link.hero-vial-link-mots,
    html body .hero .hero-visual .hero-vial-link.hero-vial-link-mots .hero-vial-secondary {
        width: 209px !important;
        height: 280px !important;
    }
}

@keyframes r551-settle-main {
    0%   { opacity: 0; transform: translateX(-50%) translateY(18px) scale(0.97); }
    100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes r551-settle-bpc {
    0%   { opacity: 0; transform: translateX(-50%) rotate(-1.5deg) translateY(14px); }
    100% { opacity: 1; transform: translateX(-50%) rotate(-1.5deg) translateY(0); }
}
@keyframes r551-settle-mots {
    0%   { opacity: 0; transform: translateX(-50%) rotate(1.6deg) translateY(14px); }
    100% { opacity: 1; transform: translateX(-50%) rotate(1.6deg) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    html body .hero .hero-visual .hero-vial-link.hero-vial-link-main,
    html body .hero .hero-visual .hero-vial-link.hero-vial-link-bpc,
    html body .hero .hero-visual .hero-vial-link.hero-vial-link-mots {
        animation: none !important;
        opacity: 1 !important;
    }
}

/* bg vial video: recede further — its ghost was reading as a broken
   reflection beneath the real cluster */
html body #hero.r159 .r159-hero-video {
    opacity: 0.3 !important;
}
html body #hero.r159 .r159-hero-video-wrap::before {
    background: linear-gradient(90deg,
        rgba(6, 7, 10, 0) 0%,
        rgba(6, 7, 10, 0) 40%,
        rgba(6, 7, 10, 0.88) 68%,
        rgba(6, 7, 10, 0.97) 100%) !important;
}
/* ===================== /R551 ===================== */


/* ════════════════════════════════════════════════════════════════════════
   ░░░ R552 — ICE-CARD SURFACES (vial cards)
   ░░░ Recolor every vial-card image surface from the warm mint/green
   ░░░ gradient (ROUND 30, ~line 25838: #dceee0→#c5dec1, hue ~120 green) to
   ░░░ a pale "ice" tint of the SITE's teal hue (~173, #14b8a6 family). Same
   ░░░ structure — noise dither + top frost sheen + vertical fade — so the
   ░░░ cards now belong to the cool teal identity (matching the vial label
   ░░░ and the dark instrument rooms) instead of leaning warm-green.
   ░░░ Class-doubled selectors (.x.x) lift specificity above the existing
   ░░░ (0,3,2) winners; no !important-escalation games. Pseudo halos/
   ░░░ particles are left intact.
   ════════════════════════════════════════════════════════════════════════ */
/* Products page uses an id-scoped v2 rule (#main-content #products,
   ~line 64601: linear-gradient(165deg,#e9f6f3,#d8ece7)) — must be matched
   at that 2-id specificity. Other surfaces (homepage bestsellers, etc.)
   still ride ROUND 30, beaten via class-doubling. */
html body #main-content #products .product-card .product-image,
html body #main-content #products .product-card .product-img-wrap,
html body .product-card.product-card .product-image.product-image,
html body .product-card.product-card .product-img-wrap.product-img-wrap,
html body .bestseller-card.bestseller-card .bs-image.bs-image,
html body .bestseller-card.bestseller-card .product-image.product-image {
    background:
        var(--noise-svg),
        /* frost sheen: light catching the top of the ice */
        radial-gradient(ellipse 120% 64% at 50% 0%,
            rgba(255, 255, 255, 0.62) 0%,
            rgba(255, 255, 255, 0) 62%),
        /* frosted cyan-ice body — cooler & more present than the old
           near-white teal (#e9f6f3→#d8ece7) it replaces */
        linear-gradient(180deg,
            #e7f6f6 0%,
            #c4e5e8 100%) !important;
}

/* Cool the drifting sparkles from brand-green to ice-teal so they read as
   light glinting off frost, not green motes. */
html body .product-card .card-drift,
html body .bestseller-card .card-drift {
    box-shadow: 0 0 8px rgba(90, 190, 180, 0.50),
                0 0 14px rgba(255, 255, 255, 0.45) !important;
}
/* ===================== /R552 ===================== */


/* ════════════════════════════════════════════════════════════════════════
   ░░░ R553 — VIALS ZOOMED IN A TOUCH (cards + product-detail main image)
   ░░░ Catalog cards: §6 v2 rule (line 64602) caps the vial at 78%/88% —
   ░░░ lift to 86%/94% so the vial reads a little larger in the tile.
   ░░░ Product-detail main vial: resting transform is scale(1.18) (line
   ░░░ 30966, !important — wins over the dormant float anim); take it to
   ░░░ 1.30. Hover 1.35→1.42 keeps a proportional lean-in. Keyframes bumped
   ░░░ to 1.30 too so the reduced-motion / animated path stays in sync.
   ════════════════════════════════════════════════════════════════════════ */
html body #main-content #products .product-card .product-image img {
    max-width: 92% !important;
    max-height: 99% !important;
    /* The vialFloat anim + the image's low-in-canvas bias left the vial
       ~17px below box-center on average. Raise it ~14px so its floating
       mean lands ~3px below center. position/top is independent of the
       float transform, so the gentle bob keeps running. */
    position: relative !important;
    top: -14px !important;
}
html body .pp-image-wrap:not(.is-coa) img {
    /* -8% centers the vial (it sits ~8% low in canvas); +2px local
       (≈3px on screen at 1.5x scale) lowers it slightly per request. */
    transform: scale(1.50) translateY(calc(-8% + 2px)) !important;
}
html body .pp-image-wrap:not(.is-coa):hover img {
    transform: scale(1.60) translateY(calc(-10% + 2px)) !important;
}
@keyframes ppVialFloat218 {
    0%, 100% { transform: scale(1.50) translateZ(0) translateY(calc(-8% + 2px)); }
    50%      { transform: scale(1.50) translateZ(0) translateY(calc(-9% + 2px)); }
}
/* ===================== /R553 ===================== */


/* ════════════════════════════════════════════════════════════════════════
   ░░░ R554 — ICE SURFACE on the product-detail image area (.pp-image-wrap)
   ░░░ Was a flat pale-green (var(--pastel-mint), ~#DFECDB). Match the
   ░░░ catalog cards' frosted cyan-ice so the detail page belongs to the
   ░░░ same cool family. Scoped :not(.is-coa) so the COA document view keeps
   ░░░ its neutral background. Doubled class wins over the (0,2,2) winner.
   ░░░ The teal halo ::before + grid ::after + particles layer on top,
   ░░░ untouched.
   ════════════════════════════════════════════════════════════════════════ */
html body .pp-image-wrap.pp-image-wrap:not(.is-coa) {
    background:
        var(--noise-svg),
        radial-gradient(ellipse 120% 64% at 50% 0%,
            rgba(255, 255, 255, 0.62) 0%,
            rgba(255, 255, 255, 0) 62%),
        linear-gradient(180deg, #e7f6f6 0%, #c4e5e8 100%) !important;
}
/* ===================== /R554 ===================== */


/* ════════════════════════════════════════════════════════════════════════
   ░░░ R556 — HERO VIALS: a touch bigger + crisper + cool-glow appeal
   ░░░ Sizes +~8% (still bottom-anchored on the shared bench, so they stay
   ░░░ grounded; width/height only — GSAP animates transform/opacity, so the
   ░░░ load cascade is untouched). Filters: stronger contrast/saturation +
   ░░░ a whisper of brightness for clarity, plus a soft cyan under-glow that
   ░░░ ties the cluster to the ice/teal identity. Selectors match the R54x
   ░░░ size/filter winners + !important, placed last so they win.
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {
    html body .hero .hero-visual .hero-vial-link.hero-vial-link-main { width: 482px !important; }
    html body .hero .hero-visual .hero-vial-link.hero-vial-link-main .hero-vial-main {
        width: 482px !important; height: 645px !important;
    }
}
@media (min-width: 769px) and (max-width: 1024px) {
    html body .hero .hero-visual .hero-vial-link.hero-vial-link-main { width: 394px !important; }
    html body .hero .hero-visual .hero-vial-link.hero-vial-link-main .hero-vial-main {
        width: 394px !important; height: 528px !important;
    }
}
@media (min-width: 769px) {
    html body .hero .hero-visual .hero-vial-link.hero-vial-link-bpc,
    html body .hero .hero-visual .hero-vial-link.hero-vial-link-bpc .hero-vial-secondary {
        width: 334px !important; height: 447px !important;
    }
    html body .hero .hero-visual .hero-vial-link.hero-vial-link-mots,
    html body .hero .hero-visual .hero-vial-link.hero-vial-link-mots .hero-vial-secondary {
        width: 292px !important; height: 391px !important;
    }
}
/* clarity + cool-glow (matches the R54x filter winners, 0,4,2 + !important) */
html body .hero .hero-visual .hero-vial-link .hero-vial-main {
    filter:
        drop-shadow(1px -1px 0 rgba(255, 251, 242, 0.55))
        drop-shadow(2px 5px 8px rgba(10, 10, 10, 0.12))
        drop-shadow(4px 20px 32px rgba(10, 10, 10, 0.16))
        drop-shadow(3px 38px 60px rgba(10, 10, 10, 0.20))
        /* hue ring around the vial — wide all-sides teal-cyan aura */
        drop-shadow(0 0 54px rgba(45, 212, 200, 0.35))
        /* tighter brighter rim for pop */
        drop-shadow(0 0 22px rgba(94, 228, 222, 0.29))
        /* grounding under-glow */
        drop-shadow(0 18px 48px rgba(45, 200, 214, 0.23))
        contrast(1.13) saturate(1.22) brightness(1.05) !important;
}
html body .hero .hero-visual .hero-vial-link .hero-vial-secondary {
    filter:
        drop-shadow(1px -1px 0 rgba(255, 251, 242, 0.5))
        drop-shadow(1px 4px 6px rgba(10, 10, 10, 0.10))
        drop-shadow(3px 18px 28px rgba(10, 10, 10, 0.15))
        drop-shadow(0 0 42px rgba(45, 212, 200, 0.30))
        drop-shadow(0 0 16px rgba(94, 228, 222, 0.24))
        drop-shadow(0 14px 36px rgba(45, 200, 214, 0.17))
        contrast(1.13) saturate(1.22) brightness(1.045) !important;
}
/* ===================== /R556 ===================== */


/* ════════════════════════════════════════════════════════════════════════
   ░░░ R557 — HERO VIAL HOVER FIX (after R556 enlarged the vials)
   ░░░ Problem 1: the bigger main vial's link rectangle now sits over the
   ░░░ BPC/MOTS wings and steals their hover (you can't hover them).
   ░░░ Fix: shrink the MAIN link's hit-box to ~its glass width; the bigger
   ░░░ img overflows it (flex-centered, bottom-aligned) and is pointer-
   ░░░ transparent, so the wings' visible edges catch the pointer again.
   ░░░ The link <a> still catches over its (narrower) box → main stays
   ░░░ hoverable/clickable on its glass.
   ░░░ Problem 2: the GLP3-R tooltip was clipped above the hero (overflow:
   ░░░ clip) once the vial grew — anchor it lower so it sits inside the hero.
   ░░░ No DOM touched → GSAP cascade unaffected.
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
    html body .hero .hero-visual .hero-vial-link.hero-vial-link-main {
        display: flex !important;
        justify-content: center !important;
        align-items: flex-end !important;
    }
    html body .hero .hero-visual .hero-vial-link.hero-vial-link-main .hero-vial-main {
        flex: 0 0 auto !important;
        pointer-events: none !important;
    }
}
@media (min-width: 1025px) {
    html body .hero .hero-visual .hero-vial-link.hero-vial-link-main { width: 356px !important; }
}
@media (min-width: 769px) and (max-width: 1024px) {
    html body .hero .hero-visual .hero-vial-link.hero-vial-link-main { width: 292px !important; }
}
/* drop the main tooltip into the hero so it isn't clipped at the top */
html body .hero .hero-visual .hero-vial-link.hero-vial-link-main .hero-vial-tooltip {
    top: 120px !important;
}
/* ===================== /R557 ===================== */


/* ════════════════════════════════════════════════════════════════════════
   ░░░ R558 — BALANCE THE HERO CLUSTER GAPS
   ░░░ BPC-157 (the larger wing) sat at a symmetric 18% but, being wider,
   ░░░ reached into GLP3-R (~15px overlap) while the smaller MOTS-C left a
   ░░░ ~25px gap — so the main looked crowded on the left. Move ONLY BPC
   ░░░ outward (18% → 10.7%) so both wings have an even ~25px gap. (Moving
   ░░░ MOTS inward instead would tuck its glass under the main's hover hit-
   ░░░ box and re-break R557.) left only — transform/rotation untouched.
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
    html body .hero .hero-visual .hero-vial-link.hero-vial-link-bpc { left: 10.7% !important; }
}
/* ===================== /R558 ===================== */


/* ════════════════════════════════════════════════════════════════════════
   ░░░ R559 — HERO VIAL HOVER: kill the lag + fix the MOTS-C reach
   ░░░ LAG: the vials transition a 7–8 drop-shadow filter (R556) over 0.5s
   ░░░ on hover — re-rendering all those blurs per frame is the stutter.
   ░░░ Transition transform only (filter snaps), and GPU-promote so the
   ░░░ scaled, filtered vial composites on a cached layer.
   ░░░ REACH: the dark hero image sits 172px left of canvas-center, so the
   ░░░ centered main hit-box landed ~46px right of the visible glass and
   ░░░ spilled onto MOTS-C. Re-center the hit-box on the glass + shrink it to
   ░░░ ~glass width; counter-shift the img (position:relative) so the vial
   ░░░ stays visually put (transform-independent → GSAP unaffected).
   ════════════════════════════════════════════════════════════════════════ */
html body .hero .hero-visual .hero-vial-link .hero-vial-main,
html body .hero .hero-visual .hero-vial-link .hero-vial-secondary {
    transition: transform 0.45s cubic-bezier(0.2, 0.6, 0.3, 1) !important;
    will-change: transform !important;
}
@media (min-width: 1025px) {
    html body .hero .hero-visual .hero-vial-link.hero-vial-link-main {
        width: 230px !important;
        left: calc(50% - 46px) !important;
    }
    html body .hero .hero-visual .hero-vial-link.hero-vial-link-main .hero-vial-main {
        position: relative !important;
        left: 46px !important;
    }
}
@media (min-width: 769px) and (max-width: 1024px) {
    html body .hero .hero-visual .hero-vial-link.hero-vial-link-main {
        width: 188px !important;
        left: calc(50% - 38px) !important;
    }
    html body .hero .hero-visual .hero-vial-link.hero-vial-link-main .hero-vial-main {
        position: relative !important;
        left: 38px !important;
    }
}
/* ===================== /R559 ===================== */


/* R559b — the oversized <picture> wrapper (not just its <img>) was catching
   the pointer and re-stealing MOTS-C's hover. Make the picture transparent
   too, so only the narrowed link hit-box catches. */
html body .hero .hero-visual .hero-vial-link.hero-vial-link-main picture {
    pointer-events: none !important;
}


/* ════════════════════════════════════════════════════════════════════════
   ░░░ R560 — STOP THE HERO VIAL FLOAT (kills residual lag) + MORE WING TILT
   ░░░ r535heroFloat (main img, translate 0→-9px = the up/down float) and
   ░░░ r153r98-vial-breath run infinitely; with the heavy R556 glow on the
   ░░░ same elements, every frame re-renders the whole drop-shadow stack →
   ░░░ the leftover jank. Static vials = the filter renders once and stays
   ░░░ cached. The GSAP page-load entrance is JS, so it's untouched.
   ░░░ Plus: BPC-157 leans a touch more left, MOTS-C a touch more right.
   ════════════════════════════════════════════════════════════════════════ */
html body #hero .hero-vial-link,
html body #hero .hero-vial-link .hero-vial-main,
html body #hero .hero-vial-link .hero-vial-secondary {
    animation: none !important;
}
@media (min-width: 769px) {
    html body .hero .hero-visual .hero-vial-link.hero-vial-link-bpc {
        transform: translateX(-50%) rotate(-4deg) !important;
    }
    html body .hero .hero-visual .hero-vial-link.hero-vial-link-mots {
        transform: translateX(-50%) rotate(4deg) !important;
    }
}
/* ===================== /R560 ===================== */


/* ════════════════════════════════════════════════════════════════════════
   ░░░ R561 — GPU-COMPOSITE THE HOVER SCALE (kills the last of the lag)
   ░░░ The hover scales the LINK (scale 1.015–1.02), but the link wasn't
   ░░░ layer-promoted, so every frame of the grow re-rasterized its contents
   ░░░ — including the heavy R556 glow. Promote the LINK to its own GPU layer:
   ░░░ the glow bakes into the layer texture once, and the hover scale just
   ░░░ stretches that texture on the GPU. No visual change at all.
   ░░░ (will-change moved to the element that actually transforms.)
   ════════════════════════════════════════════════════════════════════════ */
html body #hero .hero-vial-link.hero-vial-link-main,
html body #hero .hero-vial-link.hero-vial-link-bpc,
html body #hero .hero-vial-link.hero-vial-link-mots {
    will-change: transform !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
}
/* The img never transforms (the LINK is what scales), so its own layer hint
   from R559 just splits the glow into a separate sub-layer that can re-filter
   when the parent scales. Drop it → the glow bakes into the promoted link's
   single cached texture, so the hover-grow is a pure GPU stretch. */
html body #hero .hero-vial-link .hero-vial-main,
html body #hero .hero-vial-link .hero-vial-secondary {
    will-change: auto !important;
}
/* ===================== /R561 ===================== */


/* ════════════════════════════════════════════════════════════════════════
   ░░░ R562 — TOOLTIP INSTANT-ON-ADJACENT (kills the inter-vial pop delay)
   ░░░ The vial tooltips fade in over 0.28s (opacity + 8px slide). Right for a
   ░░░ cold hover, but it re-runs each time you slide vial→vial, so the next
   ░░░ card feels like it lags in. The index.html bootVialTipInstant() boot
   ░░░ flags the just-entered vial with [data-tip-instant] ONLY while you're
   ░░░ moving between vials (a tooltip already open); here we collapse that
   ░░░ vial's tooltip transition to 0s so it snaps in. Cold hovers (no flag)
   ░░░ keep the full fade, and fade-OUT is always normal (flag dropped on
   ░░░ leave). Look unchanged — only the redundant re-fade is removed.
   ════════════════════════════════════════════════════════════════════════ */
html body .hero .hero-visual .hero-vial-link[data-tip-instant] .hero-vial-tooltip {
    transition-duration: 0s !important;
}
/* ===================== /R562 ===================== */


/* ════════════════════════════════════════════════════════════════════════
   ░░░ R563 — ACCOUNT EMAIL-VERIFICATION BANNER
   ░░░ Shown on the account dashboard (account.html) only while the signed-in
   ░░░ user's email is unverified. Verifying unlocks the 500-pt welcome bonus
   ░░░ (gated server-side by the Firestore loyalty rule + the app.js R563 gate).
   ════════════════════════════════════════════════════════════════════════ */
.dash-verify-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin: 0 0 20px;
    padding: 16px 20px;
    border-radius: 14px;
    background: linear-gradient(135deg, #ecfdfa 0%, #def4ef 100%);
    border: 1px solid #99e6da;
    box-shadow: 0 1px 2px rgba(13, 60, 54, 0.06);
}
/* R786: the account verify-banner is toggled via the `hidden` attribute
   (vb.hidden=true on verify-success + for already-verified users), but the
   author `display:flex` above DEFEATED the UA `[hidden]{display:none}` (author
   beats UA at equal specificity) — so the box never went away after verifying.
   Restore `[hidden]` as a real hide. Higher specificity (class+attr) + !important
   so the JS toggle always wins. Desktop + mobile (no media query). */
.dash-verify-banner[hidden] { display: none !important; }

/* R787: About page — 3rd paragraph is DESKTOP ONLY (hidden < 769px). */
@media (max-width: 768px) {
    html body .about-section .about-p3-desktop { display: none !important; }
}

/* R788: more gap between the nav and "Peptide Research Blog" on the blog index.
   The blog <main> has id="main-content", so the global
   `html body main#main-content { padding-top:84px !important }` (ID specificity)
   was overriding `.blog-index` / `main.blog-index` padding — the page was stuck
   at 84px. Override with matching ID + class specificity so it actually wins.
   Desktop only (≥769); mobile keeps the global clearance.
   R789: +4.8px more clearance per owner (96 → 100.8px). */
@media (min-width: 769px) {
    html body main#main-content.blog-index { padding-top: 100.8px !important; }
}
.dash-verify-banner .dvb-icon {
    flex: 0 0 auto;
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border-radius: 11px;
    background: #14b8a6;
    color: #fff;
    font-size: 18px;
}
.dash-verify-banner .dvb-text {
    flex: 1 1 260px;
    min-width: 0;
    display: flex; flex-direction: column; gap: 3px;
    line-height: 1.42;
}
.dash-verify-banner .dvb-text strong { font-size: 15px; font-weight: 700; color: #0f3c36; }
.dash-verify-banner .dvb-text span   { font-size: 13.5px; color: #2c5b54; }
.dash-verify-banner .dvb-text b      { color: #0f766e; font-weight: 700; }
.dash-verify-banner .dvb-actions { flex: 0 0 auto; display: flex; gap: 8px; flex-wrap: wrap; }
.dvb-btn {
    font: inherit; font-size: 13px; font-weight: 600;
    padding: 9px 16px; border-radius: 9px; cursor: pointer;
    border: 1px solid transparent;
    transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease;
}
.dvb-btn:active { transform: scale(0.97); }
.dvb-btn-primary { background: #0f766e; color: #fff; }
.dvb-btn-primary:hover { background: #115e56; }
.dvb-btn-ghost { background: #fff; color: #0f766e; border-color: #99e6da; }
.dvb-btn-ghost:hover { background: #f0fbf9; }
.dvb-status { flex: 1 1 100%; margin: 2px 0 0; font-size: 13px; font-weight: 600; }


@media (max-width: 600px) {
    .dash-verify-banner { gap: 12px; padding: 14px 16px; }
    .dash-verify-banner .dvb-actions { flex: 1 1 100%; }
    .dvb-btn { flex: 1 1 auto; text-align: center; }
}
/* ===================== /R563 ===================== */

/* ===== R600 Catalog Expansion — dual-axis filters =====================
   Two independent chip rows on products.html (#cf-filters): a Research-area
   row and a Format row. Markup in products.html, behavior in
   catalog-filters.js.

   R605 LIGHT RE-THEME (2026-06-14): originally styled for the dark Instrument
   bg (#06070A), but products.html renders on a LIGHT page (#F5F7F8) — the old
   colours (text #c9d2e0, 0.25-alpha teal border) measured ~1.2:1 contrast and
   were near-invisible. Now light-native: white pills, slate-700 ink, clear
   slate border; teal-filled selected state with a soft brand glow. JetBrains
   Mono kept for the instrument feel.

   CASCADE NOTE: products.html has a `html body main *` universal font
   normalizer (~styles.css:21947, Inter !important). Every rule here is
   id-scoped with `html body #products …` so it outranks that universal rule,
   and the JetBrains-Mono font-family declarations carry !important so they
   win against the normalizer's own !important. ===================== */

html body #products .cf-filters {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 10px 0 32px;
}

html body #products .cf-axis {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

html body #products .cf-axis-label {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace !important;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #475569;                       /* slate-600 — ~6:1 on the #F5F7F8 page */
    margin: 0;
    line-height: 1;
}

html body #products .cf-row {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    align-items: center;
}

html body #products .cf-chip {
    /* pill button — LIGHT theme (page bg is #F5F7F8, not the dark instrument bg) */
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    margin: 0;
    padding: 8px 14px;
    border: 1px solid #dbe3ec;            /* clear cool-slate edge */
    border-radius: 999px;
    background: #eef2f7;                   /* light-grey fill — reads as a chip on the white console panel */
    color: #334155;                       /* slate-700 — ~9:1 on the fill */
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace !important;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.1;
    white-space: nowrap;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.18s ease, color 0.18s ease,
                background-color 0.18s ease, box-shadow 0.2s ease,
                transform 0.16s cubic-bezier(0.23, 1, 0.32, 1);
}

html body #products .cf-chip:hover {
    border-color: #2dd4bf;
    background: #f0fdfa;                   /* teal-50 whisper */
    color: #0f766e;                       /* teal-700 */
    transform: translateY(-1px);
}

html body #products .cf-chip:focus-visible {
    outline: 2px solid #14b8a6;
    outline-offset: 2px;
}

html body #products .cf-chip:active {
    transform: translateY(0);
}

html body #products .cf-chip.is-active {
    border-color: transparent;
    background: linear-gradient(180deg, #2dd4bf 0%, #14b8a6 100%);
    color: #053b34;                       /* deep teal-ink — ~6.5:1 on the fill */
    font-weight: 700;
    box-shadow: 0 2px 10px -1px rgba(20, 184, 166, 0.42);   /* soft brand glow = "selected" */
}

html body #products .cf-chip.is-active:hover {
    color: #053b34;
    border-color: transparent;
    transform: translateY(-1px);
    box-shadow: 0 5px 16px -3px rgba(20, 184, 166, 0.5);
}

/* small link to the bundles page, sitting after the two rows */
html body #products .cf-bundles-link {
    align-self: flex-start;
    margin-top: 2px;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace !important;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #0f766e;                       /* teal-700 — readable on the light page */
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.18s ease, color 0.18s ease;
}

html body #products .cf-bundles-link:hover {
    color: #14b8a6;
    border-bottom-color: rgba(20, 184, 166, 0.55);
}

html body #products #cf-empty {
    color: #64748b;
    font-size: 14px;
}

/* Mobile: each row becomes one horizontally-scrollable strip (no wrap-to-tall) */
@media (max-width: 600px) {
    html body #products .cf-filters {
        gap: 16px;
        margin: 4px 0 22px;
    }
    html body #products .cf-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;          /* Firefox */
        -ms-overflow-style: none;       /* old Edge */
        /* let the strip bleed to the container edge so the last chip can scroll
           fully into view, then pad it back */
        margin-left: -4px;
        margin-right: -4px;
        padding: 2px 4px;
    }
    html body #products .cf-row::-webkit-scrollbar {
        display: none;                  /* WebKit/Blink */
    }
    html body #products .cf-chip {
        flex: 0 0 auto;
    }
}

/* Reduced motion: no chip transitions */
@media (prefers-reduced-motion: reduce) {
    html body #products .cf-chip,
    html body #products .cf-bundles-link {
        transition: none;
    }
    html body #products .cf-chip:hover,
    html body #products .cf-chip:active,
    html body #products .cf-chip.is-active:hover {
        transform: none;
    }
}
/* ===================== /R600 ===================== */


/* ════════════════════════════════════════════════════════════════════════
   ░░░ R601 — Catalog cards: vertical-centre the 8 non-vial products
   ░░░ R553 (line ~70298) lifts every catalog image -14px to compensate for
   ░░░ the VIAL artwork's low-in-canvas bias (padding T541 vs B144). The 8
   ░░░ non-vial products (5 powders + 3 liquids) ship on perfectly-centred
   ░░░ SQUARE canvases, so that -14px pushes them too high. Neutralise it for
   ░░░ exactly those ids (higher specificity + !important beats R553). Detail
   ░░░ pages use .pp-image-wrap and are unaffected. bac-water (BA30, also
   ░░░ data-category=supply) keeps its vial-style lift — intentionally excluded.
   ════════════════════════════════════════════════════════════════════════ */
html body #main-content #products .product-card[data-product-id="PIRA"] .product-image img,
html body #main-content #products .product-card[data-product-id="DIHEXA"] .product-image img,
html body #main-content #products .product-card[data-product-id="MEBC"] .product-image img,
html body #main-content #products .product-card[data-product-id="TAK653"] .product-image img,
html body #main-content #products .product-card[data-product-id="ENCLO"] .product-image img,
html body #main-content #products .product-card[data-product-id="NOOP"] .product-image img,
html body #main-content #products .product-card[data-product-id="BROM"] .product-image img,
html body #main-content #products .product-card[data-product-id="MBLUE"] .product-image img,
html body #main-content #products .product-card[data-product-id="BA30"] .product-image img {
    top: 0 !important;
}
/* ===================== /R601 ===================== */


/* ════════════════════════════════════════════════════════════════════════
   ░░░ R602 — Product-detail image: centre the centred-canvas products
   ░░░ R553 floats/hovers EVERY .pp-image-wrap img with a -8%/-10% translateY
   ░░░ lift to optically centre the PEPTIDE vials (which sit ~8% LOW in their
   ░░░ 1792×2400 canvas). The 5 powders + 3 liquids ship on centred square
   ░░░ canvases, and bac-water (BA30) was re-centred on one, so that lift
   ░░░ pushes all 9 too high (measured ~38px). Give them a no-lift float +
   ░░░ no-lift hover, targeted by image src so the real vials are untouched.
   ════════════════════════════════════════════════════════════════════════ */
/* The base rule (line ~70311) pins transform with !important, which overrides
   the float animation — so we override the TRANSFORM directly (not the anim):
   same scale, but translateY(2px) instead of the -8% vial lift. */
html body .pp-image-wrap:not(.is-coa) img[src*="piracetam"],
html body .pp-image-wrap:not(.is-coa) img[src*="dihexa"],
html body .pp-image-wrap:not(.is-coa) img[src*="9-me-bc"],
html body .pp-image-wrap:not(.is-coa) img[src*="tak-653"],
html body .pp-image-wrap:not(.is-coa) img[src*="enclomiphene"],
html body .pp-image-wrap:not(.is-coa) img[src*="noopept"],
html body .pp-image-wrap:not(.is-coa) img[src*="bromantane"],
html body .pp-image-wrap:not(.is-coa) img[src*="methylene-blue"],
html body .pp-image-wrap:not(.is-coa) img[src*="bac-water"] {
    transform: scale(1.50) translateY(2px) !important;
}
html body .pp-image-wrap:not(.is-coa):hover img[src*="piracetam"],
html body .pp-image-wrap:not(.is-coa):hover img[src*="dihexa"],
html body .pp-image-wrap:not(.is-coa):hover img[src*="9-me-bc"],
html body .pp-image-wrap:not(.is-coa):hover img[src*="tak-653"],
html body .pp-image-wrap:not(.is-coa):hover img[src*="enclomiphene"],
html body .pp-image-wrap:not(.is-coa):hover img[src*="noopept"],
html body .pp-image-wrap:not(.is-coa):hover img[src*="bromantane"],
html body .pp-image-wrap:not(.is-coa):hover img[src*="methylene-blue"],
html body .pp-image-wrap:not(.is-coa):hover img[src*="bac-water"] {
    transform: scale(1.60) translateY(2px) !important;
}
/* ===================== /R602 ===================== */


/* ════════════════════════════════════════════════════════════════════════
   ░░░ R603 — Detail image: SHARPEN (powders+liquids) + DE-STAR (powders)
   ░░░ (a) BLUR: the image box is laid out ~340px then transform: scale(1.5)'d
   ░░░ up to ~510px. With will-change/filter the element is on its own GPU
   ░░░ layer, which rasterises at the 340px LAYOUT size and upscales to 510 →
   ░░░ blurry; hovering re-rasterised the layer larger = the "clears on hover"
   ░░░ bug. Fix: lay the box out AT the displayed size (max-width 120% ≈ 510px)
   ░░░ and drop the scale, so the high-res source (powders 1089-1339, liquids
   ░░░ 924-1066) rasterises crisp. Same displayed size (340×1.5 == 510×1).
   ░░░ Hover = a clean translateY lift (no scale → no re-raster blur); the teal
   ░░░ glow still comes from the base hover filter. bac-water is intentionally
   ░░░ excluded — its source is only 359px, so 510px would upscale-blur anyway.
   ░░░ (b) STARS: hide the decorative .pp-particle dots on the 5 powder images
   ░░░ only (cards keep theirs; sprays/dropper keep theirs).
   ════════════════════════════════════════════════════════════════════════ */
html body .pp-image-wrap:not(.is-coa) img[src*="piracetam"],
html body .pp-image-wrap:not(.is-coa) img[src*="dihexa"],
html body .pp-image-wrap:not(.is-coa) img[src*="9-me-bc"],
html body .pp-image-wrap:not(.is-coa) img[src*="tak-653"],
html body .pp-image-wrap:not(.is-coa) img[src*="enclomiphene"],
html body .pp-image-wrap:not(.is-coa) img[src*="noopept"],
html body .pp-image-wrap:not(.is-coa) img[src*="bromantane"],
html body .pp-image-wrap:not(.is-coa) img[src*="methylene-blue"] {
    max-width: 120% !important;
    max-height: 120% !important;
    /* The 120% box is WIDER than its block wrapper DIV (425px), so it can't be
       centred by margin:auto (auto→0 ⇒ left-aligns, ~43px off). Centre it with
       the left:50% + translateX(-50%) trick, which works at any width. */
    margin: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(2px) !important;
}
html body .pp-image-wrap:not(.is-coa):hover img[src*="piracetam"],
html body .pp-image-wrap:not(.is-coa):hover img[src*="dihexa"],
html body .pp-image-wrap:not(.is-coa):hover img[src*="9-me-bc"],
html body .pp-image-wrap:not(.is-coa):hover img[src*="tak-653"],
html body .pp-image-wrap:not(.is-coa):hover img[src*="enclomiphene"],
html body .pp-image-wrap:not(.is-coa):hover img[src*="noopept"],
html body .pp-image-wrap:not(.is-coa):hover img[src*="bromantane"],
html body .pp-image-wrap:not(.is-coa):hover img[src*="methylene-blue"] {
    transform: translateX(-50%) translateY(-6px) !important;
}
/* DE-PARTICLE — ALL product detail images (owner: keep particles on the cards,
   remove the floating dots inside the product images for EVERY product; also
   stops them showing THROUGH the products). The dots = .pp-particle / .pp-drift
   floating spans + the ::after pulsing dot-grid. The ::before halo glow is KEPT
   (it's a soft glow, not a particle). Cards use .card-drift in .product-image,
   so they are untouched. */
html body .pp-image-wrap:not(.is-coa) .pp-particle,
html body .pp-image-wrap:not(.is-coa) .pp-drift,
html body .pp-image-wrap:not(.is-coa)::after {
    display: none !important;
}
/* ===================== /R603 ===================== */


/* ════════════════════════════════════════════════════════════════════════
   ░░░ R604 — Powder CARDS only: nudge the jar a tad below centre (owner req).
   ░░░ R601 set these to top:0 (dead-centre); lower them ~6px. Powders only
   ░░░ (not sprays/dropper/bac-water), cards only (detail uses .pp-image-wrap).
   ░░░ Later source order than R601 → wins at equal specificity.
   ════════════════════════════════════════════════════════════════════════ */
html body #main-content #products .product-card[data-product-id="PIRA"] .product-image img,
html body #main-content #products .product-card[data-product-id="DIHEXA"] .product-image img,
html body #main-content #products .product-card[data-product-id="MEBC"] .product-image img,
html body #main-content #products .product-card[data-product-id="TAK653"] .product-image img,
html body #main-content #products .product-card[data-product-id="ENCLO"] .product-image img {
    top: 16px !important;
}
/* ===================== /R604 ===================== */


/* ════════════════════════════════════════════════════════════════════════
   ░░░ R606 — Detail image: slow up/down bob, matching the catalog cards.
   ░░░ The card float (`vialFloat`, 10px / 5s / ease-in-out) animates the card
   ░░░ <img>. On the detail page the <img>'s transform is a static !important
   ░░░ (scale + centring + sharpen), which overrides — and therefore kills —
   ░░░ its own float animation. So we bob the image's WRAPPER DIV instead
   ░░░ (`.pp-image-wrap > div`, which carries no other transform): same
   ░░░ 10px / 5s drift, while the <img> keeps every static transform intact.
   ░░░ Applies to ALL products (vials, blends, powders, liquids, bac-water).
   ░░░ Pauses on hover (like the cards); off under prefers-reduced-motion.
   ════════════════════════════════════════════════════════════════════════ */
@keyframes ppDetailBob {
    0%, 100% { transform: translateZ(0) translateY(0); }
    50%      { transform: translateZ(0) translateY(-10px); }
}
html body .pp-image-wrap:not(.is-coa) > div {
    animation: ppDetailBob 5s ease-in-out infinite;
}
html body .pp-image-wrap:not(.is-coa):hover > div {
    animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
    html body .pp-image-wrap:not(.is-coa) > div {
        animation: none;
    }
}
/* ===================== /R606 ===================== */


/* ════════════════════════════════════════════════════════════════════════
   ░░░ R607 — Filter rows re-attached INSIDE the #r540-console panel + ICONS
   ░░░ The R600 dual-axis chips were detached onto the grey page bg (because
   ░░░ their old dark palette needed a dark bg). Now light-themed, they live
   ░░░ back inside the white command panel, under a hairline divider, with the
   ░░░ category icons (fa-brain / fa-bolt / fa-vial / …) restored — the way the
   ░░░ old .cqj-tile filter looked. Behaviour unchanged (catalog-filters.js).
   ════════════════════════════════════════════════════════════════════════ */
html body #products #r540-console #cf-filters {
    margin: 26px 0 0;
    padding-top: 24px;
    border-top: 1px solid rgba(13, 148, 136, 0.16);   /* hairline under the search bar */
}
/* restored category icons inside each chip */
html body #products #cf-filters .cf-chip i {
    font-size: 11.5px;
    margin-right: 7px;
    color: #0d9488;                       /* teal icon = the graphic pop */
    flex: 0 0 auto;
}
html body #products #cf-filters .cf-chip:hover i { color: #0f766e; }
html body #products #cf-filters .cf-chip.is-active i { color: #053b34; }  /* on the teal fill */
html body #products #cf-filters .cf-bundles-link i { margin-right: 7px; }

/* Mobile: with icons the chips are wider, so the R600 swipe-strip hid 7 of 8
   categories behind a 3-screen-wide horizontal scroll (no affordance, chips
   sliced mid-word). A filter must show its options — let the rows WRAP so every
   category is visible and tappable. Overrides the R600 @600px nowrap/scroll. */
@media (max-width: 600px) {
    html body #products #cf-filters .cf-row {
        flex-wrap: wrap;
        overflow-x: visible;
        margin-left: 0;
        margin-right: 0;
        padding: 0;
    }
}
/* ===================== /R607 ===================== */


/* ════════════════════════════════════════════════════════════════════════
   ░░░ R610 — Research-area row = vertical icon TILES (owner reference photo:
   ░░░ the old .cqj-tile blocks — a rounded-square icon chip on top, bold label
   ░░░ below, centred in a rounded-rectangle card; the active tile a soft teal
   ░░░ tint with a SOLID teal icon chip). Sized "a tad smaller" than the
   ░░░ originals. ONLY the [data-axis="area"] row is rebuilt; the Format row
   ░░░ keeps its pills, untouched. The #cf-filters id gives these 2-id
   ░░░ specificity so they outrank the R607 inline-icon rules.
   ░░░ (Supersedes R609.)
   ════════════════════════════════════════════════════════════════════════ */
html body #products #cf-filters .cf-row[data-axis="area"] {
    gap: 8px;
    align-items: stretch;                 /* equal-height tiles */
}
html body #products #cf-filters .cf-row[data-axis="area"] .cf-chip {
    flex: 1 1 92px;                        /* tiles grow to fill the row (grid-of-tiles look) */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 86px;
    padding: 12px 10px 11px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;                   /* rounded-rectangle card, not a pill */
    background: #ffffff;
    color: #334155;
    font-weight: 600;
    line-height: 1.15;
    white-space: normal;                   /* let "Growth / IGF-1" wrap to 2 lines */
    text-align: center;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}
/* the <i> glyph becomes a rounded-square icon chip sitting on top */
html body #products #cf-filters .cf-row[data-axis="area"] .cf-chip i {
    width: 30px;
    height: 30px;
    margin: 0;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 8px;
    font-size: 15px !important;          /* outrank FA's `font:1em` shorthand + the #main-content normalizer */
    color: #0d9488;
    background: linear-gradient(180deg, rgba(20, 184, 166, 0.14), rgba(20, 184, 166, 0.05));
    border: 1px solid rgba(20, 184, 166, 0.20);
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
html body #products #cf-filters .cf-row[data-axis="area"] .cf-chip:hover {
    border-color: rgba(20, 184, 166, 0.42);
    background: #ffffff;
    color: #0f766e;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px -5px rgba(15, 23, 42, 0.16);
}
html body #products #cf-filters .cf-row[data-axis="area"] .cf-chip:hover i {
    color: #0d9488;
}
/* active tile: soft teal-tint card + SOLID teal icon chip (matches the ref) */
html body #products #cf-filters .cf-row[data-axis="area"] .cf-chip.is-active {
    border-color: rgba(20, 184, 166, 0.5);
    background: linear-gradient(180deg, rgba(20, 184, 166, 0.12), rgba(20, 184, 166, 0.04));
    color: #0f766e;
    font-weight: 700;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.14);
}
html body #products #cf-filters .cf-row[data-axis="area"] .cf-chip.is-active i {
    background: linear-gradient(180deg, #2dd4bf, #14b8a6);
    border-color: transparent;
    color: #ffffff;
}
html body #products #cf-filters .cf-row[data-axis="area"] .cf-chip.is-active:hover {
    color: #0f766e;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.18), 0 8px 18px -6px rgba(20, 184, 166, 0.32);
}
/* ===================== /R610 ===================== */


/* R612 — more breathing room above "Curated Research Bundles". When a filter
   shrinks the grid to a few cards, the bundles panel crowded the product cards
   (was margin-top:46px). Bump the gap so the section reads as clearly separate
   at any result count. */
html body #main-content #products .products-stacks-section { margin-top: 140px !important; }
@media (max-width: 600px) {
    html body #main-content #products .products-stacks-section { margin-top: 90px !important; }
}
/* ===================== /R612 ===================== */


/* ============================================================
   R613 · Catalog first-paint loading skeleton (products.html)
   #products-grid is empty in static HTML; the deferred app.js
   (630KB, runs after partials.js) fills it via
   grid.innerHTML = … (app.js:4320). That replace removes these
   placeholders atomically, so the catalog never shows a blank
   gap while the real cards render — it shows structured shimmer
   cards instead, which also reserves the grid's height (no CLS).
   Placeholders are .pc-skeleton (NOT .product-card), so the
   filter / reveal / JSON-LD logic ignores them and start()'s
   `.product-card` poll keeps waiting for the real grid.
   ============================================================ */
#products-grid .pc-skeleton{
    position:relative; overflow:hidden;
    display:flex; flex-direction:column; gap:11px;
    padding:14px;
    background:#fff;
    border:1px solid rgba(15,23,42,.07);
    border-radius:16px;
    box-shadow:0 1px 2px rgba(15,23,42,.04);
}
#products-grid .pc-skeleton .sk{ background:#e8ecf1; border-radius:8px; }
#products-grid .pc-skeleton .sk-img{ width:100%; aspect-ratio:1/1; border-radius:12px; margin-bottom:3px; }
#products-grid .pc-skeleton .sk-line{ height:13px; }
#products-grid .pc-skeleton .sk-line.w90{ width:90%; }
#products-grid .pc-skeleton .sk-line.w55{ width:55%; }
#products-grid .pc-skeleton .sk-price{ height:22px; width:42%; margin-top:6px; }
#products-grid .pc-skeleton .sk-btn{ height:44px; width:100%; border-radius:10px; margin-top:auto; }
/* sweep — transform-only (GPU); clipped to the card by overflow:hidden */
#products-grid .pc-skeleton::after{
    content:''; position:absolute; inset:0;
    transform:translateX(-100%);
    background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.6) 50%, transparent 100%);
    animation:pcSkelSweep 1.5s cubic-bezier(.4,0,.2,1) infinite;
    will-change:transform;
}
@keyframes pcSkelSweep{ to{ transform:translateX(100%); } }
/* a11y-only "Loading products…" label */
#products-grid .pc-skel-sr{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
@media (prefers-reduced-motion: reduce){
    #products-grid .pc-skeleton::after{ animation:none; opacity:0; }
}
@media (max-width:600px){
    #products-grid .pc-skeleton{ padding:11px; border-radius:13px; gap:9px; }
    #products-grid .pc-skeleton .sk-btn{ height:40px; }
}
/* ===================== /R613 ===================== */


/* ============================================================
   R614 — STRUCTURAL FIX: products page "blank body until JS".
   ROOT CAUSE: the base rule `.products-section { display:none }`
   (styles.css:1607) hid the ENTIRE products section until
   app.js's showSite() added `.visible`. Because .products-section
   is the whole above-the-fold content on products.html, the page
   body stayed BLANK (nav only) until the 630KB deferred app.js
   finished downloading + parsing + running (initAgeGate →
   showSite), i.e. the 1–2s blank the owner reported. The homepage
   was immune only because its .hero defaults to display:flex, so
   its display:none sections sit below the fold.
   FIX: reveal the section by default so it paints with the HTML —
   no JS gate. The age-gate overlay still blocks it pre-verification
   (identical to the already-always-visible .hero), and showSite()
   adding `.visible` stays a harmless no-op. No !important, so any
   runtime inline display change is still respected.
   ============================================================ */
html body .products-section { display: block; }
/* ===================== /R614 ===================== */


/* ============================================================
   R616 — Trio (3-vial) stack cards on the products page.
   The shared .stack-vial transforms were tuned for TWO vials
   (left + right); the third vial got only a translateY, so it
   inherited the far-right flex slot and pushed the first vial
   off the left edge → an asymmetric 1% / 56% / 93% splay that
   read as "odd". Duos (22% / 78%) are symmetric and look clean.
   Fix: give cards that actually contain a .stack-vial-3 their
   own SYMMETRIC resting fan with slightly smaller vials so all
   three sit in frame, then a converge-on-hover that matches the
   duo interaction (separated at rest → cluster on hover).
   Scoped with :has(.stack-vial-3) so 2-vial cards are untouched.
   ============================================================ */
@media (min-width: 541px) {
    html body .stack-card:has(.stack-vial-3) .stack-image .stack-vial {
        height: 74% !important;   /* narrower so 3 fit; flex centres them ~14/50/86 */
    }
    html body .stack-card:has(.stack-vial-3) .stack-image .stack-vial-1 {
        transform: rotate(-8deg) translateZ(0) !important; z-index: 2 !important;
    }
    html body .stack-card:has(.stack-vial-3) .stack-image .stack-vial-2 {
        transform: rotate(0deg) translateY(-4%) translateZ(0) !important; z-index: 4 !important;
    }
    html body .stack-card:has(.stack-vial-3) .stack-image .stack-vial-3 {
        transform: rotate(8deg) translateZ(0) !important; z-index: 2 !important;
    }
    /* hover: slide the outer two inward into a tight cluster, lift the centre */
    html body .stack-card:has(.stack-vial-3):hover .stack-image .stack-vial-1 {
        transform: rotate(-4deg) translateX(50%) translateZ(0) !important;
    }
    html body .stack-card:has(.stack-vial-3):hover .stack-image .stack-vial-2 {
        transform: rotate(0deg) translateY(-7%) scale(1.05) translateZ(0) !important;
    }
    html body .stack-card:has(.stack-vial-3):hover .stack-image .stack-vial-3 {
        transform: rotate(4deg) translateX(-50%) translateZ(0) !important;
    }
}
/* ===================== /R616 ===================== */

/* ===================== R628 — REVERTED 2026-06-15 ===================== */
/* The R628 vial GPU-layer block (transform:translateZ(0) + will-change +
   backface-visibility on the 3 hero vials) was REMOVED. It force-promoted 3
   permanent compositor layers, each carrying a heavy 4-deep drop-shadow —
   which FED the "Layerize 16%" the owner's profile measured and made the
   hero feel WORSE, not better. The real cost was "Recalculate Style" (50%),
   addressed by the static-spotlight JS (R628) + the R630 scroll/mousemove
   cuts, not by layer promotion. Do NOT re-add will-change here. */
/* ===================== /R628 ===================== */

/* ═══════════════ R631 — icy single-color research-area icons ═══════════════ */
/* (Was a per-topic palette; owner wanted ONE solid colour that reads as the
   icy cyan-teal of the vials/backgrounds.) Every area-tile icon now uses the
   brand icy teal: a brighter #14b8a6 glyph on a #2dd4bf-tinted square at rest,
   and the exact vial gradient (#2dd4bf→#14b8a6) with a white glyph when active.
   Icier/brighter than R610's #0d9488. Only the icon chip is overridden — the
   active CARD tint/ring stays R610's teal, which already matches. */
html body #products #cf-filters .cf-row[data-axis="area"] .cf-chip i {
    color: #14b8a6;
    background: linear-gradient(180deg, rgba(45, 212, 191, 0.18), rgba(45, 212, 191, 0.06));
    border-color: rgba(45, 212, 191, 0.28);
}
html body #products #cf-filters .cf-row[data-axis="area"] .cf-chip:hover i {
    color: #0d9488;
    background: linear-gradient(180deg, rgba(45, 212, 191, 0.26), rgba(45, 212, 191, 0.10));
}
html body #products #cf-filters .cf-row[data-axis="area"] .cf-chip.is-active i {
    color: #ffffff;
    background: linear-gradient(180deg, #2dd4bf, #14b8a6);
    border-color: transparent;
}
/* ═══════════════ /R631 ═══════════════ */

/* ═══════════════ R632 — tighten catalog header so more of the first vial row
   shows on landing. Trims oversized gaps/paddings only; the grid + tiles keep
   their layout (icon nudged 30→27px). ~60px reclaimed above the grid. ═══════ */
html body #products .r540-head { margin-bottom: 14px !important; }
html body #products .r540-head h1 { margin-bottom: 6px !important; }
html body #products #catalog-sticky-wrap {
    margin-bottom: 4px !important;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
}
html body #products #cf-filters {
    margin-top: 12px !important;
    padding-top: 12px !important;
    gap: 14px !important;
}
html body #products #cf-filters .cf-axis { gap: 8px !important; }
html body #products #cf-filters .cf-row[data-axis="area"] { gap: 7px !important; }
html body #products #cf-filters .cf-row[data-axis="area"] .cf-chip {
    padding-top: 9px !important;
    padding-bottom: 8px !important;
}
html body #products #cf-filters .cf-row[data-axis="area"] .cf-chip i {
    width: 27px !important;
    height: 27px !important;
}
/* ═══════════════ /R632 ═══════════════ */

/* R633 - MOBILE-ONLY - Home hero trust-row "See a sample COA" tap target.
   At <=768px the .htr-coa link computed only ~14px tall (under the comfortable
   touch minimum). The base .htr-coa is already inline-flex but has no min-height;
   the global r159 44px floor (styles.css line 53256) targets a.btn-primary /
   button / summary, not this plain inline link. Add a comfortable tap area.
   Scoped to max-width 768 + id #hero.r159 so desktop is untouched. */
@media (max-width: 768px) {
  html body #hero.r159 .htr-coa {
    min-height: 40px !important;
    padding-block: 6px !important;
    align-items: center !important;
  }
}
/* end R633 */

/* R634 - MOBILE-ONLY - Bundles (bundles.html, #bundles .bx-*). The page is already
   well built for mobile (hero / featured card / savings ladder / builder tiles /
   summary all fit and stack cleanly at <=600 via the R312 block) - these are
   targeted tap-target nudges only, scoped to max-width 600 + #bundles so desktop
   is untouched. .bx-sum-rm / .bx-hero-link are JS-rendered: CSS-only. */
@media (max-width: 600px) {
  /* builder "remove item" X was ~21px wide -> easy to miss. Make it a 44px square. */
  html body #bundles .bx-sum-rm {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px !important;
  }
  /* hero "Curated stacks" / "Build your own" pills were ~36px tall -> bump to 44. */
  html body #bundles .bx-hero-cuts .bx-hero-link {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
}
/* end R634 */

/* R635 - MOBILE-ONLY - Affiliate (affiliate.html, #affiliate .ax-* / .aff-*). At 375
   the page is solid (no h-scroll; hero CTAs stack, why-grid already 1-col, 2x2 stat
   band fine). These harden the narrow-width (360/320) edges + polish, all id-scoped
   + mobile media so desktop is untouched. .aff-gate is app.js-rendered: CSS-only. */
@media (max-width: 600px) {
  /* why grid: auto-fill minmax(300px) can overflow <320px -> pin to explicit 1 col */
  html body #affiliate .ax-why-grid { grid-template-columns: 1fr !important; }
  /* personas were capped at max-width:240px even when 1-col -> looked under-sized; fill */
  html body #affiliate .ax-persona { max-width: none !important; width: 100% !important; }
}
@media (max-width: 480px) {
  /* primary gate CTA was a fixed ~320px (tight at 360, overflows <320) -> full-width */
  html body #affiliate .aff-gate .auth-submit {
    width: 100% !important;
    min-width: 0 !important;
    padding: 18px 24px !important;
    font-size: 1.05rem !important;
  }
  /* calculator card: trim side padding so the "N referrals / mo" value isn't edge-tight */
  html body #affiliate #ax-calc { padding: 20px 18px 18px !important; }
}
/* end R635 */

/* R636 - MOBILE-ONLY - Products/catalog (products.html, #products). Page is solid at
   375 (no h-scroll, 2-col product grid, 3/3/2 research tiles, toolbar stacks to a
   clean full-width column - the recon's "toolbar 600-768 conflict" actually resolves
   to column, no fix needed; sort select not truncated). Only real item: the catalog
   H1 floors at 33px and wraps to 3 lines (~105px tall) on phones - too dominant for a
   utility catalog title + eats vertical space. Trim it + bump the 11px meta line.
   @<=600 + id #products so desktop is untouched. */
@media (max-width: 600px) {
  html body #products #r540-console .r540-title { font-size: 27px !important; }
  html body #products #r540-console .r540-stats { font-size: 12px !important; }
}
/* end R636 */

/* R637 - MOBILE-ONLY - Reconstitution Calculator (calculator.html, #recon). Three real
   375px breaks found live (page is otherwise heavily mobile-tuned at 640/540):
   A1 (critical) GRID BLOWOUT: .calc-grid is a single 1fr column whose track inherits
       min-width:auto; the syringe SVG + the 4x90px tab strip give the column a ~371px
       min-content, so the whole .calc-card/.calc-right column overruns the 327px
       container and ~20px is clipped off the right edge (masked by body overflow-x).
       Fix = min-width:0 on the grid + its items so the track collapses to the container.
       (Verified live: track 371.203px -> 327px, card right 395 -> 351, fits the gutter.)
   A3 RESULT TABS: 4 tabs x min-width 90 = 360 in a ~325px nav -> silently h-scrolls
       (hidden scrollbar) and clips "Storage" with no affordance. Wrap to a 2x2 grid so
       all four are visible with one-line labels (~162px each).
   A2 SYRINGE SVG TEXT: at the phone scale (~0.34x) the 11px tick/label type renders ~4px
       - illegible. The real draw number is shown large in the .draw-to-pill + .recon-readout
       below, so these in-SVG labels are decorative/redundant; a conservative uniform bump
       lifts them off "microscopic" without breaking the fixed callout geometry (callout-sub
       "DRAW HERE" kept smaller so it doesn't overrun its 80-unit teal rect).
   All selectors id-scoped to #recon and inside max-width media -> desktop is untouched. */
@media (max-width: 768px) {
  html body #recon .calc-grid,
  html body #recon .calc-grid > .calc-card,
  html body #recon .calc-grid > .calc-right { min-width: 0 !important; }
}
@media (max-width: 540px) {
  /* A3 - tabs wrap to 2x2 instead of a hidden h-scroller */
  html body #recon .result-tabs .tab-nav { flex-wrap: wrap !important; overflow-x: visible !important; }
  html body #recon .result-tabs .tab-nav .tab-btn { flex: 1 1 50% !important; min-width: 0 !important; }
  /* A2 - lift the decorative in-SVG labels off microscopic (real number is in the pill) */
  html body #recon .syringe-stage .syringe-svg text { font-size: 18px !important; }
  html body #recon .syringe-stage .syringe-svg #callout-sub { font-size: 12px !important; }
}
/* end R637 */

/* R638 - MOBILE-ONLY - Stack Builder (protocol.html, #stacklab). The page is genuinely
   well-built for mobile across all three wizard steps (hero rotating-word headline fits -
   longest word "Social Cognition" 288px < 297px rotator; step-1 area grid 1-col; step-2 tier
   cards 1-col with the "Best value" corner ribbon correctly clipped by the card's overflow:hidden;
   step-3 blueprint 1-col, stat row + comp rows + buy box all fit, no h-scroll). The recon's High
   flags (tier-grid overflow, ribbon poke-through, rotator clip, bp-stats crowd) do NOT manifest
   at 375. The one genuine polish nit: the 3-pill step indicator can't fit one row on phones
   (labels total ~363px) so it wraps to 2 rows, leaving a DANGLING `.sl-step-sep` connector at the
   end of row 1 (reads as broken). Fix: hide the separators on phones + lightly tighten the pills,
   yielding a clean centered 2-row indicator (2 pills / 1 pill). NOTE: this page's design lives in
   an inline <style> with `html body #stacklab ...` !important rules that come AFTER the styles.css
   link, so a styles.css override must OUT-SPECIFY them: `#stacklab.protocol-page` = (1,2,2) beats
   the inline (1,1,2) regardless of source order. Scoped @<=480 (above that the indicator fits one
   row and keeps its separators) + id-scoped -> desktop untouched. */
@media (max-width: 480px) {
  html body #stacklab.protocol-page .sl-steps .sl-step-sep { display: none !important; }
  html body #stacklab.protocol-page .sl-steps { gap: 8px !important; }
  html body #stacklab.protocol-page .sl-steps .sl-step { padding: 7px 12px !important; font-size: 0.74rem !important; }
}
/* end R638 */

/* R639 - MOBILE-ONLY - Learn / Compound Library (education.html, #library). The page is in
   excellent mobile shape: NO h-scroll at 375; hero h1 2 lines + 54px/16px search; explorer
   collapses to 1-col with the animated stage on top (content fits its 300px box, not clipped);
   the compound dossier 2-col grid + glossary grid both collapse to 1-col; tick strips wrap.
   The recon's only High that's a real legibility issue: the SPECIMEN DATA panel's functional
   labels render at ~9px - the smallest text on the site - on the page's core reference content.
   Bump JUST those in-panel data labels to 11px on phones (leaving the decorative card-header
   eyebrow tags/codes as the intentional instrument-mono motif, consistent with the homepage pass).
   The 32px expand toggle is left as-is: the whole <summary> is natively tappable, so the visible
   chevron isn't the real hit area. Page CSS is INLINE (`html body #library ...` !important, after
   the styles.css link), so the override uses `#library.edu-page` (1,2,2) to beat inline (1,1,2).
   @<=760 matches the page's own mobile breakpoint + id-scoped -> desktop untouched. */
@media (max-width: 760px) {
  html body #library.edu-page .lib-data-k,
  html body #library.edu-page .lib-panel-head,
  html body #library.edu-page .lib-spec-blabel { font-size: 11px !important; }
}
/* end R639 */

/* R640 - MOBILE-ONLY - COAs (coa.html, light theme). Page is structurally sound at 375 (no
   h-scroll; grid renders 1-col; stats strip + how-we-test collapse to 1-col; toolbar stacks
   search-over-sort). Three real items:
   RF-H1 LEFT-EDGE STAGGER: the .coa-stats-strip and .coa-toolbar each carry their OWN 0 20px /
       0 14px inner padding ON TOP of the parent .container's gutter, so the stat cards sit ~34px
       from the edge (307px wide) while the result cards sit at the 14px container gutter (347px) -
       three different left edges. Zero the redundant inner gutters so every block aligns to the
       single container gutter (stat cards + search regain ~20-40px width).
   RF-H2 GRID: the intended `@media .coa-grid{grid-template-columns:1fr}` rule is DEAD (defeated by
       the inline `html body .coa-grid{minmax(280px,1fr)!important}` that loads after styles.css), so
       the single column is only an accident of the 280px floor. Make it deterministic with a
       higher-specificity (`.coa-section .coa-grid`, (0,2,2)) override that out-weighs the inline (0,1,2).
   iOS ZOOM: the search input is rem-based, so the global `html{font-size:15px}` at <=375 shrinks it
       to 15.3px (<16 -> iOS zooms the page on focus). Pin it to 16px.
   All scoped @<=768 + class/id-scoped to coa surfaces -> desktop untouched. */
@media (max-width: 768px) {
  html body .coa-section .coa-stats-strip { padding-left: 0 !important; padding-right: 0 !important; }
  html body .coa-section .coa-toolbar { padding-left: 0 !important; padding-right: 0 !important; }
  html body .coa-section .coa-grid { grid-template-columns: 1fr !important; }
  html body #coa-search-input { font-size: 16px !important; }
}
/* end R640 */

/* R641 - MOBILE-ONLY - Blog index (blog.html). Page is solid at 375 (no h-scroll; stats strip,
   blog grid, topics grid all collapse to 1-col; search 16px/46px). Its own CSS only defines
   980/720/600 breakpoints, so the 375 band inherits the 600 rules unchanged and three things stay
   desktop-sized: (1) the featured "Editor's Pick" teal IMAGE PANEL renders ~249px tall before the
   headline - eats the fold on the most important card; (2) every post card keeps 24px side padding,
   leaving only ~299px of text column on a 347px card; (3) the bottom CTA's two buttons stay
   auto-width and stack RAGGED (264px over 170px), not full-width. Reclaim the fold + width + tidy
   the CTA. All rules mirror the page's `html body .blog-* !important` weight; @<=600 (the page's
   own phone breakpoint) -> desktop untouched. */
@media (max-width: 600px) {
  html body .blog-featured-image { min-height: 150px !important; padding: 18px !important; }
  html body .blog-featured-image img { max-width: 120px !important; }
  html body .blog-post-card-top { padding: 18px 16px 12px !important; }
  html body .blog-post-card-bottom { padding: 14px 16px 18px !important; }
  html body .blog-cta .cta-buttons { flex-direction: column !important; }
  html body .blog-cta .cta-buttons .btn { width: 100% !important; justify-content: center !important; }
}
/* end R641 */

/* R642 - MOBILE-ONLY - Blog ARTICLES (blog-*.html, shared via global styles.css .blog-* rules so
   one block covers all 6 guides). The reading column is a clean single-column long-read with no
   overflow (global overflow-x guards in place); only spacing/heading/tap polish. Real items:
   (1) the article H1 renders 36px and a long title ("BPC-157 Research Guide: Mechanism, Protocols &
       Combination Pairings") wraps to ~6 lines, towering over the entire first screen and pushing the
       lede off the fold - tame it to ~30px / tighter line-height.
   (2) the in-page nav tap targets are sub-44px: TOC anchor links ~30px tall and sit close together,
       and the "Back to Blog" link ~38px - both are primary navigation, so give them comfortable height.
   (3) the bottom CTA's two pills stay auto-width (not full-width) - stack them full-width to match the
       blog-index CTA (R641) for consistency.
   H1 step-down kept conservative (article titles stay prominent). @<=600 + `html body` (matching the
   global blog rule weight) -> desktop untouched. SPECIFICITY NOTE: the un-classed article H1 is sized
   by the global normalizer `html body main h1:not(.section-title):not([class])` = 2.4rem !important
   (specificity 0,2,4); the `<main>` carries id="main-content", so the H1 override must be id-scoped
   (`#main-content.blog-page ...` = 1,2,3) to win. */
@media (max-width: 600px) {
  html body #main-content.blog-page .blog-header h1 { font-size: 1.95rem !important; line-height: 1.15 !important; }
  html body .toc a { padding: 8px 0 !important; }
  html body .blog-page .back-link { padding: 8px 0 !important; min-height: 40px !important; display: inline-flex !important; align-items: center !important; }
  html body .blog-cta .cta-buttons { flex-direction: column !important; }
  html body .blog-cta .cta-buttons .btn { width: 100% !important; justify-content: center !important; }
}
/* end R642 */

/* R643 - MOBILE-ONLY - FAQ (faq.html, help-center #faq). Two real items + one polish:
   H1 (real bug) OPEN-ANSWER 72px INDENT: the page has a 600px rule that resets the open accordion
       answer to a flush 18px padding, but a LATER, higher-specificity 768px rule
       (`html body .faq-grid .faq-item.open .faq-answer` (0,2,4)) RE-APPLIES the desktop
       `padding:4px 22px 22px 72px` - so on a phone the answer text is squeezed to ~241px with a big
       empty 72px left gutter. Re-assert a flush 18px padding with an id-scoped selector
       (`#faq .faq-item.open .faq-answer` = 1,2,3) so it out-weighs the 72px rule. Verified live: 72px.
   HERO H1 (same normalizer gotcha as the blog articles): the intended `@600 .faq-hero-main h1{2rem}`
       loses to the global un-classed-h1 normalizer `html body main h1:not(.section-title):not([class])`
       = 2.4rem (0,2,4), so the headline renders 36px on a phone. Re-assert 2rem id-scoped (`#faq ...`).
   CTA buttons (polish, consistency): the two pills stack auto-width + ragged (Contact 164px / the long
       support@elytralabsca.ca email 245px) - make them full-width column like the other page CTAs.
   NOTE: H2 in recon (search <16px iOS zoom) did NOT manifest live - the input computes 16px already.
   Answer-indent @<=768 (matches the 72px rule's breakpoint); h1 + CTA @<=600 (page's phone bp). All
   id-scoped to #faq -> desktop untouched. */
@media (max-width: 768px) {
  html body #faq .faq-item.open .faq-answer { padding: 4px 18px 18px 18px !important; }
}
@media (max-width: 600px) {
  html body #faq .faq-hero-main h1 { font-size: 2rem !important; }
  html body #faq .faq-cta-buttons { flex-direction: column !important; }
  html body #faq .faq-cta-buttons .faq-cta-btn { width: 100% !important; justify-content: center !important; }
}
/* end R643 */

/* R644 - MOBILE-ONLY - Account dashboard (account.html #dashboard-view, R543). The page is heavily
   mobile-covered already (R543 700/900/480 + R468 860/380 + R563 600); the signed-out auth card is
   clean (16px inputs, 49px submit, 40px eye, no overflow). Two dashboard items:
   M1 (verified live = 48px) LOYALTY BALANCE: `html body .loyalty-hero-value{3.2rem !important}` (30108)
       beats the intended `@640{.loyalty-hero-value{2.4rem}}` (plain class, no !important -> loses), so
       the hero balance renders 48px on a phone -> a 4-digit balance ("1,240") is tight/can wrap in the
       ~280px loyalty card. Re-assert 2.2rem id-scoped so it wins. (verified 48px live.)
   H1 SPEND-CHART LABELS: the inline JS builds a 320-unit-wide SVG bar chart; at 375 it scales to ~0.9,
       so the `.r543-bar-label` 9.5px / `.r543-bar-val` 10px render ~8.5/9px - under the 12px floor on the
       user's OWN data. Bump both to 12px to counteract the downscale. CAVEAT: the chart only builds when
       the account has order history, which the unauthenticated preview lacks, so this rule could NOT be
       render-verified live - spot-check on a real logged-in account before deploy (low risk: id-scoped
       font-size only; if 6-bar values collide, dial back to 11px).
   Stats strip stays 2-col @<=480 (deliberate R543 choice, functional) and the mono micro-labels (dss-label
       10px / kicker 10.5px) are the instrument motif - both left as-is, consistent with earlier pages.
   @<=480 + id-scoped #dashboard-view -> desktop untouched. */
@media (max-width: 480px) {
  html body #dashboard-view .loyalty-hero-value { font-size: 2.2rem !important; }
  html body #dashboard-view .r543-bar-label { font-size: 12px !important; }
  html body #dashboard-view .r543-bar-val { font-size: 12px !important; }
}
/* end R644 */

/* R645 - MOBILE-ONLY - Checkout (checkout.html .checkout-page). The most heavily mobile-worked page on
   the site: at 375 it is PRISTINE (verified live - info-grid + form-row + 3-col address all collapse to
   1-col, inputs 16px/46px, review CTA full-width, no h-scroll; recon found NO High flags). The one real
   gap is the breakpoint ladder: the global iOS-zoom guard that forces inputs to 16px is capped at <=600,
   so in the 601-768 band (landscape phones / small tablets) the checkout inputs fall back to 0.95rem
   (~15px) and iOS zooms the viewport on focus during the PAYMENT flow. Extend the 16px guard to <=768 for
   checkout inputs only (>768 desktop keeps its 0.95rem, no zoom risk there). Low-risk: only raises font in
   the 601-768 sliver. */
@media (max-width: 768px) {
  html body .checkout-page input,
  html body .checkout-page select,
  html body .checkout-page textarea { font-size: 16px !important; }
}
/* end R645 */

/* R646 - MOBILE-ONLY - Hide the homepage hero OPERATIONS panel (.hero-ops / aside[data-r154-ops] -
   the RT2001/GHK001/PIN001 purity readouts) on phones, per owner request. Uses display:none (the element
   is NOT removed) so the R154 GSAP load-cascade target still resolves -> no null-target warn. .hero-ops is
   a column-flex child of #hero, so hiding it cleanly reclaims its ~203px with no leftover gap. id-scoped
   to #hero to beat the #main-content Inter normalizer; @<=768 -> desktop keeps the panel unchanged. */
@media (max-width: 768px) {
  html body #hero .hero-ops { display: none !important; }
}
/* end R646 */

/* R647 - MOBILE-ONLY - Homepage hero composition (index.html #hero.hero-reading-room). A design pass, not
   a structural patch. On phones the product (the 3-vial cluster) sat entirely below the fold (cluster top
   ~733px on a 390x844 device, fully below on smaller phones) because the column front-loads: 96px pad +
   chromatogram + an 80px "99.96%" readout + a mono subline w/ 40px gap + headline w/ 30px gap + an empty
   tagline w/ 18px gap + the CTA/price/rating/COA block, with a 32px grid gap before the visual. The column
   also read left/left/left then the "Third-party tested" headline jumped to text-align:center, and the
   vial cluster leaned ~52px right of viewport centre (positioned for the desktop right-hand split).
   Fixes (mobile only; desktop split untouched):
   - bring the vials into frame by tightening the rhythm above them: pad-top 96->72 (keeps fixed-nav
     clearance), "99.96%" hero-stat clamp 80->~51px (still a confident proof number, no longer a
     full-screen showpiece) with tighter margins, hero-mono-sub gap 40->14, headline gap 30->16, kill the
     empty tagline's 18px gap, grid row-gap 32->16. Net ~135px pulled up, so the front vial crests well
     into the first screen on a 667-tall phone.
   - unify alignment: left-align the lone centered headline (.r166-lede) to the left-editorial column.
   - recentre the cluster via position:relative + left:-52px on .hero-visual (NOT transform: that element
     carries the JS-driven --r159-py float transform, which must be preserved).
   Every selector is id-scoped to #hero.hero-reading-room to beat the existing #hero.hero-reading-room
   chains (spec 1,2,0) + sits at the stylesheet tail; all rules @<=768 so desktop is byte-for-byte
   unchanged. Tuned live against the preview. */
@media (max-width: 768px) {
  html body #hero.hero-reading-room { padding-top: 72px !important; padding-bottom: 24px !important; }
  html body #hero.hero-reading-room .hero-stat { font-size: clamp(46px, 13vw, 56px) !important; line-height: 0.96 !important; margin-top: 2px !important; margin-bottom: 8px !important; }
  html body #hero.hero-reading-room .hero-mono-sub { margin-bottom: 14px !important; }
  html body #hero.hero-reading-room .hero-context.r166-lede { text-align: left !important; margin-bottom: 16px !important; }
  html body #hero.hero-reading-room .hero-tagline { margin-bottom: 0 !important; }
  html body #hero.hero-reading-room .hero-content { row-gap: 16px !important; }
}
/* end R647 (vial cluster recentre superseded by R648 - explicit spread) */

/* R648 - MOBILE-ONLY - Hero vial SPREAD (index.html #hero.hero-reading-room .hero-visual).
   The 3 product vials were a tight, right-leaning clump: main GLP3-R front centre-left, and
   BOTH MOTS-C + BPC-157 stacked on the right (centreX ~240 in a 390 viewport). Recomposed so
   the trio breathes - GLP3-R owns the front-centre focal, MOTS-C anchors LEFT, BPC-157 anchors
   RIGHT, staggered in height. We move left/top ONLY: every vial keeps its existing --vb-base
   tilt + breath transform (main translate(-50%,-50%); mots rotate(2deg); bpc rotate(-1.5deg))
   and the GSAP entrance, which must not be clobbered. The R647 .hero-visual left:-52 cluster
   nudge is dropped (the spread replaces it). id-scoped to
   #hero.hero-reading-room .hero-vial-link.hero-vial-link-X (spec 1,3,2) to beat the existing
   no-id positioning chains; @<=768 so the desktop split layout is byte-for-byte untouched. */
@media (max-width: 768px) {
  html body #hero.hero-reading-room .hero-vial-link.hero-vial-link-main { left: 142px !important; }
  html body #hero.hero-reading-room .hero-vial-link.hero-vial-link-mots { left: 18px !important; right: auto !important; width: 128px !important; top: 28px !important; }
  html body #hero.hero-reading-room .hero-vial-link.hero-vial-link-bpc { left: 186px !important; right: auto !important; width: 139px !important; top: 46px !important; }
}
/* end R648 */

/* R649 - MOBILE-ONLY - Catalog filters collapse (products.html #cf-filters). On phones the dual-axis
   filter taxonomy (Research area: 8 chips + Format: 5 chips, rendered as big icon tiles) was expanded
   inline and pushed the product grid down past ~990px - a mobile shopper scrolled a wall of filters
   before seeing a single product. Fix: collapse #cf-filters behind a "Filters" button (injected by a
   tiny mobile-only inline script at the tail of products.html) so the grid sits right under the toolbar;
   tapping Filters reveals the panel. The R611 dual-axis click handlers + #catalog-active-filters chips
   are untouched (active filters still surface below the status row + as a count on the button). The
   sticky #cf-filters IntersectionObserver still runs; we force position:static on mobile so the OPENED
   panel flows inline instead of going fixed. The injected #cf-toggle button carries display:none inline,
   so on desktop (>768) nothing changes - the button stays hidden and #cf-filters shows normally.
   id-scoped + @<=768 -> desktop byte-for-byte unchanged. */
@media (max-width: 768px) {
  html body #cf-filters { display: none !important; }
  html body #cf-filters.cf-open { display: block !important; }
  html body #cf-filters.is-stuck { position: static !important; }
  html body #catalog-sticky-wrap .cf-toggle {
    display: flex !important; align-items: center; justify-content: center; gap: 10px;
    width: 100%; margin: 12px 0 0; min-height: 46px; padding: 0 16px;
    font: 700 0.95rem/1 'Geist', system-ui, sans-serif;
    color: #06070A; background: #2dd4bf; border: none; border-radius: 12px;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  html body #catalog-sticky-wrap .cf-toggle .cf-toggle-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
    background: #06070A; color: #2dd4bf; font-size: 0.72rem; font-weight: 700;
  }
  html body #catalog-sticky-wrap .cf-toggle .cf-toggle-caret { transition: transform .2s ease; font-size: 0.8em; opacity: 0.8; }
  html body #catalog-sticky-wrap .cf-toggle.is-open .cf-toggle-caret { transform: rotate(180deg); }
}
@media (prefers-reduced-motion: reduce) {
  html body #catalog-sticky-wrap .cf-toggle .cf-toggle-caret { transition: none !important; }
}
/* end R649 */

/* R650 - MOBILE-ONLY - Product gallery hierarchy (product-*.html .pp-image-col). On phones the two
   gallery thumbnails render 179x179 each (a 2-col fill-width grid) - 54% of the 331px hero image, so a
   secondary control rivals the product shot (inverted hierarchy) and the stack pushes name/price/CTA
   below the fold. Constrain the thumb row so the thumbnails read as clearly subordinate (~127px) and
   tighten the gallery->title gap, pulling the name + price up. We do NOT shrink them small enough to
   break the second thumb, which is the COA-preview "VIEW COA" card (a trust CTA that needs legible
   height). id-scoped via .pp-image-col + @<=768 -> desktop product layout untouched. Applies to all 17
   product-*.html pages (shared .pp-* template). */
@media (max-width: 768px) {
  html body .pp-image-col .pp-thumbs { max-width: 270px !important; margin-top: 10px !important; gap: 10px !important; }
}
/* end R650 */

/* R651 - MOBILE-ONLY - Homepage hero recompose (owner screenshot review):
   (1) Move the 3-vial cluster to sit directly below the "(independently verified · lot RT2001)" purity
       readout, with the headline + CTA flowing beneath it. Done WITHOUT touching the DOM, the desktop
       split, or the R154 GSAP targets: on mobile we flatten .hero-text with display:contents so its
       children become grid items of .hero-content alongside .hero-visual, then `order` sequences the
       proof readout (1) -> vials (2) -> headline + CTA (3). display:contents + order are pure layout, so
       every element, selector and GSAP tween is unchanged.
   (2) Bump the "Third-party tested..." headline 16 -> 19px (owner: too small).
   (3) Shop-catalog CTA -> full-width, so it reads as the deliberate primary action instead of a 257px
       centre-labelled slab floating off the left-aligned trust stack below it.
   id-scoped #hero.hero-reading-room + @<=768 -> desktop byte-for-byte unchanged. Tuned live. */
@media (max-width: 768px) {
  html body #hero.hero-reading-room .hero-content { grid-template-rows: none !important; }
  html body #hero.hero-reading-room .hero-content > .hero-text { display: contents !important; }
  html body #hero.hero-reading-room .hero-content > .hero-text > .hero-spec-margin,
  html body #hero.hero-reading-room .hero-content > .hero-text > .hero-stat-leadin,
  html body #hero.hero-reading-room .hero-content > .hero-text > .hero-stat,
  html body #hero.hero-reading-room .hero-content > .hero-text > .hero-mono-sub { order: 1 !important; }
  /* display:contents stretches the formerly-flex children to full grid width, so the lede + stat (which
     carry intrinsic centring) drift centre. Re-pin the whole proof block hard-left like the rest. */
  html body #hero.hero-reading-room .hero-content > .hero-text > .hero-stat-leadin,
  html body #hero.hero-reading-room .hero-content > .hero-text > .hero-stat,
  html body #hero.hero-reading-room .hero-content > .hero-text > .hero-mono-sub {
    text-align: left !important; justify-content: flex-start !important; justify-self: stretch !important;
  }
  html body #hero.hero-reading-room .hero-content > .hero-visual { order: 2 !important; margin-top: 6px !important; }
  html body #hero.hero-reading-room .hero-content > .hero-text > .hero-context,
  html body #hero.hero-reading-room .hero-content > .hero-text > .hero-tagline,
  html body #hero.hero-reading-room .hero-content > .hero-text > .hero-cta-r154 { order: 3 !important; }
  html body #hero.hero-reading-room .hero-context.r166-lede { font-size: 19px !important; line-height: 1.42 !important; margin-top: -54px !important; }
  html body #hero.hero-reading-room .hero-cta-r154 .hero-cta-inline { width: 100% !important; justify-content: center !important; }
}
/* end R651 */

/* R652 - MOBILE-ONLY - Hero vial SHELF (owner reference: Disguised Alpha). Supersedes the R648 spread.
   The owner wants the 3 vials on ONE baseline: middle exactly centred + upright + slightly forward, the
   LEFT vial leaning left and the RIGHT vial leaning right (fanned outward, not the old inward lean). We
   override the R648 left/top with bottom-aligned positions, resize the imgs to a near-uniform set (middle
   a touch larger), and override --vb-base (consumed by the r153r98 breath keyframe) to set the outward
   tilts. Middle stays centre-anchored (translate -50% X on left:50%); the outer two corner-anchor from the
   gutters. .hero-visual height trimmed so the shelf hugs the readout above it. Mobile-only; desktop
   untouched. Tuned live. */
@media (max-width: 768px) {
  html body #hero.hero-reading-room .hero-visual { height: 230px !important; min-height: 230px !important; }
  /* Disable the breath keyframe on mobile so we can set the transforms directly (a running animation
     can't be overridden by !important). Vials become static, bottom-aligned, with explicit tilts. */
  /* middle (GLP3-R) - centred, upright, largest, slightly forward */
  html body #hero.hero-reading-room .hero-vial-link.hero-vial-link-main {
    left: 50% !important; right: auto !important; top: auto !important; bottom: 22px !important; width: auto !important;
    transform: translateX(-50%) !important; transform-origin: bottom center !important; animation: none !important;
  }
  html body #hero.hero-reading-room .hero-vial-link.hero-vial-link-main .hero-vial-main { width: 150px !important; height: auto !important; }
  /* left (MOTS-C) - leans LEFT off the shelf */
  html body #hero.hero-reading-room .hero-vial-link.hero-vial-link-mots {
    left: 8px !important; right: auto !important; top: auto !important; bottom: 30px !important; width: 130px !important;
    transform: rotate(-9deg) !important; transform-origin: bottom center !important; animation: none !important;
  }
  html body #hero.hero-reading-room .hero-vial-link.hero-vial-link-mots .hero-vial-secondary { width: 130px !important; height: auto !important; }
  /* right (BPC-157) - leans RIGHT off the shelf */
  html body #hero.hero-reading-room .hero-vial-link.hero-vial-link-bpc {
    left: auto !important; right: 8px !important; top: auto !important; bottom: 30px !important; width: 130px !important;
    transform: rotate(9deg) !important; transform-origin: bottom center !important; animation: none !important;
  }
  html body #hero.hero-reading-room .hero-vial-link.hero-vial-link-bpc .hero-vial-secondary { width: 130px !important; height: auto !important; }
}
/* end R652 */

/* R653 - MOBILE-ONLY - Catalog "products lead" + data-voice prices (products.html). Benchmark: a top
   peptide/DTC catalog puts the card GRID in the fold; here the console chrome (27px 2-line H1 + stat line
   + a 62px search pill + Filters button + status row) pushed the first card to ~672 (only a peek). We
   condense the console so a full card row crests in, and move the card prices into JetBrains Mono tabular
   figures (the data voice) - scoped to #products-grid so the homepage bestseller cards are untouched.
   id-scoped #main-content + @<=768 -> desktop catalog unchanged. */
@media (max-width: 768px) {
  html body #products #r540-console { padding-top: 18px !important; padding-bottom: 14px !important; }
  html body #products #r540-console .r540-title { font-size: 23px !important; line-height: 1.12 !important; margin-bottom: 8px !important; }
  html body #products #product-search { padding-top: 14px !important; padding-bottom: 14px !important; }
  html body #catalog-sticky-wrap .cf-toggle { margin-top: 8px !important; }
  html body #products-grid .product-price-row { font-family: 'JetBrains Mono', ui-monospace, monospace !important; font-variant-numeric: tabular-nums !important; }
}
/* end R653 */

/* R654 - MOBILE-ONLY - Product detail first-viewport + data-voice price (product-*.html .pp-info).
   Benchmark: a top product page shows the hero image + name + price up top, price in the data voice. Here
   the name peeked at the fold but the price ($35) sat at 984 (below) behind a 66px synonyms block + a
   rating row, and the price was Inter. We tighten the name-block + breadcrumb + gallery gap to lift the
   name fully in and the price toward the fold (hero image kept prominent - no shrink), and move the price
   row into JetBrains Mono tabular figures to match the catalog. .pp-* is product-page-only; @<=768 ->
   desktop product layout untouched. Applies to all 17 product pages. */
@media (max-width: 768px) {
  html body .pp-breadcrumb { margin-bottom: 8px !important; }
  html body .pp-image-col .pp-thumbs { margin-top: 8px !important; }
  html body .pp-info .pp-badges-row { margin-bottom: 6px !important; }
  html body .pp-info .pp-dosage { margin-bottom: 6px !important; }
  html body .pp-info .pp-synonyms { margin-bottom: 8px !important; }
  html body .pp-info .pp-rating { margin-bottom: 8px !important; }
  html body .pp-info .pp-price-row,
  html body .pp-info .pp-price-row * { font-variant-numeric: tabular-nums !important; }
}
/* end R654 */

/* R655 - MOBILE-ONLY - Product detail buy-zone surfacing (product-*.html .pp-info). Benchmark + owner: the
   price + Add-to-Cart should lead, not sit below a 66px synonyms block + rating + a 179px bundle selector.
   We make .pp-info a flex column and float the buy block up with negative `order`: badges -> name ->
   dosage -> price -> Add-to-Cart, leaving everything else (synonyms, rating, tier selector, delivery,
   description, details...) at order 0 in DOM order below. Pure layout - no DOM edit, app.js + all JS hooks
   untouched. @<=768 -> desktop product layout unchanged. Applies to all 17 product pages. */
@media (max-width: 768px) {
  html body .pp-grid .pp-info { display: flex !important; flex-direction: column !important; }
  html body .pp-info .pp-badges-row { order: -5 !important; }
  html body .pp-info .pp-name { order: -4 !important; }
  html body .pp-info .pp-dosage { order: -3 !important; }
  html body .pp-info .pp-price-row { order: -2 !important; margin-top: 4px !important; }
  html body .pp-info .pp-buy-row { order: -1 !important; }
}
/* end R655 */

/* R656 - MOBILE-ONLY - Bundles hero condense (bundles.html .bx-hero). Benchmark: the product (the Featured
   Bundle card) should lead. The 1179px hero buried it - 507px of copy (headline 108 + desc 91 + a 114px
   RUO block) pushed .bx-hero-card to 775 (only a 69px peek). We tighten the headline leading, the desc
   margin, and shrink the prominent RUO block to quiet compliance text, lifting the featured card well into
   the fold. id-scoped .bx-hero chain + @<=768 -> desktop bundles hero unchanged. Tuned live. */
@media (max-width: 768px) {
  html body .bx-hero { padding-top: 44px !important; }
  html body .bx-hero .bx-hero-copy h1 { font-size: 30px !important; line-height: 1.06 !important; }
  html body .bx-hero .bx-hero-copy > p { margin-bottom: 14px !important; }
  html body .bx-hero .bx-ruo { font-size: 12.5px !important; line-height: 1.45 !important; margin-top: 4px !important; padding: 10px 12px !important; }
  html body .bx-hero .bx-hero-card { margin-top: 12px !important; }
}
/* end R656 */

/* R657 - MOBILE-ONLY - Checkout sticky "Continue to Payment · $TOTAL" action bar.
   Benchmark (Shopify/Amazon mobile checkout): the running total and the primary
   CTA must stay visible at all times. On this page the deliberate form-first
   decision (~styles.css:40277) pushes the order summary + its Continue button to
   y~3093 - the customer fills the ENTIRE form (contact/address/agreements/signature)
   before ever seeing the total or the way forward. Rather than reverse form-first
   (which put the CTA before the form), we pin a slim bar to the bottom of the
   viewport that mirrors the live total and fires the same checkoutNext(2). The bar
   is injected by checkout.html's inline script with inline display:none (desktop
   untouched) and lives INSIDE #checkout-step-1 so it auto-hides on the Payment step.
   It auto-tucks while a form input is focused (keyboard safety). @<=768 only;
   reuses .btn-primary so the button matches the site's black-pill CTA exactly. */
@media (max-width: 768px) {
  html body #co-mcta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    display: flex !important; align-items: center; gap: 12px;
    padding: 11px 16px calc(11px + env(safe-area-inset-bottom, 0px));
    background: rgba(255,255,255,0.94);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-top: 1px solid #e2e8f0;
    box-shadow: 0 -6px 22px rgba(15,23,42,0.10);
    transform: translateY(0);
    transition: transform 240ms cubic-bezier(0.23,1,0.32,1);
  }
  html body #co-mcta.co-mcta-tuck { transform: translateY(125%); }
  html body #co-mcta .co-mcta-amt {
    display: flex; flex-direction: column; line-height: 1.08; flex: 0 0 auto;
  }
  html body #co-mcta .co-mcta-amt .co-mcta-lbl {
    font-size: 0.6rem; letter-spacing: 0.09em; text-transform: uppercase;
    color: #64748b; font-weight: 700;
  }
  html body #co-mcta .co-mcta-amt .co-mcta-val {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 1.16rem; font-weight: 700; color: #0f172a;
    font-variant-numeric: tabular-nums;
  }
  html body #co-mcta .co-mcta-btn {
    flex: 1 1 auto; min-height: 50px; margin: 0 !important;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 18px !important; font-size: 0.98rem !important;
  }
  /* clear the fixed bar so footer / in-flow content isn't hidden behind it */
  html body main.checkout-page { padding-bottom: 92px !important; }
}
/* end R657 */

/* R660 - MOBILE-ONLY - Blog article body legibility. The article body
   (.blog-content, set to 1.02rem) rendered at 14.72px on phones because the
   global ~10% mobile root-font shrink scales the rem down. For long-form
   research guides that's below the 16px comfortable-reading / iOS-no-zoom
   floor. Restore body + list items to ~desktop size on mobile (≈16.5px) with
   a roomier line-height for sustained reading. Shared .blog-content selector
   → fixes all 6 articles at once. @<=768 only; desktop (full-size rem)
   untouched. body-scoped + !important beats the inline 1.02rem container rule. */
@media (max-width: 768px) {
  html body .blog-content,
  html body .blog-content p,
  html body .blog-content li {
    font-size: 16.5px !important;
    line-height: 1.72 !important;
  }
}
/* end R660 */

/* R661 - MOBILE-ONLY - Legal pages body legibility. The shared .legal-content
   prose rendered at 14.72px on phones (same global rem-shrink as the blog),
   below the comfortable-reading / iOS-no-zoom floor. Privacy / Terms / Shipping
   / Refund are long-form text users actually read for compliance trust, so
   restore body + list items to 16px with a roomier line-height. One shared
   selector → all 4 legal pages. @<=768 only; desktop untouched. */
@media (max-width: 768px) {
  html body .legal-content p,
  html body .legal-content li {
    font-size: 16px !important;
    line-height: 1.7 !important;
  }
}
/* end R661 */

/* R662 - MOBILE-ONLY - Home hero proof block: centre + tighten the stat cluster.
   The block (leadin "What the lab measured" → "99.96%" → "GLP-3 HPLC purity" →
   "(independently verified...)") was left-pinned and spaced by the .hero-content
   grid's 32px row-gap firing between EVERY item, giving three big equal gaps
   (38px / 40px) that read as disconnected rows. Owner wants it centred with
   sensible spacing. Centre all four lines, then negative top-margins counteract
   the 32px gap to build a tight caption rhythm: setup ~12px above the number,
   label ~8px below it (proximity = the number's caption), provenance tight under.
   Layout-only (margins/text-align) — does NOT touch the GSAP transforms/count-up.
   id-scoped #hero + @<=768 → desktop reading-room hero unchanged. */
@media (max-width: 768px) {
  /* match R651's child-chain specificity (1,4,2) so this later block wins the
     left-pin it set on these same items */
  html body #hero.hero-reading-room .hero-content > .hero-text > .hero-stat-leadin,
  html body #hero.hero-reading-room .hero-content > .hero-text > .hero-stat,
  html body #hero.hero-reading-room .hero-content > .hero-text > .hero-mono-sub,
  html body #hero.hero-reading-room .hero-content > .hero-text > .hero-mono-sub .hms-label,
  html body #hero.hero-reading-room .hero-content > .hero-text > .hero-mono-sub .hms-proof {
    text-align: center !important;
  }
  html body #hero.hero-reading-room .hero-content > .hero-text > .hero-stat-leadin {
    margin: 0 !important;
  }
  html body #hero.hero-reading-room .hero-content > .hero-text > .hero-stat {
    margin-top: -20px !important; margin-bottom: 0 !important;
  }
  html body #hero.hero-reading-room .hero-content > .hero-text > .hero-mono-sub {
    margin-top: -24px !important;
    flex-direction: column !important;
    align-items: center !important;
    row-gap: 2px !important;
  }
}
/* end R662 */

/* R663 - MOBILE-ONLY - Home hero micro-tweaks (owner ask): (1) nudge the "99.96%"
   proof number a hair larger (clamp 13vw->13.8vw, ~50.7->~54px); (2) make the
   three hero vials a touch bigger (+~8%: main 150->162, secondaries 130->141).
   Vials are bottom-anchored so they grow UPWARD into the existing ~47px of
   headroom above (won't crowd the "Third-party tested" line below, which keeps
   its gap). Same id-scoped selectors as R647/R652 + later source so this wins.
   @<=768 only; desktop hero untouched. */
@media (max-width: 768px) {
  html body #hero.hero-reading-room .hero-stat { font-size: clamp(48px, 13.8vw, 57px) !important; }
  html body #hero.hero-reading-room .hero-vial-link.hero-vial-link-main .hero-vial-main { width: 162px !important; }
  html body #hero.hero-reading-room .hero-vial-link.hero-vial-link-mots { width: 141px !important; }
  html body #hero.hero-reading-room .hero-vial-link.hero-vial-link-mots .hero-vial-secondary { width: 141px !important; }
  html body #hero.hero-reading-room .hero-vial-link.hero-vial-link-bpc { width: 141px !important; }
  html body #hero.hero-reading-room .hero-vial-link.hero-vial-link-bpc .hero-vial-secondary { width: 141px !important; }
}
/* end R663 */

/* R664 - MOBILE-ONLY - Centre the MIDDLE hero vial optically. The image box is
   geometrically dead-centre (translateX(-50%) at viewport mid), but the GLP3-R
   vial glyph inside retatrutide-dark.webp is ~9.6% left of the PNG's own centre
   (left margin 336px vs right 680px in the 1792px source) → the visible vial
   reads ~15px LEFT of centre. Compensate by shifting the box ~15px right so the
   glyph lands on the axis. Overrides R652's transform (same selector, later
   source); transform-origin inherited from R652. @<=768 only. */
@media (max-width: 768px) {
  html body #hero.hero-reading-room .hero-vial-link.hero-vial-link-main {
    transform: translateX(calc(-50% + 15px)) !important;
  }
}
/* end R664 */

/* R665 - MOBILE-ONLY - Re-balance the side vials after R664 moved the middle.
   Measured visible-glyph centres (canvas content-centroid + rotation matrix):
   middle 194 (centred), MOTS-C 77, BPC-157 286 → left gap 117 vs right gap 92
   (pair sat 13px left of the axis). Shift BOTH side vials +13px so the gaps
   equalise (~104/105) and the trio is symmetric about the centred middle.
   translateX is the OUTER transform = pure horizontal screen shift; rotation
   (R652's ±9deg) preserved. @<=768 only. */
@media (max-width: 768px) {
  html body #hero.hero-reading-room .hero-vial-link.hero-vial-link-mots {
    transform: translateX(13px) rotate(-9deg) !important;
  }
  html body #hero.hero-reading-room .hero-vial-link.hero-vial-link-bpc {
    transform: translateX(13px) rotate(9deg) !important;
  }
}
/* end R665 */

/* R666 - MOBILE-ONLY - Make the hero vials noticeably bigger (owner ask).
   Bottom-anchored, so to avoid the taller vials crashing into the proof text
   above we ALSO lower the anchors (grow down too) and relax the lede's -54px
   pull-up for bottom clearance. Middle centering is now SCALE-INVARIANT:
   translateX(-40.4%) = -50% + the PNG's 9.6% content-offset expressed as a %
   of the vial's own width, so it stays optically centred at any size (replaces
   R664's fixed +15px). Side translateX re-derived after measuring (R665 +13 →
   here). @<=768 only. Supersedes the widths/anchors in R652/R663/R664/R665. */
@media (max-width: 768px) {
  /* HEIGHT-driven (matches the desktop model height:560/width:auto) + uncap the
     inherited max-height:220 that was letterboxing the wider width. main 250px
     tall (~187 wide, +15%); secondaries 210px (~157 wide, +11%). */
  /* main is width-capped by its left:50% shrink-to-fit, so give the LINK an
     explicit width to break the cap; uncap the img max-height too. 191px wide
     (~256 tall) = clearly bigger. Dropped lower (bottom:2) to keep ~20px above
     the proof text since the taller vial grows up. */
  html body #hero.hero-reading-room .hero-vial-link.hero-vial-link-main {
    width: 191px !important; bottom: 2px !important; transform: translateX(-40.4%) !important;
  }
  html body #hero.hero-reading-room .hero-vial-link.hero-vial-link-main .hero-vial-main {
    width: 191px !important; height: auto !important; max-height: none !important;
  }
  html body #hero.hero-reading-room .hero-vial-link.hero-vial-link-mots .hero-vial-secondary,
  html body #hero.hero-reading-room .hero-vial-link.hero-vial-link-bpc .hero-vial-secondary {
    height: 215px !important; width: auto !important; max-height: none !important;
  }
  html body #hero.hero-reading-room .hero-vial-link.hero-vial-link-mots,
  html body #hero.hero-reading-room .hero-vial-link.hero-vial-link-bpc { width: auto !important; }
  html body #hero.hero-reading-room .hero-vial-link.hero-vial-link-mots {
    bottom: 18px !important; transform: translateX(15px) rotate(-9deg) !important;
  }
  html body #hero.hero-reading-room .hero-vial-link.hero-vial-link-bpc {
    bottom: 18px !important; transform: translateX(15px) rotate(9deg) !important;
  }
  html body #hero.hero-reading-room .hero-context.r166-lede { margin-top: -42px !important; }
}
/* end R666 */

/* R667 - MOBILE-ONLY - Nudge the "99.96%" stat up a little more (owner ask):
   clamp 13.8vw->14.9vw, ~53.8 -> ~58px. Supersedes R663's font-size. @<=768. */
@media (max-width: 768px) {
  html body #hero.hero-reading-room .hero-stat,
  html body #hero.hero-reading-room .hero-stat .hero-stat-num { font-size: clamp(59px, 16.2vw, 65px) !important; }
}
/* end R667 */

/* R668 - MOBILE-ONLY - Raise the 3 hero vials up the page (owner ask). They sat
   low in their band: ~78px empty above the visible caps vs only ~12px below to
   the lede. Lift all three +32px via the bottom anchors (main 2->34, sides
   18->50, preserving the 16px fanned offset) → ~46px above / ~44px below, more
   balanced and visibly higher. Supersedes R666's bottom anchors. @<=768. */
@media (max-width: 768px) {
  html body #hero.hero-reading-room .hero-vial-link.hero-vial-link-main { bottom: 34px !important; }
  html body #hero.hero-reading-room .hero-vial-link.hero-vial-link-mots { bottom: 50px !important; }
  html body #hero.hero-reading-room .hero-vial-link.hero-vial-link-bpc { bottom: 50px !important; }
}
/* end R668 */

/* R669 - MOBILE-ONLY - Limit the vertical reach of the vial glow (owner ask).
   The teal halo (.hero-visual::before) was a 300x300 CIRCLE, so it bled as far
   up/down as side-to-side, extending well past the vials top & bottom. Make it
   an ELLIPSE wider than tall (320x220) so the hue covers the vials + a little
   past but doesn't trail far vertically; re-centre on the raised vials (top
   40%). Horizontal spread kept. Supersedes the @<=768 size at styles.css:51408.
   @<=768 only; keeps the breathe animation + colour. */
@media (max-width: 768px) {
  html body #hero.hero-reading-room .hero-visual::before {
    top: 40% !important;
    width: 320px !important;
    height: 220px !important;
    background: radial-gradient(
      ellipse 50% 52% at 50% 50%,
      rgba(13, 148, 136, 0.20) 0%,
      rgba(13, 148, 136, 0.10) 32%,
      rgba(8, 60, 56, 0.06) 52%,
      transparent 72%
    ) !important;
  }
}
/* end R669 */

/* R670 - MOBILE-ONLY - The REAL vial glow: two big teal radial layers on the
   hero's own background (html body #hero.r159, styles.css:54588) with 48%/42%
   of-hero vertical radii (~350-400px) — they bleed the hue far up (to the stat)
   and down (to the lede). R669 only touched the minor ::before, so no visible
   change. Here we flatten BOTH layers vertically (48/42% -> 18%) and centre them
   on the vial band (52/44% -> 40%) so the teal hugs the vials + a little past,
   not far. Horizontal spread + alpha kept. id+2class beats the base selector;
   @<=768 only -> desktop's taller atmosphere unchanged. */
@media (max-width: 768px) {
  html body #hero.r159.hero-reading-room {
    background-image:
      radial-gradient(58% 18% at 70% 40%, rgba(45,212,191,0.078), rgba(6,7,10,0) 74%),
      radial-gradient(50% 18% at 33% 40%, rgba(45,212,191,0.038), rgba(6,7,10,0) 76%) !important;
  }
}
/* end R670 */

/* R671 - MOBILE-ONLY - Centre + lower the hero lede "Third-party tested peptides
   for researchers who read their COAs." (owner ask). It was force-left-aligned by
   the R647 editorial-column rule (styles.css:64683 text-align:left) — its box
   already has symmetric 24px gutters in the 390px viewport, so the text just sat
   left with ~45px dead space on the right. Centre the text (= centred on page,
   box is symmetric) and drop it a tad: margin-top -42 -> -28 (R666 was -42).
   Same selector specificity as both prior rules → wins on later source. @<=768. */
@media (max-width: 768px) {
  html body #hero.hero-reading-room .hero-context.r166-lede {
    text-align: center !important;
    margin-top: -28px !important;
  }
}
/* end R671 */

/* R672 - MOBILE-ONLY - Push the SHOP CATALOG button up (owner ask). It sat ~80px
   below the lede: the lede's 16px margin-bottom + two 32px hero-content grid
   row-gaps straddling an empty .hero-tagline track (lede / tagline / cta). Pull
   the CTA block up 40px via negative margin-top → ~40px gap, comfortable below a
   paragraph without crowding. Negative margin (not collapsing the tagline) keeps
   every GSAP target intact. @<=768; desktop frozen. */
@media (max-width: 768px) {
  html body #hero.hero-reading-room .hero-content > .hero-text > .hero-cta-r154 {
    margin-top: -40px !important;
  }
}
/* end R672 */

/* R673 - MOBILE-ONLY - Trust row → one clean line under the button (owner ask).
   (1) Drop the "from $20 a vial" anchor on phones. (2) Force the stars / "200+
   verified orders" / "See a sample COA" onto ONE line — they needed ~377px but
   only had 342px, so they wrapped to 3 visual rows. Shrink the type a tad
   (rating 13.5->12, COA 14->12.5) + tighten the gap (14->10) → ~333px, fits with
   headroom; nowrap so it can't re-wrap. (3) Centre it under the full-width button
   to match the now-centred lede/CTA, and pull it snug below the pill
   (cta-r154 gap 18->14). @<=768; desktop frozen. */
@media (max-width: 768px) {
  html body #hero.r159 .hero-cta-anchor { display: none !important; }
  html body #hero.r159 .hero-cta-r154 { gap: 14px !important; }
  html body #hero.r159 .hero-trust-row {
    flex-wrap: nowrap !important;
    justify-content: center !important;
    width: 100% !important;
    align-self: stretch !important;
    gap: 10px !important;
    padding-left: 0 !important;
    white-space: nowrap !important;
  }
  html body #hero.r159 .htr-rating,
  html body #hero.r159 .htr-sub,
  html body #hero.r159 .htr-sub .htr-count { font-size: 12px !important; white-space: nowrap !important; }
  html body #hero.r159 .htr-rating strong { font-size: 12.5px !important; }
  html body #hero.r159 .htr-coa { font-size: 12.5px !important; white-space: nowrap !important; }
  html body #hero.r159 .htr-coa i { font-size: 8.5px !important; }
}
/* end R673 */

/* R674 - MOBILE-ONLY - Kill the faint "box" behind the lede / around "tested"
   (owner spotted a faint translucent rectangle below the vials + on the first
   line). Two stacked dark semi-transparent shapes sit exactly there:
   (1) the lede's heavy text-shadow (rgba(6,7,10,0.5) 0 1px 14px) — the 14px blur
       on the BOLD "Third-party tested" (.hc-strong) merges into a soft dark cloud
       that reads as a box on the words; tighten it to a 2px depth shadow.
   (2) .hero-text::before — a big dark radial "legibility pool" behind the text
       column that bleeds up toward the vials; the mobile lede sits on plain dark
       #06070A below the cluster and reads fine without it, so drop it on phones.
   Diagnosed by mapping every hero layer/pseudo (props + bright-overlay) — these
   were the only dark shapes overlapping the lede band. @<=768; desktop frozen. */
@media (max-width: 768px) {
  html body #hero.hero-reading-room .hero-text::before { display: none !important; }
  html body #hero.r159 .hero-context.r166-lede,
  html body #hero.r159 .hero-context.r166-lede .hc-strong,
  html body #hero.r159 .hero-context.r166-lede .hc-coa {
    text-shadow: 0 1px 2px rgba(6, 7, 10, 0.5) !important;
  }
}
/* end R674 */

/* R675 - MOBILE-ONLY - Restore the full-width SHOP CATALOG bar (regression from
   R673). The button has width:100%, but its parent .hero-cta-r154 is
   align-items:flex-start, so .hero-cta-row is shrink-to-fit, not stretched. The
   now-hidden "from $20 a vial" anchor (R673) had been the only content forcing
   that row to the full column width — with it gone the row (and the button's
   100%) collapsed to the button's own text (~257px, left-pinned). Give the row
   an explicit full width so the button is the full-width pill again, as designed
   (R651). Verified: row width:100% → button 342px. @<=768; desktop frozen. */
@media (max-width: 768px) {
  html body #hero.r159 .hero-cta-row { width: 100% !important; }
}
/* end R675 */

/* R676 - MOBILE-ONLY - Slightly reduce the teal hue on/around the vials (owner
   ask, "just slightly"). The teal wash is two layers: the #hero background
   radials (R670) + the .hero-visual::before halo (R669). Trim both ~20%:
   bg radials 0.078/0.038 -> 0.062/0.030, halo 0.20/0.10/0.06 -> 0.16/0.08/0.048.
   Per-vial edge drop-shadow left intact so the glass still reads premium.
   Same selectors as R670/R669 → win on later source. @<=768; desktop frozen. */
@media (max-width: 768px) {
  html body #hero.r159.hero-reading-room {
    background-image:
      radial-gradient(58% 18% at 70% 40%, rgba(45,212,191,0.062), rgba(6,7,10,0) 74%),
      radial-gradient(50% 18% at 33% 40%, rgba(45,212,191,0.030), rgba(6,7,10,0) 76%) !important;
  }
  html body #hero.hero-reading-room .hero-visual::before {
    background: radial-gradient(
      ellipse 50% 52% at 50% 50%,
      rgba(13, 148, 136, 0.16) 0%,
      rgba(13, 148, 136, 0.08) 32%,
      rgba(8, 60, 56, 0.048) 52%,
      transparent 72%
    ) !important;
  }
}
/* end R676 */

/* R677 - MOBILE-ONLY - Kill the main vial's mirror reflection (owner: the faint
   "box" below the GLP3-R vial IS its reflection). The main vial img carries
   `-webkit-box-reflect: below 1px linear-gradient(... rgba(255,255,255,.07))`
   (styles.css:63060, !important) — it mirrors the vial + label downward, and that
   floating reflected label reads as a translucent box over the lede. It only
   became obvious after R674/R676 cleaned + darkened the backdrop.
   TWO ENGINE QUIRKS (proven live): (1) `-webkit-box-reflect: none` is REJECTED by
   this engine's CSS parser — so R549's 63108 `none !important` (and a first pass
   here) were silently DROPPED, leaving 63060's reflection as the survivor. R549
   intended to kill it years ago but never did. (2) 63060 is !important. Fix:
   override with a VALID reflection value that paints nothing — a 0px, fully
   transparent mask — WITH !important so it beats 63060. Applied to all hero vial
   imgs @<=768. Desktop frozen (its 63108 `none` is also silently broken, but out
   of scope this session). */
@media (max-width: 768px) {
  html body #hero.hero-reading-room .hero-vial-link-main .hero-vial-main,
  html body #hero.hero-reading-room .hero-visual .hero-vial-main,
  html body #hero.hero-reading-room .hero-visual .hero-vial-secondary {
    -webkit-box-reflect: below 0 linear-gradient(transparent, transparent) !important;
  }
}
/* end R677 */

/* R678 - MOBILE-ONLY - Lower the teal hue SURROUNDING the vials further (owner,
   "some more"). Builds on R676. Trim all three teal contributors ~30%:
   - #hero bg radials (R670/R676): 0.062/0.030 -> 0.044/0.021
   - .hero-visual::before halo (R669/R676): 0.16/0.08/0.048 -> 0.11/0.055/0.033
   - main vial teal rim drop-shadow (styles.css:63043): 0.22 -> 0.13 (re-declare
     the full filter chain so only the teal layer changes; selector matches 63040).
   Glass + labels untouched. Same selectors as the originals → later source.
   @<=768; desktop frozen. */
@media (max-width: 768px) {
  html body #hero.r159.hero-reading-room {
    background-image:
      radial-gradient(58% 18% at 70% 40%, rgba(45,212,191,0.044), rgba(6,7,10,0) 74%),
      radial-gradient(50% 18% at 33% 40%, rgba(45,212,191,0.021), rgba(6,7,10,0) 76%) !important;
  }
  html body #hero.hero-reading-room .hero-visual::before {
    background: radial-gradient(
      ellipse 50% 52% at 50% 50%,
      rgba(13, 148, 136, 0.11) 0%,
      rgba(13, 148, 136, 0.055) 32%,
      rgba(8, 60, 56, 0.033) 52%,
      transparent 72%
    ) !important;
  }
  html body #hero.hero-reading-room .hero-vial-link.hero-vial-link-main {
    filter: drop-shadow(0 38px 64px rgba(0, 0, 0, 0.68))
            drop-shadow(0 6px 14px rgba(0, 0, 0, 0.5))
            drop-shadow(0 0 26px rgba(13, 148, 136, 0.13))
            contrast(1.02) !important;
  }
}
/* end R678 */

/* R679 - MOBILE-ONLY - (owner) two tweaks: (a) HALFWAY intensity between R676 and
   R678: bg radials 0.044/0.021 -> 0.053/0.026, halo 0.11/0.055/0.033 ->
   0.135/0.068/0.041, vial teal rim 0.13 -> 0.175. (b) Tighten the glow's VERTICAL
   reach "a tad" (it bled up to the stat + down to the lede): bg radial vertical
   radius 18% -> 14%, and the ::before halo height 220px -> 180px. Horizontal
   spread + centre (40%) unchanged. Supersedes R678/R676 intensity + R670/R669
   vertical. @<=768; desktop frozen. */
@media (max-width: 768px) {
  html body #hero.r159.hero-reading-room {
    background-image:
      radial-gradient(58% 14% at 70% 40%, rgba(45,212,191,0.053), rgba(6,7,10,0) 74%),
      radial-gradient(50% 14% at 33% 40%, rgba(45,212,191,0.026), rgba(6,7,10,0) 76%) !important;
  }
  html body #hero.hero-reading-room .hero-visual::before {
    height: 180px !important;
    background: radial-gradient(
      ellipse 50% 52% at 50% 50%,
      rgba(13, 148, 136, 0.135) 0%,
      rgba(13, 148, 136, 0.068) 32%,
      rgba(8, 60, 56, 0.041) 52%,
      transparent 72%
    ) !important;
  }
  html body #hero.hero-reading-room .hero-vial-link.hero-vial-link-main {
    filter: drop-shadow(0 38px 64px rgba(0, 0, 0, 0.68))
            drop-shadow(0 6px 14px rgba(0, 0, 0, 0.5))
            drop-shadow(0 0 26px rgba(13, 148, 136, 0.175))
            contrast(1.02) !important;
  }
}
/* end R679 */

/* R680 - MOBILE-ONLY - THE real vial hue float. The dominant teal AROUND the
   vials is NOT the bg/halo (R670/R669) — it's the per-image "wide all-sides
   teal-cyan aura" baked into the vial img filters (R556, styles.css:63489/63503):
   main img drop-shadows 0 0 54px / 0 0 22px / 0 18px 48px teal; secondaries
   0 0 42px / 0 0 16px / 0 14px 36px. Those 36-54px blurs are what float the hue
   up to the stat + down to the lede, and they swamped every prior tweak (why the
   owner "couldn't tell"). Re-declare both img filters with the teal aura blurs
   ~halved + alphas down ~35% so the glow HUGS the glass; dark depth shadows +
   white rim + contrast/saturate/brightness kept identical. id-scoped selector
   beats R556's (0,4,2). @<=768; desktop frozen. */
@media (max-width: 768px) {
  html body #hero.hero-reading-room .hero-visual .hero-vial-link .hero-vial-main {
    filter:
      drop-shadow(1px -1px 0 rgba(255, 251, 242, 0.55))
      drop-shadow(2px 5px 8px rgba(10, 10, 10, 0.12))
      drop-shadow(4px 20px 32px rgba(10, 10, 10, 0.16))
      drop-shadow(3px 38px 60px rgba(10, 10, 10, 0.20))
      drop-shadow(0 0 28px rgba(45, 212, 200, 0.22))
      drop-shadow(0 0 14px rgba(94, 228, 222, 0.20))
      drop-shadow(0 10px 26px rgba(45, 200, 214, 0.14))
      contrast(1.13) saturate(1.22) brightness(1.05) !important;
  }
  html body #hero.hero-reading-room .hero-visual .hero-vial-link .hero-vial-secondary {
    filter:
      drop-shadow(1px -1px 0 rgba(255, 251, 242, 0.5))
      drop-shadow(1px 4px 6px rgba(10, 10, 10, 0.10))
      drop-shadow(3px 18px 28px rgba(10, 10, 10, 0.15))
      drop-shadow(0 0 22px rgba(45, 212, 200, 0.18))
      drop-shadow(0 0 11px rgba(94, 228, 222, 0.16))
      drop-shadow(0 8px 20px rgba(45, 200, 214, 0.10))
      contrast(1.13) saturate(1.22) brightness(1.045) !important;
  }
}
/* end R680 */

/* R681 - MOBILE-ONLY - Spread the two side vials outward + drop them a hair
   (owner). GLP3-R (main) untouched. Same size + tilt (±9deg) — translation only.
   Both side vials currently sit at bottom:50px with translateX(15px) (R666/R668).
   MOTS-C is left-anchored: DECREASE its translateX 15->7 → 8px further LEFT.
   BPC-157 is right-anchored: INCREASE its translateX 15->23 → 8px further RIGHT.
   Drop both: bottom 50px->44px (~6px lower). @<=768; desktop frozen. */
@media (max-width: 768px) {
  html body #hero.hero-reading-room .hero-vial-link.hero-vial-link-mots {
    transform: translateX(7px) rotate(-9deg) !important;
    bottom: 44px !important;
  }
  html body #hero.hero-reading-room .hero-vial-link.hero-vial-link-bpc {
    transform: translateX(23px) rotate(9deg) !important;
    bottom: 44px !important;
  }
}
/* end R681 */

/* R682 - MOBILE-ONLY - (owner) raise two things a hair: (a) the lede "Third-party
   tested peptides…" up 6px — margin-top -28 -> -34 (R671 was -28). (b) the trust
   row (★ 4.9 · 200+ · See a sample COA) up toward the button by tightening the
   .hero-cta-r154 gap 14 -> 8 (R673 was 14) — the SHOP CATALOG button itself stays
   put. Same selectors as R671/R673 → later source. @<=768; desktop frozen. */
@media (max-width: 768px) {
  html body #hero.hero-reading-room .hero-context.r166-lede { margin-top: -34px !important; }
  html body #hero.r159 .hero-cta-r154 { gap: 8px !important; }
}
/* end R682 */

/* R683 - MOBILE-ONLY - (owner) raise EVERYTHING in the hero up ~3px, proportions
   untouched. Trim the hero's top padding 72px -> 69px: the whole content block
   (stat, vials, lede, CTA, trust row) shifts up 3px uniformly, every internal
   gap unchanged. No GSAP transform on #hero/.hero-content so this is conflict-
   free. @<=768; desktop frozen. */
@media (max-width: 768px) {
  html body #hero.hero-reading-room { padding-top: 69px !important; }
}
/* end R683 */

/* R684 - MOBILE-ONLY - (owner) raise JUST the lower cluster (lede + SHOP CATALOG
   button + trust row) up another 3px, leaving the vials/stat where they are.
   The lede, tagline and cta-r154 are sequential order:3 grid items, so pulling
   the lede up via margin-top carries the button+trust block up with it (proven
   in R682). margin-top -34 -> -37 (R682 was -34). @<=768; desktop frozen. */
@media (max-width: 768px) {
  html body #hero.hero-reading-room .hero-context.r166-lede { margin-top: -37px !important; }
}
/* end R684 */

/* R685 - MOBILE-ONLY - (owner) raise ONLY the CTA block (SHOP CATALOG button +
   trust row) up 1.5px more — lede above stays put, nothing below it. The cta
   block has its own margin-top (R672, -40); -40 -> -41.5 pulls just button+trust
   up 1.5px (the lede precedes it in flow, untouched). @<=768; desktop frozen. */
@media (max-width: 768px) {
  html body #hero.hero-reading-room .hero-content > .hero-text > .hero-cta-r154 { margin-top: -41.5px !important; }
}
/* end R685 */

/* R686 - MOBILE-ONLY - (owner) raise the CTA block (button + trust row) another
   1.5px. cta-r154 margin-top -41.5 -> -43 (R685 was -41.5). Lede/vials/stat
   unchanged. @<=768; desktop frozen. */
@media (max-width: 768px) {
  html body #hero.hero-reading-room .hero-content > .hero-text > .hero-cta-r154 { margin-top: -43px !important; }
}
/* end R686 */

/* R687 - MOBILE-ONLY - Keep the lede text uniformly bright (owner: top-middle was
   slightly dimmed). Cause: the lede is z-index:1 but the vials are z-index:3 and
   the main vial img casts DARK drop-shadows (rgba(10,10,10,.2) 3px 38px 60px etc.)
   that reach ~670px — down over the lede's first line, centred under the main
   vial — and composite OVER the text (z3 > z1), dimming it. Fix: lift the lede
   above the vials (z 1 -> 5) so the text paints over those shadows. (Vial glass
   sits above the lede with no overlap, so nothing else changes.) @<=768; frozen. */
@media (max-width: 768px) {
  html body #hero.hero-reading-room .hero-context.r166-lede { position: relative !important; z-index: 5 !important; }
}
/* end R687 */

/* R688 - MOBILE-ONLY - Very light bobbing on the hero vials (owner). Animate the
   IMG transform (translateY), NOT the link — the links hold the translateX/rotate
   positioning with !important, which a transform animation can't override; the
   imgs have no transform/animation (verified) so they're free. 4px amplitude,
   slow ease-in-out, staggered durations + negative delays so the trio desyncs
   (organic, not robotic). The per-vial teal glow rides along (it's in the img
   filter) = natural. Side-vial imgs bob along their link's ±9deg axis (~99%
   vertical, imperceptible tilt). prefers-reduced-motion → off. @<=768; frozen. */
/* Uses the independent `translate` property, NOT `transform`: the vial imgs carry
   `transform: none !important` (styles.css:45438, resets the img so the LINK owns
   positioning), and !important beats animations — a transform-based bob froze at 0.
   `translate` is a separate property, unaffected by that rule, and still composites. */
@keyframes r688-vial-bob {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -6px; }
}
@media (max-width: 768px) {
  html body #hero.hero-reading-room .hero-visual .hero-vial-link-main .hero-vial-main {
    animation: r688-vial-bob 4.2s ease-in-out infinite !important; will-change: translate;
  }
  html body #hero.hero-reading-room .hero-visual .hero-vial-link-mots .hero-vial-secondary {
    animation: r688-vial-bob 4.8s ease-in-out -1.2s infinite !important; will-change: translate;
  }
  html body #hero.hero-reading-room .hero-visual .hero-vial-link-bpc .hero-vial-secondary {
    animation: r688-vial-bob 4.5s ease-in-out -2.4s infinite !important; will-change: translate;
  }
}
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  html body #hero.hero-reading-room .hero-visual .hero-vial-main,
  html body #hero.hero-reading-room .hero-visual .hero-vial-secondary { animation: none !important; }
}
/* end R688 */

/* R689 - MOBILE-ONLY - Reduce the vial hue's VERTICAL reach further (owner).
   Three levers: (a) #hero bg radials vertical 14% -> 11%; (b) .hero-visual::before
   halo height 180px -> 150px; (c) the dominant per-vial teal aura blurs (R680) —
   main 28/14/26px -> 20/10/18px, secondaries 22/16/20 -> 16/8/14px (alphas kept;
   dark depth shadows + white rim + contrast/sat/bright identical). Glow hugs the
   glass tighter vertically. Supersedes R679 bg/halo + R680 img filters. @<=768. */
@media (max-width: 768px) {
  html body #hero.r159.hero-reading-room {
    background-image:
      radial-gradient(58% 11% at 70% 40%, rgba(45,212,191,0.053), rgba(6,7,10,0) 74%),
      radial-gradient(50% 11% at 33% 40%, rgba(45,212,191,0.026), rgba(6,7,10,0) 76%) !important;
  }
  html body #hero.hero-reading-room .hero-visual::before { height: 150px !important; }
  html body #hero.hero-reading-room .hero-visual .hero-vial-link .hero-vial-main {
    filter:
      drop-shadow(1px -1px 0 rgba(255, 251, 242, 0.55))
      drop-shadow(2px 5px 8px rgba(10, 10, 10, 0.12))
      drop-shadow(4px 20px 32px rgba(10, 10, 10, 0.16))
      drop-shadow(3px 38px 60px rgba(10, 10, 10, 0.20))
      drop-shadow(0 0 20px rgba(45, 212, 200, 0.22))
      drop-shadow(0 0 10px rgba(94, 228, 222, 0.20))
      drop-shadow(0 7px 18px rgba(45, 200, 214, 0.14))
      contrast(1.13) saturate(1.22) brightness(1.05) !important;
  }
  html body #hero.hero-reading-room .hero-visual .hero-vial-link .hero-vial-secondary {
    filter:
      drop-shadow(1px -1px 0 rgba(255, 251, 242, 0.5))
      drop-shadow(1px 4px 6px rgba(10, 10, 10, 0.10))
      drop-shadow(3px 18px 28px rgba(10, 10, 10, 0.15))
      drop-shadow(0 0 16px rgba(45, 212, 200, 0.18))
      drop-shadow(0 0 8px rgba(94, 228, 222, 0.16))
      drop-shadow(0 6px 14px rgba(45, 200, 214, 0.10))
      contrast(1.13) saturate(1.22) brightness(1.045) !important;
  }
}
/* end R689 */

/* R691 - MOBILE-ONLY - "GLP-3 HPLC PURITY" mono-sub +3px + more readable (owner).
   .hms-label (the GLP-3 HPLC purity line) 13->16px; .hms-proof (independently
   verified · lot…) 11->14px and brightened (rgb(136,182,171) -> rgb(184,214,205))
   so the dim teal reads cleanly. @<=768; desktop frozen. */
@media (max-width: 768px) {
  html body #hero.hero-reading-room .hero-mono-sub .hms-label { font-size: 16px !important; }
  html body #hero.hero-reading-room .hero-mono-sub .hms-proof { font-size: 14px !important; color: rgb(184, 214, 205) !important; }
}
/* end R691 */

/* R692 - MOBILE-ONLY - (owner) raise the CTA block (button + trust row) 1.5px more
   AND lift the trust row another 1px. cta-r154 margin-top -43 -> -44.5 (block up
   1.5); cta-r154 gap 8 -> 7 (trust row up 1).
   COMPENSATION: R691's bigger mono-sub added ~12px of height that pushed the
   vials/lede/cta DOWN ~9-12px (against the "raise up" intent). Absorb it: pull
   the .hero-visual up (margin-top 6 -> -3, which carries the whole lower group)
   + retune the lede (-37 -> -40). Net: vials/lede back to their prior spots and
   the button/trust land at their raised targets (verified: lede 637, btn 727,
   trust 803, vial 350). @<=768; desktop frozen. */
@media (max-width: 768px) {
  html body #hero.hero-reading-room .hero-content > .hero-visual { margin-top: -3px !important; }
  html body #hero.hero-reading-room .hero-context.r166-lede { margin-top: -40px !important; }
  html body #hero.hero-reading-room .hero-content > .hero-text > .hero-cta-r154 { margin-top: -44.5px !important; }
  html body #hero.r159 .hero-cta-r154 { gap: 5.75px !important; }
}
/* end R692 */

/* R693 - MOBILE-ONLY - best-sellers heading (owner). The h2 holds BOTH variants;
   desktop stays "Most Popular Products" (frozen), mobile swaps to "High Demand".
   Heading is now ALL WHITE (owner walked the accent red -> teal-Demand ->
   teal-High -> none). .r532-demand wraps "High"; pin it white to match "Demand"
   (the heading already paints white via -webkit-text-fill-color, but keep this
   explicit so the span never reverts). @<=768. */
html body #r532-title .r532-title-mob { display: none; }
@media (max-width: 768px) {
  html body #r532-title .r532-title-desk { display: none !important; }
  html body #r532-title .r532-title-mob { display: inline !important; }
  html body #r532-title .r532-demand { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; }
}
/* end R693 */

/* R694 - MOBILE-ONLY - "HOT Products" lede to exactly two lines (owner). The
   107-char sentence wrapped to 3 lines at 16px; 14px wraps it to 2 (15px=3,
   14px=2, verified). @<=768; desktop frozen. */
@media (max-width: 768px) {
  html body #r532-shelf .r532-lede { font-size: 14px !important; }
}
/* end R694 */

/* R695 - MOBILE-ONLY - vial-card price + Add-to-cart bottom alignment (owner: a
   card's price/button must never sit a line below its neighbour's). Both card
   systems are already flex-column inside a grid that stretches each row to equal
   height; they just lack a bottom-pin, so a 2-line name (e.g. "GLOW (GHK-Cu,
   BPC-157, TB-500)") shoves its price+button down vs a 1-line name. Pin the price
   block to the card bottom with margin-top:auto so price AND button line up
   across the row regardless of how tall the name wraps. No copy change needed.
   (a) Homepage shelf cards  = #r532-shelf .r532-card / .r532-price.
   (b) Catalog cards         = #main-content #products .product-card / .product-price-row
       (its own margin-top:auto at styles.css:21535 is defeated by the winning
        #main-content #products block at ~59206 margin-top:13px - re-assert it
        at winning specificity, later in source).
   @<=768 only; desktop frozen (can be extended to desktop on request). */
@media (max-width: 768px) {
  html body #r532-shelf .r532-price { margin-top: auto !important; }
  html body #main-content #products .product-card .product-price-row { margin-top: auto !important; }
}
/* end R695 */

/* R696 - MOBILE-ONLY - shrink the black BEST SELLER / TOP RATED "proof" chips on
   catalog cards (owner: they crossed into the yellow %-off chip top-right). The
   star-prefixed proof badge at R541 size (11.5px / 5px 11px) was wide enough on a
   ~173px 2-col card to crowd the discount pill. Trim font + padding + star so it
   clears. Targets .pc-badge-proof only (the class products.html adds to any
   non-discount, non-BLEND badge); the yellow .product-card-badge-discount is left
   untouched. @<=768.
   RETUNE (2026-06-16): the original 8px h-padding cleared by +6/+14px on a 175px
   card (390px phone) but the 2-col grid is fluid (1fr), so at 375px the card slims
   to 168px and "BEST SELLER" kissed the discount chip (-1px). h-padding 8->5 +
   letter-spacing 0 shaves ~8px so it clears at 375 (+7) too, still fine at 390+. */
@media (max-width: 768px) {
  html body #main-content #products .product-card .product-card-badge.pc-badge-proof {
    font-size: 10px !important;
    padding: 3.5px 5px !important;
    letter-spacing: 0 !important;
  }
  html body #main-content #products .product-card .product-card-badge.pc-badge-proof::before {
    font-size: 0.78em !important;
    margin-right: 3px !important;
  }
}
/* end R696 */

/* R697 - MOBILE-ONLY - "Featured" sort dropdown folded INTO the Filters panel
   (owner). An inline script in products.html relocates .sort-dropdown out of the
   search toolbar into #cf-filters (as a .cf-axis-sort group) on phones, and
   restores it to the toolbar on desktop (frozen). #product-sort keeps its id +
   onchange so app.js sortProducts is untouched. These rules make the select read
   as a full-width control inside the light filter panel. @<=768. */
@media (max-width: 768px) {
  html body #cf-filters .cf-axis-sort .sort-dropdown { width: 100% !important; max-width: none !important; }
  html body #cf-filters .cf-axis-sort .sort-dropdown select#product-sort {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}
/* end R697 */

/* R698 - MOBILE-ONLY - raise the hero proof cluster (leadin "What the lab
   measured" + "99.96%" stat + mono-sub "GLP-3 HPLC purity / independently
   verified") up 3px (owner) WITHOUT moving the vials/lede/CTA. Uses the
   independent `translate` longhand (not transform/margin): it's layout-neutral
   (so siblings stay put) AND composes with the GSAP entrance transform on these
   nodes instead of overriding it (same lesson as R688's vial bob). @<=768. */
@media (max-width: 768px) {
  html body #hero.hero-reading-room .hero-stat-leadin,
  html body #hero.hero-reading-room .hero-stat,
  html body #hero.hero-reading-room .hero-mono-sub {
    translate: 0 -3px !important;
  }
}
/* end R698 */

/* R699 - MOBILE-ONLY - two micro-nudges (owner):
   (a) the "(independently verified · lot RT2001)" line (.hms-proof) DOWN 1.25px.
       Its parent .hero-mono-sub already carries the R698 -3px translate, so this
       child translate composes to a net -1.75px = 1.25px below its post-R698 spot.
   (b) the SHOP CATALOG button + trust row (.hero-cta-r154) UP 2px.
   Both via the independent `translate` longhand (layout-neutral; composes with
   the GSAP entrance transform on these nodes - R688/R698 lesson). @<=768. */
@media (max-width: 768px) {
  html body #hero.hero-reading-room .hero-mono-sub .hms-proof { translate: 0 1.25px !important; }
  html body #hero.hero-reading-room .hero-cta-r154 { translate: 0 -2px !important; }
}
/* end R699 */

/* R700 - MOBILE-ONLY - hero lede bigger + trust row up (owner):
   (a) hero lede ("Third-party tested peptides for researchers who read their
       COAs.") font 19px -> 21px — the MAX that still wraps to 2 lines at the
       390 viewport (22px tips to 3, measured). line-height pinned to 27px
       (= the prior 2-line block height, was ~26.98) so the taller glyphs DON'T
       grow the block and push the CTA/trust down.
   (b) trust row (.hero-trust-row) UP 2px via the `translate` longhand — composes
       with the R699 -2px on its .hero-cta-r154 parent (net -4px from origin),
       layout-neutral + GSAP-safe.
   @<=768. */
@media (max-width: 768px) {
  html body #hero.hero-reading-room .hero-context.r166-lede { font-size: 21px !important; line-height: 27px !important; }
  html body #hero.hero-reading-room .hero-trust-row { translate: 0 -2px !important; }
}
/* end R700 */

/* R701 - MOBILE-ONLY - raise the catalog "NN PRODUCTS FOUND" status row + grid
   (owner). The Filters toggle ends ~y437 but the status row didn't start until
   ~y485 — a ~48px dead gap (only a 1px sticky sentinel in it). Pull the status
   row up 28px (margin-top 6px -> -22px); the grid follows it in flow, so the
   whole product block rises and the cards sit higher in the first viewport.
   @<=768; desktop frozen. */
@media (max-width: 768px) {
  html body #main-content #products .catalog-status-row { margin-top: -22px !important; }
}
/* end R701 */

/* R702 - MOBILE-ONLY - lower the teal "Filters" toggle (#cf-toggle) 5.25px total
   (owner, +1.75 x3). `translate` (not margin) so only the button shifts down -
   the status row + grid below it stay put (keeps R701's raise intact). It moves
   into the card's ~5px bottom gutter; verified it stays within the card. @<=768. */
@media (max-width: 768px) {
  html body #catalog-sticky-wrap .cf-toggle { translate: 0 5.25px !important; }
}
/* end R702 */

/* R703 - MOBILE-ONLY - slim the catalog vial cards (owner: save vertical space).
   (a) Hide the "Save $NN" pill (.pc-save, injected by the pcCatalogFX script) on
       phones — it looked good but ate a row. Desktop keeps it.
   (b) The dose line drops its "| <format>" suffix on phones — handled by an
       inline script in products.html (.product-dosage is JS-rendered as
       "${dose} | ${form}"); this just documents the pair. @<=768. */
@media (max-width: 768px) {
  html body #main-content #products .product-card .pc-save { display: none !important; }
}
/* end R703 */

/* R705 - MOBILE-ONLY - breathing room around the filter-panel axis labels
   ("RESEARCH AREA" / "FORMAT" / "SORT") so they don't read as touching the chip
   tiles (owner). Cause: R649 makes #cf-filters `display:block` when open on
   phones, which makes the container's `gap:14px` INERT — the .cf-axis groups
   stacked with 0px between them, and the in-axis label->row gap was a tight 8px
   (styles.css:64362). Fix: (a) restore the inter-group spacing with margin-top
   (block layout ignores `gap`), and (b) open the label->tiles gap to 12px. @<=768. */
@media (max-width: 768px) {
  html body #products #cf-filters .cf-axis { gap: 12px !important; }
  html body #products #cf-filters .cf-axis + .cf-axis { margin-top: 15px !important; }
}
/* end R705 */

/* R706 - MOBILE-ONLY - lower the "Bundles ->" link a tad in the filter panel
   (owner). It sat margin-top:2px under the Format tiles (nearly touching); give
   it room, matching the R705 spacing rhythm. @<=768. */
@media (max-width: 768px) {
  html body #products #cf-filters .cf-bundles-link { margin-top: 16px !important; }
}
/* end R706 */

/* R707 - ALL PRODUCT PAGES - remove the "Discreet" quick-trust pill (owner). The
   .pp-quicktrust block (app.js:5345, can't edit app.js) renders 4 pills with
   "Discreet" (fa-box-open) LAST; hide that last pill. Applies on every product
   page, desktop + mobile, per the owner's explicit "on all product pages". The
   separate "Discreet plain packaging" trust-item lower on the page is untouched. */
html body .pp-quicktrust .pp-quicktrust-pill:last-child { display: none !important; }
/* end R707 */

/* R708 - ALL PRODUCT PAGES - move the rating row (.pp-rating "5.0 · 99+
   researchers") to sit directly BELOW the price (owner). .pp-info is a flex
   column ordered via CSS `order` (app.js): price-row=-2, buy-row(Add to Cart)=-1,
   rating=0 (so rating fell into the bottom group, below the CTA). Re-order with
   pure CSS so the sequence becomes dosage -> price -> rating -> Add to Cart:
   pull price into the dosage(-3) group (price follows dosage in DOM, so lands
   right after it) and give rating its own slot at -2, between price and the CTA.
   No app.js / no JS. desktop + mobile, per "on products page". */
/* R785: R708 was written bare (desktop + mobile) and LEAKED to desktop —
   the order:-3/-2 yanked the price + rating to the very top of the column,
   above the badges/title (owner flagged the broken desktop structure). Gate
   it to MOBILE ONLY. Desktop now uses the natural DOM order
   (badges → name → dosage → synonyms → rating → price → bundle → cart …),
   which is the reference layout. Mobile keeps the price→rating reorder. */
@media (max-width: 768px) {
  html body .pp-info .pp-price-row { order: -3 !important; }
  html body .pp-info .pp-rating { order: -2 !important; }
}
/* end R708 / R785 */

/* R709 - PRODUCT PAGES - "Frequently Bought Together" cleanup (owner).
   (a) Drop the "random" green check-mark: hide the .pp-fbt-check toggles. They
       stay checked in the DOM, so _wireFBT still bundles all shown items - just
       no visible mark.
   (b) Uniform card backgrounds: each .pp-fbt-thumb had a different pastel
       (peach/lavender/sky via :nth-child + a green is-current). Unify to one pale
       card tint so they read as matching cards. #pp-root scope out-specs the
       nth-child rules (1 id beats 3 classes). desktop + mobile. */
html body #pp-root .pp-fbt-check { display: none !important; }
html body #pp-root .pp-fbt-item .pp-fbt-thumb { background: linear-gradient(165deg, #e9f6f3, #d8ece7) !important; }
/* end R709 */

/* R710 - MOBILE-ONLY - slim the catalog vial cards more (owner). (a) Hide the
   "COA · NN% HPLC" chip (.pc-coa-chip, injected by pcCatalogFX) to save a row.
   (b) Trim the vial image BOX height a hair WITHOUT shrinking the vial: drop the
   square aspect-ratio slightly and bump the img max-height so the object-fit:
   contain vial keeps its rendered height. Values tuned live. @<=768. */
@media (max-width: 768px) {
  html body #main-content #products .product-card .pc-coa-chip { display: none !important; }
  /* box was a forced 280px holding a width-constrained ~261px vial (~19px slack);
     trim to 270px so the box loses ~10px of empty space. max-height:100% keeps
     the height-cap above the vial's 261px so the vial size is unchanged. */
  html body #main-content #products .product-card .product-image {
    height: 270px !important; min-height: 0 !important; aspect-ratio: auto !important;
  }
  html body #main-content #products .product-card .product-image img { max-height: 100% !important; }
}
/* end R710 */

/* ============================================================================
   R712 - MOBILE-ONLY - Product detail buy-zone tidy (product-*.html .pp-info).
   Owner asks, three parts:
   (A) Reviews (the .pp-rating pill) sit directly under the price AMOUNT and
       ABOVE the divider line. That "line" is the .pp-price-row border-bottom,
       which renders between the price and the rating. We drop it from the price
       row and re-draw it as a border-top on the buy row, so the stack reads:
       price -> rating(reviews) -> line -> Add to Cart.
   (B) Drop the synonym pills (e.g. "Retatrutide / LY3437943 / Triple-Agonist");
       they read as clutter on phones.
   (C) Delivery callout ("Arrives by ...") sits directly below the Add-to-Cart
       button. .pp-info is a flex column on mobile (R655); giving the callout
       order:-1 ties it with the buy row, so it lands right after it (DOM order).
   @<=768 only -> the desktop product layout stays frozen. All 17 product pages. */
@media (max-width: 768px) {
  /* (A) move the divider from below the price to below the reviews */
  html body .pp-info .pp-price-row { border-bottom: 0 !important; margin-bottom: 8px !important; }
  html body .pp-info .pp-rating { margin-bottom: 0 !important; }
  html body .pp-info .pp-buy-row {
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
    padding-top: 14px !important;
    margin-top: 14px !important;
  }
  /* (B) hide synonym pills */
  html body .pp-info .pp-synonyms { display: none !important; }
  /* (C) delivery callout directly under Add to Cart */
  html body .pp-info .pp-delivery-callout { order: -1 !important; }
}
/* end R712 */

/* R715 - MOBILE-ONLY - lower the "BUNDLE & SAVE" tier block (.pp-tier-section) a
   few px (owner). After R712(C) the delivery callout sits directly above it with
   only a 4px gap; bump its top margin so the bundle selector drops down with some
   breathing room (margin-top pushes it + everything below down — no overlap).
   @<=768 only -> desktop product layout frozen. All 17 product pages. */
@media (max-width: 768px) {
  html body .pp-info .pp-tier-section { margin-top: 16px !important; }
}
/* end R715 */

/* R716 - MOBILE-ONLY - two product-page polish asks (owner):
   (1) The SELECTED bundle tier (.pp-tier-tile.is-active) was filled solid black
       (#0a0a0a). Recolour it to "light up" in the brand teal instead: a deep teal
       fill (#0f766e keeps the white tier text at ~5.5:1 AA), a bright teal ring,
       and a soft teal glow. Targets .is-active generically, so whichever tier the
       shopper picks lights up.
   (2) Frequently-Bought-Together: every suggestion card (.pp-fbt-item) gets the
       same faint-teal "current item" box (bg rgba(20,184,166,.06) + teal border)
       that the first/"(this)" card already has (.is-current) - so no white cards;
       all read as the same green box. (The vial thumbs were already unified to one
       pale teal by R709.)
   @<=768 only -> desktop product layout stays frozen. All 17 product pages. */
@media (max-width: 768px) {
  /* (1) selected bundle tier lights up teal, not black */
  html body .pp-info .pp-tier-section .pp-tier-tile.is-active {
    background: #0f766e !important;
    border-color: #2dd4bf !important;
    box-shadow: 0 4px 16px rgba(20, 184, 166, 0.35) !important;
  }
  /* (2) all FBT cards get the teal "current" box - no white */
  html body #pp-root .pp-fbt-item {
    background: rgba(20, 184, 166, 0.06) !important;
    border-color: rgba(20, 184, 166, 0.45) !important;
  }
}
/* end R716 */

/* R717 - MOBILE-ONLY - product Add-to-Cart button (.pp-add-btn) (owner): make it
   a little taller/bigger AND centre the icon + label horizontally. The button is
   display:flex with justify-content:normal (= flex-start), so the cart icon +
   "Add to Cart" sat LEFT-aligned; justify-content:center centres them. Vertical
   padding 16->20px + font 15->16px gives a slightly chunkier button (~53->~62px).
   .pp-add-btn is product-page-only, so the generic .btn-large isn't touched.
   NB specificity: the padding/font is set by `html body .btn-primary:not(...).btn-large`
   (0,3,2 !important), so we scope with #pp-root (id -> 1,1,2) to win it; a plain
   `.pp-info .pp-add-btn` (0,2,2) only won justify-content (uncontested), not padding.
   @<=768 only -> desktop product layout stays frozen. All 17 product pages. */
@media (max-width: 768px) {
  html body #pp-root .pp-add-btn {
    justify-content: center !important;
    padding: 20px 32px !important;
    font-size: 16px !important;
  }
}
/* end R717 */

/* R718 - MOBILE-ONLY - a hair more space between the badge row and the product
   name (owner). Keep BEST SELLER / RESEARCH USE ONLY exactly where they are and
   push .pp-name (plus everything below it, same proportions) down a touch: bump
   .pp-badges-row margin-bottom 6->10px (R654 set 6). The badges sit at the top of
   their row, so the extra bottom margin doesn't move them - only the name + the
   rest of the flex column shift down by the +4px. @<=768; desktop frozen. */
@media (max-width: 768px) {
  html body .pp-info .pp-badges-row { margin-bottom: 10px !important; }
}
/* end R718 */

/* R719 - MOBILE-ONLY - let the CJC5 catalog card title "CJC & Ipamorelin" sit on
   ONE line (owner). At the 19px card-name size it renders ~153px and wraps in the
   ~146px name slot ("Ipamorelin" alone is too long to share a line). Keep the
   readable spaced name (set by R713) and drop just THIS one card's title to 17px
   (~137px) so it fits on one line with margin, without shrinking any other card's
   name. Scoped by data-product-id. @<=768; desktop frozen. */
@media (max-width: 768px) {
  html body #main-content #products .product-card[data-product-id="CJC5"] .product-name {
    font-size: 17px !important;
  }
}
/* end R719 */

/* R720 - MOBILE-ONLY - remove the dead white space between the dose and the price
   on catalog vial cards (owner). Diagnosis: the card body .product-info carries a
   min-height (~219px) - an equal-height crutch that's ~40px taller than its real
   content - and .product-price-row's margin-top:auto (R695) parks that ~40px as
   empty space under the "NN mg" dose. Now that every catalog name is one line
   (R713/R719), the cards are uniform so the min-height crutch is unneeded: drop it
   to 0 and give the price a tight fixed top margin. Result (verified live): cards
   shrink 491->465px, the dose->price gap goes 44->18px, NOTHING relocates below the
   button (stays 22px), and all cards stay aligned (uniform height). @<=768; desktop
   frozen. NB: this trades R695's auto bottom-align for uniformity-based alignment,
   which holds only while all names are 1 line (true today). */
@media (max-width: 768px) {
  html body #main-content #products .product-card .product-info { min-height: 0 !important; }
  html body #main-content #products .product-card .product-price-row { margin-top: 14px !important; }
}
/* end R720 */

/* R721 - MOBILE-ONLY - shrink the catalog vial image BOX vertically (owner: take
   space off top + bottom, DON'T shrink the vial or change its width). R710 trimmed
   the box 280->270, but it still had ~37px of empty letterbox above + below the
   vial. The vial img is WIDTH-constrained (object-fit:contain; every catalog image
   is aspect 0.746 or 1.0, min 0.746), so it displays 146x~196 independent of box
   height all the way down to a ~205px floor - verified live: the rendered vial
   stays its full 140px at box 210 and only begins scaling at 200. Set the box to
   215px (10px buffer over the floor): removes ~55px of pure vertical slack (~27px
   off the top, ~27px off the bottom); contain keeps the vial centred so it trims
   symmetrically. Width + vial size unchanged. @<=768; desktop frozen. */
@media (max-width: 768px) {
  html body #main-content #products .product-card .product-image { height: 215px !important; }
}
/* end R721 */

/* R722 - MOBILE-ONLY - centre the catalog vial float (owner: vials feel slightly
   shifted up). ROOT CAUSE: the global `vialFloat` keyframe bobs translateY 0 -> -10px
   (0%/100% at 0, 50% at -10) — i.e. UP-ONLY from rest, so the vial never goes below
   its rest point and spends all its time at/above centre (measured ~5px up on
   time-average; the user caught an up-phase). Swap the CATALOG imgs to a symmetric,
   centred bob with the SAME 10px amplitude + 5s ease-in-out + stagger: translateY
   +3px (down) at rest -> -7px (up) at mid, so it oscillates ~evenly about the box
   centre. Desktop keeps the original `vialFloat` (frozen). @<=768. */
@keyframes vialFloatCtr {
  /* R723b (owner preference): lowered the whole bob +3px (rest 3->6, peak -7->-4)
     so the vials sit a touch below true centre. Same 10px amplitude. */
  0%, 100% { transform: scale(0.96) translateZ(0) translateY(6px); }
  50%      { transform: scale(0.96) translateZ(0) translateY(-4px); }
}
@media (max-width: 768px) {
  html body #main-content #products .product-card .product-image img { animation-name: vialFloatCtr !important; }
}
/* end R722 */

/* R723 - MOBILE-ONLY - (owner, now that R720/R721 freed vertical space):
   (a) BRING BACK the "Save $NN" pill (.pc-save, injected by pcCatalogFX) on the
       catalog cards — R703 had hidden it on phones to save a row. Un-hide it
       (overrides R703's display:none); it sits back in the .product-price-row next
       to the prices, its amber-pill styling (~59086) intact. Desktop unaffected.
   (b) Trim the catalog Add-to-Cart button height by the smallest amount: vertical
       padding 17px -> 16px (height ~52 -> ~50px). @<=768; desktop frozen. */
@media (max-width: 768px) {
  html body #main-content #products .product-card .pc-save { display: inline-block !important; }
  html body #main-content #products .product-card .product-add-btn {
    padding-top: 16px !important; padding-bottom: 16px !important;
  }
}
/* end R723 */

/* R724 - MOBILE-ONLY - bundles page polish (owner). (a) The mobile-menu "Bundles"
   link now anchors to #bx-curated, but it landed the section under the 73px fixed
   header, hiding the "Curated Research Bundles" heading ("scrolls one tick too far
   down"). scroll-margin-top drops the landing so the heading clears the header.
   (b) The curated card price stack (.bx-card-prices = $was / $final / "You save")
   was cramped (0-2px line gaps); add a touch of breathing room (uniform 4px).
   @<=768 only -> desktop bundles layout frozen. */
@media (max-width: 768px) {
  html body #bx-curated { scroll-margin-top: 56px !important; }
  html body .bx-curated .bx-card-prices { gap: 4px !important; }
  html body .bx-curated .bx-card-savedollars { margin-top: 0 !important; }
}
/* end R724 */

/* R726 - MOBILE-ONLY - fit the 3 affiliate hero trust pills (.ax-trust-pill:
   "Free to join" / "COA-backed products" / "Paid in 24 hours") onto ONE line
   (owner). At 375px they summed 398px > 343px avail, so "Paid in 24 hours"
   wrapped to a 2nd row. Force nowrap + shrink font 14.5->11.5px (largest that
   fits with ~14px headroom; 12px = 0 headroom, too tight) + tighten gaps, and
   justify space-between for a clean full-width trust strip. @<=768 only ->
   desktop affiliate hero frozen (keeps the .82rem wrapping pills). */
@media (max-width: 768px) {
  html body #affiliate .ax-hero-trust {
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    gap: 6px !important;
  }
  html body #affiliate .ax-trust-pill {
    font-size: 11.5px !important;
    gap: 5px !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
  }
  html body #affiliate .ax-trust-pill i { font-size: 9.5px !important; }
}
/* end R726 */

/* R727 - MOBILE-ONLY - affiliate page polish batch (owner):
   (a) The stat cards (#ax-stats) crested ~30px UP into the dark hero (margin-top
       -30px "tuck under seam") → owner wants no overlap. Drop them fully below the
       seam with a small light gap (margin-top -30 -> +14px).
   (b) "Become an affiliate" CTA (.ax-cta-primary): slightly taller (padding-y
       17 -> 21px) + lower the teal glow/hue (box-shadow alpha .6 -> .3, kept not
       killed).
   (c) Clicking it lands on #ax-join one tick HIGHER: the signed-out gate state
       uses scroll-margin-top:128px; trim to 104px so the panel sits ~24px higher.
   @<=768 only -> desktop affiliate frozen. */
@media (max-width: 768px) {
  html body #affiliate #ax-stats { margin-top: 14px !important; }
  html body #affiliate .ax-cta-primary {
    padding-top: 21px !important;
    padding-bottom: 21px !important;
    box-shadow: 0 12px 30px -11px rgba(20,184,166,.3) !important;
  }
  html body #affiliate #ax-join:has(.aff-gate) { scroll-margin-top: 104px !important; }
}
/* end R727 */

/* R728 - MOBILE-ONLY - animate the lightning bolt on the affiliate "Become an
   affiliate" CTA. OWNER REVS: drop the yellow -> blended DARK #04130f (matches the
   label, blends w/ the page) + a SLOWER, LESS-FREQUENT pulse that, when it fires,
   is a slow teal-glow swell with a subtle ±0.7px VIBRATION + the bolt a hair
   SMALLER (0.88em). Rests dark ~2/3 of the ~3.6s cycle, then one slow vibrating
   teal swell. GPU-only (filter/transform; colour stays dark). prefers-reduced-
   motion => no loop, faint static teal glow. ONLY the CTA bolt. @<=768. */
@keyframes axBoltGlow {
  0%, 56%, 100% { filter: drop-shadow(0 0 0 rgba(45,212,191,0)); transform: translateX(0) scale(1); }
  60% { filter: drop-shadow(0 0 3px rgba(45,212,191,.5));  transform: translateX(0.6px) scale(1.05); }
  64% {                                                     transform: translateX(-0.7px) scale(1.07); }
  68% { filter: drop-shadow(0 0 6px rgba(45,212,191,.72)); transform: translateX(0.6px) scale(1.1); }
  72% {                                                     transform: translateX(-0.6px) scale(1.1); }
  76% { filter: drop-shadow(0 0 4px rgba(45,212,191,.55)); transform: translateX(0.5px) scale(1.07); }
  80% {                                                     transform: translateX(-0.4px) scale(1.04); }
  86% { filter: drop-shadow(0 0 0 rgba(45,212,191,0));     transform: translateX(0) scale(1); }
}
@media (max-width: 768px) {
  html body #affiliate .ax-cta-primary i.fa-bolt {
    color: #cffff5;
    font-size: 0.88em;
    transform-origin: center;
    animation: axBoltGlow 3.6s ease-in-out infinite;
    will-change: filter, transform;
  }
}
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  html body #affiliate .ax-cta-primary i.fa-bolt {
    animation: none !important;
    color: #cffff5 !important;
    filter: drop-shadow(0 0 2px rgba(45,212,191,.5)) !important;
    transform: none !important;
  }
}
/* end R728 */

/* R729 - MOBILE-ONLY - "Become an affiliate" CTA text (owner). [rev: owner
   reverted the Title-Case back to sentence case — capitalize removed.] Bigger
   label (font-size 1.08 -> 1.18rem) + bolt nudged further LEFT (gap 10 -> 16px) +
   LABEL kept horizontally dead-centred: justify-content:center centres the
   icon+label group, so extra right-padding shifts the group left by ~half the
   icon+gap to land the LABEL on the button centre. @<=768 -> desktop CTA unchanged. */
@media (max-width: 768px) {
  html body #affiliate .ax-cta-primary {
    justify-content: center !important;
    font-size: 1.34rem !important;
    gap: 16px !important;
    padding-left: 34px !important;
    padding-right: 68px !important;
  }
}
/* end R729 */

/* R730 - MOBILE-ONLY - affiliate spacing batch (owner): (a) Hero copy was
   congested -> open up the vertical gaps (eyebrow / H1 / lede / CTAs / trust).
   (b) Clicking "Become an affiliate" should land #ax-join LOWER so the FAQ above
   it is visible: bump the signed-out gate scroll-margin-top 104 -> 190px.
   (c) Lower ONLY the four stat boxes (.ax-stats) a touch via translateY so the
   sections above/below don't reflow. @<=768 -> desktop frozen. */
@media (max-width: 768px) {
  html body #affiliate .ax-eyebrow { margin-bottom: 22px !important; }
  html body #affiliate .ax-lede { margin-top: 28px !important; }
  html body #affiliate .ax-cta-row { margin-top: 38px !important; }
  html body #affiliate .ax-hero-trust { margin-top: 34px !important; }
  html body #affiliate #ax-join:has(.aff-gate) { scroll-margin-top: 190px !important; }
  html body #affiliate .ax-stats { transform: translateY(16px) !important; }
}
/* end R730 */

/* R731 - MOBILE-ONLY - affiliate hero (owner): (a) remove the "See how it works"
   secondary CTA (.ax-cta-secondary) entirely. (b) make the "Earn 20%..." H1 stand
   out a touch more — it's already font-weight 800 (Geist's max), so nudge size
   33->35px + a hair of text-stroke to thicken the glyphs (subtle "bolder", not
   heavy). @<=768 -> desktop hero unchanged. */
@media (max-width: 768px) {
  html body #affiliate .ax-cta-secondary { display: none !important; }
  html body #affiliate .ax-h1 {
    font-size: 38px !important;   /* R732: max that still fits 2 lines @375 WITH the "20%" span (39px breaks to 3); was 35 */
    -webkit-text-stroke: 0.35px currentColor;
  }
  /* R732: make the "20%" pop — teal accent against the white headline */
  html body #affiliate .ax-h1 .ax-h1-pct { color: #2dd4bf !important; }
}
/* end R731 */

/* R733 - MOBILE-ONLY - signed-in affiliate dashboard (.aff-deck) ID/stat zone.
   DESKTOP-FLEX-BASIS-BECOMES-HEIGHT bug: .aff-deck-id-top is a horizontal split on
   desktop (.aff-deck-id-main flex-basis:410px | .aff-deck-statgroup flex-basis:460px),
   but on mobile it flips to flex-direction:column, so those basis values became the
   MAIN-axis HEIGHT — id-main ballooned to 410px (huge void around the avatar/welcome),
   statgroup to 460px, each .aff-deck-stat3 stretched to 434px, and the labels
   ("Your commission" @112px) overflowed their 88px cards and COLLIDED. Fix: reset the
   flex basis to content (flex:0 0 auto), let the 3 stat cards size as equal flex
   columns (flex:1) with WRAPPING labels, and collapse the void. id-zone 1250->~730px,
   no label overlap. Needs #affiliate-portal-level specificity to beat the base rule.
   @<=768 only -> desktop dashboard frozen. */
@media (max-width: 768px) {
  html body #affiliate #affiliate-portal .aff-deck-id-top {
    height: auto !important; min-height: 0 !important;
    justify-content: flex-start !important; gap: 16px !important;
  }
  html body #affiliate #affiliate-portal .aff-deck-id-main { flex: 0 0 auto !important; height: auto !important; }
  html body #affiliate #affiliate-portal .aff-deck-statgroup { flex: 0 0 auto !important; height: auto !important; align-items: stretch !important; }
  html body #affiliate #affiliate-portal .aff-deck-stat3 { flex: 1 1 0 !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; }
  html body #affiliate #affiliate-portal .aff-deck-stat3-l { white-space: normal !important; line-height: 1.25 !important; }
  html body #affiliate #affiliate-portal .aff-deck-stat3-div { align-self: stretch !important; height: auto !important; }
  /* R734: remove the ID-card particle layer entirely (owner: "get rid of the
     particles all together"). Was dimmed/thinned; now hidden on mobile. */
  html body #affiliate #affiliate-portal .aff-deck-particles { display: none !important; }
  /* R735 reverted (owner): contest title back to its natural 2-line wrap. */
  /* R736: start the signed-in dashboard a tick HIGHER on first open (owner) — pull
     the portal's top gap below the nav 32->12px. Scoped to :has(.aff-deck) so the
     logged-out join view keeps its original spacing. */
  html body #affiliate #affiliate-portal:has(.aff-deck) { margin-top: 12px !important; }
  /* R737: referral-link URL was truncated (".../...") — shrink it so the FULL url
     fits one line (owner). ~238px text box; production url is https://elytralabsca.ca/?aff=CODE
     (codes maxlength 12), longer than the localhost preview. 17.7->9.5px JetBrains Mono
     fits the localhost url + a full 12-char production code on one line (~238px box). */
  html body #affiliate #affiliate-portal .aff-refcard-url { font-size: 9.5px !important; }
  /* R738: remove the Lifetime-earnings + Available/Cash-out cards on mobile (owner).
     Both are the only two children of .aff-deck-row2, so hide the whole row; the
     referral card is the last child of .aff-deck-row1 and stays. Cash-out is hidden
     on mobile only - desktop keeps the full payout dial. */
  html body #affiliate #affiliate-portal .aff-deck-row2 { display: none !important; }
  /* R739: the inline script in affiliate.html sizes .aff-refcard-url as large as
     possible on one line (R737's 9.5px above is the no-JS fallback floor). */
  /* R740: trim the grey gap between the fixed nav and the signed-in dashboard a bit
     more (owner) — #affiliate reserves 70px top padding for the nav; for the dashboard
     view pull it down. 70->48 (too tight) -> 54px (owner: "a tiny bit more" grey, not all
     the way back). Pairs with R736's 12px portal margin. Scoped to :has(.aff-deck) so the
     logged-out join view is untouched. */
  html body #affiliate:has(.aff-deck) { padding-top: 54px !important; }
  /* R741: give the referral URL more room so it can render bigger on one line (owner).
     The referral card's 34px side padding made the url input narrower than it needs to
     be; trim it to 18px on mobile so the input (and the R739 auto-fit) gains ~32px of
     width -> a larger one-line font. Widens the code/Copy-link too (more spacious). */
  html body #affiliate #affiliate-portal .aff-refcard { padding-left: 18px !important; padding-right: 18px !important; }
  /* R742: "live" status pulse on the dashboard avatar dot (owner: "make this live") —
     an expanding teal halo radiating from the presence dot + a soft steady glow so it
     reads as actively on. transform/opacity only (GPU-friendly). Mobile-scoped (desktop
     frozen); reduced-motion drops the halo and keeps just the static glow. */
  html body #affiliate #affiliate-portal .aff-deck-avatar-dot { box-shadow: 0 0 8px 1px rgba(45, 212, 191, 0.55); animation: none !important; }
  html body #affiliate #affiliate-portal .aff-deck-avatar-dot::after {
    content: ''; position: absolute; inset: 0; border-radius: 50%;
    background: #2dd4bf; pointer-events: none;
    animation: affLivePing 2.4s cubic-bezier(0.23, 1, 0.32, 1) infinite;
  }
}
/* end R733 */

/* R742 (cont.): keyframes + reduced-motion live outside the max-width block. The ping
   only animates on mobile because the ::after rule that references it sits inside the
   @media above; the reduced-motion override is a no-op on desktop (no ::after there). */
@keyframes affLivePing {
  0%        { transform: scale(1);   opacity: 0.5; }
  70%, 100% { transform: scale(2.6); opacity: 0;   }
}
@media (prefers-reduced-motion: reduce) {
  html body #affiliate #affiliate-portal .aff-deck-avatar-dot::after { animation: none; opacity: 0; }
}

/* R743: trim the dead space between the nav and the affiliate hero eyebrow (owner).
   The marketing hero `#ax-hero` reserves 100px top padding; on mobile (with the 70px
   nav reserve on #affiliate) that left a ~93px gap above "Elytra Labs · Partner
   Program". Cut hero top padding 100->50px (gap ~43) then owner asked for halfway →
   75px (gap ~66), then up 4px → 71px, then down 2px → 73px. @<=768; desktop hero frozen. */
@media (max-width: 768px) {
  html body #affiliate #ax-hero { padding-top: 73px !important; }
}

/* R744: give the "Become an affiliate" CTA a slight teal hue (owner) — the button had
   only a faint tight glow (rgba(20,184,166,.3), -11px spread). Add a soft brand-teal
   cast around it: a layered box-shadow (a touch stronger lift + a wider ambient bloom).
   Stays subtle. @<=768; desktop CTA frozen. */
@media (max-width: 768px) {
  html body #affiliate .ax-cta-primary {
    box-shadow: 0 14px 34px -12px rgba(20, 184, 166, 0.45), 0 4px 18px -6px rgba(45, 212, 191, 0.32) !important;
  }
}

/* R745: About Us section mobile polish (owner; MOBILE ONLY, desktop frozen). Two fixes:
   (1) STAT BAND BUG — the 3 stats were a content-sized grid (cols 84/84/59px) wider than
   the card's inner width, so "24h / To Ship" was clipped by the card's overflow:hidden.
   Force equal thirds that fit (min-width:0), trim card padding, shrink the number 22.5->19,
   let labels wrap, add thin dividers → clean fitted trust band.
   (2) WALL OF TEXT — 3 dense 14.7px paragraphs read as one block on a skinny screen. Bump
   body to 16px with more line-height + paragraph gaps, and lead with a larger/darker
   first-paragraph lede for an entry point. @<=768. */
@media (max-width: 768px) {
  /* (1) fitted 3-across stat band */
  html body #about .about-stats { grid-template-columns: 1fr 1fr 1fr !important; padding: 22px 14px !important; }
  html body #about .about-stats .stat { min-width: 0 !important; padding: 10px 4px !important; }
  html body #about .about-stats .stat + .stat { border-left: 1px solid rgba(0, 0, 0, 0.08) !important; }
  html body #about .about-stats .stat-number { font-size: 19px !important; }
  html body #about .about-stats .stat-label { font-size: 9.5px !important; letter-spacing: 0.5px !important; line-height: 1.25 !important; }
  /* R745c: the base .stat gives the first two stats a bottom underline but the last (24h
     "Order To Ship") none → add the matching underline so all three are consistent (owner). */
  html body #about .about-stats .stat:last-child { border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important; }
  /* (2) readable body — copy condensed to 2 paragraphs (owner); both now share the
     first-paragraph treatment (18px / darker ink) so they read as one consistent block. */
  html body #about .about-content > p { font-size: 18px !important; line-height: 1.6 !important; margin-bottom: 20px !important; color: #26262c !important; }
}

/* R746: bump the COA page heading "Certificates of Analysis" on mobile (owner) — the
   `.section-title` h1 was 24px; raise to 30px. Scoped to `.coa-section h1.section-title`
   so other pages' section titles (e.g. About) are untouched. @<=768. */
@media (max-width: 768px) {
  html body #main-content .coa-section h1.section-title { font-size: 30px !important; line-height: 1.15 !important; }
}

/* R747: increase the COA search bar height on mobile (owner) — 54px → 66px. The pill
   `.coa-search` is a FIXED-height (56px) flex wrapper that draws the border/focus-ring;
   sizing the INPUT alone made it overflow the pill (broke the focus border on click), so
   grow the WRAPPER to 66px and let the input fill it (height:100%, stays fully tappable).
   Placeholder font bumped a touch. @<=768. */
@media (max-width: 768px) {
  html body #main-content .coa-section .coa-search { height: 66px !important; }
  html body #main-content .coa-section .coa-search input { height: 100% !important; min-height: 0 !important; font-size: 16.5px !important; }
}

/* R748: hide the ENTIRE FAQ hero on mobile (owner: first "get rid of all this" [the
   Popular chips], then "get rid of everything in this screenshot" [the whole hero —
   eyebrow, "How can we help?" heading, intro copy, search, and the support card]).
   `.faq-hero-v2` wraps `.faq-hero-main` + `.faq-hero-aside`. Mobile FAQ now opens
   straight at "Browse by topic". Desktop keeps the full hero (HTML untouched, all 4
   Popular chips intact). @<=768. */
@media (max-width: 768px) {
  html body .faq-page .faq-hero-v2 { display: none !important; }
  /* R748b: 2px of breathing room between the nav and the "Browse by topic" heading
     (owner; the hero above it is hidden so this is the first content). */
  html body .faq-page .faq-topics-v2 { padding-top: 2px !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   R749 — Cart drawer remove-× alignment (owner; MOBILE ONLY, desktop frozen).
   The × on each cart line item looked misaligned. Root cause: the button is
   position:absolute and was carrying three conflicting declarations at ≤540px:
     • a stray `transform: translateY(-50%)` left over from styles.css:42509
       that R130 never reset — it dragged the button ~20px up, so it poked
       ~3px ABOVE the card top;
     • `grid-area: close` (styles.css:42889) pinned its containing block to the
       narrow 32px close cell that sits INSIDE the card's 36px right padding,
       floating the × ~43px in from the card's right edge.
   Fix: detach from the grid cell (grid-area:auto → containing block becomes
   the position:relative .cart-item card) and cleanly vertical-center the ×
   against the whole card with a consistent right inset. Verified live @375:
   topGap==bottomGap (perfectly centered), 13px right inset (near-symmetric
   with the 12px left padding), 26px clearance from the product name, and no
   top overflow. Desktop (>540px) is entirely untouched.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 540px) {
    html body .cart-sidebar .cart-item-close,
    html body #cart-sidebar .cart-item-close {
        grid-area: auto !important;
        top: calc(50% - 36.1px) !important;  /* R750→R759: nudged 36.1px above dead-center (owner) */
        right: 12px !important;
        bottom: auto !important;
        left: auto !important;
        transform: translateY(-50%) !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   R750 — Cart drawer footer cleanup (owner; MOBILE ONLY, desktop frozen).
   Four asks: (A) raise the header divider + the products under it by 2.5px;
   (B) remove the "Have a promo code?" block (took too much room); (C) with
   that gone, give the checkout panel real breathing room; (D) the × nudge
   above lives in the R749 rule.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 540px) {
    /* A — trim ONLY the header's bottom padding so "Your Cart" stays put while
       the border-bottom (the divider line) and the items below it rise 2.5px.
       The footer is bottom-anchored in the flex column, so it doesn't move. */
    html body .cart-sidebar .cart-header,
    html body #cart-sidebar .cart-header {
        padding-bottom: 14.5px !important;  /* was 20px; R757 raised the line + items another 3px */
    }

    /* B — hide the cart-drawer promo-entry section. The LAUNCH auto-discount is
       unaffected (it's applied in the totals math, not here) and custom codes
       can still be entered on the checkout page (.review-promo). */
    html body .cart-sidebar .promo-section,
    html body #cart-sidebar .promo-section {
        display: none !important;
    }

    /* C — breathing room for the checkout panel now that the promo block is
       gone (it was cramped at id-scoped 3px padding / 3px row gaps). Uses a
       two-id selector to out-specify the #cart-footer > div rule that pins the
       tight values. */
    html body #cart-sidebar #cart-footer .cart-summary-block {
        padding: 13px 13px !important;
        margin-top: 9px !important;
    }
    html body #cart-sidebar #cart-footer .cart-summary-block .cart-subtotal,
    html body #cart-sidebar #cart-footer .cart-summary-block .cart-discount-row {
        margin: 8px 0 !important;  /* R763: a hair more breathing room (6→8px) */
    }
    html body #cart-sidebar #cart-footer .cart-summary-block .cart-savings-badge {
        margin: 7px 0 11px !important;
    }

    /* E — trim the dead white space above the "Arrives <date>" delivery row
       (owner): the footer's 8px top padding + the row's 6px top margin left a
       ~15px gap below the divider. Tighten to ~8px so the row sits closer up
       and the footer reclaims the space. */
    html body .cart-sidebar #cart-footer,
    html body #cart-sidebar #cart-footer {
        padding-top: 4px !important;
    }
    html body .cart-sidebar #cart-delivery-row,
    html body #cart-sidebar #cart-delivery-row {
        margin-top: 3px !important;
        /* R759: actually lower the "Arrives" row. margin-top can't move it
           down — the footer is bottom-anchored, so extra top margin only grows
           the footer upward while the row stays pinned. A translate does move it.
           R761: bumped 2px → 5.5px (owner, +3.5px). */
        transform: translateY(5.5px) !important;
        font-size: 12.96px !important;  /* R765: +1.56px (was 11.4px) */
    }
}

/* ════════════════════════════════════════════════════════════════════════
   R751 — Cart drawer micro-nudges (owner; MOBILE ONLY, desktop frozen).
   (a) Bump the Subtotal label + total value a tad (12.3px → 13.8 / 15px).
   (b) Drop the product name/dosage/price block 1.75px (image + stepper stay).
   (c) Shrink the qty stepper a hair (R130 scale 0.92 → 0.86, left-origin so it
       stays put). (d) The × raise to 10.5px lives in the R749 rule above.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 540px) {
    /* (a) Subtotal row a tad bigger — label + strike grow with the row, the
       bold total value a touch more so it reads as the headline figure. */
    html body #cart-sidebar #cart-footer .cart-summary-block .cart-subtotal {
        font-size: 0.92rem !important;
    }
    html body #cart-sidebar #cart-footer .cart-summary-block #cart-subtotal {
        font-size: 1rem !important;
    }
    /* (b) Lower the name/dosage/price block (translate = layout-neutral, so the
       vial image and × don't move). R752: owner pushed the WHOLE content group
       (name/dosage/price + qty stepper) down another 1.25px — details 1.75→3px,
       and the actions/stepper area gets its own matching +1.25px below. */
    html body #cart-sidebar .cart-item .cart-item-details {
        transform: translateY(3px) !important;
    }
    html body #cart-sidebar .cart-item .cart-item-actions {
        transform: translateY(1.25px) !important;
    }
    /* (c) Qty stepper a hair smaller (origin stays left-center from R130).
       R753: shrunk another hair 0.86 → 0.82 (owner). */
    html body #cart-sidebar .cart-item .cart-item-qty {
        transform: scale(0.82) !important;
    }

    /* (d) R754 — bump the cart-card type slightly bigger (owner): name 13.8→15px,
       dosage 11.4→12.4px, price 13.2→14.4px (~9% each). Out-specifies R130's
       ≤540 sizes via the #cart-sidebar id scope. */
    html body #cart-sidebar .cart-item .cart-item-name {
        font-size: 1rem !important;
    }
    html body #cart-sidebar .cart-item .cart-item-dosage {
        font-size: 0.83rem !important;
    }
    html body #cart-sidebar .cart-item .cart-item-price {
        font-size: 0.96rem !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   R756 — "Proceed to Checkout" button a tad bigger (owner; MOBILE ONLY).
   Was 12px/16px padding · 0.92rem (52px tall). Needs to out-specify the
   styles.css:42579 rule `#cart-sidebar #cart-footer .btn-primary.btn-large`
   which is (2,2,2); adding `.btn-checkout` makes this (2,3,2) and it wins.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 540px) {
    html body #cart-sidebar #cart-footer .btn-primary.btn-large.btn-checkout {
        padding: 15px 18px !important;
        font-size: 1rem !important;
        min-height: 58px !important;  /* was pinned at 52px → padding alone couldn't grow it */
    }
}

/* ════════════════════════════════════════════════════════════════════════
   R758 — Shift the grey checkout/summary box itself down 1.5px (owner;
   MOBILE ONLY). Uses translate so it's layout-neutral: the box + its contents
   move down 1.5px on screen as a unit, the delivery row above and the footer's
   bottom-anchoring don't reflow.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 540px) {
    html body #cart-sidebar #cart-footer .cart-summary-block {
        transform: translateY(1.5px) !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   R760 — Cart summary panel: drop the in-box RUO line + size up the contents
   (owner; MOBILE ONLY, desktop frozen).
   • Hide the redundant "research use only · not for human/animal consumption"
     line (the last child of the grey box). It's MOBILE-ONLY — desktop keeps it,
     and the same RUO disclosure still shows on the page footer, every product
     page, and the checkout page + signed research-use agreement, so compliance
     coverage is intact; this just removes the duplicate inside the cart panel.
   • With that room reclaimed, bump the panel type slightly: Subtotal label
     13.8→15px / total 15→16.2px, discount rows 12.3→13.5px, savings badge
     11.4→12.6px, and the checkout button 15→16px / 58→62px tall.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 540px) {
    html body #cart-sidebar #cart-footer .cart-summary-block > *:last-child {
        display: none !important;
    }
    html body #cart-sidebar #cart-footer .cart-summary-block .cart-subtotal {
        font-size: 16px !important;  /* R766: +1px (was 1rem/15px) */
    }
    html body #cart-sidebar #cart-footer .cart-summary-block #cart-subtotal {
        font-size: 17.2px !important;  /* R766: +1px (was 1.08rem/16.2px) */
    }
    html body #cart-sidebar #cart-footer .cart-summary-block .cart-discount-row {
        font-size: 0.9rem !important;
    }
    html body #cart-sidebar #cart-footer .cart-summary-block .cart-savings-badge {
        font-size: 0.84rem !important;
    }
    html body #cart-sidebar #cart-footer .btn-primary.btn-large.btn-checkout {
        font-size: 1.07rem !important;
        min-height: 60px !important;  /* R764: owner set to 60px (was 62) */
        padding: 16px 18px !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   R762 — Cart-item remove × a little smaller (owner; MOBILE ONLY). It was
   pinned at 40px by the styles.css:42394 min-width/min-height rule; shrink the
   circle to 35px (id scope beats that rule). Position from R749 is unchanged.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 540px) {
    html body #cart-sidebar .cart-item-close {
        width: 35px !important;
        height: 35px !important;
        min-width: 35px !important;
        min-height: 35px !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   R767 — Checkout Step 1: drop the top trust strip + the "Earn rewards"
   signed-out account banner (owner; MOBILE ONLY, desktop unchanged). The
   banner is JS-shown for signed-out users; display:none !important keeps it
   hidden regardless. Scoped to #checkout-step-1 so other trust rows are safe.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    html body #checkout-step-1 .checkout-trust-strip,
    html body #checkout-account-banner {
        display: none !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   R768 — Checkout mobile polish (owner; MOBILE ONLY, ≤768, desktop unchanged):
   (1) remove the sticky "Continue to Payment · $TOTAL" popup bar (#co-mcta,
       R657) — the in-flow summary CTA stays; reclaim the 92px page padding it
       reserved. (2) raise the "You'll earn N points" box 2.5px (layout-neutral
       translate). (3) recolor the promo Apply button from black → brand teal.
       (4) enlarge the in-flow "Continue to Payment" CTA (id scope beats the
       styles.css:34368 / btn-large size rules).
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    html body #co-mcta { display: none !important; }
    html body main.checkout-page { padding-bottom: 20px !important; }

    html body #review-earn-preview { transform: translateY(-6px) !important; }  /* R770: raised another 3.5px (-2.5 → -6) */

    html body .review-promo button { background: #0d9488 !important; }
    html body .review-promo button:hover { background: #0f766e !important; }

    html body #checkout-step-1 .review-cta {
        font-size: 18px !important;       /* R770: bigger still (17→18) */
        padding: 22px 28px !important;    /* R770: 20→22 */
        min-height: 70px !important;      /* R770: 64→70 */
    }

    /* R769 — center the "Secure Checkout" page heading (owner; mobile only).
       The h1 is display:flex (lock icon + text), so justify-content centers it;
       text-align alone was a no-op on a flex container. */
    html body .checkout-page-header h1 {
        justify-content: center !important;
        text-align: center !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   R771 — "Order Recap" panel (checkout payment step) text a tad bigger
   (owner; MOBILE ONLY, ≤768). Each element +~1px from its measured size.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    html body .payment-recap-card .checkout-section-header h3 { font-size: 14.2px !important; }
    html body .payment-recap-card .cs-edit-link { font-size: 11.5px !important; }
    html body .payment-recap-items .pri-row { font-size: 13.6px !important; }
    html body .payment-recap-totals .prt-row { font-size: 13.9px !important; }
    html body .payment-recap-totals .prt-row.prt-total { font-size: 16.75px !important; }
    html body .payment-recap-addrs .pra-block { font-size: 13.3px !important; }
    html body .payment-recap-addrs .pra-label { font-size: 11.6px !important; }
    html body .payment-recap-card .review-trust-mini span { font-size: 11.6px !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   R772 — Checkout payment-step layout pass (owner; MOBILE ONLY, ≤768,
   desktop unchanged):
   (1) trust badges (Free Reship / SSL / Discreet) onto one row;
   (2) drop the "Confirmation to" block from the Order Recap;
   (3) flip each payment pane so the order-reference note sits ABOVE the pay
       button (flex column + explicit order);
   (4) make the payment-method box bigger (all methods);
   (5) make the order-reference note box slightly smaller;
   (6) hide the "Secure Checkout" page header on the Payment step. Legacy step
       numbering: there is no #checkout-step-2; the Payment content is
       #checkout-step-3, so key off that being shown.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* (1) */
    html body .review-trust-mini {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 6px !important;
    }
    /* (2) */
    html body .payment-recap-addrs .pra-block:has(#payment-recap-email) {
        display: none !important;
    }
    /* (3) — flip the order-reference note ABOVE the pay button. SCOPED TO
       PAYPAL + VENMO ONLY (R773d-fix): these are the only two panes with a
       .pp-order-ref-box, and their child set is header→intro→ref→pay→warn→
       paid. The crypto/psifi/malum panes have a DIFFERENT structure (tiles,
       security note, a plain .btn-primary "Pay Now" with no .pp-method-pay-btn
       class), so the generic order rules shoved their header/intro to the
       bottom. Only flex + reorder paypal/venmo; leave the others in natural
       block flow.
       The [style*="block"] guard still keeps inactive paypal/venmo panes
       hidden (their inline display:none doesn't match, so no flex override).
       crypto/psifi/malum now get NO override at all → their inline
       block/none from the JS toggle works as-is. */
    html body #payment-pane-paypal[style*="block"],
    html body #payment-pane-venmo[style*="block"] { display: flex !important; flex-direction: column !important; }
    html body #payment-pane-paypal .checkout-section-header,
    html body #payment-pane-venmo .checkout-section-header { order: 1 !important; }
    html body #payment-pane-paypal .pp-intro,
    html body #payment-pane-venmo .pp-intro { order: 2 !important; }
    html body #payment-pane-paypal .pp-order-ref-box,
    html body #payment-pane-venmo .pp-order-ref-box { order: 3 !important; }
    html body #payment-pane-paypal .pp-method-pay-btn,
    html body #payment-pane-venmo .pp-method-pay-btn { order: 4 !important; }
    html body #payment-pane-paypal .payment-network-warning,
    html body #payment-pane-venmo .payment-network-warning { order: 5 !important; }
    html body #payment-pane-paypal .pp-paid-btn,
    html body #payment-pane-venmo .pp-paid-btn { order: 6 !important; }
    /* (4) — bigger again per owner (R773c): larger label/amount/icon (font
       cascades to the .pp-method-pay-btn children) + taller box.
       R773g: get the label onto TWO lines instead of three (owner). The text
       column was only ~106px (icon + amount pill + arrow + 3×10px gaps + 36px
       h-padding ate the 298px width), so "Open PayPal" couldn't fit on one
       line. Trim h-padding 18→12 and gap 10→6 to free ~24px → column ~130px,
       enough for a clean 2-line wrap while keeping the big font. */
    html body .pp-method-pay-btn {
        flex-wrap: nowrap !important;
        padding: 23px 12px !important;
        column-gap: 6px !important;
        font-size: 1.16rem !important;
        min-height: 84px !important;
    }
    /* R773g — the Venmo SVG renders at 1.35rem (~22px, set earlier at
       styles.css:43795) vs PayPal's 16px <i>, stealing ~6px of the text column
       and forcing "Open Venmo" onto a 3rd line. Match that selector exactly
       (`> svg.venmo-svg-btn`, same specificity) so source order lets this win,
       and shrink to 16px so the Venmo label also wraps to 2 lines. */
    html body .pp-method-pay-btn > svg.venmo-svg-btn {
        width: 16px !important;
        height: 16px !important;
        flex: 0 0 auto !important;
    }
    /* (5) */
    html body .pp-order-ref-box { padding: 10px 14px !important; margin: 4px 0 12px 0 !important; }
    html body .pp-order-ref-box .ppor-label { font-size: 0.64rem !important; margin-bottom: 5px !important; }
    html body .pp-order-ref-box .ppor-ref { font-size: 0.98rem !important; }
    /* (6) */
    html body main.checkout-page:has(#checkout-step-3[style*="block"]) .checkout-page-header {
        display: none !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   R773 — Drop the "Choose how to pay" step header + its 24h subtext on the
   Payment step (owner; MOBILE ONLY, ≤768, desktop unchanged). The payment
   method boxes are self-explanatory, so the .payment-step-header block (h2 +
   .payment-step-sub) is removed to tighten the step.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    html body .payment-step-header { display: none !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   R773e — shortened payment-note reminder inside the PayPal/Venmo order-ref
   box (owner). A condensed version of the "Important: include only your
   order reference …" warning, set in parentheses below the EL-XXXX ref in
   smaller, muted-teal text. MOBILE ONLY: the .ppor-note element defaults to
   display:none everywhere (so the desktop layout stays frozen) and is only
   revealed under ≤768. Static HTML lives in checkout.html under each
   .pp-order-ref-box .ppor-row.
   ════════════════════════════════════════════════════════════════════════ */
.ppor-note { display: none; }
@media (max-width: 768px) {
    html body .pp-order-ref-box .ppor-note {
        display: block !important;
        font-size: 0.7rem !important;
        line-height: 1.4 !important;
        color: #2f6b60 !important;
        margin-top: 8px !important;
        text-align: center !important;
        font-style: normal !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   R773f — now that the condensed reminder lives in the order-ref box (R773e),
   drop the long "Important: include only your order reference …" warning box
   on PayPal/Venmo (owner). MOBILE ONLY + scoped to those two panes:
   - desktop keeps the full warning (the R773e short note is hidden there, so
     the disclaimer still needs to show) → desktop stays frozen;
   - the crypto USDT #usdt-network-warning is a DIFFERENT message (Solana-only
     network) and is untouched.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    html body #payment-pane-paypal .payment-network-warning,
    html body #payment-pane-venmo .payment-network-warning {
        display: none !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   R774 [PC] — Homepage hero vials: calmer, lower-cost hover (owner; DESKTOP
   ONLY ≥769, mobile frozen). Goal = trim homepage lag + stop the vials from
   "changing direction / standing up" on hover; keep the light-up.
   (1) Kill the perpetual `r153r98-vial-breath` transform animation — it runs
       forever on all three vials (a standing compositing/repaint cost) and is
       the real idle-lag source here. Removing it also makes the resting pose
       static so the hover can sit perfectly still.
   (2) Pin each :hover transform to its EXACT rest matrix (measured from the
       static layout). The side vials were leaping sideways because their old
       hover rule dropped the centering translate and only set rotate(); the
       main lifted+scaled. Now hover == rest → zero movement.
   (3) Light-up stays: the side vials already brighten + gain a teal halo via
       their hover FILTER rule (untouched). The main vial had no hover glow, so
       give it a stronger teal halo + slight brightness on hover. Smooth the
       glow with a filter transition on all three.
   (4) Remove the price / "View product" tooltip popup entirely.
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
    /* (1) R775 [PC]: gentle up/down float like mobile (supersedes R774's
       earlier breath-kill). The vial transforms are !important-locked + GSAP-
       driven, so the float animates the standalone `translate` property — it
       composes on TOP of the locked transform (verified live) and sidesteps the
       cascade fight. Staggered so the three don't bob in unison. */
    html body #hero .hero-visual .hero-vial-link.hero-vial-link-main,
    html body #hero .hero-visual .hero-vial-link.hero-vial-link-mots,
    html body #hero .hero-visual .hero-vial-link.hero-vial-link-bpc {
        animation: heroVialFloatPC 5.5s ease-in-out infinite !important;
    }
    html body #hero .hero-visual .hero-vial-link.hero-vial-link-mots { animation-delay: -1.8s !important; }
    html body #hero .hero-visual .hero-vial-link.hero-vial-link-bpc  { animation-delay: -3.4s !important; }
    /* (2) hover transform == rest (exact static matrices → no movement) +
       fade the glow instead of the old transform tween */
    html body #hero .hero-visual .hero-vial-link.hero-vial-link-main,
    html body #hero .hero-visual .hero-vial-link.hero-vial-link-mots,
    html body #hero .hero-visual .hero-vial-link.hero-vial-link-bpc {
        transition: filter 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }
    html body #hero .hero-visual .hero-vial-link.hero-vial-link-main:hover {
        transform: matrix(1, 0, 0, 1, -115, 0) !important;
    }
    html body #hero .hero-visual .hero-vial-link.hero-vial-link-mots:hover {
        transform: matrix(0.997564, 0.0697565, -0.0697565, 0.997564, -146, 0) !important;
    }
    html body #hero .hero-visual .hero-vial-link.hero-vial-link-bpc:hover {
        transform: matrix(0.997564, -0.0697565, 0.0697565, 0.997564, -167, 0) !important;
    }
    /* (3) main vial lights up on hover (stronger teal halo + brightness) */
    html body #hero.hero-reading-room .hero-vial-link.hero-vial-link-main:hover {
        filter:
            drop-shadow(rgba(0, 0, 0, 0.68) 0 38px 64px)
            drop-shadow(rgba(0, 0, 0, 0.5) 0 6px 14px)
            drop-shadow(rgba(13, 148, 136, 0.42) 0 0 34px)
            brightness(1.05) contrast(1.03) !important;
    }
    /* (4) drop the hover price / "View product" tooltip popup */
    html body #hero .hero-visual .hero-vial-tooltip {
        display: none !important;
    }
}

/* Hero vial float (R775 [PC]) — animates the `translate` property so it stacks
   on top of the !important-locked `transform` matrix. Top-level keyframe; only
   referenced by the ≥769 rule above, so mobile is untouched. */
@keyframes heroVialFloatPC {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -9px; }
}

/* ════════════════════════════════════════════════════════════════════════
   R775 [PC] — Homepage hero polish (owner; DESKTOP ONLY ≥769, mobile frozen):
   (1) lower the teal hue around the vials toward the mobile amount (dim the
       spotlight glow); (2) bump the "GLP-3 HPLC purity …" caption slightly;
       (3) make the SHOP CATALOG cluster (button + price anchor + rating + COA
       link) slightly bigger. (Count-up enable + vial float live in the R690
       script + R774(1) respectively.)
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
    /* (1) lower the teal hue around the vials. The glow is LAYERED: BOTH
       .hero-visual::before (teal 0.2) AND ::after (teal 0.13) radials, PLUS the
       main vial's resting teal drop-shadow halo. Dimming only ::before earlier
       barely moved it — ::after was the big untouched layer. Dim both pseudo-
       glows + the vial's resting teal halo (0.22→0.10); hover still lights up
       to 0.42 via R774(3). */
    /* NOTE: these .hero-visual ::before/::after teal radials are OCCLUDED by the
       hero video (verified: forcing them bright red showed nothing), so their
       opacity has ~no visible effect. The real, visible teal hue lives on the
       vial-image rims in R778 below. Kept low. */
    html body #hero.hero-reading-room .hero-visual::before { opacity: 0.2 !important; }
    html body #hero.hero-reading-room .hero-visual::after  { opacity: 0.2 !important; }
    html body #hero.hero-reading-room .hero-vial-link.hero-vial-link-main {
        filter:
            drop-shadow(rgba(0, 0, 0, 0.68) 0 38px 64px)
            drop-shadow(rgba(0, 0, 0, 0.5) 0 6px 14px)
            contrast(1.02) !important;
    }
    /* The #hero element's OWN background carries two teal radials — the one at
       70% 52% sits directly behind the main vial and was the real remaining
       source the ::before/::after dims couldn't reach. Cut their alpha hard
       (0.075→0.022, 0.035→0.012). */
    html body #hero.hero-drench.hero-reading-room {
        background-image:
            radial-gradient(58% 48% at 70% 52%, rgba(45, 212, 191, 0.022), rgba(6, 7, 10, 0) 70%),
            radial-gradient(50% 42% at 33% 44%, rgba(45, 212, 191, 0.012), rgba(6, 7, 10, 0) 72%) !important;
    }

    /* (2) "GLP-3 HPLC purity (independently verified · lot RT2001)" — slightly bigger */
    html body #hero .hero-mono-sub .hms-label { font-size: 16px !important; }
    html body #hero .hero-mono-sub .hms-proof { font-size: 12.5px !important; }

    /* (3) SHOP CATALOG cluster — everything slightly bigger */
    html body #hero .hero-cta-r154 .hero-cta-inline {
        font-size: 18px !important;
        padding: 23px 46px !important;
        min-height: 70px !important;
    }
    html body #hero .hero-cta-r154 .hero-cta-anchor { font-size: 12.5px !important; }
    html body #hero .hero-cta-r154 .hero-trust-row .htr-rating { font-size: 15px !important; }
    html body #hero .hero-cta-r154 .hero-trust-row .htr-sub { font-size: 15px !important; }
    html body #hero .hero-cta-r154 .hero-trust-row .htr-coa { font-size: 15.5px !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   R776 [PC] — "We publish the data others hide" headline sliding under the nav
   + a big gap above its lede (DESKTOP ONLY ≥769, mobile frozen). ROOT CAUSE:
   the R159 scroll-parallax (`applyParallax`, index.html) runs ONCE at load
   (R630 dropped the scroll listener for perf). For a BELOW-the-fold element
   like `.r159-std-headline` (data-r159-parallax="0.05"), the load-time
   viewport offset is huge, so it bakes a large `--r159-py` (~ -195px) that
   never corrects on scroll → the headline is permanently shoved up under the
   sticky nav, leaving the gap. The parallax provides no dynamic value anymore
   (it never updates), so neutralize the stuck offset to 0 — headline drops to
   its natural position, clears the nav, gap closes. (Inline --r159-py is
   non-important, so !important wins.)
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
    html body .r159-std-headline { --r159-py: 0px !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   R777 [PC] — remove per-vial hover glow (owner; DESKTOP ONLY ≥769, mobile
   frozen). (The cursor "ball of light" that originally lived here was removed
   per owner — its HTML element + inline JS in index.html are gone too.) Kept:
   hovering a vial no longer brightens / teal-glows it (owner wanted the vials
   calm on hover).
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
    /* neutralize the per-vial hover light-up: hover filter == rest filter,
       so hovering a vial no longer brightens/teal-glows it (the moving light is
       the interaction now). Values copied from each vial's resting filter. */
    html body #hero.hero-reading-room .hero-vial-link.hero-vial-link-main:hover {
        filter:
            drop-shadow(rgba(0, 0, 0, 0.68) 0 38px 64px)
            drop-shadow(rgba(0, 0, 0, 0.5) 0 6px 14px)
            contrast(1.02) !important;
    }
    html body #hero.hero-reading-room .hero-vial-link.hero-vial-link-mots:hover,
    html body #hero.hero-reading-room .hero-vial-link.hero-vial-link-bpc:hover {
        filter:
            drop-shadow(rgba(0, 0, 0, 0.6) 0 20px 36px)
            blur(0.5px) brightness(0.93) saturate(0.95) !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   R778 [PC] — THE real source of the strong teal hue around the main vial
   (DESKTOP ONLY ≥769, mobile frozen). All the earlier R775–R777 hue cuts
   targeted the LINK (.hero-vial-link-main) and the .hero-visual radials, but
   the dominant glow is on the IMAGE itself: `.hero-vial-main` / `-secondary`
   each carry THREE teal drop-shadows (main: rgba(45,212,200,.35) 0 0 54px +
   rgba(94,228,222,.29) 0 0 22px + rgba(45,200,214,.23) 0 18px 48px) plus
   saturate(1.22) amplifying them. Strip the three teal drop-shadows and ease
   the saturate; KEEP the cream rim-light + the black depth shadows so the vial
   still reads 3D. This is what makes the hue actually go away.
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
    html body #hero.hero-reading-room .hero-visual .hero-vial-link .hero-vial-main {
        filter:
            drop-shadow(rgba(255, 251, 242, 0.55) 1px -1px 0)
            drop-shadow(rgba(10, 10, 10, 0.12) 2px 5px 8px)
            drop-shadow(rgba(10, 10, 10, 0.16) 4px 20px 32px)
            drop-shadow(rgba(10, 10, 10, 0.2) 3px 38px 60px)
            drop-shadow(rgba(45, 212, 200, 0.42) 0 0 40px)   /* the VISIBLE teal rim: vial-image
               drop-shadows render in FRONT (the ::before/::after radials are occluded by the
               video). Two layers = soft outer + tighter inner hug. Still below the orig 0.35×3. */
            drop-shadow(rgba(45, 212, 200, 0.29) 0 0 18px)
            contrast(1.13) saturate(1.12) brightness(1.05) !important;
    }
    html body #hero.hero-reading-room .hero-visual .hero-vial-link .hero-vial-secondary {
        filter:
            drop-shadow(rgba(255, 251, 242, 0.5) 1px -1px 0)
            drop-shadow(rgba(10, 10, 10, 0.1) 1px 4px 6px)
            drop-shadow(rgba(10, 10, 10, 0.15) 3px 18px 28px)
            drop-shadow(rgba(45, 212, 200, 0.37) 0 0 34px)   /* match main vial: faint teal rim (outer) */
            drop-shadow(rgba(45, 212, 200, 0.25) 0 0 15px)   /* match main vial: faint teal rim (inner) */
            contrast(1.13) saturate(1.12) brightness(1.045) !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   R779 [PC] — Featured Products section (DESKTOP ONLY ≥769, mobile frozen).
   (1) teal-tint the "Elytra" word in the "Featured Elytra Products" heading,
       matching the site highlight teal (#5eead4, same as the card-name hover +
       the "Demand" accent). The heading paints white via -webkit-text-fill-color,
       so the accent MUST override BOTH color + -webkit-text-fill-color.
   (2) bump the product-card name font a touch (1.18 → 1.32rem). The mobile
       override (.r532-name @ ~styles.css:61818) keeps phones at 0.92rem.
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
    html body #r532-title .r532-title-desk .r532-accent {
        color: #5eead4 !important;
        -webkit-text-fill-color: #5eead4 !important;
    }
    html body #r532-shelf .r532-name {
        font-size: 1.32rem !important;
    }
}
/* end R779 */

/* ════════════════════════════════════════════════════════════════════════
   R781 [PC] — credentials strip across the hero floor (DESKTOP ≥1024 only;
   hidden below so the mobile hero is byte-frozen). Real, already-stated facts;
   quiet instrument-panel readout. Decorative (pointer-events:none); not a GSAP
   target → own reveal, visible-by-default (animation only enhances; reduced-
   motion just shows it). Sits at hero bottom, z above the floor, below content.
   ════════════════════════════════════════════════════════════════════════ */
.hero-creds { display: none; }
@media (min-width: 1024px) {
    html body #hero.hero-reading-room .hero-creds {
        display: flex;
        position: absolute;
        left: 0; right: 0; bottom: 140px;
        justify-content: center;
        align-items: center;
        gap: 0;
        z-index: 4;
        pointer-events: none;
        padding: 0 24px;
    }
    /* faint full-width hairline "ledge" above the row — edge-faded so it
       dissolves at the screen edges, with a subtle teal-tinted centre. */
    html body #hero.hero-reading-room .hero-creds::before {
        content: '';
        position: absolute;
        left: 0; right: 0; top: -20px;
        height: 1px;
        background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.10) 20%,
            rgba(94, 234, 212, 0.26) 50%,
            rgba(255, 255, 255, 0.10) 80%,
            transparent 100%);
        pointer-events: none;
    }
    html body #hero.hero-reading-room .hcs-item {
        font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
        font-size: 13px;
        font-weight: 500;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: rgba(199, 214, 210, 0.97);
        display: inline-flex;
        align-items: center;
        gap: 9px;
        padding: 0 18px;
        white-space: nowrap;
    }
    /* the standout item: brighter teal + bold so it's the hero of the strip */
    html body #hero.hero-reading-room .hcs-item.hcs-hot {
        color: #5eead4;
        font-weight: 700;
        text-shadow: 0 0 12px rgba(94, 234, 212, 0.35);
    }
    html body #hero.hero-reading-room .hcs-item.hcs-hot .hcs-dot {
        width: 6px; height: 6px;
        box-shadow: 0 0 13px rgba(94, 234, 212, 1);
    }
    html body #hero.hero-reading-room .hcs-dot {
        width: 5px; height: 5px; border-radius: 50%;
        background: #5eead4;
        box-shadow: 0 0 11px rgba(94, 234, 212, 0.9);
        flex: 0 0 auto;
    }
    html body #hero.hero-reading-room .hcs-sep {
        width: 1px; height: 12px;
        background: rgba(255, 255, 255, 0.14);
        flex: 0 0 auto;
    }
    @media (prefers-reduced-motion: no-preference) {
        html body #hero.hero-reading-room .hero-creds {
            animation: hcsIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) 1s both;
        }
    }
}
/* narrow desktops (1024–1280): tighten padding/tracking so the longer
   "Same-day shipping before 3 PM ET" label never clips at the row edges. */
@media (min-width: 1024px) and (max-width: 1280px) {
    html body #hero.hero-reading-room .hcs-item {
        padding: 0 12px;
        letter-spacing: 0.11em;
        font-size: 11px;
    }
}
@keyframes hcsIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* end R781 */

/* ════════════════════════════════════════════════════════════════════════
   R783 — newsletter "feed console" lag. The console card (792×720) reveals via
   the global .r158-room [data-r158-reveal] rule, which animates a blur(7px)
   filter in over 0.7s. Animating a blur on a large surface is GPU-expensive and
   hitches right as you scroll into the section. Scoped fix: drop the blur from
   THIS card's reveal (keep the fade + slide) + clear will-change so no leftover
   filter layer. Other sections' reveals are untouched.
   ════════════════════════════════════════════════════════════════════════ */
html body .newsletter-section.r159-feed .r159-feed-console[data-r158-reveal] {
    filter: none !important;
    will-change: opacity, transform !important;
    transition: opacity .7s var(--r158-ease), transform .7s var(--r158-ease) !important;
}
html body .newsletter-section.r159-feed .r159-feed-console[data-r158-reveal].r158-in {
    filter: none !important;
}
/* end R783 */

/* ════════════════════════════════════════════════════════════════════════
   R790 — MOBILE-ONLY: open the Learn page directly on the research-area
   explorer ("Nine research areas" card). Hide the tall "The Compound Library"
   intro hero (#lib-hero) AND the "Browse by research area" heading + sub
   (.lib-areas-head) on phones, so the page starts on .lib-explorer's dark
   stage card. Both nodes are kept in the DOM (display:none, not removed) so
   every JS hook still resolves — #edu-search-input / eduFilter(),
   #lib-n-comp / #lib-n-area counters, eduHeroSearchScroll(). The explorer
   section already clears the fixed 73px nav (verified card top ≈138px), so no
   extra top padding is needed. Desktop is byte-for-byte unchanged (this lives
   only inside max-width:768px). app.js untouched.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    html body #library #lib-hero { display: none !important; }
    html body #library .lib-areas-section .lib-areas-head { display: none !important; }
    /* R792: +4.5px breathing room between the nav and the "Compound Library"
       explorer card, now that the hero is hidden (section padding-top 40 → 44.5). */
    html body #library .lib-areas-section { padding-top: 44.5px !important; }
}
/* end R790 */

/* ════════════════════════════════════════════════════════════════════════
   R794 — DESKTOP-ONLY: remove the FAQ help-center hero (.faq-hero-v2) — the
   "How can we help?" heading + search + Popular tags AND the right support card
   (Team online / ~12 hr / Contact form / Email us). The page opens directly on
   "Browse by topic". Kept in the DOM (display:none) so the search's JS hooks
   still resolve — #faq-search / filterFaq() / setFaqSearch(). Mobile keeps the
   hero (rule lives only in min-width:769px). app.js untouched.
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
    html body .faq-page .faq-hero-v2 { display: none !important; }
}
/* end R794 */

/* ════════════════════════════════════════════════════════════════════════
   R795 — DESKTOP cart drawer: port 5 of the mobile cart cleanups to the 480px
   desktop/tablet drawer. Scoped to min-width:541px so the ≤540px FULL-SCREEN
   mobile drawer (and its R749–R766 tweaks) is left completely untouched.
   Owner asks: (1) remove "Have a promo code?"; (2) bigger Subtotal; (3) drop
   the in-box "research use only" line (RUO still on footer + every product +
   the checkout page, so coverage is intact); (4) bigger Proceed-to-Checkout;
   (5) more breathing room in the grey summary box. Nodes kept in DOM via
   display:none, so app.js cart render/JS hooks are unaffected. app.js untouched.
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 541px) {
    /* (1) "Have a promo code?" entry — auto-discount math unaffected; custom
       codes still enterable on the checkout page. */
    html body #cart-sidebar .promo-section { display: none !important; }

    /* (3) drop the duplicate RUO line (last child of the grey summary box). */
    html body #cart-sidebar #cart-footer .cart-summary-block > *:last-child { display: none !important; }

    /* (5) grey summary box breathing room. */
    html body #cart-sidebar #cart-footer .cart-summary-block { padding: 14px !important; margin-top: 9px !important; }
    html body #cart-sidebar #cart-footer .cart-summary-block .cart-subtotal,
    html body #cart-sidebar #cart-footer .cart-summary-block .cart-discount-row { margin: 8px 0 !important; }

    /* (2) bigger Subtotal label + value (16.3 → 18 / 19.5px). */
    html body #cart-sidebar #cart-footer .cart-summary-block .cart-subtotal { font-size: 18px !important; }
    html body #cart-sidebar #cart-footer .cart-summary-block #cart-subtotal { font-size: 19.5px !important; }

    /* (4) bigger Proceed to Checkout button (15.7px/52px → 17px; height 66.8px). */
    html body #cart-sidebar #cart-footer .btn-primary.btn-large.btn-checkout {
        font-size: 17px !important;
        min-height: 66.8px !important;
        padding: 16px 24px !important;
    }

    /* (6) R796 — raise the whole footer section (the "Arrives…" delivery row +
       the grey summary box) up 2px. translate is layout-neutral; the footer
       stays bottom-anchored in the flex column. */
    html body #cart-sidebar #cart-footer { transform: translateY(-2px) !important; }
}
/* end R795 */

/* ════════════════════════════════════════════════════════════════════════
   R798 — DESKTOP: bigger "Continue to Payment" CTA (.review-cta) on the
   checkout information/review column (16px / 54px tall → 18px / 64px). High-spec
   id-scoped selector beats the .btn-large size rules. Mobile keeps its own
   in-flow enlargement (R768); this lives only in min-width:769px.
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
    html body #checkout-step-1 .btn-primary.btn-large.review-cta {
        font-size: 18px !important;
        padding: 20px 32px !important;
        min-height: 72px !important;
    }
}
/* end R798 */

/* ════════════════════════════════════════════════════════════════════════
   R799 — DESKTOP: bring the PayPal/Venmo manual-pay panes in line with the
   mobile treatment (R773e/f), plus a bigger "Open … to Pay" button.
   (1) reveal the condensed parenthetical reminder (.ppor-note) inside the green
       order-ref box (mirrors mobile R773e — small, muted-teal, centered);
   (2) drop the redundant yellow "Important: …" warning box on these two panes
       (the reminder now lives in the green box; RUO/payment-note coverage is
       intact via the green-box note + the order-confirm page);
   (3) make the "Open PayPal/Venmo to Pay" button noticeably taller.
   Scoped to min-width:769px so the mobile panes (≤768, their own R773e/f) are
   untouched. checkout.html markup already carries the .ppor-note. app.js untouched.
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
    /* (1) parenthetical reminder in the green box — bigger + bolder (R800) so
       it reads as an important instruction. */
    html body #payment-pane-paypal .pp-order-ref-box .ppor-note,
    html body #payment-pane-venmo .pp-order-ref-box .ppor-note {
        display: block !important;
        font-size: 0.92rem !important;
        font-weight: 600 !important;
        line-height: 1.45 !important;
        color: #2f6b60 !important;
        margin-top: 8px !important;
        text-align: center !important;
        font-style: normal !important;
    }
    /* R800 — make the rest of the order-ref box text bigger + bolder so the
       reference + its label are unmistakably important. */
    html body #payment-pane-paypal .pp-order-ref-box .ppor-label,
    html body #payment-pane-venmo .pp-order-ref-box .ppor-label {
        font-size: 0.82rem !important;
        font-weight: 700 !important;
        color: #1f6b5e !important;
    }
    html body #payment-pane-paypal .pp-order-ref-box .ppor-ref,
    html body #payment-pane-venmo .pp-order-ref-box .ppor-ref {
        font-size: 1.62rem !important;
        font-weight: 800 !important;
    }
    /* (2) drop the redundant yellow warning */
    html body #payment-pane-paypal .payment-network-warning,
    html body #payment-pane-venmo .payment-network-warning {
        display: none !important;
    }
    /* (3) bigger "Open … to Pay" buttons (was ~58px → ~78px) + the crypto
       "Pay Now" button (#pay-now-btn, a plain .btn-large — id scope beats the
       .btn-large size rules) to match. */
    html body #payment-pane-paypal .pp-method-pay-btn,
    html body #payment-pane-venmo .pp-method-pay-btn,
    html body #payment-pane-crypto #pay-now-btn {
        padding-top: 26px !important;
        padding-bottom: 26px !important;
        min-height: 78px !important;
    }
}
/* end R799 */

/* ════════════════════════════════════════════════════════════════════════
   R803 — checkout "Choose How to Pay" heading a touch larger (DESKTOP).
   The payment-step header (#checkout-step-3 .payment-step-header h2) was
   clamp(1.3rem, 2.4vw, 1.7rem) → ~27px at desktop. Owner wants it a little
   bigger. Bump the clamp max to 1.95rem (~31px). The header is already
   display:none under 768px, so this only ever shows on desktop; still scoped
   to >=769px for clarity. Id-scoped selector beats the existing
   `html body .payment-step-header h2` !important rule.
   (The "How"/"Pay" capitalization is a text fix in checkout.html, all viewports.)
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
    html body #checkout-step-3 .payment-step-header h2 {
        font-size: clamp(1.45rem, 2.6vw, 1.95rem) !important;
    }
}
/* end R803 */

/* ════════════════════════════════════════════════════════════════════════
   R804 — Track-Your-Order status hero: spacing/alignment cleanup (DESKTOP).
   The hero is a 2-col grid (order identity | estimated arrival). Problems on
   desktop: the ETA column was `auto`, so the long "Ships within 1 business day
   (same day if before 3 PM ET)" sentence stretched it to ~460px (≈half the
   card) on one wide line; and `align-items:center` floated the right block
   between the two left rows instead of aligning with the status pill.
   Fix: cap the ETA column (sentence wraps to ~2 tidy right-aligned lines),
   top-align both columns, give the left rows a touch more air, and take the
   ETA prose out of the wide Orbitron display face (the EL-#### ref stays
   Orbitron — it's an identifier; the ETA is a sentence). Desktop-only; mobile
   keeps its existing R779 stacked treatment.
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
    html body .track-status-hero {
        grid-template-columns: 1fr minmax(0, 232px) !important;
        align-items: start !important;
        gap: 28px !important;
    }
    html body .track-status-hero .tsh-ref-row { margin-bottom: 7px !important; }
    html body .track-status-hero .tsh-eta-label { margin-bottom: 5px !important; }
    html body .track-status-hero .tsh-eta-date {
        font-family: inherit !important;   /* prose, not Orbitron */
        font-size: 0.9rem !important;
        font-weight: 600 !important;
        line-height: 1.4 !important;
        letter-spacing: 0 !important;
    }
}
/* end R804 */

/* ════════════════════════════════════════════════════════════════════════
   R805 — order-confirmation hero subtitle readability (ALL viewports).
   ".osc-sub" ("We received your payment. We'll email shipping confirmation…")
   used color:var(--text-muted), which on this light-themed page resolves to a
   dark gray (#6b6b73). But that line sits on the dark navy "Thanks for your
   order!" gradient hero — so it rendered dark-on-dark and was basically
   unreadable. Pin it to a light slate for strong contrast (~14:1) on the dark
   card. Contrast fix, not a desktop-only styling tweak → applies everywhere.
   ════════════════════════════════════════════════════════════════════════ */
html body .osc-sub {
    color: rgba(241, 245, 249, 0.92) !important;
}
/* end R805 */

/* ════════════════════════════════════════════════════════════════════════
   R806 — appealing teal hero background for the "Thanks for your order!" card.
   .order-share-card was a flat, desaturated grey-navy gradient. Recolor to a
   deep brand-teal gradient — far more aesthetic, and the light subtitle (R805)
   + white action tiles + teal title still read with strong contrast. Border
   retinted teal to match. Background recolor (no layout impact) → all viewports.
   ════════════════════════════════════════════════════════════════════════ */
html body .order-share-card {
    background: linear-gradient(140deg, #0d3b38 0%, #0b2a37 50%, #13635a 100%) !important;
    border: 1px solid rgba(45, 212, 191, 0.30) !important;
}
/* end R806 */

/* ════════════════════════════════════════════════════════════════════════
   R808 — track card: bigger type + truly-centered ORDER reference (DESKTOP).
   (supersedes R807's own-line approach.) Two asks:
   (a) Everything in the status hero a notch larger.
   (b) The "ORDER + ref" centered in the WHOLE card, both axes, while the status
       pill stays pinned top-left and the "Placed …" date stays pinned
       bottom-left. The earlier in-flow approach only centered within the left
       column and sat ~9px low. Fix: stretch the cells to the row height, run
       the left column as a flex column with space-between (pill → top, date →
       bottom), and absolutely-position the ref row at the card's exact centre
       (top/left 50% + translate -50%). Verified no overlap with pill / date /
       ETA at the bumped sizes. Desktop only — mobile keeps its R779 layout.
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
    /* (a) larger type across the whole card */
    html body .track-status-hero .tsh-status-pill { font-size: 0.84rem !important; }
    html body .track-status-hero .tsh-ref-label   { font-size: 0.82rem !important; }
    html body .track-status-hero .tsh-ref-value   { font-size: 1.4rem !important; }
    html body .track-status-hero .tsh-copy        { width: 32px !important; height: 32px !important; font-size: 0.95rem !important; }
    html body .track-status-hero .tsh-date        { font-size: 0.95rem !important; }
    html body .track-status-hero .tsh-eta-label   { font-size: 0.82rem !important; }
    html body .track-status-hero .tsh-eta-date    { font-size: 1.02rem !important; }
    /* (b) pill top-left, date bottom-left, ORDER absolutely centred in the card */
    html body .track-status-hero { position: relative !important; align-items: stretch !important; }
    html body .track-status-hero .tsh-left {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        min-height: 108px !important;
    }
    html body .track-status-hero .tsh-status-pill { align-self: flex-start !important; }
    html body .track-status-hero .tsh-date        { align-self: flex-start !important; margin: 0 !important; }
    html body .track-status-hero .tsh-ref-row {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
    }
}
/* end R808 */

/* ============================================================
   R770 — A11Y FIX (audit task 1): contrast — WCAG 1.4.3 error text + 1.4.11 focus
   Applies on ALL viewports (genuine bug fix, intentionally no media query).
   ============================================================ */
html body .error-message,
html body .field-error {
    color: #b91c1c !important;
    border-left: 3px solid #ef4444 !important;
}
html body .btn-primary:focus-visible,
html body .btn-outline:focus-visible,
html body .btn-large:focus-visible,
html body .product-add-btn:focus-visible,
html body .auth-submit:focus-visible {
    outline: 3px solid #0d9488 !important;
    outline-offset: 3px !important;
    border-radius: 999px !important;
}
html body .product-card:focus-visible,
html body .stack-card:focus-visible,
html body .goal-card:focus-visible,
html body .related-card:focus-visible {
    outline: 3px solid #0d9488 !important;
    outline-offset: 4px !important;
    transform: translateY(-3px) !important;
}
html body .points-slider:focus-visible,
html body #affiliate .aff-lp-range:focus-visible {
    outline: 2px solid #5eead4 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(94, 234, 212, 0.30) !important;
}

/* ============================================================
   R771 — A11Y FIX (audit task 1): keyboard-accessible typed e-signature (checkout)
   Pairs with the typed-signature markup + inline script in checkout.html.
   Checkout card is #fff (light), so input text is dark; the "draw instead"
   toggle uses #0f766e (~5:1 on white) not the failing teal --accent.
   Genuine accessibility fix: applies on all viewports.
   ============================================================ */
.sig-typed { margin-bottom: 14px; }
.sig-typed > label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
}
.sig-typed-input {
    width: 100%;
    padding: 12px 14px;
    font-size: 1.2rem;
    font-family: "Brush Script MT", "Segoe Script", cursive;
    color: #0b1f1c;
    background: #ffffff;
    border: 2px solid var(--border-medium);
    border-radius: 10px;
}
.sig-typed-input::placeholder { color: #64748b; font-style: italic; }
.sig-typed-input:focus-visible {
    outline: 2px solid #0d9488;
    outline-offset: 2px;
    border-color: #0d9488;
}
.sig-typed-help {
    margin: 6px 0 0;
    font-size: 0.8rem;
    color: #475569;
}
.sig-mode-toggle {
    display: inline-block;
    margin: 6px 0 8px;
    padding: 2px 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: #0f766e;
    background: none;
    border: none;
    text-decoration: underline;
    cursor: pointer;
}
.sig-mode-toggle:focus-visible {
    outline: 2px solid #0d9488;
    outline-offset: 2px;
    border-radius: 2px;
}
.sig-draw { margin-top: 6px; }
.sig-draw[hidden] { display: none; }
/* ============================================================
   END R770 / R771
   ============================================================ */

/* ============================================================
   R802 - PRODUCT PAGES - hide the top marketing + RUO badges (owner)
   Removes the two pills above the product name: the promotional
   "badge" pill (.pp-badge.bestseller — app.js reuses this class for
   BEST SELLER / POPULAR / TOP RATED / VALUE / BLEND) and the
   "RESEARCH USE ONLY" pill (.pp-badge.ruo). The functional stock
   pills (.pp-badge.out = OUT OF STOCK, .pp-badge.low = ONLY N LEFT)
   are intentionally NOT hidden. The .pp-badges-row collapses to 0
   height when empty (only ~10px gap to the name), so no layout edit
   is needed. app.js untouched; .pp-* is product-page-only. Both
   viewports. (RUO disclaimers remain in the footer + elsewhere.)
   ============================================================ */
html body .pp-badge.bestseller,
html body .pp-badge.ruo { display: none !important; }
/* end R802 */

/* ============================================================
   R803 - PRODUCT PAGES - bump the "5-Star Reviewed" pill a touch
   (owner). Stars 15.2 -> 18px, label 13.1 -> 15px. #pp-root id-scope
   is needed to beat the #main-content Inter normalizer (plain
   .pp-rating rules lose to it). Both viewports.
   ============================================================ */
html body #pp-root .pp-rating .pp-stars { font-size: 18px !important; }
html body #pp-root .pp-rating strong { font-size: 15px !important; }
/* end R803 */

/* ============================================================
   R804 - PRODUCT PAGES - price row a hair bigger (owner).
   Sale 30.4->32, struck-original 17.6->18.5, save-pill 14.4->15.2.
   #pp-root id-scope + !important to win cleanly. DESKTOP ONLY
   (>=769px) — owner wants mobile back at the original sizes, so
   on mobile R804 no longer applies and the base sizes return.
   ============================================================ */
@media (min-width: 769px) {
  html body #pp-root .pp-price-sale { font-size: 32px !important; }
  html body #pp-root .pp-price-original { font-size: 18.5px !important; }
  html body #pp-root .pp-price-saving { font-size: 15.2px !important; }
}
/* end R804 */

/* ============================================================
   R805 - PRODUCT PAGES - Add-to-Cart button a little taller (owner).
   Desktop vertical padding 16 -> 20px (height ~54 -> 62), matching the
   mobile R717 treatment. #pp-root id-scope beats .btn-large's !important
   padding. Desktop-only so mobile (R717) is untouched.
   ============================================================ */
@media (min-width: 769px) {
  html body #pp-root .pp-add-btn {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
}
/* end R805 */

/* ============================================================
   R806 - PRODUCT PAGES - product name (.pp-name) +1.5px (owner).
   The live size is styles.css:15490's clamp(2.1rem, 5vw, 3.2rem)
   !important (51.2px desktop). We re-declare the same clamp shifted
   +1.5px at every term so it grows uniformly and stays responsive.
   #pp-root id-scope beats the plain .pp-name !important rule.
   ============================================================ */
html body #pp-root .pp-name {
  font-size: clamp(calc(2.1rem + 1.5px), calc(5vw + 1.5px), calc(3.2rem + 1.5px)) !important;
}
/* end R806 */

/* ============================================================
   R807 - PRODUCT PAGES - scoot the quick-trust pill row down (owner).
   Only .pp-quicktrust moves; use translateY so it's layout-neutral
   (nothing above/below shifts). 40px gap below leaves room. Desktop-only.
   ============================================================ */
@media (min-width: 769px) {
  html body #pp-root .pp-quicktrust { transform: translateY(10px) !important; }
}
/* end R807 */

/* ============================================================
   R809 - COA PAGE - removed the 4th "Tested By: Third-Party Lab"
   stat card (owner). Rebalance the stats strip for the now-3 cards:
   3 columns ≥601px (was repeat(4,1fr), which would leave an empty
   4th column), single column ≤600px. Overrides the base + tablet
   rules by later source order (same specificity).
   ============================================================ */
html body .coa-stats-strip { grid-template-columns: repeat(3, 1fr) !important; }
@media (max-width: 600px) {
  html body .coa-stats-strip { grid-template-columns: 1fr !important; }
}
/* end R809 */

/* ============================================================
   R810 - MOBILE-ONLY - catalog vial cards: shave the dose→price gap
   a hair more (owner). R720 set .product-price-row margin-top:14px
   (total gap 18px = 4px dose margin-bottom + 14). Drop to 11px so the
   gap is 15. Same selector as R720, later source wins. @≤768; desktop
   frozen.
   ============================================================ */
@media (max-width: 768px) {
  html body #main-content #products .product-card .product-price-row { margin-top: 11px !important; }
}
/* end R810 */

/* ============================================================
   R811 - MOBILE-ONLY - catalog vial cards: lower ONLY the product name +
   dosage a hair (owner). translateY(3px) is layout-neutral, so the vial
   image above and the price-row/button below don't move. @≤768; desktop
   frozen.
   ============================================================ */
@media (max-width: 768px) {
  html body #main-content #products .product-card .product-name,
  html body #main-content #products .product-card .product-dosage {
    transform: translateY(3px) !important;
  }
}
/* end R811 */

/* ============================================================
   R812 — Affiliate dashboard: store-credit codes card readable
   ------------------------------------------------------------
   Bug: the P9 light-theme migration (~styles.css:60045) whitened
   .aff-credits-card and flipped .aff-credit-code → dark ink, but
   never recolored .aff-credit-row, which kept its old dark-theme
   slate (rgba(15,23,42,0.55)). Result: dark text on a dark row,
   unreadable. Fix: light "coupon" row (faint teal tint + the
   existing dashed teal border) with AA-grade dark text on top.
   ============================================================ */
html body #affiliate .aff-credit-row {
    background: rgba(20, 184, 166, 0.08) !important;     /* faint teal coupon tint over white card */
    border: 1px dashed rgba(20, 184, 166, 0.55) !important;
}
html body #affiliate .aff-credit-code {
    color: #0f766e !important;                            /* dark teal: branded + ~5:1 on light */
}
html body #affiliate .aff-credit-code:hover {
    color: #0d9488 !important;
}
html body #affiliate .aff-credit-sub {
    color: #475569 !important;                            /* slate-600: ~7:1 */
}
html body #affiliate .aff-credit-value {
    color: #047857 !important;                            /* emerald-700: money green, ~5:1 */
}
html body #affiliate .aff-credit-row .refer-copy-btn-sm {
    color: #0f766e !important;
    background: rgba(20, 184, 166, 0.12) !important;
    border: 1px solid rgba(20, 184, 166, 0.30) !important;
}
/* end R812 */

/* ============================================================
   R813 — store-credit code rows: stable column alignment
   ------------------------------------------------------------
   Was display:flex + justify-content:space-between, so the $
   value (middle flex item) drifted with the code text width —
   $60.00 and $25.00 landed 5px apart. Switch to a 3-track grid
   (1fr | auto | 1fr) so code pins left, value sits dead-centre
   every row, copy button pins right. tabular-nums keeps digit
   columns uniform.
   ============================================================ */
html body #affiliate .aff-credit-row {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
}
html body #affiliate .aff-credit-row > *:first-child {
    justify-self: start;
    min-width: 0;
}
html body #affiliate .aff-credit-value {
    justify-self: center;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
html body #affiliate .aff-credit-row .refer-copy-btn-sm {
    justify-self: end;
}
/* end R813 */

/* ════════════════════════════════════════════════════════════════════════
   R365 — product-page dosage line ("strength · form") +1.5px on DESKTOP only.
   R307 (html body .pp-dosage = 0.95rem ≈ 15.2px) is global, so it also drives
   the mobile size; this desktop-scoped, id-prefixed override wins above 1024px
   and bumps it to ~16.7px. Phones/tablets keep R307's size untouched. */
@media (min-width: 1024px) {
    html body #pp-root .pp-dosage {
        font-size: calc(0.95rem + 1.5px) !important;
    }
}
/* end R365 */

/* ════════════════════════════════════════════════════════════════════════
   R367 — product-page "Related Research" hub (internal-link block → matching blog
   guide(s) + reconstitution calculator + COA how-to). Light theme to match the
   product page (#fafafa bg, white cards, teal accent). SEO: routes crawl/link
   equity to product pages; UX: real next steps for researchers. */
#pp-root .pp-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 12px;
}
#pp-root .pp-related-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: #ffffff;
    border: 1px solid rgba(20, 184, 166, 0.22);
    border-radius: 12px;
    text-decoration: none;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
#pp-root .pp-related-card:hover {
    border-color: rgba(20, 184, 166, 0.55);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(20, 184, 166, 0.13);
}
#pp-root .pp-related-icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(20, 184, 166, 0.10);
    color: #0d9488;
    font-size: 1.05rem;
}
#pp-root .pp-related-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1 1 auto;
}
#pp-root .pp-related-title {
    color: var(--text);
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.25;
}
#pp-root .pp-related-desc {
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.35;
}
#pp-root .pp-related-arrow {
    flex: 0 0 auto;
    color: #9aa0a6;
    font-size: 0.85rem;
    transition: transform 0.2s ease, color 0.2s ease;
}
#pp-root .pp-related-card:hover .pp-related-arrow {
    color: #0d9488;
    transform: translateX(3px);
}
@media (prefers-reduced-motion: reduce) {
    #pp-root .pp-related-card,
    #pp-root .pp-related-arrow { transition: none; }
    #pp-root .pp-related-card:hover { transform: none; }
}
/* end R367 */


/* ============================================================
   R380 · Accessibility quick-wins (Master Scan 2026-06-26)
   (1) Visible keyboard focus ring (WCAG 2.4.11). #0d9488 clears >=3:1 on BOTH
       the dark theme (#06070A ~5:1) AND the cream sections (#fafafa ~3.6:1);
       outline-offset keeps the ring on the page bg even for teal controls.
       :focus-visible = keyboard only -> NO change on mouse click.
   (2) 320px / 400%-zoom reflow (WCAG 1.4.10): wide blog/legal tables + the hero
       quality-tab strip scroll instead of clipping. Desktop untouched (<=640px).
   ============================================================ */
html body a:focus-visible,
html body button:focus-visible,
html body input:focus-visible,
html body select:focus-visible,
html body textarea:focus-visible,
html body summary:focus-visible,
html body [role="button"]:focus-visible,
html body [role="tab"]:focus-visible,
html body [tabindex]:focus-visible {
    outline: 3px solid #0d9488 !important;
    outline-offset: 2px !important;
}
@media (max-width: 640px) {
    html body .blog-content table,
    html body .legal-content table {
        display: block;
        width: max-content;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    html body #quality-tabs,
    html body .quality-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
    }
}


/* ============================================================
   R382 — Inline cart editing on the checkout Order Summary.
   The review line items (#review-items-list) carry a −/+ qty
   stepper + a remove button. Scoped under the #review-items-list
   id so these beat the #main-content Inter normalizer (per the
   CLAUDE.md cascade rule). Keyboard focus rings come from R380.
   ============================================================ */
#review-items-list .review-item-qtyctl {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}
#review-items-list .riq-btn {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #d6dce4;
    border-radius: 7px;
    background: #fff;
    color: #0f172a;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
#review-items-list .riq-btn:hover:not(:disabled) {
    background: #0d9488;
    border-color: #0d9488;
    color: #fff;
}
#review-items-list .riq-btn:active:not(:disabled) {
    transform: scale(0.94);
}
#review-items-list .riq-btn:disabled {
    opacity: .4;
    cursor: default;
}
#review-items-list .riq-num {
    min-width: 24px;
    text-align: center;
    font-weight: 700;
    font-size: 14px;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}
#review-items-list .riq-remove {
    margin-left: 2px;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: none;
    color: #9aa3af;
    font-size: 13px;
    cursor: pointer;
    border-radius: 7px;
    transition: color .15s ease, background .15s ease;
}
#review-items-list .riq-remove:hover {
    color: #ef4444;
    background: #fef2f2;
}
#review-items-list .review-empty {
    padding: 22px 14px;
    text-align: center;
    color: #64748b;
    font-size: 14px;
    line-height: 1.5;
}
#review-items-list .review-empty i {
    color: #94a3b8;
    margin-right: 4px;
}
#review-items-list .review-empty a {
    color: #0d9488;
    font-weight: 600;
    text-decoration: underline;
}
/* Continue CTA disabled state when the cart is emptied via the inline editor */
.review-cta.is-disabled,
#co-mcta-btn.is-disabled {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
    #review-items-list .riq-btn,
    #review-items-list .riq-remove { transition: none; }
    #review-items-list .riq-btn:active:not(:disabled) { transform: none; }
}


/* R383 (supersedes R382b) — the 40×44 steppers were too big/clunky for the
   order-summary box. Compact 30px squares that sit neatly in the row, with
   tighter spacing. !important overrides the global 44px button min-height so
   they don't snap back to slivers. */
@media (max-width: 640px) {
    #review-items-list .review-item-qtyctl { gap: 6px; margin-top: 7px; }
    #review-items-list .riq-btn,
    #review-items-list .riq-remove {
        width: 30px !important;
        height: 30px !important;
        min-height: 30px !important;
        font-size: 11px !important;
        border-radius: 7px !important;
    }
    #review-items-list .riq-remove { margin-left: 2px; font-size: 12px !important; }
    #review-items-list .riq-num { min-width: 20px; font-size: 14px; }
}


/* ============================================================
   R383 — (1) cart-footer "checkout panel" contrast, (2) merged
   Agreements & Signature section styling on checkout.
   ============================================================ */

/* (2) CART: make the subtotal + discounts + Proceed-to-Checkout panel read
   as its own "price & checkout" zone instead of blending into the white cart.
   Faint mint fill + teal-tinted border + a subtle lift. Text inside is
   untouched (dark subtotal/total, green discounts) so it stays just as legible. */
html body .cart-summary-block {
    background: #eef9f4 !important;
    border: 1px solid #b2ddcf !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 8px rgba(13, 148, 136, 0.10) !important;
}

/* (1) CHECKOUT: the signature now lives in the same card as the agreements.
   A hairline divider separates the two halves so the card still reads as
   "agreements, then sign". */
html body .checkout-signature {
    margin-top: 20px !important;
    padding-top: 18px;
    border-top: 1px solid var(--border-light, #e5e7eb);
}
/* The drawing pad is the default signing method — give it a clear "sign here"
   treatment (dashed pad, teal focus) and a confident label. */
html body #sig-draw-wrap > label {
    color: #0f766e;
    font-weight: 700;
}
html body #sig-draw-wrap #signature-pad {
    height: 132px !important;
    background: #fcfdfe !important;
    border: 2px dashed #b8c4cf !important;
    border-radius: 10px !important;
}
html body #sig-draw-wrap #signature-pad:hover {
    border-color: #0d9488 !important;
}
/* The type-instead toggle reads as a clear, understated link. */
html body .sig-mode-toggle {
    display: inline-block;
    background: none;
    border: none;
    padding: 6px 0;
    margin-top: 12px;
    color: #0d9488;
    font-weight: 600;
    font-size: 0.86rem;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}
html body .sig-mode-toggle:hover { color: #0a6e64; }


/* ============================================================
   R385 — checkout "Agreements & Signature" polish:
   (1) move each agreement's expand chevron to the LEFT of the row
       (like the reference) and drop the "Tap to read" label;
   (2) remove the divider line between the agreements/checkbox and
       the signature (R383 added a border-top — take it back off).
   ============================================================ */
/* (1) chevron leads the row; "Tap to read" label hidden. The summary is a
   flexbox, so order:-1 floats the (DOM-last) chevron to the front without
   touching the markup. Its open-state rotate/colour rules still apply. */
html body .checkout-legal-summary .legal-chevron { order: -1; margin-right: 2px; }
html body .checkout-legal-summary .legal-summary-meta { display: none !important; }

/* (2) no line above the signature — just clean spacing. */
html body .checkout-signature {
    border-top: none !important;
    padding-top: 0 !important;
    margin-top: 16px !important;
}


/* ============================================================
   R386 — order-summary micro-tweaks:
   (1) the minus button a touch smaller than the plus (it's the
       first .riq-btn in each qty control);
   (2) nudge the subtotal / discount / shipping rows down 2px —
       NOT the items above or the Total row below.
   ============================================================ */
/* (1) desktop: minus (22px) < plus (26px) */
#review-items-list .review-item-qtyctl .riq-btn:first-child {
    width: 22px;
    height: 22px;
    min-height: 22px;
    font-size: 10px;
}
/* (1) mobile: minus (26px) < plus (30px) — !important to beat the R383 mobile rule */
@media (max-width: 640px) {
    #review-items-list .review-item-qtyctl .riq-btn:first-child {
        width: 26px !important;
        height: 26px !important;
        min-height: 26px !important;
        font-size: 10px !important;
    }
}
/* (2) lower only the subtotal/discount/shipping rows by 2px (Total untouched) */
#review-summary-rows .rs-row:not(.rs-total) {
    transform: translateY(3.5px);
}


/* ============================================================
   R387 — shrink BOTH qty buttons a hair, keeping the minus-smaller-
   than-plus proportion (the 4px gap). Desktop plus 26→23 / minus 22→19;
   mobile plus 30→27 / minus 26→23. Supersedes R382/R383/R386 by source
   order at equal-or-greater specificity.
   ============================================================ */
#review-items-list .review-item-qtyctl .riq-btn {
    width: 23px;
    height: 23px;
    min-height: 23px;
}
#review-items-list .review-item-qtyctl .riq-btn:first-child {
    width: 19px;
    height: 19px;
    min-height: 19px;
}
@media (max-width: 640px) {
    #review-items-list .review-item-qtyctl .riq-btn {
        width: 27px !important;
        height: 27px !important;
        min-height: 27px !important;
    }
    #review-items-list .review-item-qtyctl .riq-btn:first-child {
        width: 23px !important;
        height: 23px !important;
        min-height: 23px !important;
    }
}


/* ============================================================
   R388 — qty stepper restyle into a single connected "pill"
   (− │ n │ +) with full-height dividers, like the reference.
   BOTH buttons are now EQUAL size, matching the previous MINUS
   footprint (desktop 19px / mobile 23px). Fully supersedes the
   separate-rounded-box look from R382 / R383 / R386 / R387.
   ============================================================ */
#review-items-list .review-item-qtyctl {
    display: inline-flex !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: max-content !important;
    background: #ffffff !important;
    border: 1px solid #d6dce4 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    margin-top: 8px;
}
/* both − and + segments: equal, no individual border/radius/fill */
#review-items-list .review-item-qtyctl .riq-btn,
#review-items-list .review-item-qtyctl .riq-btn:first-child {
    width: 19px !important;
    height: 19px !important;
    min-height: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #1e293b !important;
    font-size: 10px !important;
}
#review-items-list .review-item-qtyctl .riq-btn:hover:not(:disabled) {
    background: #f1f5f9 !important;
    color: #0d9488 !important;
}
#review-items-list .review-item-qtyctl .riq-btn:active:not(:disabled) {
    transform: none !important;
    background: #e2e8f0 !important;
}
/* two full-height dividers: after the minus, and after the number */
#review-items-list .review-item-qtyctl .riq-btn:first-child {
    border-right: 1px solid #d6dce4 !important;
}
#review-items-list .review-item-qtyctl .riq-num {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-right: 1px solid #d6dce4 !important;
    min-width: 26px !important;
    padding: 0 6px !important;
    font-size: 13px !important;
    font-weight: 700;
    color: #0f172a;
}
@media (max-width: 640px) {
    #review-items-list .review-item-qtyctl .riq-btn,
    #review-items-list .review-item-qtyctl .riq-btn:first-child {
        width: 23px !important;
        height: 23px !important;
        font-size: 11px !important;
    }
    #review-items-list .review-item-qtyctl .riq-num { min-width: 30px !important; font-size: 14px !important; }
}


/* R388b — make the qty pill a single uniform height so the buttons and the
   number share the same vertical extent (the number segment was taller than
   the 19px buttons, leaving them top-aligned + short dividers). Pill height =
   the button size; children fill it 100%, so dividers span the full height. */
#review-items-list .review-item-qtyctl { height: 19px !important; }
#review-items-list .review-item-qtyctl .riq-btn,
#review-items-list .review-item-qtyctl .riq-btn:first-child {
    height: 100% !important;
}
#review-items-list .review-item-qtyctl .riq-num {
    height: 100% !important;
    line-height: 1 !important;
}
@media (max-width: 640px) {
    #review-items-list .review-item-qtyctl { height: 23px !important; }
}


/* ============================================================
   R389 — smoother qty pill: drop the hard segment dividers, use a
   fully-rounded capsule, give the elements a little air, and bump
   the whole control a hair bigger. Overrides R388 / R388b.
   ============================================================ */
#review-items-list .review-item-qtyctl {
    height: auto !important;
    align-items: center !important;
    gap: 2px !important;
    padding: 3px 8px !important;
    background: #ffffff !important;
    border: 1px solid #dbe0e6 !important;
    border-radius: 999px !important;
    overflow: visible !important;
    width: max-content !important;
}
/* both buttons: equal, no dividers, circular hover, a hair bigger */
#review-items-list .review-item-qtyctl .riq-btn,
#review-items-list .review-item-qtyctl .riq-btn:first-child {
    width: 22px !important;
    height: 22px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: #1e293b !important;
    font-size: 11px !important;
}
#review-items-list .review-item-qtyctl .riq-btn:hover:not(:disabled) {
    background: #f1f5f9 !important;
    color: #0d9488 !important;
}
#review-items-list .review-item-qtyctl .riq-num {
    height: auto !important;
    border: none !important;
    min-width: 26px !important;
    padding: 0 4px !important;
    font-size: 14px !important;
    font-weight: 700;
    color: #0f172a;
}
@media (max-width: 640px) {
    #review-items-list .review-item-qtyctl .riq-btn,
    #review-items-list .review-item-qtyctl .riq-btn:first-child {
        width: 26px !important;
        height: 26px !important;
        font-size: 12px !important;
    }
    #review-items-list .review-item-qtyctl .riq-num { min-width: 28px !important; font-size: 15px !important; }
}


/* R390 — muted "(before savings)" hint on the order-summary subtotal so the
   pre-discount number doesn't read as the final price. */
#review-summary-rows .rs-sub-hint {
    color: #94a3b8;
    font-size: 0.78em;
    font-weight: 500;
    white-space: nowrap;
}


/* ============================================================
   R391 — Order-summary subtotal strikethrough (pre-discount)
   When discounts apply, strike through the (higher) subtotal so
   it does not read as the final price. The green savings rows +
   bold Total below carry the real amount. Replaces the R390 label.
   ============================================================ */
#review-summary-rows .rs-sub-strike {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(148,163,184,.9);
  color: #94a3b8;
}


/* ============================================================
   R392 — Mobile announcement bar: trim vertical height
   The top promo bar wraps to 3 lines on phones and rendered ~72px
   tall (10px top/bottom). The R159 instrument theme pins it via
   `html body #announcement-bar{ padding:10px 20px !important }`
   (styles.css ~57346), which outranks the older class-based mobile
   rules (~39517/39721) — so plain overrides were silently ignored.
   Match that selector strength + !important to trim the vertical
   padding on phones only. Desktop (>600px) keeps 10px, untouched.
   ============================================================ */
@media (max-width: 600px) {
  html body #announcement-bar.announcement-bar {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }
}


/* ============================================================
   R393 — Mobile: raise the hero content cluster up 16px
   Shifts the whole #hero content block (proof stat -> vials ->
   lede -> Shop Catalog CTA -> trust row) up 16px as ONE unit, so
   every element keeps its relative position + proportions. Uses a
   transform on the .hero-content wrapper (layout-neutral): the
   marquee strip above #hero and the section below stay put, and it
   composes cleanly with the GSAP load timeline + R159 parallax that
   drive the child transforms. MOBILE ONLY. (4px R393 + 12px raise.)
   ============================================================ */
@media (max-width: 600px) {
  #hero .hero-content {
    transform: translateY(-16px);
  }
}


/* ============================================================
   R394 — Checkout payment rails: Zelle / Cash App live manual
   tiles + Intuit / Link Money "Coming Soon" disabled treatment.
   New per-method icon tints + the disabled-tile look.
   ============================================================ */
html body .payment-method-card.pmc-v2 .pmc-icon-zelle {
  background: linear-gradient(135deg, rgba(109,30,212,0.18), rgba(109,30,212,0.05)) !important;
  color: #6d1ed4 !important;
  font-weight: 800 !important;
}
html body .payment-method-card.pmc-v2 .pmc-icon-cashapp {
  background: linear-gradient(135deg, rgba(0,200,70,0.18), rgba(0,200,70,0.05)) !important;
  color: #00b843 !important;
}
html body .payment-method-card.pmc-v2 .pmc-icon-bank {
  background: linear-gradient(135deg, rgba(20,184,166,0.16), rgba(20,184,166,0.05)) !important;
  color: var(--accent) !important;
}
/* "Coming Soon" disabled tiles (Intuit, Link Money) */
html body .payment-method-card.pmc-v2.pmc-disabled {
  cursor: not-allowed !important;
  opacity: 0.6 !important;
  background: #f6f8f9 !important;
  border-style: dashed !important;
  border-color: #cdd6dd !important;
  pointer-events: none !important;
  box-shadow: none !important;
}
html body .payment-method-card.pmc-v2.pmc-disabled:hover {
  transform: none !important;
  box-shadow: none !important;
  border-color: #cdd6dd !important;
  background: #f6f8f9 !important;
}
html body .payment-method-card.pmc-v2.pmc-disabled .pmc-arrow i { color: #94a3b8 !important; }
html body .pmc-soon {
  display: inline-block;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5b6b78;
  background: rgba(100,116,139,0.12);
  border: 1px solid rgba(100,116,139,0.22);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}
html body .cs-icon-zelle { color: #6d1ed4 !important; }
html body .cs-icon-cashapp { color: #00b843 !important; }


/* ============================================================================
   R397 — Checkout payment panes: readable intros + receipt-style "pay to"
   details cards (Zelle / Cash App), Cash App deep-link button, a distinct
   "Required" reference callout, and a simplified premium card (Intuit) pane.
   Light theme (checkout). Appended tail block; desktop + mobile parity.
   All text colors WCAG-checked >= 4.5:1 on their backgrounds.
   ============================================================================ */

/* --- 1. Intro copy: bigger, near-ink, heavier (was 0.88rem / --text-muted,
       which vanished into the grey). Wins the earlier same-specificity rule
       by source order. --- */
html body .payment-pane-section .pp-intro {
    color: #2b2b31;
    font-size: 0.98rem;
    line-height: 1.62;
    font-weight: 450;
    margin: 0 0 16px 0;
}
html body .payment-pane-section .pp-intro strong { color: #0a0a0a; font-weight: 700; }

/* --- 2. Receipt-style "pay to" details card (phone/cashtag . name . amount) --- */
html body .pp-paydetails {
    --pd-accent: #14b8a6;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.10);
    border-radius: 14px;
    padding: 2px 18px;
    margin: 0 0 12px 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    position: relative;
    overflow: hidden;
}
html body .pp-paydetails::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--pd-accent);
}
html body .pp-paydetails.pd-zelle   { --pd-accent: #6d1ed4; }
html body .pp-paydetails.pd-cashapp { --pd-accent: #00b843; }

html body .pp-paydetails .ppd-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
html body .pp-paydetails .ppd-row:last-child { border-bottom: 0; }
html body .pp-paydetails .ppd-key {
    font-size: 0.7rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    font-weight: 700;
    color: #6b6b73;
    white-space: nowrap;
    flex-shrink: 0;
}
html body .pp-paydetails .ppd-val {
    font-size: 1.02rem;
    font-weight: 700;
    color: #0a0a0a;
    text-align: right;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    word-break: break-word;
}
html body .pp-paydetails .ppd-mono {
    font-family: 'JetBrains Mono','SFMono-Regular','Consolas',monospace;
    letter-spacing: 0.005em;
    color: var(--pd-accent);
    font-size: 1.04rem;
    font-weight: 700;
}
html body .pp-paydetails.pd-cashapp .ppd-mono { color: #067a3a; } /* darker green for AA contrast */
html body .pp-paydetails .ppd-row-amount { padding-top: 14px; padding-bottom: 6px; }
html body .pp-paydetails .ppd-amount {
    font-family: 'JetBrains Mono','SFMono-Regular','Consolas',monospace;
    font-size: 1.3rem;
    font-weight: 800;
    color: #0a0a0a;
    letter-spacing: 0.01em;
}
html body .pp-paydetails .ppd-copy {
    background: rgba(0,0,0,0.045);
    border: 1px solid rgba(0,0,0,0.10);
    color: #3a3a42;
    width: 30px; height: 30px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-size: 0.82rem;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
html body .pp-paydetails .ppd-copy:hover { background: var(--pd-accent); border-color: var(--pd-accent); color: #fff; }
html body .pp-paydetails.pd-cashapp .ppd-copy:hover { background: #067a3a; border-color: #067a3a; }
html body .pp-paydetails .ppd-copy:active { transform: scale(0.9); }

/* --- 3. "Required" reference callout — dashed, neutral, method-agnostic;
       distinct from the details card AND the amber warning note. --- */
html body .pp-ref-callout {
    background: #f7f7f8;
    border: 1px dashed rgba(0,0,0,0.20);
    border-radius: 12px;
    padding: 13px 16px;
    margin: 0 0 12px 0;
}
html body .pp-ref-callout .ppr-head {
    font-size: 0.71rem; letter-spacing: 0.11em; text-transform: uppercase;
    font-weight: 700; color: #4a4a52;
    display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
html body .pp-ref-callout .ppr-head > i { color: #9a9aa2; }
html body .pp-ref-callout .ppr-req {
    margin-left: auto;
    background: #b91c1c; color: #fff;
    font-size: 0.6rem; letter-spacing: 0.07em; font-weight: 800;
    padding: 3px 9px; border-radius: 999px; text-transform: uppercase;
}
html body .pp-ref-callout .ppr-body {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
html body .pp-ref-callout .ppr-code {
    font-family: 'JetBrains Mono','SFMono-Regular','Consolas',monospace;
    font-size: 1.16rem; font-weight: 800; letter-spacing: 0.05em; color: #0a0a0a;
    word-break: break-all;
}
html body .pp-ref-callout .ppr-copy {
    background: #0a0a0a; color: #fff; border: 0;
    padding: 9px 15px; border-radius: 9px; cursor: pointer;
    font-family: 'Inter', sans-serif; font-size: 0.8rem; font-weight: 700;
    display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
    transition: transform 0.14s cubic-bezier(0.23,1,0.32,1), background 0.15s ease;
}
html body .pp-ref-callout .ppr-copy:hover { background: #14b8a6; }
html body .pp-ref-callout .ppr-copy:active { transform: scale(0.96); }
html body .pp-ref-callout .ppr-hint {
    margin: 10px 0 0 0; font-size: 0.8rem; color: #6b6b73; line-height: 1.5;
}

/* --- 4. "Open ___" deep-link button (Cash App) --- */
html body .pp-open-btn {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    width: 100%;
    text-decoration: none;
    padding: 14px 18px;
    border-radius: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 0.98rem; font-weight: 700;
    color: #fff !important;
    margin: 0 0 12px 0;
    border: 0;
    transition: transform 0.15s cubic-bezier(0.23,1,0.32,1), box-shadow 0.2s ease, filter 0.2s ease;
}
html body .pp-open-cashapp { background: #00b843; box-shadow: 0 6px 18px rgba(0,180,67,0.30); }
html body .pp-open-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
html body .pp-open-btn:active { transform: scale(0.985); }

/* --- 5. Intuit card pane: 3-step visual + card-brands row + premium CTA --- */
html body #payment-pane-intuit .pp-steps {
    display: flex; align-items: stretch; justify-content: space-between; gap: 7px;
    margin: 4px 0 16px 0;
}
html body #payment-pane-intuit .pp-step {
    flex: 1; min-width: 0;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.09);
    border-radius: 12px;
    padding: 15px 8px 12px;
    text-align: center;
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
html body #payment-pane-intuit .pp-step-num {
    position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
    width: 20px; height: 20px; border-radius: 50%;
    background: #047857; color: #fff;
    font-size: 0.66rem; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(4,120,87,0.40);
}
html body #payment-pane-intuit .pp-step-ico {
    width: 38px; height: 38px; border-radius: 10px;
    background: rgba(16,185,129,0.10); color: #0c7c5d;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
}
html body #payment-pane-intuit .pp-step-txt {
    font-size: 0.76rem; font-weight: 600; color: #2b2b31; line-height: 1.3;
}
html body #payment-pane-intuit .pp-step-sep {
    display: flex; align-items: center; color: #cfcfd6; font-size: 0.7rem;
    flex-shrink: 0;
}
html body #payment-pane-intuit .pp-cardbrands {
    display: flex; align-items: center; gap: 13px;
    padding: 11px 15px; margin: 0 0 16px 0;
    background: #f7f7f8; border: 1px solid rgba(0,0,0,0.06); border-radius: 10px;
}
html body #payment-pane-intuit .pp-cardbrands i { font-size: 1.7rem; line-height: 1; }
html body #payment-pane-intuit .pp-cardbrands .fa-cc-visa { color: #1a1f71; }
html body #payment-pane-intuit .pp-cardbrands .fa-cc-mastercard { color: #eb001b; }
html body #payment-pane-intuit .pp-cardbrands .fa-cc-amex { color: #006fcf; }
html body #payment-pane-intuit .pp-cardbrands .fa-cc-discover { color: #d95800; }
html body #payment-pane-intuit .pp-cardbrands .fa-apple-pay { color: #000; }
html body #payment-pane-intuit .pp-cardbrands-note {
    margin-left: auto; font-size: 0.72rem; color: #6b6b73; font-weight: 600; text-align: right; line-height: 1.3;
}
html body #payment-pane-intuit .pp-intuit-btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(180deg, #2a2a33 0%, #141419 52%, #050506 100%) !important;
    border: 0 !important;
    border-radius: 15px !important;
    color: #fff !important;
    font-size: 1.08rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.005em !important;
    line-height: 1.25 !important;
    padding: 21px 24px !important;
    min-height: 64px;
    box-shadow:
        0 12px 30px rgba(0,0,0,0.32),
        0 3px 8px rgba(0,0,0,0.22),
        inset 0 1px 0 rgba(255,255,255,0.16),
        inset 0 0 0 1px rgba(255,255,255,0.05) !important;
    transition: transform 0.22s cubic-bezier(0.23,1,0.32,1), box-shadow 0.28s ease !important;
}
/* one-pass diagonal sheen on hover (off-canvas at rest → clean, calm button) */
html body #payment-pane-intuit .pp-intuit-btn::before {
    content: "";
    position: absolute; top: 0; bottom: 0; left: -65%; width: 48%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,0.16), transparent);
    transform: skewX(-18deg);
    z-index: 1; pointer-events: none;
    transition: left 0.7s cubic-bezier(0.23,1,0.32,1);
}
html body #payment-pane-intuit .pp-intuit-btn > * { position: relative; z-index: 2; }
html body #payment-pane-intuit .pp-intuit-btn i { font-size: 1.05rem; }
html body #payment-pane-intuit .pp-intuit-btn:hover {
    transform: translateY(-2px);
    box-shadow:
        0 18px 40px rgba(0,0,0,0.36),
        0 0 0 1px rgba(255,255,255,0.08),
        inset 0 1px 0 rgba(255,255,255,0.18) !important;
}
html body #payment-pane-intuit .pp-intuit-btn:hover::before { left: 125%; }
html body #payment-pane-intuit .pp-intuit-btn:active { transform: translateY(-1px) scale(0.99); }
@media (max-width: 540px) {
    html body #payment-pane-intuit .pp-intuit-btn { font-size: 0.96rem !important; padding: 19px 16px !important; min-height: 60px; }
    /* longer "...Payment Link" label needs the full width on phones */
    html body #payment-pane-intuit .pp-intuit-btn i { display: none; }
}
html body #payment-pane-intuit .pp-postnote {
    margin: 12px 0 0 0; font-size: 0.8rem; color: #6b6b73; line-height: 1.55; text-align: center;
}
html body #payment-pane-intuit .pp-postnote > i { color: #14b8a6; margin-right: 5px; }

/* --- 6. Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
    html body .pp-open-btn,
    html body .pp-ref-callout .ppr-copy,
    html body .pp-paydetails .ppd-copy,
    html body #payment-pane-intuit .pp-intuit-btn { transition: none !important; }
    html body .pp-open-btn:hover,
    html body #payment-pane-intuit .pp-intuit-btn:hover { transform: none !important; }
    html body #payment-pane-intuit .pp-intuit-btn::before { display: none !important; }
}

/* --- 7. Mobile parity --- */
@media (max-width: 540px) {
    html body .payment-pane-section .pp-intro { font-size: 0.92rem !important; }
    html body .pp-paydetails { padding: 2px 14px; }
    html body .pp-paydetails .ppd-key { font-size: 0.63rem; letter-spacing: 0.07em; }
    html body .pp-paydetails .ppd-val { font-size: 0.95rem; }
    html body .pp-paydetails .ppd-mono { font-size: 0.97rem; }
    html body .pp-paydetails .ppd-amount { font-size: 1.2rem; }
    html body .pp-ref-callout .ppr-code { font-size: 0.92rem; letter-spacing: 0.03em; white-space: nowrap; }
    html body .pp-ref-callout .ppr-copy { padding: 8px 12px; }
    html body #payment-pane-intuit .pp-steps { gap: 5px; }
    html body #payment-pane-intuit .pp-step-sep { display: none; }
    html body #payment-pane-intuit .pp-step { padding: 14px 5px 10px; gap: 6px; }
    html body #payment-pane-intuit .pp-step-ico { width: 34px; height: 34px; font-size: 0.9rem; }
    html body #payment-pane-intuit .pp-step-txt { font-size: 0.7rem; }
    html body #payment-pane-intuit .pp-cardbrands { gap: 9px; padding: 10px 12px; flex-wrap: wrap; }
    html body #payment-pane-intuit .pp-cardbrands i { font-size: 1.5rem; }
    html body #payment-pane-intuit .pp-cardbrands-note { font-size: 0.65rem; width: 100%; text-align: left; margin-left: 0; margin-top: 2px; }
}
/* ============================ end R397 ============================ */


/* ============================================================================
   R399 — Venmo pane restructured to match the Cash App pane (receipt card +
   Required note callout + branded "Open …" button + amber warning + confirm).
   Adds the Venmo brand accent + neutralizes the old Venmo-only special-casing
   (mobile flex-reorder from R773 + the R799 desktop rule that HID its warning)
   so it now flows in plain source order exactly like Cash App.
   ============================================================================ */

/* Venmo brand accent on the receipt card (bar decorative; text darkened for AA) */
html body .pp-paydetails.pd-venmo { --pd-accent: #3D95CE; }
html body .pp-paydetails.pd-venmo .ppd-mono { color: #0d6ab8; }
html body .pp-paydetails.pd-venmo .ppd-copy:hover { background: #0d6ab8; border-color: #0d6ab8; }

/* Venmo-blue "Open Venmo to pay" button (matches .pp-open-cashapp pattern) */
html body .pp-open-venmo { background: #0a7ae6; box-shadow: 0 6px 18px rgba(10,122,230,0.30); }

/* Neutralize the old Venmo special-casing so it behaves like Cash App:
   (a) kill the mobile flex+order reorder (children now flow in source order);
       equal-specificity + later source beats the R773 media rule at all widths. */
html body #payment-pane-venmo[style*="block"] { display: block !important; }
/* (b) un-hide the warning at ALL widths — venmo's warning was dropped by BOTH
   a mobile rule (<=768, R773f) AND a desktop rule (>=769, R799). Unconditional
   + later source beats both so venmo shows the F&F warning like Cash App. */
html body #payment-pane-venmo .payment-network-warning { display: flex !important; }
/* ============================ end R399 ============================ */


/* ============================================================================
   R400 — Payment pane polish: brand-tint the Zelle/Cash App header icons
   (Zelle "Z" was rendering black — the <strong> overrode the purple), and give
   the whole payment-method pane a distinct soft-teal box so it stands out from
   the grey checkout sections while staying fully readable.
   ============================================================================ */

/* Zelle header icon → brand purple (box tint like Venmo's blue + purple glyph).
   The <strong> needs an explicit color: a base rule was painting it #0a0a0a. */
html body .checkout-section-header .cs-icon.cs-icon-zelle {
    background: linear-gradient(180deg, rgba(109,30,212,0.12), rgba(109,30,212,0.04));
    color: #6d1ed4 !important;
}
html body .checkout-section-header .cs-icon.cs-icon-zelle strong { color: #6d1ed4 !important; }

/* Cash App header icon → brand-green tint + AA-readable glyph (was a faint
   #00b843 on an untinted box). Kept consistent with the Venmo/Card icons. */
html body .checkout-section-header .cs-icon.cs-icon-cashapp {
    background: linear-gradient(180deg, rgba(0,184,67,0.12), rgba(0,184,67,0.04));
    color: #067a3a !important;
}

/* The active payment-method pane box → soft teal so it reads as the place you
   act, distinct from the #fafafa grey sections. Text stays near-ink (>10:1);
   the inner white/grey cards still contrast cleanly on top. */
html body .payment-pane-section {
    background: #ffffff !important;
    border: 1px solid rgba(20,184,166,0.30) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05) !important;
}
/* ============================ end R400 ============================ */


/* ============================================================================
   R402 — Remove the "Order Recap" card from the payment (choose-how-to-pay)
   screen (owner). Hide the right column and collapse the grid to ONE centered
   column so the payment methods don't leave a dead gap. The recap elements stay
   in the DOM (renderCheckoutReview still writes to #payment-recap-* harmlessly).
   ============================================================================ */
html body .checkout-payment-right { display: none !important; }
html body .checkout-payment-grid {
    grid-template-columns: 1fr !important;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}
/* ============================ end R402 ============================ */


/* ============================================================================
   R403 — Merge the "payment note / reference" INTO the receipt card so it reads
   as ONE unified card (owner) for Zelle / Cash App / Venmo. The old standalone
   dashed .pp-ref-callout box is gone from those panes; the note is now a section
   inside .pp-paydetails, divided from the amount row by the same hairline as the
   other rows.
   ============================================================================ */
html body .pp-paydetails .ppd-note { padding: 14px 0 4px 0; }
html body .pp-paydetails .ppd-note-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-bottom: 11px;
}
html body .pp-paydetails .ppd-note .ppr-req {
    background: #b91c1c; color: #fff;
    font-size: 0.6rem; letter-spacing: 0.07em; font-weight: 800;
    padding: 3px 9px; border-radius: 999px; text-transform: uppercase;
}
html body .pp-paydetails .ppd-note-body {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
html body .pp-paydetails .ppd-note .ppr-code {
    font-family: 'JetBrains Mono','SFMono-Regular','Consolas',monospace;
    font-size: 1.16rem; font-weight: 800; letter-spacing: 0.05em; color: #0a0a0a;
    word-break: break-all;
}
html body .pp-paydetails .ppd-note .ppr-copy {
    background: #0a0a0a; color: #fff; border: 0;
    padding: 9px 15px; border-radius: 9px; cursor: pointer;
    font-family: 'Inter', sans-serif; font-size: 0.8rem; font-weight: 700;
    display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
    transition: transform 0.14s cubic-bezier(0.23,1,0.32,1), background 0.15s ease;
}
html body .pp-paydetails .ppd-note .ppr-copy:hover { background: #14b8a6; }
html body .pp-paydetails .ppd-note .ppr-copy:active { transform: scale(0.96); }
html body .pp-paydetails .ppd-note .ppr-hint { margin: 10px 0 0 0; font-size: 0.8rem; color: #6b6b73; line-height: 1.5; }
/* The amount row is no longer the visual last row — its hairline is now the
   divider before the note, so give it even bottom spacing (was 6px card-bottom). */
html body .pp-paydetails .ppd-row-amount { padding-bottom: 13px; }
@media (prefers-reduced-motion: reduce) {
    html body .pp-paydetails .ppd-note .ppr-copy { transition: none !important; }
}
@media (max-width: 540px) {
    html body .pp-paydetails .ppd-note .ppr-code { font-size: 0.92rem; letter-spacing: 0.03em; white-space: nowrap; }
    html body .pp-paydetails .ppd-note .ppr-copy { padding: 8px 12px; }
}
/* ============================ end R403 ============================ */


/* ============================================================================
   R404 — Removed the "Total Due" hero card above the payment panes (owner);
   each pane now shows its own total. This adds a "Total due" line to the CRYPTO
   pane (which had none), matching the white receipt-card look of the others.
   #payment-total-crypto moved here — selectPaymentMethod() still fills it.
   ============================================================================ */
html body #payment-pane-crypto .crypto-total {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding: 14px 18px; margin: 0 0 16px 0;
    background: #fff; border: 1px solid rgba(0,0,0,0.10); border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
html body #payment-pane-crypto .crypto-total-label {
    font-size: 0.7rem; letter-spacing: 0.13em; text-transform: uppercase; font-weight: 700; color: #6b6b73;
}
html body #payment-pane-crypto .crypto-total-amount {
    font-family: 'JetBrains Mono','SFMono-Regular','Consolas',monospace;
    font-size: 1.5rem; font-weight: 800; color: #0a0a0a; letter-spacing: 0.01em;
}
/* ============================ end R404 ============================ */


/* ============================================================================
   R405 — Accordion payment selector. Compact one-line rows; the selected
   method expands its details in place (the moved-in pane) while the others
   collapse. Driven by .acc-item.is-open (toggled by selectPaymentMethod).
   ============================================================================ */

/* Strip the default .checkout-section card so each .acc-item is the card. */
html body .pay-accordion-section {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
html body .pay-accordion { display: flex; flex-direction: column; gap: 10px; }

html body .pay-accordion .acc-item {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.10);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color 0.18s ease, box-shadow 0.2s ease;
}
html body .pay-accordion .acc-item.is-open {
    border-color: rgba(20,184,166,0.55);
    box-shadow: 0 6px 20px rgba(20,184,166,0.10);
}

/* Row (a <button>, reset then rebuilt) */
html body .pay-accordion .acc-row {
    all: unset;
    box-sizing: border-box;
    width: 100%;
    display: flex; align-items: center; gap: 13px;
    padding: 15px 16px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
html body .pay-accordion .acc-row:hover { background: rgba(0,0,0,0.015); }
html body .pay-accordion .acc-row:focus-visible { outline: 2px solid #14b8a6; outline-offset: -3px; border-radius: 14px; }

html body .pay-accordion .acc-chip {
    width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 19px; font-weight: 700; line-height: 1;
}
html body .pay-accordion .acc-chip svg { width: 20px; height: 20px; }
html body .pay-accordion .acc-name {
    flex: 1; min-width: 0;
    font-family: 'Inter', sans-serif; font-size: 1rem; font-weight: 600; color: #0a0a0a;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html body .pay-accordion .acc-tag {
    font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 700;
    padding: 4px 10px; border-radius: 999px; flex-shrink: 0; white-space: nowrap;
}
html body .pay-accordion .acc-tag-accent { color: #0f766e; background: rgba(20,184,166,0.13); }
html body .pay-accordion .acc-tag-muted  { color: #55555e; background: rgba(0,0,0,0.05); }
html body .pay-accordion .acc-tag-soon   { color: #6b6b73; background: rgba(0,0,0,0.05); }
html body .pay-accordion .acc-caret {
    color: #9a9aa2; font-size: 15px; flex-shrink: 0; display: flex; align-items: center;
    transition: transform 0.25s cubic-bezier(0.23,1,0.32,1);
}
html body .pay-accordion .acc-item.is-open .acc-caret { transform: rotate(180deg); }

/* brand chip tints (match the pane accents) */
html body .pay-accordion .acc-chip-card    { background: rgba(16,185,129,0.12); color: #0c7c5d; }
html body .pay-accordion .acc-chip-zelle   { background: rgba(109,30,212,0.12); color: #6d1ed4; }
html body .pay-accordion .acc-chip-venmo   { background: rgba(61,149,206,0.15); color: #0d6ab8; }
html body .pay-accordion .acc-chip-cashapp { background: rgba(0,184,67,0.12); color: #067a3a; }
html body .pay-accordion .acc-chip-crypto  { background: rgba(247,147,26,0.15); color: #b7791f; }
html body .pay-accordion .acc-chip-bank    { background: rgba(0,0,0,0.05); color: #9a9aa2; }

/* Collapsible body — max-height on the body itself so it clips the pane
   ENTIRELY when closed (grid 0fr leaks the pane's padding-box ~18px). */
html body .pay-accordion .acc-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.33s cubic-bezier(0.4,0,0.2,1);
}
html body .pay-accordion .acc-item.is-open .acc-body { max-height: 900px; }

/* The moved-in pane: shed its own card chrome (the item is the card), force it
   visible (its inline display:none is overridden — the grid collapse hides it),
   and hide its internal "Pay with X" header since the row is the header. */
html body .pay-accordion .acc-body .payment-pane-section {
    display: block !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 2px 16px 16px !important;
}
html body .pay-accordion .acc-body .checkout-section-header { display: none !important; }
/* neutralize any leftover active-tile styling on the row */
html body .pay-accordion .acc-row.active { background: transparent; }
html body .pay-accordion .acc-row.active:hover { background: rgba(0,0,0,0.015); }

/* disabled bank item */
html body .pay-accordion .acc-item.acc-disabled { opacity: 0.6; }
html body .pay-accordion .acc-row-disabled {
    all: unset; box-sizing: border-box; width: 100%;
    display: flex; align-items: center; gap: 13px; padding: 15px 16px; cursor: default;
}

@media (prefers-reduced-motion: reduce) {
    html body .pay-accordion .acc-body { transition: none !important; }
    html body .pay-accordion .acc-caret { transition: none !important; }
}
@media (max-width: 540px) {
    html body .pay-accordion { gap: 9px; }
    html body .pay-accordion .acc-chip { width: 36px; height: 36px; font-size: 17px; }
    html body .pay-accordion .acc-name { font-size: 0.95rem; }
    html body .pay-accordion .acc-row,
    html body .pay-accordion .acc-row-disabled { padding: 14px 13px; gap: 11px; }
    html body .pay-accordion .acc-body .payment-pane-section { padding: 2px 13px 14px !important; }
}
/* ============================ end R405 ============================ */


/* ============================================================================
   R407 — Accordion rows get real substance. The R405 rows were a single word
   floating dead-center (text inherited `text-align:center` from
   .payment-method-tab) with a big empty gap to the trailing pill. Rebuild each
   row as icon -> [title + muted subtitle] -> trailing meta, LEFT-aligned, with
   a touch more height + chip presence so the list reads as intentional, not bare.
   ============================================================================ */
html body .pay-accordion .acc-row,
html body .pay-accordion .acc-row-disabled { padding: 17px 18px; gap: 14px; }

html body .pay-accordion .acc-chip {
    width: 44px; height: 44px; border-radius: 12px; font-size: 20px;
}

/* the title+subtitle stack — this now carries the flex + the left alignment */
html body .pay-accordion .acc-text {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 3px;
    text-align: left;
}
html body .pay-accordion .acc-name {
    flex: 0 1 auto;
    font-size: 1.02rem; line-height: 1.2;
    max-width: 100%;
}
html body .pay-accordion .acc-sub {
    font-size: 0.8rem; font-weight: 450; line-height: 1.25;
    color: #616166; letter-spacing: 0.005em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 100%;
}
html body .pay-accordion .acc-item.acc-disabled .acc-sub { color: #8a8a90; }

@media (max-width: 540px) {
    html body .pay-accordion .acc-row,
    html body .pay-accordion .acc-row-disabled { padding: 15px 14px; gap: 12px; }
    html body .pay-accordion .acc-chip { width: 40px; height: 40px; font-size: 18px; }
    html body .pay-accordion .acc-name { font-size: 0.97rem; }
    html body .pay-accordion .acc-sub  { font-size: 0.76rem; }
    /* Narrow rows can't fit chip + title/subtitle + pill + caret without
       truncating the subtitle. The title+subtitle now carries the info the
       pills used to, so drop the pills on mobile (the greyed row + clock caret
       still reads "coming soon" for the disabled Bank option). */
    html body .pay-accordion .acc-tag { display: none; }
}
/* ============================ end R407 ============================ */


/* ============================================================================
   R408 — Breathing room at the top of every expanded pane. R405 set the moved-in
   pane padding to `2px 16px 16px`, so the intro copy hugged the row above with no
   gap. Give it a real top inset so the expanded content isn't crammed against the
   selected row. (Pairs with the R408 app.js change that drops the expand-scroll.)
   ============================================================================ */
html body .pay-accordion .acc-body .payment-pane-section {
    padding-top: 20px !important;
}
@media (max-width: 540px) {
    html body .pay-accordion .acc-body .payment-pane-section {
        padding-top: 18px !important;
    }
}
/* ============================ end R408 ============================ */


/* ============================================================================
   R410 — Hide the "Secure Checkout" page title on the PAYMENT step, desktop only.
   The .checkout-page-header is shared across steps; showCheckoutStep() flags the
   active stepper item, so :has() on the container detects when Payment (step 3)
   is active and hides just the H1 (the "Back to Catalog" link is kept).
   ============================================================================ */
@media (min-width: 769px) {
    html body .checkout-page-container:has(.checkout-steps .step[data-step="3"].active) .checkout-page-header h1 {
        display: none;
    }
}
/* ============================ end R410 ============================ */


/* ============================================================================
   R411 — Payment step rebuild: a radio on each method row (select-to-pay), one
   shared Place Order button at the bottom (routes by selected method), and the
   full per-method pay instructions on the confirmation screen (#payment-warning).
   The per-method submit buttons were removed from the panes.
   ============================================================================ */

/* --- selection radio (first child of every row) --- */
html body .pay-accordion .acc-radio {
    width: 22px; height: 22px; border-radius: 50%;
    border: 2px solid rgba(0,0,0,0.26);
    flex-shrink: 0; position: relative;
    transition: border-color 0.18s ease;
}
html body .pay-accordion .acc-radio::after {
    content: ""; position: absolute; inset: 0; margin: auto;
    width: 0; height: 0; border-radius: 50%; background: #14b8a6;
    transition: width 0.18s cubic-bezier(0.23,1,0.32,1), height 0.18s cubic-bezier(0.23,1,0.32,1);
}
html body .pay-accordion .acc-item.is-open .acc-radio { border-color: #14b8a6; }
html body .pay-accordion .acc-item.is-open .acc-radio::after { width: 11px; height: 11px; }
html body .pay-accordion .acc-row:hover .acc-radio { border-color: rgba(20,184,166,0.55); }
html body .pay-accordion .acc-item.acc-disabled .acc-radio { border-color: rgba(0,0,0,0.14); }

/* --- single Place Order button --- */
html body .checkout-place-order-wrap { margin: 16px 0 4px; }
html body .checkout-place-order {
    width: 100%; border: 0; border-radius: 14px;
    min-height: 62px; padding: 18px 24px;
    background: linear-gradient(180deg, #17171c 0%, #0a0a0d 100%);
    color: #fff; cursor: pointer;
    font-family: 'Inter', sans-serif; font-size: 1.08rem; font-weight: 700; letter-spacing: 0.005em;
    display: flex; align-items: center; justify-content: center; gap: 14px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.12);
    transition: transform 0.18s cubic-bezier(0.23,1,0.32,1), box-shadow 0.22s ease, background 0.22s ease;
}
html body .checkout-place-order .cpo-label { display: inline-flex; align-items: center; gap: 9px; }
html body .checkout-place-order .cpo-label i { font-size: 0.92em; opacity: 0.85; }
html body .checkout-place-order .cpo-total { font-family: 'JetBrains Mono', monospace; font-weight: 700; }
html body .checkout-place-order .cpo-total:empty { display: none; }
html body .checkout-place-order:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.15);
}
html body .checkout-place-order:active:not(:disabled) { transform: translateY(0) scale(0.99); }
html body .checkout-place-order:disabled {
    background: #e6e6ea; color: #a1a1aa; cursor: not-allowed; box-shadow: none;
}
html body .cpo-hint { text-align: center; font-size: 0.85rem; color: #6b6b73; margin: 10px 0 0; transition: color 0.2s ease; }
html body .cpo-hint.cpo-hint-flash { color: #dc2626; font-weight: 600; }

/* --- confirmation-screen pay instructions (#payment-warning) --- */
html body #payment-warning.confirm-pay-warn {
    background: #fff; border: 1px solid rgba(20,184,166,0.28); border-radius: 14px;
    padding: 20px 20px 18px; margin: 18px 0; text-align: left;
    box-shadow: 0 4px 18px rgba(0,0,0,0.05); color: #3f3f46;
}
html body #payment-warning .cpw-head {
    display: flex; align-items: center; gap: 9px;
    font-family: 'Inter', sans-serif; font-weight: 700; font-size: 1.06rem; color: #0f172a; margin: 0 0 8px;
}
html body #payment-warning .cpw-head i { color: #0f766e; }
html body #payment-warning .cpw-lead { font-size: 0.94rem; color: #3f3f46; margin: 0 0 14px; line-height: 1.5; }
html body #payment-warning .cpw-detail { border: 1px solid rgba(0,0,0,0.09); border-radius: 11px; overflow: hidden; margin: 0 0 14px; }
html body #payment-warning .cpw-drow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; }
html body #payment-warning .cpw-drow + .cpw-drow { border-top: 1px solid rgba(0,0,0,0.06); }
html body #payment-warning .cpw-drow span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: #6b6b73; font-weight: 600; }
html body #payment-warning .cpw-drow strong { font-family: 'JetBrains Mono', monospace; font-size: 0.98rem; color: #0a0a0a; text-align: right; }
html body #payment-warning .cpw-drow-ref { background: rgba(20,184,166,0.07); }
html body #payment-warning .cpw-drow-ref strong { color: #0f766e; }
html body #payment-warning .cpw-steps { margin: 0 0 14px; padding: 0; list-style: none; counter-reset: cpw; }
html body #payment-warning .cpw-steps li {
    position: relative; padding-left: 34px; margin-bottom: 10px;
    font-size: 0.92rem; color: #3f3f46; line-height: 1.5; counter-increment: cpw;
}
html body #payment-warning .cpw-steps li::before {
    content: counter(cpw); position: absolute; left: 0; top: -1px;
    width: 23px; height: 23px; border-radius: 50%; background: #0f766e; color: #fff;
    font-family: 'Inter', sans-serif; font-size: 0.78rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
html body #payment-warning .cpw-open {
    display: inline-flex; align-items: center; gap: 8px;
    background: #0f766e; color: #fff; text-decoration: none;
    font-weight: 600; font-size: 0.94rem; padding: 12px 18px; border-radius: 11px; margin: 2px 0 12px;
    transition: background 0.18s ease, transform 0.15s ease;
}
html body #payment-warning .cpw-open:hover { background: #0b5c56; transform: translateY(-1px); }
html body #payment-warning .cpw-warn {
    display: flex; align-items: flex-start; gap: 8px; font-size: 0.85rem; color: #92400e;
    background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.28); border-radius: 9px; padding: 10px 12px; margin: 0;
}
html body #payment-warning .cpw-warn i { margin-top: 2px; flex-shrink: 0; }
html body #payment-warning .cpw-foot { font-size: 0.85rem; color: #6b6b73; margin: 12px 0 0; }
html body #payment-warning .cpw-foot a { color: #0f766e; }

@media (prefers-reduced-motion: reduce) {
    html body .pay-accordion .acc-radio,
    html body .pay-accordion .acc-radio::after,
    html body .checkout-place-order { transition: none !important; }
}
@media (max-width: 540px) {
    html body .checkout-place-order { min-height: 58px; padding: 16px 18px; font-size: 1.02rem; gap: 10px; }
    html body .pay-accordion .acc-radio { width: 20px; height: 20px; }
}
/* ============================ end R411 ============================ */


/* ============================================================================
   R412 — Step-1 (Information & Review) section cards go WHITE instead of the grey
   (var(--bg) #fafafa) they were inheriting via an !important token. The Agreements
   & Signature card keeps its grey to set the legal step apart, so it's excluded.
   id-scoped + !important so it wins over the token-driven grey.
   ============================================================================ */
html body #checkout-step-1 .checkout-section:not(.checkout-agreements) {
    background: #ffffff !important;
}
/* ============================ end R412 ============================ */


/* ============================================================================
   R414 — Checkout section titles (Contact Information, Billing Address, etc.)
   heavier + a touch larger. Base rule renders Inter 700 / 0.95rem; bump to
   800 / 1.08rem. Tail position + equal specificity wins over the base and the
   mobile 0.88rem overrides.
   ============================================================================ */
html body .checkout-section-header h3 {
    font-size: 1.08rem;
    font-weight: 800 !important;   /* !important to beat the #main-content Inter normalizer that pins weight:700 */
}
/* ============================ end R414 ============================ */


/* ============================================================================
   R415 — Bigger Place Order button + text (owner ask). Overrides the R411
   sizing (was 62px / 18-24px pad / 1.08rem). The mono total + lock icon scale
   with the font-size.
   ============================================================================ */
html body .checkout-place-order {
    min-height: 76px;
    padding: 23px 28px;
    font-size: 1.28rem;
    border-radius: 16px;
    gap: 16px;
}
html body .checkout-place-order .cpo-label { gap: 11px; }
@media (max-width: 540px) {
    html body .checkout-place-order {
        min-height: 66px;
        padding: 19px 18px;
        font-size: 1.14rem;
        gap: 12px;
    }
}
/* ============================ end R415 ============================ */


/* ============================================================================
   R416 — The product/item box inside the step-1 Order Summary goes white too
   (was #fafafa). The item keeps its 1px border so it stays delineated on the
   now-white summary card. Scoped to Information & Review only.
   ============================================================================ */
html body #checkout-step-1 .review-item { background: #ffffff !important; }
/* ============================ end R416 ============================ */


/* ============================================================================
   R417 — "Billing Details" merged card: hairline divider between the moved-in
   contact fields and the billing address fields, for a clear visual break.
   ============================================================================ */
html body .checkout-section .cs-subdivider {
    height: 1px;
    background: var(--border-light);
    margin: 16px 0 18px;
}
/* ============================ end R417 ============================ */


/* ============================================================================
   R420 — grey the "Ship to a different address" label to match the muted
   newsletter opt-in text (it was var(--text) dark).
   ============================================================================ */
html body .checkout-ship-toggle > span:last-child { color: var(--text-muted); }
/* ============================ end R420 ============================ */


/* ============================================================================
   R421 — Checkout page: raise the whole page up 12px (owner). The effective
   top padding was 84px, set by `html body main#main-content{padding-top:84px
   !important}` (id specificity beats the inline style + the shared 96px
   `.checkout-page` rule). Scope the override to checkout by adding the
   `.checkout-page` class so no other #main-content page is touched. 84 -> 72.
   (The "Back to Catalog" link removal lives in checkout.html.)
   ============================================================================ */
/* R428: more top space so "Secure Checkout" isn't touching the navbar. It was
   ~5px behind the nav at 72, so 88 gives a clear ~10px+ gap below the nav. */
html body main#main-content.checkout-page { padding-top: 96px !important; }  /* R433: +8px more below nav */
/* ============================ end R421 ============================ */


/* ============================================================================
   R422 — Payment step ("Choose How to Pay") polish (owner). Four asks:
   (1) The grey method tags (Bank to bank / Mobile / Instant = .acc-tag-muted)
       adopt the same teal-green as the "Secure" tag (.acc-tag-accent).
       "Coming soon" (.acc-tag-soon, the disabled Link Money) stays grey — a
       green badge there would falsely read as available.
   (2) Hide the "1 Information / 2 Payment" stepper on the PAYMENT step only
       (step 3 visible). The "Back to Information" button inside the pane keeps
       back-navigation, and the stepper divs are non-clickable, so nothing
       functional is lost. Same proven :has() pattern as the container-width rule.
   (3) A hair more breathing room between rows (gap 10->14) + a slightly wider
       method column (R402's .checkout-payment-grid max-width 620 -> 672).
   (4) Each method box gets a brand-tinted outline matching its icon colour
       (Card emerald / Zelle purple / Venmo blue / Cash App green / Crypto
       orange). When a method is opened, its own colour deepens + a soft matching
       glow replaces the generic teal is-open border, so selecting Zelle stays
       purple. Disabled bank row stays neutral; radio dot stays the teal accent.
   ============================================================================ */

/* (1) grey method tags -> "Secure" green (keep .acc-tag-soon grey) */
html body .pay-accordion .acc-tag-muted { color: #0f766e; background: rgba(20,184,166,0.13); }

/* (2) drop the stepper on the payment step (step 3 content visible) */
html body .checkout-page-container:has(#checkout-step-3:not([style*="display:none"])) .checkout-steps {
    display: none !important;
}

/* (3) more gap between rows + a hair wider method column (gap bumped again in R425) */
html body .pay-accordion { gap: 18px; }
html body .checkout-payment-grid { max-width: 672px; }
@media (max-width: 540px) {
    html body .pay-accordion { gap: 15px; }
}

/* (4) brand-tinted outline per method. Resting 2px tint (folded into the
   per-brand rule so it beats the R405 base border-width cleanly), gentle neutral
   lift on hover, then the method's own colour + soft glow when opened. The
   disabled bank row keeps the neutral 1px base border. */
html body .pay-accordion .acc-item:not(.acc-disabled):hover { box-shadow: 0 3px 12px rgba(0,0,0,0.06); }

/* R423: thicker brand outlines 2px -> 3px.
   R427 (owner changed their mind): ALL section outlines are now the Card green
   (emerald), NOT per-brand — the icon chips (.acc-chip-*) keep their brand colours. */
/* R429: 2px outline. R432 (exploratory "let me see black borders"): green ->
   black. To revert to green, set border-color back to rgba(16,185,129,0.42). */
html body .pay-accordion .acc-item[data-acc] { border-width: 1.5px; border-color: rgba(0,0,0,0.5); }  /* R433: thinner (2->1.5) */

/* R427: opened section deepens + glow. R432 (exploratory): black instead of green.
   Revert to green = rgba(16,185,129,0.78) + rgba(16,185,129,0.13) shadow. */
html body .pay-accordion .acc-item[data-acc].is-open { border-color: rgba(0,0,0,0.8); box-shadow: 0 6px 20px rgba(0,0,0,0.12); }
/* ============================ end R422 ============================ */


/* ============================================================================
   R423 — Payment step (owner): (a) lower the "Choose How to Pay" card — after
   R422 hid the stepper the card sat right under the navbar; the real lever is
   the R404 rule at ~line 43143 (margin-top -10px -> +24px), since it carries
   !important; (b) hide the disabled "Bank · Link Money" method for now.
   (Thicker 3px brand borders live in the R422 block above.)
   ============================================================================ */
html body .pay-accordion .acc-item.acc-disabled { display: none !important; }
/* ============================ end R423 ============================ */


/* ============================================================================
   R424 — Confirmation "finish paying" instructions (owner): the card was moved
   above the thank-you hero (checkout.html), each value row (Send to / Amount /
   Payment note) gets a one-tap copy button, and the card reads a touch more
   prominent now that it's the first thing a reserved-order buyer sees.
   ============================================================================ */
/* slightly stronger card presence (it's now the top CTA on the page).
   Scoped to :has(.cpw-head) so the crypto/NOWPayments default one-line warning
   (which has no .cpw-head) keeps the quieter base card, not this prominent one. */
html body #payment-warning.confirm-pay-warn:has(.cpw-head) {
    border-width: 1.5px; border-color: rgba(20,184,166,0.42);
    box-shadow: 0 6px 22px rgba(20,184,166,0.10);
    margin: 0 0 22px;
}
/* value + copy button on one line, value still right-aligned */
html body #payment-warning .cpw-valwrap {
    display: inline-flex; align-items: center; gap: 9px; min-width: 0;
}
html body #payment-warning .cpw-valwrap strong { text-align: right; }
html body #payment-warning .cpw-copy {
    flex-shrink: 0; width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(0,0,0,0.12); border-radius: 8px; background: #fff;
    color: #0f766e; font-size: 0.82rem; cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
html body #payment-warning .cpw-copy:hover { background: rgba(20,184,166,0.10); border-color: rgba(20,184,166,0.5); }
html body #payment-warning .cpw-copy:active { transform: scale(0.9); }
html body #payment-warning .cpw-copy:focus-visible { outline: 2px solid #14b8a6; outline-offset: 2px; }
/* on the teal ref row give the copy button a matching tinted base so it reads as the primary copy */
html body #payment-warning .cpw-drow-ref .cpw-copy { border-color: rgba(20,184,166,0.4); background: rgba(20,184,166,0.06); }
/* ============================ end R424 ============================ */


/* ============================================================================
   R426 — Confirmation page (owner batch): (1) drop the "Secure Checkout" title
   on the confirmation step. (2) On landing, only the "finish paying" card is in
   view — the Thank-you hero starts just below the fold. (3) loyalty note made
   readable (was pale amber text + a white number on pale amber). (4) recap boxes
   white. (5)+(6) the instruction card is a touch bigger and its data values
   (send-to / amount / reference) read as a distinct, bolder mono. ("Finish
   Paying" caps + the "(Required)" ref marker are in app.js.)
   ============================================================================ */

/* (1) drop the "Secure Checkout" header on the confirmation step (all widths) */
html body .checkout-page-container:has(#checkout-step-4:not([style*="display:none"])) .checkout-page-header {
    display: none !important;
}

/* (2) [REVERTED in R430 — owner changed their mind] the instructions card used
   to get min-height so the hero sat below the fold; that left a big empty white
   space. Removed so the card shrinks to content and the (now smaller) Thank-you
   hero sits directly below the directions, visible without scrolling. */

/* (3) loyalty "you'll earn N points" note — readable dark amber (was #fbbf24 text
   + a #fff number on a pale amber wash = barely legible). */
html body .confirm-points-earned {
    color: #8a4b0a !important;
    background: linear-gradient(135deg, rgba(251,191,36,0.22), rgba(245,158,11,0.16)) !important;
    border-color: rgba(217,119,6,0.55) !important;
    font-size: 0.98rem !important;
}
html body .confirm-points-earned strong { color: #7c2d12 !important; font-size: 1.12rem !important; }
html body .confirm-points-earned i { color: #ea8f00 !important; }

/* (4) recap boxes (Your Order / Shipping To) white, not grey */
html body #checkout-step-4 .confirm-recap-section {
    background: #ffffff !important;
    border: 1px solid var(--border-light) !important;
}

/* (5)+(6) instruction card a touch bigger + data values a distinct bolder mono */
html body #payment-warning .cpw-head { font-size: 1.3rem; }  /* R432: header a little bigger */
html body #payment-warning .cpw-lead { font-size: 1.02rem; }
html body #payment-warning .cpw-drow { padding: 13px 15px; }
html body #payment-warning .cpw-drow span { font-size: 0.78rem; }
html body #payment-warning .cpw-drow strong {
    /* !important on font-family to beat the #main-content Inter normalizer, which
       was forcing these data values (phone / amount / reference) to Inter — the
       reason they didn't stand out. Mono makes them read as copyable data. */
    font-family: 'JetBrains Mono','SFMono-Regular','Consolas',monospace !important;
    font-size: 1.12rem; font-weight: 800; letter-spacing: 0.01em; color: #0a0a0a;
}
html body #payment-warning .cpw-steps li { font-size: 1rem; padding-left: 36px; }
html body #payment-warning .cpw-steps li::before { width: 25px; height: 25px; font-size: 0.82rem; }
html body #payment-warning .cpw-warn { font-size: 0.92rem; }
html body #payment-warning .cpw-foot { font-size: 0.92rem; }
html body #payment-warning .cpw-copy { width: 32px; height: 32px; font-size: 0.9rem; }
/* the "(Required)" marker on the reference label */
html body #payment-warning .cpw-req { color: #c2410c; font-weight: 700; letter-spacing: 0; }
/* ============================ end R426 ============================ */


/* ============================================================================
   R430 — Confirmation (owner reversed R426): bring the green "Thank you" hero UP
   into view directly below the instructions (min-height removed above), and make
   the hero smaller so the whole thing is visible without scrolling — trimmed the
   check icon, heading, sub copy, padding and the ref pill.
   ============================================================================ */
/* also drop the "1 Information / 2 Payment" stepper on the confirmation step — the
   order is already placed, so the progress bar is pointless (and it costs ~50px). */
html body .checkout-page-container:has(#checkout-step-4:not([style*="display:none"])) .checkout-steps {
    display: none !important;
}
/* with the header + stepper hidden on step 4, the confirmation card was sitting
   ~34px below the nav for no reason — pull it up to help the hero fit on screen. */
html body #checkout-step-4.checkout-step-content { margin-top: -30px !important; }  /* R432: box down 4px (was -34) */
/* R431: shrink the hero ~1/3 (owner) — tighter icon / heading / pill + a wider
   sub so the copy fits 2 lines instead of 3 (biggest height saver). */
/* R433/R434: hero a hair taller (padding) + more gap before the recap (margin-bottom 14->24). */
html body #checkout-step-4 .confirm-hero { padding: 17px 16px 18px; margin-bottom: 24px; }
html body #checkout-step-4 .confirm-hero .confirmation-icon {
    /* !important to beat `html body .confirmation-icon{width:64px!important}` */
    width: 32px !important; height: 32px !important; font-size: 0.9rem; margin: 0 auto 8px;
    box-shadow: 0 4px 11px rgba(16,185,129,0.22);
}
html body #checkout-step-4 .confirm-hero h2 {
    font-size: clamp(1.02rem, 2.2vw, 1.22rem) !important; line-height: 1.15 !important; margin: 0 0 5px 0 !important;
}
html body #checkout-step-4 .confirm-hero .confirm-hero-sub { font-size: 0.82rem; line-height: 1.32; margin: 0 auto 9px; max-width: 760px; }
html body #checkout-step-4 .confirm-ref-pill { padding: 7px 8px 7px 16px; gap: 8px; }
html body #checkout-step-4 .confirm-ref-pill .cr-copy { width: 26px !important; height: 26px !important; }
/* ============================ end R430 ============================ */


/* ============================================================================
   R431 — checkout tidy (owner): (1) the stepper bar white, not grey. (2) more
   space between the yellow warning and the bottom of the instructions card.
   (3) the "Open <app> to pay" button label was low-contrast green-on-green —
   force white so it's readable.
   ============================================================================ */
/* (1) stepper bar white */
html body .checkout-page .checkout-steps { background: #ffffff !important; }

/* (2) breathing room below the warning inside the instructions card (R435: 28->34) */
html body #payment-warning.confirm-pay-warn { padding-bottom: 34px; }

/* (3) readable label on the teal "Open <app> to pay" button */
html body #payment-warning .cpw-open,
html body #payment-warning .cpw-open i { color: #ffffff !important; }
/* ============================ end R431 ============================ */


/* ============================================================================
   R436 — "Estimated Delivery" timeline readability (owner). The title was light
   sky-blue (#93c5fd) on a near-white teal wash = very low contrast; the step
   labels/dates were light grey. Recolour to on-brand dark teal + darker ink.
   ============================================================================ */
html body #checkout-step-4 .confirm-delivery-title { color: #0f766e; font-size: 1rem; }
html body #checkout-step-4 .confirm-delivery-title i { color: #0f766e; }
/* !important to beat the pre-existing R124 `.confirm-delivery-timeline …` rules */
html body #checkout-step-4 .confirm-timeline-label { color: #334155 !important; }
html body #checkout-step-4 .confirm-timeline-step.active .confirm-timeline-label { color: #0f766e !important; }
html body #checkout-step-4 .confirm-timeline-date { color: #475569 !important; }
/* ============================ end R436 ============================ */

/* ============================================================
   R451 - premium "Sold Out" treatment (catalog product cards)
   Replaces the Orbitron red-on-black blob with a frosted-glass
   label + desaturated vial. Neutral/premium, on-brand; reads as
   "retired / unavailable" rather than an alarm-error. Overrides
   the base .sold-out-badge / .product-card.sold-out (~styles 1743).
   ============================================================ */
html body .product-card.sold-out {
    opacity: 1;                 /* was 0.65 - keep name/price/COA fully legible */
    pointer-events: none;
}
/* only the vial reads as retired: desaturate + a touch dimmer */
html body .product-card.sold-out .product-image img {
    filter: grayscale(0.9) brightness(0.98) contrast(0.97);
    opacity: 0.88;
}
/* the centered label: self-backing frosted pill (works on any bg) */
html body .sold-out-badge {
    background: rgba(9, 11, 14, 0.5);
    -webkit-backdrop-filter: blur(9px) saturate(1.15);
    backdrop-filter: blur(9px) saturate(1.15);
    color: #f5f8f9;
    font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace !important;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 9px 18px 9px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.14);
    z-index: 6;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
/* muted coral status dot (not alarm red) */
html body .sold-out-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #f0736a;
    box-shadow: 0 0 0 3px rgba(240, 115, 106, 0.2);
    flex: 0 0 auto;
}
/* the small in-card "Sold Out" (where Add to Cart was) - refined + muted */
html body .product-card.sold-out .product-sold-out-label {
    color: #64748b !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* R451b - id-scope to beat the #main-content Inter normalizer (font) and the
   base .product-image vial-glow filter (desaturate). Catalog cards live inside
   main#main-content, so #main-content scoping raises specificity above both. */
html body #main-content .sold-out-badge {
    font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace !important;
}
html body #main-content .product-card.sold-out .product-image img {
    filter: grayscale(0.92) brightness(0.96) drop-shadow(0 8px 16px rgba(20, 30, 45, 0.16)) !important;
    opacity: 0.9 !important;
}

/* ============================================================
   R452 - "Restocking soon" buy-zone CTA for sold-out cards.
   Catalog: full-width teal banner below the price row
   (.product-restock-cta). Homepage shelf: the .r532-soldout slot
   (styled inline). Shared .rs-dot = a subtle live "incoming" pulse.
   Brand-teal + hopeful, replaces the redundant 2nd "Sold Out".
   ============================================================ */
html body .product-restock-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(20, 184, 166, 0.09);
    border: 1px solid rgba(20, 184, 166, 0.26);
    color: #0f766e;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1;
    white-space: nowrap;
}
/* shared live "incoming stock" pulse dot (catalog + shelf) */
.rs-dot {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #14b8a6;
    flex: 0 0 auto;
}
.rs-dot::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #14b8a6;
    animation: rsPulse 2.2s ease-out infinite;
}
@keyframes rsPulse {
    0%        { transform: scale(1);   opacity: 0.55; }
    70%, 100% { transform: scale(2.8); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .rs-dot::after { animation: none; }
}

/* ============================================================
   R454 - raise the whole hero cluster up 8px, MOBILE ONLY (owner ask).
   Shifts the single wrapper that holds the stat + vials + lede + CTA +
   trust row. Uses the standalone `translate` property (NOT transform) so
   it composes on top of the GSAP load animation and the data-r159-parallax
   scroll transforms on .hero-text / .hero-visual instead of fighting them.
   Desktop (>768px) is byte-for-byte untouched.
   ============================================================ */
@media (max-width: 768px) {
    html body #hero .hero-content.hero-split {
        translate: 0 -8px;
    }
}

/* ============================================================
   R456 - PayPal restored to checkout (Cash App + Intuit removed).
   PayPal-blue accordion chip, mirroring the .acc-chip-cashapp style.
   ============================================================ */
html body .pay-accordion .acc-chip-paypal { background: rgba(0,112,186,0.12); color: #0070ba; }

/* ============================================================
   R478 - Age gate: one decision, one tap (was 2 checkboxes + a
   disabled button that mobile users had to scroll to reach).
   The RUO acknowledgment now rides in the Yes button (click-wrap
   kept); the card fits a 375x812 phone with no scrolling.
   ============================================================ */
.age-gate-note {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.65;
    max-width: 42ch;
    margin: 0 auto 26px;
    text-align: center;
}
.age-gate-note a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.age-gate-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.age-gate-actions .age-gate-yes {
    width: 100%;
    min-height: 52px;
    font-size: 1.02rem;
    transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 160ms ease;
}
.age-gate-actions .age-gate-yes:active { transform: scale(0.97); }
.age-gate-no {
    width: 100%;
    min-height: 48px;
    background: transparent;
    border: 1px solid var(--border-light);
    border-radius: 10px;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 160ms ease, border-color 160ms ease, transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.age-gate-no:hover { color: var(--text); border-color: var(--text-muted); }
.age-gate-no:active { transform: scale(0.97); }
@media (max-width: 480px) {
    .age-gate-content { padding: 36px 22px; }
    .age-gate-logo { max-width: 120px; margin-bottom: 18px; }
    .age-gate-note { font-size: 0.92rem; }
}
@media (prefers-reduced-motion: reduce) {
    .age-gate-actions .age-gate-yes,
    .age-gate-no { transition: none; }
}


/* ============================================================
   R486: PC-only — catalog product cards get a little more height and more
   breathing room around the text (owner). Desktop only (min-width:1025px)
   so mobile/tablet are untouched. Uses 3-id specificity
   (#main-content #products #products-grid) to win the layered catalog
   cascade; last-in-source. Mirrored on US + CA. */
@media (min-width: 1025px) {
    html body #main-content #products #products-grid .product-card .product-image { height: 312px !important; }
    html body #main-content #products #products-grid .product-card .product-info { padding: 18px 16px 26px !important; }
    html body #main-content #products #products-grid .product-card .product-dosage { margin-top: 6px !important; }
    html body #main-content #products #products-grid .product-card .product-rating { margin-top: 12px !important; }
    html body #main-content #products #products-grid .product-card .product-price-row { margin-top: 18px !important; }
}


/* ============================================================
   R487: two-way country flag switcher (replaces old .nav-ca-switch). Navbar rests
   showing the CURRENT site flag; on hover a card pops out below with the OTHER flag
   + "Switch to <country>". Whole thing is one link. Touch/small screens: shown inline
   (label + current flag), tap navigates. Mirrored on US + CA. */
html body .nav-actions .nav-flag-switch{
    position: relative !important; display: inline-flex !important; align-items: center !important;
    text-decoration: none !important; cursor: pointer !important;
    margin: 0 0 0 30px !important; padding: 3px !important; border-radius: 7px !important;
    background: transparent !important; transition: background .18s ease !important; line-height: 1 !important;
}
html body .nav-actions .nav-flag-switch:hover{ background: rgba(0,0,0,0.05) !important; }
html body .nav-actions .nav-flag-switch .nfs-flag{
    height: 24px !important; width: auto !important; display: block !important; border-radius: 3px !important;
    border: 1px solid var(--border-light, rgba(0,0,0,.14)) !important; box-shadow: 0 1px 2px rgba(0,0,0,.16) !important;
    flex: 0 0 auto !important;
}
html body .nav-actions .nav-flag-switch .nfs-current{ transition: transform .18s ease !important; }
html body .nav-actions .nav-flag-switch:hover .nfs-current{ transform: translateY(-1px) !important; }
html body .nav-actions .nav-flag-switch .nfs-panel{
    position: absolute !important; top: calc(100% + 7px) !important; right: 0 !important;
    display: inline-flex !important; align-items: center !important; gap: 9px !important; white-space: nowrap !important;
    background: #ffffff !important; border: 1px solid var(--border-light, rgba(0,0,0,.12)) !important;
    border-radius: 9px !important; padding: 8px 11px !important; box-shadow: 0 10px 28px rgba(0,0,0,.16) !important;
    opacity: 0 !important; transform: translateY(-6px) !important; pointer-events: none !important;
    transition: opacity .18s ease, transform .2s cubic-bezier(.4,0,.2,1) !important; z-index: 1200 !important;
}
html body .nav-actions .nav-flag-switch:hover .nfs-panel{ opacity: 1 !important; transform: translateY(0) !important; pointer-events: auto !important; }
html body .nav-actions .nav-flag-switch .nfs-label{
    font-size: 0.82rem !important; font-weight: 650 !important; letter-spacing: .01em !important; color: #14323d !important; line-height: 1 !important;
}
@media (hover: none), (max-width: 720px){
    html body .nav-actions .nav-flag-switch{ margin: 0 0 0 10px !important; }
    html body .nav-actions .nav-flag-switch .nfs-panel{
        position: static !important; opacity: 1 !important; transform: none !important; pointer-events: auto !important;
        transition: none !important;
        background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important;
        gap: 7px !important; z-index: auto !important; margin-right: 7px !important;
    }
    html body .nav-actions .nav-flag-switch .nfs-panel .nfs-flag{ display: none !important; }
    html body .nav-actions .nav-flag-switch .nfs-label{ color: var(--text, #14323d) !important; }
}
@media (prefers-reduced-motion: reduce){
    html body .nav-actions .nav-flag-switch .nfs-panel,
    html body .nav-actions .nav-flag-switch .nfs-current{ transition: none !important; }
}


/* ============================================================
   R488: flag switcher interaction fix. The container is no longer the link — only
   the popout (.nfs-panel = <a>) navigates; the current flag (.nfs-current) is a
   non-navigating trigger. A transparent bridge fills the gap between the flag and
   the popout so the cursor can travel into it without it closing. Focus reveals it. */
html body .nav-actions .nav-flag-switch .nfs-panel{ text-decoration: none !important; cursor: pointer !important; }
html body .nav-actions .nav-flag-switch .nfs-current{ cursor: default !important; }
html body .nav-actions .nav-flag-switch .nfs-panel::before{
    content: "" !important; position: absolute !important; left: -6px !important; right: -6px !important;
    bottom: 100% !important; height: 13px !important; background: transparent !important;
}
html body .nav-actions .nav-flag-switch:hover .nfs-panel,
html body .nav-actions .nav-flag-switch:focus-within .nfs-panel{
    opacity: 1 !important; transform: translateY(0) !important; pointer-events: auto !important;
}
@media (hover: none), (max-width: 720px){
    html body .nav-actions .nav-flag-switch .nfs-panel::before{ display: none !important; }
}


/* ============================================================
   R489: on mobile, move the flag switcher OUT of the navbar and into the hamburger
   dropdown (owner). Hide the navbar switcher whenever the hamburger shows
   (<=768px or touch); style the .mm-flag-switch item inside #mobile-menu. Desktop
   navbar popout is unchanged. Mirrored US + CA. */
@media (max-width: 768px), (hover: none) {
    html body .nav-actions .nav-flag-switch { display: none !important; }
}
html body #mobile-menu .mm-flag-switch{
    display: flex !important; align-items: center !important; gap: 10px !important;
}
html body #mobile-menu .mm-flag-switch .mm-flag{
    height: 22px !important; width: auto !important; border-radius: 3px !important;
    border: 1px solid var(--border-light, rgba(0,0,0,.18)) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.14) !important; flex: 0 0 auto !important;
}


/* R489b: the mobile menu content can exceed the viewport height (it does once the
   Switch-to-X item is added — Track Order + Switch were clipped below the fold with
   overflow:visible). Make the menu scroll so every item stays reachable. US + CA. */
html body #mobile-menu{ overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior: contain !important; }


/* R490: mobile dropdown — trimmed to the essential sections (Home, Products, Bundles,
   Affiliate, COAs, Calculator, Contact, Account, Track Order, Switch). Tighten the gap
   between the ELYTRA LABS header and the first link (32px read as loose; not slammed to
   the very top either). US + CA. */
html body #mobile-menu .mobile-menu-header{ margin-bottom: 14px !important; }


/* R491: make the shared body.no-scroll lock actually work on MOBILE. <html> is the
   scroll container on this site, and the mobile overflow-x rules (R58 clip-trap /
   the <=720 overflow-x:hidden) override the plain body.no-scroll{overflow:hidden},
   so a thumb-drag over an open overlay (hamburger menu, cart drawer, modal) scrolled
   the page behind it instead of the overlay. Lock <html> itself whenever the body
   carries .no-scroll. Scoped to <=768px where the trap lives; desktop is unchanged.
   toggleMobileMenu() now toggles body.no-scroll on open/close (app.js R491). */
@media (max-width: 768px) {
    html:has(body.no-scroll) { overflow: hidden !important; }
}


/* R492: mobile hero — nudge the whole block up another 12px (owner). Continues R683's
   approach: trim the #hero.hero-reading-room top padding so the eyebrow, purity stat,
   vials, headline, CTA and trust row all shift up 12px uniformly (and the sections
   below rise with them). 69px -> 57px. <=768 only; desktop frozen. */
@media (max-width: 768px) {
  html body #hero.hero-reading-room { padding-top: 57px !important; }
}


/* R493: mobile hero — center the "What the lab measured" eyebrow. Its base rule sets
   max-width:34ch (a desktop line-length cap, ~327px); on mobile it's a grid item with
   justify-self:stretch, so that capped box pinned to the LEFT of the centered column
   and read left-shifted vs the stat + purity label below (which have no cap). Drop the
   cap on mobile so the box spans the full column and R651's text-align:center actually
   centers it. Matches R651's child-chain specificity; tail-positioned so it wins.
   <=768 only; desktop split-hero left-alignment untouched. */
@media (max-width: 768px) {
  html body #hero.hero-reading-room .hero-content > .hero-text > .hero-stat-leadin {
    max-width: none !important;
    justify-self: stretch !important;
    width: auto !important;
    text-align: center !important;
  }
}