/* Reset & Base Styles */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

/* Motion / A11y — site-wide reduced-motion override
   (restored from the retired ascend.theme.css) */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .hero-video { display: none; }
}

body {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.5;
    overflow-x: hidden;
    background: var(--mist);
    color: var(--ink);
}

a {
    text-decoration: none;
    color: inherit;
}

/* Form controls must never render below 16px: iOS Safari auto-zooms the
   page when a smaller field receives focus. */
input,
select,
textarea {
    font-size: 1rem;
}

/* ========================================
   HEADER
======================================== */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    transition: all 0.3s ease;
}

.header.scrolled {
    background: rgba(234, 240, 236, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--ink-line);
    box-shadow: 0 4px 30px var(--shadow-tint-sm);
}

.header.scrolled .logo {
    color: var(--ink);
}

.header.scrolled .hamburger-line {
    background: var(--ink);
}

.header-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
}

@media (min-width: 640px) {
    .header-container {
        height: 80px;
        padding: 0 24px;
    }
}

@media (min-width: 1024px) {
    .header-container {
        padding: 0 48px;
    }
}

/* Logo - Reduced spacing */
.logo {
    display: flex;
    align-items: center;
    font-size: 1.25rem;
    color: var(--on-ink);
    letter-spacing: 0.01em;
}

@media (min-width: 640px) {
    .logo {
        font-size: 1.5rem;
    }
}

.logo-h {
    font-weight: 700;
}

.logo-awaa {
    font-weight: 400;
}

.logo-img {
    height: 28px;
    width: auto;
    display: block;
    filter: brightness(0) invert(1);
    transition: filter 0.3s ease;
}

.header.scrolled .logo-img,
body.menu-open .logo-img {
    filter: none;
}

/* Header Actions (profile + hamburger) */
.header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

@media (min-width: 640px) {
    .header-actions {
        gap: 12px;
    }
}

/* Hamburger Menu - visible on all screen sizes */
.hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 102;
}

.hamburger-line {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--on-ink);
    transition: all 0.3s ease;
    border-radius: 1px;
}

.hamburger.active .hamburger-line {
    background: var(--ink);
}

.hamburger.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.hamburger.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* ========================================
   EXPANDABLE MENU PANEL
======================================== */

/* Background overlay */
.menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(18, 49, 44, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 98;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Slide-down menu panel */
.menu-panel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99;
    background: var(--mist-deep);
    border-radius: 0 0 24px 24px;
    box-shadow: 0 20px 60px var(--shadow-tint-md);
    transform: translateY(-100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

.menu-panel.active {
    transform: translateY(0);
}

.menu-panel-inner {
    padding: 80px 24px 32px;
    max-width: 720px;
    margin: 0 auto;
}

@media (min-width: 640px) {
    .menu-panel-inner {
        padding: 100px 32px 40px;
    }
}

/* Eyebrow label above the nav list */
.menu-eyebrow {
    font-family: 'Outfit', sans-serif;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 10px;
}

/* Menu nav items — editorial numbered list */
.menu-nav {
    display: flex;
    flex-direction: column;
}

.menu-nav-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 0;
    font-family: 'Outfit', sans-serif;
    font-size: 1.35rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--ink);
    transition: color 0.2s ease;
    text-decoration: none;
    border-bottom: 1px solid var(--ink-line-soft);
}

.menu-nav-item:last-child {
    border-bottom: none;
}

.menu-item-label {
    flex: 1;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.menu-item-arrow {
    width: 18px;
    height: 18px;
    color: var(--ink-faint);
    flex-shrink: 0;
    opacity: 0;
    transform: translate(-6px, 6px);
    transition: opacity 0.25s ease, transform 0.25s ease, color 0.25s ease;
}

.menu-nav-item:hover {
    color: var(--teal-deep);
}

.menu-nav-item:hover .menu-item-label {
    transform: translateX(4px);
}

.menu-nav-item:hover .menu-item-arrow {
    opacity: 1;
    transform: translate(0, 0);
    color: var(--teal-deep);
}

.menu-nav-item.active,
.menu-nav-item[aria-current="page"] {
    color: var(--teal-deep);
}

.menu-nav-item[aria-current="page"] .menu-item-arrow {
    opacity: 1;
    transform: translate(0, 0);
    color: var(--teal-deep);
}

/* Utility row: Account & Cart as tactile cards */
.menu-utility {
    display: flex;
    gap: 10px;
    margin-top: 22px;
}

.menu-utility-item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: var(--paper);
    border: 1px solid var(--ink-line-soft);
    border-radius: 14px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--ink);
    text-decoration: none;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.menu-utility-item:hover {
    border-color: var(--ink-line);
    box-shadow: 0 4px 14px var(--shadow-tint-sm);
    transform: translateY(-1px);
}

.menu-utility-item svg {
    width: 19px;
    height: 19px;
    color: var(--ink-soft);
    flex-shrink: 0;
}

.menu-utility-item.signed-in svg {
    color: var(--success);
}

/* Buy CTA anchored at the bottom of the menu */
.menu-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 12px;
    padding: 16px 20px;
    background: var(--teal-deep);
    border-radius: 16px;
    color: var(--on-teal);
    text-decoration: none;
    box-shadow: 0 6px 20px var(--shadow-cta);
    transition: background 0.2s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.menu-cta:hover {
    background: var(--teal-deep-hover);
    box-shadow: 0 10px 26px var(--shadow-cta);
    transform: translateY(-1px);
}

.menu-cta-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.menu-cta-label {
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 600;
}

.menu-cta-sub {
    font-family: 'Outfit', sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
    opacity: 0.75;
}

.menu-cta-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    flex-shrink: 0;
    transition: transform 0.25s ease, background 0.2s ease;
}

.menu-cta-arrow svg {
    width: 17px;
    height: 17px;
}

.menu-cta:hover .menu-cta-arrow {
    transform: translateX(3px);
    background: rgba(255, 255, 255, 0.22);
}

/* Staggered entrance for panel content */
.menu-panel .menu-eyebrow,
.menu-panel .menu-nav-item,
.menu-panel .menu-utility,
.menu-panel .menu-cta {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.menu-panel.active .menu-eyebrow,
.menu-panel.active .menu-nav-item,
.menu-panel.active .menu-utility,
.menu-panel.active .menu-cta {
    opacity: 1;
    transform: translateY(0);
}

.menu-panel.active .menu-eyebrow { transition-delay: 0.08s; }
.menu-panel.active .menu-nav-item:nth-child(1) { transition-delay: 0.12s; }
.menu-panel.active .menu-nav-item:nth-child(2) { transition-delay: 0.16s; }
.menu-panel.active .menu-nav-item:nth-child(3) { transition-delay: 0.20s; }
.menu-panel.active .menu-nav-item:nth-child(4) { transition-delay: 0.24s; }
.menu-panel.active .menu-nav-item:nth-child(5) { transition-delay: 0.28s; }
.menu-panel.active .menu-utility { transition-delay: 0.34s; }
.menu-panel.active .menu-cta { transition-delay: 0.40s; }

@media (min-width: 640px) {
    .menu-nav-item {
        font-size: 1.5rem;
        padding: 17px 0;
    }
}

/* ========================================
   SIGN IN MODAL
======================================== */

/* Overlay */
.signin-overlay {
    position: fixed;
    inset: 0;
    background: rgba(18, 49, 44, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 200;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

@media (min-width: 640px) {
    .signin-overlay {
        align-items: center;
    }
}

.signin-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Modal card */
.signin-modal {
    background: var(--paper);
    border-radius: 24px 24px 0 0;
    width: 100%;
    max-width: 420px;
    padding: 32px 24px 40px;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
}

@media (min-width: 640px) {
    .signin-modal {
        border-radius: 24px;
        padding: 40px 32px;
        transform: translateY(20px);
        max-height: 85vh;
    }
}

.signin-overlay.active .signin-modal {
    transform: translateY(0);
}

/* Close button */
.signin-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mist-deep);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: var(--ink-soft);
    transition: background 0.2s ease, color 0.2s ease;
}

.signin-close:hover {
    background: var(--ink-line);
    color: var(--ink);
}

.signin-close svg {
    width: 18px;
    height: 18px;
}

/* Drag handle (mobile) */
.signin-drag-handle {
    width: 40px;
    height: 4px;
    background: var(--ink-line);
    border-radius: 2px;
    margin: 0 auto 24px;
}

@media (min-width: 640px) {
    .signin-drag-handle {
        display: none;
    }
}

/* Step containers */
.signin-step {
    display: flex;
    flex-direction: column;
}

.signin-step.hidden {
    display: none;
}

/* Typography */
.signin-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 8px;
}

.signin-subtitle {
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    color: var(--ink-soft);
    line-height: 1.5;
    margin-bottom: 28px;
}

/* Phone input group */
.phone-input-group {
    display: flex;
    align-items: center;
    border: 1.5px solid var(--ink-line);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    background: var(--paper);
    margin-bottom: 8px;
}

.phone-input-group:focus-within {
    border-color: var(--teal-deep);
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
}

.phone-input-group.error {
    border-color: var(--error);
    box-shadow: 0 0 0 3px var(--error-tint);
}

.phone-prefix {
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--ink);
    padding: 0 0 0 16px;
    user-select: none;
    flex-shrink: 0;
}

.phone-prefix-divider {
    width: 1px;
    height: 24px;
    background: var(--ink-line);
    margin: 0 12px;
    flex-shrink: 0;
}

.phone-input {
    flex: 1;
    border: none;
    outline: none;
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    color: var(--ink);
    padding: 14px 16px 14px 0;
    background: transparent;
    letter-spacing: 0.05em;
}

.phone-input::placeholder {
    color: var(--ink-faint);
    letter-spacing: 0;
}

/* Error message */
.signin-error {
    font-family: 'Outfit', sans-serif;
    font-size: 0.8rem;
    color: var(--error);
    min-height: 20px;
    margin-bottom: 16px;
    transition: opacity 0.2s ease;
}

/* Informational (not an error) — e.g. "you already have an account" */
.signin-error.info {
    color: var(--teal-deep);
}

/* Primary button */
.signin-btn {
    width: 100%;
    padding: 14px 24px;
    background: var(--ink);
    color: var(--on-ink);
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease;
}

.signin-btn:hover {
    background: var(--ink);
}

.signin-btn:active {
    transform: scale(0.98);
}

.signin-btn:disabled {
    background: var(--mist-deep);
    color: var(--ink-faint);
    cursor: not-allowed;
}

/* OTP Inputs */
.otp-input-group {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
    justify-content: center;
}

@media (min-width: 400px) {
    .otp-input-group {
        gap: 10px;
    }
}

.otp-input {
    width: 44px;
    height: 52px;
    border: 1.5px solid var(--ink-line);
    border-radius: 10px;
    text-align: center;
    font-family: 'Outfit', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ink);
    background: var(--paper);
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    -moz-appearance: textfield;
}

.otp-input::-webkit-outer-spin-button,
.otp-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.otp-input:focus {
    border-color: var(--teal-deep);
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
}

.otp-input.error {
    border-color: var(--error);
    box-shadow: 0 0 0 3px var(--error-tint);
}

.otp-input.filled {
    border-color: var(--ink);
}

@media (min-width: 400px) {
    .otp-input {
        width: 48px;
        height: 56px;
    }
}

/* Resend + back links */
.signin-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
}

.signin-back {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ink-soft);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: color 0.2s ease;
}

.signin-back:hover {
    color: var(--ink);
}

.signin-back svg {
    width: 16px;
    height: 16px;
}

.signin-resend {
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--teal-deep);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.signin-resend:hover {
    color: var(--teal-deep-hover);
}

.signin-resend:disabled {
    color: var(--ink-faint);
    cursor: not-allowed;
}

/* OTP sent number display */
.signin-phone-display {
    font-weight: 600;
    color: var(--ink);
}

/* Loading spinner for button */
.signin-btn .spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: var(--on-ink);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    vertical-align: middle;
    margin-right: 8px;
}

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

/* Sign in / Sign up segmented toggle */
.signin-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--mist-deep);
    border-radius: 12px;
    margin-bottom: 24px;
}

.signin-tab {
    flex: 1;
    padding: 10px 12px;
    border: none;
    border-radius: 9px;
    background: transparent;
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--ink-soft);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.signin-tab:hover {
    color: var(--ink);
}

.signin-tab.is-active {
    background: var(--paper);
    color: var(--ink);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(29, 32, 35, 0.12);
}

/* Social sign-in (Google) */
.signin-social {
    display: flex;
    flex-direction: column;
}

.signin-google-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 20px;
    background: var(--paper);
    color: var(--ink);
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    border: 1.5px solid var(--ink-line);
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
}

.signin-google-btn:hover {
    background: var(--mist-deep);
    border-color: var(--ink-faint);
}

.signin-google-btn:active {
    transform: scale(0.98);
}

.signin-google-btn:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

.signin-google-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.signin-google-btn.loading .signin-google-icon {
    animation: spin 0.6s linear infinite;
}

.signin-social-error {
    font-family: 'Outfit', sans-serif;
    font-size: 0.8rem;
    color: var(--error);
    min-height: 0;
    margin: 0;
    transition: min-height 0.2s ease;
}

.signin-social-error:not(:empty) {
    min-height: 20px;
    margin-top: 8px;
}

/* "or" divider between Google and phone */
.signin-divider {
    display: flex;
    align-items: center;
    text-align: center;
    gap: 12px;
    margin: 20px 0;
    color: var(--ink-faint);
}

.signin-divider::before,
.signin-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--ink-line);
}

.signin-divider span {
    font-family: 'Outfit', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* Legal notice under the sign-in actions */
.signin-legal {
    font-family: 'Outfit', sans-serif;
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--ink-soft);
    margin-top: 20px;
}

.signin-legal a {
    color: var(--teal-deep);
    text-decoration: none;
    font-weight: 500;
}

.signin-legal a:hover {
    text-decoration: underline;
}

/* ========================================
   STICKY BUY BAR
======================================== */
.sticky-buy-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    padding: 12px 16px;
    /* Glassmorphism - solid fallback first for iOS Safari */
    background: rgba(18, 49, 44, 0.85);
    background: rgba(18, 49, 44, 0.7);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transform: translateY(-100%);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    pointer-events: none;
}

.sticky-buy-bar.visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.sticky-buy-bar-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sticky-product-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.sticky-product-name {
    font-family: 'Outfit', sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: white;
    letter-spacing: 0.02em;
    line-height: 1.25;
}

.sticky-edge {
    font-weight: 400;
    letter-spacing: 0.15em;
    font-size: 0.85em;
    opacity: 0.9;
}

.sticky-product-price {
    font-family: 'Outfit', sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.65);
    letter-spacing: 0.03em;
}

/* Conversion CTA — deliberately the loudest element on the bar:
   gradient fill, breathing glow and a shine sweep, at the original
   compact pill size. */
.sticky-buy-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 18px;
    background: linear-gradient(135deg, #2A9D8F 0%, var(--teal-deep) 55%, var(--teal-deep-press) 100%);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 9999px;
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.3s ease, filter 0.25s ease;
    box-shadow: 0 4px 18px rgba(63, 183, 172, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    animation: stickyBuyPulse 2.6s ease-in-out infinite;
}

/* Shine sweep across the button */
.sticky-buy-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -80%;
    width: 45%;
    height: 100%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: skewX(-20deg);
    animation: stickyBuyShine 3.2s ease-in-out infinite;
    pointer-events: none;
}

.sticky-buy-btn:hover {
    transform: scale(1.05);
    filter: brightness(1.06);
    box-shadow: 0 6px 26px rgba(63, 183, 172, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

@keyframes stickyBuyPulse {
    0%, 100% { box-shadow: 0 4px 18px rgba(63, 183, 172, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
    50% { box-shadow: 0 4px 30px rgba(63, 183, 172, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
}

@keyframes stickyBuyShine {
    0%, 55% { left: -80%; }
    100% { left: 130%; }
}

/* Hide header when buy bar is visible */
.header.hidden {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

/* ========================================
   HERO SECTION
======================================== */
.hero {
    position: relative;
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--ink);
}

/* Background Video */
.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    pointer-events: none;
}

/* Gradient Overlay */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.5) 0%,
        rgba(0, 0, 0, 0.2) 30%,
        rgba(0, 0, 0, 0.2) 60%,
        rgba(0, 0, 0, 0.7) 100%
    );
    z-index: 2;
}

/* Hero Title Container */
.hero-title-container {
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    text-align: center;
    width: 100%;
    padding: 0 20px;
}

/* Hero Title - Reduced spacing */
.hero-title {
    font-size: 2.5rem;
    font-weight: 300;
    color: white;
    line-height: 1.2;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.02em;
}

@media (min-width: 640px) {
    .hero-title {
        font-size: 3.5rem;
    }
}

@media (min-width: 768px) {
    .hero-title {
        font-size: 4.5rem;
    }
}

@media (min-width: 1024px) {
    .hero-title {
        font-size: 5rem;
    }
}

.title-hawaa {
    font-weight: 400;
    color: white;
}

.title-edge {
    font-weight: 600;
    letter-spacing: 0.05em;
    color: white;
}

/* Hero Bottom - CTA Buttons */
.hero-bottom {
    position: absolute;
    bottom: 60px;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    justify-content: center;
    padding: 0 20px;
}

@media (min-width: 640px) {
    .hero-bottom {
        bottom: 80px;
    }
}

/* CTA Container */
.cta-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 360px;
}

@media (min-width: 640px) {
    .cta-container {
        flex-direction: row;
        gap: 16px;
        max-width: 420px;
    }
}

/* CTA Buttons - Glassmorphism Style */
.cta-btn {
    position: relative;
    flex: 1;
    padding: 14px 28px;
    border-radius: 9999px;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.cta-btn:hover {
    transform: scale(1.05);
}

.cta-btn span {
    position: relative;
    z-index: 10;
    font-weight: 500;
    font-size: 0.9rem;
    letter-spacing: 0.025em;
    white-space: nowrap;
}

@media (min-width: 640px) {
    .cta-btn span {
        font-size: 1rem;
    }
}

/* Primary CTA */
.cta-primary {
    background: var(--teal-deep);
    border: 1px solid transparent;
}

.cta-primary span {
    color: var(--on-teal);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.cta-primary:hover {
    background: var(--teal-deep-hover);
    box-shadow: 0 4px 16px var(--shadow-cta);
}

.cta-primary:active {
    background: var(--teal-deep-press);
}

/* Secondary CTA */
.cta-secondary {
    background: transparent;
    border: 1.5px solid var(--on-ink);
}

.cta-secondary span {
    color: var(--on-ink);
}

/* ========================================
   TRUST BADGES SECTION - COMPACT
======================================== */
.trust-badges {
    position: relative;
    padding: 40px 0 16px;
    background: var(--mist);
}

@media (min-width: 640px) {
    .trust-badges {
        padding: 50px 0 20px;
    }
}

.trust-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 16px;
}

@media (min-width: 640px) {
    .trust-container {
        padding: 0 24px;
    }
}

/* Trust Header - Compact */
.trust-header {
    text-align: center;
    margin-bottom: 28px;
}

@media (min-width: 640px) {
    .trust-header {
        margin-bottom: 36px;
    }
}

.trust-subtitle {
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    color: var(--ink-soft);
    text-transform: uppercase;
    margin-bottom: 8px;
    font-weight: 500;
}

@media (min-width: 640px) {
    .trust-subtitle {
        font-size: 0.7rem;
        letter-spacing: 0.2em;
        margin-bottom: 10px;
    }
}

.trust-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ink);
}

@media (min-width: 640px) {
    .trust-title {
        font-size: 1.5rem;
    }
}

@media (min-width: 768px) {
    .trust-title {
        font-size: 1.75rem;
    }
}

/* Badges Grid - Compact */
.badges-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    max-width: 600px;
    margin: 0 auto;
}

@media (min-width: 640px) {
    .badges-grid {
        gap: 24px;
    }
}

@media (min-width: 1024px) {
    .badges-grid {
        gap: 40px;
    }
}

/* Badge Item - Compact */
.badge-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 16px 12px;
}

.badge-icon {
    margin-bottom: 8px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 640px) {
    .badge-icon {
        margin-bottom: 10px;
        height: 72px;
    }
}

@media (min-width: 768px) {
    .badge-icon {
        height: 84px;
    }
}

.badge-text {
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--teal-deep);
}

@media (min-width: 640px) {
    .badge-text {
        font-size: 0.75rem;
    }
}

@media (min-width: 768px) {
    .badge-text {
        font-size: 0.85rem;
    }
}

/* Badge Images - uniform size, horizontally aligned */
.badge-img {
    height: 56px;
    width: auto;
    object-fit: contain;
    display: block;
}

@media (min-width: 640px) {
    .badge-img {
        height: 72px;
    }
}

@media (min-width: 768px) {
    .badge-img {
        height: 84px;
    }
}

/* Warranty Map - "1 Yr" overlaid inside the India map */
.warranty-map {
    position: relative;
    display: inline-block;
}

.warranty-map-text {
    position: absolute;
    top: 45%;
    left: 43%;
    transform: translate(-50%, -50%);
    color: var(--on-teal);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    pointer-events: none;
}

@media (min-width: 640px) {
    .warranty-map-text {
        font-size: 0.85rem;
    }
}

@media (min-width: 768px) {
    .warranty-map-text {
        font-size: 1rem;
    }
}

/* ========================================
   AQI CHECKER SECTION - SEAMLESS
======================================== */
.aqi-section {
    padding: 16px;
    background: var(--mist);
    display: flex;
    justify-content: center;
}

@media (min-width: 640px) {
    .aqi-section {
        padding: 20px 24px;
    }
}

.aqi-checker {
    background: var(--paper);
    border-radius: 24px;
    padding: 40px 24px 50px;
    max-width: 420px;
    width: 100%;
    text-align: center;
    box-shadow: 0 8px 30px var(--shadow-tint-sm);
}

@media (min-width: 640px) {
    .aqi-checker {
        padding: 50px 28px 60px;
    }
}

.aqi-hook {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 6px;
    line-height: 1.3;
}

@media (min-width: 640px) {
    .aqi-hook {
        font-size: 1.2rem;
    }
}

.aqi-subtext {
    font-size: 0.8rem;
    color: var(--ink-soft);
    margin-bottom: 20px;
}

.aqi-input-wrapper {
    position: relative;
    margin-bottom: 16px;
}

.search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--ink-soft);
    pointer-events: none;
}

.aqi-input {
    width: 100%;
    padding: 12px 14px 12px 42px;
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    border: 1px solid var(--ink-line);
    border-radius: 10px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.aqi-input:focus {
    border-color: var(--teal-deep);
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
}

.aqi-input::placeholder {
    color: var(--ink-faint);
}

/* City Suggestions Dropdown */
.city-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--paper);
    border: 1px solid var(--ink-line);
    border-radius: 10px;
    margin-top: 4px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 50;
    display: none;
    box-shadow: 0 4px 12px var(--shadow-tint-md);
}

.city-suggestions.active {
    display: block;
}

.city-suggestion {
    padding: 10px 14px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--ink);
    transition: background 0.15s ease;
}

.city-suggestion:hover {
    background: var(--mist-deep);
}

.city-suggestion:first-child {
    border-radius: 10px 10px 0 0;
}

.city-suggestion:last-child {
    border-radius: 0 0 10px 10px;
}

/* AQI Button */
.aqi-btn {
    width: 100%;
    padding: 14px 24px;
    background: var(--ink);
    color: var(--on-ink);
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    border: none;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.aqi-btn:hover {
    background: var(--ink);
    transform: scale(1.02);
}

.aqi-btn:active {
    transform: scale(0.98);
}

/* Glassmorphism AQI Button */
.aqi-btn-glass {
    width: 100%;
    padding: 14px 24px;
    background: rgba(18, 49, 44, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--on-ink);
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px var(--shadow-tint-lg);
}

.aqi-btn-glass:hover {
    background: rgba(18, 49, 44, 0.85);
    transform: scale(1.02);
    box-shadow: 0 6px 20px var(--shadow-tint-lg);
}

.aqi-btn-glass:active {
    transform: scale(0.98);
}

.aqi-btn-glass.is-loading {
    opacity: 0.7;
    cursor: wait;
    transform: none;
}

/* Inline status/error line under the AQI search box */
.aqi-inline-msg {
    font-size: 0.8rem;
    color: var(--ink-soft);
    margin: -6px 0 14px;
    text-align: center;
}

.aqi-inline-msg.error {
    color: #b3423a;
}

/* AQI Preview Icons */
.aqi-preview-icons {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding: 8px;
    background: var(--mist);
    border-radius: 9999px;
}

.preview-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--paper);
    border-radius: 50%;
    box-shadow: 0 2px 8px var(--shadow-tint-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.preview-icon:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px var(--shadow-tint-md);
}

.preview-emoji {
    font-size: 26px;
    line-height: 1;
}

/* ========================================
   AQI RESULT MODAL
======================================== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(18, 49, 44, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

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

.modal-content {
    background: var(--paper);
    border-radius: 20px;
    padding: 24px;
    max-width: 420px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 20px 60px var(--shadow-tint-lg);
}

@media (min-width: 640px) {
    .modal-content {
        padding: 28px;
    }
}

.modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    background: var(--mist-deep);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.modal-close:hover {
    background: var(--ink-line);
}

.modal-close svg {
    width: 18px;
    height: 18px;
    color: var(--ink-soft);
}

.modal-header {
    text-align: center;
    margin-bottom: 24px;
    padding-top: 8px;
}

.modal-city {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 4px;
}

.modal-aqi {
    font-size: 1rem;
    color: var(--ink);
    font-weight: 500;
}

.aqi-label {
    color: var(--ink-soft);
    font-weight: 400;
}

/* Data provenance line in the AQI modal */
.modal-source {
    font-size: 0.72rem;
    color: var(--ink-soft);
    margin-top: 6px;
}

/* Card Slider */
.card-slider-container {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

.slider-arrow {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    background: var(--mist-deep);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.slider-arrow:hover {
    background: var(--ink-line);
}

.slider-arrow svg {
    width: 18px;
    height: 18px;
    color: var(--ink);
}

.card-slider {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 12px;
    padding: 4px;
}

.card-slider::-webkit-scrollbar {
    display: none;
}

/* Impact Cards */
.impact-card {
    flex: 0 0 calc(100% - 8px);
    scroll-snap-align: start;
    background: var(--mist-deep);
    border-radius: 14px;
    padding: 20px;
    text-align: center;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

@media (min-width: 640px) {
    .impact-card {
        padding: 24px;
    }
}

.card-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
}

.card-icon svg {
    width: 100%;
    height: 100%;
}

.card-title {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--ink-soft);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.card-value {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 6px;
}

@media (min-width: 640px) {
    .card-value {
        font-size: 1.4rem;
    }
}

.card-detail {
    font-size: 0.8rem;
    color: var(--ink-soft);
    line-height: 1.4;
}

/* Slider Dots */
.slider-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ink-line);
    cursor: pointer;
    transition: all 0.2s ease;
}

.dot.active {
    background: var(--ink);
    width: 20px;
    border-radius: 4px;
}

/* ========================================
   GLASSMORPHISM UTILITIES
======================================== */
.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.glass-dark {
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ========================================
   CUSTOM SCROLLBAR
======================================== */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--mist-deep);
}

::-webkit-scrollbar-thumb {
    background: var(--ink-soft);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--ink);
}

/* ========================================
   FEATURE SLIDER SECTION
======================================== */
.feature-section {
    padding: 24px 16px 60px;
    background: var(--mist);
    overflow: hidden;
}

@media (min-width: 640px) {
    .feature-section {
        padding: 32px 24px 80px;
    }
}

/* Feature Header */
.feature-header {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 40px;
}

@media (min-width: 640px) {
    .feature-header {
        margin-bottom: 50px;
    }
}

.feature-subtitle {
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    color: var(--ink-soft);
    text-transform: uppercase;
    margin-bottom: 12px;
    font-weight: 500;
}

@media (min-width: 640px) {
    .feature-subtitle {
        font-size: 0.75rem;
    }
}

.feature-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
}

@media (min-width: 640px) {
    .feature-title {
        font-size: 1.875rem;
    }
}

@media (min-width: 768px) {
    .feature-title {
        font-size: 2.25rem;
    }
}

.feature-title-italic {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
}

/* Feature Slider Wrapper */
.feature-slider-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 10px;
}

/* Feature Slider */
.feature-slider {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 10px 0;
}

.feature-slider::-webkit-scrollbar {
    display: none;
}

@media (min-width: 768px) {
    .feature-slider {
        gap: 20px;
    }
}

/* Feature Card */
.feature-card {
    flex: 0 0 280px;
    scroll-snap-align: start;
}

@media (min-width: 640px) {
    .feature-card {
        flex: 0 0 320px;
    }
}

@media (min-width: 1024px) {
    .feature-card {
        flex: 0 0 calc(25% - 15px);
    }
}

.feature-card-image {
    position: relative;
    height: 380px;
    border-radius: 20px;
    background-size: cover;
    background-position: center;
    background-color: var(--ink-line);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 16px;
}

@media (min-width: 640px) {
    .feature-card-image {
        height: 420px;
        padding: 20px;
    }
}

.feature-card-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.1) 0%,
        rgba(0, 0, 0, 0) 30%,
        rgba(0, 0, 0, 0.5) 100%
    );
    pointer-events: none;
}

/* Feature Tag */
.feature-tag {
    position: relative;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 8px 12px;
    border-radius: 20px;
    align-self: flex-start;
}

.feature-tag svg {
    width: 16px;
    height: 16px;
    color: white;
}

.feature-tag span {
    font-size: 0.75rem;
    font-weight: 500;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Feature Expand Button */
.feature-expand-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 5;
}

@media (min-width: 640px) {
    .feature-expand-btn {
        top: 20px;
        right: 20px;
    }
}

.feature-expand-btn:hover {
    background: rgba(255, 255, 255, 0.35);
    transform: scale(1.1);
}

.feature-expand-btn svg {
    width: 20px;
    height: 20px;
    color: white;
}

/* Feature Card Content */
.feature-card-content {
    position: relative;
    z-index: 5;
}

.feature-card-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.25rem;
    font-weight: 500;
    color: white;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

@media (min-width: 640px) {
    .feature-card-title {
        font-size: 1.4rem;
    }
}

.feature-card-title .italic {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
}

/* Feature Controls */
.feature-controls {
    max-width: 1200px;
    margin: 30px auto 0;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

@media (min-width: 640px) {
    .feature-controls {
        margin-top: 40px;
    }
}

/* Feature Progress Bar */
.feature-progress {
    flex: 1;
    height: 2px;
    background: var(--ink-line);
    border-radius: 2px;
    overflow: hidden;
}

.feature-progress-bar {
    height: 100%;
    width: 25%;
    background: var(--ink);
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* Feature Arrows */
.feature-arrows {
    display: flex;
    gap: 8px;
}

.feature-arrow {
    width: 44px;
    height: 44px;
    background: var(--paper);
    border: 1px solid var(--ink-line);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.feature-arrow:hover {
    background: var(--ink);
    border-color: var(--ink);
}

.feature-arrow:hover svg {
    color: var(--on-ink);
}

.feature-arrow svg {
    width: 20px;
    height: 20px;
    color: var(--ink);
    transition: color 0.2s ease;
}

/* ========================================
   FEATURE EXPANDED OVERLAY
======================================== */
.feature-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(18, 49, 44, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.feature-overlay.active {
    display: flex;
    opacity: 1;
}

.feature-expanded {
    background: var(--paper);
    border-radius: 24px;
    max-width: 900px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 60px var(--shadow-tint-lg);
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.feature-overlay.active .feature-expanded {
    transform: scale(1);
}

@media (min-width: 768px) {
    .feature-expanded {
        flex-direction: row;
        max-height: 550px;
    }
}

/* Expanded Image */
.feature-expanded-image {
    width: 100%;
    height: 250px;
    background-size: cover;
    background-position: center;
    background-color: var(--ink-line);
    position: relative;
}

@media (min-width: 768px) {
    .feature-expanded-image {
        width: 45%;
        height: auto;
        min-height: 100%;
    }
}

/* Expanded Content */
.feature-expanded-content {
    flex: 1;
    padding: 24px;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

@media (min-width: 640px) {
    .feature-expanded-content {
        padding: 32px;
    }
}

@media (min-width: 768px) {
    .feature-expanded-content {
        padding: 40px;
    }
}

/* Expanded Tag */
.feature-expanded-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--mist-deep);
    padding: 8px 14px;
    border-radius: 20px;
    align-self: flex-start;
    margin-bottom: 16px;
}

.feature-expanded-tag svg {
    width: 16px;
    height: 16px;
    color: var(--ink);
}

.feature-expanded-tag span {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Close Button */
.feature-close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    background: var(--mist-deep);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
    z-index: 10;
}

@media (min-width: 640px) {
    .feature-close-btn {
        top: 20px;
        right: 20px;
    }
}

.feature-close-btn:hover {
    background: var(--ink-line);
}

.feature-close-btn svg {
    width: 18px;
    height: 18px;
    color: var(--ink-soft);
}

/* Expanded Title */
.feature-expanded-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 12px;
    line-height: 1.3;
}

@media (min-width: 640px) {
    .feature-expanded-title {
        font-size: 1.875rem;
    }
}

.feature-expanded-title .italic {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
}

/* Expanded Description */
.feature-expanded-desc {
    font-size: 0.95rem;
    color: var(--ink-soft);
    line-height: 1.6;
    margin-bottom: 24px;
}

@media (min-width: 640px) {
    .feature-expanded-desc {
        font-size: 1rem;
    }
}

/* Testimonial */
.feature-testimonial {
    background: var(--mist-deep);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 24px;
}

@media (min-width: 640px) {
    .feature-testimonial {
        padding: 24px;
    }
}

.testimonial-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 2px;
}

.testimonial-label {
    font-size: 0.75rem;
    color: var(--ink-soft);
    margin-bottom: 12px;
}

.testimonial-quote {
    font-family: 'Playfair Display', serif;
    font-size: 1rem;
    font-style: italic;
    color: var(--ink);
    line-height: 1.5;
}

@media (min-width: 640px) {
    .testimonial-quote {
        font-size: 1.1rem;
    }
}

/* Learn More Link */
.feature-learn-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--ink);
    color: var(--on-ink);
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: 9999px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.feature-learn-more:hover {
    background: var(--ink);
    transform: translateY(-1px);
}

/* Feature Expanded Actions */
.feature-expanded-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: auto;
}

.feature-expanded-nav {
    display: flex;
    gap: 8px;
}

.feature-expanded-arrow {
    width: 44px;
    height: 44px;
    background: var(--mist-deep);
    border: 1px solid var(--ink-line);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.feature-expanded-arrow:hover {
    background: var(--ink);
}

.feature-expanded-arrow:hover svg {
    color: var(--on-ink);
}

.feature-expanded-arrow svg {
    width: 18px;
    height: 18px;
    color: var(--ink);
    transition: color 0.3s ease;
}

/* ========================================
   REPLACEMENT FILTER SECTION
======================================== */
.filter-section {
    background: var(--mist-deep);
    padding: 32px 16px;
    position: relative;
    overflow: hidden;
}

.filter-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 300px;
    height: 300px;
    background: rgba(18, 49, 44, 0.04);
    border-radius: 50%;
}

@media (min-width: 640px) {
    .filter-section {
        padding: 40px 24px;
    }
}

.filter-section-inner {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 1;
}

.filter-badge {
    display: inline-block;
    padding: 6px 16px;
    background: var(--teal-tint);
    backdrop-filter: blur(10px);
    border: 1px solid var(--teal-deep);
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--teal-deep);
    margin-bottom: 16px;
}

.filter-content {
    margin-bottom: 20px;
}

.filter-label {
    font-size: 0.9rem;
    color: var(--ink);
    margin-bottom: 8px;
}

.filter-price-row {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    margin-bottom: 8px;
}

.filter-price {
    font-family: 'Outfit', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1;
}

@media (min-width: 640px) {
    .filter-price {
        font-size: 3rem;
    }
}

.filter-price-note {
    font-size: 1rem;
    color: var(--ink-soft);
}

.filter-desc {
    font-size: 0.85rem;
    color: var(--ink-soft);
}

.filter-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    background: var(--ink);
    color: var(--on-ink);
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 9999px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px var(--shadow-tint-md);
}

.filter-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--shadow-tint-lg);
}


/* ========================================
   CERTIFICATION SECTION
======================================== */
/* Evidence chapter (comparison → reports → lab charts) sits on the
   brightest surface — paper — so the proof story reads as one clean,
   clinical band. Cards inside lift to white for separation. */
.certification-section {
    padding: 50px 16px 60px;
    background: var(--paper);
}

@media (min-width: 640px) {
    .certification-section {
        padding: 60px 24px 70px;
    }
}

.certification-container {
    max-width: 1000px;
    margin: 0 auto;
}

/* Certification Header */
.certification-header {
    text-align: center;
    margin-bottom: 50px;
}

@media (min-width: 640px) {
    .certification-header {
        margin-bottom: 60px;
    }
}

.certification-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 12px;
    line-height: 1.3;
}

@media (min-width: 640px) {
    .certification-title {
        font-size: 2rem;
    }
}

@media (min-width: 768px) {
    .certification-title {
        font-size: 2.25rem;
    }
}

.certification-title .italic {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
}

.certification-subtitle {
    font-size: 0.95rem;
    color: var(--ink-soft);
    line-height: 1.6;
    max-width: 560px;
    margin: 0 auto;
}

@media (min-width: 640px) {
    .certification-subtitle {
        font-size: 1rem;
    }
}

/* ========================================
   MINI COMPARISON (Mila-style, side by side)
======================================== */
.cmpm {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    max-width: 720px;
    margin: 0 auto;
}

.cmpm-col {
    padding: 24px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.cmpm-col--hawaa {
    background: var(--mist-deep);
    border-radius: 20px;
}

@media (min-width: 640px) {
    .cmpm-col {
        padding: 32px 24px;
    }
}

.cmpm-compare-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 12px;
}

.cmpm-pill {
    display: inline-flex;
    align-items: center;
    background: #FFFFFF;   /* lifted above the paper section surface */
    border-radius: 999px;
    padding: 10px 20px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink);
    box-shadow: 0 2px 10px var(--shadow-tint-sm);
    margin-bottom: 20px;
    white-space: nowrap;
}

.cmpm-figure {
    width: 100%;
    height: 140px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-bottom: 18px;
}

.cmpm-figure img {
    max-height: 100%;
    max-width: 85%;
    object-fit: contain;
}

/* Rival figure fills the space the compare-to label + pill occupy on the left */
.cmpm-col--rival .cmpm-figure {
    height: 236px;
    color: var(--ink);
}

/* Rival strip — native scroll-snap, same rules as the comparison page's
   .cmp-scroll, so swiping tracks the finger with real momentum */
.cmpm-scroll {
    min-width: 0;
    display: flex;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.cmpm-scroll::-webkit-scrollbar {
    display: none;
}

.cmpm-scroll .cmpm-col--rival {
    flex: 0 0 100%;
    scroll-snap-align: center;
}

.cmpm-figure svg {
    height: 170px;
    width: auto;
}

@media (min-width: 640px) {
    .cmpm-figure {
        height: 170px;
    }

    .cmpm-col--rival .cmpm-figure {
        height: 266px;
    }

    .cmpm-figure svg {
        height: 200px;
    }
}

.cmpm-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.3;
    margin-bottom: 18px;
    min-height: 2.6em;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

@media (min-width: 640px) {
    .cmpm-name {
        font-size: 1.15rem;
    }
}

.cmpm-stats {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
}

.cmpm-stat-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ink-soft);
    margin-bottom: 2px;
}

.cmpm-stat-value {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ink);
}

@media (min-width: 640px) {
    .cmpm-stat-label {
        font-size: 0.85rem;
    }

    .cmpm-stat-value {
        font-size: 1.05rem;
    }
}

.cmpm-nav {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 28px;
}

.cmpm-arrow {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid var(--ink);
    background: transparent;
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cmpm-arrow:hover {
    background: var(--ink);
    color: var(--on-ink);
}

.cmpm-arrow svg {
    width: 18px;
    height: 18px;
}

/* Detailed comparison CTA under the mini comparison */
.cmpm-cta-row {
    text-align: center;
    margin-top: 22px;
}

.certification-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 9999px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
}

.certification-btn svg {
    width: 16px;
    height: 16px;
}

/* ========================================
   LAB TEST REPORTS (document grid + lightbox)
======================================== */
.reports-section {
    padding: 50px 16px 60px;
    background: var(--paper);
}

@media (min-width: 640px) {
    .reports-section {
        padding: 60px 24px 70px;
    }
}

.reports-container {
    max-width: 960px;
    margin: 0 auto;
}

/* The dossier: a fanned stack of report "papers" + a numbered index.
   Selecting an index row shuffles that report to the top of the stack;
   tapping the top paper opens the zoom lightbox. */
.dossier {
    display: flex;
    flex-direction: column;
    gap: 40px;
    max-width: 420px;
    margin: 0 auto;
}

@media (min-width: 880px) {
    .dossier {
        flex-direction: row-reverse;   /* stack right, index left */
        align-items: center;
        justify-content: center;
        gap: 72px;
        max-width: 860px;
    }
}

/* Stage — papers are stacked absolutely inside; padding leaves room
   for the fanned rotation so nothing clips */
.dossier-stage {
    position: relative;
    width: min(250px, 72vw);
    aspect-ratio: 3 / 4;
    margin: 10px auto 26px;
}

@media (min-width: 880px) {
    .dossier-stage {
        width: 280px;
        margin: 10px 0 16px;
        flex-shrink: 0;
    }
}

.dossier-paper {
    position: absolute;
    inset: 0;
    background: #FFFFFF;   /* lifted above the paper section surface */
    border: 1px solid var(--ink-line-soft);
    border-radius: 14px;
    overflow: hidden;
    padding: 0;
    cursor: pointer;
    font-family: 'Outfit', sans-serif;
    box-shadow: 0 18px 36px -22px var(--shadow-tint-lg);
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
}

/* Fanned stack positions — stack-0 is the active (top) paper */
.dossier-paper.stack-0 {
    transform: none;
    z-index: 4;
}

.dossier-paper.stack-1 {
    transform: rotate(-5deg) translate(-14px, 10px);
    z-index: 3;
    pointer-events: none;
}

.dossier-paper.stack-2 {
    transform: rotate(4deg) translate(14px, 16px);
    z-index: 2;
    pointer-events: none;
}

.dossier-paper.stack-3 {
    transform: rotate(-2deg) translate(0, 22px);
    z-index: 1;
    pointer-events: none;
}

.dossier-paper.stack-0:hover {
    transform: translateY(-4px);
    box-shadow: 0 26px 44px -22px var(--shadow-tint-lg);
}

/* Selecting/deselecting papers is a pointer gesture — no focus ring on
   the papers or index rows (overrides the site-wide focus-visible rule) */
.dossier-paper:focus,
.dossier-paper:focus-visible,
.dossier-row:focus,
.dossier-row:focus-visible,
.page-landing .dossier-paper:focus-visible,
.page-landing .dossier-row:focus-visible {
    outline: none;
}

/* CSS letterhead — a designed certificate that shows until the real
   report scan loads on top of it */
.dossier-letterhead {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px 18px;
}

.dossier-brand {
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-faint);
    padding-bottom: 12px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--ink-line-soft);
    width: 100%;
}

.dossier-doc-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 14px;
}

.dossier-doc-stat {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1.9rem;
    line-height: 1.1;
    color: var(--teal-deep);
}

.dossier-doc-sub {
    font-size: 0.68rem;
    color: var(--ink-soft);
    margin-top: 4px;
    margin-bottom: 18px;
}

/* Suggestion of document body text */
.dossier-lines {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
}

.dossier-lines i {
    display: block;
    height: 3px;
    border-radius: 2px;
    background: var(--ink-line-soft);
}

.dossier-lines i:nth-child(1) { width: 82%; }
.dossier-lines i:nth-child(2) { width: 70%; }
.dossier-lines i:nth-child(3) { width: 76%; }

/* Rubber-stamp verification mark */
.dossier-stamp {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) rotate(-8deg);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border: 1.5px solid var(--teal-deep);
    border-radius: 6px;
    color: var(--teal-deep);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.85;
}

.dossier-stamp svg {
    width: 11px;
    height: 11px;
}

.dossier-paper img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dossier-paper img.is-missing {
    display: none;
}

/* Zoom badge only invites on the top paper */
.dossier-paper .report-zoom {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.dossier-paper.stack-0 .report-zoom {
    opacity: 1;
}

/* Numbered index — echoes the FAQ dividers and blog numerals */
.dossier-index {
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 880px) {
    .dossier-index {
        width: 340px;
        flex-shrink: 0;
    }
}

.dossier-index li + li .dossier-row {
    border-top: 1px solid var(--ink-line);
}

.dossier-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 15px 2px;
    background: none;
    border: 0;
    cursor: pointer;
    text-align: left;
    font-family: 'Outfit', sans-serif;
    transition: opacity 0.25s ease;
    opacity: 0.55;
}

.dossier-row:hover,
.dossier-row.active {
    opacity: 1;
}

.dossier-num {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--teal-deep);
    min-width: 30px;
}

.dossier-row-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.dossier-row-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink);
}

.dossier-row-stat {
    font-size: 0.75rem;
    color: var(--ink-soft);
}

.dossier-row-arrow {
    width: 16px;
    height: 16px;
    color: var(--ink-faint);
    transition: transform 0.25s ease, color 0.25s ease;
}

.dossier-row.active .dossier-row-arrow {
    color: var(--teal-deep);
    transform: translateX(2px);
}

.report-zoom {
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(18, 49, 44, 0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--on-ink);
    display: flex;
    align-items: center;
    justify-content: center;
}

.report-zoom svg {
    width: 14px;
    height: 14px;
}

/* Report lightbox */
.report-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1200;   /* above the fixed header and sticky buy bar */
    background: rgba(18, 49, 44, 0.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.report-lightbox.open {
    opacity: 1;
    pointer-events: auto;
}

.report-lightbox-body {
    max-width: min(540px, 100%);
    width: 100%;
    margin: 0;
    text-align: center;
    transform: scale(0.96);
    transition: transform 0.3s ease;
}

.report-lightbox.open .report-lightbox-body {
    transform: none;
}

#report-lightbox-img {
    width: 100%;
    max-height: 76vh;
    object-fit: contain;
    border-radius: 12px;
    background: var(--paper);
}

.report-lightbox-fallback {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 90px 24px;
    background: var(--paper);
    border-radius: 12px;
    color: var(--ink-soft);
    font-size: 0.9rem;
    line-height: 1.6;
}

.report-lightbox-fallback svg {
    width: 40px;
    height: 40px;
    color: var(--ink-faint);
}

#report-lightbox-caption {
    margin-top: 14px;
    color: var(--on-ink);
    font-size: 0.9rem;
}

.report-lightbox-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, 0.14);
    color: var(--on-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease;
}

.report-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.26);
}

.report-lightbox-close svg {
    width: 18px;
    height: 18px;
}

/* ========================================
   LAB REPORTS (chart card + chips + fun fact)
======================================== */
.lab-section {
    padding: 50px 16px 60px;
    background: var(--paper);
}

@media (min-width: 640px) {
    .lab-section {
        padding: 60px 24px 70px;
    }
}

.lab-container {
    max-width: 640px;
    margin: 0 auto;
}

.lab-card {
    background: #FFFFFF;   /* lifted above the paper section surface */
    border: 1px solid var(--ink-line-soft);
    border-radius: 20px;
    padding: 28px 20px;
    box-shadow: 0 8px 30px var(--shadow-tint-sm);
}

@media (min-width: 640px) {
    .lab-card {
        padding: 36px 32px;
    }
}

.lab-card-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ink);
    text-align: center;
    line-height: 1.4;
    margin-bottom: 18px;
}

@media (min-width: 640px) {
    .lab-card-title {
        font-size: 1.3rem;
    }
}

.lab-card-title strong {
    color: var(--teal-deep);
}

.lab-legend {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ink-soft);
}

.lab-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.lab-legend-swatch {
    width: 22px;
    height: 3px;
    border-radius: 2px;
    background: var(--teal-deep);
}

.lab-legend-swatch--grad {
    background: linear-gradient(90deg, var(--error), var(--warning), var(--teal-deep));
}

.lab-legend-swatch--dash {
    background: repeating-linear-gradient(90deg, var(--ink-faint) 0 4px, transparent 4px 8px);
}

.lab-chart svg {
    display: block;
    width: 100%;
    height: auto;
}

.lab-footnote {
    font-size: 0.8rem;
    color: var(--ink-soft);
    line-height: 1.55;
    border-top: 1px solid var(--ink-line-soft);
    padding-top: 14px;
    margin: 6px 0 18px;
}

.lab-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.lab-chip {
    border: none;
    background: var(--mist);
    border-radius: 999px;
    padding: 10px 16px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink);
    box-shadow: 0 2px 8px var(--shadow-tint-sm);
    cursor: pointer;
    transition: all 0.2s ease;
}

.lab-chip:hover {
    background: var(--mist-deeper);
}

.lab-chip.active {
    background: var(--ink);
    color: var(--on-ink);
}

.lab-funfact {
    text-align: center;
    margin-top: 44px;
}

.lab-funfact-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 12px;
}

.lab-funfact-text {
    font-size: 0.95rem;
    color: var(--ink-soft);
    line-height: 1.6;
    max-width: 480px;
    margin: 0 auto;
}

@media (min-width: 640px) {
    .lab-funfact-text {
        font-size: 1.05rem;
    }
}

/* ========================================
   TESTIMONIALS SECTION
======================================== */
.testimonials-section {
    padding: 60px 16px 70px;
    background: var(--mist-deep);
}

@media (min-width: 640px) {
    .testimonials-section {
        padding: 80px 24px 90px;
    }
}

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

.testimonials-header {
    text-align: center;
    margin-bottom: 40px;
}

@media (min-width: 640px) {
    .testimonials-header {
        margin-bottom: 50px;
    }
}

.testimonials-subtitle {
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    color: var(--ink-soft);
    text-transform: uppercase;
    margin-bottom: 12px;
    font-weight: 500;
}

.testimonials-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
}

@media (min-width: 640px) {
    .testimonials-title {
        font-size: 2rem;
    }
}

.testimonials-title .italic {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
}

/* Testimonials Slider */
.testimonials-slider-wrapper {
    padding: 0 10px;
    overflow: hidden;
}

.testimonials-slider {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 10px 16px;
    margin: 0 16px;
}

@media (min-width: 640px) {
    .testimonials-slider {
        gap: 20px;
    }
}

.testimonials-slider::-webkit-scrollbar {
    display: none;
}

/* Testimonial Card */
.testimonial-card {
    flex: 0 0 280px;
    min-width: 280px;
    max-width: 280px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
}

@media (min-width: 640px) {
    .testimonial-card {
        flex: 0 0 320px;
        min-width: 320px;
        max-width: 320px;
    }
}

.testimonial-video-container {
    position: relative;
    height: 380px;
    border-radius: 20px;
    overflow: hidden;
    background: var(--ink);
}

@media (min-width: 640px) {
    .testimonial-video-container {
        height: 420px;
    }
}

.testimonial-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.testimonial-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.testimonial-content {
    flex: 1;
}

.testimonial-person {
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: white;
    margin-bottom: 2px;
}

.testimonial-role {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
}

.testimonial-sound-btn {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.testimonial-sound-btn:hover {
    background: rgba(255, 255, 255, 0.25);
}

.testimonial-sound-btn svg {
    width: 18px;
    height: 18px;
    color: white;
}

.testimonial-sound-btn .hidden {
    display: none;
}

/* Testimonials Controls */
.testimonials-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-top: 30px;
}

.testimonials-dots {
    display: flex;
    gap: 8px;
}

.testimonials-dots .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ink-line);
    cursor: pointer;
    transition: all 0.2s ease;
}

.testimonials-dots .dot.active {
    background: var(--ink);
    width: 20px;
    border-radius: 4px;
}

.testimonials-arrows {
    display: flex;
    gap: 8px;
}

.testimonials-arrow {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    border: 1px solid var(--ink-line-soft);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.testimonials-arrow:hover {
    background: var(--ink);
}

.testimonials-arrow:hover svg {
    color: var(--on-ink);
}

.testimonials-arrow svg {
    width: 18px;
    height: 18px;
    color: var(--ink);
    transition: color 0.2s ease;
}

/* ========================================
   REVIEWS SECTION
======================================== */
.reviews-section {
    padding: 50px 16px 60px;
    background: var(--paper);
}

@media (min-width: 640px) {
    .reviews-section {
        padding: 60px 24px 70px;
    }
}

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

.reviews-header {
    text-align: center;
    margin-bottom: 40px;
}

@media (min-width: 640px) {
    .reviews-header {
        margin-bottom: 50px;
    }
}

.reviews-subtitle {
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    color: var(--ink-soft);
    text-transform: uppercase;
    margin-bottom: 12px;
    font-weight: 500;
}

.reviews-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
}

@media (min-width: 640px) {
    .reviews-title {
        font-size: 2rem;
    }
}

.reviews-title .italic {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
}

/* Reviews Slider */
/* Testimonial carousel base classes (migrated from the retired ascend.theme.css) */
.track-mask { overflow: hidden; }
.track {
    display: flex;
    gap: 22px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}
.track::-webkit-scrollbar { display: none; }
.tcard {
    flex: 0 0 360px;
    scroll-snap-align: start;
    background: var(--paper);
    border: 1px solid var(--ink-line);
    border-radius: 18px;
    padding: 30px;
    box-shadow: 0 20px 40px -28px var(--shadow-tint-lg);
}
.tcard.active { border-color: var(--teal-deep); box-shadow: 0 24px 50px -24px var(--shadow-cta); }
.tcard .stars { color: var(--star); }
.arrow {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid var(--ink-line);
    background: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    cursor: pointer;
}
.arrow.primary { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }

/* Reviews carousel — editorial spotlight quotes, one per view, no card chrome.
   Same scroll-snap track underneath, so swipe / dots / autoplay are unchanged. */
.reviews-section .track-mask {
    padding: 0;
}

#reviews-track {
    gap: 0;
}

#reviews-track .tcard,
#reviews-track .tcard.active {
    flex: 0 0 100%;               /* one spotlight quote per view */
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 0 8px;
}

/* Oversized decorative quote mark */
#reviews-track .tcard::before {
    content: '\201C';
    font-family: 'Playfair Display', serif;
    font-size: 4.5rem;
    line-height: 0.6;
    height: 0.45em;
    color: var(--teal-deep);
    opacity: 0.35;
    margin-bottom: 18px;
}

.review-stars {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-bottom: 20px;
    flex-shrink: 0;
}

.review-stars svg {
    width: 16px;
    height: 16px;
    min-width: 16px;
    max-width: 16px;
    flex-shrink: 0;
}

.review-text {
    font-family: 'Playfair Display', serif;
    font-size: 1.15rem;
    font-style: italic;
    color: var(--ink);
    line-height: 1.7;
    max-width: 640px;
    margin: 0 auto 24px;
}

@media (min-width: 640px) {
    .review-text {
        font-size: 1.35rem;
    }
}

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

.review-name {
    display: inline;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink);
}

.review-name::after {
    content: '\00a0\00b7\00a0';
    font-weight: 400;
    color: var(--ink-soft);
}

.review-location {
    display: inline;
    font-size: 0.9rem;
    color: var(--ink-soft);
}

.review-product {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

/* Reviews Controls — dots / "Read all reviews" CTA, mirrors .blogs-controls */
.reviews-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-top: 30px;
}

.reviews-dots {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* .dot base comes from the theme; button reset + blogs-style active pill */
.reviews-dots .dot {
    border: 0;
    padding: 0;
    background: var(--ink-line);
    cursor: pointer;
}

.reviews-dots .dot.on {
    background: var(--ink);
    width: 20px;
    border-radius: 4px;
}

.reviews-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    background: transparent;
    border: 1.5px solid var(--ink);
    border-radius: 9999px;
    color: var(--ink);
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.reviews-cta:hover {
    background: var(--mist-deep);
}

/* ========================================
   BLOGS SECTION
======================================== */
.blogs-section {
    padding: 50px 16px 60px;
    background: var(--mist);
}

@media (min-width: 640px) {
    .blogs-section {
        padding: 60px 24px 70px;
    }
}

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

.blogs-header {
    text-align: center;
    margin-bottom: 40px;
}

@media (min-width: 640px) {
    .blogs-header {
        margin-bottom: 50px;
    }
}

.blogs-subtitle {
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    color: var(--ink-soft);
    text-transform: uppercase;
    margin-bottom: 12px;
    font-weight: 500;
}

.blogs-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
}

@media (min-width: 640px) {
    .blogs-title {
        font-size: 2rem;
    }
}

.blogs-title .italic {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
}

/* Blogs Slider */
.blogs-slider-wrapper {
    padding: 0 10px;
    overflow: hidden;
}

.blogs-slider {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 10px 16px;
    margin: 0 16px;
}

@media (min-width: 640px) {
    .blogs-slider {
        gap: 20px;
    }
}

.blogs-slider::-webkit-scrollbar {
    display: none;
}

/* Blog Card — premium editorial teaser: a paper panel overlaps the image,
   with a serif index numeral + small-caps tag as the meta line */
.blog-card {
    flex: 0 0 282px;
    min-width: 282px;
    max-width: 282px;
    scroll-snap-align: start;
    display: block;
    text-decoration: none;
}

@media (min-width: 640px) {
    .blog-card {
        flex: 0 0 330px;
        min-width: 330px;
        max-width: 330px;
    }
}

.blog-image {
    position: relative;
    height: 240px;
    border-radius: 20px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-color: var(--mist-deeper);
    transition: transform 0.5s ease;
}

@media (min-width: 640px) {
    .blog-image {
        height: 260px;
    }
}

/* Soft vignette for depth (also dresses up a missing image gracefully) */
.blog-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(18, 49, 44, 0) 45%, rgba(18, 49, 44, 0.22) 100%);
}

.blog-card:hover .blog-image {
    transform: translateY(-4px);
}

/* Overlapping paper panel */
.blog-content {
    position: relative;
    background: var(--paper);
    border-radius: 16px;
    margin: -64px 14px 0;
    padding: 18px 20px 20px;
    box-shadow: 0 16px 32px -20px var(--shadow-tint-lg);
    color: var(--ink);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.blog-card:hover .blog-content {
    transform: translateY(-4px);
    box-shadow: 0 22px 38px -20px var(--shadow-tint-lg);
}

.blog-meta {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 10px;
}

.blog-index {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1.35rem;
    line-height: 1;
    color: var(--teal-deep);
}

.blog-tag {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-soft);
}

.blog-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 8px;
    line-height: 1.35;
    color: var(--ink);
}

@media (min-width: 640px) {
    .blog-title {
        font-size: 1.2rem;
    }
}

.blog-desc {
    font-size: 0.85rem;
    color: var(--ink-soft);
    line-height: 1.5;
    margin-bottom: 12px;
}

.blog-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--teal-deep);
    transition: gap 0.2s ease;
}

.blog-cta::after {
    content: '→';
}

.blog-card:hover .blog-cta {
    gap: 10px;
}

/* Blogs Controls */
.blogs-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-top: 30px;
}

.blogs-dots {
    display: flex;
    gap: 8px;
}

.blogs-dots .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ink-line);
    cursor: pointer;
    transition: all 0.2s ease;
}

.blogs-dots .dot.active {
    background: var(--ink);
    width: 20px;
    border-radius: 4px;
}

.blogs-arrows {
    display: flex;
    gap: 8px;
}

.blogs-arrow {
    width: 40px;
    height: 40px;
    background: rgba(17, 24, 39, 0.06);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(17, 24, 39, 0.1);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.blogs-arrow:hover {
    background: var(--ink);
}

.blogs-arrow:hover svg {
    color: var(--on-ink);
}

.blogs-arrow svg {
    width: 18px;
    height: 18px;
    color: var(--ink);
    transition: color 0.2s ease;
}

/* Read All Blogs Button */
.blogs-read-all-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    background: rgba(17, 24, 39, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(17, 24, 39, 0.1);
    border-radius: 9999px;
    color: var(--ink);
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
}

.blogs-read-all-btn:hover {
    background: var(--ink);
    color: var(--on-ink);
}

/* ========================================
   FAQ SECTION
======================================== */
/* Calm outro: blogs → FAQ → newsletter share one continuous mist
   surface, easing the page down toward the dark footer */
.faq-section {
    padding: 50px 16px 50px;
    background: var(--mist);
}

@media (min-width: 640px) {
    .faq-section {
        padding: 60px 24px 60px;
    }
}

.faq-container {
    max-width: 720px;
    margin: 0 auto;
}

.faq-header {
    text-align: center;
    margin-bottom: 40px;
}

.faq-subtitle {
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    color: var(--ink-soft);
    text-transform: uppercase;
    margin-bottom: 12px;
    font-weight: 500;
}

.faq-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
}

@media (min-width: 640px) {
    .faq-title {
        font-size: 1.75rem;
    }
}

.faq-title .italic {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.faq-item {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--ink-line);
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item:last-child {
    border-bottom: 0;
}

.faq-question {
    width: 100%;
    padding: 20px 2px;
    background: none;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    text-align: left;
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--ink);
    transition: color 0.2s ease;
}

@media (min-width: 640px) {
    .faq-question {
        padding: 22px 2px;
        font-size: 1rem;
    }
}

.faq-question:hover {
    color: var(--teal-deep);
}

.faq-icon {
    font-size: 1.25rem;
    font-weight: 300;
    color: var(--ink-soft);
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.faq-item.active .faq-icon {
    transform: rotate(45deg);
    color: var(--teal-deep);
}

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

.faq-item.active .faq-answer {
    max-height: 200px;
}

.faq-answer p {
    padding: 0 36px 20px 2px;
    font-size: 0.9rem;
    color: var(--ink-soft);
    line-height: 1.6;
}

@media (min-width: 640px) {
    .faq-answer p {
        padding: 0 44px 24px 2px;
    }
}

/* ========================================
   NEWSLETTER SECTION
======================================== */
.newsletter-section {
    padding: 56px 16px 64px;
    background: var(--mist);
}

@media (min-width: 640px) {
    .newsletter-section {
        padding: 72px 24px 80px;
    }
}

.newsletter-container {
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
}

/* Open block — no card chrome */
.newsletter-content {
    background: transparent;
    border: 0;
    padding: 0;
}

.newsletter-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 10px;
}

@media (min-width: 640px) {
    .newsletter-title {
        font-size: 1.8rem;
    }
}

.newsletter-title .italic {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
}

.newsletter-desc {
    font-size: 0.9rem;
    color: var(--ink-soft);
    margin-bottom: 28px;
    line-height: 1.5;
}

/* Single pill: input with the subscribe button nested inside (stacks on
   narrow screens) */
.newsletter-form {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.newsletter-input {
    flex: 1;
    padding: 16px 24px;
    background: var(--paper);
    border: 1px solid var(--ink-line);
    border-radius: 9999px;
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    color: var(--ink);
    outline: none;
    transition: all 0.3s ease;
}

.newsletter-input::placeholder {
    color: var(--ink-faint);
}

.newsletter-input:focus {
    border-color: var(--teal-deep);
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
}

.newsletter-btn {
    padding: 14px 28px;
    background: var(--ink);
    color: var(--on-ink);
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    border: none;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.newsletter-btn:hover {
    background: var(--ink);
    transform: translateY(-1px);
}

@media (min-width: 480px) {
    .newsletter-form {
        display: block;
    }

    .newsletter-input {
        width: 100%;
        padding-right: 148px;
    }

    .newsletter-btn {
        position: absolute;
        top: 5px;
        right: 5px;
        bottom: 5px;
        padding: 0 26px;
    }

    .newsletter-btn:hover {
        transform: none;
        background: var(--teal-deep);
    }
}

.newsletter-disclaimer {
    font-size: 0.75rem;
    color: var(--ink-soft);
    margin-top: 16px;
}

/* ========================================
   FOOTER
======================================== */
.footer {
    background: var(--ink);
    color: rgba(234, 240, 236, 0.72);
    padding: 64px 20px 0;
    overflow: hidden;
}

@media (min-width: 640px) {
    .footer {
        padding: 88px 32px 0;
    }
}

.footer-container {
    max-width: 1100px;
    margin: 0 auto;
}

/* Statement + Contact row */
.footer-statement-row {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-bottom: 36px;
}

@media (min-width: 768px) {
    .footer-statement-row {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
        gap: 48px;
        margin-bottom: 72px;
    }
}

.footer-statement {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.9rem, 4.5vw, 2.9rem);
    font-weight: 300;
    line-height: 1.15;
    color: var(--on-ink);
    letter-spacing: -0.01em;
}

.footer-statement em {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 500;
}

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

@media (min-width: 768px) {
    .footer-contact {
        text-align: right;
        flex-shrink: 0;
    }
}

.footer-contact-mail {
    font-family: 'Outfit', sans-serif;
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--on-ink);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-contact-mail:hover {
    color: var(--teal-on-dark);
}

.footer-contact-link {
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    color: rgba(234, 240, 236, 0.72);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-contact-link:hover {
    color: var(--on-ink);
}

.footer-address {
    font-size: 0.8rem;
    line-height: 1.6;
    color: rgba(234, 240, 236, 0.45);
    margin-top: 8px;
}

/* Footer Links */
.footer-links {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 8px;
}

@media (min-width: 640px) {
    .footer-links {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 40px;
        margin-bottom: 56px;
    }
}

/* Mobile accordions: dividers between rows only — no frame lines */
@media (max-width: 639.98px) {
    .footer-links-column {
        border-bottom: 1px solid rgba(234, 240, 236, 0.1);
    }

    .footer-links-column:last-child {
        border-bottom: none;
    }
}

.footer-links-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 0;
    background: none;
    border: none;
    cursor: pointer;
}

@media (min-width: 640px) {
    .footer-links-header {
        cursor: default;
        padding: 0;
        margin-bottom: 18px;
    }
}

.footer-links-title {
    font-family: 'Outfit', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(234, 240, 236, 0.5);
    margin: 0;
}

.footer-chevron {
    width: 18px;
    height: 18px;
    color: rgba(234, 240, 236, 0.5);
    transition: transform 0.3s ease;
}

@media (min-width: 640px) {
    .footer-chevron {
        display: none;
    }
}

.footer-links-column.active .footer-chevron {
    transform: rotate(180deg);
}

.footer-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
    flex-direction: column;
    gap: 14px;
    padding-bottom: 20px;
}

@media (min-width: 640px) {
    .footer-links-list {
        display: flex;
        padding-bottom: 0;
    }
}

.footer-links-column.active .footer-links-list {
    display: flex;
}

.footer-links-list a {
    font-size: 0.9rem;
    color: rgba(234, 240, 236, 0.72);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-links-list a:hover {
    color: var(--teal-on-dark);
}

/* Footer Bottom */
.footer-bottom {
    padding: 8px 0 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

@media (min-width: 768px) {
    .footer-bottom {
        flex-direction: row;
        justify-content: space-between;
        padding: 24px 0;
        border-top: 1px solid rgba(234, 240, 236, 0.12);
    }
}

.footer-legal {
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer-legal a {
    font-size: 0.8rem;
    color: rgba(234, 240, 236, 0.6);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-legal a:hover {
    color: var(--on-ink);
}

.footer-legal-sep {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(234, 240, 236, 0.35);
}

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

.footer-social-link {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: rgba(234, 240, 236, 0.6);
    transition: color 0.2s ease, background 0.2s ease;
}

.footer-social-link:hover {
    color: var(--on-ink);
    background: rgba(234, 240, 236, 0.08);
}

.footer-social-link svg {
    width: 18px;
    height: 18px;
}

.footer-copyright {
    font-size: 0.8rem;
    color: rgba(234, 240, 236, 0.6);
}

/* Oversized closing wordmark */
.footer-wordmark {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: clamp(4.5rem, 19vw, 15rem);
    line-height: 0.72;
    letter-spacing: -0.03em;
    text-align: center;
    background: linear-gradient(180deg, rgba(234, 240, 236, 0.12) 0%, rgba(234, 240, 236, 0.02) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    user-select: none;
    pointer-events: none;
    transform: translateY(0.06em);
}

/* ========================================
   BUY PAGE — Veloretti-inspired Redesign
======================================== */

/* Buy Page Palette — themed per selected colourway. Almond Beige (default)
   uses the site-wide Monsoon Mist tokens as-is: --mist page background,
   --paper elevated surfaces (cards, cart, details popup), and a
   mist-deep → mist-deeper gradient for the product stage. Space Grey
   swaps the token set for cool graphite via .buy-theme-grey on <body>. */
body.buy-page {
    /* Almond Beige — Monsoon Mist. rgba values below are --mist and
       --paper with alpha, for the blurred fixed bars. */
    --buy-header-bg: rgba(234, 240, 236, 0.92);
    --buy-stage-grad: linear-gradient(180deg, var(--mist-deep) 0%, var(--mist-deeper) 100%);
    --buy-sticky-bg: rgba(247, 250, 248, 0.96);
    --buy-sticky-bg-desktop: rgba(247, 250, 248, 0.98);
}

body.buy-page.buy-theme-grey {
    /* Space Grey — cool graphite */
    --mist:        #EDEEF0;
    --mist-deep:   #E2E4E7;
    --mist-deeper: #D4D7DB;
    --paper:       #FAFBFC;
    --ink:         #1D2023;
    --ink-soft:    rgba(29, 32, 35, 0.62);
    --ink-faint:   rgba(29, 32, 35, 0.38);
    --ink-line:    rgba(29, 32, 35, 0.16);
    --ink-line-soft: rgba(29, 32, 35, 0.08);
    --teal-deep:       #2E3238;   /* accent goes graphite: CTAs, active borders */
    --teal-deep-hover: #22262B;
    --teal-deep-press: #17191D;
    --teal-tint:       rgba(46, 50, 56, 0.10);
    --teal-tint-soft:  rgba(46, 50, 56, 0.05);
    --on-teal:         #F5F6F7;
    --on-ink:          #EDEEF0;
    --shadow-tint:     rgba(29, 32, 35, 0.14);
    --shadow-tint-sm:  rgba(29, 32, 35, 0.07);
    --shadow-tint-md:  rgba(29, 32, 35, 0.14);
    --shadow-tint-lg:  rgba(29, 32, 35, 0.28);
    --shadow-cta:      rgba(29, 32, 35, 0.28);
    --focus-ring:      #2E3238;
    --buy-header-bg: rgba(237, 238, 240, 0.92);
    --buy-sticky-bg: rgba(250, 251, 252, 0.96);
    --buy-sticky-bg-desktop: rgba(250, 251, 252, 0.98);
}

/* Smooth colourway crossfade on the big fixed surfaces */
body.buy-page,
.buy-page .header,
.buy-product-image,
.buy-steps,
.buy-sticky-bottom,
.buy-page .footer {
    transition: background 0.5s ease, background-color 0.5s ease, border-color 0.5s ease;
}

/* Buy Page Body */
.buy-page .header {
    position: fixed;
    background: var(--buy-header-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--ink-line);
}

.buy-page .logo {
    color: var(--ink);
}

/* ---- Main Layout ---- */
.buy-main {
    padding-top: 64px;
    padding-bottom: 140px;
}

@media (min-width: 768px) {
    .buy-main {
        padding-top: 80px;
    }
}

/* ---- Details Column Wrapper (for desktop layout) ---- */
.buy-details-column {
    display: contents;
}

/* ---- Desktop Two-Column Layout ---- */
@media (min-width: 1024px) {
    .buy-main {
        display: flex;
        flex-direction: row;
        min-height: 100vh;
        padding-top: 0;
        padding-bottom: 0;
    }

    .buy-product-image {
        width: 55%;
        position: sticky;
        top: 0;
        height: 100vh;
        flex-shrink: 0;
    }

    .buy-details-column {
        display: flex;
        flex-direction: column;
        width: 45%;
        padding-top: 80px;
    }

    .buy-steps {
        position: sticky;
        top: 0;
        z-index: 50;
    }

    .buy-step-content {
        flex: 1;
    }

    .buy-content-inner {
        max-width: 480px;
        margin: 0 auto;
    }
}

@media (min-width: 1280px) {
    .buy-product-image {
        width: 58%;
    }

    .buy-details-column {
        width: 42%;
    }
}

/* ---- Product Image / Carousel ---- */
.buy-product-image {
    background: var(--buy-stage-grad);
    position: relative;
    overflow: hidden;
}

.buy-carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.buy-carousel-track {
    display: flex;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
    touch-action: pan-y pinch-zoom;
}

.buy-carousel-slide {
    min-width: 100%;
    width: 100%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
}

@media (min-width: 768px) {
    .buy-carousel-slide {
        padding: 60px 40px;
    }
}

.buy-hero-img {
    width: 100%;
    max-width: 480px;
    height: auto;
    display: block;
    object-fit: cover;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

@media (min-width: 768px) {
    .buy-hero-img {
        max-width: 560px;
    }
}

@media (min-width: 1024px) {
    .buy-carousel {
        height: 100%;
    }

    .buy-carousel-track {
        height: 100%;
    }

    .buy-carousel-slide {
        padding: 80px 60px;
        height: 100vh;
    }

    .buy-hero-img {
        max-width: 100%;
        max-height: 70vh;
        object-fit: contain;
    }
}

/* Carousel Counter Badge */
.buy-carousel-counter {
    position: absolute;
    bottom: 16px;
    left: 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--ink-line);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 8px 14px;
    border-radius: 9999px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--ink);
    box-shadow: 0 2px 8px var(--shadow-tint-sm);
}

.buy-carousel-counter svg {
    color: var(--ink-soft);
}

/* Details Button */
.buy-details-btn {
    position: absolute;
    bottom: 16px;
    right: 16px;
    background: var(--ink-line);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: none;
    padding: 8px 20px;
    border-radius: 9999px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--ink);
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px var(--shadow-tint-sm);
}

.buy-details-btn:hover {
    background: var(--paper);
    box-shadow: 0 4px 16px var(--shadow-tint-md);
}

/* ---- Step Navigation ---- */
.buy-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 14px 16px;
    border-bottom: 1px solid var(--ink-line-soft);
    background: var(--paper);
    position: sticky;
    top: 64px;
    z-index: 50;
}

@media (min-width: 768px) {
    .buy-steps {
        top: 80px;
        padding: 16px 24px;
    }
}

@media (min-width: 1024px) {
    .buy-steps {
        top: 0;
        padding: 20px 32px;
        justify-content: flex-start;
        gap: 4px;
    }
}

.buy-step {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 12px;
    background: none;
    border: none;
    font-family: 'Outfit', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--ink-soft);
    cursor: pointer;
    transition: color 0.2s ease;
    white-space: nowrap;
}

.buy-step.active {
    color: var(--ink);
}

.buy-step.completed {
    color: var(--ink-soft);
}

.buy-step-num {
    font-weight: 400;
}

.buy-step.active .buy-step-num {
    font-weight: 600;
}

/* ---- Step Content Sections ---- */
.buy-step-content {
    display: none;
    padding: 32px 20px 24px;
    animation: buyFadeIn 0.3s ease;
}

.buy-step-content.active {
    display: block;
}

@keyframes buyFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (min-width: 768px) {
    .buy-step-content {
        padding: 40px 24px 32px;
    }
}

@media (min-width: 1024px) {
    .buy-step-content {
        padding: 32px 32px 120px;
    }
}

.buy-content-inner {
    max-width: 600px;
    margin: 0 auto;
}

/* ---- Product Title ---- */
.buy-title {
    font-family: 'Outfit', sans-serif;
    font-size: 2rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.15;
    margin-bottom: 4px;
}

@media (min-width: 768px) {
    .buy-title {
        font-size: 2.5rem;
    }
}

.buy-subtitle-text {
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--ink-soft);
    margin-bottom: 8px;
}

/* ---- Price Display ---- */
.buy-price {
    font-family: 'Outfit', sans-serif;
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--ink);
    display: block;
    margin-bottom: 28px;
}

/* ---- Variant Cards (Veloretti Lite/Pro style) ---- */
.buy-variant-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 24px;
}

.buy-variant-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 20px 16px;
    background: var(--paper);
    border: 1.5px solid var(--ink-line-soft);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Outfit', sans-serif;
    min-height: 160px;
    box-shadow: 0 1px 2px var(--shadow-tint-sm);
}

.buy-variant-card:hover {
    border-color: var(--ink-line);
    box-shadow: 0 6px 20px var(--shadow-tint-sm);
    transform: translateY(-1px);
}

.buy-variant-card.active {
    border-color: var(--teal-deep);
    border-width: 2px;
    background: var(--teal-tint-soft);
}

.buy-variant-name {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 8px;
    line-height: 1.2;
}

.buy-variant-desc {
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--ink-soft);
    line-height: 1.5;
    margin-bottom: auto;
    flex: 1;
}

.buy-variant-price {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink);
    margin-top: 16px;
}

/* ---- Filter Plans (inside Purifier step) ---- */
.buy-filter-plans {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s ease, opacity 0.3s ease, margin 0.3s ease;
    margin-bottom: 0;
}

.buy-filter-plans.visible {
    max-height: 400px;
    opacity: 1;
    margin-bottom: 24px;
}

.buy-filter-plans-title {
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 4px;
}

.buy-filter-plans-desc {
    font-family: 'Outfit', sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--ink-soft);
    margin-bottom: 14px;
}

.buy-filter-plan-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.buy-filter-plan-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 14px 16px;
    background: var(--paper);
    border: 1.5px solid var(--ink-line-soft);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Outfit', sans-serif;
    position: relative;
}

.buy-filter-plan-card:hover {
    border-color: var(--ink-line);
}

.buy-filter-plan-card.active {
    border-color: var(--teal-deep);
    border-width: 2px;
    background: var(--teal-tint-soft);
}

.buy-filter-plan-name {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--ink);
}

.buy-filter-plan-detail {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--ink-soft);
    margin-top: 2px;
}

.buy-filter-plan-tag {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 2px 10px;
    background: var(--ink);
    color: var(--on-ink);
    font-size: 0.65rem;
    font-weight: 600;
    border-radius: 9999px;
    letter-spacing: 0.02em;
}

/* ---- Colour Selector ---- */
.buy-colour-section {
    margin-top: 4px;
}

.buy-colour-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 14px;
}

.buy-colour-label {
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink);
}

.buy-colour-name {
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--ink-soft);
}

.buy-colour-swatches {
    display: flex;
    gap: 14px;
}

.buy-colour-swatch {
    width: 42px;
    height: 42px;
    padding: 4px;
    border-radius: 50%;
    border: 1.5px solid transparent;
    background: none;
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.buy-colour-swatch:hover {
    border-color: var(--ink-line);
}

.buy-colour-swatch.active {
    border-color: var(--teal-deep);
    border-width: 2px;
}

.buy-swatch-fill {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px var(--ink-line-soft), inset 0 -2px 4px rgba(18, 49, 44, 0.08);
}

/* ---- Section Headings (Step 2) ---- */
.buy-section-heading {
    font-family: 'Outfit', sans-serif;
    font-size: 2rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.15;
    margin-bottom: 4px;
}

@media (min-width: 768px) {
    .buy-section-heading {
        font-size: 2.5rem;
    }
}

.buy-section-subtext {
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--ink-soft);
    margin-bottom: 28px;
}

/* ---- Accessory Card ---- */
.buy-accessory-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    background: var(--paper);
    border: 1.5px solid var(--ink-line);
    border-radius: 12px;
    margin-bottom: 28px;
}

.buy-accessory-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.buy-accessory-name {
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink);
}

.buy-accessory-detail {
    font-family: 'Outfit', sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--ink-soft);
}

.buy-accessory-action {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.buy-accessory-price {
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink);
}

.buy-accessory-add {
    padding: 8px 18px;
    background: var(--paper);
    border: 1.5px solid var(--ink-line);
    border-radius: 9999px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--ink);
    cursor: pointer;
    transition: all 0.2s ease;
}

.buy-accessory-add:hover {
    border-color: var(--ink-line);
    background: var(--mist-deep);
}

.buy-accessory-add.added {
    background: var(--ink);
    color: var(--on-ink);
    border-color: var(--ink);
}

/* ---- Trust Indicators ---- */
.buy-trust-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 0;
    border-top: 1px solid var(--ink-line-soft);
    margin-top: 28px;
}

.buy-trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1;
    text-align: center;
}

.buy-trust-item svg {
    width: 20px;
    height: 20px;
    color: var(--teal-deep);
}

.buy-trust-item span {
    font-family: 'Outfit', sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--teal-deep);
}

/* ---- What's in the Box ---- */
.buy-inbox-section {
    padding-top: 24px;
    border-top: 1px solid var(--ink-line-soft);
}

.buy-inbox-title {
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 12px;
}

.buy-inbox-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.buy-inbox-list li {
    font-family: 'Outfit', sans-serif;
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--ink-soft);
    padding-left: 20px;
    position: relative;
}

.buy-inbox-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ink-line);
}

/* ---- Details Modal (Full Screen) ---- */
.buy-details-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: var(--paper);
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.buy-details-overlay.active {
    opacity: 1;
    visibility: visible;
}

.buy-details-modal {
    width: 100%;
    height: 100%;
    background: var(--paper);
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.buy-details-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--paper);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    z-index: 10;
    transition: background 0.2s ease;
}

.buy-details-close svg {
    width: 18px;
    height: 18px;
    color: var(--ink);
}

.buy-details-close:hover {
    background: var(--mist-deep);
}

/* Details Carousel */
.buy-details-carousel {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.buy-details-slides {
    display: flex;
    flex: 1;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

.buy-details-slide {
    min-width: 100%;
    width: 100%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.buy-details-slide-img {
    width: 100%;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: var(--buy-stage-grad);
}

.buy-details-slide-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    user-select: none;
    -webkit-user-drag: none;
}

.buy-details-slide-content {
    padding: 28px 24px 16px;
    flex-shrink: 0;
}

.buy-details-slide-content h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 12px;
    line-height: 1.2;
}

.buy-details-slide-content p {
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--ink-soft);
    line-height: 1.6;
    margin-bottom: 8px;
}

/* Details Navigation */
.buy-details-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 16px 24px;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    flex-shrink: 0;
}

.buy-details-arrow {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1.5px solid var(--ink-line);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.buy-details-arrow svg {
    width: 18px;
    height: 18px;
    color: var(--ink);
}

.buy-details-arrow:hover {
    border-color: var(--ink-line);
    background: var(--mist-deep);
}

.buy-details-dots {
    display: flex;
    gap: 8px;
    align-items: center;
}

.buy-details-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ink-line);
    transition: all 0.3s ease;
}

.buy-details-dot.active {
    background: var(--ink);
}

/* ---- Sticky Bottom Bar (Always Visible) ---- */
.buy-sticky-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 90;
    background: var(--buy-sticky-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--ink-line-soft);
    padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}

.buy-sticky-inner {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 600px;
    margin: 0 auto;
}

.buy-sticky-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.buy-sticky-price {
    font-family: 'Outfit', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.2;
}

.buy-sticky-delivery {
    font-family: 'Outfit', sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--ink-soft);
}

.buy-sticky-btn {
    width: 100%;
    padding: 14px 28px;
    background: var(--teal-deep);
    color: var(--on-teal);
    border: none;
    border-radius: 9999px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.buy-sticky-btn:hover {
    background: var(--teal-deep-hover);
    box-shadow: 0 4px 16px var(--shadow-cta);
}

@media (min-width: 1024px) {
    .buy-sticky-bottom {
        left: 55%;
        border-top: 1px solid var(--ink-line-soft);
        padding: 16px 32px;
        background: var(--buy-sticky-bg-desktop);
    }

    .buy-sticky-inner {
        max-width: 480px;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .buy-sticky-btn {
        width: auto;
        padding: 12px 40px;
    }
}

@media (min-width: 1280px) {
    .buy-sticky-bottom {
        left: 58%;
    }
}

/* ---- Buy Page Footer Spacing ---- */
.buy-page .footer {
    padding-bottom: 140px;
}

@media (min-width: 768px) {
    .buy-page .footer {
        padding-bottom: 140px;
    }
}

@media (min-width: 1024px) {
    .buy-page .footer {
        padding-bottom: 80px;
    }
}

/* Cart item count, shown inline next to the "Cart" label in the menu panel.
   Quiet text when empty ("0 items"), teal pill once something is added. */
.cart-badge {
    margin-left: auto;
    font-family: 'Outfit', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--ink-faint);
    white-space: nowrap;
    transition: color 0.2s ease;
}

.cart-badge.has-items {
    background: var(--teal-deep);
    color: var(--on-teal);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 9999px;
    line-height: 1.4;
}

/* Item count next to the drawer title */
.cart-title-count {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ink-soft);
    letter-spacing: 0;
}

/* CTA inside the empty-cart state */
.cart-empty-cta {
    display: inline-flex;
    align-items: center;
    margin-top: 14px;
    padding: 10px 22px;
    background: var(--teal-deep);
    color: var(--on-teal);
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 9999px;
    text-decoration: none;
    transition: background 0.2s ease;
}

.cart-empty-cta:hover {
    background: var(--teal-deep-hover);
}

/* ---- Cart Overlay ---- */
.cart-overlay {
    position: fixed;
    inset: 0;
    z-index: 300;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

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

.cart-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(18, 49, 44, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.cart-panel {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    max-width: 420px;
    background: var(--paper);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: -8px 0 30px var(--shadow-tint-md);
}

.cart-overlay.active .cart-panel {
    transform: translateX(0);
}

/* Cart Header */
.cart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px 16px;
    border-bottom: 1px solid var(--ink-line);
    flex-shrink: 0;
}

.cart-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--ink);
}

.cart-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.cart-close svg {
    width: 18px;
    height: 18px;
    color: var(--ink-soft);
}

.cart-close:hover {
    background: var(--mist-deep);
}

/* Cart Body */
.cart-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    -webkit-overflow-scrolling: touch;
}

.cart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 20px;
    gap: 12px;
}

.cart-empty svg {
    width: 40px;
    height: 40px;
    color: var(--ink-line);
}

.cart-empty p {
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--ink-soft);
}

.cart-empty.hidden {
    display: none;
}

/* Cart Items */
.cart-items {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cart-item {
    display: flex;
    gap: 14px;
    padding: 14px;
    background: var(--mist-deep);
    border-radius: 12px;
}

.cart-item-img {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--mist-deep);
    flex-shrink: 0;
}

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

.cart-item-details {
    flex: 1;
    min-width: 0;
}

.cart-item-name {
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 2px;
}

.cart-item-variant {
    font-family: 'Outfit', sans-serif;
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--ink-soft);
    margin-bottom: 10px;
}

.cart-item-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cart-item-price {
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink);
}

/* Quantity Selector */
.cart-qty {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1.5px solid var(--ink-line);
    border-radius: 8px;
    overflow: hidden;
}

.cart-qty-btn {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--ink);
    transition: background 0.15s ease;
}

.cart-qty-btn:hover {
    background: var(--mist-deep);
}

.cart-qty-btn:active {
    background: var(--ink-line);
}

.cart-qty-val {
    width: 28px;
    text-align: center;
    font-family: 'Outfit', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ink);
    border-left: 1.5px solid var(--ink-line);
    border-right: 1.5px solid var(--ink-line);
    line-height: 30px;
}

/* Cart Footer */
.cart-footer {
    flex-shrink: 0;
    padding: 0 20px 20px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--ink-line-soft);
}

.cart-footer.hidden {
    display: none;
}

/* Cart Upsell */
.cart-upsell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--ink-line);
}

.cart-upsell.hidden {
    display: none;
}

.cart-upsell-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.cart-upsell-name {
    font-family: 'Outfit', sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--ink);
}

.cart-upsell-detail {
    font-family: 'Outfit', sans-serif;
    font-size: 0.65rem;
    font-weight: 400;
    color: var(--ink-soft);
}

.cart-upsell-action {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.cart-upsell-price {
    font-family: 'Outfit', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ink);
}

.cart-upsell-btn {
    padding: 6px 14px;
    background: var(--paper);
    border: 1.5px solid var(--ink-line);
    border-radius: 9999px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--ink);
    cursor: pointer;
    transition: all 0.2s ease;
}

.cart-upsell-btn:hover {
    border-color: var(--ink-line);
    background: var(--mist-deep);
}

.cart-upsell-btn.added {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
}

/* Price Breakdown */
.cart-breakdown-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Outfit', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--ink-soft);
    transition: color 0.2s ease;
}

.cart-breakdown-toggle:hover {
    color: var(--ink);
}

.cart-breakdown-toggle svg {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
}

.cart-breakdown-toggle.open svg {
    transform: rotate(180deg);
}

.cart-breakdown {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.25s ease;
}

.cart-breakdown.visible {
    max-height: 200px;
    opacity: 1;
}

.cart-breakdown-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0;
    font-family: 'Outfit', sans-serif;
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--ink-soft);
}

.cart-free {
    color: var(--success);
    font-weight: 500;
}

/* Cart Total */
.cart-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0 16px;
    border-top: 1px solid var(--ink-line);
    font-family: 'Outfit', sans-serif;
}

.cart-total-row span:first-child {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink);
}

.cart-total-row span:last-child {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
}

/* Checkout Button */
.cart-checkout-btn {
    width: 100%;
    padding: 14px 28px;
    background: var(--teal-deep);
    color: var(--on-teal);
    border: none;
    border-radius: 9999px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.cart-checkout-btn:hover {
    background: var(--teal-deep-hover);
    box-shadow: 0 4px 16px var(--shadow-cta);
}

/* Mobile full-width cart */
@media (max-width: 479px) {
    .cart-panel {
        max-width: 100%;
    }
}

/* ========================================
   EDGE PRODUCT PAGE
======================================== */

/* =============================================
   Edge Hero Section - B&O Inspired Full-Screen
   ============================================= */
.edge-hero {
    position: relative;
    height: 100vh;
    height: 100dvh;
    min-height: 600px;
    overflow: hidden;
    background: var(--ink);
}

.edge-hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.edge-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Gradient overlay - stronger at bottom for content readability */
.edge-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.15) 0%,
        rgba(0, 0, 0, 0) 35%,
        rgba(0, 0, 0, 0.3) 65%,
        rgba(0, 0, 0, 0.7) 100%
    );
}

/* Hero content container - full height flex layout */
.edge-hero-content {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 20px;
    max-width: 1280px;
    margin: 0 auto;
}

/* Product label & tagline block - positioned above bottom bar */
.edge-hero-text {
    margin-bottom: 24px;
}

/* Price + warranty meta line below tagline */
.edge-hero-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.6);
}

.edge-meta-sep {
    opacity: 0.4;
}

.edge-product-label {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.85);
    text-transform: uppercase;
    margin-bottom: 12px;
}

.edge-tagline {
    font-family: 'Outfit', sans-serif;
    font-size: 2rem;
    font-weight: 300;
    color: white;
    line-height: 1.2;
    max-width: 500px;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.edge-tagline .italic {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 500;
}

/* Bottom bar - three columns: chevron/text | price (desktop) | price-inline (mobile) / buy btn (desktop) */
.edge-hero-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    margin-bottom: env(safe-area-inset-bottom, 16px);
}

.edge-hero-bottom-left {
    flex: 0 0 auto;
}

/* "Scroll to Discover" text — hidden on mobile, shown on desktop */
.edge-scroll-text {
    display: none;
    font-family: 'Outfit', sans-serif;
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
}

/* Bouncing chevron — shown on mobile, hidden on desktop */
.edge-scroll-chevron {
    display: block;
    width: 24px;
    height: 24px;
    color: rgba(255, 255, 255, 0.7);
    animation: edge-bounce 2s ease-in-out infinite;
}

@keyframes edge-bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(5px);
    }
}

/* Right column */
.edge-hero-bottom-right {
    flex: 0 0 auto;
}

/* Buy Now button — always visible */
.edge-buy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 32px;
    background: var(--teal-deep);
    border: none;
    border-radius: 9999px;
    color: var(--on-teal);
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.edge-buy-btn:hover {
    background: var(--teal-deep-hover);
    box-shadow: 0 4px 16px var(--shadow-cta);
    transform: scale(1.02);
}

/* ---- Tablet (768px+) ---- */
@media (min-width: 768px) {
    .edge-hero-content {
        padding: 0 48px;
    }

    .edge-hero-text {
        margin-bottom: 32px;
    }

    .edge-product-label {
        font-size: 0.75rem;
        margin-bottom: 16px;
    }

    .edge-tagline {
        font-size: 3rem;
        max-width: 600px;
    }

    .edge-hero-bottom {
        padding: 24px 0;
        margin-bottom: 24px;
    }

    .edge-scroll-chevron {
        width: 28px;
        height: 28px;
    }

    .edge-buy-btn {
        padding: 15px 40px;
        font-size: 1rem;
    }
}

/* ---- Desktop (1024px+) ---- */
@media (min-width: 1024px) {
    .edge-hero-content {
        padding: 0 60px;
    }

    .edge-hero-text {
        margin-bottom: 40px;
    }

    .edge-tagline {
        font-size: 3.5rem;
        max-width: 700px;
    }

    .edge-hero-meta {
        font-size: 0.85rem;
        margin-top: 20px;
    }

    .edge-hero-bottom {
        padding: 28px 0;
        margin-bottom: 32px;
    }

    /* Show text label, hide bouncing chevron */
    .edge-scroll-text {
        display: block;
    }

    .edge-scroll-chevron {
        display: none;
    }

    .edge-buy-btn {
        padding: 16px 52px;
        font-size: 1rem;
    }
}


/* ========================================
   EDGE STACKED SPECS SECTION
======================================== */

.edge-specs-section {
    height: 300vh;
    position: relative;
}

.edge-specs-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

/* Individual spec cards — minimal editorial panels, one accent per card */
.edge-spec-card {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: transform;
    overflow: hidden;
}

/* Per-card backgrounds — restrained, near-monochrome washes */
.edge-spec-card[data-card="0"] {
    z-index: 1;
    transform: translateY(0);
    background: linear-gradient(180deg, #F7FAF8 0%, #EAF0EC 100%);
}

.edge-spec-card[data-card="1"] {
    z-index: 2;
    transform: translateY(100%);
    background: linear-gradient(180deg, #EDF3EF 0%, #DDE7E1 100%);
}

.edge-spec-card[data-card="2"] {
    z-index: 3;
    transform: translateY(100%);
    background: linear-gradient(180deg, #12312C 0%, #0B211D 100%);
}

/* Oversized ghost watermark — editorial depth, not decoration */
.edge-spec-ghost {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(6rem, 26vw, 24rem);
    line-height: 1;
    letter-spacing: -0.02em;
    white-space: nowrap;
    color: var(--ink);
    opacity: 0.035;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

.edge-spec-card[data-card="2"] .edge-spec-ghost {
    color: #ffffff;
    opacity: 0.05;
}

/* Card inner — vertical, generous whitespace */
.edge-spec-card-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 24px;
    max-width: 560px;
    width: 100%;
}

/* Index — subtle, refined */
.edge-spec-index {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.32em;
    color: var(--ink-faint);
    margin-bottom: 28px;
    padding-left: 0.32em;
}

.edge-spec-card[data-card="2"] .edge-spec-index {
    color: rgba(234, 240, 236, 0.38);
}

/* Big stat row */
.edge-spec-stat {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    margin-bottom: 18px;
    line-height: 1;
}

.edge-spec-number {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(4.5rem, 16vw, 9.5rem);
    font-weight: 200;
    color: var(--ink);
    line-height: 0.9;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
}

.edge-spec-card[data-card="2"] .edge-spec-number {
    color: var(--on-ink);
}

.edge-spec-unit {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.1rem, 3vw, 1.75rem);
    font-weight: 300;
    color: var(--ink-faint);
    letter-spacing: 0.01em;
    align-self: flex-end;
    margin-bottom: 0.6em;
}

.edge-spec-card[data-card="2"] .edge-spec-unit {
    color: rgba(234, 240, 236, 0.45);
}

/* Italic serif label */
.edge-spec-label {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: clamp(1.15rem, 2.8vw, 1.7rem);
    font-weight: 400;
    color: var(--ink);
    letter-spacing: 0.01em;
    margin-bottom: 22px;
}

.edge-spec-card[data-card="2"] .edge-spec-label {
    color: var(--on-ink);
}

/* Thin accent rule */
.edge-spec-rule {
    width: 40px;
    height: 1px;
    background: var(--teal-deep);
    opacity: 0.5;
    margin-bottom: 22px;
}

.edge-spec-card[data-card="2"] .edge-spec-rule {
    background: var(--teal-brand);
    opacity: 0.7;
}

/* Description */
.edge-spec-desc {
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--ink-soft);
    line-height: 1.75;
    max-width: 340px;
    margin: 0 auto;
}

.edge-spec-card[data-card="2"] .edge-spec-desc {
    color: rgba(234, 240, 236, 0.6);
}

@media (min-width: 768px) {
    .edge-spec-desc {
        font-size: 0.95rem;
        max-width: 380px;
    }
}

/* Side progress dots — blend so they read over both light & dark cards */
.edge-specs-dots {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    z-index: 10;
    mix-blend-mode: difference;
}

.edge-specs-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transition: background 0.35s ease, transform 0.35s ease;
}

.edge-specs-dot.active {
    background: #ffffff;
    transform: scale(1.4);
}

/* Scroll hint chevron (fades out after first card) */
.edge-specs-scroll-hint {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    opacity: 1;
    transition: opacity 0.4s ease;
}

.edge-specs-scroll-hint.hidden {
    opacity: 0;
    pointer-events: none;
}

.edge-specs-scroll-hint svg {
    width: 22px;
    height: 22px;
    color: rgba(17, 24, 39, 0.28);
    animation: edge-bounce 2.2s ease-in-out infinite;
}

@media (min-width: 768px) {
    .edge-spec-index {
        margin-bottom: 44px;
        font-size: 0.65rem;
    }

    .edge-spec-desc {
        font-size: 0.95rem;
        max-width: 380px;
    }

    .edge-specs-dots {
        right: 32px;
        gap: 9px;
    }

    .edge-specs-dot {
        width: 6px;
        height: 6px;
    }

    .edge-specs-scroll-hint {
        bottom: 36px;
    }
}

@media (min-width: 1024px) {
    .edge-spec-desc {
        font-size: 1rem;
    }
}

/* ========================================
   EDGE GESTURES SECTION
======================================== */

.edge-gestures-section {
    padding: 60px 16px 80px;
    background: var(--mist-deep);
}

.edge-gestures-inner {
    max-width: 340px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.edge-gestures-label {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--ink-soft);
    margin-bottom: 14px;
}

.edge-gestures-title {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.5rem, 5vw, 2.25rem);
    font-weight: 600;
    color: var(--ink);
    text-align: center;
    line-height: 1.3;
    margin-bottom: 40px;
}

.edge-gestures-title .italic {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 500;
}

/* The dark swipeable card */
.edge-gestures-card {
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: 24px;
    background: #111827;
    overflow: hidden;
    position: relative;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    box-shadow: 0 24px 64px var(--shadow-tint-md);
    touch-action: pan-y;
}

.edge-gestures-card:active {
    cursor: grabbing;
}

/* Horizontal slide track */
.edge-gestures-track {
    display: flex;
    width: 400%;
    height: 100%;
    transition: transform 0.42s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

/* Individual gesture slide — images/gifs fill this */
.edge-gesture-slide {
    width: 25%;
    height: 100%;
    overflow: hidden;
}

.edge-gesture-slide img,
.edge-gesture-slide video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Bottom overlay: gradient + text + dots */
.edge-gesture-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 60px 20px 20px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, transparent 100%);
    border-radius: 0 0 24px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    pointer-events: none;
    z-index: 2;
}

/* Gesture info text */
.edge-gesture-info {
    width: 100%;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.edge-gesture-info-item {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    opacity: 0;
    transform: translateY(5px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    text-align: center;
}

.edge-gesture-info-item.active {
    opacity: 1;
    transform: translateY(0);
}

.edge-gesture-action {
    font-family: 'Outfit', sans-serif;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #06b6d4;
}

.edge-gesture-desc {
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.92);
    white-space: nowrap;
}

/* Progress dots */
.edge-gesture-dots {
    display: flex;
    align-items: center;
    gap: 8px;
    pointer-events: auto;
}

.edge-gesture-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.3s ease;
}

.edge-gesture-dot.active {
    background: var(--on-ink);
    transform: scale(1.5);
}

@media (min-width: 640px) {
    .edge-gestures-section {
        padding: 80px 24px 100px;
    }

    .edge-gestures-inner {
        max-width: 360px;
    }
}

/* ========================================
   BLOG LISTING PAGE (blogs.html)
======================================== */

/* Blog Hero */
.bl-hero {
    position: relative;
    min-height: 55vh;
    display: flex;
    align-items: flex-end;
    padding: 0 20px 48px;
    overflow: hidden;
}

@media (min-width: 768px) {
    .bl-hero {
        min-height: 60vh;
        padding: 0 40px 64px;
    }
}

@media (min-width: 1024px) {
    .bl-hero {
        min-height: 65vh;
        padding: 0 60px 80px;
    }
}

.bl-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-color: var(--ink);
}

.bl-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(17, 24, 39, 0.85) 0%,
        rgba(17, 24, 39, 0.4) 50%,
        rgba(17, 24, 39, 0.2) 100%
    );
}

.bl-hero-content {
    position: relative;
    z-index: 2;
    max-width: 680px;
}

.bl-hero-title {
    font-family: 'Outfit', sans-serif;
    font-size: 2.5rem;
    font-weight: 600;
    color: white;
    line-height: 1.1;
    margin-bottom: 16px;
}

@media (min-width: 768px) {
    .bl-hero-title {
        font-size: 3.5rem;
    }
}

@media (min-width: 1024px) {
    .bl-hero-title {
        font-size: 4rem;
    }
}

.bl-hero-desc {
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    max-width: 520px;
}

@media (min-width: 768px) {
    .bl-hero-desc {
        font-size: 1.05rem;
    }
}

/* Category Tabs Bar */
.bl-cats {
    position: sticky;
    top: 64px;
    z-index: 80;
    background: var(--mist);
    border-bottom: 1px solid var(--ink-line);
    transition: box-shadow 0.3s ease;
}

@media (min-width: 640px) {
    .bl-cats {
        top: 80px;
    }
}

.bl-cats.shadow {
    box-shadow: 0 4px 16px var(--shadow-tint-sm);
}

.bl-cats-scroll {
    display: flex;
    gap: 8px;
    padding: 14px 20px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    max-width: 1280px;
    margin: 0 auto;
}

.bl-cats-scroll::-webkit-scrollbar {
    display: none;
}

@media (min-width: 768px) {
    .bl-cats-scroll {
        padding: 16px 40px;
        gap: 10px;
    }
}

@media (min-width: 1024px) {
    .bl-cats-scroll {
        padding: 16px 60px;
    }
}

.bl-cat {
    padding: 10px 22px;
    background: var(--mist-deep);
    color: var(--ink);
    border: 1px solid var(--ink-line);
    border-radius: 9999px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.bl-cat:hover {
    background: var(--mist-deeper);
    border-color: var(--ink-line);
}

.bl-cat.active {
    background: var(--paper);
    color: var(--ink);
    border-color: var(--ink);
}

.bl-cat.active:hover {
    background: var(--paper);
}

/* Blog Listing Section */
.bl-listing {
    padding: 40px 20px 60px;
    background: var(--mist-deep);
    min-height: 50vh;
}

@media (min-width: 768px) {
    .bl-listing {
        padding: 48px 40px 80px;
    }
}

@media (min-width: 1024px) {
    .bl-listing {
        padding: 56px 60px 100px;
    }
}

.bl-listing-wrap {
    max-width: 1200px;
    margin: 0 auto;
}

/* Listing Header */
.bl-listing-header {
    margin-bottom: 8px;
}

.bl-listing-accent {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--teal-deep);
    line-height: 1.2;
}

@media (min-width: 768px) {
    .bl-listing-accent {
        font-size: 2rem;
    }
}

.bl-listing-title {
    font-family: 'Outfit', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.15;
}

@media (min-width: 768px) {
    .bl-listing-title {
        font-size: 2.5rem;
    }
}

.bl-divider {
    border: none;
    border-top: 1px solid var(--ink-line);
    margin: 24px 0 32px;
}

@media (min-width: 768px) {
    .bl-divider {
        margin: 32px 0 40px;
    }
}

/* Blog Cards Grid */
.bl-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px;
}

@media (min-width: 640px) {
    .bl-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
    }
}

@media (min-width: 1024px) {
    .bl-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 36px;
    }
}

/* Blog Card */
.bl-card {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease;
}

.bl-card:hover {
    transform: translateY(-4px);
}

.bl-card.hidden {
    display: none;
}

.bl-card-img {
    width: 100%;
    aspect-ratio: 3 / 2;
    border-radius: 16px;
    background-size: cover;
    background-position: center;
    background-color: #d1d5db;
    margin-bottom: 16px;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

@media (min-width: 768px) {
    .bl-card-img {
        border-radius: 20px;
    }
}

.bl-card:hover .bl-card-img {
    box-shadow: 0 8px 30px var(--shadow-tint-md);
}

.bl-card-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.35;
    margin-bottom: 10px;
}

@media (min-width: 768px) {
    .bl-card-title {
        font-size: 1.25rem;
    }
}

.bl-card-cta {
    display: inline-flex;
    align-items: center;
    font-family: 'Outfit', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ink-soft);
    transition: color 0.2s ease;
}

.bl-card:hover .bl-card-cta {
    color: var(--ink);
}

/* Empty State */
.bl-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--ink-soft);
    font-size: 1rem;
    grid-column: 1 / -1;
}

/* ========================================
   BLOG POST PAGE (blog-post.html)
======================================== */

/* Article Header */
.ba-header {
    padding: 100px 20px 40px;
    background: var(--mist);
}

@media (min-width: 640px) {
    .ba-header {
        padding: 120px 24px 48px;
    }
}

@media (min-width: 768px) {
    .ba-header {
        padding: 130px 40px 56px;
    }
}

.ba-header-wrap {
    max-width: 760px;
    margin: 0 auto;
}

/* Back Link */
.ba-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ink-soft);
    text-decoration: none;
    margin-bottom: 28px;
    transition: color 0.2s ease;
}

.ba-back:hover {
    color: #111827;
}

.ba-back svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Category Tag */
.ba-tag {
    display: inline-block;
    padding: 6px 14px;
    background: #111827;
    color: white;
    font-family: 'Outfit', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    border-radius: 4px;
    margin-bottom: 20px;
}

/* Article Title */
.ba-title {
    font-family: 'Outfit', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.2;
    margin-bottom: 16px;
}

@media (min-width: 640px) {
    .ba-title {
        font-size: 2.5rem;
    }
}

@media (min-width: 768px) {
    .ba-title {
        font-size: 3rem;
    }
}

/* Article Meta */
.ba-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    color: var(--ink-soft);
    font-weight: 400;
}

.ba-meta-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--ink-line);
    flex-shrink: 0;
}

/* Article Body */
.ba-body {
    padding: 0 20px 60px;
    background: var(--mist);
}

@media (min-width: 640px) {
    .ba-body {
        padding: 0 24px 80px;
    }
}

@media (min-width: 768px) {
    .ba-body {
        padding: 0 40px 100px;
    }
}

.ba-body-wrap {
    max-width: 760px;
    margin: 0 auto;
}

/* Featured Image */
.ba-featured-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    background-size: cover;
    background-position: center;
    background-color: #e5e7eb;
    margin-bottom: 36px;
    border: 1px solid var(--ink-line-soft);
}

@media (min-width: 768px) {
    .ba-featured-img {
        border-radius: 20px;
        margin-bottom: 44px;
    }
}

/* Article Content */
.ba-content p {
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    color: var(--ink-soft);
    line-height: 1.75;
    margin-bottom: 20px;
}

@media (min-width: 768px) {
    .ba-content p {
        font-size: 1.05rem;
        margin-bottom: 24px;
    }
}

.ba-content h2 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
    margin-top: 40px;
    margin-bottom: 16px;
}

@media (min-width: 768px) {
    .ba-content h2 {
        font-size: 1.6rem;
        margin-top: 48px;
        margin-bottom: 20px;
    }
}

.ba-content em {
    font-style: italic;
}

.ba-content strong {
    font-weight: 600;
    color: var(--ink);
}

.ba-content ul {
    margin: 0 0 24px 0;
    padding-left: 20px;
}

.ba-content li {
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    color: var(--ink-soft);
    line-height: 1.75;
    margin-bottom: 8px;
}

@media (min-width: 768px) {
    .ba-content li {
        font-size: 1.05rem;
    }
}

/* Inline Image */
.ba-inline-img {
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
    background-color: #e5e7eb;
    margin: 32px 0 12px;
    border: 1px solid var(--ink-line-soft);
}

@media (min-width: 768px) {
    .ba-inline-img {
        border-radius: 16px;
        margin: 40px 0 14px;
    }
}

.ba-img-caption {
    font-family: 'Outfit', sans-serif;
    font-size: 0.8rem !important;
    color: var(--ink-soft) !important;
    font-style: italic;
    text-align: center;
    margin-bottom: 28px !important;
    line-height: 1.5 !important;
}

/* ========================================
   RELATED POSTS SECTION
======================================== */
.ba-related {
    padding: 60px 20px 70px;
    background: var(--mist-deep);
}

@media (min-width: 768px) {
    .ba-related {
        padding: 80px 40px 90px;
    }
}

@media (min-width: 1024px) {
    .ba-related {
        padding: 90px 60px 100px;
    }
}

.ba-related-wrap {
    max-width: 1200px;
    margin: 0 auto;
}

/* Related Header */
.ba-related-header {
    text-align: center;
    margin-bottom: 40px;
}

@media (min-width: 768px) {
    .ba-related-header {
        margin-bottom: 48px;
    }
}

.ba-related-title {
    font-family: 'Outfit', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.2;
    margin-bottom: 12px;
}

@media (min-width: 768px) {
    .ba-related-title {
        font-size: 2.5rem;
    }
}

.ba-related-desc {
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    color: var(--ink-soft);
    line-height: 1.6;
    margin-bottom: 16px;
}

.ba-related-viewall {
    display: inline-flex;
    align-items: center;
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--ink);
    text-decoration: none;
    transition: color 0.2s ease;
}

.ba-related-viewall:hover {
    color: var(--teal-deep);
}

/* Related Posts Slider */
.ba-related-slider {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 0 4px;
}

.ba-related-slider::-webkit-scrollbar {
    display: none;
}

/* Related Card */
.ba-rel-card {
    flex: 0 0 280px;
    min-width: 280px;
    scroll-snap-align: start;
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease;
}

@media (min-width: 640px) {
    .ba-rel-card {
        flex: 0 0 320px;
        min-width: 320px;
    }
}

@media (min-width: 1024px) {
    .ba-rel-card {
        flex: 0 0 calc(33.333% - 14px);
        min-width: 0;
    }
}

.ba-rel-card:hover {
    transform: translateY(-4px);
}

.ba-rel-card-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 16px;
    background-size: cover;
    background-position: center;
    background-color: #d1d5db;
    margin-bottom: 14px;
    transition: box-shadow 0.3s ease;
}

.ba-rel-card:hover .ba-rel-card-img {
    box-shadow: 0 8px 30px var(--shadow-tint-md);
}

.ba-rel-card-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.35;
    margin-bottom: 10px;
}

.ba-rel-card-cta {
    display: inline-flex;
    align-items: center;
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ink-soft);
    border-bottom: 1px dotted var(--ink-line);
    padding-bottom: 2px;
    transition: color 0.2s ease;
}

.ba-rel-card:hover .ba-rel-card-cta {
    color: var(--ink);
    border-bottom-color: var(--ink);
}

/* Related Arrows */
.ba-related-arrows {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 32px;
}

.ba-rel-arrow {
    width: 44px;
    height: 44px;
    background: rgba(17, 24, 39, 0.06);
    border: 1px solid rgba(17, 24, 39, 0.1);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.ba-rel-arrow:hover {
    background: var(--ink);
    border-color: var(--ink);
}

.ba-rel-arrow svg {
    width: 18px;
    height: 18px;
    color: var(--ink-soft);
    transition: color 0.2s ease;
}

.ba-rel-arrow:hover svg {
    color: var(--on-ink);
}

/* Hide related arrows on desktop when all cards visible */
@media (min-width: 1024px) {
    .ba-related-arrows {
        display: none;
    }

    .ba-related-slider {
        overflow: visible;
    }
}

/* ========================================
   EDGE — SMART INTEGRATIONS (Section 5)
   Live command console + capability row
======================================== */

.edge-integrations-section {
    padding: 64px 16px 72px;
    background:
        radial-gradient(90% 55% at 12% 0%, rgba(63, 183, 172, 0.08) 0%, transparent 60%),
        linear-gradient(180deg, var(--mist) 0%, var(--mist-deep) 100%);
}

@media (min-width: 768px) {
    .edge-integrations-section {
        padding: 84px 24px 92px;
    }
}

.edge-integrations-inner {
    max-width: 760px;
    margin: 0 auto;
}

.edge-integrations-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--teal-deep);
    margin-bottom: 12px;
}

.edge-integrations-title {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.6rem, 4.5vw, 2.4rem);
    font-weight: 600;
    color: var(--ink);
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0 0 28px;
}

.edge-integrations-title .italic {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
}

/* --- Live command console --- */
.edge-int-console {
    position: relative;
    background:
        radial-gradient(80% 120% at 100% 0%, rgba(63, 183, 172, 0.14) 0%, transparent 55%),
        linear-gradient(165deg, #143832 0%, #0C2320 100%);
    border: 1px solid rgba(63, 183, 172, 0.14);
    border-radius: 22px;
    padding: 26px 24px 24px;
    min-height: 168px;
    box-shadow: 0 18px 48px var(--shadow-tint);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 22px;
}

@media (min-width: 640px) {
    .edge-int-console {
        padding: 32px 34px 28px;
        min-height: 178px;
    }
}

.edge-int-console-source {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--teal-brand);
    margin-bottom: 10px;
    transition: opacity 0.3s ease;
}

.edge-int-console-cmd {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.05rem, 3vw, 1.45rem);
    font-weight: 500;
    line-height: 1.4;
    color: #F2FAF8;
    letter-spacing: -0.01em;
}

/* Blinking caret */
.edge-int-caret {
    display: inline-block;
    width: 2px;
    height: 1.05em;
    margin-left: 3px;
    vertical-align: text-bottom;
    background: var(--teal-brand);
    animation: edge-int-caret 1.05s step-end infinite;
}

@keyframes edge-int-caret {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Device reply chip */
.edge-int-console-reply {
    align-self: flex-end;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: rgba(234, 240, 236, 0.06);
    border: 1px solid rgba(234, 240, 236, 0.12);
    border-radius: 999px;
    padding: 9px 16px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.edge-int-console-reply.visible {
    opacity: 1;
    transform: translateY(0);
}

.edge-int-reply-text {
    font-family: 'Outfit', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    color: rgba(234, 240, 236, 0.88);
    white-space: nowrap;
}

.edge-int-led {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--teal-brand);
    box-shadow: 0 0 8px rgba(63, 183, 172, 0.9), 0 0 16px rgba(63, 183, 172, 0.5);
    flex-shrink: 0;
    animation: edge-int-pulse 2s ease-in-out infinite;
}

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

/* --- Capability row --- */
.edge-int-caps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 12px;
    border-top: 1px solid var(--ink-line-soft);
    margin-top: 22px;
    padding-top: 20px;
}

@media (min-width: 640px) {
    .edge-int-caps {
        display: flex;
        justify-content: space-between;
        gap: 12px;
    }
}

.edge-int-cap {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.edge-int-cap svg {
    width: 15px;
    height: 15px;
    color: var(--teal-deep);
    flex-shrink: 0;
}

.edge-int-cap-name {
    font-family: 'Outfit', sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--ink-soft);
    letter-spacing: 0.01em;
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .edge-int-caret,
    .edge-int-led {
        animation: none;
    }
    .edge-int-console-reply {
        transition: none;
    }
}

/* ============================================================
   SECTION 6 — TOUCH CONTROLS
   The device's capacitive top panel, up close
   ============================================================ */

.edge-controls-section {
    background:
        radial-gradient(70% 45% at 50% 34%, rgba(63, 183, 172, 0.10) 0%, transparent 60%),
        radial-gradient(60% 50% at 100% 100%, rgba(30, 124, 113, 0.08) 0%, transparent 60%),
        linear-gradient(180deg, #0C2320 0%, var(--ink) 55%, #0A1E1B 100%);
    padding: 84px 24px 100px;
}

.edge-controls-inner {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.edge-controls-label {
    display: inline-block;
    font-family: 'Outfit', sans-serif;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--teal-brand);
    margin-bottom: 18px;
}

.edge-controls-title {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.75rem, 5vw, 2.6rem);
    font-weight: 600;
    color: var(--on-ink);
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0 0 56px;
}

.edge-controls-title .italic {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-weight: 400;
}

/* ---- The capacitive deck ---- */
.edge-deck {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 26px 26px 22px;
    border-radius: 30px;
    background:
        radial-gradient(130% 160% at 20% -10%, rgba(255, 255, 255, 0.055) 0%, transparent 45%),
        radial-gradient(120% 140% at 85% 110%, rgba(63, 183, 172, 0.05) 0%, transparent 55%),
        linear-gradient(180deg, #10201C 0%, #0B1A16 55%, #081310 100%);
    border: 1px solid rgba(255, 255, 255, 0.075);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        inset 0 -1px 0 rgba(0, 0, 0, 0.55),
        0 34px 90px rgba(0, 0, 0, 0.55),
        0 8px 22px rgba(0, 0, 0, 0.4);
    margin-bottom: 30px;
}

/* Ambient light pooling under the deck */
.edge-deck::after {
    content: '';
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: -30px;
    height: 30px;
    background: radial-gradient(50% 100% at 50% 0%, rgba(63, 183, 172, 0.16) 0%, transparent 70%);
    filter: blur(10px);
    pointer-events: none;
}

@media (min-width: 720px) {
    .edge-deck {
        flex-direction: row;
        align-items: center;
        gap: 26px;
        padding: 22px 30px;
    }
}

/* Key row — bare backlit glyphs, like a real capacitive surface */
.edge-deck-keys {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
}

@media (min-width: 720px) {
    .edge-deck-keys {
        justify-content: space-evenly;
    }
}

.edge-ctrl-btn {
    position: relative;
    width: 56px;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    flex-shrink: 0;
}

.edge-ctrl-btn:focus-visible {
    outline: 2px solid rgba(79, 196, 184, 0.5);
    outline-offset: 3px;
    border-radius: 16px;
}

/* Glyph — etched into the surface, backlit when active */
.edge-ctrl-btn > svg:not(.edge-ctrl-hold-ring) {
    width: 22px;
    height: 22px;
    color: rgba(234, 240, 236, 0.22);
    transition: color 0.4s ease, filter 0.4s ease, transform 0.15s ease;
}

.edge-ctrl-btn:not(.active):hover > svg:not(.edge-ctrl-hold-ring) {
    color: rgba(234, 240, 236, 0.5);
}

.edge-ctrl-btn:active > svg:not(.edge-ctrl-hold-ring) {
    transform: scale(0.9);
}

.edge-ctrl-btn.active > svg:not(.edge-ctrl-hold-ring) {
    color: var(--teal-brand);
    filter: drop-shadow(0 0 7px rgba(63, 183, 172, 0.65));
}

/* Under-surface bloom behind the active glyph */
.edge-ctrl-glow {
    position: absolute;
    inset: -6px;
    background: radial-gradient(50% 46% at 50% 46%, rgba(63, 183, 172, 0.20) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.45s ease;
    pointer-events: none;
}

.edge-ctrl-btn.active .edge-ctrl-glow {
    opacity: 1;
}

/* Micro LED beneath the active key */
.edge-ctrl-dot {
    position: absolute;
    bottom: 7px;
    left: 50%;
    transform: translateX(-50%);
    width: 3.5px;
    height: 3.5px;
    border-radius: 50%;
    background: var(--teal-brand);
    box-shadow: 0 0 7px rgba(63, 183, 172, 0.9);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.edge-ctrl-btn.active .edge-ctrl-dot {
    opacity: 1;
}

/* ---- Recessed LED status display ---- */
.edge-deck-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 12px 20px 13px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.48) 0%, rgba(0, 0, 0, 0.26) 100%);
    border: 1px solid rgba(255, 255, 255, 0.045);
    box-shadow:
        inset 0 3px 9px rgba(0, 0, 0, 0.55),
        inset 0 -1px 0 rgba(255, 255, 255, 0.03);
}

@media (min-width: 720px) {
    .edge-deck-display {
        min-width: 148px;
    }
}

.edge-deck-display-label {
    font-family: 'Outfit', sans-serif;
    font-size: 0.52rem;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(234, 240, 236, 0.22);
    padding-left: 0.32em;
}

.edge-deck-display-value {
    font-family: 'Outfit', sans-serif;
    font-size: 1.3rem;
    font-weight: 300;
    letter-spacing: 0.16em;
    color: var(--teal-brand);
    text-shadow: 0 0 14px rgba(63, 183, 172, 0.55);
    white-space: nowrap;
    padding-left: 0.16em;
    transition: opacity 0.16s ease;
}

.edge-deck-display-value.swap {
    opacity: 0;
}

.edge-deck-display-value.blink {
    animation: edge-deck-blink 1.1s ease-in-out infinite;
}

@keyframes edge-deck-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* ---- Filter service LED on the panel ---- */
.edge-deck-filter-led {
    position: absolute;
    top: 16px;
    right: 20px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #E2A93B;
    box-shadow: 0 0 7px rgba(226, 169, 59, 0.85), 0 0 14px rgba(226, 169, 59, 0.35);
    animation: edge-filter-led 3.2s ease-in-out infinite;
}

@keyframes edge-filter-led {
    0%, 100% { opacity: 0.9; }
    50% { opacity: 0.35; }
}

/* ---- Wi-Fi hold-to-pair ---- */
.edge-ctrl-hold-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 52px;
    height: 52px;
    transform: translate(-50%, -50%) rotate(-90deg);
    color: var(--teal-brand);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.edge-ctrl-hold-ring circle {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
}

.edge-ctrl-btn--wifi.holding .edge-ctrl-hold-ring {
    opacity: 1;
}

.edge-ctrl-btn--wifi.holding .edge-ctrl-hold-ring circle {
    animation: edge-wifi-fill 2s linear forwards;
}

@keyframes edge-wifi-fill {
    from { stroke-dashoffset: 100; }
    to { stroke-dashoffset: 0; }
}

.edge-ctrl-btn--wifi.holding > svg:not(.edge-ctrl-hold-ring) {
    color: rgba(234, 240, 236, 0.7);
}

/* Discoverable mode — the glyph breathes */
.edge-ctrl-btn--wifi.pairing > svg:not(.edge-ctrl-hold-ring) {
    color: var(--teal-brand);
    animation: edge-wifi-breathe 1.4s ease-in-out infinite;
}

.edge-ctrl-btn--wifi.pairing .edge-ctrl-glow {
    opacity: 1;
}

@keyframes edge-wifi-breathe {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(63, 183, 172, 0.5)); opacity: 1; }
    50% { filter: drop-shadow(0 0 14px rgba(63, 183, 172, 0.95)); opacity: 0.55; }
}

/* ---- Active control caption ---- */
.edge-controls-info {
    width: 100%;
    max-width: 460px;
    min-height: 110px;
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.edge-ctrl-info {
    display: none;
    flex-direction: column;
    gap: 11px;
    text-align: center;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.35s ease, transform 0.35s ease;
    pointer-events: none;
}

.edge-ctrl-info.active {
    display: flex;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.edge-ctrl-info-title {
    font-family: 'Outfit', sans-serif;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--teal-brand);
    margin: 0;
    padding-top: 16px;
    position: relative;
}

.edge-ctrl-info-title::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 26px;
    height: 1px;
    background: rgba(63, 183, 172, 0.5);
}

.edge-ctrl-info-text {
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    font-weight: 400;
    color: rgba(234, 240, 236, 0.66);
    line-height: 1.7;
    margin: 0;
}

/* ---- Filter LED legend ---- */
.edge-controls-indicator-note {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.72rem;
    color: rgba(234, 240, 236, 0.3);
    letter-spacing: 0.02em;
    margin: 26px 0 0;
}

.edge-note-led {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #E2A93B;
    box-shadow: 0 0 6px rgba(226, 169, 59, 0.8);
    flex-shrink: 0;
}

/* ---- Responsive tuning ---- */
@media (min-width: 768px) {
    .edge-controls-section {
        padding: 108px 24px 124px;
    }

    .edge-ctrl-btn {
        width: 64px;
        height: 72px;
    }

    .edge-ctrl-btn > svg:not(.edge-ctrl-hold-ring) {
        width: 24px;
        height: 24px;
    }

    .edge-ctrl-info-text {
        font-size: 1rem;
    }
}

@media (max-width: 400px) {
    .edge-deck {
        padding: 20px 16px 18px;
    }

    .edge-ctrl-btn {
        width: 50px;
        height: 62px;
    }

    .edge-ctrl-btn > svg:not(.edge-ctrl-hold-ring) {
        width: 20px;
        height: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .edge-deck-display-value.blink,
    .edge-deck-filter-led,
    .edge-ctrl-btn--wifi.pairing > svg:not(.edge-ctrl-hold-ring) {
        animation: none;
    }
    .edge-ctrl-btn--wifi.holding .edge-ctrl-hold-ring circle {
        animation: none;
        stroke-dashoffset: 0;
    }
}

/* ============================================================
   EDGE — Filter Technology Section (Section 7)
   Sticky visual + scroll-driven steps
   ============================================================ */

.edge-filter-section {
    background: var(--mist);
    padding: 0 16px 56px;
}

.edge-filter-layout {
    max-width: 1080px;
    margin: 0 auto;
}

/* --- Sticky visual --- */
/* The shell is sticky and opaque, so passing text hides behind it */
.edge-filter-visual-shell {
    position: sticky;
    top: 0;
    z-index: 2;
    padding-top: 76px;
    background: var(--mist);
}

.edge-filter-visual {
    position: relative;
    height: min(52vh, 420px);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 18px 48px var(--shadow-tint);
}

/* Image frames — crossfade between stages */
.edge-filter-frame {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.55s ease;
    background:
        radial-gradient(120% 100% at 50% 0%, rgba(63, 183, 172, 0.12) 0%, transparent 60%),
        linear-gradient(160deg, #EEF3F0 0%, #D3E0D8 100%);
}

.edge-filter-frame.is-active {
    opacity: 1;
}

.edge-filter-frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Fallback while the photo asset is missing */
.edge-filter-frame-fallback {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1.5rem;
    color: var(--teal-deep);
    opacity: 0.5;
}

.edge-filter-frame.is-missing img {
    display: none;
}

.edge-filter-frame.is-missing .edge-filter-frame-fallback {
    display: flex;
}

/* Legibility scrim + caption over the image */
.edge-filter-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(11, 33, 29, 0.62) 0%, rgba(11, 33, 29, 0.12) 45%, transparent 65%);
    pointer-events: none;
}

.edge-filter-caption {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 20px;
}

.edge-filter-label {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(234, 240, 236, 0.72);
    margin-bottom: 8px;
}

.edge-filter-title {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.5rem, 4.5vw, 2.1rem);
    font-weight: 600;
    color: #F7FAF8;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0;
}

.edge-filter-title .italic {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
}

/* --- Scrolling steps --- */
.edge-filter-steps {
    position: relative;
    z-index: 1;
    padding: 28px 4px 0;
}

.edge-filter-step {
    padding: 30px 0 34px;
    border-bottom: 1px solid var(--ink-line-soft);
}

.edge-filter-step:last-child {
    border-bottom: none;
}

.edge-filter-step-num {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: 2.4rem;
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--ink-faint);
    margin-bottom: 14px;
    transition: color 0.45s ease;
}

.edge-filter-step-name {
    font-family: 'Outfit', sans-serif;
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin: 0 0 10px;
    transition: color 0.45s ease;
}

.edge-filter-step-desc {
    font-family: 'Outfit', sans-serif;
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--ink-faint);
    max-width: 46ch;
    margin: 0;
    transition: color 0.45s ease;
}

/* Active step reads in full color; passed & upcoming stay disabled */
.edge-filter-step.is-active .edge-filter-step-num {
    color: var(--teal-deep);
}

.edge-filter-step.is-active .edge-filter-step-name {
    color: var(--ink);
}

.edge-filter-step.is-active .edge-filter-step-desc {
    color: var(--ink-soft);
}

/* --- Desktop: sticky visual left, steps right --- */
@media (min-width: 900px) {
    .edge-filter-section {
        padding: 0 24px 72px;
    }

    .edge-filter-layout {
        display: grid;
        grid-template-columns: 1.05fr 0.95fr;
        gap: 80px;
        align-items: start;
    }

    .edge-filter-visual-shell {
        padding-top: 104px;
        background: none;
    }

    .edge-filter-visual {
        height: min(72vh, 560px);
    }

    .edge-filter-caption {
        left: 28px;
        right: 28px;
        bottom: 26px;
    }

    .edge-filter-steps {
        padding: 18vh 0 10vh;
    }

    .edge-filter-step {
        min-height: 38vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0;
        border-bottom: 1px solid var(--ink-line-soft);
    }

    .edge-filter-step:last-child {
        border-bottom: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .edge-filter-frame,
    .edge-filter-step-num,
    .edge-filter-step-name,
    .edge-filter-step-desc {
        transition: none;
    }
}

/* ========================================
   EDGE REVIEWS SECTION (Section 8)
======================================== */

.edge-reviews-section {
    background: var(--mist-deep);
    padding: 80px 24px;
}

.edge-reviews-inner {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

.edge-reviews-label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--ink-soft);
    margin-bottom: 12px;
}

.edge-reviews-title {
    font-size: 2.25rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
    margin-bottom: 40px;
}

.edge-reviews-title .italic {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 500;
}

/* Carousel row: arrow — card — arrow */
.edge-reviews-carousel {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Single card */
.edge-review-card {
    flex: 1;
    background: var(--paper);
    border: 1px solid var(--ink-line);
    border-radius: 16px;
    padding: 28px 32px 24px;
    display: flex;
    flex-direction: column;
    gap: 0;
    touch-action: pan-y;
    min-height: 200px;
    height: 200px;
}

/* Content area that fades on swap */
.edge-review-card-content {
    transition: opacity 0.18s ease;
    flex: 1;
    overflow: hidden;
}

.edge-review-card-content.fade-out {
    opacity: 0;
}

/* Top row: name left, stars right */
.edge-review-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

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

.edge-review-stars {
    display: flex;
    gap: 3px;
}

.edge-review-stars svg {
    width: 15px;
    height: 15px;
}

/* Review text */
.edge-review-text {
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--ink-soft);
    line-height: 1.65;
    margin: 0;
    text-align: left;
}

/* Dots — inside the card */
.edge-reviews-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 20px;
}

.edge-reviews-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ink-line);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.edge-reviews-dot.active {
    width: 16px;
    border-radius: 3px;
    background: var(--ink);
}

/* Arrow buttons */
.edge-reviews-arrow {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--paper);
    border: 1px solid var(--ink-line);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--ink-soft);
}

.edge-reviews-arrow:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--on-ink);
}

.edge-reviews-arrow:disabled {
    background: var(--mist-deep);
    color: var(--ink-faint);
    cursor: not-allowed;
    pointer-events: none;
}

.edge-reviews-arrow svg {
    width: 16px;
    height: 16px;
}

/* Mobile */
@media (max-width: 767px) {
    .edge-reviews-section {
        padding: 60px 16px;
    }

    .edge-reviews-title {
        font-size: 1.5rem;
        margin-bottom: 28px;
    }

    .edge-reviews-arrow {
        display: none;
    }

    .edge-review-card {
        padding: 24px 20px 20px;
        height: 210px;
        min-height: 210px;
    }
}

/* ===================================================
   Section 9: What's In The Box / Lab Reports / Comparison
   =================================================== */

.edge-info-section {
    background: var(--mist);
    padding: 70px 20px;
}

.edge-info-container {
    max-width: 680px;
    margin: 0 auto;
}

/* Row: shared layout for accordion trigger & link rows */
.edge-info-row,
.edge-info-link-row {
    display: block;
}

.edge-info-accordion-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    padding: 28px 0;
    cursor: pointer;
    text-align: left;
    gap: 16px;
}

.edge-info-link-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 28px 0;
    text-decoration: none;
    color: var(--ink);
    gap: 16px;
    transition: color 0.2s ease;
}

.edge-info-link-row:hover {
    color: var(--teal-deep);
}

/* Large label text */
.edge-info-row-label {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1.65rem;
    font-weight: 600;
    color: inherit;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.edge-info-accordion-trigger .edge-info-row-label {
    color: var(--ink);
    transition: color 0.2s ease;
}

.edge-info-accordion-trigger:hover .edge-info-row-label {
    color: var(--teal-deep);
}

/* Icon circle */
.edge-info-row-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1.5px solid var(--ink-line);
    border-radius: 50%;
    flex-shrink: 0;
    color: var(--ink);
    transition: border-color 0.2s ease, color 0.2s ease, transform 0.25s ease;
}

.edge-info-accordion-trigger:hover .edge-info-row-icon,
.edge-info-link-row:hover .edge-info-row-icon {
    border-color: var(--teal-deep);
    color: var(--teal-deep);
}

.edge-info-link-row:hover .edge-info-row-icon {
    transform: translateX(3px);
}

.edge-info-row-icon svg {
    width: 18px;
    height: 18px;
    transition: transform 0.25s ease;
}

/* Plus icon rotation when open */
.edge-info-accordion-trigger[aria-expanded="true"] .edge-info-row-icon {
    border-color: var(--ink);
    color: var(--ink);
}

.edge-info-accordion-trigger[aria-expanded="true"] .edge-witb-icon-plus {
    transform: rotate(45deg);
}

/* Divider */
.edge-info-divider {
    height: 1px;
    background: #e5e7eb;
    margin: 0;
}

/* Accordion body */
.edge-witb-body {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.42s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s ease;
}

.edge-witb-body.open {
    max-height: 320px;
    opacity: 1;
}

/* Items grid */
.edge-witb-items {
    display: flex;
    flex-wrap: wrap;
    gap: 24px 32px;
    padding: 4px 0 32px;
}

.edge-witb-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-width: 72px;
}

.edge-witb-item svg {
    width: 28px;
    height: 28px;
    color: var(--ink-soft);
    flex-shrink: 0;
}

.edge-witb-item span {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--ink-soft);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.3;
    max-width: 80px;
}

/* Desktop */
@media (min-width: 768px) {
    .edge-info-section {
        padding: 90px 24px;
    }

    .edge-info-row-label {
        font-size: 2.1rem;
    }

    .edge-witb-items {
        gap: 28px 44px;
    }

    .edge-witb-item {
        min-width: 80px;
    }

    .edge-witb-item svg {
        width: 32px;
        height: 32px;
    }

    .edge-witb-item span {
        font-size: 0.72rem;
    }
}

/* (Legacy navy landing-theme token block removed — Monsoon Mist tokens are global.) */

/* ---- 1. Transparent canvas: let the .page Ascend gradient show through ----- */
/* (Landing sections use Monsoon Mist surface tokens; no legacy body override.) */
/* (Removed gradient-era transparent override; sections now alternate
   var(--mist) / var(--mist-deep) with dark var(--ink) anchor bands.) */

/* ---- 2. Dark anchor sections now use the Ascend tokens ------- */
/* (Removed navy-gradient override; base .reviews-section=--ink-bg, .footer=--foot-bg.) */

/* ---- 3. Filter strip: base brass gradient shows; keep inner wash + hover ---- */
/* (Removed navy bg + navy text override; base .filter-section=brass gradient,
   .filter-cta=white bg + --accent-strong text.) */
/* (filter band is light now; landing wash override removed) */
.page-landing .filter-cta:hover      { box-shadow: 0 6px 20px var(--shadow-tint-lg); }

/* ---- 4. Sticky buy button: base Ascend brass gradient shows --- */
/* (Removed navy/white-pill override.) */

/* ---- 5. AQI "Check Air Impact" button: base warm-ink glass shows --- */
/* (Removed navy override + navy focus ring; base .aqi-btn-glass is warm ink,
   see the base rule warmed to rgba(44,36,25,…).) */

/* ---- 6. Headings use Ascend --ink (base rules), not navy ----- */
/* (Removed navy heading override.) */

/* ---- 7. "Ghost" tinted buttons -> solid Ascend brass primary --- */
/* (Their faint base tint reads as near-invisible on the gradient, so give them
   a solid brass treatment — colour only, original shape.) */
.page-landing .certification-btn,
.page-landing .blogs-read-all-btn {
    background: transparent;
    border: 1.5px solid var(--ink);
    color: var(--ink);
}
.page-landing .certification-btn svg      { color: var(--ink); }
.page-landing .certification-btn:hover,
.page-landing .blogs-read-all-btn:hover   { background: var(--mist-deep); color: var(--ink); }

/* "Read all reviews" + newsletter button: base Ascend styles show */
/* (Removed navy reviews-cta + newsletter overrides; base reviews-cta = white
   glass on the dark reviews section, base newsletter-btn = --accent-strong.) */

/* ---- 8. Warm Ascend hairlines on light surfaces ------------- */
.page-landing .aqi-input,
.page-landing .faq-item   { border-color: var(--ink-line); }

/* ---- 9. Cards float on the gradient: glass, not solid blocks --- */
/* (.newsletter-content removed — the newsletter is an open block now.) */
.page-landing .certification-card {
    background: rgba(255, 255, 255, 0.6);
    border-color: var(--ink-line);
}
@supports not (backdrop-filter: blur(8px)) {
    .page-landing .certification-card { background: rgba(255, 255, 255, 0.92); }
}

/* ---- 10. Accessibility: visible keyboard focus (brass) ------ */
.page-landing a:focus-visible,
.page-landing button:focus-visible,
.page-landing input:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
}

/* Hidden helper for injected sign-in modal fields */
.signin-modal .phone-input-group.hidden { display: none; }

/* ========================================
   ACCOUNT PAGE
======================================== */
body.account-page {
    background: var(--mist);
}

.account-main {
    max-width: 720px;
    margin: 0 auto;
    padding: 120px 20px 80px;
    min-height: 70vh;
    font-family: 'Outfit', sans-serif;
}

/* Signed-out card */
.account-signedout-card {
    background: var(--paper);
    border: 1px solid var(--ink-line);
    border-radius: 20px;
    padding: 48px 32px;
    text-align: center;
}

.account-signedout-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-soft);
}

.account-signedout-icon svg {
    width: 30px;
    height: 30px;
}

.account-signedout-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 8px;
}

.account-signedout-text {
    font-size: 15px;
    color: var(--ink-soft);
    margin-bottom: 24px;
}

.account-signedout-btn {
    max-width: 240px;
    margin: 0 auto;
}

/* Profile card */
.account-card {
    background: var(--paper);
    border: 1px solid var(--ink-line);
    border-radius: 20px;
    padding: 32px;
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.account-avatar-wrap {
    position: relative;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
}

.account-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #111827;
    color: white;
    font-size: 26px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.account-avatar.has-photo {
    background-color: var(--mist-deep);
}

/* "+" badge to add/change the profile photo */
.account-avatar-btn {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--ink);
    color: var(--on-ink);
    border: 2px solid var(--paper);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s ease, transform 0.1s ease;
}

.account-avatar-btn:hover {
    background: var(--teal-deep);
}

.account-avatar-btn:active {
    transform: scale(0.92);
}

.account-avatar-btn:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.account-avatar-btn svg {
    width: 14px;
    height: 14px;
}

.account-avatar-btn.loading svg {
    animation: spin 0.6s linear infinite;
}

.account-identity {
    flex: 1;
    min-width: 0;
}

.account-name-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.account-name {
    font-size: 22px;
    font-weight: 600;
    color: var(--ink);
    overflow-wrap: anywhere;
}

.account-edit-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ink-faint);
    padding: 4px;
    display: flex;
    transition: color 0.2s ease;
}

.account-edit-btn:hover {
    color: var(--teal-deep);
}

.account-edit-btn svg {
    width: 16px;
    height: 16px;
}

.account-name-edit {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.account-name-edit.hidden,
.account-name-row.hidden,
.account-signedout.hidden,
.account-content.hidden {
    display: none;
}

.account-name-input {
    border: 1px solid var(--ink-line);
    border-radius: 10px;
    padding: 10px 14px;
    flex: 1;
    min-width: 180px;
}

.account-name-save {
    width: auto;
    padding: 10px 20px;
    margin: 0;
}

.account-name-cancel {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ink-soft);
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
}

.account-detail {
    font-size: 15px;
    color: var(--ink-soft);
    margin-top: 6px;
}

.account-since {
    font-size: 13px;
    color: var(--ink-soft);
    margin-top: 10px;
}

/* Sections */
.account-section {
    margin-top: 28px;
}

.account-section-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 12px;
}

.account-reviews {
    background: var(--paper);
    border: 1px solid var(--ink-line);
    border-radius: 16px;
    overflow: hidden;
}

.account-review-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    text-decoration: none;
    border-bottom: 1px solid var(--ink-line-soft);
    transition: background 0.15s ease;
}

.account-review-row:last-child {
    border-bottom: none;
}

.account-review-row:hover {
    background: #f9fafb;
}

.account-review-stars {
    display: flex;
    gap: 1px;
    flex-shrink: 0;
}

.account-review-title {
    flex: 1;
    font-size: 14px;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.account-review-date {
    font-size: 12px;
    color: var(--ink-soft);
    flex-shrink: 0;
}

.account-empty {
    padding: 20px;
    font-size: 14px;
    color: var(--ink-soft);
}

.account-empty a {
    color: var(--teal-deep);
}

/* Sign out */
.account-actions {
    margin-top: 28px;
}

.account-signout-btn {
    width: 100%;
    padding: 14px;
    background: var(--paper);
    border: 1px solid var(--ink-line);
    border-radius: 12px;
    color: var(--error);
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.account-signout-btn:hover {
    background: var(--error-tint);
    border-color: var(--error);
}

@media (max-width: 480px) {
    .account-main {
        padding: 100px 16px 60px;
    }

    .account-card {
        padding: 24px 20px;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .account-name-row {
        justify-content: center;
    }
}

/* Pending-moderation chip on account "My Reviews" rows */
.account-review-pending {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 500;
    color: var(--warning);
    background: var(--warning-tint);
    border-radius: 999px;
    padding: 2px 10px;
}

/* ========================================
   CART CHECKOUT (COD)
======================================== */
.checkout-view {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.checkout-view.hidden,
.cart-body.hidden,
.cart-footer.hidden {
    display: none;
}

.checkout-back {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ink-soft);
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    padding: 0;
    align-self: flex-start;
}

.checkout-back svg {
    width: 14px;
    height: 14px;
}

.checkout-title {
    font-family: 'Outfit', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--ink);
}

.checkout-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.checkout-row {
    display: flex;
    gap: 10px;
}

.checkout-row .checkout-input {
    flex: 1;
    min-width: 0;
}

.checkout-input {
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    padding: 12px 14px;
    background: var(--paper);
    border: 1px solid var(--ink-line);
    border-radius: 10px;
    outline: none;
    width: 100%;
    transition: border-color 0.15s ease;
}

.checkout-input:focus {
    border-color: var(--teal-deep);
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
}

.checkout-input.error {
    border-color: var(--error);
}

.checkout-error {
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    color: var(--error);
    min-height: 16px;
    margin: 0;
}

.checkout-total-row {
    display: flex;
    justify-content: space-between;
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    padding: 12px 0 4px;
    border-top: 1px solid var(--ink-line-soft);
}

.checkout-success-icon {
    width: 56px;
    height: 56px;
    margin: 12px auto 0;
    border-radius: 50%;
    background: var(--success-tint);
    color: var(--success);
    display: flex;
    align-items: center;
    justify-content: center;
}

.checkout-success-icon svg {
    width: 28px;
    height: 28px;
}

.checkout-success-text {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    color: var(--ink-soft);
    text-align: center;
    margin: 0;
    overflow-wrap: anywhere;
}

.checkout-success-text a {
    color: var(--teal-deep);
}

/* Order rows on the account page */
.account-order-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--ink-line-soft);
}

.account-order-row:last-child {
    border-bottom: none;
}

.account-order-items {
    flex: 1;
    font-size: 14px;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.account-order-total {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    flex-shrink: 0;
}

.account-order-status {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 500;
    border-radius: 999px;
    padding: 2px 10px;
    text-transform: capitalize;
}

.account-order-status.placed { color: var(--info); background: var(--info-tint); }
.account-order-status.confirmed { color: var(--info); background: var(--info-tint); }
.account-order-status.shipped { color: var(--success); background: var(--success-tint); }
.account-order-status.delivered { color: var(--success); background: var(--success-tint); }
.account-order-status.cancelled { color: var(--error); background: var(--error-tint); }

.account-order-date {
    font-size: 12px;
    color: var(--ink-soft);
    flex-shrink: 0;
}