/* ========================================
   SCAN2GAIN - COMPLETE DESIGN SYSTEM
   ========================================
   Date: 10 janvier 2026
   Purpose: Full visual system - NO FRAMEWORKS
   ======================================== */

/* ========================================
   CSS LAYERS
   ======================================== */

/* Ordre de cascade */
@layer reset, tokens, base, layouts, components, utilities, overrides;

/* ========================================
   CSS RESET
   ======================================== */

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

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}
}

/* ========================================
   DESIGN TOKENS
   ======================================== */

@layer tokens {
:root {
    /* Colors - Light Mode (warm cream palette) */
    --bg-page: #f7f4ed;
    --bg-surface: #fdfcf9;
    --bg-surface-alt: #f0ede5;
    --bg-surface-hover: rgba(28, 28, 28, 0.04);

    --border-subtle: #eceae4;
    --border-strong: rgba(28, 28, 28, 0.4);
    --border-focus: rgba(59, 130, 246, 0.8);

    --text-primary: #1c1c1c;
    --text-secondary: rgba(28, 28, 28, 0.82);
    --text-muted: #5f5f5d;
    --text-inverse: #fcfbf8;

    --action-primary: #1c1c1c;
    --action-primary-text: #fcfbf8;
    --action-primary-hover: rgba(28, 28, 28, 0.85);
    --action-primary-active: rgba(28, 28, 28, 0.75);

    --success: #16a34a;
    --success-bg: #f0fdf4;
    --success-border: #bbf7d0;

    --danger: #dc2626;
    --danger-bg: #fef2f2;
    --danger-border: #fecaca;

    --warning: #d97706;
    --warning-bg: #fffbeb;
    --warning-border: #fde68a;

    /* Shadows */
    --shadow-button: rgba(255,255,255,0.2) 0px 0.5px 0px 0px inset,
                     rgba(0,0,0,0.2) 0px 0px 0px 0.5px inset,
                     rgba(0,0,0,0.05) 0px 1px 2px 0px;
    --shadow-focus: rgba(0,0,0,0.1) 0px 4px 12px;
    --shadow-modal: rgba(0,0,0,0.15) 0px 8px 32px;

    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;

    /* Typography */
    --font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;

    /* Radius */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* Shadows (flat-first — borders define cards) */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 2px 4px -1px rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.04);
    --shadow-lg: 0 8px 16px -4px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.04);
    --shadow-xl: 0 16px 32px -8px rgb(0 0 0 / 0.12), 0 4px 8px -4px rgb(0 0 0 / 0.06);
}

/* ========================================
   DARK MODE - Activé via [data-theme="dark"]
   ======================================== */

[data-theme="dark"] {
    --bg-page: #141210;
    --bg-surface: #1f1c18;
    --bg-surface-alt: #2a261f;
    --bg-surface-hover: rgba(245, 242, 234, 0.05);

    --border-subtle: rgba(245, 242, 234, 0.1);
    --border-strong: rgba(245, 242, 234, 0.3);
    --border-focus: rgba(96, 165, 250, 0.7);

    --text-primary: #f5f2ea;
    --text-secondary: rgba(245, 242, 234, 0.75);
    --text-muted: rgba(245, 242, 234, 0.45);
    --text-inverse: #1c1c1c;

    --action-primary: #f5f2ea;
    --action-primary-text: #1c1c1c;
    --action-primary-hover: rgba(245, 242, 234, 0.9);
    --action-primary-active: rgba(245, 242, 234, 0.8);

    --success: #4ade80;
    --success-bg: rgba(74, 222, 128, 0.1);
    --success-border: rgba(74, 222, 128, 0.3);

    --danger: #f87171;
    --danger-bg: rgba(248, 113, 113, 0.1);
    --danger-border: rgba(248, 113, 113, 0.3);

    --warning: #fbbf24;
    --warning-bg: rgba(251, 191, 36, 0.1);
    --warning-border: rgba(251, 191, 36, 0.3);

    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.4);
    --shadow-md: 0 2px 4px -1px rgb(0 0 0 / 0.5);
    --shadow-lg: 0 8px 16px -4px rgb(0 0 0 / 0.6);
    --shadow-xl: 0 16px 32px -8px rgb(0 0 0 / 0.7);
}

/* Dark-mode automatique si préférence système */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg-page: #141210;
    --bg-surface: #1f1c18;
    --bg-surface-alt: #2a261f;
    --bg-surface-hover: rgba(245, 242, 234, 0.05);

    --border-subtle: rgba(245, 242, 234, 0.1);
    --border-strong: rgba(245, 242, 234, 0.3);
    --border-focus: rgba(96, 165, 250, 0.7);

    --text-primary: #f5f2ea;
    --text-secondary: rgba(245, 242, 234, 0.75);
    --text-muted: rgba(245, 242, 234, 0.45);
    --text-inverse: #1c1c1c;

    --action-primary: #f5f2ea;
    --action-primary-text: #1c1c1c;
    --action-primary-hover: rgba(245, 242, 234, 0.9);
    --action-primary-active: rgba(245, 242, 234, 0.8);

    --success: #4ade80;
    --success-bg: rgba(74, 222, 128, 0.1);
    --success-border: rgba(74, 222, 128, 0.3);

    --danger: #f87171;
    --danger-bg: rgba(248, 113, 113, 0.1);
    --danger-border: rgba(248, 113, 113, 0.3);

    --warning: #fbbf24;
    --warning-bg: rgba(251, 191, 36, 0.1);
    --warning-border: rgba(251, 191, 36, 0.3);

    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.4);
    --shadow-md: 0 2px 4px -1px rgb(0 0 0 / 0.5);
    --shadow-lg: 0 8px 16px -4px rgb(0 0 0 / 0.6);
    --shadow-xl: 0 16px 32px -8px rgb(0 0 0 / 0.7);
  }
}
}

/* ========================================
   BASE STYLES
   ======================================== */

@layer base {
/* Accessibilité - Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* Focus visible pour accessibilité */
:is(a, button, input, textarea, select):focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus), 0 0 0 2px var(--border-focus);
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--text-primary);
    background-color: var(--bg-page);
    min-height: 100vh;
}

a {
    color: var(--text-primary);
    text-decoration: underline;
    transition: color 0.15s ease, opacity 0.15s ease;
}

a:hover {
    opacity: 0.7;
    text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-primary);
}

h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); }
h4 { font-size: var(--font-size-lg); }

p {
    margin-bottom: var(--space-4);
}
}

/* ========================================
   CONTAINER
   ======================================== */

@layer layouts {
.container {
    width: clamp(320px, 90vw, 1200px);
    margin-inline: auto;
    padding-inline: clamp(1rem, 5vw, 3rem);
}
}

/* ========================================
   COMPONENTS LAYER
   ======================================== */

@layer components {

/* ========================================
   ICON SYSTEM
   ======================================== */

/* Base icon — applies to all <svg class="icon"> elements */
.icon {
    display: inline-block;
    flex-shrink: 0;
    vertical-align: middle;
    stroke-width: 1.5;
}

/* Sizes — ONLY these four are allowed */
.icon--xs { width: 14px; height: 14px; }
.icon--sm { width: 16px; height: 16px; }
.icon--md { width: 20px; height: 20px; }
.icon--lg { width: 24px; height: 24px; }

/* Rotation modifier for toggles (chevrons) */
.icon--rotated {
    transform: rotate(180deg);
}

/* Icon + text alignment helper — replaces manual spacing hacks */
.icon-text {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Button icons: always left of text */
.btn .icon,
.campaign-card__btn .icon,
.btn-gdpr .icon {
    margin-right: 6px;
}

/* Table action icons */
.table__actions .icon {
    margin-right: 8px;
    cursor: pointer;
}

/* Navigation link icons */
.admin-nav__link .icon {
    flex-shrink: 0;
}

/* Interaction states */
.icon:hover {
    opacity: 0.8;
}

.btn:hover .icon,
.campaign-card__btn:hover .icon {
    transform: scale(1.05);
}

/* ========================================
   CLASSE UTILITAIRE SURFACE-CARD
   ======================================== */

/* Classe utilitaire surface-card pour réduire répétitions */
.surface-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
}

/* ========================================
   THEME TOGGLE (in navigation)
   ======================================== */

.theme-toggle {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--bg-surface-alt);
    border: 1px solid var(--border-subtle);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    transition: all 0.2s ease;
    color: var(--text-primary);
}

.theme-toggle:hover {
    background: var(--bg-surface-hover);
    border-color: var(--action-primary);
    transform: scale(1.05);
}

.theme-toggle:active {
    transform: scale(0.95);
}

.theme-toggle__icon--light {
    display: none;
}

.theme-toggle__icon--dark {
    display: block;
}

[data-theme="dark"] .theme-toggle__icon--light {
    display: block;
}

[data-theme="dark"] .theme-toggle__icon--dark {
    display: none;
}

/* ========================================
   LANGUAGE TOGGLE (in navigation)
   ======================================== */

.lang-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    background: var(--bg-surface-alt);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
}

.lang-toggle__link {
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    transition: all 0.15s ease;
}

.lang-toggle__link:hover {
    color: var(--action-primary);
    text-decoration: none;
}

.lang-toggle__link--active {
    background: var(--action-primary);
    color: var(--action-primary-text) !important;
}

.lang-toggle__separator {
    color: var(--border-strong);
    font-size: var(--font-size-sm);
}

/* ========================================
   DEPRECATED - OLD STYLES (kept for compatibility)
   ======================================== */

/* Old fixed language switcher - deprecated */
.lang-switcher {
    position: fixed;
    top: var(--space-4);
    right: var(--space-4);
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: var(--space-1);
    background: var(--bg-surface);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-subtle);
}

.lang-switcher__link {
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    transition: all 0.15s ease;
}

.lang-switcher__link:hover {
    color: var(--action-primary);
    text-decoration: none;
}

.lang-switcher__link--active {
    background: var(--action-primary);
    color: var(--text-inverse) !important;
}

.lang-switcher__separator {
    color: var(--border-strong);
    font-size: var(--font-size-sm);
}

/* Old fixed theme switcher - deprecated */
.theme-switcher {
    position: fixed;
    bottom: var(--space-6);
    right: var(--space-6);
    z-index: 1000;
}

.theme-switcher__button {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);
    background: var(--bg-surface);
    border: 2px solid var(--border-strong);
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: all 0.3s ease;
    color: var(--text-primary);
}

.theme-switcher__button:hover {
    transform: scale(1.1) rotate(20deg);
    box-shadow: var(--shadow-xl);
    border-color: var(--action-primary);
}

.theme-switcher__button:active {
    transform: scale(0.95);
}

.theme-switcher__icon--light {
    display: none;
}

.theme-switcher__icon--dark {
    display: block;
}

[data-theme="dark"] .theme-switcher__icon--light {
    display: block;
}

[data-theme="dark"] .theme-switcher__icon--dark {
    display: none;
}

/* ========================================
   ADMIN LAYOUT — SIDEBAR
   ======================================== */

.admin-layout {
    min-height: 100vh;
    display: flex;
    flex-direction: row;
}

/* ========================================
   ADMIN SIDEBAR (replaces top nav)
   ======================================== */

.admin-nav {
    width: 240px;
    flex-shrink: 0;
    background: var(--bg-surface);
    border-right: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    z-index: 100;
}

.admin-nav__brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-5) var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-subtle);
}

.admin-nav__title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.3px;
    text-decoration: none;
}

.admin-nav__links {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4) var(--space-3);
}

.admin-nav__link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-3);
    font-size: var(--font-size-sm);
    font-weight: 400;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
    text-decoration: none;
    position: relative;
}

.admin-nav__link:hover {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
    text-decoration: none;
    opacity: 1;
}

.admin-nav__link--active {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
    font-weight: 500;
}

.admin-nav__link--active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 25%;
    bottom: 25%;
    width: 3px;
    background: var(--text-primary);
    border-radius: 0 2px 2px 0;
}

.admin-nav__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--border-subtle);
    margin-top: auto;
}

.admin-nav__user {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) 0;
}

.admin-nav__email {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    word-break: break-all;
}

.admin-nav__logout {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    font-weight: 400;
    color: var(--danger);
    background: transparent;
    border: 1px solid var(--danger-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
    width: 100%;
}

.admin-nav__logout:hover {
    background: var(--danger-bg);
    text-decoration: none;
    color: var(--danger);
}

/* ========================================
   ADMIN CONTENT
   ======================================== */

.admin-content {
    flex: 1;
    min-width: 0;
    padding: var(--space-8);
    background: var(--bg-page);
    overflow-x: auto;
}

/* Mobile: compact sticky header with collapsible menu */
@media (max-width: 768px) {
    .admin-layout {
        flex-direction: column;
    }

    .admin-nav {
        width: 100%;
        height: auto;
        position: sticky;
        top: 0;
        flex-direction: column;
        border-right: none;
        border-bottom: 1px solid var(--border-subtle);
        z-index: 200;
    }

    .admin-nav__brand {
        padding: var(--space-3) var(--space-4);
    }

    /* Links hidden by default — revealed when menu is open */
    .admin-nav__links {
        display: none;
        flex-direction: column;
        padding: var(--space-2) var(--space-3) var(--space-3);
        gap: var(--space-1);
        border-top: 1px solid var(--border-subtle);
    }

    .admin-nav--mobile-open .admin-nav__links {
        display: flex;
    }

    .admin-nav__link {
        padding: var(--space-2) var(--space-3);
        font-size: var(--font-size-sm);
        white-space: normal;
    }

    .admin-nav__link--active::before {
        display: block;
    }

    /* Actions hidden by default — revealed when menu is open */
    .admin-nav__actions {
        display: none;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        padding: var(--space-3) var(--space-4);
        gap: var(--space-2);
        border-top: 1px solid var(--border-subtle);
    }

    .admin-nav--mobile-open .admin-nav__actions {
        display: flex;
    }

    .admin-nav__email {
        display: none;
    }

    .admin-nav__logout {
        width: auto;
    }

    .admin-content {
        padding: var(--space-4);
    }
}

/* ========================================
   ADMIN DASHBOARD
   ======================================== */

.admin-dashboard {
    max-width: 1400px;
    margin: 0 auto;
}

/* ========================================
   DASHBOARD HEADER
   ======================================== */

.dashboard-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}

.dashboard-header__title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.3;
}

.dashboard-header__subtitle {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    margin: var(--space-1) 0 0;
}

/* ========================================
   STATISTICS GRID
   ======================================== */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-6);
    margin-bottom: var(--space-10);
}

.stat-card {
    background: var(--bg-surface);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    text-align: center;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-subtle);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.stat-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-3);
}

.stat-card__icon .icon {
    width: 32px;
    height: 32px;
}

.stat-card__value {
    font-size: var(--font-size-4xl);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: var(--space-2);
}

.stat-card__label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
}

/* ========================================
   CAMPAIGNS SECTION
   ======================================== */

.campaigns-section {
    background: var(--bg-surface);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-subtle);
}

.campaigns-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
}

.campaigns-section__title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    margin: 0;
}

.campaigns-section__add {
    padding: var(--space-3) var(--space-5);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-inverse);
    background: var(--success);
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.15s ease;
}

.campaigns-section__add:hover {
    background: var(--success-border);
    transform: translateY(-1px);
}

.campaigns-section__archived {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.15s ease;
}

.campaigns-section__archived:hover {
    color: var(--text-primary);
}

/* ========================================
   CAMPAIGNS LIST
   ======================================== */

.campaigns-list {
    display: grid;
    gap: var(--space-4);
}

/* ========================================
   CAMPAIGN CARD
   ======================================== */

.campaign-card {
    background: var(--bg-surface-alt);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    border: 1px solid var(--border-subtle);
    transition: all 0.2s ease;
}

.campaign-card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-sm);
}

.campaign-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.campaign-card__name {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin: 0 0 var(--space-1) 0;
}

.campaign-card__date {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    margin: 0;
}

.campaign-card__status {
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--radius-full);
    white-space: nowrap;
}

.campaign-card__status--active {
    background: var(--success-bg);
    color: var(--success);
    border: 1px solid var(--success-border);
}

.campaign-card__status--inactive {
    background: var(--danger-bg);
    color: var(--danger);
    border: 1px solid var(--danger-border);
}

.campaign-card__stats {
    display: flex;
    gap: var(--space-6);
    margin-bottom: var(--space-4);
    padding: var(--space-4) 0;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
}

.campaign-card__stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.campaign-card__stat-value {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.campaign-card__stat-label {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.campaign-card__actions {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.campaign-card__btn {
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
    font-weight: 500;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.campaign-card__btn:hover {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
    text-decoration: none;
}

.campaign-card__btn--primary {
    background: var(--action-primary);
    color: var(--text-inverse);
    border-color: var(--action-primary);
}

.campaign-card__btn--primary:hover {
    background: var(--action-primary-hover);
    border-color: var(--action-primary-hover);
    color: var(--text-inverse);
}

/* ========================================
   EMPTY STATE
   ======================================== */

.empty-state {
    text-align: center;
    padding: var(--space-12) var(--space-6);
}

.empty-state__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-4);
}

.empty-state__icon .icon {
    width: 48px;
    height: 48px;
    opacity: 0.3;
}

.empty-state__text {
    font-size: var(--font-size-lg);
    color: var(--text-muted);
}

.empty-state__cta {
    margin-top: var(--space-4);
}

/* ========================================
   METRICS PAGE
   ======================================== */

.admin-metrics {
    max-width: 1200px;
    margin: 0 auto;
}

.metrics-back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    margin-bottom: var(--space-6);
    transition: color 0.15s ease;
}

.metrics-back:hover {
    color: var(--text-primary);
}

.metrics-section {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    padding: var(--space-6);
    margin-bottom: var(--space-6);
}

.metrics-section__header {
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
}

.metrics-section__title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.metrics-section__micro {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    margin: var(--space-1) 0 0;
}

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-4);
}

.metric-card {
    background: var(--bg-surface-alt);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    text-align: center;
}

.metric-card__value {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: var(--space-2);
}

.metric-card__label {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.metric-value {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: var(--space-2);
}

.metric-label {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Campaign performance cards (metrics page) */

.metrics-perf-list {
    display: grid;
    gap: var(--space-3);
}

.metrics-perf-card {
    background: var(--bg-surface-alt);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
}

.metrics-perf-card__name {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-3);
}

.metrics-perf-card__stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-6);
}

.metrics-perf-card__stat {
    display: flex;
    flex-direction: column;
}

.metrics-perf-card__stat-value {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.metrics-perf-card__stat-label {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* QR breakdown compact list */

.metrics-qr-list {
    display: grid;
    gap: var(--space-2);
}

.metrics-qr-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-surface-alt);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

.metrics-qr-row__token {
    font-family: ui-monospace, 'Cascadia Code', monospace;
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    background: var(--bg-page);
    padding: 2px var(--space-2);
    border-radius: var(--radius-xs);
    border: 1px solid var(--border-subtle);
    white-space: nowrap;
}

.metrics-qr-row__campaign {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.metrics-qr-row__count {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
}

/* Behavioral signal badges */

.signal-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.signal-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: 0.05em;
}

.signal-badge--active {
    background: var(--success-bg);
    color: var(--success);
    border: 1px solid var(--success-border);
}

.signal-badge--dormant {
    background: var(--warning-bg);
    color: var(--warning);
    border: 1px solid var(--warning-border);
}

.signal-badge--high {
    background: var(--bg-surface-alt);
    color: var(--text-primary);
    border: 1px solid var(--border-strong);
}

.signal-group {
    margin-bottom: var(--space-5);
}

.signal-group:last-child {
    margin-bottom: 0;
}

.signal-group__label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0 0 var(--space-2);
}

/* ========================================
   ADMIN LOGIN
   ======================================== */

.admin-login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    background: var(--bg-page);
}

.admin-login__card {
    width: 100%;
    max-width: 420px;
    background: var(--bg-surface);
    border-radius: var(--radius-xl);
    padding: var(--space-10);
    box-shadow: var(--shadow-xl);
}

.admin-login__title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    text-align: center;
    margin-bottom: var(--space-2);
}

.admin-login__subtitle {
    font-size: var(--font-size-base);
    color: var(--text-muted);
    text-align: center;
    margin-bottom: var(--space-8);
}

.admin-login__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.admin-login__button {
    width: 100%;
    padding: var(--space-4);
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--action-primary-text);
    background: var(--action-primary);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: var(--shadow-button);
}

.admin-login__button:hover {
    opacity: 0.85;
    transform: translateY(-1px);
}

.admin-login__error {
    background-color: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fca5a5;
    border-radius: var(--radius-md, 6px);
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    font-size: 0.875rem;
    margin-bottom: var(--space-4, 1rem);
}

[data-theme="dark"] .admin-login__error {
    background-color: #450a0a;
    color: #fca5a5;
    border-color: #7f1d1d;
}

/* ========================================
   FORMS
   ======================================== */

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.form-label {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-primary);
}

.form-input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
textarea,
select {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-base);
    font-family: inherit;
    color: var(--text-primary);
    background: var(--bg-surface);
    border: 2px solid var(--border-strong);
    border-radius: var(--radius-lg);
    transition: all 0.15s ease;
    outline: none;
}

.form-input:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: var(--text-primary);
    box-shadow: var(--shadow-focus);
}

.form-input::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--text-muted);
}

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

/* ========================================
   BUTTONS
   ======================================== */

.btn,
button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    font-size: var(--font-size-sm);
    font-weight: 500;
    font-family: inherit;
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
}

.btn-primary {
    background: var(--action-primary);
    color: var(--action-primary-text);
    box-shadow: var(--shadow-button);
}

.btn-primary:hover {
    opacity: 0.85;
    transform: translateY(-1px);
    text-decoration: none;
    color: var(--action-primary-text);
}

.btn-secondary {
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border-strong);
}

.btn-secondary:hover {
    background: var(--bg-surface-hover);
}

.btn-danger {
    background: var(--danger);
    color: var(--text-inverse);
}

.btn-danger:hover {
    background: var(--danger-border);
}

.btn-success {
    background: var(--success);
    color: var(--text-inverse);
}

.btn-success:hover {
    background: var(--success-border);
}

/* ========================================
   TABLES
   ======================================== */

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

thead {
    background: var(--bg-surface-alt);
}

th {
    padding: var(--space-4);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-secondary);
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid var(--border-strong);
}

td {
    padding: var(--space-4);
    font-size: var(--font-size-base);
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-subtle);
}

tbody tr {
    transition: background 0.1s ease;
}

tbody tr:hover {
    background: var(--bg-surface-hover);
}

tbody tr:last-child td {
    border-bottom: none;
}

/* ========================================
   CARDS
   ======================================== */

.card {
    background: var(--bg-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-subtle);
    overflow: hidden;
}

.card-header {
    padding: var(--space-5) var(--space-6);
    background: var(--bg-surface-alt);
    border-bottom: 1px solid var(--border-subtle);
}

.card-body {
    padding: var(--space-6);
}

.card-footer {
    padding: var(--space-4) var(--space-6);
    background: var(--bg-surface-alt);
    border-top: 1px solid var(--border-subtle);
}

/* ========================================
   BADGES
   ======================================== */

.badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--radius-full);
}

.badge-success {
    background: var(--success-bg);
    color: var(--success);
    border: 1px solid var(--success-border);
}

.badge-danger {
    background: var(--danger-bg);
    color: var(--danger);
    border: 1px solid var(--danger-border);
}

.badge-warning {
    background: var(--warning-bg);
    color: var(--warning);
    border: 1px solid var(--warning-border);
}

/* ========================================
   ALERTS
   ======================================== */

.alert {
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
    border: 1px solid;
}

.alert-success {
    background: var(--success-bg);
    color: var(--success);
    border-color: var(--success-border);
}

.alert-danger {
    background: var(--danger-bg);
    color: var(--danger);
    border-color: var(--danger-border);
}

.alert-warning {
    background: var(--warning-bg);
    color: var(--warning);
    border-color: var(--warning-border);
}

/* ========================================
   QR CODE LIST PAGE
   ======================================== */

.admin-qr-list {
    max-width: 1400px;
    margin: 0 auto;
}

.qr-list__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-6);
}

.qr-list__title {
    font-size: var(--font-size-2xl);
    font-weight: 600;
    margin: 0;
}

.qr-list__back {
    font-size: var(--font-size-sm);
    color: var(--action-primary);
}

.qr-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-6);
}

.qr-card {
    background: var(--bg-surface);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-subtle);
}

.qr-card__header {
    margin-bottom: var(--space-4);
}

.qr-card__campaign {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin: 0 0 var(--space-1) 0;
}

.qr-card__token {
    font-size: var(--font-size-xs);
    font-family: monospace;
    color: var(--text-muted);
    background: var(--bg-surface-alt);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
}

.qr-card__preview {
    display: flex;
    justify-content: center;
    padding: var(--space-4);
    background: var(--bg-surface-alt);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
}

.qr-card__image {
    width: 150px;
    height: 150px;
    object-fit: contain;
}

.qr-card__actions {
    display: flex;
    gap: var(--space-3);
}

.qr-card__btn {
    flex: 1;
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    font-weight: 500;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
    text-decoration: none;
    border: 1px solid var(--border-strong);
    background: var(--bg-surface);
    color: var(--text-secondary);
}

.qr-card__btn:hover {
    background: var(--bg-surface-hover);
    text-decoration: none;
}

.qr-card__btn--primary {
    background: var(--action-primary);
    color: var(--text-inverse);
    border-color: var(--action-primary);
}

.qr-card__btn--primary:hover {
    background: var(--action-primary-hover);
}

/* ========================================
   CLIENTS LIST PAGE
   ======================================== */

.admin-clients-list {
    max-width: 1400px;
    margin: 0 auto;
}

.clients-list__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-6);
}

.clients-list__title {
    font-size: var(--font-size-2xl);
    font-weight: 600;
    margin: 0;
}

.clients-list__count {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.clients-table-wrapper {
    background: var(--bg-surface);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-subtle);
}

/* ========================================
   CLIENT DETAIL PAGE
   ======================================== */

.admin-client-detail {
    max-width: 1200px;
    margin: 0 auto;
}

.client-detail__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-6);
}

.client-detail__title {
    font-size: var(--font-size-2xl);
    font-weight: 600;
    margin: 0;
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}

.summary-card {
    background: var(--bg-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    text-align: center;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-subtle);
}

.summary-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-2);
}

.summary-card__icon .icon {
    width: 28px;
    height: 28px;
}

.summary-card__value {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: var(--space-1);
}

.summary-card__label {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    text-transform: uppercase;
}

.detail-card {
    background: var(--bg-surface);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-subtle);
    margin-bottom: var(--space-6);
}

.detail-card__title {
    padding: var(--space-4) var(--space-5);
    background: var(--bg-surface-alt);
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin: 0;
    border-bottom: 1px solid var(--border-subtle);
}

.detail-card__content {
    padding: var(--space-5);
}

.detail-row {
    display: flex;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border-subtle);
}

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

.detail-row__label {
    min-width: 180px;
    font-weight: 500;
    color: var(--text-secondary);
}

.detail-row__value {
    color: var(--text-primary);
}

/* Identity Card - Client Detail Page */
.identity-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    margin-bottom: var(--space-6);
    color: var(--text-primary);
}

.identity-card__header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-5) var(--space-3) var(--space-5);
}

.identity-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.9;
}

.identity-card__icon .icon {
    width: 28px;
    height: 28px;
}

.identity-card__title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin: 0;
    opacity: 0.95;
}

.identity-card__content {
    padding: 0 var(--space-5) var(--space-5) var(--space-5);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
}

.identity-field {
    background: var(--bg-surface-alt);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    border: 1px solid var(--border-subtle);
}

.identity-field__label {
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.85;
    font-weight: 500;
}

.identity-field__value {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    line-height: 1.2;
    word-break: break-word;
}

.identity-field__placeholder {
    opacity: 0.5;
    font-weight: 400;
}

@media (max-width: 640px) {
    .identity-card__content {
        grid-template-columns: 1fr;
    }

    .identity-field__value {
        font-size: var(--font-size-xl);
    }
}

/* ========================================
   SCANS LOG PAGE
   ======================================== */

.admin-scans-log {
    max-width: 1400px;
    margin: 0 auto;
}

.scans-log__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-6);
}

.scans-log__title {
    font-size: var(--font-size-2xl);
    font-weight: 600;
    margin: 0;
}

.scans-log__count {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.scans-table-wrapper {
    background: var(--bg-surface);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-subtle);
}

/* ========================================
   CAMPAIGN EDIT PAGE
   ======================================== */

.admin-campaign-edit {
    max-width: 700px;
    margin: 0 auto;
}

.campaign-edit__header {
    margin-bottom: var(--space-6);
}

.campaign-edit__title {
    font-size: var(--font-size-2xl);
    font-weight: 600;
    margin: 0 0 var(--space-2) 0;
}

.campaign-edit__back {
    font-size: var(--font-size-sm);
    color: var(--action-primary);
}

.campaign-edit__card {
    background: var(--bg-surface);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-subtle);
}

.campaign-edit__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.campaign-edit__actions {
    display: flex;
    gap: var(--space-4);
    margin-top: var(--space-4);
}

/* ========================================
   PUBLIC PAGES
   ======================================== */

.public-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
}

.public-card {
    width: 100%;
    max-width: 480px;
    background: var(--bg-surface);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    box-shadow: var(--shadow-xl);
}

.landing-message {
    text-align: center;
}

.landing-message h1 {
    margin-bottom: var(--space-4);
}

.landing-message p {
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
}

/* ========================================
   ACCOUNT PAGE
   ======================================== */

.account {
    max-width: 600px;
    margin: 0 auto;
    padding: var(--space-6);
}

.account__welcome {
    text-align: center;
    padding: var(--space-8);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    color: var(--text-primary);
    margin-bottom: var(--space-6);
}

.account__title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    margin-bottom: var(--space-2);
}

.account__contact {
    opacity: 0.9;
    font-size: var(--font-size-base);
}

/* ========================================
   PROFILE FORM
   ======================================== */

.profile-form {
    max-width: 500px;
    margin: 0 auto;
    padding: var(--space-6);
}

.profile-form__header {
    text-align: center;
    margin-bottom: var(--space-6);
}

.profile-form__title {
    font-size: var(--font-size-2xl);
    font-weight: 600;
    margin-bottom: var(--space-2);
}

.profile-form__subtitle {
    color: var(--text-muted);
}

.profile-form__card {
    background: var(--bg-surface);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    box-shadow: var(--shadow-lg);
}

/* ========================================
   ERROR PAGE
   ======================================== */

.error {
    text-align: center;
    padding: var(--space-12);
}

.error__icon {
    font-size: 5rem;
    margin-bottom: var(--space-4);
}

.error__title {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    margin-bottom: var(--space-3);
}

.error__message {
    font-size: var(--font-size-lg);
    color: var(--text-muted);
    margin-bottom: var(--space-6);
}

.error__button {
    display: inline-block;
    padding: var(--space-4) var(--space-8);
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-inverse);
    background: var(--action-primary);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: all 0.15s ease;
}

.error__button:hover {
    background: var(--action-primary-hover);
    transform: translateY(-2px);
    text-decoration: none;
    color: var(--text-inverse);
}

/* ========================================
   PRIVACY PAGE
   ======================================== */

.privacy-page {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--space-8);
}

.privacy-page__header {
    margin-bottom: var(--space-8);
}

.privacy-page__title {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    margin-bottom: var(--space-2);
}

.privacy-section {
    background: var(--bg-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-bottom: var(--space-4);
    box-shadow: var(--shadow-sm);
}

.privacy-section__title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    margin-bottom: var(--space-4);
}

/* ========================================
   CONTACT INFO (Tables)
   ======================================== */

.contact-info {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.contact-info__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
}

.contact-info__value {
    color: var(--text-primary);
}

.contact-info__missing {
    color: var(--text-muted);
    font-style: italic;
}

/* ========================================
   FOOTER
   ======================================== */

footer {
    background: var(--bg-surface);
    border-top: 1px solid var(--border-subtle);
    padding: var(--space-6);
    text-align: center;
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-muted { color: var(--text-muted); }
.text-primary { color: var(--text-primary); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }

.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }

.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

.d-flex { display: flex; }
.d-block { display: block; }
.d-none { display: none; }

.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }

.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.align-center { align-items: center; }

/* ========================================
   GUIDED CAMPAIGN CREATION
   ======================================== */

.admin-campaign-new {
    max-width: 800px;
    margin: 0 auto;
}

.campaign-new__header {
    margin-bottom: var(--space-8);
}

.campaign-new__title {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.campaign-new__subtitle {
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
}

/* Info Box - Expandable Explainer */
.campaign-new__info-box {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-6);
    overflow: hidden;
}

.info-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
    text-align: left;
    transition: background-color 0.2s;
}

.info-toggle:hover {
    background: var(--bg-surface-hover);
}

.info-toggle__icon {
    font-size: var(--font-size-xl);
}

.info-toggle__text {
    flex: 1;
}

.info-toggle__chevron {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    transition: transform 0.2s;
}

.info-content {
    padding: 0 var(--space-4) var(--space-4) var(--space-4);
    border-top: 1px solid var(--border-subtle);
}

.info-content__text {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-4);
}

.info-content__section {
    margin-top: var(--space-4);
}

.info-content__subtitle {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.info-content__list {
    list-style: none;
    padding: 0;
}

.info-content__list li {
    padding-left: var(--space-6);
    position: relative;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-2);
}

.info-content__list li::before {
    content: "→";
    position: absolute;
    left: var(--space-2);
    color: var(--action-primary);
    font-weight: bold;
}

/* Campaign Form Card */
.campaign-new__card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    box-shadow: var(--shadow-sm);
}

.campaign-new__card-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-6);
}

/* Form Label with Required Indicator */
.form-label--required::after {
    content: " *";
    color: var(--danger);
}

/* Form Warnings */
.form-warnings {
    margin-top: var(--space-2);
}

.form-warning {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--warning-bg);
    border: 1px solid var(--warning-border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-2);
}

.form-warning__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    margin-top: 1px;
}

/* Form Notice */
.form-notice {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    margin-top: var(--space-2);
}

.form-notice--warning {
    background: var(--warning-bg);
    border: 1px solid var(--warning-border);
    color: var(--text-primary);
}

.form-notice__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    margin-top: 1px;
}

.form-notice__text {
    line-height: 1.5;
}

/* Tips Toggle Button */
.tips-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-top: var(--space-2);
    transition: all 0.2s;
}

.tips-toggle:hover {
    background: var(--bg-surface-hover);
    border-color: var(--border-strong);
}

.tips-toggle__chevron {
    transition: transform 0.2s;
    flex-shrink: 0;
}

.info-toggle__chevron {
    transition: transform 0.2s;
    flex-shrink: 0;
}

/* Tips Content */
.tips-content {
    margin-top: var(--space-3);
}

.tips-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

.tip-box {
    padding: var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid;
}

.tip-box--good {
    background: var(--success-bg);
    border-color: var(--success-border);
}

.tip-box--avoid {
    background: var(--warning-bg);
    border-color: var(--warning-border);
}

.tip-box__header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.tip-box__icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.tip-box__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tip-box__list li {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.5;
    padding-left: var(--space-4);
    position: relative;
    margin-bottom: var(--space-2);
}

.tip-box__list li::before {
    content: "•";
    position: absolute;
    left: var(--space-1);
    font-weight: bold;
}

.tip-box--good .tip-box__list li::before {
    color: var(--success);
}

.tip-box--avoid .tip-box__list li::before {
    color: var(--warning);
}

/* Campaign Summary */
.campaign-summary {
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 2px solid var(--border-subtle);
}

.campaign-summary__title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-4);
}

.summary-card {
    background: var(--bg-surface-alt);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}

.summary-card__header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
}

.summary-card__icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.summary-list {
    display: grid;
    gap: var(--space-3);
    margin: 0;
}

.summary-list dt {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-secondary);
}

.summary-list dd {
    margin: 0;
}

.summary-list__value {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-surface);
    border-radius: var(--radius-sm);
    display: inline-block;
}

.summary-list__value--active {
    color: var(--success);
}

.summary-list__value--inactive {
    color: var(--text-muted);
}

/* What Happens Next */
.summary-next {
    margin-top: var(--space-4);
}

.summary-next__title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-3);
}

.summary-next__steps {
    list-style: none;
    counter-reset: step-counter;
    padding: 0;
    margin: 0;
}

.summary-next__steps li {
    counter-increment: step-counter;
    position: relative;
    padding-left: var(--space-8);
    margin-bottom: var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.6;
}

.summary-next__steps li::before {
    content: counter(step-counter);
    position: absolute;
    left: 0;
    top: 0;
    width: 24px;
    height: 24px;
    background: var(--action-primary);
    color: var(--text-inverse);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xs);
    font-weight: bold;
}

/* Campaign Form Actions */
.campaign-form__actions {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-8);
}

/* ========================================
   SKIP LINK (Accessibility)
   ======================================== */

.skip-link {
    position: absolute;
    top: -100%;
    left: var(--space-4);
    z-index: 9999;
    padding: var(--space-2) var(--space-4);
    background: var(--text-primary);
    color: var(--action-primary-text);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: 500;
    text-decoration: none;
    transition: top 0.1s;
}

.skip-link:focus {
    top: var(--space-4);
    text-decoration: none;
    opacity: 1;
}

/* ========================================
   REWARD CARD (Public client flow)
   ======================================== */

.reward-preview {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-6);
    margin-bottom: var(--space-6);
    text-align: center;
}

.reward-preview__label {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-2);
}

.reward-preview__text {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.reward-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-6);
    margin-bottom: var(--space-6);
}

.reward-card__label {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    margin-bottom: var(--space-2);
}

.reward-card__text {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

/* ========================================
   CAMPAIGN CARD — warm action buttons
   ======================================== */

.campaign-card__btn--primary {
    background: var(--action-primary);
    color: var(--action-primary-text);
    border-color: var(--action-primary);
}

.campaign-card__btn--primary:hover {
    opacity: 0.85;
    color: var(--action-primary-text);
}

.campaign-card__btn--danger {
    background: transparent;
    color: var(--danger);
    border-color: var(--danger-border);
}

.campaign-card__btn--danger:hover {
    background: var(--danger-bg);
    color: var(--danger);
    text-decoration: none;
}

/* ========================================
   QR CARD — warm primary button
   ======================================== */

.qr-card__btn--primary {
    background: var(--action-primary);
    color: var(--action-primary-text);
    border-color: var(--action-primary);
}

.qr-card__btn--primary:hover {
    opacity: 0.85;
    color: var(--action-primary-text);
}

/* ========================================
   CAMPAIGNS SECTION — warm add button
   ======================================== */

.campaigns-section__add {
    padding: var(--space-2) var(--space-5);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--action-primary-text);
    background: var(--action-primary);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: var(--shadow-button);
    text-decoration: none;
    display: inline-block;
}

.campaigns-section__add:hover {
    opacity: 0.85;
    text-decoration: none;
    color: var(--action-primary-text);
}

/* ========================================
   INFO CONTENT list arrows — use text-primary
   ======================================== */

.info-content__list li::before {
    color: var(--text-primary);
}

/* ========================================
   SUMMARY NEXT steps counter — use text-primary
   ======================================== */

.summary-next__steps li::before {
    background: var(--action-primary);
    color: var(--action-primary-text);
}

} /* Fin @layer components */

/* Responsive - Campaign Creation */
@media (max-width: 768px) {
    .tips-grid {
        grid-template-columns: 1fr;
    }

    .campaign-form__actions {
        flex-direction: column;
    }

    .campaign-form__actions .btn {
        width: 100%;
    }
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .campaign-card__header {
        flex-direction: column;
        gap: var(--space-2);
    }

    .campaign-card__stats {
        flex-direction: column;
        gap: var(--space-4);
    }

    .campaign-card__actions {
        flex-direction: column;
    }

    .qr-cards {
        grid-template-columns: 1fr;
    }

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

    .detail-row {
        flex-direction: column;
        gap: var(--space-1);
    }

    .detail-row__label {
        min-width: auto;
    }
}

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

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

    .lang-switcher {
        top: var(--space-2);
        right: var(--space-2);
    }

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

    .lang-toggle {
        font-size: var(--font-size-xs);
    }
}

/* ========================================
   UTILITIES - Accessibilité
   ======================================== */

@layer utilities {
/* Classe sr-only pour texte accessible mais visuellement caché */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
}

/* ========================================
   BTN BEM MODIFIER ALIASES
   Templates use .btn--primary (double-dash BEM)
   ======================================== */

.btn--primary {
    background: var(--action-primary);
    color: var(--action-primary-text);
    box-shadow: var(--shadow-button);
}

.btn--primary:hover {
    opacity: 0.85;
    transform: translateY(-1px);
    text-decoration: none;
    color: var(--action-primary-text);
}

.btn--secondary {
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border-strong);
}

.btn--secondary:hover {
    background: var(--bg-surface-hover);
    text-decoration: none;
    color: var(--text-primary);
}

.btn--danger {
    background: var(--danger);
    color: var(--text-inverse);
}

.btn--danger:hover {
    background: var(--danger-border);
    text-decoration: none;
    color: var(--text-inverse);
}

/* ========================================
   INFO ITEM — shared detail card rows
   ======================================== */

.info-item {
    display: flex;
    gap: var(--space-3);
    align-items: baseline;
}

.info-item__label {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    font-weight: 500;
    min-width: 9rem;
    flex-shrink: 0;
}

.info-item__value {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
}

.info-row {
    display: flex;
    gap: var(--space-2);
    align-items: baseline;
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-2);
}

.info-row__label {
    color: var(--text-muted);
    min-width: 6rem;
    flex-shrink: 0;
}

.info-row__value {
    color: var(--text-primary);
}

/* ========================================
   CAMPAIGN DETAIL PAGE
   ======================================== */

.admin-campaign-detail {
    max-width: 900px;
    margin: 0 auto;
}

.campaign-detail__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
}

.campaign-detail__title {
    font-size: var(--font-size-2xl);
    font-weight: 600;
    margin: 0 0 var(--space-2) 0;
}

.campaign-detail__meta {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    margin: 0;
}

.campaign-detail__header-actions {
    display: flex;
    gap: var(--space-3);
    flex-shrink: 0;
    flex-wrap: wrap;
}

.campaign-detail__card {
    background: var(--bg-surface);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-subtle);
    margin-bottom: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.campaign-detail__actions {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-top: var(--space-2);
}

/* ========================================
   CAMPAIGN QR PAGE
   ======================================== */

.admin-campaign-qr {
    max-width: 1200px;
    margin: 0 auto;
}

.campaign-qr__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
}

.campaign-qr__title {
    font-size: var(--font-size-2xl);
    font-weight: 600;
    margin: 0 0 var(--space-2) 0;
}

.campaign-qr__subtitle {
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.campaign-qr__header-actions {
    display: flex;
    gap: var(--space-3);
    flex-shrink: 0;
    flex-wrap: wrap;
}

.campaign-qr__add {
    background: var(--bg-surface);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-subtle);
    margin-bottom: var(--space-6);
}

.campaign-qr__add-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin: 0 0 var(--space-4) 0;
}

.campaign-qr__form-row {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    flex-wrap: wrap;
}

.campaign-qr__support-input {
    flex: 1;
    min-width: 200px;
    max-width: 360px;
}

.qr-card__info {
    margin-bottom: var(--space-4);
}

/* ========================================================
   PUBLIC CLIENT-FACING UI — REDESIGN 2026
   Mobile-first, conversion-optimised, accessible
   ======================================================== */

/* --------------------------------------------------------
   PUBLIC PAGE SHELL
   Full-bleed gradient background behind the scan card
   -------------------------------------------------------- */

.public-shell {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    background: var(--bg-page);
}

.public-shell__topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) clamp(var(--space-4), 5vw, var(--space-8));
    background: transparent;
}

.public-shell__brand {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
}

.public-shell__lang {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-full);
    padding: var(--space-1) var(--space-2);
}

.public-shell__lang-link {
    padding: 3px var(--space-2);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-muted);
    border-radius: var(--radius-full);
    transition: background 0.12s, color 0.12s;
    text-decoration: none;
    letter-spacing: 0.04em;
}

.public-shell__lang-link:hover {
    color: var(--text-primary);
    text-decoration: none;
}

.public-shell__lang-link--active {
    background: var(--action-primary);
    color: var(--action-primary-text) !important;
}

.public-shell__lang-sep {
    color: var(--border-strong);
    font-size: var(--font-size-xs);
    user-select: none;
}

.public-shell__main {
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: var(--space-4) clamp(var(--space-4), 5vw, var(--space-8)) var(--space-10);
}

.public-shell__footer {
    padding: var(--space-4) clamp(var(--space-4), 5vw, var(--space-8));
    text-align: center;
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    border-top: 1px solid var(--border-subtle);
}

.public-shell__footer a {
    color: var(--text-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* --------------------------------------------------------
   SCAN CARD  (the main container for all public flows)
   -------------------------------------------------------- */

.scan-card {
    width: 100%;
    max-width: 440px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
}

/* --------------------------------------------------------
   SCAN CARD — HERO BAND (reward/campaign identity)
   -------------------------------------------------------- */

.scan-hero {
    background: var(--action-primary);
    color: var(--action-primary-text);
    padding: var(--space-8) var(--space-6) var(--space-6);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.scan-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 60% -20%, rgba(255,255,255,0.12) 0%, transparent 60%);
    pointer-events: none;
}

.scan-hero__eyebrow {
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.7;
    margin-bottom: var(--space-2);
}

.scan-hero__title {
    font-size: clamp(var(--font-size-xl), 4vw, var(--font-size-2xl));
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 var(--space-3);
    letter-spacing: -0.3px;
}

.scan-hero__reward {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: var(--radius-full);
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
    font-weight: 500;
    backdrop-filter: blur(4px);
}

.scan-hero__reward-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
}

/* --------------------------------------------------------
   SCAN CARD — BODY (form area)
   -------------------------------------------------------- */

.scan-body {
    padding: var(--space-6);
}

.scan-body__heading {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-5);
    text-align: center;
}

/* --------------------------------------------------------
   CONTACT TABS (email ↔ phone switcher)
   -------------------------------------------------------- */

.contact-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--bg-surface-alt);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
    padding: 3px;
    margin-bottom: var(--space-5);
    gap: 3px;
}

.contact-tab {
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
    font-weight: 500;
    border-radius: var(--radius-md);
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    white-space: nowrap;
}

.contact-tab:hover {
    color: var(--text-primary);
    background: var(--bg-surface-hover);
}

.contact-tab--active {
    background: var(--bg-surface);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
    font-weight: 600;
}

.contact-panel {
    display: none;
}

.contact-panel--active {
    display: block;
    animation: panelIn 0.18s ease;
}

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

/* --------------------------------------------------------
   INPUT WRAPPER with inline icon + validation indicator
   -------------------------------------------------------- */

.input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.input-wrap__icon {
    position: absolute;
    left: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
    z-index: 1;
    display: inline-flex;
    align-items: center;
}

.input-wrap .form-input,
.input-wrap input {
    padding-left: 2.75rem;
    padding-right: 2.5rem;
}

.input-wrap__status {
    position: absolute;
    right: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
    display: inline-flex;
    align-items: center;
}

/* Validation states */
.form-input--valid {
    border-color: var(--success) !important;
    box-shadow: 0 0 0 3px var(--success-bg);
}

.form-input--valid ~ .input-wrap__status,
.input-wrap:has(.form-input--valid) .input-wrap__status {
    opacity: 1;
    color: var(--success);
}

.form-input--error {
    border-color: var(--danger) !important;
    box-shadow: 0 0 0 3px var(--danger-bg);
}

.input-error-msg {
    font-size: var(--font-size-xs);
    color: var(--danger);
    margin-top: var(--space-1);
    min-height: 1.2em;
    transition: all 0.15s;
}

/* --------------------------------------------------------
   LARGE SUBMIT BUTTON (conversion CTA)
   -------------------------------------------------------- */

.btn-cta {
    width: 100%;
    padding: var(--space-4);
    font-size: var(--font-size-base);
    font-weight: 600;
    background: var(--action-primary);
    color: var(--action-primary-text);
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: opacity 0.15s, transform 0.15s;
    box-shadow: var(--shadow-button);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-5);
    letter-spacing: 0.01em;
    position: relative;
    overflow: hidden;
}

.btn-cta:hover:not(:disabled) {
    opacity: 0.88;
    transform: translateY(-1px);
}

.btn-cta:active:not(:disabled) {
    transform: translateY(0);
    opacity: 0.95;
}

.btn-cta:disabled,
.btn-cta--loading {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-cta__spinner {
    display: none;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

.btn-cta--loading .btn-cta__spinner {
    display: block;
}

.btn-cta--loading .btn-cta__label {
    opacity: 0.6;
}

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

/* --------------------------------------------------------
   SMART INPUT — detect hint (email/phone auto-detection)
   -------------------------------------------------------- */

.input-detect-hint {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    min-height: 1.4em;
    line-height: 1.4;
    margin-top: var(--space-1);
    transition: color 0.15s;
}

.input-detect-hint--success {
    color: var(--success);
    display: flex;
    align-items: center;
    gap: 4px;
}

.input-detect-hint--success::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--success);
    flex-shrink: 0;
}

/* --------------------------------------------------------
   OUTCOME ACTIONS (error/success page CTAs)
   -------------------------------------------------------- */

.outcome-actions {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--space-2);
}

/* --------------------------------------------------------
   TRUST / PRIVACY FOOTER inside scan card
   -------------------------------------------------------- */

.scan-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

.scan-trust a {
    color: var(--text-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.scan-trust__icon {
    flex-shrink: 0;
    opacity: 0.6;
    display: inline-flex;
    align-items: center;
}

/* --------------------------------------------------------
   RETURNING USER  —  WELCOME CARD
   -------------------------------------------------------- */

.return-hero {
    background: var(--action-primary);
    color: var(--action-primary-text);
    padding: var(--space-8) var(--space-6) var(--space-6);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.return-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 40% 120%, rgba(255,255,255,0.1) 0%, transparent 55%);
    pointer-events: none;
}

.return-avatar {
    width: 56px;
    height: 56px;
    background: rgba(255,255,255,0.2);
    border: 2px solid rgba(255,255,255,0.4);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-4);
    backdrop-filter: blur(4px);
}

.return-hero__title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    letter-spacing: -0.3px;
    margin: 0 0 var(--space-2);
}

.return-hero__campaign {
    font-size: var(--font-size-sm);
    opacity: 0.75;
    margin: 0;
}

/* Phase 2: scan count shown under badge for returning clients */
.return-hero__scan-count {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-xs);
    opacity: 0.65;
    margin-top: var(--space-2);
}

/* Phase 2: campaign logo (branding) */
.p2-campaign-logo {
    display: block;
    max-height: 48px;
    max-width: 120px;
    width: auto;
    height: auto;
    margin: 0 auto var(--space-3);
    object-fit: contain;
    border-radius: var(--radius-sm);
}

.scan-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: var(--radius-full);
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-xs);
    font-weight: 600;
    margin-top: var(--space-3);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.return-body {
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* --------------------------------------------------------
   SCAN CONVERSION LAYER (single screen, under 10s flow)
   -------------------------------------------------------- */

.scan-convert {
    width: 100%;
    display: flex;
    justify-content: center;
}

.scan-convert__card {
    width: 100%;
    max-width: 440px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
}

.scan-convert__hero {
    background: var(--action-primary);
    color: var(--action-primary-text);
    padding: var(--space-7) var(--space-6);
    text-align: center;
}

.scan-convert__eyebrow {
    margin: 0 0 var(--space-2);
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.75;
}

.scan-convert__title {
    margin: 0;
    font-size: clamp(var(--font-size-xl), 6vw, var(--font-size-3xl));
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.scan-convert__subtitle {
    margin: var(--space-3) 0 0;
    font-size: var(--font-size-sm);
    opacity: 0.9;
}

.scan-convert__meta {
    display: inline-block;
    margin: var(--space-3) 0 0;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.16);
    font-size: var(--font-size-xs);
    font-weight: 600;
}

.scan-convert__body {
    padding: var(--space-6);
}

.scan-field__label {
    display: block;
    margin: 0 0 var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.scan-field__input {
    width: 100%;
    min-height: 52px;
    padding: 0 var(--space-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-base);
    background: var(--bg-surface);
    color: var(--text-primary);
}

.scan-field__input:focus {
    outline: none;
    border-color: var(--action-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

.scan-field__error {
    margin: var(--space-2) 0 0;
    min-height: 1.2em;
    font-size: var(--font-size-xs);
    color: var(--danger);
}

.scan-cta-large {
    width: 100%;
    min-height: 52px;
    margin-top: var(--space-4);
    border: none;
    border-radius: var(--radius-lg);
    background: var(--action-primary);
    color: var(--action-primary-text);
    font-size: var(--font-size-base);
    font-weight: 700;
    letter-spacing: 0.01em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-button);
}

.scan-cta-large:hover {
    opacity: 0.92;
}

.scan-offer-highlight {
    margin: 0 0 var(--space-3);
    padding: var(--space-5);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: linear-gradient(160deg, var(--bg-surface-alt), var(--bg-surface));
}

.scan-offer-highlight__label {
    margin: 0 0 var(--space-2);
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.scan-offer-highlight__value {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
}

.scan-trust-inline {
    margin: var(--space-3) 0 0;
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    text-align: center;
}

.scan-trust-inline a {
    color: inherit;
    margin-left: var(--space-1);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* --------------------------------------------------------
   REWARD PANEL (inside return card and account page)
   -------------------------------------------------------- */

.reward-panel {
    background: var(--bg-surface-alt);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    text-align: center;
}

.reward-panel__eyebrow {
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-bottom: var(--space-2);
}

.reward-panel__text {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
    margin: 0;
}

/* --------------------------------------------------------
   INFO ROW (scan recorded notice)
   -------------------------------------------------------- */

.info-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background: var(--success-bg);
    border: 1px solid var(--success-border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-sm);
    color: var(--success);
}

.info-row__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
}

/* --------------------------------------------------------
   ACCOUNT PAGE  —  DASHBOARD LAYOUT
   -------------------------------------------------------- */

.account-shell {
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.account-header {
    background: var(--action-primary);
    color: var(--action-primary-text);
    border-radius: var(--radius-xl);
    padding: var(--space-7) var(--space-6);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.account-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 70% -30%, rgba(255,255,255,0.1) 0%, transparent 60%);
    pointer-events: none;
}

.account-header__avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    background: rgba(255,255,255,0.2);
    border: 2px solid rgba(255,255,255,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-4);
}

.account-header__contact {
    font-size: var(--font-size-sm);
    opacity: 0.65;
    margin: 0 0 var(--space-2);
    word-break: break-word;
}

.account-header__greeting {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    letter-spacing: -0.3px;
    margin: 0 0 var(--space-3);
}

.account-header__stats {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: var(--radius-full);
    padding: var(--space-1) var(--space-4);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.account-section {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.account-section__header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-surface-alt);
}

.account-section__icon {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.account-section__title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    flex: 1;
}

.account-section__body {
    padding: var(--space-5);
}

/* Exclusive offer code */
.offer-code-block {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background: var(--bg-surface-alt);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-4);
    margin-top: var(--space-3);
}

.offer-code-block__value {
    flex: 1;
    font-size: var(--font-size-lg);
    font-weight: 700;
    letter-spacing: 0.15em;
    font-family: 'SF Mono', 'Fira Code', ui-monospace, monospace;
    color: var(--text-primary);
    word-break: break-all;
}

.offer-copy-btn {
    flex-shrink: 0;
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-xs);
    font-weight: 600;
    background: var(--action-primary);
    color: var(--action-primary-text);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: opacity 0.15s;
    white-space: nowrap;
}

.offer-copy-btn:hover { opacity: 0.85; }
.offer-copy-btn--copied {
    background: var(--success);
    color: white;
    border-color: transparent;
}

/* Profile completion progress */
.profile-progress {
    margin-top: var(--space-4);
}

.profile-progress__bar-track {
    height: 6px;
    background: var(--bg-surface-alt);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-bottom: var(--space-2);
}

.profile-progress__bar-fill {
    height: 100%;
    background: var(--action-primary);
    border-radius: var(--radius-full);
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.profile-progress__label {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

/* GDPR row */
.gdpr-row {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--border-subtle);
}

.btn-gdpr {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
    font-weight: 500;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-strong);
    background: var(--bg-surface);
    color: var(--text-secondary);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s;
}

.btn-gdpr:hover {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
    text-decoration: none;
}

.btn-gdpr--danger {
    color: var(--danger);
    border-color: var(--danger-border);
}

.btn-gdpr--danger:hover {
    background: var(--danger-bg);
    color: var(--danger);
}

/* --------------------------------------------------------
   PROFILE FORM — WIZARD SHELL
   -------------------------------------------------------- */

.profile-wizard {
    width: 100%;
    max-width: 460px;
}

.wizard-header {
    text-align: center;
    margin-bottom: var(--space-6);
}

.wizard-step-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.wizard-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--border-strong);
    transition: background 0.2s, transform 0.2s;
}

.wizard-dot--active {
    background: var(--action-primary);
    transform: scale(1.3);
}

.wizard-dot--done {
    background: var(--success);
}

.wizard-header__title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--space-2);
    letter-spacing: -0.2px;
}

.wizard-header__sub {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}

.wizard-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.wizard-card__body {
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.wizard-card__footer {
    padding: var(--space-4) var(--space-6);
    background: var(--bg-surface-alt);
    border-top: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* Floating label group */
.field-float {
    position: relative;
}

.field-float__input {
    padding-top: var(--space-5);
    padding-bottom: var(--space-2);
}

.field-float__label {
    position: absolute;
    left: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    pointer-events: none;
    transition: all 0.15s;
    transform-origin: left top;
}

.field-float__input:focus ~ .field-float__label,
.field-float__input:not(:placeholder-shown) ~ .field-float__label {
    top: var(--space-2);
    transform: translateY(0) scale(0.8);
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

/* Checkbox row */
.check-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--bg-surface-alt);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: background 0.1s;
}

.check-row:hover {
    background: var(--bg-surface-hover);
}

.check-row__input {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 2px;
    accent-color: var(--action-primary);
    cursor: pointer;
}

.check-row__text {
    flex: 1;
}

.check-row__title {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-primary);
    display: block;
    margin-bottom: var(--space-1);
}

.check-row__hint {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    line-height: 1.4;
}

/* --------------------------------------------------------
   OUTCOME PAGES  (error, success, delete confirm)
   -------------------------------------------------------- */

.outcome-shell {
    width: 100%;
    max-width: 420px;
    text-align: center;
}

.outcome-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: var(--space-10) var(--space-8);
    margin-bottom: var(--space-4);
}

.outcome-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-5);
}

.outcome-card__icon .icon {
    width: 48px;
    height: 48px;
}

.outcome-card__title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--space-3);
    letter-spacing: -0.2px;
}

.outcome-card__message {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 var(--space-6);
}

.outcome-card--error .outcome-card__title,
.outcome-card--warning .outcome-card__title {
    color: var(--warning);
}

.outcome-card--danger .outcome-card__title {
    color: var(--danger);
}

.outcome-card--success .outcome-card__title {
    color: var(--success);
}

/* Destructive confirm zone */
.destruct-zone {
    background: var(--danger-bg);
    border: 1px solid var(--danger-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-bottom: var(--space-5);
    text-align: left;
}

.destruct-zone__warning {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--danger);
    margin-bottom: var(--space-3);
}

.destruct-zone__list {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    padding-left: var(--space-5);
    line-height: 1.7;
    margin: 0;
}

.btn-destruct {
    width: 100%;
    padding: var(--space-4);
    font-size: var(--font-size-base);
    font-weight: 600;
    background: var(--danger);
    color: #fff;
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: opacity 0.15s, transform 0.15s;
}

.btn-destruct:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    font-size: var(--font-size-sm);
    font-weight: 500;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s;
}

.btn-ghost:hover {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
    text-decoration: none;
}

/* --------------------------------------------------------
   PRIVACY PAGE  (minimal, readable)
   -------------------------------------------------------- */

.privacy-shell {
    width: 100%;
    max-width: 640px;
}

.privacy-shell__title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--space-2);
    letter-spacing: -0.3px;
}

.privacy-shell__updated {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    margin: 0 0 var(--space-8);
}

.privacy-content {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    box-shadow: var(--shadow-sm);
}

.privacy-content h2 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin: var(--space-8) 0 var(--space-3);
    color: var(--text-primary);
}

.privacy-content h2:first-child {
    margin-top: 0;
}

.privacy-content p,
.privacy-content li {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    line-height: 1.7;
}

.privacy-content ul {
    padding-left: var(--space-6);
}

/* --------------------------------------------------------
   FORM HINT TEXT
   -------------------------------------------------------- */

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

/* --------------------------------------------------------
   RESPONSIVE  —  Large screens scale up the card
   -------------------------------------------------------- */

@media (min-width: 640px) {
    .scan-card,
    .account-shell,
    .profile-wizard,
    .outcome-shell,
    .privacy-shell {
        margin-top: var(--space-4);
    }

    .public-shell__main {
        align-items: center;
        min-height: calc(100svh - 120px);
        padding-top: var(--space-6);
    }
}

/* --------------------------------------------------------
   SKIP LINK  (accessibility)
   -------------------------------------------------------- */

.skip-link {
    position: absolute;
    top: -100%;
    left: var(--space-4);
    background: var(--action-primary);
    color: var(--action-primary-text);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 600;
    z-index: 9999;
    text-decoration: none;
    transition: top 0s;
}

.skip-link:focus {
    top: var(--space-4);
}

/* --------------------------------------------------------
   FORM ACTIONS ROW
   -------------------------------------------------------- */

.form-actions {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    align-items: center;
}

.form-actions .btn--primary,
.form-actions .btn-cta {
    flex: 1;
}

/* Legacy compatibility for old .btn--primary/.btn--secondary
   used in account.html profile CTA                           */
.btn--primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    font-size: var(--font-size-sm);
    font-weight: 600;
    background: var(--action-primary);
    color: var(--action-primary-text);
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.15s, transform 0.15s;
    box-shadow: var(--shadow-button);
}

.btn--primary:hover {
    opacity: 0.85;
    transform: translateY(-1px);
    color: var(--action-primary-text);
    text-decoration: none;
}

.btn--secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    font-size: var(--font-size-sm);
    font-weight: 500;
    background: var(--bg-surface);
    color: var(--text-secondary);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.btn--secondary:hover {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
    text-decoration: none;
}

/* END OF PUBLIC UI REDESIGN */

/* ========================================
   ADMIN UI ENHANCEMENTS
   ======================================== */

/* --- Filter bar --- */
.qr-list__filter {
    margin-bottom: var(--space-5);
}

.filter-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
}

.filter-form__label {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
}

.filter-form__input {
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
    background: var(--bg-page);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    min-width: 220px;
}

.filter-form__input:focus {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
}

.filter-form__input::placeholder {
    color: var(--text-muted);
}

.filter-form__select {
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
    background: var(--bg-page);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    outline: none;
    cursor: pointer;
    transition: border-color 0.15s;
}

.filter-form__select:focus {
    border-color: var(--border-focus);
}

/* --- Pagination --- */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-6);
    padding: var(--space-4);
}

.pagination__info {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    min-width: 5rem;
    text-align: center;
}

/* --- Campaign badge --- */
.campaign-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--space-3);
    font-size: var(--font-size-xs);
    font-weight: 500;
    background: var(--bg-surface-alt);
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-full);
    white-space: nowrap;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Scan count pill --- */
.scan-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    padding: 2px var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: 600;
    background: var(--bg-surface-alt);
    color: var(--text-primary);
    border-radius: var(--radius-full);
    border: 1px solid var(--border-subtle);
}

/* --- Date/time display in tables --- */
.date-value {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.time-value {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* --- Scan timestamp (scans log) --- */
.scan-timestamp__date {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.scan-timestamp__time {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* --- QR info cell --- */
.qr-info__token {
    display: block;
    font-size: var(--font-size-xs);
    font-family: monospace;
    color: var(--text-secondary);
    background: var(--bg-surface-alt);
    padding: 1px var(--space-2);
    border-radius: var(--radius-xs);
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qr-info__support {
    display: inline-block;
    margin-top: 3px;
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

/* --- Client info cell (scans log) --- */
.client-info {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.client-info__value {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
}

.client-anonymous {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    font-style: italic;
}

/* --- Fingerprint code --- */
.fingerprint-code {
    font-size: var(--font-size-xs);
    font-family: monospace;
    color: var(--text-muted);
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    white-space: nowrap;
    vertical-align: middle;
}

.fingerprint-none {
    color: var(--text-muted);
}

/* --- Token code (client detail) --- */
.token-code {
    font-size: var(--font-size-xs);
    font-family: monospace;
    color: var(--text-secondary);
    background: var(--bg-surface-alt);
    padding: 1px var(--space-2);
    border-radius: var(--radius-xs);
}

/* --- Support tag (client detail scan history) --- */
.support-tag {
    display: inline-flex;
    padding: 1px var(--space-2);
    font-size: var(--font-size-xs);
    background: var(--bg-surface-alt);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xs);
    color: var(--text-secondary);
}

.support-tag--none {
    color: var(--text-muted);
    border-color: transparent;
    background: transparent;
}

/* --- Client name display --- */
.client-name {
    font-weight: 500;
    color: var(--text-primary);
    font-size: var(--font-size-sm);
}

.client-name--missing {
    color: var(--text-muted);
    font-style: italic;
    font-size: var(--font-size-sm);
}

/* --- DOB display --- */
.dob-value {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.dob-missing {
    color: var(--text-muted);
    font-style: italic;
    font-size: var(--font-size-sm);
}

/* --- Campaign clients section (campaign_detail) --- */
.campaign-clients-section {
    margin-top: var(--space-8);
}

.campaign-clients__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
}

.campaign-clients__title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    margin: 0;
}

.campaign-clients__count {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.campaign-clients-table-wrapper {
    background: var(--bg-surface);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-subtle);
}

/* Inline search in campaign clients header */
.campaign-clients__search {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* --- Dashboard campaign link-to-clients button --- */
.campaign-card__clients-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    background: var(--bg-surface);
}

.campaign-card__clients-link:hover {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
    text-decoration: none;
}

/* --- Clients count in campaign card --- */
.campaign-card__stat-value--clients {
    color: var(--text-primary);
}

/* --- Table sort header --- */
th[data-sort] {
    cursor: pointer;
    user-select: none;
}

th[data-sort]:hover {
    background: var(--bg-surface-hover);
}

th[data-sort]::after {
    content: ' ↕';
    opacity: 0.4;
    font-size: 0.75em;
}

th[data-sort="asc"]::after {
    content: ' ↑';
    opacity: 0.8;
}

th[data-sort="desc"]::after {
    content: ' ↓';
    opacity: 0.8;
}

/* --- Responsive admin tables --- */
@media (max-width: 768px) {
    .filter-form {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-form__input,
    .filter-form__select {
        width: 100%;
        min-width: unset;
    }

    th, td {
        padding: var(--space-3);
        font-size: var(--font-size-sm);
    }

    .campaign-clients__header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }

    .clients-list__header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }
}

/* --- Inline JS-driven table search box --- */
.table-search-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.table-search-wrapper .table-search-icon {
    position: absolute;
    left: var(--space-3);
    pointer-events: none;
    color: var(--text-muted);
}

.table-search-input {
    padding: var(--space-2) var(--space-4) var(--space-2) calc(var(--space-3) + 18px);
    font-size: var(--font-size-sm);
    background: var(--bg-page);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    width: 220px;
}

.table-search-input:focus {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
}

.table-no-results {
    text-align: center;
    padding: var(--space-8);
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    display: none;
}

/* END OF ADMIN UI ENHANCEMENTS */

/* ═══════════════════════════════════════════════════════════════
   CAMPAIGN ASSISTANT — Components
   ═══════════════════════════════════════════════════════════════ */

/* Score colour tokens */
:root {
    --score-green:  #2ecc71;
    --score-blue:   #3498db;
    --score-orange: #f39c12;
    --score-red:    #e74c3c;
}

/* ── Assistant page layout ────────────────────────────────────── */
.assistant-page {
    max-width: 640px;
    margin: 0 auto;
    padding: var(--space-4);
}
.assistant-page__header { margin-bottom: var(--space-4); }
.assistant-page__title  { font-size: 1.4rem; margin: var(--space-2) 0 var(--space-1); }
.assistant-page__subtitle { color: var(--text-secondary); font-size: var(--font-size-sm); }
.assistant-back-link {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: var(--font-size-sm);
}
.assistant-back-link:hover { color: var(--action-primary); }

/* ── Insights bar ─────────────────────────────────────────────── */
.assistant-insights-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}
.insight-chip {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-full);
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}
.insight-chip--warn { border-color: var(--warning); color: var(--warning); }

/* ── Wizard shell ─────────────────────────────────────────────── */
.assistant-wizard {
    background: var(--bg-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-6);
    position: relative;
}
.assistant-step-container { min-height: 260px; }

/* ── Step progress dots ───────────────────────────────────────── */
.step-dots {
    display: flex;
    justify-content: center;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
}
.dot {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
    background: var(--border-subtle);
    transition: background 0.2s;
}
.dot.active { background: var(--action-primary); transform: scale(1.25); }
.dot.done   { background: var(--success); }

/* ── Step common ──────────────────────────────────────────────── */
.step-title    { font-size: 1.2rem; margin: 0 0 var(--space-1); }
.step-subtitle { color: var(--text-secondary); font-size: var(--font-size-sm); margin-bottom: var(--space-4); }
.step-actions  { display: flex; gap: var(--space-3); justify-content: flex-end; margin-top: var(--space-4); }
.step-actions--spaced { justify-content: center; }
.step-actions--column { flex-direction: column; align-items: stretch; gap: var(--space-2); }
.step-footer-note { margin-top: var(--space-4); text-align: center; }

/* ── Goal buttons ─────────────────────────────────────────────── */
.step-goal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}
@media (max-width: 480px) { .step-goal-grid { grid-template-columns: 1fr; } }
.goal-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-4) var(--space-3);
    background: var(--bg-page);
    border: 2px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    text-align: center;
    color: var(--text-primary);
}
.goal-btn:hover,
.goal-btn:focus-visible {
    border-color: var(--action-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--action-primary) 20%, transparent);
    background: color-mix(in srgb, var(--action-primary) 5%, var(--bg-page));
    outline: none;
}
.goal-btn__icon  { font-size: 1.8rem; }
.goal-btn__label { font-weight: 600; font-size: 0.95rem; }
.goal-btn__desc  { font-size: var(--font-size-xs); color: var(--text-secondary); }

/* ── Suggestion cards ─────────────────────────────────────────── */
.suggestion-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.suggestion-card {
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    background: var(--bg-page);
    transition: border-color 0.15s;
}
.suggestion-card:hover { border-color: var(--action-primary); }
.suggestion-card.selected { border-color: var(--success); background: color-mix(in srgb, var(--success) 5%, var(--bg-page)); }
.suggestion-card__header { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.suggestion-card__name   { font-weight: 600; }
.suggestion-card__reward { color: var(--text-secondary); margin: 0 0 var(--space-2); font-size: var(--font-size-sm); }
.suggestion-card__rationale { color: var(--text-tertiary, var(--text-secondary)); font-size: var(--font-size-xs); display: block; margin-bottom: var(--space-3); }
.suggestion-loading { color: var(--text-secondary); font-size: var(--font-size-sm); padding: var(--space-4) 0; text-align: center; }

/* ── Score badge ──────────────────────────────────────────────── */
.score-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: #fff;
    background: var(--score-blue);
    white-space: nowrap;
}
.score-badge.score--green  { background: var(--score-green); }
.score-badge.score--blue   { background: var(--score-blue); }
.score-badge.score--orange { background: var(--score-orange); }
.score-badge.score--red    { background: var(--score-red); }

/* ── Score gauge ──────────────────────────────────────────────── */
.score-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: var(--space-5);
}
.score-gauge {
    --score-pct: 0%;
    --score-colour: var(--score-blue);
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: conic-gradient(var(--score-colour) var(--score-pct), var(--border-subtle) 0%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: var(--space-2);
}
.score-gauge::before {
    content: '';
    position: absolute;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: var(--bg-surface);
}
.gauge-label {
    font-size: 1.8rem;
    font-weight: 700;
    position: relative;
    z-index: 1;
    color: var(--text-primary);
}
.score-label-text { font-size: var(--font-size-sm); color: var(--text-secondary); }

/* ── Factor bars ──────────────────────────────────────────────── */
.factor-list { margin-bottom: var(--space-4); }
.factor-row  { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.factor-label { width: 90px; font-size: var(--font-size-sm); flex-shrink: 0; color: var(--text-secondary); }
.factor-bar   { flex: 1; height: 8px; background: var(--border-subtle); border-radius: var(--radius-full); overflow: hidden; }
.factor-fill  { height: 100%; border-radius: var(--radius-full); transition: width 0.4s ease; }
.factor-value { width: 36px; text-align: right; font-size: var(--font-size-xs); color: var(--text-secondary); }

/* ── Score tips ───────────────────────────────────────────────── */
.score-tips-list { margin-bottom: var(--space-4); }
.tip-item {
    font-size: var(--font-size-sm);
    padding: var(--space-2) var(--space-3);
    background: color-mix(in srgb, var(--warning) 10%, var(--bg-surface));
    border-left: 3px solid var(--warning);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    margin-bottom: var(--space-2);
    color: var(--text-primary);
}

/* ── Message cards (tone selection) ──────────────────────────── */
.message-grid { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-4); }
.message-card {
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    background: var(--bg-page);
    transition: border-color 0.15s;
}
.message-card:hover { border-color: var(--action-primary); }
.message-card__header { margin-bottom: var(--space-2); }
.message-card__text { font-style: italic; color: var(--text-secondary); font-size: var(--font-size-sm); margin: 0 0 var(--space-3); }

/* ── Preview phone frame ──────────────────────────────────────── */
.preview-card-wrapper { display: flex; justify-content: center; margin-bottom: var(--space-5); }
.preview-phone-frame {
    border: 3px solid var(--border-subtle);
    border-radius: 24px;
    padding: var(--space-5) var(--space-4);
    max-width: 280px;
    width: 100%;
    background: var(--bg-page);
    box-shadow: var(--shadow-md);
}
.preview-scan-card { text-align: center; }
.preview-avatar { font-size: 2.5rem; margin-bottom: var(--space-3); }
.preview-scan-card__name {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 var(--space-2);
    padding: 2px 4px;
    border-radius: var(--radius-sm);
    min-height: 1.4em;
}
.preview-scan-card__name:focus,
.preview-scan-card__reward:focus {
    outline: 2px dashed var(--action-primary);
    background: color-mix(in srgb, var(--action-primary) 5%, transparent);
}
.preview-scan-card__reward {
    font-size: 0.95rem;
    color: var(--text-secondary);
    padding: 2px 4px;
    border-radius: var(--radius-sm);
    min-height: 1.2em;
}
.preview-progress-bar {
    height: 6px;
    background: var(--border-subtle);
    border-radius: var(--radius-full);
    margin: var(--space-3) 0 var(--space-1);
    overflow: hidden;
}
.preview-progress-fill { height: 100%; background: var(--action-primary); border-radius: var(--radius-full); }
.preview-progress-label { font-size: var(--font-size-xs); color: var(--text-secondary); }
.selected-offer-chip {
    background: color-mix(in srgb, var(--success) 10%, var(--bg-surface));
    border: 1px solid var(--success);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-4);
    font-size: var(--font-size-sm);
}

/* ── Autopilot overlay ────────────────────────────────────────── */
.autopilot-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    animation: fadeIn 0.2s ease;
}
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
.autopilot-card {
    background: var(--bg-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    max-width: 480px;
    width: 100%;
    box-shadow: var(--shadow-lg, 0 20px 40px rgba(0,0,0,0.2));
    animation: slideUp 0.25s ease;
}
@keyframes slideUp { from { transform: translateY(20px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }
.autopilot-card__header { font-size: 1.1rem; margin-bottom: var(--space-4); }
.autopilot-table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-4); }
.autopilot-table td { padding: var(--space-2); border-bottom: 1px solid var(--border-subtle); font-size: var(--font-size-sm); }
.autopilot-table td:first-child { color: var(--text-secondary); width: 80px; }
.autopilot-tips { margin-bottom: var(--space-4); }
.autopilot-card__actions { display: flex; gap: var(--space-3); justify-content: flex-end; }

/* ── Spinner ─────────────────────────────────────────────────── */
.step-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

/* Explicitly enforce hidden state for wizard pieces even if global styles interfere. */
.wizard-step-pane[hidden],
.step-spinner[hidden] {
    display: none !important;
}

.spinner {
    width: 18px; height: 18px;
    border: 2px solid var(--border-subtle);
    border-top-color: var(--action-primary);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg) } }

/* ── Toast notifications ─────────────────────────────────────── */
.assistant-toast {
    position: fixed;
    bottom: var(--space-6);
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-surface);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-5);
    box-shadow: var(--shadow-md);
    font-size: var(--font-size-sm);
    z-index: 2000;
    animation: fadeIn 0.2s ease;
}
.assistant-toast--error  { border-left: 3px solid var(--danger); }
.assistant-toast--info   { border-left: 3px solid var(--action-primary); }
.assistant-toast--success{ border-left: 3px solid var(--success); }

/* ── Assistant entry card (on campaign_new.html) ─────────────── */
.assistant-entry-card {
    background: linear-gradient(135deg, color-mix(in srgb, var(--action-primary) 8%, var(--bg-surface)), var(--bg-surface));
    border: 1.5px solid color-mix(in srgb, var(--action-primary) 30%, var(--border-subtle));
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-3);
}
.assistant-entry-card__body {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}
.assistant-entry-card__icon { font-size: 2rem; flex-shrink: 0; }
.assistant-entry-card__copy { flex: 1; min-width: 0; }
.assistant-entry-card__copy strong { font-size: 1rem; }
.assistant-entry-card__copy p {
    margin: var(--space-1) 0 0;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}
.campaign-new__separator {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-1);
}
.campaign-new__separator::before,
.campaign-new__separator::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-subtle);
}
.campaign-new__classic-link {
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
}

/* ── Button size variants ─────────────────────────────────────── */
.btn--sm  { font-size: var(--font-size-xs); padding: var(--space-1) var(--space-3); }
.btn--lg  { font-size: 1rem; padding: var(--space-3) var(--space-5); }

/* ── Dark mode adjustments ─────────────────────────────────────── */
[data-theme="dark"] .assistant-wizard { background: var(--bg-surface); }
[data-theme="dark"] .goal-btn         { background: var(--bg-page); }
[data-theme="dark"] .suggestion-card  { background: var(--bg-page); }
[data-theme="dark"] .preview-phone-frame { background: var(--bg-page); }
[data-theme="dark"] .autopilot-card   { background: var(--bg-surface); }

/* END OF CAMPAIGN ASSISTANT STYLES */

/* ================================================================
   ONBOARDING REDESIGN — new components (scan2gain onboarding v2)
   ================================================================ */

/* ── Outer shell ────────────────────────────────────────────────── */
.onboarding-shell {
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ── Brand anchor (logo + campaign name) ───────────────────────── */
.onboarding-brand {
    text-align: center;
    padding: var(--space-5) var(--space-4) var(--space-3);
}

.onboarding-brand__logo {
    max-height: 48px;
    width: auto;
    display: block;
    margin: 0 auto var(--space-2);
    object-fit: contain;
}

.onboarding-brand__name {
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0;
}

/* ── Reward card — brand-colour highlight ──────────────────────── */
.reward-card--highlight {
    background: var(--campaign-brand, var(--action-primary));
    color: #fff;
    border-radius: var(--radius-xl);
    padding: var(--space-6) var(--space-5);
    text-align: center;
    margin: 0 var(--space-4) var(--space-4);
    box-shadow: 0 4px 24px rgba(0, 0, 0, .14);
}

.reward-card--highlight .reward-card__label {
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: .8;
    margin: 0 0 var(--space-2);
    color: inherit;
}

.reward-card--highlight .reward-card__value {
    font-size: clamp(var(--font-size-lg), 5vw, var(--font-size-2xl));
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    color: inherit;
}

/* ── Stats row (2-col grid for points + visits) ────────────────── */
.stats-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
    margin: 0 var(--space-4) var(--space-4);
}

.stats-row__cell {
    background: var(--bg-surface-alt, var(--bg-surface));
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    text-align: center;
}

.stats-row__value {
    display: block;
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--campaign-brand, var(--action-primary));
    line-height: 1;
    margin-bottom: var(--space-1);
}

.stats-row__label {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    font-weight: 500;
}

/* ── Milestone progress section ────────────────────────────────── */
.milestone-section {
    margin: 0 var(--space-4) var(--space-4);
}

.milestone-bar {
    height: 10px;
    background: var(--bg-tertiary, var(--border-subtle));
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: var(--space-2);
}

.milestone-bar__fill {
    height: 100%;
    background: var(--success, #28a745);
    border-radius: 999px;
    transition: width .6s ease-out;
    min-width: 4px; /* always show a sliver of progress */
}

.milestone-label {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin: 0;
    text-align: center;
}

/* ── Urgency notice (campaign ending soon) ─────────────────────── */
.scan-urgency {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin: 0 var(--space-4) var(--space-3);
    padding: var(--space-2) var(--space-4);
    background: var(--warning-bg, #fff3cd);
    border: 1px solid var(--warning-border, #ffc107);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--warning-dark, #856404);
}

/* ── Escape hatch ("Not you?") ─────────────────────────────────── */
.escape-hatch {
    text-align: center;
    padding: var(--space-4) var(--space-4) var(--space-2);
}

.escape-hatch__link {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: text-decoration-color .2s, color .2s;
}

.escape-hatch__link:hover {
    color: var(--text-secondary);
    text-decoration-color: currentColor;
}

/* ── CTA success state ─────────────────────────────────────────── */
.btn-cta--success {
    background: var(--success, #28a745) !important;
    cursor: default;
}

/* ── Onboarding form wrapper (inside the scan card) ────────────── */
.onboarding-form-wrap {
    padding: 0 var(--space-4) var(--space-4);
}

/* ── Returning user CTA wrapper ────────────────────────────────── */
.onboarding-cta-wrap {
    padding: 0 var(--space-4) var(--space-4);
}

/* ── Points delta badge ("+5 pts today") ───────────────────────── */
.points-delta-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    background: var(--success-bg, #d4edda);
    border: 1px solid var(--success-border, #28a745);
    border-radius: var(--radius-full);
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--success-dark, #155724);
    margin: 0 var(--space-4) var(--space-3);
    align-self: center;
}

/* END OF ONBOARDING REDESIGN STYLES */

/* ================================================================
   REWARD HERO — new dominant hero block (replaces reward-card--highlight
   on scan pages). Phase 1 UX redesign.
   ================================================================ */

@keyframes hero-enter {
    from { opacity: 0; transform: translateY(14px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

@keyframes points-pop {
    from { transform: scale(0.7); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

@keyframes status-slide-in {
    from { opacity: 0; transform: translateX(-6px); }
    to   { opacity: 1; transform: translateX(0); }
}

.reward-hero {
    background: linear-gradient(160deg, #1e1b4b 0%, #312e81 55%, #4338ca 100%);
    color: #fff;
    border-radius: 24px;
    padding: var(--space-8) var(--space-6);
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(30, 27, 75, .45);
    margin: 0 var(--space-4) var(--space-4);
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: no-preference) {
    .reward-hero {
        animation: hero-enter 0.45s cubic-bezier(0.34, 1.2, 0.64, 1) both;
    }
}

/* Soft radial highlight for depth */
.reward-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 60% 0%, rgba(255,255,255,0.12) 0%, transparent 65%);
    pointer-events: none;
}

/* Campaign brand-color override — gradient using brand as anchor */
.reward-hero--branded {
    background: linear-gradient(
        160deg,
        color-mix(in srgb, var(--campaign-brand, #4f46e5) 40%, #000) 0%,
        var(--campaign-brand, #4f46e5) 100%
    );
    box-shadow: 0 12px 40px color-mix(in srgb, var(--campaign-brand, #4f46e5) 45%, transparent);
}

/* Win-back / long-absence variant: warm amber tone */
.reward-hero--winback {
    background: linear-gradient(160deg, #431407 0%, #7c2d12 50%, #b45309 100%);
    box-shadow: 0 12px 40px rgba(124, 45, 18, .45);
}

/* Near-miss variant — amber urgency gradient */
.reward-hero--near-miss {
    background: linear-gradient(160deg, #78350f 0%, #b45309 50%, #d97706 100%);
    box-shadow: 0 12px 40px rgba(180, 83, 9, .45);
}

/* Celebration / reward-unlocked variant: gold shimmer */
@keyframes shimmer {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
}

.reward-hero--celebration {
    background: linear-gradient(135deg, #78350f 0%, #b45309 50%, #78350f 100%);
    background-size: 200% auto;
    box-shadow: 0 8px 32px rgba(180, 83, 9, .40);
}

@media (prefers-reduced-motion: no-preference) {
    .reward-hero--celebration {
        animation: shimmer 2.5s linear infinite, hero-enter .35s ease both;
    }
}

.reward-hero--celebration .reward-hero__value {
    color: #fef3c7;
}

.reward-hero__eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.75;
    margin-bottom: var(--space-3);
}

.reward-hero__value {
    font-size: clamp(2rem, 10vw, 3.25rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-3);
    color: inherit;
}

.reward-hero__claim-prompt {
    font-size: var(--font-size-xs);
    opacity: 0.65;
    margin: var(--space-2) 0 0;
}

/* Points delta — dominant large number, not a badge */
.reward-hero__points-delta {
    display: block;
    font-size: clamp(2.5rem, 11vw, 3.5rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    color: #fff;
    margin-top: var(--space-5);
}

/* Points total balance — secondary sub-line */
.reward-hero__points-balance {
    display: block;
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, .60);
    margin-top: var(--space-1);
    font-weight: 500;
}

@media (prefers-reduced-motion: no-preference) {
    .reward-hero__points-delta {
        animation: points-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both 0.2s;
    }
}

/* Urgency inside hero */
.reward-hero__urgency {
    font-size: var(--font-size-xs);
    opacity: 0.7;
    margin-top: var(--space-2);
}

/* Action engine message — lifecycle-aware behavioral nudge */
.reward-hero__action-msg {
    font-size: clamp(1rem, 4.5vw, 1.25rem);
    font-weight: 600;
    color: rgba(255, 255, 255, .92);
    margin: var(--space-2) 0 0;
    line-height: 1.4;
}

.reward-hero__action-msg--secondary {
    opacity: 0.60;
    font-size: var(--font-size-xs);
}

.reward-hero__identity-cta {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    font-style: italic;
    text-align: center;
    margin-top: var(--space-2);
}

/* Per-lifecycle-state accent rules */
.reward-hero__action-msg--at_risk {
    font-size: clamp(1.05rem, 5vw, 1.3rem);
    color: #fef3c7;
    font-weight: 700;
    letter-spacing: .01em;
}
.reward-hero__action-msg--loyal {
    color: #fde68a;
    font-weight: 700;
}
.reward-hero__action-msg--new {
    color: #bae6fd;
    font-weight: 600;
}
.reward-hero__action-msg--lost {
    color: rgba(255,255,255,.70);
    font-style: italic;
}

/* Named next-reward anchor — forward pull inside hero */
.reward-hero__next-unlock {
    font-size: var(--font-size-xs);
    color: rgba(255, 255, 255, .70);
    margin: var(--space-3) 0 0;
    letter-spacing: .01em;
}

.reward-hero__next-unlock strong {
    color: #fff;
    font-weight: 700;
}

/* Streak illusion — sequence creates loss aversion */
.reward-hero__streak {
    font-size: var(--font-size-xs);
    color: rgba(255, 255, 255, .75);
    margin-top: var(--space-3);
    letter-spacing: .01em;
}

/* Claim instruction — real-world physical bridge (celebration state only) */
.reward-hero__claim {
    display: inline-block;
    background: rgba(255, 255, 255, .15);
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin-top: var(--space-4);
    color: #fef3c7;
}

/* Memory hook — explicit recall anchor (survive screen exit) */
.reward-hero__memory-hook {
    font-size: var(--font-size-xs);
    color: rgba(255, 255, 255, .60);
    margin-top: var(--space-2);
    font-style: italic;
    letter-spacing: .01em;
}

/* Loss hook — open-loop framing against forgetting */
.reward-hero__loss-hook {
    font-size: var(--font-size-xs);
    color: rgba(255, 255, 255, .70);
    margin-top: var(--space-3);
    font-weight: 600;
}

/* ================================================================
   COMMITMENT HOOK — below the hero card, outside the dark surface.
   Turns algorithmic prediction into a social agreement ("see you
   in 3 days?"). Soft text, not part of the card.
   ================================================================ */
.reward-hero__commitment {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    text-align: center;
    padding: var(--space-3) var(--space-4) 0;
    font-style: italic;
}

/* ── I3: Per-state commitment hook accents ────────────────────────────────── */
.reward-hero__commitment--on_time {
    font-style: normal;
    font-weight: 600;
    border-left: 3px solid #93c5fd;
    text-align: left;
    margin: var(--space-3) var(--space-4) 0;
    padding: var(--space-2) var(--space-3);
    color: #bfdbfe;
}

.reward-hero__commitment--too_early {
    font-style: normal;
    font-weight: 600;
    border-left: 3px solid #86efac;
    text-align: left;
    margin: var(--space-3) var(--space-4) 0;
    padding: var(--space-2) var(--space-3);
    color: #bbf7d0;
}

.reward-hero__commitment--late {
    font-style: normal;
    border-left: 3px solid #fcd34d;
    text-align: left;
    margin: var(--space-3) var(--space-4) 0;
    padding: var(--space-2) var(--space-3);
    color: #fde68a;
}

.reward-hero__commitment--at_risk {
    font-style: italic;
    color: var(--text-muted);
    padding: var(--space-2) var(--space-4) 0;
}

/* ── I2: Streak identity badge ───────────────────────────────────────────── */
@keyframes streak-slide-in {
    from { transform: translateY(-8px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.reward-hero__streak-badge {
    display: inline-block;
    align-self: center;
    margin: var(--space-2) auto var(--space-1);
    padding: 4px 14px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: var(--radius-full);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.90);
    text-align: center;
}

@media (prefers-reduced-motion: no-preference) {
    .reward-hero__streak-badge {
        animation: streak-slide-in 0.35s 0.15s ease-out both;
    }
}

/* Ownership line — sunk cost + effort justification */
.reward-hero__ownership {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    text-align: center;
    padding: var(--space-2) var(--space-4) 0;
}

/* ── G1: Goal label — named next-reward anchor ───────────────────────────── */
.reward-hero__goal-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    text-align: center;
    margin: 0 0 var(--space-1);
    padding: 0 var(--space-4);
}

/* ── G3: Comeback block — win-back specific urgency ─────────────────────── */
.reward-hero__comeback-block {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    margin: var(--space-4) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.reward-hero__comeback-points {
    font-size: clamp(0.95rem, 4vw, 1.05rem);
    font-weight: 700;
    color: #fde68a;
    margin: 0;
    text-align: center;
}

.reward-hero__comeback-goal {
    font-size: clamp(0.875rem, 3.5vw, 1rem);
    font-weight: 500;
    color: rgba(255,255,255,0.88);
    margin: 0;
    text-align: center;
}

.reward-hero__comeback-goal strong {
    color: #fff;
    font-weight: 700;
}

/* ================================================================
   REWARD TICKET — designed screenshot artifact (celebration state).
   Replaces weak "screenshot this" text with a structured claim card.
   ================================================================ */

@keyframes ticket-in {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: no-preference) {
    .reward-ticket {
        animation: ticket-in 0.5s 0.55s ease-out both;
    }
}

.reward-ticket {
    background: var(--bg-surface);
    border: 2px dashed #b45309;
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-6);
    text-align: center;
    margin: 0 var(--space-4) var(--space-3);
}

.reward-ticket__label {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--space-2);
}

.reward-ticket__instruction {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: 0 0 var(--space-2);
}

.reward-ticket__hint {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    margin: 0;
}

/* Celebration CTA variant — amber accent to match ticket border */
.btn-cta--celebration {
    background: #b45309;
    color: #fff;
}

.btn-cta--celebration:hover {
    background: #92400e;
}

/* Escape hatch row: inline with eyebrow on returning view */
.reward-hero__escape {
    position: absolute;
    top: var(--space-3);
    right: var(--space-4);
}

.reward-hero__escape-btn {
    background: none;
    border: none;
    color: inherit;
    opacity: 0.55;
    font-size: var(--font-size-xs);
    cursor: pointer;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: opacity 0.15s, text-decoration-color 0.15s;
    font-family: inherit;
}

.reward-hero__escape-btn:hover {
    opacity: 0.9;
    text-decoration-color: currentColor;
}

/* ================================================================
   PROGRESS STRIP — consolidated milestone + stats + status badge.
   Replaces .milestone-section + .stats-row on scan and account pages.
   ================================================================ */

.progress-strip {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin: 0 var(--space-4) var(--space-4);
}

.progress-strip__bar {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--bg-surface-alt);
    border: none;
    display: block;
    margin-bottom: var(--space-3);
    overflow: hidden;
}

.progress-strip__bar::-webkit-progress-bar {
    background: var(--bg-surface-alt);
    border-radius: var(--radius-full);
}

.progress-strip__bar::-webkit-progress-value {
    background: var(--campaign-brand, var(--action-primary));
    border-radius: var(--radius-full);
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-strip__bar::-moz-progress-bar {
    background: var(--campaign-brand, var(--action-primary));
    border-radius: var(--radius-full);
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Amber fill when near completion (≥80%) — urgency, not relief */
.progress-strip__bar[data-near]::-webkit-progress-value { background: #d97706; }
.progress-strip__bar[data-near]::-moz-progress-bar      { background: #d97706; }

.progress-strip__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.progress-strip__goal {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    flex: 1;
}

.progress-strip__goal strong {
    color: var(--text-primary);
}

/* Near-miss escalation — louder copy at ≥80% */
.progress-strip__goal[data-near-goal] {
    font-weight: 700;
    color: #92400e;
    font-size: var(--font-size-base);
}

.progress-strip__goal[data-near-goal] strong {
    color: #78350f;
}

.progress-strip__counts {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    white-space: nowrap;
}

/* Status badge (lifecycle-state driven) */
.progress-strip__status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-xs);
    font-weight: 600;
    padding: 2px var(--space-3);
    border-radius: var(--radius-full);
    margin-top: var(--space-3);
    width: fit-content;
}

@media (prefers-reduced-motion: no-preference) {
    .progress-strip__status {
        animation: status-slide-in 0.3s ease both 0.5s;
    }
}

.progress-strip__status--NEW    { background: var(--success-bg);  color: var(--success); }
.progress-strip__status--ACTIVE { background: var(--bg-surface-alt); color: var(--text-secondary); border: 1px solid var(--border-subtle); }
.progress-strip__status--LOYAL  { background: #fef3c7; color: #92400e; }
.progress-strip__status--AT_RISK{ background: var(--warning-bg); color: var(--warning); }
.progress-strip__status--LOST   { display: none; }

/* ================================================================
   HISTORY DRAWER — collapsible scan history (account page)
   ================================================================ */

.history-drawer {
    margin: 0 0 var(--space-4);
}

.history-drawer__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    font-family: inherit;
    text-align: left;
}

.history-drawer__toggle:hover {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
}

.history-drawer__toggle .icon {
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.history-drawer__toggle[aria-expanded="true"] .icon {
    transform: rotate(180deg);
}

.history-drawer__content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
    overflow: hidden;
}

.history-drawer__content[aria-hidden="false"] {
    grid-template-rows: 1fr;
}

.history-drawer__inner {
    min-height: 0;
    padding: 0 var(--space-5) var(--space-4);
    border: 1px solid var(--border-subtle);
    border-top: none;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* ========================================
   SMART BANNER (dashboard priority alert)
   ======================================== */

.smart-banner {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .75rem 1rem;
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-6);
    font-size: var(--font-size-sm);
    font-weight: 500;
    line-height: 1.4;
}
.smart-banner--warn    { background: #fef3c7; color: #92400e; border-left: 3px solid #f59e0b; }
.smart-banner--success { background: #d1fae5; color: #065f46; border-left: 3px solid #10b981; }
.smart-banner--info    { background: #dbeafe; color: #1e40af; border-left: 3px solid #3b82f6; }
.smart-banner__icon    { flex-shrink: 0; }
.smart-banner__msg     { flex: 1; }

/* ========================================
   AUDIENCE SEGMENTS SECTION
   ======================================== */

.audience-section {
    background: var(--bg-surface);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-subtle);
    margin-bottom: var(--space-8);
}

.audience-section__title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    margin: 0 0 var(--space-4) 0;
}

/* Segment grid */
.segment-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}
@media (max-width: 600px) {
    .segment-grid { grid-template-columns: repeat(2, 1fr); }
}

.segment-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    text-align: center;
    border-top: 3px solid var(--border-subtle);
    transition: box-shadow 0.15s ease;
}
.segment-card:hover { box-shadow: var(--shadow-sm); }

.segment-card--new      { border-top-color: #3b82f6; }
.segment-card--active   { border-top-color: #10b981; }
.segment-card--loyal    { border-top-color: #f59e0b; }
.segment-card--inactive { border-top-color: #9ca3af; }

.segment-card__count {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    color: var(--text-primary);
    margin-bottom: .2rem;
}
.segment-card--inactive .segment-card__count { color: var(--text-muted); }

.segment-card__label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.segment-card__desc {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    margin-top: .15rem;
}

/* KPI strip */
.kpi-strip {
    display: flex;
    gap: var(--space-6);
    margin: var(--space-3) 0;
    padding: var(--space-2) var(--space-4);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}
.kpi-strip__item { display: flex; align-items: baseline; gap: var(--space-2); }
.kpi-strip__label {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    font-weight: 500;
}
.kpi-strip__value {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--text-primary);
}
.kpi-strip__value--good { color: #16a34a; }
.kpi-strip__value--warn { color: #d97706; }

/* Insight recommendation list */
.insight-list {
    list-style: none;
    margin: var(--space-2) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.insight-list .insight-chip {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: #eff6ff;
    border-left: 3px solid #3b82f6;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: var(--font-size-sm);
    color: #1e40af;
    line-height: 1.4;
}
[data-theme="dark"] .insight-list .insight-chip {
    background: rgba(59,130,246,.12);
    color: #93c5fd;
    border-left-color: #60a5fa;
}
.insight-list .insight-chip__icon {
    flex-shrink: 0;
    font-weight: 700;
    margin-top: .05rem;
}

/* Smart campaign badges */
.smart-badge {
    display: inline-block;
    padding: .15rem .55rem;
    border-radius: var(--radius-full);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .01em;
    white-space: nowrap;
}
.smart-badge--warn    { background: #fef3c7; color: #92400e; }
.smart-badge--success { background: #d1fae5; color: #065f46; }
.smart-badge--neutral { background: #f3f4f6; color: #374151; }
.smart-badge--active  { background: #dbeafe; color: #1e40af; }

/* Smart tips */
.smart-tip {
    font-size: var(--font-size-sm);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    margin: var(--space-1) 0 var(--space-2);
    line-height: 1.4;
}
.smart-tip--warn    { background: #fff7ed; color: #9a3412; border-left: 2px solid #f97316; }
.smart-tip--success { background: #f0fdf4; color: #166534; border-left: 2px solid #22c55e; }
.smart-tip--neutral { background: #f9fafb; color: #374151; border-left: 2px solid #d1d5db; }
.smart-tip--active  { background: #eff6ff; color: #1e40af; border-left: 2px solid #60a5fa; }

/* Campaign card state */
.campaign-card--warn    { border-color: #f59e0b !important; }
.campaign-card--success { border-color: #10b981 !important; }
.campaign-card__btn--warn { background: #f59e0b !important; color: #fff !important; }
.campaign-card__btn--warn:hover { background: #d97706 !important; }

/* Stat card context line */
.stat-card__context {
    font-size: var(--font-size-xs);
    font-weight: 500;
    margin-top: var(--space-1);
}
.stat-card__context--up    { color: #16a34a; }
.stat-card__context--warn  { color: #d97706; }
.stat-card__context--muted { color: var(--text-muted); }


/* ============================================================
   ANALYTICS REDESIGN  — insight-first dashboard
   ============================================================ */

/* Page wrapper */
.admin-analytics {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

/* ── Page header ──────────────────────────────────────────── */
.an-header {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    margin-bottom: var(--space-1);
}
.an-header__title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
}
.an-header__period {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    background: var(--bg-surface-alt);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-full);
    padding: 2px var(--space-3);
}

/* ── KPI Bar ──────────────────────────────────────────────── */
.an-kpi-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
}
@media (max-width: 700px) { .an-kpi-bar { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 380px) { .an-kpi-bar { grid-template-columns: 1fr; } }

.an-kpi {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
/* Support both __val (old) and __value (new) class names */
.an-kpi__value, .an-kpi__val {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    line-height: 1.1;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.an-kpi__label, .an-kpi__lbl {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
}
.an-kpi__delta              { font-size: var(--font-size-xs); font-weight: 600; margin-top: 2px; }
.an-kpi__delta--up          { color: var(--success); }
.an-kpi__delta--down        { color: var(--danger); }
.an-kpi__delta--neutral     { color: var(--text-muted); }

/* ── Main Insight Block ───────────────────────────────────── */
.an-main-insight {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--warning);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.an-main-insight__title {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.4;
}
.an-main-insight__sub {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    line-height: 1.5;
}
.an-progress {
    height: 6px;
    background: var(--border-subtle);
    border-radius: var(--radius-full);
    overflow: hidden;
    max-width: 360px;
    margin-top: var(--space-1);
}
.an-progress__bar {
    height: 100%;
    background: var(--warning);
    border-radius: var(--radius-full);
    transition: width 0.6s ease;
    min-width: 4px;
}

/* ── 2 × 2 Chart Grid ────────────────────────────────────── */
.an-chart-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}
@media (max-width: 620px) { .an-chart-grid { grid-template-columns: 1fr; } }

.an-chart-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}
.an-chart-card__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}
.an-chart-card__title {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-secondary);
}
.an-chart-card__hint {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}
/* Height-locked container — Chart.js reads the wrapper, not the canvas */
.an-chart-wrap {
    position: relative;
    height: 180px;
    width: 100%;
}

/* ── Actionable Insights Panel ────────────────────────────── */
.an-insights-panel {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
}
.an-insights-panel__title {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}
.an-insights-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.an-insight {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.5;
    border-left: 3px solid transparent;
}
.an-insight--success {
    background: var(--success-bg);
    border-left-color: var(--success);
}
.an-insight--warn {
    background: var(--warning-bg);
    border-left-color: var(--warning);
}
.an-insight--info {
    background: #eff6ff;
    border-left-color: #3b82f6;
}
[data-theme="dark"] .an-insight--info { background: rgba(59,130,246,0.1); }

/* ── Campaign Performance Table ──────────────────────────── */
.an-table-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
}
.an-table-card__title {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--space-4) 0;
}
.an-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.an-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}
.an-table thead th {
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
    white-space: nowrap;
    text-align: left;
}
.an-table tbody tr:hover { background: var(--bg-surface-hover); }
.an-table tbody td {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    vertical-align: middle;
}
.an-table tbody tr:last-child td { border-bottom: none; }
.an-table__name {
    font-weight: 500;
    color: var(--text-primary) !important;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.an-table__num {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.an-table__num--good { color: var(--success) !important; font-weight: 600; }
.an-table__num--warn { color: var(--warning) !important; font-weight: 600; }
.an-table__bar       { width: 80px; padding-left: var(--space-3) !important; }
.an-table__bar-fill  { height: 4px; background: var(--text-primary); opacity: 0.2;
                       border-radius: var(--radius-full); min-width: 2px; }

/* ── Marketing Assistant Analytics ───────────────────────── */
.an-header__subtitle {
    margin: var(--space-1) 0 0;
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}

.an-hero {
    display: grid;
    grid-template-columns: minmax(280px, 340px) 1fr;
    gap: var(--space-4);
    align-items: stretch;
}
@media (max-width: 820px) {
    .an-hero { grid-template-columns: 1fr; }
}

.an-business-score {
    background:
        radial-gradient(circle at top right, rgba(217, 119, 6, 0.18), transparent 38%),
        linear-gradient(135deg, #fffdf8 0%, #fff7ed 100%);
    border: 1px solid rgba(217, 119, 6, 0.24);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: 180px;
}
.an-business-score__eyebrow {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    font-weight: 700;
}
.an-business-score__value-row {
    display: flex;
    align-items: flex-end;
    gap: var(--space-3);
}
.an-business-score__value {
    font-size: clamp(2.6rem, 4vw, 4.2rem);
    line-height: 0.92;
    font-weight: 800;
    color: var(--text-primary);
}
.an-business-score__label {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: #b45309;
    padding-bottom: 0.35rem;
}
.an-business-score__meta {
    margin: 0;
    font-size: var(--font-size-sm);
    line-height: 1.5;
    color: var(--text-secondary);
}
.an-business-score--leading {
    border-color: rgba(16, 185, 129, 0.30);
    background:
        radial-gradient(circle at top right, rgba(16, 185, 129, 0.18), transparent 38%),
        linear-gradient(135deg, #f7fffb 0%, #ecfdf5 100%);
}
.an-business-score--leading .an-business-score__label { color: #059669; }
.an-business-score--fragile {
    border-color: rgba(245, 158, 11, 0.30);
}
.an-business-score--critical {
    border-color: rgba(239, 68, 68, 0.30);
    background:
        radial-gradient(circle at top right, rgba(239, 68, 68, 0.16), transparent 38%),
        linear-gradient(135deg, #fff8f8 0%, #fff1f2 100%);
}
.an-business-score--critical .an-business-score__label { color: #dc2626; }

.an-main-insight__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    width: fit-content;
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--warning);
    font-weight: 700;
}
.an-main-insight__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.an-main-insight__text {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.6;
}
.an-main-insight__delta {
    color: var(--success);
    font-weight: 700;
}
.an-main-insight__bar-wrap {
    width: 100%;
    height: 8px;
    background: var(--border-subtle);
    border-radius: var(--radius-full);
    overflow: hidden;
}
.an-main-insight__bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #d97706 0%, #f59e0b 100%);
    border-radius: inherit;
}

.an-charts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}
@media (max-width: 760px) {
    .an-charts { grid-template-columns: 1fr; }
}

.an-insights {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
}
.an-insights__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-4);
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--text-primary);
}
.an-insights__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-3);
}
.an-insight-item {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
}
.an-insight-item__dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: currentColor;
    margin-top: 0.35rem;
    flex: 0 0 auto;
}
.an-insight-item__text {
    color: var(--text-secondary);
    line-height: 1.5;
}
.an-insight-item--success {
    background: var(--success-bg);
    color: var(--success);
}
.an-insight-item--warn {
    background: var(--warning-bg);
    color: var(--warning);
}
.an-insight-item--info {
    background: rgba(59, 130, 246, 0.10);
    color: #2563eb;
}

.an-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}
.an-section-head__title {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--text-primary);
}
.an-section-head__meta {
    min-width: 2rem;
    height: 2rem;
    padding: 0 var(--space-2);
    border-radius: 999px;
    background: var(--bg-surface-alt);
    border: 1px solid var(--border-subtle);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    font-weight: 700;
}

.an-campaigns {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.an-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}
@media (max-width: 920px) {
    .an-card-grid { grid-template-columns: 1fr; }
}

.campaign-card-advanced {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    box-shadow: 0 10px 30px rgba(17, 24, 39, 0.05);
}
.campaign-card-advanced--winner {
    border-color: rgba(16, 185, 129, 0.28);
    box-shadow: 0 14px 32px rgba(16, 185, 129, 0.08);
}
.campaign-card-advanced--promising {
    border-color: rgba(59, 130, 246, 0.24);
}
.campaign-card-advanced--weak {
    border-color: rgba(245, 158, 11, 0.28);
}
.campaign-card-advanced--failing {
    border-color: rgba(239, 68, 68, 0.28);
}

.campaign-card-advanced__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
}
.campaign-card-advanced__title {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--text-primary);
}
.campaign-card-advanced__status {
    margin: var(--space-1) 0 0;
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.campaign-score {
    min-width: 5.75rem;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-lg);
    color: #fff;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.campaign-score strong {
    font-size: var(--font-size-xl);
    line-height: 1;
}
.campaign-score--winner { background: linear-gradient(135deg, #059669 0%, #10b981 100%); }
.campaign-score--promising { background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%); }
.campaign-score--weak { background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%); }
.campaign-score--failing { background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%); }

.campaign-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.campaign-metrics span {
    padding: 0.45rem 0.65rem;
    border-radius: 999px;
    background: var(--bg-surface-alt);
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    font-weight: 600;
}
.campaign-metrics__up { color: var(--success) !important; }
.campaign-metrics__down { color: var(--danger) !important; }

.an-prediction {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(37, 99, 235, 0.03) 100%);
    border: 1px solid rgba(59, 130, 246, 0.12);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}
.an-prediction strong {
    color: var(--text-primary);
}
.an-prediction__up {
    color: var(--success);
    font-weight: 700;
}
.an-prediction__down {
    color: var(--danger);
    font-weight: 700;
}

.campaign-risks,
.campaign-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.campaign-risks__item,
.campaign-actions__item {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    line-height: 1.45;
}
.campaign-risks__item {
    background: rgba(245, 158, 11, 0.10);
    color: #b45309;
    border-left: 3px solid rgba(217, 119, 6, 0.45);
}
.campaign-actions__item {
    background: rgba(16, 185, 129, 0.09);
    color: #047857;
    border-left: 3px solid rgba(16, 185, 129, 0.35);
}

[data-theme="dark"] .an-business-score {
    background:
        radial-gradient(circle at top right, rgba(217, 119, 6, 0.16), transparent 38%),
        linear-gradient(135deg, rgba(120, 53, 15, 0.18) 0%, rgba(17, 24, 39, 0.98) 100%);
}
[data-theme="dark"] .an-business-score--leading {
    background:
        radial-gradient(circle at top right, rgba(16, 185, 129, 0.14), transparent 38%),
        linear-gradient(135deg, rgba(6, 95, 70, 0.20) 0%, rgba(17, 24, 39, 0.98) 100%);
}
[data-theme="dark"] .an-business-score--critical {
    background:
        radial-gradient(circle at top right, rgba(239, 68, 68, 0.14), transparent 38%),
        linear-gradient(135deg, rgba(127, 29, 29, 0.18) 0%, rgba(17, 24, 39, 0.98) 100%);
}


/* ============================================================
   ERROR PAGE  — standalone 4xx / 5xx screen
   ============================================================ */
.error-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-page, #f7f4ed);
    padding: var(--space-6);
}

.error-card {
    background: var(--bg-surface, #fdfcf9);
    border: 1px solid var(--border-subtle, #eceae4);
    border-radius: var(--radius-xl, 12px);
    padding: 3rem 2.5rem;
    text-align: center;
    max-width: 440px;
    width: 100%;
}

.error-card__code {
    font-size: 5rem;
    font-weight: 800;
    line-height: 1;
    color: var(--text-primary, #1c1c1c);
    margin-bottom: var(--space-4);
    letter-spacing: -0.04em;
}

.error-card__message {
    font-size: var(--font-size-base, 1rem);
    color: var(--text-secondary, #3d3d3b);
    margin: 0 0 var(--space-8);
    line-height: 1.6;
}

.error-card__actions {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    flex-wrap: wrap;
}

/* ================================================================
   OFFER CARD — dynamic personalised offer from scoring engine
   Rendered inside public/scan.html (returning and new user paths)
   ================================================================ */

@media (prefers-reduced-motion: no-preference) {
    .offer-card {
        animation: hero-enter 0.45s cubic-bezier(0.34, 1.2, 0.64, 1) both 0.15s;
    }
}

.offer-card {
    background: var(--bg-surface);
    color: var(--text-primary);
    border-radius: var(--radius-xl);
    border-top: 3px solid var(--action-primary);
    padding: var(--space-6) var(--space-6) var(--space-5);
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .10);
    margin: 0 var(--space-4) var(--space-4);
}

/* Subtle top-right radial highlight for depth */
.offer-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 70% 0%, rgba(0,0,0,0.04) 0%, transparent 60%);
    pointer-events: none;
}

/* ── Sub-elements ─────────────────────────────────────────────── */

.offer-card__greeting {
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: var(--space-4);
}

.offer-card__value {
    font-size: clamp(var(--font-size-xl), 6vw, var(--font-size-3xl));
    font-weight: 700;
    line-height: 1.1;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.offer-card__value-suffix {
    font-size: 0.55em;
    font-weight: 700;
    letter-spacing: 0.05em;
    opacity: 0.75;
}

.offer-card__label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
}

.offer-card__reason {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
}

.offer-card__urgency {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: #92400e;
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: var(--radius-full);
    padding: var(--space-1) var(--space-3);
    margin-bottom: var(--space-3);
}

[data-theme="dark"] .offer-card__urgency {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.12);
    border-color: rgba(251, 191, 36, 0.28);
}

.offer-card__form {
    margin-top: var(--space-5);
}

.offer-card__cta {
    margin-top: 0; /* form wrapper handles spacing */
}

.offer-card__error {
    font-size: var(--font-size-xs);
    color: var(--danger, #dc2626);
    margin-top: var(--space-2);
    margin-bottom: 0;
}

.offer-card__register-nudge {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    margin-top: var(--space-5);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-surface-alt);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
}

/* ── Type variants ────────────────────────────────────────────── */

/* Urgency: warm amber card — high pressure */
.offer-card--urgency {
    background: var(--action-primary);
    color: var(--action-primary-text);
    border-top-color: transparent;
    box-shadow: 0 6px 28px rgba(0, 0, 0, .18);
}

.offer-card--urgency::before {
    background: radial-gradient(ellipse at 60% 0%, rgba(255,255,255,0.12) 0%, transparent 65%);
}

.offer-card--urgency .offer-card__greeting,
.offer-card--urgency .offer-card__label,
.offer-card--urgency .offer-card__reason {
    color: var(--action-primary-text);
    opacity: 0.80;
}

.offer-card--urgency .offer-card__value {
    color: var(--action-primary-text);
}

.offer-card--urgency .offer-card__register-nudge {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.20);
    color: var(--action-primary-text);
}

/* Surprise: subtle shimmer gradient — delight, not urgency */
@keyframes offer-shimmer {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
}

.offer-card--surprise {
    background: linear-gradient(135deg, #78350f 0%, #b45309 50%, #78350f 100%);
    background-size: 200% auto;
    color: #fef3c7;
    border-top-color: transparent;
    box-shadow: 0 8px 32px rgba(180, 83, 9, .28);
}

@media (prefers-reduced-motion: no-preference) {
    .offer-card--surprise {
        animation: offer-shimmer 3s linear infinite, hero-enter .45s cubic-bezier(0.34, 1.2, 0.64, 1) both 0.15s;
    }
}

.offer-card--surprise .offer-card__greeting,
.offer-card--surprise .offer-card__label,
.offer-card--surprise .offer-card__reason {
    color: #fef3c7;
    opacity: 0.85;
}

.offer-card--surprise .offer-card__value {
    color: #fef3c7;
}

/* Dark-mode overrides — surface card flips to elevated dark bg */
[data-theme="dark"] .offer-card {
    background: var(--bg-surface);
    border-top-color: var(--action-primary);
    box-shadow: 0 4px 20px rgba(0, 0, 0, .35);
}

[data-theme="dark"] .offer-card--urgency,
[data-theme="dark"] .offer-card--surprise {
    border-top-color: transparent;
}

/* ================================================================
   BEHAVIORAL UX REDESIGN — new components
   Added 2026-05-01: AT_RISK hero variant, visit timeline,
   identity block, CSS confetti, near-miss pulse.
   ================================================================ */

/* AT_RISK hero variant — warm amber, softer than winback dark-brown */
.reward-hero--at-risk {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    box-shadow: 0 6px 28px rgba(180, 83, 9, .30);
}

/* ================================================================
   CSS CONFETTI — celebration state, no JS.
   12 <span class="confetti-piece confetti-piece--N"> children inside
   .confetti-burst, generated by Jinja2 loop inside reward_hero.html.
   ================================================================ */
.confetti-burst {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    border-radius: inherit;
}

@keyframes confetti-fall {
    0%   { transform: translateY(-20px) rotate(0deg);   opacity: 1; }
    80%  { opacity: 1; }
    100% { transform: translateY(120px) rotate(720deg); opacity: 0; }
}

.confetti-piece {
    position: absolute;
    top: -8px;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
    .confetti-piece { animation: confetti-fall 1.4s ease-in forwards; }
}

.confetti-piece--1  { left: 8%;  background:#fbbf24; animation-delay:.05s; transform-origin:center; }
.confetti-piece--2  { left:18%;  background:#34d399; animation-delay:.15s; width:6px; height:10px; }
.confetti-piece--3  { left:28%;  background:#f87171; animation-delay:.08s; border-radius:50%; }
.confetti-piece--4  { left:38%;  background:#60a5fa; animation-delay:.22s; }
.confetti-piece--5  { left:48%;  background:#fbbf24; animation-delay:.0s;  width:10px; height:6px; }
.confetti-piece--6  { left:58%;  background:#a78bfa; animation-delay:.18s; border-radius:50%; }
.confetti-piece--7  { left:68%;  background:#34d399; animation-delay:.10s; }
.confetti-piece--8  { left:78%;  background:#f87171; animation-delay:.28s; width:6px; height:10px; }
.confetti-piece--9  { left:88%;  background:#60a5fa; animation-delay:.05s; }
.confetti-piece--10 { left:23%;  background:#fbbf24; animation-delay:.35s; border-radius:50%; }
.confetti-piece--11 { left:53%;  background:#f87171; animation-delay:.42s; width:10px; height:6px; }
.confetti-piece--12 { left:73%;  background:#a78bfa; animation-delay:.30s; }

/* ================================================================
   NEAR-MISS PULSE — progress bar accent pulse when >= 80%
   Triggered by [data-near] attribute on .progress-strip__bar
   ================================================================ */
@keyframes near-miss-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .65; }
}

@media (prefers-reduced-motion: no-preference) {
    .progress-strip__bar[data-near]::-webkit-progress-value {
        animation: near-miss-pulse 1.2s ease-in-out infinite;
    }
}

/* ================================================================
   VISIT TIMELINE — emotional visit history on account page.
   Replaces the history drawer with a compact vertical list.
   ================================================================ */
.visit-timeline {
    list-style: none;
    padding: 0;
    margin: 0;
}

.visit-timeline__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    position: relative;
}

.visit-timeline__item + .visit-timeline__item {
    border-top: 1px solid var(--border-subtle);
}

.visit-timeline__dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
    border: 2px solid var(--bg-surface-alt);
}

.visit-timeline__item--latest .visit-timeline__dot {
    background: var(--campaign-brand, var(--action-primary));
    border-color: var(--campaign-brand, var(--action-primary));
    width: 10px;
    height: 10px;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--campaign-brand, var(--action-primary)) 20%, transparent);
}

.visit-timeline__label {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    white-space: nowrap;
    min-width: 6rem;
}

.visit-timeline__item--latest .visit-timeline__label {
    color: var(--text-primary);
    font-weight: 600;
}

.visit-timeline__campaign {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.visit-timeline__item--latest .visit-timeline__campaign {
    color: var(--text-primary);
}

/* ================================================================
   IDENTITY BLOCK — member tenure + tier + return trigger.
   Below the fold on account page. Quiet, not promotional.
   ================================================================ */
.identity-block {
    padding: var(--space-4) var(--space-5) var(--space-2);
    border-top: 1px solid var(--border-subtle);
    margin: 0 var(--space-4) var(--space-2);
}

.identity-block__line {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    margin: 0 0 var(--space-2);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.identity-block__line strong {
    color: var(--text-secondary);
}

.identity-block__prediction {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: var(--space-3) 0 0;
    font-style: italic;
}

/* ================================================================
   HERO HEADER ROW — name (left) + visit chip (right)
   Shows inside the gradient hero on returning-user scans.
   ================================================================ */
.reward-hero__header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-5);
}

.reward-hero__greeting-name {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: rgba(255,255,255,.80);
}

.reward-hero__visit-chip {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.20);
    border-radius: var(--radius-full);
    padding: 3px 10px;
    color: rgba(255,255,255,.85);
    white-space: nowrap;
}

/* Near-miss variant: chip turns amber for extra urgency */
.reward-hero--near-miss .reward-hero__visit-chip {
    background: rgba(255,255,255,.20);
    border-color: #fde68a;
    color: #fde68a;
}

/* ================================================================
   PROGRESS CARD NEAR-MISS RING
   Wraps .progress-strip when milestone progress >= 80%.
   ================================================================ */
.progress-strip.is-near-miss {
    box-shadow: 0 0 0 2px #d97706, 0 4px 24px rgba(217,119,6,.20);
    border-color: #d97706;
}

.progress-strip.is-near-miss .progress-strip__goal {
    color: #b45309;
    font-weight: 700;
}

/* ================================================================
   STATUS HERO CARD — account page loyalty card.
   Replaces flat header + reward_hero component on /account.
   Feels like Apple Wallet / Revolut card.
   ================================================================ */
.status-hero-card {
    background: linear-gradient(160deg, #1e1b4b 0%, #312e81 55%, #4338ca 100%);
    color: #fff;
    border-radius: 24px;
    padding: var(--space-8) var(--space-6) var(--space-7);
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(30, 27, 75, .40);
    margin: var(--space-4) var(--space-4) var(--space-4);
}

/* Campaign brand-color override (same pattern as reward-hero) */
.status-hero-card--branded {
    background: linear-gradient(
        160deg,
        color-mix(in srgb, var(--campaign-brand, #4f46e5) 40%, #000) 0%,
        var(--campaign-brand, #4f46e5) 100%
    );
    box-shadow: 0 12px 40px color-mix(in srgb, var(--campaign-brand, #4f46e5) 40%, transparent);
}

/* Soft radial highlight for depth */
.status-hero-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 70% -10%, rgba(255,255,255,.15) 0%, transparent 60%);
    pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
    .status-hero-card { animation: hero-enter 0.4s cubic-bezier(0.34, 1.2, 0.64, 1) both; }
}

.status-hero-card__brand-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
}

.status-hero-card__logo {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    object-fit: contain;
    background: rgba(255,255,255,.15);
}

.status-hero-card__campaign-name {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,.70);
}

.status-hero-card__greeting {
    font-size: clamp(1.5rem, 7vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin-bottom: var(--space-2);
    color: #fff;
}

.status-hero-card__sub {
    font-size: var(--font-size-sm);
    color: rgba(255,255,255,.65);
    margin-bottom: var(--space-6);
    font-weight: 500;
}

/* Progress bar inside status card — white fill on transparent track */
.status-hero-card__progress-track {
    height: 6px;
    background: rgba(255,255,255,.20);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-bottom: var(--space-2);
}

.status-hero-card__progress-fill {
    height: 100%;
    background: #fff;
    border-radius: var(--radius-full);
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Near-miss: fill turns warm accent */
.status-hero-card--near-miss .status-hero-card__progress-fill {
    background: #fde68a;
}

.status-hero-card__progress-label {
    font-size: var(--font-size-xs);
    color: rgba(255,255,255,.65);
    display: flex;
    justify-content: space-between;
}

.status-hero-card__progress-label strong {
    color: rgba(255,255,255,.90);
}

/* AT_RISK variant */
.status-hero-card--at-risk {
    background: linear-gradient(160deg, #7c2d12 0%, #b45309 100%);
    box-shadow: 0 12px 40px rgba(124, 45, 18, .40);
}

/* Celebration / reward unlocked variant */
.status-hero-card--celebration {
    background: linear-gradient(160deg, #78350f 0%, #b45309 50%, #d97706 100%);
    background-size: 200% auto;
    box-shadow: 0 12px 40px rgba(180, 83, 9, .40);
}

@media (prefers-reduced-motion: no-preference) {
    .status-hero-card--celebration { animation: shimmer 2.5s linear infinite, hero-enter .4s ease both; }
}

/* ================================================================
   P0 BEHAVIORAL AMPLIFIERS — 2026-05-02
   near-miss hero pulse, locked variant, ghost progress,
   reward ticket timer, post-celebration re-loop.
   ================================================================ */

/* Near-miss HERO pulse — the whole card beats to create urgency */
@keyframes hero-pulse {
    0%, 100% {
        box-shadow: 0 12px 40px rgba(180, 83, 9, .45);
        outline: 2px solid transparent;
    }
    50% {
        box-shadow: 0 12px 60px rgba(250, 204, 21, .65), 0 0 0 3px #facc15;
        outline: 2px solid #facc15;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .reward-hero--near-miss {
        animation: hero-pulse 0.85s ease-in-out infinite;
    }
}

/* ================================================================
   CELEBRATION ENHANCEMENTS
   Gold points-delta, sparkle glyphs, claim CTA button.
   ================================================================ */

/* Entrance burst — hero card scales in with ambient glow */
@keyframes celebration-enter {
    0%   { transform: scale(0.92); opacity: 0; box-shadow: 0 0 0 rgba(251,191,36,0); }
    55%  { transform: scale(1.025); }
    100% { transform: scale(1); opacity: 1; box-shadow: 0 16px 60px rgba(251,191,36,.30); }
}

@media (prefers-reduced-motion: no-preference) {
    .reward-hero--celebration {
        animation: celebration-enter 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
}

/* Persistent glow pulse on reward ticket after reveal */
@keyframes ticket-glow {
    0%, 100% { box-shadow: 0 4px 20px rgba(180,83,9,.30), 0 0 0 0 rgba(253,230,138,0); }
    50%       { box-shadow: 0 8px 40px rgba(251,191,36,.50), 0 0 0 4px rgba(253,230,138,.15); }
}

.reward-ticket--glow {
    animation: ticket-glow 1.8s ease-in-out infinite;
}

/* Points-delta one-shot glow after count-up */
@keyframes points-glow-pulse {
    0%   { text-shadow: 0 2px 12px rgba(251,191,36,.50); }
    40%  { text-shadow: 0 0 24px rgba(253,230,138,1), 0 0 40px rgba(251,191,36,.80); }
    100% { text-shadow: 0 2px 12px rgba(251,191,36,.50); }
}

.reward-hero__points-delta--glow {
    animation: points-glow-pulse 0.9s ease-out both;
}

/* Gold colour on the points counter during celebration */
.reward-hero--celebration .reward-hero__points-delta {
    color: #fde68a;
    text-shadow: 0 2px 12px rgba(251,191,36,.50);
}

/* Sparkle glyphs — 5 pseudo-elements scattered around the card */
.reward-hero--celebration::after {
    content: '✦';
    position: absolute;
    font-size: 1.4rem;
    color: rgba(253,230,138,.65);
    pointer-events: none;
    top: 12%;  right: 8%;
    animation: sparkle-drift 3s ease-in-out infinite;
}

/* Additional sparkles via sibling pseudo-elements on inner children
   (CSS only — no extra HTML) */
.reward-hero--celebration .reward-hero__eyebrow::before {
    content: '✦ ';
    color: #fde68a;
    animation: sparkle-drift 2.4s ease-in-out infinite 0.4s;
}
.reward-hero--celebration .reward-hero__eyebrow::after {
    content: ' ✦';
    color: #fde68a;
    animation: sparkle-drift 2.8s ease-in-out infinite 0.8s;
}

@keyframes sparkle-drift {
    0%, 100% { transform: translateY(0) scale(1); opacity: .65; }
    50%       { transform: translateY(-6px) scale(1.2); opacity: 1; }
}

/* Claim CTA button — gold border, prominent, scroll to reward ticket */
.reward-hero__claim-cta {
    display: inline-block;
    margin-top: var(--space-5);
    padding: 14px 28px;
    background: transparent;
    border: 2px solid #fde68a;
    border-radius: var(--radius-full);
    color: #fde68a;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
}
.reward-hero__claim-cta:hover,
.reward-hero__claim-cta:focus-visible {
    background: #fde68a;
    color: #78350f;
    outline: none;
}

/* Near-miss eyebrow: bigger, uppercase, bright yellow */
.reward-hero--near-miss .reward-hero__eyebrow {
    font-size: var(--font-size-sm);
    color: #fde68a;
    opacity: 1;
    letter-spacing: .12em;
}

/* ================================================================
   NEAR-MISS FINAL VISIT — extra urgency when exactly 1 visit left
   ================================================================ */
.progress-strip__goal--final {
    font-size: clamp(0.85rem, 4vw, 1rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #b45309;
}

/* Sticky bottom CTA — appears after 2s when near-miss detected */
.near-miss-sticky-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(90deg, #78350f, #b45309);
    color: #fff;
    padding: 14px 20px;
    font-size: 0.9rem;
    font-weight: 700;
    text-align: center;
    z-index: 9000;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.34, 1.2, 0.64, 1);
    box-shadow: 0 -4px 24px rgba(120,53,15,.40);
}
.near-miss-sticky-cta--visible {
    transform: translateY(0);
}

/* Locked reward variant — for new (unregistered) users */
.reward-hero--locked {
    background: linear-gradient(160deg, #1e3a5f 0%, #1d4ed8 100%);
    box-shadow: 0 12px 40px rgba(29, 78, 216, .40);
}

/* Unlock path — milestone preview ("À la 5ème visite : café offert") */
.reward-hero__unlock-path {
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, .75);
    margin-top: var(--space-3);
    line-height: 1.4;
}

.reward-hero__unlock-path strong {
    color: #fff;
    font-weight: 700;
}

/* Social proof pulse dot */
.pulse-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #34d399;
    margin-right: 6px;
    vertical-align: middle;
    flex-shrink: 0;
}

@keyframes pulse-dot-anim {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%       { transform: scale(1.5); opacity: 0.6; }
}

@media (prefers-reduced-motion: no-preference) {
    .pulse-dot { animation: pulse-dot-anim 1.8s ease-in-out infinite; }
}

/* Social proof line */
.reward-hero__social-proof {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: var(--font-size-xs);
    color: rgba(255, 255, 255, .70);
    margin-top: var(--space-3);
}

/* Ghost progress — fingerprint-recognized anonymous repeat visitor */
.reward-hero__ghost-progress {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: #fde68a;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .20);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    margin-top: var(--space-3);
    line-height: 1.4;
    text-align: center;
}

/* Reward ticket: 7-day validity timer */
.reward-ticket__timer {
    font-size: var(--font-size-xs);
    color: rgba(255, 255, 255, .55);
    margin-top: var(--space-2);
    letter-spacing: .02em;
}

/* Post-celebration re-loop — next objective */
.reward-hero__reloop {
    font-size: var(--font-size-xs);
    color: rgba(255, 255, 255, .65);
    margin-top: var(--space-3);
    padding: var(--space-2) var(--space-4);
    background: rgba(255, 255, 255, .08);
    border-radius: var(--radius-md);
    text-align: center;
    line-height: 1.5;
}

.reward-hero__reloop strong {
    color: #fff;
    font-weight: 700;
}

/* Active rewards section in account */
.active-rewards-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.active-reward-card {
    background: linear-gradient(135deg, #78350f 0%, #b45309 100%);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.active-reward-card__name {
    font-size: var(--font-size-lg);
    font-weight: 700;
    margin: 0;
}

.active-reward-card__validity {
    font-size: var(--font-size-xs);
    color: rgba(255, 255, 255, .65);
    margin: 0;
}

.active-reward-card__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2) var(--space-4);
    background: rgba(255, 255, 255, .20);
    border: 1px solid rgba(255, 255, 255, .30);
    border-radius: var(--radius-full);
    color: #fff;
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    margin-top: var(--space-2);
    align-self: flex-start;
}

.active-reward-card__cta:hover {
    background: rgba(255, 255, 255, .30);
}

/* ================================================================
   CLAIM BLOCK — physical POS pass
   Renders beneath unlocked reward cards on the account page.
   High-contrast dark surface so the QR is unmissable.
   ================================================================ */

.claim-block {
    background: var(--text-primary);
    border-radius: var(--radius-xl);
    padding: var(--space-6) var(--space-4) var(--space-5);
    margin-top: var(--space-4);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}

/* White frame isolates the QR from the dark background for reliable scanning */
.claim-block__qr {
    background: #ffffff;
    border-radius: var(--radius-md);
    padding: var(--space-3);
    display: inline-flex;
    line-height: 0;
}

.claim-block__qr-img {
    display: block;
    width: 200px;
    height: 200px;
    border-radius: var(--radius-xs);
}

/* Primary instruction — bold, stops thumb-scroll */
.claim-block__instruction {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--text-inverse);
    margin: var(--space-2) 0 0;
    letter-spacing: -0.01em;
}

/* Secondary context — POS confirmation cue */
.claim-block__subtext {
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, .60);
    margin: 0;
}

/* Validity / single-use notice — de-emphasised by default */
.claim-block__expiry {
    font-size: var(--font-size-xs);
    color: rgba(255, 255, 255, .38);
    margin: 0;
}

/* Urgency modifier: < 48 h remaining */
.claim-block__expiry--urgent {
    color: var(--warning);
    font-weight: 600;
}

/* Inline variant — scan page celebration block */
.claim-block--inline {
    background: rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-3);
    margin-top: var(--space-3);
}
.claim-block--inline .claim-block__qr {
    background: #ffffff;
    border-radius: var(--radius-md);
    padding: var(--space-2);
    display: inline-flex;
    line-height: 0;
}
.claim-block--inline .claim-block__qr-img {
    width: 140px;
    height: 140px;
    border-radius: var(--radius-xs);
}
.claim-block--inline .claim-block__instruction {
    font-size: var(--font-size-base);
    margin-top: var(--space-2);
}
.claim-block--inline .claim-block__subtext {
    font-size: var(--font-size-xs);
}

/* ============================================================
   TASK 1 — SIDEBAR COLLAPSIBLE
   ============================================================ */

/* Toggle button */
.sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2);
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
}
.sidebar-toggle:hover {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
}

/* Collapsed width */
.admin-nav--collapsed {
    width: 64px;
}

/* Brand area in collapsed mode */
.admin-nav--collapsed .admin-nav__brand {
    justify-content: center;
    padding-left: var(--space-2);
    padding-right: var(--space-2);
}
.admin-nav--collapsed .admin-nav__title {
    display: none;
}

/* Links in collapsed mode */
.admin-nav--collapsed .admin-nav__links {
    align-items: center;
    padding: var(--space-4) var(--space-2);
}
.admin-nav--collapsed .admin-nav__link {
    justify-content: center;
    padding: var(--space-3);
    gap: 0;
    overflow: visible;
}
.admin-nav--collapsed .admin-nav__link-label {
    display: none;
}

/* CSS tooltip on collapsed nav links */
.admin-nav--collapsed .admin-nav__link::after {
    content: attr(data-label);
    position: absolute;
    left: calc(100% + var(--space-2));
    top: 50%;
    transform: translateY(-50%);
    background: var(--text-primary);
    color: var(--text-inverse);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease 0.1s;
    z-index: 200;
    box-shadow: var(--shadow-md);
}
.admin-nav--collapsed .admin-nav__link:hover::after {
    opacity: 1;
}

/* Actions in collapsed mode */
.admin-nav--collapsed .admin-nav__actions {
    align-items: center;
    padding: var(--space-3) var(--space-2);
}
.admin-nav--collapsed .admin-nav__email {
    display: none;
}
.admin-nav--collapsed .admin-nav__logout {
    padding: var(--space-2);
    width: auto;
    font-size: 0;
}

/* Show hamburger on mobile; neutralise collapsed state so it behaves like normal mobile */
@media (max-width: 768px) {
    .sidebar-toggle { display: flex; }
    /* Undo the desktop collapsed overrides */
    .admin-nav--collapsed { width: 100%; }
    .admin-nav--collapsed .admin-nav__brand {
        justify-content: space-between;
        padding: var(--space-3) var(--space-4);
    }
    .admin-nav--collapsed .admin-nav__title { display: block; }
    .admin-nav--collapsed .admin-nav__links {
        align-items: stretch;
        padding: var(--space-2) var(--space-3) var(--space-3);
    }
    .admin-nav--collapsed .admin-nav__link {
        justify-content: flex-start;
        padding: var(--space-2) var(--space-3);
        gap: var(--space-3);
        overflow: hidden;
    }
    .admin-nav--collapsed .admin-nav__link-label { display: inline; }
    .admin-nav--collapsed .admin-nav__link::after { content: none; }
}

/* ============================================================
   TASK 2 — LOGIN PAGE ENHANCEMENTS
   ============================================================ */

/* Auth method tabs */
.login-tabs {
    display: flex;
    gap: var(--space-1);
    background: var(--bg-surface-alt);
    border-radius: var(--radius-md);
    padding: 3px;
    margin-bottom: var(--space-6);
}
.login-tab {
    flex: 1;
    padding: var(--space-2) var(--space-3);
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    text-align: center;
}
.login-tab--active {
    background: var(--bg-surface);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}
.login-tab--disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.login-tab--disabled:hover {
    background: transparent;
    color: var(--text-muted);
}

/* Password label row: label + forgot link */
.login-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.login-forgot {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.15s ease;
}
.login-forgot:hover {
    color: var(--text-secondary);
    text-decoration: underline;
}

/* ============================================================
   TASK 3 — CAMPAIGN DISPLAY TOGGLE (LIST / GRID)
   ============================================================ */

/* Toggle button group */
.view-toggle {
    display: flex;
    align-items: center;
    gap: 2px;
    background: var(--bg-surface-alt);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 2px;
}
.view-toggle__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.view-toggle__btn:hover {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
}
.view-toggle__btn--active {
    background: var(--bg-surface);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}

/* Grid display mode */
.campaigns-list[data-view="grid"] {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.campaigns-list[data-view="grid"] .campaign-card {
    padding: var(--space-4);
}
.campaigns-list[data-view="grid"] .campaign-card__header {
    flex-wrap: wrap;
}
.campaigns-list[data-view="grid"] .campaign-card__name {
    font-size: var(--font-size-sm);
}
.campaigns-list[data-view="grid"] .campaign-card__date {
    display: none;
}
.campaigns-list[data-view="grid"] .smart-tip {
    display: none;
}
.campaigns-list[data-view="grid"] .campaign-card__stats {
    gap: var(--space-2);
}
.campaigns-list[data-view="grid"] .campaign-card__actions {
    flex-wrap: wrap;
    gap: var(--space-2);
}
.campaigns-list[data-view="grid"] .campaign-card__btn {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-xs);
}

/* ============================================================
   TASK 4 — ANALYTICS SECTION GROUPING
   ============================================================ */

/* Section group: visual container with label */
.an-section-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.an-section-group__label {
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 0;
}

/* Analytics charts full-width fix */
.an-kpi-bar,
.an-charts {
    width: 100%;
}

/* Slightly larger chart height for better readability */
.an-chart-wrap {
    height: 200px;
}

/* ── Scan page celebration sequencing ──────────────────────────────────── */
.reward-ticket--deferred { opacity: 0; transition: opacity 0.4s ease; }
.reward-ticket--revealed  { opacity: 1; }

.claim-block--inline-pop {
    animation: claim-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes claim-pop {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.04); }
    100% { transform: scale(1); }
}



/* ==========================================================================
   MARKETING REDESIGN
   Premium behavioural loyalty OS visual language
   ========================================================================== */

/* ── Marketing-specific design tokens ─────────────────────────────────────── */
:root {
  --mkt-bg-deep:      #080720;
  --mkt-bg-mid:       #0f0d2a;
  --mkt-bg-section:   #1e1b4b;
  --mkt-bg-accent:    #2d2a6e;
  --mkt-glow-purple:  rgba(139, 92, 246, 0.18);
  --mkt-glow-indigo:  rgba(99, 102, 241, 0.22);
  --mkt-glass-bg:     rgba(255, 255, 255, 0.06);
  --mkt-glass-border: rgba(255, 255, 255, 0.12);
  --mkt-shadow-card:  0 1px 0 0 rgba(255,255,255,0.08) inset,
                      0 24px 48px -12px rgba(0,0,0,0.6);
  --mkt-indigo:       #6366f1;
  --mkt-indigo-soft:  rgba(99, 102, 241, 0.12);
  --mkt-text-light:   rgba(255, 255, 255, 0.88);
  --mkt-text-muted:   rgba(255, 255, 255, 0.52);
  /* Lifecycle state colours */
  --mkt-lifecycle-new:     #22c55e;
  --mkt-lifecycle-active:  #3b82f6;
  --mkt-lifecycle-at-risk: #f59e0b;
  --mkt-lifecycle-lost:    #ef4444;
}

/* ── Animations ────────────────────────────────────────────────────────────── */
@keyframes mkt-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}
@keyframes mkt-glow-pulse {
  0%, 100% { opacity: 0.45; }
  50%       { opacity: 0.9; }
}
@keyframes mkt-bar-fill {
  from { width: 0; }
  to   { width: var(--mkt-fill-pct, 80%); }
}
@media (prefers-reduced-motion: reduce) {
  .mkt-stack__card,
  .mkt-phone__reward-glow,
  .mkt-phone__fill {
    animation: none !important;
  }
}

/* ── Container & Section layout ────────────────────────────────────────────── */
.mkt-container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-6);
}
.mkt-section {
  padding-block: clamp(var(--space-12), 6vw, 96px);
}
.mkt-section--alt {
  background: var(--bg-surface);
}
.mkt-section--dark {
  background: var(--mkt-bg-section);
}
.mkt-section__header {
  text-align: center;
  max-width: 680px;
  margin-inline: auto;
  margin-bottom: var(--space-10);
}
.mkt-section__eyebrow {
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mkt-indigo);
  margin-bottom: var(--space-3);
}
.mkt-section__title {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: var(--space-4);
}
.mkt-section__subtitle {
  font-size: 1.0625rem;
  color: var(--text-secondary);
  line-height: 1.65;
  max-width: 560px;
  margin-inline: auto;
}
.mkt-section__title--light { color: #fff; }
.mkt-section__subtitle--light { color: var(--mkt-text-muted); }
.mkt-section__eyebrow--light { color: rgba(165, 180, 252, 0.85); }

/* ── Sticky translucent nav ────────────────────────────────────────────────── */
.mkt-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: rgba(247, 244, 237, 0.9);
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}
.mkt-nav__inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-6);
  height: 68px;
}
.mkt-nav__logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  flex-shrink: 0;
}
.mkt-nav__logo-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: linear-gradient(135deg, var(--mkt-indigo) 0%, var(--mkt-bg-section) 100%);
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.mkt-nav__logo-name {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.mkt-nav__links-wrap {
  flex: 1;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.mkt-nav__links-wrap::-webkit-scrollbar { display: none; }
.mkt-nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  white-space: nowrap;
}
.mkt-nav__link {
  display: inline-block;
  padding: var(--space-2) var(--space-3);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: color 0.15s, background 0.15s;
}
.mkt-nav__link:hover { color: var(--text-primary); background: rgba(0,0,0,0.04); }
.mkt-nav__link--active { color: var(--text-primary); font-weight: 600; }
.mkt-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}
.mkt-nav__lang {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 0.75rem;
  font-weight: 500;
}
.mkt-nav__lang-sep { color: var(--text-muted); }
.mkt-nav__lang-link {
  color: var(--text-muted);
  text-decoration: none;
  padding: 2px 4px;
  border-radius: var(--radius-xs);
  transition: color 0.15s;
}
.mkt-nav__lang-link:hover { color: var(--text-primary); }
.mkt-nav__lang-link--active { color: var(--text-primary); font-weight: 600; }
.mkt-nav__cta {
  font-size: 0.875rem;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--action-primary);
  color: var(--action-primary-text);
  text-decoration: none;
  font-weight: 600;
  transition: opacity 0.15s;
}
.mkt-nav__cta:hover { opacity: 0.85; }

/* ── Hero — immersive dark ─────────────────────────────────────────────────── */
.mkt-hero {
  position: relative;
  min-height: 100svh;
  background: var(--mkt-bg-deep);
  display: flex;
  align-items: center;
  overflow: hidden;
}
.mkt-hero::before,
.mkt-hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.mkt-hero::before {
  width: 600px;
  height: 600px;
  top: -120px;
  right: -80px;
  background: radial-gradient(ellipse at center, var(--mkt-glow-indigo) 0%, transparent 70%);
}
.mkt-hero::after {
  width: 400px;
  height: 400px;
  bottom: -60px;
  left: 20%;
  background: radial-gradient(ellipse at center, var(--mkt-glow-purple) 0%, transparent 70%);
}
.mkt-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
  padding-block: clamp(var(--space-12), 8vw, 120px);
}
.mkt-hero__copy {
  max-width: 560px;
}
.mkt-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(165, 180, 252, 0.85);
  margin-bottom: var(--space-5);
}
.mkt-hero__headline {
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.04em;
  line-height: 1.07;
  margin-bottom: var(--space-6);
}
.mkt-hero__subheadline {
  font-size: clamp(1rem, 1.5vw, 1.1875rem);
  color: var(--mkt-text-muted);
  line-height: 1.65;
  margin-bottom: var(--space-8);
  max-width: 480px;
}
.mkt-hero__cta-group {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.mkt-hero__cta-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  background: #fff;
  color: var(--mkt-bg-deep);
  font-size: 0.9375rem;
  font-weight: 700;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: opacity 0.15s, transform 0.15s;
}
.mkt-hero__cta-primary:hover { opacity: 0.92; transform: translateY(-1px); }
.mkt-hero__cta-ghost {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--mkt-text-muted);
  text-decoration: none;
  transition: color 0.15s;
}
.mkt-hero__cta-ghost:hover { color: #fff; }
.mkt-hero__trust {
  margin-top: var(--space-5);
  font-size: var(--font-size-xs);
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.03em;
}
.mkt-hero__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Phone stack (3 floating cards) ────────────────────────────────────────── */
.mkt-stack {
  position: relative;
  width: 100%;
  height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mkt-stack__card {
  position: absolute;
  background: var(--mkt-glass-bg);
  border: 1px solid var(--mkt-glass-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--mkt-shadow-card);
  width: 220px;
}
.mkt-stack__card--scan {
  top: 0;
  left: 0;
  animation: mkt-float 6s ease-in-out infinite;
  animation-delay: 0s;
}
.mkt-stack__card--progress {
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  animation: mkt-float 6s ease-in-out infinite;
  animation-delay: 2s;
}
.mkt-stack__card--reward {
  bottom: 0;
  left: 20%;
  animation: mkt-float 6s ease-in-out infinite;
  animation-delay: 4s;
}
.mkt-card__label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(165, 180, 252, 0.7);
  margin-bottom: var(--space-2);
}
.mkt-card__value {
  font-size: 1.375rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: var(--space-3);
}
.mkt-card__bar {
  height: 6px;
  background: rgba(255,255,255,0.1);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.mkt-phone__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--mkt-indigo) 0%, rgba(139,92,246,0.9) 100%);
  border-radius: var(--radius-full);
  animation: mkt-bar-fill 1.4s cubic-bezier(0.34, 1.1, 0.64, 1) both;
  animation-delay: 0.3s;
}
.mkt-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--mkt-text-muted);
}
.mkt-phone__reward-glow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139,92,246,0.5) 0%, transparent 70%);
  margin-bottom: var(--space-2);
  animation: mkt-glow-pulse 3s ease-in-out infinite;
}
.mkt-card__badge {
  display: inline-block;
  padding: 2px var(--space-2);
  background: var(--mkt-indigo-soft);
  border: 1px solid rgba(99,102,241,0.3);
  border-radius: var(--radius-full);
  font-size: 0.6875rem;
  font-weight: 700;
  color: rgba(165,180,252,0.9);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── Behavioral loop ────────────────────────────────────────────────────────── */
.mkt-loop {
  padding-block: clamp(var(--space-12), 6vw, 96px);
}
.mkt-loop__nodes {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  position: relative;
  margin-top: var(--space-10);
}
.mkt-loop__node {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
  max-width: 180px;
}
.mkt-loop__connector {
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, var(--mkt-indigo) 0%, rgba(99,102,241,0.3) 100%);
  margin-top: 28px;
  min-width: 24px;
}
.mkt-loop__node-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--mkt-indigo-soft);
  border: 2px solid rgba(99,102,241,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-3);
  flex-shrink: 0;
}
.mkt-loop__node-icon svg {
  width: 24px;
  height: 24px;
  color: var(--mkt-indigo);
}
.mkt-loop__node-name {
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}
.mkt-loop__node-desc {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  line-height: 1.5;
  padding-inline: var(--space-1);
}

/* ── Live experience showcase (dark) ────────────────────────────────────────── */
.mkt-experience {
  padding-block: clamp(var(--space-12), 6vw, 96px);
  background: var(--mkt-bg-section);
}
.mkt-experience__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-10);
  align-items: center;
}
.mkt-experience__card {
  background: var(--mkt-glass-bg);
  border: 1px solid var(--mkt-glass-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  transition: transform 0.2s;
}
.mkt-experience__card--featured {
  transform: scale(1.05);
  border-color: rgba(99,102,241,0.4);
  box-shadow: var(--mkt-shadow-card);
}
.mkt-experience__card-label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(165,180,252,0.7);
  margin-bottom: var(--space-4);
}
.mkt-experience__visit {
  font-size: var(--font-size-sm);
  color: var(--mkt-text-muted);
  margin-bottom: var(--space-2);
}
.mkt-experience__reward {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: var(--space-4);
  line-height: 1.2;
}
.mkt-experience__bar-wrap {
  height: 8px;
  background: rgba(255,255,255,0.08);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-bottom: var(--space-2);
}
.mkt-experience__bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--mkt-indigo), rgba(139,92,246,0.85));
  border-radius: var(--radius-full);
}
.mkt-experience__meta {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-xs);
  color: var(--mkt-text-muted);
}
.mkt-experience__action {
  margin-top: var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--mkt-text-muted);
  line-height: 1.5;
}
.mkt-experience__action--featured { color: rgba(165,180,252,0.88); }

/* ── Features grid ──────────────────────────────────────────────────────────── */
.mkt-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
.mkt-feature-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  transition: transform 0.2s, box-shadow 0.2s;
}
.mkt-feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.mkt-feature-card__icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--mkt-indigo-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
}
.mkt-feature-card__icon-wrap svg {
  width: 24px;
  height: 24px;
  color: var(--mkt-indigo);
}
.mkt-feature-card__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
  letter-spacing: -0.01em;
}
.mkt-feature-card__desc {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ── Social proof story cards ───────────────────────────────────────────────── */
.mkt-stories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-10);
}
.mkt-story-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
}
.mkt-story-card__type {
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mkt-indigo);
  margin-bottom: var(--space-4);
}
.mkt-story-card__metric {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: var(--space-2);
}
.mkt-story-card__context {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.55;
}

/* ── Industry chip strip ────────────────────────────────────────────────────── */
.mkt-industries {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--space-6);
}
.mkt-industry-chip {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  background: var(--bg-page);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s;
}
.mkt-industry-chip:hover {
  border-color: rgba(99,102,241,0.4);
  color: var(--text-primary);
}

/* ── Finale CTA ─────────────────────────────────────────────────────────────── */
.mkt-finale {
  position: relative;
  padding-block: clamp(80px, 10vw, 140px);
  background: var(--mkt-bg-deep);
  text-align: center;
  overflow: hidden;
}
.mkt-finale::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 400px;
  background: radial-gradient(ellipse at center, var(--mkt-glow-indigo) 0%, transparent 70%);
  pointer-events: none;
}
.mkt-finale__inner {
  position: relative;
  z-index: 1;
}
.mkt-finale__headline {
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.04em;
  line-height: 1.1;
  margin-bottom: var(--space-8);
  max-width: 640px;
  margin-inline: auto;
}
.mkt-finale__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.mkt-finale__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-8);
  background: #fff;
  color: var(--mkt-bg-deep);
  font-size: 1rem;
  font-weight: 700;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: opacity 0.15s, transform 0.15s, box-shadow 0.2s;
}
.mkt-finale__cta:hover {
  opacity: 0.93;
  transform: translateY(-2px);
  box-shadow: 0 0 32px rgba(99,102,241,0.35);
}
.mkt-finale__cta-ghost {
  font-size: 0.9375rem;
  color: var(--mkt-text-muted);
  text-decoration: none;
  transition: color 0.15s;
}
.mkt-finale__cta-ghost:hover { color: rgba(255,255,255,0.8); }

/* ── Footer ─────────────────────────────────────────────────────────────────── */
.mkt-footer {
  background: var(--bg-surface);
  border-top: 1px solid var(--border-subtle);
  padding-block: var(--space-10);
}
.mkt-footer__inner {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-6);
}
.mkt-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-8);
  align-items: start;
}
.mkt-footer__logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  margin-bottom: var(--space-3);
}
.mkt-footer__logo-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: linear-gradient(135deg, var(--mkt-indigo) 0%, var(--mkt-bg-section) 100%);
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.mkt-footer__logo-name {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-primary);
}
.mkt-footer__tagline {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  line-height: 1.55;
  max-width: 280px;
}
.mkt-footer__nav-title {
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}
.mkt-footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.mkt-footer__link {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.15s;
}
.mkt-footer__link:hover { color: var(--text-primary); }
.mkt-footer__copy {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  line-height: 1.55;
  margin-top: var(--space-4);
}

/* ── Page hero (inner pages) ────────────────────────────────────────────────── */
.mkt-page-hero {
  padding-block: clamp(var(--space-10), 6vw, 80px);
  background: var(--mkt-bg-mid);
  text-align: center;
}
.mkt-page-hero__eyebrow {
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(165,180,252,0.8);
  margin-bottom: var(--space-4);
}
.mkt-page-hero__headline {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.04em;
  line-height: 1.1;
  margin-bottom: var(--space-4);
  max-width: 720px;
  margin-inline: auto;
}
.mkt-page-hero__subheadline {
  font-size: 1.0625rem;
  color: var(--mkt-text-muted);
  line-height: 1.65;
  max-width: 560px;
  margin-inline: auto;
}

/* ── Features page — alternating story sections ──────────────────────────────── */
.mkt-feat-story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
  padding-block: clamp(var(--space-10), 6vw, 80px);
  border-bottom: 1px solid var(--border-subtle);
}
.mkt-feat-story:last-child { border-bottom: none; }
.mkt-feat-story__eyebrow {
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mkt-indigo);
  margin-bottom: var(--space-3);
}
.mkt-feat-story__title {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin-bottom: var(--space-4);
}
.mkt-feat-story__desc {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.7;
}
.mkt-feat-story__callout {
  margin-top: var(--space-5);
  padding: var(--space-4);
  background: var(--mkt-indigo-soft);
  border-left: 3px solid var(--mkt-indigo);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  font-style: italic;
  line-height: 1.6;
}
.mkt-feat-story__visual {
  display: flex;
  align-items: center;
  justify-content: center;
}
.mkt-feat-story__icon-container {
  width: 200px;
  height: 200px;
  border-radius: var(--radius-xl);
  background: var(--mkt-indigo-soft);
  border: 1px solid rgba(99,102,241,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mkt-feat-story__icon-container svg {
  width: 80px;
  height: 80px;
  color: var(--mkt-indigo);
  opacity: 0.7;
}
.mkt-feat-story--reversed .mkt-feat-story__visual {
  order: -1;
}

/* ── How It Works — lifecycle arc ────────────────────────────────────────────── */
.mkt-lifecycle-arc {
  display: flex;
  gap: 2px;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-top: var(--space-8);
  height: 10px;
}
.mkt-lifecycle-arc__segment { flex: 1; height: 100%; }
.mkt-lifecycle-arc__segment--new     { background: var(--mkt-lifecycle-new); }
.mkt-lifecycle-arc__segment--active  { background: var(--mkt-lifecycle-active); }
.mkt-lifecycle-arc__segment--loyal   { background: var(--mkt-indigo); }
.mkt-lifecycle-arc__segment--at-risk { background: var(--mkt-lifecycle-at-risk); }
.mkt-lifecycle-arc__segment--lost    { background: var(--mkt-lifecycle-lost); }
.mkt-lifecycle-arc__labels {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-2);
}
.mkt-lifecycle-arc__label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
  flex: 1;
}

/* ── How It Works — dual timelines ──────────────────────────────────────────── */
.mkt-timelines {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  margin-top: var(--space-10);
}
.mkt-timeline__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-6);
}
.mkt-timeline__steps {
  position: relative;
}
.mkt-timeline__step {
  display: flex;
  gap: var(--space-4);
  position: relative;
  padding-bottom: var(--space-6);
}
.mkt-timeline__step:last-child { padding-bottom: 0; }
.mkt-timeline__connector {
  position: absolute;
  left: 19px;
  top: 40px;
  bottom: 0;
  width: 2px;
  background: var(--border-subtle);
}
.mkt-timeline__step:last-child .mkt-timeline__connector { display: none; }
.mkt-timeline__num {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--mkt-indigo-soft);
  border: 2px solid rgba(99,102,241,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--mkt-indigo);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.mkt-timeline__body {}
.mkt-timeline__step-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-1);
  padding-top: var(--space-2);
}
.mkt-timeline__step-desc {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ── Pricing page ────────────────────────────────────────────────────────────── */
.mkt-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  align-items: start;
}
.mkt-pricing-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
}
.mkt-pricing-card--featured {
  border-color: rgba(99,102,241,0.5);
  box-shadow: 0 0 0 1px rgba(99,102,241,0.12), var(--shadow-xl);
}
.mkt-pricing-card__header { margin-bottom: var(--space-5); }
.mkt-pricing-card__name {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}
.mkt-pricing-card__badge {
  display: inline-block;
  padding: 2px var(--space-2);
  background: var(--mkt-indigo);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  border-radius: var(--radius-full);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}
.mkt-pricing-card__price {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: var(--space-2);
}
.mkt-pricing-card__desc {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}
.mkt-pricing-card__features {
  list-style: none;
  margin: var(--space-5) 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.mkt-pricing-card__feature {
  display: flex;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  align-items: flex-start;
}
.mkt-pricing-card__feature svg {
  width: 16px;
  height: 16px;
  color: #22c55e;
  flex-shrink: 0;
  margin-top: 1px;
}
.mkt-pricing-card__cta {
  display: block;
  text-align: center;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.15s;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface-alt);
  color: var(--text-primary);
}
.mkt-pricing-card--featured .mkt-pricing-card__cta {
  background: var(--mkt-indigo);
  color: #fff;
  border-color: transparent;
}
.mkt-pricing-card__cta:hover { opacity: 0.85; }
.mkt-pricing-note {
  text-align: center;
  margin-top: var(--space-6);
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}
.mkt-pricing-faq {
  margin-top: var(--space-12);
  max-width: 720px;
  margin-inline: auto;
}
.mkt-pricing-faq__title {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-6);
  text-align: center;
}
.mkt-pricing-faq__item {
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
}
.mkt-pricing-faq__item:last-child { border-bottom: none; }
.mkt-pricing-faq__q {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}
.mkt-pricing-faq__a {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.65;
}

/* ── Contact page ────────────────────────────────────────────────────────────── */
.mkt-contact-opening {
  background: var(--mkt-indigo-soft);
  border: 1px solid rgba(99,102,241,0.2);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-8);
  font-size: 1rem;
  color: var(--text-primary);
  line-height: 1.65;
}
.mkt-contact-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--space-10);
  align-items: start;
}
.mkt-contact-form__field { margin-bottom: var(--space-5); }
.mkt-contact-form__label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}
.mkt-contact-form__input,
.mkt-contact-form__textarea {
  width: 100%;
  font-size: 1rem;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-primary);
  transition: border-color 0.15s;
  font-family: var(--font-family);
  box-sizing: border-box;
}
.mkt-contact-form__input:focus,
.mkt-contact-form__textarea:focus {
  outline: none;
  border-color: var(--mkt-indigo);
  box-shadow: 0 0 0 3px var(--mkt-indigo-soft);
}
.mkt-contact-form__textarea { resize: vertical; min-height: 140px; }
.mkt-contact-form__submit {
  padding: var(--space-3) var(--space-6);
  background: var(--mkt-indigo);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: opacity 0.15s;
  width: 100%;
}
.mkt-contact-form__submit:hover { opacity: 0.85; }
.mkt-contact-form__note {
  margin-top: var(--space-3);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  text-align: center;
}
.mkt-contact-aside {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
}
.mkt-contact-aside__heading {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-5);
}
.mkt-contact-aside__item {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.mkt-contact-aside__item:last-child { margin-bottom: 0; }
.mkt-contact-aside__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--mkt-indigo-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mkt-contact-aside__icon svg {
  width: 18px;
  height: 18px;
  color: var(--mkt-indigo);
}
.mkt-contact-aside__desc {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.55;
}

/* ── Terms page ──────────────────────────────────────────────────────────────── */
.mkt-terms-content {
  max-width: 720px;
  margin-inline: auto;
  padding-block: var(--space-10);
}
.mkt-terms-content p {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text-secondary);
}
.mkt-terms-section {
  margin-bottom: var(--space-8);
}
.mkt-terms-section__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-3);
  letter-spacing: -0.02em;
}

/* ── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .mkt-hero__inner {
    grid-template-columns: 1fr;
    text-align: center;
    padding-block: clamp(var(--space-10), 8vw, 80px);
  }
  .mkt-hero__copy { max-width: 100%; }
  .mkt-hero__subheadline { max-width: 100%; margin-inline: auto; }
  .mkt-hero__cta-group { justify-content: center; }
  .mkt-hero__trust { text-align: center; }
  .mkt-stack { display: none; }

  .mkt-loop__nodes {
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
  }
  .mkt-loop__connector {
    width: 2px;
    height: 24px;
    min-width: 0;
    flex: none;
    background: linear-gradient(180deg, var(--mkt-indigo) 0%, rgba(99,102,241,0.3) 100%);
    margin-top: 0;
  }

  .mkt-experience__grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .mkt-experience__card--featured { transform: none; }

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

  .mkt-stories-grid { grid-template-columns: 1fr; }

  .mkt-timelines { grid-template-columns: 1fr; }

  .mkt-pricing-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin-inline: auto;
  }

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

  .mkt-footer__grid { grid-template-columns: 1fr 1fr; }

  .mkt-feat-story {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .mkt-feat-story--reversed .mkt-feat-story__visual { order: 0; }
}

@media (max-width: 640px) {
  .mkt-features-grid { grid-template-columns: 1fr; }
  .mkt-footer__grid { grid-template-columns: 1fr; }
  .mkt-finale__actions { flex-direction: column; align-items: center; }
  .mkt-pricing-grid { max-width: 100%; }
  .mkt-container { padding-inline: var(--space-4); }
  .mkt-section { padding-block: var(--space-10); }
  .mkt-nav__inner { height: 60px; }
  .mkt-hero { min-height: auto; }
  .mkt-hero__inner { padding-block: clamp(var(--space-10), 12vw, 80px); }
}


/* ==========================================================================
   MARKETING PAGES
   ========================================================================== */

/* ── Container & Section layout ─────────────────────────────────────────── */

.mkt-container {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: var(--space-6);
}

.mkt-section {
    padding-block: var(--space-12);
}

.mkt-section--alt {
    background: var(--bg-surface);
}

.mkt-section--dark {
    background: #1e1b4b;
}

.mkt-section__header {
    text-align: center;
    max-width: 640px;
    margin-inline: auto;
    margin-bottom: var(--space-8);
}

.mkt-section__title {
    font-size: clamp(1.5rem, 3vw, 2.125rem);
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    margin-bottom: var(--space-3);
}

.mkt-section__subtitle {
    font-size: 1.0625rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.mkt-section__header--light {
    /* dark-section header */
}

.mkt-section__title--light {
    color: #fff;
}

.mkt-section__subtitle--light {
    color: rgba(255, 255, 255, 0.75);
}

/* ── Sticky translucent nav ──────────────────────────────────────────────── */

.mkt-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: rgba(247, 244, 237, 0.92);
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.mkt-nav__inner {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: var(--space-6);
    height: 60px;
}

.mkt-nav__logo {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    text-decoration: none;
    flex-shrink: 0;
}

.mkt-nav__logo-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--action-primary);
    color: var(--bg-page);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.mkt-nav__logo-name {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.mkt-nav__links {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex: 1;
    list-style: none;
    margin: 0;
    padding: 0;
}

.mkt-nav__link {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: color 0.15s, background 0.15s;
    white-space: nowrap;
}

.mkt-nav__link:hover {
    color: var(--text-primary);
    background: rgba(0, 0, 0, 0.05);
}

.mkt-nav__link--active {
    color: var(--text-primary);
    font-weight: 600;
}

.mkt-nav__actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
    margin-left: auto;
}

.mkt-nav__lang {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.mkt-nav__lang-link {
    color: var(--text-muted);
    text-decoration: none;
    padding: 2px 4px;
    border-radius: var(--radius-xs);
    transition: color 0.15s;
}

.mkt-nav__lang-link:hover {
    color: var(--text-primary);
}

.mkt-nav__lang-link--active {
    color: var(--text-primary);
    font-weight: 600;
}

.mkt-nav__lang-sep {
    opacity: 0.4;
}

.mkt-nav__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--action-primary);
    color: var(--bg-page);
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: opacity 0.15s;
}

.mkt-nav__cta:hover {
    opacity: 0.88;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

.mkt-footer {
    border-top: 1px solid var(--border-subtle);
    padding-block: var(--space-8);
}

.mkt-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: var(--space-6);
}

.mkt-footer__brand {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.mkt-footer__logo {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    text-decoration: none;
}

.mkt-footer__logo-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--action-primary);
    color: var(--bg-page);
    border-radius: var(--radius-xs);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.mkt-footer__logo-name {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-primary);
}

.mkt-footer__tagline {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin: 0;
}

.mkt-footer__links {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

.mkt-footer__link {
    font-size: 0.8125rem;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.15s;
}

.mkt-footer__link:hover {
    color: var(--text-primary);
}

.mkt-footer__copy {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin: 0;
}

/* ── Hero ────────────────────────────────────────────────────────────────── */

.mkt-hero {
    padding-block: var(--space-12);
    overflow: hidden;
}

.mkt-hero__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--space-10);
}

.mkt-hero__copy {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.mkt-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0;
}

.mkt-hero__headline {
    font-size: clamp(2rem, 4.5vw, 3rem);
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin: 0;
}

.mkt-hero__subheadline {
    font-size: 1.125rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
    max-width: 480px;
}

.mkt-hero__cta-group {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.mkt-hero__cta-primary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.mkt-hero__cta-secondary {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.mkt-hero__visual {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

/* ── Phone mockup ────────────────────────────────────────────────────────── */

.mkt-phone-frame {
    width: 260px;
    border-radius: 28px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    background: var(--bg-surface);
}

.mkt-phone-frame__screen {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.mkt-phone-hero {
    background: linear-gradient(160deg, #1e1b4b 0%, #312e81 55%, #4338ca 100%);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.mkt-phone-hero__eyebrow {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
}

.mkt-phone-hero__value {
    font-size: 1.25rem;
    font-weight: 800;
    color: #fff;
    margin: 0;
    letter-spacing: -0.02em;
}

.mkt-phone-hero__msg {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

.mkt-phone-progress {
    padding: var(--space-3) var(--space-4) var(--space-4);
    background: var(--bg-surface);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.mkt-phone-progress__bar {
    height: 6px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.mkt-phone-progress__fill {
    height: 100%;
    background: var(--action-primary);
    border-radius: var(--radius-full);
    transition: width 0.4s ease;
}

.mkt-phone-progress__labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mkt-phone-progress__label {
    font-size: 0.6875rem;
    color: var(--text-muted);
    font-weight: 500;
}

.mkt-phone-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--space-2);
    background: #dcfce7;
    color: #166534;
    font-size: 0.625rem;
    font-weight: 700;
    border-radius: var(--radius-full);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* ── Steps grid ──────────────────────────────────────────────────────────── */

.mkt-steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}

.mkt-step-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-6);
    background: var(--bg-page);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    position: relative;
}

.mkt-step-card__num {
    font-size: 3.5rem;
    font-weight: 900;
    color: rgba(0, 0, 0, 0.05);
    line-height: 1;
    position: absolute;
    top: var(--space-3);
    right: var(--space-4);
    user-select: none;
}

.mkt-step-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
}

.mkt-step-card__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.mkt-step-card__desc {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0;
}

/* ── Features grid ───────────────────────────────────────────────────────── */

.mkt-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}

.mkt-feature-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    transition: box-shadow 0.2s, transform 0.2s;
}

.mkt-feature-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.mkt-feature-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: rgba(0, 0, 0, 0.04);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
}

.mkt-feature-card__title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.mkt-feature-card__desc {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0;
}

/* ── Preview layout (dark section) ──────────────────────────────────────── */

.mkt-preview-layout {
    display: flex;
    justify-content: center;
    gap: var(--space-6);
    flex-wrap: wrap;
}

.mkt-preview-card {
    width: 240px;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    background: var(--bg-surface);
}

.mkt-preview-hero {
    padding: var(--space-4) var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.mkt-preview-hero--celebration {
    background: linear-gradient(160deg, #1e1b4b 0%, #312e81 55%, #4338ca 100%);
}

.mkt-preview-hero--near-miss {
    background: linear-gradient(160deg, #1f2937 0%, #374151 55%, #4b5563 100%);
}

.mkt-preview-hero__eyebrow {
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

.mkt-preview-hero__value {
    font-size: 1.125rem;
    font-weight: 800;
    color: #fff;
    margin: 0;
    letter-spacing: -0.02em;
}

.mkt-preview-hero__action {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

.mkt-preview-hero__action--near {
    color: rgba(255, 193, 7, 0.9);
}

.mkt-preview-strip {
    padding: var(--space-3) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.mkt-preview-strip__bar {
    height: 5px;
    background: rgba(0, 0, 0, 0.07);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.mkt-preview-strip__fill {
    height: 100%;
    background: var(--action-primary);
    border-radius: var(--radius-full);
}

.mkt-preview-strip__fill--full {
    width: 100%;
    background: #22c55e;
}

.mkt-preview-strip__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.625rem;
    color: var(--text-muted);
}

.mkt-preview-badge {
    display: inline-flex;
    padding: 2px 6px;
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-muted);
    font-size: 0.5625rem;
    font-weight: 700;
    border-radius: var(--radius-full);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.mkt-preview-badge--loyal {
    background: #dcfce7;
    color: #166534;
}

/* ── Business type grid ──────────────────────────────────────────────────── */

.mkt-biz-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-4);
}

.mkt-biz-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-4);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    text-align: center;
}

.mkt-biz-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: rgba(0, 0, 0, 0.04);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
}

.mkt-biz-card__label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}

/* ── Proof strip ─────────────────────────────────────────────────────────── */

.mkt-proof-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    text-align: center;
}

.mkt-proof-stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.mkt-proof-stat__value {
    display: block;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    color: var(--text-primary);
    letter-spacing: -0.03em;
    line-height: 1;
}

.mkt-proof-stat__label {
    display: block;
    font-size: 0.9375rem;
    color: var(--text-secondary);
}

/* ── CTA Banner ──────────────────────────────────────────────────────────── */

.mkt-cta-banner {
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 60%, #4338ca 100%);
    padding-block: var(--space-12);
}

.mkt-cta-banner__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-6);
}

.mkt-cta-banner__headline {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.03em;
    margin: 0;
    max-width: 560px;
}

.mkt-cta-banner__actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    justify-content: center;
}

.mkt-cta-banner__btn-primary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    background: #fff;
    color: #1e1b4b;
    font-size: 0.9375rem;
    font-weight: 700;
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: opacity 0.15s;
}

.mkt-cta-banner__btn-primary:hover {
    opacity: 0.9;
}

.mkt-cta-banner__btn-ghost {
    font-size: 0.9375rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.15s;
}

.mkt-cta-banner__btn-ghost:hover {
    color: #fff;
}

/* ── Page hero (inner pages) ─────────────────────────────────────────────── */

.mkt-page-hero {
    padding-block: var(--space-12) var(--space-8);
    text-align: center;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-subtle);
}

.mkt-page-hero__headline {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.03em;
    margin: 0 auto var(--space-3);
    max-width: 640px;
}

.mkt-page-hero__subheadline {
    font-size: 1.0625rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 auto;
    max-width: 560px;
}

/* ── Features inner page — alternating sections ──────────────────────────── */

.mkt-feat-section {
    padding-block: var(--space-10);
}

.mkt-feat-section--alt {
    background: var(--bg-surface);
}

.mkt-feat-section__inner {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: var(--space-10);
    align-items: center;
}

.mkt-feat-section__inner--reverse {
    direction: rtl;
}

.mkt-feat-section__inner--reverse > * {
    direction: ltr;
}

.mkt-feat-section__icon-col {
    display: flex;
    justify-content: center;
}

.mkt-feat-section__icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-primary);
}

.mkt-feat-section__title {
    font-size: clamp(1.25rem, 2.5vw, 1.625rem);
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    margin: 0 0 var(--space-3);
}

.mkt-feat-section__desc {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.65;
    margin: 0 0 var(--space-4);
}

.mkt-feat-section__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.mkt-feat-section__list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: 0.9375rem;
    color: var(--text-secondary);
}

.mkt-feat-section__list li .icon {
    flex-shrink: 0;
    color: var(--text-primary);
    margin-top: 2px;
}

/* ── How It Works inner page ─────────────────────────────────────────────── */

.mkt-hiw-lifecycle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding-block: var(--space-4);
}

.mkt-hiw-lifecycle__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}

.mkt-hiw-lifecycle__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background: var(--bg-page);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-full);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}

.mkt-hiw-lifecycle__label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-align: center;
}

.mkt-hiw-lifecycle__arrow {
    color: var(--text-muted);
    flex-shrink: 0;
}

.mkt-hiw-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
}

.mkt-hiw-flow {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.mkt-hiw-flow--customer .mkt-hiw-flow__step-num {
    background: #ede9fe;
    color: #4c1d95;
}

.mkt-hiw-flow__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    padding-bottom: var(--space-4);
    border-bottom: 2px solid var(--border-subtle);
}

.mkt-hiw-flow__steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.mkt-hiw-flow__step {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
}

.mkt-hiw-flow__step-num {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-primary);
}

.mkt-hiw-flow__step-body {
    flex: 1;
}

.mkt-hiw-flow__step-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--space-1);
}

.mkt-hiw-flow__step-desc {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.mkt-hiw-flow__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    align-self: flex-start;
    margin-top: var(--space-2);
}

/* ── Pricing grid ────────────────────────────────────────────────────────── */

.mkt-pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
    align-items: stretch;
}

.mkt-pricing-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-7);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

.mkt-pricing-card--featured {
    border-color: #4338ca;
    box-shadow: 0 0 0 2px rgba(67, 56, 202, 0.15), var(--shadow-lg);
}

.mkt-pricing-card__badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    padding: 4px var(--space-3);
    background: #4338ca;
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: var(--radius-full);
    white-space: nowrap;
}

.mkt-pricing-card__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.mkt-pricing-card__name {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.mkt-pricing-card__desc {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

.mkt-pricing-card__price {
    font-size: 2rem;
    font-weight: 900;
    color: var(--text-primary);
    letter-spacing: -0.03em;
    margin: var(--space-2) 0 0;
}

.mkt-pricing-card--featured .mkt-pricing-card__price {
    color: #4338ca;
}

.mkt-pricing-card__features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    flex: 1;
}

.mkt-pricing-card__feature {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.mkt-pricing-card__feature .icon {
    flex-shrink: 0;
    color: #22c55e;
    margin-top: 2px;
}

.mkt-pricing-card--featured .mkt-pricing-card__feature .icon {
    color: #4338ca;
}

.mkt-pricing-card__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    text-decoration: none;
    margin-top: auto;
}

.mkt-pricing-note {
    text-align: center;
    margin-top: var(--space-6);
    font-size: 0.8125rem;
    color: var(--text-muted);
}

/* ── Contact page ────────────────────────────────────────────────────────── */

.mkt-contact-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: var(--space-10);
    align-items: flex-start;
}

.mkt-contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.mkt-contact-form__field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.mkt-contact-form__label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.mkt-contact-form__input,
.mkt-contact-form__textarea {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    font-size: 0.9375rem;
    color: var(--text-primary);
    font-family: var(--font-family);
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}

.mkt-contact-form__input:focus,
.mkt-contact-form__textarea:focus {
    outline: none;
    border-color: var(--action-primary);
    box-shadow: 0 0 0 3px rgba(28, 28, 28, 0.08);
}

.mkt-contact-form__textarea {
    resize: vertical;
    min-height: 120px;
}

.mkt-contact-form__note {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin: 0;
}

.mkt-contact-form__submit {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    align-self: flex-start;
}

.mkt-contact-aside {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-6);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

.mkt-contact-aside__item {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
}

.mkt-contact-aside__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.04);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
}

.mkt-contact-aside__heading {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--space-1);
}

.mkt-contact-aside__desc {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0;
}

/* ── Terms page ──────────────────────────────────────────────────────────── */

.mkt-terms-content {
    max-width: 720px;
    margin-inline: auto;
}

.mkt-terms-section {
    padding-block: var(--space-6);
    border-bottom: 1px solid var(--border-subtle);
}

.mkt-terms-section:last-child {
    border-bottom: none;
}

.mkt-terms-section__title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--space-3);
}

.mkt-terms-section p {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    .mkt-biz-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .mkt-hiw-cols {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .mkt-nav__links {
        display: q    .mkt-hero__inner {
        grid-template-columns: 1fr;
    }

    .mkt-hero__visual {
        display: none;
    }

    .mkt-steps-grid,
    .mkt-features-grid,
    .mkt-pricing-grid {
        grid-template-columns: 1fr;
    }

    .mkt-proof-strip {
        grid-template-columns: 1fr;
        text-align: left;
    }

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

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

    .mkt-feat-section__inner,
    .mkt-feat-section__inner--reverse {
        grid-template-columns: 1fr;
        direction: ltr;
    }

    .mkt-feat-section__icon-col {
        display: none;
    }

    .mkt-footer__inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .mkt-hiw-lifecycle {
        gap: var(--space-2);
    }
}

@media (max-width: 480px) {
    .mkt-container {
        padding-inline: var(--space-4);
    }

    .mkt-section {
        padding-block: var(--space-8);
    }

    .mkt-cta-banner__actions {
        flex-direction: column;
        width: 100%;
    }

    .mkt-cta-banner__btn-primary {
        width: 100%;
        justify-content: center;
    }

    .mkt-preview-layout {
        flex-direction: column;
        align-items: center;
    }
}


/* ==========================================================================
   MARKETING PAGES
   ========================================================================== */

/* ── Container & Section layout ─────────────────────────────────────────── */

.mkt-container {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: var(--space-6);
}

.mkt-section {
    padding-block: var(--space-12);
}

.mkt-section--alt {
    background: var(--bg-surface);
}

.mkt-section--dark {
    background: #1e1b4b;
}

.mkt-section__header {
    text-align: center;
    max-width: 640px;
    margin-inline: auto;
    margin-bottom: var(--space-8);
}

.mkt-section__title {
    font-size: clamp(1.5rem, 3vw, 2.125rem);
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    margin-bottom: var(--space-3);
}

.mkt-section__subtitle {
    font-size: 1.0625rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.mkt-section__header--light {
    /* dark-section header */
}

.mkt-section__title--light {
    color: #fff;
}

.mkt-section__subtitle--light {
    color: rgba(255, 255, 255, 0.75);
}

/* ── Sticky translucent nav ──────────────────────────────────────────────── */

.mkt-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: rgba(247, 244, 237, 0.92);
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.mkt-nav__inner {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: var(--space-6);
    height: 60px;
}

.mkt-nav__logo {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    text-decoration: none;
    flex-shrink: 0;
}

.mkt-nav__logo-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--action-primary);
    color: var(--bg-page);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.mkt-nav__logo-name {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.mkt-nav__links {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex: 1;
    list-style: none;
    margin: 0;
    padding: 0;
}

.mkt-nav__link {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: color 0.15s, background 0.15s;
    white-space: nowrap;
}

.mkt-nav__link:hover {
    color: var(--text-primary);
    background: rgba(0, 0, 0, 0.05);
}

.mkt-nav__link--active {
    color: var(--text-primary);
    font-weight: 600;
}

.mkt-nav__actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
    margin-left: auto;
}

.mkt-nav__lang {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.mkt-nav__lang-link {
    color: var(--text-muted);
    text-decoration: none;
    padding: 2px 4px;
    border-radius: var(--radius-xs);
    transition: color 0.15s;
}

.mkt-nav__lang-link:hover {
    color: var(--text-primary);
}

.mkt-nav__lang-link--active {
    color: var(--text-primary);
    font-weight: 600;
}

.mkt-nav__lang-sep {
    opacity: 0.4;
}

.mkt-nav__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--action-primary);
    color: var(--bg-page);
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: opacity 0.15s;
}

.mkt-nav__cta:hover {
    opacity: 0.88;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

.mkt-footer {
    border-top: 1px solid var(--border-subtle);
    padding-block: var(--space-8);
}

.mkt-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: var(--space-6);
}

.mkt-footer__brand {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.mkt-footer__logo {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    text-decoration: none;
}

.mkt-footer__logo-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--action-primary);
    color: var(--bg-page);
    border-radius: var(--radius-xs);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.mkt-footer__logo-name {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-primary);
}

.mkt-footer__tagline {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin: 0;
}

.mkt-footer__links {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

.mkt-footer__link {
    font-size: 0.8125rem;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.15s;
}

.mkt-footer__link:hover {
    color: var(--text-primary);
}

.mkt-footer__copy {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin: 0;
}

/* ── Hero ────────────────────────────────────────────────────────────────── */

.mkt-hero {
    padding-block: var(--space-12);
    overflow: hidden;
}

.mkt-hero__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--space-10);
}

.mkt-hero__copy {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.mkt-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0;
}

.mkt-hero__headline {
    font-size: clamp(2rem, 4.5vw, 3rem);
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin: 0;
}

.mkt-hero__subheadline {
    font-size: 1.125rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
    max-width: 480px;
}

.mkt-hero__cta-group {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.mkt-hero__cta-primary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.mkt-hero__cta-secondary {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.mkt-hero__visual {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

/* ── Phone mockup ────────────────────────────────────────────────────────── */

.mkt-phone-frame {
    width: 260px;
    border-radius: 28px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    background: var(--bg-surface);
}

.mkt-phone-frame__screen {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.mkt-phone-hero {
    background: linear-gradient(160deg, #1e1b4b 0%, #312e81 55%, #4338ca 100%);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.mkt-phone-hero__eyebrow {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
}

.mkt-phone-hero__value {
    font-size: 1.25rem;
    font-weight: 800;
    color: #fff;
    margin: 0;
    letter-spacing: -0.02em;
}

.mkt-phone-hero__msg {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

.mkt-phone-progress {
    padding: var(--space-3) var(--space-4) var(--space-4);
    background: var(--bg-surface);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.mkt-phone-progress__bar {
    height: 6px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.mkt-phone-progress__fill {
    height: 100%;
    background: var(--action-primary);
    border-radius: var(--radius-full);
    transition: width 0.4s ease;
}

.mkt-phone-progress__labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mkt-phone-progress__label {
    font-size: 0.6875rem;
    color: var(--text-muted);
    font-weight: 500;
}

.mkt-phone-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--space-2);
    background: #dcfce7;
    color: #166534;
    font-size: 0.625rem;
    font-weight: 700;
    border-radius: var(--radius-full);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* ── Steps grid ──────────────────────────────────────────────────────────── */

.mkt-steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}

.mkt-step-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-6);
    background: var(--bg-page);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    position: relative;
}

.mkt-step-card__num {
    font-size: 3.5rem;
    font-weight: 900;
    color: rgba(0, 0, 0, 0.05);
    line-height: 1;
    position: absolute;
    top: var(--space-3);
    right: var(--space-4);
    user-select: none;
}

.mkt-step-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
}

.mkt-step-card__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.mkt-step-card__desc {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0;
}

/* ── Features grid ───────────────────────────────────────────────────────── */

.mkt-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}

.mkt-feature-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    transition: box-shadow 0.2s, transform 0.2s;
}

.mkt-feature-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.mkt-feature-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: rgba(0, 0, 0, 0.04);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
}

.mkt-feature-card__title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.mkt-feature-card__desc {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0;
}

/* ── Preview layout (dark section) ──────────────────────────────────────── */

.mkt-preview-layout {
    display: flex;
    justify-content: center;
    gap: var(--space-6);
    flex-wrap: wrap;
}

.mkt-preview-card {
    width: 240px;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    background: var(--bg-surface);
}

.mkt-preview-hero {
    padding: var(--space-4) var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.mkt-preview-hero--celebration {
    background: linear-gradient(160deg, #1e1b4b 0%, #312e81 55%, #4338ca 100%);
}

.mkt-preview-hero--near-miss {
    background: linear-gradient(160deg, #1f2937 0%, #374151 55%, #4b5563 100%);
}

.mkt-preview-hero__eyebrow {
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

.mkt-preview-hero__value {
    font-size: 1.125rem;
    font-weight: 800;
    color: #fff;
    margin: 0;
    letter-spacing: -0.02em;
}

.mkt-preview-hero__action {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

.mkt-preview-hero__action--near {
    color: rgba(255, 193, 7, 0.9);
}

.mkt-preview-strip {
    padding: var(--space-3) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.mkt-preview-strip__bar {
    height: 5px;
    background: rgba(0, 0, 0, 0.07);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.mkt-preview-strip__fill {
    height: 100%;
    background: var(--action-primary);
    border-radius: var(--radius-full);
}

.mkt-preview-strip__fill--full {
    width: 100%;
    background: #22c55e;
}

.mkt-preview-strip__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.625rem;
    color: var(--text-muted);
}

.mkt-preview-badge {
    display: inline-flex;
    padding: 2px 6px;
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-muted);
    font-size: 0.5625rem;
    font-weight: 700;
    border-radius: var(--radius-full);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.mkt-preview-badge--loyal {
    background: #dcfce7;
    color: #166534;
}

/* ── Business type grid ──────────────────────────────────────────────────── */

.mkt-biz-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-4);
}

.mkt-biz-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-4);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    text-align: center;
}

.mkt-biz-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: rgba(0, 0, 0, 0.04);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
}

.mkt-biz-card__label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}

/* ── Proof strip ─────────────────────────────────────────────────────────── */

.mkt-proof-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    text-align: center;
}

.mkt-proof-stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.mkt-proof-stat__value {
    display: block;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    color: var(--text-primary);
    letter-spacing: -0.03em;
    line-height: 1;
}

.mkt-proof-stat__label {
    display: block;
    font-size: 0.9375rem;
    color: var(--text-secondary);
}

/* ── CTA Banner ──────────────────────────────────────────────────────────── */

.mkt-cta-banner {
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 60%, #4338ca 100%);
    padding-block: var(--space-12);
}

.mkt-cta-banner__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-6);
}

.mkt-cta-banner__headline {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.03em;
    margin: 0;
    max-width: 560px;
}

.mkt-cta-banner__actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    justify-content: center;
}

.mkt-cta-banner__btn-primary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    background: #fff;
    color: #1e1b4b;
    font-size: 0.9375rem;
    font-weight: 700;
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: opacity 0.15s;
}

.mkt-cta-banner__btn-primary:hover {
    opacity: 0.9;
}

.mkt-cta-banner__btn-ghost {
    font-size: 0.9375rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.15s;
}

.mkt-cta-banner__btn-ghost:hover {
    color: #fff;
}

/* ── Page hero (inner pages) ─────────────────────────────────────────────── */

.mkt-page-hero {
    padding-block: var(--space-12) var(--space-8);
    text-align: center;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-subtle);
}

.mkt-page-hero__headline {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.03em;
    margin: 0 auto var(--space-3);
    max-width: 640px;
}

.mkt-page-hero__subheadline {
    font-size: 1.0625rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 auto;
    max-width: 560px;
}

/* ── Features inner page — alternating sections ──────────────────────────── */

.mkt-feat-section {
    padding-block: var(--space-10);
}

.mkt-feat-section--alt {
    background: var(--bg-surface);
}

.mkt-feat-section__inner {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: var(--space-10);
    align-items: center;
}

.mkt-feat-section__inner--reverse {
    direction: rtl;
}

.mkt-feat-section__inner--reverse > * {
    direction: ltr;
}

.mkt-feat-section__icon-col {
    display: flex;
    justify-content: center;
}

.mkt-feat-section__icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-primary);
}

.mkt-feat-section__title {
    font-size: clamp(1.25rem, 2.5vw, 1.625rem);
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    margin: 0 0 var(--space-3);
}

.mkt-feat-section__desc {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.65;
    margin: 0 0 var(--space-4);
}

.mkt-feat-section__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.mkt-feat-section__list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: 0.9375rem;
    color: var(--text-secondary);
}

.mkt-feat-section__list li .icon {
    flex-shrink: 0;
    color: var(--text-primary);
    margin-top: 2px;
}

/* ── How It Works inner page ─────────────────────────────────────────────── */

.mkt-hiw-lifecycle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding-block: var(--space-4);
}

.mkt-hiw-lifecycle__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}

.mkt-hiw-lifecycle__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background: var(--bg-page);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-full);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}

.mkt-hiw-lifecycle__label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-align: center;
}

.mkt-hiw-lifecycle__arrow {
    color: var(--text-muted);
    flex-shrink: 0;
}

.mkt-hiw-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
}

.mkt-hiw-flow {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.mkt-hiw-flow--customer .mkt-hiw-flow__step-num {
    background: #ede9fe;
    color: #4c1d95;
}

.mkt-hiw-flow__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    padding-bottom: var(--space-4);
    border-bottom: 2px solid var(--border-subtle);
}

.mkt-hiw-flow__steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.mkt-hiw-flow__step {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
}

.mkt-hiw-flow__step-num {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-primary);
}

.mkt-hiw-flow__step-body {
    flex: 1;
}

.mkt-hiw-flow__step-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--space-1);
}

.mkt-hiw-flow__step-desc {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.mkt-hiw-flow__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    align-self: flex-start;
    margin-top: var(--space-2);
}

/* ── Pricing grid ────────────────────────────────────────────────────────── */

.mkt-pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
    align-items: stretch;
}

.mkt-pricing-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-7);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

.mkt-pricing-card--featured {
    border-color: #4338ca;
    box-shadow: 0 0 0 2px rgba(67, 56, 202, 0.15), var(--shadow-lg);
}

.mkt-pricing-card__badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    padding: 4px var(--space-3);
    background: #4338ca;
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: var(--radius-full);
    white-space: nowrap;
}

.mkt-pricing-card__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.mkt-pricing-card__name {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.mkt-pricing-card__desc {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

.mkt-pricing-card__price {
    font-size: 2rem;
    font-weight: 900;
    color: var(--text-primary);
    letter-spacing: -0.03em;
    margin: var(--space-2) 0 0;
}

.mkt-pricing-card--featured .mkt-pricing-card__price {
    color: #4338ca;
}

.mkt-pricing-card__features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    flex: 1;
}

.mkt-pricing-card__feature {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.mkt-pricing-card__feature .icon {
    flex-shrink: 0;
    color: #22c55e;
    margin-top: 2px;
}

.mkt-pricing-card--featured .mkt-pricing-card__feature .icon {
    color: #4338ca;
}

.mkt-pricing-card__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    text-decoration: none;
    margin-top: auto;
}

.mkt-pricing-note {
    text-align: center;
    margin-top: var(--space-6);
    font-size: 0.8125rem;
    color: var(--text-muted);
}

/* ── Contact page ────────────────────────────────────────────────────────── */

.mkt-contact-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: var(--space-10);
    align-items: flex-start;
}

.mkt-contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.mkt-contact-form__field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.mkt-contact-form__label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.mkt-contact-form__input,
.mkt-contact-form__textarea {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    font-size: 0.9375rem;
    color: var(--text-primary);
    font-family: var(--font-family);
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}

.mkt-contact-form__input:focus,
.mkt-contact-form__textarea:focus {
    outline: none;
    border-color: var(--action-primary);
    box-shadow: 0 0 0 3px rgba(28, 28, 28, 0.08);
}

.mkt-contact-form__textarea {
    resize: vertical;
    min-height: 120px;
}

.mkt-contact-form__note {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin: 0;
}

.mkt-contact-form__submit {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    align-self: flex-start;
}

.mkt-contact-aside {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-6);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

.mkt-contact-aside__item {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
}

.mkt-contact-aside__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.04);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
}

.mkt-contact-aside__heading {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--space-1);
}

.mkt-contact-aside__desc {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0;
}

/* ── Terms page ──────────────────────────────────────────────────────────── */

.mkt-terms-content {
    max-width: 720px;
    margin-inline: auto;
}

.mkt-terms-section {
    padding-block: var(--space-6);
    border-bottom: 1px solid var(--border-subtle);
}

.mkt-terms-section:last-child {
    border-bottom: none;
}

.mkt-terms-section__title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--space-3);
}

.mkt-terms-section p {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    .mkt-biz-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .mkt-hiw-cols {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .mkt-nav__links {
        display: q    .mkt-hero__inner {
        grid-template-columns: 1fr;
    }

    .mkt-hero__visual {
        display: none;
    }

    .mkt-steps-grid,
    .mkt-features-grid,
    .mkt-pricing-grid {
        grid-template-columns: 1fr;
    }

    .mkt-proof-strip {
        grid-template-columns: 1fr;
        text-align: left;
    }

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

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

    .mkt-feat-section__inner,
    .mkt-feat-section__inner--reverse {
        grid-template-columns: 1fr;
        direction: ltr;
    }

    .mkt-feat-section__icon-col {
        display: none;
    }

    .mkt-footer__inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .mkt-hiw-lifecycle {
        gap: var(--space-2);
    }
}

@media (max-width: 480px) {
    .mkt-container {
        padding-inline: var(--space-4);
    }

    .mkt-section {
        padding-block: var(--space-8);
    }

    .mkt-cta-banner__actions {
        flex-direction: column;
        width: 100%;
    }

    .mkt-cta-banner__btn-primary {
        width: 100%;
        justify-content: center;
    }

    .mkt-preview-layout {
        flex-direction: column;
        align-items: center;
    }
}

/* ════════════════════════════════════════════════════════════════════
   Hero variant treatments — emotional UX upgrade
   Server-side `hero_variant` (public.py) drives one of these wrappers.
   `--celebration`, `--near-miss`, `--winback`, `--at-risk`, `--branded`,
   `--locked` are defined earlier; the four below cover the remaining
   emotional states (first scan, second scan, loyal regular, champion).
   ════════════════════════════════════════════════════════════════════ */

.reward-hero--first-scan {
    background: linear-gradient(160deg, #1e293b 0%, #1e3a8a 50%, #2563eb 100%);
    box-shadow: 0 12px 40px rgba(37, 99, 235, .35);
}

@keyframes welcomeIn {
    from { opacity: 0; transform: scale(.96); }
    to   { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: no-preference) {
    .reward-hero--first-scan {
        animation: welcomeIn .55s ease both;
    }
}

.reward-hero--second-scan {
    background: linear-gradient(160deg, #064e3b 0%, #047857 55%, #059669 100%);
    box-shadow: 0 12px 40px rgba(5, 150, 105, .35);
}

@media (prefers-reduced-motion: no-preference) {
    .reward-hero--second-scan {
        animation: welcomeIn .45s ease both;
    }
}

.reward-hero--loyal-regular {
    background: linear-gradient(160deg, #1c1917 0%, #292524 100%);
    border: 1px solid rgba(251, 191, 36, .55);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .35),
                inset 0 0 0 1px rgba(251, 191, 36, .12);
}

.reward-hero--loyal-regular .reward-hero__value {
    color: #fde68a;
}

.reward-hero--champion {
    background: linear-gradient(160deg, #0c0a09 0%, #1e1b4b 50%, #312e81 100%);
    border: 1px solid rgba(251, 191, 36, .50);
    box-shadow: 0 12px 40px rgba(49, 46, 129, .55),
                inset 0 0 0 1px rgba(251, 191, 36, .15);
    position: relative;
}

.reward-hero--champion::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(135deg, transparent 30%, rgba(251, 191, 36, .25) 50%, transparent 70%);
    opacity: .25;
    pointer-events: none;
}

@keyframes championRing {
    0%, 100% { opacity: .25; }
    50%      { opacity: .55; }
}

@media (prefers-reduced-motion: no-preference) {
    .reward-hero--champion::before {
        animation: championRing 4.2s ease-in-out infinite;
    }
}

.reward-hero--champion .reward-hero__value {
    color: #fde68a;
}

.reward-hero__champion-mark {
    display: inline-block;
    color: #fbbf24;
    font-size: 1.1em;
    margin-right: .15em;
    text-shadow: 0 0 8px rgba(251, 191, 36, .55);
}