@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    --xlri-navy: #003366;
    --xlri-gold: #c5a059;
    --xlri-accent: #e5e7eb;
}

body { font-family: 'Inter', sans-serif; }
h1, h2, h3, .font-serif { font-family: 'Playfair Display', serif; }
strong {font-weight: 700 !important;}

.hero-overlay {
    background: linear-gradient(90deg, rgba(0, 51, 102, 0.70) 0%, rgba(0, 51, 102, 0.6) 50%, rgba(0, 51, 102, 0.4) 100%);
}

.pedagogy-gradient-1 { background: linear-gradient(135deg, #4d9078, #366958); }
.pedagogy-gradient-2 { background: linear-gradient(135deg, #2e1a47, #1a0f29); }
.pedagogy-gradient-3 { background: linear-gradient(135deg, #0ea5e9, #0284c7); }
.pedagogy-gradient-4 { background: linear-gradient(135deg, #a3b11a, #849115); }

.phase-card:hover .phase-number { color: var(--xlri-gold); transform: scale(1.1); }

.highlight-card {
    transition: all 0.3s ease;
}
.highlight-card:hover {
    transform: translateY(-5px);
    border-color: var(--xlri-gold);
}
.phase-card {
    transition: all 0.3s ease;
    border-left: 2px solid rgba(197, 160, 89, 0.2);
}
.phase-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-left: 2px solid var(--xlri-gold);
}
.outcome-card {
    background: white;
    border-left: 4px solid var(--xlri-gold);
    padding: 1.5rem;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

.bonus-tag {
    background: linear-gradient(90deg, #c5a059, #a38141);
    color: #003366;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 2px;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 8px;
}
.single-input {font-size: 12px; color: #000; text-align: left; padding-left: 20px; position: relative;}
.single-input input[type=checkbox] {position: absolute; left: 0; top: 5px;}
.single-input a {color: #000;}

.ai-gradient {
    background: linear-gradient(135deg, #020b18 0%, #031b33 50%, #073b5c 100%);
}

/* Decorative glow behind the hands area */
.glow-effect {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 60%;
    height: 80%;
    background: radial-gradient(circle at center, rgba(14, 165, 233, 0.15) 0%, transparent 70%);
    pointer-events: none;
}

/* dropdown */
.dropdown-menu {
    position: absolute;
    z-index: 1000;
    display: none;
    min-width: 10rem;
    padding: 0.5rem 0;
    margin: 0;
    font-size: 1rem;
    color: #212529;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 0.25rem;
}
.dropdown-item {
    display: block;
    width: 100%;
    padding: 0.25rem 1rem;
    clear: both;
    font-weight: 400;
    color: #212529;
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
}