/* ════════════════════════════════════════════════════════════════════════════
   CCL MARKET REPORT — Detailed Component Styles
   Scoped under #market-report-root to avoid v3 token conflicts.
   Fonts loaded by index.html (Inter + JetBrains Mono).
   ════════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN TOKENS (scoped to report root)
   ═══════════════════════════════════════════════════════════════════════════ */
#market-report-root {
    /* Typography — use v3 fonts (Inter + JetBrains Mono) */
    --font-display: 'Inter', -apple-system, sans-serif;
    --font-sans: 'Inter', -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', monospace;

    /* Type Scale */
    --text-xs: 0.75rem;
    --text-sm: 0.8125rem;
    --text-base: 0.9375rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;
    --text-6xl: 3.75rem;

    /* Font Weights */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    /* Line Heights & Tracking */
    --leading-none: 1;
    --leading-tight: 1.15;
    --leading-snug: 1.3;
    --leading-normal: 1.5;
    --leading-relaxed: 1.65;
    --tracking-tight: -0.02em;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;

    /* Colors - Neutrals */
    --ink: #1a1d21;
    --ink-muted: #4a5056;
    --ink-subtle: #7c8187;
    --surface-0: #ffffff;
    --surface-1: #f8f9fa;
    --surface-2: #f1f3f4;
    --surface-3: #e4e7e9;
    --surface-inverse: #1a1d21;

    /* Colors - Brand */
    --accent: #2d6a6a;
    --accent-hover: #1f5252;
    --accent-subtle: #e8f2f2;
    --accent-muted: rgba(45, 106, 106, 0.12);
    --accent-glow: rgba(45, 106, 106, 0.25);

    /* Colors - Semantic */
    --positive: #1a7f64;
    --positive-subtle: #e6f4ef;
    --caution: #b8860b;
    --caution-subtle: #fdf6e3;
    --negative: #c53030;
    --negative-subtle: #fdf2f2;
    --info: #487A7B;
    --info-subtle: rgba(72, 122, 123, 0.1);

    /* Colors - Pressure Index (warm sienna, complements teal) */
    --pressure: #a85c41;
    --pressure-subtle: #faf3ef;
    --pressure-moderate: #c9956c;

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 10px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(26, 29, 33, 0.04);
    --shadow-sm: 0 1px 3px rgba(26, 29, 33, 0.06), 0 1px 2px rgba(26, 29, 33, 0.04);
    --shadow-md: 0 4px 8px -2px rgba(26, 29, 33, 0.08), 0 2px 4px -2px rgba(26, 29, 33, 0.04);
    --shadow-lg: 0 12px 24px -4px rgba(26, 29, 33, 0.1), 0 4px 8px -2px rgba(26, 29, 33, 0.04);
    --shadow-xl: 0 20px 40px -8px rgba(26, 29, 33, 0.12), 0 8px 16px -4px rgba(26, 29, 33, 0.06);
    --shadow-elevated: 0 0 0 1px rgba(26, 29, 33, 0.04), 0 24px 48px -12px rgba(26, 29, 33, 0.15);
    --shadow-glow: 0 0 40px var(--accent-glow);

    /* Motion */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast: 150ms;
    --duration-base: 250ms;
    --duration-slow: 400ms;
    --duration-slower: 600ms;
}

/* BASE RESET — disabled, v3 components.css handles this */

/* ═══════════════════════════════════════════════════════════════════════════
   LOADING & ERROR STATES
   ═══════════════════════════════════════════════════════════════════════════ */
.loading-state,
.error-state {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-8);
    background: linear-gradient(135deg, var(--surface-1) 0%, var(--surface-2) 100%);
}

.loading-content,
.error-content {
    text-align: center;
    max-width: 400px;
}

.loading-spinner {
    width: 56px;
    height: 56px;
    border: 3px solid var(--surface-3);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto var(--space-6);
}

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

.loading-text {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    color: var(--ink);
    margin-bottom: var(--space-2);
}

.loading-subtext {
    font-size: var(--text-sm);
    color: var(--ink-subtle);
}

.error-icon-wrap {
    width: 72px;
    height: 72px;
    background: var(--negative-subtle);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-6);
}

.error-icon {
    width: 32px;
    height: 32px;
    color: var(--negative);
}

.error-title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    color: var(--ink);
    margin-bottom: var(--space-3);
}

.error-message {
    font-size: var(--text-base);
    color: var(--ink-muted);
    margin-bottom: var(--space-6);
}

/* ═══════════════════════════════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════════════════════════════ */
.site-header {
    background: var(--surface-0);
    border-bottom: 1px solid var(--surface-3);
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(8px);
    background: rgba(255, 255, 255, 0.95);
}

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

.logo {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    text-decoration: none;
}

.logo-icon {
    width: 32px;
    height: 32px;
    background: var(--accent);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.logo span {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 1.125rem;
    color: var(--accent);
}

.logo-mark {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    color: var(--accent);
}

.logo-text {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: var(--ink-muted);
}

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

.nav-link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--ink-muted);
    text-decoration: none;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    transition: all var(--duration-fast) var(--ease-out);
}

.nav-link:hover {
    color: var(--ink);
    background: var(--surface-2);
}

.nav-icon {
    width: 16px;
    height: 16px;
}

.btn-download {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--surface-0);
    background: var(--accent);
    border: none;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
}

.btn-download:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-icon {
    width: 16px;
    height: 16px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO SECTION
   ═══════════════════════════════════════════════════════════════════════════ */
.report-hero {
    background: var(--surface-inverse);
    color: var(--surface-0);
    padding: var(--space-12) var(--space-6) var(--space-16);
    position: relative;
    overflow: hidden;
}

.report-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse at 70% 20%, rgba(45, 106, 106, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 30% 80%, rgba(45, 106, 106, 0.1) 0%, transparent 40%);
    pointer-events: none;
}

.hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.hero-top {
    margin-bottom: var(--space-6);
}

.hero-badges {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

.badge-accent {
    background: var(--accent);
    color: var(--surface-0);
}

.badge-muted {
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.8);
}

.hero-address {
    font-family: var(--font-display);
    font-size: var(--text-5xl);
    font-weight: 400;
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    margin-bottom: var(--space-8);
    max-width: 900px;
}

.hero-stats {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    flex-wrap: wrap;
}

.hero-stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.stat-value {
    font-family: var(--font-mono);
    font-size: var(--text-4xl);
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-tight);
}

.stat-label {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    opacity: 0.7;
}

.hero-divider {
    width: 1px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MAIN REPORT BODY
   ═══════════════════════════════════════════════════════════════════════════ */
.report-body {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-8) var(--space-6);
    margin-top: -48px;
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
}

/* ═══════════════════════════════════════════════════════════════════════════
   EXECUTIVE SNAPSHOT
   ═══════════════════════════════════════════════════════════════════════════ */
.executive-snapshot {
    background: var(--surface-0);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-elevated);
    overflow: hidden;
    position: relative;
    z-index: 10;
    border-left: 6px solid var(--accent);
    animation: snapshotEntrance var(--duration-slower) var(--ease-out) backwards;
}

@keyframes snapshotEntrance {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
}

.snapshot-header {
    padding: var(--space-6) var(--space-8);
    background: linear-gradient(135deg, var(--accent-subtle) 0%, var(--surface-1) 100%);
    border-bottom: 1px solid var(--surface-3);
}

.snapshot-title-wrap {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.snapshot-icon {
    width: 32px;
    height: 32px;
    color: var(--accent);
}

.snapshot-title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    color: var(--ink);
    margin-bottom: var(--space-1);
}

.snapshot-subtitle {
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

.snapshot-body {
    padding: var(--space-8);
}

.snapshot-thesis {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    line-height: var(--leading-relaxed);
    color: var(--ink);
    margin-bottom: var(--space-8);
    max-width: 800px;
}

.snapshot-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-5);
    margin-bottom: var(--space-8);
}

.snapshot-card {
    background: var(--surface-1);
    border: 1px solid var(--surface-3);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    text-align: center;
    transition: all var(--duration-base) var(--ease-out);
}

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

.snapshot-card-accent {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--surface-0);
}

.snapshot-card-label {
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    opacity: 0.7;
    margin-bottom: var(--space-3);
}

.snapshot-card-icon {
    width: 48px;
    height: 48px;
    background: rgba(45, 106, 106, 0.1);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-3);
}

.snapshot-card-accent .snapshot-card-icon {
    background: rgba(255, 255, 255, 0.2);
}

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

.snapshot-card-accent .snapshot-card-icon svg {
    color: var(--surface-0);
}

.snapshot-card-name {
    font-family: var(--font-sans);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    margin-bottom: var(--space-1);
}

.snapshot-card-detail {
    font-size: var(--text-sm);
    opacity: 0.8;
}

.quick-signals {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.signal-pill {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--surface-1);
    border: 1px solid var(--surface-3);
    border-radius: var(--radius-full);
    transition: all var(--duration-fast) var(--ease-out);
}

.signal-pill:hover {
    background: var(--surface-0);
    border-color: var(--accent);
}

.signal-icon {
    width: 16px;
    height: 16px;
    color: var(--accent);
}

.signal-label {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: var(--ink-muted);
}

.signal-value {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--ink);
}

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

.section-title {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    color: var(--ink);
    margin-bottom: var(--space-2);
}

.section-subtitle {
    font-size: var(--text-base);
    color: var(--ink-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   OVERVIEW SECTION (Takeaways, Strategy, Index Grid, Quadrant, Actions)
   ═══════════════════════════════════════════════════════════════════════════ */
.overview-section {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
    margin-bottom: var(--space-10);
}

.overview-block {
    background: var(--surface-0);
    border: 1px solid var(--surface-3);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    box-shadow: var(--shadow-sm);
    animation: cardEntrance var(--duration-slow) var(--ease-out) backwards;
}

.overview-block:nth-child(1) { animation-delay: 50ms; }
.overview-block:nth-child(2) { animation-delay: 100ms; }
.overview-block:nth-child(3) { animation-delay: 150ms; }
.overview-block:nth-child(4) { animation-delay: 200ms; }
.overview-block:nth-child(5) { animation-delay: 250ms; }

.overview-block-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--surface-2);
}

.overview-icon {
    width: 20px;
    height: 20px;
    color: var(--accent);
}

.overview-block-title {
    font-family: var(--font-sans);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--ink);
    margin: 0;
}

/* --- Takeaways Block --- */
.takeaways-block {
    grid-column: 1 / -1;
}

.takeaways-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.takeaway-item {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    padding: var(--space-3);
    background: var(--surface-1);
    border-radius: var(--radius-md);
    animation: fadeInUp var(--duration-base) var(--ease-out) backwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
}

.takeaway-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-subtle);
    border-radius: var(--radius-md);
    color: var(--accent);
}

.takeaway-icon svg {
    width: 16px;
    height: 16px;
}

.takeaway-text {
    font-size: var(--text-sm);
    color: var(--ink);
    line-height: var(--leading-relaxed);
    margin: 0;
}

.takeaway-text strong {
    color: var(--accent);
    font-weight: var(--font-semibold);
}

/* --- Strategy Block --- */
.strategy-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

.strategy-item {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--surface-1);
    border-radius: var(--radius-md);
}

.strategy-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
}

.strategy-icon svg {
    width: 18px;
    height: 18px;
}

.strategy-icon.teal {
    background: var(--accent-subtle);
    color: var(--accent);
}

.strategy-icon.orange {
    background: #fef3cd;
    color: #b8860b;
}

.strategy-icon.purple {
    background: #f3e8ff;
    color: #7c3aed;
}

.strategy-icon.green {
    background: var(--positive-subtle);
    color: var(--positive);
}

.strategy-content h4 {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--ink);
    margin: 0 0 var(--space-1) 0;
}

.strategy-content p {
    font-size: var(--text-xs);
    color: var(--ink-muted);
    margin: 0;
    line-height: var(--leading-relaxed);
}

.strategy-content strong {
    color: var(--ink);
    font-weight: var(--font-semibold);
}

/* --- Index Grid Block --- */
.index-grid-block {
    grid-column: 1 / -1;
}

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

.overview-index-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--surface-1);
    border-radius: var(--radius-md);
    text-align: center;
    position: relative;
}

.overview-index-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
}

.overview-index-icon svg {
    width: 16px;
    height: 16px;
}

.overview-index-icon.positive {
    background: var(--positive-subtle);
    color: var(--positive);
}

.overview-index-icon.neutral {
    background: var(--caution-subtle);
    color: var(--caution);
}

.overview-index-icon.negative {
    background: var(--negative-subtle);
    color: var(--negative);
}

.overview-index-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    width: 100%;
}

.overview-index-name {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: var(--ink);
}

.overview-index-bar {
    height: 4px;
    background: var(--surface-3);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.overview-index-bar-fill {
    height: 100%;
    border-radius: var(--radius-full);
    transition: width var(--duration-slow) var(--ease-out);
}

.overview-index-bar-fill.positive {
    background: var(--positive);
}

.overview-index-bar-fill.neutral {
    background: var(--caution);
}

.overview-index-bar-fill.negative {
    background: var(--negative);
}

.overview-index-value {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--ink);
}

.overview-index-max {
    font-weight: var(--font-normal);
    color: var(--ink-muted);
    font-size: var(--text-xs);
}

.overview-index-question {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    font-size: 10px;
    font-weight: var(--font-semibold);
    color: var(--ink-subtle);
    background: var(--surface-0);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

/* --- Quadrant Block --- */
.quadrant-panel {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: var(--space-5);
}

.quadrant-visual {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.quadrant-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
    background: var(--surface-3);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.quadrant-cell {
    padding: var(--space-3);
    background: var(--surface-1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--duration-fast) var(--ease-out);
}

.quadrant-cell.active {
    background: var(--accent-subtle);
    box-shadow: inset 0 0 0 2px var(--accent);
}

.quadrant-cell-label {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: var(--ink-muted);
}

.quadrant-cell.active .quadrant-cell-label {
    color: var(--accent);
    font-weight: var(--font-semibold);
}

.quadrant-axes {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.quadrant-axis-label {
    font-size: 9px;
    color: var(--ink-subtle);
    text-align: center;
}

.quadrant-result {
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--surface-1);
}

.quadrant-result.positive {
    border-left: 3px solid var(--positive);
}

.quadrant-result.accent {
    border-left: 3px solid var(--accent);
}

.quadrant-result.caution {
    border-left: 3px solid var(--caution);
}

.quadrant-result.negative {
    border-left: 3px solid var(--negative);
}

.quadrant-result-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.quadrant-result-header svg {
    width: 20px;
    height: 20px;
}

.quadrant-result.positive .quadrant-result-header { color: var(--positive); }
.quadrant-result.accent .quadrant-result-header { color: var(--accent); }
.quadrant-result.caution .quadrant-result-header { color: var(--caution); }
.quadrant-result.negative .quadrant-result-header { color: var(--negative); }

.quadrant-result-label {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--ink);
    margin: 0;
}

.quadrant-result-desc {
    font-size: var(--text-sm);
    color: var(--ink-muted);
    line-height: var(--leading-relaxed);
    margin: 0 0 var(--space-3) 0;
}

.quadrant-scores {
    display: flex;
    gap: var(--space-4);
    margin-bottom: var(--space-3);
}

.quadrant-score {
    font-size: var(--text-xs);
    color: var(--ink-muted);
}

.quadrant-score strong {
    font-family: var(--font-mono);
    font-weight: var(--font-semibold);
    color: var(--ink);
}

.quadrant-next-moves h5 {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--ink);
    margin: 0 0 var(--space-2) 0;
}

.quadrant-next-moves ul {
    margin: 0;
    padding-left: var(--space-4);
    font-size: var(--text-xs);
    color: var(--ink-muted);
    line-height: var(--leading-relaxed);
}

.quadrant-next-moves li {
    margin-bottom: var(--space-1);
}

/* Top Drivers */
.quadrant-top-drivers {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--surface-3);
}

.quadrant-top-drivers h5 {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--ink);
    margin: 0 0 var(--space-2) 0;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

.quadrant-top-drivers ul {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-xs);
    color: var(--ink-muted);
    line-height: var(--leading-relaxed);
}

.quadrant-top-drivers li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.quadrant-top-drivers li svg {
    width: 12px;
    height: 12px;
    color: var(--accent);
    flex-shrink: 0;
    margin-top: 2px;
}

/* Next Checks */
.quadrant-next-checks {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--surface-3);
}

.quadrant-next-checks h5 {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--ink);
    margin: 0 0 var(--space-2) 0;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

.quadrant-next-checks ul {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-xs);
    color: var(--ink-muted);
    line-height: var(--leading-relaxed);
}

.quadrant-next-checks li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.quadrant-next-checks li svg {
    width: 12px;
    height: 12px;
    color: var(--ink-subtle);
    flex-shrink: 0;
    margin-top: 2px;
}

/* --- Actions Block --- */
.actions-block {
    grid-column: 1 / -1;
}

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

.action-card {
    display: flex;
    flex-direction: column;
    padding: var(--space-4);
    background: var(--surface-1);
    border-radius: var(--radius-md);
    position: relative;
    animation: fadeInUp var(--duration-base) var(--ease-out) backwards;
}

.action-number {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: white;
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    border-radius: var(--radius-full);
}

.action-body {
    margin-top: var(--space-6);
}

.action-text {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--ink);
    margin: 0 0 var(--space-2) 0;
    line-height: var(--leading-snug);
}

.action-reason {
    font-size: var(--text-xs);
    color: var(--ink-muted);
    margin: 0;
    line-height: var(--leading-relaxed);
}

.action-timeline {
    margin-top: auto;
    padding-top: var(--space-3);
    font-size: 10px;
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
}

.action-timeline.urgent {
    color: var(--negative);
}

.action-timeline.soon {
    color: var(--caution);
}

.action-timeline.later {
    color: var(--positive);
}

/* --- Responsive --- */
@media (max-width: 1100px) {
    .overview-section {
        grid-template-columns: 1fr;
    }

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

    .quadrant-panel {
        grid-template-columns: 1fr;
    }

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

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

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

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

/* ═══════════════════════════════════════════════════════════════════════════
   5 QUESTIONS SECTION
   ═══════════════════════════════════════════════════════════════════════════ */
.questions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
}

.question-card {
    background: var(--surface-0);
    border: 1px solid var(--surface-3);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: all var(--duration-base) var(--ease-out);
    animation: cardEntrance var(--duration-slow) var(--ease-out) backwards;
}

@keyframes cardEntrance {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
}

.question-card:nth-child(1) { animation-delay: 100ms; }
.question-card:nth-child(2) { animation-delay: 150ms; }
.question-card:nth-child(3) { animation-delay: 200ms; }
.question-card:nth-child(4) { animation-delay: 250ms; }
.question-card:nth-child(5) { animation-delay: 300ms; }

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

.question-card-featured {
    grid-column: 1 / -1;
    border-color: var(--accent);
    border-width: 2px;
}

.question-header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--surface-2);
    background: var(--surface-1);
}

.question-number {
    width: 36px;
    height: 36px;
    background: var(--accent);
    color: var(--surface-0);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    flex-shrink: 0;
}

.question-title {
    font-family: var(--font-sans);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--ink);
}

.question-body {
    padding: var(--space-6);
}

.question-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--accent);
    text-decoration: none;
    margin-top: var(--space-4);
    transition: all var(--duration-fast) var(--ease-out);
}

.question-link:hover {
    gap: var(--space-3);
}

.question-link svg {
    width: 16px;
    height: 16px;
}

/* Q1 - Tenant Pool */
.tenant-pool-summary {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.pool-total {
    font-family: var(--font-mono);
    font-size: var(--text-4xl);
    font-weight: var(--font-semibold);
    color: var(--accent);
}

.pool-label {
    font-size: var(--text-base);
    color: var(--ink-muted);
}

.archetype-mini-cards {
    display: flex;
    gap: var(--space-3);
    overflow-x: auto;
    padding-bottom: var(--space-2);
}

.archetype-mini {
    flex: 0 0 auto;
    min-width: 120px;
    padding: var(--space-3);
    background: var(--surface-1);
    border: 1px solid var(--surface-3);
    border-radius: var(--radius-md);
    text-align: center;
}

.archetype-mini-icon {
    width: 32px;
    height: 32px;
    background: var(--accent-subtle);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-2);
}

.archetype-mini-icon svg {
    width: 16px;
    height: 16px;
    color: var(--accent);
}

.archetype-mini-name {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--ink);
    margin-bottom: var(--space-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.archetype-mini-pool {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--ink-muted);
}

/* Q2 - Pricing */
.pricing-ladder {
    display: flex;
    gap: 2px;
    height: 48px;
    margin-bottom: var(--space-4);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.pricing-tier {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-2);
    background: var(--surface-2);
    transition: all var(--duration-fast) var(--ease-out);
}

.pricing-tier.active {
    background: var(--accent);
    color: var(--surface-0);
}

.pricing-tier-label {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

.pricing-tier-range {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
}

.pricing-insight {
    font-size: var(--text-sm);
    color: var(--ink-muted);
    line-height: var(--leading-relaxed);
}

/* Q3 - Placement */
.sweet-spots {
    margin-bottom: var(--space-4);
}

.sweet-spot-header,
.avoid-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    margin-bottom: var(--space-3);
}

.sweet-spot-header svg,
.avoid-header svg {
    width: 16px;
    height: 16px;
}

.sweet-spot-header {
    color: var(--positive);
}

.sweet-spot-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.sweet-spot-item {
    padding: var(--space-3);
    background: var(--positive-subtle);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--ink);
}

.sweet-spot-name {
    font-weight: var(--font-semibold);
    margin-bottom: var(--space-1);
}

.sweet-spot-meta {
    font-size: var(--text-xs);
    color: var(--ink-muted);
}

.avoid-zones {
    padding: var(--space-3);
    background: var(--negative-subtle);
    border-radius: var(--radius-md);
}

.avoid-header {
    color: var(--negative);
    margin-bottom: var(--space-2);
}

.avoid-text {
    font-size: var(--text-sm);
    color: var(--negative);
}

/* Q4 - Risk */
.risk-indicators {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.risk-indicator {
    text-align: center;
}

.risk-label {
    display: block;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    margin-bottom: var(--space-2);
}

.risk-value {
    display: block;
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--ink);
    margin-bottom: var(--space-2);
}

.risk-bar {
    height: 6px;
    background: var(--surface-2);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.risk-bar-fill {
    height: 100%;
    background: var(--accent);
    border-radius: var(--radius-full);
    transition: width var(--duration-slow) var(--ease-out);
}

.risk-note {
    font-size: var(--text-sm);
    color: var(--ink-muted);
    line-height: var(--leading-relaxed);
}

/* Q5 - Wedge */
.wedge-highlight {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    color: var(--surface-0);
}

.wedge-title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    margin-bottom: var(--space-4);
}

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

.wedge-detail {
    padding: var(--space-3);
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
}

.wedge-label {
    display: block;
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    opacity: 0.8;
    margin-bottom: var(--space-1);
}

.wedge-value {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ARCHETYPES SECTION
   ═══════════════════════════════════════════════════════════════════════════ */
.archetypes-scroll {
    display: flex;
    gap: var(--space-5);
    overflow-x: auto;
    padding: var(--space-2);
    margin: calc(var(--space-2) * -1);
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
}

.archetype-card {
    position: relative;
    flex: 0 0 280px;
    background: var(--surface-0);
    border: 1px solid var(--surface-3);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
    scroll-snap-align: start;
    transition: all var(--duration-base) var(--ease-out);
    animation: cardEntrance var(--duration-slow) var(--ease-out) backwards;
}

.archetype-card:nth-child(1) { animation-delay: 50ms; }
.archetype-card:nth-child(2) { animation-delay: 100ms; }
.archetype-card:nth-child(3) { animation-delay: 150ms; }
.archetype-card:nth-child(4) { animation-delay: 200ms; }
.archetype-card:nth-child(5) { animation-delay: 250ms; }

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

/* Pool percentage badge with CSS tooltip */
.archetype-pool-pct {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--accent);
    color: white;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
    cursor: help;
}

.archetype-pool-pct.tooltip-trigger {
    position: absolute;
}

.archetype-pool-pct.tooltip-trigger::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: var(--ink);
    color: var(--surface-0);
    padding: 10px 14px;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--font-normal);
    line-height: 1.4;
    width: 240px;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    z-index: 100;
    box-shadow: var(--shadow-lg);
}

.archetype-pool-pct.tooltip-trigger:hover::after {
    opacity: 1;
    visibility: visible;
}

.archetype-header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.archetype-icon {
    width: 52px;
    height: 52px;
    background: var(--accent-subtle);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.archetype-icon svg {
    width: 24px;
    height: 24px;
    color: var(--accent);
}

.archetype-info {
    flex: 1;
    min-width: 0;
}

.archetype-name {
    font-family: var(--font-sans);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--ink);
    margin-bottom: var(--space-1);
}

.archetype-badges {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.archetype-badge {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--ink-muted);
}

.archetype-badge-hub {
    background: var(--accent-subtle);
    color: var(--accent);
}

.archetype-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    padding: var(--space-4);
    background: var(--surface-1);
    border-radius: var(--radius-md);
}

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

.archetype-stat-value {
    font-family: var(--font-mono);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--ink);
}

.archetype-stat-label {
    font-size: var(--text-xs);
    color: var(--ink-muted);
}

.archetype-why {
    font-size: var(--text-sm);
    color: var(--ink-muted);
    line-height: var(--leading-relaxed);
    font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PLAYS SECTION
   ═══════════════════════════════════════════════════════════════════════════ */
.plays-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PLAYS SECTION - Premium Investment Playbook Design
   ═══════════════════════════════════════════════════════════════════════════ */

/* Tier Color Variables - All Teal-based for brand consistency */
.play-card {
    --tier-workforce: #6B9A9A;
    --tier-workforce-subtle: #e8f0f0;
    --tier-standard: #487A7B;
    --tier-standard-subtle: rgba(72, 122, 123, 0.1);
    --tier-premium: #005151;
    --tier-premium-subtle: #e0eaea;
}

/* Base Card */
.play-card {
    position: relative;
    background: var(--surface-0);
    border: 1px solid var(--surface-3);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: all var(--duration-base) var(--ease-out);
    animation: cardEntrance var(--duration-slow) var(--ease-out) backwards;
}

.play-card:nth-child(1) { animation-delay: 50ms; }
.play-card:nth-child(2) { animation-delay: 100ms; }
.play-card:nth-child(3) { animation-delay: 150ms; }
.play-card:nth-child(4) { animation-delay: 200ms; }
.play-card:nth-child(5) { animation-delay: 250ms; }
.play-card:nth-child(6) { animation-delay: 300ms; }
.play-card:nth-child(7) { animation-delay: 350ms; }

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

.play-card--featured {
    border-color: var(--accent);
    border-width: 2px;
    box-shadow: var(--shadow-md), 0 0 0 4px var(--accent-muted);
}

/* Tier Strip - Left edge color indicator */
.play-tier-strip {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    transition: width var(--duration-fast) var(--ease-out);
}

.play-card:hover .play-tier-strip {
    width: 6px;
}

.play-tier-strip--workforce { background: var(--tier-workforce); }
.play-tier-strip--standard { background: var(--tier-standard); }
.play-tier-strip--premium { background: var(--tier-premium); }

/* Header */
.play-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-5) var(--space-6);
    padding-left: calc(var(--space-6) + 8px); /* Account for tier strip */
    background: linear-gradient(to right, var(--surface-1), var(--surface-0));
    cursor: pointer;
    user-select: none;
    transition: background var(--duration-fast) var(--ease-out);
}

.play-header:hover {
    background: linear-gradient(to right, var(--surface-2), var(--surface-1));
}

.play-header-main {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex: 1;
    min-width: 0;
}

/* Rank Badge - Bold oversized */
.play-rank-badge {
    width: 44px;
    height: 44px;
    background: var(--ink);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
}

.play-rank-number {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--surface-0);
    line-height: 1;
}

/* Title Group */
.play-title-group {
    flex: 1;
    min-width: 0;
}

.play-title-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.play-title {
    font-family: var(--font-sans);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--ink);
    line-height: var(--leading-tight);
    margin: 0;
}

/* Boost Badge - Brand Teal (solid, indicates enhancement) */
.play-boost-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    padding: var(--space-1) var(--space-2);
    background: linear-gradient(135deg, #487A7B, #005151);
    color: #fff;
    border-radius: var(--radius-sm);
    box-shadow: 0 1px 2px rgba(72, 122, 123, 0.3);
}

.play-boost-badge svg {
    width: 12px;
    height: 12px;
}

/* Standalone Niche Badge - Brand Teal (outlined, indicates standalone) */
.play-standalone-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    padding: var(--space-1) var(--space-2);
    background: rgba(72, 122, 123, 0.1);
    color: #005151;
    border: 1.5px solid #487A7B;
    border-radius: var(--radius-sm);
}

.play-standalone-badge svg {
    width: 12px;
    height: 12px;
}

/* Tags Row */
.play-tags {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
    flex-wrap: wrap;
}

.play-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--ink-muted);
}

.play-tag svg {
    width: 12px;
    height: 12px;
}

.play-tag--tier {
    font-weight: var(--font-semibold);
}

.play-tag--workforce {
    background: var(--tier-workforce-subtle);
    color: var(--tier-workforce);
}

.play-tag--standard {
    background: var(--tier-standard-subtle);
    color: var(--tier-standard);
}

.play-tag--premium {
    background: var(--tier-premium-subtle);
    color: var(--tier-premium);
}

.play-tag--hub {
    background: var(--surface-2);
    color: var(--ink-subtle);
}

.play-tag--niche {
    background: var(--info-subtle);
    color: var(--info);
}

/* Confidence Ring */
.play-header-meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
}

.play-confidence-ring {
    position: relative;
    width: 48px;
    height: 48px;
}

.play-confidence-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.play-confidence-bg {
    fill: none;
    stroke: var(--surface-3);
    stroke-width: 3;
}

.play-confidence-fill {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dasharray var(--duration-slow) var(--ease-out);
}

.play-confidence-ring--high .play-confidence-fill {
    stroke: var(--positive);
}

.play-confidence-ring--medium .play-confidence-fill {
    stroke: var(--caution);
}

.play-confidence-ring--low .play-confidence-fill {
    stroke: var(--negative);
}

.play-confidence-value {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    color: var(--ink);
}

.play-confidence-label {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
}

.play-expand-icon {
    width: 20px;
    height: 20px;
    color: var(--ink-subtle);
    transition: transform var(--duration-fast) var(--ease-out);
}

.play-card.expanded .play-expand-icon {
    transform: rotate(180deg);
}

/* Preview Row - Collapsed summary */
.play-preview {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-3) var(--space-6);
    padding-left: calc(var(--space-6) + 8px);
    background: var(--surface-1);
    border-top: 1px solid var(--surface-2);
    transition: all var(--duration-fast) var(--ease-out);
}

.play-card.expanded .play-preview {
    display: none;
}

.play-preview-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

.play-preview-item svg {
    width: 14px;
    height: 14px;
    color: var(--ink-subtle);
}

/* Body - Expanded content */
.play-body {
    padding: var(--space-6);
    padding-left: calc(var(--space-6) + 8px);
    display: none;
    background: var(--surface-0);
    border-top: 1px solid var(--surface-2);
    animation: slideDown var(--duration-base) var(--ease-out);
}

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

.play-card.expanded .play-body {
    display: block;
}

/* Section Headers */
.play-section {
    margin-bottom: var(--space-6);
}

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

.play-section-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--ink-muted);
    margin-bottom: var(--space-4);
}

.play-section-header svg {
    width: 14px;
    height: 14px;
    color: var(--accent);
}

/* Product Promise Chips */
.play-promise-chips {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.play-promise-chip {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--positive-subtle);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--positive);
}

.play-promise-chip svg {
    width: 16px;
    height: 16px;
    color: var(--positive);
    flex-shrink: 0;
    margin-top: 1px;
}

.play-promise-chip span {
    font-size: var(--text-sm);
    color: var(--ink);
    line-height: var(--leading-snug);
}

/* Framework Grid */
.play-framework-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-3);
}

.play-framework-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--surface-1);
    border-radius: var(--radius-md);
    border: 1px solid var(--surface-2);
    transition: all var(--duration-fast) var(--ease-out);
}

.play-framework-item:hover {
    background: var(--surface-2);
    border-color: var(--surface-3);
}

.play-framework-icon {
    width: 32px;
    height: 32px;
    background: var(--accent-subtle);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.play-framework-icon svg {
    width: 16px;
    height: 16px;
    color: var(--accent);
}

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

.play-framework-label {
    display: block;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--ink-subtle);
    margin-bottom: var(--space-1);
}

.play-framework-value {
    font-size: var(--text-sm);
    color: var(--ink);
    line-height: var(--leading-snug);
}

/* Falsify Box */
.play-falsify-box {
    background: linear-gradient(to right, var(--caution-subtle), transparent);
    border: 1px solid rgba(184, 134, 11, 0.2);
    border-left: 4px solid var(--caution);
    border-radius: var(--radius-md);
    padding: var(--space-4);
}

.play-falsify-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--caution);
    margin-bottom: var(--space-3);
}

.play-falsify-header svg {
    width: 16px;
    height: 16px;
}

.play-falsify-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.play-falsify-list li {
    font-size: var(--text-sm);
    color: var(--ink-muted);
    padding-left: var(--space-4);
    position: relative;
}

.play-falsify-list li::before {
    content: '•';
    position: absolute;
    left: var(--space-1);
    color: var(--caution);
}

/* Empty State */
.plays-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-12) var(--space-6);
    background: var(--surface-1);
    border: 2px dashed var(--surface-3);
    border-radius: var(--radius-xl);
    text-align: center;
}

.plays-empty-state svg {
    width: 48px;
    height: 48px;
    color: var(--ink-subtle);
    margin-bottom: var(--space-4);
}

.plays-empty-state p {
    font-size: var(--text-base);
    color: var(--ink-muted);
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   INDICES SECTION (TABS)
   ═══════════════════════════════════════════════════════════════════════════ */
.indices-section {
    background: var(--surface-0);
    border: 1px solid var(--surface-3);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    box-shadow: var(--shadow-sm);
}

.indices-tabs {
    margin-top: var(--space-6);
}

.tab-buttons {
    display: flex;
    gap: var(--space-2);
    border-bottom: 1px solid var(--surface-3);
    padding-bottom: var(--space-4);
    overflow-x: auto;
}

.tab-btn {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--ink-muted);
    background: none;
    border: none;
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-md);
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--duration-fast) var(--ease-out);
}

.tab-btn:hover {
    color: var(--ink);
    background: var(--surface-1);
}

.tab-btn.active {
    color: var(--surface-0);
    background: var(--accent);
}

.tab-panels {
    padding-top: var(--space-6);
}

.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
    animation: fadeIn var(--duration-base) var(--ease-out);
}

@keyframes fadeIn {
    from { opacity: 0; }
}

.index-content {
    display: grid;
    gap: var(--space-6);
}

.index-score-display {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-6);
    background: var(--surface-1);
    border-radius: var(--radius-lg);
}

.index-score-value {
    font-family: var(--font-mono);
    font-size: var(--text-5xl);
    font-weight: var(--font-semibold);
    color: var(--accent);
}

.index-score-meta {
    flex: 1;
}

.index-score-label {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--ink);
    margin-bottom: var(--space-1);
}

.index-score-desc {
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

.index-drivers {
    display: grid;
    gap: var(--space-4);
}

.index-driver {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--surface-1);
    border-radius: var(--radius-md);
}

.index-driver-label {
    flex: 1;
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

.index-driver-bar {
    width: 120px;
    height: 8px;
    background: var(--surface-3);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.index-driver-fill {
    height: 100%;
    background: var(--accent);
    border-radius: var(--radius-full);
}

.index-driver-value {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--ink);
    min-width: 40px;
    text-align: right;
}

.index-interpretation {
    margin-top: var(--space-4);
    padding: var(--space-4);
    background: var(--surface-2);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--ink-muted);
    line-height: 1.6;
    border-left: 3px solid var(--accent);
}

/* ═══════════════════════════════════════════════════════════════════════════
   RICH INDEX COMPONENTS (V4 Design Language)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Index Card Header */
.index-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--surface-3);
}

.index-number {
    width: 36px;
    height: 36px;
    background: var(--accent);
    color: var(--surface-0);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-weight: var(--font-semibold);
    font-size: var(--text-lg);
}

.index-header-text h3 {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    color: var(--ink);
    margin-bottom: var(--space-1);
}

.index-header-text .index-subtitle {
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

.index-confidence {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--positive-subtle);
    color: var(--positive);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
}

.index-confidence.medium {
    background: var(--caution-subtle);
    color: var(--caution);
}

.index-confidence.low {
    background: var(--negative-subtle);
    color: var(--negative);
}

.index-confidence svg {
    width: 14px;
    height: 14px;
}

/* Mini-Cards Grid */
.index-mini-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    margin-top: var(--space-6);
}

.index-mini-card {
    background: var(--surface-1);
    border: 1px solid var(--surface-3);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    position: relative;
}

.index-mini-card-label {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    width: 24px;
    height: 24px;
    background: var(--accent-muted);
    color: var(--accent);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
}

.index-mini-card-header {
    margin-bottom: var(--space-4);
    padding-left: var(--space-8);
}

.index-mini-card-title {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--ink);
    margin-bottom: var(--space-1);
}

.index-mini-card-source {
    font-size: var(--text-xs);
    color: var(--ink-subtle);
}

.index-mini-card-score {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.index-mini-card-score-value {
    font-family: var(--font-mono);
    font-size: var(--text-2xl);
    font-weight: var(--font-semibold);
    color: var(--accent);
}

.index-mini-card-score-band {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--positive-subtle);
    color: var(--positive);
}

.index-mini-card-score-band.medium {
    background: var(--caution-subtle);
    color: var(--caution);
}

.index-mini-card-score-band.weak,
.index-mini-card-score-band.low {
    background: var(--negative-subtle);
    color: var(--negative);
}

.index-mini-card-metrics {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.index-metric-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--text-sm);
}

.index-metric-name {
    color: var(--ink-muted);
}

.index-metric-value {
    font-family: var(--font-mono);
    font-weight: var(--font-medium);
    color: var(--ink);
}

.index-metric-tag {
    font-size: var(--text-xs);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    margin-left: var(--space-2);
}

.index-metric-tag.strong {
    background: var(--positive-subtle);
    color: var(--positive);
}

.index-metric-tag.medium {
    background: var(--caution-subtle);
    color: var(--caution);
}

.index-metric-tag.weak {
    background: var(--surface-2);
    color: var(--ink-subtle);
}

/* Mini-card implication box (explanation at bottom) */
.index-mini-card-implication {
    margin-top: var(--space-3);
    padding: var(--space-3);
    background: var(--surface-1);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--ink-muted);
    line-height: 1.5;
    font-style: italic;
    border-left: 3px solid var(--accent);
}

/* Mini-card title tooltip */
.index-mini-card-title.tooltip-trigger {
    position: relative;
    cursor: help;
}

.index-mini-card-title.tooltip-trigger::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: 8px;
    background: var(--ink);
    color: var(--surface-0);
    padding: 10px 14px;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--font-normal);
    font-style: normal;
    line-height: 1.4;
    width: 260px;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    z-index: 100;
    box-shadow: var(--shadow-lg);
}

.index-mini-card-title.tooltip-trigger:hover::after {
    opacity: 1;
    visibility: visible;
}

/* Bucket/POI bars for Card C */
.bucket-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.bucket-name {
    width: 100px;
    font-size: var(--text-sm);
    color: var(--ink-muted);
    flex-shrink: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bucket-bar-container {
    flex: 1;
    height: 8px;
    background: var(--surface-2);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.bucket-bar {
    height: 100%;
    background: var(--accent);
    border-radius: var(--radius-full);
    transition: width var(--transition-slow);
}

.bucket-value {
    width: 36px;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--ink);
    text-align: right;
}

/* Industry Pillars */
.index-pillars {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.index-pillar {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--surface-0);
    border: 1px solid var(--surface-3);
    border-radius: var(--radius-md);
}

.index-pillar-icon {
    width: 32px;
    height: 32px;
    background: var(--accent-subtle);
    color: var(--accent);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.index-pillar-icon svg {
    width: 16px;
    height: 16px;
}

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

.index-pillar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-1);
}

.index-pillar-name {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--ink);
}

.index-pillar-jobs {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--ink-muted);
}

.index-pillar-badge {
    font-size: var(--text-xs);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    background: var(--accent-subtle);
    color: var(--accent);
    font-weight: var(--font-medium);
}

.index-pillar-badge.hub {
    background: var(--positive-subtle);
    color: var(--positive);
}

.index-pillar-context {
    font-size: var(--text-xs);
    color: var(--ink-subtle);
    margin-top: var(--space-1);
}

/* Signal Rows */
.index-signals {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-top: var(--space-4);
}

.index-signal-row {
    background: var(--surface-1);
    border-radius: var(--radius-md);
    padding: var(--space-4);
}

.index-signal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-2);
}

.index-signal-label {
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

.index-signal-value {
    font-family: var(--font-mono);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--ink);
}

.index-signal-note {
    font-size: var(--text-xs);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    margin-left: var(--space-2);
}

.index-signal-note.high {
    background: var(--pressure-subtle);
    color: var(--pressure);
}

.index-signal-note.elevated {
    background: var(--caution-subtle);
    color: var(--caution);
}

.index-signal-note.moderate,
.index-signal-note.balanced {
    background: var(--surface-2);
    color: var(--ink-muted);
}

.index-signal-note.tight {
    background: var(--positive-subtle);
    color: var(--positive);
}

.index-signal-bar-container {
    position: relative;
    margin-bottom: var(--space-2);
}

.index-signal-bar {
    height: 8px;
    background: var(--surface-3);
    border-radius: var(--radius-full);
    overflow: visible;
    position: relative;
}

.index-signal-fill {
    height: 100%;
    border-radius: var(--radius-full);
    transition: width var(--duration-slow) var(--ease-out);
}

.index-signal-fill.high {
    background: var(--pressure);
}

.index-signal-fill.moderate {
    background: var(--pressure-moderate);
}

.index-signal-fill.low {
    background: var(--caution);
}

/* US Average Marker Line (on bar) */
.index-signal-us-avg-marker {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--ink-subtle);
    transform: translateX(-50%);
    z-index: 2;
    opacity: 0.7;
}

.index-signal-values {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* Scale Row (Left - Center US Avg - Right) */
.index-signal-scale {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--text-xs);
    color: var(--ink-subtle);
    margin-top: var(--space-2);
}

.index-signal-scale .scale-left,
.index-signal-scale .scale-right {
    flex: 0 0 auto;
}

.index-signal-scale .scale-center {
    flex: 1;
    text-align: center;
}

.us-avg-badge {
    display: inline-block;
    padding: var(--space-1) var(--space-2);
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    font-size: 10px;
    color: var(--ink-muted);
    white-space: nowrap;
}

/* US Avg Badge with tooltip */
.us-avg-badge.has-tooltip {
    position: relative;
    cursor: help;
    transition: background var(--duration-fast) var(--ease-out);
}

.us-avg-badge.has-tooltip:hover {
    background: var(--surface-3);
}

.us-avg-badge.has-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    padding: var(--space-3);
    background: var(--ink-base);
    color: var(--surface-base);
    font-size: 11px;
    line-height: 1.4;
    border-radius: var(--radius-md);
    white-space: normal;
    width: max-content;
    max-width: 280px;
    text-align: left;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--duration-fast) var(--ease-out),
                visibility var(--duration-fast) var(--ease-out);
    pointer-events: none;
    box-shadow: var(--shadow-lg);
}

.us-avg-badge.has-tooltip::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--ink-base);
    z-index: 101;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--duration-fast) var(--ease-out),
                visibility var(--duration-fast) var(--ease-out);
}

.us-avg-badge.has-tooltip:hover::after,
.us-avg-badge.has-tooltip:hover::before {
    opacity: 1;
    visibility: visible;
}

/* Hint Text (below scale) */
.index-signal-hint {
    font-size: var(--text-xs);
    color: var(--ink-subtle);
    text-align: center;
    margin-top: var(--space-2);
}

/* Legacy markers (kept for backwards compatibility) */
.index-signal-markers {
    display: flex;
    justify-content: space-between;
    font-size: var(--text-xs);
    color: var(--ink-subtle);
    margin-top: var(--space-4);
}

/* Mode Strip */
.index-mode-strip {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--surface-1);
    border-radius: var(--radius-lg);
    border-left: 4px solid var(--accent);
    margin-top: var(--space-4);
}

.index-mode-strip.need-led {
    border-left-color: var(--pressure);
}

.index-mode-strip.choice-led {
    border-left-color: var(--positive);
}

.index-mode-icon {
    width: 40px;
    height: 40px;
    background: var(--accent-subtle);
    color: var(--accent);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.index-mode-strip.need-led .index-mode-icon {
    background: var(--pressure-subtle);
    color: var(--pressure);
}

.index-mode-strip.choice-led .index-mode-icon {
    background: var(--positive-subtle);
    color: var(--positive);
}

.index-mode-icon svg {
    width: 20px;
    height: 20px;
}

.index-mode-content {
    flex: 1;
}

.index-mode-label {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--ink);
    margin-bottom: var(--space-1);
}

.index-mode-meaning {
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

/* Dual Score Display */
.index-dual-scores {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.index-score-box {
    background: var(--surface-1);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    text-align: center;
    border: 1px solid var(--surface-3);
}

.index-score-box-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

.index-score-box-header svg {
    width: 16px;
    height: 16px;
}

.index-score-box-value {
    font-family: var(--font-mono);
    font-size: var(--text-4xl);
    font-weight: var(--font-semibold);
    color: var(--accent);
    margin-bottom: var(--space-2);
}

.index-score-box-label {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    display: inline-block;
}

.index-score-box.flow .index-score-box-value {
    color: var(--positive);
}

.index-score-box.churn .index-score-box-value {
    color: var(--caution);
}

/* Pricing Ladder Grid */
.index-pricing-ladder {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    margin: var(--space-6) 0;
}

.index-tier-card {
    background: var(--surface-1);
    border: 2px solid var(--surface-3);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    text-align: center;
    transition: all var(--duration-fast) var(--ease-out);
}

.index-tier-card.largest {
    border-color: var(--accent);
    background: var(--accent-subtle);
}

.index-tier-name {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--ink);
    margin-bottom: var(--space-2);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

.index-tier-price {
    font-family: var(--font-mono);
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    color: var(--accent);
    margin-bottom: var(--space-2);
}

.index-tier-pool {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-sm);
    color: var(--ink-muted);
    padding: var(--space-1) var(--space-3);
    background: var(--surface-2);
    border-radius: var(--radius-full);
}

.index-tier-card.largest .index-tier-pool {
    background: var(--accent-muted);
    color: var(--accent);
}

/* Reality Check */
.index-reality-check {
    background: var(--surface-1);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-top: var(--space-4);
}

.index-reality-title {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--ink);
    margin-bottom: var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.index-reality-title svg {
    width: 16px;
    height: 16px;
    color: var(--accent);
}

.index-reality-rows {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.index-reality-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3);
    background: var(--surface-0);
    border-radius: var(--radius-md);
    border: 1px solid var(--surface-3);
}

.index-reality-source {
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

.index-reality-value {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--ink);
}

.index-reality-diff {
    font-size: var(--text-xs);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    margin-left: var(--space-2);
}

.index-reality-diff.higher {
    background: var(--caution-subtle);
    color: var(--caution);
}

.index-reality-diff.lower {
    background: var(--positive-subtle);
    color: var(--positive);
}

.index-reality-diff.aligned {
    background: var(--surface-2);
    color: var(--ink-muted);
}

.index-reality-insight {
    margin-top: var(--space-4);
    padding: var(--space-4);
    background: var(--surface-2);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--ink-muted);
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.index-reality-insight svg {
    width: 16px;
    height: 16px;
    color: var(--accent);
    flex-shrink: 0;
    margin-top: 2px;
}

/* Next Moves */
.index-next-moves {
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--surface-3);
}

.index-next-moves-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--ink);
    margin-bottom: var(--space-4);
}

.index-next-moves-title svg {
    width: 16px;
    height: 16px;
    color: var(--accent);
}

.index-next-moves-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.index-next-move {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--surface-1);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

.index-next-move-icon {
    width: 28px;
    height: 28px;
    background: var(--accent-subtle);
    color: var(--accent);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.index-next-move-icon svg {
    width: 14px;
    height: 14px;
}

/* ZIP Rankings */
.index-zip-rankings {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.index-zip-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--surface-1);
    border-radius: var(--radius-md);
    border: 1px solid var(--surface-3);
}

.index-zip-rank {
    font-family: var(--font-mono);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--accent);
    width: 32px;
}

.index-zip-info {
    flex: 1;
}

.index-zip-code {
    font-family: var(--font-mono);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--ink);
    margin-bottom: var(--space-1);
}

.index-zip-meta {
    font-size: var(--text-xs);
    color: var(--ink-muted);
}

.index-zip-score {
    font-family: var(--font-mono);
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    color: var(--accent);
}

/* Competition Tiles */
.index-driver-tiles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    margin: var(--space-4) 0;
}

.index-driver-tile {
    background: var(--surface-1);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    text-align: center;
    border: 1px solid var(--surface-3);
}

.index-driver-tile-label {
    font-size: var(--text-xs);
    color: var(--ink-subtle);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    margin-bottom: var(--space-2);
}

.index-driver-tile-value {
    font-family: var(--font-mono);
    font-size: var(--text-2xl);
    font-weight: var(--font-semibold);
    color: var(--ink);
}

.index-driver-tile-note {
    font-size: var(--text-xs);
    color: var(--ink-muted);
    margin-top: var(--space-1);
}

/* Renter Chips */
.index-renter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.index-renter-chip {
    background: var(--surface-1);
    border: 1px solid var(--surface-3);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.index-renter-chip-icon {
    width: 32px;
    height: 32px;
    background: var(--accent-subtle);
    color: var(--accent);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.index-renter-chip-icon svg {
    width: 16px;
    height: 16px;
}

.index-renter-chip-name {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--ink);
}

.index-renter-chip-pool {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--ink-muted);
}

.index-renter-chip-confidence {
    font-size: var(--text-xs);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
}

.index-renter-chip-confidence.high {
    background: var(--positive-subtle);
    color: var(--positive);
}

.index-renter-chip-confidence.medium {
    background: var(--caution-subtle);
    color: var(--caution);
}

/* ═══════════════════════════════════════════════════════════════════════════
   INDEX 1 ENHANCED COMPONENTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Confidence Tooltip */
.index-confidence.tooltip-trigger {
    position: relative;
    cursor: help;
}

.confidence-tooltip {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 100;
    width: 280px;
    padding: var(--space-4);
    background: var(--surface-0);
    border: 1px solid var(--surface-3);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    font-size: var(--text-xs);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all var(--duration-fast) var(--ease-out);
    margin-top: var(--space-2);
}

.index-confidence.tooltip-trigger:hover .confidence-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.confidence-tooltip strong {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--ink);
    font-size: var(--text-sm);
}

.confidence-tooltip ul {
    margin: 0;
    padding-left: var(--space-4);
    color: var(--ink-muted);
    line-height: var(--leading-relaxed);
}

.confidence-tooltip li {
    margin-bottom: var(--space-1);
}

/* Info Icon Tooltips */
.info-tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: var(--space-1);
    cursor: help;
}

.info-tooltip svg {
    width: 14px;
    height: 14px;
    color: var(--ink-subtle);
    transition: color var(--duration-fast) var(--ease-out);
}

.info-tooltip:hover svg {
    color: var(--accent);
}

.info-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--ink);
    color: var(--surface-0);
    font-size: var(--text-xs);
    font-weight: var(--font-normal);
    line-height: var(--leading-snug);
    white-space: normal;
    width: max-content;
    max-width: 240px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transition: all var(--duration-fast) var(--ease-out);
    text-transform: none;
    letter-spacing: normal;
    z-index: 100;
    pointer-events: none;
}

.info-tooltip::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: -4px;
    border: 6px solid transparent;
    border-top-color: var(--ink);
    opacity: 0;
    visibility: hidden;
    transition: all var(--duration-fast) var(--ease-out);
    z-index: 101;
}

.info-tooltip:hover::after,
.info-tooltip:hover::before {
    opacity: 1;
    visibility: visible;
}

/* Influence Bars (5-bar visualization) */
.index-influence-section {
    margin-top: var(--space-5);
    padding: var(--space-4);
    background: var(--surface-1);
    border-radius: var(--radius-lg);
}

.index-influence-title {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--ink);
    margin: 0 0 var(--space-4) 0;
}

.index-influence-rows {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.index-influence-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.index-influence-label {
    width: 120px;
    font-size: var(--text-xs);
    color: var(--ink-muted);
    flex-shrink: 0;
}

.index-influence-bars {
    display: flex;
    gap: 4px;
    flex: 1;
}

.influence-bar {
    width: 24px;
    height: 8px;
    background: var(--surface-3);
    border-radius: 2px;
    transition: background var(--duration-base) var(--ease-out);
}

.influence-bar.filled.high {
    background: var(--positive);
}

.influence-bar.filled.medium {
    background: var(--caution);
}

.influence-bar.filled.low {
    background: var(--accent);
}

.index-influence-amount {
    width: 60px;
    font-size: var(--text-xs);
    color: var(--ink-subtle);
    text-align: right;
}

/* Interpretation Box */
.index-interpretation-box {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-top: var(--space-5);
    padding: var(--space-4);
    background: var(--accent-subtle);
    border-radius: var(--radius-lg);
    border-left: 4px solid var(--accent);
}

.index-interpretation-box svg {
    width: 20px;
    height: 20px;
    color: var(--accent);
    flex-shrink: 0;
    margin-top: 2px;
}

.index-interpretation {
    font-size: var(--text-sm);
    color: var(--ink);
    line-height: var(--leading-relaxed);
    margin: 0;
}

/* Section Title */
.index-section-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--ink);
    margin: 0 0 var(--space-4) 0;
}

.index-section-title svg {
    width: 18px;
    height: 18px;
    color: var(--accent);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOP DRIVERS SECTION (Index 1 specific)
   ═══════════════════════════════════════════════════════════════════════════ */
.index-top-drivers {
    margin-top: var(--space-6);
    padding: var(--space-5);
    background: var(--surface-1);
    border-radius: var(--radius-lg);
    border: 1px solid var(--surface-3);
}

.driver-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.driver-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--surface-0);
    border-radius: var(--radius-md);
    border: 1px solid var(--surface-2);
    transition: all var(--duration-base) var(--ease-out);
}

.driver-item:hover {
    border-color: var(--accent-muted);
    box-shadow: var(--shadow-sm);
}

.driver-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-subtle);
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.driver-icon svg {
    width: 18px;
    height: 18px;
    color: var(--accent);
}

.driver-text {
    flex: 1;
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
}

.driver-text strong {
    color: var(--ink);
    font-weight: var(--font-semibold);
}

.driver-why {
    color: var(--ink-muted);
    font-weight: var(--font-normal);
}

/* Quadrant inline styling for Pressure tab */
.index-quadrant-section {
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--surface-3);
}

.quadrant-panel-inline {
    display: flex;
    gap: var(--space-6);
    align-items: flex-start;
}

@media (max-width: 768px) {
    .quadrant-panel-inline {
        flex-direction: column;
    }
}

.index-renter-chips-section {
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--surface-3);
}

/* Enhanced Renter Chips */
.index-renter-chip-enhanced {
    background: var(--surface-1);
    border: 1px solid var(--surface-3);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    flex: 1;
    min-width: 200px;
}

.index-renter-chip-header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.index-renter-chip-info {
    flex: 1;
}

.index-renter-chip-stats {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-1);
}

.index-renter-chip-pct {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--accent);
    background: var(--accent-subtle);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

.index-renter-chip-why {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--surface-3);
    font-size: var(--text-xs);
    color: var(--ink-muted);
    font-style: italic;
    line-height: var(--leading-relaxed);
}

/* Enhanced Pillar Cards */
.index-pillars-enhanced {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.index-pillar-card {
    padding: var(--space-3);
    background: var(--surface-0);
    border: 1px solid var(--surface-3);
    border-radius: var(--radius-md);
}

.index-pillar-card .index-pillar-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: 0;
}

.index-pillar-main {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* LQ Badges */
.index-lq-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: var(--font-semibold);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    margin-top: var(--space-2);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

.index-lq-badge.regional-hub {
    background: var(--positive-subtle);
    color: var(--positive);
}

.index-lq-badge.local-concentration {
    background: var(--accent-subtle);
    color: var(--accent);
}

/* LQ Explanation */
.index-pillar-lq {
    font-size: var(--text-xs);
    color: var(--positive);
    margin-top: var(--space-2);
    padding: var(--space-2);
    background: var(--positive-subtle);
    border-radius: var(--radius-sm);
}

.index-pillar-lq.muted {
    background: var(--surface-2);
    color: var(--ink-subtle);
}

/* Anchor Context */
.index-pillar-anchor {
    font-size: var(--text-xs);
    color: var(--ink-muted);
    margin-top: var(--space-2);
}

/* Pillars Summary */
.index-pillars-summary {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--surface-3);
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

.index-pillars-summary strong {
    color: var(--accent);
}

/* No Data State */
.index-no-data {
    font-size: var(--text-sm);
    color: var(--ink-subtle);
    margin: 0;
    padding: var(--space-3);
    background: var(--surface-2);
    border-radius: var(--radius-md);
    text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   INDEX 2 ENHANCED COMPONENTS (Pricing)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Dual Score Display */
.index-dual-scores {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.index-posture-display {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    padding: var(--space-4);
    background: var(--surface-1);
    border-radius: var(--radius-lg);
    border-left: 4px solid var(--accent);
}

.index-posture-display.validate-first {
    border-left-color: var(--caution);
}

.index-posture-display.value-first {
    border-left-color: var(--negative);
}

.index-posture-display.mid-market-led {
    border-left-color: var(--accent);
}

.index-posture-display.premium-capable {
    border-left-color: var(--positive);
}

.index-posture-label {
    font-size: var(--text-xs);
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

.index-posture-value {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    color: var(--ink);
}

/* Enhanced Tier Cards */
.index-tier-card {
    position: relative;
    padding: var(--space-5) var(--space-4);
}

.index-tier-badge {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    font-size: 9px;
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    padding: 2px 8px;
    background: var(--positive-subtle);
    color: var(--positive);
    border-radius: var(--radius-full);
}

.index-tier-pool-bar {
    height: 8px;
    background: var(--surface-3);
    border-radius: var(--radius-full);
    margin: var(--space-2) 0;
    overflow: hidden;
}

.index-tier-pool-fill {
    height: 100%;
    background: var(--accent);
    border-radius: var(--radius-full);
    transition: width var(--duration-slow) var(--ease-out);
}

.index-tier-card.largest .index-tier-pool-fill {
    background: var(--positive);
}

/* Wage Anchors Section */
.index-anchors-section {
    margin: var(--space-5) 0;
    padding: var(--space-4);
    background: var(--surface-1);
    border-radius: var(--radius-lg);
}

.index-anchors-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--ink);
    margin-bottom: var(--space-4);
}

.index-anchors-title svg {
    width: 16px;
    height: 16px;
    color: var(--accent);
}

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

.index-anchor-item {
    text-align: center;
    padding: var(--space-3);
    background: var(--surface-0);
    border-radius: var(--radius-md);
    border: 1px solid var(--surface-3);
}

.index-anchor-label {
    display: block;
    font-size: var(--text-xs);
    color: var(--ink-muted);
    margin-bottom: var(--space-1);
}

.index-anchor-value {
    font-family: var(--font-mono);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--ink);
}

/* ═══════════════════════════════════════════════════════════════════════════
   INDEX 2: PRICING LADDER - V3-STYLE REDESIGN (Premium Aesthetics)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Score Section with Tier Band */
.pricing-score-section {
    margin-bottom: var(--space-6);
}

.pricing-score-value {
    font-family: var(--font-display);
    font-size: var(--text-5xl);
    font-weight: var(--font-bold);
    color: var(--ink);
    line-height: var(--leading-none);
    margin-bottom: var(--space-3);
}

.pricing-tier-band {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-wider);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    background: var(--caution-subtle);
    color: var(--caution);
    border: 1px solid var(--caution);
}

.pricing-tier-band.premium {
    background: linear-gradient(135deg, rgba(45, 106, 106, 0.15) 0%, rgba(45, 106, 106, 0.06) 100%);
    color: var(--accent);
    border-color: var(--accent);
}

.pricing-tier-band.premium_soft {
    background: var(--positive-subtle);
    color: var(--positive);
    border-color: var(--positive);
}

.pricing-tier-band.standard {
    background: var(--accent-subtle);
    color: var(--accent);
    border-color: var(--accent);
}

.pricing-tier-band.workforce {
    background: var(--info-subtle);
    color: var(--info);
    border-color: var(--info);
}

/* Three-Tier Pricing Card Grid */
.pricing-ladder-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    margin: var(--space-6) 0;
}

.pricing-tier-card {
    background: var(--surface-0);
    border: 2px solid var(--surface-3);
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-4);
    text-align: center;
    transition: all var(--duration-base) var(--ease-out);
    position: relative;
}

.pricing-tier-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.pricing-tier-card.sweet-spot {
    border-color: var(--accent);
    background: linear-gradient(180deg, var(--accent-subtle) 0%, var(--surface-0) 100%);
    box-shadow: 0 0 0 1px var(--accent-muted), var(--shadow-sm);
}

.tier-header {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--ink-muted);
    margin-bottom: var(--space-3);
}

.pricing-tier-card.sweet-spot .tier-header {
    color: var(--accent);
}

.tier-price-range {
    font-family: var(--font-mono);
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    color: var(--ink);
    margin-bottom: var(--space-3);
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 2px;
}

.pricing-tier-card.sweet-spot .tier-price-range {
    color: var(--accent);
}

.tier-currency {
    font-size: var(--text-base);
    opacity: 0.7;
}

.tier-separator {
    margin: 0 var(--space-1);
    opacity: 0.5;
}

.tier-pool-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--ink-muted);
    padding: var(--space-1) var(--space-3);
    background: var(--surface-2);
    border-radius: var(--radius-full);
}

.tier-pool-badge.sweet-spot {
    background: var(--accent);
    color: white;
    font-weight: var(--font-semibold);
}

.tier-pool-badge.sweet-spot svg {
    width: 14px;
    height: 14px;
}

/* Pricing Tier Card Tooltips */
.pricing-tier-card.tooltip-trigger {
    cursor: help;
}

.pricing-tier-card.tooltip-trigger::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    padding: var(--space-3) var(--space-4);
    background: var(--ink);
    color: var(--surface-0);
    font-size: var(--text-sm);
    font-weight: var(--font-normal);
    text-transform: none;
    letter-spacing: normal;
    text-align: left;
    line-height: 1.4;
    border-radius: var(--radius-md);
    white-space: normal;
    width: 240px;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--duration-base) var(--ease-out), visibility var(--duration-base) var(--ease-out);
    z-index: 100;
    pointer-events: none;
    box-shadow: var(--shadow-lg);
}

.pricing-tier-card.tooltip-trigger::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--ink);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--duration-base) var(--ease-out), visibility var(--duration-base) var(--ease-out);
    z-index: 100;
}

.pricing-tier-card.tooltip-trigger:hover::after,
.pricing-tier-card.tooltip-trigger:hover::before {
    opacity: 1;
    visibility: visible;
}

/* Stats Row: Typical Budget + Upgrade Pool */
.pricing-stats-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin: var(--space-6) 0;
}

.pricing-stat-box {
    background: var(--surface-1);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    border-left: 4px solid var(--accent);
}

.stat-box-label {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--caution);
    margin-bottom: var(--space-2);
}

.stat-box-value {
    font-family: var(--font-mono);
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    color: var(--ink);
    line-height: var(--leading-tight);
    margin-bottom: var(--space-2);
}

.stat-box-context {
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

/* Market Reality Section */
.market-reality-section {
    background: var(--surface-0);
    border: 1px solid var(--surface-3);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin: var(--space-6) 0;
    border-left: 4px solid var(--accent);
}

.reality-section-title {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    color: var(--ink);
    margin-bottom: var(--space-5);
}

.reality-comparison-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.reality-row {
    display: grid;
    grid-template-columns: 120px 100px auto 1fr;
    gap: var(--space-3);
    align-items: center;
}

.reality-row-label {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--ink-muted);
}

.reality-row.wages .reality-row-label {
    color: var(--accent);
    border-left: 3px solid var(--accent);
    padding-left: var(--space-2);
}

/* Wages row without bar - adjust grid */
.reality-row.no-bar {
    grid-template-columns: 120px 100px auto;
}

.reality-row-value {
    font-family: var(--font-mono);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--ink);
}

.reality-diff-badge {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    margin-left: var(--space-2);
}

.reality-diff-badge.higher {
    background: var(--caution-subtle);
    color: var(--caution);
}

.reality-diff-badge.lower {
    background: var(--positive-subtle);
    color: var(--positive);
}

.reality-diff-badge.aligned {
    background: var(--surface-2);
    color: var(--ink-muted);
}

.reality-row-context {
    font-size: var(--text-xs);
    color: var(--ink-subtle);
}

.reality-bar-container {
    height: 8px;
    background: var(--surface-2);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.reality-bar {
    height: 100%;
    border-radius: var(--radius-full);
    transition: width var(--duration-slow) var(--ease-out);
}

.reality-bar.wages-bar {
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent-hover) 100%);
}

.reality-bar.listings-bar {
    background: var(--ink-muted);
}

.reality-bar.listings-bar.lower {
    background: var(--positive);
}

.reality-bar.listings-bar.higher {
    background: var(--caution);
}

.reality-bar.seekers-bar {
    background: var(--ink-subtle);
}

.reality-bar.seekers-bar.lower {
    background: var(--positive);
}

.reality-bar.seekers-bar.higher {
    background: var(--caution);
}

.reality-insight-box {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-top: var(--space-5);
    padding: var(--space-4);
    background: linear-gradient(135deg, var(--accent-subtle) 0%, var(--surface-1) 100%);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--accent);
}

.reality-insight-box svg {
    width: 18px;
    height: 18px;
    color: var(--accent);
    flex-shrink: 0;
    margin-top: 2px;
}

.reality-insight-box span {
    font-size: var(--text-sm);
    color: var(--ink);
    line-height: var(--leading-relaxed);
}

.reality-insight-box strong {
    color: var(--ink);
    font-weight: var(--font-semibold);
}

/* Confidence List (Index 1 style - for Index 2) */
.index-confidence-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.index-confidence-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

.index-confidence-item svg {
    width: 14px;
    height: 14px;
    color: var(--positive);
    flex-shrink: 0;
}

/* Inventory Mix Section */
.inventory-mix-section {
    background: var(--surface-1);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin: var(--space-6) 0;
}

.inventory-mix-title {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    color: var(--ink);
    margin-bottom: var(--space-3);
}

.inventory-mix-text {
    font-size: var(--text-sm);
    color: var(--ink-muted);
    line-height: var(--leading-relaxed);
}

.inventory-mix-text strong {
    color: var(--ink);
    font-weight: var(--font-semibold);
}

/* Next Moves Section (Dark themed) */
.pricing-next-moves {
    background: var(--surface-inverse);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin: var(--space-6) 0;
}

.next-moves-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: var(--space-4);
}

.next-moves-header svg {
    width: 16px;
    height: 16px;
    color: var(--accent);
}

.next-moves-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.next-move-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.85);
    line-height: var(--leading-relaxed);
}

.move-arrow {
    color: var(--accent);
    font-weight: var(--font-bold);
    flex-shrink: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .pricing-ladder-grid {
        grid-template-columns: 1fr;
    }

    .pricing-stats-row {
        grid-template-columns: 1fr;
    }

    .reality-row {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }

    .reality-bar-container {
        margin-top: var(--space-2);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   INDEX 3 ENHANCED COMPONENTS (Pressure)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Mode Badge (for dual score display) */
.index-mode-badge {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--surface-1);
    border-radius: var(--radius-lg);
    border-left: 4px solid var(--caution);
}

.index-mode-badge.need-led {
    border-left-color: var(--pressure);
    background: var(--pressure-subtle);
}

.index-mode-badge.choice-led {
    border-left-color: var(--positive);
    background: var(--positive-subtle);
}

.index-mode-badge svg {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.index-mode-badge.need-led svg { color: var(--pressure); }
.index-mode-badge.choice-led svg { color: var(--positive); }
.index-mode-badge:not(.need-led):not(.choice-led) svg { color: var(--caution); }

.index-mode-badge-label {
    display: block;
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--ink);
}

.index-mode-badge-meaning {
    display: block;
    font-size: var(--text-xs);
    color: var(--ink-muted);
    margin-top: var(--space-1);
}

/* Signals Section */
.index-signals-section {
    margin: var(--space-5) 0;
}

.index-signals-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--ink);
    margin: 0 0 var(--space-4) 0;
}

.index-signals-title svg {
    width: 16px;
    height: 16px;
    color: var(--accent);
}

/* Enhanced Signal Row */
.index-signal-row.enhanced {
    padding-bottom: var(--space-3);
}

.index-signal-row.enhanced .index-signal-markers {
    margin-top: var(--space-2);
}

/* ═══════════════════════════════════════════════════════════════════════════
   INDEX 4: FLOW & CHURN - Tempo Badge & Operational Playbook
   ═══════════════════════════════════════════════════════════════════════════ */

/* Tempo Badge */
.index-tempo-badge {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background: linear-gradient(135deg, var(--accent-subtle) 0%, var(--surface-1) 100%);
    border: 1px solid var(--accent);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-6);
}

.index-tempo-badge svg {
    width: 24px;
    height: 24px;
    color: var(--accent);
}

.index-tempo-label {
    display: block;
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--ink);
}

.index-tempo-case {
    display: block;
    font-size: var(--text-xs);
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

/* Tempo Badge Variants */
.index-tempo-badge.high-tempo {
    border-color: var(--caution);
    background: linear-gradient(135deg, var(--caution-subtle) 0%, var(--surface-1) 100%);
}

.index-tempo-badge.high-tempo svg {
    color: var(--caution);
}

.index-tempo-badge.efficient,
.index-tempo-badge.stable {
    border-color: var(--positive);
    background: linear-gradient(135deg, var(--positive-subtle) 0%, var(--surface-1) 100%);
}

.index-tempo-badge.efficient svg,
.index-tempo-badge.stable svg {
    color: var(--positive);
}

.index-tempo-badge.challenging {
    border-color: var(--negative);
    background: linear-gradient(135deg, var(--negative-subtle) 0%, var(--surface-1) 100%);
}

.index-tempo-badge.challenging svg {
    color: var(--negative);
}

.index-tempo-badge.variable,
.index-tempo-badge.patient {
    border-color: var(--ink-subtle);
    background: linear-gradient(135deg, var(--surface-2) 0%, var(--surface-1) 100%);
}

.index-tempo-badge.variable svg,
.index-tempo-badge.patient svg {
    color: var(--ink-muted);
}

/* Score Box Labels */
.index-score-box-label.strong {
    background: var(--positive-subtle);
    color: var(--positive);
}

.index-score-box-label.steady {
    background: var(--accent-subtle);
    color: var(--accent);
}

.index-score-box-label.slow {
    background: var(--caution-subtle);
    color: var(--caution);
}

.index-score-box-label.low {
    background: var(--positive-subtle);
    color: var(--positive);
}

.index-score-box-label.medium {
    background: var(--caution-subtle);
    color: var(--caution);
}

.index-score-box-label.high {
    background: var(--negative-subtle);
    color: var(--negative);
}

.index-score-box-meaning {
    display: block;
    font-size: var(--text-xs);
    color: var(--ink-muted);
    margin-top: var(--space-2);
}

/* Operational Playbook */
.index-playbook {
    background: var(--surface-1);
    border: 1px solid var(--surface-3);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-6);
}

.index-playbook-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--ink);
    margin-bottom: var(--space-4);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

.index-playbook-title svg {
    width: 16px;
    height: 16px;
    color: var(--accent);
}

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

.index-playbook-item {
    background: var(--surface-0);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    text-align: center;
}

.index-playbook-item.full-width {
    grid-column: 1 / -1;
    text-align: left;
}

.index-playbook-label {
    display: block;
    font-size: var(--text-xs);
    color: var(--ink-subtle);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    margin-bottom: var(--space-1);
}

.index-playbook-value {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--ink);
}

.index-playbook-because {
    display: block;
    font-size: var(--text-xs);
    font-style: italic;
    color: var(--ink-muted);
    margin-top: var(--space-2);
    line-height: 1.4;
}

/* Ops Focus section - full width below the 3-column grid */
.index-playbook-focus {
    margin-top: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--surface-0);
    border-radius: var(--radius-md);
}

.index-playbook-focus-label {
    font-size: var(--text-xs);
    color: var(--ink-subtle);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    margin-right: var(--space-2);
}

.index-playbook-focus-value {
    font-size: var(--text-sm);
    color: var(--ink);
}

/* Flow/Churn Drivers Section */
.index-drivers-section {
    margin-bottom: var(--space-6);
}

.index-drivers-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--ink);
    margin-bottom: var(--space-4);
}

.index-drivers-title svg {
    width: 16px;
    height: 16px;
    color: var(--positive);
}

.index-drivers-title.churn svg {
    color: var(--caution);
}

.index-drivers-subtitle {
    font-weight: var(--font-normal);
    font-size: var(--text-xs);
    color: var(--ink-subtle);
    margin-left: var(--space-2);
}

/* Flow Drivers Section (V3 style) */
.index-flow-drivers-section,
.index-churn-drivers-section {
    background: var(--surface-1);
    border: 1px solid var(--surface-3);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-5);
}

.index-flow-drivers-list,
.index-churn-drivers-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.flow-driver-row,
.churn-driver-row {
    display: grid;
    grid-template-columns: 140px 80px 1fr;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--surface-2);
}

.flow-driver-row:last-child,
.churn-driver-row:last-child {
    border-bottom: none;
}

.flow-driver-label,
.churn-driver-label {
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

.flow-driver-value,
.churn-driver-value {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--ink);
    font-family: var(--font-mono);
}

.flow-driver-note,
.churn-driver-note {
    font-size: var(--text-xs);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    text-align: right;
    white-space: nowrap;
}

.flow-driver-note.high,
.flow-driver-note.very-high,
.churn-driver-note.high,
.churn-driver-note.very-high {
    background: var(--pressure-subtle);
    color: var(--pressure);
}

.flow-driver-note.moderate,
.churn-driver-note.moderate {
    background: var(--caution-subtle);
    color: var(--caution);
}

.flow-driver-note.low,
.flow-driver-note.balanced,
.churn-driver-note.low {
    background: var(--positive-subtle);
    color: var(--positive);
}

/* Flow Anchors Chips */
.index-flow-anchors {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-top: var(--space-3);
}

.flow-anchors-label {
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

.flow-anchors-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.flow-anchor-chip {
    display: inline-block;
    font-size: var(--text-xs);
    padding: var(--space-1) var(--space-3);
    background: var(--accent-subtle);
    color: var(--accent);
    border: 1px solid var(--accent-muted);
    border-radius: var(--radius-full);
    font-weight: var(--font-medium);
}

.flow-anchor-chip.muted {
    background: var(--surface-2);
    color: var(--ink-muted);
    border-color: var(--surface-3);
}

/* Flow × Churn Position Matrix (9-case grid) */
.index-flow-matrix-section {
    margin-bottom: var(--space-6);
}

.index-flow-matrix-section .index-section-title {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--ink);
    margin-bottom: var(--space-4);
}

.index-flow-matrix {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--surface-3);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--surface-0);
}

.matrix-header {
    display: grid;
    grid-template-columns: 80px repeat(3, 1fr);
    background: var(--surface-1);
    border-bottom: 1px solid var(--surface-3);
}

.matrix-header span {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    text-align: center;
}

.matrix-header span:first-child {
    text-align: left;
}

.matrix-row {
    display: grid;
    grid-template-columns: 80px repeat(3, 1fr);
    border-bottom: 1px solid var(--surface-2);
}

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

.matrix-row-label {
    padding: var(--space-4);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--ink);
    background: var(--surface-1);
    display: flex;
    align-items: center;
}

.matrix-cell {
    padding: var(--space-4);
    text-align: center;
    font-size: var(--text-sm);
    color: var(--ink-muted);
    border-left: 1px solid var(--surface-2);
}

.matrix-cell.active {
    background: var(--accent);
    color: var(--surface-0);
    font-weight: var(--font-semibold);
}

.matrix-explanation {
    margin-top: var(--space-3);
    font-size: var(--text-sm);
    font-style: italic;
    color: var(--ink-muted);
}

/* Dual Scores Flow Style (with colored top borders) */
.index-dual-scores.flow-style {
    margin-bottom: var(--space-5);
}

.index-dual-scores.flow-style .index-score-box.flow {
    border-top: 3px solid var(--accent);
}

.index-dual-scores.flow-style .index-score-box.churn {
    border-top: 3px solid var(--caution);
}

.index-dual-scores.flow-style .index-score-box.flow .index-score-box-value {
    color: var(--accent);
}

.index-dual-scores.flow-style .index-score-box.churn .index-score-box-value {
    color: var(--caution);
}

/* Responsive Playbook */
@media (max-width: 768px) {
    .index-playbook-grid {
        grid-template-columns: 1fr;
    }

    .index-playbook-item.full-width {
        grid-column: 1;
    }

    .flow-driver-row,
    .churn-driver-row {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }

    .flow-driver-note,
    .churn-driver-note {
        text-align: left;
    }

    .matrix-header,
    .matrix-row {
        grid-template-columns: 60px repeat(3, 1fr);
    }

    .matrix-cell {
        font-size: var(--text-xs);
        padding: var(--space-3);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   INDEX 5: PLACEMENT - Hub Cards & Commute Context
   ═══════════════════════════════════════════════════════════════════════════ */

/* Placement Badge */
.index-placement-badge {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background: linear-gradient(135deg, var(--accent-subtle) 0%, var(--surface-1) 100%);
    border: 1px solid var(--accent);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-6);
}

.index-placement-badge svg {
    width: 24px;
    height: 24px;
    color: var(--accent);
}

.index-placement-label {
    display: block;
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--ink);
}

.index-placement-hint {
    display: block;
    font-size: var(--text-xs);
    color: var(--ink-muted);
}

/* Placement Badge Variants */
.index-placement-badge.hub-adjacent {
    border-color: var(--positive);
    background: linear-gradient(135deg, var(--positive-subtle) 0%, var(--surface-1) 100%);
}

.index-placement-badge.hub-adjacent svg {
    color: var(--positive);
}

.index-placement-badge.commute-viable {
    border-color: var(--accent);
    background: linear-gradient(135deg, var(--accent-subtle) 0%, var(--surface-1) 100%);
}

.index-placement-badge.location-challenged {
    border-color: var(--caution);
    background: linear-gradient(135deg, var(--caution-subtle) 0%, var(--surface-1) 100%);
}

.index-placement-badge.location-challenged svg {
    color: var(--caution);
}

.index-placement-badge.validate-first {
    border-color: var(--ink-subtle);
    background: linear-gradient(135deg, var(--surface-2) 0%, var(--surface-1) 100%);
}

.index-placement-badge.validate-first svg {
    color: var(--ink-muted);
}

/* Score Box Placement Variant */
.index-score-box.placement .index-score-box-value {
    color: var(--accent);
}

.index-score-box.commute .index-score-box-value {
    color: var(--ink);
}

/* Commute Labels */
.index-score-box-label.excellent {
    background: var(--positive-subtle);
    color: var(--positive);
}

.index-score-box-label.good {
    background: var(--accent-subtle);
    color: var(--accent);
}

.index-score-box-label.moderate {
    background: var(--caution-subtle);
    color: var(--caution);
}

.index-score-box-label.weak {
    background: var(--negative-subtle);
    color: var(--negative);
}

/* Hub Cards Section */
.index-hubs-section {
    margin-bottom: var(--space-6);
}

.index-hubs-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--ink);
    margin-bottom: var(--space-4);
}

.index-hubs-title svg {
    width: 16px;
    height: 16px;
    color: var(--accent);
}

.index-hub-cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.index-hub-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    background: var(--surface-1);
    border: 1px solid var(--surface-3);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    transition: all var(--duration-fast) var(--ease-out);
}

.index-hub-card.primary {
    border-color: var(--accent);
    background: var(--accent-subtle);
}

.index-hub-card:hover {
    border-color: var(--accent);
}

.index-hub-icon {
    width: 40px;
    height: 40px;
    background: var(--surface-0);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.index-hub-card.primary .index-hub-icon {
    background: var(--accent);
    color: var(--surface-0);
}

.index-hub-icon svg {
    width: 20px;
    height: 20px;
    color: var(--accent);
}

.index-hub-card.primary .index-hub-icon svg {
    color: var(--surface-0);
}

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

.index-hub-name {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--ink);
    margin-bottom: var(--space-1);
}

.index-hub-meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-xs);
    color: var(--ink-muted);
}

.index-hub-type {
    background: var(--surface-2);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
}

.index-hub-jobs {
    color: var(--ink-subtle);
}

.index-hub-distance {
    text-align: right;
    flex-shrink: 0;
}

.index-hub-miles {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--ink);
}

.index-hub-commute {
    display: block;
    font-size: var(--text-xs);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
}

.index-hub-commute.excellent {
    background: var(--positive-subtle);
    color: var(--positive);
}

.index-hub-commute.good {
    background: var(--accent-subtle);
    color: var(--accent);
}

.index-hub-commute.moderate {
    background: var(--caution-subtle);
    color: var(--caution);
}

.index-hub-commute.weak {
    background: var(--negative-subtle);
    color: var(--negative);
}

/* Commute Panel */
.index-commute-panel {
    background: var(--surface-1);
    border: 1px solid var(--surface-3);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-6);
}

.index-commute-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--ink);
    margin-bottom: var(--space-4);
}

.index-commute-title svg {
    width: 16px;
    height: 16px;
    color: var(--accent);
}

.index-commute-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.index-commute-item {
    text-align: center;
    padding: var(--space-3);
    background: var(--surface-0);
    border-radius: var(--radius-md);
}

.index-commute-hub {
    font-size: var(--text-xs);
    color: var(--ink-muted);
    margin-bottom: var(--space-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.index-commute-distance {
    font-family: var(--font-mono);
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    color: var(--ink);
}

.index-commute-time {
    font-size: var(--text-xs);
    color: var(--ink-subtle);
    margin-top: var(--space-1);
}

.index-commute-note {
    font-size: var(--text-xs);
    color: var(--ink-muted);
    font-style: italic;
    text-align: center;
    margin: 0;
}

/* ZIP Section Enhanced */
.index-zips-section {
    margin-bottom: var(--space-6);
}

.index-zips-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--ink);
    margin-bottom: var(--space-4);
}

.index-zips-title svg {
    width: 16px;
    height: 16px;
    color: var(--accent);
}

.index-zip-card.top {
    border-color: var(--accent);
    background: var(--accent-subtle);
}

.index-zip-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.index-zip-tag {
    font-size: var(--text-xs);
    background: var(--surface-2);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    color: var(--ink-muted);
}

.index-zip-hub {
    font-size: var(--text-xs);
    color: var(--ink-subtle);
}

.index-zip-score-box {
    text-align: right;
}

.index-zip-access {
    display: block;
    font-size: var(--text-xs);
    color: var(--ink-muted);
    margin-top: var(--space-1);
}

/* Responsive Placement */
@media (max-width: 768px) {
    .index-commute-grid {
        grid-template-columns: 1fr;
    }

    .index-hub-card {
        flex-wrap: wrap;
    }

    .index-hub-distance {
        width: 100%;
        text-align: left;
        margin-top: var(--space-2);
        padding-top: var(--space-2);
        border-top: 1px solid var(--surface-3);
        display: flex;
        align-items: center;
        gap: var(--space-3);
    }

    .index-hub-miles {
        font-size: var(--text-base);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   INDEX 5: PLACEMENT - V3 Structure Components
   ═══════════════════════════════════════════════════════════════════════════ */

/* Recommended Siting Box */
.placement-siting-box {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    background: linear-gradient(135deg, var(--accent-subtle) 0%, var(--surface-1) 100%);
    border: 1px solid var(--accent-muted);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin: var(--space-6) 0;
}

.siting-icon {
    width: 44px;
    height: 44px;
    background: var(--accent);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.siting-icon svg {
    width: 22px;
    height: 22px;
    color: white;
}

.siting-content {
    flex: 1;
}

.siting-label {
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--caution);
    margin-bottom: var(--space-2);
}

.siting-text {
    font-size: var(--text-sm);
    color: var(--ink);
    line-height: var(--leading-relaxed);
    margin: 0;
}

/* Your Location Section */
.placement-your-location {
    margin: var(--space-6) 0;
}

.your-location-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--ink-muted);
    margin-bottom: var(--space-3);
}

.your-location-header svg {
    width: 14px;
    height: 14px;
    color: var(--accent);
}

.your-location-card {
    background: var(--surface-1);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
}

.your-location-main {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.your-location-zip-wrap {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.your-location-zip {
    font-family: var(--font-mono);
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--ink);
}

.local-area-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    color: var(--ink-muted);
    background: var(--surface-2);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
}

.local-area-tag svg {
    width: 12px;
    height: 12px;
}

.your-location-score {
    font-family: var(--font-mono);
    font-size: var(--text-2xl);
    font-weight: var(--font-semibold);
    color: var(--accent);
}

.your-location-max {
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

.your-location-label {
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--caution-subtle);
    color: var(--caution);
}

.your-location-label.high,
.your-location-label.strong,
.your-location-label.excellent {
    background: var(--positive-subtle);
    color: var(--positive);
}

.your-location-label.low,
.your-location-label.weak {
    background: var(--negative-subtle);
    color: var(--negative);
}

.your-location-rank {
    font-size: var(--text-sm);
    color: var(--ink-muted);
    margin-bottom: var(--space-4);
}

.your-location-rank strong {
    color: var(--accent);
}

.your-location-hubs {
    padding-top: var(--space-4);
    border-top: 1px solid var(--surface-3);
}

.your-location-hubs-label {
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--ink-muted);
    margin-bottom: var(--space-3);
}

.your-location-hub-item {
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--surface-2);
    font-size: var(--text-sm);
}

.your-location-hub-item:last-child {
    border-bottom: none;
}

.your-location-hub-item strong {
    color: var(--ink);
}

.hub-distance {
    color: var(--ink-muted);
    margin: 0 var(--space-2);
}

.hub-type-tag {
    color: var(--accent);
}

/* Better Alternatives Section */
.placement-alternatives {
    margin: var(--space-6) 0;
}

.alternatives-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--ink-muted);
    margin-bottom: var(--space-4);
}

.alternatives-header svg {
    width: 14px;
    height: 14px;
    color: var(--accent);
}

.alternatives-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.alternative-card {
    display: grid;
    grid-template-columns: 50px 120px 60px 80px 100px 1fr;
    gap: var(--space-3);
    align-items: center;
    background: var(--surface-1);
    border: 1px solid var(--surface-3);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    transition: all var(--duration-fast) var(--ease-out);
}

.alternative-card:hover {
    border-color: var(--accent-muted);
    box-shadow: var(--shadow-sm);
}

.alternative-card.top-ranked {
    background: linear-gradient(135deg, var(--accent-subtle) 0%, var(--surface-1) 100%);
    border-color: var(--accent);
}

.alternative-card.is-subject {
    border-color: var(--accent);
    border-width: 2px;
    background: linear-gradient(135deg, var(--accent-subtle) 0%, var(--surface-0) 100%);
}

.alternative-rank-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--ink-muted);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    display: flex;
    align-items: center;
    justify-content: center;
}

.alternative-rank-circle.top-three {
    background: var(--accent);
    color: white;
}

.alternative-zip-info {
    min-width: 0;
}

.alternative-zip-code {
    font-family: var(--font-mono);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.your-location-badge {
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: white;
    margin-left: var(--space-2);
    vertical-align: middle;
}

.alternative-score {
    font-family: var(--font-mono);
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    color: var(--accent);
    text-align: center;
}

.alternative-label {
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--positive-subtle);
    color: var(--positive);
    text-align: center;
}

.alternative-label.strong {
    background: var(--positive-subtle);
    color: var(--positive);
}

.alternative-label.mixed,
.alternative-label.medium {
    background: var(--caution-subtle);
    color: var(--caution);
}

.alternative-label.weak,
.alternative-label.low {
    background: var(--negative-subtle);
    color: var(--negative);
}

.alternative-hub-type {
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

.alternative-details {
    min-width: 0;
}

.alternative-access {
    font-size: var(--text-sm);
    color: var(--ink);
    margin-bottom: var(--space-1);
}

.alternative-demand {
    font-size: var(--text-xs);
    color: var(--ink-muted);
}

/* Demand Hubs Grid */
.placement-demand-hubs {
    margin: var(--space-6) 0;
}

.demand-hubs-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--ink-muted);
    margin-bottom: var(--space-4);
}

.demand-hubs-header svg {
    width: 14px;
    height: 14px;
    color: var(--accent);
}

.demand-hubs-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
}

.demand-hub-card {
    background: var(--surface-1);
    border: 1px solid var(--surface-3);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    transition: all var(--duration-fast) var(--ease-out);
}

.demand-hub-card:hover {
    border-color: var(--accent-muted);
    box-shadow: var(--shadow-sm);
}

.demand-hub-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.demand-hub-name {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--ink);
    line-height: var(--leading-snug);
}

.demand-hub-type-badge {
    font-size: var(--text-xs);
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--ink-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.demand-hub-distance {
    font-size: var(--text-xs);
    color: var(--ink-muted);
    margin-bottom: var(--space-2);
}

.demand-hub-desc {
    font-size: var(--text-xs);
    color: var(--ink-subtle);
    line-height: var(--leading-relaxed);
}

/* Responsive Index 5 V3 Components */
@media (max-width: 1024px) {
    .demand-hubs-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .alternative-card {
        grid-template-columns: 40px 1fr;
        gap: var(--space-2);
    }

    .alternative-score,
    .alternative-label,
    .alternative-hub-type,
    .alternative-details {
        grid-column: 2;
    }
}

@media (max-width: 768px) {
    .demand-hubs-grid {
        grid-template-columns: 1fr;
    }

    .placement-siting-box {
        flex-direction: column;
        text-align: center;
    }

    .your-location-main {
        flex-wrap: wrap;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   INDEX 6: COMPETITION - Posture Badge, Metrics Grid, Landlord Mix
   ═══════════════════════════════════════════════════════════════════════════ */

/* Competition Posture Badge */
.index-competition-badge {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background: linear-gradient(135deg, var(--accent-subtle) 0%, var(--surface-1) 100%);
    border: 1px solid var(--accent);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-6);
}

.index-competition-badge svg {
    width: 24px;
    height: 24px;
    color: var(--accent);
}

.index-competition-label {
    display: block;
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--ink);
}

.index-competition-hint {
    display: block;
    font-size: var(--text-xs);
    color: var(--ink-muted);
}

/* Competition Badge Variants */
.index-competition-badge.first-mover {
    border-color: var(--positive);
    background: linear-gradient(135deg, var(--positive-subtle) 0%, var(--surface-1) 100%);
}

.index-competition-badge.first-mover svg {
    color: var(--positive);
}

.index-competition-badge.competitive-edge {
    border-color: var(--accent);
    background: linear-gradient(135deg, var(--accent-subtle) 0%, var(--surface-1) 100%);
}

.index-competition-badge.niche-or-nothing {
    border-color: var(--caution);
    background: linear-gradient(135deg, var(--caution-subtle) 0%, var(--surface-1) 100%);
}

.index-competition-badge.niche-or-nothing svg {
    color: var(--caution);
}

.index-competition-badge.validate-first {
    border-color: var(--ink-subtle);
    background: linear-gradient(135deg, var(--surface-2) 0%, var(--surface-1) 100%);
}

.index-competition-badge.validate-first svg {
    color: var(--ink-muted);
}

/* Score Box Competition Variants */
.index-score-box.saturation .index-score-box-value {
    color: var(--accent);
}

.index-score-box.operators .index-score-box-value {
    color: var(--ink);
}

/* Saturation/Pro Labels */
.index-score-box-label.few {
    background: var(--positive-subtle);
    color: var(--positive);
}

.index-score-box-label.mixed {
    background: var(--accent-subtle);
    color: var(--accent);
}

.index-score-box-label.dominated {
    background: var(--caution-subtle);
    color: var(--caution);
}

/* Competition Metrics Grid */
.index-competition-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.index-competition-metric {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background: var(--surface-1);
    border: 1px solid var(--surface-3);
    border-radius: var(--radius-md);
    padding: var(--space-4);
}

.index-competition-metric.positive {
    border-color: var(--positive);
    background: var(--positive-subtle);
}

.index-competition-metric.negative {
    border-color: var(--negative);
    background: var(--negative-subtle);
}

.index-competition-metric-icon {
    width: 36px;
    height: 36px;
    background: var(--surface-0);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.index-competition-metric-icon svg {
    width: 18px;
    height: 18px;
    color: var(--accent);
}

.index-competition-metric.positive .index-competition-metric-icon svg {
    color: var(--positive);
}

.index-competition-metric.negative .index-competition-metric-icon svg {
    color: var(--negative);
}

.index-competition-metric-content {
    flex: 1;
    min-width: 0;
}

.index-competition-metric-value {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    color: var(--ink);
}

.index-competition-metric-label {
    display: block;
    font-size: var(--text-xs);
    color: var(--ink-muted);
}

/* Landlord Mix Visualization */
.index-landlord-mix {
    background: var(--surface-1);
    border: 1px solid var(--surface-3);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-6);
}

.index-landlord-mix-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--ink);
    margin-bottom: var(--space-4);
}

.index-landlord-mix-title svg {
    width: 16px;
    height: 16px;
    color: var(--accent);
}

.index-landlord-mix-bar {
    display: flex;
    height: 24px;
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: var(--space-3);
}

.index-landlord-pro {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark, #1f5252) 100%);
    transition: width var(--duration-normal) var(--ease-out);
}

.index-landlord-amateur {
    background: linear-gradient(135deg, var(--surface-3) 0%, var(--surface-2) 100%);
    transition: width var(--duration-normal) var(--ease-out);
}

.index-landlord-mix-legend {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
}

.index-landlord-legend-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--ink-muted);
}

.index-landlord-dot {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
}

.index-landlord-dot.pro {
    background: var(--accent);
}

.index-landlord-dot.amateur {
    background: var(--surface-3);
}

/* ═══════════════════════════════════════════════════════════════════════════
   INDEX 6: COMPETITION - Enhanced V4 Styles (V3 Structure)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Score Value Row with /100 */
.index-score-value-row {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: var(--space-1);
}

.index-score-max {
    font-size: var(--text-lg);
    color: var(--ink-muted);
    font-weight: var(--font-normal);
}

/* Competition-specific dual scores */
.index-dual-scores.competition .index-score-box {
    border-top: 3px solid transparent;
}

.index-dual-scores.competition .index-score-box.saturation {
    border-top-color: var(--accent);
}

.index-dual-scores.competition .index-score-box.operators {
    border-top-color: var(--caution);
}

/* Market Type Quadrant Box */
.index-market-type-box {
    background: var(--surface-1);
    border: 1px solid var(--surface-3);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-6);
}

.index-market-type-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.index-market-type-header svg {
    width: 16px;
    height: 16px;
    color: var(--accent);
}

.index-market-type-header span {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-muted);
    font-weight: var(--font-semibold);
}

.index-market-type-title {
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    color: var(--ink);
    margin: 0 0 var(--space-2) 0;
}

.index-market-type-meaning {
    font-size: var(--text-sm);
    color: var(--ink-muted);
    line-height: 1.5;
    margin: 0;
}

/* Quadrant Box Variants */
.index-market-type-box.quadrant-crowded-pro {
    border-left: 4px solid var(--caution);
    background: linear-gradient(135deg, var(--caution-subtle) 0%, var(--surface-1) 100%);
}

.index-market-type-box.quadrant-crowded-diy {
    border-left: 4px solid var(--accent);
    background: linear-gradient(135deg, var(--accent-subtle) 0%, var(--surface-1) 100%);
}

.index-market-type-box.quadrant-light-pro {
    border-left: 4px solid var(--accent);
    background: linear-gradient(135deg, var(--accent-subtle) 0%, var(--surface-1) 100%);
}

.index-market-type-box.quadrant-gap {
    border-left: 4px solid var(--positive);
    background: linear-gradient(135deg, var(--positive-subtle) 0%, var(--surface-1) 100%);
}

/* Driver Tiles Grid (with tooltips and thresholds) */
.index-driver-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.index-driver-tiles.two-col {
    grid-template-columns: repeat(2, 1fr);
}

.index-driver-tile {
    background: var(--surface-1);
    border: 1px solid var(--surface-3);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    text-align: center;
}

.index-driver-tile-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-muted);
    margin-bottom: var(--space-3);
}

.index-driver-tile-value {
    font-family: var(--font-mono);
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    color: var(--ink);
    line-height: 1;
    margin-bottom: var(--space-2);
}

.index-driver-tile-value.na {
    color: var(--ink-subtle);
}

.index-driver-tile-status {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    margin-bottom: var(--space-2);
}

/* Driver Tile Status Variants */
.index-driver-tile-status.low {
    background: var(--positive-subtle);
    color: var(--positive);
}

.index-driver-tile-status.medium {
    background: var(--accent-subtle);
    color: var(--accent);
}

.index-driver-tile-status.high {
    background: var(--caution-subtle);
    color: var(--caution);
}

.index-driver-tile-status.diy {
    background: var(--positive-subtle);
    color: var(--positive);
}

.index-driver-tile-status.mixed {
    background: var(--accent-subtle);
    color: var(--accent);
}

.index-driver-tile-status.operator-led {
    background: var(--caution-subtle);
    color: var(--caution);
}

.index-driver-tile-status.below {
    background: var(--positive-subtle);
    color: var(--positive);
}

.index-driver-tile-status.aligned {
    background: var(--accent-subtle);
    color: var(--accent);
}

.index-driver-tile-status.above {
    background: var(--caution-subtle);
    color: var(--caution);
}

.index-driver-tile-status.na {
    background: var(--surface-2);
    color: var(--ink-subtle);
}

.index-driver-tile-threshold {
    font-size: var(--text-xs);
    color: var(--ink-muted);
    line-height: 1.4;
}

.index-driver-tile-threshold .threshold-hint {
    display: block;
    font-size: 10px;
    color: var(--ink-subtle);
    margin-top: var(--space-1);
}

/* Strategic Posture Section */
.index-posture-section {
    background: var(--surface-1);
    border: 1px solid var(--surface-3);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-6);
}

.index-posture-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.index-posture-header svg {
    width: 16px;
    height: 16px;
    color: var(--accent);
}

.index-posture-header span {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent);
    font-weight: var(--font-semibold);
}

.index-posture-title {
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    color: var(--ink);
    margin: 0 0 var(--space-4) 0;
}

.index-posture-reasoning {
    border-left: 3px solid var(--accent);
    padding-left: var(--space-4);
}

.index-posture-row {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.index-posture-row:last-child {
    margin-bottom: 0;
}

.index-posture-label {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--accent);
    min-width: 80px;
    text-transform: uppercase;
    font-size: var(--text-xs);
}

.index-posture-value {
    font-size: var(--text-sm);
    color: var(--ink);
    line-height: 1.5;
}

/* Next Moves Dark Box */
.index-next-moves.dark {
    background: var(--ink);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-6);
}

.index-next-moves.dark .index-next-moves-title {
    color: var(--caution);
}

.index-next-moves.dark .index-next-moves-title svg {
    color: var(--caution);
}

.index-next-moves.dark .index-next-move {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
}

.index-next-moves.dark .index-next-move span {
    color: var(--surface-0);
}

.index-next-moves.dark .index-next-move-icon {
    background: rgba(255, 255, 255, 0.1);
}

.index-next-moves.dark .index-next-move-icon svg {
    color: var(--caution);
}

/* Market Read Section */
.index-market-read {
    margin-bottom: var(--space-6);
}

.index-market-read-label {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-muted);
    font-weight: var(--font-semibold);
    margin-bottom: var(--space-3);
}

.index-market-read-quote {
    font-size: var(--text-lg);
    font-style: italic;
    color: var(--ink);
    line-height: 1.6;
    margin: 0 0 var(--space-4) 0;
    padding-left: var(--space-4);
    border-left: 3px solid var(--accent);
}

/* Confidence Reasons */
.index-confidence-reasons {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.index-confidence-reason {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

.index-confidence-reason svg {
    width: 14px;
    height: 14px;
    color: var(--positive);
    flex-shrink: 0;
}

/* Source Footer Detailed */
.index-source-footer.detailed {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.index-source-footer .separator {
    color: var(--surface-3);
}

/* Responsive Competition */
@media (max-width: 768px) {
    .index-competition-metrics {
        grid-template-columns: 1fr;
    }

    .index-landlord-mix-legend {
        flex-direction: column;
        gap: var(--space-2);
    }

    .index-driver-tiles {
        grid-template-columns: 1fr;
    }

    .index-driver-tiles.two-col {
        grid-template-columns: 1fr;
    }

    .index-posture-row {
        flex-direction: column;
        gap: var(--space-1);
    }

    .index-posture-label {
        min-width: auto;
    }

    .index-source-footer.detailed {
        flex-direction: column;
        align-items: flex-start;
    }

    .index-source-footer .separator {
        display: none;
    }
}

/* Source Footer */
.index-source-footer {
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--surface-3);
    font-size: var(--text-xs);
    color: var(--ink-subtle);
}

/* Responsive */
@media (max-width: 768px) {
    .index-mini-cards {
        grid-template-columns: 1fr;
    }

    .index-dual-scores {
        grid-template-columns: 1fr;
    }

    .index-pricing-ladder {
        grid-template-columns: 1fr;
    }

    .index-driver-tiles {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════════════════ */
.report-footer {
    background: var(--surface-2);
    padding: var(--space-8) var(--space-6);
    margin-top: var(--space-10);
}

.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.footer-credit {
    font-size: var(--text-sm);
    font-weight: var(--font-normal);
    color: var(--ink-muted);
    letter-spacing: normal;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════════════════ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
    text-decoration: none;
}

.btn-primary {
    background: var(--accent);
    color: var(--surface-0);
}

.btn-primary:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE STYLES
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .questions-grid {
        grid-template-columns: 1fr;
    }

    .question-card-featured {
        grid-column: 1;
    }

    .wedge-details {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    html {
        font-size: 15px;
    }

    .header-inner {
        padding: var(--space-3) var(--space-4);
    }

    .logo-text {
        display: none;
    }

    .nav-link span:not(.nav-icon) {
        display: none;
    }

    .report-hero {
        padding: var(--space-8) var(--space-4) var(--space-12);
    }

    .hero-address {
        font-size: var(--text-2xl);
    }

    .hero-stats {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-4);
    }

    .hero-stat {
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        padding: var(--space-3);
        background: rgba(255, 255, 255, 0.08);
        border-radius: var(--radius-md);
    }

    .stat-value {
        font-size: var(--text-2xl);
    }

    .hero-divider {
        display: none;
    }

    .report-body {
        padding: var(--space-4);
        margin-top: -32px;
        gap: var(--space-6);
    }

    .snapshot-header {
        padding: var(--space-4) var(--space-5);
    }

    .snapshot-body {
        padding: var(--space-5);
    }

    .snapshot-thesis {
        font-size: var(--text-lg);
    }

    .snapshot-cards {
        grid-template-columns: 1fr;
    }

    .question-header {
        padding: var(--space-4);
    }

    .question-body {
        padding: var(--space-4);
    }

    .risk-indicators {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }

    .risk-indicator {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        text-align: left;
    }

    .risk-bar {
        flex: 1;
    }

    .archetype-card {
        flex: 0 0 260px;
    }

    /* Play Cards - Tablet */
    .play-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }

    .play-header-main {
        width: 100%;
    }

    .play-header-meta {
        width: 100%;
        justify-content: flex-start;
        padding-top: var(--space-3);
        border-top: 1px solid var(--surface-2);
        margin-top: var(--space-2);
    }

    .play-confidence-label {
        writing-mode: horizontal-tb;
        transform: none;
    }

    .play-preview {
        flex-wrap: wrap;
        gap: var(--space-3);
    }

    .play-framework-grid {
        grid-template-columns: 1fr;
    }

    .indices-section {
        padding: var(--space-5);
    }

    .tab-buttons {
        gap: var(--space-1);
    }

    .tab-btn {
        padding: var(--space-2) var(--space-3);
        font-size: var(--text-xs);
    }

    .index-score-display {
        flex-direction: column;
        text-align: center;
    }

    .index-score-value {
        font-size: var(--text-4xl);
    }
}

@media (max-width: 480px) {
    html {
        font-size: 14px;
    }

    .hero-address {
        font-size: var(--text-xl);
    }

    .section-title {
        font-size: var(--text-2xl);
    }

    .pool-total {
        font-size: var(--text-3xl);
    }

    .archetype-card {
        flex: 0 0 240px;
        padding: var(--space-4);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRINT STYLES
   ═══════════════════════════════════════════════════════════════════════════ */
@media print {
    .site-header,
    .btn-download {
        display: none;
    }

    .question-card,
    .archetype-card,
    .play-card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid var(--surface-3);
    }

    .play-body {
        display: block !important;
    }

    .report-hero {
        background: var(--surface-inverse) !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}