/* ═══════════════════════════════════════════════
   CSS DESIGN TOKENS — used site-wide
═══════════════════════════════════════════════ */
:root {
    /* Core accents */
    --wp-amber:         #E8922A;
    --wp-gold:          #F4C96B;
    --wp-gold-bright:   #FFE08A;
    --wp-violet:        #E8922A;
    --wp-indigo:        #6366F1;

    /* Backgrounds */
    --wp-navy:          #080C18;
    --wp-navy-mid:      #0E1424;
    --wp-navy-card:     rgba(10, 14, 26, 0.93);
    --wp-navy-card-hv:  rgba(14, 19, 36, 0.97);

    /* Borders — indigo-violet base, gold on hover */
    --wp-border:        rgba(99, 102, 241, 0.16);
    --wp-border-hover:  rgba(244, 201, 107, 0.35);
    --wp-border-gold:   rgba(244, 201, 107, 0.22);
    --wp-border-teal:   rgba(47, 214, 200, 0.14);

    /* Glows */
    --wp-teal-glow:     rgba(47,  214, 200, 0.10);
    --wp-gold-glow:     rgba(244, 201, 107, 0.14);
    --wp-violet-glow:   rgba(99,  102, 241, 0.10);

    --wp-text-dim:      rgba(255, 255, 255, 0.42);
    --wp-text-mid:      rgba(255, 255, 255, 0.68);
    --wp-radius:        16px;
    --wp-radius-sm:     10px;
    --wp-blur:          blur(20px);
}

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

/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* Prevent font loading jitter */
* {
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-display: swap;
}

/* Force background on all pages */
html, body {
    background: linear-gradient(135deg, #0B0F1A 0%, #1a2332 100%) !important;
    overflow-x: hidden;
    max-width: 100vw;
}

/* Anti-jitter system */
body {
    visibility: hidden;
}

body.fonts-ready {
    visibility: visible;
}

/* Stable font sizes */
html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-size: 1rem;
    line-height: 1.5;
    min-height: 100vh;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background: linear-gradient(135deg, #0B0F1A 0%, #1a2332 100%);
    min-height: 100vh;
    padding: 20px;
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 400;
    color: #ffffff;
    position: relative;
    visibility: hidden;
    transition: opacity 0.3s ease;
}

body.fonts-loaded {
    opacity: 1;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.02) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.02) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.01) 0%, transparent 50%),
        radial-gradient(circle at 60% 70%, rgba(255, 255, 255, 0.015) 0%, transparent 50%),
        radial-gradient(circle at 90% 30%, rgba(255, 255, 255, 0.02) 0%, transparent 50%),
        radial-gradient(circle at 30% 60%, rgba(255, 255, 255, 0.01) 0%, transparent 50%);
    background-size: 200% 200%;
    pointer-events: none;
    z-index: 1;
    opacity: 0.4;
    animation: subtleNoise 20s ease-in-out infinite alternate;
}

@keyframes subtleNoise {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        opacity: 0.4;
    }
    25% {
        transform: scale(1.02) rotate(1deg);
        opacity: 0.3;
    }
    50% {
        transform: scale(1) rotate(0deg);
        opacity: 0.5;
    }
    75% {
        transform: scale(0.98) rotate(-1deg);
        opacity: 0.3;
    }
}

/* Navigation Bar */
.navbar {
    background: rgba(18, 24, 36, 0.9);
    backdrop-filter: blur(15px);
    padding: 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    border-bottom: 1px solid rgba(42, 50, 66, 0.3);
}

.nav-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: white;
    font-weight: 600;
    font-size: 1.2rem;
    letter-spacing: 0.005em;
    transition: all 0.3s ease;
}

.nav-brand:hover {
    transform: scale(1.02);
}

.nav-logo {
    font-size: 1.5rem;
}

.nav-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 30px;
}

.nav-link {
    color: white;
    text-decoration: none;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 8px;
    transition: all 0.3s ease;
    position: relative;
    letter-spacing: 0.005em;
}

.nav-link:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
}

.nav-link.active {
    background: rgba(255, 255, 255, 0.25);
}

.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 3px;
    background: white;
    border-radius: 2px;
}

.immersive-container {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
}

.visualization-main {
    min-height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Input Section - Top of Page */
.input-overlay {
    position: relative;
    padding: 100px 20px 50px;
    z-index: 10;
    max-width: 500px;
    margin: 0 auto;
}

.input-panel {
    background: linear-gradient(135deg, 
        rgba(18, 24, 36, 0.95) 0%,
        rgba(24, 32, 48, 0.85) 100%);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 30px;
    border: 1px solid rgba(47, 214, 200, 0.3);
    box-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.12),
        0 4px 8px rgba(0, 0, 0, 0.08),
        0 8px 16px rgba(0, 0, 0, 0.06),
        0 0 0 1px rgba(47, 214, 200, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.input-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%,
        rgba(47, 214, 200, 0.4) 50%,
        transparent 100%);
}

.input-title {
    color: #ffffff;
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 20px;
    letter-spacing: -0.01em;
}

.input-controls {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.control-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.control-group label {
    color: #e0e0e0;
    font-weight: 500;
    font-size: 0.9rem;
    margin-bottom: 5px;
    text-align: left;
}

.usd-equivalent {
    margin-top: 8px;
    padding: 8px 12px;
    background: rgba(244, 201, 107, 0.1);
    border-radius: 6px;
    font-size: 0.8rem;
    color: #ffffff;
    text-align: center;
    backdrop-filter: blur(8px);
}

.usd-equivalent small {
    font-weight: 600;
    color: #ffffff;
}

#usd-value {
    font-weight: 700;
    color: #FFD700;
}

.control-group select,
.control-group input {
    width: 100%;
    padding: 12px;
    border: 1px solid #2A3246;
    border-radius: 10px;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    background: rgba(18, 24, 36, 0.9);
    backdrop-filter: blur(8px);
    font-weight: 400;
    line-height: 1.5;
    color: #ffffff;
}

.control-group input:focus,
.control-group select:focus {
    outline: none;
    border-color: #E8922A;
    background: rgba(18, 24, 36, 0.95);
    box-shadow: 0 0 12px rgba(47, 214, 200, 0.4);
}

/* Ladder Visualization - Center of Page */
.ladder-visualization-full {
    position: relative;
    padding: 60px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.ladder-container-full {
    width: 100%;
    max-width: 1000px;
    height: 40px;
    position: relative;
}

.ladder-track-full {
    width: 100%;
    height: 100%;
    background: rgba(18, 24, 36, 0.08);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    border: 1px solid #2A3246;
}

.ladder-fill-full {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, 
        #8B0000 0%,      /* Deep Red - Extreme Poverty */
        #D2691E 15%,     /* Dark Orange - Lower Income */
        #FFA500 35%,     /* Amber - Lower Middle */
        #FFD700 50%,     /* Gold - Global Middle */
        #4CAF50 70%,     /* Light Green - Upper Middle */
        #2196F3 85%,     /* Green - Affluent */
        #1565C0 100%      /* Deep Blue - Ultra Wealthy */
    );
    border-radius: 20px;
    transition: width 2s ease;
    position: relative;
    overflow: hidden;
}

.ladder-fill-full::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, 
        rgba(231, 76, 60, 0.1) 0%,    /* Subtle red overlay */
        rgba(243, 156, 18, 0.1) 25%,   /* Subtle orange overlay */
        rgba(255, 217, 61, 0.1) 50%,   /* Subtle yellow overlay */
        rgba(39, 174, 96, 0.1) 75%,   /* Subtle green overlay */
        rgba(79, 172, 254, 0.1) 100%   /* Subtle blue overlay */
    );
    pointer-events: none;
}

.user-marker-full {
    position: absolute;
    top: -50px;
    transform: translateX(-50%);
    width: 6px;
    height: 50px;
    background: linear-gradient(180deg, #F4C96B, #FFD700);
    left: 0%;
    transition: left 2s ease;
    box-shadow: 
        0 0 20px rgba(244, 201, 107, 0.8),
        0 0 40px rgba(244, 201, 107, 0.4),
        0 0 60px rgba(244, 201, 107, 0.2);
    z-index: 20;
    animation: 
        userGlow 2s ease-in-out infinite alternate,
        subtlePulse 3s ease-in-out infinite;
}

.user-marker-full::after {
    content: 'YOU';
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.user-marker-full::before {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid #F4C96B;
    z-index: 21;
}

.user-marker-full::after {
    content: 'You';
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    z-index: 22;
}

.global-marker-full {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid white;
    z-index: 15;
    transition: all 0.5s ease;
    opacity: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.global-marker-full.extreme-poverty {
    background: #e74c3c;
    left: 10%;
}

.global-marker-full.lower-income {
    background: #f39c12;
    left: 45%;
}

.global-marker-full.middle-class {
    background: #27ae60;
    left: 75%;
}

.global-marker-full.affluent {
    background: #8e44ad;
    left: 92%;
}

.global-marker-full.very-wealthy {
    background: #2c3e50;
    left: 98%;
}

.marker-label-full {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
    margin-bottom: 8px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.global-marker-full:hover {
    transform: translate(-50%, -50%) scale(1.2);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.global-marker-full:hover .marker-label-full {
    opacity: 1;
    transform: translateX(-50%) translateY(-5px);
}

.ladder-labels-full {
    position: absolute;
    bottom: -25px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Results Panel */
.results-panel {
    position: relative;
    padding: 30px;
    width: 100%;
    max-width: 500px;
    margin: 0 auto 60px;
    background: linear-gradient(135deg, 
        rgba(18, 24, 36, 0.95) 0%,
        rgba(24, 32, 48, 0.85) 100%);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    border: 1px solid rgba(244, 201, 107, 0.3);
    box-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.12),
        0 4px 8px rgba(0, 0, 0, 0.08),
        0 8px 16px rgba(0, 0, 0, 0.06),
        0 0 0 1px rgba(244, 201, 107, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    z-index: 50;
    opacity: 1;
    transition: all 0.5s ease;
    position: relative;
    overflow: hidden;
}

.results-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%,
        rgba(244, 201, 107, 0.5) 50%,
        transparent 100%);
}

.rank-display {
    text-align: center;
    margin-bottom: 30px;
}

.rank-number {
    font-size: 5rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 15px;
    letter-spacing: -0.02em;
}

.rank-text {
    font-size: 1.3rem;
    color: #e0e0e0;
    line-height: 1.4;
    font-weight: 400;
}

/* Insights Grid */
.insights-grid {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin-top: 30px;
}

/* Action Panel */
.action-panel {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.income-breakdown {
    background: linear-gradient(135deg, 
        rgba(18, 24, 36, 0.95) 0%,
        rgba(24, 32, 48, 0.85) 100%);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(244, 201, 107, 0.3);
    border-radius: 16px;
    padding: 25px;
    margin-top: 20px;
    box-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.12),
        0 4px 8px rgba(0, 0, 0, 0.08),
        0 8px 16px rgba(0, 0, 0, 0.06),
        0 0 0 1px rgba(244, 201, 107, 0.2);
}

.breakdown-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.breakdown-item {
    width: 100%;
    padding: 15px 20px;
    background: linear-gradient(135deg, 
        rgba(24, 32, 48, 0.9) 0%,
        rgba(18, 24, 36, 0.8) 100%);
    backdrop-filter: blur(15px);
    border-radius: 12px;
    border: 1px solid rgba(244, 201, 107, 0.2);
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 2px 6px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.breakdown-label {
    display: block;
    color: #e0e0e0;
    font-weight: 500;
    font-size: 0.9rem;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.breakdown-value {
    display: block;
    color: #ffffff;
    font-weight: 600;
    font-size: 1.2rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.breakdown-item:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 4px 8px rgba(244, 201, 107, 0.3),
        0 0 0 1px rgba(244, 201, 107, 0.4);
}

.breakdown-label {
    display: block;
    color: #e0e0e0;
    font-weight: 500;
    font-size: 0.9rem;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.breakdown-value {
    display: block;
    color: #ffffff;
    font-weight: 600;
    font-size: 1.2rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.shareable-section {
    text-align: center;
}

.shareable-summary {
    background: linear-gradient(135deg, 
        rgba(24, 32, 48, 0.9) 0%,
        rgba(18, 24, 36, 0.8) 100%);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(244, 201, 107, 0.3);
    border-radius: 16px;
    padding: 25px;
    box-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.12),
        0 4px 8px rgba(0, 0, 0, 0.08),
        0 0 0 1px rgba(244, 201, 107, 0.2);
}

.shareable-text {
    font-size: 1.2rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 20px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Container styles for other pages */
.container {
    max-width: 800px;
    margin: 0 auto;
    background: linear-gradient(135deg, 
        rgba(18, 24, 36, 0.95) 0%,
        rgba(24, 32, 48, 0.9) 100%);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    box-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.12),
        0 4px 8px rgba(0, 0, 0, 0.08),
        0 8px 16px rgba(0, 0, 0, 0.06),
        0 16px 32px rgba(0, 0, 0, 0.04),
        0 0 0 1px rgba(244, 201, 107, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    border: 1px solid #2A3246;
    overflow: hidden;
    margin-top: 20px;
    position: relative;
}

.container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%,
        rgba(47, 214, 200, 0.3) 50%,
        transparent 100%);
    border-radius: 24px 24px 0 0;
}

/* Hide immersive container on other pages */
.immersive-container {
    display: none;
}

/* Show immersive container only on index page */
body.index-page .immersive-container {
    display: block;
}

body.index-page .container {
    display: none;
}

/* Fix other pages styling */
body.other-page {
    background: linear-gradient(135deg, #0B0F1A 0%, #1a2332 100%) !important;
}

body.other-page.fonts-loaded {
    opacity: 1;
}

body.other-page::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.02) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.02) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.01) 0%, transparent 50%),
        radial-gradient(circle at 60% 70%, rgba(255, 255, 255, 0.015) 0%, transparent 50%),
        radial-gradient(circle at 90% 30%, rgba(255, 255, 255, 0.02) 0%, transparent 50%),
        radial-gradient(circle at 30% 60%, rgba(255, 255, 255, 0.01) 0%, transparent 50%);
    background-size: 200% 200%;
    pointer-events: none;
    z-index: 1;
    opacity: 0.4;
    animation: subtleNoise 20s ease-in-out infinite alternate;
}

header {
    background: linear-gradient(135deg, #1C0F02 0%, #4A2C08 60%, #2A1A04 100%);
    color: white;
    padding: 40px 30px;
    text-align: center;
    border-radius: 24px 24px 0 0;
}

header h1 {
    font-size: 2.75rem;
    margin-bottom: 10px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

header p {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.82);
    font-weight: 400;
}
header .subtitle {
    color: rgba(255,255,255,0.82);
    font-size: 1.05rem;
}

main {
    padding: 40px 30px;
}

section {
    margin-bottom: 50px;
}

section h2 {
    color: #ffffff;
    margin-bottom: 25px;
    font-size: 1.9rem;
    text-align: center;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.input-section {
    margin-bottom: 40px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.hero-insight {
    margin-bottom: 40px;
    background: linear-gradient(135deg, 
        rgba(47, 214, 200, 0.08) 0%,
        rgba(27, 163, 148, 0.12) 100%);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 40px;
    border: 1px solid rgba(47, 214, 200, 0.2);
    box-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.12),
        0 4px 8px rgba(0, 0, 0, 0.08),
        0 8px 16px rgba(0, 0, 0, 0.06),
        0 0 0 1px rgba(47, 214, 200, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    position: relative;
    overflow: hidden;
}

.hero-insight::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%,
        rgba(47, 214, 200, 0.4) 50%,
        transparent 100%);
}

.hero-insight::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, 
        rgba(47, 214, 200, 0.02) 0%,
        rgba(27, 163, 148, 0.03) 50%,
        rgba(47, 214, 200, 0.02) 100%
    );
    pointer-events: none;
}

.insight-content {
    text-align: center;
    position: relative;
    z-index: 2;
}

.hero-insight h2 {
    color: #ffffff;
    margin-bottom: 20px;
    font-size: 1.8rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.hero-insight p {
    color: #e0e0e0;
    font-size: 1.1rem;
    line-height: 1.6;
    font-weight: 400;
}

.hero-insight {
    animation: slideInUp 0.8s ease 0.5s both;
}

.form-group {
    margin-bottom: 25px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #e0e0e0;
    font-size: 0.95rem;
    letter-spacing: 0.005em;
}

.form-group select,
.form-group input {
    width: 100%;
    padding: 15px;
    border: 1px solid #2A3246;
    border-radius: 12px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: rgba(24, 36, 48, 0.9);
    backdrop-filter: blur(8px);
    font-weight: 400;
    line-height: 1.5;
    color: #ffffff;
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: #E8922A;
    background: rgba(24, 36, 48, 0.95);
    box-shadow: 0 0 0 8px rgba(47, 214, 200, 0.4);
}

#calculate-btn {
    width: 100%;
    padding: 18px;
    background: linear-gradient(135deg, 
        rgba(244, 201, 107, 0.9) 0%,
        rgba(244, 201, 107, 0.8) 100%);
    color: white;
    border: 1px solid rgba(244, 201, 107, 0.4);
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.12),
        0 4px 8px rgba(0, 0, 0, 0.08),
        0 8px 16px rgba(0, 0, 0, 0.06),
        0 0 0 1px rgba(244, 201, 107, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    letter-spacing: 0.01em;
    position: relative;
    overflow: hidden;
}

#calculate-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent 0%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 100%);
    transition: left 0.6s ease;
}

#calculate-btn:hover::before {
    left: 100%;
}

#calculate-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 25px rgba(47, 214, 200, 0.5);
}

#calculate-btn:active {
    transform: translateY(0);
}

.results-section {
    animation: slideUp 0.6s ease;
}

.data-card {
    animation: fadeInScale 0.5s ease backwards;
}

.level-card {
    animation: slideInLeft 0.5s ease backwards;
}

.explanation-card {
    animation: fadeInScale 0.5s ease backwards;
}

.explanation-card:nth-child(1) { animation-delay: 0.1s; }
.explanation-card:nth-child(2) { animation-delay: 0.2s; }
.explanation-card:nth-child(3) { animation-delay: 0.3s; }
.explanation-card:nth-child(4) { animation-delay: 0.4s; }

.insight-card {
    animation: fadeInScale 0.5s ease backwards;
}

.insight-card:nth-child(1) { animation-delay: 0.1s; }
.insight-card:nth-child(2) { animation-delay: 0.2s; }
.insight-card:nth-child(3) { animation-delay: 0.3s; }
.insight-card:nth-child(4) { animation-delay: 0.4s; }

.rank-card {
    background: linear-gradient(135deg, 
        rgba(244, 201, 107, 0.85) 0%,
        rgba(244, 201, 107, 0.75) 100%);
    backdrop-filter: blur(20px);
    color: white;
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 30px;
    text-align: center;
    border: 1px solid rgba(244, 201, 107, 0.4);
    box-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.15),
        0 4px 8px rgba(0, 0, 0, 0.1),
        0 8px 16px rgba(0, 0, 0, 0.06),
        0 0 0 1px rgba(244, 201, 107, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.rank-card h2 {
    font-size: 1.8rem;
    margin-bottom: 15px;
    font-weight: 600;
    color: white;
    letter-spacing: 0.005em;
}

.rank-text {
    font-size: 1.3rem;
    margin-bottom: 20px;
    font-weight: 400;
    line-height: 1.4;
}

.rank-percentage {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.ladder-visualization {
    background: linear-gradient(135deg, 
        rgba(18, 24, 36, 0.95) 0%,
        rgba(24, 32, 48, 0.85) 100%);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 30px;
    border: 1px solid rgba(244, 201, 107, 0.3);
    box-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.15),
        0 4px 8px rgba(0, 0, 0, 0.1),
        0 8px 16px rgba(0, 0, 0, 0.06),
        0 0 0 1px rgba(244, 201, 107, 0.2);
}

.ladder-visualization h3 {
    color: #ffffff;
    margin-bottom: 25px;
    font-size: 1.4rem;
    text-align: center;
    font-weight: 500;
    letter-spacing: 0.005em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.ladder-container {
    width: 100%;
}

.ladder-track {
    width: 100%;
    height: 60px;
    background: rgba(18, 24, 36, 0.8);
    border-radius: 20px;
    position: relative;
    border: 1px solid rgba(244, 201, 107, 0.2);
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin-bottom: 15px;
}

.ladder-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, 
        #e74c3c 0%,      /* Red - Extreme Poverty */
        #f39c12 25%,     /* Orange - Lower Income */
        #ffd93d 50%,     /* Yellow - Global Middle */
        #27ae60 75%,     /* Green - Affluent */
        #4facfe 100%      /* Blue - Ultra Wealthy */
    );
    border-radius: 20px;
    transition: width 2s ease;
    position: relative;
    overflow: hidden;
}

.ladder-fill::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, 
        rgba(231, 76, 60, 0.1) 0%,    /* Subtle red overlay */
        rgba(243, 156, 18, 0.1) 25%,   /* Subtle orange overlay */
        rgba(255, 217, 61, 0.1) 50%,   /* Subtle yellow overlay */
        rgba(39, 174, 96, 0.1) 75%,   /* Subtle green overlay */
        rgba(79, 172, 254, 0.1) 100%   /* Subtle blue overlay */
    );
    pointer-events: none;
}

.user-marker {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #ff4757, #ff6b6b);
    border: 3px solid white;
    border-radius: 50%;
    left: 0%;
    transition: left 2s ease;
    box-shadow: 
        0 0 20px rgba(255, 71, 87, 0.6),
        0 0 40px rgba(255, 71, 87, 0.3),
        0 0 60px rgba(255, 71, 87, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 15;
    animation: 
        userGlow 2s ease-in-out infinite alternate,
        subtlePulse 3s ease-in-out infinite;
}

@keyframes userGlow {
    0% {
        box-shadow: 
            0 0 20px rgba(255, 71, 87, 0.6),
            0 0 40px rgba(255, 71, 87, 0.3),
            0 0 60px rgba(255, 71, 87, 0.1);
    }
    50% {
        box-shadow: 
            0 0 25px rgba(255, 71, 87, 0.8),
            0 0 45px rgba(255, 71, 87, 0.4),
            0 0 65px rgba(255, 71, 87, 0.2);
    }
    100% {
        box-shadow: 
            0 0 20px rgba(255, 71, 87, 0.6),
            0 0 40px rgba(255, 71, 87, 0.3),
            0 0 60px rgba(255, 71, 87, 0.1);
    }
}

@keyframes subtlePulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

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

.you-label {
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ladder-labels {
    display: flex;
    justify-content: space-between;
    color: #555;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.comparison-card {
    background: linear-gradient(135deg, 
        rgba(244, 201, 107, 0.85) 0%,
        rgba(244, 201, 107, 0.75) 100%);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 25px;
    border: 1px solid rgba(244, 201, 107, 0.3);
    box-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.15),
        0 4px 8px rgba(0, 0, 0, 0.1),
        0 8px 16px rgba(0, 0, 0, 0.06),
        0 0 0 1px rgba(244, 201, 107, 0.2);
}

.comparison-card h3 {
    color: #ffffff;
    margin-bottom: 15px;
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: 0.005em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.comparison-text {
    font-size: 1.1rem;
    color: #e0e0e0;
    line-height: 1.6;
    font-weight: 400;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.insights-card {
    background: linear-gradient(135deg, 
        rgba(244, 201, 107, 0.85) 0%,
        rgba(244, 201, 107, 0.75) 100%);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 25px;
    border: 1px solid rgba(244, 201, 107, 0.3);
    box-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.15),
        0 4px 8px rgba(0, 0, 0, 0.1),
        0 8px 16px rgba(0, 0, 0, 0.06),
        0 0 0 1px rgba(244, 201, 107, 0.2);
}

.insights-card h3 {
    color: #ffffff;
    margin-bottom: 20px;
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: 0.005em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.insights-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.insight-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 15px;
    background: linear-gradient(135deg, 
        rgba(244, 201, 107, 0.9) 0%,
        rgba(244, 201, 107, 0.8) 100%);
    backdrop-filter: blur(15px);
    border-radius: 12px;
    border-left: 4px solid rgba(244, 201, 107, 0.6);
    transition: all 0.3s ease;
    border: 1px solid rgba(244, 201, 107, 0.2);
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 2px 6px rgba(0, 0, 0, 0.15);
}

.insight-item:hover {
    transform: translateX(5px) scale(1.01);
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 4px 8px rgba(244, 201, 107, 0.3),
        0 0 0 1px rgba(244, 201, 107, 0.4);
}

.insight-icon {
    color: #4facfe;
    font-size: 1.2rem;
    font-weight: bold;
    flex-shrink: 0;
    margin-top: 2px;
}

.insight-text {
    font-size: 1rem;
    color: #555;
    line-height: 1.5;
    font-weight: 400;
}

.income-breakdown {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 16px;
    padding: 20px;
    margin-top: 25px;
    animation: slideUp 0.3s ease;
}

.income-breakdown h4 {
    color: #333;
    margin-bottom: 15px;
    font-size: 1.1rem;
    font-weight: 600;
    text-align: center;
}

.breakdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #e1e5e9;
}

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

.breakdown-label {
    color: #666;
    font-size: 0.95rem;
    font-weight: 500;
}

.breakdown-value {
    color: #333;
    font-size: 1rem;
    font-weight: 600;
}

.shareable-card {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.8), rgba(118, 75, 162, 0.8));
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 25px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.2);
}

.shareable-card h3 {
    color: white;
    margin-bottom: 20px;
    font-size: 1.3rem;
    text-align: center;
}

.shareable-summary {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 16px;
    padding: 25px;
    text-align: center;
}

.shareable-text {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 20px;
    line-height: 1.4;
    color: white;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.copy-btn {
    background: linear-gradient(135deg, 
        rgba(244, 201, 107, 0.8) 0%,
        rgba(244, 201, 107, 0.6) 100%);
    color: #ffffff;
    border: 1px solid rgba(244, 201, 107, 0.4);
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(8px);
}

.copy-btn:hover {
    background: linear-gradient(135deg, 
        rgba(244, 201, 107, 0.9) 0%,
        rgba(244, 201, 107, 0.7) 100%);
    border-color: rgba(244, 201, 107, 0.6);
    transform: translateY(-2px) scale(1.05);
}

.copy-btn:active {
    transform: translateY(0);
}

.copy-btn.copied {
    background: rgba(76, 175, 80, 0.3);
    border-color: rgba(76, 175, 80, 0.6);
}

/* Global Income Level Markers */
.global-marker {
    position: absolute;
    top: -40px;
    transform: translateX(-50%);
    width: 4px;
    height: 40px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    z-index: 10;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

.global-marker.extreme-poverty {
    background: #8B0000;
}

.global-marker.lower-income {
    background: #D2691E;
}

.global-marker.lower-middle {
    background: #FFA500;
}

.global-marker.middle-class {
    background: #FFD700;
}

.global-marker.upper-middle {
    background: #4CAF50;
}

.global-marker.affluent {
    background: #2196F3;
}

.global-marker.very-wealthy {
    background: #1565C0;
}

.global-marker .marker-label {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    margin-bottom: 8px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.global-marker:hover {
    transform: translate(-50%, -50%) scale(1.3);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.global-marker:hover .marker-label {
    opacity: 1;
    transform: translateX(-50%) translateY(-5px);
}

.marker-legend {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-top: 20px;
    padding: 15px;
    background: white;
    border-radius: 10px;
    border: 1px solid #e1e5e9;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
}

.legend-marker {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid white;
    flex-shrink: 0;
}

.legend-marker.extreme-poverty {
    background: #e74c3c;
}

.legend-marker.lower-income {
    background: #f39c12;
}

.legend-marker.middle-class {
    background: #27ae60;
}

.legend-marker.affluent {
    background: #8e44ad;
}

.legend-text {
    color: #555;
    font-weight: 500;
}

/* Global Ladder Page Styles */
.intro-card {
    background: #f8f9fa;
    border-radius: 15px;
    padding: 30px;
    border: 1px solid #e1e5e9;
    text-align: center;
}

.intro-card h2 {
    margin-bottom: 15px;
    font-size: 1.5rem;
}

.intro-card p {
    color: rgba(255,255,255,0.7);
    font-size: 1.1rem;
    line-height: 1.6;
}

/* Founder quote card */
.about-founder-card {
    background: linear-gradient(135deg, rgba(47,214,200,0.06) 0%, rgba(244,201,107,0.04) 100%) !important;
    border: 1px solid rgba(47,214,200,0.18) !important;
    text-align: left !important;
}
.about-founder-quote {
    position: relative;
    padding-left: 20px;
    border-left: 3px solid rgba(47,214,200,0.5);
    margin-bottom: 0;
}
.about-quote-mark {
    font-size: 4rem;
    line-height: 0;
    color: rgba(47,214,200,0.25);
    position: absolute;
    top: 24px;
    left: -8px;
    font-family: Georgia, serif;
}
.about-founder-quote blockquote {
    margin: 0 0 8px 16px;
    font-size: 1.15rem;
    font-style: italic;
    color: rgba(255,255,255,0.88);
    line-height: 1.65;
    font-weight: 400;
}
.about-founder-sig {
    margin: 0 0 0 16px !important;
    font-size: 0.82rem !important;
    color: rgba(47,214,200,0.7) !important;
    font-style: normal !important;
}

.ladder-section .ladder-track {
    height: 60px;
}

.ladder-section .global-marker {
    width: 16px;
    height: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ladder-section .global-marker:hover {
    transform: translate(-50%, -50%) scale(1.2);
}

.ladder-section .global-marker.extreme-poverty {
    left: 10%;
}

.ladder-section .global-marker.lower-income {
    left: 45%;
}

.ladder-section .global-marker.middle-class {
    left: 75%;
}

.ladder-section .global-marker.affluent {
    left: 92%;
}

.ladder-section .global-marker.ultra-wealthy {
    background: #2c3e50;
    left: 98%;
}

.ladder-section .global-marker.very-wealthy {
    background: #c0392b;
    left: 98%;
}

.ladder-section .marker-label {
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.8rem;
    margin-bottom: 8px;
}

/* Enhanced Marker Tooltips */
.marker-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.95);
    color: white;
    padding: 10px 15px;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    margin-bottom: 10px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    text-align: center;
    min-width: 120px;
}

.global-marker:hover .marker-tooltip {
    opacity: 1;
}

.marker-amount {
    display: block;
    font-weight: 700;
    font-size: 0.85rem;
    margin-bottom: 2px;
    color: #fff;
}

.marker-desc {
    display: block;
    font-weight: 500;
    margin-bottom: 2px;
    color: #f8f9fa;
}

.marker-population {
    display: block;
    font-size: 0.7rem;
    color: #adb5bd;
    font-style: italic;
}

/* Quick Explanations */
.quick-explanations {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 30px;
}

.explanation-card {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #e1e5e9;
    border-left: 4px solid #4facfe;
    transition: all 0.3s ease;
}

.explanation-card:hover {
    transform: translateY(-3px) scale(1.008);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

.explanation-card.extreme-poverty {
    border-left-color: #e74c3c;
}

.explanation-card.lower-income {
    border-left-color: #f39c12;
}

.explanation-card.middle-class {
    border-left-color: #27ae60;
}

.explanation-card.affluent {
    border-left-color: #8e44ad;
}

.explanation-card.very-wealthy {
    border-left-color: #c0392b;
}

.explanation-card h4 {
    color: #ffffff;
    margin-bottom: 10px;
    font-size: 1rem;
    font-weight: 600;
}

.explanation-card p {
    color: rgba(255,255,255,0.68);
    line-height: 1.5;
    font-size: 0.9rem;
    margin: 0;
}

.level-card {
    background: #f8f9fa;
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 20px;
    border: 1px solid #e1e5e9;
    border-left: 5px solid #4facfe;
    transition: all 0.3s ease;
}

.level-card:hover {
    transform: translateX(5px) scale(1.005);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.level-card.extreme-poverty {
    border-left-color: #e74c3c;
}

.level-card.lower-income {
    border-left-color: #f39c12;
}

.level-card.middle-class {
    border-left-color: #27ae60;
}

.level-card.affluent {
    border-left-color: #8e44ad;
}

.level-card.ultra-wealthy {
    border-left-color: #2c3e50;
}

.level-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.level-marker {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 3px solid white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

.level-marker.extreme-poverty {
    background: #e74c3c;
}

.level-marker.lower-income {
    background: #f39c12;
}

.level-marker.middle-class {
    background: #27ae60;
}

.level-marker.affluent {
    background: #8e44ad;
}

.level-marker.ultra-wealthy {
    background: #2c3e50;
}

.level-header h3 {
    color: #ffffff;
    font-size: 1.3rem;
    margin-bottom: 5px;
}

.income-amount {
    color: rgba(255,255,255,0.6);
    font-weight: 600;
    font-size: 0.95rem;
}

.level-stats {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
}

.percentile {
    background: rgba(79, 172, 254, 0.1);
    color: #4facfe;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.population {
    color: rgba(255,255,255,0.55);
    font-size: 0.85rem;
    font-weight: 500;
}

.level-description {
    color: rgba(255,255,255,0.7);
    line-height: 1.5;
    font-size: 1rem;
}

.insights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.insight-card {
    background: #f8f9fa;
    border-radius: 15px;
    padding: 25px;
    border: 1px solid #e1e5e9;
    text-align: center;
    transition: all 0.3s ease;
}

.insight-card:hover {
    transform: translateY(-5px) scale(1.005);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

.insight-card h3 {
    color: #ffffff;
    margin-bottom: 15px;
    font-size: 1.2rem;
}

.insight-card p {
    color: rgba(255,255,255,0.68);
    line-height: 1.5;
}

.cta-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 15px;
    padding: 40px;
    text-align: center;
}

.cta-card h2 {
    color: white;
    margin-bottom: 15px;
}

.cta-card p {
    margin-bottom: 25px;
    opacity: 0.9;
    line-height: 1.6;
}

.cta-button {
    display: inline-block;
    background: white;
    color: #667eea;
    padding: 15px 30px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.cta-button:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

/* Methodology Page Styles */
.data-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.data-card {
    background: #f8f9fa;
    border-radius: 15px;
    padding: 25px;
    border: 1px solid #e1e5e9;
    text-align: center;
    transition: all 0.3s ease;
}

.data-card:hover {
    transform: translateY(-5px) scale(1.01);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

.data-card h3 {
    color: #ffffff;
    margin-bottom: 15px;
    font-size: 1.2rem;
}

.data-card p {
    color: rgba(255,255,255,0.68);
    line-height: 1.5;
}

.method-card {
    background: #f8f9fa;
    border-radius: 15px;
    padding: 30px;
    margin-bottom: 25px;
    border: 1px solid #e1e5e9;
    border-left: 5px solid #4facfe;
}

.method-card h3 {
    color: #ffffff;
    margin-bottom: 15px;
    font-size: 1.3rem;
}

.method-card p {
    color: rgba(255,255,255,0.68);
    line-height: 1.5;
    margin-bottom: 15px;
}

.method-card ul {
    color: #555;
    line-height: 1.6;
    margin-left: 20px;
}

.method-card li {
    margin-bottom: 8px;
}

.bracket-table {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 20px;
    border: 1px solid #e1e5e9;
}

.table-header {
    display: grid;
    grid-template-columns: 1fr 1fr 1.5fr;
    background: #4facfe;
    color: white;
    padding: 15px;
    font-weight: 600;
    text-align: center;
}

.table-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1.5fr;
    padding: 12px 15px;
    border-bottom: 1px solid #e1e5e9;
    text-align: center;
}

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

.table-row:nth-child(even) {
    background: #f8f9fa;
}

.formula-box {
    background: rgba(79, 172, 254, 0.1);
    border: 1px solid #4facfe;
    border-radius: 10px;
    padding: 20px;
    margin-top: 15px;
}

.formula-box h4 {
    color: #333;
    margin-bottom: 10px;
    font-size: 1rem;
}

.formula-box code {
    background: rgba(0, 0, 0, 0.05);
    padding: 10px 15px;
    border-radius: 5px;
    font-family: 'Courier New', monospace;
    display: block;
    color: #333;
}

.limitation-card {
    background: #fff3cd;
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 20px;
    border: 1px solid #ffeaa7;
    border-left: 5px solid #f39c12;
}

.limitation-card h3 {
    color: #ffffff;
    margin-bottom: 15px;
    font-size: 1.2rem;
}

.limitation-card p {
    color: rgba(255,255,255,0.68);
    line-height: 1.5;
}

.accuracy-card {
    background: #d1ecf1;
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 20px;
    border: 1px solid #bee5eb;
    border-left: 5px solid #17a2b8;
}

.accuracy-card h3 {
    color: #333;
    margin-bottom: 15px;
    font-size: 1.2rem;
}

.accuracy-card p {
    color: #555;
    line-height: 1.5;
}

.accuracy-card ul {
    color: #555;
    line-height: 1.6;
    margin-left: 20px;
}

.update-card {
    background: #d4edda;
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 20px;
    border: 1px solid #c3e6cb;
    border-left: 5px solid #28a745;
}

.update-card h3 {
    color: #333;
    margin-bottom: 15px;
    font-size: 1.2rem;
}

.update-card p {
    color: #555;
    line-height: 1.5;
}

.simple-example {
    background: rgba(79, 172, 254, 0.1);
    border: 1px solid #4facfe;
    border-radius: 10px;
    padding: 20px;
    margin-top: 15px;
}

.simple-example h4 {
    color: #333;
    margin-bottom: 10px;
    font-size: 1rem;
}

.simple-example p {
    color: #555;
    line-height: 1.5;
    margin: 0;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Enhanced Typography Hierarchy */
h1 {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 32px;
    color: #ffffff;
    text-align: center;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

h2 {
    font-size: 2.2rem;
    font-weight: 600;
    margin-bottom: 24px;
    color: #ffffff;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

h3 {
    font-size: 1.6rem;
    font-weight: 650;
    margin-bottom: 20px;
    color: #ffffff;
    letter-spacing: -0.005em;
    line-height: 1.3;
}

h4 {
    font-size: 1.3rem;
    font-weight: 500;
    margin-bottom: 16px;
    color: #ffffff;
    letter-spacing: -0.005em;
    line-height: 1.4;
}

p {
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 24px;
    color: #e0e0e0;
    font-weight: 400;
}

/* Enhanced spacing for readability */
section {
    margin-bottom: 64px;
}

/* Premium typography utilities */
.text-large {
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.5;
}

.text-medium {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.6;
}

.text-small {
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.6;
}

.text-muted {
    color: #a0a0a0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .container {
        margin: 0;
        border-radius: 0;
        padding: 15px;
    }
    
    header {
        padding: 20px 15px;
    }
    
    header h1 {
        font-size: 2rem;
    }
    
    main {
        padding: 20px 15px;
    }
    
    .rank-percentage {
        font-size: 2.5rem;
    }
    
    .rank-text {
        font-size: 1.1rem;
    }
    
    .breakdown-grid {
        flex-direction: column;
        gap: 12px;
    }
    
    .breakdown-item {
        padding: 15px;
    }
    
    .insights-grid {
        gap: 15px;
    }
    
    .insight-item {
        padding: 12px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .insight-icon {
        margin-bottom: 8px;
    }
    
    h1 {
        font-size: 2.8rem;
        margin-bottom: 24px;
    }
    
    h2 {
        font-size: 1.8rem;
        margin-bottom: 20px;
    }
    
    h3 {
        font-size: 1.4rem;
        margin-bottom: 16px;
    }
    
    p {
        font-size: 1rem;
        margin-bottom: 20px;
    }
    
    section {
        margin-bottom: 48px;
    }
    
    .input-overlay {
        padding: 60px 15px 30px;
    }
    
    .input-panel {
        padding: 20px;
    }
    
    .ladder-visualization-full {
        padding: 40px 15px;
    }
    
    .ladder-container-full {
        height: 30px;
    }
    
    .user-marker-full {
        width: 3px;
        height: 35px;
    }
    
    .results-panel {
        padding: 20px;
        margin: 0 auto 30px;
    }
    
    .shareable-section {
        padding: 20px;
    }
    
    .level-stats {
        flex-direction: column;
        gap: 10px;
    }
    
    .level-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .level-stats {
        flex-direction: column;
        gap: 10px;
    }
    
    .insights-grid {
        grid-template-columns: 1fr;
    }
    
    .table-header,
    .table-row {
        grid-template-columns: 1fr;
        text-align: left;
    }
    
    .table-header span,
    .table-row span {
        padding: 5px 0;
        border-bottom: 1px solid #e1e5e9;
    }
    
    .table-header span:last-child,
    .table-row span:last-child {
        border-bottom: none;
    }
}

/* ================================================
   Historical Perspective Section
   ================================================ */

.historical-section {
    display: none;
    width: 100%;
    max-width: 560px;
    margin: 0 auto 40px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.historical-section.visible {
    opacity: 1;
    transform: translateY(0);
}

.historical-panel {
    background: linear-gradient(135deg,
        rgba(18, 24, 36, 0.95) 0%,
        rgba(24, 32, 48, 0.88) 100%);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    border: 1px solid rgba(47, 214, 200, 0.25);
    padding: 28px 30px;
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(47, 214, 200, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    position: relative;
    overflow: hidden;
}

.historical-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(47, 214, 200, 0.5) 50%,
        transparent 100%);
}

.historical-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #E8922A;
    margin-bottom: 6px;
    letter-spacing: 0.02em;
}

.historical-subtitle {
    font-size: 0.85rem;
    color: #9aa3b5;
    margin-bottom: 24px;
}

/* Year display */
.year-display {
    text-align: center;
    margin-bottom: 12px;
}

.year-number {
    font-size: 4rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.03em;
    line-height: 1;
    transition: color 0.4s ease;
    display: inline-block;
}

/* Slider container */
.year-slider-container {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
}

.year-limit {
    font-size: 0.8rem;
    color: #9aa3b5;
    font-weight: 600;
    white-space: nowrap;
    min-width: 40px;
}

.year-limit:last-child {
    text-align: right;
}

.year-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(90deg, rgba(47, 214, 200, 0.3), rgba(47, 214, 200, 0.1));
    outline: none;
    cursor: pointer;
    transition: background 0.3s ease;
}

.year-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #E8922A, #F4C96B);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(47, 214, 200, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.year-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 4px 16px rgba(47, 214, 200, 0.7);
}

.year-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #E8922A, #F4C96B);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(47, 214, 200, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.2);
}

/* Historical result */
.historical-result {
    text-align: center;
    padding: 20px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 20px;
    transition: all 0.4s ease;
}

.historical-percentile {
    font-size: 3.5rem;
    font-weight: 800;
    color: #E8922A;
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 10px;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.historical-percentile.animating {
    opacity: 0;
    transform: scale(0.9);
}

.historical-text {
    font-size: 0.95rem;
    color: #c8d0e0;
    line-height: 1.5;
    transition: opacity 0.3s ease;
}

/* Era context */
.historical-context {
    padding: 16px 18px;
    border-radius: 12px;
    transition: background 0.5s ease;
    position: relative;
    overflow: hidden;
}

/* Pre-Industrial: warm parchment amber + crosshatch */
.historical-context[data-era="preindustrial"] {
    background:
        linear-gradient(rgba(6,3,1,0.78), rgba(6,3,1,0.80)),
        repeating-linear-gradient(45deg,  rgba(180,110,30,0.12) 0, rgba(180,110,30,0.12) 1px, transparent 0, transparent 50%),
        repeating-linear-gradient(-45deg, rgba(180,110,30,0.12) 0, rgba(180,110,30,0.12) 1px, transparent 0, transparent 50%),
        linear-gradient(150deg, #6B3A1F 0%, #4A2A10 55%, #2c1505 100%);
    background-size: auto, 14px 14px, 14px 14px, auto;
}

/* Early Industrial: furnace orange + horizontal smoke lines */
.historical-context[data-era="earlyindustrial"] {
    background:
        linear-gradient(rgba(4,2,0,0.80), rgba(4,2,0,0.82)),
        repeating-linear-gradient(0deg, rgba(220,90,20,0.10) 0, rgba(220,90,20,0.10) 1px, transparent 0, transparent 22px),
        linear-gradient(150deg, #3d0800 0%, #7a1a00 50%, #1a0400 100%);
    background-size: auto, auto, auto;
}

/* Second Industrial: steel gray + diagonal rail lines */
.historical-context[data-era="secondindustrial"] {
    background:
        linear-gradient(rgba(5,5,6,0.80), rgba(5,5,6,0.80)),
        repeating-linear-gradient(60deg, rgba(200,170,80,0.10) 0, rgba(200,170,80,0.10) 1px, transparent 0, transparent 18px),
        linear-gradient(150deg, #1a1a22 0%, #2e2e3a 50%, #111118 100%);
    background-size: auto, auto, auto;
}

/* Interwar: art-deco gold/black + double diagonal */
.historical-context[data-era="interwar"] {
    background:
        linear-gradient(rgba(5,4,1,0.80), rgba(5,4,1,0.80)),
        repeating-linear-gradient(135deg, rgba(200,160,40,0.12) 0, rgba(200,160,40,0.12) 1px, transparent 0, transparent 12px),
        repeating-linear-gradient(45deg,  rgba(200,160,40,0.06) 0, rgba(200,160,40,0.06) 1px, transparent 0, transparent 12px),
        linear-gradient(150deg, #2a2000 0%, #4a3800 55%, #1a1400 100%);
    background-size: auto, 12px 12px, 12px 12px, auto;
}

/* Post-War: navy blue + fine horizontal scan lines */
.historical-context[data-era="postwar"] {
    background:
        linear-gradient(rgba(2,5,14,0.80), rgba(2,5,14,0.80)),
        repeating-linear-gradient(0deg, rgba(80,130,220,0.10) 0, rgba(80,130,220,0.10) 1px, transparent 0, transparent 20px),
        linear-gradient(150deg, #06103a 0%, #0d1f5e 50%, #040c28 100%);
    background-size: auto, auto, auto;
}

/* Golden Age: warm amber/orange + radial burst */
.historical-context[data-era="goldenage"] {
    background:
        linear-gradient(rgba(6,3,0,0.78), rgba(6,3,0,0.78)),
        radial-gradient(ellipse at 50% 0%, rgba(240,160,30,0.18) 0%, transparent 70%),
        linear-gradient(150deg, #3a1800 0%, #7a3500 50%, #280f00 100%);
    background-size: auto, auto, auto;
}

/* Globalisation: neon cyan + circuit dots */
.historical-context[data-era="coldwar"] {
    background:
        linear-gradient(rgba(2,8,14,0.82), rgba(2,8,14,0.82)),
        radial-gradient(circle, rgba(0,200,200,0.12) 1px, transparent 1px),
        linear-gradient(150deg, #001a24 0%, #003040 50%, #000e18 100%);
    background-size: auto, 22px 22px, auto;
}

/* Digital Revolution: purple/teal + grid */
.historical-context[data-era="digitalrev"] {
    background:
        linear-gradient(rgba(4,2,12,0.82), rgba(4,2,12,0.82)),
        linear-gradient(rgba(100,60,220,0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(100,60,220,0.08) 1px, transparent 1px),
        linear-gradient(150deg, #0d0520 0%, #1a0a38 50%, #080214 100%);
    background-size: auto, 24px 24px, 24px 24px, auto;
}

/* Globalisation Peak: deep indigo + sparse dots */
.historical-context[data-era="globalpeak"] {
    background:
        linear-gradient(rgba(3,5,18,0.82), rgba(3,5,18,0.82)),
        radial-gradient(circle, rgba(60,100,255,0.12) 1px, transparent 1px),
        linear-gradient(150deg, #050a30 0%, #0a1450 50%, #030718 100%);
    background-size: auto, 28px 28px, auto;
}

/* Contemporary: dark teal + subtle dot noise */
.historical-context[data-era="contemporary"] {
    background:
        linear-gradient(rgba(3,8,12,0.82), rgba(3,8,12,0.82)),
        radial-gradient(circle, rgba(232,146,42,0.08) 1px, transparent 1px),
        linear-gradient(150deg, #020c10 0%, #051820 50%, #010810 100%);
    background-size: auto, 20px 20px, auto;
}

/* Event type badge — base */
.event-type-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 4px;
    margin-bottom: 10px;
    background: rgba(47, 214, 200, 0.15);
    border: 1px solid rgba(47, 214, 200, 0.35);
    color: #E8922A;
}

/* Badge colours per event type */
.event-type-discovery    { background: rgba(232,146,42,0.15); border-color: rgba(232,146,42,0.4);  color: #E8922A; }
.event-type-wonder       { background: rgba(244,201,107,0.15); border-color: rgba(244,201,107,0.4); color: #F4C96B; }
.event-type-great-war    { background: rgba(231,76,60,0.15);   border-color: rgba(231,76,60,0.4);   color: #e74c3c; }
.event-type-catastrophe  { background: rgba(231,76,60,0.12);   border-color: rgba(231,76,60,0.35);  color: #e87c6c; }
.event-type-trade-route  { background: rgba(46,204,113,0.15);  border-color: rgba(46,204,113,0.4);  color: #2ecc71; }
.event-type-religion     { background: rgba(155,89,182,0.15);  border-color: rgba(155,89,182,0.4);  color: #9b59b6; }
.event-type-philosophy   { background: rgba(52,152,219,0.15);  border-color: rgba(52,152,219,0.4);  color: #3498db; }
.event-type-policy       { background: rgba(230,126,34,0.15);  border-color: rgba(230,126,34,0.4);  color: #e67e22; }
.event-type-turning-point{ background: rgba(241,196,15,0.15);  border-color: rgba(241,196,15,0.4);  color: #f1c40f; }

.event-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 4px;
    line-height: 1.3;
}

.event-year {
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255,255,255,0.45);
    letter-spacing: 0.04em;
    margin-bottom: 10px;
}

.era-desc {
    font-size: 0.85rem;
    color: rgba(220,228,240,0.88);
    line-height: 1.65;
}

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

/* ================================================================
   QUIZ PAGE — Guess the Percentile
   ================================================================ */

.quiz-score-bar {
    display: flex;
    justify-content: center;
    gap: 40px;
    padding: 18px 0 28px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 32px;
}
.qsb-item { text-align: center; }
.qsb-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
    margin-bottom: 4px;
}
.qsb-value {
    font-size: 1.6rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.02em;
}

/* Question card */
@keyframes cardSlideIn {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}
.quiz-question-card {
    background: linear-gradient(135deg, rgba(18,24,36,0.97), rgba(24,32,48,0.92));
    border: 1px solid rgba(232,146,42,0.18);
    border-radius: 20px;
    padding: 32px;
    max-width: 640px;
    margin: 0 auto 24px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06);
}
.quiz-question-card.card-in { animation: cardSlideIn 0.35s ease forwards; }

.quiz-meta {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.28);
    margin-bottom: 20px;
}

.quiz-subject {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}
.quiz-flag { font-size: 2.8rem; line-height: 1; }
.quiz-job {
    font-size: 1.4rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
}
.quiz-country {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.5);
    margin-top: 4px;
}

.quiz-salary-display {
    background: rgba(232,146,42,0.07);
    border: 1px solid rgba(232,146,42,0.2);
    border-radius: 10px;
    padding: 14px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}
.quiz-salary-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #E8922A;
}
.quiz-salary-value {
    font-size: 1.35rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.01em;
}

.quiz-prompt {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.55);
    margin-bottom: 22px;
    font-style: italic;
}

/* Guess slider */
.guess-slider-wrap { margin-bottom: 28px; }
.guess-slider-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.35);
    margin-bottom: 12px;
}
.guess-slider-labels strong { color: #F4C96B; font-size: 1rem; }

.quiz-slider {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(90deg, rgba(232,146,42,0.25), rgba(244,201,107,0.15));
    outline: none;
    cursor: pointer;
    margin-bottom: 8px;
}
.quiz-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, #E8922A, #F4C96B);
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(232,146,42,0.6);
    border: 3px solid rgba(255,255,255,0.2);
    transition: transform 0.15s ease;
}
.quiz-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.quiz-slider::-moz-range-thumb {
    width: 26px; height: 26px; border-radius: 50%;
    background: linear-gradient(135deg, #E8922A, #F4C96B);
    border: 3px solid rgba(255,255,255,0.2);
}
.guess-slider-ticks {
    display: flex;
    justify-content: space-between;
    font-size: 0.65rem;
    color: rgba(255,255,255,0.2);
    padding: 0 2px;
}

/* Quiz tier name — appears below slider live value */
.quiz-tier-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: 4px;
    transition: color 0.25s;
    min-height: 1em;
}

/* Buttons */
.quiz-btn {
    display: block;
    width: 100%;
    padding: 14px 24px;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    cursor: pointer;
    border: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    margin-top: 10px;
}
.quiz-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.3); }
.primary-btn {
    background: linear-gradient(135deg, #E8922A, #C4721A);
    color: #000;
}
.secondary-btn {
    background: rgba(255,255,255,0.06);
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.12);
    padding: 13px 24px;
}

/* Answer panel */
@keyframes revealPanel {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.answer-panel {
    max-width: 640px;
    margin: 0 auto;
    background: linear-gradient(135deg, rgba(14,20,32,0.97), rgba(18,26,42,0.95));
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    padding: 24px 28px;
    opacity: 0;
}
.answer-panel.reveal { animation: revealPanel 0.4s ease forwards; }

.answer-bars { margin-bottom: 18px; }
.answer-bar-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.answer-bar-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,0.4);
    min-width: 72px;
}
.answer-bar-track {
    flex: 1;
    height: 10px;
    background: rgba(255,255,255,0.06);
    border-radius: 5px;
    overflow: hidden;
}
.answer-bar {
    height: 100%;
    border-radius: 5px;
    width: 0%;
    transition: width 0.8s cubic-bezier(0.4,0,0.2,1);
}
.correct-bar { background: linear-gradient(90deg, #E8922A, #D4B043); }
.guess-bar   { background: linear-gradient(90deg, #F4C96B, #f0a840); }
.answer-bar-pct {
    font-size: 0.85rem;
    font-weight: 700;
    color: #ffffff;
    min-width: 38px;
    text-align: right;
}

.answer-verdict {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}
.answer-feedback {
    font-size: 0.95rem;
    font-weight: 600;
}
.fb-perfect { color: #E8922A; }
.fb-great   { color: #2ecc71; }
.fb-good    { color: #F4C96B; }
.fb-ok      { color: #e67e22; }
.fb-miss    { color: #e74c3c; }
.fb-far     { color: #c0392b; }

.answer-pts {
    font-size: 1.1rem;
    font-weight: 800;
    color: #F4C96B;
}
.answer-context {
    font-size: 0.83rem;
    color: rgba(200,212,232,0.75);
    line-height: 1.65;
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: 14px;
    margin: 0;
}

/* Final score */
.final-card {
    max-width: 480px;
    margin: 0 auto;
    text-align: center;
    background: linear-gradient(135deg, rgba(18,24,36,0.97), rgba(24,32,48,0.92));
    border: 1px solid rgba(244,201,107,0.25);
    border-radius: 20px;
    padding: 40px 36px;
}
.final-title {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #E8922A;
    margin-bottom: 24px;
}
.final-score-ring {
    margin-bottom: 6px;
}
.final-score-val {
    font-size: 5rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.03em;
}
.final-score-denom {
    font-size: 1.4rem;
    color: rgba(255,255,255,0.35);
    font-weight: 600;
}
.final-pct {
    font-size: 1.5rem;
    font-weight: 700;
    color: #E8922A;
    margin-bottom: 8px;
}
.final-grade {
    font-size: 1.1rem;
    font-weight: 600;
    color: #F4C96B;
    margin-bottom: 16px;
}
.final-hiscore-row {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.4);
    margin-bottom: 24px;
}
.final-hiscore-row strong { color: #F4C96B; }

.final-scoring-guide {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 24px;
    text-align: left;
}
.sg-title {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.3);
    margin-bottom: 10px;
}
.sg-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.5);
    margin-bottom: 6px;
}
.sg-band {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 20px;
}
.sg-band.perfect { background: rgba(232,146,42,0.15); color: #E8922A; }
.sg-band.great   { background: rgba(46,204,113,0.15); color: #2ecc71; }
.sg-band.good    { background: rgba(244,201,107,0.15);color: #F4C96B; }
.sg-band.ok      { background: rgba(230,126,34,0.15); color: #e67e22; }
.sg-band.miss    { background: rgba(231,76,60,0.15);  color: #e74c3c; }
.sg-band.far     { background: rgba(192,57,43,0.12);  color: #c0392b; }

/* ================================================================
   PROFESSIONS PAGE
   ================================================================ */

/* Hero band */
.professions-hero {
    background: linear-gradient(rgba(5,8,18,0.82), rgba(5,8,18,0.92)),
                linear-gradient(135deg, #0B0F1A 0%, #1a2332 100%);
    background-size: cover;
    background-position: center;
    padding: 60px 20px 40px;
    text-align: center;
    position: relative;
    transition: background-image 0.6s ease;
    border-bottom: 1px solid rgba(232,146,42,0.12);
}

.professions-hero-inner {
    max-width: 700px;
    margin: 0 auto;
}

.professions-page-label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    color: #E8922A;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.decade-display-wrap {
    margin-bottom: 4px;
}

.decade-number {
    font-size: 5.5rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.03em;
    line-height: 1;
    transition: opacity 0.2s ease;
}

.era-label-wrap {
    margin-bottom: 36px;
}

.era-label-text {
    font-size: 1.2rem;
    font-weight: 500;
    color: rgba(255,255,255,0.6);
    letter-spacing: 0.02em;
}

/* Slider */
.professions-slider-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.professions-decade-limit {
    font-size: 0.8rem;
    color: #9aa3b5;
    font-weight: 600;
    min-width: 42px;
    white-space: nowrap;
}

.professions-decade-limit:last-child { text-align: right; }

.professions-slider-track { flex: 1; }

.professions-slider {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(90deg, rgba(232,146,42,0.4), rgba(244,201,107,0.2));
    outline: none;
    cursor: pointer;
}

.professions-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #E8922A, #F4C96B);
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(232,146,42,0.5);
    border: 2px solid rgba(255,255,255,0.2);
    transition: transform 0.2s ease;
}

.professions-slider::-webkit-slider-thumb:hover { transform: scale(1.2); }
.professions-slider::-moz-range-thumb {
    width: 22px; height: 22px; border-radius: 50%;
    background: linear-gradient(135deg, #E8922A, #F4C96B);
    border: 2px solid rgba(255,255,255,0.2);
}

/* Tick labels */
.decade-tick-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.68rem;
    color: rgba(255,255,255,0.25);
    padding: 0 2px;
}

/* Body */
.professions-body {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 24px 80px;
}

.professions-content {
    transition: opacity 0.18s ease;
}

.professions-content.fade-out { opacity: 0; }

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

.professions-content.fade-in-anim {
    animation: fadeInContent 0.4s ease forwards;
}

/* Future banner */
.future-banner {
    background: linear-gradient(90deg, rgba(232,146,42,0.12), rgba(244,201,107,0.08));
    border: 1px solid rgba(232,146,42,0.25);
    border-radius: 10px;
    padding: 12px 20px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #E8922A;
    letter-spacing: 0.03em;
    margin-bottom: 28px;
    text-align: center;
}

/* Content grid */
.content-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 28px;
    align-items: start;
}

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

/* Section titles */
.section-title {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #E8922A;
    margin-bottom: 18px;
}

/* Profession cards */
.prof-list { display: flex; flex-direction: column; gap: 14px; }

.prof-card {
    display: flex;
    gap: 16px;
    background: linear-gradient(135deg, rgba(18,24,36,0.95), rgba(24,32,48,0.88));
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px;
    padding: 18px 20px;
    transition: border-color 0.3s ease, transform 0.2s ease;
}

.prof-card:hover {
    border-color: rgba(232,146,42,0.25);
    transform: translateX(4px);
}

.prof-rank {
    font-size: 1.8rem;
    font-weight: 800;
    color: rgba(244,201,107,0.35);
    line-height: 1;
    min-width: 28px;
    padding-top: 2px;
}

.prof-body { flex: 1; }

.prof-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.prof-icon { font-size: 1.1rem; }

.prof-why {
    font-size: 0.85rem;
    color: rgba(200,210,228,0.80);
    line-height: 1.65;
}

/* Context column */
.context-column { display: flex; flex-direction: column; gap: 16px; }

.context-card {
    background: linear-gradient(135deg, rgba(16,22,34,0.95), rgba(20,28,44,0.90));
    border-radius: 14px;
    padding: 20px 22px;
    border: 1px solid rgba(255,255,255,0.06);
}

.boom-card   { border-left: 3px solid #E8922A; }
.shift-card  { border-left: 3px solid #F4C96B; }
.pioneers-card { border-left: 3px solid #9b59b6; }

.context-title {
    font-size: 0.70rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
    margin-bottom: 10px;
}

.boom-card   .context-title { color: #E8922A; }
.shift-card  .context-title { color: #F4C96B; }
.pioneers-card .context-title { color: #9b59b6; }

.context-text {
    font-size: 0.84rem;
    color: rgba(200,210,228,0.82);
    line-height: 1.7;
}

/* Pioneer cards */
.pioneers-list { display: flex; flex-direction: column; gap: 14px; }

.pioneer-card {
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.pioneer-card:last-child { border-bottom: none; padding-bottom: 0; }

.pioneer-name {
    font-size: 0.92rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 2px;
}

.pioneer-role {
    font-size: 0.72rem;
    font-weight: 600;
    color: #9b59b6;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}

.pioneer-desc {
    font-size: 0.82rem;
    color: rgba(190,200,220,0.78);
    line-height: 1.6;
}

/* ================================================================ */

@media (max-width: 480px) {
    .nav-container {
        padding: 0 10px;
    }
    
    .nav-menu {
        gap: 8px;
    }
    
    .nav-link {
        padding: 3px 6px;
        font-size: 0.8rem;
    }
    
    .input-overlay {
        padding: 30px 10px 20px;
    }
    
    .input-panel {
        padding: 15px;
    }
    
    .ladder-visualization-full {
        padding: 20px 10px;
    }
    
    .ladder-container-full {
        height: 20px;
    }
    
    .results-panel {
        padding: 15px;
        margin: 0 auto 20px;
    }
    
    .rank-number {
        font-size: 2.2rem;
    }
    
    .rank-text {
        font-size: 0.95rem;
    }
    
    .breakdown-item {
        padding: 12px;
    }
    
    .insights-grid {
        gap: 12px;
    }
    
    .insight-item {
        padding: 10px;
    }
    
    h1 {
        font-size: 2.2rem;
        margin-bottom: 16px;
    }
    
    h2 {
        font-size: 1.5rem;
        margin-bottom: 14px;
    }
    
    h3 {
        font-size: 1.25rem;
        margin-bottom: 12px;
    }
    
    p {
        font-size: 0.9rem;
        margin-bottom: 16px;
    }
    
    section {
        margin-bottom: 30px;
    }
    
    .container {
        padding: 10px;
    }
    
    header {
        padding: 15px 10px;
    }
    
    main {
        padding: 15px 10px;
    }
    
    .shareable-section {
        padding: 15px;
    }
    
    .global-marker {
        top: -30px;
        width: 3px;
        height: 30px;
    }
    
    .user-marker-full {
        width: 4px;
        height: 35px;
        top: -40px;
    }
    
    .marker-tooltip {
        padding: 6px 10px;
        font-size: 0.7rem;
        min-width: 100px;
    }
}

/* ===== INCOME JOURNAL ===== */
.journal-page .container {
    max-width: 900px;
    margin: 0 auto;
}

.journal-add-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(232,146,42,0.25);
    border-radius: 16px;
    padding: 28px 32px;
    margin-bottom: 32px;
}

.journal-add-card h2 {
    font-size: 1.2rem;
    color: #E8922A;
    margin-bottom: 20px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 700;
}

.journal-form-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: flex-end;
}

.journal-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 120px;
}

.journal-form-group label {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.55);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

.journal-form-group input,
.journal-form-group select {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    padding: 10px 14px;
    color: #fff;
    font-size: 0.95rem;
    font-family: inherit;
    transition: border-color 0.2s;
}

.journal-form-group input:focus,
.journal-form-group select:focus {
    outline: none;
    border-color: #E8922A;
}

.journal-form-group select option {
    background: #1a2332;
}

.journal-add-btn {
    background: linear-gradient(135deg, #E8922A, #F4C96B);
    color: #0B0F1A;
    border: none;
    border-radius: 8px;
    padding: 10px 24px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.15s;
    white-space: nowrap;
    align-self: flex-end;
}

.journal-add-btn:hover {
    opacity: 0.88;
    transform: translateY(-1px);
}

/* Chart */
.journal-chart-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 28px 32px;
    margin-bottom: 32px;
}

.journal-chart-card h2 {
    font-size: 1rem;
    color: rgba(255,255,255,0.7);
    margin-bottom: 24px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

.journal-chart-wrap {
    width: 100%;
    overflow-x: auto;
}

.journal-chart-svg {
    width: 100%;
    min-width: 320px;
    height: 200px;
    display: block;
}

/* Entries list */
.journal-entries-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 28px 32px;
}

.journal-entries-card h2 {
    font-size: 1rem;
    color: rgba(255,255,255,0.7);
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

.journal-empty {
    text-align: center;
    color: rgba(255,255,255,0.35);
    padding: 40px 0;
    font-size: 0.95rem;
}

.journal-entry {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border-radius: 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 10px;
    transition: background 0.2s;
}

.journal-entry:hover {
    background: rgba(255,255,255,0.06);
}

.journal-entry-year {
    font-size: 1.15rem;
    font-weight: 700;
    color: #F4C96B;
    min-width: 48px;
}

.journal-entry-income {
    font-size: 1rem;
    color: #fff;
    font-weight: 600;
    flex: 1;
}

.journal-entry-pct {
    font-size: 0.9rem;
    color: #E8922A;
    font-weight: 700;
    min-width: 80px;
    text-align: right;
}

.journal-entry-delta {
    font-size: 0.8rem;
    min-width: 64px;
    text-align: right;
    font-weight: 600;
}

.journal-entry-delta.up   { color: #4cdf7a; }
.journal-entry-delta.down { color: #f05a5a; }
.journal-entry-delta.flat { color: rgba(255,255,255,0.35); }

.journal-delete-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(255,255,255,0.25);
    font-size: 1rem;
    transition: color 0.2s;
    padding: 4px;
    line-height: 1;
}

.journal-delete-btn:hover {
    color: #f05a5a;
}

.journal-summary-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.journal-summary-stat {
    flex: 1;
    min-width: 140px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 16px 20px;
    text-align: center;
}

.journal-summary-stat .stat-val {
    font-size: 1.4rem;
    font-weight: 700;
    color: #E8922A;
    display: block;
}

.journal-summary-stat .stat-lbl {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 4px;
    display: block;
}

@media (max-width: 600px) {
    .journal-add-card,
    .journal-chart-card,
    .journal-entries-card {
        padding: 18px 16px;
    }
    .journal-form-row {
        flex-direction: column;
    }
    .journal-add-btn {
        width: 100%;
        padding: 12px;
    }
}

/* ===== DAILY WEALTH FACT TICKER ===== */
.dwf-ticker {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(11, 15, 26, 0.92);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(232,146,42,0.2);
    padding: 10px 24px;
    min-height: 44px;
}

.dwf-label {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: #E8922A;
    white-space: nowrap;
    text-transform: uppercase;
    background: rgba(232,146,42,0.12);
    padding: 3px 8px;
    border-radius: 4px;
    flex-shrink: 0;
}

.dwf-text {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.82);
    flex: 1;
    line-height: 1.4;
    transition: opacity 0.4s ease;
}

.dwf-text.fading {
    opacity: 0;
}

.dwf-next-btn {
    background: none;
    border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.5);
    border-radius: 6px;
    width: 28px;
    height: 28px;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 0.2s, color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dwf-next-btn:hover {
    border-color: #E8922A;
    color: #E8922A;
}

/* Push page content above fixed ticker */
body.index-page main.visualization-main {
    padding-bottom: 54px;
}

@media (max-width: 600px) {
    .dwf-ticker {
        padding: 8px 14px;
        gap: 10px;
    }
    .dwf-label {
        display: none;
    }
    .dwf-text {
        font-size: 0.8rem;
    }
}

/* ===== WHO EARNS MORE? ===== */
.wem-page .container { max-width: 800px; margin: 0 auto; }

.wem-score-bar {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-bottom: 28px;
    padding: 14px 24px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px;
}

.wem-sb-item { text-align: center; }
.wem-sb-label { font-size: 0.68rem; color: rgba(255,255,255,0.45); text-transform: uppercase; letter-spacing: 0.08em; display: block; }
.wem-sb-value { font-size: 1.4rem; font-weight: 800; color: #E8922A; }

.wem-vs-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 16px;
    align-items: center;
    margin-bottom: 20px;
}

.wem-card {
    background: rgba(255,255,255,0.04);
    border: 2px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 24px 20px;
    cursor: pointer;
    transition: border-color 0.25s, background 0.25s, transform 0.2s;
    text-align: center;
    user-select: none;
}

.wem-card:hover:not(.answered) {
    border-color: #E8922A;
    background: rgba(232,146,42,0.06);
    transform: translateY(-3px);
}

.wem-card.correct {
    border-color: #D4B043;
    background: rgba(76,217,122,0.08);
}

.wem-card.wrong {
    border-color: #f05a5a;
    background: rgba(240,90,90,0.07);
}

.wem-card.answered { cursor: default; }

.wem-card-flag { font-size: 2.2rem; margin-bottom: 10px; display: block; }
.wem-card-job  { font-size: 1.1rem; font-weight: 700; color: #fff; margin-bottom: 4px; }
.wem-card-country { font-size: 0.82rem; color: rgba(255,255,255,0.5); margin-bottom: 12px; }

.wem-card-income {
    font-size: 1rem;
    font-weight: 700;
    color: #F4C96B;
    opacity: 0;
    transition: opacity 0.4s ease 0.1s;
    min-height: 1.4em;
}

.wem-card-income.revealed { opacity: 1; }

.wem-vs-badge {
    font-size: 1rem;
    font-weight: 800;
    color: rgba(255,255,255,0.3);
    text-align: center;
}

.wem-verdict {
    text-align: center;
    min-height: 40px;
    margin-bottom: 16px;
}

.wem-verdict-text {
    font-size: 1.1rem;
    font-weight: 700;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.wem-verdict-text.show { opacity: 1; }
.wem-verdict-text.correct { color: #D4B043; }
.wem-verdict-text.wrong   { color: #f05a5a; }

.wem-context {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.5);
    text-align: center;
    margin-bottom: 20px;
    min-height: 1.4em;
    transition: opacity 0.3s ease;
}

.wem-next-btn {
    display: block;
    margin: 0 auto;
    background: linear-gradient(135deg, #E8922A, #F4C96B);
    color: #0B0F1A;
    border: none;
    border-radius: 10px;
    padding: 12px 36px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s;
    opacity: 0;
    pointer-events: none;
}

.wem-next-btn.show {
    opacity: 1;
    pointer-events: auto;
}

.wem-final {
    text-align: center;
    display: none;
}

.wem-final.visible { display: block; }

.wem-final-score {
    font-size: 3.5rem;
    font-weight: 800;
    color: #E8922A;
    display: block;
    margin: 16px 0 6px;
}

.wem-final-label {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.5);
    margin-bottom: 24px;
    display: block;
}

.wem-final-grade {
    font-size: 1.3rem;
    font-weight: 700;
    color: #F4C96B;
    margin-bottom: 28px;
}

.wem-play-again {
    background: linear-gradient(135deg, #E8922A, #F4C96B);
    color: #0B0F1A;
    border: none;
    border-radius: 10px;
    padding: 12px 36px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    margin: 0 auto;
    display: inline-block;
}

@media (max-width: 600px) {
    .wem-vs-row {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }
    .wem-vs-badge { grid-row: 2; }
}

/* ===== HISTORICAL TWIN ===== */
.twin-page .container { max-width: 860px; margin: 0 auto; }

.twin-input-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(244,201,107,0.25);
    border-radius: 16px;
    padding: 28px 32px;
    margin-bottom: 32px;
}

.twin-input-card h2 {
    font-size: 1.1rem;
    color: #F4C96B;
    margin-bottom: 18px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 700;
}

.twin-form-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: flex-end;
}

.twin-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 130px;
}

.twin-form-group label {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

.twin-form-group input,
.twin-form-group select {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    padding: 10px 14px;
    color: #fff;
    font-size: 0.95rem;
    font-family: inherit;
    transition: border-color 0.2s;
}

.twin-form-group input:focus,
.twin-form-group select:focus {
    outline: none;
    border-color: #F4C96B;
}

.twin-form-group select option { background: #1a2332; }

.twin-find-btn {
    background: linear-gradient(135deg, #F4C96B, #e8a83a);
    color: #0B0F1A;
    border: none;
    border-radius: 8px;
    padding: 10px 26px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.15s;
    white-space: nowrap;
    align-self: flex-end;
}

.twin-find-btn:hover { opacity: 0.85; transform: translateY(-1px); }

/* Twin result card */
.twin-result-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(244,201,107,0.2);
    border-radius: 20px;
    padding: 36px 36px 28px;
    display: none;
    animation: twinReveal 0.5s ease;
}

.twin-result-card.visible { display: block; }

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

.twin-era-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 20px;
    background: rgba(244,201,107,0.15);
    color: #F4C96B;
    border: 1px solid rgba(244,201,107,0.3);
    margin-bottom: 16px;
}

.twin-header {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 20px;
}

.twin-avatar {
    font-size: 3.2rem;
    line-height: 1;
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
}

.twin-name {
    font-size: 1.6rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.1;
    margin-bottom: 4px;
}

.twin-occupation {
    font-size: 0.95rem;
    color: #F4C96B;
    font-weight: 500;
    margin-bottom: 2px;
}

.twin-location {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.45);
}

.twin-stats-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.twin-stat {
    flex: 1;
    min-width: 120px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
    padding: 14px 16px;
    text-align: center;
}

.twin-stat .ts-val {
    font-size: 1.25rem;
    font-weight: 700;
    color: #E8922A;
    display: block;
}

.twin-stat .ts-lbl {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.45);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 3px;
    display: block;
}

.twin-story {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.78);
    line-height: 1.7;
    margin-bottom: 18px;
    border-left: 3px solid rgba(244,201,107,0.4);
    padding-left: 16px;
}

.twin-fun-fact {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.5);
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
    padding: 12px 16px;
    line-height: 1.6;
}

.twin-fun-fact strong {
    color: #F4C96B;
    font-weight: 600;
}

.twin-reroll-btn {
    margin-top: 20px;
    background: none;
    border: 1px solid rgba(244,201,107,0.35);
    color: #F4C96B;
    border-radius: 8px;
    padding: 8px 20px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.twin-reroll-btn:hover {
    background: rgba(244,201,107,0.08);
}

@media (max-width: 600px) {
    .twin-input-card,
    .twin-result-card { padding: 18px 16px; }
    .twin-form-row { flex-direction: column; }
    .twin-find-btn { width: 100%; padding: 12px; }
    .twin-header { flex-direction: column; gap: 12px; }
}

/* ===== GOAL TRACKER ===== */
.goal-page .container { max-width: 860px; margin: 0 auto; }

.goal-input-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(79,209,130,0.25);
    border-radius: 16px;
    padding: 28px 32px;
    margin-bottom: 28px;
}

.goal-input-card h2 {
    font-size: 1.1rem;
    color: #D4B043;
    margin-bottom: 18px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 700;
}

.goal-form-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: flex-end;
}

.goal-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 130px;
}

.goal-form-group label {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

.goal-form-group input,
.goal-form-group select {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    padding: 10px 14px;
    color: #fff;
    font-size: 0.95rem;
    font-family: inherit;
    transition: border-color 0.2s;
}

.goal-form-group input:focus,
.goal-form-group select:focus {
    outline: none;
    border-color: #D4B043;
}

.goal-form-group select option { background: #1a2332; }

.goal-calc-btn {
    background: linear-gradient(135deg, #D4B043, #E8922A);
    color: #0B0F1A;
    border: none;
    border-radius: 8px;
    padding: 10px 24px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.15s;
    white-space: nowrap;
    align-self: flex-end;
}

.goal-calc-btn:hover { opacity: 0.85; transform: translateY(-1px); }

.goal-result-area {
    display: none;
}

.goal-result-area.visible { display: block; }

.goal-current-pct {
    text-align: center;
    margin-bottom: 28px;
}

.goal-pct-big {
    font-size: 3.5rem;
    font-weight: 800;
    color: #E8922A;
    line-height: 1;
    display: block;
}

.goal-pct-sub {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.5);
    margin-top: 4px;
    display: block;
}

.goal-milestones {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 28px;
}

.goal-milestone-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px;
    padding: 16px 20px;
}

.goal-milestone-card.achieved {
    border-color: rgba(76,217,122,0.3);
    background: rgba(76,217,122,0.05);
}

.goal-milestone-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.goal-milestone-label {
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
}

.goal-milestone-label.achieved-label { color: #D4B043; }

.goal-milestone-income {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.5);
}

.goal-milestone-badge {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.goal-milestone-badge.done {
    background: rgba(76,217,122,0.2);
    color: #D4B043;
    border: 1px solid rgba(76,217,122,0.35);
}

.goal-milestone-badge.next {
    background: rgba(244,201,107,0.15);
    color: #F4C96B;
    border: 1px solid rgba(244,201,107,0.3);
}

.goal-milestone-badge.locked {
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.3);
    border: 1px solid rgba(255,255,255,0.1);
}

/* Progress bar */
.goal-progress-track {
    height: 8px;
    background: rgba(255,255,255,0.08);
    border-radius: 4px;
    overflow: hidden;
}

.goal-progress-fill {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, #E8922A, #D4B043);
    transition: width 1s ease;
    width: 0%;
}

.goal-progress-pct {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.45);
    margin-top: 5px;
    display: block;
    text-align: right;
}

.goal-gap-text {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.55);
    margin-top: 8px;
    line-height: 1.5;
}

@media (max-width: 600px) {
    .goal-input-card { padding: 18px 16px; }
    .goal-form-row { flex-direction: column; }
    .goal-calc-btn { width: 100%; padding: 12px; }
    .goal-pct-big { font-size: 2.8rem; }
}

/* ===== WHO EARNS MORE — already added above ===== */

/* ===== COUNTRY LEADERBOARD ===== */
.leaderboard-page .container { max-width: 860px; margin: 0 auto; }
.lb-submit-card { background:rgba(255,255,255,0.04); border:1px solid rgba(244,201,107,0.25); border-radius:16px; padding:26px 30px; margin-bottom:28px; }
.lb-submit-card h2 { font-size:1rem; color:#F4C96B; margin-bottom:16px; text-transform:uppercase; letter-spacing:.07em; font-weight:700; }
.lb-form-row { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }
.lb-form-group { display:flex; flex-direction:column; gap:6px; flex:1; min-width:130px; }
.lb-form-group label { font-size:.72rem; color:rgba(255,255,255,0.5); text-transform:uppercase; letter-spacing:.08em; font-weight:600; }
.lb-form-group input, .lb-form-group select { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.15); border-radius:8px; padding:10px 14px; color:#fff; font-size:.95rem; font-family:inherit; transition:border-color .2s; }
.lb-form-group input:focus, .lb-form-group select:focus { outline:none; border-color:#F4C96B; }
.lb-form-group select option { background:#1a2332; }
.lb-submit-btn { background:linear-gradient(135deg,#F4C96B,#e8a83a); color:#0B0F1A; border:none; border-radius:8px; padding:10px 24px; font-size:.95rem; font-weight:700; cursor:pointer; transition:opacity .2s; white-space:nowrap; align-self:flex-end; }
.lb-submit-btn:hover { opacity:.85; }
.lb-table-card { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.07); border-radius:16px; padding:26px 30px; }
.lb-table-card h2 { font-size:1rem; color:rgba(255,255,255,0.7); margin-bottom:18px; text-transform:uppercase; letter-spacing:.06em; font-weight:600; }
.lb-table { width:100%; border-collapse:collapse; }
.lb-table th { font-size:.7rem; color:rgba(255,255,255,0.4); text-transform:uppercase; letter-spacing:.08em; font-weight:600; padding:6px 10px; text-align:left; border-bottom:1px solid rgba(255,255,255,0.08); }
.lb-table td { padding:12px 10px; font-size:.9rem; color:rgba(255,255,255,0.8); border-bottom:1px solid rgba(255,255,255,0.04); vertical-align:middle; }
.lb-rank-num { color:rgba(255,255,255,0.35); font-weight:700; font-size:.85rem; }
.lb-rank-1 { color:#FFD700; } .lb-rank-2 { color:#C0C0C0; } .lb-rank-3 { color:#CD7F32; }
.lb-country-cell { display:flex; align-items:center; gap:10px; font-weight:600; }
.lb-flag-cell { font-size:1.4rem; }
.lb-pct-bar-track { height:6px; background:rgba(255,255,255,0.08); border-radius:3px; }
.lb-pct-bar-fill  { height:100%; border-radius:3px; background:linear-gradient(90deg,#E8922A,#F4C96B); }
.lb-pct-val { font-size:.88rem; color:#E8922A; font-weight:700; }
.lb-you-row td { background:rgba(244,201,107,0.06); }
.lb-disclaimer { font-size:.75rem; color:rgba(255,255,255,0.3); margin-top:16px; text-align:center; line-height:1.6; }
@media(max-width:600px){.lb-submit-card,.lb-table-card{padding:16px;}.lb-form-row{flex-direction:column;}.lb-submit-btn{width:100%;}}

/* ===== LIFE EVENT COMPARISON ===== */
.life-page .container { max-width:860px; margin:0 auto; }
.life-input-card { background:rgba(255,255,255,0.04); border:1px solid rgba(232,146,42,0.25); border-radius:16px; padding:26px 30px; margin-bottom:28px; }
.life-input-card h2 { font-size:1rem; color:#E8922A; margin-bottom:16px; text-transform:uppercase; letter-spacing:.07em; font-weight:700; }
.life-form-row { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }
.life-form-group { display:flex; flex-direction:column; gap:6px; flex:1; min-width:110px; }
.life-form-group label { font-size:.72rem; color:rgba(255,255,255,0.5); text-transform:uppercase; letter-spacing:.08em; font-weight:600; }
.life-form-group input, .life-form-group select { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.15); border-radius:8px; padding:10px 14px; color:#fff; font-size:.95rem; font-family:inherit; }
.life-form-group input:focus, .life-form-group select:focus { outline:none; border-color:#E8922A; }
.life-form-group select option { background:#1a2332; }
.life-calc-btn { background:linear-gradient(135deg,#E8922A,#D4B043); color:#0B0F1A; border:none; border-radius:8px; padding:10px 24px; font-size:.95rem; font-weight:700; cursor:pointer; transition:opacity .2s; white-space:nowrap; align-self:flex-end; }
.life-calc-btn:hover { opacity:.85; }
.life-results { display:none; }
.life-results.visible { display:block; }
.life-age-headline { font-size:1.05rem; color:rgba(255,255,255,0.75); margin-bottom:24px; text-align:center; line-height:1.7; }
.life-age-headline strong { color:#E8922A; }
.life-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px; margin-bottom:24px; }
.life-event-card { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.07); border-radius:12px; padding:18px 16px; }
.life-event-icon { font-size:1.6rem; margin-bottom:8px; display:block; }
.life-event-title { font-size:.9rem; font-weight:700; color:#fff; margin-bottom:4px; }
.life-event-stat { font-size:1.15rem; font-weight:800; color:#E8922A; display:block; margin-bottom:4px; }
.life-event-desc { font-size:.78rem; color:rgba(255,255,255,0.45); line-height:1.5; }
.life-context-card { background:rgba(232,146,42,0.04); border:1px solid rgba(232,146,42,0.15); border-radius:12px; padding:18px 20px; font-size:.88rem; color:rgba(255,255,255,0.65); line-height:1.7; }
@media(max-width:600px){.life-input-card{padding:16px;}.life-form-row{flex-direction:column;}.life-calc-btn{width:100%;}}

/* ===== SALARY COMPARISON (SHARE) ===== */
.compare-page .container { max-width:820px; margin:0 auto; }

.compare-create-card {
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(232,146,42,0.25);
    border-radius:16px;
    padding:26px 30px;
    margin-bottom:28px;
}

.compare-create-card h2 {
    font-size:1rem; color:#E8922A; margin-bottom:16px;
    text-transform:uppercase; letter-spacing:.07em; font-weight:700;
}

.compare-form-row { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }
.compare-form-group { display:flex; flex-direction:column; gap:6px; flex:1; min-width:130px; }
.compare-form-group label { font-size:.72rem; color:rgba(255,255,255,0.5); text-transform:uppercase; letter-spacing:.08em; font-weight:600; }
.compare-form-group input,.compare-form-group select { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.15); border-radius:8px; padding:10px 14px; color:#fff; font-size:.95rem; font-family:inherit; }
.compare-form-group input:focus,.compare-form-group select:focus { outline:none; border-color:#E8922A; }
.compare-form-group select option { background:#1a2332; }

.compare-gen-btn {
    background:linear-gradient(135deg,#E8922A,#F4C96B); color:#0B0F1A; border:none;
    border-radius:8px; padding:10px 22px; font-size:.95rem; font-weight:700;
    cursor:pointer; transition:opacity .2s; white-space:nowrap; align-self:flex-end;
}
.compare-gen-btn:hover { opacity:.85; }

.compare-link-box {
    display:none;
    margin-top:18px;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(232,146,42,0.2);
    border-radius:10px;
    padding:14px 16px;
}

.compare-link-box.visible { display:block; }
.compare-link-label { font-size:.75rem; color:rgba(255,255,255,0.45); text-transform:uppercase; letter-spacing:.07em; margin-bottom:8px; display:block; }
.compare-link-row { display:flex; gap:10px; align-items:center; }
.compare-link-url { flex:1; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); border-radius:7px; padding:9px 12px; color:rgba(255,255,255,0.7); font-size:.82rem; word-break:break-all; }
.compare-copy-btn { background:rgba(232,146,42,0.15); border:1px solid rgba(232,146,42,0.3); color:#E8922A; border-radius:7px; padding:8px 14px; font-size:.8rem; font-weight:700; cursor:pointer; white-space:nowrap; transition:background .2s; }
.compare-copy-btn:hover { background:rgba(232,146,42,0.25); }

/* View comparison card */
.compare-result-card {
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(232,146,42,0.2);
    border-radius:16px;
    padding:28px 30px;
    display:none;
}

.compare-result-card.visible { display:block; }

.compare-vs-row {
    display:flex;
    gap:20px;
    align-items:center;
    justify-content:center;
    margin-bottom:28px;
    flex-wrap:wrap;
}

.compare-pct-block {
    text-align:center;
    flex:1;
    min-width:140px;
}

.compare-pct-big { font-size:3rem; font-weight:800; display:block; line-height:1; }
.compare-pct-you { color:#E8922A; }
.compare-pct-them { color:#F4C96B; }
.compare-pct-label { font-size:.75rem; color:rgba(255,255,255,0.4); text-transform:uppercase; letter-spacing:.07em; margin-top:6px; display:block; }

.compare-vs-divider { font-size:1.5rem; font-weight:800; color:rgba(255,255,255,0.2); }

.compare-diff-text {
    text-align:center;
    font-size:1.05rem;
    color:rgba(255,255,255,0.75);
    line-height:1.7;
    margin-bottom:8px;
}

.compare-diff-text strong { color:#E8922A; }

@media(max-width:600px){
    .compare-create-card,.compare-result-card{padding:16px;}
    .compare-form-row{flex-direction:column;}
    .compare-gen-btn{width:100%;}
    .compare-pct-big{font-size:2.4rem;}
}

/* =====================================================
   BLOG STYLES
   ===================================================== */

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
    margin-top: 8px;
}

.blog-card {
    background: rgba(18,24,36,0.95);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 16px;
    overflow: hidden;
    padding: 0;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.blog-card:hover { transform: translateY(-5px); box-shadow: 0 20px 52px rgba(0,0,0,0.45); border-color: rgba(255,255,255,0.14); }

/* Blog card cover illustrations */
.blog-card-cover {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 130px;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}
.blog-card-cover::before {
    content: '';
    position: absolute;
    inset: 0;
    background: inherit;
    transition: transform 0.35s ease;
}
.blog-card:hover .blog-card-cover::before { transform: scale(1.04); }
.blog-cover-gold  { background: linear-gradient(135deg, #3a2800 0%, #6b4400 60%, #c47a00 100%); }
.blog-cover-teal  { background: linear-gradient(135deg, #002a28 0%, #005550 60%, #00988e 100%); }
.blog-cover-purple{ background: linear-gradient(135deg, #1a0035 0%, #360060 60%, #6000aa 100%); }
.blog-cover-red   { background: linear-gradient(135deg, #2a0010 0%, #550020 60%, #990035 100%); }
.blog-cover-icon  { font-size: 2.4rem; position: relative; z-index: 1; line-height: 1; }
.blog-cover-stat  {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    position: relative;
    z-index: 1;
}
.blog-card-body {
    padding: 22px 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.blog-card-meta { display: flex; align-items: center; gap: 10px; }
.blog-tag { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; background: rgba(232,146,42,0.12); border: 1px solid rgba(232,146,42,0.25); color: #E8922A; padding: 3px 8px; border-radius: 5px; }
.blog-date { font-size: 0.75rem; color: rgba(255,255,255,0.3); }
.blog-card-title { font-size: 1.05rem; font-weight: 700; line-height: 1.4; }
.blog-card-title a { color: rgba(255,255,255,0.88); text-decoration: none; }
.blog-card-title a:hover { color: #E8922A; }
.blog-card-excerpt { font-size: 0.85rem; color: rgba(255,255,255,0.5); line-height: 1.6; flex: 1; }
.blog-read-more { font-size: 0.82rem; font-weight: 700; color: #E8922A; text-decoration: none; align-self: flex-start; }
.blog-read-more:hover { opacity: 0.8; }

/* Article body */
.blog-article-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.blog-article-body { max-width: 760px; }
.blog-article-body h2 { font-size: 1.4rem; font-weight: 700; margin: 32px 0 12px; color: rgba(255,255,255,0.9); }
.blog-article-body h3 { font-size: 1.1rem; font-weight: 700; margin: 24px 0 10px; color: rgba(255,255,255,0.8); }
.blog-article-body p { font-size: 0.95rem; color: rgba(255,255,255,0.65); line-height: 1.75; margin-bottom: 16px; }
.blog-article-body a { color: #E8922A; text-decoration: underline; text-underline-offset: 3px; }
.blog-article-body a:hover { opacity: 0.8; }

.blog-highlight-box {
    background: rgba(232,146,42,0.07);
    border: 1px solid rgba(232,146,42,0.2);
    border-left: 3px solid #E8922A;
    border-radius: 10px;
    padding: 16px 20px;
    font-size: 0.93rem;
    color: rgba(255,255,255,0.75);
    line-height: 1.6;
    margin-bottom: 28px;
}
.blog-highlight-box strong { color: rgba(255,255,255,0.92); }
.blog-highlight-box a { color: #E8922A; }

.blog-table-wrap { overflow-x: auto; margin: 16px 0 8px; border-radius: 10px; }
.blog-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.blog-table thead tr { background: rgba(232,146,42,0.1); }
.blog-table th { padding: 10px 14px; text-align: left; font-weight: 700; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255,255,255,0.5); border-bottom: 1px solid rgba(255,255,255,0.08); }
.blog-table td { padding: 10px 14px; color: rgba(255,255,255,0.65); border-bottom: 1px solid rgba(255,255,255,0.04); }
.blog-table tbody tr:hover td { background: rgba(255,255,255,0.02); }
.blog-table-highlight td { background: rgba(244,201,107,0.08) !important; color: #F4C96B !important; font-weight: 700; }

.blog-caption { font-size: 0.75rem !important; color: rgba(255,255,255,0.3) !important; font-style: italic; }

.blog-list { padding-left: 20px; margin-bottom: 16px; }
.blog-list li { font-size: 0.93rem; color: rgba(255,255,255,0.65); line-height: 1.7; margin-bottom: 6px; }
.blog-list li a { color: #E8922A; }

.blog-cta-box {
    background: linear-gradient(135deg, rgba(232,146,42,0.1), rgba(123,108,248,0.1));
    border: 1px solid rgba(232,146,42,0.25);
    border-radius: 14px;
    padding: 28px 28px 24px;
    margin: 36px 0;
}
.blog-cta-box h3 { font-size: 1.15rem; font-weight: 700; color: rgba(255,255,255,0.9); margin-bottom: 8px; }
.blog-cta-box p { font-size: 0.88rem; color: rgba(255,255,255,0.55); margin-bottom: 16px; }
.blog-cta-btn {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #E8922A, #C4721A);
    color: #0B0F1A;
    font-weight: 700;
    padding: 12px 24px;
    border-radius: 10px;
    text-decoration: none !important;
    font-size: 0.92rem;
    transition: opacity 0.2s, transform 0.15s;
}
.blog-cta-btn:hover { opacity: 0.9; transform: translateY(-1px); color: #0B0F1A !important; }

.blog-fact-card {
    background: rgba(18,24,36,0.95);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px;
    padding: 24px 28px;
    margin-bottom: 20px;
    position: relative;
}
.blog-fact-num {
    font-size: 3rem;
    font-weight: 900;
    color: rgba(232,146,42,0.12);
    position: absolute;
    top: 16px;
    right: 20px;
    line-height: 1;
    letter-spacing: -2px;
}
.blog-fact-card h2 { font-size: 1.1rem !important; margin-top: 0 !important; }
.blog-fact-source { font-size: 0.73rem !important; color: rgba(255,255,255,0.25) !important; font-style: italic; margin-top: -8px !important; }

.blog-faq { margin-top: 24px; }
.blog-faq-item { border-top: 1px solid rgba(255,255,255,0.06); padding: 18px 0; }
.blog-faq-item h3 { font-size: 1rem !important; margin: 0 0 8px !important; color: rgba(255,255,255,0.82); }
.blog-faq-item p { margin-bottom: 0 !important; }

/* =====================================================
   COST OF LIVING PAGE
   ===================================================== */

.col-input-card {
    background: rgba(18,24,36,0.95);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 18px;
    padding: 28px;
    margin-bottom: 24px;
}
.col-input-card h2 { font-size: 1.1rem; font-weight: 700; margin-bottom: 18px; }

.col-form-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: flex-end;
}
.col-form-group { display: flex; flex-direction: column; gap: 6px; }
.col-form-group label { font-size: 0.75rem; font-weight: 600; color: rgba(255,255,255,0.45); text-transform: uppercase; letter-spacing: 0.06em; }
.col-form-group input,
.col-form-group select {
    background: #1a2332;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 9px;
    padding: 9px 12px;
    font-size: 0.88rem;
    color: #fff;
    min-width: 140px;
}
.col-form-group select option {
    background: #1a2332;
    color: rgba(255,255,255,0.85);
}
.col-calc-btn {
    background: linear-gradient(135deg, #E8922A, #C4721A);
    color: #0B0F1A;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 10px 24px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: opacity 0.2s;
    white-space: nowrap;
}
.col-calc-btn:hover { opacity: 0.9; }

.col-summary-row {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.col-summary-card {
    background: rgba(18,24,36,0.95);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px;
    padding: 20px 24px;
    flex: 1;
    min-width: 200px;
}
.col-summary-card-accent { border-color: rgba(232,146,42,0.3); background: rgba(232,146,42,0.06); }
.col-summary-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.35); display: block; margin-bottom: 8px; }
.col-summary-big { font-size: 1.8rem; font-weight: 800; color: #E8922A; display: block; line-height: 1; }
.col-summary-sub { font-size: 0.75rem; color: rgba(255,255,255,0.35); margin-top: 4px; display: block; }
.col-arrow { font-size: 1.5rem; color: rgba(255,255,255,0.2); flex-shrink: 0; }

.col-pct-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.col-pct-block {
    background: rgba(18,24,36,0.95);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px;
    padding: 16px 20px;
    flex: 1;
    min-width: 140px;
}
.col-pct-label { font-size: 0.72rem; font-weight: 600; color: rgba(255,255,255,0.35); text-transform: uppercase; letter-spacing: 0.07em; display: block; margin-bottom: 6px; }
.col-pct-value { font-size: 1.3rem; font-weight: 800; color: #F4C96B; display: block; }

.col-insight-card {
    background: rgba(244,201,107,0.06);
    border: 1px solid rgba(244,201,107,0.2);
    border-radius: 12px;
    padding: 16px 20px;
    font-size: 0.88rem;
    color: rgba(255,255,255,0.65);
    line-height: 1.6;
    margin-bottom: 24px;
}
.col-insight-card p { margin: 0; }
.col-insight-card strong { color: rgba(255,255,255,0.88); }

.col-comparison-section h3 { font-size: 1rem; font-weight: 700; margin-bottom: 8px; }
.col-comparison-note { font-size: 0.82rem; color: rgba(255,255,255,0.4); margin-bottom: 14px; }

.col-equiv-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.col-equiv-table th { padding: 9px 14px; background: rgba(255,255,255,0.04); border-bottom: 1px solid rgba(255,255,255,0.07); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255,255,255,0.4); text-align: left; }
.col-equiv-table td { padding: 9px 14px; border-bottom: 1px solid rgba(255,255,255,0.04); color: rgba(255,255,255,0.6); }
.col-current-row td { background: rgba(232,146,42,0.06); color: #E8922A !important; font-weight: 600; }

@media (max-width: 600px) {
    .blog-grid { grid-template-columns: 1fr; }
    .col-summary-row { flex-direction: column; }
    .col-arrow { transform: rotate(90deg); align-self: center; }
}

/* =====================================================
   PERCENTILE BAR — col.js visual rank bars
   ===================================================== */
.pct-bar-wrap { display:flex; flex-direction:column; gap:6px; flex:1; }
.pct-bar-label { font-size:0.72rem; font-weight:600; color:rgba(255,255,255,0.45); text-transform:uppercase; letter-spacing:0.06em; }
.pct-bar-track { height:8px; background:rgba(255,255,255,0.08); border-radius:8px; overflow:hidden; }
.pct-bar-fill { height:100%; border-radius:8px; width:0%; transition: width 1.2s cubic-bezier(0.22,1,0.36,1); }
.pct-bar-value { font-size:1.1rem; font-weight:700; color:#fff; }

/* =====================================================
   COPY RESULT BUTTON — col.js
   ===================================================== */
.col-copy-btn { margin-top:12px; background: rgba(232,146,42,0.12); border:1px solid rgba(232,146,42,0.3); color:#E8922A; padding:8px 18px; border-radius:8px; cursor:pointer; font-size:0.85rem; font-weight:600; transition: all 0.2s ease; display:block; }
.col-copy-btn:hover { background: rgba(232,146,42,0.22); border-color:#E8922A; }

/* =====================================================
   WHAT IF INCOME SIMULATOR — whatif.html
   ===================================================== */
.whatif-page .container { max-width: 860px; margin: 0 auto; }
.whatif-input-card { background: rgba(18,24,36,0.95); border-radius: 18px; padding: 28px; margin-bottom: 24px; border: 1px solid rgba(255,255,255,0.08); }
.wi-form-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 20px; }
.wi-form-group { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 130px; }
.wi-form-group label { font-size: 0.72rem; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.wi-form-group input, .wi-form-group select { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; padding: 10px 14px; color: #fff; font-size: 0.95rem; font-family: inherit; transition: border-color 0.2s; }
.wi-form-group input:focus, .wi-form-group select:focus { outline: none; border-color: #E8922A; }
.wi-form-group select option { background: #1a2332; }
.wi-scenario-tabs { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.wi-tab-btn { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.7); padding: 9px 20px; border-radius: 10px; cursor: pointer; font-size: 0.88rem; font-weight: 600; transition: all 0.2s; }
.wi-tab-btn.active { background: rgba(232,146,42,0.15); border-color: #E8922A; color: #E8922A; }
.wi-panel { display: none; }
.wi-panel.active { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.wi-panel-group { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 180px; }
.wi-panel-group label { font-size: 0.72rem; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.wi-panel-group input, .wi-panel-group select { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; padding: 10px 14px; color: #fff; font-size: 0.95rem; font-family: inherit; transition: border-color 0.2s; }
.wi-panel-group input:focus, .wi-panel-group select:focus { outline: none; border-color: #E8922A; }
.wi-panel-group select option { background: #1a2332; }
.wi-slider-row { display: flex; align-items: center; gap: 14px; flex: 2; min-width: 220px; }
.wi-slider-row input[type=range] { flex: 1; accent-color: #E8922A; }
.wi-slider-val { min-width: 64px; text-align: center; font-size: 1.1rem; font-weight: 700; color: #E8922A; }
.wi-calc-btn { background: linear-gradient(135deg, #E8922A, #D4B043); color: #0B0F1A; border: none; border-radius: 10px; padding: 12px 32px; font-size: 1rem; font-weight: 700; cursor: pointer; transition: opacity 0.2s; width: 100%; margin-top: 8px; }
.wi-calc-btn:hover { opacity: 0.88; }
.wi-before-after { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; margin-bottom: 24px; }
.wi-card { background: rgba(18,24,36,0.95); border-radius: 16px; padding: 24px; text-align: center; border: 1px solid rgba(255,255,255,0.08); }
.wi-card-before { border-color: rgba(255,255,255,0.1); }
.wi-card-after { border-color: rgba(232,146,42,0.3); background: rgba(232,146,42,0.04); }
.wi-card-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.4); margin-bottom: 8px; }
.wi-card-income { font-size: 1.6rem; font-weight: 800; color: #fff; margin-bottom: 6px; }
.wi-card-rank { font-size: 1rem; color: #E8922A; font-weight: 600; }
.wi-card-ppp { font-size: 0.82rem; color: rgba(255,255,255,0.5); margin-top: 4px; }
.wi-arrow { text-align: center; font-size: 2rem; }
.wi-delta { text-align: center; font-size: 1.1rem; font-weight: 700; padding: 12px 20px; border-radius: 12px; margin-bottom: 20px; }
.wi-delta.positive { background: rgba(232,146,42,0.12); color: #E8922A; }
.wi-delta.negative { background: rgba(240,90,90,0.12); color: #f05a5a; }
.wi-delta.neutral { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.6); }
.wi-insight { background: rgba(232,146,42,0.07); border: 1px solid rgba(232,146,42,0.15); border-radius: 14px; padding: 20px; margin-bottom: 20px; line-height: 1.7; font-size: 0.92rem; }
.wi-insight p { margin: 0; color: rgba(255,255,255,0.75); }
.wi-means-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 20px; }
.wi-means-card h3 { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: rgba(255,255,255,0.5); margin-bottom: 14px; }
.wi-means-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.wi-means-list li { font-size: 0.9rem; color: rgba(255,255,255,0.7); padding-left: 22px; position: relative; line-height: 1.6; }
.wi-means-list li::before { content: '›'; position: absolute; left: 6px; color: #E8922A; font-weight: 700; }
@media(max-width:600px){ .wi-before-after { grid-template-columns: 1fr; } .wi-arrow { transform: rotate(90deg); } .wi-form-row { flex-direction: column; } }

/* =====================================================
   GLOBAL WEALTH ATLAS — map.html
   ===================================================== */
.map-page .container { max-width: 1100px; margin: 0 auto; }
.map-controls { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 24px; }
.map-controls input { background: #1a2332; border: 1px solid rgba(255,255,255,0.1); color: #fff; padding: 9px 14px; border-radius: 10px; font-size: 0.88rem; min-width: 200px; font-family: inherit; }
.map-controls input::placeholder { color: rgba(255,255,255,0.3); }
.map-controls input:focus { outline: none; border-color: #E8922A; }
.atlas-filter-btn { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.7); padding: 7px 16px; border-radius: 8px; cursor: pointer; font-size: 0.82rem; font-weight: 600; transition: all 0.2s; }
.atlas-filter-btn.active { background: rgba(232,146,42,0.15); border-color: #E8922A; color: #E8922A; }
.atlas-sort-btn { background: rgba(244,201,107,0.08); border: 1px solid rgba(244,201,107,0.15); color: rgba(244,201,107,0.8); padding: 7px 14px; border-radius: 8px; cursor: pointer; font-size: 0.82rem; font-weight: 600; transition: all 0.2s; }
.atlas-sort-btn.active { background: rgba(244,201,107,0.2); border-color: #F4C96B; color: #F4C96B; }
.atlas-stats { font-size: 0.8rem; color: rgba(255,255,255,0.35); margin-bottom: 20px; letter-spacing: 0.02em; }
#atlas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.atlas-card { background: rgba(18,24,36,0.9); border: 1px solid rgba(255,255,255,0.07); border-radius: 14px; padding: 16px; cursor: pointer; transition: all 0.25s ease; text-align: center; }
.atlas-card:hover { transform: translateY(-3px); box-shadow: 0 8px 32px rgba(0,0,0,0.4); border-color: rgba(232,146,42,0.3); }
.atlas-flag { font-size: 2.2rem; margin-bottom: 8px; display: block; line-height: 1; }
.atlas-name { font-size: 0.82rem; font-weight: 600; color: #fff; margin-bottom: 8px; line-height: 1.3; }
.atlas-index-badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 700; margin-bottom: 8px; }
.atlas-bar-track { height: 4px; background: rgba(255,255,255,0.08); border-radius: 4px; overflow: hidden; margin-bottom: 4px; }
.atlas-bar-fill { height: 100%; border-radius: 4px; transition: width 0.6s ease; }
.atlas-col-label { font-size: 0.7rem; color: rgba(255,255,255,0.3); }
.atlas-hover-tip { font-size: 0.72rem; color: rgba(232,146,42,0.7); margin-top: 8px; display: none; line-height: 1.4; }
.atlas-card:hover .atlas-hover-tip { display: block; }
.atlas-no-results { grid-column: 1/-1; text-align: center; padding: 60px 20px; color: rgba(255,255,255,0.3); font-size: 0.95rem; }

/* ================================================================
   GROUPED DROPDOWN NAV — replaces flat overflow nav
   ================================================================ */

/* Ensure navbar never clips its dropdown children */
.navbar        { overflow: visible !important; }
.nav-container { overflow: visible !important; }
.nav-menu      { flex-wrap: nowrap; gap: 0; overflow: visible !important; }
.nav-item      { overflow: visible !important; }

/* Dropdown parent item */
.nav-dropdown  { position: relative; overflow: visible !important; }

/* Dropdown trigger button */
.nav-dropbtn {
  background: none;
  border: none;
  color: rgba(255,255,255,0.72) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.72) !important;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: color 0.2s, background 0.2s;
  white-space: nowrap;
  font-family: inherit;
}
.nav-dropbtn:hover { color: #E8922A !important; -webkit-text-fill-color: #E8922A !important; background: rgba(232,146,42,0.08); }
.nav-dropbtn.active { color: #E8922A; }

.nav-caret {
  font-size: 0.6rem;
  opacity: 0.6;
  transition: transform 0.22s;
  display: inline-block;
}
.nav-dropdown.open .nav-caret { transform: rotate(180deg); opacity: 1; }

/* Dropdown panel */
.nav-dropmenu {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(10,14,26,0.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(232,146,42,0.15);
  border-radius: 14px;
  padding: 8px;
  min-width: 210px;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04) inset;
  z-index: 1100;
}
.nav-dropdown.open .nav-dropmenu { display: flex; }

/* CSS hover fallback for desktop (no JS required) */
@media (min-width: 901px) {
  .nav-dropdown:hover .nav-dropmenu { display: flex; }
}

/* Links inside dropdown */
.nav-droplink {
  color: rgba(255,255,255,0.62);
  font-size: 0.83rem;
  font-weight: 500;
  padding: 9px 14px;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.15s;
  white-space: nowrap;
  display: block;
}
.nav-droplink:hover { background: rgba(232,146,42,0.1); color: #fff; }
.nav-droplink.nav-droplink-active {
  color: #E8922A;
  background: rgba(232,146,42,0.09);
  font-weight: 700;
}

/* Hamburger button */
.nav-hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  justify-content: center;
}
.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: rgba(255,255,255,0.75);
  border-radius: 2px;
  transition: all 0.25s ease;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav */
@media (max-width: 900px) {
  .nav-hamburger { display: flex; }
  .nav-menu {
    display: none !important;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(7,10,20,0.99) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    flex-direction: column !important;
    padding: 70px 16px 24px;
    gap: 2px;
    overflow-y: auto;
    z-index: 9999 !important;
  }
  .nav-menu.nav-menu-open,
  .nav-menu.open { display: flex !important; }
  .nav-item { width: 100%; }
  .nav-link { display: block; padding: 12px 16px; font-size: 0.95rem; border-radius: 10px; }

  /* Dropdown group header: hide caret, show as label */
  .nav-caret { display: none !important; }
  .nav-dropbtn {
    width: 100%;
    text-align: left;
    padding: 6px 16px 4px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(47,214,200,0.6) !important;
    -webkit-text-fill-color: rgba(47,214,200,0.6) !important;
    background: none !important;
    border: none;
    cursor: default;
    border-radius: 0;
    margin-top: 8px;
    pointer-events: none;
  }
  /* Always show dropdown items flat in mobile nav */
  .nav-dropmenu {
    display: flex !important;
    position: static !important;
    transform: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 0 4px 0 !important;
    margin: 0 !important;
    flex-direction: column;
    gap: 2px;
  }
  .nav-droplink {
    padding: 10px 20px;
    font-size: 0.9rem;
    border-radius: 10px;
    display: block;
  }
  .nav-droplink:hover { background: rgba(255,255,255,0.07); }
}
@media(max-width:600px){ #atlas-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } .map-controls { flex-direction: column; align-items: stretch; } }

/* =====================================================
   TRUE HOURLY RATE CALCULATOR — hourly.html
   ===================================================== */
.hourly-page .container { max-width: 980px; margin: 0 auto; }

/* ---- Arena wrapper ---- */
.hourly-arena {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0;
    align-items: start;
    margin-bottom: 28px;
}

/* ---- VS divider ---- */
.hourly-vs {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 80px;
    gap: 8px;
    width: 56px;
}
.hourly-vs-badge {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(232,146,42,0.2), rgba(244,201,107,0.2));
    border: 1px solid rgba(255,255,255,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: rgba(255,255,255,0.55);
}
.hourly-vs-line {
    width: 1px;
    flex: 1;
    min-height: 200px;
    background: linear-gradient(to bottom, rgba(232,146,42,0.15), transparent);
}

/* ---- Job cards ---- */
.hourly-job-card {
    background: rgba(18,24,36,0.95);
    border-radius: 20px;
    padding: 26px;
    border: 1px solid rgba(255,255,255,0.07);
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s;
}
.hourly-job-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    border-radius: 20px 20px 0 0;
}
.hourly-job-card.job-a::before { background: linear-gradient(90deg, #E8922A, #D4B043); }
.hourly-job-card.job-b::before { background: linear-gradient(90deg, #F4C96B, #e87b4a); }
.hourly-job-card.job-a { border-left: 1px solid rgba(232,146,42,0.15); }
.hourly-job-card.job-b { border-right: 1px solid rgba(244,201,107,0.15); }

.hourly-job-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 12px;
}
.job-a .hourly-job-tag { background: rgba(232,146,42,0.12); color: #E8922A; border: 1px solid rgba(232,146,42,0.2); }
.job-b .hourly-job-tag { background: rgba(244,201,107,0.12); color: #F4C96B; border: 1px solid rgba(244,201,107,0.2); }

.hourly-job-title-input {
    font-size: 1.1rem;
    font-weight: 700;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    color: #fff;
    width: 100%;
    padding: 4px 0 8px;
    margin-bottom: 20px;
    font-family: inherit;
    transition: border-color 0.2s;
}
.hourly-job-title-input:focus { outline: none; border-bottom-color: #E8922A; }
.job-b .hourly-job-title-input:focus { border-bottom-color: #F4C96B; }

.hourly-section-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.28);
    padding: 14px 0 8px;
    border-top: 1px solid rgba(255,255,255,0.05);
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.hourly-section-label:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }

/* Input row with icon */
.hourly-field {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.hourly-field label {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.45);
    font-weight: 600;
    line-height: 1.3;
    grid-column: 1 / -1;
    margin-bottom: -4px;
}
.hourly-field input,
.hourly-field select {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 9px;
    padding: 9px 12px;
    color: #fff;
    font-size: 0.9rem;
    font-family: inherit;
    width: 100%;
    transition: border-color 0.2s, background 0.2s;
}
.hourly-field input:focus,
.hourly-field select:focus {
    outline: none;
    background: rgba(255,255,255,0.08);
}
.job-a .hourly-field input:focus,
.job-a .hourly-field select:focus { border-color: #E8922A; }
.job-b .hourly-field input:focus,
.job-b .hourly-field select:focus { border-color: #F4C96B; }
.hourly-field select option { background: #1a2332; }

/* Inline value hint */
.hourly-field-hint {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.25);
    text-align: right;
    white-space: nowrap;
}

/* ---- Calc button ---- */
.hourly-calc-btn {
    display: block;
    width: 100%;
    max-width: 460px;
    margin: 0 auto 36px;
    padding: 15px 32px;
    background: linear-gradient(135deg, #E8922A 0%, #D4B043 60%, #F4C96B 100%);
    color: #0B0F1A;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.15s;
    box-shadow: 0 4px 24px rgba(232,146,42,0.25);
}
.hourly-calc-btn:hover { opacity: 0.9; transform: translateY(-1px); }
.hourly-calc-btn:active { transform: translateY(0); }

/* ---- Result row ---- */
.hourly-result-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 28px;
}

/* ---- Result cards ---- */
.hourly-result-card {
    background: rgba(18,24,36,0.95);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    padding: 28px;
    text-align: center;
    position: relative;
    transition: all 0.35s ease;
}
.hourly-result-card.winner {
    border-color: rgba(232,146,42,0.4);
    background: rgba(232,146,42,0.04);
    box-shadow: 0 0 40px rgba(232,146,42,0.12), inset 0 0 40px rgba(232,146,42,0.03);
}

.hourly-winner-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(90deg, #E8922A, #D4B043);
    color: #0B0F1A;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 4px 16px;
    border-radius: 20px;
    white-space: nowrap;
}

.hourly-rate-big {
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1;
    margin: 12px 0 4px;
    letter-spacing: -0.02em;
}
.hourly-rate-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
    margin-bottom: 16px;
}

/* ---- Breakdown tables ---- */
.hourly-breakdown-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}
.hourly-breakdown {
    background: rgba(18,24,36,0.9);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 16px;
    overflow: hidden;
}
.hourly-breakdown table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.hourly-breakdown thead tr { background: rgba(255,255,255,0.04); }
.hourly-breakdown th { padding: 12px 16px; text-align: left; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.4); }
.hourly-breakdown td { padding: 10px 16px; border-bottom: 1px solid rgba(255,255,255,0.04); color: rgba(255,255,255,0.6); }
.hourly-breakdown tr:last-child td { border-bottom: none; }
.hourly-breakdown td:last-child { text-align: right; }
.hourly-breakdown tr:last-child td { background: rgba(244,201,107,0.05); }

/* ---- Time-cost visual bar ---- */
.hourly-time-bars {
    background: rgba(18,24,36,0.9);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 16px;
    padding: 20px 24px;
    margin-bottom: 20px;
}
.hourly-time-bars h4 {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: rgba(255,255,255,0.35);
    margin-bottom: 16px;
}
.hourly-bar-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.hourly-bar-row:last-child { margin-bottom: 0; }
.hourly-bar-name {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.55);
    min-width: 80px;
    font-weight: 600;
}
.hourly-bar-track {
    flex: 1;
    height: 10px;
    background: rgba(255,255,255,0.07);
    border-radius: 10px;
    overflow: hidden;
}
.hourly-bar-fill {
    height: 100%;
    border-radius: 10px;
    transition: width 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hourly-bar-fill.bar-a { background: linear-gradient(90deg, #E8922A, #D4B043); }
.hourly-bar-fill.bar-b { background: linear-gradient(90deg, #F4C96B, #e87b4a); }
.hourly-bar-value {
    font-size: 0.78rem;
    font-weight: 700;
    min-width: 70px;
    text-align: right;
    color: rgba(255,255,255,0.7);
}

/* ---- Insight cards ---- */
.hourly-insight {
    background: rgba(232,146,42,0.06);
    border: 1px solid rgba(232,146,42,0.15);
    border-radius: 14px;
    padding: 18px 22px;
    margin-bottom: 16px;
    font-size: 0.9rem;
    line-height: 1.7;
    color: rgba(255,255,255,0.72);
}
.hourly-insight strong { color: rgba(255,255,255,0.9); }

/* ---- Responsive ---- */
@media (max-width: 720px) {
    .hourly-arena { grid-template-columns: 1fr; }
    .hourly-vs { display: none; }
    .hourly-result-row,
    .hourly-breakdown-grid { grid-template-columns: 1fr; }
    .hourly-rate-big { font-size: 2rem; }
}

/* ============================================================
   JOURNAL — ACHIEVEMENTS
   ============================================================ */
.journal-achievements-card {
    background: rgba(18,24,36,0.95);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 18px;
    padding: 22px 24px 18px;
    margin-bottom: 24px;
}
.journal-achievements-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.journal-achievements-header h2 {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.journal-badge-count {
    font-size: 0.75rem;
    font-weight: 700;
    background: rgba(232,146,42,0.12);
    color: #E8922A;
    border: 1px solid rgba(232,146,42,0.25);
    padding: 2px 10px;
    border-radius: 20px;
    letter-spacing: 0.04em;
}
.journal-medals-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.journal-medal {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 72px;
    padding: 12px 6px;
    border-radius: 14px;
    border: 1px solid transparent;
    cursor: default;
    transition: transform 0.15s, box-shadow 0.15s;
}
.journal-medal.earned {
    background: rgba(232,146,42,0.07);
    border-color: rgba(232,146,42,0.2);
}
.journal-medal.earned:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(232,146,42,0.15);
}
.journal-medal.locked {
    background: rgba(255,255,255,0.02);
    border-color: rgba(255,255,255,0.05);
    opacity: 0.45;
    filter: grayscale(1);
}
.journal-medal-icon {
    font-size: 1.6rem;
    line-height: 1;
}
.journal-medal-name {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255,255,255,0.5);
    text-align: center;
    line-height: 1.3;
}
.journal-medal.earned .journal-medal-name {
    color: rgba(255,255,255,0.75);
}

/* ============================================================
   JOURNAL — FINANCIAL WISDOM PLANNER
   ============================================================ */
.journal-planner-card {
    background: rgba(18,24,36,0.95);
    border: 1px solid rgba(244,201,107,0.15);
    border-radius: 18px;
    padding: 24px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}
.journal-planner-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #F4C96B, #e87b4a, #F4C96B);
}
.journal-planner-header h2 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 6px;
}
.journal-planner-header p {
    font-size: 0.84rem;
    color: rgba(255,255,255,0.45);
    margin: 0 0 20px;
}
.journal-planner-rate {
    margin-bottom: 20px;
}
.journal-planner-rate label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.4);
    display: block;
    margin-bottom: 10px;
}
.journal-rate-options {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.journal-rate-btn {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.6);
    font-size: 0.85rem;
    font-weight: 700;
    padding: 8px 20px;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}
.journal-rate-btn:hover {
    background: rgba(244,201,107,0.1);
    border-color: rgba(244,201,107,0.3);
    color: #F4C96B;
}
.journal-rate-btn.active {
    background: rgba(244,201,107,0.15);
    border-color: rgba(244,201,107,0.5);
    color: #F4C96B;
    box-shadow: 0 0 16px rgba(244,201,107,0.12);
}
.journal-planner-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}
.journal-planner-stat {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    padding: 14px 16px;
    text-align: center;
}
.journal-planner-val {
    font-size: 1.25rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 4px;
    letter-spacing: -0.01em;
}
.journal-planner-lbl {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: rgba(255,255,255,0.35);
}
.journal-milestone-card {
    background: rgba(232,146,42,0.05);
    border: 1px solid rgba(232,146,42,0.15);
    border-radius: 14px;
    padding: 14px 18px;
}
.journal-milestone-label {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.7);
    margin-bottom: 8px;
}
.journal-milestone-details {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.5);
}
.journal-milestone-msg {
    background: rgba(232,146,42,0.05);
    border: 1px solid rgba(232,146,42,0.15);
    border-radius: 14px;
    padding: 14px 18px;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.65);
}

/* ============================================================
   JOURNAL — SHARE MY JOURNEY
   ============================================================ */
.journal-share-section {
    background: rgba(18,24,36,0.95);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 18px;
    padding: 24px;
    margin-bottom: 24px;
    text-align: center;
}
.journal-share-header h2 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 6px;
}
.journal-share-header p {
    font-size: 0.84rem;
    color: rgba(255,255,255,0.45);
    margin: 0 0 20px;
}
.journal-share-preview {
    margin-bottom: 16px;
    border-radius: 12px;
    overflow: hidden;
    min-height: 0;
}
.journal-share-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
.journal-share-btn {
    background: linear-gradient(135deg, #E8922A, #D4B043);
    color: #0B0F1A;
    font-weight: 800;
    font-size: 0.9rem;
    padding: 12px 28px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: transform 0.15s, box-shadow 0.15s;
    font-family: inherit;
}
.journal-share-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(232,146,42,0.35);
}
.journal-download-btn {
    background: rgba(244,201,107,0.12);
    color: #F4C96B;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 12px 22px;
    border: 1px solid rgba(244,201,107,0.3);
    border-radius: 50px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s;
    font-family: inherit;
}
.journal-download-btn:hover {
    background: rgba(244,201,107,0.2);
    border-color: rgba(244,201,107,0.5);
}
.journal-copy-btn {
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.7);
    font-weight: 700;
    font-size: 0.9rem;
    padding: 12px 22px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 50px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s;
    font-family: inherit;
}
.journal-copy-btn:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
}

/* Responsive */
@media (max-width: 600px) {
    .journal-planner-grid { grid-template-columns: repeat(2, 1fr); }
    .journal-medals-row { gap: 8px; }
    .journal-medal { width: 64px; }
}

/* ============================================================
   THE 8 BILLION — COSMOS PAGE
   ============================================================ */

/* Remove default container on cosmos page */
.cosmos-page body > .container { display: none; }

/* Canvas fills viewport behind everything */
#cosmos-canvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1;
    cursor: crosshair;
    background: #0B0F1A;
}

/* ── Floating input panel ── */
.cosmos-panel {
    position: fixed;
    top: 80px;
    left: 24px;
    bottom: auto;
    right: auto;
    transform: none;
    z-index: 20;
    background: rgba(11,15,26,0.88);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(232,146,42,0.18);
    border-radius: 20px;
    padding: 20px 24px 18px;
    width: min(480px, calc(100vw - 32px));
    box-shadow: 0 8px 48px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.03);
    transition: box-shadow 0.3s;
}
.cosmos-panel:hover {
    box-shadow: 0 12px 60px rgba(232,146,42,0.14), 0 0 0 1px rgba(232,146,42,0.12);
}
.cosmos-panel::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, #E8922A, #F4C96B, #E8922A);
    border-radius: 20px 20px 0 0;
}

.cosmos-panel-header {
    margin-bottom: 14px;
    text-align: center;
}
.cosmos-panel-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.01em;
}
.cosmos-panel-sub {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.38);
    margin-top: 3px;
    letter-spacing: 0.02em;
}

.cosmos-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cosmos-input-row {
    display: flex;
    gap: 8px;
}
.cosmos-input-row input {
    flex: 1;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    color: #fff;
    font-size: 0.9rem;
    padding: 10px 14px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
    min-width: 0;
}
.cosmos-input-row input:focus {
    border-color: rgba(232,146,42,0.5);
}
.cosmos-input-row input::placeholder { color: rgba(255,255,255,0.25); }
.cosmos-input-row select {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    color: rgba(255,255,255,0.7);
    font-size: 0.82rem;
    padding: 10px 10px;
    font-family: inherit;
    outline: none;
    cursor: pointer;
    flex-shrink: 0;
}
.cosmos-input-row select option { background: #0f172a; }

.cosmos-btn {
    width: 100%;
    background: linear-gradient(135deg, rgba(232,146,42,0.2), rgba(232,146,42,0.08));
    border: 1px solid rgba(232,146,42,0.4);
    color: #E8922A;
    font-size: 0.92rem;
    font-weight: 700;
    padding: 12px;
    border-radius: 12px;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.04em;
    transition: all 0.2s;
}
.cosmos-btn:hover {
    background: linear-gradient(135deg, rgba(232,146,42,0.3), rgba(232,146,42,0.12));
    border-color: rgba(232,146,42,0.65);
    box-shadow: 0 0 28px rgba(232,146,42,0.18);
    transform: translateY(-1px);
}
.cosmos-btn:active { transform: translateY(0); }

/* ── Result card ── */
.cosmos-result {
    display: none;
    margin-top: 12px;
    background: rgba(232,146,42,0.05);
    border: 1px solid rgba(232,146,42,0.15);
    border-radius: 12px;
    padding: 12px 16px;
    text-align: center;
}
.cosmos-result-tier {
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}
.cosmos-result-pct {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.6);
    margin-top: 4px;
}
.cosmos-result-pct strong {
    color: #fff;
    font-size: 1.05rem;
}
.cosmos-result-sub {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.35);
    margin-top: 5px;
}

/* ── Hover tooltip ── */
.cosmos-tooltip {
    position: fixed;
    z-index: 30;
    pointer-events: none;
    background: rgba(11,15,26,0.9);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 0.8rem;
    line-height: 1.6;
    color: rgba(255,255,255,0.7);
    max-width: 190px;
    opacity: 0;
    transition: opacity 0.15s;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

/* ── Legend (top-right) ── */
.cosmos-legend {
    position: fixed;
    top: 80px;
    right: 24px;
    bottom: auto;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.cosmos-legend-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.7rem;
    color: rgba(255,255,255,0.4);
    font-weight: 500;
}
.cosmos-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    opacity: 0.8;
}

/* ── Hint text ── */
.cosmos-hint {
    position: fixed;
    bottom: 16px;
    left: 50%;
    top: auto;
    transform: translateX(-50%);
    z-index: 20;
    font-size: 0.72rem;
    color: rgba(255,255,255,0.25);
    letter-spacing: 0.04em;
    pointer-events: none;
    transition: opacity 1s;
    white-space: nowrap;
}

/* Ensure navbar sits above canvas */
.cosmos-page .navbar {
    z-index: 100;
    position: fixed;
    background: rgba(11,15,26,0.85);
    backdrop-filter: blur(20px);
}

/* Mobile tweaks */
@media (max-width: 640px) {
    .cosmos-legend { display: none; }
    .cosmos-hint   { display: none; }
    .cosmos-panel  { top: 70px; left: 12px; right: 12px; width: auto; padding: 14px 14px 12px; }
    .cosmos-panel-title { font-size: 1rem; }
    .cosmos-input-row { flex-wrap: wrap; }
    .cosmos-input-row input { min-width: 100%; }
}


/* ═══════════════════════════════════════════════════════════════
   HOME V2 — INTERACTIVE INCOME FIELD
   The canvas IS the interface. Mouse = threshold. People = dots.
═══════════════════════════════════════════════════════════════ */

/* ── Base ── */
body.home-v2 {
    background: #0B0F1A;
    overflow-x: hidden;
}

/* ── Full-screen canvas ── */
#home-canvas {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    width: 100vw;
    height: 100vh;
}

/* ── Nav floats above canvas ── */
body.home-v2 .navbar,
body.home-v3 .navbar {
    position: fixed;
    z-index: 200;
    background: rgba(11,15,26,0.65);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(232,146,42,0.07);
}

/* ════════════════════════════════════════════════
   HOME V3 — LANDSCAPE STAGE
════════════════════════════════════════════════ */

/* Stage: full-viewport height, sits over the canvas */
.home-stage {
    position: relative;
    z-index: 10;
    height: 100vh;
    min-height: 580px;
    pointer-events: none; /* children opt-in */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

/* ── Input Panel ── */
.stage-input-panel {
    pointer-events: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -58%);
    text-align: center;
    width: min(700px, 94vw);
    transition: transform 0.7s cubic-bezier(0.22,1,0.36,1),
                opacity   0.7s ease;
    z-index: 20;
}

/* Slide up and shrink after calculation */
.stage-input-panel.panel-calculated {
    transform: translate(-50%, -92%);
    opacity: 0.55;
    pointer-events: none;
}

.stage-eyebrow {
    font-size: 0.76rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(232,146,42,0.70);
    font-weight: 600;
    margin: 0 0 12px;
    animation: stageFadeUp 1s ease 0.2s both;
}

#home-pop-counter {
    font-variant-numeric: tabular-nums;
    color: #E8922A;
}

.stage-title {
    font-size: clamp(2.4rem, 6vw, 4rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin: 0 0 10px;
    color: #fff;
    animation: stageFadeUp 1s ease 0.35s both;
}
.stage-title em {
    font-style: normal;
    background: linear-gradient(90deg, #E8922A, #F4C96B);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stage-hint {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.32);
    margin: 0 0 24px;
    letter-spacing: 0.03em;
    animation: stageFadeUp 1s ease 0.5s both;
    transition: opacity 0.4s ease, color 0.4s ease;
}

/* ── Input Row ── */
.stage-input-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    animation: stageFadeUp 1s ease 0.6s both;
}

.stage-input {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 12px;
    padding: 13px 18px;
    color: #fff;
    font-size: 1.05rem;
    font-family: inherit;
    width: 200px;
    outline: none;
    transition: border-color 0.2s, background 0.2s;
}
.stage-input:focus {
    border-color: rgba(232,146,42,0.6);
    background: rgba(255,255,255,0.10);
}
.stage-input::placeholder { color: rgba(255,255,255,0.28); }
.stage-input::-webkit-outer-spin-button,
.stage-input::-webkit-inner-spin-button { -webkit-appearance: none; }

.stage-select {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 12px;
    padding: 13px 14px;
    color: #fff;
    font-size: 0.9rem;
    font-family: inherit;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s;
    -webkit-appearance: none;
    appearance: none;
}
.stage-select:focus { border-color: rgba(232,146,42,0.6); }
.stage-select option { background: #1a2332; }

/* Calculate button */
.stage-btn {
    position: relative;
    background: linear-gradient(135deg, #E8922A 0%, #D4801C 100%);
    border: none;
    border-radius: 12px;
    padding: 13px 28px;
    color: #0B0F1A;
    font-size: 1rem;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    transition: transform 0.15s, filter 0.15s, box-shadow 0.2s;
    box-shadow: 0 4px 20px rgba(232,146,42,0.3);
    overflow: hidden;
}
.stage-btn:hover  { transform: translateY(-1px); box-shadow: 0 6px 28px rgba(232,146,42,0.42); }
.stage-btn:active { transform: translateY(0); filter: brightness(0.95); }
.stage-btn-text, .stage-btn-icon { position: relative; z-index: 2; }
.stage-btn-icon { font-size: 1rem; margin-left: 6px; display: inline-block;
    transition: transform 0.18s; }
.stage-btn:hover .stage-btn-icon { transform: translateX(3px); }
/* Loading state */
.stage-btn-loader { display: none; position: absolute; inset: 0;
    align-items: center; justify-content: center; }
.stage-btn.loading .stage-btn-text,
.stage-btn.loading .stage-btn-icon { opacity: 0; }
.stage-btn.loading .stage-btn-loader {
    display: flex;
}
.stage-btn.loading .stage-btn-loader::after {
    content: '';
    width: 18px; height: 18px;
    border: 2px solid rgba(11,15,26,0.3);
    border-top-color: #0B0F1A;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* USD equivalent */
.stage-usd {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.38);
    margin-bottom: 16px;
    animation: stageFadeUp 1s ease 0.65s both;
}

/* Proof pills */
.stage-proof-pills {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    animation: stageFadeUp 1s ease 0.75s both;
}
.stage-pill {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 20px;
    padding: 5px 14px;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.48);
}
.stage-pill strong { color: rgba(255,255,255,0.72); }

/* ── Probe HUD ── */
.stage-probe-hud {
    position: absolute;
    pointer-events: none;
    z-index: 30;
    background: rgba(10,15,28,0.88);
    border: 1px solid rgba(47,214,200,0.25);
    border-radius: 10px;
    padding: 10px 14px;
    text-align: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    backdrop-filter: blur(12px);
    min-width: 90px;
}
.stage-probe-hud.hud-visible { opacity: 1; }
.sph-pct {
    font-size: 1.4rem;
    font-weight: 800;
    color: #2FD6C8;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.sph-label {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.38);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: block;
    margin-top: 2px;
}

/* ── Stage legend (bottom) ── */
.stage-legend {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    pointer-events: none;
    opacity: 0.45;
    animation: stageFadeUp 1s ease 1.2s both;
}
.sl-dot  { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.sl-text { font-size: 0.68rem; color: rgba(255,255,255,0.55);
    text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.sl-bar  { width: 40px; height: 1px;
    background: linear-gradient(90deg, rgba(255,255,255,0.1), rgba(255,255,255,0.25)); }

/* ── Shared entrance animation ── */
@keyframes stageFadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* ════════════════════════════════════════════════
   HERO VIEWPORT  (100vh — the interactive field)
════════════════════════════════════════════════ */
.home-hero-vp {
    position: relative;
    z-index: 10;
    height: 100vh;
    min-height: 560px;
    pointer-events: none; /* children re-enable selectively */
}

/* ── Top headline ── */
.home-headline {
    position: absolute;
    top: 78px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    pointer-events: none;
    z-index: 20;
    animation: hlFadeUp 1.1s cubic-bezier(0.22,0.61,0.36,1) both;
    animation-delay: 0.3s;
}

@keyframes hlFadeUp {
    from { opacity: 0; transform: translateX(-50%) translateY(22px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.home-hl-eyebrow {
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(232,146,42,0.72);
    font-weight: 600;
    margin: 0 0 12px;
}

#home-pop-counter {
    font-variant-numeric: tabular-nums;
    color: #E8922A;
}

.home-hl-title {
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    font-weight: 900;
    letter-spacing: -0.025em;
    line-height: 1.05;
    color: #fff;
    margin: 0 0 14px;
    white-space: nowrap;
}

.home-hl-title em {
    font-style: normal;
    background: linear-gradient(120deg, #E8922A 10%, #F4C96B 90%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.home-hl-proof-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 6px;
}
.home-proof-pill {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.55);
    background: rgba(255,255,255,0.055);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: 4px 12px;
    white-space: nowrap;
}
.home-proof-pill strong { color: #2FD6C8; }

.home-hl-hint {
    font-size: 0.88rem;
    color: rgba(255,255,255,0.38);
    margin: 0;
    transition: opacity 0.6s;
}

/* ── Live threshold HUD ── */
.home-threshold-hud {
    position: fixed;
    z-index: 80;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s, top 0.06s linear;
    background: rgba(11,15,26,0.82);
    border: 1px solid rgba(232,146,42,0.22);
    border-radius: 14px;
    padding: 14px 18px 12px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    min-width: 180px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(232,146,42,0.06);
}

.home-threshold-hud.hud-visible { opacity: 1; }

.hth-pct {
    font-size: 2.4rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.04em;
    color: #E8922A;
    font-variant-numeric: tabular-nums;
    margin-bottom: 4px;
}

.hth-label {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.55);
    line-height: 1.4;
    letter-spacing: 0.02em;
}

.hth-arrow {
    font-size: 0.65rem;
    letter-spacing: 0.06em;
    margin-top: 10px;
    color: rgba(255,255,255,0.25);
}

.hth-arrow-up  { margin-bottom: -4px; }
.hth-arrow-down { margin-top: 4px; }

/* ── Bottom input bar ── */
.home-input-bar {
    position: absolute;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    pointer-events: all;
    animation: hlFadeUp 0.9s cubic-bezier(0.22,0.61,0.36,1) both;
    animation-delay: 0.7s;
}

/* ── Input widget (fixed layout) ── */
.hib-wrap {
    background: rgba(10,14,24,0.92);
    border: 1px solid rgba(232,146,42,0.20);
    border-radius: 20px;
    padding: 16px 18px 14px;
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    box-shadow:
        0 24px 64px rgba(0,0,0,0.55),
        0 0 0 1px rgba(232,146,42,0.06),
        inset 0 1px 0 rgba(255,255,255,0.05);
    width: clamp(300px, 90vw, 620px);
}

.hib-row {
    display: grid;
    /* income input | currency | period | button — natural widths */
    grid-template-columns: 1fr auto auto auto;
    gap: 8px;
    align-items: center;
}

.hib-amount {
    min-width: 0;
    width: 100%;
    height: 50px;
    background: rgba(255,255,255,0.07);
    border: 1.5px solid rgba(232,146,42,0.20);
    border-radius: 12px;
    color: #fff;
    font-size: 1.05rem;
    padding: 0 16px;
    outline: none;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    -moz-appearance: textfield;
    appearance: textfield;
}

.hib-amount::-webkit-outer-spin-button,
.hib-amount::-webkit-inner-spin-button { -webkit-appearance: none; }
.hib-amount::placeholder { color: rgba(255,255,255,0.25); }
.hib-amount:focus {
    border-color: var(--wp-teal);
    background: rgba(232,146,42,0.06);
    box-shadow: 0 0 0 3px rgba(232,146,42,0.12);
}

.hib-select {
    height: 50px;
    background: rgba(255,255,255,0.055);
    border: 1.5px solid rgba(232,146,42,0.14);
    border-radius: 12px;
    color: rgba(255,255,255,0.85);
    font-size: 0.86rem;
    padding: 0 28px 0 12px;
    outline: none;
    cursor: pointer;
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.2s, background 0.2s;
    /* Custom chevron arrow */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(232,146,42,0.5)'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    white-space: nowrap;
}

.hib-select:focus {
    border-color: rgba(232,146,42,0.4);
    background-color: rgba(255,255,255,0.08);
}
.hib-select option { background: #151c2b; color: #fff; }

.hib-btn {
    position: relative;
    height: 50px;
    padding: 0 20px;
    background: linear-gradient(135deg, #E8922A 0%, #C4721A 100%);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-size: 0.92rem;
    font-weight: 700;
    color: #0A0E18;
    white-space: nowrap;
    overflow: hidden;
    font-family: inherit;
    letter-spacing: 0.01em;
    transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
    box-shadow: 0 4px 20px rgba(232,146,42,0.32);
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
}

.hib-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(232,146,42,0.42);
    filter: brightness(1.06);
}

.hib-btn:active { transform: translateY(0); filter: brightness(0.96); }

.hib-btn-text,
.hib-btn-icon { position: relative; z-index: 2; line-height: 1; }
.hib-btn-icon { font-size: 1rem; transition: transform 0.2s; }
.hib-btn:hover .hib-btn-icon { transform: translateX(3px); }

/* Loading state */
.hib-btn.loading .hib-btn-text,
.hib-btn.loading .hib-btn-icon { opacity: 0; }
.hib-btn-loader { display: none; position: absolute; inset: 0; }
.hib-btn.loading .hib-btn-loader { display: flex; align-items: center; justify-content: center; }
.hib-btn.loading .hib-btn-loader::after {
    content: '';
    width: 18px; height: 18px;
    border: 2.5px solid rgba(10,14,24,0.25);
    border-top-color: #0A0E18;
    border-radius: 50%;
    animation: hibSpin 0.65s linear infinite;
}
@keyframes hibSpin { to { transform: rotate(360deg); } }

.hib-usd {
    font-size: 0.75rem;
    color: rgba(232,146,42,0.6);
    text-align: center;
    margin-top: 8px;
}

/* ── Tier color legend ── */
.home-tier-legend {
    position: absolute;
    bottom: 42px;
    right: 28px;
    display: flex;
    align-items: center;
    gap: 6px;
    pointer-events: none;
    opacity: 0.6;
    font-size: 0.68rem;
    color: rgba(255,255,255,0.4);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.htl-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.htl-bar {
    width: 32px; height: 1px;
    background: linear-gradient(90deg, #1A2A44, #E8922A, #F4C96B);
    flex-shrink: 0;
}

/* ════════════════════════════════════════════════
   RESULT SECTION
════════════════════════════════════════════════ */
.result-section {
    position: relative;
    z-index: 10;
    opacity: 0;
    transform: translateY(50px);
    transition: none;
    padding: 80px 20px 64px;
    background: linear-gradient(
        180deg,
        rgba(11,15,26,0)    0%,
        rgba(11,15,26,0.97) 5%,
        rgba(11,15,26,0.98) 95%,
        rgba(11,15,26,0)   100%
    );
    border-top: 1px solid rgba(232,146,42,0.07);
}

.result-section.results-animate-in {
    transition: opacity 0.85s ease, transform 0.85s ease;
    opacity: 1;
    transform: translateY(0);
}

.result-inner {
    max-width: 820px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 36px;
}

/* Giant rank number */
.result-rank-block {
    text-align: center;
    position: relative;
}

.result-rank-block::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 360px; height: 360px;
    background: radial-gradient(ellipse, rgba(232,146,42,0.06) 0%, transparent 70%);
    pointer-events: none;
    border-radius: 50%;
}

.result-label {
    font-size: 0.82rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.42);
    margin: 0 0 10px;
    font-weight: 600;
}

.result-big-num {
    font-size: clamp(5rem, 15vw, 10.5rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 0.88;
    background: linear-gradient(135deg, #E8922A 0%, #E8C87A 45%, #F4C96B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-variant-numeric: tabular-nums;
    filter: drop-shadow(0 0 40px rgba(232,146,42,0.2));
}

.result-sublabel {
    font-size: 1.12rem;
    color: rgba(255,255,255,0.6);
    margin: 16px 0 4px;
}

/* ─── Humanity line: "That's X.X billion people…" ─── */
.result-humanity-line {
    font-size: 1.2rem;
    color: rgba(255,255,255,0.72);
    margin: 18px 0 6px;
    font-weight: 400;
    line-height: 1.5;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.7s ease 0.6s, transform 0.7s ease 0.6s;
}
.result-rank-block.revealed .result-humanity-line {
    opacity: 1;
    transform: translateY(0);
}
.result-billion {
    font-size: 1.5rem;
    font-weight: 800;
    color: #2FD6C8;
    font-variant-numeric: tabular-nums;
}

/* ─── Context sentence ─── */
.result-context-sentence {
    font-size: 0.88rem;
    color: rgba(255,255,255,0.38);
    font-style: italic;
    margin: 4px 0 26px;
    letter-spacing: 0.01em;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.7s ease 1.1s, transform 0.7s ease 1.1s;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}
.result-rank-block.revealed .result-context-sentence {
    opacity: 1;
    transform: translateY(0);
}

/* ─── Humanity Bar ─── */
.result-humanity-bar {
    width: 100%;
    max-width: 580px;
    margin: 0 auto 6px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.7s ease 1.5s, transform 0.7s ease 1.5s;
    /* shown by script.js setting display:block, then revealed by CSS transition */
}
.result-rank-block.revealed .result-humanity-bar {
    opacity: 1;
    transform: translateY(0);
}
/* When bar is shown via JS, ensure it's block so transitions work */
#result-humanity-bar[style*="block"] { display: block !important; }
.rhb-track {
    height: 10px;
    background: rgba(255,255,255,0.06);
    border-radius: 10px;
    position: relative;
    overflow: visible;
    border: 1px solid rgba(255,255,255,0.05);
}
.rhb-fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    border-radius: 10px;
    background: linear-gradient(90deg, #152E4A 0%, #1E9898 45%, #E8922A 100%);
    width: 0%;
    transition: width 1.8s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 2px 0 14px rgba(232,146,42,0.25);
}
.rhb-you-pin {
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translateX(-50%) translateY(-50%);
    transition: left 1.8s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 2;
}
.rhb-you-pin::before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #E8922A;
    box-shadow: 0 0 0 3px rgba(232,146,42,0.25), 0 0 18px rgba(232,146,42,0.5);
    border: 2px solid #fff;
}
.rhb-you-label {
    display: block;
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background: #E8922A;
    color: #0B0F1A;
    font-size: 0.58rem;
    font-weight: 900;
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 0.1em;
    white-space: nowrap;
}
.rhb-you-label::after {
    content: '';
    position: absolute;
    top: 100%; left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: #E8922A;
}
.rhb-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    font-size: 0.65rem;
    color: rgba(255,255,255,0.22);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.result-data-source {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.28);
    margin: 8px 0 0;
}
.result-data-source a { color: rgba(47,214,200,0.55); text-decoration: none; }
.result-data-source a:hover { color: #2FD6C8; }

/* Ladder strip */
.result-ladder-wrap {
    width: 100%;
    max-width: 600px;
    padding: 0 4px;
}

.result-ladder-wrap .ladder-track-full {
    height: 8px;
    border-radius: 5px;
    background: rgba(255,255,255,0.07);
    position: relative;
    overflow: visible;
    border: 1px solid rgba(232,146,42,0.08);
}

.result-ladder-wrap .ladder-fill-full {
    height: 100%;
    border-radius: 5px;
    background: linear-gradient(90deg, rgba(232,146,42,0.25), #E8922A);
    transition: width 1.3s cubic-bezier(0.22,0.61,0.36,1);
    width: 0%;
}

.result-ladder-wrap .user-marker-full {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 16px; height: 16px;
    background: #E8922A;
    border: 3px solid #0B0F1A;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(232,146,42,0.6);
    transition: left 1.3s cubic-bezier(0.22,0.61,0.36,1);
    left: 0%;
    z-index: 2;
}

/* Minimal insight rows */
.result-section .insights-grid {
    display: flex;
    flex-direction: column;
    gap: 11px;
    width: 100%;
    max-width: 560px;
    margin: 22px 0 8px;
    padding-left: 14px;
    border-left: 2px solid rgba(244,201,107,0.22);
}

.result-section .insight-item {
    display: flex;
    align-items: baseline;
    gap: 10px;
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    transition: none;
}

.result-section .insight-item:hover {
    background: none;
    transform: none;
}

.result-section .insight-stat {
    font-size: 1.05rem;
    font-weight: 800;
    color: #F4C96B;
    min-width: 58px;
    flex-shrink: 0;
    line-height: 1.2;
}

.result-section .insight-desc {
    font-size: 0.83rem;
    color: rgba(255,255,255,0.48);
    line-height: 1.4;
}

/* Action panel */
.result-section .action-panel {
    width: 100%;
    max-width: 620px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.result-section .income-breakdown {
    background: rgba(255,255,255,0.028);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    padding: 18px 22px;
}

.result-section .income-breakdown h4 {
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.3);
    margin: 0 0 12px;
    font-weight: 600;
}

.result-section .breakdown-grid {
    display: flex;
}

.result-section .breakdown-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 8px;
    border-right: 1px solid rgba(255,255,255,0.06);
}

.result-section .breakdown-item:last-child { border-right: none; }

.result-section .breakdown-label {
    font-size: 0.68rem;
    color: rgba(255,255,255,0.32);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
}

.result-section .breakdown-value {
    font-size: 1.08rem;
    font-weight: 700;
    color: #F4C96B;
    font-variant-numeric: tabular-nums;
}

.result-section .shareable-section {
    background: rgba(255,255,255,0.028);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    padding: 18px 22px;
}

.result-section .shareable-section h4 {
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.3);
    margin: 0 0 10px;
    font-weight: 600;
}

.result-section .shareable-summary {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.result-section .shareable-text {
    flex: 1;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.62);
    line-height: 1.5;
}

.result-section .copy-btn {
    background: rgba(232,146,42,0.09);
    border: 1px solid rgba(232,146,42,0.22);
    color: #E8922A;
    border-radius: 9px;
    padding: 8px 14px;
    font-size: 0.8rem;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
    font-weight: 600;
    transition: background 0.18s, transform 0.15s;
}

.result-section .copy-btn:hover {
    background: rgba(232,146,42,0.16);
    transform: translateY(-1px);
}

.result-explore-btn {
    background: none;
    border: 1px solid rgba(232,146,42,0.22);
    color: rgba(232,146,42,0.75);
    border-radius: 12px;
    padding: 13px 30px;
    font-size: 0.93rem;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.02em;
    font-family: inherit;
    transition: all 0.2s;
    margin-top: 4px;
}

.result-explore-btn:hover {
    background: rgba(232,146,42,0.07);
    border-color: rgba(232,146,42,0.45);
    color: #E8922A;
    transform: translateY(-2px);
}

/* ════════════════════════════════════════════════
   HOME TOOLS GRID
════════════════════════════════════════════════ */
/* ── Trust / Social Proof Section ── */
.home-trust-section {
    position: relative;
    z-index: 10;
    padding: 56px 20px;
    background: rgba(10,14,24,0.98);
    border-top: 1px solid rgba(255,255,255,0.04);
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.home-trust-section .container { max-width: 1060px; margin: 0 auto; }

.trust-eyebrow {
    text-align: center;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.32);
    margin-bottom: 28px;
}

.trust-sources-row {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    margin-bottom: 40px;
}
.trust-source {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 24px;
    text-align: center;
}
.trust-source-icon { font-size: 1.4rem; }
.trust-source-name { font-size: 0.82rem; font-weight: 700; color: rgba(255,255,255,0.8); }
.trust-source-desc { font-size: 0.68rem; color: rgba(255,255,255,0.35); }
.trust-divider { width: 1px; height: 40px; background: rgba(255,255,255,0.08); align-self: center; flex-shrink:0; }

.trust-facts-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
    margin-bottom: 36px;
    border: 1px solid rgba(47,214,200,0.12);
    border-radius: 16px;
    overflow: hidden;
}
.trust-fact {
    flex: 1;
    min-width: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 20px;
    border-right: 1px solid rgba(47,214,200,0.08);
    background: rgba(47,214,200,0.03);
    gap: 5px;
}
.trust-fact:last-child { border-right: none; }
.trust-fact { transition: background 0.2s ease; }
.trust-fact:hover { background: rgba(47,214,200,0.07); }
.trust-fact-num { font-size: 1.65rem; font-weight: 800; color: #2FD6C8; letter-spacing: -0.02em; }
.trust-fact-lbl { font-size: 0.72rem; color: rgba(255,255,255,0.45); text-align: center; line-height: 1.4; }

.trust-badges-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
}
.trust-badge-pill {
    font-size: 0.7rem;
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid rgba(232,146,42,0.25);
    color: rgba(232,146,42,0.8);
    background: rgba(232,146,42,0.05);
    letter-spacing: 0.03em;
}

@media (max-width: 600px) {
    .trust-divider { display: none; }
    .trust-sources-row { gap: 8px; }
    .trust-fact { min-width: 120px; padding: 18px 12px; }
    .trust-fact-num { font-size: 1.3rem; }
}

/* ── Email Capture Section ─────────────────────── */
.home-email-section {
    position: relative;
    z-index: 10;
    padding: 72px 20px;
    background: rgba(8,12,22,0.98);
    border-top: 1px solid rgba(47,214,200,0.08);
}
.home-email-card {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    gap: 60px;
    align-items: center;
    background: linear-gradient(135deg, rgba(47,214,200,0.05) 0%, rgba(244,201,107,0.04) 100%);
    border: 1px solid rgba(47,214,200,0.15);
    border-radius: 20px;
    padding: 48px 52px;
}
.home-email-left { flex: 1; }
.home-email-right { flex: 1; }
.email-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #2FD6C8;
    margin: 0 0 10px;
}
.email-headline {
    font-size: clamp(1.4rem, 2.5vw, 1.9rem);
    font-weight: 800;
    color: #fff;
    margin: 0 0 10px;
    line-height: 1.2;
}
.email-sub {
    font-size: 0.92rem;
    color: rgba(255,255,255,0.55);
    margin: 0 0 18px;
    line-height: 1.6;
}
.email-promises {
    list-style: none;
    padding: 0; margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.email-promises li {
    font-size: 0.83rem;
    color: rgba(255,255,255,0.5);
}
.email-input-row {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}
.email-field {
    flex: 1;
    padding: 13px 16px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 10px;
    color: #fff;
    font-size: 0.95rem;
    font-family: inherit;
    transition: border-color 0.2s;
    outline: none;
}
.email-field:focus { border-color: #2FD6C8; }
.email-field::placeholder { color: rgba(255,255,255,0.3); }
.email-submit-btn {
    padding: 13px 22px;
    background: linear-gradient(135deg, #2FD6C8, #1aab9f);
    border: none;
    border-radius: 10px;
    color: #0B0F1A;
    font-weight: 800;
    font-size: 0.9rem;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.2s, transform 0.15s;
}
.email-submit-btn:hover { opacity: 0.88; transform: translateY(-1px); }
.email-submit-btn:disabled { opacity: 0.6; cursor: default; transform: none; }
.email-fine-print {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.3);
    margin: 0;
}
@media (max-width: 720px) {
    .home-email-card {
        flex-direction: column;
        gap: 30px;
        padding: 30px 22px;
    }
    .email-input-row { flex-direction: column; }
    .email-submit-btn { width: 100%; padding: 14px; }
}

.home-tools-section {
    position: relative;
    z-index: 10;
    padding: 80px 20px;
    background: rgba(11,15,26,0.97);
    border-top: 1px solid rgba(255,255,255,0.035);
}

.home-tools-header {
    text-align: center;
    margin-bottom: 42px;
}

.home-tools-header h2 {
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    font-weight: 800;
    color: #fff;
    margin: 0 0 8px;
    letter-spacing: -0.02em;
}

.home-tools-header p {
    color: rgba(255,255,255,0.4);
    font-size: 0.98rem;
    margin: 0;
}

.home-tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    max-width: 1080px;
    margin: 0 auto;
}

.htool-card {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 22px 20px 20px;
    background: rgba(255,255,255,0.028);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.18s, background 0.18s, border-color 0.18s, box-shadow 0.18s;
}

.htool-card:hover {
    background: rgba(232,146,42,0.045);
    border-color: rgba(232,146,42,0.16);
    transform: translateY(-3px);
    box-shadow: 0 10px 36px rgba(0,0,0,0.28);
    text-decoration: none;
    color: inherit;
}

.htool-icon { font-size: 1.5rem; line-height: 1; margin-bottom: 3px; }
.htool-card h3 { font-size: 0.94rem; font-weight: 700; color: rgba(255,255,255,0.88); margin: 0; }
.htool-card p  { font-size: 0.8rem;  color: rgba(255,255,255,0.4);  margin: 0; line-height: 1.45; }

/* ════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════ */
@media (max-width: 680px) {
    .home-hl-title { font-size: 1.9rem; white-space: normal; text-align: center; }

    .hib-wrap { width: calc(100vw - 28px); padding: 12px 12px 10px; border-radius: 16px; }

    .hib-row { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 7px; }
    .hib-amount { grid-column: 1 / -1; height: 46px; }
    .hib-select { height: 44px; font-size: 0.82rem; }
    .hib-btn    { grid-column: 1 / -1; height: 46px; }

    .result-big-num { font-size: 5.2rem; }

    .result-section .breakdown-grid {
        flex-direction: column; gap: 10px;
    }
    .result-section .breakdown-item {
        flex-direction: row; align-items: center;
        justify-content: space-between;
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.06);
        padding: 0 0 10px;
    }
    .result-section .breakdown-item:last-child { border-bottom: none; padding: 0; }

    .result-section .shareable-summary { flex-direction: column; }

    .home-tier-legend { display: none; }

    .home-tools-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .htool-card { padding: 16px 13px; }
}

@media (max-width: 380px) {
    .home-tools-grid { grid-template-columns: 1fr; }
    .result-big-num { font-size: 4.5rem; }
}

/* ════════════════════════════════════════════════
   LIGHT MODE — form & card text visibility fixes
   Amber on white has low contrast; white text on
   white is invisible. All overrides go here.
════════════════════════════════════════════════ */

/* Section/card heading labels in amber → deeper amber for contrast */
.light-mode .life-input-card h2,
.light-mode .compare-input-card h2,
.light-mode .twin-form-card h2,
.light-mode .goal-form-card h2,
.light-mode .journal-form-card h2,
.light-mode .wi-form-card h2,
.light-mode .col-form-card h2,
.light-mode [class*="-input-card"] h2,
.light-mode [class*="-form-card"] h2 {
    color: #8A4E10 !important;
}

/* All form group labels that use semi-transparent white → dark */
.light-mode .life-form-group label,
.light-mode .compare-form-group label,
.light-mode .twin-form-group label,
.light-mode .goal-form-group label,
.light-mode .journal-form-group label,
.light-mode .lb-form-group label,
.light-mode .wi-form-group label,
.light-mode .wi-panel-group label,
.light-mode .col-form-group label,
.light-mode .hourly-field label,
.light-mode .map-controls label,
.light-mode [class*="-form-group"] label,
.light-mode [class*="-form-row"] label {
    color: rgba(15,25,35,0.5) !important;
}

/* All dark-mode form inputs/selects → readable on light backgrounds */
.light-mode .life-form-group input,
.light-mode .life-form-group select,
.light-mode .compare-form-group input,
.light-mode .compare-form-group select,
.light-mode .twin-form-group input,
.light-mode .twin-form-group select,
.light-mode .goal-form-group input,
.light-mode .goal-form-group select,
.light-mode .journal-form-group input,
.light-mode .journal-form-group select,
.light-mode .lb-form-group input,
.light-mode .lb-form-group select,
.light-mode .wi-form-group input,
.light-mode .wi-form-group select,
.light-mode .wi-panel-group input,
.light-mode .wi-panel-group select,
.light-mode .col-form-group input,
.light-mode .col-form-group select,
.light-mode [class*="-form-group"] input,
.light-mode [class*="-form-group"] select {
    color: #0f1923 !important;
    background: rgba(0,0,0,0.045) !important;
    border-color: rgba(0,0,0,0.14) !important;
}

.light-mode [class*="-form-group"] input::placeholder,
.light-mode [class*="-form-group"] select::placeholder {
    color: rgba(15,25,35,0.35) !important;
}

.light-mode [class*="-form-group"] select option {
    background: #f8f8f8;
    color: #0f1923;
}

/* Quiz score bar — white values invisible on light quiz card */
.light-mode .qsb-label {
    color: rgba(15,25,35,0.45) !important;
}
.light-mode .qsb-value {
    color: #0f1923 !important;
}
.light-mode .quiz-score-bar {
    border-bottom-color: rgba(0,0,0,0.08) !important;
}

/* Quiz question card — dark gradient on light page */
.light-mode .quiz-question-card {
    background: rgba(255,255,255,0.92) !important;
    border-color: rgba(232,146,42,0.25) !important;
}
.light-mode .quiz-meta,
.light-mode .quiz-income-label,
.light-mode .quiz-salary-label,
.light-mode .quiz-question-card .quiz-meta-label {
    color: rgba(15,25,35,0.5) !important;
}
.light-mode .quiz-question-card .quiz-income-val,
.light-mode .quiz-salary-value,
.light-mode .quiz-question-card h2,
.light-mode .quiz-question-card .quiz-country,
.light-mode .quiz-job {
    color: #0f1923 !important;
}
.light-mode .quiz-salary-display {
    background: rgba(232,146,42,0.09) !important;
    border-color: rgba(232,146,42,0.3) !important;
}

/* Quiz prompt text */
.light-mode .quiz-prompt {
    color: rgba(15,25,35,0.5) !important;
}

/* Blog date text — semi-transparent white on light */
.light-mode .blog-date {
    color: rgba(15,25,35,0.4) !important;
}

/* Related tools section */
.light-mode .related-tools-title {
    color: rgba(15,25,35,0.45) !important;
}

/* Score/stat numbers that use white on dark */
.light-mode .wem-sb-value,
.light-mode .lb-pct-val,
.light-mode .life-event-stat,
.light-mode .wi-slider-val,
.light-mode .col-summary-big {
    color: #8A4E10 !important;
}

/* Leaderboard light mode */
.light-mode .lb-table-card h2,
.light-mode .lb-submit-card h2 {
    color: rgba(15,25,35,0.55) !important;
}
.light-mode .lb-table th {
    color: rgba(15,25,35,0.4) !important;
    border-bottom-color: rgba(0,0,0,0.1) !important;
}
.light-mode .lb-table td {
    color: rgba(15,25,35,0.8) !important;
    border-bottom-color: rgba(0,0,0,0.05) !important;
}
.light-mode .lb-rank-num {
    color: rgba(15,25,35,0.3) !important;
}
.light-mode .lb-disclaimer {
    color: rgba(15,25,35,0.3) !important;
}
.light-mode .lb-table-card,
.light-mode .lb-submit-card {
    background: rgba(0,0,0,0.03) !important;
    border-color: rgba(0,0,0,0.1) !important;
}

/* =====================================================
   REMITTANCE IMPACT CALCULATOR — remittance.html
   ===================================================== */
.remittance-page .container { max-width: 860px; margin: 0 auto; }

.rem-input-card {
    background: rgba(18,24,36,0.95);
    border-radius: 18px;
    padding: 28px;
    margin-bottom: 24px;
    border: 1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(20px);
}
.rem-input-card h2 { font-size: 1.1rem; font-weight: 700; margin: 0 0 20px; }

.rem-impact-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}
.rem-impact-card {
    background: rgba(18,24,36,0.9);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 22px 18px;
    text-align: center;
    transition: border-color 0.2s;
}
.rem-impact-card:hover { border-color: rgba(47,214,200,0.2); }
.rem-impact-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: rgba(255,255,255,0.38);
    margin-bottom: 10px;
}
.rem-impact-value {
    font-size: 1.9rem;
    font-weight: 800;
    color: #2FD6C8;
    line-height: 1;
    margin-bottom: 6px;
    font-variant-numeric: tabular-nums;
}
.rem-impact-sub { font-size: 0.75rem; color: rgba(255,255,255,0.38); }

.rem-context-card {
    background: rgba(47,214,200,0.04);
    border: 1px solid rgba(47,214,200,0.1);
    border-radius: 16px;
    padding: 22px;
    margin-bottom: 20px;
}
.rem-context-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: rgba(255,255,255,0.65);
    margin-bottom: 14px;
}
.rem-context-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.rem-context-list li {
    font-size: 0.88rem;
    color: rgba(255,255,255,0.62);
    padding-left: 22px;
    position: relative;
    line-height: 1.6;
}
.rem-context-list li::before {
    content: '›';
    position: absolute;
    left: 5px;
    color: #2FD6C8;
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1.4;
}

.rem-impact-score {
    background: rgba(18,24,36,0.9);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 16px;
    padding: 32px 24px;
    text-align: center;
    margin-bottom: 24px;
}
.rem-score-num {
    font-size: clamp(3rem, 10vw, 5.5rem);
    font-weight: 900;
    background: linear-gradient(135deg, #2FD6C8 0%, #F4C96B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 10px;
}
.rem-score-label {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.48);
    max-width: 440px;
    margin: 0 auto;
    line-height: 1.6;
}

@media (max-width: 640px) {
    .rem-impact-row { grid-template-columns: 1fr; }
}



/* ════════════════════════════════════════════════
   SPINE — Cross-page persistence layer
   ════════════════════════════════════════════════ */

/* ── Spine pill: fixed badge on all non-home pages ── */
#wp-spine-pill {
    position: fixed;
    bottom: 88px;
    left: 18px;
    z-index: 9990;
    display: flex;
    align-items: center;
    gap: 7px;
    background: rgba(12,18,30,0.94);
    border: 1px solid rgba(244,201,107,0.28);
    border-radius: 24px;
    padding: 7px 13px 7px 11px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 4px 22px rgba(0,0,0,0.38);
    animation: spinePillIn 0.45s ease both;
    pointer-events: auto;
}
@keyframes spinePillIn {
    from { opacity:0; transform:translateY(10px); }
    to   { opacity:1; transform:translateY(0); }
}
.wsp-rank {
    font-size: 1rem;
    font-weight: 800;
    color: #F4C96B;
    line-height: 1;
}
.wsp-lbl {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.42);
    letter-spacing: 0.02em;
}
.wsp-recalc {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.28);
    text-decoration: none;
    padding-left: 4px;
    transition: color 0.2s;
    line-height: 1;
}
.wsp-recalc:hover { color: #2FD6C8; }

/* ── Spine context strip: under h1 on other pages ── */
.spine-context-strip {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.42);
    margin: -6px 0 18px;
    font-style: italic;
    letter-spacing: 0.01em;
    border-left: 2px solid rgba(244,201,107,0.22);
    padding-left: 10px;
}

/* ════════════════════════════════════════════════
   NEXT ANGLES — 3-card perspective switcher
   inside result section
   ════════════════════════════════════════════════ */
.next-angles {
    width: 100%;
    max-width: 560px;
    margin: 10px 0 20px;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.7s ease 2.4s, transform 0.7s ease 2.4s;
}
.result-section.results-animate-in .next-angles {
    opacity: 1;
    transform: translateY(0);
}
.na-label {
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.25);
    margin: 0 0 10px;
}
.na-row {
    display: flex;
    gap: 9px;
}
.na-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 13px 14px;
    background: rgba(255,255,255,0.028);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.na-card:hover {
    background: rgba(244,201,107,0.055);
    border-color: rgba(244,201,107,0.22);
    transform: translateY(-2px);
}
.na-icon {
    font-size: 1rem;
    line-height: 1;
    margin-bottom: 2px;
}
.na-title {
    font-size: 0.84rem;
    font-weight: 700;
    color: rgba(255,255,255,0.82);
}
.na-desc {
    font-size: 0.73rem;
    color: rgba(255,255,255,0.36);
    line-height: 1.35;
}
@media (max-width: 520px) {
    .na-row { flex-direction: column; }
    #wp-spine-pill { bottom: 72px; left: 12px; }
}

/* ── Reset / Try-another button ─────────────────────────────── */
.reset-calc-btn {
    display: block;
    margin: 0 auto 22px;
    padding: 7px 18px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 20px;
    color: rgba(255,255,255,0.38);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    cursor: pointer;
    transition: border-color 0.18s, color 0.18s, background 0.18s;
}
.reset-calc-btn:hover {
    border-color: rgba(47,214,200,0.45);
    color: #2FD6C8;
    background: rgba(47,214,200,0.06);
}


/* =============================================================
   WP-MODES -- Perspective Mode System
   Five lenses on the same truth
   ============================================================= */

/* -- Wrapper -------------------------------------------------- */
.wpm-wrap {
    margin-top: 28px;
    opacity: 0;
    transform: translateY(12px);
    animation: wpmWrapIn 0.5s ease 2.8s forwards;
}
@keyframes wpmWrapIn {
    to { opacity: 1; transform: translateY(0); }
}

/* -- Tab Bar -------------------------------------------------- */
.wpm-bar {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 4px;
    background: rgba(255,255,255,0.04);
    border-radius: 14px 14px 0 0;
    border: 1px solid rgba(255,255,255,0.07);
    border-bottom: none;
}
.wpm-btn {
    flex: 1 1 auto;
    min-width: 90px;
    max-width: 160px;
    padding: 9px 14px;
    background: transparent;
    border: none;
    border-radius: 10px;
    color: rgba(255,255,255,0.45);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
    white-space: nowrap;
}
.wpm-btn:hover {
    background: rgba(255,255,255,0.07);
    color: rgba(255,255,255,0.8);
}
.wpm-btn.wpm-active {
    background: rgba(47,214,200,0.12);
    color: #2FD6C8;
    box-shadow: inset 0 0 0 1px rgba(47,214,200,0.25);
}

/* -- Content Area -------------------------------------------- */
.wpm-content {
    background: rgba(12,17,28,0.7);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 0 0 14px 14px;
    padding: 24px 22px;
    min-height: 140px;
    transition: opacity 0.19s ease, transform 0.19s ease;
}
.wpm-content.wpm-out {
    opacity: 0;
    transform: translateY(6px);
}
.wpm-content.wpm-in {
    opacity: 1;
    transform: translateY(0);
}

/* =============================================================
   MODE: GLOBAL
   ============================================================= */
.wpm-stat-row {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.wpm-stat {
    flex: 1 1 30%;
    min-width: 100px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 11px;
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 5px;
}
.wpm-stat-val {
    font-size: 1.55rem;
    font-weight: 800;
    color: #F4C96B;
    line-height: 1;
    letter-spacing: -0.5px;
}
.wpm-stat-lbl {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.42);
    line-height: 1.35;
}
.wpm-global-tier {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 14px 16px;
    background: rgba(47,214,200,0.06);
    border: 1px solid rgba(47,214,200,0.18);
    border-radius: 10px;
}
.wpm-tier-name {
    font-size: 0.92rem;
    font-weight: 700;
    color: #2FD6C8;
    letter-spacing: 0.2px;
}
.wpm-tier-desc {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.52);
    line-height: 1.5;
    margin: 0;
}

/* =============================================================
   MODE: HISTORY
   ============================================================= */
.wpm-hist-top {
    display: flex;
    gap: 12px;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.wpm-hist-year-block,
.wpm-hist-pct-block {
    flex: 1 1 45%;
    min-width: 130px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 11px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.wpm-hist-yr-label,
.wpm-hist-pct-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: rgba(255,255,255,0.36);
}
.wpm-hist-yr-val {
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    letter-spacing: -1px;
}
.wpm-hist-era {
    font-size: 0.74rem;
    color: rgba(255,255,255,0.45);
    font-style: italic;
}
.wpm-hist-pct {
    font-size: 2rem;
    font-weight: 800;
    color: #F4C96B;
    line-height: 1;
    letter-spacing: -1px;
}
.wpm-hist-pct-now {
    font-size: 0.74rem;
    color: rgba(255,255,255,0.36);
}
.wpm-hist-slider {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 5px;
    background: rgba(255,255,255,0.12);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
    margin-bottom: 6px;
}
.wpm-hist-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #2FD6C8;
    cursor: pointer;
    border: 2px solid #0B0F1A;
    box-shadow: 0 0 6px rgba(47,214,200,0.5);
}
.wpm-hist-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #2FD6C8;
    cursor: pointer;
    border: 2px solid #0B0F1A;
}
.wpm-hist-track-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.66rem;
    color: rgba(255,255,255,0.28);
    margin-bottom: 14px;
    padding: 0 2px;
}
.wpm-hist-ctx {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.5);
    line-height: 1.6;
    margin: 0;
    padding: 12px 14px;
    background: rgba(255,255,255,0.03);
    border-left: 3px solid rgba(47,214,200,0.35);
    border-radius: 0 8px 8px 0;
}

/* =============================================================
   MODE: GEOGRAPHY
   ============================================================= */
.wpm-geo-select {
    width: 100%;
    padding: 10px 14px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    color: #fff;
    font-size: 0.88rem;
    outline: none;
    cursor: pointer;
    margin-bottom: 18px;
    -webkit-appearance: none;
    appearance: none;
    padding-right: 36px;
}
.wpm-geo-select:focus {
    border-color: rgba(47,214,200,0.45);
}
.wpm-geo-select option {
    background: #1a2332;
    color: #fff;
}
.wpm-geo-prompt {
    color: rgba(255,255,255,0.35);
    font-size: 0.82rem;
    text-align: center;
    padding: 16px 0;
    margin: 0;
}
.wpm-geo-stats {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.wpm-geo-stat {
    flex: 1 1 38%;
    min-width: 120px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}
.wpm-geo-val {
    font-size: 1.3rem;
    font-weight: 800;
    color: #F4C96B;
    line-height: 1;
}
.wpm-geo-lbl {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.42);
}
.wpm-geo-vs {
    font-size: 0.78rem;
    font-weight: 700;
    color: rgba(255,255,255,0.25);
    flex-shrink: 0;
}
.wpm-geo-ratio {
    display: flex;
    align-items: baseline;
    gap: 8px;
    justify-content: center;
    margin-bottom: 12px;
}
.wpm-geo-ratio-val {
    font-size: 1.6rem;
    font-weight: 800;
    color: #2FD6C8;
    line-height: 1;
}
.wpm-geo-ratio-lbl {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.45);
}
.wpm-geo-ctx {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.55);
    text-align: center;
    margin: 0 0 8px;
    line-height: 1.55;
}
.wpm-geo-rank {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.35);
    text-align: center;
    margin: 0;
    line-height: 1.5;
}
.wpm-geo-rank strong {
    color: rgba(255,255,255,0.62);
}

/* =============================================================
   MODE: LIFE
   ============================================================= */
.wpm-life-age-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}
.wpm-life-age-lbl {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.5);
    white-space: nowrap;
    font-weight: 600;
}
.wpm-age-input {
    width: 90px;
    padding: 8px 12px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 9px;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    outline: none;
    text-align: center;
}
.wpm-age-input:focus {
    border-color: rgba(47,214,200,0.45);
}
.wpm-life-cohort {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
    margin-bottom: 14px;
}
.wpm-lc-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: rgba(255,255,255,0.65);
}
.wpm-lc-median {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.4);
}
.wpm-lc-median strong {
    color: #F4C96B;
}
.wpm-life-rank {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-bottom: 16px;
    padding: 14px;
    background: rgba(47,214,200,0.06);
    border: 1px solid rgba(47,214,200,0.2);
    border-radius: 11px;
}
.wpm-lr-val {
    font-size: 1.2rem;
    font-weight: 800;
    color: #2FD6C8;
    line-height: 1;
}
.wpm-lr-lbl {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.4);
}
.wpm-life-ctx {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.48);
    line-height: 1.55;
    margin: 0 0 10px;
}
.wpm-life-peak {
    font-size: 0.78rem;
    color: rgba(244,201,107,0.65);
    font-style: italic;
    margin: 0;
    line-height: 1.5;
}

/* =============================================================
   MODE: COMPARE
   ============================================================= */
.wpm-cmp-section {
    margin-bottom: 18px;
}
.wpm-cmp-label {
    font-size: 0.76rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: rgba(255,255,255,0.36);
    margin: 0 0 8px;
}
.wpm-cmp-url-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.wpm-cmp-url {
    flex: 1;
    padding: 9px 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 9px;
    color: rgba(255,255,255,0.5);
    font-size: 0.75rem;
    outline: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: monospace;
}
.wpm-cmp-copy {
    padding: 9px 16px;
    background: rgba(47,214,200,0.14);
    border: 1px solid rgba(47,214,200,0.3);
    border-radius: 9px;
    color: #2FD6C8;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
    flex-shrink: 0;
}
.wpm-cmp-copy:hover {
    background: rgba(47,214,200,0.22);
}
.wpm-cmp-hint {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.3);
    margin: 7px 0 0;
}
.wpm-cmp-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 18px;
    color: rgba(255,255,255,0.2);
    font-size: 0.75rem;
}
.wpm-cmp-divider::before,
.wpm-cmp-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(255,255,255,0.08);
}
.wpm-cmp-friend-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.wpm-cmp-friend-input {
    flex: 1;
    padding: 9px 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 9px;
    color: #fff;
    font-size: 0.88rem;
    outline: none;
}
.wpm-cmp-friend-input:focus {
    border-color: rgba(47,214,200,0.4);
}
.wpm-cmp-check {
    padding: 9px 18px;
    background: rgba(244,201,107,0.14);
    border: 1px solid rgba(244,201,107,0.3);
    border-radius: 9px;
    color: #F4C96B;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
    flex-shrink: 0;
}
.wpm-cmp-check:hover {
    background: rgba(244,201,107,0.22);
}
.wpm-cmp-friend-result {
    margin-top: 12px;
}
.wpm-cmp-msg {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.65);
    line-height: 1.6;
    padding: 12px 14px;
    background: rgba(255,255,255,0.04);
    border-radius: 9px;
    border-left: 3px solid rgba(244,201,107,0.4);
    margin: 0;
}
.wpm-cmp-msg strong {
    color: #F4C96B;
}

/* -- Responsive ----------------------------------------------- */
@media (max-width: 600px) {
    .wpm-bar { gap: 4px; padding: 3px; }
    .wpm-btn { font-size: 0.72rem; padding: 8px 8px; min-width: 60px; }
    .wpm-content { padding: 18px 14px; }
    .wpm-stat-row { gap: 7px; }
    .wpm-stat-val { font-size: 1.25rem; }
    .wpm-hist-pct, .wpm-hist-yr-val { font-size: 1.6rem; }
    .wpm-geo-stats { flex-direction: column; align-items: stretch; }
    .wpm-geo-vs { text-align: center; }
    .wpm-cmp-url-row, .wpm-cmp-friend-row { flex-direction: column; }
    .wpm-cmp-copy, .wpm-cmp-check { width: 100%; }
}


/* =============================================================
   MOBILE RESPONSIVE — Android / small screens (≤ 480px)
   Fixes the calculator form, result section, nav, and modes
   ============================================================= */

@media (max-width: 480px) {

    /* ── Nav ─────────────────────────────────────────────────── */
    .nav-title { font-size: 0.82rem; }
    .nav-container { padding: 0 14px; }

    /* ── Desktop-only elements: hide on touch screens ────────── */
    .stage-probe-hud { display: none !important; }
    /* Cursor-hover hint is irrelevant on mobile */
    .stage-hint { display: none !important; }

    /* ── Stage hero canvas area ───────────────────────────────── */
    .stage-input-panel {
        width: 94vw;
        /* Shift panel a little higher so result section has room */
        transform: translate(-50%, -62%);
    }
    /* After calc: slide further up so results show without scrolling */
    .stage-input-panel.panel-calculated {
        transform: translate(-50%, -130%);
        opacity: 0.4;
    }

    /* ── Eyebrow + hero title ────────────────────────────────── */
    .stage-eyebrow { font-size: 0.68rem; letter-spacing: 0.1em; margin-bottom: 8px; }
    .stage-title {
        font-size: clamp(1.9rem, 8.5vw, 3rem) !important;
        overflow-wrap: break-word;
        word-break: break-word;
        overflow: hidden;
        white-space: normal !important;
        max-width: 100%;
    }
    .stage-subtitle { font-size: 0.8rem; }

    /* ── Input row: switch to 2-col grid ────────────────────────
       Layout on mobile:
         [ income amount — full width        ]
         [ currency ▾  ]  [ / year ▾        ]
         [ Find My Place ——————————————————→ ]
    ────────────────────────────────────────────────────────── */
    .stage-input-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        justify-items: stretch;
    }
    /* Amount input: span both columns */
    .stage-input {
        grid-column: 1 / -1;
        width: 100%;
        font-size: 1rem;
        padding: 13px 14px;
        border-radius: 10px;
        box-sizing: border-box;
    }
    /* Currency + period selects: each takes 1 column naturally */
    .stage-select {
        width: 100%;
        padding: 11px 10px;
        font-size: 0.82rem;
        border-radius: 10px;
        box-sizing: border-box;
    }
    /* Button: span both columns, full width */
    .stage-btn {
        grid-column: 1 / -1;
        width: 100%;
        padding: 13px 16px;
        font-size: 0.95rem;
        border-radius: 10px;
        box-sizing: border-box;
    }

    /* ── USD equivalent & proof pills ───────────────────────── */
    .stage-usd { font-size: 0.74rem; margin-bottom: 10px; }
    .stage-proof-pills { gap: 6px; }
    .stage-pill {
        font-size: 0.68rem;
        padding: 5px 9px;
        border-radius: 14px;
    }

    /* ── Reset button ────────────────────────────────────────── */
    .reset-calc-btn { font-size: 0.74rem; padding: 6px 14px; margin-bottom: 16px; }

    /* ── Result section ──────────────────────────────────────── */
    .result-section { padding-top: 20px; }
    .result-inner {
        padding: 20px 16px 32px;
        gap: 20px;
    }
    .result-big-num {
        font-size: clamp(4.5rem, 22vw, 8rem);
    }
    .result-label { font-size: 0.74rem; }
    .result-humanity-line { font-size: 0.82rem; }
    .result-context-sentence { font-size: 0.82rem; }
    .result-data-source { font-size: 0.68rem; }

    /* Humanity bar */
    .result-humanity-bar { margin: 12px auto; }

    /* ── Insights ────────────────────────────────────────────── */
    .result-section .insights-grid { padding-left: 10px; }
    .insight-stat { font-size: 0.95rem; }
    .insight-desc { font-size: 0.75rem; }

    /* ── Mode bar (wp-modes) ─────────────────────────────────── */
    .wpm-wrap { margin-top: 20px; }
    .wpm-bar { gap: 3px; padding: 3px; border-radius: 10px 10px 0 0; }
    .wpm-btn {
        font-size: 0.65rem;
        padding: 7px 5px;
        min-width: 48px;
        max-width: none;
        border-radius: 7px;
    }
    .wpm-content { padding: 16px 12px; }
    .wpm-stat-val { font-size: 1.2rem; }
    .wpm-stat-lbl { font-size: 0.65rem; }
    .wpm-tier-name { font-size: 0.82rem; }
    .wpm-tier-desc { font-size: 0.74rem; }

    /* History mode */
    .wpm-hist-yr-val, .wpm-hist-pct { font-size: 1.5rem; }
    .wpm-hist-year-block, .wpm-hist-pct-block { padding: 10px 12px; }

    /* Geography mode */
    .wpm-geo-ratio-val { font-size: 1.3rem; }

    /* Life mode */
    .wpm-lr-val { font-size: 1rem; }

    /* Compare mode */
    .wpm-cmp-url { font-size: 0.68rem; }

    /* ── Action panel / income breakdown ─────────────────────── */
    .action-panel { padding: 0 4px; }
    .breakdown-grid { gap: 8px; }

    /* ── Home tools section ──────────────────────────────────── */
    .home-tools-section { padding: 32px 16px; }
    .home-tools-grid {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }
    .home-tools-section h2 { font-size: 1.4rem; }

    /* ── Historical slider section ───────────────────────────── */
    .historical-section { padding: 24px 16px; }
    .slider-container { padding: 0; }
}

/* Very small phones (≤ 360px) */
@media (max-width: 360px) {
    .stage-title { font-size: clamp(1.8rem, 8.5vw, 2.8rem) !important; }
    .wpm-btn { font-size: 0.6rem; padding: 6px 4px; min-width: 42px; }
    .result-big-num { font-size: clamp(3.8rem, 20vw, 6rem); }
}