/* ============================================================
   AEMS v2.0 Backward Compatibility CSS
   Maps old old class names to new component styles.
   Loaded after aems.css so all variables are available.
   ============================================================ */

/* ---- LANDING TOPBAR (unified on ALL public pages) ---- */
/* 3-column grid: brand (left, 1fr) | nav links (center, auto) | actions (right, 1fr).
   Center column is always perfectly centered regardless of brand/actions width.
   Nav links have min-width so Spanish translations don't shift positions.
   Toggle buttons and Login/Get Started are always in the exact same spot. */
.landing-topbar {
    position: sticky;
    top: 0;
    z-index: var(--z-topbar);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: var(--space-3) var(--space-6);
    background: var(--clr-surface);
    border-bottom: 1px solid var(--clr-border);
    backdrop-filter: blur(8px);
}
.landing-topbar-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--clr-text);
    font-weight: var(--weight-bold);
    font-size: var(--text-lg);
    justify-self: start;
}
.landing-topbar-nav {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    justify-self: center;
}
.landing-topbar-nav-spacer {
    /* Auth pages have no nav links — keep the 3-column grid balanced */
    display: block;
}
.landing-topbar-actions {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    justify-self: end;
}
.landing-topbar-link {
    color: var(--clr-text-secondary);
    text-decoration: none;
    font-size: var(--text-sm);
    text-align: center;
    /* Min-width per link so Spanish text doesn't shift neighbors.
       Each link reserves enough space for its longest translation. */
    min-width: 110px;
    white-space: nowrap;
}
.landing-topbar-link:hover {
    color: var(--clr-text);
}
.landing-topbar-accent {
    color: var(--clr-accent);
    font-weight: var(--weight-semibold);
}
.landing-topbar-toggles {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
}
/* Fixed min-widths on topbar buttons so Spanish translations
   (Login -> Iniciar Sesion, Get Started -> Comenzar) don't change
   the actions div width, which would shift the toggles. */
.landing-topbar-actions .btn-sm {
    min-width: 110px;
    text-align: center;
    justify-content: center;
}
/* Fix lang button text width so EN/ES label change doesn't shift toggles */
.landing-topbar-toggles .lang-toggle-btn {
    width: 53px;
    justify-content: center;
}
.landing-topbar-toggles .lang-toggle-text {
    width: 22px;
    text-align: center;
}
/* S217: first-visit language nudge — arrow-pointed bubble, 5s blink, landing only.
   S232: the bubble is positioned FROM the live #lang-toggle-btn geometry at show
   time (app-shell sets inline right + --nudge-arrow-right). The static right:180px
   below is only the fallback when the toggle cannot be measured. The arrow inset
   is a variable so it tracks the toggle when the bubble is clamped to the viewport. */
.aems-lang-nudge {
    --nudge-arrow-right: 24px;
    position: fixed;
    top: 64px;
    right: 180px;
    z-index: 950;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--clr-surface-raised);
    border: 1px solid var(--clr-accent);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    color: var(--clr-text);
    font-size: var(--text-sm);
    cursor: pointer;
    max-width: 300px;
    white-space: normal;
    animation: aems-nudge-blink 1s ease-in-out infinite;
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}
.aems-lang-nudge::after {
    content: '';
    position: absolute;
    top: -7px;
    right: var(--nudge-arrow-right);
    width: 12px;
    height: 12px;
    background: var(--clr-surface-raised);
    border-left: 1px solid var(--clr-accent);
    border-top: 1px solid var(--clr-accent);
    transform: rotate(45deg);
}
.aems-lang-nudge svg { color: var(--clr-accent); flex-shrink: 0; }
/* S232b: no rotation — the nudge icon is now the globe (matching the language
   toggle). The old rotate(180deg) turned a chevron into a down-arrow; a globe
   must stay upright. */
.aems-lang-nudge.aems-lang-nudge-out {
    opacity: 0;
    transform: translateY(-6px);
    animation: none;
}
@keyframes aems-nudge-blink {
    0%, 100% { box-shadow: var(--shadow-lg), 0 0 0 0 rgba(20, 184, 137, 0.35); }
    50% { box-shadow: var(--shadow-lg), 0 0 0 6px rgba(20, 184, 137, 0); }
}
@media (max-width: 768px) {
    .aems-lang-nudge { right: 16px; top: 60px; }
    /* Inline geometry from app-shell wins over both static positions (higher
       specificity as an author style on the element); no override needed. */
}
/* Landing page: no padding on page-content wrapper, nav is in-flow sticky */
body.aems-shell-loaded > .aems-page-content:not(.aems-app-layout *):not(.aems-public-layout *) {
    padding: 0;
    overflow: visible;
}
@media (max-width: 768px) {
    .landing-topbar {
        grid-template-columns: 1fr auto;
    }
    .landing-topbar-nav,
    .landing-topbar-nav-spacer {
        display: none;
    }
    .landing-topbar-actions {
        gap: var(--space-3);
    }
    .landing-topbar-link {
        display: none;
    }
    .landing-topbar-toggles {
        display: none;
    }
    /* FIX-062: Mobile hamburger menu for public pages */
    .aems-mobile-nav-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        background: none;
        border: 1px solid var(--clr-border);
        border-radius: var(--radius-md);
        padding: 8px 12px;
        cursor: pointer;
        color: var(--clr-text);
        font-size: 1.2rem;
    }
    .aems-mobile-nav-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--clr-surface-raised);
        border-bottom: 1px solid var(--clr-border);
        box-shadow: var(--shadow-lg);
        padding: var(--space-4);
        flex-direction: column;
        gap: var(--space-3);
        z-index: var(--z-topbar);
    }
    .aems-mobile-nav-menu.open {
        display: flex;
        animation: aemsFadeInUp 0.2s ease;
    }
    .aems-mobile-nav-menu a {
        padding: var(--space-2) var(--space-3);
        border-radius: var(--radius-md);
        font-size: var(--text-sm);
        color: var(--clr-text);
        text-decoration: none;
    }
    .aems-mobile-nav-menu a:hover {
        background: var(--clr-accent-muted);
    }
}
/* Desktop: hide mobile nav toggle */
.aems-mobile-nav-toggle {
    display: none;
}
.aems-mobile-nav-menu {
    display: none;
}

/* ---- FORMS ---- */
.form-group { margin-bottom: var(--space-4); }
.form-label {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--clr-text);
    margin-bottom: var(--space-2);
}
.form-input {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    color: var(--clr-text);
    background: var(--clr-surface-input);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
    transition: color var(--duration-75) var(--ease-out), background var(--duration-75) var(--ease-out), border-color var(--duration-75) var(--ease-out), box-shadow var(--duration-75) var(--ease-out);
    outline: none;
}
.form-input:focus {
    border-color: var(--clr-accent);
    box-shadow: 0 0 0 3px var(--clr-accent-muted);
}
.form-input::placeholder { color: var(--clr-text-muted); }

.form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23657786' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    padding-right: var(--space-8);
}

.form-textarea {
    min-height: 100px;
    resize: vertical;
}

.form-hint {
    font-size: var(--text-xs);
    color: var(--clr-text-muted);
    margin-top: var(--space-1);
}

.form-error {
    font-size: var(--text-xs);
    color: var(--clr-danger);
    margin-top: var(--space-1);
}

/* ---- TABLES ---- */
.table-wrap {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    border: 1px solid var(--clr-card-border);
}
.table {
    width: 100%;
    font-size: var(--text-sm);
    color: var(--clr-text);
    background: var(--clr-surface);
}
.table thead th {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    font-weight: var(--weight-semibold);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--clr-text-muted);
    background: var(--clr-surface-raised);
    border-bottom: 1px solid var(--clr-divider);
    white-space: nowrap;
}
.table tbody td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--clr-divider);
    vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--clr-surface-hover); }

/* ---- CARDS ---- */
.card {
    background: var(--clr-surface);
    border: 1px solid var(--clr-card-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-card);
    transition: color var(--duration-100) var(--ease-out), background var(--duration-100) var(--ease-out), border-color var(--duration-100) var(--ease-out), box-shadow var(--duration-100) var(--ease-out);
}
.card:hover {
    border-color: var(--clr-border-hover);
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-2px);
}
.card-header {
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--clr-divider);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.card-body { padding: var(--space-5) var(--space-6); }
.card-footer {
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--clr-divider);
}
.card-title {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--clr-text);
    margin: 0;
}
.card-glass {
    background: var(--clr-surface-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* ---- PAGE / SECTION CARDS (page-level card variants) ---- */
/* Used by security.html (.page-card) and sessions.html (.section-card).
   These were previously defined only in the archived design_v1 CSS and
   were missing from the active stylesheet, causing transparent backgrounds. */
.page-card {
    background: var(--clr-surface);
    border: 1px solid var(--clr-card-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-bottom: var(--space-5);
    box-shadow: var(--shadow-card);
    transition: border-color var(--duration-100) var(--ease-out), box-shadow var(--duration-100) var(--ease-out);
}
.page-card:hover {
    border-color: var(--clr-card-border-hover);
    box-shadow: var(--shadow-card-hover);
}
.page-card > h2,
.page-card > h3 {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--clr-text);
    margin: 0 0 var(--space-4);
}
.page-card .card-body { padding: 0; }

.section-card {
    background: var(--clr-surface);
    border: 1px solid var(--clr-card-border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    margin-bottom: var(--space-5);
    box-shadow: var(--shadow-card);
    transition: border-color var(--duration-100) var(--ease-out), box-shadow var(--duration-100) var(--ease-out);
}
.section-card:hover {
    box-shadow: var(--shadow-lg);
}
.section-card > h3 {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--clr-text);
    margin: 0 0 var(--space-4);
}

/* ---- BUTTONS ---- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    line-height: 1;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: color var(--duration-75) var(--ease-out), background var(--duration-75) var(--ease-out), border-color var(--duration-75) var(--ease-out), box-shadow var(--duration-75) var(--ease-out);
    white-space: nowrap;
    text-decoration: none;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

.btn-primary {
    background: var(--clr-accent);
    color: var(--clr-accent-contrast);
    border-color: transparent;
    border-radius: var(--radius-full);
    box-shadow: 0 2px 8px rgba(0,182,122,0.12);
    padding: var(--space-3) var(--space-8);
    font-size: var(--text-md);
}
.btn-primary:hover {
    background: var(--clr-accent-hover);
    color: var(--clr-accent-contrast);
    box-shadow: 0 4px 12px rgba(0,182,122,0.09), 0 0 7px var(--clr-accent-glow);
    transform: translateY(-2px);
}

.btn-ghost {
    background: transparent;
    color: var(--clr-text);
    border-color: var(--clr-border);
}
.btn-ghost:hover { background: var(--clr-surface-hover); border-color: var(--clr-border-hover); }

.btn-outline {
    background: transparent;
    color: var(--clr-accent);
    border-color: var(--clr-accent);
}
.btn-outline:hover { background: var(--clr-accent-muted); }

.btn-subtle {
    background: var(--clr-accent-muted);
    color: var(--clr-accent);
    border-color: transparent;
}
.btn-subtle:hover { background: var(--clr-accent-muted-strong); }

.btn-danger {
    background: var(--clr-danger);
    color: var(--clr-on-accent);
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(var(--rgb-danger),0.25);
}
.btn-danger:hover { background: var(--clr-danger); filter: brightness(0.9); }

.btn-sm { padding: 6px 12px; font-size: var(--text-xs); border-radius: var(--radius-sm); }
.btn-lg { padding: var(--space-4) var(--space-8); font-size: var(--text-base); border-radius: var(--radius-lg); }
.btn-xl { padding: var(--space-4) var(--space-10); font-size: var(--text-md); border-radius: var(--radius-full); }
.btn-block { width: 100%; }

/* ---- BADGES ---- */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    border-radius: var(--radius-full);
    line-height: 1;
}
.badge-success { background: var(--clr-accent-muted); color: var(--clr-accent); }
.badge-warning { background: rgba(var(--rgb-warning),0.12); color: var(--clr-warning-text, var(--clr-warning)); }
.badge-danger  { background: rgba(var(--rgb-danger),0.12); color: var(--clr-danger); }
.badge-info    { background: rgba(var(--rgb-info),0.12); color: var(--clr-info); }
.badge-muted   { background: var(--clr-surface-raised); color: var(--clr-text-muted); }

/* ---- HERO ---- */
.hero {
    position: relative;
    overflow: visible;
    padding: var(--space-12) var(--space-6) 120px;
    text-align: center;
}
.hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}
.hero-orb-1 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(20,184,137,0.08), transparent 70%);
    top: -150px;
    right: -100px;
}
.hero-orb-2 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(var(--rgb-info),0.06), transparent 70%);
    bottom: -100px;
    left: -80px;
}
@media (max-width: 768px) {
    .hero-orb-1 { width: 300px; height: 300px; top: -100px; right: -80px; }
    .hero-orb-2 { width: 250px; height: 250px; bottom: -80px; left: -60px; }
}
.hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    background: var(--clr-accent-muted);
    border: 1px solid var(--clr-accent);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--clr-accent);
    margin-bottom: var(--space-6);
}
.hero-headline { margin-bottom: var(--space-6); }
.hero-line {
    display: block;
    font-size: var(--text-4xl);
    font-weight: var(--weight-extrabold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--clr-text);
}
.hero-line.accent {
    background: linear-gradient(135deg, var(--clr-accent), var(--clr-accent-hover));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.hero-subtitle {
    font-size: var(--text-lg);
    color: var(--clr-text-secondary);
    max-width: 640px;
    margin: 0 auto var(--space-8);
    line-height: var(--leading-relaxed);
}
.hero-cta-group {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
}
.hero-stats {
    display: flex;
    gap: var(--space-8);
    justify-content: center;
    flex-wrap: wrap;
}
.hero-stat { text-align: center; }
.hero-stat-num {
    display: inline-block;
    font-size: var(--text-3xl);
    font-weight: var(--weight-extrabold);
    color: var(--clr-accent);
}
.hero-stat-num-suffix {
    display: inline;
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    color: var(--clr-accent);
}
.hero-stat-label {
    display: block;
    font-size: var(--text-xs);
    color: var(--clr-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    margin-top: var(--space-1);
}

/* ---- SECTION ---- */
.section {
    padding: var(--space-20) var(--space-6);
    max-width: var(--content-max);
    margin: 0 auto;
}
.section-eyebrow {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--clr-accent);
    margin-bottom: var(--space-5);
}
.section-title {
    font-size: var(--text-2xl);
    font-weight: var(--weight-extrabold);
    color: var(--clr-text);
    margin-bottom: var(--space-5);
    line-height: var(--leading-tight);
}
.section-subtitle {
    font-size: var(--text-lg);
    color: var(--clr-text-secondary);
    max-width: 600px;
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-10);
}

/* ---- FEATURE GRID ---- */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}
@media (max-width: 768px) {
    .feature-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .feature-grid { grid-template-columns: 1fr; }
}
.feature-card {
    background: var(--clr-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-8) var(--space-6);
    border: 1px solid var(--clr-card-border);
    box-shadow: var(--shadow-card);
    transition: color var(--duration-100) var(--ease-out), background var(--duration-100) var(--ease-out), border-color var(--duration-100) var(--ease-out), box-shadow var(--duration-100) var(--ease-out), transform var(--duration-100) var(--ease-out);
}
.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
}
.feature-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--clr-accent-muted);
    color: var(--clr-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-4);
}
.featured { color: var(--clr-accent); }

/* ---- PRICING ---- */
.pricing-teaser-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}
.pricing-teaser-card {
    background: var(--clr-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-8) var(--space-6);
    border: 1px solid var(--clr-card-border);
    box-shadow: var(--shadow-card);
    text-align: center;
    transition: color var(--duration-100) var(--ease-out), background var(--duration-100) var(--ease-out), border-color var(--duration-100) var(--ease-out), box-shadow var(--duration-100) var(--ease-out), transform var(--duration-100) var(--ease-out);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: relative;
    overflow: hidden;
}
/* S217: pick-me energy — each card carries a quiet accent bar and lifts on hover */
.pricing-teaser-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--clr-accent-tertiary), var(--clr-accent));
    opacity: 0.5;
    transition: opacity var(--duration-100) var(--ease-out);
}
.pricing-teaser-card:hover::before { opacity: 1; }
.pricing-teaser-card > p { flex: 1; }
.pricing-teaser-card > .btn { margin-top: var(--space-4); }
.pricing-teaser-card:hover {
    border-color: var(--clr-accent);
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-4px);
}
.pricing-teaser-badge {
    display: inline-block;
    padding: 3px 10px;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    border-radius: var(--radius-full);
    background: var(--clr-accent-muted);
    color: var(--clr-accent);
    margin-bottom: var(--space-4);
}
/* S217: the Most Popular card stands apart — accent border ring + glow */
.pricing-teaser-card.featured {
    border-color: var(--clr-accent);
    box-shadow: 0 0 0 1px var(--clr-accent), var(--shadow-card-hover);
    background: linear-gradient(180deg, var(--clr-accent-muted), var(--clr-surface) 30%);
}
.pricing-teaser-card.featured::before { opacity: 1; }
.pricing-teaser-price {
    font-size: var(--text-2xl);
    font-weight: var(--weight-extrabold);
    color: var(--clr-text);
    margin-bottom: var(--space-2);
}
.pricing-teaser-interval {
    font-size: var(--text-xs);
    color: var(--clr-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

/* ---- SECURITY ---- */
.security-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}
.security-card {
    background: var(--clr-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-6) var(--space-5);
    border: 1px solid var(--clr-card-border);
    box-shadow: var(--shadow-card);
}
.security-card-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--clr-accent-muted);
    color: var(--clr-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-4);
}

/* ---- STEPS ---- */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
}
@media (max-width: 768px) {
    .steps-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .steps-grid { grid-template-columns: 1fr; }
}
.step-card {
    background: var(--clr-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-6) var(--space-5) var(--space-5);
    border: 1px solid var(--clr-card-border);
    position: relative;
}
.step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--clr-accent);
    color: var(--clr-accent-contrast);
    font-weight: 700;
    font-size: var(--text-lg);
    margin: 0 auto var(--space-4);
    flex-shrink: 0;
}

/* ---- TESTIMONIALS ---- */
.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}
.testimonial-card {
    background: var(--clr-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-6) var(--space-5);
    border: 1px solid var(--clr-card-border);
}
.testimonial-text {
    font-size: var(--text-sm);
    color: var(--clr-text-secondary);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-4);
}
.testimonial-name {
    font-weight: var(--weight-semibold);
    color: var(--clr-text);
}
.testimonial-company {
    font-size: var(--text-xs);
    color: var(--clr-text-muted);
}

/* ---- USE CASES ---- */
.use-case-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}
.use-case-card {
    background: var(--clr-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-6) var(--space-5);
    border: 1px solid var(--clr-card-border);
}

/* ---- SHARED DEMO SYSTEM v2.0 ---- */
.demo-section{padding:var(--space-20) var(--space-6);text-align:center}
.demo-inner{max-width:840px;margin:0 auto}
.demo-card{background:var(--clr-surface);border:1px solid var(--clr-card-border);border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-lg)}
/* selector tabs */
.demo-selector{display:flex;gap:6px;padding:var(--space-4);background:var(--clr-bg);border-bottom:1px solid var(--clr-border)}
.demo-tab{flex:1;padding:var(--space-4) var(--space-3);border-radius:var(--radius-lg);cursor:pointer;border:2px solid transparent;background:transparent;transition:background var(--duration-100) var(--ease-out),border-color var(--duration-100) var(--ease-out);text-align:center}
.demo-tab:hover{background:var(--clr-surface-hover)}
.demo-tab.active{background:var(--clr-accent-muted);border-color:var(--clr-accent)}
.demo-tab-icon{display:flex;justify-content:center;margin-bottom:var(--space-2)}
.demo-tab-icon svg{width:24px;height:24px}
.demo-tab-name{font-size:var(--text-sm);font-weight:var(--weight-bold);color:var(--clr-text);margin-bottom:4px}
.demo-tab.active .demo-tab-name{color:var(--clr-accent)}
.demo-tab-desc{font-size:var(--text-xs);color:var(--clr-text-muted);line-height:1.5;display:none}
@media(min-width:680px){.demo-tab-desc{display:block}}
/* step rail */
.demo-step-rail{display:flex;align-items:center;justify-content:center;gap:0;padding:var(--space-5) var(--space-4) var(--space-2);flex-wrap:nowrap}
.demo-rail-dot{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:var(--text-xs);font-weight:var(--weight-bold);background:var(--clr-surface);border:2px solid var(--clr-border);color:var(--clr-text-muted);transition: color var(--duration-75) var(--ease-out), background-color var(--duration-75) var(--ease-out), border-color var(--duration-75) var(--ease-out), transform var(--duration-100) var(--ease-out);cursor:pointer;flex-shrink:0}
.demo-rail-dot svg{width:16px;height:16px}
.demo-rail-dot:hover{border-color:var(--clr-accent-muted)}
.demo-rail-dot.active{background:var(--clr-accent);border-color:var(--clr-accent);color:var(--clr-on-accent);transform:scale(1.15);box-shadow:0 0 0 4px var(--clr-accent-muted)}
.demo-rail-dot.done{background:var(--clr-accent-muted);border-color:var(--clr-accent);color:var(--clr-accent)}
.demo-rail-line{flex:1;height:2px;background:var(--clr-border);min-width:20px;transition:background var(--duration-200) var(--ease-out)}
.demo-rail-line.done{background:var(--clr-accent)}
/* content panel - two-column layout: text left, mock visual right */
.demo-panel{padding:var(--space-5) var(--space-6) var(--space-6);min-height:280px}
.demo-panel-content{animation:demo-fade-in 0.35s var(--ease-out)}
@keyframes demo-fade-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.demo-panel-text{text-align:left;margin-bottom:var(--space-4)}
.demo-panel-title{font-size:var(--text-lg);font-weight:var(--weight-bold);color:var(--clr-text);margin-bottom:var(--space-2)}
.demo-panel-desc{font-size:var(--text-sm);color:var(--clr-text-secondary);line-height:1.7;margin-bottom:var(--space-4)}
.demo-panel-detail{padding:var(--space-3) var(--space-4);background:var(--clr-accent-muted);border-radius:var(--radius-md);font-size:var(--text-xs);color:var(--clr-accent);font-weight:var(--weight-medium);line-height:1.5}
/* mock visual area */
.demo-mock{background:var(--clr-bg);border:1px solid var(--clr-border);border-radius:var(--radius-lg);padding:var(--space-4);margin-top:var(--space-4);text-align:left;overflow:hidden}
/* casey badge */
.demo-casey-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;background:var(--clr-accent-muted);border-radius:var(--radius-full);font-size:var(--text-xs);color:var(--clr-accent);font-weight:var(--weight-semibold);margin-bottom:var(--space-3)}
.demo-casey-badge svg{width:14px;height:14px}
/* progress bar */
.demo-progress{height:4px;background:var(--clr-border);border-radius:var(--radius-full);overflow:hidden;margin:0 var(--space-6)}
.demo-progress-bar{height:100%;background:linear-gradient(90deg,var(--clr-accent-tertiary),var(--clr-accent));border-radius:var(--radius-full);width:0;transition:width 0.3s var(--ease-out)}
/* summary card */
.demo-summary{padding:var(--space-5) var(--space-6);text-align:center;border-top:1px solid var(--clr-border);background:var(--clr-bg)}
.demo-summary-title{font-size:var(--text-base);font-weight:var(--weight-bold);color:var(--clr-text);margin-bottom:var(--space-3)}
.demo-summary-stats{display:flex;gap:var(--space-3);justify-content:center;flex-wrap:wrap;margin-bottom:var(--space-4)}
.demo-summary-stat{background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);min-width:100px}
.demo-summary-stat-num{font-size:var(--text-xl);font-weight:var(--weight-extrabold);color:var(--clr-accent)}
.demo-summary-stat-label{font-size:var(--text-xs);color:var(--clr-text-muted);margin-top:2px}
.demo-summary-actions{display:flex;gap:var(--space-3);justify-content:center;flex-wrap:wrap}
/* nav buttons inside panel - Prev pinned left, Next pinned right */
.demo-panel-nav{display:flex;gap:var(--space-3);justify-content:space-between;margin-top:var(--space-5)}
/* demo intro card (pre-start state) */
.demo-intro{padding:var(--space-10) var(--space-6);text-align:center}
.demo-intro-icon{width:64px;height:64px;border-radius:var(--radius-lg);background:var(--clr-accent-muted);display:flex;align-items:center;justify-content:center;margin:0 auto var(--space-4)}
.demo-intro-icon svg{width:32px;height:32px}
.demo-intro h3{font-size:var(--text-xl);font-weight:var(--weight-bold);margin-bottom:var(--space-2)}
.demo-intro p{font-size:var(--text-sm);color:var(--clr-text-muted);max-width:500px;margin:0 auto var(--space-6);line-height:1.6}
/* ---- MOCK VISUAL COMPONENTS ---- */
/* shared elements */
.dm-avatar{width:32px;height:32px;border-radius:50%;background:var(--clr-accent);color:var(--clr-on-accent);display:inline-flex;align-items:center;justify-content:center;font-size:var(--text-xs);font-weight:var(--weight-bold);flex-shrink:0}
.dm-avatar.sm{width:26px;height:26px;font-size:12px}
.dm-avatar.lg{width:48px;height:48px;font-size:var(--text-sm)}
.dm-pill{display:inline-block;padding:3px 10px;border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--weight-medium);background:var(--clr-surface);border:1px solid var(--clr-border);color:var(--clr-text-muted)}
.dm-pill.dm-pill-accent{background:var(--clr-accent-muted);border-color:var(--clr-accent);color:var(--clr-accent)}
/* email mock */
.dm-email{background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:var(--radius-md);overflow:hidden}
.dm-email-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--clr-border)}
.dm-email-from{display:flex;align-items:center;gap:var(--space-2)}
.dm-email-name{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--clr-text)}
.dm-email-meta{font-size:var(--text-xs);color:var(--clr-text-muted)}
.dm-email-badge{font-size:var(--text-xs);padding:2px 8px;border-radius:var(--radius-full);background:var(--clr-accent-muted);color:var(--clr-accent);font-weight:var(--weight-semibold)}
.dm-email-badge.dm-badge-done{background:var(--clr-surface);color:var(--clr-text-muted);border:1px solid var(--clr-border)}
.dm-email-subject{font-size:var(--text-sm);font-weight:var(--weight-bold);color:var(--clr-text);padding:var(--space-3) var(--space-4) 0}
.dm-email-body{font-size:var(--text-xs);color:var(--clr-text-secondary);line-height:1.7;padding:var(--space-2) var(--space-4)}
.dm-email-attach{display:flex;align-items:center;gap:6px;padding:var(--space-2) var(--space-4);font-size:var(--text-xs);color:var(--clr-accent)}
.dm-email-footer{display:flex;gap:6px;flex-wrap:wrap;padding:var(--space-3) var(--space-4);border-top:1px solid var(--clr-border)}
/* calendar mock */
.dm-calendar{background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:var(--radius-md);overflow:hidden}
.dm-cal-header{display:flex;justify-content:space-between;padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--clr-border);font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--clr-text)}
.dm-cal-grid{padding:var(--space-2) 0}
.dm-cal-row{display:flex;align-items:center;gap:var(--space-2);padding:4px var(--space-4)}
.dm-cal-time{font-size:var(--text-xs);color:var(--clr-text-muted);width:48px;flex-shrink:0;text-align:right}
.dm-cal-slot{flex:1;font-size:var(--text-xs);padding:6px 10px;border-radius:var(--radius-sm);border:1px solid var(--clr-border);color:var(--clr-text-muted)}
.dm-cal-slot.busy{background:var(--clr-surface);color:var(--clr-text-secondary);border-color:var(--clr-border)}
.dm-cal-slot.free{background:var(--clr-surface);color:var(--clr-text-muted)}
.dm-cal-slot.dm-best{background:var(--clr-accent-muted);border-color:var(--clr-accent);color:var(--clr-accent);font-weight:var(--weight-bold)}
.dm-cal-footer{display:flex;gap:6px;flex-wrap:wrap;padding:var(--space-3) var(--space-4);border-top:1px solid var(--clr-border)}
/* conflict resolution mock */
.dm-conflict{display:flex;flex-direction:column;gap:var(--space-2)}
.dm-conflict-row{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);border-radius:var(--radius-md)}
.dm-conflict-bad{background:rgba(var(--rgb-danger),0.08);border:1px solid rgba(var(--rgb-danger),0.3)}
.dm-conflict-good{background:var(--clr-accent-muted);border:1px solid var(--clr-accent)}
.dm-conflict-icon{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:var(--weight-bold);flex-shrink:0}
.dm-conflict-bad .dm-conflict-icon{background:rgba(var(--rgb-danger),0.15);color:var(--clr-danger)}
.dm-conflict-good .dm-conflict-icon{background:var(--clr-accent);color:var(--clr-on-accent)}
.dm-conflict-label{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--clr-text)}
.dm-conflict-detail{font-size:var(--text-xs);color:var(--clr-text-muted)}
.dm-conflict-arrow{font-size:var(--text-xs);color:var(--clr-text-muted);padding:4px var(--space-3);text-align:center}
/* invite mock */
.dm-invite{background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:var(--radius-md);padding:var(--space-4)}
.dm-invite-header{display:flex;align-items:center;gap:6px;font-size:var(--text-xs);color:var(--clr-accent);font-weight:var(--weight-semibold);margin-bottom:var(--space-3)}
.dm-invite-title{font-size:var(--text-sm);font-weight:var(--weight-bold);color:var(--clr-text);margin-bottom:var(--space-3)}
.dm-invite-detail{font-size:var(--text-xs);color:var(--clr-text-secondary);margin-bottom:4px}
.dm-invite-detail span{font-weight:var(--weight-semibold);color:var(--clr-text)}
.dm-invite-attendees{display:flex;gap:4px;margin:var(--space-3) 0}
.dm-invite-footer{display:flex;gap:6px;flex-wrap:wrap;padding-top:var(--space-3);border-top:1px solid var(--clr-border)}
/* checklist mock (Casey review) */
.dm-checklist{background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:var(--radius-md);overflow:hidden}
.dm-check-header{display:flex;align-items:center;gap:8px;padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--clr-border);font-size:var(--text-sm);font-weight:var(--weight-bold);color:var(--clr-text)}
.dm-check-icon{color:var(--clr-accent)}
.dm-check-item{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-2) var(--space-4);border-bottom:1px solid var(--clr-border)}
.dm-check-item:last-of-type{border-bottom:none}
.dm-check-box{width:22px;height:22px;border-radius:50%;background:var(--clr-accent);color:var(--clr-on-accent);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:var(--weight-bold);flex-shrink:0;margin-top:2px}
.dm-check-label{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--clr-text)}
.dm-check-detail{font-size:var(--text-xs);color:var(--clr-text-muted);margin-top:2px}
.dm-check-verdict{padding:var(--space-3) var(--space-4);background:var(--clr-accent-muted);font-size:var(--text-sm);font-weight:var(--weight-bold);color:var(--clr-accent);text-align:center}
/* tasks mock */
.dm-tasks{background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:var(--radius-md);overflow:hidden}
.dm-tasks-header{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--clr-border);font-size:var(--text-sm);font-weight:var(--weight-bold);color:var(--clr-text)}
.dm-task-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-4);border-bottom:1px solid var(--clr-border)}
.dm-task-owner{flex-shrink:0}
.dm-task-body{flex:1}
.dm-task-title{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--clr-text)}
.dm-task-meta{font-size:var(--text-xs);color:var(--clr-text-muted)}
.dm-task-tag{font-size:12px;padding:2px 8px;border-radius:var(--radius-full);background:var(--clr-accent-muted);color:var(--clr-accent);font-weight:var(--weight-semibold)}
.dm-tasks-footer{display:flex;gap:6px;flex-wrap:wrap;padding:var(--space-3) var(--space-4);border-top:1px solid var(--clr-border)}
/* task card mock */
.dm-taskcard{background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:var(--radius-md);padding:var(--space-4)}
.dm-taskcard-header{display:flex;align-items:center;gap:6px;font-size:var(--text-xs);color:var(--clr-accent);font-weight:var(--weight-semibold);margin-bottom:var(--space-2)}
.dm-taskcard-title{font-size:var(--text-base);font-weight:var(--weight-bold);color:var(--clr-text);margin-bottom:var(--space-2)}
.dm-taskcard-desc{font-size:var(--text-xs);color:var(--clr-text-secondary);line-height:1.6;margin-bottom:var(--space-3)}
.dm-meta-row{font-size:var(--text-xs);color:var(--clr-text-muted);margin-bottom:4px}
.dm-meta-row .dm-meta-label{font-weight:var(--weight-semibold);color:var(--clr-text-secondary)}
.dm-taskcard-footer{display:flex;gap:6px;flex-wrap:wrap;padding-top:var(--space-3);border-top:1px solid var(--clr-border)}
/* data feed mock */
.dm-datafeed{background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:var(--radius-md);overflow:hidden}
.dm-feed-header{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--clr-border);font-size:var(--text-sm);font-weight:var(--weight-bold);color:var(--clr-text)}
.dm-feed-stats{display:flex;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--clr-border)}
.dm-feed-stat{text-align:center;flex:1}
.dm-feed-num{font-size:var(--text-lg);font-weight:var(--weight-extrabold);color:var(--clr-accent)}
.dm-feed-label{font-size:12px;color:var(--clr-text-muted);margin-top:2px}
.dm-feed-list{padding:var(--space-2) var(--space-4)}
.dm-feed-item{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:var(--text-xs)}
.dm-feed-source{font-size:12px;font-weight:var(--weight-bold);padding:2px 6px;border-radius:var(--radius-sm);background:var(--clr-bg);color:var(--clr-text-muted);flex-shrink:0}
.dm-feed-text{flex:1;color:var(--clr-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-feed-score{font-size:var(--text-xs);font-weight:var(--weight-bold);color:var(--clr-accent);flex-shrink:0}
/* matrix mock */
.dm-matrix{background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:var(--radius-md);overflow:hidden}
.dm-matrix-header{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--clr-border);font-size:var(--text-sm);font-weight:var(--weight-bold);color:var(--clr-text)}
.dm-matrix-table{width:100%;border-collapse:collapse;font-size:var(--text-xs)}
.dm-matrix-table th{padding:var(--space-2) var(--space-3);text-align:left;font-weight:var(--weight-semibold);color:var(--clr-text-muted);border-bottom:1px solid var(--clr-border)}
.dm-matrix-table td{padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--clr-border);color:var(--clr-text-secondary)}
.dm-mat-yes{color:var(--clr-accent);font-weight:var(--weight-bold)}
.dm-mat-no{color:var(--clr-text-muted);opacity:0.5}
.dm-matrix-gaps{padding:var(--space-3) var(--space-4)}
.dm-matrix-gap-title{font-size:var(--text-xs);font-weight:var(--weight-bold);color:var(--clr-accent);margin-bottom:var(--space-2)}
.dm-matrix-gap{font-size:var(--text-xs);color:var(--clr-text-secondary);margin-bottom:4px;line-height:1.5}
/* slides mock */
.dm-slides{background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:var(--radius-md);overflow:hidden}
.dm-slides-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--clr-border)}
.dm-slides-title{font-size:var(--text-sm);font-weight:var(--weight-bold);color:var(--clr-text)}
.dm-slides-count{font-size:var(--text-xs);color:var(--clr-text-muted)}
.dm-slide-preview{padding:var(--space-3) var(--space-4);display:flex;flex-direction:column;gap:6px;max-height:240px;overflow-y:auto}
.dm-slide-page{display:flex;align-items:center;gap:var(--space-2);padding:6px 10px;border-radius:var(--radius-sm);border:1px solid var(--clr-border);font-size:var(--text-xs)}
.dm-slide-page.active{border-color:var(--clr-accent);background:var(--clr-accent-muted)}
.dm-slide-num{font-size:12px;font-weight:var(--weight-bold);color:var(--clr-text-muted);width:20px}
.dm-slide-page.active .dm-slide-num{color:var(--clr-accent)}
.dm-slide-text{color:var(--clr-text-secondary)}
.dm-slides-footer{display:flex;gap:6px;flex-wrap:wrap;padding:var(--space-3) var(--space-4);border-top:1px solid var(--clr-border)}
/* CRM lead mock */
.dm-crm{background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:var(--radius-md);overflow:hidden}
.dm-crm-header{display:flex;align-items:center;gap:6px;padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--clr-border);font-size:var(--text-xs);color:var(--clr-accent);font-weight:var(--weight-semibold)}
.dm-crm-card{padding:var(--space-4)}
.dm-crm-row{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-3)}
.dm-crm-name{font-size:var(--text-base);font-weight:var(--weight-bold);color:var(--clr-text)}
.dm-crm-meta{font-size:var(--text-xs);color:var(--clr-text-muted)}
.dm-crm-grid{display:flex;gap:var(--space-3);margin-bottom:var(--space-3)}
.dm-crm-stat{text-align:center;flex:1;background:var(--clr-bg);border-radius:var(--radius-sm);padding:var(--space-2)}
.dm-crm-stat-num{font-size:var(--text-base);font-weight:var(--weight-extrabold);color:var(--clr-accent)}
.dm-crm-stat-label{font-size:12px;color:var(--clr-text-muted);margin-top:2px}
.dm-crm-info{font-size:var(--text-xs);color:var(--clr-text-muted);margin-bottom:4px}
.dm-info-label{font-weight:var(--weight-semibold);color:var(--clr-text-secondary)}
.dm-crm-footer{display:flex;gap:6px;flex-wrap:wrap;padding:var(--space-3) var(--space-4);border-top:1px solid var(--clr-border)}
/* research mock */
.dm-research{background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:var(--radius-md);overflow:hidden}
.dm-research-header{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--clr-border);font-size:var(--text-sm);font-weight:var(--weight-bold);color:var(--clr-text)}
.dm-research-item{display:flex;align-items:flex-start;gap:var(--space-2);padding:var(--space-2) var(--space-4);border-bottom:1px solid var(--clr-border)}
.dm-research-tag{font-size:12px;font-weight:var(--weight-bold);padding:2px 8px;border-radius:var(--radius-sm);background:var(--clr-bg);color:var(--clr-text-muted);flex-shrink:0;margin-top:2px}
.dm-research-tag.news{background:var(--clr-accent-muted);color:var(--clr-accent)}
.dm-research-tag.tech{background:rgba(var(--rgb-info),0.12);color:var(--clr-info)}
.dm-research-tag.size{background:rgba(var(--rgb-warning),0.12);color:var(--clr-accent-secondary)}
.dm-research-title{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--clr-text)}
.dm-research-meta{font-size:var(--text-xs);color:var(--clr-text-muted);margin-top:2px}
.dm-research-action{padding:var(--space-3) var(--space-4);border-top:1px solid var(--clr-border)}
.dm-research-action-label{font-size:var(--text-xs);font-weight:var(--weight-bold);color:var(--clr-accent);margin-bottom:var(--space-2)}
.dm-research-action-text{font-size:var(--text-xs);color:var(--clr-text-secondary);line-height:1.6;padding:var(--space-3);background:var(--clr-bg);border-radius:var(--radius-sm);border-left:3px solid var(--clr-accent)}
/* proposal mock */
.dm-proposal{background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:var(--radius-md);padding:var(--space-4)}
.dm-proposal-header{font-size:var(--text-sm);font-weight:var(--weight-bold);color:var(--clr-text);margin-bottom:var(--space-3);padding-bottom:var(--space-2);border-bottom:1px solid var(--clr-border)}
.dm-proposal-section{margin-bottom:var(--space-2)}
.dm-proposal-label{font-size:var(--text-xs);font-weight:var(--weight-bold);color:var(--clr-accent);margin-bottom:2px}
.dm-proposal-text{font-size:var(--text-xs);color:var(--clr-text-secondary);line-height:1.6}
.dm-proposal-call{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);margin-top:var(--space-3);background:var(--clr-accent-muted);border-radius:var(--radius-md)}
.dm-proposal-call-title{font-size:var(--text-sm);font-weight:var(--weight-bold);color:var(--clr-accent)}
.dm-proposal-call-meta{font-size:var(--text-xs);color:var(--clr-text-muted)}
/* deal closed mock */
.dm-deal{text-align:center;padding:var(--space-4)}
.dm-deal-header{display:flex;align-items:center;justify-content:center;gap:var(--space-2);margin-bottom:var(--space-4)}
.dm-deal-icon{color:var(--clr-accent)}
.dm-deal-amount{font-size:2.5rem;font-weight:var(--weight-extrabold);color:var(--clr-accent);margin-bottom:var(--space-1)}
.dm-deal-amount span{font-size:var(--text-sm);color:var(--clr-text-muted);font-weight:var(--weight-normal)}
.dm-deal-grid{display:flex;gap:var(--space-3);justify-content:center;margin:var(--space-4) 0}
.dm-deal-stat{background:var(--clr-bg);border:1px solid var(--clr-border);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);min-width:90px}
.dm-deal-stat-num{font-size:var(--text-lg);font-weight:var(--weight-extrabold);color:var(--clr-text)}
.dm-deal-stat-label{font-size:12px;color:var(--clr-text-muted);margin-top:2px}
.dm-deal-timeline{text-align:left;margin:var(--space-3) 0}
.dm-deal-step{font-size:var(--text-xs);color:var(--clr-text-muted);padding:4px 0 4px 16px;position:relative}
.dm-deal-step::before{content:'';position:absolute;left:0;top:10px;width:8px;height:8px;border-radius:50%;background:var(--clr-border)}
.dm-deal-step.done{color:var(--clr-accent)}
.dm-deal-step.done::before{background:var(--clr-accent)}
.dm-deal-step.current{font-weight:var(--weight-bold);color:var(--clr-text)}
.dm-deal-footer{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;padding-top:var(--space-3)}
/* responsive */
@media(max-width:680px){
    .demo-tab-desc{display:none}
    .demo-tab-name{font-size:var(--text-xs)}
    .demo-rail-dot{width:28px;height:28px;font-size:12px}
    .demo-rail-dot svg{width:12px;height:12px}
    .demo-panel{padding:var(--space-4)}
    .demo-summary-stats{flex-direction:column;align-items:center}
    .demo-inner{max-width:100%}
    .dm-deal-amount{font-size:2rem}
}

/* ---- CTA ---- */
.cta-section {
    padding: var(--space-20) var(--space-6);
    text-align: center;
    background: var(--clr-surface);
    border-top: 1px solid var(--clr-border);
    border-bottom: 1px solid var(--clr-border);
}
/* S217: breathing room between the closing line and the buttons */
.cta-section > p {
    margin: 0 auto var(--space-10);
    max-width: 640px;
}
.cta-button-group {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
}

/* ---- FOOTER ---- */
.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-8);
    padding: var(--space-10) var(--space-6);
    max-width: var(--content-max);
    margin: 0 auto;
}
.footer-col h4 {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--clr-text);
    margin-bottom: var(--space-4);
}
.footer-col a {
    display: block;
    font-size: var(--text-sm);
    color: var(--clr-text-secondary);
    padding: var(--space-1) 0;
    transition: color var(--duration-100) var(--ease-out);
}
.footer-col a:hover { color: var(--clr-text); }
.footer-bottom {
    text-align: center;
    padding: var(--space-6);
    border-top: 1px solid var(--clr-border);
    font-size: var(--text-xs);
    color: var(--clr-text-muted);
}
.footer-bottom .aems-version {
    margin-left: var(--space-2);
    opacity: 0.7;
}

/* ---- TRUST BAR ---- */
.trust-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-6);
    padding: var(--space-6);
    border-top: 1px solid var(--clr-border);
    border-bottom: 1px solid var(--clr-border);
}
.trust-label {
    font-size: var(--text-xs);
    color: var(--clr-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}
.trust-logos {
    display: flex;
    gap: var(--space-6);
    align-items: center;
}

/* ---- WHY AEMS PRO SECTION ---- */
.why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}
@media (max-width: 900px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .why-grid { grid-template-columns: 1fr; } }
.why-card {
    background: var(--clr-surface-raised);
    border: 1px solid var(--clr-card-border);
    border-radius: var(--radius-xl);
    padding: var(--space-8) var(--space-6);
    transition: border-color var(--duration-100), box-shadow var(--duration-100);
}
.why-card:hover {
    border-color: var(--clr-card-border-hover);
    box-shadow: var(--shadow-md);
}
.why-card h3 {
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    color: var(--clr-text);
    margin-bottom: var(--space-2);
}
.why-card p {
    font-size: var(--text-sm);
    color: var(--clr-text-secondary);
    line-height: var(--leading-relaxed);
}

/* ---- COMPARISON TABLE ---- */
.compare-table-wrap {
    overflow-x: auto;
    margin-bottom: var(--space-6);
    border-radius: var(--radius-xl);
    border: 1px solid var(--clr-card-border);
    background: var(--clr-surface-raised);
    box-shadow: 0 4px 24px rgba(0,0,0,.12);
}
.compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
    min-width: 720px;
}
.compare-table th,
.compare-table td {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    border-bottom: 1px solid var(--clr-border);
    vertical-align: middle;
}
.compare-table th {
    background: var(--clr-bg);
    font-weight: var(--weight-bold);
    color: var(--clr-text);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    position: sticky;
    top: 0;
    z-index: 2;
}
.compare-feature-col { width: 22%; }
.compare-table th.col-aems {
    background: linear-gradient(135deg, var(--clr-accent-muted), var(--clr-accent-glow, rgba(20,184,137,.08)));
    border-bottom: 3px solid var(--clr-accent);
    color: var(--clr-accent);
}
.compare-col-name { font-size: var(--text-base); font-weight: var(--weight-bold); }
.compare-col-sub { font-size: 12px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--clr-text-muted); margin-top: 2px; }
.compare-table td:first-child { font-weight: var(--weight-semibold); color: var(--clr-text); }

/* Category header rows */
.compare-table tr.compare-category-row td {
    background: var(--clr-surface);
    font-weight: var(--weight-bold);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--clr-accent);
    padding: var(--space-2) var(--space-4);
    border-top: 2px solid var(--clr-border);
    border-bottom: 1px solid var(--clr-border);
}

/* AEMS column highlight */
.compare-table td.cell-aems {
    background: var(--clr-accent-muted);
    border-left: 2px solid var(--clr-accent);
    border-right: 2px solid var(--clr-accent);
}

/* Mark icons */
.compare-cell { display: flex; align-items: flex-start; gap: var(--space-2); line-height: 1.5; }
.compare-cell .mark-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    margin-top: 1px;
}
.compare-cell.mark-full .mark-icon {
    background: var(--clr-success, #22c55e);
    color: #fff;
}
.compare-cell.mark-partial .mark-icon {
    background: var(--clr-warning, #f59e0b);
    color: #fff;
}
.compare-cell.mark-cross .mark-icon {
    background: var(--clr-text-muted);
    color: var(--clr-bg);
    opacity: .5;
}
.compare-cell.mark-full { color: var(--clr-text); font-weight: var(--weight-medium); }
.compare-cell.mark-partial { color: var(--clr-text-secondary); }
.compare-cell.mark-cross { color: var(--clr-text-muted); }

/* Hover */
.compare-table tbody tr:hover td { background: var(--clr-surface-hover); }
.compare-table tbody tr:hover td.cell-aems { background: var(--clr-accent-muted); }
.compare-table tr:last-child td { border-bottom: none; }

/* Legend */
.compare-legend {
    display: flex;
    gap: var(--space-6);
    justify-content: center;
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
}
.compare-legend-item { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--clr-text-secondary); }
.compare-legend-item .legend-icon { width: 22px; height: 22px; font-size: 13px; }

/* CTA below table */
.compare-cta { text-align: center; display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; }

@media (max-width: 900px) {
    .compare-table { font-size: var(--text-xs); min-width: 600px; }
    .compare-cell { flex-direction: column; gap: 2px; }
    .compare-cell .mark-icon { width: 16px; height: 16px; font-size: 12px; }
    .compare-col-sub { display: none; }
}

/* ---- STATS GRID ---- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}
@media (max-width: 700px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
.stat-card {
    text-align: center;
    padding: var(--space-6) var(--space-4);
    background: var(--clr-surface-raised);
    border: 1px solid var(--clr-card-border);
    border-radius: var(--radius-xl);
}
.stat-card-num {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: var(--weight-extrabold);
    color: var(--clr-accent);
    margin-bottom: var(--space-1);
}
.stat-card-label {
    font-size: var(--text-sm);
    color: var(--clr-text-secondary);
    font-weight: var(--weight-semibold);
}

/* ---- TRADE USE CASES ---- */
.trade-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}
@media (max-width: 900px) { .trade-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .trade-grid { grid-template-columns: 1fr; } }
.trade-card {
    background: var(--clr-surface-raised);
    border: 1px solid var(--clr-card-border);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
}
.trade-card h3 {
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    color: var(--clr-accent);
    margin-bottom: var(--space-2);
}
.trade-card p {
    font-size: var(--text-sm);
    color: var(--clr-text-secondary);
    line-height: var(--leading-relaxed);
}

/* ---- HERO MICROCOPY ---- */
.hero-microcopy {
    font-size: var(--text-sm);
    color: var(--clr-text-muted);
    margin-top: var(--space-3);
    text-align: center;
}
.hero-demo-link {
    display: inline-block;
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--clr-text-secondary);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--duration-100) var(--ease-out);
    padding: var(--space-2) var(--space-1);
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}
.hero-demo-link:hover { color: var(--clr-accent); }

/* ---- HERO TRUST LINE ---- */
.hero-trust-line {
    font-size: var(--text-sm);
    color: var(--clr-text-secondary);
    margin-top: var(--space-4);
    text-align: center;
    font-weight: var(--weight-medium);
    opacity: 0.9;
}

/* ---- SECTION CTA WRAP ---- */
.section-cta-wrap {
    text-align: center;
    margin-top: var(--space-10);
}
.section-cta-wrap .btn { margin-bottom: var(--space-2); }

/* ---- AMBIENT SECTION BACKGROUNDS ---- */
.section::before {
    content: '';
    position: absolute;
    top: 10%;
    left: 0;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, var(--clr-accent-glow, rgba(20,184,137,0.06)), transparent 70%);
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
    max-width: 50%;
}
.section::after {
    content: '';
    position: absolute;
    bottom: 5%;
    right: 0;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(var(--rgb-info),0.04), transparent 70%);
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
    max-width: 50%;
}
.section { position: relative; overflow-x: hidden; overflow-y: visible; }
.problem-section { position: relative; overflow-x: hidden; overflow-y: visible; }
.section > *:not(.section-cta-wrap) { position: relative; z-index: 1; }
.section-cta-wrap { position: relative; z-index: 1; }

/* ---- SCROLL CUE ---- */
.scroll-cue {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    animation: scroll-cue-bounce 2s var(--ease-out) infinite;
    pointer-events: none;
    opacity: 0.6;
}
.scroll-cue svg { width: 24px; height: 24px; stroke: var(--clr-text-muted); fill: none; stroke-width: 2; }
@keyframes scroll-cue-bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0) translateX(-50%); }
    40% { transform: translateY(-10px) translateX(-50%); }
    60% { transform: translateY(-5px) translateX(-50%); }
}
.scroll-cue.hidden { opacity: 0; transition: opacity var(--duration-300) var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .scroll-cue { animation: none; } }

/* ---- HERO DASHBOARD MOCK ---- */
.hero-mock {
    max-width: 680px;
    margin: var(--space-8) auto 0;
    background: var(--clr-surface-raised);
    border: 1px solid var(--clr-card-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl), 0 0 60px var(--clr-accent-glow);
    overflow: hidden;
    text-align: left;
}
.hero-mock-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--clr-border);
    background: var(--clr-bg);
}
.hero-mock-dots { display: flex; gap: 6px; }
.hero-mock-dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--clr-border); }
.hero-mock-title { font-size: var(--text-xs); color: var(--clr-text-muted); margin-left: auto; font-weight: var(--weight-semibold); }
.hero-mock-body { padding: var(--space-4) var(--space-5); }
.hero-mock-casey {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}
.hero-mock-casey-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--clr-accent); color: var(--clr-on-accent);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--text-xs); font-weight: var(--weight-bold);
    flex-shrink: 0;
}
.hero-mock-casey-name { font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--clr-text); }
.hero-mock-casey-badge { font-size: 12px; padding: 2px 8px; border-radius: var(--radius-full); background: var(--clr-accent-muted); color: var(--clr-accent); font-weight: var(--weight-semibold); }
.hero-mock-input {
    background: var(--clr-bg);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
    padding: 11px var(--space-4);
    font-size: var(--text-sm);
    color: var(--clr-text-secondary);
    margin-bottom: var(--space-3);
    min-height: 44px;
    line-height: 1.6;
    box-sizing: border-box;
}
.hero-mock-typed { color: var(--clr-text); }
.hero-mock-typed::after {
    content: '';
    display: inline-block;
    width: 2px;
    height: 1em;
    background: var(--clr-accent);
    margin-left: 2px;
    vertical-align: text-bottom;
    animation: hero-cursor-blink 1s step-end infinite;
}
.hero-mock-cursor { display: none; }
@keyframes hero-cursor-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.hero-mock-response {
    background: var(--clr-accent-muted);
    border: 1px solid var(--clr-accent);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    color: var(--clr-accent);
    font-weight: var(--weight-semibold);
    margin-bottom: var(--space-3);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--duration-300) var(--ease-out), transform var(--duration-300) var(--ease-out);
}
.hero-mock-response.show { opacity: 1; transform: translateY(0); }
.hero-mock-tasks {
    background: var(--clr-bg);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: var(--space-3);
}
.hero-mock-tasks-header { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--clr-border); font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--clr-text-muted); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.hero-mock-task {
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--clr-border);
    font-size: var(--text-xs);
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity var(--duration-300) var(--ease-out), transform var(--duration-300) var(--ease-out);
}
.hero-mock-task.show { opacity: 1; transform: translateX(0); }
.hero-mock-task:last-child { border-bottom: none; }
.hero-mock-task-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--clr-accent); flex-shrink: 0; }
.hero-mock-task-text { color: var(--clr-text-secondary); flex: 1; }
.hero-mock-task-status { font-size: 12px; padding: 2px 6px; border-radius: var(--radius-full); background: var(--clr-accent-muted); color: var(--clr-accent); font-weight: var(--weight-semibold); }
.hero-mock-report {
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    color: var(--clr-text-secondary);
    opacity: 0;
    transition: opacity var(--duration-300) var(--ease-out);
}
.hero-mock-report.show { opacity: 1; }
.hero-mock-report-icon { color: var(--clr-accent); }
.hero-mock-report strong { color: var(--clr-accent); }
@media (max-width: 768px) { .hero-mock { max-width: 100%; } }

/* ---- PROBLEM STATEMENT ---- */
.problem-section {
    padding: var(--space-20) var(--space-6);
    max-width: var(--content-max);
    margin: 0 auto;
    text-align: center;
}
.problem-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
    margin-top: var(--space-8);
}
@media (max-width: 900px) { .problem-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .problem-grid { grid-template-columns: 1fr; } }
.problem-card {
    text-align: center;
    padding: var(--space-6) var(--space-4);
}
.problem-card-icon {
    width: 48px; height: 48px;
    margin: 0 auto var(--space-3);
    color: var(--clr-text-muted);
    opacity: 0.7;
}
.problem-card-icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.problem-card h3 { font-size: var(--text-base); font-weight: var(--weight-bold); color: var(--clr-text); margin-bottom: var(--space-2); }
.problem-card p { font-size: var(--text-sm); color: var(--clr-text-secondary); line-height: var(--leading-relaxed); }

/* ---- SCROLL REVEAL ---- */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.revealed { opacity: 1; transform: translateY(0); }
/* Staggered children */
.reveal.revealed .why-card:nth-child(1),
.reveal.revealed .feature-card:nth-child(1),
.reveal.revealed .problem-card:nth-child(1),
.reveal.revealed .security-card:nth-child(1),
.reveal.revealed .testimonial-card:nth-child(1),
.reveal.revealed .trade-card:nth-child(1),
.reveal.revealed .stat-card:nth-child(1),
.reveal.revealed .step-card:nth-child(1) { transition-delay: 0ms; }
.reveal.revealed .why-card:nth-child(2),
.reveal.revealed .feature-card:nth-child(2),
.reveal.revealed .problem-card:nth-child(2),
.reveal.revealed .security-card:nth-child(2),
.reveal.revealed .testimonial-card:nth-child(2),
.reveal.revealed .trade-card:nth-child(2),
.reveal.revealed .stat-card:nth-child(2),
.reveal.revealed .step-card:nth-child(2) { transition-delay: 50ms; }
.reveal.revealed .why-card:nth-child(3),
.reveal.revealed .feature-card:nth-child(3),
.reveal.revealed .problem-card:nth-child(3),
.reveal.revealed .security-card:nth-child(3),
.reveal.revealed .testimonial-card:nth-child(3),
.reveal.revealed .trade-card:nth-child(3),
.reveal.revealed .stat-card:nth-child(3),
.reveal.revealed .step-card:nth-child(3) { transition-delay: 100ms; }
.reveal.revealed .why-card:nth-child(4),
.reveal.revealed .feature-card:nth-child(4),
.reveal.revealed .problem-card:nth-child(4),
.reveal.revealed .security-card:nth-child(4),
.reveal.revealed .trade-card:nth-child(4),
.reveal.revealed .stat-card:nth-child(4),
.reveal.revealed .step-card:nth-child(4) { transition-delay: 150ms; }
.reveal.revealed .why-card:nth-child(5),
.reveal.revealed .feature-card:nth-child(5),
.reveal.revealed .trade-card:nth-child(5),
.reveal.revealed .step-card:nth-child(5) { transition-delay: 200ms; }
.reveal.revealed .why-card:nth-child(6),
.reveal.revealed .feature-card:nth-child(6),
.reveal.revealed .trade-card:nth-child(6),
.reveal.revealed .step-card:nth-child(6) { transition-delay: 250ms; }
.reveal.revealed .why-card,
.reveal.revealed .feature-card,
.reveal.revealed .problem-card,
.reveal.revealed .security-card,
.reveal.revealed .testimonial-card,
.reveal.revealed .trade-card,
.reveal.revealed .stat-card,
.reveal.revealed .step-card {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.revealed .why-card,
.reveal.revealed .feature-card,
.reveal.revealed .problem-card,
.reveal.revealed .security-card,
.reveal.revealed .testimonial-card,
.reveal.revealed .trade-card,
.reveal.revealed .stat-card,
.reveal.revealed .step-card { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .reveal .why-card, .reveal .feature-card, .reveal .problem-card, .reveal .security-card,
    .reveal .testimonial-card, .reveal .trade-card, .reveal .stat-card, .reveal .step-card { opacity: 1; transform: none; transition: none; }
}

/* ---- TESTIMONIAL ENHANCEMENTS ---- */
.testimonial-badge {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    padding: 3px 10px;
    border-radius: var(--radius-full);
    background: var(--clr-accent-muted);
    color: var(--clr-accent);
    margin-bottom: var(--space-3);
}
.testimonial-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto var(--space-3);
    background: var(--clr-bg);
    border: 2px solid var(--clr-card-border);
}
.testimonial-avatar svg { width: 100%; height: 100%; }
.testimonial-result {
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--clr-accent);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--clr-border);
}

/* ---- FAQ ACCORDION ---- */
.faq-section {
    max-width: 760px;
    margin: 0 auto;
    padding: var(--space-20) var(--space-6);
}
.faq-section-header { text-align: center; margin-bottom: var(--space-8); }
.faq-item {
    margin-bottom: var(--space-3);
    background: var(--clr-surface-raised);
    border: 1px solid var(--clr-card-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color var(--duration-100) var(--ease-out);
}
.faq-item:hover { border-color: var(--clr-card-border-hover); }
.faq-item.active { border-color: var(--clr-accent); }
.faq-question {
    font-weight: var(--weight-semibold);
    color: var(--clr-text);
    cursor: pointer;
    font-size: var(--text-sm);
    padding: var(--space-5) var(--space-5);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    transition: background var(--duration-100) var(--ease-out);
}
.faq-question:hover { background: var(--clr-surface-hover); }
.faq-question .faq-arrow {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--clr-text-muted);
    transition: transform var(--duration-150) var(--ease-out);
}
.faq-item.active .faq-question .faq-arrow { transform: rotate(180deg); }
.faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows var(--duration-200) var(--ease-out);
}
.faq-item.active .faq-answer { grid-template-rows: 1fr; }
.faq-answer-text {
    overflow: hidden;
    min-height: 0;
    padding: 0 var(--space-5);
    font-size: var(--text-sm);
    color: var(--clr-text-secondary);
    line-height: var(--leading-relaxed);
}
.faq-item.active .faq-answer-text {
    padding-bottom: var(--space-6);
}

/* ---- STICKY CTA BAR ---- */
.sticky-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--clr-surface-raised);
    border-top: 1px solid var(--clr-accent);
    box-shadow: 0 -4px 24px rgba(0,0,0,.15);
    padding: var(--space-3) var(--space-6);
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    z-index: 900;
    transform: translateY(100%);
    transition: transform var(--duration-300) var(--ease-out);
}
.sticky-cta.show { display: flex; transform: translateY(0); }
.sticky-cta-text { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--clr-text); }
.sticky-cta-text span { color: var(--clr-text-muted); font-weight: var(--weight-normal); font-size: var(--text-xs); }
.sticky-cta-btn {
    padding: 10px 28px;
    border-radius: var(--radius-md);
    background: var(--clr-accent);
    color: var(--clr-on-accent);
    font-weight: var(--weight-bold);
    font-size: var(--text-sm);
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--duration-100) var(--ease-out), transform var(--duration-100) var(--ease-out);
}
.sticky-cta-btn:hover { background: var(--clr-accent-hover); transform: translateY(-1px); }
@media (max-width: 600px) {
    .sticky-cta-text { display: none; }
    .sticky-cta { justify-content: center; }
    .sticky-cta-btn { width: 100%; text-align: center; }
}

/* ---- TRADE SHOW MORE ---- */
.trade-card.hidden-card { display: none; }
.trade-toggle-wrap { text-align: center; margin-top: var(--space-6); }
.trade-more-line {
    text-align: center;
    margin: var(--space-4) auto 0;
    max-width: 760px;
    font-size: var(--text-sm);
    color: var(--clr-text-muted);
    line-height: 1.6;
}
.trade-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    background: var(--clr-surface-raised);
    border: 1px solid var(--clr-card-border);
    border-radius: var(--radius-full);
    color: var(--clr-text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    transition: border-color var(--duration-100) var(--ease-out), color var(--duration-100) var(--ease-out);
}
.trade-toggle:hover { border-color: var(--clr-accent); color: var(--clr-accent); }
.trade-toggle svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--duration-200) var(--ease-out); }
.trade-toggle.expanded svg { transform: rotate(180deg); }

/* ---- ICONS ---- */
.icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    fill: currentColor;
}

/* ---- LAYOUT HELPERS ---- */
.text-center { text-align: center; }
.container {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 var(--space-6);
}

/* ---- APP SHELL (from old system) ---- */
.app-layout {
    display: flex;
    min-height: 100vh;
    background: transparent;
}
.app-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-left: var(--sidebar-w);
    min-height: 100vh;
}
.page-content {
    flex: 1;
    padding: var(--space-6);
    overflow: visible;
}

/* ---- AUTH PAGES ---- */
.auth-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--space-6);
}
.auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--clr-surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--clr-card-border);
    box-shadow: var(--shadow-card);
    padding: var(--space-8);
}
.auth-logo {
    text-align: center;
    margin-bottom: var(--space-6);
}
.auth-title {
    font-size: var(--text-2xl);
    font-weight: var(--weight-extrabold);
    color: var(--clr-text);
    text-align: center;
    margin-bottom: var(--space-2);
}
.auth-subtitle {
    text-align: center;
    color: var(--clr-text-secondary);
    margin-bottom: var(--space-6);
}
.auth-footer {
    text-align: center;
    margin-top: var(--space-6);
    font-size: var(--text-sm);
    color: var(--clr-text-muted);
}

/* ---- MISC ---- */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-16) var(--space-6);
    color: var(--clr-text-muted);
}
.empty-state-icon {
    width: 64px;
    height: 64px;
    margin-bottom: var(--space-4);
    color: var(--clr-text-muted);
    opacity: 0.5;
}
.empty-state-title {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--clr-text);
    margin-bottom: var(--space-2);
}
.empty-state-text {
    font-size: var(--text-sm);
    color: var(--clr-text-secondary);
    max-width: 400px;
    margin-bottom: var(--space-6);
}

/* ---- LOADING ---- */
.skeleton {
    background: linear-gradient(90deg, var(--clr-surface-raised) 25%, var(--clr-surface-hover) 50%, var(--clr-surface-raised) 75%);
    background-size: 200% 100%;
    border-radius: var(--radius-sm);
    animation: skeleton-shimmer 1.5s infinite;
}

@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes shimmer {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ---- RESPONSIVE ---- */
@media (max-width: 768px) {
    .hero { padding: var(--space-10) var(--space-4); }
    .hero-line { font-size: var(--text-2xl); }
    .section { padding: var(--space-10) var(--space-4); }
    .feature-grid { grid-template-columns: repeat(2, 1fr); }
    .pricing-teaser-grid { grid-template-columns: 1fr; }
    .security-grid { grid-template-columns: repeat(2, 1fr); }
    .steps-grid { grid-template-columns: repeat(2, 1fr); }
    .testimonial-grid { grid-template-columns: 1fr; }
    .use-case-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
    .hero-cta-group { flex-direction: column; align-items: center; }
    .cta-button-group { flex-direction: column; align-items: center; }
    .hero-stats { flex-direction: column; gap: var(--space-4); }
    .problem-grid { grid-template-columns: repeat(2, 1fr); }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .demo-section { padding: var(--space-10) var(--space-4); }
    .cta-section { padding: var(--space-10) var(--space-4); }
    .faq-section { padding: var(--space-10) var(--space-4); }
    .problem-section { padding: var(--space-10) var(--space-4); }
}

@media (max-width: 480px) {
    .feature-grid { grid-template-columns: 1fr; }
    .security-grid { grid-template-columns: 1fr; }
    .steps-grid { grid-template-columns: 1fr; }
    .use-case-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
    .btn-lg, .btn-xl { width: 100%; }
    .problem-grid { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .why-grid { grid-template-columns: 1fr; }
    .trade-grid { grid-template-columns: 1fr; }
}

/* 375px mobile fixes */
@media (max-width: 375px) {
    body { overflow-x: hidden; max-width: 100vw; }
    html { overflow-x: hidden; }
    .hero { padding: var(--space-8) var(--space-3); overflow-x: clip; }
    .hero-line { font-size: var(--text-xl); }
    .hero-subtitle { font-size: var(--text-base); }
    .section { padding: var(--space-8) var(--space-3); overflow-x: hidden; overflow-y: visible; }
    .section-title { font-size: var(--text-xl); }
    .section-subtitle { font-size: var(--text-base); }
    .hero-stats { gap: var(--space-3); }
    .hero-stat-num { font-size: var(--text-2xl); }
    .compare-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
    .compare-table { min-width: 600px; }
    .hero-mock { max-width: 100%; overflow: hidden; }
    .hero-mock-body { padding: var(--space-3); }
    .hero-mock-input { font-size: var(--text-xs); }
    .hero-mock-task-text { font-size: 12px; }
    .landing-topbar { padding: 0 var(--space-2); max-width: 100vw; overflow: hidden; }
    .landing-topbar-brand { font-size: var(--text-sm); }
    .landing-topbar-link { display: none; }
    .landing-topbar-toggles { gap: 4px; }
    .btn-sm { padding: 8px 14px; min-height: 44px; font-size: var(--text-xs); }
    .landing-topbar-actions .btn-sm { min-height: 44px; }
    .hero-demo-link { font-size: var(--text-xs); }
    .hero-trust-line { font-size: var(--text-xs); }
    .pricing-teaser-grid { gap: var(--space-3); }
    .pricing-teaser-card { padding: var(--space-5) var(--space-4); }
    .footer-grid { grid-template-columns: 1fr; gap: var(--space-4); }
    .cta-section { padding: var(--space-10) var(--space-3); }
    .faq-section { padding: var(--space-10) var(--space-3); }
    .problem-section { padding: var(--space-10) var(--space-3); overflow-x: hidden; }
    .demo-section { padding: var(--space-10) var(--space-3); overflow-x: hidden; }
    .demo-inner { max-width: 100%; overflow-x: hidden; }
}


/* ═══ S210: ROI CALCULATOR (public landing) ═══ */
.calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); margin-top: var(--space-8); }
.calc-inputs { display: flex; flex-direction: column; gap: var(--space-4); }
.calc-field { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 0.95rem; }
.calc-field input { width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--clr-border); background: var(--clr-surface-input, var(--clr-surface)); color: var(--clr-text); font-size: 1rem; }
.calc-field input:focus { outline: 2px solid rgba(var(--rgb-accent), 0.4); border-color: var(--clr-accent); }
/* S211e: [hidden] must ALWAYS win over author display rules (the empty-cost-card root cause). */
#calculator [hidden] { display: none !important; }
.calc-results { display: flex; flex-direction: column; gap: var(--space-3); }
.calc-hero-card .calc-result-label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
.calc-result-card { background: var(--clr-surface-raised); border: 1px solid var(--clr-border); border-radius: 12px; padding: var(--space-4) var(--space-5); }
.calc-result-card.accent { border-color: rgba(var(--rgb-accent), 0.5); background: rgba(var(--rgb-accent), 0.06); }
.calc-result-label { font-size: var(--text-sm); color: var(--clr-text-muted); }
.calc-result-num { font-size: 1.9rem; font-weight: 800; margin-top: 2px; }
.calc-result-sub { font-size: var(--text-sm); color: var(--clr-text-muted); margin-top: 2px; }
.calc-disclaimer { font-size: var(--text-xs); color: var(--clr-text-muted); line-height: 1.7; margin-top: var(--space-2); }
.calc-email-row { display: flex; gap: var(--space-2); margin-top: var(--space-2); flex-wrap: wrap; }
.calc-email-row input { flex: 1 1 200px; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--clr-border); background: var(--clr-surface-input, var(--clr-surface)); color: var(--clr-text); font-size: 0.95rem; }
.calc-email-note { font-size: var(--text-sm); color: var(--clr-accent); }
.calc-field select {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--clr-border);
    background: var(--clr-surface-input, var(--clr-surface));
    color: var(--clr-text);
    font-size: 1rem;
    font-family: inherit;
}
.calc-field select:focus { outline: 2px solid rgba(var(--rgb-accent), 0.4); border-color: var(--clr-accent); }
.calc-cost-card {
    background: var(--clr-surface-raised);
    border: 1px solid var(--clr-border);
    border-radius: 12px;
    padding: var(--space-4) var(--space-5) var(--space-5);
}
.calc-cost-title { font-size: var(--text-sm); font-weight: 700; color: var(--clr-text); margin-bottom: var(--space-2); }
.calc-cost-row { display: flex; justify-content: space-between; gap: var(--space-4); font-size: var(--text-sm); color: var(--clr-text-secondary); padding: 3px 0; }
.calc-cost-row span:last-child { color: var(--clr-text); font-weight: 600; white-space: nowrap; }
.calc-cost-row.total { border-top: 1px solid var(--clr-border); margin-top: 6px; padding-top: 8px; padding-bottom: 2px; color: var(--clr-text); font-weight: 700; }
.calc-live-hint {
    font-size: var(--text-sm);
    color: var(--clr-accent);
    font-weight: 600;
    padding: 6px 0 2px;
}
.calc-input-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-5);
    border: 1px solid var(--clr-border);
    border-radius: 14px;
    background: rgba(var(--rgb-accent), 0.03);
}
.calc-input-group-title {
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--clr-accent);
}
.calc-hero-card {
    background: rgba(var(--rgb-accent), 0.08);
    border: 1px solid rgba(var(--rgb-accent), 0.5);
    border-radius: 14px;
    padding: var(--space-5) var(--space-6);
}
.calc-hero-card.negative {
    background: rgba(var(--rgb-warning), 0.07);
    border-color: rgba(var(--rgb-warning), 0.4);
}
.calc-hero-num {
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1.1;
    margin-top: 4px;
    color: var(--clr-text);
}
.calc-chain {
    margin-top: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.calc-chain-row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    font-size: var(--text-sm);
    color: var(--clr-text-secondary);
}
.calc-chain-row span:last-child { color: var(--clr-text); font-weight: 600; white-space: nowrap; }
.calc-chain-row.minus span:last-child { color: var(--clr-warning); }
.calc-chain-row.total {
    border-top: 1px solid rgba(var(--rgb-accent), 0.35);
    margin-top: 6px;
    padding-top: 8px;
    font-weight: 700;
    color: var(--clr-text);
}
.calc-chain-row.total span:last-child { color: var(--clr-accent); font-size: 1.05rem; }
.calc-hero-meta {
    font-size: var(--text-sm);
    color: var(--clr-text-secondary);
    margin-top: 6px;
}
.calc-value-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}
.calc-cta-row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-top: var(--space-2);
}
.calc-cta-micro {
    font-size: var(--text-xs);
    color: var(--clr-text-muted);
}
@media (max-width: 620px) {
    .calc-value-pair { grid-template-columns: 1fr; }
    .calc-hero-num { font-size: 2rem; }
}
@media (max-width: 860px) { .calc-grid { grid-template-columns: 1fr; } }

* ═══ S210: FOOTER NEWSLETTER ═══ */
.footer-newsletter { justify-self: start; }
/* S217: the newsletter column spans 2 grid tracks and stands out —
   the email input must fit a full address visibly, and the section
   reads as a deliberate offer, not a cramped footer afterthought. */
.footer-newsletter {
    grid-column: span 2;
    justify-self: start;
    padding: var(--space-4);
    background: var(--clr-surface);
    border: 1px solid var(--clr-card-border);
    border-radius: var(--radius-md);
    min-width: 0;
}
.footer-newsletter h4 { font-size: var(--text-md); color: var(--clr-text); }
.footer-newsletter-desc { font-size: var(--text-sm); color: var(--clr-text-muted); margin: 6px 0 var(--space-3); max-width: 420px; }
.footer-newsletter-row { display: flex; gap: 8px; }
.footer-newsletter-row input { flex: 1; min-width: 220px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--clr-border); background: var(--clr-surface-input, var(--clr-surface)); color: var(--clr-text); font-size: 0.9rem; }
.footer-newsletter-note { font-size: var(--text-xs); color: var(--clr-accent); margin-top: 6px; }
@media (max-width: 768px) { .footer-newsletter { grid-column: auto; justify-self: stretch; } }
@media (max-width: 768px) { .footer-newsletter { justify-self: stretch; } }