/* ============================================
   PRAXIS - Mobile-First Corporate Design System
   Target: iPhone 15 Pro Max (430px) first
   ============================================ */

/* CSS Custom Properties */
:root {
    /* Colors */
    --primary: #DC3545;
    --primary-dark: #A71D2A;
    --primary-light: #F8D7DA;

    --text-primary: #111827;
    --text-secondary: #374151;
    --text-muted: #4B5563;

    --bg-primary: #FFFFFF;
    --bg-secondary: #F3F4F6;
    --bg-dark: #0D1117;
    --bg-card: #FFFFFF;

    --border-color: #D1D5DB;
    --border-light: #E5E7EB;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.15);
    --shadow-glow: 0 0 30px rgba(220, 53, 69, 0.3);

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;

    /* Content Edge Spacing - controls inner margins from page boundaries */
    --content-edge: 30px;

    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    --transition-spring: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Typography */
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'SF Mono', 'Fira Code', monospace;

    /* Accessibility - Text Scaling */
    --text-scale: 1;
    --dim-level: 0;
}

/* Dark Mode */
[data-theme="dark"] {
    --text-primary: #F9FAFB;
    --text-secondary: #D1D5DB;
    --text-muted: #9CA3AF;

    --bg-primary: #0D1117;
    --bg-secondary: #161B22;
    --bg-card: #1C2128;

    --border-color: #30363D;
    --border-light: #21262D;
}

/* ============================================
   iPHONE SAFE AREA SUPPORT
   For iPhone 14 Pro, 15 Pro, and newer with Dynamic Island
   ============================================ */

/* Safe area inset fallbacks */
:root {
    --safe-area-inset-top: env(safe-area-inset-top, 0px);
    --safe-area-inset-right: env(safe-area-inset-right, 0px);
    --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-inset-left: env(safe-area-inset-left, 0px);
}

/* Ensure minimum touch target of 44x44px for iOS HIG compliance */
@media (max-width: 768px) {
    button,
    [role="button"],
    .btn,
    .nav-link,
    .menu-toggle,
    input[type="submit"],
    input[type="button"],
    a.pillar-card,
    .tool-card a {
        min-height: 44px;
        min-width: 44px;
    }
}

/* ============================================
   RESET & BASE
   ============================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    overflow-x: clip;
}

/* === ANCHOR SCROLL OFFSET ===
   Purpose: Ensures anchor-linked content appears below sticky header
   Applied globally to all elements with IDs (anchor targets)
   Standard: Content must align with its header, not hidden behind nav
   -------------------------------------------- */
:target {
    scroll-margin-top: calc(100px + var(--ticker-offset, 0px));
}

/* Specific anchor targets for better control */
[id^="section-"] {
    scroll-margin-top: calc(100px + var(--ticker-offset, 0px));
}

/* Glossary page anchors - offset for header + sticky search + sticky A-Z nav */
[id^="letter-"] {
    scroll-margin-top: calc(220px + var(--ticker-offset, 0px));
}

[id^="term-"] {
    scroll-margin-top: calc(220px + var(--ticker-offset, 0px));
}

body {
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--bg-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    padding: 0;
    overflow-x: clip;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

/* Skip Link */
.skip-link {
    position: absolute;
    top: -100%;
    left: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background: var(--primary);
    color: white;
    border-radius: var(--radius-sm);
    z-index: 9999;
}

.skip-link:focus {
    top: var(--space-md);
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-primary);
}

h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.125rem; }

p {
    color: var(--text-secondary);
}

.text-primary { color: var(--primary); }
.text-muted { color: var(--text-muted); }
.text-white { color: #ffffff; }
.text-gradient {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================
   LAYOUT
   ============================================ */
.container {
    width: 100%;
    max-width: 430px; /* iPhone 15 Pro Max */
    margin: 0 auto;
    padding: 0 var(--space-lg); /* 24px on mobile, scales up via breakpoints */
}

.section {
    padding: var(--space-xl) 0;
}

/* Consistent inter-section spacing: moderate top padding for visual separation above headings */
.section + .section {
    padding-top: var(--space-lg);
}

/* Hero followed by section */
.page-hero + .section {
    padding-top: var(--space-lg);
}

/* ============================================
   HEADER
   ============================================ */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: var(--space-md);
    padding-top: calc(var(--space-md) + var(--safe-area-inset-top));
    padding-left: calc(var(--space-md) + var(--safe-area-inset-left));
    padding-right: calc(var(--space-md) + var(--safe-area-inset-right));
    background: transparent;
    transition: background var(--transition-normal),
                backdrop-filter var(--transition-normal),
                top 0.35s ease;
}

.header.header--ticker-offset {
    top: var(--ticker-height, 30px);
}

.header.scrolled {
    background: rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .header.scrolled {
    background: rgba(13, 17, 23, 0.95);
}

/* Ethics Ticker Bar ---- */
/* Full-width bar above the header, pushes header down on scroll */
.ethics-ticker {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1001;
    background: linear-gradient(to right, #2a1015 0%, #150a0d 40%, #000000 100%);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    line-height: 1.4;
    padding: 8px 0;
    transform: translateY(-100%);
    transition: transform 0.35s ease;
    pointer-events: none;
    border-bottom: 2px solid #DC3545;
    overflow: hidden;
}

.ethics-ticker.ethics-ticker--visible {
    transform: translateY(0);
    pointer-events: auto;
}

.ethics-ticker__inner {
    display: flex;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--space-md);
    position: relative;
}

.ethics-ticker__label {
    display: inline-block;
    background: #fff;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.74rem;
    letter-spacing: 0.1em;
    padding: 3px 10px;
    border-radius: 2px;
    line-height: 1.3;
    flex-shrink: 0;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

.ethics-ticker__label-ai {
    color: #1a0a0e;
}

.ethics-ticker__label-ethics {
    color: #DC3545;
}

.ethics-ticker__eyeball {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #DC3545;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
    pointer-events: none;
}

.ethics-ticker__msg {
    flex: 1;
    text-align: right;
    padding: 0;
}

.ethics-ticker__cursor {
    font-weight: 400;
    color: #fff;
    animation: tickerBlink 0.7s step-end infinite;
}

@keyframes tickerBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

[data-theme="dark"] .ethics-ticker {
    background: linear-gradient(to right, #2a1015 0%, #150a0d 40%, #000000 100%);
    border-bottom-color: #DC3545;
}

body.menu-open .ethics-ticker {
    display: none;
}

/* Disable backdrop-filter when mobile menu is open —
   backdrop-filter creates a new containing block which breaks
   position:fixed on the child .nav.active element.
   Also force dark-theme nav styling so scrolled header doesn't
   apply light-mode colors to the dark mobile menu panel. */
body.menu-open .header {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(255, 255, 255, 0.98);
}

body.menu-open .header .nav-link {
    color: var(--text-primary);
}

/* Mobile nav accent (JS-injected, matches logo pattern) */
body.menu-open .header .nav-accent {
    color: var(--primary);
}

body.menu-open .header .logo {
    color: var(--text-primary);
    text-shadow: none;
}

body.menu-open .header .menu-toggle {
    background: rgba(0, 0, 0, 0.05);
}

body.menu-open .header .menu-toggle span {
    background: var(--text-primary);
}

body.menu-open .header .search-trigger {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.1);
    color: var(--text-primary);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--content-edge);
}

.logo {
    font-family: var(--font-mono);
    font-size: 1.125rem;
    font-weight: 700;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    transition: color var(--transition-normal), text-shadow var(--transition-normal);
}

.header.scrolled .logo {
    color: var(--text-primary);
    text-shadow: none;
}

.logo span,
.header-logo span {
    color: var(--primary);
}

.header-logo {
    font-family: var(--font-mono);
    font-size: 1.125rem;
    font-weight: 700;
    color: white;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.menu-toggle {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: var(--space-sm);
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
}

.menu-toggle span {
    width: 20px;
    height: 2px;
    background: white;
    border-radius: 1px;
    transition: all var(--transition-normal);
}

.header.scrolled .menu-toggle {
    background: var(--bg-secondary);
}

.header.scrolled .menu-toggle span {
    background: var(--text-primary);
}

.menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Header Badges */
.header-badges {
    display: none;
}

@media (min-width: 992px) {
    .header-badges {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px;
        margin-left: var(--space-md);
        max-width: 500px;
        justify-content: flex-end;
    }

    /* Push nav and badges to far right */
    .header-container .nav {
        margin-left: auto;
    }

    .header-badge-item {
        display: flex;
        align-items: center;
        font-size: 0.6rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        border-radius: 4px;
        overflow: hidden;
    }

    .header-badge-item .badge-label {
        padding: 0.35rem 0.5rem;
        background: rgba(255, 255, 255, 0.15);
        color: rgba(255, 255, 255, 0.9);
    }

    .header.scrolled .header-badge-item .badge-label {
        background: rgba(0, 0, 0, 0.08);
        color: var(--text-secondary);
    }

    .header-badge-item .badge-value {
        padding: 0.35rem 0.5rem;
        color: white;
        font-weight: 700;
    }

    .header-badge--ai .badge-value {
        background: linear-gradient(135deg, #DC3545 0%, #FF6B6B 100%);
    }

    .header-badge--udl .badge-value {
        background: linear-gradient(135deg, #06B6D4 0%, #0891B2 100%);
    }

    .header-badge--security .badge-value {
        background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%);
    }

    .header-badge--performance .badge-value {
        background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);
    }

    .header-badge--claude .badge-value {
        background: linear-gradient(135deg, #F97316 0%, #EA580C 100%);
    }
}

/* Medium screens - shrink badges more to allow wrapping */
@media (min-width: 992px) and (max-width: 1200px) {
    .header-badges {
        max-width: 400px;
        gap: 4px;
    }

    .header-badge-item {
        font-size: 0.55rem;
    }

    .header-badge-item .badge-label,
    .header-badge-item .badge-value {
        padding: 0.25rem 0.4rem;
    }
}

/* Desktop Navigation */
.nav-desktop {
    display: none;
}

/* Mobile Navigation */
.nav-mobile {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-primary);
    z-index: 99;
    padding: 80px var(--space-md) var(--space-md);
    transform: translateX(100%);
    opacity: 0;
    transition: transform var(--transition-normal),
                opacity var(--transition-normal);
}

[data-theme="dark"] .nav-mobile {
    background: var(--bg-dark);
}

.nav-mobile.active {
    transform: translateX(0);
    opacity: 1;
}

.nav-mobile a {
    display: block;
    padding: var(--space-md) 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-light);
    transition: color var(--transition-fast);
}

.nav-mobile a:hover,
.nav-mobile a.active {
    color: var(--primary);
}

/* Mobile Accessibility Accordion */
.nav-item.mobile-only {
    display: none;
}

@media (max-width: 991px) {
    .nav-item.mobile-only {
        display: block;
        border-top: 1px solid var(--border-light);
        margin-top: var(--space-md);
        padding-top: var(--space-md);
    }

    .nav-accordion-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: var(--space-sm) 0;
        background: none;
        border: none;
        font-size: 1rem;
        font-weight: 600;
        color: var(--text-primary);
        cursor: pointer;
    }

    .accordion-icon {
        width: 10px;
        height: 10px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg);
        transition: transform var(--transition-fast);
    }

    .nav-accordion-toggle[aria-expanded="true"] .accordion-icon {
        transform: rotate(-135deg);
    }

    .nav-accordion-content {
        max-height: 0;
        overflow: hidden;
        transition: max-height var(--transition-normal);
    }

    .nav-accordion-toggle[aria-expanded="true"] + .nav-accordion-content {
        max-height: 400px;
    }

    .mobile-badges {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        padding: var(--space-sm) 0 var(--space-md);
    }

    .mobile-badge {
        display: flex;
        align-items: center;
        font-size: 0.7rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        border-radius: 4px;
        overflow: hidden;
        width: fit-content;
    }

    .mobile-badge .badge-label {
        padding: 0.35rem 0.5rem;
        background: rgba(0, 0, 0, 0.08);
        color: var(--text-secondary);
    }

    .mobile-badge .badge-value {
        padding: 0.35rem 0.5rem;
        color: white;
        font-weight: 700;
    }

    .mobile-badge--ai .badge-value {
        background: linear-gradient(135deg, #DC3545 0%, #FF6B6B 100%);
    }

    .mobile-badge--udl .badge-value {
        background: linear-gradient(135deg, #06B6D4 0%, #0891B2 100%);
    }

    .mobile-badge--security .badge-value {
        background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%);
    }

    .mobile-badge--performance .badge-value {
        background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);
    }

    .mobile-badge--claude .badge-value {
        background: linear-gradient(135deg, #F97316 0%, #EA580C 100%);
    }
}

/* ============================================
   CONTENT AREA BADGES
   Base styling for badge component
   ============================================ */
.content-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin: 1rem 0;
}

.content-badge {
    display: flex;
    align-items: center;
    font-size: 0.7rem;
    border-radius: 4px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.1);
}

.content-badge .badge-label {
    padding: 0.35rem 0.5rem;
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
}

/* Main page hero - white labels with black text */
.hero .content-badge .badge-label {
    background: #ffffff;
    color: #1f2937;
}

.content-badge .badge-value {
    padding: 0.35rem 0.5rem;
    color: white;
    font-weight: 700;
}

.content-badge--ai .badge-value {
    background: linear-gradient(135deg, #DC3545 0%, #FF6B6B 100%);
}

.content-badge--udl .badge-value {
    background: linear-gradient(135deg, #06B6D4 0%, #0891B2 100%);
}

.content-badge--security .badge-value {
    background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%);
}

.content-badge--performance .badge-value {
    background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);
}

.content-badge--claude .badge-value {
    background: linear-gradient(135deg, #F97316 0%, #EA580C 100%);
}

/* GitHub Community Badge - Grey/Black with white text */
.content-badge--github .badge-label {
    background: #6B7280;
    color: white;
}

.content-badge--github .badge-value {
    background: #1F2937;
    color: white;
}

/* Badges in white content sections - centered with even spacing above and below
   -------------------------------------------------------------------- */
.section .content-badges {
    justify-content: flex-start;
    gap: 0.5rem;
    margin-top: 0;
    margin-bottom: var(--space-xl);
}

.section .content-badge {
    background: #374151;
}

.section .content-badge .badge-label {
    background: #374151;
}

/* Responsive adjustments for content badges */
@media (max-width: 768px) {
    .content-badges {
        gap: 0.4rem;
    }

    .content-badge {
        font-size: 0.6rem;
    }

    .content-badge .badge-label,
    .content-badge .badge-value {
        padding: 0.25rem 0.4rem;
    }

    .section .content-badges {
        margin-top: 0;
        margin-bottom: var(--space-md);
    }
}

/* ==============================================
   BADGE LIGHTBOX
   Purpose: Modal popup with badge information
   Security: External stylesheet only (CSP compliant)
   ============================================== */

/* Smoked Glass Overlay
   -------------------------------------------- */
.badge-lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.badge-lightbox-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Lightbox Modal Container
   -------------------------------------------- */
.badge-lightbox {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    max-width: 480px;
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

.badge-lightbox.active {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

/* Lightbox Header
   -------------------------------------------- */
.badge-lightbox-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.badge-lightbox-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
}

.badge-lightbox-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 0.875rem;
}

/* Badge-specific icon backgrounds */
.badge-lightbox-icon--ai {
    background: linear-gradient(135deg, #DC3545 0%, #FF6B6B 100%);
}

.badge-lightbox-icon--udl {
    background: linear-gradient(135deg, #06B6D4 0%, #0891B2 100%);
}

.badge-lightbox-icon--security {
    background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%);
}

.badge-lightbox-icon--performance {
    background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);
}

.badge-lightbox-icon--claude {
    background: linear-gradient(135deg, #F97316 0%, #EA580C 100%);
}

.badge-lightbox-icon--github {
    background: linear-gradient(135deg, #6B7280 0%, #1F2937 100%);
}

/* Close Button
   -------------------------------------------- */
.badge-lightbox-close {
    width: 36px;
    height: 36px;
    border: none;
    background: #f3f4f6;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.2s ease;
    flex-shrink: 0;
}

.badge-lightbox-close:hover {
    background: #e5e7eb;
    transform: scale(1.05);
}

.badge-lightbox-close:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.badge-lightbox-close svg {
    width: 18px;
    height: 18px;
    stroke: #6b7280;
    stroke-width: 2;
}

/* Lightbox Content
   -------------------------------------------- */
.badge-lightbox-content {
    padding: 1.5rem;
}

.badge-lightbox-description {
    font-size: 1rem;
    line-height: 1.7;
    color: #374151;
    margin: 0 0 1rem 0;
}

.badge-lightbox-description:last-child {
    margin-bottom: 0;
}

.badge-lightbox-highlight {
    font-weight: 600;
    color: #1f2937;
}

/* Feature List in Lightbox
   -------------------------------------------- */
.badge-lightbox-features {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0 0;
}

.badge-lightbox-features li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
    font-size: 0.9375rem;
    color: #4b5563;
    line-height: 1.5;
}

.badge-lightbox-features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #22C55E;
    font-weight: 700;
}

.badge-lightbox-features li:last-child {
    margin-bottom: 0;
}

/* Lightbox Link Button
   -------------------------------------------- */
.badge-lightbox-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding: 0.75rem 1.25rem;
    background: #1F2937;
    color: white;
    text-decoration: none;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.9375rem;
    transition: background 0.2s ease, transform 0.2s ease;
}

.badge-lightbox-link:hover {
    background: #374151;
    transform: translateY(-2px);
}

.badge-lightbox-link:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.badge-lightbox-link svg {
    width: 1rem;
    height: 1rem;
    stroke-width: 2;
}

/* Make badges clickable when lightbox is enabled
   -------------------------------------------- */
.content-badge[data-badge-type] {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.content-badge[data-badge-type]:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.content-badge[data-badge-type]:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Responsive adjustments for lightbox
   -------------------------------------------- */
@media (max-width: 480px) {
    .badge-lightbox {
        width: 95%;
        max-height: 90vh;
    }

    .badge-lightbox-header {
        padding: 1rem 1.25rem;
    }

    .badge-lightbox-title {
        font-size: 1rem;
    }

    .badge-lightbox-icon {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }

    .badge-lightbox-content {
        padding: 1.25rem;
    }

    .badge-lightbox-description {
        font-size: 0.9375rem;
    }
}

/* === BACK TO TOP BAR ===
   Purpose: Full-width static bar for scrolling back to top
   Security: External stylesheet only (CSP compliant)
   -------------------------------------------- */
.back-to-top-bar {
    width: 100%;
    background: #ffffff;
    border: none;
    border-radius: 0;
    margin: 0;
    padding: 0.38rem 0;
    padding-bottom: calc(0.38rem + var(--safe-area-inset-bottom));
    outline: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9994;
    transition: transform 0.3s ease, opacity 0.3s ease, background 0.2s ease;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    min-height: 44px;
    /* Hidden by default - slides up when scrolling */
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
    border-top: none;
    border-bottom: none;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

/* Show when scrolling */
.back-to-top-bar.is-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

/* Docked state when at bottom of page */
.back-to-top-bar.is-docked {
    position: static;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    box-shadow: none;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.back-to-top-bar:hover {
    background: #f5f5f5;
}

.back-to-top-bar .back-to-top-arrow {
    position: absolute;
    left: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.back-to-top-bar .back-to-top-arrow svg {
    width: 16px;
    height: 16px;
    stroke: #1a1a1a;
}

.back-to-top-bar .back-to-top-text {
    color: #1a1a1a;
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Hide the old floating button created by JS */
.back-to-top {
    display: none !important;
}

/* ============================================
   HERO SECTION
   ============================================ */
.hero {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 100px var(--space-md) var(--space-2xl);
    background: linear-gradient(135deg, #0D1117 0%, #161B22 100%);
    position: relative;
    overflow: hidden;
}

/* Static Background Gradient */
.hero-bg {
    position: absolute;
    inset: 0;
    opacity: 0.15;
    background:
        radial-gradient(circle at 20% 30%, var(--primary) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, #000000 0%, transparent 50%);
}

/* Neural Network Canvas */
.neural-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: auto;
    z-index: 1;
}

/* Hero Neural Background Canvas */
.hero-neural-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    opacity: 0.4;
}

/* Floating Particles */
.hero-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--primary);
    border-radius: 50%;
    opacity: 0.3;
    animation: particleFloat 15s linear infinite;
}

.particle:nth-child(1) { left: 10%; animation-delay: 0s; animation-duration: 12s; }
.particle:nth-child(2) { left: 20%; animation-delay: 2s; animation-duration: 14s; }
.particle:nth-child(3) { left: 35%; animation-delay: 4s; animation-duration: 16s; }
.particle:nth-child(4) { left: 50%; animation-delay: 1s; animation-duration: 13s; }
.particle:nth-child(5) { left: 65%; animation-delay: 3s; animation-duration: 15s; }
.particle:nth-child(6) { left: 80%; animation-delay: 5s; animation-duration: 11s; }
.particle:nth-child(7) { left: 90%; animation-delay: 2.5s; animation-duration: 17s; }

@keyframes particleFloat {
    0% {
        transform: translateY(100vh) scale(0);
        opacity: 0;
    }
    10% {
        opacity: 0.3;
    }
    90% {
        opacity: 0.3;
    }
    100% {
        transform: translateY(-100px) scale(1);
        opacity: 0;
    }
}

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

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-md);
    background: rgba(220, 53, 69, 0.15);
    border: 1px solid rgba(220, 53, 69, 0.3);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-md);
    animation: badgePulse 3s ease-in-out infinite;
}

@keyframes badgePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.3); }
    50% { box-shadow: 0 0 20px 5px rgba(220, 53, 69, 0.15); }
}

.hero-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--primary);
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}

.hero-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: white;
    line-height: 1.1;
    margin-bottom: var(--space-md);
}

.hero-title .highlight {
    background: linear-gradient(135deg, var(--primary) 0%, #FF6B6B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Typing Cursor Animation
   -------------------------------------------- */
.typing-cursor {
    display: inline-block;
    color: white;
    font-weight: 400;
    animation: blink-cursor 0.7s step-end infinite;
    margin-left: 2px;
}

@keyframes blink-cursor {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.typing-cursor.hidden {
    display: none;
}

/* Button Pulse Animation
   -------------------------------------------- */
/* Auto-shine sweep — diagonal white streak across button */
@keyframes btn-shine-sweep {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Trigger shine via class — overrides transition with animation */
.btn-primary.btn-shine::after {
    animation: btn-shine-sweep 0.6s ease forwards;
    transition: none;
}

.btn-secondary.btn-shine::after {
    animation: btn-shine-sweep 0.6s ease forwards;
    transition: none;
}

/* Dark gradient animation removed — replaced by red-to-black standard with neural network canvases */

/* Applied to dark elements for subtle motion */
.dark-gradient-animated {
    background: linear-gradient(to right, #2a1015 0%, #150a0d 50%, #0f0a0b 100%);
}

/* Note: Callout tip animations are defined in the CALLOUT section below */

.hero-subtitle {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: var(--space-lg);
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

/* Hero Action Buttons Container */
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    justify-content: center;
}

/* Hero CTA */
.hero-cta {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--radius-md);
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.btn-primary {
    background: var(--primary);
    color: white;
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
}

.btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

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

/* Button Shine Effect — diagonal streak */
.btn-primary::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, transparent 25%, rgba(255,255,255,0.35) 45%, rgba(255,255,255,0.35) 55%, transparent 75%);
    transition: left 0.5s ease;
}

.btn-primary:hover::after {
    left: 100%;
}

/* Secondary Button - light background default */
.btn-secondary {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.25);
}

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

/* Secondary Button Shine Effect — diagonal streak */
.btn-secondary::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, transparent 25%, rgba(255,255,255,0.25) 45%, rgba(255,255,255,0.25) 55%, transparent 75%);
    transition: left 0.5s ease;
}

.btn-secondary:hover::after {
    left: 100%;
}

/* Secondary Button - dark context overrides */
.hero .btn-secondary,
.cta-card .btn-secondary,
.cta-corporate--dark .btn-secondary,
.cta-corporate--gradient .btn-secondary,
.benchmark-section--dark .btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.08);
}

.hero .btn-secondary:hover,
.cta-card .btn-secondary:hover,
.cta-corporate--dark .btn-secondary:hover,
.cta-corporate--gradient .btn-secondary:hover,
.benchmark-section--dark .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
}

.btn-outline {
    background: transparent;
    color: var(--text-primary);
    border: 2px solid var(--border-color);
}

.btn-outline:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
}

.btn-ghost:hover {
    color: var(--primary);
    background: rgba(220, 53, 69, 0.05);
}

.btn-sm {
    padding: var(--space-sm) var(--space-md);
    font-size: 0.875rem;
}

.btn-lg {
    padding: var(--space-lg) var(--space-xl);
    font-size: 1.125rem;
}

.btn-icon {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: var(--radius-md);
}

.btn-full {
    width: 100%;
}

/* ============================================
   CARDS
   ============================================ */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    transition: all var(--transition-normal);
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}

/* Card Glow Effect on Hover */
.card-glow:hover {
    box-shadow:
        var(--shadow-lg),
        0 0 40px rgba(220, 53, 69, 0.1);
}

.card-icon {
    width: 48px;
    height: 48px;
    background: rgba(220, 53, 69, 0.1);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-md);
    transition: all var(--transition-normal);
}

.card:hover .card-icon {
    background: var(--primary);
    transform: scale(1.1);
}

.card-icon svg,
.card-icon img {
    width: 24px;
    height: 24px;
    transition: filter var(--transition-normal);
}

.card:hover .card-icon svg,
.card:hover .card-icon img {
    filter: brightness(0) invert(1);
}

.card-title {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: var(--space-sm);
}

.card-desc {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.card-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    margin-top: var(--space-md);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--primary);
}

.card-link svg {
    width: 16px;
    height: 16px;
    transition: transform var(--transition-fast);
}

.card:hover .card-link svg {
    transform: translateX(4px);
}

/* Feature Cards Grid - wrap to fit */
.cards-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    justify-content: center;
}

.cards-grid > * {
    flex: 1 1 250px;
    min-width: 200px;
    max-width: 350px;
}

/* ============================================
   SECTION HEADERS
   ============================================ */
.section-header {
    margin-bottom: var(--space-xl);
}

.section-label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-sm);
}

.section-title {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: var(--space-sm);
}

.section-title--sm {
    font-size: 1.25rem;
    font-weight: 700;
    margin-top: var(--space-2xl);
    margin-bottom: var(--space-xs);
}

.section-subtitle--sm {
    font-size: 0.9375rem;
    margin-bottom: var(--space-lg);
}

.section-desc {
    font-size: 0.9375rem;
    color: var(--text-secondary);
}

/* ============================================
   STATS BAR
   ============================================ */
.stats-bar {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

.stat-item {
    text-align: center;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--primary);
    font-variant-numeric: tabular-nums;
}

.stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
    padding: var(--space-2xl) var(--space-md);
    padding-bottom: calc(var(--space-2xl) + var(--safe-area-inset-bottom));
    padding-left: calc(var(--space-md) + var(--safe-area-inset-left));
    padding-right: calc(var(--space-md) + var(--safe-area-inset-right));
    background: linear-gradient(to right, #2a1015 0%, #150a0d 40%, #000000 100%);
    color: white;
    position: relative;
    overflow: hidden;
    margin: 0;
    border: none;
}

.footer > .container {
    position: relative;
    z-index: 1;
}

.footer .neural-canvas-secondary,
.footer-neural-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0.5;
    -webkit-mask-image: linear-gradient(to right, transparent 15%, rgba(0,0,0,0.3) 40%, rgba(0,0,0,1) 70%);
    mask-image: linear-gradient(to right, transparent 15%, rgba(0,0,0,0.3) 40%, rgba(0,0,0,1) 70%);
}

.footer-logo {
    font-family: var(--font-mono);
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: var(--space-md);
}

.footer-logo span {
    color: var(--primary);
}

.footer-tagline {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: var(--space-xl);
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
    justify-content: center;
}

.footer-links > * {
    flex: 1 1 120px;
    min-width: 100px;
    max-width: 180px;
}

.footer-col h4 {
    font-size: 0.875rem;
    font-weight: 600;
    color: white;
    margin-bottom: var(--space-md);
}

.footer-col a {
    display: block;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
    padding: var(--space-xs) 0;
    transition: color var(--transition-fast);
}

.footer-col a:hover {
    color: var(--primary);
}

.footer-bottom {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-md);
    margin: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: none;
    text-align: center;
}

.footer-bottom p {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
}

/* Footer Quote
   -------------------------------------------- */
.footer-quote {
    margin-top: var(--space-md);
    font-size: 0.8125rem;
    font-style: italic;
    color: rgba(255, 255, 255, 0.5);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.footer-quote-author {
    font-style: normal;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
}

/* Footer Policies
   -------------------------------------------- */
.footer-policies {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding-top: var(--space-md);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: var(--space-md);
}

.footer-policies a {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8125rem;
    text-decoration: none;
    transition: color 0.2s;
}

.footer-policies a:hover {
    color: rgba(255, 255, 255, 0.8);
}

/* ============================================
   ANIMATIONS
   ============================================ */

/* Fade In Up */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger Children */
.stagger-children > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.stagger-children.visible > *:nth-child(1) { transition-delay: 0.1s; }
.stagger-children.visible > *:nth-child(2) { transition-delay: 0.2s; }
.stagger-children.visible > *:nth-child(3) { transition-delay: 0.3s; }
.stagger-children.visible > *:nth-child(4) { transition-delay: 0.4s; }
.stagger-children.visible > *:nth-child(5) { transition-delay: 0.5s; }
.stagger-children.visible > *:nth-child(6) { transition-delay: 0.6s; }

.stagger-children.visible > * {
    opacity: 1;
    transform: translateY(0);
}

/* Scale In */
.scale-in {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.scale-in.visible {
    opacity: 1;
    transform: scale(1);
}

/* Slide In */
.slide-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.slide-right {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.slide-left.visible,
.slide-right.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Number Counter Animation */
.counter {
    font-variant-numeric: tabular-nums;
}

/* Shimmer Loading Effect */
.shimmer {
    background: linear-gradient(
        90deg,
        var(--bg-secondary) 0%,
        var(--bg-card) 50%,
        var(--bg-secondary) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================
   TOOL PAGES - COMMON STYLES
   ============================================ */
.page-hero {
    padding: 100px var(--space-md) var(--space-xl);
    background: linear-gradient(135deg, #0D1117 0%, #161B22 100%);
    position: relative;
    overflow: hidden;
}

/* Page Hero Background Gradient Overlay - matches main hero */
.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.15;
    background:
        radial-gradient(circle at 20% 30%, var(--primary) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, #000000 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.page-hero .neural-canvas,
.page-hero-neural-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    opacity: 0.5;
}

.page-hero .container {
    position: relative;
    z-index: 2;
}

.page-hero h1,
.page-hero__title {
    color: #fff;
}

.page-title {
    font-size: 1.75rem;
    font-weight: 800;
    margin-bottom: var(--space-sm);
}

.page-desc {
    color: var(--text-secondary);
}

.page-content {
    padding: var(--space-xl) var(--space-md);
}

/* Breadcrumb */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
    font-size: 0.875rem;
}

.breadcrumb a {
    color: var(--text-muted);
    transition: color var(--transition-fast);
}

.breadcrumb a:hover {
    color: var(--primary);
}

.breadcrumb-sep {
    color: var(--text-muted);
}

.breadcrumb-current {
    color: var(--text-primary);
    font-weight: 500;
}

/* Input Areas */
.input-group {
    margin-bottom: var(--space-lg);
}

.input-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

.input-textarea {
    width: 100%;
    min-height: 150px;
    padding: var(--space-md);
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    resize: vertical;
    transition: border-color var(--transition-fast),
                box-shadow var(--transition-fast);
}

.input-textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.1);
}

.input-textarea::placeholder {
    color: var(--text-muted);
}

/* Score Display */
.score-display {
    text-align: center;
    padding: var(--space-xl);
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-lg);
    position: relative;
    overflow: hidden;
}

.score-display::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(220, 53, 69, 0.1) 0%, transparent 70%);
    animation: scoreGlow 3s ease-in-out infinite alternate;
}

@keyframes scoreGlow {
    0% { opacity: 0.5; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1.2); }
}

.score-value {
    position: relative;
    font-size: 4rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
    margin-bottom: var(--space-sm);
}

.score-label {
    position: relative;
    font-size: 0.875rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Sub-scores */
.sub-scores {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.sub-score {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.sub-score-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.875rem;
}

.sub-score-bar {
    flex: 1;
    height: 6px;
    background: var(--border-color);
    border-radius: var(--radius-full);
    margin: 0 var(--space-md);
    overflow: hidden;
}

.sub-score-fill {
    height: 100%;
    background: var(--primary);
    border-radius: var(--radius-full);
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.sub-score-value {
    font-weight: 700;
    color: var(--primary);
    min-width: 40px;
    text-align: right;
    font-size: 0.875rem;
}

/* Feedback Cards */
.feedback-card {
    padding: var(--space-lg);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border-left: 4px solid var(--primary);
    margin-bottom: var(--space-md);
}

.feedback-card h4 {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-sm);
}

.feedback-card p {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.feedback-card.success {
    border-left-color: #10B981;
}

.feedback-card.success h4 {
    color: #10B981;
}

.feedback-card.warning {
    border-left-color: #F59E0B;
}

.feedback-card.warning h4 {
    color: #F59E0B;
}

/* ============================================
   QUIZ STYLES
   ============================================ */
.quiz-container {
    padding: var(--space-lg);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

.quiz-progress {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-xl);
}

.quiz-progress-bar {
    flex: 1;
    height: 6px;
    background: var(--border-color);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.quiz-progress-fill {
    height: 100%;
    background: var(--primary);
    border-radius: var(--radius-full);
    transition: width var(--transition-normal);
}

.quiz-progress-text {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-muted);
}

.quiz-question {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-lg);
    line-height: 1.4;
}

.quiz-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.quiz-option {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.quiz-option:hover {
    border-color: var(--primary);
    background: rgba(220, 53, 69, 0.05);
}

.quiz-option.selected {
    border-color: var(--primary);
    background: rgba(220, 53, 69, 0.1);
}

.quiz-option.correct {
    border-color: #10B981;
    background: rgba(16, 185, 129, 0.1);
}

.quiz-option.incorrect {
    border-color: #EF4444;
    background: rgba(239, 68, 68, 0.1);
}

.quiz-option-marker {
    width: 24px;
    height: 24px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all var(--transition-fast);
}

.quiz-option.selected .quiz-option-marker {
    border-color: var(--primary);
    background: var(--primary);
}

.quiz-option-text {
    font-size: 0.9375rem;
    color: var(--text-primary);
}

.quiz-explanation {
    margin-top: var(--space-lg);
    padding: var(--space-lg);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    animation: fadeIn 0.3s ease;
}

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

.quiz-explanation h4 {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

.quiz-explanation p {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* ============================================
   CHECKLIST STYLES
   ============================================ */
.checklist {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.checklist-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.checklist-item:hover {
    border-color: var(--primary);
}

.checklist-item.checked {
    background: rgba(16, 185, 129, 0.05);
    border-color: #10B981;
}

.checklist-checkbox {
    width: 24px;
    height: 24px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all var(--transition-fast);
}

.checklist-item.checked .checklist-checkbox {
    background: #10B981;
    border-color: #10B981;
}

.checklist-checkbox svg {
    width: 14px;
    height: 14px;
    color: white;
    opacity: 0;
    transform: scale(0.5);
    transition: all var(--transition-spring);
}

.checklist-item.checked .checklist-checkbox svg {
    opacity: 1;
    transform: scale(1);
}

.checklist-content h4 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-xs);
}

.checklist-content p {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

/* ============================================
   PATTERNS LIBRARY
   ============================================ */
.pattern-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--space-md);
    transition: all var(--transition-normal);
}

.pattern-card:hover {
    box-shadow: var(--shadow-md);
}

.pattern-header {
    padding: var(--space-lg);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pattern-header-content {
    flex: 1;
}

.pattern-name {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-xs);
}

.pattern-use-case {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.pattern-toggle {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--transition-fast);
}

.pattern-card.open .pattern-toggle {
    transform: rotate(180deg);
}

.pattern-body {
    padding: var(--space-lg);
    display: none;
}

.pattern-card.open .pattern-body {
    display: block;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.pattern-section {
    margin-bottom: var(--space-md);
}

.pattern-section:last-child {
    margin-bottom: 0;
}

.pattern-section-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-sm);
}

.pattern-skeleton {
    padding: var(--space-md);
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--text-secondary);
    white-space: pre-wrap;
}

/* ============================================
   LEARN / CONTENT PAGES
   ============================================ */
.content-block {
    margin-bottom: var(--space-lg);
}

.content-block h2 {
    font-size: 1.25rem;
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 2px solid var(--border-light);
}

.content-block h3 {
    font-size: 1.125rem;
    margin-bottom: var(--space-sm);
    color: var(--text-primary);
}

.content-block p {
    margin-bottom: var(--space-md);
    line-height: 1.7;
}

.content-block ul,
.content-block ol {
    margin-bottom: var(--space-md);
    padding-left: var(--space-lg);
}

.content-block li {
    color: var(--text-secondary);
    margin-bottom: var(--space-sm);
    line-height: 1.6;
}

.callout {
    padding: var(--space-lg);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--primary);
    margin: var(--space-lg) 0;
}

.callout-title {
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

.callout p {
    margin-bottom: 0;
}

/* Callout Tips - Alternating Color Pattern
   Pattern: Red → White → Black (repeating)
   -------------------------------------------- */

/* Default/Base: Black background with animated gradient (3rd in pattern) */
.callout.tip {
    border-left-color: #DC3545;
    background: linear-gradient(to right, #2a1015 0%, #150a0d 50%, #0f0a0b 100%);
    color: #e5e7eb;
}

.callout.tip p {
    color: #e5e7eb;
}

.callout.tip .callout-title {
    color: #ffffff;
}

.callout.tip .highlight,
.callout.tip strong {
    color: #DC3545;
    font-weight: 700;
}

/* 1st in pattern (1st, 4th, 7th...): Solid Red - no animation */
.callout.tip:nth-of-type(3n+1) {
    background: #DC3545;
    background-size: auto;
    animation: none;
    border-left-color: #b91c1c;
    color: #ffffff;
}

.callout.tip:nth-of-type(3n+1) p {
    color: rgba(255, 255, 255, 0.9);
}

.callout.tip:nth-of-type(3n+1) .callout-title {
    color: #ffffff;
}

.callout.tip:nth-of-type(3n+1) .highlight,
.callout.tip:nth-of-type(3n+1) strong {
    color: #ffffff;
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

/* 2nd in pattern (2nd, 5th, 8th...): White background - no animation */
.callout.tip:nth-of-type(3n+2) {
    background: #ffffff;
    background-size: auto;
    animation: none;
    border-left-color: #DC3545;
    color: #1a1a1a;
}

.callout.tip:nth-of-type(3n+2) p {
    color: #4b5563;
}

.callout.tip:nth-of-type(3n+2) .callout-title {
    color: #1a1a1a;
}

.callout.tip:nth-of-type(3n+2) .highlight,
.callout.tip:nth-of-type(3n+2) strong {
    color: #b91c1c;
    font-weight: 700;
}

/* 3rd in pattern (3rd, 6th, 9th...): Black background - default styles apply */

/* === SECTION TIP (Full-width divider banners between sections) === */
.section-tip {
    background: linear-gradient(to right, #2a1015 0%, #150a0d 40%, #000000 100%);
    padding: var(--space-xl) 0;
    position: relative;
    overflow: hidden;
}

.section-tip::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at 15% 50%, rgba(220, 53, 69, 0.12) 0%, transparent 50%);
    pointer-events: none;
}

/* Neural network canvas — visible only on the right/black side (shared dark section standard) */
.section-tip-neural-bg,
.dark-section-neural-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.5;
    -webkit-mask-image: linear-gradient(to right, transparent 15%, rgba(0,0,0,0.3) 40%, rgba(0,0,0,1) 70%);
    mask-image: linear-gradient(to right, transparent 15%, rgba(0,0,0,0.3) 40%, rgba(0,0,0,1) 70%);
}

.section-tip__content {
    display: flex;
    align-items: flex-start;
    gap: var(--space-lg);
    position: relative;
    z-index: 1;
}

.section-tip__icon {
    flex-shrink: 0;
    width: 65px;
    height: 65px;
    background: rgba(255, 255, 255, 0.85);
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    position: relative;
    filter: drop-shadow(0 0 12px rgba(220, 53, 69, 0.5)) drop-shadow(0 0 30px rgba(220, 53, 69, 0.25));
    animation: tipGlow 3s ease-in-out infinite;
}

/* Red inner fill — creates white border effect like a stop sign */
.section-tip__icon::before {
    content: '';
    position: absolute;
    inset: 3px;
    background: #DC3545;
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    z-index: 0;
}

@keyframes tipGlow {
    0%, 100% {
        filter: drop-shadow(0 0 12px rgba(220, 53, 69, 0.5)) drop-shadow(0 0 30px rgba(220, 53, 69, 0.25));
    }
    50% {
        filter: drop-shadow(0 0 20px rgba(220, 53, 69, 0.7)) drop-shadow(0 0 45px rgba(220, 53, 69, 0.35));
    }
}

.section-tip__icon svg {
    width: 32px;
    height: 32px;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.5));
}

.section-tip__title {
    color: #ffffff;
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: var(--space-xs);
}

.section-tip__text p {
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    line-height: 1.7;
    font-size: 0.975rem;
}

.section-tip__text strong {
    color: #f87171;
    font-weight: 700;
}
@media (max-width: 767px) {
    .section-tip__content {
        flex-direction: column;
        gap: var(--space-md);
    }

    .section-tip__icon {
        width: 54px;
        height: 54px;
    }

    .section-tip__icon svg {
        width: 27px;
        height: 27px;
    }
}
/* /SECTION TIP ---- */

/* === KNOWLEDGE CHECK === */
.knowledge-check {
    background: linear-gradient(to right, #2a1015 0%, #150a0d 40%, #000000 100%);
    padding: var(--space-xl) 0;
    position: relative;
    overflow: hidden;
}

.knowledge-check::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at 15% 50%, rgba(220, 53, 69, 0.12) 0%, transparent 50%);
    pointer-events: none;
}

.knowledge-check__header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    position: relative;
    z-index: 1;
    margin-bottom: var(--space-md);
}

.knowledge-check__title {
    color: #ffffff;
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0;
}

.knowledge-check__progress {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    margin-left: auto;
}

.knowledge-check__questions {
    position: relative;
    z-index: 1;
}

.knowledge-check__question {
    display: none;
}

.knowledge-check__question--active {
    display: block;
}

.knowledge-check__question-text {
    color: #ffffff;
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: var(--space-sm);
}

.knowledge-check__options {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.knowledge-check__option {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.925rem;
    text-align: left;
    cursor: pointer;
    transition: background 0.3s, border-color 0.3s, color 0.3s, opacity 0.3s;
    font-family: inherit;
    line-height: 1.5;
}

.knowledge-check__option:hover:not([data-answered]) {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.3);
}

.knowledge-check__option:focus-visible {
    outline: 2px solid #DC3545;
    outline-offset: 2px;
}

.knowledge-check__option[data-answered] {
    cursor: default;
    opacity: 0.5;
}

.knowledge-check__option--correct {
    background: rgba(34, 197, 94, 0.25);
    border-color: rgba(34, 197, 94, 0.6);
    color: #86efac;
    opacity: 1;
}

.knowledge-check__option--incorrect {
    background: rgba(239, 68, 68, 0.25);
    border-color: rgba(239, 68, 68, 0.5);
    color: #fca5a5;
    opacity: 1;
}

.knowledge-check__feedback {
    margin-top: var(--space-sm);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.5;
    min-height: 1.5em;
    opacity: 0;
    transition: opacity 0.3s;
}

.knowledge-check__feedback--visible {
    opacity: 1;
}

.knowledge-check__feedback--correct {
    color: #86efac;
}

.knowledge-check__feedback--incorrect {
    color: #fca5a5;
}

.knowledge-check__score {
    position: relative;
    z-index: 1;
    text-align: center;
    display: none;
}

.knowledge-check__score--visible {
    display: block;
}

.knowledge-check__score-text {
    color: #ffffff;
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: var(--space-xs);
}

.knowledge-check__score-detail {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    margin: 0;
}

.knowledge-check__retry {
    margin-top: var(--space-sm);
    background: #DC3545;
    border: none;
    border-radius: var(--radius-sm);
    padding: 0.5rem 1.5rem;
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s;
}

.knowledge-check__retry:hover {
    background: #A71D2A;
}

@media (max-width: 767px) {
    .knowledge-check__option {
        padding: 0.625rem 0.875rem;
        font-size: 0.875rem;
    }
}
/* /KNOWLEDGE CHECK ---- */

.callout.warning {
    border-left-color: #F59E0B;
    background: rgba(245, 158, 11, 0.05);
}

/* ============================================
   RESPONSIVE - TABLET & UP
   ============================================ */
@media (min-width: 768px) {
    .container {
        max-width: 720px;
        padding: 0 var(--content-edge);
    }

    h1 { font-size: 2.5rem; }
    h2 { font-size: 2rem; }

    .hero-title {
        font-size: 3.5rem;
    }

    .hero-subtitle {
        font-size: 1.125rem;
        max-width: 800px;
    }

    .hero-cta {
        flex-direction: row;
        justify-content: center;
    }

    .cards-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .stats-bar {
        grid-template-columns: repeat(4, 1fr);
    }

    .footer-links {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ============================================
   RESPONSIVE - DESKTOP
   ============================================ */
@media (min-width: 1024px) {
    .container {
        max-width: 1200px;
        padding: 0 var(--content-edge);
    }

    .header {
        padding: var(--space-md) var(--content-edge);
    }

    .menu-toggle {
        display: none;
    }

    .nav-desktop {
        display: flex;
        align-items: center;
        gap: var(--space-xl);
    }

    .nav-desktop a {
        font-size: 0.9375rem;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.9);
        transition: color var(--transition-fast);
        position: relative;
    }

    .nav-desktop a::after {
        content: '';
        position: absolute;
        bottom: -4px;
        left: 0;
        width: 0;
        height: 2px;
        background: var(--primary);
        transition: width var(--transition-fast);
    }

    .nav-desktop a:hover::after,
    .nav-desktop a.active::after {
        width: 100%;
    }

    .header.scrolled .nav-desktop a {
        color: var(--text-secondary);
    }

    .nav-desktop a:hover,
    .nav-desktop a.active {
        color: var(--primary);
    }

    .hero-title {
        font-size: 4rem;
    }

    .cards-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .section {
        padding: var(--space-2xl) 0;
    }

    /* Consistent spacing on desktop - adjacent sections with breathing room above headings */
    .section + .section {
        padding-top: var(--space-xl);
    }

    .page-hero + .section {
        padding-top: var(--space-xl);
    }

    /* Two column layout for tools */
    .tool-layout {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-xl);
    }
}

/* ============================================
   UTILITIES
   ============================================ */
.hidden { display: none !important; }
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }

/* Focus-visible ---- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }

.w-full { width: 100%; }
.rounded { border-radius: var(--radius-md); }

/* ============================================
   ADDITIONAL PAGE COMPONENTS
   ============================================ */

/* Page Hero (non-home pages) - Desktop overrides */
.page-hero {
    padding: calc(80px + var(--space-2xl)) 0 var(--space-2xl);
    color: white;
}

.page-title {
    font-size: 2rem;
    font-weight: 700;
    color: white;
    margin-bottom: var(--space-md);
}

.page-subtitle {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.8);
    max-width: 600px;
}

/* Breadcrumb */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
    font-size: 0.875rem;
}

.breadcrumb a {
    color: rgba(255, 255, 255, 0.6);
    transition: color var(--transition-fast);
}

.breadcrumb a:hover {
    color: white;
}

.breadcrumb .separator {
    color: rgba(255, 255, 255, 0.3);
}

.breadcrumb .current {
    color: var(--primary);
}

/* Section Alternate Background */
.section-alt {
    background: var(--bg-secondary);
}

/* Card Grid - wrap to fit */
.card-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-top: var(--space-lg);
    justify-content: flex-start;
}

.card-grid > * {
    flex: 1 1 250px;
    min-width: 200px;
    max-width: 350px;
}

/* Badge Variants */
.card-badge {
    display: inline-block;
    padding: var(--space-xs) var(--space-sm);
    background: var(--primary);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-sm);
}

.badge-green {
    background: #10B981;
}

.badge-purple {
    background: #8B5CF6;
}

.badge-blue {
    background: #3B82F6;
}

.badge-orange {
    background: #F59E0B;
}

.badge-red {
    background: #EF4444;
}

/* Tool Container */
.tool-container {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
}

/* Prompt Textarea */
.prompt-textarea {
    width: 100%;
    min-height: 150px;
    padding: var(--space-md);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--bg-primary);
    resize: vertical;
    transition: border-color var(--transition-fast);
}

.prompt-textarea:focus {
    outline: none;
    border-color: var(--primary);
}

.input-label {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

/* Score Display */
.score-display {
    margin-top: var(--space-lg);
    padding: var(--space-lg);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity var(--transition-normal), transform var(--transition-normal);
}

.score-display.visible {
    opacity: 1;
    transform: translateY(0);
}

.score-main {
    text-align: center;
    margin-bottom: var(--space-lg);
}

.score-circle {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 4px solid var(--primary);
}

.score-circle.score-exceptional { border-color: #8B5CF6; background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(236, 72, 153, 0.1)); }
.score-circle.score-excellent { border-color: #10B981; }
.score-circle.score-good { border-color: #3B82F6; }
.score-circle.score-fair { border-color: #F59E0B; }
.score-circle.score-poor { border-color: var(--primary); }

.score-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.score-label {
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* Sub Scores */
.sub-scores {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.sub-score {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-sm);
    align-items: center;
}

.sub-score-bar {
    height: 8px;
    background: var(--border-color);
    border-radius: var(--radius-full);
    overflow: hidden;
    grid-column: 1 / -1;
}

.sub-score-fill {
    height: 100%;
    background: var(--primary);
    border-radius: var(--radius-full);
    transition: width var(--transition-slow);
}

.sub-score-fill.score-exceptional { background: linear-gradient(90deg, #8B5CF6, #EC4899); }
.sub-score-fill.score-excellent { background: #10B981; }
.sub-score-fill.score-good { background: #3B82F6; }
.sub-score-fill.score-fair { background: #F59E0B; }
.sub-score-fill.score-poor { background: var(--primary); }

.sub-score-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.sub-score-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Feedback Section */
.feedback-section {
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--border-color);
}

.feedback-section h4 {
    margin-bottom: var(--space-md);
}

.feedback-list {
    list-style: none;
}

.feedback-list li {
    padding: var(--space-sm) 0;
    padding-left: var(--space-lg);
    position: relative;
    color: var(--text-secondary);
}

.feedback-list li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--primary);
}

/* ============================================
   PROMPT SCORER ENHANCEMENTS
   ============================================ */

/* Mode Toggle Button */
.scorer-mode-toggle {
    margin-bottom: var(--space-md);
}

.scorer-mode-toggle .btn-outline {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
}

.scorer-mode-toggle .btn-outline[aria-pressed="true"] {
    background: rgba(16, 185, 129, 0.1);
    border-color: #10B981;
    color: #10B981;
}

.toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: var(--primary);
    color: white;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 700;
    transition: all var(--transition-fast);
}

.btn-outline[aria-pressed="true"] .toggle-icon {
    background: #10B981;
}

/* Guided Mode Panel */
.guided-mode-panel {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.guided-mode-header {
    margin-bottom: var(--space-lg);
}

.guided-mode-header h3 {
    font-size: 1.125rem;
    margin-bottom: var(--space-xs);
}

.guided-mode-header p {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
}

/* Builder header row: title left, format toggle right ---- */
.builder-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.builder-header-row .format-toggle-container {
    margin-bottom: 0;
    padding: var(--space-sm) var(--space-md);
    background: transparent;
    align-items: flex-end;
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .builder-header-row {
        flex-direction: column;
    }

    .builder-header-row .format-toggle-container {
        align-items: flex-start;
        width: 100%;
    }
}

/* Methodology Selector - wrap to fit */
.methodology-selector {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
    justify-content: center;
}

.methodology-selector > * {
    flex: 1 1 100px;
    min-width: 80px;
    max-width: 150px;
}

.methodology-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: var(--space-md);
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: left;
}

.methodology-btn:hover {
    border-color: var(--primary);
}

.methodology-btn.active {
    border-color: var(--primary);
    background: rgba(220, 53, 69, 0.05);
}

.methodology-btn strong {
    color: var(--text-primary);
    font-size: 0.9375rem;
}

.methodology-btn.active strong {
    color: var(--primary);
}

.methodology-btn span {
    color: var(--text-muted);
    font-size: 0.75rem;
}

@media (min-width: 768px) {
    .methodology-selector {
        flex-direction: row;
    }

    .methodology-btn {
        flex: 1;
    }
}

/* Format Toggle (Labeled vs Natural Language)
   -------------------------------------------- */
.format-toggle-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
    padding: var(--space-md);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
}

.format-toggle-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.format-toggle {
    display: flex;
    gap: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 3px;
}

.format-toggle-btn {
    padding: var(--space-sm) var(--space-md);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-muted);
    background: transparent;
    border: none;
    border-radius: calc(var(--radius-md) - 2px);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.format-toggle-btn:hover {
    color: var(--text-primary);
}

.format-toggle-btn.active {
    background: var(--primary);
    color: white;
}

.format-toggle-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: center;
    max-width: 400px;
}

.guided-questions {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.guided-question {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.guided-label {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-primary);
}

.guided-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--primary);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.guided-letter-optional {
    background: var(--border-color);
    color: var(--text-muted);
}

.guided-input {
    width: 100%;
    min-height: 60px;
    padding: var(--space-md);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 0.9375rem;
    color: var(--text-primary);
    resize: vertical;
    transition: border-color var(--transition-fast);
}

.guided-input:focus {
    outline: none;
    border-color: var(--primary);
}

.guided-input::placeholder {
    color: var(--text-muted);
}

/* Framework Elements Display */
.framework-elements {
    margin: var(--space-lg) 0;
    padding: var(--space-lg);
    background: var(--bg-card);
    border-radius: var(--radius-md);
}

.framework-elements h4 {
    margin-bottom: var(--space-md);
    font-size: 1rem;
}

.framework-selector {
    display: flex;
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
}

.framework-tab {
    padding: var(--space-sm) var(--space-md);
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.framework-tab:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.framework-tab.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

/* === BUILDER PICKER === */

/* Container ---- */
.builder-picker {
    margin-bottom: var(--space-lg);
}

/* Category pills row ---- */
.builder-categories {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-sm);
    margin-bottom: var(--space-md);
}

.builder-category-btn {
    white-space: nowrap;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    background: transparent;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.builder-category-btn:hover {
    color: var(--primary);
    border-color: var(--primary);
}

.builder-category-btn.active {
    color: var(--primary);
    border-color: var(--primary);
    background: rgba(220, 53, 69, 0.08);
    font-weight: 600;
}

/* Framework cards grid ---- */
.builder-frameworks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
    min-height: 40px;
}

.builder-fw-card {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: left;
}

.builder-fw-card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.builder-fw-card.active {
    border-color: var(--primary);
    background: rgba(220, 53, 69, 0.06);
    box-shadow: 0 0 0 1px var(--primary);
}

.builder-fw-card strong {
    color: var(--primary);
    font-size: 0.875rem;
}

.builder-fw-card span {
    color: var(--text-muted);
    font-size: 0.75rem;
    line-height: 1.3;
}

/* Active framework label ---- */
.builder-active-label {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-secondary);
    border-left: 3px solid var(--primary);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    margin-bottom: var(--space-md);
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.builder-active-label strong {
    color: var(--primary);
}

.builder-active-learn {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.builder-active-learn:hover {
    color: var(--primary);
}

/* Frameworks overview category headings ---- */
.frameworks-overview-category {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin: var(--space-lg) 0 var(--space-sm);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.frameworks-overview-category:first-of-type {
    margin-top: var(--space-md);
}

/* Responsive ---- */
@media (max-width: 768px) {
    .builder-frameworks {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .builder-frameworks {
        grid-template-columns: 1fr;
    }

    .builder-active-label {
        flex-wrap: wrap;
    }

    .builder-active-learn {
        margin-left: 0;
    }
}

/* /BUILDER PICKER */

.elements-display {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.framework-coverage {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin: 0;
}

/* Element Pills */
.element-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    font-size: 0.8125rem;
    transition: all var(--transition-fast);
}

.element-pill.detected {
    background: rgba(16, 185, 129, 0.1);
    border-color: #10B981;
}

.element-pill.missing {
    background: rgba(220, 53, 69, 0.05);
    border-color: rgba(220, 53, 69, 0.3);
    color: var(--text-muted);
}

.element-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: var(--radius-sm);
    font-size: 0.6875rem;
    font-weight: 700;
}

.element-pill.detected .element-letter {
    background: #10B981;
    color: white;
}

.element-pill.missing .element-letter {
    background: var(--border-color);
    color: var(--text-muted);
}

.element-name {
    font-weight: 500;
}

.element-icon {
    width: 14px;
    height: 14px;
}

.element-pill.detected .element-icon {
    color: #10B981;
}

.element-pill.missing .element-icon {
    color: var(--text-muted);
}

/* Element Badge in Feedback */
.element-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: var(--primary);
    color: white;
    font-size: 0.6875rem;
    font-weight: 700;
    border-radius: var(--radius-sm);
    margin-right: var(--space-sm);
    flex-shrink: 0;
}

.element-badge-success {
    background: #10B981;
}

.feedback-list li {
    display: flex;
    align-items: center;
    padding-left: 0;
}

.feedback-list li::before {
    display: none;
}

.feedback-text {
    color: var(--text-secondary);
}

/* Feedback Cards Enhancement */
.feedback-cards {
    display: grid;
    gap: var(--space-md);
}

.feedback-card {
    padding: var(--space-md);
    background: var(--bg-card);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--primary);
}

.feedback-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.feedback-category {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.feedback-tip {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: var(--space-sm);
}

.feedback-example {
    font-size: 0.8125rem;
    color: var(--text-muted);
    background: var(--bg-secondary);
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
    margin: 0;
}

/* Feedback CTA Links */
.feedback-cta {
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--border-color);
    text-align: center;
}

.feedback-cta p {
    margin-bottom: var(--space-md);
    color: var(--text-secondary);
}

.feedback-cta-links {
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

/* Confidence Indicators */
.confidence-high .element-letter {
    background: #10B981;
}

.confidence-medium .element-letter {
    background: #F59E0B;
}

.confidence-low .element-letter {
    background: #6B7280;
}

/* Excerpts Section */
.excerpts-section {
    margin: var(--space-lg) 0;
    padding: var(--space-lg);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
}

.excerpts-section h4 {
    margin-bottom: var(--space-md);
    font-size: 1rem;
}

.excerpts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    gap: var(--space-md);
}

.excerpt-card {
    display: flex;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.excerpt-element-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--primary);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.excerpt-content {
    flex: 1;
    min-width: 0;
}

.excerpt-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: var(--space-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.excerpt-text {
    font-size: 0.875rem;
    color: var(--text-primary);
    font-style: italic;
    margin: 0 0 var(--space-xs) 0;
    word-break: break-word;
}

.excerpt-signal {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Quick Wins */
.quick-wins {
    margin-bottom: var(--space-lg);
    padding: var(--space-md);
    background: rgba(16, 185, 129, 0.05);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: var(--radius-md);
}

.quick-wins h5 {
    font-size: 0.875rem;
    color: #10B981;
    margin-bottom: var(--space-md);
}

.quick-win-card {
    display: flex;
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
}

.quick-win-card + .quick-win-card {
    border-top: 1px solid rgba(16, 185, 129, 0.1);
}

.quick-win-message {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-xs) 0;
}

.quick-win-tip {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin: 0;
}

/* Priority Indicators */
.priority-high {
    border-left-color: var(--primary);
    border-left-width: 4px;
}

.priority-badge {
    background: var(--primary);
    color: white;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Feedback Content with Excerpt */
.feedback-content {
    flex: 1;
}

.feedback-excerpt {
    display: block;
    font-size: 0.8125rem;
    color: var(--text-muted);
    font-style: italic;
    margin-top: var(--space-xs);
}

/* Feedback Perfect State */
.feedback-perfect {
    text-align: center;
    padding: var(--space-lg);
    background: rgba(16, 185, 129, 0.05);
    border-radius: var(--radius-md);
}

.feedback-perfect h4 {
    color: #10B981;
}

.feedback-perfect p {
    color: var(--text-secondary);
    margin: 0;
}

/* Analyzer Options */
.analyzer-options {
    display: flex;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.framework-select {
    flex: 1;
}

.input-label-sm {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: var(--space-xs);
}

.select-input {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color var(--transition-fast);
}

.select-input:focus {
    outline: none;
    border-color: var(--primary);
}

/* Analysis Display */
.analysis-display {
    margin-top: var(--space-lg);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity var(--transition-normal), transform var(--transition-normal);
}

.analysis-display.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Analysis Info Cards */
.analysis-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    gap: var(--space-lg);
}

.analysis-info-card {
    padding: var(--space-lg);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    text-align: center;
}

.info-card-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto var(--space-md);
    background: rgba(220, 53, 69, 0.1);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.info-card-icon svg {
    width: 24px;
    height: 24px;
    color: var(--primary);
}

.analysis-info-card h3 {
    font-size: 1rem;
    margin-bottom: var(--space-sm);
}

.analysis-info-card p {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
}

/* Example Analysis Badges */
.example-analysis {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-top: var(--space-md);
}

.detected-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-xs) var(--space-sm);
    font-size: 0.75rem;
    border-radius: var(--radius-sm);
}

.detected-badge.found {
    background: rgba(16, 185, 129, 0.1);
    color: #10B981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.detected-badge.missing {
    background: rgba(220, 53, 69, 0.05);
    color: var(--text-muted);
    border: 1px solid rgba(220, 53, 69, 0.2);
}

/* === SCORE TIPS GRID ===
   Engaging tips for improving prompt scores
   -------------------------------------------- */
.score-tips-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: var(--space-lg);
    margin-top: var(--space-xl);
}

.score-tip-card {
    display: flex;
    gap: var(--space-md);
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.score-tip-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), #FF6B6B);
    opacity: 0;
    transition: opacity var(--transition-normal);
}

.score-tip-card:hover {
    border-color: var(--primary);
    box-shadow: 0 8px 24px rgba(220, 53, 69, 0.15);
    transform: translateY(-4px);
}

.score-tip-card:hover::before {
    opacity: 1;
}

.score-tip-number {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--primary), #FF6B6B);
    color: white;
    font-size: 1.5rem;
    font-weight: 800;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

.score-tip-content {
    flex: 1;
}

.score-tip-content h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-xs);
}

.score-tip-impact {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    color: #10B981;
    background: rgba(16, 185, 129, 0.1);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-sm);
}

.score-tip-content p {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-sm);
}

.score-tip-example {
    background: var(--bg-secondary);
    border-left: 3px solid var(--primary);
    padding: var(--space-sm) var(--space-md);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: 0.8125rem;
    color: var(--text-primary);
    font-style: italic;
}

.score-tip-example .tip-label {
    font-weight: 700;
    color: var(--primary);
    font-style: normal;
    margin-right: var(--space-xs);
}

/* Mobile adjustments for score tips */
@media (max-width: 640px) {
    .score-tips-grid {
        grid-template-columns: 1fr;
    }

    .score-tip-card {
        flex-direction: column;
        text-align: center;
    }

    .score-tip-number {
        margin: 0 auto var(--space-sm);
    }

    .score-tip-example {
        text-align: left;
    }
}

/* Output Section (Guidance Page) */
.output-section {
    margin-top: var(--space-lg);
    padding: var(--space-lg);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    animation: slideDown 0.3s ease;
}

.output-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.output-header h3 {
    margin: 0;
    font-size: 1rem;
}

.output-actions {
    display: flex;
    gap: var(--space-sm);
}

.output-content {
    margin-bottom: var(--space-md);
}

.output-tip {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin: 0;
}

/* Framework Benefits (Guidance Page) */
.framework-benefits {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.benefit-card {
    text-align: center;
    padding: var(--space-lg);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

.benefit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--primary);
    color: white;
    font-size: 1.25rem;
    font-weight: 700;
    border-radius: 50%;
    margin-bottom: var(--space-md);
}

.benefit-card h3 {
    font-size: 1rem;
    margin-bottom: var(--space-sm);
}

.benefit-card p {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
}

/* Frameworks Overview Section */
.frameworks-overview {
    margin-top: var(--space-xl);
    text-align: center;
}

.frameworks-overview h3 {
    margin-bottom: var(--space-md);
    font-size: 1rem;
}

.framework-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-md);
}

.framework-mini-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-md);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.framework-mini-card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
}

.framework-mini-card strong {
    color: var(--primary);
    font-size: 1rem;
}

.framework-mini-card span {
    color: var(--text-secondary);
    font-size: 0.75rem;
}

/* Responsive: Guided Mode */
@media (min-width: 768px) {
    .guided-questions {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .guided-question[data-fullwidth="true"] {
        grid-column: 1 / -1;
    }
}

/* Checklist */
.checklist-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.checklist-section h3 {
    font-size: 1rem;
    margin-bottom: var(--space-md);
    color: var(--primary);
}

.checklist-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
    cursor: pointer;
}

.checklist-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--primary);
    flex-shrink: 0;
    margin-top: 2px;
}

.checklist-text {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.checklist-progress {
    margin-bottom: var(--space-lg);
}

.checklist-progress-bar {
    height: 8px;
    background: var(--border-color);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-bottom: var(--space-sm);
}

.checklist-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), #10B981);
    border-radius: var(--radius-full);
    transition: width var(--transition-normal);
    width: 0%;
}

.checklist-progress-text {
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* Hallucination Game */
.hallucination-game {
    text-align: center;
}

.game-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-color);
}

.game-score, .game-progress {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.statement-container {
    margin-bottom: var(--space-lg);
}

.statement-label {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-bottom: var(--space-md);
}

.statement-text {
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--text-primary);
    min-height: 80px;
}

.game-buttons {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    margin-bottom: var(--space-lg);
}

.btn-true, .btn-false {
    padding: var(--space-md) var(--space-xl);
    border-radius: var(--radius-md);
    font-weight: 600;
    transition: all var(--transition-fast);
}

.btn-true {
    background: #10B981;
    color: white;
}

.btn-true:hover:not(:disabled) {
    background: #059669;
}

.btn-false {
    background: var(--primary);
    color: white;
}

.btn-false:hover:not(:disabled) {
    background: var(--primary-dark);
}

.btn-true:disabled, .btn-false:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.result-display {
    padding: var(--space-md);
    border-radius: var(--radius-md);
    opacity: 0;
    transition: opacity var(--transition-normal);
}

.result-display.visible {
    opacity: 1;
}

.result-display.correct {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid #10B981;
}

.result-display.incorrect {
    background: rgba(220, 53, 69, 0.1);
    border: 1px solid var(--primary);
}

.final-score {
    padding: var(--space-xl);
}

.score-big {
    font-size: 3rem;
    font-weight: 700;
    color: var(--primary);
    margin: var(--space-md) 0;
}

/* Hallucination Game — AI Response Bubble ---- */
.ai-response-bubble {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    text-align: left;
    margin-bottom: var(--space-lg);
    position: relative;
}

.ai-response-label {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-md);
}

.ai-response-label svg {
    width: 16px;
    height: 16px;
}

.ai-response-text {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-primary);
}

/* Hallucination Game — Category Badge ---- */
.hallucination-category-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    background: rgba(220, 53, 69, 0.08);
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Hallucination Game — Progress Bar ---- */
.hallucination-progress {
    height: 4px;
    background: var(--border-color);
    border-radius: var(--radius-full);
    margin-bottom: var(--space-md);
    overflow: hidden;
}

.hallucination-progress-fill {
    height: 100%;
    background: var(--primary);
    border-radius: var(--radius-full);
    transition: width 0.4s ease;
}

/* Hallucination Game — Explanation Panel ---- */
.hallucination-explanation {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    margin-top: var(--space-md);
    text-align: left;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease, max-height 0.4s ease;
}

.hallucination-explanation.visible {
    opacity: 1;
    max-height: 500px;
}

.hallucination-explanation.correct {
    border-left: 3px solid #10B981;
}

.hallucination-explanation.incorrect {
    border-left: 3px solid var(--primary);
}

.hallucination-type-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--primary);
    margin-bottom: var(--space-sm);
}

.hallucination-explanation p {
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin-bottom: var(--space-sm);
}

.hallucination-verify-tip {
    background: rgba(16, 185, 129, 0.06);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: var(--radius-sm);
    padding: var(--space-sm) var(--space-md);
    margin-top: var(--space-md);
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.hallucination-verify-tip strong {
    color: #059669;
}

.hallucination-next-btn {
    margin-top: var(--space-md);
    padding: var(--space-sm) var(--space-lg);
    background: var(--text-primary);
    color: var(--bg-primary);
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity var(--transition-fast);
}

.hallucination-next-btn:hover {
    opacity: 0.85;
}

/* Hallucination Game — End Summary ---- */
.hallucination-summary {
    text-align: center;
    padding: var(--space-lg) 0;
}

.hallucination-summary-score {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: var(--space-sm);
}

.hallucination-summary-subtitle {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: var(--space-lg);
}

.hallucination-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-md);
    text-align: left;
    margin-bottom: var(--space-lg);
}

.hallucination-summary-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}

.hallucination-summary-card__label {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: var(--space-xs);
}

.hallucination-summary-card__value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.hallucination-summary-card--perfect .hallucination-summary-card__value {
    color: #10B981;
}

.hallucination-summary-feedback {
    text-align: left;
    margin-bottom: var(--space-lg);
}

.hallucination-summary-feedback h4 {
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: var(--space-sm);
}

.hallucination-summary-feedback p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Quiz */
.quiz-container {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
}

.quiz-progress {
    height: 4px;
    background: var(--border-color);
    border-radius: var(--radius-full);
    margin-bottom: var(--space-lg);
    overflow: hidden;
}

.quiz-progress-fill {
    height: 100%;
    background: var(--primary);
    transition: width var(--transition-normal);
}

.quiz-question {
    text-align: center;
    margin-bottom: var(--space-lg);
}

.question-number {
    display: block;
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-bottom: var(--space-sm);
}

.quiz-question h3 {
    font-size: 1.125rem;
    line-height: 1.5;
}

.quiz-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.quiz-option {
    padding: var(--space-md);
    background: var(--bg-secondary);
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    text-align: left;
    font-size: 0.9375rem;
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}

.quiz-option:hover:not(:disabled) {
    background: var(--bg-card);
    border-color: var(--border-color);
}

.quiz-option.correct {
    background: rgba(16, 185, 129, 0.1);
    border-color: #10B981;
    color: #10B981;
}

.quiz-option.incorrect {
    background: rgba(220, 53, 69, 0.1);
    border-color: var(--primary);
    color: var(--primary);
}

.quiz-results {
    text-align: center;
    padding: var(--space-xl) 0;
}

.result-score {
    font-size: 3rem;
    font-weight: 700;
    color: var(--primary);
}

.result-percent {
    font-size: 1.5rem;
    color: var(--text-muted);
    margin-bottom: var(--space-md);
}

.result-level {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-md);
}

.result-message {
    color: var(--text-secondary);
    margin-bottom: var(--space-lg);
}

.result-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

/* Pillar Results Breakdown */
.pillar-results {
    margin: var(--space-lg) 0;
    padding: var(--space-md);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    text-align: left;
}

.pillar-results h4 {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: var(--space-md);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
}

.pillar-result {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--border-color);
}

.pillar-result:last-child {
    border-bottom: none;
}

.pillar-name {
    font-size: 0.9375rem;
    color: var(--text-primary);
}

.pillar-score {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--primary);
}

/* Level-Based Quiz Styling
   -------------------------------------------- */
.quiz-level-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
    font-weight: 600;
    font-size: 0.875rem;
}

.quiz-level-indicator .level-emoji {
    font-size: 1.25rem;
}

.quiz-level-indicator .level-name {
    flex-grow: 1;
}

.quiz-level-indicator .level-questions {
    font-weight: 400;
    opacity: 0.8;
}

/* Level Colors */
.level-good {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.05));
    color: #10B981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.level-pro {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.05));
    color: #3B82F6;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.level-expert {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(168, 85, 247, 0.05));
    color: #A855F7;
    border: 1px solid rgba(168, 85, 247, 0.3);
}

.level-master {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(245, 158, 11, 0.05));
    color: #F59E0B;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.level-learner {
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.15), rgba(107, 114, 128, 0.05));
    color: #6B7280;
    border: 1px solid rgba(107, 114, 128, 0.3);
}

/* Level Results Badge */
.result-level-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-xl);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-md);
    font-size: 1.5rem;
    font-weight: 700;
}

.result-level-badge .result-emoji {
    font-size: 2rem;
}

/* Level Results Breakdown */
.level-results {
    margin: var(--space-lg) 0;
    padding: var(--space-md);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    text-align: left;
}

.level-results h4 {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: var(--space-md);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
}

.level-result {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--border-color);
}

.level-result:last-child {
    border-bottom: none;
}

.level-result-emoji {
    font-size: 1.25rem;
}

.level-result-name {
    font-size: 0.9375rem;
    color: var(--text-primary);
    font-weight: 500;
}

.level-result-score {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-muted);
}

.level-result-status {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
}

.level-result.passed .level-result-status {
    background: rgba(16, 185, 129, 0.15);
    color: #10B981;
}

.level-result.not-passed .level-result-status {
    background: rgba(220, 53, 69, 0.1);
    color: var(--primary);
}

/* Quiz Strikes (Lives) Display
   -------------------------------------------- */
.quiz-strikes {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
    font-size: 0.875rem;
}

.strikes-label {
    color: var(--text-muted);
    font-weight: 500;
}

.strikes-hearts {
    font-size: 1.25rem;
    letter-spacing: 2px;
}

/* Quiz Game Over Badge */
.quiz-gameover-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.15), rgba(220, 53, 69, 0.05));
    border: 1px solid rgba(220, 53, 69, 0.3);
    border-radius: var(--radius-lg);
    color: var(--primary);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: var(--space-md);
}

.quiz-gameover-badge .gameover-emoji {
    font-size: 1.5rem;
}

/* Quiz Complete Badge (Master achieved) */
.quiz-complete-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(245, 158, 11, 0.05));
    border: 2px solid rgba(245, 158, 11, 0.5);
    border-radius: var(--radius-lg);
    color: #F59E0B;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: var(--space-md);
}

.quiz-complete-badge .complete-emoji {
    font-size: 1.5rem;
}

/* Result Strikes Display */
.result-strikes-final {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-lg);
    font-size: 1rem;
}

.result-strikes-final .strikes-label {
    color: var(--text-muted);
}

.result-strikes-final .strikes-hearts {
    font-size: 1.5rem;
}

/* Challenge Message */
.result-challenge {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--primary);
    margin: var(--space-lg) 0;
    padding: var(--space-md);
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.1), rgba(220, 53, 69, 0.02));
    border-radius: var(--radius-md);
    border-left: 3px solid var(--primary);
}

/* Additional Level Colors */
.level-beginner {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(34, 197, 94, 0.05));
    color: #22C55E;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.level-advanced {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.15), rgba(249, 115, 22, 0.05));
    color: #F97316;
    border: 1px solid rgba(249, 115, 22, 0.3);
}

.level-champion {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.15), rgba(14, 165, 233, 0.05));
    color: #0EA5E9;
    border: 1px solid rgba(14, 165, 233, 0.3);
}

/* Level Legendary Color */
.level-legendary {
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.2), rgba(220, 53, 69, 0.05));
    color: var(--primary);
    border: 1px solid rgba(220, 53, 69, 0.4);
}

/* Quiz Hint Button
   -------------------------------------------- */
.quiz-hint-btn {
    padding: 4px 12px;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: var(--radius-sm);
    color: #F59E0B;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    margin-left: auto;
}

.quiz-hint-btn:hover:not(:disabled) {
    background: rgba(245, 158, 11, 0.2);
    border-color: #F59E0B;
}

.quiz-hint-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Eliminated option (after hint) */
.quiz-option--eliminated {
    opacity: 0.3;
    text-decoration: line-through;
    pointer-events: none;
}

/* Streak Life Earned Flash ---- */
.streak-life-earned {
    animation: streakFlash 0.8s ease;
}

@keyframes streakFlash {
    0% { transform: scale(1); }
    30% { transform: scale(1.4); color: #22C55E; }
    60% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Quiz Timer
   -------------------------------------------- */
.quiz-timer {
    height: 6px;
    background: var(--border-color);
    border-radius: var(--radius-full);
    margin-bottom: var(--space-md);
    overflow: hidden;
    position: relative;
}

.quiz-timer__fill {
    height: 100%;
    border-radius: var(--radius-full);
    background: #10B981;
    transition: width 0.25s linear, background-color 0.3s ease;
}

.quiz-timer__fill--warning {
    background: #F59E0B;
}

.quiz-timer__fill--danger {
    background: var(--primary);
}

.quiz-timer__label {
    position: absolute;
    right: 0;
    top: -18px;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-muted);
}

/* Legendary Complete Badge */
.quiz-legendary-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.25), rgba(220, 53, 69, 0.05));
    border: 2px solid rgba(220, 53, 69, 0.6);
    border-radius: var(--radius-lg);
    color: var(--primary);
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: var(--space-md);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Patterns */
.pattern-filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.filter-btn {
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}

.filter-btn:hover, .filter-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.patterns-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.pattern-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    transition: all var(--transition-normal);
}

.pattern-card:hover {
    border-color: var(--primary);
}

.pattern-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-md);
}

.pattern-header h3 {
    font-size: 1.125rem;
}

.pattern-category {
    font-size: 0.75rem;
    padding: var(--space-xs) var(--space-sm);
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
}

.pattern-description {
    margin-bottom: var(--space-md);
}

.pattern-example {
    background: var(--bg-secondary);
    padding: var(--space-md);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-md);
}

.pattern-example strong {
    display: block;
    font-size: 0.875rem;
    color: var(--text-primary);
    margin-bottom: var(--space-xs);
}

.pattern-example p {
    font-size: 0.875rem;
    font-style: italic;
}

.pattern-when {
    font-size: 0.875rem;
}

.pattern-when strong {
    color: var(--text-primary);
}

.pattern-learn-link {
    display: inline-block;
    margin-top: var(--space-sm);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--primary);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.pattern-learn-link:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Info Cards - horizontal scroll on mobile */
/* Info Cards - grid layout for consistent full-width sizing */
.info-cards, .score-info-grid, .coverage-grid, .values-grid,
.safety-principles, .risks-grid, .caution-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    gap: var(--space-md);
    margin-top: var(--space-lg);
    margin-bottom: var(--space-xl);
}

/* Legacy flex support for specific layouts that need it */
.info-cards > *, .score-info-grid > *, .coverage-grid > *, .values-grid > *,
.safety-principles > *, .risks-grid > *, .caution-grid > * {
    min-width: 0; /* Prevent grid blowout */
}

.info-card, .score-info-card, .coverage-card, .value-card,
.principle-card, .risk-card, .caution-card {
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-left: 5px solid var(--primary);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all var(--transition-normal);
}

.info-card:hover, .score-info-card:hover, .coverage-card:hover, .value-card:hover,
.principle-card:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 16px rgba(220, 53, 69, 0.15);
    transform: translateY(-2px);
}

/* Risk card - red left accent (warning) */
.risk-card {
    border-left-color: #ef4444;
}

.risk-card:hover {
    border-color: #ef4444;
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.2);
}

/* Caution card - amber left accent */
.caution-card {
    border-left-color: #f59e0b;
}

.caution-card:hover {
    border-color: #f59e0b;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.2);
}

/* Resource Card - clickable card variant for Resources page */
.resource-card {
    text-decoration: none;
    display: block;
    cursor: pointer;
}

.resource-card .info-card-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-md);
}

.resource-card .info-card-icon svg {
    width: 24px;
    height: 24px;
    color: white;
}

.resource-card .info-card-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: var(--space-xs);
}

.resource-card .info-card-description {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-md);
}

.resource-card-link {
    display: inline-flex;
    align-items: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--primary);
    transition: all var(--transition-fast);
}

.resource-card-link::after {
    content: ' \2192';
    margin-left: 4px;
    transition: transform var(--transition-fast);
}

.resource-card:hover .resource-card-link::after {
    transform: translateX(4px);
}

.resource-card:hover .info-card-icon {
    transform: scale(1.05);
}

/* Resource Section Styling */
.resource-section {
    margin-bottom: var(--space-xl);
}

.section-description {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-bottom: var(--space-xl);
    max-width: 600px;
}

.info-card h3, .score-info-card h3, .coverage-card h3, .value-card h3,
.principle-card h3, .risk-card h3, .caution-card h3 {
    margin-bottom: var(--space-sm);
}

.info-card ul, .risk-card ul {
    list-style: none;
    margin-top: var(--space-md);
}

.info-card li, .risk-card li {
    padding: var(--space-xs) 0;
    padding-left: var(--space-md);
    position: relative;
    color: var(--text-secondary);
}

.info-card li::before, .risk-card li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--primary);
}

.score-tip {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-color);
    font-size: 0.875rem;
}

.score-tip strong {
    display: block;
    color: var(--primary);
    margin-bottom: var(--space-xs);
}

.risk-link {
    display: inline-block;
    margin-top: var(--space-md);
    color: var(--primary);
    font-weight: 500;
}

/* Example Prompts */
.example-prompts {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

.example-prompt-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
}

.example-score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
    margin-bottom: var(--space-md);
}

.example-score.score-exceptional { background: linear-gradient(90deg, #8B5CF6, #EC4899); }
.example-score.score-excellent { background: #10B981; }
.example-score.score-good { background: #3B82F6; }
.example-score.score-fair { background: #F59E0B; }
.example-score.score-poor { background: var(--primary); }

.example-prompt-card h4 {
    margin-bottom: var(--space-sm);
}

.example-text {
    font-style: italic;
    padding: var(--space-md);
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-md);
}

.example-issues {
    list-style: none;
}

.example-issues li {
    padding: var(--space-xs) 0;
    padding-left: var(--space-md);
    position: relative;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.example-issues li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--primary);
}

/* Reference Cards */
.reference-grid, .verify-steps, .practices-list, .usage-tips {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

.reference-card, .verify-step, .practice-item, .usage-tip {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
}

.reference-icon, .step-number, .practice-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.875rem;
    margin-bottom: var(--space-md);
}

.practice-item {
    display: flex;
    gap: var(--space-md);
}

.practice-number {
    flex-shrink: 0;
}

.practice-content h3 {
    margin-bottom: var(--space-sm);
}

/* Comparison Cards */
.comparison-cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

.comparison-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
}

.comparison-card h3 {
    color: var(--primary);
    margin-bottom: var(--space-xs);
}

.comparison-use {
    font-weight: 500;
    margin-bottom: var(--space-md);
}

.comparison-when {
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-color);
    font-size: 0.875rem;
}

.comparison-when strong {
    display: block;
    color: var(--text-primary);
    margin-bottom: var(--space-xs);
}

/* Comparison Tabs ---- */
.comparison-tabs {
    background: var(--surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
}

.comparison-tabs__nav {
    display: flex;
    gap: 0;
    background: var(--surface-alt);
    border-bottom: 1px solid var(--border);
}

.comparison-tabs__tab {
    flex: 1;
    padding: var(--space-md) var(--space-lg);
    background: transparent;
    border: none;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: color var(--transition-fast), background var(--transition-fast);
    position: relative;
}

.comparison-tabs__tab:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.05);
}

.comparison-tabs__tab.is-active {
    color: var(--primary);
    background: var(--surface);
}

.comparison-tabs__tab.is-active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--primary);
}

.comparison-tabs__content {
    padding: var(--space-lg);
}

.comparison-tabs__panel {
    display: none;
}

.comparison-tabs__panel.is-active {
    display: block;
}

.comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
}

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

.comparison-card--before,
.comparison-card--after {
    background: var(--surface-alt);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    border: 1px solid var(--border);
}

.comparison-card--before {
    border-left: 3px solid var(--text-muted);
}

.comparison-card--after {
    border-left: 3px solid var(--accent);
}

.comparison-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-md);
}

.comparison-card__label {
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.comparison-card--before .comparison-card__label {
    color: var(--text-muted);
}

.comparison-card--after .comparison-card__label {
    color: var(--accent);
}

.comparison-card__badge {
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius);
    font-size: 0.75rem;
    font-weight: 600;
}

.comparison-card__badge--error {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.comparison-card__badge--success {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.comparison-card__prompt,
.comparison-card__response {
    font-size: 0.875rem;
    line-height: 1.6;
    margin-bottom: var(--space-md);
}

.comparison-card__prompt {
    color: var(--text-muted);
}

.comparison-card__prompt em {
    color: var(--primary);
    font-style: normal;
    font-weight: 600;
}

.comparison-card__response {
    color: var(--text);
}

.comparison-card__analysis {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border);
    font-size: 0.8rem;
    color: var(--text-muted);
}

.comparison-card__analysis svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.comparison-card__analysis--success {
    color: #22c55e;
}

.comparison-card__analysis--success svg {
    stroke: #22c55e;
}

/* Pillar Card Interactive ---- */
.pillar-card--interactive {
    position: relative;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.pillar-card--interactive:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.pillar-card__tag {
    display: inline-block;
    margin-top: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary);
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: var(--radius);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Use Case Card Variants ---- */
.use-case-card--success {
    border-left: 3px solid #22c55e;
}

/* Tips Grid */
.tips-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

.tip-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
}

.tip-number {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: var(--space-sm);
}

.tip-card h4 {
    margin-bottom: var(--space-sm);
}

/* About Page */
.about-mission {
    display: flex;
    align-items: flex-start;
    gap: var(--space-xl);
    padding: var(--space-xl);
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
}

.about-mission-image {
    width: 240px;
    height: auto;
    object-fit: cover;
    border-radius: var(--radius-lg);
    flex-shrink: 0;
}

.about-mission-content {
    flex: 1;
    text-align: left;
}

.about-mission h2 {
    margin-bottom: var(--space-md);
    color: var(--primary);
}

.mission-text {
    font-size: 1.125rem;
    line-height: 1.7;
}

.mission-text + .mission-text {
    margin-top: var(--space-md);
}

.mission-quote {
    font-size: 1.5rem;
    font-style: italic;
    color: var(--accent);
    text-align: center;
    margin: 0 0 2rem 0;
    padding: 1.5rem 2rem;
    border-left: 4px solid var(--accent);
    background: rgba(230, 57, 70, 0.05);
    border-radius: 0 8px 8px 0;
}

.about-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    margin-top: var(--space-lg);
}

.about-block h3 {
    color: var(--primary);
    margin-bottom: var(--space-sm);
}

.about-block p {
    margin-bottom: 0.5rem;
}

.about-block p:last-child {
    margin-bottom: 0;
}

.creator-section {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    text-align: center;
}

.creator-content h3 {
    font-size: 1.5rem;
    margin-bottom: var(--space-sm);
}

.creator-quote {
    font-style: italic;
    color: var(--primary);
    font-size: 1.125rem;
    margin-bottom: var(--space-lg);
}

.creator-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
}

/* About Page - Enhanced Sections ---- */
.about-intro {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
    margin-bottom: var(--space-md);
}

.about-block-featured {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    position: relative;
}

.about-block-featured::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: var(--primary);
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.about-block-centered {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.about-block-centered p {
    font-size: 1.125rem;
    line-height: 1.8;
}

/* Family Foundation Section ---- */
.family-foundation-section {
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    padding: var(--space-3xl) var(--space-2xl);
    background: linear-gradient(to right, #2a1015 0%, #150a0d 40%, #000000 100%);
    border-radius: var(--radius-xl);
    position: relative;
    overflow: hidden;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
}

.family-foundation-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at 15% 50%, rgba(220, 53, 69, 0.12) 0%, transparent 50%);
    pointer-events: none;
}

.family-foundation-section::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 2px,
        rgba(255, 255, 255, 0.01) 2px,
        rgba(255, 255, 255, 0.01) 4px
    );
    pointer-events: none;
}

.family-foundation-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--space-xl);
    background: linear-gradient(135deg, var(--primary) 0%, #c41e3a 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    box-shadow: 0 10px 40px rgba(230, 57, 70, 0.4);
}

.family-foundation-icon svg {
    width: 40px;
    height: 40px;
    fill: #fff;
}

.family-foundation-section p {
    font-size: 1.25rem;
    line-height: 1.9;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
}

.family-foundation-section p:first-of-type {
    font-size: 1.75rem;
    font-weight: 300;
    color: #fff;
    letter-spacing: 0.02em;
}

.family-foundation-section p:last-of-type {
    margin-bottom: 0;
    font-style: italic;
    color: rgba(255, 255, 255, 0.7);
    padding-top: var(--space-md);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: var(--space-lg);
}

.family-foundation-section .highlight-text {
    color: var(--primary);
    font-weight: 500;
}

/* Poem Section ---- */
.poem-section {
    background: linear-gradient(to right, #2a1015 0%, #150a0d 40%, #000000 100%);
    border: none;
    border-radius: var(--radius-xl);
    padding: var(--space-3xl) var(--space-2xl);
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
    max-width: 900px;
    margin: 0 auto;
}

.poem-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at 15% 50%, rgba(220, 53, 69, 0.12) 0%, transparent 50%);
    pointer-events: none;
}

.poem-section::after {
    content: '"';
    position: absolute;
    top: 30px;
    left: 40px;
    font-size: 10rem;
    font-family: Georgia, serif;
    color: rgba(255, 255, 255, 0.03);
    line-height: 1;
    pointer-events: none;
}

.poem-title {
    font-size: 2rem;
    color: #fff;
    margin-bottom: var(--space-xl);
    font-weight: 300;
    letter-spacing: 0.05em;
    position: relative;
    z-index: 1;
}

.poem-title::after {
    content: '';
    display: block;
    width: 80px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
    margin: var(--space-md) auto 0;
}

.poem-content {
    max-width: 500px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.poem-stanza {
    margin-bottom: var(--space-xl);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.poem-stanza:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.poem-stanza p {
    font-size: 1.125rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    font-style: italic;
    font-family: Georgia, 'Times New Roman', serif;
}

.poem-author {
    margin-top: var(--space-2xl);
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 400;
    letter-spacing: 0.02em;
    position: relative;
    z-index: 1;
}

.poem-author::before {
    content: '—';
    margin-right: 0.5rem;
}

/* Dedication Section ---- */
.dedication-section {
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    padding: var(--space-3xl) var(--space-2xl);
    background: linear-gradient(to right, #2a1015 0%, #150a0d 40%, #000000 100%);
    border-radius: var(--radius-xl);
    position: relative;
    overflow: hidden;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
}

.dedication-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at 15% 50%, rgba(220, 53, 69, 0.12) 0%, transparent 50%);
    pointer-events: none;
}

.dedication-title {
    font-size: 2rem;
    color: #fff;
    margin-bottom: var(--space-xl);
    font-weight: 300;
    letter-spacing: 0.05em;
    position: relative;
    z-index: 1;
}

.dedication-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
    margin: var(--space-md) auto 0;
}

.dedication-text {
    font-size: 1.125rem;
    line-height: 2;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0.75rem;
    position: relative;
    z-index: 1;
}

.dedication-text:first-of-type {
    font-weight: 500;
    font-size: 1.35rem;
    color: #fff;
}

.dedication-text:last-of-type {
    margin-bottom: var(--space-lg);
    font-style: italic;
    color: rgba(255, 255, 255, 0.7);
}

.dedication-copyright {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: var(--space-xl);
    padding-top: var(--space-md);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    z-index: 1;
}

/* About Page - Reduce spacing between dark sections (60% reduction) */
.section:has(.family-foundation-section),
.section:has(.poem-section),
.section:has(.dedication-section) {
    padding-top: var(--space-md);
    padding-bottom: var(--space-md);
}

/* About Page - Responsive ---- */
@media (max-width: 768px) {
    .about-mission {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    .about-mission-image {
        width: 180px;
        height: auto;
    }

    .about-mission-content {
        text-align: center;
    }

    .about-intro {
        font-size: 1.25rem;
    }

    .about-block-featured {
        padding: var(--space-lg);
    }

    .family-foundation-section {
        padding: var(--space-xl) var(--space-md);
    }

    .family-foundation-icon {
        width: 60px;
        height: 60px;
        margin-bottom: var(--space-lg);
    }

    .family-foundation-icon svg {
        width: 30px;
        height: 30px;
    }

    .family-foundation-section p {
        font-size: 1rem;
    }

    .family-foundation-section p:first-of-type {
        font-size: 1.25rem;
    }

    .poem-section {
        padding: var(--space-xl) var(--space-md);
    }

    .poem-section::after {
        font-size: 6rem;
        top: 15px;
        left: 20px;
    }

    .poem-title {
        font-size: 1.5rem;
    }

    .poem-stanza p {
        font-size: 1rem;
    }

    .dedication-section {
        padding: var(--space-lg) var(--space-md);
    }

    .dedication-title {
        font-size: 1.25rem;
    }

    .dedication-text {
        font-size: 1rem;
    }
}

/* Patterns Preview */
.patterns-preview {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    justify-content: center;
    margin-top: var(--space-lg);
}

.pattern-chip {
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}

.pattern-chip:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* Features List */
.features-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

.feature-item {
    display: flex;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: rgba(220, 53, 69, 0.1);
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.feature-icon svg {
    stroke: var(--primary);
}

.feature-content h3 {
    font-size: 1rem;
    margin-bottom: var(--space-xs);
}

.feature-content p {
    font-size: 0.875rem;
}

/* Tablet Responsive Updates */
@media (min-width: 768px) {
    .page-title {
        font-size: 2.5rem;
    }

    .card-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .patterns-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .info-cards, .coverage-grid, .values-grid,
    .safety-principles, .risks-grid, .caution-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    /* 3-column grids for 3-item sections */
    .score-info-grid, .framework-cards, .example-prompts {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .tips-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .comparison-cards {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .creator-links, .result-actions, .cta-actions {
        flex-direction: row;
        justify-content: center;
    }
}

/* Desktop Responsive Updates */
@media (min-width: 1024px) {
    .page-title {
        font-size: 3rem;
    }

    .card-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .card-grid .card {
        padding: var(--space-md);
    }

    .card-grid .card-title {
        font-size: 1rem;
    }

    .card-grid .card-text {
        font-size: 0.8125rem;
        line-height: 1.5;
    }

    .info-cards, .coverage-grid, .values-grid,
    .safety-principles, .risks-grid, .caution-grid,
    .score-info-grid, .framework-cards, .example-prompts {
        grid-template-columns: repeat(4, 1fr);
    }

    .tips-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ============================================
   HEADER & NAVIGATION (Subpages)
   ============================================ */
.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    position: relative;
}

.header-right {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    margin-left: auto;
}

.nav {
    display: none;
}

/* Mobile Menu Active State */
.nav.active {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: calc(60px + var(--safe-area-inset-top));
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.98);
    padding: var(--space-xl);
    padding-bottom: calc(var(--space-xl) + var(--safe-area-inset-bottom));
    padding-left: calc(var(--space-xl) + var(--safe-area-inset-left));
    padding-right: calc(var(--space-xl) + var(--safe-area-inset-right));
    gap: var(--space-md);
    z-index: 999;
    /* No animation - instant open */
    animation: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

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

.nav.active .nav-link {
    font-size: 1.125rem;
    padding: var(--space-md) var(--space-sm);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    min-height: 48px;
    display: flex;
    align-items: center;
    border-radius: var(--radius-md);
    color: var(--text-primary);
    /* No transitions - instant response */
    transition: none;
}

.nav.active .nav-link:active {
    background: rgba(0, 0, 0, 0.05);
}

/* Prevent body scroll when menu is open */
body.menu-open {
    overflow: hidden;
}

@media (min-width: 768px) {
    .nav {
        display: flex;
        align-items: center;
        gap: var(--space-lg);
    }

    .nav.active {
        position: static;
        flex-direction: row;
        background: transparent;
        padding: 0;
        animation: none;
    }

    .nav.active .nav-link {
        font-size: 0.9375rem;
        padding: 0;
        border-bottom: none;
    }
}

.nav-link {
    font-size: 0.9375rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    transition: color var(--transition-fast);
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary);
    transition: width var(--transition-fast);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

.nav-link:hover,
.nav-link.active {
    color: white;
}

/* Disable hover animations on touch devices */
@media (hover: none) and (pointer: coarse) {
    .nav-link::after {
        display: none;
    }
    .nav-link {
        transition: none;
    }
    .mega-menu-section a {
        transition: none;
    }
}

.header.scrolled .nav-link {
    color: var(--text-secondary);
}

.header.scrolled .nav-link:hover,
.header.scrolled .nav-link.active {
    color: var(--primary);
}

/* Mega Menu Navigation */
.nav-item {
    position: relative;
}

.nav-item.has-dropdown > .nav-link::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    margin-left: 6px;
    margin-bottom: 2px;
    transition: transform var(--transition-fast);
    position: static;
    background: none;
}

.nav-item.has-dropdown:hover > .nav-link::after {
    transform: rotate(-135deg);
    width: 6px;
}

.mega-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    min-width: 220px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
    z-index: 1000;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

/* Hover still works for desktop - click toggles .is-active class */
.nav-item.has-dropdown:hover .mega-menu,
.nav-item.has-dropdown.is-active .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Arrow rotation for active state */
.nav-item.has-dropdown.is-active > .nav-link::after {
    transform: rotate(-135deg);
}

/* Nav items with wide menus position relative to header, not self */
.nav-item.has-dropdown:has(.mega-menu--multi-column) {
    position: static;
}

/* Multi-column mega menu layout (single-column links per category) */
.mega-menu--multi-column {
    display: flex;
    gap: var(--space-sm) var(--space-md);
    width: max-content;
    max-width: calc(100vw - 2rem);
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    transform: translateY(10px);
}

.nav-item.has-dropdown:hover .mega-menu.mega-menu--multi-column,
.nav-item.has-dropdown.is-active .mega-menu.mega-menu--multi-column {
    transform: translateY(0);
}

.mega-menu--multi-column .mega-menu-section {
    flex: 0 0 auto;
    min-width: 0;
}

/* Resources dropdown: center under its nav link, not viewport */
.nav-item.has-dropdown:last-child:has(.mega-menu--multi-column) {
    position: relative;
}

.nav-item.has-dropdown:last-child .mega-menu--multi-column {
    left: 50%;
    right: auto;
    margin-left: 0;
    margin-right: 0;
    transform: translateX(-50%) translateY(10px);
}

.nav-item.has-dropdown:last-child:hover .mega-menu.mega-menu--multi-column,
.nav-item.has-dropdown:last-child.is-active .mega-menu.mega-menu--multi-column {
    transform: translateX(-50%) translateY(0);
}

/* === CATEGORY MEGA MENU === */

/* Category menu — 3-column layout (Discover | Techniques | Modality) */
.nav-item.has-dropdown:has(.mega-menu--categories) {
    position: relative;
}

.mega-menu--categories {
    display: flex;
    gap: var(--space-sm) var(--space-md);
    width: max-content;
    max-width: calc(100vw - 2rem);
    left: 50%;
    right: auto;
    transform: translateX(-50%) translateY(10px);
}

.nav-item.has-dropdown:hover .mega-menu.mega-menu--categories,
.nav-item.has-dropdown.is-active .mega-menu.mega-menu--categories {
    transform: translateX(-50%) translateY(0);
}

/* Quick links column (Discover) */
.mega-menu--categories .mega-menu-quick-links {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    min-width: 0;
    padding: 0;
    border-bottom: none;
    margin-bottom: 0;
}

/* Generated "TECHNIQUES" heading for quick-links column */
.mega-menu--categories .mega-menu-quick-links::before {
    content: "DISCOVER";
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-sm);
    padding-bottom: var(--space-xs);
    border-bottom: 1px solid var(--border-color);
}

.mega-menu--categories .mega-menu-quick-links a {
    display: block;
    padding: var(--space-xs) var(--space-sm);
    font-size: 0.875rem;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast), color var(--transition-fast);
    white-space: nowrap;
}

.mega-menu--categories .mega-menu-quick-links a:hover {
    background: rgba(220, 53, 69, 0.1);
    color: var(--primary);
}

/* Category group columns (Techniques, Modality) */
.mega-menu-group {
    padding: 0;
    flex: 0 0 auto;
    min-width: 0;
}

.mega-menu-group + .mega-menu-group {
    border-top: none;
}

/* Group label — styled like mega-menu-section h4 */
.mega-menu-group__label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-primary, #000);
    padding: 0;
    margin-bottom: var(--space-sm);
    padding-bottom: var(--space-xs);
    border-bottom: 1px solid var(--border-color);
}

.mega-menu-group__label .nav-accent {
    color: var(--primary);
}

/* Category link */
.mega-menu-group__link {
    display: block;
    padding: var(--space-xs) var(--space-sm);
    font-size: 0.875rem;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.mega-menu-group__link .nav-accent {
    color: inherit;
    transition: color var(--transition-fast);
}

/* Hover: split black/red */
.mega-menu-group__link:hover {
    background: rgba(220, 53, 69, 0.06);
    color: var(--text-primary, #000);
}

.mega-menu-group__link:hover .nav-accent {
    color: var(--primary);
}

/* /CATEGORY MEGA MENU */

/* Links wrapper within a section */
.mega-menu-links {
    display: block;
}

/* Divider for menu sections */
.mega-menu-divider {
    width: 100%;
    height: 1px;
    background: var(--border-color);
    margin: var(--space-sm) 0;
}

/* Featured subsection (for Neurodivergence) */
.mega-menu-section--featured {
    background: rgba(var(--primary-rgb, 220, 53, 69), 0.05);
    border-radius: var(--radius);
    padding: 0 var(--space-sm) var(--space-sm) var(--space-sm);
    margin: 0;
}

.mega-menu-section--featured h4 {
    border-bottom: none;
    padding-bottom: 0;
    font-size: 0.65rem;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.mega-menu-section h4 {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-sm);
    padding-bottom: var(--space-xs);
    border-bottom: 1px solid var(--border-color);
}

.mega-menu-section h4 .nav-accent {
    color: var(--primary);
}

.mega-menu-section h4 a {
    color: inherit;
    text-decoration: none;
    display: inline;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    background: none;
    white-space: normal;
}

.mega-menu-section h4 a:hover {
    text-decoration: underline;
    background: none;
}

.mega-menu-section a {
    display: block;
    padding: var(--space-xs) var(--space-sm);
    color: var(--text-secondary);
    font-size: 0.875rem;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast), color var(--transition-fast);
    white-space: nowrap;
}

.mega-menu-section a:hover {
    background: rgba(220, 53, 69, 0.1);
    color: var(--primary);
}

/* Scrolled header mega menu */
.header.scrolled .mega-menu {
    background: white;
    border-color: rgba(0, 0, 0, 0.1);
}

.header.scrolled .mega-menu-section h4 {
    color: var(--text-primary);
    border-bottom-color: rgba(0, 0, 0, 0.1);
}

.header.scrolled .mega-menu-section a {
    color: var(--text-secondary);
}

.header.scrolled .mega-menu-section a:hover {
    background: rgba(220, 53, 69, 0.1);
    color: var(--primary);
}

/* Mobile mega menu - always expanded with submenus visible */
@media (max-width: 767px) {
    /* Hide the dropdown arrow - menus are always visible */
    .nav-item.has-dropdown > .nav-link::after {
        display: none;
    }

    /* Hide Discover parent link on mobile (redundant with quick link) */
    .nav-item.has-dropdown:has(.mega-menu--categories) > .nav-link {
        display: none;
    }

    /* Category menu: single column, not 2-column grid */
    .mega-menu.mega-menu--categories {
        display: block;
        grid-template-columns: none;
    }

    .mega-menu--categories .mega-menu-quick-links {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--space-xs);
        padding: var(--space-xs) var(--space-sm);
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        margin-bottom: var(--space-xs);
    }

    .mega-menu--categories .mega-menu-quick-links::before {
        display: none;
    }

    .mega-menu-group + .mega-menu-group {
        border-top: 1px solid rgba(0, 0, 0, 0.08);
    }

    .mega-menu--categories .mega-menu-quick-links a {
        flex: 1 1 calc(50% - var(--space-xs));
        min-width: calc(50% - var(--space-xs));
        text-align: center;
        padding: var(--space-xs) var(--space-sm);
        font-size: 0.82rem;
        font-weight: 600;
        color: white;
        background: linear-gradient(180deg, rgba(220, 53, 69, 1) 0%, rgba(190, 40, 55, 0.95) 100%);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: var(--radius-md);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 3px rgba(0, 0, 0, 0.12);
    }

    .mega-menu--categories .mega-menu-quick-links a:nth-child(even) {
        background: linear-gradient(180deg, rgba(30, 35, 42, 0.92) 0%, rgba(13, 17, 23, 0.95) 100%);
    }

    .mega-menu-group__label {
        padding: var(--space-sm) var(--space-sm) 0;
        font-size: 0.85rem;
    }

    .mega-menu-group__link {
        padding: var(--space-xs) var(--space-sm);
        font-size: 0.92rem;
        color: var(--text-primary);
    }

    /* Nav item with dropdown - simple block layout */
    .nav-item.has-dropdown {
        display: block;
        position: static;
    }

    /* Parent link styling - full width, no animation */
    .nav-item.has-dropdown > .nav-link {
        display: block;
        width: 100%;
        transition: none;
    }

    /* Mega menu - 2-column grid for links */
    .mega-menu {
        position: static;
        transform: none;
        min-width: auto;
        background: transparent;
        border: none;
        border-radius: 0;
        padding: 0;
        padding-left: var(--space-md);
        padding-top: var(--space-xs);
        box-shadow: none;
        max-height: none;
        opacity: 1;
        visibility: visible;
        overflow: visible;
        /* 2-column grid layout */
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 var(--space-sm);
        transition: none;
    }

    /* Hide section headings */
    .mega-menu-section h4 {
        display: none;
    }

    /* Make sections invisible to grid - links become direct grid items */
    .mega-menu-section,
    .mega-menu--multi-column .mega-menu-section {
        display: contents;
    }

    /* Links flow into the 2-column grid */
    .mega-menu-section a {
        display: block;
        padding: var(--space-xs) var(--space-sm);
        font-size: 0.92rem;
        border-bottom: none;
        color: var(--text-primary) !important;
        background: transparent !important;
        border-radius: var(--radius-sm);
        transition: none;
        white-space: normal;
    }

    /* No hover effects on mobile - clean tap experience */
    .mega-menu-section a:hover,
    .mega-menu-section a:focus {
        background: transparent !important;
        color: var(--text-primary) !important;
    }

    /* Hide underline animation on mobile nav links */
    .nav-link::after {
        display: none !important;
    }

    /* Override desktop hover/active transform on mobile */
    .nav-item.has-dropdown:hover .mega-menu,
    .nav-item.has-dropdown.is-active .mega-menu {
        transform: none;
        opacity: 1;
        visibility: visible;
    }

    /* Multi-column on mobile - same 2-column grid */
    .mega-menu--multi-column {
        grid-template-columns: 1fr 1fr;
        width: auto;
        max-width: none;
    }

    /* Reset Resources dropdown centering transforms on mobile */
    .nav-item.has-dropdown:last-child .mega-menu--multi-column {
        transform: none;
        left: auto;
        right: auto;
    }

    /* Override multi-column hover/active transforms on mobile */
    .nav-item.has-dropdown:hover .mega-menu.mega-menu--multi-column,
    .nav-item.has-dropdown.is-active .mega-menu.mega-menu--multi-column,
    .nav-item.has-dropdown:last-child:hover .mega-menu.mega-menu--multi-column,
    .nav-item.has-dropdown:last-child.is-active .mega-menu.mega-menu--multi-column {
        transform: none;
    }

    .mega-menu-links {
        display: contents;
    }

    /* Non-tabbed mega-menus: accordion on mobile ---- */
    .mega-menu:not(.mega-menu--categories) {
        display: block;
        grid-template-columns: none;
    }

    .mega-menu:not(.mega-menu--categories) .mega-menu-section,
    .mega-menu:not(.mega-menu--categories) .mega-menu-section--featured {
        display: block;
        grid-column: auto;
        background: none;
        margin: 0;
        padding: 0;
        border-radius: 0;
    }

    .mega-menu:not(.mega-menu--categories) .mega-menu-section h4 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--space-xs) var(--space-sm);
        margin: 0;
        cursor: pointer;
        font-size: 0.86rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        color: var(--text-primary);
        user-select: none;
    }

    .mega-menu:not(.mega-menu--categories) .mega-menu-section h4 a {
        color: var(--text-primary) !important;
        text-decoration: none;
    }

    .mega-menu:not(.mega-menu--categories) .mega-menu-section h4 .nav-accent {
        color: var(--primary) !important;
    }

    .mega-menu:not(.mega-menu--categories) .mega-menu-section h4::after {
        content: '+';
        font-size: 1rem;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.35);
        margin-left: var(--space-sm);
    }

    .mega-menu:not(.mega-menu--categories) .mega-menu-section.is-expanded h4::after {
        content: '\2212';
    }

    .mega-menu:not(.mega-menu--categories) .mega-menu-section > a {
        display: none;
    }

    .mega-menu:not(.mega-menu--categories) .mega-menu-section.is-expanded > a {
        display: block;
        padding: var(--space-xs) var(--space-sm);
        padding-left: var(--space-md);
        font-size: 0.92rem;
        color: var(--text-primary) !important;
        background: transparent !important;
    }

    .mega-menu-divider {
        display: none;
    }

    /* Override scrolled header styles — mobile menu is always light */
    .header.scrolled .mega-menu {
        background: transparent;
        border-color: transparent;
        box-shadow: none;
    }

    .header.scrolled .mega-menu-section h4 {
        color: var(--text-primary);
        border-bottom-color: transparent;
    }

    .header.scrolled .mega-menu-section a {
        color: var(--text-primary);
    }

    .header.scrolled .mega-menu-section a:hover {
        background: transparent;
        color: var(--text-primary);
    }

    .header.scrolled .mega-menu-quick-links a {
        color: var(--text-primary);
    }

    .header.scrolled .mega-menu-section--featured h4 {
        color: var(--text-primary);
    }
}

/* ============================================
   SECTION SUBTITLE
   ============================================ */
.section-subtitle {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-top: calc(-1 * var(--space-sm));
    margin-bottom: var(--space-md);
}

/* ============================================
   LEARNING MODULE COMPONENTS
   ============================================ */

/* Concept Cards (ReAct visual equation) */
.concept-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    justify-items: start;
}

.concept-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    text-align: left;
    width: 100%;
    max-width: 280px;
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

/* Concept Card Left Accent */
.concept-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

/* Red/gradient concept card - darker accent for contrast */
.concept-card.concept-result::before {
    width: 6px;
    background: rgba(0, 0, 0, 0.2);
}

.concept-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.concept-card h3 {
    color: var(--primary);
    font-size: 1.25rem;
    margin-bottom: var(--space-sm);
}

.concept-operator {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
}

.concept-result {
    background: linear-gradient(135deg, var(--primary) 0%, #FF6B6B 100%);
    border: none;
    max-width: 320px;
}

.concept-result h3,
.concept-result p {
    color: white;
}

/* Loop Steps (ReAct loop) */
.loop-steps {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

.loop-step-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    position: relative;
    padding-left: calc(var(--space-lg) + 48px);
}

.loop-step-card .step-number {
    position: absolute;
    left: var(--space-md);
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
}

.loop-step-card h3 {
    font-size: 1rem;
    margin-bottom: var(--space-xs);
}

.loop-step-card p {
    font-size: 0.875rem;
    margin: 0;
}

/* Template Card */
.template-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin-top: var(--space-lg);
}

.template-card h3 {
    color: var(--primary);
    margin-bottom: var(--space-md);
}

.template-content {
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
}

.template-content p {
    margin-bottom: var(--space-sm);
}

.template-content ol {
    margin: var(--space-md) 0;
    padding-left: var(--space-lg);
}

.template-content li {
    color: var(--text-secondary);
    margin-bottom: var(--space-sm);
}

/* Example Cards (good/bad) */
.example-card {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    margin-top: var(--space-md);
    border-left: 4px solid var(--border-color);
}

.example-card.good {
    border-left-color: #9ca3af;
    background: #e5e7eb;
}

.example-card.good p {
    color: #1f2937;
}

.example-card.bad {
    border-left-color: #1a1a1a;
    background: #DC3545;
}

.example-card.bad p {
    color: #ffffff;
}

.example-label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: var(--space-sm);
}

.example-card.good .example-label {
    color: #374151;
}

.example-card.bad .example-label {
    color: #f0e6e6;
}

.example-card p {
    font-style: italic;
    line-height: 1.6;
}

/* Approach Comparison (Full Width Responsive)
   -------------------------------------------- */
.approach-comparison {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    margin-top: var(--space-lg);
    margin-bottom: var(--space-lg);
    width: 100%;
}

@media (min-width: 768px) {
    .approach-comparison {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-xl);
    }

    /* When there's a vs element, use 3-column layout */
    .approach-comparison:has(.approach-vs) {
        grid-template-columns: 1fr auto 1fr;
        gap: var(--space-md);
    }
}

@media (min-width: 1024px) {
    .approach-comparison {
        gap: var(--space-2xl);
    }

    .approach-comparison:has(.approach-vs) {
        gap: var(--space-lg);
    }
}

.approach-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition-normal);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.approach-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* Weak/Strong card variants */
.approach-card--weak {
    border-color: rgba(245, 158, 11, 0.3);
}

.approach-card--weak:hover {
    border-color: rgba(245, 158, 11, 0.5);
}

.approach-card--strong {
    border-color: rgba(16, 185, 129, 0.3);
}

.approach-card--strong:hover {
    border-color: rgba(16, 185, 129, 0.5);
}

.approach-header {
    padding: var(--space-md) var(--space-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
}

.approach-header h3 {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0;
    color: white;
}

.approach-badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: var(--space-2xs) var(--space-sm);
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.2);
    color: white;
    white-space: nowrap;
}

/* Header color variants */
.approach-header.approach-labeled {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
}

.approach-header.approach-natural {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.approach-header.approach-header--weak {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.approach-header.approach-header--strong {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.approach-content {
    padding: var(--space-lg);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.approach-content ul {
    margin: 0;
    padding: 0 0 0 var(--space-lg);
    flex: 1;
}

.approach-content ul li {
    margin-bottom: var(--space-sm);
    line-height: 1.5;
    color: var(--text);
}

.approach-content ul li:last-child {
    margin-bottom: 0;
}

.approach-prompt {
    font-size: 0.9375rem;
    line-height: 1.7;
    flex: 1;
}

.approach-prompt p {
    margin-bottom: var(--space-sm);
}

.approach-prompt p:last-child {
    margin-bottom: 0;
}

/* Approach Result Indicators ---- */
.approach-result {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-top: auto;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
}

.approach-result svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.approach-result--weak {
    background: rgba(245, 158, 11, 0.1);
    color: #b45309;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.approach-result--weak svg {
    stroke: #d97706;
}

.approach-result--strong {
    background: rgba(16, 185, 129, 0.1);
    color: #047857;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.approach-result--strong svg {
    stroke: #059669;
}

.approach-result-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.approach-vs {
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-muted);
}

@media (min-width: 768px) {
    .approach-vs {
        display: flex;
    }
}

/* Mobile-first responsive adjustments */
@media (max-width: 767px) {
    .approach-header {
        padding: var(--space-sm) var(--space-md);
    }

    .approach-header h3 {
        font-size: 1rem;
    }

    .approach-content {
        padding: var(--space-md);
    }

    .approach-result {
        padding: var(--space-sm) var(--space-md);
        font-size: 0.8125rem;
    }

    .approach-result svg {
        width: 20px;
        height: 20px;
    }
}

/* ReAct Example Flow */
.react-example-flow {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

.react-step-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    border-left: 4px solid var(--border-color);
}

.react-step-card.thought {
    border-left-color: #3B82F6;
    background: rgba(59, 130, 246, 0.05);
}

.react-step-card.action {
    border-left-color: #8B5CF6;
    background: rgba(139, 92, 246, 0.05);
}

.react-step-card.observation {
    border-left-color: #10B981;
    background: rgba(16, 185, 129, 0.05);
}

.react-step-card.conclusion {
    border-left-color: var(--primary);
    background: rgba(220, 53, 69, 0.05);
}

.react-label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-sm);
}

.react-step-card.thought .react-label { color: #3B82F6; }
.react-step-card.action .react-label { color: #8B5CF6; }
.react-step-card.observation .react-label { color: #10B981; }
.react-step-card.conclusion .react-label { color: var(--primary); }

.react-step-card p {
    margin: 0;
    line-height: 1.6;
}

/* Use Case Grid */
.use-case-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

.use-case-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    transition: all var(--transition-normal);
}

.use-case-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary);
}

.use-case-card h3 {
    font-size: 1rem;
    margin-bottom: var(--space-sm);
}

.use-case-card p {
    font-size: 0.875rem;
    margin: 0;
}

/* CTA Card */
.cta-card {
    background: linear-gradient(to right, #2a1015 0%, #150a0d 40%, #000000 100%);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl) var(--space-lg);
    text-align: center;
    color: white;
    position: relative;
    overflow: hidden;
}

.cta-card .neural-canvas-secondary {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0.5;
    -webkit-mask-image: linear-gradient(to right, transparent 15%, rgba(0,0,0,0.3) 40%, rgba(0,0,0,1) 70%);
    mask-image: linear-gradient(to right, transparent 15%, rgba(0,0,0,0.3) 40%, rgba(0,0,0,1) 70%);
}

.cta-title,
.cta-text,
.cta-actions {
    position: relative;
    z-index: 1;
}

.cta-title {
    font-size: 1.5rem;
    color: white;
    margin-bottom: var(--space-md);
}

.cta-text {
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: var(--space-lg);
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.cta-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

/* Footer Grid */
.footer-grid {
    display: grid;
    gap: var(--space-xl);
    margin-bottom: var(--space-xl);
}

.footer-brand {
    margin-bottom: var(--space-md);
}

.footer-brand p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.875rem;
    margin-top: var(--space-sm);
}

.footer-links h4 {
    color: white;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: var(--space-md);
}

.footer-links a {
    display: block;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.875rem;
    padding: var(--space-xs) 0;
    transition: color var(--transition-fast);
}

.footer-links a:hover {
    color: var(--primary);
}

/* Fade In Up Animation */
.fade-in-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   LEARNING MODULE RESPONSIVE
   ============================================ */
@media (min-width: 768px) {
    /* Desktop: Reason + Act = ReAct all on one row, left-aligned */
    .concept-cards {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: var(--space-md);
        justify-content: flex-start;
    }

    .concept-card {
        width: auto;
        max-width: 220px;
        flex-shrink: 0;
    }

    .concept-operator {
        flex-shrink: 0;
    }

    .loop-steps {
        flex-direction: row;
    }

    .loop-step-card {
        flex: 1;
        padding-left: var(--space-lg);
        padding-top: calc(var(--space-lg) + 48px);
    }

    .loop-step-card .step-number {
        top: var(--space-md);
        left: 50%;
        transform: translateX(-50%);
    }

    .use-case-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .cta-actions {
        flex-direction: row;
        justify-content: center;
    }

    .footer-grid {
        grid-template-columns: 2fr 1fr 1fr 1fr;
    }
}

@media (min-width: 1024px) {
    .use-case-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .cta-card {
        padding: var(--space-3xl);
    }

    .cta-title {
        font-size: 2rem;
    }
}

/* ============================================
   ACRONYM CARDS (CRISP, CRISPE, COSTAR)
   ============================================ */

/* Acronym Cards Layout ---- */
.acronym-cards {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    justify-content: flex-start;
}

/* Force single row on desktop */
@media (min-width: 768px) {
    .acronym-cards {
        flex-wrap: nowrap;
    }
}

.acronym-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    text-align: center;
    flex: 1 1 150px;
    min-width: 120px;
    max-width: 180px;
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

/* Acronym Card Left Accent - Base (non-flip) */
.acronym-card:not(.has-flip)::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 7px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

@media (min-width: 768px) {
    .acronym-card {
        flex: 1;
        max-width: none;
    }
}

.acronym-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary);
}

.acronym-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--primary);
    color: white;
    font-size: 1.5rem;
    font-weight: 800;
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
}

.acronym-card h3 {
    font-size: 1rem;
    margin-bottom: var(--space-xs);
}

.acronym-card p {
    font-size: 0.8125rem;
    margin: 0;
}

/* Verb/Instruction/Style/Param Cards */
.verb-grid,
.instruction-cards,
.style-cards,
.param-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

.verb-card,
.instruction-card,
.style-card,
.param-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    transition: all var(--transition-normal);
}

.verb-card:hover,
.instruction-card:hover,
.style-card:hover,
.param-card:hover {
    border-color: var(--primary);
}

.verb-card h3,
.instruction-card h3,
.style-card h3,
.param-card h3 {
    color: var(--primary);
    font-size: 0.9375rem;
    margin-bottom: var(--space-sm);
}

.verb-card p,
.instruction-card p,
.style-card p,
.param-card p {
    font-size: 0.875rem;
    margin: 0;
}

/* CRISP Example Flow */
.crisp-example-flow {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

.crisp-component-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    border-left: 4px solid var(--primary);
}

.crisp-component-card .component-label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--primary);
    margin-bottom: var(--space-sm);
}

.crisp-component-card p {
    margin: 0;
    line-height: 1.6;
}

/* Color variants for component cards */
.crisp-component-card:nth-child(1) { border-left-color: #3B82F6; }
.crisp-component-card:nth-child(1) .component-label { color: #3B82F6; }

.crisp-component-card:nth-child(2) { border-left-color: #8B5CF6; }
.crisp-component-card:nth-child(2) .component-label { color: #8B5CF6; }

.crisp-component-card:nth-child(3) { border-left-color: #10B981; }
.crisp-component-card:nth-child(3) .component-label { color: #10B981; }

.crisp-component-card:nth-child(4) { border-left-color: #F59E0B; }
.crisp-component-card:nth-child(4) .component-label { color: #F59E0B; }

.crisp-component-card:nth-child(5) { border-left-color: var(--primary); }
.crisp-component-card:nth-child(5) .component-label { color: var(--primary); }

.crisp-component-card:nth-child(6) { border-left-color: #EC4899; }
.crisp-component-card:nth-child(6) .component-label { color: #EC4899; }

/* Acronym Highlight (for CRISPE E letter) */
.acronym-card.acronym-highlight {
    background: rgba(220, 53, 69, 0.08);
    border-color: var(--primary);
}

.acronym-card.acronym-highlight .acronym-letter {
    background: var(--primary);
}

/* Acronym Card Flip Animation */
.acronym-card.has-flip {
    perspective: 1000px;
    cursor: pointer;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* Override base hover transform for flip cards */
.acronym-card.has-flip:hover {
    transform: none !important;
    box-shadow: none !important;
}

.acronym-card.has-flip .card-inner {
    position: relative;
    width: 100%;
    height: 240px;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

.acronym-card.has-flip:hover .card-front {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.acronym-card.has-flip .card-front {
    transition: box-shadow 0.3s ease;
}

@media (min-width: 768px) {
    .acronym-card.has-flip .card-inner {
        height: 200px;
    }
}

.acronym-card.has-flip:hover .card-inner,
.acronym-card.has-flip.flipped .card-inner {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
}

.acronym-card.has-flip .card-front,
.acronym-card.has-flip .card-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
    box-sizing: border-box;
    border: none;
}

.acronym-card.has-flip .card-front {
    background: var(--bg-card);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.06);
    z-index: 2;
    overflow: hidden;
}

/* Acronym Card Left Accent - Cap Style
   -------------------------------------------- */
.acronym-card.has-flip .card-front::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 7px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

/* Red card variant - thicker darker accent */
.acronym-card.has-flip.accent-red .card-front::before {
    width: 8px;
    background: rgba(0, 0, 0, 0.12);
}

/* White card variant - visible white accent */
.acronym-card.has-flip.accent-white .card-front::before {
    width: 7px;
    background: rgba(255, 255, 255, 0.5);
    box-shadow: inset -1px 0 3px rgba(0, 0, 0, 0.08);
}

/* Black/dark card variant - prominent red accent (30% wider) */
.acronym-card.has-flip.accent-dark .card-front::before {
    width: 8px;
    background: var(--primary);
}

.acronym-card.has-flip .card-back {
    background: var(--bg-card);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.15), 0 0 0 1px rgba(220, 53, 69, 0.2);
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    justify-content: flex-start;
    padding: var(--space-sm);
    z-index: 1;
}

.acronym-card.has-flip .card-front .acronym-letter {
    width: 48px;
    height: 48px;
    background: var(--primary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    margin-bottom: var(--space-sm);
}

.acronym-card.has-flip .card-front h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: var(--space-xs);
    color: var(--text-primary);
}

.acronym-card.has-flip .card-front p {
    font-size: 0.875rem;
    color: var(--text-muted);
    text-align: center;
}

.acronym-card.has-flip .card-back .flip-header {
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--primary);
    margin-bottom: var(--space-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    width: 100%;
}

.acronym-card.has-flip .card-back .flip-example {
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.4;
    padding: var(--space-xs) var(--space-sm);
    background: rgba(220, 53, 69, 0.05);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--primary);
    margin-bottom: var(--space-xs);
    font-style: italic;
    width: 100%;
}

.acronym-card.has-flip .card-back .flip-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    justify-content: center;
    margin-top: auto;
}

.acronym-card.has-flip .card-back .flip-tag {
    font-size: 0.65rem;
    padding: 3px 6px;
    background: rgba(220, 53, 69, 0.1);
    color: var(--primary);
    border-radius: var(--radius-sm);
    font-weight: 500;
}

/* Flip hint indicator */
.acronym-card.has-flip .card-front::after {
    content: 'Hover to flip';
    position: absolute;
    bottom: 8px;
    font-size: 0.65rem;
    color: var(--text-muted);
    opacity: 0.6;
}

/* Mobile: Smaller cards, NO flip - show front only */
@media (max-width: 768px) {
    .acronym-card {
        min-width: 80px;
        max-width: 100px;
        padding: var(--space-sm);
    }

    .acronym-card.has-flip {
        perspective: none;
    }

    .acronym-card.has-flip .card-inner {
        height: auto;
        transform-style: flat;
        -webkit-transform-style: flat;
    }

    /* Disable flip on hover/tap */
    .acronym-card.has-flip:hover .card-inner,
    .acronym-card.has-flip.flipped .card-inner {
        transform: none;
        -webkit-transform: none;
    }

    .acronym-card.has-flip .card-front {
        position: relative;
        padding: var(--space-sm);
    }

    /* Hide the back completely on mobile */
    .acronym-card.has-flip .card-back {
        display: none;
    }

    /* Hide "Hover to flip" text */
    .acronym-card.has-flip .card-front::after {
        display: none;
    }

    /* Smaller letter badge */
    .acronym-card.has-flip .card-front .acronym-letter {
        width: 32px;
        height: 32px;
        font-size: 1rem;
        margin-bottom: var(--space-xs);
    }

    .acronym-card.has-flip .card-front h3 {
        font-size: 0.8125rem;
        margin-bottom: 2px;
    }

    .acronym-card.has-flip .card-front p {
        font-size: 0.75rem;
        line-height: 1.4;
    }
}

/* Desktop: Square cards (width = height) - fit single row */
@media (min-width: 768px) {
    .acronym-card {
        flex: 0 0 160px;
        min-width: 160px;
        max-width: 160px;
    }

    .acronym-card.has-flip .card-inner {
        height: 202px;
    }

    .acronym-card.has-flip .card-front .acronym-letter {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }

    .acronym-card.has-flip .card-front h3 {
        font-size: 0.95rem;
    }

    .acronym-card.has-flip .card-front p {
        font-size: 0.8rem;
    }
}

@media (min-width: 1024px) {
    .acronym-card {
        flex: 0 0 180px;
        min-width: 180px;
        max-width: 180px;
    }

    .acronym-card.has-flip .card-inner {
        height: 227px;
    }

    .acronym-card.has-flip .card-front .acronym-letter {
        width: 56px;
        height: 56px;
        font-size: 1.75rem;
    }
}

@media (min-width: 1280px) {
    .acronym-card {
        flex: 0 0 200px;
        min-width: 200px;
        max-width: 200px;
    }

    .acronym-card.has-flip .card-inner {
        height: 252px;
    }

    .acronym-card.has-flip .card-front .acronym-letter {
        width: 64px;
        height: 64px;
        font-size: 2rem;
    }
}

/* 6-card layout (CRISPE, COSTAR) - smaller to fit single row */
@media (min-width: 768px) {
    .acronym-cards.six-items .acronym-card {
        flex: 0 0 130px;
        min-width: 130px;
        max-width: 130px;
    }

    .acronym-cards.six-items .acronym-card.has-flip .card-inner {
        height: 170px;
    }

    .acronym-cards.six-items .acronym-card.has-flip .card-front .acronym-letter {
        width: 40px;
        height: 40px;
        font-size: 1.25rem;
    }

    .acronym-cards.six-items .acronym-card.has-flip .card-front h3 {
        font-size: 0.85rem;
    }

    .acronym-cards.six-items .acronym-card.has-flip .card-front p {
        font-size: 0.75rem;
    }
}

@media (min-width: 1024px) {
    .acronym-cards.six-items .acronym-card {
        flex: 0 0 150px;
        min-width: 150px;
        max-width: 150px;
    }

    .acronym-cards.six-items .acronym-card.has-flip .card-inner {
        height: 190px;
    }

    .acronym-cards.six-items .acronym-card.has-flip .card-front .acronym-letter {
        width: 46px;
        height: 46px;
        font-size: 1.5rem;
    }

    .acronym-cards.six-items .acronym-card.has-flip .card-front h3 {
        font-size: 0.9rem;
    }

    .acronym-cards.six-items .acronym-card.has-flip .card-front p {
        font-size: 0.75rem;
    }
}

@media (min-width: 1280px) {
    .acronym-cards.six-items .acronym-card {
        flex: 0 0 170px;
        min-width: 170px;
        max-width: 170px;
    }

    .acronym-cards.six-items .acronym-card.has-flip .card-inner {
        height: 210px;
    }

    .acronym-cards.six-items .acronym-card.has-flip .card-front .acronym-letter {
        width: 54px;
        height: 54px;
        font-size: 1.75rem;
    }

    .acronym-cards.six-items .acronym-card.has-flip .card-front h3 {
        font-size: 0.95rem;
    }

    .acronym-cards.six-items .acronym-card.has-flip .card-front p {
        font-size: 0.8rem;
    }
}

/* Method Reminder Notes */
.method-reminder {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    margin-top: var(--space-lg);
    padding: var(--space-md) var(--space-lg);
    background: #1a1a1a;
    border: 1px solid #333333;
    border-radius: var(--radius-lg);
    border-left: 4px solid #DC3545;
}

.reminder-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    background: #DC3545;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    font-style: italic;
}

.reminder-content {
    font-size: 0.9rem;
    color: #e5e7eb;
    line-height: 1.6;
}

.reminder-content strong {
    color: #ffffff;
    font-weight: 700;
}

.reminder-content em {
    color: #DC3545;
    font-style: normal;
    font-weight: 600;
}

/* Evolution Cards (CRISPE) */
.evolution-cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

.evolution-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    border-left: 4px solid var(--primary);
}

.evolution-card h3 {
    color: var(--primary);
    margin-bottom: var(--space-sm);
}

.evolution-example {
    margin-top: var(--space-md);
    padding: var(--space-md);
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    font-style: italic;
    font-size: 0.875rem;
}

/* Example Types (CRISPE E section) */
.example-types {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: var(--space-lg);
    margin-top: var(--space-lg);
}

.example-type-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.example-type-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.example-type-card h3 {
    color: var(--primary);
    margin-bottom: var(--space-sm);
}

.example-type-card p {
    color: var(--text-secondary);
    margin-bottom: var(--space-md);
}

.example-snippet {
    background: var(--bg-secondary);
    border-left: 3px solid var(--primary);
    padding: var(--space-md);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    line-height: 1.6;
}

/* Personality/Eval Cards */
.personality-cards,
.eval-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

.personality-card,
.eval-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    transition: all var(--transition-normal);
}

.personality-card:hover,
.eval-card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
}

.personality-card h3,
.eval-card h3 {
    color: var(--primary);
    font-size: 0.9375rem;
    margin-bottom: var(--space-sm);
}

.personality-card p,
.eval-card p {
    font-size: 0.875rem;
    margin: 0;
}

/* Callout list styling */
.callout ul {
    margin: var(--space-sm) 0 0 0;
    padding-left: var(--space-lg);
}

.callout li {
    color: var(--text-secondary);
    margin-bottom: var(--space-xs);
}

/* Objective/Audience/Response/Tone Cards (COSTAR) */
.objective-cards,
.audience-cards,
.response-cards,
.tone-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

.objective-card,
.audience-card,
.response-card,
.tone-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    transition: all var(--transition-normal);
}

.objective-card:hover,
.audience-card:hover,
.response-card:hover,
.tone-card:hover {
    border-color: var(--primary);
}

.objective-card h3,
.audience-card h3,
.response-card h3 {
    color: var(--primary);
    font-size: 0.9375rem;
    margin-bottom: var(--space-sm);
}

.objective-card p,
.audience-card p,
.response-card p {
    font-size: 0.875rem;
    margin: 0;
}

/* Tone Spectrum */
.tone-spectrum-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.tone-end {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}

.tone-bar {
    flex: 1;
    height: 4px;
    background: linear-gradient(90deg, var(--primary) 0%, #8B5CF6 50%, #3B82F6 100%);
    border-radius: var(--radius-full);
}

/* ============================================
   ADVANCED TECHNIQUES COMPONENTS
   ============================================ */

/* Technique/Best Practice/Role/Format/Consistency Cards */
.technique-cards,
.best-practice-cards,
.role-cards,
.format-cards,
.consistency-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

.technique-card,
.best-practice-card,
.role-card,
.format-card,
.consistency-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    transition: all var(--transition-normal);
}

.technique-card:hover,
.best-practice-card:hover,
.role-card:hover,
.format-card:hover,
.consistency-card:hover {
    border-color: var(--primary);
}

.technique-card h3,
.best-practice-card h3,
.role-card h3,
.format-card h3,
.consistency-card h3 {
    color: var(--primary);
    font-size: 1rem;
    margin-bottom: var(--space-sm);
}

.technique-card p,
.best-practice-card p,
.role-card p,
.format-card p,
.consistency-card p {
    font-size: 0.875rem;
    margin: 0;
}

/* Role usecase tag */
.role-usecase {
    display: inline-block;
    margin-top: var(--space-sm);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-secondary);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
}

/* Format code block */
.format-code {
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    padding: var(--space-md);
    margin-top: var(--space-sm);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    white-space: pre;
    overflow-x: auto;
}

/* Chain Flow */
.chain-flow {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

.chain-step-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    padding-left: calc(var(--space-lg) + 48px);
    position: relative;
}

.chain-number {
    position: absolute;
    left: var(--space-md);
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
}

.chain-step-card h3 {
    font-size: 1rem;
    margin-bottom: var(--space-xs);
}

.chain-step-card p {
    font-size: 0.875rem;
    margin: 0;
}

@media (min-width: 768px) {
    .technique-cards,
    .role-cards,
    .format-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .best-practice-cards,
    .consistency-cards {
        grid-template-columns: repeat(3, 1fr);
    }

    .chain-flow {
        flex-direction: row;
    }

    .chain-step-card {
        flex: 1;
        padding-left: var(--space-lg);
        padding-top: calc(var(--space-lg) + 48px);
    }

    .chain-number {
        top: var(--space-md);
        left: 50%;
        transform: translateX(-50%);
    }
}

/* ============================================
   PROMPT BASICS COMPONENTS
   ============================================ */

/* Anatomy Cards */
/* === ANATOMY CARDS ===
   Purpose: Numbered cards showing prompt anatomy elements
   Enhanced with colored left border, shadow, and engaging hover state
   -------------------------------------------- */
.anatomy-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

.anatomy-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--primary);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    padding-left: calc(var(--space-lg) + 48px);
    position: relative;
    transition: all var(--transition-normal);
    box-shadow: var(--shadow-sm);
}

.anatomy-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.anatomy-number {
    position: absolute;
    left: var(--space-md);
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
}

.anatomy-card h3 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: var(--space-xs);
    color: var(--text-primary);
}

.anatomy-card p {
    font-size: 0.875rem;
    margin: 0;
    color: var(--text-secondary);
}

/* Mistake Cards */
.mistake-cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    margin-top: var(--space-lg);
}

.mistake-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
}

.mistake-card h3 {
    color: var(--primary);
    font-size: 1.125rem;
    margin-bottom: var(--space-md);
}

.mistake-card .example-card {
    margin-top: var(--space-sm);
}

/* Process Cards */
.process-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

.process-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    padding-left: calc(var(--space-lg) + 48px);
    position: relative;
    transition: all var(--transition-normal);
}

.process-card:hover {
    border-color: var(--primary);
}

.process-number {
    position: absolute;
    left: var(--space-md);
    top: var(--space-md);
    width: 32px;
    height: 32px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
}

.process-card h3 {
    font-size: 1rem;
    margin-bottom: var(--space-xs);
}

.process-card p {
    font-size: 0.875rem;
    margin: 0;
}

/* Checklist Cards */
.checklist-cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

.checklist-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    transition: all var(--transition-normal);
}

.checklist-card:hover {
    border-color: var(--primary);
}

.checklist-number {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
}

.checklist-content h3 {
    font-size: 1rem;
    margin-bottom: var(--space-xs);
}

.checklist-content p {
    font-size: 0.875rem;
    margin: 0;
}

@media (min-width: 768px) {
    .anatomy-cards {
        grid-template-columns: repeat(4, 1fr);
    }

    .mistake-cards {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .process-cards {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ============================================
   ENHANCED PROMPT SCORER FEEDBACK
   ============================================ */

/* Score Message */
.score-message {
    margin-top: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
    text-align: center;
}

.score-message-great {
    background: rgba(16, 185, 129, 0.1);
    color: #10B981;
}

.score-message-good {
    background: rgba(59, 130, 246, 0.1);
    color: #3B82F6;
}

.score-message-fair {
    background: rgba(245, 158, 11, 0.1);
    color: #F59E0B;
}

.score-message-poor {
    background: rgba(220, 53, 69, 0.1);
    color: var(--primary);
}

.score-message-exceptional {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(236, 72, 153, 0.15));
    color: #8B5CF6;
    font-weight: 600;
}

/* Score Breakdown Display */
.score-breakdown {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    margin-top: var(--space-sm);
    font-size: 0.875rem;
}

.score-base {
    color: var(--text-secondary);
}

.score-bonus {
    color: #8B5CF6;
    font-weight: 600;
}

/* Structural Bonuses Display */
.feedback-bonuses {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.05), rgba(236, 72, 153, 0.05));
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    margin-top: var(--space-md);
}

.feedback-bonuses h4 {
    color: #8B5CF6;
    margin-bottom: var(--space-sm);
    font-size: 1rem;
}

.bonus-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.bonus-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) 0;
}

.bonus-badge {
    background: #8B5CF6;
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
    min-width: 45px;
    text-align: center;
}

.bonus-text {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* Feedback Sections */
.feedback-section {
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--border-color);
}

.feedback-section h4 {
    font-size: 1.125rem;
    margin-bottom: var(--space-md);
}

/* Strengths */
.feedback-strengths .feedback-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.feedback-strengths .feedback-list li {
    padding: var(--space-sm) var(--space-md);
    background: rgba(16, 185, 129, 0.05);
    border-left: 3px solid #10B981;
    margin-bottom: var(--space-sm);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.feedback-category {
    font-weight: 600;
    color: var(--text-primary);
}

/* Improvement Cards */
.feedback-cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.feedback-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    border-left: 4px solid var(--primary);
}

.feedback-card-header {
    margin-bottom: var(--space-sm);
}

.feedback-card-header .feedback-category {
    display: inline-block;
    padding: var(--space-xs) var(--space-sm);
    background: rgba(220, 53, 69, 0.1);
    color: var(--primary);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.feedback-issue {
    font-size: 0.9375rem;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

.feedback-tip {
    font-size: 0.875rem;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    margin: 0;
}

.feedback-tip strong {
    color: #10B981;
}

/* Example Comparisons */
.example-comparison {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.example-before,
.example-after {
    padding: var(--space-md);
    border-radius: var(--radius-md);
}

.example-before {
    background: rgba(220, 53, 69, 0.05);
    border: 1px solid rgba(220, 53, 69, 0.2);
}

.example-after {
    background: rgba(16, 185, 129, 0.05);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.example-label-bad,
.example-label-good {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-sm);
}

.example-label-bad {
    background: var(--primary);
    color: white;
}

.example-label-good {
    background: #10B981;
    color: white;
}

.example-before p,
.example-after p {
    font-size: 0.875rem;
    margin: 0;
    font-style: italic;
    line-height: 1.6;
}

/* Feedback CTA */
.feedback-cta {
    margin-top: var(--space-xl);
    padding: var(--space-lg);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    text-align: center;
}

.feedback-cta p {
    margin-bottom: var(--space-md);
    color: var(--text-secondary);
}

@media (min-width: 768px) {
    .feedback-cards {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .example-comparison {
        flex-direction: row;
    }

    .example-before,
    .example-after {
        flex: 1;
    }
}

/* ============================================
   AI READINESS HUB
   ============================================ */

/* Readiness Pillars */
.readiness-pillars {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-top: var(--space-lg);
    justify-content: flex-start;
}

.readiness-pillars > * {
    flex: 1 1 200px;
    min-width: 150px;
    max-width: 280px;
}

.pillar-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    text-align: center;
    transition: all var(--transition-normal);
}

.pillar-card:hover {
    border-color: var(--primary);
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.pillar-icon {
    margin-bottom: var(--space-md);
}

.pillar-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--primary) 0%, #FF6B6B 100%);
    color: white;
    font-size: 1.25rem;
    font-weight: 700;
    border-radius: 50%;
}

.pillar-card h3 {
    font-size: 1rem;
    margin-bottom: var(--space-sm);
}

.pillar-card p {
    font-size: 0.875rem;
    margin: 0;
}

/* Tool Cards - wrap to fit */
.tool-cards {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg);
    justify-content: flex-start;
}

.tool-cards > * {
    flex: 1 1 280px;
    min-width: 250px;
    max-width: 400px;
}

.tool-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    transition: all var(--transition-normal);
    text-decoration: none;
    color: inherit;
}

.tool-card:hover {
    border-color: var(--primary);
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.tool-card-header {
    margin-bottom: var(--space-md);
}

.tool-badge {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: var(--space-xs) var(--space-sm);
    background: rgba(220, 53, 69, 0.1);
    color: var(--primary);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-sm);
}

.tool-card-header h3 {
    font-size: 1.25rem;
    margin: 0;
}

.tool-description {
    flex: 1;
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin-bottom: var(--space-md);
}

.tool-features {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-bottom: var(--space-lg);
}

.tool-feature {
    font-size: 0.75rem;
    padding: var(--space-xs) var(--space-sm);
    background: var(--bg-secondary);
    border-radius: var(--radius-full);
    color: var(--text-secondary);
}

.tool-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-color);
    font-weight: 600;
    color: var(--primary);
}

.tool-arrow {
    font-size: 1.25rem;
    transition: transform var(--transition-fast);
}

.tool-card:hover .tool-arrow {
    transform: translateX(4px);
}

/* Path Steps - wrap to fit */
.path-steps {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-top: var(--space-lg);
    justify-content: center;
}

.path-steps > * {
    flex: 1 1 280px;
    min-width: 220px;
    max-width: 350px;
}

.path-step {
    display: flex;
    gap: var(--space-lg);
    padding: var(--space-lg);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

.path-step-number {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: var(--primary);
    color: white;
    font-size: 1.25rem;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.path-step-content h3 {
    font-size: 1.125rem;
    margin-bottom: var(--space-xs);
}

.path-step-content p {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: var(--space-md);
}

.path-connector {
    width: 2px;
    height: 24px;
    background: var(--border-color);
    margin-left: calc(var(--space-lg) + 23px);
}

@media (min-width: 768px) {
    .readiness-pillars {
        grid-template-columns: repeat(4, 1fr);
    }

    .tool-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .path-steps {
        flex-direction: row;
        align-items: flex-start;
    }

    .path-step {
        flex-direction: column;
        text-align: center;
        flex: 1;
    }

    .path-step-number {
        margin: 0 auto var(--space-md);
    }

    .path-connector {
        width: 60px;
        height: 2px;
        margin: 24px 0 0 0;
        align-self: flex-start;
    }
}

/* ============================================
   PROGRESSIVE BUILD COMPONENT
   Shows how prompts transform by adding elements
   ============================================ */

.progressive-build {
    margin-top: var(--space-lg);
}

.progressive-build-intro {
    margin-bottom: var(--space-lg);
}

.progressive-build-intro p {
    font-size: 0.9375rem;
    color: var(--text-secondary);
}

.build-steps {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.build-step {
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-left: 5px solid var(--primary);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: all var(--transition-normal);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.build-step:hover {
    border-color: var(--primary);
    border-left-color: var(--primary);
    box-shadow: 0 4px 16px rgba(220, 53, 69, 0.15);
    transform: translateY(-2px);
}

.build-step-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.build-step-indicator {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-shrink: 0;
}

.build-step-number {
    width: 28px;
    height: 28px;
    background: var(--primary);
    color: white;
    font-size: 0.8125rem;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.build-step.start {
    border-left-color: #1f2937;
}

.build-step.start .build-step-number {
    background: #1f2937;
}

.build-step-action {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--primary);
}

.build-step.start .build-step-action {
    color: #1f2937;
}

.build-step-element {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--space-xs) var(--space-sm);
    background: rgba(220, 53, 69, 0.1);
    color: var(--primary);
    border-radius: var(--radius-sm);
}

.build-step.start .build-step-element {
    background: rgba(31, 41, 55, 0.1);
    color: #1f2937;
}

.build-step-content {
    padding: var(--space-md);
}

.build-step-prompt {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--text-primary);
    margin: 0;
}

.build-step-prompt .highlight {
    background: rgba(220, 53, 69, 0.12);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    color: #1f2937;
    border-bottom: 2px solid rgba(220, 53, 69, 0.3);
}

/* Final step styling - uses primary red for badge aesthetic consistency */
.build-step.final {
    border-color: var(--primary);
    border-left-width: 6px;
    box-shadow: 0 4px 16px rgba(220, 53, 69, 0.12);
}

.build-step.final .build-step-header {
    background: rgba(220, 53, 69, 0.04);
}

.build-step.final .build-step-number {
    background: var(--primary);
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
}

.build-step.final .build-step-action {
    color: var(--primary);
}

.build-step.final .build-step-element {
    background: rgba(220, 53, 69, 0.1);
    color: var(--primary);
    font-weight: 700;
}

/* Arrow connector between steps */
.build-arrow {
    display: flex;
    justify-content: center;
    padding: var(--space-xs) 0;
    color: var(--primary);
    font-size: 1.5rem;
    font-weight: 700;
}

@media (min-width: 768px) {
    .build-step-header {
        padding: var(--space-md) var(--space-lg);
    }

    .build-step-content {
        padding: var(--space-lg);
    }

    .build-step-prompt {
        font-size: 1rem;
    }
}

/* ============================================
   Scenario Tabs (Flip-through examples)
   ============================================ */

.scenario-tabs-container {
    margin-top: var(--space-xl);
    margin-bottom: var(--space-lg);
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-left: 5px solid var(--primary);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all var(--transition-normal);
}

.scenario-tabs-container:hover {
    border-color: var(--primary);
    border-left-color: var(--primary);
    box-shadow: 0 4px 16px rgba(220, 53, 69, 0.15);
}

.scenario-tabs-container h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-md);
}

.scenario-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    padding: var(--space-sm);
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-lg);
}

.scenario-tab {
    padding: var(--space-xs) var(--space-md);
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.scenario-tab:hover {
    background: var(--bg-card);
    color: var(--text-primary);
}

.scenario-tab.active {
    background: var(--primary);
    color: white;
}

.scenario-tab .tab-icon {
    margin-right: var(--space-xs);
    font-size: 0.75rem;
}

.scenario-content {
    display: none;
}

.scenario-content.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

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

/* Scenario label shown above progressive build */
.scenario-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-md);
}

.scenario-label .dept-badge {
    padding: 2px 6px;
    background: var(--primary);
    color: white;
    border-radius: var(--radius-sm);
    font-size: 0.6875rem;
}

/* Mobile adjustments */
@media (max-width: 640px) {
    .scenario-tabs {
        gap: 4px;
        padding: var(--space-xs);
    }

    .scenario-tab {
        padding: var(--space-xs) var(--space-sm);
        font-size: 0.75rem;
    }

    .scenario-tab .tab-icon {
        display: none;
    }
}

/* ============================================
   Flipped Interaction Page Styles
   ============================================ */

.comparison-example {
    display: grid;
    gap: var(--space-lg);
    margin-top: var(--space-lg);
}

@media (min-width: 768px) {
    .comparison-example {
        grid-template-columns: 1fr 1fr;
    }
}

.comparison-example .example-result {
    margin-top: var(--space-sm);
    font-size: 0.875rem;
    color: var(--text-muted);
    font-style: italic;
}

/* Trigger Phrases */
.trigger-phrases {
    display: grid;
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

@media (min-width: 768px) {
    .trigger-phrases {
        grid-template-columns: repeat(2, 1fr);
    }
}

.trigger-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    transition: all var(--transition-normal);
}

.trigger-card:hover {
    border-color: var(--primary);
}

.trigger-card h3 {
    font-size: 1rem;
    margin-bottom: var(--space-sm);
    color: var(--text-primary);
}

.trigger-card p {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
    margin: 0;
}

/* Flipped Example Cards */
.flipped-example {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.flipped-prompt,
.flipped-questions,
.flipped-outcome {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
}

.flipped-prompt {
    border-left: 3px solid var(--primary);
}

.flipped-questions {
    border-left: 3px solid #10B981;
}

.flipped-outcome {
    border-left: 3px solid #F59E0B;
}

.flipped-example h4 {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: var(--space-sm);
}

.flipped-prompt p,
.flipped-outcome p {
    margin: 0;
    color: var(--text-secondary);
}

.flipped-questions ol {
    margin: 0;
    padding-left: var(--space-lg);
    color: var(--text-secondary);
}

.flipped-questions li {
    margin-bottom: var(--space-xs);
}

/* When To Use Grid */
.when-grid {
    display: grid;
    gap: var(--space-lg);
    margin-top: var(--space-lg);
}

@media (min-width: 768px) {
    .when-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.when-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
}

.when-card.use {
    border-top: 3px solid #10B981;
}

.when-card.skip {
    border-top: 3px solid #EF4444;
}

.when-card h3 {
    font-size: 1.125rem;
    margin-bottom: var(--space-md);
}

.when-card ul {
    margin: 0;
    padding-left: var(--space-lg);
}

.when-card li {
    color: var(--text-secondary);
    margin-bottom: var(--space-xs);
}

/* Variation Cards */
.variation-cards {
    display: grid;
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

@media (min-width: 768px) {
    .variation-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

.variation-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    transition: all var(--transition-normal);
}

.variation-card:hover {
    border-color: var(--primary);
}

.variation-card h3 {
    font-size: 1rem;
    margin-bottom: var(--space-sm);
}

.variation-card p {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-sm);
}

.variation-use {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* ========================================
   Technique Detection Badges
   ======================================== */

.techniques-section {
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--border-color);
}

.techniques-section h4 {
    font-size: 1rem;
    color: var(--text-primary);
    margin-bottom: var(--space-md);
}

.techniques-section.techniques-empty .techniques-hint {
    font-size: 0.875rem;
    color: var(--text-muted);
    background: var(--bg-secondary);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--border-color);
}

.techniques-section.techniques-empty .techniques-hint a {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.techniques-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.technique-badge {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    transition: all var(--transition-normal);
}

.technique-badge:hover {
    border-color: var(--primary);
}

.technique-badge.confidence-high {
    border-left: 3px solid #10B981;
}

.technique-badge.confidence-medium {
    border-left: 3px solid #F59E0B;
}

.technique-badge.confidence-low {
    border-left: 3px solid #6B7280;
}

.technique-badge .technique-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
}

.technique-badge.confidence-high .technique-icon {
    color: #10B981;
}

.technique-badge.confidence-medium .technique-icon {
    color: #F59E0B;
}

.technique-badge.confidence-low .technique-icon {
    color: #6B7280;
}

.technique-info {
    flex: 1;
    min-width: 0;
}

.technique-name {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9375rem;
    margin-bottom: 2px;
}

.technique-desc {
    display: block;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.technique-match {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
    margin-top: var(--space-xs);
    padding: var(--space-xs);
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
}

.technique-learn {
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--primary);
    text-decoration: none;
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--primary);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.technique-learn:hover {
    background: var(--primary);
    color: #fff;
}

@media (min-width: 768px) {
    .techniques-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================
   MOBILE COMPACT STYLES (iPhone 15 Pro Max)
   ============================================ */
@media (max-width: 480px) {
    /* Smaller card grids - allow full width stacking */
    .cards-grid > *,
    .card-grid > * {
        flex: 1 1 100%;
        min-width: 0;
        max-width: 100%;
    }

    .card {
        padding: var(--space-sm);
    }

    .card-title {
        font-size: 0.9rem;
    }

    .card-text {
        font-size: 0.875rem;
        line-height: 1.5;
    }

    .card-badge {
        font-size: 0.65rem;
        padding: 2px 6px;
    }

    /* Smaller info cards - 2 columns on mobile */
    .info-cards,
    .coverage-grid,
    .values-grid,
    .safety-principles,
    .risks-grid,
    .caution-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .info-cards > *,
    .coverage-grid > *,
    .values-grid > *,
    .safety-principles > *,
    .risks-grid > *,
    .caution-grid > * {
        padding: var(--space-sm);
    }

    .info-card h3,
    .coverage-card h3,
    .value-card h3 {
        font-size: 0.85rem;
    }

    .info-card p,
    .coverage-card p,
    .value-card p {
        font-size: 0.875rem;
    }

    /* Smaller readiness pillars - 2 per row */
    .readiness-pillars > * {
        flex: 1 1 45%;
        min-width: 0;
        max-width: 100%;
        padding: var(--space-sm);
    }

    .pillar-number {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    .pillar-card h3 {
        font-size: 0.85rem;
    }

    .pillar-card p {
        font-size: 0.875rem;
    }

    /* Smaller tool cards - stack on mobile */
    .tool-cards > * {
        flex: 1 1 100%;
        min-width: 0;
        max-width: 100%;
        padding: var(--space-md);
    }

    .tool-card h3 {
        font-size: 1rem;
    }

    .tool-card p {
        font-size: 0.875rem;
    }

    /* Smaller path steps - stack on mobile */
    .path-steps > * {
        flex: 1 1 100%;
        min-width: 0;
        max-width: 100%;
        padding: var(--space-sm);
    }

    .path-step-number {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    /* Smaller footer - 2 columns */
    .footer-links > * {
        flex: 1 1 45%;
        min-width: 0;
        max-width: 100%;
    }

    .footer-col h4 {
        font-size: 0.75rem;
    }

    .footer-col a {
        font-size: 0.7rem;
    }

    /* Smaller methodology buttons */
    .methodology-selector > * {
        flex: 1 1 auto;
        min-width: 0;
        padding: var(--space-sm);
    }

    .methodology-btn {
        font-size: 0.75rem;
    }

    /* Compact spacing */
    .section {
        padding: var(--space-lg) 0;
    }

    /* Consistent mobile section spacing with breathing room above headings */
    .section + .section {
        padding-top: var(--space-md);
    }

    .page-hero + .section {
        padding-top: var(--space-md);
    }

    .section-title {
        font-size: 1.25rem;
    }

    .section-subtitle {
        font-size: 0.85rem;
    }

    /* Fix: Keep badges in light section on mobile (prevent dark overlap)
       ------------------------------------------------------------------ */
    .section .content-badges {
        margin-top: 0;
        margin-bottom: var(--space-md);
    }
}

/* ============================================
   GENERIC EXAMPLE CARD
   ============================================ */
.example-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    margin-top: var(--space-lg);
}

.example-prompt {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--text-primary);
}

.example-element {
    display: inline;
    padding: 2px 0;
    border-radius: 4px;
    position: relative;
}

/* CRISPE Elements: C (Context), R (Role), I (Instruction), S (Specifics), P (Parameters), E (Example) */
.example-element[data-element="C"] {
    background: rgba(220, 53, 69, 0.1);
    border-bottom: 2px solid #DC3545;
    color: #DC3545;
}

.example-element[data-element="R"] {
    background: rgba(232, 93, 4, 0.1);
    border-bottom: 2px solid #E85D04;
    color: #E85D04;
}

.example-element[data-element="I"] {
    background: rgba(33, 150, 243, 0.1);
    border-bottom: 2px solid #2196F3;
    color: #2196F3;
}

.example-element[data-element="S"] {
    background: rgba(156, 39, 176, 0.1);
    border-bottom: 2px solid #9C27B0;
    color: #9C27B0;
}

.example-element[data-element="P"] {
    background: rgba(76, 175, 80, 0.1);
    border-bottom: 2px solid #4CAF50;
    color: #4CAF50;
}

.example-element[data-element="E"] {
    background: rgba(255, 152, 0, 0.1);
    border-bottom: 2px solid #FF9800;
    color: #FF9800;
}

/* COSTAR Elements: C (Context), O (Objective), S (Style), T (Tone), A (Audience), R (Response) */
.example-element[data-element="O"] {
    background: rgba(232, 93, 4, 0.1);
    border-bottom: 2px solid #E85D04;
    color: #E85D04;
}

.example-element[data-element="T"] {
    background: rgba(156, 39, 176, 0.1);
    border-bottom: 2px solid #9C27B0;
    color: #9C27B0;
}

.example-element[data-element="A"] {
    background: rgba(76, 175, 80, 0.1);
    border-bottom: 2px solid #4CAF50;
    color: #4CAF50;
}

/* COSTAR overrides: S = Style (blue), R = Response (orange) */
.costar-example .example-element[data-element="S"] {
    background: rgba(33, 150, 243, 0.1);
    border-bottom: 2px solid #2196F3;
    color: #2196F3;
}

.costar-example .example-element[data-element="R"] {
    background: rgba(255, 152, 0, 0.1);
    border-bottom: 2px solid #FF9800;
    color: #FF9800;
}

/* Complete Example Card - taller on desktop, no animation */
.complete-example {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

@media (min-width: 768px) {
    .complete-example {
        min-height: 250px;
        padding: calc(var(--space-xl) * 1.25);
    }
}

.example-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-color);
    justify-content: center;
}

.legend-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    font-size: 0.75rem;
    color: var(--text-secondary);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-md);
    min-width: 70px;
    text-align: center;
}

.legend-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    color: white;
    font-size: 1rem;
    font-weight: 700;
}

/* Legend badge color variants (CSP-compliant) */
.legend-badge--context { background: #DC3545; }
.legend-badge--role { background: #E85D04; }
.legend-badge--objective { background: #E85D04; }
.legend-badge--instruction { background: #2196F3; }
.legend-badge--style { background: #2196F3; }
.legend-badge--specifics { background: #9C27B0; }
.legend-badge--tone { background: #9C27B0; }
.legend-badge--parameters { background: #4CAF50; }
.legend-badge--audience { background: #4CAF50; }
.legend-badge--example { background: #FF9800; }
.legend-badge--response { background: #FF9800; }

@media (max-width: 480px) {
    .example-card {
        padding: var(--space-md);
    }

    .example-prompt {
        font-size: 0.875rem;
        line-height: 1.6;
    }

    .example-legend {
        gap: var(--space-xs);
    }

    .legend-item {
        font-size: 0.65rem;
        padding: var(--space-xs) var(--space-sm);
        min-width: 55px;
    }

    .legend-badge {
        width: 24px;
        height: 24px;
        font-size: 0.75rem;
    }
}

/* ============================================
   FAQ PAGE STYLES
   ============================================ */

/* Natural Language Disclaimer Banner */
.disclaimer-banner {
    background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-secondary) 100%);
    border: 2px solid var(--primary);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    text-align: center;
}

.disclaimer-banner h2 {
    color: var(--primary);
    font-size: 1.75rem;
    margin-bottom: var(--space-md);
}

.disclaimer-lead {
    font-size: 1.1rem;
    color: var(--text-secondary);
    max-width: 700px;
    margin: 0 auto var(--space-xl);
    line-height: 1.7;
}

.disclaimer-content {
    display: grid;
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
    text-align: left;
}

.disclaimer-point {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
}

.disclaimer-point h3 {
    color: var(--text-primary);
    font-size: 1.1rem;
    margin-bottom: var(--space-sm);
}

.disclaimer-point p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

.disclaimer-point p em {
    color: var(--primary);
    font-style: normal;
    font-weight: 700;
    font-size: 1.05rem;
}

.disclaimer-banner .callout {
    margin-bottom: 0;
    text-align: left;
}

@media (min-width: 768px) {
    .disclaimer-banner {
        padding: var(--space-2xl);
    }

    .disclaimer-banner h2 {
        font-size: 2rem;
    }

    .disclaimer-content {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* FAQ Accordion */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: var(--transition-normal);
}

.faq-item:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
}

.faq-item[open] {
    border-color: var(--primary);
}

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-lg);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    list-style: none;
    transition: var(--transition-fast);
}

.faq-question::-webkit-details-marker {
    display: none;
}

.faq-question::after {
    content: '+';
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--primary);
    transition: var(--transition-fast);
}

.faq-item[open] .faq-question::after {
    content: '−';
}

.faq-question:hover {
    color: var(--primary);
}

.faq-answer {
    padding: 0 var(--space-lg) var(--space-lg);
    color: var(--text-secondary);
    line-height: 1.7;
}

.faq-answer p {
    margin-bottom: var(--space-md);
}

.faq-answer p:last-child {
    margin-bottom: 0;
}

.faq-answer ul {
    margin: var(--space-md) 0;
    padding-left: var(--space-lg);
}

.faq-link {
    display: inline-block;
    color: var(--primary);
    font-weight: 500;
    text-decoration: none;
    margin-top: var(--space-sm);
    transition: var(--transition-fast);
}

.faq-link:hover {
    text-decoration: underline;
}

/* ============================================
   ACCORDION CONTENT COMPONENT
   Reusable collapsible content sections
   ============================================ */

.accordion-section {
    margin: var(--space-lg) 0;
}

.accordion-item {
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-left: 5px solid var(--primary);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: var(--space-md);
    transition: var(--transition-normal);
}

.accordion-item:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
}

.accordion-item[open] {
    border-color: var(--primary);
    background: var(--bg-secondary);
}

.accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--space-lg);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    cursor: pointer;
    list-style: none;
    transition: var(--transition-fast);
}

.accordion-header::-webkit-details-marker {
    display: none;
}

.accordion-header::after {
    content: '+';
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--primary);
    transition: transform var(--transition-fast);
    flex-shrink: 0;
    margin-left: var(--space-md);
}

.accordion-item[open] .accordion-header::after {
    content: '−';
}

.accordion-header:hover {
    color: var(--primary);
}

.accordion-content {
    padding: 0 var(--space-lg) var(--space-lg);
    color: var(--text-secondary);
    line-height: 1.7;
}

.accordion-content p {
    margin-bottom: var(--space-md);
}

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

/* Dark accordion variant for dark sections */
.accordion-item.accordion-dark {
    background: #1a1a1a;
    border-color: #374151;
    border-left-color: var(--primary);
}

.accordion-item.accordion-dark .accordion-header {
    color: #ffffff;
}

.accordion-item.accordion-dark .accordion-content {
    color: #e5e7eb;
}

.accordion-item.accordion-dark[open] {
    background: #111111;
}

/* Accordion Controls - Expand/Collapse All
   -------------------------------------------- */
.accordion-controls {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
    padding: var(--space-md) 0;
    border-bottom: 2px solid var(--border-color);
}

.accordion-controls-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition-fast);
}

.accordion-controls-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-secondary);
}

.accordion-controls-btn svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

/* Learn Page Accordion Variant
   -------------------------------------------- */
.learn-accordion-section {
    margin-top: var(--space-lg);
}

.learn-accordion {
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-left: 5px solid var(--primary);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--space-md);
    transition: var(--transition-normal);
    position: relative;
}

/* Subtle divider between accordions */
.learn-accordion + .learn-accordion::before {
    content: '';
    position: absolute;
    top: calc(-1 * var(--space-md) / 2);
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-color), transparent);
}

.learn-accordion:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
}

.learn-accordion[open] {
    border-color: var(--primary);
}

.learn-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-lg) var(--space-xl);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    cursor: pointer;
    list-style: none;
    transition: var(--transition-fast);
    background: transparent;
}

.learn-accordion-header::-webkit-details-marker {
    display: none;
}

.learn-accordion-header::after {
    content: '+';
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--primary);
    transition: transform var(--transition-fast);
    flex-shrink: 0;
    margin-left: var(--space-md);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(220, 38, 38, 0.1);
}

.learn-accordion[open] .learn-accordion-header::after {
    content: '−';
}

.learn-accordion-header:hover {
    color: var(--primary);
}

.learn-accordion-title {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.learn-accordion-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--primary);
    color: white;
    font-size: 1.25rem;
    font-weight: 700;
    border-radius: var(--radius-md);
}

.learn-accordion-subtitle {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--text-muted);
    margin-left: var(--space-sm);
}

.learn-accordion-content {
    padding: 0 var(--space-xl) var(--space-xl);
}

/* Ensure existing content components work inside accordions */
.learn-accordion-content .info-cards,
.learn-accordion-content .param-cards,
.learn-accordion-content .content-block,
.learn-accordion-content .example-card,
.learn-accordion-content .callout,
.learn-accordion-content .approach-comparison {
    margin-top: var(--space-lg);
}

.learn-accordion-content .info-cards:first-child,
.learn-accordion-content .param-cards:first-child,
.learn-accordion-content .content-block:first-child {
    margin-top: 0;
}

/* Special styling for accordion with sections that have different backgrounds */
.learn-accordion.accordion-alt {
    background: var(--bg-secondary);
}

/* Static Content Block
   For content that was previously in accordions but now displayed statically
   -------------------------------------------- */
.static-content-block {
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--border-color);
}

.static-content-block:first-of-type {
    margin-top: var(--space-lg);
}

.static-content-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 var(--space-xs) 0;
}

.static-content-subtitle {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin: 0 0 var(--space-lg) 0;
}

.static-content-block .example-card,
.static-content-block .content-block,
.static-content-block .approach-comparison,
.static-content-block .callout {
    margin-top: var(--space-lg);
}

.static-content-block .content-block:first-of-type {
    margin-top: 0;
}

/* ============================================
   CONTENT LIBRARY SEARCH
   Site-wide search with categorization
   ============================================ */

.search-container {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    z-index: 1000;
}

.search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.search-input {
    width: 100%;
    padding: var(--space-md) var(--space-lg);
    padding-left: 3rem;
    font-size: 1rem;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-full);
    background: var(--bg-card);
    color: var(--text-primary);
    transition: var(--transition-fast);
}

.search-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15);
}

.search-input::placeholder {
    color: var(--text-muted);
}

.search-icon {
    position: absolute;
    left: var(--space-md);
    width: 20px;
    height: 20px;
    color: var(--text-muted);
    pointer-events: none;
}

.search-clear {
    position: absolute;
    right: var(--space-md);
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    opacity: 0;
    transition: var(--transition-fast);
}

.search-clear.visible {
    opacity: 1;
}

.search-clear:hover {
    color: var(--primary);
}

/* Search Categories/Filters */
.search-categories {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-top: var(--space-md);
    justify-content: center;
}

.search-category {
    padding: 0.4rem 0.8rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition-fast);
}

.search-category:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.search-category.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

/* Search Results */
.search-results {
    position: absolute;
    top: calc(100% + var(--space-sm));
    left: 0;
    right: 0;
    max-height: 400px;
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: var(--transition-fast);
}

.search-results.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.search-result-item {
    display: block;
    padding: var(--space-md) var(--space-lg);
    text-decoration: none;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
    transition: var(--transition-fast);
}

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

.search-result-item:hover {
    background: var(--bg-secondary);
}

.search-result-category {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
    background: rgba(220, 53, 69, 0.1);
    color: var(--primary);
    margin-bottom: var(--space-xs);
}

.search-result-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.search-result-desc {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.search-no-results {
    padding: var(--space-lg);
    text-align: center;
    color: var(--text-muted);
}

/* ============================================
   METHOD RECOMMENDER TOOL
   Recommends best prompting method for task
   ============================================ */

.recommender-container {
    max-width: 700px;
    margin: 0 auto;
}

.recommender-input-group {
    margin-bottom: var(--space-lg);
}

.recommender-label {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

.recommender-textarea {
    width: 100%;
    padding: var(--space-md);
    font-size: 1rem;
    line-height: 1.6;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    color: var(--text-primary);
    resize: vertical;
    min-height: 120px;
    transition: var(--transition-fast);
}

.recommender-textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15);
}

.recommender-result {
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-left: 5px solid var(--primary);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin-top: var(--space-lg);
    opacity: 0;
    transform: translateY(10px);
    transition: var(--transition-normal);
}

.recommender-result.visible {
    opacity: 1;
    transform: translateY(0);
}

.recommender-method {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.recommender-method-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    font-weight: 700;
    background: var(--primary);
    color: white;
    border-radius: var(--radius-md);
}

.recommender-method-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.recommender-confidence {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.recommender-confidence-bar {
    flex: 1;
    height: 8px;
    background: var(--border-color);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.recommender-confidence-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), #10B981);
    border-radius: var(--radius-full);
    transition: width var(--transition-slow);
}

.recommender-confidence-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.recommender-reasoning {
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: var(--space-md);
}

.recommender-alternatives {
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-color);
}

.recommender-alternatives h4 {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: var(--space-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.recommender-alt-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.recommender-alt-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.8rem;
    font-size: 0.875rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    color: var(--text-secondary);
}

.recommender-alt-score {
    font-weight: 600;
    color: var(--primary);
}

/* ============================================
   GLOSSARY PAGE STYLES
   ============================================ */

/* Glossary Filter Bar
   Purpose: Category filters and sort controls for glossary
   -------------------------------------------- */
.glossary-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-lg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.glossary-filter-categories {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    flex: 1;
}

.glossary-filter-btn {
    padding: 6px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: white;
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-fast);
}

.glossary-filter-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(239, 68, 68, 0.05);
}

.glossary-filter-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.glossary-filter-sort {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
}

.glossary-sort-btn {
    padding: 6px 12px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
}

.glossary-sort-btn:hover {
    color: var(--text);
}

.glossary-sort-btn.active {
    background: white;
    color: var(--text);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.glossary-filter-count {
    font-size: 0.875rem;
    color: var(--text-muted);
    font-weight: 500;
    white-space: nowrap;
}

.glossary-filter-count span {
    font-weight: 700;
    color: var(--primary);
}

/* Glossary term visibility for filtering */
.glossary-term.hidden {
    display: none !important;
}

.glossary-section.hidden {
    display: none !important;
}

/* No results message */
.glossary-no-results {
    text-align: center;
    padding: var(--space-xl);
    color: var(--text-muted);
}

.glossary-no-results h3 {
    color: var(--text);
    margin-bottom: var(--space-sm);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .glossary-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .glossary-filter-categories {
        justify-content: center;
    }

    .glossary-filter-sort {
        align-self: center;
    }

    .glossary-filter-count {
        text-align: center;
    }

    .glossary-filter-btn {
        padding: 6px 12px;
        font-size: 0.8rem;
    }
}

/* Glossary Inline Search
   Purpose: Glossary-only search bar above A-Z nav
   Searches term names and definitions within glossary.json only
   -------------------------------------------- */
.glossary-search-container {
    position: sticky;
    top: calc(128px + var(--ticker-offset, 0px)); /* Below header + A-Z nav + ticker */
    z-index: 500;
    margin-bottom: 0;
    background: var(--bg-secondary);
    padding: var(--space-sm) 0 var(--space-sm) 0;
}

.glossary-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.glossary-search-icon {
    position: absolute;
    left: 16px;
    width: 20px;
    height: 20px;
    color: var(--text-muted);
    pointer-events: none;
    flex-shrink: 0;
}

.glossary-search-input {
    width: 100%;
    padding: 14px 48px 14px 48px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 1rem;
    font-family: var(--font-sans);
    outline: none;
    transition: var(--transition-fast);
}

.glossary-search-input::placeholder {
    color: var(--text-muted);
}

.glossary-search-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15);
}

.glossary-search-clear {
    position: absolute;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--radius-full);
    background: var(--bg-secondary);
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition-fast);
}

.glossary-search-clear svg {
    width: 14px;
    height: 14px;
}

.glossary-search-clear:hover {
    background: var(--primary);
    color: white;
}

.glossary-search-clear.hidden {
    display: none;
}

.glossary-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    max-height: 400px;
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 9000;
}

.glossary-search-results.hidden {
    display: none;
}

.glossary-search-result {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-light);
    transition: var(--transition-fast);
}

.glossary-search-result:last-child {
    border-bottom: none;
}

.glossary-search-result:hover,
.glossary-search-result.active {
    background: rgba(220, 53, 69, 0.06);
}

.glossary-search-result-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.glossary-search-result-name mark {
    background: rgba(220, 53, 69, 0.15);
    color: var(--primary);
    border-radius: 2px;
    padding: 0 2px;
}

.glossary-search-result-excerpt {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.glossary-search-result-excerpt mark {
    background: rgba(220, 53, 69, 0.1);
    color: var(--text-secondary);
    border-radius: 2px;
    padding: 0 1px;
}

.glossary-search-result-match {
    font-size: 0.75rem;
    color: var(--primary);
    font-weight: 500;
}

.glossary-search-no-results {
    padding: 20px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.glossary-search-count {
    padding: 8px 16px;
    font-size: 0.75rem;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-secondary);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* Glossary term highlight animation after search selection */
.glossary-term--highlighted {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.2), var(--shadow-md) !important;
    animation: glossary-highlight-pulse 2s ease-out;
}

@keyframes glossary-highlight-pulse {
    0% { box-shadow: 0 0 0 6px rgba(220, 53, 69, 0.3), var(--shadow-md); }
    100% { box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.2), var(--shadow-md); }
}

/* Glossary Navigation - Sticky A-Z Menu
   Purpose: Floating navigation that follows user while scrolling
   Left-aligned for site consistency
   -------------------------------------------- */
.glossary-nav {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 6px;
    margin-bottom: var(--space-lg);
    /* Sticky positioning for floating navigation */
    position: sticky;
    top: calc(70px + var(--ticker-offset, 0px)); /* Below header + ticker */
    z-index: 100;
    background: var(--bg-secondary);
    padding: var(--space-md) 0;
    /* Allow horizontal scroll on very small screens */
    overflow-x: auto;
    /* Visual separator when stuck */
    border-bottom: 1px solid transparent;
}

.glossary-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    width: 32px;
    height: 32px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition-fast);
    flex-shrink: 0;
}

.glossary-nav a:hover,
.glossary-nav a.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.glossary-section {
    margin-bottom: var(--space-2xl);
}

.glossary-letter {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary);
    padding-bottom: var(--space-sm);
    border-bottom: 2px solid var(--primary);
    margin-bottom: var(--space-lg);
}

.glossary-section {
    content-visibility: auto;
    contain-intrinsic-size: auto 500px;
}

/* Loading state — skeleton shimmer while shard is being fetched */
.glossary-section--loading .glossary-terms {
    min-height: 200px;
    background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--bg-card) 50%, var(--bg-secondary) 75%);
    background-size: 200% 100%;
    animation: glossary-skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-md);
}

@keyframes glossary-skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Error state — failed to load shard */
.glossary-section--error .glossary-terms::before {
    content: "Failed to load terms. Click the letter to retry.";
    display: block;
    text-align: center;
    padding: var(--space-lg);
    color: var(--text-muted);
    font-size: 0.875rem;
}

.glossary-terms {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.glossary-term {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    transition: var(--transition-normal);
}

.glossary-term:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
}

.glossary-term h3 {
    color: var(--text-primary);
    font-size: 1.1rem;
    margin-bottom: var(--space-sm);
}

.glossary-term p {
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.glossary-term .term-link {
    display: inline-block;
    color: var(--primary);
    font-size: 0.9rem;
    text-decoration: none;
    margin-top: var(--space-sm);
    transition: var(--transition-fast);
}

.glossary-term .term-link:hover {
    text-decoration: underline;
}

.glossary-term .term-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-top: var(--space-md);
}

.glossary-term .term-tag {
    display: inline-block;
    padding: 2px 8px;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    color: var(--text-muted);
}

@media (min-width: 768px) {
    .glossary-nav {
        gap: 8px;
    }

    .glossary-nav a {
        width: 36px;
        height: 36px;
        font-size: 0.85rem;
    }

    .glossary-terms {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==============================================
   ACCESSIBILITY DASHBOARD (ADL)
   User-controlled accommodations for UD/UDL
   ============================================== */

/* Floating Toggle Button
   -------------------------------------------- */
.adl-toggle {
    position: fixed;
    bottom: 100px;
    right: 20px;
    z-index: 9998;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    background: #0891B2;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(8, 145, 178, 0.3);
    transition: all var(--transition-normal);
}

.adl-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(8, 145, 178, 0.4);
}

.adl-toggle:focus {
    outline: 3px solid rgba(8, 145, 178, 0.5);
    outline-offset: 2px;
}

.adl-toggle svg {
    width: 24px;
    height: 24px;
    color: white;
}

.adl-toggle.is-active {
    background: var(--bg-dark);
}

/* Dashboard Panel
   -------------------------------------------- */
.adl-panel {
    position: fixed;
    bottom: 160px;
    right: 20px;
    z-index: 9997;
    width: 280px;
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    padding: var(--space-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(0.95);
    transition: all var(--transition-normal);
}

.adl-panel.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.adl-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--border-color);
}

.adl-panel-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.adl-panel-title svg {
    width: 18px;
    height: 18px;
    color: #0891B2;
}

.adl-close {
    width: 28px;
    height: 28px;
    border: none;
    background: var(--bg-secondary);
    border-radius: var(--radius-full);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.adl-close:hover {
    background: var(--primary);
    color: white;
}

.adl-close svg {
    width: 14px;
    height: 14px;
}

/* Control Groups
   -------------------------------------------- */
.adl-control {
    margin-bottom: var(--space-md);
}

.adl-control:last-child {
    margin-bottom: 0;
}

.adl-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-xs);
}

/* Button Group (Text Size)
   -------------------------------------------- */
.adl-btn-group {
    display: flex;
    gap: var(--space-xs);
}

.adl-btn {
    flex: 1;
    padding: var(--space-sm) var(--space-xs);
    border: 2px solid var(--border-color);
    background: var(--bg-card);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.adl-btn:hover {
    border-color: #0891B2;
    color: #0891B2;
}

.adl-btn:focus {
    outline: 2px solid #0891B2;
    outline-offset: 1px;
}

.adl-btn.is-active {
    background: #0891B2;
    border-color: #0891B2;
    color: white;
}

/* Toggle Switch (Contrast Mode)
   -------------------------------------------- */
.adl-switch-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.adl-switch-label {
    font-size: 0.875rem;
    color: var(--text-primary);
}

.adl-switch {
    position: relative;
    width: 48px;
    height: 26px;
}

.adl-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.adl-switch-track {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-full);
    transition: all var(--transition-fast);
}

.adl-switch-track::before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 2px;
    bottom: 2px;
    background: white;
    border-radius: var(--radius-full);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all var(--transition-fast);
}

.adl-switch input:checked + .adl-switch-track {
    background: #0891B2;
    border-color: #0891B2;
}

.adl-switch input:checked + .adl-switch-track::before {
    transform: translateX(22px);
}

.adl-switch input:focus + .adl-switch-track {
    box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.2);
}

/* Range Slider (Dimming)
   -------------------------------------------- */
.adl-range-wrapper {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.adl-range {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    background: var(--bg-secondary);
    border-radius: var(--radius-full);
    outline: none;
}

.adl-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: #0891B2;
    border-radius: var(--radius-full);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(8, 145, 178, 0.3);
    transition: all var(--transition-fast);
}

.adl-range::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.adl-range::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: #0891B2;
    border-radius: var(--radius-full);
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 6px rgba(8, 145, 178, 0.3);
}

.adl-range-value {
    min-width: 32px;
    text-align: right;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Reset Button
   -------------------------------------------- */
.adl-reset {
    width: 100%;
    padding: var(--space-sm);
    margin-top: var(--space-md);
    border: 2px solid var(--border-color);
    background: transparent;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.adl-reset:hover {
    border-color: var(--text-secondary);
    color: var(--text-primary);
}

/* Dimming Overlay
   -------------------------------------------- */
.adl-dim-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, var(--dim-level));
    pointer-events: none;
    z-index: 9990;
    transition: background var(--transition-normal);
}


/* ==============================================
   SEARCH MODAL (Cmd+K / Ctrl+K)
   Full-screen search with grouped results
   ============================================== */

/* Overlay */
.search-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-fast), visibility var(--transition-fast);
}

.search-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Modal Container */
.search-modal {
    position: fixed;
    top: 10%;
    left: 50%;
    transform: translateX(-50%) scale(0.95);
    width: 80%;
    max-width: 80vw;
    min-height: 80vh;
    max-height: 80vh;
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg), 0 0 0 1px var(--border-color);
    z-index: 10001;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.search-modal-overlay.active .search-modal {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) scale(1);
}

/* Search Header */
.search-modal-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg) var(--space-xl);
    border-bottom: 1px solid var(--border-light);
}

.search-modal-icon {
    width: 24px;
    height: 24px;
    color: var(--primary);
    flex-shrink: 0;
}

.search-modal-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 1.25rem;
    color: var(--text-primary);
    outline: none;
    font-family: var(--font-sans);
}

.search-modal-input::placeholder {
    color: var(--text-muted);
}

.search-modal-shortcut {
    font-size: 0.75rem;
    color: var(--text-muted);
    background: var(--bg-secondary);
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    border: 1px solid var(--border-light);
}

.search-modal-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.search-modal-close:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.search-modal-close svg {
    width: 18px;
    height: 18px;
}

/* Search Help/Instructions Panel */
.search-modal-help {
    padding: var(--space-sm) var(--space-xl);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-light);
}

.search-modal-help-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    cursor: pointer;
    user-select: none;
    padding: var(--space-xs) 0;
}

.search-modal-help-title svg {
    width: 14px;
    height: 14px;
    color: var(--primary);
}

.search-modal-help-toggle {
    margin-left: auto;
    width: 18px;
    height: 18px;
    color: var(--text-muted);
    transition: transform var(--transition-fast);
    flex-shrink: 0;
}

.search-modal-help.collapsed .search-modal-help-toggle {
    transform: rotate(-90deg);
}

.search-modal-help-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm) var(--space-lg);
    overflow: hidden;
    max-height: 200px;
    transition: max-height 0.25s ease, opacity 0.2s ease, padding 0.25s ease;
    padding-top: var(--space-sm);
    opacity: 1;
}

.search-modal-help.collapsed .search-modal-help-grid {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
}

.search-modal-help-item {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 0.75rem;
    color: var(--text-muted);
}

.search-modal-help-item strong {
    color: var(--text-secondary);
    font-weight: 500;
}

.search-modal-help-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.6875rem;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    color: var(--text-secondary);
}

.search-modal-help-badge svg {
    width: 10px;
    height: 10px;
}

/* Quick Link Styling */
.search-modal-quick-link {
    text-decoration: none;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    margin: -4px -8px;
}

.search-modal-quick-link:hover {
    background: rgba(255, 255, 255, 0.08);
}

.search-modal-quick-link:hover .search-modal-help-badge {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.search-modal-quick-link:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Search Results Container */
.search-modal-results {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-sm);
    scroll-behavior: smooth;
}

/* Empty State */
.search-modal-empty {
    padding: var(--space-2xl) var(--space-lg);
    text-align: center;
    color: var(--text-muted);
}

.search-modal-empty-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto var(--space-md);
    opacity: 0.5;
}

.search-modal-empty h3 {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-bottom: var(--space-xs);
}

.search-modal-empty p {
    font-size: 0.875rem;
}

/* No Results State */
.search-modal-no-results {
    padding: var(--space-xl) var(--space-lg);
    text-align: center;
    color: var(--text-muted);
}

.search-modal-no-results h3 {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-bottom: var(--space-xs);
}

/* Result Category Group */
.search-result-category {
    margin-bottom: var(--space-sm);
}

.search-result-category-title {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    padding: var(--space-sm) var(--space-sm);
}

/* Individual Result Item */
.search-result-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: background var(--transition-fast);
}

.search-result-item:hover,
.search-result-item.selected {
    background: var(--bg-secondary);
}

.search-result-item.selected {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

.search-result-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    color: var(--text-muted);
}

.search-result-icon svg {
    width: 16px;
    height: 16px;
}

.search-result-content {
    flex: 1;
    min-width: 0;
}

.search-result-title {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-title mark {
    background: rgba(220, 53, 69, 0.2);
    color: var(--primary-dark);
    border-radius: 2px;
    padding: 0 2px;
}

.search-result-excerpt {
    font-size: 0.8125rem;
    color: var(--text-muted);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.search-result-excerpt mark {
    background: rgba(220, 53, 69, 0.15);
    color: var(--text-secondary);
    border-radius: 2px;
    padding: 0 1px;
}

.search-result-arrow {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    flex-shrink: 0;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.search-result-item:hover .search-result-arrow,
.search-result-item.selected .search-result-arrow {
    opacity: 1;
}

/* Search Modal Footer */
.search-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-lg);
    border-top: 1px solid var(--border-light);
    font-size: 0.75rem;
    color: var(--text-muted);
}

.search-modal-footer-hints {
    display: flex;
    gap: var(--space-md);
}

.search-modal-footer-hint {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.search-modal-footer-hint kbd {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    padding: 1px 4px;
    border-radius: 3px;
}

.search-modal-footer-count {
    color: var(--text-muted);
}

/* Header Search Trigger Button */
.search-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-md);
    padding: 8px 14px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
    margin-left: var(--space-lg);
}

.search-trigger:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
    color: white;
}

.search-trigger:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* When header is scrolled (light background) */
.header.scrolled .search-trigger {
    background: var(--bg-secondary);
    border-color: var(--border-light);
    color: var(--text-muted);
}

.header.scrolled .search-trigger:hover {
    background: var(--bg-primary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.header.scrolled .search-trigger-shortcut {
    background: var(--bg-primary);
    border-color: var(--border-light);
    color: var(--text-muted);
}

.search-trigger-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.search-trigger-text {
    display: none;
    flex: 1;
    text-align: left;
}

.search-trigger-shortcut {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.6);
    padding: 2px 6px;
    border-radius: 4px;
    display: none;
    flex-shrink: 0;
}

/* Responsive - Tablet */
@media (min-width: 768px) {
    .search-trigger {
        min-width: 160px;
        padding: 10px 16px;
    }

    .search-trigger-text {
        display: inline;
    }

    .search-trigger-shortcut {
        display: inline;
    }
}

/* Responsive - Desktop */
@media (min-width: 992px) {
    .search-trigger {
        min-width: 220px;
        margin-left: var(--space-xl);
    }
}

/* Responsive - Mobile */
@media (max-width: 767px) {
    .search-modal {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        transform: none;
        width: 100%;
        max-width: 100%;
        max-height: 100%;
        border-radius: 0;
    }

    .search-modal-overlay.active .search-modal {
        transform: none;
    }

    .search-modal-footer-hints {
        display: none;
    }

    .search-modal-shortcut {
        display: none;
    }
}

/* Dark Mode Adjustments */
[data-theme="dark"] .search-modal {
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .search-result-title mark {
    background: rgba(220, 53, 69, 0.3);
    color: #FF6B7A;
}

[data-theme="dark"] .search-result-excerpt mark {
    background: rgba(220, 53, 69, 0.2);
    color: #FF9AA0;
}

/* ==============================================
   TEXT SCALING MODES
   Applied via data-text-scale attribute on html
   Uses root font-size scaling for consistent results
   ============================================== */

/* Base font size (default 16px = 100%) */
html {
    font-size: 100%;
}

/* 2x Text Scale - 125% base font size */
html[data-text-scale="2"] {
    font-size: 125%;
    --text-scale: 1.25;
}

/* 3x Text Scale - 150% base font size */
html[data-text-scale="3"] {
    font-size: 150%;
    --text-scale: 1.5;
}

/* Prevent ADL panel from scaling with document */
.adl-panel,
.adl-toggle {
    font-size: 16px !important;
}

.adl-label {
    font-size: 12px !important;
}

.adl-btn {
    font-size: 14px !important;
}

.adl-switch-label,
.adl-range-value,
.adl-reset {
    font-size: 14px !important;
}

.adl-panel-title {
    font-size: 16px !important;
}

/* ==============================================
   HIGH CONTRAST MODE
   Applied via data-contrast attribute on html
   ============================================== */

[data-contrast="high"] {
    --text-primary: #000000;
    --text-secondary: #1a1a1a;
    --text-muted: #333333;
    --bg-primary: #FFFFFF;
    --bg-secondary: #F0F0F0;
    --bg-card: #FFFFFF;
    --border-color: #000000;
}

[data-contrast="high"] .header,
[data-contrast="high"] .footer {
    border-color: #000000;
}

[data-contrast="high"] a {
    text-decoration: underline;
}

[data-contrast="high"] .btn {
    border-width: 3px;
}

/* ==============================================
   READ ALOUD FEATURE
   Text-to-speech controls in accessibility panel
   ============================================== */

/* Read Aloud Control Group */
.adl-readaloud {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.adl-readaloud-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.adl-play-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--primary-color, #6366f1);
    color: white;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    flex-shrink: 0;
}

.adl-play-btn:hover {
    background: var(--primary-dark, #4f46e5);
    transform: scale(1.05);
}

.adl-play-btn:active {
    transform: scale(0.95);
}

.adl-play-btn.is-playing {
    background: #dc3545;
}

.adl-play-btn svg {
    width: 18px;
    height: 18px;
}

.adl-play-btn .pause-icon {
    display: none;
}

.adl-play-btn.is-playing .play-icon {
    display: none;
}

.adl-play-btn.is-playing .pause-icon {
    display: block;
}

/* Speed Control Buttons */
.adl-speed-group {
    display: flex;
    gap: 2px;
    flex: 1 1 100%;
}

.adl-speed-btn {
    flex: 1;
    padding: 4px 6px;
    font-size: 11px !important;
    font-weight: 500;
    border: 1px solid var(--border-color, #e5e7eb);
    background: var(--bg-secondary, #f9fafb);
    color: var(--text-secondary, #6b7280);
    cursor: pointer;
    transition: all 0.2s;
}

.adl-speed-btn:first-child {
    border-radius: 6px 0 0 6px;
}

.adl-speed-btn:last-child {
    border-radius: 0 6px 6px 0;
}

.adl-speed-btn:hover {
    background: var(--bg-card, #fff);
}

.adl-speed-btn.is-active {
    background: var(--primary-color, #6366f1);
    color: white;
    border-color: var(--primary-color, #6366f1);
}

/* Reading indicator */
.adl-reading-indicator {
    font-size: 11px !important;
    color: var(--text-muted, #9ca3af);
    min-height: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.adl-reading-indicator.is-active {
    color: var(--primary-color, #6366f1);
}

/* Currently being read highlight */
[data-reading="true"] {
    background: rgba(99, 102, 241, 0.15) !important;
    outline: 2px solid var(--primary-color, #6366f1);
    outline-offset: 2px;
}

/* Reading mode cursor — shows clickable text when read-aloud active */
.adl-reading-mode main {
    cursor: pointer;
}

.adl-reading-mode main h1:hover,
.adl-reading-mode main h2:hover,
.adl-reading-mode main h3:hover,
.adl-reading-mode main h4:hover,
.adl-reading-mode main p:hover,
.adl-reading-mode main li:hover,
.adl-reading-mode main td:hover {
    background: rgba(8, 145, 178, 0.08);
    border-radius: 4px;
}

/* Volume control — speaker icon inline with slider */
.adl-volume-control .adl-range-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.adl-volume-control .adl-volume-icon {
    width: 18px;
    height: 18px;
    color: var(--text-muted, #9ca3af);
    flex-shrink: 0;
}

/* ADL Panel - Responsive
   -------------------------------------------- */
@media (max-width: 480px) {
    .adl-toggle {
        bottom: calc(80px + var(--safe-area-inset-bottom));
        right: calc(12px + var(--safe-area-inset-right));
        width: 48px;
        height: 48px;
    }

    .adl-panel {
        bottom: calc(140px + var(--safe-area-inset-bottom));
        right: calc(12px + var(--safe-area-inset-right));
        left: calc(12px + var(--safe-area-inset-left));
        width: auto;
        max-height: 60vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ==============================================
   DATA VISUALIZATION COMPONENTS
   Charts, gauges, stat cards, timelines
   ============================================== */

/* --- Table of Contents Grid --- */
.toc-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-sm);
    margin: var(--space-xl) 0;
}

.toc-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.toc-item:hover {
    border-color: var(--primary);
    background: rgba(220, 53, 69, 0.05);
    transform: translateX(4px);
}

.toc-number {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--primary);
    min-width: 28px;
}

.toc-text {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text);
}

@media (min-width: 768px) {
    .toc-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* --- Feature List (Bulleted) --- */
.feature-list {
    margin: var(--space-md) 0;
    padding-left: var(--space-xl);
}

.feature-list li {
    margin-bottom: var(--space-sm);
    color: var(--text-secondary);
    line-height: 1.6;
}

.feature-list li strong {
    color: var(--text);
}


/* --- Horizontal Bar Chart --- */
.bar-chart h3 {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: var(--space-sm);
    line-height: 1.4;
}

.bar-chart {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin: var(--space-xl) 0;
}

.bar-chart-item {
    display: grid;
    grid-template-columns: 140px 1fr 60px;
    align-items: center;
    gap: var(--space-md);
}

.bar-chart-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text);
    text-align: right;
}

.bar-chart-track {
    height: 24px;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    overflow: hidden;
    position: relative;
}

.bar-chart-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary) 0%, var(--primary-light) 100%);
    border-radius: var(--radius-sm);
    transition: width 0.8s ease-out;
}

.bar-chart-fill--success {
    background: linear-gradient(90deg, #22c55e 0%, #4ade80 100%);
}

.bar-chart-fill--warning {
    background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%);
}

.bar-chart-fill--info {
    background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 100%);
}

.bar-chart-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
    text-align: left;
}

/* --- Gauge/Progress Circle --- */
.gauge-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xl);
    justify-content: center;
    margin: var(--space-xl) 0;
}

.gauge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
}

.gauge-circle {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: conic-gradient(
        var(--primary) calc(var(--gauge-value, 0) * 1%),
        var(--bg-secondary) 0%
    );
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.gauge-circle::before {
    content: '';
    position: absolute;
    width: 90px;
    height: 90px;
    background: var(--bg-card);
    border-radius: 50%;
}

.gauge-value {
    position: relative;
    z-index: 1;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text);
}

.gauge-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
    text-align: center;
}

.gauge-sublabel {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.gauge--success .gauge-circle {
    background: conic-gradient(
        #22c55e calc(var(--gauge-value, 0) * 1%),
        var(--bg-secondary) 0%
    );
}

.gauge--warning .gauge-circle {
    background: conic-gradient(
        #f59e0b calc(var(--gauge-value, 0) * 1%),
        var(--bg-secondary) 0%
    );
}

/* --- Comparison Table --- */
.comparison-table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-xl) 0;
    font-size: 0.9375rem;
}

.comparison-table th,
.comparison-table td {
    padding: var(--space-md);
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.comparison-table th {
    background: var(--bg-secondary);
    font-weight: 600;
    color: var(--text);
}

.comparison-table tr:hover {
    background: rgba(220, 53, 69, 0.03);
}

.comparison-highlight {
    background: rgba(34, 197, 94, 0.1) !important;
    font-weight: 600;
}

.comparison-table .check {
    color: #22c55e;
    font-weight: bold;
}

.comparison-table .cross {
    color: #ef4444;
}

.comparison-table .partial {
    color: #f59e0b;
}

/* Compliance Status Indicators ---- */
.status-aligned { color: #22c55e; font-weight: 600; }
.status-compliant { color: #22c55e; font-weight: 600; }
.status-low-risk { color: #3b82f6; font-weight: 600; }
.status-na { color: #6b7280; font-style: italic; }

/* --- Timeline Component --- */
.timeline {
    position: relative;
    padding-left: var(--space-2xl);
    margin: var(--space-xl) 0;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--primary) 0%, var(--primary-light) 100%);
    border-radius: 2px;
}

.timeline-item {
    position: relative;
    padding-bottom: var(--space-xl);
}

.timeline-item:last-child {
    padding-bottom: 0;
}

.timeline-marker {
    position: absolute;
    left: calc(-1 * var(--space-2xl) + 2px);
    width: 16px;
    height: 16px;
    background: var(--primary);
    border: 3px solid var(--bg-card);
    border-radius: 50%;
    box-shadow: 0 0 0 3px var(--primary);
}

.timeline-content {
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
}

.timeline-date {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-xs);
}

.timeline-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: var(--space-xs);
}

.timeline-text {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* --- Citation Component --- */
.citations-section {
    margin-top: var(--space-2xl);
    padding-top: var(--space-xl);
    border-top: 2px solid var(--border-color);
}

.sources-updating {
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
    padding: var(--space-lg);
}

.citations-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: var(--space-lg);
}

.citations-list {
    list-style: none;
    counter-reset: citation;
}

.citation-item {
    counter-increment: citation;
    display: flex;
    gap: var(--space-md);
    padding: var(--space-sm) 0;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.citation-item::before {
    content: '[' counter(citation) ']';
    font-weight: 600;
    color: var(--primary);
    min-width: 30px;
}

.citation-item a {
    color: var(--text-secondary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.citation-item a:hover {
    color: var(--primary);
}

.inline-citation {
    font-size: 0.75rem;
    color: var(--primary);
    vertical-align: super;
    text-decoration: none;
    font-weight: 600;
}

/* --- Feature Matrix Grid --- */
.feature-matrix {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: var(--space-md);
    margin: var(--space-xl) 0;
}

.feature-matrix-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.feature-matrix-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.feature-matrix-icon svg {
    width: 20px;
    height: 20px;
    color: white;
}

.feature-matrix-content h4 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: var(--space-xs);
}

.feature-matrix-content p {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* --- Process Flow Diagram --- */
.process-flow {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-items: center;
    justify-content: center;
    margin: var(--space-xl) 0;
}

.process-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-md);
}

.process-step-number {
    width: 48px;
    height: 48px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: var(--space-sm);
}

.process-step-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
}

.process-arrow {
    font-size: 1.5rem;
    color: var(--text-muted);
}

/* --- Before/After Comparison --- */
.before-after {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    margin: var(--space-xl) 0;
}

.before-after-column {
    padding: var(--space-lg);
    border-radius: var(--radius-md);
}

.before-column {
    background: rgba(239, 68, 68, 0.05);
    border: 2px solid rgba(239, 68, 68, 0.2);
}

.after-column {
    background: rgba(34, 197, 94, 0.05);
    border: 2px solid rgba(34, 197, 94, 0.2);
}

.before-after-title {
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-md);
}

.before-column .before-after-title {
    color: #ef4444;
}

.after-column .before-after-title {
    color: #22c55e;
}

/* --- Prompt Showcase (Modern 2026 Design) --- */
.prompt-showcase {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--space-lg);
    margin: var(--space-xl) 0;
    align-items: stretch;
}

.prompt-card {
    position: relative;
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.prompt-card:hover {
    transform: translateY(-4px);
}

/* Weak/Before Card - Solid Red */
.prompt-card--weak {
    background: #dc2626;
    border: 1px solid #b91c1c;
    box-shadow: 0 4px 24px rgba(220, 38, 38, 0.3);
}

.prompt-card--weak:hover {
    box-shadow: 0 8px 32px rgba(220, 38, 38, 0.4);
}

/* Strong/After Card - Solid Green */
.prompt-card--strong {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    border: 1px solid #166534;
    box-shadow: 0 4px 24px rgba(22, 163, 74, 0.3);
}

.prompt-card--strong:hover {
    box-shadow: 0 8px 32px rgba(22, 163, 74, 0.4);
}

/* Card Label */
.prompt-card__label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-full);
    margin-bottom: var(--space-md);
    width: fit-content;
}

.prompt-card--weak .prompt-card__label {
    background: rgba(0, 0, 0, 0.2);
    color: #ffffff;
}

.prompt-card--strong .prompt-card__label {
    background: rgba(0, 0, 0, 0.2);
    color: #ffffff;
}

.prompt-card__label-icon {
    font-size: 1rem;
    line-height: 1;
}

/* Quote Box */
.prompt-card__quote {
    position: relative;
    background: var(--surface);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.9375rem;
    line-height: 1.6;
    flex-grow: 1;
    border-left: 3px solid transparent;
}

.prompt-card--weak .prompt-card__quote {
    border-left-color: rgba(0, 0, 0, 0.3);
    color: #ffffff;
    background: rgba(0, 0, 0, 0.15);
}

.prompt-card--strong .prompt-card__quote {
    border-left-color: rgba(0, 0, 0, 0.3);
    color: #ffffff;
    background: rgba(0, 0, 0, 0.15);
}

.prompt-card__quote::before {
    content: '"';
    position: absolute;
    top: -8px;
    left: var(--space-sm);
    font-size: 3rem;
    font-family: Georgia, serif;
    line-height: 1;
    opacity: 0.15;
}

/* Result Badge */
.prompt-card__result {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
}

.prompt-card--weak .prompt-card__result {
    background: rgba(0, 0, 0, 0.2);
    color: #ffffff;
}

.prompt-card--strong .prompt-card__result {
    background: rgba(0, 0, 0, 0.2);
    color: #ffffff;
}

.prompt-card__result-icon {
    font-size: 1.125rem;
    line-height: 1;
}

/* Center Arrow */
.prompt-showcase__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
}

.prompt-showcase__arrow-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-md);
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    border-radius: var(--radius-full);
    color: white;
    box-shadow: 0 4px 16px rgba(230, 57, 70, 0.3);
}

.prompt-showcase__arrow-icon {
    font-size: 1.5rem;
    animation: pulse-arrow 2s ease-in-out infinite;
}

.prompt-showcase__arrow-text {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
}

@keyframes pulse-arrow {
    0%, 100% { transform: translateX(0); opacity: 1; }
    50% { transform: translateX(3px); opacity: 0.7; }
}

/* Responsive */
@media (max-width: 900px) {
    .prompt-showcase {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        gap: var(--space-md);
    }

    .prompt-showcase__arrow {
        order: 2;
        padding: var(--space-sm);
    }

    .prompt-showcase__arrow-inner {
        flex-direction: row;
        padding: var(--space-sm) var(--space-md);
    }

    .prompt-showcase__arrow-icon {
        animation: pulse-arrow-down 2s ease-in-out infinite;
    }

    .prompt-card--weak {
        order: 1;
    }

    .prompt-card--strong {
        order: 3;
    }

    @keyframes pulse-arrow-down {
        0%, 100% { transform: translateY(0) rotate(90deg); opacity: 1; }
        50% { transform: translateY(3px) rotate(90deg); opacity: 0.7; }
    }
}

@media (max-width: 480px) {
    .prompt-card {
        padding: var(--space-lg);
    }

    .prompt-card__quote {
        padding: var(--space-md);
        font-size: 0.875rem;
    }
}

/* --- Data Visualization Responsive --- */
@media (max-width: 768px) {
    .bar-chart-item {
        grid-template-columns: 100px 1fr 50px;
    }

    .gauge-circle {
        width: 100px;
        height: 100px;
    }

    .gauge-circle::before {
        width: 75px;
        height: 75px;
    }

    .gauge-value {
        font-size: 1.25rem;
    }

    .timeline {
        padding-left: var(--space-xl);
    }

    .timeline-marker {
        left: calc(-1 * var(--space-xl) + 2px);
    }

    .before-after {
        grid-template-columns: 1fr;
    }

    .process-flow {
        flex-direction: column;
    }

    .process-arrow {
        transform: rotate(90deg);
    }
}

@media (max-width: 480px) {
    .bar-chart-item {
        grid-template-columns: 1fr;
        gap: var(--space-xs);
    }

    .bar-chart-label {
        text-align: left;
    }
}

/* ==============================================
   HISTORICAL CONTEXT & LEARNING PATH COMPONENTS
   Sprint 1 - Foundations Enhancement
   ============================================== */

/* --- Historical Context Badge --- */
.historical-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.1) 0%, rgba(220, 53, 69, 0.05) 100%);
    border: 1px solid rgba(220, 53, 69, 0.3);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.historical-badge::before {
    content: '📅';
    font-size: 0.875rem;
}

/* --- Evolution Timeline (Horizontal) --- */
.evolution-timeline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: var(--space-xl) var(--space-md);
    margin: var(--space-xl) 0;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    overflow-x: auto;
    position: relative;
}

.evolution-timeline::before {
    content: '';
    position: absolute;
    top: 50%;
    left: var(--space-xl);
    right: var(--space-xl);
    height: 3px;
    background: linear-gradient(90deg, var(--border-color) 0%, var(--primary) 50%, var(--border-color) 100%);
    transform: translateY(-50%);
    z-index: 0;
}

.era-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    min-width: 120px;
    text-align: center;
    position: relative;
    z-index: 1;
    transition: all var(--transition-normal);
}

.era-marker:hover {
    border-color: var(--primary);
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.era-marker--active {
    border-color: var(--primary);
    background: linear-gradient(135deg, #fef2f2 0%, #fff5f5 100%);
    z-index: 2;
}

[data-theme="dark"] .era-marker--active {
    background: linear-gradient(135deg, #2a1215 0%, #231518 100%);
}

.era-marker__year {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.era-marker__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
}

.era-marker__desc {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.4;
}

/* --- Evolution Callout (Bridge to Next Topic) --- */
.evolution-callout {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-xl);
    margin: var(--space-2xl) 0;
    background: linear-gradient(135deg, var(--bg-secondary) 0%, rgba(220, 53, 69, 0.05) 100%);
    border: 2px solid var(--border-color);
    border-left: 4px solid var(--primary);
    border-radius: var(--radius-lg);
    transition: all var(--transition-normal);
}

.evolution-callout:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
    transform: translateX(4px);
}

.evolution-callout__icon {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border-radius: var(--radius-md);
    font-size: 1.5rem;
}

.evolution-callout__content {
    flex: 1;
}

.evolution-callout__label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--space-xs);
}

.evolution-callout__title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: var(--space-xs);
}

.evolution-callout__desc {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.evolution-callout__arrow {
    flex-shrink: 0;
    font-size: 1.5rem;
    color: var(--primary);
    transition: transform var(--transition-fast);
}

.evolution-callout:hover .evolution-callout__arrow {
    transform: translateX(4px);
}

/* --- Science Box (Why This Works) --- */
.science-box {
    position: relative;
    padding: var(--space-xl);
    margin: var(--space-xl) 0;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 2px solid #7dd3fc;
    border-radius: var(--radius-lg);
}

[data-theme="dark"] .science-box {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.1) 0%, rgba(14, 165, 233, 0.05) 100%);
    border-color: rgba(14, 165, 233, 0.3);
}

.science-box__header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.science-box__icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    border-radius: var(--radius-md);
    font-size: 1.25rem;
}

.science-box__title {
    font-size: 1rem;
    font-weight: 700;
    color: #0369a1;
}

[data-theme="dark"] .science-box__title {
    color: #38bdf8;
}

.science-box__content {
    font-size: 0.9375rem;
    color: #0c4a6e;
    line-height: 1.7;
}

[data-theme="dark"] .science-box__content {
    color: var(--text-secondary);
}

.science-box__content strong {
    color: #0369a1;
}

[data-theme="dark"] .science-box__content strong {
    color: #7dd3fc;
}

/* --- Learning Path Component --- */
.learning-path {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: var(--space-xl) 0;
    position: relative;
}

.learning-path::before {
    content: '';
    position: absolute;
    left: 23px;
    top: var(--space-xl);
    bottom: var(--space-xl);
    width: 3px;
    background: linear-gradient(180deg, var(--primary) 0%, var(--primary-light) 50%, var(--border-color) 100%);
    border-radius: 2px;
}

.path-node {
    display: flex;
    gap: var(--space-lg);
    padding: var(--space-md) 0;
    position: relative;
}

.path-node__marker {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    border: 3px solid var(--border-color);
    border-radius: 50%;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-muted);
    z-index: 1;
    transition: all var(--transition-normal);
}

.path-node--active .path-node__marker {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
    box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.2);
}

.path-node--completed .path-node__marker {
    background: #22c55e;
    border-color: #22c55e;
    color: white;
}

.path-node--completed .path-node__marker::after {
    content: '✓';
}

.path-node__content {
    flex: 1;
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: all var(--transition-normal);
}

.path-node--active .path-node__content {
    border-color: var(--primary);
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.03) 0%, transparent 100%);
}

.path-node__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: var(--space-xs);
}

.path-node__desc {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.path-node__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    margin-top: var(--space-sm);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    transition: gap var(--transition-fast);
}

.path-node__link:hover {
    gap: var(--space-sm);
}

/* --- Use Case Cards --- */
.use-case-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    gap: var(--space-lg);
    margin: var(--space-xl) 0;
}

.use-case-card {
    padding: var(--space-xl);
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    transition: all var(--transition-normal);
}

.use-case-card:hover {
    border-color: var(--primary);
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.use-case-card__icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.1) 0%, rgba(220, 53, 69, 0.05) 100%);
    border-radius: var(--radius-md);
    font-size: 1.5rem;
    margin-bottom: var(--space-md);
}

.use-case-card__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: var(--space-sm);
}

.use-case-card__desc {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.use-case-card__tag {
    display: inline-block;
    margin-top: var(--space-md);
    padding: var(--space-xs) var(--space-sm);
    background: var(--bg-secondary);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
}

/* --- Framework Comparison Matrix --- */
.framework-comparison {
    overflow-x: auto;
    margin: var(--space-xl) 0;
}

.framework-comparison table {
    width: 100%;
    min-width: 600px;
    border-collapse: collapse;
}

.framework-comparison th,
.framework-comparison td {
    padding: var(--space-md);
    text-align: center;
    border: 1px solid var(--border-color);
}

.framework-comparison th {
    background: var(--bg-secondary);
    font-weight: 600;
    color: var(--text);
}

.framework-comparison th:first-child {
    text-align: left;
}

.framework-comparison td:first-child {
    text-align: left;
    font-weight: 500;
}

.framework-comparison .check-mark {
    color: #22c55e;
    font-size: 1.25rem;
}

.framework-comparison .cross-mark {
    color: #9ca3af;
    font-size: 1.25rem;
}

.framework-comparison tr:hover {
    background: rgba(220, 53, 69, 0.03);
}

/* --- Interactive Example Toggle --- */
.example-toggle-container {
    margin: var(--space-xl) 0;
}

.example-toggle-tabs {
    display: flex;
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
    background: var(--bg-secondary);
    padding: var(--space-xs);
    border-radius: var(--radius-md);
}

.example-toggle-btn {
    flex: 1;
    padding: var(--space-sm) var(--space-md);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.example-toggle-btn:hover {
    color: var(--text);
}

.example-toggle-btn.active {
    background: var(--bg-card);
    color: var(--primary);
    box-shadow: var(--shadow-sm);
}

.example-toggle-panel {
    display: none;
    padding: var(--space-lg);
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
}

.example-toggle-panel.active {
    display: block;
}

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    .evolution-timeline {
        flex-direction: column;
        padding: var(--space-lg);
    }

    .evolution-timeline::before {
        top: var(--space-xl);
        bottom: var(--space-xl);
        left: 50%;
        right: auto;
        width: 3px;
        height: auto;
        transform: translateX(-50%);
    }

    .era-marker {
        min-width: 100%;
    }

    .evolution-callout {
        flex-direction: column;
        text-align: center;
    }

    .evolution-callout__arrow {
        transform: rotate(90deg);
    }

    .evolution-callout:hover .evolution-callout__arrow {
        transform: rotate(90deg) translateX(4px);
    }

    .learning-path::before {
        left: 23px;
    }

    .path-node {
        flex-direction: column;
    }

    .path-node__marker {
        align-self: flex-start;
    }

    .path-node__content {
        margin-left: var(--space-2xl);
    }
}

/* ============================================
   PERSONA ARCHITECT TOOL
   ============================================ */
.persona-builder {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.persona-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.persona-label {
    font-weight: 600;
    color: var(--text);
    font-size: 0.9375rem;
}

.persona-input {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    color: var(--text);
    font-size: 1rem;
    transition: border-color var(--transition-fast);
}

.persona-input:focus {
    outline: none;
    border-color: var(--primary);
}

.persona-slider-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.persona-slider-value {
    font-weight: 600;
    color: var(--primary);
    font-size: 0.875rem;
}

.persona-slider-container {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.persona-slider-min,
.persona-slider-max {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
    min-width: 90px;
}

.persona-slider-max {
    text-align: right;
}

.persona-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 8px;
    background: var(--border-color);
    border-radius: var(--radius-full);
    cursor: pointer;
}

.persona-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--primary);
    border-radius: 50%;
    cursor: pointer;
    transition: transform var(--transition-fast);
}

.persona-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.persona-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--primary);
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

.persona-hint {
    font-size: 0.8125rem;
    color: var(--text-muted);
    font-style: italic;
}

.persona-toggles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-sm);
}

.persona-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    cursor: pointer;
    padding: var(--space-sm);
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
}

.persona-toggle:hover {
    background: var(--bg-hover);
}

.persona-toggle input {
    display: none;
}

.persona-toggle-switch {
    width: 40px;
    height: 22px;
    background: var(--border-color);
    border-radius: var(--radius-full);
    position: relative;
    transition: background var(--transition-fast);
}

.persona-toggle-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 50%;
    transition: transform var(--transition-fast);
}

.persona-toggle input:checked + .persona-toggle-switch {
    background: var(--primary);
}

.persona-toggle input:checked + .persona-toggle-switch::after {
    transform: translateX(18px);
}

.persona-toggle-label {
    font-size: 0.875rem;
    color: var(--text);
}

.persona-output {
    display: none;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin-top: var(--space-md);
}

.persona-output.is-visible {
    display: block;
}

.persona-output-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-md);
}

.persona-output-header h3 {
    margin: 0;
    font-size: 1rem;
}

.persona-output-content {
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    font-family: monospace;
    font-size: 0.875rem;
    line-height: 1.6;
    white-space: pre-wrap;
    color: var(--text);
}

/* ============================================
   TEMPERATURE VISUALIZER TOOL
   ============================================ */
.temperature-visualizer {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

.temp-section {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
}

.temp-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-md);
}

.temp-header h3 {
    margin: 0;
    font-size: 1.125rem;
}

.temp-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
    font-family: monospace;
}

.temp-slider-container {
    margin-bottom: var(--space-md);
}

.temp-slider-track {
    position: relative;
    height: 12px;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899, #f97316);
    border-radius: var(--radius-full);
    margin-bottom: var(--space-xs);
}

.temp-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
}

.temp-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    background: white;
    border: 3px solid var(--primary);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.temp-slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    background: white;
    border: 3px solid var(--primary);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.temp-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.temp-analogy {
    display: flex;
    gap: var(--space-md);
    align-items: flex-start;
    padding: var(--space-md);
    background: var(--bg-primary);
    border-radius: var(--radius-md);
}

.temp-analogy-icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.temp-analogy-content h4 {
    margin: 0 0 var(--space-xs) 0;
    font-size: 1rem;
    color: var(--primary);
}

.temp-analogy-content p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-muted);
}

.temp-combined {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    text-align: center;
}

.temp-combined h3 {
    margin: 0 0 var(--space-md) 0;
}

.temp-combined-visual {
    margin-bottom: var(--space-md);
}

.temp-meter {
    height: 24px;
    background: var(--bg-primary);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-bottom: var(--space-xs);
}

.temp-meter-fill {
    height: 100%;
    width: 50%;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    border-radius: var(--radius-full);
    transition: width var(--transition-normal);
}

.temp-meter-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.temp-combined-desc {
    font-size: 0.9375rem;
    color: var(--text);
    margin: 0;
}

.temp-recommendations h3 {
    margin: 0 0 var(--space-md) 0;
    font-size: 1rem;
}

.temp-task-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--space-sm);
}

.temp-task-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-md);
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.temp-task-btn:hover {
    border-color: var(--primary);
    background: var(--bg-hover);
}

.temp-task-btn.is-selected {
    border-color: var(--primary);
    background: rgba(99, 102, 241, 0.1);
}

.temp-task-icon {
    font-size: 1.5rem;
}

.temp-task-name {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text);
}

.temp-task-values {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-family: monospace;
}

/* ============================================
   BIAS RADAR TOOL
   ============================================ */
.bias-radar {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.bias-input-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.bias-label {
    font-weight: 600;
    color: var(--text);
}

.bias-textarea {
    width: 100%;
    padding: var(--space-md);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    color: var(--text);
    font-size: 1rem;
    resize: vertical;
    min-height: 100px;
}

.bias-textarea:focus {
    outline: none;
    border-color: var(--primary);
}

.bias-results {
    display: none;
}

.bias-results.is-visible {
    display: block;
}

.bias-score-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-lg);
}

.bias-score-circle {
    position: relative;
    width: 120px;
    height: 120px;
}

.bias-score-circle svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.bias-score-bg {
    fill: none;
    stroke: var(--border-color);
    stroke-width: 8;
}

.bias-score-fill {
    fill: none;
    stroke: var(--primary);
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 283;
    stroke-dashoffset: 283;
    transition: stroke-dashoffset 0.5s ease;
}

.bias-score-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.bias-score-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text);
}

.bias-score-label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.bias-score-desc {
    text-align: center;
    color: var(--text);
    font-size: 0.9375rem;
}

.bias-findings {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.bias-finding {
    display: flex;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--bg-card);
    border-left: 4px solid #f59e0b;
    border-radius: var(--radius-md);
}

.bias-finding-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.bias-finding-content h4 {
    margin: 0 0 var(--space-xs) 0;
    font-size: 0.9375rem;
    color: var(--text);
}

.bias-finding-content p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-muted);
}

.bias-finding-highlight {
    background: rgba(245, 158, 11, 0.2);
    padding: 0 var(--space-xs);
    border-radius: var(--radius-sm);
    font-weight: 600;
}

.bias-rewrite {
    background: var(--bg-card);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
}

.bias-rewrite h3 {
    margin: 0 0 var(--space-md) 0;
    font-size: 1rem;
    color: #10b981;
}

.bias-rewrite-content {
    background: var(--bg-primary);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
    line-height: 1.6;
    margin-bottom: var(--space-md);
}

.bias-examples {
    margin-top: var(--space-lg);
}

.bias-examples h3 {
    margin: 0 0 var(--space-md) 0;
    font-size: 1rem;
}

.bias-example-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: var(--space-sm);
}

.bias-example-btn {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-md);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    text-align: left;
    transition: all var(--transition-fast);
}

.bias-example-btn:hover {
    border-color: var(--primary);
    background: var(--bg-hover);
}

.bias-example-type {
    font-size: 0.75rem;
    font-weight: 600;
    padding: var(--space-2xs) var(--space-sm);
    border-radius: var(--radius-full);
    width: fit-content;
}

.bias-example-type--loaded {
    background: rgba(245, 158, 11, 0.2);
    color: #d97706;
}

.bias-example-type--neutral {
    background: rgba(16, 185, 129, 0.2);
    color: #059669;
}

.bias-example-text {
    font-size: 0.875rem;
    color: var(--text);
    font-style: italic;
}

/* ============================================
   SPECIFICITY SLIDER GAME
   ============================================ */
.specificity-game {
    position: relative;
}

.spec-game-header {
    display: flex;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-lg);
}

.spec-score-display,
.spec-round-display,
.spec-streak-display {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.spec-score-label,
.spec-round-label,
.spec-streak-label {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.spec-score-value,
.spec-round-value,
.spec-streak-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary);
}

.spec-prompt-area {
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
    text-align: center;
}

.spec-prompt-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: var(--space-sm);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.spec-prompt-text {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text);
}

.spec-meter-area {
    text-align: center;
    margin-bottom: var(--space-lg);
}

.spec-meter-label {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-bottom: var(--space-sm);
}

.spec-meter {
    position: relative;
    height: 40px;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.spec-meter-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #ef4444, #f59e0b, #10b981);
    transition: width var(--transition-normal);
}

.spec-meter-stars {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-around;
    padding: 0 var(--space-md);
}

.spec-star {
    font-size: 1.25rem;
    color: var(--border-color);
    transition: color var(--transition-fast), transform var(--transition-fast);
}

.spec-star.is-active {
    color: #fbbf24;
    transform: scale(1.2);
}

.spec-meter-hint {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin-top: var(--space-sm);
}

.spec-cards-area {
    margin-bottom: var(--space-lg);
}

.spec-cards-label {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-bottom: var(--space-md);
}

.spec-cards-hand {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.spec-card {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: 0.875rem;
}

.spec-card:hover {
    border-color: var(--primary);
    background: var(--bg-hover);
}

.spec-card.is-selected {
    border-color: var(--primary);
    background: rgba(99, 102, 241, 0.15);
}

.spec-card.is-relevant {
    border-color: #10b981;
}

.spec-card.is-irrelevant {
    border-color: #ef4444;
}

.spec-card-icon {
    font-size: 1rem;
}

.spec-selected-area {
    display: none;
    margin-bottom: var(--space-lg);
}

.spec-selected-area.has-cards {
    display: block;
}

.spec-selected-label {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-bottom: var(--space-sm);
}

.spec-selected-cards {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.spec-preview-area {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.spec-preview-label {
    font-size: 0.75rem;
    color: #10b981;
    margin-bottom: var(--space-sm);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.spec-preview-text {
    font-size: 1rem;
    color: var(--text);
    line-height: 1.6;
}

.spec-actions {
    display: flex;
    gap: var(--space-md);
}

.spec-actions .btn {
    flex: 1;
}

.spec-result {
    display: none;
    text-align: center;
    padding: var(--space-xl);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    margin-top: var(--space-lg);
}

.spec-result.is-visible {
    display: block;
}

.spec-result-icon {
    font-size: 4rem;
    margin-bottom: var(--space-md);
}

.spec-result-message {
    font-size: 1.125rem;
    color: var(--text);
    margin-bottom: var(--space-lg);
}

.spec-gameover {
    display: none;
    text-align: center;
    padding: var(--space-xl);
}

.spec-gameover.is-visible {
    display: block;
}

.spec-final-score {
    margin: var(--space-lg) 0;
}

.spec-final-label {
    display: block;
    font-size: 0.875rem;
    color: var(--text-muted);
}

.spec-final-value {
    display: block;
    font-size: 3rem;
    font-weight: 700;
    color: var(--primary);
}

.spec-final-message {
    font-size: 1.125rem;
    color: var(--text);
    margin-bottom: var(--space-lg);
}

/* ============================================
   JAILBREAK DEFENDER GAME
   ============================================ */
.jailbreak-game {
    position: relative;
    min-height: 400px;
}

.jb-start-screen,
.jb-play-screen,
.jb-gameover-screen {
    display: none;
}

.jb-start-screen.is-visible,
.jb-play-screen.is-visible,
.jb-gameover-screen.is-visible {
    display: block;
}

.jb-start-screen {
    display: block;
}

.jb-intro {
    text-align: center;
    padding: var(--space-xl);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-lg);
}

.jb-shield-icon {
    font-size: 4rem;
    margin-bottom: var(--space-md);
}

.jb-intro h2 {
    margin: 0 0 var(--space-md) 0;
}

.jb-intro p {
    color: var(--text-muted);
    margin-bottom: var(--space-sm);
}

.jb-difficulty {
    margin-bottom: var(--space-lg);
}

.jb-diff-label {
    display: block;
    text-align: center;
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-bottom: var(--space-md);
}

.jb-diff-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
}

.jb-diff-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-lg);
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.jb-diff-btn:hover {
    border-color: var(--primary);
}

.jb-diff-btn.is-selected {
    border-color: var(--primary);
    background: rgba(99, 102, 241, 0.1);
}

.jb-diff-name {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text);
}

.jb-diff-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.jb-stats-bar {
    display: flex;
    justify-content: center;
    gap: var(--space-xl);
    padding: var(--space-md);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-md);
}

.jb-stat {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.jb-stat-icon {
    font-size: 1.25rem;
}

.jb-stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
}

.jb-stat-round {
    flex-direction: column;
}

.jb-stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.jb-timer-bar {
    height: 8px;
    background: var(--border-color);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-bottom: var(--space-lg);
}

.jb-timer-fill {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #10b981, #f59e0b, #ef4444);
    transition: width 0.1s linear;
}

.jb-prompt-area {
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    margin-bottom: var(--space-lg);
    text-align: center;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.jb-prompt-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-md);
}

.jb-prompt-text {
    font-size: 1.125rem;
    color: var(--text);
    line-height: 1.6;
}

.jb-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
}

.jb-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xl);
    border: 3px solid;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-weight: 700;
}

.jb-action-accept {
    background: rgba(16, 185, 129, 0.1);
    border-color: #10b981;
    color: #10b981;
}

.jb-action-accept:hover {
    background: rgba(16, 185, 129, 0.2);
    transform: scale(1.02);
}

.jb-action-block {
    background: rgba(239, 68, 68, 0.1);
    border-color: #ef4444;
    color: #ef4444;
}

.jb-action-block:hover {
    background: rgba(239, 68, 68, 0.2);
    transform: scale(1.02);
}

.jb-action-icon {
    font-size: 2rem;
}

.jb-action-label {
    font-size: 1.125rem;
}

.jb-feedback {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: var(--space-xl) var(--space-2xl);
    border-radius: var(--radius-lg);
    text-align: center;
    z-index: 100;
    animation: feedbackPop 0.3s ease;
}

.jb-feedback.is-visible {
    display: block;
}

.jb-feedback.is-correct {
    background: #10b981;
    color: white;
}

.jb-feedback.is-wrong {
    background: #ef4444;
    color: white;
}

@keyframes feedbackPop {
    0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

.jb-feedback-icon {
    font-size: 2rem;
    margin-bottom: var(--space-sm);
}

.jb-feedback-text {
    font-size: 1.125rem;
    font-weight: 600;
}

.jb-gameover-screen {
    text-align: center;
}

.jb-gameover-content {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
}

.jb-gameover-icon {
    font-size: 4rem;
    margin-bottom: var(--space-md);
}

.jb-final-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
    margin: var(--space-lg) 0;
}

.jb-final-stat {
    padding: var(--space-md);
    background: var(--bg-primary);
    border-radius: var(--radius-md);
}

.jb-final-label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: var(--space-xs);
}

.jb-final-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
}

.jb-rating {
    font-size: 2rem;
    margin-bottom: var(--space-lg);
}

.jb-gameover-actions {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
}

@media (max-width: 767px) {
    .jb-diff-options {
        grid-template-columns: 1fr;
    }

    .jb-actions {
        grid-template-columns: 1fr;
    }

    .jb-final-stats {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   NEURODIVERGENCE RESOURCE CENTER COMPONENTS
   New engaging visual components for variety
   ============================================ */

/* --- Journey Map Component ---
   Horizontal pathway showing progression/stages */
.journey-map {
    display: flex;
    overflow-x: auto;
    gap: var(--space-md);
    padding: var(--space-lg) 0;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.journey-stage {
    flex: 0 0 280px;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    position: relative;
    scroll-snap-align: start;
    border: 1px solid var(--border);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.journey-stage:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.journey-stage-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    font-weight: 700;
    font-size: 1.125rem;
    margin-bottom: var(--space-md);
}

.journey-stage-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: var(--space-sm);
}

.journey-stage-text {
    color: var(--text-secondary);
    font-size: 0.9375rem;
    line-height: 1.6;
}

.journey-connector {
    display: flex;
    align-items: center;
    color: var(--primary);
    font-size: 1.5rem;
    flex-shrink: 0;
}

.journey-milestone {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border: none;
}

.journey-milestone .journey-stage-number {
    background: white;
    color: var(--primary);
}

.journey-milestone .journey-stage-title,
.journey-milestone .journey-stage-text {
    color: white;
}

@media (max-width: 767px) {
    .journey-map {
        flex-direction: column;
    }

    .journey-stage {
        flex: none;
        width: 100%;
    }

    .journey-connector {
        transform: rotate(90deg);
        justify-content: center;
        padding: var(--space-sm) 0;
    }
}

/* --- Flip Card Component ---
   Cards that reveal content on hover/click */
.flip-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: var(--space-lg);
}

.flip-card {
    perspective: 1000px;
    height: 300px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner,
.flip-card.is-flipped .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.flip-card-front {
    background: var(--bg-card);
    border: 1px solid var(--border);
}

.flip-card-back {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    transform: rotateY(180deg);
}

.flip-card-icon {
    font-size: 3rem;
    margin-bottom: var(--space-md);
}

.flip-card-title {
    font-size: 1.375rem;
    font-weight: 600;
    margin-bottom: var(--space-sm);
}

.flip-card-text {
    font-size: 0.9375rem;
    line-height: 1.6;
}

.flip-card-hint {
    position: absolute;
    bottom: var(--space-md);
    font-size: 0.75rem;
    color: var(--text-muted);
}

.flip-card-back .flip-card-hint {
    color: rgba(255, 255, 255, 0.7);
}

/* --- Pull Quote Component ---
   Large, visually distinct quotes */
.pull-quote {
    position: relative;
    padding: var(--space-xl) var(--space-2xl);
    margin: var(--space-xl) 0;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border-left: 5px solid var(--primary);
}

.pull-quote-icon {
    position: absolute;
    top: var(--space-lg);
    left: var(--space-lg);
    font-size: 4rem;
    color: var(--primary);
    opacity: 0.15;
    line-height: 1;
}

.pull-quote-text {
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--text);
    font-style: italic;
    position: relative;
    z-index: 1;
}

.pull-quote-source {
    margin-top: var(--space-md);
    font-size: 1rem;
    color: var(--text-secondary);
    font-style: normal;
}

.pull-quote-source::before {
    content: "— ";
}

.pull-quote--centered {
    text-align: center;
    border-left: none;
    border-top: 5px solid var(--primary);
}

.pull-quote--centered .pull-quote-icon {
    left: 50%;
    transform: translateX(-50%);
}

@media (max-width: 767px) {
    .pull-quote {
        padding: var(--space-lg);
    }

    .pull-quote-text {
        font-size: 1.25rem;
    }

    .pull-quote-icon {
        font-size: 3rem;
    }
}

/* --- Icon Feature Blocks ---
   Large icon + heading + description */
.icon-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    gap: var(--space-lg);
}

.icon-feature {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    text-align: center;
    border: 1px solid var(--border);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.icon-feature:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border-color: var(--primary);
}

.icon-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-radius: 50%;
    margin-bottom: var(--space-md);
}

.icon-feature-icon svg {
    width: 40px;
    height: 40px;
    color: white;
}

.icon-feature-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: var(--space-sm);
}

.icon-feature-text {
    color: var(--text-secondary);
    font-size: 0.9375rem;
    line-height: 1.6;
}

.icon-feature--large {
    padding: var(--space-2xl);
}

.icon-feature--large .icon-feature-icon {
    width: 100px;
    height: 100px;
}

.icon-feature--large .icon-feature-icon svg {
    width: 50px;
    height: 50px;
}

.icon-feature--large .icon-feature-title {
    font-size: 1.5rem;
}

.icon-feature--horizontal {
    display: flex;
    align-items: flex-start;
    gap: var(--space-lg);
    text-align: left;
}

.icon-feature--horizontal .icon-feature-icon {
    flex-shrink: 0;
}

/* --- Self-Assessment Component ---
   Interactive questionnaire with progress */
.self-assessment {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    border: 1px solid var(--border);
}

.assessment-header {
    margin-bottom: var(--space-lg);
}

.assessment-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: var(--space-sm);
}

.assessment-subtitle {
    color: var(--text-secondary);
}

.assessment-progress {
    height: 8px;
    background: var(--bg-secondary);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-bottom: var(--space-lg);
}

.assessment-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--primary-dark));
    border-radius: var(--radius-full);
    transition: width 0.4s ease;
}

.assessment-progress-text {
    font-size: 0.875rem;
    color: var(--text-muted);
    text-align: right;
    margin-bottom: var(--space-sm);
}

.assessment-question {
    margin-bottom: var(--space-xl);
}

.assessment-question-text {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--text);
    margin-bottom: var(--space-md);
}

.assessment-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.assessment-option {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-primary);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
}

.assessment-option:hover {
    border-color: var(--primary);
    background: var(--bg-secondary);
}

.assessment-option.is-selected {
    border-color: var(--primary);
    background: rgba(220, 53, 69, 0.1);
}

.assessment-option-indicator {
    width: 24px;
    height: 24px;
    border: 2px solid var(--border);
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
}

.assessment-option.is-selected .assessment-option-indicator {
    border-color: var(--primary);
}

.assessment-option.is-selected .assessment-option-indicator::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    background: var(--primary);
    border-radius: 50%;
}

.assessment-option-text {
    color: var(--text);
    font-size: 1rem;
}

.assessment-actions {
    display: flex;
    gap: var(--space-md);
    justify-content: space-between;
    margin-top: var(--space-lg);
}

.assessment-result {
    text-align: center;
    padding: var(--space-xl);
}

.assessment-result-icon {
    font-size: 4rem;
    margin-bottom: var(--space-md);
}

.assessment-result-title {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: var(--space-sm);
}

.assessment-result-text {
    color: var(--text-secondary);
    font-size: 1.125rem;
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto var(--space-lg);
}

.assessment-recommendations {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-md);
    margin-top: var(--space-lg);
    text-align: left;
}

.assessment-recommendation {
    background: var(--bg-secondary);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--primary);
}

/* --- Decision Tree Component ---
   Clickable branching paths */
.decision-tree {
    max-width: 800px;
    margin: 0 auto;
}

.decision-node {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    border: 1px solid var(--border);
    margin-bottom: var(--space-lg);
}

.decision-node.is-hidden {
    display: none;
}

.decision-node-question {
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: var(--space-lg);
    text-align: center;
}

.decision-branches {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-md);
}

.decision-branch {
    padding: var(--space-lg);
    background: var(--bg-primary);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
}

.decision-branch:hover {
    border-color: var(--primary);
    background: var(--bg-secondary);
    transform: translateY(-2px);
}

.decision-branch-icon {
    font-size: 2rem;
    margin-bottom: var(--space-sm);
}

.decision-branch-text {
    font-weight: 500;
    color: var(--text);
}

.decision-outcome {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    text-align: center;
}

.decision-outcome .decision-node-question {
    color: white;
}

.decision-outcome-icon {
    font-size: 3rem;
    margin-bottom: var(--space-md);
}

.decision-outcome-text {
    font-size: 1.125rem;
    line-height: 1.6;
    margin-bottom: var(--space-lg);
}

.decision-restart {
    margin-top: var(--space-md);
}

.decision-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
    font-size: 0.875rem;
    color: var(--text-muted);
}

.decision-breadcrumb-item {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.decision-breadcrumb-item::after {
    content: "→";
    margin-left: var(--space-sm);
}

.decision-breadcrumb-item:last-child::after {
    display: none;
}

/* --- Spectrum Visualization ---
   Visual representation of spectrums */
.spectrum-visual {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    border: 1px solid var(--border);
}

.spectrum-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: var(--space-lg);
    text-align: center;
}

.spectrum-range {
    position: relative;
    height: 60px;
    background: linear-gradient(90deg,
        var(--success) 0%,
        var(--warning) 50%,
        var(--primary) 100%);
    border-radius: var(--radius-full);
    margin-bottom: var(--space-lg);
}

.spectrum-range--subtle {
    background: linear-gradient(90deg,
        rgba(220, 53, 69, 0.2) 0%,
        rgba(220, 53, 69, 0.5) 50%,
        rgba(220, 53, 69, 1) 100%);
}

.spectrum-marker {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background: white;
    border: 3px solid var(--text);
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.2s ease;
}

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

.spectrum-marker-label {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-card);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.spectrum-labels {
    display: flex;
    justify-content: space-between;
}

.spectrum-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.spectrum-label--center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.spectrum-description {
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--border);
    color: var(--text-secondary);
    text-align: center;
}

/* --- Story/Scenario Panels ---
   Narrative blocks with character scenarios */
.story-panels {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

.story-panel {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
}

.story-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
}

.story-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    font-weight: 600;
    flex-shrink: 0;
}

.story-meta {
    flex: 1;
}

.story-name {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text);
}

.story-context {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.story-badge {
    background: var(--primary);
    color: white;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
}

.story-content {
    padding: var(--space-lg);
}

.story-challenge {
    margin-bottom: var(--space-lg);
}

.story-challenge-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: var(--space-xs);
}

.story-challenge-text {
    color: var(--text);
    line-height: 1.6;
}

.story-solution {
    background: var(--bg-secondary);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--success);
    margin-bottom: var(--space-lg);
}

.story-solution-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--success);
    margin-bottom: var(--space-xs);
}

.story-solution-text {
    color: var(--text);
    line-height: 1.6;
}

.story-outcome {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: rgba(34, 197, 94, 0.1);
    border-radius: var(--radius-md);
}

.story-outcome-icon {
    color: var(--success);
    font-size: 1.5rem;
}

.story-outcome-text {
    color: var(--text);
    font-weight: 500;
}

/* --- Highlight Boxes (Varied Styles) ---
   Different box types beyond standard cards */
.highlight-box {
    padding: var(--space-lg);
    border-radius: var(--radius-md);
    margin: var(--space-lg) 0;
}

.highlight-box-icon {
    font-size: 1.5rem;
    margin-bottom: var(--space-sm);
}

.highlight-box-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: var(--space-sm);
}

.highlight-box-text {
    line-height: 1.6;
}

.highlight-box--tip {
    background: rgba(59, 130, 246, 0.1);
    border-left: 4px solid var(--info);
}

.highlight-box--tip .highlight-box-icon,
.highlight-box--tip .highlight-box-title {
    color: var(--info);
}

.highlight-box--myth {
    background: rgba(239, 68, 68, 0.1);
    border-left: 4px solid #ef4444;
}

.highlight-box--myth .highlight-box-icon,
.highlight-box--myth .highlight-box-title {
    color: #ef4444;
}

.highlight-box--fact {
    background: rgba(34, 197, 94, 0.1);
    border-left: 4px solid var(--success);
}

.highlight-box--fact .highlight-box-icon,
.highlight-box--fact .highlight-box-title {
    color: var(--success);
}

.highlight-box__source {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: var(--space-xs);
    line-height: 1.4;
}

.highlight-box--warning {
    background: rgba(245, 158, 11, 0.1);
    border-left: 4px solid var(--warning);
}

.highlight-box--warning .highlight-box-icon,
.highlight-box--warning .highlight-box-title {
    color: var(--warning);
}

.highlight-box--success {
    background: rgba(34, 197, 94, 0.1);
    border-left: 4px solid var(--success);
}

.highlight-box--success .highlight-box-icon,
.highlight-box--success .highlight-box-title {
    color: var(--success);
}

.highlight-box--primary {
    background: rgba(220, 53, 69, 0.1);
    border-left: 4px solid var(--primary);
}

.highlight-box--primary .highlight-box-icon,
.highlight-box--primary .highlight-box-title {
    color: var(--primary);
}

/* AI Ethics Banner ---- */
/* Full-width responsible AI section injected via JS on framework pages */
.ai-ethics-banner {
    background: linear-gradient(to right, #2a1015 0%, #150a0d 40%, #000000 100%);
    border-radius: var(--radius-xl);
    padding: var(--space-3xl) var(--space-xl);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.ai-ethics-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 50%, rgba(220, 53, 69, 0.12) 0%, transparent 50%),
                radial-gradient(circle at 80% 50%, rgba(220, 53, 69, 0.08) 0%, transparent 50%);
    pointer-events: none;
}

.ai-ethics-banner__icon {
    width: 64px;
    height: 70px;
    margin: 0 auto var(--space-lg);
    background: #DC3545;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    position: relative;
    z-index: 1;
    box-shadow: 0 4px 20px rgba(220, 53, 69, 0.4);
}

.ai-ethics-banner__content {
    position: relative;
    max-width: 700px;
    margin: 0 auto;
    z-index: 1;
}

.ai-ethics-banner__heading {
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 var(--space-md);
    letter-spacing: -0.02em;
}

.ai-ethics-banner__body {
    font-size: 1.05rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 var(--space-lg);
}

.ai-ethics-banner__note {
    font-size: 0.9rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    padding-top: var(--space-md);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: inline-block;
}

[data-theme="dark"] .ai-ethics-banner {
    background: linear-gradient(to right, #2a1015 0%, #150a0d 40%, #000000 100%);
}

[data-theme="dark"] .ai-ethics-banner__heading {
    color: #f0f0f0;
}

/* BEM-style highlight-box variant (for Facts & Fictions page) */
.highlight-box--info {
    display: flex;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: rgba(59, 130, 246, 0.05);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-left: 4px solid var(--accent-blue);
    border-radius: var(--radius-lg);
    margin: var(--space-lg) 0;
}

.highlight-box__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(59, 130, 246, 0.1);
    border-radius: var(--radius);
    color: var(--accent-blue);
}

.highlight-box__icon svg {
    width: 20px;
    height: 20px;
}

.highlight-box__content {
    flex: 1;
}

.highlight-box__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--accent-blue);
    margin-bottom: var(--space-sm);
}

.highlight-box__content p {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--text-secondary);
    margin: 0;
}

.highlight-box__content p strong {
    color: var(--text);
}

@media (max-width: 599px) {
    .highlight-box--info {
        flex-direction: column;
    }
}

/* Reduce gap when highlight-box follows content-badges in same section */
.content-badges + .highlight-box {
    margin-top: var(--space-md);
}

/* Myth vs Fact paired boxes */
.myth-fact-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
    margin: var(--space-lg) 0;
}

@media (max-width: 767px) {
    .myth-fact-pair {
        grid-template-columns: 1fr;
    }
}

/* --- Myth-Fact Card Grid (Facts & Fictions page) ---
   Numbered cards with fiction/fact comparison */
.myth-fact-grid {
    display: grid;
    gap: var(--space-lg);
    margin-top: var(--space-xl);
}

.myth-fact-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.myth-fact-card:hover {
    border-color: var(--primary);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.myth-fact-card__header {
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
}

.myth-fact-card__number {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: 0.05em;
}

.myth-fact-card__fiction,
.myth-fact-card__fact {
    padding: var(--space-lg);
}

.myth-fact-card__fiction {
    background: rgba(220, 53, 69, 0.03);
    border-bottom: 1px solid var(--border);
}

.myth-fact-card__fact {
    background: rgba(16, 185, 129, 0.03);
}

.myth-fact-card__divider {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-xs) 0;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.myth-fact-card__divider svg {
    width: 20px;
    height: 20px;
    color: var(--text-muted);
}

.myth-fact-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-sm);
}

.myth-fact-badge svg {
    width: 14px;
    height: 14px;
}

.myth-fact-badge--fiction {
    background: rgba(220, 53, 69, 0.1);
    color: var(--primary);
}

.myth-fact-badge--fact {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.myth-fact-card__title {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: var(--space-sm);
    color: var(--text);
}

.myth-fact-card__text {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--text-secondary);
    margin: 0;
}

.myth-fact-card__source {
    display: block;
    margin-top: var(--space-md);
    font-size: 0.8125rem;
    color: var(--text-muted);
    font-style: italic;
}

@media (min-width: 768px) {
    .myth-fact-card {
        display: grid;
        grid-template-columns: auto 1fr auto 1fr;
        grid-template-rows: auto;
    }

    .myth-fact-card__header {
        grid-column: 1 / -1;
    }

    .myth-fact-card__fiction {
        border-bottom: none;
        border-right: 1px solid var(--border);
    }

    .myth-fact-card__divider {
        display: flex;
        flex-direction: column;
        padding: 0 var(--space-sm);
        border-top: none;
        border-bottom: none;
        border-left: 1px solid var(--border);
        border-right: 1px solid var(--border);
    }
}

/* Mobile styles for myth-fact cards */
@media (max-width: 599px) {
    .myth-fact-card {
        margin-left: 0;
        margin-right: 0;
    }

    .myth-fact-card__fiction,
    .myth-fact-card__fact {
        padding: var(--space-md);
    }

    .myth-fact-card__title {
        font-size: 1rem;
    }

    .myth-fact-card__text {
        font-size: 0.875rem;
    }

    /* Ensure icons display on mobile */
    .myth-fact-badge {
        display: inline-flex;
        align-items: center;
    }

    .myth-fact-badge svg {
        width: 14px;
        height: 14px;
        min-width: 14px;
        min-height: 14px;
        flex-shrink: 0;
    }

    .myth-fact-card__divider svg {
        width: 16px;
        height: 16px;
        min-width: 16px;
        min-height: 16px;
    }
}

/* --- Government Warning Cards ---
   Cards for official government warnings */
.gov-warning-grid {
    display: grid;
    gap: var(--space-lg);
    margin-top: var(--space-xl);
}

@media (min-width: 992px) {
    .gov-warning-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.gov-warning-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.gov-warning-card:hover {
    border-color: var(--primary);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.gov-warning-card__header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
}

.gov-warning-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius);
    flex-shrink: 0;
}

.gov-warning-card__icon svg {
    width: 24px;
    height: 24px;
}

.gov-warning-card__icon--ftc {
    background: rgba(220, 53, 69, 0.1);
    color: var(--primary);
}

.gov-warning-card__icon--nist {
    background: rgba(59, 130, 246, 0.1);
    color: var(--accent-blue);
}

.gov-warning-card__title-group {
    flex: 1;
}

.gov-warning-card__agency {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-bottom: var(--space-xs);
}

.gov-warning-card__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}

.gov-warning-card__content {
    padding: var(--space-lg);
}

.gov-warning-card__intro {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin-bottom: var(--space-md);
}

.gov-warning-item {
    display: flex;
    gap: var(--space-md);
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--border);
}

.gov-warning-item:last-of-type {
    border-bottom: none;
}

.gov-warning-item__icon {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: var(--warning);
}

.gov-warning-item__icon--info {
    color: var(--accent-blue);
}

.gov-warning-item__icon svg {
    width: 18px;
    height: 18px;
}

.gov-warning-item__text strong {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: var(--space-xs);
}

.gov-warning-item__text p {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
}

.gov-warning-card__note {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    margin-top: var(--space-md);
    padding: var(--space-md);
    background: rgba(16, 185, 129, 0.05);
    border-radius: var(--radius);
    font-size: 0.875rem;
    font-style: italic;
    color: var(--text-secondary);
    line-height: 1.6;
}

.gov-warning-card__note svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--success);
    margin-top: 2px;
}

/* --- Research Stats Grid (Facts & Fictions page) ---
   Highlight key numbers from research */
.research-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
    margin-top: var(--space-xl);
}

@media (min-width: 768px) {
    .research-stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.research-stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    text-align: center;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.research-stat-card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
}

.research-stat-card__value {
    font-family: var(--font-mono);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1.1;
    margin-bottom: var(--space-xs);
}

.research-stat-card__label {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: var(--space-xs);
}

.research-stat-card__source {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.4;
}

@media (max-width: 599px) {
    .research-stat-card__value {
        font-size: 2rem;
    }
}

/* --- Content Tabs Component ---
   Tab interface for segmented content */
.content-tabs {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
}

.content-tabs-header {
    display: flex;
    overflow-x: auto;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    -webkit-overflow-scrolling: touch;
}

.content-tab-btn {
    flex: 0 0 auto;
    padding: var(--space-md) var(--space-lg);
    background: none;
    border: none;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    position: relative;
    white-space: nowrap;
    transition: color 0.2s ease, background 0.2s ease;
}

.content-tab-btn:hover {
    color: var(--text);
    background: var(--bg-card);
}

.content-tab-btn.is-active {
    color: var(--primary);
    background: var(--bg-card);
}

.content-tab-btn.is-active::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--primary);
}

.content-tab-icon {
    margin-right: var(--space-sm);
}

.content-tab-panels {
    padding: var(--space-xl);
}

.content-tab-panel {
    display: none;
}

.content-tab-panel.is-active {
    display: block;
    animation: fadeIn 0.3s ease;
}

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

/* Tab variants */
.content-tabs--pills .content-tabs-header {
    padding: var(--space-sm);
    gap: var(--space-xs);
    background: var(--bg-card);
    border-bottom: none;
}

.content-tabs--pills .content-tab-btn {
    border-radius: var(--radius-full);
    padding: var(--space-sm) var(--space-lg);
}

.content-tabs--pills .content-tab-btn.is-active {
    background: var(--primary);
    color: white;
}

.content-tabs--pills .content-tab-btn.is-active::after {
    display: none;
}

/* --- Navigation Cards for Hub Page ---
   Large icon-based navigation cards */
.nav-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: var(--space-lg);
}

.nav-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-2xl);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 2px solid var(--border);
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

.nav-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary);
    box-shadow: 0 12px 32px rgba(220, 53, 69, 0.15);
}

.nav-card-icon {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-radius: 50%;
    margin-bottom: var(--space-lg);
    transition: transform 0.3s ease;
}

.nav-card:hover .nav-card-icon {
    transform: scale(1.1);
}

.nav-card-icon svg {
    width: 50px;
    height: 50px;
    color: white;
}

/* Nav Card Icon Color Variants */
.nav-card-icon--adhd {
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
}

.nav-card-icon--autism {
    background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%);
}

.nav-card-icon--dyslexia {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.nav-card-icon--tools {
    background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
}

.nav-card-icon--resources {
    background: linear-gradient(135deg, #ec4899 0%, #f43f5e 100%);
}

.nav-card-icon--community {
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
}

.nav-card-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: var(--space-sm);
}

.nav-card-text {
    color: var(--text-secondary);
    font-size: 0.9375rem;
    line-height: 1.6;
}

.nav-card-arrow {
    margin-top: var(--space-md);
    color: var(--primary);
    font-size: 1.5rem;
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease;
}

.nav-card:hover .nav-card-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* Nav Cards Compact Variant ---- */
.nav-cards--compact {
    grid-template-columns: repeat(auto-fill, minmax(170px, 200px));
    gap: var(--space-md);
    justify-content: center;
}

.nav-cards--compact .nav-card {
    padding: var(--space-md);
    aspect-ratio: 1;
    justify-content: center;
}

.nav-cards--compact .nav-card-icon {
    width: 56px;
    height: 56px;
    margin-bottom: var(--space-sm);
}

.nav-cards--compact .nav-card-icon svg {
    width: 28px;
    height: 28px;
}

.nav-cards--compact .nav-card-title {
    font-size: 1.0625rem;
    margin-bottom: var(--space-xs);
}

.nav-cards--compact .nav-card-text {
    font-size: 0.8125rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nav-cards--compact .nav-card-arrow {
    margin-top: auto;
    font-size: 1.25rem;
}

.nav-cards--compact .nav-card:hover {
    transform: translateY(-4px);
}

@media (max-width: 600px) {
    .nav-cards--compact {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Nav Card Icon Color Variants (Extended) ---- */
.nav-card-icon--edu {
    background: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%);
}

.nav-card-icon--rights {
    background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
}

.nav-card-icon--standards {
    background: linear-gradient(135deg, #475569 0%, #64748b 100%);
}

.nav-card-icon--org {
    background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%);
}

.nav-card-icon--guide {
    background: linear-gradient(135deg, #dc2626 0%, #f87171 100%);
}

/* Nav Cards Section Spacing ---- */
h3 + .nav-cards,
h3 + .nav-cards--compact {
    margin-top: var(--space-xl);
}

/* ============================================
   PORTO-STYLE CORPORATE COMPONENTS
   Professional design elements for polished look
   ============================================ */

/* === SHAPE DIVIDERS ===
   SVG-based section separators for visual flow */
.shape-divider {
    position: absolute;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    pointer-events: none;
}

.shape-divider--top {
    top: 0;
}

.shape-divider--bottom {
    bottom: 0;
}

.shape-divider--flip {
    transform: rotate(180deg);
}

.shape-divider svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 60px;
}

.shape-divider svg path {
    fill: var(--bg-primary);
}

.shape-divider--alt svg path {
    fill: var(--bg-secondary);
}

.shape-divider--dark svg path {
    fill: var(--bg-dark);
}

.shape-divider--primary svg path {
    fill: var(--primary);
}

/* Wave Divider */
.shape-divider--wave svg {
    height: 80px;
}

/* Curve Divider */
.shape-divider--curve svg {
    height: 70px;
}

/* Angle/Tilt Divider */
.shape-divider--angle svg,
.shape-divider--tilt svg {
    height: 50px;
}

/* Triangle Divider */
.shape-divider--triangle svg {
    height: 60px;
}

/* Section with divider needs relative positioning */
.section-with-divider {
    position: relative;
}

/* Adjust padding for sections with dividers */
.section-with-divider.has-top-divider {
    padding-top: calc(var(--space-3xl) + 60px);
}

.section-with-divider.has-bottom-divider {
    padding-bottom: calc(var(--space-3xl) + 60px);
}

@media (min-width: 768px) {
    .shape-divider svg {
        height: 80px;
    }

    .shape-divider--wave svg {
        height: 120px;
    }

    .shape-divider--curve svg {
        height: 100px;
    }
}

/* === COUNTER COMPONENTS ===
   Animated statistics that count up on scroll */
.counter-section {
    padding: var(--space-3xl) 0;
}

.counter-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
}

.counter-box {
    text-align: center;
    padding: var(--space-xl);
}

.counter-box__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--space-md);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: white;
    font-size: 1.5rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.counter-box:hover .counter-box__icon {
    transform: scale(1.1);
}

/* Colorful gradient icons for counter boxes */
.counter-box:nth-child(1) .counter-box__icon {
    background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%);
}

.counter-box:nth-child(2) .counter-box__icon {
    background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
}

.counter-box:nth-child(3) .counter-box__icon {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.counter-box:nth-child(4) .counter-box__icon {
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
}

/* Hover glow effects */
.counter-box:nth-child(1):hover .counter-box__icon {
    box-shadow: 0 8px 32px rgba(14, 165, 233, 0.4);
}

.counter-box:nth-child(2):hover .counter-box__icon {
    box-shadow: 0 8px 32px rgba(139, 92, 246, 0.4);
}

.counter-box:nth-child(3):hover .counter-box__icon {
    box-shadow: 0 8px 32px rgba(16, 185, 129, 0.4);
}

.counter-box:nth-child(4):hover .counter-box__icon {
    box-shadow: 0 8px 32px rgba(245, 158, 11, 0.4);
}

.counter-box__icon svg {
    width: 32px;
    height: 32px;
}

.counter-number {
    font-size: 3rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    display: inline-flex;
    align-items: baseline;
}

.counter-suffix {
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-left: 2px;
}

.counter-label {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-top: var(--space-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.counter-description {
    display: block;
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-top: var(--space-xs);
}

.counter-source {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: var(--space-sm);
    font-style: italic;
}

/* Counter variants */
.counter-box--bordered {
    border: 2px solid var(--border-light);
    border-radius: var(--radius-lg);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.counter-box--bordered:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
}

.counter-box--card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

@media (min-width: 768px) {
    .counter-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .counter-number {
        font-size: 4rem;
    }

    .counter-suffix {
        font-size: 2.5rem;
    }
}

/* === PROGRESS BARS ===
   Skill/completion indicators with animation */
.progress-section {
    padding: var(--space-2xl) 0;
}

.progress-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.progress-item {
    width: 100%;
}

.progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-sm);
}

.progress-label {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
}

.progress-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--primary);
}

.progress-bar {
    width: 100%;
    height: 10px;
    background: var(--bg-secondary);
    border-radius: var(--radius-full);
    overflow: hidden;
    position: relative;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--primary-dark));
    border-radius: var(--radius-full);
    width: 0;
    transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-fill--animated {
    position: relative;
    overflow: hidden;
}

.progress-fill--animated::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    animation: progressShine 2s infinite;
}

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

/* Progress bar variants */
.progress-bar--lg {
    height: 16px;
}

.progress-bar--sm {
    height: 6px;
}

.progress-fill--success {
    background: linear-gradient(90deg, #10b981, #059669);
}

.progress-fill--info {
    background: linear-gradient(90deg, #3b82f6, #2563eb);
}

.progress-fill--warning {
    background: linear-gradient(90deg, #f59e0b, #d97706);
}

/* === WORD ROTATOR ===
   Dynamic cycling text in heroes */
.word-rotator {
    display: inline-flex;
    align-items: baseline;
}

.word-rotator__static {
    margin-right: 0.3em;
}

.word-rotator__dynamic {
    position: relative;
    display: inline-block;
    min-width: 200px;
    text-align: left;
}

.word-rotator__word {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    white-space: nowrap;
    color: var(--primary);
}

.word-rotator__word--active {
    position: relative;
    opacity: 1;
    transform: translateY(0);
}

/* Rotator animation variants */
.word-rotator--fade .word-rotator__word {
    transform: none;
}

.word-rotator--slide-up .word-rotator__word {
    transform: translateY(100%);
}

.word-rotator--slide-up .word-rotator__word--active {
    transform: translateY(0);
}

.word-rotator--clip .word-rotator__dynamic {
    overflow: hidden;
}

.word-rotator--clip .word-rotator__word {
    transform: translateY(100%);
    opacity: 1;
}

.word-rotator--clip .word-rotator__word--active {
    transform: translateY(0);
}

/* Word rotator cursor */
.word-rotator__cursor {
    display: inline-block;
    width: 3px;
    height: 1em;
    background: var(--primary);
    margin-left: 2px;
    animation: cursorBlink 1s infinite;
    vertical-align: text-bottom;
}

@keyframes cursorBlink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* === ICON BOXES ===
   Porto-style feature cards */
.icon-boxes {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}

.icon-box {
    position: relative;
    padding: var(--space-xl);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    transition: all 0.3s ease;
}

.icon-box__icon {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    margin-bottom: var(--space-lg);
    color: white;
    font-size: 1.75rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* Colorful gradient icons for icon boxes */
.icon-box:nth-child(1) .icon-box__icon {
    background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%);
}

.icon-box:nth-child(2) .icon-box__icon {
    background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
}

.icon-box:nth-child(3) .icon-box__icon {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.icon-box:nth-child(4) .icon-box__icon {
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
}

.icon-box:nth-child(5) .icon-box__icon {
    background: linear-gradient(135deg, #ec4899 0%, #f43f5e 100%);
}

.icon-box:nth-child(6) .icon-box__icon {
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
}

/* Hover glow effects */
.icon-box:nth-child(1):hover .icon-box__icon {
    box-shadow: 0 8px 32px rgba(14, 165, 233, 0.4);
}

.icon-box:nth-child(2):hover .icon-box__icon {
    box-shadow: 0 8px 32px rgba(139, 92, 246, 0.4);
}

.icon-box:nth-child(3):hover .icon-box__icon {
    box-shadow: 0 8px 32px rgba(16, 185, 129, 0.4);
}

.icon-box:nth-child(4):hover .icon-box__icon {
    box-shadow: 0 8px 32px rgba(245, 158, 11, 0.4);
}

.icon-box:nth-child(5):hover .icon-box__icon {
    box-shadow: 0 8px 32px rgba(236, 72, 153, 0.4);
}

.icon-box:nth-child(6):hover .icon-box__icon {
    box-shadow: 0 8px 32px rgba(20, 184, 166, 0.4);
}

/* Explicit color classes for icon boxes (use when nth-child doesn't work) */
.icon-box--color-1 .icon-box__icon {
    background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%);
}

.icon-box--color-2 .icon-box__icon {
    background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
}

.icon-box--color-3 .icon-box__icon {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.icon-box--color-4 .icon-box__icon {
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
}

.icon-box--color-5 .icon-box__icon {
    background: linear-gradient(135deg, #ec4899 0%, #f43f5e 100%);
}

.icon-box--color-6 .icon-box__icon {
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
}

/* Hover effects for explicit color classes */
.icon-box--color-1:hover .icon-box__icon {
    box-shadow: 0 8px 32px rgba(14, 165, 233, 0.4);
}

.icon-box--color-2:hover .icon-box__icon {
    box-shadow: 0 8px 32px rgba(139, 92, 246, 0.4);
}

.icon-box--color-3:hover .icon-box__icon {
    box-shadow: 0 8px 32px rgba(16, 185, 129, 0.4);
}

.icon-box--color-4:hover .icon-box__icon {
    box-shadow: 0 8px 32px rgba(245, 158, 11, 0.4);
}

.icon-box--color-5:hover .icon-box__icon {
    box-shadow: 0 8px 32px rgba(236, 72, 153, 0.4);
}

.icon-box--color-6:hover .icon-box__icon {
    box-shadow: 0 8px 32px rgba(20, 184, 166, 0.4);
}

.icon-box__icon svg {
    width: 36px;
    height: 36px;
}

.icon-box:hover .icon-box__icon {
    transform: scale(1.1) rotate(5deg);
}

.icon-box__title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

.icon-box__content {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-md);
}

.icon-box__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--primary);
    transition: gap 0.3s ease;
}

.icon-box__link:hover {
    gap: var(--space-sm);
}

/* Icon Box Style 1 - Centered (default) */
.icon-box--centered {
    text-align: center;
}

.icon-box--centered .icon-box__icon {
    margin-left: auto;
    margin-right: auto;
}

/* Icon Box Style 2 - Horizontal */
.icon-box--horizontal {
    display: flex;
    gap: var(--space-lg);
    align-items: flex-start;
}

.icon-box--horizontal .icon-box__icon {
    flex-shrink: 0;
    margin-bottom: 0;
}

.icon-box--horizontal .icon-box__body {
    flex: 1;
}

/* Icon Box Style 3 - Bordered */
.icon-box--bordered {
    border: 2px solid var(--border-light);
    background: transparent;
}

.icon-box--bordered:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
}

/* Icon Box Style 4 - Lifted */
.icon-box--lifted {
    box-shadow: var(--shadow-md);
}

.icon-box--lifted:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}

/* Icon Box Style 5 - Dark */
.icon-box--dark {
    background: var(--bg-dark);
    color: white;
}

.icon-box--dark .icon-box__title {
    color: white;
}

.icon-box--dark .icon-box__content {
    color: rgba(255, 255, 255, 0.7);
}

.icon-box--dark .icon-box__icon {
    background: rgba(255, 255, 255, 0.1);
}

/* Icon Box Popular Ribbon ---- */
.icon-box--popular {
    overflow: hidden;
}

.icon-box--popular::before {
    content: "Popular";
    position: absolute;
    top: 18px;
    right: -32px;
    width: 130px;
    padding: 4px 0;
    background: var(--primary);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transform: rotate(45deg);
    z-index: 2;
    box-shadow: 0 2px 6px rgba(220, 53, 69, 0.3);
}

.icon-box--popular::after {
    content: "";
    position: absolute;
    top: 18px;
    right: -32px;
    width: 130px;
    height: 100%;
    padding: 4px 0;
    transform: rotate(45deg);
    z-index: 3;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
    background-size: 200% 100%;
    animation: popularShimmer 3s ease-in-out infinite;
    pointer-events: none;
    max-height: 22px;
}

@keyframes popularShimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Icon Box HOT Badge ---- */
.icon-box__hot-tag {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #374151;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 4px 12px;
    border-radius: 4px;
    z-index: 4;
    text-shadow: 0 0 8px rgba(220, 53, 69, 0.8), 0 0 16px rgba(220, 53, 69, 0.5);
    animation: hotGlow 2s ease-in-out infinite;
}

@keyframes hotGlow {
    0%, 100% { text-shadow: 0 0 8px rgba(220, 53, 69, 0.8), 0 0 16px rgba(220, 53, 69, 0.5); }
    50% { text-shadow: 0 0 12px rgba(220, 53, 69, 1), 0 0 24px rgba(220, 53, 69, 0.8), 0 0 36px rgba(220, 53, 69, 0.4); }
}

@media (min-width: 768px) {
    .icon-boxes {
        grid-template-columns: repeat(2, 1fr);
    }

    .icon-boxes--two {
        grid-template-columns: repeat(2, 1fr);
    }

    .icon-boxes--three {
        grid-template-columns: repeat(3, 1fr);
    }

    .icon-boxes--four {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* === BEFORE/AFTER COMPARISON ===
   Draggable image/content comparison slider */
.before-after {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius-lg);
    user-select: none;
}

.before-after__container {
    position: relative;
    width: 100%;
}

.before-after__before,
.before-after__after {
    width: 100%;
}

.before-after__before {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    overflow: hidden;
    z-index: 2;
}

.before-after__after {
    position: relative;
    z-index: 1;
}

.before-after__content {
    padding: var(--space-xl);
    background: var(--bg-card);
    min-height: 200px;
}

.before-after__slider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 4px;
    background: var(--primary);
    z-index: 3;
    cursor: ew-resize;
    transform: translateX(-50%);
}

.before-after__handle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    background: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: var(--shadow-md);
    transition: transform 0.2s ease;
}

.before-after__handle:hover {
    transform: translate(-50%, -50%) scale(1.1);
}

.before-after__handle svg {
    width: 24px;
    height: 24px;
}

.before-after__label {
    position: absolute;
    top: var(--space-md);
    padding: var(--space-xs) var(--space-md);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--radius-sm);
    z-index: 4;
}

.before-after__label--before {
    left: var(--space-md);
}

.before-after__label--after {
    right: var(--space-md);
}

/* === TESTIMONIAL CAROUSEL ===
   Customer/user testimonials with carousel */
.testimonial-section {
    padding: var(--space-3xl) 0;
    overflow: hidden;
}

.testimonial-carousel {
    position: relative;
}

.testimonial-track {
    display: flex;
    transition: transform 0.5s ease;
}

.testimonial-slide {
    flex: 0 0 100%;
    padding: 0 var(--space-md);
}

.testimonial-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-md);
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.testimonial__quote-icon {
    font-size: 3rem;
    color: var(--primary);
    opacity: 0.3;
    line-height: 1;
    margin-bottom: var(--space-md);
}

.testimonial__text {
    font-size: 1.125rem;
    line-height: 1.8;
    color: var(--text-secondary);
    font-style: italic;
    margin-bottom: var(--space-xl);
}

.testimonial__author {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
}

.testimonial__avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    font-weight: 600;
}

.testimonial__info {
    text-align: left;
}

.testimonial__name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.testimonial__role {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.testimonial__rating {
    display: flex;
    gap: 2px;
    color: #f59e0b;
    margin-top: var(--space-xs);
}

/* Carousel Navigation */
.carousel-nav {
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
    margin-top: var(--space-xl);
}

.carousel-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--border-light);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.carousel-dot:hover {
    background: var(--text-muted);
}

.carousel-dot--active {
    background: var(--primary);
    transform: scale(1.2);
}

.carousel-arrows {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

.carousel-arrow {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 2px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
}

.carousel-arrow:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.carousel-arrow svg {
    width: 20px;
    height: 20px;
}

/* === PARALLAX SECTIONS ===
   Background scroll effects */
.parallax-section {
    position: relative;
    padding: var(--space-3xl) 0;
    overflow: hidden;
}

.parallax-bg {
    position: absolute;
    top: -50%;
    left: 0;
    width: 100%;
    height: 200%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;
    will-change: transform;
}

.parallax-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 0;
}

.parallax-content {
    position: relative;
    z-index: 1;
}

.parallax-section--light .parallax-overlay {
    background: rgba(255, 255, 255, 0.9);
}

.parallax-section--primary .parallax-overlay {
    background: rgba(220, 53, 69, 0.9);
}

/* Reduced motion - comprehensive accessibility support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .parallax-bg {
        top: 0;
        height: 100%;
        background-attachment: scroll;
    }

    .fade-in,
    .fade-in-up,
    .slide-up {
        opacity: 1 !important;
        transform: none !important;
    }

    .animated-card--lift:hover,
    .animated-card--glow:hover,
    .pillar-card:hover {
        transform: none;
    }

    html {
        scroll-behavior: auto;
    }
}

/* === ANIMATED CARDS ===
   Enhanced hover effect cards */
.animated-card {
    position: relative;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Lift Effect */
.animated-card--lift:hover {
    transform: translateY(-12px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* Glow Effect */
.animated-card--glow {
    border: 1px solid var(--border-light);
}

.animated-card--glow:hover {
    border-color: var(--primary);
    box-shadow: 0 0 30px rgba(220, 53, 69, 0.2);
}

/* Zoom Effect (for image cards) */
.animated-card--zoom .animated-card__image {
    overflow: hidden;
}

.animated-card--zoom .animated-card__image img {
    transition: transform 0.5s ease;
}

.animated-card--zoom:hover .animated-card__image img {
    transform: scale(1.1);
}

/* Slide Overlay Effect */
.animated-card--slide {
    cursor: pointer;
}

.animated-card--slide .animated-card__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
    padding: var(--space-xl);
    transform: translateY(60%);
    transition: transform 0.4s ease;
}

.animated-card--slide:hover .animated-card__overlay {
    transform: translateY(0);
}

.animated-card__content {
    padding: var(--space-xl);
}

.animated-card__tag {
    display: inline-block;
    padding: var(--space-xs) var(--space-sm);
    background: #374151;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-sm);
}

.animated-card__title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

.animated-card__text {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.animated-card__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    margin-top: var(--space-md);
    font-weight: 600;
    color: var(--primary);
}

/* === CORPORATE CTA BLOCKS ===
   Professional call-to-action sections */
.cta-corporate {
    padding: var(--space-3xl) var(--space-xl);
    border-radius: var(--radius-xl);
    text-align: center;
}

/* Style 1 - Gradient Background */
.cta-corporate--gradient {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
}

.cta-corporate--gradient .cta-corporate__title,
.cta-corporate--gradient .cta-corporate__text {
    color: white;
}

.cta-corporate--gradient .cta-corporate__text {
    opacity: 0.9;
}

/* Style 2 - Dark Background */
.cta-corporate--dark {
    background: linear-gradient(to right, #2a1015 0%, #150a0d 40%, #000000 100%);
    color: white;
    position: relative;
    overflow: hidden;
}

.cta-corporate--dark .cta-corporate__title,
.cta-corporate--dark .cta-corporate__text {
    color: white;
}

.cta-corporate--dark .cta-corporate__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.5;
    -webkit-mask-image: linear-gradient(to right, transparent 15%, rgba(0,0,0,0.3) 40%, rgba(0,0,0,1) 70%);
    mask-image: linear-gradient(to right, transparent 15%, rgba(0,0,0,0.3) 40%, rgba(0,0,0,1) 70%);
}

.cta-corporate--dark .cta-corporate__content {
    position: relative;
    z-index: 1;
}

/* Style 3 - Bordered */
.cta-corporate--bordered {
    background: var(--bg-card);
    border: 2px solid var(--border-light);
}

.cta-corporate__eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--primary);
    margin-bottom: var(--space-sm);
}

.cta-corporate--gradient .cta-corporate__eyebrow,
.cta-corporate--dark .cta-corporate__eyebrow {
    color: rgba(255, 255, 255, 0.7);
}

.cta-corporate__title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: var(--space-md);
}

.cta-corporate__text {
    font-size: 1.125rem;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto var(--space-xl);
}

.cta-corporate__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    align-items: center;
}

.cta-corporate__btn {
    padding: var(--space-md) var(--space-2xl);
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
}

.cta-corporate__btn--primary {
    background: white;
    color: var(--primary);
}

.cta-corporate__btn--primary:hover {
    background: var(--bg-secondary);
    transform: translateY(-2px);
}

.cta-corporate--bordered .cta-corporate__btn--primary {
    background: var(--primary);
    color: white;
}

.cta-corporate--bordered .cta-corporate__btn--primary:hover {
    background: var(--primary-dark);
}

.cta-corporate__btn--secondary {
    background: transparent;
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.cta-corporate__btn--secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
}

@media (min-width: 768px) {
    .cta-corporate__title {
        font-size: 2.5rem;
    }

    .cta-corporate__actions {
        flex-direction: row;
        justify-content: center;
    }
}

/* === FEATURE LISTS ===
   Checkmark/numbered feature lists */
.feature-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.feature-list__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
}

.feature-list__icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    font-size: 0.875rem;
    transition: all 0.4s ease;
}

.feature-list__icon svg {
    width: 16px;
    height: 16px;
}

.feature-list__content {
    flex: 1;
}

.feature-list__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-xs);
    transition: color 0.4s ease;
}

.feature-list__text {
    font-size: 0.9375rem;
    color: var(--text-secondary);
}

/* Number style */
.feature-list--number .feature-list__icon {
    background: var(--bg-secondary);
    color: var(--primary);
    font-weight: 700;
}

/* Arrow style */
.feature-list--arrow .feature-list__icon {
    background: transparent;
    color: var(--primary);
    font-size: 1.25rem;
}

/* Compact style */
.feature-list--compact .feature-list__item {
    gap: var(--space-sm);
}

.feature-list--compact .feature-list__icon {
    width: 20px;
    height: 20px;
    font-size: 0.75rem;
}

/* Color variants for feature list icons */
.feature-list__icon--blue {
    background: #3b82f6 !important;
}

.feature-list__icon--green {
    background: #10b981 !important;
}

.feature-list__icon--purple {
    background: #8b5cf6 !important;
}

.feature-list__icon--orange {
    background: #f59e0b !important;
}

.feature-list__icon--red {
    background: var(--primary) !important;
}

/* === JOURNEY PREVIEW ===
   Visual learning path preview card */
.journey-preview {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.journey-preview__header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    margin: 45px var(--space-md) 0 var(--space-md);
    background: linear-gradient(135deg, var(--primary), #b91c1c);
    color: white;
    font-weight: 600;
    font-size: 1rem;
    border-radius: var(--radius-md);
}

.journey-preview__header svg {
    width: 20px;
    height: 20px;
    stroke: white;
}

.journey-preview__steps {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-main);
}

.journey-preview__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
}

.journey-preview__number {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 700;
    font-size: 1.5rem;
    color: white;
    transition: all 0.3s ease;
}

/* Step 1 - Red/Primary */
.journey-preview__step--start .journey-preview__number {
    background: var(--primary);
}

/* Step 2 - Orange */
.journey-preview__step--step2 .journey-preview__number {
    background: #f97316;
}

/* Step 3 - Green */
.journey-preview__step--step3 .journey-preview__number {
    background: #22c55e;
}

/* Step 4 - Blue */
.journey-preview__step--step4 .journey-preview__number {
    background: #3b82f6;
}

/* Step 5 - Purple */
.journey-preview__step--end .journey-preview__number {
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
}

.journey-preview__label {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.journey-preview__step--start .journey-preview__label {
    color: var(--primary);
}

.journey-preview__step--step2 .journey-preview__label {
    color: #f97316;
}

.journey-preview__step--step3 .journey-preview__label {
    color: #22c55e;
}

.journey-preview__step--step4 .journey-preview__label {
    color: #3b82f6;
}

.journey-preview__step--end .journey-preview__label {
    color: #8b5cf6;
}

.journey-preview__connector {
    flex: 1;
    height: 3px;
    background: linear-gradient(90deg, var(--border), var(--primary-light), var(--border));
    margin: 0 var(--space-xs);
    position: relative;
    top: -14px;
}

.journey-preview__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--border);
    flex: 1;
}

.journey-preview__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
    border-right: 1px solid var(--border);
}

.journey-preview__stat:last-child {
    border-right: none;
}

.journey-preview__stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1;
}

.journey-preview__stat-label {
    font-size: 0.875rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-top: var(--space-sm);
}

.journey-preview__quote {
    padding: var(--space-md) var(--space-lg) var(--space-xl);
    text-align: center;
    font-style: italic;
    color: var(--text-secondary);
    border-top: 1px solid var(--border);
    background: var(--bg-card);
    margin-top: auto;
}

.journey-preview__quote-text {
    font-size: 1.125rem;
    line-height: 1.6;
    margin-bottom: var(--space-sm);
}

.journey-preview__quote-author {
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary);
    font-style: normal;
}

@media (max-width: 640px) {
    .journey-preview__steps {
        flex-wrap: wrap;
        gap: var(--space-md);
    }

    .journey-preview__connector {
        display: none;
    }

    .journey-preview__step {
        flex: 0 0 calc(33.33% - var(--space-md));
    }
}

/* === JOURNEY SELECTOR (Interactive Framework Picker) === */
.journey-selector {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
}

.journey-selector__btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-sm) var(--space-xs);
    background: transparent;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    color: var(--text);
    min-height: 60px;
}

.journey-selector__btn:hover {
    border-color: var(--primary);
    background: rgba(220, 38, 38, 0.05);
}

.journey-selector__btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.journey-selector__btn.is-active {
    border-color: var(--primary);
    background: var(--primary);
    color: white;
}

.journey-selector__num {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1;
}

.journey-selector__label {
    font-size: 0.625rem;
    font-weight: 500;
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Journey Detail Panel ---- */
.journey-detail {
    padding: var(--space-md) var(--space-lg) var(--space-lg);
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.journey-detail__content {
    text-align: center;
    animation: fadeInUp 0.3s ease;
}

.journey-detail__content[hidden] {
    display: none;
}

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

.journey-detail__badge {
    display: inline-block;
    padding: 4px 12px;
    background: var(--primary);
    color: white;
    border-radius: var(--radius-sm);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.journey-detail__title {
    font-size: 1.375rem;
    font-weight: 700;
    margin: var(--space-sm) 0 var(--space-xs);
    color: var(--text);
}

.journey-detail__acronym {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin-bottom: var(--space-sm);
}

.journey-detail__desc {
    font-size: 0.875rem;
    max-width: 380px;
    margin: 0 auto var(--space-md);
    line-height: 1.5;
    color: var(--text-secondary);
}

.journey-detail__link {
    display: inline-flex;
    align-items: center;
    color: var(--primary);
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    transition: color 0.2s ease;
}

.journey-detail__link:hover {
    color: #b91c1c;
    text-decoration: underline;
}

/* Journey Selector Mobile Styles ---- */
@media (max-width: 599px) {
    .journey-selector {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-xs);
        padding: var(--space-sm) var(--space-md);
    }

    .journey-selector__btn {
        min-height: 52px;
        padding: var(--space-xs);
    }

    .journey-selector__num {
        font-size: 1rem;
    }

    .journey-selector__label {
        font-size: 0.5625rem;
    }

    .journey-detail {
        padding: var(--space-sm) var(--space-md) var(--space-md);
        min-height: 160px;
    }

    .journey-detail__title {
        font-size: 1.125rem;
    }

    .journey-detail__desc {
        font-size: 0.8125rem;
    }
}

@media (max-width: 399px) {
    .journey-selector {
        grid-template-columns: repeat(3, 1fr);
    }

    .journey-selector__label {
        font-size: 0.5rem;
    }
}

/* === NOTICE/ALERT BOXES ===
   Info, success, warning, tip callouts */
.notice {
    display: flex;
    gap: var(--space-md);
    padding: var(--space-lg);
    border-radius: var(--radius-md);
    border-left: 4px solid;
}

.notice__icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.notice__content {
    flex: 1;
}

.notice__title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: var(--space-xs);
}

.notice__text {
    font-size: 0.9375rem;
    line-height: 1.6;
}

/* Info */
.notice--info {
    background: rgba(59, 130, 246, 0.1);
    border-color: #3b82f6;
}

.notice--info .notice__icon,
.notice--info .notice__title {
    color: #3b82f6;
}

/* Success */
.notice--success {
    background: rgba(16, 185, 129, 0.1);
    border-color: #10b981;
}

.notice--success .notice__icon,
.notice--success .notice__title {
    color: #10b981;
}

/* Warning */
.notice--warning {
    background: rgba(245, 158, 11, 0.1);
    border-color: #f59e0b;
}

.notice--warning .notice__icon,
.notice--warning .notice__title {
    color: #f59e0b;
}

/* Error/Danger */
.notice--error {
    background: rgba(239, 68, 68, 0.1);
    border-color: #ef4444;
}

.notice--error .notice__icon,
.notice--error .notice__title {
    color: #ef4444;
}

/* Tip */
.notice--tip {
    background: rgba(220, 53, 69, 0.1);
    border-color: var(--primary);
}

.notice--tip .notice__icon,
.notice--tip .notice__title {
    color: var(--primary);
}

/* === SCROLL ANIMATIONS ===
   AOS-style animations triggered on scroll */
[data-aos] {
    opacity: 0;
    transition-property: opacity, transform;
    transition-duration: 0.6s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

[data-aos].aos-animate {
    opacity: 1;
}

/* Fade animations */
[data-aos="fade"] {
    opacity: 0;
}

[data-aos="fade"].aos-animate {
    opacity: 1;
}

[data-aos="fade-up"] {
    transform: translateY(30px);
}

[data-aos="fade-up"].aos-animate {
    transform: translateY(0);
}

[data-aos="fade-down"] {
    transform: translateY(-30px);
}

[data-aos="fade-down"].aos-animate {
    transform: translateY(0);
}

[data-aos="fade-left"] {
    transform: translateX(30px);
}

[data-aos="fade-left"].aos-animate {
    transform: translateX(0);
}

[data-aos="fade-right"] {
    transform: translateX(-30px);
}

[data-aos="fade-right"].aos-animate {
    transform: translateX(0);
}

/* Zoom animations */
[data-aos="zoom-in"] {
    transform: scale(0.9);
}

[data-aos="zoom-in"].aos-animate {
    transform: scale(1);
}

[data-aos="zoom-out"] {
    transform: scale(1.1);
}

[data-aos="zoom-out"].aos-animate {
    transform: scale(1);
}

/* Flip animations */
[data-aos="flip-up"] {
    transform: perspective(1000px) rotateX(20deg);
}

[data-aos="flip-up"].aos-animate {
    transform: perspective(1000px) rotateX(0);
}

[data-aos="flip-left"] {
    transform: perspective(1000px) rotateY(20deg);
}

[data-aos="flip-left"].aos-animate {
    transform: perspective(1000px) rotateY(0);
}

/* Slide animations */
[data-aos="slide-up"] {
    transform: translateY(100%);
}

[data-aos="slide-up"].aos-animate {
    transform: translateY(0);
}

/* Delay utilities */
[data-aos-delay="100"] { transition-delay: 100ms; }
[data-aos-delay="200"] { transition-delay: 200ms; }
[data-aos-delay="300"] { transition-delay: 300ms; }
[data-aos-delay="400"] { transition-delay: 400ms; }
[data-aos-delay="500"] { transition-delay: 500ms; }
[data-aos-delay="600"] { transition-delay: 600ms; }
[data-aos-delay="700"] { transition-delay: 700ms; }
[data-aos-delay="800"] { transition-delay: 800ms; }

/* Duration utilities */
[data-aos-duration="300"] { transition-duration: 300ms; }
[data-aos-duration="400"] { transition-duration: 400ms; }
[data-aos-duration="500"] { transition-duration: 500ms; }
[data-aos-duration="600"] { transition-duration: 600ms; }
[data-aos-duration="800"] { transition-duration: 800ms; }
[data-aos-duration="1000"] { transition-duration: 1000ms; }

/* Disable animations for reduced motion */
@media (prefers-reduced-motion: reduce) {
    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* === CORPORATE ACCENT BAR ===
   Porto-style colored accent bar under sections */
.accent-bar {
    width: 100%;
    height: 8px;
    background: var(--primary);
}

.accent-bar--gradient {
    background: linear-gradient(90deg, var(--primary), var(--primary-dark));
}

.accent-bar--thick {
    height: 12px;
}

.accent-bar--thin {
    height: 4px;
}

/* Section with accent bar */
.section-accent {
    position: relative;
}

.section-accent::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 8px;
    background: var(--primary);
}

/* === BLOG/ARTICLE CARDS ===
   Porto-style blog card layout */
.blog-card {
    display: flex;
    gap: var(--space-lg);
    padding: var(--space-lg) 0;
    border-bottom: 1px solid var(--border-light);
}

.blog-card__date {
    flex-shrink: 0;
    text-align: center;
    min-width: 50px;
}

.blog-card__day {
    display: block;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1;
}

.blog-card__month {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: var(--space-xs);
}

.blog-card__content {
    flex: 1;
}

.blog-card__title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
    transition: color 0.3s ease;
}

.blog-card__title:hover {
    color: var(--primary);
}

.blog-card__text {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-sm);
}

.blog-card__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-muted);
    transition: color 0.3s ease, gap 0.3s ease;
}

.blog-card__link:hover {
    color: var(--primary);
    gap: var(--space-sm);
}

/* === TIMELINE COMPONENT ===
   Horizontal/vertical timelines */
.timeline {
    position: relative;
}

/* Vertical Timeline */
.timeline--vertical {
    padding-left: var(--space-xl);
}

.timeline--vertical::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--border-light);
}

.timeline__item {
    position: relative;
    padding-bottom: var(--space-xl);
}

.timeline__item:last-child {
    padding-bottom: 0;
}

.timeline--vertical .timeline__marker {
    position: absolute;
    left: calc(-1 * var(--space-xl) - 8px);
    top: 0;
    width: 18px;
    height: 18px;
    background: var(--primary);
    border: 3px solid var(--bg-primary);
    border-radius: 50%;
    z-index: 1;
}

.timeline__content {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    border: 1px solid var(--border-light);
}

.timeline__date {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-sm);
}

.timeline__title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

.timeline__text {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.timeline__link {
    display: inline-block;
    margin-top: var(--space-sm);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.timeline__link:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

/* Horizontal Timeline */
.timeline--horizontal {
    display: flex;
    overflow-x: auto;
    padding-bottom: var(--space-md);
    gap: var(--space-md);
}

.timeline--horizontal .timeline__item {
    flex: 0 0 280px;
    padding-bottom: 0;
    text-align: center;
}

.timeline--horizontal .timeline__marker {
    width: 40px;
    height: 40px;
    background: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    margin: 0 auto var(--space-md);
}

.timeline--horizontal .timeline__connector {
    position: absolute;
    top: 20px;
    left: calc(50% + 20px);
    right: calc(-50% + 20px);
    height: 2px;
    background: var(--border-light);
}

.timeline--horizontal .timeline__item:last-child .timeline__connector {
    display: none;
}

/* Timeline Fit Variant - no horizontal scroll */
.timeline--fit {
    overflow-x: visible;
    flex-wrap: wrap;
    justify-content: space-between;
}

.timeline--fit .timeline__item {
    flex: 1 1 200px;
    min-width: 180px;
    max-width: 250px;
}

.timeline--fit .timeline__connector {
    display: none;
}

.timeline--fit .timeline__text {
    font-size: 0.875rem;
}

@media (max-width: 900px) {
    .timeline--fit {
        flex-direction: column;
        align-items: center;
    }

    .timeline--fit .timeline__item {
        max-width: 100%;
        width: 100%;
    }
}

/* === PRICING/COMPARISON TABLES ===
   Feature comparison matrices */
.comparison-table-wrapper {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
}

.comparison-table th,
.comparison-table td {
    padding: var(--space-md) var(--space-lg);
    text-align: left;
    border-bottom: 1px solid var(--border-light);
}

.comparison-table th {
    background: var(--bg-secondary);
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--text-primary);
}

.comparison-table td {
    font-size: 0.9375rem;
    color: var(--text-secondary);
}

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

.comparison-table__feature {
    font-weight: 500;
    color: var(--text-primary);
}

.comparison-table__check {
    color: #10b981;
    font-size: 1.25rem;
}

.comparison-table__cross {
    color: var(--text-muted);
    font-size: 1.25rem;
}

.comparison-table__highlight {
    background: rgba(220, 53, 69, 0.05);
}

.comparison-table__highlight th {
    background: var(--primary);
    color: white;
}

/* Pricing Cards */
.pricing-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}

.pricing-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl);
    border: 2px solid var(--border-light);
    text-align: center;
    transition: all 0.3s ease;
}

.pricing-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-lg);
}

.pricing-card--featured {
    border-color: var(--primary);
    position: relative;
}

.pricing-card__badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--primary);
    color: white;
    padding: var(--space-xs) var(--space-md);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--radius-full);
}

.pricing-card__name {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

.pricing-card__price {
    font-size: 3rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1;
    margin-bottom: var(--space-md);
}

.pricing-card__price span {
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-muted);
}

.pricing-card__features {
    list-style: none;
    margin-bottom: var(--space-xl);
}

.pricing-card__features li {
    padding: var(--space-sm) 0;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-light);
}

.pricing-card__features li:last-child {
    border-bottom: none;
}

@media (min-width: 768px) {
    .pricing-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .pricing-card--featured {
        transform: scale(1.05);
        z-index: 1;
    }
}

/* === SECTION CTA ===
   Centered call-to-action within sections */
.section-cta {
    text-align: center;
    margin-top: var(--space-2xl);
}

/* === SPLIT CONTENT SECTIONS ===
   Image + text side-by-side layouts */
.split-section {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
    align-items: center;
}

.split-section__media {
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.split-section__media img {
    width: 100%;
    height: auto;
}

.split-section__content {
    padding: var(--space-lg) 0;
}

.split-section__eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--primary);
    margin-bottom: var(--space-sm);
}

.split-section__title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-md);
}

.split-section__text {
    font-size: 1.0625rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: var(--space-lg);
}

.split-section__badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--primary);
    background: rgba(220, 53, 69, 0.1);
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    margin-bottom: var(--space-sm);
}

.split-section__subtitle {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-md);
}

/* Split Section OR Divider ---- */
.split-section__divider {
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0 var(--space-md);
}

.split-section__or {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    background: var(--bg);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius);
    border: 2px solid var(--primary);
}

@media (min-width: 768px) {
    .split-section__divider {
        display: flex;
    }

    .split-section:has(.split-section__divider) {
        grid-template-columns: 1fr auto 1fr;
    }

    .split-section {
        grid-template-columns: 1fr 1fr;
    }

    .split-section--reverse .split-section__media,
    .split-section--reverse .split-section__visual {
        order: 2;
    }

    .split-section--reverse .split-section__content {
        order: 1;
    }

    .split-section--align-start {
        align-items: flex-start;
    }

    .split-section__media--auto {
        height: fit-content;
        align-self: flex-start;
    }
}

/* --- Notice Compact Variant --- */
.notice--compact {
    padding: var(--space-md) var(--space-lg);
}

/* --- Notice Fill Variant (Equal Height) --- */
.notice--fill {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-xl) var(--space-xl);
}

/* --- Impact Chart Component --- */
.impact-chart {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.impact-chart__header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border);
}

.impact-chart__icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.impact-chart__icon svg {
    width: 22px;
    height: 22px;
    color: white;
}

.impact-chart__title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text);
}

.impact-chart__bars {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    flex: 1;
    justify-content: space-evenly;
}

.impact-bar {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.impact-bar__label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
}

.impact-bar__name {
    font-weight: 500;
    color: var(--text);
}

.impact-bar__value {
    font-weight: 700;
    color: #10b981;
}

.impact-bar__track {
    height: 20px;
    background: var(--surface-alt);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.impact-bar__fill {
    height: 100%;
    border-radius: 10px;
    transition: width 1s ease-out;
    position: relative;
}

.impact-bar__fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2));
}

.impact-bar--task .impact-bar__fill {
    background: linear-gradient(90deg, #f59e0b, #f97316);
    width: 100%;
}

.impact-bar--comm .impact-bar__fill {
    background: linear-gradient(90deg, #0ea5e9, #6366f1);
    width: 100%;
}

.impact-bar--time .impact-bar__fill {
    background: linear-gradient(90deg, #10b981, #059669);
    width: 100%;
}

.impact-bar--energy .impact-bar__fill {
    background: linear-gradient(90deg, #8b5cf6, #a855f7);
    width: 100%;
}

.impact-chart__source {
    margin-top: var(--space-md);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--border);
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
}

/* --- Co-Pilot Handles Component ---
   Shows specific tasks AI handles as external executive function */
.copilot-handles {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.copilot-handles__header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    color: white;
}

.copilot-handles__icon {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.copilot-handles__icon svg {
    width: 20px;
    height: 20px;
    stroke: white;
}

.copilot-handles__title {
    font-size: 1rem;
    font-weight: 600;
}

.copilot-handles__list {
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    flex: 1;
}

.copilot-handles__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-sm);
    border-radius: var(--radius-md);
    transition: background 0.2s ease;
}

.copilot-handles__item:hover {
    background: var(--bg-main);
}

.copilot-handles__item-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.copilot-handles__item-icon svg {
    width: 18px;
    height: 18px;
    stroke: white;
}

.copilot-handles__item-icon--orange {
    background: linear-gradient(135deg, #f59e0b, #f97316);
}

.copilot-handles__item-icon--teal {
    background: linear-gradient(135deg, #14b8a6, #0d9488);
}

.copilot-handles__item-icon--purple {
    background: linear-gradient(135deg, #8b5cf6, #a855f7);
}

.copilot-handles__item-icon--green {
    background: linear-gradient(135deg, #10b981, #059669);
}

.copilot-handles__item-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.copilot-handles__item-task {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text);
}

.copilot-handles__item-how {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.copilot-handles__footer {
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-main);
    border-top: 1px solid var(--border);
}

.copilot-handles__tagline {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    font-style: italic;
}

/* --- Transformation Grid (Before/After/Result) --- */
.transformation-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-lg);
    margin: var(--space-lg) 0;
}

.before-after-item {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    border: 2px solid transparent;
    height: 100%;
}

.before-after-item--before {
    border-color: rgba(239, 68, 68, 0.3);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.05), rgba(239, 68, 68, 0.02));
}

.before-after-item--after {
    border-color: rgba(34, 197, 94, 0.3);
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.05), rgba(34, 197, 94, 0.02));
}

.before-after-title {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: var(--space-md);
}

.before-after-item--before .before-after-title {
    color: #ef4444;
}

.before-after-item--after .before-after-title {
    color: #22c55e;
}

.before-after-icon {
    font-size: 1.25rem;
}

.before-after-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.before-after-list li {
    position: relative;
    padding-left: var(--space-md);
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.before-after-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.before-after-item--before .before-after-list li::before {
    background: rgba(239, 68, 68, 0.6);
}

.before-after-item--after .before-after-list li::before {
    background: rgba(34, 197, 94, 0.6);
}

/* Transformation Outcome Column */
.transformation-outcome {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    color: white;
    height: 100%;
}

.transformation-outcome__header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.transformation-outcome__header svg {
    width: 28px;
    height: 28px;
    stroke: #22c55e;
}

.transformation-outcome__header span {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.transformation-outcome__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    flex: 1;
}

.transformation-outcome__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-sm) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.transformation-outcome__item:last-child {
    border-bottom: none;
}

.transformation-outcome__label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.6);
}

.transformation-outcome__value {
    font-size: 1.125rem;
    font-weight: 700;
    color: white;
}

/* Responsive: Stack on mobile */
@media (max-width: 900px) {
    .transformation-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 901px) and (max-width: 1100px) {
    .transformation-grid {
        grid-template-columns: 1fr 1fr;
    }

    .transformation-outcome {
        grid-column: span 2;
    }
}

/* --- Split Section Stretch Variant --- */
@media (min-width: 768px) {
    .split-section--stretch {
        align-items: stretch;
    }

    .split-section--stretch .split-section__media {
        display: flex;
        align-items: flex-start;
        justify-content: center;
    }

    .split-section--stretch .split-section__media > * {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .split-section--stretch .split-section__content {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

/* ============================================
   SECTION AMBIENT BACKGROUND ANIMATION
   Subtle floating AI terms in section backgrounds
   ============================================ */

/* Container for ambient background animations */
.section-ambient {
    position: relative;
    overflow: hidden;
}

/* Canvas covering full section background */
.section-ambient__canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.08;
}

/* Alt section (gray background) - slightly lower opacity */
.section-alt.section-ambient .section-ambient__canvas {
    opacity: 0.06;
}

/* Dark theme - adjust for better visibility */
[data-theme="dark"] .section-ambient__canvas {
    opacity: 0.12;
}

[data-theme="dark"] .section-alt.section-ambient .section-ambient__canvas {
    opacity: 0.10;
}

/* Content stays above animation */
.section-ambient > .container {
    position: relative;
    z-index: 1;
}

/* Section with search/dropdown - allow overflow and higher z-index */
.section-ambient--overflow {
    overflow: visible;
    z-index: 100;
}

/* Hide animation on mobile for performance */
@media (max-width: 768px) {
    .section-ambient__canvas {
        display: none;
    }
}

/* ============================================
   LEARN PAGE COMPONENTS
   Framework cards and mini finder for Learn hub
   ============================================ */

/* --- Framework Cards Grid --- */
.framework-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}

@media (min-width: 640px) {
    .framework-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .framework-cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* --- Framework Card --- */
.framework-card {
    display: flex;
    flex-direction: column;
    padding: var(--space-lg);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.framework-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border-color: var(--primary);
}

.framework-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-md);
}

.framework-card__badge {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    background: rgba(220, 53, 69, 0.1);
    color: var(--primary);
}

.framework-card__badge--foundation { background: rgba(59, 130, 246, 0.1); color: rgb(59, 130, 246); }
.framework-card__badge--extended { background: rgba(168, 85, 247, 0.1); color: rgb(168, 85, 247); }
.framework-card__badge--professional { background: rgba(34, 197, 94, 0.1); color: rgb(34, 197, 94); }
.framework-card__badge--interactive { background: rgba(249, 115, 22, 0.1); color: rgb(249, 115, 22); }
.framework-card__badge--advanced { background: rgba(220, 53, 69, 0.1); color: var(--primary); }
.framework-card__badge--expert { background: rgba(139, 92, 246, 0.1); color: rgb(139, 92, 246); }

.framework-card__elements {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.framework-card__title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 var(--space-xs) 0;
    color: var(--text-primary);
}

.framework-card__acronym {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0 0 var(--space-md) 0;
    line-height: 1.4;
}

.framework-card__desc {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 var(--space-md) 0;
    flex-grow: 1;
}

.framework-card__link {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary);
    margin-top: auto;
}

/* --- Finder Layout (Table + Mini Finder) --- */
.finder-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    align-items: start;
}

@media (min-width: 1024px) {
    .finder-layout {
        grid-template-columns: 380px 1fr;
    }
}

/* --- Mini Framework Finder --- */
.mini-finder {
    background: var(--bg-card);
    border: 2px solid var(--primary);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
}

.mini-finder__header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-xs);
}

.mini-finder__icon {
    width: 24px;
    height: 24px;
    color: var(--primary);
}

.mini-finder__title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-primary);
}

.mini-finder__subtitle {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0 0 var(--space-lg) 0;
}

.mini-finder__question {
    animation: fadeIn 0.3s ease;
}

.mini-finder__step {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary);
    background: rgba(220, 53, 69, 0.1);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-md);
}

.mini-finder__q-text {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 var(--space-md) 0;
    color: var(--text-primary);
}

.mini-finder__options {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.mini-finder__option {
    padding: var(--space-md);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
}

.mini-finder__option:hover {
    background: rgba(220, 53, 69, 0.05);
    border-color: var(--primary);
    color: var(--primary);
}

.mini-finder__option.is-selected {
    background: rgba(220, 53, 69, 0.1);
    border-color: var(--primary);
    color: var(--primary);
}

/* Finder Result */
.mini-finder__result {
    text-align: center;
    animation: fadeIn 0.3s ease;
}

.mini-finder__result-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto var(--space-md);
    color: rgb(34, 197, 94);
}

.mini-finder__result-icon svg {
    width: 100%;
    height: 100%;
}

.mini-finder__result-label {
    display: block;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: var(--space-xs);
}

.mini-finder__result-name {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: var(--space-sm);
}

.mini-finder__result-desc {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0 0 var(--space-lg) 0;
    line-height: 1.5;
}

.mini-finder__result-link {
    margin-bottom: var(--space-md);
}

.mini-finder__restart {
    display: block;
    width: 100%;
    padding: var(--space-sm);
    background: none;
    border: none;
    font-size: 0.85rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.2s ease;
}

.mini-finder__restart:hover {
    color: var(--primary);
}

/* --- Compact Comparison Table --- */
.comparison-table-wrapper--compact {
    overflow-x: auto;
}

.comparison-table--compact {
    font-size: 0.9rem;
}

.comparison-table--compact th,
.comparison-table--compact td {
    padding: var(--space-sm) var(--space-md);
}

.comparison-table__more {
    display: block;
    text-align: center;
    padding: var(--space-md);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    border-top: 1px solid var(--border);
    transition: background 0.2s ease;
}

.comparison-table__more:hover {
    background: rgba(220, 53, 69, 0.05);
}

/* ============================================
   TOOLS PAGE COMPONENTS
   Unique components for the AI Readiness Tools hub
   ============================================ */

/* --- Horizontal Process Steps ---
   Connected step indicators for learning paths */
.process-steps {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    flex-wrap: wrap;
}

.process-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 0 0 auto;
    max-width: 200px;
}

.process-step-number {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    font-size: 1.25rem;
    font-weight: 700;
    border-radius: 50%;
    margin-bottom: var(--space-md);
}

.process-step-content h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: var(--space-xs);
}

.process-step-content p {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: var(--space-sm);
}

.process-step-link {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.process-step-link:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

.process-connector {
    display: flex;
    align-items: center;
    padding: 0 var(--space-md);
    padding-top: 12px;
}

.process-connector svg {
    width: 24px;
    height: 24px;
    color: var(--border);
}

@media (max-width: 900px) {
    .process-steps {
        flex-direction: column;
        align-items: center;
        gap: var(--space-md);
    }

    .process-step {
        max-width: 300px;
    }

    .process-connector {
        transform: rotate(90deg);
        padding: var(--space-sm) 0;
    }
}

/* --- Bordered CTA Variant ---
   Outlined style CTA card */
.section-cta--bordered {
    background: transparent;
    border: 2px solid var(--primary);
    box-shadow: none;
}

.section-cta--bordered:hover {
    background: rgba(220, 53, 69, 0.05);
}

.section-cta--bordered .section-cta-title {
    color: var(--text);
}

.section-cta--bordered .section-cta-text {
    color: var(--text-secondary);
}

/* Outline button for bordered CTA */
.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-xl);
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary);
    background: transparent;
    border: 2px solid var(--primary);
    border-radius: var(--radius-md);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-outline:hover {
    background: var(--primary);
    color: white;
}

/* ============================================================
   FOUNDATIONS PAGE COMPONENTS
   Unique components for the Foundations hub page
   ============================================================ */

/* --- Hero Badge ---
   Floating badge above hero title */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    background: rgba(220, 53, 69, 0.1);
    border: 1px solid rgba(220, 53, 69, 0.3);
    border-radius: 50px;
    margin-bottom: var(--space-lg);
}

.hero-badge__icon {
    width: 20px;
    height: 20px;
    color: var(--primary);
}

.hero-badge__text {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--primary);
    letter-spacing: 0.02em;
}

/* --- Callout Card ---
   Highlighted content card with icon */
.callout-card {
    display: flex;
    gap: var(--space-lg);
    padding: var(--space-xl);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
}

.callout-card--highlight {
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.05) 0%, rgba(220, 53, 69, 0.02) 100%);
    border-color: rgba(220, 53, 69, 0.2);
}

.callout-card__icon {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-radius: var(--radius-md);
}

.callout-card__icon svg {
    width: 28px;
    height: 28px;
    color: white;
}

.callout-card__content {
    flex: 1;
}

.callout-card__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: var(--space-sm);
}

.callout-card__text {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.7;
}

.callout-card__text strong {
    color: var(--text);
    font-weight: 600;
}

@media (max-width: 600px) {
    .callout-card {
        flex-direction: column;
        text-align: center;
    }

    .callout-card__icon {
        margin: 0 auto;
    }
}

/* --- Stats Highlight ---
   Large number statistics with descriptions */
.stats-highlight {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
    padding: var(--space-2xl) 0;
}

.stats-highlight__item {
    text-align: center;
}

.stats-highlight__number {
    font-size: 3rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
    margin-bottom: var(--space-sm);
}

.stats-highlight__label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: var(--space-xs);
}

.stats-highlight__desc {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

@media (max-width: 768px) {
    .stats-highlight {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    .stats-highlight__number {
        font-size: 2.5rem;
    }
}

/* --- Journey Cards ---
   Sequential learning path cards */
.journey-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: var(--space-lg);
}

.journey-card {
    position: relative;
    padding: var(--space-xl);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 2px solid var(--border);
    transition: all 0.3s ease;
}

.journey-card:hover {
    border-color: var(--primary);
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(220, 53, 69, 0.1);
}

.journey-card--active {
    border-color: var(--primary);
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.03) 0%, transparent 100%);
}

.journey-card__number {
    position: absolute;
    top: -16px;
    left: var(--space-lg);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    font-size: 0.875rem;
    font-weight: 700;
    border-radius: 50%;
}

.journey-card__content {
    padding-top: var(--space-sm);
}

.journey-card__badge {
    display: inline-block;
    padding: var(--space-xs) var(--space-sm);
    background: rgba(220, 53, 69, 0.1);
    color: var(--primary);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-md);
}

.journey-card__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: var(--space-sm);
}

.journey-card__desc {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-md);
}

.journey-card__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    transition: gap 0.2s ease;
}

.journey-card__link:hover {
    gap: var(--space-sm);
}

.journey-card__link svg {
    width: 16px;
    height: 16px;
}

/* --- Goal Grid ---
   Quick-pick goal-oriented cards */
.goal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-lg);
}

.goal-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-xl);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    transition: all 0.3s ease;
}

.goal-card:hover {
    border-color: var(--primary);
    box-shadow: 0 8px 24px rgba(220, 53, 69, 0.08);
}

.goal-card__icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.1), rgba(220, 53, 69, 0.05));
    border-radius: 50%;
    margin-bottom: var(--space-md);
}

.goal-card__icon svg {
    width: 32px;
    height: 32px;
    color: var(--primary);
}

.goal-card__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: var(--space-xs);
}

.goal-card__desc {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: var(--space-md);
}

.goal-card__link {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.goal-card__link:hover {
    text-decoration: underline;
}

/* --- Framework Flow ---
   Horizontal flow diagram showing framework progression */
.framework-flow {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    flex-wrap: wrap;
    padding: var(--space-xl) 0;
}

.framework-flow__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 0 0 auto;
    max-width: 160px;
}

.framework-flow__marker {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    border: 2px solid var(--primary);
    border-radius: 50%;
    margin-bottom: var(--space-md);
    transition: all 0.3s ease;
}

.framework-flow__item:hover .framework-flow__marker {
    background: var(--primary);
}

.framework-flow__marker svg {
    width: 24px;
    height: 24px;
    color: var(--primary);
    transition: color 0.3s ease;
}

.framework-flow__item:hover .framework-flow__marker svg {
    color: white;
}

.framework-flow__connector {
    display: flex;
    align-items: center;
    padding: 0 var(--space-md);
    padding-top: 12px;
}

.framework-flow__connector svg {
    width: 24px;
    height: 24px;
    color: var(--border);
}

.framework-flow__label {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: var(--space-xs);
}

.framework-flow__desc {
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

@media (max-width: 900px) {
    .framework-flow {
        flex-direction: column;
        align-items: center;
        gap: var(--space-md);
    }

    .framework-flow__item {
        max-width: 280px;
    }

    .framework-flow__connector {
        transform: rotate(90deg);
        padding: var(--space-sm) 0;
    }
}

/* --- Next Steps Cards ---
   Horizontal cards with arrow indicating next action */
.next-steps-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: var(--space-lg);
}

.next-step-card {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-xl);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    text-decoration: none;
    transition: all 0.3s ease;
}

.next-step-card:hover {
    border-color: var(--primary);
    box-shadow: 0 8px 24px rgba(220, 53, 69, 0.1);
    transform: translateX(4px);
}

.next-step-card__icon {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.1), rgba(220, 53, 69, 0.05));
    border-radius: var(--radius-md);
}

.next-step-card__icon svg {
    width: 28px;
    height: 28px;
    color: var(--primary);
}

.next-step-card__content {
    flex: 1;
    min-width: 0;
}

.next-step-card__label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-xs);
}

.next-step-card__title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: var(--space-xs);
}

.next-step-card__desc {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.next-step-card__arrow {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: var(--text-muted);
    transition: all 0.3s ease;
}

.next-step-card:hover .next-step-card__arrow {
    color: var(--primary);
    transform: translateX(4px);
}

@media (max-width: 600px) {
    .next-step-card {
        flex-wrap: wrap;
    }

    .next-step-card__arrow {
        display: none;
    }
}

/* ============================================================
   CRISP PAGE COMPONENTS
   Unique components for the CRISP framework page
   ============================================================ */

/* --- Framework Formula ---
   Visual equation showing framework elements */
.framework-formula {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-md);
    padding: var(--space-xl);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
}

.formula-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
}

.formula-letter {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    font-size: 1.5rem;
    font-weight: 800;
    border-radius: var(--radius-md);
}

.formula-word {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.formula-plus,
.formula-equals {
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--text-muted);
}

.formula-result {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    background: rgba(34, 197, 94, 0.1);
    border-radius: var(--radius-md);
    color: #22c55e;
}

.formula-result svg {
    width: 24px;
    height: 24px;
}

.formula-result span {
    font-weight: 600;
}

@media (max-width: 768px) {
    .framework-formula {
        gap: var(--space-sm);
        padding: var(--space-lg);
    }

    .formula-letter {
        width: 40px;
        height: 40px;
        font-size: 1.25rem;
    }

    .formula-word {
        font-size: 0.625rem;
    }

    .formula-plus,
    .formula-equals {
        font-size: 1.25rem;
    }
}

/* --- Element Timeline ---
   Vertical timeline for framework elements */
.element-timeline {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    position: relative;
    padding-left: var(--space-3xl);
}

.element-timeline::before {
    content: '';
    position: absolute;
    left: 24px;
    top: 32px;
    bottom: 32px;
    width: 2px;
    background: linear-gradient(180deg, var(--primary), var(--primary-dark));
    opacity: 0.3;
}

.element-block {
    position: relative;
    display: flex;
    gap: var(--space-lg);
}

.element-block__marker {
    position: absolute;
    left: calc(-1 * var(--space-3xl));
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-radius: 50%;
    z-index: 1;
}

.element-block__letter {
    color: white;
    font-size: 1.25rem;
    font-weight: 800;
}

.element-block__content {
    flex: 1;
    padding: var(--space-xl);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    transition: all 0.3s ease;
}

.element-block__content:hover {
    border-color: var(--primary);
    box-shadow: 0 8px 24px rgba(220, 53, 69, 0.08);
}

.element-block__header {
    display: flex;
    align-items: baseline;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.element-block__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}

.element-block__tagline {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-style: italic;
}

.element-block__desc {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: var(--space-lg);
}

.element-block__examples {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-md);
}

.element-example {
    padding: var(--space-md);
    background: var(--bg-main);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--primary);
}

.element-example__label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-xs);
}

.element-example__text {
    font-size: 0.875rem;
    color: var(--text);
    font-style: italic;
}

@media (max-width: 768px) {
    .element-timeline {
        padding-left: var(--space-2xl);
    }

    .element-timeline::before {
        left: 16px;
    }

    .element-block__marker {
        left: calc(-1 * var(--space-2xl));
        width: 32px;
        height: 32px;
    }

    .element-block__letter {
        font-size: 1rem;
    }

    .element-block__title {
        font-size: 1.25rem;
    }
}

/* --- Comparison Panels ---
   Before/after comparison for prompts */
.comparison-panels {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2xl);
    align-items: stretch;
    max-width: 1200px;
    margin: 0 auto;
}

.comparison-panel {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-card);
    border: 2px solid var(--border);
    min-height: 350px;
}

.comparison-panel--before {
    border-color: #ef4444;
    background: linear-gradient(180deg, rgba(239, 68, 68, 0.03) 0%, var(--bg-card) 100%);
}

.comparison-panel--after {
    border-color: #22c55e;
    background: linear-gradient(180deg, rgba(34, 197, 94, 0.03) 0%, var(--bg-card) 100%);
}

.comparison-panel__header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg) var(--space-xl);
    font-weight: 700;
    font-size: 1.125rem;
}

.comparison-panel--before .comparison-panel__header {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.comparison-panel--after .comparison-panel__header {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.comparison-panel__header svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.comparison-panel__content {
    padding: var(--space-xl);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.comparison-panel__prompt {
    font-size: 1.125rem;
    line-height: 1.8;
    color: var(--text);
    margin-bottom: var(--space-lg);
}

.comparison-panel__result {
    padding: var(--space-lg);
    background: var(--bg-main);
    border-radius: var(--radius-md);
    font-size: 1rem;
    color: var(--text-secondary);
    margin-top: auto;
    line-height: 1.6;
}

.comparison-panel__result--positive {
    background: rgba(34, 197, 94, 0.05);
    border-left: 3px solid #22c55e;
}

.comparison-panel__legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    padding: var(--space-lg) var(--space-xl);
    background: var(--bg-main);
    border-top: 1px solid var(--border);
}

/* Prompt Highlights */
.prompt-highlight {
    border-radius: 3px;
    padding: 1px 4px;
}

.prompt-highlight--c {
    background: rgba(59, 130, 246, 0.15);
}

.prompt-highlight--r {
    background: rgba(168, 85, 247, 0.15);
}

.prompt-highlight--i {
    background: rgba(34, 197, 94, 0.15);
}

.prompt-highlight--s {
    background: rgba(249, 115, 22, 0.15);
}

.prompt-highlight--p {
    background: rgba(236, 72, 153, 0.15);
}

/* Legend Tags */
.legend-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-xs) var(--space-sm);
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: var(--radius-sm);
    color: white;
}

.legend-tag--c { background: #3b82f6; }
.legend-tag--r { background: #a855f7; }
.legend-tag--i { background: #22c55e; }
.legend-tag--s { background: #f97316; }
.legend-tag--p { background: #ec4899; }

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

/* --- Prompt Transformation ---
   Before/after prompt comparison with visual transformation */
.prompt-transform {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--space-xl);
    align-items: stretch;
    max-width: 1100px;
    margin: 0 auto;
}

.prompt-transform__before,
.prompt-transform__after {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    border: 2px solid var(--border);
    display: flex;
    flex-direction: column;
}

.prompt-transform__before {
    border-color: rgba(239, 68, 68, 0.3);
}

.prompt-transform__after {
    border-color: rgba(34, 197, 94, 0.3);
}

.prompt-transform__label {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: var(--space-lg);
}

.prompt-transform__label svg {
    width: 24px;
    height: 24px;
}

.prompt-transform__label--before {
    color: #ef4444;
}

.prompt-transform__label--after {
    color: #22c55e;
}

.prompt-transform__text {
    font-size: 1.25rem;
    font-style: italic;
    color: var(--text);
    padding: var(--space-lg);
    background: var(--bg-main);
    border-radius: var(--radius-md);
    border-left: 4px solid #ef4444;
    flex: 1;
}

.prompt-transform__arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    color: var(--primary);
    font-weight: 600;
    font-size: 0.875rem;
}

.prompt-transform__arrow svg {
    width: 48px;
    height: 48px;
    stroke: var(--primary);
}

.prompt-transform__components {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    flex: 1;
}

.prompt-component {
    display: flex;
    gap: var(--space-md);
    align-items: flex-start;
    padding: var(--space-md);
    background: var(--bg-main);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--border);
}

.prompt-component--context {
    border-left-color: #3b82f6;
}

.prompt-component--task {
    border-left-color: #22c55e;
}

.prompt-component--specifics {
    border-left-color: #f97316;
}

.prompt-component--format {
    border-left-color: #8b5cf6;
}

.prompt-component__tag {
    flex-shrink: 0;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
}

.prompt-component--context .prompt-component__tag {
    background: #3b82f6;
}

.prompt-component--task .prompt-component__tag {
    background: #22c55e;
}

.prompt-component--specifics .prompt-component__tag {
    background: #f97316;
}

.prompt-component--format .prompt-component__tag {
    background: #8b5cf6;
}

.prompt-component__text {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--text);
}

.prompt-transform__outcome {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    margin-top: var(--space-lg);
}

.prompt-transform__outcome svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.prompt-transform__outcome--weak {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.prompt-transform__outcome--weak svg {
    stroke: #dc2626;
}

.prompt-transform__outcome--strong {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.prompt-transform__outcome--strong svg {
    stroke: #16a34a;
}

@media (max-width: 900px) {
    .prompt-transform {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .prompt-transform__arrow {
        flex-direction: row;
        padding: var(--space-md) 0;
    }

    .prompt-transform__arrow svg {
        width: 32px;
        height: 32px;
        transform: rotate(90deg);
    }
}

/* --- Approach Tabs ---
   Tabbed content for labeled vs natural language */
.approach-tabs {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    overflow: hidden;
    margin-bottom: var(--space-xl);
}

.approach-tabs__nav {
    display: flex;
    background: var(--bg-main);
    border-bottom: 1px solid var(--border);
}

.approach-tab-btn {
    flex: 1;
    padding: var(--space-md) var(--space-lg);
    background: transparent;
    border: none;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.approach-tab-btn:hover {
    color: var(--text);
    background: rgba(220, 53, 69, 0.05);
}

.approach-tab-btn.is-active {
    color: var(--primary);
    background: var(--bg-card);
}

.approach-tab-btn.is-active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--primary);
}

.approach-tabs__content {
    padding: var(--space-xl);
}

.approach-tab-panel {
    display: none;
}

.approach-tab-panel.is-active {
    display: block;
}

.approach-prompt-box {
    padding: var(--space-lg);
    background: var(--bg-main);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--primary);
}

.approach-prompt-box p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text);
    margin-bottom: var(--space-md);
}

.approach-prompt-box p:last-child {
    margin-bottom: 0;
}

/* --- Approach Comparison (Side-by-Side) ---
   Two-column comparison showing labeled vs natural language */
.approach-comparison {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--space-lg);
    align-items: stretch;
    margin-bottom: var(--space-xl);
}

.approach-comparison__panel {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.approach-comparison__header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-main);
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    font-size: 1rem;
    color: var(--text);
}

.approach-comparison__header svg {
    width: 20px;
    height: 20px;
    stroke: var(--primary);
}

.approach-comparison__panel--labeled .approach-comparison__header svg {
    stroke: var(--primary);
}

.approach-comparison__panel--natural .approach-comparison__header svg {
    stroke: #10b981;
}

.approach-comparison__content {
    padding: var(--space-lg);
    flex: 1;
}

.approach-comparison__content p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text);
    margin-bottom: var(--space-sm);
}

.approach-comparison__content p:last-child {
    margin-bottom: 0;
}

.approach-comparison__content strong {
    color: var(--primary);
}

.approach-comparison__footer {
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-main);
    border-top: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.approach-comparison__badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
}

.approach-comparison__badge--blue {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.approach-comparison__badge--green {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.approach-comparison__divider {
    display: flex;
    align-items: center;
    justify-content: center;
}

.approach-comparison__vs {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-main);
    border-radius: var(--radius-full);
    border: 1px solid var(--border);
}

@media (max-width: 768px) {
    .approach-comparison {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .approach-comparison__divider {
        padding: var(--space-sm) 0;
    }
}

/* --- Use Case Cards ---
   Grid of use case cards with icons */
.use-case-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: var(--space-lg);
}

.use-case-card {
    padding: var(--space-xl);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    text-align: center;
    transition: all 0.3s ease;
}

.use-case-card:hover {
    border-color: var(--primary);
    box-shadow: 0 8px 24px rgba(220, 53, 69, 0.08);
}

.use-case-card__icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.1), rgba(220, 53, 69, 0.05));
    border-radius: 50%;
    margin: 0 auto var(--space-md);
}

.use-case-card__icon svg {
    width: 28px;
    height: 28px;
    color: var(--primary);
}

.use-case-card__title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: var(--space-sm);
}

.use-case-card__desc {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* --- Alternative Cards ---
   Horizontal cards linking to other frameworks */
.alternative-cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.alternative-card {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-lg);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    text-decoration: none;
    transition: all 0.3s ease;
}

.alternative-card:hover {
    border-color: var(--primary);
    box-shadow: 0 8px 24px rgba(220, 53, 69, 0.1);
    transform: translateX(4px);
}

.alternative-card__icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.1), rgba(220, 53, 69, 0.05));
    border-radius: var(--radius-md);
}

.alternative-card__icon svg {
    width: 24px;
    height: 24px;
    color: var(--primary);
}

.alternative-card__content {
    flex: 1;
    min-width: 0;
}

.alternative-card__trigger {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-xs);
}

.alternative-card__title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: var(--space-xs);
}

.alternative-card__desc {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.alternative-card__arrow {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: var(--text-muted);
    transition: all 0.3s ease;
}

.alternative-card:hover .alternative-card__arrow {
    color: var(--primary);
    transform: translateX(4px);
}

@media (max-width: 600px) {
    .alternative-card {
        flex-wrap: wrap;
    }

    .alternative-card__arrow {
        display: none;
    }
}

/* ============================================================
   CRISPE PAGE COMPONENTS
   Unique components for the CRISPE framework page
   ============================================================ */

/* --- Framework Evolution ---
   Visual showing CRISP → CRISPE transition */
.framework-evolution {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xl);
    flex-wrap: wrap;
    padding: var(--space-xl);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    margin-bottom: var(--space-xl);
}

.evolution-base,
.evolution-extended {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
}

.evolution-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.evolution-letters {
    display: flex;
    gap: var(--space-xs);
}

.evolution-letter {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-main);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text);
}

.evolution-letter--highlight {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-color: var(--primary);
    color: white;
}

.evolution-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
}

.evolution-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
}

.evolution-arrow svg {
    width: 32px;
    height: 32px;
    color: var(--primary);
}

@media (max-width: 600px) {
    .framework-evolution {
        flex-direction: column;
    }

    .evolution-arrow svg {
        transform: rotate(90deg);
    }
}

/* --- Extension Highlight ---
   Callout for the +E element */
.extension-highlight {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-xl);
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.05) 0%, rgba(220, 53, 69, 0.02) 100%);
    border-radius: var(--radius-lg);
    border: 2px solid rgba(220, 53, 69, 0.2);
}

.extension-highlight__badge {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    font-size: 1.5rem;
    font-weight: 800;
    border-radius: 50%;
}

.extension-highlight__content {
    flex: 1;
}

.extension-highlight__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: var(--space-sm);
}

.extension-highlight__text {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.7;
}

@media (max-width: 600px) {
    .extension-highlight {
        flex-direction: column;
        text-align: center;
    }
}

/* --- Element Grid ---
   Grid of element cards */
.element-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: var(--space-lg);
}

.element-card {
    display: flex;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    transition: all 0.3s ease;
    position: relative;
}

.element-card:hover {
    border-color: var(--primary);
    box-shadow: 0 8px 24px rgba(220, 53, 69, 0.08);
}

.element-card--highlight {
    border-color: var(--primary);
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.03) 0%, transparent 100%);
}

.element-card__letter {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-main);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text);
}

.element-card--highlight .element-card__letter {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-color: var(--primary);
    color: white;
}

.element-card__content {
    flex: 1;
    min-width: 0;
}

.element-card__title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: var(--space-xs);
}

.element-card__desc {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: var(--space-sm);
}

.element-card__example {
    font-size: 0.8125rem;
    color: var(--text-muted);
    font-style: italic;
}

.element-card__badge {
    position: absolute;
    top: -10px;
    right: var(--space-md);
    padding: var(--space-xs) var(--space-sm);
    background: var(--primary);
    color: white;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--radius-sm);
}

/* --- Example Types Grid ---
   Cards showing different example types */
.example-types-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: var(--space-lg);
}

.example-type-card {
    padding: var(--space-xl);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    transition: all 0.3s ease;
}

.example-type-card:hover {
    border-color: var(--primary);
    box-shadow: 0 8px 24px rgba(220, 53, 69, 0.08);
}

.example-type-card__header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.example-type-card__header svg {
    width: 32px;
    height: 32px;
    color: var(--primary);
}

.example-type-card__header h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text);
}

.example-type-card__desc {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-md);
}

.example-type-card__sample {
    padding: var(--space-md);
    background: var(--bg-main);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--primary);
    margin-bottom: var(--space-md);
}

.example-type-card__sample .sample-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-xs);
}

.example-type-card__sample code {
    font-size: 0.8125rem;
    color: var(--text);
    font-family: inherit;
    line-height: 1.5;
}

.example-type-card__use {
    font-size: 0.8125rem;
    color: var(--text-muted);
    font-style: italic;
}

/* --- Prompt Builder Preview ---
   Visual showing prompt segments */
.prompt-builder-preview {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    overflow: hidden;
    margin-bottom: var(--space-xl);
}

.prompt-builder-preview__header {
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-main);
    border-bottom: 1px solid var(--border);
}

.prompt-builder-preview__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
}

.prompt-builder-preview__content {
    padding: var(--space-lg);
}

.prompt-segment {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-sm);
}

.prompt-segment__label {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    font-weight: 700;
    color: white;
}

.prompt-segment__text {
    font-size: 0.9375rem;
    color: var(--text);
    line-height: 1.6;
}

.prompt-segment--c { background: rgba(59, 130, 246, 0.1); }
.prompt-segment--c .prompt-segment__label { background: #3b82f6; }

.prompt-segment--r { background: rgba(168, 85, 247, 0.1); }
.prompt-segment--r .prompt-segment__label { background: #a855f7; }

.prompt-segment--i { background: rgba(34, 197, 94, 0.1); }
.prompt-segment--i .prompt-segment__label { background: #22c55e; }

.prompt-segment--s { background: rgba(249, 115, 22, 0.1); }
.prompt-segment--s .prompt-segment__label { background: #f97316; }

.prompt-segment--p { background: rgba(236, 72, 153, 0.1); }
.prompt-segment--p .prompt-segment__label { background: #ec4899; }

.prompt-segment--e { background: rgba(220, 53, 69, 0.1); }
.prompt-segment--e .prompt-segment__label { background: var(--primary); }

.prompt-builder-preview__footer {
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-main);
    border-top: 1px solid var(--border);
}

.prompt-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
}

.prompt-legend__item {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.prompt-legend__dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.prompt-legend__dot--c { background: #3b82f6; }
.prompt-legend__dot--r { background: #a855f7; }
.prompt-legend__dot--i { background: #22c55e; }
.prompt-legend__dot--s { background: #f97316; }
.prompt-legend__dot--p { background: #ec4899; }
.prompt-legend__dot--e { background: var(--primary); }

/* --- Decision Cards ---
   Side-by-side comparison cards */
.decision-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: var(--space-xl);
}

.decision-card {
    padding: var(--space-xl);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 2px solid var(--border);
    position: relative;
}

.decision-card--crisp {
    border-color: var(--border);
}

.decision-card--crispe {
    border-color: var(--primary);
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.03) 0%, transparent 100%);
}

.decision-card__header {
    margin-bottom: var(--space-lg);
}

.decision-card__header h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
}

.decision-card__list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-lg);
}

.decision-card__list li {
    position: relative;
    padding-left: var(--space-lg);
    margin-bottom: var(--space-sm);
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.decision-card__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border);
}

.decision-card--crispe .decision-card__list li::before {
    background: var(--primary);
}

.decision-card__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
}

.decision-card__link:hover {
    text-decoration: underline;
}

.decision-card__badge {
    position: absolute;
    top: var(--space-lg);
    right: var(--space-lg);
    padding: var(--space-xs) var(--space-sm);
    background: var(--primary);
    color: white;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--radius-sm);
}

/* === COSTAR PAGE COMPONENTS ===
   Unique visual components for the COSTAR framework page
   Features audience-centered hub-spoke visualization
   ========================================== */

/* --- Audience Center Visual ---
   Hub-and-spoke diagram with audience at center */
.audience-center-visual {
    position: relative;
    padding: var(--space-3xl) 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.audience-center-visual__hub {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary) 0%, #b02a37 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    box-shadow: 0 8px 32px rgba(220, 53, 69, 0.3);
}

.audience-center-visual__hub-icon {
    width: 48px;
    height: 48px;
    color: white;
    margin-bottom: var(--space-xs);
}

.audience-center-visual__hub-text {
    font-size: 1rem;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.audience-center-visual__spokes {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* --- Audience Spokes ---
   Radial elements around the hub */
.audience-spoke {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-md);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 2px solid var(--border);
    transition: all var(--transition-normal);
    min-width: 100px;
}

.audience-spoke--c {
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
}

.audience-spoke--o {
    top: 20%;
    right: -80px;
}

.audience-spoke--s {
    bottom: 20%;
    right: -80px;
}

.audience-spoke--t {
    bottom: -60px;
    left: 50%;
    transform: translateX(-50%);
}

.audience-spoke--r {
    bottom: 20%;
    left: -80px;
}

.audience-spoke--highlight,
.audience-spoke:hover {
    border-color: var(--primary);
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(220, 53, 69, 0.15);
}

.audience-spoke--c:hover,
.audience-spoke--t:hover {
    transform: translateX(-50%) scale(1.05);
}

.audience-spoke__letter {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--primary);
}

.audience-spoke__label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Responsive adjustments for spokes */
@media (max-width: 768px) {
    .audience-center-visual {
        padding: var(--space-2xl) 0;
    }

    .audience-center-visual__hub {
        width: 120px;
        height: 120px;
    }

    .audience-center-visual__hub-icon {
        width: 36px;
        height: 36px;
    }

    .audience-spoke {
        position: relative;
        inset: auto;
        transform: none !important;
    }

    .audience-center-visual__spokes {
        position: relative;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: var(--space-sm);
        margin-top: var(--space-xl);
    }
}

/* --- COSTAR Elements ---
   Vertical list of framework elements */
.costar-elements {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.costar-element {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--space-lg);
    align-items: start;
    padding: var(--space-xl);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 2px solid var(--border);
    position: relative;
    transition: all var(--transition-normal);
}

.costar-element:hover {
    border-color: var(--border-hover);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.costar-element--highlight {
    border-color: var(--primary);
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.03) 0%, transparent 100%);
}

.costar-element--highlight:hover {
    border-color: var(--primary);
}

.costar-element__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    min-width: 80px;
}

.costar-element__letter {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--primary) 0%, #b02a37 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 800;
    color: white;
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.25);
}

.costar-element__title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
}

.costar-element__subtitle {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: var(--space-sm);
}

.costar-element__desc {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-md);
}

.costar-element__example {
    padding: var(--space-md);
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-style: italic;
    border-left: 3px solid var(--primary);
}

.costar-element__badge {
    padding: var(--space-xs) var(--space-sm);
    background: rgba(220, 53, 69, 0.1);
    color: var(--primary);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

@media (max-width: 768px) {
    .costar-element {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .costar-element__header {
        flex-direction: row;
        justify-content: center;
        gap: var(--space-md);
    }

    .costar-element__badge {
        position: absolute;
        top: var(--space-md);
        right: var(--space-md);
    }
}

/* --- Audience Transform ---
   Shows same topic adapted for different audiences */
.audience-transform {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--space-xl);
    align-items: start;
}

.audience-transform__source {
    padding: var(--space-xl);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 2px solid var(--border);
    position: sticky;
    top: calc(120px + var(--ticker-offset, 0px));
}

.audience-transform__source-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-sm);
}

.audience-transform__source-topic {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: var(--space-md);
}

.audience-transform__source-desc {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.audience-transform__outputs {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

@media (max-width: 992px) {
    .audience-transform {
        grid-template-columns: 1fr;
    }

    .audience-transform__source {
        position: relative;
        top: 0;
    }
}

/* --- Audience Output ---
   Individual audience adaptation cards */
.audience-output {
    padding: var(--space-xl);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 2px solid var(--border);
    transition: all var(--transition-normal);
}

.audience-output:hover {
    border-color: var(--border-hover);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.audience-output__header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border);
}

.audience-output__icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--primary) 0%, #b02a37 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.audience-output__icon svg {
    width: 24px;
    height: 24px;
}

.audience-output__title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text);
}

.audience-output__subtitle {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.audience-output__text {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: var(--space-lg);
    padding: var(--space-md);
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--primary);
}

.audience-output__traits {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.audience-output__trait {
    padding: var(--space-xs) var(--space-sm);
    background: rgba(220, 53, 69, 0.1);
    color: var(--primary);
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
}

/* --- COSTAR-specific Prompt Segment Colors ---
   Additional colors for O, T, A, R elements */
.prompt-segment--o {
    background: rgba(234, 179, 8, 0.1);  /* Yellow - Objective */
    border-color: rgba(234, 179, 8, 0.3);
}

.prompt-segment--t {
    background: rgba(14, 165, 233, 0.1);  /* Sky Blue - Tone */
    border-color: rgba(14, 165, 233, 0.3);
}

.prompt-segment--a {
    background: rgba(168, 85, 247, 0.1);  /* Purple - Audience */
    border-color: rgba(168, 85, 247, 0.3);
}

/* Note: .prompt-segment--r already exists for Role (purple) in CRISP
   COSTAR uses same color for Response format */

/* COSTAR Legend dots */
.prompt-legend__dot--o { background: rgb(234, 179, 8); }
.prompt-legend__dot--t { background: rgb(14, 165, 233); }
.prompt-legend__dot--a { background: rgb(168, 85, 247); }

/* --- COSTAR Comparison Table ---
   Stylized table for comparing frameworks */
.costar-comparison {
    overflow-x: auto;
}

.costar-comparison table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.costar-comparison th,
.costar-comparison td {
    padding: var(--space-md) var(--space-lg);
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.costar-comparison th {
    background: var(--bg-elevated);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.costar-comparison td {
    font-size: 0.9375rem;
    color: var(--text-secondary);
}

.costar-comparison tr:last-child td {
    border-bottom: none;
}

.costar-comparison__highlight {
    background: rgba(220, 53, 69, 0.05);
}

.costar-comparison__check {
    color: var(--success);
    font-weight: 600;
}

.costar-comparison__x {
    color: var(--text-muted);
}

/* === REACT PAGE COMPONENTS ===
   Unique visual components for the ReAct framework page
   Features circular cycle visualization and iteration displays
   ========================================== */

/* --- React Cycle Visualization ---
   Circular loop showing Thought → Action → Observation → Loop */
.react-cycle {
    position: relative;
    width: 100%;
    max-width: 900px;
    min-height: 450px;
    margin: 0 auto;
    padding: var(--space-3xl) var(--space-xl);
    display: flex;
    justify-content: center;
    align-items: center;
}

.react-cycle__center {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary) 0%, #b02a37 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    box-shadow: 0 8px 32px rgba(220, 53, 69, 0.3);
}

.react-cycle__label {
    font-size: 1.25rem;
    font-weight: 800;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.react-cycle__sublabel {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
}

.react-cycle__node {
    position: absolute;
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 2px solid var(--border);
    transition: all var(--transition-normal);
    z-index: 1;
}

.react-cycle__node:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 16px rgba(220, 53, 69, 0.15);
    transform: scale(1.05);
}

.react-cycle__node--thought {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.react-cycle__node--thought:hover {
    transform: translateX(-50%) scale(1.05);
}

.react-cycle__node--action {
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

.react-cycle__node--action:hover {
    transform: translateY(-50%) scale(1.05);
}

.react-cycle__node--observation {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.react-cycle__node--observation:hover {
    transform: translateX(-50%) scale(1.05);
}

.react-cycle__node--loop {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.react-cycle__node--loop:hover {
    transform: translateY(-50%) scale(1.05);
}

.react-cycle__node-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
}

.react-cycle__node-icon svg {
    width: 20px;
    height: 20px;
}

.react-cycle__node-content {
    display: flex;
    flex-direction: column;
}

.react-cycle__node-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text);
}

.react-cycle__node-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.react-cycle__arrow {
    position: absolute;
    width: 24px;
    height: 24px;
    color: var(--text-muted);
    z-index: 0;
}

.react-cycle__arrow--1 {
    top: 30%;
    right: 25%;
    transform: rotate(45deg);
}

.react-cycle__arrow--2 {
    bottom: 30%;
    right: 25%;
    transform: rotate(135deg);
}

.react-cycle__arrow--3 {
    bottom: 30%;
    left: 25%;
    transform: rotate(-135deg);
}

.react-cycle__arrow--4 {
    top: 30%;
    left: 25%;
    transform: rotate(-45deg);
}

.react-cycle__caption {
    text-align: center;
    margin-top: var(--space-lg);
}

.react-cycle__caption p {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    max-width: 500px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .react-cycle {
        flex-direction: column;
        gap: var(--space-lg);
        padding: var(--space-xl) 0;
    }

    .react-cycle__center {
        width: 100px;
        height: 100px;
    }

    .react-cycle__node {
        position: relative;
        inset: auto;
        transform: none !important;
        width: 100%;
        justify-content: center;
    }

    .react-cycle__node:hover {
        transform: scale(1.02) !important;
    }

    .react-cycle__arrow {
        display: none;
    }
}

/* --- Animated ReAct Cycle ---
   Interactive cycling animation with extending message boxes */
.react-cycle--animated {
    padding: var(--space-3xl) var(--space-2xl);
    max-width: 1000px;
    min-height: 500px;
}

.react-cycle--animated .react-cycle__node {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.4;
    filter: grayscale(0.5);
}

.react-cycle--animated .react-cycle__node.is-active {
    opacity: 1;
    filter: grayscale(0);
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.15), 0 8px 24px rgba(220, 53, 69, 0.25);
    z-index: 10;
}

.react-cycle--animated .react-cycle__node--thought.is-active {
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15), 0 8px 24px rgba(59, 130, 246, 0.25);
    border-color: #3b82f6;
}

.react-cycle--animated .react-cycle__node--action.is-active {
    box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.15), 0 8px 24px rgba(249, 115, 22, 0.25);
    border-color: #f97316;
}

.react-cycle--animated .react-cycle__node--observation.is-active {
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.15), 0 8px 24px rgba(34, 197, 94, 0.25);
    border-color: #22c55e;
}

.react-cycle--animated .react-cycle__node--loop.is-active {
    box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.15), 0 8px 24px rgba(168, 85, 247, 0.25);
    border-color: #a855f7;
}

/* Message Box Extensions */
.react-cycle__message {
    position: absolute;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 2px solid var(--border);
    padding: var(--space-md) var(--space-lg);
    max-width: 280px;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 20;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.react-cycle__message.is-visible {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.react-cycle__message::before {
    content: '';
    position: absolute;
    width: 40px;
    height: 2px;
    background: var(--border);
}

/* Thought message - extends right */
.react-cycle__node--thought .react-cycle__message {
    top: 50%;
    left: calc(100% + 50px);
    transform: translateY(-50%) scale(0.8);
    border-color: #3b82f6;
}

.react-cycle__node--thought .react-cycle__message.is-visible {
    transform: translateY(-50%) scale(1);
}

.react-cycle__node--thought .react-cycle__message::before {
    left: -50px;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(90deg, transparent, #3b82f6);
}

/* Action message - extends right */
.react-cycle__node--action .react-cycle__message {
    top: 50%;
    left: calc(100% + 50px);
    transform: translateY(-50%) scale(0.8);
    border-color: #f97316;
}

.react-cycle__node--action .react-cycle__message.is-visible {
    transform: translateY(-50%) scale(1);
}

.react-cycle__node--action .react-cycle__message::before {
    left: -50px;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(90deg, transparent, #f97316);
}

/* Observation message - extends left */
.react-cycle__node--observation .react-cycle__message {
    top: 50%;
    right: calc(100% + 50px);
    left: auto;
    transform: translateY(-50%) scale(0.8);
    border-color: #22c55e;
}

.react-cycle__node--observation .react-cycle__message.is-visible {
    transform: translateY(-50%) scale(1);
}

.react-cycle__node--observation .react-cycle__message::before {
    right: -50px;
    left: auto;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(90deg, #22c55e, transparent);
}

/* Loop message - extends left */
.react-cycle__node--loop .react-cycle__message {
    top: 50%;
    right: calc(100% + 50px);
    left: auto;
    transform: translateY(-50%) scale(0.8);
    border-color: #a855f7;
}

.react-cycle__node--loop .react-cycle__message.is-visible {
    transform: translateY(-50%) scale(1);
}

.react-cycle__node--loop .react-cycle__message::before {
    right: -50px;
    left: auto;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(90deg, #a855f7, transparent);
}

.react-cycle__message-title {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: var(--space-xs);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.react-cycle__message-title svg {
    width: 16px;
    height: 16px;
}

.react-cycle__node--thought .react-cycle__message-title {
    color: #3b82f6;
}

.react-cycle__node--action .react-cycle__message-title {
    color: #f97316;
}

.react-cycle__node--observation .react-cycle__message-title {
    color: #22c55e;
}

.react-cycle__node--loop .react-cycle__message-title {
    color: #a855f7;
}

.react-cycle__message-text {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Arrow pulse animation for active transitions */
.react-cycle--animated .react-cycle__arrow {
    transition: all 0.5s ease;
    opacity: 0.3;
}

.react-cycle--animated .react-cycle__arrow.is-active {
    opacity: 1;
    color: var(--primary);
    animation: arrow-pulse 1s ease-in-out infinite;
}

@keyframes arrow-pulse {
    0%, 100% { transform: rotate(var(--arrow-rotation)) scale(1); }
    50% { transform: rotate(var(--arrow-rotation)) scale(1.2); }
}

.react-cycle__arrow--1 { --arrow-rotation: 45deg; }
.react-cycle__arrow--2 { --arrow-rotation: 135deg; }
.react-cycle__arrow--3 { --arrow-rotation: -135deg; }
.react-cycle__arrow--4 { --arrow-rotation: -45deg; }

/* Cycle indicator dots */
.react-cycle__indicators {
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
}

.react-cycle__indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--border);
    transition: all 0.3s ease;
}

.react-cycle__indicator.is-active {
    background: var(--primary);
    transform: scale(1.2);
}

.react-cycle__indicator--thought.is-active { background: #3b82f6; }
.react-cycle__indicator--action.is-active { background: #f97316; }
.react-cycle__indicator--observation.is-active { background: #22c55e; }
.react-cycle__indicator--loop.is-active { background: #a855f7; }

/* Mobile responsive for animated cycle */
@media (max-width: 992px) {
    .react-cycle--animated {
        padding: var(--space-xl) var(--space-sm);
    }

    .react-cycle__message {
        max-width: 200px;
        padding: var(--space-sm) var(--space-md);
    }

    .react-cycle__node--thought .react-cycle__message,
    .react-cycle__node--action .react-cycle__message {
        left: calc(100% + 20px);
    }

    .react-cycle__node--thought .react-cycle__message::before,
    .react-cycle__node--action .react-cycle__message::before {
        left: -20px;
        width: 20px;
    }

    .react-cycle__node--observation .react-cycle__message {
        right: calc(100% + 20px);
    }

    .react-cycle__node--observation .react-cycle__message::before {
        right: -20px;
        width: 20px;
    }

    .react-cycle__node--loop .react-cycle__message {
        right: calc(100% + 20px);
    }

    .react-cycle__node--loop .react-cycle__message::before {
        right: -20px;
        width: 20px;
    }
}

@media (max-width: 768px) {
    .react-cycle--animated .react-cycle__node {
        opacity: 1;
        filter: none;
    }

    .react-cycle__message {
        position: relative;
        inset: auto;
        transform: none;
        max-width: 100%;
        margin-top: var(--space-sm);
        opacity: 0;
        max-height: 0;
        overflow: hidden;
        padding: 0 var(--space-md);
        border-width: 0;
    }

    .react-cycle__message.is-visible {
        opacity: 1;
        max-height: 200px;
        padding: var(--space-md);
        border-width: 2px;
        transform: none;
    }

    .react-cycle__message::before {
        display: none;
    }

    .react-cycle--animated .react-cycle__node.is-active {
        box-shadow: 0 4px 16px rgba(220, 53, 69, 0.2);
    }
}

/* --- Transparency Panels ---
   Side-by-side comparison of black-box vs transparent responses */
.transparency-panels {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
}

.transparency-panel {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 2px solid var(--border);
    overflow: hidden;
}

.transparency-panel--blackbox {
    opacity: 0.8;
}

.transparency-panel--react {
    border-color: var(--primary);
    box-shadow: 0 4px 24px rgba(220, 53, 69, 0.1);
}

.transparency-panel__header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
}

.transparency-panel__icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.transparency-panel--react .transparency-panel__icon {
    background: linear-gradient(135deg, var(--primary) 0%, #b02a37 100%);
    color: white;
}

.transparency-panel__icon svg {
    width: 20px;
    height: 20px;
}

.transparency-panel__title {
    flex: 1;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
}

.transparency-panel__badge {
    padding: var(--space-xs) var(--space-sm);
    background: var(--bg-card);
    color: var(--text-muted);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--radius-sm);
}

.transparency-panel__badge--primary {
    background: var(--primary);
    color: white;
}

.transparency-panel__content {
    padding: var(--space-lg);
}

.transparency-panel__input,
.transparency-panel__output {
    margin-bottom: var(--space-md);
}

.transparency-panel__label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-xs);
}

.transparency-panel__input p,
.transparency-panel__output p {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.6;
    padding: var(--space-md);
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
}

.transparency-panel__problem,
.transparency-panel__benefit {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
}

.transparency-panel__problem {
    background: rgba(220, 53, 69, 0.1);
    color: var(--primary);
}

.transparency-panel__problem svg,
.transparency-panel__benefit svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.transparency-panel__benefit {
    background: rgba(34, 197, 94, 0.1);
    color: var(--success);
}

.transparency-panel__steps {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.transparency-step {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
}

.transparency-step__type {
    padding: var(--space-xs) var(--space-sm);
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

.transparency-step__type--thought {
    background: rgba(59, 130, 246, 0.15);
    color: rgb(59, 130, 246);
}

.transparency-step__type--action {
    background: rgba(249, 115, 22, 0.15);
    color: rgb(249, 115, 22);
}

.transparency-step__type--observation {
    background: rgba(34, 197, 94, 0.15);
    color: rgb(34, 197, 94);
}

.transparency-step p {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

@media (max-width: 768px) {
    .transparency-panels {
        grid-template-columns: 1fr;
    }
}


/* --- React Elements ---
   Vertical element cards with markers */
.react-elements {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

.react-element {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-xl);
    padding: var(--space-xl);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 2px solid var(--border);
    transition: all var(--transition-normal);
}

.react-element:hover {
    border-color: var(--border-hover);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.react-element--thought { border-left: 4px solid rgb(59, 130, 246); }
.react-element--action { border-left: 4px solid rgb(249, 115, 22); }
.react-element--observation { border-left: 4px solid rgb(34, 197, 94); }

.react-element__marker {
    display: flex;
    align-items: flex-start;
}

.react-element__number {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--primary);
}

.react-element--thought .react-element__number { color: rgb(59, 130, 246); }
.react-element--action .react-element__number { color: rgb(249, 115, 22); }
.react-element--observation .react-element__number { color: rgb(34, 197, 94); }

.react-element__content {
    display: flex;
    flex-direction: column;
}

.react-element__title {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: var(--space-md);
}

.react-element__title svg {
    width: 24px;
    height: 24px;
}

.react-element--thought .react-element__title svg { color: rgb(59, 130, 246); }
.react-element--action .react-element__title svg { color: rgb(249, 115, 22); }
.react-element--observation .react-element__title svg { color: rgb(34, 197, 94); }

.react-element__desc {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: var(--space-lg);
}

.react-element__examples {
    padding: var(--space-md);
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
}

.react-element__example-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-sm);
}

.react-element__examples ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.react-element__examples li {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-style: italic;
    padding-left: var(--space-md);
    margin-bottom: var(--space-xs);
    position: relative;
}

.react-element__examples li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--text-muted);
}

.react-element__examples li:last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .react-element {
        grid-template-columns: 1fr;
    }

    .react-element__marker {
        justify-content: center;
    }
}

/* --- Scenario Timeline ---
   Iteration-based debugging scenario display */
.scenario-timeline {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.scenario-context {
    display: flex;
    align-items: flex-start;
    gap: var(--space-lg);
    padding: var(--space-xl);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 2px solid var(--border);
}

.scenario-context__icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    flex-shrink: 0;
}

.scenario-context__icon svg {
    width: 24px;
    height: 24px;
}

.scenario-context__content {
    flex: 1;
}

.scenario-context__label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-xs);
}

.scenario-context__text {
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--text);
    font-style: italic;
}

.scenario-iterations {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.scenario-iteration {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 2px solid var(--border);
    overflow: hidden;
}

.scenario-iteration--final {
    border-color: var(--success);
}

.scenario-iteration__header {
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
}

.scenario-iteration__badge {
    display: inline-block;
    padding: var(--space-xs) var(--space-md);
    background: rgba(220, 53, 69, 0.1);
    color: var(--primary);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--radius-sm);
}

.scenario-iteration__badge--success {
    background: rgba(34, 197, 94, 0.1);
    color: var(--success);
}

.scenario-iteration__steps {
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.scenario-step {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
}

.scenario-step__label {
    padding: var(--space-xs) var(--space-sm);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

.scenario-step--thought .scenario-step__label {
    background: rgba(59, 130, 246, 0.15);
    color: rgb(59, 130, 246);
}

.scenario-step--action .scenario-step__label {
    background: rgba(249, 115, 22, 0.15);
    color: rgb(249, 115, 22);
}

.scenario-step--observation .scenario-step__label {
    background: rgba(34, 197, 94, 0.15);
    color: rgb(34, 197, 94);
}

.scenario-step p {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.scenario-conclusion {
    display: flex;
    align-items: flex-start;
    gap: var(--space-lg);
    padding: var(--space-xl);
}

.scenario-conclusion__icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(34, 197, 94, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--success);
    flex-shrink: 0;
}

.scenario-conclusion__icon svg {
    width: 28px;
    height: 28px;
}

.scenario-conclusion__content h4 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: var(--space-sm);
}

.scenario-conclusion__content > p {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin-bottom: var(--space-md);
}

.scenario-conclusion__recommendations {
    padding: var(--space-md);
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
}

.scenario-conclusion__rec-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-sm);
}

.scenario-conclusion__recommendations ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.scenario-conclusion__recommendations li {
    font-size: 0.875rem;
    color: var(--text-secondary);
    padding-left: var(--space-md);
    margin-bottom: var(--space-xs);
    position: relative;
}

.scenario-conclusion__recommendations li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--success);
}

.scenario-conclusion__recommendations li:last-child {
    margin-bottom: 0;
}

/* --- Use Case Showcase ---
   Grid of use case cards */
.use-case-showcase {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

.use-case-showcase__item {
    padding: var(--space-xl);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 2px solid var(--border);
    text-align: center;
    transition: all var(--transition-normal);
}

.use-case-showcase__item:hover {
    border-color: var(--border-hover);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.use-case-showcase__icon {
    width: 56px;
    height: 56px;
    margin: 0 auto var(--space-md);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--primary) 0%, #b02a37 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.use-case-showcase__icon svg {
    width: 28px;
    height: 28px;
}

.use-case-showcase__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: var(--space-sm);
}

.use-case-showcase__desc {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

@media (max-width: 992px) {
    .use-case-showcase {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .use-case-showcase {
        grid-template-columns: 1fr;
    }
}

/* --- Prompt Comparison ---
   Side-by-side explicit vs natural prompts */
.prompt-comparison {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--space-lg);
    align-items: stretch;
}

.prompt-comparison__card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 2px solid var(--border);
    overflow: hidden;
}

.prompt-comparison__header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
}

.prompt-comparison__badge {
    padding: var(--space-xs) var(--space-md);
    background: rgba(220, 53, 69, 0.1);
    color: var(--primary);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--radius-sm);
}

.prompt-comparison__badge--alt {
    background: rgba(34, 197, 94, 0.1);
    color: var(--success);
}

.prompt-comparison__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
}

.prompt-comparison__content {
    padding: var(--space-lg);
}

.prompt-comparison__example {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.7;
}

.prompt-comparison__example p {
    margin-bottom: var(--space-md);
}

.prompt-comparison__example p:last-child {
    margin-bottom: 0;
}

.prompt-comparison__example ol {
    padding-left: var(--space-lg);
    margin: var(--space-sm) 0 0;
}

.prompt-comparison__example li {
    margin-bottom: var(--space-xs);
}

.prompt-comparison__divider {
    display: flex;
    align-items: center;
    justify-content: center;
}

.prompt-comparison__divider span {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-muted);
}

@media (max-width: 768px) {
    .prompt-comparison {
        grid-template-columns: 1fr;
    }

    .prompt-comparison__divider {
        padding: var(--space-sm) 0;
    }
}

/* --- Trigger Phrases ---
   Grid of natural language phrases */
.trigger-phrases {
    margin-top: var(--space-2xl);
    padding: var(--space-xl);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 2px solid var(--border);
}

.trigger-phrases__title {
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: var(--space-lg);
}

.trigger-phrases__grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    justify-content: center;
}

.trigger-phrase {
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-style: italic;
    border: 1px solid var(--border);
    transition: all var(--transition-normal);
}

.trigger-phrase:hover {
    border-color: var(--primary);
    background: rgba(220, 53, 69, 0.05);
}

/* --- Framework Spectrum ---
   Horizontal positioning of frameworks */
.framework-spectrum {
    position: relative;
    display: flex;
    justify-content: space-between;
    padding: var(--space-3xl) 0;
}

.framework-spectrum__track {
    position: absolute;
    top: 50%;
    left: 5%;
    right: 5%;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    transform: translateY(-50%);
}

.framework-spectrum__item {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
}

.framework-spectrum__marker {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 3px solid var(--border);
    margin-bottom: var(--space-sm);
    transition: all var(--transition-normal);
}

.framework-spectrum__item--active .framework-spectrum__marker {
    width: 28px;
    height: 28px;
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

.framework-spectrum__label {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text);
}

.framework-spectrum__item--active .framework-spectrum__label {
    color: var(--primary);
}

.framework-spectrum__sublabel {
    font-size: 0.75rem;
    color: var(--text-muted);
}

@media (max-width: 576px) {
    .framework-spectrum {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-lg);
    }

    .framework-spectrum__track {
        display: none;
    }
}

/* --- Next Steps Cards ---
   Navigation cards for continuing learning */
.next-steps-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

.next-step-card {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 2px solid var(--border);
    text-decoration: none;
    transition: all var(--transition-normal);
}

.next-step-card:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 16px rgba(220, 53, 69, 0.1);
    transform: translateY(-2px);
}

.next-step-card__icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--primary) 0%, #b02a37 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.next-step-card__icon svg {
    width: 24px;
    height: 24px;
}

.next-step-card__content {
    flex: 1;
    min-width: 0;
}

.next-step-card__label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-xs);
}

.next-step-card__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: var(--space-xs);
}

.next-step-card__desc {
    font-size: 0.8125rem;
    color: var(--text-muted);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.next-step-card__arrow {
    font-size: 1.5rem;
    color: var(--text-muted);
    transition: all var(--transition-normal);
}

.next-step-card:hover .next-step-card__arrow {
    color: var(--primary);
    transform: translateX(4px);
}

@media (max-width: 992px) {
    .next-steps-cards {
        grid-template-columns: 1fr;
    }
}

/* --- Callout Cards ---
   Styled callout boxes for tips and warnings */
.callout-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-lg);
    padding: var(--space-xl);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 2px solid var(--border);
    margin-top: var(--space-2xl);
}

.callout-card--success {
    border-color: var(--success);
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.03) 0%, transparent 100%);
}

.callout-card--warning {
    border-color: rgb(234, 179, 8);
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.03) 0%, transparent 100%);
}

.callout-card__icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.callout-card--success .callout-card__icon {
    background: rgba(34, 197, 94, 0.1);
    color: var(--success);
}

.callout-card--warning .callout-card__icon {
    background: rgba(234, 179, 8, 0.1);
    color: rgb(234, 179, 8);
}

.callout-card__icon svg {
    width: 24px;
    height: 24px;
}

.callout-card__content {
    flex: 1;
}

.callout-card__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: var(--space-sm);
}

.callout-card__content p {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.7;
}

/* === FLIP VISUALIZATION ===
   Visual component for flipped interaction concept */
.flip-visualization {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    padding: var(--space-xl);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
}

.flip-visualization__card {
    padding: var(--space-lg);
    border-radius: var(--radius-md);
    text-align: center;
}

.flip-visualization__card--before {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.05) 0%, rgba(239, 68, 68, 0.02) 100%);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.flip-visualization__card--after {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.05) 0%, rgba(34, 197, 94, 0.02) 100%);
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.flip-visualization__label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-md);
}

.flip-visualization__card--before .flip-visualization__label {
    color: #ef4444;
}

.flip-visualization__card--after .flip-visualization__label {
    color: #22c55e;
}

.flip-visualization__flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.flip-visualization__you,
.flip-visualization__ai {
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.875rem;
}

.flip-visualization__you {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
}

.flip-visualization__ai {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: white;
}

.flip-visualization__arrow {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.flip-visualization__result {
    font-size: 0.875rem;
    font-weight: 600;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    display: inline-block;
}

.flip-visualization__result--generic {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.flip-visualization__result--tailored {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.flip-visualization__divider {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md) 0;
}

.flip-visualization__divider svg {
    width: 32px;
    height: 32px;
    color: var(--primary);
}

/* === ENHANCED COMPARISON PANEL ===
   Side-by-side comparison with divider */
.comparison-panel {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    overflow: hidden;
}

.comparison-panel__side {
    padding: var(--space-xl);
    display: flex;
    flex-direction: column;
}

.comparison-panel__side--before {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.02) 0%, transparent 100%);
}

.comparison-panel__side--after {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.02) 0%, transparent 100%);
}

.comparison-panel__header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.comparison-panel__icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.comparison-panel__side--before .comparison-panel__icon {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.comparison-panel__side--after .comparison-panel__icon {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.comparison-panel__icon svg {
    width: 20px;
    height: 20px;
}

.comparison-panel__title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}

.comparison-panel__content {
    flex: 1;
    margin-bottom: var(--space-lg);
}

.comparison-panel__prompt,
.comparison-panel__result {
    padding: var(--space-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
}

.comparison-panel__prompt {
    background: var(--bg-main);
    border-left: 3px solid var(--primary);
}

.comparison-panel__result {
    background: rgba(100, 116, 139, 0.05);
}

.comparison-panel__label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-secondary);
    margin-bottom: var(--space-xs);
}

.comparison-panel__prompt p,
.comparison-panel__result p {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--text);
    margin: 0;
}

.comparison-panel__verdict {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 600;
    margin-top: auto;
}

.comparison-panel__verdict svg {
    width: 18px;
    height: 18px;
}

.comparison-panel__verdict--weak {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.comparison-panel__verdict--strong {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.comparison-panel__divider {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--space-md);
    background: var(--bg-main);
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
}

.comparison-panel__divider span {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

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

    .comparison-panel__divider {
        padding: var(--space-md);
        border-left: none;
        border-right: none;
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
    }
}

/* === ELEMENT TIMELINE ENHANCEMENTS ===
   Additional variants for conversation-style timelines */
.element-timeline__item {
    position: relative;
    display: flex;
    gap: var(--space-lg);
}

.element-timeline__marker {
    position: absolute;
    left: calc(-1 * var(--space-3xl));
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-radius: 50%;
    z-index: 1;
}

.element-timeline__marker svg {
    width: 20px;
    height: 20px;
    color: white;
}

.element-timeline__number {
    color: white;
    font-size: 1.125rem;
    font-weight: 700;
}

.element-timeline__content {
    flex: 1;
    padding: var(--space-xl);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    transition: all 0.3s ease;
}

.element-timeline__content:hover {
    border-color: var(--primary);
    box-shadow: 0 8px 24px rgba(220, 53, 69, 0.08);
}

.element-timeline__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 var(--space-sm) 0;
}

.element-timeline__text {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0 0 var(--space-md) 0;
}

.element-timeline__example {
    padding: var(--space-md);
    background: var(--bg-main);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--primary);
}

.element-timeline__example-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--primary);
    margin-bottom: var(--space-xs);
}

.element-timeline__example p {
    font-size: 0.9375rem;
    color: var(--text);
    line-height: 1.6;
    margin: 0;
    font-style: italic;
}

.element-timeline__list {
    margin: 0;
    padding-left: var(--space-lg);
}

.element-timeline__list li {
    font-size: 0.9375rem;
    color: var(--text);
    line-height: 1.8;
}

/* Conversation-style timeline */
.element-timeline--conversation .element-timeline__item--user .element-timeline__marker {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}

.element-timeline--conversation .element-timeline__item--ai .element-timeline__marker {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
}

.element-timeline--conversation .element-timeline__item--result .element-timeline__marker {
    background: linear-gradient(135deg, #22c55e, #16a34a);
}

.element-timeline--conversation .element-timeline__item--user .element-timeline__content {
    border-left: 3px solid var(--primary);
}

.element-timeline--conversation .element-timeline__item--ai .element-timeline__content {
    border-left: 3px solid #6366f1;
}

.element-timeline--conversation .element-timeline__item--result .element-timeline__content {
    border-left: 3px solid #22c55e;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.03) 0%, transparent 100%);
}

/* === PROGRESSIVE BUILD ENHANCEMENTS ===
   Card-style progressive build items */
.progressive-build__item {
    display: flex;
    gap: var(--space-lg);
    padding: var(--space-lg);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    margin-bottom: var(--space-md);
    transition: all 0.3s ease;
}

.progressive-build__item:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 16px rgba(220, 53, 69, 0.08);
}

.progressive-build__icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.1) 0%, rgba(220, 53, 69, 0.05) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.progressive-build__icon svg {
    width: 24px;
    height: 24px;
    color: var(--primary);
}

.progressive-build__content {
    flex: 1;
}

.progressive-build__title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 var(--space-xs) 0;
}

.progressive-build__text {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 var(--space-sm) 0;
}

.progressive-build__tag {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary);
    background: rgba(220, 53, 69, 0.1);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
}

/* === FEATURE LIST ENHANCEMENTS ===
   Positive/neutral variants with icons */
.feature-list__item {
    display: flex;
    gap: var(--space-md);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-sm);
}

.feature-list__item svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-top: 2px;
}

.feature-list__item strong {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: var(--space-xs);
}

.feature-list__item p {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.feature-list__item--positive {
    background: rgba(34, 197, 94, 0.05);
    border: 1px solid rgba(34, 197, 94, 0.15);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}

.feature-list__item--positive svg {
    color: #22c55e;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    stroke: #22c55e;
}

.feature-list__item--neutral {
    background: rgba(100, 116, 139, 0.05);
    border: 1px solid rgba(100, 116, 139, 0.15);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}

.feature-list__item--neutral svg {
    color: var(--text-secondary);
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    stroke: var(--text-secondary);
}

/* === TECHNIQUE DEMO ===
   Demo boxes for showing technique examples */
.technique-demo {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    overflow: hidden;
}

.technique-demo__header {
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-main);
    border-bottom: 1px solid var(--border);
}

.technique-demo__label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--primary);
}

.technique-demo__content {
    padding: var(--space-lg);
}

.technique-demo__prompt,
.technique-demo__response,
.technique-demo__example {
    padding: var(--space-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
}

.technique-demo__prompt:last-child,
.technique-demo__response:last-child,
.technique-demo__example:last-child {
    margin-bottom: 0;
}

.technique-demo__prompt {
    background: var(--bg-main);
    border-left: 3px solid var(--primary);
}

.technique-demo__response {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.05) 0%, transparent 100%);
    border-left: 3px solid #22c55e;
}

.technique-demo__example {
    background: var(--bg-main);
    border-left: 3px solid #6366f1;
}

.technique-demo__example--new {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.05) 0%, transparent 100%);
    border-left-color: #22c55e;
}

.technique-demo__tag {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-xs);
}

.technique-demo__prompt .technique-demo__tag {
    color: var(--primary);
}

.technique-demo__response .technique-demo__tag {
    color: #22c55e;
}

.technique-demo__example .technique-demo__tag {
    color: #6366f1;
}

.technique-demo__example--new .technique-demo__tag {
    color: #22c55e;
}

.technique-demo p {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--text);
    margin: 0;
}

.technique-demo code {
    display: block;
    font-family: monospace;
    font-size: 0.875rem;
    line-height: 1.6;
    white-space: pre-wrap;
    color: var(--text);
}


/* === PILLAR GRID ===
   Grid layouts for pillar cards */
.pillar-grid {
    display: grid;
    gap: var(--space-lg);
    margin-top: var(--space-xl);
}

.pillar-grid--2 {
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

.pillar-grid--3 {
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
}

@media (min-width: 900px) {
    .pillar-grid--2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .pillar-grid--3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* === PILLAR CARD ICON ===
   Icon container for pillar cards */
.pillar-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: rgba(220, 53, 69, 0.1);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-md);
    transition: all var(--transition-normal);
}

.pillar-card__icon svg {
    width: 32px;
    height: 32px;
    stroke: var(--primary);
    flex-shrink: 0;
}

.pillar-card__title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: var(--space-sm);
    color: var(--text-primary);
}

.pillar-card__text {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-md);
}

.pillar-card__tag {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--primary);
    background: rgba(220, 53, 69, 0.08);
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
}

/* === PILLAR CARD CLICKABLE ===
   Interactive variant for navigation */
.pillar-card--clickable {
    text-decoration: none;
    cursor: pointer;
    display: block;
}

.pillar-card--clickable:hover {
    transform: translateY(-4px);
    border-color: var(--primary);
    box-shadow: 0 8px 24px rgba(220, 53, 69, 0.15);
}

.pillar-card--clickable:hover .pillar-card__icon {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
}

.pillar-card--clickable:hover .pillar-card__icon svg {
    color: white;
    stroke: white;
}

/* === PILLAR CARD FEATURED ===
   Enhanced styling for prominent cards */
.pillar-card--featured {
    background: linear-gradient(135deg, var(--bg-card) 0%, var(--surface) 100%);
    border-color: rgba(220, 53, 69, 0.2);
}

.pillar-card--featured:hover {
    border-color: var(--primary);
}

/* === SPLIT SECTION REVERSE ===
   Alternating layout for visual variety */
.split-section--reverse {
    flex-direction: row-reverse;
}

@media (max-width: 900px) {
    .split-section--reverse {
        flex-direction: column;
    }
}

/* === SPLIT SECTION VISUAL ===
   Visual container - alias for split-section__media */
.split-section__visual {
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.split-section__visual img {
    width: 100%;
    height: auto;
}

/* === SPLIT SECTION CENTER ===
   Centered alignment for hero-style splits */
.split-section--center {
    align-items: center;
}

/* === PROMPT INFOGRAPHIC ===
   Visual template showing a complete framework prompt
   Used on framework pages to show professional prompt examples */
.prompt-infographic {
    background: #FFFFFF;
    border-radius: var(--radius-md);
    padding: 14px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    position: relative;
    margin-bottom: var(--space-sm);
}

.prompt-infographic::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--primary-dark));
}

/* Infographic Header ---- */
.prompt-infographic__header {
    text-align: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-light);
}

.prompt-infographic__letters {
    display: inline-flex;
    gap: 4px;
    margin-bottom: 4px;
}

.prompt-infographic__letters span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-weight: 800;
    font-size: 0.7rem;
    border-radius: var(--radius-sm);
    color: #fff;
    font-family: var(--font-mono);
}

.prompt-infographic__letters span:nth-child(4n+1) { background: var(--primary); }
.prompt-infographic__letters span:nth-child(4n+2) { background: var(--text-primary); }
.prompt-infographic__letters span:nth-child(4n+3) { background: var(--text-muted); }
.prompt-infographic__letters span:nth-child(4n) { background: var(--primary-dark); }

.prompt-infographic__title {
    color: var(--text-muted);
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    display: block;
}

/* Infographic Rows ---- */
.prompt-infographic__rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.prompt-infographic__row {
    display: flex;
    gap: 6px;
    align-items: stretch;
}

.prompt-infographic__letter {
    flex: 0 0 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.8rem;
    border-radius: var(--radius-sm);
    color: #fff;
    font-family: var(--font-mono);
}

.prompt-infographic__row:nth-child(4n+1) .prompt-infographic__letter { background: var(--primary); }
.prompt-infographic__row:nth-child(4n+2) .prompt-infographic__letter { background: var(--text-primary); }
.prompt-infographic__row:nth-child(4n+3) .prompt-infographic__letter { background: var(--text-muted); }
.prompt-infographic__row:nth-child(4n) .prompt-infographic__letter { background: var(--primary-dark); }

.prompt-infographic__field {
    flex: 1;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    padding: 5px 10px;
    border-left: 3px solid;
    transition: background var(--transition-fast);
}

.prompt-infographic__field:hover {
    background: #E9EBEE;
}

.prompt-infographic__row:nth-child(4n+1) .prompt-infographic__field { border-left-color: var(--primary); }
.prompt-infographic__row:nth-child(4n+2) .prompt-infographic__field { border-left-color: var(--text-primary); }
.prompt-infographic__row:nth-child(4n+3) .prompt-infographic__field { border-left-color: var(--text-muted); }
.prompt-infographic__row:nth-child(4n) .prompt-infographic__field { border-left-color: var(--primary-dark); }

.prompt-infographic__label {
    display: block;
    font-weight: 700;
    color: var(--text-primary);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 1px;
}

.prompt-infographic__text {
    color: var(--text-secondary);
    font-size: 0.74rem;
    line-height: 1.45;
    margin: 0;
}

/* Infographic Footer ---- */
.prompt-infographic__footer {
    text-align: center;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-light);
}

.prompt-infographic__footer-text {
    color: #6B7280;
    font-size: 0.65rem;
    font-style: italic;
}

.prompt-infographic__footer-text strong {
    color: var(--primary);
    font-style: normal;
}

/* Prompt Mini Legend ---- */
.split-section--stretch .highlight-box {
    height: 100%;
    margin: 0;
    box-sizing: border-box;
}

.split-section--stretch .highlight-box__content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.prompt-mini {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 6px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    justify-content: center;
}

.prompt-mini__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: var(--radius-sm);
    border-left: 3px solid transparent;
    transition: background var(--transition-fast);
}

.prompt-mini__item:hover {
    background: rgba(255, 255, 255, 0.95);
}

.prompt-mini__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #fff;
    font-weight: 800;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.prompt-mini__item:nth-child(5n+1) .prompt-mini__badge { background: var(--primary); }
.prompt-mini__item:nth-child(5n+2) .prompt-mini__badge { background: var(--text-primary); }
.prompt-mini__item:nth-child(5n+3) .prompt-mini__badge { background: var(--text-muted); }
.prompt-mini__item:nth-child(5n+4) .prompt-mini__badge { background: var(--primary-dark); }
.prompt-mini__item:nth-child(5n)   .prompt-mini__badge { background: var(--primary); }

.prompt-mini__item:nth-child(5n+1) { border-left-color: var(--primary); }
.prompt-mini__item:nth-child(5n+2) { border-left-color: var(--text-primary); }
.prompt-mini__item:nth-child(5n+3) { border-left-color: var(--text-muted); }
.prompt-mini__item:nth-child(5n+4) { border-left-color: var(--primary-dark); }
.prompt-mini__item:nth-child(5n)   { border-left-color: var(--primary); }

.prompt-mini__text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.prompt-mini__label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.3px;
    line-height: 1.2;
}

.prompt-mini__desc {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 400;
    line-height: 1.3;
}

/* ============================================
   MOBILE PERFORMANCE OPTIMIZATIONS
   iPhone 14 Pro+ and modern mobile devices
   ============================================ */

@media (max-width: 768px) {
    /* Reduce backdrop-filter usage on mobile for performance */
    .header.scrolled {
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);
    }

    /* Disable complex shadows on hover for mobile */
    .pillar-card:hover,
    .tool-card:hover,
    .card:hover {
        box-shadow: var(--shadow-md);
    }

    /* Improve scroll performance */
    .nav.active,
    .adl-panel,
    .badge-lightbox {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    /* Optimize transform animations */
    .fade-in-up {
        transform: translateY(10px);
    }

    /* Reduce parallax effects on mobile */
    [data-parallax] {
        transform: none !important;
    }
}

/* Phones between 394px and 480px - ensure consistent padding */
@media (max-width: 480px) and (min-width: 394px) {
    .container {
        padding-left: var(--space-md);
        padding-right: var(--space-md);
    }
}

/* iPhone 14 Pro / 15 Pro specific (393px width) */
@media (max-width: 393px) {
    .container {
        padding-left: calc(var(--space-md) + var(--safe-area-inset-left));
        padding-right: calc(var(--space-md) + var(--safe-area-inset-right));
    }

    .section-title {
        font-size: 1.5rem;
    }

    .section-subtitle {
        font-size: 0.9375rem;
    }

    .pillar-card,
    .tool-card {
        padding: var(--space-md);
    }
}

/* ============================================
   ANIMATION & FEATURES REFERENCE PAGE
   ============================================ */

/* Subsection Titles */
.subsection-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text);
    margin: var(--space-2xl) 0 var(--space-lg);
    padding-bottom: var(--space-sm);
    border-bottom: 2px solid var(--border);
}

/* Highlight Boxes Demo */
.highlight-boxes-demo {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

/* Button Showcase */
.button-showcase {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    gap: var(--space-xl);
    padding: var(--space-xl);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
}

.button-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.button-group h4 {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-sm);
}

/* Feature List Card */
.feature-list-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    border: 1px solid var(--border);
}

.feature-list-card h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: var(--space-lg);
}

/* Placeholder Media */
.placeholder-media {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    padding: var(--space-3xl);
    background: var(--bg-main);
    border: 2px dashed var(--border);
    border-radius: var(--radius-lg);
    color: var(--text-muted);
    min-height: 250px;
}

.placeholder-media svg {
    width: 64px;
    height: 64px;
    stroke: var(--text-muted);
    opacity: 0.5;
}

.placeholder-media span {
    font-size: 0.875rem;
    font-weight: 500;
}

/* Reference Grid */
.reference-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    gap: var(--space-lg);
}

.reference-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    border: 1px solid var(--border);
}

.reference-card h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--border);
}

.reference-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.reference-list li {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.reference-list code {
    background: var(--bg-main);
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    color: var(--primary);
    font-family: 'Consolas', 'Monaco', monospace;
}

/* Info highlight box variant */
.highlight-box--info {
    border-left-color: #3b82f6;
    background: rgba(59, 130, 246, 0.05);
}

.highlight-box--info h4 {
    color: #3b82f6;
}

/* =============================================================================
   ANIMATION LIBRARY - COMPREHENSIVE COMPONENT STYLES
   ============================================================================= */

/* === COMPONENT LIBRARY GRID === */
.component-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: var(--space-lg);
}

.component-grid--2 {
    grid-template-columns: repeat(2, 1fr);
}

.component-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

.component-grid--4 {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1024px) {
    .component-grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .component-grid--2,
    .component-grid--3,
    .component-grid--4 {
        grid-template-columns: 1fr;
    }
}

/* === DEMO BOX (Container for showcasing components) === */
.demo-box {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.demo-box__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

.demo-box__description {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.demo-box__content {
    padding: var(--space-lg);
    background: var(--bg-main);
    border-radius: var(--radius-md);
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Dark section demo boxes */
.section-alt .demo-box {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.section-alt .demo-box__content {
    background: rgba(0, 0, 0, 0.2);
}

.section-alt .demo-box__title {
    color: #fff;
}

.section-alt .demo-box__description {
    color: rgba(255, 255, 255, 0.7);
}

/* === ANIMATIONS CATEGORY === */

/* Slide Animations */
.anim-slide-left {
    animation: slideInLeft 0.6s ease-out forwards;
    opacity: 0;
}

.anim-slide-right {
    animation: slideInRight 0.6s ease-out forwards;
    opacity: 0;
}

.anim-slide-down {
    animation: slideInDown 0.6s ease-out forwards;
    opacity: 0;
}

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

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Scale Animation */
.anim-scale-up {
    animation: scaleUp 0.5s ease-out forwards;
    opacity: 0;
}

@keyframes scaleUp {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Rotate Animation */
.anim-rotate-in {
    animation: rotateIn 0.6s ease-out forwards;
    opacity: 0;
}

@keyframes rotateIn {
    from {
        opacity: 0;
        transform: rotate(-180deg) scale(0.5);
    }
    to {
        opacity: 1;
        transform: rotate(0) scale(1);
    }
}

/* Bounce Animation */
.anim-bounce {
    animation: bounceIn 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
    opacity: 0;
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Float Animation (continuous) */
.anim-float {
    animation: lib-float 3s ease-in-out infinite;
}

@keyframes lib-float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Pulse Animation (continuous) */
.anim-pulse {
    animation: lib-pulse 2s ease-in-out infinite;
}

@keyframes lib-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
}

/* Shake Animation */
.anim-shake {
    animation: shake 0.5s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* Blur In Animation */
.anim-blur-in {
    animation: blurIn 0.6s ease-out forwards;
    opacity: 0;
}

@keyframes blurIn {
    from {
        opacity: 0;
        filter: blur(10px);
    }
    to {
        opacity: 1;
        filter: blur(0);
    }
}

/* Glitch Text Effect */
.anim-glitch {
    position: relative;
    animation: glitch 2s infinite;
}

@keyframes glitch {
    0%, 90%, 100% {
        transform: translate(0);
    }
    92% {
        transform: translate(-2px, 1px);
    }
    94% {
        transform: translate(2px, -1px);
    }
    96% {
        transform: translate(-1px, 2px);
    }
    98% {
        transform: translate(1px, -2px);
    }
}

/* Wave Text Animation */
.anim-wave {
    display: inline-flex;
}

.anim-wave span {
    animation: wave 1s ease-in-out infinite;
    display: inline-block;
}

.anim-wave span:nth-child(1) { animation-delay: 0s; }
.anim-wave span:nth-child(2) { animation-delay: 0.1s; }
.anim-wave span:nth-child(3) { animation-delay: 0.2s; }
.anim-wave span:nth-child(4) { animation-delay: 0.3s; }
.anim-wave span:nth-child(5) { animation-delay: 0.4s; }

@keyframes wave {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* === FLIP CARD === */
.flip-card {
    perspective: 1000px;
    height: 250px;
}

.flip-card__inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.flip-card:hover .flip-card__inner {
    transform: rotateY(180deg);
}

.flip-card__front,
.flip-card__back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
    text-align: center;
}

.flip-card__front {
    background: linear-gradient(135deg, var(--primary), #a02535);
    color: #fff;
}

.flip-card__back {
    background: var(--bg-card);
    border: 1px solid var(--border);
    transform: rotateY(180deg);
}

.flip-card__icon {
    width: 48px;
    height: 48px;
    margin-bottom: var(--space-md);
}

.flip-card__title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: var(--space-sm);
}

.flip-card__text {
    font-size: 0.875rem;
    opacity: 0.9;
    line-height: 1.5;
}

/* === TILT CARD === */
.tilt-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    border: 1px solid var(--border);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    transform-style: preserve-3d;
}

.tilt-card:hover {
    transform: perspective(1000px) rotateX(5deg) rotateY(-5deg) scale(1.02);
    box-shadow: 20px 20px 60px rgba(0, 0, 0, 0.1);
}

/* === GLASS CARD === */
.glass-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
}

.section:not(.section-alt) .glass-card {
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: var(--text-primary);
}

/* === GRADIENT BORDER CARD === */
.gradient-border-card {
    position: relative;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
}

.gradient-border-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-lg);
    padding: 2px;
    background: linear-gradient(135deg, var(--primary), #f59e0b, #10b981, var(--primary));
    background-size: 300% 300%;
    animation: gradientBorder 4s ease infinite;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    -webkit-mask-composite: xor;
}

@keyframes gradientBorder {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* === GLOW CARD === */
.glow-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    border: 1px solid var(--border);
    transition: box-shadow 0.3s ease;
}

.glow-card:hover {
    box-shadow: 0 0 30px rgba(220, 53, 69, 0.3);
}

/* === HOVER LIFT CARD === */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* === STACKED CARDS === */
.stacked-cards {
    position: relative;
    height: 200px;
}

.stacked-cards__item {
    position: absolute;
    width: 100%;
    height: 160px;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    border: 1px solid var(--border);
    transition: transform 0.3s ease;
}

.stacked-cards__item:nth-child(1) {
    transform: translateY(0) scale(1);
    z-index: 3;
}

.stacked-cards__item:nth-child(2) {
    transform: translateY(15px) scale(0.95);
    z-index: 2;
}

.stacked-cards__item:nth-child(3) {
    transform: translateY(30px) scale(0.9);
    z-index: 1;
}

.stacked-cards:hover .stacked-cards__item:nth-child(1) {
    transform: translateY(-10px) scale(1);
}

.stacked-cards:hover .stacked-cards__item:nth-child(2) {
    transform: translateY(5px) scale(0.95);
}

/* === EXPANDING CARD === */
.expanding-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    border: 1px solid var(--border);
    overflow: hidden;
    transition: max-height 0.4s ease;
    max-height: 150px;
}

.expanding-card:hover {
    max-height: 300px;
}

.expanding-card__preview {
    margin-bottom: var(--space-md);
}

.expanding-card__details {
    opacity: 0;
    transition: opacity 0.3s ease 0.1s;
}

.expanding-card:hover .expanding-card__details {
    opacity: 1;
}

/* === PROGRESS BAR === */
.progress-bar {
    width: 100%;
    height: 8px;
    background: var(--bg-main);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.progress-bar__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), #f59e0b);
    border-radius: var(--radius-sm);
    transition: width 1s ease-out;
    width: 0;
}

.progress-bar__fill--animated {
    animation: progressFill 2s ease-out forwards;
}

@keyframes progressFill {
    from { width: 0; }
    to { width: var(--progress, 75%); }
}

/* Progress Bar Variants */
.progress-bar--success .progress-bar__fill {
    background: linear-gradient(90deg, #10b981, #34d399);
}

.progress-bar--warning .progress-bar__fill {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.progress-bar--info .progress-bar__fill {
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
}

/* === PROGRESS CIRCLE === */
.progress-circle {
    position: relative;
    width: 120px;
    height: 120px;
}

.progress-circle__svg {
    transform: rotate(-90deg);
}

.progress-circle__bg {
    fill: none;
    stroke: var(--bg-main);
    stroke-width: 8;
}

.progress-circle__fill {
    fill: none;
    stroke: var(--primary);
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 314;
    stroke-dashoffset: 314;
    transition: stroke-dashoffset 1.5s ease-out;
}

.progress-circle__text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* === RATING STARS === */
.rating-stars {
    display: flex;
    gap: 4px;
}

.rating-stars__star {
    width: 24px;
    height: 24px;
    color: #d1d5db;
    transition: color 0.2s ease, transform 0.2s ease;
    cursor: pointer;
}

.rating-stars__star--filled {
    color: #fbbf24;
}

.rating-stars__star:hover {
    transform: scale(1.2);
}

/* === BADGE/TAG === */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.badge--primary {
    background: rgba(220, 53, 69, 0.1);
    color: var(--primary);
}

.badge--success {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.badge--warning {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.badge--info {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.badge--dark {
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
}

/* === RIBBON === */
.ribbon-container {
    position: relative;
    overflow: hidden;
}

.ribbon {
    position: absolute;
    top: 20px;
    right: -35px;
    padding: 0.25rem 2.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    transform: rotate(45deg);
    background: var(--primary);
    color: #fff;
}

.ribbon--left {
    left: -35px;
    right: auto;
    transform: rotate(-45deg);
}

/* === TOOLTIP === */
.tooltip-trigger {
    position: relative;
    display: inline-block;
    cursor: help;
}

.tooltip-trigger::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    padding: 0.5rem 0.75rem;
    background: var(--text-primary);
    color: #fff;
    font-size: 0.75rem;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 100;
}

.tooltip-trigger:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* === ACCORDION === */
.accordion {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.accordion__item {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    overflow: hidden;
}

.accordion__header {
    padding: var(--space-md) var(--space-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-weight: 500;
    transition: background 0.2s ease;
}

.accordion__header:hover {
    background: var(--bg-main);
}

.accordion__icon {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
}

.accordion__item.active .accordion__icon {
    transform: rotate(180deg);
}

.accordion__content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.accordion__item.active .accordion__content {
    max-height: 500px;
}

.accordion__body {
    padding: 0 var(--space-lg) var(--space-lg);
    color: var(--text-secondary);
    font-size: 0.9375rem;
    line-height: 1.6;
}

/* === TOGGLE SWITCH === */
.toggle {
    position: relative;
    width: 48px;
    height: 24px;
}

.toggle__input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle__slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: #cbd5e1;
    border-radius: var(--radius-full);
    transition: background 0.3s ease;
}

.toggle__slider::before {
    content: '';
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.3s ease;
}

.toggle__input:checked + .toggle__slider {
    background: var(--primary);
}

.toggle__input:checked + .toggle__slider::before {
    transform: translateX(24px);
}

/* === TABS === */
.tabs {
    display: flex;
    flex-direction: column;
}

.tabs__nav {
    display: flex;
    gap: var(--space-xs);
    border-bottom: 1px solid var(--border);
    padding-bottom: 0;
}

.tabs__btn {
    padding: var(--space-sm) var(--space-md);
    background: none;
    border: none;
    color: var(--text-secondary);
    font-weight: 500;
    cursor: pointer;
    position: relative;
    transition: color 0.2s ease;
}

.tabs__btn::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--primary);
    transform: scaleX(0);
    transition: transform 0.2s ease;
}

.tabs__btn:hover {
    color: var(--text-primary);
}

.tabs__btn.active {
    color: var(--primary);
}

.tabs__btn.active::after {
    transform: scaleX(1);
}

.tabs__content {
    display: none;
    padding: var(--space-lg) 0;
}

.tabs__content.active {
    display: block;
}

/* === MODAL === */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1000;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow: auto;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.3s ease;
}

.modal-overlay.active .modal {
    transform: scale(1) translateY(0);
}

.modal__header {
    padding: var(--space-lg);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal__title {
    font-size: 1.25rem;
    font-weight: 600;
}

.modal__close {
    width: 32px;
    height: 32px;
    background: var(--bg-main);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal__body {
    padding: var(--space-lg);
}

.modal__footer {
    padding: var(--space-lg);
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm);
}

/* === TOAST NOTIFICATION === */
.toast {
    position: fixed;
    bottom: var(--space-lg);
    right: var(--space-lg);
    background: var(--text-primary);
    color: #fff;
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    transform: translateX(calc(100% + var(--space-lg)));
    transition: transform 0.3s ease;
    z-index: 1001;
}

.toast.show {
    transform: translateX(0);
}

.toast--success {
    background: #10b981;
}

.toast--error {
    background: var(--primary);
}

.toast--warning {
    background: #f59e0b;
}

/* === SKELETON LOADER === */
.skeleton {
    background: linear-gradient(90deg, var(--bg-main) 25%, var(--bg-card) 50%, var(--bg-main) 75%);
    background-size: 200% 100%;
    animation: skeleton 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
}

.skeleton--text {
    height: 1rem;
    margin-bottom: var(--space-sm);
}

.skeleton--title {
    height: 1.5rem;
    width: 60%;
    margin-bottom: var(--space-md);
}

.skeleton--avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

.skeleton--card {
    height: 200px;
}

@keyframes skeleton {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* === LOADING SPINNER === */
.lib-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--bg-main);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: lib-spin 0.8s linear infinite;
}

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

.lib-spinner--small {
    width: 20px;
    height: 20px;
    border-width: 2px;
}

.lib-spinner--large {
    width: 60px;
    height: 60px;
    border-width: 4px;
}

/* Dots Spinner */
.lib-spinner-dots {
    display: flex;
    gap: 6px;
}

.lib-spinner-dots span {
    width: 10px;
    height: 10px;
    background: var(--primary);
    border-radius: 50%;
    animation: dotPulse 1.4s ease-in-out infinite;
}

.lib-spinner-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.lib-spinner-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes dotPulse {
    0%, 80%, 100% {
        transform: scale(0.6);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* === AVATAR === */
.avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), #a02535);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    font-size: 1.25rem;
}

.avatar--small {
    width: 32px;
    height: 32px;
    font-size: 0.875rem;
}

.avatar--large {
    width: 64px;
    height: 64px;
    font-size: 1.5rem;
}

/* Avatar Stack */
.avatar-stack {
    display: flex;
}

.avatar-stack .avatar {
    border: 2px solid var(--bg-card);
    margin-left: -12px;
}

.avatar-stack .avatar:first-child {
    margin-left: 0;
}

/* === DIVIDER === */
.divider {
    height: 1px;
    background: var(--border);
    margin: var(--space-lg) 0;
}

.divider--thick {
    height: 2px;
}

.divider--gradient {
    background: linear-gradient(90deg, transparent, var(--border), transparent);
}

.divider--with-text {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    background: none;
}

.divider--with-text::before,
.divider--with-text::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.divider__text {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

/* === MARQUEE === */
.marquee {
    overflow: hidden;
    white-space: nowrap;
}

.marquee__content {
    display: inline-flex;
    animation: marquee 20s linear infinite;
}

.marquee__content span {
    padding: 0 var(--space-lg);
}

@keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* === GRADIENT TEXT === */
.gradient-text {
    background: linear-gradient(135deg, var(--primary), #f59e0b, #10b981);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-size: 200% 200%;
    animation: gradientShift 3s ease infinite;
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* === GLOW TEXT === */
.glow-text {
    text-shadow: 0 0 10px currentColor, 0 0 20px currentColor, 0 0 30px currentColor;
}

/* === OUTLINE TEXT === */
.outline-text {
    color: transparent;
    -webkit-text-stroke: 2px var(--text-primary);
}

/* === HIGHLIGHT TEXT (Marker Effect) === */
.highlight-text {
    background: linear-gradient(180deg, transparent 60%, rgba(245, 158, 11, 0.3) 60%);
}

/* === ANIMATED UNDERLINE === */
.underline-animate {
    position: relative;
    display: inline-block;
}

.underline-animate::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--primary);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease;
}

.underline-animate:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* === SCRAMBLE TEXT (JS required for full effect) === */
.scramble-text {
    font-family: monospace;
    letter-spacing: 0.05em;
}

/* === COMPARISON SLIDER === */
.comparison-slider {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.comparison-slider__before,
.comparison-slider__after {
    display: block;
    width: 100%;
}

.comparison-slider__before {
    position: absolute;
    inset: 0;
    clip-path: inset(0 50% 0 0);
}

.comparison-slider__handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 4px;
    background: #fff;
    cursor: ew-resize;
    z-index: 10;
}

.comparison-slider__handle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* === PRICING CARD === */
.pricing-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    border: 1px solid var(--border);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pricing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.pricing-card--featured {
    border-color: var(--primary);
    position: relative;
}

.pricing-card--featured::before {
    content: 'Popular';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary);
    color: #fff;
    padding: 0.25rem 1rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
}

.pricing-card__name {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: var(--space-sm);
}

.pricing-card__price {
    font-size: 3rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: var(--space-md);
}

.pricing-card__price span {
    font-size: 1rem;
    color: var(--text-secondary);
}

.pricing-card__features {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-lg);
    text-align: left;
}

.pricing-card__features li {
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.pricing-card__features li:last-child {
    border-bottom: none;
}

/* === IMAGE GALLERY GRID === */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-sm);
}

.gallery-item {
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--radius-md);
    cursor: pointer;
    position: relative;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.gallery-item:hover img {
    transform: scale(1.1);
}

.gallery-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background 0.3s ease;
}

.gallery-item:hover::after {
    background: rgba(0, 0, 0, 0.2);
}

/* === LIB ICON BOX (Library demo component) === */
.lib-icon-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-xl);
}

.lib-icon-box__icon {
    width: 64px;
    height: 64px;
    background: rgba(220, 53, 69, 0.1);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-md);
    transition: transform 0.3s ease, background 0.3s ease;
}

.lib-icon-box__icon svg {
    width: 32px;
    height: 32px;
    color: var(--primary);
}

.lib-icon-box:hover .lib-icon-box__icon {
    transform: scale(1.1);
    background: var(--primary);
}

.lib-icon-box:hover .lib-icon-box__icon svg {
    color: #fff;
}

.lib-icon-box__title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: var(--space-sm);
}

.lib-icon-box__text {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* === TESTIMONIAL CARD === */
.testimonial-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    border: 1px solid var(--border);
}

.testimonial-card__quote {
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--text-primary);
    margin-bottom: var(--space-lg);
    font-style: italic;
}

.testimonial-card__quote::before {
    content: '"';
    font-size: 3rem;
    color: var(--primary);
    opacity: 0.3;
    line-height: 0;
    vertical-align: bottom;
}

.testimonial-card__author {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.testimonial-card__avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), #a02535);
}

.testimonial-card__name {
    font-weight: 600;
    font-size: 0.9375rem;
}

.testimonial-card__role {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

/* === FEATURE COMPARISON TABLE === */
.comparison-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
}

.comparison-table th,
.comparison-table td {
    padding: var(--space-md) var(--space-lg);
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.comparison-table th {
    background: var(--bg-main);
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

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

.comparison-table tr:hover td {
    background: var(--bg-main);
}

/* === CHIP/PILL === */
.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 0.375rem 0.75rem;
    background: var(--bg-main);
    border-radius: var(--radius-full);
    font-size: 0.8125rem;
    font-weight: 500;
}

.chip--clickable {
    cursor: pointer;
    transition: background 0.2s ease;
}

.chip--clickable:hover {
    background: var(--border);
}

.chip--active {
    background: var(--primary);
    color: #fff;
}

.chip__remove {
    width: 16px;
    height: 16px;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.chip__remove:hover {
    opacity: 1;
}

/* === INPUT VARIANTS === */
.input-floating {
    position: relative;
    margin-bottom: var(--space-lg);
}

.input-floating__field {
    width: 100%;
    padding: var(--space-md);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 1rem;
    background: var(--bg-card);
    transition: border-color 0.2s ease;
}

.input-floating__field:focus {
    outline: none;
    border-color: var(--primary);
}

.input-floating__label {
    position: absolute;
    left: var(--space-md);
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    transition: all 0.2s ease;
    pointer-events: none;
    background: var(--bg-card);
    padding: 0 0.25rem;
}

.input-floating__field:focus + .input-floating__label,
.input-floating__field:not(:placeholder-shown) + .input-floating__label {
    top: 0;
    font-size: 0.75rem;
    color: var(--primary);
}

/* === ALERT VARIANTS === */
.alert {
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
}

.alert__icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.alert__content {
    flex: 1;
}

.alert__title {
    font-weight: 600;
    margin-bottom: var(--space-xs);
}

.alert__text {
    font-size: 0.875rem;
    opacity: 0.9;
}

.alert--success {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

.alert--error {
    background: rgba(220, 53, 69, 0.1);
    color: var(--primary);
}

.alert--warning {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

.alert--info {
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
}

/* === BREADCRUMB VARIANTS === */
.breadcrumb-modern {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-main);
    border-radius: var(--radius-full);
    width: fit-content;
}

.breadcrumb-modern a {
    color: var(--text-secondary);
    font-size: 0.875rem;
    transition: color 0.2s ease;
}

.breadcrumb-modern a:hover {
    color: var(--primary);
}

.breadcrumb-modern .current {
    color: var(--text-primary);
    font-weight: 500;
}

/* === COPY BUTTON === */
.copy-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    background: var(--bg-main);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.8125rem;
    transition: all 0.2s ease;
}

.copy-btn:hover {
    background: var(--border);
}

.copy-btn.copied {
    background: rgba(16, 185, 129, 0.1);
    border-color: #10b981;
    color: #10b981;
}

/* === SCROLL PROGRESS BAR === */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    z-index: 9999;
}

.scroll-progress__bar {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), #f59e0b);
    width: 0;
    transition: width 0.1s linear;
}

/* === BACK TO TOP (Circular) === */
.back-to-top-circle {
    position: fixed;
    bottom: var(--space-lg);
    right: var(--space-lg);
    width: 48px;
    height: 48px;
    background: var(--primary);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
    z-index: 100;
}

.back-to-top-circle.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top-circle:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(220, 53, 69, 0.3);
}

/* === LOGO CAROUSEL === */
.logo-carousel {
    display: flex;
    gap: var(--space-xl);
    overflow: hidden;
}

.logo-carousel__track {
    display: flex;
    gap: var(--space-xl);
    animation: logoScroll 20s linear infinite;
}

.logo-carousel__item {
    flex-shrink: 0;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.logo-carousel__item:hover {
    opacity: 1;
}

@keyframes logoScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* === CATEGORY SECTION HEADER === */
.category-header {
    margin-bottom: var(--space-2xl);
    padding-bottom: var(--space-lg);
    border-bottom: 2px solid var(--border);
}

.category-header__number {
    display: inline-block;
    width: 40px;
    height: 40px;
    background: var(--primary);
    color: #fff;
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 40px;
    text-align: center;
    margin-bottom: var(--space-md);
}

.category-header__title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: var(--space-sm);
}

.category-header__count {
    color: var(--text-secondary);
    font-size: 0.9375rem;
}

.section-alt .category-header {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.section-alt .category-header__title {
    color: #fff;
}

.section-alt .category-header__count {
    color: rgba(255, 255, 255, 0.7);
}

/* === COMPONENT PREVIEW CARD === */
.component-preview {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    overflow: hidden;
}

.component-preview__demo {
    padding: var(--space-xl);
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-main);
}

.component-preview__info {
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid var(--border);
}

.component-preview__name {
    font-weight: 600;
    font-size: 0.9375rem;
    margin-bottom: var(--space-xs);
}

.component-preview__desc {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.section-alt .component-preview {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.section-alt .component-preview__demo {
    background: rgba(0, 0, 0, 0.2);
}

.section-alt .component-preview__info {
    border-top-color: rgba(255, 255, 255, 0.1);
}

.section-alt .component-preview__name {
    color: #fff;
}

.section-alt .component-preview__desc {
    color: rgba(255, 255, 255, 0.7);
}

/* Dark demo box for light animations */
.component-preview__demo--dark {
    background: #1a0a0e;
}

/* Light demo box for dark animations */
.component-preview__demo--light {
    background: #f8f9fa;
}

/* === BUTTON RIPPLE === */
.btn-ripple {
    position: relative;
    overflow: hidden;
}

.btn-ripple .ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transform: scale(0);
    animation: ripple 0.6s linear;
    pointer-events: none;
}

@keyframes ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* === SUCCESS CHECKMARK === */
.success-checkmark {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #10b981;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: checkScale 0.4s ease-out;
}

.success-checkmark svg {
    width: 40px;
    height: 40px;
    color: #fff;
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    animation: checkDraw 0.4s ease-out 0.2s forwards;
}

@keyframes checkScale {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

@keyframes checkDraw {
    to { stroke-dashoffset: 0; }
}

/* === ERROR SHAKE === */
.error-shake {
    animation: errorShake 0.4s ease-in-out;
    border-color: var(--primary) !important;
}

@keyframes errorShake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-10px); }
    40%, 80% { transform: translateX(10px); }
}

/* === HOVER PREVIEW === */
.hover-preview {
    position: relative;
}

.hover-preview__popup {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) scale(0.9);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    width: 200px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 100;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.hover-preview:hover .hover-preview__popup {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) scale(1);
}

/* === DRAG INDICATOR === */
.drag-handle {
    width: 24px;
    height: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    cursor: grab;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.drag-handle:hover {
    opacity: 1;
}

.drag-handle span {
    width: 16px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
}

.drag-handle:active {
    cursor: grabbing;
}

/* === NUMBER INPUT STEPPER === */
.number-stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.number-stepper__btn {
    width: 36px;
    height: 36px;
    background: var(--bg-main);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.number-stepper__btn:hover {
    background: var(--border);
}

.number-stepper__value {
    width: 50px;
    text-align: center;
    font-weight: 600;
    border: none;
    background: var(--bg-card);
}

/* === STEP INDICATOR === */
.step-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-indicator__step {
    display: flex;
    align-items: center;
}

.step-indicator__number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-main);
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
    transition: all 0.3s ease;
}

.step-indicator__step.active .step-indicator__number {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.step-indicator__step.completed .step-indicator__number {
    background: #10b981;
    border-color: #10b981;
    color: #fff;
}

.step-indicator__connector {
    width: 60px;
    height: 2px;
    background: var(--border);
    margin: 0 var(--space-sm);
}

.step-indicator__step.completed + .step-indicator__step .step-indicator__connector,
.step-indicator__step.completed .step-indicator__connector {
    background: #10b981;
}

/* === EMPTY STATE === */
.empty-state {
    text-align: center;
    padding: var(--space-3xl) var(--space-xl);
}

.empty-state__icon {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--space-lg);
    color: var(--text-secondary);
    opacity: 0.5;
}

.empty-state__title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: var(--space-sm);
}

.empty-state__text {
    color: var(--text-secondary);
    margin-bottom: var(--space-lg);
}

/* === FEATURE FLAG === */
.feature-flag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 0.25rem 0.5rem;
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--radius-sm);
}

.feature-flag--new {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.feature-flag--beta {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.feature-flag--hot {
    background: rgba(220, 53, 69, 0.1);
    color: var(--primary);
}

/* === AI FOUNDATIONS TIMELINE === */

/* Foundations Era Navigation ---- */
.foundations-nav {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 8px;
    position: sticky;
    top: calc(70px + var(--ticker-offset, 0px));
    z-index: 100;
    background: transparent;
    padding: var(--space-md) var(--space-lg);
    overflow-x: auto;
    border-bottom: 1px solid transparent;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    box-shadow: none;
    transition: background var(--transition-normal),
                border-color var(--transition-normal),
                box-shadow var(--transition-normal);
}

.foundations-nav.scrolled {
    background: rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom-color: var(--border-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.foundations-nav::-webkit-scrollbar {
    display: none;
}

.foundations-nav__btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: var(--space-xs) var(--space-md);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    white-space: nowrap;
    transition: all var(--transition-normal);
    min-width: max-content;
    cursor: pointer;
    text-align: center;
    line-height: 1.3;
}

.foundations-nav__btn span {
    font-size: 0.6rem;
    font-weight: 400;
    color: var(--text-muted);
    letter-spacing: 0.05em;
}

.foundations-nav__btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(220, 53, 69, 0.05);
}

.foundations-nav__btn.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.foundations-nav__btn.active span {
    color: rgba(255, 255, 255, 0.8);
}

/* Foundations Era Anchor Offsets ---- */
[id^="era-"] {
    scroll-margin-top: calc(160px + var(--ticker-offset, 0px));
}

/* AI Generations Table ---- */
.era-gen-table-wrapper {
    overflow-x: auto;
    margin: var(--space-xl) 0;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
}

.era-gen-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    min-width: 600px;
}

.era-gen-table thead th {
    background: var(--primary);
    color: #fff;
    font-weight: 700;
    padding: var(--space-md) var(--space-lg);
    text-align: left;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.era-gen-table tbody td {
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
    line-height: 1.5;
}

.era-gen-table tbody tr:last-child td {
    border-bottom: none;
}

.era-gen-table tbody tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.02);
}

.era-gen-table tbody td:first-child {
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
}

/* Foundations Prompt Taxonomy Grid ---- */
.era-frameworks__category {
    margin-bottom: var(--space-lg);
}

.era-frameworks__category-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--space-sm);
    padding-bottom: var(--space-xs);
    border-bottom: 1px solid rgba(220, 53, 69, 0.2);
}

/* Foundations Nav Mobile ---- */
@media (max-width: 768px) {
    .foundations-nav {
        justify-content: flex-start;
        gap: 6px;
        top: calc(60px + var(--ticker-offset, 0px));
        padding: var(--space-xs) var(--space-xs);
    }

    .foundations-nav__btn {
        padding: var(--space-xs) var(--space-sm);
        font-size: 0.65rem;
    }

    .foundations-nav__btn span {
        font-size: 0.55rem;
    }

    [id^="era-"] {
        scroll-margin-top: calc(130px + var(--ticker-offset, 0px));
    }
}

/* Era Header ---- */
.era-header {
    text-align: center;
    margin-bottom: var(--space-2xl);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--border-color);
}

.era-header__dates {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: var(--space-xs) var(--space-md);
    background: rgba(220, 53, 69, 0.08);
    border-radius: var(--radius-full);
    margin-bottom: var(--space-md);
}

.era-header__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
    letter-spacing: -0.02em;
}

.era-header__subtitle {
    font-size: 1.125rem;
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto;
}

/* History Timeline ---- */
.history-timeline {
    position: relative;
    padding-left: var(--space-xl);
}

.history-timeline::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--primary) 0%, var(--border-color) 50%, var(--primary) 100%);
    z-index: 0;
}

/* History Event ---- */
.history-event {
    position: relative;
    margin-bottom: var(--space-2xl);
    padding-bottom: var(--space-lg);
}

.history-event:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Timeline dot */
.history-event::before {
    content: '';
    position: absolute;
    left: calc(-1 * var(--space-xl) + 1px);
    top: 14px;
    width: 10px;
    height: 10px;
    background: #374151;
    border: 2px solid #374151;
    border-radius: 50%;
    z-index: 2;
}

/* File marker header bar */
.history-event__marker {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #374151;
    border: 1px solid #374151;
    border-bottom: none;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: var(--space-sm) var(--space-lg);
    transition: transform var(--transition-normal);
}

/* Entry type label ---- */
.history-event__type {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.15);
    padding: 2px 10px;
    border-radius: var(--radius-full);
    white-space: nowrap;
}

/* Era header type label ---- */
.era-header__type {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-left: var(--space-xs);
}

.era-header__type::before {
    content: "\2014\00a0";
}

.history-event__year {
    display: inline-flex;
    align-items: center;
    font-size: 0.8125rem;
    font-weight: 700;
    color: white;
    letter-spacing: 0.02em;
}

.history-event__content {
    position: relative;
    z-index: 1;
    background: var(--bg-card);
    border: 1px solid rgba(55, 65, 81, 0.3);
    border-top: none;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}

.history-event:hover .history-event__marker,
.history-event:hover .history-event__content {
    transform: translateX(4px);
}

.history-event:hover .history-event__content {
    box-shadow: var(--shadow-md);
}

.history-event__label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-sm);
}

.history-event__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-md);
    line-height: 1.3;
}

.history-event__text {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: var(--space-md);
}

.history-event__text:last-child {
    margin-bottom: 0;
}

/* History Event Quote */
.history-event__quote {
    margin: var(--space-lg) 0;
    padding-left: var(--space-lg);
    border-left: 3px solid var(--primary);
}

.history-event__quote blockquote {
    font-size: 1.0625rem;
    font-style: italic;
    color: var(--text-secondary);
    margin: 0 0 var(--space-sm) 0;
}

.history-event__quote cite {
    font-size: 0.875rem;
    color: var(--text-muted);
    font-style: normal;
}

/* History Event Participants/Authors */
.history-event__participants,
.history-event__authors {
    margin: var(--space-md) 0;
    padding: var(--space-md);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
}

.history-event__participants-label,
.history-event__authors-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-sm);
}

.history-event__participant-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.history-event__participant-list span,
.history-event__authors span {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.history-event__participant-list span::after {
    content: '•';
    margin-left: var(--space-sm);
    color: var(--border-color);
}

.history-event__participant-list span:last-child::after {
    content: '';
}

/* History Event Stats */
.history-event__stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin: var(--space-lg) 0;
}

.history-event__stat {
    flex: 1;
    min-width: 120px;
    padding: var(--space-md);
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.05) 0%, rgba(220, 53, 69, 0.02) 100%);
    border: 1px solid rgba(220, 53, 69, 0.15);
    border-radius: var(--radius-md);
    text-align: center;
}

.history-event__stat-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: var(--space-xs);
}

.history-event__stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* History Event Impact */
.history-event__impact {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: rgba(16, 185, 129, 0.08);
    border-radius: var(--radius-md);
    margin-top: var(--space-md);
}

.history-event__impact-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: #10b981;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.history-event__impact span:last-child {
    font-size: 0.9375rem;
    color: var(--text-secondary);
}

/* History Event Insight */
.history-event__insight {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md);
    background: rgba(59, 130, 246, 0.08);
    border-radius: var(--radius-md);
    margin-top: var(--space-md);
}

.history-event__insight svg {
    width: 20px;
    height: 20px;
    color: #3b82f6;
    flex-shrink: 0;
    margin-top: 2px;
}

.history-event__insight span {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* History Event Link */
.history-event__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    margin-top: var(--space-md);
    transition: gap var(--transition-fast);
}

.history-event__link:hover {
    gap: var(--space-sm);
}

/* History Event CTA */
.history-event__cta {
    margin-top: var(--space-lg);
}

/* History Event Modifiers ---- */

/* Period structural styling (dashed borders) */
.history-event--period .history-event__marker {
    border-style: dashed;
    border-bottom: none;
}

.history-event--period::before {
    border-style: dashed;
}

.history-event--period .history-event__content {
    background: var(--bg-secondary);
    border-style: dashed;
    border-top: none;
}

/* Current era pulse animation */
.history-event--current::before {
    animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
}

/* === TYPE-BASED COLOR SYSTEM === */

/* Milestone — Red */
[data-type="milestone"] .history-event__marker { background: var(--primary); border-color: var(--primary); }
[data-type="milestone"]::before { background: var(--primary); border-color: var(--primary); }
[data-type="milestone"] .history-event__content { border-color: rgba(220, 53, 69, 0.3); box-shadow: 0 0 0 1px rgba(220, 53, 69, 0.1); }

/* Research — Blue */
[data-type="research"] .history-event__marker { background: #2563eb; border-color: #2563eb; }
[data-type="research"]::before { background: #2563eb; border-color: #2563eb; }
[data-type="research"] .history-event__label { color: #2563eb; }
[data-type="research"] .history-event__content { border-color: rgba(37, 99, 235, 0.3); }

/* Event — Dark Grey */
[data-type="event"] .history-event__marker { background: #374151; border-color: #374151; }
[data-type="event"]::before { background: #374151; border-color: #374151; }
[data-type="event"] .history-event__content { border-color: rgba(55, 65, 81, 0.3); }

/* Period — Medium Grey */
[data-type="period"] .history-event__marker { background: #6b7280; border-color: #6b7280; }
[data-type="period"]::before { background: #6b7280; border-color: #6b7280; }
[data-type="period"] .history-event__content { border-color: rgba(107, 114, 128, 0.3); }

/* Policy — Slate */
[data-type="policy"] .history-event__marker { background: #475569; border-color: #475569; }
[data-type="policy"]::before { background: #475569; border-color: #475569; }
[data-type="policy"] .history-event__content { border-color: rgba(71, 85, 105, 0.3); }

/* Current — Green */
[data-type="current"] .history-event__marker { background: linear-gradient(135deg, #10b981 0%, #34d399 100%); border-color: #10b981; }
[data-type="current"]::before { background: #10b981; border-color: #10b981; }
[data-type="current"] .history-event__content { border-color: rgba(16, 185, 129, 0.3); }

/* Outlook — Purple */
[data-type="outlook"] .history-event__marker { background: #8b5cf6; border-color: #8b5cf6; }
[data-type="outlook"]::before { background: #8b5cf6; border-color: #8b5cf6; }
[data-type="outlook"] .history-event__content { border-color: rgba(139, 92, 246, 0.3); }

.history-event--current .history-event__content {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.03) 0%, var(--bg-card) 100%);
    border-color: rgba(16, 185, 129, 0.3);
}

/* Era Frameworks Directory ---- */
.era-frameworks {
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 2px solid var(--border-color);
}

.era-frameworks__title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-xs);
}

.era-frameworks__subtitle {
    color: var(--text-secondary);
    margin-bottom: var(--space-lg);
    font-size: 0.95rem;
}

.era-frameworks__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.era-frameworks__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--border-color);
    transition: background var(--transition-fast);
}

.era-frameworks__item:hover {
    background: rgba(220, 53, 69, 0.04);
}

.era-frameworks__link {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.95rem;
    transition: color var(--transition-fast);
}

.era-frameworks__link:hover {
    color: var(--primary);
}

.framework-status {
    display: inline-block;
    font-size: 0.6rem;
    padding: 0.15em 0.5em;
    border-radius: 99px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: var(--space-sm);
}

.framework-status--active {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
}

.framework-status--historical {
    background: rgba(107, 114, 128, 0.15);
    color: #6b7280;
}

@media (max-width: 768px) {
    .era-frameworks__grid {
        grid-template-columns: 1fr;
    }
}

/* Insight Cards ---- */
.insight-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: var(--space-lg);
    margin-top: var(--space-xl);
}

.insight-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    text-align: center;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.insight-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.insight-card__icon {
    width: 56px;
    height: 56px;
    margin: 0 auto var(--space-lg);
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.1) 0%, rgba(220, 53, 69, 0.05) 100%);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.insight-card__icon svg {
    width: 28px;
    height: 28px;
    color: var(--primary);
}

.insight-card__title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

.insight-card__text {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Citations Table (Foundations Page) ---- */
.era-gen-table--citations td:first-child {
    font-weight: 700;
    color: var(--primary);
    text-align: center;
    white-space: nowrap;
    width: 40px;
}

.era-gen-table--citations td:nth-child(3) {
    font-style: italic;
}

.era-gen-table--citations td:last-child {
    font-weight: 600;
    color: var(--primary);
    white-space: nowrap;
}

.era-gen-table--citations a {
    color: var(--primary);
    text-decoration: none;
    transition: opacity var(--transition-fast);
}

.era-gen-table--citations a:hover {
    opacity: 0.8;
    text-decoration: underline;
}

/* === DISCOVER HUB === */

/* Filter Row ---- */
.discover-filters {
    position: sticky;
    top: calc(70px + var(--ticker-offset, 0px));
    z-index: 90;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    padding: var(--space-sm) 0;
}

.discover-filters__row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-sm);
    padding: var(--space-xs) 0;
}

.discover-filters__btn {
    white-space: nowrap;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.discover-filters__btn:hover,
.discover-filters__btn.is-active {
    color: var(--primary);
    border-color: var(--primary);
    background: rgba(220, 53, 69, 0.08);
}

/* Discover Grid ---- */
.discover-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: var(--space-md);
    margin-top: var(--space-xl);
}

/* Discover Card ---- */
.discover-card {
    display: flex;
    flex-direction: column;
    padding: var(--space-lg);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--text-primary);
    transition: all var(--transition-normal);
}

.discover-card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.discover-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-sm);
}

.discover-card__title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary);
}

.discover-card__year {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 500;
}

.discover-card__desc {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0 0 var(--space-md);
    line-height: 1.5;
    flex: 1;
}

/* Category Count Badge ---- */
.discover-category__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    height: 1.75rem;
    padding: 0 var(--space-sm);
    border-radius: var(--radius-full);
    background: var(--primary);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    margin-left: var(--space-sm);
    vertical-align: middle;
}

/* Category Link ---- */
.discover-category__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-xl);
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    font-size: 0.95rem;
}

.discover-category__link:hover {
    text-decoration: underline;
}

/* Anchor Scroll Offsets ---- */
[id^="cat-"] {
    scroll-margin-top: calc(140px + var(--ticker-offset, 0px));
}

/* Discover Hub Responsive ---- */
@media (max-width: 768px) {
    .discover-filters {
        top: calc(60px + var(--ticker-offset, 0px));
    }

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

    [id^="cat-"] {
        scroll-margin-top: calc(120px + var(--ticker-offset, 0px));
    }
}

/* /DISCOVER HUB */

/* === CATEGORY PAGES === */
.category-overview {
    max-width: 800px;
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--text-secondary);
}

.category-overview p + p {
    margin-top: var(--space-md);
}
/* /CATEGORY PAGES */

/* Timeline Mobile Responsive */
@media (max-width: 768px) {
    .history-timeline {
        padding-left: var(--space-lg);
    }

    .history-timeline::before {
        left: 4px;
    }

    .history-event::before {
        left: calc(-1 * var(--space-lg) - 1px);
    }

    .history-event__marker {
        padding: var(--space-xs) var(--space-md);
    }

    .history-event__year {
        font-size: 0.75rem;
    }

    .history-event__type {
        font-size: 0.6rem;
        padding: 1px 6px;
    }

    .history-event__content {
        padding: var(--space-md);
    }

    .history-event__title {
        font-size: 1.125rem;
    }

    .history-event__stats {
        flex-direction: column;
    }

    .history-event__stat {
        min-width: 100%;
    }

    .insight-cards {
        grid-template-columns: 1fr;
    }

    .era-header__title {
        font-size: 1.5rem;
    }

    .era-header__subtitle {
        font-size: 1rem;
    }
}

/* === AI MODEL BENCHMARK SYSTEM === */

/* Benchmark Layout ---- */
.benchmark-section {
    padding: 4rem 0;
}

.benchmark-section--dark {
    background: linear-gradient(to right, #2a1015 0%, #150a0d 40%, #000000 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.benchmark-section--dark .benchmark-section__title,
.benchmark-section--dark .benchmark-section__subtitle {
    position: relative;
    z-index: 2;
    color: #fff;
}

.benchmark-section__title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.benchmark-section__subtitle {
    font-size: 1.1rem;
    color: #6b7280;
    margin-bottom: 2rem;
}

.benchmark-section--dark .benchmark-section__subtitle {
    color: #9ca3af;
}

/* Provider Color System ---- */
.provider-color--anthropic { color: #D97757; }
.provider-color--openai { color: #10A37F; }
.provider-color--google { color: #4285F4; }
.provider-color--meta { color: #0668E1; }
.provider-color--xai { color: #6366F1; }
.provider-color--deepseek { color: #4D6BFE; }
.provider-color--mistral { color: #FF7000; }
.provider-color--alibaba { color: #FF6A00; }
.provider-color--cohere { color: #39594D; }

.provider-bg--anthropic { background-color: #D97757; }
.provider-bg--openai { background-color: #10A37F; }
.provider-bg--google { background-color: #4285F4; }
.provider-bg--meta { background-color: #0668E1; }
.provider-bg--xai { background-color: #6366F1; }
.provider-bg--deepseek { background-color: #4D6BFE; }
.provider-bg--mistral { background-color: #FF7000; }
.provider-bg--alibaba { background-color: #FF6A00; }
.provider-bg--cohere { background-color: #39594D; }

.provider-border--anthropic { border-color: #D97757; }
.provider-border--openai { border-color: #10A37F; }
.provider-border--google { border-color: #4285F4; }
.provider-border--meta { border-color: #0668E1; }
.provider-border--xai { border-color: #6366F1; }
.provider-border--deepseek { border-color: #4D6BFE; }
.provider-border--mistral { border-color: #FF7000; }
.provider-border--alibaba { border-color: #FF6A00; }
.provider-border--cohere { border-color: #39594D; }

/* Benchmark Leaderboard Table ---- */
.benchmark-leaderboard {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

.benchmark-leaderboard thead {
    background: #111;
    color: #fff;
}

.benchmark-leaderboard th {
    padding: 1rem 0.75rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 2;
    background: #111;
}

.benchmark-leaderboard td {
    padding: 0.85rem 0.75rem;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
}

.benchmark-leaderboard tbody tr:hover {
    background: #f8f9fa;
}

.benchmark-leaderboard__rank {
    font-weight: 700;
    font-size: 1.1rem;
    width: 3rem;
    text-align: center;
}

.benchmark-leaderboard__rank--gold {
    color: #D4A017;
}

.benchmark-leaderboard__rank--silver {
    color: #8B8B8B;
}

.benchmark-leaderboard__rank--bronze {
    color: #CD7F32;
}

.benchmark-leaderboard__model {
    font-weight: 600;
}

.benchmark-leaderboard__provider {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
}

.benchmark-leaderboard__score {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.benchmark-leaderboard__score--best {
    color: #DC3545;
}

.benchmark-leaderboard__bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.benchmark-leaderboard__bar-track {
    flex: 1;
    height: 8px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
}

.benchmark-leaderboard__bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 1s ease-out;
}

.benchmark-leaderboard__bar-value {
    font-size: 0.85rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    min-width: 3rem;
    text-align: right;
}

/* Benchmark Chart Containers ---- */
.benchmark-chart-card--full {
    background: #fff;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    margin-top: 2rem;
}

.benchmark-chart-card__subtitle {
    color: #6b7280;
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
}

.benchmark-donut-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
}

.benchmark-chart-canvas--donut {
    width: 320px;
    height: 320px;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
}

.benchmark-legend--vertical {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.benchmark-chart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.benchmark-chart-card {
    background: #fff;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

.benchmark-chart-card--dark {
    background: #1a0a0e;
    border: 1px solid rgba(220, 53, 69, 0.15);
}

.benchmark-chart-card__title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.benchmark-chart-card--dark .benchmark-chart-card__title {
    color: #fff;
}

.benchmark-chart-canvas {
    width: 100%;
    aspect-ratio: 16 / 10;
    display: block;
}

/* Benchmark Chart Empty State ---- */
.benchmark-chart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    padding: 2rem;
    color: #9ca3af;
}

.benchmark-chart-empty__icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    opacity: 0.4;
}

.benchmark-chart-empty__text {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.benchmark-chart-empty__detail {
    font-size: 0.85rem;
    text-align: center;
    max-width: 280px;
}

/* Benchmark canvas accessibility fallback */
.benchmark-chart-canvas .sr-only-table {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* Benchmark Category Filter ---- */
.benchmark-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.benchmark-filter-btn {
    padding: 0.5rem 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    background: transparent;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #374151;
}

.benchmark-filter-btn:hover {
    border-color: #DC3545;
    color: #DC3545;
}

.benchmark-filter-btn.is-active {
    background: #DC3545;
    border-color: #DC3545;
    color: #fff;
}

/* Provider Company Cards (Hub Page) ---- */
.provider-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.provider-card {
    background: #fff;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    border-top: 4px solid transparent;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none;
    color: inherit;
    display: block;
}

.provider-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.provider-card__name {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.provider-card__model {
    font-size: 0.9rem;
    color: #6b7280;
    margin-bottom: 1rem;
}

.provider-card__scores {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.provider-card__score-item {
    display: flex;
    flex-direction: column;
}

.provider-card__score-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9ca3af;
}

.provider-card__score-value {
    font-size: 1.1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Company Page Model Timeline ---- */
.model-timeline {
    position: relative;
    padding-left: 2rem;
}

.model-timeline::before {
    content: '';
    position: absolute;
    left: 0.5rem;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, #DC3545, #A71D2A);
    border-radius: 2px;
}

.model-timeline__item {
    position: relative;
    padding-bottom: 2rem;
    padding-left: 1.5rem;
}

.model-timeline__item::before {
    content: '';
    position: absolute;
    left: -1.75rem;
    top: 0.35rem;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 3px solid #DC3545;
    background: #fff;
}

.model-timeline__item--current::before {
    background: #DC3545;
    box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.2);
}

.model-timeline__date {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #DC3545;
    margin-bottom: 0.25rem;
}

.model-timeline__title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.model-timeline__description {
    font-size: 0.95rem;
    color: #4b5563;
    line-height: 1.6;
    margin-bottom: 0.75rem;
}

.model-timeline__benchmarks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.model-timeline__benchmark-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.6rem;
    background: #f3f4f6;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
}

.model-timeline__benchmark-tag span {
    font-weight: 400;
    color: #6b7280;
}

/* Benchmark Comparison Radar Legend ---- */
.benchmark-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
    justify-content: center;
}

.benchmark-legend__item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
}

.benchmark-legend__swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

/* Benchmark Stats Row ---- */
.benchmark-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

/* Benchmark Stat Cards — Dark Glass ---- */
.benchmark-stat {
    text-align: center;
    padding: 1.5rem;
    background: linear-gradient(135deg, #1a0a0e 0%, #0d0507 60%, #000000 100%);
    border-radius: 12px;
    border: 1px solid rgba(220, 53, 69, 0.15);
    border-top: 3px solid #DC3545;
    box-shadow:
        0 4px 20px rgba(220, 53, 69, 0.12),
        0 1px 3px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    overflow: hidden;
}

.benchmark-stat::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(220, 53, 69, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.benchmark-stat:hover {
    transform: translateY(-3px);
    box-shadow:
        0 8px 30px rgba(220, 53, 69, 0.2),
        0 2px 8px rgba(0, 0, 0, 0.4);
}

.benchmark-stat__value {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 0.25rem;
    color: #fff;
    position: relative;
}

.benchmark-stat__label {
    font-size: 0.85rem;
    color: #d1d5db;
    font-weight: 500;
    position: relative;
}

/* Provider-colored top accent for company pages */
.benchmark-stat.provider-border--anthropic { border-top-color: #D97757; }
.benchmark-stat.provider-border--openai { border-top-color: #10A37F; }
.benchmark-stat.provider-border--google { border-top-color: #4285F4; }
.benchmark-stat.provider-border--meta { border-top-color: #0668E1; }
.benchmark-stat.provider-border--xai { border-top-color: #6366F1; }
.benchmark-stat.provider-border--deepseek { border-top-color: #4D6BFE; }
.benchmark-stat.provider-border--mistral { border-top-color: #FF7000; }
.benchmark-stat.provider-border--alibaba { border-top-color: #FF6A00; }
.benchmark-stat.provider-border--cohere { border-top-color: #39594D; }

/* Provider-colored glow on hover */
.benchmark-stat.provider-border--anthropic:hover { box-shadow: 0 8px 30px rgba(217, 119, 87, 0.25), 0 2px 8px rgba(0, 0, 0, 0.4); }
.benchmark-stat.provider-border--openai:hover { box-shadow: 0 8px 30px rgba(16, 163, 127, 0.25), 0 2px 8px rgba(0, 0, 0, 0.4); }
.benchmark-stat.provider-border--google:hover { box-shadow: 0 8px 30px rgba(66, 133, 244, 0.25), 0 2px 8px rgba(0, 0, 0, 0.4); }
.benchmark-stat.provider-border--meta:hover { box-shadow: 0 8px 30px rgba(6, 104, 225, 0.25), 0 2px 8px rgba(0, 0, 0, 0.4); }
.benchmark-stat.provider-border--xai:hover { box-shadow: 0 8px 30px rgba(99, 102, 241, 0.25), 0 2px 8px rgba(0, 0, 0, 0.4); }
.benchmark-stat.provider-border--deepseek:hover { box-shadow: 0 8px 30px rgba(77, 107, 254, 0.25), 0 2px 8px rgba(0, 0, 0, 0.4); }
.benchmark-stat.provider-border--mistral:hover { box-shadow: 0 8px 30px rgba(255, 112, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.4); }
.benchmark-stat.provider-border--alibaba:hover { box-shadow: 0 8px 30px rgba(255, 106, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.4); }
.benchmark-stat.provider-border--cohere:hover { box-shadow: 0 8px 30px rgba(57, 89, 77, 0.35), 0 2px 8px rgba(0, 0, 0, 0.4); }

/* Benchmark Description Blocks ---- */
.benchmark-explainer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.benchmark-explainer__card {
    padding: 1.5rem;
    background: #f9fafb;
    border-radius: 12px;
    border-left: 4px solid #DC3545;
}

.benchmark-explainer__name {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.benchmark-explainer__full-name {
    font-size: 0.8rem;
    color: #6b7280;
    margin-bottom: 0.5rem;
}

.benchmark-explainer__desc {
    font-size: 0.9rem;
    color: #4b5563;
    line-height: 1.5;
}

/* Benchmark Responsive ---- */
@media (max-width: 768px) {
    .benchmark-chart-card--full {
        padding: 1.25rem;
    }

    .benchmark-donut-row {
        flex-direction: column;
        gap: 1.5rem;
    }

    .benchmark-chart-canvas--donut {
        width: 240px;
        height: 240px;
    }

    .benchmark-legend--vertical {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.4rem 1rem;
    }

    .benchmark-chart-grid {
        grid-template-columns: 1fr;
    }

    .benchmark-leaderboard {
        font-size: 0.85rem;
    }

    .benchmark-leaderboard th,
    .benchmark-leaderboard td {
        padding: 0.6rem 0.5rem;
    }

    .benchmark-leaderboard__bar-track {
        display: none;
    }

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

    .benchmark-section__title {
        font-size: 1.5rem;
    }

    .benchmark-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .benchmark-stat__value {
        font-size: 1.8rem;
    }

    .benchmark-explainer {
        grid-template-columns: 1fr;
    }

    .model-timeline {
        padding-left: 1.5rem;
    }
}

@media (max-width: 480px) {
    .benchmark-filters {
        justify-content: center;
    }

    .benchmark-stats {
        grid-template-columns: 1fr;
    }

    .provider-card__scores {
        grid-template-columns: 1fr;
    }
}

/* Benchmark Table Scroll Wrapper (mobile) ---- */
.benchmark-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
}

/* /AI MODEL BENCHMARK SYSTEM */

/* === AUDIT REPORT PORTAL === */

/* Section Headings ---- */
.audit-section-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text);
    text-align: center;
    margin-bottom: 0.75rem;
}

.audit-section-subtitle {
    font-size: 1rem;
    color: #9ca3af;
    text-align: center;
    margin-bottom: 2.5rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

/* Overall Health — Gauge + Stats ---- */
.audit-score-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    flex-wrap: wrap;
}

.audit-gauge-wrap {
    flex-shrink: 0;
}

.audit-gauge .gauge-circle {
    width: 180px;
    height: 180px;
    background: conic-gradient(
        var(--primary) calc(var(--gauge-value, 0) * 1%),
        #374151 0%
    );
}

.audit-gauge .gauge-circle::before {
    width: 140px;
    height: 140px;
    background: #1f2937;
}

.audit-gauge .gauge-value {
    font-size: 2.5rem;
    color: #f3f4f6;
}

.audit-gauge .gauge-label {
    font-size: 1rem;
    color: #9ca3af;
}

.audit-gauge.gauge--success .gauge-circle {
    background: conic-gradient(
        #10b981 calc(var(--gauge-value, 0) * 1%),
        #374151 0%
    );
}

.audit-gauge.gauge--warning .gauge-circle {
    background: conic-gradient(
        #f59e0b calc(var(--gauge-value, 0) * 1%),
        #374151 0%
    );
}

.audit-score-summary {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

.audit-score-stat {
    text-align: center;
    padding: 1.25rem 1.5rem;
    background: #1f2937;
    border-radius: 12px;
    border: 1px solid #374151;
    border-top: 3px solid #DC3545;
    min-width: 140px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.audit-score-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.audit-score-stat__value {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    color: #f3f4f6;
    margin-bottom: 0.35rem;
}

.audit-score-stat__value--error {
    color: #f87171;
}

.audit-score-stat__value--warning {
    color: #fbbf24;
}

.audit-score-stat__value--success {
    color: #34d399;
}

.audit-score-stat__label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Severity Distribution ---- */
.audit-severity-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.audit-severity-card {
    text-align: center;
    padding: 2rem 1.5rem;
    background: #1f2937;
    border-radius: 12px;
    border: 1px solid #374151;
    border-top: 4px solid #6b7280;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.audit-severity-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.audit-severity-card--error {
    border-top-color: #DC3545;
}

.audit-severity-card--warning {
    border-top-color: #f59e0b;
}

.audit-severity-card--info {
    border-top-color: #3b82f6;
}

.audit-severity-card__icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 1rem;
    color: #6b7280;
}

.audit-severity-card--error .audit-severity-card__icon {
    color: #f87171;
}

.audit-severity-card--warning .audit-severity-card__icon {
    color: #fbbf24;
}

.audit-severity-card--info .audit-severity-card__icon {
    color: #60a5fa;
}

.audit-severity-card__value {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    color: #f3f4f6;
    margin-bottom: 0.5rem;
}

.audit-severity-card__label {
    font-size: 1.1rem;
    font-weight: 700;
    color: #d1d5db;
    margin-bottom: 0.25rem;
}

.audit-severity-card__desc {
    font-size: 0.85rem;
    color: #9ca3af;
    line-height: 1.4;
}

/* Category Breakdown Grid ---- */
.audit-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
}

.audit-category-card {
    padding: 1.25rem 1.5rem;
    background: #1f2937;
    border-radius: 12px;
    border: 1px solid #374151;
    border-left: 4px solid #10b981;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.audit-category-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.audit-category-card--failed {
    border-left-color: #DC3545;
}

.audit-category-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.audit-category-card__name {
    font-size: 1rem;
    font-weight: 700;
    color: #f3f4f6;
}

.audit-category-card__badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.audit-category-card--failed .audit-category-card__badge {
    background: rgba(220, 53, 69, 0.15);
    color: #f87171;
    border-color: rgba(220, 53, 69, 0.3);
}

.audit-category-card__counts {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.audit-category-card__count {
    font-size: 0.8rem;
    font-weight: 600;
}

.audit-category-card__count--error {
    color: #f87171;
}

.audit-category-card__count--warning {
    color: #fbbf24;
}

.audit-category-card__count--info {
    color: #60a5fa;
}

.audit-category-card__count--clean {
    color: #34d399;
    font-weight: 600;
}

.audit-category-card__meta {
    font-size: 0.75rem;
    color: #6b7280;
}

/* Category Details Accordion ---- */
.audit-issue-accordion {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.audit-issue-item {
    background: #1f2937;
    border-radius: 12px;
    border: 1px solid #374151;
    overflow: hidden;
}

.audit-issue-item__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

.audit-issue-item__header:hover {
    background: #283548;
}

.audit-issue-item__title {
    font-size: 1rem;
    font-weight: 700;
    color: #f3f4f6;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.audit-issue-item__count-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    background: rgba(220, 53, 69, 0.15);
    color: #f87171;
    border: 1px solid rgba(220, 53, 69, 0.3);
}

.audit-issue-item__count-badge--warning {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border-color: rgba(245, 158, 11, 0.3);
}

.audit-issue-item__chevron {
    width: 20px;
    height: 20px;
    color: #6b7280;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.audit-issue-item.is-expanded .audit-issue-item__chevron {
    transform: rotate(180deg);
}

.audit-issue-item__body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.audit-issue-item.is-expanded .audit-issue-item__body {
    max-height: 5000px;
}

.audit-issue-item__content {
    padding: 0 1.5rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.audit-issue {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border-left: 3px solid #f87171;
    background: rgba(220, 53, 69, 0.08);
}

.audit-issue--warning {
    border-left-color: #fbbf24;
    background: rgba(245, 158, 11, 0.08);
}

.audit-issue--info {
    border-left-color: #34d399;
    background: rgba(52, 211, 153, 0.08);
}

/* Verified badge ---- */
.audit-issue__verified-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #34d399;
    border: 1px solid #34d399;
    border-radius: 4px;
    padding: 0.125rem 0.5rem;
    margin-top: 0.25rem;
}

.audit-issue__file {
    font-size: 0.75rem;
    font-family: 'Courier New', monospace;
    color: #6b7280;
    margin-bottom: 0.25rem;
}

.audit-issue__message {
    font-size: 0.875rem;
    font-weight: 600;
    color: #e5e7eb;
    margin-bottom: 0.15rem;
}

.audit-issue__suggestion {
    font-size: 0.8rem;
    color: #9ca3af;
    font-style: italic;
}

/* Info & Clean Badge Variants ---- */
.audit-issue-item__count-badge--info {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    border-color: rgba(59, 130, 246, 0.3);
}

.audit-issue-item__count-badge--clean {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border-color: rgba(16, 185, 129, 0.3);
}

/* Detail Blocks (description, why, checks) ---- */
.audit-detail-block {
    margin-bottom: 1.25rem;
}

.audit-detail-block__label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #DC3545;
    margin-bottom: 0.5rem;
}

.audit-detail-block__text {
    font-size: 0.9rem;
    color: #d1d5db;
    line-height: 1.65;
}

/* Checks List ---- */
.audit-checks-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.audit-check-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    border: 1px solid #374151;
}

.audit-check-row__severity {
    flex-shrink: 0;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    margin-top: 2px;
}

.audit-check-row__severity--error {
    background: rgba(220, 53, 69, 0.15);
    color: #f87171;
}

.audit-check-row__severity--warning {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
}

.audit-check-row__severity--info {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
}

.audit-check-row__details {
    flex: 1;
    min-width: 0;
}

.audit-check-row__name {
    font-size: 0.875rem;
    font-weight: 700;
    color: #e5e7eb;
    margin-bottom: 0.15rem;
}

.audit-check-row__desc {
    font-size: 0.8rem;
    color: #9ca3af;
    line-height: 1.5;
}

/* Findings Sub-headings ---- */
.audit-findings-subhead {
    font-size: 0.8rem;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid #374151;
}

.audit-findings-subhead--verified {
    color: #34d399;
    border-bottom-color: rgba(52, 211, 153, 0.3);
}

.audit-findings-subhead--info {
    color: #93c5fd;
    border-bottom-color: rgba(147, 197, 253, 0.3);
}

/* Report Metadata Grid ---- */
.audit-metadata-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1.25rem;
}

.audit-metadata-item {
    padding: 1.25rem 1rem;
    background: #1f2937;
    border-radius: 12px;
    border: 1px solid #374151;
    border-left: 3px solid #DC3545;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.audit-metadata-item__label {
    font-size: 0.75rem;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

.audit-metadata-item__value {
    font-size: 1.1rem;
    font-weight: 700;
    color: #f3f4f6;
}

/* CTA Text ---- */
.audit-cta-text {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 2rem;
    color: var(--text-muted);
    line-height: 1.6;
}

.audit-cta-text code {
    color: #DC3545;
    font-weight: 600;
}

/* Checks Chart Wrapper ---- */
.audit-chart-wrap {
    background: linear-gradient(135deg, #111827 0%, #1f2937 100%);
    border-radius: 16px;
    border: 1px solid #374151;
    padding: 2rem 1.5rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
}

.audit-chart-wrap::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(to right, #DC3545, #f59e0b, #10b981, #3b82f6);
    opacity: 0.8;
}

.audit-chart-wrap canvas {
    width: 100%;
    display: block;
}

/* Run Audit Button ---- */
.audit-run-icon {
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.35rem;
    margin-top: -2px;
}

/* Loading & Error States ---- */
.audit-loading {
    text-align: center;
    padding: 3rem;
    color: #9ca3af;
}

.audit-loading__spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(220, 53, 69, 0.2);
    border-top-color: #DC3545;
    border-radius: 50%;
    margin: 0 auto 1rem;
    animation: audit-spin 0.8s linear infinite;
}

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

.audit-error {
    text-align: center;
    padding: 3rem;
    color: #f87171;
    font-weight: 600;
}

/* No Issues Highlight ---- */
.audit-no-issues {
    text-align: center;
    padding: 2rem;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-radius: 12px;
    color: #34d399;
    font-weight: 700;
    font-size: 1.1rem;
}

/* Responsive ---- */
@media (max-width: 768px) {
    .audit-score-hero {
        flex-direction: column;
        gap: 2rem;
    }

    .audit-score-summary {
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
    }

    .audit-severity-grid {
        grid-template-columns: 1fr;
    }

    .audit-category-grid {
        grid-template-columns: 1fr;
    }

    .audit-metadata-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .audit-section-title {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .audit-score-summary {
        grid-template-columns: 1fr;
    }

    .audit-metadata-grid {
        grid-template-columns: 1fr;
    }

    .audit-gauge .gauge-circle {
        width: 140px;
        height: 140px;
    }

    .audit-gauge .gauge-circle::before {
        width: 110px;
        height: 110px;
    }

    .audit-gauge .gauge-value {
        font-size: 2rem;
    }
}

/* /AUDIT REPORT PORTAL */