/* =============================================
   CRYPGUARD GENESIS - OVERVIEW PAGE STYLES
   Quick-glance summary — all info in one page
   ============================================= */

/* Session 203G: Dark warm beige background — distinct from other pages */
.overview-page {
    background: linear-gradient(180deg, #121212 0%, #0e0e0e 50%, #0a0a0a 100%);
}

/* === PAGE HEADER === */
.overview-header {
    text-align: center;
    padding: 8rem 1.5rem 3rem;
    position: relative;
    z-index: 1;
}

.overview-header h1 {
    font-family: 'Orbitron', sans-serif;
    font-size: var(--fs-2xl);
    color: var(--text-primary);
    margin-bottom: 1rem;
    letter-spacing: 2px;
}

.overview-header .tagline {
    font-size: var(--fs-lg);
    color: var(--accent-cyan);
    margin-bottom: 0.5rem;
}

.overview-header .subtitle {
    font-size: var(--fs-base);
    color: var(--text-secondary);
    max-width: 650px;
    margin: 0 auto 2rem;
    line-height: 1.7;
}

.overview-header .time-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(0, 217, 255, 0.1);
    border: 1px solid rgba(0, 217, 255, 0.3);
    border-radius: var(--radius-full);
    padding: 0.6rem 1.5rem;
    font-family: 'Orbitron', sans-serif;
    font-size: var(--fs-sm);
    color: var(--accent-cyan);
    letter-spacing: 1px;
}

/* === CONTENT CONTAINER === */
.overview-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 1.5rem 4rem;
    position: relative;
    z-index: 1;
}

/* === SECTION HEADERS === */
.section-header {
    text-align: center;
    margin-bottom: 2rem;
}

.section-number {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(0, 217, 255, 0.08);
    border: 1px solid rgba(0, 217, 255, 0.25);
    border-radius: var(--radius-full);
    padding: 0.5rem 1.5rem;
    font-family: 'Orbitron', sans-serif;
    font-size: var(--fs-xs);
    color: var(--accent-cyan);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

.section-header h2 {
    font-family: 'Orbitron', sans-serif;
    font-size: var(--fs-xl);
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.section-header p {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
}

/* === INTRO BOX === */
.intro-box {
    background: rgba(26, 31, 46, 0.6);
    border: 1px solid rgba(0, 217, 255, 0.12);
    border-radius: var(--radius-md);
    padding: 2rem;
    margin-bottom: 2rem;
    color: var(--text-secondary);
    font-size: var(--fs-base);
    line-height: 1.8;
}

.intro-box strong {
    color: var(--text-primary);
}

.intro-box .highlight-cyan {
    color: var(--accent-cyan);
    font-weight: 600;
}

/* === SHIELDS GRID (2x2) === */
.shields-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.shield-card {
    background: rgba(26, 31, 46, 0.6);
    border: 1px solid rgba(0, 217, 255, 0.12);
    border-left: 3px solid var(--accent-cyan);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.shield-card:hover {
    border-color: rgba(0, 217, 255, 0.3);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.shield-card--identity { border-left-color: var(--accent-cyan); }
.shield-card--link { border-left-color: var(--accent-green); }
.shield-card--message { border-left-color: #ff3366; }
.shield-card--media { border-left-color: #bc13fe; }

.shield-card .shield-name {
    font-family: 'Orbitron', sans-serif;
    font-size: var(--fs-sm);
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    letter-spacing: 1px;
}

.shield-card--identity .shield-name { color: var(--accent-cyan); }
.shield-card--link .shield-name { color: var(--accent-green); }
.shield-card--message .shield-name { color: #ff3366; }
.shield-card--media .shield-name { color: #bc13fe; }

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

.shield-list li {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    line-height: 1.6;
    padding-left: 1.2rem;
    position: relative;
    margin-bottom: 0.3rem;
}

.shield-list li::before {
    content: '\25B8';
    position: absolute;
    left: 0;
    color: var(--accent-cyan);
    opacity: 0.5;
}

/* === DIVIDER === */
.overview-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 3rem 0;
}

.overview-divider::before,
.overview-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 217, 255, 0.3), transparent);
}

.overview-divider .divider-icon {
    font-size: 1.5rem;
    color: var(--accent-cyan);
    opacity: 0.6;
}

/* === ALERT COMPARISON (side by side) === */
.alert-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.alert-card {
    background: rgba(26, 31, 46, 0.6);
    border: 1px solid rgba(0, 217, 255, 0.12);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.alert-card:hover {
    border-color: rgba(0, 217, 255, 0.3);
    transform: translateY(-2px);
}

.alert-card .alert-title {
    font-family: 'Orbitron', sans-serif;
    font-size: var(--fs-sm);
    margin-bottom: 0.5rem;
    letter-spacing: 1px;
}

.alert-card--public .alert-title { color: var(--accent-green); }
.alert-card--admin .alert-title { color: var(--accent-cyan); }

.alert-card .alert-subtitle {
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
    font-style: italic;
}

.alert-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.alert-card li {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    line-height: 1.6;
    padding-left: 1.2rem;
    position: relative;
    margin-bottom: 0.25rem;
}

.alert-card li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    color: var(--accent-green);
    font-size: 0.7rem;
}

/* === CONFIDENCE TIERS === */
.confidence-tiers {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.confidence-tier {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(26, 31, 46, 0.4);
    border-radius: var(--radius-sm);
    padding: 0.75rem 1.25rem;
}

.tier-badge {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 0.3rem 0.7rem;
    border-radius: var(--radius-sm);
    min-width: 80px;
    text-align: center;
}

.tier-badge--critical {
    background: rgba(255, 51, 102, 0.15);
    border: 1px solid rgba(255, 51, 102, 0.4);
    color: #ff3366;
}

.tier-badge--high {
    background: rgba(255, 136, 0, 0.15);
    border: 1px solid rgba(255, 136, 0, 0.4);
    color: #ff8800;
}

.tier-badge--medium {
    background: rgba(255, 204, 0, 0.15);
    border: 1px solid rgba(255, 204, 0, 0.4);
    color: #ffcc00;
}

.tier-badge--low {
    background: rgba(0, 153, 255, 0.15);
    border: 1px solid rgba(0, 153, 255, 0.4);
    color: #0099ff;
}

.tier-range {
    font-family: 'Courier New', monospace;
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    min-width: 60px;
}

.tier-action {
    font-size: var(--fs-xs);
    color: var(--text-secondary);
}

/* === CALLOUT BOX (reused pattern) === */
.callout-box {
    background: rgba(0, 217, 255, 0.05);
    border-left: 3px solid var(--accent-cyan);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
}

.callout-box strong {
    color: var(--text-primary);
}

.callout-box.success {
    border-left-color: var(--accent-green);
    background: rgba(0, 255, 170, 0.05);
}

.callout-box.warning {
    border-left-color: #ffaa00;
    background: rgba(255, 170, 0, 0.05);
}

/* === DATA FLOW ROWS === */
.data-flow {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.data-flow-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(26, 31, 46, 0.4);
    border-radius: var(--radius-sm);
    padding: 0.85rem 1.25rem;
}

.data-label {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 1px;
    min-width: 130px;
    color: var(--text-primary);
}

.data-arrow {
    color: var(--accent-cyan);
    opacity: 0.4;
    font-size: var(--fs-sm);
}

.data-action {
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    flex: 1;
}

.data-indicator {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
    min-width: 60px;
    text-align: center;
}

.data-indicator--green {
    background: rgba(0, 255, 170, 0.12);
    color: var(--accent-green);
}

.data-indicator--yellow {
    background: rgba(255, 204, 0, 0.12);
    color: #ffcc00;
}

/* === DENIAL TAGS === */
.denial-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin: 1.5rem 0;
}

.denial-tag {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 51, 102, 0.05);
    border: 1px solid rgba(255, 51, 102, 0.15);
    border-radius: var(--radius-sm);
    padding: 0.6rem 1rem;
    font-size: var(--fs-xs);
    color: var(--text-secondary);
}

.denial-tag .x-icon {
    color: #ff3366;
    font-weight: 700;
    font-size: var(--fs-sm);
}

/* === SETUP STEPS (condensed) === */
.setup-steps {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.setup-step-mini {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    background: rgba(26, 31, 46, 0.6);
    border: 1px solid rgba(0, 217, 255, 0.12);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.setup-step-mini:hover {
    border-color: rgba(0, 217, 255, 0.3);
    transform: translateY(-2px);
}

.step-number {
    font-family: 'Orbitron', sans-serif;
    font-size: var(--fs-lg);
    font-weight: 900;
    color: var(--accent-cyan);
    opacity: 0.5;
    min-width: 2rem;
    text-align: center;
    line-height: 1;
    padding-top: 0.2rem;
}

.step-content h3 {
    font-family: 'Orbitron', sans-serif;
    font-size: var(--fs-sm);
    color: var(--text-primary);
    margin-bottom: 0.3rem;
    letter-spacing: 1px;
}

.step-content p {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    line-height: 1.6;
    margin: 0;
}

.step-content code {
    background: rgba(0, 217, 255, 0.1);
    border: 1px solid rgba(0, 217, 255, 0.2);
    border-radius: 4px;
    padding: 0.1rem 0.4rem;
    font-family: 'Courier New', monospace;
    font-size: 0.85em;
    color: var(--accent-cyan);
}

/* === COMMANDS GRID === */
.commands-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
}

.command-card {
    background: rgba(10, 14, 26, 0.6);
    border: 1px solid rgba(0, 217, 255, 0.1);
    border-radius: var(--radius-sm);
    padding: 1.25rem;
    transition: all 0.3s ease;
}

.command-card:hover {
    border-color: rgba(0, 217, 255, 0.3);
    background: rgba(10, 14, 26, 0.8);
}

.command-card .cmd-name {
    font-family: 'Courier New', monospace;
    font-size: var(--fs-sm);
    color: var(--accent-cyan);
    margin-bottom: 0.4rem;
}

.command-card .cmd-desc {
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    line-height: 1.5;
}

/* === PRICING COMPARISON === */
.pricing-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.pricing-card {
    background: rgba(26, 31, 46, 0.6);
    border: 1px solid rgba(0, 217, 255, 0.12);
    border-radius: var(--radius-md);
    padding: 1.75rem;
    transition: all 0.3s ease;
}

.pricing-card:hover {
    border-color: rgba(0, 217, 255, 0.3);
    transform: translateY(-2px);
}

.pricing-card--pro {
    border-color: rgba(0, 255, 170, 0.3);
    background: rgba(0, 255, 170, 0.03);
}

.pricing-card--pro:hover {
    border-color: rgba(0, 255, 170, 0.5);
}

.pricing-card .plan-name {
    font-family: 'Orbitron', sans-serif;
    font-size: var(--fs-sm);
    color: var(--text-primary);
    letter-spacing: 1px;
    margin-bottom: 0.25rem;
}

.pricing-card .plan-price {
    font-family: 'Orbitron', sans-serif;
    font-size: var(--fs-lg);
    color: var(--accent-cyan);
    margin-bottom: 1rem;
}

.pricing-card--pro .plan-price {
    color: var(--accent-green);
}

.pricing-card .plan-price .price-note {
    font-family: 'Inter', sans-serif;
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    display: block;
    margin-top: 0.2rem;
}

.pricing-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pricing-card li {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    line-height: 1.7;
    padding-left: 1.4rem;
    position: relative;
}

.pricing-card li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    color: var(--accent-green);
    font-weight: 700;
}

/* === FAQ CARDS === */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.faq-card {
    background: rgba(26, 31, 46, 0.6);
    border: 1px solid rgba(0, 217, 255, 0.12);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.faq-card:hover {
    border-color: rgba(0, 217, 255, 0.3);
    transform: translateY(-2px);
}

.faq-question {
    font-family: 'Orbitron', sans-serif;
    font-size: var(--fs-sm);
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    letter-spacing: 0.5px;
}

.faq-answer {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    line-height: 1.7;
    margin: 0;
}

.faq-answer code {
    background: rgba(0, 217, 255, 0.1);
    border: 1px solid rgba(0, 217, 255, 0.2);
    border-radius: 4px;
    padding: 0.1rem 0.4rem;
    font-family: 'Courier New', monospace;
    font-size: 0.85em;
    color: var(--accent-cyan);
}

/* === BOTTOM CTA === */
.overview-final {
    text-align: center;
    padding: 4rem 1.5rem;
    position: relative;
    z-index: 1;
}

.overview-final h2 {
    font-family: 'Orbitron', sans-serif;
    font-size: var(--fs-xl);
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.overview-final .tagline {
    color: var(--text-secondary);
    font-size: var(--fs-base);
    margin-bottom: 2rem;
    max-width: 550px;
    margin-left: auto;
    margin-right: auto;
}

.cta-group {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.cta-group .btn-invite {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    font-size: var(--fs-sm);
    font-weight: 700;
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 1px;
    color: var(--bg-primary);
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-green));
    border: none;
    border-radius: var(--radius-md);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-glow);
}

.cta-group .btn-invite:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 0 50px rgba(0, 217, 255, 0.6), 0 10px 30px rgba(0, 0, 0, 0.3);
}

.cta-group .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    font-size: var(--fs-sm);
    font-weight: 600;
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 1px;
    color: var(--accent-cyan);
    background: transparent;
    border: 1px solid rgba(0, 217, 255, 0.3);
    border-radius: var(--radius-md);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.cta-group .btn-secondary:hover {
    background: rgba(0, 217, 255, 0.08);
    border-color: var(--accent-cyan);
    transform: translateY(-2px);
}

.overview-final .doctrine {
    font-family: 'Orbitron', sans-serif;
    font-size: var(--fs-xs);
    color: var(--accent-cyan);
    opacity: 0.5;
    letter-spacing: 2px;
}

/* === GDPR LINE === */
.gdpr-line {
    text-align: center;
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    margin-top: 1rem;
}

.gdpr-line strong {
    color: var(--accent-green);
}

.gdpr-line code {
    background: rgba(0, 217, 255, 0.1);
    border: 1px solid rgba(0, 217, 255, 0.2);
    border-radius: 4px;
    padding: 0.1rem 0.4rem;
    font-family: 'Courier New', monospace;
    font-size: 0.85em;
    color: var(--accent-cyan);
}

/* === LINK ROW === */
.link-row {
    text-align: center;
    margin-top: 1.5rem;
    font-size: var(--fs-sm);
}

.link-row a {
    color: var(--accent-cyan);
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 217, 255, 0.3);
    transition: all 0.2s;
}

.link-row a:hover {
    color: var(--accent-green);
    border-bottom-color: var(--accent-green);
}

/* === RESPONSIVE === */
@media (min-width: 768px) {
    .overview-header {
        padding: 10rem 2rem 4rem;
    }

    .overview-container {
        padding: 0 2rem 5rem;
    }
}

@media (max-width: 767px) {
    .shields-grid,
    .alert-comparison,
    .commands-grid,
    .pricing-comparison,
    .denial-grid {
        grid-template-columns: 1fr;
    }

    .confidence-tier {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .data-flow-row {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .data-label {
        min-width: 100%;
    }

    .cta-group {
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 480px) {
    .overview-header h1 {
        font-size: var(--fs-xl);
    }

    .shield-card,
    .alert-card,
    .setup-step-mini,
    .faq-card {
        padding: 1.25rem;
    }
}