/**
 * Workshop Interface Styles
 * 
 * Design System:
 * - Dark theme with amber/gold accent (tech-forward aesthetic)
 * - JetBrains Mono for headings/UI (developer/tech feel)
 * - Source Serif 4 for body text (readability)
 * - CSS custom properties for easy theming
 */

/* ============================================
   CSS Custom Properties (Design Tokens)
   ============================================ */
:root {
    /* Color Palette - Dark tech theme with warm accent */
    --color-bg-primary: #0d0d0f;
    --color-bg-secondary: #16161a;
    --color-bg-elevated: #1e1e24;
    --color-bg-hover: #25252d;
    
    /* Text colors */
    --color-text-primary: #ececf1;
    --color-text-secondary: #9898a6;
    --color-text-muted: #5c5c6a;
    
    /* Accent - Amber/Gold for warmth against dark */
    --color-accent: #f5a623;
    --color-accent-hover: #ffc857;
    --color-accent-muted: rgba(245, 166, 35, 0.15);
    
    /* Semantic colors */
    --color-success: #34d399;
    --color-error: #f87171;
    --color-border: #2a2a35;
    
    /* Typography */
    --font-heading: 'JetBrains Mono', monospace;
    --font-body: 'Source Serif 4', Georgia, serif;
    --font-mono: 'JetBrains Mono', monospace;
    
    /* Font sizes (fluid typography) */
    --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
    --text-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
    --text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
    --text-lg: clamp(1.125rem, 1rem + 0.625vw, 1.375rem);
    --text-xl: clamp(1.5rem, 1.25rem + 1.25vw, 2rem);
    --text-2xl: clamp(2rem, 1.5rem + 2.5vw, 3rem);
    
    /* Spacing scale */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    
    /* Layout */
    --max-width: 1000px;
    --header-height: 4rem;
    --nav-height: 5rem;
    --border-radius: 8px;
    --border-radius-lg: 12px;
    
    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 20px rgba(245, 166, 35, 0.2);
}

/* ============================================
   Reset & Base Styles
   ============================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   Scrollbar (match site aesthetics)
   ============================================ */
/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--color-accent) var(--color-bg-secondary);
}

/* WebKit (Chrome, Safari, Edge) */
*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: var(--color-bg-secondary);
    border-radius: var(--border-radius);
}

*::-webkit-scrollbar-thumb {
    background: var(--color-accent);
    border-radius: var(--border-radius);
    border: 2px solid var(--color-bg-secondary);
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--color-accent-hover);
}

*::-webkit-scrollbar-thumb:active {
    background: var(--color-accent-hover);
}

*::-webkit-scrollbar-corner {
    background: var(--color-bg-secondary);
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--color-text-primary);
    background: var(--color-bg-primary);
    min-height: 100vh;
    
    /* Subtle grid pattern for depth */
    background-image: 
        linear-gradient(rgba(245, 166, 35, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(245, 166, 35, 0.02) 1px, transparent 1px);
    background-size: 50px 50px;
    background-position: center center;
}

/* ============================================
   App Container Layout
   ============================================ */
.app-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--space-md);
}

.app-shell {
    display: flex;
    flex: 1;
    gap: var(--space-lg);
    min-height: 0;
}

.app-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background: var(--color-bg-elevated);
    color: var(--color-text-primary);
    cursor: pointer;
    font-family: var(--font-heading);
    font-size: 1rem;
    transition: all var(--transition-fast);
}

.sidebar-toggle:hover {
    background: var(--color-bg-hover);
}

.app-sidebar {
    width: 260px;
    flex-shrink: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    background: var(--color-bg-secondary);
    height: fit-content;
    max-height: calc(100vh - var(--header-height) - var(--space-xl));
    position: sticky;
    top: calc(var(--header-height) + var(--space-md));
    overflow: auto;
}

.app-sidebar__header {
    padding: var(--space-md);
    border-bottom: 1px solid var(--color-border);
}

.app-sidebar__header h2 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.app-sidebar__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-sm);
}

.sidebar-item {
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    border: 1px solid transparent;
    background: transparent;
    color: var(--color-text-secondary);
    border-radius: 8px;
    padding: 10px 12px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.sidebar-item:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
}

.sidebar-item__index {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
}

.sidebar-item__title {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-item--active {
    border-color: var(--color-accent);
    background: var(--color-accent-muted);
    color: var(--color-text-primary);
}

.sidebar-item--active .sidebar-item__index {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.sidebar-item--completed .sidebar-item__index {
    background: var(--color-accent-muted);
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.sidebar-scrim {
    display: none;
}

body.sidebar-collapsed .app-sidebar {
    width: 72px;
}

body.sidebar-collapsed .app-sidebar__header h2,
body.sidebar-collapsed .sidebar-item__title {
    display: none;
}

body.sidebar-collapsed .sidebar-item {
    justify-content: center;
    padding: 10px 6px;
}

/* ============================================
   Integrated Guide Pages (Ideation + GitHub Primer)
   ============================================ */
.guide-card {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: var(--space-lg);
    margin-bottom: var(--space-md);
}

.guide-hero {
    border-left: 3px solid var(--color-accent);
    background: linear-gradient(135deg, rgba(245, 166, 35, 0.12), rgba(245, 166, 35, 0.03));
}

.guide-two-col,
.guide-three-col {
    display: grid;
    gap: var(--space-md);
}

.guide-two-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.guide-three-col {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

.guide-mini-card--accent {
    border-color: var(--color-accent);
    background: rgba(245, 166, 35, 0.08);
}

.guide-mini-card h4 {
    margin: 0 0 var(--space-sm) 0;
    font-family: var(--font-heading);
}

.guide-mini-card ul {
    margin: 0;
    padding-left: 1.1rem;
}

.guide-mini-card li,
.guide-mini-card p {
    color: var(--color-text-secondary);
    margin-bottom: 0.35rem;
}

.guide-list {
    display: grid;
    gap: var(--space-sm);
}

.guide-list-item {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: var(--space-md);
}

.guide-list-item strong {
    display: block;
    margin-bottom: 0.35rem;
    font-family: var(--font-heading);
}

.guide-pattern-grid,
.guide-step-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm);
}

.guide-pattern-grid > div,
.guide-step-grid > div {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: var(--space-md);
}

.guide-pattern-grid strong,
.guide-step-grid strong {
    font-family: var(--font-heading);
    display: block;
    margin-bottom: 0.35rem;
}

.guide-prompt-box {
    margin-top: var(--space-sm);
    background: #09090b;
    border: 1px solid #3f3f46;
    border-radius: var(--border-radius);
    padding: var(--space-md);
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: #f4f4f5;
    white-space: pre-wrap;
    line-height: 1.45;
}

.guide-actions {
    margin-top: var(--space-sm);
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.guide-status {
    color: var(--color-success);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    min-height: 1rem;
}

.guide-flow {
    margin-top: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    font-family: var(--font-mono);
    color: var(--color-accent);
    background: rgba(245, 166, 35, 0.06);
}

.guide-table-wrap {
    overflow-x: auto;
}

.guide-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 520px;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.guide-table th,
.guide-table td {
    text-align: left;
    padding: 0.55rem 0.65rem;
    border-bottom: 1px solid var(--color-border);
}

.guide-table th {
    background: #18181b;
    font-family: var(--font-heading);
}

.guide-table tbody tr:nth-child(odd) {
    background: #131317;
}

.guide-table tbody tr:nth-child(even) {
    background: #17171d;
}

/* ============================================
   Header & Progress
   ============================================ */
.app-header {
    height: var(--header-height);
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    background: rgba(13, 13, 15, 0.9);
    backdrop-filter: blur(10px);
    z-index: 100;
}

.header-content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
}

.header-branding {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.logo {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-text-primary);
}

.logo-accent {
    color: var(--color-accent);
}

.header-credit {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: 1.2;
    white-space: nowrap;
}

.header-credit__link {
    color: var(--color-accent);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.header-credit__link:hover {
    color: var(--color-accent-hover);
    border-bottom-color: var(--color-accent-hover);
}

.header-credit__link:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Progress indicator */
.progress-container {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-shrink: 0;
}

.progress-bar {
    width: 120px;
    height: 4px;
    background: var(--color-bg-elevated);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.progress-bar::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: var(--progress, 0%);
    background: linear-gradient(90deg, var(--color-accent), var(--color-accent-hover));
    border-radius: 2px;
    transition: width var(--transition-base);
}

.progress-text {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    white-space: nowrap;
}

/* ============================================
   Main Content Area
   ============================================ */
.page-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-2xl) 0;
    min-height: calc(100vh - var(--header-height) - var(--nav-height));
}

.page-content {
    animation: fadeIn var(--transition-base) ease-out;
}

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

/* Page content styling */
.page-content h2 {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: 700;
    margin-bottom: var(--space-lg);
    color: var(--color-text-primary);
    letter-spacing: -0.02em;
}

.page-content h3 {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 600;
    margin-bottom: var(--space-md);
    color: var(--color-text-primary);
}

.page-content p {
    margin-bottom: var(--space-md);
    color: var(--color-text-secondary);
    max-width: 65ch; /* Optimal reading width */
}

.page-content .page-number {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-sm);
    display: block;
}

/* Card component for page content */
.content-card {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: var(--space-xl);
    margin-top: var(--space-lg);
}

.content-card--highlighted {
    border-color: var(--color-accent-muted);
    background: linear-gradient(
        135deg,
        var(--color-bg-secondary) 0%,
        rgba(245, 166, 35, 0.05) 100%
    );
}

/* Loading state */
.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    color: var(--color-text-muted);
    padding: var(--space-3xl);
}

.loading-spinner {
    width: 32px;
    height: 32px;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* ============================================
   Navigation
   ============================================ */
.navigation {
    height: var(--nav-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    border-top: 1px solid var(--color-border);
    padding: var(--space-md) 0;
}

/* Left nav group: Back + Message Celeste (avoids overlap) */
.nav-left-group {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

/* Navigation buttons */
.nav-btn {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-primary);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all var(--transition-fast);
    min-width: 100px;
    justify-content: center;
}

.nav-btn:hover:not(:disabled) {
    background: var(--color-bg-hover);
    border-color: var(--color-text-muted);
    transform: translateY(-1px);
}

.nav-btn:active:not(:disabled) {
    transform: translateY(0);
}

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

.nav-btn--next {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-bg-primary);
}

.nav-btn--next:hover:not(:disabled) {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    box-shadow: var(--shadow-glow);
}

.nav-btn__icon {
    font-size: 1.1em;
}

/* Page dots */
.page-dots {
    display: flex;
    gap: var(--space-xs);
    align-items: center;
}

.page-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    cursor: pointer;
    transition: all var(--transition-fast);
    padding: 0;
}

.page-dot:hover {
    background: var(--color-bg-hover);
    border-color: var(--color-text-muted);
    transform: scale(1.2);
}

.page-dot--active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    transform: scale(1.2);
}

.page-dot--completed {
    background: var(--color-accent-muted);
    border-color: var(--color-accent);
}

/* ============================================
   Responsive Design
   ============================================ */

/* Tablet and below */
@media (max-width: 768px) {
    .app-container {
        padding: 0 var(--space-sm);
    }

    .app-shell {
        gap: var(--space-sm);
    }
    
    .progress-bar {
        width: 80px;
    }
    
    .progress-text {
        display: none; /* Hide text on mobile, dots show progress */
    }
    
    .nav-btn {
        min-width: auto;
        padding: var(--space-sm) var(--space-md);
    }
    
    .nav-btn__text {
        display: none;
    }
    
    .nav-btn__icon {
        font-size: 1.25em;
    }
    
    .page-dots {
        gap: 6px;
    }
    
    .page-dot {
        width: 10px;
        height: 10px;
    }

    .guide-two-col,
    .guide-three-col,
    .guide-pattern-grid,
    .guide-step-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 960px) {
    .app-shell {
        position: relative;
    }

    .app-sidebar {
        position: fixed;
        z-index: 130;
        top: calc(var(--header-height) + var(--space-sm));
        left: var(--space-sm);
        max-height: calc(100vh - var(--header-height) - var(--space-lg));
        transform: translateX(-120%);
        transition: transform var(--transition-base);
        box-shadow: var(--shadow-lg);
    }

    body.sidebar-open .app-sidebar {
        transform: translateX(0);
    }

    .sidebar-scrim {
        position: fixed;
        inset: 0;
        z-index: 120;
        border: none;
        background: rgba(0, 0, 0, 0.45);
    }

    body.sidebar-open .sidebar-scrim {
        display: block;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .header-content {
        flex-wrap: wrap;
        gap: var(--space-sm);
    }
    
    .logo {
        font-size: var(--text-base);
    }
    
    .page-container {
        padding: var(--space-lg) 0;
    }
    
    .content-card {
        padding: var(--space-md);
    }
    
    .page-dots {
        max-width: 60%;
        flex-wrap: wrap;
        justify-content: center;
    }
}

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

/* Focus styles for keyboard navigation */
:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Hide focus for mouse users */
:focus:not(:focus-visible) {
    outline: none;
}

/* Skip link for accessibility */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--color-accent);
    color: var(--color-bg-primary);
    padding: var(--space-sm) var(--space-md);
    z-index: 1000;
    transition: top var(--transition-fast);
}

.skip-link:focus {
    top: 0;
}

/* ============================================
   Setup Verification Page (Page 0)
   ============================================ */

/* Page header styling */
.setup-header {
    margin-bottom: var(--space-xl);
}

.setup-header h2 {
    margin-bottom: var(--space-sm);
}

.setup-subtitle {
    color: var(--color-text-secondary);
    font-size: var(--text-lg);
    margin-bottom: 0;
}

/* Checklist container */
.setup-checklist {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}

/* Individual checklist item */
.checklist-item {
    display: flex;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    transition: all var(--transition-fast);
    cursor: pointer;
}

.checklist-item:hover {
    border-color: var(--color-text-muted);
    background: var(--color-bg-elevated);
}

.checklist-item--checked {
    border-color: var(--color-success);
    background: rgba(52, 211, 153, 0.05);
}

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

/* Custom checkbox */
.checklist-checkbox {
    position: relative;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin-top: 2px;
}

.checklist-checkbox input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 1;
}

.checklist-checkbox .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    background: var(--color-bg-primary);
    border: 2px solid var(--color-border);
    border-radius: 6px;
    transition: all var(--transition-fast);
}

.checklist-checkbox input:hover + .checkmark {
    border-color: var(--color-text-muted);
}

.checklist-checkbox input:checked + .checkmark {
    background: var(--color-success);
    border-color: var(--color-success);
}

.checklist-checkbox .checkmark::after {
    content: '';
    position: absolute;
    display: none;
    left: 7px;
    top: 3px;
    width: 6px;
    height: 11px;
    border: solid var(--color-bg-primary);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checklist-checkbox input:checked + .checkmark::after {
    display: block;
}

/* Checklist item content */
.checklist-content {
    flex: 1;
}

.checklist-label {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--color-text-primary);
    margin-bottom: var(--space-xs);
    display: block;
}

.checklist-helper {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-xs);
    line-height: 1.5;
}

.checklist-steps {
    margin: 8px 0 0 20px;
    padding: 0;
}

.checklist-steps li {
    margin-bottom: 6px;
}

.checklist-inline-link {
    color: var(--color-accent);
    text-decoration: underline;
    word-break: break-word;
}

.checklist-inline-link:hover {
    color: var(--color-accent-hover);
}

.checklist-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-accent);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.checklist-link:hover {
    color: var(--color-accent-hover);
    text-decoration: underline;
}

.checklist-link::before {
    content: '→';
}

/* Email input section */
.email-section {
    margin-bottom: var(--space-xl);
}

.email-label {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    margin-bottom: var(--space-sm);
}

.email-input-wrapper {
    position: relative;
    max-width: 400px;
}

.email-input {
    width: 100%;
    padding: var(--space-md);
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text-primary);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    transition: all var(--transition-fast);
}

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

.email-input:hover {
    border-color: var(--color-text-muted);
}

.email-input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-muted);
}

.email-input--error {
    border-color: var(--color-error);
}

.email-input--error:focus {
    border-color: var(--color-error);
    box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.15);
}

.email-error {
    font-size: var(--text-xs);
    color: var(--color-error);
    margin-top: var(--space-xs);
    display: none;
}

.email-error--visible {
    display: block;
}

/* Ready button */
.ready-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-xl);
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-bg-primary);
    background: var(--color-success);
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.ready-btn:hover:not(:disabled) {
    background: #2fc98a;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(52, 211, 153, 0.3);
}

.ready-btn:active:not(:disabled) {
    transform: translateY(0);
}

.ready-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: var(--color-text-muted);
}

.ready-btn__icon {
    font-size: 1.2em;
}

/* Expandable missing section */
.missing-section {
    margin-top: var(--space-xl);
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-lg);
}

.missing-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    width: 100%;
    padding: var(--space-md);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: left;
}

.missing-toggle:hover {
    color: var(--color-text-primary);
    border-color: var(--color-text-muted);
    background: var(--color-bg-secondary);
}

.missing-toggle__icon {
    transition: transform var(--transition-fast);
}

.missing-toggle--open .missing-toggle__icon {
    transform: rotate(90deg);
}

.missing-content {
    display: none;
    padding: var(--space-lg);
    margin-top: var(--space-md);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
}

.missing-content--open {
    display: block;
    animation: slideDown var(--transition-base) ease-out;
}

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

.missing-reassurance {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-lg);
    padding: var(--space-md);
    background: var(--color-accent-muted);
    border-radius: var(--border-radius);
    border-left: 3px solid var(--color-accent);
}

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

.missing-link {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--color-accent);
    text-decoration: none;
    background: var(--color-bg-elevated);
    border-radius: var(--border-radius);
    transition: all var(--transition-fast);
}

.missing-link:hover {
    color: var(--color-accent-hover);
    background: var(--color-bg-hover);
    transform: translateX(4px);
}

.missing-link__icon {
    opacity: 0.6;
}

/* Status messages */
.status-message {
    padding: var(--space-md);
    border-radius: var(--border-radius);
    font-size: var(--text-sm);
    margin-bottom: var(--space-md);
    display: none;
}

.status-message--visible {
    display: block;
    animation: fadeIn var(--transition-fast) ease-out;
}

.status-message--error {
    background: rgba(248, 113, 113, 0.1);
    border: 1px solid var(--color-error);
    color: var(--color-error);
}

.status-message--success {
    background: rgba(52, 211, 153, 0.1);
    border: 1px solid var(--color-success);
    color: var(--color-success);
}

/* Loading state for button */
.ready-btn--loading {
    position: relative;
    color: transparent;
}

.ready-btn--loading::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-bg-primary);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Responsive adjustments for setup page */
@media (max-width: 768px) {
    .checklist-item {
        padding: var(--space-md);
    }
    
    .email-input-wrapper {
        max-width: 100%;
    }
    
    .ready-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================
   Page 1: Welcome Page
   ============================================ */

.welcome-header {
    text-align: center;
    margin-bottom: var(--space-2xl);
}

.welcome-header h2 {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-md);
    background: linear-gradient(135deg, var(--color-text-primary) 0%, var(--color-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.welcome-subtitle {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    max-width: 500px;
    margin: 0 auto;
}

/* Demo section */
.demo-section {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: var(--space-lg);
    margin-bottom: var(--space-xl);
    text-align: center;
}

.demo-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-md);
}

.demo-icon {
    font-size: 1.2em;
}

.demo-link {
    display: inline-flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-md) var(--space-xl);
    background: var(--color-accent);
    border-radius: var(--border-radius);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.demo-link:hover {
    background: var(--color-accent-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

.demo-link__text {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-bg-primary);
}

.demo-link__url {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: rgba(13, 13, 15, 0.7);
}

/* Expectations card */
.expectations-card {
    background: linear-gradient(
        135deg,
        var(--color-bg-secondary) 0%,
        rgba(52, 211, 153, 0.08) 100%
    );
    border: 1px solid rgba(52, 211, 153, 0.3);
    border-radius: var(--border-radius-lg);
    padding: var(--space-xl);
    margin-bottom: var(--space-xl);
}

.expectations-card h3 {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    color: var(--color-text-primary);
    margin-bottom: var(--space-md);
}

.expectations-list {
    list-style: none;
    margin-bottom: var(--space-lg);
}

.expectations-list li {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
    font-size: var(--text-base);
    color: var(--color-text-secondary);
}

.expectation-icon {
    color: var(--color-success);
    font-weight: bold;
}

.expectation-highlight {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-lg);
    color: var(--color-success);
    padding-left: calc(var(--space-sm) + 1em); /* Align with text above */
}

.expectations-message {
    font-size: var(--text-base);
    color: var(--color-text-primary);
    padding: var(--space-md);
    background: var(--color-bg-primary);
    border-radius: var(--border-radius);
    border-left: 3px solid var(--color-success);
    margin: 0;
}

.expectations-message strong {
    color: var(--color-accent);
}

/* Process overview (Welcome page) – structured for future visualization */
.process-overview {
    margin-bottom: var(--space-2xl);
    padding: var(--space-xl);
    background: linear-gradient(
        145deg,
        rgba(245, 166, 35, 0.1) 0%,
        rgba(245, 166, 35, 0.04) 38%,
        rgba(255, 255, 255, 0) 100%
    ), var(--color-bg-secondary);
    border: 1px solid rgba(245, 166, 35, 0.22);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}

.process-overview__title {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    margin: 0 0 var(--space-lg) 0;
    color: var(--color-text-primary);
    letter-spacing: 0.01em;
}

.process-overview__intro {
    margin: 0 0 var(--space-lg) 0;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.process-steps {
    counter-reset: process-step;
    margin: 0 0 var(--space-lg) 0;
    padding-left: 0;
    list-style: none;
}

.process-step {
    position: relative;
    margin-bottom: var(--space-md);
    padding: var(--space-md) var(--space-md) var(--space-md) 3.15rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    color: var(--color-text-primary);
    line-height: 1.6;
    transition: transform var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
}

.process-step::before {
    counter-increment: process-step;
    content: counter(process-step);
    position: absolute;
    top: var(--space-md);
    left: var(--space-md);
    width: 1.85rem;
    height: 1.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(245, 166, 35, 0.2);
    border: 1px solid rgba(245, 166, 35, 0.35);
    color: var(--color-accent);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 700;
}

.process-step:hover {
    transform: translateY(-2px);
    border-color: rgba(245, 166, 35, 0.34);
    background: rgba(255, 255, 255, 0.045);
}

.process-step:last-child {
    margin-bottom: 0;
}

.process-step__phase {
    display: block;
    margin-bottom: var(--space-xs);
    color: var(--color-accent);
}

.process-step__flow {
    display: block;
    padding-left: 0;
    color: var(--color-text-secondary);
}

.process-overview__outcome {
    margin: 0;
    padding-top: var(--space-md);
    border-top: 1px dashed rgba(245, 166, 35, 0.25);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.process-overview__viz-placeholder {
    min-height: 0;
    margin-top: var(--space-lg);
}

/* When you add a visualization, target this container or replace the placeholder */
.process-overview__viz-placeholder:not(:empty) {
    min-height: 120px;
}

/* Instructor note */
.instructor-note {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--color-bg-elevated);
    border: 1px dashed var(--color-border);
    border-radius: var(--border-radius-lg);
    margin-bottom: var(--space-xl);
}

.instructor-note__icon {
    font-size: 1.5em;
    flex-shrink: 0;
}

.instructor-note p {
    font-style: italic;
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.6;
}

/* Let's Go button */
.lets-go-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    padding: var(--space-md) var(--space-xl);
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-bg-primary);
    background: linear-gradient(135deg, var(--color-success) 0%, #2fc98a 100%);
    border: none;
    border-radius: var(--border-radius-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
}

.lets-go-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(52, 211, 153, 0.35);
}

.lets-go-btn:active {
    transform: translateY(-1px);
}

.lets-go-btn__icon {
    font-size: 1.3em;
    transition: transform var(--transition-fast);
}

.lets-go-btn:hover .lets-go-btn__icon {
    transform: translateX(4px);
}

/* Center the button */
.page-content:has(.lets-go-btn) {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Responsive adjustments for welcome page */
@media (max-width: 768px) {
    .welcome-header h2 {
        font-size: var(--text-xl);
    }
    
    .welcome-subtitle {
        font-size: var(--text-base);
    }
    
    .expectations-card {
        padding: var(--space-lg);
    }
    
    .expectation-highlight {
        font-size: var(--text-base);
    }
    
    .instructor-note {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .process-overview {
        padding: var(--space-lg);
    }

    .process-step {
        padding: var(--space-md);
    }

    .process-step::before {
        position: static;
        margin-bottom: var(--space-sm);
    }
}

/* ============================================
   Page 2: Hackathon Mindset
   ============================================ */

/* Common page header style */
.page-header {
    margin-bottom: var(--space-xl);
}

.page-header h2 {
    margin-bottom: var(--space-sm);
}

.page-subtitle {
    font-family: var(--font-mono);
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    letter-spacing: 0.02em;
}

/* Key insight box */
.insight-box {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-xl);
    background: linear-gradient(
        135deg,
        rgba(245, 166, 35, 0.15) 0%,
        rgba(245, 166, 35, 0.05) 100%
    );
    border: 2px solid var(--color-accent);
    border-radius: var(--border-radius-lg);
    margin-bottom: var(--space-2xl);
}

.insight-box__icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.insight-box__text {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
    line-height: 1.4;
}

/* Mindset section */
.mindset-section {
    margin-bottom: var(--space-2xl);
}

.mindset-section h3 {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    color: var(--color-text-primary);
    margin-bottom: var(--space-lg);
}

/* Mindset table */
.mindset-table {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}

.mindset-table__header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--color-bg-elevated);
    border-bottom: 1px solid var(--color-border);
}

.mindset-table__col {
    padding: var(--space-md) var(--space-lg);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mindset-table__col--old {
    color: var(--color-text-muted);
}

.mindset-table__col--new {
    color: var(--color-success);
}

.mindset-table__row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    border-bottom: 1px solid var(--color-border);
    transition: background var(--transition-fast);
}

.mindset-table__row:last-child {
    border-bottom: none;
}

.mindset-table__row:hover {
    background: var(--color-bg-elevated);
}

.mindset-table__cell {
    padding: var(--space-md) var(--space-lg);
    font-size: var(--text-sm);
    line-height: 1.5;
}

.mindset-table__cell--old {
    color: var(--color-text-muted);
    font-style: italic;
}

.mindset-table__cell--new {
    color: var(--color-text-primary);
    font-weight: 500;
}

.mindset-table__arrow {
    color: var(--color-accent);
    font-weight: bold;
    padding: 0 var(--space-sm);
    font-size: var(--text-lg);
}

/* Process section */
.process-section {
    margin-bottom: var(--space-xl);
}

.process-section h3 {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    color: var(--color-text-primary);
    margin-bottom: var(--space-lg);
}

/* Horizontal stepper */
.process-stepper {
    display: flex;
    justify-content: space-between;
    position: relative;
    padding: var(--space-md) 0;
    overflow-x: auto;
    gap: var(--space-xs);
}

/* Connecting line */
.process-stepper::before {
    content: '';
    position: absolute;
    top: calc(var(--space-md) + 16px);
    left: 24px;
    right: 24px;
    height: 2px;
    background: var(--color-border);
    z-index: 0;
}

.process-stepper .process-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    flex: 1;
    min-width: 80px;
    position: relative;
    z-index: 1;
}

.process-step__number {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-secondary);
    border: 2px solid var(--color-accent);
    border-radius: 50%;
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-accent);
    transition: all var(--transition-fast);
}

.process-stepper .process-step:hover .process-step__number {
    background: var(--color-accent);
    color: var(--color-bg-primary);
    transform: scale(1.1);
}

.process-step__label {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    text-align: center;
    line-height: 1.3;
    max-width: 80px;
}

.process-stepper .process-step:hover .process-step__label {
    color: var(--color-text-primary);
}

/* Responsive adjustments for hackathon page */
@media (max-width: 768px) {
    .insight-box {
        flex-direction: column;
        text-align: center;
        padding: var(--space-lg);
    }
    
    .insight-box__text {
        font-size: var(--text-base);
    }
    
    /* Stack table on mobile */
    .mindset-table__header {
        display: none;
    }
    
    .mindset-table__row {
        display: flex;
        flex-direction: column;
        padding: var(--space-md);
        gap: var(--space-sm);
    }
    
    .mindset-table__cell {
        padding: var(--space-sm);
    }
    
    .mindset-table__cell--old {
        font-size: var(--text-xs);
    }
    
    .mindset-table__cell--old::before {
        content: 'Old: ';
        color: var(--color-text-muted);
        font-style: normal;
    }
    
    .mindset-table__cell--new::before {
        content: 'New: ';
        color: var(--color-success);
        font-weight: 600;
    }
    
    .mindset-table__arrow {
        align-self: center;
        transform: rotate(90deg);
    }
    
    /* Stepper scrolls horizontally on mobile */
    .process-stepper {
        justify-content: flex-start;
        padding-bottom: var(--space-md);
    }
    
    .process-stepper .process-step {
        min-width: 70px;
    }
}

@media (max-width: 480px) {
    .process-step__number {
        width: 28px;
        height: 28px;
        font-size: var(--text-xs);
    }
    
    .process-step__label {
        font-size: 0.65rem;
        max-width: 60px;
    }
}

/* ============================================
   Page 3: Prompt vs Automate vs Build
   ============================================ */

/* Options grid */
.options-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    margin-bottom: var(--space-2xl);
}

/* Option cards */
.option-card {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    transition: all var(--transition-fast);
}

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

.option-card__header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-lg);
    border-bottom: 1px solid var(--color-border);
}

.option-card__icon {
    font-size: 1.5rem;
}

.option-card__title {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
}

.option-card__body {
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

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

.option-card__label {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.option-card__value {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.option-card__tools {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-text-primary);
}

/* Card color variants */
.option-card--prompt {
    border-top: 3px solid #60a5fa; /* Blue */
}

.option-card--prompt .option-card__header {
    background: rgba(96, 165, 250, 0.1);
}

.option-card--prompt .option-card__title {
    color: #60a5fa;
}

.option-card--automate {
    border-top: 3px solid #a78bfa; /* Purple */
}

.option-card--automate .option-card__header {
    background: rgba(167, 139, 250, 0.1);
}

.option-card--automate .option-card__title {
    color: #a78bfa;
}

.option-card--build {
    border-top: 3px solid var(--color-success); /* Green */
}

.option-card--build .option-card__header {
    background: rgba(52, 211, 153, 0.1);
}

.option-card--build .option-card__title {
    color: var(--color-success);
}

/* Decision tree */
.decision-tree {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: var(--space-xl);
    margin-bottom: var(--space-xl);
}

.decision-tree h3 {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    color: var(--color-text-primary);
    margin-bottom: var(--space-lg);
}

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

.decision-tree__item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--color-bg-elevated);
    border-radius: var(--border-radius);
    transition: background var(--transition-fast);
}

.decision-tree__item:hover {
    background: var(--color-bg-hover);
}

.decision-tree__question {
    flex: 1;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.decision-tree__arrow,
.decision-tree__branch {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--color-accent);
    flex-shrink: 0;
}

.decision-tree__answer {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 600;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--border-radius);
    flex-shrink: 0;
}

.decision-tree__answer--prompt {
    background: rgba(96, 165, 250, 0.15);
    color: #60a5fa;
}

.decision-tree__answer--automate {
    background: rgba(167, 139, 250, 0.15);
    color: #a78bfa;
}

.decision-tree__answer--build {
    background: rgba(52, 211, 153, 0.15);
    color: var(--color-success);
}

/* Workshop note */
.workshop-note {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: linear-gradient(
        135deg,
        rgba(52, 211, 153, 0.1) 0%,
        rgba(52, 211, 153, 0.05) 100%
    );
    border: 1px solid rgba(52, 211, 153, 0.3);
    border-left: 4px solid var(--color-success);
    border-radius: var(--border-radius-lg);
}

.workshop-note__icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.workshop-note__content p {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.workshop-note__content p:first-child {
    color: var(--color-text-primary);
    margin-bottom: var(--space-xs);
}

.workshop-note__content strong {
    color: var(--color-success);
}

/* Responsive adjustments for options page */
@media (max-width: 900px) {
    .options-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
    
    .option-card {
        display: grid;
        grid-template-columns: auto 1fr;
    }
    
    .option-card__header {
        flex-direction: column;
        justify-content: center;
        border-bottom: none;
        border-right: 1px solid var(--color-border);
        padding: var(--space-lg);
    }
    
    .option-card__body {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md);
    }
}

@media (max-width: 600px) {
    .option-card {
        display: block;
    }
    
    .option-card__header {
        flex-direction: row;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
    }
    
    .option-card__body {
        display: flex;
        flex-direction: column;
    }
    
    .decision-tree__item {
        flex-wrap: wrap;
    }
    
    .decision-tree__question {
        flex: 1 1 100%;
        margin-bottom: var(--space-xs);
    }
    
    .workshop-note {
        flex-direction: column;
    }
}

/* ============================================
   Page 4: Pair Up
   ============================================ */

/* Instructions card */
.instructions-card {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: var(--space-xl);
    margin-bottom: var(--space-xl);
}

.instructions-card h3 {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    color: var(--color-text-primary);
    margin-bottom: var(--space-md);
}

.instructions-list {
    margin: 0;
    padding-left: var(--space-xl);
}

.instructions-list li {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    padding: var(--space-xs) 0;
    line-height: 1.6;
}

.instructions-list li::marker {
    color: var(--color-accent);
    font-weight: bold;
}

/* Timer section */
.timer-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
    margin-bottom: var(--space-2xl);
    padding: var(--space-xl);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
}

/* Timer display */
.timer-display {
    position: relative;
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.timer-display__time {
    font-family: var(--font-mono);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-text-primary);
    z-index: 1;
}

.timer-display__ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.timer-ring__bg {
    fill: none;
    stroke: var(--color-bg-elevated);
    stroke-width: 6;
}

.timer-ring__progress {
    fill: none;
    stroke: var(--color-accent);
    stroke-width: 6;
    stroke-linecap: round;
    stroke-dasharray: 283;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 0.5s ease, stroke 0.3s ease;
}

/* Timer states */
.timer-display--warning .timer-display__time {
    color: var(--color-accent);
    animation: pulse 1s ease infinite;
}

.timer-display--warning .timer-ring__progress {
    stroke: var(--color-accent);
}

.timer-display--done .timer-display__time {
    color: var(--color-success);
}

.timer-display--done .timer-ring__progress {
    stroke: var(--color-success);
}

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

/* Timer button */
.timer-btn {
    padding: var(--space-md) var(--space-2xl);
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-bg-primary);
    background: var(--color-accent);
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.timer-btn:hover {
    background: var(--color-accent-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

.timer-btn--running {
    background: var(--color-text-muted);
}

.timer-btn--running:hover {
    background: var(--color-text-secondary);
    box-shadow: none;
}

/* Pairing form */
.pairing-form {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: var(--space-xl);
    margin-bottom: var(--space-xl);
}

.pairing-form h3 {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    color: var(--color-text-primary);
    margin-bottom: var(--space-lg);
}

/* Pairing options (radio buttons) */
.pairing-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

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

.pairing-option:hover {
    border-color: var(--color-text-muted);
    background: var(--color-bg-hover);
}

.pairing-option input {
    position: absolute;
    opacity: 0;
}

.pairing-option__radio {
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-border);
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
    transition: all var(--transition-fast);
}

.pairing-option input:checked + .pairing-option__radio {
    border-color: var(--color-accent);
}

.pairing-option input:checked + .pairing-option__radio::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background: var(--color-accent);
    border-radius: 50%;
}

.pairing-option__label {
    font-size: var(--text-base);
    color: var(--color-text-primary);
}

.pairing-option input:checked ~ .pairing-option__label {
    color: var(--color-accent);
    font-weight: 500;
}

/* Partner fields (conditional) */
.partner-fields {
    display: none;
    flex-direction: column;
    gap: var(--space-md);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border);
    animation: slideDown var(--transition-base) ease-out;
}

.partner-fields--visible {
    display: flex;
}

.partner-fields__note {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin: 0;
}

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

.partner-field label {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.partner-field input {
    padding: var(--space-md);
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text-primary);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    transition: all var(--transition-fast);
}

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

.partner-field input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-muted);
}

/* Solo note */
.solo-note {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: var(--color-bg-elevated);
    border: 1px dashed var(--color-border);
    border-radius: var(--border-radius);
}

.solo-note__icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.solo-note p {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

/* Responsive adjustments for pair up page */
@media (max-width: 600px) {
    .timer-display {
        width: 120px;
        height: 120px;
    }
    
    .timer-display__time {
        font-size: var(--text-xl);
    }
    
    .pairing-options {
        gap: var(--space-sm);
    }
    
    .pairing-option {
        padding: var(--space-md);
    }
    
    .solo-note {
        flex-direction: column;
        text-align: center;
    }
}

/* ============================================
   Page 5: Pick Your Idea
   ============================================ */

/* Idea paths container */
.idea-paths {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}

/* Individual idea path card */
.idea-path {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    transition: all var(--transition-fast);
}

.idea-path:hover {
    border-color: var(--color-text-muted);
}

.idea-path--selected {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 1px var(--color-accent);
}

.idea-path--recommended {
    border-color: var(--color-success);
}

.idea-path--recommended.idea-path--selected {
    border-color: var(--color-success);
    box-shadow: 0 0 0 1px var(--color-success);
}

/* Path header (clickable) */
.idea-path__header {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background var(--transition-fast);
}

.idea-path__header:hover {
    background: var(--color-bg-elevated);
}

.idea-path__indicator {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-elevated);
    border: 2px solid var(--color-border);
    border-radius: 50%;
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-text-secondary);
    flex-shrink: 0;
    transition: all var(--transition-fast);
}

.idea-path--selected .idea-path__indicator {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-bg-primary);
}

.idea-path--recommended .idea-path__indicator {
    border-color: var(--color-success);
}

.idea-path--recommended.idea-path--selected .idea-path__indicator {
    background: var(--color-success);
    border-color: var(--color-success);
}

.idea-path__title {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.idea-path__name {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-text-primary);
}

.idea-path__badge {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-success);
    background: rgba(52, 211, 153, 0.15);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--border-radius);
}

.idea-path__chevron {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    transition: transform var(--transition-fast);
}

.idea-path--expanded .idea-path__chevron {
    transform: rotate(180deg);
}

/* Path content (expandable) */
.idea-path__content {
    display: none;
    padding: 0 var(--space-lg) var(--space-lg);
    border-top: 1px solid var(--color-border);
    animation: slideDown var(--transition-base) ease-out;
}

.idea-path--expanded .idea-path__content {
    display: block;
}

/* Idea form fields */
.idea-field {
    margin-top: var(--space-lg);
}

.idea-field label {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-primary);
    margin-bottom: var(--space-sm);
}

.idea-field textarea {
    width: 100%;
    padding: var(--space-md);
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text-primary);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    resize: vertical;
    transition: all var(--transition-fast);
}

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

.idea-field textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-muted);
}

/* Brainstorm prompt */
.brainstorm-prompt {
    padding: var(--space-lg);
    background: var(--color-accent-muted);
    border-radius: var(--border-radius);
    margin-top: var(--space-lg);
}

.brainstorm-prompt p {
    margin: 0;
    font-size: var(--text-base);
    color: var(--color-text-primary);
}

.brainstorm-prompt .brainstorm-hint {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin-top: var(--space-xs);
}

/* Default project styling */
.default-project {
    margin-top: var(--space-lg);
}

.default-project__title {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-success);
    margin: 0 0 var(--space-lg) 0;
}

.default-project__what {
    padding: var(--space-md);
    background: var(--color-bg-elevated);
    border-radius: var(--border-radius);
    margin-bottom: var(--space-lg);
}

.default-project__what strong {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    color: var(--color-text-primary);
}

.default-project__what p {
    margin: var(--space-xs) 0 0 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

/* Personas grid */
.personas-grid {
    margin-bottom: var(--space-lg);
}

.personas-grid h5 {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-md) 0;
}

.persona {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--color-bg-elevated);
    border-radius: var(--border-radius);
    margin-bottom: var(--space-sm);
    transition: transform var(--transition-fast);
}

.persona:hover {
    transform: translateX(4px);
}

.persona__icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.persona__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.persona__name {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-primary);
}

.persona__voice {
    font-size: var(--text-sm);
    font-style: italic;
    color: var(--color-text-secondary);
}

/* Why useful */
.default-project__why {
    margin-bottom: var(--space-lg);
}

.default-project__why h5 {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-sm) 0;
}

.default-project__why ul {
    margin: 0;
    padding-left: var(--space-lg);
}

.default-project__why li {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    padding: var(--space-xs) 0;
    line-height: 1.5;
}

.default-project__why li::marker {
    color: var(--color-success);
}

.default-project__why em {
    color: var(--color-accent);
    font-style: normal;
}

/* Input/Output display */
.default-project__io {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
}

.io-item {
    display: flex;
    gap: var(--space-sm);
}

.io-item__label {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-primary);
    flex-shrink: 0;
}

.io-item__value {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

/* Stuck section */
.stuck-section {
    margin-top: var(--space-xl);
}

.stuck-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    width: 100%;
    padding: var(--space-md) var(--space-lg);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    cursor: pointer;
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    text-align: left;
    transition: all var(--transition-fast);
}

.stuck-toggle:hover {
    background: var(--color-bg-elevated);
    color: var(--color-text-primary);
}

.stuck-toggle__icon {
    font-size: 1.1em;
}

.stuck-toggle__chevron {
    margin-left: auto;
    transition: transform var(--transition-fast);
}

.stuck-toggle--open .stuck-toggle__chevron {
    transform: rotate(180deg);
}

.stuck-content {
    display: none;
    padding: var(--space-lg);
    margin-top: var(--space-sm);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
}

.stuck-content--open {
    display: block;
    animation: slideDown var(--transition-base) ease-out;
}

.stuck-item {
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--color-border);
}

.stuck-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.stuck-item:first-child {
    padding-top: 0;
}

.stuck-item strong {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    display: block;
    margin-bottom: var(--space-xs);
}

.stuck-item p {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

/* Responsive adjustments for idea page */
@media (max-width: 600px) {
    .idea-path__header {
        padding: var(--space-md);
    }
    
    .idea-path__content {
        padding: 0 var(--space-md) var(--space-md);
    }
    
    .idea-path__title {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-xs);
    }
    
    .personas-grid {
        overflow-x: auto;
    }
    
    .persona {
        min-width: 200px;
    }
    
    .default-project__io {
        flex-direction: column;
    }
    
    .io-item {
        flex-direction: column;
        gap: var(--space-xs);
    }
}

/* ============================================
   Page 6: The 6 Capabilities Test
   ============================================ */

/* Idea display at top of page */
.idea-display {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.idea-display__content strong {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.idea-display__content p {
    margin: var(--space-sm) 0 0 0;
    font-size: var(--text-base);
    color: var(--color-text-primary);
    line-height: 1.6;
}

.idea-display--empty {
    background: rgba(248, 113, 113, 0.08);
    border-color: rgba(248, 113, 113, 0.3);
}

.idea-display__empty p {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    text-align: center;
}

.idea-display__empty a {
    color: var(--color-accent);
    text-decoration: underline;
}

.idea-display__empty a:hover {
    color: var(--color-accent-hover);
}

.capabilities-test {
    margin-bottom: var(--space-2xl);
}

/* Capabilities list */
.capabilities-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-xl);
}

/* Individual capability item */
.capability-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.capability-item:hover {
    background: var(--color-bg-elevated);
    border-color: var(--color-text-muted);
}

.capability-item--checked {
    background: rgba(52, 211, 153, 0.08);
    border-color: var(--color-success);
}

.capability-item--checked:hover {
    background: rgba(52, 211, 153, 0.12);
}

/* Capability checkbox */
.capability-item__checkbox {
    position: relative;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.capability-item__checkbox input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 1;
}

.capability-checkmark {
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    background: var(--color-bg-primary);
    border: 2px solid var(--color-border);
    border-radius: 6px;
    transition: all var(--transition-fast);
}

.capability-item:hover .capability-checkmark {
    border-color: var(--color-text-muted);
}

.capability-item__checkbox input:checked + .capability-checkmark {
    background: var(--color-success);
    border-color: var(--color-success);
}

.capability-checkmark::after {
    content: '';
    position: absolute;
    display: none;
    left: 7px;
    top: 3px;
    width: 6px;
    height: 11px;
    border: solid var(--color-bg-primary);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.capability-item__checkbox input:checked + .capability-checkmark::after {
    display: block;
}

/* Capability number */
.capability-item__number {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-elevated);
    border-radius: 50%;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.capability-item--checked .capability-item__number {
    background: var(--color-success);
    color: var(--color-bg-primary);
}

/* Capability content */
.capability-item__content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.capability-item__name {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-text-primary);
}

.capability-item__question {
    font-size: var(--text-sm);
    font-style: italic;
    color: var(--color-text-secondary);
}

/* Verdict display */
.verdict-display {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-lg) var(--space-xl);
    background: var(--color-bg-secondary);
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    transition: all var(--transition-base);
}

.verdict-display--prompt {
    border-color: #60a5fa;
    background: rgba(96, 165, 250, 0.08);
}

.verdict-display--build {
    border-color: var(--color-success);
    background: rgba(52, 211, 153, 0.08);
}

.verdict-count {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-right: var(--space-lg);
    border-right: 1px solid var(--color-border);
}

.verdict-count__number {
    font-family: var(--font-mono);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1;
}

.verdict-display--build .verdict-count__number {
    color: var(--color-success);
}

.verdict-display--prompt .verdict-count__number {
    color: #60a5fa;
}

.verdict-count__label {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    white-space: nowrap;
}

.verdict-message {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex: 1;
}

.verdict-arrow {
    font-size: var(--text-lg);
    color: var(--color-accent);
}

.verdict-text {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
}

.verdict-text strong {
    font-family: var(--font-heading);
    color: var(--color-text-primary);
}

.verdict-display--build .verdict-text strong {
    color: var(--color-success);
}

.verdict-display--prompt .verdict-text strong {
    color: #60a5fa;
}

/* Worked example */
.worked-example {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: var(--space-xl);
}

.worked-example h3 {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-lg) 0;
}

.example-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.example-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-bg-elevated);
    border-radius: var(--border-radius);
    font-size: var(--text-sm);
}

.example-item__icon {
    font-family: var(--font-mono);
    font-weight: bold;
    flex-shrink: 0;
}

.example-item--checked .example-item__icon {
    color: var(--color-success);
}

.example-item--unchecked .example-item__icon {
    color: var(--color-text-muted);
}

.example-item--checked .example-item__text {
    color: var(--color-text-primary);
}

.example-item--unchecked .example-item__text {
    color: var(--color-text-muted);
    text-decoration: line-through;
    text-decoration-color: var(--color-border);
}

.example-verdict {
    padding: var(--space-md);
    background: rgba(52, 211, 153, 0.1);
    border-left: 3px solid var(--color-success);
    border-radius: var(--border-radius);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.example-verdict strong {
    font-family: var(--font-heading);
    color: var(--color-success);
}

/* Responsive adjustments for capabilities page */
@media (max-width: 768px) {
    .capability-item {
        padding: var(--space-md);
    }
    
    .capability-item__content {
        gap: 0;
    }
    
    .capability-item__name {
        font-size: var(--text-sm);
    }
    
    .capability-item__question {
        font-size: var(--text-xs);
    }
    
    .verdict-display {
        flex-direction: column;
        text-align: center;
        padding: var(--space-lg);
    }
    
    .verdict-count {
        padding-right: 0;
        padding-bottom: var(--space-md);
        border-right: none;
        border-bottom: 1px solid var(--color-border);
        flex-direction: row;
        gap: var(--space-sm);
    }
    
    .verdict-message {
        flex-direction: column;
    }
    
    .example-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   Page 7: Break It Into Pieces
   ============================================ */

/* Jargon section */
.jargon-section {
    margin-bottom: var(--space-2xl);
}

.jargon-section h3 {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-lg) 0;
}

/* Jargon table */
.jargon-table {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}

.jargon-row {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1.5fr;
    border-bottom: 1px solid var(--color-border);
}

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

.jargon-row--header {
    background: var(--color-bg-elevated);
}

.jargon-row--header .jargon-cell {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.jargon-cell {
    padding: var(--space-md) var(--space-lg);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.jargon-term {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--color-accent);
}

.jargon-example {
    font-style: italic;
    color: var(--color-text-muted);
}

/* Prompt skeleton */
.prompt-skeleton {
    margin-bottom: var(--space-2xl);
}

.prompt-skeleton h3 {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-lg) 0;
}

.prompt-box {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: var(--space-lg);
}

.prompt-intro {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-md) 0;
}

.prompt-template {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: var(--space-lg);
    margin: 0 0 var(--space-lg) 0;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-x: auto;
}

/* Copy button */
.copy-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-primary);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.copy-btn:hover {
    background: var(--color-bg-hover);
    border-color: var(--color-text-muted);
}

.copy-btn--success {
    background: rgba(52, 211, 153, 0.15);
    border-color: var(--color-success);
    color: var(--color-success);
}

.copy-btn__icon {
    font-size: 1em;
}

/* Breakdown section */
.breakdown-section {
    margin-bottom: var(--space-2xl);
}

.breakdown-section h3 {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-lg) 0;
}

/* Breakdown table */
.breakdown-table {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}

.breakdown-row {
    display: grid;
    grid-template-columns: 140px 1fr;
    border-bottom: 1px solid var(--color-border);
}

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

.breakdown-row--header {
    background: var(--color-bg-elevated);
}

.breakdown-row--header .breakdown-cell {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.breakdown-cell {
    padding: var(--space-md) var(--space-lg);
    font-size: var(--text-sm);
}

.breakdown-piece {
    font-family: var(--font-heading);
    font-weight: 500;
    color: var(--color-text-primary);
    background: var(--color-bg-elevated);
}

.breakdown-easiest {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--color-text-secondary);
}

.easiest-badge {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-success);
    background: rgba(52, 211, 153, 0.15);
    padding: 2px var(--space-sm);
    border-radius: var(--border-radius);
    flex-shrink: 0;
}

/* Easiest callout */
.easiest-callout {
    display: flex;
    align-items: flex-start;
    gap: var(--space-lg);
    padding: var(--space-xl);
    background: linear-gradient(
        135deg,
        rgba(52, 211, 153, 0.12) 0%,
        rgba(52, 211, 153, 0.05) 100%
    );
    border: 2px solid var(--color-success);
    border-radius: var(--border-radius-lg);
}

.easiest-callout__icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.easiest-callout__content {
    flex: 1;
}

.easiest-callout__title {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-success);
    margin: 0 0 var(--space-xs) 0;
}

.easiest-callout__text {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    margin: 0;
}

/* Responsive adjustments for breakdown page */
@media (max-width: 768px) {
    .jargon-row {
        grid-template-columns: 1fr;
    }
    
    .jargon-row--header {
        display: none;
    }
    
    .jargon-cell {
        padding: var(--space-sm) var(--space-md);
    }
    
    .jargon-row {
        padding: var(--space-md);
        display: flex;
        flex-direction: column;
        gap: var(--space-xs);
    }
    
    .jargon-term::after {
        content: ':';
    }
    
    .breakdown-row {
        grid-template-columns: 1fr;
    }
    
    .breakdown-row--header {
        display: none;
    }
    
    .breakdown-piece {
        border-bottom: 1px solid var(--color-border);
    }
    
    .breakdown-easiest {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-xs);
    }
    
    .easiest-callout {
        flex-direction: column;
        padding: var(--space-lg);
    }
    
    .easiest-callout__icon {
        font-size: 1.5rem;
    }
}

/* Scope form */
.scope-form {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: var(--space-xl);
    margin-top: var(--space-xl);
}

.scope-form h3 {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-lg) 0;
}

.scope-field {
    margin-bottom: var(--space-lg);
}

.scope-field:last-child {
    margin-bottom: 0;
}

.scope-field label {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--space-sm);
}

.scope-field textarea {
    width: 100%;
    padding: var(--space-md);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    resize: vertical;
    transition: all var(--transition-fast);
}

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

.scope-field textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-muted);
}

/* ============================================
   Page 8: Define Your MVP
   ============================================ */

/* MVP principle callout */
.mvp-principle {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-lg) var(--space-xl);
    background: linear-gradient(
        135deg,
        rgba(245, 166, 35, 0.12) 0%,
        rgba(245, 166, 35, 0.05) 100%
    );
    border: 2px solid var(--color-accent);
    border-radius: var(--border-radius-lg);
    margin-bottom: var(--space-2xl);
}

.mvp-principle__icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.mvp-principle__text {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    color: var(--color-text-primary);
    margin: 0;
}

.mvp-principle__text strong {
    color: var(--color-accent);
}

/* MVP example section */
.mvp-example {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: var(--space-xl);
    margin-bottom: var(--space-2xl);
}

.mvp-example h3 {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-lg) 0;
}

/* MVP split layout */
.mvp-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.mvp-does,
.mvp-doesnt {
    background: var(--color-bg-elevated);
    border-radius: var(--border-radius);
    padding: var(--space-lg);
}

.mvp-does {
    border-left: 3px solid var(--color-success);
}

.mvp-doesnt {
    border-left: 3px solid var(--color-error);
}

.mvp-list__title {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 700;
    margin: 0 0 var(--space-md) 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mvp-list__title--does {
    color: var(--color-success);
}

.mvp-list__title--doesnt {
    color: var(--color-error);
}

.mvp-list__icon {
    font-size: 1em;
}

.mvp-list {
    margin: 0;
    padding-left: var(--space-lg);
    list-style: none;
}

.mvp-list li {
    position: relative;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    padding: var(--space-xs) 0;
    line-height: 1.5;
}

.mvp-does .mvp-list li::before {
    content: '•';
    position: absolute;
    left: calc(-1 * var(--space-md));
    color: var(--color-success);
}

.mvp-doesnt .mvp-list li {
    text-decoration: line-through;
    text-decoration-color: var(--color-border);
    color: var(--color-text-muted);
}

.mvp-doesnt .mvp-list li::before {
    content: '•';
    position: absolute;
    left: calc(-1 * var(--space-md));
    color: var(--color-error);
}

/* The one thing highlight */
.the-one-thing {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: linear-gradient(
        90deg,
        rgba(52, 211, 153, 0.15) 0%,
        rgba(52, 211, 153, 0.05) 100%
    );
    border: 1px solid var(--color-success);
    border-radius: var(--border-radius);
}

.the-one-thing__label {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-success);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}

.the-one-thing__text {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--color-text-primary);
}

/* MVP form */
.mvp-form {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: var(--space-xl);
}

.mvp-form h3 {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-lg) 0;
}

.mvp-form__section {
    margin-bottom: var(--space-xl);
}

.mvp-form__section:last-child {
    margin-bottom: 0;
}

.mvp-form__section--highlight {
    padding: var(--space-lg);
    background: rgba(52, 211, 153, 0.08);
    border: 1px solid rgba(52, 211, 153, 0.3);
    border-radius: var(--border-radius);
}

.mvp-form__label {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--space-sm);
}

.mvp-form__section--highlight .mvp-form__label {
    color: var(--color-success);
}

.mvp-form__hint {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-md) 0;
    font-style: italic;
}

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

.mvp-form__input {
    width: 100%;
    padding: var(--space-md);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    transition: all var(--transition-fast);
}

.mvp-form__input::placeholder {
    color: var(--color-text-muted);
}

.mvp-form__input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-muted);
}

.mvp-form__input--large {
    font-size: var(--text-base);
    padding: var(--space-md) var(--space-lg);
}

.mvp-form__section--highlight .mvp-form__input:focus {
    border-color: var(--color-success);
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.15);
}

/* MVP Form with textareas */
.mvp-form__field {
    margin-bottom: var(--space-xl);
}

.mvp-form__field:last-child {
    margin-bottom: 0;
}

.mvp-form__label-icon {
    display: inline-block;
    margin-right: var(--space-xs);
    color: var(--color-success);
}

.mvp-form__label-icon--cut {
    color: var(--color-error);
}

.mvp-form__textarea {
    width: 100%;
    padding: var(--space-md);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    resize: vertical;
    min-height: 100px;
    line-height: 1.6;
}

.mvp-form__textarea::placeholder {
    color: var(--color-text-muted);
}

.mvp-form__textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-muted);
}

.mvp-form__field--highlight {
    padding: var(--space-lg);
    background: rgba(52, 211, 153, 0.08);
    border: 1px solid rgba(52, 211, 153, 0.3);
    border-radius: var(--border-radius);
}

.mvp-form__field--highlight .mvp-form__label {
    color: var(--color-success);
}

.mvp-form__textarea--highlight {
    min-height: 60px;
}

.mvp-form__textarea--highlight:focus {
    border-color: var(--color-success);
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.15);
}

/* Responsive adjustments for MVP page */
@media (max-width: 768px) {
    .mvp-principle {
        flex-direction: column;
        text-align: center;
        padding: var(--space-lg);
    }
    
    .mvp-principle__icon {
        font-size: 1.5rem;
    }
    
    .mvp-principle__text {
        font-size: var(--text-base);
    }
    
    .mvp-split {
        grid-template-columns: 1fr;
    }
    
    .the-one-thing {
        flex-direction: column;
        text-align: center;
    }
    
    .mvp-form__section--highlight {
        padding: var(--space-md);
    }
}

/* ============================================
   Page 9: Your Task List
   ============================================ */

/* Project summary */
.project-summary {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: var(--space-xl);
    margin-bottom: var(--space-2xl);
}

.project-summary__title {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-lg) 0;
}

.project-summary__warning {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: var(--border-radius);
    margin-bottom: var(--space-lg);
    font-size: var(--text-sm);
    color: var(--color-warning);
}

.project-summary__warning-icon {
    flex-shrink: 0;
}

.project-summary__warning a {
    color: var(--color-accent);
    text-decoration: underline;
}

.project-summary__warning a:hover {
    color: var(--color-text-primary);
}

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

.project-summary__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-md);
    background: var(--color-bg-primary);
    border-radius: var(--border-radius);
}

.project-summary__item--highlight {
    background: rgba(52, 211, 153, 0.08);
    border: 1px solid rgba(52, 211, 153, 0.3);
}

.project-summary__label {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.project-summary__item--highlight .project-summary__label {
    color: var(--color-success);
}

.project-summary__value {
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    line-height: 1.5;
    white-space: pre-wrap;
}

.project-summary__value--empty {
    color: var(--color-text-muted);
    font-style: italic;
}

/* Task progress bar */
.task-progress {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    margin-bottom: var(--space-2xl);
    padding: var(--space-lg);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
}

.task-progress__bar {
    flex: 1;
    height: 12px;
    background: var(--color-bg-elevated);
    border-radius: 6px;
    overflow: hidden;
}

.task-progress__bar--complete {
    box-shadow: 0 0 12px rgba(52, 211, 153, 0.4);
}

.task-progress__fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--color-accent), var(--color-success));
    border-radius: 6px;
    transition: width var(--transition-base);
}

.task-progress__bar--complete .task-progress__fill {
    background: var(--color-success);
}

.task-progress__text {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Task list container */
.task-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    margin-bottom: var(--space-2xl);
}

/* Task section */
.task-section {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}

.task-section__title {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-text-primary);
    background: var(--color-bg-elevated);
    border-bottom: 1px solid var(--color-border);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.task-section__icon {
    font-size: 1.1em;
}

.task-items {
    display: flex;
    flex-direction: column;
}

/* Individual task item */
.task-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    cursor: pointer;
    border-bottom: 1px solid var(--color-border);
    transition: all var(--transition-fast);
}

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

.task-item:hover {
    background: var(--color-bg-elevated);
}

.task-item--completed {
    background: rgba(52, 211, 153, 0.05);
}

.task-item--completed:hover {
    background: rgba(52, 211, 153, 0.08);
}

.task-item--completed .task-text {
    color: var(--color-text-muted);
    text-decoration: line-through;
    text-decoration-color: var(--color-border);
}

/* Checkpoint styling */
.task-item--checkpoint {
    background: rgba(245, 166, 35, 0.05);
    border-left: 3px solid var(--color-accent);
}

.task-item--checkpoint:hover {
    background: rgba(245, 166, 35, 0.08);
}

.task-item--checkpoint .task-text {
    font-weight: 600;
    color: var(--color-accent);
}

.task-item--checkpoint.task-item--completed {
    background: rgba(52, 211, 153, 0.1);
    border-left-color: var(--color-success);
}

.task-item--checkpoint.task-item--completed .task-text {
    color: var(--color-success);
    text-decoration: none;
}

/* Final checkpoint */
.task-item--final .task-text {
    font-size: var(--text-base);
}

.task-item--final.task-item--completed {
    background: rgba(52, 211, 153, 0.15);
}

/* Task checkbox */
.task-item input[type="checkbox"] {
    position: absolute;
    opacity: 0;
}

.task-checkbox {
    width: 22px;
    height: 22px;
    border: 2px solid var(--color-border);
    border-radius: 6px;
    flex-shrink: 0;
    position: relative;
    transition: all var(--transition-fast);
}

.task-item:hover .task-checkbox {
    border-color: var(--color-text-muted);
}

.task-item input:checked + .task-checkbox {
    background: var(--color-success);
    border-color: var(--color-success);
}

.task-checkbox::after {
    content: '';
    position: absolute;
    display: none;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid var(--color-bg-primary);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.task-item input:checked + .task-checkbox::after {
    display: block;
}

/* Task number */
.task-number {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.task-item--completed .task-number {
    background: var(--color-success);
    border-color: var(--color-success);
    color: var(--color-bg-primary);
}

/* Task text */
.task-text {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    flex: 1;
    line-height: 1.4;
}

/* Start building button */
.start-building-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    width: 100%;
    padding: var(--space-lg) var(--space-xl);
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-bg-primary);
    background: linear-gradient(135deg, var(--color-success) 0%, #2fc98a 100%);
    border: none;
    border-radius: var(--border-radius-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.start-building-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(52, 211, 153, 0.35);
}

.start-building-btn:active {
    transform: translateY(-1px);
}

.start-building-btn__icon {
    font-size: 1.3em;
}

.start-building-btn__arrow {
    font-size: 1.2em;
    transition: transform var(--transition-fast);
}

.start-building-btn:hover .start-building-btn__arrow {
    transform: translateX(4px);
}

/* Responsive adjustments for task list page */
@media (max-width: 768px) {
    .task-progress {
        flex-direction: column;
        gap: var(--space-md);
    }
    
    .task-progress__bar {
        width: 100%;
    }
    
    .task-item {
        padding: var(--space-md);
    }
    
    .task-text {
        font-size: var(--text-xs);
    }
    
    .task-number {
        width: 20px;
        height: 20px;
        font-size: 0.65rem;
    }
    
    .task-checkbox {
        width: 20px;
        height: 20px;
    }
    
    .start-building-btn {
        padding: var(--space-md) var(--space-lg);
        font-size: var(--text-base);
    }
}

/* ============================================
   Page 10: Build
   ============================================ */

/* Two-column layout */
.build-page {
    display: grid;
    grid-template-columns: 60% 40%;
    gap: var(--space-xl);
    min-height: calc(100vh - 200px);
}

/* Left column - Tasks */
.build-tasks {
    display: flex;
    flex-direction: column;
}

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

.build-tasks__header h2 {
    margin: 0;
    font-size: var(--text-xl);
}

/* Build progress bar */
.build-progress {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.build-progress__bar {
    width: 120px;
    height: 8px;
    background: var(--color-bg-elevated);
    border-radius: 4px;
    overflow: hidden;
}

.build-progress__fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--color-accent), var(--color-success));
    border-radius: 4px;
    transition: width var(--transition-base);
}

.build-progress__text {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.celebration {
    margin: var(--space-md) 0;
    padding: var(--space-sm) var(--space-md);
    font-weight: 600;
    color: var(--color-accent, #0a0);
}

/* Build task list */
.build-task-list {
    flex: 1;
    overflow-y: auto;
    margin-bottom: var(--space-lg);
}

/* Build section */
.build-section {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    margin-bottom: var(--space-md);
    overflow: hidden;
}

.build-section__header {
    padding: var(--space-sm) var(--space-md);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-text-primary);
    background: var(--color-bg-elevated);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Individual build task */
.build-task {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    cursor: pointer;
    border-bottom: 1px solid var(--color-border);
    transition: all var(--transition-fast);
}

.build-task:last-child {
    border-bottom: none;
}

.build-task:hover {
    background: var(--color-bg-elevated);
}

.build-task--completed {
    background: rgba(52, 211, 153, 0.05);
}

.build-task--completed .build-task__text {
    color: var(--color-text-muted);
    text-decoration: line-through;
    text-decoration-color: var(--color-border);
}

/* Checkpoint styling */
.build-task--checkpoint {
    background: rgba(245, 166, 35, 0.08);
    border-left: 3px solid var(--color-accent);
}

.build-task--checkpoint .build-task__text {
    font-weight: 600;
    color: var(--color-accent);
}

.build-task--checkpoint.build-task--completed {
    background: rgba(52, 211, 153, 0.12);
    border-left-color: var(--color-success);
}

.build-task--checkpoint.build-task--completed .build-task__text {
    color: var(--color-success);
    text-decoration: none;
}

/* Celebrating animation */
.build-task--celebrating {
    animation: celebrate 1s ease;
}

@keyframes celebrate {
    0%, 100% { transform: scale(1); background: rgba(52, 211, 153, 0.12); }
    50% { transform: scale(1.02); background: rgba(52, 211, 153, 0.25); }
}

/* Final task */
.build-task--final .build-task__text {
    font-size: var(--text-base);
}

.build-task--final.build-task--completed {
    background: rgba(52, 211, 153, 0.2);
}

/* Build task checkbox */
.build-task input[type="checkbox"] {
    position: absolute;
    opacity: 0;
}

.build-task__check {
    width: 18px;
    height: 18px;
    border: 2px solid var(--color-border);
    border-radius: 4px;
    flex-shrink: 0;
    position: relative;
    transition: all var(--transition-fast);
}

.build-task:hover .build-task__check {
    border-color: var(--color-text-muted);
}

.build-task input:checked + .build-task__check {
    background: var(--color-success);
    border-color: var(--color-success);
}

.build-task__check::after {
    content: '';
    position: absolute;
    display: none;
    left: 5px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid var(--color-bg-primary);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.build-task input:checked + .build-task__check::after {
    display: block;
}

.build-task__text {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    flex: 1;
}

/* Done button */
.done-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: var(--space-md) var(--space-lg);
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-text-primary);
    background: var(--color-bg-secondary);
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.done-btn:hover {
    border-color: var(--color-accent);
    background: var(--color-bg-elevated);
}

/* Right column - Help panel */
.build-help {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    height: fit-content;
    position: sticky;
    top: var(--space-lg);
}

.build-help__title {
    margin: 0;
    font-size: var(--text-base);
    color: var(--color-text-primary);
}

/* Help prompts */
.help-prompts {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.help-prompt {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.help-prompt__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-primary);
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background var(--transition-fast);
}

.help-prompt__header:hover {
    background: var(--color-bg-elevated);
}

.help-prompt__chevron {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    transition: transform var(--transition-fast);
}

.help-prompt--open .help-prompt__chevron {
    transform: rotate(180deg);
}

.help-prompt__content {
    display: none;
    padding: var(--space-md);
    border-top: 1px solid var(--color-border);
    animation: slideDown var(--transition-base) ease-out;
}

.help-prompt--open .help-prompt__content {
    display: block;
}

.help-prompt__code {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: var(--space-md);
    margin: 0 0 var(--space-sm) 0;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    white-space: pre-wrap;
    line-height: 1.5;
    overflow-x: auto;
}

.help-prompt__copy {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--color-text-secondary);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.help-prompt__copy:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
}

.help-prompt__copy--success {
    background: rgba(52, 211, 153, 0.15);
    border-color: var(--color-success);
    color: var(--color-success);
}

/* Help stuck section */
.help-stuck {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: var(--space-lg);
}

.help-stuck__title {
    margin: 0 0 var(--space-lg) 0;
    font-size: var(--text-base);
    color: var(--color-text-primary);
}

.stuck-category {
    margin-bottom: var(--space-lg);
}

.stuck-category:last-child {
    margin-bottom: 0;
}

.stuck-category h4 {
    margin: 0 0 var(--space-sm) 0;
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-primary);
}

.stuck-category ul {
    margin: 0;
    padding-left: var(--space-lg);
}

.stuck-category li {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    padding: 2px 0;
    line-height: 1.5;
}

.stuck-category li::marker {
    color: var(--color-accent);
}

/* Error table */
.error-table {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.error-row {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    background: var(--color-bg-elevated);
    border-radius: var(--border-radius);
    font-size: var(--text-xs);
}

.error-code {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--color-error);
}

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

/* Behind note */
.behind-note {
    padding: var(--space-md);
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.1) 0%, rgba(52, 211, 153, 0.05) 100%);
    border: 1px solid rgba(52, 211, 153, 0.3);
    border-radius: var(--border-radius);
}

.behind-note h4 {
    margin: 0 0 var(--space-sm) 0;
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    color: var(--color-text-primary);
}

.behind-note p {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.behind-note p strong {
    color: var(--color-success);
    font-weight: 700;
}

/* Responsive adjustments for build page */
@media (max-width: 1024px) {
    .build-page {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
    
    .build-help {
        position: static;
    }
    
    .build-task-list {
        max-height: none;
    }
}

@media (max-width: 768px) {
    .build-tasks__header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .build-progress__bar {
        width: 100%;
    }
    
    .build-task {
        padding: var(--space-xs) var(--space-sm);
    }
    
    .build-task__text {
        font-size: var(--text-xs);
    }
    
    .help-prompt__code {
        font-size: 0.65rem;
    }
    
    .error-row {
        grid-template-columns: 50px 1fr;
    }
}

/* ============================================
   Page 11: Wrap-Up
   ============================================ */

.wrapup-page {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
}

/* Header */
.wrapup-header {
    text-align: center;
    padding: var(--space-xl) 0;
}

.wrapup-header h2 {
    font-size: var(--text-2xl);
    margin: 0 0 var(--space-sm) 0;
    background: linear-gradient(135deg, var(--color-success) 0%, var(--color-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.wrapup-subtitle {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    margin: 0;
}

/* Process Recap */
.process-recap {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: var(--space-xl);
}

.process-recap h3 {
    margin: 0 0 var(--space-lg) 0;
    font-size: var(--text-lg);
    color: var(--color-text-primary);
}

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

.recap-step {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-bg-elevated);
    border-radius: var(--border-radius);
    transition: all var(--transition-fast);
}

.recap-step--done {
    border-left: 3px solid var(--color-success);
}

.recap-step--maybe {
    border-left: 3px solid var(--color-text-muted);
    opacity: 0.8;
}

.recap-step__check {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-base);
    font-weight: 700;
    border-radius: 50%;
}

.recap-step--done .recap-step__check {
    background: var(--color-success);
    color: var(--color-bg-primary);
}

.recap-step--maybe .recap-step__check {
    background: var(--color-bg-primary);
    color: var(--color-text-muted);
    border: 2px dashed var(--color-text-muted);
}

.recap-step__text {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-primary);
}

.recap-step--maybe .recap-step__text {
    color: var(--color-text-muted);
}

.recap-step__detail {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* Reflection Form */
.reflection-form {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: var(--space-xl);
}

.reflection-form h3 {
    margin: 0 0 var(--space-sm) 0;
    font-size: var(--text-lg);
    color: var(--color-text-primary);
}

.reflection-intro {
    margin: 0 0 var(--space-xl) 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.reflection-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.reflection-textareas {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

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

.reflection-field label {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-primary);
}

.reflection-field select,
.reflection-field input[type="url"],
.reflection-field input[type="text"],
.reflection-field textarea {
    padding: var(--space-md);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    transition: all var(--transition-fast);
}

.reflection-field select:focus,
.reflection-field input:focus,
.reflection-field textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-muted);
}

.reflection-field textarea {
    resize: vertical;
    min-height: 80px;
}

.reflection-field--url {
    grid-column: 1 / -1;
    animation: slideDown var(--transition-base) ease-out;
}

/* Radio group */
.radio-group {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

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

.radio-option:hover {
    border-color: var(--color-text-muted);
}

.radio-option input {
    position: absolute;
    opacity: 0;
}

.radio-option__indicator {
    width: 16px;
    height: 16px;
    border: 2px solid var(--color-border);
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
    transition: all var(--transition-fast);
}

.radio-option input:checked + .radio-option__indicator {
    border-color: var(--color-accent);
}

.radio-option input:checked + .radio-option__indicator::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: var(--color-accent);
    border-radius: 50%;
}

.radio-option input:checked ~ span:last-child {
    color: var(--color-accent);
    font-weight: 500;
}

/* Confidence scale */
.reflection-field--scale {
    margin-bottom: var(--space-xl);
}

.confidence-scale {
    display: flex;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

.confidence-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    cursor: pointer;
    flex: 1;
}

.confidence-option input {
    position: absolute;
    opacity: 0;
}

.confidence-option__number {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-text-secondary);
    background: var(--color-bg-elevated);
    border: 2px solid var(--color-border);
    border-radius: 50%;
    transition: all var(--transition-fast);
}

.confidence-option:hover .confidence-option__number {
    border-color: var(--color-text-muted);
}

.confidence-option input:checked + .confidence-option__number {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-bg-primary);
}

.confidence-option__label {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    text-align: center;
}

/* Save button */
.save-reflection-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: var(--space-md) var(--space-xl);
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-bg-primary);
    background: var(--color-accent);
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.save-reflection-btn:hover {
    background: var(--color-accent-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

.save-reflection-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* Reflection status */
.reflection-status {
    display: none;
    margin-top: var(--space-md);
    padding: var(--space-md);
    border-radius: var(--border-radius);
    font-size: var(--text-sm);
    text-align: center;
}

.reflection-status--success {
    background: rgba(52, 211, 153, 0.1);
    border: 1px solid var(--color-success);
    color: var(--color-success);
}

.reflection-status--error {
    background: rgba(248, 113, 113, 0.1);
    border: 1px solid var(--color-error);
    color: var(--color-error);
}

/* Next Steps */
.next-steps {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: var(--space-xl);
}

.next-steps h3 {
    margin: 0 0 var(--space-lg) 0;
    font-size: var(--text-lg);
    color: var(--color-text-primary);
}

.next-steps a {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--transition-fast);
}

.next-steps a:hover {
    color: var(--color-accent-hover);
}

.next-steps a:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

.next-step-card {
    padding: var(--space-lg);
    border-radius: var(--border-radius);
    animation: fadeIn var(--transition-base) ease-out;
}

.next-step-card--default {
    background: var(--color-bg-elevated);
    border: 1px dashed var(--color-border);
}

.next-step-card--default p {
    margin: 0;
    color: var(--color-text-muted);
    font-style: italic;
}

.next-step-card--deployed {
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.15) 0%, rgba(52, 211, 153, 0.05) 100%);
    border: 1px solid rgba(52, 211, 153, 0.3);
}

.next-step-card--halfway {
    background: linear-gradient(135deg, rgba(245, 166, 35, 0.15) 0%, rgba(245, 166, 35, 0.05) 100%);
    border: 1px solid rgba(245, 166, 35, 0.3);
}

.next-step-card--early {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.15) 0%, rgba(96, 165, 250, 0.05) 100%);
    border: 1px solid rgba(96, 165, 250, 0.3);
}

.next-step-card__badge {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 700;
    margin-bottom: var(--space-md);
}

.next-step-card--deployed .next-step-card__badge {
    color: var(--color-success);
}

.next-step-card--halfway .next-step-card__badge {
    color: var(--color-accent);
}

.next-step-card--early .next-step-card__badge {
    color: #60a5fa;
}

.next-step-list {
    margin: 0;
    padding-left: var(--space-lg);
    list-style: none;
}

.next-step-list li {
    position: relative;
    padding: var(--space-xs) 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.next-step-list li::before {
    content: '•';
    position: absolute;
    left: calc(-1 * var(--space-md));
    color: var(--color-success);
}

.next-step-list li strong {
    color: var(--color-text-primary);
}

.next-step-card p {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.next-step-hint {
    margin-top: var(--space-md) !important;
    font-style: italic;
    color: var(--color-text-muted) !important;
}

/* Feedback popup overlay (Page 9) */
.feedback-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: calc(var(--header-height) + var(--space-xl)) var(--space-lg) var(--space-lg);
}

.feedback-overlay__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
}

.feedback-overlay__content {
    position: relative;
    z-index: 1;
    width: min(560px, 100%);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-xl);
}

.feedback-overlay__content h3 {
    margin: 0 0 var(--space-sm) 0;
    color: var(--color-text-primary);
}

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

.feedback-overlay__actions {
    margin-top: var(--space-lg);
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

/* Security Note */
.security-note {
    background: linear-gradient(135deg, rgba(248, 113, 113, 0.1) 0%, rgba(248, 113, 113, 0.03) 100%);
    border: 2px solid var(--color-error);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}

.security-note__header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    background: rgba(248, 113, 113, 0.1);
    border-bottom: 1px solid rgba(248, 113, 113, 0.3);
}

.security-note__icon {
    font-size: 1.25rem;
}

.security-note__header h4 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--text-base);
    color: var(--color-error);
}

.security-note__content {
    padding: var(--space-lg);
}

.security-note__intro {
    margin: 0 0 var(--space-md) 0;
    font-size: var(--text-base);
}

.security-note__content p {
    margin: 0 0 var(--space-sm) 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.security-note__content strong {
    color: var(--color-text-primary);
}

.security-ok,
.security-prod,
.security-now {
    margin: 0 0 var(--space-md) 0;
    padding-left: var(--space-lg);
    list-style: none;
}

.security-ok li,
.security-prod li,
.security-now li {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    padding: 2px 0;
}

.security-ok li {
    color: var(--color-success);
}

/* Reusable API key trade-off note */
.security-note-collapsible {
    margin: 1rem 0;
}

.security-note-collapsible__summary {
    display: none;
}

.security-note {
  background: linear-gradient(135deg, #1a1a0a 0%, #111 100%);
  border: 1px solid #3d3d00;
  border-left: 3px solid #f59e0b;
  border-radius: 8px;
  padding: 1.25rem;
  margin: 1.5rem 0;
}

.security-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.security-icon {
  font-size: 1.25rem;
}

.security-title {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  color: #f59e0b;
}

.security-intro {
  color: #a1a1aa;
  margin-bottom: 1rem;
}

.security-item {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 6px;
  margin-bottom: 0.5rem;
}

.security-good {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.security-good .checkmark {
  color: #22c55e;
}

.security-warning {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.2);
}

.security-warning .warning-icon {
  color: #f59e0b;
}

.security-item strong {
  color: #fff;
}

.security-item div {
  color: #d4d4d8;
  font-size: 0.95rem;
  line-height: 1.5;
}

.security-details {
  margin-top: 1rem;
  border: 1px solid #27272a;
  border-radius: 6px;
  overflow: hidden;
}

.security-details summary {
  padding: 0.75rem 1rem;
  background: #1a1a1a;
  color: #f59e0b;
  cursor: pointer;
  font-weight: 500;
}

.security-details summary:hover {
  background: #222;
}

.security-details[open] summary {
  border-bottom: 1px solid #27272a;
}

.security-details ul {
  padding: 1rem 1rem 1rem 2rem;
  margin: 0;
  color: #a1a1aa;
}

.security-details li {
  margin-bottom: 0.5rem;
  line-height: 1.5;
}

.security-details li strong {
  color: #fff;
}

.security-note-small {
  font-size: 0.85rem;
  color: #71717a;
  font-style: italic;
  padding: 0 1rem 1rem 1rem;
  margin: 0;
}

.help-prompt__manual-step {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: 1.5;
}

@media (min-width: 769px) {
    .security-note-collapsible__summary {
        display: none;
    }

    details.security-note-collapsible:not([open]) > :not(summary) {
        display: block;
    }
}

@media (max-width: 768px) {
    .security-note-collapsible {
        border: 1px solid #3d3d00;
        border-left: 3px solid #f59e0b;
        border-radius: 8px;
        overflow: hidden;
        margin: 1rem 0;
    }

    .security-note-collapsible__summary {
        display: block;
        padding: 0.75rem 1rem;
        background: #1a1a1a;
        color: #f59e0b;
        cursor: pointer;
        font-weight: 600;
        font-family: 'JetBrains Mono', monospace;
    }

    .security-note-collapsible .security-note {
        margin: 0;
        border: 0;
        border-radius: 0;
    }
}

/* Resources */
.resources-section {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: var(--space-xl);
}

.resources-section h3 {
    margin: 0 0 var(--space-lg) 0;
    font-size: var(--text-lg);
    color: var(--color-text-primary);
}

.resources-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
}

.resource-link {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.resource-link:hover {
    border-color: var(--color-accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.resource-link__icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.resource-link__text {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-primary);
}

.resource-link--highlight {
    background: linear-gradient(135deg, rgba(245, 166, 35, 0.1) 0%, rgba(245, 166, 35, 0.05) 100%);
    border-color: var(--color-accent);
}

.resource-link--highlight .resource-link__text {
    color: var(--color-accent);
}

/* Final Message */
.final-message {
    text-align: center;
    padding: var(--space-2xl);
    background: linear-gradient(135deg, var(--color-bg-secondary) 0%, var(--color-bg-elevated) 100%);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
}

.final-message__main {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-lg) 0;
    line-height: 1.6;
}

.final-message__main strong {
    color: var(--color-accent);
}

.final-message__process {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    padding: var(--space-md) var(--space-lg);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    display: inline-block;
    margin-bottom: var(--space-lg);
    letter-spacing: 0.02em;
}

.final-message__cta {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-success);
    margin: 0;
}

/* Responsive adjustments for wrap-up page */
@media (max-width: 900px) {
    .resources-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .wrapup-header h2 {
        font-size: var(--text-xl);
    }
    
    .wrapup-subtitle {
        font-size: var(--text-base);
    }
    
    .reflection-grid {
        grid-template-columns: 1fr;
    }
    
    .confidence-scale {
        flex-wrap: wrap;
    }
    
    .confidence-option {
        min-width: calc(20% - var(--space-sm));
    }
    
    .confidence-option__number {
        width: 36px;
        height: 36px;
        font-size: var(--text-base);
    }
    
    .resources-grid {
        grid-template-columns: 1fr;
    }
    
    .final-message__process {
        font-size: var(--text-xs);
        word-break: break-word;
    }
    
    .recap-step {
        grid-template-columns: 24px 1fr;
    }
    
    .recap-step__detail {
        display: none;
    }
}

@media (max-width: 480px) {
    .radio-group {
        flex-direction: column;
    }
    
    .radio-option {
        width: 100%;
    }
    
    .confidence-option__label {
        display: none;
    }
}

.prompt-job-label {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--color-text-primary);
}

.prompt-summary-text {
    margin-bottom: 1rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.prompt-actions-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.prompt-preview {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: var(--space-md);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    white-space: pre-wrap;
    overflow-x: auto;
    max-height: 200px;
    overflow-y: auto;
}

.prompt-preview--full {
    max-height: 400px;
}

/* ============================================
   Pages 2, 3, 4 Common Styles
   ============================================ */
.page-content {
    max-width: 740px;
    margin: 0 auto;
    /* padding handles top/bottom, side handled by container */
}

/* Demo vs custom project chooser cards (Pages 4 and 5) */
.project-choice-card {
    margin: 18px 0 24px;
    border-radius: var(--border-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
    overflow: hidden;
}

.project-choice-card--demo {
    padding: 18px 20px;
    border-color: rgba(245, 158, 11, 0.35);
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.12), rgba(245, 158, 11, 0.03));
}

.project-choice-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.project-choice-card__title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    color: var(--color-text-primary);
}

.project-choice-card__badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid rgba(245, 158, 11, 0.45);
    color: #fbbf24;
    background: rgba(245, 158, 11, 0.14);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.project-choice-card__description {
    margin: 0 0 14px;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.project-choice-card--custom > summary {
    list-style: none;
}

.project-choice-card--custom > summary::-webkit-details-marker {
    display: none;
}

.project-choice-card__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 20px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.project-choice-card__summary-title {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-text-primary);
}

.project-choice-card__summary-hint {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.project-choice-card--custom[open] .project-choice-card__summary {
    background: rgba(255, 255, 255, 0.06);
}

.project-choice-card__content {
    padding: 0 20px 6px;
}

/* Step headings */
.find-idea-section__title, .step-heading {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 600;
    margin-top: 36px;
    margin-bottom: 12px;
    color: var(--color-text-primary);
}

.find-idea-section, .step-section {
    margin-bottom: 32px;
}

/* ============================================
   Prompt Display (Pages 2, 3)
   ============================================ */
.prompt-display-wrap {
    margin-bottom: 16px;
}

.prompt-preview {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius);
    padding: 16px 20px;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    max-height: 120px; /* Default collapsed height for non-toggle version, though we use display:none mostly now */
    overflow-x: auto;
    overflow-y: auto;
    transition: max-height 0.3s ease;
    white-space: pre-wrap;
    margin-bottom: 12px;
}

.prompt-preview--full {
    max-height: 600px;
    background: var(--color-bg-secondary);
}

.prompt-job-label {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--color-text-primary);
    font-family: var(--font-heading);
}

.prompt-summary-text {
    margin-bottom: 1rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.prompt-actions-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: var(--border-radius);
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: 1px solid transparent;
    text-decoration: none;
}

.btn--primary {
    background: var(--color-accent);
    color: var(--color-bg-primary);
    border-color: var(--color-accent);
}

.btn--primary:hover {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-glow);
}

.btn--secondary {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.8);
}

.btn--secondary:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.4);
    color: var(--color-text-primary);
    transform: translateY(-1px);
}

.btn-link {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    padding: 8px 12px;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all var(--transition-fast);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-link:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-text-primary);
    border-color: rgba(255, 255, 255, 0.2);
}

.find-idea-guide {
    margin-top: 12px;
    font-size: 13px;
    color: var(--color-text-muted);
    font-family: var(--font-mono);
}

/* ============================================
   Textarea & Parsing (Pages 2, 3)
   ============================================ */
.find-idea-instruction {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin-bottom: 12px;
}

.find-idea-textarea {
    width: 100%;
    min-height: 180px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--border-radius);
    padding: 16px;
    color: var(--color-text-primary);
    font-family: var(--font-mono); /* Monospace helps for code/prompt pasting */
    font-size: 14px;
    line-height: 1.5;
    resize: vertical;
    transition: all var(--transition-fast);
    margin-bottom: 16px;
    display: block; /* Ensure block layout */
}

.find-idea-textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px var(--color-accent-muted);
    background: rgba(255, 255, 255, 0.08);
}

.find-idea-textarea::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

/* ============================================
   LLM Service Links (Pages 2, 3)
   ============================================ */
.find-idea-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 16px 0;
}

.find-idea-link {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    border-radius: var(--border-radius);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    font-family: var(--font-heading);
    transition: all var(--transition-fast);
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-text-primary);
}

.find-idea-link:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

.find-idea-recommend {
    font-size: 12px;
    color: var(--color-text-muted);
    text-align: center;
    margin-top: 8px;
}

/* ============================================
   Idea Card (Page 2, 4)
   ============================================ */
.idea-card, .find-idea-card > div {
    background: var(--color-bg-secondary);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius-lg);
    padding: 24px;
    margin-top: 24px;
    box-shadow: var(--shadow-md);
    animation: slideUp 0.4s ease-out;
}

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

.idea-card__title {
    font-size: 18px;
    line-height: 1.4;
    margin-bottom: 16px;
    color: var(--color-text-primary);
    font-family: var(--font-heading);
}

.idea-card__meta {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.03);
    padding: 12px 16px;
    border-radius: var(--border-radius);
    margin-bottom: 16px;
    line-height: 1.5;
}

.idea-card__score {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.idea-card__score-label {
    font-size: 14px;
    color: var(--color-text-secondary);
    font-family: var(--font-mono);
}

.idea-card__score-bar {
    flex: 1;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
    max-width: 200px;
}

.idea-card__score-fill {
    display: block;
    height: 100%;
    background: var(--color-accent);
    border-radius: 4px;
}

.idea-card__score-value {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--color-accent);
}

/* Capability evaluation cards */
.idea-card__capability-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

.capability-eval-card {
    background: #111;
    border: 1px solid rgba(245, 158, 11, 0.24);
    border-radius: var(--border-radius);
    padding: 14px;
}

.capability-eval-card--yes {
    border-color: rgba(245, 158, 11, 0.55);
    box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.12);
}

.capability-eval-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.capability-eval-card__label {
    color: #f59e0b;
    font-family: var(--font-heading);
    font-size: var(--text-sm);
}

.capability-eval-card__answer {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-text-primary);
    border: 1px solid rgba(245, 158, 11, 0.45);
    border-radius: 999px;
    padding: 2px 10px;
}

.capability-eval-card__question {
    margin: 0 0 8px;
    color: var(--color-text-primary);
    font-size: var(--text-base);
    font-weight: 600;
}

.capability-eval-card__description,
.capability-eval-card__examples,
.capability-eval-card__implication,
.capability-eval-card__reasoning {
    margin: 0 0 6px;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: 1.5;
}

.capability-eval-card__implication--yes strong,
.capability-eval-card__implication--no strong,
.capability-eval-card__reasoning strong {
    color: #f59e0b;
}

.learning-override {
    margin: 10px 0 16px;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.32);
    border-radius: var(--border-radius);
    padding: 12px;
}

.learning-override__label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    color: var(--color-text-primary);
    font-size: var(--text-sm);
}

.learning-override__label input[type="checkbox"] {
    margin-top: 3px;
    accent-color: #f59e0b;
}

.cap-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;
    font-family: var(--font-mono);
    border: 1px solid transparent;
}

.cap-badge--active {
    background: rgba(52, 211, 153, 0.15); /* Green tint */
    color: var(--color-success);
    border-color: rgba(52, 211, 153, 0.3);
}

.cap-badge--inactive {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.08);
}

/* Verdict Badges */
.idea-card__verdict {
    margin-bottom: 12px;
}

.verdict-badge {
    display: inline-flex;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: var(--font-mono);
}

.verdict-badge--build {
    background: rgba(52, 211, 153, 0.15);
    color: var(--color-success);
    border: 1px solid rgba(52, 211, 153, 0.3);
}

.verdict-badge--prompt {
    background: rgba(96, 165, 250, 0.15); /* Blue */
    color: #60a5fa;
    border: 1px solid rgba(96, 165, 250, 0.3);
}

.verdict-badge--automate {
    background: rgba(251, 191, 36, 0.15); /* Amber */
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.3);
}

.verdict-badge--maybe_build {
    background: rgba(245, 158, 11, 0.18);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.35);
}

.verdict-badge--use_existing {
    background: rgba(96, 165, 250, 0.15);
    color: #60a5fa;
    border: 1px solid rgba(96, 165, 250, 0.3);
}

.idea-card__why {
    font-size: 14px;
    color: var(--color-text-secondary);
    font-style: italic;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 12px;
    margin-top: 12px;
}

.idea-card__recommendation {
    font-size: 14px;
    color: var(--color-text-primary);
    margin-top: 10px;
}

/* ============================================
   Build Plan (Page 4)
   ============================================ */
.build-plan-section {
    background: var(--color-bg-secondary);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius-lg);
    padding: 24px;
    margin-bottom: 20px;
}

.build-plan-section__title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--color-text-primary);
    font-family: var(--font-heading);
}

/* Idea section specific */
.build-plan-idea__desc {
    font-size: 16px;
    margin-bottom: 12px;
    color: var(--color-text-primary);
}

.build-plan-idea__flow {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--color-text-secondary);
    background: rgba(255, 255, 255, 0.03);
    padding: 8px 12px;
    border-radius: var(--border-radius);
    margin-bottom: 12px;
}

.build-plan-idea__meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
}

.build-plan-score {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--color-accent);
}

/* Components Table */
.build-plan-table {
    width: 100%;
    border-collapse: collapse;
}

.build-plan-table th, .build-plan-table td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    vertical-align: top;
}

.build-plan-table th {
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.5);
    font-family: var(--font-mono);
}

.build-plan-table td {
    font-size: 14px;
    color: var(--color-text-secondary);
}

.build-plan-table tr:last-child td {
    border-bottom: none;
}

/* MVP Section */
.build-plan-mvp-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 16px;
}

.build-plan-mvp-col strong {
    display: block;
    font-family: var(--font-mono);
    font-size: 13px;
    margin-bottom: 8px;
    color: var(--color-text-primary);
}

.build-plan-mvp-col ul {
    list-style: none;
    padding: 0;
}

.build-plan-mvp-col li {
    font-size: 14px;
    margin-bottom: 6px;
    display: flex;
    align-items: flex-start;
}

/* V1 DOES -> Green Check */
.build-plan-mvp-col:first-child li::before {
    content: '✓';
    color: var(--color-success);
    margin-right: 8px;
    font-weight: 700;
    flex-shrink: 0;
}

/* V1 DOES NOT -> Red X */
.build-plan-mvp-col:last-child li::before {
    content: '✗';
    color: var(--color-error);
    margin-right: 8px;
    font-weight: 700;
    flex-shrink: 0;
}

.build-plan-one-thing {
    background: rgba(255, 255, 255, 0.05);
    border-left: 3px solid var(--color-accent);
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    padding: 12px 16px;
    font-size: 14px;
    color: var(--color-text-primary);
    margin-top: 8px;
}

/* Task Preview */
.task-phase-header {
    font-family: var(--font-mono);
    font-size: 12px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 16px;
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.task-preview-row {
    font-size: 14px;
    padding: 4px 0;
    color: var(--color-text-secondary);
}

.build-plan-task-count {
    margin-top: 16px;
    text-align: right;
    font-size: 13px;
    color: var(--color-text-muted);
    font-family: var(--font-mono);
}

.build-plan-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.build-plan-back {
    margin: 0;
}

.build-plan-back-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    min-width: 260px;
}

/* Build plan: progress bar fixed on right, vertically centered next to scrollbar */
.build-plan-progress-anchor {
    display: none;
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 10;
}

.build-plan-with-progress {
    margin-bottom: var(--space-lg);
}

.build-plan-progress-side {
    position: fixed;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    z-index: 11;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm);
    pointer-events: none;
}

.build-plan-progress-bar {
    width: 10px;
    min-height: 120px;
    height: 120px;
    background: var(--color-bg-elevated);
    border-radius: 5px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.build-plan-progress-fill {
    width: 100%;
    height: 0%;
    min-height: 0;
    background: linear-gradient(180deg, var(--color-accent), var(--color-success));
    border-radius: 5px;
    transition: height 0.25s ease;
}

.build-plan-progress-text {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.build-task-finished-btn {
    display: inline-block;
    padding: 8px 14px;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-bg-primary);
    background: var(--color-success);
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
}

.build-task-finished-btn:hover {
    background: #2dd4a0;
}

.build-task-finished-btn:active {
    transform: scale(0.98);
}

.task-preview-card.build-task--completed .build-task-finished-btn {
    background: var(--color-text-muted);
    cursor: default;
}

/* ============================================
   Page 8: What You Learned
   ============================================ */
.learning-summary-page {
    display: grid;
    gap: 16px;
}

.learning-summary-card {
    background: var(--color-bg-secondary);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius-lg);
    padding: 20px;
}

.learning-summary-card h3 {
    margin: 0 0 14px 0;
    font-size: 16px;
    font-family: var(--font-heading);
    color: var(--color-text-primary);
}

.learning-summary-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.learning-summary-stat {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--border-radius);
    padding: 12px;
}

.learning-summary-stat__label {
    display: block;
    font-size: 12px;
    color: var(--color-text-muted);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-family: var(--font-mono);
}

.learning-summary-stat__value {
    display: block;
    font-size: 15px;
    color: var(--color-text-primary);
    font-weight: 600;
}

.learning-summary-list {
    margin: 0;
    padding-left: 20px;
    color: var(--color-text-secondary);
}

.learning-summary-list li {
    margin-bottom: 8px;
}

.learning-summary-takeaway {
    margin: 0 0 10px 0;
    color: var(--color-text-primary);
}

.learning-summary-next {
    margin: 0;
    color: var(--color-text-muted);
}

/* ============================================
   Escape Hatch / Default Project
   ============================================ */
.find-idea-escape, .default-project-section {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
}

.find-idea-escape__text {
    color: var(--color-text-muted);
    font-size: 14px;
    margin-bottom: 12px;
}

/* Responsive */
@media (max-width: 600px) {
    .project-choice-card__header,
    .project-choice-card__summary {
        flex-direction: column;
        align-items: flex-start;
    }

    .project-choice-card__content,
    .project-choice-card--demo,
    .project-choice-card__summary {
        padding-left: 14px;
        padding-right: 14px;
    }

    .find-idea-links {
        grid-template-columns: 1fr;
    }
    
    .build-plan-mvp-cols {
        grid-template-columns: 1fr;
    }

    .learning-summary-stats {
        grid-template-columns: 1fr;
    }

    .build-plan-back-link {
        min-width: auto;
        width: 100%;
    }
}

.scope-table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
}
.scope-table th {
    text-align: left;
    padding: 8px 12px;
    background: #f8f9fa;
    border-bottom: 2px solid #e5e7eb;
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
}
.scope-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: top;
}
.scope-table td:first-child {
    width: 140px;
    white-space: nowrap;
}

/* ============================================
   Page 2: Should You Build This? (scoped)
   ============================================ */
.page-intro {
    margin-bottom: var(--space-xl);
}

.page-title {
    font-family: var(--font-heading);
    font-size: clamp(1.05rem, 1rem + 0.35vw, 1.3rem);
    margin-bottom: var(--space-sm);
    display: inline-block;
    padding-bottom: 0.45rem;
    border-bottom: 2px solid rgba(245, 166, 35, 0.7);
}

.page-intro .page-subtitle {
    font-family: var(--font-body);
    color: var(--color-text-secondary);
}

.reality-check-page {
    max-width: 900px;
    margin: 0 auto;
}

.reality-check-page .decision-tree {
    position: relative;
    max-width: 680px;
    margin: 1.5rem auto 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
}

.reality-check-page .tree-progress {
    --progress: 10%;
    position: absolute;
    left: 15px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--color-accent) 0%, var(--color-accent) var(--progress), var(--color-border) var(--progress));
}

.reality-check-page .tree-question {
    position: relative;
    margin: 0 0 1rem 2.75rem;
    padding: 1.2rem;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-bg-secondary);
    transition: all 200ms ease-out;
}

.reality-check-page .tree-question.is-hidden,
.reality-check-page .tree-question[data-status="hidden"] {
    display: none;
}

.reality-check-page .tree-question.is-active,
.reality-check-page .tree-question[data-status="active"] {
    animation: treeQuestionEnter 200ms ease-out;
}

.reality-check-page .tree-question.is-answered,
.reality-check-page .tree-question[data-status="answered"] {
    opacity: 0.76;
    padding-top: 0.95rem;
    padding-bottom: 0.95rem;
}

.reality-check-page .tree-question.is-answered .question-buttons,
.reality-check-page .tree-question[data-status="answered"] .question-buttons {
    display: none;
}

.reality-check-page .tree-question.is-answered .question-answer-badge,
.reality-check-page .tree-question[data-status="answered"] .question-answer-badge {
    display: inline-flex;
}

.reality-check-page .tree-question--key-fork {
    border-color: #38bdf8;
    background: linear-gradient(140deg, rgba(22, 22, 26, 1) 0%, rgba(56, 189, 248, 0.08) 100%);
    box-shadow: 0 0 22px rgba(56, 189, 248, 0.11);
}

.reality-check-page .tree-question--key-fork .question-number {
    background: #38bdf8;
    color: #0b1220;
    animation: forkPulse 1.4s ease-out;
}

.reality-check-page .question-number {
    position: absolute;
    left: -2.75rem;
    top: 50%;
    width: 30px;
    height: 30px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: var(--color-accent);
    color: #111111;
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.reality-check-page .question-text {
    font-family: var(--font-heading);
    font-size: 1.03rem;
    line-height: 1.45;
    margin: 0 0 0.45rem;
    color: var(--color-text-primary);
}

.reality-check-page .question-subtext {
    margin-bottom: 0.9rem;
    color: var(--color-text-secondary);
    font-family: var(--font-body);
    font-size: 0.95rem;
}

.reality-check-page .question-buttons {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.reality-check-page .btn-yes,
.reality-check-page .btn-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    border-radius: 8px;
    border: 2px solid transparent;
    padding: 0.58rem 1rem;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    transition: all var(--transition-fast);
    appearance: none;
}

.reality-check-page .btn-yes {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #141414;
}

.reality-check-page .btn-yes:hover {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
}

.reality-check-page .btn-no {
    background: transparent;
    color: var(--color-text-secondary);
    border-color: #4b5563;
}

.reality-check-page .btn-no:hover {
    background: rgba(255, 255, 255, 0.04);
}

.reality-check-page .question-answer-badge {
    display: none;
    margin-top: 0.6rem;
    width: auto;
    border-radius: 999px;
    padding: 0.16rem 0.65rem;
    font-family: var(--font-heading);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    animation: badgePop 150ms ease-out;
}

.reality-check-page .question-change-btn {
    margin-top: 0.55rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--color-text-secondary);
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
    font-family: var(--font-heading);
    font-size: 0.7rem;
    cursor: pointer;
}

.reality-check-page .question-change-btn:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.reality-check-page .question-answer-badge--yes {
    color: #1a1a1a;
    background: var(--color-accent);
}

.reality-check-page .question-answer-badge--no {
    color: #d1d5db;
    background: #374151;
}

.reality-check-page .path-label {
    display: inline-block;
    margin-bottom: 0.48rem;
    padding: 0.22rem 0.58rem;
    border-radius: 999px;
    font-family: var(--font-heading);
    font-size: 0.67rem;
    letter-spacing: 0.08em;
}

.reality-check-page .path-label--database {
    background: rgba(56, 189, 248, 0.25);
    color: #93e5ff;
}

.reality-check-page .path-label--conversation {
    background: rgba(148, 163, 184, 0.25);
    color: #cbd5e1;
}

.reality-check-page .question-helper {
    margin-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 0.7rem;
}

.reality-check-page .question-helper summary {
    cursor: pointer;
    color: #7dd3fc;
    font-family: var(--font-heading);
    font-size: 0.84rem;
}

.reality-check-page .helper-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 0.8rem;
}

.reality-check-page .helper-column h4 {
    margin-bottom: 0.35rem;
    font-family: var(--font-heading);
    font-size: 0.76rem;
    text-transform: uppercase;
}

.reality-check-page .helper-yes h4 {
    color: var(--color-accent);
}

.reality-check-page .helper-no h4 {
    color: #94a3b8;
}

.reality-check-page .helper-column ul {
    margin: 0;
    list-style: none;
}

.reality-check-page .helper-column li {
    font-size: 0.84rem;
    color: var(--color-text-secondary);
    line-height: 1.35;
    margin-bottom: 0.3rem;
}

.reality-check-page .helper-test {
    margin-top: 0.8rem;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.25);
    padding: 0.8rem;
}

.reality-check-page .test-label {
    margin-bottom: 0.2rem;
    font-family: var(--font-heading);
    color: var(--color-text-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
}

.reality-check-page .test-question {
    margin-bottom: 0.35rem;
    color: var(--color-text-primary);
    font-family: var(--font-heading);
    font-size: 0.84rem;
}

.reality-check-page .test-answer {
    color: var(--color-text-secondary);
    font-size: 0.84rem;
}

.reality-check-page .tree-reset-link {
    margin: 0.25rem auto 0;
    display: none;
    background: none;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    text-decoration: underline;
    font-size: 0.9rem;
}

.reality-check-page .tier-result {
    max-width: 680px;
    margin: 2rem auto;
    border-radius: 14px;
    border: 2px solid var(--color-accent);
    background: linear-gradient(145deg, #1b1b22 0%, #14141a 100%);
    padding: 1.4rem;
    animation: resultSlideUp 300ms ease-out;
}

.reality-check-page .result-header {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.reality-check-page .result-icon {
    font-size: 1.95rem;
}

.reality-check-page .result-tier-name {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    margin: 0;
    color: var(--color-accent-hover);
}

.reality-check-page .result-time {
    margin-left: auto;
    font-size: 0.76rem;
    color: var(--color-text-secondary);
    background: rgba(255, 255, 255, 0.05);
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
}

.reality-check-page .result-headline {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    margin-bottom: 0.5rem;
}

.reality-check-page .result-explanation {
    font-family: var(--font-body);
    color: var(--color-text-secondary);
    margin-bottom: 0.7rem;
}

.reality-check-page .result-insight {
    border-left: 3px solid var(--color-accent);
    padding-left: 0.8rem;
    color: var(--color-text-secondary);
    font-style: italic;
}

.reality-check-page .result-actions {
    margin-top: 1rem;
    display: flex;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.reality-check-page .result-lists {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 0.8rem;
}

.reality-check-page .result-lists h4,
.reality-check-page .result-why-build h4 {
    font-family: var(--font-heading);
    font-size: 0.76rem;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin-bottom: 0.25rem;
}

.reality-check-page .result-lists ul,
.reality-check-page .result-why-build ul {
    margin: 0;
    padding-left: 1rem;
}

.reality-check-page .result-lists li,
.reality-check-page .result-why-build li {
    color: var(--color-text-secondary);
    font-size: 0.86rem;
    margin-bottom: 0.3rem;
}

.reality-check-page .result-celebration {
    margin-top: 0.8rem;
    color: #93e5ff;
}

#tierResultContainer .btn-primary,
.reality-check-page .btn-primary {
    border: none;
    border-radius: 8px;
    padding: 0.68rem 1rem;
    background: var(--color-accent);
    color: #111111;
    font-family: var(--font-heading);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

#tierResultContainer .btn-secondary,
.reality-check-page .btn-secondary {
    border: 2px solid #495163;
    border-radius: 8px;
    padding: 0.58rem 1rem;
    background: transparent;
    color: #d1d5db;
    font-family: var(--font-heading);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.reality-check-page .escape-valve {
    max-width: 680px;
    margin: 1rem auto 0;
}

.reality-check-page .escape-divider {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    color: var(--color-text-muted);
    margin-bottom: 0.8rem;
}

.reality-check-page .escape-divider::before,
.reality-check-page .escape-divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: rgba(255, 255, 255, 0.12);
}

.reality-check-page .escape-content {
    text-align: center;
}

.reality-check-page .escape-headline {
    font-family: var(--font-heading);
    margin-bottom: 0.35rem;
}

.reality-check-page .escape-body {
    color: var(--color-text-secondary);
    margin: 0 auto 0.8rem;
    max-width: 550px;
}

.reality-check-page .tiers-reference {
    margin-top: 2.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.reality-check-page .tiers-reference-title {
    font-family: var(--font-heading);
    margin-bottom: 0.25rem;
}

.reality-check-page .tiers-reference-subtitle {
    color: var(--color-text-secondary);
    margin-bottom: 1rem;
}

.reality-check-page .tiers-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
}

.reality-check-page .tier-card {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 0.9rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.reality-check-page .tier-card:hover {
    border-color: #4b5563;
    transform: translateY(-1px);
}

.reality-check-page .tier-card--active {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 1px rgba(245, 166, 35, 0.25);
}

.reality-check-page .tier-card--dimmed {
    opacity: 0.72;
}

.reality-check-page .tier-card-header {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.55rem;
}

.reality-check-page .tier-number {
    font-family: var(--font-heading);
    color: var(--color-text-muted);
    font-size: 0.68rem;
}

.reality-check-page .tier-time {
    margin-left: auto;
    color: var(--color-text-muted);
    font-size: 0.72rem;
}

.reality-check-page .tier-name {
    font-family: var(--font-heading);
    margin-bottom: 0.4rem;
    font-size: 0.92rem;
}

.reality-check-page .tier-description,
.reality-check-page .tier-example,
.reality-check-page .tier-headache {
    color: var(--color-text-secondary);
    font-size: 0.82rem;
    margin-bottom: 0.45rem;
}

.reality-check-page .headache-label {
    color: var(--color-accent);
}

.reality-check-page .tier-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.reality-check-page .tool-tag {
    border-radius: 999px;
    padding: 0.15rem 0.5rem;
    font-size: 0.68rem;
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-text-secondary);
}

.reality-check-page .tier-details {
    display: none;
    margin-top: 0.55rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 0.55rem;
}

.reality-check-page .tier-details.is-collapsed {
    display: none;
}

.reality-check-page .tier-card.tier-card--expanded .tier-details {
    display: grid;
    gap: 0.5rem;
}

.reality-check-page .tier-expand-hint {
    margin-top: 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--color-text-muted);
    font-family: var(--font-heading);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.reality-check-page .tier-expand-chevron {
    display: inline-block;
    transition: transform var(--transition-fast);
}

.reality-check-page .tier-card.tier-card--expanded .tier-expand-chevron {
    transform: rotate(180deg);
}

.reality-check-page .tier-details h5 {
    font-family: var(--font-heading);
    text-transform: uppercase;
    font-size: 0.68rem;
    color: var(--color-text-muted);
    margin-bottom: 0.2rem;
}

.reality-check-page .tier-details ul {
    margin: 0;
    padding-left: 1rem;
}

.reality-check-page .tier-details li {
    color: var(--color-text-secondary);
    font-size: 0.8rem;
}

.reality-check-page .build-justification {
    max-width: 680px;
    margin: 1.1rem auto 0;
    border: 1px solid var(--color-border);
    background: var(--color-bg-secondary);
    border-radius: 12px;
    padding: 1rem;
}

.reality-check-page .justification-title {
    font-family: var(--font-heading);
    margin-bottom: 0.2rem;
}

.reality-check-page .justification-subtitle {
    color: var(--color-text-secondary);
    font-size: 0.87rem;
    margin-bottom: 0.7rem;
}

.reality-check-page .justification-checklist {
    display: grid;
    gap: 0.55rem;
}

.reality-check-page .justification-item {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    cursor: pointer;
}

.reality-check-page .justification-item input {
    display: none;
}

.reality-check-page .justification-item .checkmark {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 2px solid #4b5563;
    margin-top: 1px;
    flex-shrink: 0;
}

.reality-check-page .justification-item input:checked + .checkmark {
    border-color: var(--color-accent);
    background: var(--color-accent);
    position: relative;
}

.reality-check-page .justification-item input:checked + .checkmark::after {
    content: "✓";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #111111;
    font-size: 0.74rem;
}

.reality-check-page .item-text {
    color: var(--color-text-secondary);
    font-size: 0.9rem;
}

.reality-check-page .justification-note {
    margin-top: 0.6rem;
    color: var(--color-text-muted);
    font-size: 0.87rem;
}

.reality-check-page .examples-section {
    margin: 2rem auto 0;
    max-width: 900px;
}

.reality-check-page .examples-toggle {
    cursor: pointer;
    color: var(--color-text-secondary);
    font-family: var(--font-heading);
    font-size: 0.85rem;
}

.reality-check-page .examples-table-wrapper {
    overflow-x: auto;
    margin-top: 0.75rem;
}

.reality-check-page .examples-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
}

.reality-check-page .examples-table th,
.reality-check-page .examples-table td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    padding: 0.6rem 0.8rem;
    text-align: left;
}

.reality-check-page .examples-table th {
    color: var(--color-text-muted);
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
}

.reality-check-page .examples-table td {
    color: var(--color-text-secondary);
}

.reality-check-page .examples-table strong {
    color: var(--color-accent-hover);
}

.reality-check-page .badge {
    border-radius: 999px;
    padding: 0.1rem 0.48rem;
    font-family: var(--font-heading);
    font-size: 0.65rem;
}

.reality-check-page .badge-yes {
    color: #111111;
    background: var(--color-accent);
}

.reality-check-page .badge-no {
    color: #cbd5e1;
    background: #374151;
}

.reality-check-page .examples-pattern {
    margin-top: 0.7rem;
    color: var(--color-text-secondary);
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    padding: 0.8rem;
    font-size: 0.86rem;
}

.decision-context-note {
    margin-bottom: 1rem;
    border-radius: 10px;
    padding: 0.75rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--color-text-secondary);
    font-size: 0.94rem;
}

.decision-context-note--database {
    border-color: rgba(56, 189, 248, 0.45);
    background: rgba(56, 189, 248, 0.1);
}

.decision-context-note--learning {
    border-color: rgba(245, 166, 35, 0.45);
    background: rgba(245, 166, 35, 0.08);
}

.decision-context-note--lighter {
    border-color: rgba(148, 163, 184, 0.45);
    background: rgba(148, 163, 184, 0.08);
}

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

@keyframes badgePop {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes forkPulse {
    0% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.4); }
    100% { box-shadow: 0 0 0 12px rgba(56, 189, 248, 0); }
}

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

.reality-check-page .full-tree-section {
    margin-top: 1.1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 0.75rem;
}

.reality-check-page .full-tree-toggle {
    cursor: pointer;
    color: var(--color-text-secondary);
    font-family: var(--font-heading);
    font-size: 0.84rem;
}

.reality-check-page .full-tree-content {
    margin-top: 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 0.8rem;
    background: rgba(255, 255, 255, 0.02);
}

.reality-check-page .full-tree-list {
    margin: 0;
    padding-left: 1rem;
    color: var(--color-text-secondary);
}

.reality-check-page .full-tree-list > li {
    margin-bottom: 0.6rem;
    font-size: 0.88rem;
}

.reality-check-page .full-tree-list ul {
    margin-top: 0.25rem;
    padding-left: 1.1rem;
}

.reality-check-page .full-tree-list li li {
    font-size: 0.84rem;
    margin-bottom: 0.25rem;
}

@media (max-width: 1200px) {
    .reality-check-page .tiers-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .reality-check-page .decision-tree {
        max-width: 100%;
    }

    .reality-check-page .tree-progress {
        display: none;
    }

    .reality-check-page .tree-question {
        margin-left: 0;
        padding: 1rem;
    }

    .reality-check-page .question-number {
        position: static;
        transform: none;
        margin-bottom: 0.55rem;
    }

    .reality-check-page .question-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .reality-check-page .btn-yes,
    .reality-check-page .btn-no,
    .reality-check-page .btn-primary,
    .reality-check-page .btn-secondary {
        width: 100%;
    }

    .reality-check-page .helper-columns {
        grid-template-columns: 1fr;
    }

    .reality-check-page .tiers-grid {
        display: flex;
        overflow-x: auto;
        gap: 0.75rem;
        padding-bottom: 0.45rem;
        scroll-snap-type: x mandatory;
    }

    .reality-check-page .tier-card {
        flex: 0 0 280px;
        scroll-snap-align: start;
    }

    .reality-check-page .result-lists {
        grid-template-columns: 1fr;
    }
}

/* Page 2 decision tree refresh: five-capability flow */
.reality-check-page .decision-tree {
    max-width: 760px;
}

.reality-check-page .tree-progress {
    position: static;
    width: auto;
    height: auto;
    background: transparent;
    margin-bottom: 0.9rem;
}

.reality-check-page .progress-dots {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.reality-check-page .progress-dot {
    width: 13px;
    height: 13px;
    border-radius: 999px;
    border: 1px solid #687080;
    background: transparent;
}

.reality-check-page .progress-dot.is-done {
    border-color: var(--color-accent);
    background: var(--color-accent);
}

.reality-check-page .progress-dot.is-current {
    box-shadow: 0 0 0 2px rgba(245, 166, 35, 0.25);
}

.reality-check-page .flag-indicator {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}

.reality-check-page .flag-indicator__empty {
    color: var(--color-text-muted);
    font-size: 0.82rem;
}

.reality-check-page .flag-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid rgba(245, 166, 35, 0.55);
    background: rgba(245, 166, 35, 0.13);
    color: var(--color-accent-hover);
    font-size: 0.7rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 0.2rem 0.6rem;
}

.reality-check-page .tree-question {
    margin: 0 0 0.9rem;
    border-color: rgba(255, 255, 255, 0.14);
}

.reality-check-page .question-number {
    position: static;
    transform: none;
    margin-bottom: 0.6rem;
}

.reality-check-page .question-text {
    margin-bottom: 0.7rem;
}

.reality-check-page .question-implication {
    margin-top: 0.55rem;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
}

.reality-check-page .flag-chip {
    display: inline-flex;
    align-items: center;
    margin-left: 0.4rem;
    border-radius: 999px;
    border: 1px solid rgba(245, 166, 35, 0.55);
    padding: 0.08rem 0.45rem;
    color: var(--color-accent-hover);
    font-size: 0.68rem;
    text-transform: uppercase;
}

.reality-check-page .tier-result.verdict-card {
    border-width: 1px;
}

.reality-check-page .verdict-card--build {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 1px rgba(245, 166, 35, 0.25);
}

.reality-check-page .verdict-card--reassuring {
    border-color: rgba(148, 163, 184, 0.35);
}

.reality-check-page .learning-override-card {
    max-width: 760px;
    margin: 1rem auto 0;
    border: 1px solid rgba(245, 166, 35, 0.3);
    border-radius: 12px;
    background: rgba(245, 166, 35, 0.06);
    padding: 1rem 1.1rem;
}

.reality-check-page .learning-override-card h4 {
    font-family: var(--font-heading);
    margin-bottom: 0.35rem;
}

.reality-check-page .learning-override-card p,
.reality-check-page .learning-override-card li {
    color: var(--color-text-secondary);
    font-size: 0.9rem;
}

.context-callout {
    display: flex;
    gap: 1rem;
    padding: 1.25rem;
    background: linear-gradient(135deg, #1a1a1a 0%, #111 100%);
    border: 1px solid #27272a;
    border-left: 3px solid #f59e0b;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.callout-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.callout-title {
    font-family: var(--font-heading);
    font-weight: 600;
    color: #fff;
    margin-bottom: 0.25rem;
}

.callout-content p {
    color: #a1a1aa;
    font-size: 0.95rem;
    line-height: 1.5;
}

.callout-link {
    display: inline-block;
    margin-top: 0.75rem;
    color: #f59e0b;
    font-weight: 500;
    text-decoration: none;
}

.callout-link:hover {
    text-decoration: underline;
}