/**
 * Main CSS - Unified Styles for Gaming System
 * Combines desktop and mobile styles
 * Professional Game-Inspired Portfolio
 *
 * @version 3.0.0
 */

/* ==================== CSS Variables ==================== */
/* @import 'card-deck.css'; - Merged below */

:root {
    /* Founder Theme - Strategic Deep Green */
    --founder-bg: #1E2C23;
    --founder-accent: #A0A453;
    --founder-accent-rgb: 160, 164, 83;
    --founder-text: #D8D8D8;

    /* Operator Theme - Executive Dark */
    --operator-bg: #1A1D20;
    --operator-accent: #D99A00;
    --operator-accent-rgb: 217, 154, 0;
    --operator-text: #EAEAEA;

    /* Investor Theme - Sophisticated Light */
    --investor-bg: #EFEBE4;
    --investor-accent: #C39F47;
    --investor-accent-rgb: 195, 159, 71;
    --investor-text: #0A1D1A;

    /* Dad Theme - Warm Light */
    --dad-bg: #FFFBEF;
    --dad-accent: #FF7F50;
    --dad-accent-rgb: 255, 127, 80;
    --dad-text: #4A4A4A;

    /* Mobile Variables */
    --mobile-navbar-height: 60px;
    --mobile-bottom-nav: 70px;
    --mobile-padding: 15px;
    --mobile-card-gap: 15px;
    --swipe-threshold: 50px;
    --mobile-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);


    /* Typography - Google Noto Fonts */
    --font-primary: 'Noto Serif', serif;
    /* Authoritative, classic headers */
    --font-secondary: 'Noto Sans', sans-serif;
    /* Professional, clean subtitles and body text */
    --font-display: 'Noto Serif', serif;
    /* Trustworthy, readable display for titles */
    --font-body: 'Noto Sans', sans-serif;
    /* Clean, readable body text */

    /* Base Colors - Modern Dark Gradient */
    --bg-warm-1: rgba(15, 20, 25, 0.95);
    --bg-warm-2: rgba(20, 25, 35, 0.95);
    --bg-warm-3: rgba(25, 30, 40, 0.95);
    --bg-warm-4: rgba(30, 35, 45, 0.95);

    /* Shadows - Deeper for dark theme */
    --shadow-card: 0 10px 40px rgba(0, 0, 0, 0.5);
    --shadow-hover: 0 15px 50px rgba(0, 0, 0, 0.6);

    /* Mobile Variables */
    --mobile-navbar-height: 60px;
    --mobile-bottom-nav: 70px;
    --mobile-padding: 15px;
    --mobile-card-gap: 15px;
    --swipe-threshold: 50px;
    --mobile-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Background Image Opacity */
    --bg-image-opacity: 0.05;
}

/* ==================== Base Styles ==================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@viewport {
    width: device-width;
    initial-scale: 1;
    maximum-scale: 5;
    user-scalable: yes;
}

html {
    overflow-x: hidden;
    background-color: transparent;
    /* Allow background images to show through */
}

body {
    font-family: var(--font-body);
    overflow-x: hidden;
    background: transparent;
    position: relative;
    min-height: 100vh;
}

/* Headings use Noto Serif */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Noto Serif', serif;
}

/* Remove body background - will be handled per page */
body::before {
    display: none;
}

/* body::after is used for persona background images, so don't hide it by default */

/* ==================== Persona-Specific Backgrounds ==================== */
/* Common background image styles for all personas */
body.persona-founder::after,
body.persona-operator::after,
body.persona-investor::after,
body.persona-dad::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-size: cover;
    -webkit-background-size: cover;
    /* Safari support */
    background-position: center center;
    -webkit-background-position: center center;
    /* Safari support */
    background-repeat: no-repeat;
    -webkit-background-repeat: no-repeat;
    /* Safari support */
    z-index: 0;
    pointer-events: none;
    display: block !important;
    /* Force display for Safari */
    visibility: visible !important;
    /* Force visibility for Safari */
    /* Safari Rendering Fixes */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    perspective: 1000px;
    /* Force hardware acceleration for Safari */
    will-change: transform;
    -webkit-will-change: transform;
}

/* All personas - consistent opacity */
body.persona-founder::after,
body.persona-operator::after,
body.persona-investor::after,
body.persona-dad::after {
    opacity: 0.06;
}

/* Safari-specific: Force opacity and display recalculation */
@supports (-webkit-appearance: none) {

    body.persona-founder::after,
    body.persona-operator::after,
    body.persona-investor::after,
    body.persona-dad::after {
        opacity: 0.06 !important;
        display: block !important;
        visibility: visible !important;
        -webkit-transform: translateZ(0) !important;
        transform: translateZ(0) !important;
    }
}

/* Persona-specific background images */
body.persona-founder::after {
    background-image: url('/assets/founder-background.jpg');
    -webkit-background-image: url('/assets/founder-background.jpg');
    /* Safari support */
}

body.persona-operator::after {
    background-image: url('/assets/operator-background.jpg');
    -webkit-background-image: url('/assets/operator-background.jpg');
    /* Safari support */
}

body.persona-investor::after {
    background-image: url('/assets/investor-background.jpg');
    -webkit-background-image: url('/assets/investor-background.jpg');
    /* Safari support */
}

body.persona-dad::after {
    background-image: url('/assets/dad-background.jpg');
    -webkit-background-image: url('/assets/dad-background.jpg');
    /* Safari support */
}

/* Hide background images on mobile */
@media (max-width: 768px) {

    body.persona-founder::after,
    body.persona-operator::after,
    body.persona-investor::after,
    body.persona-dad::after {
        display: none !important;
    }
}

.hidden {
    display: none !important;
}

/* ==================== Character Selection Overlay ==================== */
.character-select-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Allow clicks to pass through to hamburger when overlay is not covering it */
    pointer-events: auto;
}

/* Dark background base layer for character selection */
.character-select-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0A0B0D;
    z-index: -2;
    pointer-events: none;
}

/* Background image with subtle opacity for character selection */
.character-select-overlay::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: url('/assets/character-selection-background.png');
    background-size: cover;
    /* Optimize background image loading */
    /* background-attachment: fixed; - Removed for Safari compatibility */
    /* will-change: transform; - Removed for Safari compatibility */
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0.5;
    z-index: -1;
    pointer-events: none;
    /* Safari Rendering Fixes */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    perspective: 1000px;
}

/* ==================== Selection Modal ==================== */
.character-select-modal {
    width: 90%;
    max-width: 1400px;
    max-height: 90vh;
    background: transparent;
    border-radius: 20px;
    overflow: visible;
    padding: 20px;
}

/* Scroll Header */
.scroll-header {
    padding: 40px 20px 30px;
    text-align: center;
    background: transparent;
}

.select-title {
    font-family: var(--font-primary);
    font-size: 38px;
    font-weight: 700;
    letter-spacing: 3px;
    color: rgba(255, 255, 255, 0.95) !important;
    margin: 0 0 10px 0;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
    text-transform: uppercase;
}

.select-subtitle {
    font-family: var(--font-secondary);
    font-size: 17.6px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.5) !important;
    letter-spacing: 0.5px;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
    margin-top: -5px;
}

/* ==================== Character Grid ==================== */
.character-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: clamp(15px, 3vw, 30px);
    padding: clamp(20px, 4vw, 40px);
    max-width: 1400px;
    margin: 0 auto;
    transition: all 0.3s ease;
}

/* ==================== Character Card ==================== */
.character-card {
    position: relative;
    background: transparent;
    backdrop-filter: none;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-card);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Opaque background layer for character cards */
.character-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #141618;
    z-index: 0;
    border-radius: 20px;
    pointer-events: none;
}

/* Ensure all card content is above the background */
.character-card>* {
    position: relative;
    z-index: 1;
}

.character-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.3);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Persona-specific hover borders only - no backgrounds */
.character-card[data-persona="founder"]:hover {
    background: transparent;
    border: 1px solid rgba(160, 164, 83, 0.4);
    box-shadow: 0 15px 50px rgba(160, 164, 83, 0.2);
}

.character-card[data-persona="operator"]:hover {
    background: transparent;
    border: 1px solid rgba(255, 184, 0, 0.4);
    box-shadow: 0 15px 50px rgba(255, 184, 0, 0.2);
}

.character-card[data-persona="investor"]:hover {
    background: transparent;
    border: 1px solid rgba(195, 159, 71, 0.4);
    box-shadow: 0 15px 50px rgba(195, 159, 71, 0.2);
}

.character-card[data-persona="dad"]:hover {
    background: transparent;
    border: 1px solid rgba(255, 127, 80, 0.4);
    box-shadow: 0 15px 50px rgba(255, 127, 80, 0.2);
}

/* Card Backgrounds - now handled by ::before pseudo-element */
.card-background {
    display: none;
}

.warlord-bg {
    background: linear-gradient(135deg, var(--founder-bg) 0%, var(--founder-accent) 100%);
}

.strategist-bg {
    background: linear-gradient(135deg, var(--operator-bg) 0%, var(--operator-accent) 100%);
}

.merchant-bg {
    background: linear-gradient(135deg, var(--investor-bg) 0%, var(--investor-accent) 100%);
}

.scholar-bg {
    background: linear-gradient(135deg, var(--dad-bg) 0%, var(--dad-accent) 100%);
}

.character-portrait {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    outline: none;
    border: none;
    /* Use mask to fade the image itself - much earlier and smoother fade */
    -webkit-mask-image: linear-gradient(to bottom,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 1) 45%,
            rgba(0, 0, 0, 0.995) 48%,
            rgba(0, 0, 0, 0.99) 51%,
            rgba(0, 0, 0, 0.98) 54%,
            rgba(0, 0, 0, 0.96) 57%,
            rgba(0, 0, 0, 0.93) 60%,
            rgba(0, 0, 0, 0.89) 62%,
            rgba(0, 0, 0, 0.84) 64%,
            rgba(0, 0, 0, 0.78) 66%,
            rgba(0, 0, 0, 0.71) 68%,
            rgba(0, 0, 0, 0.63) 70%,
            rgba(0, 0, 0, 0.54) 72%,
            rgba(0, 0, 0, 0.44) 74%,
            rgba(0, 0, 0, 0.34) 76%,
            rgba(0, 0, 0, 0.24) 78%,
            rgba(0, 0, 0, 0.15) 80%,
            rgba(0, 0, 0, 0.08) 82%,
            rgba(0, 0, 0, 0.03) 84%,
            rgba(0, 0, 0, 0) 86%);
    mask-image: linear-gradient(to bottom,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 1) 45%,
            rgba(0, 0, 0, 0.995) 48%,
            rgba(0, 0, 0, 0.99) 51%,
            rgba(0, 0, 0, 0.98) 54%,
            rgba(0, 0, 0, 0.96) 57%,
            rgba(0, 0, 0, 0.93) 60%,
            rgba(0, 0, 0, 0.89) 62%,
            rgba(0, 0, 0, 0.84) 64%,
            rgba(0, 0, 0, 0.78) 66%,
            rgba(0, 0, 0, 0.71) 68%,
            rgba(0, 0, 0, 0.63) 70%,
            rgba(0, 0, 0, 0.54) 72%,
            rgba(0, 0, 0, 0.44) 74%,
            rgba(0, 0, 0, 0.34) 76%,
            rgba(0, 0, 0, 0.24) 78%,
            rgba(0, 0, 0, 0.15) 80%,
            rgba(0, 0, 0, 0.08) 82%,
            rgba(0, 0, 0, 0.03) 84%,
            rgba(0, 0, 0, 0) 86%);
}

.character-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-object-fit: cover;
    /* Safari support */
    object-position: center 25%;
    -webkit-object-position: center 25%;
    /* Safari support - match video position to prevent jumping */
    transition: opacity 0.2s ease-out, 
                visibility 0.2s ease-out,
                transform 0.2s ease-out,
                filter 0.2s ease;
    filter: brightness(0.9) contrast(1.1);
    will-change: opacity, transform;
}

/* Zoom in on operator and investor faces */
.character-card[data-persona="operator"] .character-photo {
    transform: scale(1.1) translateY(-4%);
    -webkit-transform: scale(1.1) translateY(-4%);
    /* Safari support */
    object-position: center 25%;
    -webkit-object-position: center 25%;
    /* Safari support - match video position to prevent jumping */
}

.character-card[data-persona="investor"] .character-photo {
    transform: scale(1.1) translateY(-8%);
    -webkit-transform: scale(1.1) translateY(-8%);
    /* Safari support */
    object-position: center 25%;
    -webkit-object-position: center 25%;
    /* Safari support - match video position to prevent jumping */
}

.character-card[data-persona="dad"] .character-photo {
    transform: scale(1.1) translateY(-3%);
    -webkit-transform: scale(1.1) translateY(-3%);
    /* Safari support */
    object-position: center 25%;
    -webkit-object-position: center 25%;
    /* Safari support */
}

/* Portrait Hover Effects */
.character-card:hover .character-photo {
    filter: brightness(1.05) contrast(1.05) saturate(1.05);
}

.character-card[data-persona="investor"]:hover .character-photo {
    transform: scale(1.15) translateY(-8%);
    filter: brightness(1.05) contrast(1.05) saturate(1.05);
}

.character-card[data-persona="dad"]:hover .character-photo {
    transform: scale(1.15) translateY(0%);
    filter: brightness(1.05) contrast(1.05) saturate(1.05);
}

/* Desktop only video styles - prevent from applying on mobile */
@media (min-width: 769px) {
    .character-video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        -webkit-object-fit: cover;
        object-position: center 25%;
        -webkit-object-position: center 25%;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease-out, 
                    visibility 0.2s ease-out,
                    transform 0.2s ease-out;
        will-change: opacity, transform;
        transform: translateZ(0) translateY(-5%);
        -webkit-transform: translateZ(0) translateY(-5%);
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        min-height: 100%;
        min-width: 100%;
        filter: brightness(0.9) contrast(1.1);
        background-color: transparent;
        -webkit-mask-image: linear-gradient(to bottom,
                rgba(0, 0, 0, 1) 0%,
                rgba(0, 0, 0, 1) 40%,
                rgba(0, 0, 0, 0.9) 50%,
                rgba(0, 0, 0, 0.7) 60%,
                rgba(0, 0, 0, 0.5) 70%,
                rgba(0, 0, 0, 0.3) 80%,
                rgba(0, 0, 0, 0.1) 90%,
                rgba(0, 0, 0, 0) 100%);
        mask-image: linear-gradient(to bottom,
                rgba(0, 0, 0, 1) 0%,
                rgba(0, 0, 0, 1) 40%,
                rgba(0, 0, 0, 0.9) 50%,
                rgba(0, 0, 0, 0.7) 60%,
                rgba(0, 0, 0, 0.5) 70%,
                rgba(0, 0, 0, 0.3) 80%,
                rgba(0, 0, 0, 0.1) 90%,
                rgba(0, 0, 0, 0) 100%);
        pointer-events: none;
    }

    .character-card[data-persona="operator"] .character-video {
        filter: brightness(0.9) contrast(1.1);
        transition: opacity 0.2s ease-out, 
                    visibility 0.2s ease-out,
                    transform 0.2s ease-out;
        object-fit: cover;
        -webkit-object-fit: cover;
        object-position: center 25%;
        -webkit-object-position: center 25%;
        transform: translateZ(0) translateY(-10%);
        -webkit-transform: translateZ(0) translateY(-10%);
    }

    .character-card[data-persona="founder"] .character-video {
        object-position: center 25%;
        -webkit-object-position: center 25%;
        transform: translateZ(0) translateY(-8%);
        -webkit-transform: translateZ(0) translateY(-8%);
    }

    .character-card[data-persona="founder"]:hover .character-video,
    .character-card[data-persona="dad"]:hover .character-video,
    .character-card[data-persona="operator"]:hover .character-video,
    .character-card[data-persona="investor"]:hover .character-video {
        opacity: 0;
        visibility: hidden;
        filter: brightness(1.05) contrast(1.05) saturate(1.05);
        pointer-events: none;
        transition: opacity 0.2s ease-out, 
                    visibility 0.2s ease-out,
                    transform 0.2s ease-out;
    }

    .character-card[data-persona="founder"]:hover.video-playing .character-video,
    .character-card[data-persona="dad"]:hover.video-playing .character-video,
    .character-card[data-persona="operator"]:hover.video-playing .character-video,
    .character-card[data-persona="investor"]:hover.video-playing .character-video {
        opacity: 1;
        visibility: visible;
    }

    .character-card[data-persona="founder"]:hover.video-playing .character-photo,
    .character-card[data-persona="dad"]:hover.video-playing .character-photo,
    .character-card[data-persona="operator"]:hover.video-playing .character-photo,
    .character-card[data-persona="investor"]:hover.video-playing .character-photo {
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease-out, 
                    visibility 0.2s ease-out,
                    transform 0.2s ease-out;
    }

    .character-card[data-persona="dad"] .character-video {
        object-position: center 25%;
        -webkit-object-position: center 25%;
        transform: translateZ(0) scale(1.0) translateY(-5%);
        -webkit-transform: translateZ(0) scale(1.0) translateY(-5%);
    }

    .character-card[data-persona="investor"] .character-video {
        object-position: center 25%;
        -webkit-object-position: center 25%;
        transform: translateZ(0) translateY(-5%);
        -webkit-transform: translateZ(0) translateY(-5%);
    }
}


/* ==================== Bio Timeline Styles - AVANT-GARDE DESIGN ==================== */
.bio-introduction {
    margin-bottom: 4rem;
    padding: 3rem;
    position: relative;
    overflow: hidden;
    border-radius: 0;
    transform: skewY(-2deg);
}

.bio-introduction::before {
    content: '';
    position: absolute;
    top: 0;
    left: -50%;
    width: 200%;
    height: 100%;
    background: linear-gradient(135deg,
        transparent 30%,
        var(--theme-accent) 50%,
        transparent 70%);
    opacity: 0.05;
    transform: translateX(-100%);
    animation: shimmer 8s infinite;
}

.bio-introduction::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg,
        transparent,
        var(--theme-accent),
        transparent);
    animation: scan 3s infinite;
}

@keyframes shimmer {

    0%,
    100% {
        transform: translateX(-100%);
    }

    50% {
        transform: translateX(100%);
    }
}

@keyframes scan {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

.bio-introduction>* {
    transform: skewY(2deg);
}

.bio-introduction p {
    font-size: 1.1rem;
    /* Standardized to match welcome page */
    line-height: 1.8;
    margin-bottom: 1rem;
    color: var(--theme-text);
    position: relative;
}

/* FUTURISTIC TIMELINE DESIGN */
.bio-timeline {
    position: relative;
    margin-top: 4rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    overflow: hidden;
}



.timeline-item {
    position: relative;
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 2rem;
    padding: 2rem 0;
    align-items: center;
}

/* Alternating layout - only for visible items */
.timeline-item:nth-child(odd).visible {
    transform: translateX(0) translateY(0);
}

.timeline-item:nth-child(even).visible {
    transform: translateX(30px) translateY(0);
}

/* Year circle design - serif and elegant */
.timeline-year {
    position: relative;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Noto Serif', serif;
    font-size: 0.95rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1;
    color: var(--theme-accent);
    background: linear-gradient(135deg,
        rgba(var(--theme-accent-rgb), 0.02) 0%,
        rgba(var(--theme-accent-rgb), 0.05) 100%);
    border: 1px solid rgba(var(--theme-accent-rgb), 0.15);
    border-radius: 50%;
    z-index: 3;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    font-style: italic;
}

/* Subtle outer ring */
.timeline-year::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    border: 1px solid rgba(var(--theme-accent-rgb), 0.08);
    border-radius: 50%;
    pointer-events: none;
}

/* Inner glow effect */
.timeline-year::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    height: 70%;
    background: radial-gradient(circle,
        rgba(var(--theme-accent-rgb), 0.05) 0%,
        transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

/* Special styling for light themes to improve readability */
body.persona-investor .timeline-year,
body.persona-dad .timeline-year {
    font-weight: 500;
    font-style: normal;
}

/* Content card - clean and modern */
.timeline-content {
    position: relative;
    padding: 1.5rem 2rem;
    background: linear-gradient(135deg,
        rgba(var(--theme-accent-rgb), 0.02) 0%,
        rgba(var(--theme-accent-rgb), 0.04) 100%);
    border: 1px solid rgba(var(--theme-accent-rgb), 0.1);
    border-left: 2px solid rgba(var(--theme-accent-rgb), 0.3);
    border-radius: 8px;
    backdrop-filter: blur(5px);
    transition: all 0.3s ease;
}

/* Special styling for light themes (investor and dad) */
body.persona-investor .timeline-content,
body.persona-dad .timeline-content {
    background: linear-gradient(135deg,
        rgba(var(--theme-accent-rgb), 0.03) 0%,
        rgba(var(--theme-accent-rgb), 0.06) 100%);
    border: 1px solid rgba(var(--theme-accent-rgb), 0.15);
    border-left: 2px solid rgba(var(--theme-accent-rgb), 0.4);
}


.timeline-title {
    font-family: var(--font-primary);
    font-size: 1.2rem;
    /* Reduced and standardized */
    font-weight: 600;
    color: var(--theme-text);
    margin-bottom: 0.5rem;
    line-height: 1.3;
    text-transform: none;
    /* Remove uppercase for better readability */
    letter-spacing: normal;
}

.timeline-description {
    font-size: 1rem;
    /* Standardized to match body text */
    color: var(--theme-text);
    opacity: 0.75;
    line-height: 1.6;
    font-style: normal;
    /* Remove italic for consistency */
}

/* Scroll animations */
.timeline-item {
    opacity: 0;
    transform: translateY(-30px);
    transition: all 0.3s ease;
    /* Reduced from 0.6s to 0.3s for 2x speed */
}

.timeline-item.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger animation for timeline items - 2x faster */
.timeline-item:nth-child(1) {
    transition-delay: 0.05s;
}

.timeline-item:nth-child(2) {
    transition-delay: 0.1s;
}

.timeline-item:nth-child(3) {
    transition-delay: 0.15s;
}

.timeline-item:nth-child(4) {
    transition-delay: 0.2s;
}

.timeline-item:nth-child(5) {
    transition-delay: 0.25s;
}

.timeline-item:nth-child(6) {
    transition-delay: 0.3s;
}

.timeline-item:nth-child(7) {
    transition-delay: 0.35s;
}

.timeline-item:nth-child(8) {
    transition-delay: 0.4s;
}

.timeline-item:nth-child(9) {
    transition-delay: 0.45s;
}

.timeline-item:nth-child(10) {
    transition-delay: 0.5s;
}

.timeline-item:nth-child(11) {
    transition-delay: 0.55s;
}

.timeline-item:nth-child(12) {
    transition-delay: 0.6s;
}

.timeline-item:nth-child(13) {
    transition-delay: 0.65s;
}

.timeline-item:nth-child(14) {
    transition-delay: 0.7s;
}

/* Persona-specific colors */
body.persona-founder .timeline-year,
body.persona-founder .timeline-content {
    --theme-accent: var(--founder-accent);
    --theme-accent-rgb: var(--founder-accent-rgb);
}

body.persona-operator .timeline-year,
body.persona-operator .timeline-content {
    --theme-accent: var(--operator-accent);
    --theme-accent-rgb: var(--operator-accent-rgb);
}

body.persona-investor .timeline-year,
body.persona-investor .timeline-content {
    --theme-accent: var(--investor-accent);
    --theme-accent-rgb: var(--investor-accent-rgb);
}

body.persona-dad .timeline-year,
body.persona-dad .timeline-content {
    --theme-accent: var(--dad-accent);
    --theme-accent-rgb: var(--dad-accent-rgb);
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .bio-introduction {
        transform: none;
        padding: 2rem;
    }

    .bio-introduction>* {
        transform: none;
    }

    .timeline-item {
        grid-template-columns: 80px 1fr;
        gap: 1rem;
    }

    .timeline-item:nth-child(even).visible {
        transform: translateX(0) translateY(0);
    }

    .timeline-content {
        transform: none;
        padding: 1rem;
    }
}

/* ==================== Character Info ==================== */
.character-info {
    padding: 80px 20px 20px 20px;
    position: relative;
    z-index: 3;
    margin-top: -180px;
    background: transparent;
}

.character-name {
    font-family: var(--font-primary);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 2px;
    margin: 20px 0 0 0;
    color: rgba(255, 255, 255, 0.95) !important;
    text-transform: uppercase;
    transition: all 0.3s;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    transform-origin: center center;
    display: inline-block;
}

.character-title {
    font-family: var(--font-secondary);
    font-size: 15px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85) !important;
    margin: 6px 0 10px 0;
    letter-spacing: 0.5px;
    transition: color 0.3s;
}

.character-desc {
    font-family: var(--font-secondary);
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8) !important;
    line-height: 1.6;
    margin: 18px 0 15px 0;
    transition: color 0.3s;
    min-height: 45px;
    display: block;
    text-align: left;
}

/* Improve title and description readability on hover */
.character-card:hover .character-title {
    color: rgba(255, 255, 255, 0.95);
}

.character-card:hover .character-desc {
    color: rgba(255, 255, 255, 0.9);
}

/* Persona-specific Name Colors on Hover */
.character-card[data-persona="founder"]:hover .character-name {
    color: #E8F5E9;
    text-shadow:
        2px 2px 4px rgba(0, 0, 0, 0.5),
        0 0 30px rgba(160, 164, 83, 0.8),
        0 0 50px rgba(160, 164, 83, 0.4);
    transform: scale(1.05);
}

.character-card[data-persona="operator"]:hover .character-name {
    color: #FFF8E1;
    text-shadow:
        2px 2px 4px rgba(0, 0, 0, 0.5),
        0 0 30px rgba(255, 184, 0, 0.8),
        0 0 50px rgba(255, 184, 0, 0.4);
    transform: scale(1.05);
}

.character-card[data-persona="investor"]:hover .character-name {
    color: #FFFEF7;
    text-shadow:
        2px 2px 4px rgba(0, 0, 0, 0.5),
        0 0 30px rgba(195, 159, 71, 0.8),
        0 0 50px rgba(195, 159, 71, 0.4);
    transform: scale(1.05);
}

.character-card[data-persona="dad"]:hover .character-name {
    color: #FFF5F0;
    text-shadow:
        2px 2px 4px rgba(0, 0, 0, 0.5),
        0 0 30px rgba(255, 127, 80, 0.8),
        0 0 50px rgba(255, 127, 80, 0.4);
    transform: scale(1.05);
}

/* ==================== Scroll Footer ==================== */
.scroll-footer {
    padding: 20px 20px 30px;
    text-align: center;
    background: transparent;
}

.footer-text {
    font-family: var(--font-secondary);
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.5px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}

/* ==================== Main Container ==================== */
.container {
    display: flex;
    min-height: 100vh;
    opacity: 0;
    transition: opacity 0.3s ease;
    position: relative;
    z-index: 2;
}

/* ==================== Sidebar ==================== */
.sidebar {
    width: 280px;
    background: rgba(0, 0, 0, 0.15);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2;
}

body.persona-investor .sidebar,
body.persona-dad .sidebar {
    background: linear-gradient(180deg,
            rgba(0, 0, 0, 0.1) 0%,
            rgba(0, 0, 0, 0.05) 50%,
            transparent 100%);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    /* Same as founder and operator */
}

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

.site-title {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    color: var(--theme-text, #D8D8D8);
    margin: 0 0 15px 0;
    letter-spacing: 0.5px;
}

.site-title-link {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.3s ease;
    cursor: pointer;
}

.site-title-link:hover {
    opacity: 0.8;
    text-decoration: none;
}

.persona-badge {
    display: inline-block;
    padding: 5px 15px;
    border: 1px solid var(--theme-accent);
    background: rgba(255, 255, 255, 0.05);
    font-family: var(--font-body);
    font-size: 14px;
    letter-spacing: 2px;
    color: var(--theme-accent);
    text-transform: uppercase;
}

/* Hide persona-badge on desktop, keep on mobile */
@media (min-width: 769px) {
    .persona-badge {
        display: none !important;
    }

    /* Improve site title presentation now that badge is gone */
    .sidebar-header {
        padding: 19px 20px 0 10px;
        margin-bottom: 40px;
        text-align: center !important;
        /* Center the header content */
        display: flex;
        flex-direction: column;
        align-items: center;
        /* Ensure content is centered */
    }

    .site-title {
        margin: 0;
        /* Remove bottom margin since badge is gone */
        white-space: nowrap;
        /* Keep name on one line */
        text-align: center !important;
        /* Center the title */
        width: 100%;
        /* Full width to center properly */
    }

    .site-title-link {
        display: inline-block;
        /* Allow centering */
        text-align: center;
    }
}

body.persona-investor .persona-badge,
body.persona-dad .persona-badge {
    background: rgba(0, 0, 0, 0.05);
    color: #EAEAEA !important;
}

/* ==================== Navigation ==================== */
.navigation {
    flex-grow: 1;
}

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

.nav-item {
    margin: 7px 0;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    text-decoration: none;
    color: var(--theme-text, #D8D8D8);
    font-family: var(--font-body);
    font-size: 14px;
    border-radius: 0;
    border-left: 3px solid transparent;
    background: transparent;
    transition: all 0.2s;
}

.nav-link:hover {
    background: rgba(255, 255, 255, 0.05);
    /* border-left-color removed for cleaner hover */
}

body.persona-investor .nav-link:hover,
body.persona-dad .nav-link:hover {
    background: rgba(0, 0, 0, 0.03);
}

.nav-link.active {
    /* background removed for cleaner look */
    /* border-left-color removed */
    color: var(--theme-accent);
}

/* Light theme nav links use default active styles */

.nav-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-text, #D8D8D8);
    position: relative;
}

.nav-text {
    font-weight: 500;
    letter-spacing: 0.5px;
}

/* ==================== Main Content ==================== */
.content {
    flex: 1;
    padding: 40px;
    background: transparent;
    overflow-y: auto;
    position: relative;
    z-index: 2;
}

.page-header {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

body.persona-investor .page-header,
body.persona-dad .page-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.page-title {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--theme-text, #D8D8D8);
    margin: 0;
}

.content-body {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.75;
    color: var(--theme-text, #D8D8D8);
    letter-spacing: 0;
}

.intro-text {
    font-size: 17.6px;
    margin-bottom: 20px;
    font-weight: 500;
}

.text-link {
    color: inherit;
    text-decoration: underline;
    transition: opacity 0.2s;
}

.text-link:hover {
    opacity: 0.7;
}

/* ==================== Persona Switcher ==================== */
.persona-switcher {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: block;
    /* Show by default for mobile */
}

/* Desktop: Horizontal icon layout - Hide ONLY on desktop */
@media (min-width: 769px) {
    .persona-switcher {
        display: none !important;
        /* Hide only on desktop */
    }

    .persona-icons-container {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }

    .persona-options {
        display: flex;
        flex-direction: row;
        gap: 8px;
        margin-right: 8px;
        overflow: hidden;
        max-width: 0;
        opacity: 0;
        transition: max-width 0.5s cubic-bezier(0.4, 0.0, 0.2, 1), opacity 0.3s ease;
    }

    /* Show options on hover */
    .persona-icons-container:hover .persona-options {
        max-width: 216px;
        opacity: 1;
    }

    .persona-icon-btn {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.95);
        border: 2px solid rgba(0, 0, 0, 0.1);
        cursor: pointer;
        padding: 0;
        transition: all 0.3s ease;
        box-shadow: none;
        overflow: hidden;
        opacity: 0;
        transform: translateX(20px) scale(0.9);
        position: relative;
    }

    /* Staggered animation for icons appearing */
    .persona-icons-container:hover .persona-icon-btn {
        opacity: 1;
        transform: translateX(0) scale(1);
    }

    .persona-icons-container:hover .persona-icon-btn:nth-child(1) {
        transition-delay: 0.05s;
    }

    .persona-icons-container:hover .persona-icon-btn:nth-child(2) {
        transition-delay: 0.1s;
    }

    .persona-icons-container:hover .persona-icon-btn:nth-child(3) {
        transition-delay: 0.15s;
    }

    .persona-icons-container:hover .persona-icon-btn:nth-child(4) {
        transition-delay: 0.2s;
    }

    .persona-icon-btn:hover {
        transform: scale(1.1);
        box-shadow: none;
    }

    /* Persona-specific hover border colors */
    .persona-founder .persona-icon-btn:hover {
        border-color: var(--founder-accent);
    }

    .persona-operator .persona-icon-btn:hover {
        border-color: var(--operator-accent);
    }

    .persona-investor .persona-icon-btn:hover {
        border-color: var(--investor-accent);
    }

    .persona-dad .persona-icon-btn:hover {
        border-color: var(--dad-accent);
    }

    /* Hide current persona in the options */
    .persona-icon-btn.current-role {
        display: none !important;
    }

    .persona-icon-img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
        object-position: center 25%;
        display: block;
    }

    /* Zoom in operator and investor in persona switcher */
    .persona-icon-btn[data-persona="operator"] .persona-icon-img {
        transform: scale(1.2);
        object-position: center 30%;
    }

    .persona-icon-btn[data-persona="investor"] .persona-icon-img {
        transform: scale(1.2);
        object-position: center 30%;
    }

    /* Hide mobile dropdown on desktop */
    .persona-dropdown.mobile-only {
        display: none !important;
    }
}

.persona-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid rgba(0, 0, 0, 0.1);
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: all 0.3s;
    padding: 0;
    overflow: hidden;
}

/* Role-specific border colors for persona button */
body.persona-founder .persona-btn {
    border-color: var(--founder-accent);
    border-width: 2px;
}

body.persona-operator .persona-btn {
    border-color: var(--operator-accent);
    border-width: 2px;
}

body.persona-investor .persona-btn {
    border-color: var(--investor-accent);
    border-width: 2px;
}

body.persona-dad .persona-btn {
    border-color: var(--dad-accent);
    border-width: 2px;
}

.current-persona-avatar {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 0;
}

.persona-profile-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
    display: block;
}

/* Zoom in operator and investor current persona images */
body.persona-operator .persona-profile-img[src*="operator"],
body.persona-investor .persona-profile-img[src*="investor"] {
    transform: scale(1.2);
    object-position: center 30%;
}

.persona-btn:hover {
    transform: scale(1.05);
    box-shadow: none;
}

.persona-dropdown {
    position: absolute;
    top: 60px;
    right: 0;
    background: white;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    padding: 10px;
    min-width: 200px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 15px;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 14px;
    color: #333;
    transition: background 0.2s;
    border-radius: 5px;
}

.dropdown-item:hover {
    background: rgba(0, 0, 0, 0.05);
}

.dropdown-divider {
    height: 1px;
    background: rgba(0, 0, 0, 0.1);
    margin: 10px 0;
}

/* ==================== Writing Page Styles ==================== */
.writing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 25px;
    margin-top: 30px;
}

.writing-item {
    background: rgba(245, 242, 232, 0.6);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 25px;
    transition: all 0.3s ease;
}

.writing-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    background: rgba(245, 242, 232, 0.9);
}

.writing-item h3 {
    font-family: var(--font-primary);
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 10px 0;
    letter-spacing: 0.5px;
}

.writing-item h3 a {
    color: #1a1a1a;
    text-decoration: none;
    transition: color 0.2s;
}

.writing-item h3 a:hover {
    color: var(--founder-accent);
}

.writing-item p {
    font-family: var(--font-secondary);
    font-size: 17.6px;
    line-height: 1.6;
    color: #4a4a4a;
    margin: 0;
}

/* Questions page text styles */
.questions-container {
    padding: 20px 0;
    counter-reset: question-counter;
}

.question-item {
    font-size: 17.6px !important;
    line-height: 1.8;
    margin: 0 0 24px 0;
    padding: 20px 24px;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.02) 0%,
        rgba(255, 255, 255, 0.04) 100%);
    border-left: 3px solid rgba(var(--theme-accent-rgb), 0.5);
    border-radius: 8px;
    position: relative;
    transition: all 0.3s ease;
    counter-increment: question-counter;
}

.question-item::before {
    content: "?";
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: var(--theme-accent);
    color: #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
}


/* Light theme adjustments */
body.persona-investor .question-item,
body.persona-dad .question-item {
    background: linear-gradient(135deg,
        rgba(0, 0, 0, 0.02) 0%,
        rgba(0, 0, 0, 0.04) 100%);
    border-left: 3px solid rgba(var(--theme-accent-rgb), 0.5);
    border-radius: 8px;
}


body.persona-investor .question-item::before,
body.persona-dad .question-item::before {
    background: var(--theme-accent);
    color: #fff;
}

.questions-container p {
    font-size: 17.6px !important;
    line-height: 1.8;
}

.questions-section-header {
    font-size: 18px;
    font-weight: 600;
    color: var(--theme-accent);
    margin: 40px 0 20px 0;
    padding: 12px 0;
    border-bottom: 1px solid rgba(var(--theme-accent-rgb), 0.2);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* First section header (Economics) should have minimal top margin */
.questions-container .questions-section-header:first-of-type {
    margin-top: 8px;
}

/* Scroll animations for questions */
.question-item {
    opacity: 0;
    transform: translateY(-30px);
}

.question-item.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered animation delays */
.question-item:nth-child(1) {
    transition-delay: 0s;
}

.question-item:nth-child(2) {
    transition-delay: 0.1s;
}

.question-item:nth-child(3) {
    transition-delay: 0.2s;
}

.question-item:nth-child(4) {
    transition-delay: 0.3s;
}

.question-item:nth-child(5) {
    transition-delay: 0.4s;
}

.question-item:nth-child(6) {
    transition-delay: 0.5s;
}

.question-item:nth-child(7) {
    transition-delay: 0.6s;
}

.question-item:nth-child(8) {
    transition-delay: 0.7s;
}

.question-item:nth-child(9) {
    transition-delay: 0.8s;
}

.question-item:nth-child(10) {
    transition-delay: 0.9s;
}

/* ==================== Investment Page Styles ==================== */
.investment-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.investment-list li {
    margin-bottom: 8px;
    padding: 4px 0;
    position: relative;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

.investment-list li::before {
    content: "";
    width: 0;
    height: 0;
    border-left: 6px solid rgba(255, 255, 255, 0.3);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    margin-right: 8px;
    transition: all 0.3s ease;
}

.investment-list li:hover::before {
    border-left-color: var(--theme-accent);
}

.investment-list .external-link {
    font-size: 17.6px !important;
    line-height: 1.6;
    color: var(--theme-accent);
    text-decoration: none;
    font-weight: 500;
    position: relative;
    transition: all 0.3s ease;
}

.investment-list .external-link::after {
    content: "↗";
    display: inline-block;
    margin-left: 6px;
    font-size: 14px;
    opacity: 0.7;
    transition: all 0.3s ease;
}

@supports (-webkit-touch-callout: none) {
    @media (max-width: 768px) {
        .investment-list .external-link::after {
            content: "\2197";
            font-family: 'Noto Sans', sans-serif;
            font-variant: normal;
            text-rendering: optimizeLegibility;
            -webkit-font-feature-settings: normal;
            font-feature-settings: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
    }
}

.investment-list .external-link:hover {
    color: #fff;
    padding-left: 4px;
}

.investment-list .external-link:hover::after {
    transform: translate(2px, -2px);
    opacity: 1;
}

.investment-status {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.4);
    font-style: normal;
    margin-left: 8px;
    display: inline-block;
    font-weight: 400;
    letter-spacing: 0.02em;
}

/* Light theme adjustments for investments */
body.persona-investor .investment-list li::before,
body.persona-dad .investment-list li::before {
    border-left-color: rgba(var(--theme-accent-rgb), 0.3);
}

body.persona-investor .investment-list li:hover::before,
body.persona-dad .investment-list li:hover::before {
    border-left-color: var(--theme-accent);
}

body.persona-investor .investment-list .external-link,
body.persona-dad .investment-list .external-link {
    color: var(--theme-accent);
}

body.persona-investor .investment-list .external-link:hover,
body.persona-dad .investment-list .external-link:hover {
    color: var(--theme-accent);
    opacity: 0.8;
}

body.persona-investor .investment-status,
body.persona-dad .investment-status {
    color: rgba(0, 0, 0, 0.5);
}

/* Scroll animations for investment items */
.investment-list li {
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.investment-list li.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ==================== Mobile Responsive ==================== */
.hamburger,
#hamburger {
    display: none;
    position: fixed;
    top: 18px;
    left: 15px;
    width: 30px;
    height: 24px;
    border: none;
    background: transparent;
    cursor: pointer;
    z-index: 1002;
    flex-direction: column;
    justify-content: space-around;
    padding: 0;
}

.hamburger span,
#hamburger span {
    display: block;
    width: 100%;
    height: 3px;
    background: var(--theme-text, #fff);
    margin: 0;
    transition: all 0.3s;
    border-radius: 2px;
    transform-origin: left;
}

/* Hide mobile role title on desktop */
.mobile-role-title {
    display: none;
}

/* ==================== Persona Theme Classes ==================== */
body.persona-founder {
    --theme-primary: var(--investor-bg);
    /* Use investor's background color for all roles */
    --theme-accent: var(--founder-accent);
    --theme-accent-rgb: var(--founder-accent-rgb);
    --theme-text: var(--investor-text);
    /* Use dark text color for light background readability */
    background-color: var(--investor-bg) !important;
    /* Use investor's background color */
    color: var(--investor-text) !important;
}

body.persona-operator {
    --theme-primary: var(--investor-bg);
    --theme-accent: var(--operator-accent);
    --theme-accent-rgb: var(--operator-accent-rgb);
    --theme-text: var(--investor-text);
    /* Use dark text color for light background readability */
    background-color: var(--investor-bg) !important;
    color: var(--investor-text) !important;
}

body.persona-investor {
    --theme-primary: var(--investor-bg);
    /* Use investor's background color for all roles */
    --theme-accent: var(--investor-accent);
    --theme-accent-rgb: var(--investor-accent-rgb);
    --theme-text: var(--investor-text);
    /* Use dark text color for light background readability */
    background-color: var(--investor-bg) !important;
    /* Use investor's background color */
    color: var(--investor-text) !important;
}

body.persona-dad {
    --theme-primary: var(--investor-bg);
    /* Use investor's background color for all roles */
    --theme-accent: var(--dad-accent);
    --theme-accent-rgb: var(--dad-accent-rgb);
    --theme-text: var(--investor-text);
    /* Use dark text color for light background readability */
    background-color: var(--investor-bg) !important;
    /* Use investor's background color */
    color: var(--investor-text) !important;
}

/* Apply theme colors to specific elements */
body.persona-founder,
body.persona-operator,
body.persona-investor,
body.persona-dad {
    transition: background-color 0.5s ease, color 0.3s ease;
}

body.persona-founder .content,
body.persona-operator .content,
body.persona-investor .content,
body.persona-dad .content {
    background-color: transparent;
    color: inherit;
}

body.persona-founder h1,
body.persona-founder h2,
body.persona-founder h3,
body.persona-founder p,
body.persona-founder li,
body.persona-operator h1,
body.persona-operator h2,
body.persona-operator h3,
body.persona-operator p,
body.persona-operator li {
    color: var(--theme-text);
}

body.persona-founder a,
body.persona-operator a,
body.persona-investor a,
body.persona-dad a {
    color: var(--theme-accent);
}

body.persona-founder .nav-link:hover,
body.persona-operator .nav-link:hover,
body.persona-investor .nav-link:hover,
body.persona-dad .nav-link:hover,
body.persona-founder .nav-link.active,
body.persona-operator .nav-link.active,
body.persona-investor .nav-link.active,
body.persona-dad .nav-link.active {
    color: var(--theme-accent);
    /* border-color removed for cleaner look */
}

body.persona-founder .sidebar,
body.persona-operator .sidebar,
body.persona-investor .sidebar,
body.persona-dad .sidebar {
    background: linear-gradient(180deg,
            rgba(0, 0, 0, 0.1) 0%,
            rgba(0, 0, 0, 0.05) 50%,
            transparent 100%);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

body.persona-investor .nav-link,
body.persona-dad .nav-link {
    color: var(--theme-text);
}

body.persona-investor h1,
body.persona-investor h2,
body.persona-investor h3,
body.persona-investor h4,
body.persona-investor h5,
body.persona-investor h6,
body.persona-investor p,
body.persona-investor li,
body.persona-investor span,
body.persona-dad h1,
body.persona-dad h2,
body.persona-dad h3,
body.persona-dad h4,
body.persona-dad h5,
body.persona-dad h6,
body.persona-dad p,
body.persona-dad li,
body.persona-dad span {
    color: var(--theme-text);
}

/* Adjust borders and shadows for light backgrounds */
body.persona-investor .card,
body.persona-investor .article-item,
body.persona-investor .investment-item,
body.persona-dad .card,
body.persona-dad .article-item,
body.persona-dad .investment-item {
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* Adjust hover states for light backgrounds */
body.persona-investor .nav-link:hover,
body.persona-dad .nav-link:hover {
    background: rgba(0, 0, 0, 0.05);
}

/* Light theme nav links use default active styles */

/* ==================== Split View Layout ==================== */
.split-view {
    display: flex;
    gap: 30px;
    height: 100vh;
    padding: 40px;
}

.list-pane {
    width: 300px;
    min-width: 300px;
    overflow-y: auto;
    padding-right: 20px;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.reading-pane {
    flex: 1;
    overflow-y: auto;
    padding: 0 20px;
}

/* ==================== Post List Styles ==================== */
.post-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.post-list li {
    margin: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.post-list li:last-child {
    border-bottom: none;
}

.post-list a {
    display: block;
    padding: 12px 15px;
    text-decoration: none;
    color: var(--theme-text, #D8D8D8);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
    position: relative;
}

.post-list a:hover {
    background: rgba(255, 255, 255, 0.05);
    border-left-color: var(--theme-accent, var(--founder-accent));
    padding-left: 20px;
}

.post-list a.active {
    background: rgba(255, 255, 255, 0.08);
    border-left-color: var(--theme-accent, var(--founder-accent));
    color: var(--theme-accent, var(--founder-accent));
}

/* Adjust for light themes */
body.persona-investor .post-list li,
body.persona-dad .post-list li {
    border-bottom-color: rgba(0, 0, 0, 0.05);
}

body.persona-investor .post-list a:hover,
body.persona-dad .post-list a:hover {
    background: rgba(0, 0, 0, 0.03);
}

body.persona-investor .post-list a.active,
body.persona-dad .post-list a.active {
    background: rgba(0, 0, 0, 0.05);
}

/* ==================== Quote and Question List Styles ==================== */
.quote-categories,
.question-categories {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.category-btn {
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--theme-text, #D8D8D8);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 20px;
}

.category-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--theme-accent, var(--founder-accent));
}

.category-btn.active {
    background: var(--theme-accent, var(--founder-accent));
    color: var(--theme-primary, var(--founder-bg));
    border-color: var(--theme-accent, var(--founder-accent));
}

body.persona-investor .category-btn,
body.persona-dad .category-btn {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.1);
}

body.persona-investor .category-btn:hover,
body.persona-dad .category-btn:hover {
    background: rgba(0, 0, 0, 0.05);
}

/* ==================== Empty State ==================== */
.empty-state {
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-family: var(--font-secondary);
    font-size: 16px;
    font-style: italic;
    margin-top: 50px;
}

body.persona-investor .empty-state,
body.persona-dad .empty-state {
    color: rgba(0, 0, 0, 0.4);
}

/* ==================== Article Content Styles ==================== */
.article-header {
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 30px;
}

.article-title {
    font-family: var(--font-primary);
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 1px;
    margin: 0;
    color: var(--theme-text, #D8D8D8);
}

.article-content {
    font-family: var(--font-secondary);
    font-size: 17.6px;
    line-height: 1.9;
    color: var(--theme-text, #D8D8D8);
    max-width: 100%;
    word-wrap: break-word;
    hyphens: auto;
}

.article-content h3 {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    margin: 40px 0 18px 0;
    padding-top: 8px;
    padding-bottom: 12px;
    padding-left: 16px;
    color: var(--theme-text, #D8D8D8);
    line-height: 1.4;
    letter-spacing: 0.3px;
    border-left: 3px solid var(--theme-accent);
    background: rgba(255, 255, 255, 0.02);
    position: relative;
}

.article-content h3:first-child {
    margin-top: 0;
}

/* Apply h3 style to p tags containing only strong (section headings) */
.article-content p>strong:only-child {
    display: block;
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    margin: 40px 0 18px 0;
    padding-top: 8px;
    padding-bottom: 12px;
    padding-left: 16px;
    color: var(--theme-text, #D8D8D8);
    line-height: 1.4;
    letter-spacing: 0.3px;
    border-left: 3px solid var(--theme-accent);
    background: rgba(255, 255, 255, 0.02);
    position: relative;
}

.article-content p:has(> strong:only-child) {
    margin: 0;
    padding: 0;
}

.article-content p:has(> strong:only-child):first-child {
    margin-top: 0;
}

.article-content p:has(> strong:only-child) strong {
    font-weight: 600;
    color: var(--theme-text, #D8D8D8);
}

/* Apply h3 style to h2 in Leadership article */
.article-content h2 {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    margin: 40px 0 18px 0;
    padding-top: 8px;
    padding-bottom: 12px;
    padding-left: 16px;
    color: var(--theme-text, #D8D8D8);
    line-height: 1.4;
    letter-spacing: 0.3px;
    border-left: 3px solid var(--theme-accent);
    background: rgba(255, 255, 255, 0.02);
    position: relative;
}

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

.article-content p {
    margin-bottom: 24px;
    text-align: justify;
    text-justify: inter-word;
}

.article-content p:last-child {
        margin-bottom: 0;
}

.article-content ul,
.article-content ol {
    margin: 24px 0;
    padding-left: 32px;
    line-height: 1.9;
}

.article-content ul {
    list-style-type: disc;
}

.article-content ol {
    list-style-type: decimal;
}

.article-content li {
    margin-bottom: 12px;
    padding-left: 8px;
}

.article-content li::marker {
    color: var(--theme-accent, var(--founder-accent));
}

/* Style numbered paragraphs (1. 2. 3. 4. etc.) with accent color - same as Asset Classes */
.article-content .number {
    color: var(--theme-accent, var(--founder-accent));
    font-weight: 600;
}

.article-content li p {
    margin-bottom: 8px;
}

.article-content a {
    color: var(--theme-accent);
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    transition: opacity 0.2s, color 0.2s;
}

.article-content a:hover {
    opacity: 0.85;
    color: var(--theme-accent);
}

/* External links in article content - same style as investments */
.article-content a[href^="http"],
.article-content a[target="_blank"] {
    text-decoration: none;
    font-weight: 500;
        position: relative;
        transition: all 0.3s ease;
    color: var(--theme-accent);
}

.article-content a[href^="http"]::after,
.article-content a[target="_blank"]::after {
    content: "↗";
    display: inline-block;
    margin-left: 6px;
    font-size: 14px;
    opacity: 0.7;
        transition: all 0.3s ease;
}

@supports (-webkit-touch-callout: none) {
    @media (max-width: 768px) {

        .article-content a[href^="http"]::after,
        .article-content a[target="_blank"]::after {
            content: "\2197";
            font-family: 'Noto Sans', sans-serif;
            font-variant: normal;
            text-rendering: optimizeLegibility;
            -webkit-font-feature-settings: normal;
            font-feature-settings: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
    }
}

.article-content a[href^="http"]:hover,
.article-content a[target="_blank"]:hover {
    color: #fff;
    padding-left: 4px;
}

.article-content a[href^="http"]:hover::after,
.article-content a[target="_blank"]:hover::after {
    transform: translate(2px, -2px);
        opacity: 1;
    }

.article-content strong {
        font-weight: 600;
    color: var(--theme-text);
    letter-spacing: 0.2px;
}

.article-content em {
    font-style: italic;
        color: var(--theme-text);
}

.article-content code {
    font-family: 'Noto Sans Mono', monospace;
    font-size: 15.5px;
        background: rgba(255, 255, 255, 0.05);
    padding: 2px 6px;
    border-radius: 3px;
    color: var(--theme-accent);
}

.article-content blockquote {
    margin: 24px 0;
    padding: 16px 20px;
    border-left: 4px solid var(--theme-accent);
    background: rgba(255, 255, 255, 0.02);
    font-style: italic;
    color: var(--theme-text);
}

.article-content hr {
    margin: 32px 0;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    height: 0;
}

/* Table styles in article content - 14px font size */
.article-content table {
        width: 100%;
    border-collapse: collapse;
    margin: 24px 0;
        font-size: 14px;
        line-height: 1.6;
    }

.article-content table th,
.article-content table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 14px;
}

.article-content table th {
    font-weight: 600;
    color: var(--theme-accent);
    background: rgba(255, 255, 255, 0.02);
}

.article-content table tr:last-child td {
    border-bottom: none;
}

.article-content table a {
    font-size: 14px;
    color: var(--theme-accent);
    text-decoration: none;
}

.article-content table a:hover {
    color: #fff;
    opacity: 0.9;
}

/* Light theme adjustments */
body.persona-investor .article-header,
body.persona-dad .article-header {
    border-bottom-color: rgba(0, 0, 0, 0.1);
}

body.persona-investor .article-content code,
body.persona-dad .article-content code {
    background: rgba(0, 0, 0, 0.05);
}

body.persona-investor .article-content blockquote,
body.persona-dad .article-content blockquote {
    background: rgba(0, 0, 0, 0.02);
    border-left-color: var(--theme-accent);
}

body.persona-investor .article-content hr,
body.persona-dad .article-content hr {
    border-top-color: rgba(0, 0, 0, 0.1);
}

/* Light theme adjustments for tables */
body.persona-investor .article-content table th,
body.persona-dad .article-content table th,
body.persona-investor .article-content table td,
body.persona-dad .article-content table td {
    border-bottom-color: rgba(0, 0, 0, 0.1);
}

body.persona-investor .article-content table th,
body.persona-dad .article-content table th {
    background: rgba(0, 0, 0, 0.02);
}

/* Light theme adjustments for h3, h2, and strong headings */
body.persona-investor .article-content h3,
body.persona-dad .article-content h3,
body.persona-investor .article-content h2,
body.persona-dad .article-content h2,
body.persona-investor .article-content p:has(> strong:only-child),
body.persona-dad .article-content p:has(> strong:only-child) {
    background: rgba(0, 0, 0, 0.02);
    border-left-color: var(--theme-accent);
}

/* Light theme adjustments for external links */
body.persona-investor .article-content a[href^="http"]:hover,
body.persona-dad .article-content a[href^="http"]:hover,
body.persona-investor .article-content a[target="_blank"]:hover,
body.persona-dad .article-content a[target="_blank"]:hover {
    color: var(--theme-accent);
    opacity: 0.8;
}

/* ==================== Quotes Styles ==================== */
.quotes-container {
    padding: 20px 0;
}

.quote-item {
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    /* Scroll animation - same as timeline */
    opacity: 0;
    transform: translateY(-30px);
    transition: all 0.6s ease;
}

/* Visible state when scrolled into view */
.quote-item.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger animation for quote items */
.quote-item:nth-child(1) {
    transition-delay: 0.1s;
}

.quote-item:nth-child(2) {
    transition-delay: 0.2s;
}

.quote-item:nth-child(3) {
    transition-delay: 0.3s;
}

.quote-item:nth-child(4) {
    transition-delay: 0.4s;
}

.quote-item:nth-child(5) {
    transition-delay: 0.5s;
}

.quote-item:nth-child(6) {
    transition-delay: 0.6s;
}

.quote-item:nth-child(7) {
    transition-delay: 0.7s;
}

.quote-item:nth-child(8) {
    transition-delay: 0.8s;
}

.quote-item:nth-child(9) {
    transition-delay: 0.9s;
}

.quote-item:nth-child(10) {
    transition-delay: 1.0s;
}

body.persona-investor .quote-item,
body.persona-dad .quote-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

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

.quote-text {
    font-family: var(--font-display);
        font-size: 17.6px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--theme-text, #D8D8D8);
    margin: 0 0 15px 0;
    padding-left: 25px;
    position: relative;
    font-style: italic;
}

.quote-author {
    display: block;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 500;
    color: var(--theme-accent);
    font-style: normal;
    text-align: right;
    margin-top: 10px;
    padding-right: 25px;
}

/* ==================== Writing Detail Pages ==================== */
/* Apply persona themes to old-style pages */
body.persona-founder .container,
body.persona-operator .container,
body.persona-investor .container,
body.persona-dad .container {
    background-color: transparent;
    color: var(--theme-text, inherit);
}

body.persona-founder .sidebar,
body.persona-operator .sidebar {
    background: rgba(0, 0, 0, 0.1);
    color: var(--theme-text);
}

body.persona-investor .sidebar,
body.persona-dad .sidebar {
    background: linear-gradient(180deg,
            rgba(0, 0, 0, 0.1) 0%,
            rgba(0, 0, 0, 0.05) 50%,
            transparent 100%);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--theme-text);
    /* Same as founder and operator */
}

body.persona-founder main.content,
body.persona-operator main.content,
body.persona-investor main.content,
body.persona-dad main.content {
    background: transparent;
    color: var(--theme-text);
}

/* Update old navigation to use theme colors */
body.persona-founder .nav-list a,
body.persona-operator .nav-list a,
body.persona-investor .nav-list a,
body.persona-dad .nav-list a {
    color: var(--theme-text);
}

body.persona-founder .nav-list a:hover,
body.persona-operator .nav-list a:hover,
body.persona-investor .nav-list a:hover,
body.persona-dad .nav-list a:hover {
    background: rgba(255, 255, 255, 0.05);
}

body.persona-founder .nav-list a.active,
body.persona-operator .nav-list a.active,
body.persona-investor .nav-list a.active,
body.persona-dad .nav-list a.active {
    /* background removed for cleaner look */
    color: var(--theme-accent);
}


/* ==================== Mobile & Responsive Styles ==================== */
/* Unified mobile styles */

/* ==================== Mobile Character Selection ==================== */

/* Hearthstone Card Deck Styles */
.card-deck-container {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1400px;
    height: 350px;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    pointer-events: none;
    perspective: 1000px;
}

.card-deck-container.hidden {
    display: none;
}

.deck-card {
    position: absolute;
    width: 140px;
    height: 200px;
    background-size: cover;
    background-position: center 20%;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    pointer-events: auto;
    transform-origin: center bottom;
    border: 2px solid #d4af37;
    background-color: #1a1a1a;
    overflow: hidden;
    bottom: 0;
    opacity: 0;
}

.deck-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.3) 70%,
        rgba(0, 0, 0, 0.7) 100%);
    pointer-events: none;
}

.deck-card:hover {
    width: 180px !important;
    height: 260px !important;
    z-index: 100 !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.8), 0 0 30px rgba(212, 175, 55, 0.6);
}

.deck-card.active-card {
    width: 170px !important;
    height: 240px !important;
    border: 3px solid #00ff00;
    box-shadow: 0 0 25px rgba(0, 255, 0, 0.5), 0 8px 20px rgba(0, 0, 0, 0.7);
}

.deck-card-inner {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 10px;
    box-sizing: border-box;
    color: white;
    text-align: center;
}

.deck-card-name {
    font-family: 'Noto Serif', serif;
    font-size: 0.85rem;
    font-weight: bold;
    margin: 0 0 4px 0;
    text-transform: uppercase;
    color: #f4e4a4;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9);
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease 0.1s;
}

.deck-card-desc {
    font-size: 0.65rem;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    margin: 0;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease 0.15s;
}

/* Show text on hover */
.deck-card:hover .deck-card-name,
.deck-card:hover .deck-card-desc {
    opacity: 1;
    transform: translateY(0);
}

/* Always show text for active card */
.deck-card.active-card .deck-card-name,
.deck-card.active-card .deck-card-desc {
    opacity: 1;
    transform: translateY(0);
}

/* Simple fade-in animation */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.deck-card {
    animation: fadeIn 0.5s ease-out forwards;
}


/* ==================== Reading Progress System ==================== */
.progress-system {
    margin-top: 20px;
    margin-bottom: 10px;
    padding: 15px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Light theme adjustments */
.persona-investor .progress-system,
.persona-dad .progress-system {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.persona-investor .progress-text,
.persona-dad .progress-text {
    color: rgba(0, 0, 0, 0.5);
}

.persona-investor .progress-bar-bg,
.persona-dad .progress-bar-bg {
    background: rgba(0, 0, 0, 0.1);
}

/* Progress bar styling */
.progress-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    font-size: 0.7rem;
}

.progress-text {
    color: rgba(255, 255, 255, 0.5);
    font-weight: 400;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    font-size: 0.65rem;
}

/* Founder and Operator XP text colors - use investor/dad colors */
body.persona-founder .progress-text {
    color: var(--investor-text);
}

body.persona-operator .progress-text {
    color: var(--dad-text);
}

.progress-percentage {
    color: var(--theme-accent, var(--founder-accent));
    font-weight: bold;
    font-family: 'Noto Sans Mono', monospace;
    font-size: 0.75rem;
}

.progress-bar-container {
    position: relative;
}

.progress-bar-bg {
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.progress-bar-fill {
    height: 100%;
    width: 0%;
    background: var(--theme-accent, var(--founder-accent));
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

/* Persona-specific progress bar colors */
.persona-founder .progress-percentage {
    color: var(--founder-accent);
}

.persona-founder .progress-bar-fill {
    background: var(--founder-accent);
}

.persona-operator .progress-percentage {
    color: var(--operator-accent);
}

.persona-operator .progress-bar-fill {
    background: var(--operator-accent);
}

.persona-investor .progress-percentage {
    color: var(--investor-accent);
}

.persona-investor .progress-bar-fill {
    background: var(--investor-accent);
}

.persona-dad .progress-percentage {
    color: var(--dad-accent);
}

.persona-dad .progress-bar-fill {
    background: var(--dad-accent);
}

/* Founder persona sword icon styling */
.persona-founder .nav-link.active .nav-icon svg {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    filter: drop-shadow(0 0 2px rgba(160, 164, 83, 0.6));
    animation: swordPulse 2s ease-in-out infinite;
}

@keyframes swordPulse {

    0%,
    100% {
        filter: drop-shadow(0 0 2px rgba(160, 164, 83, 0.4));
        transform: translateY(0);
    }

    50% {
        filter: drop-shadow(0 0 4px rgba(160, 164, 83, 0.9));
        transform: translateY(-1px);
    }
}

/* Operator persona whiteboard icon styling */
.persona-operator .nav-link.active .nav-icon svg {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    filter: drop-shadow(0 0 2px rgba(255, 184, 0, 0.6));
    animation: whiteboardPulse 2s ease-in-out infinite;
}

@keyframes whiteboardPulse {

    0%,
    100% {
        filter: drop-shadow(0 0 2px rgba(255, 184, 0, 0.4));
        transform: translateY(0);
    }

    50% {
        filter: drop-shadow(0 0 4px rgba(255, 184, 0, 0.9));
        transform: translateY(-1px);
    }
}

/* Investor persona coin icon styling */
.persona-investor .nav-link.active .nav-icon svg {
    filter: drop-shadow(0 0 3px rgba(22, 101, 52, 0.6));
    animation: coinBounce 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes coinBounce {

    0%,
    100% {
        filter: drop-shadow(0 0 3px rgba(22, 101, 52, 0.4));
        transform: translateY(0);
    }

    50% {
        filter: drop-shadow(0 0 5px rgba(22, 101, 52, 0.7));
        transform: translateY(-5px);
    }
}

/* Dad persona stuffie bear icon styling */
.persona-dad .nav-link.active .nav-icon svg {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    filter: drop-shadow(0 0 3px rgba(255, 127, 80, 0.6));
    animation: stuffieBounce 2s ease-in-out infinite;
}

@keyframes stuffieBounce {
    0%,
    100% {
        filter: drop-shadow(0 0 3px rgba(255, 127, 80, 0.4));
        transform: translateY(0);
    }

    50% {
        filter: drop-shadow(0 0 5px rgba(255, 127, 80, 0.8));
        transform: translateY(-3px);
    }
}




/* Mobile Adjustments */
@media (max-width: 768px) {
    .card-deck-container {
        display: none !important;
    }

    .progress-system {
        display: none;
        /* Hide on mobile for now */
    }
}

/* Responsive adjustments for smaller screens */
@media (max-width: 1400px) {
    .card-deck-container {
        width: 1000px;
    }

    .deck-card {
        width: 170px;
        height: 240px;
    }
}

@media (max-width: 1200px) {
    .card-deck-container {
        width: 800px;
        bottom: -60px;
    }

    .deck-card {
        width: 150px;
        height: 210px;
    }

    .deck-card-name {
        font-size: 0.95rem;
    }
}

/* ==================== Role Card Display - Game Card Style ==================== */
.role-card-container {
    margin-top: 5px;
    padding: 0 20px;
}

.role-card {
    width: 100%;
    height: 320px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border: 4px solid #E8E8E8;
    background: #2a2a2a;
    border-radius: 0;
    /* 90-degree corners */
    display: flex;
    flex-direction: column;
}

/* Inner card with colored border */
.role-card::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    border: 3px solid var(--theme-accent);
    border-radius: 0;
    z-index: 2;
    pointer-events: none;
}

/* Background gradient - subtle overlay */
.role-card::after {
    content: '';
    position: absolute;
    top: 11px;
    left: 11px;
    right: 11px;
    bottom: 11px;
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.1) 60%,
        rgba(0, 0, 0, 0.6) 100%);
    z-index: 1;
}

/* Character image - much clearer */
.role-card-image {
    position: absolute;
    top: 11px;
    left: 11px;
    right: 11px;
    bottom: 11px;
    z-index: 0;
}

.role-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.9;
    /* Much clearer image */
}

/* Name banners */
.role-card-banners {
    position: absolute;
    bottom: 15px;
    left: 0;
    right: 0;
    z-index: 4;
}

.role-card-name-banner {
    background: var(--theme-accent);
    color: white;
    padding: 10px 30px 10px 20px;
    margin: 0 0 8px 0;
    position: relative;
    width: auto;
    min-width: 55%;
    max-width: 65%;
    clip-path: polygon(0 0, calc(100% - 15px) 0, calc(100% - 5px) 100%, 0 100%);
    font-family: 'Noto Serif', serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.role-card-subtitle-banner {
    background: rgba(var(--theme-rgb), 0.7);
    color: white;
    padding: 6px 30px 6px 20px;
    margin: 0 0 8px 0;
    position: relative;
    display: inline-block;
    width: auto;
    min-width: 70%;
    max-width: 85%;
    clip-path: polygon(0 0, calc(100% - 15px) 0, calc(100% - 7px) 100%, 0 100%);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.5px;
    opacity: 0.9;
}

.role-card-name-banner span,
.role-card-subtitle-banner span {
    position: relative;
    z-index: 1;
}

/* Founder and Operator card text colors - use investor/dad colors */
body.persona-founder .role-card-name-banner,
body.persona-founder .role-card-subtitle-banner {
    color: var(--investor-text);
}

body.persona-operator .role-card-name-banner,
body.persona-operator .role-card-subtitle-banner {
    color: var(--dad-text);
}

/* Persona-specific banner widths */
body.persona-operator .role-card-name-banner {
    min-width: 55%;
    max-width: 72%;
}

body.persona-investor .role-card-name-banner {
    min-width: 55%;
    max-width: 69%;
}

body.persona-dad .role-card-name-banner {
    min-width: 30%;
    max-width: 68%;
}

/* Subtitle banner - same for all personas */
body.persona-dad .role-card-subtitle-banner {
    min-width: 60%;
    max-width: 74%;
    clip-path: polygon(0 0, calc(100% - 15px) 0, calc(100% - 7px) 100%, 0 100%);
}

body.persona-operator .role-card-subtitle-banner,
body.persona-investor .role-card-subtitle-banner,
body.persona-founder .role-card-subtitle-banner {
    min-width: 70%;
    max-width: 85%;
    clip-path: polygon(0 0, calc(100% - 15px) 0, calc(100% - 7px) 100%, 0 100%);
}

/* Persona-specific theme RGB values for gradients */
body.persona-founder {
    --theme-rgb: 160, 164, 83;
    /* var(--founder-accent) */
}

/* Founder card specific border colors */
body.persona-founder .role-card {
    border-color: rgba(160, 164, 83, 0.3);
    /* Accent color with transparency */
}

body.persona-founder .role-card::before {
    border-color: var(--founder-accent);
    /* Accent color full */
}

body.persona-operator {
    --theme-rgb: 217, 154, 0;
    /* var(--operator-accent) */
}

/* Operator card specific border colors */
body.persona-operator .role-card {
    border-color: rgba(217, 154, 0, 0.3);
    /* var(--operator-accent) with transparency */
}

body.persona-operator .role-card::before {
    border-color: var(--operator-accent);
    /* Accent color full */
}

body.persona-investor {
    --theme-rgb: 195, 159, 71;
    /* var(--investor-accent) */
}

/* Investor card specific border colors */
body.persona-investor .role-card {
    border-color: rgba(195, 159, 71, 0.3);
    /* Accent color with transparency */
}

body.persona-investor .role-card::before {
    border-color: var(--investor-accent);
    /* Accent color full */
}

body.persona-dad {
    --theme-rgb: 255, 127, 80;
    /* var(--dad-accent) */
}

/* Dad card specific border colors */
body.persona-dad .role-card {
    border-color: rgba(255, 127, 80, 0.3);
    /* var(--dad-accent) with transparency */
}

body.persona-dad .role-card::before {
    border-color: var(--dad-accent);
    /* Accent color full */
}

/* Role Selection Options - Sleek Contained Design */
.role-selection-options {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 8px 16px;
    border-radius: 20px;
    position: relative;
    max-width: 160px;
    margin-left: auto;
    margin-right: auto;
}

/* Balanced glow effect */
.role-selection-options::before {
    content: '';
    position: absolute;
    inset: -1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--theme-rgb), 0.25) 50%,
        transparent 100%);
    border-radius: 20px;
    opacity: 0;
    z-index: -1;
    animation: slideGlow 3s ease-in-out infinite;
}

@keyframes slideGlow {
    0% {
        opacity: 0;
        transform: translateX(-100%);
    }

    50% {
        opacity: 0.45;
    }

    100% {
        opacity: 0;
        transform: translateX(100%);
    }
}

.role-option {
    width: 8px;
    height: 8px;
    padding: 0;
    background: rgba(255, 255, 255, 0.15);
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: visible;
}

/* Darker dots for light background personas */
body.persona-investor .role-option {
    background: rgba(0, 0, 0, 0.15);
    border: 1.5px solid rgba(0, 0, 0, 0.25);
}

body.persona-dad .role-option {
    background: rgba(0, 0, 0, 0.15);
    border: 1.5px solid rgba(0, 0, 0, 0.25);
}

/* Floating label - only for non-active roles, smaller font */
.role-option:not(.active)::before {
    content: attr(aria-label);
    position: absolute;
    bottom: 150%;
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    padding: 2px 6px;
    background: rgba(0, 0, 0, 0.95);
    color: var(--theme-accent, white);
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 3px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Arrow - smaller and cleaner - only for non-active */
.role-option:not(.active)::after {
    content: '';
    position: absolute;
    bottom: calc(150% - 3px);
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 3px solid rgba(0, 0, 0, 0.95);
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.role-option:not(.active):hover::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.role-option:not(.active):hover::after {
    opacity: 1;
}

.role-option:hover {
    transform: scale(1.5);
    background: var(--theme-accent, rgba(255, 255, 255, 0.4));
    border-color: var(--theme-accent, rgba(255, 255, 255, 0.6));
    box-shadow: 0 0 10px rgba(var(--theme-rgb, 255, 255, 255), 0.3);
}

/* Active state - subtle pill shape */
.role-option.active {
    width: 20px;
    height: 6px;
    border-radius: 3px;
    background: var(--theme-accent);
    border-color: var(--theme-accent);
    transform: scale(1);
    box-shadow: 0 0 6px rgba(var(--theme-rgb), 0.25);
    position: relative;
}

/* Pulsing effect for active */
.role-option.active::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 6px;
    background: var(--theme-accent);
    opacity: 0;
    animation: activePulse 2s ease-in-out infinite;
    z-index: -1;
}

@keyframes activePulse {

    0%,
    100% {
        opacity: 0;
        transform: scale(1);
    }

    50% {
        opacity: 0.2;
        transform: scale(1.2);
    }
}

/* Persona-specific hover states */
.role-option[data-role="founder"]:hover {
    background: var(--founder-accent);
    border-color: var(--founder-accent);
    box-shadow: 0 0 10px rgba(160, 164, 83, 0.4);
}

.role-option[data-role="founder"]:not(.active):hover::before {
    color: var(--founder-accent);
}

.role-option[data-role="operator"]:hover {
    background: var(--operator-accent);
    border-color: var(--operator-accent);
    box-shadow: 0 0 10px rgba(255, 184, 0, 0.4);
}

.role-option[data-role="operator"]:not(.active):hover::before {
    color: var(--operator-accent);
}

.role-option[data-role="investor"]:hover {
    background: var(--investor-accent);
    border-color: var(--investor-accent);
    box-shadow: 0 0 10px rgba(195, 159, 71, 0.4);
}

.role-option[data-role="investor"]:not(.active):hover::before {
    color: var(--investor-accent);
}

.role-option[data-role="dad"]:hover {
    background: var(--dad-accent);
    border-color: var(--dad-accent);
    box-shadow: 0 0 10px rgba(255, 127, 80, 0.4);
}

.role-option[data-role="dad"]:not(.active):hover::before {
    color: var(--dad-accent);
}

/* Active states for each persona */
body.persona-founder .role-option[data-role="founder"].active {
    background: var(--founder-accent);
    border-color: var(--founder-accent);
    --theme-accent: var(--founder-accent);
    --theme-rgb: 160, 164, 83;
}

body.persona-operator .role-option[data-role="operator"].active {
    background: var(--operator-accent);
    border-color: var(--operator-accent);
    --theme-accent: var(--operator-accent);
    --theme-rgb: 255, 184, 0;
}

body.persona-investor .role-option[data-role="investor"].active {
    background: var(--investor-accent);
    border-color: var(--investor-accent);
    box-shadow: 0 0 8px rgba(195, 159, 71, 0.5), inset 0 0 3px rgba(0, 0, 0, 0.2);
    --theme-accent: var(--investor-accent);
    --theme-rgb: 195, 159, 71;
}

body.persona-dad .role-option[data-role="dad"].active {
    background: var(--dad-accent);
    border-color: var(--dad-accent);
    box-shadow: 0 0 8px rgba(255, 127, 80, 0.5), inset 0 0 3px rgba(0, 0, 0, 0.1);
    --theme-accent: var(--dad-accent);
    --theme-rgb: 255, 127, 80;
}

/* Mobile hide role card */
@media (max-width: 768px) {
    .role-card-container {
        display: none;
    }
}



/* ==================== Additional Mobile Components ==================== */


/**
 * Mobile-Specific Styles
 * Professional responsive design for all mobile devices
 *
 * @author Alan James Curtis
 * @version 2.0.0
 */



/* ==================== Viewport and Base Mobile Styles ==================== */
@viewport {
    width: device-width;
    initial-scale: 1;
    maximum-scale: 5;
    user-scalable: yes;
}

/* Prevent horizontal scroll */
html {
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
    min-height: 100vh;
    position: relative;
}

/* Remove body backgrounds - will be handled per page */
body::before,
body::after {
    display: none;
}

/* ==================== Mobile Character Selection ==================== */
@media (max-width: 768px) {



    /* Hide container when character select is visible */
    .character-select-overlay:not(.hidden)~.container {
        display: none;
    }

    .character-select-modal {
        width: 100%;
        min-height: 100%;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        overflow: visible;
        background: transparent;
        padding-bottom: 50px;
        /* Extra padding at bottom */
        padding-bottom: calc(50px + env(safe-area-inset-bottom));
        /* For iOS safe area */
    }

    .scroll-header {
        padding: 20px 15px 15px 15px;
        /* top: 20px, right: 15px, bottom: 15px, left: 15px */
        text-align: center;
    }

    .select-title {
        font-size: 19px;
        /* Adjusted to fit on one line */
        letter-spacing: 1.5px;
        margin-bottom: 8px;
        /* Reduced from 15px */
        margin-top: 5px;
        color: #F0F2F5 !important;
        text-transform: uppercase;
        /* Professional, authoritative */
        font-weight: 700;
    }

    .select-subtitle {
        font-size: 12px;
        font-weight: 300;
        /* Lighter weight on mobile */
        margin-top: 0;
        /* Closer to title */
        margin-bottom: 5px;
        /* Reduced from 10px */
        color: rgba(216, 216, 216, 0.5) !important;
        /* Less visible with lower opacity */
        letter-spacing: 0.3px;
    }

    /* Character Selection - One main card with thumbnails */
    .character-grid {
        display: flex;
        flex-direction: column;
        padding: 0;
        gap: 0px;
        overflow: visible;
        min-height: auto;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Main character display area */
    .character-main-display {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px;
        min-height: auto;
        margin-bottom: 0;
        position: relative;
        touch-action: pan-y;
        /* Allow vertical scroll but detect horizontal swipes */
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Character cards */
    .character-card {
        display: none !important;
        width: 95%;
        max-width: 380px;
        height: auto;
        min-height: 440px;
        /* Slightly reduced from 480px since we removed character-desc */
        padding: 0;
        flex-direction: column;
        border-radius: 12px;
        position: relative;
        overflow: visible;
        margin: 0 auto;
        box-sizing: border-box;
    }

    /* Background color for characterSelect div on mobile */
    #characterSelect {
        background: #0A0B0D !important;
    }

    /* Same background color for all character cards on mobile - now using ::before */
    .character-card[data-persona="founder"],
    .character-card[data-persona="operator"],
    .character-card[data-persona="investor"],
    .character-card[data-persona="dad"] {
        background: transparent !important;
        /* Make card transparent */
    }

    /* Opaque background layer for mobile character cards */
    .character-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #141618;
        z-index: 0;
        border-radius: 12px;
        pointer-events: none;
    }

    /* Ensure all content is above the background layer */
    .character-card>* {
        position: relative;
        z-index: 1;
    }

    .character-portrait,
    .character-info,
    .character-photo,
    .character-video {
        position: relative;
        z-index: 1;
    }

    /* Disable the old background elements */
    .character-card[data-persona="founder"] .warlord-bg,
    .character-card[data-persona="operator"] .strategist-bg,
    .character-card[data-persona="investor"] .merchant-bg,
    .character-card[data-persona="dad"] .scholar-bg,
    .character-card[data-persona="dad"] .artist-bg,
    .character-card .card-background {
        display: none !important;
    }

    /* Remove character-portrait layer on mobile - keep frame */
    .character-portrait {
        display: contents;
        /* This makes the portrait act as if it doesn't exist, photo and video become direct children of frame */
    }


    /* Only active card is visible with smooth transition */
    .character-card.active {
        display: flex !important;
        animation: slideIn 0.3s ease-out;
    }

    @keyframes slideIn {
        from {
            opacity: 0;
            transform: translateX(50px);
        }

        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    /* Maintain the same fade gradient for active cards - apply to photo directly */
    .character-card.active .character-photo {
        -webkit-mask-image: linear-gradient(to bottom,
                rgba(0, 0, 0, 1) 0%,
                rgba(0, 0, 0, 1) 80%,
                /* Full opacity until 80% - where title starts */
                rgba(0, 0, 0, 0.98) 82%,
                rgba(0, 0, 0, 0.95) 84%,
                rgba(0, 0, 0, 0.90) 86%,
                rgba(0, 0, 0, 0.82) 88%,
                rgba(0, 0, 0, 0.70) 90%,
                rgba(0, 0, 0, 0.55) 92%,
                rgba(0, 0, 0, 0.38) 94%,
                rgba(0, 0, 0, 0.20) 96%,
                rgba(0, 0, 0, 0.08) 98%,
                rgba(0, 0, 0, 0) 100%) !important;
        mask-image: linear-gradient(to bottom,
                rgba(0, 0, 0, 1) 0%,
                rgba(0, 0, 0, 1) 80%,
                /* Full opacity until 80% - where title starts */
                rgba(0, 0, 0, 0.98) 82%,
                rgba(0, 0, 0, 0.95) 84%,
                rgba(0, 0, 0, 0.90) 86%,
                rgba(0, 0, 0, 0.82) 88%,
                rgba(0, 0, 0, 0.70) 90%,
                rgba(0, 0, 0, 0.55) 92%,
                rgba(0, 0, 0, 0.38) 94%,
                rgba(0, 0, 0, 0.20) 96%,
                rgba(0, 0, 0, 0.08) 98%,
                rgba(0, 0, 0, 0) 100%) !important;
    }

    /* Adjust frame for main card - portrait is removed so frame contains photo/video directly */
    .character-frame {
        height: 380px;
        width: 100%;
        position: relative;
        margin: 0;
        padding: 0;
        border-radius: 12px 12px 0 0;
        overflow: hidden;
    }

    /* Extra zoom for operator and investor on mobile */
    .character-card[data-persona="operator"] .character-photo {
        transform: scale(1.15) translateY(-2%);
        /* Reduced zoom to match others */
        object-position: center 0%;
        /* Moved to top to bring head closer */
    }

    .character-card[data-persona="investor"] .character-photo {
        transform: scale(1.15) translateY(-6%);
        /* Reduced zoom and move up slightly */
        object-position: center 0%;
        /* Moved to top to bring head closer */
    }

    .character-card[data-persona="dad"] .character-photo {
        transform: scale(1.12) translateY(3%);
        /* Reduced zoom and move down slightly */
        object-position: center 20%;
        /* Moved up to 20% to bring head closer to top */
    }

    /* Info section for main card - natural height, no scroll */
    .character-info {
        height: auto;
        padding: 30px 20px 15px 20px;
        /* Moderate bottom padding for spacing */
        margin-top: -60px;
        /* Reduced overlap from -110px to -60px to show more image */
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        width: 100%;
        box-sizing: border-box;
        position: relative;
        z-index: 1;
        overflow: visible;
        /* Transparent background to show character-selection-background.png */
        background: transparent;
        border-radius: 0 0 12px 12px;
    }

    /* Ensure consistent spacing for all cards */
    /* Remove persona-specific info padding - all use the default */

    .character-name {
        font-size: 22px !important;
        /* Professional size for Libre Baskerville on mobile */
        font-weight: 700;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        margin-top: 12px;
        /* Increased from 5px to move down a bit */
        margin-bottom: 0px;
        color: #F0F2F5 !important;
        width: auto !important;
        display: block !important;
    }

    .character-title {
        font-size: 14px !important;
        font-weight: 400 !important;
        /* Lighter weight on mobile */
        margin: 4px 0 4px 0;
        /* Added top margin to move down a bit */
        color: #D8D8D8 !important;
        letter-spacing: 0.3px;
    }

    .character-desc {
        font-size: 12px !important;
        line-height: 1.4;
        margin: 12px 0 10px 0;
        /* Added more space before description */
        min-height: unset;
        color: rgba(234, 234, 234, 0.8) !important;
    }



    /* Swipe Indicators */
    .swipe-indicators {
        display: flex;
        justify-content: center;
        gap: 8px;
        padding: 2px 5px 10px 5px;
        /* Minimal top padding to bring very close to card */
        margin-bottom: 0;
    }

    .swipe-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.3);
        transition: all 0.3s ease;
    }

    .swipe-dot.active {
        width: 24px;
        border-radius: 4px;
        background: var(--theme-accent, var(--founder-accent));
    }

    /* Swipe Hint - Hidden */
    .swipe-hint {
        display: none;
        /* Hide the swipe to explore roles text */
    }


    /* Select Role Button */
    .select-role-container {
        padding: 15px 15px 25px;
        /* Tighter padding to bring button closer */
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 20px;
        width: 95%;
        max-width: 380px;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }

    /* Prevent width change on click */
    .select-role-container:active {
        width: 95% !important;
        max-width: 380px !important;
    }

    .select-role-btn {
        background: linear-gradient(135deg, var(--theme-accent, var(--founder-accent)), var(--theme-secondary, #8B8F4E));
        color: #1a1a2e;
        border: none;
        border-radius: 8px;
        padding: 12px 40px;
        margin: 0;
        /* Remove margin on mobile */
        font-size: 16px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        cursor: pointer;
        transition: all 0.3s ease;
        font-family: 'Noto Serif', serif;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
        position: relative;
        overflow: hidden;
    }

    .select-role-btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.5s ease;
    }

    .select-role-btn:hover::before {
        left: 100%;
    }

    .select-role-btn:active {
        transform: scale(0.95);
        box-shadow: 0 2px 8px rgba(160, 164, 83, 0.2);
    }

    .select-role-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    /* Footer text inside button container */
    .mobile-footer-text {
        font-size: 12px;
        color: rgba(234, 234, 234, 0.5);
        /* Reduced opacity for less emphasis */
        margin: 4px 0 0 0;
        font-style: italic;
        letter-spacing: 0.5px;
        text-align: center;
    }

    /* Mobile: Show video preview by default (paused state) - optimized for Safari */
    /* NOTE: object-position and transform are already fixed in the rule above */
    .character-card[data-persona="founder"] .character-video,
    .character-card[data-persona="operator"] .character-video,
    .character-card[data-persona="dad"] .character-video,
    .character-card[data-persona="investor"] .character-video {
        /* Hide video until it's loaded and first frame is ready - prevents poster/first frame from showing */
        opacity: 0 !important;
        visibility: hidden !important;
        display: block !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 2 !important;
        /* NO transitions - already set above but ensure it */
        transition: none !important;
        -webkit-transition: none !important;
        object-fit: cover !important;
        -webkit-object-fit: cover !important;
        /* FIXED - already set above but ensure consistency - use 25% as default */
        object-position: center 25% !important;
        -webkit-object-position: center 25% !important;
        will-change: opacity !important;
        pointer-events: auto !important;
        min-width: 100% !important;
        min-height: 100% !important;
        /* FIXED - already set above but ensure consistency */
        transform: translateZ(0) !important;
        -webkit-transform: translateZ(0) !important;
        filter: brightness(0.9) contrast(1.1) !important;
        -webkit-backface-visibility: hidden !important;
        backface-visibility: hidden !important;
        /* Apply same gradient mask as image for smooth fade */
        -webkit-mask-image: linear-gradient(to bottom,
                rgba(0, 0, 0, 1) 0%,
                rgba(0, 0, 0, 1) 45%,
                rgba(0, 0, 0, 0.995) 48%,
                rgba(0, 0, 0, 0.99) 51%,
                rgba(0, 0, 0, 0.98) 54%,
                rgba(0, 0, 0, 0.96) 57%,
                rgba(0, 0, 0, 0.93) 60%,
                rgba(0, 0, 0, 0.89) 62%,
                rgba(0, 0, 0, 0.84) 64%,
                rgba(0, 0, 0, 0.78) 66%,
                rgba(0, 0, 0, 0.71) 68%,
                rgba(0, 0, 0, 0.63) 70%,
                rgba(0, 0, 0, 0.54) 72%,
                rgba(0, 0, 0, 0.44) 74%,
                rgba(0, 0, 0, 0.34) 76%,
                rgba(0, 0, 0, 0.24) 78%,
                rgba(0, 0, 0, 0.15) 80%,
                rgba(0, 0, 0, 0.08) 82%,
                rgba(0, 0, 0, 0.03) 84%,
                rgba(0, 0, 0, 0) 86%) !important;
        mask-image: linear-gradient(to bottom,
                rgba(0, 0, 0, 1) 0%,
                rgba(0, 0, 0, 1) 45%,
                rgba(0, 0, 0, 0.995) 48%,
                rgba(0, 0, 0, 0.99) 51%,
                rgba(0, 0, 0, 0.98) 54%,
                rgba(0, 0, 0, 0.96) 57%,
                rgba(0, 0, 0, 0.93) 60%,
                rgba(0, 0, 0, 0.89) 62%,
                rgba(0, 0, 0, 0.84) 64%,
                rgba(0, 0, 0, 0.78) 66%,
                rgba(0, 0, 0, 0.71) 68%,
                rgba(0, 0, 0, 0.63) 70%,
                rgba(0, 0, 0, 0.54) 72%,
                rgba(0, 0, 0, 0.44) 74%,
                rgba(0, 0, 0, 0.34) 76%,
                rgba(0, 0, 0, 0.24) 78%,
                rgba(0, 0, 0, 0.15) 80%,
                rgba(0, 0, 0, 0.08) 82%,
                rgba(0, 0, 0, 0.03) 84%,
                rgba(0, 0, 0, 0) 86%) !important;
    }

    /* Mobile: Hide image completely - not needed on mobile */
    .character-card[data-persona="founder"] .character-photo,
    .character-card[data-persona="operator"] .character-photo,
    .character-card[data-persona="dad"] .character-photo,
    .character-card[data-persona="investor"] .character-photo {
        display: none !important;
    }

    /* Video filter for specific personas on mobile */
    /* NOTE: object-position and transform are already fixed in the rule above */
    .character-card[data-persona="dad"] .character-video,
    .character-card[data-persona="investor"] .character-video {
        filter: brightness(1.05) contrast(1.05) saturate(1.05) !important;
        /* NO transitions - already set above */
        transition: none !important;
        -webkit-transition: none !important;
        /* FIXED - already set above */
        transform: translateZ(0) !important;
        -webkit-transform: translateZ(0) !important;
        /* FIXED - already set above - use 25% as default */
        object-position: center 25% !important;
        -webkit-object-position: center 25% !important;
    }

    /* Mobile: Show video when playing - instant, no black screen */
    /* NOTE: object-position and transform are already fixed in the rule above */
    .character-card[data-persona="founder"].video-playing .character-video,
    .character-card[data-persona="operator"].video-playing .character-video,
    .character-card[data-persona="dad"].video-playing .character-video,
    .character-card[data-persona="investor"].video-playing .character-video {
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
        pointer-events: auto !important;
        /* NO transitions - already set above */
        transition: none !important;
        -webkit-transition: none !important;
        /* FIXED - already set above */
        transform: translateZ(0) !important;
        -webkit-transform: translateZ(0) !important;
        /* FIXED - already set above - use 25% as default */
        object-position: center 25% !important;
        -webkit-object-position: center 25% !important;
        -webkit-backface-visibility: hidden !important;
        backface-visibility: hidden !important;
        /* Keep gradient mask when playing for smooth fade */
        -webkit-mask-image: linear-gradient(to bottom,
                rgba(0, 0, 0, 1) 0%,
                rgba(0, 0, 0, 1) 80%,
                rgba(0, 0, 0, 0.98) 82%,
                rgba(0, 0, 0, 0.95) 84%,
                rgba(0, 0, 0, 0.90) 86%,
                rgba(0, 0, 0, 0.82) 88%,
                rgba(0, 0, 0, 0.70) 90%,
                rgba(0, 0, 0, 0.55) 92%,
                rgba(0, 0, 0, 0.38) 94%,
                rgba(0, 0, 0, 0.20) 96%,
                rgba(0, 0, 0, 0.08) 98%,
                rgba(0, 0, 0, 0) 100%) !important;
        mask-image: linear-gradient(to bottom,
                rgba(0, 0, 0, 1) 0%,
                rgba(0, 0, 0, 1) 80%,
                rgba(0, 0, 0, 0.98) 82%,
                rgba(0, 0, 0, 0.95) 84%,
                rgba(0, 0, 0, 0.90) 86%,
                rgba(0, 0, 0, 0.82) 88%,
                rgba(0, 0, 0, 0.70) 90%,
                rgba(0, 0, 0, 0.55) 92%,
                rgba(0, 0, 0, 0.38) 94%,
                rgba(0, 0, 0, 0.20) 96%,
                rgba(0, 0, 0, 0.08) 98%,
                rgba(0, 0, 0, 0) 100%) !important;
    }

    /* Maintain alignment when video is playing - all at top */
    /* NOTE: object-position and transform are already fixed in the rule above */
    /* This rule is redundant but kept for clarity - values already set above */

    /* Mobile: Image not needed - always hidden */
    .character-card[data-persona="founder"].video-playing .character-photo,
    .character-card[data-persona="operator"].video-playing .character-photo,
    .character-card[data-persona="dad"].video-playing .character-photo,
    .character-card[data-persona="investor"].video-playing .character-photo {
        display: none !important;
    }

    /* Mobile: Image not needed - always hidden */
    .character-card[data-persona="founder"].video-paused .character-photo,
    .character-card[data-persona="operator"].video-paused .character-photo,
    .character-card[data-persona="dad"].video-paused .character-photo,
    .character-card[data-persona="investor"].video-paused .character-photo {
        display: none !important;
    }

    /* Mobile: When paused, show video preview (image not needed) */
    /* NOTE: object-position and transform are already fixed in the rule above */
    .character-card[data-persona="founder"].video-paused .character-video,
    .character-card[data-persona="operator"].video-paused .character-video,
    .character-card[data-persona="dad"].video-paused .character-video,
    .character-card[data-persona="investor"].video-paused .character-video {
        opacity: 1 !important;
        visibility: visible !important;
        z-index: 2 !important;
        /* NO transitions - already set above */
        transition: none !important;
        -webkit-transition: none !important;
        /* FIXED - already set above - use 25% as default */
        object-position: center 25% !important;
        -webkit-object-position: center 25% !important;
        /* FIXED - already set above */
        transform: translateZ(0) !important;
        -webkit-transform: translateZ(0) !important;
    }

    /* Keep character-info and character-name in place when video is playing */
    .character-card.video-playing .character-info {
        /* Keep the same values as the default .character-info */
        padding: 30px 20px 10px 20px !important;
        /* Same as default */
        margin-top: -60px !important;
        /* Same as default */
        position: relative !important;
        width: 100% !important;
    }


    .character-card.video-playing .character-name {
        /* Keep same as default character-name */
        margin-top: 5px !important;
        /* Same as default */
        margin-bottom: 0px !important;
        text-align: left !important;
        position: relative !important;
        width: auto !important;
        display: block !important;
    }

    /* Ensure character-name stays consistent when video stops (after playing) */
    .character-card:not(.video-playing) .character-name {
        transform: none !important;
        position: relative !important;
        left: 0 !important;
        width: auto !important;
    }

    /* Ensure padding stays consistent when card is active */
    .character-card.active .character-info {
        padding: 30px 20px 15px 20px !important;
        /* Same as default - moderate bottom padding */
        margin-top: -60px !important;
        /* Same as default */
    }

    /* Apply same tap effect to all cards on mobile - more specific selectors */
    .character-card.active .character-name,
    .character-card[data-persona="founder"].active .character-name,
    .character-card[data-persona="operator"].active .character-name,
    .character-card[data-persona="investor"].active .character-name,
    .character-card[data-persona="dad"].active .character-name {
        color: #FFFFFF !important;
        /* Pure white for all cards */
        text-shadow:
            2px 2px 4px rgba(0, 0, 0, 0.5),
            0 0 30px rgba(255, 255, 255, 0.6),
            0 0 50px rgba(255, 255, 255, 0.3) !important;
        font-size: 23px !important;
        /* Increase from 22px to 23px */
        transform: none !important;
        /* Ensure no transform */
    }

    /* Maintain same glow effect when video is playing on mobile */
    .character-card.video-playing .character-name {
        color: #FFFFFF !important;
        /* Pure white for all cards */
        text-shadow:
            2px 2px 4px rgba(0, 0, 0, 0.5),
            0 0 30px rgba(255, 255, 255, 0.6),
            0 0 50px rgba(255, 255, 255, 0.3) !important;
        font-size: 23px !important;
        /* Keep increased size when video plays */
    }

    /* Touch feedback - but no border on active */
    .character-card:active {
        transform: scale(0.98);
        transition: transform 0.1s;
        border: 1px solid rgba(255, 255, 255, 0.05) !important;
        /* Keep default border, no highlight */
    }

    /* Prevent width change on click */
    .character-card:active,
    .character-card.active:active {
        width: 95% !important;
        max-width: 380px !important;
    }

    /* Ensure border is removed when video stops playing */
    .character-card.active:not(.video-playing) {
        border: 1px solid rgba(255, 255, 255, 0.05) !important;
    }

    /* Remove border on focus to prevent it from staying on */
    .character-card:focus {
        outline: none;
        border: 1px solid rgba(255, 255, 255, 0.05) !important;
    }

    /* Hide scroll indicators - not needed with grid layout */
    .scroll-indicators {
        display: none;
    }

}

/* ==================== Mobile Navigation ==================== */
@media (max-width: 768px) {
    /* Mobile: COMPLETE video style reset - override ALL desktop and other rules */
    /* This must come first and be the most specific to prevent any jumping */
    /* 
     * ISSUE: Browser reflow causes object-position to jump during class changes (Chrome & Safari)
     * - Class changes trigger browser reflow which recalculates CSS
     * - During reflow, CSS rules are applied in order, causing temporary position jumps
     * - This affects both Chrome and Safari (not just Safari)
     * 
     * SOLUTION: 
     * 1. Use center 25% as default position
     * 2. Fix via inline styles with !important flag in JS BEFORE class changes to prevent jumping
     * 3. Re-enforce 25% after class change using requestAnimationFrame
     * 4. This prevents the temporary jump while maintaining the desired 25% position
     */
    .character-video,
    .character-card .character-video,
    .character-card[data-persona="founder"] .character-video,
    .character-card[data-persona="operator"] .character-video,
    .character-card[data-persona="dad"] .character-video,
    .character-card[data-persona="investor"] .character-video,
    .character-card[data-persona="founder"].video-playing .character-video,
    .character-card[data-persona="operator"].video-playing .character-video,
    .character-card[data-persona="dad"].video-playing .character-video,
    .character-card[data-persona="investor"].video-playing .character-video,
    .character-card[data-persona="founder"].video-paused .character-video,
    .character-card[data-persona="operator"].video-paused .character-video,
    .character-card[data-persona="dad"].video-paused .character-video,
    .character-card[data-persona="investor"].video-paused .character-video {
        /* FIXED position - NEVER changes - use 25% as default, JS will fix to 25% during clicks to prevent jumping */
        object-position: center 25% !important;
        -webkit-object-position: center 25% !important;
        /* FIXED transform - NO translateY, NO scale, ONLY translateZ for hardware acceleration */
        transform: translateZ(0) !important;
        -webkit-transform: translateZ(0) !important;
        /* NO transitions - prevents any animation/jumping */
        transition: none !important;
        -webkit-transition: none !important;
        /* NO animations - prevents any animation/jumping */
        animation: none !important;
        -webkit-animation: none !important;
        /* NO will-change - prevents browser optimization that might cause jumping */
        will-change: opacity !important;
        -webkit-will-change: opacity !important;
    }

    /* Hide persona switcher when character selection is visible */
    .character-select-overlay:not(.hidden)~* .persona-switcher,
    .character-select-overlay:not(.hidden)~.persona-switcher,
    #characterSelect:not(.hidden)~* .persona-switcher,
    #characterSelect:not(.hidden)+* .persona-switcher,
    body.character-select-active .persona-switcher,
    .persona-switcher.hidden {
        display: none !important;
    }

    /* Also hide hamburger during character selection */
    body.character-select-active .hamburger,
    body.character-select-active #hamburger,
    #characterSelect:not(.hidden)~.hamburger,
    #characterSelect:not(.hidden)~#hamburger,
    .character-select-overlay:not(.hidden)~.hamburger,
    .character-select-overlay:not(.hidden)~#hamburger {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Create mobile header if it doesn't exist */
    body:not(.character-select-active) {
        padding-top: var(--mobile-navbar-height);
    }

    /* Mobile header bar */
    .mobile-header,
    .mobile-nav-header {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: calc(var(--mobile-navbar-height) + 10px);
        /* Slightly taller header */
        background: var(--theme-primary, var(--investor-bg));
        backdrop-filter: blur(10px);
        z-index: 1000;
        align-items: center;
        justify-content: space-between;
        padding: 5px var(--mobile-padding) 10px;
        /* More padding at bottom */
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        /* Don't block hamburger clicks */
        pointer-events: none;
    }

    /* Allow clicks on mobile header content but not on the header itself */
    .mobile-header>*,
    .mobile-nav-header>* {
        pointer-events: auto;
    }

    /* Adjust border for light themes on mobile */
    body.persona-investor .mobile-header,
    body.persona-investor .mobile-nav-header,
    body.persona-dad .mobile-header,
    body.persona-dad .mobile-nav-header {
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }

    /* Hamburger menu button - always visible on mobile */
    .hamburger,
    #hamburger {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        gap: 5px !important;
        width: 30px !important;
        height: 30px !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        z-index: 10007 !important;
        position: fixed !important;
        top: 18px !important;
        left: 15px !important;
        right: auto !important;
        padding: 5px !important;
        opacity: 1 !important;
        visibility: visible !important;
        transition: transform 0.3s ease !important;
        align-items: center !important;
        transform: none !important;
        margin: 0 !important;
        /* Ensure hamburger is always visible even when container has opacity: 0 */
        isolation: isolate;
        /* Ensure clicks work - hamburger should be above all other elements */
        pointer-events: auto !important;
        /* Prevent any element from blocking clicks */
        touch-action: manipulation !important;
    }

    /* Container stays fixed, spans are positioned absolutely inside */

    /* Hover/Active state for hamburger */
    .hamburger:hover,
    #hamburger:hover {
        transform: scale(1.1);
    }

    .hamburger:active,
    #hamburger:active {
        transform: scale(0.95);
    }

    /* Hamburger lines - with gradient matching theme */
    .hamburger span,
    #hamburger span {
        display: block !important;
        height: 3px !important;
        width: 24px;
        background: linear-gradient(90deg,
            var(--theme-accent, #fff) 0%,
            var(--theme-text, #fff) 100%);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        transform-origin: center center;
        border-radius: 3px;
        position: absolute !important;
        /* Absolute positioning for precise control */
        opacity: 1 !important;
        visibility: visible !important;
        left: 50%;
        transform: translateX(-50%);
        /* Center horizontally */
    }

    /* First line - shorter */
    .hamburger span:first-child,
    #hamburger span:first-child {
        width: 20px;
        top: 6px;
        /* Position from top */
    }

    /* Middle line - full width */
    .hamburger span:nth-child(2),
    #hamburger span:nth-child(2) {
        width: 24px;
        top: 13px;
        /* Center position (30px height / 2 - 1.5px) */
    }

    /* Last line - shorter, aligned right */
    .hamburger span:last-child,
    #hamburger span:last-child {
        width: 16px;
        top: 20px;
        /* Position from top */
        left: auto;
        right: 3px;
        /* Align to right */
        transform: none;
        /* Remove center transform */
    }

    /* Active state - transforms into perfect centered X */
    .hamburger.active span:first-child,
    #hamburger.active span:first-child {
        width: 24px !important;
        top: 13px !important;
        /* Move to center */
        transform: translateX(-50%) rotate(45deg);
        /* Keep centered and rotate */
    }

    .hamburger.active span:nth-child(2),
    #hamburger.active span:nth-child(2) {
        opacity: 0;
        transform: translateX(-50%) scale(0);
        /* Keep centered while scaling */
    }

    .hamburger.active span:last-child,
    #hamburger.active span:last-child {
        width: 24px !important;
        top: 13px !important;
        /* Move to center */
        left: 50% !important;
        /* Reset to center */
        right: auto !important;
        /* Reset right alignment */
        transform: translateX(-50%) rotate(-45deg);
        /* Keep centered and rotate */
    }

    /* Persona-specific hamburger colors on mobile - each role uses its own color */
    body.persona-founder .hamburger span,
    body.persona-founder #hamburger span {
        background: linear-gradient(90deg, var(--founder-accent) 0%, rgba(160, 164, 83, 0.9) 100%);
    }

    body.persona-operator .hamburger span,
    body.persona-operator #hamburger span {
        background: linear-gradient(90deg, var(--operator-accent) 0%, rgba(255, 184, 0, 0.9) 100%);
    }

    body.persona-investor .hamburger span,
    body.persona-investor #hamburger span {
        background: linear-gradient(90deg, var(--investor-accent) 0%, rgba(195, 159, 71, 0.9) 100%);
    }

    body.persona-dad .hamburger span,
    body.persona-dad #hamburger span {
        background: linear-gradient(90deg, var(--dad-accent) 0%, rgba(255, 127, 80, 0.9) 100%);
    }

    /* Mobile role title display - next to hamburger on the left */
    .mobile-role-title {
        display: flex !important;
        position: fixed;
        top: 22px;
        left: 59px;
        /* Position next to hamburger - moved 1px closer */
        z-index: 1001;
        align-items: center;
    }

    .mobile-role-title .role-text {
        font-family: 'Noto Serif', serif;
        color: var(--color-primary);
        font-size: 16px;
        font-weight: 600;
        text-transform: capitalize;
        letter-spacing: 1px;
    }

    /* Hide role title during character selection */
    body.character-select-active .mobile-role-title,
    #characterSelect:not(.hidden)~* .mobile-role-title {
        display: none !important;
    }

    /* Persona-specific role title colors - each role uses its own color */
    body.persona-founder .mobile-role-title .role-text {
        color: var(--founder-accent);
    }

    body.persona-operator .mobile-role-title .role-text {
        color: var(--operator-accent);
    }

    body.persona-investor .mobile-role-title .role-text {
        color: var(--investor-accent);
    }

    body.persona-dad .mobile-role-title .role-text {
        color: var(--dad-accent);
    }


    /* Mobile site title in center - now hidden */
    .mobile-site-title {
        font-family: var(--font-primary);
        font-size: 18px;
        font-weight: 600;
        letter-spacing: 1px;
        color: var(--theme-text);
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        display: none !important;
        /* Hide the title */
    }

    /* Persona switcher on mobile - hidden (already covered in sidebar card) */
    .persona-switcher {
        display: none !important;
    }

    /* Sidebar as Full-Screen Overlay */
    .sidebar {
        position: fixed !important;
        top: 0 !important;
        left: -100%;
        width: 85%;
        max-width: 320px;
        height: 100vh !important;
        background: rgba(239, 235, 228, 0.98);
        /* Use investor background color */
        z-index: 10001;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease;
        display: flex !important;
        flex-direction: column;
        padding-top: calc(var(--mobile-navbar-height) + 20px);
        box-shadow: 2px 0 20px rgba(0, 0, 0, 0.3);
        opacity: 1 !important;
        visibility: visible !important;
        backdrop-filter: blur(10px);
    }

    /* Persona-specific sidebar backgrounds - all use investor's background */
    body.persona-founder .sidebar,
    body.persona-operator .sidebar,
    body.persona-investor .sidebar,
    body.persona-dad .sidebar {
        background: rgba(239, 235, 228, 0.98);
        /* Use investor's background color for all roles - matches var(--investor-bg) */
    }

    /* Light theme adjustments for mobile navigation - all use investor theme */
    body.persona-founder .nav-link,
    body.persona-operator .nav-link,
    body.persona-investor .nav-link,
    body.persona-dad .nav-link {
        color: var(--investor-text) !important;
        /* Use investor text color for all roles */
    }

    body.persona-founder .nav-link:hover,
    body.persona-founder .nav-link:active,
    body.persona-operator .nav-link:hover,
    body.persona-operator .nav-link:active,
    body.persona-investor .nav-link:hover,
    body.persona-investor .nav-link:active,
    body.persona-dad .nav-link:hover,
    body.persona-dad .nav-link:active {
        background: rgba(0, 0, 0, 0.05);
        color: var(--investor-accent) !important;
    }

    body.persona-founder .nav-link.active,
    body.persona-operator .nav-link.active,
    body.persona-investor .nav-link.active,
    body.persona-dad .nav-link.active {
        background: rgba(0, 0, 0, 0.08);
        color: var(--investor-accent) !important;
    }

    body.persona-founder .site-title-link,
    body.persona-operator .site-title-link,
    body.persona-investor .site-title-link,
    body.persona-dad .site-title-link {
        color: var(--investor-text) !important;
    }

    body.persona-founder .persona-badge,
    body.persona-operator .persona-badge,
    body.persona-investor .persona-badge,
    body.persona-dad .persona-badge {
        background: rgba(0, 0, 0, 0.05);
        color: var(--investor-accent) !important;
    }

    .sidebar.open {
        left: 0 !important;
        display: flex !important;
    }

    /* Dark overlay when menu is open */
    .menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 0;
        display: none;
        opacity: 0;
        transition: opacity 0.3s;
        /* Don't block hamburger clicks */
        pointer-events: auto;
    }

    body.menu-open .menu-overlay {
        display: block;
        opacity: 1;
    }

    .sidebar-header {
        padding: 20px;
        text-align: center;
        border-bottom: 1px solid rgba(10, 29, 26, 0.1);
        display: block !important;
    }

    .site-title {
        font-size: 20px;
        margin-bottom: 10px;
    }

    .site-title-link {
        color: var(--investor-text) !important;
        text-decoration: none;
        font-family: 'Noto Serif', serif;
        font-weight: 600;
        letter-spacing: 1px;
    }

    .persona-badge {
        display: inline-block;
        padding: 4px 12px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 0px;
        margin-top: 8px;
    }

    .badge-text {
        color: var(--investor-accent);
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .navigation {
        flex: 1;
        overflow-y: auto;
        padding: 0 0 20px 0;
        /* Removed top padding completely */
        display: block !important;
    }

    .nav-list {
        padding: 0;
        margin: 0;
        list-style: none !important;
        display: block !important;
    }

    .nav-item {
        margin: 0;
        display: block !important;
    }

    .nav-link {
        padding: 15px 20px;
        font-size: 16px;
        display: flex !important;
        align-items: center;
        gap: 15px;
        border-left: 3px solid transparent;
        text-decoration: none;
        color: var(--investor-text) !important;
        transition: all 0.3s ease;
    }

    .nav-link:hover,
    .nav-link:active {
        background: rgba(0, 0, 0, 0.05);
        color: var(--theme-accent, var(--founder-accent)) !important;
    }

    .nav-link.active {
        background: rgba(0, 0, 0, 0.08);
        color: var(--investor-accent) !important;
    }

    /* Navigation icons and text visibility */
    .nav-icon {
        display: inline-flex !important;
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }

    .nav-text {
        display: inline-block !important;
        font-family: 'Noto Sans', sans-serif;
        font-weight: 500;
    }

    /* Content Area */
    .container {
        padding-top: calc(var(--mobile-navbar-height) - 15px);
        /* Reduce top padding more */
        min-height: 100vh;
    }

    .content {
        margin-left: 0;
        padding: var(--mobile-padding);
        padding-top: 0;
        /* No top padding - content starts immediately */
    }

    /* Remove top margins from content grids on mobile */
    .writing-grid,
    .quotes-container,
    .questions-container,
    .investments-grid,
    .article-grid {
        margin-top: 0 !important;
        /* Remove top margin to move content higher */
        padding-top: 0 !important;
    }

    /* Reduce page header spacing on mobile to move content up */
    .page-header {
        margin-bottom: 5px !important;
        /* Very small margin */
        padding-bottom: 5px !important;
        /* Very small padding */
        margin-top: 0 !important;
        /* No negative margin to prevent cutoff */
        padding-top: 0 !important;
    }

    /* Move page title up */
    .page-title {
        margin-top: 0 !important;
        margin-bottom: 10px !important;
        padding-top: 0 !important;
    }

    /* Remove ALL top spacing from intro text */
    .intro-text {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* Remove spacing from content-body */
    .content-body {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* Force all article and content items to start at top */
    .article-item,
    .quote-item,
    .question-item,
    .investment-item,
    .content-item {
        margin-top: 0 !important;
    }

    /* Make first child of any content container start at top */
    .content>*:first-child,
    .content-body>*:first-child,
    .writing-grid>*:first-child,
    .quotes-container>*:first-child,
    .questions-container>*:first-child,
    .investments-grid>*:first-child {
        margin-top: 0 !important;
        padding-top: 15px !important;
    }

    /* Persona Switcher for Mobile - removed duplicate, see line 670 */

    /* Container for persona icons - horizontal layout */
    .persona-icons-container {
        display: flex !important;
        flex-direction: row-reverse !important;
        /* Icons appear to the left of main button */
        align-items: center !important;
        gap: 8px !important;
        position: relative !important;
        width: auto !important;
        height: 48px !important;
        margin-bottom: 15px !important;
        /* Add more space below the role icon */
    }

    /* Options container that slides out - VISIBLE FOR TESTING */
    .persona-options {
        display: flex !important;
        flex-direction: row-reverse !important;
        gap: 6px !important;
        overflow: visible !important;
        /* Changed to visible for testing */
        max-width: 0 !important;
        opacity: 0 !important;
        transition: max-width 0.5s cubic-bezier(0.4, 0.0, 0.2, 1), opacity 0.4s ease !important;
        margin-right: 0 !important;
    }

    /* Show options when container has show-options class */
    .persona-icons-container.show-options .persona-options {
        max-width: 200px !important;
        /* Increased to ensure all icons show */
        opacity: 1 !important;
    }

    /* Individual persona option buttons - ALWAYS VISIBLE FOR TESTING */
    .persona-icon-btn {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.95) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        cursor: pointer !important;
        padding: 0 !important;
        transition: all 0.3s ease !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
        overflow: hidden !important;
        opacity: 0 !important;
        transform: translateX(20px) scale(0.9) !important;
        /* Match desktop animation */
        display: block !important;
        flex-shrink: 0 !important;
    }

    /* Animate icons when showing - match desktop */
    .persona-icons-container.show-options .persona-icon-btn {
        opacity: 1 !important;
        transform: translateX(0) scale(1) !important;
    }

    /* Staggered animation delay - same timing as desktop */
    .persona-icons-container.show-options .persona-icon-btn:nth-child(1) {
        transition-delay: 0.05s !important;
    }

    .persona-icons-container.show-options .persona-icon-btn:nth-child(2) {
        transition-delay: 0.1s !important;
    }

    .persona-icons-container.show-options .persona-icon-btn:nth-child(3) {
        transition-delay: 0.15s !important;
    }

    .persona-icons-container.show-options .persona-icon-btn:nth-child(4) {
        transition-delay: 0.2s !important;
    }

    /* Selected state with role-specific colors for mobile */
    .persona-icon-btn[data-persona="founder"].current-role {
        border-color: var(--founder-accent) !important;
        border-width: 2px !important;
        box-shadow: 0 0 0 2px rgba(160, 164, 83, 0.2) !important;
    }

    .persona-icon-btn[data-persona="operator"].current-role {
        border-color: var(--operator-accent) !important;
        border-width: 2px !important;
        box-shadow: 0 0 0 2px rgba(255, 184, 0, 0.2) !important;
    }

    .persona-icon-btn[data-persona="investor"].current-role {
        border-color: var(--investor-accent) !important;
        border-width: 2px !important;
        box-shadow: 0 0 0 2px rgba(195, 159, 71, 0.2) !important;
    }

    .persona-icon-btn[data-persona="dad"].current-role {
        border-color: var(--dad-accent) !important;
        border-width: 2px !important;
        box-shadow: 0 0 0 2px rgba(255, 127, 80, 0.2) !important;
    }

    /* Hide current role in options */
    .persona-icon-btn.current-role {
        display: none !important;
    }

    /* Images in option buttons - scaled up and positioned to show faces */
    .persona-icon-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center 15% !important;
        /* Position to show faces better - more up */
        display: block !important;
        border-radius: 50% !important;
        transform: scale(1.3) !important;
        /* Scale up image by 30% */
    }

    /* Main persona button */
    .persona-btn {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        max-width: 48px !important;
        max-height: 48px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        overflow: hidden !important;
        flex-shrink: 0 !important;
        aspect-ratio: 1 / 1 !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
        display: block !important;
        background: rgba(255, 255, 255, 0.95) !important;
        cursor: pointer !important;
        position: relative !important;
        z-index: 2 !important;
    }

    /* Role-specific border colors for main button on mobile */
    body.persona-founder .persona-btn {
        border-color: var(--founder-accent) !important;
        border-width: 2px !important;
    }

    body.persona-operator .persona-btn {
        border-color: var(--operator-accent) !important;
        border-width: 2px !important;
    }

    body.persona-investor .persona-btn {
        border-color: var(--investor-accent) !important;
        border-width: 2px !important;
    }

    body.persona-dad .persona-btn {
        border-color: var(--dad-accent) !important;
        border-width: 2px !important;
    }

    /* Hide the mobile-only dropdown since we're using icon navigation */
    .persona-dropdown.mobile-only {
        display: none !important;
    }

    /* Ensure persona image fills the whole circle on mobile - scaled and positioned for faces */
    .persona-profile-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center 15% !important;
        /* Position to show face better - moved up */
        display: block !important;
        border-radius: 0 !important;
        /* Remove radius from image since container handles it */
        transform: scale(1.3) !important;
        /* Scale up image by 30% */
    }

    .current-persona-avatar {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        line-height: 0 !important;
        border-radius: 0 !important;
        /* Remove radius from span since button handles it */
        overflow: hidden !important;
    }

    .persona-dropdown {
        right: 0;
        left: auto;
        top: 50px;
        width: 200px;
    }
}

/* ==================== Mobile Split View ==================== */
@media (max-width: 768px) {
    .split-view {
        flex-direction: column;
        height: auto;
        min-height: auto !important;
        /* Don't force minimum height */
        padding: var(--mobile-padding) !important;
        /* Match regular content padding */
        padding-top: 0 !important;
        /* No top padding, same as regular content */
        gap: 0;
        align-items: flex-start !important;
        /* Align content to top */
        justify-content: flex-start !important;
        /* Push content to top */
    }

    .list-pane {
        width: 100%;
        min-width: 100%;
        max-height: none !important;
        /* Remove height restriction */
        height: auto !important;
        /* Let it size to content */
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding: var(--mobile-padding);
        padding-top: 0 !important;
        /* Remove top padding in list-pane */
        position: relative !important;
        /* Change from sticky to relative */
        top: 0 !important;
        /* Reset top position */
        background: var(--theme-primary);
        z-index: 10;
    }

    .reading-pane {
        width: 100%;
        padding: var(--mobile-padding);
        min-height: 60vh;
    }

    /* Collapsible list on mobile */
    .list-pane.collapsed {
        max-height: 60px;
        overflow: hidden;
    }

    .list-toggle {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 5px;
        margin-bottom: 10px;
        cursor: pointer;
    }

    .list-toggle::after {
        content: '▼';
        transition: transform 0.3s;
    }

    .list-pane.collapsed .list-toggle::after {
        transform: rotate(-90deg);
    }

    .post-list {
        margin: 10px 0;
    }

    .post-list a {
        padding: 12px 10px;
        font-size: 14px;
    }
}

/* ==================== Mobile Forms and Inputs ==================== */
@media (max-width: 768px) {

    input,
    textarea,
    select {
        font-size: 16px;
        /* Prevents zoom on iOS */
        padding: 12px;
        width: 100%;
        border-radius: 8px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        background: rgba(255, 255, 255, 0.05);
        color: var(--theme-text);
    }

    button,
    .btn {
        min-height: 44px;
        /* Apple's minimum touch target */
        padding: 12px 20px;
        font-size: 16px;
        border-radius: 8px;
        width: 100%;
        margin: 10px 0;
    }
}

/* ==================== Mobile Tables ==================== */
@media (max-width: 768px) {
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    .responsive-table {
        display: block;
        width: 100%;
    }

    .responsive-table tbody,
    .responsive-table tr,
    .responsive-table td {
        display: block;
        width: 100%;
    }

    .responsive-table tr {
        margin-bottom: 10px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        padding: 10px;
    }

    .responsive-table td {
        text-align: right;
        padding-left: 50%;
        position: relative;
    }

    .responsive-table td:before {
        content: attr(data-label);
        position: absolute;
        left: 10px;
        width: 45%;
        text-align: left;
        font-weight: bold;
    }
}

/* ==================== Mobile Typography ==================== */
@media (max-width: 768px) {
    h1 {
        font-size: 28px;
        line-height: 1.2;
    }

    h2 {
        font-size: 24px;
        line-height: 1.3;
    }

    h3 {
        font-size: 20px;
        line-height: 1.4;
    }

    p,
    li {
        font-size: 16px;
        line-height: 1.6;
    }

    .page-title {
        font-size: 24px;
        margin-bottom: 15px;
    }

    .article-title {
        font-size: 24px;
    }

    blockquote {
        margin: 20px 0;
        padding: 15px;
        font-size: 16px;
    }
}

/* ==================== Mobile Card Layouts ==================== */
@media (max-width: 768px) {
    .card-grid {
        grid-template-columns: 1fr;
        gap: var(--mobile-card-gap);
        padding: 0;
    }

    .card {
        margin: 0;
        border-radius: 12px;
        padding: 15px;
    }

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

    .question-category {
        margin: 20px 0;
        padding: 15px;
    }
}

/* ==================== Touch and Gesture Support ==================== */
.touchable {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
}

.swipeable {
    touch-action: pan-y;
}

.draggable {
    touch-action: none;
}

/* ==================== Loading States ==================== */
.mobile-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
}

.mobile-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: var(--theme-accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* ==================== Bottom Navigation (Optional) ==================== */
@media (max-width: 768px) {
    .bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: var(--mobile-bottom-nav);
        background: rgba(0, 0, 0, 0.95);
        backdrop-filter: blur(10px);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        z-index: 100;
        justify-content: space-around;
        align-items: center;
        padding-bottom: env(safe-area-inset-bottom);
    }

    .bottom-nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        color: rgba(255, 255, 255, 0.6);
        text-decoration: none;
        transition: color 0.3s;
    }

    .bottom-nav-item.active {
        color: var(--theme-accent);
    }

    .bottom-nav-icon {
        width: 24px;
        height: 24px;
    }

    .bottom-nav-label {
        font-size: 11px;
        font-weight: 500;
    }

    /* Adjust content for bottom nav */
    .has-bottom-nav .container {
        padding-bottom: calc(var(--mobile-bottom-nav) + 20px);
    }
}

/* ==================== Landscape Orientation ==================== */
@media (max-width: 768px) and (orientation: landscape) {
    .character-select-modal {
        padding: 0;
    }

    .scroll-header {
        padding: 5px;
    }

    .select-title {
        font-size: 16px;
    }

    .select-subtitle {
        display: none;
        /* Hide subtitle in landscape to save space */
    }

    /* Adjust layout for landscape */
    .character-grid {
        flex-direction: row;
        padding: 0;
        gap: 10px;
    }

    .character-main-display {
        flex: 1;
    }

    .character-card {
        max-height: 100%;
    }

    .character-portrait {
        height: 40%;
    }

    .character-name {
        font-size: 18px !important;
    }

    .character-title {
        font-size: 12px !important;
    }

    .character-desc {
        font-size: 11px !important;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
    }

    /* Swipe indicators in landscape */
    .swipe-indicators {
        padding: 10px;
    }

    .swipe-hint {
        font-size: 12px;
        padding: 3px;
    }

    .mobile-header {
        height: 50px;
    }

    .container {
        padding-top: 50px;
    }
}

/* ==================== Small Phones ==================== */
@media (max-width: 375px) {
    :root {
        --mobile-padding: 12px;
    }

    /* Even smaller text for tiny screens */
    .select-title {
        font-size: 17.6px;
    }

    .character-grid {
        gap: 8px;
        padding: 0;
    }

    .character-name {
        font-size: 16px !important;
    }

    .character-title {
        font-size: 10px !important;
    }

    .character-desc {
        font-size: 10px !important;
        -webkit-line-clamp: 2;
    }

    /* Stats removed per design update
    .stat-item {
        font-size: 9px;
    }
    */

    /* Stats removed per design update
    .stat-item span {
        font-size: 8px;
    }
    */

    h1 {
        font-size: 24px;
    }

    h2 {
        font-size: 20px;
    }

    p,
    li {
        font-size: 14px;
    }

    .nav-link {
        padding: 12px 15px;
        font-size: 14px;
    }
}

/* ==================== Tablets ==================== */
@media (min-width: 768px) and (max-width: 1024px) {
    .character-select-modal {
        max-width: 90%;
        max-height: 90vh;
    }

    .character-grid {
        grid-template-columns: repeat(2, minmax(300px, 1fr));
        gap: 20px;
        padding: 20px;
    }

    .character-card {
        height: auto;
        min-height: 350px;
    }
}

/* ==================== Accessibility for Mobile ==================== */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==================== Welcome Page Game Cards (Desktop Only) ==================== */
@media (min-width: 769px) {
    .welcome-page {
        min-height: calc(100vh - 100px);
    }

    /* Hide all welcome content initially */
    .welcome-cards.cards-hidden {
        opacity: 0;
        visibility: hidden;
        /* Safari optimization: use will-change for smoother transitions */
        will-change: opacity, visibility;
    }

    .welcome-cards.cards-hidden .welcome-card {
        opacity: 0;
        transform: translateY(50px);
        /* Safari optimization: hardware acceleration */
        -webkit-transform: translateY(50px) translateZ(0);
        will-change: opacity, transform;
    }

    .welcome-cards {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        padding: 2rem 0;
        max-width: 900px;
        margin: 0 auto;
        min-height: 70vh;
        justify-content: center;
        opacity: 1;
        visibility: visible;
        /* Safari optimization: faster, simpler transition */
        transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
        /* Safari: hardware acceleration */
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        will-change: opacity, visibility;
    }

    .welcome-card {
        background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.05) 0%,
            rgba(255, 255, 255, 0.02) 100%);
        border: 2px solid rgba(255, 255, 255, 0.1);
        border-radius: 15px;
        padding: 2rem 3rem;
        position: relative;
        /* Safari optimization: faster, simpler transition */
        transition: opacity 0.3s ease-out, transform 0.3s ease-out;
        backdrop-filter: blur(10px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1),
                    inset 0 1px 0 rgba(255, 255, 255, 0.1);
        overflow: hidden;
        width: 100%;
        display: flex;
        align-items: center;
        min-height: 120px;
        /* Safari: hardware acceleration */
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        will-change: opacity, transform;
    }

    /* Card hover effects - DISABLED */
    /* .welcome-card:hover {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4),
                    inset 0 1px 0 rgba(255, 255, 255, 0.2);
        border-color: var(--theme-accent);
    } */

/* Roman numeral indicators */
.card-number {
    position: relative;
    margin-right: 2.5rem;
    font-family: 'Noto Serif', serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--theme-accent);
    opacity: 0.3;
    transition: all 0.3s ease;
    flex-shrink: 0;
    width: 3rem;
    /* Fixed width to ensure all numerals take same space */
    text-align: center;
    /* Center the numerals within the fixed width */
}

/* .welcome-card:hover .card-number {
    opacity: 0.8;
    transform: scale(1.1);
} */

/* Card content styling */
.card-content {
    position: relative;
    z-index: 2;
    flex: 1;
}

.card-content p {
    font-size: 1.1rem;
    line-height: 1.8;
    margin: 0;
    color: var(--theme-text);
    font-family: var(--font-body);
}

.card-content a.text-link {
    color: var(--theme-accent);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease;
    font-weight: 500;
}

/* .card-content a.text-link:hover {
    border-bottom-color: var(--theme-accent);
    opacity: 0.8;
} */

/* Animated accent bars */
.welcome-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 4px;
    background: var(--theme-accent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* .welcome-card:hover::before {
    opacity: 1;
} */

/* Glowing effect on hover */
.welcome-card::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle at center,
        var(--theme-accent) 0%,
        transparent 70%);
    opacity: 0;
    filter: blur(40px);
    transition: opacity 0.3s ease;
    pointer-events: none;
}

/* .welcome-card:hover::after {
    opacity: 0.1;
} */

/* Persona-specific card colors - DISABLED */
/* body.persona-founder .welcome-card:hover {
    border-color: var(--founder-accent);
}

body.persona-operator .welcome-card:hover {
    border-color: var(--operator-accent);
}

body.persona-investor .welcome-card:hover {
    border-color: var(--investor-accent);
}

body.persona-dad .welcome-card:hover {
    border-color: var(--dad-accent);
} */


    /* Entrance animation - slower and smoother */
    @keyframes cardEntrance {
        from {
            opacity: 0;
            transform: translateY(50px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .welcome-card {
        animation: cardEntrance 1.2s ease-out backwards;
    }

    .welcome-card:nth-child(1) {
        animation-delay: 0.3s;
    }

    .welcome-card:nth-child(2) {
        animation-delay: 0.5s;
    }

    .welcome-card:nth-child(3) {
        animation-delay: 0.7s;
    }
}

/* End of desktop-only media query */

/* Mobile styles for article content headings - 18px */
@media (max-width: 768px) {
    .article-content h3 {
        font-size: 18px;
    }

    .article-content h2 {
        font-size: 18px;
    }

    .article-content p>strong:only-child {
        font-size: 18px;
    }

    /* Annual Retro intro text - 16px on mobile */
    .article-content .intro-text {
        font-size: 16px;
    }
}