/* ==========================================================================
   DiasporaPulse™ — Master Stylesheet
   Designed by Epicurean Digital Consultants Ltd (Co Reg: 16622200)
   Theme: High-Tech Glassmorphism, Deep Obsidian Dark Mode & Vibrant Accents
   ========================================================================== */

:root {
    --bg-dark: #07090e;
    --bg-card: rgba(15, 23, 42, 0.75);
    --border-card: rgba(255, 255, 255, 0.08);
    --border-hover: rgba(0, 210, 211, 0.4);
    
    --accent-red: #e53e3e;
    --accent-turquoise: #00d2d3;
    --accent-gold: #f1c40f;
    --accent-purple: #9b59b6;
    --accent-green: #2ecc71;
    
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --font-heading: 'Outfit', 'Plus Jakarta Sans', sans-serif;
    --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

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

body.dark-theme {
    background-color: var(--bg-dark);
    color: var(--text-main);
    font-family: var(--font-body);
    line-height: 1.5;
    overflow-x: hidden;
    position: relative;
    min-height: 100vh;
}

/* Global Hidden Class */
.hidden { display: none !important; }

/* Ambient Glow Background Orbs */
.ambient-glow {
    position: fixed;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    filter: blur(140px);
    opacity: 0.15;
    pointer-events: none;
    z-index: 0;
}
.glow-red { top: -100px; left: -100px; background: var(--accent-red); }
.glow-teal { top: 300px; right: -150px; background: var(--accent-turquoise); }
.glow-purple { bottom: -100px; left: 30%; background: var(--accent-purple); }

/* Dynamic Mode Notification Banner */
.mode-banner {
    width: 100%;
    padding: 0.5rem 1.5rem;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    border-bottom: 1px solid var(--border-card);
}
.banner-client {
    background: linear-gradient(90deg, rgba(0, 210, 211, 0.12), rgba(15, 23, 42, 0.9), rgba(0, 210, 211, 0.12));
    color: var(--accent-turquoise);
    border-color: rgba(0, 210, 211, 0.3);
}
.banner-investor {
    background: linear-gradient(90deg, rgba(241, 196, 15, 0.15), rgba(15, 23, 42, 0.9), rgba(241, 196, 15, 0.15));
    color: var(--accent-gold);
    border-color: rgba(241, 196, 15, 0.4);
}

/* Header & Navigation */

.app-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(7, 9, 14, 0.92);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border-card);
    padding: 0.75rem 1.5rem;
}
.header-container {
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.logo-area {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}
.logo-badge {
    position: relative;
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, var(--accent-red), #9b2c2c);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    box-shadow: 0 0 20px rgba(229, 62, 62, 0.4);
}
.logo-pulse {
    position: absolute;
    inset: -3px;
    border-radius: 14px;
    border: 2px solid var(--accent-red);
    animation: pulseBorder 2s infinite;
}
@keyframes pulseBorder {
    0% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.08); opacity: 0.2; }
    100% { transform: scale(1); opacity: 0.8; }
}

.logo-text h1,
.logo-text .brand-name {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
}

.compare-note {
    margin-top: 1rem;
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.6;
}
.logo-text p {
    font-size: 0.68rem;
    color: var(--text-muted);
    font-weight: 500;
    white-space: nowrap;
}
.badge-tag {
    background: rgba(0, 210, 211, 0.15);
    color: var(--accent-turquoise);
    border: 1px solid rgba(0, 210, 211, 0.3);
    font-size: 0.65rem;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font-weight: 700;
}

/* View Mode Switcher */
.view-mode-toggle {
    display: flex;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid var(--border-card);
    border-radius: 30px;
    padding: 3px;
    flex-shrink: 0;
}
.mode-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.45rem 0.9rem;
    border-radius: 20px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.mode-btn.active {
    background: linear-gradient(135deg, var(--accent-turquoise), #00a8a9);
    color: #07090e;
    box-shadow: 0 0 12px rgba(0, 210, 211, 0.3);
}

/* Nav Tabs */
.nav-tabs {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    flex: 1;
}

.tab-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.45rem 0.75rem;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.tab-btn:hover {
    color: var(--text-main);
    background: rgba(255, 255, 255, 0.06);
}
.tab-btn.active {
    color: var(--accent-turquoise);
    background: rgba(0, 210, 211, 0.12);
    border-color: rgba(0, 210, 211, 0.4);
}
.tab-btn.investor-tab {
    color: #f1c40f;
}
.tab-btn.investor-tab.active {
    background: rgba(241, 196, 15, 0.15);
    border-color: rgba(241, 196, 15, 0.5);
}
.tab-btn.hidden {
    display: none !important;
}

.header-actions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* Buttons */
.btn {
    font-family: var(--font-body);
    font-weight: 700;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: all 0.25 ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    text-decoration: none;
}
.btn-sm { font-size: 0.78rem; padding: 0.45rem 0.9rem; }
.btn-md { font-size: 0.88rem; padding: 0.65rem 1.25rem; }
.btn-lg { font-size: 1rem; padding: 0.85rem 1.75rem; border-radius: 12px; }

.btn-primary {
    background: linear-gradient(135deg, var(--accent-red), #c53030);
    color: #fff;
    box-shadow: 0 4px 20px rgba(229, 62, 62, 0.35);
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(229, 62, 62, 0.5);
}
.btn-outline {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-card);
    color: var(--text-main);
}
.btn-outline:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--border-hover);
}
.btn-block { width: 100%; }

.glow-effect { position: relative; overflow: hidden; }
.glow-effect::after {
    content: '';
    position: absolute;
    top: -50%; left: -50%; width: 200%; height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.15), transparent);
    transform: rotate(45deg);
    transition: all 0.5s ease;
}
.glow-effect:hover::after { left: 100%; }

/* Main Container & Tab Views */
.main-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem 1.5rem;
    position: relative;
    z-index: 1;
}
.tab-content { display: none; }
.tab-content.active { display: block; animation: fadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1); }

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

.page-intro {
    margin-bottom: 2rem;
}
.page-intro h2 {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.page-intro p {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-top: 0.25rem;
}

/* Glassmorphic Cards */
.card {
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-card);
    border-radius: 16px;
    padding: 1.5rem;
    transition: all 0.25s ease;
}
.card:hover {
    border-color: rgba(255, 255, 255, 0.15);
}
.glow-card:hover {
    border-color: var(--border-hover);
    box-shadow: 0 0 30px rgba(0, 210, 211, 0.12);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.card-header h3 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Grid Layouts */
.grid-layout { display: grid; gap: 1.5rem; }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.cols-5 { grid-template-columns: repeat(5, 1fr); }

.col-span-1 { grid-column: span 1; }
.col-span-2 { grid-column: span 2; }
.col-span-3 { grid-column: span 3; }

/* Text & Accent Utilities */
.gradient-text {
    background: linear-gradient(135deg, #fff, var(--accent-turquoise));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.teal-text { color: var(--accent-turquoise); }
.gold-text { color: var(--accent-gold); }
.green-text { color: #2ecc71; }
.purple-text { color: var(--accent-purple); }
.red-text { color: var(--accent-red); }

.pill-badge {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-main);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.pill-badge.green { background: rgba(46, 204, 113, 0.15); color: #2ecc71; border: 1px solid rgba(46, 204, 113, 0.3); }
.pill-badge.teal { background: rgba(0, 210, 211, 0.15); color: var(--accent-turquoise); border: 1px solid rgba(0, 210, 211, 0.3); }
.pill-badge.gold { background: rgba(241, 196, 15, 0.15); color: var(--accent-gold); border: 1px solid rgba(241, 196, 15, 0.3); }
.pill-badge.red { background: rgba(229, 62, 62, 0.15); color: var(--accent-red); border: 1px solid rgba(229, 62, 62, 0.3); }
.pill-badge.purple { background: rgba(155, 89, 182, 0.15); color: var(--accent-purple); border: 1px solid rgba(155, 89, 182, 0.3); }

/* -----------------------------------------------------------------------------
   Hero & Landing Page
   ----------------------------------------------------------------------------- */
.hero-section {
    padding: 3rem 0 4rem 0;
    text-align: center;
    position: relative;
}
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(229, 62, 62, 0.1);
    border: 1px solid rgba(229, 62, 62, 0.3);
    color: var(--accent-red);
    font-size: 0.78rem;
    font-weight: 800;
    padding: 0.35rem 1rem;
    border-radius: 30px;
    margin-bottom: 1.5rem;
    letter-spacing: 0.04em;
}
.hero-title {
    font-family: var(--font-heading);
    font-size: 3.2rem;
    font-weight: 800;
    line-height: 1.15;
    max-width: 900px;
    margin: 0 auto 1.25rem auto;
    letter-spacing: -0.03em;
}
.hero-subtitle {
    font-size: 1.15rem;
    color: var(--text-muted);
    max-width: 760px;
    margin: 0 auto 2rem auto;
    line-height: 1.6;
}
.hero-cta-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.hero-stats-card {
    max-width: 1000px;
    margin: 3rem auto 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 1.75rem 2rem;
}
.hero-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.stat-num {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 800;
}
.stat-desc {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 600;
    margin-top: 0.2rem;
}
.hero-stat-divider {
    width: 1px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
}

.section-block {
    margin-top: 4rem;
}
.section-title-area {
    margin-bottom: 2rem;
}
.section-title-area h2 {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 800;
}
.section-title-area p {
    color: var(--text-muted);
    font-size: 0.95rem;
}

.comparison-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}
.compare-card { padding: 2rem; }
.compare-header {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-bottom: 1.5rem;
}
.compare-icon { font-size: 1.8rem; }
.compare-header h3 { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 700; }
.compare-header .sub { font-size: 0.8rem; color: var(--text-muted); }

.compare-list { list-style: none; display: flex; flex-direction: column; gap: 0.85rem; }
.compare-list li { font-size: 0.9rem; display: flex; align-items: flex-start; gap: 0.6rem; }
.cross { color: var(--accent-red); font-weight: 800; }
.check { color: #2ecc71; font-weight: 800; }

.negative-border { border: 1px solid rgba(229, 62, 62, 0.2); }
.positive-border { border: 1px solid rgba(0, 210, 211, 0.4); background: rgba(0, 210, 211, 0.03); }

.feature-card {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.f-icon {
    width: 44px; height: 44px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; margin-bottom: 0.4rem;
}
.red-icon { background: rgba(229, 62, 62, 0.15); color: var(--accent-red); }
.teal-icon { background: rgba(0, 210, 211, 0.15); color: var(--accent-turquoise); }
.gold-icon { background: rgba(241, 196, 15, 0.15); color: var(--accent-gold); }
.purple-icon { background: rgba(155, 89, 182, 0.15); color: var(--accent-purple); }

.feature-card h3 { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 700; }
.feature-card p { font-size: 0.85rem; color: var(--text-muted); line-height: 1.5; }

/* -----------------------------------------------------------------------------
   B2B Client Dashboard & Analytics
   ----------------------------------------------------------------------------- */
.step-num {
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--accent-turquoise); color: #07090e;
    font-size: 0.75rem; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center;
}
.form-group { margin-bottom: 1.1rem; }
.form-group label {
    display: block; font-size: 0.8rem; font-weight: 700;
    color: var(--text-main); margin-bottom: 0.4rem;
}
.form-control {
    width: 100%;
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid var(--border-card);
    border-radius: 8px;
    padding: 0.65rem 0.85rem;
    color: var(--text-main);
    font-family: var(--font-body);
    font-size: 0.88rem;
    transition: all 0.2s ease;
}
.form-control:focus {
    outline: none;
    border-color: var(--accent-turquoise);
    box-shadow: 0 0 10px rgba(0, 210, 211, 0.2);
}
.form-row { display: flex; gap: 0.85rem; }
.col-half { flex: 1; }

.cost-estimate-box {
    background: rgba(0, 210, 211, 0.04);
    border: 1px dashed rgba(0, 210, 211, 0.3);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    margin: 1.25rem 0;
}
.cost-line { display: flex; justify-content: space-between; font-size: 0.82rem; margin-bottom: 0.3rem; }
.cost-line.total { font-size: 1rem; border-top: 1px solid rgba(255,255,255,0.08); padding-top: 0.4rem; margin-top: 0.4rem; }
.cost-sub { font-size: 0.7rem; color: var(--text-muted); margin-top: 0.2rem; }

.ai-status-badge {
    font-size: 0.75rem; font-weight: 700; color: var(--accent-purple);
    background: rgba(155, 89, 182, 0.15); border: 1px solid rgba(155, 89, 182, 0.3);
    padding: 0.25rem 0.65rem; border-radius: 20px;
}

.analytics-top-metrics {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.25rem;
}
.metric-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-card);
    border-radius: 10px; padding: 0.85rem 1rem;
    display: flex; flex-direction: column; gap: 0.2rem;
}
.metric-label { font-size: 0.72rem; color: var(--text-muted); font-weight: 600; }
.metric-val { font-family: var(--font-heading); font-size: 1.35rem; font-weight: 800; }
.metric-change { font-size: 0.68rem; font-weight: 700; }
.metric-change.positive { color: #2ecc71; }
.metric-change.neutral { color: var(--accent-turquoise); }

.chart-container-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-bottom: 1.25rem; }
.chart-box { background: rgba(0, 0, 0, 0.2); border: 1px solid var(--border-card); border-radius: 10px; padding: 1rem; }
.chart-box h4 { font-size: 0.8rem; font-weight: 700; color: var(--text-muted); margin-bottom: 0.75rem; }
.chart-wrapper { height: 180px; position: relative; }

.ai-report-box {
    background: linear-gradient(135deg, rgba(155, 89, 182, 0.08), rgba(0, 210, 211, 0.04));
    border: 1px solid rgba(155, 89, 182, 0.3);
    border-radius: 12px; padding: 1.25rem;
}
.ai-report-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.85rem; }
.ai-badge { font-size: 0.7rem; font-weight: 800; background: var(--accent-purple); color: #fff; padding: 0.2rem 0.5rem; border-radius: 4px; }
.ai-report-header .timestamp { font-size: 0.72rem; color: var(--text-muted); }
.ai-report-body { font-size: 0.85rem; line-height: 1.6; display: flex; flex-direction: column; gap: 0.6rem; }
.ai-actions { display: flex; gap: 0.6rem; margin-top: 0.6rem; }

/* -----------------------------------------------------------------------------
   Mobile App Simulator
   ----------------------------------------------------------------------------- */
.mobile-simulator-layout {
    display: grid; grid-template-columns: 400px 1fr; gap: 2rem; align-items: start;
}
.phone-frame {
    width: 380px; height: 680px;
    background: #000; border: 10px solid #1e293b;
    border-radius: 44px; padding: 10px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8);
    position: relative; margin: 0 auto;
}
.glow-phone { border-color: rgba(0, 210, 211, 0.5); box-shadow: 0 0 40px rgba(0, 210, 211, 0.25); }

.phone-notch {
    width: 140px; height: 20px; background: #1e293b;
    border-bottom-left-radius: 14px; border-bottom-right-radius: 14px;
    position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 10;
}

.phone-screen {
    width: 100%; height: 100%; background: #0b0f19;
    border-radius: 34px; padding: 2.2rem 1rem 1rem 1rem;
    overflow-y: auto; display: flex; flex-direction: column; gap: 0.85rem;
    scrollbar-width: none;
}
.phone-screen::-webkit-scrollbar { display: none; }

.mobile-header { display: flex; justify-content: space-between; align-items: center; }
.user-avatar-badge { display: flex; align-items: center; gap: 0.5rem; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.user-meta { display: flex; flex-direction: column; }
.user-name { font-size: 0.78rem; font-weight: 800; }
.user-level { font-size: 0.65rem; color: var(--accent-turquoise); font-weight: 700; }

.streak-badge {
    background: rgba(241, 196, 15, 0.15); border: 1px solid rgba(241, 196, 15, 0.4);
    border-radius: 20px; padding: 0.2rem 0.6rem; font-size: 0.7rem; font-weight: 800; color: var(--accent-gold);
    display: flex; align-items: center; gap: 0.2rem; cursor: pointer;
}
.flame-pulse { animation: flamePulse 1.5s infinite alternate; }
@keyframes flamePulse { from { transform: scale(1); } to { transform: scale(1.05); } }

.xp-bar-container { background: rgba(255,255,255,0.03); border: 1px solid var(--border-card); border-radius: 10px; padding: 0.65rem; }
.xp-label { display: flex; justify-content: space-between; font-size: 0.68rem; font-weight: 700; color: var(--text-muted); margin-bottom: 0.3rem; }
.xp-track { height: 8px; background: rgba(255,255,255,0.08); border-radius: 4px; overflow: hidden; }
.xp-fill { height: 100%; background: linear-gradient(90deg, var(--accent-turquoise), #2ecc71); transition: width 0.4s ease; }
.btn-level-boost { width: 100%; margin-top: 0.4rem; background: rgba(0, 210, 211, 0.15); border: 1px solid rgba(0, 210, 211, 0.3); color: var(--accent-turquoise); font-size: 0.65rem; font-weight: 800; padding: 0.25rem; border-radius: 6px; cursor: pointer; }

.wallet-bar {
    background: linear-gradient(135deg, rgba(241, 196, 15, 0.15), rgba(229, 62, 62, 0.1));
    border: 1px solid rgba(241, 196, 15, 0.4); border-radius: 12px;
    padding: 0.65rem 0.85rem; display: flex; align-items: center; justify-content: space-between;
}
.coin-box { display: flex; align-items: center; gap: 0.3rem; font-family: var(--font-heading); font-weight: 800; font-size: 0.95rem; color: var(--accent-gold); }
.value-est { font-size: 0.68rem; color: var(--text-muted); }
.btn-reward-shop { background: var(--accent-gold); color: #07090e; font-size: 0.68rem; font-weight: 800; border: none; padding: 0.35rem 0.65rem; border-radius: 6px; cursor: pointer; }

.phone-mini-nav { display: flex; background: rgba(255,255,255,0.04); border-radius: 8px; padding: 2px; }
.phone-nav-item { flex: 1; background: transparent; border: none; color: var(--text-muted); font-size: 0.68rem; font-weight: 700; padding: 0.35rem 0; border-radius: 6px; cursor: pointer; }
.phone-nav-item.active { background: var(--bg-card); color: var(--text-main); }

.mobile-card { background: rgba(255,255,255,0.03); border: 1px solid var(--border-card); border-radius: 12px; padding: 0.85rem; }
.quest-tag { font-size: 0.6rem; font-weight: 800; color: var(--accent-turquoise); margin-bottom: 0.2rem; }
.quest-card h3 { font-size: 0.85rem; font-weight: 800; margin-bottom: 0.2rem; }
.quest-desc { font-size: 0.72rem; color: var(--text-muted); margin-bottom: 0.65rem; }

.quiz-container { background: rgba(0,0,0,0.3); border-radius: 8px; padding: 0.65rem; }
.question-text { font-size: 0.75rem; font-weight: 700; margin-bottom: 0.5rem; }
.quiz-options { display: flex; flex-direction: column; gap: 0.35rem; }
.quiz-opt { background: rgba(255,255,255,0.05); border: 1px solid var(--border-card); color: var(--text-main); font-size: 0.7rem; padding: 0.4rem 0.6rem; border-radius: 6px; text-align: left; cursor: pointer; transition: all 0.2s ease; }
.quiz-opt:hover { background: rgba(0, 210, 211, 0.15); border-color: var(--accent-turquoise); }

.success-animation { text-align: center; padding: 0.5rem 0; }
.trophy-bounce { animation: bounce 1s infinite alternate; font-size: 2rem; }
@keyframes bounce { from { transform: translateY(0); } to { transform: translateY(-8px); } }
.reward-text { font-size: 0.75rem; font-weight: 800; color: #2ecc71; margin: 0.2rem 0; }
.badge-unlocked { font-size: 0.65rem; color: var(--accent-gold); font-weight: 700; }

.badges-mini-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.4rem; margin-top: 0.5rem; }
.badge-item { background: rgba(255,255,255,0.02); border: 1px solid var(--border-card); border-radius: 6px; padding: 0.4rem; display: flex; align-items: center; gap: 0.3rem; font-size: 0.65rem; font-weight: 700; }
.badge-item.unlocked { border-color: rgba(241, 196, 15, 0.4); color: var(--accent-gold); }
.badge-item.locked { opacity: 0.4; }

.chest-icon { font-size: 3.5rem; cursor: pointer; transition: transform 0.2s ease; margin: 0.5rem 0; }
.chest-result-text { font-size: 0.85rem; font-weight: 800; color: var(--accent-gold); margin-top: 0.6rem; }

.leaderboard-list { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.5rem; }
.lb-row { display: flex; justify-content: space-between; font-size: 0.72rem; padding: 0.35rem 0.5rem; border-radius: 6px; background: rgba(255,255,255,0.02); }
.lb-row.my-row { background: rgba(0, 210, 211, 0.15); border: 1px solid var(--accent-turquoise); font-weight: 800; }
.lb-xp { font-weight: 800; color: var(--accent-turquoise); }

.info-side-panel { display: flex; flex-direction: column; gap: 1.25rem; }
.psych-list { display: flex; flex-direction: column; gap: 1rem; }
.psych-item { display: flex; gap: 0.85rem; align-items: flex-start; }
.psych-icon { font-size: 1.5rem; background: rgba(255,255,255,0.05); padding: 0.4rem; border-radius: 10px; }
.psych-item strong { font-size: 0.95rem; }
.psych-item p { font-size: 0.82rem; color: var(--text-muted); margin-top: 0.2rem; }

/* -----------------------------------------------------------------------------
   NEW WOW EXECUTION PIPELINE STYLES
   ----------------------------------------------------------------------------- */
.execution-pipeline-container {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 1rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
}
.pipe-stage-card {
    flex: 1;
    min-width: 190px;
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(0, 210, 211, 0.3);
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.5rem;
    transition: all 0.25s ease;
}
.pipe-stage-card:hover {
    border-color: var(--accent-turquoise);
    transform: translateY(-3px);
    box-shadow: 0 0 20px rgba(0, 210, 211, 0.2);
}
.pipe-stage-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.pipe-num {
    font-size: 0.68rem;
    font-weight: 800;
    color: var(--accent-turquoise);
    letter-spacing: 0.05em;
}
.pipe-time {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--accent-gold);
    background: rgba(241, 196, 15, 0.12);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
}
.pipe-stage-card h4 {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 800;
    color: #fff;
}
.pipe-stage-card p {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.4;
}
.pipe-badge {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--accent-purple);
    background: rgba(155, 89, 182, 0.15);
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    width: fit-content;
}
.pipe-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-turquoise);
    font-size: 1.2rem;
    font-weight: 800;
    opacity: 0.6;
}

/* -----------------------------------------------------------------------------
   NEW PAID PANELIST PORTAL & DASHBOARD STYLES
   ----------------------------------------------------------------------------- */
.paid-quests-feed {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.paid-quest-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-card);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    transition: all 0.2s ease;
}
.paid-quest-item:hover {
    border-color: rgba(0, 210, 211, 0.4);
    background: rgba(0, 210, 211, 0.03);
}
.quest-icon-col {
    font-size: 2.2rem;
    background: rgba(255, 255, 255, 0.05);
    width: 54px;
    height: 54px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.quest-info-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.quest-header-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.quest-header-line h4 {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
}
.quest-info-col p {
    font-size: 0.85rem;
    color: var(--text-muted);
}
.quest-meta-line {
    display: flex;
    gap: 1rem;
    font-size: 0.75rem;
    color: var(--accent-turquoise);
    font-weight: 600;
    margin-top: 0.2rem;
}
.quest-action-col {
    flex-shrink: 0;
}

.redemption-options-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.redemption-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-card);
    border-radius: 10px;
    padding: 0.75rem 0.85rem;
}
.red-icon {
    font-size: 1.5rem;
}
.red-info {
    flex: 1;
}
.red-info strong {
    display: block;
    font-size: 0.85rem;
}
.red-info p {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.recent-payouts-box h4 {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 0.6rem;
}
.payout-log-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.78rem;
    padding: 0.4rem 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
}

/* -----------------------------------------------------------------------------
   Pricing Section
   ----------------------------------------------------------------------------- */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.price-card { display: flex; flex-direction: column; justify-content: space-between; }
.featured-price { border: 2px solid var(--accent-turquoise); position: relative; }
.popular-tag {
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    background: var(--accent-turquoise); color: #07090e; font-size: 0.65rem; font-weight: 800;
    padding: 0.15rem 0.65rem; border-radius: 10px;
}
.price-header h3 { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 800; }
.price-header p { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 1rem; }
.price-val { font-family: var(--font-heading); font-size: 2.2rem; font-weight: 800; color: var(--text-main); }
.price-val span { font-size: 0.85rem; color: var(--text-muted); font-weight: 500; }
.price-features { list-style: none; margin: 1.5rem 0; display: flex; flex-direction: column; gap: 0.65rem; font-size: 0.85rem; }

.credit-pack-card { background: rgba(255,255,255,0.02); border: 1px solid var(--border-card); border-radius: 12px; padding: 1.25rem; }
.credit-pack-card h4 { font-size: 1rem; font-weight: 800; }
.credit-price { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 800; color: var(--accent-gold); margin: 0.3rem 0; }
.credit-price span { font-size: 0.75rem; color: var(--text-muted); font-weight: 600; }

.calculator-results-card { background: rgba(0, 210, 211, 0.04); border: 1px solid rgba(0, 210, 211, 0.2); border-radius: 12px; padding: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; }
.calc-row { display: flex; justify-content: space-between; font-size: 0.85rem; }

/* -----------------------------------------------------------------------------
   Investor Tables & Matrices
   ----------------------------------------------------------------------------- */
.table-responsive { overflow-x: auto; }
.competitor-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 0.85rem; }
.competitor-table th { background: rgba(15, 23, 42, 0.9); padding: 0.85rem 1rem; border-bottom: 2px solid var(--border-card); color: var(--text-muted); font-weight: 700; }
.competitor-table td { padding: 0.85rem 1rem; border-bottom: 1px solid var(--border-card); vertical-align: top; }
.competitor-table tr:hover { background: rgba(255,255,255,0.02); }

.competitor-search-bar { max-width: 500px; }

.phase-card { position: relative; }
.phase-num { font-size: 0.65rem; font-weight: 800; color: var(--accent-turquoise); letter-spacing: 0.05em; margin-bottom: 0.2rem; }
.phase-cost { font-size: 0.72rem; color: var(--accent-gold); font-weight: 700; margin-bottom: 0.5rem; }
.phase-card ul { list-style: none; font-size: 0.78rem; color: var(--text-muted); display: flex; flex-direction: column; gap: 0.3rem; }

.gtm-timeline-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }

.tech-stack-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.tech-box { background: rgba(255,255,255,0.02); border: 1px solid var(--border-card); border-radius: 10px; padding: 1rem; text-align: center; }
.tech-icon { font-size: 1.8rem; display: block; margin-bottom: 0.4rem; }
.tech-box strong { font-size: 0.88rem; display: block; }
.tech-box p { font-size: 0.75rem; color: var(--text-muted); }

.expansion-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.expansion-table th, .expansion-table td { padding: 0.75rem 0.5rem; border-bottom: 1px solid var(--border-card); text-align: left; }
.score-badge { font-weight: 800; color: var(--accent-turquoise); background: rgba(0, 210, 211, 0.12); padding: 0.15rem 0.4rem; border-radius: 4px; }

.legal-checklist { list-style: none; display: flex; flex-direction: column; gap: 1rem; }
.legal-checklist li { display: flex; gap: 0.85rem; align-items: flex-start; }
.legal-icon { font-size: 1.4rem; background: rgba(255,255,255,0.04); padding: 0.35rem; border-radius: 8px; }

.scenario-buttons { display: flex; gap: 0.5rem; }
.scenario-btn { flex: 1; background: transparent; border: 1px solid var(--border-card); color: var(--text-muted); font-family: var(--font-body); font-size: 0.82rem; font-weight: 700; padding: 0.6rem; border-radius: 8px; cursor: pointer; transition: all 0.2s ease; }
.scenario-btn.active { background: rgba(0, 210, 211, 0.12); border-color: var(--accent-turquoise); color: var(--accent-turquoise); }

.financial-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.financial-table th, .financial-table td { padding: 0.65rem 0.5rem; border-bottom: 1px solid var(--border-card); text-align: right; }
.financial-table th:first-child, .financial-table td:first-child { text-align: left; }

.financial-chart-box { height: 180px; position: relative; margin-bottom: 1rem; }

.unit-econ-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
.econ-box { background: rgba(255,255,255,0.02); border: 1px solid var(--border-card); border-radius: 8px; padding: 0.6rem; text-align: center; }
.econ-title { font-size: 0.68rem; color: var(--text-muted); display: block; }
.econ-val { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 800; }
.econ-valHighlight { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 800; color: #2ecc71; }

/* Modal Styles */
.modal-overlay {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(7, 9, 14, 0.85); backdrop-filter: blur(12px);
    display: flex; align-items: center; justify-content: center; padding: 1.5rem;
}
.modal-overlay.hidden { display: none; }
.modal-card { width: 100%; max-width: 540px; position: relative; padding: 2rem; border: 1px solid var(--border-hover); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7); }
.modal-close-x { position: absolute; top: 1.25rem; right: 1.25rem; background: transparent; border: none; color: var(--text-muted); font-size: 1.2rem; cursor: pointer; }
.modal-header h3 { font-family: var(--font-heading); font-size: 1.4rem; font-weight: 800; }
.modal-body p { font-size: 0.88rem; color: var(--text-muted); margin: 0.4rem 0 1.25rem 0; }

/* Enterprise Legal Footer */
.app-footer-enterprise {
    background: rgba(5, 7, 12, 0.95);
    border-top: 1px solid var(--border-card);
    padding: 3.5rem 1.5rem 1.5rem 1.5rem;
    position: relative;
    z-index: 10;
}
.footer-grid-container {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.8fr;
    gap: 2.5rem;
}
.footer-col h4 {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 1rem;
    letter-spacing: 0.02em;
}
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.footer-links a {
    color: var(--text-muted);
    font-size: 0.82rem;
    text-decoration: none;
    transition: color 0.2s ease;
}
.footer-links a:hover { color: var(--accent-turquoise); }
.footer-badges-row { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.5rem; }
.f-badge {
    font-size: 0.68rem;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-card);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    color: var(--text-muted);
}
.footer-bottom-bar {
    max-width: 1400px;
    margin: 2.5rem auto 0 auto;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.78rem;
    color: var(--text-muted);
}
.footer-bottom-bar a { color: var(--accent-turquoise); text-decoration: none; }

/* Platform status notice & panelist reward transparency (landing page) */
.platform-status-notice {
    max-width: 1000px;
    margin: 1.25rem auto 0 auto;
    padding: 0.9rem 1.1rem;
    background: rgba(241, 196, 15, 0.08);
    border: 1px solid rgba(241, 196, 15, 0.35);
    border-left: 4px solid var(--accent-gold);
    border-radius: 8px;
    font-size: 0.85rem;
    line-height: 1.6;
    color: #e8eaed;
}
.reward-transparency-block {
    max-width: 1200px;
    margin: 3rem auto 0 auto;
    padding: 2rem 1.75rem;
}
.reward-transparency-block h2 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 0.4rem;
}
.reward-transparency-lead { color: var(--text-muted); font-size: 0.92rem; margin-bottom: 0.5rem; }
.reward-step-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-card);
    border-radius: 10px;
    padding: 1rem 1.1rem;
}
.reward-step-card h3 {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--accent-turquoise);
    margin-bottom: 0.4rem;
}
.reward-step-card p { font-size: 0.83rem; line-height: 1.6; color: var(--text-muted); }
.reward-transparency-note {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-card);
    font-size: 0.82rem;
    line-height: 1.65;
    color: var(--text-muted);
}
.reward-transparency-note a { color: var(--accent-turquoise); }

.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }

/* -----------------------------------------------------------------------------
   Mobile & Responsive Styles (Hard Requirement: 375px, 390px, 414px)
   ----------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Header layout */
    .app-header { position: relative !important; top: 0 !important; }
    .header-container { flex-direction: column; align-items: flex-start; gap: 0.8rem; padding: 0.8rem; }
    .header-actions { width: 100%; display: flex; justify-content: space-between; margin-top: 0.2rem; }
    .view-mode-toggle { width: 100%; display: flex; }
    .mode-btn { flex: 1; text-align: center; }
    .nav-tabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 0.4rem; -webkit-overflow-scrolling: touch; }
    .tab-btn { flex-shrink: 0; white-space: nowrap; font-size: 0.8rem; padding: 0.5rem 0.8rem; }
    
    /* Layout grid collapse (Enforce 1 column) */
    .cols-2,
    .cols-3,
    .cols-4,
    .cols-5,
    .grid-layout,
    .grid-layout.cols-2,
    .grid-layout.cols-3,
    .grid-layout.cols-4,
    .grid-layout.cols-5 { display: grid !important; grid-template-columns: 1fr !important; gap: 1rem !important; }
    
    .comparison-grid { grid-template-columns: 1fr !important; gap: 1rem; }
    /* The base rule sets display:flex, so grid-template-columns alone had no effect and
       the four stats stayed on one non-wrapping row — two of them were clipped off-screen
       at 375px. Switching to grid here makes the intended 2x2 layout actually apply. */
    .hero-stats-card { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; padding: 1.25rem 1rem; }
    .hero-stat-item { min-width: 0; }
    .hero-stat-item .stat-num, .hero-stat-item .stat-desc { overflow-wrap: anywhere; }
    .hero-stat-divider { display: none; }
    .pricing-grid { grid-template-columns: 1fr !important; }
    .footer-grid-container { grid-template-columns: 1fr !important; gap: 1.5rem; }
    .footer-bottom-bar { flex-direction: column; gap: 0.8rem; text-align: center; }
    
    /* Modals responsive fit */
    .modal-overlay { padding: 0.8rem; align-items: flex-start; overflow-y: auto; }
    .modal-card { width: 95% !important; max-width: 500px !important; max-height: 85vh !important; overflow-y: auto !important; padding: 1.25rem !important; margin: auto !important; }
    
    /* Touch target sizes. Anchors were previously excluded, which left the footer's
       legal/navigation links at ~16px tall — below the 44px minimum — once the footer
       became visible again. */
    .btn, .form-control, input, select, button { min-height: 44px; }
    .app-footer-enterprise a,
    .reward-transparency-note a,
    .platform-status-notice a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    
    /* Panelist app phone simulator. The layout used a fixed 400px grid column and the
       frame a hard 380px width, so the simulator overflowed the viewport by ~306px on a
       real phone. Collapse the two-column layout and let the frame scale fluidly. */
    .mobile-simulator-layout { grid-template-columns: 1fr !important; gap: 1.25rem; }
    .phone-frame {
        width: 100% !important;
        max-width: 360px;
        height: auto !important;
        min-height: 620px;
        margin: 0 auto;
    }
    .phone-screen { height: auto; min-height: 600px; }

    /* Analytics metric strip: a three-column grid that did not collapse, clipping the
       third metric past the right edge. */
    .analytics-top-metrics { grid-template-columns: 1fr 1fr !important; gap: 0.75rem !important; }

    /* Paid quest rows: the action column was flex-shrink:0 inside a nowrap row, so its
       button was pushed ~71px beyond the viewport. Let the row wrap and the action span
       the full width underneath the quest description. */
    .paid-quest-item { flex-wrap: wrap; gap: 0.75rem; }
    .paid-quest-item .quest-info-col { flex: 1 1 100%; min-width: 0; }
    .quest-action-col { flex: 1 1 100%; width: 100%; }
    .quest-action-col .btn { width: 100%; }

    /* ---------------------------------------------------------------------
       Investor / Strategy Mode mobile fixes
       ---------------------------------------------------------------------
       Opening Investor/Strategy Mode auto-navigates to #financial-simulator,
       whose wide forecast table stretched its card to 601px inside a 327px
       column. Because nothing along that chain could shrink, the whole document
       grew to 625px on a 375px screen and the page visibly shifted sideways.
       Two independent causes, fixed here:

       1. Grid/flex children default to min-width:auto, so intrinsic content
          width (wide tables, long pill badges) forces the track wider than the
          viewport. Allowing them to shrink stops the blowout at the source.
       2. Wide data tables need to scroll within their own card rather than
          stretch the page. `display:block` + `width:max-content` + `overflow-x`
          is the standard responsive-table pattern and preserves column layout.
    */
    .card,
    .grid-layout > *,
    .comparison-grid > *,
    .section-block > *,
    .tech-box { min-width: 0; }

    .card table,
    .financial-table,
    .competitor-table {
        display: block;
        width: max-content;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Fixed multi-column strategy rows that never collapsed on mobile. */
    .tech-stack-row { grid-template-columns: 1fr 1fr !important; gap: 0.6rem !important; }
    .unit-econ-grid { grid-template-columns: 1fr 1fr !important; }

    /* Headings that lay out as a flex row alongside a status badge (h2/h3 in the
       strategy cards, plus .card-header) must be allowed to wrap on narrow screens.
       Without this the badge is squeezed to a sliver and breaks mid-word; with it the
       badge drops onto its own line at its natural width. */
    .card-header,
    .card h2,
    .card h3,
    .section-block h2,
    .section-block h3 { flex-wrap: wrap; }

    .card-header .pill-badge,
    h2 > .pill-badge,
    h3 > .pill-badge { flex-shrink: 0; white-space: nowrap; }

    /* Waitlist forms full-width */
    .waitlist-form { width: 100% !important; }
    .waitlist-form .form-group { width: 100% !important; }
    .waitlist-form .form-group div { flex-direction: column !important; width: 100% !important; gap: 0.5rem !important; }
    .waitlist-form input, .waitlist-form button { width: 100% !important; min-width: 100% !important; box-sizing: border-box !important; }
}

@media (max-width: 480px) {
    .hero-title { font-size: 1.6rem; }
    .hero-subtitle { font-size: 0.88rem; line-height: 1.5; }
    .unit-econ-grid { grid-template-columns: 1fr 1fr; }
}

/* -----------------------------------------------------------------------------
   Tablet-landscape gap (769px–1200px)
   -----------------------------------------------------------------------------
   The mobile rules above stop at 768px, so between there and full desktop the
   Investor/Strategy financial simulator still overflowed: its .cols-2 grid sized
   tracks to content (631px + 397px = 1028px) inside a 976px container, because
   .card inherits min-width:auto and the wide forecast table cannot shrink. That
   pushed the second card to right=1077 against a 1024px viewport (52px overflow).

   This mirrors the mobile treatment for these widths only — letting grid children
   shrink and letting a wide table scroll inside its own card. Layout above 1200px
   and at/below 768px is untouched. No content or component structure changes.
   ----------------------------------------------------------------------------- */
@media (min-width: 769px) and (max-width: 1200px) {
    .card,
    .grid-layout > *,
    .comparison-grid > *,
    .section-block > * { min-width: 0; }

    .card table,
    .financial-table,
    .competitor-table {
        display: block;
        width: max-content;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* =============================================================================
   WARM EDITORIAL DESIGN SYSTEM  (approved Claude Design direction)
   =============================================================================
   Applied in page order, one page per task. Currently live on:
     - shared chrome (header, mode banner, footer, page ground)
     - #landing-page

   The nine tabs that have not been migrated yet keep their original dark
   surfaces through the compatibility shim in §3. Remove a tab from that shim's
   selector list as its own redesign task lands — do not delete the shim until
   the last tab is migrated.

   Palette source: the approved Claude Design screens (D1 / D2 / M1) — warm cream
   ground, white cards, charcoal and deep-brown type, one restrained clay accent.
   ============================================================================= */

/* --- §1. Tokens --------------------------------------------------------- */
:root {
    /* Surfaces */
    --surface-page: #f0eee9;
    --surface-card: #ffffff;
    --surface-sunk: #faf9f5;
    --surface-dark: #1c1b18;

    /* Lines */
    --border-soft: #e2ddd3;
    --border-mid: #d8d3c9;

    /* Ink */
    --ink: #1c1b18;
    --ink-2: #3d3833;
    --ink-muted: rgba(28, 27, 24, 0.62);
    --ink-faint: rgba(28, 27, 24, 0.45);
    --ink-invert: #f0eee9;

    /* Accent — used sparingly: primary action, links, section rules */
    --clay: #a34e31;      /* 4.74:1 on cream, 5.68:1 as white-on-clay — WCAG AA */
    --clay-deep: #8a4128;
    --clay-soft: #f4ebe6;

    /* Status tints (calm, not neon) */
    --note-amber: #f6efdd;
    --note-amber-line: #d9b96a;

    /* State colours. Colour carries meaning on the homepage diagrams:
       clay = you can act on it · sage = a control that exists and passed ·
       amber = provisional, pending or development-stage · grey = excluded.
       Contrast on the cream ground: sage 5.9:1, amber 5.4:1 — both AA. */
    --sage: #4e6b5c;
    --sage-deep: #3d5748;
    --sage-soft: #e7eeea;
    --amber: #8a6218;
    --amber-soft: #f6efdd;

    /* Type scale — 8 steps */
    --fs-xs: 0.875rem;   /* 14px floor */
    --fs-sm: 1rem;       /* 16px body */
    --fs-md: 1.125rem;
    --fs-lg: 1.25rem;
    --fs-xl: 1.5rem;
    --fs-2xl: 1.875rem;
    --fs-3xl: 2.25rem;
    --fs-4xl: 3rem;

    /* Spacing — 6 steps */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 1rem;
    --sp-4: 1.5rem;
    --sp-5: 2rem;
    --sp-6: 3rem;

    /* Radius / elevation / measure */
    --r-sm: 4px;
    --r-md: 8px;
    --r-lg: 12px;
    --shadow-card: 0 1px 3px rgba(28, 27, 24, 0.07);
    --measure: 68ch;
    --content-w: 1120px;
}

/* --- §2. Shared chrome --------------------------------------------------- */
body.dark-theme {
    background-color: var(--surface-page);
    color: var(--ink);
    line-height: 1.6;
}

/* The ambient orbs belong to the obsidian theme and have no role in the warm
   palette; they are neutralised rather than deleted so the markup is untouched. */
.ambient-glow { display: none; }

.app-header {
    background: rgba(240, 238, 233, 0.94);
    border-bottom: 1px solid var(--border-mid);
    backdrop-filter: blur(8px);
}
.logo-badge {
    background: var(--surface-dark);
    color: var(--ink-invert);
    border: none;
    box-shadow: none;
}
.logo-pulse { display: none; }
.logo-text h1,
.logo-text .brand-name { color: var(--ink); }
.logo-text p { color: var(--ink-muted); }
.badge-tag {
    background: var(--clay-soft);
    color: var(--clay-deep);
    border: 1px solid var(--border-mid);
}

/* Investor/Strategy switch: kept fully functional, rendered as a quiet
   secondary control rather than a headline element of the public page. */
.view-mode-toggle {
    background: var(--surface-sunk);
    border: 1px solid var(--border-mid);
}
.mode-btn {
    color: var(--ink-muted);
    font-weight: 500;
    background: transparent;
}
.mode-btn.active {
    background: var(--surface-card);
    color: var(--ink);
    box-shadow: var(--shadow-card);
}

.nav-tabs { border-color: var(--border-mid); }
.tab-btn {
    color: var(--ink-2);
    background: transparent;
    border: 1px solid transparent;
}
.tab-btn:hover { background: var(--surface-sunk); color: var(--ink); }
.tab-btn.active {
    background: var(--surface-card);
    color: var(--ink);
    border-color: var(--border-mid);
    box-shadow: var(--shadow-card);
}
.tab-btn.investor-tab { color: var(--ink-muted); }
.tab-btn.investor-tab.active { background: var(--surface-card); color: var(--ink); }

.mode-banner {
    background: var(--surface-sunk);
    border-bottom: 1px solid var(--border-mid);
    backdrop-filter: none;
    font-weight: 500;
    text-align: left;
    padding: 0.6rem var(--sp-4);
}
.banner-client,
.banner-investor { background: var(--surface-sunk); color: var(--ink-muted); }

.btn-primary {
    background: var(--clay);
    border: 1px solid var(--clay);
    color: #fff;
    box-shadow: none;
}
.btn-primary:hover { background: var(--clay-deep); border-color: var(--clay-deep); box-shadow: none; }
.btn-outline {
    border: 1px solid var(--border-mid);
    color: var(--ink);
    background: var(--surface-card);
}
.btn-outline:hover { background: var(--surface-sunk); border-color: var(--ink-faint); color: var(--ink); }
/* Sweep highlight is part of the neon treatment — neutralised, markup untouched. */
.glow-effect::after { display: none; }

.app-footer-enterprise {
    background: var(--surface-card);
    border-top: 1px solid var(--border-mid);
}
.footer-col h4 { color: var(--ink); font-weight: 700; }
.footer-links a { color: var(--ink-2); }
.footer-links a:hover { color: var(--clay); text-decoration: underline; }
.f-badge {
    background: var(--surface-sunk);
    border: 1px solid var(--border-mid);
    color: var(--ink-muted);
    font-weight: 600;
}
.footer-bottom-bar {
    border-top: 1px solid var(--border-soft);
    color: var(--ink-muted);
}
.footer-bottom-bar a { color: var(--clay); }
.app-footer-enterprise .logo-text h2 { color: var(--ink); }
.app-footer-enterprise .logo-text p,
.app-footer-enterprise .footer-col p { color: var(--ink-muted); }
/* Body-copy floor: nothing readable drops below 14px. The original footer ran
   at 0.68–0.82rem (10.9–13.1px), which is below the accessibility floor. */
.app-footer-enterprise,
.app-footer-enterprise .footer-links a,
.app-footer-enterprise .footer-col p,
.app-footer-enterprise .logo-text p,
.footer-bottom-bar,
.footer-bottom-bar p { font-size: var(--fs-xs); }
.f-badge { font-size: var(--fs-xs); }
.badge-tag { font-size: 0.8rem; }
.logo-text p { font-size: var(--fs-xs); }
/* Footer link lists are stacked navigation, not prose, so they take the 44px
   target at every width — the base stylesheet only did this below 768px.
   Links inline inside a sentence keep their natural line box (WCAG 2.5.8
   inline exception); forcing 44px there would break the paragraph. */
.app-footer-enterprise .footer-links a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}
.app-footer-enterprise .footer-col p strong { color: var(--ink-2); }
.app-footer-enterprise .logo-badge { background: var(--surface-dark); }

/* 44px minimum on every header control, at all widths — the base stylesheet
   only enforced this below 768px, leaving 31–33px targets on desktop. */
.mode-btn,
.tab-btn,
.header-actions .btn { min-height: 44px; }

/* Focus is visible on every interactive element, on both surfaces. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--clay);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

/* --- §3. Legacy compatibility shim — RETIRED ---------------------------
   All fourteen tab sections have been migrated to the warm editorial system,
   so the obsidian fallback that kept unmigrated tabs legible is no longer
   needed and has been removed. If a new tab is ever added with light-on-dark
   components, reinstate a scoped block here rather than reintroducing a
   global dark theme. */

/* --- §4. Shared editorial components (.ed-*) ----------------------------
   Built for the Landing page and reused by every page as it is migrated.
   Nothing in here is landing-specific: the only #landing-page-scoped rules
   are the reward-block overrides at the end of this section. */
.ed {
    /* 60ch is the editorial measure: shorter than an article, which is what
       makes the page read as a product rather than a document. Promoted from
       .ed-home after the homepage pass. Reaches only the migrated pages. */
    --measure: 60ch;
    max-width: var(--content-w);
    margin: 0 auto;
    color: var(--ink);
    font-size: var(--fs-sm);
}
.ed * { min-width: 0; }
.ed p { max-width: var(--measure); }
/* Inline links inside landing prose. Standalone navigational links use
   .ed-textlink instead, which carries its own 44px target. */
.ed p a,
.ed li a { color: var(--clay); text-decoration: underline; text-underline-offset: 3px; }
.ed p a:hover,
.ed li a:hover { color: var(--clay-deep); }
/* The base .btn carries no padding without a size modifier, and .btn-md lands
   at 40px; this is the floor so every editorial-page button meets 44px. */
.ed .btn { min-height: 44px; }

.ed-section {
    padding: var(--sp-6) 0;
    border-top: 1px solid var(--border-soft);
}
.ed-section:first-child,
.ed-section-plain { border-top: none; }
.ed-section > h2 {
    font-family: var(--font-heading);
    font-size: var(--fs-2xl);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin-bottom: var(--sp-2);
    max-width: 22ch;
}
.ed-lead {
    font-size: var(--fs-md);
    color: var(--ink-2);
    line-height: 1.65;
    margin-bottom: var(--sp-5);
}

/* Hero */
.ed-hero { padding: var(--sp-6) 0 var(--sp-5); }
.ed-eyebrow {
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--clay-deep);
    margin-bottom: var(--sp-3);
}
.ed-h1 {
    font-family: var(--font-heading);
    font-size: var(--fs-4xl);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--ink);
    max-width: 18ch;
    margin-bottom: var(--sp-3);
}
.ed-sub {
    font-size: var(--fs-md);
    line-height: 1.65;
    color: var(--ink-2);
    margin-bottom: var(--sp-4);
}
.ed-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    align-items: center;
    margin-bottom: var(--sp-3);
}
.ed-textlink {
    color: var(--clay);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    background: none;
    border: none;
    padding: 0.6rem 0;
    cursor: pointer;
    font-family: inherit;
    min-height: 44px;
}
.ed-textlink:hover { color: var(--clay-deep); }
.ed-disclosure {
    font-size: var(--fs-xs);
    line-height: 1.7;
    color: var(--ink-muted);
    max-width: var(--measure);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--border-soft);
}

/* Status strip */
.ed-status-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-4);
    background: var(--surface-card);
    border: 1px solid var(--border-mid);
    border-radius: var(--r-lg);
    padding: var(--sp-4);
    box-shadow: var(--shadow-card);
}
.ed-status-item .ed-status-label {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--ink);
    margin-bottom: var(--sp-1);
}
.ed-status-item p {
    font-size: var(--fs-xs);
    line-height: 1.55;
    color: var(--ink-muted);
    margin: 0;
}

/* Cards */
.ed-grid { display: grid; gap: var(--sp-4); }
.ed-grid-2 { grid-template-columns: repeat(2, 1fr); }
.ed-grid-3 { grid-template-columns: repeat(3, 1fr); }
.ed-grid-4 { grid-template-columns: repeat(4, 1fr); }

.ed-card {
    background: var(--surface-card);
    border: 1px solid var(--border-mid);
    border-radius: var(--r-lg);
    padding: var(--sp-4);
    box-shadow: var(--shadow-card);
}
.ed-card h3 {
    font-family: var(--font-heading);
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--ink);
    margin-bottom: var(--sp-2);
    line-height: 1.3;
}
.ed-card p {
    font-size: var(--fs-xs);
    line-height: 1.65;
    color: var(--ink-2);
    margin: 0;
}
.ed-card p + p { margin-top: var(--sp-2); }
.ed-card ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    font-size: var(--fs-xs);
    line-height: 1.6;
    color: var(--ink-2);
}
.ed-card li { display: flex; gap: var(--sp-2); align-items: flex-start; }
.ed-card li .ed-mark { color: var(--ink-faint); flex-shrink: 0; font-weight: 700; }
.ed-card li .ed-mark-yes { color: var(--clay); }
.ed-card-sub {
    display: block;
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--ink-muted);
    margin-top: calc(var(--sp-1) * -1);
    margin-bottom: var(--sp-3);
}
.ed-card-note {
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--border-soft);
    font-size: var(--fs-xs);
    line-height: 1.65;
    color: var(--ink-muted);
}
.ed-card-accent { border-left: 3px solid var(--clay); }

/* Numbered steps */
.ed-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-4);
    counter-reset: lpstep;
}
.ed-step { border-top: 2px solid var(--border-mid); padding-top: var(--sp-3); }
.ed-step-n {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--clay);
    letter-spacing: 0.06em;
    margin-bottom: var(--sp-2);
}
.ed-step h3 {
    font-family: var(--font-heading);
    font-size: var(--fs-sm);
    font-weight: 700;
    margin-bottom: var(--sp-2);
}
.ed-step p { font-size: var(--fs-xs); line-height: 1.65; color: var(--ink-2); margin: 0; }

/* Labels for proposed / illustrative / development content */
.ed-label {
    display: inline-block;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.2rem 0.5rem;
    border-radius: var(--r-sm);
    background: var(--clay-soft);
    color: var(--clay-deep);
    border: 1px solid var(--border-mid);
    margin-bottom: var(--sp-2);
}

/* Accordion / FAQ — one component, used for FAQs and for progressive
   disclosure of methodology detail. */
.ed-faq, .ed-accordion { border-top: 1px solid var(--border-soft); }
.ed-faq details, .ed-accordion details {
    border-bottom: 1px solid var(--border-soft);
    background: transparent;
}
.ed-faq summary, .ed-accordion summary {
    font-family: var(--font-heading);
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--ink);
    padding: var(--sp-3) 2.5rem var(--sp-3) 0;
    cursor: pointer;
    list-style: none;
    position: relative;
    min-height: 44px;
    display: flex;
    align-items: center;
}
.ed-faq summary::-webkit-details-marker, .ed-accordion summary::-webkit-details-marker { display: none; }
.ed-faq summary::after, .ed-accordion summary::after {
    content: "+";
    position: absolute;
    right: var(--sp-2);
    font-size: var(--fs-lg);
    color: var(--clay);
    font-weight: 400;
}
.ed-faq details[open] summary::after, .ed-accordion details[open] summary::after { content: "\2212"; }
.ed-faq details > div, .ed-accordion details > div {
    padding: 0 0 var(--sp-4);
    font-size: var(--fs-sm);
    line-height: 1.7;
    color: var(--ink-2);
    max-width: var(--measure);
}

/* Accordion variant: each row is a card rather than a ruled list. Used for the
   study-type catalogue, where each row carries structured detail. */
.ed-accordion-cards details {
    background: var(--surface-card);
    border: 1px solid var(--border-mid);
    border-bottom: 1px solid var(--border-mid);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-card);
    margin-bottom: var(--sp-2);
}
.ed-accordion-cards summary { padding: var(--sp-3) 3rem var(--sp-3) var(--sp-3); font-size: var(--fs-sm); }
.ed-accordion-cards summary::after { right: var(--sp-3); }
.ed-accordion-cards details > div { padding: 0 var(--sp-3) var(--sp-3); }
.ed-summary-tag {
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--ink-muted);
    margin-left: auto;
    padding-left: var(--sp-3);
    text-align: right;
}

/* Definition rows inside an accordion body */
.ed-deflist { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-2) var(--sp-4); }
.ed-deflist dt { font-weight: 700; color: var(--ink); font-size: var(--fs-xs); }
.ed-deflist dd { color: var(--ink-2); font-size: var(--fs-xs); line-height: 1.65; }

/* --- Expanded-content information panel ---------------------------------
   The shared treatment for every <details> body. An expanded answer must read
   as a briefing panel, never as a pasted block of prose.

   Markup is a definition list: <dl class="ed-panel"> with a <dt> label and a
   <dd> body per row. The label is real DOM text, so a screen reader announces
   "Important limitation" before reading the caveat — it is never a CSS
   ::before. Nothing here animates and nothing depends on JS.

   Authoring rules this component exists to hold:
     · max three sentences per paragraph;
     · lists are real <ul>/<ol>/<dl>, never comma-separated prose;
     · key terms carry a chip rather than bold;
     · every caveat goes in .ed-limit, visually separated;
     · no row runs past ~80 words before it must split. */
.ed-panel {
    display: grid;
    grid-template-columns: 148px 1fr;
    gap: 0;
    margin: 0;
    max-width: none;
}
.ed-panel > dt,
.ed-panel > dd {
    border-top: 1px solid var(--border-soft);
    padding: var(--sp-3) 0;
}
.ed-panel > dt {
    font-family: var(--font-heading);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-muted);
    padding-right: var(--sp-3);
}
.ed-panel > dd {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.7;
    color: var(--ink-2);
    max-width: 60ch;
    min-width: 0;
    /* Grid children default to min-width:auto, so a long unbroken list item can
       push the track — and the document — wider than the viewport. */
    overflow-wrap: anywhere;
}
.ed-panel > dt:first-of-type,
.ed-panel > dt:first-of-type + dd { border-top: none; padding-top: 0; }
.ed-panel > dd > p { margin-bottom: var(--sp-2); max-width: none; }
.ed-panel > dd > p:last-child { margin-bottom: 0; }
.ed-panel > dd > ul,
.ed-panel > dd > ol {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin: 0;
}
.ed-panel > dd > ul > li,
.ed-panel > dd > ol > li { display: flex; gap: var(--sp-2); align-items: baseline; }
.ed-panel > dd > ul > li::before {
    content: "\2014";
    color: var(--ink-faint);
    flex-shrink: 0;
}
.ed-panel > dd > ol { counter-reset: edpanelstep; }
.ed-panel > dd > ol > li::before {
    counter-increment: edpanelstep;
    content: counter(edpanelstep);
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--clay);
    flex-shrink: 0;
    min-width: 1.1em;
}
.ed-panel a { color: var(--clay); }
/* A link that is the whole paragraph is a control, not prose, so it takes the
   44px target. Links inline within a sentence keep their line height — forcing
   44px there would break the leading, and the inline-in-text exception applies. */
.ed-panel p > a:only-child {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}
/* A chip inside a flex list item is a label, not prose: it must keep its own
   width rather than being squeezed until the word breaks. */
.ed-panel .ed-chip {
    margin-right: var(--sp-1);
    white-space: nowrap;
    flex-shrink: 0;
    overflow-wrap: normal;
}
/* Nested definition rows inside a panel body. */
.ed-panel .ed-deflist { margin: 0; gap: var(--sp-2) var(--sp-3); }
.ed-panel .ed-deflist dt { font-size: var(--fs-xs); color: var(--ink); white-space: nowrap; }
.ed-panel .ed-deflist dd { font-size: var(--fs-xs); color: var(--ink-muted); }

/* Caveats, exclusions and conditionals. Always its own block — never the
   trailing sentence of a paragraph, which is how they get skimmed past. */
.ed-limit {
    background: var(--amber-soft);
    border: 1px solid var(--amber);
    border-left: 3px solid var(--amber);
    border-radius: var(--r-md);
    padding: var(--sp-3);
    font-size: var(--fs-xs);
    line-height: 1.65;
    color: var(--ink-2);
    max-width: none;
}
.ed-limit strong { color: var(--ink); }
.ed-limit + .ed-limit { margin-top: var(--sp-2); }

/* =============================================================================
   SPECIMEN ANALYTICS — the deliverable walkthrough
   =============================================================================
   These components demonstrate analytical capability to a research buyer:
   what the output looks like, how it is read, and what discipline sits behind
   it. Everything is inline SVG or CSS, so it renders with JavaScript disabled.

   NON-NEGOTIABLE: every value here is a placeholder. No chart, table or
   recommendation in this block describes a real study, and each carries a
   persistent illustrative marker. Bar lengths and plotted positions are
   layout values chosen to demonstrate a shape — they are not measurements.
   Never substitute a real number unless it comes from a delivered, verified
   study, and never remove the illustrative marking.
   ========================================================================== */

.ed-report {
    background: var(--surface-card);
    border: 1px solid var(--border-mid);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-card);
    padding: var(--sp-4);
    min-width: 0;
}
.ed-report-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-2);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--border-soft);
    margin-bottom: var(--sp-4);
}
.ed-report-head h3 {
    font-family: var(--font-heading);
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--ink);
    margin: 0;
}
.ed-report-head .ed-card-sub { margin: 0; }
.ed-figure { margin: 0 0 var(--sp-4); min-width: 0; }
.ed-figure:last-child { margin-bottom: 0; }
.ed-figure-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sp-2);
    font-family: var(--font-heading);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: var(--sp-3);
}
.ed-figure-note {
    font-size: var(--fs-xs);
    line-height: 1.6;
    color: var(--ink-muted);
    margin-top: var(--sp-2);
    max-width: 60ch;
}

/* --- Horizontal bar set. A labelled row per item; the fill width is data,
   which is why it is set inline. Reads as label → value in DOM order. --- */
.ed-barset { display: flex; flex-direction: column; gap: var(--sp-2); }
.ed-bar {
    display: grid;
    grid-template-columns: minmax(84px, 118px) 1fr 56px;
    gap: var(--sp-3);
    align-items: center;
    min-width: 0;
}
.ed-bar-label { font-size: var(--fs-xs); color: var(--ink); font-weight: 600; min-width: 0; }
.ed-bar-track {
    height: 22px;
    background: var(--surface-sunk);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-sm);
    overflow: hidden;
    min-width: 0;
}
.ed-bar-fill { display: block; height: 100%; background: var(--clay); opacity: 0.85; }
.ed-bar-fill.is-sage { background: var(--sage); }
.ed-bar-fill.is-amber { background: var(--amber); }
.ed-bar-fill.is-grey { background: var(--ink-faint); }
.ed-bar-val {
    font-family: var(--font-heading);
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--ink-muted);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* --- Quadrant plot. SVG scales with the container and never overflows. --- */
/* Capped so the SVG scales down on narrow screens but does not balloon on a
   wide one — an unconstrained viewBox would render the 10px plot labels at
   roughly double size and dwarf the surrounding figures. */
.ed-quad { width: 100%; max-width: 620px; height: auto; display: block; }
.ed-quad-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-4);
    margin-top: var(--sp-3);
    font-size: var(--fs-xs);
    color: var(--ink-2);
}
.ed-quad-legend > span { display: flex; align-items: center; gap: var(--sp-2); }
.ed-quad-legend i {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--clay); flex-shrink: 0;
}
.ed-quad-legend i.is-sage { background: var(--sage); }
.ed-quad-legend i.is-amber { background: var(--amber); }
.ed-quad-legend i.is-grey { background: var(--ink-faint); }

/* --- Cross-tab. Suppressed cells are the point: they show the minimum
   cell-size discipline rather than just asserting it. --- */
.ed-xtab-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ed-xtab {
    border-collapse: collapse;
    width: 100%;
    min-width: 420px;
    font-size: var(--fs-xs);
}
.ed-xtab th, .ed-xtab td {
    padding: 0.5rem 0.65rem;
    border-bottom: 1px solid var(--border-soft);
    text-align: left;
    color: var(--ink-2);
}
.ed-xtab thead th {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--ink-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: var(--fs-xs);
    border-bottom: 1px solid var(--border-mid);
    white-space: nowrap;
}
.ed-xtab tbody th { font-weight: 600; color: var(--ink); white-space: nowrap; }
.ed-xtab td { font-variant-numeric: tabular-nums; }
.ed-xtab .is-suppressed { color: var(--ink-faint); font-style: italic; background: var(--surface-sunk); }
.ed-xtab tr:last-child th, .ed-xtab tr:last-child td { border-bottom: none; }

/* --- Margin-of-error scale --- */
.ed-moe { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.ed-moe-scale {
    position: relative;
    flex: 1 1 220px;
    height: 34px;
    min-width: 0;
    background: var(--surface-sunk);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-sm);
}
.ed-moe-band {
    position: absolute;
    top: 6px; bottom: 6px;
    background: var(--clay-soft);
    border-left: 2px solid var(--clay);
    border-right: 2px solid var(--clay);
}
.ed-moe-point {
    position: absolute;
    top: 50%;
    width: 9px; height: 9px;
    margin: -4.5px 0 0 -4.5px;
    border-radius: 50%;
    background: var(--clay);
}

/* --- Recommendation card — the thing a buyer actually pays for --- */
.ed-reco {
    background: var(--surface-sunk);
    border: 1px solid var(--border-mid);
    border-left: 3px solid var(--sage);
    border-radius: var(--r-md);
    padding: var(--sp-3);
    margin-top: var(--sp-3);
}
.ed-reco-head {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    align-items: center;
    margin-bottom: var(--sp-2);
}
.ed-reco h4 {
    font-family: var(--font-heading);
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--ink);
    margin: 0;
}
.ed-reco p { font-size: var(--fs-xs); line-height: 1.65; color: var(--ink-2); margin: 0 0 var(--sp-2); max-width: 60ch; }
.ed-reco p:last-child { margin-bottom: 0; }
.ed-reco dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-1) var(--sp-3); margin: 0; font-size: var(--fs-xs); }
.ed-reco dt { font-weight: 700; color: var(--ink); }
.ed-reco dd { margin: 0; color: var(--ink-muted); }

/* --- Deliverable anatomy: what is in the pack --- */
.ed-docmap { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.ed-docmap > li {
    list-style: none;
    background: var(--surface-card);
    border: 1px solid var(--border-mid);
    border-radius: var(--r-md);
    padding: var(--sp-3);
    min-width: 0;
}
.ed-docmap .n {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--clay);
    letter-spacing: 0.06em;
    margin-bottom: var(--sp-1);
}
.ed-docmap b { display: block; font-family: var(--font-heading); font-size: var(--fs-sm); color: var(--ink); margin-bottom: 2px; }
.ed-docmap span.d { font-size: var(--fs-xs); line-height: 1.5; color: var(--ink-muted); }

/* --- §4d. Trace highlight ------------------------------------------------
   The generalised form of the approved reward-flow animation: an additive
   ring that travels a sequence, so the order of a process is shown rather
   than implied. It animates box-shadow ONLY — never opacity, size, position
   or content — so every step stays fully readable at all times, including
   with JS blocked, under reduced motion, and in a backgrounded tab.
   Runs once per group. Never loops. */
.ed-trace-armed.is-playing [data-ed-trace] {
    animation: edFlowTrace 0.75s ease-out both;
}
.ed-trace-armed.is-playing [data-ed-trace="1"] { animation-delay: 0.15s; }
.ed-trace-armed.is-playing [data-ed-trace="2"] { animation-delay: 0.75s; }
.ed-trace-armed.is-playing [data-ed-trace="3"] { animation-delay: 1.35s; }
.ed-trace-armed.is-playing [data-ed-trace="4"] { animation-delay: 1.95s; }
@media (prefers-reduced-motion: reduce) {
    .ed-trace-armed.is-playing [data-ed-trace] { animation: none; box-shadow: none; }
}

/* =============================================================================
   PRICING COMPONENTS
   =============================================================================
   Published rates are a commercial decision and may stay on the page. What may
   NOT appear here is a performance claim dressed as a plan feature: delivery
   speed, retention, payout timing, or access to a panel that does not exist.
   The development-stage notice at the top of the page is load-bearing — pricing
   must not read as live commerce while registration is a waitlist and payouts
   run against a provider's test environment.
   ========================================================================== */

.ed-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); align-items: start; }
.ed-plan {
    position: relative;
    background: var(--surface-card);
    border: 1px solid var(--border-mid);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-card);
    padding: var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    min-width: 0;
}
.ed-plan.is-featured { border-color: var(--clay); border-width: 1px; box-shadow: 0 1px 3px rgba(28,27,24,.07), 0 0 0 1px var(--clay); }
.ed-plan-tag {
    position: absolute;
    top: calc(var(--sp-2) * -1);
    left: var(--sp-4);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--clay);
    color: #fff;
    padding: 0.2rem 0.55rem;
    border-radius: var(--r-sm);
}
.ed-plan h3 {
    font-family: var(--font-heading);
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--ink);
    margin: 0;
}
.ed-plan-for { font-size: var(--fs-xs); color: var(--ink-muted); margin: 0; }
.ed-plan-price {
    font-family: var(--font-heading);
    font-size: var(--fs-2xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.ed-plan-price span { font-size: var(--fs-xs); font-weight: 500; color: var(--ink-muted); letter-spacing: 0; }
.ed-plan dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-2) var(--sp-3); margin: 0; font-size: var(--fs-xs); }
.ed-plan dt { font-weight: 700; color: var(--ink-muted); white-space: nowrap; }
.ed-plan dd { margin: 0; color: var(--ink-2); line-height: 1.5; }
.ed-plan .btn { margin-top: auto; }

/* Credit packs — a smaller, quieter card than a subscription plan. */
.ed-packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.ed-pack {
    background: var(--surface-sunk);
    border: 1px solid var(--border-mid);
    border-radius: var(--r-md);
    padding: var(--sp-3);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    min-width: 0;
}
.ed-pack-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; }
.ed-pack h4 { font-family: var(--font-heading); font-size: var(--fs-sm); font-weight: 700; color: var(--ink); margin: 0; }
.ed-pack-price {
    font-family: var(--font-heading);
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.ed-pack-price span { display: block; font-size: var(--fs-xs); font-weight: 500; color: var(--ink-muted); }
.ed-pack p { font-size: var(--fs-xs); line-height: 1.5; color: var(--ink-muted); margin: 0; }

/* Estimator. The range input, its three ids and the oninput handler are
   preserved exactly — app.js:160 updateCalculator() writes to #calc-n-val and
   #calc-client-pays. Restyled only. */
.ed-estimator { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); align-items: center; }
.ed-estimator label {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--ink);
    margin-bottom: var(--sp-3);
}
.ed-range { width: 100%; min-height: 44px; accent-color: var(--clay); }
.ed-range-scale {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sp-2);
    font-size: var(--fs-xs);
    color: var(--ink-muted);
    margin-top: var(--sp-2);
}
.ed-range-scale strong {
    font-family: var(--font-heading);
    font-size: var(--fs-md);
    color: var(--clay-deep);
    font-variant-numeric: tabular-nums;
}
.ed-estimate {
    background: var(--surface-sunk);
    border: 1px solid var(--border-mid);
    border-radius: var(--r-md);
    padding: var(--sp-4);
    min-width: 0;
}
.ed-estimate dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-2) var(--sp-3); margin: 0; font-size: var(--fs-xs); }
.ed-estimate dt { color: var(--ink-muted); white-space: nowrap; }
.ed-estimate dd { margin: 0; color: var(--ink); text-align: right; }
.ed-estimate-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--border-mid);
}
.ed-estimate-total span { font-size: var(--fs-xs); color: var(--ink-muted); }
.ed-estimate-total strong {
    font-family: var(--font-heading);
    font-size: var(--fs-2xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

/* Cost anatomy — what the rate covers. Three named components, deliberately
   without proportions: a split would assert unit economics we do not publish. */
.ed-anatomy { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.ed-anatomy > li {
    list-style: none;
    background: var(--surface-card);
    border: 1px solid var(--border-mid);
    border-top: 3px solid var(--clay);
    border-radius: var(--r-md);
    padding: var(--sp-3);
    min-width: 0;
}
.ed-anatomy > li:nth-child(2) { border-top-color: var(--sage); }
.ed-anatomy > li:nth-child(3) { border-top-color: var(--amber); }
.ed-anatomy b { display: block; font-family: var(--font-heading); font-size: var(--fs-sm); color: var(--ink); margin-bottom: var(--sp-1); }
.ed-anatomy span.d { font-size: var(--fs-xs); line-height: 1.55; color: var(--ink-muted); }

/* Accented band — the Founding Partner offer. */
.ed-offer {
    background: var(--clay-soft);
    border: 1px solid var(--clay);
    border-radius: var(--r-lg);
    padding: var(--sp-5);
    margin: var(--sp-4) 0;
}
.ed-offer > h2 { margin-top: var(--sp-3); }

/* --- Interest-registration form ------------------------------------------
   Used on the panel roadmap. The submit handler and required email field are
   preserved from the original markup; this only restyles them. */
.ed-signup { margin-top: auto; }
.ed-signup label {
    display: block;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--ink-2);
    margin-bottom: var(--sp-2);
}
.ed-signup-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.ed-signup input[type="email"] {
    flex: 1 1 180px;
    min-width: 0;
    min-height: 44px;
    padding: 0 0.75rem;
    font-family: inherit;
    font-size: var(--fs-xs);
    color: var(--ink);
    background: var(--surface-card);
    border: 1px solid var(--border-mid);
    border-radius: var(--r-md);
}
.ed-signup input[type="email"]::placeholder { color: var(--ink-faint); }
.ed-signup input[type="email"]:focus-visible { outline: 2px solid var(--clay); outline-offset: 1px; }
.ed-signup .btn { flex: 0 0 auto; }

/* Panel status card — the one panel in development gets more room than the
   roadmap entries, because it is the only one that exists. */
.ed-panelcard {
    background: var(--surface-card);
    border: 1px solid var(--border-mid);
    border-left: 3px solid var(--sage);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-card);
    padding: var(--sp-5);
}
.ed-panelcard-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2) var(--sp-3);
    margin-bottom: var(--sp-3);
}
.ed-panelcard-head h3 {
    font-family: var(--font-heading);
    font-size: var(--fs-xl);
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin: 0;
}
.ed-roadmap-card {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    background: var(--surface-card);
    border: 1px solid var(--border-mid);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-card);
    padding: var(--sp-4);
    min-width: 0;
}
.ed-roadmap-card h3 {
    font-family: var(--font-heading);
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--ink);
    margin: 0;
}
.ed-roadmap-card > p { font-size: var(--fs-xs); line-height: 1.6; color: var(--ink-muted); margin: 0; }

/* --- Client portal preview ------------------------------------------------
   Two-column configurator + output. Element ids and types are dictated by
   app.js — see the comment in the markup. This is styling only. */
.ed-portal { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.ed-portal-config, .ed-portal-output { min-width: 0; }
.ed-field { margin-bottom: var(--sp-3); }
.ed-field label {
    display: block;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--ink-2);
    margin-bottom: var(--sp-1);
}
.ed-field .form-control {
    width: 100%;
    min-height: 44px;
    padding: 0 0.75rem;
    font-family: inherit;
    font-size: var(--fs-xs);
    color: var(--ink);
    background: var(--surface-card);
    border: 1px solid var(--border-mid);
    border-radius: var(--r-md);
}
.ed-field select.form-control { padding-right: 2rem; }
.ed-field .form-control[readonly] { background: var(--surface-sunk); color: var(--ink-muted); }
.ed-field .form-control:focus-visible { outline: 2px solid var(--clay); outline-offset: 1px; }
.ed-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.ed-chartgrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.ed-chartbox {
    background: var(--surface-sunk);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-md);
    padding: var(--sp-3);
    min-width: 0;
}
.ed-chartbox h4 {
    font-family: var(--font-heading);
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--ink-2);
    margin-bottom: var(--sp-2);
}
.ed-chartbox .chart-wrapper { height: 180px; position: relative; }

/* Specimen frame — illustrative output that must never read as a finding. */
.ed-specimen {
    background: var(--surface-sunk);
    border: 1px dashed var(--border-mid);
    border-radius: var(--r-md);
    padding: var(--sp-3);
    font-size: var(--fs-xs);
    line-height: 1.7;
    color: var(--ink-2);
    font-style: italic;
    margin: var(--sp-3) 0;
    max-width: none;
}

/* Standards / neutrality callout — quieter than the amber status notice */
.ed-callout {
    background: var(--surface-sunk);
    border: 1px solid var(--border-mid);
    border-left: 3px solid var(--clay);
    border-radius: var(--r-md);
    padding: var(--sp-4);
    font-size: var(--fs-xs);
    line-height: 1.7;
    color: var(--ink-2);
    max-width: none;
}
.ed-callout h3 {
    font-family: var(--font-heading);
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--ink);
    margin-bottom: var(--sp-2);
}
.ed-callout ul { list-style: none; display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-2); }
.ed-callout li { display: flex; gap: var(--sp-2); }
.ed-callout li::before { content: "\2014"; color: var(--ink-faint); flex-shrink: 0; }

/* Illustrative excerpt — must read as a specimen, never as a finding */
.ed-excerpt {
    background: var(--surface-sunk);
    border: 1px dashed var(--border-mid);
    border-radius: var(--r-md);
    padding: var(--sp-3);
    font-size: var(--fs-xs);
    line-height: 1.7;
    color: var(--ink-2);
    font-style: italic;
    margin: var(--sp-3) 0;
    max-width: none;
}

/* Checklist */
.ed-checklist { list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); }
.ed-checklist li { display: flex; gap: var(--sp-2); font-size: var(--fs-xs); line-height: 1.65; color: var(--ink-2); }
.ed-checklist li::before { content: "\2713"; color: var(--clay); font-weight: 700; flex-shrink: 0; }
.ed-checklist strong { color: var(--ink); }

/* Closing CTA band */
.ed-cta-band {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-4);
    background: var(--surface-card);
    border: 1px solid var(--border-mid);
    border-radius: var(--r-lg);
    padding: var(--sp-5);
    box-shadow: var(--shadow-card);
}
.ed-cta-band h3 {
    font-family: var(--font-heading);
    font-size: var(--fs-lg);
    font-weight: 700;
    margin-bottom: var(--sp-2);
}
.ed-cta-band p {
    font-size: var(--fs-xs);
    line-height: 1.65;
    color: var(--ink-2);
    margin-bottom: var(--sp-3);
}

/* Development-status notice — sits above the footer, not as a dismissible banner */
.ed-status-notice {
    margin: var(--sp-6) 0 var(--sp-5);
    padding: var(--sp-4);
    background: var(--note-amber);
    border: 1px solid var(--note-amber-line);
    border-left: 4px solid var(--note-amber-line);
    border-radius: var(--r-md);
    font-size: var(--fs-xs);
    line-height: 1.7;
    color: var(--ink-2);
    max-width: none;
}
.ed-status-notice strong { color: var(--ink); }

/* Reward transparency block, re-skinned in place (markup and copy unchanged) */
#landing-page .reward-transparency-block {
    background: var(--surface-card);
    border: 1px solid var(--border-mid);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-card);
    backdrop-filter: none;
    max-width: none;
    margin: 0;
    padding: var(--sp-5);
}
#landing-page .reward-transparency-block h2 {
    font-size: var(--fs-2xl);
    font-weight: 700;
    color: var(--ink);
}
#landing-page .reward-transparency-lead { color: var(--ink-2); font-size: var(--fs-md); }
#landing-page .reward-step-card {
    background: var(--surface-sunk);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-md);
    padding: var(--sp-3);
}
#landing-page .reward-step-card h3 {
    color: var(--ink);
    font-size: var(--fs-sm);
    font-weight: 700;
}
#landing-page .reward-step-card p { color: var(--ink-2); font-size: var(--fs-xs); }
#landing-page .reward-transparency-note {
    border-top: 1px solid var(--border-soft);
    color: var(--ink-muted);
    font-size: var(--fs-xs);
    max-width: var(--measure);
}
#landing-page .reward-transparency-note a { color: var(--clay); }
#landing-page .grid-layout { gap: var(--sp-3); }

/* =============================================================================
   §4b. HOMEPAGE VISUAL LAYER (.ed-home)
   =============================================================================
   The homepage carried 1,768 visible words across nine identically shaped
   prose sections. These components carry the same information as diagrams,
   rails and chips so the page is understood by scanning rather than reading.

   Rules that hold here:
     · every diagram is a semantic <ol>/<ul> with real text — connectors and
       glyphs are CSS or aria-hidden, never the sole carrier of meaning;
     · nothing is hover-only: chip detail lives in a visually hidden span;
     · all disclosure is native <details>, working with JS disabled;
     · the measure is tightened to 60ch here only, so #how-it-works is
       untouched until its own density pass.
   ========================================================================== */

.ed-home .ed-section > h2 { max-width: 20ch; }
.ed-home .ed-card p,
.ed-home .ed-tile p { max-width: 34ch; }
.ed-home .ed-section { padding: var(--sp-6) 0; }
.ed-mt { margin-top: var(--sp-4); }
.ed-more { margin-top: var(--sp-3); }

/* Screen-reader-only text. Used to keep a chip's full original sentence in the
   accessibility tree while the chip itself shows three words. */
.ed-sr {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.ed-minilabel {
    font-family: var(--font-heading);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: var(--sp-3);
}

/* --- Hero ---------------------------------------------------------------- */
.ed-hero-split {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: var(--sp-6);
    align-items: center;
}
.ed-home .ed-h1 { max-width: 15ch; }
.ed-home .ed-sub { font-size: var(--fs-lg); max-width: 34ch; }

.ed-flowcard {
    background: var(--surface-card);
    border: 1px solid var(--border-mid);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-card);
    padding: var(--sp-4);
}
.ed-flow-steps { list-style: none; display: flex; flex-direction: column; gap: 0; }
.ed-flow-steps li {
    background: var(--surface-sunk);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-md);
    padding: var(--sp-3);
}
.ed-flow-steps li.is-output { background: var(--sage-soft); border-color: var(--sage); }
.ed-flow-steps li b {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--ink);
}
.ed-flow-steps li span { display: block; font-size: var(--fs-xs); color: var(--ink-muted); margin-top: 2px; }
/* The connector is drawn between items, so it never runs past the last one. */
.ed-flow-steps li + li { margin-top: 1.75rem; position: relative; }
.ed-flow-steps li + li::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -1.75rem;
    height: 1.75rem;
    width: 1.5px;
    background: var(--border-mid);
}
.ed-flow-steps li + li::after {
    content: "";
    position: absolute;
    left: 50%;
    top: -0.5rem;
    width: 6px; height: 6px;
    border-right: 1.5px solid var(--border-mid);
    border-bottom: 1.5px solid var(--border-mid);
    transform: translateX(-50%) rotate(45deg);
}

/* --- Chips --------------------------------------------------------------- */
.ed-statuschips,
.ed-chipgrid {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin: 0;
}
.ed-statuschips { margin-bottom: var(--sp-2); }
.ed-chip {
    display: inline-flex;
    align-items: center;
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink-2);
    background: var(--surface-card);
    border: 1px solid var(--border-mid);
    border-radius: 999px;
    padding: 0.5rem 0.85rem;
    min-height: 36px;
}
.ed-chip.is-clay { background: var(--clay-soft); border-color: var(--clay); color: var(--clay-deep); }
.ed-chip.is-sage { background: var(--sage-soft); border-color: var(--sage); color: var(--sage-deep); }
.ed-chip.is-amber { background: var(--amber-soft); border-color: var(--amber); color: var(--amber); }
.ed-conditions { margin-top: var(--sp-4); }

/* --- Tiles --------------------------------------------------------------- */
.ed-tilegrid { display: grid; gap: var(--sp-3); }
.ed-tilegrid-2 { grid-template-columns: repeat(2, 1fr); }
.ed-tilegrid-3 { grid-template-columns: repeat(3, 1fr); }
.ed-tilegrid-4 { grid-template-columns: repeat(4, 1fr); }
.ed-tile {
    background: var(--surface-card);
    border: 1px solid var(--border-mid);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-card);
    padding: var(--sp-4);
    min-width: 0;
}
.ed-tile-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border-radius: var(--r-md);
    background: var(--clay-soft);
    border: 1px solid var(--border-soft);
    color: var(--clay);
    font-size: 0.95rem;
    margin-bottom: var(--sp-3);
}
.ed-tile.is-sage .ed-tile-ico,
.ed-tile.is-check .ed-tile-ico { background: var(--sage-soft); color: var(--sage); }
.ed-tile h3 {
    font-family: var(--font-heading);
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--ink);
    line-height: 1.25;
    margin-bottom: var(--sp-1);
}
.ed-tile p { font-size: var(--fs-xs); line-height: 1.55; color: var(--ink-muted); margin: 0; }

/* --- Value proposition --------------------------------------------------- */
.ed-vp-pair {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--sp-4);
    align-items: center;
}
.ed-vp-link { color: var(--clay); font-size: var(--fs-xl); text-align: center; }
.ed-matrix-title { margin-top: var(--sp-5); }
.ed-matrix { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
.ed-matrix-col ul { list-style: none; margin-top: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); }
.ed-matrix-col li {
    font-size: var(--fs-xs);
    line-height: 1.5;
    color: var(--ink-muted);
    padding-left: 1.25rem;
    position: relative;
}
.ed-matrix-col li::before {
    content: "\2014";
    position: absolute;
    left: 0;
    color: var(--ink-faint);
}
.ed-matrix-col.is-ours li { color: var(--ink-2); }
.ed-matrix-col.is-ours li::before { content: "\2713"; color: var(--clay); font-weight: 700; }

/* --- Process rail -------------------------------------------------------- */
.ed-rail {
    list-style: none;
    display: grid;
    gap: var(--sp-3);
    margin: 0;
    counter-reset: edrail;
}
.ed-rail-5 { grid-template-columns: repeat(5, 1fr); }
.ed-rail-4 { grid-template-columns: repeat(4, 1fr); }
/* Six-up is the homepage summary of the six-stage journey whose full
   walkthrough lives on How It Works. It collapses to one column with the
   others below. */
.ed-rail-6 { grid-template-columns: repeat(6, 1fr); }
.ed-rail-item { position: relative; min-width: 0; padding-right: var(--sp-3); }
.ed-rail-node {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--surface-card);
    border: 1.5px solid var(--clay);
    color: var(--clay);
    font-family: var(--font-heading);
    font-size: var(--fs-xs);
    font-weight: 700;
    position: relative;
    z-index: 1;
}
.ed-rail-item.is-output .ed-rail-node {
    border-color: var(--sage);
    color: var(--sage-deep);
    background: var(--sage-soft);
}
/* Connector sits on the item, suppressed on the last, so it cannot overrun. */
.ed-rail-item::after {
    content: "";
    position: absolute;
    top: 14px;
    left: 30px;
    right: 0;
    height: 1.5px;
    background: var(--border-mid);
}
.ed-rail-item:last-child::after { display: none; }
.ed-rail-label {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--ink);
    line-height: 1.3;
    margin-top: var(--sp-3);
}
.ed-rail-cap {
    display: block;
    font-size: var(--fs-xs);
    line-height: 1.5;
    color: var(--ink-muted);
    margin-top: var(--sp-1);
    padding-right: var(--sp-2);
}

/* Detached gate — a rule whose position on screen is the point. Kept in normal
   flow as a visible paragraph; never a tooltip, never inside a <details>. */
.ed-gate {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
    margin-top: var(--sp-4);
    padding: var(--sp-3);
    background: var(--surface-sunk);
    border: 1px dashed var(--border-mid);
    border-radius: var(--r-md);
}
.ed-gate p { font-size: var(--fs-xs); line-height: 1.6; color: var(--ink-2); margin: 0; max-width: 60ch; }

/* --- Reward state flow --------------------------------------------------- */
.ed-flow { display: flex; flex-direction: column; gap: var(--sp-3); }
.ed-flow-lane { display: grid; grid-template-columns: 76px 1fr; gap: var(--sp-3); align-items: center; }
.ed-flow-lane-label {
    font-family: var(--font-heading);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-muted);
}
.ed-flow-track {
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin: 0;
    min-width: 0;
}
.ed-flow-node {
    position: relative;
    background: var(--surface-card);
    border: 1px solid var(--border-mid);
    border-radius: var(--r-md);
    padding: 0.6rem 0.85rem;
    min-width: 132px;
    text-align: center;
}
.ed-flow-node b {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--ink);
    line-height: 1.3;
}
.ed-flow-node span { display: block; font-size: var(--fs-xs); color: var(--ink-muted); margin-top: 1px; }
.ed-flow-node.is-amber { background: var(--amber-soft); border-color: var(--amber); }
.ed-flow-node.is-sage { background: var(--sage-soft); border-color: var(--sage); }
.ed-flow-node.is-gate { background: var(--surface-sunk); border-style: dashed; }
.ed-flow-node.is-dead { border-style: dashed; opacity: 0.8; }
.ed-flow-node.is-wide { min-width: 264px; }
/* Arrow between nodes, drawn on the node itself and suppressed on the first,
   so the track needs no extra markup and no decorative elements. */
.ed-flow-node + .ed-flow-node::before,
.ed-flow-node + .ed-flow-end::before {
    content: "";
    position: absolute;
    left: calc(var(--sp-3) * -1);
    top: 50%;
    width: var(--sp-3);
    height: 1.5px;
    background: var(--border-mid);
}
.ed-flow-end { position: relative; display: flex; align-items: center; }
.ed-flow-lane:first-child .ed-flow-end::after {
    content: "\2298";
    position: absolute;
    left: calc(var(--sp-3) * -1 - 4px);
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-faint);
    font-size: 0.8rem;
    background: var(--surface-page);
    line-height: 1;
}
.ed-fineprint {
    font-size: var(--fs-xs);
    line-height: 1.65;
    color: var(--ink-muted);
    margin-top: var(--sp-3);
    max-width: 60ch;
}
.ed-fineprint a { color: var(--clay); }
.ed-lead-tight { margin-bottom: var(--sp-4); }

/* --- Tinted band --------------------------------------------------------- */
/* The only section allowed its own ground: a distinct research practice held
   to stricter neutrality rules than the commercial work around it. */
.ed-band {
    background: #eef2f0;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-lg);
    padding: var(--sp-5);
    margin: var(--sp-4) 0;
}
.ed-band > h2 { margin-top: var(--sp-3); }

/* --- §4c. Reward-flow animation ----------------------------------------
   The one approved homepage animation: a highlight travelling
   pending → review gate → eligible, so the sequence reads as a transition
   through a gate rather than three states that simply coexist.

   It animates ONLY an additive ring (box-shadow). It never changes opacity,
   size, position or content, so there is no state in which a node is hidden
   or unreadable — not with JS blocked, not under reduced motion, not in a
   backgrounded tab where animations do not advance. An earlier fade-in
   version was rejected for exactly that reason: a tab hidden mid-sequence
   held the nodes at opacity 0.

   ~2.4s total. Runs once. Never loops. */
.ed-flow-armed.is-playing .ed-flow-node[data-ed-step] {
    animation: edFlowTrace 0.75s ease-out both;
}
.ed-flow-armed.is-playing .ed-flow-node[data-ed-step="1"] { animation-delay: 0.15s; }
.ed-flow-armed.is-playing .ed-flow-node[data-ed-step="2"] { animation-delay: 0.9s; }
.ed-flow-armed.is-playing .ed-flow-node[data-ed-step="3"] { animation-delay: 1.65s; }
@keyframes edFlowTrace {
    0%   { box-shadow: 0 0 0 0 rgba(163, 78, 49, 0); }
    35%  { box-shadow: 0 0 0 5px rgba(163, 78, 49, 0.20); }
    100% { box-shadow: 0 0 0 0 rgba(163, 78, 49, 0); }
}
/* Reduced motion: no ring, no animation. The diagram is already complete. */
@media (prefers-reduced-motion: reduce) {
    .ed-flow-armed.is-playing .ed-flow-node[data-ed-step] {
        animation: none;
        box-shadow: none;
    }
}

/* --- §5. Editorial responsive ------------------------------------------- */
@media (max-width: 1024px) {
    .ed-grid-4,
    .ed-steps,
    .ed-status-strip { grid-template-columns: repeat(2, 1fr); }
    .ed-grid-3 { grid-template-columns: repeat(2, 1fr); }
    .ed-h1 { font-size: var(--fs-3xl); }
    /* The reward block keeps its original .grid-layout.cols-4 markup; the base
       stylesheet only collapses it at 768px, which is too tight at tablet width. */
    #landing-page .grid-layout.cols-4 { grid-template-columns: repeat(2, 1fr); }

    /* Homepage: rails go vertical below desktop so no stage is ever squeezed
       and nothing needs horizontal scrolling. The node moves into a left
       gutter and the connector runs down it. */
    .ed-hero-split { grid-template-columns: 1fr; gap: var(--sp-4); }
    .ed-home .ed-h1 { max-width: none; }
    .ed-tilegrid-4 { grid-template-columns: repeat(2, 1fr); }
    .ed-docmap { grid-template-columns: repeat(2, 1fr); }
    .ed-rail-5, .ed-rail-4, .ed-rail-6 { grid-template-columns: 1fr; gap: 0; padding-left: 2.75rem; }
    .ed-rail-item { padding: 0 0 var(--sp-4) 0; }
    .ed-rail-item:last-child { padding-bottom: 0; }
    .ed-rail-node { position: absolute; left: -2.75rem; top: 0; }
    .ed-rail-item::after {
        top: 32px;
        bottom: 0;
        left: -2.75rem;
        right: auto;
        height: auto;
        width: 1.5px;
        margin-left: 14px;
    }
    .ed-rail-label { margin-top: 0; }
    .ed-rail-cap { padding-right: 0; }
    /* Pricing: plans and estimator stack below desktop. */
    .ed-plans { grid-template-columns: 1fr; }
    .ed-packs { grid-template-columns: 1fr; }
    .ed-anatomy { grid-template-columns: 1fr; }
    .ed-estimator { grid-template-columns: 1fr; gap: var(--sp-4); }
    .ed-docmap { grid-template-columns: 1fr; }
    .ed-portal { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .ed-grid-2,
    .ed-grid-3,
    .ed-grid-4,
    .ed-steps,
    .ed-status-strip,
    .ed-cta-band { grid-template-columns: 1fr; }
    .ed-hero { padding: var(--sp-5) 0 var(--sp-4); }
    .ed-section { padding: var(--sp-5) 0; }
    .ed-h1 { font-size: var(--fs-2xl); max-width: none; }
    .ed-section > h2 { font-size: var(--fs-xl); max-width: none; }
    .ed-sub, .ed-lead { font-size: var(--fs-sm); }
    .ed-cta-row { flex-direction: column; align-items: stretch; }
    .ed-cta-row .btn { width: 100%; justify-content: center; text-align: center; }
    .ed-cta-band { padding: var(--sp-4); }
    #landing-page .reward-transparency-block { padding: var(--sp-4); }
    .ed-faq summary, .ed-accordion summary { font-size: var(--fs-sm); }
    /* Definition rows stack rather than squeezing the value column. */
    .ed-deflist { grid-template-columns: 1fr; gap: var(--sp-1); }
    .ed-deflist dd { margin-bottom: var(--sp-2); }
    /* The size chip drops under the question instead of competing with it. */
    .ed-accordion-cards summary { flex-wrap: wrap; padding-right: 2.5rem; }
    .ed-summary-tag { margin-left: 0; padding-left: 0; text-align: left; width: 100%; }

    /* Homepage mobile. Audience tiles hold at 2-up rather than 1-up: four
       one-line tiles read better paired than as a four-item column, and the
       three-card row limit is respected either way. */
    .ed-tilegrid-2,
    .ed-tilegrid-3 { grid-template-columns: 1fr; }
    .ed-tilegrid-4 { grid-template-columns: repeat(2, 1fr); }
    /* Chips are labels rather than controls, so the 44px target rule does not
       strictly bind — but at touch widths they sit among real controls, and a
       consistent hit-height avoids any ambiguity about what is tappable. */
    .ed-chip { min-height: 44px; }
    .ed-home .ed-sub { max-width: none; }
    .ed-band { padding: var(--sp-4); }
    /* Value proposition: the mirrored pair stacks and the connector turns down. */
    .ed-vp-pair { grid-template-columns: 1fr; gap: var(--sp-3); }
    .ed-vp-link { transform: rotate(90deg); }
    .ed-matrix { grid-template-columns: 1fr; gap: var(--sp-4); }
    /* Reward flow: each lane becomes a vertical stack, arrows turn down, and
       the lane label sits above its own track. Never scrolls sideways. */
    .ed-flow-lane { grid-template-columns: 1fr; gap: var(--sp-2); }
    .ed-flow-track { flex-direction: column; align-items: stretch; gap: 1.5rem; }
    .ed-flow-node, .ed-flow-node.is-wide { min-width: 0; width: 100%; }
    .ed-flow-node + .ed-flow-node::before,
    .ed-flow-node + .ed-flow-end::before {
        left: 50%;
        top: -1.5rem;
        width: 1.5px;
        height: 1.5rem;
    }
    .ed-flow-end { justify-content: center; }
    .ed-flow-lane:first-child .ed-flow-end::after {
        left: 50%;
        top: -0.85rem;
        transform: translateX(-50%);
    }
    .ed-flow-steps li + li { margin-top: 1.5rem; }

    /* Information panels stack: a 148px label column plus content does not fit
       at 375px, and the long list items inside a panel body then force the
       document wider than the viewport. The label sits above its own body. */
    .ed-panel { grid-template-columns: 1fr; }
    .ed-panel > dt {
        padding: var(--sp-3) 0 var(--sp-1) 0;
        border-top: 1px solid var(--border-soft);
    }
    .ed-panel > dd {
        padding: 0 0 var(--sp-3) 0;
        border-top: none;
        max-width: none;
    }
    .ed-panel > dt:first-of-type { padding-top: 0; }
    .ed-panel > dt:first-of-type + dd { padding-top: 0; }
    /* Nested definition rows inside a panel stack too. */
    .ed-panel .ed-deflist { grid-template-columns: 1fr; gap: var(--sp-1); }
    .ed-panel .ed-deflist dt { white-space: normal; }
    .ed-panel .ed-deflist dd { margin-bottom: var(--sp-2); }

    /* Specimen analytics on mobile. Bars keep their three columns but the
       label track narrows; the cross-tab scrolls inside its own box. */
    .ed-bar { grid-template-columns: minmax(64px, 88px) 1fr 46px; gap: var(--sp-2); }
    .ed-docmap { grid-template-columns: 1fr; }
    .ed-report { padding: var(--sp-3); }
    .ed-reco dl { grid-template-columns: 1fr; gap: 2px; }
    .ed-reco dd { margin-bottom: var(--sp-2); }
}

/* --- §6. Reduced motion -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* =============================================================================
   §7. INVESTOR / INTERNAL TABS
   =============================================================================
   These six tabs render most of their content from app.js data arrays, which
   inject the ORIGINAL component classes (.card.glass-card.feature-card,
   .pill-badge, .check/.cross). Rather than rewrite those templates and risk the
   renderers, the classes are re-skinned here, scoped to the migrated sections.
   If a renderer is ever rewritten to emit .ed-* classes directly, these scoped
   overrides can be deleted.
   ========================================================================== */

#competitors-tab .card,
#recruitment-gtm .card,
#ai-tech-tab .card,
#legal-expansion .card,
#financial-simulator .card,
#admin-supervisor-panel .card {
    background: var(--surface-card);
    border: 1px solid var(--border-mid);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-card);
    backdrop-filter: none;
    color: var(--ink-2);
}
#competitors-tab .card h3, #recruitment-gtm .card h3, #ai-tech-tab .card h3,
#legal-expansion .card h3, #financial-simulator .card h3, #admin-supervisor-panel .card h3,
#competitors-tab .card h4, #recruitment-gtm .card h4, #ai-tech-tab .card h4,
#legal-expansion .card h4, #financial-simulator .card h4, #admin-supervisor-panel .card h4 {
    font-family: var(--font-heading);
    color: var(--ink);
    font-weight: 700;
}
#competitors-tab .card p, #recruitment-gtm .card p, #ai-tech-tab .card p,
#legal-expansion .card p, #financial-simulator .card p, #admin-supervisor-panel .card p {
    color: var(--ink-2);
    font-size: var(--fs-xs);
    line-height: 1.6;
}
/* Injected icon tiles and badges */
#ai-tech-tab .f-icon, #recruitment-gtm .f-icon, #legal-expansion .f-icon {
    background: var(--clay-soft);
    color: var(--clay);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-md);
}
.ed-invest .pill-badge,
#competitors-tab .pill-badge, #recruitment-gtm .pill-badge, #ai-tech-tab .pill-badge,
#legal-expansion .pill-badge, #financial-simulator .pill-badge, #admin-supervisor-panel .pill-badge {
    background: var(--surface-sunk);
    border: 1px solid var(--border-mid);
    color: var(--ink-2);
    font-weight: 600;
}
#competitors-tab .check, #financial-simulator .check { color: var(--sage); }
#competitors-tab .cross, #financial-simulator .cross { color: var(--ink-faint); }

/* Data tables in the investor set */
#competitors-tab table, #financial-simulator table, #admin-supervisor-panel table {
    background: var(--surface-card);
    color: var(--ink-2);
    font-size: var(--fs-xs);
    border-collapse: collapse;
}
#competitors-tab th, #financial-simulator th, #admin-supervisor-panel th {
    font-family: var(--font-heading);
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-muted);
    background: var(--surface-sunk);
    border-bottom: 1px solid var(--border-mid);
    text-align: left;
    padding: 0.6rem 0.7rem;
    white-space: nowrap;
}
#competitors-tab td, #financial-simulator td, #admin-supervisor-panel td {
    border-bottom: 1px solid var(--border-soft);
    padding: 0.6rem 0.7rem;
    color: var(--ink-2);
}
#competitors-tab tbody tr:hover, #admin-supervisor-panel tbody tr:hover { background: var(--surface-sunk); }
#financial-simulator .financial-table td { font-variant-numeric: tabular-nums; }

/* Inputs inside the investor/admin set */
#competitors-tab .form-control, #admin-supervisor-panel .form-control,
#financial-simulator .form-control {
    background: var(--surface-card);
    border: 1px solid var(--border-mid);
    color: var(--ink);
    border-radius: var(--r-md);
    min-height: 44px;
    font-family: inherit;
    font-size: var(--fs-xs);
    padding: 0 0.75rem;
}
#competitors-tab .form-control::placeholder, #admin-supervisor-panel .form-control::placeholder { color: var(--ink-faint); }

/* Scenario toggle buttons on the financial simulator */
#financial-simulator .scenario-btn {
    background: var(--surface-card);
    border: 1px solid var(--border-mid);
    color: var(--ink-2);
    border-radius: 999px;
    padding: 0.5rem 1rem;
    min-height: 44px;
    font-weight: 600;
    font-size: var(--fs-xs);
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
#financial-simulator .scenario-btn:hover { background: var(--surface-sunk); }
#financial-simulator .scenario-btn.active {
    background: var(--clay);
    border-color: var(--clay);
    color: #fff;
}

/* --- §7b. Motion ---------------------------------------------------------
   Purposeful and additive only. Every effect animates transform, box-shadow or
   background — never opacity, size, position or content — so nothing is ever
   hidden mid-animation, nothing reflows, and every value stays readable with
   JS off, in a background tab, and under reduced motion. GPU-friendly
   properties only; no layout thrash. */

/* Card lift on hover/focus. Communicates "this is inspectable". */
.ed-invest .ed-card,
#ai-tech-tab .card,
#recruitment-gtm .card,
#legal-expansion .card {
    transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.18s ease;
    will-change: transform;
}
.ed-invest .ed-card:hover,
#ai-tech-tab .card:hover,
#recruitment-gtm .card:hover,
#legal-expansion .card:hover,
#ai-tech-tab .card:focus-within,
#recruitment-gtm .card:focus-within {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px -6px rgba(28, 27, 24, 0.18);
    border-color: var(--clay);
}

/* Rail node pulse — draws the eye along a sequence on entry. Ring only. */
@keyframes edNodePulse {
    0%   { box-shadow: 0 0 0 0 rgba(193, 96, 63, 0.34); }
    70%  { box-shadow: 0 0 0 9px rgba(193, 96, 63, 0); }
    100% { box-shadow: 0 0 0 0 rgba(193, 96, 63, 0); }
}
.ed-trace-armed.is-playing .ed-rail-item .ed-rail-node { animation: edNodePulse 0.9s ease-out both; }
.ed-trace-armed.is-playing .ed-rail-item:nth-child(1) .ed-rail-node { animation-delay: 0.10s; }
.ed-trace-armed.is-playing .ed-rail-item:nth-child(2) .ed-rail-node { animation-delay: 0.55s; }
.ed-trace-armed.is-playing .ed-rail-item:nth-child(3) .ed-rail-node { animation-delay: 1.00s; }
.ed-trace-armed.is-playing .ed-rail-item:nth-child(4) .ed-rail-node { animation-delay: 1.45s; }
.ed-trace-armed.is-playing .ed-rail-item:nth-child(5) .ed-rail-node { animation-delay: 1.90s; }

/* Filter feedback: a row that survives a search settles rather than blinks. */
@keyframes edRowSettle {
    from { background: var(--clay-soft); }
    to   { background: transparent; }
}
#comp-table-body tr.is-match { animation: edRowSettle 0.5s ease-out both; }

/* Live-region for filter results — announced, not just seen. */
.ed-filterbar { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; margin-bottom: var(--sp-3); }
.ed-filterbar .form-control { flex: 1 1 240px; min-width: 0; }
.ed-filtercount { font-size: var(--fs-xs); color: var(--ink-muted); font-variant-numeric: tabular-nums; }

/* Projection banner — every financial figure on this site is a model. */
.ed-projection {
    background: var(--amber-soft);
    border: 1px solid var(--amber);
    border-left: 4px solid var(--amber);
    border-radius: var(--r-md);
    padding: var(--sp-3);
    font-size: var(--fs-xs);
    line-height: 1.65;
    color: var(--ink-2);
    margin-bottom: var(--sp-4);
    max-width: none;
}
.ed-projection strong { color: var(--ink); }

/* Every motion in this file is additive; under reduced motion they simply do
   not run and the end state is already the rendered state. */
@media (prefers-reduced-motion: reduce) {
    .ed-invest .ed-card,
    #ai-tech-tab .card, #recruitment-gtm .card, #legal-expansion .card,
    #financial-simulator .scenario-btn {
        transition: none;
    }
    .ed-invest .ed-card:hover,
    #ai-tech-tab .card:hover, #recruitment-gtm .card:hover, #legal-expansion .card:hover {
        transform: none;
    }
    .ed-trace-armed.is-playing .ed-rail-item .ed-rail-node,
    #comp-table-body tr.is-match { animation: none; }
}

@media (max-width: 1024px) {
    #ai-tech-tab .grid-layout.cols-3, #recruitment-gtm .grid-layout.cols-4,
    #legal-expansion .grid-layout.cols-3 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 768px) {
    #competitors-tab .card, #recruitment-gtm .card, #ai-tech-tab .card,
    #legal-expansion .card, #financial-simulator .card, #admin-supervisor-panel .card { padding: var(--sp-3); }
    .ed-filterbar { flex-direction: column; align-items: stretch; }
}

/* Scenario toggle row: nowrap pushed the third button 6px past a 375px
   viewport. Wrapping is the fix — the buttons keep their natural width and
   stack onto a second line rather than widening the document. */
#financial-simulator .scenario-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    min-width: 0;
}
#financial-simulator .scenario-btn { flex: 0 1 auto; min-width: 0; }
@media (max-width: 480px) {
    #financial-simulator .scenario-btn { flex: 1 1 100%; text-align: center; }
}

/* =============================================================================
   §8. HEADER HEIGHT FIX
   =============================================================================
   The nav sat on the same flex line as the logo, the mode toggle and three
   action buttons. With 8 client tabs it wrapped to 3 rows; with all 14 unlocked
   in Investor Mode it wrapped to 5, making header + banner 358px — 40% of a
   900px viewport gone before any content. Reported as "the browser is only
   showing half the page", which is exactly what it looked like.

   Fix: give the nav its own full-width row and let it scroll horizontally
   instead of wrapping. Row one keeps logo, mode toggle and actions. No markup,
   no handler and no tab order changes — .nav-tabs already had the mobile
   scroll treatment, this extends it to every width.
   ========================================================================== */
.header-container { flex-wrap: wrap; row-gap: 0.6rem; }

.nav-tabs {
    order: 10;              /* forced onto its own line, after the actions */
    flex: 1 0 100%;
    /* Load-bearing: a flex item defaults to min-width:auto, so without this the
       track grows to fit all 14 tabs and widens the document instead of
       scrolling inside itself. */
    min-width: 0;
    max-width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 0.3rem;
    /* Fade the right edge so it reads as scrollable rather than truncated. */
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent 100%);
}
.nav-tabs::-webkit-scrollbar { height: 6px; }
.nav-tabs::-webkit-scrollbar-thumb { background: var(--border-mid); border-radius: 3px; }
.nav-tabs::-webkit-scrollbar-track { background: transparent; }
.tab-btn { flex: 0 0 auto; white-space: nowrap; }
/* The mask would clip the focus ring on the last tab, so drop it while a tab
   inside has keyboard focus. */
.nav-tabs:focus-within { -webkit-mask-image: none; mask-image: none; }

.logo-area { flex: 0 1 auto; }
.view-mode-toggle { flex: 0 0 auto; }
.header-actions { flex: 0 0 auto; margin-left: auto; }

@media (max-width: 768px) {
    /* Mobile already stacked the header; keep the nav on its own row there too
       and drop the mask, which reads oddly on a narrow screen. */
    .nav-tabs {
        order: 10;
        -webkit-mask-image: none;
        mask-image: none;
    }
    .header-actions { margin-left: 0; }
}

/* =============================================================================
   §9. MODALS
   =============================================================================
   The eight modals sit outside every tab section, so the section-scoped
   re-skinning in §7 never reached them and they kept the original obsidian
   .card / .form-control styling. They are the first thing a visitor sees after
   clicking Join panel, Member login or Book a demo, so they were the most
   visible remaining piece of the old theme.
   ========================================================================== */
.modal-overlay {
    background: rgba(28, 27, 24, 0.42);
    backdrop-filter: blur(3px);
}
.modal-card,
.modal-card.glass-card {
    background: var(--surface-card);
    border: 1px solid var(--border-mid);
    border-radius: var(--r-lg);
    box-shadow: 0 24px 60px -20px rgba(28, 27, 24, 0.32),
                0 2px 8px rgba(28, 27, 24, 0.06);
    backdrop-filter: none;
    color: var(--ink-2);
    padding: var(--sp-5);
}
.modal-card h3,
.modal-header h3 {
    font-family: var(--font-heading);
    font-size: var(--fs-xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
    line-height: 1.2;
}
.modal-card h4 { color: var(--ink); font-family: var(--font-heading); font-weight: 700; }
.modal-card p,
.modal-body p { color: var(--ink-2); font-size: var(--fs-xs); line-height: 1.65; }
.modal-card .pill-badge {
    background: var(--clay-soft);
    border: 1px solid var(--clay);
    color: var(--clay-deep);
    font-weight: 600;
}
.modal-close-x {
    color: var(--ink-muted);
    font-size: 1.1rem;
    line-height: 1;
    width: 44px;
    height: 44px;
    top: 0.6rem;
    right: 0.6rem;
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.16s ease, color 0.16s ease;
}
.modal-close-x:hover { background: var(--surface-sunk); color: var(--ink); }

/* Fields inside modals */
.modal-card .form-group label,
.modal-card label {
    color: var(--ink);
    font-weight: 600;
    font-size: var(--fs-xs);
    margin-bottom: var(--sp-1);
    display: block;
}
.modal-card .form-control {
    background: var(--surface-card);
    border: 1px solid var(--border-mid);
    color: var(--ink);
    border-radius: var(--r-md);
    min-height: 44px;
    font-size: var(--fs-xs);
}
.modal-card .form-control::placeholder { color: var(--ink-faint); }
.modal-card .form-control:focus,
.modal-card .form-control:focus-visible {
    outline: 2px solid var(--clay);
    outline-offset: 1px;
    border-color: var(--clay);
    background: var(--surface-card);
}
.modal-card .form-control[readonly] { background: var(--surface-sunk); color: var(--ink-muted); }
/* Inline styles on some modal blocks reference the old dark surfaces. */
.modal-card .consent-box,
.modal-card .quiz-container,
.modal-card .mobile-card { background: var(--surface-sunk); border-color: var(--border-soft); color: var(--ink-2); }
.modal-card .teal-text, .modal-card .gold-text, .modal-card .green-text { color: var(--clay-deep); }
.modal-card a { color: var(--clay); }
.modal-card hr { border-color: var(--border-soft); }

@media (max-width: 768px) {
    .modal-card, .modal-card.glass-card { padding: var(--sp-4); }
}

/* =============================================================================
   §10. "US" ROW IN THE COMPARISON TABLE
   =============================================================================
   DiasporaPulse sits inside the same table as everyone else rather than in a
   separate panel — a like-for-like row is a stronger argument than a callout,
   and it is what a reader scanning the grid actually wants. It is tinted and
   rule-marked so the eye finds it immediately without the row being lifted out
   of the comparison.
   ========================================================================== */
#comp-table-body tr.is-us {
    background: var(--clay-soft);
    box-shadow: inset 3px 0 0 var(--clay);
}
#comp-table-body tr.is-us:hover { background: var(--clay-soft); }
#comp-table-body tr.is-us td { border-bottom-color: var(--clay); color: var(--ink); }
#comp-table-body tr.is-us td:first-child strong { color: var(--clay-deep); }
#comp-table-body tr.is-us .pill-badge {
    background: var(--surface-card);
    border-color: var(--clay);
    color: var(--clay-deep);
}
#comp-table-body tr.is-us .check { color: var(--clay); }
.ed-uslabel {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--clay-deep);
    margin-top: 2px;
}

/* Demo note beside a simulated verification step. Deliberately loud enough to
   be read before someone waits for a message that is not coming. Remove these
   together with the .ed-demonote markup when real OTP is wired up. */
.ed-demonote {
    background: var(--amber-soft);
    border: 1px solid var(--amber);
    border-left: 3px solid var(--amber);
    border-radius: var(--r-md);
    padding: 0.6rem 0.75rem;
    margin: var(--sp-2) 0 0;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--ink-2);
}
.ed-demonote strong { color: var(--ink); }
.ed-demonote code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    background: var(--surface-card);
    border: 1px solid var(--border-mid);
    border-radius: var(--r-sm);
    padding: 0 0.3rem;
    font-size: 0.95em;
    color: var(--ink);
}

/* =============================================================================
   §11. LEGACY TOKEN RESCUE INSIDE MODALS
   =============================================================================
   Several modal blocks still carry inline colours from the obsidian theme —
   --text-main (near-white), --accent-turquoise and --accent-gold as body text.
   Against the new white modal surface these measured 1.00:1 to 2.56:1, i.e.
   from unreadable to invisible. Inline styles beat class rules, so these
   overrides are deliberately !important; they are the narrowest fix that does
   not require touching every inline style in the onboarding markup.
   Remove them if those inline colours are ever stripped from the HTML.
   ========================================================================== */
.modal-card [style*="--text-main"],
.modal-card [style*="--text-bright"] { color: var(--ink) !important; }
.modal-card [style*="--text-muted"] { color: var(--ink-muted) !important; }
.modal-card [style*="--accent-turquoise"],
.modal-card [style*="--accent-gold"],
.modal-card [style*="--accent-purple"],
.modal-card [style*="--accent-red"] { color: var(--clay-deep) !important; }
/* Tinted info panels: give them a readable ground rather than a 5%-alpha wash
   of an accent that no longer exists in the palette. */
.modal-card [style*="rgba(0, 210, 211"],
.modal-card [style*="rgba(241, 196, 15"],
.modal-card [style*="rgba(155, 89, 182"] {
    background: var(--surface-sunk) !important;
    border-left-color: var(--clay) !important;
    color: var(--ink-2) !important;
}
.modal-card [style*="rgba(0, 210, 211"] *,
.modal-card [style*="rgba(241, 196, 15"] * { color: var(--ink-2) !important; }
/* Checkbox accents */
.modal-card input[type="checkbox"] { accent-color: var(--clay) !important; width: 20px; height: 20px; }
/* Chips inside the profile step */
.modal-card .chip-opt {
    background: var(--surface-card);
    border: 1px solid var(--border-mid);
    color: var(--ink-2);
    border-radius: 999px;
    padding: 0.45rem 0.8rem;
    min-height: 44px;
    font-size: var(--fs-xs);
    cursor: pointer;
}
.modal-card .chip-opt.active {
    background: var(--clay-soft);
    border-color: var(--clay);
    color: var(--clay-deep);
    font-weight: 600;
}

/* Destructive action. Deliberately not clay — a close-account button must not
   look like every other primary action on the site. */
.btn-danger {
    background: var(--surface-card);
    border: 1px solid #a3232a;
    color: #a3232a;
    font-weight: 600;
}
.btn-danger:hover { background: #a3232a; border-color: #a3232a; color: #fff; }
.btn-danger:focus-visible { outline: 2px solid #a3232a; outline-offset: 2px; }

/* Empty state. Used where there is genuinely nothing to show — preferable to
   fabricating study history or payouts that have not happened. */
.ed-emptystate {
    background: var(--surface-sunk);
    border: 1px dashed var(--border-mid);
    border-radius: var(--r-md);
    padding: var(--sp-4);
    margin-top: var(--sp-2);
}
.ed-emptystate p { font-size: var(--fs-xs); line-height: 1.65; color: var(--ink-2); margin: 0 0 var(--sp-2); max-width: 60ch; }
.ed-emptystate p:last-child { margin-bottom: 0; }
.ed-emptystate strong { color: var(--ink); }

/* =============================================================================
   §12. ONBOARDING PAGE
   =============================================================================
   The five-step flow moved out of a 520px modal. A profile form with eight
   consent-bearing sections does not belong in a dialog — there is no room to
   read, and a dialog signals "quick task" for something that deserves care.
   ========================================================================== */
.ed-onboard-stage {
    background: var(--surface-card);
    border: 1px solid var(--border-mid);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-card);
    padding: var(--sp-5);
    margin-bottom: var(--sp-5);
}
/* The steps were authored for a modal; neutralise the modal-specific chrome
   now that they sit on a page. */
.ed-onboard-stage .modal-header { margin-bottom: var(--sp-3); }
.ed-onboard-stage .modal-header h3 {
    font-family: var(--font-heading);
    font-size: var(--fs-2xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
    line-height: 1.15;
}
.ed-onboard-stage .modal-body { max-width: 62ch; }
.ed-onboard-stage p { color: var(--ink-2); }
.ed-onboard-stage label { color: var(--ink); font-weight: 600; font-size: var(--fs-xs); display: block; margin-bottom: var(--sp-1); }
.ed-onboard-stage .form-control {
    background: var(--surface-card);
    border: 1px solid var(--border-mid);
    color: var(--ink);
    border-radius: var(--r-md);
    min-height: 44px;
    font-size: var(--fs-sm);
}
.ed-onboard-stage .form-control::placeholder { color: var(--ink-faint); }
.ed-onboard-stage .form-control:focus-visible { outline: 2px solid var(--clay); outline-offset: 1px; border-color: var(--clay); }
.ed-onboard-stage .form-group { margin-bottom: var(--sp-4); }
/* Same legacy-token rescue the modals needed. */
.ed-onboard-stage [style*="--text-main"],
.ed-onboard-stage [style*="--text-bright"] { color: var(--ink) !important; }
.ed-onboard-stage [style*="--text-muted"] { color: var(--ink-muted) !important; }
.ed-onboard-stage [style*="--accent-turquoise"],
.ed-onboard-stage [style*="--accent-gold"],
.ed-onboard-stage [style*="--accent-purple"] { color: var(--clay-deep) !important; }
.ed-onboard-stage [style*="rgba(0, 210, 211"],
.ed-onboard-stage [style*="rgba(241, 196, 15"] {
    background: var(--surface-sunk) !important;
    border-left-color: var(--clay) !important;
    color: var(--ink-2) !important;
}
.ed-onboard-stage [style*="rgba(0, 210, 211"] *,
.ed-onboard-stage [style*="rgba(241, 196, 15"] * { color: var(--ink-2) !important; }
.ed-onboard-stage input[type="checkbox"] { accent-color: var(--clay) !important; width: 20px; height: 20px; }
.ed-onboard-stage .chip-opt {
    background: var(--surface-card);
    border: 1px solid var(--border-mid);
    color: var(--ink-2);
    border-radius: 999px;
    padding: 0.5rem 0.85rem;
    min-height: 44px;
    font-size: var(--fs-xs);
    cursor: pointer;
}
.ed-onboard-stage .chip-opt.active { background: var(--clay-soft); border-color: var(--clay); color: var(--clay-deep); font-weight: 600; }
.ed-onboard-stage .quiz-opt {
    background: var(--surface-card);
    border: 1px solid var(--border-mid);
    color: var(--ink);
    border-radius: var(--r-md);
    padding: 0.85rem 1rem;
    min-height: 44px;
    font-size: var(--fs-sm);
    text-align: left;
    width: 100%;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease;
}
.ed-onboard-stage .quiz-opt:hover { background: var(--clay-soft); border-color: var(--clay); }

/* Progress rail — reflects state, is not a control. */
.ed-onboard-progress {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--sp-2);
    margin: 0 0 var(--sp-4);
    padding: 0;
}
.ed-onboard-progress > li {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding-top: var(--sp-2);
    border-top: 3px solid var(--border-mid);
    font-size: var(--fs-xs);
    color: var(--ink-muted);
    min-width: 0;
}
.ed-onboard-progress > li .n {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px; height: 24px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--border-mid);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.75rem;
}
.ed-onboard-progress > li .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-onboard-progress > li.is-done { border-top-color: var(--sage); color: var(--ink-2); }
.ed-onboard-progress > li.is-done .n { background: var(--sage-soft); border-color: var(--sage); color: var(--sage-deep); }
.ed-onboard-progress > li.is-current { border-top-color: var(--clay); color: var(--ink); font-weight: 600; }
.ed-onboard-progress > li.is-current .n { background: var(--clay); border-color: var(--clay); color: #fff; }

@media (max-width: 768px) {
    .ed-onboard-stage { padding: var(--sp-4); }
    .ed-onboard-progress { grid-template-columns: repeat(5, 1fr); gap: var(--sp-1); }
    .ed-onboard-progress > li .t { display: none; }
    .ed-onboard-progress > li { justify-content: center; }
}

/* The stage badges take their colour from .pill-badge.{teal,gold,red,green,
   purple}, i.e. from a class rather than an inline style, so the [style*=]
   rescue above never reached them. Every one measured 1.00:1 — accent text on a
   15%-alpha wash of the same accent, which was legible on obsidian and is
   invisible on white. One neutral treatment for all of them. */
.ed-onboard-stage .pill-badge,
.ed-onboard-stage .pill-badge.teal,
.ed-onboard-stage .pill-badge.gold,
.ed-onboard-stage .pill-badge.red,
.ed-onboard-stage .pill-badge.green,
.ed-onboard-stage .pill-badge.purple,
.modal-card .pill-badge.teal,
.modal-card .pill-badge.gold,
.modal-card .pill-badge.red,
.modal-card .pill-badge.green,
.modal-card .pill-badge.purple {
    background: var(--clay-soft) !important;
    border: 1px solid var(--clay) !important;
    color: var(--clay-deep) !important;
    font-weight: 700;
    letter-spacing: 0.04em;
}
/* Success/emphasis text set to the old neon green (2.10:1 on white). */
.ed-onboard-stage strong[style*="#2ecc71"],
.ed-onboard-stage .green-text,
.ed-onboard-stage [style*="color:#2ecc71"] { color: var(--sage-deep) !important; }
.ed-onboard-stage p[style*="color:#fff"],
.ed-onboard-stage [style*="color:#fff"] { color: var(--ink) !important; }
.ed-onboard-stage [style*="rgba(255, 255, 255, 0.03)"],
.ed-onboard-stage [style*="rgba(255,255,255,0.03)"] {
    background: var(--surface-sunk) !important;
    border-color: var(--border-soft) !important;
}
/* The reward summary card kept an obsidian surface. */
.ed-onboard-stage [style*="rgba(15, 23, 42"] {
    background: var(--surface-sunk) !important;
    border-color: var(--border-mid) !important;
}
.ed-onboard-stage [style*="rgba(15, 23, 42"] * { color: var(--ink-2) !important; }
.ed-onboard-stage [style*="rgba(15, 23, 42"] strong { color: var(--ink) !important; }

/* .card / .glass-card inside the onboarding stage and modals still resolve to
   the obsidian --bg-card. The section-scoped re-skin in §7 only covered the tab
   sections, so cards nested inside these flows were missed. */
.ed-onboard-stage .card,
.ed-onboard-stage .glass-card,
.modal-card .card,
.modal-card .glass-card {
    background: var(--surface-sunk) !important;
    border: 1px solid var(--border-mid) !important;
    backdrop-filter: none !important;
    color: var(--ink-2) !important;
    border-radius: var(--r-md);
}
.ed-onboard-stage .card *,
.modal-card .card * { color: var(--ink-2); }
.ed-onboard-stage .card strong,
.ed-onboard-stage .card h3,
.ed-onboard-stage .card h4,
.modal-card .card strong { color: var(--ink); }

/* =============================================================================
   §8. LEGACY-SURFACE CONTRAST REPAIR  (audit 2026-08-16)
   =============================================================================
   §2 sets `body.dark-theme { color: var(--ink) }` — a near-black. Two families
   of legacy component were written against the obsidian theme and never set a
   colour of their own, so they inherited it and broke:

     a) Components that KEPT a dark background (.phone-screen, #0b0f19) ended up
        near-black on near-black — measured 1.11:1.
     b) Components that LOST their dark background to the §7 re-skin kept the
        obsidian foreground tokens (--text-main #f8fafc, --text-muted #94a3b8)
        and the neon accents, now sitting on white or cream — measured as low
        as 1.05:1.

   The repair is deliberately narrow. It does not touch the editorial palette,
   and it does not restyle anything that already measures AA. Family (a) gets
   its light ink back so the phone keeps looking like a phone; family (b) gets
   AA-compliant equivalents in the same hue family.
   ========================================================================== */

/* --- 8a. Light-ground sections: retarget the obsidian TEXT tokens -----------
   --text-main and --text-muted are only ever used as `color` in this
   stylesheet (verified), so redefining them at section scope is safe and
   repairs the inline `style="color:var(--text-muted)"` attributes in the
   markup at the same time, without touching index.html. */
#panelist-app,
#recruitment-gtm,
#legal-expansion,
#financial-simulator,
#admin-supervisor-panel {
    --text-main: var(--ink);
    --text-muted: var(--ink-muted);

    /* AA-safe stand-ins for the neon accents, used for TEXT only below. The
       accent tokens themselves are untouched: they still carry backgrounds,
       borders and gradients on these tabs, where contrast is not at stake. */
    --legacy-teal-ink: #0a6b6c;   /* 6.3:1 on white · 5.6:1 on cream */
    --legacy-gold-ink: var(--amber);  /* #8a6218 — 5.5:1 on white · 5.4:1 on cream */
    --legacy-green-ink: var(--sage);  /* #4e6b5c — 5.9:1 on white · 5.3:1 on cream */
    --legacy-red-ink: var(--clay);    /* #a34e31 — 5.7:1 on white · 4.7:1 on cream */
}

/* --- 8b. The dark phone screen keeps its obsidian foreground ----------------
   .phone-screen is an intentional dark island inside a light section. It is
   restored explicitly rather than left to inherit, so a future change to the
   page colour cannot black it out again. #94a3b8 measures 7.5:1 on #0b0f19
   and stays as the muted tone. */
.phone-screen {
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    color: var(--text-main);
}

/* --- 8c. Neon accents used as text on light grounds ------------------------ */
#recruitment-gtm .phase-num,
#legal-expansion .score-badge,
#financial-simulator .f-icon.teal-icon,
#recruitment-gtm .f-icon.teal-icon,
#legal-expansion .f-icon.teal-icon,
#admin-supervisor-panel .metric-change.neutral,
#panelist-app .teal-text,
#recruitment-gtm .teal-text,
#legal-expansion .teal-text,
#financial-simulator .teal-text,
#admin-supervisor-panel .teal-text {
    color: var(--legacy-teal-ink);
}

#financial-simulator .f-icon.gold-icon,
#recruitment-gtm .f-icon.gold-icon,
#legal-expansion .f-icon.gold-icon,
#panelist-app .gold-text,
#recruitment-gtm .gold-text,
#legal-expansion .gold-text,
#financial-simulator .gold-text,
#admin-supervisor-panel .gold-text {
    color: var(--legacy-gold-ink);
}

#financial-simulator .econ-valHighlight,
#financial-simulator .green-text,
#financial-simulator .check,
#financial-simulator .reward-text,
#recruitment-gtm .green-text,
#recruitment-gtm .check,
#legal-expansion .green-text,
#legal-expansion .check,
#admin-supervisor-panel .metric-change.positive,
#admin-supervisor-panel .green-text {
    color: var(--legacy-green-ink);
}

/* The .phone-screen island is excluded from 8c: on #0b0f19 the neon accents
   measure well above AA and are the intended look. These selectors carry the
   #panelist-app id so they outrank the 8c rules above, which also carry it. */
#panelist-app .phone-screen .teal-text { color: var(--accent-turquoise); }
#panelist-app .phone-screen .gold-text { color: var(--accent-gold); }
#panelist-app .phone-screen .green-text,
#panelist-app .phone-screen .check,
#panelist-app .phone-screen .reward-text { color: #2ecc71; }

/* --- 8d. No-JavaScript fallback -------------------------------------------
   The block lives directly inside <main>, outside every .tab-content, so it is
   not caught by `.tab-content { display:none }`. It only ever renders when
   scripting is off, so it needs its own spacing rather than inheriting a
   section's. */
.ed-noscript {
    max-width: var(--content-w);
    margin: 0 auto;
    padding: var(--sp-5) var(--sp-3) var(--sp-6);
}
.ed-noscript .ed-panel + .ed-panel { margin-top: var(--sp-4); }
.ed-noscript ul { padding-left: 1.1rem; }
.ed-noscript li + li { margin-top: var(--sp-2); }

/* --- 8e. Looping animations under reduced motion --------------------------
   §6 already stops every animation on the page: its `*` rule forces
   animation-iteration-count to 1 and the duration to ~0, and it does so with
   !important, so it beats the non-important `animation:` shorthands that set
   `infinite`. Measured: .flame-pulse, .trophy-bounce and .logo-pulse all
   resolve to iteration-count 1 under that rule. (.logo-pulse is display:none
   in this theme regardless.)

   These three declarations are therefore belt-and-braces, not a bug fix. They
   are written out by name so the intent survives if §6's universal selector is
   ever narrowed to specific components — which is the usual next refactor, and
   would silently restore three infinite loops.

   All three animate transform only (scale / translateY) with fill-mode `none`,
   so the resting state is the untransformed element: nothing is conveyed by
   the motion, and nothing disappears when it stops. No looping animation on
   this site animates opacity to a hidden state — the only opacity keyframes
   are fadeIn (0 -> 1, plays once on tab entry, base state is visible) and
   pulseBorder (on the display:none .logo-pulse). */
@media (prefers-reduced-motion: reduce) {
    .flame-pulse,
    .trophy-bounce,
    .logo-pulse {
        animation: none !important;
    }
    /* Resting state stays visible and untransformed. */
    .flame-pulse,
    .trophy-bounce {
        transform: none !important;
        opacity: 1 !important;
    }
}

/* =============================================================================
   §9. SHARED SCROLL JOURNEY  (.ed-journey)
   =============================================================================
   One component, two mount points: the homepage and How It Works. It replaces
   the .ed-rail-5 "From a decision to evidence" rail that was duplicated across
   both pages. The Pricing rail is a different sequence and is untouched.

   The order of this stylesheet matters, so read it in this order too:

     9a  BASE — the vertical timeline. This is what mobile gets, what reduced
         motion gets, and what a reader with JavaScript disabled gets. Every
         stage is complete, labelled, connected and readable here. No transform,
         no opacity trick, no dependency on script. If you only implement 9a,
         the component still works.

     9b  ENHANCEMENT — the desktop sticky canvas. Additive, gated behind BOTH a
         min-width media query AND the .is-enhanced class that the controller
         adds. Remove either and you fall back to 9a intact.

     9c  MOTION — stage transitions and the procedural node movement. Every rule
         here sits inside a `no-preference` media query, so reduced motion never
         reaches it; there is nothing to "undo" in a reduce block.

   Borrowed from the reference direction: scroll-triggered stages, sticky visual
   storytelling, alternating composition, generous spacing, one focus per
   viewport, procedural nodes. NOT borrowed: the black canvas, the violet
   accent, the 78–113px display type, the ultra-light body weight. This
   component uses the approved warm palette and the existing editorial scale
   throughout — it introduces no new colour token.
   ========================================================================== */

/* --- 9a. BASE: vertical timeline ------------------------------------------ */
.ed-journey { margin-top: var(--sp-5); }

.ed-journey-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
}
/* The live region is empty in the base layout and stays empty unless the
   desktop enhancement is running — there is no "current stage" to announce
   when every stage is already on screen in full. */
.ed-journey-status {
    margin: 0;
    font-size: var(--fs-xs);
    color: var(--ink-muted);
}
.ed-journey-status:empty { display: none; }

.ed-journey-stages {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ed-journey-stage {
    position: relative;
    display: grid;
    grid-template-columns: 2.25rem 1fr;
    gap: var(--sp-3);
    padding-bottom: var(--sp-6);
}
.ed-journey-stage:last-child { padding-bottom: 0; }

/* The connector. Drawn on the marker column, stopping short of the last
   stage so the sequence reads as finished rather than cut off. */
.ed-journey-stage::before {
    content: "";
    position: absolute;
    left: 1.06rem;
    top: 2.25rem;
    bottom: 0.75rem;
    width: 2px;
    background: var(--border-mid);
}
.ed-journey-stage:last-child::before { display: none; }

.ed-journey-marker { position: relative; z-index: 1; }
.ed-journey-num {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--surface-card);
    border: 2px solid var(--border-mid);
    color: var(--ink-2);
    font-weight: 700;
    font-size: var(--fs-xs);
}
.ed-journey-stage.is-output .ed-journey-num {
    background: var(--clay);
    border-color: var(--clay);
    color: #fff;
}

.ed-journey-body { min-width: 0; }
.ed-journey-title {
    margin: 0.15rem 0 0.2rem;
    font-size: var(--fs-lg);
}
.ed-journey-cap {
    margin: 0 0 var(--sp-2);
    color: var(--clay-deep);
    font-weight: 600;
    font-size: var(--fs-xs);
}
.ed-journey-body > p:last-of-type {
    margin: 0 0 var(--sp-3);
    max-width: var(--measure);
    color: var(--ink-2);
}

/* Per-stage diagram. Bounded by its own box — the SVG scales to the container
   and never escapes it, which is what keeps the page free of horizontal
   overflow at every width. */
.ed-journey-figure {
    background: var(--surface-sunk);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-md);
    padding: var(--sp-3);
    overflow: hidden;
    max-width: 26rem;
}
.ed-journey-art {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    overflow: visible;
}

/* The sticky canvas does not exist until 9b turns it on. */
.ed-journey-canvas { display: none; }

/* --- Symbol palette ---------------------------------------------------------
   Colour lives here, not in the markup, so the diagrams follow the approved
   palette. Every value is an existing token. */
.j-card {
    fill: var(--surface-card);
    stroke: var(--border-mid);
    stroke-width: 2;
}
.j-card.is-output { stroke: var(--clay); stroke-width: 2.5; }
.j-line { fill: var(--ink-muted); }
.j-line.is-dim { fill: var(--border-mid); }
.j-tag {
    fill: var(--ink-muted);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.06em;
    font-family: var(--font-body);
}
.j-cap {
    fill: var(--ink-muted);
    font-size: 15px;
    font-family: var(--font-body);
}
.j-gatelabel {
    fill: var(--ink-2);
    font-size: 15px;
    font-weight: 600;
    font-family: var(--font-body);
}
.j-glyph {
    fill: #fff;
    font-size: 22px;
    font-weight: 700;
    text-anchor: middle;
    font-family: var(--font-body);
}
.j-accent-fill { fill: var(--clay); }
.j-ring {
    fill: var(--clay-soft);
    stroke: var(--clay);
    stroke-width: 2;
}
.j-chip rect {
    fill: var(--surface-card);
    stroke: var(--border-mid);
    stroke-width: 2;
}
.j-connector {
    stroke: var(--clay);
    stroke-width: 2;
    stroke-dasharray: 4 3;
}
.j-gate {
    stroke: var(--sage);
    stroke-width: 3;
    stroke-linecap: round;
}
.j-node { fill: var(--sage); }
.j-node.is-out { fill: var(--border-mid); }
.j-hull {
    fill: var(--sage-soft);
    stroke: var(--sage);
    stroke-width: 2;
    stroke-dasharray: 5 4;
}
.j-chipbox {
    fill: var(--clay-soft);
    stroke: var(--clay);
    stroke-width: 1.5;
}

/* --- 9b. ENHANCEMENT: desktop sticky canvas --------------------------------
   Gated on BOTH the media query and .is-enhanced. The controller adds that
   class only when IntersectionObserver exists and reduced motion is not
   requested, so this whole layer is unreachable in the fallback cases. */
@media (min-width: 1024px) {
    .ed-journey.is-enhanced .ed-journey-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--sp-6);
        align-items: start;
    }

    /* The sticky canvas. `top` clears the fixed header; the height is fixed so
       the stack of absolutely-positioned diagrams has a box to sit in. */
    .ed-journey.is-enhanced .ed-journey-canvas {
        display: block;
        position: sticky;
        top: 7.5rem;
        background: var(--surface-sunk);
        border: 1px solid var(--border-soft);
        border-radius: var(--r-lg);
        padding: var(--sp-4);
        overflow: hidden;
    }
    .ed-journey.is-enhanced .ed-journey-canvas-inner {
        position: relative;
        width: 100%;
        aspect-ratio: 4 / 3;
    }
    .ed-journey.is-enhanced .ed-journey-canvas .ed-journey-art {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        visibility: hidden;
    }
    .ed-journey.is-enhanced .ed-journey-canvas .ed-journey-art.is-current {
        opacity: 1;
        visibility: visible;
    }

    /* The per-stage figures hand over to the canvas. */
    .ed-journey.is-enhanced .ed-journey-figure { display: none; }

    /* Stage text gets room to breathe — one stage occupies the viewport at a
       time, which is the point of the sticky pairing. */
    .ed-journey.is-enhanced .ed-journey-stage {
        padding-bottom: 0;
        min-height: 62vh;
        align-content: start;
    }
    .ed-journey.is-enhanced .ed-journey-stage:last-child { min-height: 0; }
    .ed-journey.is-enhanced .ed-journey-stage::before { bottom: -0.5rem; }
    .ed-journey.is-enhanced .ed-journey-stage:last-child::before { display: none; }

    /* Reading state. The dimming is deliberate and mild: inactive stages stay
       comfortably above the AA floor, because a reader scrolling back must be
       able to read what they are scrolling back to. Nothing is hidden. */
    .ed-journey.is-enhanced .ed-journey-stage .ed-journey-body { color: var(--ink-2); }
    .ed-journey.is-enhanced .ed-journey-stage.is-current .ed-journey-num {
        border-color: var(--clay);
        color: var(--clay-deep);
    }
    .ed-journey.is-enhanced .ed-journey-stage.is-output.is-current .ed-journey-num {
        color: #fff;
    }
}

/* --- 9c. MOTION -------------------------------------------------------------
   Everything animated lives inside `no-preference`. Reduced motion never
   evaluates these rules, so there is no reduce-block undo to keep in sync and
   no way for a future edit to leave motion switched on by accident. */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
    .ed-journey.is-enhanced .ed-journey-canvas .ed-journey-art {
        transition: opacity 0.4s ease, visibility 0.4s;
    }
    .ed-journey.is-enhanced .ed-journey-stage .ed-journey-num {
        transition: border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    }
    .ed-journey.is-enhanced .ed-journey-stage.is-current .ed-journey-num {
        box-shadow: 0 0 0 5px var(--clay-soft);
    }
}

/* Procedural motion inside the diagrams. Runs once per stage, when that stage
   becomes current, and only on the sticky canvas. Each animation ends at the
   element's resting position, which is also its static position — so the
   diagram a reduced-motion reader sees is the diagram everyone ends up with. */
@media (prefers-reduced-motion: no-preference) {
    .ed-journey-art.is-current .j-chip {
        animation: edJChip 0.7s ease-out both;
    }
    .ed-journey-art.is-current .j-chip[data-c="2"] { animation-delay: 0.06s; }
    .ed-journey-art.is-current .j-chip[data-c="3"] { animation-delay: 0.12s; }
    .ed-journey-art.is-current .j-chip[data-c="4"] { animation-delay: 0.18s; }
    .ed-journey-art.is-current .j-chip[data-c="5"] { animation-delay: 0.24s; }
    .ed-journey-art.is-current .j-chip[data-c="6"] { animation-delay: 0.30s; }

    .ed-journey-art.is-current .j-node[data-n] {
        animation: edJNode 0.9s ease-out both;
    }
    .ed-journey-art.is-current .j-node[data-n="2"] { animation-delay: 0.10s; }
    .ed-journey-art.is-current .j-node[data-n="3"] { animation-delay: 0.20s; }
    .ed-journey-art.is-current .j-node[data-n="4"] { animation-delay: 0.30s; }
    .ed-journey-art.is-current .j-node[data-n="5"] { animation-delay: 0.16s; }
    .ed-journey-art.is-current .j-node[data-n="6"] { animation-delay: 0.26s; }

    .ed-journey-art.is-current .j-cluster {
        animation: edJCluster 0.7s ease-out both;
    }
    .ed-journey-art.is-current .j-cluster[data-k="2"] { animation-delay: 0.10s; }
    .ed-journey-art.is-current .j-cluster[data-k="3"] { animation-delay: 0.20s; }

    .ed-journey-art.is-current .j-connector {
        animation: edJLink 0.6s ease-out both;
        animation-delay: 0.2s;
    }

    /* Nodes travel right-to-left through the gates, ending exactly where the
       static markup already places them. */
    @keyframes edJNode {
        from { transform: translateX(-150px); opacity: 0; }
        to   { transform: translateX(0);      opacity: 1; }
    }
    @keyframes edJChip {
        from { transform: translate(0, 0) scale(0.86); opacity: 0; }
        to   { transform: translate(0, 0) scale(1);    opacity: 1; }
    }
    @keyframes edJCluster {
        from { transform: scale(0.9); opacity: 0; }
        to   { transform: scale(1);   opacity: 1; }
    }
    @keyframes edJLink {
        from { stroke-dashoffset: 22; opacity: 0; }
        to   { stroke-dashoffset: 0;  opacity: 1; }
    }
}

/* Transform-box so the SVG group animations scale about their own centre
   rather than the viewBox origin. Safe to declare unconditionally. */
.j-chip, .j-cluster, .j-node[data-n] {
    transform-box: fill-box;
    transform-origin: center;
}

/* --- 9d. Journey responsive ------------------------------------------------ */
@media (max-width: 560px) {
    .ed-journey-stage {
        grid-template-columns: 1.75rem 1fr;
        gap: var(--sp-2);
        padding-bottom: var(--sp-5);
    }
    .ed-journey-stage::before { left: 0.81rem; top: 1.75rem; }
    .ed-journey-num { width: 1.75rem; height: 1.75rem; font-size: 0.8rem; }
    .ed-journey-title { font-size: var(--fs-md); }
    .ed-journey-figure { padding: var(--sp-2); }
}

/* =============================================================================
   §10. BRAND ASSETS  (2026-08-16)
   =============================================================================
   The header and footer marks now use assets/icons/brand-mark-128.png — a
   128x128 derivative generated from diaspora_pulse_favicon_icon.png, which
   stays in the project root untouched as the master.

   Why a derivative and not the master: the master is 551 KB on a 1024x1024
   canvas with ~25% dead padding on every side. Pointing a 42px badge at it
   meant every page load pulled half a megabyte to paint a thumbnail. The
   derivative is 17 KB and already cropped to the artwork, which also retires
   the CSS `transform: scale()` crop this section used to carry — the mark now
   sits at its natural size with no optical trickery to keep in sync.

   The asset has an opaque cream ground (#f6efdc), warmer than --surface-page
   (#f0eee9) and with no alpha channel, so it cannot sit transparently on the
   header. The badge keeps its own rounded surface and hairline border, which
   reads as a deliberate badge — which is what .logo-badge already was.

   The badge box is unchanged at 42x42 (36x36 in the footer), so header height
   is unchanged.
   ========================================================================== */
.logo-badge {
    overflow: hidden;
    background: #f6efdc;
    border: 1px solid var(--border-mid);
    /* Re-declared because §2 sets --surface-dark here; the monogram needs its
       own ground, not the dark one meant for the retired glyph. */
}
.logo-mark {
    /* A 1:1 asset in a 1:1 box cannot distort — there is no axis to stretch
       along. object-fit is declared anyway so a future non-square asset
       letterboxes rather than stretches. */
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
}

/* Motion: the mark is a brand asset, not an animated element. One restrained
   hover response, nothing else — no loop, no entrance animation, and nothing
   at all under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
    .logo-mark { transition: transform 0.25s ease; }
    .logo-area:hover .logo-mark { transform: scale(1.04); }
}

/* ---------------------------------------------------------------------------
   Authentication controls (added 2026-08-16 with the real Supabase Auth flow).

   Focus styling is deliberately explicit: the previous simulated forms relied
   on the browser default, which is invisible against this palette's dark inputs.
   :focus-visible keeps the ring for keyboard users without ringing every mouse
   click.
   --------------------------------------------------------------------------- */
.form-error {
    color: var(--danger, #b3261e);
    font-size: 0.85rem;
    margin: 0.5rem 0 0;
    font-weight: 600;
}

.form-status {
    font-size: 0.85rem;
    margin: 0.5rem 0 0;
    color: var(--text-muted, #5f5a54);
    /* Reserves a line so announcing status does not shift layout under the
       button the user is about to press again. */
    min-height: 1.25em;
}

.login-secondary {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.85rem;
}

.btn-link {
    background: none;
    border: 0;
    padding: 0.35rem 0;
    font: inherit;
    font-size: 0.85rem;
    /* NOT --accent-turquoise: that token is #00d2d3, tuned for dark surfaces,
       and these controls sit on a white .modal-card. Measured 1.88:1 there —
       far below WCAG AA 4.5:1. This darker teal measures ~5.9:1 on white. */
    color: #0b6b6b;
    text-decoration: underline;
    cursor: pointer;
    /* 44px target on touch without visually inflating the link. */
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.btn-link:hover { text-decoration: none; }

.session-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--border, #e0d9d0);
    border-radius: 10px;
}

.session-who { margin: 0; font-size: 0.9rem; }

/* Visible focus for every interactive control in the auth surfaces. */
.btn-link:focus-visible,
#panelist-login-form :focus-visible,
#onboard-register-form :focus-visible,
.session-bar :focus-visible {
    /* Same reason as .btn-link: the focus ring must be visible on the white
       modal surface, not only on the dark page background. */
    outline: 3px solid #0b6b6b;
    outline-offset: 2px;
    border-radius: 4px;
}

/* A control awaiting a network response must look unavailable, not merely dim. */
button[aria-busy="true"] { cursor: progress; opacity: 0.75; }

@media (prefers-reduced-motion: reduce) {
    .btn-link, .session-bar, .form-status { transition: none !important; }
}

/* Consent checkboxes.
   The 7-viewport sweep measured these at 20x20 inside a 726x24 label. That
   clears WCAG 2.5.8 (24px minimum) but not 2.5.5 (44px enhanced), and every
   other control in these forms is already 44px — so the consent controls were
   the smallest targets on a form whose whole purpose is informed consent.
   The checkbox grows to 24px and the label gets a 44px row. */
#onboard-register-form input[type="checkbox"] {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    margin-top: 0;
    accent-color: var(--accent-turquoise, #0b6b6b);
}

#onboard-register-form label:has(> input[type="checkbox"]) {
    min-height: 44px;
    align-items: center;
    padding: 0.35rem 0;
    cursor: pointer;
}

/* :has() is widely supported, but a browser without it must still get a usable
   target rather than silently falling back to 24px. */
@supports not selector(:has(*)) {
    #onboard-register-form .form-group > label {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

/* Member account blocks (2026-09-19) — plain cards, not the two-column .ed-panel list. */
.dp-box { display: block; background: #fff; border: 1px solid var(--border-soft); border-radius: 14px; padding: 16px 18px; }
#member-hub .ed-section, #member-hub-2 .ed-section, #member-studies, #member-messages { max-width: 900px; }

/* English / Turkish switch (assets/i18n.js). On a phone the four header
   buttons share one row, so the switch drops to its two-letter code. */
.lang-toggle { white-space: nowrap; }
@media (max-width: 768px) {
    .header-actions { gap: 6px; }
    .header-actions .btn { margin-right: 0 !important; flex: 1 1 0; padding-left: 0.45rem; padding-right: 0.45rem; font-size: 0.8rem; line-height: 1.15; }
    .header-actions .lang-toggle { flex: 0 0 auto; min-width: 44px; }
    .lang-toggle .lt-long { display: none; }
}

/* Member-area preview (How members take part). A light screen that mirrors
   the real signed-in account page, replacing the old dark gamified mock-up. */
.phone-screen.dp-phone { background: #f7f5f0; color: #1c1b18; --text-main: #1c1b18; --text-muted: #57534e; gap: 0.6rem; }
.dp-ph-head { display: flex; flex-direction: column; }
.dp-ph-head strong { font-size: 1.05rem; }
.dp-ph-head span { font-size: 0.75rem; color: #57534e; }
.dp-ph-tabs { display: flex; gap: 4px; background: #ebe6dc; border-radius: 12px; padding: 4px; }
.dp-ph-tabs button { flex: 1; border: 0; background: transparent; border-radius: 9px; min-height: 36px; font: inherit; font-size: 0.8rem; font-weight: 600; color: #57534e; cursor: pointer; }
.dp-ph-tabs button.is-on { background: #fff; color: #8a4128; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.dp-ph-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #57534e; margin: 0.3rem 0 0; }
.dp-ph-card { background: #fff; border: 1px solid #e2ddd3; border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; font-size: 0.82rem; }
.dp-ph-meta { font-size: 0.74rem; color: #57534e; }
.dp-ph-pill { align-self: flex-start; font-size: 0.68rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: #f1f5f9; color: #475569; margin-top: 2px; }
.dp-ph-pill.is-new { background: #eef2ff; color: #4338ca; }
.dp-ph-pill.is-done { background: #ecfdf5; color: #047857; }
.dp-ph-actions { display: flex; gap: 6px; margin-top: 6px; }
.dp-ph-btn { font-size: 0.75rem; font-weight: 700; padding: 6px 12px; border-radius: 8px; background: #a34e31; color: #fff; }
.dp-ph-btn.is-ghost { background: #fff; color: #8a4128; border: 1px solid #d8d3c9; }
.dp-ph-note { font-size: 0.72rem; color: #57534e; margin: 0; line-height: 1.45; }
.dp-ph-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.dp-ph-chips span { font-size: 0.7rem; background: #f4ebe6; color: #8a4128; border-radius: 99px; padding: 2px 8px; }
.dp-ph-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.dp-ph-stats div { background: #fff; border: 1px solid #e2ddd3; border-radius: 12px; padding: 8px 10px; display: flex; flex-direction: column; }
.dp-ph-stats span { font-size: 0.7rem; color: #57534e; }
.dp-ph-stats strong { font-size: 1.3rem; }
.dp-ph-stats em { font-style: normal; font-size: 0.68rem; color: #57534e; }
.dp-ph-bar { height: 8px; background: #e7e0d6; border-radius: 99px; overflow: hidden; }
.dp-ph-bar span { display: block; height: 8px; background: #8a4128; }
.dp-ph-ledger div { display: flex; justify-content: space-between; border-bottom: 1px solid #f0ece4; padding: 4px 0; }
.dp-ph-ledger div:last-child { border-bottom: 0; }
.dp-ph-ledger strong { color: #047857; }

/* HeyGen introduction videos (2026-09-21). 16:9, never wider than the page,
   poster shown until someone presses play. */
.dp-video-h { margin-bottom: 1rem; }
.dp-video-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; }
.dp-video-single .dp-video { max-width: 720px; }
.dp-video { margin: 0; }
.dp-video video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #1c1b18; border-radius: 14px; object-fit: cover; }
.dp-video figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin-top: 8px; font-size: 0.9rem; }
.dp-video figcaption span { color: var(--text-muted, #57534e); font-size: 0.82rem; }

/* Consent checkboxes squashed to a dot (2026-09-29). Inside a flex label a
   long sentence out-competes the checkbox for width and flex-shrink crushes it
   to ~2px on phones — a member could not see the sensitive-data box and kept
   hitting the "tick the permission" error. Every checkbox that sits in a flex
   label keeps its full size; the consent boxes are 26px with a clear frame and
   pulse when they are the reason a save was refused. */
label > input[type="checkbox"],
label > input[type="radio"] { flex: 0 0 auto; }
#hp-sensitive, #hp-news, #onboard-consent-ethnic, #onboard-consent-push {
    width: 26px !important; height: 26px !important; min-width: 26px; min-height: 0 !important; padding: 0;
    flex: 0 0 26px; margin-top: 0 !important; accent-color: var(--clay, #8a4128); cursor: pointer;
}
.dp-consent-row { padding: 10px 12px; border: 1.5px solid var(--border-soft, #e2d9cc); border-radius: 12px; background: #fff; cursor: pointer; align-items: center !important; }
.dp-consent-row.dp-needs-tick { border-color: #a32020; background: #fff4f2; box-shadow: 0 0 0 3px rgba(163, 32, 32, .15); }
.dp-consent-row.dp-needs-tick span::before { content: "👉 "; }